/* ============================================================================
   Woodlawn Ministry Tools — Design System
   EventManager admin styles. Tokens and components mirror the canonical spec
   (see woodlawn-design-system.md).
   ============================================================================ */

:root{
  /* ---------- Surfaces — darker as you nest deeper ---------- */
  --bg:          #0a0a0a;
  --surface-1:   #111111;     /* sticky headers, top nav */
  --surface-2:   #161616;     /* cards */
  --surface-3:   #1d1d1d;     /* nested surfaces, segmented controls */
  --elevated:    #1a1a1a;     /* modals, popovers */

  /* ---------- Borders — three weights, alpha over surface ---------- */
  --border-1:    rgba(255,255,255,.06);
  --border-2:    rgba(255,255,255,.10);
  --border-3:    rgba(255,255,255,.16);

  /* ---------- Text — four steps ---------- */
  --text:        #f0f0f0;
  --text-soft:   #b8b8b8;
  --muted:       #7a7a7a;
  --muted-2:     #555555;

  /* ---------- Brand ---------- */
  --accent:        #52c1af;
  --accent-soft:   rgba(82,193,175,.14);
  --accent-strong: #3aa896;

  /* ---------- Secondary accents — semantic, not decorative ---------- */
  --orange: #f39c4c;   --orange-soft: rgba(243,156,76,.14);
  --purple: #a06cf0;   --purple-soft: rgba(160,108,240,.14);
  --pink:   #f06d9e;   --pink-soft:   rgba(240,109,158,.14);
  --yellow: #ffc832;   --yellow-soft: rgba(255,200,50,.14);
  --blue:   #5d9cec;   --blue-soft:   rgba(93,156,236,.14);

  /* ---------- States ---------- */
  --danger:  #ff5252;  --danger-soft:  rgba(255,82,82,.14);
  --success: #4caf76;  --success-soft: rgba(76,175,118,.08);
  --warning: #f5a623;

  /* ---------- Typography ---------- */
  --font-sans:    'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --font-display: 'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --font-mono:    'JetBrains Mono','DM Mono',ui-monospace,monospace;

  /* ---------- Spacing scale (8-pt with 4px half-step) ---------- */
  --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 24px;  --s-6: 32px;  --s-7: 48px;  --s-8: 64px;

  /* ---------- Radii ---------- */
  --r-sm: 6px;     --r-md: 10px;    --r-lg: 14px;    --r-xl: 20px;

  /* ---------- Shadows (use sparingly; default is no shadow) ---------- */
  --shadow-1: 0 1px 2px rgba(0,0,0,.3);
  --shadow-2: 0 4px 12px rgba(0,0,0,.35);
  --shadow-3: 0 10px 32px rgba(0,0,0,.45);

  /* ---------- Aliases for older inline references (will be migrated out) ---------- */
  --paper: var(--surface-2);
  --nav-bg: var(--surface-1);
  --ink: var(--text);
  --ink-soft: var(--text-soft);
  --line: var(--border-1);
  --line-strong: var(--border-2);
  --tint: var(--surface-1);
  --tint2: var(--surface-3);
  --teal: var(--accent);
  --teal-soft: var(--accent-soft);
  --teal-deep: var(--accent-strong);
  --ok: var(--success);     --ok-bg: var(--success-soft);
  --warn: var(--warning);   --warn-bg: rgba(245,166,35,.14);
  --bad: var(--danger);     --bad-bg: var(--danger-soft);
  --info: var(--blue);      --info-bg: var(--blue-soft);
  --shadow: var(--shadow-1);
  --r: var(--r-md);
}

/* ============================================================================
   Base
   ============================================================================ */
*{box-sizing:border-box;margin:0;padding:0}
body{
  font-family:var(--font-sans);
  font-size:14px;
  line-height:1.5;
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-weight:700;letter-spacing:-.01em}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
.hidden{display:none!important}

/* ============================================================================
   Top nav — 64px sticky, full-width
   ============================================================================ */
.topnav{position:sticky;top:0;z-index:30;background:var(--surface-1);border-bottom:1px solid var(--border-1)}
.topnav-inner{display:flex;align-items:center;gap:var(--s-5);padding:var(--s-3) var(--s-5);width:100%;min-height:64px}
.brand{display:flex;align-items:center;gap:var(--s-2);flex-shrink:0;color:var(--muted-2);font-size:1.05rem;font-weight:800}
.brand-name{font-family:var(--font-display);color:var(--accent);font-size:1.05rem;letter-spacing:-.01em;text-transform:uppercase;font-weight:800}
.brand-sep{color:var(--muted-2);font-weight:800}
.brand-page{color:var(--text-soft);font-weight:600;font-size:1.05rem}
.topnav-links{display:flex;align-items:center;gap:2px;margin:0 auto}
.topnav-item{padding:6px var(--s-4);border-radius:var(--r-md);font-size:.875rem;font-weight:600;color:var(--text-soft);transition:.15s;line-height:1.4}
.topnav-item:hover{color:var(--text);background:rgba(255,255,255,.04)}
.topnav-item.active{color:var(--accent);background:var(--surface-3)}
.topnav-right{display:flex;align-items:center;gap:var(--s-3);flex-shrink:0}
.hi{font-size:.875rem;color:var(--text-soft)} .hi b{color:var(--text);font-weight:700}
.btn-signout{padding:6px var(--s-3);border:1px solid var(--border-2);border-radius:var(--r-md);font-size:.825rem;font-weight:600;color:var(--text);transition:.15s}
.btn-signout:hover{border-color:var(--border-3);background:rgba(255,255,255,.04)}
.nav-toggle{display:none;margin-left:auto;width:38px;height:38px;border-radius:var(--r-md);border:1px solid var(--border-2);background:var(--surface-2);align-items:center;justify-content:center;color:var(--text)}

/* Content area — centered, max-width 1280, padded */
.content{max-width:1280px;margin:0 auto;padding:var(--s-6) var(--s-5) var(--s-7);width:100%}

/* ============================================================================
   Page header
   ============================================================================ */
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s-4);margin-bottom:var(--s-5);flex-wrap:wrap}
.page-head h1{font-size:1.75rem;font-weight:800;letter-spacing:-.02em;line-height:1.1}
.page-head .sub{color:var(--muted);font-size:.9rem;margin-top:6px}

