:root {
  color-scheme: dark;
  --bg: #0f1117; --surface: #1a1d27; --surface2: #242836; --border: #2e3344;
  --text: #e4e6ed; --text2: #c9ccd6; --muted: #8b8fa3; --accent: #4f8ff7; --green: #34d399;
  /* context colors: categorical slots 1-3, dark steps */
  --c-career: #3987e5; --c-mohawk: #199e70; --c-projects: #d95926;
  --strong: #3987e5; --partial: #c98500; --gap: #5b6072;
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  background: radial-gradient(1100px 600px at 75% 0%, rgba(79,143,247,.07), transparent 60%), var(--bg);
  color: var(--text); font: 15px/1.55 var(--font); min-height: 100vh;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.muted { color: var(--muted); }
.small { font-size: 12.5px; }
.hint { color: var(--muted); font-size: 13.5px; margin-bottom: 10px; }

.bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 20px;
  border-bottom: 1px solid var(--border); background: rgba(15,17,23,.88); backdrop-filter: blur(8px); position: sticky; top: 0; z-index: 10; }
.bar-left { display: flex; align-items: center; gap: 12px; color: var(--text); min-width: 0; }
.bar-left:hover { text-decoration: none; }
.bar-left > span { display: flex; flex-direction: column; min-width: 0; }
.bar-title { font-weight: 700; font-size: 17px; }
.bar-sub { color: var(--muted); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar-right { display: flex; align-items: center; gap: 16px; flex: none; }
.bar-link { color: var(--muted); font-size: 14px; }
.bar-cta { background: var(--accent); color: #fff; font-weight: 600; font-size: 14px; padding: 8px 14px; border-radius: 9px; }
.bar-cta:hover { background: #3a7de6; text-decoration: none; }

.tabs { display: flex; gap: 4px; padding: 10px 20px 0; border-bottom: 1px solid var(--border); overflow-x: auto; }
.tabs button { background: none; border: 0; border-bottom: 2px solid transparent; color: var(--muted); font: 600 14px var(--font);
  padding: 8px 12px 10px; cursor: pointer; white-space: nowrap; }
.tabs button:hover { color: var(--text); }
.tabs button[aria-selected="true"] { color: var(--text); border-bottom-color: var(--accent); }

main { padding: 18px 20px 40px; max-width: 1440px; margin: 0 auto; }
.view[hidden] { display: none; }

/* detail card (shared) */
.detail { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 16px; align-self: start; }
.detail .kicker { font: 600 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.detail h2 { font-size: 18px; line-height: 1.3; margin: 4px 0 8px; }
.detail p { color: var(--text2); font-size: 14px; }
.detail p + p { margin-top: 8px; }
.detail .meta { color: var(--muted); font-size: 13px; margin-bottom: 8px; }
.detail ul.list { list-style: none; margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.detail ul.list button, .chipbtn { background: none; border: none; color: var(--accent); font: inherit; font-size: 14px; cursor: pointer; text-align: left; padding: 0; }
.detail ul.list button:hover, .chipbtn:hover { text-decoration: underline; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.chip { background: var(--surface2); border: 1px solid var(--border); color: var(--text); font: 500 12.5px var(--font); padding: 4px 9px; border-radius: 999px; cursor: pointer; }
.chip:hover { border-color: var(--accent); }
.ask { display: block; margin-top: 14px; padding: 10px 12px; border-radius: 9px; font-size: 14px;
  background: rgba(79,143,247,.12); border: 1px solid rgba(79,143,247,.35); color: #cfe0ff; }
.ask:hover { background: rgba(79,143,247,.2); text-decoration: none; }
.dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; margin-right: 6px; vertical-align: 1px; }

/* evidence view */
.ev-layout { display: grid; grid-template-columns: 270px 1fr 340px; gap: 18px; min-height: calc(100vh - 170px); }
.skills ul { list-style: none; display: flex; flex-direction: column; gap: 3px; }
.skills button { width: 100%; display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; background: none; border: 1px solid transparent;
  color: var(--text2); font: 500 14px var(--font); padding: 6px 8px; border-radius: 8px; cursor: pointer; text-align: left; }
.skills button:hover { background: var(--surface); }
.skills button[aria-pressed="true"] { background: var(--surface); border-color: var(--accent); color: var(--text); }
.skills .count { font: 600 12px var(--mono); color: var(--muted); }
.skills .bars { display: flex; gap: 2px; grid-column: 1 / -1; height: 4px; }
.skills .bars i { flex: none; width: 10px; border-radius: 2px; }
.ev-stage { position: relative; min-height: 520px; }
#evGraph { width: 100%; height: 100%; min-height: 520px; display: block; }
.ctx-legend { position: absolute; left: 0; bottom: 0; display: flex; gap: 14px; flex-wrap: wrap; font-size: 12.5px; color: var(--text2); }
.node-lbl { font: 500 12.5px var(--font); fill: var(--text); paint-order: stroke; stroke: var(--bg); stroke-width: 4px; stroke-linejoin: round; }
.center-lbl { font: 700 15px var(--font); fill: var(--text); }
.ev-node { cursor: pointer; }
.ev-node circle { stroke: var(--bg); stroke-width: 2; }
.ev-node:hover circle, .ev-node.sel circle { stroke: var(--text); }
.ev-node:focus { outline: none; }
.ev-node:focus-visible circle { stroke: var(--text); stroke-width: 3; }
.spoke { stroke: #3a4157; stroke-width: 1.2; }
.outer-lbl { font: 500 11px var(--font); fill: var(--muted); }
.outer-link { stroke: #2b3142; stroke-width: 1; stroke-dasharray: 2 3; }
.outer-node { cursor: pointer; }
.outer-node:hover text { fill: var(--text); }

/* career */
.career-layout { display: grid; grid-template-columns: 1fr 340px; gap: 18px; }
.career-scroll { overflow-x: auto; }
#careerGraph { display: block; min-width: 760px; width: 100%; }
.row-lbl { font: 600 13px var(--font); fill: var(--text); }
.row-org { font: 400 12px var(--font); fill: var(--muted); }
.row-hit { fill: transparent; cursor: pointer; }
.row-hit:hover, .row-hit.sel { fill: rgba(79,143,247,.07); }
.yr text { fill: var(--muted); font: 11px var(--font); }
.yr line { stroke: #242a38; }
.res-dot { cursor: pointer; stroke: var(--bg); stroke-width: 2; }
.res-dot:hover { stroke: var(--text); }
.grp-lbl { font: 600 11px var(--mono); letter-spacing: .06em; fill: var(--muted); }

/* governance */
.gov { display: grid; grid-template-columns: 1fr 340px; gap: 14px 18px; }
.gov > *:not(.gov-detail) { grid-column: 1; }
.gov-detail { grid-column: 2; grid-row: 1 / span 5; position: sticky; top: 120px; }
.gov-intro { color: var(--text2); max-width: 760px; }
.flow { list-style: none; display: grid; grid-template-columns: repeat(9, 1fr); gap: 0; counter-reset: step; }
.flow li { position: relative; padding: 0 6px; }
.flow li button { width: 100%; height: 100%; min-height: 86px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
  color: var(--text); font: 600 13px var(--font); padding: 26px 8px 10px; cursor: pointer; text-align: center; position: relative; }
.flow li button::before { counter-increment: step; content: counter(step); position: absolute; top: 7px; left: 50%; transform: translateX(-50%);
  font: 600 11px var(--mono); color: var(--muted); }
.flow li:not(:last-child)::after { content: ''; position: absolute; right: -5px; top: 50%; width: 10px; height: 2px; background: #3a4157; z-index: 1; }
.flow li button:hover { border-color: #46506a; }
.flow li button.on { border-color: var(--green); box-shadow: 0 0 0 3px rgba(52,211,153,.15); }
.flow li button.sel { border-color: var(--accent); }
.classes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.class { background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--cl); border-radius: 10px; padding: 10px 12px; }
.class strong { display: block; font-size: 13.5px; }
.class span { color: var(--text2); font-size: 13px; }
h3.sub { font: 600 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-top: 6px; }
.principles { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.principle { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; text-align: left; cursor: pointer; color: var(--text); font: inherit; }
.principle strong { display: block; font-size: 14px; margin-bottom: 2px; }
.principle span { color: var(--muted); font-size: 12.5px; }
.principle:hover { border-color: #46506a; }
.principle.sel { border-color: var(--green); }

/* match */
.match { max-width: 900px; margin: 0 auto; }
.match-intro h2 { font-size: 22px; margin-bottom: 6px; }
.match-intro p { color: var(--text2); }
#matchForm { margin-top: 16px; }
#jd { width: 100%; min-height: 220px; resize: vertical; background: var(--surface); color: var(--text); border: 1px solid var(--border);
  border-radius: 12px; padding: 14px; font: 14px/1.5 var(--font); }
#jd:focus { outline: 2px solid var(--accent); border-color: transparent; }
.match-actions { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; }
#matchBtn { background: var(--accent); color: #fff; border: 0; border-radius: 9px; padding: 10px 18px; font: 600 15px var(--font); cursor: pointer; }
#matchBtn:disabled { opacity: .55; cursor: wait; }
.match-status { margin-top: 14px; color: var(--text2); }
.match-status.err { color: #fca5a5; }
.result-head { margin-top: 18px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 16px; }
.result-head h3 { font-size: 17px; margin-bottom: 4px; }
.coverage { display: flex; height: 10px; border-radius: 5px; overflow: hidden; margin: 12px 0 8px; gap: 2px; }
.coverage i { display: block; height: 100%; }
.cov-legend { display: flex; gap: 16px; font-size: 13px; color: var(--text2); flex-wrap: wrap; }
.req { display: grid; grid-template-columns: 92px 1fr; gap: 12px; padding: 14px 4px; border-bottom: 1px solid var(--border); }
.lvl { font: 600 11px var(--mono); letter-spacing: .06em; text-transform: uppercase; padding: 3px 8px; border-radius: 6px; height: max-content; text-align: center; }
.lvl.strong { background: rgba(57,135,229,.18); color: #9ec5f4; }
.lvl.partial { background: rgba(201,133,0,.18); color: #f3c96a; }
.lvl.gap { background: rgba(91,96,114,.25); color: var(--text2); }
.req-text { font-weight: 600; }
.req-kind { color: var(--muted); font-size: 12px; font-weight: 500; margin-left: 6px; }
.req-note { color: var(--text2); font-size: 14px; margin-top: 3px; }
.disclaimer { color: var(--muted); font-size: 12.5px; margin-top: 14px; }

@media (max-width: 1100px) {
  .ev-layout { grid-template-columns: 230px 1fr; }
  .ev-layout .detail { grid-column: 1 / -1; }
  .career-layout, .gov { grid-template-columns: 1fr; }
  .gov-detail { grid-column: 1; grid-row: auto; position: static; }
  .flow { grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .flow li::after { display: none; }
  .classes { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
  .bar { padding: 10px 16px; }
  .bar-sub, .bar-link { display: none; }
  .tabs { padding: 6px 12px 0; }
  main { padding: 14px 16px 32px; }
  .ev-layout { grid-template-columns: 1fr; }
  .skills ul { flex-direction: row; overflow-x: auto; gap: 6px; padding-bottom: 4px; }
  .skills li { flex: none; }
  .skills button { white-space: nowrap; border-color: var(--border); }
  .skills .bars { display: none; }
  .ev-stage, #evGraph { min-height: 380px; }
  .flow { grid-template-columns: 1fr 1fr; }
  .classes { grid-template-columns: 1fr; }
  .req { grid-template-columns: 1fr; gap: 6px; }
  .lvl { width: max-content; }
}
.rel-skills { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 8px; }
.ctx-legend { position: static; margin-top: 4px; }
.ev-stage { min-height: 0; }
#evGraph { min-height: 480px; height: 480px; }
@media (max-width: 700px) { #evGraph { min-height: 380px; height: 380px; } }
.ev-layout > *, .career-layout > *, .gov > * { min-width: 0; }
@media (max-width: 700px) { .ev-layout { grid-template-columns: minmax(0, 1fr); } }
.detail ul.list li { display: flex; align-items: baseline; gap: 6px; }
.detail ul.list li .dot { margin-right: 0; flex: none; }

/* mobile: keep site links visible as a second row */
@media (max-width: 700px) {
  .bar { flex-wrap: wrap; row-gap: 8px; }
  .bar-right { flex-basis: 100%; justify-content: flex-start; gap: 18px; padding-left: 44px; overflow-x: auto; }
  .bar-link { display: inline; font-size: 13px; white-space: nowrap; }
  .bar-cta { margin-left: auto; font-size: 13px; padding: 6px 12px; white-space: nowrap; }
}