/* Cloud Governance Agent - design system v2, PHASE 1: the shared layer (tokens, base, shell, nav,
   components). A PREVIEW: nothing in webapp/src links this file, and it is deliberately not under the
   served static directory. It keeps the class names app.css already uses, so a later phase can move it
   to static/css/ and point _base.html at it with no template renames. Page-specific layouts (login, chat,
   dashboard grid, resource browsing) are NOT here yet - each page group brings its own in its own phase.

   Direction: a white / very light neutral canvas; Deep Indigo for headings, active navigation, primary
   actions and links; Warm Amber as a rare secondary accent. RED, GREEN and the severity YELLOW are
   reserved for the product's own severity language (approval state, risk tier, drift) and are never used
   decoratively. The accent amber is never used for status, and never as text on white (2.4:1) - the
   text-safe variant is --color-accent-text. Self-hosted IBM Plex, as before. No gradients, no shadows. */

@font-face { font-family: "IBM Plex Sans"; src: url("../fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("../fonts/ibm-plex-sans-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("../fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("../fonts/ibm-plex-sans-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("../fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("../fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }

/* -- tokens ---------------------------------------------------------------- */

:root {
  /* Brand */
  --color-indigo:        #2A2D7C;
  --color-indigo-hover:  #1F2263;
  --color-indigo-tint:   #EEEFF8;   /* active nav, info badges, selected rows */
  --color-indigo-line:   #C9CBE8;
  --color-sky:           #BFE0F8;   /* the sign-in brand panel: a sky blue, in the same blue family as indigo */
  --color-sky-light:     #E3F1FC;
  --color-accent:        #E8954A;   /* warm amber: fills, rules, markers. NEVER text on white, NEVER status */
  --color-accent-hover:  #DB873C;
  --color-accent-tint:   #FDF0E3;
  --color-accent-text:   #9C4A08;   /* the text-safe amber, 6.2:1 on white */
  --color-on-accent:     #2B1700;   /* text on an amber fill */

  /* Canvas and text */
  --color-bg:             #F7F8FA;
  --color-surface:        #FFFFFF;
  --color-surface-sunk:   #F0F2F6;
  --color-border:         #DCE0E7;
  --color-border-strong:  #8790A3;  /* control borders: 3:1 against white */
  --color-text-primary:   #1A1C3A;
  --color-text-secondary: #4F5570;
  --color-text-tertiary:  #68708A;

  /* Severity - the product's own language. Reserved. */
  --color-success:    #1A7550;
  --color-success-hover: #165F42;
  --color-success-bg: #E4F2EA;
  --color-danger:     #B3261E;
  --color-danger-bg:  #FBEAE9;
  --color-warning:    #C9A000;      /* a true yellow-ochre: kept well apart from the accent amber */
  --color-warning-bg: #FBF1C7;
  --color-warning-text: #5C4700;
  --color-info:       var(--color-indigo);
  --color-info-bg:    var(--color-indigo-tint);

  /* Legacy names the carried page rules still use: all map onto the new brand */
  --color-navy: var(--color-indigo);
  --color-blue: var(--color-indigo);
  --color-teal: var(--color-indigo);
  --color-amber: var(--color-accent);

  /* Type */
  --font-sans: "IBM Plex Sans", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;
  --font-size-xs: 12px; --font-size-sm: 13px; --font-size-base: 15px; --font-size-md: 17px;
  --font-size-lg: 22px; --font-size-xl: 28px; --font-size-display: 34px;
  --line-height-body: 1.5; --line-height-heading: 1.2;
  --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700;

  /* Space (8px grid) and radius */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;
  --radius-none: 0px; --radius-sm: 4px; --radius-md: 6px; --radius-lg: 10px;

  /* Focus: one ring everywhere */
  --focus-ring: 0 0 0 2px var(--color-surface), 0 0 0 4px var(--color-indigo);
}

/* -- base ------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
dl, dd, ul, ol, p, h1, h2, h3 { margin: 0; }
ul { padding: 0; list-style: none; }

body {
  font-family: var(--font-sans);
  font-size: var(--font-size-base);
  line-height: var(--line-height-body);
  color: var(--color-text-primary);
  background: var(--color-bg);
}
a { color: var(--color-indigo); text-underline-offset: 2px; }
a:hover { color: var(--color-indigo-hover); }
code, .mono { font-family: var(--font-mono); }

h1 { font-size: var(--font-size-xl); font-weight: var(--font-weight-bold); line-height: var(--line-height-heading); color: var(--color-indigo); }
h2 { font-size: var(--font-size-lg); font-weight: var(--font-weight-semibold); line-height: var(--line-height-heading); color: var(--color-indigo); }
h3 { font-size: var(--font-size-md); font-weight: var(--font-weight-semibold); line-height: var(--line-height-heading); }

:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }

.icon { width: 16px; height: 16px; vertical-align: -3px; flex-shrink: 0; }
.empty { color: var(--color-text-secondary); }
.empty-state {
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-lg);
  padding: var(--space-6) var(--space-5);
  text-align: center;
  color: var(--color-text-secondary);
  background: var(--color-surface);
}
.empty-state strong { display: block; color: var(--color-text-primary); font-weight: var(--font-weight-semibold); margin-bottom: var(--space-1); }

/* -- page header: one <h1> per page, then what it is, then the actions ------------------------- */

.page-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-bottom: var(--space-5);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-border);
  position: relative;
}
.page-header::after {            /* the one amber mark: a short rule under the title, nothing else */
  content: "";
  position: absolute;
  left: 0; bottom: -1px;
  width: 48px; height: 3px;
  background: var(--color-accent);
}
.page-header p { color: var(--color-text-secondary); margin-top: var(--space-1); max-width: 64ch; }
.page-header .page-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; }

