/* ============================================================
   Ultra-Good · App / CRM CSS
   Direction: F — Manifesto (logged-in shell + auth pages)
   Reference: design-explorations/f-manifesto.html + DESIGN.md
   ============================================================ */

:root{
  /* Hex values are the load-bearing source of truth — universally supported.
     oklch() variants follow only as comments for future reference. */
  --bg: #fafaf7;         /* oklch(98% 0.003 90)  — cream */
  --bg-2: #f0ede0;       /* oklch(94% 0.005 90)  — cream-2 */
  --bg-3: #e7e3d4;       /* oklch(91% 0.008 90)  — cream-3 */
  --ink: #1a1a17;        /* oklch(14% 0.005 70)  — near-black */
  --ink-soft: #46463f;   /* oklch(34% 0.005 70) */
  --dim: #6b6a61;        /* oklch(46% 0.008 70) */
  --rule: #26261f;       /* oklch(20% 0.005 70) */
  --hair: #d6d2bf;       /* oklch(82% 0.014 82) */
  --signal: #dc4c2a;     /* oklch(58% 0.205 32)  — signal red */
  --signal-soft: #fbe8e0;/* oklch(95% 0.04 32) */
  --signal-deep: #b53d1e;/* oklch(48% 0.205 32) */
  --ok: #3a8a4c;         /* oklch(56% 0.16 145) */
  --ok-soft: #e7f3df;    /* oklch(95% 0.04 145) */
  --warn: #d8a437;       /* oklch(72% 0.18 75) */
  --warn-soft: #f5ecd4;  /* oklch(95% 0.04 75) */

  --font-display: "Big Shoulders Display", Impact, "Helvetica Neue", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;

  --sidebar-w: 240px;
  --sidebar-collapsed-w: 72px;
  --topbar-h: 64px;
  --pad: clamp(20px, 3vw, 32px);
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);}
body.ug-app{
  font-family:var(--font-mono);
  font-size:0.92rem;line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* ─── Tailwind → Manifesto override layer ───────────────────────────────────
   The existing CRM pages were authored against the dark slate / purple-cyan
   Tailwind theme. These overrides reskin those classes to the Manifesto
   palette without rewriting every page. New pages should use the .app-*
   primitives below instead of Tailwind. */

body.ug-app .bg-slate-900,
body.ug-app .bg-slate-800,
body.ug-app .bg-slate-800\/80,
body.ug-app .bg-slate-800\/50{ background:var(--bg) !important; }
body.ug-app .bg-slate-700\/50{ background:var(--bg-2) !important; }

body.ug-app .text-white{ color:var(--ink) !important; }
body.ug-app .text-slate-300,
body.ug-app .text-slate-400,
body.ug-app .text-slate-500{ color:var(--ink-soft) !important; }

body.ug-app .border-slate-700,
body.ug-app .border-slate-700\/50{ border-color:var(--ink) !important; }

body.ug-app .rounded,
body.ug-app .rounded-sm,
body.ug-app .rounded-md,
body.ug-app .rounded-lg,
body.ug-app .rounded-xl,
body.ug-app .rounded-2xl,
body.ug-app .rounded-3xl,
body.ug-app .rounded-full{ border-radius:0 !important; }

body.ug-app .shadow,
body.ug-app .shadow-sm,
body.ug-app .shadow-md,
body.ug-app .shadow-lg,
body.ug-app .shadow-xl,
body.ug-app .shadow-2xl{ box-shadow:none !important; }

body.ug-app .backdrop-blur-sm,
body.ug-app .backdrop-blur,
body.ug-app .backdrop-blur-md{ backdrop-filter:none !important; }

body.ug-app .bg-primary,
body.ug-app .bg-primary\/20,
body.ug-app .bg-primary\/30{ background:var(--signal) !important; color:var(--bg) !important; }
body.ug-app .text-primary,
body.ug-app .text-purple-400,
body.ug-app .text-purple-300{ color:var(--signal) !important; }

body.ug-app .bg-emerald-500\/10,
body.ug-app .bg-emerald-500\/20{ background:var(--ok-soft) !important; }
body.ug-app .text-emerald-300,
body.ug-app .text-emerald-400{ color:var(--ok) !important; }
body.ug-app .border-emerald-500\/30{ border-color:var(--ok) !important; }

body.ug-app .bg-red-500\/10{ background:var(--signal-soft) !important; }
body.ug-app .text-red-300,
body.ug-app .text-red-400{ color:var(--signal) !important; }
body.ug-app .border-red-500\/30{ border-color:var(--signal) !important; }

body.ug-app .from-purple-900\/20,
body.ug-app .via-slate-900,
body.ug-app .to-cyan-900\/20{ --tw-gradient-from:var(--bg) !important; --tw-gradient-to:var(--bg) !important; }
body.ug-app .bg-gradient-to-r,
body.ug-app .bg-gradient-to-br{ background-image:none !important; background:var(--ink) !important; }

body.ug-app input,
body.ug-app textarea,
body.ug-app select{
  background:var(--bg) !important;
  border:1px solid var(--ink) !important;
  border-radius:0 !important;
  color:var(--ink) !important;
  font-family:var(--font-mono) !important;
}
body.ug-app input::placeholder,
body.ug-app textarea::placeholder{ color:var(--dim) !important; }
body.ug-app input:focus,
body.ug-app textarea:focus,
body.ug-app select:focus{
  outline:0 !important;
  border-color:var(--signal) !important;
  box-shadow:0 0 0 2px var(--signal-soft) !important;
}

body.ug-app button{ font-family:var(--font-mono) !important; border-radius:0 !important; }

body.ug-app a{ color:var(--ink); text-decoration:none; }
body.ug-app a:hover{ color:var(--signal); }

/* ─── App shell primitives (use these for new pages) ────────────────────── */

.app-shell{
  display:grid;
  grid-template-columns:var(--sidebar-w) 1fr;
  min-height:100vh;
  transition:grid-template-columns 180ms ease;
}
.app-shell.sidebar-collapsed{
  grid-template-columns:var(--sidebar-collapsed-w) 1fr;
}

.app-sidebar{
  position:fixed;left:0;top:0;bottom:0;width:var(--sidebar-w);
  background:var(--bg);
  border-right:3px solid var(--ink);
  display:flex;flex-direction:column;
  z-index:40;
  transition:width 180ms ease,transform 220ms ease;
  overflow:hidden;
}
.app-sidebar .brand{
  padding:18px 20px;border-bottom:3px solid var(--ink);
  font-family:var(--font-display);font-weight:900;
  font-size:1.4rem;letter-spacing:0.04em;text-transform:uppercase;
  color:var(--ink);text-decoration:none;
  display:flex;align-items:center;gap:6px;
}
.app-sidebar .brand b{color:var(--signal);}
.app-sidebar .brand-mark{display:none;color:var(--signal);}
.app-shell.sidebar-collapsed .app-sidebar .brand-mark{display:inline;}
.app-sidebar nav{padding:14px 0;flex:1;overflow-y:auto;}
.app-sidebar .nav-section{
  padding:14px 20px 6px;
  font-family:var(--font-mono);font-weight:700;
  font-size:0.65rem;letter-spacing:0.18em;text-transform:uppercase;
  color:var(--dim);
}
.app-sidebar .nav-link{
  display:flex;align-items:center;gap:10px;
  padding:10px 20px;
  font-family:var(--font-mono);font-weight:500;
  font-size:0.82rem;letter-spacing:0.04em;
  color:var(--ink-soft);
  border-left:3px solid transparent;
  white-space:nowrap;
  transition:color 120ms,border-color 120ms,background 120ms;
}
.app-sidebar .nav-link:hover{color:var(--ink);background:var(--bg-2);}
.app-sidebar .nav-link.active{
  color:var(--ink);border-left-color:var(--signal);
  background:var(--signal-soft);
}
.app-sidebar .nav-link .glyph{
  display:inline-block;width:14px;text-align:center;color:var(--dim);
  font-weight:700;
}
.app-sidebar .nav-link.active .glyph{color:var(--signal);}
.app-sidebar .sidebar-foot{
  padding:14px 20px;border-top:1px solid var(--ink);
  font-family:var(--font-mono);font-size:0.7rem;letter-spacing:0.14em;
  text-transform:uppercase;color:var(--dim);
}
.app-sidebar .sidebar-foot b{color:var(--signal);}
.app-shell.sidebar-collapsed .app-sidebar{width:var(--sidebar-collapsed-w);}
.app-shell.sidebar-collapsed .app-sidebar .brand{justify-content:center;padding-left:0;padding-right:0;}
.app-shell.sidebar-collapsed .brand-text,
.app-shell.sidebar-collapsed .nav-section,
.app-shell.sidebar-collapsed .nav-label,
.app-shell.sidebar-collapsed .nav-link .pill,
.app-shell.sidebar-collapsed .sidebar-foot{display:none;}
.app-shell.sidebar-collapsed .app-sidebar nav{padding-top:12px;overflow:hidden;}
.app-shell.sidebar-collapsed .app-sidebar .nav-link{justify-content:center;padding:12px 0;border-left:0;border-right:3px solid transparent;}
.app-shell.sidebar-collapsed .app-sidebar .nav-link.active{border-right-color:var(--signal);}
.app-shell.sidebar-collapsed .app-sidebar .nav-link .glyph{width:auto;font-size:1rem;}

.app-main{
  grid-column:2;
  margin-left:0;
  display:flex;flex-direction:column;min-height:100vh;
}

.app-topbar{
  position:sticky;top:0;z-index:30;
  height:var(--topbar-h);
  background:var(--bg);
  border-bottom:3px solid var(--ink);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 var(--pad);gap:14px;
}
.app-topbar .page-title{
  font-family:var(--font-display);font-weight:900;text-transform:uppercase;
  font-size:1.4rem;letter-spacing:0.02em;line-height:1;color:var(--ink);
}
.app-topbar .page-title .glyph{color:var(--signal);margin-right:6px;}
.app-topbar .topbar-right{display:flex;align-items:center;gap:14px;}

.user-menu{position:relative;}
.user-menu .trigger{
  display:flex;align-items:center;gap:10px;
  padding:8px 12px;background:transparent;border:1px solid transparent;
  cursor:pointer;font-family:var(--font-mono);
  font-size:0.78rem;letter-spacing:0.06em;color:var(--ink);
}
.user-menu .trigger:hover{border-color:var(--ink);}
.user-menu .avatar{
  width:28px;height:28px;background:var(--ink);color:var(--bg);
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-weight:900;font-size:0.85rem;
  text-transform:uppercase;letter-spacing:0.04em;
}
.user-menu .menu{
  display:none;position:absolute;top:100%;right:0;margin-top:6px;
  min-width:200px;background:var(--bg);border:3px solid var(--ink);
  z-index:50;
}
.user-menu.open .menu{display:block;}
.user-menu .menu a{
  display:block;padding:12px 16px;
  font-family:var(--font-mono);font-weight:500;font-size:0.82rem;
  color:var(--ink);border-bottom:1px solid var(--hair);
}
.user-menu .menu a:last-child{border-bottom:0;}
.user-menu .menu a:hover{background:var(--bg-2);color:var(--signal);}
.user-menu .menu a.danger:hover{background:var(--signal);color:var(--bg);}

.app-content{
  flex:1;padding:var(--pad);
  display:flex;flex-direction:column;gap:24px;
}

/* ─── Page heads ─────────────────────────────────────────────────────────── */

.page-head{
  display:flex;align-items:flex-end;justify-content:space-between;gap:24px;
  padding-bottom:18px;border-bottom:3px solid var(--ink);
}
.page-head .label{
  font-family:var(--font-mono);font-weight:700;
  font-size:0.7rem;letter-spacing:0.18em;text-transform:uppercase;
  color:var(--signal);margin-bottom:8px;
}
.page-head h1{
  margin:0;
  font-family:var(--font-display);font-weight:900;text-transform:uppercase;
  font-size:clamp(1.8rem,3.5vw,3rem);line-height:0.9;letter-spacing:-0.015em;
  color:var(--ink);
}
.page-head h1 em{font-style:italic;color:var(--signal);}
.page-head .head-actions{display:flex;gap:10px;flex-wrap:wrap;}
.page-head .meta{
  font-family:var(--font-mono);font-weight:500;
  font-size:0.7rem;letter-spacing:0.14em;text-transform:uppercase;
  color:var(--dim);margin-top:6px;
}

/* ─── Buttons ────────────────────────────────────────────────────────────── */

.btn,
a.btn,
button.btn,
input[type="submit"].btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:var(--ink) !important;color:var(--bg) !important;
  border:0;padding:12px 22px;cursor:pointer;
  font-family:var(--font-mono);font-weight:900;
  font-size:0.95rem;letter-spacing:0.1em;text-transform:uppercase;
  text-decoration:none;line-height:1.2;
  transition:background 180ms;
  appearance:none;-webkit-appearance:none;
}
.btn:hover, a.btn:hover, button.btn:hover{ background:var(--signal) !important; color:var(--bg) !important; }
.btn.ghost, a.btn.ghost, button.btn.ghost{
  background:transparent !important; color:var(--ink) !important;
  border:2px solid var(--ink); padding:10px 20px;
}
.btn.ghost:hover, a.btn.ghost:hover, button.btn.ghost:hover{ background:var(--ink) !important; color:var(--bg) !important; }
.btn::after{content:" ▶";color:var(--signal);}
.btn:hover::after{color:var(--bg);}
.btn.ghost::after{display:none;}
.btn.danger{background:var(--signal) !important;color:var(--bg) !important;}
.btn.danger:hover{background:var(--ink) !important;color:var(--bg) !important;}
.btn.sm{font-size:0.78rem;padding:8px 14px;letter-spacing:0.08em;}
.btn[disabled]{opacity:0.4;cursor:not-allowed;}

