/* The citizen tax hub, #/tax (web/app/tax.js). Dark behind LALWA_TAX_HUB.

   Built on the shared tool classes in styles.css (tool-card, cc-input, cc-btn,
   dl-big, helpcard, forumcard). Every colour is a token from tokens.css, so the
   opt-in html.dark theme re-colours this page with no rule of its own. Nothing
   here is hidden waiting for an animation, and nothing moves on hover. */

.tax-jump{display:flex; flex-wrap:wrap; gap:8px; margin:0 0 14px}
@media (max-width:640px){
  /* One row that scrolls inside itself; the page never scrolls sideways. */
  .tax-jump{flex-wrap:nowrap; overflow-x:auto; margin:0 -16px 14px; padding:2px 16px 6px; scrollbar-width:none}
  .tax-jump::-webkit-scrollbar{display:none}
  .tax-jump-b{flex:none}
}
.tax-jump-b{font:inherit; font-size:var(--fs-sm); font-weight:600; color:var(--ink);
  background:var(--panel); border:1px solid var(--hair); border-radius:var(--r-pill);
  min-height:var(--tap); padding:0 16px; cursor:pointer; box-shadow:var(--shadow-1)}
.tax-jump-b:focus-visible, .tax-sec:focus-visible{outline:2px solid var(--focus); outline-offset:2px}

.tax-sec{scroll-margin-top:84px}
.tax-sec>.tool-note{margin:0 0 14px}
.tax-lead{margin:0 0 6px}

/* one calculator */
.tax-calc{border-top:1px solid var(--hair); padding:14px 0}
.tax-calc:first-child{border-top:0; padding-top:0}
.tax-calc-head{display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; justify-content:space-between}
.tax-calc-name{font-family:var(--font-display); font-weight:400; font-size:var(--fs-lg); color:var(--ink); margin:0; line-height:1.3}
.tax-state{font-size:var(--fs-xs); font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  border-radius:var(--r-pill); padding:3px 10px; line-height:1.4}
.tax-state.ok{color:var(--verified-ink); background:color-mix(in srgb, var(--verified) 12%, transparent)}
.tax-state.wait{color:var(--muted); background:var(--panel-2)}
.tax-form{margin-top:14px}
.tax-waitlist{list-style:none; margin:0 0 6px; padding:0}
.tax-wait{display:flex; align-items:center; justify-content:space-between; gap:12px;
  min-height:var(--tap); padding:8px 0; border-top:1px solid var(--hair)}
.tax-wait:first-child{border-top:0}
.tax-wait-name{font-size:var(--fs-md); line-height:1.4; color:var(--ink)}
.tax-wait .tax-state{flex:none}
.tax-sec .limits{margin:16px 0 0}
.tax-opt{font-weight:400; color:var(--muted)}
.tax-confirm{display:flex; align-items:flex-start; gap:10px; min-height:var(--tap); padding:10px 14px;
  border:1px solid var(--hair); border-radius:var(--r-md); background:var(--canvas);
  font-size:var(--fs-md); line-height:1.5; color:var(--ink); cursor:pointer}
.tax-confirm input{width:20px; height:20px; margin:2px 0 0; flex:none; accent-color:var(--accent)}
.tax-confirm:focus-within{box-shadow:0 0 0 3px color-mix(in srgb, var(--focus) 16%, transparent)}

/* A refusal is an answer: neutral, never the red dashed error box. */
.tax-said{margin-top:14px; padding:14px 16px; border-radius:var(--r-md);
  background:var(--canvas); border:1px solid var(--hair); color:var(--ink)}
.tax-said p{margin:0; font-size:var(--fs-md); line-height:1.6}
.tax-said-more{margin-top:6px}
.tax-said-more>summary{cursor:pointer; min-height:var(--tap); display:flex; align-items:center;
  font-size:var(--fs-sm); font-weight:600; color:var(--accent-ink)}
.tax-said-more p{font-size:var(--fs-sm); color:var(--muted)}

/* a result and its working */
.tax-res{margin-top:16px}
.tax-wording{font-size:var(--fs-sm); line-height:1.6; color:var(--ink); margin:0 0 12px;
  padding:10px 14px; background:var(--accent-soft); border-radius:var(--r-sm)}
.tax-total{text-align:center; padding:18px; background:var(--canvas); border-radius:var(--r-md); margin-bottom:14px}
.tax-total-v{font-family:var(--font-display); font-size:2.2rem; line-height:1.2; color:var(--ink);
  font-variant-numeric:tabular-nums; overflow-wrap:anywhere}
.tax-lines{list-style:none; margin:0 0 12px; padding:0; counter-reset:taxline}
.tax-line{counter-increment:taxline; border-top:1px solid var(--hair); padding:10px 0 10px 30px; position:relative}
.tax-line:before{content:counter(taxline) "."; position:absolute; left:0; top:10px;
  font-weight:700; color:var(--accent-ink); font-variant-numeric:tabular-nums}
.tax-line-top{display:flex; gap:12px; justify-content:space-between; align-items:baseline}
.tax-line-lbl{font-size:var(--fs-md); line-height:1.5; color:var(--ink)}
.tax-line-v{font-weight:700; font-size:var(--fs-md); color:var(--ink); font-variant-numeric:tabular-nums;
  text-align:right; overflow-wrap:anywhere; max-width:50%}
.tax-line-f{margin-top:4px; display:flex; flex-wrap:wrap; gap:6px 12px; align-items:center; font-size:var(--fs-sm); color:var(--muted)}
.tax-line-f code{font-size:var(--fs-sm); color:var(--ink); background:var(--sunken); border-radius:5px; padding:1px 6px}
.tax-ins{display:flex; flex-wrap:wrap; gap:4px 10px}
.tax-in{font-variant-numeric:tabular-nums}
.tax-in-k{color:var(--faint)}

/* the Act's day and any communique date, side by side */
.tax-dates{display:grid; gap:12px}
.tax-dates{grid-template-columns:1fr 1fr; align-items:stretch}
.tax-announced{padding:16px; border:1px dashed color-mix(in srgb, var(--ink) 18%, transparent); border-radius:var(--r-md)}
.tax-announced .tool-note{margin:6px 0 0}
.tax-ext{margin-top:8px}
.tax-ext-day{font-size:1.6rem}

@media (max-width:640px){
  .tax-dates{grid-template-columns:1fr}
  .tax-line-top{flex-direction:column; gap:2px}
  .tax-line-v{text-align:left; max-width:100%}
}

@media (hover:hover) and (pointer:fine){
  .tax-jump-b:hover{border-color:var(--accent)}
}