/* Kuiper dashboard. Follows docs/brand-guidlines.md with its "Product UI
   amendment (2026-09)": softened blue-slate neutrals instead of pure black,
   Ice for live/healthy state, one vivid secondary (Iris, an electric violet)
   for action and selection, and a small radius scale. 1px borders; the only
   elevation is a soft shadow on floating layers (popovers, palette, tooltip).
   Shared by the tenant and admin dashboards. */

:root {
  /* Brand palette. */
  --void: #04060A;
  --space: #0A0F15;
  --hull: #18212B;
  --regolith: #7D8A97;
  --frost: #E6F1F4;
  --ice: #7CE0EE;
  --iris: #7358F5;              /* the vivid secondary (amendment 2026-09) */

  /* Roles. Every rule below uses these, never the palette or a literal
     colour, so a theme is one block of overrides. Dark is the default and
     the brand's identity; the light overrides follow (Resolutions R-67).
     Contrast ratios are WCAG 2.x. */
  color-scheme: dark;
  --bg: #0C1118;                /* page: deep blue-slate, lifted off Void */
  --surface: #131A23;           /* cards, panels, popovers */
  --field: #0F151D;             /* inputs */
  --well: #0F151D;              /* recessed panes inside cards: log lines, previews, checklist, command lines */
  --line: #243040;              /* 1px borders, rules, skeletons; never text */
  --line-hover: #344254;        /* border on hover, dashed drop zones */
  --hover: #1A2330;             /* row / item hover */
  --text: #DCE5EB;              /* softened Frost: 14.8:1 on bg, 13.7:1 on surface */
  --text-2: #8B98A6;            /* secondary text: 6.4:1 on bg, 6.0:1 on surface, 5.4:1 on hover */
  --accent: var(--ice);         /* Ice as a fill: the live badge */
  --accent-ink: var(--ice);     /* Ice as ink: live/healthy dot, running status, terminal prompt (11.5:1) */
  --on-accent: #0C1118;         /* text on an Ice fill (12.4:1) */
  --vivid: var(--iris);         /* Iris as a fill: primary button, meters, active indicators */
  --vivid-hover: #6B4FF0;       /* primary button hover (white on it 5.3:1) */
  --vivid-ink: #A594FF;         /* Iris as ink: link hover, selected icon, ticks (6.9:1 on surface) */
  --on-vivid: #FFFFFF;          /* text on an Iris fill (4.7:1) */
  --vivid-soft: rgba(115, 88, 245, .16);  /* tint behind selected items, kbd, counts */
  --vivid-ring: rgba(140, 118, 255, .6);  /* focus ring */
  /* Error colour: the brand's "open decision" (the one allowed exception).
     A restrained red, lifted slightly for the slate ground (5.2:1 on surface).
     Used only for failures and destructive hovers. */
  --error: #F2555A;
  --mark-filter: none;          /* mark.svg is drawn in Frost */
  --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%238B98A6' stroke-width='1.5'/%3E%3C/svg%3E");
  --shadow-pop: 0 12px 24px rgba(0, 0, 0, .4), 0 2px 6px rgba(0, 0, 0, .25);
  --card-hi: inset 0 1px 0 rgba(255, 255, 255, .03);  /* 1px top highlight on dark cards */
  --scrim: rgba(5, 8, 12, .6);

  /* Radius scale (amendment 2026-09; supersedes square corners in the product UI). */
  --r-xs: 4px;                  /* tiny chips: kbd, tag, count, checkbox, skeleton */
  --r-sm: 6px;                  /* controls: buttons, inputs, selects, nav and menu items */
  --r: 8px;                     /* inner blocks: notices, error boxes, previews, drop zone, tooltip */
  --r-lg: 12px;                 /* containers: cards, lists, section cards, popovers, log viewer */
  --r-pill: 999px;              /* badges, meters */

  --sans: "Sora", "Helvetica Neue", Helvetica, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Menlo, monospace;

  --gutter: 32px;
}

/* Light theme: a soft cool grey-white page with white cards, not stark white.
   Applies when the OS prefers light and the viewer has not forced dark, or
   when the viewer picks light (theme.js sets data-theme). The two blocks must
   stay identical. Ice fails contrast as text on a light ground, so Ice-as-ink
   becomes a darker Ice-hued teal; Iris darkens so white on it still passes. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;
    --bg: #F2F5F8;              /* cool grey-white page */
    --surface: #FFFFFF;         /* white cards */
    --field: #FFFFFF;
    --well: #F7F9FB;            /* a faint recess on white cards */
    --line: #DCE3EA;            /* decorative only */
    --line-hover: #C2CCD6;
    --hover: #EDF1F5;
    --text: #18202A;            /* 15.0:1 on bg */
    --text-2: #56626F;          /* 5.7:1 on bg, 6.2:1 on surface, 5.4:1 on hover */
    --accent: #7CE0EE;          /* Ice fill; dark text on it 12.4:1 */
    --accent-ink: #08707E;      /* Ice hue, 5.3:1 on bg */
    --on-accent: #0C1118;
    --vivid: #6547F0;           /* white on it 5.7:1 */
    --vivid-hover: #5A3CE6;     /* white on it 6.5:1 */
    --vivid-ink: #5B3FE6;       /* 6.4:1 on surface, 5.8:1 on bg */
    --on-vivid: #FFFFFF;
    --vivid-soft: rgba(101, 71, 240, .09);
    --vivid-ring: rgba(101, 71, 240, .45);
    --error: #C4292E;           /* 5.2:1 on bg */
    --mark-filter: brightness(0); /* flatten the Frost mark to Void */
    --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%2356626F' stroke-width='1.5'/%3E%3C/svg%3E");
    --shadow-pop: 0 12px 24px rgba(16, 24, 40, .12), 0 2px 6px rgba(16, 24, 40, .06);
    --card-hi: none;
    --scrim: rgba(24, 32, 42, .28);
  }
}
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #F2F5F8;
  --surface: #FFFFFF;
  --field: #FFFFFF;
  --well: #F7F9FB;
  --line: #DCE3EA;
  --line-hover: #C2CCD6;
  --hover: #EDF1F5;
  --text: #18202A;
  --text-2: #56626F;
  --accent: #7CE0EE;
  --accent-ink: #08707E;
  --on-accent: #0C1118;
  --vivid: #6547F0;
  --vivid-hover: #5A3CE6;
  --vivid-ink: #5B3FE6;
  --on-vivid: #FFFFFF;
  --vivid-soft: rgba(101, 71, 240, .09);
  --vivid-ring: rgba(101, 71, 240, .45);
  --error: #C4292E;
  --mark-filter: brightness(0);
  --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%2356626F' stroke-width='1.5'/%3E%3C/svg%3E");
  --shadow-pop: 0 12px 24px rgba(16, 24, 40, .12), 0 2px 6px rgba(16, 24, 40, .06);
  --card-hi: none;
  --scrim: rgba(24, 32, 42, .28);
}

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

html { background: var(--bg); -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-weight: 300;
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--vivid); color: var(--on-vivid); }

:focus { outline: none; }
:focus-visible { outline: 2px solid var(--vivid-ring); outline-offset: 2px; }

a { color: var(--text); text-decoration: none; }
a:hover { color: var(--vivid-ink); }
p a, .prose a { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }

h1, h2, h3 { font-weight: 200; margin: 0; letter-spacing: 0; }
h1 { font-size: 36px; line-height: 1.15; }
h2 { font-size: 24px; line-height: 1.2; }
h3 { font-size: 18px; line-height: 1.3; font-weight: 300; }
p { margin: 0; }

code, .mono { font-family: var(--mono); font-weight: 400; }
.muted { color: var(--text-2); }
.small { font-size: 13px; }

/* ---------- Top bar ---------- */

