/* Stellar AP score calculators (index + 36 calculators), generated by tools/gen_calc.py.
   Built on /_home/rework.css: same tokens, Inter at 400-500, near-black pills, hairlines, white canvas.
   Green only where it means something: the filled part of a slider, a maxed-out row, and the AP score you are in.
   Polish wave 2026-10-22: corners, shadows, motion and colours come from the tokens only (DESIGN-PRINCIPLES.md,
   "Corners, shadows and motion"), so the pages work in light and dark. Inputs 10, buttons pill, the results sheet 16,
   tables and list rows square with dashed hairlines between items. */

.ac main{display:block}
/* rework.css draws a line above every main>section (home page separation). These sections are inset or already
   carry their own heading line, so the extra line would sit off the grid or double up. The closing section keeps it, as on the home page. */
.ac main>section:not(.final-sec){border-top:0}
.ac .flip{transform:scaleX(-1)}
/* quiet greys, mixed from the tokens so they follow the theme */
.ac{--ac-faint:color-mix(in srgb,var(--line-2),var(--muted) 45%);--ac-edge:color-mix(in srgb,var(--line-2),var(--muted) 30%)}

/* ---------- page head ---------- */
.ac-hero{padding:40px 0 64px}
.ac-hero-ix{padding:96px 0 88px;text-align:center}
/* swarm R58: the 44px tap box was an inline-flex link, so a wrapped trail (long names at 375) put 33px between its
   lines. The link stays inline with 14px padding (45px tap area, lifted over the wrapped line) and the list carries
   the spacing, same height */
.ac-crumbs ol{display:block;margin:0;padding:12px 0;list-style:none;font:400 14px/1.5 var(--font);color:var(--muted)}
.ac-crumbs li{display:inline}
.ac-crumbs li+li::before{content:"/\00a0";margin:0 4px 0 10px;color:var(--ac-faint)}
.ac-crumbs a{position:relative;z-index:1;padding-block:14px;color:var(--muted)}
.ac-crumbs a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.ac-crumbs [aria-current]{color:var(--ink)}
.ac-hero h1{margin-top:56px;max-width:900px;font:400 clamp(38px,5vw,64px)/1.06 var(--font);letter-spacing:-.04em;color:var(--ink);overflow-wrap:anywhere}
.ac-hero-ix h1{margin:18px auto 0;max-width:860px;font-size:clamp(40px,5.6vw,72px)}
.ac-kicker{font:500 14px/1.4 var(--font);color:var(--muted)}   /* R13: the site eyebrow (about, courses) */
.ac-lead{margin-top:22px;max-width:640px;font:400 18px/1.65 var(--font);color:var(--text)}
.ac-hero-ix .ac-lead{margin-left:auto;margin-right:auto}
.ac-ctas{display:flex;justify-content:center;gap:10px;margin-top:36px}
.ac-ctas .btn{height:52px;padding:0 26px;font-size:16.5px}
.ac-back{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding-block:11.5px;margin-block:16px -11.5px;font:500 15px/1.4 var(--font);color:var(--text)}
.ac-back svg{width:16px;height:16px;flex:none;transition:translate var(--dur-1) var(--ease)}
.ac-back{transition:color var(--dur-1) var(--ease)}
.ac-back:hover{color:var(--ink)}
.ac-back:hover svg{translate:-3px 0}   /* R13: translate like the blog's back link (the icon keeps its .flip transform) */

/* ---------- section heads (calculator list, conversion table) ---------- */
.ac-sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:24px;flex-wrap:wrap;padding-bottom:20px;border-bottom:1px solid var(--line)}
.ac-sec-head h2{font:500 clamp(30px,3.4vw,46px)/1.1 var(--font);letter-spacing:-.032em;color:var(--ink)}   /* R13: the home page's section H2 */
.ac-sec-head p{font:400 15px/1.4 var(--font);color:var(--muted)}

/* ---------- index ---------- */
.ix{padding-block:var(--sec-y)}
#all{scroll-margin-top:72px}
.ix-find{display:flex;align-items:center;gap:10px;max-width:420px;height:44px;margin:28px 0 8px;padding:0 8px 0 16px;cursor:text;border-radius:var(--radius-m);box-shadow:inset 0 0 0 1px var(--line-2),var(--shadow-rest);background:var(--sheet);transition:box-shadow var(--dur-1) var(--ease)}
.ix-find:hover{box-shadow:inset 0 0 0 1px var(--ac-edge),var(--shadow-rest)}
.ix-find:focus-within{box-shadow:inset 0 0 0 1.5px var(--green),var(--shadow-rest)}
.ix-find svg{width:18px;height:18px;flex:none;fill:none;stroke:var(--muted);stroke-width:1.6;stroke-linecap:round}
.ix-find input{flex:1;min-width:0;height:100%;border:0;outline:0;background:none;font:400 16px/1 var(--font);color:var(--ink)}
.ix-find input::placeholder{color:var(--muted)}
/* round 5 (content): the field's own :focus-within ring is the focus mark; the site-wide :focus-visible outline drew a
   second, offset ring inside it. The browser's blue clear cross becomes a small muted ink cross */
