/* SELL4ME product surface: a calm, opaque, text-first application shell.
   Luminous Ink on the ratified corporate references (SELL4ME_UI_P1_CONTRACT.md §4): porcelain
   canvas, ink text, one mineral signal for the accent, Calm Blue as the secondary emphasis;
   status always carries its meaning in words as well as in colour. System humanist sans-serif;
   no web fonts; motion only as short functional transitions that reduced-motion removes.
   Desktop-first, usable down to a 375 px phone: the shell becomes a navigation rail, wide tables
   become records. Every colour is a token here; no colour literal appears below this block. */

:root {
  /* colour roles -- ratified corporate references unless noted as a classified refinement */
  --canvas: #F5F6F4;         /* ratified Canvas (Porcelain): BRAND_AND_CORPORATE_DESIGN_FOUNDATION.md §11.2, contract §4 */
  --surface: #FFFFFF;
  --surface-sunken: #F9FAF8;   /* refinement: secondary surface derived from the canvas hue */
  --surface-muted: #EDF0EE;    /* refinement: neutral tone background */
  --ink: #0E1726;
  --ink-soft: #475569;
  --ink-faint: #5F6B7A;
  --ink-disabled: #8A94A0;     /* refinement: disabled control text/icon only, never readable copy */
  --line: #DCE2E7;
  --line-strong: #C5CDD4;      /* refinement: input boundary, one step darker than Border */
  --signal: #0C7180;
  --signal-soft: #DFF2F4;
  --signal-ink: #FFFFFF;
  --accent-2: #235C86;
  --accent-2-soft: #E6EEF8;    /* refinement: tint of Calm Blue */
  --focus: #0C7180;
  --focus-halo: #FFFFFF;       /* refinement: the ring needs a halo on accent fills (Focus = Signal Teal) */
  --tone-neutral-bg: #EDF0EE;
  --tone-neutral-fg: #475569;
  --tone-success-bg: #E3F1EA;
  --tone-success-fg: #177A53;
  --tone-warning-bg: #FBEEDC;
  --tone-warning-fg: #8A5708;
  --tone-danger-bg: #F9E3E1;
  --tone-danger-fg: #B23A3F;
  --tone-info-bg: #E6EEF8;
  --tone-info-fg: #2766A8;
  --backdrop: rgb(14 23 38 / 0.45);
  --shadow-color: 14 23 38;
  /* type scale (px / line-height) */
  --text-xs: 12px;  --leading-xs: 16px;
  --text-sm: 13px;  --leading-sm: 18px;
  --text-md: 14px;  --leading-md: 20px;
  --text-base: 16px; --leading-base: 24px;
  --text-lg: 18px;  --leading-lg: 26px;
  --text-xl: 22px;  --leading-xl: 28px;
  --text-2xl: 28px; --leading-2xl: 34px;
  --text-display: 32px; --leading-display: 38px;
  /* spacing */
  --space-0-5: 2px; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px;
  --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px;
  /* radius */
  --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 18px; --radius-2xl: 24px; --radius-pill: 999px;
  /* elevation */
  --shadow-0: none;
  --shadow-1: 0 1px 2px rgb(var(--shadow-color) / 0.06);
  --shadow-2: 0 4px 12px rgb(var(--shadow-color) / 0.10);
  --shadow-3: 0 12px 32px rgb(var(--shadow-color) / 0.18);
  /* containers and controls */
  --content-max: 1180px; --auth-max: 1120px; --panel-max: 640px; --sidebar-w: 240px; --measure: 68ch;
  --control-h: 40px; --control-h-touch: 44px; --control-h-sm: 32px;
  /* motion */
  --motion-fast: 120ms; --motion-base: 180ms; --motion-slow: 240ms;
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1); --ease-in: cubic-bezier(0.4, 0, 1, 1);
  /* released aliases, kept for one release */
  --radius: var(--radius-md);
  --radius-large: var(--radius-lg);
  --gap: var(--space-4);
  --sidebar-width: var(--sidebar-w);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Arial, sans-serif;
  font-size: var(--text-base);
  line-height: var(--leading-base);
  color: var(--ink);
  background: var(--canvas);
}