/* ============================================================================
   Buttons — three tiers, three sizes (38/32/48)
   ============================================================================ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);
  height:38px;padding:0 var(--s-4);
  border:1px solid transparent;border-radius:var(--r-md);
  font-family:var(--font-sans);font-size:.875rem;font-weight:600;
  transition:background .15s,border-color .15s,color .15s;
  cursor:pointer;white-space:nowrap;
}
.btn:active{transform:scale(.98)}
.btn svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;flex-shrink:0}

.btn.primary,.btn.accent{background:var(--accent);color:#0a0a0a}
.btn.primary:hover,.btn.accent:hover{background:var(--accent-strong)}

.btn.ghost{background:transparent;color:var(--text);border-color:var(--border-2)}
.btn.ghost:hover{border-color:var(--border-3);background:rgba(255,255,255,.04)}

.btn.danger{background:var(--danger-soft);color:var(--danger);border-color:rgba(255,82,82,.2)}
.btn.danger:hover{background:var(--danger);color:#fff;border-color:var(--danger)}

.btn.sm{height:32px;padding:0 var(--s-3);font-size:.8rem}
.btn.lg{height:48px;padding:0 var(--s-5);font-size:.95rem}

/* Uppercase tonal variant used inside settings forms */
.btn.primary-up{background:var(--accent);color:#0a0a0a;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.btn.primary-up:hover{background:var(--accent-strong)}

/* ============================================================================
   Cards (with optional accent stripe via data-accent)
   ============================================================================ */
.card{
  background:var(--surface-2);
  border:1px solid var(--border-1);
  border-radius:var(--r-lg);
}
.card-pad{padding:var(--s-5)}

/* Stripe cards */
.card[data-accent],
.stat-card{position:relative;overflow:hidden}
.card[data-accent]::before,
.stat-card::before{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:var(--accent);
}
.card[data-accent="teal"]::before  { background:var(--accent) }
.card[data-accent="orange"]::before{ background:var(--orange) }
.card[data-accent="purple"]::before{ background:var(--purple) }
.card[data-accent="pink"]::before  { background:var(--pink) }
.card[data-accent="yellow"]::before{ background:var(--yellow) }
.card[data-accent="blue"]::before  { background:var(--blue) }
.card[data-accent="danger"]::before{ background:var(--danger) }

/* Stat card — the signature dashboard pattern */
.stat-card{
  background:var(--surface-2);
  border:1px solid var(--border-1);
  border-radius:var(--r-lg);
  padding:var(--s-5);
}
.stat-card .eyebrow{
  font-size:.7rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--text-soft);
}
.stat-card .big{
  font-family:var(--font-display);
  font-weight:800;font-size:2.75rem;line-height:1;letter-spacing:-.03em;
  margin-top:var(--s-3);color:var(--text);
}
.stat-card .big small{font-weight:600;font-size:1.25rem;color:var(--muted);margin-left:2px;letter-spacing:0}
.stat-card .sub{font-size:.8rem;color:var(--muted);margin-top:var(--s-2)}
.stat-card .link{
  display:inline-block;margin-top:var(--s-4);
  font-size:.825rem;font-weight:600;color:var(--accent);
}
.stat-card .link:hover{color:var(--accent-strong)}
/* legacy data-accent target alias (old code uses class names) */
.accent-teal::before, .stat-card.accent-teal::before { background:var(--accent) }
.accent-orange::before, .stat-card.accent-orange::before { background:var(--orange) }
.accent-blue::before, .stat-card.accent-blue::before { background:var(--blue) }
.accent-purple::before, .stat-card.accent-purple::before { background:var(--purple) }
.accent-red::before, .stat-card.accent-red::before { background:var(--danger) }
.accent-yellow::before, .stat-card.accent-yellow::before { background:var(--yellow) }

/* ============================================================================
   Pills / badges — data-color drives the tint
   ============================================================================ */
.pill{
  display:inline-flex;align-items:center;gap:var(--s-1);
  padding:3px 9px;border-radius:var(--r-sm);
  font-size:.7rem;font-weight:700;letter-spacing:.03em;
  text-transform:uppercase;line-height:1.4;
}
.pill[data-color="teal"],   .pill.ok    { background:var(--accent-soft); color:var(--accent) }
.pill[data-color="orange"], .pill.warn  { background:var(--orange-soft); color:var(--orange) }
.pill[data-color="purple"]              { background:var(--purple-soft); color:var(--purple) }
.pill[data-color="pink"]                { background:var(--pink-soft);   color:var(--pink) }
.pill[data-color="yellow"]              { background:var(--yellow-soft); color:var(--yellow) }
.pill[data-color="blue"],   .pill.info  { background:var(--blue-soft);   color:var(--blue) }
.pill[data-color="danger"], .pill.bad   { background:var(--danger-soft); color:var(--danger) }
.pill[data-color="muted"],  .pill.muted { background:var(--surface-3);   color:var(--text-soft) }

/* Type badges (slightly larger, for event-type chips on cards) */
.type-badge{
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 11px;border-radius:var(--r-sm);
  font-size:.7rem;font-weight:700;letter-spacing:.03em;text-transform:uppercase;
}
.t-overnight,.type-badge.t-overnight{background:var(--purple-soft);color:var(--purple)}
.t-daytrip, .type-badge.t-daytrip {background:var(--accent-soft); color:var(--accent)}
.t-meetup,  .type-badge.t-meetup  {background:var(--yellow-soft); color:var(--yellow)}
.t-summer,  .type-badge.t-summer  {background:var(--orange-soft); color:var(--orange)}

/* ============================================================================
   Filter tabs / view toggles (pill style, non-tab navigation)
   ============================================================================ */
.filter-tabs{display:flex;gap:var(--s-2);flex-wrap:wrap}
.filter-tabs a{
  padding:7px 14px;border-radius:var(--r-md);
  font-size:.825rem;font-weight:600;
  background:var(--surface-2);border:1px solid var(--border-1);color:var(--text-soft);transition:.15s;
}
.filter-tabs a:hover{border-color:var(--border-3);color:var(--text)}
.filter-tabs a.active{background:var(--surface-3);border-color:var(--border-2);color:var(--accent)}

/* ============================================================================
   Event cards (cards grid)
   ============================================================================ */
.event-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:var(--s-4)}
.event-card{
  padding:0;overflow:hidden;display:flex;flex-direction:column;position:relative;
  background:var(--surface-2);border:1px solid var(--border-1);border-radius:var(--r-lg);
  transition:transform .15s,border-color .15s;
}
.event-card::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--accent);z-index:1}
.event-card[data-type="overnight"]::before{background:var(--purple)}
.event-card[data-type="daytrip"]::before{background:var(--accent)}
.event-card[data-type="meetup"]::before{background:var(--yellow)}
.event-card[data-type="summer"]::before{background:var(--orange)}
.event-card:hover{transform:translateY(-1px);border-color:var(--border-3)}
.ec-top{padding:var(--s-4) var(--s-4) var(--s-3);border-bottom:1px solid var(--border-1)}
.ec-top .when{font-size:.7rem;color:var(--text-soft);font-weight:700;letter-spacing:.04em;text-transform:uppercase;margin:var(--s-3) 0 5px}
.ec-top h3{font-size:1.05rem;line-height:1.2;font-weight:700;letter-spacing:-.01em}
.ec-top .loc{font-size:.8rem;color:var(--muted);margin-top:4px}
.ec-body{padding:var(--s-3) var(--s-4);display:flex;gap:var(--s-4)}
.ec-body .blk .k{font-size:.7rem;color:var(--text-soft);font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.ec-body .blk .v{font-weight:800;font-size:1.05rem;margin-top:3px;font-family:var(--font-display)}
.ec-foot{
  margin-top:auto;padding:var(--s-3) var(--s-4);
  background:var(--surface-1);
  display:flex;align-items:center;gap:var(--s-2);
  border-top:1px solid var(--border-1);
}

.icon-btn{
  width:32px;height:32px;border-radius:var(--r-md);
  border:1px solid var(--border-2);background:transparent;
  display:inline-flex;align-items:center;justify-content:center;transition:.15s;
}
.icon-btn svg{width:15px;height:15px;stroke:var(--text-soft);fill:none;stroke-width:2}
.icon-btn:hover{border-color:var(--border-3);background:rgba(255,255,255,.04)}
.icon-btn:hover svg{stroke:var(--text)}

/* ============================================================================
   Tables (data lists)
   ============================================================================ */
.tbl-wrap{overflow-x:auto}
table.data{width:100%;border-collapse:collapse;font-size:.875rem;min-width:560px}
table.data th{
  text-align:left;padding:var(--s-3) var(--s-3);
  font-size:.7rem;text-transform:uppercase;letter-spacing:.05em;
  color:var(--text-soft);font-weight:700;
  border-bottom:1px solid var(--border-1);white-space:nowrap;
}
table.data td{padding:var(--s-3);border-bottom:1px solid var(--border-1)}
table.data tr:last-child td{border-bottom:none}
table.data tbody tr:hover{background:rgba(255,255,255,.02)}
.stu{display:flex;align-items:center;gap:var(--s-3)}
.stu .av{
  width:32px;height:32px;border-radius:50%;
  background:var(--accent-soft);color:var(--accent);
  display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:.75rem;flex-shrink:0;
}
.size-tag{
  display:inline-block;min-width:30px;text-align:center;
  padding:3px var(--s-2);border-radius:var(--r-sm);
  background:var(--surface-3);font-weight:700;font-size:.75rem;
}

/* ============================================================================
   Form fields — 38px height, surface-1 bg, border-2
   ============================================================================ */
.fieldset{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s-4) var(--s-5)}
.fld{display:flex;flex-direction:column}
.fld.full{grid-column:1/-1}
.fld label{
  font-size:.78rem;font-weight:600;color:var(--text-soft);
  margin-bottom:var(--s-2);
}
.fld .hint{font-size:.75rem;color:var(--muted);margin-top:6px}
.fld input,.fld select,.fld textarea{
  font-family:var(--font-sans);font-size:.875rem;color:var(--text);
  background:var(--surface-1);
  border:1px solid var(--border-2);
  border-radius:var(--r-md);
  padding:0 var(--s-3);height:38px;
  transition:border-color .15s,background .15s;
}
.fld textarea{height:auto;min-height:80px;padding:10px var(--s-3);line-height:1.5}
.fld input:hover,.fld select:hover,.fld textarea:hover{border-color:var(--border-3)}
.fld input:focus,.fld select:focus,.fld textarea:focus{
  outline:none;border-color:var(--accent);background:var(--surface-2);
}
@media(max-width:600px){
  .fld input,.fld select,.fld textarea{font-size:16px} /* prevent iOS zoom */
}

