/* Grade calculator, easy grader, semester grade, ACT and SAT practice calculators: additions on top of tools.css
   (same tokens, light and dark). The forms are in the server HTML, so the first input sits near the top on a phone. */
.cn-hero { padding-bottom: 10px; }
.cn-hero .nu-crumbs { margin-bottom: 12px; }
.cn-hero .nu-h1 { margin-top: 0; }
.cn-hero .nu-lede { margin-top: 12px; font-size: clamp(16px, 1.4vw, 19px); }
.cn-sec { padding-top: 12px !important; }
.cn-nl { display: none; }
.cn-tool { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: start; }
@media (min-width: 1000px) { .cn-tool { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 28px; } }
.cn-form > * + * { margin-top: 14px; }
.cn-form .tl-field { margin-top: 0; }
.cn-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.cn-trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.cn-quad { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
@media (max-width: 519px) { .cn-quad { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* category / component rows */
.cn-rows { display: grid; gap: 8px; }
.cn-row { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, .8fr) 44px; gap: 8px; align-items: end; }
.cn-row .tl-label { font-size: 13px; margin-bottom: 4px; }
.cn-row + .cn-row .tl-label { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cn-row--sit { grid-template-columns: 64px repeat(4, minmax(0, 1fr)) 44px; }
.cn-sitn { font: 700 13px/44px var(--sans); color: var(--text-2); }
@media (max-width: 519px) { .cn-row--sit { grid-template-columns: 40px repeat(4, minmax(0, 1fr)) 40px; gap: 6px; } .cn-row--sit .tl-in { padding: 0 6px; } }
.cn-add { margin-top: 8px; }
.cn-in-sel { appearance: auto; }

/* results */
.cn-out { padding: 16px; border-radius: 18px; background: var(--tint-bg); border: 1px solid var(--tint-line); min-width: 0; }
.cn-out .tl-bignum { font-size: clamp(36px, 5vw, 52px); }
.cn-line { margin-top: 8px; font-size: 15.5px; line-height: 1.5; color: var(--text-2); }
.cn-line strong { color: var(--text); }
.cn-out .tl-tablewrap { margin-top: 12px; }
.cn-meta { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 14px; color: var(--text-3); }

/* static tables in the article: plain grids that scroll sideways on a phone instead of stacking */
.cn-scroll { margin-top: 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); overflow-x: auto; }
.cn-grid { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 1.35; font-variant-numeric: tabular-nums; }
.cn-grid caption { text-align: left; padding: 10px 12px 4px; font: 700 12.5px/1.3 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--text-2); }
.cn-grid th, .cn-grid td { padding: 7px 10px; text-align: right; border-bottom: 1px solid var(--line); color: var(--text-2); white-space: nowrap; }
.cn-grid th:first-child, .cn-grid td:first-child { text-align: left; }
.cn-grid thead th { font: 700 12px/1.2 var(--sans); letter-spacing: .04em; text-transform: uppercase; background: var(--surface-2); color: var(--text-2); }
.cn-grid tbody th { font-weight: 600; color: var(--text); }
.cn-grid tr:last-child th, .cn-grid tr:last-child td { border-bottom: 0; }
.cn-grid .cn-x { color: var(--text-3); }
.cn-charts { display: grid; gap: 10px; margin-top: 14px; }
.cn-chart { border-radius: 14px; border: 1px solid var(--line); background: var(--surface); }
.cn-chart > summary { min-height: 48px; display: flex; align-items: center; padding: 0 14px; cursor: pointer; font: 700 15px/1.3 var(--sans); color: var(--text); }
.cn-chart > .cn-scroll { margin: 0 10px 10px; }
.cn-note { margin-top: 26px; font-size: 14px; line-height: 1.6; color: var(--text-3); }
.cn-note a { color: var(--text-2); }

@media print { .cn-form { display: none !important; } .cn-out { border: 0; background: none; } }
.cn-row[hidden] { display: none; }
.cn-row--sem { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, .8fr); }
.cn-rname { display: flex; align-items: center; min-height: 44px; font: 600 15px/1.2 var(--sans); color: var(--text); overflow-wrap: anywhere; }
.cn-out { min-height: 220px; }