/* @bydrec/ai-shell — layout + the eight components. Depends on tokens.css.
 * Class prefix `ash-` (ai-shell). Consumers style their own panels with the tokens; they do not
 * override these rules. Everything works at 400px: the rail becomes a drawer, tables scroll inside
 * their own wrapper, and the page body never scrolls sideways.
 */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; height: 100%; }
body.ash-body { margin: 0; height: 100%; background: var(--canvas); color: var(--ink); font-family: var(--font); font-size: var(--fs-base); line-height: var(--lh); }
.ash-body :where(a) { color: var(--dept); }  /* :where() = zero specificity, so component classes (.ash-pill, .ash-rail__item, .ash-iconbtn) win */
.ash-body :focus-visible { outline: var(--focus); outline-offset: 2px; }
.ash-mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.ash-muted { color: var(--ink-3); }
.ash-small { font-size: var(--fs-sm); }
[hidden] { display: none !important; }

/* ── frame ─────────────────────────────────────────────────────────────── */
.ash-frame { display: grid; grid-template-columns: var(--rail-w) minmax(0, 1fr); grid-template-rows: var(--header-h) 1fr; min-height: 100%; }
.ash-frame[data-rail="collapsed"] { grid-template-columns: var(--rail-w-collapsed) minmax(0, 1fr); }

.ash-header { grid-column: 1 / -1; min-width: 0; overflow: hidden; display: flex; align-items: center; gap: var(--sp-3); padding: 0 var(--sp-4); background: var(--paper); border-bottom: 1px solid var(--line); position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; }
.ash-header__menu { display: none; }
.ash-brand { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; }
.ash-brand__mark { width: 28px; height: 28px; border-radius: 7px; background: var(--dept); color: var(--dept-ink); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: var(--fs-sm); flex: none; }
.ash-brand__name { font-weight: 600; white-space: nowrap; }
.ash-persona { display: flex; align-items: center; gap: var(--sp-2); padding-left: var(--sp-3); border-left: 1px solid var(--line); min-width: 0; }
.ash-persona__portrait { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; background: var(--dept-dim); color: var(--dept); display: inline-flex; align-items: center; justify-content: center; font-size: var(--fs-xs); font-weight: 600; flex: none; }
.ash-persona__text { line-height: 1.15; min-width: 0; }
.ash-persona__name { display: block; font-size: var(--fs-sm); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ash-persona__title { display: block; font-size: var(--fs-xs); color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ash-header__spacer { flex: 1; }
.ash-health { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-sm); color: var(--ink-2); }
.ash-health__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-3); }
.ash-health[data-state="healthy"] .ash-health__dot { background: var(--good); }
.ash-health[data-state="degraded"] .ash-health__dot { background: var(--warn); }
.ash-health[data-state="unhealthy"] .ash-health__dot { background: var(--bad); }
.ash-build { font-family: var(--mono); font-size: var(--fs-xs); color: var(--ink-3); }
.ash-user { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-sm); color: var(--ink-2); }
.ash-iconbtn { font: inherit; background: none; border: 1px solid var(--line-2); color: var(--ink-2); border-radius: var(--radius-sm); padding: 4px 8px; cursor: pointer; font-size: var(--fs-sm); line-height: 1; }
.ash-iconbtn:hover { background: var(--canvas); }