/* ─── Cards / Panels ─────────────────────────────────────────────────────── */

.panel{
  background:var(--bg);border:1px solid var(--ink);
  display:flex;flex-direction:column;
}
.panel-head{
  padding:14px 20px;border-bottom:1px solid var(--ink);
  display:flex;justify-content:space-between;align-items:center;gap:14px;
}
.panel-head h2,
.panel-head h3{
  margin:0;
  font-family:var(--font-display);font-weight:900;text-transform:uppercase;
  font-size:1.05rem;letter-spacing:0.02em;color:var(--ink);
}
.panel-head .meta{
  font-family:var(--font-mono);font-weight:700;font-size:0.7rem;
  letter-spacing:0.16em;text-transform:uppercase;color:var(--dim);
}
.panel-body{padding:20px;}
.panel-body.tight{padding:0;}

/* ─── Stat tiles ─────────────────────────────────────────────────────────── */

.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:0;border:1px solid var(--ink);}
.stat-tile{padding:20px;border-right:1px solid var(--ink);}
.stat-tile:last-child{border-right:0;}
.stat-tile .lbl{
  font-family:var(--font-mono);font-weight:700;font-size:0.7rem;
  letter-spacing:0.18em;text-transform:uppercase;color:var(--dim);margin-bottom:8px;
}
.stat-tile .num{
  font-family:var(--font-display);font-weight:900;text-transform:uppercase;
  font-size:clamp(2.2rem,4vw,3rem);line-height:0.9;letter-spacing:-0.015em;
  color:var(--ink);
}
.stat-tile.signal .num{color:var(--signal);}
.stat-tile .delta{
  font-family:var(--font-mono);font-weight:700;font-size:0.72rem;
  letter-spacing:0.08em;text-transform:uppercase;color:var(--dim);margin-top:6px;
}

