/* ============================================================
   Celestech interface reinvention — sandbox /1/ design tokens
   Luminous precision: warm paper, ink, one solar accent.
   ============================================================ */

:root {
  /* -- surfaces (amber-tinted neutrals, hue ~78) -- */
  --paper:        oklch(97.4% 0.006 82);
  --paper-raised: oklch(99.1% 0.003 86);
  --paper-sunken: oklch(95.2% 0.007 80);
  --ink:          oklch(24% 0.014 68);
  --ink-2:        oklch(40% 0.013 68);
  --ink-3:        oklch(52% 0.012 70);
  --line:         oklch(89.5% 0.009 78);
  --line-strong:  oklch(81% 0.012 76);

  /* -- the sun: one accent, spent only on "here / now / active" -- */
  --sun:      oklch(70% 0.145 72);
  --sun-deep: oklch(54% 0.125 62);
  --sun-wash: oklch(94.5% 0.038 82);

  /* -- quiet area identities (indicator + glyph doses only) -- */
  --a-sell:    oklch(56% 0.115 38);
  --a-make:    oklch(60% 0.125 76);
  --a-ship:    oklch(54% 0.085 242);
  --a-money:   oklch(53% 0.100 156);
  --a-catalog: oklch(53% 0.085 306);
  --a-company: oklch(48% 0.022 76);
  --a-sell-wash:    oklch(95% 0.022 38);
  --a-make-wash:    oklch(95% 0.030 80);
  --a-ship-wash:    oklch(95% 0.018 242);
  --a-money-wash:   oklch(95% 0.022 156);
  --a-catalog-wash: oklch(95% 0.018 306);
  --a-company-wash: oklch(95% 0.006 80);

  /* -- semantic status -- */
  --ok:        oklch(46% 0.10 155);
  --ok-wash:   oklch(94.5% 0.028 155);
  --info:      oklch(47% 0.09 245);
  --info-wash: oklch(94.5% 0.022 245);
  --warn:      oklch(50% 0.11 70);
  --warn-wash: oklch(94.5% 0.040 82);
  --bad:       oklch(48% 0.14 25);
  --bad-wash:  oklch(95% 0.024 22);
  --mut:       oklch(48% 0.012 70);
  --mut-wash:  oklch(94.5% 0.006 80);

  /* -- type -- */
  --font-ui:   'Archivo', 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'Spline Sans Mono', ui-monospace, monospace;
  --t-cap:  .72rem;   /* 11.5px caps labels   */
  --t-sm:   .8125rem; /* 13px secondary       */
  --t-base: .875rem;  /* 14px UI base         */
  --t-lead: 1rem;     /* 16px lead            */
  --t-sec:  1.25rem;  /* 20px section         */
  --t-disp: 1.75rem;  /* 28px display         */

  /* -- space (4pt) -- */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px;
  --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px;

  --r: 6px;
  --r-lg: 10px;
  --shadow-menu: 0 10px 28px oklch(30% 0.02 70 / .13), 0 1px 3px oklch(30% 0.02 70 / .08);
  --strip-h: 54px;
}

* { box-sizing: border-box; margin: 0; }

html { height: 100%; }
body {
  min-height: 100%;
  background: var(--paper);
  color: var(--ink);
  font: 400 var(--t-base)/1.5 var(--font-ui);
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
}
::selection { background: var(--sun-wash); }

a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--sun-deep); outline-offset: 2px; border-radius: 3px; }

/* ---------- primitives ---------- */