/* ============================================================================
   Alerts (flash messages)
   ============================================================================ */
.flash{
  padding:var(--s-3) var(--s-4);
  border-radius:var(--r-md);
  margin-bottom:var(--s-4);
  font-size:.875rem;
  border:1px solid transparent;
}
.flash.ok{background:var(--success-soft);color:var(--success);border-color:rgba(76,175,118,.2)}
.flash.err{background:var(--danger-soft);color:var(--danger);border-color:rgba(255,82,82,.2)}
.flash.info{background:var(--accent-soft);color:var(--accent);border-color:rgba(82,193,175,.2)}

.empty{padding:var(--s-7) var(--s-5);text-align:center;color:var(--muted)}

/* ============================================================================
   Danger zone — destructive actions at bottom of edit forms
   ============================================================================ */
.danger-zone{
  margin-top:var(--s-6);padding-top:var(--s-5);
  border-top:1px solid rgba(255,82,82,.2);
}
.danger-zone-label{
  font-size:.7rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--danger);margin-bottom:var(--s-3);
}

/* ============================================================================
   Settings: pill tab bar + big card
   ============================================================================ */
.pilltabs{
  display:inline-flex;background:var(--surface-1);
  border:1px solid var(--border-1);border-radius:var(--r-lg);
  padding:5px;gap:2px;margin-bottom:var(--s-5);
}
.pilltabs a{
  padding:8px var(--s-4);border-radius:var(--r-md);
  font-size:.7rem;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--text-soft);transition:.15s;
}
.pilltabs a:hover{color:var(--text)}
.pilltabs a.active{background:var(--accent);color:#0a0a0a}

.bigcard{
  background:var(--surface-2);border:1px solid var(--border-1);
  border-radius:var(--r-lg);padding:var(--s-6) var(--s-6);
}
.bigcard .sec{margin-bottom:var(--s-6)}
.bigcard .sec:last-child{margin-bottom:0}
.bigcard .sec+.sec{padding-top:var(--s-6);border-top:1px solid var(--border-1)}

.eyebrow-h{
  font-size:.7rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--text);
  margin-bottom:var(--s-3);padding-bottom:var(--s-3);
  border-bottom:1px solid var(--border-1);
}
.eyebrow-h.no-rule{border-bottom:0;padding-bottom:0;margin-bottom:var(--s-2)}
.eyebrow-h-soft{font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-soft);margin-bottom:var(--s-2)}
.help-text{color:var(--text-soft);font-size:.875rem;line-height:1.6;margin-bottom:var(--s-4);max-width:680px}

/* Three-up info tiles */
.tilerow{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-3);margin-bottom:6px}
.tilerow .tile{
  background:var(--surface-3);border:1px solid var(--border-1);
  border-radius:var(--r-md);padding:var(--s-4);
}
.tilerow .tile .k{
  font-size:.7rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--text-soft);margin-bottom:var(--s-3);
}
.tilerow .tile .v{
  font-family:var(--font-display);font-weight:800;
  font-size:1.75rem;color:var(--accent);
  line-height:1;letter-spacing:-.02em;
}
.tilerow .tile .v small{font-family:var(--font-display);font-size:.85rem;color:var(--text-soft);font-weight:600;margin-left:3px;letter-spacing:0}
@media(max-width:760px){.tilerow{grid-template-columns:1fr}}

/* ============================================================================
   Event detail page
   ============================================================================ */
.back-link{
  display:inline-flex;align-items:center;gap:6px;
  color:var(--text-soft);font-size:.825rem;font-weight:600;
  margin-bottom:var(--s-3);
}
.back-link:hover{color:var(--text)}
.detail-hero{
  padding:var(--s-5);margin-bottom:var(--s-5);
  display:flex;justify-content:space-between;gap:var(--s-5);flex-wrap:wrap;
}
.detail-hero h1{font-size:1.5rem;margin:var(--s-3) 0 6px;font-weight:800;letter-spacing:-.02em}
.detail-hero .hmeta{display:flex;gap:var(--s-4);color:var(--text-soft);font-size:.825rem;flex-wrap:wrap}

.tabs{display:flex;gap:2px;border-bottom:1px solid var(--border-1);margin-bottom:var(--s-5);overflow-x:auto}
.tabs a{
  padding:var(--s-3) var(--s-4);font-size:.875rem;font-weight:600;
  color:var(--text-soft);border-bottom:2px solid transparent;white-space:nowrap;transition:.15s;
}
.tabs a:hover{color:var(--text)}
.tabs a.active{color:var(--text);border-color:var(--accent)}

