/* DCIN: the one stylesheet for every page.

   Two themes, light and dark, defined as colour tokens. The page follows the system theme
   until the viewer picks one with the top-bar toggle; the choice is stored in localStorage
   and applied as <html data-theme="light|dark"> by the inline script in each page's <head>
   (before first paint) and by common.js:bindThemeButton.

   Contents
     1. Tokens and themes        8. Composer
     2. Fonts and base           9. Person page
     3. Forms and buttons       10. Information feed and proof
     4. Badges, chips and ids   11. Photo search
     5. Top bar and menus       12. Review and access requests
     6. Page frame and states   13. Lightbox
     7. People directory,       14. Admin
        avatars, combobox,      15. Sign in
        dialogs and toasts      16. Dialog fixes
                                17. Wide screens: side rail */


/* =========================================================================================
   1. Tokens and themes
   ========================================================================================= */

:root {
  color-scheme: light;

  /* surfaces and text */
  --bg: #f4f5f7;
  --surface: #ffffff;
  --surface-2: #f7f8fa;
  --hover: #eef0f3;
  --ink: #101418;
  --ink-2: #3b4350;
  --muted: #6b7380;
  --line: #e4e7ec;
  --line-strong: #cfd4dc;

  /* accent and states: each has a strong colour, a soft fill and a border */
  --accent: #2563eb;  --accent-hover: #1d4ed8;  --accent-ink: #ffffff;
  --accent-soft: #eaf1ff;  --accent-line: #bfd3fe;
  --ok: #15803d;    --ok-soft: #eaf7ef;    --ok-line: #a7e0bb;
  --bad: #c42f27;   --bad-soft: #fdefee;   --bad-line: #f4c2be;
  --warn: #9a5606;  --warn-soft: #fff6e3;  --warn-line: #f5d48c;
  --new: #7c3aed;   --new-soft: #f4effe;   --new-line: #dacbfb;
  --tag: #1e4fc2;   --tag-soft: #ebf1fd;

  /* clearance levels 0-5 */
  --l0: #6b7380; --l1: #0e7490; --l2: #2563eb; --l3: #b45309; --l4: #c42f27; --l5: #9333ea;

  /* depth */
  --shadow: 0 1px 2px rgba(16, 20, 24, .05);
  --shadow-md: 0 4px 14px rgba(16, 20, 24, .08), 0 1px 3px rgba(16, 20, 24, .05);
  --shadow-lg: 0 18px 48px rgba(16, 20, 24, .18), 0 2px 6px rgba(16, 20, 24, .06);
  --btn-hi: inset 0 1px 0 rgba(255, 255, 255, .16);
  --topbar-bg: rgba(255, 255, 255, .82);
  --rail-bg: #ffffff;
  --glow: rgba(37, 99, 235, .08);
  --backdrop: rgba(16, 20, 24, .45);
  /* shape, type and motion (the same in both themes) */
  --radius: 10px;
  --radius-sm: 7px;
  --radius-xs: 6px;
  --pill: 999px;
  --ring: 0 0 0 4px var(--accent-soft);
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --fast: .12s ease;
  --topbar-h: 52px;
  --gutter: 14px;
  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs-md: 14px;
  --fs-lg: 15px;
}

/* Dark tokens, used when the viewer picked dark, or picked nothing and the system is dark.
   The two blocks must stay identical. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0b0d10;
  --surface: #121418;
  --surface-2: #171a1f;
  --hover: #1e2228;
  --ink: #e8eaed;
  --ink-2: #c0c5cc;
  --muted: #8b929c;
  --line: #24282f;
  --line-strong: #343a43;
  --accent: #5b8cff;  --accent-hover: #7aa2ff;  --accent-ink: #0b0d10;
  --accent-soft: #142142;  --accent-line: #263f7a;
  --ok: #5fd08b;    --ok-soft: #11261a;    --ok-line: #215238;
  --bad: #ff7d74;   --bad-soft: #2c1514;   --bad-line: #6a2925;
  --warn: #f2b654;  --warn-soft: #2a200e;  --warn-line: #5b4514;
  --new: #bfa2ff;   --new-soft: #231b3d;   --new-line: #46367c;
  --tag: #9dbbff;   --tag-soft: #16213d;
  --l0: #8b929c; --l1: #4cc3d9; --l2: #5b8cff; --l3: #f2b654; --l4: #ff7d74; --l5: #c9a7ff;
  --shadow: inset 0 1px 0 rgba(255, 255, 255, .02);
  --shadow-md: 0 6px 18px rgba(0, 0, 0, .4);
  --shadow-lg: 0 20px 56px rgba(0, 0, 0, .6);
  --btn-hi: inset 0 1px 0 rgba(255, 255, 255, .12);
  --topbar-bg: rgba(14, 16, 20, .82);
  --rail-bg: #0e1013;
  --glow: rgba(91, 140, 255, .07);
  --backdrop: rgba(0, 0, 0, .6);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0b0d10;
    --surface: #121418;
    --surface-2: #171a1f;
    --hover: #1e2228;
    --ink: #e8eaed;
    --ink-2: #c0c5cc;
    --muted: #8b929c;
    --line: #24282f;
    --line-strong: #343a43;
    --accent: #5b8cff;  --accent-hover: #7aa2ff;  --accent-ink: #0b0d10;
    --accent-soft: #142142;  --accent-line: #263f7a;
    --ok: #5fd08b;    --ok-soft: #11261a;    --ok-line: #215238;
    --bad: #ff7d74;   --bad-soft: #2c1514;   --bad-line: #6a2925;
    --warn: #f2b654;  --warn-soft: #2a200e;  --warn-line: #5b4514;
    --new: #bfa2ff;   --new-soft: #231b3d;   --new-line: #46367c;
    --tag: #9dbbff;   --tag-soft: #16213d;
    --l0: #8b929c; --l1: #4cc3d9; --l2: #5b8cff; --l3: #f2b654; --l4: #ff7d74; --l5: #c9a7ff;
    --shadow: inset 0 1px 0 rgba(255, 255, 255, .02);
    --shadow-md: 0 6px 18px rgba(0, 0, 0, .4);
    --shadow-lg: 0 20px 56px rgba(0, 0, 0, .6);
    --btn-hi: inset 0 1px 0 rgba(255, 255, 255, .12);
    --topbar-bg: rgba(14, 16, 20, .82);
    --rail-bg: #0e1013;
    --glow: rgba(91, 140, 255, .07);
    --backdrop: rgba(0, 0, 0, .6);
  }
}


/* =========================================================================================
   2. Fonts and base
   ========================================================================================= */

/* Thai: a self-hosted Noto Sans Thai (OFL, fonts/OFL.txt) used only for Thai characters
   (unicode-range), so Latin text keeps the system font and the file is fetched only on
   pages that show Thai. Self-hosted because the CSP allows fonts from this origin only.
   Installed Thai system fonts follow as fallbacks. */
@font-face {
  font-family: "DCIN Thai";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(fonts/noto-sans-thai.woff2) format("woff2");
  unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC;
}
:root {
  --font: "DCIN Thai", system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans Thai",
    "Leelawadee UI", Thonburi, Tahoma, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bg); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  font: 14px/1.45 var(--font);
  color: var(--ink);
  background: var(--bg) radial-gradient(1100px 420px at 50% -180px, var(--glow), transparent 70%) no-repeat;
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--accent-soft); color: var(--ink); }
[hidden] { display: none !important; }
body:not(.is-admin) .admin-only { display: none !important; }

