/* ============================================================================
   EventLake Console · the ORGANISATION PANELS (tenant-admin.jsx, tenant-enrolment.jsx),
   drawn inside the one Console's pages since 2026-10-06a. Scoped under `.tn`.
   The four stand-alone Tenant Console pages and their chrome (plane strip, header,
   tab bar, overview hero) were removed with them; the Console's shell owns the frame.

   Written on the CANONICAL Hearth tokens (hearth-tokens.css at the repo root),
   not on the `--aa-*` set the older console sheets carry: this line is new, so it
   starts on the canon rather than inheriting a fork. Every custom property below
   has a literal fallback so a page still renders if a sheet fails to load — a
   blank surface is the one failure mode a security console must not have.

   No entrance animation lives here: the Console page around a panel owns the
   entrance (.cs-fade), and it obeys the never-blank rule.
   ============================================================================ */

.tn, .tn * { box-sizing: border-box; }
.tn {
  min-height: 100vh;
  background: var(--hearth-canvas, #FAF8F4);
  color: var(--hearth-text, #191713);
  font-family: var(--font-sans, 'Hanken Grotesk', system-ui, sans-serif);
  font-size: 14px;
  line-height: var(--leading-normal, 1.55);
  -webkit-font-smoothing: antialiased;
}
.tn .mono { font-family: var(--font-mono, 'JetBrains Mono', ui-monospace, monospace); font-variant-numeric: tabular-nums; }
.tn h1, .tn h2, .tn h3 { font-family: var(--font-display, Newsreader, Georgia, serif); font-weight:var(--font-display-weight, 400); margin: 0; letter-spacing: -.01em; }

.tn-tab {
  border: 0; background: transparent; cursor: pointer;
  color: var(--hearth-text-secondary, #5A554D);
  font: 500 12.5px/1 var(--font-sans, 'Hanken Grotesk', sans-serif);
  padding: 9px 13px; border-radius: var(--radius-md, 7px);
  text-decoration: none; display: inline-block;
}
.tn-tab:hover { background: var(--hearth-sunken, #F1EEE8); text-decoration: none; }
.tn-tab[aria-current="page"] { background: var(--accent-subtle-bg, var(--aa-teal-soft)); color: var(--accent); font-weight: 600; }

/* ---- page frame ---------------------------------------------------------- */

.tn-title { margin-bottom: 4px; font-size: 24px; }
.tn-sub { color: var(--hearth-text-secondary, #5A554D); margin-bottom: 20px; font-size: 13.5px; }

.tn-card {
  background: var(--hearth-surface, #FFFFFF);
  border: 1px solid var(--hearth-border, #E7E3DB);
  border-radius: var(--radius-lg, 12px);
  padding: 16px 18px;
  margin-bottom: 16px;
}
.tn-card > h2 { font-size: 16px; margin-bottom: 2px; }
.tn-card > .h { color: var(--hearth-text-secondary, #5A554D); font-size: 12.5px; margin-bottom: 12px; }
.tn-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }

/* metric tiles. The VALUE is mono so a number can never be mistaken for prose. */
.tn-tile { background: var(--hearth-surface, #FFFFFF); border: 1px solid var(--hearth-border, #E7E3DB); border-radius: var(--radius-lg, 12px); padding: 14px 16px; }
.tn-tile .k { font: 700 9.5px/1.4 var(--font-mono, monospace); letter-spacing: .14em; text-transform: uppercase; color: var(--hearth-text-muted, #6D6355); }
.tn-tile .v { font: 700 26px/1.15 var(--font-mono, monospace); font-variant-numeric: tabular-nums; margin: 6px 0 2px; }
.tn-tile .s { font-size: 12px; color: var(--hearth-text-secondary, #5A554D); }

/* ---- tables -------------------------------------------------------------- */
.tn-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.tn-table th {
  text-align: start; font: 700 9.5px/1.4 var(--font-mono, monospace);
  letter-spacing: .12em; text-transform: uppercase; color: var(--hearth-text-muted, #6D6355);
  padding: 7px 10px; border-bottom: 1px solid var(--hearth-border, #E7E3DB);
}
.tn-table td { padding: 9px 10px; border-bottom: 1px solid var(--hearth-border-subtle, #ECEAE6); vertical-align: top; }
.tn-table tr:last-child td { border-bottom: 0; }
.tn-scroll { overflow-x: auto; }

/* ---- controls ------------------------------------------------------------ */
.tn-btn {
  border: 1px solid var(--hearth-border-strong, #DAD8D4);
  background: var(--hearth-surface, #FFFFFF);
  color: var(--hearth-text, #191713);
  font: 600 12.5px/1 var(--font-sans, sans-serif);
  padding: 9px 14px; border-radius: var(--radius-md, 8px); cursor: pointer;
}
.tn-btn:hover { background: var(--hearth-sunken, #F1EEE8); }
.tn-btn:disabled { opacity: .55; cursor: not-allowed; }
.tn-btn--primary { background: var(--accent-solid-bg, #191713); border-color: var(--accent-solid-bg, #191713); color: var(--hearth-text-on-accent, #fff); }
.tn-btn--primary:hover { background: var(--accent-active, #000000); }  /* clay-700, the canon's pressed step — --accent-hover resolves to the SAME clay-600 as the base, so hovering would look inert */
.tn-btn--danger { border-color: var(--sev-high-fg, #AB4E19); color: var(--sev-high-fg, #AB4E19); }
.tn-in {
  border: 1px solid var(--hearth-border-strong, #DAD8D4);
  background: var(--hearth-surface, #FFFFFF);
  color: var(--hearth-text, #191713);
  font: 400 13px/1.3 var(--font-sans, sans-serif);
  padding: 9px 11px; border-radius: var(--radius-md, 8px); width: 100%;
}
.tn-in.mono { font-family: var(--font-mono, monospace); letter-spacing: .1em; }
.tn-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.tn-field { flex: 1 1 180px; }
.tn-field label { display: block; font: 700 9.5px/1.4 var(--font-mono, monospace); letter-spacing: .12em; text-transform: uppercase; color: var(--hearth-text-muted, #6D6355); margin-bottom: 5px; }
/* a stacked form's label outside a .tn-field row (Get help, 2026-10-12av) — the same type as .tn-field label */
.tn-label { display: block; font: 700 9.5px/1.4 var(--font-mono, monospace); letter-spacing: .12em; text-transform: uppercase; color: var(--hearth-text-muted, #6D6355); margin: 12px 0 5px; }

/* ---- state chips --------------------------------------------------------- */
.tn-chip { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: var(--radius-full, 999px); font: 600 11px/1.5 var(--font-mono, monospace); font-variant-numeric: tabular-nums; }
.tn-chip--ok   { background: var(--status-healthy-bg, #E5EFDF); color: var(--status-healthy-fg, #466D49); }
.tn-chip--warn { background: var(--status-degraded-bg, #F6ECCE); color: var(--status-degraded-fg, #7F5F0C); }
.tn-chip--bad  { background: var(--status-down-bg, #F7E0DA); color: var(--status-down-fg, #A12818); }
.tn-chip--flat { background: var(--hearth-sunken, #F1EEE8); color: var(--hearth-text-secondary, #5A554D); }

/* ---- the absence grammar (§9ar v2) --------------------------------------
   ⛔ NONE OF THE THREE IS A STATUS TONE. Neutral ink on neutral ground, exactly as
   the portal renders them, precisely so they cannot read as healthy/degraded/down:
   two of the three are correct states of a correct system and the third is our
   debt, not the operator's problem. */
.tn-abs {
  display: inline-flex; align-items: center; gap: 5px; padding: 1px 7px;
  border: 1px solid var(--hearth-text-muted, #6D6355);
  border-radius: 5px;
  font-family: var(--font-mono, monospace); font-size: .72rem; letter-spacing: .03em;
  color: var(--hearth-text-secondary, #5A554D);
  background: var(--hearth-surface, #FFFFFF);
}
.tn-abs--design   { border-style: solid;  font-weight: 700; }
.tn-abs--cannot   { border-style: dashed; font-style: italic; font-weight: 700; background: var(--hearth-sunken, #F1EEE8); }
.tn-abs--unserved { border-style: dotted; font-weight: 700; }
.tn-abs__g { font-size: .68rem; line-height: 1; }
.tn-absrow { padding: 9px 0; border-bottom: 1px solid var(--hearth-border, #E7E3DB); }
.tn-absrow:last-child { border-bottom: 0; }
.tn-absrow .t { font-family: var(--font-mono, monospace); font-weight: 700; font-size: .82rem; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.tn-absrow .w { margin-top: 3px; font-size: 12.5px; color: var(--hearth-text-secondary, #5A554D); }

/* ---- notices ------------------------------------------------------------- */
.tn-note { border-inline-start: 3px solid var(--hearth-border-strong, #DAD8D4); background: var(--hearth-sunken, #F1EEE8); padding: 10px 14px; border-start-start-radius: 0; border-start-end-radius: var(--radius-md, 8px); border-end-end-radius: var(--radius-md, 8px); border-end-start-radius: 0; font-size: 12.5px; margin-bottom: 14px; }
.tn-note--bad  { border-inline-start-color: var(--sev-high-fg, #AB4E19); background: var(--sev-high-bg, #F9E6D6); }
.tn-note--warn { border-inline-start-color: var(--status-degraded-fg, #7F5F0C); background: var(--status-degraded-bg, #F6ECCE); }
.tn-note--ok   { border-inline-start-color: var(--status-healthy-fg, #466D49); background: var(--status-healthy-bg, #E5EFDF); }

/* ---- step ladder (enrolment) --------------------------------------------- */
.tn-steps { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 18px; }
.tn-step { border: 1px solid var(--hearth-border, #E7E3DB); background: var(--hearth-surface, #FFFFFF); border-radius: var(--radius-full, 999px); padding: 6px 12px; font: 600 11.5px/1 var(--font-mono, monospace); font-variant-numeric: tabular-nums; color: var(--hearth-text-secondary, #5A554D); cursor: pointer; }
.tn-step[aria-current="step"] { background: var(--accent-subtle-bg, var(--aa-teal-soft)); color: var(--accent); border-color: var(--accent-hover); }
.tn-step[data-done="1"]::before { content: "\2713\00a0"; color: var(--status-healthy-fg, #466D49); }

/* ---- the QR moment (board 9ai-2 A2, 2026-10-14bj) ---------------------------
   ⛔ NO frame, border, shadow, logo or badge on the code itself: a QR is an encoding,
   not a channel, and a treatment that LOOKS secure teaches trust in the one thing a
   person cannot verify. The shut state changes the sentence, never the code's styling. */
.tn-qr { margin-top: 14px; }
.tn-qr__title { font: 600 1.02rem/1.35 var(--font-sans, sans-serif); color: var(--hearth-text, #191713); margin: 0 0 10px; }
.tn-qr__grid { display: grid; grid-template-columns: minmax(0, 232px) minmax(0, 1fr); gap: 18px; align-items: start; }
@media (max-width: 640px) { .tn-qr__grid { grid-template-columns: minmax(0, 1fr); } }
.tn-qr__code { display: block; width: 100%; max-width: 232px; height: auto; }
/* A2's hold tone: the TINT carries the meaning and the ink stays --hearth-text (degraded-fg on degraded-bg
   is 3.80:1, under AA for this size — the board's own note). Same panel fresh and at minute 8. */
.tn-qr__banner { background: var(--status-degraded-bg, #F6ECCE); color: var(--hearth-text, #191713); border: 1px solid color-mix(in oklab, var(--status-degraded-fg, #7F5F0C) 40%, transparent); border-radius: var(--radius-lg, 12px); padding: 14px 16px; }
.tn-qr__kicker { font: 700 9.5px/1.4 var(--font-mono, monospace); letter-spacing: .12em; text-transform: uppercase; color: var(--hearth-text-muted, #6D6355); }
.tn-qr__head { font-weight: 700; margin-top: 4px; color: var(--hearth-text, #191713); }
.tn-qr__body { margin-top: 6px; color: var(--hearth-text-secondary, #5A554D); line-height: 1.55; }
.tn-qr__uri { margin-top: 8px; font-size: .74rem; color: var(--hearth-text-muted, #6D6355); overflow-wrap: anywhere; }