.ix-find input:focus-visible{outline:0!important}
.ix-find input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none;width:16px;height:16px;margin:0;cursor:pointer;opacity:.6;background:var(--muted);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 4l8 8M12 4l-8 8' stroke='%23000' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") center/16px no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 4l8 8M12 4l-8 8' stroke='%23000' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") center/16px no-repeat}
.ix-find input::-webkit-search-cancel-button:hover{opacity:1;background:var(--ink)}
/* swarm R30 (owner search standard): one clear button of our own (the native cross is hidden), a "/" key chip while
   the field is idle, typed letters marked in the names, the row Enter opens, and searches to try when nothing matches */
.ix-find input::-webkit-search-cancel-button{display:none}
.ix-x{display:grid;place-items:center;flex:none;width:36px;height:36px;margin:0;padding:0;border:0;border-radius:var(--radius-s);background:none;color:var(--muted);cursor:pointer;transition:background-color var(--dur-1) var(--ease),color var(--dur-1) var(--ease)}
.ix-x[hidden]{display:none}
.ix-x:hover{background:var(--soft);color:var(--ink)}
.ix-x:focus-visible{outline:2px solid var(--green);outline-offset:0}
.ix-x svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round}
.ix-kbd{display:inline-flex;align-items:center;justify-content:center;flex:none;min-width:24px;height:24px;margin-right:4px;padding:0 7px;border:1px solid var(--line);border-radius:var(--radius-s);background:var(--soft);box-shadow:inset 0 -1px 0 var(--line);font:500 12px/1 var(--font);color:var(--text)}
.ix-find:focus-within .ix-kbd,.ix-find.has-q .ix-kbd{display:none}
@media (hover:none){.ix-kbd{display:none}}
.ix-hl{padding:0 2px;margin:0 -2px;border-radius:3px;   /* swarm R57: the tint reaches past the letters without opening a gap in the word */
background:var(--green-50,#e9f6ee);color:inherit;font-weight:inherit}
html.dark .ix-hl{background:var(--green-50,#16271d)}
.ix li a.is-next{background:var(--panel-on-shade)}
.ix li a.is-next svg{translate:3px 0;color:var(--ink)}
.ix-none .ix-none-q{font-weight:500;color:var(--ink);overflow-wrap:anywhere}
.ix-try{display:flex;flex-wrap:wrap;align-items:center;gap:8px;flex-basis:100%}
.ix-try span{margin-right:4px;font-size:15px}
.ix-sug{display:inline-flex;align-items:center;justify-content:center;min-height:44px;height:44px;padding:0 18px;border:1px solid var(--line-2);border-radius:999px;background:var(--sheet);font:500 14px/1 var(--font);color:var(--text);cursor:pointer;transition:background-color var(--dur-1) var(--ease),border-color var(--dur-1) var(--ease),color var(--dur-1) var(--ease)}
.ix-sug:hover{background:var(--panel-on-shade);border-color:var(--ink);color:var(--ink)}
.ix-sug:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.ix-clear{min-height:44px;display:inline-flex;align-items:center;justify-content:center}
@media (prefers-reduced-motion:reduce){.ix-x,.ix-sug{transition:none}.ix li a.is-next svg{translate:none}}
.ix-grid{columns:3 300px;column-gap:56px;margin-top:24px}
.ix-g{break-inside:avoid;padding:24px 0 20px}
.ix-g[hidden],.ix li[hidden]{display:none}
.ix-gh{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.ix-gh h3{font:500 19px/1.3 var(--font);letter-spacing:-.015em;color:var(--ink)}
.ix-gh p{font:400 14px/1.3 var(--font);color:var(--muted);white-space:nowrap}
.ix ul{margin:0;padding:0;list-style:none}
.ix li{border-bottom:1px dashed var(--rule-dash)}
.ix li a{display:flex;align-items:center;gap:16px;padding:14px 4px;transition:background-color var(--dur-1) var(--ease)}
.ix li a:hover{background:var(--soft)}
.ix-t{display:flex;flex-direction:column;gap:3px;flex:1;min-width:0}
.ix-n{font:500 16px/1.35 var(--font);color:var(--ink)}
.ix-m{font:400 14px/1.4 var(--font);color:var(--muted);font-variant-numeric:tabular-nums}
.ix li svg{width:16px;height:16px;flex:none;color:var(--ac-faint);transition:translate var(--dur-1) var(--ease),color var(--dur-1) var(--ease)}
.ix li a:hover svg{translate:3px 0;color:var(--ink)}
.ix li a:hover .ix-n{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.ix-none{margin-top:32px;font:400 16px/1.5 var(--font);color:var(--muted)}
.ix-none:not([hidden]){display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px}   /* round 9: the line and a way back */
.ac-final{margin-top:0}

/* ---------- calculator layout ---------- */
.ac-grid{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:72px;align-items:start}
.ac-col-h{padding-bottom:20px;border-bottom:1px solid var(--line)}
.ac-col-h h2{font:500 clamp(26px,2.6vw,34px)/1.15 var(--font);letter-spacing:-.03em;color:var(--ink)}
.ac-col-h p{margin-top:8px;font:400 15px/1.55 var(--font);color:var(--muted)}
.ac-inputs .ac-col-h{display:grid;grid-template-columns:1fr auto;column-gap:16px;align-items:end}
.ac-inputs .ac-col-h p{grid-column:1}
/* R13: the home page's small pill (44px on all viewports, 15px, 20px sides); hover lifts with translate, never transform */
.ac-reset{grid-column:2;grid-row:1/3;align-self:end;height:44px;padding:0 20px;border:0;border-radius:var(--radius-pill);background:var(--sheet);box-shadow:inset 0 0 0 1px var(--line-2);font:500 15px/1 var(--font);color:var(--ink);cursor:pointer;transition:translate var(--dur-1) var(--ease),scale 80ms var(--ease),box-shadow var(--dur-2) var(--ease)}
.ac-reset:hover{translate:0 var(--lift-btn);box-shadow:inset 0 0 0 1px var(--ac-edge),var(--shadow-rest)}
.ac-reset:active{scale:.98;transition-duration:80ms}

/* a section: number, name, raw points, weight */
.ac-sec{padding:32px 0 8px}
.ac-sec-h{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:4px 12px;align-items:baseline;padding-bottom:12px}
.ac-sec-i{font:400 15px/1.4 var(--font);color:var(--muted);font-variant-numeric:tabular-nums}
.ac-sec-h h3{font:500 20px/1.3 var(--font);letter-spacing:-.015em;color:var(--ink)}
.ac-sec-h p{margin-top:4px;font:400 14.5px/1.4 var(--font);color:var(--muted)}
.ac-sec-w{font:500 15px/1.4 var(--font);color:var(--ink);white-space:nowrap;font-variant-numeric:tabular-nums}

/* one input row: label, share, value; then − slider + and the number box */
.ac-row{margin-left:56px;padding:16px 0 18px;border-top:1px dashed var(--rule-dash);scroll-margin-top:80px;scroll-margin-bottom:110px}
.ac-row-h{display:flex;align-items:baseline;gap:12px}
.ac-row-t{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:10px;flex:1;min-width:0}
.ac-row-l{font:500 16px/1.4 var(--font);color:var(--ink);cursor:pointer}
.ac-row-m{font:400 14px/1.4 var(--font);color:var(--muted)}
.ac-row-v{flex:none;font:400 15px/1.4 var(--font);color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.ac-row-v b{font-weight:500;color:var(--ink)}
.ac-row.full .ac-row-v b{color:var(--green-d,var(--green))}
.ac-ctl{display:grid;grid-template-columns:44px minmax(0,1fr) 44px 76px;gap:10px;align-items:center;margin-top:12px}
.ac-step{display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:var(--radius-pill);background:var(--sheet);box-shadow:inset 0 0 0 1px var(--line-2);color:var(--ink);cursor:pointer;transition:translate var(--dur-1) var(--ease),scale 80ms var(--ease),box-shadow var(--dur-2) var(--ease),background-color var(--dur-1) var(--ease)}
.ac-step:hover{translate:0 var(--lift-btn);box-shadow:inset 0 0 0 1px var(--ac-edge),var(--shadow-rest)}
.ac-step:active{scale:.98;transition-duration:80ms}
.ac-step:focus-visible,.ac-reset:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.ac-step svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
/* swarm R37: minus at 0 and plus at the maximum dim like a resting control, with no lift or press (calc.js sets aria-disabled) */
.ac-step[aria-disabled="true"],.ac-step[aria-disabled="true"]:is(:hover,:active){color:var(--muted);box-shadow:inset 0 0 0 1px var(--line);background:var(--sheet);cursor:default;translate:none;scale:none}
.ac-step[aria-disabled="true"] svg{opacity:.55}
.ac-num{width:76px;height:44px;padding:0 6px;border:0;border-radius:var(--radius-m);box-shadow:inset 0 0 0 1px var(--line-2);background:var(--sheet);text-align:center;transition:box-shadow var(--dur-1) var(--ease);font:500 16px/1 var(--font);color:var(--ink);font-variant-numeric:tabular-nums;-moz-appearance:textfield;appearance:textfield}
.ac-num::-webkit-inner-spin-button,.ac-num::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.ac-num:hover{box-shadow:inset 0 0 0 1px var(--ac-edge)}
.ac-num:focus{outline:0;box-shadow:inset 0 0 0 1.5px var(--green)}
/* swarm R56 (idle 1027-1314 #2): with the site's 2px :focus-visible ring outside, the inset ring made a double frame.
   The box keeps its hairline and wears only the site ring, the same as the slider and step buttons */
.ac-num:focus-visible{box-shadow:inset 0 0 0 1px var(--line-2)}
/* swarm R29: the "Max 30" note calc.js shows under the box when a typed value is capped; it sits in the row's bottom
   padding, so nothing below moves */
.ac-ctl{position:relative}
.ac-hint{position:absolute;right:0;top:100%;margin-top:3px;font:500 12.5px/1.2 var(--font);color:var(--muted);white-space:nowrap;opacity:0;transition:opacity var(--dur-1) var(--ease);pointer-events:none}
.ac-hint.on{opacity:1}
/* swarm R31: green means "fine", so a value over the max gets a heavier ink ring and an ink note instead */
.ac-num[aria-invalid="true"],.ac-num[aria-invalid="true"]:focus{box-shadow:inset 0 0 0 2px var(--ink)}
.ac-num[aria-invalid="true"]:focus-visible{box-shadow:inset 0 0 0 1px var(--line-2)}   /* R56: one ink ring, not two */
.ac-num[aria-invalid="true"]:focus-visible{outline-color:var(--ink)!important}   /* the site ring is !important */
.ac-num[aria-invalid="true"]~.ac-hint{color:var(--ink)}

/* the slider: grey track, near-black fill for the points you have (green once the row is full), near-black thumb */
.ac-range{-webkit-appearance:none;appearance:none;width:100%;height:44px;margin:0;background:transparent;cursor:pointer}
.ac-range:focus{outline:0}
.ac-rw{position:relative;display:block;height:44px;min-width:0}
.ac-rw::before,.ac-fill{content:"";position:absolute;left:0;top:19px;height:6px;border-radius:var(--radius-pill);pointer-events:none}
.ac-rw::before{right:0;background:var(--line)}
.ac-fill{width:var(--p);background:var(--ink)}
.ac-row.full .ac-fill{background:var(--green)}
.ac-range{position:relative}
.ac-range::-webkit-slider-runnable-track{height:6px;background:transparent}
.ac-range::-moz-range-track{height:6px;background:transparent}
.ac-range::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;margin-top:-7px;border:0;border-radius:var(--radius-pill);background:var(--ink);box-shadow:0 0 0 4px var(--paper);transition:transform var(--dur-1) var(--ease)}
.ac-range::-moz-range-thumb{width:20px;height:20px;border:0;border-radius:var(--radius-pill);background:var(--ink);box-shadow:0 0 0 4px var(--paper)}
.ac-range:active::-webkit-slider-thumb{transform:scale(1.12)}
.ac-range:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 4px var(--paper),0 0 0 6px var(--green)}
.ac-range:focus-visible::-moz-range-thumb{box-shadow:0 0 0 4px var(--paper),0 0 0 6px var(--green)}

/* ---------- results ---------- */
.ac-results{position:sticky;top:96px;margin-top:-25px;padding:24px 28px 28px;border-radius:var(--radius-l);background:var(--sheet);border:1px solid var(--sheet-edge);box-shadow:var(--shadow-raised);scroll-margin-top:76px}
@media (max-height:820px){.ac-results{position:static}}   /* the panel is ~700px tall: only follow the scroll when it fits */
.ac-k{font:400 14.5px/1.4 var(--font);color:var(--muted)}
.ac-score{padding:28px 0 24px;border-bottom:1px solid var(--line)}
.ac-big{display:flex;align-items:baseline;gap:18px;margin-top:4px}
.ac-grade{font:400 128px/1 var(--font);letter-spacing:-.06em;color:var(--ink);font-variant-numeric:tabular-nums}
.ac-grade[data-grade="3"],.ac-grade[data-grade="4"],.ac-grade[data-grade="5"]{color:var(--green)}
.ac-label{font:500 20px/1.3 var(--font);letter-spacing:-.015em;color:var(--ink)}
.ac-advice{margin-top:14px;font:400 15.5px/1.6 var(--font);color:var(--text)}
.ac-nums{display:grid;grid-template-columns:1fr 1fr;margin:0;border-bottom:1px solid var(--line)}
/* round 5 (content) & round 28 (calc): the two numbers follow the stats ruling, centred between a 1px hairline, number first and
   the labels under it (the markup keeps dt first for screen readers, flex order moves the number up) */
.ac-nums>div{display:flex;flex-direction:column;align-items:center;padding:20px 16px 18px;text-align:center}
.ac-nums>div+div{border-left:1px solid var(--line)}
.ac-nums dt{order:1;margin-top:8px;font:500 13px/1.4 var(--font);color:var(--text)}
.ac-nums dd{margin:0}
.ac-nums output{display:block;font:400 34px/1.1 var(--font);letter-spacing:-.02em;color:var(--ink);font-variant-numeric:tabular-nums}
.ac-nums .ac-sub{order:2;margin-top:2px;font:400 12.5px/1.4 var(--font);color:var(--muted)}

/* composite position: a quiet grey scale, the band you are in turns green */
.ac-pos{padding:22px 0 24px;border-bottom:1px solid var(--line)}
.ac-pos-t{margin-top:2px;font:400 15px/1.5 var(--font);color:var(--text)}
.ac-pos-t span{font-weight:500;color:var(--ink);font-variant-numeric:tabular-nums}
.ac-bar{position:relative;margin-top:36px}
.ac-track{display:flex;height:10px;border-radius:var(--radius-s);overflow:hidden;background:var(--soft-2)}
.ac-seg{height:100%;background:var(--line);border-right:2px solid var(--sheet);transition:background-color var(--dur-2) var(--ease)}
.ac-seg:last-child{border-right:0}
.ac-seg[data-g="1"]{background:var(--soft-2)}.ac-seg[data-g="2"]{background:var(--line)}.ac-seg[data-g="3"]{background:var(--line-2)}.ac-seg[data-g="4"]{background:color-mix(in srgb,var(--line-2),var(--muted) 18%)}.ac-seg[data-g="5"]{background:color-mix(in srgb,var(--line-2),var(--muted) 34%)}
.ac-seg.on{background:var(--green)!important}
.ac-you{position:absolute;bottom:-5px;width:2px;height:20px;margin-left:-1px;background:var(--ink);transition:left var(--dur-2) var(--ease)}
.ac-you span{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);font:500 12.5px/1 var(--font);color:var(--ink);white-space:nowrap}
.ac-scale{display:flex;justify-content:space-between;margin-top:10px;font:400 12.5px/1 var(--font);color:var(--muted);font-variant-numeric:tabular-nums}
.ac-gl{display:flex;margin-top:8px}
.ac-gl span{min-width:0;overflow:hidden;text-align:center;font:400 12px/1.2 var(--font);color:var(--muted);white-space:nowrap}
/* round 6: the label under the band you are in reads in ink, so the scale says where you are without the bar */
.ac-gl span.on{color:var(--ink);font-weight:500}

.ac-break{padding:22px 0 8px}
.ac-break ul{margin:10px 0 0;padding:0;list-style:none}
.ac-break li{display:flex;justify-content:space-between;gap:16px;padding:11px 0;border-top:1px dashed var(--rule-dash);font:400 15px/1.4 var(--font);color:var(--text)}
.ac-break li b{font-weight:500;color:var(--ink);white-space:nowrap;font-variant-numeric:tabular-nums}
.ac-links{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.ac-links .btn{height:48px;padding:0 22px;font-size:16px}   /* R13: the home page's standard pill (was 46px/15px) */
.ac-links .btn svg{width:16px;height:16px}

/* ---------- conversion table ---------- */
/* prop-calc-misc 2026-10-22: the conversion table is a compact system table (.sx-cmp) on a white sheet; the row the
   current composite falls in is the square green highlight (--cmp-hi), like the Stellar column on the home page */
.ac-table-wrap{max-width:640px;margin-top:20px}
.ac-table{font-variant-numeric:tabular-nums}
.ac-table :is(th,td):first-child{text-align:left;padding-left:20px}
.ac-table :is(th,td):last-child{text-align:right;width:120px;padding-right:20px}
.ac-table thead th{font-weight:500;color:var(--muted)}
.ac-table tbody tr:last-child td{border-bottom:0}
.ac-table td:last-child{font-weight:500;color:var(--ink)}
/* round 5: ranges read as text ("64–100"), so proportional figures; tabular ones looked monospaced */
.ac-table td:first-child{font-variant-numeric:normal}
.ac-table tr[aria-current] td{background:var(--cmp-hi);color:var(--ink);font-weight:500}
.ac-table tr[aria-current] td:last-child{color:var(--green-d,var(--green))}
/* index stats: unboxed centred numbers between hairlines under the hero call to action */
.ac-stats{margin-top:56px}
.ac-note{margin-top:20px;max-width:640px;font:400 15px/1.6 var(--font);color:var(--muted)}
/* round 6: the 640px table left the right half of the band empty; on wide screens the note sits beside it as a
   quiet side column behind a hairline, so the section reads as one balanced block */
@media (min-width:960px){
  .ac-table-sec .wrap{display:grid;grid-template-columns:minmax(0,640px) minmax(0,1fr);column-gap:64px;align-items:start}
  .ac-table-sec .ac-sec-head{grid-column:1/-1}
  .ac-table-sec .ac-note{margin-top:20px;max-width:380px;padding:4px 0 4px 24px;border-left:1px solid var(--line)}
}

/* ---------- phone score bar ---------- */
.ac-dock{display:none}

@media (max-width:1024px){
  .ac-grid{grid-template-columns:1fr;gap:56px}
  .ac-inputs{padding-bottom:28px}
  .ac-results{position:static;margin-top:0}
  .ac-dock{position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom, 0px));z-index:40;display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:44px;box-sizing:border-box;padding:9px 16px;border:1px solid var(--sheet-edge,var(--line));border-radius:var(--radius-m);background:color-mix(in srgb,var(--sheet) 94%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:var(--shadow-float);color:var(--muted);font:400 14px/1.2 var(--font);transform:translateY(140%);transition:transform var(--dur-2) var(--ease);pointer-events:none}
  .ac-dock b{margin-left:6px;font:500 17px/1 var(--font);color:var(--ink);font-variant-numeric:tabular-nums}
  /* round 6: the floating score bar was an inverted ink/white slab (a white block in dark mode); it now uses the
     light popup style the owner asked for: sheet, hairline, float shadow, and html.dark swaps it via the tokens */
  .ac-dock.show{transform:none;pointer-events:auto;cursor:pointer}   /* swarm R29: a tap jumps to the results */
  /* swarm R14 & R39: Tab and focus scroll clear of the floating score bar */
  html{scroll-padding-bottom:110px}
}
@media (max-width:720px){
  .ac-hero{padding:24px 0 40px}
  .ac-hero-ix{padding:64px 0 56px}
  .ac-hero h1{margin-top:36px}
  .ac-lead{font-size:17px}
  .ac-row{margin-left:0}
  .ac-sec-h{grid-template-columns:32px minmax(0,1fr)}
  .ac-sec-w{grid-column:2;margin-top:2px;font-size:14.5px}
  .ac-ctl{grid-template-columns:44px minmax(0,1fr) 44px 64px;gap:8px}
  .ac-step{width:44px;height:44px}
  .ac-num{width:64px;height:44px}
  .ac-grade{font-size:104px}
  .ac-results{padding:20px 20px 24px}
  .ac-nums output{font-size:28px}
  .ac-nums>div{padding:16px 8px 14px}
  .ix-grid{columns:1}
  .ix-find{max-width:none}
  .ac-inputs .ac-col-h{grid-template-columns:1fr}
  .ac-reset{grid-column:1;grid-row:auto;justify-self:start;margin-top:14px}
}
@media (prefers-reduced-motion:reduce){
  .ac-you,.ac-seg,.ac-dock,.ac-hint,.ac-range::-webkit-slider-thumb,.ac-step,.ac-reset,.ac-num,.ix-find,.ix li a,.ix li svg,.ac-back,.ac-back svg{transition:none}
  .ac-step:is(:hover,:active),.ac-reset:is(:hover,:active),.ix li a:hover svg,.ac-range:active::-webkit-slider-thumb{transform:none}
  .ac-step:is(:hover,:active),.ac-reset:is(:hover,:active){translate:none;scale:none}   /* R13: the lifts are translate/scale, so transform:none did not stop them */
  .ac-back:hover svg,.ix li a:hover svg{translate:none}
}

/* the slider thumb ring matches the paper band the calculator now sits on */
.ac-tool .ac-range::-webkit-slider-thumb{box-shadow:0 0 0 4px var(--band-paper)}
.ac-tool .ac-range::-moz-range-thumb{box-shadow:0 0 0 4px var(--band-paper)}
.ac-tool .ac-range:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 4px var(--band-paper),0 0 0 6px var(--green)}
/* four index stats read as two rows of two on phones (the system default is rows of three) */
@media (max-width:720px){
  .ac-stats{margin-top:44px}
  .ac-stats>*{flex:1 1 50%;border-left:0}
  .ac-stats>:nth-child(even){border-left:1px solid var(--line)}
  .ac-stats>:nth-child(n+3){margin-top:20px}
  .ac-stats>:nth-child(4){margin-top:20px}
}
/* round 4 (content): the closing band matches the home page and the course pages, with no dashed rule above it */
.ac .final3{border-top:0!important;padding-top:24px}
/* calculator list rows keep 12px inside their hover box, so the chevron and names never touch its edge */
.ix li a{padding-left:12px;padding-right:12px}
/* the list sits on the shade band, where --soft is the band's own colour in dark mode; take the panel shade instead */
.ix li a:hover{background:var(--panel-on-shade)}
/* round 5 (content): on phones the two practice buttons share the row or each take a full line when they wrap,
   instead of two ragged left-aligned pills */
@media (max-width:720px){.ac-links .btn{flex:1 1 auto;justify-content:center}}
/* round 17: phone tap targets handled in the <=1024px block */
/* swarm R32: on phones the slider's own touch box matches the 44px step buttons (it was 28px), and the "% of section"
   note always takes its own line, so short and long labels no longer alternate between one and two lines */
@media (max-width:720px){.ac-rw,.ac-range{height:44px}.ac-rw::before,.ac-fill{top:19px}.ac-row-m{flex-basis:100%}}
/* round 17: balanced headings like the course, blog, legal and 404 pages ("Calculator" and "points." were left alone on the last line at 1440 and 768) */
.ac-hero h1,.ac-sec-head h2{text-wrap:balance}.ac-hero p{text-wrap:pretty}
/* swarm R41 (scout 39 #4): set sticky top to 76px so the score card never slides under the 68px header (8px clearance),
   tighten vertical spacing so the card fits cleanly, and make static on <= 940px so buttons never clip on 900px viewports (idle calc audit #3) */
@media (min-width:1025px){
  .ac-results{position:sticky;top:76px;padding:18px 22px 20px}
  .ac-col-h{padding-bottom:8px}
  .ac-score{padding:10px 0 10px}
  .ac-grade{font-size:80px;line-height:.95}
  .ac-advice{margin-top:4px;font-size:13px}
  .ac-nums>div{padding:8px 8px 8px}
  .ac-nums output{font-size:26px}
  .ac-bar{margin-top:24px}   /* swarm R45: 18px left the "You" label 4px under the sentence above it */
  .ac-break{padding:8px 0 2px}
  .ac-break li{padding:4px 0;font-size:13px}
  .ac-pos{padding:8px 0}
  .ac-links{margin-top:12px;gap:8px}
}
/* swarm R42 & R46: on laptop screens with height <= 940px (e.g. 1440x900, 768px, 800px), make .ac-results static so the bottom of the card and CTA buttons are never cut off or unreachable */
@media (min-width:1025px) and (max-height:940px){
  .ac-results{position:static;margin-top:0}
}
/* swarm R20 (content): the calculator hero used only its left half at 1440. From 1025px the title sits beside the
   home page's feature form: a panel that bleeds to the right wall holding a white figure sheet with the exam's section
   weights (bars, ink on the grey track like the sliders), and three unboxed centred numbers between hairlines. Phones
   and tablets keep the short hero, so the inputs stay right under the title */
@media (min-width:1025px){
  .ac-hero-g{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:64px;align-items:center;margin-top:40px}
  .ac-hero-g h1{margin-top:0}
}
/* swarm R36 (idle calc audit #6): phones and tablets lost the weights card, so "64+ for a 5" was desktop only and the
   tablet hero was a bare heading. Tablets (721-1024px) show the same figure under the lead, the panel bleeding to the
   right wall. Phones show only its three numbers as the site's unboxed stat row between hairlines (the section weights
   already sit in each section header), so the inputs still start one short scroll below the title */
@media (min-width:721px) and (max-width:1024px){.ac-stage{margin-top:40px}.ac-stage .acw-l li{grid-template-columns:minmax(0,1fr) 160px 52px;gap:16px}}
@media (max-width:720px){
  .ac-stage{margin:28px 0 0;padding:0;background:none;border:0;border-radius:0}
  .ac-stage .ac-wsheet{padding:0;background:none;border:0;border-radius:0;box-shadow:none;translate:none}
  .ac-stage .acw-k,.ac-stage .acw-h,.ac-stage .acw-l,.ac-stage figcaption{display:none}
  .ac-stage .acw-s{margin:0;padding:16px 0;border-bottom:1px solid var(--line)}
  .ac-stage .acw-s b{font-size:26px}
  .ac-stage .acw-s>div{padding:0 4px}.ac-stage .acw-s span{text-wrap:balance}   /* no lone "5" on a second line at 375 */
}
.ac-fig{margin:0}
.ac-wsheet{padding:24px 26px 22px}
.acw-k{font:400 14px/1.4 var(--font);color:var(--muted)}
.acw-h{margin-top:4px;font:500 19px/1.3 var(--font);letter-spacing:-.015em;color:var(--ink)}
.acw-l{margin:16px 0 0;padding:0;list-style:none}
.acw-l li{display:grid;grid-template-columns:minmax(0,1fr) 88px 52px;align-items:center;gap:14px;padding:10px 0;border-top:1px dashed var(--rule-dash);font:400 15px/1.4 var(--font);color:var(--text)}
.acw-n{min-width:0;overflow-wrap:anywhere}   /* long names ("Section II: Create Performance Task and Written Response") wrap, never cut */
@media (max-width:1279px){.acw-l li{grid-template-columns:minmax(0,1fr) 56px 48px;gap:12px}}
.acw-b{position:relative;height:6px;border-radius:var(--radius-pill);background:var(--line);overflow:hidden}
.acw-b::before{content:"";position:absolute;top:0;bottom:0;left:0;width:var(--w);border-radius:inherit;background:var(--ink)}
.acw-l b{font-weight:500;color:var(--ink);text-align:right;font-variant-numeric:tabular-nums}
.acw-s{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:6px;padding-top:18px;border-top:1px solid var(--line)}
.acw-s>div{display:flex;flex-direction:column;align-items:center;padding:0 8px;text-align:center}
.acw-s>div+div{border-left:1px solid var(--line)}
.acw-s b{font:400 28px/1.05 var(--font);letter-spacing:-.02em;color:var(--ink);font-variant-numeric:tabular-nums}
.acw-s span{margin-top:8px;font:400 13px/1.35 var(--font);color:var(--muted)}
/* swarm R35 (scout #19): touch tablets and phones (<=1024px) get 44px step buttons, 44px number box, 44px slider, 44px reset, 44px back and crumb links */
@media (max-width:1024px), (pointer:coarse){
  .ac-ctl{grid-template-columns:44px minmax(0,1fr) 44px 64px;gap:8px}
  .ac-step{width:44px;height:44px}
  .ac-num{width:64px;height:44px}
  .ac-rw,.ac-range{height:44px}.ac-rw::before,.ac-fill{top:19px}
  .ac-reset{height:44px;padding:0 20px}
  .ac-back{min-height:44px;padding-block:11.5px;margin-block:16px -11.5px}
  .ix-find{padding-right:0}.ix-x{width:44px;height:44px}
}
/* swarm R33: on tablets the score bar ran 744px wide with its two numbers at opposite ends and empty space between.
   It is a centred summary now: both numbers side by side with the site's hairline between them, like the stat rows */
@media (min-width:721px) and (max-width:1024px){
  .ac-dock{left:50%;right:auto;width:max-content;max-width:calc(100% - 24px);translate:-50% 0;justify-content:center;gap:0;padding:9px 6px}
  .ac-dock>span{padding:0 20px}
  .ac-dock>span+span{border-left:1px solid var(--line)}
}
/* swarm R34: the desktop score bar. The results card is taller than a laptop window, so its AP score scrolled away
   while you worked the lower questions. From 1025px the same bar floats over the results column (400px, on the wrap's
   right edge) with both numbers centred between a hairline, only while the score block is out of view (calc.js) */
@media (min-width:1025px){
  .ac-dock{position:fixed;right:max(32px,calc((100% - var(--wrap)) / 2 + 32px));bottom:24px;z-index:40;display:flex;justify-content:center;width:400px;padding:12px 6px;border:1px solid var(--sheet-edge,var(--line));border-radius:var(--radius-m);background:var(--sheet);box-shadow:var(--shadow-float);color:var(--muted);font:400 14px/1.2 var(--font);opacity:0;translate:0 12px;transition:opacity var(--dur-2) var(--ease),translate var(--dur-2) var(--ease);pointer-events:none}
  .ac-dock>span{padding:0 20px}
  .ac-dock>span+span{border-left:1px solid var(--line)}
  .ac-dock b{margin-left:6px;font:500 17px/1 var(--font);color:var(--ink);font-variant-numeric:tabular-nums}
  .ac-dock.show{opacity:1;translate:none;pointer-events:auto;cursor:pointer}
  .ac-dock.show:hover{border-color:var(--ac-edge)}
}
/* swarm R34: Reset says it worked: the values it moved flash once in the highlight tint */
@keyframes ac-flash{from{background:var(--cmp-hi)}to{background:transparent}}
.ac-row-v b.ac-flash{border-radius:4px;animation:ac-flash .9s var(--ease)}
/* swarm R34: the composite scale. "50" sat 2 to 3% left of the middle (space-between centres the box, and "0" and
   "100" differ in width), the band labels mixed "AP 1" and "2", and the caption now names the bands once */
.ac-scale{position:relative}
.ac-scale span:nth-child(2){position:absolute;left:50%;transform:translateX(-50%)}
.ac-gl-k{margin-top:6px;font:400 12px/1.3 var(--font);color:var(--muted);text-align:center}
html.dark .ac-seg[data-g="1"]{background:#232826}html.dark .ac-seg[data-g="2"]{background:#2b312e}html.dark .ac-seg[data-g="3"]{background:#353c39}html.dark .ac-seg[data-g="4"]{background:#424a46}html.dark .ac-seg[data-g="5"]{background:#525a56}
html.dark .ac-seg.on{background:var(--green)!important}
@media (prefers-reduced-motion:reduce){.ac-dock{transition:none}.ac-row-v b.ac-flash{animation:none}}

/* swarm R47 (idle calc audit #4): the first slider sat 137px below the fold at 1440x900 (first row at y=1037) and
   97px below at 390 (y=941). The hero keeps the 64px rhythm but loses its extra air, and the tool band starts
   right under it, so a student can start typing without scrolling. */
@media (min-width:1025px){
  .ac-hero{padding-block:24px 28px}
  .ac-hero-g{margin-top:16px}
  .ac-hero h1{font-size:clamp(38px,4.4vw,56px)}
  .ac-lead{margin-top:14px;font-size:17px}
  .ac-back{margin-block:12px -11.5px}
  .ac-wsheet{padding:20px 24px 18px}
  .acw-s{padding-top:14px}
  .ac-tool{padding-top:32px}
}
@media (max-width:720px){
  .ac-hero{padding:12px 0 24px}
  .ac-hero h1{margin-top:20px}
  .ac-lead{margin-top:12px;font-size:16px}
  .ac-stage{margin:20px 0 0}
  .ac-stage .acw-s{padding:12px 0}
  .ac-tool{padding-top:28px}
}
/* swarm R47 (idle calc audit #6): the phone slider shared one line with minus, plus and the number box, so the
   track was only 174px wide (4px per point on a 30 point section, smaller than a fingertip). On phones the
   slider now takes its own full-width line under the label, with minus, plus and the number on the line above. */
@media (max-width:720px){
  .ac-ctl{grid-template-columns:44px minmax(0,1fr) 44px 64px;grid-template-areas:"a m p d" "b b b b";row-gap:6px}
  .ac-step[data-d="-1"]{grid-area:a}
  .ac-rw{grid-area:b}
  .ac-step[data-d="1"]{grid-area:p}
  .ac-num{grid-area:d}
}
/* swarm R55: that line read "minus ... 160px of nothing ... plus, number", so minus looked unrelated to the field it
   changes. On phones the three now sit together as one stepper (minus, number, plus) under the row's "4 / 7" readout.
   Only the grid areas move: Tab order is unchanged (the step buttons are not Tab stops) */
@media (max-width:720px){
  .ac-ctl{grid-template-columns:minmax(0,1fr) 44px 64px 44px;grid-template-areas:". a d p" "b b b b"}
}
/* swarm R47 (idle calc audit #7): on phone the calculator index is a 6,575px scroll and the filter field scrolled
   off the top after the first group. The search row now sticks under the header while the list scrolls under it,
   with the /courses/ catalog's stuck bar treatment: the band's own shade, a hairline and a soft shadow fade in
   behind it only once it is stuck (a sentinel class from calc.js). */
@media (max-width:1024px){
  .ix-find{position:sticky;top:calc(12px + var(--pb-top,0px));z-index:20;margin:20px 0 12px;padding:8px 8px 8px 16px;--senti:12px;--pb-top:0px}
  .ix-find::before{content:"";position:absolute;z-index:-1;top:-8px;bottom:-8px;left:calc(50% - 50vw);right:calc(50% - 50vw);background:var(--band-shade);opacity:0;box-shadow:0 1px 0 var(--line),0 12px 24px -18px rgba(18,22,20,.28);transition:opacity var(--dur-1) var(--ease)}
  .ix-find.is-stuck::before{opacity:1}
  html.dark .ix-find::before{box-shadow:0 1px 0 var(--line),0 12px 24px -18px rgba(0,0,0,.7)}
  .ix-grid{margin-top:16px}
  #all{scroll-margin-top:64px}
}
@media (max-width:720px){.ix-find{top:8px}}
/* swarm R47: in dark mode the slider thumb kept the light theme's #f8f8f6 ring, a pale halo on the dark band.
   The ring now uses the band token, so html.dark swaps it with the page */
html.dark .ac-tool .ac-range::-webkit-slider-thumb{box-shadow:0 0 0 4px var(--band-paper)}
html.dark .ac-tool .ac-range::-moz-range-thumb{box-shadow:0 0 0 4px var(--band-paper)}
html.dark .ac-tool .ac-range:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 4px var(--band-paper),0 0 0 6px var(--green)}
html.dark .ac-tool .ac-range:focus-visible::-moz-range-thumb{box-shadow:0 0 0 4px var(--band-paper),0 0 0 6px var(--green)}

/* swarm R52 (idle 02:38 speed-jank #5): at 768 the title fit one line in Inter but two in the wide system fallback
   (DejaVu on Linux), so the Inter swap pulled the lead and the weights panel 41px up (CLS .027). A fallback face
   sized to Inter's metrics (Arial and its metric twins, scaled 1.6% below the usual Inter values to match the -.04em tracking) keeps the wrap the same
   before and after the swap. Only the page title and the stage labels use it (the two spots that re-wrapped). */
@font-face{font-family:"Inter AC Fallback";src:local("Arial"),local("ArialMT"),local("Arimo"),local("Liberation Sans"),local("Helvetica");size-adjust:105.4%;ascent-override:91.9%;descent-override:22.9%;line-gap-override:0%}
.ac-hero h1,.acw-s span{font-family:"Inter","Inter AC Fallback",system-ui,-apple-system,"Segoe UI",sans-serif}   /* + the stage labels: "composite for a 5" wrapped in the fallback at 390 (CLS .010) */