:root{
  --navy:#233F84; --navy-deep:#16295A; --orange:#F89923; --yellow:#FFDF09; --red-orange:#EA5726;
  --sky:#EAF2FB; --line:#D6E2F2; --muted:#5A6D93; --ink:#1B2A4E;
  --bg:#F4F8FD; --white:#fff; --ok:#1E6B34; --ok-bg:#E2EFDA;
  --warn:#8A4B00; --warn-bg:#FFF2CC; --bad:#A32020; --bad-bg:#FCE4E4;
  --head:'Oswald',Impact,sans-serif; --body:'Poppins','Helvetica Neue',Arial,sans-serif;
  --r:10px; --shadow:0 1px 2px rgba(22,41,90,.06),0 6px 18px rgba(22,41,90,.08);
  --accent:#233F84;
  /* 1.26: surfaces and filled colors get their own names, so dark mode can
     change them apart from navy text and borders. */
  --fill:#233F84; --ok-fill:#1E6B34; --bad-fill:#A32020; --card:#fff;
  /* The pages' own tints, borders and dark text, by their light value (made by
     the 1.26 dark-mode pass): light here, their dark twins below. */
  --bd-bfd4ec:#BFD4EC; --bd-c3cede:#C3CEDE; --bd-cbd5e1:#CBD5E1; --bd-cfdff3:#CFDFF3; --bd-dce7f6:#DCE7F6; --bd-e9eff8:#E9EFF8; --bd-ebd9a8:#EBD9A8; --bd-edf3fa:#EDF3FA; --bd-f0dca8:#F0DCA8; --bd-f3e3a1:#F3E3A1; --bg-c9d6e8:#C9D6E8; --bg-dce5f2:#DCE5F2; --bg-dde8f7:#DDE8F7; --bg-e8effb:#E8EFFB; --bg-edf1f7:#EDF1F7; --bg-edf3fc:#EDF3FC; --bg-eef1f7:#EEF1F7; --bg-eef2f8:#EEF2F8; --bg-eef3fa:#EEF3FA; --bg-f1f3f8:#F1F3F8; --bg-f1f5fb:#F1F5FB; --bg-f4f6fa:#F4F6FA; --bg-f4f7fc:#F4F7FC; --bg-f7f8fb:#F7F8FB; --bg-f7f9fc:#F7F9FC; --bg-f7f9fd:#F7F9FD; --bg-f7faff:#F7FAFF; --bg-f8fafd:#F8FAFD; --bg-fafbfd:#FAFBFD; --bg-fafcff:#FAFCFF; --bg-fbfcfe:#FBFCFE; --bg-fff8f8:#FFF8F8; --bg-fffbea:#FFFBEA; --bg-ffffff:#FFFFFF; --tx-16295a:#16295A; --tx-22305a:#22305A; --tx-233f84:#233F84; --tx-4a5878:#4A5878; --tx-54607a:#54607A; --tx-5a6d93:#5A6D93;
  --logo:url("data:image/png;base64,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")
}
/* 1.26: dark mode. The same tokens, darker; navy text and borders turn light,
   filled navy stays a deep blue. Screens only: printing is always light. */
@media screen{
:root[data-theme="dark"]{color-scheme:dark;
  --navy:#A9C1F5; --navy-deep:#0A1222; --sky:#1B2846; --line:#2B3B5F; --muted:#9DABC9; --ink:#E5EBF7;
  --bg:#0D1526; --white:#151F36; --card:#151F36;
  --fill:#3A5CB8; --ok:#7FD99D; --ok-bg:#12331F; --ok-fill:#23803F;
  --warn:#F5C06E; --warn-bg:#3A2B10; --bad:#FF9E9E; --bad-bg:#401B1B; --bad-fill:#B9302F;
  --accent:#A9C1F5; --shadow:0 1px 2px rgba(0,0,0,.45),0 6px 18px rgba(0,0,0,.35);
  --bd-bfd4ec:#2E4A6B; --bd-c3cede:#374A64; --bd-cbd5e1:#384A60; --bd-cfdff3:#2C4666; --bd-dce7f6:#2A4262; --bd-e9eff8:#293F5F; --bd-ebd9a8:#705F30; --bd-edf3fa:#28415E; --bd-f0dca8:#6F5D2F; --bd-f3e3a1:#706330; --bg-c9d6e8:#20334C; --bg-dce5f2:#192A44; --bg-dde8f7:#162943; --bg-e8effb:#14233D; --bg-edf1f7:#192538; --bg-edf3fc:#13233A; --bg-eef1f7:#1A2336; --bg-eef2f8:#172438; --bg-eef3fa:#14243B; --bg-f1f3f8:#1A2134; --bg-f1f5fb:#132239; --bg-f4f6fa:#172134; --bg-f4f7fc:#122037; --bg-f7f8fb:#181E31; --bg-f7f9fc:#142135; --bg-f7f9fd:#121E36; --bg-f7faff:#121F35; --bg-f8fafd:#122035; --bg-fafbfd:#141E32; --bg-fafcff:#111F34; --bg-fbfcfe:#111D34; --bg-fff8f8:#351212; --bg-fffbea:#3A3313; --bg-ffffff:#212121; --tx-16295a:#BAC6E5; --tx-22305a:#B3BEE2; --tx-233f84:#98ABD8; --tx-4a5878:#99A5C0; --tx-54607a:#97A2B8; --tx-5a6d93:#8292B2;}
/* A sheet of paper - a quote, a letter, a website preview - stays light. */
:root[data-theme="dark"] .paper{color-scheme:light;color:#1B2A4E;--navy:#233F84; --navy-deep:#16295A; --orange:#F89923; --yellow:#FFDF09; --red-orange:#EA5726; --sky:#EAF2FB; --line:#D6E2F2; --muted:#5A6D93; --ink:#1B2A4E; --bg:#F4F8FD; --white:#fff; --ok:#1E6B34; --ok-bg:#E2EFDA; --warn:#8A4B00; --warn-bg:#FFF2CC; --bad:#A32020; --bad-bg:#FCE4E4; --shadow:0 1px 2px rgba(22,41,90,.06),0 6px 18px rgba(22,41,90,.08); --accent:#233F84; --fill:#233F84; --ok-fill:#1E6B34; --bad-fill:#A32020; --card:#fff; --bd-bfd4ec:#BFD4EC; --bd-c3cede:#C3CEDE; --bd-cbd5e1:#CBD5E1; --bd-cfdff3:#CFDFF3; --bd-dce7f6:#DCE7F6; --bd-e9eff8:#E9EFF8; --bd-ebd9a8:#EBD9A8; --bd-edf3fa:#EDF3FA; --bd-f0dca8:#F0DCA8; --bd-f3e3a1:#F3E3A1; --bg-c9d6e8:#C9D6E8; --bg-dce5f2:#DCE5F2; --bg-dde8f7:#DDE8F7; --bg-e8effb:#E8EFFB; --bg-edf1f7:#EDF1F7; --bg-edf3fc:#EDF3FC; --bg-eef1f7:#EEF1F7; --bg-eef2f8:#EEF2F8; --bg-eef3fa:#EEF3FA; --bg-f1f3f8:#F1F3F8; --bg-f1f5fb:#F1F5FB; --bg-f4f6fa:#F4F6FA; --bg-f4f7fc:#F4F7FC; --bg-f7f8fb:#F7F8FB; --bg-f7f9fc:#F7F9FC; --bg-f7f9fd:#F7F9FD; --bg-f7faff:#F7FAFF; --bg-f8fafd:#F8FAFD; --bg-fafbfd:#FAFBFD; --bg-fafcff:#FAFCFF; --bg-fbfcfe:#FBFCFE; --bg-fff8f8:#FFF8F8; --bg-fffbea:#FFFBEA; --bg-ffffff:#FFFFFF; --tx-16295a:#16295A; --tx-22305a:#22305A; --tx-233f84:#233F84; --tx-4a5878:#4A5878; --tx-54607a:#54607A; --tx-5a6d93:#5A6D93;}
}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;height:100%}
body{font-family:var(--body);background:var(--bg);color:var(--ink);font-size:14px;line-height:1.5}
h1,h2,h3{font-family:var(--head);text-transform:uppercase;letter-spacing:.02em;margin:0}
a{color:var(--navy)}
.hide{display:none!important}

/* ==========================================================================
   The chrome: a nav down the left, a slim strip across the top.

   Every page ships the same two elements it always did - a .bar and a .wrap -
   and the shell rearranges them into this on the way in (see mountChrome).
   That way eleven pages did not each have to learn a new skeleton, and a page
   that puts its own buttons in its bar still works exactly as it did.

   Where things went: the logo and the way between portals are in the nav now,
   so the bar keeps only what belongs to the page you are on - its name, its
   buttons, and you.
   ========================================================================== */
.shell{display:flex;align-items:flex-start;min-height:100%}
.col{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;min-height:100vh}

/* ---------- the nav ---------- */
.side{flex:0 0 228px;width:228px;align-self:stretch;background:var(--navy-deep);color:#fff;
  position:sticky;top:0;height:100vh;display:flex;flex-direction:column;z-index:45}
.side .logo{flex:0 0 auto;padding:18px 16px 14px;display:block}
.side .logo i{display:block;width:100%;height:38px;background:var(--logo) no-repeat left center/contain}
.side nav{flex:1 1 auto;overflow-y:auto;padding:4px 10px 10px;display:flex;flex-direction:column;gap:2px;
  scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.25) transparent}
