/* SIGNER-152: ability & intelligence — library-card-catalog flavor.
   Palette: cream + walnut + ink + punch-card-red. Three project fonts.
   WCAG AA 4.5:1 verified for ink-on-cream (12.4:1) and walnut-on-cream (8.7:1). */

:root {
  --cream:        #f5ecd9;
  --cream-2:      #ede2c4;
  --walnut:       #5a3a26;
  --walnut-2:     #432a1c;
  --ink:          #1a1a1a;
  --ink-2:        #4a4a4a;
  --paper-edge:   #d8c89e;
  --punch-red:    #9a2e2e;
  --font-display: 'Chakra Petch', monospace;
  --font-sans:    'Familjen Grotesk', system-ui, sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body.intelligence-page {
  background:
    repeating-linear-gradient(0deg, transparent 0 31px, rgba(90,58,38,.05) 31px 32px),
    var(--cream);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 14px;
  min-height: 100vh;
  padding: 24px;
}

/* header strip — wood-grain top edge */
.strip {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: baseline; gap: 18px;
  background: var(--walnut);
  color: var(--cream);
  border-top: 3px double var(--cream);
  border-bottom: 3px double var(--cream);
  padding: 12px 20px;
  margin: -24px -24px 24px;
}
.strip-title {
  font-family: var(--font-display); font-size: 18px;
  letter-spacing: .08em;
}
.strip-clock {
  font-family: var(--font-mono); font-size: 12px;
  color: var(--cream-2); margin-left: auto;
}
.strip-stats {
  display: flex; gap: 8px; flex-wrap: wrap;
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: .04em;
}
.strip-stats .stat { color: var(--cream); }
.strip-sep { color: var(--paper-edge); opacity: .6; }

/* cabinet — main column */
.cabinet {
  max-width: 1200px; margin: 0 auto;
  display: flex; flex-direction: column; gap: 16px;
}

/* panels — wooden drawer frames */
.panel {
  background: var(--cream);
  border: 1px solid var(--walnut);
  box-shadow: 2px 2px 0 var(--paper-edge);
  position: relative;
}
.panel summary {
  cursor: pointer;
  padding: 12px 18px;
  background: var(--cream-2);
  border-bottom: 1px solid var(--walnut);
  list-style: none;
  display: flex; align-items: baseline; gap: 16px;
}
.panel summary::-webkit-details-marker { display: none; }
.panel-title {
  font-family: var(--font-display);
  font-size: 16px;
  color: var(--walnut);
  letter-spacing: .06em;
}
.panel-sub {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--ink-2);
}
.panel-body { padding: 16px 18px; position: relative; }

/* fixture corner stamp — punch-card-red on cream, never display:none */
.fixture-stamp {
  position: absolute; top: 6px; right: 8px;
  font-family: var(--font-mono); font-size: 9px;
  font-weight: 500;
  color: var(--punch-red);
  border: 1px solid var(--punch-red);
  padding: 2px 6px;
  letter-spacing: .12em;
  text-transform: uppercase;
  background: var(--cream);
  z-index: 5;
}
.panel[data-mock="false"] .fixture-stamp { display: none; }

/* grids */
.grid-70-30 {
  display: grid; grid-template-columns: 70% 30%; gap: 12px;
}
.bank-row {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
}
@media (max-width: 900px) {
  .grid-70-30 { grid-template-columns: 1fr; }
  .bank-row   { grid-template-columns: 1fr; }
}

/* index cards */
.card {
  background: var(--cream);
  border: 1px dashed var(--walnut);
  padding: 12px;
  min-height: 80px;
}
.card-empty {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--ink-2); margin: 0;
}