/* -- buttons ------------------------------------------------------------------ */

.btn {
  display: inline-flex; align-items: center; gap: var(--space-1);
  font-family: var(--font-sans); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold);
  line-height: 1.4;
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-4);
  border: 1px solid transparent;
  cursor: pointer; text-decoration: none;
}
.btn-sm { padding: 3px var(--space-3); font-size: var(--font-size-xs); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }

.btn-primary { background: var(--color-indigo); color: #fff; }
.btn-primary:hover { background: var(--color-indigo-hover); color: #fff; }

.btn-secondary { background: var(--color-surface); color: var(--color-indigo); border-color: var(--color-indigo-line); }
.btn-secondary:hover { background: var(--color-indigo-tint); color: var(--color-indigo-hover); }

/* Rare secondary emphasis. Dark text on the amber fill; never used for a status or a decision. */
.btn-accent { background: var(--color-accent); color: var(--color-on-accent); }
.btn-accent:hover { background: var(--color-accent-hover); }

.btn-ghost { background: transparent; color: var(--color-indigo); }
.btn-ghost:hover { background: var(--color-indigo-tint); }

/* Decisions keep the severity language: approve is green, reject is red and outlined until hovered. */
.btn-approve { background: var(--color-success); color: #fff; }
.btn-approve:hover { background: var(--color-success-hover); color: #fff; }
.btn-reject { background: transparent; color: var(--color-danger); border-color: var(--color-danger); }
.btn-reject:hover, .btn-reject:focus-visible { background: var(--color-danger); color: #fff; }
.btn-block { width: 100%; justify-content: center; }

/* -- form controls: one look for every input in the product ------------------------------------ */

label, .field-label { display: block; font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--color-text-primary); margin-bottom: var(--space-1); }
.field { display: flex; flex-direction: column; gap: var(--space-1); }
.field-help { font-size: var(--font-size-xs); color: var(--color-text-secondary); }
.field-error { font-size: var(--font-size-xs); color: var(--color-danger); display: flex; align-items: center; gap: var(--space-1); }
input[type="text"], input[type="email"], input[type="password"], input[type="search"], input[type="number"], input[type="date"], select, textarea {
  font-family: var(--font-sans); font-size: var(--font-size-sm); color: var(--color-text-primary);
  background: var(--color-surface);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  width: 100%;
}
textarea { resize: vertical; min-height: 72px; }
input:hover, select:hover, textarea:hover { border-color: var(--color-indigo); }
input:focus-visible, select:focus-visible, textarea:focus-visible { border-color: var(--color-indigo); }
input[aria-invalid="true"], .field-invalid input, .field-invalid select { border-color: var(--color-danger); }
input::placeholder, textarea::placeholder { color: var(--color-text-tertiary); }
input[type="checkbox"], input[type="radio"] { accent-color: var(--color-indigo); width: auto; }
.filter-bar { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: flex-end; }
.filter-bar .field { min-width: 160px; flex: 1; }

/* -- badges: state, risk, severity. Every badge carries a word (and usually an icon): colour is never alone. */

.badge {
  display: inline-flex; align-items: center; gap: var(--space-1);
  font-size: var(--font-size-xs); font-weight: var(--font-weight-medium);
  border-radius: var(--radius-sm);
  padding: 2px var(--space-2);
  white-space: nowrap;
}
.badge .icon { width: 12px; height: 12px; }
.badge-success { background: var(--color-success-bg); color: var(--color-success); }
.badge-danger  { background: var(--color-danger-bg);  color: var(--color-danger); }
.badge-warning { background: var(--color-warning-bg); color: var(--color-warning-text); }
.badge-info    { background: var(--color-info-bg);    color: var(--color-info); }
.badge-neutral { background: var(--color-surface-sunk); color: var(--color-text-secondary); }
.badge-danger.badge-strong { font-weight: var(--font-weight-bold); }

@keyframes badge-pulse-dot { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
.badge-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: badge-pulse-dot 1.4s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .badge-dot { animation: none; } }

.count-chip { display: inline-block; min-width: 1.6em; text-align: center; font-family: var(--font-mono); border-radius: var(--radius-sm); padding: 1px var(--space-2); font-size: var(--font-size-sm); }
.audit-secondary { font-size: var(--font-size-sm); color: var(--color-text-secondary); margin-top: 2px; }

/* -- notices ------------------------------------------------------------------ */

.notice { border-radius: var(--radius-md); border: 1px solid; padding: var(--space-3) var(--space-4); font-size: var(--font-size-sm); }
.notice-warning { background: var(--color-warning-bg); border-color: var(--color-warning); color: var(--color-warning-text); }
.notice-danger  { background: var(--color-danger-bg);  border-color: var(--color-danger);  color: var(--color-danger); }
.notice-success { background: var(--color-success-bg); border-color: var(--color-success); color: var(--color-success); }
.notice-info    { background: var(--color-info-bg);    border-color: var(--color-indigo-line); color: var(--color-info); }

/* -- panel, table, stat, tabs --------------------------------------------------- */

.panel { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-4); }
.panel h2 { margin-bottom: var(--space-3); }
.panel-full { grid-column: 1 / -1; }

table { border-collapse: collapse; width: 100%; font-size: var(--font-size-sm); }
th, td { text-align: left; padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--color-border); border-radius: var(--radius-none); vertical-align: top; }
th { font-weight: var(--font-weight-semibold); color: var(--color-text-primary); background: var(--color-surface-sunk); border-bottom: 2px solid var(--color-indigo-line); }
tbody tr:hover td { background: var(--color-indigo-tint); }
td.num, th.num { text-align: right; font-family: var(--font-mono); }

.stat-row { display: flex; gap: var(--space-4); flex-wrap: wrap; }
.stat { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-3) var(--space-4); min-width: 120px; flex: 1; }
.stat .stat-value { font-family: var(--font-mono); font-weight: var(--font-weight-bold); font-size: var(--font-size-xl); display: block; color: var(--color-indigo); }
.stat .stat-label { font-size: var(--font-size-sm); color: var(--color-text-secondary); }

.team-tabs { display: flex; gap: var(--space-2); margin-bottom: var(--space-4); border-bottom: 1px solid var(--color-border); }
.team-tabs a { padding: var(--space-2) var(--space-4); color: var(--color-text-secondary); text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.team-tabs a:hover { color: var(--color-indigo); }
.team-tabs a.active { color: var(--color-indigo); border-bottom-color: var(--color-indigo); font-weight: var(--font-weight-semibold); }

/* -- card / approval card -------------------------------------------------------- */

.card { position: relative; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-4); margin: var(--space-3) 0; overflow: hidden; }
.card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--color-indigo); }
.card-not-reversible { border: 2px solid var(--color-danger); }          /* the one place the system breaks its own restraint, on purpose */
.card-not-reversible::before { background: var(--color-danger); }
.card-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); margin-bottom: var(--space-3); flex-wrap: wrap; }
.card-header .trace-id { font-family: var(--font-mono); font-size: var(--font-size-sm); color: var(--color-text-secondary); }
.card-header-badges { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.card-description { font-size: var(--font-size-md); font-weight: var(--font-weight-semibold); margin-bottom: var(--space-3); }
.card-restore-note { font-size: var(--font-size-sm); color: var(--color-text-secondary); margin-bottom: var(--space-3); }
.card-grid { display: grid; grid-template-columns: auto 1fr; gap: var(--space-1) var(--space-4); margin: 0; }
.card-grid dt { font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--color-text-secondary); }
.card-grid dd { font-size: var(--font-size-sm); margin: 0; }
.cost-delta { font-family: var(--font-mono); }
.cost-delta-increase { color: var(--color-danger); }
.cost-delta-decrease { color: var(--color-success); }
.cost-delta-zero, .cost-delta-neutral { color: var(--color-text-secondary); }
.card-violations { margin: var(--space-1) 0 0; }
.card-violations li { margin-bottom: var(--space-1); }
.card-violations .rule-id { font-family: var(--font-mono); }
.card-section { margin-top: var(--space-4); padding-top: var(--space-3); border-top: 1px solid var(--color-border); }
.card-section summary { cursor: pointer; font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--color-indigo); }
.card-section .card-grid { margin-top: var(--space-2); }
.card-section pre { font-family: var(--font-mono); font-size: var(--font-size-sm); background: var(--color-surface-sunk); border-radius: var(--radius-sm); padding: var(--space-2) var(--space-3); white-space: pre-wrap; word-break: break-word; margin: 0; }
.card-rejection-reason { margin-top: var(--space-3); padding: var(--space-3); background: var(--color-surface-sunk); border-left: 3px solid var(--color-danger); border-radius: var(--radius-sm); font-size: var(--font-size-sm); }
.card-rejection-reason cite { display: block; margin-top: var(--space-1); font-style: normal; color: var(--color-text-secondary); font-size: var(--font-size-xs); }
.card-approval-list li { font-size: var(--font-size-sm); margin-bottom: var(--space-1); }
.card-actions { margin-top: var(--space-4); display: flex; align-items: flex-start; gap: var(--space-2); justify-content: flex-end; flex-wrap: wrap; }
.card-error { color: var(--color-danger); background: var(--color-danger-bg); border-radius: var(--radius-sm); padding: var(--space-2) var(--space-3); margin-bottom: var(--space-2); font-size: var(--font-size-sm); display: flex; align-items: center; gap: var(--space-1); }
.reject-disclosure summary { list-style: none; }
.reject-disclosure summary::-webkit-details-marker, .reject-disclosure summary::marker { display: none; content: ""; }
.reject-disclosure[open] summary { background: var(--color-danger); color: #fff; }
.reject-form { margin-top: var(--space-2); display: flex; flex-direction: column; gap: var(--space-2); background: var(--color-surface); border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); padding: var(--space-3); width: 260px; }

