/* =====================================================================
   Plan tab (js/plan*.js). Uses the tokens of app.css :root; adds only
   the option palette. Options are identified by letter + option colour;
   effect colours (--fx-*) keep their meaning (No-go, Check …) and are
   never used for options. Documented in web/README.md (Plan tab).
   ===================================================================== */
:root {
  /* option palette: selected option on the map = thick line in its colour; compare column heads */
  --opt-1: #1F5C63;   /* teal (= --accent): first option */
  --opt-2: #3E5C8A;   /* slate blue */
  --opt-3: #857A6E;   /* warm grey (ochre-free) */
  --opt-4: #8E4B6E;   /* plum */
  --opt-5: #4F7A6A;   /* sage */
  --opt-6: #5B5F97;   /* indigo grey */
}
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- pane frame ---------- */
.pl-pane { position: relative; }
.pl-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 16px; border-bottom: 1px solid var(--line); min-height: 40px; }
.pl-top-h { font-size: 11px; line-height: 14px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-2); font-weight: 650; }
.pl-scroll { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 0 0 24px; }
.pl-user { display: inline-flex; align-items: center; gap: 6px; min-height: 29px; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 2px 9px 2px 3px; font-size: 12px; color: var(--text-2); font-weight: 600; white-space: nowrap; }
.pl-user:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.pl-avatar { width: 20px; height: 20px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); display: inline-grid; place-items: center; font-size: 11px; font-weight: 700; }
.pl-user-choose .pl-avatar { background: var(--surface-2); color: var(--text-2); }
.pl-badge { min-width: 16px; height: 16px; border-radius: 8px; padding: 0 4px; background: var(--accent); color: #fff; font-size: 10.5px; line-height: 16px; font-weight: 700; text-align: center; }
.pl-menu { position: absolute; right: 0; top: calc(100% + 4px); z-index: 15; width: 300px; max-height: 360px; overflow-y: auto; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); padding: 8px 10px; }
.pl-inbox { list-style: none; margin: 4px 0; padding: 0; display: grid; gap: 2px; }
.pl-inbox button { display: block; width: 100%; text-align: left; background: none; border: 0; padding: 5px 6px; border-radius: 6px; font-size: 12px; line-height: 16px; color: var(--text-2); }
.pl-inbox button:hover { background: var(--bg); }
.pl-inbox li.unread button { color: var(--text); background: var(--accent-soft); }
.pl-menu-foot { display: flex; justify-content: space-between; border-top: 1px solid var(--line-soft); padding-top: 6px; margin-top: 4px; }
@media (max-width: 520px) {
  .pl-user { width: 29px; height: 29px; min-height: 0; padding: 2px; justify-content: center; }
  .pl-user-name { display: none; }
  .pl-badge { position: absolute; right: 2px; top: 5px; min-width: 12px; height: 12px; padding: 0 2px; font-size: 9px; line-height: 12px; }
  #workspace-user .pl-menu { right: 0; width: min(300px, calc(100vw - 10px)); }
}

/* ---------- shared bits ---------- */
.pl-h { font-size: 15px; line-height: 20px; font-weight: 650; margin: 0; }
.pl-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 16px 8px; }
.pl-mini-h { font-size: 11px; line-height: 14px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-3); font-weight: 600; margin: 0; }
.pl-mt { margin-top: 12px; margin-bottom: 4px; }
.pl-quiet { color: var(--text-3); margin: 4px 0; }
.pl-notready { color: #7A5B00; margin: 4px 0; }
.pl-notready code, .pl-notready-box code { font-size: 11px; }
.pl-notready-box { margin: 4px 16px 10px; padding: 10px 12px; border: 1px dashed color-mix(in srgb, var(--warn) 60%, white); border-radius: var(--r);
  background: color-mix(in srgb, var(--warn) 7%, white); }
.pl-notready-box p { margin: 0 0 4px; }
.pl-btn { display: inline-flex; align-items: center; gap: 4px; height: 30px; padding: 0 12px; border-radius: 6px; border: 1px solid var(--accent);
  background: var(--surface); color: var(--accent); font-size: 13px; font-weight: 600; white-space: nowrap; }
.pl-btn:hover:not(:disabled) { background: var(--accent-soft); }
.pl-btn-primary { background: var(--accent); color: #fff; }
.pl-btn-primary:hover:not(:disabled) { background: color-mix(in srgb, var(--accent) 85%, black); }
.pl-btn-quiet { border-color: var(--line); color: var(--text-2); font-weight: 500; }
.pl-btn-quiet:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); background: var(--surface); }
.pl-btn-quiet[aria-pressed=true] { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.pl-btn-sm { height: 26px; padding: 0 9px; font-size: 12px; }
.pl-btn:disabled { opacity: .45; cursor: default; }
.pl-input { height: 30px; padding: 4px 8px; border: 1px solid var(--line); border-radius: 6px; font: inherit; font-size: 13px; background: var(--surface); color: var(--text); min-width: 0; }
.pl-input:focus-visible { outline-offset: 0; }
.pl-input-sm { height: 26px; font-size: 12px; padding: 2px 6px; }
.pl-row { display: flex; gap: 8px; margin-top: 10px; }
.pl-row .pl-input { flex: 1; }
.pl-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pl-chip-btn { border: 1px solid var(--line); background: var(--surface); border-radius: 14px; padding: 3px 10px; font-size: 12px; color: var(--text-2); font-weight: 500; }
.pl-chip-btn:hover { border-color: var(--accent); color: var(--accent); }
.pl-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; }
.seg .n { color: var(--text-3); font-weight: 500; }
.pl-count { display: inline-flex; align-items: center; gap: 3px; color: var(--text-3); font-size: 12px; font-variant-numeric: tabular-nums; }
.pl-letter { display: inline-grid; place-items: center; width: 18px; height: 18px; flex: none; border-radius: 4px; background: var(--oc); color: #fff;
  font-size: 11px; font-weight: 700; line-height: 1; }
