/* =========================================================
   keyzito.com — The Key Family
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --forest:       #1d3a2e;
  --forest-light: #264d3d;
  --forest-dark:  #111f18;
  --clay:         #c96a2a;
  --clay-light:   #e07a35;
  --clay-dark:    #a85620;
  --off-white:    #faf8f4;
  --warm-gray:    #f0ede7;
  --text:         #1d2520;
  --muted:        #686f64;
  --border:       #d8d5cf;
  --font-sans:    'Poppins', system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;

  /* ── KZ2 F1: design tokens ─────────────────────────────────
     Consolidates 34 font sizes down to 6, 25 padding values down to
     an 8-point 7-step scale, and the 3-ways-danger/2-ways-success
     duplication down to one pair each. Fluid headline sizes (hero h1,
     section h2) stay on clamp() — that's a different concern (responsive
     display type) from a fixed reading-text scale, not an exception to
     dodge the rule. */

  /* Type scale — minimum body 15px (--font-body), minimum label 12px
     (--font-label), everything else derived from those two floors. */
  --font-label: 0.75rem;    /* 12px — uppercase eyebrows, table headers, badges */
  --font-xs:    0.8125rem;  /* 13px — meta text, hints */
  --font-body:  0.9375rem;  /* 15px — minimum reading text */
  --font-base:  1rem;       /* 16px — default paragraph text */
  --font-lg:    1.1875rem;  /* 19px — subheadings, card titles */
  --font-xl:    1.5rem;     /* 24px — section/page headings */

  /* Spacing — 8-point scale, 7 steps */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;

  /* Radii — 2 values only */
  --radius-sm: 3px;   /* buttons, inputs, chips */
  --radius-md: 8px;   /* cards, panels, modals */

  /* Semantic colors — one danger, one success, one warning, one info,
     each with a background and foreground variant. Deliberately matches
     shared/kz2-components.css's existing badge/conf-badge values (built
     during KZ2 C1) rather than picking new ones, so old and new pages
     read as the same app instead of two different color systems for
     the same meaning. */
  --danger-bg:  #fbe0dd; --danger-fg:  #b13a2a;
  /* KZ2 F3: success-fg/warning-fg were 4.42:1 / 3.77:1 on their own -bg --
     both fail 4.5:1. Darkened just enough to clear it (4.64:1 / 4.67:1). */
  --success-bg: #e3f3e6; --success-fg: #2d793d;
  --warning-bg: #fff2d9; --warning-fg: #946309;
  --info-bg:    #e8f0ec; --info-fg:    #1d3a2e;

  /* Elevation — 3 shadow levels */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.10);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.16);

  /* Content width — was 960px in most places, 720px in assets.html's
     panels; standardized on 960px (the value the large majority of the
     app, including .container/.hub-section/header/footer, already used). */
  --content-width: 960px;
}

html { scroll-behavior: smooth; font-size: 16px; }

/* KZ2 F3: no :focus-visible rule existed anywhere in this file -- every
   interactive element relied on the browser's own default outline (which
   a few rules below suppress with outline:none, sometimes with a
   border-color substitute, sometimes not). One rule, everywhere, keyboard
   focus only (not mouse clicks). */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible,
select:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--clay);
  outline-offset: 2px;
}

body {
  font-family: var(--font-sans);
  color: var(--text);
  background: var(--off-white);
  line-height: 1.6;
}

/* =========================================================
   Container
   ========================================================= */

.container {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 0 var(--space-5);
}

.container-narrow {
  max-width: 680px;
  margin: 0 auto;
  padding: 0 var(--space-5);
}

/* =========================================================
   Header / Nav
   ========================================================= */

header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: var(--forest-dark);
  transition: box-shadow 0.2s;
}

header.scrolled {
  box-shadow: var(--shadow-lg);
}

.header-inner {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 0 var(--space-5);
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.wordmark {
  text-decoration: none;
  display: flex;
  align-items: baseline;
  gap: 2px;
  line-height: 1;
}

.wordmark-key {
  font-size: var(--font-lg);
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.01em;
}

.wordmark-zito {
  font-size: var(--font-lg);
  font-weight: 300;
  color: rgba(255,255,255,0.6);
  letter-spacing: 0.01em;
}

/* KZ2 F1: clay's one job is "primary interactive action" (buttons, focus
   rings, hover on an entire clickable card) — this dot was purely
   decorative branding, so it moved off clay. */
.wordmark-dot {
  font-size: var(--font-label);
  font-weight: 400;
  /* KZ2 F3: --muted is tuned for light backgrounds -- this sits on the dark
     header (#111f18) inherited from before the F1 move off clay. 3.28:1 was
     failing; matches the header's other dim-white labels now. */
  color: rgba(255,255,255,0.5);
  margin-left: 2px;
  letter-spacing: 0.05em;
}

.header-hub {
  background: transparent;
  color: rgba(255,255,255,0.65);
  text-decoration: none;
  font-weight: 500;
  font-size: var(--font-xs);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255,255,255,0.2);
  transition: border-color 0.15s, color 0.15s;
  display: flex;
  align-items: center;
  gap: 6px;
}

