/* ============================================================
   RYOKO v2 — Design System
   Register: editorial operations. Dense, confident, typographic.
   No gradients, no shadows-on-everything, no card-with-left-border.
   ============================================================ */

:root {
  /* ---------- Colour roles ---------- */
  --ink:          #0d0e0c;   /* near-black, warm */
  --ink-2:        #2a2b28;   /* secondary text */
  --muted:        #6b6962;   /* tertiary text, captions */
  --muted-2:      #9c9a92;   /* disabled, dividers-strong */
  --rule:         #d8d2c3;   /* default hairline */
  --rule-soft:    #ece7da;   /* section divider */
  --paper:        #f6f2e8;   /* app background, warm */
  --paper-2:      #fbf9f2;   /* sunken surface */
  --surface:      #ffffff;   /* cards, input fields */
  --accent:       #124f47;   /* deep lagoon teal */
  --accent-ink:   #f3ebd5;   /* type on accent */
  --accent-soft:  #d9e3e0;   /* tint bg */
  --warn:         #a2521c;   /* rust */
  --warn-soft:    #f3e2cf;
  --ok:           #2a6a45;
  --ok-soft:      #d7e7db;
  --danger:       #8a1a1a;
  --danger-soft:  #f0d6d3;
  --info:         #2a4a6a;
  --info-soft:    #d7e0ea;

  /* ---------- Spacing rhythm ---------- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px;

  /* ---------- Radii (restrained) ---------- */
  --r-1: 2px; --r-2: 4px; --r-3: 8px;

  /* ---------- Type ---------- */
  --ff-display: 'Fraunces', ui-serif, Georgia, serif;
  --ff-sans:    'Inter Tight', system-ui, sans-serif;
  --ff-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ---------- Misc ---------- */
  --border-thin: 1px solid var(--rule);
  --border-hair: 1px solid var(--rule-soft);
  --focus: 2px solid var(--ink);
}

/* ---------- Reset-ish ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--ff-sans);
  font-size: 14px;
  line-height: 1.45;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01", "cv11", "tnum" 0;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
input, select, textarea, button { font: inherit; color: inherit; }
table { border-collapse: collapse; }
::selection { background: var(--ink); color: var(--paper); }

*:focus-visible {
  outline: var(--focus);
  outline-offset: 2px;
}

/* ---------- Type utilities ---------- */
.d-display-1 { font-family: var(--ff-display); font-weight: 900; font-size: 72px; line-height: 0.95; letter-spacing: -0.035em; text-wrap: balance; }
.d-display-2 { font-family: var(--ff-display); font-weight: 800; font-size: 48px; line-height: 1.02; letter-spacing: -0.025em; text-wrap: balance; }
.d-display-3 { font-family: var(--ff-display); font-weight: 700; font-style: italic; font-size: 36px; line-height: 1.08; letter-spacing: -0.02em; }
.t-h1      { font-weight: 700; font-size: 28px; line-height: 1.15; letter-spacing: -0.018em; }
.t-h2      { font-weight: 700; font-size: 20px; line-height: 1.25; letter-spacing: -0.012em; }
.t-h3      { font-weight: 600; font-size: 16px; line-height: 1.3; letter-spacing: -0.005em; }
.t-body    { font-size: 14px; line-height: 1.5; }
.t-body-lg { font-size: 15px; line-height: 1.55; }
.t-small   { font-size: 13px; line-height: 1.45; color: var(--ink-2); }
.t-micro   { font-size: 12px; line-height: 1.35; color: var(--muted); }
.t-caption {
  font-size: 11px;
  line-height: 1.2;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
}
.t-mono    { font-family: var(--ff-mono); font-size: 12.5px; letter-spacing: -0.01em; }
.t-tnum    { font-variant-numeric: tabular-nums; }
.t-muted   { color: var(--muted); }
.t-ink-2   { color: var(--ink-2); }
.t-balance { text-wrap: balance; }
.t-pretty  { text-wrap: pretty; }

/* ---------- App shell ---------- */
.app {
  display: grid;
  grid-template-columns: 240px 1fr;
  min-height: 100vh;
  background: var(--paper);
}
.sidebar {
  background: var(--ink);
  color: var(--paper);
  padding: var(--s-5) 0 var(--s-4);
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
}
.sidebar-brand {
  padding: 0 var(--s-5);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
}
.sidebar-brand .mark {
  font-family: var(--ff-display);
  font-weight: 900;
  font-size: 26px;
  letter-spacing: -0.03em;
  color: var(--paper);
}
.sidebar-brand .version {
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--muted-2);
}
.sidebar-location {
  margin: 0 var(--s-4);
  padding: var(--s-3);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--r-2);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-3);
  cursor: pointer;
}
.sidebar-location:hover { border-color: rgba(255,255,255,0.25); }
.sidebar-location .loc-label { font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted-2); }
.sidebar-location .loc-value { font-weight: 600; font-size: 13px; color: var(--paper); }
.sidebar-location .loc-caret { color: var(--muted-2); font-size: 10px; }