.pl-ph { display: inline-flex; align-items: center; height: 16px; padding: 0 5px; border-radius: 4px; background: var(--surface-2); color: var(--text-2);
  font-size: 11px; font-weight: 500; cursor: help; }
.pl-ph::before { content: "i"; display: inline-grid; place-items: center; width: 11px; height: 11px; margin-right: 4px; border-radius: 50%;
  border: 1px solid currentColor; font-size: 8.5px; font-weight: 700; font-style: italic; line-height: 1; }
.pl-conf { display: inline-flex; gap: 2px; vertical-align: 1px; cursor: help; }
.pl-conf i { width: 6px; height: 6px; border-radius: 50%; border: 1px solid var(--text-3); }
.pl-conf i.on { background: var(--text-2); border-color: var(--text-2); }

/* ---------- picker ---------- */
.pl-picker { padding: 16px; }
.pl-picker .pl-h { margin-bottom: 4px; }
.pl-user-list { margin-top: 12px; }
.pl-user-list .pl-mini-h { margin-bottom: 6px; }

/* ---------- plans list ---------- */
.pl-empty { padding: 4px 16px; }
.pl-empty p { margin: 0 0 4px; }
.pl-plans { list-style: none; margin: 0; padding: 0 8px; display: grid; gap: 2px; }
.pl-plan-row { display: grid; grid-template-columns: 1fr auto; gap: 0 8px; width: 100%; text-align: left; background: none; border: 1px solid transparent; border-radius: 6px; padding: 6px 8px; }
.pl-plan-row:hover { background: var(--bg); }
.pl-plan-title { font-weight: 500; font-size: 14px; line-height: 20px; }
.pl-plan-meta { grid-column: 1; font-size: 12px; line-height: 16px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.pl-plan-row .pl-count { grid-column: 2; grid-row: 1 / span 2; align-self: center; }

/* ---------- new plan ---------- */
.pl-form { padding: 0 16px; display: grid; gap: 12px; }
.pl-field { display: grid; gap: 4px; }
.pl-field > span:first-child { font-size: 11px; line-height: 14px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-3); font-weight: 600; }
.pl-field > .btn-link { justify-self: start; }
.pl-stop-row { display: flex; align-items: center; gap: 8px; min-height: 30px; }
.pl-stop-info { flex: 1; min-width: 0; display: grid; line-height: 16px; }
.pl-stop-row .btn-link[aria-pressed=true], .pl-field > .btn-link[aria-pressed=true] { color: var(--text); text-decoration: underline; }
.pl-go { display: flex; align-items: center; gap: 10px; }
.pl-depth { flex: none; }
.pl-depth button:disabled { opacity: .5; cursor: default; }

/* map stop markers (A / via / B); also used statically in the form */
.plan-stop { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--text); color: #fff;
  font: 700 11px/1 var(--sans); border: 2px solid #fff; box-shadow: 0 1px 3px rgba(0,0,0,.35); cursor: default; flex: none; }
.plan-stop-via { width: 18px; height: 18px; font-size: 10px; background: var(--surface); color: var(--text); border: 2px solid var(--text); }
.maplibregl-marker.plan-stop[draggable], .maplibregl-marker-draggable .plan-stop { cursor: grab; }
.plan-stop.static { box-shadow: none; }

/* ---------- plan view ---------- */
.pl-plan-head { padding: 0 16px 10px; }
.pl-title { font-size: 16px; line-height: 22px; font-weight: 650; margin: 0; }
.pl-sub { margin: 0; font-size: 12px; line-height: 16px; color: var(--text-3); }
.pl-sec { border-top: 1px solid var(--line); }
/* section band = the Layers tab's level-1 group band */
.pl-band { margin: 0; display: flex; align-items: center; gap: 6px; height: 32px; padding: 0 16px; background: var(--surface-2);
  font-size: 11px; line-height: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text); }
.pl-band-n { font-weight: 500; color: var(--text-3); text-transform: none; letter-spacing: 0; font-size: 12px; }
#pl-options, #pl-option { padding: 8px 16px 12px; }