/* A thin light thumb on Deep navy, not the browser's wide gray bar. */
.side nav:hover{scrollbar-color:rgba(255,255,255,.4) transparent}
.side nav::-webkit-scrollbar{width:6px}
.side nav::-webkit-scrollbar-track{background:transparent}
.side nav::-webkit-scrollbar-thumb{background:rgba(255,255,255,.25);border-radius:6px}
.side nav::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.4)}
.side .sect{font-size:.62rem;letter-spacing:.09em;text-transform:uppercase;color:rgba(255,255,255,.38);
  padding:14px 10px 6px;font-weight:600}
.side a{display:flex;align-items:center;gap:11px;padding:9px 10px;border-radius:8px;
  color:rgba(255,255,255,.82);text-decoration:none;font-size:.84rem;font-weight:500;
  border:0;background:none;font-family:inherit;width:100%;text-align:left;cursor:pointer;
  transition:background .12s,color .12s}
.side a svg{width:18px;height:18px;flex:0 0 18px;stroke:currentColor;fill:none;
  stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;opacity:.85}
.side a:hover{background:rgba(255,255,255,.09);color:#fff}
.side a.on{background:var(--fill);color:#fff;font-weight:600}
.side a.on svg{opacity:1;stroke:var(--orange)}
.side a .lbl{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* A count beside a nav item, for the handful of places something is waiting. */
.side a .cnt{flex:0 0 auto;background:var(--orange);color:var(--navy-deep);font-size:.66rem;
  font-weight:700;border-radius:999px;padding:1px 7px;min-width:20px;text-align:center}
.side a.soon{opacity:.55}
.side .foot{flex:0 0 auto;padding:10px;border-top:1px solid rgba(255,255,255,.12)}

/* The hub switch belongs beside the things it changes, not in a menu. */
.hubpk{display:flex;gap:3px;background:rgba(0,0,0,.22);border-radius:9px;padding:3px;margin-bottom:8px}
.hubpk button{flex:1 1 0;min-width:0;min-height:40px;font:inherit;font-size:.72rem;font-weight:600;padding:6px 4px;
  border:0;border-radius:7px;background:none;color:rgba(255,255,255,.62);cursor:pointer;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hubpk button.on{background:var(--fill);color:#fff}

/* Getting Started (1.20): one card for the nav and the phone dashboard. */
.gs{padding:16px;color:var(--ink);flex:0 0 auto}
.side .gs{margin:0 12px 12px}
.side nav .gs{margin:12px 2px 4px}
.wrap>.gs{margin-bottom:14px}
.gs-h{display:flex;align-items:baseline;gap:8px;margin-bottom:8px}
.gs-h h3{flex:1;font-size:13px;letter-spacing:.08em;color:var(--muted)}
.gs-h span{font-size:13px;color:var(--muted)}
.gs-bar{height:6px;border-radius:6px;background:var(--line);overflow:hidden;margin-bottom:6px}
.gs-bar i{display:block;height:100%;background:var(--ok-fill)}
.gs-i{display:flex;align-items:center;gap:10px;width:100%;min-height:40px;padding:6px 0;border:0;background:none;
  font:inherit;font-size:14px;line-height:1.3;color:var(--ink);text-align:left;cursor:pointer}
.gs-i i{flex:0 0 20px;height:20px;border-radius:50%;border:2px solid var(--line);display:grid;place-items:center}
.gs-i.next{color:var(--navy);font-weight:600}
.gs-i.done{color:var(--muted);text-decoration:line-through;cursor:default}
.gs-i.done i{background:var(--ok-fill);border-color:var(--ok)}
.gs-i.done i::after{content:"";width:4px;height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:translateY(-1px) rotate(45deg)}
.gs-m{display:block;min-height:40px;margin:-8px 0 0 30px;padding:0;border:0;background:none;font:inherit;font-size:13px;color:var(--muted);cursor:pointer}
.gs[hidden]{display:none}
.gs-ol{margin:0 0 12px;padding-left:20px;display:grid;gap:6px}
@media(min-width:901px){.wrap>.gs{display:none}}

/* ---------- the top strip ---------- */
.bar{display:flex;align-items:center;gap:10px;background:var(--card);color:var(--ink);
  border-bottom:1px solid var(--line);padding:11px 22px;flex-wrap:wrap;
  position:sticky;top:0;z-index:40;min-height:58px}
.bar h1{font-size:1.02rem;color:var(--navy);white-space:nowrap}
.bar .grow{flex:1}
/* The logo and the way out are the nav's job now. Pages that ship them in their
   own bar markup - the Games Manager does - simply stop showing them. */
.bar .brand,.bar .sep,.bar .home{display:none}
.menub{display:none;flex:0 0 auto;align-items:center;justify-content:center;width:40px;height:40px;
  border:1px solid var(--line);border-radius:9px;background:var(--card);cursor:pointer;color:var(--navy)}
.menub svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}
/* 1.26: the sun/moon switch, beside the name. The knob sits on the mode that's on. */
.thm{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;height:40px;min-width:44px;padding:0 2px;
  border:0;background:none;cursor:pointer;border-radius:999px}
.thm .tk{position:relative;display:block;width:54px;height:28px;border-radius:999px;background:var(--sky);border:1px solid var(--line)}
.thm .tk i{position:absolute;top:2px;left:2px;width:22px;height:22px;border-radius:50%;background:var(--card);
  box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .18s ease}
.thm svg{position:absolute;top:6px;width:14px;height:14px;fill:none;stroke:var(--muted);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.thm .sun{left:6px}.thm .moon{right:6px}
.thm[aria-checked="false"] .sun{stroke:var(--orange)}
.thm[aria-checked="true"] .tk i{transform:translateX(26px)}
.thm[aria-checked="true"] .moon{stroke:var(--yellow);fill:var(--yellow)}
.thm:hover .tk{border-color:var(--navy)}
.thm:focus-visible{outline:none}.thm:focus-visible .tk{outline:2px solid var(--navy);outline-offset:2px}
@media(prefers-reduced-motion:reduce){.thm .tk i{transition:none}}
.pill{background:var(--sky);color:var(--navy);border-radius:999px;padding:5px 12px;font-size:.75rem;
  white-space:nowrap}
.pill.warn{background:var(--orange);color:var(--navy-deep);font-weight:600}

/* ---------- on a phone the nav slides in ---------- */
.navclose{display:none}
.navscrim{position:fixed;inset:0;background:rgba(15,26,54,.5);z-index:44;border:0;padding:0;
  display:none;cursor:pointer}
@media(max-width:900px){
  .shell{display:block}
  .col{min-height:100vh}
  .menub{display:inline-flex}
  .navscrim.open{display:block}
  .side{position:fixed;left:0;top:0;bottom:0;height:100%;width:270px;flex-basis:270px;
    transform:translateX(-100%);transition:transform .18s ease;z-index:46}
  /* The shadow only when it's out: a closed drawer cast a gray band down the
     left edge of every page. */
  .side.open{transform:none;box-shadow:0 0 40px rgba(0,0,0,.3)}
  /* The close tab hangs off the drawer's right edge, halfway down, where a
     thumb already is. Only while it is open: a closed drawer sits just off the
     left of the screen, and a tab on it would poke back in. */
  .side.open .navclose{display:flex;align-items:center;justify-content:center;position:absolute;
    left:100%;top:50%;transform:translateY(-50%);width:34px;height:64px;padding:0 4px 0 0;
    border:0;border-radius:0 12px 12px 0;background:var(--navy-deep);color:#fff;cursor:pointer;
    box-shadow:6px 0 14px rgba(0,0,0,.22)}
  .navclose svg{width:22px;height:22px;stroke:var(--orange);fill:none;stroke-width:2.4;
    stroke-linecap:round;stroke-linejoin:round}
  .navclose:focus-visible{outline:2px solid var(--orange);outline-offset:-4px}
  /* Everything in the drawer is something a thumb has to hit. The doubled
     class names outweigh the plain rules further down this file. */
  .side a{padding:11px 10px}
  .hubpk button.hubpk button,.hubpk button{padding:9px 4px}
  .ver.ver{padding:11px 10px}
  .bar{padding:10px 14px;gap:8px 10px;min-height:56px}
  /* A basis of 0 rather than auto. Flex decides where to wrap using each item's
     content width before it shrinks anything, so a long portal name - GAMES
     MANAGER - was enough to push the name badge onto a line of its own at
     360px. Starting from nothing and growing into whatever is left means the
     name never causes the break, and still fills the row when there is room. */
  .bar h1{font-size:.95rem;flex:1 1 0;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  /* The page's own buttons drop to a line of their own rather than squeezing
     the name off the first one. */
  .bar .grow.grow,.bar .sp.sp{flex:0 0 100%;height:0;margin:0;order:5}
  .bar .menub{order:1}
  .bar h1{order:2}
  .bar .dd.me-dd{order:3;margin-left:auto}
  .bar .thm{order:3;margin-left:auto}
  .bar .thm ~ .dd.me-dd{margin-left:0}
  .bar .pill{order:6}
  .bar #barExtra{order:7}
  .bar .btn{order:8;font-size:.74rem;padding:8px 12px}
}
@media(prefers-reduced-motion:reduce){ .side{transition:none} }

/* ---------- buttons ---------- */
.btn{font:inherit;font-weight:600;font-size:.82rem;border-radius:8px;padding:9px 15px;cursor:pointer;
  border:1.5px solid transparent;display:inline-flex;align-items:center;gap:7px;white-space:nowrap;
  text-transform:uppercase;letter-spacing:.02em;transition:filter .12s,background .12s}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn:not(:disabled):hover{filter:brightness(1.07)}
.btn.n{background:var(--fill);color:#fff}
.btn.o{background:var(--card);color:var(--navy);border-color:var(--line)}
/* Red fill only on the confirm button of a delete or discard box. */
.btn.d{background:var(--bad-fill);color:#fff}
/* What starts a delete or an archive: an outline with red words. */
.btn.dl{background:var(--card);color:var(--bad);border-color:var(--line)}
.btn.sm{padding:6px 11px;font-size:.72rem}

/* ---------- forms ---------- */
label.f{display:block;font-size:.74rem;font-weight:600;color:var(--navy);
  text-transform:uppercase;letter-spacing:.04em;margin-bottom:5px}
.hint{font-size:.72rem;color:var(--muted);margin-top:4px}
/* Everything that takes typing, said the other way round: anything that is not
   one of the controls with a shape of its own. Naming the types instead meant a
   field in a type nobody had used yet - email, tel - fell through to the
   browser's own styling.

   The :where() is load-bearing. It contributes no specificity at all, so this
   whole selector weighs the same as a bare `input`, and a component that styles
   its own box - the search field's room for its magnifier, a number box sized to
   two digits - still wins. Written as bare :not() chains it outweighed every one
   of them and quietly flattened them. */
input:where(:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]):not([type=color]):not([type=submit]):not([type=button]):not([type=image]):not([type=reset]):not([type=hidden])),
select,textarea{
  font:inherit;width:100%;padding:9px 11px;border:1.5px solid var(--line);border-radius:8px;
  background:var(--card);color:var(--ink)}
input:where(:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]):not([type=color]):not([type=submit]):not([type=button]):not([type=image]):not([type=reset]):not([type=hidden])):focus,
select:focus,textarea:focus{outline:none;border-color:var(--navy);
  box-shadow:0 0 0 3px rgba(35,63,132,.12)}
textarea{resize:vertical;min-height:80px}
/* Safari on iOS zooms the whole page in when you tap a field whose text is
   under 16px, and does not zoom back out - which is why the hub felt slightly
   magnified from the moment you touched the sign-in box and had to be pinched
   back. The body stays at 14px; only the things you type into go up. */
@media(max-width:900px){
  input:where(:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]):not([type=color]):not([type=submit]):not([type=button]):not([type=image]):not([type=reset]):not([type=hidden])),
  select,textarea{font-size:16px}
}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.row3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px}
@media(max-width:720px){.row2,.row3{grid-template-columns:1fr}}

/* ---------- cards / panels ---------- */
/* Inside the right-hand column now, so it stretches to whatever the window
   gives it. The cap is deliberately far out: it exists so a table on an
   ultrawide monitor does not become a single unreadable line, not to leave a
   quarter of an ordinary screen empty. Below it, the page simply fills; above
   it, what is left over is split evenly rather than pooling on the right. */
.wrap{flex:1 1 auto;width:100%;max-width:2040px;margin-inline:auto;padding:22px 26px 60px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow)}
.card>h2{font-size:.92rem;color:var(--navy);padding:14px 18px;border-bottom:1px solid var(--line)}
.card>.in{padding:18px}