/* ─── Tables ─────────────────────────────────────────────────────────────── */

.tbl{width:100%;border-collapse:collapse;font-family:var(--font-mono);font-size:0.85rem;}
.tbl thead th{
  text-align:left;padding:12px 16px;
  font-weight:700;font-size:0.7rem;letter-spacing:0.18em;text-transform:uppercase;
  color:var(--dim);background:var(--bg-2);border-bottom:1px solid var(--ink);
}
.tbl tbody td{padding:14px 16px;border-bottom:1px solid var(--hair);color:var(--ink);}
.tbl tbody tr:hover td{background:var(--bg-2);}
.tbl tbody tr:last-child td{border-bottom:0;}
.tbl .num{font-family:var(--font-display);font-weight:900;font-size:1.05rem;letter-spacing:-0.005em;}
.tbl .num.signal{color:var(--signal);}
.tbl .pill{
  display:inline-block;padding:3px 10px;border:1px solid var(--ink);
  font-size:0.65rem;letter-spacing:0.16em;text-transform:uppercase;font-weight:700;
}
.tbl .pill.ok{background:var(--ok-soft);color:var(--ok);border-color:var(--ok);}
.tbl .pill.warn{background:var(--warn-soft);color:var(--warn);border-color:var(--warn);}
.tbl .pill.signal{background:var(--signal-soft);color:var(--signal);border-color:var(--signal);}
.tbl .pill.dim{background:var(--bg-2);color:var(--dim);border-color:var(--dim);}