.topbar {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 16px var(--gutter);
  border-bottom: 1px solid var(--line);
}
.lockup { display: inline-flex; align-items: center; gap: 10px; color: var(--text); }
.lockup:hover { color: var(--text); }
.lockup img { width: 22px; height: 22px; display: block; filter: var(--mark-filter); }
.wordmark { font-family: var(--sans); font-weight: 200; letter-spacing: .14em; font-size: 20px; line-height: 1; }
.topnav { display: flex; gap: 20px; font-size: 14px; }
.topnav a { color: var(--text-2); }
.topnav a:hover, .topnav a[aria-current="page"] { color: var(--text); }
.topbar .org { margin-left: auto; font-family: var(--mono); font-size: 12px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }

/* ---------- Page ---------- */

.page { max-width: 1200px; margin: 0 auto; padding: 48px var(--gutter) 80px; }

.eyebrow {
  font-family: var(--mono);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--text-2);
}

.crumbs { font-family: var(--mono); font-size: 12px; color: var(--text-2); margin-bottom: 16px; display: flex; flex-wrap: wrap; gap: 8px; }
.crumbs a { color: var(--text-2); }
.crumbs a:hover { color: var(--vivid-ink); }

.page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 24px; margin-bottom: 40px; }
.page-head .title { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.page-head h1 { overflow-wrap: anywhere; }
.meta { display: flex; flex-wrap: wrap; gap: 8px 24px; font-family: var(--mono); font-size: 13px; color: var(--text-2); }
.meta a { color: var(--text); }
.meta a:hover { color: var(--vivid-ink); }

.section { margin-top: 56px; }
.section:first-child { margin-top: 0; }
.section-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 16px; margin-bottom: 16px; }
.section-head .eyebrow { margin-bottom: 8px; display: block; }
.section-note { color: var(--text-2); font-size: 14px; margin: -8px 0 16px; max-width: 72ch; }

/* ---------- Tabs ---------- */

.tabs {
  display: flex;
  gap: 32px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 40px;
  overflow-x: auto;
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tabs a {
  font-family: var(--sans);
  font-weight: 400;
  font-size: 14px;
  letter-spacing: .04em;
  color: var(--text-2);
  padding: 0 0 14px;
  border-bottom: 1px solid transparent;
  margin-bottom: -1px;
  white-space: nowrap;
}
.tabs a:hover { color: var(--text); }
.tabs a[aria-current="page"] { color: var(--text); border-bottom: 2px solid var(--vivid); padding-bottom: 13px; }

/* ---------- Panels ---------- */

.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--card-hi); padding: 24px; }
.panel + .panel { margin-top: 16px; }

.notice {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 24px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 16px 24px;
  margin-bottom: 40px;
}
.notice p { max-width: 72ch; }
.notice .reason { font-family: var(--mono); font-size: 13px; color: var(--text-2); display: block; margin-top: 4px; }

.error-box {
  border: 1px solid var(--error);
  border-radius: var(--r);
  background: var(--surface);
  padding: 14px 20px;
  margin: 16px 0;
}
.error-box .msg { color: var(--error); font-weight: 400; font-size: 14px; }
.error-box ul { margin: 8px 0 0; padding: 0 0 0 18px; font-family: var(--mono); font-size: 13px; color: var(--text); line-height: 1.7; }
.error-box li { overflow-wrap: anywhere; }

.flash { font-family: var(--mono); font-size: 13px; color: var(--text-2); margin: 12px 0 0; }

.empty { color: var(--text-2); font-size: 14px; padding: 32px 20px; border: 1px solid var(--line); border-radius: var(--r); }
.empty-hero { padding: 64px 32px; border: 1px solid var(--line); border-radius: var(--r-lg); display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.empty-hero img { width: 48px; height: 48px; opacity: .5; filter: var(--mark-filter); }

/* ---------- Tables ---------- */

.table-wrap { overflow-x: auto; border-top: 1px solid var(--line); -webkit-overflow-scrolling: touch; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 14px 20px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-family: var(--mono); font-weight: 400; font-size: 12px; color: var(--text-2); white-space: nowrap; }
td { font-family: var(--mono); font-weight: 400; font-size: 13px; color: var(--text); line-height: 1.6; }
td.wrap { overflow-wrap: anywhere; min-width: 16ch; }
td.nowrap, th.nowrap { white-space: nowrap; }
td.num, th.num { text-align: right; white-space: nowrap; }
td.actions { text-align: right; white-space: nowrap; }
td.actions > * + * { margin-left: 8px; }
td a { color: var(--text); }
td a:hover { color: var(--vivid-ink); text-decoration: underline; text-underline-offset: 3px; }
td .sub { display: block; color: var(--text-2); font-size: 12px; }
td .err { display: block; color: var(--error); font-size: 12px; margin-top: 4px; overflow-wrap: anywhere; }
.tag { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-2); border: 1px solid var(--line); border-radius: var(--r-xs); padding: 1px 6px; margin-left: 8px; white-space: nowrap; }

/* ---------- Status ---------- */

.status { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-weight: 400; font-size: 13px; color: var(--text-2); white-space: nowrap; }
.status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--text-2); flex: none; }
.status.is-running { color: var(--text); }
.status.is-running::before { background: var(--accent-ink); }
.status.is-error { color: var(--error); }
.status.is-error::before { background: var(--error); }

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--sans);
  font-weight: 300;
  font-size: 15px;
  line-height: 1.4;
  letter-spacing: .04em;
  padding: 13px 23px; /* 14x24 including the 1px border */
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--text);
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  transition: background-color .12s, border-color .12s, color .12s;
}
.btn:hover { border-color: var(--line-hover); background: var(--hover); color: var(--text); }
.btn.primary { background: var(--vivid); border-color: var(--vivid); color: var(--on-vivid); font-weight: 500; }
.btn.primary:hover { background: var(--vivid-hover); border-color: var(--vivid-hover); color: var(--on-vivid); }
@media (prefers-reduced-motion: reduce) { .btn { transition: none; } }
.btn.small { font-size: 13px; padding: 5px 12px; font-weight: 400; }
.btn.danger:hover { border-color: var(--error); color: var(--error); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .45; cursor: default; pointer-events: none; }

.linkish { background: none; border: 0; padding: 0; font: inherit; color: var(--text-2); cursor: pointer; }
.linkish:hover { color: var(--vivid-ink); }
.linkish.danger:hover { color: var(--error); }

/* Colour theme toggle (theme.js). The button reads "Theme" and CSS appends
   the current choice, so the markup never has to know it. */
[data-theme-toggle] { white-space: nowrap; }
[data-theme-toggle]::after { content: ": system"; }
:root[data-theme="light"] [data-theme-toggle]::after { content: ": light"; }
:root[data-theme="dark"] [data-theme-toggle]::after { content: ": dark"; }

/* ---------- Forms ---------- */

form { margin: 0; }
.form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px; }
.form.stack { flex-direction: column; align-items: stretch; }
.form.stack > .field, .form.stack > .form-actions { flex: 0 0 auto; }
.field { display: flex; flex-direction: column; gap: 8px; min-width: 0; flex: 1 1 200px; }
.field.grow { flex: 3 1 320px; }
.field.narrow { flex: 0 1 160px; }
.field > span { font-family: var(--mono); font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: var(--text-2); }
.field .hint { font-family: var(--sans); font-size: 13px; letter-spacing: 0; text-transform: none; color: var(--text-2); }

input[type="text"], input[type="password"], input[type="url"], input[type="number"], select, .select-btn, textarea {
  width: 100%;
  font-family: var(--mono);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text);
  background-color: var(--field);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 12px 14px;
  appearance: none;
  -webkit-appearance: none;
}
input::placeholder, textarea::placeholder { color: var(--text-2); opacity: .7; }
input:hover, select:hover, .select-btn:hover:not(:disabled), textarea:hover { border-color: var(--line-hover); }
input:focus, select:focus, .select-btn:focus-visible, .select-btn[aria-expanded="true"], textarea:focus { border-color: var(--vivid); box-shadow: 0 0 0 3px var(--vivid-soft); outline: none; }
textarea { min-height: 280px; resize: vertical; line-height: 1.7; tab-size: 2; }
select, .select-btn {
  padding-right: 36px;
  background-image: var(--chevron);
  background-position: calc(100% - 14px) 50%;
  background-size: 10px 6px;
  background-repeat: no-repeat;
}
/* Themed dropdowns (select.js): the button looks like the field; the real
   <select> stays in the form, visually hidden. */