h1, h2, h3 { margin: 0; line-height: 1.3; }
h1 { font-size: 25px; font-weight: 700; letter-spacing: -.022em; }
h2 { font-size: 17px; font-weight: 650; letter-spacing: -.01em; }
h3 { font-size: 14px; font-weight: 600; }
p { margin: 0; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.muted, .meta { color: var(--muted); }
.meta, .small { font-size: 13px; }
.spacer { flex: 1; }
.unnamed { color: var(--muted); font-style: italic; font-weight: 500; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
kbd {
  padding: 1px 5px;
  font: 11px var(--mono);
  color: var(--muted);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-bottom-width: 2px;
  border-radius: 4px;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0s !important; animation-duration: 0s !important; }
  .person-card:hover { transform: none; }
}


/* =========================================================================================
   3. Forms and buttons
   ========================================================================================= */

input[type=text], input[type=search], input[type=password], input:not([type]), select, textarea {
  width: 100%;
  min-width: 0;
  padding: 6px 10px;
  font: inherit;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  transition: border-color var(--fast), box-shadow var(--fast), background var(--fast);
}
input:hover:not(:focus), select:hover:not(:focus), textarea:hover:not(:focus) { border-color: var(--muted); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: var(--ring); }
input::placeholder, textarea::placeholder { color: var(--muted); opacity: .85; }
select { width: auto; padding-right: 28px; cursor: pointer; }
textarea { min-height: 80px; line-height: 1.5; resize: vertical; }

label.field-label, .field-label { display: block; margin: 0 0 5px; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.hint { margin-top: 5px; font-size: 13px; color: var(--muted); }
.error-text { font-size: 13px; color: var(--bad); }
.error-text:empty { display: none; }

.check { display: flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; }
.check input { width: 16px; height: 16px; margin: 0; accent-color: var(--accent); }

/* buttons: .btn, plus .primary / .danger (.solid) / .subtle / .link, and .sm */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 5px 12px;
  font: inherit;
  font-size: 13.5px;
  font-weight: 550;
  line-height: 20px;
  white-space: nowrap;
  text-decoration: none;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  cursor: pointer;
  transition: background var(--fast), border-color var(--fast), box-shadow var(--fast), transform .06s;
}
.btn:hover { background: var(--hover); text-decoration: none; }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { opacity: .55; cursor: default; }
.btn.sm { padding: 2px 9px; font-size: 13px; line-height: 18px; }

.btn.primary {
  color: var(--accent-ink);
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: var(--btn-hi), 0 1px 2px rgba(16, 24, 40, .12);
}
.btn.primary:hover:not(:disabled) { background: var(--accent-hover); border-color: var(--accent-hover); }

.btn.danger { color: var(--bad); }
.btn.danger:hover { background: var(--bad-soft); border-color: var(--bad-line); }
.btn.danger.solid { color: #fff; background: var(--bad); border-color: var(--bad); }

.btn.subtle { color: var(--ink-2); background: transparent; border-color: transparent; box-shadow: none; }
.btn.subtle:hover { background: var(--hover); }

.btn.link { padding: 0; font-weight: 500; color: var(--accent); background: none; border: 0; box-shadow: none; }
.btn.link:hover { background: none; text-decoration: underline; }
.btn.link.danger { color: var(--bad); }

.icon-btn {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  font-size: 16px;
  line-height: 1;
  color: var(--muted);
  background: transparent;
  border: 0;
  border-radius: var(--radius-xs);
  cursor: pointer;
  transition: background var(--fast), color var(--fast);
}
.icon-btn:hover { color: var(--ink); background: var(--hover); }
.icon-btn.danger:hover { color: var(--bad); background: var(--bad-soft); }

.btn-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }

/* segmented control: radio inputs inside labels */
.seg {
  display: inline-flex;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
}
.seg label {
  position: relative;
  padding: 5px 12px;
  font-size: 13.5px;
  font-weight: 550;
  border-left: 1px solid var(--line-strong);
  cursor: pointer;
}
.seg label:first-child { border-left: 0; }
.seg label:hover { background: var(--hover); }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg label:has(input:checked) { color: var(--accent-ink); background: var(--accent); }
.seg label:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: -3px; }


/* =========================================================================================
   4. Badges, chips and ids
   ========================================================================================= */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0 8px;
  font-size: 12px;
  font-weight: 600;
  line-height: 18px;
  white-space: nowrap;
  vertical-align: middle;
  color: var(--muted);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--pill);
}
/* tones: confirmed and approved are ok; refuted, rejected, hidden, denied and revoked are bad;
   disputed, drafts and access grants are warnings; sources and new people are "new" */
.badge.v-confirmed, .badge.st-approved {
  color: var(--ok); background: var(--ok-soft); border-color: var(--ok-line);
}
.badge.v-refuted, .badge.rejected, .badge.hidden-person, .badge.st-denied, .badge.st-revoked {
  color: var(--bad); background: var(--bad-soft); border-color: var(--bad-line);
}
.badge.v-disputed, .badge.draft, .badge.access {
  color: var(--warn); background: var(--warn-soft); border-color: var(--warn-line);
}
.badge.source, .badge.new {
  color: var(--new); background: var(--new-soft); border-color: var(--new-line);
}
.badge.st-pending {
  color: var(--accent); background: var(--accent-soft); border-color: var(--accent-line);
}
.badge.v-unverified { color: var(--muted); background: var(--surface-2); }

/* clearance badge: outlined in the level's colour */
.clr { background: transparent; border-color: currentColor; }
.clr-0 { color: var(--l0); }
.clr-1 { color: var(--l1); }
.clr-2 { color: var(--l2); }
.clr-3 { color: var(--l3); }
.clr-4 { color: var(--l4); }
.clr-5 { color: var(--l5); }

.tag {
  display: inline-flex;
  align-items: center;
  padding: 0 8px;
  font-size: 12px;
  font-weight: 500;
  line-height: 20px;
  white-space: nowrap;
  color: var(--tag);
  background: var(--tag-soft);
  border: 0;
  border-radius: var(--pill);
}
button.tag { font-family: inherit; cursor: pointer; }
button.tag:hover { filter: brightness(.95); }
.tags { display: flex; flex-wrap: wrap; gap: 4px; }

/* hidden people, and people seen through an access grant */
.restricted { color: var(--bad); }
.granted { color: var(--warn); }
.pid {
  padding: 0 4px;
  font: 500 12px/1.4 var(--mono);
  overflow-wrap: anywhere;
  word-break: break-all;
  color: var(--bad);
  background: var(--bad-soft);
  border-radius: 4px;
}
.pid-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.pid-row .pid { padding: 2px 6px; font-size: 13px; }

/* weight of a proof vote */
.weight {
  padding: 0 8px;
  font-size: 12px;
  font-weight: 600;
  line-height: 18px;
  color: var(--muted);
  background: var(--surface-2);
  border-radius: var(--pill);
}
.weight.on { color: var(--ok); background: var(--ok-soft); }

/* filter chips (people page) */
.filter-chip {
  padding: 4px 12px;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  color: var(--ink-2);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--pill);
  cursor: pointer;
  transition: background var(--fast), border-color var(--fast), color var(--fast);
}
.filter-chip:hover { background: var(--hover); }
.filter-chip[aria-pressed=true] { color: var(--accent-ink); background: var(--accent); border-color: var(--accent); }


/* =========================================================================================
   5. Top bar and menus
   ========================================================================================= */

.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: var(--topbar-h);
  padding: 7px 16px;
  background: var(--topbar-bg);
  border-bottom: 1px solid var(--line);
  -webkit-backdrop-filter: saturate(1.6) blur(14px);
  backdrop-filter: saturate(1.6) blur(14px);
}

