/* Divisor's own pieces on top of the kit: the form groups, the category list, the trail of arithmetic. */
.hero-title { font-weight: 650; letter-spacing: -0.025em; font-variation-settings: "SOFT" 50, "WONK" 0; }
.mono, .trail, .rtable td { font-variant-numeric: tabular-nums; }
.mono { font-family: var(--font-mono); }
.muted { color: var(--ink-2); }
.narrow { max-width: 46rem; }

.inputs { display: grid; gap: var(--s4); align-content: start; }
.row2 { display: flex; flex-wrap: wrap; gap: var(--s2); }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); }
.group { border: 0; border-top: 1px solid var(--line); margin: 0; padding: var(--s3) 0 0; display: grid; gap: var(--s3); min-width: 0; }
.group legend { font: 650 var(--step-0) var(--font-display); padding: 0 var(--s2) 0 0; color: var(--ink); }
.group[hidden], [data-show][hidden] { display: none; }
.with-unit.pre .input { padding-left: 1.9rem; padding-right: var(--s3); }
.with-unit.pre span { right: auto; left: 0.9rem; font-weight: 700; }
[hidden] { display: none !important; }
@media (max-width: 600px) {
  .site-header nav a[href="#how"] { display: none; }
  .answer-panel { grid-template-columns: 1fr; }
  .answer-panel .unit { font-size: var(--step-0); }
}
select.input { appearance: auto; }
.field-label { font-weight: 700; font-size: var(--step--1); margin: 0 0 var(--s2); }
.field-label a { font-weight: 400; margin-left: var(--s2); color: var(--brand-text); }
.check { display: flex; gap: var(--s2); align-items: flex-start; font-size: var(--step--1); cursor: pointer; }
.check input { width: 1.15rem; height: 1.15rem; margin-top: 0.1rem; accent-color: var(--brand); flex: none; }
.cats { display: grid; gap: var(--s1); margin-bottom: var(--s3); }
.cats label { display: flex; gap: var(--s3); align-items: center; padding: var(--s2) var(--s3); border: 1px solid var(--line); border-radius: var(--radius); cursor: pointer; font-size: var(--step--1); min-height: 2.75rem; background: var(--surface); }
.cats label:has(input:checked) { border-color: var(--brand); background: var(--brand-soft); }
.cats input { accent-color: var(--brand); width: 1.1rem; height: 1.1rem; flex: none; }
.ask { background: color-mix(in oklab, var(--accent) 16%, var(--surface)); border-left: 3px solid var(--accent); padding: var(--s3); border-radius: var(--radius-s); display: grid; gap: var(--s2); }
.ask p { margin: 0; font-size: var(--step--1); font-weight: 700; }
.seg { flex-wrap: wrap; }
.growth { max-width: 18rem; }

.answer-panel { align-content: start; }
@media (min-width: 760px) { .answer-panel { position: sticky; top: var(--s4); align-self: start; } }
.answer-panel .big { font-weight: 650; letter-spacing: -0.03em; font-size: clamp(2.6rem, 1.6rem + 4vw, 4.4rem); }
.answer-panel .why.mono { font-size: var(--step-0); opacity: 1; max-width: none; }
.answer-panel .disclose { font-size: 0.85rem; opacity: 1; margin: var(--s3) auto 0; max-width: 34ch; border-top: 1px solid color-mix(in oklab, var(--brand-ink) 30%, transparent); padding-top: var(--s3); }
.answer-panel #left:empty { display: none; }

.work { padding-top: var(--s4); }
.work-grid { display: grid; gap: var(--s4); }
@media (min-width: 900px) { .work-grid { grid-template-columns: 1fr 1.3fr; align-items: start; } }
.work h2 { font-size: var(--step-1); margin: 0 0 var(--s3); }
.head-row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s3); flex-wrap: wrap; }
.rule { font-weight: 700; margin-top: 0; }
.trail { padding-left: 1.2rem; display: grid; gap: var(--s2); font-size: var(--step--1); }
.trail li::marker { color: var(--brand-text); font-weight: 700; }
.table-wrap { max-width: 100%; overflow-x: auto; }
.rtable tr.now td { background: var(--brand-soft); font-weight: 700; }
.rtable td:nth-child(n+3) { text-align: right; }
@media (max-width: 480px) { .rtable td:nth-child(n+3) { text-align: left; } }
.steps { margin-top: var(--s5); }
.notice { margin-top: var(--s5); }
.notice a, .faq a { color: var(--brand-text); }
.faq h2 { margin-bottom: var(--s3); }

.ttable { width: 100%; border-collapse: collapse; font-size: var(--step--1); font-variant-numeric: tabular-nums; }
.ttable th, .ttable td { padding: var(--s1) var(--s3); border-bottom: 1px solid var(--line); text-align: right; }
.ttable th { color: var(--ink-2); font-weight: 700; }
.tcols { display: grid; gap: var(--s5); grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); align-items: start; }
.seg button { min-height: 2.75rem; }
.chip { justify-self: center; display: inline-block; margin-top: var(--s2); padding: 0.2rem 0.7rem; border-radius: var(--pill); background: color-mix(in oklab, var(--brand-ink) 16%, var(--brand)); font-size: var(--step--1); font-weight: 700; }
.deadline { margin: 0; font-weight: 700; color: var(--brand-text); font-size: var(--step--1); }

/* Guide pages: the answer under the heading, the worked case, the next questions. */
.answer { font-size: var(--step-0); line-height: 1.5; max-width: 60ch; margin: 0 0 var(--s3); }
.answer b { color: var(--ink); }
.explain p, .explain li { max-width: 66ch; }
.explain .worked { font-family: var(--font-mono); font-variant-numeric: tabular-nums; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s3); }
.qa h3 { font-size: var(--step-0); margin: var(--s5) 0 var(--s2); }
.qa p { margin: 0; max-width: 66ch; }
.qa a, .explain a, .answer a { color: var(--brand-text); }
.related { list-style: none; padding: 0; display: grid; gap: var(--s2); }
.related a { color: var(--brand-text); font-weight: 700; }
.guides { display: grid; gap: var(--s2) var(--s5); grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); list-style: none; padding: 0; }
.guides a { color: var(--brand-text); font-weight: 700; }
.guides span { display: block; font-size: var(--step--1); color: var(--ink-2); }