/* -- shell (phase 3): a light sidebar that stays put, indigo marking where you are ------------------------------------
   One shell for every signed-in page. Desktop: a fixed-height sidebar that scrolls on its own, so navigation never leaves the screen
   on a long page. Narrow screens: it becomes a sticky top bar with a scrolling nav. Hover, active (indigo text, indigo tint, a 3px indigo
   bar, and aria-current for assistive technology) and keyboard focus (an inset ring that cannot be clipped by the sidebar's own
   scrolling) are defined once here for every nav entry, including the Platform group for the platform-owning admin. */

.skip-link { position: absolute; left: -9999px; top: var(--space-2); z-index: 100; background: var(--color-indigo); color: #fff; padding: var(--space-2) var(--space-4); border-radius: var(--radius-md); font-weight: var(--font-weight-semibold); text-decoration: none; }
.skip-link:focus { left: var(--space-3); }

.shell { display: flex; min-height: 100vh; }
.sidebar {
  width: 248px; flex-shrink: 0;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
  background: var(--color-surface); border-right: 1px solid var(--color-border);
  display: flex; flex-direction: column;
  padding: var(--space-5) 0 var(--space-4);
}
.sidebar-wordmark { display: block; padding: 0 var(--space-5) var(--space-4); color: var(--color-indigo); font-weight: var(--font-weight-bold); font-size: var(--font-size-md); text-decoration: none; line-height: 1.25; }
.sidebar-nav { flex: 1; }
.sidebar-group { padding: var(--space-4) var(--space-5) var(--space-1); color: var(--color-text-secondary); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); }
/* a one-level sub-section inside a group (the console's Security > Logs): a quieter heading and indented entries */
.sidebar-section { padding: var(--space-3) var(--space-5) var(--space-1) var(--space-6); color: var(--color-text-tertiary); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); }
.sidebar-nav a.sub { padding-left: var(--space-7); }
.sidebar-nav a {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-2) var(--space-5);
  color: var(--color-text-primary); text-decoration: none;
  font-size: var(--font-size-sm); font-weight: var(--font-weight-medium);
  border-left: 3px solid transparent;
}
.sidebar-nav a .icon { color: var(--color-text-secondary); }
.sidebar-nav a:hover { background: var(--color-surface-sunk); color: var(--color-indigo); }
.sidebar-nav a:hover .icon { color: var(--color-indigo); }
.sidebar-nav a.active { background: var(--color-indigo-tint); color: var(--color-indigo); border-left-color: var(--color-indigo); font-weight: var(--font-weight-semibold); }
.sidebar-nav a.active .icon { color: var(--color-indigo); }
.sidebar-nav a:focus-visible { outline: 2px solid var(--color-indigo); outline-offset: -2px; box-shadow: none; border-radius: 0; }
.account-picker { margin: var(--space-3) var(--space-4) 0; padding: var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-bg); font-size: var(--font-size-xs); }
.account-picker .account-label { display: block; margin-bottom: var(--space-2); color: var(--color-text-secondary); }
.account-picker strong { color: var(--color-text-primary); }
.account-picker select { font-size: var(--font-size-xs); padding: var(--space-1) var(--space-2); }
.sidebar-footer { margin: var(--space-4) var(--space-5) 0; padding-top: var(--space-4); border-top: 1px solid var(--color-border); font-size: var(--font-size-xs); color: var(--color-text-secondary); }
.sidebar-footer .signed-in-as { display: block; color: var(--color-text-primary); font-weight: var(--font-weight-medium); overflow-wrap: anywhere; }
.sidebar-footer .tenant-label { display: block; margin-bottom: var(--space-2); overflow-wrap: anywhere; }
.sidebar-footer form { margin: 0; }
.sidebar-footer button { background: none; border: none; color: var(--color-indigo); font-size: var(--font-size-xs); font-family: var(--font-sans); cursor: pointer; padding: 0; display: inline-flex; align-items: center; gap: var(--space-1); }
.sidebar-footer button:hover { color: var(--color-indigo-hover); text-decoration: underline; }
.main { flex: 1; max-width: 1280px; padding: var(--space-6); margin: 0 auto; width: 100%; min-width: 0; }
.main:focus { outline: none; }