.select-btn { display: flex; align-items: center; min-width: 0; text-align: left; cursor: pointer; }
.select-btn .select-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.select-btn:disabled { opacity: .55; cursor: not-allowed; }
.select-btn.invalid { border-color: var(--error); }
select.select-native {
  position: absolute !important; width: 1px !important; min-width: 0 !important; height: 1px !important; padding: 0 !important; margin: 0 !important;
  opacity: 0 !important; pointer-events: none !important; overflow: hidden; clip-path: inset(50%); border: 0 !important;
}
label:has(> select.select-native), .field:has(> select.select-native) { position: relative; }
.pop.select-pop { inset: auto; margin: 0; padding: 0; max-height: min(420px, calc(100vh - 16px)); }
.pop.select-pop .pop-list { max-height: 320px; }
.pop.select-pop .pop-item { font-family: var(--mono); font-size: 13px; }
.pop.select-pop .pop-item.active { background: var(--hover); }
.pop.select-pop .pop-item[aria-selected="true"] { background: var(--vivid-soft); }
.pop.select-pop .pop-item[aria-selected="true"].active { background: var(--vivid-soft); box-shadow: inset 0 0 0 1px var(--vivid-ring); }
.pop.select-pop .pop-item.disabled { opacity: .5; cursor: default; }
.pop.select-pop .pop-item > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.check { display: inline-flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 13px; color: var(--text-2); cursor: pointer; user-select: none; }
.check input { appearance: none; -webkit-appearance: none; width: 15px; height: 15px; border: 1px solid var(--text-2); border-radius: var(--r-xs); background: transparent; margin: 0; cursor: pointer; display: grid; place-content: center; }
.check input:checked { background: var(--vivid); border-color: var(--vivid); }
.check input:checked::after { content: ""; width: 7px; height: 7px; border-radius: 2px; background: var(--on-vivid); }
.check:hover { color: var(--text); }

.rows { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.rows .row { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.rows .row input[type="text"] { flex: 1 1 160px; width: auto; }

.form-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* ---------- Key / value ---------- */

/* Rounded hairline grids (.kv, .stats): the container draws the outer border
   and clips; each cell draws its right and bottom rule and overhangs its track
   by 1px, so the rules on the outer edge fall outside the padding box and are
   clipped away instead of doubling the container border. */
.kv { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.kv > div { padding: 16px 20px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); margin: 0 -1px -1px 0; min-width: 0; }
.kv dt { margin-bottom: 6px; }
.kv dd { margin: 0; font-family: var(--mono); font-size: 13px; overflow-wrap: anywhere; }
dl { margin: 0; }

/* ---------- Stat tiles (usage) ---------- */

.stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: var(--surface); box-shadow: var(--card-hi); }
.stat { padding: 24px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); margin: 0 -1px -1px 0; display: flex; flex-direction: column; gap: 12px; }
.stat .value { font-family: var(--mono); font-weight: 400; font-size: 28px; line-height: 1.1; color: var(--text); }
.stat .value small { font-size: 13px; color: var(--text-2); margin-left: 6px; }
.stat .sub { font-family: var(--mono); font-size: 12px; color: var(--text-2); }
.meter { height: 6px; background: var(--line); border-radius: var(--r-pill); overflow: hidden; position: relative; }
.meter > i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--vivid); border-radius: var(--r-pill); }
.stats + .meter { margin-top: 12px; }

/* ---------- Terminal ---------- */

.terminal {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  font-family: var(--mono);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.85;
  color: var(--text-2);
  padding: 16px 20px;
  margin: 0;
  max-height: 520px;
  overflow: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.terminal .prompt { color: var(--accent-ink); }
.terminal .cmd { color: var(--text); }
.terminal-head { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; border: 1px solid var(--line); border-bottom: 0; border-radius: var(--r) var(--r) 0 0; padding: 10px 20px; background: var(--surface); }
.terminal-head + .terminal { border-top-left-radius: 0; border-top-right-radius: 0; }
.terminal-head .eyebrow { letter-spacing: .16em; }

.secret-once { font-family: var(--mono); font-size: 13px; overflow-wrap: anywhere; }

/* ---------- Loading ---------- */

.skeleton { display: block; background: var(--line); border-radius: var(--r-xs); height: 14px; animation: kpr-pulse 1.6s ease-in-out infinite; }
.skeleton + .skeleton { margin-top: 14px; }
.skeleton.h1 { height: 36px; width: 280px; max-width: 70%; }
.skeleton.row { height: 44px; }
.skel-group { display: flex; flex-direction: column; gap: 1px; }
.skel-group .skeleton { margin: 0; }
@keyframes kpr-pulse { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .skeleton { animation: none; } }

/* ---------- Sign in ---------- */

.signin { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 48px 16px; }
.signin-inner { width: 100%; max-width: 440px; display: flex; flex-direction: column; gap: 32px; }
.signin .lockup img { width: 40px; height: 40px; }
.signin .wordmark { font-size: 34px; }
.signin h1 { font-size: 32px; }
.signin p { color: var(--text-2); }
.signin footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; font-family: var(--mono); font-size: 11px; color: var(--text-2); letter-spacing: .08em; }

.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; }

/* ---------- Small screens ---------- */

@media (max-width: 860px) {
  .split { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 640px) {
  :root { --gutter: 16px; }
  body { font-size: 15px; }
  .page { padding-top: 32px; padding-bottom: 64px; }
  h1 { font-size: 28px; }
  h2 { font-size: 22px; }
  .tabs { gap: 24px; margin-bottom: 32px; }
  .section { margin-top: 48px; }
  th, td { padding: 12px 14px; }
  .panel { padding: 16px; }
  .notice { padding: 16px; }
  .form > .btn, .form-actions > .btn { flex: 1 1 auto; }
  .form:not(.stack) > .field { flex-basis: 100%; }
  .terminal { font-size: 13px; padding: 12px 14px; }
  .stat .value { font-size: 24px; }
}

/* ---------- File inputs ---------- */

input[type="file"] { font-family: var(--mono); font-size: 13px; color: var(--text-2); padding: 0; border: 0; background: none; }
input[type="file"]::file-selector-button {
  font: inherit; color: var(--text); background: transparent;
  border: 1px solid var(--line); border-radius: var(--r-sm); padding: 8px 14px; margin-right: 12px; cursor: pointer;
}
input[type="file"]::file-selector-button:hover { border-color: var(--line-hover); background: var(--hover); }

/* ======================================================================
   App shell (tenant dashboard, Resolutions R-69). A Vercel-like frame:
   sidebar navigation, a top bar with the project switcher, dense panels.
   Hairlines and rounded containers; Ice only for live/healthy state, Iris
   (--vivid) for the primary action, selection and progress. Everything is
   scoped to .app so the admin dashboard keeps its own layout.
   ====================================================================== */

:root { --sidebar-w: 248px; --bar-h: 56px; }

.i { width: 16px; height: 16px; flex: none; display: inline-block; vertical-align: -3px; }
.i.lg { width: 20px; height: 20px; }
.i.xl { width: 28px; height: 28px; }
.spin { animation: kpr-spin 1s linear infinite; }
@keyframes kpr-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spin { animation: none; } }

