/* ==== ResumeSplit design system (docs/UI_DESIGN_SYSTEM.md, docs/BRAND_USAGE.md) ===================================== The app's own interface uses the approved ResumeSplit "Page Motion" palette (D-066; exact values from data/branding/resumesplit/color-tokens.json) plus the status colours below, which keep their meaning; generated Resume Books, Excel files and outgoing emails stay Arcadis (docs/ARCADIS_BRANDING_SPEC.md). tests/test_web.py checks every hex. UI typeface Liberation Sans (D-087; Arial stack as fallback), flat fills: no gradients, no shadows. Shared parts first (tokens, shell, controls, components, states), then page sections. Reuse these classes instead of page-wide overrides. */ :root { /* ResumeSplit palette, exactly as supplied (05_Handoff/brand-tokens.css) */ --rs-navy:#061F3F; --rs-blue:#0066FF; --rs-teal:#00BFD4; --rs-purple:#7138F5; --rs-ice:#E5F5FF; --rs-paper:#F7FAFF; --rs-white:#FFFFFF; --rs-slate:#52657A; --rs-border:#CEDAE8; --rs-action:#0055D4; --rs-teal-text:#007D8B; /* Roles used by the components. Bright teal (--rs-teal) is decoration only: 2.23:1 on white, never text. */ --ink:var(--rs-navy); --muted:var(--rs-slate); --line:var(--rs-border); --bg:var(--rs-paper); --card:var(--rs-white); --brand:var(--rs-action); --brand-tint:var(--rs-ice); --teal-1:var(--rs-blue); --accent:var(--rs-blue); --accent-tint:var(--rs-ice); --info:var(--rs-action); --infobg:var(--rs-ice); --focus:var(--rs-blue); /* Status colours keep their meaning (success / warning / error / search highlight), unchanged from before */ --ok:#007377; --okbg:#BFDCDD; --warn:var(--rs-navy); --warnbg:#FCECCC; --gold:#F1B434; --bad:#9C266E; --badbg:#E6C9DB; --mark:#F8DA9A; --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --radius:6px; --target:44px; --topbar:64px; --sidebar:224px; --pad:28px; --card-pad:20px; --gap:24px; } @media (max-width: 1279.98px) { :root { --sidebar:208px; --pad:24px; } } @media (max-width: 767.98px) { :root { --pad:16px; --card-pad:16px; --gap:16px; --topbar:56px; } } * { box-sizing:border-box; } html { -webkit-text-size-adjust:100%; text-size-adjust:100%; scroll-padding-top:calc(var(--topbar) + 8px); } /* D-087: Liberation Sans everywhere - the same bundled files the generated PDFs embed */ @font-face { font-family:'Liberation Sans'; font-style:normal; font-weight:400; font-display:swap; src:url('fonts/LiberationSans-Regular.ttf') format('truetype'); } @font-face { font-family:'Liberation Sans'; font-style:normal; font-weight:700; font-display:swap; src:url('fonts/LiberationSans-Bold.ttf') format('truetype'); } body { margin:0; font:16px/1.5 'Liberation Sans', Arial, Helvetica, sans-serif; color:var(--ink); background:var(--bg); } a { color:var(--brand); text-underline-offset:2px; } :focus-visible { outline:2px solid var(--focus); outline-offset:2px; } h1 { font-size:32px; line-height:1.2; font-weight:700; margin:0 0 var(--s2); overflow-wrap:anywhere; } h2 { font-size:20px; line-height:1.3; font-weight:700; margin:0 0 var(--s3); } h3 { font-size:16px; line-height:1.4; font-weight:700; margin:var(--s4) 0 var(--s2); } @media (max-width: 767.98px) { h1 { font-size:26px; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition:none !important; animation:none !important; scroll-behavior:auto !important; } } [hidden] { display:none !important; } /* a hidden control never shows (e.g. "View results" while a run is processing) */ .sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; } /* ---- Application shell: 64px top bar, 224px sidebar (208px at 1024-1279px), drawer below 1024px ---- */ .skip { position:absolute; left:8px; top:-200px; z-index:100; padding:10px 16px; background:#FFFFFF; color:var(--ink); border:2px solid var(--focus); border-radius:var(--radius); font-weight:700; } .skip:focus { top:8px; } .topbar { display:flex; align-items:center; gap:var(--s3) var(--s5); min-height:var(--topbar); padding:var(--s2) var(--pad); background:#FFFFFF; border-bottom:1px solid var(--line); } @media (min-height: 560px) { .topbar { position:sticky; top:0; z-index:30; } } .brand { display:inline-flex; align-items:center; gap:var(--s3); min-height:var(--target); color:var(--ink); text-decoration:none; font-weight:700; flex:none; } /* The supplied ResumeSplit logo (D-066; docs/BRAND_USAGE.md): 160 px wide at its own 1135:232 ratio, the symbol alone (32 px high) on narrow phones, the domain version (240 px) on the sign-in page. Never stretched or recoloured. */ .brand img { width:160px; height:auto; display:block; } .brand-domain img { width:240px; max-width:100%; } .drawer-logo { width:160px; height:auto; display:block; } @media (max-width: 479.98px) { .brand:not(.brand-domain) img { width:31px; } } .topsearch { flex:1 1 360px; display:flex; gap:var(--s2); align-items:center; max-width:720px; min-width:0; margin:0 auto; } .topsearch input { flex:1 1 auto; min-width:0; max-width:none; } .topsearch button, .drawer-search button { margin:0; } .workspace { flex:none; color:var(--muted); font-size:14px; white-space:nowrap; } .topbar .menu-btn { display:none; margin:0; flex:none; } .shell { display:grid; grid-template-columns:var(--sidebar) minmax(0, 1fr); min-height:calc(100vh - var(--topbar)); } .sidenav { background:#FFFFFF; border-right:1px solid var(--line); padding:var(--s2) 0 var(--s5); } @media (min-width: 1024px) and (min-height: 560px) { .sidenav { position:sticky; top:var(--topbar); align-self:start; height:calc(100vh - var(--topbar)); overflow-y:auto; } } .drawer-head, .drawer-search, .scrim { display:none; } .navgroup { margin:var(--s4) var(--s4) var(--s1) 20px; font-size:13px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); } .sidenav ul { list-style:none; margin:0; padding:0; } .sidenav li a { display:flex; align-items:center; min-height:var(--target); padding:var(--s2) var(--s4); color:var(--ink); text-decoration:none; border-left:4px solid transparent; } .sidenav li a:hover { text-decoration:underline; } /* current area: ice blue, 4px blue marker, navy bold text (navy on ice 14.8:1) */ .sidenav li a[aria-current="page"] { background:var(--brand-tint); border-left-color:var(--accent); font-weight:700; } .content { min-width:0; display:flex; flex-direction:column; } main { width:100%; max-width:1600px; padding:var(--pad); flex:1 0 auto; } main:focus { outline:none; } body[data-area="map"] main { max-width:none; } /* the map uses all available width */ .foot { padding:var(--s4) var(--pad); color:var(--muted); font-size:13px; border-top:1px solid var(--line); } @media (max-width: 1023.98px) { .topbar .menu-btn { display:inline-flex; } .shell { display:block; min-height:0; } .sidenav { display:none; position:fixed; z-index:50; top:0; bottom:0; left:0; width:min(320px, 88vw); overflow-y:auto; padding:var(--s3) 0 var(--s6); } .sidenav.open, .sidenav:target { display:block; } .drawer-head { display:flex; align-items:center; justify-content:space-between; gap:var(--s3); padding:0 var(--s4) var(--s3); border-bottom:1px solid var(--line); } .drawer-head .button { margin:0; } .drawer-search { display:block; padding:var(--s2) var(--s4) var(--s3); border-bottom:1px solid var(--line); } .drawer-search label { margin-top:0; } .drawer-search .searchrow input { flex:1 1 120px; } .scrim:not([hidden]) { display:block; position:fixed; inset:0; z-index:45; background:transparent; } /* outside click closes */ .workspace { display:none; } } @media (max-width: 767.98px) { .topbar { gap:var(--s3); } .topsearch { display:none; } /* phone: the resume search lives in the drawer */ } /* ---- Page header, section navigation (subtabs), breadcrumbs ---- */ .page-head { display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:var(--s3) var(--s5); margin:0 0 var(--s4); } .page-head > div { min-width:0; } .lede { margin:var(--s1) 0 0; color:var(--muted); max-width:80ch; } .crumbs { margin:0 0 var(--s2); color:var(--muted); font-size:14px; } .crumbs a { display:inline-block; padding:11px 0; } /* 44px even inside .meta text */ .tabs { display:flex; gap:0 var(--s1); align-items:flex-end; border-bottom:1px solid var(--line); margin:0 0 var(--s4); overflow-x:auto; overflow-y:hidden; scrollbar-width:thin; } .tabs a { display:inline-flex; align-items:center; flex:none; min-height:var(--target); padding:10px 16px; color:var(--brand); text-decoration:none; font-weight:700; white-space:nowrap; border-bottom:3px solid transparent; margin-bottom:-1px; } .tabs a:hover { text-decoration:underline; } .tabs a[aria-selected="true"], .tabs a[aria-current="page"] { border-bottom-color:var(--accent); color:var(--brand); } .tabs a.tablink { font-weight:400; text-decoration:underline; } .tabsep { flex:1 1 16px; } .tab-select { margin:0 0 var(--s4); } .tab-select label { margin-top:0; } /* ---- Cards, layout grids ---- */ .card { background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:var(--card-pad); margin:0 0 var(--s4); min-width:0; } .card > :last-child { margin-bottom:0; } .card > h2:first-child, .card > header:first-child h2 { margin-top:0; } .grid { display:grid; grid-template-columns:2fr 1fr; gap:var(--gap); align-items:start; } .grid > * { min-width:0; } @media (max-width: 767.98px) { .grid { grid-template-columns:1fr; } } .stack > * + * { margin-top:var(--s4); } /* ---- Buttons (44px targets; text labels; primary action blue, secondary white with a visible border) ---- */ button, .button { display:inline-block; min-height:var(--target); padding:11px 16px; border-radius:var(--radius); border:1px solid var(--muted); background:#FFFFFF; color:var(--ink); font:inherit; font-weight:700; line-height:1.25; text-align:center; text-decoration:none; cursor:pointer; margin:4px 8px 4px 0; vertical-align:middle; } .button { display:inline-flex; align-items:center; justify-content:center; } button:hover, .button:hover { border-color:var(--ink); text-decoration:underline; } button.primary, .button.primary { background:var(--brand); border-color:var(--brand); color:#FFFFFF; } button.primary:hover, .button.primary:hover { background:var(--ink); border-color:var(--ink); } button.link { border:0; background:none; color:var(--brand); padding:10px 4px; text-decoration:underline; font-weight:400; } button:disabled, button:disabled:hover { color:var(--muted); border-color:var(--line); background:#FFFFFF; cursor:not-allowed; text-decoration:none; } button.primary:disabled { background:var(--line); border-color:var(--line); color:var(--ink); } button.danger, .button.danger { background:var(--bad); border-color:var(--bad); color:#FFFFFF; } button.danger:hover, .button.danger:hover { background:var(--ink); border-color:var(--ink); } .actions { display:flex; flex-wrap:wrap; gap:var(--s2) var(--s3); align-items:center; margin:var(--s3) 0; } .actions > button, .actions > .button, .actions > form > button { margin:0; } /* ---- Form fields: label above, 16px text, 44px fields ---- */ fieldset { border:1px solid var(--line); border-radius:var(--radius); margin:0 0 var(--s3); padding:var(--s2) var(--s3) var(--s3); min-width:0; } legend { font-weight:700; padding:0 var(--s1); } label { display:block; margin:var(--s3) 0 var(--s1); font-weight:700; } label.choice { display:inline-flex; gap:var(--s2); align-items:center; margin:0 var(--s5) 0 0; font-weight:400; min-height:var(--target); } input, select, textarea { font:inherit; } /* buttons set their own font (bold) above */ input:not([type]), input[type=text], input[type=search], input[type=email], input[type=number], input[type=date], input[type=password], input[type=url], select, textarea { width:100%; max-width:480px; min-height:var(--target); padding:10px 12px; border:1px solid var(--muted); border-radius:var(--radius); background:#FFFFFF; color:var(--ink); } textarea { min-height:96px; } label > input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=hidden]), label > select, label > textarea { display:block; margin-top:var(--s1); font-weight:400; } input[type=checkbox], input[type=radio] { width:20px; height:20px; accent-color:var(--brand); flex:none; margin:0; } input[type=file] { display:block; margin-top:var(--s1); font-weight:400; max-width:100%; } input[type=file]::file-selector-button { min-height:var(--target); padding:10px 16px; margin-right:var(--s3); border:1px solid var(--muted); border-radius:var(--radius); background:#FFFFFF; color:var(--ink); font:inherit; font-weight:700; cursor:pointer; } .req { color:var(--bad); font-weight:400; } .field-error, .err { color:var(--bad); font-weight:700; } input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] { border:2px solid var(--bad); } summary { padding:10px 0; cursor:pointer; min-height:var(--target); } .searchrow { display:flex; flex-wrap:wrap; gap:var(--s2); align-items:center; } .searchrow input { flex:1 1 280px; max-width:none; } .searchrow button, .searchrow .button { margin:0; } /* ---- Notices: text label + tint + coloured edge (never colour alone) ---- */ .banner { padding:var(--s3) var(--s4); border-radius:var(--radius); background:var(--infobg); color:var(--ink); margin:0 0 var(--s4); border:1px solid var(--line); border-left:5px solid var(--info); } .banner.ok { background:var(--okbg); border-left-color:var(--ok); } .banner.warn { background:var(--warnbg); border-left-color:var(--gold); } .banner.error { background:var(--badbg); border-left-color:var(--bad); } .banner a { color:var(--ink); } .banner > :last-child { margin-bottom:0; } .hint, .meta { color:var(--muted); font-size:14px; } .pill { display:inline-block; padding:2px 8px; border-radius:999px; background:var(--infobg); color:var(--ink); font-size:13px; font-weight:700; line-height:1.5; } .pill.ok { background:var(--okbg); } .pill.warn { background:var(--warnbg); } .pill.bad { background:var(--badbg); color:var(--ink); border:1px solid var(--bad); } .status { display:inline-flex; align-items:center; gap:6px; font-weight:700; white-space:nowrap; } .status::before { content:""; width:10px; height:10px; border-radius:50%; background:var(--muted); flex:none; } .status.ok::before { background:var(--ok); } .status.warn::before { background:var(--gold); } .status.bad::before { background:var(--bad); } .missing { color:var(--muted); font-style:italic; } .empty { padding:var(--s5); border:1px dashed var(--line); border-radius:var(--radius); text-align:center; color:var(--muted); } /* ---- Tables: 14px text, 48px header, long values wrap; numbers right-aligned ---- */ table { border-collapse:collapse; width:100%; font-size:14px; line-height:1.4; } th, td { border:1px solid var(--line); padding:10px 12px; text-align:left; vertical-align:top; } th { background:#FFFFFF; font-weight:700; height:48px; vertical-align:bottom; border-bottom:2px solid var(--muted); } th a { color:var(--ink); } td.ok { color:var(--ok); font-weight:700; } td.bad { color:var(--bad); font-weight:700; } td.num, th.num { text-align:right; font-variant-numeric:tabular-nums; } table.data td { height:56px; } .scroll { overflow-x:auto; position:relative; } /* contains hidden labels too, so nothing widens the page */ .scroll:focus-visible { outline-offset:0; } /* ---- Menus (details.menu) and dialogs ---- */ details.menu { position:relative; display:inline-block; } details.menu > summary { display:inline-flex; align-items:center; gap:6px; list-style:none; min-height:var(--target); padding:10px 14px; border:1px solid var(--muted); border-radius:var(--radius); background:#FFFFFF; font-weight:700; } details.menu > summary::-webkit-details-marker { display:none; } details.menu > summary::after { content:"\25BE"; content:"\25BE" / ""; font-size:12px; } details.menu[open] > summary { border-color:var(--ink); } details.menu > .menu-list { position:absolute; z-index:25; right:0; top:calc(100% + 4px); min-width:240px; max-width:min(320px, 90vw); background:#FFFFFF; border:1px solid var(--muted); border-radius:var(--radius); padding:var(--s1) 0; margin:0; list-style:none; } details.menu.left > .menu-list { right:auto; left:0; } details.menu.up > .menu-list { top:auto; bottom:calc(100% + 4px); } .menu-list li { margin:0; } .menu-list a, .menu-list button { display:flex; width:100%; justify-content:flex-start; min-height:var(--target); margin:0; padding:10px 14px; border:0; border-radius:0; background:#FFFFFF; color:var(--ink); font-weight:400; text-align:left; text-decoration:none; } .menu-list a:hover, .menu-list button:hover:not(:disabled), .menu-list a:focus-visible, .menu-list button:focus-visible { background:var(--brand-tint); text-decoration:underline; } .menu-list hr { border:0; border-top:1px solid var(--line); margin:var(--s1) 0; } dialog { max-width:min(560px, calc(100% - 32px)); border:1px solid var(--muted); border-radius:var(--radius); padding:var(--s5); } dialog::backdrop { background:var(--rs-navy); opacity:.5; } dialog h2 { margin-top:0; } /* ---- Key/value lists, misc ---- */ .kv { display:grid; grid-template-columns:190px 1fr; gap:4px 12px; margin:0; } .kv dt { color:var(--muted); } .kv dd { margin:0; overflow-wrap:anywhere; } @media (max-width: 520px) { .kv { grid-template-columns:1fr; } .kv dd { margin-bottom:6px; } } code { background:var(--infobg); padding:1px 4px; border-radius:3px; overflow-wrap:anywhere; } mark { background:var(--mark); color:var(--ink); padding:0 2px; } form.inline { display:inline; } ul.plain { list-style:none; padding:0; margin:0; } ul.plain li { padding:6px 0; border-bottom:1px solid var(--line); } ul.plain li.hit { font-weight:700; } /* ==== Page sections (existing, consolidated where the redesign touched them) ==== */ .stages { list-style:none; padding:0; margin:0; } .stage { display:grid; grid-template-columns: 150px 1fr; gap:4px 12px; padding:8px 0; border-bottom:1px solid var(--line); } .stage .detail { grid-column: 2; color:var(--muted); font-size:.9rem; overflow-wrap:anywhere; } @media (max-width: 520px) { .stage { grid-template-columns: 1fr; } .stage .detail { grid-column: 1; } } .stage.done .pill { background:var(--okbg); color:var(--ink); } /* --ok on --okbg is only 3.9:1 */ .stage.running .pill { background:var(--infobg); color:var(--info); } .stage.done_with_issues .pill { background:var(--warnbg); color:var(--warn); } .stage.failed .pill { background:var(--badbg); color:var(--bad); } .counters, .metrics { display:grid; grid-template-columns: repeat(auto-fill, minmax(180px,1fr)); gap:8px; margin:0; } .counters dt, .metrics dt { color:var(--muted); font-size:.85rem; } .counters dd, .metrics dd { margin:0 0 8px; font-size:1.4rem; font-weight:700; } .metrics div { background:var(--card); border:1px solid var(--line); border-radius:8px; padding:10px 12px; } .thumb img { width:100%; border:1px solid var(--line); border-radius:4px; } form.act { display:flex; flex-wrap:wrap; gap:8px 16px; align-items:flex-end; border-top:1px solid var(--line); margin-top:12px; padding-top:8px; } form.act label { margin:0; font-size:.9rem; } form.act input, form.act select { max-width:260px; } /* Candidate map (D-021) - brand palette only */ .map-filters { display:flex; flex-wrap:wrap; gap:0 16px; align-items:flex-end; } .map-filters label { margin-top:0; } .map-wrap { display:block; } /* the map uses the full width; details appear in the hover card */ .map-frame { position:relative; border:1px solid var(--line); border-radius:8px; padding:8px; background:var(--card); } .map-tip { position:absolute; z-index:5; width:min(360px, calc(100% - 8px)); max-height:320px; overflow:auto; background:#FFFFFF; border:1px solid var(--muted); border-radius:6px; padding:8px 10px; font-size:.85rem; line-height:1.35; } .map-tip ul.plain li { padding:4px 0; } .map-tip li.miss { color:var(--muted); } .map-tools button { min-width:44px; } .cmap { width:100%; height:auto; display:block; touch-action:none; cursor:grab; background:#FFFFFF; } .cmap .region { fill:#FFFFFF; stroke:var(--line); stroke-width:0.6; vector-effect:non-scaling-stroke; } .cmap .pt { fill:var(--rs-blue); fill-opacity:.85; stroke:#FFFFFF; cursor:pointer; } .cmap .pt.match { fill:var(--rs-purple); fill-opacity:1; stroke:var(--ink); } .cmap .pt.dim { fill:var(--line); fill-opacity:.7; } .cmap .pt:focus { outline:none; stroke:var(--ink); stroke-width:2px; } .cmap .office { fill:var(--rs-teal-text); stroke:#FFFFFF; pointer-events:visibleFill; cursor:pointer; } .cmap .office:focus { outline:none; stroke:var(--ink); stroke-width:2px; } .cmap text { font-family:'Liberation Sans', Arial, Helvetica, sans-serif; pointer-events:none; paint-order:stroke; stroke:#FFFFFF; stroke-linejoin:round; } .cmap .lbl-region { fill:var(--muted); font-weight:700; letter-spacing:.04em; } .cmap .lbl-city { fill:var(--ink); } .cmap .city-dot { fill:var(--muted); pointer-events:none; } .key { display:inline-block; width:12px; height:12px; border-radius:50%; vertical-align:middle; } .key-match { background:var(--rs-purple); } .key-pt { background:var(--rs-blue); } .key-dim { background:var(--line); } .key-office { background:var(--rs-teal-text); } /* Insights tab - one series per chart: ResumeSplit blue bars (D-066; the numbers are also in the table beside it) */ .insight-filters { display:flex; flex-wrap:wrap; gap:0 14px; align-items:flex-end; } .insight-filters label { margin-top:0; } .insight-filters select { max-width:220px; } .tiles { display:grid; grid-template-columns:repeat(auto-fit, minmax(160px, 1fr)); gap:12px; margin:12px 0; } .tile { border:1px solid var(--line); border-radius:8px; padding:12px 14px; display:flex; flex-direction:column; gap:2px; background:#FFFFFF; } .tile-num { font-size:1.8rem; font-weight:700; line-height:1.1; color:var(--ink); } .tile-label { color:var(--muted); font-size:.9rem; } .toc a { margin:0 2px; } .insight-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 460px), 1fr)); gap:0 12px; } .bars { display:flex; flex-direction:column; gap:2px; margin:8px 0; } .bar-row { display:grid; grid-template-columns:minmax(90px, 38%) 1fr auto; gap:8px; align-items:center; min-height:24px; } .bar-row:hover { background:var(--rs-ice); } .bar-label { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.9rem; } .bar-track { position:relative; height:14px; border-left:1px solid var(--line); } .bar { position:absolute; left:0; top:0; bottom:0; min-width:2px; background:var(--rs-blue); border-radius:0 4px 4px 0; } .bar.bar-muted { background:var(--line); } .bar-value { font-variant-numeric:tabular-nums; font-size:.9rem; color:var(--ink); min-width:3ch; text-align:right; } table.xtab td, table.xtab th { text-align:right; } table.xtab td:first-child, table.xtab th:first-child { text-align:left; } /* Processing progress bar */ .progress-head { display:flex; justify-content:space-between; gap:12px; align-items:baseline; } .progress-pct { font-size:1.4rem; font-weight:700; font-variant-numeric:tabular-nums; } .progress-track { height:16px; border-radius:8px; background:var(--rs-ice); overflow:hidden; margin:8px 0; } .progress-fill { height:100%; background:var(--rs-blue); border-radius:8px; transition:width .6s ease; } pre.doctext { white-space:pre-wrap; overflow-wrap:anywhere; max-height:520px; overflow:auto; border:1px solid var(--line); border-radius:6px; padding:12px; font:14px/1.45 'Liberation Sans', Arial, Helvetica, sans-serif; } /* ---- Layout review (owner, 2026-10-11): page-by-page review of every screen at 1440px and 390px, benchmarked against 29 comparable recruiting and design-system pages. Additive overrides; approved palette only. ---- */ main > p.meta, main > p.hint, .card > p.meta, .card > p.hint { max-width:80ch; } /* readable line length */ main > p.crumbs, main > p.actions { max-width:none; } /* link rows are not running text: never wrapped early */ .stage.done .pill { color:var(--ink); } .grid.wide-right { grid-template-columns:1fr 2fr; } @media (max-width: 760px) { .grid.wide-right { grid-template-columns:1fr; } } /* one column on phones, like .grid */ .grid3 { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap:12px; } .stage .pill { justify-self:start; } .metrics dd { overflow-wrap:anywhere; } .choices label.choice { display:flex; margin:4px 0; } .optgrid, #colpanel fieldset { display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap:0 16px; } .optgrid label.choice, #colpanel fieldset label.choice { margin-right:0; } #colpanel fieldset > legend, .optgrid > legend { grid-column:1 / -1; } .score { font-size:1.4rem; font-weight:700; font-variant-numeric:tabular-nums; } .onthispage { display:flex; flex-wrap:wrap; gap:0 16px; margin:4px 0 8px; } .onthispage a { display:inline-block; padding:10px 0; } /* Two label/value pairs per row only when the BOX is wide enough: on the candidate page it sits in the narrow left pane of the split view, where the window is wide but the box is not (owner's PC, 2026-10-12: values one letter wide) */ .kv-box { container-type:inline-size; } @container (min-width: 760px) { .kv.two { grid-template-columns:minmax(120px, 190px) minmax(0, 1fr) minmax(120px, 190px) minmax(0, 1fr); } } /* Candidate page (roster_detail.html, /roster/c/) */ /* The Candidate Assessment Score number never splits across two lines */ #evaluation .score { white-space:nowrap; } /* Canonical candidate: on a phone the label stays beside its value, so an empty value never reads as the next label; an empty value shows a muted dash (display only, never data; screen readers skip it) */ @media (max-width: 520px) { .kv.kv-pairs { grid-template-columns:minmax(0, 36%) minmax(0, 1fr); } .kv.kv-pairs dd { margin-bottom:0; } } .kv.kv-pairs dd:empty::before { content:"\2014"; content:"\2014" / ""; color:var(--muted); } /* Geography provenance: Slot and State stay on one line. From tablet width up, only the long audit ids (Method, Office dataset, Geocoder, Verification) may break, so the Verification column fits the card; on a phone the table scrolls inside .scroll and the ids stay whole */ table.geoprov td:first-child, table.geoprov th:first-child, table.geoprov td:nth-child(3) { white-space:nowrap; } @media (min-width: 761px) { table.geoprov td:nth-child(n+6) { overflow-wrap:anywhere; } } /* The hint after an action button sits beside it on desktop and moves below it as one block on a phone */ #evaluation form.inline + .meta, #archperson + .meta { display:inline-block; vertical-align:middle; } /* ---- Possible duplicates, Resume Book output (_duplicate_pair.html, duplicates.html, roster_output.html) ---- */ /* Possible duplicates: comparison fits a phone; decision list one option per line (.choices); compact Undo */ @media (max-width: 760px) { table.dupcmp { font-size:.8rem; } table.dupcmp th, table.dupcmp td { padding:5px 4px; } table.dupcmp td, table.dupcmp thead th { overflow-wrap:anywhere; } /* long emails and roster IDs wrap */ table.dupcmp .pill { white-space:nowrap; padding:2px 5px; } } form.undoform { display:flex; flex-wrap:wrap; gap:6px; align-items:center; } form.undoform input[name=decided_by] { flex:1 1 140px; max-width:220px; } form.undoform button { margin:0; } /* Resume Book output: numbers right-aligned and compact; long IDs wrap on a phone */ table.contents th.num, table.contents td.num { width:1%; white-space:nowrap; } @media (max-width: 520px) { table.checks td { overflow-wrap:anywhere; } /* long gate names and comma-joined roster IDs wrap inside the card */ table.checks td:first-child { min-width:12ch; } table.contents th.num { white-space:normal; } table.contents td a { overflow-wrap:anywhere; } } /* ---- Layout review: Process / Runs / Results / Human Review pages (home, processing, results, runs, review, review_queue) ---- */ /* Home: the upload form keeps a readable width on wide screens (phone unchanged) */ #upload { max-width:760px; } /* Processing: "View results" sits in the progress card; counts read as label | value rows */ .progress-card .progress-next { margin:12px 0 0; } .progress-card .progress-next .button { margin:0; } .processing-grid .counters { grid-template-columns:1fr auto; gap:0; } .processing-grid .counters dt, .processing-grid .counters dd { display:flex; align-items:center; padding:6px 0; border-bottom:1px solid var(--line); } .processing-grid .counters dt { font-size:.92rem; } .processing-grid .counters dd { margin:0; padding-left:12px; justify-content:flex-end; font-size:1.2rem; font-variant-numeric:tabular-nums; } #stages .stage .pill { align-self:start; } @media (min-width: 761px) { .processing-grid .counts-card { position:sticky; top:12px; max-height:calc(100vh - 24px); overflow:auto; } } @media (max-width: 760px) { .processing-grid .counts-card { order:-1; } } /* phone: live counts above the 14 stages */ @media (max-width: 520px) { #stages .stage { grid-template-columns:auto 1fr; } #stages .stage .detail { grid-column:1 / -1; } } /* Results: package status tile wide enough for FINAL_RUN_PACKAGE; values share a baseline */ .metrics > div { display:flex; flex-direction:column; justify-content:space-between; } @media (min-width: 400px) { .metrics .metric-status { grid-column:span 2; } } /* the grid has 2+ columns from 400px */ /* Results and Runs: action buttons full width and equal on a phone */ @media (max-width: 520px) { .stack-actions .button { display:block; width:100%; text-align:center; margin:8px 0; } } /* Human Review queue and Runs: on a phone each table row becomes one labelled card (header kept for screen readers) */ @media (max-width: 640px) { table.stack-sm thead { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); } table.stack-sm, table.stack-sm tbody, table.stack-sm tr, table.stack-sm td { display:block; width:100%; } table.stack-sm tr { border:1px solid var(--line); border-radius:8px; margin:0 0 12px; padding:6px 12px; } table.stack-sm td { position:relative; border:0; padding:4px 0 4px 8.5em; min-height:2em; overflow-wrap:anywhere; } table.stack-sm td::before { content:attr(data-label); position:absolute; left:0; top:5px; width:8em; color:var(--muted); font-weight:600; font-size:.85rem; } } /* Human Review queue: filter buttons line up with the 44px selects; full-width selects on a phone */ #rq-filter button, #rq-filter .button { margin:0; } @media (max-width: 520px) { #rq-filter > label { flex:1 1 100%; } #rq-filter select { max-width:none; } } /* Reference Data group (reference, sources, support-data, offices, learning, name-capitals); approved palette only */ /* Reference Data: wider label column so "Cities with more than one office" stays on one line */ @media (min-width: 521px) { .kv.kv-wide { grid-template-columns:250px 1fr; } } /* Reference Data: the two one-button cards sit side by side (stacked on a phone), cards end without extra space (whole Reference Data group) */ #ref-more { margin:12px 0; } #ref-more > .card { margin:0; } body[data-path^="/reference"] .card > p:last-child { margin-bottom:0; } /* Data sources: short status chips never split; Download buttons do not stretch the row; a jumped-to row is marked */ #src-data .pill { white-space:nowrap; } #src-data td > .button { margin:0; } #src-columns td.src-used a { display:inline-block; padding:4px 0; } #src-data tr:target > td { background:var(--warnbg); } /* Reference tables on a phone: each row becomes one labelled card (header kept for screen readers) */ @media (max-width: 640px) { table.ref-stack thead { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); } table.ref-stack, table.ref-stack tbody, table.ref-stack tr, table.ref-stack td { display:block; width:100%; } table.ref-stack tr { border:1px solid var(--line); border-radius:8px; margin:0 0 10px; overflow:hidden; } table.ref-stack td { position:relative; border:0; border-top:1px solid var(--line); padding:6px 10px 6px calc(10px + 8em); overflow-wrap:anywhere; text-align:left; } table.ref-stack td::before { content:attr(data-label); position:absolute; left:10px; top:8px; width:7.5em; color:var(--muted); font-weight:600; font-size:.85rem; line-height:1.3; } table.ref-stack td:first-child { border-top:0; background:var(--brand-tint); padding-left:10px; } table.ref-stack td:first-child::before { content:none; } table.ref-stack td:first-child a { color:var(--ink); } /* navy on the ice tint keeps AA; the underline marks the link */ table.ref-stack td.ref-wide { padding-left:10px; } /* long text: label above, full width */ table.ref-stack td.ref-wide::before { position:static; display:block; width:auto; } #ref-registries td:first-child { font-weight:600; } } /* ---- Layout review: Candidate Evaluation pages (evaluation, evaluation_document, evaluation_matrix, evaluation_job, evaluation_confirm). Scoped to classes added in those templates or to body[data-path^="/evaluation"]. ---- */ /* Tables: the active-matrix summary keeps each weight next to its criterion; names and status pills stay on one line */ table.evfit { width:auto; min-width:min(100%, 480px); } table.evstack td .pill { white-space:nowrap; } @media (min-width: 641px) { table.evstack td.evname { white-space:nowrap; } } /* Phone: each table row becomes one labelled card, so every column (Status, rating levels, the evaluation text) is visible without sideways scrolling; the header stays in the page for screen readers */ @media (max-width: 640px) { table.evstack thead { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); } table.evstack, table.evstack tbody, table.evstack tr, table.evstack td { display:block; width:100%; } table.evstack tr { border:1px solid var(--line); border-radius:8px; margin:0 0 12px; padding:6px 12px; } table.evstack td { display:flow-root; border:0; padding:4px 0 4px 8rem; text-align:left; white-space:normal; overflow-wrap:anywhere; } table.evstack td::before { content:attr(data-label); float:left; width:7.5rem; margin-left:-8rem; padding-top:1px; color:var(--muted); font-weight:600; font-size:.85rem; overflow-wrap:normal; } /* a two-line label pushes the next row down */ table.evstack td.evlong { padding-left:0; } /* long text: label above, text uses the full card width */ table.evstack td.evlong::before { float:none; display:block; width:auto; margin:0 0 2px; } } /* Upload forms: Title / Label fields show their whole example text; on a phone every field uses the full width */ body[data-path^="/evaluation"] form.act input[name=title], body[data-path^="/evaluation"] form.act input[name=label] { width:320px; max-width:100%; } @media (max-width: 600px) { body[data-path^="/evaluation"] form.act > label:not(.choice) { flex:1 1 100%; } body[data-path^="/evaluation"] form.act > label > input:not([type=checkbox]):not([type=file]) { width:100%; max-width:100%; } } /* Document page: reading the images with the vision model is its own step, above approve / reject */ .evdoc .evvision { border-top:1px solid var(--line); margin-top:12px; } .evdoc .evvision > h3 { margin-top:12px; } .evdoc .evvision > form.act { border-top:0; margin-top:0; padding-top:0; } /* Confirmation page: a long selection scrolls in its own box, so the cost and the confirm button stay close */ .namelist { max-height:9.5em; overflow:auto; border:1px solid var(--line); border-radius:6px; padding:8px 10px; } /* Run page: the run ID is reference data, smaller than the heading words */ .evrunid { font-size:.6em; font-weight:400; color:var(--muted); overflow-wrap:anywhere; } /* ---- Layout review: Candidate map (map.html) and Insights (insights.html) ---- */ /* Filter bars (map and Insights): an even grid with every label above its field and the actions grouped. Fields whose values differ only near the end (University, Event, Major) take two columns, so the chosen value is never cut off. Phones: two columns. */ form.map-filters, form.insight-filters { display:grid; grid-template-columns:repeat(auto-fill, minmax(170px, 1fr)); gap:8px 16px; align-items:end; padding-top:16px; } form.map-filters > label, form.insight-filters > label { margin:0; min-width:0; } form.map-filters > label > select, form.insight-filters > label > select { display:block; width:100%; max-width:100%; margin-top:4px; } form.map-filters > label.wide, form.insight-filters > label.wide { grid-column:span 2; } form.map-filters > button { justify-self:start; margin:0; } form.insight-filters .filter-actions { grid-column:span 2; display:flex; flex-wrap:wrap; gap:8px 12px; align-items:flex-end; } form.insight-filters .filter-actions > * { margin:0; } @media (max-width: 600px) { form.map-filters, form.insight-filters { grid-template-columns:repeat(2, minmax(0, 1fr)); } } /* Map, wide screens: the six controls on one row, each field sized for its longest value */ @media (min-width: 1100px) { form.map-filters { grid-template-columns:minmax(120px, 1fr) minmax(150px, 1.6fr) minmax(220px, 2.2fr) minmax(160px, 1.2fr) auto auto; } form.map-filters > label.wide { grid-column:auto; } } /* Map: colour key above the map (each swatch stays with its words); usage notes stay below the map */ .map-key { margin:4px 0 8px; } .map-key .key-item { display:inline-flex; align-items:center; gap:6px; white-space:nowrap; margin:0 16px 4px 0; } /* Map, phones: a square map uses more of the screen (the view takes the same shape, see aspect() in map.html) */ @media (max-width: 600px) { .cmap { aspect-ratio:1 / 1; } } /* Map, touch screens: invisible 44px tap area under each dot (drawn by map.html only for coarse pointers) */ .cmap .hit { fill:none; stroke:none; pointer-events:all; cursor:pointer; } /* Map: candidate list in columns on wide screens; name and "details" links get a 44px tap height */ #list > ul.plain { display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 420px), 1fr)); column-gap:24px; } #list li > a { display:inline-block; padding:10px 0; margin:-10px 0; } #list li > a + a { margin-left:8px; } /* Insights: summary tile links line up along the tile bottoms with a 44px tap height */ .tiles .tile a { margin-top:auto; align-self:flex-start; padding:10px 0; } /* Insights: section links never break mid-label; on touch screens each link is 44px tall and every link stays in view (wrapping rows, not a sideways scroller that would put most links off screen) */ .toc a { display:inline-block; white-space:nowrap; } @media (pointer: coarse) { .toc { display:flex; flex-wrap:wrap; align-items:center; gap:0 4px; } .toc a { padding:10px 0; } } /* Insights: equal 12px spacing between chart cards in both directions */ .insight-grid { gap:12px; margin:12px 0; } .insight-grid > .card { margin:0; } /* Insights: bar labels wrap instead of being cut off; the label column is no wider than it needs to be */ .insight .bar-label, #completeness .bar-label { white-space:normal; overflow:visible; text-overflow:clip; overflow-wrap:anywhere; line-height:1.25; padding:2px 0; } .insight .bar-row, #completeness .bar-row { grid-template-columns:minmax(90px, min(38%, 240px)) 1fr auto; } /* Insights cross-tab: header row and row labels stay in view while the table scrolls; Total row set apart. Separate borders, so the borders of the sticky cells move with them. */ #crosstab .scroll { max-height:70vh; overflow:auto; } #crosstab table.xtab { border-collapse:separate; border-spacing:0; } #crosstab table.xtab th, #crosstab table.xtab td { border-width:0 1px 1px 0; } #crosstab table.xtab thead th { border-top-width:1px; position:sticky; top:0; z-index:2; } #crosstab table.xtab tr > :first-child { border-left-width:1px; position:sticky; left:0; z-index:1; background:#FFFFFF; } #crosstab table.xtab thead th:first-child { z-index:3; background:var(--brand-tint); } #crosstab table.xtab tr.total td { border-top:2px solid var(--muted); } /* ---- Section links as pills (owner, 2026-10-11): Insights "Sections" and every "On this page" row ---- */ .toc, .onthispage { display:flex; flex-wrap:wrap; align-items:center; gap:8px; } .toc > strong { margin-right:4px; } .toc a, .onthispage a { display:inline-flex; align-items:center; min-height:36px; margin:0; padding:6px 14px; border:1px solid var(--rs-blue); border-radius:999px; background:#FFFFFF; color:var(--ink); text-decoration:none; font-size:.92rem; font-weight:600; white-space:nowrap; } .toc a:hover, .toc a:focus, .onthispage a:hover, .onthispage a:focus { background:var(--brand-tint); border-color:var(--brand); } @media (pointer: coarse) { .toc a, .onthispage a { min-height:44px; } } /* Instant filters: the note replaces the hidden Apply button; "Updating..." shows while the page reloads */ .instant-note { align-self:center; margin:0 8px 0 0; } .instant-status { align-self:center; } /* ---- Evaluation documents: drop area for several files (owner, 2026-10-11) ---- */ .dropzone { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; flex:1 1 100%; min-height:150px; padding:20px; border:2px dashed var(--rs-blue); border-radius:8px; background:#FFFFFF; text-align:center; cursor:pointer; font-weight:400; } .dropzone.over { background:var(--brand-tint); border-color:var(--brand); } .dropzone.busy { background:var(--warnbg); } .dropzone .dz-main { font-weight:700; font-size:1.05rem; color:var(--ink); } .dropzone .hint { max-width:60ch; } form.act .dropzone input[type=file] { max-width:100%; margin:4px auto 0; } .dz-list { font-size:.9rem; color:var(--ink); overflow-wrap:anywhere; } #tr-form .dropzone { margin:var(--s2) 0; } /* Bring in data (D-088): the same drop area */ #tr-form .dropzone input[type=file] { max-width:100%; margin:4px auto 0; } #docupload > label:not(.dropzone) { flex:1 1 260px; } #docupload > label:not(.dropzone) > input { max-width:100%; } #batch-result ul { margin:8px 0 0; padding-left:20px; } details.rename { margin:8px 0; } /* AI summary under each document title (D-037) */ .evdocname .docsum { display:block; margin-top:4px; font-size:.9rem; color:var(--ink); } .evdocname .docsum.meta { color:var(--muted); } .docsum-full { max-width:80ch; } /* ---- Reference Data page (owner, 2026-10-11): plain-language layout ---- */ /* reference.html: section pills that carry each section's status, one "what this is for" sentence per section, key numbers as tiles, a three-part problem box (What is wrong / What it means / Where to fix it) for every non-ready state, technical values in a "Technical details" disclosure per section. Scoped to ref-* classes; approved palette and existing tokens only; plain flat fills only; Liberation Sans inherited. */ .ref-lede { max-width:80ch; } /* Section pills: the app-wide "On this page" pills (.onthispage a); each also carries its section's status chip (.pill ok / warn / bad). The chip turns white while its pill shows the ice hover tint, so it stays visible. */ .ref-pills { margin:12px 0; } .ref-pills a { gap:8px; padding-right:6px; white-space:normal; } .ref-pills a.ref-pill-solo { padding-right:14px; } .ref-pills a .pill { white-space:nowrap; font-size:.78rem; } .ref-pills a:hover .pill, .ref-pills a:focus .pill { background:#FFFFFF; } /* Summary banner: one line per section that needs attention; links keep 4.5:1 on every banner tint */ .ref-summary ul { margin:6px 0 0; padding-left:20px; } .ref-summary li { margin:4px 0; } .ref-summary a, .ref-problem a { color:var(--ink); } .ref-actions { margin:12px 0; } /* Section cards: heading with its status pill, then the plain "what this is for" sentence */ .ref-sec:target { border-color:var(--accent); } .ref-head { display:flex; flex-wrap:wrap; align-items:center; gap:4px 12px; margin-bottom:4px; } .ref-head h2 { margin:0; } .ref-aka { font-weight:400; color:var(--muted); font-size:.9em; } .ref-what { margin:6px 0 12px; max-width:80ch; } /* Ready: one plain sentence with a teal rule (colour fills are kept for the states that need attention) */ .ref-ok { margin:8px 0; padding-left:12px; border-left:4px solid var(--ok); max-width:80ch; } /* Problem box: the same three parts for every non-ready state; stacked on a phone */ .ref-problem { margin:12px 0; } .ref-problem p.ref-problem-title { margin:0 0 8px; } .ref-wwh { display:grid; grid-template-columns:9.5rem minmax(0, 1fr); gap:6px 12px; margin:0; } .ref-wwh dt { font-weight:700; } .ref-wwh dd { margin:0; overflow-wrap:anywhere; } .ref-wwh code { overflow-wrap:anywhere; } .ref-line { display:block; } .ref-line + .ref-line { margin-top:6px; } .ref-msg { display:block; font-size:.92rem; overflow-wrap:anywhere; } /* Key numbers */ .ref-tiles { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap:12px; margin:12px 0; } .ref-tiles.ref-tiles-num { grid-template-columns:repeat(auto-fit, minmax(min(100%, 96px), 1fr)); gap:8px; max-width:560px; } .ref-tile { border:1px solid var(--line); border-radius:8px; padding:12px 14px; min-width:0; background:#FFFFFF; } .ref-tile.is-bad { border-left:5px solid var(--bad); } .ref-tile-head { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:4px 8px; } .ref-tile-head h3 { margin:0; } .ref-big { display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 8px; margin:8px 0 2px; } .ref-tiles-num .ref-tile { padding:10px 12px; } .ref-tiles-num .ref-big { margin:0; flex-direction:column; align-items:flex-start; } .ref-big .tile-num { font-variant-numeric:tabular-nums; } .ref-cannot { font-size:1.2rem; font-weight:700; color:var(--bad); } .ref-tile > p.meta { margin:0; overflow-wrap:anywhere; } .ref-facts { margin:12px 0; } .ref-facts .pill { margin-right:4px; } /* Technical details: versions, files and raw status codes for matching the Processing Receipt */ .ref-tech { border-top:1px solid var(--line); margin-top:12px; } .ref-tech > summary { color:var(--brand); font-weight:600; min-height:44px; } .ref-tech > summary .meta { font-weight:400; } .ref-tech .kv { margin:4px 0 8px; } .ref-tech code, .ref-tech td { overflow-wrap:anywhere; } /* More tools */ .ref-more-h { margin:24px 0 0; } #ref-more h3 { margin-top:0; font-size:1.1rem; } @media (max-width: 520px) { .ref-actions .button { display:block; width:100%; text-align:center; margin:8px 0; } .ref-wwh { grid-template-columns:1fr; gap:2px 0; } .ref-wwh dd { margin-bottom:8px; } } /* Scoring matrix editor (owner, 2026-10-11) */ .matrix-edit label { display:block; margin:8px 0; } .matrix-edit input:not([type=checkbox]), .matrix-edit textarea { width:100%; max-width:100%; padding:10px; border:1px solid var(--muted); border-radius:6px; font:inherit; } .matrix-edit .crit-row { margin:12px 0; } .matrix-edit .crit-main { display:grid; grid-template-columns:1fr 140px auto; gap:0 16px; align-items:end; } .matrix-edit .crit-levels { display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap:0 16px; } @media (max-width: 600px) { .matrix-edit .crit-main { grid-template-columns:1fr; } } /* Search all resumes (owner, 2026-10-11, D-041) */ #search-form label.wide { flex:2 1 320px; } #search-form label.wide input { max-width:100%; } .search-hit h2 { display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 12px; } .search-hit .snippets { list-style:none; padding:0; margin:8px 0 0; } .search-hit .snippets li { padding:6px 0; border-top:1px solid var(--line); overflow-wrap:anywhere; } .search-hit .snippets .pill { margin-right:6px; } /* ==== Roster (roster.html): tools row, filter chips, selection, table with pinned identity, phone cards, persistent selection bar, Filters / Columns / Resume Book tabs ==== */ @media (max-width: 520px) { form.act input, form.act select { max-width:100%; } } .tabs-head { display:flex; flex-wrap:wrap; align-items:flex-end; gap:0 var(--s5); border-bottom:1px solid var(--line); margin:0 0 var(--s4); } .tabs-head .tabs { border-bottom:0; margin:0; flex:0 1 auto; min-width:0; } .tabs-aside { display:flex; flex-wrap:wrap; gap:0 var(--s4); margin:0 0 0 auto; } .tabs-aside a { display:inline-flex; align-items:center; min-height:var(--target); } .roster-tools { display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:space-between; gap:var(--s3) var(--s5); } .roster-tools .find { flex:1 1 420px; max-width:760px; min-width:0; } .roster-tools .find label { margin-top:0; } .roster-tools .find .hint { margin:var(--s1) 0 0; } .viewpick { display:flex; flex-direction:column; align-items:flex-start; gap:var(--s1); } .viewpick details.menu > summary { min-width:240px; justify-content:space-between; } .menu-list a[aria-current="true"] { font-weight:700; background:var(--brand-tint); } .chips { display:flex; flex-wrap:wrap; align-items:center; gap:var(--s2) var(--s3); margin:var(--s3) 0 0; } .chiplist { display:contents; list-style:none; } .chip { display:inline-flex; align-items:center; border-radius:999px; background:var(--brand-tint); } .chip .pill { background:transparent; font-size:14px; padding:4px 4px 4px 12px; } .chip-x { display:inline-flex; align-items:center; justify-content:center; min-width:var(--target); min-height:var(--target); color:var(--ink); text-decoration:none; font-size:20px; line-height:1; border-radius:999px; } .chip-x:hover { text-decoration:underline; } .chips > a { display:inline-flex; align-items:center; min-height:var(--target); } .selline { margin:var(--s3) 0 0; } .selline p { display:flex; flex-wrap:wrap; align-items:center; gap:var(--s2) var(--s3); margin:0; } .selline button { margin:0; } .listbar { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--s2) var(--s4); margin:var(--s3) 0 var(--s2); } .listbar .pager { margin:0; display:flex; flex-wrap:wrap; align-items:center; gap:var(--s2) var(--s3); } .legend-note { display:inline-block; padding:2px 8px; background:var(--warnbg); color:var(--ink); border-left:4px solid var(--gold); border-radius:4px; } .legend-dash { color:var(--muted); } .sortform { display:none; flex-wrap:wrap; align-items:flex-end; gap:var(--s2); } .sortform label { margin:0; flex:1 1 140px; } .sortform select { max-width:none; } .sortform button { margin:0; } .pagenav { display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:var(--s2) var(--s3); margin:var(--s3) 0; } .pagenav .button { margin:0; } /* the table: its own scroll region (header and identity stay visible), opaque pinned cells */ #roster-scroll { border:1px solid var(--line); border-radius:var(--radius); } #roster { border-collapse:separate; border-spacing:0; } #roster th, #roster td { border:0; border-bottom:1px solid var(--line); white-space:nowrap; background:#FFFFFF; } #roster td { height:56px; vertical-align:middle; } #roster th { vertical-align:middle; } #roster td[data-col=evaluation], #roster td[data-col=strengths], #roster td[data-col=opportunities], #roster td[data-col=best_suited_work], #roster td[data-col=latest_university], #roster td[data-col=event] { white-space:normal; min-width:200px; } #roster td[data-col=evaluation], #roster td[data-col=strengths], #roster td[data-col=opportunities], #roster td[data-col=best_suited_work] { min-width:320px; } #roster td:empty::before { content:"\2014"; content:"\2014" / ""; color:var(--muted); } /* blank = not supplied (legend) */ #roster tr.needs-review td { background:var(--warnbg); } #roster tr.needs-review td.selcell { border-left:4px solid var(--gold); } #roster tr.selected td { background:var(--brand-tint); } #roster tr.selected a { color:var(--ink); } /* navy on the ice selection tint (14.8:1); the underline marks the link */ #roster .selcell { width:56px; min-width:56px; padding:0 4px; text-align:center; } .selhit { display:inline-flex; align-items:center; justify-content:center; width:var(--target); height:var(--target); margin:0; cursor:pointer; } #roster .rowact { width:1%; white-space:nowrap; } #roster .rowact .viewlink { display:inline-flex; align-items:center; min-height:var(--target); padding:0 var(--s2); } #roster .rowact details.menu > summary { padding:8px 12px; } #roster .archived-note { white-space:normal; margin-top:var(--s1); font-size:13px; min-width:200px; } #roster td .clamp { display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; cursor:pointer; } #roster td .clamp.open { display:block; -webkit-line-clamp:unset; } #roster .emptyrow { text-align:center; color:var(--muted); white-space:normal; } .overview #roster td { white-space:normal; } .overview #roster .cand { min-width:220px; } .overview #roster td[data-label="Event"] { min-width:200px; } .overview #roster td[data-label="Education"] { min-width:240px; } .overview #roster td[data-label="Graduation"], .overview #roster td.revcell { white-space:nowrap; } .overview #roster td[data-label="Closest office"] { min-width:140px; } .overview #roster td.rowact { white-space:nowrap; } .overview #roster .candname { font-weight:700; } #roster .sub { display:block; color:var(--muted); font-size:13px; overflow-wrap:anywhere; } #roster .cardstatus { display:none; } #roster .num { font-variant-numeric:tabular-nums; } @media (min-width: 768px) { #roster-scroll { max-height:calc(100vh - 180px); overflow:auto; } #roster thead th { position:sticky; top:0; z-index:2; } #roster .pin1 { position:sticky; left:0; z-index:1; } .pinname #roster .pin2 { position:sticky; left:56px; z-index:1; border-right:1px solid var(--line); } #roster thead .pin1, .pinname #roster thead .pin2 { z-index:3; } } /* phone: default and overview become one card per profile (same table, same checkboxes); custom views stay a table */ @media (max-width: 767.98px) { .sortform { display:flex; width:100%; } .cards#roster-scroll { border:0; overflow:visible; } .cards #roster thead { display:none; } /* cards carry their own labels; the Sort control above replaces the header links */ .cards #roster, .cards #roster tbody, .cards #roster tr, .cards #roster td { display:block; width:100%; } .cards #roster tr { position:relative; border:1px solid var(--line); border-radius:var(--radius); margin:0 0 var(--s3); padding:var(--s3) var(--s3) var(--s2) 56px; background:#FFFFFF; } .cards #roster tr.needs-review { border-left:4px solid var(--gold); } .cards #roster tr.selected { border:2px solid var(--brand); } .cards #roster td { height:auto; border:0; padding:2px 0; background:transparent; white-space:normal; overflow-wrap:anywhere; min-width:0; } .cards #roster tr.needs-review td, .cards #roster tr.selected td { background:transparent; } .cards #roster tr td.selcell { position:absolute; left:6px; top:6px; width:var(--target); padding:0; border:0; } .cards #roster td[data-label] { position:relative; padding-left:calc(38% + 8px); min-height:28px; } .cards #roster td[data-label]::before { content:attr(data-label); position:absolute; left:0; top:4px; width:38%; color:var(--muted); font-size:13px; font-weight:700; line-height:1.3; } .cards #roster td[data-label]:empty::after { content:"\2014"; color:var(--muted); } .cards #roster td.cand, .cards #roster td[data-col=last_name] { padding-left:0; padding-bottom:var(--s2); } .cards #roster td.cand::before, .cards #roster td[data-col=last_name]::before { content:none; } .cards #roster td[data-col=last_name] { display:block; font-weight:700; font-size:18px; } .cards #roster .candname { font-size:18px; } .cards #roster .cardstatus { display:block; margin-top:var(--s1); } .cards.overview #roster td.revcell { display:none; } /* shown under the name on the card */ .cards #roster td.rowact { display:flex; flex-wrap:wrap; align-items:center; gap:var(--s2); width:100%; margin-top:var(--s2); padding-top:var(--s2); border-top:1px solid var(--line); } .cards #roster td.rowact .viewlink { padding-left:0; } .cards #roster .emptyrow { padding:var(--s4) 0; } .listbar .pager { width:100%; } } /* persistent selection bar: stays in view at the bottom while a selection exists; never covers the last row (it sits after the pager in the page flow) and keyboard focus scrolls above it */ .selbar { position:sticky; bottom:0; z-index:20; display:flex; flex-wrap:wrap; align-items:center; gap:var(--s2) var(--s4); margin:var(--s3) calc(-1 * var(--pad)) calc(-1 * var(--pad)); padding:var(--s3) var(--pad) max(var(--s3), env(safe-area-inset-bottom)); background:var(--brand-tint); border-top:1px solid var(--brand); } .selbar-count { margin:0; } .selbar-actions { display:flex; flex-wrap:wrap; align-items:center; gap:var(--s2); } .selbar-actions > button, .selbar-actions > .button { margin:0; } html:has(body.has-selbar) { scroll-padding-bottom:96px; } .narrow-only { display:none; } @media (max-width: 767.98px) { .wide-only { display:none; } li.narrow-only { display:block; } .selbar { display:grid; grid-template-columns:1fr auto; gap:var(--s2); } .selbar-actions { display:contents; } .selbar-actions > .button.primary { grid-column:2; grid-row:1; } .selbar-actions > button { grid-column:1; } .selbar-actions > details { grid-column:2; justify-self:stretch; } .selbar-actions > details > summary { width:100%; justify-content:center; } html:has(body.has-selbar) { scroll-padding-bottom:140px; } } /* Filters tab: 3 columns on wide screens, 2 on tablets, 1 on phones; Apply stays in view */ .filter-grid { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:0 var(--s5); } @media (max-width: 1279.98px) { .filter-grid { grid-template-columns:repeat(2, minmax(0, 1fr)); } } @media (max-width: 767.98px) { .filter-grid { grid-template-columns:1fr; } } .filter-grid label { min-width:0; } .filter-grid input, .filter-grid select { max-width:100%; } .filter-grid label.choice { align-self:end; } #tab-filters .formbar, #tab-book .formbar { position:sticky; bottom:0; z-index:2; background:#FFFFFF; border-top:1px solid var(--line); padding:var(--s2) 0; margin-top:var(--s3); display:flex; flex-wrap:wrap; gap:var(--s2); } #tab-filters .formbar > *, #tab-book .formbar > * { margin:0; } /* Columns tab: actions stay visible while ticking fields further down */ #colpanel .actions { position:sticky; top:0; z-index:3; background:#FFFFFF; margin:0 0 var(--s2); padding:var(--s1) 0; border-bottom:1px solid var(--line); } @media (min-width: 1024px) and (min-height: 560px) { #colpanel .actions { top:var(--topbar); } } #colorder { list-style:none; counter-reset:col; padding-left:0; max-width:520px; } #colorder li { display:flex; align-items:center; gap:6px; counter-increment:col; margin:4px 0; } #colorder li::before { content:counter(col) "."; min-width:2em; text-align:right; } #colorder .colname { flex:1 1 auto; min-width:0; overflow-wrap:anywhere; } #colorder li button { flex:none; margin:0; min-height:var(--target); min-width:var(--target); padding:4px 10px; } #saveview { display:flex; flex-wrap:wrap; align-items:flex-end; gap:var(--s2) var(--s3); border-top:1px solid var(--line); margin-top:var(--s4); padding-top:var(--s2); } #saveview label { flex:0 1 360px; margin-bottom:0; } #saveview input { max-width:100%; } #saveview button { margin:0; } .savedviews li { margin:var(--s1) 0; } .savedviews form button { margin-left:var(--s2); } /* Resume Book tab: details + listing (2/3), output summary (1/3, sticky while it fits) */ .book-head { display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:var(--s1) var(--s4); } .book-head p { margin:0 0 var(--s3); } .book-grid { display:grid; grid-template-columns:minmax(0, 1fr); gap:var(--gap); align-items:start; } @media (min-width: 1100px) { .book-grid { grid-template-columns:minmax(0, 2fr) minmax(320px, 380px); } .book-summary { position:sticky; top:calc(var(--topbar) + 16px); max-height:calc(100vh - var(--topbar) - 32px); overflow:auto; } #tab-book .formbar.narrow-only { display:none; } } @media (max-width: 1099.98px) { #tab-book .formbar.narrow-only { display:flex; } .wide-only-block { display:none; } } .book-form .card label > input, .book-form .card label > select { max-width:100%; } .book-form h3, .book-summary h3 { margin-top:0; font-size:18px; } .tocalways, .tocgroup fieldset { display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap:0 var(--s4); } .tocalways > legend { grid-column:1 / -1; } .tocalways label.choice, .tocgroup label.choice { margin-right:0; } .tocgroup { border-top:1px solid var(--line); } .tocgroup > summary { font-weight:700; } .tocgroup fieldset { border:0; padding:0 0 var(--s2); margin:0; } .tocsel { display:flex; flex-wrap:wrap; align-items:center; gap:var(--s2); margin:var(--s3) 0; } .chipbtn { margin:0; min-height:36px; padding:4px 12px; border-radius:999px; border-color:var(--brand); background:var(--brand-tint); font-weight:400; } @media (pointer: coarse) { .chipbtn { min-height:var(--target); } } .sumlist { display:grid; grid-template-columns:auto minmax(0, 1fr); gap:var(--s1) var(--s3); margin:0 0 var(--s3); } .sumlist dt { color:var(--muted); } .sumlist dd { margin:0; font-weight:700; overflow-wrap:anywhere; } .book-summary .outputs { padding-left:20px; margin:0 0 var(--s3); } .book-summary .outputs li { margin:0 0 var(--s2); } /* ==== Candidate workspace (roster_detail.html) and the shared page-image viewer (pageviewer.js) ==== */ .tab-select { display:none; } @media (max-width: 767.98px) { .tab-select:not([hidden]) { display:block; flex:1 1 100%; padding-bottom:var(--s3); } .tabs.has-select { display:none; } .tab-select select { max-width:none; } } .cand-head .actions { margin:0; } .cand-status { margin-bottom:var(--s4); } .cand-layout { display:grid; grid-template-columns:minmax(0, 1fr); gap:var(--gap); align-items:start; } .cand-layout > * { min-width:0; } .cand-preview { display:none; } .cand-layout.with-preview .cand-preview, .cand-layout:not(.js) .cand-preview { display:block; } @media (min-width: 1280px) { .cand-layout.with-preview { grid-template-columns:minmax(340px, 42fr) minmax(440px, 58fr); } .cand-layout.with-preview .cand-preview { position:sticky; top:calc(var(--topbar) + 16px); } .cand-preview .narrow-toggle { display:none; } } .preview-head { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--s2); } .preview-head h2 { margin:0; } .scorecards { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap:var(--s4); margin-bottom:var(--s4); } .scorecards .card { margin:0; } .scorecard h2 { font-size:16px; margin-bottom:var(--s2); } .bigscore { font-size:28px; line-height:1.2; margin:0 0 var(--s2); } .bigscore .missing { font-size:20px; } .bigscore .meta { font-size:16px; } .bigscore .pill { font-size:13px; vertical-align:middle; } .scorecard .banner { margin:var(--s2) 0; } .prose { max-width:80ch; } details.disclosure > summary { display:flex; flex-wrap:wrap; align-items:baseline; gap:var(--s2); list-style:none; } details.disclosure > summary::-webkit-details-marker { display:none; } details.disclosure > summary::before { content:"\25B8"; content:"\25B8" / ""; width:1em; } details.disclosure[open] > summary::before { content:"\25BE"; content:"\25BE" / ""; } details.disclosure > summary h2 { display:inline; margin:0; } details.disclosure[open] > summary { margin-bottom:var(--s3); } .grid3 { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap:var(--s3) var(--s5); } .grid3 h3 { margin-top:var(--s2); } .pageviewer { display:flex; flex-direction:column; gap:var(--s2); margin-top:var(--s3); } .pv-tools { display:flex; flex-wrap:wrap; align-items:center; gap:var(--s2); } .pv-tools button { margin:0; min-width:var(--target); } .pv-pos { padding:0 var(--s1); white-space:nowrap; } .pv-zoom { display:inline-flex; flex-wrap:wrap; align-items:center; gap:var(--s2); margin-left:auto; } .pv-level { min-width:6.5ch; text-align:center; font-variant-numeric:tabular-nums; } .pv-meta { margin:0; overflow-wrap:anywhere; } .pv-frame { overflow:auto; max-height:min(80vh, 1100px); border:1px solid var(--line); border-radius:var(--radius); background:#FFFFFF; } .pv-frame img { display:block; width:100%; max-width:100%; height:auto; margin:0 auto; } .pv-error { margin:0; } .pv-all ol { margin:0; padding-left:24px; } .pv-all li a { display:inline-block; padding:6px 0; overflow-wrap:anywhere; } @media (max-width: 767.98px) { .pv-zoom { margin-left:0; } .pv-frame { max-height:70vh; } } /* ==== Candidate Evaluation (evaluation*.html) ==== */ .autocard form p { margin:0 0 var(--s2); max-width:90ch; } .autocard form button { margin:0; } .autocard .banner { margin:var(--s3) 0 0; } details.howto { margin:0 0 var(--s4); } details.howto > .banner { margin:var(--s2) 0 0; } .dropzone { min-height:168px; } .dz-choose { color:var(--brand); text-decoration:underline; } .docfilter { display:flex; flex-wrap:wrap; gap:var(--s2); margin:0 0 var(--s3); } .docfilter button { margin:0; } .docfilter button[aria-pressed="true"] { background:var(--brand-tint); border-color:var(--brand); } .docgroup > h3 { margin-top:var(--s2); } .doctable td { white-space:normal; } .doctable .evdocname { min-width:280px; } .doctable .docfile, .doctable .docmethod { display:block; margin-top:var(--s1); overflow-wrap:anywhere; } .doctable .docerr { color:var(--ink); background:var(--badbg); border-left:4px solid var(--bad); padding:4px 8px; border-radius:4px; } .doctable .docact { white-space:nowrap; } .doctable .docact > a { display:inline-flex; align-items:center; min-height:var(--target); margin-right:var(--s2); } .doctable .docact form button, .doctable .docact > .button { margin:0 var(--s2) 0 0; } @media (max-width: 640px) { .doctable .docact { white-space:normal; display:flex; flex-wrap:wrap; align-items:center; gap:var(--s2); } } .subnav { margin-bottom:var(--s4); } .crit-more > summary { color:var(--brand); font-weight:700; } .matrix-edit .savebar { background:#FFFFFF; } /* ==== Human Review run workspace (review.html): issue list | source page | issue and correction ==== */ .review-counts { display:flex; flex-wrap:wrap; gap:var(--s3); margin:0; } .review-counts > div { border:1px solid var(--line); border-radius:var(--radius); padding:var(--s2) var(--s3); min-width:110px; } .review-counts dt { color:var(--muted); font-size:13px; } .review-counts dd { margin:0; } .tab-off { display:inline-flex; align-items:center; min-height:var(--target); padding:10px 16px; color:var(--muted); white-space:nowrap; } .review-ws { display:grid; grid-template-columns:minmax(0, 1fr); gap:var(--s4); align-items:start; } .review-ws > * { min-width:0; } .issue-nav { display:none; } .ws-js .issue-nav { display:block; } .issue-nav-title { font-size:16px; margin:0 0 var(--s2); } .issue-nav ol { list-style:none; margin:0; padding:0; border:1px solid var(--line); border-radius:var(--radius); max-height:70vh; overflow:auto; } .issue-nav li + li { border-top:1px solid var(--line); } .issue-nav a { display:flex; flex-direction:column; gap:2px; padding:var(--s2) var(--s3); color:var(--ink); text-decoration:none; border-left:4px solid transparent; min-height:var(--target); } .issue-nav a:hover .in-cand { text-decoration:underline; } .issue-nav a[aria-current="true"] { background:var(--brand-tint); border-left-color:var(--accent); } .issue-nav .in-cand { font-weight:700; overflow-wrap:anywhere; } .issue-nav .in-what { font-size:14px; } .issue-nav .in-meta { font-size:13px; color:var(--muted); } .issue-nav .in-meta .status { font-size:13px; color:var(--ink); } .issue { border-left-width:5px; } .issue.blocking { border-left-color:var(--bad); } .issue.warning { border-left-color:var(--gold); } .issue.info { border-left-color:var(--line); } .issue .issue-summary header { display:flex; flex-wrap:wrap; gap:var(--s2); align-items:center; margin-bottom:var(--s2); } .issue h2.q { flex-basis:100%; font-size:20px; margin:var(--s1) 0 0; } .issue h2.q:focus { outline:none; } .issue .pill.sev { background:var(--infobg); } .issue.blocking .pill.sev { background:var(--badbg); border:1px solid var(--bad); } .issue.warning .pill.sev { background:var(--warnbg); } .issue .kv { grid-template-columns:150px minmax(0, 1fr); } @media (max-width: 520px) { .issue .kv { grid-template-columns:1fr; } } .issue-evidence .evnote { margin:0 0 var(--s2); } .issue-evidence .pageviewer { margin-top:0; } .issue-evidence .pv-zoom { margin-left:0; } .issue-evidence .pv-tools .button { margin:0; } .issue-evidence a.pv-frame { display:block; } .issue-form form.act { display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap:var(--s2) var(--s4); align-items:end; border-top:1px solid var(--line); margin-top:var(--s3); padding-top:var(--s2); } .issue-form form.act label { margin:0; } .issue-form form.act input, .issue-form form.act select { max-width:none; } .issue-form .form-error, .issue-form .formbtns { grid-column:1 / -1; margin:0; } .issue-form label.teach, .issue-form .hint { grid-column:1 / -1; margin:0; } .issue-form .hint { font-size:.9rem; } .archived-note { margin:var(--s2) 0 0; } .issue-form .formbtns { display:flex; flex-wrap:wrap; gap:var(--s2); } .issue-form .formbtns button, .issue-form form.act > button { margin:0; justify-self:start; } .issue-form .form-error { background:var(--badbg); border-left:4px solid var(--bad); padding:var(--s2) var(--s3); border-radius:var(--radius); } .issue { display:grid; grid-template-columns:minmax(0, 1fr); grid-template-areas:"sum" "ev" "form"; gap:var(--s4); } .issue > .issue-summary { grid-area:sum; min-width:0; } .issue > .issue-evidence { grid-area:ev; min-width:0; } .issue > .issue-form { grid-area:form; min-width:0; } /* without JavaScript (every card shown): page beside the issue from tablet width, like before */ @media (min-width: 900px) { .review-ws:not(.ws-js) .issue { grid-template-columns:minmax(0, 1fr) 280px; grid-template-areas:"sum ev" "form form"; } } @media (min-width: 1280px) { .ws-js .issue { grid-template-columns:minmax(360px, 1fr) 344px; grid-template-areas:"ev sum" "ev form"; } .ws-js .issue-nav ol { display:flex; overflow-x:auto; max-height:none; } .ws-js .issue-nav li { flex:0 0 240px; } .ws-js .issue-nav li + li { border-top:0; border-left:1px solid var(--line); } } @media (min-width: 1440px) { .review-ws.ws-js { grid-template-columns:240px minmax(0, 1fr); } .ws-js .issue-nav { position:sticky; top:calc(var(--topbar) + 16px); } .ws-js .issue-nav ol { display:block; max-height:calc(100vh - var(--topbar) - 80px); } .ws-js .issue-nav li + li { border-left:0; border-top:1px solid var(--line); } } @media (max-width: 1279.98px) { .ws-js .issue-nav ol { max-height:240px; } } .rq-table .sub { display:block; color:var(--muted); font-size:13px; overflow-wrap:anywhere; } .rq-table td { white-space:normal; } .rq-table td:last-child .button { margin:0; white-space:nowrap; } /* Needs Review "By upload": each upload's way to its thumbnail overview and bulk Dismiss (D-050, 2026-10-13) */ .rq-runs h2 { margin-top:0; } .rq-runs > p { max-width:80ch; } .rq-runs ul.plain li { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--s2) var(--s4); padding:var(--s3) 0; } .rq-runs ul.plain li:last-child { border-bottom:0; } .rq-run-text { display:flex; flex-direction:column; gap:2px; flex:1 1 320px; min-width:0; overflow-wrap:anywhere; } .rq-run-acts { display:flex; flex-wrap:wrap; gap:var(--s2); } .rq-run-acts form { margin:0; } .rq-run-acts .button, .rq-run-acts button { margin:0; } /* ==== Process Resumes (home.html), runs, processing and results ==== */ form.steps { max-width:820px; } fieldset.step { border:0; border-radius:0; padding:0 0 var(--s2); margin:0; } fieldset.step + fieldset.step { margin-top:var(--s4); } fieldset.step > legend { display:flex; align-items:center; gap:var(--s3); font-size:18px; padding:0; margin-bottom:var(--s2); } .stepnum { display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:50%; background:var(--brand); color:#FFFFFF; font-size:16px; } .steplabel { margin:var(--s2) 0 0; font-weight:700; } .filelist { margin:var(--s2) 0 0; padding-left:20px; overflow-wrap:anywhere; } fieldset.step .actions { margin-top:0; } .runfacts { margin:0 0 var(--s1); overflow-wrap:anywhere; } .run-card h2 { margin-bottom:var(--s1); overflow-wrap:anywhere; } .runpick label { display:block; font-weight:700; margin-bottom:var(--s1); } .runpick-row { display:flex; flex-wrap:wrap; gap:var(--s2); align-items:center; } .runpick-row select { flex:1 1 320px; min-width:0; max-width:100%; } .runpick-row button { margin:0; } .del-list { margin:var(--s2) 0 0; max-height:320px; overflow:auto; } .wrap-anywhere li, .wrap-anywhere p { overflow-wrap:anywhere; } .delform .formbtns { display:flex; flex-wrap:wrap; gap:var(--s2); flex-basis:100%; } .delform .formbtns > * { margin:0; } .delform h2 { flex-basis:100%; margin:0; } .run-delete { margin-top:var(--s3); } /* ==== Map (map.html): phones switch between the map and the matching list ==== */ .viewswitch { display:none; } @media (max-width: 767.98px) { .viewswitch:not([hidden]) { display:flex; gap:var(--s2); margin:0 0 var(--s3); } .viewswitch button { flex:1 1 0; margin:0; } .viewswitch button[aria-pressed="true"] { background:var(--brand-tint); border-color:var(--brand); } .view-off { display:none; } } main > h1 + p.meta, main > h1 + p.hint, main > nav.crumbs + h1 { margin-top:0; } main > p.crumbs + h1, main > p.crumbs + header.page-head { margin-top:0; } .autocard .status { white-space:normal; } .metrics { margin-bottom:var(--s4); } /* Human Review: outlines around the printed evidence, drawn over the page image (D-046); the page is never changed */ .pv-canvas { position:relative; display:block; width:100%; margin:0 auto; } .pv-canvas > img { display:block; width:100%; max-width:none; height:auto; } .pv-marks { position:absolute; inset:0; pointer-events:none; } .pv-mark { position:absolute; outline:3px solid var(--accent); outline-offset:2px; border-radius:2px; } .evmark { margin:0; } .evmark:empty { display:none; } .issue-evidence .evtoggle { margin:0; } /* ==== Needs Review overview (owner, 2026-10-12): every item as a page thumbnail with Edit / Dismiss; tick several to dismiss them together (sticky selection bar). The thumbnail is a small copy; the page itself is never changed. ==== */ .reviewer-line { margin:0 0 var(--s2); } .reviewer-line button.link { padding:0 4px; min-height:0; } .reviewer-edit { display:flex; flex-wrap:wrap; align-items:flex-end; gap:var(--s2) var(--s3); margin:0 0 var(--s3); } .reviewer-edit label { margin:0; flex:1 1 260px; max-width:480px; } .reviewer-edit .formbtns { display:flex; flex-wrap:wrap; gap:var(--s2); } .reviewer-edit .formbtns button { margin:0; } .ov-head h2 { margin:0 0 var(--s1); } .ov-head p { margin:0 0 var(--s3); max-width:80ch; } .ov-actions { margin:0 0 var(--s3); } .ov-actions button { margin:0; } .pgrid { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 210px), 1fr)); gap:var(--s3); } .ptile { display:flex; flex-direction:column; min-width:0; border:1px solid var(--line); border-radius:var(--radius); background:#FFFFFF; overflow:hidden; } .ptile.sev-blocking { border-top:4px solid var(--bad); } .ptile.sev-warning { border-top:4px solid var(--gold); } .ptile.is-done { border-top-color:var(--line); } .ptile-img { display:flex; align-items:center; justify-content:center; aspect-ratio:17 / 22; background:var(--infobg); border-bottom:1px solid var(--line); overflow:hidden; } .ptile-img img { display:block; width:100%; height:100%; object-fit:contain; background:#FFFFFF; } .ptile-noimg { color:var(--muted); font-size:14px; padding:var(--s3); text-align:center; } .ptile-text { display:flex; flex-direction:column; gap:2px; padding:var(--s2) var(--s3) 0; min-width:0; overflow-wrap:anywhere; } .ptile-text .meta { font-size:13px; } .ptile-acts { display:flex; flex-wrap:wrap; align-items:center; gap:var(--s2); padding:var(--s2) var(--s3) var(--s3); margin-top:auto; } .ptile-acts .button, .ptile-acts button { margin:0; } .ptile-acts label.choice { margin:0; flex-basis:100%; } .tile-dismiss { display:contents; } .tile-dismiss .form-error { flex-basis:100%; margin:0; } .ov-bar { margin-top:var(--s4); } .ov-back { margin:0 0 var(--s2); } .pgrid-confirm { grid-template-columns:repeat(auto-fill, minmax(min(100%, 150px), 1fr)); margin-bottom:var(--s4); } .dismiss-confirm .card { max-width:820px; } .dismiss-confirm .formbtns { display:flex; flex-wrap:wrap; gap:var(--s2); } .dismiss-confirm .formbtns > * { margin:0; } /* ==== Sign-in (D-051): the page has no sidebar or search; Sign out sits where "Local workspace" was ==== */ .shell.bare { display:block; } .shell.bare .content { margin:0 auto; max-width:560px; } form.signin { display:flex; flex-direction:column; align-items:stretch; gap:var(--s3); max-width:480px; } form.signin input[type=password] { width:100%; max-width:none; } form.signin label, form.signin button { margin:0; } form.signin button { align-self:flex-start; } .topbar .signout { margin:0 0 0 auto; } .topbar .signout button { margin:0; } /* ==== Correct a field on the candidate's profile (D-052): Edit links beside values; paste / drop screenshots ==== */ .editlink { font-size:14px; margin-left:var(--s2); white-space:nowrap; } .correctform { display:flex; flex-direction:column; gap:var(--s3); max-width:640px; } .correctform label, .correctform .formbtns, .correctform p { margin:0; } .correctform input:not([type=checkbox]):not([type=file]), .correctform select, .correctform textarea { width:100%; max-width:none; } .correctform textarea { min-height:88px; font:inherit; font-weight:400; } .correctform .formbtns button { margin:0; } .shots { display:flex; flex-direction:column; gap:var(--s2); } .pastezone { border:2px dashed var(--line); border-radius:var(--radius); padding:var(--s4); text-align:center; color:var(--ink); background:var(--infobg); cursor:copy; } .pastezone:focus-visible, .pastezone.over { border-color:var(--brand); background:var(--brand-tint); } .shotlist { list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:var(--s3); } .shotlist li { display:flex; flex-direction:column; align-items:flex-start; gap:var(--s1); max-width:180px; overflow-wrap:anywhere; font-size:14px; } .shotlist img, .shotthumbs img { display:block; max-width:160px; max-height:120px; border:1px solid var(--line); border-radius:4px; } .shotlist button { margin:0; } .corrlist li + li { margin-top:var(--s3); } .shotthumbs { display:flex; flex-wrap:wrap; gap:var(--s2); margin-top:var(--s1); } /* ==== Roster hover preview (hoverpreview.js): the candidate's pages beside the name; a fixed layer that never covers the name, fits the window, and only appears with a mouse on a wide screen ==== */ .hoverpreview { position:fixed; z-index:40; background:#FFFFFF; border:1px solid var(--ink); border-radius:var(--radius); padding:var(--s3); display:flex; flex-direction:column; gap:var(--s2); max-height:calc(100vh - 16px); overflow:hidden; } .hoverpreview[hidden] { display:none; } .hp-head { display:flex; flex-wrap:wrap; align-items:baseline; gap:var(--s1) var(--s3); } .hp-name { font-size:18px; } .hoverpreview p { margin:0; } .hp-frame { min-height:0; flex:1 1 auto; overflow:hidden; border:1px solid var(--line); border-radius:4px; } .hp-page { display:block; width:100%; height:auto; max-height:calc(100vh - 220px); object-fit:contain; object-position:top; } .hp-strip { display:flex; gap:var(--s2); overflow-x:auto; } .hp-thumb { min-height:0; padding:2px; margin:0; border:2px solid var(--line); border-radius:4px; background:#FFFFFF; flex:none; } .hp-thumb[aria-pressed="true"] { border-color:var(--brand); } .hp-thumb img { display:block; width:44px; height:57px; object-fit:cover; object-position:top; } .hp-foot a { white-space:nowrap; } /* ==== Lesson draft (D-055): the owner checks and edits Claude's draft before keeping or proposing it ==== */ .draftform { display:flex; flex-direction:column; gap:var(--s3); max-width:720px; } .draftform label, .draftform .formbtns { margin:0; } /* Reading-rule text exactly as it is added to every future review (D-056): kept as written, line breaks shown */ .ruletext { white-space:pre-line; margin:0 0 var(--s3); padding:var(--s2) var(--s3); border-left:4px solid var(--line); background:var(--infobg); border-radius:0 var(--radius) var(--radius) 0; max-width:72ch; } .draftform input, .draftform select, .draftform textarea { width:100%; max-width:none; } .draftform input[type=checkbox], .draftform input[type=radio] { width:auto; flex:none; } .draftform textarea { font:inherit; font-weight:400; } .draftform .formbtns { display:flex; flex-wrap:wrap; gap:var(--s2); } .draftform .formbtns button { margin:0; } /* ==== Windows High Contrast (forced colours): Windows replaces every colour, so state must not depend on fills or on "transparent" borders (they show as lines on every item). Only system colour keywords here, never a palette. ==== */ @media (forced-colors: active) { .sidenav li a, .issue-nav a { border-left-color:Canvas; } .sidenav li a[aria-current="page"], .issue-nav a[aria-current="true"] { border-left-color:Highlight; outline:2px solid Highlight; outline-offset:-2px; } .tabs a { border-bottom-color:Canvas; } .tabs a[aria-selected="true"], .tabs a[aria-current="page"] { border-bottom-color:Highlight; } .docfilter button[aria-pressed="true"], .viewswitch button[aria-pressed="true"], .menu-list a[aria-current="true"] { outline:3px solid Highlight; outline-offset:-3px; } .status::before { forced-color-adjust:none; background:CanvasText; } .pill, .chip { border:1px solid CanvasText; } #roster tr.selected td.selcell { outline:3px solid Highlight; outline-offset:-3px; } .cards #roster tr.selected { outline:3px solid Highlight; } .pv-mark { outline-color:Highlight; } .ptile.sev-blocking, .ptile.sev-warning { border-top-color:CanvasText; } .pastezone { border-color:CanvasText; } .hp-thumb[aria-pressed="true"] { outline:3px solid Highlight; } .sortitem.dragging { outline:3px solid Highlight; } .sortplaceholder, .dragghost { border-color:Highlight; } .skip:focus, :focus-visible { outline-color:Highlight; } } /* ==== Past-candidate impact scan (D-057): tick candidates, preview (paid), then Before / After per candidate ==== */ .impactgo { display:flex; flex-direction:column; gap:var(--s2); margin-top:var(--s3); padding-top:var(--s3); border-top:1px solid var(--line); } .impactgo .formbtns, section[id^="ba-"] > .formbtns { display:flex; flex-wrap:wrap; gap:var(--s2) var(--s4); align-items:flex-end; } section[id^="ba-"] > .formbtns form { margin:0; } section[id^="ba-"] > .formbtns form.act { border-top:0; margin-top:0; padding-top:0; } .impacttable td button.link { padding:4px 0; display:block; } /* ==== Email-in (D-058): emailed uploads wait for the owner's event answer on the front page ==== */ /* A gentle highlight that pulses 3 times (under 5 s, slower than 3 flashes a second: WCAG 2.2.2 / 2.3.1); none when the system asks for reduced motion. Colours: the gold of the warning banners. */ .attention { border:2px solid var(--gold); border-left-width:6px; animation:rbs-attention 1.6s ease-in-out 0s 3; } @keyframes rbs-attention { 0%, 100% { box-shadow:0 0 0 0 transparent; } 50% { box-shadow:0 0 0 6px var(--gold); } } @media (prefers-reduced-motion: reduce) { .attention { animation:none; } } .emailq { border-top:1px solid var(--line); padding:var(--s3) 0; } .emailq:first-of-type { border-top:0; } .emailq-head { margin:0 0 var(--s2); overflow-wrap:anywhere; } .emailq-yes { display:flex; flex-wrap:wrap; gap:var(--s2) var(--s4); align-items:center; margin:0 0 var(--s2); } .emailq-yes p { margin:0; flex:1 1 280px; } .emailq-form { display:flex; flex-direction:column; gap:var(--s2); max-width:560px; } .emailq-form label { margin:0; } .emailq-form input { width:100%; max-width:none; } .emailq-form .formbtns { display:flex; flex-wrap:wrap; gap:var(--s2); align-items:center; } .emailq-text { margin:0 0 var(--s3); } .emailq-text .ruletext { max-height:20em; overflow:auto; margin:var(--s2) 0 0; overflow-wrap:anywhere; } label.choice.emailq-tick { flex:1 1 100%; margin:0; align-items:flex-start; } label.choice.emailq-tick input { margin-top:3px; flex:none; } .emailnudge a { color:inherit; } /* ==== Roster emails (D-064): templates with a sortable item list, previews of every email ==== */ .etgrid { display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:var(--gap); align-items:start; } .etgrid > .card { margin:0; } @media (max-width: 1279.98px) { .etgrid { grid-template-columns:minmax(0, 1fr); } .etgrid > .card + .card { margin-top:0; } } .etform input:not([type]), .etform input[type=text] { max-width:none; } /* Sortable list: drag by the handle (mouse, pen or touch), arrow keys on the focused handle, or Up / Down buttons */ .sortlist { list-style:none; margin:0 0 var(--s2); padding:0; } .sortitem { display:flex; flex-wrap:wrap; align-items:center; gap:var(--s2); margin:0 0 var(--s2); padding:var(--s2); border:1px solid var(--line); border-radius:var(--radius); background:var(--card); } .sortitem.dragging { border-color:var(--brand); background:var(--brand-tint); } .draghandle { flex:none; margin:0; min-width:var(--target); padding:4px 8px; font-size:22px; line-height:1; cursor:grab; touch-action:none; user-select:none; } .sortitem.dragging .draghandle { cursor:grabbing; } .sortnum { flex:none; min-width:2em; text-align:right; color:var(--muted); } .sortbody { flex:1 1 120px; min-width:0; display:flex; flex-direction:column; gap:var(--s1); overflow-wrap:anywhere; } .sortlabel { font-weight:700; } .sortlabel .meta { font-weight:400; } .sortitem > textarea { flex:1 1 100%; max-width:none; min-height:72px; margin:0; } .sortbtns { flex:none; display:flex; flex-wrap:wrap; gap:var(--s1); margin-left:auto; } .sortbtns button { margin:0; min-width:var(--target); padding:4px 10px; } .sortbtns button[data-move=up], .sortbtns button[data-move=down] { font-size:20px; line-height:1; padding:4px 8px; } .etadd { display:flex; flex-wrap:wrap; gap:var(--s2) var(--s3); align-items:flex-end; } .etadd label { margin:var(--s2) 0 0; flex:1 1 240px; min-width:0; } .etadd select { max-width:none; } .etadd .actions { margin:0; } .etfields { margin:var(--s3) 0; } .etsample { display:flex; flex-wrap:wrap; gap:var(--s2) var(--s3); align-items:flex-end; margin:0 0 var(--s3); } .etsample label { margin:0; flex:1 1 220px; min-width:0; } .etsample select { max-width:none; } .etsample button { margin:0; } .emailframe { display:block; width:100%; height:640px; margin:var(--s3) 0 0; border:1px solid var(--line); border-radius:var(--radius); background:#FFFFFF; } @media (max-width: 767.98px) { .emailframe { height:480px; } } details.emailone { border-top:1px solid var(--line); padding:var(--s2) 0; } details.emailone > summary { overflow-wrap:anywhere; } /* Drag with the mouse anywhere on a card (fine pointers only; touch drags the handle so the page still scrolls) */ @media (hover: hover) and (pointer: fine) { .sortlist.sortable-on > .sortitem { cursor:grab; } .sortlist.sortable-on > .sortitem :is(button, textarea, input, select, a) { cursor:auto; } .sortlist.sortable-on > .sortitem .draghandle { cursor:grab; } .etpalette .fieldchip { cursor:grab; } } .sortlist.sortable-on > .sortitem.dragging, body.dragging-field, body.dragging-field * { cursor:grabbing; user-select:none; } .sortplaceholder { list-style:none; margin:0 0 var(--s2); padding:var(--s3); border:2px dashed var(--brand); border-radius:var(--radius); color:var(--brand); font-weight:700; text-align:center; background:var(--card); } /* "Add to the email": fields to drag into the list (or click to add at the end) */ .etpalette { margin-top:var(--s3); padding-top:var(--s2); border-top:1px solid var(--line); } .etpalette h3 { margin:var(--s2) 0 0; } .etpalette .chips { margin:var(--s2) 0; gap:var(--s2); } .palgroup { margin:var(--s1) 0; } .palgroup > summary { min-height:var(--target); display:flex; align-items:center; font-weight:700; cursor:pointer; } .fieldchip { margin:0; min-height:var(--target); padding:6px 14px; border-radius:999px; border-color:var(--brand); background:var(--card); color:var(--ink); font-weight:400; touch-action:manipulation; } .fieldchip:hover { background:var(--brand-tint); } .fieldchip.dragghost { position:fixed; z-index:1000; pointer-events:none; background:var(--brand-tint); font-weight:700; } .pvstatus { margin:0 0 var(--s2); } /* The preview stays in view next to a long list of items (wide, tall windows only) */ @media (min-width: 1280px) and (min-height: 760px) { .etpreview { position:sticky; top:calc(var(--topbar) + var(--s4)); max-height:calc(100vh - var(--topbar) - var(--s5)); overflow:auto; } .etpreview .emailframe { height:calc(100vh - var(--topbar) - 330px); min-height:360px; } } /* ==== School finder (D-068): approved schools matching every typed word, listed under the text box ==== */ .schoolfind { list-style:none; margin:var(--s1) 0 0; padding:var(--s1) 0; max-width:640px; max-height:280px; overflow:auto; border:1px solid var(--muted); border-radius:var(--radius); background:var(--card); font-weight:400; } .schoolfind li { display:flex; align-items:center; min-height:var(--target); padding:var(--s2) var(--s3); cursor:pointer; overflow-wrap:anywhere; } .schoolfind li:hover, .schoolfind li[aria-selected="true"] { background:var(--brand-tint); text-decoration:underline; } .schoolfind li[aria-selected="true"] { outline:2px solid var(--focus); outline-offset:-2px; } /* ==== Review selection (D-069): charts of a chosen set. Categorical order blue / teal / purple (validated for colour-blind separation; teal is below 3:1, so every bar carries its number and every chart its table). Text keeps the text tokens; the colour is only on the mark. ==== */ .bar.c1 { background:var(--rs-blue); } .bar.c2 { background:var(--rs-teal); } .bar.c3 { background:var(--rs-purple); } .stackbar { display:flex; gap:2px; height:20px; margin:var(--s3) 0; } .stackbar .seg { min-width:4px; border-radius:4px; } .seg.c1, .swatch.c1 { background:var(--rs-blue); } .seg.c2, .swatch.c2 { background:var(--rs-teal); } .seg.c3, .swatch.c3 { background:var(--rs-purple); } .seg.muted, .swatch.muted { background:var(--line); } .legend { list-style:none; margin:0 0 var(--s3); padding:0; display:flex; flex-wrap:wrap; gap:var(--s2) var(--s4); } .legend li { display:flex; align-items:center; gap:var(--s2); } .swatch { display:inline-block; width:12px; height:12px; border-radius:3px; } .tile-text { font-size:1.15rem; line-height:1.3; overflow-wrap:anywhere; } .rv-table summary { cursor:pointer; color:var(--brand); min-height:var(--target); display:flex; align-items:center; } .rv-table table { margin-top:var(--s2); } .rv-table .num { text-align:right; } .rv-narrow { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--s2) var(--s4); } .rv-narrow button { margin:0; } .rv-map .map-filters { border:0; padding:0; } @media (forced-colors: active) { .bar.c1, .bar.c2, .bar.c3, .stackbar .seg, .swatch { background:CanvasText; } } .rv-map .maplist, .rv-map .viewswitch { display:none; } /* the Candidates table below is the list on this page */ /* ==== Compare (D-070): candidates in columns, row labels stay visible while scrolling sideways ==== */ .cmp-tools { display:flex; flex-wrap:wrap; align-items:center; gap:var(--s2) var(--s4); margin:0 0 var(--s3); } .cmp-tools .choice { margin:0; } .cmp-table { table-layout:fixed; width:max(100%, calc(200px + var(--cmp-cols) * 240px)); } .cmp-table th[scope=row], .cmp-corner { position:sticky; left:0; z-index:1; background:var(--card); width:200px; text-align:left; vertical-align:top; font-weight:700; } .cmp-table td { vertical-align:top; overflow-wrap:anywhere; } .cmp-head { vertical-align:bottom; text-align:left; } .cmp-thumb { display:block; width:120px; aspect-ratio:17 / 22; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:#FFFFFF; margin-bottom:var(--s2); } .cmp-thumb img { display:block; width:100%; height:100%; object-fit:contain; } .cmp-name { display:block; font-size:1.05rem; } .cmp-group th { background:var(--bg); text-align:left; font-size:.85rem; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); } .cmp-table tr.differs th[scope=row] { box-shadow:inset 4px 0 0 var(--accent); } .cmp-pill { margin-left:var(--s1); font-size:.75rem; } .cmp-list { margin:0; padding-left:18px; } .cmp-list li { margin:2px 0; } /* ---- Split overview (owner, 2026-10-14): every page in book order; a band starts each candidate ---- */ .sp-grid { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:var(--s3) var(--s2); } .sp-tile { display:flex; flex-direction:column; gap:var(--s1); min-width:0; border-top:4px solid var(--sp-c, var(--line)); padding-top:var(--s1); } .sp-tile[data-c="1"] { --sp-c:var(--rs-blue); } .sp-tile[data-c="2"] { --sp-c:var(--rs-purple); } .sp-tile[data-c="3"] { --sp-c:var(--rs-teal); } .sp-tile[data-c="4"] { --sp-c:var(--rs-action); } .sp-tile[data-c="5"] { --sp-c:var(--rs-teal-text); } .sp-tile[data-c="0"] { --sp-c:var(--rs-navy); } .sp-tile.sp-none { --sp-c:var(--line); } .sp-band { font-size:13px; font-weight:700; line-height:1.3; min-height:2.6em; overflow-wrap:anywhere; color:var(--ink); } .sp-tile.sp-start { border-left:3px solid var(--sp-c); padding-left:var(--s2); } .sp-tile img { display:block; width:100%; height:auto; aspect-ratio:8.5/11; object-fit:contain; background:#FFFFFF; border:1px solid var(--line); border-radius:4px; } .sp-tile.sp-flag img { outline:3px solid var(--bad); outline-offset:1px; } .sp-flag-key { outline:2px solid var(--bad); outline-offset:1px; padding:0 4px; border-radius:2px; } .sp-meta { font-size:13px; color:var(--muted); overflow-wrap:anywhere; } /* ---- Toast message with Undo (v1.3 item 3): bottom-left, above the selection bar, never covers the page actions ---- */ .toast { position:fixed; left:calc(var(--sidebar) + var(--pad)); bottom:calc(var(--s5) + 64px); z-index:60; display:flex; align-items:center; gap:var(--s3); max-width:min(560px, calc(100vw - 2 * var(--pad))); padding:var(--s3) var(--s4); background:var(--rs-navy); color:#FFFFFF; border-radius:var(--radius); box-shadow:0 4px 16px rgba(6, 31, 63, .25); font-size:15px; } .toast[hidden] { display:none; } .toast button { min-height:36px; background:#FFFFFF; color:var(--rs-navy); border:0; font-weight:700; } .toast button.link { background:transparent; color:#FFFFFF; text-decoration:underline; font-weight:400; } @media (max-width: 1023.98px) { .toast { left:var(--pad); } } /* ---- Upload form: each book with its own event (owner, 2026-10-14) ---- */ .perfile { margin-top:var(--s3); } .perfile-table { width:100%; } .perfile-table td { vertical-align:middle; } .perfile-table select, .perfile-table input { width:100%; min-width:120px; } .perfile-table td:first-child { overflow-wrap:anywhere; font-weight:700; } .perfile-table input.is-off { background:var(--bg); color:var(--muted); } /* ==== Results follow-up (owner, 2026-10-14). Candidate data preview: each candidate's split pages and saved file name beside the data (D-081); Check candidates: the split pages large beside the data and the correction form; Fix school and major names: one choice per printed name (D-080). ==== */ .cand-table td, .gates td { vertical-align:top; } .cand-table .button { min-height:36px; padding:4px 12px; font-size:14px; margin-top:var(--s1); } .split-cell { min-width:150px; } .split-thumbs { display:flex; flex-wrap:wrap; gap:var(--s1); margin-bottom:var(--s1); } .split-thumbs a { display:block; border-radius:4px; } .split-thumbs img { display:block; width:56px; height:72px; object-fit:cover; object-position:top; background:#FFFFFF; border:1px solid var(--line); border-radius:4px; } .saved-as { min-width:220px; max-width:340px; overflow-wrap:anywhere; } .issue-links { min-width:120px; } .fix-callout { display:flex; flex-wrap:wrap; align-items:center; gap:var(--s2) var(--s3); } .fix-callout .button { margin-left:auto; } .check-nav { display:flex; flex-wrap:wrap; gap:var(--s2); } .check-layout { display:grid; grid-template-columns:minmax(0, 1.25fr) minmax(0, 1fr); gap:var(--gap); align-items:start; } .check-side { display:grid; gap:var(--gap); min-width:0; } .check-side > .card, .check-pages { margin:0; } .check-page { margin:0 0 var(--s4); } .check-page figcaption { margin-bottom:var(--s1); } .check-page img { display:block; width:100%; height:auto; background:#FFFFFF; border:1px solid var(--line); border-radius:4px; } .filename { font-weight:700; overflow-wrap:anywhere; margin:0 0 var(--s2); } .check-kv dd { overflow-wrap:anywhere; } .fixform fieldset { border:0; padding:0; margin:0 0 var(--s3); min-width:0; } .fixform legend { font-weight:700; padding:0; margin-bottom:var(--s2); } .fixform label.choice { display:flex; align-items:flex-start; margin:var(--s2) 0; } .fixform label.choice input { margin-top:4px; } .fix-people { overflow-wrap:anywhere; } @media (max-width: 1023.98px) { .check-layout { grid-template-columns:1fr; } } @media (forced-colors: active) { .split-thumbs img, .check-page img { border-color:CanvasText; } } .timing tr.total td { border-top:2px solid var(--line); } /* ==== Go to (Ctrl+K; PLATFORM_STRUCTURE_PLAN v1.3 item 10): an extra door to every page and action. ==== */ .gobtn { flex:none; margin:0; white-space:nowrap; } .gokey { color:var(--muted); font-weight:400; font-size:13px; margin-left:var(--s2); } @media (max-width: 767.98px) { .gokey { display:none; } } .go-dialog { position:fixed; inset:0; z-index:60; background:rgba(6, 31, 63, .35); display:flex; justify-content:center; align-items:flex-start; padding:12vh var(--s4) var(--s4); } .go-dialog[hidden] { display:none; } .go-panel { width:min(640px, 100%); background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:0 12px 32px rgba(6, 31, 63, .25); padding:var(--s3); } .go-panel input { width:100%; max-width:none; margin:0; font-size:18px; } #go-results { list-style:none; margin:var(--s2) 0 0; padding:0; max-height:55vh; overflow-y:auto; } #go-results li a { display:flex; justify-content:space-between; gap:var(--s3); align-items:center; min-height:var(--target); padding:var(--s2) var(--s3); border-radius:var(--radius); color:var(--ink); text-decoration:none; } #go-results li[aria-selected="true"] a, #go-results li a:hover { background:var(--brand-tint); } #go-results li[aria-selected="true"] a { outline:2px solid var(--focus); outline-offset:-2px; } .go-group-tag { color:var(--muted); font-size:13px; flex:none; } .go-none { padding:var(--s3); color:var(--muted); } .go-hint { margin:var(--s2) 0 0; } .go-list { columns:2 280px; margin:0; padding-left:var(--s5); } .go-list li { margin:0 0 var(--s2); break-inside:avoid; } .go-filter { max-width:640px; margin-bottom:var(--s4); } @media (forced-colors: active) { #go-results li[aria-selected="true"] a { outline:3px solid Highlight; } } .only-sel { display:flex; flex-wrap:wrap; align-items:center; gap:var(--s2) var(--s3); } .only-sel .button { margin:0 0 0 auto; } /* ==== Roster live search (owner, 2026-10-14): the count bubble beside "Find candidate details" follows every keystroke. ==== */ .countpill { display:inline-block; min-width:2.2em; margin-left:var(--s2); padding:1px 10px; border-radius:999px; text-align:center; background:var(--brand); color:#FFFFFF; font-size:14px; font-weight:700; font-variant-numeric:tabular-nums; vertical-align:1px; transition:opacity .15s; } .countpill.busy { opacity:.6; } .countpill.stale { background:var(--muted); } @media (prefers-reduced-motion: reduce) { .countpill { transition:none; } } @media (forced-colors: active) { .countpill { border:1px solid CanvasText; } }