.ash-rail { grid-row: 2; background: var(--rail); color: var(--rail-ink); padding: var(--sp-3) 0; overflow-y: auto; position: sticky; top: var(--header-h); height: calc(100vh - var(--header-h)); }
.ash-rail__group { padding: var(--sp-3) var(--sp-4) var(--sp-1); font-family: var(--mono); font-size: .64rem; letter-spacing: .09em; text-transform: uppercase; color: var(--rail-ink-2); white-space: nowrap; overflow: hidden; }
.ash-rail__item { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: none; border: 0; color: var(--rail-ink); padding: 7px var(--sp-4) 7px 19px; cursor: pointer; font: inherit; font-size: var(--fs-md); border-left: 3px solid transparent; text-decoration: none; white-space: nowrap; }
.ash-rail__item:hover { background: var(--rail-2); }
.ash-rail__item[aria-current="page"] { background: var(--rail-2); color: #fff; border-left-color: var(--dept); }
.ash-rail__item:focus-visible { outline: var(--focus); outline-offset: -2px; }
.ash-rail__icon { width: 16px; text-align: center; opacity: .8; flex: none; }
.ash-rail__collapse { margin: var(--sp-3) var(--sp-4) 0; font: inherit; font-size: var(--fs-xs); background: none; border: 1px solid var(--rail-2); color: var(--rail-ink-2); border-radius: var(--radius-sm); padding: 4px 8px; cursor: pointer; }
.ash-frame[data-rail="collapsed"] .ash-rail__group, .ash-frame[data-rail="collapsed"] .ash-rail__label { display: none; }
.ash-frame[data-rail="collapsed"] .ash-rail__item { padding-left: 14px; justify-content: center; }
.ash-scrim { display: none; }

.ash-main { grid-row: 2; min-width: 0; padding: var(--sp-4) var(--sp-5) var(--sp-7); }
.ash-crumbs { font-family: var(--mono); font-size: var(--fs-xs); color: var(--ink-3); margin-bottom: var(--sp-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ash-crumbs a { color: inherit; text-decoration: none; }
.ash-crumbs a:hover { color: var(--dept); }
.ash-title { font-size: var(--fs-xl); font-weight: 600; margin: 0 0 var(--sp-3); text-wrap: balance; }

/* ── 1 · stat tile ─────────────────────────────────────────────────────── */
.ash-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--sp-3); margin-bottom: var(--sp-4); }
.ash-stat { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; min-width: 0; }
.ash-stat--wide { grid-column: span 2; }
.ash-stat__label { display: block; font-family: var(--mono); font-size: .66rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ash-stat__value { display: block; font-size: 1.5rem; font-weight: 600; font-variant-numeric: tabular-nums; margin: 2px 0; line-height: 1.2; }
.ash-stat__value[data-tone="good"] { color: var(--good); } .ash-stat__value[data-tone="warn"] { color: var(--warn); } .ash-stat__value[data-tone="bad"] { color: var(--bad); }
.ash-stat__note { font-size: var(--fs-xs); color: var(--ink-3); }

/* ── 2 · panel ─────────────────────────────────────────────────────────── */
.ash-panel { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--sp-4); margin-bottom: var(--sp-4); min-width: 0; }
.ash-panel__head { display: flex; align-items: baseline; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.ash-panel__title { font-size: var(--fs-lg); font-weight: 600; margin: 0; }
.ash-panel__sub { font-size: var(--fs-sm); color: var(--ink-3); }
.ash-panel__actions { margin-left: auto; display: flex; gap: var(--sp-2); }

/* ── 3 · pill bar ──────────────────────────────────────────────────────── */
.ash-pills { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: var(--sp-4); }
.ash-pill { font: inherit; font-size: var(--fs-sm); padding: 5px 12px; border-radius: var(--radius-pill); border: 1px solid var(--line-2); background: var(--paper); color: var(--ink-2); cursor: pointer; text-decoration: none; }
.ash-pill:hover { border-color: var(--dept); }
.ash-pill[aria-current="page"] { background: var(--dept); border-color: transparent; color: var(--dept-ink); }

/* ── 4 · data table ────────────────────────────────────────────────────── */
.ash-tablewrap { overflow: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); max-height: 70vh; }
.ash-table { border-collapse: separate; border-spacing: 0; width: 100%; font-size: var(--fs-md); }
.ash-table th, .ash-table td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: top; white-space: nowrap; }
.ash-table th { position: sticky; top: 0; background: var(--canvas); font-weight: 600; color: var(--ink-2); font-size: var(--fs-xs); letter-spacing: .04em; text-transform: uppercase; z-index: 1; }
.ash-table th[data-sortable] { cursor: pointer; user-select: none; }
.ash-table th[aria-sort="ascending"]::after { content: " ▲"; font-size: .6em; } .ash-table th[aria-sort="descending"]::after { content: " ▼"; font-size: .6em; }
.ash-table td.ash-num, .ash-table th.ash-num { text-align: right; font-variant-numeric: tabular-nums; }
.ash-table tbody tr:hover { background: var(--dept-dim); }
.ash-table tr[data-href] { cursor: pointer; }

/* ── 5 · status pill ───────────────────────────────────────────────────── */
.ash-status { display: inline-block; font-family: var(--mono); font-size: var(--fs-xs); padding: 2px 8px; border-radius: var(--radius-pill); background: var(--line); color: var(--ink); white-space: nowrap; }
.ash-status[data-tone="good"] { background: var(--good-dim); color: var(--good); }
.ash-status[data-tone="warn"] { background: var(--warn-dim); color: var(--warn); }
.ash-status[data-tone="bad"] { background: var(--bad-dim); color: var(--bad); }
.ash-status[data-tone="info"] { background: var(--info-dim); color: var(--info); }
.ash-status[data-tone="accent"] { background: var(--dept-dim); color: var(--dept); }

/* ── 6 · detail drawer (routed) ────────────────────────────────────────── */
.ash-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(560px, 100vw); background: var(--paper); border-left: 1px solid var(--line); box-shadow: var(--shadow-lg); z-index: 40; display: flex; flex-direction: column; padding-top: env(safe-area-inset-top, 0px); }
.ash-drawer__head { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--line); }
.ash-drawer__title { font-weight: 600; margin: 0; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ash-drawer__body { padding: var(--sp-4); overflow: auto; flex: 1; }
.ash-drawer__scrim { position: fixed; inset: 0; background: rgba(10, 14, 28, .35); z-index: 39; }

/* ── 7 · states ────────────────────────────────────────────────────────── */
.ash-state { padding: var(--sp-6) var(--sp-4); text-align: center; color: var(--ink-3); border: 1px dashed var(--line-2); border-radius: var(--radius); background: var(--paper); }
.ash-state__title { color: var(--ink-2); font-weight: 600; margin: 0 0 4px; }
.ash-state--error { border-color: var(--bad); color: var(--bad); border-style: solid; }
.ash-state--loading::before { content: ""; display: inline-block; width: 18px; height: 18px; border: 2px solid var(--line-2); border-top-color: var(--dept); border-radius: 50%; animation: ash-spin .8s linear infinite; margin-bottom: 6px; }
@keyframes ash-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ash-state--loading::before { animation: none; } }