/* the wordmark, with a ring-in-a-tile logo drawn in CSS */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .16em;
  color: var(--ink);
}
.brand:hover { text-decoration: none; }
.brand::before {
  content: "";
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 7px;
  background:
    radial-gradient(circle, transparent 3.5px, var(--accent-ink) 4px, var(--accent-ink) 5.5px, transparent 6px),
    linear-gradient(135deg, var(--accent), var(--new));
  box-shadow: var(--btn-hi), 0 2px 8px var(--glow);
}

/* main navigation, as a segmented pill */
.nav {
  display: flex;
  gap: 2px;
  padding: 3px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 11px;
}
.nav a {
  position: relative;
  padding: 3px 11px;
  font-size: 13.5px;
  font-weight: 550;
  white-space: nowrap;
  color: var(--muted);
  border-radius: 8px;
  transition: color var(--fast), background var(--fast);
}
.nav a:hover { color: var(--ink); text-decoration: none; }
.nav a[aria-current=page] {
  color: var(--ink);
  background: var(--surface);
  box-shadow: 0 1px 2px rgba(16, 24, 40, .08), 0 0 0 1px var(--line);
}
.nav .dot { position: absolute; top: 4px; right: 4px; width: 7px; height: 7px; background: var(--bad); border-radius: 50%; }
/* nav icons and the rail's fold button belong to the side rail (section 17) */
.nav-icon, .rail-btn { display: none; }

#quick-add { margin-left: auto; }

/* theme toggle: shows the moon in light mode, the sun in dark mode */
.theme-btn {
  flex: none;
  width: 30px;
  height: 30px;
  color: var(--ink-2);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 50%;
}
.theme-btn:hover { color: var(--ink); background: var(--hover); }
.theme-btn svg { width: 16px; height: 16px; }
.theme-btn .sun { display: none; }
:root[data-theme="dark"] .theme-btn .sun { display: block; }
:root[data-theme="dark"] .theme-btn .moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-btn .sun { display: block; }
  :root:not([data-theme="light"]) .theme-btn .moon { display: none; }
}

/* account button and menu */
.account { position: relative; }
.avatar-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 0;
  font: inherit;
  color: var(--ink);
  background: none;
  border: 0;
  border-radius: var(--pill);
  cursor: pointer;
}
.avatar-initial {
  flex: none;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  font-weight: 700;
  color: var(--accent-ink);
  background: linear-gradient(135deg, var(--accent), var(--new));
  border-radius: 50%;
  box-shadow: var(--btn-hi), 0 0 0 2px var(--surface), 0 0 0 3px var(--line-strong);
  transition: box-shadow var(--fast);
}
.avatar-btn:hover .avatar-initial { box-shadow: var(--btn-hi), 0 0 0 2px var(--surface), 0 0 0 3px var(--accent); }
.account-name { display: none; }
.menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 40;
  min-width: 240px;
  padding: 6px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
}
.menu-head { margin-bottom: 6px; padding: 8px 10px 10px; border-bottom: 1px solid var(--line); }
.menu-head strong { display: block; }
.menu button, .menu a {
  display: block;
  width: 100%;
  padding: 7px 10px;
  font: inherit;
  font-size: 14px;
  text-align: left;
  color: var(--ink);
  background: none;
  border: 0;
  border-radius: var(--radius-xs);
  cursor: pointer;
}
.menu button:hover, .menu a:hover { background: var(--hover); text-decoration: none; }

@media (max-width: 820px) {
  .topbar { flex-wrap: wrap; gap: 6px 8px; padding: 6px 10px; }
  .nav { order: 4; flex-basis: 100%; overflow-x: auto; }
  .topbar .quick-add-label { display: none; }
  #quick-add { margin-left: auto; padding: 5px 10px; }
}


/* =========================================================================================
   6. Page frame and states
   ========================================================================================= */

.page { min-height: calc(100vh - var(--topbar-h)); margin: 0; padding: var(--gutter) var(--gutter) 24px; font-size: var(--fs-lg); }
.page-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px 16px;
  margin-bottom: 14px;
}
.page-head .sub { max-width: 90ch; margin-top: 2px; color: var(--muted); }

/* People search: one field, with camera and photo search as buttons at its end */
.people-search {
  position: relative;
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 14px;
  padding: 4px 4px 4px 14px;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--pill);
  box-shadow: 0 1px 2px rgba(16, 24, 40, .05);
  transition: border-color var(--fast), box-shadow var(--fast);
}
.people-search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.people-search svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ps-glass { flex: none; width: 18px; height: 18px; color: var(--muted); }
.people-search input {
  flex: 1;
  min-width: 0;
  padding: 8px 6px;
  font-size: var(--fs-lg);
  background: none;
  border: 0;
  box-shadow: none;
}
.people-search input:focus { outline: none; box-shadow: none; }
.people-search kbd { pointer-events: none; }
.people-search input:focus ~ kbd,
.people-search input:not(:placeholder-shown) ~ kbd { display: none; }
.ps-sep { flex: none; width: 1px; height: 22px; margin: 0 4px; background: var(--line-strong); }
.ps-btn {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 12px;
  font: inherit;
  font-size: 13.5px;
  font-weight: 550;
  white-space: nowrap;
  color: var(--ink-2);
  background: none;
  border: 0;
  border-radius: var(--pill);
  cursor: pointer;
  transition: color var(--fast), background var(--fast);
}
.ps-btn svg { flex: none; width: 19px; height: 19px; }
.ps-btn:hover { color: var(--accent); background: var(--accent-soft); }
.ps-btn[aria-pressed=true] { color: var(--accent-ink); background: var(--accent); }
.ps-btn[aria-pressed=true]:hover { color: var(--accent-ink); filter: brightness(1.08); }
@media (hover: none) { .people-search kbd { display: none; } }
@media (max-width: 720px) {
  .people-search kbd { display: none; }
  .ps-label { display: none; }
  .ps-btn { width: 38px; padding: 0; justify-content: center; }
}

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.pad { padding: 12px 14px; }

.section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
  font-size: 11px;
  font-weight: 650;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--muted);
}

.empty-state {
  padding: 28px 16px;
  text-align: center;
  color: var(--muted);
  background: var(--surface);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
}
.empty-state strong { display: block; margin-bottom: 4px; font-size: 16px; color: var(--ink); }
.empty-state .btn-row { justify-content: center; margin-top: 14px; }
.quiet-empty {
  margin: 0;
  padding: 10px 12px;
  font-size: 13.5px;
  color: var(--muted);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
}

.callout {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  margin-bottom: 12px;
  padding: 8px 12px;
  font-size: 13.5px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.callout.warn { color: var(--ink); background: var(--warn-soft); border-color: var(--warn-line); }
.callout.info { background: var(--accent-soft); border-color: var(--accent-line); }
.callout.bad  { background: var(--bad-soft); border-color: var(--bad-line); }
.callout.ok   { background: var(--ok-soft); border-color: var(--ok-line); }

.loading { padding: 12px 0; color: var(--muted); }
.spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  vertical-align: -2px;
  border: 2px solid var(--line-strong);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

@media (max-width: 640px) {
  :root { --gutter: 8px; }
  h1 { font-size: 19px; }
}


/* =========================================================================================
   7. People directory, avatars, combobox, dialogs and toasts
   ========================================================================================= */

/* ---- filters and results */
.filter-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 10px; }
.filter-bar select { padding: 4px 26px 4px 10px; font-size: 13px; border-radius: var(--pill); }
.match-toggle { display: inline-flex; gap: 4px; margin-left: 8px; padding-left: 12px; border-left: 1px solid var(--line); }
.results-note { display: flex; align-items: center; gap: 10px; margin: -2px 0 10px; font-size: 13.5px; color: var(--muted); }