.header-hub:hover {
  border-color: rgba(255,255,255,0.45);
  color: #fff;
}

.header-hub svg {
  flex-shrink: 0;
}

/* =========================================================
   Hero
   ========================================================= */

.hero {
  background: var(--forest);
  padding: 140px var(--space-5) 80px;
  text-align: center;
}

/* KZ2 F1: moved off clay -- decorative label, not an action. Stays a
   light tone (not forest-light) since this sits on the dark hero bg. */
.hero-eyebrow {
  font-size: var(--font-label);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: rgba(255,255,255,0.68);
  margin-bottom: var(--space-5);
}

/* Fluid display type stays on clamp() rather than the fixed 6-step scale
   -- responsive headline sizing is a different concern from a reading-
   text scale, not a gap in the token migration. */
.hero h1 {
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 700;
  color: #fff;
  line-height: 1.15;
  margin-bottom: var(--space-5);
  letter-spacing: -0.01em;
}

.hero-sub {
  font-size: var(--font-base);
  color: rgba(255,255,255,0.6);
  max-width: 480px;
  margin: 0 auto var(--space-6);
  line-height: 1.75;
}

.hero-actions {
  display: flex;
  gap: var(--space-4);
  justify-content: center;
  flex-wrap: wrap;
}

/* KZ2 F1: 7 button classes (.btn-primary, .btn-ghost, .btn-save,
   .add-row-btn, .mark-checked-btn, .select-toggle, .edit-mode-toggle)
   reduced to 3 + a danger variant. .btn-primary is clay's one job. */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  /* KZ2 F3: plain --clay behind white text was 3.76:1 at this size --
     fails 4.5:1. --clay-dark clears it (~5.23:1); --clay (brighter) moves
     to :hover, a momentary state. */
  background: var(--clay-dark);
  color: #fff;
  text-decoration: none;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--font-body);
  padding: var(--space-3) var(--space-5);
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.15s;
  letter-spacing: 0.01em;
}

.btn-primary:hover { background: var(--clay); }
.btn-primary:active { background: var(--clay-dark); transform: translateY(1px); }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: #fff;
  color: var(--forest);
  text-decoration: none;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--font-body);
  padding: var(--space-3) var(--space-5);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}

.btn-secondary:hover { border-color: var(--forest-light); background: var(--warm-gray); }
.btn-secondary:active { background: var(--border); transform: translateY(1px); }
.btn-secondary:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: transparent;
  color: rgba(255,255,255,0.72);
  text-decoration: none;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--font-body);
  padding: var(--space-3) var(--space-5);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}

.btn-ghost:hover {
  border-color: rgba(255,255,255,0.45);
  color: #fff;
}
.btn-ghost:active { background: rgba(255,255,255,0.08); transform: translateY(1px); }
.btn-ghost:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.btn-ghost.on-light:active { background: var(--warm-gray); }

/* On a light background (.btn-ghost's rgba-white styling assumes a dark
   one, e.g. inside .hero/.gate) -- same shape, forest-toned. */
.btn-ghost.on-light {
  color: var(--muted);
  border-color: var(--border);
}
.btn-ghost.on-light:hover { border-color: var(--forest-light); color: var(--forest); }

/* Toggle-button active state (e.g. an "Edit mode: On" switch) -- clay's
   focus-ring job, extended to any button acting as a live toggle. */
.btn-ghost.on { color: var(--clay); border-color: var(--clay); }

.btn-danger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: var(--danger-fg);
  color: #fff;
  text-decoration: none;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--font-body);
  padding: var(--space-3) var(--space-5);
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.15s;
}