/* bank drawers */
.bank-drawer {
  border: 1px solid var(--walnut);
  background: var(--cream);
}
.bank-drawer header {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 8px 12px;
  background: var(--walnut);
  color: var(--cream);
  font-family: var(--font-display); font-size: 14px;
}
.bank-drawer header .count {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--cream-2);
}
.bank-drawer header h3 {
  margin: 0; font-weight: 400; letter-spacing: .06em;
  font-family: var(--font-display); font-size: 14px;
}
.bank-list {
  padding: 8px 12px;
  max-height: 220px; overflow-y: auto;
  display: flex; flex-direction: column; gap: 4px;
}
.bank-card {
  border-bottom: 1px dashed var(--paper-edge);
  padding: 4px 0;
  font-family: var(--font-mono); font-size: 11px;
  color: var(--ink);
  word-break: break-word;
}
.bank-card:last-child { border-bottom: none; }
.bank-drawer footer {
  padding: 6px 12px;
  font-family: var(--font-mono); font-size: 10px;
  color: var(--ink-2);
  border-top: 1px solid var(--paper-edge);
}

/* DE rack — index-card grid */
.de-rack {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
}
.de-card {
  border: 1px solid var(--walnut);
  background: var(--cream);
  padding: 12px;
  font-family: var(--font-mono);
}
.de-card h4 {
  margin: 0 0 6px;
  font-family: var(--font-display); font-size: 15px;
  color: var(--walnut); letter-spacing: .04em;
}
.de-card .family {
  font-size: 10px; color: var(--ink-2);
  text-transform: uppercase; letter-spacing: .08em;
  margin-bottom: 6px;
}
.de-card .tag {
  display: inline-block;
  font-size: 10px; padding: 2px 6px;
  border: 1px solid var(--walnut);
  margin: 2px 2px 0 0;
  color: var(--walnut);
}
.de-card .optimal {
  margin-top: 8px; padding-top: 6px;
  border-top: 1px dashed var(--paper-edge);
  font-size: 10px; color: var(--ink-2);
}
.de-card .optimal li { font-size: 11px; color: var(--ink); }

/* flow table */
.flow-grid {
  width: 100%; border-collapse: collapse;
  font-family: var(--font-mono); font-size: 11px;
}
.flow-grid th {
  text-align: left; padding: 6px 8px;
  border-bottom: 2px solid var(--walnut);
  font-weight: 500; color: var(--walnut);
  text-transform: uppercase; letter-spacing: .06em;
}
.flow-grid td {
  padding: 6px 8px;
  border-bottom: 1px dashed var(--paper-edge);
  color: var(--ink);
}
.flow-kind {
  display: inline-block; padding: 1px 6px;
  font-size: 10px; border: 1px solid var(--walnut);
  color: var(--walnut);
}

/* corrector tree SVG */
#corr-tree-svg-host svg { width: 100%; height: 320px; }
.corr-alive { fill: var(--walnut); }
.corr-dead  { fill: var(--paper-edge); }
.corr-edge  { stroke: var(--walnut-2); stroke-width: 1; }

/* footer */
.page-footer {
  max-width: 1200px; margin: 32px auto 0;
  padding: 12px 0;
  border-top: 1px solid var(--walnut);
  font-family: var(--font-mono); font-size: 11px;
  color: var(--ink-2);
  display: flex; gap: 10px; flex-wrap: wrap;
}
.page-footer a { color: var(--walnut); text-decoration: none; }
.page-footer a:hover { color: var(--punch-red); text-decoration: underline; }

/* SIGNER-159: school panel — card-catalog flavor (NOT Conservatory).
   Burgundy pill on cream so the grade reads as "school"-coded
   without leaving the card-catalog surface. */
.school-row {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink);
  padding: 4px 0;
  border-bottom: 1px dashed var(--paper-edge);
}
.school-row:last-child { border-bottom: none; }
.school-chip {
  display: inline-block;
  font-size: 10px;
  padding: 1px 6px;
  border: 1px solid #6b1f1f;
  color: #6b1f1f;
  background: var(--cream);
  margin: 0 4px;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.school-state {
  font-size: 10px;
  color: var(--ink-2);
  letter-spacing: .04em;
}
.school-ex { color: var(--walnut); }
.kv-row {
  display: flex; justify-content: space-between;
  font-family: var(--font-mono); font-size: 11px;
  padding: 2px 0;
  border-bottom: 1px dashed var(--paper-edge);
}
.kv-row:last-child { border-bottom: none; }