/* ============================================================
   HR TRANSCENDENT — additional components (loads after style.css)
   ============================================================ */

/* ---------- Domain hero strip ---------- */
.domain-hero {
  background: linear-gradient(135deg, var(--indigo-900), var(--indigo-800));
  color: #fff; border-radius: 14px; padding: 20px 24px; margin-bottom: 20px;
  display: flex; gap: 24px; align-items: center; flex-wrap: wrap;
}
.domain-hero .dh-main { flex: 1; min-width: 300px; }
.domain-hero .dh-kicker { font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-500); font-weight: 700; margin-bottom: 4px; }
.domain-hero h2 { font-family: var(--serif); font-size: 1.3rem; font-weight: 700; line-height: 1.25; }
.domain-hero .dh-sub { font-size: .8rem; opacity: .85; margin-top: 5px; max-width: 640px; }
.domain-hero .dh-pills { display: flex; gap: 8px; flex-wrap: wrap; }
.domain-hero .dh-pill { background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.25); border-radius: 999px; font-size: .68rem; font-weight: 600; padding: 3px 12px; }

/* Today vs Transcendent strip */
.tvt { display: grid; grid-template-columns: 1fr 34px 1fr; gap: 10px; align-items: stretch; margin-bottom: 20px; }
.tvt .tvt-cell { border-radius: 10px; padding: 12px 16px; font-size: .78rem; line-height: 1.32; }
.tvt .today { background: #f4f0f0; border: 1px solid #e5d9d9; color: #6b4c4c; }
.tvt .trans { background: var(--teal-100); border: 1px solid #b2ddd7; color: var(--teal-900); }
.tvt .tvt-cell b { display: block; font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 3px; }
.tvt .arrow { display: flex; align-items: center; justify-content: center; font-size: 1.2rem; color: var(--indigo-600); font-weight: 800; }

/* ---------- Workflow pipeline ---------- */
.pipeline { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; margin-bottom: 16px; }
@media (max-width: 1100px) { .pipeline { grid-template-columns: repeat(3, 1fr); } }
.pl-step {
  background: var(--card); border: 1.5px solid var(--border); border-radius: 10px;
  padding: 11px 12px 10px; cursor: pointer; position: relative; transition: all .15s;
}
.pl-step:hover { border-color: var(--indigo-600); transform: translateY(-2px); }
.pl-step.active { border-color: var(--indigo-800); background: var(--indigo-50); box-shadow: 0 4px 14px -6px rgba(35,35,184,.4); }
.pl-step .pl-n {
  width: 22px; height: 22px; border-radius: 50%; background: var(--indigo-800); color: #fff;
  font-family: var(--mono); font-size: .68rem; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center; margin-bottom: 6px;
}
.pl-step.active .pl-n { background: var(--gold-500); color: #4d3a05; }
.pl-step h4 { font-family: var(--serif); font-size: .82rem; font-weight: 700; color: var(--heading); line-height: 1.2; margin-bottom: 3px; }
.pl-step .pl-what { font-size: .66rem; color: var(--muted); line-height: 1.32; }
.pl-step .pl-auto { margin-top: 7px; }
.pl-step .pl-auto .meter { height: 5px; }
.pl-step .pl-auto-lbl { font-size: .58rem; color: var(--faint); margin-top: 2px; display: flex; justify-content: space-between; }
.pl-step::after {
  content: '\203A'; position: absolute; right: -8px; top: 50%; transform: translateY(-50%);
  color: var(--faint); font-size: 1rem; font-weight: 700; z-index: 2;
}
.pl-step:last-child::after { display: none; }

/* Step detail panel */
.step-detail { border: 1.5px solid var(--indigo-100); border-radius: 12px; background: var(--card); padding: 0; overflow: hidden; margin-bottom: 20px; }
.sd-head { background: var(--indigo-50); padding: 13px 20px; display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; border-bottom: 1px solid var(--indigo-100); }
.sd-head h3 { font-family: var(--serif); font-size: 1.05rem; color: var(--heading); }
.sd-head .sd-meta { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.sd-body { display: grid; grid-template-columns: 1.35fr 1fr; gap: 0; }
@media (max-width: 1000px) { .sd-body { grid-template-columns: 1fr; } }
.sd-col { padding: 16px 20px; }
.sd-col + .sd-col { border-left: 1px solid var(--border); background: #fbfbfe; }
.sd-label { font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; margin: 0 0 8px; }
.sd-label.ai { color: var(--indigo-800); }
.sd-label.human { color: var(--teal-700); }
.sd-label.thai { color: var(--amber-700); }
.sd-label.data { color: var(--muted); }
.substeps { list-style: none; margin: 0 0 14px; padding: 0; }
.substeps li { position: relative; padding: 5px 0 5px 26px; font-size: .8rem; line-height: 1.32; border-bottom: 1px dashed var(--border); }
.substeps li:last-child { border-bottom: none; }
.substeps li::before { content: '\2699'; position: absolute; left: 2px; top: 6px; font-size: .8rem; color: var(--indigo-600); }
.substeps li b { color: var(--indigo-900); }
.substeps.human li::before { content: '\1F464'; font-size: .72rem; }
.substeps.human li b { color: var(--teal-900); }
.thai-note {
  background: var(--gold-100); border: 1px solid #ecd9a0; border-radius: 8px;
  padding: 9px 12px; font-size: .74rem; line-height: 1.32; margin-top: 10px;
}
.thai-note b { color: #7a5a10; }
.sd-io { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.sd-io .io { flex: 1; min-width: 160px; background: #fff; border: 1px solid var(--border); border-radius: 8px; padding: 8px 11px; font-size: .7rem; }
.sd-io .io b { display: block; font-size: .6rem; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); margin-bottom: 3px; }

/* Swimlane overview */
.swimlane .sl-row { display: grid; grid-template-columns: 110px repeat(6, 1fr); gap: 6px; align-items: stretch; margin-bottom: 6px; }
.swimlane .sl-lbl { font-size: .66rem; font-weight: 700; display: flex; align-items: center; letter-spacing: .06em; text-transform: uppercase; }
.swimlane .sl-lbl.ai { color: var(--indigo-800); }
.swimlane .sl-lbl.hum { color: var(--teal-700); }
.swimlane .sl-cell { border-radius: 7px; font-size: .64rem; line-height: 1.3; padding: 6px 8px; }
.swimlane .sl-cell.ai { background: var(--indigo-50); border: 1px solid #d5d5f8; color: var(--indigo-900); }
.swimlane .sl-cell.hum { background: var(--teal-100); border: 1px solid #b2ddd7; color: var(--teal-900); }
.swimlane .sl-cell.empty { background: transparent; border: 1px dashed var(--border-dark); }

/* ---------- Analytics components ---------- */
.chart-box { width: 100%; overflow-x: auto; }
.chart-box svg { display: block; }
.ctl-row { display: flex; gap: 18px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 14px; }
.ctl { min-width: 170px; flex: 1; max-width: 260px; }
.ctl .ctl-lbl { font-size: .68rem; font-weight: 700; color: var(--muted); display: flex; justify-content: space-between; margin-bottom: 4px; }
.ctl .ctl-lbl output { font-family: var(--mono); color: var(--indigo-800); }
input[type=range] { width: 100%; accent-color: var(--indigo-800); }
.sim-result { display: flex; gap: 14px; flex-wrap: wrap; margin: 10px 0 4px; }
.sim-kpi { flex: 1; min-width: 130px; background: var(--indigo-50); border: 1px solid #d5d5f8; border-radius: 9px; padding: 9px 13px; }
.sim-kpi b { display: block; font-family: var(--serif); font-size: 1.25rem; font-weight: 800; color: var(--heading); }
.sim-kpi span { font-size: .64rem; color: var(--muted); }
.sim-kpi.warn { background: var(--red-100); border-color: #f0c4bc; }
.sim-kpi.warn b { color: var(--red-600); }
.sim-kpi.good { background: var(--teal-100); border-color: #b2ddd7; }
.sim-kpi.good b { color: var(--teal-700); }

/* Benchmark tab */
.bp-card { border: 1px solid var(--border); border-radius: 10px; background: #fff; padding: 13px 15px; display: flex; flex-direction: column; gap: 6px; }
.bp-card .bp-name { font-family: var(--serif); font-weight: 700; font-size: .9rem; color: var(--heading); display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.bp-card .bp-cat { font-size: .58rem; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); font-weight: 700; }
.bp-card .bp-what { font-size: .74rem; color: var(--ink); line-height: 1.32; flex: 1; }
.bp-card .bp-take { font-size: .7rem; color: var(--teal-700); font-weight: 600; }
.pit-list { margin: 0; padding: 0 0 0 4px; }
.pit-list li { font-size: .78rem; margin: 6px 0 6px 18px; line-height: 1.32; }
.pit-list li::marker { color: var(--red-600); }

/* Value strip */
.value-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.vs-item { background: #fff; border: 1px solid var(--border); border-left: 3px solid var(--teal-500); border-radius: 0 9px 9px 0; padding: 10px 14px; }
.vs-item b { font-family: var(--serif); font-size: 1.1rem; color: var(--teal-700); display: block; }
.vs-item span { font-size: .68rem; color: var(--muted); }

/* Domain index cards on overview */
.dom-card { display: flex; flex-direction: column; gap: 8px; background: var(--card); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow); padding: 16px 18px; text-decoration: none; color: var(--ink); transition: all .15s; }
.dom-card:hover { border-color: var(--indigo-600); transform: translateY(-3px); }
.dom-card .dc-num { font-family: var(--mono); font-size: .64rem; font-weight: 700; color: var(--indigo-800); background: var(--indigo-100); border-radius: 5px; padding: 2px 8px; width: fit-content; }
.dom-card h3 { font-family: var(--serif); font-size: 1rem; color: var(--heading); line-height: 1.25; }
.dom-card .dc-q { font-size: .72rem; color: var(--muted); line-height: 1.32; flex: 1; }
.dom-card .dc-foot { display: flex; gap: 6px; flex-wrap: wrap; }

/* tooltip for svg charts */
.tip { position: fixed; pointer-events: none; background: var(--ink); color: #fff; font-size: .7rem; border-radius: 6px; padding: 5px 9px; z-index: 90; opacity: 0; transition: opacity .12s; max-width: 260px; line-height: 1.32; }
.tip.show { opacity: .96; }

/* ============================================================
   V2 — Merriweather reading typography + larger sizes
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Merriweather:ital,opsz,wght@0,18..144,300..900;1,18..144,300..900&display=swap');

html { font-size: 16.5px; }
body, .page-sub, .explain, .substeps li, .tvt .tvt-cell, .dc-q, .bp-card .bp-what,
.sd-io .io, .thai-note, .card-sub, .ai-note, .fw-card .fw-what, .pit-list li {
  font-family: 'Merriweather', Georgia, serif;
}
:root { --serif: 'Merriweather', Georgia, serif; }
.nav a, .chip, .btn, .tab, .kpi .k-label, table.data, .filter-label, .crumb,
.nav-group-label, .band, .sd-label, .demo-context, .legend, .dh-pill, .pl-auto-lbl { font-family: 'IBM Plex Sans', 'Segoe UI', sans-serif; }
.page-sub { font-size: .95rem; }
.explain { font-size: .8rem; line-height: 1.32; }
.substeps li { font-size: .84rem; line-height: 1.32; }
.card-sub { font-size: .84rem; }
.thai-note { font-size: .8rem; line-height: 1.32; }
.pl-step .pl-what { font-size: .7rem; }
.tvt .tvt-cell { font-size: .82rem; line-height: 1.32; }
.bp-card .bp-what { font-size: .78rem; line-height: 1.32; }
.pit-list li { font-size: .82rem; }

/* ---------- Method strip (Thinking · Model · Methods · Tools) ---------- */
.method-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 20px; }
@media (max-width: 1000px) { .method-strip { grid-template-columns: 1fr 1fr; } }
.ms-card { background: var(--card); border: 1px solid var(--border); border-top: 3px solid var(--indigo-800); border-radius: 10px; padding: 12px 15px; }
.ms-card.m2 { border-top-color: var(--indigo-600); }
.ms-card.m3 { border-top-color: var(--teal-500); }
.ms-card.m4 { border-top-color: var(--gold-500); }
.ms-card .ms-k { font-size: .6rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: var(--muted); font-family: 'IBM Plex Sans', sans-serif; }
.ms-card h4 { font-family: var(--serif); font-size: .92rem; color: var(--heading); margin: 3px 0 5px; }
.ms-card p { font-size: .76rem; color: var(--ink); line-height: 1.32; font-family: 'Merriweather', serif; }

/* ---------- Interactive step activities ---------- */
.acts { border-top: 1px dashed var(--border-dark); margin-top: 14px; padding-top: 12px; }
.acts .acts-title { font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; color: var(--indigo-800); margin-bottom: 10px; font-family: 'IBM Plex Sans', sans-serif; display:flex; align-items:center; gap:8px; }
.acts .acts-title .saved-chip { font-size: .62rem; letter-spacing: 0; text-transform: none; background: var(--teal-100); color: var(--teal-900); border-radius: 999px; padding: 1px 9px; font-weight: 600; }
.act { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
.act label { font-size: .74rem; font-weight: 600; color: var(--ink); font-family: 'IBM Plex Sans', sans-serif; }
.act .act-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.act input[type=text], .act textarea, .act select { font-size: .8rem; }
.act textarea { min-height: 54px; resize: vertical; }
.act .act-status { font-size: .68rem; color: var(--teal-700); font-weight: 600; font-family: 'IBM Plex Sans', sans-serif; }
.act .file-pill { display: inline-flex; align-items: center; gap: 6px; background: var(--indigo-50); border: 1px solid #d5d5f8; border-radius: 999px; font-size: .7rem; padding: 2px 10px; color: var(--indigo-900); font-family: 'IBM Plex Sans', sans-serif; }
.act input[type=file] { font-size: .72rem; }
.pl-step .cap-chip { position: absolute; top: 7px; right: 8px; font-size: .56rem; font-weight: 700; background: var(--teal-100); color: var(--teal-900); border-radius: 999px; padding: 1px 7px; font-family: 'IBM Plex Mono', monospace; }

/* ---------- Module Agent console ---------- */
.agent-fab { position: fixed; right: 22px; bottom: 22px; z-index: 60;
  background: linear-gradient(135deg, var(--indigo-800), var(--indigo-600)); color: #fff;
  border: none; border-radius: 999px; padding: 11px 20px; font-size: .86rem; font-weight: 700;
  font-family: 'IBM Plex Sans', sans-serif; cursor: pointer; box-shadow: 0 8px 24px -6px rgba(35,35,184,.55);
  display: flex; align-items: center; gap: 8px; }
.agent-fab:hover { transform: translateY(-2px); }
.agent-panel { position: fixed; right: 22px; bottom: 80px; width: 420px; max-width: calc(100vw - 44px);
  height: 560px; max-height: calc(100vh - 120px); background: #fff; border: 1px solid var(--border-dark);
  border-radius: 16px; box-shadow: 0 24px 70px rgba(10,10,60,.35); z-index: 61;
  display: none; flex-direction: column; overflow: hidden; }
.agent-panel.open { display: flex; }
.agent-head { background: linear-gradient(135deg, var(--indigo-900), var(--indigo-800)); color: #fff; padding: 13px 17px; }
.agent-head .ag-name { font-family: var(--serif); font-weight: 700; font-size: .95rem; }
.agent-head .ag-sub { font-size: .68rem; opacity: .8; font-family: 'IBM Plex Sans', sans-serif; margin-top: 2px; }
.agent-head .ag-close { float: right; background: none; border: none; color: #fff; font-size: 1.1rem; cursor: pointer; opacity: .8; }
.agent-head .ag-mode { display: inline-block; font-size: .6rem; font-weight: 700; border-radius: 999px; padding: 1px 9px; margin-top: 6px; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.3); font-family: 'IBM Plex Sans', sans-serif; cursor: pointer; }
.agent-quick { display: flex; gap: 6px; flex-wrap: wrap; padding: 10px 14px; border-bottom: 1px solid var(--border); background: #fbfbfe; }
.agent-quick button { font-size: .68rem; font-weight: 600; border: 1px solid var(--border-dark); background: #fff; border-radius: 999px; padding: 4px 11px; cursor: pointer; color: var(--indigo-900); font-family: 'IBM Plex Sans', sans-serif; }
.agent-quick button:hover { border-color: var(--indigo-600); background: var(--indigo-50); }
.agent-log { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.ag-msg { max-width: 88%; border-radius: 12px; padding: 9px 13px; font-size: .8rem; line-height: 1.32; }
.ag-msg.user { align-self: flex-end; background: var(--indigo-800); color: #fff; border-bottom-right-radius: 4px; font-family: 'IBM Plex Sans', sans-serif; }
.ag-msg.bot { align-self: flex-start; background: var(--indigo-50); border: 1px solid #d5d5f8; color: var(--ink); border-bottom-left-radius: 4px; font-family: 'Merriweather', serif; }
.ag-msg.bot b { color: var(--indigo-900); }
.ag-msg.bot ul { margin: 6px 0 2px 16px; }
.ag-msg.bot li { margin: 3px 0; }
.ag-msg .ag-src { display: block; margin-top: 6px; font-size: .62rem; color: var(--faint); font-family: 'IBM Plex Sans', sans-serif; }
.agent-input { display: flex; gap: 8px; padding: 12px 14px; border-top: 1px solid var(--border); }
.agent-input input { flex: 1; }
.agent-input button { flex-shrink: 0; }
.ag-typing { font-size: .72rem; color: var(--faint); padding: 0 16px 8px; font-family: 'IBM Plex Sans', sans-serif; display: none; }

/* Suite labels in sidebar */
.nav .suite-label { font-size: .6rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-500); opacity: .95; padding: 12px 22px 4px; font-weight: 700; font-family: 'IBM Plex Sans', sans-serif; }

/* ---------- Structured step templates ---------- */
.tpl-n { display:inline-flex; align-items:center; justify-content:center; width:17px; height:17px; border-radius:50%; background: var(--indigo-800); color:#fff; font-size:.6rem; font-weight:700; font-family:'IBM Plex Mono',monospace; margin-right:2px; }
.tpl-unit { color: var(--faint); font-weight:500; font-size:.68rem; }
.tpl-hint { font-size:.72rem; color: var(--muted); font-family:'Merriweather',serif; line-height:1.5; margin:2px 0 4px; }
.tpl-tblwrap { overflow-x:auto; border:1px solid var(--border); border-radius:8px; margin:4px 0 6px; }
.tpl-tbl { font-size:.74rem; }
.tpl-tbl th { background:#f4f5fb; position:sticky; top:0; }
.tpl-tbl td { padding:6px 9px; min-width:70px; }
.tpl-tbl td:focus { outline:2px solid var(--indigo-600); background: var(--indigo-50); }

/* ---------- Step output artifact ---------- */
.sd-output { border-top: 2px solid var(--teal-500); background: linear-gradient(180deg, #f2faf9, #fff 60px); padding: 14px 20px 16px; }
.sd-out-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.sd-out-k { font-size: .6rem; letter-spacing: .14em; font-weight: 800; color: var(--teal-700); font-family: 'IBM Plex Sans', sans-serif; }
.sd-out-head h4 { font-family: var(--serif); font-size: .98rem; color: var(--teal-900); flex: 1; min-width: 220px; }
.sd-out-badge { font-size: .62rem; font-weight: 600; border-radius: 999px; padding: 2px 10px; background: var(--gold-100); border: 1px solid #ecd9a0; color: #7a5a10; font-family: 'IBM Plex Sans', sans-serif; }
.sd-out-badge[data-src="live"] { background: var(--teal-100); border-color: #b2ddd7; color: var(--teal-900); }
.sd-out-body table.data { margin: 8px 0; font-size: .76rem; }
.sd-out-body p { font-size: .8rem; line-height: 1.32; margin: 6px 0; font-family: 'Merriweather', serif; }
.sd-out-body .out-flag { display: inline-block; font-size: .64rem; font-weight: 700; border-radius: 999px; padding: 1px 9px; margin: 1px 2px; font-family: 'IBM Plex Sans', sans-serif; }
.sd-out-body .out-flag.red { background: var(--red-100); color: var(--red-600); }
.sd-out-body .out-flag.amber { background: var(--gold-100); color: #7a5a10; }
.sd-out-body .out-flag.ok { background: var(--teal-100); color: var(--teal-900); }
.sd-out-body .out-kpis { display: flex; gap: 10px; flex-wrap: wrap; margin: 6px 0 10px; }
.sd-out-body .out-kpis span { background: #fff; border: 1px solid var(--border); border-radius: 8px; padding: 6px 12px; font-size: .72rem; font-family: 'IBM Plex Sans', sans-serif; }
.sd-out-body .out-kpis b { display: block; font-family: var(--serif); font-size: 1.05rem; color: var(--teal-700); }
.sd-out-note { font-size: .7rem; color: var(--faint); font-style: italic; margin-top: 8px; font-family: 'Merriweather', serif; }

/* ---------- Output dashboard charts ---------- */
.out-chart { margin: 10px 0 4px; background: #fff; border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px 8px; }
.out-chart-cap { font-size: .64rem; color: var(--faint); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 4px 2px 2px; }
.out-tbl-toggle { margin: 2px 0 10px; font-size: .68rem; }
.sd-out-body table.data { margin-top: 4px; }

/* ============================================================
   V3 — one typeface platform-wide (Merriweather), consistent
   reading sizes & colors, icon support, simpler look
   ============================================================ */
body, .nav a, .chip, .btn, .tab, .kpi .k-label, table.data, .filter-label, .crumb,
.nav-group-label, .band, .sd-label, .demo-context, .legend, .dh-pill, .pl-auto-lbl,
.ms-card .ms-k, .acts .acts-title, .act label, .act .act-status, .agent-quick button,
.ag-msg.user, .agent-head .ag-sub, .agent-head .ag-mode, .ag-typing, .ag-msg .ag-src,
.sd-out-k, .sd-out-badge, .out-kpis span, .out-flag, .tpl-hint, .suite-label,
select, input, textarea, .sim-kpi span, .ctl .ctl-lbl {
  font-family: 'Merriweather', Georgia, serif !important;
}
.mono, .tab .tab-num, .mod-num, .pl-n, .kpi .k-value, .ov-band .n, .fw-card .fw-num {
  font-family: 'IBM Plex Mono', Consolas, monospace !important;
}
/* consistent reading text: size + color */
.page-sub, .explain, .substeps li, .tvt .tvt-cell, .dc-q, .bp-card .bp-what, .sd-io .io,
.thai-note, .card-sub, .ms-card p, .pit-list li, .sd-out-body p, .tpl-hint, .small,
.ag-msg.bot { font-size: .84rem !important; line-height: 1.32 !important; color: var(--ink); }
.card-sub, .tpl-hint { color: var(--muted) !important; }
.explain { font-size: .82rem !important; }
table.data { font-size: .8rem; }
table.data th { font-size: .62rem; }

/* ---------- Step icons ---------- */
.pl-ico { font-size: 1.25rem; display: block; margin-bottom: 4px; line-height: 1; }
.sd-head .sd-ico { font-size: 1.3rem; margin-right: 2px; }

/* ---------- Introduction tab components ---------- */
.intro-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 18px; }
@media (max-width: 1000px) { .intro-grid { grid-template-columns: 1fr; } }
.in-card { background: var(--card); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: var(--shadow); padding: 18px; text-align: left; }
.in-card .in-ico { width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center;
  justify-content: center; font-size: 1.4rem; margin-bottom: 10px; background: var(--indigo-100); }
.in-card.t2 .in-ico { background: var(--teal-100); }
.in-card.t3 .in-ico { background: var(--gold-100); }
.in-card h4 { font-family: var(--serif); font-size: 1rem; color: var(--heading); margin-bottom: 6px; }
.in-card p { font-size: .84rem; color: var(--ink); line-height: 1.32; }
.in-steps { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; margin: 14px 0 6px; }
@media (max-width: 1000px) { .in-steps { grid-template-columns: repeat(3, 1fr); } }
.in-step { background: var(--card); border: 1px solid var(--border); border-radius: 10px;
  padding: 12px 10px; text-align: center; }
.in-step .n { display: inline-flex; width: 22px; height: 22px; border-radius: 50%;
  background: var(--indigo-800); color: #fff; align-items: center; justify-content: center;
  font-family: 'IBM Plex Mono', monospace !important; font-size: .68rem; font-weight: 700; margin-bottom: 6px; }
.in-step .ico { font-size: 1.3rem; display: block; margin-bottom: 4px; }
.in-step b { display: block; font-size: .8rem; color: var(--heading); line-height: 1.3; }
.intro-quote { background: linear-gradient(135deg, var(--indigo-900), var(--indigo-800)); color: #fff;
  border-radius: 12px; padding: 18px 24px; font-size: .95rem; line-height: 1.32; margin-bottom: 18px;
  font-style: italic; }
.intro-quote b { color: var(--gold-500); font-style: normal; }
.src-note { font-size: .74rem; color: var(--muted); }

/* ============================================================
   V4 — polish: scrollable sidebar, no tab scrollbar, tighter
   type, blue-line icons, full-width AI column, chart text room
   ============================================================ */
/* 1) sidebar scrolls */
.sidebar { overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.35) transparent; }
/* 2) no scroll arrows on the tab strip */
.tabs { overflow: visible; flex-wrap: wrap; }
/* 3) smaller type, tighter lines */
html { font-size: 15.5px; }
.page-sub, .explain, .substeps li, .tvt .tvt-cell, .dc-q, .bp-card .bp-what, .sd-io .io,
.thai-note, .card-sub, .ms-card p, .pit-list li, .sd-out-body p, .tpl-hint, .small,
.ag-msg.bot, .in-card p { font-size: .8rem !important; line-height: 1.32 !important; }
.substeps li { padding-top: 4px; padding-bottom: 4px; }
.intro-quote { font-size: .88rem; line-height: 1.32; }
/* 4) icons: consistent blue line look (monochrome) */
.pl-ico, .sd-ico, .in-step .ico, .in-card .in-ico, .agent-fab, .acts .acts-title {
  filter: grayscale(1) sepia(1) hue-rotate(195deg) saturate(4) brightness(.9);
}
.agent-fab { filter: none; }
.in-card .in-ico { background: #fff; border: 2px solid var(--indigo-600); }
.in-card.t2 .in-ico, .in-card.t3 .in-ico { background: #fff; border-color: var(--indigo-600); }
/* 5) step detail: full-width columns stacked, AI section gets full space */
.sd-body { grid-template-columns: 1fr !important; }
.sd-col + .sd-col { border-left: none; border-top: 1px solid var(--border); }
/* 6-7) output charts: same size as reading text, room to breathe */
.out-chart { padding: 14px 16px 10px; }
.chart-box svg text { font-size: 12px; }

/* ============================================================
   V5 — line icons, collapsible sidebar, single-column results
   ============================================================ */
/* true blue-line SVG icons — remove the old emoji filter */
.pl-ico, .sd-ico, .in-step .ico, .in-card .in-ico, .acts .acts-title { filter: none !important; }
.lic { display: inline-block; vertical-align: middle; }
.in-card .in-ico { background: #fff; border: 1.5px solid var(--indigo-600); }
.in-card .in-ico .lic { width: 26px; height: 26px; }
.pl-ico .lic { width: 24px; height: 24px; }
.in-step .ico .lic { width: 26px; height: 26px; }

/* collapsible sidebar */
#nav-toggle { position: fixed; left: 10px; top: 10px; z-index: 70; width: 34px; height: 34px;
  border-radius: 8px; border: 1px solid var(--border-dark); background: #fff; cursor: pointer;
  font-size: 1rem; color: var(--indigo-800); box-shadow: var(--shadow); display: flex;
  align-items: center; justify-content: center; }
body.nav-hidden .sidebar { display: none; }
body.nav-hidden .main { padding-left: 56px; }
.sidebar { padding-top: 50px; }

/* results in one column — never two dense columns */
#tab-an .grid.cols-2, #tab-an .grid.cols-3 { grid-template-columns: 1fr; }
#tab-an .card { max-width: 1050px; }

/* ============================================================
   V6 — blue tone unification + flexible steps + your-data marks
   ============================================================ */
.pipeline { grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); }
.sim-kpi.good { background: #e2e8ff; border-color: #b9c2fa; }
.sim-kpi.good b { color: var(--indigo-800); }
.vs-item { border-left-color: var(--indigo-600); }
.vs-item b { color: var(--indigo-800); }
.chip.teal { background: #e2e8ff; border-color: #b9c2fa; color: var(--indigo-800); }
.kpi .k-value { color: var(--indigo-800); }
.sd-output { border-top-color: var(--indigo-600); background: linear-gradient(180deg, #f0f3ff, #fff 60px); }
.sd-out-k, .sd-out-head h4 { color: var(--indigo-900); }
.uval { background: #dce4ff; padding: 0 4px; border-radius: 4px; font-weight: 700; color: var(--indigo-900); }
.sd-out-badge[data-src="you"] { background: #e2e8ff; border-color: #b9c2fa; color: var(--indigo-900); }

/* ============================================================
   V7 — HR 2027 Capability Journey wizard (journey.html)
   ============================================================ */
/* stepper */
.jw-stepper { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; margin-bottom: 18px; }
@media (max-width: 1000px) { .jw-stepper { grid-template-columns: repeat(3, 1fr); } }
.jw-st { background: var(--card); border: 1.5px solid var(--border); border-radius: 10px; padding: 10px 12px; cursor: pointer; text-align: left; transition: all .15s; position: relative; }
.jw-st:hover { border-color: var(--indigo-600); }
.jw-st.active { border-color: var(--indigo-800); background: var(--indigo-50); box-shadow: 0 4px 14px -6px rgba(35,35,184,.4); }
.jw-st.done { border-color: #b9c2fa; }
.jw-st .n { display: inline-flex; width: 20px; height: 20px; border-radius: 50%; background: var(--indigo-800); color: #fff; align-items: center; justify-content: center; font-family: 'IBM Plex Mono', monospace !important; font-size: .64rem; font-weight: 700; margin-bottom: 5px; }
.jw-st.done .n { background: var(--teal-500); }
.jw-st.active .n { background: var(--gold-500); color: #4d3a05; }
.jw-st b { display: block; font-size: .74rem; color: var(--heading); line-height: 1.25; }
.jw-st .s { font-size: .62rem; color: var(--muted); }
.jw-st .tick { position: absolute; top: 8px; right: 9px; color: var(--teal-700); font-size: .8rem; font-weight: 800; }
/* wizard panels + nav */
.jw-panel { display: none; }
.jw-panel.active { display: block; }
.jw-nav { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 20px 0 10px; flex-wrap: wrap; }
.jw-nav .jw-hint { font-size: .74rem; color: var(--muted); flex: 1; min-width: 220px; }
/* profile bar */
.jw-profile { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.jw-profile .f { display: flex; flex-direction: column; gap: 3px; min-width: 170px; flex: 1; }
.jw-profile label { font-size: .68rem; font-weight: 700; color: var(--muted); }
/* skill universe */
.sk-cluster { border: 1px solid var(--border); border-radius: 12px; background: var(--card); margin-bottom: 12px; overflow: hidden; }
.sk-cl-head { display: flex; align-items: center; gap: 12px; padding: 12px 16px; cursor: pointer; background: #fbfbfe; border-bottom: 1px solid transparent; }
.sk-cl-head:hover { background: var(--indigo-50); }
.sk-cluster.open .sk-cl-head { border-bottom-color: var(--border); }
.sk-cl-head .ck { width: 30px; height: 30px; border-radius: 8px; background: var(--indigo-100); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.sk-cl-head .ck .lic { width: 18px; height: 18px; }
.sk-cl-head h4 { font-family: var(--serif); font-size: .92rem; color: var(--heading); flex: 1; }
.sk-cl-head h4 span { display: block; font-size: .68rem; font-weight: 400; color: var(--muted); margin-top: 1px; }
.sk-cl-head .cnt { font-size: .66rem; font-weight: 700; color: var(--indigo-800); background: var(--indigo-50); border: 1px solid #d5d5f8; border-radius: 999px; padding: 2px 10px; white-space: nowrap; }
.sk-cl-head .caret { color: var(--faint); font-size: .9rem; transition: transform .15s; }
.sk-cluster.open .caret { transform: rotate(90deg); }
.sk-cl-body { display: none; padding: 10px 14px 14px; }
.sk-cluster.open .sk-cl-body { display: block; }
/* one skill row */
.sk-row { display: flex; align-items: center; gap: 12px; padding: 9px 6px; border-bottom: 1px dashed var(--border); flex-wrap: wrap; }
.sk-row:last-child { border-bottom: none; }
.sk-row .sk-have { flex-shrink: 0; }
.sk-row .sk-txt { flex: 1; min-width: 260px; }
.sk-row .sk-txt b { font-size: .8rem; color: var(--heading); display: block; line-height: 1.3; }
.sk-row .sk-txt span { font-size: .7rem; color: var(--muted); line-height: 1.32; }
.sk-row.off .sk-txt b, .sk-row.off .sk-txt span { color: var(--faint); }
.sk-row .sk-tags { display: flex; gap: 4px; flex-wrap: wrap; }
.sk-tag { font-size: .58rem; font-weight: 700; letter-spacing: .04em; border-radius: 4px; padding: 1px 6px; }
.sk-tag.strat { background: #e2e8ff; color: var(--indigo-800); }
.sk-tag.enab { background: var(--gold-100); color: #7a5a10; }
.sk-tag.mobi { background: var(--teal-100); color: var(--teal-900); }
.sk-tag.core { background: #eceef5; color: var(--muted); }
/* 1-4 level segmented control */
.lvl-seg { display: inline-flex; gap: 4px; }
.lvl-seg button { width: 34px; height: 30px; border-radius: 7px; border: 1.5px solid var(--border-dark); background: #fff; font-size: .74rem; font-weight: 700; cursor: pointer; color: var(--muted); transition: all .1s; }
.lvl-seg button:hover { border-color: var(--indigo-600); }
.lvl-seg button.sel { background: var(--indigo-800); border-color: var(--indigo-800); color: #fff; }
.lvl-seg button:disabled { opacity: .35; cursor: default; }
.lvl-seg.big button { width: 44px; height: 34px; }
/* toggle pill */
.have-pill { border: 1.5px solid var(--border-dark); background: #fff; border-radius: 999px; font-size: .66rem; font-weight: 700; padding: 4px 12px; cursor: pointer; color: var(--muted); white-space: nowrap; }
.have-pill.on { background: var(--teal-100); border-color: var(--teal-500); color: var(--teal-900); }
/* level legend */
.lvl-legend { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 0 0 14px; }
@media (max-width: 900px) { .lvl-legend { grid-template-columns: 1fr 1fr; } }
.lvl-legend .lg { background: #fff; border: 1px solid var(--border); border-radius: 9px; padding: 8px 12px; font-size: .7rem; line-height: 1.32; color: var(--muted); }
.lvl-legend .lg b { display: block; color: var(--indigo-800); font-size: .74rem; }
/* role matrix */
.rm-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 10px; margin-bottom: 14px; }
.rm-tbl { border-collapse: collapse; width: 100%; min-width: 760px; font-size: .74rem; }
.rm-tbl th { background: #f4f5fb; padding: 8px 9px; text-align: center; font-size: .64rem; border-bottom: 2px solid var(--border-dark); position: sticky; top: 0; }
.rm-tbl th.sk { text-align: left; min-width: 210px; }
.rm-tbl td { padding: 6px 9px; border-bottom: 1px solid var(--border); text-align: center; }
.rm-tbl td.sk { text-align: left; font-weight: 600; color: var(--heading); font-size: .74rem; }
.rm-tbl td.sk span { display: block; font-weight: 400; font-size: .64rem; color: var(--muted); }
.rm-lvl { display: inline-flex; width: 26px; height: 22px; border-radius: 5px; align-items: center; justify-content: center; font-weight: 800; font-size: .68rem; font-family: 'IBM Plex Mono', monospace !important; }
.rm-lvl.l0 { background: #f2f3f8; color: #c2c6d4; }
.rm-lvl.l1 { background: #e9ecfb; color: #7a82c9; }
.rm-lvl.l2 { background: #ccd4f7; color: var(--indigo-800); }
.rm-lvl.l3 { background: #8b8bf0; color: #fff; }
.rm-lvl.l4 { background: var(--indigo-800); color: #fff; }
.rm-tbl td.you { background: #fffdf2; border-left: 2px solid var(--gold-500); }
/* best-fit result */
.fit-hero { border-radius: 14px; background: linear-gradient(135deg, var(--indigo-900), var(--indigo-800)); color: #fff; padding: 22px 26px; margin-bottom: 16px; display: flex; gap: 24px; align-items: center; flex-wrap: wrap; }
.fit-hero .fh-pct { font-family: var(--serif); font-size: 2.6rem; font-weight: 800; color: var(--gold-500); line-height: 1; }
.fit-hero .fh-main { flex: 1; min-width: 260px; }
.fit-hero .fh-k { font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-500); font-weight: 700; }
.fit-hero h3 { font-family: var(--serif); font-size: 1.4rem; margin: 2px 0 4px; }
.fit-hero p { font-size: .8rem; opacity: .9; line-height: 1.32; }
/* role choice cards */
.rc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; margin-bottom: 14px; }
.rc-card { border: 2px solid var(--border); border-radius: 12px; background: var(--card); padding: 15px 16px; cursor: pointer; transition: all .15s; position: relative; }
.rc-card:hover { border-color: var(--indigo-600); transform: translateY(-2px); }
.rc-card.sel { border-color: var(--indigo-800); background: var(--indigo-50); box-shadow: 0 6px 18px -8px rgba(35,35,184,.5); }
.rc-card .rc-badge { position: absolute; top: -9px; left: 14px; font-size: .58rem; font-weight: 800; letter-spacing: .08em; background: var(--gold-500); color: #4d3a05; border-radius: 999px; padding: 2px 10px; }
.rc-card .rc-badge.asp { background: var(--teal-500); color: #fff; }
.rc-card h4 { font-family: var(--serif); font-size: .95rem; color: var(--heading); margin: 4px 0 3px; }
.rc-card .rc-fit { font-family: 'IBM Plex Mono', monospace !important; font-size: .78rem; font-weight: 700; color: var(--indigo-800); }
.rc-card p { font-size: .72rem; color: var(--muted); line-height: 1.32; margin-top: 5px; }
.rc-card .rc-check { position: absolute; top: 10px; right: 12px; width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--border-dark); }
.rc-card.sel .rc-check { background: var(--indigo-800); border-color: var(--indigo-800); }
.rc-card.sel .rc-check::after { content: '✓'; color: #fff; font-size: .7rem; font-weight: 800; display: flex; align-items: center; justify-content: center; height: 100%; }
/* learning preference + library */
.lp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; margin-bottom: 16px; }
.lp-card { border: 2px solid var(--border); border-radius: 12px; background: var(--card); padding: 14px 15px; cursor: pointer; transition: all .15s; }
.lp-card:hover { border-color: var(--indigo-600); }
.lp-card.sel { border-color: var(--indigo-800); background: var(--indigo-50); }
.lp-card h4 { font-family: var(--serif); font-size: .86rem; color: var(--heading); margin-bottom: 4px; display: flex; align-items: center; gap: 8px; }
.lp-card p { font-size: .7rem; color: var(--muted); line-height: 1.32; }
.lp-card .ord { display: none; width: 20px; height: 20px; border-radius: 50%; background: var(--gold-500); color: #4d3a05; font-size: .68rem; font-weight: 800; align-items: center; justify-content: center; font-family: 'IBM Plex Mono', monospace !important; }
.lp-card.sel .ord { display: inline-flex; }
.li-filter { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.li-filter button { font-size: .68rem; font-weight: 700; border: 1.5px solid var(--border-dark); background: #fff; border-radius: 999px; padding: 4px 13px; cursor: pointer; color: var(--muted); }
.li-filter button.sel { background: var(--indigo-800); border-color: var(--indigo-800); color: #fff; }
.li-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.li-card { border: 1px solid var(--border); border-radius: 11px; background: var(--card); padding: 13px 15px; display: flex; flex-direction: column; gap: 6px; }
.li-card .li-top { display: flex; align-items: center; gap: 8px; justify-content: space-between; }
.li-card h5 { font-family: var(--serif); font-size: .82rem; color: var(--heading); line-height: 1.3; flex: 1; }
.li-card .li-class { font-size: .56rem; font-weight: 800; letter-spacing: .06em; border-radius: 4px; padding: 2px 7px; white-space: nowrap; }
.li-class.c70 { background: var(--teal-100); color: var(--teal-900); }
.li-class.c20 { background: var(--gold-100); color: #7a5a10; }
.li-class.c10 { background: #e2e8ff; color: var(--indigo-800); }
.li-card p { font-size: .7rem; color: var(--muted); line-height: 1.32; flex: 1; }
.li-card .li-meta { font-size: .62rem; color: var(--faint); display: flex; gap: 10px; flex-wrap: wrap; }
.li-card .li-thai { font-size: .66rem; color: #7a5a10; background: var(--gold-100); border-radius: 6px; padding: 4px 8px; line-height: 1.32; }
/* plan */
.plan-month { border: 1px solid var(--border); border-radius: 12px; background: var(--card); margin-bottom: 12px; overflow: hidden; }
.pm-head { display: flex; align-items: center; gap: 12px; padding: 11px 16px; background: var(--indigo-50); border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.pm-head .pm-m { font-family: 'IBM Plex Mono', monospace !important; font-weight: 800; font-size: .8rem; background: var(--indigo-800); color: #fff; border-radius: 7px; padding: 3px 10px; }
.pm-head h4 { font-family: var(--serif); font-size: .9rem; color: var(--heading); flex: 1; }
.pm-head .pm-hrs { font-size: .66rem; font-weight: 700; color: var(--muted); }
.pm-body { padding: 6px 16px 10px; }
.pm-item { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; border-bottom: 1px dashed var(--border); }
.pm-item:last-child { border-bottom: none; }
.pm-item .li-class { margin-top: 2px; flex-shrink: 0; }
.pm-item .t { flex: 1; }
.pm-item .t b { font-size: .78rem; color: var(--heading); display: block; line-height: 1.32; }
.pm-item .t span { font-size: .68rem; color: var(--muted); line-height: 1.32; }
.pm-item .t .ev { display: block; font-size: .66rem; color: var(--teal-700); font-weight: 600; margin-top: 2px; }
/* completeness meter */
.jw-meter { display: flex; align-items: center; gap: 10px; font-size: .7rem; color: var(--muted); margin-top: 8px; }
.jw-meter .bar { flex: 1; height: 7px; border-radius: 999px; background: #eceef5; overflow: hidden; }
.jw-meter .bar i { display: block; height: 100%; background: var(--indigo-800); border-radius: 999px; transition: width .25s; }
/* ============================================================
   V8 — Journey V2: current-role picker, change badges, domain
   role cards, connected journey timeline, print sheet, guard
   ============================================================ */
/* current-role picker */
.cr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; margin: 10px 0 4px; }
.cr-card { border: 2px solid var(--border); border-radius: 11px; background: var(--card); padding: 12px 14px; cursor: pointer; transition: all .15s; position: relative; }
.cr-card:hover { border-color: var(--indigo-600); }
.cr-card.sel { border-color: var(--indigo-800); background: var(--indigo-50); }
.cr-card .cr-fn { font-size: .6rem; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); font-weight: 700; }
.cr-card h5 { font-family: var(--serif); font-size: .84rem; color: var(--heading); margin: 3px 0 4px; line-height: 1.3; }
.cr-card .cr-sk { font-size: .66rem; color: var(--muted); line-height: 1.32; }
.cr-card .rc-check { position: absolute; top: 10px; right: 12px; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--border-dark); }
.cr-card.sel .rc-check { background: var(--indigo-800); border-color: var(--indigo-800); }
.cr-card.sel .rc-check::after { content: '✓'; color: #fff; font-size: .62rem; font-weight: 800; display: flex; align-items: center; justify-content: center; height: 100%; }
/* rate rows with expected-level marker */
.rate-row { display: flex; align-items: center; gap: 12px; padding: 9px 6px; border-bottom: 1px dashed var(--border); flex-wrap: wrap; }
.rate-row:last-child { border-bottom: none; }
.rate-row .rr-txt { flex: 1; min-width: 240px; }
.rate-row .rr-txt b { font-size: .8rem; color: var(--heading); display: block; line-height: 1.3; }
.rate-row .rr-txt span { font-size: .7rem; color: var(--muted); line-height: 1.32; }
.rate-row .rr-exp { font-size: .62rem; font-weight: 700; color: #7a5a10; background: var(--gold-100); border: 1px solid #ecd9a0; border-radius: 999px; padding: 2px 9px; white-space: nowrap; }
/* change-type badges */
.chg { display: inline-flex; align-items: center; font-size: .58rem; font-weight: 800; letter-spacing: .05em; border-radius: 4px; padding: 2px 8px; color: #fff; }
/* future-domain cards with roles under each */
.fdom { border: 1px solid var(--border); border-radius: 12px; background: var(--card); margin-bottom: 12px; overflow: hidden; }
.fdom-head { display: flex; align-items: baseline; gap: 12px; padding: 12px 16px; background: linear-gradient(135deg, var(--indigo-900), var(--indigo-800)); color: #fff; flex-wrap: wrap; }
.fdom-head h4 { font-family: var(--serif); font-size: 1rem; flex: 1; min-width: 200px; }
.fdom-head .cap { font-size: .6rem; letter-spacing: .12em; font-weight: 700; color: var(--gold-500); }
.fdom-head p { width: 100%; font-size: .72rem; opacity: .85; line-height: 1.32; }
.fdom-roles { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; padding: 12px 14px; }
.frole { border: 1.5px solid var(--border); border-radius: 10px; background: #fff; padding: 11px 13px; position: relative; cursor: pointer; transition: all .15s; }
.frole:hover { border-color: var(--indigo-600); }
.frole.sel { border-color: var(--indigo-800); background: var(--indigo-50); box-shadow: 0 4px 14px -6px rgba(35,35,184,.4); }
.frole .fr-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.frole h5 { font-family: var(--serif); font-size: .84rem; color: var(--heading); line-height: 1.25; flex: 1; }
.frole .fr-was { font-size: .64rem; color: var(--faint); font-style: italic; }
.frole .fr-story { font-size: .7rem; color: var(--muted); line-height: 1.32; margin-top: 3px; }
.frole .fr-fit { font-family: 'IBM Plex Mono', monospace !important; font-size: .72rem; font-weight: 700; color: var(--indigo-800); }
.frole .fr-skills { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 6px; }
.frole .fr-skills span { font-size: .58rem; background: #eceef5; color: var(--muted); border-radius: 4px; padding: 1px 6px; }
.frole .rc-badge { position: absolute; top: -9px; right: 12px; font-size: .56rem; font-weight: 800; letter-spacing: .06em; background: var(--gold-500); color: #4d3a05; border-radius: 999px; padding: 2px 9px; }
/* journey timeline */
.journey-wrap { overflow-x: auto; padding: 6px 0 2px; }
.journey-wrap svg { display: block; min-width: 900px; }
/* print sheet — hidden on screen, the only thing printed */
#print-sheet { display: none; }
@media print {
  @page { size: A4 landscape; margin: 7mm; }
  html, body {
    width: auto !important; min-width: 0 !important; min-height: 0 !important;
    margin: 0 !important; padding: 0 !important; background: #fff !important;
  }
  /* Remove the application from print layout entirely. Visibility alone
     preserves its height and was creating several blank PDF pages. */
  body > *:not(#print-sheet) { display: none !important; }
  #print-sheet, #print-sheet * { visibility: visible !important; }
  #print-sheet {
    display: block !important; position: static !important;
    width: 100% !important; height: auto !important; box-sizing: border-box;
    margin: 0 !important; padding: 0 !important; color: #17172b;
    font-size: 7.4pt; line-height: 1.18;
    break-inside: avoid; page-break-inside: avoid;
  }
  #print-sheet h1 {
    font-family: var(--serif); color: #191999; font-size: 15pt;
    line-height: 1.05; margin: 0 0 1.5mm;
  }
  #print-sheet h2 {
    font-family: var(--serif); color: #191999; font-size: 9.5pt;
    line-height: 1.08; margin: 0 0 2mm;
    border-bottom: 1.5px solid #191999; padding-bottom: 1mm;
  }
  #print-sheet .ps-grid {
    display: grid; grid-template-columns: 34% minmax(0, 1fr);
    gap: 5mm; align-items: start; margin-top: 3mm;
  }
  #print-sheet .ps-panel { min-width: 0; break-inside: avoid; page-break-inside: avoid; }
  #print-sheet .ps-block + .ps-block { margin-top: 3mm; }
  #print-sheet table {
    width: 100%; border-collapse: collapse; table-layout: fixed;
    font-size: 6.7pt; line-height: 1.13;
    break-inside: avoid; page-break-inside: avoid;
  }
  #print-sheet th, #print-sheet td {
    border: 1px solid #c9cede; padding: 1.25mm 1.6mm;
    text-align: left; vertical-align: top; overflow-wrap: anywhere;
  }
  #print-sheet th { background: #eef0fb !important; color: #191999; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  #print-sheet tr { break-inside: avoid; page-break-inside: avoid; }
  #print-sheet .ps-gaps th:nth-child(n+2),
  #print-sheet .ps-gaps td:nth-child(n+2) { width: 12%; text-align: center; }
  #print-sheet .ps-journey th:first-child,
  #print-sheet .ps-journey td:first-child { width: 10%; }
  #print-sheet .ps-journey th:nth-child(2),
  #print-sheet .ps-journey td:nth-child(2) { width: 18%; }
  #print-sheet .ps-journey th:last-child,
  #print-sheet .ps-journey td:last-child { width: 25%; }
  #print-sheet .ps-meta { margin: 0; font-size: 7.4pt; line-height: 1.2 !important; color: #444; }
  #print-sheet .ps-meta + .ps-meta { margin-top: 1.4mm; }
  #print-sheet .ps-foot {
    margin-top: 3mm; padding-top: 1.5mm; border-top: 1px solid #c9cede;
    font-size: 6pt; line-height: 1.1; color: #777;
  }
}
/* content guard — no text selection outside inputs */
body.guarded, body.guarded .main, body.guarded .sidebar { -webkit-user-select: none; user-select: none; }
body.guarded input, body.guarded textarea, body.guarded select, body.guarded [contenteditable] { -webkit-user-select: text; user-select: text; }
@media print {
  body.guard-noprint * { visibility: hidden !important; }
  body.guard-noprint::before { content: 'Printing is disabled on this platform. Content remains the property of IRIS.'; visibility: visible; display: block; padding: 40px; font-size: 14px; }
}
/* ============================================================
   V9 — line-spacing discipline platform-wide:
   tight lines INSIDE a paragraph, clear space BETWEEN sections
   ============================================================ */
/* 1) Within a paragraph / set of sentences: lines sit close together */
body { line-height: 1.32; }
p, li, td, th, .small, .dc-q, .dh-sub, .page-sub, .explain, .card-sub, .thai-note,
.substeps li, .tvt .tvt-cell, .bp-card .bp-what, .sd-io .io, .ms-card p, .pit-list li,
.sd-out-body p, .tpl-hint, .ag-msg, .ag-msg.bot, .in-card p, .intro-quote, .li-card p, .fr-story,
.frole .fr-story, .rr-txt span, .sk-row .sk-txt span, .cr-card .cr-sk, .lvl-legend .lg,
.pm-item .t span, .lp-card p, .out-yourdata li, .vs-item span, .kpi .k-note,
.rm-tbl td.sk span, .fit-hero p, .fdom-head p, .act label, .jw-st .s, .jw-hint {
  line-height: 1.32 !important;
}
h1, h2, h3, h4, h5, .page-title, .card-title { line-height: 1.18 !important; }
/* 2) Between sections and paragraphs: keep clear separation */
p + p, .sd-out-body p + p, .in-card p + p { margin-top: 8px; }
.band { margin-top: 22px; margin-bottom: 12px; }
.card { margin-bottom: 14px; }
.grid .card, .fdom-roles .card { margin-bottom: 0; }
.ov-band { margin-top: 20px; }
.explain { margin-top: 10px; }
.method-strip, .intro-grid, .tvt, .value-strip, .kpis { margin-bottom: 18px; }
.pit-list li { margin-top: 5px; margin-bottom: 5px; }
.substeps li { padding-top: 3px; padding-bottom: 3px; }

/* "Computed With Your Data" strip inside step outputs */
.out-yourdata { background: #eef1ff; border: 1px solid #b9c2fa; border-radius: 9px; padding: 10px 14px; margin: 2px 0 12px; }
.out-yourdata b { font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; color: var(--indigo-800); }
.out-yourdata ul { margin: 6px 0 0 16px; }
.out-yourdata li { font-size: .74rem; line-height: 1.32; color: var(--ink); }
.out-yourdata mark.uval, .sd-out-body mark.uval { background: #dce4ff; padding: 0 4px; border-radius: 4px; font-weight: 700; color: var(--indigo-900); }

/* ============================================================
   V10 — COP release: Module 13 only + touch-first responsive UI
   ============================================================ */
html, body { max-width: 100%; overflow-x: hidden; }
.nav a.disabled,
.nav a.disabled:hover {
  opacity: .34;
  pointer-events: none;
  cursor: not-allowed;
  background: transparent;
  color: rgba(255,255,255,.72);
}

@media (max-width: 1024px) {
  .app { min-height: 100dvh; }
  .sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 65;
    width: min(286px, 86vw);
    height: 100dvh;
    box-shadow: 16px 0 34px rgba(18,18,122,.28);
  }
  body:not(.nav-hidden) .sidebar { display: flex; }
  body.nav-hidden .sidebar { display: none; }
  .main,
  body.nav-hidden .main { width: 100%; padding: 64px 24px 44px; }
  #nav-toggle {
    width: 44px;
    height: 44px;
    left: max(10px, env(safe-area-inset-left));
    top: max(10px, env(safe-area-inset-top));
    font-size: 1.15rem;
  }
  .topbar { flex-direction: column; align-items: stretch; }
  .topbar .actions {
    width: 100%;
    align-items: stretch !important;
  }
  .demo-context {
    width: 100%;
    white-space: normal;
    border-radius: 10px;
    line-height: 1.35;
  }
  button, .btn, input, select, textarea { min-height: 44px; }
  input, select, textarea { font-size: 16px; }
  .rm-wrap, .journey-wrap, .chart-box { -webkit-overflow-scrolling: touch; }
}

@media (max-width: 760px) {
  html { font-size: 15px; }
  .main,
  body.nav-hidden .main {
    padding: 64px max(14px, env(safe-area-inset-right)) 34px max(14px, env(safe-area-inset-left));
  }
  h1.page-title { font-size: 1.38rem; }
  .page-sub { font-size: .84rem; }
  .card { padding: 14px; }
  .jw-stepper { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
  .jw-st { padding: 9px; min-height: 86px; }
  .jw-profile { display: grid; grid-template-columns: 1fr; }
  .jw-profile .f,
  .sk-row .sk-txt,
  .rate-row .rr-txt,
  .fit-hero .fh-main,
  .fdom-head h4 { min-width: 0; width: 100%; }
  .lvl-legend,
  #chg-legend { grid-template-columns: 1fr 1fr !important; }
  .rc-grid,
  .lp-grid,
  .li-grid,
  .cr-grid,
  .fdom-roles { grid-template-columns: minmax(0, 1fr); }
  .fdom-roles { padding: 10px; }
  .fit-hero { padding: 18px; gap: 14px; }
  .fit-hero .fh-pct { font-size: 2.2rem; }
  .sk-row { align-items: flex-start; }
  .rate-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    padding: 14px 2px;
  }
  .rate-row .rr-txt { grid-row: 1; }
  .rate-row .rr-txt b { font-size: .88rem; line-height: 1.25; }
  .rate-row .rr-txt span { font-size: .76rem; line-height: 1.45 !important; }
  .rate-row .have-pill {
    grid-row: 2;
    width: 100%;
    white-space: normal;
  }
  .rate-row .rr-exp { grid-row: 2; justify-self: start; }
  .rate-row > .lvl-seg {
    grid-row: 3;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
    width: 100%;
  }
  .rate-row > .lvl-seg button { width: 100%; height: 44px; }
  .jw-nav { flex-direction: column; align-items: stretch; }
  .jw-nav > span:empty { display: none; }
  .jw-nav .jw-hint { min-width: 0; width: 100%; }
  .jw-nav > .btn { width: 100%; }
  .jw-nav > span:last-child { width: 100%; }
  .jw-nav > span:last-child .btn { flex: 1 1 140px; }
  .pm-head { align-items: flex-start; }
  .pm-item { flex-wrap: wrap; }
  .agent-fab { right: 14px; bottom: max(14px, env(safe-area-inset-bottom)); }
  .agent-panel {
    right: 10px;
    bottom: 70px;
    width: calc(100vw - 20px);
    max-height: calc(100dvh - 90px);
  }

  /* Compact, horizontally scrollable skill matrix with a frozen skill column. */
  .rm-wrap { width: 100%; max-width: 100%; }
  .rm-tbl { min-width: 600px; table-layout: fixed; font-size: .62rem; }
  .rm-tbl th { padding: 6px 3px; font-size: .52rem; line-height: 1.15; }
  .rm-tbl td { padding: 5px 3px; }
  .rm-tbl th.sk,
  .rm-tbl td.sk {
    position: sticky;
    left: 0;
    width: 138px;
    min-width: 138px;
    max-width: 138px;
    text-align: left;
    box-shadow: 3px 0 8px rgba(25,25,153,.12);
  }
  .rm-tbl th.sk { z-index: 6; background: #f4f5fb; }
  .rm-tbl td.sk { z-index: 3; background: #fff; font-size: .65rem; }
  .rm-tbl td.sk span { font-size: .55rem; line-height: 1.25 !important; }
  .rm-tbl th:not(.sk):not(:last-child) { width: 54px; }
  .rm-tbl th:last-child { width: 180px; }
  .rm-tbl td.you .lvl-seg {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 3px;
    width: 100%;
  }
  .rm-tbl td.you .lvl-seg.big button {
    width: 100%;
    height: 34px;
    min-height: 34px;
    font-size: .62rem;
  }
  .rm-lvl { width: 22px; height: 20px; font-size: .6rem; }

  /* A readable vertical journey replaces the wide desktop SVG on phones. */
  .journey-mobile { width: 100%; }
  .jm-step {
    position: relative;
    display: grid;
    grid-template-columns: 50px minmax(0, 1fr);
    gap: 12px;
    padding: 4px 0 20px;
  }
  .jm-step:not(:last-child)::after {
    content: '';
    position: absolute;
    left: 23px;
    top: 46px;
    bottom: 0;
    width: 3px;
    background: var(--indigo-800);
    border-radius: 999px;
  }
  .jm-node {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--indigo-800);
    color: #fff;
    font-family: 'IBM Plex Mono', monospace;
    font-size: .66rem;
    font-weight: 800;
  }
  .jm-step.start .jm-node { background: #fff; color: var(--indigo-800); border: 2px solid #8b8bf0; }
  .jm-step.end .jm-node { background: var(--teal-500); }
  .jm-copy { min-width: 0; padding-top: 3px; }
  .jm-copy b { display: block; color: var(--heading); font-size: .88rem; line-height: 1.25; }
  .jm-copy span { display: block; color: var(--muted); font-size: .72rem; line-height: 1.4; margin-top: 3px; }
}

@media (max-width: 390px) {
  .lvl-legend,
  #chg-legend { grid-template-columns: 1fr !important; }
  .jw-st b { font-size: .7rem; }
  .jw-st .s { font-size: .58rem; }
  .li-filter button { flex: 1 1 calc(50% - 8px); }
}

/* Primary journey progression — unmistakable on desktop and touch screens. */
#n1, #n2, #n3, #n4, #n5 {
  background: var(--indigo-800);
  border-color: var(--indigo-800);
  color: #fff;
  font-weight: 700;
  box-shadow: 0 6px 16px -8px rgba(25, 25, 153, .8);
}
#n1:hover, #n2:hover, #n3:hover, #n4:hover, #n5:hover {
  background: var(--indigo-950);
  border-color: var(--indigo-950);
  color: #fff;
  transform: translateY(-1px);
}
#n1:focus-visible, #n2:focus-visible, #n3:focus-visible, #n4:focus-visible, #n5:focus-visible {
  outline: 3px solid rgba(70, 70, 245, .3);
  outline-offset: 3px;
}

/* Module 13 is intentionally self-service for this COP release. */
body[data-page="journey"] .agent-fab,
body[data-page="journey"] .agent-panel { display: none !important; }