/* ---- person cards */
.people-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));
  gap: 10px;
}
.people-grid > .empty-state, .people-grid > .loading { grid-column: 1 / -1; }
.person-card {
  position: relative;
  display: flex;
  gap: 12px;
  padding: 10px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.person-card:hover { border-color: var(--accent-line); box-shadow: var(--shadow-md); transform: translateY(-1px); }
.person-card .stretched { font-weight: 600; color: var(--ink); }
.person-card .stretched:hover { text-decoration: none; }
.person-card .stretched::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius); }  /* whole card is the link */
.person-card .card-main { flex: 1; min-width: 0; display: grid; align-content: start; gap: 3px; }
.person-card .card-name { display: block; font-size: 17px; overflow-wrap: anywhere; }
.person-card .aka { overflow: hidden; font-size: 13px; color: var(--muted); white-space: nowrap; text-overflow: ellipsis; }
.person-card .card-status { font-size: 13px; color: var(--muted); }
.person-card .tags, .person-card .card-add { position: relative; z-index: 1; }  /* above the stretched link */
.person-card .card-add {
  flex: none;
  align-self: flex-start;
  width: 26px;
  height: 26px;
  font-size: 15px;
  color: var(--accent);
  border: 1px solid var(--line-strong);
}
.person-card .card-add:hover { color: var(--accent); background: var(--accent-soft); border-color: var(--accent-line); }
.person-card .avatar { width: 120px; height: 120px; font-size: 42px; border-radius: 10px; }
.person-card .avatar.locked { font-size: 28px; }
.person-card mark { color: inherit; background: none; font-weight: 700; }

@media (max-width: 640px) {
  .people-grid { grid-template-columns: 1fr; gap: 8px; }
  .person-card { gap: 10px; padding: 8px; }
  .person-card .avatar { width: 80px; height: 80px; font-size: 28px; }
  .person-card .card-add { width: 36px; height: 36px; font-size: 18px; }
  .filter-bar {
    flex-wrap: nowrap;
    overflow-x: auto;
    margin-inline: calc(-1 * var(--gutter));
    padding: 0 var(--gutter) 4px;
    scrollbar-width: none;
  }
  .filter-bar::-webkit-scrollbar { display: none; }
  .match-toggle { flex: none; }
  .results-note { flex-wrap: wrap; }
}
@media (max-width: 360px) {
  .person-card .avatar { width: 64px; height: 64px; font-size: 24px; }
}

/* ---- avatars: a face crop, or an initial; .locked for hidden people */
.avatar {
  flex: none;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  object-fit: cover;
  font-size: 20px;
  font-weight: 650;
  color: var(--muted);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 10px;
}
.avatar.lg { width: 88px; height: 88px; font-size: 32px; border-radius: 14px; }
.avatar.sm { width: 28px; height: 28px; font-size: 12px; border-radius: var(--radius-xs); }
.avatar.locked { font-size: 18px; color: var(--bad); background: var(--bad-soft); border-color: var(--bad-line); }

/* ---- combobox (person picker, search, tags) */
.combo { position: relative; }
.combo-list {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 50;
  max-height: 320px;
  overflow: auto;
  margin: 0;
  padding: 4px;
  list-style: none;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
}
.combo-opt {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  font-size: 14px;
  border-radius: var(--radius-xs);
  cursor: pointer;
}
.combo-opt.active { background: var(--accent-soft); }
.combo-opt .combo-main { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.combo-opt mark { color: inherit; background: none; font-weight: 700; }
.combo-opt.action { font-weight: 550; color: var(--accent); }
.combo-opt.action.new { color: var(--new); }
.combo-opt + .combo-opt.action,
.combo-opt.action.sep { margin-top: 2px; border-top: 1px solid var(--line); border-radius: 0 0 var(--radius-xs) var(--radius-xs); }
.combo-ph {
  flex: none;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  object-fit: cover;
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
  background: var(--surface-2);
  border-radius: var(--radius-xs);
}
.combo-opt.action .combo-ph { color: var(--accent); background: var(--accent-soft); }
.combo-opt.action.new .combo-ph { color: var(--new); background: var(--new-soft); }
.combo-empty { padding: 8px 10px; font-size: 13px; color: var(--muted); }

/* ---- dialogs */
dialog {
  width: min(560px, calc(100vw - 24px));
  max-height: calc(100vh - 32px);
  padding: 0;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow-lg);
}
dialog.narrow { width: min(400px, calc(100vw - 24px)); }
dialog::backdrop { background: var(--backdrop); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.dialog-body { display: grid; gap: 10px; padding: 16px 16px 12px; }
.dialog-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.dialog-head p { margin-top: 3px; font-size: 14px; color: var(--muted); }
.dialog-foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
  padding: 10px 16px;
  background: var(--surface-2);
  border-top: 1px solid var(--line);
  border-radius: 0 0 14px 14px;
}

/* ---- toasts */
.toasts {
  position: fixed;
  bottom: 20px;
  left: 50%;
  z-index: 100;
  display: grid;
  gap: 8px;
  width: min(520px, calc(100vw - 24px));
  transform: translateX(-50%);
}
.toast {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  font-size: 14px;
  color: var(--surface);
  background: var(--ink);
  border-radius: 10px;
  box-shadow: var(--shadow-lg);
  animation: toast-in .16s ease-out;
}
.toast.error { color: #fff; background: var(--bad); }
.toast a { font-weight: 650; white-space: nowrap; color: inherit; text-decoration: underline; }
.toast .icon-btn { margin-left: auto; color: inherit; opacity: .75; }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }


/* =========================================================================================
   8. Composer (add information: dialog, and inline on a person's page)
   ========================================================================================= */

.composer { display: grid; gap: 8px; }
.composer textarea { min-height: 100px; }
.composer .who-pill {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 36px;
  padding: 4px 6px;
  background: var(--surface-2);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
}
.composer .who-pill.new { background: var(--new-soft); border-color: var(--new-line); }
.composer .who-pill .who-name { flex: 1; min-width: 0; overflow: hidden; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.composer-foot { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 12px; }
.composer-foot .level { display: grid; gap: 4px; }
.composer-foot .level label { font-size: 12px; font-weight: 600; color: var(--muted); }
.composer-foot .btn-row { margin-left: auto; }
.level-hint { font-size: 13px; color: var(--muted); }
.level-hint.draft {
  padding: 8px 11px;
  color: var(--ink);
  background: var(--warn-soft);
  border: 1px solid var(--warn-line);
  border-radius: var(--radius-sm);
}
.counter { margin-top: -6px; font-size: 12px; text-align: right; color: var(--warn); }
.counter:empty { display: none; }
.composer.inline { padding: 10px; }
.composer.inline:not(.active) .composer-more { display: none; }
.composer.inline:not(.active) textarea { min-height: 38px; }


/* =========================================================================================
   9. Person page
   ========================================================================================= */

.person-layout {
  --profile-w: 248px;  /* set on the element by the resize handle (person.js) */
  position: relative;
  display: grid;
  grid-template-columns: var(--profile-w) minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}
/* the handle sits in the gap between the profile and the information */
.resize-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--profile-w);
  z-index: 2;
  width: 14px;
  cursor: col-resize;
  touch-action: none;
}
.resize-handle::after {
  content: "";
  position: absolute;
  inset: 0 6px;
  border-radius: 2px;
  transition: background var(--fast);
}
.resize-handle:hover::after, .resize-handle:focus-visible::after, body.resizing .resize-handle::after { background: var(--accent); }
.resize-handle:focus-visible { outline: none; }
body.resizing { cursor: col-resize; -webkit-user-select: none; user-select: none; }
.profile { position: sticky; top: calc(var(--topbar-h) + 10px); display: grid; }
.profile-section { padding: 10px 12px; border-top: 1px solid var(--line); }
.profile-section:first-child { border-top: 0; }
.profile-top {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  justify-items: start;
  gap: 2px 10px;
}
.profile-top > .avatar { grid-row: span 2; width: 56px; height: 56px; font-size: 21px; }
.profile-top > .rename-form, .profile-top > p, .profile-top > .pid-row { grid-column: 1 / -1; }
.profile-top > h1 { min-width: 0; font-size: 20px; overflow-wrap: anywhere; }
.profile-name h1 { min-width: 0; font-size: 20px; }
.profile-name { display: flex; align-items: flex-start; gap: 2px; min-width: 0; }
.profile-name .icon-btn { flex: none; }
.profile-name h1 { overflow-wrap: anywhere; }
.profile-more > summary { display: none; }
.rename-form { display: grid; gap: 8px; width: 100%; }