.summary-grid{display:flex;gap:var(--s-4);flex-wrap:wrap;margin-bottom:var(--s-4)}
.grp-label{font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-soft);margin-bottom:var(--s-2)}
.summary-strip{display:flex;gap:var(--s-3);flex-wrap:wrap;padding:var(--s-4);background:var(--surface-1);border-radius:var(--r-md);border:1px solid var(--border-1)}
.summary-strip .box{background:var(--surface-2);border:1px solid var(--border-1);border-radius:var(--r-md);padding:var(--s-3) var(--s-4);min-width:84px}
.summary-strip .box .k{font-size:.7rem;color:var(--text-soft);font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.summary-strip .box .v{font-family:var(--font-display);font-weight:800;font-size:1.4rem;margin-top:3px}
.allergy{color:var(--danger);font-weight:600;font-size:.8rem}

/* ============================================================================
   Responsive
   ============================================================================ */
@media(max-width:860px){
  .nav-toggle{display:flex}
  .topnav-links{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:2px;background:var(--surface-1);border-bottom:1px solid var(--border-1);padding:var(--s-2) var(--s-4) var(--s-3);margin:0}
  .topnav-links.open{display:flex}
  .topnav-item{padding:var(--s-3)}
  .topnav-right .hi{display:none}
  .content{padding:var(--s-5) var(--s-4) var(--s-7)}
  .fieldset{grid-template-columns:1fr}
}

/* ============================================================================
   Waffle launcher (cross-tool menu)
   ============================================================================ */
.waffle{position:relative;display:inline-block}
.waffle-trigger{
    display:inline-flex;align-items:center;justify-content:center;
    width:38px;height:38px;background:transparent;
    border:1px solid var(--border-2);border-radius:var(--r-md);
    color:var(--text-soft);cursor:pointer;
    transition:background .12s,border-color .12s,color .12s;
}
.waffle-trigger:hover{background:var(--surface-2);border-color:var(--border-3);color:var(--text)}
.waffle-popover{
    position:absolute;top:calc(100% + 6px);right:0;z-index:100;
    width:min(540px,calc(100vw - 32px));
    background:var(--surface-2);border:1px solid var(--border-2);
    border-radius:var(--r-lg);box-shadow:0 18px 48px rgba(0,0,0,.55);
    padding:var(--s-4);
}
.waffle-header{
    font-size:.7rem;font-weight:700;letter-spacing:.05em;
    text-transform:uppercase;color:var(--text-soft);
    padding-bottom:var(--s-3);border-bottom:1px solid var(--border-1);
    margin-bottom:var(--s-3);
}
.waffle-empty{padding:var(--s-4);color:var(--muted);font-size:.85rem;text-align:center}
.waffle-grid{
    display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-3);
}
@media(max-width:640px){.waffle-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:420px){.waffle-grid{grid-template-columns:1fr}}
.waffle-tile{
    position:relative;display:flex;flex-direction:column;gap:6px;
    padding:var(--s-3);background:var(--surface-3);
    border:1px solid var(--border-1);border-radius:var(--r-md);
    color:var(--text);text-decoration:none;
    transition:border-color .12s,background .12s,transform .12s;
}
.waffle-tile:hover{border-color:var(--border-3);background:var(--elevated);transform:translateY(-1px)}
.waffle-tile.is-current{background:var(--accent-soft);border-color:var(--accent)}
.waffle-icon{
    display:inline-flex;align-items:center;justify-content:center;
    width:34px;height:34px;border-radius:var(--r-sm);
    font-size:1.1rem;line-height:1;
}
.waffle-name{font-size:.9rem;font-weight:700;color:var(--text)}
.waffle-desc{font-size:.78rem;color:var(--muted);line-height:1.4;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.waffle-current{
    position:absolute;top:8px;right:8px;
    font-size:.6rem;font-weight:800;letter-spacing:.06em;
    background:var(--accent);color:#0a0a0a;
    padding:2px 6px;border-radius:4px;
}

.topnav-right .hi{color:var(--text-soft);text-decoration:none;font-size:.85rem;padding:6px 10px;border-radius:var(--r-sm)}
.topnav-right .hi:hover{color:var(--text);background:var(--surface-2)}
.topnav-right .hi b{color:var(--text);font-weight:700}

/* ============================================================================
   Login / change-password pages
   ============================================================================ */
.login-body{background:var(--bg);min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}
.login-shell{width:100%;max-width:420px}
.login-card{
    background:var(--surface-2);border:1px solid var(--border-1);
    border-radius:var(--r-lg);padding:36px 32px;
    box-shadow:0 18px 48px rgba(0,0,0,.5);
}
.login-card h1.brand{
    text-align:center;font-size:1.5rem;font-weight:800;letter-spacing:-.02em;
    color:var(--text);margin:0 0 4px;
}
.login-card h1.brand span{color:var(--accent)}
.login-card .brand-sub{
    text-align:center;color:var(--muted);
    font-size:.85rem;margin:0 0 24px;
}
.login-card label{
    display:block;margin:14px 0 6px;
    font-size:.78rem;font-weight:600;color:var(--text-soft);
    text-transform:uppercase;letter-spacing:.04em;
}
.login-card input[type=text],.login-card input[type=password],.login-card input[type=email]{
    width:100%;height:42px;padding:0 12px;
    background:var(--surface-1);border:1px solid var(--border-2);
    border-radius:var(--r-md);color:var(--text);font-family:inherit;font-size:14px;
    transition:border-color .15s;
}
.login-card input:focus{outline:none;border-color:var(--accent);background:var(--surface-2)}
.login-card button[type=submit]{
    width:100%;height:44px;margin-top:22px;
    background:var(--accent);color:#0a0a0a;
    border:none;border-radius:var(--r-md);
    font-weight:700;font-size:.95rem;cursor:pointer;
    transition:background .15s;
}
.login-card button[type=submit]:hover{background:#3aa896}
.login-card .alert{padding:11px 14px;border-radius:var(--r-md);margin-bottom:18px;font-size:.85rem;border:1px solid}
.login-card .alert.error{background:var(--danger-soft);border-color:rgba(255,82,82,.4);color:var(--danger)}
.login-card .alert.ok{background:rgba(76,175,118,.14);border-color:rgba(76,175,118,.4);color:var(--success)}
.login-card .login-foot{margin-top:18px;text-align:center;color:var(--muted);font-size:.8rem}
.login-card .login-foot a{color:var(--accent);text-decoration:none}
.login-card .login-foot a:hover{text-decoration:underline}

/* ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   ┃ SHARED AUTH SETTINGS PARTIALS — styles for the four cross-tool
   ┃ Settings sub-tabs (Users / Roles / Tools / Audit log).
   ┃ Lifted verbatim from CheckIn admin.css; both stylesheets use the
   ┃ same Woodlawn design tokens so the rules slot in cleanly.
   ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* ╔══════════════════════════════════════════════════════════════════
   ║ Alert  (lines 328–372 from CheckIn admin.css)
   ╚══════════════════════════════════════════════════════════════════ */
.alert {
    padding: var(--s-3) var(--s-4);
    border-radius: var(--r-md);
    margin-bottom: var(--s-5);
    border: 1px solid var(--border-2);
    background: var(--surface-2);
    font-size: 0.875rem;
}
.alert.ok    { border-color: rgba(76,175,118,.4); background: var(--success-soft); color: var(--success); }
.alert.error { border-color: rgba(255,82,82,.4); background: var(--danger-soft);  color: var(--danger); }

.page-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: var(--s-3);
    margin: 0 0 var(--s-6);
}
.page-head h1 {
    font-size: 1.75rem;
    margin: 0 0 var(--s-1);
    letter-spacing: -0.02em;
    line-height: 1.1;
    font-weight: 800;
}
.page-head h1 .small {
    font-size: 0.5em;
    font-weight: 600;
    margin-right: var(--s-2);
    color: var(--text-soft);
    letter-spacing: 0;
}
.page-head .page-sub {
    color: var(--muted);
    font-size: 0.9rem;
    margin: 0;
}
.page-head-actions {
    display: flex;
    gap: var(--s-2);
    flex-wrap: wrap;
    align-items: center;
}


/* ╔══════════════════════════════════════════════════════════════════
   ║ Panel  (lines 451–469 from CheckIn admin.css)
   ╚══════════════════════════════════════════════════════════════════ */
.panel {
    background: var(--surface-2);
    border: 1px solid var(--border-1);
    border-radius: var(--r-lg);
    padding: var(--s-5);
    margin-bottom: var(--s-5);
}
.panel h2 {
    margin: 0 0 var(--s-4);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--text);
    border-bottom: 1px solid var(--border-1);
    padding-bottom: var(--s-3);
    text-transform: none;
}
.panel h2 .muted { text-transform: none; letter-spacing: 0; font-weight: 400; font-size: 0.85rem; color: var(--muted); }


/* ╔══════════════════════════════════════════════════════════════════
   ║ Buttons  (lines 570–682 from CheckIn admin.css)
   ╚══════════════════════════════════════════════════════════════════ */
/* ─── Buttons (Woodlawn §7) ─────────────────────────────────────
   Three tiers, three sizes. Standard 38px, small 32px, large 48px.
   font-weight 600, .85rem, --r-md radius, regular case (not upper). */

.btn-primary {
    background: var(--accent);
    color: #0a0a0a;
    border: none;
    padding: 0 var(--s-4);
    height: 38px;
    border-radius: var(--r-md);
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    text-transform: none;
    letter-spacing: 0;
    transition: background 0.15s, transform 0.05s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--s-2);
    text-decoration: none;
}