/* ---------- badges ---------- */
.tag{display:inline-block;font-size:.66rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  padding:3px 8px;border-radius:999px;background:var(--bg-eef1f7);color:var(--tx-54607a);white-space:nowrap}
.tag.ok{background:var(--ok-bg);color:var(--ok)}
.tag.warn{background:var(--warn-bg);color:var(--warn)}
.tag.bad{background:var(--bad-bg);color:var(--bad)}
.tag.info{background:var(--sky);color:var(--navy)}
/* A permission given to one person on top of their role. It carries a portal's
   real name, so it reads as words rather than as a badge: normal case, no
   tracking, and free to wrap onto a second line in a narrow column. */
.tag.grant{background:var(--sky);color:var(--navy);text-transform:none;letter-spacing:0;
  font-weight:500;font-size:.72rem;white-space:normal;line-height:1.35;
  padding:3px 9px;border-radius:9px;max-width:100%}
.tag.grant b{font-weight:700}

/* ---------- toast ---------- */
/* Toasts stack in one column and never sit on top of each other. */
#toasts{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:80;display:flex;
  flex-direction:column-reverse;gap:8px;align-items:center;width:max-content;max-width:min(560px,92vw);pointer-events:none}
body.has-pin #toasts{bottom:96px}
.toast{position:relative;pointer-events:auto;
  background:var(--navy-deep);color:#fff;padding:12px 18px;border-radius:9px;max-width:min(560px,92vw);
  box-shadow:0 14px 36px rgba(0,0,0,.3);font-size:.84rem;transition:opacity .3s}
