/* ── Brand tokens (from the visual blueprint + timetable.html): warm-neutral monochrome with a
     single teal accent, serif display + sans body, both themes. Text-only UI — no icons/emoji. ── */
  :root{
    --ink:#16202e; --bg:#f5f6f8; --surface:#ffffff; --line:#dee3ea;
    --muted:#4d5765; --faint:#798494; --hair:#eceef2;
    --pipu:#1f3a5f; --pipu-soft:#e7ecf3; --pipu-ink:#16304f;
    --good:#2c6e49; --good-soft:#e4efe9; --good-ink:#1d5235;
    --warn:#8a6a24; --warn-soft:#f6efdf; --bad:#8a2b1f; --bad-soft:#f6e0dc;
    --radius:10px; --radius-lg:14px;
    --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
    --sans:"Avenir Next","Segoe UI",system-ui,-apple-system,sans-serif;
    --shadow:0 1px 2px rgba(16,26,40,.05), 0 8px 30px rgba(16,26,40,.07);
  }
  @media (prefers-color-scheme:dark){
    :root{
      --ink:#e9edf2; --bg:#0f1520; --surface:#17202e; --line:#27313f;
      --muted:#a9b3c1; --faint:#7d8797; --hair:#1d2836;
      /* Navy is the brand, but navy on a dark ground disappears — the accent lifts to a lighter
         tint of the same hue so it stays the same colour idea and still carries contrast. */
      --pipu:#7aa7dd; --pipu-soft:#1a2740; --pipu-ink:#cfe0f5;
      --good:#5ec38d; --good-soft:#16281f; --good-ink:#bfe8d2;
      --warn:#d9b166; --warn-soft:#2a2416; --bad:#e08170; --bad-soft:#2a1a16;
      --shadow:0 1px 2px rgba(0,0,0,.34), 0 10px 34px rgba(0,0,0,.4);
    }
  }
  :root[data-theme="light"]{
    --ink:#16202e; --bg:#f5f6f8; --surface:#ffffff; --line:#dee3ea; --muted:#4d5765; --faint:#798494;
    --hair:#eceef2; --pipu:#1f3a5f; --pipu-soft:#e7ecf3; --pipu-ink:#16304f;
    --good:#2c6e49; --good-soft:#e4efe9; --good-ink:#1d5235;
    --warn:#8a6a24; --warn-soft:#f6efdf; --bad:#8a2b1f; --bad-soft:#f6e0dc;
    --shadow:0 1px 2px rgba(16,26,40,.05), 0 8px 30px rgba(16,26,40,.07);
  }
  :root[data-theme="dark"]{
    --ink:#e9edf2; --bg:#0f1520; --surface:#17202e; --line:#27313f; --muted:#a9b3c1; --faint:#7d8797;
    --hair:#1d2836; --pipu:#7aa7dd; --pipu-soft:#1a2740; --pipu-ink:#cfe0f5;
    --good:#5ec38d; --good-soft:#16281f; --good-ink:#bfe8d2;
    --warn:#d9b166; --warn-soft:#2a2416; --bad:#e08170; --bad-soft:#2a1a16;
    --shadow:0 1px 2px rgba(0,0,0,.34), 0 10px 34px rgba(0,0,0,.4);
  }
  *{box-sizing:border-box}
  html,body{margin:0}
  body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased}
  a{color:inherit;text-decoration:none}
  h1,h2,h3{font-family:var(--serif);font-weight:600;margin:0;line-height:1.15;text-wrap:balance}
  .muted{color:var(--muted)} .faint{color:var(--faint)}
  .tabular{font-variant-numeric:tabular-nums}
  .btn{font:inherit;font-weight:600;color:var(--ink);background:var(--surface);border:1px solid var(--line);
    border-radius:var(--radius);padding:.5rem .9rem;cursor:pointer;transition:.15s;white-space:nowrap}
  .btn:hover{border-color:var(--pipu)}
  .btn.primary{background:var(--pipu);border-color:var(--pipu);color:#fff}
  :root[data-theme="dark"] .btn.primary{color:#0a0d08}
  .btn.primary:hover{filter:brightness(1.05)}
  .btn.ghost{background:transparent;border-color:transparent}
  .btn.ghost:hover{background:var(--hair)}
  .btn.sm{padding:.35rem .6rem;font-size:13px}
  .btn.danger{color:var(--bad);border-color:var(--bad-soft)}
  .btn.danger:hover{border-color:var(--bad)}
  .btn:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--pipu);outline-offset:2px}
  .btn:disabled{opacity:.5;cursor:default}
  input,select,textarea{font:inherit;color:var(--ink);background:var(--surface);border:1px solid var(--line);
    border-radius:var(--radius);padding:.55rem .7rem;width:100%}
  textarea{min-height:88px;resize:vertical}

  header.app{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:1rem;
    padding:.7rem clamp(1rem,4vw,2rem);background:color-mix(in srgb,var(--surface) 88%,transparent);
    backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
  .brand{display:flex;align-items:center;gap:.6rem;flex-shrink:0}
  /* Brand mark: a minimalist shield derived from the unit crest — navy left / green right split, a
     cream lightbulb. Holds an inline SVG rather than a coloured box. */
  .mark{width:30px;height:34px;display:grid;place-items:center;flex-shrink:0}
  .mark svg{width:100%;height:100%;display:block}
  .logoimg{width:100%;height:100%;object-fit:contain;display:block}
  .authcard .mark, #splash .mark{width:56px;height:64px}
  .brand .name{font-family:var(--serif);font-weight:600;font-size:16px;white-space:nowrap}
  .brand .sub{font-size:11px;color:var(--faint);letter-spacing:.02em}
  .searchwrap{position:relative;flex:1;max-width:420px;margin:0 auto}
  .results{position:absolute;top:calc(100% + .4rem);left:0;right:0;background:var(--surface);border:1px solid var(--line);
    border-radius:var(--radius-lg);box-shadow:var(--shadow);max-height:60vh;overflow:auto;padding:.4rem;display:none;z-index:30}
  .results.open{display:block}
  .rgroup{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--faint);padding:.5rem .6rem .2rem}
  .ritem{padding:.45rem .6rem;border-radius:8px;cursor:pointer;display:flex;justify-content:space-between;gap:1rem}
  .ritem:hover{background:var(--pipu-soft)}
  .ritem .t{font-weight:600}
  .headctl{display:flex;align-items:center;gap:.5rem;flex-shrink:0}
  .bell{position:relative}
  .badge{position:absolute;top:-6px;right:-6px;min-width:17px;height:17px;padding:0 4px;border-radius:9px;background:var(--pipu);
    color:#fff;font-size:11px;font-weight:700;display:grid;place-items:center}
  :root[data-theme="dark"] .badge{color:#0a0d08}
  /* Icon-only controls (bell + theme moon) — the two glyph exceptions to the text-only rule. */
  .iconbtn{padding:.45rem;line-height:0;display:grid;place-items:center}
  .iconbtn svg{width:18px;height:18px;display:block}
  /* Account notice: the who-panel is a button that drops a small card holding name/role + Sign out. */
  .acctwrap{position:relative;flex-shrink:0}
  .who{font:inherit;font-size:13px;text-align:right;line-height:1.2;background:transparent;border:1px solid transparent;
    border-radius:var(--radius);padding:.35rem .55rem;cursor:pointer;color:var(--ink)}
  .who:hover{background:var(--hair)}
  .who .r{font-size:11px;color:var(--faint)}
  .acctmenu{position:absolute;right:0;top:calc(100% + .4rem);min-width:200px;background:var(--surface);
    border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow);padding:.4rem;z-index:40}
  .acctmenu[hidden]{display:none}
  .acctmenu .head{padding:.4rem .6rem .5rem;border-bottom:1px solid var(--hair);margin-bottom:.3rem}
  .acctmenu .head .n{font-weight:600;font-size:14px}
  .acctmenu .head .r{font-size:12px;color:var(--faint)}
  .acctitem{display:block;width:100%;text-align:left;font:inherit;background:transparent;border:none;
    border-radius:8px;padding:.5rem .6rem;cursor:pointer;color:var(--ink)}
  .acctitem:hover{background:var(--hair)}

  nav.tabs{padding:0 clamp(1rem,4vw,2rem);border-bottom:1px solid var(--line);
    background:var(--surface);position:sticky;top:57px;z-index:15}
  .tabs .tabsrail{display:flex;gap:.2rem;overflow-x:auto}
  nav.tabs a{padding:.7rem .8rem;font-weight:600;font-size:14px;color:var(--muted);border-bottom:2px solid transparent;white-space:nowrap}
  nav.tabs a:hover{color:var(--ink)}
  nav.tabs a.active{color:var(--pipu);border-bottom-color:var(--pipu)}

  main{max-width:1000px;margin:0 auto;padding:clamp(1rem,4vw,2rem)}
  .pagehead{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;margin-bottom:1.3rem;flex-wrap:wrap}
  .pagehead h1{font-size:clamp(1.4rem,4vw,1.9rem)}
  .pagehead p{color:var(--muted);margin:.3rem 0 0}
  .backlink{display:inline-block;color:var(--muted);font-weight:600;font-size:13px;margin-bottom:.7rem;cursor:pointer}
  .backlink:hover{color:var(--pipu)}
  .filters{display:flex;gap:.5rem;margin-bottom:1rem;flex-wrap:wrap}
  .filters .btn.sm.on{background:var(--pipu-soft);border-color:var(--pipu);color:var(--pipu-ink)}

  .grid{display:grid;gap:1rem}
  .cards{grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
  .card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:1.1rem 1.2rem;box-shadow:var(--shadow)}
  .card h3{font-size:1.05rem;margin-bottom:.5rem}
  .stat{display:flex;flex-direction:column;gap:.15rem}
  .stat .n{font-family:var(--serif);font-size:2rem;font-weight:600}
  .stat .l{font-size:12px;color:var(--faint);text-transform:uppercase;letter-spacing:.05em}
  .stat.action .n{color:var(--pipu)}
  .row{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.55rem 0;border-top:1px solid var(--hair)}
  .row:first-of-type{border-top:0}
  .row .k{color:var(--muted)}

  /* list */
  .list{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow);overflow:hidden}
  .li{display:flex;align-items:center;gap:1rem;padding:.85rem 1.1rem;border-top:1px solid var(--hair);cursor:pointer}
  .li:first-child{border-top:0}
  .li:hover{background:var(--pipu-soft)}
  .li .main{flex:1;min-width:0}
  .li .t{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .li .s{font-size:13px;color:var(--faint)}
  .li .meta{display:flex;align-items:center;gap:.5rem;flex-shrink:0}
  .empty{padding:2.5rem 1rem;text-align:center;color:var(--faint)}

  .pill{font-size:12px;font-weight:600;padding:.15rem .55rem;border-radius:999px;background:var(--hair);color:var(--muted);white-space:nowrap}
  .pill.act{background:var(--pipu-soft);color:var(--pipu-ink)}
  .pill.zero{opacity:.5}
  /* Navy is the brand accent; success gets the logo's forest green so "good" is not the same colour
     as "this is a PIPU thing". */
  .pill.good{background:var(--good-soft);color:var(--good-ink)}
  .pill.warn{background:var(--warn-soft);color:var(--warn)}
  .pill.bad{background:var(--bad-soft);color:var(--bad)}

  /* avatars — an uploaded photo, else the person's initials */
  .avatar{width:44px;height:44px;border-radius:50%;object-fit:cover;background:var(--hair);color:var(--muted);
    display:grid;place-items:center;font-family:var(--serif);font-weight:600;font-size:15px;flex-shrink:0}
  .avatar.sm{width:32px;height:32px;font-size:12px}
  .avatar.lg{width:84px;height:84px;font-size:1.7rem}
  .idhead{display:flex;align-items:center;gap:1rem;margin-bottom:.4rem}

  .detail h2{font-size:1.4rem;margin-bottom:.3rem}
  .detail .sub{color:var(--muted);margin-bottom:1rem}
  .section{margin-top:1.6rem}
  .section h3{font-size:1.1rem;margin-bottom:.7rem;padding-bottom:.4rem;border-bottom:1px solid var(--hair)}
  .actionbar{display:flex;gap:.5rem;flex-wrap:wrap;margin:1rem 0}
  .kv{display:grid;grid-template-columns:auto 1fr;gap:.3rem 1rem;font-size:14px}
  .kv .k{color:var(--faint)}
  .prose{white-space:pre-wrap;color:var(--ink)}

  /* timeline */
  .tl{list-style:none;margin:0;padding:0}
  .tl li{display:flex;gap:.7rem;padding:.4rem 0;font-size:13px}
  .tl .dot{width:8px;height:8px;border-radius:50%;background:var(--pipu);margin-top:.4rem;flex-shrink:0}
  .tl .to{font-weight:600}

  /* modal */
  .scrim{position:fixed;inset:0;background:rgba(10,12,8,.45);display:grid;place-items:center;z-index:50;padding:1rem}
  .modal{width:100%;max-width:580px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);
    box-shadow:var(--shadow);padding:1.5rem;max-height:92vh;overflow:auto}
  .modal.wide{max-width:860px}   /* form-heavy panels: create session, assignment, agenda, proposal */
  .modal h3{font-size:1.2rem;margin-bottom:1rem}
  .field{margin-bottom:.8rem}
  .field label{display:block;font-size:12px;color:var(--muted);margin-bottom:.3rem;letter-spacing:.02em}
  /* Two-column field layout inside wide panels; a field marked .full spans both columns. */
  .fgrid{display:grid;grid-template-columns:1fr 1fr;gap:0 1.1rem}
  .fgrid .full{grid-column:1/-1}
  /* checkbox field: box + label on one line, aligned; not styled like a caption label */
  .field.check label{display:flex;align-items:center;gap:.5rem;margin:0;font-size:14px;color:var(--ink);text-transform:none;letter-spacing:0;cursor:pointer}
  .field.check input[type=checkbox]{width:auto;margin:0;flex:none}
  /* identity code card on a profile — QR beside the id, stacks on small screens */
  .idcard{display:flex;gap:1.1rem;align-items:center;flex-wrap:wrap}
  .idcard .qr{width:190px;max-width:70vw;flex:none}
  .idcard .qr svg{width:100%;height:auto;display:block;border:1px solid var(--line);border-radius:var(--radius)}
  .idcard .idmeta{flex:1;min-width:200px}
  .idcard .code{word-break:break-all}
  .modal .foot{display:flex;justify-content:flex-end;gap:.5rem;margin-top:1.2rem;flex-wrap:wrap}
  .err{color:var(--bad);font-size:13px;min-height:1.1em;margin:.3rem 0}

  /* auth */
  .authwrap{min-height:100vh;display:grid;place-items:center;padding:1.5rem}
  .authcard{width:100%;max-width:380px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow);padding:1.8rem}
  .authcard .brand{justify-content:center;margin-bottom:1.2rem;flex-direction:column;text-align:center;gap:.5rem}
  .hint{font-size:12px;color:var(--faint);margin-top:1rem;text-align:center}
  .linkbtn{font:inherit;font-size:12px;font-weight:700;color:var(--pipu);background:none;border:0;padding:0;cursor:pointer;width:auto}
  .linkbtn:hover{text-decoration:underline}
  .cfg{font-size:11px;color:var(--faint);text-align:center;margin-top:.8rem}
  .cfg input{font-size:11px;padding:.3rem .5rem;margin-top:.3rem}

  /* the presenter's rotating check-in code */
  .code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:700;letter-spacing:.08em;
    background:var(--hair);padding:.15rem .45rem;border-radius:6px}
  .bigcode{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:700;text-align:center;
    font-size:clamp(2.4rem,12vw,3.6rem);letter-spacing:.14em;color:var(--pipu);background:var(--pipu-soft);
    padding:1.2rem .6rem;border-radius:var(--radius-lg);margin:.4rem 0}
 /* assignment form builder — inline, multi-entry */
  .qedit{border:1px solid var(--line);border-radius:var(--radius);padding:.6rem;margin-bottom:.6rem;background:var(--bg)}
  .qedit-top{display:flex;align-items:center;gap:.5rem}
  .qnum{font-weight:700;color:var(--faint);flex-shrink:0;min-width:1.1em;text-align:center}
  .qf-label{flex:1}
  .qf-type{width:auto;flex-shrink:0}
  .qedit-row{display:flex;align-items:center;justify-content:space-between;gap:.5rem;margin-top:.5rem;flex-wrap:wrap}
  .qedit-move{display:flex;gap:.3rem}
  .qf-inline{display:inline-flex;align-items:center;gap:.4rem;font-size:13px;color:var(--muted);width:auto;margin:0}
  .qf-inline input{width:auto;margin:0}
  .qedit-choice{margin-top:.55rem;padding-top:.55rem;border-top:1px dashed var(--line);display:flex;flex-direction:column;gap:.5rem}
  .qf-options{min-height:60px}
  .qf-keybox{display:flex;gap:.5rem;align-items:flex-start}
  .qf-correct{flex:1;min-height:44px}
  .qf-marks{width:90px;flex-shrink:0}
  .req{font-size:11px;color:var(--bad);font-weight:600}
  .mk{color:var(--pipu)}
  .opt{display:flex;align-items:center;gap:.5rem;padding:.3rem 0;font-size:14px;cursor:pointer}
  .opt input{width:auto;margin:0}
  .ext{color:var(--pipu);font-weight:600}
  .ext:hover{text-decoration:underline}

  /* printable programme sheet — what an organizer shares/announces */
  .sheet{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow);padding:clamp(1.4rem,4vw,2.4rem)}
  .sheet .mast{display:flex;align-items:center;gap:.7rem;padding-bottom:1rem;border-bottom:2px solid var(--ink)}
  .sheet .mast .u{font-family:var(--serif);font-weight:600;font-size:14px;line-height:1.2}
  .sheet .mast .u span{display:block;font-family:var(--sans);font-weight:400;font-size:11px;color:var(--faint)}
  .sheet h1{font-size:clamp(1.6rem,5vw,2.4rem);margin:1.4rem 0 .5rem}
  .sheet .when{font-size:1rem;color:var(--muted);margin-bottom:.2rem}
  .sheet .agenda{width:100%;border-collapse:collapse;margin-top:.6rem}
  .sheet .agenda td{padding:.7rem .4rem;border-top:1px solid var(--hair);vertical-align:top}
  .sheet .agenda td.time{white-space:nowrap;color:var(--muted);font-variant-numeric:tabular-nums;width:1%;padding-right:1.2rem}
  .sheet .agenda .st{font-weight:600}
  .sheet .agenda .sp{font-size:13px;color:var(--faint)}
  .sheet .foot{margin-top:1.6rem;padding-top:.8rem;border-top:1px solid var(--hair);font-size:12px;color:var(--faint)}
  @media print{
    header.app, nav.tabs, .backlink, .actionbar, .no-print, #toast, .searchwrap, .headctl{display:none !important}
    :root{--surface:#fff;--bg:#fff;--ink:#000;--muted:#333;--faint:#555;--line:#bbb;--hair:#ddd;--shadow:none}
    body{background:#fff}
    main{max-width:none;margin:0;padding:0}
    .sheet{border:0;box-shadow:none;padding:0;border-radius:0}
    a[href]{text-decoration:none;color:#000}
  }

  .center{display:grid;place-items:center;min-height:40vh;color:var(--faint)}
  .hidden{display:none !important}
  /* toast */
  #toast{position:fixed;bottom:1.2rem;left:50%;transform:translateX(-50%);background:var(--ink);color:var(--bg);
    padding:.6rem 1rem;border-radius:var(--radius);box-shadow:var(--shadow);font-size:14px;z-index:60;opacity:0;
    transition:opacity .2s;pointer-events:none}
  #toast.show{opacity:1}
  @media (max-width:640px){
    .brand .sub{display:none} .who{display:none} .searchwrap{max-width:none} nav.tabs{top:57px}
    /* stack two-column form fields, tighten panels, let wide tables scroll instead of overflowing */
    .fgrid{grid-template-columns:1fr}
    .modal{padding:1.15rem}
    .modal .foot{justify-content:stretch} .modal .foot .btn{flex:1 1 auto}
    .pagehead{align-items:flex-start} .pagehead .btn{width:100%}
    .actionbar .btn{flex:1 1 auto}
    .kv{grid-template-columns:1fr}
    .scroll,.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
    table{min-width:0}
  }
  @media (max-width:400px){ nav.tabs a{padding:.5rem .55rem;font-size:13px} .modal h3{font-size:1.1rem} }
  /* public session page — a shareable link, centred like a poster */
  #pub .headctl{margin-left:auto;display:flex;align-items:center;gap:.5rem}
  .pubwrap{max-width:680px;margin:0 auto;padding:clamp(1rem,4vw,2.4rem) 1rem}
  .pubcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow);padding:clamp(1.2rem,4vw,2rem)}
  .pubcard h2{margin:0 0 .3rem;font-size:1.6rem}
  .pubcard .when{color:var(--muted);font-size:.95rem;margin-bottom:1rem}
  .pubcard .cta{margin-top:1.4rem}
  .pubnote{color:var(--faint);font-size:13px;margin-top:.6rem}