.btn-primary:hover { background: var(--accent-strong); color: #0a0a0a; }

.btn-primary:active { transform: scale(0.98); }

.btn-ghost {
    /* The workhorse — use this for almost everything */
    background: transparent;
    color: var(--text);
    border: 1px solid var(--border-2);
    height: 38px;
    padding: 0 var(--s-4);
    border-radius: var(--r-md);
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    text-decoration: none;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.btn-ghost:hover {
    background: var(--surface-3);
    border-color: var(--border-3);
    color: var(--text);
}

.btn-danger {
    background: var(--danger-soft);
    color: var(--danger);
    border: 1px solid rgba(255,82,82,.3);
    height: 38px;
    padding: 0 var(--s-4);
    border-radius: var(--r-md);
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
}
.btn-danger:hover { background: var(--danger); color: #0a0a0a; }

/* Size variants */
.btn-sm { height: 32px; padding: 0 var(--s-3); font-size: 0.8rem; }
.btn-lg { height: 48px; padding: 0 var(--s-5); font-size: 0.95rem; }

/* Link-style buttons (delete row, etc) — no background pill */
button.link-btn,
.link-btn {
    background: none;
    color: var(--accent);
    padding: var(--s-1) var(--s-2);
    border: none;
    height: auto;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
}
button.link-btn:hover,
.link-btn:hover { background: var(--accent-soft); color: var(--accent); }
button.link-btn.danger,
.link-btn.danger { color: var(--danger); }
button.link-btn.danger:hover,
.link-btn.danger:hover { background: var(--danger-soft); color: var(--danger); }

.row-edit {
    background: transparent;
    padding: var(--s-1) var(--s-3);
    border-radius: var(--r-sm);
    font-size: 0.8rem;
    color: var(--accent);
    border: 1px solid var(--border-2);
    text-decoration: none;
    font-weight: 600;
}
.row-edit:hover { background: var(--surface-3); color: var(--accent-strong); }


/* ╔══════════════════════════════════════════════════════════════════
   ║ Form grid  (lines 683–730 from CheckIn admin.css)
   ╚══════════════════════════════════════════════════════════════════ */
/* ─── Form grid (for student edit, custom fields, etc) ──────── */
.form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--s-4);
}
.form-grid label {
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
    color: var(--text-soft);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
}
.form-grid label.span-2 { grid-column: span 2; }
.form-grid input, .form-grid select, .form-grid textarea {
    text-transform: none;
    font-size: 0.875rem;
    color: var(--text);
    letter-spacing: 0;
    font-weight: 400;
}

@media (max-width: 600px) {
    .form-grid { grid-template-columns: 1fr; }
    .form-grid label.span-2 { grid-column: span 1; }
}

.form-actions {
    display: flex; gap: var(--s-2); align-items: center;
    margin: var(--s-5) 0 var(--s-6); flex-wrap: wrap;
}

/* ─── Guardian rows in admin ─────────────────────────────────── */
.guardian-row {
    padding: 14px;
    border: 1px solid var(--border-1);
    border-radius: 8px;
    margin-bottom: 10px;
    background: var(--surface-3);
}
.guardian-row .remove-guardian {
    margin-top: 8px;
}
#add-guardian-admin { margin-top: 6px; }


/* ╔══════════════════════════════════════════════════════════════════
   ║ Filter bar  (lines 731–745 from CheckIn admin.css)
   ╚══════════════════════════════════════════════════════════════════ */
/* ─── Filter bar ─────────────────────────────────────────────── */
.filter-bar {
    background: var(--surface-2);
    border: 1px solid var(--border-1);
    border-radius: var(--r-md);
    padding: 12px 14px;
    margin-bottom: 16px;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}
.filter-bar input[type=search] { flex: 1; min-width: 200px; }
.filter-bar select { flex: 0 0 140px; }


/* ╔══════════════════════════════════════════════════════════════════
   ║ Pills + badges  (lines 780–826 from CheckIn admin.css)
   ╚══════════════════════════════════════════════════════════════════ */
/* ─── Pills + badges (Woodlawn §7) ──────────────────────────────
   Pills are the spec-compliant component: <span class="pill" data-color="…">
   The legacy .badge classes are kept as aliases since they're already in
   use across many pages. They render the same way. */

.pill, .badge {
    display: inline-flex;
    align-items: center;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 3px var(--s-2);
    border-radius: var(--r-sm);
    letter-spacing: 0.03em;
    text-transform: uppercase;
    border: 1px solid transparent;
    vertical-align: 2px;
    line-height: 1.3;
}
.badge { margin-left: var(--s-2); }

/* Color variants — applied via data-color="<name>" on .pill,
   or via the legacy .badge.<state> aliases below. */
.pill[data-color="teal"],   .badge.active   { background: var(--accent-soft);  color: var(--accent);  border-color: rgba(82,193,175,.3); }
.pill[data-color="orange"]                  { background: var(--orange-soft);  color: var(--orange);  border-color: rgba(243,156,76,.3); }
.pill[data-color="purple"]                  { background: var(--purple-soft);  color: var(--purple);  border-color: rgba(160,108,240,.3); }
.pill[data-color="pink"]                    { background: var(--pink-soft);    color: var(--pink);    border-color: rgba(240,109,158,.3); }
.pill[data-color="yellow"], .badge.review   { background: var(--yellow-soft);  color: var(--yellow);  border-color: rgba(255,200,50,.3); }
.pill[data-color="blue"]                    { background: var(--blue-soft);    color: var(--blue);    border-color: rgba(93,156,236,.3); }
.pill[data-color="danger"]                  { background: var(--danger-soft);  color: var(--danger);  border-color: rgba(255,82,82,.3); }
.pill[data-color="muted"],  .badge.dim      { background: var(--surface-3);    color: var(--muted);   border-color: var(--border-2); }
.pill[data-color="success"]                 { background: var(--success-soft); color: var(--success); border-color: rgba(76,175,118,.3); }
.pill[data-color="pc"],     .badge.pc       { background: var(--accent-soft);  color: var(--accent);  border-color: rgba(82,193,175,.3); }

.tree-body { padding: 12px 16px 16px; border-top: 1px solid var(--border-1); }
.tree-actions { display: flex; gap: 10px; align-items: center; margin-bottom: 12px; flex-wrap: wrap; }

.answers { list-style: none; padding: 0; margin: 0; }
.answers li {
    padding: 10px 12px;
    border-bottom: 1px solid var(--border-1);
}
.answers li:last-child { border-bottom: none; }
.who-when { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.who-when em { color: var(--muted); font-style: italic; }
.who-when .when { color: var(--muted); font-size: 0.8rem; margin-left: auto; }
.ans-text { color: var(--text-soft); margin-top: 4px; line-height: 1.5; }


/* ╔══════════════════════════════════════════════════════════════════
   ║ Data table  (lines 836–877 from CheckIn admin.css)
   ╚══════════════════════════════════════════════════════════════════ */
/* ─── Data table ─────────────────────────────────────────────── */
table.data {
    width: 100%;
    border-collapse: collapse;
    margin-top: 6px;
}
table.data th, table.data td {
    text-align: left;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border-1);
    vertical-align: middle;
}
table.data th {
    color: var(--muted);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    font-weight: 700;
    background: var(--surface-2);
    position: sticky; top: 0;
}
table.data tr:hover td { background: var(--surface-3); }
table.data .muted { color: var(--muted); font-style: italic; margin-left: 4px; font-size: 0.85em; }
table.data tr.archived td { opacity: 0.5; }
table.data .empty { text-align: center; padding: 30px; color: var(--muted); font-style: italic; }

.name-link {
    color: var(--text);
    font-weight: 600;
}
.name-link:hover { color: var(--accent); }

code.key {
    background: var(--bg);
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 0.78rem;
    color: var(--accent);
}

.small { font-size: 0.85rem; }


/* ╔══════════════════════════════════════════════════════════════════
   ║ Settings page  (lines 1443–1487 from CheckIn admin.css)
   ╚══════════════════════════════════════════════════════════════════ */
/* ─── Settings page ──────────────────────────────────────────── */
.settings-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
}
.settings-stat {
    background: var(--surface-3);
    padding: 14px;
    border-radius: 8px;
}
.settings-stat-label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: var(--text-soft);
    font-weight: 700;
    margin-bottom: 6px;
}
.settings-stat-value {
    font-family: 'Impact', 'Anton', sans-serif;
    font-size: 1.6rem;
    color: var(--text);
    line-height: 1.1;
}
.settings-mmdd {
    display: flex;
    gap: 12px;
    align-items: end;
    flex-wrap: wrap;
}
.settings-mmdd label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-soft);
    font-weight: 600;
}
.settings-mmdd select {
    min-width: 130px;
}


