/* Exam page, /verify and the not-found page (round 1 fixes, workstream A).
   Loaded after design.css only on those pages, so equal-specificity rules here
   win over app.css and design.css. Tokens come from design.css :root. */

/* O8: the one-line "independent site" strip on deep links */
.indie { margin: 0; background: var(--raised); border-bottom: 1px solid var(--rule); color: var(--ink-2); font-size: .8125rem; line-height: 1.35; }
.indie .wrap { display: flex; align-items: center; gap: 8px; padding-block: 7px; }
.indie .ico { flex: none; width: 15px; height: 15px; color: var(--ok); }

/* F19: the title is the page's largest text, shown in full */
.exam-head .h-exam {
  display: block; -webkit-line-clamp: unset; line-clamp: none; overflow: visible; max-width: 30ch;
  font: 650 clamp(1.6rem, 2.4vw, 2.1rem)/1.15 var(--display); letter-spacing: -.02em; overflow-wrap: anywhere;
}
.exam-head .h-exam:lang(hi), .exam-head .h-exam[lang="hi"] { letter-spacing: 0; line-height: 1.3; }
.exam-head .h-exam[lang="en"] { letter-spacing: -.02em; line-height: 1.15; }
/* P15: "SBI · Preliminary exam result": the word space before the dot is in the
   text (so screen readers keep the words apart), the margin gives the one after */
.exam-head .h-exam .sep { margin-inline: 0 .3em; letter-spacing: 0; }
.ex-status { font-size: 1.0625rem; }

/* actions: one primary (the board), Track, Share; then "Is this real?" */
.ex-acts .ex-wa .ico { color: var(--ok); }
.ex-real { margin: 2px 0 0; font-size: .875rem; }
.ex-real a { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; color: var(--brand); font-weight: 600; text-decoration: none; }
.ex-real a:hover { text-decoration: underline; }
.ex-real .ico { width: 16px; height: 16px; }

/* the 56px countdown ring that replaces the date tile */
.glance-due { grid-template-columns: 56px minmax(0, 1fr); }
.ring.ex-ring { width: 56px; height: 56px; }
.ring.ex-ring circle { stroke-width: 2.6; }
.ring.ex-ring > span { display: grid; justify-items: center; line-height: 1; white-space: nowrap; font-size: .75rem; }
.ring.ex-ring > span b { font: 700 1.0625rem/1 var(--display); color: var(--ink); font-variant-numeric: tabular-nums; }
.ring.ex-ring > span small { margin-top: 2px; font-size: .6875rem; font-weight: 600; color: var(--ink-2); }
.glance-due.urgent .ex-ring > span b { color: var(--hot); }
.ring.ex-word > span b { font-size: .75rem; letter-spacing: -.01em; }
.glance-due b { white-space: nowrap; }

/* no facts read yet */
.nofacts { margin-bottom: 24px; }
.nofacts p { margin: 0; color: var(--ink-2); }
.nofacts .nofacts-a { margin-top: 8px; font-weight: 600; color: var(--ink); }
.nofacts a:not(.btn) { color: var(--brand); }

/* /verify (B10, B11): green only for a document found on a board; amber for
   an official site that does not list it; red for a likely fake */