/* aliases and tags, editable */
.chip-list { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.chip-edit {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 0 2px 0 10px;
  font-size: 13px;
  line-height: 24px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--pill);
}
.chip-edit.is-tag { color: var(--tag); background: var(--tag-soft); border-color: transparent; }
.chip-edit.readonly { padding-right: 10px; }
.chip-edit .icon-btn { width: 22px; height: 22px; font-size: 14px; color: inherit; border-radius: 50%; opacity: .6; }
.chip-edit .icon-btn:hover { opacity: 1; }
.chip-add {
  padding: 0 10px;
  font: inherit;
  font-size: 13px;
  line-height: 24px;
  color: var(--muted);
  background: none;
  border: 1px dashed var(--line-strong);
  border-radius: var(--pill);
  cursor: pointer;
}
.chip-add:hover { color: var(--accent); border-color: var(--accent); }
.chip-input { display: flex; gap: 6px; width: 100%; margin-top: 2px; }
.chip-input .combo { flex: 1; }
.chip-input input { padding: 5px 10px; font-size: 14px; }

/* photos */
.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 4px; }
.photo-tile { position: relative; aspect-ratio: 1; overflow: hidden; background: var(--surface-2); border-radius: 8px; }
.photo-tile img { display: block; width: 100%; height: 100%; object-fit: cover; }
.photo-tile .icon-btn {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 22px;
  height: 22px;
  font-size: 14px;
  color: #fff;
  background: rgba(0, 0, 0, .55);
  opacity: 0;
  transition: opacity .1s;
}
.photo-tile:hover .icon-btn, .photo-tile .icon-btn:focus-visible { opacity: 1; }
@media (hover: none) { .photo-tile .icon-btn { opacity: 1; } }
.photo-add {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  padding: 4px;
  font: inherit;
  font-size: 12px;
  line-height: 1.3;
  text-align: center;
  color: var(--muted);
  background: none;
  border: 1px dashed var(--line-strong);
  border-radius: 8px;
  cursor: pointer;
}
.photo-add:hover { color: var(--accent); border-color: var(--accent); }

/* choosing a face from an uploaded photo */
.face-pick { display: grid; gap: 6px; margin-top: 8px; }
.face-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.face-option canvas { flex: none; width: 52px; height: 52px; background: var(--surface-2); border-radius: var(--radius-xs); }
.face-option .face-text { flex: 1; min-width: 0; font-size: 13px; }
.face-option .face-text.warn { color: var(--warn); }
.face-option.saved { background: var(--ok-soft); border-color: var(--ok-line); }

.danger-zone { display: flex; flex-wrap: wrap; gap: 8px; }

/* asking for access to a hidden person */
.access-form { display: grid; gap: 12px; }
.access-form fieldset, fieldset.access-form { display: grid; gap: 4px; margin: 0; padding: 0; border: 0; }
fieldset.access-form { gap: 6px; }
.access-pending {
  display: grid;
  gap: 6px;
  padding: 10px 12px;
  font-size: 14px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.access-past { display: grid; justify-items: start; gap: 2px; padding: 6px 0; border-top: 1px dashed var(--line); }
.access-past:first-of-type { border-top: 0; }

@media (max-width: 900px) {
  .person-layout { grid-template-columns: 1fr; }
  .resize-handle { display: none; }
  .profile { position: static; }
  .profile-more > summary {
    display: block;
    padding: 8px 12px;
    font-size: 14px;
    font-weight: 600;
    list-style: none;
    color: var(--accent);
    border-top: 1px solid var(--line);
    cursor: pointer;
  }
  .profile-more > summary::-webkit-details-marker { display: none; }
  .profile-more > summary::after { content: " ▾"; }
  .profile-more[open] > summary::after { content: " ▴"; }
}


/* =========================================================================================
   10. Information feed and proof
   ========================================================================================= */

/* ---- feed header and filters */
.feed-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 14px 0 8px; }
.feed-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 8px; }
.feed-tools input[type=search] { flex: 1 1 220px; width: auto; }
.feed-tools select { font-size: 14px; }
.more-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: -2px 0 8px;
  padding: 8px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.more-filters label { display: grid; gap: 3px; font-size: 12px; font-weight: 600; color: var(--muted); }
.filter-note { display: flex; align-items: center; gap: 10px; margin: -2px 0 8px; font-size: 13px; color: var(--muted); }

/* ---- an information entry */
.entries { display: grid; gap: 8px; }
.entry {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  transition: border-color .15s;
}
.entry:hover { border-color: var(--line-strong); }
.entry:target { border-color: var(--accent); box-shadow: var(--ring); }
.entry.draft { border-style: dashed; border-color: var(--warn-line); }
.entry.rejected { border-style: dashed; border-color: var(--bad-line); }
.entry-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; padding: 8px 12px 0; }
.entry-actions { display: inline-flex; align-items: center; gap: 2px; white-space: nowrap; }
.entry-head .byline { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; font-size: 13px; color: var(--muted); }
.entry-about { padding: 8px 12px 0; font-size: 13.5px; }
.entry-body { padding: 4px 12px 8px; font-size: var(--fs-lg); white-space: pre-wrap; overflow-wrap: anywhere; }
.entry-note { margin: 0 12px 8px; padding: 6px 10px; font-size: 13px; background: var(--surface-2); border-radius: var(--radius-sm); }
.entry-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 6px 12px; border-top: 1px solid var(--line); }
.entry-err { padding: 0 12px 8px; font-size: 13px; color: var(--bad); }
.entry-err:empty { display: none; }

/* rating (Trust / Distrust) */
.rate {
  padding: 2px 10px;
  font: inherit;
  font-size: 12.5px;
  font-weight: 550;
  color: var(--ink-2);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--pill);
  cursor: pointer;
  transition: border-color var(--fast), color var(--fast), background var(--fast);
}
.rate:hover { color: var(--accent); border-color: var(--accent); }
.rate.up.on   { color: var(--ok);  background: var(--ok-soft);  border-color: var(--ok-line); }
.rate.down.on { color: var(--bad); background: var(--bad-soft); border-color: var(--bad-line); }
.opinion { font-size: 13px; color: var(--muted); }

/* reviewing a draft */
.review-form {
  display: grid;
  gap: 8px;
  margin: 0 12px 10px;
  padding: 10px;
  background: var(--warn-soft);
  border: 1px solid var(--warn-line);
  border-radius: var(--radius-sm);
}
.review-form .btn-row label { font-size: 13px; font-weight: 600; }

/* @mentions: a link to the person (a hidden one shows as "Hidden person <id>") */
.mention {
  padding: 0 3px;
  font-weight: 600;
  color: var(--accent);
  background: var(--accent-soft);
  border-radius: 4px;
  white-space: nowrap;
}
.mention:hover { text-decoration: none; filter: brightness(1.1); }
.mention .restricted, .mention .unnamed { font-weight: 600; }
.mention.gone { font-weight: 500; font-style: italic; color: var(--muted); background: var(--surface-2); }
.mention-host { position: relative; }
.mention-list { top: auto; margin-top: 4px; position: absolute; }
.comment-form .mention-list { top: calc(100% + 4px); margin-top: 0; }
.mentioned-in { display: grid; gap: 6px; margin-top: 22px; }
.mentioned-in > .meta { margin-top: -4px; }

