/* watchtower-doctrine.css — EOC Console "Command Doctrine" (pages/doctrine.js).
 * Mirrors watchtower-eap.css: DS tokens only (command-dark palette + DS fonts),
 * Oswald (--label) on every uppercase label per the design-fidelity guard.
 * Layout shape ported from design/watchtower/Watchtower Command Doctrine.dc.html.
 */

.doc-root { background: var(--wt-bg-0); }
.doc-head .doc-src { letter-spacing: 0.04em; }

.doc-body {
  flex: 1;
  overflow-y: auto;
  padding: 0 0 60px;
}
.doc-body .doc-principle,
.doc-body .doc-sechd,
.doc-body .doc-cols,
.doc-body .doc-card,
.doc-body .doc-note,
.doc-body .doc-muster { max-width: 1180px; margin-left: auto; margin-right: auto; }

/* ── principle banner ── */
.doc-principle {
  margin: 24px 30px 0;
  padding: 20px 24px;
  border: 1px solid color-mix(in oklab, var(--sky) 35%, var(--wt-line-2));
  border-left: 4px solid var(--sky);
  border-radius: var(--wt-r3);
  background: color-mix(in oklab, var(--sky) 8%, var(--wt-bg-1));
}
.doc-principle .p1 {
  font-family: var(--label);
  font-size: 20px; font-weight: 600;
  letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--sky);
}
.doc-principle .p2 { font-size: 14.5px; color: var(--wt-fg-1); margin-top: 9px; line-height: 1.55; max-width: 920px; }
.doc-principle .p2 b { color: var(--wt-fg-0); }

/* ── section header ── */
.doc-sechd {
  font-family: var(--label);
  font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--wt-fg-2);
  margin: 34px 30px 14px;
  display: flex; align-items: center; gap: 12px;
}
.doc-sechd .n {
  width: 24px; height: 24px; border-radius: var(--wt-r2);
  background: var(--wt-bg-2); border: 1px solid var(--wt-line-2);
  display: grid; place-items: center;
  font-family: var(--mono); font-size: 12px; color: var(--gold); flex: 0 0 auto;
}
.doc-sechd::after { content: ""; flex: 1; height: 1px; background: var(--wt-line-2); }

/* ── grids ── */
.doc-cols { display: grid; gap: 14px; padding: 0 30px; }
.doc-c5 { grid-template-columns: repeat(5, 1fr); }
.doc-c4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1100px) { .doc-c5 { grid-template-columns: repeat(2, 1fr); } .doc-c4 { grid-template-columns: repeat(2, 1fr); } }

/* accent map (DS palette + activation orange) */
.ac-red    { --ac: var(--red); }
.ac-gold   { --ac: var(--gold); }
.ac-sky    { --ac: var(--sky); }
.ac-green  { --ac: var(--green); }
.ac-violet { --ac: var(--violet); }
.ac-orange { --ac: #ff7a1a; }   /* activation orange — explicitly DS-allowed */

/* ── role cards ── */
.doc-role {
  background: var(--wt-bg-1); border: 1px solid var(--wt-line-2);
  border-top: 3px solid var(--ac); border-radius: var(--wt-r3); padding: 15px;
}
.doc-role .rk {
  font-family: var(--label); font-size: 10px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ac);
}
.doc-role .rn {
  font-family: var(--label); font-size: 15px; font-weight: 600;
  letter-spacing: 0.03em; text-transform: uppercase; margin-top: 4px; line-height: 1.1;
  color: var(--wt-fg-0);
}
.doc-role .rd { font-size: 12px; color: var(--wt-fg-2); margin-top: 9px; line-height: 1.5; }
.doc-role .rd b { color: var(--wt-fg-1); }
.doc-tag {
  display: inline-block; margin-top: 10px;
  font-family: var(--label); font-size: 9px; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 3px 7px; border-radius: var(--wt-r1); border: 1px solid var(--ac); color: var(--ac);
}

/* ── cards / transfer flow ── */
.doc-card { background: var(--wt-bg-1); border: 1px solid var(--wt-line-2); border-radius: var(--wt-r3); padding: 18px; margin: 0 30px; }
.doc-card.doc-flush { padding: 0; overflow: hidden; }
.doc-flow { display: flex; align-items: stretch; gap: 0; }
@media (max-width: 900px) { .doc-flow { flex-direction: column; gap: 10px; } .doc-farr { display: none !important; } }
.doc-fstep { flex: 1; background: var(--wt-bg-2); border: 1px solid var(--wt-line-2); border-radius: var(--wt-r2); padding: 13px 15px; }
.doc-fstep .fn { font-family: var(--mono); font-size: 11px; color: var(--sky); }
.doc-fstep .ft { font-size: 13px; font-weight: 600; margin-top: 5px; color: var(--wt-fg-0); }
.doc-fstep .fd { font-size: 11.5px; color: var(--wt-fg-2); margin-top: 4px; line-height: 1.4; }
.doc-farr { display: flex; align-items: center; padding: 0 10px; color: var(--t-3); font-size: 18px; }
.doc-histline {
  margin-top: 14px; font-family: var(--mono); font-size: 12px; color: var(--wt-fg-2);
  background: var(--wt-bg-2); border: 1px solid var(--wt-line); border-radius: var(--wt-r2);
  padding: 11px 14px; line-height: 1.7;
}
.doc-histline b { color: var(--sky); }

