:root{
    color-scheme:light;
    --surface:#fff;            /* raised surfaces: modal, cards, inputs, buttons */
    --soft:#F1F0EC;            /* subtle hover / passive fills */
    --soft2:#F7F6F3;           /* disabled fills */
    --mixbase:#fff;            /* chips mix their program hue against this */
    --mixink:#000;             /* ...and their text toward this */
    --paper:#FBFAF7; --ink:#1C1B22; --muted:#6B6A76; --faint:#9A9AA5;
    --hair:#E7E4DC; --hair-strong:#D8D4C9;
    --accent:#45459E; --accent-dk:#2E2E63; --accent-tint:#ECECF6;
    --today:#C0392B;
    --idea-bg:transparent;
    --cell-min:88px;
    --radius:7px;
    --shadow:0 1px 2px rgba(28,27,34,.06), 0 8px 24px rgba(28,27,34,.08);
    /* program hues */
    --p-kab:#6D5AE6; --p-din:#C0722E; --p-tot:#1F9488; --p-lit:#CE5590;
    --p-wan:#2F7DC4; --p-lch:#A23A5B; --p-sho:#4E9A3D; --p-oth:#5A5966;
    /* reference layer colors now come per-calendar (hex) from /references */
  }
  *{box-sizing:border-box}
  html,body{margin:0;padding:0}
  /* save/status toast */
  .toast{
    position:fixed;left:50%;bottom:22px;transform:translateX(-50%) translateY(12px);z-index:100;
    background:var(--ink);color:var(--paper);font-size:12.5px;font-weight:500;padding:9px 15px;border-radius:22px;
    box-shadow:var(--shadow);opacity:0;pointer-events:none;display:flex;align-items:center;gap:8px;
    transition:opacity .18s ease, transform .18s ease;
  }
  .toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
  .toast.ok{background:#1F7A4D;color:#fff}
  .toast.err{background:#A3341F;color:#fff}
  .toast.busy::before{content:"";width:11px;height:11px;flex:0 0 auto;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite}
  @keyframes spin{to{transform:rotate(360deg)}}
  body{
    background:var(--paper); color:var(--ink);
    font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
    font-size:13px; line-height:1.4; -webkit-font-smoothing:antialiased;
  }
  .wrap{max-width:1180px;margin:0 auto;padding:0 18px 80px}

  /* ---- top control bar (sticky) ---- */
  .bar{
    position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--paper) 94%,transparent);
    backdrop-filter:blur(8px);border-bottom:1px solid var(--hair-strong);
    padding:12px 0 10px;margin-bottom:0;
  }
  .bar-inner{max-width:1180px;margin:0 auto;padding:0 18px;display:flex;gap:12px;align-items:center;flex-wrap:wrap}
  .bar-inner.row1{flex-wrap:nowrap}          /* account stays on the title row; the title truncates instead */
  .bar-inner.row2{margin-top:9px}
  .grow-sp{flex:1 1 20px}
  .brand{display:flex;flex-direction:column;gap:1px;min-width:0}
  .brandline{display:flex;align-items:center;gap:9px;min-width:0}
  .brand h1{
    font-family:Fraunces,serif;font-weight:600;font-size:19px;letter-spacing:.1px;margin:0;line-height:1.1;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;
  }
  .brand .sub{color:var(--muted);font-size:11.5px;letter-spacing:.2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .controls{display:flex;align-items:center;gap:12px;flex-wrap:wrap;min-width:0}
  .help-btn{
    position:relative;width:28px;height:28px;flex:0 0 auto;padding:0;border-radius:50%;border:1px solid var(--hair-strong);
    background:var(--surface);color:var(--muted);font:inherit;font-size:14px;font-weight:600;line-height:1;cursor:pointer;transition:.12s;
    display:inline-flex;align-items:center;justify-content:center;
  }
  .help-btn:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-tint)}
  .help-btn.has-news::after{content:"";position:absolute;top:-1px;right:-1px;width:8px;height:8px;border-radius:50%;background:var(--today);border:2px solid var(--paper)}

  /* account: sign-in button, or signed-in avatar with a click menu */
  .authslot{display:flex;align-items:center;gap:8px;flex:0 0 auto}
  .signingin{display:inline-flex;align-items:center;gap:7px;font-size:12px;color:var(--muted);white-space:nowrap}
  .signingin .ndoc-spin{width:13px;height:13px}

  [hidden]{display:none !important}   /* class display rules must not override the hidden attribute */
  /* ---- auth gate: full-screen sign-in over the app (members-only surface) ---- */
  .gate-scrim{position:fixed;inset:0;z-index:60;background:var(--paper,#FAF9F6);display:flex;align-items:flex-start;justify-content:center;padding:14vh 20px 20px}
  .gate{max-width:340px;width:100%;text-align:center}
  .gate h1{font-family:Fraunces,serif;font-weight:600;font-size:24px;margin:0 0 6px}
  .gate p{color:var(--muted);font-size:13.5px;margin:0 0 18px}
  .signin-card{background:var(--surface);border:1px solid var(--hair-strong);border-radius:12px;box-shadow:var(--shadow);padding:18px;text-align:left}
  .signin-card .btn.block{width:100%;justify-content:center}
  .signin-or{text-align:center;color:var(--muted);font-size:11.5px;margin:12px 0;position:relative}
  .signin-or::before,.signin-or::after{content:"";position:absolute;top:50%;width:40%;height:1px;background:var(--hair)}
  .signin-or::before{left:0}.signin-or::after{right:0}
  .signin-email{display:flex;flex-direction:column;gap:8px}
  .signin-email input{font:inherit;font-size:13px;padding:8px 10px;border:1px solid var(--hair-strong);border-radius:8px;background:var(--surface);color:var(--ink)}
  .signin-email input:focus{outline:2px solid var(--accent-tint);outline-offset:1px;border-color:var(--accent)}
  .gate-busy{display:inline-flex;align-items:center;gap:8px;color:var(--muted);font-size:13px;justify-content:center}
  .contact-line{font-size:11.5px;color:var(--muted);margin:12px 0 0;text-align:center}
  .contact-line a{color:var(--accent);font-weight:600;text-decoration:underline}
  .signin-sent{text-align:center;display:flex;flex-direction:column;align-items:center;gap:5px}
  .signin-sent .sent-emoji{font-size:26px;line-height:1}
  .signin-sent b{font-size:14px}
  .signin-sent p{margin:2px 0;font-size:12.5px;line-height:1.5;color:var(--ink)}
  .signin-sent .sent-spam{color:var(--muted);font-size:12px}
  .signin-sent .btn{margin-top:6px}
  .acct{position:relative;display:flex}
  .avatar{
    width:30px;height:30px;flex:0 0 auto;border-radius:50%;border:1px solid var(--hair-strong);
    background:var(--accent);color:#fff;font:inherit;font-size:12px;font-weight:600;line-height:1;
    cursor:pointer;padding:0;overflow:hidden;display:flex;align-items:center;justify-content:center;transition:.12s;
  }
  .avatar:hover{box-shadow:0 0 0 2px var(--accent-tint)}
  .avatar img{width:100%;height:100%;object-fit:cover;display:block}
  .acct-menu{
    position:absolute;top:calc(100% + 8px);right:0;min-width:190px;z-index:60;
    background:var(--surface);border:1px solid var(--hair-strong);border-radius:10px;box-shadow:var(--shadow);
    padding:10px;display:flex;flex-direction:column;gap:8px;
  }
  .acct-menu[hidden]{display:none}
  .acct-who{display:flex;flex-direction:column;gap:2px;padding:2px 2px 9px;border-bottom:1px solid var(--hair)}
  .acct-who b{font-size:13px}
  .acct-who .role{font-size:11px;color:var(--muted)}
  .acct-menu .btn{text-align:left}

  /* calendar settings pop-over (⚙ #ovfBtn → #ovfPanel): the layer toggles, anchored to the ⚙ */
  .ovf{position:relative;display:inline-flex}
  .ovf-panel{
    position:absolute;right:0;top:100%;margin-top:6px;z-index:55;
    width:min(280px, calc(100vw - 28px));
    background:var(--surface);border:1px solid var(--hair-strong);border-radius:12px;box-shadow:var(--shadow);
    padding:10px;display:flex;flex-direction:column;gap:6px;
  }
  .ovf-panel[hidden]{display:none}
  .ovf-h{font-size:10.5px;font-weight:600;color:var(--faint);text-transform:uppercase;letter-spacing:.7px;padding:2px 6px}
  .yearnav{display:flex;align-items:center;gap:4px}
  .yearnav .yr{font-family:Fraunces,serif;font-weight:600;font-size:15px;min-width:52px;text-align:center;white-space:nowrap}
  .btn{
    font:inherit;font-size:12px;font-weight:500;color:var(--ink);
    background:var(--surface);border:1px solid var(--hair-strong);border-radius:6px;
    padding:6px 11px;cursor:pointer;transition:.12s;white-space:nowrap;
  }
  .btn:hover{border-color:var(--accent);color:var(--accent)}
  .btn.icon{padding:6px 9px;font-size:13px;line-height:1}
  .btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
  .btn.primary:hover{background:var(--accent-dk);border-color:var(--accent-dk);color:#fff}
  .btn.ghost{background:transparent;border-color:transparent;color:var(--muted)}
  .btn.ghost:hover{color:var(--accent);background:var(--accent-tint)}
  .seg{display:inline-flex;border:1px solid var(--hair-strong);border-radius:6px;overflow:hidden;background:var(--surface)}
  .seg button{font:inherit;font-size:11.5px;font-weight:500;border:0;background:transparent;padding:6px 10px;cursor:pointer;color:var(--muted)}
  .seg button[aria-pressed="true"]{background:var(--accent);color:#fff}
  .roleline{display:flex;align-items:center;gap:7px}
  .roleline .lbl{font-size:11px;color:var(--faint);text-transform:uppercase;letter-spacing:.6px}

  /* ---- layer toggles (inside the ⚙ pop-over) ---- */
  .layers{display:flex;flex-direction:column;gap:1px}
  .lyr{display:flex;align-items:center;gap:8px;width:100%;padding:6px;border:0;border-radius:6px;background:transparent;font:inherit;font-size:12.5px;color:var(--muted);text-align:left;cursor:pointer;user-select:none}
  .lyr:hover{background:var(--soft);color:var(--ink)}
  .lyr .dot{width:10px;height:10px;border-radius:3px;flex:0 0 auto;border:1px solid rgba(0,0,0,.08)}
  .lyr .swatch-ref{width:10px;height:10px;border-radius:50%;flex:0 0 auto}
  .lyr[data-on="false"]{opacity:.45}
  .lyr[data-on="false"] .name{text-decoration:line-through}
  .btn.icon svg{display:block}

  /* ---- weekday header (sticky) ---- */
  .weekhead{
    position:sticky;top:var(--bar-h,96px);z-index:30;background:var(--paper);
    display:grid;grid-template-columns:repeat(8,minmax(0,1fr));
    border-bottom:1px solid var(--hair-strong);
  }
  .weekhead .corner{
    background:rgba(69,69,158,.06);border-right:2px solid rgba(69,69,158,.30);
    font-size:9px;font-weight:600;letter-spacing:.6px;text-transform:uppercase;
    color:var(--faint);padding:7px 8px 6px;
  }
  .weekhead .wd{
    text-align:left;padding:7px 8px 6px;font-size:10.5px;font-weight:600;
    color:var(--faint);text-transform:uppercase;letter-spacing:.8px;
  }
  .weekhead .wd.we{color:#B98E86}

  /* ---- month block ---- */
  .month{border-bottom:1px solid var(--hair-strong)}
  .myear-head{
    position:sticky;top:calc(var(--bar-h,96px) + var(--wh-h,28px));z-index:20;background:var(--paper);
    font-family:Fraunces,serif;font-weight:600;font-size:15px;letter-spacing:.2px;
    padding:10px 0 8px 12px;border-bottom:1px solid var(--hair);
  }
  .myear-head .yy{color:var(--faint);font-family:Inter,sans-serif;font-size:11px;font-weight:600;letter-spacing:1px;margin-left:6px}
  .mgrid{display:grid;grid-template-columns:repeat(8,minmax(0,1fr))}
  .gcell{
    border-top:1px solid var(--hair);border-right:2px solid rgba(69,69,158,.30);
    padding:5px 5px 6px;display:flex;flex-direction:column;gap:3px;min-width:0;
    background:rgba(69,69,158,.06);position:relative;cursor:default;
  }
  .gcell:hover{background:rgba(69,69,158,.10)}
  .gcell .ghint{font-size:8.5px;letter-spacing:.6px;text-transform:uppercase;color:var(--faint);opacity:.7}
  .gchip{
    font-size:10px;line-height:1.25;border-radius:5px;padding:2px 6px;cursor:pointer;
    border-left:3px solid var(--c);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
    display:flex;align-items:baseline;gap:4px;
  }
  .gchip .gt{overflow:hidden;text-overflow:ellipsis}
  .gchip .gr{opacity:.7;font-size:9px;flex:0 0 auto}
  .gchip.idea{background:transparent;border:1px dashed var(--c);border-left-width:3px;color:var(--c)}
  .gchip.draft{background:color-mix(in srgb,var(--c) 13%,var(--mixbase));border:1px dashed var(--c);border-left-width:3px;color:color-mix(in srgb,var(--c) 78%,var(--mixink))}
  .gchip.confirmed,.gchip.proposed{background:color-mix(in srgb,var(--c) 20%,var(--mixbase));border:1px solid color-mix(in srgb,var(--c) 30%,var(--mixbase));border-left:3px solid var(--c);color:color-mix(in srgb,var(--c) 82%,var(--mixink))}
  .gchip.approved{background:var(--c);border:1px solid var(--c);border-left:3px solid color-mix(in srgb,var(--c) 60%,var(--mixink));color:#fff}
  .gchip.cancelled{background:var(--soft);border:1px solid var(--hair-strong);border-left:3px solid var(--faint);color:var(--faint);text-decoration:line-through;opacity:.75}
  .cell{
    min-width:0;overflow:hidden;
    min-height:var(--cell-min);border-left:1px solid var(--hair);border-top:1px solid var(--hair);
    padding:3px 4px 5px;position:relative;cursor:default;transition:background .1s;
  }
  .cell:hover{background:var(--surface)}
  .cell.we{background:rgba(69,69,158,.022)}
  .cell.other{background:repeating-linear-gradient(135deg,transparent,transparent 6px,rgba(0,0,0,.012) 6px,rgba(0,0,0,.012) 7px)}
  .cell.other .dnum{color:var(--faint)}
  .cell.today .dnum{background:var(--today);color:#fff}
  .cell.today{box-shadow:inset 0 0 0 2px var(--today)}
  .dnum{
    display:inline-flex;align-items:center;justify-content:center;
    min-width:19px;height:19px;padding:0 5px;border-radius:11px;
    font-size:11px;font-weight:600;color:var(--muted);margin:1px 0 3px;
  }

  /* add buttons — the only way to add from the calendar; revealed on hover/focus (spec 2026-10-01 §7) */
  .cell-add,.gadd,.zone-add{
    position:absolute;top:3px;right:3px;width:20px;height:20px;padding:0;border:0;border-radius:5px;
    background:var(--surface);color:var(--accent);font:inherit;font-size:15px;font-weight:500;line-height:1;
    display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:0;transition:opacity .1s,background .1s;
  }
  .cell:hover .cell-add,.gcell:hover .gadd,.qzone:hover .zone-add,
  .cell-add:focus-visible,.gadd:focus-visible,.zone-add:focus-visible{opacity:.8}
  .cell-add:hover,.gadd:hover,.zone-add:hover{opacity:1;background:var(--accent-tint)}
  .ghead{display:flex;align-items:center;justify-content:space-between;gap:4px;min-height:20px}
  .gcell .gadd{position:static;flex:0 0 auto;width:18px;height:18px;font-size:14px}
  @media (hover:none){   /* touch: no hover, so the + buttons show faintly — at a 24px target */
    .cell-add,.gadd,.zone-add{opacity:.5}
    .cell-add,.zone-add{width:24px;height:24px;top:1px;right:1px}
    .qzone > :not(.zone-add):first-child{margin-right:26px}
  }

  /* chips */
  .chips{display:flex;flex-direction:column;gap:2px;min-width:0}
  .chip{
    font-size:11px;line-height:1.25;border-radius:4px;padding:2px 5px 2px 6px;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;
    border-left:3px solid var(--c,var(--p-oth));position:relative;
  }
  .chip .t{font-weight:500}
  .chip .time{font-size:9.5px;color:inherit;opacity:.7;font-weight:400;margin-right:3px}
  /* planning status treatments */
  .chip.idea{background:transparent;border:1px dashed var(--c);border-left-width:3px;color:var(--c)}
  .chip.draft{background:color-mix(in srgb,var(--c) 13%,var(--mixbase));border:1px dashed var(--c);border-left-width:3px;color:color-mix(in srgb,var(--c) 78%,var(--mixink))}
  .chip.confirmed,.chip.proposed{background:color-mix(in srgb,var(--c) 20%,var(--mixbase));border:1px solid color-mix(in srgb,var(--c) 30%,var(--mixbase));border-left:3px solid var(--c);color:color-mix(in srgb,var(--c) 82%,var(--mixink))}
  .chip.approved{background:var(--c);border:1px solid var(--c);border-left:3px solid color-mix(in srgb,var(--c) 60%,var(--mixink));color:#fff}
  .chip.approved .lock{margin-left:3px;opacity:.85}
  .chip.cancelled{background:var(--soft);border:1px solid var(--hair-strong);border-left:3px solid var(--faint);color:var(--faint);text-decoration:line-through;opacity:.75}
  /* reference chips: quiet ground */
  .chip.ref{
    background:transparent;border:0;border-left:0;padding-left:12px;color:var(--muted);
    font-size:10.5px;font-weight:400;
  }
  .chip.ref::before{content:"";position:absolute;left:3px;top:6px;width:6px;height:6px;border-radius:50%;background:var(--c)}
  .chip.ref .t{font-weight:400}
  .chip.more{cursor:pointer;color:var(--faint);font-size:10px;padding:1px 5px;border:0;background:transparent}
  .chip.more:hover{color:var(--accent)}

  /* ---- modal ---- */
  .scrim{position:fixed;inset:0;background:rgba(28,27,34,.34);z-index:60;display:none;align-items:flex-start;justify-content:center;padding:48px 16px;overflow:auto}
  .scrim.open{display:flex}
  .modal{
    background:var(--surface);border-radius:12px;box-shadow:var(--shadow);width:100%;max-width:640px;
    border:1px solid var(--hair-strong);overflow:hidden;
    display:flex;flex-direction:column;max-height:calc(100dvh - 96px);
  }
  .modal .mhead{padding:15px 18px 12px;border-bottom:1px solid var(--hair);display:flex;align-items:center;gap:10px;flex-shrink:0}
  .modal .mhead .stripe{width:5px;height:34px;border-radius:3px;background:var(--c,var(--accent))}
  body.modal-open{overflow:hidden}   /* the background must not scroll behind an open modal */
  .mhead-title{flex:1;min-width:0;display:flex;align-items:center;gap:8px}
  .mhead-badges{display:flex;align-items:center;gap:6px;flex:0 0 auto}
  .modal .mhead h2{font-family:Fraunces,serif;font-weight:600;font-size:16px;margin:0;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .modal .mhead .badge{font-size:10px;text-transform:uppercase;letter-spacing:.6px;font-weight:600;padding:3px 7px;border-radius:20px}
  .mhead-actions{display:flex;align-items:center;gap:7px;flex:0 0 auto}
  .mhead-close{
    flex:0 0 auto;width:28px;height:28px;margin-left:4px;border-radius:6px;
    border:1px solid transparent;background:transparent;color:var(--faint);
    font-size:20px;line-height:1;cursor:pointer;transition:.12s;
    display:flex;align-items:center;justify-content:center;
  }
  .mhead-close:hover{background:var(--soft);color:var(--ink);border-color:var(--hair-strong)}
  .statussel{font:inherit;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.4px;color:var(--ink);background:var(--surface);border:1px solid var(--hair-strong);border-radius:6px;padding:5px 7px;cursor:pointer}
  .statussel:focus{outline:2px solid var(--accent-tint);border-color:var(--accent)}
  .btn.sm{padding:5px 10px;font-size:11.5px}
  .badge.b-idea{background:#F0F0F3;color:#75747F}
  .badge.b-draft{background:#FBF3E4;color:#9A7B2E}
  .badge.b-proposed{background:#EAEAF6;color:#5150A6}
  .badge.b-confirmed{background:#E7F1EA;color:#3C7A55}
  .badge.b-approved{background:var(--accent);color:#fff}
  .badge.b-live{background:#E7F4E9;color:#2F7D3B}
  .badge.b-cancelled{background:#F1EFED;color:#8A8896;text-decoration:line-through}
  .badge.b-past{background:#F0F0F3;color:#75747F}
  .badge.b-ref{background:var(--soft);color:#8A8896}
  .mhead-ico{flex:0 0 auto;width:28px;height:28px;border-radius:6px;border:1px solid transparent;background:transparent;color:var(--faint);cursor:pointer;transition:.12s;display:flex;align-items:center;justify-content:center}
  .mhead-ico:hover{background:var(--soft);color:var(--ink);border-color:var(--hair-strong)}
  .mbody{padding:14px 18px 4px;display:grid;grid-template-columns:1fr 1fr;gap:11px 12px;overflow-y:auto;min-height:0}
  .fld{display:flex;flex-direction:column;gap:4px}
  .fld.full{grid-column:1/3}
  .fld label{font-size:10.5px;font-weight:600;color:var(--faint);text-transform:uppercase;letter-spacing:.6px}
  .fld input,.fld select,.fld textarea{
    font:inherit;font-size:13px;color:var(--ink);background:var(--surface);
    border:1px solid var(--hair-strong);border-radius:6px;padding:7px 8px;width:100%;
  }
  .fld input:focus,.fld select:focus,.fld textarea:focus{outline:2px solid var(--accent-tint);border-color:var(--accent)}
  .fld textarea{resize:vertical;min-height:52px}
  .fld input:disabled,.fld select:disabled,.fld textarea:disabled{background:var(--soft2);color:var(--muted);cursor:not-allowed}
  .leadchips{display:flex;flex-wrap:wrap;gap:4px}
  .leadchip{font-size:11px;padding:3px 7px;border-radius:20px;border:1px solid var(--hair-strong);cursor:pointer;background:var(--surface);color:var(--muted)}
  .leadchip[aria-pressed="true"]{background:var(--accent-tint);border-color:var(--accent);color:var(--accent-dk);font-weight:500}
  .leadchip:disabled{cursor:not-allowed;opacity:.6}
  .leadchips.pick{max-height:120px;overflow:auto;padding:5px;border:1px solid var(--hair);border-radius:8px}
  .leadchips.pick:empty::after,.picknote{content:attr(data-empty);font-size:11px;color:var(--faint)}
  /* typeahead (Volunteers): selected chips + search input + suggestion menu */
  .typeahead{position:relative;display:flex;flex-wrap:wrap;gap:4px;align-items:center;background:var(--surface);border:1px solid var(--hair-strong);border-radius:8px;padding:5px}
  .typeahead.dis{background:var(--soft2);cursor:not-allowed}
  .ta-chip{display:inline-flex;align-items:center;gap:5px;font-size:11px;padding:3px 5px 3px 8px;border-radius:20px;background:var(--accent-tint);border:1px solid var(--accent);color:var(--accent-dk)}
  .ta-chip button{border:0;background:none;cursor:pointer;color:var(--accent-dk);font-size:14px;line-height:1;padding:0}
  .ta-input{flex:1 1 90px;min-width:90px;border:0!important;padding:2px 4px!important;font:inherit;font-size:12px;background:transparent!important}
  .ta-input:focus{outline:none!important}
  .ta-input:disabled{background:transparent!important}
  .ta-menu{position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:40;max-height:210px;overflow:auto;background:var(--surface);border:1px solid var(--hair-strong);border-radius:8px;box-shadow:var(--shadow);padding:4px}
  .ta-menu[hidden]{display:none}
  .ta-opt{padding:6px 8px;border-radius:6px;cursor:pointer;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .ta-opt.active,.ta-opt:hover{background:var(--accent-tint)}
  .ta-empty{padding:6px 8px;color:var(--faint);font-size:11px}
  .fld .hint{text-transform:none;font-weight:400;color:var(--faint);letter-spacing:0}
  /* when/time: date + inline all-day, then side-by-side times (only when timed) */
  .daterow{display:flex;gap:12px;align-items:center}
  .daterow > input{flex:0 0 50%;max-width:50%}   /* Date field 50% wide; All-day centers beside it */
  /* bordered clusters for When / Where */
  .fieldgroup{border:1px solid var(--hair);border-radius:9px;padding:12px;display:flex;flex-direction:column;gap:10px;background:color-mix(in srgb,var(--soft2) 45%,transparent)}
  .fieldgroup-h{font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
  /* program dropdown multiselect */
  .msel{position:relative}
  .msel-btn{width:100%;display:flex;align-items:center;justify-content:space-between;gap:8px;font:inherit;font-size:13px;
    padding:7px 10px;border:1px solid var(--hair-strong);border-radius:8px;background:var(--surface);color:var(--ink);cursor:pointer;text-align:left}
  .msel-btn:hover:not(:disabled){border-color:var(--accent)}
  .msel-btn:disabled{cursor:not-allowed;opacity:.6}
  .msel-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .msel-label.placeholder{color:var(--faint)}
  .msel-caret{flex:0 0 auto;color:var(--muted);font-size:11px}
  .msel-menu{position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:20;max-height:240px;overflow:auto;
    background:var(--surface);border:1px solid var(--hair-strong);border-radius:8px;box-shadow:var(--shadow);padding:4px}
  /* these are <label>s inside .fld — override the uppercase/faint/10.5px
     field-label styling (which out-specifies a bare .msel-opt) */
  .fld label.msel-opt{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:6px;cursor:pointer;
    font-size:13px;font-weight:400;color:var(--ink);text-transform:none;letter-spacing:normal}
  .fld label.msel-opt:hover{background:var(--soft2)}
  .fld label.msel-opt input{margin:0;flex:0 0 auto;width:auto}   /* not the 100%-wide form input */
  .allday-inline{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);white-space:nowrap;padding-bottom:9px;cursor:pointer}
  .allday-inline input{width:auto}
  .timerow{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:11px}
  .whenhint{font-size:11px;color:var(--muted);margin-top:6px}
  /* venue picker: selected pill / editable "other" field / New-venue option */
  .venuepick .venue-other-wrap:not([hidden]){display:flex;align-items:center;gap:6px;flex:1}
  .venue-other{flex:1;border:0!important;padding:2px 4px!important;font:inherit;font-size:12px;background:transparent!important}
  .venue-other:focus{outline:none!important}
  .venue-clear{border:0;background:none;cursor:pointer;color:var(--muted);font-size:16px;line-height:1;padding:0 2px;flex:0 0 auto}
  .venue-clear:hover{color:var(--accent)}
  .ta-opt.ta-new{color:var(--accent-dk);font-weight:500;border-top:1px solid var(--hair);margin-top:2px;padding-top:8px}
  .meta{grid-column:1/3;font-size:11px;color:var(--faint);border-top:1px dashed var(--hair);padding-top:9px;display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}
  .mfoot{padding:12px 18px 16px;display:flex;gap:8px;align-items:center;border-top:1px solid var(--hair);margin-top:8px;flex-shrink:0}
  .mfoot .push{flex:1}
  .mfoot:not(:has(button, .savestat)){display:none}   /* nothing to act on (e.g. a past approved event) — no empty band */
  .danger{color:#B23B3B;border-color:#E7C9C9}
  .danger:hover{background:#FBEEEE;border-color:#B23B3B;color:#B23B3B}
  /* autosave status indicator (workspace footer) */
  .savestat{font-size:11.5px;font-weight:500;letter-spacing:.2px;padding:5px 4px;white-space:nowrap;user-select:none}
  .savestat.clean{color:var(--faint)}
  .savestat.clean::before{content:"✓ "}
  .savestat.dirty{color:#B07D2B}
  .savestat.saving{color:var(--muted);font-style:italic}
  .savestat.error{color:#B23B3B;cursor:pointer;text-decoration:underline}
  .btn.xs{padding:2px 7px;font-size:10.5px;border-radius:5px}
  .locknote{font-size:11px;color:var(--muted);background:var(--soft2);border:1px solid var(--hair);border-radius:6px;padding:8px 10px;grid-column:1/3;display:flex;align-items:center;gap:8px}
  .locknote a{color:var(--accent);font-weight:500;text-decoration:none;white-space:nowrap}
  .locknote a:hover{text-decoration:underline}

  /* notes doc (Google Docs embed) */
  .ndoc{display:flex;flex-direction:column;gap:6px}
  /* Planning Notes section: fills the panel height; the preview scrolls internally */
  .ndoc-full{display:flex;flex-direction:column;gap:8px;min-height:0}
  .ndoc-full.has-doc{flex:1}
  .ndoc-full.has-doc .ndoc-frame{flex:1;height:auto;min-height:0}
  .ndoc-frame{width:100%;height:360px;border:1px solid var(--hair-strong);border-radius:8px;background:var(--surface)}
  .ndoc-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;flex:0 0 auto}
  .ndoc-empty{display:flex;flex-direction:column;gap:6px;padding:10px;border:1px dashed var(--hair-strong);border-radius:8px;background:var(--soft2)}
  .ndoc-loading{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted);padding:14px;border:1px solid var(--hair-strong);border-radius:8px}
  .ndoc-spin{width:14px;height:14px;border:2px solid var(--hair-strong);border-top-color:var(--accent);border-radius:50%;display:inline-block;animation:ndoc-spin .8s linear infinite}
  @keyframes ndoc-spin{to{transform:rotate(360deg)}}
  .ndoc-empty .btn{align-self:flex-start}
  .ndoc-warn{font-size:12px;color:#9A7B2E}
  .legacynotes{white-space:pre-wrap;font-size:12px;color:var(--muted);background:var(--soft2);border:1px solid var(--hair);border-radius:6px;padding:8px 10px}
  .refdesc{white-space:pre-wrap;overflow-wrap:anywhere;font-size:12px;line-height:1.5;color:var(--muted);background:var(--soft2);border:1px solid var(--hair);border-radius:6px;padding:8px 10px;max-height:220px;overflow-y:auto}
  .refdesc a{color:var(--accent);text-decoration:none}
  .refdesc a:hover{text-decoration:underline}
  .reflink{color:var(--accent);font-weight:500;font-size:12px;text-decoration:none}
  .reflink:hover{text-decoration:underline}

  /* publish to Eventbrite */
  .pubpanel{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:12px}
  .b-published{background:#E7F4E9;color:#2F7D3B;border:1px solid #BFE3C6;border-radius:10px;padding:1px 7px;font-size:11px}
  .b-error{background:#FBEAEA;color:#B23A3A;border:1px solid #EEC3C3;border-radius:10px;padding:1px 7px;font-size:11px}
  .b-draft{background:#EAF1FB;color:#2F5FA3;border:1px solid #C4D8F0;border-radius:10px;padding:1px 7px;font-size:11px}
  .b-unpublished,.b-publishing{background:var(--soft);color:#6b6960;border:1px solid var(--hair);border-radius:10px;padding:1px 7px;font-size:11px}

  /* legend footer */
  .legend{max-width:1180px;margin:14px auto 0;padding:0 18px;color:var(--faint);font-size:11px;display:flex;gap:16px;flex-wrap:wrap;align-items:center}
  .k{display:inline-flex;align-items:center;gap:5px}

  .banner{max-width:1180px;margin:10px auto 0;padding:9px 14px;background:var(--accent-tint);border:1px solid #D5D5EC;border-radius:8px;color:var(--accent-dk);font-size:11.5px;line-height:1.5}
  .banner b{color:var(--accent-dk)}

  /* ---- quarter (zoomed-out) view ---- */
  #quarter{display:none;padding-top:6px}
  #quarter.on{display:block}
  .qgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
  .qcol{border:1px solid var(--hair-strong);border-radius:10px;overflow:hidden;background:var(--surface);min-width:0}
  .qhead{font-family:Fraunces,serif;font-weight:600;font-size:15px;padding:9px 12px 8px;border-bottom:1px solid var(--hair);display:flex;justify-content:space-between;align-items:baseline}
  .qhead .qy{font-family:Inter,sans-serif;font-size:10px;letter-spacing:1px;color:var(--faint);font-weight:600}
  .qtbd{padding:6px 10px;border-top:1px dashed var(--hair);background:rgba(69,69,158,.03);display:flex;flex-direction:column;gap:3px}
  .qtbd .lbl{font-size:9px;letter-spacing:.6px;text-transform:uppercase;color:var(--faint)}
  .qweek{display:grid;grid-template-columns:38px minmax(0,1fr) minmax(0,1fr);border-top:1px solid var(--hair);min-height:38px}
  .qwk{font-size:10px;color:var(--faint);padding:5px 3px 0 7px;line-height:1.15;border-right:1px solid var(--hair)}
  .qzone{padding:4px;display:flex;flex-direction:column;gap:2px;min-width:0;cursor:default;position:relative}
  .qzone:hover,.qzone.wknd:hover{background:var(--accent-tint)}
  .qzone > :not(.zone-add):first-child{margin-right:22px}   /* room for the + beside the lane's first chip — it never covers (or takes clicks from) a chip */
  .qzone.wknd{background:rgba(69,69,158,.035);border-left:1px solid var(--hair)}
  .qzone .zlbl{font-size:11px;color:#D3D0C8;text-align:center;padding-top:2px}
  .qchip{font-size:10px;line-height:1.25;border-radius:4px;padding:2px 5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;border-left:3px solid var(--c)}
  .qchip.idea{background:transparent;border:1px dashed var(--c);border-left-width:3px;color:var(--c)}
  .qchip.draft{background:color-mix(in srgb,var(--c) 13%,var(--mixbase));border:1px dashed var(--c);border-left-width:3px;color:color-mix(in srgb,var(--c) 80%,var(--mixink))}
  .qchip.confirmed,.qchip.proposed{background:color-mix(in srgb,var(--c) 20%,var(--mixbase));border:1px solid color-mix(in srgb,var(--c) 30%,var(--mixbase));border-left:3px solid var(--c);color:color-mix(in srgb,var(--c) 82%,var(--mixink))}
  .qchip.approved{background:var(--c);color:#fff;border:1px solid var(--c);border-left:3px solid color-mix(in srgb,var(--c) 60%,var(--mixink))}
  .qchip.cancelled{background:var(--soft);border:1px solid var(--hair-strong);border-left:3px solid var(--faint);color:var(--faint);text-decoration:line-through;opacity:.75}
  .qchip.ref{background:transparent;border:0;border-left:0;padding-left:11px;color:var(--muted);font-size:9.5px;position:relative}
  .qchip.ref::before{content:"";position:absolute;left:2px;top:6px;width:5px;height:5px;border-radius:50%;background:var(--c)}

  /* ---- segmented button control (When + Where, identical) ----
     Hugs its buttons (no trailing space), wraps if they exceed the row, and
     draws a divider between every segment. */
  .whenseg{display:inline-flex;flex-wrap:wrap;width:fit-content;max-width:100%;
    border:1px solid var(--hair-strong);border-radius:6px;overflow:hidden;background:var(--surface)}
  .whenseg button{font:inherit;font-size:11px;border:0;border-left:1px solid var(--hair-strong);
    background:transparent;padding:5px 10px;cursor:pointer;color:var(--muted)}
  .whenseg button:first-child{border-left:0}
  .whenseg button[aria-pressed="true"]{background:var(--accent);color:#fff}
  .whenseg button:disabled{cursor:not-allowed;opacity:.5}

  @media (max-width:820px){ .qgrid{grid-template-columns:1fr} }

  @media (max-width:720px){
    :root{--cell-min:70px}
    .mbody{grid-template-columns:1fr}
    .mbody > .fld.full,.mbody > .meta,.mbody > .locknote{grid-column:1}   /* collapse the spanning top-level fields; leaves nested grids (timerow) alone */
  }

  /* ---- phones (≤600px; JS uses the same breakpoint — PHONE_MQ): one header row,
     "EST Planning" + ☰. Everything else in the two desktop rows lives in the ☰ menu;
     the list is the only view and the floating + adds. ---- */
  .phonebar{display:none}
  .pb-title{font-family:Fraunces,serif;font-weight:600;font-size:17px;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  #menuBtn{position:relative;padding:6px 8px;color:var(--ink)}
  #menuBtn.has-news::after{content:"";position:absolute;top:1px;right:1px;width:8px;height:8px;border-radius:50%;background:var(--today);border:2px solid var(--paper)}
  .fab{display:none}
  @media (max-width:600px){
    .bar{padding:9px 0}
    .bar-inner.row1,.bar-inner.row2{display:none}
    .bar-inner.phonebar{display:flex;flex-wrap:nowrap;padding:0 8px 0 14px;gap:8px}
    .wrap{padding:0 12px 100px}                /* room under the last row for the floating + */
    .fab{display:flex;align-items:center;justify-content:center;position:fixed;right:16px;bottom:calc(18px + env(safe-area-inset-bottom));z-index:35;
      width:54px;height:54px;padding:0 0 3px;border:0;border-radius:50%;background:var(--accent);color:#fff;font:inherit;font-size:30px;line-height:1;box-shadow:var(--shadow);cursor:pointer}
    .fab:active{background:var(--accent-dk)}
    .toast{bottom:calc(86px + env(safe-area-inset-bottom))}   /* clear of the floating + */
  }

  /* phone menu: a sheet from the right over a dim scrim */
  .menu-scrim{position:fixed;inset:0;z-index:64;background:rgba(28,27,34,.34)}
  .menu-panel{position:fixed;top:0;right:0;bottom:0;z-index:65;width:min(300px,calc(100vw - 40px));overflow-y:auto;
    background:var(--surface);border-left:1px solid var(--hair-strong);box-shadow:var(--shadow);padding-bottom:env(safe-area-inset-bottom)}
  .menu-panel:focus{outline:none}
  body.menu-open{overflow:hidden}
  .menu-head{display:flex;align-items:center;gap:8px;padding:10px 10px 10px 16px;border-bottom:1px solid var(--hair)}
  .menu-sec{display:flex;flex-direction:column;gap:8px;padding:12px 16px;border-bottom:1px solid var(--hair)}
  .menu-sec:last-child{border-bottom:0}
  .menu-sec:empty{display:none}
  .menu-sec .ovf-h{padding:0}
  .menu-acct{display:flex;align-items:center;gap:10px;min-width:0}
  .menu-acct .avatar{width:36px;height:36px;font-size:13px;cursor:default}
  .menu-acct .avatar:hover{box-shadow:none}
  .menu-acct .acct-who{border:0;padding:0;min-width:0}
  .menu-acct-acts{display:flex;gap:8px;flex-wrap:wrap}
  .menu-links{gap:0;padding-top:4px;padding-bottom:4px}
  .menu-item{display:flex;align-items:center;gap:8px;width:100%;padding:11px 0;border:0;background:transparent;font:inherit;font-size:14px;font-weight:500;color:var(--ink);text-align:left;cursor:pointer}
  .menu-item:hover{color:var(--accent)}
  .menu-year .yr{flex:1}
  .menu-year .btn.icon{padding:8px 12px}
  .menu-panel .lyr{font-size:13.5px;padding:8px 6px}

  /* ---- list view (#listView, renderList) ---- */
  #listView{display:none;max-width:720px;margin:0 auto}
  #listView.on{display:block}
  .lmhead{position:sticky;top:var(--bar-h,56px);z-index:20;margin:0;padding:16px 4px 6px;background:var(--paper);border-bottom:1px solid var(--hair-strong);
    font-family:Fraunces,serif;font-weight:600;font-size:17px;display:flex;justify-content:space-between;align-items:baseline}
  .lmhead .ly{font-family:Inter,sans-serif;font-size:11px;font-weight:600;letter-spacing:1px;color:var(--faint)}
  .lday{display:flex;gap:12px;padding:10px 4px;border-bottom:1px solid var(--hair);scroll-margin-top:calc(var(--bar-h,56px) + 50px)}
  .lday.past{opacity:.6}
  .ldate{flex:0 0 34px;display:flex;flex-direction:column;align-items:center;line-height:1.1;padding-top:3px}
  .lwd{font-size:10.5px;font-weight:600;letter-spacing:.4px;text-transform:uppercase;color:var(--muted)}
  .ldn{font-family:Fraunces,serif;font-size:19px;font-weight:600}
  .ltbd .ldn{font-family:Inter,sans-serif;font-size:11px;color:var(--muted);padding-top:3px}
  .lday.today .lwd,.lday.today .ldn{color:var(--today)}
  .litems{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
  .lev{display:flex;flex-direction:column;gap:2px;width:100%;padding:6px 9px 7px;border:0;border-left:3px solid var(--c);border-radius:0 6px 6px 0;
    background:transparent;font:inherit;color:var(--ink);text-align:left;cursor:pointer}
  .lev.draft{border-left-style:dashed}
  .lev.proposed,.lev.confirmed{background:color-mix(in srgb,var(--c) 9%,var(--mixbase))}
  .lev.approved{background:color-mix(in srgb,var(--c) 18%,var(--mixbase))}
  .lev.cancelled{border-left-color:var(--faint)}
  .lev.cancelled .lt{color:var(--faint);text-decoration:line-through}
  .lev:hover{background:color-mix(in srgb,var(--c) 24%,var(--mixbase))}
  .lt{font-size:14px;font-weight:600;line-height:1.3}
  .lm{font-size:12px;color:var(--muted)}
  .lrefs{display:flex;flex-wrap:wrap;gap:2px 12px}
  .lref{position:relative;padding:2px 0 2px 11px;border:0;background:transparent;font:inherit;font-size:12px;color:var(--muted);text-align:left;cursor:pointer}
  .lref::before{content:"";position:absolute;left:0;top:8px;width:6px;height:6px;border-radius:50%;background:var(--c)}
  .lref:hover{color:var(--ink)}
  .lempty{margin:0;padding:12px 4px;color:var(--faint);font-size:12px}

  /* phone: the editor modal becomes a full-screen sheet */
  @media (max-width:600px){
    .scrim{padding:0;align-items:stretch;overflow:hidden}
    .modal{width:100%;max-width:none;height:100dvh;max-height:100dvh;border:0;border-radius:0}
    .modal .mhead{padding:14px 16px 11px}
    .modal .mbody{flex:1 1 auto;padding:14px 16px 8px}
    .modal .mfoot{padding:12px 16px;padding-bottom:calc(14px + env(safe-area-inset-bottom))}
    .whenseg{width:100%}
    .whenseg button{flex:1;text-align:center}
    .mfoot .btn{padding:9px 13px}          /* comfier tap targets */
  }

  /* editor workspace: left rail + section panel */
  /* workspace mode: modal is a fixed-height flex column; mbody is the rail+panel
     row (not the 2-col field grid); only the panel scrolls, the rail stays put. */
  .modal.ws{height:min(760px, calc(100dvh - 96px));max-width:740px}
  /* create modal: sizes to its form (the body scrolls past the cap); phones stay full-screen below */
  .modal.create{height:auto;max-height:min(760px, calc(100dvh - 96px));max-width:740px}
  /* phone: these shells fill the screen (declared AFTER the desktop caps above so
     the equal-specificity mobile rule wins on source order, not just in @media). */
  @media (max-width:600px){ .modal.ws,.modal.create{height:100dvh;max-height:100dvh;max-width:none} }
  .mbody.ws{display:flex;flex:1 1 auto;padding:0;gap:0;min-height:0;overflow:hidden}
  .wsplit{display:flex;flex:1;min-height:0;width:100%}
  .wrail{flex:0 0 176px;display:flex;flex-direction:column;gap:2px;overflow-y:auto;padding:14px 12px 14px 18px;border-right:.5px solid var(--hair)}
  .wrail-item{text-align:left;background:none;border:0;padding:7px 9px;border-radius:7px;font:inherit;color:inherit;cursor:pointer;flex:0 0 auto}
  .wrail-item:hover{background:var(--soft2)}
  .wrail-item.on{background:var(--accent-tint);color:var(--accent);font-weight:500}
  .wrail-item.soon{color:var(--muted)}
  .wrail-soon{font-size:10px;color:var(--faint);padding:10px 9px 3px;letter-spacing:.04em}
  /* the panel scrolls independently and lays its fields out with real spacing */
  .wpanel{flex:1;min-width:0;overflow-y:auto;padding:14px 18px 16px;display:flex;flex-direction:column;gap:12px}
  .wpanel > .fld.full,.wpanel > .fld{width:100%}
  /* Details tab = two stacked subsections: "Event" (always) + the stage-aware
     public/published listing. Each behaves like the panel's own child context. */
  .wsub{display:flex;flex-direction:column;gap:12px}
  .wsub > .fld.full,.wsub > .fld{width:100%}
  .wsub-h{font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);border-bottom:.5px solid var(--hair);padding-bottom:6px;margin-bottom:2px}
  .wsub.muted{opacity:.55}
  .soon-h{font-weight:500;margin-bottom:4px}
  .soon-teaser{display:flex;flex-direction:column;gap:8px}
  .btn.xs{font-size:11px;padding:1px 7px;font-weight:500}

  /* feedback / ideas board */
  .fbboard{margin-top:10px}
  .fbform{display:flex;gap:8px;align-items:flex-start;margin-bottom:10px}
  .fbtext{flex:1}
  .fblist{display:flex;flex-direction:column;gap:6px}
  .fbitem{display:flex;gap:9px;align-items:center;font-size:13px}
  .fbvote{border:.5px solid var(--hair);border-radius:14px;padding:2px 9px;font:inherit;cursor:pointer;background:none;color:var(--muted);white-space:nowrap}
  .fbvote.on{background:var(--accent-tint,#eef);color:var(--accent);border-color:var(--accent)}
  .fbidea{flex:1;min-width:0}
  .fbstatus{flex:0 0 auto;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.4px;padding:2px 7px;border-radius:10px}
  .fbst-new{background:#EAF1FB;color:#2F5FA3}
  .fbst-planned{background:#FAEEDA;color:#8A5A0B}
  .fbst-shipped{background:#E7F4E9;color:#2F7D3B}
  .fbst-declined{background:var(--soft);color:var(--muted)}
  @media(max-width:600px){ .wsplit{flex-direction:column} .wrail{flex:none;flex-direction:row;overflow-x:auto;scrollbar-width:none;border-right:0;border-bottom:.5px solid var(--hair);padding:12px 16px 8px} .wrail::-webkit-scrollbar{display:none} .wrail-item{flex:0 0 auto} .wrail-soon{display:none} }

  /* ---- Volunteers & potluck: gather slot builder (editor section) ---- */
  .slots-wrap{display:flex;flex-direction:column;gap:12px}
  .slots-loading{display:flex;align-items:center;gap:9px;padding:14px 4px;font-size:13px;color:var(--muted)}
  /* live Eventbrite view inside the publish panel */
  .eb-live{display:flex;flex-direction:column;gap:6px;margin-bottom:8px}
  .eb-facts{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;font-size:12.5px;color:var(--muted);
    padding:8px 10px;border:1px solid var(--hair);border-radius:8px;background:var(--surface)}
  .eb-facts .eb-name{color:var(--ink);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .eb-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
  [data-livewait]{opacity:.55}
  .slots-list{display:flex;flex-direction:column;gap:14px}
  .slot-group{display:flex;flex-direction:column;gap:6px}
  .slot-group-h{font-size:10.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
    align-self:flex-start;padding:2px 8px;border-radius:20px;white-space:nowrap}
  .slot-group-h.pot{background:#F6EDDF;color:#8A5A0B}
  .slot-group-h.vol{background:#E7EEF9;color:#2F5FA3}
  .slot-item{display:flex;flex-direction:column;gap:4px;padding:7px 9px;border:1px solid var(--hair);
    border-radius:var(--radius);background:var(--surface)}
  .slot-head{display:flex;align-items:center;gap:9px}
  .slot-name{flex:1;min-width:0;font-size:13px;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .slot-need{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
  .slot-ctl{display:inline-flex;gap:2px;flex:0 0 auto}
  .iconbtn{width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center;
    border:1px solid var(--hair);border-radius:6px;background:var(--surface);color:var(--muted);font-size:13px;line-height:1;cursor:pointer}
  .iconbtn:hover:not([disabled]){border-color:var(--accent);color:var(--accent);background:var(--accent-tint)}
  .iconbtn.del:hover:not([disabled]){border-color:#B44;color:#B44;background:#FBECEC}
  .iconbtn[disabled]{opacity:.35;cursor:default}
  /* the ghost add form — styled as "the next row" in the group */
  .slot-ghost{flex-direction:row;align-items:center;gap:8px;border-style:dashed;border-color:var(--hair-strong);background:transparent}
  .slot-ghost .slot-label{flex:1;min-width:0}
  .slot-ghost .slot-qty{width:56px}
  .slot-ghost input,.claim-form input{font:inherit;font-size:13px;padding:5px 7px;border:1px solid transparent;
    border-radius:6px;background:transparent;color:var(--ink)}
  .slot-ghost input::placeholder,.claim-form input::placeholder{color:var(--muted)}
  .slot-ghost input:hover,.claim-form input:hover{border-color:var(--hair)}
  .slot-ghost input:focus,.claim-form input:focus{outline:2px solid var(--accent-tint);outline-offset:1px;border-color:var(--accent);background:var(--surface)}
  /* claims (sign-ups) under each slot */
  .slot-claims{display:flex;flex-direction:column;gap:2px;margin-left:2px;padding-left:9px;border-left:2px solid var(--hair)}
  .claim-row{display:flex;align-items:center;gap:6px;font-size:12.5px;min-height:24px}
  .claim-who{font-weight:600;color:var(--ink);white-space:nowrap}
  .claim-what{flex:1;min-width:0;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .claim-qty{color:var(--muted);font-variant-numeric:tabular-nums}
  .claim-ctl{display:inline-flex;gap:2px;margin-left:auto;opacity:0;transition:opacity .12s}
  .claim-row:hover .claim-ctl{opacity:1}
  .claim-form{flex-wrap:wrap}
  .claim-form .claim-person{width:130px}
  .claim-form .claim-detail{flex:1;min-width:110px}
  .claim-form .claim-qtyin{width:52px}
  .claim-addbtn{align-self:flex-start;border:0;background:none;padding:2px 0;font:inherit;font-size:12px;
    color:var(--accent);cursor:pointer}
  .claim-addbtn:hover{text-decoration:underline}

  /* ============================ dark mode ============================
     The whole light palette lives in tokens above; chips/gchips mix their
     program hue against --mixbase/--mixink, so flipping the tokens re-tints
     the calendar. The pastel badge/label tints are hardcoded per-status in
     light, so they get explicit dark counterparts here. */
  /* ---- Attendees roster (plan, lead-only) ---------------------------------- */
  .roster-wrap{display:flex;flex-direction:column;gap:10px;flex:1;min-height:0}
  .roster-body{flex:1;min-height:0;overflow:auto}
  .roster-foot .push{flex:1}
  .roster-head{display:flex;align-items:center;gap:8px}
  .roster-sum{flex:1;min-width:0}
  .roster-segs{display:flex;flex-wrap:wrap;gap:6px}
  .roster-seg{font:inherit;font-size:11.5px;padding:4px 9px;border-radius:20px;border:1px solid var(--hair-strong);background:var(--surface);color:var(--muted);cursor:pointer}
  .roster-seg:hover{color:var(--accent);border-color:var(--accent)}
  .roster-seg .n{opacity:.7;margin-left:3px;font-variant-numeric:tabular-nums}
  .roster-seg.on{background:var(--accent);border-color:var(--accent);color:#fff}
  .roster-seg.on .n{opacity:.9}
  table.roster{width:100%;border-collapse:collapse;font-size:12.5px}
  table.roster th{text-align:left;font-size:10.5px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);font-weight:600;padding:4px 6px;border-bottom:1px solid var(--hair);position:sticky;top:0;background:var(--surface);z-index:2}
  table.roster tbody tr{cursor:pointer}
  table.roster tbody tr:hover{background:var(--soft2)}
  table.roster td{padding:6px;border-bottom:1px solid var(--hair);vertical-align:top}
  table.roster td:first-child{width:22px;padding-right:0}
  table.roster td.roster-who{min-width:160px}
  table.roster .badge{display:inline-block;font-size:10px;padding:2px 7px;border-radius:20px;font-weight:600;white-space:nowrap}
  .roster-name{font-weight:600;color:var(--ink)}
  .roster-name .badge{font-weight:600;vertical-align:middle;margin-left:5px}
  .roster-email{color:var(--muted);font-size:11.5px;overflow-wrap:anywhere}
  .roster-tix{font-variant-numeric:tabular-nums;min-width:96px}
  .roster-tik{display:block}
  .roster-claim{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:220px}
  .badge.b-member{background:#E7F4E9;color:#2F7D3B;font-size:9.5px;padding:1px 6px;border-radius:20px;margin-left:5px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;vertical-align:middle}
  .roster-foot{display:flex;align-items:center;gap:8px;padding-top:8px;border-top:1px solid var(--hair);flex:0 0 auto}
  .roster-foot[hidden]{display:none}            /* footer appears only once rows are selected */
  .roster-copybox{display:flex;flex-direction:column;gap:4px}
  .roster-copybox textarea{font:inherit;font-size:12px;padding:6px 8px;border:1px solid var(--hair-strong);border-radius:6px;background:var(--surface);color:var(--ink);resize:vertical}
  .roster-selcount{font-size:12px;color:var(--muted)}
  table.roster th:first-child{width:22px;padding-right:0}
  .roster-selall-cell input{cursor:pointer}
  .roster-foot .btn.disabled{opacity:.5;pointer-events:none}
  .roster-empty{padding:14px 4px}
  .roster-err{padding:10px 12px;border:1px solid #E5B4B4;background:#FBEDED;border-radius:8px;color:#8A2E2E;font-size:12.5px;display:flex;gap:10px;align-items:center;justify-content:space-between}
  /* Mobile mode — single viewport breakpoint (matches the modal/rail below):
     drop the Tickets column and turn the segment chips into one swipeable row. */
  @media (max-width:600px){
    /* keep all four columns — tighten cell padding + drop the min-widths to fit */
    table.roster th,table.roster td{padding:6px 3px}
    table.roster td.roster-who{min-width:0}
    .roster-tix{min-width:0}
    .roster-claim{max-width:120px}
    .roster-segs{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:2px}
    .roster-segs::-webkit-scrollbar{display:none}
    .roster-seg{flex:0 0 auto}
  }
  /* ---- help drawer (web/help/: guide.md + whats-new.md, rendered by HelpLib) ---- */
  :root{--help-w:400px}
  .help-drawer{position:fixed;top:0;right:0;bottom:0;width:min(var(--help-w),100vw);z-index:70;background:var(--surface);border-left:1px solid var(--hair-strong);box-shadow:var(--shadow);display:flex;flex-direction:column}
  .help-drawer[hidden]{display:none}
  .help-drawer:focus{outline:none}
  .help-head{display:flex;align-items:center;gap:8px;padding:14px 14px 12px 18px;border-bottom:1px solid var(--hair);flex-shrink:0}
  .help-title{flex:1;min-width:0;margin:0;font-family:Fraunces,serif;font-weight:600;font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .help-back{flex:0 0 auto;border:0;background:transparent;color:var(--accent);font:inherit;font-size:12px;font-weight:600;padding:4px 6px;border-radius:6px;cursor:pointer;white-space:nowrap}
  .help-back:hover{background:var(--accent-tint)}
  .help-body{flex:1 1 auto;min-height:0;overflow-y:auto;padding:14px 18px 18px}
  .help-foot{flex-shrink:0;padding:10px 18px calc(12px + env(safe-area-inset-bottom));border-top:1px solid var(--hair);font-size:12px;color:var(--muted)}
  .help-foot a,.help-article a,.help-empty a{color:var(--accent);font-weight:600}
  .help-search{width:100%;font:inherit;font-size:13px;padding:8px 10px;margin:0 0 6px;border:1px solid var(--hair-strong);border-radius:8px;background:var(--surface);color:var(--ink)}
  .help-grouph{margin:14px 0 2px;font-size:10.5px;font-weight:600;letter-spacing:.6px;text-transform:uppercase;color:var(--muted)}
  .help-list{list-style:none;margin:0;padding:0}
  .help-list li{display:flex;align-items:center;gap:8px;padding:6px 0;border-bottom:1px solid var(--hair)}
  .help-list a{color:var(--ink);font-size:13.5px;font-weight:500;text-decoration:none}
  .help-list a:hover{color:var(--accent)}
  .help-news{margin-top:16px}
  .help-grp{font-size:11px;color:var(--muted)}
  .help-dot{flex:0 0 auto;width:7px;height:7px;border-radius:50%;background:var(--today)}
  .help-empty{font-size:13px;color:var(--muted);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
  .help-article{font-size:13.5px;line-height:1.55;color:var(--ink)}
  .help-article p{margin:0 0 10px}
  .help-article h3{margin:16px 0 6px;font-size:11.5px;letter-spacing:.5px;text-transform:uppercase;color:var(--muted)}
  .help-article h3:first-child{margin-top:0}
  .help-article ol,.help-article ul{margin:0 0 10px;padding-left:20px}
  .help-article li{margin:4px 0}
  .help-tip{margin:0 0 10px;padding:9px 11px;border-radius:8px;background:var(--accent-tint);font-size:13px}
  .uichip{display:inline-block;padding:0 6px;border:1px solid var(--hair-strong);border-radius:5px;background:var(--surface);box-shadow:0 1px 0 var(--hair);color:var(--ink);font-size:12px;font-weight:600;line-height:1.5;white-space:nowrap}
  .help-legend{display:grid;gap:6px;margin:2px 0 10px}
  .help-legend-row{display:flex;align-items:center;gap:10px;font-size:12.5px;color:var(--muted)}
  .help-legend .chip{flex:0 0 120px;cursor:default}
  .help-swatches{display:flex;flex-wrap:wrap;gap:6px 14px;margin:0 0 12px;font-size:12.5px}
  .help-swatch{display:inline-block;width:10px;height:10px;margin-right:6px;border-radius:3px;vertical-align:-1px}
  .mhead-ico.q{font-size:14px;font-weight:700}
  .badge-btn{border:0;font-family:inherit;line-height:inherit;cursor:pointer;appearance:none}
  .badge-btn:hover{filter:brightness(.95)}
  .gate .gate-help{margin:16px 0 0;font-size:12.5px}
  .gate .gate-help a{color:var(--accent);font-weight:600}
  @media (min-width:1000px){ body.help-open{padding-right:var(--help-w)} }
  @media (min-width:1000px) and (max-width:1399px){ body.help-open .qgrid{grid-template-columns:repeat(2,minmax(0,1fr))} }   /* the page is under 1000px wide then — three columns get cramped */   /* wide: Help sits beside the page — header and calendar narrow instead of hiding under it */
  @media (min-width:1000px){ body.help-open .scrim{padding-right:calc(var(--help-w) + 16px)} }       /* an open editor (≥568px) sits beside the drawer; narrower, the drawer overlays it */
  @media (min-width:780px){  body.help-open .gate-scrim{padding-right:calc(var(--help-w) + 20px)} }  /* the 340px sign-in card still fits beside it */
  @media (max-width:600px){
    .help-drawer{width:100%;border-left:0;box-shadow:none}
    body.help-open{overflow:hidden}
  }

  /* ---- tooltips (data-tip — one shared bubble, see showTip in app.js) ---- */
  .tip{position:fixed;z-index:90;pointer-events:none;padding:4px 8px;border-radius:6px;background:var(--ink);color:var(--surface);font-size:11.5px;font-weight:500;line-height:1.35;white-space:nowrap;box-shadow:var(--shadow)}
  .tip[hidden]{display:none}

  @media (prefers-color-scheme:dark){
    :root{
      color-scheme:dark;
      --surface:#242330; --soft:#2C2B38; --soft2:#282734;
      --mixbase:#1B1A24; --mixink:#fff;
      --paper:#17161E; --ink:#E9E7F0; --muted:#A3A1B0; --faint:#71707E;
      --hair:#2E2D3A; --hair-strong:#3D3C4B;
      --accent:#7D7DD1; --accent-dk:#9B9BE0; --accent-tint:#31314A;
      --today:#E0654F;
      --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.5);
    }
    .btn.primary,.btn.primary:hover,.seg button[aria-pressed="true"],.whenseg button[aria-pressed="true"],.fab,
    .badge.b-approved,.cell.today .dnum{color:#101020}          /* solid accent is light in dark mode */
    .gchip.approved,.chip.approved{color:#fff}                   /* program hues stay saturated — white holds */
    .badge.b-idea,.badge.b-past,.badge.b-cancelled,.badge.b-ref{background:#2E2D3A;color:#A3A1B0}
    .badge.b-draft{background:#3A3322;color:#D9B96C}
    .badge.b-proposed{background:#2E2E4C;color:#ABABEA}
    .badge.b-confirmed{background:#23352B;color:#82C89D}
    .badge.b-live{background:#20392A;color:#74C48C}
    .b-published{background:#20392A;color:#74C48C;border-color:#2E4A36}
    .b-error{background:#3C2626;color:#E08A8A;border-color:#553232}
    .b-draft{background:#252F42;color:#8FB4E8;border-color:#2F3E58}
    .slot-group-h.pot,.slot-kind.pot{background:#3A2F1E;color:#D8A85C}
    .slot-group-h.vol,.slot-kind.vol{background:#222B3E;color:#8FB4E8}
    .fbst-new{background:#252F42;color:#8FB4E8}
    .fbst-planned{background:#3A3322;color:#D9B96C}
    .fbst-shipped{background:#23352B;color:#82C89D}
    .fbst-declined{background:#2E2D3A;color:var(--muted)}
    .danger{color:#E08585;border-color:#553232}
    .danger:hover{background:#3C2626;border-color:#7A4040;color:#E9A0A0}
    .iconbtn.del:hover:not([disabled]){border-color:#7A4040;color:#E08585;background:#3C2626}
    .savestat.dirty{color:#D9B96C}
    .savestat.error{color:#E08585}
    .ndoc-warn{color:#D9B96C}
    .weekhead .wd.we{color:#C9938A}
    .toast{color:var(--paper)}
    .badge.b-member{background:#23352B;color:#82C89D}
    .roster-err{background:#3C2626;border-color:#7A4040;color:#E9A0A0}
  }