/* the author editing an entry (each save is a new version) */
.edit-form {
  display: grid;
  gap: 8px;
  margin: 4px 12px 10px;
  padding: 10px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.edit-form .hint { margin-top: 0; }
.hint.warn {
  padding: 7px 10px;
  color: var(--ink);
  background: var(--warn-soft);
  border: 1px solid var(--warn-line);
  border-radius: var(--radius-sm);
}

/* an entry's version history (history.js) */
dialog.history-dialog { width: min(860px, calc(100vw - 24px)); }
.history { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 12px; min-height: 280px; }
.history-list { display: grid; align-content: start; gap: 2px; max-height: 60vh; margin: 0; padding: 0; overflow-y: auto; list-style: none; }
.history-list button {
  display: grid;
  gap: 1px;
  width: 100%;
  padding: 7px 9px;
  font: inherit;
  font-size: 13px;
  text-align: left;
  color: var(--ink-2);
  background: none;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.history-list button:hover { background: var(--hover); }
.history-list button[aria-selected=true] { color: var(--ink); background: var(--accent-soft); border-color: var(--accent); }
.history-list .v-num { font-weight: 700; }
.history-list .v-msg { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.history-list .v-msg.none { font-style: italic; color: var(--muted); }
.history-view { display: grid; align-content: start; gap: 8px; min-width: 0; }
.history-view-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.diff {
  max-height: 52vh;
  padding: 10px 12px;
  overflow-y: auto;
  font-size: var(--fs-md);
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.diff ins { color: var(--ok); text-decoration: none; background: var(--ok-soft); border-radius: 3px; }
.diff del { color: var(--bad); background: var(--bad-soft); border-radius: 3px; }
.diff del + ins, .diff ins + del { margin-left: 3px; }
@media (max-width: 640px) {
  .history { grid-template-columns: 1fr; }
  .history-list { max-height: 30vh; }
}

/* ---- proof */
.proof-toggle {
  padding: 3px 6px;
  font: inherit;
  font-size: 13px;
  color: var(--ink-2);
  background: none;
  border: 0;
  border-radius: var(--radius-xs);
  cursor: pointer;
}
.proof-toggle:hover { background: var(--hover); }
.proof-panel { display: grid; gap: 6px; padding: 2px 12px 10px; }
.proof-summary { font-size: 13px; color: var(--muted); }
.proof {
  display: grid;
  gap: 4px;
  padding: 8px 10px;
  font-size: var(--fs-md);
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--line-strong);
  border-radius: var(--radius-sm);
}
.proof.confirm { border-left-color: var(--ok); }
.proof.refute { border-left-color: var(--bad); }
.proof:target { box-shadow: var(--ring); }
.proof-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.stance { font-size: 13px; font-weight: 650; }
.proof.confirm .stance { color: var(--ok); }
.proof.refute .stance { color: var(--bad); }
.proof .body { white-space: pre-wrap; overflow-wrap: anywhere; }
.proof-files { display: flex; flex-wrap: wrap; gap: 6px; }
.proof-files img {
  display: block;
  width: 96px;
  height: 68px;
  object-fit: cover;
  border: 1px solid var(--line);
  border-radius: var(--radius-xs);
}
.proof-files .file-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  font-size: 13px;
  border: 1px solid var(--line);
  border-radius: var(--radius-xs);
}

/* comments on proof */
.comments { display: grid; gap: 4px; padding-left: 10px; font-size: var(--fs-sm); border-left: 2px solid var(--line); }
.comment { overflow-wrap: anywhere; }
.comment-form { display: flex; gap: 6px; }
.comment-form input { padding: 4px 10px; font-size: var(--fs-sm); }

/* adding proof */
.proof-form {
  display: grid;
  gap: 8px;
  padding: 10px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.proof-form input[type=file] { font-size: 13px; }
.stance-pick { display: flex; flex-wrap: wrap; gap: 8px; }
.stance-pick label {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  font-size: 13.5px;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.stance-pick input { margin: 0; accent-color: currentColor; }
.stance-pick label.confirm:has(input:checked) { color: var(--ok);  background: var(--ok-soft);  border-color: var(--ok); }
.stance-pick label.refute:has(input:checked)  { color: var(--bad); background: var(--bad-soft); border-color: var(--bad); }


/* =========================================================================================
   11. Photo search (people page)
   ========================================================================================= */

.photo-panel {
  display: grid;
  gap: 12px;
  margin-bottom: 16px;
  padding: 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow-md);
}
.pp-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.pp-head .sub { margin-top: 1px; font-size: var(--fs-sm); color: var(--muted); }
.pp-head .btn svg { width: 15px; height: 15px; margin-right: 2px; vertical-align: -3px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.photo-layout { display: grid; grid-template-columns: minmax(0, 3fr) minmax(320px, 2fr); gap: 14px; align-items: start; }

/* each state's colour, shared by a face's card and its box in the photo */
.st-matched   { --c: var(--ok); }
.st-ambiguous { --c: var(--warn); }
.st-new       { --c: var(--new); }
.st-saved     { --c: var(--muted); }
.st-dup       { --c: var(--bad); }

/* the camera: a dark viewfinder, on only while it's open */
dialog.camera-dialog {
  width: min(960px, calc(100vw - 24px));
  overflow: hidden;
  color: #fff;
  background: #000;
  border: 0;
}
dialog.camera-dialog::backdrop { background: rgba(4, 6, 10, .82); }
.cam-view { position: relative; display: grid; place-items: center; min-height: 240px; background: #000; }
.cam-view video { display: block; width: 100%; max-height: calc(100vh - 140px); object-fit: contain; cursor: pointer; }
.cam-view video.mirrored { transform: scaleX(-1); }
.cam-msg {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  font-size: 15px;
  text-align: center;
  color: rgba(255, 255, 255, .85);
  background: #000;
}
.cam-msg[hidden] { display: none; }
.cam-bar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 14px 18px; background: #0b0d10; }
.cam-bar #cam-close { justify-self: start; }
.cam-bar #cam-switch { grid-column: 3; justify-self: end; }
.cam-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  color: #fff;
  background: rgba(255, 255, 255, .1);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}
.cam-icon:hover { background: rgba(255, 255, 255, .2); }
.cam-icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.shutter {
  width: 66px;
  height: 66px;
  padding: 0;
  background: #fff;
  border: 4px solid #0b0d10;
  border-radius: 50%;
  box-shadow: 0 0 0 3px #fff;
  cursor: pointer;
  transition: transform var(--fast), background var(--fast);
}
.shutter:hover:not(:disabled) { background: #e8eaee; }
.shutter:active:not(:disabled) { transform: scale(.92); }
.shutter:disabled { opacity: .35; cursor: default; }
.shutter:focus-visible { outline: none; box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--accent); }
@media (max-width: 640px) {
  dialog.camera-dialog { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; border-radius: 0; }
  dialog.camera-dialog[open] { display: flex; flex-direction: column; }
  .cam-view { flex: 1; }
  .cam-view video { height: 100%; max-height: none; }
  .cam-bar { padding-bottom: max(14px, env(safe-area-inset-bottom)); }
}

/* drop a photo anywhere */
body.dragging .page::after {
  content: "Drop the photo to see who's in it";
  position: fixed;
  inset: 12px;
  z-index: 50;
  display: grid;
  place-items: center;
  font-size: 18px;
  font-weight: 600;
  color: var(--accent);
  background: var(--accent-soft);
  border: 2px dashed var(--accent);
  border-radius: var(--radius);
  pointer-events: none;
}

/* the photo, with a numbered box over each face */
.stage { position: sticky; top: calc(var(--topbar-h) + 10px); }
.stage-img { position: relative; overflow: hidden; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius); }
.stage-img img { display: block; width: 100%; max-height: 70vh; object-fit: contain; }
.stage .hint { margin-top: 6px; }
.box {
  position: absolute;
  color: var(--c, var(--accent));
  border: 2px solid currentColor;
  border-radius: 6px;
  cursor: pointer;
  transition: box-shadow var(--fast);
}
.box.hl { box-shadow: 0 0 0 3px rgba(255, 255, 255, .85), 0 0 0 5px currentColor; }
.box span {
  position: absolute;
  bottom: calc(100% + 2px);
  left: -2px;
  max-width: 200px;
  overflow: hidden;
  padding: 1px 7px;
  font-size: 12px;
  font-weight: 650;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: #fff;
  background: var(--c, var(--accent));
  border-radius: var(--pill);
}

/* one card per detected face */
/* capped to about the photo's height and scrolls inside, so many faces don't stretch the page;
   the small padding keeps a highlighted card's ring from being clipped */
.faces-list {
  display: grid;
  align-content: start;
  gap: 8px;
  max-height: 70vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 3px;
  margin: -3px;
}
.faces-empty {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 18px 14px;
  font-size: var(--fs-md);
  color: var(--muted);
  background: var(--surface-2);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
}
.faces-bulk {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  font-size: var(--fs-sm);
  color: var(--ink-2);
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  border-radius: var(--radius);
}
.faces-bulk span { flex: 1; }
.face-card {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 10px 12px;
  padding: 10px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--c);
  border-radius: var(--radius);
  transition: border-color var(--fast), box-shadow var(--fast);
}
.face-card.hl { border-color: var(--c); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 18%, transparent); }
.fc-thumb { position: relative; width: 72px; height: 72px; }
.fc-thumb canvas { display: block; width: 72px; height: 72px; background: var(--surface-2); border-radius: 10px; cursor: zoom-in; }
.fc-num {
  position: absolute;
  top: -6px;
  left: -6px;
  display: grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  padding: 0 5px;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  background: var(--c);
  border: 2px solid var(--surface);
  border-radius: var(--pill);
}
.fc-body { display: grid; align-content: start; gap: 4px; min-width: 0; }
.fc-state { font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--c); }
.fc-name { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: var(--fs-lg); font-weight: 600; }
.fc-name a { min-width: 0; overflow: hidden; color: var(--ink); white-space: nowrap; text-overflow: ellipsis; }
.fc-note { margin: 0; font-size: var(--fs-sm); color: var(--muted); }
.fc-cands { display: grid; gap: 2px; margin: 2px 0 0; padding: 0; list-style: none; counter-reset: cand; }
.fc-cands li { display: flex; align-items: center; gap: 8px; font-size: var(--fs-md); counter-increment: cand; }
.fc-cands li::before { content: counter(cand); width: 16px; font-size: 12px; color: var(--muted); text-align: right; }
.fc-cands a { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.fc-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }

