/* OBS Admin. Desktop-first ops console, English-only (contract; hardcoded strings
   sanctioned for admin). Token-based so the whole console themes light/dark from one
   place. Layout system: .form-grid / .check-grid / .split-2 / .btn-row / .table-wrap. */
:root {
  color-scheme: light;
  /* Monochrome black-on-white theme: black brand (top bar + buttons), white canvas. */
  --brand: #111113;          /* near-black: top bar + primary button fill */
  --brand-600: #000000;      /* button hover */
  --brand-700: #000000;
  --accent: #111113;         /* focus/links/active nav - black, keeps it monochrome */

  --bg: #ffffff;             /* white app canvas */
  --surface: #ffffff;        /* cards, tables, top bar drop targets */
  --surface-2: #f4f4f5;      /* subtle raised/zebra fill */
  --field: #ffffff;
  --line: #e4e4e7;           /* hairlines */
  --line-strong: #d4d4d8;

  --ink: #18181b;            /* primary text (near-black) */
  --ink-2: #3f3f46;          /* secondary text */
  --muted: #71717a;          /* hints, captions */

  --danger: #b3261e;         /* semantic status colours kept for clarity */
  --danger-bg: #fdecea;
  --success: #1a7f47;
  --success-bg: #e7f4ec;
  --warning: #8a5a00;
  --warning-bg: #fbf1dd;
  --chip: #f4f4f5;           /* neutral pill fill */

  --radius: 10px;
  --radius-sm: 6px;
  --shadow: 0 1px 2px rgba(16, 32, 48, .06), 0 4px 16px rgba(16, 32, 48, .06);
  --shadow-sm: 0 1px 2px rgba(16, 32, 48, .08);
  --nav-w: 236px;
  --topbar-h: 56px;
  --control-h: 2.4rem;       /* one height for inputs, selects, and buttons */
}

/* No OS-dark override: this console is a deliberate black-on-white theme in every mode. */

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

/* ---- top bar ------------------------------------------------------------ */
#topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  height: var(--topbar-h);
  flex: 0 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 0 1.25rem;
  background: linear-gradient(180deg, var(--brand-600), var(--brand));
  color: #fff;
  box-shadow: var(--shadow-sm);
}
#brand {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: .01em;
  white-space: nowrap;
}
#brand .brand-mark {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 7px;
  background: rgba(255, 255, 255, .16);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .04em;
}
.topbar-left { display: inline-flex; align-items: center; gap: .5rem; min-width: 0; }
#nav-toggle {
  background: none; border: 0; color: #fff; cursor: pointer;
  font-size: 1.15rem; line-height: 1; padding: .3rem .5rem; margin: 0;
  min-height: 0; border-radius: var(--radius-sm);
}
#nav-toggle:hover { background: rgba(255, 255, 255, .14); }
#nav-toggle:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }
#session { display: inline-flex; align-items: center; gap: .85rem; min-width: 0; }
#session .who { display: flex; flex-direction: column; line-height: 1.2; text-align: right; min-width: 0; }
#session .who-name { font-weight: 600; font-size: .9rem; }
#session .who-roles {
  font-size: .74rem;
  color: rgba(255, 255, 255, .72);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---- layout: sidebar + main -------------------------------------------- */
#layout { flex: 1 1 auto; display: flex; align-items: stretch; min-height: 0; }

#nav {
  flex: 0 0 var(--nav-w);
  width: var(--nav-w);
  background: var(--surface);
  border-right: 1px solid var(--line);
  padding: .75rem;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
#nav:empty { display: none; }               /* signed out: no rail, main goes full width */
body.nav-hidden #nav { display: none; }      /* menu toggled off: main goes full width */
.nav-item {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .5rem .7rem;
  border-radius: var(--radius-sm);
  border-left: 3px solid transparent;
  color: var(--ink-2);
  text-decoration: none;
  font-size: .9rem;
  white-space: nowrap;
  overflow: hidden;
}
.nav-icon {
  flex: 0 0 auto;
  display: inline-flex;
  width: 18px;
  height: 18px;
  opacity: .8;                                /* icon inherits currentColor; dim slightly at rest */
}
.nav-icon svg { width: 100%; height: 100%; display: block; }
.nav-label { overflow: hidden; text-overflow: ellipsis; }
.nav-item:hover .nav-icon, .nav-item.active .nav-icon { opacity: 1; }
.nav-item:hover { background: var(--surface-2); color: var(--ink); }
.nav-item:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.nav-item.active {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border-left-color: var(--accent);
  color: var(--brand);
  font-weight: 600;
}
.nav-empty { padding: .5rem .7rem; }