/* ╔══════════════════════════════════════════════════════════════════
   ║ Sub-navigation  (lines 1488–1529 from CheckIn admin.css)
   ╚══════════════════════════════════════════════════════════════════ */
/* ─── Sub-navigation (Woodlawn §7 amended) ─────────────────────
   Used to split a settings page into sub-pages (General, Fields,
   Dropdowns). Each item is a regular link with URL-driven state.   */
.subnav {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-1);
    margin: calc(-1 * var(--s-2)) 0 var(--s-5);
    padding: var(--s-1);
    background: var(--surface-3);
    border-radius: var(--r-md);
    width: fit-content;
    max-width: 100%;
}
.subnav-item {
    padding: var(--s-2) var(--s-4);
    border-radius: var(--r-sm);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-soft);
    letter-spacing: 0;
    text-transform: none;
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
}
.subnav-item:hover { color: var(--text); background: rgba(255,255,255,0.04); }
.subnav-item.active {
    background: var(--accent);
    color: #0a0a0a;
}
.subnav-item.active:hover { background: var(--accent-strong); color: #0a0a0a; }

/* Shared subhead used inside General settings sections */
.settings-subhead {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-soft);
    margin: 0 0 var(--s-2);
    font-weight: 700;
}


/* ╔══════════════════════════════════════════════════════════════════
   ║ Role matrix  (lines 1530–1552 from CheckIn admin.css)
   ╚══════════════════════════════════════════════════════════════════ */
/* ─── Role permission matrix (Settings → Roles) ──────────────── */
.role-matrix tr.area-row td {
    background: var(--surface-3);
    color: var(--text-soft);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 8px 14px;
    border-bottom: 1px solid var(--border-1);
}
.role-matrix .matrix-check {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--accent);
}
.role-matrix code.key {
    background: transparent;
    padding: 0;
    color: var(--muted);
}


/* ╔══════════════════════════════════════════════════════════════════
   ║ Audit log  (lines 1703–1769 from CheckIn admin.css)
   ╚══════════════════════════════════════════════════════════════════ */
/* ─── Audit log viewer ───────────────────────────────────────── */
.audit-filter-group {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.audit-filter-group select,
.audit-filter-group input[type="date"] {
    /* Override the base 38px on selects/inputs with a compact 32px so
       the filter row doesn't dominate vertically. Explicit max-height
       defeats any browser-specific inflation; explicit line-height keeps
       the text centered. */
    min-width: 150px;
    width: auto;
    height: 32px;
    max-height: 32px;
    padding: 0 var(--s-3);
    padding-right: 32px;  /* keep space for the chevron on selects */
    font-size: 0.85rem;
    line-height: 30px;    /* 32px minus 1px border top + 1px border bottom */
    box-sizing: border-box;
}
.audit-filter-group input[type="date"] {
    padding-right: var(--s-3);   /* date input has its own picker icon */
}
/* The audit filter-bar's Apply button should match the control height
   so the whole row reads as one strip. */
.filter-bar > div > button[type="submit"],
.filter-bar > div > .btn-ghost {
    height: 32px;
    padding: 0 var(--s-3);
    font-size: 0.85rem;
}

.audit-actor-link {
    color: var(--text);
    font-weight: 600;
    border-bottom: 1px dotted var(--border-3);
    text-decoration: none;
}
.audit-actor-link:hover {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

.audit-table tbody tr:hover {
    background: rgba(255, 255, 255, 0.02);
}

.pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-3);
    margin-top: var(--s-4);
    padding: 0 var(--s-2);
}
.pagination .page-buttons {
    display: flex;
    gap: var(--s-2);
}


/* ╔══════════════════════════════════════════════════════════════════
   ║ Forbidden 403  (lines 1770–1819 from CheckIn admin.css)
   ╚══════════════════════════════════════════════════════════════════ */
/* ─── Forbidden / 403 page ───────────────────────────────────── */
.container.narrow {
    max-width: 560px;
    margin: 0 auto;
    padding: var(--s-5) var(--s-4);
}
.forbidden-card {
    background: var(--surface-2);
    border: 1px solid var(--border-1);
    border-radius: var(--r-lg);
    padding: var(--s-7) var(--s-6);
    box-shadow: var(--shadow-3);
    text-align: center;
}
.forbidden-emoji {
    font-size: 3rem;
    line-height: 1;
    margin-bottom: var(--s-4);
    opacity: 0.85;
}
.forbidden-card h1 {
    font-size: 1.4rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    margin: 0 0 var(--s-3);
    color: var(--text);
}
.forbidden-lead {
    color: var(--text-soft);
    font-size: 0.95rem;
    line-height: 1.55;
    margin: 0 0 var(--s-3);
    max-width: 420px;
    margin-left: auto;
    margin-right: auto;
}
.forbidden-card .muted {
    font-size: 0.85rem;
    line-height: 1.55;
    margin: 0 auto var(--s-5);
    max-width: 420px;
}
.forbidden-actions {
    display: flex;
    gap: var(--s-3);
    justify-content: center;
    flex-wrap: wrap;
    margin-top: var(--s-4);
}


/* ╔══════════════════════════════════════════════════════════════════
   ║ Roles switch  (lines 1820–1836 from CheckIn admin.css)
   ╚══════════════════════════════════════════════════════════════════ */
/* ─── Roles: matrix vs manage view switch ─────────────────────── */
.role-view-switch { /* shell defined inline; just style the items */ }
.role-view-tab {
    padding: 6px 14px;
    border-radius: var(--r-sm);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-soft);
    text-decoration: none;
    transition: background 0.12s, color 0.12s;
}
.role-view-tab:hover { color: var(--text); background: var(--surface-2); }
.role-view-tab.active {
    background: var(--accent);
    color: #0a0a0a;
}


/* ╔══════════════════════════════════════════════════════════════════
   ║ Matrix toolbar  (lines 1837–1909 from CheckIn admin.css)
   ╚══════════════════════════════════════════════════════════════════ */
/* ─── Matrix toolbar (col visibility + manage shortcut) ───────── */
.matrix-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-3);
    margin: var(--s-3) 0;
}

/* Column-visibility dropdown — uses <details>/<summary> for the
   no-JS-friendly open/close behavior, styled to look like a button. */
.col-visibility {
    position: relative;
}
.col-visibility summary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    list-style: none;
    cursor: pointer;
    padding: 8px 14px;
    background: var(--surface-2);
    border: 1px solid var(--border-2);
    border-radius: var(--r-md);
    font-size: 0.85rem;
    user-select: none;
    transition: border-color 0.12s, background 0.12s;
}
.col-visibility summary::-webkit-details-marker { display: none; }
.col-visibility summary:hover { border-color: var(--border-3); background: var(--surface-3); }
.col-visibility[open] summary { border-color: var(--accent); }
.col-visibility .caret {
    color: var(--text-soft);
    font-size: 0.7rem;
    transition: transform 0.15s;
}
.col-visibility[open] .caret { transform: rotate(180deg); }

.col-visibility-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 50;
    width: 280px;
    background: var(--surface-2);
    border: 1px solid var(--border-2);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-3);
    padding: var(--s-3);
}
.col-vis-row {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    padding: 6px 4px;
    cursor: pointer;
    border-radius: var(--r-sm);
}
.col-vis-row:hover { background: var(--surface-3); }
.col-vis-row input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--accent);
    cursor: pointer;
}
.col-vis-actions {
    margin-top: var(--s-2);
    padding-top: var(--s-2);
    border-top: 1px solid var(--border-1);
    display: flex;
    justify-content: flex-end;
}