/* saving a face: a quiet footer under the card */
.fc-save {
  grid-column: 1 / -1;
  display: grid;
  gap: 6px;
  padding-top: 8px;
  font-size: var(--fs-md);
  border-top: 1px dashed var(--line);
}
.fc-save.done { font-size: var(--fs-sm); color: var(--ok); }
.fc-save.panel .btn-row .combo { flex: 1 1 180px; }
.plan { font-size: var(--fs-sm); color: var(--muted); }
.dup {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 10px;
  font-size: 13px;
  background: var(--warn-soft);
  border: 1px solid var(--warn-line);
  border-radius: var(--radius-sm);
}
.dup img { flex: none; width: 44px; height: 44px; object-fit: cover; border-radius: var(--radius-xs); }

@media (max-width: 900px) {
  .photo-layout { grid-template-columns: 1fr; }
  .stage { position: static; }
}
@media (max-width: 520px) {
  .photo-panel { padding: 10px; }
  .face-card { grid-template-columns: 56px minmax(0, 1fr); }
  .fc-thumb, .fc-thumb canvas { width: 56px; height: 56px; }
}


/* =========================================================================================
   12. Review and access requests
   ========================================================================================= */

.review-section { margin-bottom: 20px; }
.review-section > h2 { margin-bottom: 4px; }
.review-section > .sub { margin: 0 0 8px; font-size: 13.5px; }

/* a request to decide */
.ar-list { display: grid; gap: 10px; }
.ar-card {
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.ar-head { display: flex; align-items: center; gap: 10px; padding: 10px 12px 8px; }
.ar-who { display: grid; gap: 3px; min-width: 0; }
.ar-title { font-size: 15px; overflow-wrap: anywhere; }
.ar-label {
  display: block;
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 650;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--muted);
}
.ar-label .muted { font-weight: 500; letter-spacing: 0; text-transform: none; }
.ar-reason {
  margin: 0 12px;
  padding: 6px 10px;
  background: var(--surface-2);
  border-left: 3px solid var(--accent);
  border-radius: 0 8px 8px 0;
}
.ar-reason .ar-label { margin-bottom: 2px; }
.ar-reason p { font-size: 14px; white-space: pre-wrap; overflow-wrap: anywhere; }

/* what to grant */
.ar-form { display: grid; gap: 10px; padding: 10px 12px 0; }
.ar-form > .error-text { margin: -4px 0 8px; }
.ar-options { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px; }
.ar-option {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 7px 10px;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color .1s, background .1s;
}
.ar-option:hover { border-color: var(--accent-line); }
.ar-option:has(input:checked) { background: var(--accent-soft); border-color: var(--accent); }
.ar-option input { flex: none; width: 16px; height: 16px; margin: 2px 0 0; accent-color: var(--accent); }
.ar-option .opt-name { display: block; font-size: 14px; font-weight: 600; }
.ar-option .opt-preview { display: block; margin-top: 3px; font-size: 13px; color: var(--ink-2); overflow-wrap: anywhere; }
.ar-option .opt-preview img {
  width: 34px;
  height: 34px;
  margin: 2px 4px 0 0;
  object-fit: cover;
  vertical-align: middle;
  border-radius: var(--radius-xs);
}
.ar-option:has(input:not(:checked)) .opt-preview { opacity: .55; text-decoration: line-through; text-decoration-color: var(--muted); }
.ar-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.ar-row .ar-label { margin: 0; }
.ar-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin: 0 -12px;
  padding: 8px 12px;
  background: var(--surface-2);
  border-top: 1px solid var(--line);
}
.ar-summary { flex: 1 1 280px; font-size: 14px; }
.ar-done { margin: 0; }

@media (max-width: 640px) {
  .ar-foot .btn-row { width: 100%; }
  .ar-foot .btn-row .btn { flex: 1; }
}


/* =========================================================================================
   13. Lightbox (enlarged images; always dark, whatever the theme)
   ========================================================================================= */

