/* ── 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:#1c7a55; --good-soft:#e2f0ea; --good-ink:#155a3f;
    --warn:#8a6a24; --warn-soft:#f6efdf; --bad:#8a2b1f; --bad-soft:#f6e0dc;
    --vital:#c0392b; --vital-soft:#f6e2de;   /* the ECG line + alerts — reserved, used sparingly */
    --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;
    /* Clinical monospace — the "lab readout" utility face for eyebrows, labels, data and section
       titles. Grounds the identity in the medical-data world at zero load cost (system mono). */
    --mono:ui-monospace,"SF Mono","JetBrains Mono","Roboto Mono",Menlo,Consolas,monospace;
    --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;
      --vital:#e8705f; --vital-soft:#2a1613;
      --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:#1c7a55; --good-soft:#e2f0ea; --good-ink:#155a3f;
    --warn:#8a6a24; --warn-soft:#f6efdf; --bad:#8a2b1f; --bad-soft:#f6e0dc;
    --vital:#c0392b; --vital-soft:#f6e2de;
    --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;
    --vital:#e8705f; --vital-soft:#2a1613;
    --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;overflow-x:hidden}
  body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased}
  /* Global safety net — a stray wide child never shifts the page sideways on mobile. */
  main{min-width:0}
  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}
  /* Vertical padding matches inputs/selects (.55rem) so a button and a field sit at the same height
     in any mixed toolbar row — see the cross-platform control-sizing rule. */
  .btn{font:inherit;font-weight:600;color:var(--ink);background:var(--surface);border:1px solid var(--line);
    border-radius:var(--radius);padding:.55rem .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}
  /* Rich-text toolbar font-size picker: a compact inline control, never the global full-width form select. */
  select.pw-size{width:auto;min-width:5rem;padding:.35rem 1.5rem .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}
  /* Native date/time inputs can force their own intrinsic width; keep them shrinkable everywhere. */
  input[type=date],input[type=time],input[type=datetime-local]{min-width:0}

  .topbar{position:sticky;top:0;z-index:20}
  header.app{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-family:var(--mono);font-size:10.5px;color:var(--faint);letter-spacing:.01em}
  .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-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.04em;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)}
  .tabs .tabsrail{display:flex;gap:.2rem;overflow-x:auto}
  .filterbar{display:flex;gap:.7rem;align-items:center;flex-wrap:wrap;margin:-.4rem 0 1rem}
  .filterbar input[type=search]{flex:1;min-width:180px;max-width:340px}
  .filterbar label{display:flex;align-items:center;gap:.4rem;font-family:var(--mono);font-size:11.5px;text-transform:uppercase;letter-spacing:.03em;color:var(--faint)}
  .filterbar input[type=date]{width: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 action buttons: margin-left:auto keeps the group hugging the right edge even when a
     long title wraps it onto its own row (otherwise short titles kept buttons inline-right while
     long ones dropped them to a left-aligned second row — inconsistent across tabs) */
  .phact{display:flex;gap:.5rem;flex-wrap:wrap;justify-content:flex-end;margin-left:auto}
  .pagehead h1{font-size:clamp(1.4rem,4vw,1.9rem)}
  .pagehead p{color:var(--muted);margin:.3rem 0 0}
  .backlink{display:inline-block;font-family:var(--mono);color:var(--muted);font-weight:600;font-size:12px;letter-spacing:.01em;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);letter-spacing:.01em}
  .stat.action .n{color:var(--pipu)}
  /* ── Innovation Pathway (dashboard hero) — the unit lifecycle as a pulse: Idea → Proposal →
     Project → Certified, stages linked by a vital-sign spike. Scrolls horizontally on a phone. ── */
  .pathway{display:flex;align-items:center;gap:.3rem;background:var(--surface);border:1px solid var(--line);
    border-radius:var(--radius-lg);box-shadow:var(--shadow);padding:1.15rem 1rem;margin-bottom:1.4rem;overflow-x:auto}
  .pw-node{flex:1 1 0;min-width:92px;text-align:center;padding:.15rem .3rem;border-radius:var(--radius)}
  .pw-node[data-go]{transition:background .15s}
  .pw-node[data-go]:hover{background:var(--pipu-soft)}
  .pw-k{font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--good);margin-bottom:.15rem}
  .pw-n{font-family:var(--serif);font-size:2.1rem;font-weight:600;line-height:1.05;color:var(--ink)}
  .pw-sub{font-family:var(--mono);font-size:11px;color:var(--faint);letter-spacing:.02em;margin-top:.15rem}
  .pw-link{flex:0 0 52px;width:52px;height:34px;align-self:center}
  .pw-link path{fill:none;stroke:var(--vital);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
  /* a slow pulse travels the pipeline — each connector's spike throbs in turn (Ideas→Certified),
     so the pathway reads as a live signal. Motion only; the line stays fully drawn at rest. */
  @media (prefers-reduced-motion:no-preference){
    .pw-link path:not(.pw-arrow){animation:pw-beat 2.8s ease-in-out infinite}
    .pathway svg.pw-link:nth-of-type(2) path:not(.pw-arrow){animation-delay:.42s}
    .pathway svg.pw-link:nth-of-type(3) path:not(.pw-arrow){animation-delay:.84s}
  }
  @keyframes pw-beat{
    0%,58%,100%{stroke-width:2;filter:none}
    22%{stroke-width:2.9;filter:drop-shadow(0 0 3px var(--vital))}
  }
  @media (max-width:640px){ .pathway{gap:0;padding:1rem .6rem} .pw-link{flex-basis:32px;width:32px} .pw-node{min-width:74px} .pw-n{font-size:1.65rem} }
  .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}
  /* Question rows show the whole question — wrap instead of ellipsis (long Arabic/English labels). */
  .li.qrow .t{white-space:normal;overflow-wrap:anywhere}
  .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{font-family:var(--mono);font-size:12.5px;color:var(--faint);letter-spacing:.01em}
  /* ── Bidirectional text ── user content (answers, questions, titles, notes) may be Arabic. Let each
     block auto-pick its direction from its own text, so Arabic entries flow RTL and Latin stays LTR. */
  .kv>div,.li .t,.li .s,.prose,.detail>h2,.detail>.sub{unicode-bidi:plaintext;text-align:start}
  textarea,input[type=text],input:not([type]),.pw-rich{unicode-bidi:plaintext}
  /* A cursive script (Arabic) must never be letter-spaced or set in the mono utility face — both
     break the joins and read as "harsh". Applies wherever text resolves to RTL. */
  :dir(rtl){letter-spacing:normal}
  .kv .k:dir(rtl){font-family:var(--sans);text-transform:none}
  .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}
  /* WYSIWYG body field (Registry) — a contenteditable div styled to match the textareas around it. */
  .pw-rich{font:inherit;color:var(--ink);background:var(--surface);border:1px solid var(--line);
    border-radius:var(--radius);padding:.55rem .7rem;width:100%;box-sizing:border-box;min-height:180px;
    overflow:auto;line-height:1.55}
  .pw-rich:focus-visible{outline:2px solid var(--pipu);outline-offset:2px}
  .pw-rich:empty:before{content:attr(data-ph);color:var(--muted)}
  .pw-rich p,.pw-rich div{margin:0 0 .6rem}
  .pw-rich p:last-child,.pw-rich div:last-child{margin-bottom:0}
  .pw-rich ul,.pw-rich ol{margin:0 0 .6rem;padding-inline-start:1.4rem}
  /* checkbox field: box + label on one line, aligned; not styled like a caption label */
  /* align to the top so the box sits on the FIRST line of a wrapping label (not floating mid-block) */
  .field.check label{display:flex;align-items:flex-start;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:.15rem 0 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:var(--mono);font-weight:700;letter-spacing:.08em;
    background:var(--hair);padding:.15rem .45rem;border-radius:6px}
  .bigcode{font-family:var(--mono);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)}
  /* A bit larger than the app-chrome logo (.mark is 30x34 there) — the letterhead/programme masthead
     is a standalone printed page, so the crest can carry more visual weight. */
  .sheet .mast .mark{width:46px;height:52px}
  .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);margin-top:4px}
  .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)}
  /* Paperwork sheet: lay the letter out as a page so the footer always sits at the bottom (the
     signature/body take the space above it), on screen and in print. */
  /* On screen the preview is a true A4 page (210×297mm, 24mm margin) drawn as white "paper" with dark
     ink in either light or dark theme — so it is WYSIWYG-identical to the printed/downloaded PDF. On a
     narrow phone a JS fit (pwFitPreview) applies an inline `zoom` so the whole page fits the width. */
  #docPreview{display:flex;justify-content:center;overflow-x:auto;padding:.4rem 0}
  #docPreview .sheet{display:flex;flex-direction:column;flex-shrink:0;width:210mm;min-height:297mm;padding:20mm;box-sizing:border-box;margin:0 auto;
    background:#fff;color:#1e1e1e;font-size:12.5pt;line-height:1.52;
    /* Sub-text (masthead sub-line, signature title/unit/date) is kept dark enough to print reliably —
       light greys drop out on many printers. */
    --ink:#141414;--muted:#333333;--faint:#474747;--line:#cfcfcf;--hair:#e0e0e0;--surface:#fff}
  /* Signature block follows the body with a modest gap (footer removed) — not pinned to the page foot,
     so it sits a little higher, the on-screen preview and printed PDF place it identically, and a short
     letter never spills onto a 2nd page. */
  #docPreview .sheet .pw-sign{margin-top:1.5rem}
  @media print{
    /* A4 with a generous formal letter margin — the printed page is the sheet, to that margin. */
    @page{size:A4;margin:20mm}
    header.app, nav.tabs, .backlink, .actionbar, .no-print, #toast, .searchwrap, .headctl{display:none !important}
    :root{--surface:#fff;--bg:#fff;--ink:#000;--muted:#2b2b2b;--faint:#474747;--line:#bbb;--hair:#ddd;--shadow:none}
    html,body{background:#fff;width:auto;height:auto;margin:0}
    main{max-width:none;margin:0;padding:0;width:100%}
    #docPreview{margin:0;padding:0;display:block;overflow:visible}
    .sheet{border:0;box-shadow:none;padding:0;border-radius:0;width:100%}
    /* In print the @page margin supplies the letter margin, so reset the on-screen A4 page geometry
       (width/padding/margin/shadow) — the white-paper background + dark-ink vars from the screen rule
       are kept, which also gives correct contrast when printing from dark theme. A short letter is one
       A4 page; a long one flows naturally onto a second (see app.js pwResetFit). `display:block`
       overrides the on-screen `flex;flex-direction:column` — a flex column that overflows one page
       doesn't fragment cleanly in Chromium's print engine and was leaving several near-blank trailing
       pages once a letter ran past a single page; plain block layout paginates correctly. */
    /* No min-height in print: the page is exactly as tall as the letter, so a short one ends right
       after the signature instead of reserving a large blank band down to a fixed 240mm. */
    /* zoom:1 !important neutralizes the on-screen fit-zoom (pwFitPreview sets an inline `zoom` fraction
       to fit narrow phones). Without this, a re-print on mobile could capture the shrunk preview and
       print the letter downscaled the second time — the print must always render the true A4 size. */
    #docPreview .sheet{display:block;zoom:1 !important;font-size:12.5pt;line-height:1.52;min-height:0;width:100%;padding:0;margin:0;box-shadow:none;border:0}
    #docPreview .sheet .foot{font-size:9pt}
    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){
    /* Inputs at 16px on phones so iOS Safari never auto-zooms (which visually rescales the page) when
       a field is focused — the body's 15px otherwise trips the zoom threshold. */
    input,select,textarea{font-size:16px}
    .brand .sub{display:none}
    /* keep the account button (profile / sign out live in its menu) — just compact it */
    .who{padding:.25rem .5rem} .who .r{display:none}
    #whoName{max-width:72px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .searchwrap{max-width:none}
    /* stack two-column form fields, tighten panels, let wide tables scroll instead of overflowing */
    .fgrid{grid-template-columns:1fr}
    /* Question editor: the wide type <select> was squeezing the label input to a sliver (truncated
       Arabic labels). On phones the label takes the first line; the type select drops full-width below. */
    .qedit-top{flex-wrap:wrap}
    .qf-label{flex:1 1 60%;min-width:0}
    .qf-type{flex:1 1 100%;width:100%}
    .modal{padding:1.15rem}
    .modal .foot{justify-content:stretch} .modal .foot .btn{flex:1 1 auto}
    /* on phones the action group always takes its own row, right-aligned — otherwise short
       titles (Ideas) kept buttons inline while long ones (Proposals) wrapped them left */
    .pagehead{align-items:center;margin-bottom:1rem;row-gap:.6rem}
    .pagehead .phact{flex-basis:100%;justify-content:flex-end}
    /* a lone header button used to balloon into a full-width bar */
    .pagehead .btn{width:auto;flex:0 0 auto}
    .section{margin-bottom:1rem}
    .about2col .card,.about2col .list{margin-bottom:1rem !important}
    .actionbar .btn{flex:1 1 auto}
    .kv{grid-template-columns:1fr}
    .scroll,.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
    table{min-width:0}
    /* filter bar: search takes its own line; From/To share the next line evenly, inputs aligned */
    .filterbar{gap:.5rem}
    .filterbar input[type=search]{flex-basis:100%;max-width:none}
    .filterbar label{flex:1 1 0;min-width:0}
    .filterbar input[type=date]{flex:1;width:100%;min-width:0}
    /* Paperwork: let the bilingual masthead wrap instead of squeezing on narrow phones. */
    #docPreview .sheet .mast{flex-wrap:wrap;gap:.6rem 1rem}
    /* Registry rows: on phones stack the document name (full, wrapping) above its action buttons so
       the name is never hidden behind the Image/PDF/Clone/Delete buttons. */
    .li.pwrow{flex-wrap:wrap;align-items:flex-start}
    .li.pwrow .main{flex:1 1 100%;margin-bottom:.55rem}
    .li.pwrow .t{white-space:normal}
    .li.pwrow .meta{width:100%;flex-wrap:wrap;justify-content:flex-start}
    /* iOS renders native date inputs with their own box (ignores width:100%, odd height/margins).
       Normalise them on mobile so they line up with the other fields. */
    input[type=date],input[type=time],input[type=datetime-local]{
      -webkit-appearance:none;appearance:none;width:100%;min-height:2.6rem;line-height:1.4;text-align:start}
  }
  @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}

/* About: words left, banner + announcements right (the living side gets the bigger share);
   the About view alone widens to use the whole desktop, and stacks on small screens */
main.wide{max-width:1500px}
/* minmax(0,…) is load-bearing: a bare 1fr track cannot shrink below its content's intrinsic
   width, so one wide row (an announcement) silently pushed the whole page wider than the phone
   screen — the header stopped short and the installed app showed broken side margins. */
.about2col{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);gap:1.8rem;align-items:start}
@media (max-width:900px){.about2col{grid-template-columns:minmax(0,1fr);gap:1rem}}

