/* Beach Intelligence demo: self-contained design system for the sample back office.
   Same palette triplets and three-state theme as the main site, so the demo
   follows the visitor's choice on beachintelligence.co. Dark by default; light
   via the system preference or data-theme on <html>. */

@font-face{ font-family:'Manrope'; font-style:normal; font-weight:400 800; font-display:swap; src:url('/assets/fonts/manrope-latin.woff2?v=20260902a') format('woff2'); }
@font-face{ font-family:'JetBrains Mono'; font-style:normal; font-weight:400 500; font-display:swap; src:url('/assets/fonts/jetbrainsmono-latin.woff2?v=20260902a') format('woff2'); }

:root{
  --bg-rgb:3,16,20; --panel-rgb:12,45,63; --surface-rgb:8,26,32; --fg-rgb:238,244,244;
  --aqua-rgb:65,208,196; --gold-rgb:242,179,60; --red-rgb:226,96,84; --shadow-rgb:0,0,0; --on-accent-rgb:3,37,31;
  color-scheme:dark;
  --bg:rgb(var(--bg-rgb)); --surface:rgb(var(--surface-rgb)); --panel:rgb(var(--panel-rgb));
  --fg:rgb(var(--fg-rgb)); --fg-dim:rgba(var(--fg-rgb),.78); --fg-faint:rgba(var(--fg-rgb),.56);
  --line:rgba(var(--fg-rgb),.12); --line-soft:rgba(var(--fg-rgb),.07);
  --aqua:rgb(var(--aqua-rgb)); --gold:rgb(var(--gold-rgb)); --red:rgb(var(--red-rgb));
  --sans:"Manrope",system-ui,sans-serif; --mono:"JetBrains Mono",ui-monospace,monospace;
  --r:10px; --r-sm:7px; --side:248px; --ease:cubic-bezier(.2,.7,.2,1);
  --shadow:0 12px 32px -18px rgba(var(--shadow-rgb),.7);
}
@media (prefers-color-scheme:light){
  :root:not([data-theme="dark"]){
    --bg-rgb:238,244,244; --panel-rgb:255,255,255; --surface-rgb:255,255,255; --fg-rgb:8,31,42;
    --aqua-rgb:7,102,94; --gold-rgb:137,93,19; --red-rgb:178,56,44; --shadow-rgb:8,31,42; --on-accent-rgb:255,255,255;
    color-scheme:light; --shadow:0 10px 28px -20px rgba(var(--shadow-rgb),.35);
    --fg-dim:rgba(var(--fg-rgb),.86); --fg-faint:rgba(var(--fg-rgb),.72);
  }
}
:root[data-theme="light"]{
  --bg-rgb:238,244,244; --panel-rgb:255,255,255; --surface-rgb:255,255,255; --fg-rgb:8,31,42;
  --aqua-rgb:7,102,94; --gold-rgb:137,93,19; --red-rgb:178,56,44; --shadow-rgb:8,31,42; --on-accent-rgb:255,255,255;
  color-scheme:light; --shadow:0 10px 28px -20px rgba(var(--shadow-rgb),.35);
  --fg-dim:rgba(var(--fg-rgb),.86); --fg-faint:rgba(var(--fg-rgb),.72);
}

/* ── Base ─────────────────────────────────────────────────────────────── */
*,*::before,*::after{ box-sizing:border-box; }
html,body{ height:100%; }
body{ margin:0; background:var(--bg); color:var(--fg); font:15px/1.55 var(--sans); -webkit-font-smoothing:antialiased; }
h1,h2,h3,h4{ margin:0; font-weight:600; letter-spacing:-.015em; line-height:1.2; }
p{ margin:0; }
a{ color:var(--aqua); text-decoration:none; } a:hover{ text-decoration:underline; }
button,input,select,textarea{ font:inherit; color:inherit; }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.skip{ position:absolute; left:-9999px; top:8px; background:var(--panel); color:var(--fg); padding:.6em 1em; border-radius:var(--r-sm); z-index:200; }
.skip:focus{ left:12px; }
.muted{ color:var(--fg-faint); } .mono{ font-family:var(--mono); font-size:.92em; } .right{ text-align:right; } .nowrap{ white-space:nowrap; }
[hidden]{ display:none !important; }

/* ── Banner ───────────────────────────────────────────────────────────── */
.demo-banner{ display:flex; align-items:center; gap:14px; padding:9px 18px; font-size:.86rem; color:var(--fg-dim);
  background:rgba(var(--gold-rgb),.1); border-bottom:1px solid rgba(var(--gold-rgb),.25); }