main#app {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  max-width: 1180px;
  margin-inline: auto;
  padding: 1.6rem 2rem 3rem;
}

/* ---- typography -------------------------------------------------------- */
h2 { font-size: 1.4rem; margin: 0 0 .4rem; letter-spacing: -.01em; }
h3 { font-size: 1.02rem; margin: 1.5rem 0 .55rem; }
h4 { font-size: .92rem; margin: 0 0 .5rem; color: var(--ink-2); }
a { color: var(--accent); text-underline-offset: 2px; }
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }
.page-head { margin-bottom: 1.4rem; }
.muted, .badge { color: var(--muted); font-size: .85rem; }
p { margin: .5rem 0; }
code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .85em;
  background: var(--chip);
  padding: .1rem .35rem;
  border-radius: 4px;
}

/* Pricing "live version" banner: a Live pill, the version identifier, and when it went live. */
.live-banner {
  margin: .35rem 0 1.2rem;
  padding: .7rem .9rem;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-left: 3px solid var(--success);
  border-radius: var(--radius);
}
.live-line { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.live-tag {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .12rem .5rem; border-radius: 999px;
  background: var(--success-bg); color: var(--success);
  font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
}
.live-tag::before {
  content: ""; width: .5rem; height: .5rem; border-radius: 999px; background: var(--success);
}
.ver-chip { border: 1px solid var(--line); word-break: break-all; }
.live-note { margin: .5rem 0 0; }

/* Report meta (totals, issuer of record, ...): a compact label/value grid, not a JSON blob. */
.meta-list {
  display: grid; grid-template-columns: max-content 1fr; gap: .2rem .9rem;
  margin: .7rem 0 0; font-size: .85rem;
}
.meta-list dt { color: var(--muted); font-weight: 600; }
.meta-list dd { margin: 0; color: var(--ink); }

/* Every page's intro paragraph reads as a banner card, matching the pricing "live" banner:
   a surface panel with a left accent stripe. (The green live-banner stays exclusive to pricing.) */
h2 + p.badge {
  margin: .1rem 0 1.3rem;
  padding: .7rem .9rem;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  color: var(--ink-2);
  line-height: 1.45;
}

/* ---- link-style button + modal dialog ---------------------------------- */
.link-btn {
  font: inherit; background: none; border: 0; padding: 0; margin: 0;
  min-height: 0; box-shadow: none; cursor: pointer;
  color: var(--accent); text-decoration: underline;
}
.link-btn:hover { background: none; color: var(--ink); }
.modal-overlay {
  position: fixed; inset: 0; z-index: 100;
  display: flex; align-items: center; justify-content: center;
  padding: 1rem; background: rgba(16, 24, 32, .5);
}
.modal {
  width: 100%; max-width: 640px; max-height: 85vh; overflow: auto;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow);
}
.modal-head {
  position: sticky; top: 0; z-index: 1;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .75rem 1rem; background: var(--surface); border-bottom: 1px solid var(--line);
}
.modal-head h3 { margin: 0; font-size: 1rem; }
.modal-close {
  font-size: 1.35rem; line-height: 1; min-height: 0; margin: 0;
  padding: .05rem .45rem; background: none; color: var(--muted); border: 0; box-shadow: none;
}
.modal-close:hover { background: none; color: var(--ink); }
.modal-body { padding: 1rem; }
.modal-meta { margin-top: 0; word-break: break-word; }
.modal-rawwrap { margin-top: .8rem; }
.modal-raw {
  white-space: pre-wrap; word-break: break-word; font-size: .78rem;
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: .6rem;
}

/* ---- cards / modules --------------------------------------------------- */
.modules {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}
.module {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1rem 1.1rem;
  margin-block: 0 1rem;                     /* stacked section cards get rhythm for free */
  box-shadow: var(--shadow-sm);
}
.modules .module { margin-block: 0; }        /* inside the landing grid, the gap owns spacing */
.module h3, .module h4 { margin-top: 0; }
.module .soon { color: var(--muted); font-size: .85rem; }

