/* ============================================================
   OFFICE — neo-brutalist design system + manga pixel pictograms
   Shared by all pages. Single source of truth for tokens & components.
   ============================================================ */

/* ====== TOKENS ====== */
:root {
  --bg:          #FFFFFF;
  --paper:       #FAFAF7;
  --soft:        #F4F2EC;
  --softer:      #F7F5EE;
  --ink:         #000000;
  --ink-2:       #444441;
  --ink-3:       #6B6A66;
  --hint:        #9B9A95;
  --line:        #E5E2D8;

  /* flow accent colors */
  --strategy:    #534AB7;
  --product:     #185FA5;
  --creative:    #D85A30;
  --content:     #3B6D11;
  --ops:         #6B6A66;

  /* status colors */
  --active:      #97C459;
  --review:      #FAC775;
  --blocked:     #A32D2D;
  --idle:        #D3D1C7;
  --success:     #1D9E75;
  --info:        #185FA5;

  --shadow:      6px 6px 0 var(--ink);
  --shadow-sm:   3px 3px 0 var(--ink);
  --shadow-tap:  2px 2px 0 var(--ink);

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
}

/* ====== RESET ====== */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", sans-serif;
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; }

/* ====== TYPOGRAPHY ====== */
.mono { font-family: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace; }
.italic { font-style: italic; }
.upper { text-transform: uppercase; letter-spacing: 0.08em; font-weight: 500; }
.micro { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 500; }
.tiny  { font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 500; }
.dim   { color: var(--ink-3); }

h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -0.2px; }

/* ====== PIXEL RENDERING ====== */
svg { shape-rendering: crispEdges; image-rendering: pixelated; }
svg.smooth { shape-rendering: auto; image-rendering: auto; }

/* ====== APP SHELL ====== */
.app { max-width: 1280px; margin: 0 auto; }

/* ----- top bar ----- */
.topbar {
  background: var(--bg);
  border-bottom: 4px solid var(--ink);
  padding: 14px 24px;
  display: flex; align-items: center; gap: 16px;
  position: sticky; top: 0; z-index: 30;
}
.logo {
  display: inline-flex; align-items: stretch;
  border: 2px solid var(--ink);
  font-size: 19px; font-weight: 800;
  font-style: italic; letter-spacing: -0.6px;
  line-height: 1;
  overflow: hidden;
}
.logo .logo-icon {
  background: #FAC775;
  border-right: 2px solid var(--ink);
  padding: 3px 4px;
  display: flex; align-items: center; justify-content: center;
}
.logo .logo-icon svg { display: block; }
.logo .logo-text {
  background: var(--ink); color: var(--bg);
  padding: 6px 12px 6px 12px;
  display: flex; align-items: center;
}
.logo-tag { color: var(--ink-3); font-size: 12px; }
.crumb {
  color: var(--ink-3); font-size: 12px;
  text-transform: uppercase; letter-spacing: 0.06em; font-weight: 500;
}
.crumb b { color: var(--ink); font-weight: 600; }

.search {
  flex: 1; max-width: 420px; margin-left: auto;
  background: var(--bg); border: 2px solid var(--ink);
  padding: 6px 10px; display: flex; align-items: center; gap: 8px;
  font-size: 13px;
}
.search input {
  border: 0; outline: 0; background: transparent;
  flex: 1; font-size: 13px; font-family: inherit;
}
.kbd {
  border: 1.5px solid var(--ink); padding: 1px 5px;
  font-size: 11px; font-family: ui-monospace, monospace;
}

.syspill {
  border: 2px solid var(--ink); padding: 4px 10px;
  display: flex; align-items: center; gap: 8px;
  font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.06em;
  cursor: pointer; transition: transform 0.06s ease;
}
.syspill:hover { transform: translate(-2px, -2px); box-shadow: var(--shadow-tap); }
.syspill .led {
  width: 10px; height: 10px; background: var(--content);
  border: 1.5px solid var(--ink);
}
.syspill.warn .led { background: var(--review); }
.syspill.bad .led { background: var(--blocked); }

