/* =========================================================================
   PALANTIR FIELD MANUAL — shared design system
   Concept: "Declassified technical dossier"
   Color semantics:  cyan = semantic layer (data/objects)
                     amber = kinetic layer (actions)
                     violet = governance layer
                     coral = skeptic / de-mystification
   Type semantics:   mono  = the machine / Ontology speaking (object & action names, code)
                     sans  = the human explanation
                     grotesk = engineered headings
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root {
  --bg:        #12151b;
  --bg-2:      #171b23;
  --surface:   #1b212b;
  --raised:    #222a36;
  --hair:      #2c3644;
  --hair-2:    #384456;

  --ink:       #e7ebf1;
  --ink-2:     #aeb9c8;
  --ink-3:     #7c8798;

  --cyan:      #57a9e6;   /* semantic / data / objects */
  --cyan-dim:  #2f5876;
  --amber:     #eaa63f;   /* kinetic / actions */
  --amber-dim: #6b501f;
  --violet:    #b58be0;   /* governance */
  --violet-dim:#4d3d63;
  --coral:     #e46f60;   /* skeptic */
  --coral-dim: #5f342e;
  --green:     #63bd94;

  --measure: 68ch;
  --sidebar: 300px;

  --f-display: "Space Grotesk", system-ui, sans-serif;
  --f-body: "IBM Plex Sans", system-ui, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --radius: 10px;
  --shadow: 0 1px 0 rgba(255,255,255,.02), 0 18px 40px -24px rgba(0,0,0,.8);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background:
    radial-gradient(1100px 600px at 78% -10%, rgba(87,169,230,.06), transparent 60%),
    radial-gradient(900px 500px at 5% 8%, rgba(234,166,63,.05), transparent 55%),
    var(--bg);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 17px;
  line-height: 1.66;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---------- shell / layout ---------- */
.shell { display: grid; grid-template-columns: var(--sidebar) 1fr; min-height: 100vh; }

.sidebar {
  position: sticky; top: 0; align-self: start;
  height: 100vh; overflow-y: auto;
  border-right: 1px solid var(--hair);
  background: linear-gradient(180deg, var(--bg-2), var(--bg));
  padding: 28px 22px 40px;
}
.brand { display: flex; align-items: center; gap: 11px; margin-bottom: 6px; text-decoration: none; }
.brand__mark { width: 26px; height: 26px; flex: none; }
.brand__txt { font-family: var(--f-mono); font-size: 12.5px; letter-spacing: .16em; color: var(--ink); text-transform: uppercase; }
.brand__sub { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .22em; color: var(--ink-3); text-transform: uppercase; margin: 2px 0 26px 37px; }

.nav { display: flex; flex-direction: column; gap: 1px; }
.nav__group { font-family: var(--f-mono); font-size: 10px; letter-spacing: .2em; color: var(--ink-3); text-transform: uppercase; margin: 22px 0 8px 8px; }
.nav a {
  display: grid; grid-template-columns: 26px 1fr; align-items: baseline; gap: 4px;
  padding: 7px 9px; border-radius: 7px; text-decoration: none;
  color: var(--ink-2); font-size: 14px; line-height: 1.35;
  border: 1px solid transparent; transition: background .15s, color .15s, border-color .15s;
}
.nav a .num { font-family: var(--f-mono); font-size: 11px; color: var(--ink-3); }
.nav a:hover { background: var(--surface); color: var(--ink); }
.nav a.is-active { background: var(--surface); color: var(--ink); border-color: var(--hair-2); }
.nav a.is-active .num { color: var(--amber); }

.main { min-width: 0; }
.doc { max-width: 860px; margin: 0 auto; padding: 0 40px 120px; }

/* ---------- hero ---------- */
.hero { padding: 70px 0 40px; border-bottom: 1px solid var(--hair); margin-bottom: 44px; }
.eyebrow {
  font-family: var(--f-mono); font-size: 12px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--amber); display: inline-flex; align-items: center; gap: 10px; margin: 0 0 20px;
}
.eyebrow::before { content: ""; width: 26px; height: 1px; background: var(--amber); display: inline-block; }
.hero h1 {
  font-family: var(--f-display); font-weight: 700; font-size: clamp(2.1rem, 5vw, 3.4rem);
  line-height: 1.03; letter-spacing: -.02em; margin: 0 0 22px;
}
.hero h1 em { font-style: normal; color: var(--cyan); }
.lede { font-size: clamp(1.05rem, 2vw, 1.28rem); line-height: 1.55; color: var(--ink-2); max-width: 40ch; margin: 0; }
.lede strong { color: var(--ink); font-weight: 600; }