/* Booking detail: a status header + grouped key/value sections, not run-together lines. */
.booking-detail .detail-head {
  display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.1rem;
}
.pill {
  display: inline-flex; align-items: center; padding: .16rem .6rem;
  border-radius: 999px; font-size: .76rem; font-weight: 600; letter-spacing: .02em;
}
.pill-state { background: var(--chip); color: var(--ink); border: 1px solid var(--line-strong); }
.pill-state.tone-ok { background: var(--success-bg); color: var(--success); border-color: transparent; }
.pill-state.tone-bad { background: var(--danger-bg); color: var(--danger); border-color: transparent; }
.pill-cancel { background: var(--warning-bg); color: var(--warning); }
.detail-product { color: var(--muted); font-size: .85rem; }
.detail-section { margin-bottom: 1.1rem; }
.detail-section:last-of-type { margin-bottom: .4rem; }
.detail-section h4 {
  margin: 0 0 .55rem; color: var(--muted);
  font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em;
}
.kv-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr));
  gap: .65rem 1.3rem;
}
.kv { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.kv-label { font-size: .72rem; color: var(--muted); }
.kv-value { font-size: .9rem; color: var(--ink); word-break: break-word; }
.detail-meta { margin-top: .3rem; }

/* landing cards are buttons that behave like tiles */
button.card-link {
  display: flex;
  flex-direction: column;
  gap: .7rem;
  align-items: flex-start;
  text-align: left;
  min-height: 6rem;
  padding: 1.1rem;
  margin: 0;
  cursor: pointer;
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  transition: border-color .14s ease;          /* on hover only the border changes */
}
/* these tiles are <button>s, so the global button:hover dark fill would apply; hold the
   light surface + ink text so ONLY the border changes on hover. */
button.card-link:hover {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--accent);
}
.card-icon {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 11px;
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
  color: var(--accent);                        /* icon strokes use currentColor */
}
.card-icon svg { width: 22px; height: 22px; display: block; }
button.card-link .card-title { font-size: 1rem; font-weight: 600; line-height: 1.25; }
button.card-link .card-perm {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .72rem;
}

/* ---- buttons ----------------------------------------------------------- */
button {
  font: inherit;
  font-size: .9rem;
  font-weight: 500;
  min-height: var(--control-h);
  background: var(--brand);
  color: #fff;
  border: 1px solid transparent;
  padding: .4rem 1rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
  margin-top: .75rem;
  transition: background .12s ease, box-shadow .12s ease;
}
button:hover { background: var(--brand-600); }
button:active { transform: translateY(.5px); }
button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
button + button { margin-inline-start: .5rem; }   /* adjacent actions never touch */
button.primary { padding: .5rem 1.15rem; font-weight: 600; }

/* ghost = neutral outline that works on LIGHT surfaces (main content) */
button.ghost {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--line-strong);
}
button.ghost:hover { background: var(--surface-2); border-color: var(--ink-2); }

/* the ONLY ghost on the dark top bar: white outline */
#session button.ghost {
  color: #fff;
  border-color: rgba(255, 255, 255, .55);
  margin-top: 0;
  min-height: 0;
  padding: .4rem .85rem;
}
#session button.ghost:hover { background: rgba(255, 255, 255, .14); border-color: #fff; }

/* in-table actions are compact and quiet */
td button {
  margin: 0;
  min-height: 0;
  padding: .26rem .6rem;
  font-size: .78rem;
  background: var(--surface);
  color: var(--accent);
  border: 1px solid var(--line-strong);
}
td button:hover { background: var(--surface-2); border-color: var(--accent); }

/* destructive actions read as destructive (approvals Reject, promo Deactivate) */
button[data-act="reject"], button[data-off] {
  background: transparent;
  color: var(--danger);
  border: 1px solid color-mix(in srgb, var(--danger) 45%, transparent);
}
button[data-act="reject"]:hover, button[data-off]:hover {
  background: var(--danger-bg);
  border-color: var(--danger);
}

/* an explicit action row: no first/last margin surprises, wraps on narrow screens */
.btn-row { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin-block: .85rem; }