/* ─── Forms ──────────────────────────────────────────────────────────────── */

.form{display:flex;flex-direction:column;gap:18px;}
.form-row{display:flex;flex-direction:column;gap:6px;}
.form-row.row-2{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.form-row > label,
.form > label{
  font-family:var(--font-mono);font-weight:700;font-size:0.7rem;
  letter-spacing:0.18em;text-transform:uppercase;color:var(--dim);
}
.form input[type=text],
.form input[type=email],
.form input[type=password],
.form input[type=tel],
.form input[type=url],
.form input[type=number],
.form input[type=date],
.form textarea,
.form select{
  width:100%;
  padding:12px 14px;
  background:var(--bg);
  border:1px solid var(--ink);
  border-radius:0;
  font-family:var(--font-mono);font-size:0.92rem;color:var(--ink);
  transition:border-color 120ms,box-shadow 120ms;
}
.form input:focus,
.form textarea:focus,
.form select:focus{
  outline:0;border-color:var(--signal);
  box-shadow:0 0 0 2px var(--signal-soft);
}
.form .help{font-size:0.78rem;color:var(--dim);}
.form .actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding-top:10px;}

/* ─── Alerts / flashes ───────────────────────────────────────────────────── */

.alert{
  padding:12px 16px;border:1px solid var(--ink);
  font-family:var(--font-mono);font-weight:500;font-size:0.85rem;
}
.alert.ok{background:var(--ok-soft);border-color:var(--ok);color:var(--ok);}
.alert.error{background:var(--signal-soft);border-color:var(--signal);color:var(--signal);}
.alert.warn{background:var(--warn-soft);border-color:var(--warn);color:var(--warn);}
.alert b{font-family:var(--font-display);font-weight:900;text-transform:uppercase;letter-spacing:0.08em;margin-right:6px;}