* { box-sizing: border-box; }

/* The HTML `hidden` attribute is authoritative. Blocks that also carry an author
   `display` (grid, flex) would otherwise outrank the browser's own `[hidden]` rule and
   render while hidden: the mapping panel, the import preview and the inline forms. */
[hidden] { display: none !important; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--canvas);
  color: var(--ink);
  display: flex;
  flex-direction: column;
}

/* ---- typography ------------------------------------------------------------------ */

h1, h2, h3, h4 { margin: 0 0 var(--space-3); text-wrap: balance; }
h1 { font-size: var(--text-2xl); line-height: var(--leading-2xl); font-weight: 650; }
h2 { font-size: var(--text-xl); line-height: var(--leading-xl); font-weight: 600; }
h3 { font-size: var(--text-lg); line-height: var(--leading-lg); font-weight: 600; }
h4 { font-size: var(--text-base); line-height: var(--leading-base); font-weight: 600; }
p { margin: 0 0 var(--space-2); }
.lead { font-size: var(--text-base); line-height: var(--leading-base); color: var(--ink-soft); max-width: var(--measure); }
/* One uppercase label recipe for every small label of the surface. */
.eyebrow, .org-context-label, .account-label, .dash-card-label, .status-card-label {
  margin: 0;
  font-size: var(--text-xs);
  line-height: var(--leading-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.eyebrow { margin-bottom: var(--space-0-5); }
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.diag { font-size: var(--text-sm); line-height: var(--leading-sm); color: var(--ink-faint); overflow-wrap: anywhere; }

.skip-link {
  position: absolute;
  left: -999px;
  top: var(--space-2);
  background: var(--surface);
  color: var(--ink);
  padding: var(--space-2) var(--space-3);
  border: 2px solid var(--focus);
  border-radius: var(--radius-md);
  z-index: 10;
}
.skip-link:focus { left: var(--space-2); }

/* ---- focus: a 3 px ring with a halo, on every interactive element ---------------- */

input:focus-visible, select:focus-visible, button:focus-visible, a:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--focus-halo);
}
/* Programmatic container focus (a route change, the skip link) is announced, not painted:
   the content area never wears a focus rectangle. */
#main-content:focus, #main-content:focus-visible { outline: none; box-shadow: none; }

/* ---- header ---------------------------------------------------------------------- */

.shell-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-6);
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}

/* The approved SELL4ME brand, byte-copies of the released kit under static/brand/:
   the horizontal lockup at 280 px in a normal header, the compact symbol
   beside the text wordmark where the header is narrow. The gradient stays inside the
   mark; it is never applied to controls, cards or chips. */
.brand { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.brand-lockup { display: block; width: 280px; height: auto; }
.brand-compact { display: none; align-items: center; gap: var(--space-2); }
.brand-symbol { display: block; width: 32px; height: 32px; }
.wordmark-text {
  font-size: var(--text-xl);
  line-height: var(--leading-xl);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--ink);
}
.wordmark-note {
  font-size: var(--text-xs);
  line-height: var(--leading-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
}

.status-chip {
  margin: 0;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  font-size: var(--text-sm);
  line-height: var(--leading-sm);
  background: var(--tone-neutral-bg);
  color: var(--tone-neutral-fg);
  flex: 1 1 200px;
  max-width: max-content;
}

.header-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: var(--space-3);
  flex: 1 1 auto;
  min-width: 0;
}