/* ---- dashboard charts (ECharts) ---- */
.dash { margin-block: .2rem 1.4rem; }
.dash-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.chart-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-sm); padding: .85rem 1rem 1rem; display: flex; flex-direction: column;
}
.chart-card h3 {
  margin: 0 0 .5rem; font-size: .92rem; font-weight: 600; color: var(--ink);
  display: flex; align-items: center; letter-spacing: -.01em;
}
.chart-sample {
  font-size: .6rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--muted); border: 1px solid var(--line-strong); border-radius: 999px;
  padding: .04rem .45rem; margin-inline-start: .45rem;
}
.chart-box { inline-size: 100%; block-size: 240px; }
@media (max-width: 1100px) { .dash-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) { .dash-grid { grid-template-columns: 1fr; } }
.btn-row button { margin: 0; }

/* ---- forms ------------------------------------------------------------- */
label {
  display: block;
  margin-top: .85rem;
  font-weight: 600;
  font-size: .85rem;
  color: var(--ink-2);
  max-width: 26rem;
}
input, select, textarea {
  font: inherit;
  width: auto;
  max-width: 100%;
  min-height: var(--control-h);
  padding: .4rem .6rem;
  background: var(--field);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
input::placeholder, textarea::placeholder { color: var(--muted); }
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}
textarea { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .85rem; min-height: 0; }
input[type="file"] { border: 0; padding: .4rem 0; background: none; min-height: 0; }

/* date/time controls match text controls (height, alignment) on every platform.
   appearance:none stops iOS Safari sizing the native control as content-box,
   which made full-width date fields overflow their container by the padding. */
input[type="date"], input[type="time"], input[type="datetime-local"] {
  appearance: none;
  -webkit-appearance: none;
  min-width: 0;
  max-width: 100%;
}
input::-webkit-date-and-time-value { text-align: start; line-height: 1.5; margin: 0; }

/* stacked form fields: input sits full-width under its label */
label > input:not([type="checkbox"]):not([type="radio"]),
label > select,
label > textarea { display: block; width: 100%; margin-top: .3rem; }

/* checkbox rows read as a single line */
input[type="checkbox"], input[type="radio"] {
  width: auto; min-height: 0; margin-right: .45rem; accent-color: var(--brand);
}
label:has(> input[type="checkbox"]) {
  display: flex; align-items: center; gap: .1rem;
  font-weight: 500; max-width: none;
}

/* filter/search bars flow horizontally and wrap; every control shares one height */
form {
  display: flex;
  flex-wrap: wrap;
  gap: .7rem .9rem;
  align-items: flex-end;
  margin: 1rem 0;
  padding: 1rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
form > label { margin: 0; flex: 0 1 auto; }
form > input, form > select { flex: 1 1 10.5rem; min-width: 0; max-width: 15rem; }
form label > input, form label > select { max-width: 12rem; }
form label:has(> input[type="checkbox"]) { align-self: center; padding-bottom: .5rem; }
form button { margin-top: 0; }

/* config editors: labelled fields flow as a responsive grid inside their card */
.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr));
  gap: .9rem 1.2rem;
  align-items: end;
}
.form-grid label { margin: 0; max-width: none; }
.form-grid label:has(> input[type="checkbox"]) { align-self: center; }

/* Explicit label + helper text for every field. The label sits above the control; the helper
   (a short hint/format/example) sits beneath. Placeholders stay only as a decorative example. */
.field { display: flex; flex-direction: column; }
.field-label { font-size: .8rem; font-weight: 600; line-height: 1.25; color: var(--ink-2); }
.field > input:not([type="checkbox"]), .field > select, .field > textarea {
  max-width: none; width: 100%;
}
.field-help { margin-top: .3rem; font-size: .75rem; line-height: 1.35; color: var(--muted); }
/* checkbox field: the box + its label read as one line, helper beneath */
.field-inline { display: flex; align-items: center; gap: .1rem; font-weight: 500; }
.field-check .field-help { margin-top: .2rem; }
/* inside a horizontal filter bar a labelled field grows like a bare input once did */
form > label.field { flex: 1 1 12rem; max-width: 16rem; margin: 0; }
/* a filter bar of labelled fields top-aligns (labels line up); the submit button drops to the
   control row so it sits beside the inputs, not up at label height */
