:root{
    --navy:#041E42; --navy-2:#0B2E5C; --gold:#FFC72C; --ink:#12161F;
    --paper:#F6F7F9; --card:#FFFFFF; --line:#DFE3EA; --muted:#5B6472;
    --good:#1F7A5A; --warn:#B77400; --bad:#B02A25; --goodbg:#E7F3EE; --warnbg:#FBF2DF; --badbg:#FAE9E8;
  }
  *{box-sizing:border-box}
  body{margin:0;background:var(--paper);color:var(--ink);
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;
    -webkit-font-smoothing:antialiased;line-height:1.5}
  header{background:var(--navy);color:#fff;padding:18px 26px;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
  /* The masthead is the page's <h1>; the div it replaced had no margins. */
  .logo{font-weight:800;font-size:22px;letter-spacing:-.02em;margin:0}
  .logo span{color:var(--gold)}
  .tag{font-size:13px;color:#C6D2E2;border-left:1px solid #2C4A72;padding-left:14px;max-width:400px}
  nav{margin-left:auto;display:flex;gap:6px;flex-wrap:wrap}
  nav button{background:transparent;border:1px solid #2C4A72;color:#D6E0EE;padding:8px 14px;border-radius:8px;
    font-size:13.5px;font-weight:600;cursor:pointer}
  nav button:hover{background:#0B2E5C}
  nav button.on{background:var(--gold);color:var(--navy);border-color:var(--gold)}
  nav button:focus-visible,.chip:focus-visible,.btn:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
  main{max-width:1120px;margin:0 auto;padding:26px 22px 60px}
  .view{display:none} .view.on{display:block}
  h2{font-size:22px;margin:0 0 4px;letter-spacing:-.01em}
  .sub{color:var(--muted);font-size:14px;margin:0 0 20px}
  /* Said before anything is pressed: what this page can and cannot do today.
     Gold on its own ground rather than red -- nothing is broken, one thing is
     switched off. */
  .notice{background:var(--warnbg);border:1px solid var(--warn);border-left-width:5px;border-radius:10px;
    padding:14px 16px;margin-bottom:16px;font-size:14px}
  .notice b{display:block;margin-bottom:3px}
  .card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:20px;margin-bottom:16px}
  /* .field-label is the same look for a heading that introduces a group
     rather than naming one control -- a <label> may only do the latter. */
  label,.field-label{display:block;font-size:12.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin-bottom:7px;margin-top:0}
  textarea,input,select{width:100%;font-family:inherit;font-size:14px;border:1px solid var(--line);border-radius:9px;padding:11px;background:#fff;color:var(--ink)}
  textarea{min-height:150px;resize:vertical;line-height:1.5}
  .row{display:flex;gap:12px;flex-wrap:wrap}
  .row>div{flex:1;min-width:190px}
  .chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
  .chip{border:1px solid var(--line);background:#fff;border-radius:20px;padding:7px 14px;font-size:13px;font-weight:600;cursor:pointer;color:var(--muted)}
  .chip.on{background:var(--navy);color:#fff;border-color:var(--navy)}
  .btn{background:var(--navy);color:#fff;border:0;border-radius:9px;padding:12px 20px;font-size:14.5px;font-weight:700;cursor:pointer}
  .btn:hover{background:var(--navy-2)}
  .btn.gold{background:var(--gold);color:var(--navy)}
  .btn.ghost{background:#fff;color:var(--navy);border:1px solid var(--line)}
  .btn:disabled{opacity:.45;cursor:not-allowed}
  .console{background:#08101F;color:#9FE8C4;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;
    border-radius:10px;padding:14px 16px;margin-top:14px;min-height:34px;white-space:pre-wrap}
  /* 5.4:1 on the console's #08101F; #5D7A9B was 4.27. */
  .console .dim{color:#6C8BAE}
  .qhead{display:flex;gap:10px;align-items:flex-start;margin-bottom:10px}
  .num{background:var(--navy);color:#fff;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
    font-size:13px;font-weight:700;flex:none}
  .qtext{font-weight:600;font-size:15.5px}
  /* The options are <button>s, not divs: they are the whole interaction, and a
     div with an onclick cannot be reached by Tab or announced as a control.
     These four declarations undo the button defaults so they look as they did. */
  .opt{border:1px solid var(--line);border-radius:9px;padding:11px 13px;margin:7px 0 0;font-size:14.5px;cursor:pointer;display:flex;gap:11px;align-items:flex-start;background:#fff;
       font-family:inherit;text-align:left;width:100%;color:inherit}
  .opt:focus-visible{outline:3px solid var(--navy);outline-offset:2px}
  /* Says in words what pick-good / pick-bad / reveal say in colour. */
  .opt-state{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .opt:hover{border-color:var(--navy);background:#F7F9FC}
  .opt .k{font-weight:800;color:var(--muted);flex:none;width:16px}
  .opt.pick-good{border-color:var(--good);background:var(--goodbg)}
  .opt.pick-bad{border-color:var(--bad);background:var(--badbg)}
  .opt.reveal{border-color:var(--good);background:var(--goodbg)}
  .opt.locked{pointer-events:none;opacity:.75}
  .flag{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
    padding:3px 8px;border-radius:20px;background:#EEF1F6;color:var(--muted);margin-right:6px}
  .flag.mis{background:var(--badbg);color:var(--bad)}
  .flag.ok{background:var(--goodbg);color:var(--good)}
  .flag.sh{background:var(--warnbg);color:var(--warn)}
  .coach{border-left:4px solid var(--gold);background:#FFFBF0;padding:13px 15px;border-radius:0 9px 9px 0;margin-top:12px;font-size:14.5px}
  .coach.explain{border-left-color:var(--good);background:var(--goodbg)}
  .coach b{display:block;font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;margin-bottom:5px;color:var(--muted)}
  .bar{height:7px;background:#E7EAF0;border-radius:20px;overflow:hidden;margin:0 0 20px}
  .bar i{display:block;height:100%;background:var(--gold);transition:width .35s}
  .meta{display:flex;justify-content:space-between;font-size:13px;color:var(--muted);margin-bottom:8px;font-weight:600}
  .tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));gap:12px;margin-bottom:16px}
  .tile{background:#fff;border:1px solid var(--line);border-radius:12px;padding:15px}
  .tile .v{font-size:28px;font-weight:800;letter-spacing:-.02em}
  .tile .l{font-size:12.5px;color:var(--muted);font-weight:600;margin-top:2px}
  .tile .d{font-size:12px;margin-top:6px;font-weight:700}
  .mrow{display:grid;grid-template-columns:1fr 92px;gap:12px;align-items:center;padding:10px 0;border-bottom:1px solid #EEF1F6;font-size:14px}
  .mrow:last-child{border-bottom:0}
  .alert{background:#FFFBF0;border:1px solid #F0DDA8;border-left:5px solid var(--gold);border-radius:0 11px 11px 0;padding:16px 18px;margin-bottom:16px}
  .alert h3{margin:0 0 6px;font-size:15.5px}
  .alert p{margin:0;font-size:14.5px;color:#3B4453}
  ul.mis{margin:8px 0 0;padding-left:20px;font-size:14px}
  ul.mis li{margin-bottom:8px}
  .split{display:grid;grid-template-columns:1fr 1fr;gap:16px}
  @media(max-width:820px){.split{grid-template-columns:1fr}}
  .foot{font-size:12.5px;color:var(--muted);margin-top:6px}
  .pill{font-size:11.5px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--navy);
    background:var(--gold);padding:3px 9px;border-radius:20px}
  details{margin-top:12px;font-size:13.5px;color:var(--muted)}
  summary{cursor:pointer;font-weight:700}
  .done{text-align:center;padding:30px 10px}
  .done .big{font-size:46px;font-weight:800;letter-spacing:-.03em}
  table.rub{width:100%;border-collapse:collapse;font-size:14px}
  table.rub td{padding:9px 8px;border-bottom:1px solid #EEF1F6;vertical-align:top}
  table.rub td:first-child{font-weight:800;width:110px;color:var(--navy)}
  .plan{display:flex;gap:12px;align-items:flex-start;padding:12px 0;border-bottom:1px solid #EEF1F6}
  .plan:last-child{border-bottom:0}
  .when{flex:none;width:96px;font-weight:800;font-size:13px;color:var(--navy)}
  .empty{text-align:center;padding:44px 20px;color:var(--muted)}
  .cov{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}

  /* ---- printable study guide ---- */
  #printable{display:none}
  @media print{
    @page{margin:0.6in}
    body{background:#fff}
    header,main{display:none !important}
    #printable{display:block;font-size:11pt;color:#000}
    #printable h1{font-size:20pt;margin:0 0 2px}
    #printable .meta2{font-size:9.5pt;color:#444;margin:0 0 16px;border-bottom:1.5pt solid #000;padding-bottom:10px}
    #printable h2{font-size:12.5pt;margin:20px 0 8px;border-bottom:0.75pt solid #999;padding-bottom:4px}
    #printable .lead{background:#F4F4F4;padding:10px 12px;border-left:3pt solid #000;margin:0 0 6px;font-size:11pt}
    #printable table{width:100%;border-collapse:collapse;font-size:10.5pt}
    #printable td,#printable th{padding:5px 6px;border-bottom:0.5pt solid #CCC;text-align:left;vertical-align:top}
    #printable th{font-size:8.5pt;text-transform:uppercase;letter-spacing:.06em;color:#444;border-bottom:0.75pt solid #666}
    #printable .st{font-weight:700;white-space:nowrap}
    #printable .why{margin:0 0 12px;font-size:10.5pt}
    #printable .why b{display:block;font-size:11pt}
    #printable ol,#printable ul{margin:6px 0 0;padding-left:20px;font-size:10.5pt}
    #printable li{margin-bottom:6px}
    #printable .fin{margin-top:22px;padding-top:8px;border-top:0.5pt solid #999;font-size:8.5pt;color:#555}
    #printable .avoid{break-inside:avoid;page-break-inside:avoid}
  }

  /* Back to the department hub. This page is deliberately standalone -- it owns
     the document so the print stylesheet can hide everything but the study
     guide -- so this link is the only thread back to the rest of the site. */
  nav a.hub{display:inline-flex;align-items:center;border:1px solid #2C4A72;color:#D6E0EE;padding:8px 14px;
    border-radius:8px;font-size:13.5px;font-weight:600;text-decoration:none;margin-right:6px}
  nav a.hub:hover{background:#0B2E5C}