/* About UPSC guides. Generated from about-upsc-samples/src/assets by tools/sync_to_site.py;
   edit it there. Loaded only on /upsc/ pages, so the site-wide stylesheet stays small. */
/* About UPSC guides. Hand-written on top of the site's compiled Tailwind and its
   component kit (ground-*, card, eyebrow, heading-underline, page-title,
   section-title, btn-*, text-gradient-*), using its theme variables. When this
   moves into the site it goes into assets/css/styles.css; the phone overrides
   at the end follow that file's rule (end of file, outside @layer). */

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.au-ico { width: 1.05rem; height: 1.05rem; flex: none; }
.au-ico-sm { display: inline-block; width: .8rem; height: .8rem; margin-left: .3rem; vertical-align: -1px; color: var(--color-zinc-400); }

/* ---------------------------------------------------------------- hero band */
.au-hero { padding: 1.25rem 0 2.25rem; border-bottom: 1px solid rgb(27 82 149 / .08); }
.au-crumbs ol { display: flex; flex-wrap: wrap; gap: .25rem .5rem; margin: 0; padding: 0; list-style: none; font-size: .78rem; color: var(--color-zinc-500); }
.au-crumbs li + li::before { content: "/"; margin-right: .5rem; color: var(--color-zinc-300); }
.au-crumbs a { color: var(--color-zinc-500); text-decoration: none; }
.au-crumbs a:hover { color: var(--color-brand-600); }
.au-crumbs [aria-current] { color: var(--color-navy-800); font-weight: 700; }