.toast.out{opacity:0}
.toast .tx{background:none;border:0;color:#fff;font-size:1rem;margin-left:10px;cursor:pointer;opacity:.8;padding:0 2px}
.toast.ok{background:#1E6B34}
.toast.warn{background:#8A4B00}
.toast.bad{background:#8C1D1D;cursor:pointer}
.toast ul{margin:6px 0 0;padding-left:18px}

/* ---------- modal ---------- */
.scrim{position:fixed;inset:0;background:rgba(15,26,58,.65);z-index:60;display:grid;place-items:center;padding:20px}
.modal{background:var(--card);border-radius:14px;max-width:680px;width:100%;max-height:86vh;overflow:auto;
  box-shadow:0 24px 60px rgba(0,0,0,.4)}
.modal.wide{max-width:860px}
.modal header{padding:18px 22px 0}
.modal header h2{font-size:1.25rem;color:var(--navy)}
.modal header.x{position:sticky;top:0;z-index:2;background:var(--card);display:flex;align-items:center;
  justify-content:space-between;gap:12px;padding:14px 12px 10px 22px;border-bottom:1px solid var(--line)}
.modal .mx{flex:0 0 auto;width:40px;height:40px;display:grid;place-items:center;border:0;border-radius:10px;
  background:var(--sky);color:var(--navy);cursor:pointer}
.modal .mx:hover{background:var(--line)}
.modal .mx svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round}
.modal .body{padding:14px 22px 22px}
.modal .foot{display:flex;gap:10px;justify-content:flex-end;padding:0 22px 20px;flex-wrap:wrap}

/* ---------- sign-in ---------- */
/* 94vw plus 22px of padding on each side came to more than the screen on a
   phone, so the card sat off to one side of a page you could scroll sideways.
   The width is measured against the space actually left, not against the whole
   viewport, and the padding shrinks with the screen. */
.login{display:grid;place-items:center;min-height:100dvh;padding:22px;background:
  linear-gradient(135deg,var(--navy) 0%,var(--navy-deep) 55%,#0E1B3E 100%)}
.login form{background:var(--card);padding:30px 30px 26px;border-radius:14px;
  width:100%;max-width:420px;box-shadow:0 24px 60px rgba(0,0,0,.35)}
@media(max-width:430px){
  .login{padding:14px}
  .login form{padding:24px 18px 20px}
}
.login .brand-big{width:210px;height:53px;margin:0 auto 18px;background:var(--logo) no-repeat center/contain}
.login h1{font-size:1.3rem;color:var(--navy);margin-bottom:4px;text-align:center}
.login p.sub{color:var(--muted);font-size:.83rem;margin:0 0 18px;text-align:center}
.login .f{margin-bottom:14px}
.login .btn{width:100%;justify-content:center;padding:12px}
.err-box{background:var(--bad-bg);color:var(--bad);border-radius:6px;padding:9px 12px;
  font-size:.8rem;margin-bottom:14px;font-weight:500}
.empty{padding:40px 20px;text-align:center;color:var(--muted)}

/* ---------- the report button ----------
   Present on every page and deliberately unassertive: a small outline in the
   corner that only fills in when you go for it. On a phone it loses its label
   and becomes a circle, because there the screen is the scarce thing. */
/* A pill, not a dot. It sits clear of the corner and of whatever the phone
   draws over the bottom of the screen, and it keeps its word - an unlabelled
   circle in the corner of a hub full of circles is a guess. */
.fb-btn{position:fixed;right:20px;bottom:20px;z-index:55;display:flex;align-items:center;gap:8px;
  background:var(--card);color:var(--muted);border:1px solid var(--line);border-radius:999px;
  padding:10px 16px;font:inherit;font-size:.8rem;font-weight:600;cursor:pointer;opacity:.78;
  box-shadow:0 2px 10px rgba(22,41,90,.1);transition:opacity .15s,color .15s,border-color .15s,transform .12s}
.fb-btn:hover,.fb-btn:focus-visible{opacity:1;color:var(--navy);border-color:var(--navy);transform:translateY(-1px)}
.fb-btn svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
/* On a phone it covered buttons; "Send feedback" is first in the name menu
   there instead. On a desktop it lifts above a pinned save bar. */
@media(max-width:640px){ .fb-btn{display:none} }
body.has-pin .fb-btn{bottom:84px}
/* 1.25: out of the way while it would cover a control. */
.fb-btn.away{opacity:0;visibility:hidden;transition:opacity .15s,visibility 0s .15s}
@media print{ .fb-btn{display:none} }

/* ---------------------------------------------------------------- phones
   The shared shape of things on a small screen. Not a different design, the
   same one with room to breathe: nothing crammed against an edge, nothing
   ragged, nothing too small to hit with a thumb. */
@media(max-width:640px){
  .wrap{padding:18px 16px 40px}

  /* The doubled class names are deliberate. This file is served before each
     portal's own <style>, so at equal weight the portal wins - and these are the
     rules that have to win, because they are the ones saying "not on a phone".
     Repeating the class is the smallest way to outweigh it without !important. */

  /* A segmented control that wraps leaves a gap where the row ran out. Letting
     the buttons grow fills the row instead of ending it halfway. */
  .seg.seg{display:flex;width:100%}
  .seg.seg button{flex:1 1 auto;justify-content:center;text-align:center;min-height:40px}

  /* A search box squeezed in beside two dropdowns shows four characters of its
     own placeholder. It gets the line to itself. */
  .tools.tools input[type=search],.tools.tools input[type=text],
  .tools.tools input:where([type=search]){flex:1 1 100%;min-width:0;order:9}

  /* Thumbs, not cursors. */
  .btn.btn{min-height:40px}
  .btn.btn.sm{min-height:40px;padding:8px 12px}
  .dd>button{min-height:40px}

  /* Count tiles: one compact row, however many (never more than 4). */
  .counts.counts{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:6px;flex:1 1 100%}
  .counts.counts>*{min-width:0}
  .counts.counts .count{padding:6px 4px;min-width:0;min-height:56px}
  .counts.counts .count b{font-size:1.1rem}
  .counts.counts .count span{font-size:.62rem;letter-spacing:.02em}
}

.fb-kinds{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:8px;margin-bottom:16px}
.fb-kind{text-align:left;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:10px 12px;
  cursor:pointer;font:inherit;display:block}
.fb-kind b{display:block;color:var(--ink);font-size:.85rem}
.fb-kind span{color:var(--muted);font-size:.75rem}
.fb-kind.on{border-color:var(--navy);background:var(--sky);box-shadow:inset 0 0 0 1px var(--navy)}
.fb-shot{display:flex;gap:10px;align-items:flex-start;background:var(--sky);border:1px solid var(--line);
  border-radius:10px;padding:12px;cursor:pointer}
.fb-shot input{margin-top:3px;flex:0 0 auto}
.fb-shot b{display:block;font-size:.85rem;color:var(--ink)}
.fb-prev{margin-top:12px;text-align:center}
.fb-prev img{max-width:100%;max-height:260px;border:1px solid var(--line);border-radius:8px;display:block;margin:0 auto 10px}

/* ---------- shared list furniture for the newer portals ---------- */
.seg{display:inline-flex;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--card);flex-wrap:wrap}
.seg button{background:var(--card);border:0;border-right:1px solid var(--line);padding:7px 11px;font:inherit;
  font-size:.76rem;color:var(--muted);cursor:pointer;white-space:nowrap}
.seg button:last-child{border-right:0}
.seg button.on{background:var(--fill);color:#fff;font-weight:600}
.seg button:disabled{opacity:.5;cursor:not-allowed}

.tk{display:block;width:100%;text-align:left;background:var(--card);border:1px solid var(--line);border-left:4px solid var(--line);
  border-radius:10px;padding:12px 14px;margin-bottom:8px;cursor:pointer;font:inherit;box-shadow:var(--shadow)}
.tk:hover{border-color:var(--navy)}
.tk.sel{border-color:var(--navy);box-shadow:inset 0 0 0 1px var(--navy)}
.tk.down{border-left-color:var(--bad)}
.tk.cut{border-left-color:var(--orange)}
.tk.shut{opacity:.62}
.tk h4{font-size:.92rem;color:var(--ink);margin:0 0 4px;line-height:1.35}
.tk .meta{color:var(--muted);font-size:.74rem;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.split{display:grid;grid-template-columns:minmax(280px,380px) 1fr;gap:18px;align-items:start}
@media(max-width:860px){ .split{grid-template-columns:1fr} }
.thread{display:grid;gap:10px}
.note{background:var(--sky);border:1px solid var(--line);border-radius:10px;padding:10px 12px}
.note .who{font-size:.74rem;color:var(--muted);margin-bottom:4px}
.note p{margin:0;white-space:pre-wrap;line-height:1.6;font-size:.86rem}
.note .chg{font-size:.72rem;color:var(--navy);font-weight:600;margin-top:5px}
.kv{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-size:.84rem;align-items:baseline}
.kv dt{color:var(--muted);font-size:.76rem}
.kv dd{margin:0;color:var(--ink)}
h4.sec{font-size:.74rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);
  margin:16px 0 6px;font-family:var(--body);font-weight:700}
h4.sec:first-child{margin-top:0}
p.body-txt{margin:0;white-space:pre-wrap;line-height:1.65;font-size:.88rem;color:var(--ink)}

/* ---------- admin: per-person access ---------- */
.techbox{display:flex;gap:10px;align-items:flex-start;background:var(--warn-bg);
  border:1px solid var(--bd-ebd9a8);border-radius:10px;padding:11px 13px;cursor:pointer}
.techbox input{margin-top:3px;width:auto;flex:0 0 auto}
.techbox b{display:block;font-size:.85rem;color:var(--ink)}
.grants{display:grid;gap:8px}
.grants .sec{margin:10px 0 0}
.grow-row .seg{flex-wrap:wrap}
/* One shape for every row, however long that portal's words are - half the rows
   putting their buttons on the right and half underneath reads as a mistake. */
.grow-row{display:flex;flex-direction:column;align-items:flex-start;gap:8px;
  border:1px solid var(--line);border-radius:9px;padding:10px 12px;background:var(--card)}
.grow-row b{display:block;font-size:.85rem;color:var(--ink)}
.grow-row .hint{display:block}
.extras-row{margin-top:4px;display:flex;gap:4px;flex-wrap:wrap}

/* ---------- notifications ---------- */
.gcard{border:1px solid var(--line);border-radius:12px;padding:14px 16px;background:var(--card);margin-bottom:6px}
.gcard.on{border-color:var(--ok);background:var(--ok-bg)}
.gtop{display:flex;gap:14px;justify-content:space-between;align-items:flex-start;flex-wrap:wrap}
.gtop b{display:block;font-size:.95rem;color:var(--ink)}
.gtop .hint{display:block;margin-top:2px}
.gask{margin-top:12px;border-top:1px solid var(--line);padding-top:12px}
.gask ul{margin:8px 0;padding-left:20px}
.gask li{font-size:.83rem;color:var(--ink);margin-bottom:6px;line-height:1.5}
.nlist{display:grid;gap:8px}
.nrow{display:flex;gap:10px;align-items:flex-start;border:1px solid var(--line);border-radius:9px;
  padding:10px 12px;cursor:pointer;background:var(--card)}
.nrow input{margin-top:3px;width:auto;flex:0 0 auto}
.nrow b{display:block;font-size:.85rem;color:var(--ink)}
.nrow .hint{display:block}
.nrow.off{opacity:.6;cursor:default}
.counts{display:flex;gap:8px;flex-wrap:wrap}
.counts .count{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:8px 14px;
  text-align:center;min-width:76px;font:inherit;cursor:pointer;display:block}
.counts .count:hover{border-color:var(--navy)}
.counts .count.on{border-color:var(--navy);box-shadow:inset 0 0 0 1px var(--navy)}
.counts .count b{display:block;font-family:var(--head);font-size:1.3rem;color:var(--navy);line-height:1.1}
.counts .count span{font-size:.7rem;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.counts .count.bad b{color:var(--bad)}
.gsetup{margin-top:12px;border-top:1px solid var(--line);padding-top:12px}
.gsetup b{display:block;font-size:.84rem;color:var(--ink);margin-bottom:4px}
.gsetup .hint{display:block;margin-bottom:8px}
.gsetup code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.78rem}
.gurl{display:block;background:var(--sky);border:1px solid var(--line);border-radius:7px;
  padding:9px 11px;word-break:break-all;color:var(--navy);user-select:all;margin-bottom:8px}

/* ---------- dropdown ----------
   One control for every list of choices: the profile menu, the Games Manager's
   filters, the Admin Panel's sections. A row of chips is fine until there are
   nine of them on a phone, and then it is two lines of wrapping buttons above
   the thing you came to look at. */
.dd{position:relative;display:inline-block}
.dd>button{display:inline-flex;align-items:center;gap:8px;font:inherit;font-size:.82rem;font-weight:600;
  color:var(--ink);background:var(--card);border:1px solid var(--line);border-radius:9px;padding:8px 12px;
  cursor:pointer;white-space:nowrap;max-width:min(62vw,320px)}
.dd>button:hover{border-color:var(--navy)}
.dd>button .lbl{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dd>button .cv{flex:0 0 auto;opacity:.55;font-size:.7em;transition:transform .15s}
.dd.open>button{border-color:var(--navy);box-shadow:inset 0 0 0 1px var(--navy)}
.dd.open>button .cv{transform:rotate(180deg)}
.dd .menu{position:absolute;z-index:70;top:calc(100% + 6px);left:0;min-width:220px;max-width:min(88vw,340px);
  background:var(--card);border:1px solid var(--line);border-radius:11px;box-shadow:0 14px 40px rgba(22,41,90,.22);
  padding:6px;max-height:min(70vh,460px);overflow:auto}
.dd .menu.right{left:auto;right:0}
.dd .menu button{display:flex;width:100%;align-items:center;gap:9px;text-align:left;font:inherit;
  font-size:.85rem;color:var(--ink);background:none;border:0;border-radius:7px;padding:9px 10px;cursor:pointer}
.dd .menu button:hover{background:var(--sky)}
.dd .menu button[aria-checked="true"]{background:var(--sky);font-weight:600;color:var(--navy)}
.dd .menu button .tick{flex:0 0 14px;color:var(--navy);opacity:0}
.dd .menu button[aria-checked="true"] .tick{opacity:1}
.dd .menu button .n{margin-left:auto;color:var(--muted);font-size:.76rem;font-weight:500;
  white-space:nowrap;display:inline-flex;align-items:center;gap:6px;flex:0 0 auto}
/* A row is one line at any width: the label gives way with "…", the count
   and the dot stay on the row. */
.dd .menu button>span:not(.n):not(.tick){min-width:0;flex:0 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dd .menu button .n:has(.cnt){padding-left:12px}
.dd .menu button .n .cnt{background:var(--orange);color:var(--navy-deep);font-size:.68rem;font-weight:700;
  border-radius:999px;padding:1px 8px;white-space:nowrap}
.dd .menu .sep{height:1px;background:var(--line);margin:6px 4px}
.dd .menu .head{font-size:.68rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);
  padding:8px 10px 4px;font-weight:700}
.dd .menu button.danger{color:var(--bad)}
.dd .menu button svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round;flex:0 0 15px}

/* ---------- the version, and what's new ----------
   It lives at the foot of the nav, under everything else. Quiet, always in the
   same place, and out of the way of the page. It is a button rather than a
   label because the first thing anybody does with a version number is click it.
   Small text, but a finger-sized box around it. */
.ver{display:block;width:100%;text-align:left;font:inherit;font-size:.68rem;font-weight:600;
  letter-spacing:.04em;border:0;cursor:pointer;background:none;color:rgba(255,255,255,.45);
  padding:10px;line-height:1.15;border-radius:7px}
.ver:hover,.ver:focus-visible{background:rgba(255,255,255,.1);color:#fff}

/* Not read yet. One small dot, in two places: on the badge you can see from
   anywhere, and beside the entry in the menu it takes you to. */
.dd.me-dd>button{position:relative}
.dd.me-dd.has-new>button::after{content:"";position:absolute;top:-2px;right:-1px;
  width:9px;height:9px;border-radius:50%;background:var(--orange);
  box-shadow:0 0 0 2px var(--card)}
.dd .menu button .n .dot{display:inline-block;width:7px;height:7px;border-radius:50%;
  background:var(--orange);vertical-align:middle}

/* Folded by default. Every version expanded at once is a page of release notes
   nobody scrolls; the dot says which ones are worth opening. */
.chlog{display:grid;gap:10px}
.chlog .rel{border-left:2px solid var(--line);padding-left:14px}
.chlog .rel.now{border-left-color:var(--orange)}
.chlog .rel>summary{cursor:pointer;list-style:none;padding:2px 0}
.chlog .rel>summary::-webkit-details-marker{display:none}
.chlog .rel>summary::after{content:"▾";float:right;color:var(--muted);font-size:.8rem;
  margin-top:-18px;transition:transform .15s}
.chlog .rel[open]>summary::after{transform:rotate(180deg)}
.chlog .rel>summary h3{margin:4px 22px 0 0}
.chlog .rel[open]>summary h3{margin-bottom:8px}
.chlog .rel>ul{margin-top:2px}
.chlog .relhead{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:.76rem}
.chlog .relhead b{font-family:var(--head);font-size:.95rem;letter-spacing:.03em;color:var(--navy)}
.chlog .kind{background:var(--sky);color:var(--navy);border-radius:999px;padding:2px 9px;font-weight:600}
.chlog .kind.fix{background:var(--warn-bg);color:var(--warn)}
.chlog .when{color:var(--muted)}
/* A release title is a sentence, not a heading to shout - the shared h1,h2,h3
   rule puts everything in Oswald caps, which is wrong here. */
.chlog h3{font-family:var(--body);text-transform:none;letter-spacing:0;
  font-size:1rem;font-weight:600;margin:6px 0 8px;color:var(--ink)}
.chlog ul{margin:0;padding-left:18px;display:grid;gap:7px}
.chlog li{font-size:.85rem;line-height:1.5;color:var(--muted)}

/* the name badge that opens the profile menu */
/* The strip it sits on is white now, so the badge is drawn for a light bar. */
/* The right-hand padding is bigger than it looks it should be. This is a
   capsule: at the left the round avatar fills the curve, but on the right a
   flat 12px puts the chevron where the border is already bending away, and it
   reads as jammed against the edge. It needs about the cap radius to sit in the
   straight part of the pill. */
.dd.me-dd>button{display:inline-flex;align-items:center;gap:9px;font:inherit;font-size:.8rem;
  background:var(--card);border:1px solid var(--line);color:var(--ink);border-radius:99px;
  padding:5px 16px 5px 6px;cursor:pointer;max-width:min(54vw,280px)}
.dd.me-dd>button:hover{background:var(--sky);border-color:var(--bd-bfd4ec)}
.dd.me-dd>button .av{flex:0 0 24px;height:24px;border-radius:50%;background:var(--orange);color:#22305A;
  display:grid;place-items:center;font-weight:700;font-size:.72rem;font-family:var(--head)}
.dd.me-dd>button .who{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.25;text-align:left}
.dd.me-dd>button .who b{display:block;font-weight:600;overflow:hidden;text-overflow:ellipsis}
.dd.me-dd>button .who span{display:block;font-size:.68rem;color:var(--muted)}
.dd.me-dd>button .cv{opacity:.7;font-size:.65em}
/* On a phone the badge has a row largely to itself, so the 54vw cap that kept it
   from crowding a desktop bar only served to clip the name. Let it take what it
   needs.
   Nothing here clips, either. Poppins is fetched from Google and swapped in
   after the page has been laid out, and its letters are noticeably wider than
   the Helvetica Neue an iPhone paints in the meantime. A box that measured
   itself against the narrow font and then hides whatever overflows shaves the
   last letter off the name, which is exactly what was happening. The badge is
   re-measured when the font lands (see refitWhenFontsArrive), and with nothing
   hidden here a name stays readable even if that measurement is a little short.
   Long names are shortened to a first name and an initial before they get this
   far, so there is nothing here that can outgrow the row. */
@media(max-width:640px){
  /* Initials only, so the page name fits beside it. */
  .dd.me-dd>button .who{display:none}
  .dd.me-dd>button{padding:5px 12px 5px 6px;min-height:40px}
  .dd.me-dd>button .who span{display:none}
  .bar .dd.me-dd.me-dd{min-width:0}
  .dd.me-dd>button{max-width:calc(100vw - 28px)}
  .dd.me-dd>button .who,
  .dd.me-dd>button .who b{overflow:visible;text-overflow:clip}
}
.prow2 .means,.grow-row .means{display:block;font-size:.76rem;color:var(--navy);margin-top:3px;line-height:1.45}
.prow2 .means.note,.grow-row .means.note{color:var(--warn);margin-top:4px}
.hubpick{display:grid;gap:8px}
.hubpick label{display:flex;gap:10px;align-items:flex-start;border:1px solid var(--line);border-radius:9px;
  padding:10px 12px;background:var(--card);cursor:pointer}
.hubpick label.off{opacity:.55;cursor:not-allowed}
.hubpick input{margin-top:3px;width:auto;flex:0 0 auto}
.hubpick b{display:block;font-size:.86rem;color:var(--ink)}
details.setup{padding:0}
details.setup>summary{padding:13px 18px;font-size:.9rem;font-weight:600;color:var(--navy);cursor:pointer;
  list-style:none;display:flex;align-items:center;gap:8px}
details.setup>summary::-webkit-details-marker{display:none}
details.setup>summary::before{content:"▸";color:var(--muted);font-size:.8em}
details.setup[open]>summary::before{content:"▾"}
details.setup[open]>summary{border-bottom:1px solid var(--line)}

/* ---------- a save bar, and a warning note: shared, so the Notifications
   modal looks the same on every page, not only in the Admin Panel ---------- */
.savebar{position:sticky;bottom:0;background:var(--bg);border-top:1px solid var(--line);
  padding:14px 0;display:flex;gap:10px;margin-top:18px}

/* =============================================================================
   The HUB standard (Alpha 1.17): the same parts in every portal.
   ========================================================================== */
[hidden]{display:none!important}

/* ---------- page head: views on the left, actions on the right ---------- */
.ph{display:flex;align-items:center;gap:10px 12px;flex-wrap:wrap;margin-bottom:14px}
.ph .ph-views{flex:0 1 auto;min-width:0}
.ph .ph-lead{display:flex;align-items:center;gap:10px;flex-wrap:wrap;min-width:0}
.ph .ph-grow{flex:1 1 0}
.ph .ph-acts{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.ph .ph-acts .btn{min-height:40px}
.seg button .tdot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--orange);margin-left:6px;vertical-align:middle}
@media(max-width:640px){
  .ph{gap:8px}
  .ph .ph-lead,.ph .ph-views{flex:1 1 100%}
  .ph .ph-grow{display:none}
  .ph .ph-acts{flex:1 1 100%}
  .ph .ph-acts .btn.n{flex:1 1 0;justify-content:center}
  .ph .ph-acts .btn.o:not(.more){flex:1 1 0;justify-content:center}
  .ph .seg.seg{display:grid;grid-template-columns:repeat(var(--segcols,3),1fr)}
  .ph .seg.seg button{border-bottom:1px solid var(--line)}
}
.btn.more .lbl-more{display:inline}
.btn.more .lbl-dots{display:none;font-size:1.1rem;line-height:1;letter-spacing:.05em}
@media(max-width:640px){ .btn.more .lbl-more{display:none} .btn.more .lbl-dots{display:inline} .btn.more{min-width:44px;justify-content:center} }
.seg button{min-height:40px}

/* ---------- filter chips: preset slices of one list ---------- */
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chips button{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:var(--card);border-radius:999px;
  padding:7px 13px;font:inherit;font-size:.8rem;color:var(--ink);cursor:pointer;line-height:1.2;min-height:40px}
.chips button:hover{border-color:var(--navy)}
.chips button.on{background:var(--fill);border-color:var(--navy);color:#fff;font-weight:600}
.chips button .n{background:var(--sky);color:var(--navy);border-radius:999px;padding:1px 7px;font-size:.7rem;font-weight:700}
.chips button.on .n{background:rgba(255,255,255,.22);color:#fff}
.frow{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.frow .chips{flex:1 1 auto}
.frow input[type=search]{flex:1 1 220px;min-width:0}
@media(max-width:640px){ .frow input[type=search]{flex:1 1 100%} }

/* ---------- a choice inside a form: outline, navy border when picked ---------- */
.choice{display:inline-flex;flex-wrap:wrap;gap:6px}
.choice button{font:inherit;font-size:.8rem;background:var(--card);color:var(--ink);border:1.5px solid var(--line);border-radius:8px;
  padding:7px 12px;cursor:pointer;min-height:40px}
.choice button.on{border-color:var(--navy);color:var(--navy);font-weight:600;box-shadow:inset 0 0 0 1px var(--navy)}
.choice button:disabled{opacity:.5;cursor:not-allowed}

/* ---------- notices ---------- */
.notice{border-radius:9px;padding:10px 13px;font-size:.84rem;margin:0 0 12px;line-height:1.5}
.notice.info{background:var(--sky);color:var(--navy)}
.notice.warn{background:var(--warn-bg);color:var(--warn)}
.notice.bad{background:var(--bad-bg);color:var(--bad)}
.notice .btn{margin-left:8px}

/* ---------- empty state ---------- */
.emptycard{width:100%}
.emptycard .in{padding:28px 22px}
.emptycard h2{margin:0 0 6px;color:var(--navy);font-size:1.15rem}
.emptycard p{margin:0;color:var(--muted)}
.emptycard .btn{margin-top:16px}
.nomatch{padding:24px 12px;text-align:center;color:var(--muted)}
.lagnote{font-size:.78rem;color:var(--muted);text-align:center;margin:14px 0 4px}

/* ---------- list and detail; on a phone the detail replaces the list ---------- */
.ld-back{display:none}
@media(max-width:860px){
  body.ld-open .ld-hide{display:none!important}
  body:not(.ld-open) .ld-detail{display:none!important}
  body.ld-open .ld-back{display:flex;position:sticky;top:56px;z-index:30;background:var(--bg);padding:8px 0;margin:-8px 0 8px}
  body.ld-open .ld-back .btn{min-height:40px}
  .ld-detail .card{position:static!important}
  .ld-empty{display:none}
}

/* ---------- folded sections (Settings and every editor) ---------- */
details.fold{padding:0}
.fold>summary{list-style:none;display:flex;align-items:center;gap:12px;padding:15px 18px;cursor:pointer;user-select:none;min-height:52px}
.fold>summary::-webkit-details-marker{display:none}
.fold>summary:hover{background:var(--bg-f8fafd)}
.fold>summary .st{font-family:var(--head);text-transform:uppercase;letter-spacing:.02em;color:var(--navy);font-size:.98rem;white-space:nowrap}
.fold>summary .gist{color:var(--muted);font-size:.8rem;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fold>summary .sdot{flex:0 0 9px;width:9px;height:9px;border-radius:50%;background:var(--orange)}
.fold>summary .chev{width:20px;height:20px;flex:0 0 20px;fill:none;stroke:var(--muted);stroke-width:2;stroke-linecap:round;transition:transform .15s}
.fold[open]>summary{border-bottom:1px solid var(--line)}
.fold[open]>summary .chev{transform:rotate(180deg)}
.fold>.in{padding:16px 18px}
.fold .secfoot{display:flex;justify-content:flex-end;margin-top:16px;padding-top:12px;border-top:1px dashed var(--line)}
@media(max-width:560px){ .fold>summary{flex-wrap:wrap;gap:4px 12px} .fold>summary .gist{order:3;flex-basis:100%;white-space:normal} }
.edstack{display:grid;gap:10px}
.edstack>*{min-width:0}

/* ---------- the pinned save bar ---------- */
.savebar.pin{position:fixed;bottom:0;left:var(--sb-left,0);width:var(--sb-width,100%);z-index:40;margin:0;
  background:var(--card);border:1px solid var(--line);border-bottom:0;border-radius:var(--r) var(--r) 0 0;
  box-shadow:0 -6px 18px rgba(22,41,90,.08);padding:12px 14px calc(12px + env(safe-area-inset-bottom, 0px));
  display:flex;gap:8px;align-items:center;flex-wrap:nowrap}
.savebar.pin .btn{flex:0 0 auto;min-height:40px}
.savebar.pin .msg{font-size:.8rem;color:var(--muted);flex:1;min-width:0}
.savebar.pin .msg.dirty{color:var(--warn);font-weight:600}
body.has-pin .wrap{padding-bottom:110px}
/* ---------- More menu, toast actions, tappable tiles ---------- */
.dd.more-dd>button.btn{padding:9px 13px;border:1.5px solid var(--line);border-radius:8px;font-size:.82rem;color:var(--navy);max-width:none}
.dd.more-dd>button .cv{margin-left:2px}
@media(max-width:640px){ .dd.more-dd>button .cv{display:none} .ph .ph-acts .dd.more-dd{flex:0 0 auto} }
.dd .menu button:disabled{opacity:.45;cursor:not-allowed}
.toast .ta{background:rgba(255,255,255,.16);border:0;color:#fff;font:inherit;font-weight:700;text-transform:uppercase;
  font-size:.74rem;letter-spacing:.03em;border-radius:6px;padding:6px 10px;margin-left:12px;cursor:pointer;min-height:32px}
button.count{font:inherit;text-align:left;cursor:pointer;color:inherit}
.noaccess .emptycard{max-width:640px}
/* ---------- only ever scroll up and down (1.17.1) ---------- */
body{overflow-x:clip}
/* A box scrolls on its own and never sideways; the page behind it stays put. */
html:has(.scrim){overflow:hidden}
.scrim{overscroll-behavior:contain;touch-action:pan-y pinch-zoom}
.modal{overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y pinch-zoom}
.modal .body>*,.modal .body .f,.modal .body label{min-width:0;max-width:100%}
/* iPhone date and time fields draw a native control with its own minimum
   width, which ignores width:100% and runs past the right edge of its box.
   Without the native appearance they take the box's width like any input;
   min-height keeps an empty one from collapsing (iOS shows no placeholder). */
input[type=date],input[type=time],input[type=datetime-local],input[type=month]{
  -webkit-appearance:none;appearance:none;display:block;width:100%;min-width:0;max-width:100%;
  min-height:42px;line-height:1.35;box-sizing:border-box}
input::-webkit-date-and-time-value{text-align:left;margin:0}
input[type=date]::-webkit-calendar-picker-indicator,input[type=time]::-webkit-calendar-picker-indicator{margin-left:auto}
/* On a phone a date or time field shares its row evenly instead of keeping a
   desktop width that may not fit. */
@media(max-width:640px){
  .f:has(>input[type=date]),.f:has(>input[type=time]),.f:has(>input[type=datetime-local]),
  label:has(>input[type=date]),label:has(>input[type=time]){flex:1 1 140px!important;min-width:0!important;max-width:100%}
}
/* ---------- usage guard (1.18): the banner, and a queued change ---------- */
.ubanner{width:100%;max-width:2040px;margin-inline:auto;padding:14px 26px 0}
.ubanner .notice{margin:0}
.ubanner a{color:inherit;font-weight:600}
@media(max-width:640px){ .ubanner{padding:12px 16px 0} }
.q-saving{opacity:.7}
label.q-saving::after,button.q-saving::after,li.q-saving::after,.row.q-saving::after{content:"Saving…";margin-left:8px;
  font-size:.72rem;font-weight:600;color:var(--muted);text-transform:none;letter-spacing:0}
/* ---------- login popup (1.20): 560px box; on a phone a full-height sheet,
   the body scrolls and the footer stays put ---------- */
.lp .modal{max-width:560px;display:flex;flex-direction:column;overflow:hidden}
.lp .modal .body{flex:1 1 auto;min-height:0;overflow-y:auto;padding-top:2px}
.lp .modal .foot{padding-top:14px;border-top:1px solid var(--line)}
.lp-sub{margin:0;color:var(--muted)}
.lp-h{font-size:.8rem;letter-spacing:.06em;color:var(--muted);margin:18px 0 2px}
.lp-r{display:flex;align-items:center;gap:10px;min-height:48px;border-bottom:1px solid var(--line);color:var(--ink);text-decoration:none}
.lp-r>span:first-child{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lp-r i{font-style:normal;font-size:1.3rem;color:var(--muted)}
.lp-r:hover>span:first-child,.lp-m{color:var(--navy);font-weight:600}
.lp-a{padding:10px 0 12px;border-bottom:1px solid var(--line)}
.lp-a p{margin:6px 0 0;white-space:pre-wrap;line-height:1.6}
.lp-a .btn{margin-top:10px}
@media(max-width:640px){ .scrim.lp{padding:0;place-items:stretch}
  .lp .modal{max-width:none;max-height:none;height:100dvh;border-radius:0}
  .lp .modal .foot{padding:12px 16px calc(12px + env(safe-area-inset-bottom))}
  .lp .modal .foot .btn{flex:1 1 0;justify-content:center} .lp .modal .body{padding:2px 16px 16px}
  .lp .modal header.x{padding-left:16px} }
/* Switches (1.27 in Campaigns, shared since 1.28): a label wrapping a full-size
   transparent checkbox and an <i> track. */
.tgl{position:relative;display:inline-flex;align-items:center;gap:10px;min-height:40px;cursor:pointer;font-size:.84rem;color:var(--ink);user-select:none;-webkit-tap-highlight-color:transparent}
.tgl input{position:absolute;inset:0;opacity:0;width:100%;height:100%;margin:0;cursor:pointer;z-index:1}
.tgl i{position:relative;flex:0 0 auto;width:38px;height:22px;border-radius:999px;background:var(--bd-c3cede);transition:background .2s ease}
.tgl i::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;
  box-shadow:0 1px 3px rgba(0,0,0,.3);transition:transform .22s cubic-bezier(.3,1.4,.55,1)}
.tgl input:checked + i{background:var(--fill)}
.tgl input:checked + i::after{transform:translateX(16px)}
.tgl input:focus-visible + i{outline:2px solid var(--navy);outline-offset:2px}
.tgl input:disabled + i{opacity:.45}.tgl input:disabled{cursor:default}
.tgl.sm{font-size:.78rem;color:var(--muted)}
.tgl.sm span{min-width:30px}
@media(prefers-reduced-motion:reduce){.tgl i,.tgl i::after{transition:none}}
/* 1.28: the message of the day - one big card. */
.motd .modal{max-width:560px;border-top:6px solid var(--orange);overflow:hidden}
.motd .modal header{display:none}
.motd .modal .body{padding-top:26px}
.motd-k{font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--orange)}
.motd-t{font-family:Oswald,sans-serif;font-size:1.8rem;line-height:1.15;color:var(--navy);margin:6px 0 12px;text-transform:none}
.motd-b{font-size:.98rem;line-height:1.55;color:var(--ink)}
.motd-b p{margin:0 0 12px}
.motd-by{margin:6px 0 0;font-size:.8rem;color:var(--muted)}
@media(max-width:560px){.motd-t{font-size:1.5rem}}