/* ---------- prose ---------- */
.doc h2 {
  font-family: var(--f-display); font-weight: 600; font-size: 1.75rem; letter-spacing: -.01em;
  margin: 64px 0 6px; padding-top: 22px; line-height: 1.15;
}
.doc h2 .kicker { display: block; font-family: var(--f-mono); font-size: 11.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 12px; font-weight: 500; }
.doc h3 { font-family: var(--f-display); font-weight: 600; font-size: 1.24rem; margin: 40px 0 4px; color: var(--ink); }
.doc p { max-width: var(--measure); margin: 16px 0; }
.doc p.big { font-size: 1.12rem; color: var(--ink); }
.doc ul, .doc ol { max-width: var(--measure); padding-left: 1.2em; }
.doc li { margin: 9px 0; }
.doc li::marker { color: var(--cyan); }
.doc a { color: var(--cyan); text-decoration: none; border-bottom: 1px solid var(--cyan-dim); }
.doc a:hover { border-bottom-color: var(--cyan); }
.doc strong { color: #fff; font-weight: 600; }
hr.rule { border: 0; border-top: 1px solid var(--hair); margin: 56px 0; }

/* pull-quote thesis */
.thesis {
  border-left: 3px solid var(--amber); background: linear-gradient(90deg, rgba(234,166,63,.06), transparent 80%);
  padding: 20px 24px; margin: 34px 0; border-radius: 0 var(--radius) var(--radius) 0;
  font-family: var(--f-display); font-weight: 500; font-size: 1.22rem; line-height: 1.4; color: var(--ink); max-width: 62ch;
}
.thesis span { color: var(--amber); }

/* ---------- inline chips (the ontology vocabulary) ---------- */
.obj, .act, .fn, .gov {
  font-family: var(--f-mono); font-size: .84em; font-weight: 500; padding: 1px 7px; border-radius: 5px;
  white-space: nowrap; border: 1px solid; line-height: 1.4;
}
.obj { color: var(--cyan);   background: rgba(87,169,230,.10); border-color: var(--cyan-dim); }
.act { color: var(--amber);  background: rgba(234,166,63,.10); border-color: var(--amber-dim); }
.fn  { color: var(--violet); background: rgba(181,139,224,.10); border-color: var(--violet-dim); }
.gov { color: var(--ink-2);  background: rgba(255,255,255,.04); border-color: var(--hair-2); }

/* ---------- EXAMPLE callout (signature repeating block) ---------- */
.eg {
  border: 1px solid var(--hair); border-left: 3px solid var(--amber);
  background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow);
  margin: 26px 0; overflow: hidden;
}
.eg__tag {
  display: flex; align-items: center; gap: 10px; padding: 11px 20px;
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--amber); background: rgba(234,166,63,.06); border-bottom: 1px solid var(--hair);
}
.eg__tag::before { content: "▸ 範例"; font-weight: 600; }
.eg__tag .scope { color: var(--ink-3); letter-spacing: .14em; }
.eg__body { padding: 16px 22px 20px; }
.eg__body p { margin: 10px 0; max-width: none; }
.eg__body p:first-child { margin-top: 0; }
.eg__body .lead { color: var(--ink); font-weight: 500; }

/* scenario flow: numbered decision → action → writeback chain */
.flow { list-style: none; padding: 0; margin: 14px 0 4px; display: flex; flex-direction: column; gap: 0; }
.flow li {
  position: relative; padding: 10px 0 10px 40px; margin: 0; border-left: 1px dashed var(--hair-2); margin-left: 13px;
}
.flow li:last-child { border-left-color: transparent; }
.flow li::before {
  counter-increment: fl; content: counter(fl); position: absolute; left: -13px; top: 8px;
  width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--f-mono); font-size: 12px; font-weight: 600;
  background: var(--raised); border: 1px solid var(--hair-2); color: var(--ink-2);
}
.flow { counter-reset: fl; }
.flow .k { font-family: var(--f-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); display: block; margin-bottom: 2px; }

