/* Page-specific styles for sole-trader-vs-limited-company-calculator-app.html.
   Shared layout, colours and components live in brand-shared.css (the
   whole site) and calculator-shared.css (every calculator) — this file
   only holds what's unique to this calculator. The two-column layout is
   the shared .layout-split; the headline is the shared .result-compare tiles, the
   breakdown is table.tax-table, the tax comparison is .hbars and the chart
   frame is the balance charts' .chart-wrap and .chart-legend.

   Colours: the sole trader is --accent (brown) and the company --brand
   (navy) everywhere on the page - the chart lines, their key and the bars.
   The chart also draws the sole trader dashed, so colour is never the only
   way to tell the two apart. */

  .calc-shell #ltdNote { margin: -6px 0 14px; }


  /* The chart key: the sole trader's dashed line, the company's solid one,
     and the thin upright line at your profit. */
  .calc-shell .chart-legend .dot.st,
  .calc-shell .chart-legend .dot.co,
  .calc-shell .chart-legend .dot.you {
    width: 16px;
    height: 0;
    border-radius: 0;
    background: transparent;
    vertical-align: 4px;
  }
  .calc-shell .chart-legend .dot.st { border-top: 3px dashed var(--accent); }
  .calc-shell .chart-legend .dot.co { border-top: 3px solid var(--brand); }
  .calc-shell .chart-legend .dot.you {
    width: 0;
    height: 12px;
    border-left: 1px solid color-mix(in srgb, var(--ink) 50%, transparent);
    margin-inline: 5px 9px;
    vertical-align: -1px;
  }

  .calc-shell .chart-legend .dot.ahead { background: color-mix(in srgb, var(--brand) 18%, transparent); border: 1px solid color-mix(in srgb, var(--brand) 30%, transparent); }

  /* The bars as written in the page, before the script colours them. */
  .calc-shell .hbar:first-child .hbar-fill { background: var(--accent); }

  /* On a phone the hand-off links stack, so each one starts at the left
     edge and its tooltip has room to open inside the screen. */
  @media (max-width: 560px) {
    .calc-shell .note.handoffs { flex-direction: column; align-items: flex-start; }
  }
  /* Six figures under the headline: three to a row, two on a phone. A very
     large figure breaks rather than running out of its tile. */
  .calc-shell #resultsCard .stat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  @media (max-width: 560px) {
    .calc-shell #resultsCard .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  .calc-shell #resultsCard .stat .v { overflow-wrap: anywhere; }