/* ==========================================================================
   Component grammar — buttons, fields, cards, tables, nav, shells, states.
   Every page composes these; no page invents its own primitives.
   ========================================================================== */

/* ------------------------------------------------------------- buttons --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 18px;
  border: 1px solid transparent;
  border-radius: var(--r-ctl);
  font-weight: 620;
  font-size: var(--text-body);
  line-height: 1;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease),
              box-shadow var(--t-fast) var(--ease), transform var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease);
  -webkit-user-select: none;
  user-select: none;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: scale(0.985); }
.btn[disabled], .btn[aria-disabled="true"] {
  opacity: 0.55;
  pointer-events: none;
}
.btn.lg { min-height: 46px; padding: 0 24px; font-size: var(--text-body-lg); border-radius: 12px; }
.btn.sm { min-height: 36px; min-width: 36px; padding: 0 12px; font-size: var(--text-small); border-radius: 9px; }

.btn-primary {
  /* owner-directed button material: the approved nav CTA's premium charcoal,
     extended to every conspicuous primary action. Chosen over dimensional
     white because on porcelain surfaces (forms, cards, dialogs) a white fill
     loses figure-ground; charcoal keeps unmistakable hierarchy and echoes
     the panda glyph. The page palette stays cobalt/white everywhere else. */
  background: linear-gradient(180deg, #27272A, #050505);
  color: #fff;
  box-shadow: 0 10px 24px -10px rgba(9, 12, 20, 0.55);
}
.btn-primary:hover {
  background: linear-gradient(180deg, #313134, #0B0B0D);
  transform: translateY(-1px);
  box-shadow: 0 14px 28px -10px rgba(9, 12, 20, 0.6);
}

/* hero-scene primary: the one owner-requested change vs the accepted
   palette — the hero CTA is soft white with dark text, not bright blue */
.btn-scene-primary {
  background: linear-gradient(180deg, #FFFFFF, #F1F5FC);
  color: var(--ink-strong);
  border: 1px solid rgba(15, 23, 42, 0.12);
  box-shadow: 0 1px 2px rgba(13, 23, 44, 0.14), 0 12px 26px -12px rgba(13, 23, 44, 0.4);
}
.btn-scene-primary:hover {
  background: #FFFFFF;
  transform: translateY(-1px);
  box-shadow: 0 16px 30px -12px rgba(13, 23, 44, 0.45);
}

.btn-secondary {
  background: var(--bg-raise);
  border-color: var(--border);
  color: var(--ink-strong);
  box-shadow: var(--e-1);
}
.btn-secondary:hover { background: var(--bg-hover); border-color: var(--border-strong); }

.btn-ghost { background: transparent; color: var(--ink); }
.btn-ghost:hover { background: var(--bg-hover); }

.btn-danger { background: var(--bad); color: #fff; }
.btn-danger:hover { background: #B23245; }

/* over-scene (hero) variants */
.btn-scene-secondary {
  /* Was a white 16% tint, which brightens the surface under white text: the
     label measured 3.06:1 over the sunlit bay, under the 4.5 floor for 14px.
     Tint with the same navy the hero's other glass uses, so the label has
     ground instead of competing with the scene. Border stays white so the
     glass keeps its lit edge. */
  background: rgba(6, 24, 62, 0.44);
  border-color: rgba(255, 255, 255, 0.38);
  color: #fff;
  backdrop-filter: blur(16px);
}
.btn-scene-secondary:hover { background: rgba(6, 24, 62, 0.56); }

/* busy state */
.btn.is-busy { pointer-events: none; color: transparent; position: relative; }
.btn.is-busy::after {
  content: "";
  position: absolute;
  width: 18px; height: 18px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #fff;
  animation: spin 0.7s linear infinite;
}
.btn-secondary.is-busy::after, .btn-ghost.is-busy::after {
  border-color: rgba(40, 88, 214, 0.25);
  border-top-color: var(--cobalt);
}
@keyframes spin { to { transform: rotate(1turn); } }
@media (prefers-reduced-motion: reduce) {
  .btn.is-busy::after { animation-duration: 1.6s; }
}

/* --------------------------------------------------------------- badge --- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: var(--r-pill);
  font-size: var(--text-micro);
  font-weight: 650;
  border: 1px solid var(--border);
  background: var(--bg-raise);
  color: var(--ink-soft);
  white-space: nowrap;
}
.badge .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-faint); }
.badge-ok { background: var(--ok-wash); border-color: #BEE3D2; color: var(--ok); }
.badge-ok .dot { background: var(--ok); }
.badge-warn { background: var(--warn-wash); border-color: #EBD5AC; color: var(--warn); }
.badge-warn .dot { background: var(--warn); }
.badge-bad { background: var(--bad-wash); border-color: #F0C4CC; color: var(--bad); }
.badge-bad .dot { background: var(--bad); }
.badge-brand { background: var(--cobalt-wash); border-color: var(--border-strong); color: var(--cobalt-deep); }
.badge-brand .dot { background: var(--cobalt); }

/* ----------------------------------------------------------------- kbd --- */
.kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  padding: 3px 8px;
  border-radius: 7px;
  border: 1px solid var(--border-strong);
  border-bottom-width: 2.5px;
  background: linear-gradient(180deg, #FFFFFF, #F2F5FB);
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  font-weight: 600;
  color: var(--ink);
}
.on-night .kbd {
  background: linear-gradient(180deg, #1B3059, #14264A);
  border-color: rgba(202, 218, 248, 0.28);
  color: var(--night-ink);
}

/* ---------------------------------------------------------------- card --- */
.card {
  background: var(--bg-raise);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  padding: var(--s-6);
}
.card-raise { box-shadow: var(--e-2); border-color: rgba(221, 227, 239, 0.9); }
.card-interactive { transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-med) var(--ease), transform var(--t-med) var(--ease); }
.card-interactive:hover { border-color: var(--border-strong); box-shadow: var(--e-2); transform: translateY(-2px); text-decoration: none; }
a.card, a.card:hover { text-decoration: none; color: inherit; }
.card-inset { background: var(--bg-inset); border: 0; }

/* ---------------------------------------------------------------- stat --- */
.stat { display: grid; gap: 2px; }
.stat .value {
  font-size: 2rem;
  font-weight: 640;
  letter-spacing: -0.02em;
  color: var(--ink-strong);
  font-variant-numeric: tabular-nums;
}
.stat .label { font-size: var(--text-small); color: var(--ink-soft); }

/* -------------------------------------------------------------- fields --- */
.field { display: grid; gap: 7px; }
.field > label { font-weight: 620; font-size: var(--text-small); color: var(--ink-strong); }
.field .help { font-size: var(--text-small); color: var(--ink-soft); }
.field .error-text {
  display: flex; gap: 7px; align-items: flex-start;
  font-size: var(--text-small); font-weight: 550; color: var(--bad);
}
.field .error-text::before { content: "!"; flex: none; width: 16px; height: 16px; border-radius: 50%; background: var(--bad); color: #fff; font-size: 11px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; margin-top: 2px; }
.input, select.input, textarea.input {
  min-height: 40px;
  padding: 10px 14px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-ctl);
  background: var(--bg-raise);
  color: var(--ink-strong);
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
  width: 100%;
}
.input::placeholder { color: var(--ink-faint); }
.input:hover { border-color: #AEBBD6; }
.input:focus-visible { border-color: var(--cobalt-bright); box-shadow: 0 0 0 3px var(--selection); border-radius: var(--r-ctl); }
.field.is-invalid .input { border-color: var(--bad); }
.field.is-invalid .input:focus-visible { box-shadow: 0 0 0 3px rgba(200, 62, 82, 0.18); }
.input[disabled] { background: var(--bg-inset); color: var(--ink-faint); cursor: not-allowed; }
textarea.input { min-height: 120px; resize: vertical; line-height: 1.55; }

.checkbox { display: flex; gap: 10px; align-items: center; min-height: 40px; min-width: 40px; cursor: pointer; }
.checkbox input {
  appearance: none;
  width: 20px; height: 20px; flex: none;
  border: 1.5px solid var(--border-strong);
  border-radius: 6px;
  background: var(--bg-raise);
  display: inline-grid; place-content: center;
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
  cursor: pointer;
  margin-top: 2px;
}
.checkbox input:checked { background: var(--cobalt); border-color: var(--cobalt); }
.checkbox input:checked::before {
  content: "";
  width: 10px; height: 8px;
  clip-path: polygon(14% 44%, 0 62%, 40% 100%, 100% 16%, 84% 0, 39% 66%);
  background: #fff;
}

/* ------------------------------------------------------ tabs & segments --- */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); overflow-x: auto; scrollbar-width: none; }
.tab {
  min-height: 40px;
  padding: 10px 16px;
  border: 0; background: none;
  font-weight: 600; color: var(--ink-soft);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  cursor: pointer;
  white-space: nowrap;
  border-radius: 10px 10px 0 0;
}
.tab:hover { color: var(--ink-strong); background: var(--bg-hover); }
.tab[aria-selected="true"], .tab.is-active { color: var(--cobalt-deep); border-bottom-color: var(--cobalt); }

.segmented {
  display: inline-flex;
  padding: 4px;
  gap: 2px;
  background: var(--bg-inset);
  border-radius: 14px;
}
.segmented .seg {
  min-height: 40px;
  padding: 0 16px;
  border: 0; border-radius: 10px;
  background: transparent;
  font-weight: 620; font-size: var(--text-small);
  color: var(--ink-soft);
  cursor: pointer;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.segmented .seg[aria-pressed="true"], .segmented .seg[aria-selected="true"] {
  background: var(--bg-raise);
  color: var(--ink-strong);
  box-shadow: var(--e-1);
}

/* -------------------------------------------------------- product window --- */
.window {
  background: var(--bg-raise);
  border: 1px solid rgba(221, 227, 239, 0.95);
  border-radius: 18px;
  box-shadow: var(--e-3);
  overflow: hidden;
}
.window-chrome {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  min-height: 42px;
  padding: 0 14px;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, #FDFDFF, #F6F8FC);
  font-size: var(--text-micro);
  font-weight: 650;
  color: var(--ink-soft);
}
.window-chrome .dots { display: flex; gap: 6px; }
.window-chrome .dots i { width: 10px; height: 10px; border-radius: 50%; background: #D9DFEC; }
.window-chrome .title { text-align: center; }
.window-chrome .end { display: flex; justify-content: flex-end; gap: 6px; }
.window-body { padding: 0; }

/* neutral abstract workspace UI inside windows */
.mock-ui { display: grid; grid-template-columns: 172px 1fr; min-height: 300px; font-size: var(--text-small); }
.mock-rail { border-right: 1px solid var(--border); background: var(--bg-page); padding: 14px 10px; display: grid; gap: 4px; align-content: start; }
.mock-rail .mock-item { height: 30px; border-radius: 8px; display: flex; align-items: center; padding: 0 10px; color: var(--ink-soft); gap: 8px; }
.mock-rail .mock-item i { width: 14px; height: 14px; border-radius: 4px; background: var(--sky-2); flex: none; }
.mock-rail .mock-item.is-active { background: var(--cobalt-wash); color: var(--cobalt-deep); font-weight: 650; }
.mock-main { padding: 18px; display: grid; gap: 12px; align-content: start; }
.mock-line { height: 10px; border-radius: 5px; background: var(--bg-inset); }
.mock-line.w40 { width: 40%; } .mock-line.w60 { width: 60%; } .mock-line.w80 { width: 80%; }
.mock-chip-row { display: flex; gap: 8px; flex-wrap: wrap; }
.mock-panel { border: 1px solid var(--border); border-radius: 12px; padding: 14px; display: grid; gap: 10px; background: var(--bg-raise); }

/* --------------------------------------------------------------- table --- */
.table-wrap { border: 1px solid var(--border); border-radius: var(--r-card); background: var(--bg-raise); overflow: hidden; }
.table-scroll { overflow-x: auto; }
table.table { width: 100%; border-collapse: collapse; font-size: var(--text-small); }
.table th {
  text-align: left;
  font-size: var(--text-micro);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  font-weight: 700;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-page);
  white-space: nowrap;
}
.table td { padding: 13px 16px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover { background: #FAFBFE; }
.table .num { text-align: right; font-variant-numeric: tabular-nums; }

/* comparison table — mobile stacks into labeled rows */
@media (max-width: 700px) {
  .table-stack table, .table-stack thead, .table-stack tbody,
  .table-stack th, .table-stack td, .table-stack tr { display: block; }
  .table-stack thead { position: absolute; clip: rect(0 0 0 0); }
  .table-stack tr { border-bottom: 8px solid var(--bg-page); padding: 6px 0; }
  .table-stack td {
    display: flex; justify-content: space-between; gap: 16px;
    border-bottom: 0; padding: 9px 16px;
  }
  .table-stack td::before {
    content: attr(data-label);
    font-weight: 650;
    color: var(--ink-soft);
    font-size: var(--text-micro);
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }
}

/* ----------------------------------------------------------- accordion --- */
.accordion { display: grid; gap: 10px; }
.accordion details {
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--bg-raise);
  overflow: hidden;
}
.accordion summary {
  list-style: none;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 18px 22px;
  font-weight: 620;
  color: var(--ink-strong);
  cursor: pointer;
}
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary::after {
  content: "";
  flex: none;
  width: 10px; height: 10px;
  border-right: 2px solid var(--ink-soft);
  border-bottom: 2px solid var(--ink-soft);
  transform: rotate(45deg);
  transition: transform var(--t-med) var(--ease);
  margin-right: 4px;
}
.accordion details[open] summary::after { transform: rotate(225deg); }
.accordion .accordion-body { padding: 0 22px 20px; color: var(--ink-soft); max-width: 65ch; }

/* --------------------------------------------------------------- alert --- */
.alert {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--bg-inset);
  font-size: var(--text-small);
}
.alert .icon { flex: none; width: 20px; height: 20px; border-radius: 50%; display: grid; place-content: center; color: #fff; font-size: 12px; font-weight: 800; background: var(--ink-soft); }
.alert strong { display: block; color: var(--ink-strong); }
.alert-ok { background: var(--ok-wash); border-color: #BEE3D2; }
.alert-ok .icon { background: var(--ok); }
.alert-warn { background: var(--warn-wash); border-color: #EBD5AC; }
.alert-warn .icon { background: var(--warn); }
.alert-bad { background: var(--bad-wash); border-color: #F0C4CC; }
.alert-bad .icon { background: var(--bad); }

/* ------------------------------------------------------------- skeleton --- */
.skeleton {
  border-radius: 8px;
  background: linear-gradient(90deg, var(--bg-inset) 25%, #F5F7FC 45%, var(--bg-inset) 65%);
  background-size: 240% 100%;
  animation: shimmer 1.4s var(--ease) infinite;
  color: transparent !important;
  min-height: 12px;
}
@keyframes shimmer { from { background-position: 130% 0; } to { background-position: -110% 0; } }
@media (prefers-reduced-motion: reduce) {
  .skeleton { animation: none; background: var(--bg-inset); }
}

/* ------------------------------------------------------------ empty state - */
.empty-state {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 10px;
  padding: var(--s-8) var(--s-6);
}
.empty-state .glyph {
  width: 52px; height: 52px;
  border-radius: 16px;
  background: var(--bg-inset);
  display: grid; place-content: center;
  color: var(--ink-faint);
  font-size: 22px;
  font-weight: 300;
}
.empty-state h3 { font-size: var(--text-h4); }
.empty-state p { color: var(--ink-soft); font-size: var(--text-small); max-width: 40ch; }

/* --------------------------------------------------------------- dialog --- */
dialog.dialog {
  border: 0;
  border-radius: var(--r-card);
  box-shadow: var(--e-3);
  padding: var(--s-6);
  width: min(440px, calc(100vw - 48px));
  background: var(--bg-raise);
  color: var(--ink);
}
dialog.dialog::backdrop { background: rgba(13, 23, 44, 0.4); backdrop-filter: blur(4px); }
.dialog h2 { font-size: var(--text-h3); margin-bottom: var(--s-3); }
.dialog .dialog-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: var(--s-6); }

/* ---------------------------------------------------------------- toast --- */
.toast-region { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: var(--z-toast); display: grid; gap: 8px; }
.toast {
  display: flex; align-items: center; gap: 10px;
  background: var(--night);
  color: var(--night-ink);
  border-radius: 14px;
  padding: 12px 18px;
  box-shadow: var(--e-3);
  font-size: var(--text-small);
  font-weight: 550;
  animation: toast-in var(--t-med) var(--ease);
}
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) { .toast { animation: none; } }

/* ============================================================ NAVIGATION == */
/* Approved pill navigation: a centered floating shell that sits transparent
   over the scenic hero and resolves into a frosted pill after 18px of
   scroll; interior public routes show the pill from first paint. The mobile
   menu expands as a rounded panel inside the same shell. */
.site-nav {
  position: fixed;
  inset: 0 0 auto;
  z-index: var(--z-nav);
  padding: 8px 8px 0;
  pointer-events: none;
}
@media (min-width: 768px) {
  .site-nav { padding: 12px 16px 0; }
}
.nav-shell {
  pointer-events: auto;
  position: relative;
  margin-inline: auto;
  width: 100%;
  max-width: 1010px;
  border-radius: 16px;
  border: 1px solid transparent;
  transition: background var(--t-med) var(--ease), border-color var(--t-med) var(--ease),
              box-shadow var(--t-med) var(--ease), backdrop-filter var(--t-med) var(--ease);
}
.nav-row {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 52px;
  padding: 0 10px;
}
@media (min-width: 768px) {
  .nav-row { padding: 0 12px; gap: 12px; }
}

.brand {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 40px;
  padding: 0 4px;
  border-radius: 10px;
  font-weight: 700; font-size: 0.97rem; letter-spacing: -0.02em;
  color: var(--ink-strong);
  text-decoration: none;
  flex: none;
}
.brand:hover { text-decoration: none; opacity: 0.85; }
.brand img { width: 26px; height: 26px; }

.nav-links { display: none; margin-inline: auto; gap: 2px; }
@media (min-width: 1024px) { .nav-links { display: flex; } }
.nav-links a {
  display: inline-flex; align-items: center;
  min-height: 38px;
  padding: 0 12px;
  border-radius: 10px;
  color: var(--ink-soft);
  font-weight: 570;
  font-size: var(--text-small);
}
.nav-links a:hover { background: var(--bg-inset); color: var(--ink-strong); text-decoration: none; }
.nav-links a[aria-current="page"] { background: var(--bg-inset); color: var(--ink-strong); font-weight: 660; }

.nav-actions { display: flex; align-items: center; gap: 6px; margin-left: auto; flex: none; }
.nav-link-plain {
  display: none;
  align-items: center;
  min-height: 38px;
  padding: 0 11px;
  border-radius: 10px;
  color: var(--ink-soft);
  font-weight: 620;
  font-size: var(--text-small);
}
@media (min-width: 640px) { .nav-link-plain { display: inline-flex; } }
.nav-link-plain:hover { background: var(--bg-inset); color: var(--ink-strong); text-decoration: none; }

/* dark app-like primary CTA (identity element of the approved header) */
.btn-night {
  background: linear-gradient(180deg, #27272A, #050505);
  color: #fff;
  border: 0;
  box-shadow: 0 10px 24px -10px rgba(9, 12, 20, 0.55);
  transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.btn-night:hover { transform: translateY(-1px); box-shadow: 0 14px 28px -10px rgba(9, 12, 20, 0.6); }
.nav-cta .nav-cta-ic { width: 16px; height: 16px; }
.nav-cta-short { display: inline; }
.nav-cta-long { display: none; }
@media (min-width: 640px) {
  .nav-cta-short { display: none; }
  .nav-cta-long { display: inline; }
}

.nav-burger {
  display: grid;
  place-content: center;
  gap: 4.5px;
  width: 40px; height: 40px;
  border: 0; background: none; cursor: pointer;
  border-radius: 12px;
  color: var(--ink-strong);
  flex: none;
}
.nav-burger:hover { background: var(--bg-inset); }
.nav-burger i { width: 19px; height: 2px; background: currentColor; border-radius: 2px; transition: transform var(--t-med) var(--ease), opacity var(--t-fast); }
@media (min-width: 1024px) { .nav-burger { display: none; } }
.site-nav.is-open .nav-burger i:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.site-nav.is-open .nav-burger i:nth-child(2) { opacity: 0; }
.site-nav.is-open .nav-burger i:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* the expanding in-shell menu panel */
.nav-panel { border-top: 1px solid var(--border); padding: 10px 12px 12px; }
.nav-panel-links { display: grid; gap: 2px; }
.nav-panel-links a, .nav-panel-link {
  display: flex; align-items: center;
  min-height: 40px;
  padding: 0 14px;
  border-radius: 12px;
  color: var(--ink-soft);
  font-weight: 620;
  font-size: var(--text-small);
}
.nav-panel-links a:hover, .nav-panel-link:hover { background: var(--bg-inset); color: var(--ink-strong); text-decoration: none; }
.nav-panel-links a[aria-current="page"] { background: var(--bg-inset); color: var(--ink-strong); }
.nav-panel-session { border-top: 1px solid var(--border); margin-top: 8px; padding-top: 8px; display: grid; gap: 2px; }
@media (min-width: 1024px) { .nav-panel { display: none !important; } }

/* ---- material states ---------------------------------------------------- */
/* frosted pill: interior routes from first paint; homepage after scroll or
   whenever the menu is open */
.site-nav.nav-solid .nav-shell,
.site-nav.is-scrolled .nav-shell,
.site-nav.is-open .nav-shell {
  background: rgba(255, 255, 255, 0.82);
  border-color: rgba(15, 23, 42, 0.08);
  backdrop-filter: blur(24px) saturate(1.5);
  box-shadow: 0 18px 50px -30px rgba(24, 43, 86, 0.45);
}
/* the expanded menu needs calmer glass over bright scenery */
.site-nav.is-open .nav-shell { background: rgba(255, 255, 255, 0.92); }
/* transparent overlay state on the scenic homepage top */
.site-nav.nav-scene:not(.is-scrolled):not(.is-open) .brand,
.site-nav.nav-scene:not(.is-scrolled):not(.is-open) .nav-burger { color: #fff; }
.site-nav.nav-scene:not(.is-scrolled):not(.is-open) .nav-links a,
.site-nav.nav-scene:not(.is-scrolled):not(.is-open) .nav-link-plain { color: rgba(255, 255, 255, 0.85); }
.site-nav.nav-scene:not(.is-scrolled):not(.is-open) :is(.nav-links a, .nav-link-plain, .nav-burger):hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}
.site-nav.nav-scene:not(.is-scrolled):not(.is-open) .nav-links a[aria-current="page"] {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
}

/* =============================================================== FOOTER === */
.site-footer {
  border-top: 1px solid var(--border);
  background: var(--bg-raise);
  margin-top: var(--section-y);
}
.footer-horizon { height: 4px; background: linear-gradient(90deg, var(--sky-2), var(--bay), var(--sky-2)); opacity: 0.5; }
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: var(--s-7);
  padding-block: var(--s-8) var(--s-7);
}
.footer-brand p { color: var(--ink-soft); font-size: var(--text-small); margin-top: var(--s-3); max-width: 30ch; }
.footer-col h4 { font-size: var(--text-micro); text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-soft); margin-bottom: var(--s-4); }
.footer-col ul { list-style: none; padding: 0; display: grid; gap: 9px; }
.footer-col a { color: var(--ink); font-size: var(--text-small); }
.footer-meta {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--s-4);
  padding-block: var(--s-5);
  border-top: 1px solid var(--border);
  color: var(--ink-faint);
  font-size: var(--text-micro);
}
@media (max-width: 880px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 540px) {
  .footer-grid { grid-template-columns: 1fr; gap: var(--s-6); }
}
.footer-compact {
  border-top: 1px solid var(--border);
  padding-block: var(--s-5);
  font-size: var(--text-micro);
  color: var(--ink-faint);
  display: flex; flex-wrap: wrap; gap: var(--s-4); justify-content: space-between;
}

/* ========================================================== APP SHELLS ==== */
.app-shell { display: grid; grid-template-columns: 232px 1fr; min-height: 100vh; }
.app-shell > * { min-width: 0; } /* grid items must shrink so rail scrollers contain */
.app-rail {
  border-right: 1px solid var(--border);
  background: var(--bg-raise);
  padding: 16px 12px;
  display: flex; flex-direction: column; gap: 4px;
  position: sticky; top: 0; height: 100vh;
}
.app-rail .brand { padding: 8px 10px 18px; }
.rail-nav { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.app-rail a.rail-item, .rail-item {
  display: flex; align-items: center; gap: 11px;
  min-height: 40px;
  padding: 0 12px;
  border-radius: 11px;
  color: var(--ink);
  font-weight: 570;
  font-size: var(--text-small);
}
.rail-item:hover { background: var(--bg-hover); text-decoration: none; }
.rail-item[aria-current="page"] { background: var(--cobalt-wash); color: var(--cobalt-deep); font-weight: 680; }
.rail-item .ic { width: 18px; height: 18px; flex: none; }
.rail-foot { margin-top: auto; display: grid; gap: 4px; }
.app-main { padding: var(--s-7) var(--s-7) var(--s-9); min-width: 0; }
.app-main > .app-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-4); margin-bottom: var(--s-6); }
.app-head h1 { font-size: var(--text-h2); }

/* mobile app nav: fixed brand, independent destination scroller after it —
   the brand and rail items can never collide */
@media (max-width: 880px) {
  .app-shell { grid-template-columns: 1fr; }
  .app-rail {
    position: sticky; top: 0; height: auto; z-index: var(--z-nav);
    flex-direction: row; align-items: center; gap: 8px;
    padding: 8px 12px;
    border-right: 0; border-bottom: 1px solid var(--border);
  }
  .app-rail .brand { padding: 0 6px 0 0; flex: none; }
  .rail-nav {
    flex-direction: row; flex: 1; min-width: 0;
    overflow-x: auto; scrollbar-width: none;
    gap: 2px;
  }
  .rail-item { white-space: nowrap; min-height: 40px; flex: none; }
  .rail-foot { margin: 0; display: flex; flex: none; }
  .rail-foot .rail-item span, .rail-foot .rail-item { font-size: var(--text-micro); }
  .app-main { padding: var(--s-5) var(--s-4) var(--s-8); }
}

/* dense operational table toolbar */
.toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: var(--s-4); }
.toolbar .grow { flex: 1; min-width: 220px; max-width: 320px; }
.toolbar .input { min-height: 40px; }
@media (max-width: 640px) {
  /* the search field owns a full-width first row; controls wrap below */
  .toolbar .grow { flex: 1 1 100%; max-width: none; order: -1; }
}

/* KPI row */
.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-4); margin-bottom: var(--s-6); }
.kpis .card { padding: var(--s-5); }
@media (max-width: 1080px) { .kpis { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .kpis { grid-template-columns: 1fr 1fr; gap: var(--s-3); } }

/* review drawer (admin) */
.drawer-layout { display: grid; grid-template-columns: 1fr 380px; gap: var(--s-6); align-items: start; }
@media (max-width: 1080px) { .drawer-layout { grid-template-columns: 1fr; } }

/* ============================================================ DESIGN LAB == */
.design-lab {
  position: fixed;
  left: 16px; bottom: 16px;
  z-index: var(--z-lab);
  font-size: var(--text-micro);
}
.design-lab summary {
  list-style: none;
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 40px; padding: 0 16px;
  border-radius: var(--r-pill);
  background: var(--night);
  color: var(--night-ink);
  font-weight: 650;
  cursor: pointer;
  box-shadow: var(--e-2);
}
.design-lab summary::-webkit-details-marker { display: none; }
.design-lab summary .dot { width: 8px; height: 8px; border-radius: 50%; background: #62F0C5; }
.design-lab .lab-panel {
  position: absolute; bottom: 48px; left: 0;
  width: 280px;
  background: var(--bg-raise);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--e-3);
  padding: 14px;
  display: grid; gap: 12px;
}
.design-lab .lab-row { display: grid; gap: 5px; }
.design-lab label { font-weight: 700; color: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.05em; font-size: 10.5px; }
.design-lab select, .design-lab a.btn { width: 100%; }
.design-lab select { min-height: 44px; border-radius: 9px; border: 1px solid var(--border-strong); padding: 0 8px; background: var(--bg-raise); }

/* ======================================================== STATE VIEWS ===== */
/* Non-active views are removed even when the element carries an inline
   display (needed for buttons/segments that must keep flex when active). */
[data-state-view]:not(.is-active) { display: none !important; }
[data-state-view].is-active:not([style*="display"]) { display: block; }
.state-note { margin-bottom: var(--s-5); }

/* ===================================================== SCENIC ACCENTS ===== */
.scene-band {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-stage);
  color: #fff;
}
.scene-band .scene-art {
  position: absolute; inset: 0;
  background-size: cover;
  z-index: 0;
}
.scene-band > .scene-content { position: relative; z-index: 1; }

.horizon-rule {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--sky-3), transparent);
  border: 0;
  margin: 0;
}

/* --- touch-width floors: recalibrated desktop density never shrinks touch
       targets below 44px where fingers are the pointer ------------------- */
@media (max-width: 640px) {
  /* !important is deliberate: this is a floor, and component variants use
     compound selectors (.app-rail a.rail-item, …) that would outrank it */
  .btn, .btn.sm, .nav-burger, .nav-links a, .nav-link-plain,
  .input, .seg, .tab, .rail-item, .checkbox, .accordion summary,
  .toolbar .input, .letter-jump a, .filter-rail button { min-height: 44px !important; }
  .nav-burger { width: 44px; height: 44px; }
  .btn.sm { min-width: 44px; }
  .checkbox { min-width: 44px; }
  .seg, .tab, .letter-jump a, .filter-rail button { min-width: 44px !important; justify-content: center; }
}