.btn-danger:hover { background: #a53326; }
.btn-danger:active { background: #8a2a20; transform: translateY(1px); }
.btn-danger:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

.btn-sm { padding: var(--space-2) var(--space-3); font-size: var(--font-xs); }

/* =========================================================
   Sections
   ========================================================= */

section {
  padding: 72px var(--space-5);
}

section.section-alt {
  background: var(--warm-gray);
}

section.section-dark {
  background: var(--forest);
  color: #fff;
}

/* KZ2 F1: moved off clay -- decorative label, not an action. */
.section-label {
  font-size: var(--font-label);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-weight: 600;
  color: var(--forest-light);
  margin-bottom: var(--space-2);
  display: block;
}

section.section-dark .section-label { color: rgba(255,255,255,0.55); }

section h2 {
  font-size: clamp(1.3rem, 3vw, 1.85rem);
  font-weight: 700;
  color: var(--forest);
  margin-bottom: var(--space-4);
  line-height: 1.25;
}

section.section-dark h2 { color: #fff; }

section p {
  font-size: var(--font-body);
  color: var(--muted);
  line-height: 1.75;
}

/* KZ2 F3: --muted measures 4.9:1 on --off-white but only 4.44:1 on the
   slightly darker --warm-gray this section sits on -- fails 4.5:1. */
section.section-alt p { color: var(--text); }

.section-intro { max-width: 580px; }

section.section-dark p { color: rgba(255,255,255,0.68); }

/* =========================================================
   Family directory — domain cards
   ========================================================= */

.directory-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-5);
  margin-top: var(--space-6);
}

/* KZ2 F1: an entire directory card is a link -- its hover state is the
   one non-button place clay stays, since it's still "this is what you
   can click," not decoration. */
.directory-card {
  background: #fff;
  border: 1px solid var(--border);
  border-left: 3px solid var(--forest);
  border-radius: var(--radius-sm);
  padding: var(--space-5) var(--space-4);
  text-decoration: none;
  color: inherit;
  transition: border-left-color 0.15s, box-shadow 0.15s;
  display: block;
}

.directory-card:hover {
  border-left-color: var(--clay);
  box-shadow: var(--shadow-sm);
}

/* KZ2 F3: opacity used to fade this whole card, but that blends every
   child's text color toward the page background and silently breaks
   contrast (card-owner/card-desc/.soon tag all measured well under 4.5:1).
   The border color plus the "SOON" tag already say "not available yet" --
   opacity was redundant signal doing double duty as an accessibility bug. */
.directory-card.coming-soon {
  border-left-color: var(--border);
  cursor: default;
}

.card-owner {
  font-size: var(--font-label);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
  margin-bottom: var(--space-1);
}

.card-domain {
  font-size: var(--font-body);
  font-weight: 600;
  color: var(--forest);
  margin-bottom: var(--space-1);
}

.directory-card:hover .card-domain { color: var(--clay-dark); }

.card-desc {
  font-size: var(--font-xs);
  color: var(--muted);
  line-height: 1.5;
}

.card-tag {
  display: inline-block;
  font-size: var(--font-label);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 2px 7px;
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-2);
}

.card-tag.live {
  background: var(--info-bg);
  color: var(--info-fg);
}

/* KZ2 F1: "coming soon" is a warning-shaped status ("not available yet"),
   not a decorative use of clay -- a clean fit for the new semantic token. */
.card-tag.soon {
  background: var(--warning-bg);
  color: var(--warning-fg);
}

/* =========================================================
   Contact section
   ========================================================= */

.contact-block {
  max-width: 560px;
  margin: var(--space-6) auto 0;
  text-align: center;
}

.email-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--forest);
  text-decoration: none;
  font-weight: 600;
  font-size: var(--font-base);
  padding: var(--space-3) var(--space-5);
  border: 2px solid var(--forest);
  border-radius: var(--radius-sm);
  transition: background 0.15s, color 0.15s;
  margin-top: var(--space-3);
}

.email-link:hover {
  background: var(--forest);
  color: #fff;
}

/* =========================================================
   Footer
   ========================================================= */

footer {
  background: var(--forest-dark);
  padding: var(--space-6) var(--space-5);
}