[data-zoom] { cursor: zoom-in; }
dialog.lightbox {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100vw;
  height: 100vh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  color: #fff;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
dialog.lightbox[open] { display: flex; }
dialog.lightbox::backdrop { background: rgba(8, 10, 16, .88); }
.lb-figure { display: grid; justify-items: center; gap: 10px; max-width: calc(100vw - 140px); margin: 0; }
.lb-img {
  display: block;
  max-width: 100%;
  max-height: calc(100vh - 120px);
  min-width: min(60vmin, 440px);
  object-fit: contain;
  background: #000;
  border-radius: 10px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .5);
  cursor: default;
}
.lb-caption {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 14px;
  font-size: 14px;
  text-align: center;
  color: rgba(255, 255, 255, .85);
}
.lb-count { color: rgba(255, 255, 255, .6); }
.lb-open { color: #fff; text-decoration: underline; }
.lb-btn {
  flex: none;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  font-size: 30px;
  line-height: 1;
  color: #fff;
  background: rgba(255, 255, 255, .12);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}
.lb-btn:hover { background: rgba(255, 255, 255, .24); }
.lb-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.lb-close { position: absolute; top: 16px; right: 16px; width: 42px; height: 42px; font-size: 26px; }

@media (max-width: 640px) {
  .lb-figure { max-width: calc(100vw - 24px); }
  .lb-img { min-width: min(80vw, 440px); max-height: calc(100vh - 170px); }
  .lb-prev, .lb-next { position: absolute; bottom: 20px; }
  .lb-prev { left: calc(50% - 60px); }
  .lb-next { right: calc(50% - 60px); }
}


/* =========================================================================================
   14. Admin
   ========================================================================================= */

.tabs { display: flex; gap: 2px; margin-bottom: 12px; border-bottom: 1px solid var(--line); }
.tabs button {
  margin-bottom: -1px;
  padding: 6px 12px;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: color var(--fast);
}
.tabs button:hover { color: var(--ink); }
.tabs button[aria-selected=true] { color: var(--ink); border-bottom-color: var(--accent); }

.table-wrap { overflow-x: auto; }
table { width: 100%; font-size: 13.5px; border-collapse: collapse; }
th, td { padding: 6px 10px; text-align: left; vertical-align: middle; border-bottom: 1px solid var(--line); }
th {
  font-size: 12px;
  font-weight: 650;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--surface-2);
}
tbody tr:hover td { background: var(--surface-2); }
tr:last-child td { border-bottom: 0; }
td select { padding: 4px 26px 4px 8px; font-size: 13px; }
td.actions { text-align: right; white-space: nowrap; }

/* access log */
.log-filters { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.log-filters input { flex: 1 1 160px; width: auto; }
.log td { font-size: 13px; vertical-align: top; }
.tgt {
  display: inline-block;
  margin: 1px 3px 1px 0;
  padding: 0 5px;
  font: 11px/18px var(--mono);
  color: var(--ink-2);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 4px;
  cursor: pointer;
}
.tgt:hover { border-color: var(--accent); }
.tgt.restricted { color: var(--bad);  background: var(--bad-soft);  border-color: var(--bad-line); }
.tgt.granted    { color: var(--warn); background: var(--warn-soft); border-color: var(--warn-line); }
.status-bad { font-weight: 600; color: var(--bad); }


/* =========================================================================================
   15. Sign in
   ========================================================================================= */

.login {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 100vh;
  padding: 20px;
  background: radial-gradient(700px 380px at 50% 18%, var(--glow), transparent 70%);
}
.login form { display: grid; gap: 12px; width: min(380px, 100%); padding: 24px; box-shadow: var(--shadow-lg); }
.login .brand { font-size: 17px; }
.login .btn.primary { padding: 10px 14px; }
.login-theme { position: absolute; top: 16px; right: 16px; z-index: 1; }
.login form { position: relative; z-index: 1; }
/* the moving network of dots behind the sign-in card (particles.js) */
.particles { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; }


/* =========================================================================================
   16. Dialog fixes
   ========================================================================================= */

/* A dialog scrolls its own content, which would clip a floating suggestion list, so inside
   dialogs the list sits in the flow and pushes the rest of the form down. */
dialog .combo-list { position: static; margin-top: 4px; max-height: 240px; box-shadow: none; }


/* =========================================================================================
   17. Wide screens: the top bar becomes a side rail
   Brand, Add information and navigation at the top; the account and the theme
   toggle at the bottom. Narrower screens keep the top bar. The rail folds down to
   icons (<html data-rail="collapsed">, set by shell.js and the inline head script).
   ========================================================================================= */

@media (min-width: 1024px) {
  :root { --rail: 236px; --topbar-h: 0px; --gutter: 16px; }
  :root[data-rail="collapsed"] { --rail: 64px; }
  /* only pages with the rail make room for it (the sign-in page has none) */
  body:has(> .topbar) { padding-left: var(--rail); }
  /* animated only while folding or unfolding (shell.js sets .rail-anim), not on page load */
  :root.rail-anim body:has(> .topbar) { transition: padding-left .18s ease; }
  :root.rail-anim .topbar { transition: width .18s ease; }

  .topbar {
    position: fixed;
    inset: 0 auto 0 0;
    width: var(--rail);
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto auto 1fr auto;
    grid-template-areas:
      "brand   fold"
      "add     add"
      "nav     nav"
      ".       ."
      "account theme";
    align-items: center;
    gap: 12px 8px;
    padding: 16px 12px 12px;
    background: var(--rail-bg);
    border-right: 1px solid var(--line);
    border-bottom: 0;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .brand { grid-area: brand; padding: 2px 6px 4px; }
  .rail-btn { grid-area: fold; display: inline-grid; width: 30px; height: 30px; }
  .rail-btn svg { width: 18px; height: 18px; }
  .rail-btn .rail-chevron { transform-origin: 14.5px 12px; transition: transform .18s ease; }
  #quick-add { grid-area: add; width: 100%; padding-block: 7px; }

  .nav { grid-area: nav; flex-direction: column; gap: 1px; padding: 0; background: none; border: 0; }
  .nav a { display: flex; align-items: center; gap: 10px; padding: 7px 10px; font-size: var(--fs-md); color: var(--ink-2); }
  .nav-icon { display: block; flex: none; width: 18px; height: 18px; }
  .nav a:hover { background: var(--hover); }
  .nav a[aria-current=page] { color: var(--accent); background: var(--accent-soft); box-shadow: none; }
  .nav .dot { top: 50%; right: 10px; margin-top: -3.5px; }

  .account { grid-area: account; min-width: 0; }
  .avatar-btn { width: 100%; padding: 5px 6px; border-radius: var(--radius-sm); }
  .avatar-btn:hover { background: var(--hover); }
  .account-name { display: block; min-width: 0; overflow: hidden; font-size: var(--fs-md); font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
  .theme-btn { grid-area: theme; }
  .menu { top: auto; bottom: calc(100% + 8px); left: 0; right: auto; }

  .person-layout { --profile-w: 264px; }

  /* folded: one centred column of icons, labels kept for screen readers and tooltips */
  :root[data-rail="collapsed"] .topbar {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto auto 1fr auto auto;
    grid-template-areas: "brand" "fold" "add" "nav" "." "theme" "account";
    justify-items: center;
    padding-inline: 10px;
  }
  :root[data-rail="collapsed"] .brand { padding: 2px 0 0; gap: 0; }
  :root[data-rail="collapsed"] .rail-btn .rail-chevron { transform: scaleX(-1); }
  :root[data-rail="collapsed"] :is(.brand-text, .nav-label, .quick-add-label) {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
  :root[data-rail="collapsed"] #quick-add { width: 40px; height: 36px; padding: 0; font-size: 17px; }
  :root[data-rail="collapsed"] .nav { width: 100%; gap: 2px; }
  :root[data-rail="collapsed"] .nav a { justify-content: center; padding: 9px 0; }
  :root[data-rail="collapsed"] .nav .dot { top: 6px; right: 8px; margin-top: 0; }
  :root[data-rail="collapsed"] .avatar-btn { width: auto; padding: 4px; }
  :root[data-rail="collapsed"] .account-name { display: none; }
}