/* Public landing page (#home): full-width like the About view, words left / living feed right;
   minmax(0,…) for the same shrink-below-content reason as .about2col. Stacks on small screens. */
.homewrap{max-width:1400px;margin:0 auto;padding:clamp(1rem,3vw,2rem) clamp(1rem,3vw,1.6rem)}
.home2col{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:1.2rem;align-items:start;margin-top:1rem}
@media (max-width:900px){.home2col{grid-template-columns:minmax(0,1fr);gap:1rem}}

  /* Landing (public #home) — spread, panel-free layout inspired by the Eventique landing, theme-aware
     via PIPU's own vars. lp-full lets the page break out of main's 1000px cap so the hero stretches
     edge-to-edge; content re-centers inside .lp-wrap. */
  main.lp-full{max-width:none;padding:0;margin:0;width:100%}
  .lp-hero{position:relative;text-align:center;padding:88px 24px 56px;overflow:hidden;isolation:isolate}
  .lp-hero::before{content:"";position:absolute;left:50%;top:-160px;width:min(760px,120%);height:420px;transform:translateX(-50%);z-index:-1;background:radial-gradient(50% 100% at 50% 0%,color-mix(in srgb,var(--pipu) 15%,transparent),transparent 70%)}
  .lp-hero img.lp-logo{width:70px;height:70px;margin:0 auto 22px;display:block}
  .lp-kicker{display:inline-flex;align-items:center;gap:.6rem;font-family:var(--mono);font-size:11.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--good);margin-bottom:18px}
  .lp-kicker::before{content:"";width:22px;height:1px;background:var(--good)}
  .lp-kicker::after{content:"";width:22px;height:1px;background:var(--good)}
  /* Editorial serif wordmark — the display face carries the identity, set large and quiet. */
  .lp-hero h1{font-family:var(--serif);font-size:clamp(33px,6vw,58px);line-height:1.04;letter-spacing:-.02em;margin:0 0 18px;font-weight:600;color:var(--ink);max-width:16ch;margin-inline:auto}
  /* ── Signature: the vital-sign waveform from PIPU's crest — the pulse of innovation. It draws once
     on load, then rests. This is the ONE bold element; everything around it stays quiet. ── */
  .ecg{display:block;width:100%;max-width:720px;height:58px;margin:2px auto 24px;overflow:visible}
  .ecg path{fill:none;stroke:var(--vital);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
    filter:drop-shadow(0 0 5px color-mix(in srgb,var(--vital) 40%,transparent))}
  @media (prefers-reduced-motion:no-preference){
    .ecg path{stroke-dasharray:1700;stroke-dashoffset:1700;animation:ecg-draw 2.1s cubic-bezier(.62,.03,.2,1) .25s forwards}
  }
  @keyframes ecg-draw{to{stroke-dashoffset:0}}
  .lp-hero .lp-sub{font-size:clamp(16px,2.5vw,21px);color:var(--muted);max-width:660px;margin:0 auto;line-height:1.5}
  .lp-cta{margin-top:30px;display:flex;flex-direction:column;align-items:center;gap:12px}
  .lp-cta .btn.primary{font-size:16px;padding:.85rem 2rem}
  .lp-note{font-size:13.5px;color:var(--muted);max-width:520px}
  .lp-wrap{max-width:1080px;margin:0 auto;padding:0 24px}
  .lp-section{padding:40px 0;border-top:1px solid var(--hair)}
  .lp-section>h2{font-family:var(--mono);font-size:11.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--good);margin:0 0 16px}
  .lp-prose{font-size:16px;line-height:1.7;color:var(--ink);max-width:720px;white-space:pre-wrap}
  .lp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px}
  .lp-item{display:flex;gap:.7rem;align-items:flex-start;padding:12px 0;border-bottom:1px solid var(--hair)}
  .lp-list .lp-item:last-child{border-bottom:none}
  .lp-item .t{font-weight:700;color:var(--ink)}
  .lp-item .s{font-size:13px;color:var(--muted);margin-top:2px}
  /* Announcements banner — a quiet rotating band (the whole photo shows, letterboxed over a blurred
     copy of itself), sitting under the section's mono eyebrow. The ECG stays the page's one bold mark. */
  .lp-banner{position:relative;aspect-ratio:16/6;max-height:340px;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--hair);margin:0 0 20px}
  .lp-slide{position:absolute;inset:0;opacity:0;transition:opacity .6s ease;display:block;color:inherit;text-decoration:none}
  .lp-slide.on{opacity:1}
  .lp-banner-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:blur(20px) brightness(.7);transform:scale(1.1)}
  .lp-banner-img{position:relative;width:100%;height:100%;object-fit:contain;display:block}
  .lp-banner-cap{position:absolute;left:0;right:0;bottom:0;padding:16px 20px;background:linear-gradient(transparent,rgba(0,0,0,.62));color:#fff}
  .lp-banner-cap .t{font-weight:600;font-size:16px;color:#fff}
  .lp-banner-cap .s{font-size:13px;opacity:.85;margin-top:2px}
  @media (prefers-reduced-motion:reduce){ .lp-slide{transition:none} }
  .lp-two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px}
  @media (max-width:760px){.lp-two{grid-template-columns:1fr}}
  /* Eventique-landing parity: a centered section head, a feature-card grid, and a CTA band. */
  .lp-sechead{text-align:center;max-width:640px;margin:0 auto 34px}
  .lp-sechead h2{font-size:clamp(26px,4vw,38px);font-weight:800;letter-spacing:-.03em;text-transform:none;color:var(--ink);margin:0 0 12px}
  .lp-sechead p{font-size:17px;color:var(--muted);margin:0}
  .lp-feats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
  @media (max-width:960px){.lp-feats{grid-template-columns:repeat(2,1fr)}}
  @media (max-width:560px){.lp-feats{grid-template-columns:1fr}}
  .lp-feat{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:26px 24px;transition:border-color .16s ease,box-shadow .16s ease}
  .lp-feat:hover{border-color:var(--muted);box-shadow:0 10px 30px rgba(0,0,0,.05)}
  .lp-feat .k{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--good);padding-bottom:12px;margin-bottom:14px;border-bottom:1px solid var(--line)}
  .lp-feat h3{font-size:18px;font-weight:700;letter-spacing:-.01em;margin:0 0 7px;color:var(--ink)}
  .lp-feat p{font-size:14px;color:var(--muted);line-height:1.55;margin:0}
  .lp-ctaband{text-align:center;border:1px solid var(--line);border-radius:24px;padding:56px 28px;background:var(--surface);margin:16px 0 8px}
  .lp-ctaband h2{font-size:clamp(26px,4vw,38px);font-weight:800;letter-spacing:-.03em;text-transform:none;color:var(--ink);margin:0 0 12px}
  .lp-ctaband p{color:var(--muted);font-size:17px;max-width:44ch;margin:0 auto 24px}

/* ──── Installed-app (home-screen / standalone) safe-area insets ────
   Launched from the home screen the page goes edge-to-edge (viewport-fit=cover), so honor the
   notch and home indicator. env(safe-area-inset-*) is 0 in a normal browser tab, so these rules
   only affect the installed app. The sticky header's blurred surface extends up under the clock. */
@media (display-mode: standalone){
  body{padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}
  header.app{padding-top:calc(.7rem + env(safe-area-inset-top))}
  main{padding-bottom:calc(2.5rem + env(safe-area-inset-bottom))}
  #toast{bottom:calc(1.2rem + env(safe-area-inset-bottom))}
  .scrim{padding-bottom:calc(1rem + env(safe-area-inset-bottom))}
  #pub .headctl{padding-right:env(safe-area-inset-right)}
}