/* Narrow screens: the sidebar becomes a sticky top bar with a scrolling nav. CSS only, no script. */
@media (max-width: 800px) {
  .shell { flex-direction: column; }
  .sidebar { position: sticky; top: 0; z-index: 20; width: auto; height: auto; overflow: visible; flex-direction: row; align-items: center; flex-wrap: wrap; padding: var(--space-2) var(--space-3); border-right: none; border-bottom: 1px solid var(--color-border); }
  .sidebar-wordmark { padding: 0 var(--space-3) 0 0; }
  .sidebar-nav { display: flex; overflow-x: auto; flex: 1 1 100%; order: 3; }
  .sidebar-group, .sidebar-section { display: none; }
  .sidebar-nav a.sub { padding-left: var(--space-3); }
  .sidebar-nav a { border-left: none; border-bottom: 3px solid transparent; white-space: nowrap; padding: var(--space-2) var(--space-3); }
  .sidebar-nav a.active { border-bottom-color: var(--color-indigo); }
  .account-picker, .sidebar-footer { margin: 0 0 0 auto; padding: 0; border: none; background: none; }
  .main { padding: var(--space-4); }
}

/* ===== Pre-login pages (phase 2): login, signup, and the centred single-card pages ===== */

.https-banner { display: none; position: sticky; top: 0; z-index: 10; padding: var(--space-2) var(--space-4); font-size: var(--font-size-sm); }
.https-banner a { color: inherit; font-weight: var(--font-weight-semibold); }
.https-banner button { background: none; border: none; color: inherit; cursor: pointer; float: right; font-size: var(--font-size-sm); }

/* Sign-in layout. Two styles, chosen by the platform setting (docs/design/console-redesign): A is the default and
   needs no class; B is `login-style-b` on .login-shell. Both keep the brand panel at 38% and the form at 62%.
   A: a sky panel that fades into the white form side, so there is no seam. B: a sky panel ending in a gentle S-curve.
   Indigo is the wordmark and the icons, never the background. On narrow screens the panel becomes a header strip and
   the effect turns with it: the fade runs downward (A), the curve becomes a wave along the strip's bottom edge (B). */
.login-shell {
  display: flex; min-height: 100vh;
  background: linear-gradient(90deg, var(--color-sky) 0, var(--color-sky) 24%, var(--color-surface) 58%);
}
.login-left {
  width: 38%;
  padding: var(--space-8) var(--space-6);
  display: flex; flex-direction: column; justify-content: center;
  position: relative; z-index: 1;
}
.login-left > * { position: relative; z-index: 2; }
.login-wordmark { font-size: var(--font-size-display); font-weight: var(--font-weight-bold); line-height: var(--line-height-heading); color: var(--color-indigo); margin-bottom: var(--space-3); text-wrap: balance; }
.login-accent-rule { width: 56px; height: 3px; background: var(--color-accent); margin-bottom: var(--space-5); }
.login-positioning { font-size: var(--font-size-md); color: var(--color-text-secondary); max-width: 34ch; margin-bottom: var(--space-6); }
.login-feature-list { display: flex; flex-direction: column; gap: var(--space-3); }
.login-feature-list li { display: flex; align-items: center; gap: var(--space-3); font-size: var(--font-size-sm); color: var(--color-text-primary); }
.login-feature-list .icon { color: var(--color-indigo); width: 18px; height: 18px; }