.nav-section {
  display: flex; flex-direction: column; gap: 1px;
  padding: 0 var(--s-3);
}
.nav-section + .nav-section { margin-top: var(--s-4); }
.nav-section-label {
  padding: 0 var(--s-2) var(--s-1);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted-2);
}
.nav-item {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: 7px var(--s-3);
  border-radius: var(--r-2);
  color: rgba(243, 235, 213, 0.78);
  font-size: 13px;
  font-weight: 500;
  transition: background 120ms, color 120ms;
}
.nav-item:hover { background: rgba(255,255,255,0.05); color: var(--paper); }
.nav-item[aria-current="page"] {
  background: var(--paper);
  color: var(--ink);
}
.nav-item .nav-icon { width: 16px; height: 16px; opacity: 0.75; }
.nav-item[aria-current="page"] .nav-icon { opacity: 1; }
.nav-item .nav-badge {
  margin-left: auto;
  font-family: var(--ff-mono);
  font-size: 10px;
  background: rgba(255,255,255,0.08);
  padding: 2px 6px;
  border-radius: var(--r-1);
  color: rgba(243, 235, 213, 0.9);
}
.nav-item[aria-current="page"] .nav-badge { background: var(--ink); color: var(--paper); }

.sidebar-footer {
  margin-top: auto;
  padding: var(--s-4) var(--s-5);
  border-top: 1px solid rgba(255,255,255,0.08);
  display: flex; align-items: center; gap: var(--s-3);
}
.sidebar-footer .avatar {
  width: 30px; height: 30px; border-radius: 999px;
  background: var(--accent); color: var(--accent-ink);
  display: grid; place-items: center;
  font-weight: 700; font-size: 11px; letter-spacing: 0.05em;
}
.sidebar-footer .who { font-size: 12.5px; line-height: 1.2; }
.sidebar-footer .who b { color: var(--paper); font-weight: 600; }
.sidebar-footer .who span { color: var(--muted-2); font-size: 11px; }

/* ---------- Main column ---------- */
.main { display: flex; flex-direction: column; min-width: 0; }
.topbar {
  height: 56px;
  padding: 0 var(--s-6);
  display: flex; align-items: center; gap: var(--s-5);
  border-bottom: var(--border-thin);
  background: var(--paper);
  position: sticky; top: 0; z-index: 10;
}
.topbar .breadcrumb { font-size: 12px; color: var(--muted); display: flex; gap: var(--s-2); }
.topbar .breadcrumb b { color: var(--ink); font-weight: 500; }
.topbar .search {
  margin-left: auto;
  display: flex; align-items: center; gap: var(--s-2);
  padding: 6px var(--s-3);
  border: var(--border-thin);
  border-radius: var(--r-2);
  width: 320px;
  color: var(--muted);
  background: var(--surface);
  cursor: text;
}
.topbar .search input {
  border: 0; background: transparent; outline: none;
  flex: 1; font-size: 13px; color: var(--ink);
}
.topbar .search .kbd {
  font-family: var(--ff-mono); font-size: 10px;
  padding: 2px 5px; border: 1px solid var(--rule); border-radius: 2px;
  color: var(--muted);
}
.topbar .action { display: flex; gap: var(--s-2); }

