/* platform.css — Platform Operations console styling.
 * Built on alembic-tokens.css (vendored verbatim from release/ui/ALEMBIC_TOKENS.css,
 * contract_hash c04b07230f2c3135a705b53bcfb646e73195309074b7a53cf2ba3eb8744caaf2,
 * baseline_sha 44dec2d) and release/ui/PORTING_GUIDE.md's component recipes — the SAME
 * class shapes as web-vault/vault.css and every other ALEMBIC-shell console (§6 of the
 * addendum: "Platform Operations must use the SAME ALEMBIC visual shell... must NOT look
 * like a developer debug panel"). Deliberately near-identical to vault.css's component
 * layer for that reason; the .platform-banner is this console's one allowed departure
 * (an internal-only badge, not a secure-zone claim). No dark mode (per U0's contract). */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; min-height: 100%; }
body {
  background: var(--bg);
  color: var(--ink);
  font: var(--w-reg) var(--t-body)/var(--lh-body) var(--font-ui);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, p { margin: 0; }
button, input, select, textarea { font-family: inherit; color: inherit; }
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: var(--r-pill); }
::-webkit-scrollbar-track { background: transparent; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition: none !important; }
}

/* Topbar + floating dock, rail off-canvas by default at every width — ALEMBIC parity correction,
 * see web/ui-contract/shell.css's header comment + ALEMBIC_GUIDE_CORRECTIONS.md. The rail is kept
 * (still the complete nav) but is never the permanently-visible column PORTING_GUIDE.md §Shell's
 * literal "rail + bar" reading produced; `.qdock` (below) is the default way to navigate. */
.app { display: block; min-height: 100vh; }
.rail { position: fixed; inset: 0 auto 0 0; z-index: 92; width: min(86vw, var(--ch-rail-width)); transform: translateX(-100%); transition: transform .28s cubic-bezier(.2,.9,.25,1); }
.rail.open { transform: translateX(0); box-shadow: 26px 0 64px -16px rgba(10,10,10,.36); }
.rail { background: var(--rail); color: var(--panel); display: flex; flex-direction: column; padding: var(--s-base) var(--s-tight); gap: var(--s-base); }
.rb { display: flex; align-items: center; gap: var(--s-tight); background: none; border: none; color: inherit; cursor: pointer; padding: var(--s-tight); text-align: left; }
.rb .mark { font: var(--w-med) var(--t-h2)/1 var(--font-ui); letter-spacing: var(--ls-tight); }
.rb .sub { font: var(--w-reg) var(--t-micro)/1 var(--font-mono); letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--rail-2); }
.rail-deep { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: var(--s-snug); }
.rs { font: var(--w-med) var(--t-micro)/1 var(--font-mono); letter-spacing: var(--ls-wide); text-transform: uppercase; color: #6E6E66; padding: 0 var(--s-tight); margin-bottom: var(--s-hair); }
.ri { display: flex; align-items: center; gap: var(--s-tight); width: 100%; height: var(--ch-rail-item); padding: 0 var(--s-tight); border-radius: var(--r-sm); background: none; border: none; color: var(--panel); cursor: pointer; font: var(--w-reg) var(--t-body)/1 var(--font-ui); text-align: left; }
.ri:hover { background: var(--rail-2); }
.ri.on { background: var(--accent); color: var(--ink); font-weight: var(--w-med); }
.ri .ic { flex: none; width: var(--ic-default); height: var(--ic-default); }
.ri .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rme { display: flex; align-items: center; gap: var(--s-tight); padding: var(--s-tight); border-top: 1px solid var(--rail-2); }
.av { width: 26px; height: 26px; border-radius: var(--r-pill); background: var(--accent); color: var(--ink); display: flex; align-items: center; justify-content: center; font: var(--w-med) var(--t-cap)/1 var(--font-ui); flex: none; }
.who { font: var(--w-reg) var(--t-cap)/1.2 var(--font-ui); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.main { display: flex; flex-direction: column; min-width: 0; width: 100%; }
.bar { height: var(--ch-topbar-admin); flex: none; display: flex; align-items: center; gap: var(--s-base); padding: 0 var(--s-base); border-bottom: 1px solid var(--line); background: var(--panel); }
.bar h1 { font: var(--w-med) var(--t-h1)/1 var(--font-ui); letter-spacing: var(--ls-flat); }
/* Always the CLOSE control now the rail is off-canvas everywhere (ALEMBIC's rail-min semantics —
   opening it is the dock's job, below). */
.rail-toggle { display: inline-flex; background: none; border: none; cursor: pointer; padding: var(--s-tight); }
.content { flex: 1; padding: var(--s-base) var(--s-base) calc(var(--s-open, 40px) + 74px); overflow-y: auto; }

/* ---------------- quick-access dock — same primitive as web/ui-contract/shell.css's .qdock ------ */
.qdock{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:520;
  display:flex;align-items:center;gap:2px;padding:5px;border-radius:var(--r-pill);
  width:max-content;max-width:calc(100vw - 24px);overflow-x:auto;
  background:var(--rail);box-shadow:0 14px 34px -14px rgba(20,20,19,.4),0 2px 6px -2px rgba(20,20,19,.24)}
.qdock::-webkit-scrollbar{display:none}
.qdock .qb{width:40px;height:40px;flex:0 0 auto;border-radius:14px;border:0;cursor:pointer;position:relative;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  color:var(--panel);background:transparent;transition:background .18s,color .18s}
.qdock .qb .nm{display:none}
.qdock .qb:hover{background:var(--rail-2)}
.qdock .qb.on{background:var(--accent);color:var(--ink)}
.qdock .sep{width:1px;height:22px;background:rgba(255,255,255,.16);margin:0 4px;flex:0 0 auto}
@media (max-width:1024px){
  .qdock{left:0;right:0;bottom:0;transform:none;width:100%;max-width:none;border-radius:0;
    justify-content:space-around;padding:6px 4px calc(6px + env(safe-area-inset-bottom,0px));
    box-shadow:0 -2px 12px -4px rgba(20,20,19,.28);overflow-x:visible}
  .qdock .qb:not(.hot){display:none}
  .qdock .qb{flex:1 1 0;width:auto;height:52px;border-radius:var(--r-sm)}
  .qdock .qb .nm{display:block;font:var(--w-med) 10px/1 var(--font-ui);white-space:nowrap}
}

.platform-banner { display: flex; align-items: center; gap: var(--s-tight); flex-wrap: wrap; background: var(--rail); color: var(--panel); padding: var(--s-tight) var(--s-base); font: var(--w-med) var(--t-cap)/1.3 var(--font-mono); letter-spacing: var(--ls-wide); text-transform: uppercase; }
.platform-banner .dot { width: 7px; height: 7px; border-radius: var(--r-pill); background: var(--accent); flex: none; }
.platform-banner .who-when { margin-left: auto; opacity: .7; text-transform: none; letter-spacing: 0; font-family: var(--font-mono); }
.vault-mark { background: var(--accent); color: var(--ink); border-radius: var(--r-sm); padding: 1px 7px; font-weight: var(--w-med); }

.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); padding-top: var(--pad-card-top); padding-left: var(--pad-card); padding-right: var(--pad-card); padding-bottom: var(--pad-card-btm); margin-bottom: var(--s-base); }
.card-hd { display: flex; align-items: center; gap: var(--s-snug); flex-wrap: wrap; margin-bottom: var(--s-snug); }
.card-hd h2 { font: var(--w-med) var(--t-h2)/1 var(--font-ui); }
.card-hd .n { font: var(--w-reg) var(--t-cap)/1 var(--font-ui); color: var(--ink-3); }
.card-hd .spacer { flex: 1; }