.demo-banner__tag{ font-family:var(--mono); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); border:1px solid rgba(var(--gold-rgb),.5); border-radius:999px; padding:2px 9px; flex:none; }
.demo-banner__link{ margin-left:auto; white-space:nowrap; }

/* ── Shell ────────────────────────────────────────────────────────────── */
.shell{ display:grid; grid-template-columns:var(--side) minmax(0,1fr); min-height:calc(100vh - 41px); }
.side{ position:sticky; top:0; align-self:start; height:100vh; display:flex; flex-direction:column; padding:20px 16px; border-right:1px solid var(--line); background:rgba(var(--surface-rgb),.6); }
.side__brand{ display:flex; align-items:center; gap:12px; padding:6px 8px 20px; }
.side__brand strong{ display:block; font-size:.95rem; line-height:1.2; }
.side__brand small{ color:var(--fg-faint); font-size:.78rem; }
.side__mark{ display:grid; place-items:center; width:38px; height:38px; flex:none; border-radius:9px; font-family:var(--mono); font-weight:500; font-size:.9rem;
  color:rgb(var(--on-accent-rgb)); background:linear-gradient(135deg,var(--aqua),rgba(var(--aqua-rgb),.65)); }
.side__nav{ display:flex; flex-direction:column; gap:2px; }
.side__nav a{ display:flex; align-items:center; gap:11px; padding:9px 11px; border-radius:var(--r-sm); color:var(--fg-dim); font-weight:500; font-size:.92rem; transition:background .18s,color .18s; }
.side__nav a:hover{ background:rgba(var(--fg-rgb),.06); color:var(--fg); text-decoration:none; }
.side__nav a[aria-current="page"]{ background:rgba(var(--aqua-rgb),.14); color:var(--fg); }
.side__ico{ width:18px; text-align:center; opacity:.7; font-size:.95rem; }
.side__count{ margin-left:auto; font-family:var(--mono); font-size:.7rem; padding:1px 7px; border-radius:999px; background:rgba(var(--aqua-rgb),.2); color:var(--aqua); }
.side__count--warn{ background:rgba(var(--gold-rgb),.2); color:var(--gold); }
.side__foot{ margin-top:auto; padding:14px 8px 0; display:grid; gap:12px; }
.side__built{ font-size:.76rem; color:var(--fg-faint); }
.main{ display:flex; flex-direction:column; min-width:0; }
.top{ position:sticky; top:0; z-index:20; display:flex; align-items:center; gap:14px; padding:14px 28px; border-bottom:1px solid var(--line); background:rgba(var(--bg-rgb),.85); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); }
.top__title{ font-size:1.25rem; }
.top__right{ margin-left:auto; display:flex; align-items:center; gap:14px; }
.top__clock{ font-family:var(--mono); font-size:.78rem; color:var(--fg-faint); }
.top__menu{ display:none; flex-direction:column; justify-content:center; gap:5px; width:40px; height:40px; padding:8px; background:none; border:0; cursor:pointer; }
.top__menu span{ display:block; height:2px; background:var(--fg); border-radius:2px; }
.view{ padding:26px 28px 60px; display:grid; gap:22px; align-content:start; }

/* ── Theme switch (same as the site) ─────────────────────────────────── */
.theme-switch{ display:inline-flex; gap:2px; padding:3px; border:1px solid var(--line); border-radius:999px; background:rgba(var(--panel-rgb),.4); }
.theme-opt{ display:grid; place-items:center; width:30px; height:30px; padding:0; border:0; border-radius:999px; background:none; color:var(--fg-faint); cursor:pointer; }
.theme-opt svg{ width:14px; height:14px; }
.theme-opt:hover{ color:var(--fg); } .theme-opt[aria-pressed="true"]{ background:rgba(var(--fg-rgb),.1); color:var(--aqua); }

/* ── Grid and cards ──────────────────────────────────────────────────── */
.grid{ display:grid; gap:18px; }
.grid--2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.grid--3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.grid--4{ grid-template-columns:repeat(4,minmax(0,1fr)); }
.grid--main{ grid-template-columns:minmax(0,1.6fr) minmax(0,1fr); }
.card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow); display:flex; flex-direction:column; min-width:0; }
.card__head{ display:flex; align-items:center; gap:12px; padding:14px 18px; border-bottom:1px solid var(--line-soft); }
.card__title{ font-size:.95rem; font-weight:600; }
.card__head .spacer{ margin-left:auto; }
.card__body{ padding:16px 18px; }
.card__body--flush{ padding:0; }
.card__foot{ padding:12px 18px; border-top:1px solid var(--line-soft); display:flex; gap:10px; align-items:center; }