.footer-inner {
  max-width: var(--content-width);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.footer-copy {
  font-size: var(--font-label);
  /* KZ2 F3: was 0.3 alpha (~2.4:1 on --forest-dark) -- 0.5 clears 4.5:1. */
  color: rgba(255,255,255,0.5);
}

/* KZ2 F1: moved off clay -- a secondary nav link's hover, not the app's
   one primary action. */
.footer-hub {
  font-size: var(--font-label);
  color: rgba(255,255,255,0.5); /* KZ2 F3: was 0.4 (~3.4:1) -- 0.5 clears 4.5:1 */
  text-decoration: none;
  transition: color 0.15s;
}

.footer-hub:hover { color: #fff; }

/* =========================================================
   Hub page — password gate
   ========================================================= */

.gate {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--forest);
  padding: var(--space-6) var(--space-5);
  text-align: center;
}

/* Author-stylesheet `.gate { display: flex }` beats the browser's default
   `[hidden] { display: none }` UA rule (same specificity, author origin
   wins) -- so setting the `hidden` property from JS had no visual effect
   at all here. shared/kz2-login.css already has this same override
   (`.kz2-gate[hidden]`); style.css never did. This is very likely why
   signing in on hub.html/dashboard.html/emergency.html looked like it
   "did nothing" -- the gate never actually went away after a real,
   successful sign-in. */
.gate[hidden] { display: none; }

.gate-inner {
  max-width: 380px;
  width: 100%;
}

.gate-monogram {
  width: 64px;
  height: 64px;
  background: rgba(255,255,255,0.1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--space-5);
}

.gate-monogram span {
  font-size: var(--font-xl);
  font-weight: 700;
  color: #fff;
}

.gate h1 {
  font-size: var(--font-lg);
  font-weight: 600;
  color: #fff;
  margin-bottom: var(--space-2);
}

.gate p {
  font-size: var(--font-body);
  color: rgba(255,255,255,0.55);
  margin-bottom: var(--space-5);
}

.gate-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.gate-input {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  font-size: var(--font-base); /* KZ2 F6: was --font-body (15px) -- under 16px triggers iOS zoom-on-focus */
  color: #fff;
  text-align: center;
  letter-spacing: 0.08em;
  transition: border-color 0.15s;
  outline: none;
}

.gate-input::placeholder { color: rgba(255,255,255,0.6); } /* KZ2 F3: was 0.3 -- 0.6 clears 4.5:1 on --forest */
/* KZ2 F1: focus rings are clay's other legitimate job -- an active
   interaction cue, not passive branding. */
.gate-input:focus { border-color: var(--clay); }

.gate-btn {
  width: 100%;
  padding: var(--space-3);
  background: var(--clay-dark); /* KZ2 F3: plain --clay was 3.76:1 -- fails 4.5:1 */
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  font-size: var(--font-body);
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}

.gate-btn:hover { background: var(--clay); }

.gate-error {
  font-size: var(--font-xs);
  color: var(--danger-fg);
  display: none;
}

/* Auth-gate chrome — KZ2 F1. Was duplicated verbatim across hub.html,
   dashboard.html, emergency.html, and the two -legacy pages (identical
   values, five separate declarations). One version now. */
.hub-loading {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--off-white);
}
.hub-loading p { font-size: var(--font-body); color: var(--muted); }

.login-error {
  font-size: var(--font-xs);
  color: var(--danger-fg);
  min-height: 18px;
  margin-bottom: 2px;
}

.hub-user-email {
  font-size: var(--font-label);
  color: rgba(255,255,255,0.5); /* KZ2 F3: was 0.35 (~2.9:1) -- 0.5 clears 4.5:1 */
}