.lang-switch { display: inline-flex; gap: var(--space-1); flex: none; }
.lang-btn {
  min-height: 36px;
  min-width: 44px;
  padding: 0 var(--space-3);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.04em;
  background: var(--surface);
  color: var(--ink-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  cursor: pointer;
}
.lang-btn.is-active {
  background: var(--signal);
  color: var(--signal-ink);
  border-color: var(--signal);
}

@media (max-width: 760px) {
  .shell-header { padding: var(--space-3) var(--space-4); }
  .brand-lockup { display: none; }
  .brand-compact { display: flex; }
}
@media (max-width: 520px) {
  /* On a phone the status chip keeps one line beside the language switch; its full text
     stays in the DOM (role=status) and is only visually clipped. */
  .header-right { flex-wrap: nowrap; width: 100%; }
  .status-chip { flex: 1 1 0; min-width: 0; max-width: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}

/* ---- controls ---------------------------------------------------------------------- */

.field { margin-bottom: var(--space-4); min-width: 0; }
label { display: block; font-weight: 600; font-size: var(--text-md); line-height: var(--leading-md); margin-bottom: var(--space-1); }
.hint { font-size: var(--text-sm); line-height: var(--leading-sm); color: var(--ink-soft); margin: var(--space-1) 0 0; }
.field-error { margin: var(--space-1) 0 0; font-size: var(--text-sm); line-height: var(--leading-sm); color: var(--tone-danger-fg); font-weight: 600; }

input[type="text"], input[type="password"], input[type="email"], input[type="search"], select {
  width: 100%;
  min-width: 0;
  min-height: var(--control-h);
  padding: 0 var(--space-3);
  font: inherit;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
}
input[aria-invalid="true"] { border-color: var(--tone-danger-fg); }

button, .btn {
  font: inherit;
  font-weight: 600;
  min-height: var(--control-h);
  padding: 0 var(--space-4);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  border-radius: var(--radius-md);
  border: 1px solid var(--signal);
  background: var(--signal);
  color: var(--signal-ink);
  cursor: pointer;
  text-decoration: none;
  line-height: 1.3;
  text-align: center;
}
button.secondary, .btn-secondary, .btn--secondary {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--line-strong);
}
button.secondary:hover, .btn-secondary:hover, .btn--secondary:hover { background: var(--surface-sunken); }
.btn-primary, .btn--primary { background: var(--signal); color: var(--signal-ink); border-color: var(--signal); }
.btn-danger, .btn--danger { background: var(--surface); color: var(--tone-danger-fg); border-color: var(--tone-danger-fg); }
/* One small-button recipe: row actions, the recently-opened list, the mapping results. */
.btn-small, .btn--sm, .session-list button, .mk-map-actions button, .mk-map-results button {
  min-height: var(--control-h-sm);
  padding: 0 var(--space-3);
  font-size: var(--text-sm);
}
.btn--icon { padding: 0; width: var(--control-h-sm); min-width: var(--control-h-sm); }
.btn--icon svg { width: 18px; height: 18px; }
button[disabled], .btn[aria-disabled="true"] { opacity: 0.6; cursor: not-allowed; }
form[aria-busy="true"] button[disabled] { cursor: progress; }
.link {
  display: inline-flex;
  align-items: center;
  min-height: var(--control-h-sm);
  color: var(--signal);
  text-decoration: underline;
  text-underline-offset: 2px;
  font-weight: 600;
  background: none;
  border: 0;
  padding: 0;
}
a { color: var(--signal); }
a.link { min-height: 0; display: inline; }

.actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-top: var(--space-2); }

.form-row { display: grid; gap: var(--space-2); align-content: start; min-width: 0; }
.form-row > button, .stack-form > button { justify-self: start; width: auto; }
.stack-form { display: grid; gap: var(--space-1); }
/* The catalog toolbar: a label above, the control and its intrinsic button on one row. */
.toolbar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}
.toolbar .form-row { grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--space-2); row-gap: var(--space-1); align-items: start; }
.toolbar .form-row > label { grid-column: 1 / -1; }
.field.checkbox label { display: flex; align-items: center; gap: var(--space-2); font-weight: 400; }
details.diagnostics summary { display: list-item; min-height: var(--control-h-sm); line-height: var(--control-h-sm); cursor: pointer; font-weight: 600; }