.page {
  padding: var(--s-7) var(--s-6) var(--s-8);
  max-width: 1440px;
  width: 100%;
}
.page-header {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: var(--s-5);
  padding-bottom: var(--s-5);
  border-bottom: var(--border-thin);
  margin-bottom: var(--s-6);
}
.page-header .kicker {
  font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--muted); margin-bottom: var(--s-2);
  display: flex; align-items: center; gap: var(--s-2);
}
.page-header h1 {
  margin: 0;
  font-family: var(--ff-display);
  font-weight: 800;
  font-size: 44px;
  line-height: 1.02;
  letter-spacing: -0.028em;
  color: var(--ink);
}
.page-header .dek {
  margin-top: var(--s-3);
  font-size: 15px;
  max-width: 64ch;
  color: var(--ink-2);
  text-wrap: pretty;
}
.page-header .actions { display: flex; gap: var(--s-2); align-items: center; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  border-radius: var(--r-2);
  font-size: 13px; font-weight: 500;
  transition: background 120ms, color 120ms, border-color 120ms;
}
.btn:hover { background: #000; }
.btn.ghost { background: transparent; color: var(--ink); border-color: var(--rule); }
.btn.ghost:hover { border-color: var(--ink); }
.btn.quiet { background: transparent; color: var(--ink-2); border-color: transparent; }
.btn.quiet:hover { background: var(--paper-2); color: var(--ink); }
.btn.danger { background: transparent; color: var(--danger); border-color: var(--danger-soft); }
.btn.danger:hover { background: var(--danger-soft); }
.btn.sm { padding: 4px 9px; font-size: 12px; }
.btn.lg { padding: 10px 16px; font-size: 14px; }
.btn .k {
  font-family: var(--ff-mono); font-size: 10px; color: var(--muted-2);
  border: 1px solid rgba(255,255,255,0.2); padding: 1px 4px; border-radius: 2px;
  margin-left: 4px;
}

/* ---------- Cards (restrained) ---------- */
.card {
  background: var(--surface);
  border: var(--border-thin);
  border-radius: var(--r-3);
}
.card-hd {
  padding: var(--s-4) var(--s-5);
  border-bottom: var(--border-hair);
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
}
.card-hd h3 { margin: 0; font-size: 13px; font-weight: 600; letter-spacing: -0.005em; }
.card-hd .card-hd-meta { font-size: 11px; color: var(--muted); letter-spacing: 0.06em; text-transform: uppercase; }
.card-bd { padding: var(--s-5); }
.card-ft {
  padding: var(--s-3) var(--s-5);
  border-top: var(--border-hair);
  display: flex; justify-content: space-between; align-items: center;
  color: var(--muted); font-size: 12px;
}

/* ---------- Tables ---------- */
.table-wrap { overflow: auto; }
table.data {
  width: 100%;
  font-variant-numeric: tabular-nums;
  font-size: 13px;
}
table.data thead th {
  position: sticky; top: 0;
  background: var(--paper);
  text-align: left;
  padding: 8px var(--s-4) 8px 0;
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  font-weight: 600; color: var(--muted);
  border-bottom: var(--border-thin);
}
table.data tbody td {
  padding: 12px var(--s-4) 12px 0;
  border-bottom: var(--border-hair);
  vertical-align: top;
}
table.data tbody tr:hover { background: var(--paper-2); }
table.data td:first-child, table.data th:first-child { padding-left: var(--s-5); }
table.data td:last-child, table.data th:last-child { padding-right: var(--s-5); }
table.data td.num, table.data th.num { text-align: right; }
table.data td.mono { font-family: var(--ff-mono); font-size: 12.5px; }
table.data tr.selected { background: var(--accent-soft); }
table.data .row-id { color: var(--muted); font-size: 11px; }
table.data .row-primary { font-weight: 600; }
table.data .row-secondary { color: var(--ink-2); font-size: 12.5px; }

/* ---------- Tags / Pills ---------- */
.pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 8px;
  font-size: 11px; font-weight: 500; letter-spacing: 0.02em;
  border-radius: 999px;
  border: 1px solid currentColor;
  background: transparent;
  text-transform: none;
  line-height: 1.6;
}
.pill::before {
  content: ""; width: 5px; height: 5px; border-radius: 999px;
  background: currentColor;
}
.pill.solid { background: currentColor; }
.pill.solid::before { background: var(--paper); }
.pill.ok     { color: var(--ok); }
.pill.warn   { color: var(--warn); }
.pill.danger { color: var(--danger); }
.pill.info   { color: var(--info); }
.pill.muted  { color: var(--muted); }

.tag {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 1px 6px;
  font-size: 10.5px; font-weight: 500; letter-spacing: 0.03em;
  border-radius: var(--r-1);
  background: var(--paper-2); color: var(--ink-2);
  border: var(--border-hair);
  text-transform: uppercase;
}