.vq-field { align-items: flex-start; padding-top: 12px; padding-bottom: 8px; }
.vq-field .ico { margin-top: 4px; flex: none; }
.vq-field textarea {
  flex: 1; min-width: 0; width: 100%; border: 0; outline: 0; background: transparent; color: var(--ink);
  font: inherit; font-size: 1.0625rem; line-height: 1.4; resize: vertical; min-height: 4.4em;
}
.vq-field textarea::placeholder { color: var(--ink-3); }
.v-known_board .v-head, .v-official_domain .v-head, .v-official_site_unknown_doc .v-head { background: var(--live-tint); }
.v-known_board .v-kind, .v-official_domain .v-kind, .v-official_site_unknown_doc .v-kind,
.v-known_board .v-kind-t, .v-official_domain .v-kind-t, .v-official_site_unknown_doc .v-kind-t { color: var(--live-ink); }
.v-likely_fake { border-color: var(--hot); }
.v-likely_fake .v-head { background: var(--hot-tint); }
.v-likely_fake .v-head h2 { color: var(--hot); }
.v-likely_fake .v-kind, .v-likely_fake .v-kind-t { color: var(--hot); }
.v-body .v-flags { margin-bottom: 14px; }
.v-board { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--rule); }
.v-board-h { margin: 0 0 6px; }
.v-board-h a { color: var(--brand); }
.v-off { display: inline-block; padding: 0 8px; border-radius: 999px; background: var(--ok-tint); color: var(--ok); font-size: .75rem; font-weight: 600; }

/* not found (F39, F41) */
.err-in { text-align: left; }
.err-glyph { display: block; margin-bottom: 12px; }
.err-glyph .eg-ring { fill: none; stroke: var(--rule-2); stroke-width: 2; }
.err-glyph .eg-sweep { fill: var(--brand-tint); }
.err-glyph .eg-core { fill: var(--brand); }
.err-search { margin-top: 16px; }
.err-links { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0; padding: 0; list-style: none; }
.err-links a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border: 1px solid var(--rule-2); border-radius: 999px; color: var(--ink); text-decoration: none; font-weight: 600; font-size: .875rem; background: var(--surface); }
.err-links a:hover { border-color: var(--brand); color: var(--brand); }
.err-links .ico { width: 18px; height: 18px; color: var(--brand); }

@media (max-width: 599px) {
  .indie { font-size: .75rem; }
  .indie .wrap { padding-block: 6px; }
  .indie-x { display: none; }
}

/* ---- round 3 (G11): each fact once, the full title, 200% text, print ---- */
/* closing today: a full red ring, a bold "Today", a hot status dot */
.glance-due.ex-today .ring .ra { stroke: var(--hot); }
.glance-due.ex-today .ring .rt { stroke: var(--hot-tint); }
.glance-due.ex-today .ex-ring > span b { color: var(--hot); font-weight: 800; font-size: .6875rem; letter-spacing: 0; }
.ex-status.st-today i { background: var(--hot); box-shadow: 0 0 0 3px var(--hot-tint); }
.ex-status.st-today { color: var(--hot); }
/* the title is shown whole: wider measure so a long one stays readable */
.exam-head .h-exam { max-width: 36ch; }
/* 200% text (WCAG 1.4.4): one column, nothing held to one line */
.ex-main { grid-template-columns: minmax(0, 1fr); }
.ex-status, .ex-status span, .raw summary, .glance-due b { white-space: normal; overflow-wrap: anywhere; }
.raw summary { width: auto; }
.glance-due > div { min-width: 0; }

