
:root{--bg:#F7F8FA;--surface:#FFF;--border:#DDE1E8;--text:#1A1D24;--mute:#555D6E;--dim:#8C93A3;--r1:#0F7569;--r1-bg:#DCEEED;--r2:#A06D00;--r2-bg:#F5EAD0;--r3:#A8283A;--r3-bg:#F5D8DC;--mono:"IBM Plex Mono",monospace;--font:"IBM Plex Sans",sans-serif}
*{box-sizing:border-box}body{margin:0;font-family:var(--font);background:var(--bg);color:var(--text);font-size:14px;line-height:1.6}.header{background:var(--surface);border-bottom:1px solid var(--border);padding:1.25rem 2rem 1rem}.header-inner,.wrap{max-width:1180px;margin:0 auto}.back-btn{display:inline-flex;align-items:center;gap:.4rem;font-family:var(--mono);font-size:.72rem;font-weight:500;text-transform:uppercase;letter-spacing:.06em;color:var(--dim);text-decoration:none;padding:.3rem .65rem .3rem .5rem;border:1px solid var(--border);border-radius:5px;background:var(--bg);margin-bottom:.75rem}.back-btn:hover{color:var(--r1);border-color:var(--r1);background:var(--r1-bg)}h1{margin:.2rem 0 .35rem;font-size:1.9rem;line-height:1.2}p{margin:.3rem 0 1rem}.small{font-size:.82rem;color:var(--mute)}.wrap{padding:1.5rem 2rem 2.5rem}.grid{display:grid;grid-template-columns:280px 1fr;gap:1rem}.sidebar,.content{min-width:0}.card{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:1rem 1.1rem;margin-bottom:1rem}.mono{font-family:var(--mono)}code{font-family:var(--mono);font-size:.85em;background:#f4f5f7;padding:.08rem .3rem;border-radius:4px}.stack>*+*{margin-top:.65rem}.tool-nav{display:grid;gap:.4rem}.tool-link{display:block;padding:.55rem .7rem;border:1px solid var(--border);border-radius:8px;text-decoration:none;color:var(--text);font-size:.84rem;background:#fff}.tool-link:hover{border-color:var(--r1);background:var(--r1-bg)}.tool-link.active{border-color:var(--r1);background:var(--r1-bg);color:var(--r1);font-weight:600}.metric-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:.75rem}.metric{border:1px solid var(--border);border-radius:8px;padding:.8rem .9rem;background:#fff}.metric-label{font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--dim);margin-bottom:.25rem}.metric-value{font-family:var(--mono);font-size:1rem;color:var(--text)}.metric-delta.pos{color:var(--r1)}.metric-delta.neg{color:var(--r3)}.controls{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:.8rem}.control label{display:block;font-size:.74rem;text-transform:uppercase;letter-spacing:.08em;color:var(--dim);margin-bottom:.28rem}.control input,.control select{width:100%;padding:.55rem .65rem;border:1px solid var(--border);border-radius:8px;background:#fff;font-family:var(--font);font-size:.92rem}.control .hint{font-size:.75rem;color:var(--dim);margin-top:.25rem}.table-wrap{overflow:auto}.matrix-table{width:100%;border-collapse:collapse;font-size:.82rem}.matrix-table th,.matrix-table td{padding:.55rem .65rem;border-bottom:1px solid #edf0f3;white-space:nowrap}.matrix-table th{font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;color:var(--dim);text-align:left;position:sticky;top:0;background:#fff}.matrix-table td.num{text-align:right;font-family:var(--mono)}.matrix-table td.name{font-weight:500}.bar{height:8px;border-radius:999px;background:#e9edf1;overflow:hidden}.bar>span{display:block;height:100%;background:var(--r1)}.bar.negative>span{background:var(--r3)}.pill{display:inline-block;padding:.15rem .45rem;border-radius:999px;font-size:.68rem;font-family:var(--mono);letter-spacing:.05em;text-transform:uppercase}.pill.obs{background:var(--r1-bg);color:var(--r1)}.pill.do{background:var(--r2-bg);color:var(--r2)}.pill.cf{background:var(--r3-bg);color:var(--r3)}.kicker{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);margin-bottom:.35rem}.callout{padding:.8rem .95rem;border-radius:8px;border-left:4px solid var(--r1);background:var(--r1-bg)}.path{display:flex;justify-content:space-between;gap:1rem;padding:.55rem 0;border-bottom:1px solid #edf0f3}.path:last-child{border-bottom:none}.path-name{font-family:var(--mono);font-size:.8rem;color:var(--text);word-break:break-word}.path-weight{font-family:var(--mono);font-size:.84rem}.toggle-row{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap}.checkbox{display:inline-flex;gap:.45rem;align-items:center;font-size:.82rem;color:var(--mute)}.muted{color:var(--dim)}@media (max-width:900px){.grid{grid-template-columns:1fr}.wrap{padding:1rem}.header{padding:1rem 1rem .9rem}}


.node-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:.75rem}
.node-card{border:1px solid var(--border);border-radius:8px;padding:.8rem .9rem;background:#fff}
.node-card h3{margin:0 0 .4rem 0;font-size:.92rem}
.kv{display:grid;grid-template-columns:150px 1fr;gap:.5rem;font-size:.82rem}
.kv div:nth-child(odd){color:var(--dim);font-size:.72rem;text-transform:uppercase;letter-spacing:.08em}
.results-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1rem}
.stat{padding:.7rem .8rem;border:1px solid var(--border);border-radius:8px;background:#fff}
.state-chip{display:inline-block;padding:.18rem .5rem;border:1px solid var(--border);border-radius:999px;background:#fff;font-size:.73rem;margin:.12rem .2rem .12rem 0}
.legend-row{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.4rem}.legend-row button{margin-right:.3rem}
.callout.warn{border-left-color:var(--r2);background:var(--r2-bg)}
.path-score{font-family:var(--mono);font-size:.84rem}
.state-select-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:.7rem}
.blanket-box{display:flex;gap:.5rem;flex-wrap:wrap}.blanket-box .pill{font-family:var(--font);text-transform:none}
hr.sep{border:none;border-top:1px solid var(--border);margin:1rem 0}


/* Direction 1: state-passing + recommended scenarios */
.uh-nav{display:flex;flex-wrap:wrap;gap:.4rem;padding:.75rem 0;margin:0 0 1rem 0;border-bottom:1px solid #eee}
.uh-nav a{font-family:'IBM Plex Mono','JetBrains Mono',monospace;font-size:.68rem;text-transform:uppercase;letter-spacing:.08em;padding:.3rem .6rem;border-radius:5px;background:#f5f5f5;color:#555;text-decoration:none;transition:all .15s ease}
.uh-nav a:hover{background:#e8f3f2;color:#0F7569}
.uh-nav a.active{background:#DCEEED;color:#0F7569;font-weight:600}
.uh-guide{border:1px solid #eee;background:#fafbfc;border-left:3px solid #0F7569;border-radius:6px;padding:.9rem 1.1rem;margin:0 0 1rem 0}
.uh-guide-title{font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;font-weight:600;margin-bottom:.4rem;color:#0F7569}
.uh-guide ol{margin:0;padding-left:1.1rem;font-size:.82rem;color:#555}
.uh-recommended{border:1px solid rgba(15,117,105,.18);background:rgba(220,238,237,.45);border-radius:6px;padding:.7rem .9rem;margin:0 0 1rem 0;font-size:.82rem;color:#444}
.uh-recommended strong{color:#0F7569}
.uh-recommended button{margin-left:.5rem;border:1px solid #c7dbd9;background:#fff;color:#0F7569;border-radius:5px;padding:.25rem .55rem;font:inherit;cursor:pointer}
.uh-recommended button:hover{background:#f3fbfa}


/* Flagship full pass polish */
.uh-guide li { margin-bottom: .22rem; }
.uh-recommended { box-shadow: 0 1px 0 rgba(15,117,105,.06); }
.uh-recommended button { font-weight: 500; }


/* ══ EMPHASIS LAYER ═══════════════════════════════════════
     Global visual emphasis — added to all pages.
     ══════════════════════════════════════════════════════════ */

  /* 1. Pull quotes: teal left rule + warm teal wash */
  .pullquote {
    border-left-color: var(--rung1);
    background: var(--rung1-bg);
  }

  /* 2. Section lead text: left accent border = "read this first" */
  .collapsible-preview {
    font-size: 1rem;
    border-left: 3px solid var(--rung1);
    padding-left: 1.1rem;
  }

  /* 3. Sidebar note: decorative opening quotation mark */
  .sidebar-note {
    position: relative;
    padding-top: 2.25rem;
  }
  .sidebar-note::before {
    content: '\201C';
    position: absolute;
    top: -0.2rem;
    left: 0;
    font-family: 'DM Serif Display', serif;
    font-size: 3.5rem;
    line-height: 0.8;
    color: var(--rung1);
    opacity: 0.35;
    pointer-events: none;
  }

  /* 4. Answer label: plain mono label → solid pill badge */
  .answer-label {
    background: var(--text);
    color: #fff;
    display: inline-block;
    padding: 0.12rem 0.6rem;
    border-radius: 4px;
    font-size: 0.62rem;
    letter-spacing: 0.12em;
    margin-bottom: 0.75rem;
  }

  /* 5. Key findings: first bold sentence in each answer block → teal */
  .answer-text > strong:first-child {
    color: var(--rung1);
  }

  /* 6. Hero statement: full text strength instead of muted */
  .hero-statement {
    color: var(--text);
    font-weight: 300;
  }

  /* 7. Data table first column: bolder and full-strength color */
  .data-table td:first-child {
    color: var(--text);
    font-weight: 600;
  }

  /* 8. Hero headline: tighter tracking for more presence */
  .hero h1 {
    letter-spacing: -0.015em;
  }
  /* ══ END EMPHASIS LAYER ══════════════════════════════════ */
