/* Archivo, self-hosted, TWO subsets.
 *
 * The file previously served here was archivo-var.woff2 (md5 fca5a1ef..., 13 KB):
 * the Google Fonts VIETNAMESE slice, 115 glyphs, no lowercase Latin and no
 * digits. A browser cannot render this app's text from it, so it silently fell
 * back to Arial -- the portal has not rendered Archivo since it shipped, while
 * both sibling apps do. The trap is recorded in
 * knowledge/_shared/brand-tokens/ancoraoak.md.
 *
 * Two faces are required, not one: Polish diacritics span latin and latin-ext
 * (a with ogonek is latin-ext, o with acute is latin), so a single subset leaves
 * half of every Polish name to the fallback font. Ranges copied from the
 * Compendium, which is the tested pair.
 */
@font-face {
  font-family:"Archivo";
  src:url(/assets/fonts/archivo-latin.woff2) format("woff2-variations");
  font-weight:100 900; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC,
                U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family:"Archivo";
  src:url(/assets/fonts/archivo-latin-ext.woff2) format("woff2-variations");
  font-weight:100 900; font-style:normal; font-display:swap;
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* AncoraOak portal — design tokens.
 *
 * Adopted name-for-name and value-for-value from the family's system of record
 * (/opt/ancoraoak-scheduling/app/src/app/globals.css, via the Compendium's
 * globals.css :root block). The portal previously carried its own short names
 * (--acc, --ink, --mut, --r) with two measured accessibility failures and a
 * warm palette that neither sibling uses. Keeping the --brand-* names is what
 * makes this file portable into a Next app later, and what lets per-entity
 * theming work by overriding custom properties on a wrapper element.
 *
 * Two values are deliberately NOT the Figma canon:
 *   --brand-ink-muted     #929ca9 measures 2.78:1 on white and is forbidden as
 *                         text by knowledge/_shared/brand-tokens/ancoraoak.md
 *   --brand-ink-muted-alt for the same colour on --brand-bg-alt, where the
 *                         primary muted value drops to 4.39:1
 */
:root {
  --brand-accent:#003cff;        --brand-accent-soft:#f3f6ff;
  --brand-ink:#1d2126;           --brand-ink-secondary:#464a55;
  --brand-ink-muted:#6d7683;     --brand-ink-muted-alt:#5c6572;
  --brand-bg:#ffffff;            --brand-bg-alt:#f8fafb;
  --brand-line:#ced3d9;          --brand-line-strong:#868e99;
  --brand-hairline:#e4e8ec;
  --brand-amber:#fba729;         --brand-amber-text:#9a6200;
  --brand-green:#2fc88b;         --brand-green-text:#1c7d58;
  --brand-red:#e5484d;           --brand-red-text:#b42318;
  --radius-card:14px;  --radius-input:10px;  --radius-tile:12px;  --radius-pill:99px;
  --shadow-resting:0 1px 2px rgba(29,33,38,.04), 0 8px 24px rgba(29,33,38,.06);
  --shadow-raised:0 2px 4px rgba(0,60,255,.05), 0 16px 40px rgba(29,33,38,.1);
  --focus-ring:0 0 0 2px var(--brand-bg), 0 0 0 4px var(--brand-accent);
  --ease-brand:cubic-bezier(0.32, 0.72, 0, 1);

  /* Legacy aliases so the existing 186 lines keep working unchanged. Remove
     these as rules are migrated to --brand-* directly. */
  --bg:var(--brand-bg-alt);      --card:var(--brand-bg);
  --line:var(--brand-hairline);  --line2:var(--brand-line);
  --ink:var(--brand-ink);        --sec:var(--brand-ink-secondary);
  /* --mut resolves to the ALT value: the portal page sits on
     --brand-bg-alt, where --brand-ink-muted is 4.39:1. Measured. */
  --mut:var(--brand-ink-muted-alt); --soft:var(--brand-ink-muted-alt);
  --acc:var(--brand-accent);     --acc-soft:var(--brand-accent-soft);
  --gold:#b87f22;                --gold-soft:#fff7ea;
  --shadow:var(--shadow-resting);--shadow-lift:var(--shadow-raised);
  --r:var(--radius-card);
}
* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html { scroll-behavior:smooth; }
body { background:var(--bg); color:var(--ink);
  font:380 15px/1.6 "Archivo", "Helvetica Neue", Arial, sans-serif;
  min-height:100dvh; display:flex; flex-direction:column;
  padding-bottom:env(safe-area-inset-bottom); }
.top { position:sticky; top:0; z-index:20; display:flex; justify-content:space-between;
  align-items:center; gap:12px; padding:16px clamp(16px,4vw,36px);
  background:rgba(250,249,246,.86); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line); }
.wm { display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink); }
.wm img { height:14px; display:block; }
.wm span { font-size:10.5px; letter-spacing:.26em; color:var(--acc); font-weight:560; }
/* Was a typed "|" in --line2, which measures 1.51:1 -- fine for a rule, far
   below the 4.5:1 a text character owes. A divider is not text: as a 1px block
   it is decorative, exempt by definition, and it stops being read aloud,
   selected, or copied along with the wordmark. */
.wm .wsep { display:inline-block; width:1px; height:13px; background:var(--line2);
  border-radius:1px; flex:none; }
.mark .wsep { display:inline-block; width:1px; height:13px; background:var(--line2);
  border-radius:1px; margin:0 10px; vertical-align:middle; flex:none; }
.chip { display:flex; align-items:center; gap:10px; font-size:12.5px; color:var(--mut); }
.chip .dot { width:28px; height:28px; border-radius:50%; background:var(--ink); color:#fff;
  display:grid; place-items:center; font-size:11.5px; font-weight:600; letter-spacing:.02em; }