.me {
  width: 36px; height: 36px;
  border: 2px solid var(--ink);
  display: flex; align-items: center; justify-content: center;
  background: #FAC775;
}

/* ----- tab nav ----- */
.tabs {
  background: var(--bg);
  border-bottom: 2px solid var(--ink);
  padding: 6px 24px;
  display: flex; align-items: center; gap: 4px;
  overflow-x: auto;
}
.tab {
  padding: 8px 14px; font-size: 11px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--ink-3); cursor: pointer;
  border: 2px solid transparent;
  white-space: nowrap;
}
.tab:hover { color: var(--ink); }
.tab.active { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.tabs .sep { width: 0; height: 22px; border-left: 2px solid var(--ink); margin: 0 10px; }

/* ----- filter strip ----- */
.filters {
  padding: 20px 24px 18px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
}
.sync {
  font-family: ui-monospace, monospace; font-size: 11px; color: var(--ink-3);
  font-weight: 500; letter-spacing: 0.04em;
  margin-right: 4px;
}
.chip {
  background: var(--bg); border: 2px solid var(--ink);
  padding: 7px 12px; cursor: pointer;
  font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.06em;
  display: inline-flex; align-items: center; gap: 8px;
  transition: transform 0.06s ease;
}
.chip:hover { transform: translate(-2px, -2px); box-shadow: var(--shadow-tap); }
.chip:active { transform: translate(0, 0); box-shadow: none; }
.chip.active { background: var(--ink); color: var(--bg); }
.chip .swatch { width: 10px; height: 18px; }
.chip .swatch.active   { background: var(--active); }
.chip .swatch.blocked  { background: var(--blocked); }
.chip .swatch.review   { background: var(--review); }
.chip .swatch.idle     { background: var(--idle); }
.chip-spacer { flex: 1; }

/* ====== BUTTONS ====== */
.btn {
  padding: 8px 12px; font-size: 11px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.08em;
  border: 2px solid var(--ink);
  background: var(--bg); color: var(--ink); cursor: pointer;
  font-family: inherit;
  transition: transform 0.06s ease;
  display: inline-flex; align-items: center; gap: 6px;
}
.btn:hover { transform: translate(-2px, -2px); box-shadow: var(--shadow-tap); }
.btn:active { transform: translate(0,0); box-shadow: none; }
.btn.primary { background: var(--ink); color: var(--bg); }
.btn.danger  { background: var(--blocked); color: var(--bg); }
.btn.lg { padding: 12px 18px; font-size: 12px; }
.btn svg { width: 14px; height: 14px; }

/* ====== STATUS FLAGS ====== */
.flag {
  border: 2px solid var(--ink);
  padding: 2px 8px;
  font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 500;
  display: inline-block;
}
.flag.active   { background: var(--active); color: var(--ink); }
.flag.review   { background: var(--review); color: var(--ink); }
.flag.blocked  { background: var(--blocked); color: var(--bg); }
.flag.idle     { background: var(--idle);    color: var(--ink-2); border-color: var(--ink-3); }
.flag.done     { background: var(--ink); color: var(--bg); }
.flag.intake   { background: var(--bg); color: var(--ink); }

/* ====== PROJECT CARD GRID + CARD ====== */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(440px, 1fr));
  gap: 28px;
  padding: 16px 24px 32px;
}

.card {
  background: var(--bg);
  border: 4px solid var(--ink);
  display: flex; flex-direction: column;
  transition: transform 0.1s ease;
}
.card:hover { transform: translate(-2px, -2px); }
.card.idle { border-style: dashed; border-color: var(--ink-3); opacity: 0.85; }
.card.idle:hover { transform: none; }

.stripe { height: 10px; background: var(--ops); }
.stripe.strategy  { background: var(--strategy); }
.stripe.product   { background: var(--product); }
.stripe.creative  { background: var(--creative); }
.stripe.content   { background: var(--content); }
.stripe.ops       { background: var(--ops); }