@media (max-width: 768px) {
  /* touch: every shell, toolbar and row control reaches 44 px */
  button, .btn, .btn-small, .btn--sm, .session-list button, .mk-map-actions button, .mk-map-results button, .lang-btn, .link { min-height: var(--control-h-touch); }
  a.link { min-height: 0; }
  .btn--icon { width: var(--control-h-touch); min-width: var(--control-h-touch); }
  input[type="text"], input[type="password"], input[type="email"], input[type="search"], select { min-height: var(--control-h-touch); }
  .toolbar { grid-template-columns: minmax(0, 1fr); }
  .toolbar .form-row { grid-template-columns: minmax(0, 1fr); }
  .form-row > button, .stack-form > button { justify-self: stretch; }
}

/* ---- status vocabulary --------------------------------------------------------------- */

.state-box {
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  margin: var(--space-3) 0;
  background: var(--tone-neutral-bg);
  color: var(--tone-neutral-fg);
  border-left: 4px solid currentColor;
}
.state-title { font-weight: 600; margin-bottom: var(--space-0-5); }
.state-detail { margin: 0; font-size: var(--text-md); line-height: var(--leading-md); }

[data-tone="success"] { background: var(--tone-success-bg); color: var(--tone-success-fg); }
[data-tone="warning"] { background: var(--tone-warning-bg); color: var(--tone-warning-fg); }
[data-tone="danger"] { background: var(--tone-danger-bg); color: var(--tone-danger-fg); }
[data-tone="info"] { background: var(--tone-info-bg); color: var(--tone-info-fg); }
[data-tone="neutral"] { background: var(--tone-neutral-bg); color: var(--tone-neutral-fg); }

.chip {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 var(--space-3);
  border-radius: var(--radius-pill);
  font-size: var(--text-sm);
  line-height: var(--leading-sm);
  background: var(--tone-neutral-bg);
  color: var(--tone-neutral-fg);
}
.chip::before { content: "● "; font-size: 0.6em; vertical-align: middle; white-space: pre; }
.chip[data-tone="success"]::before, .chip[data-tone="warning"]::before, .chip[data-tone="danger"]::before, .chip[data-tone="info"]::before { content: "● "; }
.chip[data-tone="neutral"]::before { content: "○ "; }

.alert {
  position: relative;
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-12) var(--space-3) var(--space-4);
  margin: 0 0 var(--space-4);
  border-left: 4px solid currentColor;
}
.alert-title { font-weight: 600; margin: 0 0 var(--space-0-5); }
.alert-detail { margin: 0; font-size: var(--text-md); line-height: var(--leading-md); }
.alert .link { color: inherit; }
.alert-close {
  position: absolute;
  right: var(--space-2);
  top: var(--space-2);
  width: var(--control-h-sm);
  min-height: var(--control-h-sm);
  padding: 0;
  background: transparent;
  color: inherit;
  border: 0;
  border-radius: var(--radius-sm);
  font-size: var(--text-xl);
  line-height: 1;
}
@media (max-width: 768px) {
  .alert-close { width: var(--control-h-touch); min-height: var(--control-h-touch); }
}

.empty-state {
  padding: var(--space-6);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-lg);
  background: var(--surface-sunken);
  max-width: var(--measure);
}
.empty-title { font-weight: 600; margin: 0 0 var(--space-1); }
.empty-detail { margin: 0; color: var(--ink-soft); }

/* One surface recipe for every card and panel; variants only change padding and edge. */
.card, .dash-card, .product-card, .status-card, .onboarding-panel, .auth-card, .surface {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-5);
  min-width: 0;
  box-shadow: var(--shadow-1);
}
.card + .card { margin-top: var(--space-4); }
.card-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-2) var(--space-4); }
.card-head h2, .card-head h3 { margin: 0; }
.card-head p { margin: 0; }