/* ╔══════════════════════════════════════════════════════════════════
   ║ Picker rows  (lines 1910–1939 from CheckIn admin.css)
   ╚══════════════════════════════════════════════════════════════════ */
/* ─── Picker rows (emoji, color) in Tools form ────────────────── */
.picker-row {
    display: flex;
    gap: var(--s-2);
    align-items: center;
}
.picker-row input[type="text"] { min-width: 0; }
.picker-trigger {
    flex: 0 0 auto;
    height: 38px;
    padding: 0 14px;
    font-size: 0.85rem;
}

/* Labels that contain a popover picker need to anchor it. */
.has-picker { position: relative; }

/* Swatch preview shown inside the color picker's trigger button.
   Tiny rounded square showing the currently-chosen color. */
.color-swatch-preview {
    display: inline-block;
    width: 16px;
    height: 16px;
    border-radius: 4px;
    margin-right: 6px;
    vertical-align: middle;
    border: 1px solid rgba(0, 0, 0, 0.25);
    box-shadow: 0 0 0 1px var(--border-2) inset;
}


/* ╔══════════════════════════════════════════════════════════════════
   ║ Overlay picker chrome  (lines 1940–1965 from CheckIn admin.css)
   ╚══════════════════════════════════════════════════════════════════ */
/* ─── Shared overlay-picker chrome ────────────────────────────
   Both the emoji and color pickers use this. Absolute-positioned
   against their .has-picker label, elevated above other content,
   transitions in from slightly above with fade. */
.overlay-picker {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 100;
    padding: var(--s-3);
    background: var(--surface-2);
    border: 1px solid var(--border-2);
    border-radius: var(--r-md);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.02);
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity 0.15s, transform 0.15s;
    pointer-events: none;
}
.overlay-picker.is-open {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}


/* ╔══════════════════════════════════════════════════════════════════
   ║ Emoji picker  (lines 1966–1993 from CheckIn admin.css)
   ╚══════════════════════════════════════════════════════════════════ */
/* ─── Emoji picker grid ──────────────────────────────────────── */
.emoji-grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 4px;
    max-height: 280px;
    overflow-y: auto;
}
.emoji-tile {
    aspect-ratio: 1;
    background: var(--surface-3);
    border: 1px solid var(--border-1);
    border-radius: var(--r-sm);
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background 0.1s, border-color 0.1s, transform 0.08s;
}
.emoji-tile:hover {
    background: var(--accent-soft);
    border-color: var(--accent);
    transform: scale(1.08);
}


/* ╔══════════════════════════════════════════════════════════════════
   ║ Color picker  (lines 1994–2035 from CheckIn admin.css)
   ╚══════════════════════════════════════════════════════════════════ */
/* ─── Color picker grid ──────────────────────────────────────── */
.color-grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 6px;
}
.color-tile {
    aspect-ratio: 1;
    border: 1px solid rgba(0, 0, 0, 0.3);
    border-radius: var(--r-sm);
    cursor: pointer;
    padding: 0;
    box-shadow: 0 0 0 1px var(--border-1);
    transition: transform 0.08s, box-shadow 0.12s;
    position: relative;
}
.color-tile:hover {
    transform: scale(1.12);
    box-shadow: 0 0 0 2px var(--accent), 0 4px 12px rgba(0, 0, 0, 0.4);
    z-index: 1;
}
.color-tile.is-current {
    box-shadow: 0 0 0 2px var(--accent);
}
.color-tile.is-current::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: white;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
}

@media (max-width: 640px) {
    .emoji-grid, .color-grid { grid-template-columns: repeat(6, 1fr); }
}

/* ─── Tool registry list (Settings → Tools) ──────────────────── */

/* ╔══════════════════════════════════════════════════════════════════
   ║ Tool rows  (lines 2036–2154 from CheckIn admin.css)
   ╚══════════════════════════════════════════════════════════════════ */
.tool-rows {
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
}
.tool-row {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    padding: var(--s-3);
    background: var(--surface-3);
    border: 1px solid var(--border-1);
    border-radius: var(--r-md);
    transition: border-color 0.12s, opacity 0.12s;
}
.tool-row:hover { border-color: var(--border-3); }
.tool-row.is-hidden { opacity: 0.55; }
.tool-row.is-hidden .tool-row-name { text-decoration: line-through; }

.tool-row-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: var(--r-md);
    font-size: 1.4rem;
    line-height: 1;
}

.tool-row-body {
    flex: 1;
    min-width: 0;        /* allow children to truncate */
}
.tool-row-head {
    display: flex;
    align-items: baseline;
    gap: var(--s-2);
}
.tool-row-name {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--text);
}
.tool-row-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 2px;
    font-size: 0.8rem;
    color: var(--text-soft);
}
.tool-row-url {
    background: var(--surface-1);
    padding: 2px 7px;
    border-radius: var(--r-sm);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--accent);
}

.tool-row-actions {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 4px;
}
.inline-icon-form {
    display: inline-flex;
    margin: 0;
    padding: 0;
}

/* Icon-only buttons used in the tool rows.
   Uniform square boxes with a persistent subtle border so they read
   as "real buttons" at a glance — matches the reference design. Hover
   brightens the border and the icon. Disabled state grays everything
   out and removes hover affordance. */
.icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    background: transparent;
    border: 1px solid var(--border-2);
    border-radius: var(--r-md);
    color: var(--text-soft);
    line-height: 1;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.icon-btn:hover:not(:disabled) {
    background: var(--surface-2);
    border-color: var(--border-3);
    color: var(--text);
}
.icon-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}
.icon-btn-on {
    color: var(--accent);
    border-color: rgba(82, 193, 175, 0.35);
}
.icon-btn-on:hover:not(:disabled) {
    background: var(--accent-soft);
    border-color: var(--accent);
    color: var(--accent);
}
.icon-btn-danger:hover:not(:disabled) {
    background: var(--danger-soft);
    border-color: rgba(255, 82, 82, 0.5);
    color: var(--danger);
}
/* ─── Inline-label checkbox (Settings → Users edit form) ──────── */
.check-inline {
    display: flex; align-items: center; gap: var(--s-2);
    color: var(--text); padding: var(--s-2) 0;
    font-weight: 600; font-size: 0.875rem;
}

/* ╔══════════════════════════════════════════════════════════════════
   ║ Forms — global bare-input styling (lines 495-569 from CheckIn)
   ║ The shared settings partials use bare <input>, <select>, <textarea>
   ║ outside .fld wrappers; these rules give them the dark-theme treatment.
   ╚══════════════════════════════════════════════════════════════════ */
/* ─── Forms (Woodlawn §7) ────────────────────────────────────── */
.inline-form textarea,
.inline-form input[type=text],
input[type=text], input[type=password], input[type=email], input[type=tel],
input[type=date], input[type=number], input[type=search], input[type=url],
textarea, select {
    width: 100%;
    height: 38px;
    background: var(--surface-1);
    border: 1px solid var(--border-2);
    color: var(--text);
    padding: 0 var(--s-3);
    border-radius: var(--r-md);
    font-size: 0.875rem;
    font-family: var(--font-sans);
    transition: background 0.15s, border-color 0.15s;
}

/* Chrome/Edge force a yellow/white background on autofilled fields,
   which breaks our dark theme. The standard fix is to override with
   inset box-shadow + transition shim. WebkitTextFillColor keeps the
   text readable. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px var(--surface-1) inset !important;
    -webkit-text-fill-color: var(--text) !important;
    caret-color: var(--text);
    transition: background-color 5000s ease-in-out 0s;
}
textarea {
    height: auto;
    resize: vertical;
    min-height: 80px;
    padding: var(--s-2) var(--s-3);
    line-height: 1.5;
}
select {
    appearance: none;
    -webkit-appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, var(--text-soft) 50%),
                      linear-gradient(135deg, var(--text-soft) 50%, transparent 50%);
    background-position: calc(100% - 18px) center, calc(100% - 13px) center;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    padding-right: 32px;
}
input:focus, textarea:focus, select:focus {
    outline: none;
    border-color: var(--accent);
    background: var(--surface-2);
}
input::placeholder, textarea::placeholder { color: var(--muted-2); }

/* iOS zoom prevention on mobile */
@media (max-width: 900px) {
    input[type=text], input[type=password], input[type=email], input[type=tel],
    input[type=date], input[type=number], input[type=search],
    textarea, select {
        font-size: 16px;
    }
}