/* ─── Auth pages (login / register / forgot) ────────────────────────────── */

body.ug-auth{
  font-family:var(--font-mono);
  background:var(--bg);color:var(--ink);
  min-height:100vh;display:flex;align-items:center;justify-content:center;padding:32px 20px;
}
.auth-frame{
  width:100%;max-width:440px;
  background:var(--bg);border:3px solid var(--ink);
  padding:36px 32px;
}
.auth-frame .brand{
  font-family:var(--font-display);font-weight:900;
  font-size:2rem;letter-spacing:0.04em;text-transform:uppercase;
  color:var(--ink);margin-bottom:6px;text-align:center;
  display:flex;align-items:center;justify-content:center;gap:8px;
}
.auth-frame .brand b{color:var(--signal);}
.auth-frame .label{
  font-family:var(--font-mono);font-weight:700;font-size:0.7rem;
  letter-spacing:0.18em;text-transform:uppercase;color:var(--signal);
  text-align:center;margin-bottom:24px;
}
.auth-frame h1{
  font-family:var(--font-display);font-weight:900;text-transform:uppercase;
  font-size:clamp(1.8rem,4vw,2.5rem);line-height:0.92;letter-spacing:-0.02em;
  margin:0 0 28px;text-align:center;color:var(--ink);
}
.auth-frame h1 em{font-style:italic;color:var(--signal);}
.auth-frame .alt{
  margin-top:24px;padding-top:20px;border-top:1px solid var(--hair);
  text-align:center;
  font-family:var(--font-mono);font-size:0.78rem;color:var(--dim);
}
.auth-frame .alt a{color:var(--signal);font-weight:700;letter-spacing:0.08em;text-transform:uppercase;font-size:0.72rem;}
.auth-frame .checkbox{
  display:flex;align-items:center;gap:8px;
  font-family:var(--font-mono);font-size:0.78rem;color:var(--ink-soft);
}
.auth-frame .checkbox input{width:16px;height:16px;accent-color:var(--signal);}

/* ─── Mobile ─────────────────────────────────────────────────────────────── */