/* ── 8 · confirm dialog ────────────────────────────────────────────────── */
.ash-dialog { border: 1px solid var(--line); border-radius: var(--radius); padding: 0; background: var(--paper); color: var(--ink); box-shadow: var(--shadow-lg); max-width: min(460px, calc(100vw - 32px)); }
.ash-dialog::backdrop { background: rgba(10, 14, 28, .45); }
.ash-dialog__body { padding: var(--sp-4) var(--sp-5); }
.ash-dialog__title { margin: 0 0 var(--sp-2); font-size: var(--fs-lg); font-weight: 600; }
.ash-dialog__text { margin: 0; color: var(--ink-2); white-space: pre-line; }
.ash-dialog__actions { display: flex; justify-content: flex-end; gap: var(--sp-2); padding: var(--sp-3) var(--sp-5); border-top: 1px solid var(--line); }

/* ── buttons (used by the components; consumers may reuse) ─────────────── */
.ash-btn { font: inherit; font-size: var(--fs-sm); padding: 6px 12px; border-radius: var(--radius-sm); border: 1px solid var(--line-2); background: var(--paper); color: var(--ink); cursor: pointer; }
.ash-btn:hover { background: var(--canvas); }
.ash-btn--primary { background: var(--dept); border-color: transparent; color: var(--dept-ink); }
.ash-btn--primary:hover { filter: brightness(1.08); background: var(--dept); }
.ash-btn--danger { background: var(--bad); border-color: transparent; color: #fff; }
.ash-btn[disabled] { opacity: .55; cursor: default; }

/* ── sign-in card (signed-out renders ONLY this — never the nav) ───────── */
.ash-signin { min-height: 100vh; display: grid; place-items: center; padding: var(--sp-4); background: var(--canvas); }
.ash-signin__card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--sp-6); max-width: 420px; width: 100%; text-align: center; box-shadow: var(--shadow); }
.ash-signin__mark { width: 44px; height: 44px; border-radius: 10px; background: var(--dept); color: var(--dept-ink); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: var(--fs-lg); margin-bottom: var(--sp-3); }
.ash-signin__title { margin: 0 0 var(--sp-2); font-size: var(--fs-xl); }
.ash-signin__text { color: var(--ink-2); margin: 0 0 var(--sp-4); }

/* ── toast ─────────────────────────────────────────────────────────────── */
.ash-toasts { position: fixed; right: var(--sp-4); bottom: calc(var(--sp-4) + env(safe-area-inset-bottom, 0px)); display: grid; gap: var(--sp-2); z-index: 50; max-width: min(380px, calc(100vw - 32px)); }
.ash-toast { background: var(--ink); color: var(--paper); padding: 10px 14px; border-radius: var(--radius); font-size: var(--fs-sm); box-shadow: var(--shadow-lg); }
.ash-toast[data-tone="good"] { background: var(--good); color: #fff; } .ash-toast[data-tone="bad"] { background: var(--bad); color: #fff; } .ash-toast[data-tone="warn"] { background: var(--warn); color: #fff; }

/* ── phone ─────────────────────────────────────────────────────────────── */
@media (max-width: 760px) {
  .ash-frame, .ash-frame[data-rail="collapsed"] { grid-template-columns: minmax(0, 1fr); }
  .ash-user__name, .ash-build, .ash-health__text { display: none; }
  .ash-header { gap: var(--sp-2); padding: 0 var(--sp-3); }
  .ash-header__menu { display: inline-flex; }
  .ash-persona { display: none; }
  .ash-rail { position: fixed; top: 0; left: 0; bottom: 0; width: min(280px, 85vw); height: auto; transform: translateX(-100%); transition: transform .2s; z-index: 45; padding-top: calc(var(--sp-3) + env(safe-area-inset-top, 0px)); }
  .ash-frame[data-drawer="open"] .ash-rail { transform: none; }
  .ash-frame[data-drawer="open"] .ash-scrim { display: block; position: fixed; inset: 0; background: rgba(10, 14, 28, .4); z-index: 44; }
  .ash-frame[data-rail="collapsed"] .ash-rail__group, .ash-frame[data-rail="collapsed"] .ash-rail__label { display: revert; }
  .ash-rail__collapse { display: none; }
  .ash-main { padding: var(--sp-3) var(--sp-4) var(--sp-6); }
  .ash-stat--wide { grid-column: span 1; }
  @media (prefers-reduced-motion: reduce) { .ash-rail { transition: none; } }
}