/* ── Stats ───────────────────────────────────────────────────────────── */
.stat{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:16px 18px; display:grid; gap:4px; }
.stat__label{ font-size:.78rem; color:var(--fg-faint); text-transform:uppercase; letter-spacing:.08em; font-family:var(--mono); }
.stat__value{ font-size:1.75rem; font-weight:600; letter-spacing:-.02em; line-height:1.1; }
.stat__delta{ font-size:.8rem; color:var(--fg-dim); }
.stat--accent .stat__value{ color:var(--aqua); } .stat--warn .stat__value{ color:var(--gold); } .stat--bad .stat__value{ color:var(--red); }

/* ── Tables and lists ────────────────────────────────────────────────── */
.table-wrap{ overflow-x:auto; }
.table{ width:100%; border-collapse:collapse; font-size:.9rem; }
.table th{ text-align:left; font-weight:500; font-size:.74rem; letter-spacing:.08em; text-transform:uppercase; color:var(--fg-faint); padding:10px 18px; border-bottom:1px solid var(--line); font-family:var(--mono); }
.table td{ padding:12px 18px; border-bottom:1px solid var(--line-soft); vertical-align:middle; }
.table tr:last-child td{ border-bottom:0; }
.table tr[data-href]{ cursor:pointer; } .table tr[data-href]:hover td{ background:rgba(var(--fg-rgb),.035); }
.table td.right,.table th.right{ text-align:right; }
.list{ list-style:none; margin:0; padding:0; display:grid; }
.list__item{ display:flex; gap:12px; align-items:flex-start; padding:11px 0; border-bottom:1px solid var(--line-soft); }
.list__item:last-child{ border-bottom:0; }
.list__meta{ font-size:.78rem; color:var(--fg-faint); white-space:nowrap; font-family:var(--mono); }
.list__body{ min-width:0; flex:1; }
.avatar{ width:34px; height:34px; flex:none; border-radius:50%; display:grid; place-items:center; font-size:.78rem; font-weight:600; background:rgba(var(--aqua-rgb),.16); color:var(--aqua); }

/* ── Badges ──────────────────────────────────────────────────────────── */
.badge{ display:inline-block; font-family:var(--mono); font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; padding:3px 8px; border-radius:999px; border:1px solid transparent; white-space:nowrap; }
.badge--new,.badge--sent,.badge--pending{ background:rgba(var(--aqua-rgb),.12); color:var(--aqua); border-color:rgba(var(--aqua-rgb),.3); }
.badge--contacted,.badge--en-route{ background:rgba(var(--fg-rgb),.08); color:var(--fg-dim); border-color:var(--line); }
.badge--quoted,.badge--draft{ background:rgba(var(--gold-rgb),.12); color:var(--gold); border-color:rgba(var(--gold-rgb),.35); }
.badge--won,.badge--paid,.badge--confirmed,.badge--done{ background:rgba(var(--aqua-rgb),.2); color:var(--aqua); border-color:rgba(var(--aqua-rgb),.45); }
.badge--lost,.badge--overdue,.badge--cancelled{ background:rgba(var(--red-rgb),.12); color:var(--red); border-color:rgba(var(--red-rgb),.35); }

/* ── Buttons ─────────────────────────────────────────────────────────── */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:.5em; padding:9px 15px; border-radius:var(--r-sm); border:1px solid var(--line); background:rgba(var(--fg-rgb),.05); color:var(--fg); font-weight:600; font-size:.88rem; cursor:pointer; transition:background .18s,border-color .18s,transform .12s; white-space:nowrap; }
.btn:hover{ background:rgba(var(--fg-rgb),.1); text-decoration:none; } .btn:active{ transform:translateY(1px); }
.btn--primary{ background:var(--aqua); border-color:var(--aqua); color:rgb(var(--on-accent-rgb)); } .btn--primary:hover{ background:rgba(var(--aqua-rgb),.85); }
.btn--ghost{ background:transparent; } .btn--danger{ color:var(--red); border-color:rgba(var(--red-rgb),.4); } .btn--danger:hover{ background:rgba(var(--red-rgb),.1); }
.btn--sm{ padding:6px 11px; font-size:.8rem; } .btn--icon{ padding:6px 9px; }
.btn:disabled{ opacity:.5; cursor:default; }
.btn-row{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; }