.facts, .product-fields {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: var(--space-2) var(--space-4);
  margin: 0 0 var(--space-3);
  font-variant-numeric: tabular-nums;
}
.facts dt, .product-fields dt { font-weight: 600; color: var(--ink-soft); }
.facts dd, .product-fields dd { margin: 0; overflow-wrap: anywhere; }
.product-fields dt > label { margin: 0; font: inherit; }
@media (max-width: 520px) {
  .facts, .product-fields { grid-template-columns: minmax(0, 1fr); gap: var(--space-0-5) 0; }
  .facts dd, .product-fields dd { margin-bottom: var(--space-2); }
}

.table, .mk-items { width: 100%; border-collapse: collapse; font-size: var(--text-md); line-height: var(--leading-md); }
.table th, .table td, .mk-items th, .mk-items td { text-align: left; padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--line); vertical-align: top; }
.table th, .mk-items th { font-weight: 600; color: var(--ink-soft); white-space: nowrap; }
.mk-items th { white-space: normal; }
.table td.actions-cell { white-space: nowrap; }
.table-wrap { overflow-x: auto; min-width: 0; max-width: 100%; }
.plain-list { list-style: none; margin: 0 0 var(--space-3); padding: 0; display: grid; gap: var(--space-2); }
.plain-list li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); overflow-wrap: anywhere; }

/* Wide tables become records on narrow viewports (`recordsBelow` in ui.js toggles the class
   from a media query): every cell keeps its header as a label, the DOM order and the header
   semantics stay (role=row / role=cell), nothing is clipped and nothing scrolls sideways. */
.record-toggle { display: none; }
.table--records-active, .table--records-active tbody, .table--records-active tr, .table--records-active td { display: block; }
.table--records-active thead { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.table--records-active thead tr, .table--records-active thead th { display: block; width: 1px; height: 1px; padding: 0; overflow: hidden; }
.table--records-active tr {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3);
  margin: 0 0 var(--space-3);
  background: var(--surface);
}
.table--records-active td {
  display: grid;
  grid-template-columns: minmax(88px, 34%) minmax(0, 1fr);
  gap: var(--space-1) var(--space-2);
  align-items: start;
  padding: var(--space-1) 0;
  border-bottom: 0;
  overflow-wrap: anywhere;
}
.table--records-active td::before {
  content: attr(data-label);
  font-size: var(--text-xs);
  line-height: var(--leading-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
  padding-top: 2px;
}
.table--records-active td.actions-cell { white-space: normal; }
.table--records-active td.actions-cell, .table--records-active .mk-map-cell { grid-template-columns: minmax(0, 1fr); min-width: 0; }
.table--records-active td > .chip, .table--records-active td > .mk-map-product { justify-self: start; }
.table--records-active td[data-priority="low"] { display: none; }
.table--records-active tr[data-expanded="1"] td[data-priority="low"] { display: grid; }
.table--records-active tr:has(.record-toggle) td:first-child { padding-right: var(--control-h-touch); }
.table--records-active .record-toggle { display: inline-flex; position: absolute; top: var(--space-2); right: var(--space-2); }
.table--records-active tr[data-expanded="1"] .record-toggle svg { transform: rotate(180deg); }

details.diagnostics { margin-top: var(--space-3); font-size: var(--text-md); line-height: var(--leading-md); color: var(--ink-soft); }
details.diagnostics > *:not(summary) { margin-top: var(--space-2); }

.skeleton { display: inline-block; height: 1em; width: 8ch; background: var(--surface-muted); border-radius: var(--radius-sm); vertical-align: middle; }

/* ---- public / signed-out ------------------------------------------------------------- */

.auth-layout {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(320px, 440px);
  gap: var(--space-10);
  padding: var(--space-10) var(--space-6);
  max-width: var(--auth-max);
  width: 100%;
  margin: 0 auto;
  align-items: start;
}
.auth-intro h1 { font-size: var(--text-display); line-height: var(--leading-display); max-width: 22ch; }
.intro-points { margin: var(--space-4) 0 0; padding-left: 0; list-style: none; display: grid; gap: var(--space-3); max-width: 52ch; }
.intro-points li { position: relative; padding-left: var(--space-6); color: var(--ink-soft); }
.intro-points li::before { content: "✓"; position: absolute; left: 0; color: var(--accent-2); font-weight: 700; }
.auth-card {
  border-radius: var(--radius-xl);
  padding: var(--space-6) var(--space-6) var(--space-5);
}
.auth-tabs { display: flex; gap: var(--space-1); border-bottom: 1px solid var(--line); margin: 0 0 var(--space-5); }
.auth-tab {
  display: inline-flex;
  align-items: center;
  min-height: var(--control-h);
  padding: 0 var(--space-4);
  font-weight: 600;
  color: var(--ink-soft);
  text-decoration: none;
  border-bottom: 3px solid transparent;
  margin-bottom: -1px;
}
.auth-tab[aria-current="page"] { color: var(--ink); border-bottom-color: var(--signal); }
.auth-form h2 { font-size: var(--text-xl); line-height: var(--leading-xl); margin-bottom: var(--space-4); }
.auth-switch { margin-top: var(--space-4); }
@media (max-width: 768px) {
  .auth-layout { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); padding: var(--space-6) var(--space-4); }
  .auth-intro h1 { font-size: var(--text-2xl); line-height: var(--leading-2xl); }
  .auth-tab { min-height: var(--control-h-touch); }
}

