/* ==========================================================================
   Studio layer: live status bar, command palette, spotlight cards, the tools.
   Quiet by default. Every moving part is disabled for prefers-reduced-motion,
   and every colour pair is >= 4.5:1 (checked in the build).
   ========================================================================== */

/* ---------- Live status bar ---------- */
.statusbar { background: var(--ink-deep); color: #efe9de; font-size: .82rem; line-height: 1.4; border-bottom: 1px solid rgba(201,166,107,.35); }
.statusbar[hidden] { display: none; }
.statusbar__inner { display: flex; gap: .75rem; align-items: center; justify-content: center; padding-block: .5rem; flex-wrap: wrap; text-align: center; }
.statusbar__dot { width: .5rem; height: .5rem; border-radius: 50%; background: var(--gold-bright); box-shadow: 0 0 0 0 rgba(201,166,107,.6); animation: pulse 2.4s infinite; flex: none; }
.statusbar a { color: var(--gold-soft); text-underline-offset: .2em; }
.statusbar a:hover { color: #fff; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(201,166,107,.55); } 70% { box-shadow: 0 0 0 .55rem rgba(201,166,107,0); } 100% { box-shadow: 0 0 0 0 rgba(201,166,107,0); } }

/* ---------- Header command button ---------- */
.nav__k {
  display: inline-flex; align-items: center; gap: .45rem; cursor: pointer;
  background: transparent; border: 1px solid var(--rule); border-radius: 2px;
  padding: .4rem .65rem; font: inherit; font-size: .8rem; color: var(--ink-soft);
  transition: border-color .2s, color .2s;
}
.nav__k:hover { border-color: var(--ink); color: var(--ink); }
.nav__k kbd { font: inherit; font-size: .7rem; letter-spacing: .04em; border: 1px solid var(--rule); border-radius: 3px; padding: .05rem .35rem; color: var(--ink-mute); background: #fff; }
@media (max-width: 74rem) { .nav__k { margin-top: .75rem; justify-content: center; } }

/* ---------- Command palette ---------- */
.palette { border: 1px solid rgba(201,166,107,.45); border-radius: 6px; padding: 0; width: min(36rem, calc(100% - 2rem)); background: #14110e; color: #efe9de; box-shadow: 0 40px 80px -20px rgba(0,0,0,.7); }
.palette::backdrop { background: rgba(8,7,6,.72); backdrop-filter: blur(3px); }
.palette__input { width: 100%; border: 0; border-bottom: 1px solid rgba(255,255,255,.14); border-radius: 0; background: transparent; color: #fff; padding: 1.1rem 1.25rem; font-size: 1.05rem; }
.palette__input:focus { outline: none; border-color: var(--gold-bright); }
.palette__list { list-style: none; margin: 0; padding: .4rem; max-height: min(22rem, 60vh); overflow: auto; }
.palette__item { margin: 0; max-width: none; }
.palette__item a, .palette__item button {
  display: flex; width: 100%; justify-content: space-between; gap: 1rem; align-items: baseline; text-align: left;
  padding: .7rem .85rem; border: 0; border-radius: 4px; background: transparent; color: #efe9de; font: inherit; text-decoration: none; cursor: pointer;
}
.palette__item small { color: #b9b2a6; font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; }
.palette__item[aria-selected="true"] a, .palette__item[aria-selected="true"] button { background: rgba(201,166,107,.16); color: #fff; }
.palette__foot { margin: 0; padding: .6rem 1.1rem; border-top: 1px solid rgba(255,255,255,.1); font-size: .76rem; color: #b9b2a6; max-width: none; }

/* ---------- Studio (home) ---------- */
.studio {
  position: relative; overflow: hidden; color: #efe9de;
  background:
    radial-gradient(60rem 28rem at 85% -10%, rgba(201,166,107,.16), transparent 60%),
    radial-gradient(40rem 24rem at 5% 110%, rgba(138,109,59,.18), transparent 60%),
    var(--ink-deep);
}
.studio h2 { color: #fff; max-width: 22ch; }
.studio .lede { color: #cfc8bb; max-width: 54ch; }
.studio .eyebrow { color: var(--gold-soft); }
.bento { display: grid; gap: 1rem; margin-top: 2.2rem; grid-template-columns: 1fr; }
@media (min-width: 48rem) { .bento { grid-template-columns: repeat(6, 1fr); } .bento > .bento__card { grid-column: span 2; } .bento > .bento__card--wide { grid-column: span 4; } .bento > .bento__card--full { grid-column: span 6; min-height: 9rem; } }
.bento__card {
  position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 1.4rem; overflow: hidden;
  padding: clamp(1.25rem, 3vw, 2rem); min-height: 15rem;
  border: 1px solid rgba(255,255,255,.12); border-radius: 4px; text-decoration: none; color: inherit;
  background: linear-gradient(160deg, rgba(255,255,255,.07), rgba(255,255,255,.02));
  backdrop-filter: blur(6px);
  transition: border-color .3s, transform .3s;
}
.bento__card::before { /* the spotlight that follows the pointer */
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .3s;
  background: radial-gradient(22rem circle at var(--mx, 50%) var(--my, 50%), rgba(201,166,107,.22), transparent 60%);
}
.bento__card:hover { border-color: rgba(201,166,107,.6); transform: translateY(-3px); color: #fff; }
.bento__card:hover::before { opacity: 1; }
.bento__tag { font-size: .7rem; font-weight: 650; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-soft); margin: 0; max-width: none; }
.bento__title { font-family: var(--font-display); font-size: clamp(1.5rem, 1.1rem + 1.3vw, 2.1rem); line-height: 1.1; color: #fff; margin: 0; max-width: 16ch; }
.bento__live { margin: 0; max-width: none; color: #cfc8bb; font-size: .95rem; }
.bento__live b { display: block; font-family: var(--font-display); font-weight: 500; font-size: clamp(2rem, 1.4rem + 2.4vw, 3.2rem); line-height: 1; color: var(--gold-bright); margin-bottom: .25rem; font-variant-numeric: tabular-nums; }
.bento__go { font-size: .82rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--gold-soft); }
.bento__card--status .bento__title { max-width: 18ch; }

/* ---------- Reveal on scroll (JS adds .reveal, so nothing is hidden without JS) ---------- */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
.reveal.is-in { opacity: 1; transform: none; }

/* ---------- Tools ---------- */
.tool { margin-top: 1.5rem; }
.tool:not(.is-live)::before { content: "This tool needs JavaScript. The method and sources are written out below, so you can still follow the arithmetic by hand."; display: block; padding: 1rem 1.2rem; border: 1px dashed var(--rule); color: var(--ink-soft); }
.tool-shell { display: grid; gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }
@media (min-width: 62rem) { .tool-shell { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); } .tool-shell--wide { grid-template-columns: 1fr; } }
.tform { display: grid; gap: 1rem; }
.tform--two { grid-template-columns: 1fr; }
@media (min-width: 52rem) { .tform--two { grid-template-columns: 1fr 1fr; align-items: start; } }
.tset { border: 1px solid var(--rule); border-radius: 2px; padding: 1.1rem 1.2rem 1.3rem; display: grid; gap: 1rem; margin: 0; min-width: 0; background: #fff; }
.tset legend { padding: 0 .5rem; font-family: var(--font-display); font-size: 1.25rem; }
.tfield { display: grid; gap: .3rem; }
.tfield label { font-weight: 600; font-size: .9rem; }
.tfield__hint { font-size: .8rem; color: var(--ink-mute); line-height: 1.4; }
.tfield__box { position: relative; }
.tfield__box input, .tfield__box select { width: 100%; }
.tfield__box.has-prefix input { padding-left: 1.7rem; }
.tfield__box.has-suffix input { padding-right: 1.9rem; }
.tfield__affix { position: absolute; top: 50%; transform: translateY(-50%); left: .8rem; color: var(--ink-mute); pointer-events: none; }
.tfield__affix--end { left: auto; right: .8rem; }
.tout { background: var(--paper-warm); border: 1px solid var(--rule); border-top: 3px solid var(--gold); padding: clamp(1.1rem, 3vw, 1.8rem); display: grid; gap: 1.1rem; min-width: 0; }
.tout__empty, .tout__note, .tout__lead { margin: 0; max-width: none; }
.tout__note { font-size: .88rem; color: var(--ink-soft); padding: .6rem .8rem; background: #fff; border-left: 3px solid var(--gold); }
.tout__lead { font-size: 1.05rem; }
.tbig { display: grid; gap: .1rem; }
.tbig__label { font-size: .72rem; font-weight: 650; letter-spacing: .16em; text-transform: uppercase; color: var(--accent-deep); }
.tbig__num { font-family: var(--font-display); font-size: clamp(2.4rem, 1.6rem + 3vw, 3.8rem); line-height: 1.05; font-variant-numeric: tabular-nums; color: var(--ink); }
.tbig__sub { color: var(--ink-soft); }
.tbar { display: flex; height: .9rem; border-radius: 2px; overflow: hidden; background: var(--rule); }
.tbar__seg { display: block; height: 100%; }
.tbar__seg--net { background: #2f6b4f; }
.trows { display: grid; }
.trow { display: flex; justify-content: space-between; gap: 1rem; padding: .6rem 0; border-bottom: 1px solid var(--rule); font-size: .95rem; }
.trow__k { color: var(--ink-soft); }
.trow__v { font-variant-numeric: tabular-nums; font-weight: 600; text-align: right; white-space: nowrap; }
.trow--total { border-bottom: 0; border-top: 2px solid var(--ink); font-size: 1.05rem; }
.trow--total .trow__k { color: var(--ink); font-weight: 650; }
.tcall { background: #fff; border: 1px solid #e6dcc6; border-left: 3px solid var(--gold); padding: .9rem 1.1rem; font-size: .93rem; line-height: 1.55; }
.tactions { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }
.tactions--top { margin-bottom: 1rem; }
.tcompare { display: grid; gap: .45rem; }
.tcompare__title { font-size: 1.2rem !important; margin: .3rem 0 .4rem; }
.tcompare__row { display: grid; grid-template-columns: minmax(7rem, 11rem) 1fr auto; gap: .7rem; align-items: center; font-size: .88rem; }
.tcompare__bar { height: .55rem; background: var(--rule); border-radius: 2px; overflow: hidden; }
.tcompare__bar i { display: block; height: 100%; background: var(--gold); }
.tcompare__row.is-selected .tcompare__name { font-weight: 700; }
.tcompare__row.is-selected .tcompare__bar i { background: var(--ink); }
.tcompare__amt { font-variant-numeric: tabular-nums; font-weight: 600; }
.tvs { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; align-items: end; }
.tvs__col { display: grid; gap: .25rem; align-content: end; }
.tvs__label { font-size: .72rem; font-weight: 650; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-deep); }
.tvs__num { font-family: var(--font-display); font-size: clamp(1.7rem, 1.2rem + 2vw, 2.6rem); line-height: 1.05; font-variant-numeric: tabular-nums; }
.tvs__bar { display: flex; align-items: flex-end; height: 7rem; background: repeating-linear-gradient(to top, transparent 0 1.7rem, rgba(0,0,0,.05) 1.7rem 1.75rem); border-bottom: 2px solid var(--ink); }
.tvs__bar i { display: block; width: 100%; background: var(--ink-soft); transition: height .5s cubic-bezier(.2,.7,.2,1); }
.tvs__col--nj .tvs__bar i { background: var(--gold); }
.method { margin-top: 2rem; }
.method h3 { font-size: 1.3rem; }
.method ol, .method ul { padding-left: 1.2rem; }

/* ---------- Tools hub cards ---------- */
.toolcards { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 48rem) { .toolcards { grid-template-columns: repeat(3, 1fr); } }

@media (prefers-reduced-motion: reduce) {
  .statusbar__dot { animation: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .bento__card, .bento__card:hover { transition: none; transform: none; }
  .tvs__bar i { transition: none; }
}

/* Lighthouse contrast fix: brass eyebrow on the cream notice/tool panels */
.notice .eyebrow, .tout .eyebrow, .tset .eyebrow { color: var(--accent-deep); }

/* Header: one line, never wrapped */
.nav { gap: 1.15rem; }
.nav a:not(.btn), .nav__k, .nav__cta, .brand__meta, .brand__name { white-space: nowrap; }

/* Two tools sit form-left, result-right on wide screens */
@media (min-width: 62rem) {
  .tool.is-live[data-tool="seller-net"], .tool.is-live[data-tool="tax"] { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }
  .tool.is-live[data-tool="seller-net"] .tout, .tool.is-live[data-tool="tax"] .tout { position: sticky; top: 6.5rem; }
}

/* ---------- Tools 4-8 ---------- */
.tbar--tall { height: 1.25rem; }
.tcommute { display: grid; gap: .5rem; padding: 1rem 0; border-bottom: 1px solid var(--rule); }
.tcommute__head { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; flex-wrap: wrap; }
.tcommute__total { font-family: var(--font-display); font-size: 1.5rem; font-variant-numeric: tabular-nums; }
.tkey { display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; font-size: .8rem; color: var(--ink-soft); }
.tkey__i { display: inline-flex; align-items: center; gap: .4rem; }
.tkey__i i { width: .7rem; height: .7rem; border-radius: 2px; display: inline-block; }
.tcompare__row--link { text-decoration: none; color: inherit; padding: .15rem 0; }
.tcompare__row--link:hover .tcompare__name { text-decoration: underline; }
.tcompare__row--link:hover .tcompare__bar i { background: var(--ink); }

.tout--plain { background: #fff; }
.tplan { display: grid; gap: .1rem; }
.tplan__h { font-size: 1.25rem; margin: 1rem 0 .3rem; padding-top: .6rem; border-top: 1px solid var(--rule); }
.tplan__h small { font-family: var(--font-body); font-size: .75rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-deep); margin-left: .5rem; }
.tplan__item { display: grid; grid-template-columns: auto 1fr; gap: .8rem; align-items: start; padding: .65rem 0; }
.tplan__item input[type="checkbox"] { width: 1.15rem; height: 1.15rem; margin-top: .25rem; padding: 0; accent-color: var(--ink); }
.tplan__item label { display: grid; gap: .2rem; cursor: pointer; font-weight: 400; }
.tplan__item strong { font-weight: 650; }
.tplan__cat { justify-self: start; font-size: .68rem; font-weight: 650; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-deep); }
.tplan__why { color: var(--ink-soft); font-size: .92rem; line-height: 1.5; }
.tplan__link { justify-self: start; font-size: .85rem; font-weight: 600; }
.tplan__item.is-done strong { text-decoration: line-through; color: var(--ink-mute); }
.tplan__item.is-done .tplan__why { opacity: .7; }

@media print {
  .statusbar, .masthead, .hero, .btn, .tactions, .footer, .stackpass-chat-launcher, .stackpass-chat-panel, .tcall + .tactions, .section--dark, .method, .palette { display: none !important; }
  .tout { border: 0; background: #fff; }
  body { color: #000; }
}