.app { display: flex; min-height: 100vh; font-size: 14px; }
.app .btn { font-size: 14px; padding: 7px 14px; gap: 8px; }
.app .btn.small { font-size: 13px; padding: 4px 10px; }
.app .btn.icon { padding: 7px; }
.app .btn.primary { font-weight: 500; }
.app h1 { font-size: 28px; }
.app h2 { font-size: 20px; }
.app .section { margin-top: 40px; }
.app .section:first-child { margin-top: 0; }
.app input[type="text"], .app input[type="password"], .app input[type="url"], .app select, .app .select-btn, .app textarea { font-size: 13px; padding: 8px 12px; }
.app select, .app .select-btn { padding-right: 32px; }
.app th, .app td { padding: 12px 16px; }
/* Form-and-table sections render as cards inside the shell. */
.app .content .section { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--card-hi); padding: 20px; margin-top: 16px; }
.app .content .section:first-child { margin-top: 0; }
.app .content .section h2 { font-size: 18px; font-weight: 300; }
.app .content .section .empty { border-style: dashed; }
.app .content .section .table-wrap { margin: 0 -20px; }
.app .content .section .table-wrap th:first-child, .app .content .section .table-wrap td:first-child { padding-left: 20px; }
.app .card .table-wrap { border-top: 0; }
.app .card .empty { border: 0; }
/* A table that closes a section card: its last row rule would sit 20px above
   the card's rounded bottom edge, so drop it and let the card border close. */
.app .content .section > .table-wrap:last-child tr:last-child td { border-bottom: 0; }
.app .content .section > .table-wrap:last-child { margin-bottom: -20px; }

/* Sidebar */
.sidebar {
  position: sticky; top: 0; height: 100vh; width: var(--sidebar-w); flex: none;
  display: flex; flex-direction: column; gap: 12px;
  border-right: 1px solid var(--line); background: var(--bg); padding: 12px 8px;
  overflow-y: auto; z-index: 30;
}
.sb-org { display: flex; align-items: center; gap: 10px; padding: 8px 10px; color: var(--text); border-radius: var(--r-sm); }
.sb-org:hover { background: var(--hover); color: var(--text); }
.sb-org img { width: 20px; height: 20px; filter: var(--mark-filter); }
.sb-org .name { font-weight: 400; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1; }
.sb-org .wordmark { font-size: 15px; }
.sb-find {
  display: flex; align-items: center; gap: 10px; width: 100%;
  border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); color: var(--text-2);
  font: inherit; font-size: 13px; padding: 7px 10px; cursor: pointer; text-align: left;
}
.sb-find:hover { border-color: var(--line-hover); color: var(--text); }
.sb-find span { flex: 1; }
kbd {
  font-family: var(--mono); font-size: 11px; line-height: 16px; min-width: 18px; text-align: center; display: inline-block;
  border: 1px solid transparent; border-radius: var(--r-xs); padding: 0 5px; color: var(--vivid-ink); background: var(--vivid-soft);
}
.sb-nav { display: flex; flex-direction: column; gap: 2px; }
.sb-nav a, .sb-nav button {
  position: relative; display: flex; align-items: center; gap: 12px; padding: 7px 10px; border-radius: var(--r-sm);
  color: var(--text-2); font-weight: 400; font-size: 14px; letter-spacing: .01em;
  background: none; border: 0; font-family: var(--sans); cursor: pointer; text-align: left; width: 100%;
}
.sb-nav a:hover, .sb-nav button:hover { background: var(--hover); color: var(--text); }
/* Selected: an Iris tint, Iris icon and a short Iris bar on the leading edge. */
.sb-nav a[aria-current="page"] { background: var(--vivid-soft); color: var(--text); }
.sb-nav a[aria-current="page"] .i { color: var(--vivid-ink); }
.sb-nav a[aria-current="page"]::before {
  content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--vivid);
}
.sb-nav .sep { height: 1px; background: var(--line); margin: 8px 2px; }
.sb-nav .label { font-family: var(--mono); font-size: 10px; letter-spacing: .24em; text-transform: uppercase; color: var(--text-2); padding: 10px 10px 4px; }
.sb-foot { margin-top: auto; display: flex; flex-direction: column; gap: 2px; border-top: 1px solid var(--line); padding-top: 8px; }
.sb-who { display: flex; align-items: center; gap: 10px; padding: 8px 10px; font-family: var(--mono); font-size: 12px; color: var(--text-2); min-width: 0; }
.sb-who span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Main column and top bar */
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.bar {
  position: sticky; top: 0; z-index: 20; height: var(--bar-h);
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 16px;
  padding: 0 24px; border-bottom: 1px solid var(--line); background: var(--bg);
}
.bar-left { display: flex; align-items: center; gap: 8px; min-width: 0; }
.bar-title { font-size: 14px; font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar-right { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.bar .menu-btn { display: none; }
.switcher {
  display: inline-flex; align-items: center; gap: 8px; min-width: 0;
  background: none; border: 0; border-radius: var(--r-sm); color: var(--text); font: inherit; font-weight: 400; cursor: pointer; padding: 6px 8px;
}
.switcher:hover { background: var(--hover); }
.switcher .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crumb-sep { color: var(--line-hover); }
.bar-crumbs { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 14px; color: var(--text-2); }
.bar-crumbs a { color: var(--text-2); }
.bar-crumbs a:hover { color: var(--text); }
.bar-crumbs .cur { color: var(--text); }

.content { width: 100%; max-width: 1280px; margin: 0 auto; padding: 28px 24px 80px; }
.content.narrow { max-width: 720px; }
.head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px; margin-bottom: 24px; }
.head h1 { font-size: 28px; }
.head .actions { display: flex; flex-wrap: wrap; gap: 8px; }
.sub-title { font-size: 20px; font-weight: 200; margin: 40px 0 16px; }

/* Cards */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--card-hi); }
.card + .card { margin-top: 16px; }
/* Children that paint a background or a hover must follow the card's corners. */
.card > :first-child { border-top-left-radius: calc(var(--r-lg) - 1px); border-top-right-radius: calc(var(--r-lg) - 1px); }
.card > :last-child { border-bottom-left-radius: calc(var(--r-lg) - 1px); border-bottom-right-radius: calc(var(--r-lg) - 1px); }
.card-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; padding: 12px 16px; border-bottom: 1px solid var(--line); min-height: 56px; }
.card-head h3 { font-size: 14px; font-weight: 400; display: flex; align-items: center; gap: 8px; }
.card-head .actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.card-body { padding: 16px; }
.card-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px; border-top: 1px solid var(--line); color: var(--text-2); font-size: 13px; }
.card-foot code { color: var(--text); }
.count { font-family: var(--mono); font-size: 11px; color: var(--vivid-ink); background: var(--vivid-soft); border-radius: var(--r-pill); padding: 1px 8px; }
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 16px; }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.grid2 > .card, .grid3 > .card { margin-top: 0; }
.sb-nav [data-theme-toggle]::after { margin-left: -12px; color: var(--text-2); }