.btn-google {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-3) var(--space-4);
  background: #fff;
  color: #3c4043;
  border: 1px solid #dadce0;
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  font-size: var(--font-body);
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, box-shadow 0.15s;
}
.btn-google:hover { background: #f8f9fa; box-shadow: var(--shadow-sm); }
.btn-google:disabled { opacity: 0.6; cursor: not-allowed; }

.or-divider {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: var(--space-4) 0 var(--space-3);
  color: rgba(255,255,255,0.6); /* KZ2 F3: was 0.3 (1.26:1 measured) -- 0.6 clears 4.5:1 */
  font-size: var(--font-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.or-divider::before, .or-divider::after { content: ''; flex: 1; height: 1px; background: rgba(255,255,255,0.15); }

.email-toggle {
  background: none;
  border: none;
  color: rgba(255,255,255,0.6); /* KZ2 F3: was 0.4 (~2.4:1 on --forest) -- 0.6 clears 4.5:1 */
  font-family: var(--font-sans);
  font-size: var(--font-xs);
  cursor: pointer;
  text-decoration: underline;
  padding: var(--space-1) 0;
  transition: color 0.15s;
}
.email-toggle:hover { color: rgba(255,255,255,0.7); }

.empty-state { padding: var(--space-4) 0; color: var(--muted); font-size: var(--font-body); }

/* =========================================================
   Hub page — content
   ========================================================= */

.hub-header {
  background: var(--forest-dark);
  padding: var(--space-4) var(--space-5);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.hub-header-inner {
  max-width: var(--content-width);
  margin: 0 auto;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.hub-wordmark {
  font-size: var(--font-base);
  font-weight: 700;
  color: #fff;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.hub-wordmark-sub {
  font-size: var(--font-label);
  font-weight: 400;
  color: rgba(255,255,255,0.5); /* KZ2 F3: was 0.4 (~3.8:1) -- 0.5 clears 4.5:1 */
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.hub-date {
  font-size: var(--font-label);
  color: rgba(255,255,255,0.5); /* KZ2 F3: was 0.35 (~2.9:1, named in the prompt) -- 0.5 clears 4.5:1 */
}

.hub-sign-out {
  font-size: var(--font-label);
  color: rgba(255,255,255,0.5); /* KZ2 F3: was 0.4 (~3.8:1) -- 0.5 clears 4.5:1 */
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-sans);
  transition: color 0.15s;
  padding: var(--space-1) 0;
}

.hub-sign-out:hover { color: rgba(255,255,255,0.7); }

.hub-body {
  background: var(--off-white);
  min-height: calc(100vh - 60px);
  padding: var(--space-6) var(--space-5) var(--space-7);
}

.hub-section {
  max-width: var(--content-width);
  margin: 0 auto var(--space-6);
}

.hub-section:last-child { margin-bottom: 0; }

/* KZ2 F1: moved off clay -- decorative label, not an action. */
.hub-section-title {
  font-size: var(--font-label);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--forest-light);
  margin-bottom: var(--space-1);
}

.hub-section h2 {
  font-size: var(--font-lg);
  font-weight: 700;
  color: var(--forest);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border);
}

/* Contacts table */
.contacts-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-body);
}

.contacts-table th {
  text-align: left;
  font-size: var(--font-label);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
  padding: 0 var(--space-3) var(--space-3) 0;
  border-bottom: 1px solid var(--border);
}

.contacts-table td {
  padding: var(--space-3) var(--space-3) var(--space-3) 0;
  color: var(--text);
  border-bottom: 1px solid var(--border);
  line-height: 1.4;
  font-size: var(--font-body);
  vertical-align: top;
}

.contacts-table tr:last-child td { border-bottom: none; }

.contacts-table td.label {
  font-weight: 600;
  color: var(--forest);
  white-space: nowrap;
}

.contacts-table a {
  color: var(--forest);
  text-decoration: none;
}

.contacts-table a:hover { color: var(--clay-dark); }

/* Links grid */
.links-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
}

.link-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--space-4);
  text-decoration: none;
  color: var(--text);
  transition: border-color 0.15s, box-shadow 0.15s;
  display: block;
}

.link-card:hover {
  border-color: var(--forest-light);
  box-shadow: var(--shadow-sm);
}

.link-card-label {
  font-size: var(--font-label);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
  margin-bottom: var(--space-1);
}

.link-card-title {
  font-size: var(--font-body);
  font-weight: 600;
  color: var(--forest);
}

.link-card-url {
  font-size: var(--font-label);
  color: var(--muted);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Docs list */
.docs-list {
  list-style: none;
  display: flex;
  flex-direction: column;
}

.docs-list li {
  display: grid;
  grid-template-columns: 180px 1fr auto;
  gap: var(--space-4);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--border);
  align-items: start;
  font-size: var(--font-body);
}

.docs-list li:last-child { border-bottom: none; }

.doc-name {
  font-weight: 600;
  color: var(--forest);
}

.doc-location {
  color: var(--muted);
  line-height: 1.4;
}

.doc-updated {
  font-size: var(--font-label);
  color: var(--muted);
  white-space: nowrap;
}

/* Notes */
.notes-area {
  width: 100%;
  min-height: 120px;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  font-size: var(--font-body);
  color: var(--text);
  background: #fff;
  resize: vertical;
  line-height: 1.6;
}

.notes-area:focus {
  outline: none;
  border-color: var(--forest-light);
}

.notes-hint {
  font-size: var(--font-label);
  color: var(--muted);
  margin-top: var(--space-2);
}

/* Important dates */
.dates-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-3);
}

.date-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--space-4);
  text-align: center;
}

.date-label {
  font-size: var(--font-label);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
  margin-bottom: var(--space-2);
}