.login-right { width: 62%; display: flex; align-items: center; justify-content: center; padding: var(--space-6); }
.login-form-column { width: 100%; max-width: 360px; }
.login-form-column h1 { margin-bottom: var(--space-5); }
.login-form-column form { display: flex; flex-direction: column; gap: var(--space-3); }
.login-form-column .notice { margin-bottom: var(--space-4); }
.login-divider { text-align: center; color: var(--color-text-secondary); font-size: var(--font-size-sm); margin: var(--space-4) 0; }
.login-dev-note { margin-top: var(--space-3); }
/* The left-panel class is also used for helper text under a form field: keep that quiet. */
.login-form-column .login-positioning, .centered-page .login-positioning { font-size: var(--font-size-sm); max-width: none; margin: 0; }

/* Centred single-card pages: invite, verify, resend, check-email, download-invalid, link-slack. */
body:has(.centered-page) { background: var(--color-bg); }
.centered-page {
  max-width: 460px;
  margin: var(--space-8) auto;
  padding: var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  display: flex; flex-direction: column; gap: var(--space-3);
}
.centered-page::before { content: ""; width: 48px; height: 3px; background: var(--color-accent); }
.centered-page form { display: flex; flex-direction: column; gap: var(--space-3); }
.centered-page p { margin: 0; }
.centered-page h1 { text-wrap: balance; }
.centered-page .btn { align-self: flex-start; }
.centered-page .btn-block { align-self: stretch; }
.notice .icon { margin-right: var(--space-1); }