table { width: 100%; border-collapse: collapse; font: var(--w-reg) var(--t-body)/1.3 var(--font-ui); }
thead th { position: sticky; top: 0; background: var(--panel); z-index: 1; text-align: left; font: var(--w-med) var(--t-cap)/1 var(--font-ui); color: var(--ink-3); padding: var(--s-tight) var(--s-snug); border-bottom: 1px solid var(--line); letter-spacing: var(--ls-flat); }
th.r, td.r { text-align: right; }
tbody td { padding: var(--s-tight) var(--s-snug); border-bottom: 1px solid var(--line); vertical-align: middle; }
tbody tr:hover { background: var(--panel-2); }
td.mono, .mono { font-family: var(--font-mono); font-size: var(--t-cap); }

.fld { height: var(--ch-field-shared); padding: 0 var(--s-tight); border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--panel); font: var(--w-reg) var(--t-body)/1 var(--font-ui); }
.fld:focus, .btn:focus-visible, .ri:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
label.field { display: flex; flex-direction: column; gap: 5px; margin-bottom: var(--s-snug); }
label.field > span.lbl { font: var(--w-reg) var(--t-micro)/1 var(--font-ui); letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--ink-3); }

.btn { height: var(--ch-button-default); padding: 0 var(--s-snug); border-radius: 12px; border: 1px solid var(--line); background: var(--panel); color: var(--ink); font: var(--w-med) var(--t-cap)/1 var(--font-ui); cursor: pointer; width: max-content; display: inline-flex; align-items: center; gap: var(--s-hair); min-height: var(--ch-touch-floor-mouse); }
.btn.sm { height: var(--ch-button-sm); padding: 0 var(--s-tight); border-radius: 11px; font-size: var(--t-micro); }
.btn.p { background: var(--accent); border-color: var(--accent); color: var(--ink); }
.btn.g { background: var(--green); border-color: var(--green); color: #fff; }
.btn.r { background: var(--red); border-color: var(--red); color: #fff; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
@media (pointer: coarse) { .btn, .ri { min-height: var(--ch-touch-floor-coarse-pointer); } }

.chip { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: var(--r-pill); font: var(--w-med) var(--t-micro)/1 var(--font-ui); letter-spacing: var(--ls-wide); text-transform: uppercase; }
.chip.n { background: var(--panel-3); color: var(--ink-2); }
.chip.g { background: rgba(92,104,41,.14); color: var(--green); }
.chip.a { background: rgba(110,95,15,.14); color: var(--amber); }
.chip.r { background: rgba(138,90,76,.14); color: var(--red); }
.chip.k { background: var(--accent); color: var(--ink); }

.xp-scrim { position: fixed; inset: 0; background: rgba(20,20,19,.4); z-index: 50; display: none; }
.xp-scrim.open { display: block; }
.xp-sheet { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(480px, calc(100vw - 32px)); max-height: calc(100vh - 64px); overflow-y: auto; background: var(--panel); border-radius: var(--r-xl); box-shadow: 0 20px 60px rgba(20,20,19,.3); z-index: 51; display: none; }
.xp-sheet.open { display: block; }
.xp-sheet-hd { display: flex; align-items: center; gap: var(--s-snug); padding: var(--pad-card-top) var(--pad-card) var(--s-snug); border-bottom: 1px solid var(--line); }
.xp-sheet-hd h2 { font: var(--w-med) var(--t-h1)/1 var(--font-ui); flex: 1; }
.xp { background: none; border: none; cursor: pointer; font-size: 20px; line-height: 1; color: var(--ink-3); padding: var(--s-hair); }
.xp-sheet-bd { padding: var(--s-base) var(--pad-card) var(--pad-card-btm); }

.empty { padding: var(--s-open) var(--s-base); text-align: center; color: var(--ink-3); }
.empty h3 { font: var(--w-med) var(--t-h2)/1 var(--font-ui); color: var(--ink); margin-bottom: var(--s-hair); }
.notbuilt { padding: var(--pad-region) var(--pad-card); max-width: 640px; }
.notbuilt h2 { font: var(--w-med) var(--t-h1)/1.2 var(--font-ui); margin-bottom: var(--s-tight); }
.notbuilt p { color: var(--ink-2); }
.notbuilt .needs { margin-top: var(--s-tight); padding: var(--s-tight) var(--s-snug); background: var(--panel-2); border-radius: var(--r-sm); font: var(--w-reg) var(--t-cap)/1.4 var(--font-mono); color: var(--ink-2); }
.skl { display: inline-block; height: 14px; width: 120px; border-radius: 8px; background: linear-gradient(90deg, var(--panel-2) 25%, var(--panel-3) 37%, var(--panel-2) 63%); background-size: 400% 100%; animation: sklSlide 1.4s ease infinite; }
@keyframes sklSlide { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
.toast { position: fixed; bottom: var(--s-base); left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: var(--s-tight); background: var(--rail); color: var(--panel); padding: var(--s-tight) var(--s-snug); border-radius: var(--r-md); font: var(--w-reg) var(--t-cap)/1 var(--font-ui); z-index: 60; }
.toast .d { width: 7px; height: 7px; border-radius: var(--r-pill); background: var(--accent); }
.toast.bad .d { background: var(--red); }

.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--rail); padding: var(--s-base); }
.login-card { width: min(380px, 100%); background: var(--panel); border-radius: var(--r-xl); padding: var(--pad-region) var(--pad-card); }
.login-card .mark { font: var(--w-med) var(--t-fig-sm)/1 var(--font-ui); margin-bottom: var(--s-hair); }
.login-card .sub { font: var(--w-reg) var(--t-cap)/1.4 var(--font-ui); color: var(--ink-3); margin-bottom: var(--s-base); }
.login-card .err { color: var(--red); font: var(--w-reg) var(--t-cap)/1.3 var(--font-ui); margin-top: var(--s-tight); min-height: 1em; }

.health-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--s-snug); }
.health-tile { border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--s-snug); }
.health-tile .k { font: var(--w-reg) var(--t-micro)/1 var(--font-ui); letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--ink-3); margin-bottom: 4px; }
.health-tile .v { font: var(--w-med) var(--t-h2)/1 var(--font-ui); }

@media (max-width: 768px) {
  .content { padding: var(--s-snug); }
  .card { padding: var(--s-snug); }
  table, thead, tbody, tr { display: block; width: 100%; }
  thead { display: none; }
  tbody tr { border-bottom: 1px solid var(--line); padding: var(--s-tight) 0; }
  tbody td { display: flex; justify-content: space-between; gap: var(--s-tight); border-bottom: none; padding: 2px 0; }
  tbody td::before { content: attr(data-label); font-weight: var(--w-med); color: var(--ink-3); }
}
@media (max-width: 375px) { .xp-sheet { width: calc(100vw - 16px); } }