/* ---- application shell ----------------------------------------------------------------- */

.app-shell {
  flex: 1;
  display: grid;
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
  width: 100%;
  min-height: 0;
}
/* Signed out, the navigation aside is hidden and the one main landmark spans the shell. */
.app-shell:has(> #signed-in[hidden]) { grid-template-columns: minmax(0, 1fr); }
#main-content { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.sidebar {
  background: var(--surface);
  border-right: 1px solid var(--line);
  padding: var(--space-5) var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  min-width: 0;
}
.org-context { padding: var(--space-3); background: var(--surface-sunken); border: 1px solid var(--line); border-radius: var(--radius-md); }
.org-context-name { margin: var(--space-0-5) 0 0; font-weight: 600; overflow-wrap: anywhere; }
.org-context-role { margin: 0; font-size: var(--text-sm); line-height: var(--leading-sm); color: var(--ink-soft); }
.org-context-select { margin-top: var(--space-2); font-size: var(--text-md); }
.app-nav { display: grid; gap: var(--space-0-5); }
.nav-link {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--control-h);
  padding: 0 var(--space-3);
  border-radius: var(--radius-md);
  color: var(--ink);
  text-decoration: none;
  font-weight: 500;
}
.nav-link:hover { background: var(--surface-sunken); }
.nav-link[aria-current="page"] { background: var(--signal-soft); color: var(--signal); font-weight: 600; }
.nav-icon { width: 20px; height: 20px; flex: none; color: var(--ink-faint); }
.nav-link[aria-current="page"] .nav-icon { color: var(--signal); }
.account-block { margin-top: auto; padding-top: var(--space-4); border-top: 1px solid var(--line); display: grid; gap: var(--space-2); }
.account-email { margin: 0 0 var(--space-2); font-size: var(--text-md); line-height: var(--leading-md); overflow-wrap: anywhere; }

.page-area { flex: 1; width: 100%; padding: var(--space-6) var(--space-8) var(--space-10); min-width: 0; max-width: var(--content-max); }
.page-header { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--space-3) var(--space-4); margin-bottom: var(--space-5); }
.page-header h1 { margin: 0; }
.page-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.page { min-width: 0; }
.page > .lead { margin-bottom: var(--space-5); }