.card-head {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 18px 0;
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 500;
}
.card-head .flow { color: var(--ink); }
.card-head .proj { color: var(--ink-3); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card-head .flag { margin-left: auto; }

.card-body {
  padding: 14px 18px 0;
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 16px;
  align-items: start;
}
.scene {
  width: 80px; height: 80px;
  border: 2px solid var(--ink);
  background: var(--soft);
  display: flex; align-items: center; justify-content: center;
}
.scene svg { width: 64px; height: 64px; }
.card.idle .scene { border-color: var(--ink-3); background: var(--paper); }
.card.idle .scene svg { opacity: 0.55; }

.titlewrap h2 {
  font-size: 19px; font-weight: 600; line-height: 1.2;
  margin: 0 0 6px;
}
.titlewrap .runline { font-size: 12px; color: var(--ink-3); }
.titlewrap .runline .runid { color: var(--ink-2); font-weight: 500; }

/* ====== PROGRESS ====== */
.progress {
  margin: 14px 18px 0;
  height: 14px;
  border: 2px solid var(--ink);
  position: relative; background: var(--bg);
}
.progress .fill { height: 100%; background: var(--ink); }
.card.blocked .progress .fill { background: var(--blocked); }
.card.idle .progress { border-color: var(--ink-3); }
.card.idle .progress .fill { background: var(--ink-3); }
.progress .ticks {
  position: absolute; inset: 0; display: flex; justify-content: space-between;
  pointer-events: none;
}
.progress .tick { width: 2px; background: var(--bg); }

/* ====== CADENCE (serial / long-running) ====== */
.cadence { margin: 14px 18px 0; }
.cadence-row { display: flex; gap: 2px; align-items: center; }
.cadence-cell {
  width: 10px; height: 10px;
  border: 1px solid var(--ink);
  background: var(--bg);
}
.cadence-cell.shipped { background: var(--ink); }
.cadence-cell.today {
  box-shadow: 0 0 0 2px var(--creative);
  position: relative; z-index: 1;
}
.cadence-meta {
  display: flex; justify-content: space-between;
  margin-top: 6px;
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--ink-3); font-weight: 500;
}
.cadence-counter {
  margin-top: 6px; font-size: 12px; color: var(--ink-2);
}
.cadence-counter b { color: var(--ink); font-weight: 600; }