/* ---------- three-layer stack diagram ---------- */
.stack { margin: 30px 0; display: flex; flex-direction: column; gap: 10px; }
.stack__row {
  border: 1px solid var(--hair); border-radius: var(--radius); padding: 16px 20px;
  background: var(--surface); display: grid; grid-template-columns: 130px 1fr; gap: 18px; align-items: center;
}
.stack__row .lbl { font-family: var(--f-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }
.stack__row .desc { font-size: .95rem; color: var(--ink-2); }
.stack__row .desc b { color: var(--ink); font-weight: 600; }
.stack__row--gov { border-left: 3px solid var(--violet); } .stack__row--gov .lbl { color: var(--violet); }
.stack__row--kin { border-left: 3px solid var(--amber); }  .stack__row--kin .lbl { color: var(--amber); }
.stack__row--sem { border-left: 3px solid var(--cyan); }   .stack__row--sem .lbl { color: var(--cyan); }
.stack__row--data{ border-left: 3px solid var(--hair-2); } .stack__row--data .lbl { color: var(--ink-3); }

/* ---------- myth / reality / skeptic ---------- */
.mr { border: 1px solid var(--coral-dim); border-radius: var(--radius); margin: 30px 0; overflow: hidden; background: var(--surface); }
.mr__head { padding: 11px 20px; font-family: var(--f-mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--coral); background: rgba(228,111,96,.07); border-bottom: 1px solid var(--coral-dim); }
.mr__head::before { content: "祛魅 · "; }
.mr__grid { display: grid; grid-template-columns: 1fr 1fr; }
.mr__cell { padding: 16px 20px; }
.mr__cell + .mr__cell { border-left: 1px solid var(--hair); }
.mr__cell h4 { margin: 0 0 8px; font-family: var(--f-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; }
.mr__cell p { margin: 0; max-width: none; font-size: .95rem; color: var(--ink-2); }
.mr__cell--claim h4 { color: var(--ink-3); }
.mr__cell--claim h4::before { content: "懷疑論 › "; }
.mr__cell--truth h4 { color: var(--green); }
.mr__cell--truth h4::before { content: "工程真相 › "; }

/* ---------- generic note / vs table ---------- */
.note { border: 1px solid var(--hair); border-left: 3px solid var(--cyan); background: var(--bg-2); border-radius: var(--radius); padding: 14px 20px; margin: 24px 0; font-size: .96rem; color: var(--ink-2); }
.note b { color: var(--ink); }

.tbl { width: 100%; border-collapse: collapse; margin: 26px 0; font-size: .93rem; }
.tbl th, .tbl td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--hair); vertical-align: top; }
.tbl th { font-family: var(--f-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); font-weight: 500; }
.tbl td { color: var(--ink-2); }
.tbl td b { color: var(--ink); }
.tbl tr:hover td { background: rgba(255,255,255,.015); }
.tbl-wrap { overflow-x: auto; }