/* ---------- Inputs ---------- */
.field {
  display: flex; flex-direction: column; gap: 6px;
}
.field label {
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted); font-weight: 500;
}
.input, .select, .textarea {
  padding: 8px var(--s-3);
  border: var(--border-thin);
  border-radius: var(--r-2);
  background: var(--surface);
  font-size: 14px;
  color: var(--ink);
  min-height: 36px;
}
.input:focus, .select:focus, .textarea:focus {
  border-color: var(--ink);
  outline: none;
  box-shadow: 0 0 0 3px rgba(13,14,12,0.08);
}
.input.lg, .select.lg { min-height: 44px; font-size: 15px; }
.textarea { min-height: 72px; resize: vertical; }
.input-group { display: flex; align-items: stretch; }
.input-group > * + * { margin-left: -1px; border-top-left-radius: 0; border-bottom-left-radius: 0; }
.input-group > *:first-child { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.input-group .addon {
  display: flex; align-items: center; padding: 0 var(--s-3);
  border: var(--border-thin); background: var(--paper-2);
  font-size: 12px; color: var(--muted);
  border-radius: var(--r-2);
}
.checkbox { width: 15px; height: 15px; accent-color: var(--ink); }

/* ---------- Layout helpers ---------- */
.stack { display: flex; flex-direction: column; }
.stack-1 { gap: var(--s-1); } .stack-2 { gap: var(--s-2); } .stack-3 { gap: var(--s-3); }
.stack-4 { gap: var(--s-4); } .stack-5 { gap: var(--s-5); } .stack-6 { gap: var(--s-6); }
.row { display: flex; }
.row-1 { gap: var(--s-1); } .row-2 { gap: var(--s-2); } .row-3 { gap: var(--s-3); }
.row-4 { gap: var(--s-4); } .row-5 { gap: var(--s-5); } .row-6 { gap: var(--s-6); }
.row.align-center { align-items: center; }
.row.align-baseline { align-items: baseline; }
.row.space-between { justify-content: space-between; }
.row.wrap { flex-wrap: wrap; }
.grow { flex: 1; min-width: 0; }
.grid { display: grid; }

/* ---------- Rule ---------- */
hr.rule { border: 0; border-top: var(--border-thin); margin: var(--s-6) 0; }
hr.rule.soft { border-top: var(--border-hair); }

/* ---------- Metric block ---------- */
.metric { display: flex; flex-direction: column; gap: 4px; }
.metric .k { font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); font-weight: 500; }
.metric .v {
  font-family: var(--ff-display); font-weight: 800;
  font-size: 34px; line-height: 1.05; letter-spacing: -0.025em;
  color: var(--ink);
  font-variant-numeric: tabular-nums lining-nums;
}
.metric .v .unit { font-size: 16px; font-weight: 600; color: var(--muted); letter-spacing: 0; margin-right: 4px; }
.metric .d { font-size: 11.5px; color: var(--muted); display: flex; align-items: center; gap: 4px; }
.metric .d.up { color: var(--ok); }
.metric .d.down { color: var(--danger); }

/* ---------- Placeholder imagery ---------- */
.ph {
  background:
    repeating-linear-gradient(135deg, var(--paper-2) 0 8px, var(--rule-soft) 8px 16px);
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-2);
  font-family: var(--ff-mono); font-size: 10.5px;
  letter-spacing: 0.08em; text-transform: uppercase;
  border: var(--border-hair);
}
.ph .label {
  background: var(--surface);
  padding: 3px 7px;
  border: 1px solid currentColor;
  color: var(--ink);
}

/* ---------- Kicker (section header pattern) ---------- */
.kicker-hd {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s-3); padding-bottom: var(--s-3);
  border-bottom: var(--border-thin);
  margin-bottom: var(--s-4);
}
.kicker-hd .left { display: flex; align-items: baseline; gap: var(--s-3); }
.kicker-hd .num {
  font-family: var(--ff-mono); font-size: 11px; color: var(--muted);
  letter-spacing: 0.1em;
}
.kicker-hd h2 {
  margin: 0;
  font-family: var(--ff-display); font-weight: 700; font-style: italic;
  font-size: 22px; letter-spacing: -0.015em;
}
.kicker-hd .right { font-size: 12px; color: var(--muted); }

/* ---------- Stat strip (used below page headers) ---------- */
.stat-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: var(--border-thin);
  border-radius: var(--r-3);
  background: var(--surface);
  overflow: hidden;
}
.stat-strip > .cell {
  padding: var(--s-4) var(--s-5);
  border-right: var(--border-hair);
}
.stat-strip > .cell:last-child { border-right: 0; }

/* ---------- Drawer / Sheet ---------- */
.sheet-overlay {
  position: fixed; inset: 0; background: rgba(13,14,12,0.35);
  z-index: 50;
}
.sheet {
  position: fixed; right: 0; top: 0; height: 100vh;
  width: min(640px, 96vw);
  background: var(--paper);
  border-left: var(--border-thin);
  z-index: 60;
  display: flex; flex-direction: column;
}
.sheet-hd {
  padding: var(--s-5) var(--s-5) var(--s-4);
  border-bottom: var(--border-thin);
  display: flex; justify-content: space-between; align-items: start; gap: var(--s-3);
}
.sheet-bd { padding: var(--s-5); overflow-y: auto; flex: 1; }
.sheet-ft {
  padding: var(--s-4) var(--s-5);
  border-top: var(--border-thin);
  display: flex; justify-content: space-between; gap: var(--s-3);
  background: var(--surface);
}

/* ---------- Tablet / phone optimisation for ops ---------- */
.touch-btn {
  min-height: 52px;
  padding: 0 var(--s-5);
  border-radius: var(--r-3);
  font-size: 16px; font-weight: 600;
}

/* ---------- Print-safe utilities ---------- */
@media print {
  .sidebar, .topbar, .sheet, .sheet-overlay { display: none !important; }
  body { background: white; }
  .page { padding: 0; max-width: none; }
}