@media (max-width: 900px) {
  /* The shell becomes a rail: organization context, one scrollable row of 44 px navigation
     items (every item reachable, the current one marked), the account row. */
  .app-shell { grid-template-columns: minmax(0, 1fr); }
  .sidebar { border-right: 0; border-bottom: 1px solid var(--line); padding: var(--space-3) var(--space-4); gap: var(--space-3); }
  .app-nav { display: flex; flex-wrap: nowrap; overflow-x: auto; gap: var(--space-1); padding-bottom: var(--space-0-5); scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
  .nav-link { flex: none; min-height: var(--control-h-touch); padding: 0 var(--space-3); font-size: var(--text-md); scroll-snap-align: start; white-space: nowrap; }
  .account-block { margin-top: 0; padding-top: var(--space-3); grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  .account-block .account-label { grid-column: 1 / -1; }
  .page-area { padding: var(--space-5) var(--space-4) var(--space-8); }
}

/* ---- dashboard ---------------------------------------------------------------------- */

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-4); margin-bottom: var(--space-6); }
.dash-card {
  padding: var(--space-4) var(--space-5);
  display: grid;
  gap: var(--space-2);
  align-content: start;
}
.dash-card-value { margin: 0; font-size: var(--text-xl); line-height: var(--leading-xl); font-weight: 600; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.dash-card-detail { margin: 0; font-size: var(--text-md); line-height: var(--leading-md); color: var(--ink-soft); }
.dash-card a { font-size: var(--text-md); line-height: var(--leading-md); }
.next-action { background: var(--signal-soft); border-radius: var(--radius-lg); padding: var(--space-5); max-width: 72ch; }
.next-action h2 { margin-bottom: var(--space-2); }

/* ---- onboarding ---------------------------------------------------------------------- */

.stepper { list-style: none; margin: 0 0 var(--space-5); padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); }
.stepper li { display: flex; align-items: center; color: var(--ink-faint); font-size: var(--text-md); line-height: var(--leading-md); }
.step-link { display: flex; align-items: center; gap: var(--space-2); margin: 0; padding: 0 var(--space-1); min-height: var(--control-h-sm); border: 0; border-radius: var(--radius-sm); background: transparent; color: inherit; font: inherit; cursor: pointer; }
.step-link:disabled { cursor: default; opacity: 1; }
.step-number {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%;
  border: 1px solid var(--line-strong); font-size: var(--text-sm); font-weight: 600; color: var(--ink-soft); background: var(--surface);
}
.stepper li[data-state="done"] { color: var(--ink-soft); }
.stepper li[data-state="done"] .step-number { background: var(--tone-success-bg); color: var(--tone-success-fg); border-color: var(--tone-success-fg); }
.stepper li[data-state="done"] .step-number { position: relative; color: transparent; }
.stepper li[data-state="done"] .step-number::before { content: "✓"; position: absolute; inset: 0; display: inline-flex; align-items: center; justify-content: center; color: var(--tone-success-fg); }
.stepper li[data-state="current"] { color: var(--ink); font-weight: 600; }
.stepper li[data-state="current"] .step-number { background: var(--accent-2); color: var(--signal-ink); border-color: var(--accent-2); }
.onboarding-panel {
  border-radius: var(--radius-xl);
  padding: var(--space-5) var(--space-6);
  max-width: var(--panel-max);
  display: grid;
  gap: var(--space-3);
}
.onboarding-panel h2 { margin: 0; }
.onboarding-panel .form-row, .onboarding-panel .agreement { margin: 0; }
.agreement { display: grid; gap: var(--space-2); padding-top: var(--space-3); border-top: 1px solid var(--line); }
.agreement .state-title { font-weight: 600; margin: 0; }

/* ---- products ------------------------------------------------------------------------ */