/* ── Forms ───────────────────────────────────────────────────────────── */
.form{ display:grid; gap:14px; }
.form--2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.field{ display:grid; gap:6px; min-width:0; }
.field label,.field > span{ font-size:.78rem; color:var(--fg-dim); font-weight:500; }
.field input,.field select,.field textarea{ width:100%; padding:9px 11px; border-radius:var(--r-sm); border:1px solid var(--line); background:rgba(var(--bg-rgb),.4); color:var(--fg); outline:none; transition:border-color .18s,box-shadow .18s; }
.field input:focus,.field select:focus,.field textarea:focus{ border-color:var(--aqua); box-shadow:0 0 0 3px rgba(var(--aqua-rgb),.18); }
.field textarea{ min-height:88px; resize:vertical; }
.field--span{ grid-column:1 / -1; }
.actions{ display:flex; gap:10px; justify-content:flex-end; align-items:center; padding-top:4px; }
.toggle{ display:inline-flex; align-items:center; gap:10px; cursor:pointer; font-size:.88rem; }
.toggle input{ appearance:none; width:38px; height:22px; border-radius:999px; background:rgba(var(--fg-rgb),.18); position:relative; transition:background .18s; margin:0; cursor:pointer; }
.toggle input::after{ content:""; position:absolute; top:3px; left:3px; width:16px; height:16px; border-radius:50%; background:#fff; transition:transform .18s var(--ease); }
.toggle input:checked{ background:var(--aqua); } .toggle input:checked::after{ transform:translateX(16px); }
.toolbar{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.search{ flex:1 1 220px; max-width:360px; } .search input{ width:100%; padding:9px 12px; border-radius:999px; border:1px solid var(--line); background:rgba(var(--bg-rgb),.4); color:var(--fg); outline:none; }
.search input:focus{ border-color:var(--aqua); }
.chips{ display:flex; gap:6px; flex-wrap:wrap; } .chip{ padding:5px 11px; border-radius:999px; border:1px solid var(--line); background:none; color:var(--fg-dim); font-size:.8rem; cursor:pointer; }
.chip[aria-pressed="true"]{ background:rgba(var(--aqua-rgb),.14); color:var(--aqua); border-color:rgba(var(--aqua-rgb),.4); }
.kv{ display:grid; grid-template-columns:max-content minmax(0,1fr); gap:8px 18px; margin:0; font-size:.9rem; }
.kv dt{ color:var(--fg-faint); } .kv dd{ margin:0; }

/* ── Pipeline (kanban) ───────────────────────────────────────────────── */
.pipeline{ display:grid; grid-template-columns:repeat(5,minmax(180px,1fr)); gap:14px; overflow-x:auto; padding-bottom:6px; }
.pipeline__col{ background:rgba(var(--surface-rgb),.7); border:1px solid var(--line); border-radius:var(--r); display:flex; flex-direction:column; min-height:280px; }
.pipeline__head{ display:flex; align-items:center; gap:8px; padding:11px 14px; border-bottom:1px solid var(--line-soft); font-size:.82rem; font-weight:600; }
.pipeline__head .side__count{ margin-left:auto; }
.pipeline__sum{ font-family:var(--mono); font-size:.72rem; color:var(--fg-faint); }
.pipeline__cards{ display:grid; gap:8px; padding:10px; align-content:start; }
.pipeline__card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-sm); padding:11px 12px; display:grid; gap:5px; cursor:pointer; transition:border-color .18s,transform .12s; }
.pipeline__card:hover{ border-color:rgba(var(--aqua-rgb),.5); transform:translateY(-1px); }
.pipeline__card strong{ font-size:.9rem; } .pipeline__card p{ font-size:.82rem; color:var(--fg-dim); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.pipeline__card .list__meta{ display:flex; justify-content:space-between; }

/* ── Calendar ────────────────────────────────────────────────────────── */
.cal__head{ display:flex; align-items:center; gap:10px; }
.cal__head h2{ font-size:1.05rem; margin-right:auto; }
.cal__grid{ display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; }
.cal__dow{ background:var(--surface); padding:8px 10px; font-family:var(--mono); font-size:.7rem; text-transform:uppercase; letter-spacing:.08em; color:var(--fg-faint); }
.cal__day{ background:var(--surface); min-height:104px; padding:8px; display:grid; gap:4px; align-content:start; cursor:pointer; transition:background .15s; }
.cal__day:hover{ background:rgba(var(--aqua-rgb),.06); }
.cal__day--other{ background:rgba(var(--fg-rgb),.025); } .cal__day--today .cal__num{ background:var(--aqua); color:rgb(var(--on-accent-rgb)); }
.cal__num{ width:24px; height:24px; display:grid; place-items:center; border-radius:50%; font-size:.78rem; font-family:var(--mono); }
.cal__evt{ font-size:.74rem; padding:3px 7px; border-radius:5px; background:rgba(var(--aqua-rgb),.14); color:var(--fg); border-left:2px solid var(--aqua); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cal__evt--pending{ background:rgba(var(--gold-rgb),.12); border-left-color:var(--gold); } .cal__evt--done{ border-left-style:dashed; }
.agenda{ display:grid; gap:0; }
.agenda__item{ display:grid; grid-template-columns:72px 3px minmax(0,1fr) auto; gap:14px; align-items:center; padding:12px 0; border-bottom:1px solid var(--line-soft); }
.agenda__time{ font-family:var(--mono); font-size:.8rem; color:var(--fg-dim); }
.agenda__bar{ align-self:stretch; border-radius:2px; background:var(--aqua); } .agenda__bar--pending{ background:var(--gold); } .agenda__bar--done{ background:rgba(var(--fg-rgb),.2); }

/* ── Messages ────────────────────────────────────────────────────────── */
.split{ display:grid; grid-template-columns:minmax(240px,320px) minmax(0,1fr); gap:0; min-height:520px; }
.split__list{ border-right:1px solid var(--line); overflow-y:auto; max-height:70vh; }
.split__detail{ display:flex; flex-direction:column; min-width:0; }
.convo{ display:flex; gap:12px; padding:12px 16px; border-bottom:1px solid var(--line-soft); cursor:pointer; }
.convo:hover,.convo[aria-current="true"]{ background:rgba(var(--aqua-rgb),.08); }
.convo__body{ min-width:0; flex:1; } .convo__body strong{ display:block; font-size:.9rem; } .convo__body p{ font-size:.82rem; color:var(--fg-dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.thread{ flex:1; overflow-y:auto; padding:18px; display:grid; gap:10px; align-content:start; }
.msg{ max-width:72%; padding:10px 13px; border-radius:14px; font-size:.9rem; line-height:1.45; }
.msg--in{ background:rgba(var(--fg-rgb),.08); border-bottom-left-radius:4px; justify-self:start; }
.msg--out{ background:rgba(var(--aqua-rgb),.2); border-bottom-right-radius:4px; justify-self:end; }
.msg--draft{ background:rgba(var(--gold-rgb),.12); border:1px dashed rgba(var(--gold-rgb),.5); justify-self:end; }
.msg__meta{ display:block; font-family:var(--mono); font-size:.68rem; color:var(--fg-dim); margin-top:5px; }
.composer{ display:flex; gap:10px; padding:14px 18px; border-top:1px solid var(--line); }
.composer textarea{ flex:1; min-height:44px; max-height:140px; padding:10px 12px; border-radius:var(--r-sm); border:1px solid var(--line); background:rgba(var(--bg-rgb),.4); color:var(--fg); resize:none; outline:none; }
.composer textarea:focus{ border-color:var(--aqua); }

/* ── Preview frame (Website view) ────────────────────────────────────── */
.preview{ border:1px solid var(--line); border-radius:var(--r); overflow:hidden; background:#fff; color:#0c2d3f; }
.preview__bar{ display:flex; gap:6px; align-items:center; padding:8px 12px; background:#e9eef0; border-bottom:1px solid #d5dde0; font-family:var(--mono); font-size:.72rem; color:#4c5b66; }
.preview__bar i{ width:9px; height:9px; border-radius:50%; background:#c9d2d6; display:inline-block; }
.preview__page{ padding:28px 30px; display:grid; gap:18px; font-family:var(--sans); }
.preview__page h2{ font-size:1.6rem; letter-spacing:-.02em; color:#0c2d3f; }
.preview__page .quote{ border-left:3px solid #28b0a6; padding:8px 14px; font-size:.92rem; color:#123a4d; background:#f3f7f7; border-radius:0 6px 6px 0; }
.preview__page .quote small{ display:block; margin-top:4px; color:#4c5b66; }

/* ── Affordances the views rely on ───────────────────────────────────── */
[data-href]{ cursor:pointer; }
.cal__day[aria-pressed="true"]{ box-shadow:inset 0 0 0 2px rgba(var(--aqua-rgb),.5); }
.agenda__item:last-child{ border-bottom:0; }

/* ── Misc ────────────────────────────────────────────────────────────── */
.empty{ padding:48px 20px; text-align:center; color:var(--fg-dim); display:grid; gap:6px; }
.notice{ padding:12px 16px; border-radius:var(--r-sm); font-size:.88rem; border:1px solid rgba(var(--gold-rgb),.35); background:rgba(var(--gold-rgb),.09); color:var(--fg); }
.notice--ok{ border-color:rgba(var(--aqua-rgb),.4); background:rgba(var(--aqua-rgb),.1); }
.range{ font-size:1.9rem; font-weight:600; letter-spacing:-.02em; } .range small{ font-size:.9rem; color:var(--fg-faint); font-weight:500; }
.divider{ height:1px; background:var(--line-soft); }
.toast{ position:fixed; left:50%; bottom:24px; transform:translateX(-50%); z-index:300; padding:11px 18px; border-radius:999px; background:var(--panel); color:var(--fg); border:1px solid var(--line); box-shadow:var(--shadow); font-size:.88rem; }
.toast--ok{ border-color:rgba(var(--aqua-rgb),.5); } .toast--warn{ border-color:rgba(var(--gold-rgb),.5); }
.detail-head{ display:flex; align-items:flex-start; gap:16px; flex-wrap:wrap; }
.detail-head h2{ font-size:1.3rem; } .detail-head .btn-row{ margin-left:auto; }
.backlink{ font-size:.85rem; }

.side__close{ display:none; }
/* ── Responsive ──────────────────────────────────────────────────────── */
@media (max-width:1100px){ .grid--4{ grid-template-columns:repeat(2,minmax(0,1fr)); } .grid--main{ grid-template-columns:1fr; } .grid--3{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:860px){
  .side__close{ display:block; margin:0 0 12px; align-self:flex-end; }
  body.nav-open{ overflow:hidden; }
  .shell{ grid-template-columns:1fr; }
  .side{ visibility:hidden; position:fixed; inset:41px auto 0 0; width:min(84vw,300px); z-index:120; transform:translateX(-104%); transition:transform .25s var(--ease); background:var(--bg); box-shadow:var(--shadow); }
  body.nav-open .side{ visibility:visible; transform:none; }
  .top__menu{ display:flex; } .top{ padding:12px 16px; } .view{ padding:18px 16px 60px; gap:16px; }
  .top__clock{ display:none; }
  .grid--2,.grid--3,.grid--4{ grid-template-columns:1fr; } .form--2{ grid-template-columns:1fr; }
  .split{ grid-template-columns:1fr; } .split__list{ border-right:0; border-bottom:1px solid var(--line); max-height:38vh; }
  .msg{ max-width:88%; } .cal__day{ min-height:72px; } .cal__evt{ font-size:.68rem; }
  .pipeline{ grid-template-columns:repeat(5,minmax(230px,1fr)); }
  .demo-banner{ font-size:.8rem; flex-wrap:wrap; } .demo-banner__link{ margin-left:0; }
}
@media (prefers-reduced-motion:reduce){ *{ transition:none !important; } }


/* Dense tool layout with consistent section padding. */
:root{--r:8px;--r-sm:8px;--shadow:none}
.shell{min-height:100vh}
.side{padding:24px 16px;overflow-y:auto;overscroll-behavior:contain;height:100dvh}
.side__brand{padding:0 8px 24px;gap:12px}
.side__nav{gap:4px}.side__nav a{min-height:44px;padding:8px 12px}
.side__mark{background:var(--aqua)}
.view{width:100%;max-width:1440px;margin:0 auto;padding:32px;gap:24px}
.grid{gap:24px}
.stat{padding:16px;gap:8px}
.stat__label{font-family:var(--sans);text-transform:none;letter-spacing:0;font-size:.875rem}
.stat__value{font-size:1.5rem}
.table th,.table td{padding:12px 16px}
@media(max-width:860px){
  .side{inset:0 auto 0 0;transition:none}
  .view{padding:24px 16px 48px}
  .grid--4{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .top{flex-wrap:wrap}
  .top__title{flex:1;min-width:80px;font-size:1.2rem}
  .top__right{margin-left:auto}
}

/* Keep visually hidden table labels inside the scrolling table. */
.table-wrap{position:relative;min-width:0}

p a,.muted a{text-decoration:underline;text-underline-offset:3px}