/* Production deployment card */
.prod { display: grid; grid-template-columns: minmax(0, 400px) minmax(0, 1fr); gap: 24px; padding: 16px; }
.preview {
  background: var(--well); border: 1px solid var(--line); border-radius: var(--r); height: 250px; overflow: hidden; position: relative;
  font-family: var(--mono); font-size: 11px; line-height: 1.7; color: var(--text-2); padding: 12px 14px; display: block;
}
.preview .pv-head { display: flex; justify-content: space-between; gap: 8px; color: var(--text-2); letter-spacing: .16em; text-transform: uppercase; font-size: 10px; margin-bottom: 8px; }
.preview .pv-line { overflow: hidden; text-overflow: ellipsis; white-space: pre; }
.preview::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 40px; background: linear-gradient(transparent, var(--well)); }
.facts { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.fact .k { color: var(--text-2); font-size: 13px; margin-bottom: 4px; display: flex; align-items: center; gap: 6px; }
.fact .v { font-size: 14px; font-weight: 400; overflow-wrap: anywhere; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.fact .v.mono { font-family: var(--mono); font-size: 13px; }
.fact-row { display: flex; flex-wrap: wrap; gap: 18px 40px; }
.ext { display: inline-flex; align-items: center; gap: 4px; color: var(--text); }
.ext .i { width: 13px; height: 13px; color: var(--text-2); }
.src-line { display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 13px; }
.src-line .i { color: var(--text-2); }

/* Status dot */
.dot { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; font-weight: 400; }
.dot::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--text-2); flex: none; }
.dot.ok::before { background: var(--accent-ink); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-ink) 18%, transparent); }
.dot.err { color: var(--error); }
.dot.err::before { background: var(--error); }
.dot.busy::before { background: transparent; border: 1.5px solid var(--vivid-ink); animation: kpr-pulse 1.2s ease-in-out infinite; }
.dot .dur { color: var(--text-2); font-family: var(--mono); font-size: 12px; font-weight: 400; }
.badge {
  display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 11px;
  border: 1px solid var(--line); border-radius: var(--r-pill); padding: 1px 9px; color: var(--text-2); white-space: nowrap;
}
.badge.live { border-color: var(--accent); background: var(--accent); color: var(--on-accent); }

/* Lists (Vercel-style rows). The list clips so row hovers follow its corners;
   row menus open as fixed popovers, so nothing needs to escape it. */
.list { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--card-hi); overflow: hidden; }
.list-row {
  display: grid; align-items: center; gap: 16px; padding: 12px 16px; border-bottom: 1px solid var(--line);
  grid-template-columns: minmax(120px, 1.2fr) minmax(130px, 1fr) minmax(120px, 1fr) minmax(0, 2fr) auto auto;
  font-size: 13px; color: var(--text);
}
.list-row:last-child { border-bottom: 0; }
.list-row:hover { background: var(--hover); }
.list-row .id { font-family: var(--mono); font-weight: 400; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list-row .id small { display: block; color: var(--text-2); font-size: 12px; }
.list-row .when { color: var(--text-2); font-family: var(--mono); font-size: 12px; white-space: nowrap; text-align: right; }
.list-row .src { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; min-width: 0; font-family: var(--mono); font-size: 12px; color: var(--text-2); }
.list-row .src span { display: inline-flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list-row .src .i { width: 14px; height: 14px; }
.list-row .err-line { grid-column: 1 / -1; color: var(--error); font-family: var(--mono); font-size: 12px; margin-top: -6px; overflow-wrap: anywhere; }
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.filters select, .filters .select-btn, .filters input { width: auto; min-width: 160px; }

/* Menus, popovers, palette */
.pop {
  position: fixed; z-index: 60; min-width: 220px; max-width: min(420px, calc(100vw - 16px));
  background: var(--surface); border: 1px solid var(--line-hover); border-radius: var(--r-lg); box-shadow: var(--shadow-pop);
  display: flex; flex-direction: column; overflow: hidden;
}
.pop .pop-search { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.pop .pop-search input { border: 0; background: none; padding: 2px 0; font-family: var(--sans); font-size: 14px; }
.pop .pop-list { max-height: 360px; overflow-y: auto; padding: 4px; }
.pop .pop-item {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; background: none; border: 0; border-radius: var(--r-sm);
  color: var(--text); font: inherit; font-size: 14px; text-align: left; cursor: pointer;
}
.pop .pop-item .i { color: var(--text-2); }
.pop .pop-item .check-mark { margin-left: auto; color: var(--vivid-ink); }
.pop .pop-item .hint { margin-left: auto; font-family: var(--mono); font-size: 11px; color: var(--text-2); }
.pop .pop-item:hover { background: var(--hover); }
.pop .pop-item[aria-selected="true"] { background: var(--vivid-soft); }
.pop .pop-item[aria-selected="true"] .i { color: var(--vivid-ink); }
.pop .pop-item.danger { color: var(--error); }
/* The current choice (e.g. this project) stays marked when the keyboard
   highlight moves elsewhere. */
.pop .pop-item.current { color: var(--text); font-weight: 500; }
.pop .pop-item.current .i { color: var(--vivid-ink); }
.pop .pop-group { font-family: var(--mono); font-size: 10px; letter-spacing: .24em; text-transform: uppercase; color: var(--text-2); padding: 10px 10px 4px; }
.pop .pop-foot { border-top: 1px solid var(--line); padding: 4px; }
.pop .pop-empty { color: var(--text-2); padding: 12px; font-size: 13px; }
.scrim { position: fixed; inset: 0; z-index: 55; background: var(--scrim); }
.pop.palette { left: 50%; top: 14vh; transform: translateX(-50%); width: 560px; max-width: calc(100vw - 32px); }

/* Tooltip */
.tip {
  position: fixed; z-index: 70; pointer-events: none; background: var(--surface); border: 1px solid var(--line-hover);
  border-radius: var(--r); box-shadow: var(--shadow-pop); padding: 10px 14px; font-family: var(--mono); font-size: 12px;
  display: grid; grid-template-columns: auto auto; gap: 4px 20px;
}
.tip dt { color: var(--text-2); font-family: var(--sans); }
.tip dd { margin: 0; color: var(--text); }

/* Log viewer */
.logview { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--card-hi); overflow: hidden; }
.logview > summary, .logview-head {
  display: flex; align-items: center; gap: 12px; padding: 12px 16px; cursor: pointer; list-style: none; font-weight: 400;
}
.logview > summary::-webkit-details-marker { display: none; }
.logview > summary .i.caret { transition: transform .12s; }
.logview[open] > summary .i.caret { transform: rotate(90deg); }
.logview .grow { flex: 1; }
.logview .meta-r { display: flex; align-items: center; gap: 10px; color: var(--text-2); font-family: var(--mono); font-size: 12px; }
.log-tools { display: flex; align-items: center; gap: 12px; padding: 8px 12px 8px 16px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.log-tools .n { color: var(--text-2); font-family: var(--mono); font-size: 12px; flex: 1; }
.log-find { display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--field); padding: 4px 6px 4px 10px; width: 280px; max-width: 50%; }
.log-find input { border: 0 !important; background: none !important; padding: 2px 0 !important; font-size: 12px !important; }
.log-find .i { color: var(--text-2); width: 14px; height: 14px; }
.log-lines { max-height: 560px; overflow: auto; padding: 8px 0; font-family: var(--mono); font-size: 12.5px; line-height: 1.85; background: var(--well); }
.log-lines.tall { max-height: calc(100vh - 260px); min-height: 360px; }
.ll { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 16px; padding: 0 16px; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--text); }
.ll.no-ts { grid-template-columns: minmax(0, 1fr); }
.ll.wide { grid-template-columns: 170px 60px minmax(0, 1fr); }
.ll:hover { background: var(--hover); }
.ll .ts { color: var(--text-2); cursor: default; white-space: nowrap; }
.ll .st { color: var(--text-2); }
.ll.cmd .tx { color: var(--accent-ink); }
.ll.stderr .tx, .ll.bad .tx { color: var(--error); }
.ll mark { background: var(--vivid); color: var(--on-vivid); border-radius: 3px; padding: 0 1px; }
.ll.hidden { display: none; }
.log-empty { color: var(--text-2); padding: 12px 16px; font-family: var(--mono); font-size: 12px; }

/* Checklist */
.checklist { display: flex; flex-direction: column; gap: 6px; }
.checklist a {
  display: flex; align-items: center; gap: 12px; padding: 9px 12px; border: 1px solid var(--line); border-radius: var(--r); background: var(--well); color: var(--text); font-size: 13px;
}
.checklist a:hover { border-color: var(--line-hover); color: var(--text); }
.checklist a .i { color: var(--text-2); }
.checklist a.done { color: var(--text-2); text-decoration: line-through; }
.checklist a.done .i.tick { color: var(--vivid-ink); margin-left: auto; }

/* Metric card */
.metric { display: grid; grid-template-columns: minmax(0, 120px) minmax(0, 1fr); align-items: end; gap: 12px; }
.metric + .metric { margin-top: 16px; }
.metric .k { color: var(--text-2); font-size: 13px; }
.metric .v { font-family: var(--mono); font-size: 15px; color: var(--text); margin-top: 2px; }
.bar-meter { height: 6px; background: var(--line); border-radius: var(--r-pill); overflow: hidden; position: relative; margin-top: 8px; }
.bar-meter > i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--vivid); border-radius: var(--r-pill); }