/* Style B: the S-curve edge (a pale echo band behind the main band). */
.login-shell.login-style-b { background: var(--color-surface); }
.login-style-b .login-left { background: var(--color-sky); }
.login-style-b .login-left::before, .login-style-b .login-left::after {
  content: ""; position: absolute; top: 0; bottom: 0; z-index: 0; background-size: 100% 100%; background-repeat: no-repeat;
}
.login-style-b .login-left::after { right: -79px; width: 80px; background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 80 1000%22 preserveAspectRatio=%22none%22%3E%3Cpath d=%22M0 0H44C74 150 20 320 46 480C72 640 18 820 42 1000H0Z%22 fill=%22%23BFE0F8%22/%3E%3C/svg%3E"); z-index: 1; }
.login-style-b .login-left::before { right: -99px; width: 100px; background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 1000%22 preserveAspectRatio=%22none%22%3E%3Cpath d=%22M0 0H70C96 170 40 340 66 500C92 660 40 840 62 1000H0Z%22 fill=%22%23E3F1FC%22/%3E%3C/svg%3E"); }

@media (max-width: 800px) {
  .login-shell { flex-direction: column; min-height: 0; background: linear-gradient(180deg, var(--color-sky) 0, var(--color-sky) 52px, var(--color-surface) 150px); }
  .login-left, .login-right { width: auto; }
  .login-left { padding: var(--space-5) var(--space-4); }
  .login-wordmark { font-size: var(--font-size-lg); }
  .login-positioning, .login-feature-list { display: none; }
  .login-accent-rule { margin-bottom: 0; }
  .login-right { padding: var(--space-5) var(--space-4); }
  .login-shell.login-style-b { background: var(--color-surface); }
  .login-style-b .login-left { margin-bottom: 36px; }
  .login-style-b .login-left::after { top: auto; bottom: -39px; left: 0; right: 0; width: auto; height: 40px; background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 1000 40%22 preserveAspectRatio=%22none%22%3E%3Cpath d=%22M0 0H1000V12C820 40 700 0 520 18C340 36 200 4 0 22Z%22 fill=%22%23BFE0F8%22/%3E%3C/svg%3E"); }
  .login-style-b .login-left::before { top: auto; bottom: -58px; left: 0; right: 0; width: auto; height: 60px; background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 1000 60%22 preserveAspectRatio=%22none%22%3E%3Cpath d=%22M0 0H1000V30C800 58 660 12 480 34C320 52 160 20 0 40Z%22 fill=%22%23E3F1FC%22/%3E%3C/svg%3E"); }
  .centered-page { margin: var(--space-4); }
}

/* ===== Carried from app.css (phase 3 shell step): page-specific rules for the signed-in pages (chat has since been restyled, see below), ported onto the v2 tokens unchanged in
   behaviour so every page renders inside the new shell. Each page group restyles its own block in a later step. ===== */

.connection-form {
  margin: var(--space-2) 0 var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  max-width: 480px;
}
.connection-form label {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
}
.connection-form input[type="text"] {
  font-family: var(--font-sans);
  font-size: var(--font-size-sm);
  padding: var(--space-2);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
}
.connection-form button { align-self: flex-start; }
.dashboard-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}
.dashboard-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
}
.browse-category {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md, 6px);
  margin: var(--space-3) 0;
  padding: var(--space-3) var(--space-4);
}
.browse-category > summary { cursor: pointer; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.browse-body { margin-top: var(--space-3); }
.browse-type { border-top: 1px solid var(--color-border); padding: var(--space-3) 0; }
.browse-type-head { display: flex; align-items: center; gap: var(--space-2); }
.browse-pill {
  display: inline-block;
  padding: 1px var(--space-2);
  border-radius: var(--radius-sm, 3px);
  background: var(--color-surface-sunk);
  font-size: var(--font-size-xs);
}
.browse-pill-ok { background: var(--color-success-bg); color: var(--color-success); }
.browse-pill-off { background: var(--color-warning-bg); color: var(--color-warning-text); }
.browse-pill-warn { background: var(--color-danger-bg); color: var(--color-danger); }
.browse-message { margin: var(--space-2) 0; }
.setting-form { display: flex; flex-direction: column; gap: var(--space-4); max-width: 520px; margin-top: var(--space-3); }
.setting-options { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.setting-option { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-3); border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); cursor: pointer; }
.setting-option input { margin-top: 3px; }
.setting-option-help { font-size: var(--font-size-sm); color: var(--color-text-secondary); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* ===== Chat (phase 3, page group 1): the transcript, the composer, the choice chooser, the inline approval card ===================
   Agent messages are white surfaces with a hairline border on the left; yours are indigo on the right; a failure is a red-tinted bubble
   with its icon. Approval cards sit in the transcript at full column width (they are not bubbles: an approver reads them as a record).
   The composer stays pinned to the bottom of the screen on a long conversation. No gradients, no shadows, no motion. */

.chat-column { max-width: 820px; margin: 0 auto; }
#chat-log { display: flex; flex-direction: column; gap: var(--space-4); padding-bottom: var(--space-5); }
.chat-column .card { margin: 0; }

.msg { display: flex; }
.msg.user { justify-content: flex-end; }
.msg .bubble {
  padding: var(--space-3) var(--space-4);
  max-width: min(85%, 70ch);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-size: var(--font-size-base);
  line-height: var(--line-height-body);
}
.msg.user .bubble { background: var(--color-indigo); color: #fff; border-radius: var(--radius-lg) var(--radius-lg) var(--radius-sm) var(--radius-lg); }
.msg.agent .bubble { background: var(--color-surface); color: var(--color-text-primary); border: 1px solid var(--color-border); border-radius: var(--radius-lg) var(--radius-lg) var(--radius-lg) var(--radius-sm); }
.msg.agent.error .bubble { background: var(--color-danger-bg); border-color: var(--color-danger); color: var(--color-danger); display: flex; align-items: flex-start; gap: var(--space-2); }

/* the composer: pinned to the bottom of the screen, on the canvas colour so the transcript never shows through it */
.composer {
  position: sticky; bottom: 0;
  display: flex; gap: var(--space-2); align-items: center;
  padding: var(--space-3) 0 var(--space-4);
  background: var(--color-bg);
  border-top: 1px solid var(--color-border);
}
.composer input { flex: 1; min-width: 0; font-size: var(--font-size-base); padding: var(--space-3) var(--space-4); }
.composer .btn { flex: none; padding-block: var(--space-3); }
.composer.htmx-request .btn { opacity: 0.6; pointer-events: none; }      /* a request is in flight: the Send button steps back */

/* the option chooser the agent offers (each option posts the label as if you had typed it) */
.choice-bubble { max-width: min(92%, 70ch); display: flex; flex-direction: column; gap: var(--space-3); }
.choice-question { margin: 0; font-weight: var(--font-weight-medium); }
.choice-options { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.choice-option-form { margin: 0; }
.btn-choice { flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; }
.choice-option-detail { font-size: var(--font-size-xs); color: var(--color-text-secondary); font-weight: var(--font-weight-regular); }
.choice-manual-disclosure summary, .choice-manual-summary { cursor: pointer; font-size: var(--font-size-sm); color: var(--color-indigo); font-weight: var(--font-weight-medium); list-style: none; }
.choice-manual-disclosure summary::-webkit-details-marker, .choice-manual-disclosure summary::marker { display: none; content: ""; }
.choice-manual-disclosure summary:hover { text-decoration: underline; }
.choice-manual-form { display: flex; gap: var(--space-2); margin-top: var(--space-2); }
.choice-manual-form input { flex: 1; min-width: 0; }
.choice-manual-form-standalone { margin-top: 0; }

/* the one-time key download inside the transcript */
.key-download-fingerprint { color: var(--color-text-secondary); font-size: var(--font-size-sm); }

/* a compact variant of the page header, for a page that is mostly its content (chat) */
.page-header-compact { margin-bottom: var(--space-4); padding-bottom: var(--space-3); }
.page-header-compact h1 { font-size: var(--font-size-lg); }

@media (max-width: 800px) {
  .msg .bubble, .choice-bubble { max-width: 94%; }
  .chat-column .card-actions { justify-content: stretch; }
}

/* ===== Dashboard, costs and audit (phase 3, page group 2) ====================================================
   The three pages share one vocabulary: a page header (one h1), panels that open with their own h2, stat tiles on an auto-fit grid, tables that
   scroll sideways on a narrow screen rather than overflowing the page, numbers right-aligned in mono, and one link style for "go further". */

.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-3); }
.stat { min-width: 0; }
.stat .stat-value { overflow-wrap: anywhere; }
.stat-row-compact .stat { padding: var(--space-3); }
.stat-row-compact .stat .stat-value { font-size: var(--font-size-lg); }
.panel > .stat-row { margin-bottom: var(--space-4); }
.stat .stat-label { display: block; margin-top: var(--space-1); }

.table-scroll { overflow-x: auto; margin: 0 calc(var(--space-1) * -1); padding: 0 var(--space-1); }
.table-scroll table { min-width: 100%; }
.panel table + .section-note, .panel .table-scroll + .section-note { margin-top: var(--space-3); }
.section-note { font-size: var(--font-size-sm); }
.panel-link { margin-top: var(--space-3); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); }
td.cost-delta.num { white-space: nowrap; }

/* Audit: a labelled filter bar (it used the rejection-reason form's class before) and a pager. */
.filter-bar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-3); margin-bottom: var(--space-4); padding: var(--space-3) var(--space-4); background: var(--color-surface-sunk); border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.filter-bar .field { min-width: 140px; }
.filter-bar .field label { font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); color: var(--color-text-secondary); }
.filter-bar .filter-grow { flex: 1 1 220px; }
.filter-bar .filter-grow input { width: 100%; }
.filter-actions { display: flex; gap: var(--space-2); margin-left: auto; }
.results-summary { font-size: var(--font-size-sm); color: var(--color-text-secondary); margin-bottom: var(--space-2); }
.audit-table th:nth-child(1) { width: 11em; }
.audit-table th:nth-child(2) { width: 6.5em; }
.audit-table .audit-when { font-family: var(--font-mono); font-size: var(--font-size-xs); white-space: nowrap; color: var(--color-text-secondary); }
.audit-table td code { font-size: var(--font-size-xs); color: var(--color-text-secondary); }
.audit-table .audit-detail { font-size: var(--font-size-xs); color: var(--color-text-secondary); overflow-wrap: anywhere; max-width: 42ch; }
.pager { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-4); padding-top: var(--space-3); border-top: 1px solid var(--color-border); }
.pager-note { font-size: var(--font-size-sm); color: var(--color-text-secondary); }