.inline-form .row {
    display: flex; align-items: center; justify-content: space-between;
    margin-top: var(--s-3); gap: var(--s-3); flex-wrap: wrap;
}
.check { display: flex; align-items: center; gap: var(--s-2); color: var(--text-soft); font-size: 0.875rem; }
.check-inline {
    display: flex; align-items: center; gap: var(--s-2);
    color: var(--text); padding: var(--s-2) 0;
    font-weight: 600; font-size: 0.875rem;
}

/* ─── Buttons (Woodlawn §7) ─────────────────────────────────────

/* ─── Native form controls in dark mode (Wave 5d cleanup) ───────────
 * The default browser checkbox + file input look terrible on our dark
 * surfaces. Style them to sit properly among the other form fields. */

input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 16px; height: 16px;
    border: 1.5px solid var(--border-3, rgba(255,255,255,.16));
    border-radius: 4px;
    background: var(--surface-3, #1d1d1d);
    cursor: pointer;
    vertical-align: -3px;
    margin-right: 6px;
    transition: background 0.15s, border-color 0.15s;
    display: inline-block;
    position: relative;
    flex-shrink: 0;
}
input[type="checkbox"]:hover {
    border-color: var(--teal);
}
input[type="checkbox"]:checked {
    background: var(--teal);
    border-color: var(--teal);
}
input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    left: 4px; top: 0px;
    width: 4px; height: 9px;
    border: solid #0a0a0a;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
input[type="checkbox"]:focus-visible {
    outline: 2px solid var(--teal);
    outline-offset: 2px;
}

/* File inputs — hide the ugly default and use a button-style label */
input[type="file"] {
    color: var(--muted);
    font-size: 13px;
    font-family: inherit;
}
input[type="file"]::file-selector-button {
    background: var(--surface-3, #1d1d1d);
    color: var(--text, #f0f0f0);
    border: 1px solid var(--border-2, rgba(255,255,255,.10));
    border-radius: 6px;
    padding: 6px 12px;
    margin-right: 10px;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
input[type="file"]::file-selector-button:hover {
    background: var(--surface-2, #161616);
    border-color: var(--teal);
    color: var(--teal);
}

/* ═══════════════════════════════════════════════════════════════════
   WSM Modal — portable dialog component
   Pairs with assets/wsm-modal.js (window.WSM.modal).
   Prefixed `wsm-` because it is intended to be lifted into other tools
   as-is. Tokens only; no hardcoded colors.
   ═══════════════════════════════════════════════════════════════════ */

.wsm-modal-backdrop {
    position: fixed; inset: 0; z-index: 200;
    background: rgba(0, 0, 0, .68);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    display: flex; align-items: flex-start; justify-content: center;
    padding: 6vh 20px 40px;
    overflow-y: auto;
    opacity: 0;
    /* Closed backdrop must never intercept clicks. Two independent guards,
       because getting this wrong takes the whole page down with it: */

    /* (1) pointer-events. Covers the fade-out window, where `hidden` hasn't
           been reapplied yet but the element is no longer interactive. */
    pointer-events: none;
    transition: opacity .16s ease;
}

/* (2) THE IMPORTANT ONE. The `hidden` HTML attribute is NOT enough on its own
       here. `[hidden] { display: none }` lives in the *user-agent* stylesheet,
       and the `display: flex` above lives in the *author* stylesheet — author
       origin beats UA origin regardless of specificity. Without this rule the
       backdrop renders even when marked hidden: invisible (opacity 0) but
       full-viewport at z-index 200, swallowing every click on the page,
       navbar included.

       Any component that sets `display` on an element that also uses the
       `hidden` attribute needs a rule like this. Do not delete it. */
.wsm-modal-backdrop[hidden] { display: none; }

.wsm-modal-backdrop.is-open { opacity: 1; pointer-events: auto; }

.wsm-modal {
    width: 100%; max-width: 640px;
    background: var(--surface-2);
    border: 1px solid var(--border-2);
    border-radius: var(--r-lg, 14px);
    box-shadow: 0 24px 64px rgba(0, 0, 0, .55);
    transform: translateY(-8px);
    transition: transform .16s ease;
}
.wsm-modal-backdrop.is-open .wsm-modal { transform: translateY(0); }

.wsm-modal-head {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 14px;
    padding: 18px 20px 14px;
    border-bottom: 1px solid var(--line);
}
.wsm-modal-title { font-size: 1.05rem; font-weight: 700; color: var(--ink, var(--text)); margin: 0; }
.wsm-modal-sub   { font-size: .8rem; color: var(--muted); margin-top: 3px; }

/* Close affordance — SVG on an interactive control, which is allowed. */
.wsm-modal-x {
    flex-shrink: 0; width: 30px; height: 30px; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent; border: 1px solid var(--border-2);
    border-radius: var(--r-md, 8px);
    color: var(--muted); cursor: pointer;
    transition: color .14s, border-color .14s, background .14s;
}
.wsm-modal-x:hover { color: var(--text); border-color: var(--border-3); background: rgba(255,255,255,.04); }
.wsm-modal-x svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2; }

.wsm-modal-body { padding: 18px 20px; }

.wsm-modal-foot {
    display: flex; align-items: center; justify-content: flex-end; gap: 8px;
    padding: 14px 20px; border-top: 1px solid var(--line);
    flex-wrap: wrap;
}
.wsm-modal-foot .wsm-modal-foot-left { margin-right: auto; }

/* Definition rows — the workhorse layout for "show me everything" modals */
.wsm-dl { display: grid; grid-template-columns: 120px 1fr; gap: 10px 16px; font-size: .9rem; }
.wsm-dl dt {
    font-size: .66rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    color: var(--muted); padding-top: 2px;
}
.wsm-dl dd { margin: 0; color: var(--text); word-break: break-word; }
.wsm-dl dd a { color: var(--accent); }
.wsm-dl .wsm-dl-note { font-size: .78rem; color: var(--muted); margin-top: 2px; }
@media (max-width: 560px) {
    .wsm-dl { grid-template-columns: 1fr; gap: 4px 0; }
    .wsm-dl dd { margin-bottom: 10px; }
}

.wsm-modal-prose {
    background: var(--surface-3); border: 1px solid var(--line);
    border-radius: var(--r-md, 8px); padding: 12px 14px;
    font-size: .9rem; line-height: 1.6; color: var(--text);
    white-space: pre-wrap; word-break: break-word;
}

/* Map preview pinned to the bottom of the modal body */
.wsm-modal-map { margin-top: 16px; }
.wsm-modal-map iframe {
    width: 100%; height: 200px; display: block;
    border: 1px solid var(--line); border-radius: var(--r-md, 8px);
}
/* Same trap as .wsm-modal-backdrop: the `display: block` above is an author
   rule and beats the UA's `[hidden] { display: none }`, so `iframe.hidden =
   true` would leave a blank frame sitting under the "no coordinates" message. */
.wsm-modal-map iframe[hidden] { display: none; }
.wsm-modal-map-empty {
    padding: 26px 14px; text-align: center;
    font-size: .82rem; color: var(--muted); font-style: italic;
    background: var(--surface-3); border: 1px dashed var(--line);
    border-radius: var(--r-md, 8px);
}
.wsm-modal-map-link { text-align: right; margin-top: 6px; font-size: .78rem; font-weight: 600; }

/* Panels that swap inside one modal (details <-> decline) */
.wsm-modal-pane { display: none; }
.wsm-modal-pane.is-active { display: block; }