/* Activity feed */
.feed { display: flex; flex-direction: column; }
.feed-item { display: grid; grid-template-columns: 14px minmax(0, 1fr) auto; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.feed-item:last-child { border-bottom: 0; }
.feed-item .when { color: var(--text-2); font-family: var(--mono); font-size: 11px; white-space: nowrap; }
.feed-item .i { width: 14px; height: 14px; margin-top: 3px; color: var(--text-2); }
.feed-item.err .i, .feed-item.err .msg { color: var(--error); }
.feed-item .msg { overflow-wrap: anywhere; }

/* Subnav tabs inside a page (deployment detail) */
.subtabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin: -28px -24px 24px; padding: 8px 20px 0; overflow-x: auto; }
.subtabs a { padding: 8px 10px; color: var(--text-2); font-size: 14px; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.subtabs a:hover { color: var(--text); }
.subtabs a[aria-current="page"] { color: var(--text); border-bottom-color: var(--vivid); }

/* Project cards grid */
.pgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.pcard { display: flex; flex-direction: column; gap: 14px; padding: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--card-hi); color: var(--text); min-height: 150px; transition: border-color .12s; }
.pcard:hover { border-color: var(--line-hover); color: var(--text); }
.pcard .top { display: flex; align-items: center; gap: 12px; }
.pcard .glyph { width: 32px; height: 32px; border: 1px solid transparent; border-radius: var(--r); background: var(--vivid-soft); display: grid; place-items: center; font-family: var(--mono); font-size: 13px; color: var(--vivid-ink); text-transform: uppercase; flex: none; }
.pcard .nm { font-weight: 400; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pcard .host { font-family: var(--mono); font-size: 12px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pcard .bottom { margin-top: auto; display: flex; justify-content: space-between; gap: 12px; color: var(--text-2); font-size: 12px; font-family: var(--mono); }
.searchbox { display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); padding: 0 10px; flex: 1; min-width: 200px; max-width: 520px; }
.searchbox .i { color: var(--text-2); }
.searchbox input { border: 0 !important; background: none !important; }
/* Inputs embedded in a bordered box: the box shows focus, not the input. */
.searchbox input:focus, .log-find input:focus, .pop .pop-search input:focus { box-shadow: none; }
.searchbox:focus-within, .log-find:focus-within { border-color: var(--vivid); box-shadow: 0 0 0 3px var(--vivid-soft); }

/* New project flow */
.newp { max-width: 1180px; margin: 0 auto; }
.newp h1 { font-size: 36px; margin: 16px 0 24px; }
.newp .cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0; border-top: 1px solid var(--line); margin-top: 32px; }
.newp .cols > section { padding: 32px 32px 32px 0; }
.newp .cols > section + section { padding: 32px 0 32px 32px; border-left: 1px solid var(--line); }
.newp h2 { font-size: 24px; margin-bottom: 20px; }
.drop {
  border: 1px dashed var(--line-hover); border-radius: var(--r-lg); background: var(--surface); padding: 28px; display: flex; flex-direction: column;
  align-items: center; gap: 10px; text-align: center; color: var(--text-2); font-size: 13px;
}
.drop.over { border-color: var(--vivid); background: var(--vivid-soft); color: var(--text); }
.drop .i.xl { color: var(--text-2); }
.drop.over .i.xl { color: var(--vivid-ink); }
.drop label { color: var(--vivid-ink); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.drop input[type="file"] { display: none; }
.stack-sm { display: flex; flex-direction: column; gap: 12px; }
.row-sm { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.lbl { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--text-2); flex: 1 1 180px; min-width: 0; }
.center-col { max-width: 700px; margin: 0 auto; display: flex; flex-direction: column; gap: 24px; }
.center-col .card-body { padding: 32px; }
.center-col h2 { font-size: 26px; margin-bottom: 8px; }
.stepline { display: flex; align-items: center; gap: 10px; color: var(--text); margin: 8px 0 16px; }
.steps { display: flex; flex-direction: column; }
.step-link { display: grid; grid-template-columns: 32px minmax(0, 1fr) 16px; align-items: center; gap: 14px; padding: 12px 0; color: var(--text); }
.step-link .ico { width: 32px; height: 32px; border: 1px solid var(--line); border-radius: var(--r); display: grid; place-items: center; color: var(--text); }
.step-link:hover .ico { border-color: transparent; background: var(--vivid-soft); color: var(--vivid-ink); }
.step-link .t { font-weight: 400; }
.step-link .d { color: var(--text-2); font-size: 13px; }
.step-link > .i { color: var(--text-2); }
.step-link:hover { color: var(--text); }
.step-link:hover > .i { color: var(--text); }
.congrats { font-size: 32px !important; }
.cmdline { display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: var(--r); background: var(--well); padding: 10px 12px; font-family: var(--mono); font-size: 13px; }
.cmdline code { flex: 1; overflow-x: auto; white-space: nowrap; }
.iconbtn { background: none; border: 0; border-radius: var(--r-sm); color: var(--text-2); cursor: pointer; padding: 4px; display: inline-grid; place-items: center; }
.iconbtn:hover { color: var(--text); background: var(--hover); }

.kvl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 10px 32px; font-size: 13px; }
.kvl dt { color: var(--text-2); }
.kvl dd { margin: 0; font-family: var(--mono); overflow-wrap: anywhere; }

.empty-state { border: 1px dashed var(--line-hover); border-radius: var(--r-lg); padding: 56px 24px; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; color: var(--text-2); }
.empty-state .i.xl { color: var(--text-2); }
.empty-state .t { color: var(--text); font-weight: 400; }

@media (max-width: 1100px) {
  .grid3 { grid-template-columns: minmax(0, 1fr); }
  .prod { grid-template-columns: minmax(0, 1fr); }
  .preview { height: 180px; }
}
@media (max-width: 900px) {
  .sidebar { position: fixed; left: 0; top: 0; bottom: 0; transform: translateX(-100%); transition: transform .15s; box-shadow: var(--shadow-pop); }
  .app.nav-open .sidebar { transform: none; }
  .bar .menu-btn { display: inline-grid; }
  .bar { grid-template-columns: minmax(0, 1fr) auto; padding: 0 12px; }
  .bar-title { display: none; }
  .content { padding: 20px 16px 64px; }
  .subtabs { margin: -20px -16px 20px; padding: 8px 12px 0; }
  .list-row { grid-template-columns: minmax(0, 1fr) auto; }
  .list-row .src, .list-row .env { grid-column: 1 / -1; }
  .list-row .when { text-align: left; }
  .card-head .actions { width: 100%; }
  .head h1 { font-size: 24px; }
  .newp .cols { grid-template-columns: minmax(0, 1fr); }
  .newp .cols > section, .newp .cols > section + section { padding: 24px 0; border-left: 0; }
  .grid2 { grid-template-columns: minmax(0, 1fr); }
  .ll { grid-template-columns: 90px minmax(0, 1fr); gap: 10px; padding: 0 10px; }
  .ll.wide { grid-template-columns: 90px minmax(0, 1fr); }
  .ll.wide .st { display: none; }
  .log-find { max-width: none; width: auto; flex: 1; }
}

/* ======================================================================
   Settings, env suggestions and simplified pages (R-70).
   ====================================================================== */