.date-value {
  font-size: var(--font-body);
  font-weight: 600;
  color: var(--forest);
}

.date-note {
  font-size: var(--font-label);
  color: var(--muted);
  margin-top: 3px;
}

/* =========================================================
   Shared components — KZ2 F1

   .badge / .conf-badge: unified. assets.html had plain colored text,
   dashboard.html/emergency.html each had their own copy of a filled
   pill (same values, three separate declarations). One version now,
   using the semantic tokens above -- overdue/never_verified -> danger,
   attention_needed/verified_long_ago -> warning,
   healthy/verified_recently -> success.
   ========================================================= */

.badge, .conf-badge {
  display: inline-block;
  font-size: var(--font-label);
  font-weight: 700;
  padding: 2px var(--space-2);
  border-radius: 10px; /* pill shape, matching shared/kz2-components.css's own badge exactly -- a capsule is a different category from the 2-value corner-radius scale, same as kz2-shell.css's separate --kz2-radius-pill */
  text-transform: uppercase;
  letter-spacing: 0.03em;
  background: var(--warm-gray);
  color: var(--muted);
}

.badge-healthy, .conf-verified_recently          { background: var(--success-bg); color: var(--success-fg); }
.badge-attention_needed, .conf-verified_long_ago { background: var(--warning-bg); color: var(--warning-fg); }
.badge-overdue, .conf-never_verified             { background: var(--danger-bg);  color: var(--danger-fg); }
.badge-archived                                  { background: var(--warm-gray);  color: var(--muted); }

/* .cell-empty: was var(--border) on white, ~1.5:1 -- fails WCAG at any
   size. muted (~4.9:1, already used at 12px elsewhere in this file) is
   a real accessible floor while still reading as "unset," not body text. */
.cell-empty { color: var(--muted); font-style: italic; }

/* Small utilities — KZ2 F1. Recurring one-off inline styles (a muted
   footnote, a row of nav links in a dark header, a flex row) collected
   into named classes instead of staying scattered per-page. */
.hub-header-actions { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; }
.hub-nav-link { font-size: var(--font-label); color: rgba(255,255,255,0.5); text-decoration: none; } /* KZ2 F3: was 0.4 (~3.8:1, "header nav" the prompt named) -- 0.5 clears 4.5:1 */
.hub-nav-link:hover { color: rgba(255,255,255,0.7); }
.flex-row { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.hint-text { font-size: var(--font-xs); color: var(--muted); margin-top: var(--space-3); }
.error-text { color: var(--danger-fg); font-size: var(--font-xs); }
.gate-footnote { font-size: var(--font-label); color: rgba(255,255,255,0.6); margin-top: var(--space-4); } /* KZ2 F3: was 0.28 (2.36:1 measured) -- 0.6 clears 4.5:1 */
.gate-input-email { letter-spacing: normal; }
.edit-hint { font-size: var(--font-xs); color: var(--muted); opacity: 0.7; max-width: var(--content-width); margin: 0 auto var(--space-2); }

/* =========================================================
   Responsive
   ========================================================= */

@media (max-width: 760px) {
  .directory-grid { grid-template-columns: 1fr; }
  .links-grid { grid-template-columns: repeat(2, 1fr); }
  .dates-grid { grid-template-columns: repeat(2, 1fr); }
  .hero-actions { flex-direction: column; align-items: center; }

  .docs-list li {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .doc-updated { text-align: left; }

  /* Contact tables become cards — a 4-column table is unusable on a phone,
     and a phone is exactly where you reach for this page (a number, an address). */
  .contacts-table, .contacts-table thead, .contacts-table tbody,
  .contacts-table th, .contacts-table td, .contacts-table tr { display: block; }
  .contacts-table thead { display: none; }
  .contacts-table tr {
    background: #fff; border: 1px solid var(--border); border-radius: var(--radius-sm);
    margin-bottom: var(--space-3); padding: var(--space-3) var(--space-4);
  }
  .contacts-table tr:last-child { margin-bottom: 0; }
  .contacts-table td { border-bottom: none; padding: 5px 0; }
  .contacts-table td.col-del { padding: 4px 0 0; }
  .contacts-table td::before {
    content: attr(data-label); display: block; font-size: var(--font-label); font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); margin-bottom: 2px;
  }
  .contacts-table td.label::before { display: none; }
}

@media (max-width: 500px) {
  .links-grid { grid-template-columns: 1fr; }
  .dates-grid { grid-template-columns: 1fr 1fr; }
}