.cap {
  font-size: var(--t-cap);
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.mono { font-family: var(--font-mono); font-size: .8125rem; }
.num  { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

kbd {
  font: 500 .6875rem/1 var(--font-mono);
  color: var(--ink-2);
  background: var(--paper-sunken);
  border: 1px solid var(--line);
  border-bottom-width: 2px;
  border-radius: 4px;
  padding: 3px 5px;
}

.btn {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--t-sm); font-weight: 500;
  padding: 6px 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  background: var(--paper-raised);
  transition: border-color .12s, background .12s;
}
.btn:hover { border-color: var(--ink-3); }
.btn-primary {
  background: var(--ink); color: var(--paper);
  border-color: var(--ink);
}
.btn-primary:hover { background: oklch(31% 0.016 68); border-color: oklch(31% 0.016 68); }
.btn-quiet { border-color: transparent; color: var(--ink-2); }
.btn-quiet:hover { background: var(--paper-sunken); border-color: transparent; }

/* status badge — dot + word, no pill shouting */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .75rem; font-weight: 500; white-space: nowrap;
  color: var(--badge-c, var(--mut));
}
.badge::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%;
  background: var(--badge-c, var(--mut));
}
.badge[data-tone="ok"]   { --badge-c: var(--ok); }
.badge[data-tone="info"] { --badge-c: var(--info); }
.badge[data-tone="warn"] { --badge-c: var(--warn); }
.badge[data-tone="bad"]  { --badge-c: var(--bad); }
.badge[data-tone="mut"]  { --badge-c: var(--mut); }

/* entity chip — THE relation grammar: kind · id · status · fact */
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  max-width: 100%;
  padding: 5px 10px 5px 8px;
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: var(--r);
  font-size: .75rem;
  line-height: 1.35;
  text-decoration: none;
  transition: border-color .12s, background .12s;
  position: relative;
}
.chip:hover { border-color: var(--line-strong); background: var(--paper); }
.chip .ck {
  font-size: .625rem; font-weight: 700; letter-spacing: .07em;
  color: var(--chip-hue, var(--ink-3));
}
.chip .cid { font-family: var(--font-mono); font-weight: 500; white-space: nowrap; }
.chip.plain .cid { font-family: var(--font-ui); font-weight: 600; }
.chip .cfact { color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip .cdot { width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--cdot, var(--mut)); }
.chip .peek {
  display: none; position: absolute; z-index: 40;
  left: 0; top: calc(100% + 6px); min-width: 230px;
  background: var(--paper-raised); border: 1px solid var(--line);
  border-radius: var(--r); box-shadow: var(--shadow-menu);
  padding: 10px 12px; font-size: .75rem; color: var(--ink-2);
}
.chip:hover .peek { display: block; }
.peek b { display: block; color: var(--ink); font-weight: 600; margin-bottom: 2px; }

/* panel */
.panel {
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}
.panel > h3 {
  font-size: var(--t-cap); font-weight: 600; letter-spacing: .09em;
  text-transform: uppercase; color: var(--ink-3);
  padding: var(--s3) var(--s4) 0;
}

/* data table */
table.tbl { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
.tbl th {
  text-align: left; font-size: .6875rem; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3);
  padding: 8px 12px; border-bottom: 1px solid var(--line-strong);
  white-space: nowrap;
}
.tbl td {
  padding: 8px 12px; border-bottom: 1px solid var(--line);
  vertical-align: middle;
}
.tbl tr:last-child td { border-bottom: 0; }
.tbl tbody tr { transition: background .1s; }
.tbl tbody tr:hover { background: var(--paper-sunken); }
.tbl tbody tr[data-nav] { cursor: pointer; }
.tbl .num, .tbl td.r { text-align: right; }
.tbl .id { font-family: var(--font-mono); font-size: .78rem; font-weight: 500; }
.tbl .meta { color: var(--ink-3); font-size: .75rem; }

/* page scaffolding shared by all shells */
#stage { padding: var(--s5) var(--s6) var(--s8); max-width: 1520px; }
.page-head { display: flex; align-items: baseline; gap: var(--s4); margin-bottom: var(--s5); flex-wrap: wrap; }
.page-head h1 { font-size: var(--t-disp); font-weight: 650; letter-spacing: -0.015em; }
.page-head .sub { color: var(--ink-3); font-size: var(--t-sm); }
.page-head .spacer { flex: 1; }
.counts { display: inline-flex; gap: var(--s4); }
.counts .c { font-size: var(--t-sm); color: var(--ink-2); }
.counts .c b { font-family: var(--font-mono); font-weight: 600; color: var(--ink); }