/* ---------- sources ---------- */
.sources { margin-top: 60px; padding-top: 22px; border-top: 1px solid var(--hair); }
.sources h4 { font-family: var(--f-mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 12px; }
.sources ol { font-size: .85rem; color: var(--ink-3); max-width: none; }
.sources a { color: var(--ink-2); }

/* ---------- pager ---------- */
.pager { display: flex; justify-content: space-between; gap: 16px; margin-top: 56px; }
.pager a { flex: 1; text-decoration: none; border: 1px solid var(--hair); border-radius: var(--radius); padding: 16px 20px; color: var(--ink-2); transition: border-color .15s, background .15s; }
.pager a:hover { border-color: var(--hair-2); background: var(--surface); }
.pager .dir { font-family: var(--f-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.pager .ttl { display: block; margin-top: 4px; color: var(--ink); font-family: var(--f-display); font-weight: 500; }
.pager .next { text-align: right; }

/* ---------- signature: ontology graph ---------- */
.graph { width: 100%; height: auto; display: block; }
.graph .edge { stroke: var(--hair-2); stroke-width: 1.4; fill: none; }
.graph .edge.sem { stroke: var(--cyan-dim); }
.graph .node circle { fill: var(--surface); stroke: var(--cyan); stroke-width: 1.6; }
.graph .node.evt circle { stroke: var(--amber); }
.graph .node text { font-family: var(--f-mono); font-size: 10px; fill: var(--ink-2); }
.pulse { fill: var(--amber); r: 4.5; }
@keyframes dash { to { stroke-dashoffset: -220; } }
.graph .actbeam { stroke: var(--amber); stroke-width: 2; fill: none; stroke-dasharray: 6 10; animation: dash 3.2s linear infinite; }
@media (prefers-reduced-motion: reduce) { .graph .actbeam { animation: none; } .pulse { display: none; } }

/* ---------- index / cover specifics ---------- */
.cover { text-align: left; padding: 80px 0 30px; }
.toc { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; margin: 40px 0; }
.card { display: block; text-decoration: none; border: 1px solid var(--hair); border-radius: var(--radius); padding: 20px; background: var(--surface); transition: border-color .18s, transform .18s, background .18s; }
.card:hover { border-color: var(--hair-2); transform: translateY(-2px); background: var(--raised); }
.card .cnum { font-family: var(--f-mono); font-size: 12px; color: var(--amber); letter-spacing: .1em; }
.card h3 { font-family: var(--f-display); font-weight: 600; margin: 8px 0 6px; color: var(--ink); font-size: 1.16rem; }
.card p { margin: 0; font-size: .9rem; color: var(--ink-3); line-height: 1.5; }

/* ---------- case library ---------- */
.sector { display: flex; align-items: baseline; gap: 12px; margin: 52px 0 4px; padding-top: 20px; border-top: 1px solid var(--hair); }
.sector h2 { border: 0; padding: 0; margin: 0; }
.sector .cnt { font-family: var(--f-mono); font-size: 12px; color: var(--ink-3); letter-spacing: .08em; }
.cases { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; margin: 22px 0; }
.case { border: 1px solid var(--hair); border-radius: var(--radius); background: var(--surface); padding: 18px 20px; display: flex; flex-direction: column; box-shadow: var(--shadow); }
.case__co { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.case__co b { font-family: var(--f-display); font-weight: 600; font-size: 1.05rem; color: var(--ink); }
.case__tag { font-family: var(--f-mono); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); border: 1px solid var(--hair-2); border-radius: 20px; padding: 2px 9px; white-space: nowrap; flex: none; }
.case__play { font-size: .92rem; color: var(--ink-2); margin: 0 0 12px; max-width: none; }
.case__play b { color: var(--ink); }
.case__win { margin-top: auto; padding: 11px 0 0; border-top: 1px dashed var(--hair-2); font-size: .9rem; color: var(--ink-2); }
.case__win .num { font-family: var(--f-display); font-weight: 700; color: var(--amber); font-size: 1.15rem; letter-spacing: -.01em; }
.case__win .k { font-family: var(--f-mono); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); display: block; margin-bottom: 3px; }
.case__src { margin-top: 10px; font-family: var(--f-mono); font-size: 10px; }
.case__src a { color: var(--ink-3); border-bottom: 1px solid var(--hair); }
.case__src a:hover { color: var(--cyan); border-bottom-color: var(--cyan-dim); }
.sector--gov .cnt { color: var(--amber); }

/* ---------- responsive ---------- */
@media (max-width: 940px) {
  .shell { grid-template-columns: 1fr; }
  .sidebar { position: static; height: auto; border-right: 0; border-bottom: 1px solid var(--hair); }
  .nav { flex-flow: row wrap; gap: 4px; }
  .nav__group { width: 100%; }
  .nav a { grid-template-columns: 22px auto; }
  .doc { padding: 0 22px 90px; }
  .mr__grid { grid-template-columns: 1fr; }
  .mr__cell + .mr__cell { border-left: 0; border-top: 1px solid var(--hair); }
  .stack__row { grid-template-columns: 1fr; gap: 6px; }
}

/* ---------- light mode (daytime reading) ---------- */
@media (prefers-color-scheme: light) {
  :root {
    --bg: #f3f4f2; --bg-2: #ecedea; --surface: #fbfbf9; --raised: #f5f5f2;
    --hair: #d9dbd6; --hair-2: #c3c6bf;
    --ink: #1a1e24; --ink-2: #464e59; --ink-3: #767f8c;
    --cyan: #1d6fb0; --cyan-dim: #a9cce6; --amber: #b5730d; --amber-dim: #e8cfa0;
    --violet: #7a4fb0; --violet-dim: #d6c3ec; --coral: #c0432f; --coral-dim: #ecc3bb; --green: #2f7d55;
    --shadow: 0 1px 0 rgba(0,0,0,.02), 0 14px 34px -22px rgba(0,0,0,.25);
  }
  .doc strong { color: #000; }
}