@media (max-width: 900px){
  .app-shell{grid-template-columns:1fr;}
  .app-shell.sidebar-collapsed{grid-template-columns:1fr;}
  .app-sidebar{
    transform:translateX(-100%);
    transition:transform 220ms ease;
    width:280px;
  }
  .app-shell.sidebar-collapsed .app-sidebar{transform:translateX(-100%);}
  .app-shell.sidebar-collapsed .brand-text,
  .app-shell.sidebar-collapsed .nav-section,
  .app-shell.sidebar-collapsed .nav-label,
  .app-shell.sidebar-collapsed .nav-link .pill,
  .app-shell.sidebar-collapsed .sidebar-foot{display:block;}
  .app-shell.sidebar-collapsed .brand-mark{display:none;}
  .app-shell.sidebar-collapsed .app-sidebar .brand{justify-content:flex-start;padding:18px 20px;}
  .app-shell.sidebar-collapsed .app-sidebar .nav-link{justify-content:flex-start;padding:10px 20px;border-left:3px solid transparent;border-right:0;}
  .app-shell.sidebar-collapsed .app-sidebar .nav-link.active{border-left-color:var(--signal);border-right-color:transparent;}
  .app-sidebar.open{transform:translateX(0);}
  .app-main{margin-left:0;}
  .app-topbar .menu-toggle{display:inline-flex;}
  .form-row.row-2{grid-template-columns:1fr;}
  .stat-tile{border-right:0;border-bottom:1px solid var(--ink);}
  .stat-tile:last-child{border-bottom:0;}
  .page-head{flex-direction:column;align-items:flex-start;}
}
.app-topbar .menu-toggle{
  display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;background:var(--ink);color:var(--bg);
  border:0;cursor:pointer;font-family:var(--font-display);font-weight:900;
  font-size:1.2rem;
}

/* ─── Admin / Dashboard layout primitives ───────────────────────────────── */

.admin-grid{
  display:grid;grid-template-columns:2fr 1fr;gap:24px;
}
@media (max-width: 1100px){ .admin-grid{grid-template-columns:1fr;} }

.filter-row{
  display:grid;grid-template-columns:1fr 180px 180px auto;gap:10px;
  margin-bottom:0;
}
@media (max-width: 720px){ .filter-row{grid-template-columns:1fr;} }
.filter-row input,
.filter-row select{
  padding:10px 12px;background:var(--bg);border:1px solid var(--ink);
  font-family:var(--font-mono);font-size:0.85rem;color:var(--ink);
}

.activity-list{list-style:none;margin:0;padding:0;}
.activity-list li{
  display:grid;grid-template-columns:1fr auto;gap:4px 14px;
  padding:14px 20px;border-bottom:1px solid var(--hair);
}
.activity-list li:last-child{border-bottom:0;}
.activity-list .ev-action{
  font-family:var(--font-display);font-weight:900;text-transform:uppercase;
  font-size:0.92rem;letter-spacing:0.04em;color:var(--ink);
}
.activity-list .ev-meta{
  font-family:var(--font-mono);font-size:0.74rem;letter-spacing:0.06em;
  color:var(--dim);
}
.activity-list .ev-time{
  font-family:var(--font-mono);font-size:0.7rem;letter-spacing:0.12em;
  text-transform:uppercase;color:var(--dim);text-align:right;
  grid-row:1 / span 2;align-self:start;
}

.dl-grid{
  display:grid;grid-template-columns:max-content 1fr;gap:14px 24px;
  font-family:var(--font-mono);
}
.dl-grid dt{
  font-weight:700;font-size:0.7rem;letter-spacing:0.18em;text-transform:uppercase;
  color:var(--dim);align-self:center;
}
.dl-grid dd{margin:0;color:var(--ink);font-size:0.92rem;}

.empty-frame{
  border:3px dashed var(--ink);padding:48px 24px;text-align:center;
}
.empty-frame .glyph{
  font-family:var(--font-display);font-weight:900;font-size:2.4rem;
  color:var(--signal);letter-spacing:0.08em;margin-bottom:12px;
}
.empty-frame h3{
  margin:0 0 8px;font-family:var(--font-display);font-weight:900;
  text-transform:uppercase;letter-spacing:0.02em;font-size:1.4rem;color:var(--ink);
}
.empty-frame p{
  margin:0;font-family:var(--font-mono);color:var(--dim);font-size:0.85rem;
}

/* ─── Modal ──────────────────────────────────────────────────────────────── */

.modal-shroud{
  display:none;position:fixed;inset:0;z-index:80;
  background:rgba(20,20,18,0.55);
  align-items:flex-start;justify-content:center;
  padding:48px 20px;overflow-y:auto;
}
.modal-shroud.open{display:flex;}
.modal-frame{
  width:100%;max-width:520px;background:var(--bg);
  border:3px solid var(--ink);
}
.modal-frame .panel-head{padding:14px 20px;border-bottom:3px solid var(--ink);}

/* ─── Reduced motion ─────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{transition-duration:0.001ms !important;}
}