.chip a { color:var(--mut); text-decoration:none; border-bottom:1px solid transparent; }
.chip a:hover { color:var(--ink); border-color:var(--line2); }
main { flex:1; width:100%; max-width:960px; margin:0 auto; padding:clamp(20px,4vw,44px) clamp(16px,4vw,36px) 60px; }
footer { padding:26px; text-align:center; font-size:12px; color:var(--soft); }
footer a { color:var(--soft); }
.fade { animation:fade .45s ease both; }
@keyframes fade { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }
h1 { font-size:clamp(20px,3vw,26px); font-weight:600; letter-spacing:-.01em; }
.sub { margin-top:6px; color:var(--mut); font-size:14px; }
/* login */
.gate { max-width:400px; margin:10vh auto 0; }
.gate .mark { text-align:center; margin-bottom:26px; }
.gate .mark { display:flex; align-items:center; justify-content:center; gap:12px; }
.gate .mark .wsep { height:15px; }
.gate .markline { font-size:11px; letter-spacing:.32em; color:var(--acc); font-weight:560; padding-top:2px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--shadow); padding:30px 28px; }
label { display:block; font-size:12px; letter-spacing:.08em; color:var(--mut); text-transform:uppercase; margin-bottom:8px; }
input[type=email] { width:100%; padding:13px 14px; border-radius:10px; border:1px solid var(--line2);
  background:#fff; color:var(--ink); font-size:16px; transition:border .15s, box-shadow .15s; }
input[type=email]:focus-visible { border-color:var(--acc);
  outline:2px solid var(--brand-accent); outline-offset:2px; box-shadow:var(--focus-ring); }
input[type=email]:focus:not(:focus-visible) { border-color:var(--acc); outline:none; box-shadow:none; }
.btn { width:100%; margin-top:14px; padding:13px; border-radius:10px; border:none; cursor:pointer;
  background:var(--acc); color:#fff; font-size:14px; letter-spacing:.06em; transition:filter .15s, transform .05s; }
.btn:hover { filter:brightness(1.12); }
.btn:active { transform:scale(.99); }
.note { margin-top:14px; font-size:12.5px; color:var(--soft); text-align:center; }
/* home tiles */
.tiles { margin-top:28px; display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:18px; }
.tile { position:relative; display:block; text-decoration:none; color:var(--ink);
  background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--shadow); padding:26px 24px 22px; transition:box-shadow .2s, transform .2s, border-color .2s; }
a.tile:hover { box-shadow:var(--shadow-lift); transform:translateY(-2px); border-color:var(--line2); }
.tile .ic { width:42px; height:42px; border-radius:12px; background:var(--acc-soft); color:var(--acc);
  display:grid; place-items:center; margin-bottom:16px; }
.tile h3 { font-size:16px; font-weight:600; }
.tile p { margin-top:6px; font-size:13px; color:var(--mut); }
.tile .go { position:absolute; top:22px; right:20px; color:var(--soft); transition:transform .2s, color .2s; }
a.tile:hover .go { transform:translateX(3px); color:var(--acc); }
.tile.soon { opacity:.62; }
.tile.locked { opacity:.45; filter:grayscale(1); cursor:default; }
.tile.locked .ic { background:var(--line); color:var(--mut); }
.badge { display:inline-block; margin-left:8px; padding:2px 8px; border-radius:99px;
  font-size:10px; letter-spacing:.1em; text-transform:uppercase; background:var(--gold-soft); color:var(--gold); }
/* files */
.crumbs { display:flex; flex-wrap:wrap; gap:4px; align-items:center; font-size:13px; color:var(--mut); margin:10px 0 16px; }
.crumbs a { color:var(--sec); text-decoration:none; padding:4px 10px; border-radius:99px; border:1px solid transparent; font-weight:460; }
.crumbs a:hover { background:var(--acc-soft); color:var(--acc); }
.crumbs a:last-child { background:var(--card); border-color:var(--line); color:var(--ink); }
.crumbs .sep { color:var(--soft); margin:0 2px; }
.panel { background:var(--card); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow); overflow:hidden; }
.row { display:flex; align-items:center; gap:14px; padding:11px 18px; min-height:52px; border-bottom:1px solid var(--line);
  text-decoration:none; color:var(--ink); font-size:14.5px; font-weight:420; transition:background .12s; }