@media (max-width: 900px) {
  .dashboard-row-2 { grid-template-columns: 1fr; }
  .filter-actions { margin-left: 0; }
}

/* ===== Connections (phase 3, page group 3): the list, connect-new, the guided flow and its grant summary, the resources and browse pages ===== */

/* an actions cell stays a real table cell; its buttons, forms and pop-open forms flow inline and wrap */
.row-actions { min-width: 14em; }
.row-actions > * { display: inline-block; vertical-align: top; margin: 0 var(--space-2) var(--space-2) 0; }
.row-actions form { margin-bottom: var(--space-2); }
.conn-table td { vertical-align: middle; }
.conn-when { white-space: nowrap; font-family: var(--font-mono); font-size: var(--font-size-xs); color: var(--color-text-secondary); }
.conn-detail { font-size: var(--font-size-xs); color: var(--color-text-secondary); overflow-wrap: anywhere; max-width: 36ch; }
.resource-table td code { overflow-wrap: anywhere; }
.reject-disclosure { display: inline-block; margin-top: var(--space-1); }
.reject-disclosure .reject-form { position: relative; width: min(320px, 100%); }
.reject-disclosure summary.btn { font-size: var(--font-size-xs); padding: 2px var(--space-3); }
.conn-table td:first-child .reject-disclosure { display: block; }

/* connect-new */
.panel .connection-form { max-width: 520px; width: 100%; }
.panel h3 { margin: var(--space-4) 0 var(--space-2); }
.panel h3:first-child { margin-top: 0; }
.panel h4 { font-size: var(--font-size-base); font-weight: var(--font-weight-semibold); margin: var(--space-3) 0 var(--space-1); }

/* guided flow */
.guided { display: flex; flex-direction: column; gap: var(--space-4); }
.guided > p, .guided > ol { max-width: 70ch; }
.grant-summary { background: var(--color-surface-sunk); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); }
.grant-summary h3 { margin: 0; display: flex; align-items: center; gap: var(--space-2); }
.grant-summary h3 .icon { color: var(--color-indigo); }
.grant-summary p { max-width: 70ch; }
.grant-summary ul { margin: 0; padding-left: var(--space-5); list-style: disc; }
.grant-summary li { margin-bottom: var(--space-1); }
.grant-summary .grant-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-2); padding: 0; list-style: none; }
.grant-summary .grant-list li { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-2) var(--space-3); margin: 0; font-size: var(--font-size-sm); color: var(--color-text-secondary); }
.grant-summary .grant-list li strong { display: block; color: var(--color-text-primary); }
.grant-summary details { border-top: 1px solid var(--color-border); padding-top: var(--space-2); }
.grant-summary summary { cursor: pointer; font-weight: var(--font-weight-medium); color: var(--color-indigo); }
.external-id .external-id-value { display: block; margin: var(--space-2) 0; padding: var(--space-3); background: var(--color-surface); border: 1px dashed var(--color-warning); border-radius: var(--radius-sm); font-size: var(--font-size-md); overflow-wrap: anywhere; user-select: all; }
.steps { padding-left: var(--space-5); display: flex; flex-direction: column; gap: var(--space-2); }
.cta-row { justify-content: flex-start; margin-top: 0; }
.kv { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--space-1) var(--space-4); font-size: var(--font-size-sm); margin: 0; }
.kv dt { color: var(--color-text-secondary); font-weight: var(--font-weight-medium); }
.kv dd { margin: 0; overflow-wrap: anywhere; }

/* resources and browse */
.region-bar { align-items: flex-end; }
.region-bar .field { flex: 1 1 260px; }
.browse-category { background: var(--color-surface); border-radius: var(--radius-md); padding: 0; margin: var(--space-2) 0; overflow: hidden; }
.browse-category > summary { padding: var(--space-3) var(--space-4); list-style: none; background: var(--color-surface); }
.browse-category > summary::-webkit-details-marker { display: none; }
.browse-category > summary::before { content: "\25B8"; color: var(--color-indigo); font-size: var(--font-size-sm); width: 1em; }
.browse-category[open] > summary::before { content: "\25BE"; }
.browse-category[open] > summary { background: var(--color-indigo-tint); border-bottom: 1px solid var(--color-border); }
.browse-category > summary:hover { background: var(--color-indigo-tint); }
.browse-category > p { padding: var(--space-3) var(--space-4) 0; color: var(--color-text-secondary); font-size: var(--font-size-sm); }
.browse-category > .browse-body, .browse-category > p ~ .browse-body { padding: var(--space-2) var(--space-4) var(--space-3); }
.browse-pill { font-weight: var(--font-weight-medium); color: var(--color-text-secondary); }
.browse-pill-ok { background: var(--color-success-bg); color: var(--color-success); }
.browse-pill-off { background: var(--color-warning-bg); color: var(--color-warning-text); }
.browse-pill-warn { background: var(--color-danger-bg); color: var(--color-danger); }
.browse-type { padding: var(--space-3) 0; }
.browse-type:first-child { border-top: none; }
.browse-type-head { flex-wrap: wrap; }
.browse-message { font-size: var(--font-size-sm); color: var(--color-text-secondary); max-width: 70ch; }
.browse-type .btn { margin-top: var(--space-2); }
.browse-body .notice { margin-bottom: var(--space-2); }

