/* side-hustle.css — styles specific to the Side Hustle Profit Calculator.
   Reuses the shared tokens (global.css) and the form/result classes from
   calculator.css (.field, .input-wrap, .card, .summary-stat, .seg-toggle,
   .opt-fields, .breakdown, .section-label). Only the genuinely new pieces live
   here: the preset bar, stream chips, the true-hourly hero, verdict, waterfall,
   tax hand-off, and the combined-streams table. */

/* Guard against sideways scroll on phones: AdSense can render an ad wider than a
   narrow viewport (it fills the slot at load and doesn't re-request when the
   viewport narrows), which forces a horizontal scrollbar and the empty band to
   its right. Clip each ad slot to its own column. (.ad-unit is never an ancestor
   of the sticky results panel, so this does not affect position:sticky.) */
.ad-unit { max-width: 100%; overflow: hidden; }
.ad-unit .adsbygoogle { max-width: 100%; }

/* Page-scoped canvas: this tool's form is longer than the tax tool's, so give
   it a bit more room than the shared 920px container. This sheet only loads on
   the side-hustle page, so the rest of the site is unaffected. */
.container { max-width: 1080px; }
.site-header .nav { max-width: 1080px; }
/* Keep the supporting prose readable despite the wider canvas. */
article .content-section { max-width: 74ch; }

/* All selects on this page get a themed look + a custom caret (page-scoped). */
.preset-bar select,
.calc-form select {
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  padding-right: 2.1rem;
}

/* Preset picker bar — match the form selects, but don't sprawl to full width */
.preset-bar { margin-bottom: 0.85rem; }
.preset-bar select {
  width: 100%; max-width: 460px; font-size: 1rem; font-family: inherit;
  padding: 0.65rem 2.1rem 0.65rem 0.8rem;
  border: 1px solid var(--border); border-radius: 10px;
  background-color: var(--surface); color: var(--text); cursor: pointer;
}
.preset-bar select:focus { border-color: var(--accent); }
.preset-blurb { margin: 0.5rem 0 0; }

/* ---- Desktop layout: compact 2-column form beside a sticky results rail ----
   The form has many sections; on a wide screen we flow its fieldsets into two
   masonry columns so its height roughly matches the results, killing the big
   empty gap under the results panel. The results rail sticks as you scroll. */
@media (max-width: 979.98px) {
  /* Override calculator.css's 880px two-column rule: stack until we have room
     for the two-column form, so we never show a long single-column form beside
     a short results box. */
  #calculator { grid-template-columns: 1fr; }
}
@media (min-width: 980px) {
  #calculator { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); align-items: start; }

  /* The form is a single vertical stack of full-width SECTION cards (no masonry,
     so no cross-card column-balancing gaps). Each card then lays ITS OWN fields
     out in two columns to fill its width — so the empty space lives inside a
     filled card (intentional) rather than beside short cards. */
  #sh-form {
    display: flex; flex-direction: column; gap: 1.25rem;
    background: transparent; border: none; box-shadow: none; padding: 0;
  }
  #sh-form fieldset {
    margin: 0;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 1.1rem 1.25rem 1.2rem; box-shadow: var(--shadow);
    /* two-column field layout inside the card */
    display: grid; grid-template-columns: 1fr 1fr; column-gap: 1.1rem; row-gap: 0.7rem;
    align-content: start; align-items: start;
  }
  /* Making the fieldset a grid container also pulls the <legend> back inside as a
     normal grid item instead of the native "sit on the border" rendering — which
     is why the titles were poking out of the cards. */
  #sh-form fieldset > legend,
  #sh-form fieldset > .period-field,
  #sh-form fieldset > .field-row,
  #sh-form fieldset > .opt-toggle,
  #sh-form fieldset > .opt-fields,
  #sh-form fieldset > .info-note,
  #sh-form fieldset > .tip-note,
  #sh-form fieldset > .time-sub,
  #sh-form fieldset > .time-grid,
  #sh-form fieldset > .group-period-note,
  #sh-form fieldset > p,
  #sh-form fieldset > .field:has(.seg-toggle) {
    grid-column: 1 / -1;
  }
  /* A bordered <fieldset>'s <legend> is the special "rendered legend" that sits
     on the top border (that's why titles poked out). Giving it a non-default
     float demotes it to a normal in-flow box inside the card padding. */
  #sh-form fieldset > legend { float: left; width: 100%; margin: 0 0 0.6rem; }
  #sh-form fieldset > .field { margin-bottom: 0; }
  /* Earnings: in gross-entry mode pair the period selector with gross earnings
     (period left, gross right) so the row is filled even when there are no tips
     (sellers). In per-unit mode the period stays full-width above rate × units. */
  #grp-earnings:has(#sh-gross-wrap:not([hidden])) > .period-field { grid-column: auto; }
  #grp-earnings > #sh-tips-wrap { grid-column: 1 / -1; }
  #grp-time .time-grid { grid-template-columns: repeat(3, 1fr); }

  /* "Is it worth it?" has a single input — pair it with a helper line so the
     card is filled rather than half-empty (override the full-width <p> rule). */
  #grp-compare > .compare-help { grid-column: auto; align-self: center; margin: 0; }

  .results-panel { position: sticky; top: 4.75rem; align-self: start; }
}