.act-error:empty, .form-error:empty { display: none; }
.card.flush > .table-wrap, .card.flush .table-wrap { border-top: 0; }
.card.flush .empty { border: 0; }
.h1-sub { font-size: 18px; font-weight: 300; margin-left: 8px; }
.small-title { font-size: 13px; font-weight: 400; color: var(--text); margin-top: 8px; }
.err-cell { color: var(--error); }
.grid2.one { grid-template-columns: minmax(0, 1fr); }
.pv-link { color: inherit; display: block; }
.pv-link:hover .preview { border-color: var(--line-hover); }

/* Source chips never overflow their row or card. */
.src-line { flex-wrap: wrap; min-width: 0; max-width: 100%; }
.src-line span { display: inline-flex; align-items: center; gap: 6px; min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pcard .src-line { font-size: 12px; overflow: hidden; }

/* Toolbars: selects size to their content instead of stacking. */
.select-btn.inline-select { display: inline-flex; vertical-align: middle; }
.head .actions.toolbar { align-items: center; }
.head .actions select, .head .actions .select-btn, .card-head select, .card-head .select-btn { width: auto; min-width: 0; }
.inline-select { display: inline-block; width: auto !important; margin-left: 6px; padding: 4px 30px 4px 10px !important; font-size: 13px !important; }

/* Logs: time and text only; stderr is tinted instead of labelled. */
.ll.wide { grid-template-columns: 150px minmax(0, 1fr); }

/* Framework badges. */
.badge.fw-foundry, .badge.fw-station, .badge.fw-node { border-color: var(--vivid-soft); background: var(--vivid-soft); color: var(--vivid-ink); }

/* A notice inside a card, under its head. */
.notice.inset { margin: 0; border-width: 0 0 1px; border-radius: 0; }

/* "Found in your code" suggestions. */
.suggest { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--line); background: var(--vivid-soft); }
.suggest .small { display: inline-flex; align-items: center; gap: 6px; margin-right: 4px; }
.chip-add {
  display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: var(--r-pill);
  border: 1px solid var(--vivid-ring); background: var(--surface); color: var(--text);
  font-family: var(--mono); font-size: 12px; cursor: pointer;
}
.chip-add .i { width: 12px; height: 12px; color: var(--vivid-ink); }
.chip-add:hover { background: var(--vivid); border-color: var(--vivid); color: var(--on-vivid); }
.chip-add:hover .i { color: var(--on-vivid); }
.chip-add.req { border-color: var(--error); }

/* New project: source tabs, collapsible sub-sections, env rows. */
.seg { display: inline-flex; gap: 4px; padding: 4px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); margin-bottom: 16px; flex-wrap: wrap; }
.seg button { display: inline-flex; align-items: center; gap: 8px; border: 0; background: none; color: var(--text-2); font: inherit; font-size: 14px; padding: 7px 14px; border-radius: var(--r-sm); cursor: pointer; }
.seg button:hover { color: var(--text); }
.seg button.on { background: var(--vivid-soft); color: var(--text); }
.seg button.on .i { color: var(--vivid-ink); }
.np-form { max-width: 880px; }
.np-form .card-foot { justify-content: space-between; }
details.sub { border-top: 1px solid var(--line); padding-top: 12px; }
details.sub > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 8px; color: var(--text); font-size: 14px; }
details.sub > summary::-webkit-details-marker { display: none; }
details.sub > summary .caret { transition: transform .12s; }
details.sub[open] > summary .caret { transform: rotate(90deg); }
.env-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) auto auto; gap: 8px; align-items: center; }
.settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; }
.settings-grid .lbl { flex: none; }
.lbl .hint { font-size: 12px; color: var(--text-2); }
.drop.small { padding: 16px; font-size: 13px; }

@media (max-width: 900px) {
  .settings-grid { grid-template-columns: minmax(0, 1fr); }
  .env-row { grid-template-columns: minmax(0, 1fr) auto; }
  .env-row [name="env-value"] { grid-column: 1 / -1; grid-row: 2; }
  .head .actions.toolbar { width: 100%; }
}
.app input[type="number"] { font-size: 13px; padding: 8px 12px; }
/* Field labels read as plain sentence-case text inside the app shell. */
.app .field > span { font-family: var(--sans); font-size: 13px; letter-spacing: 0; text-transform: none; color: var(--text-2); }

/* Repository picker and detection summary on New project (R-72). */
.repo-list { margin-top: 10px; border: 1px solid var(--line); border-radius: var(--r); max-height: 320px; overflow-y: auto; background: var(--well); }
.repo-row { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-bottom: 1px solid var(--line); font-size: 14px; }
.repo-row:last-child { border-bottom: 0; }
.repo-row:hover { background: var(--hover); }
.repo-row .nm { font-weight: 400; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.repo-row .muted { margin-left: auto; white-space: nowrap; font-family: var(--mono); font-size: 12px; }
.repo-row .i { color: var(--text-2); }
.repo-row .i.muted-i { width: 13px; height: 13px; }
.picked-repo { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r); background: var(--well); flex-wrap: wrap; }
.picked-repo .grow { flex: 1; min-width: 160px; }
.picked-repo .nm { font-weight: 400; }
.picked-repo .lbl.branch { flex: 0 1 180px; }
.detect { margin-top: 12px; padding: 12px 14px; border-radius: var(--r); border: 1px solid var(--line); font-size: 13px; }
.detect.busy, .detect.warn { display: flex; align-items: center; gap: 10px; color: var(--text-2); }
.detect.warn .i { color: var(--error); }
.detect.ok { background: var(--vivid-soft); border-color: var(--vivid-ring); }
.detect-line { display: flex; align-items: center; gap: 8px; }
.detect-line .i { color: var(--accent-ink); }
.detect-kv { margin: 10px 0 8px; font-size: 12px; }
.warn-text { color: var(--error); }

/* ======================================================================
   Modal dialogs and the API tokens page.
   ====================================================================== */

.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; }

/* Page head with a one-line explanation under the title. */
.head-text { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.head-text p { font-size: 14px; max-width: 72ch; }

/* Small modal on the native <dialog> (openModal in app.js). */
.modal {
  width: min(520px, calc(100vw - 32px)); max-width: none; max-height: calc(100vh - 32px); padding: 0; overflow: auto;
  border: 1px solid var(--line-hover); border-radius: var(--r-lg); background: var(--surface); color: var(--text); box-shadow: var(--shadow-pop);
}
.modal::backdrop { background: var(--scrim); }
.modal-body { display: flex; flex-direction: column; gap: 14px; padding: 20px 20px 0; }
.modal-body > .field { flex: none; }
.modal-body h2 { font-size: 18px; font-weight: 300; overflow-wrap: anywhere; }
.modal-body p { font-size: 14px; }
.modal-body p code { font-size: 12.5px; color: var(--text); }
.modal-foot {
  display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin: 6px -20px 0; padding: 12px 20px;
  border-top: 1px solid var(--line); background: var(--well);
}

/* A short warning line. Red marks the icon only; the text stays plain. */
.callout { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r); background: var(--well); }
.callout .i { color: var(--error); margin-top: 3px; }
.callout strong { font-weight: 500; }