/* ====== PANELS (latest work, blocker, etc.) ====== */
.panel {
  margin: 16px 18px 0;
  border: 2px solid var(--ink);
  position: relative;
}
.panel-tag {
  background: var(--ink); color: var(--bg);
  padding: 3px 10px; display: inline-block;
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 500;
}
.panel-body {
  padding: 12px 14px;
  display: grid; grid-template-columns: 56px 1fr auto; gap: 14px; align-items: center;
}
.filechip {
  width: 56px; height: 44px;
  border: 2px solid var(--ink);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 600; letter-spacing: 0.04em;
}
.filechip.png  { background: #FAECE7; color: #993C1D; }
.filechip.md   { background: #E6F1FB; color: #185FA5; }
.filechip.docx { background: #EEEDFE; color: #3C3489; }
.filechip.xlsx { background: #EAF3DE; color: #3B6D11; }
.filechip.pdf  { background: #FCEBEB; color: #A32D2D; }
.filechip.fig  { background: #F4C0D1; color: #72243E; }
.filechip.zip  { background: #FAEEDA; color: #854F0B; }

.filechip-multi { display: flex; gap: 4px; }
.filechip-multi .filechip { width: 36px; height: 44px; font-size: 10px; }

.file-meta { min-width: 0; }
.file-meta .name { font-size: 14px; font-weight: 600; letter-spacing: -0.1px; word-break: break-word; }
.file-meta .sub  { font-size: 12px; color: var(--ink-3); margin-top: 2px; }

.actions { display: flex; gap: 8px; }

/* blocker panel */
.panel.blocker { border-color: var(--blocked); border-width: 3px; }
.panel.blocker .panel-tag { background: var(--blocked); color: var(--bg); }
.panel.blocker .panel-body { display: block; }
.panel.blocker .blocker-text { font-size: 14px; font-weight: 600; margin-bottom: 4px; }
.panel.blocker .blocker-sub { font-size: 12px; color: var(--ink-3); margin-bottom: 12px; }
.panel.blocker .blocker-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.panel.blocker .ago { font-size: 11px; font-weight: 500; color: var(--blocked); }

/* decision panel */
.panel.decision { border-color: var(--review); border-width: 3px; }
.panel.decision .panel-tag { background: var(--review); color: var(--ink); }
.panel.decision .panel-body { display: block; }
.panel.decision .decision-text { font-size: 14px; font-weight: 600; margin-bottom: 6px; }
.panel.decision .decision-sub { font-size: 12px; color: var(--ink-3); margin-bottom: 12px; }
.panel.decision .decision-row { display: flex; gap: 8px; flex-wrap: wrap; }

/* idle panel */
.card.idle .panel { border-color: var(--ink-3); border-style: dashed; }
.card.idle .panel-tag { background: var(--ink-3); }
.card.idle .filechip { border-color: var(--ink-3); background: var(--paper); color: var(--ink-3); }
.card.idle .file-meta .name { color: var(--ink-2); }
.card.idle .btn { border-color: var(--ink-3); color: var(--ink-3); }

/* ====== CARD FOOTER ====== */
.card-foot {
  margin: 14px 0 0;
  padding: 12px 18px;
  border-top: 1.5px solid var(--ink);
  display: flex; align-items: center; gap: 10px;
  font-size: 13px;
}
.card.idle .card-foot { border-top-color: var(--ink-3); color: var(--ink-3); }
.card.idle .card-foot .next { color: var(--ink-3); }
.avatar {
  width: 26px; height: 26px;
  border: 2px solid var(--ink);
  display: flex; align-items: center; justify-content: center;
  background: #FAC775;
  flex: none;
}
.avatar.sm { width: 20px; height: 20px; }
.avatar.lg { width: 36px; height: 36px; }
.card.idle .avatar { background: var(--idle); border-color: var(--ink-3); }
.who { font-weight: 600; }
.arrow { color: var(--ink-3); }
.next { flex: 1; min-width: 0; }
.next .strong { font-weight: 600; }
.next.danger { color: var(--blocked); font-weight: 600; }
.next.review { color: #854F0B; font-weight: 600; }
.open {
  margin-left: auto;
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 500;
  color: var(--ink); cursor: pointer;
}
.open:hover { background: var(--ink); color: var(--bg); padding: 2px 6px; margin: -2px -6px -2px auto; }

/* ====== LOAD MORE / SEE ALL ====== */
.loadmore {
  margin: 4px 24px 32px;
  border: 3px solid var(--ink); background: var(--bg);
  padding: 14px;
  text-align: center; cursor: pointer;
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 500;
  box-shadow: var(--shadow-sm);
  transition: transform 0.06s ease;
}
.loadmore:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--ink); }

/* ====== FOOTER STRIP ====== */
.footer {
  border-top: 2px solid var(--ink);
  padding: 14px 24px 22px;
  display: flex; justify-content: space-between;
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-3); font-weight: 500;
}

/* ============================================================
   PAGE-SPECIFIC HELPERS
   ============================================================ */

/* ====== HOME blocks ====== */
.home-block {
  border: 4px solid var(--ink);
  background: var(--bg);
  margin: 0 24px 24px;
  box-shadow: var(--shadow);
}
.home-block-head {
  border-bottom: 2px solid var(--ink);
  padding: 14px 18px;
  display: flex; align-items: center; gap: 12px;
}
.home-block-head .pin {
  width: 16px; height: 16px;
}
.home-block-head h2 {
  font-size: 18px; font-weight: 600; flex: 1;
}
.home-block-head .count { font-size: 11px; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 500; }
.home-block-head .seeall { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 500; cursor: pointer; }
.home-block-head .seeall:hover { background: var(--ink); color: var(--bg); padding: 2px 6px; margin: -2px -6px; }

/* compact item row used in home blocks + queue + runs list */
.itemrow {
  display: grid;
  grid-template-columns: auto 96px 1fr auto auto;
  gap: 14px;
  align-items: center;
  padding: 12px 18px;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  transition: background 0.06s ease;
}
.itemrow:last-child { border-bottom: 0; }
.itemrow:hover { background: var(--soft); }
.itemrow .scene-sm {
  width: 36px; height: 36px;
  border: 2px solid var(--ink); background: var(--soft);
  display: flex; align-items: center; justify-content: center;
}
.itemrow .scene-sm svg { width: 28px; height: 28px; }
.itemrow .row-flow {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 500;
  border: 2px solid var(--ink); padding: 2px 6px; text-align: center;
}
.itemrow .row-flow.strategy  { background: var(--strategy); color: #FFF; border-color: var(--strategy); }
.itemrow .row-flow.product   { background: var(--product); color: #FFF; border-color: var(--product); }
.itemrow .row-flow.creative  { background: var(--creative); color: #FFF; border-color: var(--creative); }
.itemrow .row-flow.content   { background: var(--content); color: #FFF; border-color: var(--content); }
.itemrow .row-flow.ops       { background: var(--ops); color: #FFF; border-color: var(--ops); }
.itemrow .row-title { font-size: 14px; font-weight: 600; line-height: 1.3; }
.itemrow .row-sub { font-size: 12px; color: var(--ink-3); margin-top: 2px; }
.itemrow .row-sub.danger { color: var(--blocked); font-weight: 500; }
.itemrow .row-sub.review { color: #854F0B; font-weight: 500; }
.itemrow .row-time {
  font-family: ui-monospace, monospace; font-size: 11px; color: var(--ink-3);
  white-space: nowrap;
}

/* ====== DETAIL PAGE — summary bar + sections ====== */
.summary-bar {
  border: 4px solid var(--ink);
  background: var(--bg);
  margin: 24px;
  box-shadow: var(--shadow);
}
.summary-bar .summary-stripe { height: 10px; }
.summary-bar .summary-stripe.strategy  { background: var(--strategy); }
.summary-bar .summary-stripe.product   { background: var(--product); }
.summary-bar .summary-stripe.creative  { background: var(--creative); }
.summary-bar .summary-stripe.content   { background: var(--content); }
.summary-bar .summary-stripe.ops       { background: var(--ops); }
.summary-bar .summary-body {
  padding: 24px 28px;
  display: grid; grid-template-columns: 96px 1fr auto; gap: 24px; align-items: start;
}
.summary-bar .scene {
  width: 96px; height: 96px;
}
.summary-bar .scene svg { width: 78px; height: 78px; }
.summary-bar .summary-meta { min-width: 0; }
.summary-bar .summary-meta .crumb-row {
  display: flex; gap: 10px; align-items: center;
  margin-bottom: 8px;
}
.summary-bar .summary-meta h1 {
  font-size: 32px; font-weight: 600; line-height: 1.1; letter-spacing: -0.6px;
  margin: 0 0 8px;
}
.summary-bar .summary-meta .stats {
  display: flex; gap: 18px; font-size: 13px; color: var(--ink-3); flex-wrap: wrap;
}
.summary-bar .summary-meta .stats b { color: var(--ink); font-weight: 600; }
.summary-bar .summary-actions {
  display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end;
}

/* sub-tabs (project detail) */
.subtabs {
  border-bottom: 2px solid var(--ink);
  padding: 0 24px;
  display: flex; gap: 4px;
}
.subtab {
  padding: 14px 16px;
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 500;
  color: var(--ink-3); cursor: pointer;
  border-bottom: 4px solid transparent;
  margin-bottom: -2px;
}
.subtab:hover { color: var(--ink); }
.subtab.active { color: var(--ink); border-bottom-color: var(--ink); }
.subtab .badge {
  display: inline-block; margin-left: 6px;
  background: var(--ink); color: var(--bg);
  font-size: 10px; padding: 1px 5px; border-radius: 0;
}

/* generic page section */
.section {
  border: 4px solid var(--ink);
  background: var(--bg);
  margin: 0 24px 24px;
  box-shadow: var(--shadow);
}
.section-head {
  border-bottom: 2px solid var(--ink);
  padding: 14px 18px;
  display: flex; align-items: center; gap: 12px;
}
.section-head h2 {
  font-size: 16px; font-weight: 600; flex: 1;
}
.section-head .meta { font-size: 11px; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 500; }
.section-head .seeall { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 500; cursor: pointer; }
.section-body { padding: 18px; }
.section-body.flush { padding: 0; }

.two-col {
  display: grid; grid-template-columns: 1fr 320px; gap: 24px;
  margin: 0 24px 24px;
}
.two-col .col-main { display: flex; flex-direction: column; gap: 24px; }
.two-col .col-side { display: flex; flex-direction: column; gap: 24px; }
.two-col .section { margin: 0; }

/* ====== TIMELINE ====== */
.timeline { padding: 6px 0; }
.tl-event {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  gap: 12px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--line);
}
.tl-event:last-child { border-bottom: 0; }
.tl-event .dot {
  width: 12px; height: 12px;
  border: 2px solid var(--ink); background: var(--bg);
  margin-top: 4px;
}
.tl-event .dot.shipped { background: var(--ink); }
.tl-event .dot.review  { background: var(--review); }
.tl-event .dot.blocked { background: var(--blocked); }
.tl-event .dot.approved { background: var(--success); }
.tl-event .body { min-width: 0; }
.tl-event .body .head { font-size: 13px; }
.tl-event .body .head b { font-weight: 600; }
.tl-event .body .sub  { font-size: 11px; color: var(--ink-3); margin-top: 2px; text-transform: uppercase; letter-spacing: 0.06em; }
.tl-event .when { font-family: ui-monospace, monospace; font-size: 11px; color: var(--ink-3); white-space: nowrap; padding-top: 1px; }

/* ====== STAGE RAIL (run detail) ====== */
.stage-rail {
  display: flex; align-items: stretch;
  border: 2px solid var(--ink);
  margin: 0 18px;
}
.stage-step {
  flex: 1;
  padding: 12px;
  border-right: 2px solid var(--ink);
  display: flex; flex-direction: column; gap: 4px;
  background: var(--bg);
  font-size: 12px;
}
.stage-step:last-child { border-right: 0; }
.stage-step .num { font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-3); font-weight: 500; }
.stage-step .name { font-weight: 600; font-size: 13px; }
.stage-step.done { background: var(--soft); }
.stage-step.done .name { color: var(--ink-3); text-decoration: line-through; }
.stage-step.current { background: var(--ink); color: var(--bg); }
.stage-step.current .num { color: var(--bg); }

/* ====== METADATA TABLE (sidebar) ====== */
.metalist { display: grid; grid-template-columns: 110px 1fr; gap: 8px 14px; font-size: 13px; }
.metalist dt { color: var(--ink-3); font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 500; padding-top: 2px; }
.metalist dd { margin: 0; font-weight: 500; }

/* ====== FILE BROWSER ====== */
.fb-tree {
  font-family: ui-monospace, monospace; font-size: 12px;
  padding: 18px;
}
.fb-row {
  display: grid; grid-template-columns: 20px 1fr auto auto; gap: 8px;
  padding: 6px 8px; cursor: pointer;
}
.fb-row:hover { background: var(--soft); }
.fb-row.active { background: var(--ink); color: var(--bg); }
.fb-row.active svg { color: var(--bg); }
.fb-row .nm { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fb-row .sz { color: var(--ink-3); font-size: 11px; }
.fb-row.active .sz { color: var(--bg); }
.fb-section-label {
  font-family: -apple-system, sans-serif; font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--ink-3); font-weight: 500; padding: 12px 8px 4px;
}

.fb-preview {
  padding: 24px;
  font-family: ui-monospace, monospace; font-size: 13px;
  background: var(--soft);
  min-height: 320px;
  white-space: pre-wrap;
}

/* ====== KANBAN ====== */
.kanban {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  padding: 0 24px 24px;
}
.kcol {
  border: 4px solid var(--ink);
  background: var(--bg);
  display: flex; flex-direction: column;
  min-height: 400px;
}
.kcol-head {
  border-bottom: 2px solid var(--ink);
  padding: 12px;
  display: flex; align-items: center; gap: 8px;
}
.kcol-head h3 { font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 500; flex: 1; }
.kcol-head .cnt { background: var(--ink); color: var(--bg); padding: 1px 6px; font-size: 10px; font-weight: 500; }
.kcol-body { padding: 12px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.kcard {
  background: var(--bg);
  border: 2px solid var(--ink);
  padding: 10px;
  cursor: pointer;
  transition: transform 0.06s ease;
  font-size: 12px;
}
.kcard:hover { transform: translate(-2px, -2px); box-shadow: var(--shadow-tap); }
.kcard .kflow {
  font-size: 9px; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 500;
  color: var(--ink-3);
}
.kcard .ktitle { font-size: 13px; font-weight: 600; margin: 4px 0; line-height: 1.3; }
.kcard .kfoot { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--ink-3); }
.kcard.review { border-color: var(--review); border-width: 3px; }
.kcard.blocked { border-color: var(--blocked); border-width: 3px; }

/* ====== ORG ====== */
.orgrid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  padding: 16px 24px 24px;
}
.orgcard {
  flex: 0 1 240px;
  background: var(--bg);
  border: 4px solid var(--ink);
  box-shadow: var(--shadow-sm);
  padding: 16px;
  display: flex; flex-direction: column; gap: 8px;
  transition: transform 0.06s ease;
}
.orgcard:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--ink); }
.orgcard .head { display: flex; gap: 12px; align-items: center; }
.orgcard .av { width: 40px; height: 40px; border: 2px solid var(--ink); background: #FAC775; display: flex; align-items: center; justify-content: center; }
.orgcard .nm { font-size: 16px; font-weight: 600; }
.orgcard .role { font-size: 11px; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 500; }
.orgcard .ownsline { font-size: 12px; color: var(--ink-2); }
.orgcard .ownsline b { font-weight: 600; }
.orgcard .stat-row { display: flex; gap: 8px; align-items: center; font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 500; }
.orgcard .stat-row .led { width: 8px; height: 8px; border: 1.5px solid var(--ink); }
.orgcard.idle .led { background: var(--idle); }
.orgcard.active .led { background: var(--active); }
.orgcard.busy .led { background: var(--review); }

/* ====== SYSTEM ====== */
.svc-row {
  display: grid; grid-template-columns: 24px 1fr auto auto auto; gap: 14px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  align-items: center;
  font-size: 13px;
}
.svc-row:last-child { border-bottom: 0; }
.svc-row .led { width: 14px; height: 14px; border: 2px solid var(--ink); }
.svc-row .led.ok { background: var(--success); }
.svc-row .led.warn { background: var(--review); }
.svc-row .led.bad { background: var(--blocked); }
.svc-row .led.idle { background: var(--idle); }
.svc-row .nm { font-weight: 600; }
.svc-row .desc { color: var(--ink-3); font-size: 12px; margin-top: 2px; }
.svc-row .lat { font-family: ui-monospace, monospace; font-size: 12px; color: var(--ink-2); }
.svc-row .uptime { font-family: ui-monospace, monospace; font-size: 11px; color: var(--ink-3); }
.svc-row .when { font-family: ui-monospace, monospace; font-size: 11px; color: var(--ink-3); }

/* ====== ARTIFACT DETAIL ====== */
.artifact-shell {
  margin: 24px;
  border: 4px solid var(--ink);
  background: var(--bg);
  box-shadow: var(--shadow);
}
.artifact-head {
  border-bottom: 2px solid var(--ink);
  padding: 18px 24px;
  display: grid; grid-template-columns: 56px 1fr auto; gap: 16px; align-items: center;
}
.artifact-frame {
  padding: 24px;
  background: var(--soft);
  min-height: 480px;
  display: flex; align-items: center; justify-content: center;
}
.artifact-frame .placeholder {
  background: var(--bg); border: 2px dashed var(--ink-3);
  padding: 64px 48px; text-align: center; color: var(--ink-3);
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 500;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 980px) {
  .two-col { grid-template-columns: 1fr; }
  .kanban { grid-template-columns: repeat(2, 1fr); }
  .summary-bar .summary-body { grid-template-columns: 80px 1fr; gap: 16px; }
}
@media (max-width: 720px) {
  .topbar { flex-wrap: wrap; gap: 10px; padding: 10px 14px; }
  .topbar .logo-tag, .topbar .crumb { display: none; }
  .logo { font-size: 16px; }
  .logo .logo-icon { padding: 2px 4px; }
  .logo .logo-icon svg { width: 18px; height: 18px; }
  .logo .logo-text { padding: 5px 10px; }
  .search { max-width: none; width: 100%; order: 99; }
  .syspill { display: none; }
  .tabs { padding: 4px 14px; gap: 2px; }
  .tab { padding: 6px 10px; font-size: 10px; }
  .filters { padding: 14px 14px 12px; gap: 6px; }
  .chip { padding: 6px 10px; font-size: 10px; }
  .chip .swatch { width: 8px; height: 14px; }
  .chip-spacer { display: none; }
  .sync { width: 100%; order: 50; font-size: 10px; }
  .grid { padding: 12px 14px 24px; gap: 16px; grid-template-columns: 1fr; }
  .card-body { grid-template-columns: 64px 1fr; gap: 12px; padding: 12px 14px 0; }
  .card-head { padding: 12px 14px 0; gap: 8px; font-size: 10px; }
  .scene { width: 64px; height: 64px; }
  .scene svg { width: 52px; height: 52px; }
  .titlewrap h2 { font-size: 17px; }
  .progress, .cadence, .panel, .card-foot { margin-left: 14px; margin-right: 14px; }
  .card-foot { padding: 10px 14px; font-size: 12px; flex-wrap: wrap; }
  .panel-body { grid-template-columns: 48px 1fr; gap: 10px; padding: 10px 12px; }
  .filechip { width: 48px; height: 40px; font-size: 10px; }
  .actions { grid-column: 1 / -1; justify-content: flex-end; flex-wrap: wrap; gap: 6px; }
  .home-block { margin: 0 14px 16px; }
  .home-block-head { padding: 12px 14px; flex-wrap: wrap; }
  .home-block-head h2 { font-size: 16px; flex: 1 1 auto; }
  .summary-bar { margin: 14px; }
  .summary-bar .summary-body { padding: 16px 14px; grid-template-columns: 64px 1fr; gap: 12px; }
  .summary-bar .scene { width: 64px; height: 64px; }
  .summary-bar .scene svg { width: 52px; height: 52px; }
  .summary-bar .summary-meta h1 { font-size: 22px; }
  .summary-bar .summary-actions { grid-column: 1 / -1; justify-content: flex-start; flex-wrap: wrap; }
  .subtabs { padding: 0 14px; overflow-x: auto; }
  .subtab { padding: 12px 12px; font-size: 11px; }
  .section { margin: 0 14px 14px; }
  .section-head { padding: 12px 14px; flex-wrap: wrap; gap: 8px; }
  .section-body { padding: 14px; }
  .itemrow { grid-template-columns: auto 64px 1fr auto; padding: 10px 14px; gap: 10px; }
  .itemrow .row-time { display: none; }
  .stage-rail { flex-direction: column; margin: 0 14px; }
  .stage-step { border-right: 0; border-bottom: 2px solid var(--ink); }
  .stage-step:last-child { border-bottom: 0; }
  .kanban { grid-template-columns: 1fr; padding: 0 14px 14px; gap: 12px; }
  .kcol { min-height: 200px; }
  .orgrid { padding: 14px; gap: 10px; }
  .orgcard { flex: 1 1 calc(50% - 10px); padding: 12px; }
  .svc-row { grid-template-columns: 18px 1fr auto; gap: 10px; padding: 12px 14px; font-size: 12px; }
  .svc-row .lat, .svc-row .uptime { display: none; }
  .footer { padding: 12px 14px 18px; flex-wrap: wrap; gap: 8px; font-size: 10px; }
  .artifact-shell { margin: 14px; }
  .artifact-head { padding: 14px; grid-template-columns: 48px 1fr; }
  .artifact-frame { padding: 14px; min-height: 280px; }
}