/* ===== Team and key pairs (phase 3, page group 4): /users, /roles with the shared tab strip, /keypairs ===== */

/* the Team tab strip sits directly under the page header as two quiet pills, the active one tinted indigo */
.team-tabs { border-bottom: none; gap: var(--space-1); margin-bottom: var(--space-4); }
.page-header + .team-tabs { margin-top: calc(var(--space-2) * -1); }
.team-tabs a { border-bottom: none; margin-bottom: 0; border-radius: var(--radius-md); padding: var(--space-1) var(--space-4); font-weight: var(--font-weight-medium); }
.team-tabs a:hover { background: var(--color-indigo-tint); }
.team-tabs a.active { background: var(--color-indigo-tint); color: var(--color-indigo); font-weight: var(--font-weight-semibold); }

.panel-intro { max-width: 72ch; color: var(--color-text-secondary); margin-bottom: var(--space-3); }
.panel h3 { padding-top: var(--space-3); border-top: 1px solid var(--color-border); }
.panel > .filter-bar + h3, .panel > .table-scroll + .filter-bar { margin-top: var(--space-3); }
.panel > .table-scroll + .filter-bar { margin-bottom: var(--space-4); }

.people-table td, .keypair-table td { vertical-align: middle; }
.keypair-table td:last-child > * { display: inline-block; vertical-align: top; }
.people-table td, .people-table th { border-bottom: 1px solid var(--color-border); }
.people-table .reject-disclosure > form, .reject-disclosure > form:not(.reject-form) { margin-top: var(--space-2); display: flex; flex-direction: column; gap: var(--space-2); background: var(--color-surface); border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); padding: var(--space-3); width: min(300px, 100%); font-size: var(--font-size-sm); }
.people-table .reject-disclosure > form p { color: var(--color-text-secondary); }
.people-table .reject-disclosure summary { list-style: none; font-size: var(--font-size-xs); padding: 2px var(--space-3); }
.people-table .reject-disclosure summary::-webkit-details-marker { display: none; }
.people-table td:nth-child(5) { min-width: 11em; }
.people-table td:nth-child(5) form { margin-top: var(--space-1); }

.viewing-line { margin-bottom: var(--space-3); color: var(--color-text-secondary); }
.viewing-line strong { color: var(--color-text-primary); }
.keypair-table td code { font-size: var(--font-size-xs); overflow-wrap: anywhere; }
.keypair-table td:nth-child(2) code { color: var(--color-text-secondary); }
.keypair-table td:nth-child(3) { font-family: var(--font-mono); font-size: var(--font-size-xs); color: var(--color-text-secondary); white-space: nowrap; }
.keypair-table td:last-child { min-width: 7em; }

/* ===== Platform admin console (phase 3, page group 5): tenants, detail, new tenant, console home, settings, access sessions, the support views ===== */

.page-header .crumb { font-size: var(--font-size-sm); margin: 0 0 var(--space-1); max-width: none; }
.page-header h1 + p code { font-size: var(--font-size-sm); margin-right: var(--space-1); }

.link-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-3); margin: var(--space-3) 0; padding: 0; list-style: none; }
.link-tiles li { border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); background: var(--color-surface); color: var(--color-text-secondary); font-size: var(--font-size-sm); }
.link-tiles li a { display: block; font-weight: var(--font-weight-semibold); font-size: var(--font-size-md); margin-bottom: var(--space-1); text-decoration: none; }
.link-tiles li a:hover { text-decoration: underline; }

.stack-form { display: flex; flex-direction: column; gap: var(--space-3); max-width: 520px; width: 100%; }
.stack-form .field label { font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); color: var(--color-text-secondary); }
.stack-form textarea { min-height: 5em; }
.form-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.stack-form-wide { max-width: 760px; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.stack-form-wide .field-wide { grid-column: 1 / -1; }
.invite-link { width: 100%; font-family: var(--font-mono); font-size: var(--font-size-sm); margin: var(--space-2) 0; padding: var(--space-3); border: 1px dashed var(--color-warning); border-radius: var(--radius-sm); background: var(--color-surface); resize: vertical; }
.panel-danger { border-color: var(--color-danger); }
.panel-danger h3 { color: var(--color-danger); }

.kv-table { max-width: 640px; }
.kv-table th { width: 11em; background: none; border-bottom: 1px solid var(--color-border); font-weight: var(--font-weight-medium); color: var(--color-text-secondary); }
.tenant-table td:first-child { min-width: 14em; }
.tenant-table code { font-size: var(--font-size-xs); color: var(--color-text-secondary); }

.support-banner { margin-bottom: var(--space-3); }
.page-header + .support-banner { margin-top: calc(var(--space-2) * -1); }
.support-tabs a.btn { background: transparent; border: none; color: var(--color-text-secondary); font-size: var(--font-size-base); font-weight: var(--font-weight-medium); }
.support-tabs a.btn:hover { background: var(--color-indigo-tint); color: var(--color-indigo-hover); }
.support-tabs a.btn.active { background: var(--color-indigo-tint); color: var(--color-indigo); font-weight: var(--font-weight-semibold); }
.support-banner + .support-tabs { margin-top: 0; }