form:has(> label.field) { align-items: flex-start; }
form:has(> label.field) > button { margin-top: 1.3rem; }
/* dense card forms: labelled fields flow as a responsive grid, aligned to the top */
.field-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr));
  gap: .9rem 1.1rem; align-items: start; margin: .6rem 0 .2rem;
}
.field-grid label { margin: 0; max-width: none; }
.wd-row { display: flex; flex-wrap: wrap; gap: .15rem .6rem; margin-top: .3rem; }
/* a date paired with a 24-hour HH:MM time field on one row (reports range, etc.) */
label.field:has(.dt-row) { max-width: 20rem; }
.dt-row { display: flex; gap: .4rem; align-items: center; }
.dt-row > input[type="date"] { flex: 1 1 auto; min-width: 0; width: auto; }
.dt-row > input.time-hm { flex: 0 0 4.6rem; width: 4.6rem; text-align: center; }

/* permission matrix and other long checkbox sets: tidy columns, not a word-wrap soup */
.check-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
  gap: .3rem 1rem;
}
.check-grid label { margin: 0; font-size: .85rem; }

/* two-pane working areas (pricing editor); collapses to one column when narrow */
.split-2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 30rem), 1fr));
  gap: 1.25rem;
  align-items: start;
  margin-block: 1rem;
}

/* pricing editor op cards: a header, a responsive field grid, then the Apply button */
#editor-forms .module { margin-block: 0 .9rem; }
#editor-forms .module h4 { margin: 0 0 .4rem; }
#editor-forms .module button { margin-top: .3rem; }
#editor-forms .module .badge { margin: .5rem 0 0; }
/* pricing editor tabs: one op group visible at a time */
#editor-forms .tabs {
  display: flex; flex-wrap: wrap; gap: .1rem;
  border-bottom: 1px solid var(--line); margin-bottom: 1rem;
}
#editor-forms .tab {
  background: none; border: 0; border-bottom: 2px solid transparent;
  color: var(--muted); font-weight: 600; font-size: .85rem;
  padding: .5rem .85rem; margin: 0; min-height: 0; border-radius: 0; cursor: pointer;
}
#editor-forms .tab:hover { background: var(--surface-2); color: var(--ink); }
#editor-forms .tab.active { color: var(--brand); border-bottom-color: var(--accent); }
#editor-forms .tabpanel { display: none; }
#editor-forms .tabpanel.active { display: block; }
/* resulting-table slice hidden when it doesn't match the active editor tab */
#module-body .restab-hidden { display: none; }
.wd { display: inline-flex; align-items: center; gap: .25rem; font-weight: 400; }

/* ---- tables ------------------------------------------------------------ */
/* The wrapper owns the frame AND the horizontal scroll: wide tables scroll inside
   it; the page itself never scrolls sideways. */
.table-wrap {
  margin: .75rem 0 1rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow-x: auto;
}
.module .table-wrap { box-shadow: none; margin-bottom: .25rem; }
table.data {
  border-collapse: collapse;
  width: 100%;
  margin: 0;
  font-size: .88rem;
  font-variant-numeric: tabular-nums;
}
table.data th, table.data td {
  text-align: left;
  padding: .5rem .75rem;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
table.data th {
  background: var(--surface-2);
  font-size: .74rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--ink-2);
  white-space: nowrap;
}
table.data tr:last-child td { border-bottom: 0; }
table.data tbody tr:hover, table.data tr:hover { background: var(--surface-2); }

/* Allocation-calendar editor: compact effective-from + capacity fields, one row per step. */
table.alloc-editor { border-collapse: collapse; margin: .5rem 0 .75rem; }
table.alloc-editor th, table.alloc-editor td {
  padding: .3rem .6rem .3rem 0; text-align: left; vertical-align: middle;
}
table.alloc-editor th { font-size: .8rem; font-weight: 600; color: var(--muted); }
table.alloc-editor input[type="number"] { width: 8.5rem; }
.alloc-when { white-space: nowrap; }
table.alloc-editor input.alloc-fromt { width: 4.8rem; margin-left: .4rem; }

/* Resulting-table cell markers: theme-aware via the semantic *-bg / fg vars, so the
   added/changed/removed states read on both light and dark. Removed cells are struck. */