/* Stream chips */
.streams-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-bottom: 1rem; }
.streams-row { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: stretch; }
.stream-chip {
  display: inline-flex; flex-direction: column; align-items: flex-start; gap: 0.05rem;
  border: 1px solid var(--border); background: var(--surface); color: var(--text);
  border-radius: 999px; padding: 0.4rem 0.9rem; cursor: pointer; font-family: inherit;
  font-size: 0.9rem; line-height: 1.2;
}
.stream-chip.is-active { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); }
.stream-chip .stream-name { font-weight: 700; }
.stream-chip .stream-sub { font-size: 0.72rem; color: var(--text-faint); font-variant-numeric: tabular-nums; }
.stream-x {
  border: 1px solid var(--border); background: var(--surface-2); color: var(--text-faint);
  border-radius: 999px; width: 1.6rem; height: 1.6rem; cursor: pointer; font-size: 0.75rem;
  align-self: center; margin-left: -0.35rem;
}
.stream-x:hover { color: #b91c1c; border-color: #fca5a5; }
.btn-add { padding: 0.4rem 0.9rem; border-radius: 999px; font-size: 0.9rem; cursor: pointer; }

/* Period field — leads the Earnings group so the time window is unmistakable */
.period-field {
  background: color-mix(in srgb, var(--accent) 7%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
  border-radius: 10px; padding: 0.7rem 0.85rem; margin-bottom: 1rem;
}
.period-field label { margin-bottom: 0.4rem; }
.period-hint { margin: 0.4rem 0 0; }
.group-period-note { margin: 0 0 0.6rem; }

/* Form group legends (match calculator.css legend, plus a small flag) */
.calc-form .legend-flag {
  font-weight: 600; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent);
  padding: 0.1rem 0.5rem; border-radius: 999px; margin-left: 0.4rem; vertical-align: middle;
}
.calc-form fieldset { margin-bottom: 1.25rem; }
.calc-form fieldset[hidden] { display: none; }

/* Time group */
.time-sub { font-weight: 600; font-size: 0.9rem; margin: 0.25rem 0 0.5rem; }
.time-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem 0.75rem; }
@media (max-width: 520px) { .time-grid { grid-template-columns: 1fr; } }

/* Suffix affix needs spacing when both prefix and suffix exist (e.g. $ /hr) */
.input-wrap:has(.affix:first-child):has(.affix:last-child:not(:first-child)) input { padding-right: 2.6rem; }