/* ── ladder table ── */
.doc-ladder { width: 100%; border-collapse: collapse; }
.doc-ladder td, .doc-ladder th { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--wt-line); font-size: 13.5px; vertical-align: top; color: var(--wt-fg-1); }
.doc-ladder th { font-family: var(--label); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--t-3); background: var(--wt-bg-2); }
.doc-tier { font-family: var(--mono); font-weight: 700; font-size: 12px; padding: 3px 8px; border-radius: var(--wt-r1); }
.doc-tier.t1 { background: color-mix(in oklab, var(--sky) 18%, var(--wt-bg-2)); color: var(--sky); }
.doc-tier.t2 { background: color-mix(in oklab, var(--gold) 20%, var(--wt-bg-2)); color: var(--gold); }
.doc-tier.t3 { background: var(--red); color: #fff; }

/* ── notes ── */
.doc-note { margin: 14px 30px 0; padding: 15px 18px; border: 1px solid var(--wt-line-2); border-radius: var(--wt-r3); background: var(--wt-bg-1); font-size: 12.5px; color: var(--wt-fg-2); line-height: 1.6; }
.doc-note b { color: var(--wt-fg-1); }

/* ── activation cards ── */
.doc-act {
  background: var(--wt-bg-1); border: 1px solid var(--wt-line-2);
  border-top: 3px solid var(--ac); border-radius: var(--wt-r3); padding: 15px;
  display: flex; flex-direction: column;
}
.doc-act .al { font-family: var(--label); font-weight: 700; font-size: 18px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ac); }
.doc-act .as { font-family: var(--label); font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--t-3); margin-top: 2px; }
.doc-act .req { margin-top: 11px; font-size: 12px; color: var(--wt-fg-1); line-height: 1.55; }
.doc-act .req b { color: var(--wt-fg-0); }
.doc-act .auto { margin-top: 11px; padding-top: 11px; border-top: 1px solid var(--wt-line); font-family: var(--mono); font-size: 10.5px; color: var(--wt-fg-2); line-height: 1.5; }
.doc-act .auto b { color: var(--ac); }

/* ── COOP chain ── */
.doc-coop { display: flex; align-items: center; gap: 0; }
@media (max-width: 900px) { .doc-coop { flex-direction: column; gap: 10px; } .doc-carr { display: none; } }
.doc-cnode { flex: 1; text-align: center; background: var(--wt-bg-2); border: 1px solid var(--wt-line-2); border-radius: var(--wt-r3); padding: 16px 12px; }
.doc-cnode .ct { font-family: var(--label); font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--wt-fg-0); }
.doc-cnode .cd { font-size: 11.5px; color: var(--wt-fg-2); margin-top: 6px; line-height: 1.4; }
.doc-cnode.prim { border-color: color-mix(in oklab, var(--green) 45%, var(--wt-line-2)); }
.doc-cnode.prim .ct { color: var(--green); }
.doc-cnode.mob { border-color: color-mix(in oklab, var(--gold) 45%, var(--wt-line-2)); }
.doc-cnode.mob .ct { color: var(--gold); }
.doc-cnode.back { border-color: color-mix(in oklab, var(--sky) 45%, var(--wt-line-2)); }
.doc-cnode.back .ct { color: var(--sky); }
.doc-carr { padding: 0 12px; color: var(--t-3); font-size: 20px; }
.doc-insight { margin-top: 14px; font-size: 13px; color: var(--wt-fg-1); line-height: 1.6; background: color-mix(in oklab, var(--gold) 8%, var(--wt-bg-1)); border: 1px solid color-mix(in oklab, var(--gold) 30%, var(--wt-line-2)); border-radius: var(--wt-r2); padding: 13px 16px; }
.doc-insight b { color: var(--gold); }

/* ── muster ── */
.doc-muster { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 0 30px; }
@media (max-width: 900px) { .doc-muster { grid-template-columns: 1fr; } }
.doc-mcard { background: var(--wt-bg-1); border: 1px solid var(--wt-line-2); border-radius: var(--wt-r3); padding: 16px; }
.doc-mcard h4 { margin: 0 0 11px; font-family: var(--label); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--wt-fg-1); }
.doc-mcard h4.sp { margin-top: 14px; }
.doc-mrow { display: flex; gap: 9px; font-size: 12.5px; color: var(--wt-fg-2); padding: 6px 0; line-height: 1.4; }
.doc-mrow .b { color: var(--sky); font-family: var(--mono); flex: 0 0 auto; }
.doc-mrow b { color: var(--wt-fg-1); }
.doc-stategrp { margin-bottom: 6px; }
.doc-statelbl { font-size: 11px; color: var(--t-3); font-family: var(--label); letter-spacing: 0.08em; text-transform: uppercase; display: block; margin-bottom: 4px; }
.doc-chip { display: inline-block; font-family: var(--label); font-size: 10px; letter-spacing: 0.05em; text-transform: uppercase; padding: 4px 9px; border-radius: var(--wt-r1); border: 1px solid var(--wt-line-2); background: var(--wt-bg-2); color: var(--wt-fg-1); margin: 3px 4px 0 0; }
.doc-chip.g { border-color: var(--green); color: var(--green); }
.doc-chip.r { border-color: var(--red); color: var(--red); }
.doc-chip.y { border-color: var(--gold); color: var(--gold); }

/* ── surfaces matrix ── */
.doc-matrix { width: 100%; border-collapse: collapse; }
.doc-matrix td, .doc-matrix th { padding: 11px 13px; border-bottom: 1px solid var(--wt-line); border-right: 1px solid var(--wt-line); font-size: 12.5px; text-align: center; color: var(--wt-fg-1); }
.doc-matrix th { font-family: var(--label); font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--t-3); background: var(--wt-bg-2); }
.doc-matrix td:first-child, .doc-matrix th:first-child { text-align: left; font-weight: 600; }
.doc-matrix .y { color: var(--green); font-weight: 700; }
.doc-matrix .n { color: var(--t-3); }