.filterbar {
  display: flex; gap: var(--s2); align-items: center;
  margin-bottom: var(--s4); flex-wrap: wrap;
}
.filterbar input[type=search] {
  font: inherit; font-size: var(--t-sm); color: var(--ink);
  background: var(--paper-raised); border: 1px solid var(--line);
  border-radius: var(--r); padding: 6px 10px; width: 260px;
}
.filterbar input::placeholder { color: var(--ink-3); }
.fchip {
  font-size: .75rem; font-weight: 500; color: var(--ink-2);
  border: 1px solid var(--line); border-radius: 99px;
  padding: 4px 11px; background: var(--paper-raised);
}
.fchip[aria-pressed="true"] { background: var(--sun-wash); border-color: var(--sun-deep); color: var(--sun-deep); }

/* tabs (entity pages) */
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line-strong); margin-bottom: var(--s5); }
.tabs button {
  font-size: var(--t-sm); font-weight: 500; color: var(--ink-3);
  padding: 8px 14px; border-radius: var(--r) var(--r) 0 0;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.tabs button:hover { color: var(--ink); }
.tabs button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--sun); }

/* detail rows: label-left value-right */
.dt { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
.dt th {
  text-align: left; font-weight: 500; color: var(--ink-3);
  width: 170px; padding: 7px 16px 7px 0; vertical-align: top; white-space: nowrap;
}
.dt td { padding: 7px 0; }
.dt tr + tr th, .dt tr + tr td { border-top: 1px solid var(--line); }
.dt.slim th { width: auto; }
.dt.slim td { overflow-wrap: anywhere; }

/* stub pages */
.stub { max-width: 60ch; }
.stub .cap { display: block; margin-bottom: var(--s2); }
.stub h1 { font-size: var(--t-disp); font-weight: 650; margin-bottom: var(--s3); letter-spacing: -0.015em; }
.stub p { color: var(--ink-2); margin-bottom: var(--s3); }
.stub .note { font-size: .75rem; color: var(--ink-3); }

/* ---------- command palette (shared) ---------- */
.pal-overlay {
  position: fixed; inset: 0; z-index: 100; display: none;
  background: oklch(30% 0.015 70 / .28);
  padding-top: 12vh;
}
.pal-overlay.open { display: block; }
.pal {
  width: min(600px, 92vw); margin: 0 auto;
  background: var(--paper-raised); border: 1px solid var(--line-strong);
  border-radius: var(--r-lg); box-shadow: var(--shadow-menu); overflow: hidden;
}
.pal input {
  width: 100%; font: inherit; font-size: var(--t-lead); color: var(--ink);
  background: transparent; border: 0; outline: none;
  padding: 15px 18px; border-bottom: 1px solid var(--line);
}
.pal-list { max-height: 46vh; overflow-y: auto; padding: 6px; }
.pal-item {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  font-size: var(--t-sm); padding: 9px 12px; border-radius: var(--r);
}
.pal-item .where { margin-left: auto; font-size: .6875rem; color: var(--ink-3); letter-spacing: .05em; text-transform: uppercase; }
.pal-item.sel { background: var(--sun-wash); }
.pal-item .adot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.pal-empty { padding: 22px 16px; font-size: var(--t-sm); color: var(--ink-3); text-align: center; }

/* ---------- nav menus (shared look) ---------- */
.menu {
  position: absolute; z-index: 60; min-width: 210px;
  background: var(--paper-raised); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--shadow-menu);
  padding: 6px; display: none;
}
.menu.open { display: block; }
.menu a, .menu button {
  display: flex; width: 100%; align-items: center; gap: 8px;
  font-size: var(--t-sm); text-decoration: none; text-align: left;
  padding: 7px 10px; border-radius: var(--r); color: var(--ink-2);
}
.menu a:hover, .menu button:hover { background: var(--paper-sunken); color: var(--ink); }
.menu .on { color: var(--ink); font-weight: 550; background: var(--sun-wash); }
.menu .sep { border-top: 1px solid var(--line); margin: 6px 4px; }
.menu .mcap {
  font-size: .625rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink-3); padding: 8px 10px 3px;
}

/* utility layout */
.cols { display: grid; gap: var(--s5); }
.cols > * { min-width: 0; }
@media (min-width: 1100px) { .cols-side { grid-template-columns: minmax(0,1fr) 320px; } }
.stack { display: grid; gap: var(--s4); }
.row { display: flex; align-items: center; gap: var(--s3); }
.grow { flex: 1; }
.muted { color: var(--ink-3); }