.row:last-child { border-bottom:none; }
.row:hover { background:#fbfcfe; }
.row:active { background:var(--acc-soft); }
.row .chev { color:var(--soft); flex:none; transition:transform .15s; }
.row:hover .chev { color:var(--acc); transform:translateX(2px); }
.row .fic { width:34px; height:34px; border-radius:9px; display:grid; place-items:center; flex:none;
  background:var(--acc-soft); color:var(--acc); font-size:15px; }
.row .fic.file { background:var(--brand-bg-alt); color:var(--mut); }
.row .nm { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.row .meta { color:var(--soft); font-size:12px; white-space:nowrap; }
.row .dl { color:var(--sec); width:34px; height:34px; display:grid; place-items:center;
  border:1px solid var(--line); border-radius:10px; flex:none; background:var(--card); transition:all .15s; }
.row:hover .dl { color:var(--acc); border-color:var(--acc); background:var(--acc-soft); }
.empty { padding:44px 20px; text-align:center; color:var(--soft); font-size:13.5px; }
.skel { height:46px; margin:8px 14px; border-radius:10px;
  background:linear-gradient(90deg,var(--brand-hairline) 25%,var(--brand-bg-alt) 50%,var(--brand-hairline) 75%); background-size:200% 100%;
  animation:sh 1.1s infinite; }
@keyframes sh { from { background-position:200% 0 } to { background-position:-200% 0 } }
.drop { margin-top:22px; border:1.5px dashed var(--line2); border-radius:var(--r); padding:26px 22px;
  text-align:center; color:var(--mut); font-size:14px; background:var(--card); transition:all .18s; }
.drop.hot { border-color:var(--acc); background:var(--acc-soft); color:var(--acc); box-shadow:0 0 0 4px #003cff14; }
.drop .dic { width:40px; height:40px; margin:0 auto 10px; border-radius:12px; background:var(--acc-soft);
  color:var(--acc); display:grid; place-items:center; }
.drop label { display:inline-block; margin-left:8px; padding:7px 16px; border-radius:99px; border:1px solid var(--acc);
  color:var(--acc); cursor:pointer; font-size:13px; font-weight:480; letter-spacing:.02em; text-transform:none; transition:all .15s; }
.drop label:hover { background:var(--acc); color:#fff; }
/* Visually hidden but still focusable. display:none takes the input out of the
   tab order entirely, and the visible affordance is a <label>, which cannot hold
   focus -- so there was NO keyboard path to upload a file. */
.drop input {
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0;
}
.drop input:focus-visible + label, .drop input:focus-visible ~ label {
  outline:2px solid var(--brand-accent); outline-offset:3px; border-radius:8px;
}
.q { margin-top:10px; text-align:left; max-width:520px; margin-inline:auto; }
.qi { display:flex; align-items:center; gap:10px; font-size:12.5px; color:var(--mut); padding:6px 2px; }
.qi .bar { flex:1; height:4px; border-radius:99px; background:var(--brand-hairline); overflow:hidden; }
.qi .bar i { display:block; height:100%; width:0%; background:var(--acc); border-radius:99px; transition:width .2s; }
.qi.done { color:var(--acc); }
.qi.err { color:#a33f2f; }
.viewer { position:fixed; inset:0; z-index:60; background:rgba(29,33,38,.45); backdrop-filter:blur(6px);
  display:none; align-items:center; justify-content:center; padding:clamp(8px,3vw,32px); }
.viewer.open { display:flex; }
.vbox { background:var(--card); border-radius:var(--r); box-shadow:var(--shadow-lift); width:min(960px,100%);
  height:min(86dvh,100%); display:flex; flex-direction:column; overflow:hidden; animation:fade .25s ease; }
.vhead { display:flex; align-items:center; gap:12px; padding:12px 16px; border-bottom:1px solid var(--line); }
.vhead .t { flex:1; font-size:13.5px; font-weight:480; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.vhead button { width:32px; height:32px; margin:0; padding:0; flex:none; border-radius:9px; border:1px solid var(--line);
  background:var(--card); color:var(--sec); font-size:15px; cursor:pointer; }
.vhead button:hover { color:var(--acc); border-color:var(--acc); background:var(--acc-soft); }
.vbody { flex:1; min-height:0; overflow:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; background:#f2f4f6; }
.vbody iframe { width:100%; height:100%; border:0; }
.vbody img { max-width:100%; display:block; margin:20px auto; border-radius:8px; box-shadow:var(--shadow); }
.vbody .txt { background:var(--card); margin:18px auto; max-width:760px; padding:28px 32px; border-radius:12px;
  box-shadow:var(--shadow); font-size:14px; line-height:1.7; white-space:pre-wrap; word-break:break-word;
  font-family:"Archivo", sans-serif; }
.vbody .txt h1m { display:block; font-size:20px; font-weight:600; margin:14px 0 6px; }
.vbody .txt h2m { display:block; font-size:16.5px; font-weight:600; margin:12px 0 4px; }
.vbody .txt bm { font-weight:600; }
.vbody .note { text-align:center; color:var(--mut); padding:60px 20px; font-size:13.5px; }
.pdfbtn { display:inline-block; padding:11px 22px; border-radius:99px; background:var(--acc); color:#fff;
  text-decoration:none; font-size:13.5px; font-weight:480; }
.adm { display:grid; gap:18px; margin-top:22px; }
.adm .card { padding:22px 22px 20px; }
.adm h2 { font-size:15px; font-weight:600; margin-bottom:14px; }
.frow { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:12px; }
.frow.full { grid-template-columns:1fr; }
.fld label { margin-bottom:6px; }
.fld input[type=text], .fld input[type=email], .fld select { width:100%; padding:11px 12px; border-radius:10px;
  border:1px solid var(--line2); background:#fff; color:var(--ink); font-size:14px; font-family:inherit; }
/* Do NOT set outline:none here. This rule is (0,2,1) and beats the shared
   :where(...):focus-visible ring, which :where() deliberately scores at (0,1,0).
   The replacement halo was --brand-accent-soft: 1.08:1 on a white card, i.e. no
   indicator -- and on a native checkbox border-color does nothing at all, so ten
   controls on the access-control form were unmarked. Keep the border tint for
   the hover/typing affordance; let the shared ring do the focus work. */
.fld input:focus-visible, .fld select:focus-visible {
  border-color:var(--acc);
  outline:2px solid var(--brand-accent);
  outline-offset:2px;
  box-shadow:var(--focus-ring);
}
.fld input:focus:not(:focus-visible), .fld select:focus:not(:focus-visible) {
  border-color:var(--acc); outline:none; box-shadow:none;
}
.chk { display:flex; align-items:center; gap:9px; font-size:13.5px; color:var(--sec); padding-top:26px; }
.chk input { width:17px; height:17px; accent-color:var(--acc); }
.btn.inlin { width:auto; padding:11px 22px; margin-top:4px; }
.tbl { width:100%; border-collapse:collapse; font-size:13px; }
.tbl th { text-align:left; color:var(--mut); font-weight:470; font-size:11.5px; letter-spacing:.06em;
  text-transform:uppercase; padding:8px 10px; border-bottom:1px solid var(--line); }
.tbl td { padding:10px; border-bottom:1px solid var(--line); vertical-align:top; }
.tbl tr:last-child td { border-bottom:none; }
.pill { display:inline-block; padding:2px 9px; border-radius:99px; font-size:11px; background:var(--acc-soft); color:var(--acc); margin:1px 2px 1px 0; }
.pill.g { background:#eafbf1; color:#0d7a44; }
.pill.mut { background:#f1f3f5; color:var(--mut); }
.rvk { color:#a33f2f; background:none; border:1px solid #e8cfc9; border-radius:8px; padding:5px 12px;
  font-size:12px; cursor:pointer; width:auto; margin:0; font-family:inherit; }
.rvk:hover { background:#fdf3f1; }
.onb { margin-top:12px; background:#0f1720; color:#dfe7ee; border-radius:10px; padding:14px 16px;
  font:12px/1.6 ui-monospace, Menlo, monospace; white-space:pre-wrap; word-break:break-all; position:relative; }
.onb button { position:absolute; top:8px; right:8px; width:auto; margin:0; padding:5px 12px; font-size:11.5px;
  border-radius:7px; border:1px solid #3a4a5a; background:#1a2634; color:#dfe7ee; cursor:pointer; }
@media (max-width:560px) { .frow { grid-template-columns:1fr; } .chk { padding-top:0; } .tbl .hide-m { display:none; } }
.adminfab { position:fixed; right:18px; bottom:16px; width:38px; height:38px; border-radius:12px;
  display:grid; place-items:center; color:var(--soft); background:transparent; border:1px solid transparent;
  opacity:.55; transition:all .2s; z-index:30; }
.adminfab:hover { opacity:1; color:var(--acc); background:var(--card); border-color:var(--line); box-shadow:var(--shadow); }
.toast { position:fixed; left:50%; bottom:calc(24px + env(safe-area-inset-bottom)); transform:translateX(-50%) translateY(20px);
  background:var(--ink); color:#fff; font-size:13px; padding:11px 18px; border-radius:99px;
  opacity:0; pointer-events:none; transition:all .25s; z-index:50; box-shadow:var(--shadow-lift); max-width:88vw; }
.toast.show { opacity:1; transform:translateX(-50%) translateY(0); }
@media (max-width:560px) {
  .viewer { padding:0; }
  .vbox { width:100%; height:100dvh; border-radius:0; }
  .vhead { padding:12px 14px calc(12px); }
  .vhead button { width:40px; height:40px; }
  .vbody .txt { margin:10px; padding:18px 16px; font-size:14.5px; }
  .row { padding:12px 14px; }
  .row .meta.dt { display:none; }
  .tiles { grid-template-columns:1fr; }
  .gate { margin-top:6vh; }
  .top { padding:13px 16px; }
}


/* Ported from Atrium's globals.css. The portal had neither, so its fade and
   shimmer animations ran regardless of the OS setting, and only the browser
   default outline marked focus. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline:2px solid var(--brand-accent);
  outline-offset:2px;
  box-shadow:var(--focus-ring);
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration:0.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.001ms !important;
    scroll-behavior:auto !important;
  }
  .skel { animation:none !important; }
}

/* ---- Phase 3: entitlement made legible ------------------------------------ */

/* Scope chips. Same data the admin screen has always rendered as pills; the
   person it describes is finally shown it too. */
.chips { display:flex; flex-wrap:wrap; gap:6px; margin-top:12px; }
.tile .chip {
  display:inline-flex; align-items:center; gap:0;
  padding:3px 9px; border-radius:var(--radius-pill);
  background:var(--brand-accent-soft); color:var(--brand-ink-secondary);
  font-size:12px; font-weight:500; line-height:1.5;
  border:1px solid transparent;
}
.tile .chip-more { background:transparent; border-color:var(--brand-hairline); color:var(--brand-ink-muted-alt); }

/* Locked tiles used to be opacity:.45 + grayscale(1) with no explanation and no
   way forward -- a files-only advisor's screen was 75% dead grey. They now read
   at full contrast, say why, and offer to ask. Restraint, not exclusion. */
.tile.locked {
  opacity:1; filter:none; cursor:default;
  background:var(--brand-bg-alt);
  border-style:dashed;
}
.tile.locked .ic { background:var(--brand-hairline); color:var(--brand-ink-muted-alt); }
.tile.locked .badge {
  background:var(--brand-hairline); color:var(--brand-ink-secondary);
  font-weight:500;
}
.askaccess {
  margin-top:12px; padding:7px 14px; border-radius:var(--radius-input);
  border:1px solid var(--brand-line-strong); background:var(--brand-bg);
  color:var(--brand-ink); font:inherit; font-size:13px; font-weight:500;
  cursor:pointer; transition:background-color .12s var(--ease-brand), border-color .12s var(--ease-brand);
}
.askaccess:hover { background:var(--brand-accent-soft); border-color:var(--brand-accent); }
.askaccess:active { transform:scale(.99); }
.askaccess:disabled { cursor:default; opacity:.6; }
.askaccess.asked { border-color:var(--brand-green); color:var(--brand-green-text); background:var(--brand-bg); }

/* Surface switcher. Every route away from the portal was one-way; this puts each
   surface the viewer holds one click from everywhere, and makes Admin a normal
   labelled item rather than a 38px icon pinned over the last tile on a phone. */
.switch { display:flex; gap:2px; margin-left:18px; flex:1; }
.switch a {
  padding:6px 11px; border-radius:var(--radius-input);
  color:var(--brand-ink-secondary); font-size:13.5px; font-weight:500;
  text-decoration:none; white-space:nowrap;
  transition:background-color .12s var(--ease-brand), color .12s var(--ease-brand);
}
.switch a:hover { background:var(--brand-accent-soft); color:var(--brand-accent); }

/* The header identity chip carries initials + the full e-mail + Sign out. At
   360px the address alone is 163px and pushes the chip 146px past the viewport,
   so the whole page scrolls sideways. The initials disc already identifies the
   session; the address is confirmation, not navigation, and it is one tap away
   on the dashboard. Hide the text, keep the disc and the exit. */
@media (max-width:760px) {
  .top .chip > span:not(.dot) { display:none; }
  .top .chip { max-width:100%; }
  .top { flex-wrap:wrap; row-gap:6px; }
}

/* ==========================================================================
   Presentation pass — 2026-08-10

   The rules above remain as backwards-compatible foundations for invitation
   pages already generated by the server. This layer brings every current page
   onto the Atrium/Compendium component language without touching a gate or an
   entitlement decision.
   ========================================================================== */

/* Foundation --------------------------------------------------------------- */
:root {
  /* The Compendium's measured AA muted value. */
  --brand-ink-muted:#5c6572;
  --brand-ink-muted-alt:#5c6572;
  --mut:#5c6572;
  --soft:#5c6572;
}

html {
  background:var(--brand-bg-alt);
  overflow-x:hidden;
}
body {
  min-width:0;
  overflow-x:hidden;
}
a, button, input, select, textarea { font:inherit; }
button, select { cursor:pointer; }
button:disabled { cursor:not-allowed; }

.sr-only {
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  overflow:hidden !important;
  clip:rect(0 0 0 0) !important;
  clip-path:inset(50%) !important;
  white-space:nowrap !important;
}
.skip {
  position:fixed;
  top:8px;
  left:8px;
  z-index:100;
  transform:translateY(calc(-100% - 18px));
  border:1px solid var(--brand-accent);
  border-radius:var(--radius-input);
  background:var(--brand-bg);
  color:var(--brand-accent);
  padding:8px 12px;
  font-size:13px;
  font-weight:600;
  text-decoration:none;
  transition:transform .15s var(--ease-brand);
}
.skip:focus { transform:translateY(0); }

main {
  width:min(100%,1180px);
  max-width:none;
  padding:clamp(32px,5vw,64px) clamp(20px,4vw,48px) 80px;
}
footer {
  margin-top:auto;
  padding:24px 20px 28px;
  color:var(--brand-ink-muted);
  line-height:1.5;
}
h1, h2, h3 { line-height:1.22; }
h1 { font-size:clamp(24px,3vw,30px); }
.eyebrow {
  margin:0 0 7px;
  color:var(--brand-ink-muted);
  font-size:11px;
  font-weight:600;
  letter-spacing:.14em;
  line-height:1.4;
  text-transform:uppercase;
}
.page-head { max-width:70ch; }
.page-head h1 { margin:0; }
.page-head .lead,
.gate-intro .lead,
.gate-state .lead {
  margin:10px 0 0;
  color:var(--brand-ink-secondary);
  font-size:15px;
  line-height:1.7;
}
.card {
  border-color:var(--brand-hairline);
  box-shadow:var(--shadow-resting);
}
label,
.fld label,
.fld legend {
  color:var(--brand-ink-secondary);
  font-weight:600;
}
input[type=email],
.fld input[type=text],
.fld input[type=email],
.fld input[type=number],
.fld select {
  min-width:0;
  border-color:var(--brand-line-strong);
  background:var(--brand-bg);
  color:var(--brand-ink);
}
input::placeholder { color:var(--brand-ink-muted); opacity:1; }
input:focus,
select:focus,
textarea:focus {
  outline:2px solid var(--brand-accent);
  outline-offset:2px;
  border-color:var(--brand-accent);
  box-shadow:var(--focus-ring);
}
.btn {
  min-height:44px;
  border:1px solid var(--brand-accent);
  background:var(--brand-accent);
  color:#fff;
  font-weight:600;
  letter-spacing:0;
  text-decoration:none;
}
.btn:hover { filter:brightness(1.08); }
.state-ic {
  display:grid;
  width:48px;
  height:48px;
  place-items:center;
  border:1px solid #aebef5;
  border-radius:var(--radius-tile);
  background:var(--brand-accent-soft);
  color:var(--brand-accent);
}

/* Shell / surface switcher ------------------------------------------------- */
.top {
  min-width:0;
  padding:14px clamp(20px,3vw,40px);
  border-bottom-color:var(--brand-hairline);
  background:rgba(255,255,255,.96);
  backdrop-filter:blur(12px);
}
.wm {
  flex:none;
  gap:9px;
  min-width:0;
}
.wm img { width:auto; height:15px; }
.wm span { font-size:10px; letter-spacing:.24em; }
.switch {
  min-width:0;
  margin-left:16px;
  gap:4px;
}
.switch a {
  border:1px solid transparent;
  padding:6px 10px;
}
.switch a:hover {
  border-color:#aebef5;
  background:var(--brand-accent-soft);
}
.top .chip {
  flex:none;
  min-width:0;
  color:var(--brand-ink-muted);
}
.top .chip .dot { width:30px; height:30px; }
.top .chip a {
  border:0;
  color:var(--brand-ink-secondary);
  font-weight:500;
}
.top .chip a:hover { color:var(--brand-accent); text-decoration:underline; text-underline-offset:3px; }

/* Signed-out gate ---------------------------------------------------------- */
body:has(.gate) main {
  width:min(100%,1080px);
  display:grid;
  place-items:center;
  padding-top:clamp(48px,9vh,96px);
}
.gate {
  width:min(100%,920px);
  max-width:none;
  margin:0 auto;
}
.gate:has(.gate-intro .lead) {
  display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(340px,.82fr);
  align-items:center;
  gap:clamp(48px,8vw,96px);
}
.gate-intro { min-width:0; }
.gate .mark {
  justify-content:flex-start;
  margin:0 0 34px;
}
.gate > .mark { justify-content:center; }
.gate .markline { color:var(--brand-accent); }
.gate-intro h1 {
  max-width:12ch;
  margin:0;
  font-size:clamp(32px,5vw,48px);
  font-weight:600;
  letter-spacing:-.035em;
  line-height:1.08;
}
.gate-intro .lead {
  max-width:52ch;
  margin-top:18px;
  font-size:17px;
}
.gate-card {
  width:100%;
  padding:32px;
}
.gate-card form { display:grid; gap:12px; }
.gate-card label { margin:0; }
.gate-card input[type=email] {
  min-height:50px;
  padding:12px 14px;
}
.gate-card .btn { width:100%; margin-top:2px; padding:12px 16px; }
.gate-card .note {
  margin:17px 0 0;
  color:var(--brand-ink-muted);
  line-height:1.6;
}
.gate-card .note a {
  color:var(--brand-accent);
  font-weight:600;
  text-underline-offset:3px;
}
.gate-state {
  max-width:520px;
  margin:0 auto;
  text-align:left;
}
.gate-state .state-ic { margin-bottom:20px; }
.gate-state h1 { margin:0; font-size:25px; }
.gate-state .btn { display:inline-flex; width:auto; margin-top:22px; padding-inline:20px; }
.gate-state-alert .state-ic {
  border-color:#e5aaa7;
  background:#fff5f4;
  color:var(--brand-red-text);
}
/* Backwards-compatible gate markup (invitation pages and the live server until
   the next image deploy). */
.gate > .mark + .card:not(.gate-card) {
  max-width:480px;
  margin:0 auto;
}
.gate > .mark + .card:not(.gate-card) h1 { margin:0; }
.gate > .mark + .card:not(.gate-card) .btn { display:flex !important; align-items:center; justify-content:center; }

/* Dashboard --------------------------------------------------------------- */
.dashboard-head { margin-bottom:42px; }
.dashboard-head h1 { margin:0; }
.dashboard-head .lead { font-size:16px; }
.surface-section + .surface-section { margin-top:52px; }
.section-head {
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:20px;
  margin-bottom:16px;
}
.section-head h2 {
  margin:0;
  font-size:21px;
  font-weight:600;
  letter-spacing:-.015em;
}
.surface-count {
  flex:none;
  border:1px solid var(--brand-hairline);
  border-radius:var(--radius-pill);
  background:var(--brand-bg);
  color:var(--brand-ink-secondary);
  padding:4px 10px;
  font-size:12px;
  font-weight:600;
  font-variant-numeric:tabular-nums;
}
.tiles {
  margin:0;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px;
}
.tile {
  display:flex;
  min-width:0;
  min-height:270px;
  flex-direction:column;
  padding:22px 20px 20px;
  border-color:var(--brand-hairline);
  box-shadow:var(--shadow-resting);
}
.tile.granted {
  border-top:3px solid var(--brand-accent);
  padding-top:20px;
}
a.tile:hover {
  border-color:#9aa3ae;
  box-shadow:var(--shadow-raised);
  transform:translateY(-1px);
}
.tile-status {
  align-self:flex-start;
  margin-bottom:20px;
  color:var(--brand-green-text);
  font-size:11px;
  font-weight:600;
  letter-spacing:.08em;
  line-height:1.4;
  text-transform:uppercase;
}
.tile.locked .tile-status { color:var(--brand-ink-muted); }
.tile .ic {
  width:44px;
  height:44px;
  margin-bottom:18px;
  border:1px solid #cbd5ff;
}
.tile h3 { margin:0; font-size:17px; letter-spacing:-.01em; }
.tile p {
  margin:8px 0 0;
  color:var(--brand-ink-secondary);
  line-height:1.6;
}
.tile .go {
  top:20px;
  right:18px;
  color:var(--brand-accent);
}
.tile .chips { margin-top:auto; padding-top:18px; }
.tile .chip {
  border-color:var(--brand-hairline);
  background:var(--brand-bg-alt);
  color:var(--brand-ink-secondary);
  font-size:11.5px;
}
.tile.locked {
  min-height:218px;
  border-color:var(--brand-line);
  background:var(--brand-bg-alt);
  box-shadow:none;
}
.tile.locked .ic {
  border-color:var(--brand-hairline);
  background:var(--brand-bg);
  color:var(--brand-ink-muted);
}
.askaccess {
  align-self:flex-start;
  min-height:40px;
  margin-top:auto;
  padding:8px 13px;
  border-color:var(--brand-line-strong);
  font-weight:600;
}
.askaccess.asked {
  border-color:#72a991;
  background:#f3fbf7;
}
.tiles-granted.single {
  grid-template-columns:minmax(280px,520px);
}
.tiles-granted.single .tile {
  min-height:235px;
  padding-right:clamp(22px,8vw,72px);
}
.tiles-locked {
  grid-template-columns:repeat(3,minmax(0,1fr));
}

/* Files ------------------------------------------------------------------- */
.files-head { margin-bottom:34px; }
.files-layout {
  display:grid;
  grid-template-columns:minmax(0,1.45fr) minmax(320px,.8fr);
  align-items:start;
  gap:22px;
}
.files-browser { min-width:0; }
.browser-head {
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:18px;
  margin-bottom:12px;
}
.browser-head h2,
.preview-title h2 {
  margin:0;
  color:var(--brand-ink);
  font-size:18px;
  font-weight:600;
}
.download-policy {
  max-width:260px;
  margin:0;
  color:var(--brand-ink-muted);
  font-size:12px;
  line-height:1.45;
  text-align:right;
}
.crumbs {
  min-height:34px;
  margin:0 0 10px;
  gap:2px;
}
.crumbs a {
  min-height:32px;
  display:inline-flex;
  align-items:center;
  padding:4px 9px;
  border-color:transparent;
}
.crumbs a:last-child {
  border-color:var(--brand-hairline);
  background:var(--brand-bg);
}
.crumbs .sep { color:var(--brand-ink-muted); }
.panel {
  min-height:303px;
  border-color:var(--brand-hairline);
}
.row {
  min-width:0;
  min-height:60px;
  padding:9px 14px;
  gap:12px;
  border-bottom-color:var(--brand-hairline);
}
.row:hover { background:var(--brand-bg-alt); }
.row[aria-current="true"] { background:var(--brand-accent-soft); }
.row .fic {
  width:38px;
  height:38px;
  border:1px solid #cbd5ff;
  border-radius:var(--radius-input);
}
.row .fic.file {
  border-color:var(--brand-hairline);
  background:var(--brand-bg-alt);
}
.row .fic svg { width:18px; height:18px; }
.row .nm {
  display:flex;
  min-width:0;
  flex-direction:column;
  font-size:14px;
  font-weight:600;
}
.row .nm small {
  color:var(--brand-ink-muted);
  font-size:11.5px;
  font-weight:400;
  line-height:1.4;
}
.row .meta { color:var(--brand-ink-muted); }
.row .dl {
  width:38px;
  height:38px;
  border-color:var(--brand-line-strong);
}
.row .dl svg { width:17px; height:17px; }
.empty {
  display:grid;
  min-height:301px;
  place-items:center;
  padding:36px 22px;
  color:var(--brand-ink-secondary);
}
.empty-state { max-width:360px; text-align:center; }
.empty-state .state-ic { margin:0 auto 16px; }
.empty-state strong { display:block; color:var(--brand-ink); font-size:17px; }
.empty-state p { margin:6px 0 0; color:var(--brand-ink-secondary); line-height:1.6; }
.skel {
  height:auto;
  margin:0;
  border-radius:0;
  background:var(--brand-bg) !important;
  animation:none;
}
.skel-row {
  display:grid;
  min-height:60px;
  grid-template-columns:38px minmax(0,1fr) 70px;
  align-items:center;
  gap:12px;
  padding:9px 14px;
  border-bottom:1px solid var(--brand-hairline);
}
.skel-row:last-child { border-bottom:0; }
.skel-row span,
.skel-row i,
.skel-row b {
  display:block;
  height:12px;
  border-radius:var(--radius-pill);
  background:var(--brand-hairline);
  animation:skel-pulse 1.1s ease-in-out infinite alternate;
}
.skel-row span { width:38px; height:38px; border-radius:var(--radius-input); }
.skel-row i { width:min(70%,230px); }
.skel-row b { width:70px; justify-self:end; }
@keyframes skel-pulse { to { opacity:.48; } }
.drop {
  display:grid;
  grid-template-columns:44px minmax(0,1fr);
  align-items:center;
  gap:14px;
  margin-top:14px;
  padding:17px 18px;
  border-color:var(--brand-line-strong);
  text-align:left;
}
.drop.hot {
  border-color:var(--brand-accent);
  background:var(--brand-accent-soft);
}
.drop .dic {
  width:44px;
  height:44px;
  margin:0;
  border:1px solid #cbd5ff;
}
.drop-copy { display:flex; min-width:0; flex-direction:column; }
.drop-copy strong { color:var(--brand-ink); font-size:14px; font-weight:600; }
.drop-copy span { color:var(--brand-ink-secondary); font-size:12.5px; }
.drop label {
  margin:0;
  border:0;
  padding:0;
  color:var(--brand-accent);
  font-weight:600;
  text-decoration:underline;
  text-underline-offset:3px;
}
.drop label:hover { background:transparent; color:var(--brand-accent); }
.q { grid-column:1/-1; width:100%; margin:0; }
.qi { color:var(--brand-ink-secondary); }
.qi.err { color:var(--brand-red-text); }
.files-layout .viewer {
  position:sticky;
  inset:auto;
  top:78px;
  z-index:1;
  display:block;
  min-width:0;
  padding:0;
  background:transparent;
  backdrop-filter:none;
}
.vbox {
  width:100%;
  height:550px;
  border:1px solid var(--brand-hairline);
  border-radius:var(--radius-card);
  box-shadow:var(--shadow-resting);
  animation:none;
}
.vhead {
  min-height:70px;
  padding:12px 14px;
  border-bottom-color:var(--brand-hairline);
}
.preview-title { flex:1; min-width:0; }
.preview-title .eyebrow { margin-bottom:3px; }
.preview-title .t {
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.preview-actions { display:flex; flex:none; gap:7px; }
.vhead button {
  display:grid;
  width:38px;
  height:38px;
  place-items:center;
  border-color:var(--brand-line-strong);
}
.vhead button[hidden] { display:none; }
.vbody {
  position:relative;
  display:grid;
  min-height:0;
  place-items:stretch;
  background:var(--brand-bg-alt);
}
.vbody iframe { min-height:0; }
.vbody img {
  max-width:calc(100% - 28px);
  max-height:calc(100% - 28px);
  object-fit:contain;
  margin:auto;
}
.vbody .txt {
  width:calc(100% - 24px);
  max-width:none;
  margin:12px;
  padding:20px;
  overflow:auto;
  line-height:1.65;
}
.vbody .note,
.preview-empty {
  align-self:center;
  max-width:300px;
  margin:auto;
  padding:30px 20px;
  color:var(--brand-ink-secondary);
  text-align:center;
}
.preview-empty .state-ic { margin:0 auto 16px; }
.preview-empty strong { display:block; color:var(--brand-ink); font-size:17px; }
.preview-empty p { margin:6px 0 0; line-height:1.6; }
.preview-loading {
  display:grid;
  min-height:100%;
  align-content:center;
  gap:10px;
  padding:28px;
}
.preview-loading span {
  height:13px;
  border-radius:var(--radius-pill);
  background:var(--brand-hairline);
  animation:skel-pulse 1.1s ease-in-out infinite alternate;
}
.preview-loading span:nth-child(2) { width:88%; }
.preview-loading span:nth-child(3) { width:64%; }

/* Admin ------------------------------------------------------------------- */
.admin-head { margin-bottom:34px; }
.adm {
  grid-template-columns:minmax(0,1fr);
  gap:18px;
  margin-top:0;
}
.adm .card {
  min-width:0;
  padding:24px;
}
.admin-section { overflow:hidden; }
.card-head {
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:20px;
  margin-bottom:20px;
}
.adm .card-head h2 {
  margin:0;
  color:var(--brand-ink);
  font-size:19px;
}
.card-head > p {
  max-width:420px;
  margin:0;
  color:var(--brand-ink-muted);
  font-size:12.5px;
  line-height:1.5;
  text-align:right;
}
.frow {
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
  margin-bottom:14px;
}
.fld { min-width:0; }
.fld label,
.fld legend {
  margin:0 0 6px;
  font-size:11px;
  letter-spacing:.08em;
  line-height:1.45;
  text-transform:uppercase;
}
.fld label span { color:var(--brand-ink-muted); font-weight:500; }
.fld input[type=text],
.fld input[type=email],
.fld input[type=number],
.fld select {
  min-height:44px;
  padding:10px 12px;
  font-size:16px;
}
.entity-field {
  margin:0 0 14px;
  border:0;
  padding:0;
}
.entity-checks { display:flex; flex-wrap:wrap; gap:8px; }
.entity-checks .chk {
  min-height:38px;
  padding:7px 10px;
  border:1px solid var(--brand-line-strong);
  border-radius:var(--radius-input);
  background:var(--brand-bg);
}
.check-field {
  display:flex;
  align-items:center;
  padding-top:20px;
}
.chk {
  min-width:0;
  padding:0;
  color:var(--brand-ink-secondary);
}
.chk input {
  flex:none;
  width:18px;
  height:18px;
}
.chk label {
  margin:0;
  letter-spacing:0;
  line-height:1.4;
  text-transform:none;
}
.form-note {
  margin:0 0 14px;
  color:var(--brand-ink-muted);
  font-size:12.5px;
}
.btn.inlin { min-width:138px; margin:0; padding:10px 18px; }
.table-wrap {
  width:100%;
  min-width:0;
  overflow-x:auto;
  overscroll-behavior-inline:contain;
}
.tbl {
  min-width:700px;
  color:var(--brand-ink-secondary);
  table-layout:auto;
}
.tbl th {
  padding:9px 10px;
  color:var(--brand-ink-muted);
  border-bottom-color:var(--brand-line);
  font-size:10.5px;
  font-weight:600;
}
.tbl td {
  padding:12px 10px;
  border-bottom-color:var(--brand-hairline);
  overflow-wrap:anywhere;
}
.tbl td:first-child { color:var(--brand-ink); }
.tbl b { font-weight:600; }
.pill {
  min-height:24px;
  display:inline-flex;
  align-items:center;
  border:1px solid #cbd5ff;
  background:var(--brand-accent-soft);
  color:var(--brand-accent);
  font-weight:600;
  line-height:1.35;
}
.pill.g {
  border-color:#a9d7c5;
  background:#f0faf6;
  color:var(--brand-green-text);
}
.pill.mut {
  border-color:var(--brand-hairline);
  background:var(--brand-bg-alt);
  color:var(--brand-ink-muted);
}
.pill.warn {
  border-color:#dfc58e;
  background:#fff9ed;
  color:var(--brand-amber-text);
}
.rvk {
  min-height:34px;
  border-color:#bc8580;
  background:var(--brand-bg);
  color:var(--brand-red-text);
  font-weight:600;
}
.rvk:hover { background:#fff5f4; border-color:var(--brand-red-text); }
.rvk.secondary {
  border-color:var(--brand-line-strong);
  color:var(--brand-ink-secondary);
}
.rvk.secondary:hover { border-color:var(--brand-accent); background:var(--brand-accent-soft); color:var(--brand-accent); }
.onb { margin-top:16px; padding:44px 16px 16px; }
.onb button {
  min-height:32px;
  border-color:#8294a5;
}
.table-empty {
  padding:32px 16px !important;
  color:var(--brand-ink-secondary) !important;
  text-align:center;
}
.table-empty strong { display:block; color:var(--brand-ink); font-size:14px; }
.table-empty span { display:block; margin-top:3px; color:var(--brand-ink-muted); }
.dataroom-list { display:grid; gap:5px; }
.dataroom-item {
  border-left:2px solid var(--brand-accent);
  padding-left:8px;
  color:var(--brand-ink-secondary);
  font-size:12px;
}
.dataroom-item small { display:block; color:var(--brand-ink-muted); }
.request-person { display:flex; min-width:0; flex-direction:column; }
.request-person small { color:var(--brand-ink-muted); }

/* Notifications ----------------------------------------------------------- */
.toast {
  bottom:calc(20px + env(safe-area-inset-bottom));
  border:1px solid #4f5660;
  border-radius:var(--radius-input);
  background:var(--brand-ink);
  font-weight:500;
  text-align:center;
}

/* Responsive -------------------------------------------------------------- */
@media (max-width:1120px) {
  .tiles { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .tiles-locked { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .files-layout { grid-template-columns:minmax(0,1.25fr) minmax(300px,.8fr); }
}
@media (max-width:900px) {
  /* Was display:none -- see the note above .switch. Scroll it instead of
     deleting it: a narrow screen is where getting between areas matters most. */
  .switch {
    display:flex; order:3; width:100%; margin:4px 0 0;
    overflow-x:auto; scrollbar-width:none; gap:2px;
  }
  .switch::-webkit-scrollbar { display:none; }
  .switch a { flex:none; }
  .viewer-email { display:none; }
  .tiles-locked { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .files-layout { grid-template-columns:minmax(0,1fr); }
  .viewer {
    position:fixed;
    inset:0;
    z-index:60;
    display:none;
    place-items:center;
    padding:24px;
    background:rgba(29,33,38,.45);
    backdrop-filter:blur(6px);
  }
  .viewer.open { display:grid; }
  .vbox { width:min(760px,100%); height:min(82dvh,720px); }
}
@media (max-width:760px) {
  main { padding:30px 20px 64px; }
  .top {
    flex-wrap:nowrap;
    padding:12px 16px;
  }
  .top .chip { margin-left:auto; }
  .top .chip > span:not(.dot) { display:none; }
  .gate:has(.gate-intro .lead) {
    grid-template-columns:minmax(0,1fr);
    gap:30px;
  }
  .gate .mark { margin-bottom:24px; }
  .gate-intro h1 { max-width:15ch; font-size:34px; }
  .gate-intro .lead { font-size:15px; }
  .gate-card { padding:24px; }
  .dashboard-head { margin-bottom:32px; }
  .surface-section + .surface-section { margin-top:40px; }
  .tiles,
  .tiles-locked,
  .tiles-granted.single { grid-template-columns:minmax(0,1fr); }
  .tile,
  .tile.locked { min-height:0; }
  .tiles-granted.single .tile { padding-right:20px; }
  .browser-head,
  .card-head {
    align-items:flex-start;
    flex-direction:column;
    gap:7px;
  }
  .download-policy,
  .card-head > p { max-width:none; text-align:left; }
  .frow { grid-template-columns:minmax(0,1fr); }
  .check-field { padding-top:0; }
  .viewer { padding:0; }
  .vbox { width:100%; height:100dvh; max-height:none; border:0; border-radius:0; }
  .vhead { padding:12px 14px; }
  .adm .card { padding:20px; }
  .tbl { min-width:0; }
  .table-wrap { overflow:visible; }
  .tbl thead {
    position:absolute;
    width:1px;
    height:1px;
    overflow:hidden;
    clip:rect(0 0 0 0);
    clip-path:inset(50%);
  }
  .tbl,
  .tbl tbody { display:block; width:100%; }
  .tbl tr {
    display:grid;
    gap:9px;
    padding:15px 0;
    border-bottom:1px solid var(--brand-hairline);
  }
  .tbl tr:first-child { padding-top:0; }
  .tbl tr:last-child { padding-bottom:0; border-bottom:0; }
  .tbl td {
    display:grid;
    grid-template-columns:96px minmax(0,1fr);
    align-items:start;
    gap:10px;
    width:100%;
    padding:0;
    border:0;
    text-align:left !important;
    white-space:normal !important;
  }
  .tbl td::before {
    content:attr(data-label);
    color:var(--brand-ink-muted);
    font-size:10px;
    font-weight:600;
    letter-spacing:.08em;
    line-height:1.5;
    text-transform:uppercase;
  }
  .tbl td[data-label=""]::before { display:none; }
  .tbl td[data-label=""] { grid-template-columns:minmax(0,1fr); }
  .tbl td.actions { padding-top:3px; }
  .tbl .hide-m { display:grid; }
}
@media (max-width:420px) {
  .wm img { height:13px; }
  .wm .wsep { margin:0 1px; }
  .wm span { font-size:9px; letter-spacing:.18em; }
  .top .chip { gap:7px; }
  .top .chip .dot { width:28px; height:28px; }
  .top .chip a { font-size:12px; }
  main { padding-inline:16px; }
  body:has(.gate) main { padding-top:36px; }
  .gate-intro h1 { font-size:31px; }
  .gate-card { padding:22px 20px; }
  .section-head { align-items:flex-start; }
  .tile { padding:20px 18px; }
  .drop { grid-template-columns:40px minmax(0,1fr); padding:15px; }
  .drop .dic { width:40px; height:40px; }
  .adm .card { padding:18px 16px; }
  .entity-checks { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
  .entity-checks .chk { width:100%; }
  .tbl td { grid-template-columns:82px minmax(0,1fr); }
}

@media (prefers-reduced-motion:reduce) {
  .skel-row span,
  .skel-row i,
  .skel-row b,
  .preview-loading span { animation:none !important; }
}


/* ---- Audit repairs (2026-08-11) ------------------------------------------- */

/* At <=760px .tbl td becomes a two-column grid of [label, value]. Cells holding
   several sibling .pill elements therefore spilled pills 2, 4, 6... into the
   LABEL column: "aos · manager" rendered as if it were a field name and "Admin"
   as a row heading. The primary admin view was unreadable on a phone. Wrap the
   values so each cell contributes exactly one grid item. */
@media (max-width:760px) {
  .tbl td > .pill:first-of-type { margin-left:0; }
  .tbl td { align-items:start; }
  .tbl td .pillwrap { display:flex; flex-wrap:wrap; gap:4px; min-width:0; }
}

/* The four admin tables carry min-width:700px, but the card interior drops below
   that at ~820px while the stacking rule only fired at 760px. In that 60px band
   they clipped silently -- and "Revoke all" was what sat in the clipped region.
   Stack earlier than the clip, not after it. */
@media (max-width:840px) {
  .table-wrap { overflow-x:auto; }
}

/* The reason a tile is locked, under the description of what it is. Quieter than
   the summary: the viewer needs to know WHAT the thing is before why they cannot
   reach it. */
.tile.locked .lockedwhy {
  margin-top:8px; padding-top:8px;
  border-top:1px solid var(--brand-hairline);
  font-size:13px; color:var(--brand-ink-muted-alt);
}

/* Minimum target size (WCAG 2.2 2.5.8). Measured at 360px: two topbar links and
   the entity checkboxes came in under 24x24, which on a phone means the control
   is smaller than the fingertip aiming at it. Checkboxes get the size directly;
   the links get padding rather than a width, so the text keeps its position and
   only the hit area grows. */
@media (max-width: 640px) {
  .topbar a,
  .switch a,
  .admin-section a,
  a.wm,
  .chip a {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding-block: 4px;
  }
  .chk input[type="checkbox"],
  .admin-section input[type="checkbox"],
  input[type="checkbox"],
  input[type="radio"] {
    width: 24px;
    height: 24px;
  }
  .chk {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 32px;
  }
}

/* Access-trail pager. Two controls and a range, so an administrator can see how
   far back they are without a page count the tail read cannot cheaply produce. */
.pager {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 12px;
  font-size: 12.5px;
  color: var(--mut);
}
.pager button[disabled] { opacity: .5; cursor: not-allowed; }
/* A row that needs attention, not an error: the record is intact, it is waiting
   on a decision. */
.row-warn td { background: var(--warn-soft, #fff8ed); }