.product-card { margin-bottom: var(--space-4); }
.product-fields { margin: var(--space-3) 0 var(--space-4); }
.product-card .form-row input { max-width: 480px; }
.product-row-name { font-weight: 600; overflow-wrap: anywhere; }
.session { margin-top: var(--space-6); }
.session-list { margin: var(--space-2) 0 0; padding-left: var(--space-5); }
.session-list li { margin-bottom: var(--space-1); overflow-wrap: anywhere; }
.session-list button { margin-left: var(--space-2); }

/* ---- marketplace ------------------------------------------------------------------------ */

.marketplace { display: grid; gap: var(--space-4); }
.marketplace > * { min-width: 0; }
.status-card {
  border-left: 4px solid var(--signal);
  padding: var(--space-4) var(--space-5);
}
.status-card[data-tone="warning"] { border-left-color: var(--tone-warning-fg); background: var(--surface); color: var(--ink); }
.status-card[data-tone="success"] { border-left-color: var(--tone-success-fg); background: var(--surface); color: var(--ink); }
.status-card[data-tone="neutral"] { border-left-color: var(--line-strong); background: var(--surface); color: var(--ink); }
.status-card-title { margin: var(--space-0-5) 0 0; font-weight: 600; font-size: var(--text-lg); line-height: var(--leading-lg); }
.status-card-detail { margin: var(--space-1) 0 0; color: var(--ink-soft); }
.mk-connection { display: grid; gap: var(--space-3); min-width: 0; }
.marketplace .form-row input, .marketplace .form-row select, .marketplace .stack-form input, .marketplace .stack-form select { max-width: 420px; }
.mk-snapshot { min-width: 0; display: grid; gap: var(--space-2); }
.mk-items tr[data-presence="ABSENT"] td { color: var(--ink-soft); text-decoration: line-through; }
.mk-items tr[data-presence="ABSENT"] td.mk-map-cell { text-decoration: none; }
.marketplace[data-busy="1"] { opacity: 0.85; }

/* Marketplace <-> local Catalog mapping: the relation state is words in a chip, the
   actions are explicit buttons, and the link/import panel is a bounded block below the
   snapshot table -- the marketplace row itself never becomes an editable product. */
.mk-map-cell { min-width: 220px; }
.mk-map-cell .chip { white-space: nowrap; }
.mk-map-product { display: block; font-size: var(--text-md); line-height: var(--leading-md); }
.mk-map-explain { display: block; font-size: var(--text-sm); line-height: var(--leading-sm); color: var(--ink-soft); margin-top: var(--space-0-5); }
.mk-map-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-2); }
.mk-map-panel {
  margin-top: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface-sunken);
  display: grid;
  gap: var(--space-3);
  min-width: 0;
}
.mk-map-panel h3 { margin: 0; }
.mk-map-panel input { max-width: 420px; }
.mk-map-results { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.mk-map-results li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); overflow-wrap: anywhere; }
.mk-import-preview { display: grid; gap: var(--space-2); }

/* ---- modal ----------------------------------------------------------------------------- */

.modal {
  border: 1px solid var(--line);
  border-radius: var(--radius-2xl);
  padding: var(--space-6);
  max-width: min(92vw, 480px);
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-3);
}
.modal::backdrop { background: var(--backdrop); }
.modal h2 { font-size: var(--text-lg); line-height: var(--leading-lg); }
.modal .actions { justify-content: flex-end; margin-top: var(--space-4); }
@media (max-width: 520px) {
  .modal .actions { flex-direction: column; align-items: stretch; }
}

/* ---- footer ---------------------------------------------------------------------------- */

.shell-footer {
  padding: var(--space-3) var(--space-6);
  border-top: 1px solid var(--line);
  color: var(--ink-soft);
  font-size: var(--text-sm);
  line-height: var(--leading-sm);
  background: var(--surface);
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}