/* A label line above a field: name on the left, a muted id on the right. */
.lbl-row { display: flex; justify-content: space-between; gap: 12px; min-width: 0; font-size: 13px; color: var(--text-2); margin-bottom: -6px; }
.lbl-row span:first-child { color: var(--text); font-weight: 400; }
.lbl-row .mono { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* A one-time secret: one line of mono that fills the width, and Copy. */
.secret-field { display: flex; align-items: center; gap: 8px; border: 1px solid var(--line-hover); border-radius: var(--r); background: var(--well); padding: 6px 6px 6px 12px; }
.secret-field code { flex: 1; min-width: 0; overflow-x: auto; white-space: nowrap; font-size: 13px; color: var(--text); scrollbar-width: thin; }
.secret-field .btn { flex: none; }
.cmdline code { min-width: 0; }
/* The CLI line wraps so the whole command, token included, stays visible. */
.modal .cmdline { align-items: flex-start; padding: 8px 6px 8px 12px; }
.modal .cmdline code { white-space: normal; overflow-wrap: anywhere; line-height: 1.6; padding-top: 1px; }

/* Destructive confirmation: red ink at rest, a faint red fill on hover. */
.btn.danger-ink { color: var(--error); border-color: color-mix(in srgb, var(--error) 55%, var(--line)); }
.btn.danger-ink:hover { color: var(--error); border-color: var(--error); background: color-mix(in srgb, var(--error) 10%, transparent); }

/* Tokens table. */
.tok-card { overflow: hidden; }
.tok-card .table-wrap { border-top: 0; }
.tok-table thead th { background: var(--well); }
.tok-table td { vertical-align: middle; }
.tok-table tbody tr:last-child td { border-bottom: 0; }
.tok-table td.actions { width: 1%; }
.tok-name .nm { color: var(--text); }
.tok-name .badge { margin-left: 8px; vertical-align: 1px; font-family: var(--sans); font-size: 12px; }
.tok-table tr.revoked td, .tok-table tr.revoked .nm, .tok-table tr.revoked .dot { color: var(--text-2); }
.tok-locked { display: inline-block; cursor: not-allowed; }
.tok-card .card-foot { justify-content: flex-start; }
.tok-note { display: flex; align-items: flex-start; gap: 8px; }
.tok-note .i { margin-top: 3px; }
.tok-card .tok-empty { border: 0; border-radius: 0; }

@media (max-width: 640px) {
  .tok-table thead { display: none; }
  .tok-table, .tok-table tbody { display: block; }
  .tok-table tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
  .tok-table tbody tr:last-child { border-bottom: 0; }
  .app .tok-table td { display: block; padding: 0; border: 0; }
  .tok-table td.tok-name { grid-column: 1; grid-row: 1; margin-bottom: 4px; }
  .tok-table td.actions { grid-column: 2; grid-row: 1; width: auto; }
  .tok-table td[data-label] { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 12px; font-size: 12px; }
  .tok-table td[data-label]::before { content: attr(data-label); color: var(--text-2); font-family: var(--sans); }
  .modal-foot .btn { flex: 1 1 auto; }
}

/* Domains (Vercel-style): one card per hostname with a status line; the
   records to set expand below it. */
.dom-add .dom-form { display: flex; flex-direction: column; gap: 12px; }
.dom-fields { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.dom-fields .btn { min-width: 88px; justify-content: center; }
.dom-www { align-self: flex-start; font-family: var(--sans); font-size: 13px; }
.dom-www[hidden] { display: none; }
.dom-www b { font-weight: 500; color: var(--text); font-family: var(--mono); font-size: 12.5px; }
.dom-claim { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 12px; }
.dom-list { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; }
.dom { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--card-hi); overflow: hidden; }
.dom.open { border-color: var(--line-hover); }
.dom-row { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 4px 12px; padding: 14px 16px 14px 12px; }
.dom-caret { width: 28px; height: 28px; display: inline-grid; place-items: center; color: var(--text-2); }
.dom-caret .caret { transition: transform .12s; }
.dom.open .dom-caret .caret { transform: rotate(90deg); }
@media (prefers-reduced-motion: reduce) { .dom-caret .caret { transition: none; } }
.dom-main { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.dom-host { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-width: 0; font-size: 15px; font-weight: 400; }
.dom-host .ext { overflow-wrap: anywhere; min-width: 0; }
.dom-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px; font-size: 13px; color: var(--text-2); }
.dom-meta .dot { font-size: 13px; color: var(--text); }
.dom-meta .dot.err { color: var(--error); }
.dom-target { display: inline-flex; align-items: center; gap: 6px; min-width: 0; overflow-wrap: anywhere; }
.dom-target .i { width: 14px; height: 14px; }
.dom-target b { font-family: var(--mono); font-weight: 400; font-size: 12.5px; color: var(--text); }
.dom-target .tag { margin-left: 2px; }
.chip { display: inline-flex; align-items: center; gap: 5px; font-family: var(--mono); font-size: 12px; color: var(--text); border: 1px solid var(--line); border-radius: var(--r-xs); padding: 0 7px; line-height: 20px; }
.chip .i { width: 12px; height: 12px; color: var(--text-2); }
.chip:hover { border-color: var(--line-hover); }
.dom-actions { display: flex; align-items: center; gap: 6px; }
.dom-actions .btn.small { padding: 4px 10px; }
.dom-actions .btn.icon { padding: 5px 7px; }
.dom-edit { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; padding: 0 16px 16px 52px; }
.dom-edit .field { flex: 1 1 260px; max-width: 420px; }
.dom-edit .form-error { flex-basis: 100%; }
.dom-detail { border-top: 1px solid var(--line); background: var(--well); padding: 16px 16px 14px 52px; display: flex; flex-direction: column; gap: 12px; }
.dom-msg { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: var(--text); }
.dom-msg .i { margin-top: 3px; color: var(--text-2); }
.dom-msg.err .i { color: var(--error); }
.dom-msg.ok .i { color: var(--accent-ink); }
.dom-msg.busy .i { color: var(--vivid-ink); }
.dom-msg p { max-width: 80ch; overflow-wrap: anywhere; }
.dom-hint { font-size: 13px; color: var(--text-2); max-width: 80ch; }
.dom-hint b { font-family: var(--mono); font-weight: 400; color: var(--text); }
.dom-records { border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); overflow: hidden; }
.dom-rec { display: grid; grid-template-columns: 96px minmax(0, 1fr) minmax(0, 2fr); gap: 12px; align-items: center; padding: 8px 8px 8px 14px; border-top: 1px solid var(--line); font-family: var(--mono); font-size: 12.5px; }
.dom-rec:first-child { border-top: 0; }
.dom-rec.th { font-size: 11px; color: var(--text-2); letter-spacing: .08em; text-transform: uppercase; padding-top: 7px; padding-bottom: 7px; background: var(--well); }
.dom-rec span { display: flex; align-items: center; gap: 4px; min-width: 0; }
.dom-rec code { overflow-wrap: anywhere; min-width: 0; }
.dom-rec .v code { word-break: break-all; }
.dom-rec .t em { font-style: normal; font-family: var(--sans); font-size: 11px; color: var(--vivid-ink); background: var(--vivid-soft); border-radius: var(--r-pill); padding: 0 7px; margin-left: 4px; }
.dom-rec .iconbtn { flex: none; opacity: .7; }
.dom-rec .iconbtn:hover, .dom-rec .iconbtn:focus-visible { opacity: 1; }
.dom-rec .iconbtn .i { width: 14px; height: 14px; }
.dom-seen { font-size: 13px; overflow-wrap: anywhere; }
.dom-seen code { font-size: 12px; color: var(--text); }
.dom-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding-top: 10px; border-top: 1px dashed var(--line); }
.dot.wait::before { background: transparent; border: 1.5px solid var(--text-2); }
.dom-inline { display: inline-flex; align-items: center; gap: 8px; }
.dom-inline .dot { font-size: 12px; color: var(--text-2); }
.dom-inline .dot.err { color: var(--error); }

@media (max-width: 640px) {
  .dom-row { grid-template-columns: 28px minmax(0, 1fr); padding: 12px 12px 12px 8px; }
  .dom-actions { grid-column: 2; }
  .dom-actions .lbl-t { display: inline; }
  .dom-detail, .dom-edit { padding-left: 16px; padding-right: 12px; }
  .dom-rec { grid-template-columns: max-content minmax(0, 1fr); gap: 6px 12px; }
  .dom-rec .v { grid-column: 1 / -1; }
  .dom-rec.th .v, .dom-rec.th { display: none; }
  .dom-fields .field.narrow { flex: 1 1 140px; }
}