/* ---- Headline: true hourly wage hero ---- */
.hero-wage {
  text-align: center; border-top: 3px solid var(--success);
  background: linear-gradient(160deg, var(--surface), var(--surface-2));
}
.hero-wage-label { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-faint); }
.hero-wage-num {
  font-size: clamp(2.4rem, 8vw, 3.4rem); font-weight: 800; line-height: 1.05;
  color: var(--success); font-variant-numeric: tabular-nums; margin: 0.15rem 0;
}
.hero-wage-num.is-negative { color: #dc2626; }
[data-theme='dark'] .hero-wage-num.is-negative { color: #f87171; }
.hero-wage-sub { font-size: 0.92rem; color: var(--text-muted); }
.hero-naive {
  margin-top: 0.85rem; padding-top: 0.75rem; border-top: 1px dashed var(--border);
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 0.4rem;
}
.hero-naive .naive-label { font-size: 0.85rem; color: var(--text-faint); }
.hero-naive .naive-num { font-size: 1.1rem; font-weight: 800; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.hero-naive .naive-hint { font-size: 0.8rem; color: var(--text-faint); flex-basis: 100%; }

/* Verdict */
.verdict-box {
  margin-top: 0.85rem; padding: 0.85rem 1rem; border-radius: var(--radius);
  border: 1px solid var(--border); font-size: 0.95rem;
}
.verdict-box.is-good { background: color-mix(in srgb, var(--success) 12%, transparent); border-color: color-mix(in srgb, var(--success) 40%, transparent); }
.verdict-box.is-bad { background: color-mix(in srgb, #f59e0b 12%, transparent); border-color: color-mix(in srgb, #f59e0b 40%, transparent); }
.verdict-text { margin: 0; }

/* Break-even box */
.breakeven-box {
  margin-top: 0.65rem; padding: 0.85rem 1rem; border-radius: var(--radius);
  border: 1px solid var(--border); background: var(--surface-2);
}
.breakeven-title { margin: 0 0 0.55rem; font-weight: 700; font-size: 0.95rem; }
.breakeven-options { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.breakeven-options li { font-size: 0.92rem; color: var(--text-muted); padding-left: 0.1rem; }
.breakeven-options .be-key {
  display: inline-block; font-weight: 800; font-size: 0.7rem; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  padding: 0.1rem 0.5rem; border-radius: 999px; margin-right: 0.4rem; vertical-align: 0.05em;
}
.breakeven-options strong { color: var(--text); }
.breakeven-note { margin: 0.6rem 0 0; padding-top: 0.5rem; border-top: 1px dashed var(--border); }

/* Secondary stat grid spacing (reuses .summary-grid/.summary-stat from calculator.css) */
.sh-secondary { margin-top: 0.85rem; }

/* ---- What-if sliders ---- */
.whatif { margin-top: 1.25rem; }
.whatif-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 0.75rem 1rem; }
.whatif-title { margin: 0; font-size: 1.15rem; }
.whatif-sub { margin: 0.2rem 0 0; }
.whatif-readout { text-align: right; line-height: 1.1; }
.whatif-wage { display: block; font-size: 1.7rem; font-weight: 800; color: var(--success); font-variant-numeric: tabular-nums; }
.whatif-wage.is-negative { color: #dc2626; }
[data-theme='dark'] .whatif-wage.is-negative { color: #f87171; }
.whatif-delta { font-size: 0.85rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.whatif-delta.up { color: var(--success); }
.whatif-delta.down { color: #dc2626; }
[data-theme='dark'] .whatif-delta.down { color: #f87171; }

.whatif-sliders { display: grid; gap: 0.9rem; margin-top: 1rem; }
@media (min-width: 720px) { .whatif-sliders { grid-template-columns: 1fr 1fr; gap: 0.9rem 1.5rem; } }
.whatif-lever { display: grid; gap: 0.3rem; }
.whatif-lever-top { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; }
.whatif-lever-label { font-weight: 600; font-size: 0.9rem; }
.whatif-lever-value { font-weight: 800; font-variant-numeric: tabular-nums; }
.whatif-lever-impact { font-size: 0.78rem; font-weight: 700; font-variant-numeric: tabular-nums; min-height: 1em; }
.whatif-lever-impact.up { color: var(--success); }
.whatif-lever-impact.down { color: #dc2626; }
[data-theme='dark'] .whatif-lever-impact.down { color: #f87171; }

/* Range input — themed to match the site */
.whatif-lever input[type='range'] {
  -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 999px;
  background: var(--chart-track); cursor: pointer; margin: 0.25rem 0;
}
.whatif-lever input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 20px; height: 20px; border-radius: 50%;
  background: var(--accent); border: 2px solid var(--surface); box-shadow: var(--shadow); cursor: pointer;
}
.whatif-lever input[type='range']::-moz-range-thumb {
  width: 18px; height: 18px; border-radius: 50%; background: var(--accent);
  border: 2px solid var(--surface); box-shadow: var(--shadow); cursor: pointer;
}
.whatif-lever input[type='range']:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.whatif-reset { margin-top: 1rem; cursor: pointer; }

/* ---- Print / Save-as-PDF report ----
   A JS-populated report is hidden on screen and is the ONLY thing shown when the
   user prints (or saves to PDF). Its own markup carries explicit light colors via
   inline styles, so the PDF looks right regardless of the on-screen theme. */
.print-report { display: none; }
@media print {
  /* Hide the live app entirely; show only the report. */
  body > *, main.container > * { display: none !important; }
  main.container { display: block !important; max-width: none; padding: 0; margin: 0; }
  #sh-print-report { display: block !important; }
  /* Keep background fills (accent bar, cards) in the printout. */
  #sh-print-report { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  a[href]:after { content: ''; } /* don't append URLs to links */
}
@page { margin: 14mm; }

/* ---- Waterfall ---- */
#sh-results-wide { margin-top: 1.25rem; }
.waterfall { display: grid; gap: 0.5rem; }
.wf-row { display: grid; grid-template-columns: minmax(120px, 1.4fr) minmax(80px, 3fr) auto; align-items: center; gap: 0.6rem; font-size: 0.9rem; }
.wf-label { color: var(--text-muted); }
.wf-bar { background: var(--chart-track); border-radius: 6px; height: 14px; overflow: hidden; }
.wf-fill { display: block; height: 100%; border-radius: 6px; background: var(--text-faint); }
.wf-val { font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.wf-gross .wf-fill { background: var(--accent); }
.wf-gross .wf-label, .wf-gross .wf-val { font-weight: 800; color: var(--text); }
.wf-cost .wf-fill { background: #f59e0b; }
.wf-tax .wf-fill { background: #ef4444; }
.wf-take .wf-fill { background: var(--success); }
.wf-take .wf-label, .wf-take .wf-val { font-weight: 800; color: var(--success); }
@media (max-width: 480px) {
  .wf-row { grid-template-columns: 1fr auto; }
  .wf-bar { display: none; }
}

/* ---- Tax hand-off card ---- */
.taxcard { margin-top: 1.25rem; border-left: 4px solid var(--accent); }
.taxcard-eyebrow { margin: 0 0 0.6rem; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); }
.taxcard-figures { display: flex; flex-wrap: wrap; gap: 1.5rem; margin-bottom: 0.6rem; }
.taxcard-figures > div { display: flex; flex-direction: column; }
.taxcard-num { font-size: 1.5rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.taxcard-lab { font-size: 0.78rem; color: var(--text-faint); }
.taxcard-note { font-size: 0.88rem; margin: 0 0 0.85rem; }

/* ---- Combined streams table ---- */
.combined-card { padding: 0.4rem 1.1rem; }
.combined-table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.combined-table th[scope='col'] { text-align: right; color: var(--text-faint); font-weight: 600; padding: 0.6rem 0.4rem; font-size: 0.8rem; }
.combined-table th[scope='col']:first-child { text-align: left; }
.combined-table th[scope='row'] { text-align: left; font-weight: 700; padding: 0.55rem 0.4rem; }
.combined-table td { text-align: right; padding: 0.55rem 0.4rem; font-variant-numeric: tabular-nums; }
.combined-table tbody tr { border-bottom: 1px solid var(--border); }
.combined-table .combined-total th, .combined-table .combined-total td { font-weight: 800; border-top: 2px solid var(--border); padding-top: 0.65rem; }
.combined-table .combined-total td:nth-child(3) { color: var(--success); }

/* ---- Share bar ---- */
.share-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; margin-top: 1.5rem; }
.share-bar .btn-secondary { cursor: pointer; }
.share-status { min-height: 1.2em; }