@import url("https://fonts.googleapis.com/css2?family=Kalam:wght@700&family=Roboto+Mono:wght@400;500&family=Source+Sans+3:ital,wght@0,400;0,600;0,700;1,400&display=swap");
/* Step 2 CK Edition 2 "Workroom" (Claude Opus 5.5). Generated by ~/app-redesign/work/step2/build.sh: edit skin/site.css, not this file. */
@layer skeleton, workroom;
@layer skeleton {
/* Step 2 CK Qbank design system.
   One stylesheet, every page: tokens, type, header, buttons, cards, chips, tables.
   Light is the default; [data-theme="dark"] on <html> flips the palette. */
:root[data-theme="dark"]{
  --bg:var(--paper); --panel:var(--paper); --panel2:var(--ink-3); --panel3:var(--ink-3);
  --line:var(--ink-3); --line2:var(--ink-3);
  --text:var(--ink); --muted:var(--ink); --dim:var(--ink-2); --inverse:var(--paper);
  --primary:#7b98ff; --primary-ink:#9db1ff; --primary-soft:#1d2a4d; --primary-line:#33488a;
  --accent-soft:color-mix(in srgb,var(--accent) 22%,#161c25); --accent-line:color-mix(in srgb,var(--accent) 45%,#161c25);
  --ok:#4ade80; --ok-soft:var(--ink-3); --ok-line:#256b3f;
  --no:#f87171; --no-soft:var(--ink-3); --no-line:#7a2e2e;
  --warn:#fbbf24; --warn-soft:#3a2b0b; --warn-line:#7a5a14;
  --flag:#fbbf24; --hl:#5b4d12;
  --mark-bg:#4a3a10; --mark-fg:#ffd98a;
  --shadow-1:0 1px 2px rgba(0,0,0,.4); --shadow-2:0 6px 20px rgba(0,0,0,.45);
  color-scheme:dark;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--font);font-size:15px;line-height:1.55;color:var(--text);
  -webkit-font-smoothing:antialiased;min-height:100vh}
h1,h2,h3,h4{margin:0;line-height:1.2;letter-spacing:-.01em}
h1{font-size:1.75rem;font-weight:800}
h2{font-size:1.25rem;font-weight:700}
h3{font-size:1rem;font-weight:700}
p{margin:0}
a{color:var(--primary-ink);text-decoration:none}
a:hover{text-decoration:underline}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
img{max-width:100%;height:auto}
mark{color:var(--mark-fg);padding:0 3px;font-weight:600}
kbd{font-family:var(--mono);font-size:.78em;padding:1px 6px;border:1px solid var(--line);border-bottom-width:2px;color:var(--muted)}
.hidden,[hidden]{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.mono{font-family:var(--mono)}
.muted{color:var(--muted)}
.dim{color:var(--dim)}
.num{font-variant-numeric:tabular-nums}

/* ---------- header ---------- */
.s2-header{position:sticky;top:0;z-index:50;height:var(--header-h);border-bottom:1px solid var(--line);
  display:flex;align-items:center;padding:0 20px;gap:18px}
.s2-brand{display:flex;align-items:center;gap:10px;color:var(--text);font-weight:800;letter-spacing:-.02em;white-space:nowrap;text-decoration:none}
.s2-brand:hover{text-decoration:none}
.s2-mark{width:30px;height:30px;background:linear-gradient(135deg,var(--primary),#6d5df5);color:#fff;display:grid;place-items:center;
  font-weight:800;font-size:15px;letter-spacing:-.04em}
.s2-brand small{font-weight:600;color:var(--dim);font-size:.8rem;margin-left:2px}
.s2-nav{display:flex;gap:2px;margin-left:8px}
.s2-nav a{padding:7px 12px;color:var(--muted);font-weight:600;font-size:.9rem;text-decoration:none}
.s2-nav a:hover{color:var(--text)}
.s2-nav a.on{color:var(--primary-ink)}
.s2-spacer{flex:1}
.s2-crumb{color:var(--dim);font-size:.9rem;display:flex;align-items:center;gap:8px;min-width:0}
.s2-crumb b{color:var(--text);font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.s2-crumb .sw{width:10px;height:10px;flex:none}
.s2-iconbtn{width:36px;height:36px;border:1px solid var(--line);color:var(--muted);display:grid;place-items:center;padding:0}
.s2-iconbtn:hover{color:var(--text)}
.s2-iconbtn svg{width:18px;height:18px}
.s2-menubtn{display:none}
@media(max-width:820px){
  .s2-header{padding:0 14px;gap:10px}
  .s2-nav{display:none;position:absolute;top:var(--header-h);left:0;right:0;border-bottom:1px solid var(--line);
    padding:8px;flex-direction:column}
  .s2-nav.open{display:flex}
  .s2-menubtn{display:grid}
  .s2-brand small{display:none}
  .s2-crumb{display:none}
}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:9px 16px;border:1px solid var(--line);color:var(--text);font-weight:600;font-size:.92rem;line-height:1.2;text-decoration:none;transition:background .12s,border-color .12s,transform .06s;white-space:nowrap}
.btn:hover{text-decoration:none}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}
.btn.primary{border-color:var(--primary);color:var(--ink)}
.btn.primary:hover{border-color:var(--primary-ink)}
.btn.accent{border-color:var(--accent);color:var(--ink)}
.btn.soft{border-color:var(--primary-line);color:var(--primary-ink)}
.btn.ghost{border-color:transparent;background:transparent;color:var(--muted)}
.btn.ghost:hover{color:var(--text)}
.btn.danger{color:var(--no);border-color:var(--no-line)}
.btn.lg{padding:12px 22px;font-size:1rem}
.btn.sm{padding:6px 11px;font-size:.82rem}
.btn svg{width:16px;height:16px;flex:none}
.btn.on{border-color:var(--primary);color:var(--primary-ink)}

/* segmented control */
.seg{display:inline-flex;border:1px solid var(--line);padding:3px;gap:2px}
.seg button{border:0;background:transparent;padding:7px 14px;font-weight:600;color:var(--muted);font-size:.9rem}
.seg button.on{color:var(--text)}
.seg button:hover:not(.on){color:var(--text)}

/* ---------- surfaces ---------- */
.card{border:1px solid var(--line)}
.card.pad{padding:20px 22px}
.card-h{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 20px;border-bottom:1px solid var(--line2)}
.card-h h2,.card-h h3{font-size:.95rem;font-weight:700}
.card-h .hint{font-size:.82rem;color:var(--dim);font-weight:500}
.card-b{padding:18px 20px}
.hint{font-size:.85rem;color:var(--dim)}
.eyebrow{font-size:.72rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--dim)}
.rule{height:1px;margin:14px 0}

/* chips */
.chip{display:inline-flex;align-items:center;gap:5px;padding:2px 9px;border-radius:999px;font-size:.75rem;font-weight:600;color:var(--muted);border:1px solid var(--line2);white-space:nowrap}
.chip.accent{color:var(--accent);border-color:var(--accent-line)}
.chip.ok{color:var(--ok);border-color:var(--ok-line)}
.chip.no{color:var(--no);border-color:var(--no-line)}
.chip.warn{color:var(--warn);border-color:var(--warn-line)}
.chip.hy{color:#c2410c;background:#fff1e6;border-color:#fdd3b1}
:root[data-theme="dark"] .chip.hy{color:#fdba74;border-color:#7a4a1c}
.stars{color:#e0891a;letter-spacing:1px;font-size:.8rem}

/* progress bars */
.bar{height:8px;border-radius:999px;overflow:hidden}
.bar i{display:block;height:100%;border-radius:999px;transition:width .35s}
.bar.thin{height:5px}

/* stat tiles */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.tile{border:1px solid var(--line);padding:16px 18px}
.tile .v{font-size:1.7rem;font-weight:800;letter-spacing:-.03em;font-variant-numeric:tabular-nums;line-height:1.1}
.tile .l{font-size:.78rem;color:var(--dim);font-weight:600;margin-top:4px}
.tile .s{font-size:.8rem;color:var(--muted);margin-top:6px}
.tile.accent .v{color:var(--accent)}

/* tables */
.tbl{width:100%;border-collapse:collapse;font-size:.9rem}
.tbl th{text-align:left;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--dim);padding:8px 12px;border-bottom:1px solid var(--line)}
.tbl td{padding:10px 12px;border-bottom:1px solid var(--line2);vertical-align:middle}
.tbl tr:last-child td{border-bottom:0}
.tbl tr.click{cursor:pointer}
.tbl .r{text-align:right;font-variant-numeric:tabular-nums}
.tbl .barcell{min-width:120px}

/* forms */
.input{width:100%;padding:10px 13px;border:1px solid var(--line);color:var(--text);outline:none}
.input:focus{border-color:var(--primary)}
.input.sm{padding:7px 10px;font-size:.9rem}

/* toast */
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(20px);opacity:0;pointer-events:none;color:var(--inverse);padding:10px 16px;font-weight:600;font-size:.9rem;transition:.2s;z-index:90}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* dialogs */
dialog.s2-dialog{border:0;padding:0;color:var(--text);max-width:min(760px,94vw);width:100%}
dialog.s2-dialog .dh{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid var(--line)}
dialog.s2-dialog .db{padding:16px 18px;max-height:70vh;overflow:auto}
dialog.lightbox{max-width:min(1000px,96vw)}
dialog.lightbox figure{margin:0}
dialog.lightbox img{display:block;max-height:76vh;margin:0 auto}
dialog.lightbox figcaption{font-size:.8rem;color:var(--dim);padding:10px 4px 0;text-align:center}

/* page container */
.wrap{max-width:1120px;margin:0 auto;padding:0 20px}
.section{padding:36px 0}
.section-h{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:16px}
.section-h h2{font-size:1.35rem}
@media(max-width:640px){.wrap{padding:0 14px}.section{padding:28px 0}}

/* subject grid (hub + index pages) */
.subjects{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
.subject{position:relative;display:flex;flex-direction:column;gap:10px;padding:18px 18px 16px;border:1px solid var(--line);transition:box-shadow .15s,transform .15s,border-color .15s;overflow:hidden}
.subject::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px}
.subject:hover{transform:translateY(-1px);border-color:var(--accent-line)}
.subject .t{display:flex;align-items:center;justify-content:space-between;gap:8px}
.subject h3{font-size:1.05rem}
.subject .counts{display:flex;gap:12px;font-size:.82rem;color:var(--muted);font-variant-numeric:tabular-nums}
.subject .counts b{color:var(--text);font-weight:700}
.subject .blurb{font-size:.86rem;color:var(--muted);flex:1}
.subject .prog{display:flex;align-items:center;gap:10px;font-size:.78rem;color:var(--dim)}
.subject .prog .bar{flex:1}
.subject .acts{display:flex;gap:8px;margin-top:2px}
.subject .acts .btn{flex:1}

.footer{border-top:1px solid var(--line);padding:26px 0 40px;color:var(--dim);font-size:.82rem}
.footer .wrap{display:flex;flex-wrap:wrap;gap:8px 22px;align-items:center}
.footer a{color:var(--muted)}

@media(prefers-reduced-motion:reduce){*{transition:none!important}}
}
@layer workroom {
/* Workroom skin: tokens, base, header, controls, census board. Layered above the Edition 1 skeleton. */
:root {
  --font: "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --mono: "Roboto Mono", ui-monospace, Menlo, monospace;
  --marker: "Kalam", "Comic Sans MS", cursive;
  --bg: #F5F6F4; --panel: #FFFFFF; --panel2: #F8F9F7; --panel3: #EEF0EC;
  --line: #D9DDD8; --line2: #E7EAE5; --frame: #C4C9CE;
  --text: #1D2126; --muted: #4A5058; --dim: #7C838B; --inverse: #FFFFFF;
  --primary: #1F4FA0; --primary-ink: #1A4388; --primary-soft: #E8EEF8; --primary-line: #B9C9E6;
  --accent: var(--primary); --accent-soft: var(--primary-soft); --accent-line: var(--primary-line);
  --ok: #1E7B4A; --ok-soft: #E6F2EB; --ok-line: #A8D2B9;
  --no: #B8322A; --no-soft: #F8E6E4; --no-line: #E4B0AB;
  --warn: #8A5A12; --warn-soft: #F5EEE0; --warn-line: #DCC79C;
  --flag: #B8322A; --hl: #FFF3B0;
  --mark-bg: #E8EEF8; --mark-fg: #1A4388;
  --exam: #1B3A5C; --exam-2: #24496F; --exam-ink: #FFFFFF;
  --shadow-1: none; --shadow-2: 0 10px 30px -18px rgba(20, 30, 40, .45);
  --radius: 6px; --radius-s: 5px; --radius-xs: 4px; --header-h: 58px;
  color-scheme: light;
}
:root[data-theme="dark"] {
  --bg: #1D2126; --panel: #252A30; --panel2: #2A3037; --panel3: #313840;
  --line: #3A424B; --line2: #323940; --frame: #4A535D;
  --text: #E9ECEF; --muted: #B6BDC5; --dim: #8A929B; --inverse: #1D2126;
  --primary: #8FB0EA; --primary-ink: #A9C2F0; --primary-soft: #26344A; --primary-line: #3C5378;
  --ok: #7FCB9D; --ok-soft: #1F3328; --ok-line: #33614A;
  --no: #F08F86; --no-soft: #3B2422; --no-line: #6E3A35;
  --warn: #E2C27E; --warn-soft: #3A3121; --warn-line: #6A5530;
  --flag: #F08F86; --hl: #5A5022; --mark-bg: #26344A; --mark-fg: #CFDDF6;
  --exam: #0F2236; --exam-2: #173049;
  color-scheme: dark;
}
/* Subject colours arrive inline from the generated data; the workroom writes every subject in blue marker */
:root[style*="--accent"], .subject, .tool { --accent: var(--primary) !important; }

body { font-family: var(--font); font-size: 16px; line-height: 1.55; color: var(--text); background: var(--bg); }
h1, h2, h3, h4 { font-family: var(--font); letter-spacing: 0; }
h1 { font-weight: 700; } h2 { font-weight: 700; } h3 { font-weight: 700; }
a { color: var(--primary-ink); }
mark { background: var(--mark-bg); color: var(--mark-fg); border-radius: 2px; padding: 0 3px; font-weight: 600; }
kbd { font-family: var(--mono); border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 4px; background: var(--panel); color: var(--muted); }
.mono, .num { font-family: var(--mono); }
.muted { color: var(--muted); } .dim { color: var(--dim); }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* Header: the workroom door sign */
.s2-header { background: var(--panel); border-bottom: 1px solid var(--line); }
.s2-brand { color: var(--text); font-weight: 700; }
.s2-mark { background: var(--text); color: var(--panel); border-radius: 4px; font-family: var(--mono); font-weight: 700; }
.s2-brand small { color: var(--dim); font-family: var(--mono); }
.s2-nav a { color: var(--muted); border-radius: 4px; font-weight: 600; }
.s2-nav a:hover { color: var(--text); background: var(--panel3); text-decoration: none; }
.s2-nav a.on { color: var(--text); background: none; box-shadow: inset 0 -3px 0 var(--primary); border-radius: 0; }
.s2-crumb { color: var(--muted); font-weight: 600; }
.s2-crumb .sw { background: var(--primary) !important; border-radius: 50%; }
.s2-iconbtn { color: var(--muted); border: 1px solid var(--line); border-radius: 5px; background: var(--panel); }
.s2-iconbtn:hover { color: var(--text); background: var(--panel3); }
@media (max-width: 820px) { .s2-nav.open { background: var(--panel); border-bottom: 1px solid var(--line); } }

/* Buttons and segmented controls */
.btn { border: 1px solid var(--line); background: var(--panel); color: var(--text); border-radius: 5px; font-weight: 600; }
.btn:hover { background: var(--panel3); text-decoration: none; }
.btn:disabled { opacity: .45; }
.btn.primary, .btn.accent, .btn.on { background: var(--primary); border-color: var(--primary); color: var(--inverse); }
.btn.primary:hover, .btn.accent:hover { background: var(--primary-ink); border-color: var(--primary-ink); }
.btn.soft { background: var(--primary-soft); border-color: var(--primary-line); color: var(--primary-ink); }
.btn.ghost { background: none; border-color: transparent; color: var(--muted); }
.btn.ghost:hover { background: var(--panel3); color: var(--text); }
.btn.danger { color: var(--no); border-color: var(--no-line); }
.seg { background: var(--panel3); border: 1px solid var(--line); border-radius: 6px; padding: 2px; }
.seg button { border: 0; background: none; color: var(--muted); border-radius: 4px; font-weight: 600; }
.seg button.on { background: var(--panel); color: var(--text); box-shadow: 0 0 0 1px var(--line); }
.seg button:hover:not(.on) { color: var(--text); }

/* Cards: sheets clipped to the board */
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 6px; }
.card-h { border-bottom: 1px solid var(--line2); }
.card-h h2, .card-h h3 { font-weight: 700; }
.hint, .card-h .hint { color: var(--dim); }
.eyebrow { font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }
.rule { background: var(--line); }
.chip { border: 1px solid var(--line); background: var(--panel2); color: var(--muted); border-radius: 999px; font-weight: 600; }
.chip.accent { background: var(--primary-soft); border-color: var(--primary-line); color: var(--primary-ink); }
.chip.ok { background: var(--ok-soft); border-color: var(--ok-line); color: var(--ok); }
.chip.no { background: var(--no-soft); border-color: var(--no-line); color: var(--no); }
.chip.warn { background: var(--warn-soft); border-color: var(--warn-line); color: var(--warn); }
.chip.hy, :root[data-theme="dark"] .chip.hy { background: var(--panel2); border-color: var(--no-line); color: var(--no); }
.stars { color: var(--no); }
.bar { background: var(--panel3); border-radius: 2px; }
.bar i { background: var(--primary); border-radius: 2px; }
.bar.ok i { background: var(--ok); } .bar.no i { background: var(--no); } .bar.warn i { background: var(--warn); }
.tile { background: var(--panel); border: 1px solid var(--line); border-radius: 6px; }
.tile .v { font-family: var(--mono); font-weight: 500; color: var(--text); }
.tile .l { color: var(--muted); font-weight: 600; } .tile .s { color: var(--dim); }
.tile.accent .v { color: var(--primary-ink); }
.tbl th { color: var(--dim); font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; border-bottom: 1.5px solid var(--text); }
.tbl td { border-bottom: 1px solid var(--line2); }
.tbl tr.click:hover td { background: var(--primary-soft); }
.tbl .r { font-family: var(--mono); }
.input { background: var(--panel); border: 1px solid var(--line); border-radius: 5px; color: var(--text); }
.input:focus { border-color: var(--primary); outline: none; box-shadow: 0 0 0 3px var(--primary-soft); }
.toast { background: var(--text); color: var(--inverse); border-radius: 5px; }
dialog.s2-dialog { background: var(--panel); color: var(--text); border: 1px solid var(--frame); border-radius: 8px; box-shadow: var(--shadow-2); }
dialog.s2-dialog::backdrop, dialog.lightbox::backdrop { background: rgba(20, 24, 28, .55); }
dialog.s2-dialog .dh { border-bottom: 1px solid var(--line); }
dialog.lightbox { background: var(--panel); border: 1px solid var(--frame); border-radius: 8px; }
dialog.lightbox figcaption { color: var(--muted); }

/* Page sections: headings in marker */
.section-h h2, .hero h1, .index-head h1, .create h1, .gd-title h1, .score .meta h2 { font-family: var(--marker); font-weight: 700; letter-spacing: 0; }

/* The board frame around main content */
.wrap { position: relative; }
.footer { border-top: 1px solid var(--line); color: var(--dim); background: none; }
.footer a { color: var(--muted); }

/* Census board: one row per subject (hub) */
.subjects { display: grid; grid-template-columns: 1fr; gap: 0; background: var(--panel); border: 6px solid var(--frame); border-radius: 6px; box-shadow: var(--shadow-2); }
.subject { display: grid; grid-template-columns: minmax(170px, 1.2fr) minmax(150px, .9fr) minmax(200px, 2fr) minmax(170px, 1.2fr) auto; gap: 8px 18px; align-items: center;
  background: none; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: 14px 18px; }
.subject:last-child { border-bottom: 0; }
.subject::before { display: none; }
.subject:hover { background: var(--panel2); transform: none; }
.subject .t { display: flex; align-items: center; justify-content: flex-start; gap: 8px; flex-wrap: nowrap; }
.subject .t .chip { margin-left: 4px; }
.subject h3 { font-family: var(--marker); font-size: 1.35rem; font-weight: 700; color: var(--text); }
.subject .t::before { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--primary); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .25); flex: none; }
.subject .counts { font-family: var(--mono); font-size: 13px; color: var(--muted); }
.subject .counts b { color: var(--text); font-weight: 500; }
.subject .blurb { color: var(--muted); font-size: 14.5px; }
.subject .prog { font-size: 13px; color: var(--dim); }
.subject .acts { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; }
.subject .acts .btn { white-space: nowrap; }
@media (max-width: 980px) {
  .subject { grid-template-columns: 1fr auto; }
  .subject .t { grid-column: 1; } .subject .counts { grid-column: 2; text-align: right; }
  .subject .blurb, .subject .prog { grid-column: 1 / -1; }
  .subject .acts { grid-column: 1 / -1; justify-content: flex-start; }
}
@media (max-width: 640px) { .subjects { border-width: 4px; } .subject { padding: 12px; } }
}