td.chg-added { background: var(--success-bg); }
td.chg-changed { background: var(--warning-bg); }
tr.chg-removed td { background: var(--danger-bg); color: var(--danger); }
tr.chg-removed s { color: var(--danger); }
.chg-tag {
  display: inline-block; border-radius: 999px; padding: .02rem .4rem;
  font-size: .7rem; font-weight: 600; vertical-align: middle; text-transform: uppercase;
}
td.chg-added .chg-tag { background: var(--success); color: var(--surface); }
tr.chg-removed .chg-tag { background: var(--danger); color: var(--surface); }
.chg-was { display: block; font-size: .72rem; color: var(--muted); text-decoration: line-through; }
h3.chg-removed-h { color: var(--danger); }
/* legend: colour the words themselves so the key is self-describing */
.chg-legend .chg-added { background: var(--success-bg); color: var(--success); padding: 0 .3rem; border-radius: var(--radius-sm); }
.chg-legend .chg-changed { background: var(--warning-bg); color: var(--warning); padding: 0 .3rem; border-radius: var(--radius-sm); }
.chg-legend .chg-removed { background: var(--danger-bg); color: var(--danger); padding: 0 .3rem; border-radius: var(--radius-sm); text-decoration: line-through; }

/* status chips: only pill-ify badges used inline in headers/tables, not hint paragraphs */
h3 .badge, h4 .badge, td .badge, table.data .badge {
  display: inline-block;
  background: var(--chip);
  color: var(--ink-2);
  border-radius: 999px;
  padding: .08rem .55rem;
  font-size: .72rem;
  font-weight: 600;
  margin-left: .4rem;
}

/* ---- messages ---------------------------------------------------------- */
.problem {
  color: var(--danger);
  background: var(--danger-bg);
  border: 1px solid color-mix(in srgb, var(--danger) 35%, transparent);
  border-radius: var(--radius-sm);
  padding: .6rem .8rem;
  margin: .75rem 0;
  font-size: .9rem;
}
p.badge { margin: .5rem 0; line-height: 1.45; max-width: 62ch; }

/* pricing read-only views: the base-price warning must be unmissable but is not
   an error; band tags + calendar cells share one sequential band palette */