/* option cards: primary = letter + name + P50; secondary = km · P80 · one key risk; tertiary on expand */
.pl-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.pl-card { position: relative; display: grid; grid-template-columns: 1fr auto; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
.pl-card::before { content: ""; position: absolute; left: -1px; top: -1px; bottom: -1px; width: 3px; border-radius: var(--r) 0 0 var(--r); background: var(--oc); opacity: .35; }
.pl-card.sel { border-color: var(--oc); box-shadow: 0 0 0 1px var(--oc); }
.pl-card.sel::before { opacity: 1; }
.pl-card.rejected .pl-card-name, .pl-card.rejected .pl-p50 { color: var(--text-3); text-decoration: line-through; text-decoration-thickness: 1px; }
.pl-card-main { display: grid; gap: 1px; text-align: left; background: none; border: 0; padding: 7px 4px 7px 10px; min-width: 0; }
.pl-card-r1 { display: flex; align-items: center; gap: 8px; min-width: 0; }
.pl-card-name { flex: 1; min-width: 0; font-size: 14px; line-height: 20px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-p50 { font-size: 14px; font-weight: 650; font-variant-numeric: tabular-nums; }
.pl-card-r2 { display: flex; flex-wrap: wrap; align-items: center; gap: 0 5px; padding-left: 26px; font-size: 12px; line-height: 16px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.pl-card-r3 { padding-left: 26px; font-size: 11px; line-height: 14px; color: var(--text-3); }
.pl-risk { display: inline-flex; align-items: center; gap: 4px; }
.pl-risk .fxsw { cursor: inherit; }
.pl-card-side { display: flex; align-items: flex-start; gap: 4px; padding: 8px 6px 0 0; }
.pl-exp { background: none; border: 0; padding: 3px 4px; border-radius: 4px; color: var(--text-3); }
.pl-exp:hover { color: var(--text); background: var(--bg); }
.pl-exp svg { transition: transform .12s; }
.pl-exp[aria-expanded=true] svg { transform: rotate(90deg); }
.pl-status { font-size: 11px; font-weight: 600; color: var(--text-2); }
.pl-status-preferred::before { content: "★ "; color: var(--accent); }
.pl-status-approved { color: var(--ok); }
.pl-status-approved::before { content: "✓ "; }
.pl-more { grid-column: 1 / -1; display: grid; grid-template-columns: 112px 1fr; gap: 3px 10px; margin: 0; padding: 6px 10px 9px 36px;
  border-top: 1px solid var(--line-soft); font-size: 12px; line-height: 16px; background: var(--bg); border-radius: 0 0 var(--r) var(--r); }
.pl-more dt { color: var(--text-3); }
.pl-more dd { margin: 0; font-variant-numeric: tabular-nums; }
.pl-more .pl-flags { margin: 0; }
.pl-cards-foot { display: flex; gap: 8px; align-items: center; margin: 8px 0 0; }

/* selected option */
.pl-opt-head { display: flex; align-items: center; gap: 8px; }
.pl-opt-title { flex: 1; min-width: 0; display: grid; line-height: 18px; }
.pl-opt-title b { font-weight: 600; }
.pl-rationale { margin: 8px 0; padding: 8px 10px; border-radius: var(--r); background: var(--bg); }
.pl-rationale .pl-row { margin-top: 6px; align-items: center; }
.pl-conflict { margin: 8px 0; padding: 8px 10px; border-radius: var(--r); border: 1px solid color-mix(in srgb, var(--warn) 55%, white);
  background: color-mix(in srgb, var(--warn) 9%, white); font-size: 12px; line-height: 16px; }
.pl-conflict p { margin: 0; }
.pl-tools { display: grid; gap: 6px; margin-top: 8px; }
.pl-tools [data-act="explain-route"] { letter-spacing: .01em; }
.pl-tool-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pl-tool-row .pl-mini-h { width: 108px; flex: none; }
.pl-edits { list-style: none; margin: 8px 0 0; padding: 6px 8px; display: grid; gap: 2px; background: var(--bg); border-radius: 6px; font-size: 12px; }
.pl-edits li { display: flex; gap: 8px; align-items: baseline; }
.pl-edits li > span:first-child { flex: 1; }
.pl-stretches { list-style: none; margin: 0; padding: 0; }
.pl-st { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto 50px 52px; align-items: center; gap: 6px; width: 100%; text-align: left;
  background: none; border: 0; border-top: 1px solid var(--line-soft); padding: 5px 2px; font-size: 12px; line-height: 16px; }
.pl-stretches li:first-child .pl-st { border-top: 0; }
.pl-st:hover { background: var(--bg); }
.pl-st.sel { background: var(--accent-soft); }
.pl-st-n { color: var(--text-3); font-variant-numeric: tabular-nums; text-align: right; }
.pl-st-main { display: grid; min-width: 0; }
.pl-st-name { font-size: 13px; line-height: 18px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-st-why { color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-st-fx { display: inline-flex; gap: 3px; }
.pl-st-len, .pl-st-eur { text-align: right; font-variant-numeric: tabular-nums; color: var(--text-2); }
.pl-st-eur { color: var(--text); font-weight: 500; }
.pl-history { margin-top: 10px; font-size: 12px; }
.pl-history summary { cursor: pointer; color: var(--text-2); font-weight: 500; }
.pl-versions { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 1px; }
.pl-versions li { display: grid; grid-template-columns: 30px auto auto 1fr auto; gap: 6px; align-items: baseline; padding: 2px 4px; border-radius: 4px; }
.pl-versions li.cur { background: var(--accent-soft); }
.pl-v-what { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-versions .num { font-variant-numeric: tabular-nums; }
.pl-exports { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line-soft); }
.pl-exports .pl-mini-h { width: 100%; }

/* activity */
.pl-feed { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 12px; line-height: 16px; color: var(--text-2); }
.pl-feed b { color: var(--text); font-weight: 600; }

/* ---------- threads (plan + layer drawer) ---------- */
.th-bar { display: flex; justify-content: flex-end; margin-bottom: 6px; }
.th-bar .seg { flex: none; }
.th-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.th { border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); transition: box-shadow .3s; }
.th.flash { box-shadow: 0 0 0 2px var(--accent); }
.th.resolved { background: var(--bg); }
.th.resolved .th-first { color: var(--text-3); }
.th-main { display: grid; gap: 2px; width: 100%; text-align: left; background: none; border: 0; padding: 7px 10px; }
.th-meta { display: flex; align-items: center; gap: 6px; font-size: 11px; line-height: 14px; color: var(--text-3); }
.th-anchor { font-weight: 600; color: var(--text-2); }
.th-age { margin-left: auto; color: var(--text-3); font-size: 11px; }
.th-c .th-age { margin-left: 4px; }
.th-first { font-size: 13px; line-height: 18px; color: var(--text); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.th.open .th-first { -webkit-line-clamp: unset; display: block; }
.th-first b, .th-c b { font-weight: 600; margin-right: 2px; }
.th-foot { font-size: 11px; line-height: 14px; color: var(--text-3); }
.th-more { padding: 0 10px 8px; border-top: 1px solid var(--line-soft); }
.th-c { padding: 6px 0; border-bottom: 1px solid var(--line-soft); font-size: 13px; line-height: 18px; }
.th-reply, .th-new { display: grid; gap: 6px; padding-top: 8px; }
.th-new { margin-bottom: 8px; padding-top: 0; }
.th-reply textarea, .th-new textarea { width: 100%; resize: vertical; min-height: 44px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px;
  font: inherit; font-size: 13px; line-height: 18px; background: var(--surface); color: var(--text); }
.th-actions { display: flex; align-items: center; gap: 10px; }
.th-on { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-3); }
.th-on select { flex: 1; }
.mention { color: var(--accent); font-weight: 600; }
.mention.me { background: var(--accent-soft); border-radius: 3px; padding: 0 2px; }
.layer-discussion { max-width: 640px; }

/* ---------- map overlays ---------- */
.plan-pin { display: inline-flex; align-items: center; gap: 3px; height: 20px; padding: 0 6px 0 5px; border-radius: 10px 10px 10px 2px;
  background: var(--surface); color: var(--accent); border: 1.5px solid var(--accent); box-shadow: 0 1px 3px rgba(0,0,0,.3);
  font: 700 11px/1 var(--sans); cursor: pointer; }
.plan-pin:hover, .plan-pin:focus-visible { background: var(--accent); color: #fff; }
.plan-pin.resolved { color: var(--text-3); border-color: var(--text-3); }
.plan-tool-hint { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); z-index: 3; background: var(--text); color: #fff;
  padding: 6px 12px; border-radius: 16px; font-size: 13px; box-shadow: var(--shadow); display: flex; gap: 10px; align-items: center; }
.plan-tool-hint .btn-link { color: #BFE3E6; }
.plan-pop .maplibregl-popup-content { padding: 7px 10px; border-radius: 6px; box-shadow: var(--shadow); font: 12px/16px var(--sans); color: var(--text-2); }
.pp-h { display: flex; gap: 8px; align-items: baseline; }
.pp-h b { font-size: 14px; color: var(--text); font-variant-numeric: tabular-nums; }
.pp-h span { color: var(--text-3); }
.pp-why { margin-top: 2px; }
.pp-flag { margin-top: 2px; font-weight: 600; }
.pp-foot { margin-top: 3px; color: var(--text-3); font-size: 11px; }

/* ---------- right panel: drill-down + compare ---------- */
.insp-comment { float: right; margin-top: 2px; font-weight: 500; }
.pl-kicker { display: flex; align-items: center; gap: 6px; margin: 2px 0; font-size: 12px; color: var(--text-3); }
.pl-drill-h { font-size: 15px; line-height: 20px; margin: 0 0 4px; font-weight: 600; }
.pl-drill-sum { display: flex; align-items: baseline; gap: 10px; font-variant-numeric: tabular-nums; font-size: 12px; }
.pl-big { font-size: 20px; line-height: 26px; font-weight: 650; color: var(--text); }
.pl-facts { margin: 4px 0 0; font-size: 12px; line-height: 16px; color: var(--text-2); }
.pl-flags { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; font-size: 12px; line-height: 16px; }
.pl-flags li { display: flex; align-items: center; gap: 6px; }
.pl-terms { width: 100%; border-collapse: collapse; font-size: 12px; }
.pl-terms th { text-align: left; color: var(--text-3); font-weight: 550; border-bottom: 1px solid var(--line); padding: 3px 6px 3px 0; }
.pl-terms td { border-bottom: 1px solid var(--line-soft); padding: 4px 6px 4px 0; vertical-align: top; }
.pl-terms .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pl-terms summary { cursor: pointer; font-weight: 500; color: var(--text); }
.pl-terms details[open] summary { margin-bottom: 3px; }
.pl-why { color: var(--text-2); line-height: 16px; }
.pl-set, .pl-prov { color: var(--text-3); font-size: 11px; line-height: 15px; margin-top: 2px; }
.pl-segs { margin-top: 10px; font-size: 12px; }
.pl-segs summary { cursor: pointer; color: var(--text-2); }
.pl-segs ul { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 2px; }
.pl-segs li { display: grid; grid-template-columns: 38px 50px 52px 1fr; gap: 6px; font-variant-numeric: tabular-nums; }
.pl-segs li .t-3 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-foot { margin-top: 12px; }
.pl-evidence-panel { display: grid; gap: 12px; padding-bottom: 10px; }
.ev-intro { padding: 12px 13px; border-radius: 11px; background: linear-gradient(135deg, #183F45, #28626A 72%, #3A7777); color: #fff; }
.ev-intro .ev-kicker { color: #BBE0DF; font-size: 10px; text-transform: uppercase; letter-spacing: .1em; font-weight: 700; }
.ev-intro h3 { margin: 7px 0 3px; font-size: 20px; line-height: 24px; font-weight: 650; }
.ev-intro p { margin: 0; color: #E0F0EF; font-size: 12px; }
.ev-section { padding: 13px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface); }
.ev-rock { border-color: #D8C9B9; background: linear-gradient(145deg, #FBF7EF, #F4EAE0); }
.ev-section-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.ev-section-head h4 { margin: 0; font-size: 15px; line-height: 19px; }
.ev-index { display: grid; place-items: center; width: 22px; height: 22px; flex: none; border-radius: 50%; background: var(--surface-2); color: var(--text-2); font: 10px var(--mono); }
.ev-rock-numbers { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ev-rock-numbers > div, .ev-factors > div { display: grid; align-content: start; gap: 1px; }
.ev-rock-numbers strong { color: #5B3727; font-size: 27px; line-height: 30px; font-variant-numeric: tabular-nums; }
.ev-rock-numbers span, .ev-factors span { font-size: 11px; line-height: 15px; color: var(--text-2); }
.ev-route-band { position: relative; height: 13px; margin: 11px 0 5px; background: #E6E5DF; border-radius: 20px; overflow: hidden; }
.ev-route-band i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 20px; }
.ev-route-band .ev-p80 { background: #C8A986; }.ev-route-band .ev-mean { background: #805744; }
.ev-caption { margin: 7px 0; color: var(--text-2); font-size: 11px; line-height: 16px; }
.ev-factors { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.ev-factors > div { min-width: 0; padding: 7px; border: 1px solid var(--line-soft); border-radius: 7px; background: var(--bg); }
.ev-factors strong { font-size: 18px; line-height: 21px; font-variant-numeric: tabular-nums; }
.ev-confidence { display: flex; align-items: baseline; gap: 9px; padding: 2px 0 10px; }
.ev-confidence strong { color: var(--accent); font-size: 21px; line-height: 25px; text-transform: capitalize; }
.ev-confidence span { font-size: 11px; line-height: 15px; color: var(--text-2); }
.ev-exposure { margin: 8px 0 11px; }.ev-exposure > div:first-child { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; }
.ev-exposure > div:first-child span { font-variant-numeric: tabular-nums; font-weight: 650; }
.ev-exposure .ev-track { height: 6px; margin: 5px 0 3px; border-radius: 8px; background: var(--surface-2); overflow: hidden; }
.ev-exposure .ev-track i { display: block; height: 100%; border-radius: 8px; }
.ev-exposure p { margin: 0; color: var(--text-3); font-size: 11px; line-height: 15px; }
.ev-note { border-top: 1px solid var(--line-soft); padding-top: 8px; margin-top: 9px; font-size: 11px; line-height: 16px; color: var(--text-2); }
.ev-note summary { cursor: pointer; font-weight: 600; color: var(--accent); }.ev-note p { margin: 7px 0 0; }
.ev-foot { margin: 0; padding: 0 4px; font-size: 11px; line-height: 16px; color: var(--text-3); }
.pl-items { list-style: none; margin: 0; padding: 0; font-size: 12px; }
.pl-items li { border-bottom: 1px solid var(--line-soft); padding: 3px 0; }
.pl-items summary { cursor: pointer; display: grid; grid-template-columns: 62px 1fr auto; gap: 6px; align-items: baseline; }
.pl-it-k { color: var(--text-3); }
.pl-it-w { color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-items .num { font-variant-numeric: tabular-nums; }
.pl-cmp { overflow-x: auto; }
.pl-cmp-t { width: 100%; border-collapse: collapse; font-size: 12px; }
.pl-cmp-t th, .pl-cmp-t td { padding: 4px 4px; border-bottom: 1px solid var(--line-soft); }
.pl-cmp-t td { white-space: nowrap; }
.pl-cmp-t thead th { vertical-align: bottom; text-align: right; font-weight: 600; font-size: 12px; line-height: 15px; cursor: pointer; }
.pl-cmp-t thead th span:not(.pl-letter) { display: block; margin-top: 3px; color: var(--text); }
.pl-cmp-t thead th .pl-letter { margin-left: auto; }
.pl-cmp-t tbody th { text-align: left; font-weight: 400; color: var(--text-2); min-width: 92px; line-height: 15px; }
.pl-cmp-t tbody th .fxsw { display: inline-block; vertical-align: -1px; margin-right: 5px; }
.pl-cmp-t .num { text-align: right; font-variant-numeric: tabular-nums; color: var(--text-2); }
.pl-cmp-t .best { font-weight: 700; color: var(--text); }
.pl-cmp-primary th, .pl-cmp-primary td { font-size: 13px; }
.pl-cmp-primary td { color: var(--text); }

.toast-warn { background: #5C4700; }
.toast-danger { background: var(--danger); }

/* Layers tab: open-thread count after the layer name (panel.js threadBadge) */
.th-count { flex: none; display: inline-flex; align-items: center; gap: 2px; background: none; border: 0; padding: 1px 3px; border-radius: 4px;
  color: var(--accent); font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; }
.th-count:hover { background: var(--accent-soft); }
.pl-checks .fxsw { display: inline-block; vertical-align: -1px; margin-right: 5px; }

/* =====================================================================
   v2: plan header (sticky) with toolbar + sub-tabs, sections, section
   detail with depth control + depth curve, drawing hint, Present mode
   ===================================================================== */
.pl-planhead { position: sticky; top: 0; z-index: 5; background: var(--surface); padding: 0 16px; border-bottom: 1px solid var(--line); }
.pl-bar-plan { padding: 10px 0 6px; }
.pl-planhead .pl-title { margin-top: 2px; }
.pl-toolbar { position: relative; display: flex; gap: 2px; }
.pl-output-action { border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--text-2); padding: 4px 8px; font-size: 12px; line-height: 17px; font-weight: 600; white-space: nowrap; }
.pl-output-action:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.pl-output-action:disabled { opacity: .45; cursor: default; }
.pl-tb { background: none; border: 1px solid transparent; border-radius: 6px; padding: 3px 7px; font-size: 12px; line-height: 16px; font-weight: 550; color: var(--text-2); }
.pl-tb:hover:not(:disabled) { color: var(--accent); border-color: var(--line); }
.pl-tb[aria-pressed=true] { color: var(--accent); background: var(--accent-soft); border-color: var(--accent); }
.pl-tb:disabled { opacity: .45; cursor: default; }
.pl-tb[data-soon] { color: var(--text-3); }
.pl-subtabs { display: flex; gap: 2px; margin: 8px -4px 0; }
.pl-subtabs [role=tab] { position: relative; background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; padding: 6px 6px 7px;
  font-size: 13px; font-weight: 550; color: var(--text-2); display: inline-flex; align-items: center; gap: 4px; }
.pl-subtabs [role=tab]:hover { color: var(--text); }
.pl-subtabs [role=tab][aria-selected=true] { color: var(--accent); border-bottom-color: var(--accent); }
.pl-subtabs .n { font-size: 11px; font-weight: 500; color: var(--text-3); background: var(--surface-2); border-radius: 8px; padding: 0 5px; line-height: 16px; }
.pl-newdot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); display: inline-block; }
.pl-subpane { padding: 10px 16px 16px; }
.pl-subpane .pl-band { margin: 14px -16px 8px; }
.pl-opt-actions { margin: 0 0 10px; }
.pl-msg { margin: 8px 16px 0; }
.pl-menu-export { left: auto; right: 0; width: 290px; }
.pl-menu-item { display: grid; gap: 1px; width: 100%; text-align: left; background: none; border: 0; border-radius: 6px; padding: 6px 8px; font-size: 13px; }
.pl-menu-item span { font-size: 11px; line-height: 14px; }
.pl-menu-item:hover:not(:disabled), .pl-menu-item:focus-visible { background: var(--bg); }
.pl-menu-item:disabled { opacity: .45; }

/* sections list: primary = n + title + €, secondary = subtitle + swatches + mini cost bar */
.pl-sec-head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; font-size: 13px; }
.pl-secs { list-style: none; margin: 6px 0 0; padding: 0; }
.pl-sec { position: relative; display: grid; grid-template-columns: 1fr auto; border-top: 1px solid var(--line-soft); }
.pl-sec:first-child { border-top: 0; }
.pl-sec.hover { background: var(--bg); }
.pl-sec.sel { background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--accent); }
.pl-sec-main { display: grid; grid-template-columns: 22px 1fr; gap: 6px; align-items: start; background: none; border: 0; padding: 7px 2px 7px 4px; text-align: left; min-width: 0; }
.pl-sec-n { color: var(--text-3); font-size: 12px; line-height: 20px; text-align: right; font-variant-numeric: tabular-nums; }
.pl-sec-body { display: grid; gap: 1px; min-width: 0; }
.pl-sec-r1, .pl-sec-r2 { display: flex; gap: 8px; align-items: baseline; min-width: 0; }
.pl-sec-title { flex: 1; min-width: 0; font-size: 14px; line-height: 20px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-sec-eur { font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.pl-sec-sub { flex: 1; min-width: 0; font-size: 12px; line-height: 16px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-sec-depth { flex: none; font-size: 11px; color: var(--text-2); white-space: nowrap; }
.pl-sec-fx { display: inline-flex; gap: 3px; align-items: center; }
.pl-minibar { display: block; height: 4px; margin-top: 3px; background: var(--surface-2); border-radius: 2px; overflow: hidden; }
.pl-minibar i { display: block; height: 100%; background: color-mix(in srgb, var(--accent) 55%, white); border-radius: 2px; }
.pl-sec.sel .pl-minibar i { background: var(--accent); }
.pl-sec .pl-exp { align-self: start; margin-top: 8px; }
.pl-drivers { grid-column: 1 / -1; list-style: none; margin: 0 0 8px 28px; padding: 6px 8px; background: var(--bg); border-radius: 6px; display: grid; gap: 4px; font-size: 12px; }
.pl-drivers li { display: grid; grid-template-columns: 1fr auto; gap: 0 8px; }
.pl-dr-t { font-weight: 500; }
.pl-drivers .num { font-variant-numeric: tabular-nums; }
.pl-dr-why { grid-column: 1 / -1; color: var(--text-2); line-height: 16px; }
.pl-drivers-d { margin: 0; background: none; padding: 0; }

/* section detail: depth control + depth curve */
.pl-secd .pl-sub { margin: -2px 0 4px; }
.pl-depthctl { display: flex; align-items: center; gap: 10px; }
.pl-depthctl input { flex: 1; accent-color: var(--accent); }
.pl-depth-out { font-weight: 600; font-variant-numeric: tabular-nums; min-width: 44px; text-align: right; }
.pl-depth-what { margin: 4px 0 6px; color: var(--text-2); font-variant-numeric: tabular-nums; }
svg.dc { display: block; margin: 4px 0 2px; overflow: visible; }
.dc-title { font: 600 11px/1 var(--sans); fill: var(--text-2); }
.dc-tick { font: 10.5px/1 var(--sans); fill: var(--text-3); font-variant-numeric: tabular-nums; }
.dc-grid { stroke: var(--line); stroke-width: 1; }
.dc-line { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.dc-cur { stroke: var(--text-2); stroke-width: 1; stroke-dasharray: 2 2; }
.dc-dot { fill: var(--accent); stroke: var(--surface); stroke-width: 2; }
.dc-hit { fill: transparent; cursor: crosshair; }

/* drawing / edit hint bar on the map */
.plan-tool-hint .seg { background: rgba(255,255,255,.14); }
.plan-tool-hint .seg button { color: #DDE7E4; }
.plan-tool-hint .seg button[aria-checked=true] { background: #fff; color: var(--accent); }
.dh-title { font-weight: 650; }
.dh-n, .dh-keys { color: #C9D4D0; font-size: 12px; }
.dh-warn { color: #FFD9A8; font-size: 12px; }
.dh-btn { border: 1px solid rgba(255,255,255,.4); background: none; color: #fff; border-radius: 6px; padding: 2px 9px; font-size: 12px; font-weight: 600; }
.dh-btn:hover { background: rgba(255,255,255,.12); }
.dh-primary { background: #fff; color: var(--accent); border-color: #fff; }
.dh-primary:hover { background: #E6F0EF; }

/* ---------- Present mode (storymap) ---------- */
body.plan-presenting #app { grid-template-columns: minmax(0, 1fr); grid-template-rows: 100vh; }
body.plan-presenting #workspace-header, body.plan-presenting #panel, body.plan-presenting #inspector { display: none; }
body.plan-presenting #map-wrap { grid-column: 1; grid-row: 1; }
body.plan-presenting .map-legend, body.plan-presenting .coords, body.plan-presenting #plan-tool-hint { display: none; }
.ps-root { position: absolute; inset: 0; z-index: 6; pointer-events: none; }
.ps-root > * { pointer-events: auto; }
.ps-top { position: absolute; top: 12px; left: 12px; right: 60px; display: flex; align-items: center; gap: 14px; padding: 6px 10px 6px 12px;
  background: rgba(22,32,29,.86); color: #fff; border-radius: 10px; font-size: 13px; }
.ps-top-t { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.ps-dots { flex: 1; display: flex; justify-content: center; gap: 5px; flex-wrap: wrap; }
.ps-dot { width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.7); background: none; padding: 0; }
.ps-dot.done { background: rgba(255,255,255,.55); border-color: transparent; }
.ps-dot.on { background: #fff; border-color: #fff; transform: scale(1.25); }
.ps-count { font-variant-numeric: tabular-nums; color: #C9D4D0; }
.ps-ctl { background: none; border: 1px solid rgba(255,255,255,.4); color: #fff; border-radius: 6px; padding: 2px 10px; font-size: 12px; font-weight: 600; }
.ps-ctl:hover, .ps-ctl[aria-pressed=true] { background: rgba(255,255,255,.14); }
.ps-card { position: absolute; left: 16px; top: 64px; width: 420px; max-height: calc(100vh - 80px); overflow-y: auto; display: flex; flex-direction: column;
  background: var(--surface); border-radius: 12px; box-shadow: 0 8px 32px rgba(0,0,0,.28); padding: 18px 20px 14px; }
.ps-kicker { margin: 0; font-size: 11px; line-height: 14px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-3); font-weight: 650; }
.ps-h { margin: 4px 0 2px; font-size: 20px; line-height: 26px; font-weight: 650; }
.ps-lead { margin: 0 0 10px; color: var(--text-2); }
.ps-hero { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; margin: 4px 0 14px; }
.ps-hero > div { display: grid; align-content: center; gap: 2px; min-height: 66px; padding: 9px 7px; border-radius: 8px; background: var(--accent-soft); }
.ps-hero strong { font-size: 18px; line-height: 22px; font-variant-numeric: tabular-nums; color: var(--accent); white-space: nowrap; }
.ps-hero span { font-size: 10px; line-height: 13px; color: var(--text-2); }
.ps-card { animation: ps-enter .22s ease-out; }
@keyframes ps-enter { from { opacity: .65; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .ps-card { animation: none; } }
.ps-num { display: flex; align-items: baseline; gap: 12px; margin-bottom: 10px; font-variant-numeric: tabular-nums; }
.ps-big { font-size: 28px; line-height: 34px; font-weight: 700; }
.ps-cum { margin: 2px 0 12px; }
.ps-cum-bar { display: flex; gap: 2px; height: 14px; }
.ps-cum-bar i { display: block; height: 100%; background: var(--surface-2); border-radius: 3px; transition: background-color .5s; }
.ps-cum-bar i.done { background: color-mix(in srgb, var(--oc) 45%, white); }
.ps-cum-bar i.cur { background: var(--oc); }
.ps-cum-lab { display: flex; justify-content: space-between; margin-top: 4px; font-size: 12px; font-variant-numeric: tabular-nums; }
.ps-sub { margin: 12px 0 6px; font-size: 11px; line-height: 14px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-2); font-weight: 650; }
.ps-drivers { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ps-dr-h { display: flex; justify-content: space-between; gap: 8px; }
.ps-dr-h .num { font-variant-numeric: tabular-nums; font-weight: 600; }
.ps-dr-why { display: block; font-size: 12px; line-height: 16px; color: var(--text-2); }
.ps-list { margin: 0; padding-left: 18px; display: grid; gap: 3px; }
.ps-cmp { width: 100%; border-collapse: collapse; font-size: 12.5px; margin: 4px 0 6px; }
.ps-cmp th { text-align: left; font-weight: 550; color: var(--text-3); border-bottom: 1px solid var(--line); padding: 3px 4px; }
.ps-cmp td { padding: 4px; border-bottom: 1px solid var(--line-soft); }
.ps-cmp td:first-child { display: flex; align-items: center; gap: 6px; }
.ps-cmp .num { text-align: right; font-variant-numeric: tabular-nums; }
.ps-cmp tr.cur td { font-weight: 650; background: var(--accent-soft); }
.ps-threads { margin: 10px 0 0; font-size: 12px; color: var(--text-2); }
.ps-checks { margin: 0; font-size: 13px; }
.ps-checks .fxsw { display: inline-block; vertical-align: -1px; }
.ps-range { position: relative; margin: 8px 0 18px; }
.ps-range-track { position: relative; height: 10px; background: var(--surface-2); border-radius: 5px; margin-top: 22px; }
.ps-range-track i { position: absolute; top: 0; bottom: 0; background: color-mix(in srgb, var(--oc) 50%, white); border-radius: 5px; }
.ps-range-track b { position: absolute; top: -4px; width: 3px; height: 18px; margin-left: -1.5px; background: var(--oc); border-radius: 2px; }
.ps-range-lab span { position: absolute; top: -2px; transform: translateX(-50%); font-size: 12px; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ps-range-lab span:last-child { top: 34px; }
.ps-range-ends { display: flex; justify-content: space-between; margin-top: 22px; }
.ps-nav { margin-top: 18px; padding-top: 10px; border-top: 1px solid var(--line-soft); display: flex; align-items: center; justify-content: space-between; gap: 8px; }
@media (max-width: 700px) {
  body.plan-presenting #map { bottom: auto; height: 45vh; }
  .ps-top { top: 6px; left: 6px; right: 6px; gap: 6px; padding: 5px 7px; }
  .ps-top-t { flex: 1; font-size: 11px; }
  .ps-dots, .ps-top [data-pp="auto"] { display: none; }
  .ps-count { font-size: 11px; white-space: nowrap; }
  .ps-ctl { padding: 2px 6px; font-size: 11px; white-space: nowrap; }
  .ps-card { left: 0; right: 0; bottom: 0; top: 45vh; width: auto; max-height: none; padding: 14px 16px 76px; border-radius: 14px 14px 0 0; }
  .ps-hero strong { font-size: 15px; }
  .ps-nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 7; margin: 0; padding: 10px 16px 18px; background: var(--surface); }
  .ps-nav .t-3 { display: none; }
}
.plan-tool-hint { max-width: calc(100% - 120px); flex-wrap: wrap; justify-content: center; row-gap: 4px; }
.dh-keys, .dh-n { white-space: nowrap; }

/* ---------- v2.1 polish: section joints, map actions, calmer section detail ---------- */
.pl-map-actions { position: absolute; top: 10px; right: 58px; z-index: 5; display: flex; gap: 6px; }
.pl-map-actions button { position: relative; display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); color: var(--text-2); box-shadow: var(--shadow); }
.pl-map-actions button:hover, .pl-map-actions button.active { color: var(--accent); background: var(--accent-soft); border-color: var(--accent); }
.pl-map-actions button > svg:first-child { width: 17px; height: 17px; }
.pl-map-action-count { position: absolute; right: -4px; bottom: -4px; min-width: 15px; height: 15px; padding: 0 3px; border-radius: 8px; background: var(--accent); color: #fff; font-size: 10px; line-height: 15px; font-weight: 700; }
.pl-map-action-count:empty { display: none; }
.pl-map-action-dot { position: absolute; right: 3px; top: 3px; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
body.plan-presenting .pl-map-actions { display: none; }
.pl-depthbox { margin: 12px 0 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r); }
.pl-depthhead { display: flex; justify-content: space-between; align-items: baseline; }
.pl-depthbox .pl-depth-out { font-size: 15px; }
.pl-depthbox .pl-btn { margin-top: 6px; }
.pl-whybox { margin-top: 12px; background: var(--surface-2); border-radius: var(--r); padding: 0 12px; }
.pl-whybox > summary { cursor: pointer; display: flex; align-items: baseline; gap: 8px; padding: 9px 0; list-style: none; }
.pl-whybox > summary::-webkit-details-marker { display: none; }
.pl-whybox > summary::before { content: "▸"; color: var(--text-3); font-size: 10px; }
.pl-whybox[open] > summary::before { content: "▾"; }
.pl-why-peek { margin-left: auto; font-size: 12px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.pl-whybox[open] { padding-bottom: 10px; }
.pl-whybox .pl-facts { color: var(--text-2); margin: 8px 0 0; }
.pl-whybox .sec { margin-top: 12px; }

/* four Plan sub-tabs in 360 px; Design has its own workspace mode */
.pl-subtabs { gap: 0; margin: 8px -6px 0; }
.pl-subtabs [role=tab] { padding: 6px 4px 7px; font-size: 12px; gap: 3px; }
.pl-subtabs { overflow-x: auto; scrollbar-width: none; }
.pl-subtabs .n { padding: 0 4px; font-size: 10.5px; }