@media print {
  @page { margin: 12mm; }
  /* Q33 (QD F9): /closing prints its list, not its filters; a day's heading stays with its rows */
  .cl-state, .cl-ctl, nav.week { display: none !important; }
  .deadlines .day-h { break-after: avoid; }
  .top, .tabbar, .indie, .foot, .ex-acts, .ex-real, .exam-cta, .myelig, .report, .quick, .theme-btn, .skip,
  .raw, .nofacts-a, .note-block .fine { display: none !important; }
  body, .exam-head, .exam-grid, .panel, .block, .official, .ex-glance { background: #fff !important; color: #000 !important; box-shadow: none !important; }
  .exam-head { padding: 0 !important; border: 0 !important; }
  .exam-head-in, .exam-grid { display: block !important; padding: 0 !important; }
  .exam-head .h-exam { max-width: none; font-size: 18pt; line-height: 1.2; }
  .ex-glance { margin: 8pt 0 !important; padding: 0 !important; border: 0 !important; }
  .fsheet, .kd, .list-box { border: 1px solid #999 !important; break-inside: avoid; }
  .fsheet > div { padding: 4pt 8pt !important; }
  .block { margin: 8pt 0 !important; break-inside: avoid; }
  .h-sec, .h-panel { font-size: 12pt; margin: 6pt 0 4pt !important; }
  .notices .nt { padding: 4pt 8pt !important; }
  .ring .ra, .ring .rt { stroke: #000 !important; }
  /* the official links are the point of a printout: print where they go */
  .off-links a { display: block !important; min-height: 0 !important; padding: 2pt 0 !important; }
  .off-links a::after { content: " (" attr(href) ")"; font-size: 8pt; font-weight: 400; color: #333; overflow-wrap: anywhere; }
  .off-links .ico, .nt-host .ico { display: none; }
  .off-links { margin: 0; }
  /* the stage stepper is decoration on paper; the dates say it */
  .block:has(> .steps), .block:has(> .stp) { display: none !important; }
  .official { padding: 6pt 0 !important; border: 0 !important; break-inside: avoid; }
  a { color: #000 !important; text-decoration: none; }
}

/* /alerts (G29): how Follow, Track and the calendar file work */
.al-steps { display: grid; gap: 0; margin: 0 0 12px; padding: 0 18px; list-style: none; counter-reset: al;
  background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-l); }
.al-steps li { position: relative; padding: 14px 0 14px 40px; counter-increment: al; line-height: 1.5; }
.al-steps li + li { border-top: 1px solid var(--rule); }
.al-steps li::before { content: counter(al); position: absolute; left: 0; top: 13px; display: grid; place-items: center;
  width: 28px; height: 28px; border-radius: 50%; background: var(--brand-tint); color: var(--brand); font-weight: 700; font-size: .875rem; }
.al-steps b { color: var(--ink); }
.al-steps span { color: var(--ink-2); }
.al-steps a { display: inline-block; min-height: 24px; color: var(--brand); font-weight: 600; }
.v-series { margin: 8px 0 0; font-weight: 600; } .v-series a { color: var(--brand); display: inline-block; min-height: 24px; }
/* the ring scales with the text size (200% text keeps "Today" inside it) */
.glance-due { grid-template-columns: 3.5rem minmax(0, 1fr); }
.ring.ex-ring { width: 3.5rem; height: 3.5rem; }

/* /closing (H18): a long board name wraps to two lines instead of an
   ellipsis ("AIIMS Mangal…" at 320); the full name is in its title */
.deadlines .dr-board, .xdates .dr-board { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; text-overflow: clip; }

/* ---- round 4 (H22) ---- */
/* the exam title: 32px at most; a long one (over 70 characters) smaller on
   phones, so the countdown and the buttons stay in the first screen */
.exam-head .h-exam { font-size: clamp(1.6rem, 4.6vw, 2rem); }
.exam-head .h-exam.h-long { font-size: clamp(1.25rem, 5.5vw, 1.9rem); }
@media (min-width: 960px) { .exam-head .h-exam.h-long { font-size: clamp(1.5rem, 2.2vw, 1.9rem); } }
/* "Open · closes today": green dot and word, the urgent part in --hot */
.ex-status .ex-st-sub { color: var(--hot); }
/* phones and tablets: the countdown sits above the buttons; from 960px it is
   in the at-a-glance box beside the title */
.ex-due-phone { margin: 2px 0 4px; }
@media (max-width: 959px) { .ex-glance .ex-due-side { display: none; } }
@media (min-width: 960px) { .ex-due-phone { display: none; } }
/* the stepper (K2) inside the exam's "Stages" block */
.block > .stp { margin-top: 6px; }

/* ---- round 5 (J5, J21, K8) ---- */
/* a notice row is an anchor (/exam/{id}#n{itemID}): it clears the sticky
   header, and the target is outlined, then the outline fades */
.notices .nt { scroll-margin-top: calc(var(--top-h) + 16px); }
.notices .nt:target { outline: 2px solid var(--brand); outline-offset: -2px; animation: nt-target .6s ease-out 1.6s forwards; }
@keyframes nt-target { to { outline-color: transparent; } }
@media (prefers-reduced-motion: reduce) { .notices .nt:target { animation: none; } }
/* a catch-all exam's notices by series ("SBI PO", "SBI Clerk", "Other") */
.nt-group { margin: 18px 0 8px; font: 650 1rem/1.3 var(--display); color: var(--ink); }
.nt-group:first-of-type { margin-top: 4px; }
.nt-more { margin-top: 8px; }
.nt-more > summary { display: inline-flex; align-items: center; min-height: 44px; padding: 0 2px; color: var(--brand); font-weight: 600; cursor: pointer; }
.nt-more > summary:hover { text-decoration: underline; }
.nt-more > .notices { margin-top: 4px; }
/* a host official through another board's list: a shield, never a warning */
.nt-via { display: inline-flex; gap: 4px; align-items: center; color: var(--ok); font-weight: 600; }
.dom-portal .dom-kind, .dom-bank .dom-kind { color: var(--ok); }
/* "Latest: Admit card · seen 13 Oct" links to that notice's row */
.ex-status .ex-st-link { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.ex-status .ex-st-link:hover { color: var(--brand); }
/* "Check eligibility": a secondary button right under its line (J21) */
.myelig .myelig-out { min-height: 0; }
.myelig .myelig-cta { display: inline-flex; width: auto; margin-top: 10px; justify-self: start; align-self: flex-start; }
/* /closing filters (J22, OD20): a chip row above the week strip */
.cl-lede .cl-n { color: var(--ink); }
.cl-lede .cl-of { color: var(--ink-2); }
.cl-ctl { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 16px 0 12px; }
/* P14: on desktop the pills start on the aside's first line (its 24px padding) */
@media (min-width: 960px) { .cl-ctl { margin-top: 24px; } }
.cl-quals { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.cl-chip { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border: 1px solid var(--rule-2); border-radius: var(--r-pill);
  background: var(--surface); color: var(--ink); font-weight: 600; font-size: .875rem; text-decoration: none; white-space: nowrap; }
.cl-chip:hover { border-color: var(--brand); color: var(--brand); }
/* the selected chip is solid with a tick (M14, AX): the home filter's dialect, never a tint alone */
.cl-chip.on, .cl-chip.on:hover { border-color: var(--brand-fill); background: var(--brand-fill); color: var(--on-brand); }
.cl-tick { margin-inline-end: 5px; font-weight: 700; }
.cl-lede .cl-split, .cl-lede .cl-none { color: var(--ink-2); }
.cl-lede .cl-of a, .cl-lede .cl-clear { font-weight: 600; }
/* the state select submits itself (closing.js); the button stays for no-JS */
html.js .cl-state button { display: none; }
/* panel headings on the section token (M25) */
.h-panel.h-sec { margin: 0 0 12px; }
/* section titles on the --h2 token (M25): "Exam dates coming up", "Changes after
   publication", the /tracking empty state (app.css set them at 17px) */
.xdates .h-sec, .note-block .h-sec, .track-page .empty-h { font: var(--h2); letter-spacing: -.01em; }
.cl-state { display: flex; align-items: center; gap: 6px; }
/* P14: the state select is a pill like the chips beside it (40px, 999px radius, the
   chevron inside its right padding) */
.cl-state select { min-height: 40px; height: 40px; max-width: 14rem; padding: 0 32px 0 14px; border: 1px solid var(--rule-2); border-radius: var(--r-pill); background-color: var(--surface); background-position: right 12px center; color: var(--ink); font: inherit; font-size: .875rem; font-weight: 600; }
.cl-state select:hover { border-color: var(--brand); }
.cl-state .btn { min-height: 40px; }
@media (max-width: 599px) {
  .cl-ctl { gap: 8px; }
  .cl-quals { flex: 1 1 100%; min-width: 0; }
  .cl-chip { padding: 0 12px; }
  .cl-state { flex: 1 1 100%; min-width: 0; }
  .cl-state select { flex: 1 1 auto; min-width: 0; width: 100%; max-width: none; }
}

/* P15: an exam whose notices belong to two series at different stages: one
   line per series instead of a stepper that would mix them */
.ex-ser-p { margin: 0 0 8px; color: var(--ink-2); font-size: .9375rem; }
.ex-ser { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ex-ser a { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 2px; min-height: 44px; padding: 10px 14px; border: 1px solid var(--rule); border-radius: 12px; background: var(--surface); color: var(--ink); text-decoration: none; }
.ex-ser a:hover { border-color: var(--brand); }
.ex-ser a:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.ex-ser b { font-weight: 650; }
.ex-ser-sub { color: var(--ink-2); }
.ex-ser-go { margin-left: auto; padding-left: 8px; color: var(--brand); }

/* P14: the /closing week strip at any text size. A cell is never narrower than its
   own label ("Today", "मंगल"), so labels never overlap; at 100% seven fit a 320px
   phone, and when they no longer do (200% text) the row scrolls sideways. The
   sticky offset is the header's real height (--hdr-h, closing.js) instead of the
   66/78px of 100% text. A header taller than 90px (large text) or a short window
   leaves the strip in the flow: sticky chrome would cover a third of the screen. */
nav.week { top: var(--hdr-h, var(--top-h)); }
/* position: the cells' .sr text is absolutely positioned; without a containing block
   here it escapes the scroller and widens the page */
nav.week ol { position: relative; grid-template-columns: repeat(7, minmax(max-content, 1fr)); overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; }
nav.week ol::-webkit-scrollbar { display: none; }
nav.week small { white-space: nowrap; }
/* Q33 (AX F4): air between the days, a fade at the right edge while more days scroll in
   (closing.js wk-more), and one-letter weekdays above 1.5x text (closing.js wk-big) */
nav.week ol { column-gap: .5em; }
nav.week.wk-more ol { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 2.5rem), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 2.5rem), transparent); }
html.wk-big nav.week small { font-size: 0; }
html.wk-big nav.week small::first-letter { font-size: .75rem; }
/* Q17: a stand-in row's original title, one muted line under it */
.deadlines .dr-orig { font-size: .8125rem; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* R9 (R35, QM 360 closing): the week strip's "Today" chip has air inside its pill */
nav.week li.today a, nav.week li.today span { padding-inline: 6px; }
html.wk-static nav.week { position: static; }
@media (max-height: 700px) { nav.week { position: static; } }
/* board names clamped to two lines carry their full name as a title (closing.html) */

/* P27: the exam page's two columns start on one line (the aside's 24px) */
@media (min-width: 960px) {
  .exam-grid .exam-a > :first-child { margin-top: 24px; }
}

/* integ11: the posts the notice lists (exam_posts.go); scrolls sideways inside its box on phones */
.pt-lede { margin: 0 0 10px; color: var(--ink-2); font-size: .9375rem; }
.pt-lede a { display: inline-flex; align-items: center; gap: 4px; color: var(--brand); font-weight: 600; text-decoration: none; }
.pt-lede a:hover { text-decoration: underline; }
.pt-lede .ico { width: 14px; height: 14px; }
.pt-wrap { overflow-x: auto; max-width: 100%; border: 1px solid var(--rule); border-radius: 12px; background: var(--surface); -webkit-overflow-scrolling: touch; }
.pt-wrap:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.ptable { width: 100%; border-collapse: collapse; font-size: .875rem; line-height: 1.35; }
.ptable th, .ptable td { padding: 8px 12px; border-bottom: 1px solid var(--rule); text-align: left; vertical-align: top; }
.ptable tbody tr:last-child > * { border-bottom: 0; }
.ptable thead th { background: var(--raised); color: var(--ink-2); font-size: .75rem; font-weight: 650; letter-spacing: .01em; white-space: nowrap; }
.ptable tbody th { min-width: 11rem; max-width: 18rem; color: var(--ink); font-weight: 600; }
.ptable tbody th small { display: block; margin-top: 2px; color: var(--ink-3); font-weight: 500; font-size: .78rem; }
.ptable td { color: var(--ink); white-space: nowrap; }
.ptable .num { text-align: right; font-variant-numeric: tabular-nums; }
.ptable .chk { margin-left: 4px; }
.ptable .pt-asread { display: block; margin-top: 2px; font-size: .6875rem; font-weight: 500; color: var(--ink-3); white-space: nowrap; }
.ptable .num .pt-asread { margin-left: auto; }
.ptable .pt-none { color: var(--ink-3); }
.pt-more { margin-top: 8px; }
.pt-more > summary { display: inline-flex; align-items: center; min-height: 44px; padding: 0 2px; color: var(--brand); font-weight: 600; cursor: pointer; }
.pt-more > summary:hover { text-decoration: underline; }
.pt-fine { margin-top: 8px; }
@media print { .pt-wrap { overflow: visible; border: 1px solid #999 !important; } }

/* Shared reading rhythm with the search and account surfaces. */
.p-exam .exam-head { background: linear-gradient(120deg,var(--hero-bg),var(--page)); border-bottom: 1px solid var(--rule); padding-block: 32px; }
.p-exam .exam-head-in { gap: 40px; }
.p-exam .h-exam { line-height: 1.22; letter-spacing: -.025em; max-width: 32ch; }
.p-exam .ex-acts { gap: 10px; margin-top: 20px; }
.p-exam .ex-acts .btn { min-height: 48px; border-radius: 10px; }
.p-exam .ex-glance { border: 1px solid var(--rule); border-radius: 16px; box-shadow: none; background: var(--surface); }
.p-exam .exam-grid { gap: 32px; padding-top: 28px; }
.p-exam .panel { border-radius: 14px; box-shadow: none; }
.p-exam .block { margin-block: 28px; }
.p-exam .h-sec { letter-spacing: -.015em; }
@media (max-width:759px) {
 .p-exam .exam-head { padding-block: 24px; }
 .p-exam .exam-head-in { gap: 20px; }
 .p-exam .h-exam { font-size: 1.625rem; line-height: 1.3; }
 .p-exam .exam-grid { gap: 20px; padding-top: 20px; }
 .p-exam .ex-acts { display: flex; flex-wrap: wrap; }
 .p-exam .ex-acts > .btn-primary { flex-basis: 100%; justify-content: center; }
}

@media (max-width:759px) {
 .p-exam .ex-acts > .btn:not(.btn-primary) { flex: 1 1 calc(50% - 5px); width: auto; min-width: 0; padding-inline: 10px; font-size: .875rem; justify-content: center; }
}

/* Deadline navigation: distinguish the calendar date from its form count. */
nav.week { margin-top: 16px; border-top: 1px solid var(--rule); }
nav.week ol { padding-block: 12px; gap: 8px; }
nav.week li > a, nav.week li > span { min-width: 72px; min-height: 82px; padding: 10px 8px; gap: 5px; border: 1px solid transparent; border-radius: 12px; }
nav.week .num { font-size: 1.375rem; line-height: 1.15; }
nav.week em { font-weight: 400; color: var(--ink-2); }
nav.week li.today > a, nav.week li.today > span { background: transparent; box-shadow: none; }
nav.week li.today small { color: var(--brand); }
nav.week a[aria-current="date"] { background: var(--brand-tint); border-color: var(--brand); box-shadow: inset 0 -3px var(--brand); }
nav.week a[aria-current="date"] .num, nav.week a[aria-current="date"] small { color: var(--brand); }
nav.week a:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.deadlines .dgroup { scroll-margin-top: 28px; }
@media (max-width: 599px) { nav.week li > a, nav.week li > span { min-width: 64px; padding-inline: 6px; } }

nav.week .week-reading { margin: 0; padding: 0 8px 10px; font-size: .8125rem; color: var(--brand); font-weight: 600; }

/* Qualification symbols retain readable labels and generous tap targets. */
.cl-quals .cl-chip { gap: 6px; min-height: 44px; }
.cl-quals .cl-chip .icon { width: 16px; height: 16px; flex: none; }
.cl-quals .cl-tick { margin-inline-end: 0; }

/* Keep qualifications on one row; overflow stays inside the filter rail. */
.cl-quals {
  flex: 1 1 100%; min-width: 0; max-width: 100%; flex-wrap: nowrap;
  overflow-x: auto; padding: 3px 2px 7px; scroll-padding-inline: 2px;
  scrollbar-width: thin;
}
.cl-quals > li { flex: 0 0 auto; }

.cl-state { display: flex; align-items: flex-end; gap: 12px; width: 100%; }
.cl-state .filter-field { flex: 1 1 0; }
.cl-state .filter-select select { height: 44px; width: 100%; max-width: none; border-radius: 8px; padding-inline: 38px; font-weight: 400; }
@media (max-width: 359px) { .cl-state { flex-wrap: wrap; } .cl-state .filter-field { flex-basis: 100%; } }

/* The compact summary is mobile-only; desktop retains its original facts sidebar. */
.ex-essentials { display: none; }
@media screen and (max-width:759px) {
 .p-exam .ex-main .ex-record { order: 2; }
 .ex-essentials { display: grid; gap: 8px; padding: 14px; border: 1px solid var(--rule); border-radius: 14px; background: var(--surface); }
 .ex-essentials .fsheet { border: 0; box-shadow: none; background: transparent; }
 .ex-essentials .fsheet > div { grid-template-columns: 6.5rem minmax(0, 1fr); gap: 10px; padding: 10px 0; }
 .ex-essentials .glance-due { margin: 0; }
 .p-exam .ex-glance [data-essential] { display: none; }
 .p-exam .ex-glance .fsheet:not(:has(> div:not([data-essential]))) { display: none; }
 .p-exam .ex-acts { margin-top: 4px; }
}
/* Tablets keep the original single-column deadline placement. */
@media screen and (min-width:760px) and (max-width:959px) {
 .ex-essentials { display: block; }
 .ex-essentials > .fsheet { display: none; }
}

/* Stage detail pages: opt-in only; job and walk-in layouts retain their styles. */
.stage-detail .stage-action-group { display: inline-flex; align-items: center; justify-content: center; gap: 8px; max-width: 100%; min-width: 0; line-height: 1.5; }
.stage-detail .stage-action-group > span { min-width: 0; overflow-wrap: anywhere; }
.stage-detail .stage-action-group .ico { flex: 0 0 16px; width: 16px; height: 16px; }
.stage-detail .stage-primary,
.stage-detail .application-panel .ex-acts a.stage-primary { display: flex; align-items: center; justify-content: center; text-align: center; width: 100%; min-height: 48px; }
.stage-detail .stage-main-action { max-width: 360px; margin-top: 20px; }
.stage-detail .stage-board-link { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; gap: 6px; }
.stage-detail .application-panel .stage-board-link { align-self: center; text-align: center; }
.stage-detail .stage-note,.stage-detail .stage-notice-date { margin: 12px 0 0; color: var(--ink-2); font-size: 14px; line-height: 1.75; }
.stage-detail .stage-facts { display: grid; gap: 0; background: var(--proto-inset); border-radius: 8px; padding: 8px 20px; margin: 20px 0; }
.stage-detail .stage-facts > div { display: grid; grid-template-columns: minmax(140px,1fr) minmax(0,1.65fr); gap: 20px; padding: 16px 0; border-bottom: 1px solid var(--rule); }
.stage-detail .stage-facts > div:last-child { border-bottom: 0; }
.stage-detail .stage-facts dt { font-size: 14px; line-height: 1.6; font-weight: 600; }
.stage-detail .stage-facts dd { margin: 0; font-size: 15px; line-height: 1.6; min-width: 0; }
.stage-detail .stage-facts b,.stage-detail .stage-category,.stage-detail .stage-evidence { overflow-wrap: anywhere; }
.stage-detail .stage-verification { display: block; font-size: 13px; color: var(--ink-2); font-weight: 400; line-height: 1.6; margin-top: 5px; }
.stage-detail .stage-evidence { margin-top: 4px; font-size: 13px; font-weight: 400; line-height: 1.6; }
.stage-detail .stage-evidence summary { cursor: pointer; min-height: 44px; padding-block: 10px; color: var(--ink-2); }
.stage-detail .stage-evidence blockquote { margin: 8px 0; padding-left: 12px; border-left: 2px solid var(--rule); }
.stage-detail .stage-evidence a { display: inline-flex; align-items: center; min-height: 44px; gap: 4px; }
.stage-detail .stage-window span { display: inline-block; font-size: 13px; font-weight: 600; padding: 6px 10px; border: 1px solid var(--rule); border-radius: 8px; background: var(--proto-inset); color: var(--ink); }
.stage-detail .stage-content > p { line-height: 1.75; }
.stage-detail .stage-instructions { list-style: none; counter-reset: stage-step; display: grid; gap: 23px; padding: 0; margin: 23px 0 0; }
.stage-detail .stage-instructions > li { counter-increment: stage-step; position: relative; padding-left: 40px; }
.stage-detail .stage-instructions > li::before { content: counter(stage-step); position: absolute; top: 0; left: 0; display: grid; place-items: center; width: 26px; height: 26px; border: 1px solid var(--rule); border-radius: 50%; font-size: 12px; color: var(--ink-2); }
.stage-detail .stage-instructions h3,.stage-detail .stage-checklist h3 { margin: 1px 0 5px; font-size: 15px; line-height: 1.5; font-weight: 600; }
.stage-detail .stage-instructions p,.stage-detail .stage-checklist p { margin: 0; color: var(--ink-2); font-size: 14px; line-height: 1.75; }
.stage-detail .stage-checklist { padding: 20px; border-radius: 8px; background: var(--proto-inset); margin-top: 20px; }
.stage-detail .stage-checklist ul,.stage-detail .stage-simple-steps { display: grid; gap: 10px; padding-left: 22px; margin: 14px 0 0; font-size: 14px; line-height: 1.75; }
.stage-detail .stage-checklist ul { list-style: disc; }
.stage-detail .stage-simple-steps { list-style: decimal; }
.stage-detail .stage-checklist li,.stage-detail .stage-simple-steps li { display: list-item; }
.stage-detail .stage-cutoffs { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 14px; line-height: 1.6; }
.stage-detail .stage-cutoffs th,.stage-detail .stage-cutoffs td { text-align: left; vertical-align: top; padding: 12px 10px; border-bottom: 1px solid var(--rule); overflow-wrap: anywhere; }
.stage-detail .stage-cutoffs th { font-weight: 600; }
.stage-detail .stage-cutoffs th:first-child { width: 30%; }
.stage-detail .stage-cutoffs th:nth-child(2) { width: 22%; }
@media (max-width: 600px) {
  .stage-detail .stage-main-action { max-width: none; }
  .stage-detail .stage-facts { padding: 4px 16px; }
  .stage-detail .stage-facts > div { grid-template-columns: minmax(0,1fr); gap: 6px; }
  .stage-detail .stage-cutoffs th,.stage-detail .stage-cutoffs td { padding: 10px 6px; }
  .stage-detail .stage-checklist { padding: 17px; }
}