.notice-warn {
  color: var(--warning);
  background: var(--warning-bg);
  border: 1px solid color-mix(in srgb, var(--warning) 40%, transparent);
  border-radius: var(--radius-sm);
  padding: .6rem .8rem;
  margin: .75rem 0;
  font-size: .9rem;
  max-width: none;
}
.band-tag {
  display: inline-block;
  min-width: 1.15rem;
  text-align: center;
  border-radius: 4px;
  padding: 0 .2rem;
  font-size: .68rem;
  font-weight: 700;
  vertical-align: text-top;
}
td.cal-cell { text-align: center; padding: .25rem .4rem; font-size: .74rem; font-weight: 600; }
.band-a { background: color-mix(in srgb, var(--accent) 8%, var(--surface)); }
.band-b { background: color-mix(in srgb, var(--accent) 20%, var(--surface)); }
.band-c { background: color-mix(in srgb, var(--accent) 34%, var(--surface)); }
.band-d { background: color-mix(in srgb, var(--accent) 50%, var(--surface)); color: #fff; }
.band-e { background: color-mix(in srgb, var(--accent) 66%, var(--surface)); color: #fff; }
.band-f { background: var(--chip); color: var(--muted); }
.band-x { background: transparent; color: var(--muted); }

details {
  margin: 1rem 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  padding: .5rem .9rem;
}
summary { cursor: pointer; font-weight: 600; font-size: .9rem; }

/* ---- inline help: the "?" icon and its op-guide dialog ------------------ */
.help-btn {
  min-height: 0;
  width: 1.45rem;
  height: 1.45rem;
  padding: 0;
  margin: 0 0 0 .45rem;
  display: inline-grid;
  place-items: center;
  vertical-align: text-bottom;
  border-radius: 50%;
  background: transparent;
  color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent);
  font-size: .78rem;
  font-weight: 700;
}
.help-btn:hover {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border-color: var(--accent);
}

dialog.help-dialog {
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow);
  width: min(46rem, calc(100vw - 2rem));
  max-height: 85vh;
  max-height: min(88dvh, 48rem);
  overflow-y: auto;
  overscroll-behavior: contain;
}
dialog.help-dialog::backdrop { background: rgba(8, 14, 22, .55); }
.help-head {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: .8rem 1.25rem;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.help-head h3 { margin: 0; }
.help-head button { margin: 0; min-height: 0; padding: .3rem .8rem; font-size: .8rem; }
.help-body { padding: .9rem 1.25rem 1.3rem; }
.help-body > h4 {
  margin: 1.2rem 0 .15rem;
  color: var(--ink);
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.help-rules { margin: .2rem 0 1rem; padding-left: 1.15rem; }
.help-rules li { margin: .25rem 0; font-size: .85rem; color: var(--ink-2); }
.op-doc { padding: .65rem 0 .75rem; border-bottom: 1px solid var(--line); }
.op-doc h5 { margin: 0 0 .25rem; font-size: .88rem; font-weight: 600; color: var(--ink); }
.op-doc h5 code {
  font-size: .95em;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}
.op-doc h5 span { font-weight: 500; color: var(--ink-2); }
.op-doc p { margin: .2rem 0; font-size: .84rem; color: var(--ink-2); max-width: none; }
.op-doc p.op-fields {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .76rem;
  color: var(--muted);
}
.op-ex { display: flex; align-items: flex-start; gap: .6rem; margin-top: .45rem; }
.op-ex code {
  flex: 1 1 auto;
  min-width: 0;
  display: block;
  padding: .4rem .55rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.op-ex button {
  flex: 0 0 auto;
  margin: 0;
  min-height: 0;
  padding: .3rem .7rem;
  font-size: .78rem;
  background: var(--surface);
  color: var(--accent);
  border: 1px solid var(--line-strong);
}
.op-ex button:hover { background: var(--surface-2); border-color: var(--accent); }

/* ---- signed-out login card --------------------------------------------- */
.login-card {
  max-width: 22rem;
  margin: 3.5rem auto;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.75rem 1.75rem 2rem;
}
.login-card h2 { text-align: center; margin-bottom: 1.25rem; }
.login-card button { width: 100%; margin-top: 1.25rem; padding: .6rem; }

svg { max-width: 100%; height: auto; }

/* ---- phone / narrow screens -------------------------------------------- */
@media (max-width: 880px) {
  :root { --topbar-h: 52px; }
  #topbar { padding: 0 .9rem; }
  #session .who-roles { display: none; }

  /* the rail becomes a horizontal chip strip pinned under the top bar */
  #layout { flex-direction: column; }
  #nav {
    position: sticky;
    top: var(--topbar-h);
    z-index: 15;
    flex: 0 0 auto;
    width: 100%;
    flex-direction: row;
    gap: .35rem;
    overflow-x: auto;
    overflow-y: hidden;
    border-right: 0;
    border-bottom: 1px solid var(--line);
    padding: .5rem .75rem;
    scrollbar-width: thin;
  }
  .nav-item {
    flex: 0 0 auto;
    gap: .4rem;
    border-left: 0;
    border: 1px solid transparent;
    border-radius: 999px;
    padding: .32rem .8rem;
    font-size: .84rem;
  }
  .nav-icon { width: 16px; height: 16px; }
  .nav-item.active { border-color: color-mix(in srgb, var(--accent) 45%, transparent); }

  main#app { padding: 1rem .9rem 2.5rem; }
  h2 { font-size: 1.25rem; }

  /* iOS zooms into any focused control under 16px; keep controls at 16px on phones */
  input, select, textarea { font-size: 16px; }

  form { padding: .8rem; gap: .6rem .75rem; }
  form > input, form > select, form > label { flex: 1 1 100%; max-width: none; }
  form label > input, form label > select { max-width: none; }
  form button { flex: 1 1 auto; }

  .modules { gap: .7rem; }
  button.card-link { min-height: 4.4rem; padding: .85rem .95rem; }

  table.data th, table.data td { padding: .45rem .55rem; }
  .login-card { margin: 1.75rem auto; padding: 1.4rem 1.25rem 1.6rem; }

  dialog.help-dialog { width: calc(100vw - 1.2rem); }
  .help-head { padding: .7rem .9rem; }
  .help-body { padding: .8rem .9rem 1.1rem; }
  .op-ex { flex-wrap: wrap; }
}

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