.au-hero-grid { display: grid; gap: 1.75rem; margin-top: 1.5rem; }
.au-badge { display: inline-flex; align-items: center; gap: .5rem; margin: 0; padding: .35rem .85rem .35rem .7rem; border: 1px solid var(--color-brand-200); border-radius: 999px; background: #fff; font-size: .68rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--color-brand-700); box-shadow: 0 1px 2px rgb(11 22 38 / .05); }
.au-badge .au-ico { width: .95rem; height: .95rem; color: var(--color-gold-600); }
.au-title { margin: 1.1rem 0 0; max-width: 46rem; text-wrap: balance; }
.au-lead { margin-top: .9rem; max-width: 42rem; }
.au-meta { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; margin-top: 1.25rem; font-size: .84rem; color: var(--color-zinc-600); }
.au-meta-item { display: inline-flex; align-items: center; gap: .4rem; }
.au-meta-item .au-ico { color: var(--color-gold-600); }
.au-meta strong { color: var(--color-navy-900); }
.au-meta-link { color: var(--color-brand-600); font-weight: 700; text-decoration: none; }
.au-meta-link:hover { text-decoration: underline; }

.au-share { margin-top: 1.25rem; }
.au-share-row { display: flex; flex-wrap: wrap; gap: .5rem; }
.au-share-btn { display: inline-flex; align-items: center; gap: .45rem; min-height: 2.5rem; padding: 0 .95rem; border: 1px solid rgb(27 82 149 / .16); border-radius: .75rem; background: #fff; color: var(--color-navy-800); font: inherit; font-size: .84rem; font-weight: 700; text-decoration: none; cursor: pointer; transition: border-color 140ms ease, background 140ms ease; }
.au-share-btn:hover { border-color: rgb(27 82 149 / .4); background: var(--color-brand-50); }
.au-share-tg .au-ico { color: #229ed9; }
.au-share-wa .au-ico { color: #1fa855; }
.au-share-bottom { margin-top: 2.5rem; padding: 1.4rem 1.5rem; border-radius: 1.25rem; background: linear-gradient(180deg, #f7faff, #eef4fb); box-shadow: 0 0 0 1px rgb(27 82 149 / .08); }
.au-share-label { margin: 0 0 .8rem; font-size: 1rem; font-weight: 800; color: var(--color-navy-900); }

/* key-numbers card beside the title */
.au-keycard { border-radius: 1.25rem; padding: 1.25rem 1.35rem 1.1rem; }
.au-keycard-title { margin: 0 0 .9rem; font-size: .68rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--color-zinc-500); }
.au-keystats { display: grid; gap: .1rem; margin: 0; }
.au-keystat { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: .7rem 0; border-top: 1px solid var(--color-zinc-100); }
.au-keystat:first-child { border-top: 0; padding-top: 0; }
.au-keystat dt { font-size: .84rem; font-weight: 700; color: var(--color-navy-700); }
.au-keystat dd { margin: 0; text-align: right; }
.au-keystat-v { display: block; font-size: 1.65rem; font-weight: 800; line-height: 1.1; letter-spacing: -.02em; color: var(--color-navy-900); }
.au-keystat-note { display: block; margin-top: .2rem; font-size: .72rem; font-weight: 600; color: var(--color-zinc-500); font-variant-numeric: tabular-nums; }
.au-keycard-foot { margin: .7rem 0 0; padding-top: .7rem; border-top: 1px dashed var(--color-zinc-200); font-size: .75rem; color: var(--color-zinc-500); }

/* ---------------------------------------------------------------- layout */
.au-layout { display: grid; gap: 2.5rem; padding: 2.25rem 0 1rem; }
.au-main { min-width: 0; max-width: 48rem; }
.au-aside { display: flex; flex-direction: column; gap: 1.25rem; }
.au-aside-title { margin: 0 0 .7rem; font-size: .68rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--color-zinc-500); }

.au-toc { display: none; padding: 1.2rem 1.25rem; border-radius: 1.25rem; background: #fff; box-shadow: 0 0 0 1px rgb(27 82 149 / .09), 0 1px 2px rgb(11 22 38 / .035); }
.au-toc ol, .au-toc-mobile ol { margin: 0; padding: 0; list-style: none; counter-reset: toc; }
.au-toc li, .au-toc-mobile li { counter-increment: toc; }
.au-toc a, .au-toc-mobile a { display: flex; gap: .65rem; padding: .42rem .5rem; margin: 0 -.5rem; border-radius: .6rem; font-size: .86rem; line-height: 1.35; color: var(--color-navy-700); text-decoration: none; }
.au-toc a::before, .au-toc-mobile a::before { content: counter(toc, decimal-leading-zero); flex: none; font-size: .72rem; font-weight: 800; line-height: 1.6; color: var(--color-gold-600); font-variant-numeric: tabular-nums; }
.au-toc a:hover, .au-toc-mobile a:hover { background: var(--color-surface-50); color: var(--color-brand-600); }
.au-toc a.is-active { background: var(--color-brand-50); color: var(--color-brand-700); font-weight: 700; }
.au-toc-mobile { margin-bottom: 1.75rem; border-radius: 1rem; background: #fff; box-shadow: 0 0 0 1px rgb(27 82 149 / .1); }
.au-toc-mobile summary { display: flex; align-items: center; justify-content: space-between; min-height: 3.25rem; padding: 0 1rem; font-weight: 800; color: var(--color-navy-900); cursor: pointer; list-style: none; }
.au-toc-mobile summary::-webkit-details-marker { display: none; }
.au-toc-count { font-size: .75rem; font-weight: 700; color: var(--color-zinc-500); }
.au-toc-mobile ol { padding: 0 1rem .9rem; }

.au-cta { position: relative; overflow: hidden; padding: 1.4rem 1.35rem; border-radius: 1.25rem; color: #fff; }
.au-cta-title { margin: .7rem 0 0; font-size: 1.2rem; font-weight: 800; line-height: 1.25; color: #fff; }
.au-cta-text { margin: .5rem 0 1.1rem; font-size: .875rem; line-height: 1.55; color: rgb(255 255 255 / .78); }
.au-cta-btn { display: flex; align-items: center; justify-content: center; gap: .5rem; min-height: 2.9rem; border-radius: .8rem; font-weight: 800; font-size: .9rem; text-decoration: none; }

.au-series-box { padding: 1.2rem 1.25rem; border-radius: 1.25rem; background: var(--color-surface-50); box-shadow: 0 0 0 1px rgb(27 82 149 / .07); }
.au-series-parent { display: block; margin: 0 0 .5rem; font-weight: 800; color: var(--color-navy-900); text-decoration: none; }
a.au-series-parent:hover { color: var(--color-brand-600); }
.au-series-box ul { margin: 0; padding: 0; list-style: none; }
.au-series-box li a, .au-series-box li span { display: block; padding: .36rem 0 .36rem .8rem; border-left: 2px solid var(--color-zinc-200); font-size: .86rem; color: var(--color-navy-700); text-decoration: none; }
.au-series-box li a:hover { color: var(--color-brand-600); border-color: var(--color-brand-300); }
.au-series-box [aria-current] { border-color: var(--color-gold-500) !important; color: var(--color-navy-900) !important; font-weight: 800; }
.au-soon-text { color: var(--color-zinc-400) !important; }

/* ---------------------------------------------------------------- body */
.au-body { font-size: 1.0625rem; line-height: 1.75; }
.au-body > :first-child { margin-top: 0; }
.au-body h2 { position: relative; margin: 3rem 0 1.1rem; padding-bottom: .8rem; font-size: 1.55rem; line-height: 1.2; letter-spacing: -.015em; scroll-margin-top: 6rem; }
.au-body h2::after { content: ""; position: absolute; left: 0; bottom: 0; width: 2.75rem; height: 3px; border-radius: 999px; background: linear-gradient(90deg, var(--color-gold-500), var(--color-gold-300)); }
.au-body h3 { margin-top: 2rem; font-size: 1.15rem; scroll-margin-top: 6rem; }
.au-body strong { color: var(--color-navy-900); }
/* display:block beats the Tailwind utility .table { display: table } that this class name also matches;
   without it the figure never scrolls and wide tables push the page sideways on phones. */
.au-body figure.table { display: block; margin: 1.75rem 0; overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 1rem; box-shadow: 0 0 0 1px rgb(27 82 149 / .1); }
.au-body figure.table table { display: table; width: 100%; margin: 0; font-size: .9rem; }
.au-body figure.table thead { background: var(--color-surface-50); }
.au-body figure.table th, .au-body figure.table td { padding: .65rem .9rem; }
.au-body .au-glance { margin: 1.75rem 0; padding: 1.2rem 1.35rem; border-radius: 1.25rem; background: linear-gradient(180deg, #f7faff, #eef4fb); box-shadow: 0 0 0 1px rgb(27 82 149 / .08); }
.au-body .au-glance > p:first-child { margin: 0 0 .4rem; font-size: .68rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--color-gold-700); }
.au-body .au-glance ul { margin: 0; }
.au-body .au-note { margin: 1.75rem 0; padding: 1rem 1.2rem; border-left: 3px solid var(--color-gold-400); border-radius: 0; background: var(--color-gold-50); font-size: .97rem; }
.au-body .au-lede { font-size: 1.15rem; line-height: 1.7; color: var(--color-navy-700); }

.au-highlights { margin: 1.75rem 0; padding: 1.3rem 1.4rem; border-radius: 1.25rem; background: linear-gradient(180deg, #f7faff, #eef4fb); box-shadow: 0 0 0 1px rgb(27 82 149 / .08); }
.au-hl-title { margin: 0 0 1rem; font-size: .68rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--color-gold-700); }
.au-hl-grid { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }
.au-hl { padding: .95rem 1rem; border-radius: 1rem; background: #fff; box-shadow: 0 0 0 1px rgb(27 82 149 / .08); }
.au-hl p { margin: 0; }
.au-hl-stage { font-size: .82rem; font-weight: 800; color: var(--color-navy-900); }
.au-hl-stage span { font-weight: 600; color: var(--color-zinc-500); }
.au-hl-range { margin-top: .35rem !important; font-size: 1.3rem; font-weight: 800; color: var(--color-zinc-400); font-variant-numeric: tabular-nums; }
.au-hl-note { margin-top: .35rem !important; font-size: .78rem; line-height: 1.5; color: var(--color-zinc-600); }
.au-hl-foot { margin: .9rem 0 0; font-size: .84rem; line-height: 1.55; color: var(--color-navy-700); }

/* ---------------------------------------------------------------- data blocks */
.au-block { margin: 2rem 0; padding: 1.25rem; border-radius: 1.25rem; background: #fff; box-shadow: 0 0 0 1px rgb(27 82 149 / .1), 0 1px 2px rgb(11 22 38 / .04), 0 14px 30px -24px rgb(27 82 149 / .35); }
.au-block-head { display: flex; align-items: center; gap: .85rem; margin-bottom: 1rem; }
.au-block-tile { display: flex; align-items: center; justify-content: center; flex: none; width: 2.5rem; height: 2.5rem; border-radius: .8rem; background: var(--color-brand-50); color: var(--color-brand-600); }
.au-block-tile svg { width: 1.3rem; height: 1.3rem; }
.au-block-title { margin: 0; font-size: 1.08rem; font-weight: 800; line-height: 1.3; color: var(--color-navy-900); }
.au-block-note { margin: .1rem 0 0; font-size: .78rem; color: var(--color-zinc-500); }
.au-block-foot { margin: 1rem 0 0; padding-top: .85rem; border-top: 1px solid var(--color-zinc-100); font-size: .78rem; line-height: 1.55; color: var(--color-zinc-500); }

.au-filters { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem .8rem; margin-bottom: 1rem; }
.au-seg { display: inline-flex; padding: 3px; border-radius: .85rem; background: var(--color-surface-100); }
.au-seg button { min-height: 2.4rem; padding: 0 1rem; border: 0; border-radius: .65rem; background: transparent; color: var(--color-navy-700); font: inherit; font-size: .86rem; font-weight: 700; cursor: pointer; }
.au-seg button[aria-pressed="true"] { background: #fff; color: var(--color-brand-600); box-shadow: 0 1px 2px rgb(11 22 38 / .1), 0 0 0 1px rgb(27 82 149 / .08); }
.au-chips { display: flex; flex-wrap: wrap; gap: .35rem; }
.au-chip { min-height: 2.25rem; padding: 0 .8rem; border: 1px solid rgb(27 82 149 / .16); border-radius: 999px; background: #fff; color: var(--color-navy-700); font: inherit; font-size: .8rem; font-weight: 700; white-space: nowrap; cursor: pointer; }
.au-chip:hover { border-color: rgb(27 82 149 / .4); }
.au-chip[aria-pressed="true"] { border-color: var(--color-navy-900); background: var(--color-navy-900); color: #fff; }

/* chart: the selected category in brand blue with a light wash, the rest grey */
.au-chart-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .25rem 1rem; margin-bottom: .4rem; }
.au-chart-note { margin: 0; font-size: .8rem; font-weight: 600; color: var(--color-zinc-500); }
.au-legend { display: flex; gap: 1rem; margin: 0; font-size: .8rem; color: var(--color-zinc-600); }
.au-legend > span { display: inline-flex; align-items: center; gap: .4rem; }
.au-key { display: inline-block; width: 18px; height: 2px; border-radius: 2px; }
.au-key-on { height: 3px; background: var(--color-brand-500); }
.au-key-ctx { background: #c5cad3; }
.au-chart { position: relative; margin: 0 -.25rem; padding: .25rem; outline: none; border-radius: .75rem; }
.au-chart:focus-visible { box-shadow: 0 0 0 2px var(--color-brand-300); }
.au-chart-svg { display: block; width: 100%; height: auto; overflow: visible; touch-action: pan-y; }
.au-chart-svg.is-narrow { display: none; }
.au-grid { stroke: #e9ecf2; stroke-width: 1; shape-rendering: crispEdges; }
.au-tick { font-family: var(--font-sans); font-size: 12px; font-weight: 600; fill: var(--color-zinc-500); font-variant-numeric: tabular-nums; }
.is-narrow .au-tick { font-size: 13px; }
.au-series { pointer-events: none; }
.au-line { fill: none; stroke: #ccd1d9; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.au-area { display: none; fill: var(--color-brand-500); opacity: .09; }
.au-dot { display: none; fill: var(--color-brand-500); stroke: #fff; stroke-width: 2; }
.au-endlabel { display: none; font-family: var(--font-sans); font-size: 13px; font-weight: 800; fill: var(--color-navy-900); }
.is-narrow .au-endlabel { font-size: 14px; }
.au-series[data-cat^="PwBD"]:not(.is-on) { display: none; }
.au-series.is-on .au-line, .au-series.is-solo .au-line { stroke: var(--color-brand-500); stroke-width: 2.5; }
.au-series.is-on .au-area, .au-series.is-solo .au-area { display: block; }
.au-series.is-on .au-dot, .au-series.is-solo .au-dot { display: block; }
.au-series.is-on .au-endlabel, .au-endlabel.is-shown { display: block; }
.au-crosshair { stroke: var(--color-navy-300); stroke-width: 1; }
.au-hit { fill: transparent; cursor: crosshair; }
.au-tip { position: absolute; top: 0; left: 0; z-index: 5; min-width: 9.5rem; padding: .6rem .75rem; border-radius: .85rem; background: #fff; box-shadow: 0 0 0 1px rgb(27 82 149 / .14), 0 10px 24px -12px rgb(11 22 38 / .35); pointer-events: none; font-size: .8rem; }
.au-tip-year { margin-bottom: .35rem; font-weight: 800; color: var(--color-navy-900); }
.au-tip-row { display: flex; align-items: center; gap: .5rem; padding: .1rem 0; }
.au-tip-row .au-key { width: 14px; }
.au-tip-val { min-width: 3.2rem; font-weight: 800; color: var(--color-navy-900); font-variant-numeric: tabular-nums; }
.au-tip-cat { color: var(--color-zinc-500); }
.au-tip-row.is-on .au-tip-cat { color: var(--color-navy-900); font-weight: 700; }

/* tables */
/* position: relative keeps absolutely positioned children (sr-only captions) inside the scroll box;
   without it they sat at their place in the wide table and widened the whole page on phones. */
.au-table-wrap { position: relative; margin: 1.1rem -1.25rem 0; padding: 0 1.25rem; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.au-table { display: table; width: 100%; border-collapse: separate; border-spacing: 0; font-size: .875rem; font-variant-numeric: tabular-nums; }
.au-table th, .au-table td { padding: .6rem .65rem; border-bottom: 1px solid var(--color-zinc-100); text-align: right; vertical-align: top; white-space: nowrap; }
.au-table thead th { border-bottom: 0; background: var(--color-surface-50); font-size: .74rem; font-weight: 800; letter-spacing: .02em; color: var(--color-navy-700); }
.au-table thead th:first-child { border-radius: .7rem 0 0 .7rem; }
.au-table thead th:last-child { border-radius: 0 .7rem .7rem 0; }
.au-table th:first-child, .au-table td:first-child { position: sticky; left: 0; z-index: 1; background: #fff; text-align: left; }
.au-table thead th:first-child { background: var(--color-surface-50); }
.au-table tbody th { font-weight: 800; color: var(--color-navy-900); }
.au-table tbody th a { color: var(--color-brand-600); text-decoration: none; }
.au-table tbody th a:hover { text-decoration: underline; }
.au-table tbody tr:hover td, .au-table tbody tr:hover th { background: #fafbfd; }
.au-table td { color: var(--color-navy-800); font-weight: 600; }
.au-table .is-col { background: var(--color-brand-50) !important; color: var(--color-brand-700); font-weight: 800; }
.au-table thead .is-col { color: var(--color-brand-700); }
.au-table thead button { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: .25rem; }
.au-table thead button:focus-visible { outline: 2px solid var(--color-brand-300); outline-offset: 2px; }
.au-table th[aria-sort="ascending"] button::after { content: "↑"; color: var(--color-brand-500); }
.au-table th[aria-sort="descending"] button::after { content: "↓"; color: var(--color-brand-500); }
.au-delta { display: block; margin-top: .12rem; font-size: .68rem; font-weight: 700; color: var(--color-zinc-400); }
.au-th-sub { display: block; font-size: .66rem; font-weight: 600; color: var(--color-zinc-500); }
.au-table-year td { min-width: 6rem; font-size: .95rem; }

/* forms: checker and calculators */
.au-form { display: grid; gap: .85rem; }
.au-field { display: grid; gap: .4rem; font-size: .82rem; font-weight: 700; color: var(--color-navy-800); }
.au-field input, .au-field select { min-height: 2.9rem; padding: 0 .9rem; border: 1px solid rgb(27 82 149 / .2); border-radius: .8rem; background: #fff; color: var(--color-navy-900); font: inherit; font-size: .95rem; font-weight: 600; }
.au-field input:focus, .au-field select:focus { outline: none; border-color: var(--color-brand-400); box-shadow: 0 0 0 3px var(--color-brand-100); }
.au-check { display: flex; align-items: center; gap: .6rem; min-height: 2.9rem; font-size: .88rem; font-weight: 600; color: var(--color-navy-800); }
.au-check input { width: 1.15rem; height: 1.15rem; accent-color: var(--color-brand-500); }
.au-btn { min-height: 2.9rem; padding: 0 1.3rem; border: 0; border-radius: .8rem; font: inherit; font-size: .92rem; font-weight: 800; cursor: pointer; }
.au-error { margin: 0; font-size: .82rem; font-weight: 600; color: #b42318; }
.au-result { margin-top: 1.1rem; }
.au-summary { margin: 0 0 .85rem; padding: 1rem 1.1rem; border-radius: 1rem; background: linear-gradient(180deg, #f7faff, #eef4fb); font-size: .95rem; line-height: 1.6; color: var(--color-navy-900); }
.au-summary strong { font-weight: 800; }
.au-verdicts { display: grid; gap: .4rem; margin: 0; padding: 0; list-style: none; }
.au-verdict { display: grid; grid-template-columns: 3.2rem 1fr auto; align-items: center; gap: .6rem; padding: .55rem .75rem; border-radius: .75rem; background: #fff; box-shadow: 0 0 0 1px var(--color-zinc-100); font-size: .86rem; }
.au-verdict-year { font-weight: 800; color: var(--color-navy-900); }
.au-verdict-cut { color: var(--color-zinc-600); font-variant-numeric: tabular-nums; }
.au-pill { display: inline-flex; align-items: center; gap: .3rem; padding: .22rem .6rem; border-radius: 999px; font-size: .76rem; font-weight: 800; white-space: nowrap; }
.au-pill.is-good { background: #e9f6e9; color: #006300; }
.au-pill.is-bad { background: #fbeaea; color: #a32d2d; }

/* year pills, in the style of the homepage's course filter */
.au-years { display: flex; flex-wrap: wrap; align-items: center; gap: .55rem .8rem; margin: 1.5rem 0 2rem; }
.au-years-label { font-size: .68rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--color-zinc-500); }
.au-years ul { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; padding: 0; list-style: none; }
.au-years a { display: inline-flex; align-items: center; min-height: 2.3rem; padding: 0 .85rem; border: 1px solid rgb(27 82 149 / .16); border-radius: 999px; background: #fff; font-size: .82rem; font-weight: 700; color: var(--color-navy-700); text-decoration: none; font-variant-numeric: tabular-nums; }
.au-years a:hover { border-color: rgb(27 82 149 / .4); color: var(--color-brand-600); }
.au-years a[aria-current] { border-color: var(--color-navy-900); background: var(--color-navy-900); color: #fff; }
.au-years a.au-years-all { border-style: dashed; }

/* funnel: headline numbers as steps */
.au-funnel { display: grid; grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); gap: .6rem; margin: 0; padding: 0; list-style: none; counter-reset: step; }
.au-step { position: relative; display: flex; flex-direction: column; gap: .25rem; padding: .95rem 1rem; border-radius: 1rem; background: linear-gradient(180deg, #f7faff, #eef4fb); counter-increment: step; }
.au-step::before { content: "0" counter(step); font-size: .66rem; font-weight: 800; letter-spacing: .1em; color: var(--color-gold-600); }
.au-step-v { font-size: 1.55rem; font-weight: 800; line-height: 1.1; letter-spacing: -.02em; }
.au-step-l { font-size: .8rem; font-weight: 700; color: var(--color-navy-700); }
.au-step-r { margin-top: auto; padding-top: .35rem; font-size: .72rem; font-weight: 700; color: var(--color-zinc-500); }
.au-step:last-child { background: var(--color-navy-900); }
.au-step:last-child .au-step-v { color: #fff; background: none; -webkit-text-fill-color: #fff; }
.au-step:last-child .au-step-l { color: rgb(255 255 255 / .85); }
.au-step:last-child .au-step-r { color: var(--color-gold-300); }

/* syllabus cards */
.au-syl-list { display: grid; gap: .6rem; margin: 0; padding: 0; list-style: none; }
.au-syl { display: grid; grid-template-columns: 2.4rem 1fr; gap: .85rem; padding: 1rem 1.05rem; border-radius: 1rem; background: linear-gradient(180deg, #fbfcfe, #f4f7fc); box-shadow: 0 0 0 1px rgb(27 82 149 / .07); }
.au-syl-n { display: flex; align-items: center; justify-content: center; width: 2.4rem; height: 2.4rem; border-radius: .75rem; background: var(--color-navy-900); color: var(--color-gold-300); font-size: .8rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.au-syl-head { margin: .1rem 0 0; font-size: 1rem; font-weight: 800; line-height: 1.35; color: var(--color-navy-900); }
.au-syl-items { display: flex; flex-wrap: wrap; gap: .35rem; margin: .55rem 0 0; padding: 0; list-style: none; }
.au-syl-items li { padding: .28rem .6rem; border-radius: .55rem; background: #fff; box-shadow: 0 0 0 1px rgb(27 82 149 / .1); font-size: .82rem; line-height: 1.4; color: var(--color-navy-700); }
.au-table-papers td, .au-table-papers th { white-space: normal; }
.au-table-papers tbody th { font-weight: 700; }
.au-table-papers tr.is-current th, .au-table-papers tr.is-current td { background: var(--color-gold-50); color: var(--color-gold-800); font-weight: 800; }
.au-table-papers tr.is-total th, .au-table-papers tr.is-total td { font-weight: 800; color: var(--color-navy-900); border-bottom: 2px solid var(--color-zinc-200); }
.au-table-age td { font-size: .95rem; }
.au-form-age { grid-template-columns: 1fr; }
@media (min-width: 640px) { .au-form.au-form-age { grid-template-columns: 1fr 1fr; } .au-form-age .au-btn { justify-self: start; } }

/* verbatim syllabus lists */
.au-syl-plain { display: grid; gap: .45rem; margin: 0; padding: 0; list-style: none; }
.au-syl-plain li { position: relative; padding: .55rem .8rem .55rem 1.9rem; border-radius: .75rem; background: #fbfcfe; box-shadow: 0 0 0 1px rgb(27 82 149 / .07); font-size: .9rem; line-height: 1.6; color: var(--color-navy-800); }
.au-syl-plain li::before { content: ""; position: absolute; left: .85rem; top: 1.05rem; width: .4rem; height: .4rem; border-radius: 50%; background: var(--color-gold-500); }
.au-syl-plain li.au-syl-subhead { margin-top: .5rem; padding: .3rem 0 0; background: none; box-shadow: none; font-size: .78rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--color-brand-700); }
.au-syl-plain li.au-syl-subhead::before { content: none; }
.au-opt-grid { display: grid; gap: .45rem; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); margin: 0; padding: 0; list-style: none; counter-reset: opt; }
.au-opt-grid li { counter-increment: opt; display: flex; align-items: center; gap: .6rem; min-height: 2.75rem; padding: .4rem .75rem; border-radius: .75rem; background: #fbfcfe; box-shadow: 0 0 0 1px rgb(27 82 149 / .08); font-size: .88rem; font-weight: 700; color: var(--color-navy-800); }
.au-opt-grid li::before { content: counter(opt, decimal-leading-zero); font-size: .7rem; font-weight: 800; color: var(--color-gold-600); font-variant-numeric: tabular-nums; }
.au-opt-grid a, .au-opt-langs a { color: var(--color-brand-600); text-decoration: none; }
.au-opt-grid a:hover, .au-opt-langs a:hover { text-decoration: underline; }
.au-opt-langs-title { margin: 1.1rem 0 .5rem; font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--color-zinc-500); }
.au-opt-langs { display: flex; flex-wrap: wrap; gap: .35rem; margin: 0; padding: 0; list-style: none; }
.au-opt-langs li { padding: .3rem .65rem; border-radius: 999px; box-shadow: 0 0 0 1px rgb(27 82 149 / .14); font-size: .82rem; font-weight: 700; color: var(--color-navy-700); }

/* career ladder */
.au-ladder { margin: 0; padding: 0; list-style: none; }
.au-rung { position: relative; padding: 0 0 1.4rem 2.1rem; }
.au-rung::before { content: ""; position: absolute; left: .5rem; top: .45rem; bottom: -.45rem; width: 2px; background: linear-gradient(180deg, var(--color-brand-200), var(--color-gold-300)); }
.au-rung:last-child::before { display: none; }
.au-rung::after { content: ""; position: absolute; left: .15rem; top: .3rem; width: .75rem; height: .75rem; border-radius: 50%; background: #fff; border: 3px solid var(--color-brand-500); }
.au-rung:last-child::after { border-color: var(--color-gold-500); }
.au-rung-when { font-size: .68rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--color-gold-700); }
.au-rung-grade { margin: .2rem 0 0; font-size: 1rem; font-weight: 800; color: var(--color-navy-900); }
.au-rung-pay { margin: .15rem 0 0; font-size: .88rem; font-weight: 700; color: var(--color-brand-600); }
.au-rung-posts { margin: .35rem 0 0; font-size: .88rem; line-height: 1.55; color: var(--color-zinc-600); }

/* services explorer */
.au-svc-grid { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); margin: 0; padding: 0; list-style: none; }
.au-svc { display: flex; flex-direction: column; gap: .5rem; padding: 1.05rem; border-radius: 1rem; background: #fff; box-shadow: 0 0 0 1px rgb(27 82 149 / .1); }
.au-svc-name { margin: 0; font-size: .98rem; font-weight: 800; line-height: 1.3; color: var(--color-navy-900); }
.au-svc-tags { display: flex; flex-wrap: wrap; gap: .3rem; }
.au-tag { padding: .14rem .5rem; border-radius: .45rem; font-size: .64rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; background: var(--color-surface-100); color: var(--color-navy-700); }
.au-tag.is-gold { background: var(--color-gold-50); color: var(--color-gold-800); }
.au-svc-role { margin: 0; font-size: .86rem; line-height: 1.55; color: var(--color-zinc-600); }
.au-svc-dl { display: grid; gap: .35rem; margin: auto 0 0; padding-top: .6rem; border-top: 1px solid var(--color-zinc-100); font-size: .8rem; }
.au-svc-dl div { display: grid; grid-template-columns: 4.8rem 1fr; gap: .5rem; }
.au-svc-dl dt { color: var(--color-zinc-500); font-weight: 600; }
.au-svc-dl dd { margin: 0; color: var(--color-navy-800); font-weight: 600; }
.au-svc[hidden] { display: none; }
.au-svc-count { margin: 0 0 0 auto; font-size: .8rem; font-weight: 700; color: var(--color-zinc-500); }
.au-svc-src { display: inline-flex; align-items: center; margin-top: .2rem; font-size: .78rem; font-weight: 700; color: var(--color-brand-600); text-decoration: none; }
.au-svc-src:hover { text-decoration: underline; }
.au-chart-note-x { margin: .2rem 0 1.1rem; text-align: right; }
.au-rung-paynote { font-weight: 600; color: var(--color-zinc-500); }
.au-vac .au-step::before { content: none; }

/* age calculator */
.au-age-out { display: grid; gap: .75rem; }
.au-age-big { margin: 0; font-size: 1.35rem; font-weight: 800; line-height: 1.3; color: var(--color-navy-900); }
.au-age-years { display: flex; flex-wrap: wrap; gap: .35rem; margin: 0; padding: 0; list-style: none; }
.au-age-years li { padding: .32rem .62rem; border-radius: .55rem; font-size: .8rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.au-age-years .is-ok { background: var(--color-brand-50); color: var(--color-brand-700); }
.au-age-years .is-no { background: var(--color-zinc-100); color: var(--color-zinc-400); text-decoration: line-through; }

/* sources and FAQs */
.au-sources { margin-top: 3rem; padding: 1.4rem 1.5rem; border-radius: 1.25rem; background: #fff; box-shadow: 0 0 0 1px rgb(27 82 149 / .1); }
.au-sources h2, .au-faqs h2 { margin: 0 0 .5rem; font-size: 1.25rem; font-weight: 800; color: var(--color-navy-900); scroll-margin-top: 6rem; }
.au-sources p { margin: 0 0 .85rem; font-size: .86rem; line-height: 1.55; color: var(--color-zinc-600); }
.au-sources ol { display: grid; gap: .45rem; margin: 0; padding: 0; list-style: none; counter-reset: src; }
.au-sources li { position: relative; padding-left: 1.9rem; font-size: .86rem; line-height: 1.5; counter-increment: src; }
.au-sources li::before { content: counter(src); position: absolute; left: 0; top: .05rem; width: 1.35rem; height: 1.35rem; border-radius: .4rem; background: var(--color-brand-50); color: var(--color-brand-700); font-size: .7rem; font-weight: 800; text-align: center; line-height: 1.35rem; }
.au-sources a { color: var(--color-brand-600); font-weight: 600; text-decoration: none; word-break: break-word; }
.au-sources a:hover { text-decoration: underline; }
.au-source-note { color: var(--color-zinc-500); }
.au-faqs { margin-top: 3rem; }
.au-faq { margin-top: .6rem; border-radius: 1rem; background: #fff; box-shadow: 0 0 0 1px rgb(27 82 149 / .1); }
.au-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 3.4rem; padding: .7rem 1.1rem; font-weight: 800; color: var(--color-navy-900); cursor: pointer; list-style: none; }
.au-faq summary::-webkit-details-marker { display: none; }
.au-faq summary::after { content: "+"; flex: none; display: grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--color-brand-50); font-size: 1.1rem; font-weight: 700; color: var(--color-brand-600); }
.au-faq[open] summary::after { content: "−"; }
.au-faq-a { padding: 0 1.1rem 1.1rem; font-size: .97rem; line-height: 1.7; color: var(--color-navy-700); }
.au-faq-a p { margin: 0 0 .6rem; }
.au-faq-a a { color: var(--color-brand-600); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }

/* full-width bands under the guide */
.au-courses { margin-top: 3rem; padding: 3.5rem 0; }
.au-related { padding: 3.5rem 0 4rem; }
.au-section-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem 1.5rem; margin-bottom: 1.75rem; }
.au-more-btn { min-height: 2.75rem; padding: 0 1.1rem; border-radius: .8rem; font-size: .88rem; font-weight: 800; text-decoration: none; }
.au-course-grid { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); }
.au-related-grid { display: grid; gap: .7rem; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); margin: 0; padding: 0; list-style: none; }
.au-related-card { display: flex; align-items: center; gap: .85rem; min-height: 4rem; padding: .8rem 1rem; border-radius: 1rem; background: #fff; box-shadow: 0 0 0 1px rgb(27 82 149 / .09), 0 1px 2px rgb(11 22 38 / .035); color: var(--color-navy-900); text-decoration: none; transition: box-shadow 160ms ease; }
a.au-related-card:hover { box-shadow: 0 0 0 1px rgb(27 82 149 / .22), 0 6px 16px -10px rgb(27 82 149 / .25); }
.au-related-card.is-soon { background: transparent; box-shadow: 0 0 0 1px var(--color-zinc-200); color: var(--color-zinc-400); }
.au-related-tile { display: flex; align-items: center; justify-content: center; flex: none; width: 2.4rem; height: 2.4rem; border-radius: .75rem; background: var(--color-brand-50); color: var(--color-brand-600); }
.au-related-card.is-soon .au-related-tile { background: var(--color-zinc-100); color: var(--color-zinc-400); }
.au-related-ico { width: 1.2rem; height: 1.2rem; }
.au-related-title { font-size: .92rem; font-weight: 700; line-height: 1.35; }
.au-soon { display: inline-block; margin-left: .4rem; padding: .05rem .4rem; border-radius: .35rem; background: var(--color-zinc-100); color: var(--color-zinc-500); font-size: .6rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; vertical-align: 2px; }
.au-mega-soon { opacity: .55; cursor: default; }

/* ---------------------------------------------------------------- drafts (site only: staff preview) */
.au-draft-banner { padding: .75rem 0; background: var(--color-gold-50); border-bottom: 1px solid var(--color-gold-200); font-size: .88rem; color: var(--color-gold-900, #57401d); }
.au-draft-banner p { margin: 0; line-height: 1.5; }
.au-draft-action { display: inline-flex; align-items: center; min-height: 2.5rem; padding: 0 1rem; border-radius: .75rem; background: var(--color-navy-900); color: #fff; font-weight: 800; font-size: .84rem; text-decoration: none; white-space: nowrap; }
.au-draft-action:hover { background: var(--color-brand-600); }
.au-draft-tag { display: inline-block; margin-left: .35rem; padding: .05rem .4rem; border-radius: .35rem; background: var(--color-gold-100); color: var(--color-gold-800); font-size: .6rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; vertical-align: 2px; }
.au-pill.is-draft { border-style: dashed; border-color: var(--color-gold-400); }
.au-unlinked { color: inherit; }
.au-cta-card { padding: 1.3rem 1.25rem; border-radius: 1.25rem; }
.au-cta-card .au-cta-title { color: var(--color-navy-900); }
.au-cta-card .au-cta-text { color: var(--color-zinc-600); }

/* ---------------------------------------------------------------- hub */
.au-hub-hero { padding: 1.25rem 0 2.75rem; border-bottom: 1px solid rgb(27 82 149 / .08); }
.au-hub-hero .au-title { max-width: 44rem; }
.au-hub-search { display: flex; align-items: center; gap: .7rem; max-width: 40rem; margin-top: 1.75rem; padding: 0 1.1rem; border-radius: 1rem; background: #fff; box-shadow: 0 0 0 1px rgb(27 82 149 / .14), 0 14px 30px -20px rgb(27 82 149 / .35); }
.au-hub-search:focus-within { box-shadow: 0 0 0 2px var(--color-brand-400), 0 14px 30px -20px rgb(27 82 149 / .35); }
.au-hub-search .au-ico { width: 1.25rem; height: 1.25rem; color: var(--color-brand-500); }
.au-hub-search input { flex: 1; min-height: 3.4rem; border: 0; outline: none; background: transparent; font: inherit; font-size: 1rem; color: var(--color-navy-900); }
.au-hub-empty { margin: .8rem 0 0; font-size: .9rem; color: var(--color-zinc-600); }
.au-hub-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem 0; margin: 2.25rem 0 0; padding: 0; list-style: none; }
.au-hub-stats li { padding: 0 1rem; }
.au-hub-stats b { display: block; font-size: 2.1rem; font-weight: 800; line-height: 1.05; letter-spacing: -.02em; }
.au-hub-stats span { display: block; margin-top: .45rem; font-size: .66rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--color-zinc-500); }
.au-hub-jump { display: flex; flex-wrap: wrap; gap: .45rem; margin: 1.75rem 0 0; padding: 0; list-style: none; }
.au-hub-jump a { display: inline-flex; align-items: center; gap: .45rem; min-height: 2.45rem; padding: 0 .95rem; border: 1px solid rgb(27 82 149 / .16); border-radius: 999px; background: #fff; font-size: .84rem; font-weight: 700; color: var(--color-navy-800); text-decoration: none; }
.au-hub-jump a:hover { border-color: rgb(27 82 149 / .4); color: var(--color-brand-600); }
.au-hub-jump span { color: var(--color-zinc-400); font-weight: 600; }
.au-hub-tools { padding: 3rem 0 1rem; }
.au-tool-grid { display: grid; gap: .9rem; margin-top: 1.5rem; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); }
.au-tool { display: grid; grid-template-columns: auto 1fr; gap: .25rem .9rem; padding: 1.2rem 1.25rem; border-radius: 1.25rem; text-decoration: none; }
.au-tool-ico { grid-row: span 2; width: 2.75rem; height: 2.75rem; padding: .6rem; border-radius: .9rem; background: var(--color-brand-50); color: var(--color-brand-600); }
.au-tool-title { font-weight: 800; color: var(--color-navy-900); }
.au-tool-text { font-size: .85rem; line-height: 1.5; color: var(--color-zinc-600); }
.au-hub-sec { padding: 3rem 0; border-bottom: 1px solid var(--color-zinc-100); scroll-margin-top: 5rem; }
.au-hub-sec:last-child { border-bottom: 0; }
.au-hub-blurb { margin: .9rem 0 0; color: var(--color-zinc-600); }
.au-hub-count { display: inline-flex; align-items: center; min-height: 2rem; padding: 0 .8rem; border-radius: 999px; background: var(--color-brand-50); font-size: .78rem; font-weight: 800; color: var(--color-brand-700); }
.au-hub-list, .au-hub-children { margin: 0; padding: 0; list-style: none; }
.au-hub-list { display: grid; gap: .15rem 2.5rem; margin-top: .5rem; }
.au-hub-children { margin: 0 0 .4rem 1.75rem; padding-left: .85rem; border-left: 2px solid var(--color-zinc-100); }
.au-hub-row { display: flex; align-items: center; gap: .65rem; min-height: 2.7rem; }
.au-hub-ico { width: 1.1rem; height: 1.1rem; flex: none; color: var(--color-brand-500); }
.au-hub-link { font-size: .95rem; font-weight: 700; line-height: 1.35; color: var(--color-navy-900); text-decoration: none; }
a.au-hub-link:hover { color: var(--color-brand-600); text-decoration: underline; }
.au-hub-link.is-soon { color: var(--color-zinc-400); font-weight: 600; }
.au-hub-item[hidden] { display: none; }
.au-year-chips { display: flex; flex-wrap: wrap; gap: .35rem; margin: 0 0 .6rem 1.75rem; padding: 0; list-style: none; }
.au-year-chips a { display: inline-flex; align-items: center; min-height: 2.05rem; padding: 0 .7rem; border: 1px solid rgb(27 82 149 / .16); border-radius: 999px; background: #fff; font-size: .78rem; font-weight: 700; color: var(--color-navy-700); text-decoration: none; font-variant-numeric: tabular-nums; }
.au-year-chips a:hover { border-color: var(--color-navy-900); background: var(--color-navy-900); color: #fff; }

/* hub topic cards */
.au-cards { display: grid; gap: 1rem; }
.au-cluster { display: flex; flex-direction: column; gap: .8rem; padding: 1.25rem 1.3rem; border-radius: 1.25rem; }
.au-cluster[hidden] { display: none; }
.au-cluster-head { display: flex; align-items: flex-start; gap: .85rem; }
.au-cluster-tile { display: flex; align-items: center; justify-content: center; flex: none; width: 2.75rem; height: 2.75rem; border-radius: .9rem; background: var(--color-brand-50); color: var(--color-brand-600); }
.au-cluster-tile svg { width: 1.35rem; height: 1.35rem; }
.au-cluster-names { flex: 1; min-width: 0; }
.au-cluster-kicker { margin: 0; font-size: .68rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--color-gold-700); }
.au-cluster-title { display: inline-flex; align-items: center; gap: .35rem; margin: .15rem 0 0; font-size: 1.12rem; font-weight: 800; line-height: 1.3; color: var(--color-navy-900); text-decoration: none; }
a.au-cluster-title:hover { color: var(--color-brand-600); }
.au-cluster-title.is-soon { color: var(--color-zinc-400); }
.au-cluster-arrow { width: 1rem; height: 1rem; flex: none; color: var(--color-brand-500); }
.au-cluster-count { flex: none; display: inline-flex; align-items: center; justify-content: center; min-width: 2rem; height: 2rem; padding: 0 .55rem; border-radius: 999px; background: var(--color-surface-100); font-size: .78rem; font-weight: 800; color: var(--color-navy-700); font-variant-numeric: tabular-nums; }
.au-cluster-desc { margin: 0; font-size: .9rem; line-height: 1.55; color: var(--color-zinc-600); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.au-cluster-label { margin: .1rem 0 -.35rem; font-size: .66rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--color-zinc-500); }
.au-pill-row { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; padding: 0; list-style: none; }
.au-pill-row li[hidden] { display: none; }
.au-pill { display: inline-flex; align-items: center; min-height: 2.3rem; padding: 0 .85rem; border: 1px solid rgb(27 82 149 / .16); border-radius: 999px; background: #fff; font-size: .84rem; font-weight: 700; line-height: 1.2; color: var(--color-navy-800); text-decoration: none; transition: border-color 140ms ease, background 140ms ease; }
a.au-pill:hover { border-color: rgb(27 82 149 / .45); background: var(--color-brand-50); color: var(--color-brand-700); }
.au-pill-year { font-variant-numeric: tabular-nums; }
.au-pill.is-soon { border-style: dashed; color: var(--color-zinc-400); }

@media (min-width: 640px) {
  .au-hero { padding: 1.5rem 0 3rem; }
  .au-block { padding: 1.5rem; }
  .au-table-wrap { margin: 1.1rem -1.5rem 0; padding: 0 1.5rem; }
  .au-form { grid-template-columns: 1fr 1fr auto; align-items: end; }
  .au-form .au-error { grid-column: 1 / -1; }
  .au-hub-stats { grid-template-columns: repeat(4, 1fr); }
  .au-hub-stats li + li { border-left: 1px solid var(--color-zinc-200); }
  .au-body h2 { font-size: 1.75rem; }
}
@media (min-width: 900px) {
  .au-cards { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1024px) {
  .au-hero-grid.has-card { grid-template-columns: minmax(0, 1fr) 22rem; align-items: center; gap: 3rem; }
  .au-layout { grid-template-columns: minmax(0, 1fr) 18.5rem; gap: 3.5rem; padding-top: 3rem; }
  .au-aside { position: sticky; top: 5.75rem; align-self: start; }
  .au-toc { display: block; }
  .au-toc-mobile { display: none; }
  .au-hub-list { grid-template-columns: 1fr 1fr; align-items: start; }
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* Phones: 44px touch targets and 16px fields (smaller makes iOS zoom in on focus). */
@media (max-width: 639px) {
  .au-seg button, .au-chip, .au-years a, .au-year-chips a, .au-share-btn, .au-hub-jump a, .au-pill { min-height: 2.75rem; }
  .au-cluster { padding: 1.1rem; }
  .au-field input, .au-field select, .au-hub-search input { font-size: 16px; }
  /* An explicit width (and min-width 0): as a stretched item of a column flexbox
     the scrolling row still sized itself to all its chips and widened the page to 701px. */
  .au-chips { flex-wrap: nowrap; overflow-x: auto; width: calc(100% + 2.5rem); min-width: 0; margin: 0 -1.25rem; padding: 0 1.25rem 2px; scrollbar-width: none; }
  .au-chips::-webkit-scrollbar { display: none; }
  .au-filters { flex-direction: column; align-items: stretch; }
  .au-seg { align-self: flex-start; }
  .au-legend { display: none; }
  .au-chart-svg.is-wide { display: none; }
  .au-chart-svg.is-narrow { display: block; }
  .au-verdict { grid-template-columns: 2.8rem 1fr; }
  .au-verdict .au-pill { grid-column: 2; justify-self: start; }
  .au-table th, .au-table td { padding: .55rem .45rem; }
  .au-table-year td { min-width: 0; }
  .au-keystat-v { font-size: 1.45rem; }
  .au-share-row .au-share-btn { flex: 1 1 auto; justify-content: center; }
}

/* extra-exam1.css */
/* exam1: the prelims score calculator has five fields. The shared .au-form grid
   (field, field, button) pushed them 180px past the block's right edge at 800px
   and made the whole page scroll sideways, so this form gets its own grid: the
   paper choice across the top, then the four numbers two by two. */
.exam1-score-form .au-field, .exam1-score-form select { min-width: 0; }
@media (min-width: 640px) {
  .au-form.exam1-score-form { grid-template-columns: 1fr 1fr; }
  .exam1-score-form .exam1-field-wide { grid-column: 1 / -1; }
  .exam1-score-form .au-btn { justify-self: start; }
}

/* extra-results.css */
/* results: stacked tables inside one block (mains + final, IAS/IFS/IPS, the two
   Hindi-medium tables) need air between them; .au-chart-note has no margin. */
.results-stack + .results-stack { margin-top: 1.6rem; }
.results-stack > .au-chart-note { margin-bottom: .1rem; }
.results-stack > .au-chart-note strong { color: var(--color-navy-900); }

/* Rank explorer: one row per year, the services as tags that wrap. .au-tag is
   uppercase for labels like "GROUP A", which would print IPoS as "IPOS", so the
   service tags keep DoPT's own spelling. */
.results-tags { margin: 0; padding: 0; list-style: none; }
.results-tags .au-tag { padding: .22rem .5rem; font-size: .78rem; font-weight: 600; letter-spacing: 0; text-transform: none; font-variant-numeric: tabular-nums; }
.results-tags .au-tag b { font-weight: 800; }
.results-year { align-items: start; }
.results-year .au-verdict-year { padding-top: .15rem; }

/* Names read badly right-aligned (.au-table aligns every cell right for
   numbers), so the toppers table and the name columns align left. */
.results-names th, .results-names td, .au-table td.results-name { text-align: left; }

/* extra-salary.css */
/* salary: the all-services table squeezes three columns into 375px, and the
   svc1 phone rule (hyphens: auto) split "basic" into "ba-sic" on every row. */
.salary-all .au-th-sub { hyphens: manual; -webkit-hyphens: manual; }
/* IRS grade names run to "Principal Chief Commissioner / Principal Director
   General of Income-tax". With the shared no-wrap they pushed both pay columns
   behind a sideways scroll, at 375px and in the desktop article column alike,
   so the grade always wraps; on phones the pay range breaks after "to" too. */
.salary-grades tbody th { white-space: normal; min-width: 8rem; }
@media (max-width: 639px) {
  .salary-grades th, .salary-grades td { white-space: normal; }
  .salary-grades td:last-child { white-space: nowrap; }
}

/* extra-seo.css */
/* Question-paper links: a 44px tap target each, since a phone user taps them one by one. */
.au-table.seo-papers th, .au-table.seo-papers td { vertical-align: middle; }
.au-table.seo-papers td { text-align: left; }
.seo-pdf { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; padding: 0 .55rem; margin-right: .25rem; border-radius: .55rem; font-weight: 700; color: var(--color-brand-600); text-decoration: none; }
.seo-pdf:focus-visible { outline: 2px solid var(--color-brand-600); outline-offset: 1px; }

/* extra-svc1.css */
/* svc1: the grade and service tables mix text ("9 years and Phase III training",
   grade names) with pay figures. The shared .au-table right-aligns every column
   after the first, which left ragged, hard-to-scan text on phones, so the text
   columns align left; group rows separate IAS/IPS/IFS, Group A and Group B. */
.svc1-table .svc1-text { text-align: left; }
.svc1-table td.svc1-text { min-width: 8rem; }
.svc1-table .svc1-none { color: var(--color-zinc-400); font-weight: 600; }
.svc1-table tr.svc1-group th { padding-top: 1rem; background: #fff; font-size: .7rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--color-gold-700); }
.svc1-table tr.svc1-total th, .svc1-table tr.svc1-total td { font-weight: 800; color: var(--color-navy-900); border-top: 2px solid var(--color-zinc-200); }
/* At 375px a fixed text-column width pushed the last column out of view behind
   a sideways scroll; on phones the columns share the width and wrap instead. */
@media (max-width: 639px) {
  .svc1-table td.svc1-text { min-width: 0; }
  .svc1-table th, .svc1-table td { white-space: normal; }
  .svc1-table .svc1-text { hyphens: auto; -webkit-hyphens: auto; }
}

/* extra-syl1.css */
/* [[syl1-optional-success]]. Subject names wrap: "Political Science and International
   Relations" on one line would push the four number columns off a 375px screen.
   Rates for subjects with fewer than 100 candidates are greyed, as the block foot explains. */
.syl1-table tbody th, .syl1-table tfoot th { white-space: normal; min-width: 9rem; max-width: 13rem; }
.au-table td.syl1-small { color: var(--color-zinc-500); font-weight: 500; }
/* The cell holds an absolutely positioned .sr-only note. Without a positioned cell its
   containing block lies outside the scrolling .au-table-wrap, so it escaped the clip and
   widened the whole page to 714px at a 375px viewport. */
.syl1-table td.syl1-small { position: relative; }
.syl1-table tfoot th, .syl1-table tfoot td { border-top: 2px solid var(--color-zinc-200); border-bottom: 0; font-weight: 800; color: var(--color-navy-900); }

/* Phones: the sort buttons are the only controls here, so they get the 44px target. */
@media (max-width: 639px) {
  .syl1-table thead button { min-height: 2.75rem; }
  .syl1-table tbody th, .syl1-table tfoot th { min-width: 7.5rem; }
}

/* extra-syl3.css */
/* syl3: subject-wise syllabus map, [[syl3-subject-map subject=…]] (src/blocks_syl3.py).
   Lines reuse .au-syl-plain; this only adds the paper headings, the highlight for
   the part of a shared line that concerns the subject, and the cross-links. */
.syl3-paper + .syl3-paper { margin-top: 1.35rem; }
.syl3-paper-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .15rem 1rem; margin-bottom: .5rem; }
.syl3-paper-name { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .55rem; margin: 0; font-size: .95rem; font-weight: 800; line-height: 1.35; color: var(--color-navy-900); }
.syl3-paper-title { display: inline-flex; flex-wrap: wrap; align-items: baseline; column-gap: .45rem; }
.syl3-paper-num { font-size: .78rem; font-weight: 600; color: var(--color-zinc-500); white-space: nowrap; }
.syl3-paper-link { display: inline-flex; align-items: center; gap: .3rem; min-height: 2.25rem; font-size: .82rem; font-weight: 700; color: var(--color-brand-600); text-decoration: none; }
.syl3-paper-link:hover { text-decoration: underline; }
.syl3-arrow { width: .9rem; height: .9rem; flex: none; }
.syl3-paper-note { margin: 0 0 .55rem; padding: .5rem .75rem; border-left: 3px solid var(--color-gold-400); background: var(--color-gold-50); font-size: .84rem; line-height: 1.5; color: var(--color-navy-700); }
/* The negative margin cancels the padding, so a highlight never opens a gap before the next comma. */
.syl3-focus { margin: 0 -.12em; padding: .05em .12em; border-radius: .25em; background: var(--color-gold-100); color: inherit; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.syl3-also { display: block; margin-top: .3rem; font-size: .74rem; font-weight: 700; color: var(--color-zinc-500); }
.syl3-rest { margin-top: 1.25rem; padding-top: .85rem; border-top: 1px dashed var(--color-zinc-200); font-size: .84rem; line-height: 1.55; color: var(--color-zinc-600); }
.syl3-rest p { margin: 0 0 .3rem; }
/* Inline link inside a sentence: vertical padding widens the tap area without
   making its line taller than the others (min-height on inline-flex did). */
.syl3-rest a { padding: .65rem 0; color: var(--color-brand-600); font-weight: 700; text-decoration: none; }
.syl3-rest a:hover { text-decoration: underline; }
.syl3-shared { margin-top: .5rem; }
.syl3-shared-title { margin: 0 0 .45rem; font-size: .68rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--color-zinc-500); }
.syl3-shared ul { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; padding: 0; list-style: none; }
.syl3-shared a { display: inline-flex; align-items: center; min-height: 2.3rem; padding: 0 .85rem; border: 1px solid rgb(27 82 149 / .16); border-radius: 999px; background: #fff; font-size: .82rem; font-weight: 700; color: var(--color-navy-700); text-decoration: none; }
.syl3-shared a:hover { border-color: rgb(27 82 149 / .4); color: var(--color-brand-600); }

/* Phones: 44px touch targets, as everywhere else on the site. */
@media (max-width: 639px) {
  .syl3-paper-link, .syl3-shared a { min-height: 2.75rem; }
  .syl3-rest a { padding: .9rem 0; }
}