/* ==========================================================================
   techmap.css — what current-state-map.html adds to the house theme.

   No hex colour in the JavaScript and none in this file outside the
   light-ground block: every fill, stroke and dash reads a token from artifact.css.
   The page is light only, on a white ground.
   ========================================================================== */

/* text that sits on --deep (table heads, matrix layer row) */
:root { --on-deep: #FFFDF8; }

/* light only, white ground */
:root { color-scheme: light; --surface: #FFFDF8; }
body { background: #FFFDF8; }
.app-top { color: var(--accent-lift); }
.app-top .eyebrow { color: var(--accent-lift); }

/* --- the evidence scale: one definition, read by SVG and HTML alike ---------
   Fill + outline pattern + a text tag. Never colour alone. */
.ev-observed   { --ev-bg: var(--mint);  --ev-fg: var(--on-mint);  --ev-bw: 2px; --ev-bs: solid;  --ev-sw: 2;   --ev-da: none; }
.ev-documented { --ev-bg: var(--blue);  --ev-fg: var(--on-blue);  --ev-bw: 1px; --ev-bs: solid;  --ev-sw: 1;   --ev-da: none; }
.ev-codemap    { --ev-bg: var(--stone); --ev-fg: var(--on-stone); --ev-bw: 3px; --ev-bs: double; --ev-sw: 1.6; --ev-da: 9 2 2 2; }
.ev-reported   { --ev-bg: var(--sand);  --ev-fg: var(--on-sand);  --ev-bw: 1px; --ev-bs: dashed; --ev-sw: 1.3; --ev-da: 4 3; }
.ev-unknown    { --ev-bg: var(--rose);  --ev-fg: var(--on-rose);  --ev-bw: 2px; --ev-bs: dotted; --ev-sw: 1.8; --ev-da: 1.5 3; }

.tm-ev {
  display: inline-flex; align-items: center; gap: 4px; vertical-align: 1px;
  padding: 0 5px; font-size: var(--t-9); font-weight: bold; letter-spacing: .04em; line-height: 1.5; white-space: nowrap;
  background: var(--ev-bg); color: var(--ev-fg); border: var(--ev-bw) var(--ev-bs) var(--ev-fg);
}
.tm-ev i { display: none; }

/* --- page frame ------------------------------------------------------------ */
.tm-skip { position: absolute; left: -999px; top: 4px; background: var(--paper); color: var(--ink); padding: 6px 10px; z-index: 50; }
.tm-skip:focus { left: 8px; outline: 3px solid var(--focus); }
.tm-top { flex-wrap: wrap; }
.tm-top-text { min-width: 0; flex: 1 1 520px; }
.tm-back { color: var(--accent-lift); text-decoration: none; font-size: var(--t-12); }
.app-instruction { max-width: 880px; color: var(--accent-lift); }
.tm-shell { padding-top: 12px; }
.tm-shell button, .tm-shell select, .tm-shell input { font-family: inherit; }
.tm-shell :focus-visible, .tm-top :focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.tm-shell svg :focus-visible { outline: none; }
.tm-shell h2 { font-family: var(--font-display); font-weight: normal; font-size: var(--t-21); color: var(--ink); margin: 0 0 6px; }
.tm-h3 { font-family: var(--font-display); font-weight: normal; font-size: var(--t-19); color: var(--ink); margin: 22px 0 6px; }

.tm-lead { background: var(--paper); border: 1px solid var(--rule); border-left: 5px solid var(--amber); padding: 12px 16px; margin: 0 0 12px; }
.tm-lead p { margin: 4px 0; max-width: 1200px; font-size: var(--t-13); line-height: 1.5; color: var(--ink-soft); }
.tm-asof b { color: var(--ink); }
.tm-stats { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.tm-tile { display: flex; flex-direction: column; gap: 2px; min-width: 118px; padding: 8px 12px; border: 1px solid var(--rule); border-top: 3px solid var(--accent); background: var(--surface); }
.tm-tile.is-wide { flex: 1 1 280px; }
.tm-tile.is-warn { border-top-color: var(--coral); }
.tm-tile-num { font-family: var(--font-display); font-size: var(--t-30); line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; }
.tm-tile-cap { font-size: var(--t-9); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--ink-faint); font-weight: bold; }
.tm-tile-sub { font-size: var(--t-11); color: var(--ink-soft); line-height: 1.6; }


.tm-lead h2 { margin: 0 0 4px; }
.tm-lead p { max-width: 110ch; }
.tm-about { margin-top: 8px; }
.tm-about summary, .tm-fold summary { cursor: pointer; color: var(--accent); font-weight: bold; font-size: var(--t-12); }
.tm-about summary { display: inline-block; }
.tm-about > div { margin-top: 6px; max-width: 110ch; }
.tm-about > div p { margin: 6px 0; }

/* --- tabs ----------------------------------------------------------------- */
.tm-tabs { display: flex; gap: 0; flex-wrap: wrap; align-items: stretch; border-bottom: 2px solid var(--ink); margin-top: 6px; }
.tm-tabs button {
  border: 1px solid var(--rule); border-bottom: 0; background: var(--surface); color: var(--ink-soft);
  padding: 9px 20px; font-size: var(--t-14); font-weight: bold; cursor: pointer; margin-right: -1px;
}
.tm-tabs button[aria-selected="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.tm-tabs button:hover:not([aria-selected="true"]) { color: var(--ink); background: var(--paper); }

/* --- one tidy bar per view: plain labels above the controls ------------------ */
.tm-bar { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: flex-end; padding: 8px 12px; margin: 8px 0 0; border: 1px solid var(--rule); background: var(--paper); }
.tm-vbar { background: var(--surface); margin: 0 0 8px; }
.tm-f { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; }
.tm-f.tm-grow { flex: 1 1 220px; }
.tm-zb { display: inline-flex; }
.tm-gl { font-size: var(--t-11); font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--ink-soft); margin: 0; }
.tm-bar select, .tm-bar input[type="search"], .tm-btn, .tm-pop summary, .tm-segb, .tm-ibtn {
  min-height: 30px; font-size: var(--t-12); font-family: inherit; color: var(--ink); line-height: 1.2;
}
.tm-bar select, .tm-bar input[type="search"] { border: 1px solid var(--rule); background: var(--surface); padding: 4px 8px; max-width: 100%; min-width: 0; }
.tm-bar select { width: 190px; max-width: 100%; }
.tm-f.tm-grow input { width: 100%; }
.tm-btn { display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--rule); background: var(--surface); padding: 4px 11px; font-weight: bold; cursor: pointer; }
.tm-btn:hover:not(:disabled), .tm-ibtn:hover { border-color: var(--accent); }
.tm-btn:disabled { opacity: .45; cursor: default; }
.tm-ibtn { display: inline-grid; place-items: center; width: 30px; padding: 0; border: 1px solid var(--rule); background: var(--surface); cursor: pointer; margin-right: -1px; }
.tm-ibtn svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tm-seg { display: inline-flex; }
.tm-segb { border: 1px solid var(--rule); background: var(--surface); padding: 4px 11px; cursor: pointer; margin-right: -1px; font-weight: 600; }
.tm-segb:hover { border-color: var(--accent); position: relative; }
.tm-segb[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); position: relative; }
.tm-pop { position: relative; }
.tm-pop summary { display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--rule); background: var(--surface); padding: 4px 10px; cursor: pointer; list-style: none; }
.tm-pop summary::-webkit-details-marker { display: none; }
.tm-pop summary::after { content: "\25BE"; color: var(--ink-faint); }
.tm-pop.is-on summary { border-color: var(--coral); }
.tm-pop-body { position: absolute; z-index: 30; top: calc(100% + 3px); left: 0; min-width: 250px; background: var(--paper); border: 1px solid var(--ink); box-shadow: var(--shadow); padding: 6px 8px; }
.tm-chk { display: flex; align-items: center; gap: 7px; padding: 5px 2px; font-size: var(--t-12); cursor: pointer; }
.tm-chk input { width: 16px; height: 16px; margin: 0; }
.tm-chk small { margin-left: auto; color: var(--ink-faint); font-size: var(--t-11); }
.tm-count { margin: 0 0 0 auto; align-self: center; font-size: var(--t-11); color: var(--ink-faint); }
.tm-count.is-on { color: var(--coral); font-weight: 600; }
.tm-hint-line { margin: 6px 0 0; max-width: none; }
.tm-hint { margin: 0 0 0 auto; align-self: center; font-size: var(--t-11); color: var(--ink-faint); flex: 1 1 220px; max-width: 460px; }

/* --- the one legend ----------------------------------------------------------- */
.tm-leg { margin: 8px 0; border: 1px solid var(--rule); background: var(--paper); padding: 5px 10px; font-size: var(--t-11); }
.tm-leg summary { cursor: pointer; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; list-style: none; }
.tm-leg summary::-webkit-details-marker { display: none; }
.tm-leg summary::before { content: "\25B8"; color: var(--ink-faint); }
.tm-leg[open] summary::before { content: "\25BE"; }
.tm-leg-t { font-weight: bold; color: var(--ink); }
.tm-leg-sw { display: inline-flex; flex-wrap: wrap; gap: 5px; }
.tm-leg-p { margin: 6px 0 0; color: var(--ink-soft); line-height: 1.55; max-width: 120ch; }
.tm-leg[data-view="board"] .tm-leg-arch { display: none; }

/* --- layout ---------------------------------------------------------------- */
.tm-layout { margin-top: 8px; grid-template-columns: minmax(0, 1fr) 400px; align-items: start; }
.tm-layout > * { min-width: 0; }
.tm-stage { min-width: 0; }
.tm-frame { position: relative; background: var(--paper); border: 1px solid var(--rule); box-shadow: var(--shadow); overflow: hidden; }
.tm-loading { position: absolute; inset: 0; display: grid; place-items: center; font-size: var(--t-12); color: var(--ink-faint); }
.tm-frame svg { display: block; }
.tm-ent-sum { margin: 0 0 8px; padding: 6px 12px; border: 1px solid var(--rule); border-left: 4px solid var(--accent); background: var(--paper); font-size: var(--t-12); color: var(--ink-soft); line-height: 1.5; }
.tm-ent-sum b { color: var(--ink); }
.tm-ent-sum[hidden] { display: none; }
.tm-h3 { margin-top: 20px; }
.tm-id { font-family: var(--font-mono); font-size: var(--t-11); }

/* --- the details panel: sticky on the right, a bottom sheet on narrow screens ------- */
.tm-inspector { position: sticky; top: 10px; max-height: calc(100vh - 20px); padding: 0; overflow: auto; overscroll-behavior: contain; font-size: var(--t-12); color: var(--ink-soft); overflow-wrap: anywhere; line-height: 1.5; }
.tm-ibar { position: sticky; top: 0; z-index: 3; display: flex; align-items: center; gap: 8px; padding: 6px 8px 6px 14px; background: var(--deep); color: var(--on-deep); }
.tm-ibar-t { font-size: var(--t-10); font-weight: bold; letter-spacing: var(--track-caps); text-transform: uppercase; flex: 1 1 auto; }
.tm-iexp { display: none; min-height: 26px; padding: 2px 9px; font-size: var(--t-11); }
.tm-iclose { margin: 0; background: transparent; border-color: var(--on-deep); color: var(--on-deep); }
.tm-iclose:hover { background: var(--paper); color: var(--deep); }
.tm-ibody { padding: 12px 14px 18px; }
.tm-ih { padding-bottom: 4px; }
.tm-ikind { margin: 0 0 2px; font-size: var(--t-10); font-weight: bold; letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--accent); }
.tm-ititle { margin: 0 0 3px; font-family: var(--font-display); font-weight: normal; font-size: var(--t-21); line-height: 1.2; color: var(--ink); }
.tm-ititle .tm-link { font-family: inherit; font-size: inherit; }
.tm-ititle .tm-pair { font-size: var(--t-17); line-height: 1.3; display: block; }
.tm-pa { color: var(--accent); padding: 0 2px; }
.tm-isub { margin: 0 0 7px; font-size: var(--t-12); color: var(--ink-soft); }
.tm-badges { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; margin: 6px 0; }
.tm-iid { margin: 2px 0 0; font-family: var(--font-mono); font-size: var(--t-11); color: var(--ink-faint); }
.tm-iact { margin: 8px 0 0; display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; font-size: var(--t-12); }
.tm-bdg { display: inline-block; padding: 0 6px; border: 1px solid var(--ink-faint); background: var(--paper); font-size: var(--t-10); font-weight: bold; line-height: 1.6; color: var(--ink-soft); white-space: nowrap; vertical-align: 1px; }
.tm-bdg.is-faint { white-space: normal; font-weight: normal; border-color: var(--rule); color: var(--ink-faint); }
.tm-bdg.is-status { background: var(--stone); color: var(--on-stone); border-color: var(--on-stone); }
.tm-bdg.is-mech { background: var(--surface); color: var(--ink); border-color: var(--ink-soft); border-radius: 8px; padding: 0 8px; }
.tm-bdg.is-mono { font-family: var(--font-mono); font-weight: normal; }
.tm-bdg.is-warn { border-color: var(--coral); color: var(--coral); }
.tm-bdg.tm-cty { background: var(--surface); color: var(--ink); border-color: var(--ink-soft); }
.tm-isec { margin-top: 16px; border-top: 1px solid var(--rule); padding-top: 11px; }
.tm-isec h4 { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin: 0 0 7px; font-size: var(--t-10); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--accent); }
.tm-eyebrow { font-size: var(--t-10); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--accent); font-weight: bold; }
.tm-hx { font-weight: normal; letter-spacing: 0; text-transform: none; font-size: var(--t-11); }
.tm-n { font-weight: normal; color: var(--ink-faint); letter-spacing: 0; }
.tm-p { margin: 0; max-width: 62ch; line-height: 1.6; color: var(--ink); }
.tm-kv { display: grid; grid-template-columns: 78px minmax(0, 1fr); gap: 6px 10px; margin: 0; font-size: var(--t-12); }
.tm-kv dt { color: var(--ink-faint); font-size: var(--t-11); padding-top: 1px; }
.tm-kv dd { margin: 0; color: var(--ink); }
.tm-none { color: var(--ink-faint); font-style: italic; }
.tm-sub2 { margin: 9px 0 4px; font-size: var(--t-11); color: var(--ink-faint); }
.tm-sub2 b { color: var(--ink); }
.tm-sub2:first-child { margin-top: 0; }
.tm-meta { font-size: var(--t-11); color: var(--ink-soft); margin-top: 1px; }
.tm-loc { color: var(--ink-faint); font-family: var(--font-mono); font-size: var(--t-10); }
.tm-more { font-size: var(--t-11); color: var(--ink-faint); align-self: center; }
.tm-link { all: unset; box-sizing: border-box; cursor: pointer; color: var(--accent); text-decoration: underline; text-underline-offset: 2px; font-size: inherit; }
.tm-link:hover { color: var(--ink); }
.tm-link:focus-visible, .tm-ec:focus-visible, .tm-inspector a:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; }
.tm-link.tm-id { font-family: var(--font-mono); font-size: var(--t-11); }
.tm-inspector a { color: var(--accent); }
.tm-eg { white-space: nowrap; font-weight: bold; }
.tm-inl { font-size: var(--t-11); margin-left: 4px; }
.tm-ul, .tm-lst { list-style: none; margin: 0; padding: 0; }
.tm-lst > li { padding: 4px 0; border-top: 1px solid var(--rule); }
.tm-lst > li:first-child { border-top: 0; padding-top: 0; }
.tm-bul { margin: 0; padding: 0; list-style: none; }
.tm-bul > li { position: relative; padding: 3px 0 3px 12px; line-height: 1.5; max-width: 66ch; }
.tm-bul > li::before { content: "\2022"; position: absolute; left: 0; color: var(--ink-faint); }
.tm-lab { font-size: var(--t-9); font-weight: bold; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-faint); margin-right: 3px; }
.tm-lab.is-same { display: none; }
.tm-ol { margin: 0; padding-left: 20px; }
.tm-ol li { padding: 2px 0; }
.tm-fold { margin: 6px 0 0; }
.tm-fold > summary { padding: 3px 0; }
.tm-srcs > summary { list-style: revert; }
.tm-fold[open] > summary { margin-bottom: 4px; }
.tm-fold2 > summary { list-style: none; }

/* chips */
.tm-chips2 { display: flex; flex-wrap: wrap; gap: 5px; }
.tm-chips2.is-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tm-ec { all: unset; box-sizing: border-box; display: inline-flex; flex-direction: column; justify-content: center; max-width: 100%; padding: 2px 10px; border: 1px solid var(--ink-soft); border-radius: 12px; background: var(--surface); color: var(--ink); font-size: var(--t-11); line-height: 1.35; cursor: pointer; text-decoration: none; }
.tm-ec:hover { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.tm-ec-n { font-weight: 600; }
.tm-ec-s { font-size: var(--t-10); font-weight: normal; color: var(--ink-soft); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tm-ec.is-sor { background: var(--accent-deep); border-color: var(--accent-deep); color: var(--paper); }
.tm-ec.is-sor .tm-ec-n::before { content: "\2605 "; }
.tm-ec.is-sor:hover { box-shadow: inset 0 0 0 1px var(--paper); }
.tm-ec.is-copy { background: transparent; border-radius: 8px; }
.tm-ec.is-cand { border-style: dotted; border-width: 2px; background: var(--paper); }
.tm-ec.is-sm { padding: 0 8px; font-size: var(--t-10); }
.tm-ec.is-sys { border-radius: 3px; background: var(--paper); border-color: var(--ink-faint); }
.tm-tag { display: inline-block; padding: 1px 8px; border: 1px solid var(--rule); background: var(--surface); border-radius: 3px; font-size: var(--t-11); color: var(--ink); }
.tm-tag.is-used { border-color: var(--accent); }
.tm-tag.is-mono { font-family: var(--font-mono); font-size: var(--t-10); }
.tm-pathc { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 0; align-items: center; }
.tm-pathc li { display: inline-flex; align-items: center; }
.tm-pathc li + li::before { content: "\2192"; color: var(--accent); font-weight: bold; padding: 0 5px; }

/* relationship cards */
.tm-rcs { list-style: none; margin: 0 0 6px; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
.tm-rc { border: 1px solid var(--rule); background: var(--surface); padding: 6px 9px; min-width: 0; }
.tm-rc-top { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; }
.tm-rc-n .tm-link { font-weight: bold; }
.tm-rc-ev { margin-left: auto; }
.tm-rc-l { margin-top: 2px; color: var(--ink); }
.tm-rc-m { margin-top: 4px; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.tm-rc-f { font-size: var(--t-11); }
.tm-rc-e { margin-top: 5px; display: flex; flex-wrap: wrap; gap: 4px; }
.tm-ra { font-weight: bold; color: var(--accent); font-size: var(--t-14); }

/* callouts: neutral for a gap, amber for a disagreement */
.tm-call { border: 1px solid var(--rule); border-left: 4px solid var(--ink-faint); background: var(--surface); padding: 7px 10px; margin: 0 0 7px; }
.tm-call.is-warn { border-left-color: var(--amber); border-color: var(--amber); background: color-mix(in srgb, var(--sand) 38%, var(--surface)); }
.tm-call-h { margin: 0; color: var(--ink); }
.tm-call-p { margin: 4px 0 0; font-size: var(--t-11); }
.tm-claims { margin: 6px 0 0; padding-left: 16px; }
.tm-claims li { padding: 2px 0; }
.tm-src { color: var(--ink-faint); font-size: var(--t-11); }
.tm-stab { width: 100%; border-collapse: collapse; font-size: var(--t-11); }
.tm-stab th { text-align: left; font-size: var(--t-9); text-transform: uppercase; letter-spacing: .05em; color: var(--ink-faint); padding: 2px 6px 3px 0; border-bottom: 1px solid var(--rule); }
.tm-stab td { padding: 4px 6px 4px 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
.tm-nw { white-space: nowrap; }
.tm-how { margin: 8px 0; padding-left: 20px; max-width: 56ch; }
.tm-how li { padding: 4px 0; line-height: 1.55; }
.tm-how b { color: var(--ink); }
.is-flash { outline: 3px solid var(--focus); outline-offset: 2px; transition: outline-color .3s; }

/* tag key (in the legend) */
.tm-tagkey { display: inline-block; font-size: 10px; padding: 0 7px; line-height: 15px; border-radius: 8px; border: 1px solid var(--ink-soft); color: var(--ink); background: var(--paper); margin-right: 2px; }
.tm-tagkey.is-sor { background: var(--accent-deep); border-color: var(--accent-deep); color: var(--paper); font-weight: bold; }
.tm-tagkey.is-cand { border-style: dotted; border-width: 1.5px; }

.tm-arch-frame { height: clamp(520px, 80vh, 1000px); }

/* --- board ----------------------------------------------------------------- */
.tm-board { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 10px; align-items: start; }
.tm-panel { background: var(--surface); border: 1px solid var(--rule); border-top: 3px solid var(--accent); padding: 9px; min-width: 0; }
.tm-panel.is-wide { grid-column: 1 / -1; }
.tm-panel.is-wide .tm-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); }
.tm-panel-head { margin-bottom: 6px; }
.tm-id { font-family: var(--font-mono); font-size: var(--t-11); }
.tm-panel-head b { font-family: var(--font-display); font-weight: normal; font-size: var(--t-14); color: var(--ink); overflow-wrap: anywhere; }
.tm-panel-head span { display: block; font-size: var(--t-10); color: var(--ink-faint); }
.tm-tiles { display: flex; flex-direction: column; gap: 4px; }
.tm-bt {
  all: unset; box-sizing: border-box; display: block; cursor: pointer; padding: 5px 7px; width: 100%;
  background: var(--ev-bg); border: var(--ev-bw) var(--ev-bs) var(--ev-fg);
}
.tm-bt:hover { box-shadow: inset 0 0 0 2px var(--accent); }
.tm-bt:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; }
.tm-bt.is-sel { box-shadow: inset 0 0 0 3px var(--accent); }
.tm-bt.is-linked { box-shadow: inset 0 0 0 2px var(--coral); }
.tm-bt.is-off { opacity: .2; }
.tm-bt-name { display: block; font-size: var(--t-12); font-weight: bold; color: var(--ink); line-height: 1.25; overflow-wrap: anywhere; }
.tm-bt-meta { display: flex; justify-content: space-between; gap: 6px; margin-top: 3px; font-size: var(--t-10); color: var(--ink-soft); }
.tm-bt-meta span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tm-bt-meta .tm-ev { flex: none; background: transparent; border-width: 1px; }
.tm-board-empty { grid-column: 1 / -1; padding: 24px; text-align: center; color: var(--ink-soft); border: 1px dashed var(--rule); background: var(--paper); }

.tm-board { margin-top: 0; grid-auto-flow: dense; }
/* --- tables ----------------------------------------------------------------- */
.tm-twrap { overflow: auto; max-width: 100%; border: 1px solid var(--rule); background: var(--paper); }
.tm-scroll { max-height: 560px; }
.tm-twrap table { border-collapse: collapse; width: 100%; font-size: var(--t-12); }
.tm-twrap th { position: sticky; top: 0; background: var(--deep); color: var(--on-deep); text-align: left; padding: 6px 8px; font-size: var(--t-10); letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; z-index: 1; }
.tm-twrap th button { all: unset; cursor: pointer; }
.tm-twrap th button:focus-visible { outline: 3px solid var(--focus); }
.tm-twrap td { padding: 5px 8px; border-top: 1px solid var(--rule); vertical-align: top; color: var(--ink-soft); }
.tm-twrap tr.is-sel td { background: var(--sand); }
.tm-twrap td.tm-nw { white-space: nowrap; }
.tm-twrap tr.is-flash td { background: var(--sand); }
.tm-twrap .tm-empty { text-align: center; padding: 18px; color: var(--ink-faint); }

/* --- lower sections: collapsible, with the count in the heading ----------------- */
.tm-block { margin: 10px 0 0; }
.tm-fold2 > summary { display: flex; align-items: baseline; gap: 12px; cursor: pointer; padding: 9px 0; border-bottom: 1px solid var(--rule); border-top: 1px solid var(--rule); }
.tm-fold2 > summary::before { content: "\25B8"; color: var(--ink-faint); font-size: var(--t-14); width: 14px; flex: none; }
.tm-fold2[open] > summary::before { content: "\25BE"; }
.tm-fold2 > summary h2 { margin: 0; font-size: var(--t-19); }
.tm-fold2 > summary:hover h2 { color: var(--accent); }
.tm-cnt { font-size: var(--t-12); color: var(--ink-faint); margin-left: auto; white-space: nowrap; }
.tm-fold2 > :not(summary) { margin-top: 8px; }
.tm-sub { margin: 0 0 8px; font-size: var(--t-12); color: var(--ink-soft); max-width: 110ch; }
.tm-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr)); gap: 10px; align-items: start; }
.tm-card { background: var(--paper); border: 1px solid var(--rule); padding: 10px 12px; min-width: 0; }
.tm-card h3 { margin: 0 0 4px; font-family: var(--font-display); font-weight: normal; font-size: var(--t-14); color: var(--ink); overflow-wrap: anywhere; }
.tm-card p { margin: 3px 0; font-size: var(--t-12); color: var(--ink-soft); overflow-wrap: anywhere; }
.tm-card.is-warn { border-left: 4px solid var(--amber); }
.tm-card ul { margin: 4px 0 0; padding-left: 16px; font-size: var(--t-12); color: var(--ink-soft); }
.tm-card .tm-id { font-family: var(--font-mono); font-size: var(--t-10); color: var(--ink-faint); }
.tm-twrap tr.is-flash td { background: var(--sand); }
.tm-mx { font-size: var(--t-11); }
.tm-mx th, .tm-mx td { text-align: center; padding: 4px 6px; border: 1px solid var(--rule); }
.tm-mx th:first-child, .tm-mx td:first-child { text-align: left; min-width: 180px; position: sticky; left: 0; background: var(--paper); z-index: 2; }
.tm-mx th:first-child { background: var(--deep); z-index: 3; }
.tm-mx thead th { text-transform: none; letter-spacing: 0; vertical-align: bottom; }
.tm-mx th button { all: unset; cursor: pointer; display: block; width: 100%; font-weight: bold; }
.tm-mx th button.is-sel, .tm-mx td.is-hi { outline: 2px solid var(--amber); outline-offset: -2px; }
.tm-mx td.is-tick { background: var(--sand); color: var(--on-sand); font-weight: bold; }
.tm-mx td.is-tick.is-hi { background: var(--amber); color: var(--paper); }
.tm-mx td.is-extra { border: 2px dotted var(--amber); }
.tm-mx .tm-rl { font-weight: bold; color: var(--ink); }
.tm-mx .tm-rl small { display: block; font-weight: normal; color: var(--ink-faint); white-space: normal; max-width: 280px; }
.tm-foot { margin: 28px 0 0; font-size: var(--t-11); color: var(--ink-faint); max-width: 120ch; }
.tm-foot a { color: var(--accent); }
.tm-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (max-width: 1300px) { .tm-layout { grid-template-columns: minmax(0, 1fr) 360px; } }
@media (max-width: 1100px) {
  .tm-layout { grid-template-columns: minmax(0, 1fr); }
  .tm-inspector { position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 40; max-height: 50vh; border-width: 1px 0 0; border-radius: 12px 12px 0 0; box-shadow: 0 -8px 24px #102D3815; transform: translateY(105%); visibility: hidden; transition: transform .2s ease, visibility 0s linear .2s; }
  .tm-inspector.is-open { transform: none; visibility: visible; transition: transform .2s ease; }
  .tm-inspector.is-tall { max-height: 88vh; }
  .tm-ibar { border-radius: 12px 12px 0 0; }
  .tm-iexp { display: inline-flex; }
  body.tm-has-sel .tm-foot { margin-bottom: 52vh; }
}
@media (max-width: 760px) {
  .tm-tabs button { padding: 9px 12px; font-size: var(--t-13); flex: 1 1 auto; }
  .app-shell { padding: 10px 12px 28px; }
  .tm-count { margin-left: 0; flex: 1 1 100%; }
  .tm-hint { display: none; }
  .tm-tile { flex: 1 1 40%; }
  .tm-bar { gap: 8px 12px; }
  .tm-f.tm-grow { flex: 1 1 100%; }
  .tm-bar select { max-width: 100%; }
  .tm-kv { grid-template-columns: 70px minmax(0, 1fr); }
  .tm-ititle { font-size: var(--t-19); }
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; } }

@media print {
  .tm-bar, .tm-tabs, .tm-inspector, .app-actions, .tm-skip, .tm-leg { display: none !important; }
  .app-top { background: #FFFDF8 !important; color: #102D38 !important; }
  .app-title, .app-instruction, .tm-back, .app-top .eyebrow { color: #102D38 !important; }
  .tm-frame { height: auto !important; overflow: visible; box-shadow: none; }
  .tm-twrap, .tm-scroll { max-height: none; overflow: visible; }
  .tm-ev, .tm-bt { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  details.tm-fold2 > :not(summary) { display: block; }
  @page { size: A3 landscape; margin: 10mm; }
}

/* --- architecture view (hand-placed; techmap-architecture.js) --------------- */
.tm-arch-frame { height: clamp(520px, 84vh, 1000px); }
.tm-arch-frame svg { width: 100%; height: 100%; max-width: none; cursor: grab; }
.tm-arch-frame svg:active { cursor: grabbing; }
.ab-svg text { font-family: var(--font-sans); }
.ab-svg [tabindex]:focus { outline: none; }
.ab-svg [tabindex]:focus-visible .ab-box-rect, .ab-svg [tabindex]:focus-visible .ab-chip-rect,
.ab-svg [tabindex]:focus-visible .ab-head-bg { stroke: var(--focus); stroke-width: 3.5; stroke-dasharray: none; }
.ab-svg [tabindex]:focus-visible .ab-edge-line { stroke: var(--focus); stroke-width: 3.5; }

/* containers: white body, outline from the evidence of the system they stand for */
.ab-cont-rect { fill: var(--surface); stroke: var(--ink-faint); stroke-width: 1.4; pointer-events: none; }
.ab-cont.ev-observed .ab-cont-rect, .ab-cont.ev-documented .ab-cont-rect, .ab-cont.ev-codemap .ab-cont-rect,
.ab-cont.ev-reported .ab-cont-rect, .ab-cont.ev-unknown .ab-cont-rect {
  stroke: var(--ev-fg); stroke-width: calc(var(--ev-sw) * 1px + 0.6px); stroke-dasharray: var(--ev-da);
}
.ab-cont.is-dashed .ab-cont-rect { stroke-dasharray: 7 5; }
.ab-band .ab-cont-rect { fill: var(--paper); stroke: var(--rule); stroke-width: 1; stroke-dasharray: 3 4; }
.ab-band-t { font-size: 11px; font-weight: bold; letter-spacing: .08em; text-transform: uppercase; fill: var(--ink-faint); }
.ab-head { pointer-events: all; }
.ab-head-bg { fill: var(--deep); }
.ab-head-t { fill: var(--on-deep); }
.ab-head-b { font-size: 13px; font-weight: bold; }
.ab-head-s { font-size: 11px; opacity: .92; }
.ab-head.role-accent .ab-head-bg { fill: var(--accent-deep); }
.ab-head.role-accent .ab-head-t { fill: var(--paper); }
.ab-head.role-mint .ab-head-bg { fill: var(--mint); } .ab-head.role-mint .ab-head-t { fill: var(--on-mint); }
.ab-head.role-blue .ab-head-bg { fill: var(--blue); } .ab-head.role-blue .ab-head-t { fill: var(--on-blue); }
.ab-head.role-sand .ab-head-bg { fill: var(--sand); } .ab-head.role-sand .ab-head-t { fill: var(--on-sand); }
.ab-head.role-rose .ab-head-bg { fill: var(--rose); } .ab-head.role-rose .ab-head-t { fill: var(--on-rose); }
.ab-head.role-stone .ab-head-bg { fill: var(--stone); } .ab-head.role-stone .ab-head-t { fill: var(--on-stone); }
.ab-head.role-navy .ab-head-bg { fill: var(--navy); } .ab-head.role-navy .ab-head-t { fill: var(--on-deep); }
.ab-cont.is-head-only { cursor: pointer; }
.ab-cont.is-hot .ab-cont-rect, .ab-cont.is-sel .ab-cont-rect { stroke: var(--accent); stroke-width: 2.8; stroke-dasharray: none; }
.ab-cont.is-sel .ab-head-bg { filter: drop-shadow(0 0 3px var(--accent)); }

.ab-chip-rect { fill: var(--paper); stroke: var(--ink-faint); stroke-width: 1; }
.ab-chip-t { font-size: 11px; fill: var(--ink); }
.ab-chip.is-chip { cursor: pointer; }
.ab-chip.is-chip:hover .ab-chip-rect { stroke: var(--accent); stroke-width: 1.8; }

.ab-box { cursor: pointer; }
.ab-box-rect { fill: var(--ev-bg); stroke: var(--ev-fg); stroke-width: calc(var(--ev-sw) * 1px + 0.4px); stroke-dasharray: var(--ev-da); }
.ab-box.is-dashed .ab-box-rect { stroke-dasharray: 6 4; fill: var(--paper); }
.ab-box.tone-paper .ab-box-rect { fill: var(--paper); }
.ab-box-t { font-size: 12px; font-weight: bold; fill: var(--ink); }
.ab-box-s { font-size: 11px; fill: var(--ink-soft); }
.ab-box:hover .ab-box-rect, .ab-box.is-hot .ab-box-rect { stroke: var(--accent); stroke-width: 2.8; stroke-dasharray: none; }
.ab-box.is-sel .ab-box-rect { stroke: var(--accent); stroke-width: 3.4; stroke-dasharray: none; filter: drop-shadow(0 0 3px var(--accent)); }

.ab-fig { fill: var(--ink); stroke: none; }
.ab-fig .soft { fill: var(--ink-faint); }
.ab-fig .line { fill: none; stroke: var(--ink); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.ab-fig-t { font-size: 12px; font-weight: bold; fill: var(--ink); stroke: none; }

.ab-note-rect { fill: var(--paper); stroke: var(--amber); stroke-width: 1.2; }
.ab-note-bar { fill: var(--amber); }
.ab-note-h { font-size: 13px; font-weight: bold; fill: var(--ink); }
.ab-note-t { font-size: 11px; fill: var(--ink-soft); }
.ab-note-r { font-size: 11px; fill: var(--ink-faint); }
.ab-note-link { fill: var(--accent); text-decoration: underline; cursor: pointer; font-family: var(--font-mono); }

.ab-edge-line { fill: none; stroke: var(--ink-soft); stroke-width: max(1.5px, calc(var(--ev-sw) * 1px)); stroke-dasharray: var(--ev-da); stroke-linecap: butt; pointer-events: none; }
.ab-edge-fat { fill: none; stroke: transparent; stroke-width: 14; pointer-events: stroke; cursor: pointer; }
.ab-arrow { fill: var(--ink-soft); stroke: none; pointer-events: none; }
.ab-edge.is-structural .ab-edge-line { stroke: var(--ink-faint); }
.ab-edge.is-structural .ab-arrow { fill: var(--ink-faint); }
.ab-edge.is-over .ab-edge-line, .ab-edge.is-hot .ab-edge-line { stroke: var(--accent); stroke-width: 2.6px; }
.ab-edge.is-over .ab-arrow, .ab-edge.is-hot .ab-arrow { fill: var(--accent); }
.ab-edge.is-sel .ab-edge-line { stroke: var(--accent); stroke-width: 3.4px; }
.ab-edge.is-sel .ab-arrow { fill: var(--accent); }
.ab-elabel { cursor: pointer; }
.ab-elabel-bg { fill: var(--paper); opacity: .95; }
.ab-elabel-t { font-size: 11px; fill: var(--ink-soft); }
.ab-elabel.is-hot .ab-elabel-t, .ab-elabel.is-over .ab-elabel-t, .ab-elabel.is-sel .ab-elabel-t { fill: var(--accent); font-weight: bold; }
.ab-elabel.is-sel .ab-elabel-bg { stroke: var(--accent); stroke-width: 1.5; }

.ab-legend-bg { fill: var(--paper); stroke: var(--rule); stroke-width: 1; }
.ab-legend .ab-edge-line { stroke: var(--ink); }

/* filters and focus */
.ab-svg .is-off { opacity: .16; }
.ab-svg .is-dim { opacity: .3; }
.ab-svg .ab-chip { transition: none; }
.ab-cont.is-off .ab-chip, .ab-svg .is-off { pointer-events: auto; }
@media print { .tm-arch-frame { height: auto; } }

.ab-cont-cap { font-size: 11px; fill: var(--ink-soft); pointer-events: none; }

/* entity tags on boxes and containers */
.ab-tag { cursor: pointer; pointer-events: all; }
.ab-tag-rect { fill: var(--paper); stroke: var(--ink-soft); stroke-width: 1; }
.ab-tag-t { font-size: 10px; fill: var(--ink); pointer-events: none; }
.ab-tag.is-sor .ab-tag-rect { fill: var(--accent-deep); stroke: var(--accent-deep); }
.ab-tag.is-sor .ab-tag-t { fill: var(--paper); font-weight: bold; }
.ab-tag.is-cand .ab-tag-rect { stroke-dasharray: 1.5 2.5; stroke-width: 1.6; stroke-linecap: round; }
.ab-tag.is-more .ab-tag-rect { fill: var(--surface); stroke: var(--ink-faint); }
.ab-tag.is-more .ab-tag-t { font-weight: bold; fill: var(--ink-soft); }
.ab-tag:hover .ab-tag-rect, .ab-svg .ab-tag:focus-visible .ab-tag-rect { stroke: var(--accent); stroke-width: 2; }
.ab-tags.has-focus .ab-tag:not(.is-focus) { opacity: .35; }
.ab-tag.is-focus .ab-tag-rect { stroke: var(--accent); stroke-width: 2.4; }
.ab-tag.is-focus.is-copy .ab-tag-rect, .ab-tag.is-focus.is-cand .ab-tag-rect { fill: var(--surface); }

/* edge labels: what a line carries */
.ab-elabel-e { font-weight: bold; fill: var(--accent-deep); }
.ab-elabel.is-hot .ab-elabel-e, .ab-elabel.is-over .ab-elabel-e, .ab-elabel.is-sel .ab-elabel-e { fill: var(--accent); }

/* entity in focus: the holders */
.ab-box.ent-sor .ab-box-rect { fill: var(--accent-deep); stroke: var(--accent-deep); stroke-width: 3px; stroke-dasharray: none; }
.ab-box.ent-sor .ab-box-t, .ab-box.ent-sor .ab-box-s { fill: var(--paper); }
.ab-box.ent-copy .ab-box-rect { stroke: var(--accent); stroke-width: 3px; stroke-dasharray: none; }
.ab-box.ent-cand .ab-box-rect { stroke: var(--accent); stroke-width: 3px; stroke-dasharray: 2 4; stroke-linecap: round; }
.ab-cont.ent-sor .ab-cont-rect { stroke: var(--accent-deep); stroke-width: 4px; stroke-dasharray: none; }
.ab-cont.ent-copy .ab-cont-rect { stroke: var(--accent); stroke-width: 3px; stroke-dasharray: none; }
.ab-cont.ent-cand .ab-cont-rect { stroke: var(--accent); stroke-width: 3px; stroke-dasharray: 2 4; stroke-linecap: round; }
.ab-cont.ent-sor .ab-head-bg { filter: drop-shadow(0 0 3px var(--accent)); }

/* temporary thin lines for relationships the canvas does not draw */
.ab-temp { pointer-events: none; }
.ab-tline-path { fill: none; stroke: var(--accent); stroke-width: 1.4px; stroke-dasharray: 2 4; stroke-linecap: round; opacity: .9; }
.ab-tline-head { fill: var(--accent); opacity: .9; }
#tm-arch-tags { margin-top: 0; }

/* Entities is not a tab: it leaves for the entity graph page */
.tm-tab-link { align-self: center; margin-left: auto; padding: 8px 14px; font-weight: 600; color: var(--accent-deep); text-decoration: none; border: 1px solid var(--rule); border-radius: 2px; }
.tm-tab-link:hover, .tm-tab-link:focus-visible { background: var(--mint); color: var(--on-mint); }

/* --- toolbar of a view: one tidy row on wide screens, left-aligned wrap on narrow ----------- */
.tm-vbar { justify-content: flex-start; }
.tm-vbar .tm-f { flex: 0 0 auto; }
.tm-vbar select { width: 160px; }
.tm-vbar .tm-f.tm-grow { flex: 1 1 220px; }
.tm-chk-bar { padding: 0; min-height: 30px; gap: 7px; white-space: nowrap; }

/* --- the Target (draft) tab ----------------------------------------------------------------- */
.tm-draft { margin: 0 0 8px; padding: 9px 14px; border: 1px solid var(--amber); border-left: 6px solid var(--amber); background: color-mix(in srgb, var(--sand) 45%, var(--surface)); color: var(--ink); font-size: var(--t-14); line-height: 1.45; }
.tm-draft-sub { display: block; margin-top: 2px; font-size: var(--t-12); color: var(--ink-soft); }
.tm-draft-note { margin: 8px 0 0; padding: 5px 9px; border-left: 4px solid var(--amber); background: color-mix(in srgb, var(--sand) 40%, var(--surface)); font-size: var(--t-11); color: var(--ink-soft); }
.tm-tcanvas { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; align-items: start; }
.tm-tcanvas.has-strip { grid-template-columns: minmax(0, 1fr) 270px; }
.tm-tcanvas > * { min-width: 0; }
.tm-retire { border: 1px solid var(--rule); border-top: 3px solid var(--coral); background: var(--paper); padding: 9px 10px; max-height: 80vh; overflow: auto; position: sticky; top: 10px; }
.tm-retire[hidden] { display: none; }
.tm-retire-h { margin: 0 0 3px; font-family: var(--font-display); font-weight: normal; font-size: var(--t-17); color: var(--ink); }
.tm-ri-list { list-style: none; margin: 8px 0 0; padding: 0; }
.tm-ri { padding: 7px 0; border-top: 1px solid var(--rule); font-size: var(--t-12); line-height: 1.4; }
.tm-ri-n { font-weight: 600; color: var(--ink); }
.tm-ri-by { margin-top: 2px; color: var(--ink-soft); }
.tm-ri-m { margin-top: 4px; display: flex; flex-wrap: wrap; gap: 4px; }
.tm-ra { color: var(--accent); }
.tm-tarch-frame { height: auto; min-height: 520px; }
.tm-tleg { margin-top: 6px; }
.tm-pk { display: inline-block; padding: 0 6px; font-size: var(--t-10); font-weight: bold; line-height: 1.6; border: 1px solid var(--ink-soft); background: var(--paper); color: var(--ink); vertical-align: 1px; }
.tm-pk.ch-new { background: var(--accent-deep); border-color: var(--accent-deep); color: var(--paper); }
.tm-pk.ch-replace, .tm-pk.ch-extend { border-color: var(--accent); color: var(--accent); }
.tm-pk.ch-open, .tm-pk.st-open { border-style: dotted; border-width: 2px; }
.tm-pk.ch-retire { background: var(--stone); color: var(--on-stone); border-color: var(--on-stone); }
.tm-pk.st-agreed { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.tm-bdg.is-st-agreed { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.tm-bdg.is-st-proposed { background: var(--paper); color: var(--ink); border-color: var(--ink); }
.tm-bdg.is-st-open { background: var(--paper); color: var(--ink-soft); border: 2px dotted var(--ink-soft); line-height: 1.4; }
.tm-bdg.is-ch-new { background: var(--accent-deep); color: var(--paper); border-color: var(--accent-deep); }
.tm-bdg.is-ch-replace, .tm-bdg.is-ch-extend { color: var(--accent); border-color: var(--accent); }
.tm-bdg.is-ch-open { border-style: dashed; }
.tm-bdg.is-ch-retire { background: var(--stone); color: var(--on-stone); border-color: var(--on-stone); }
.tm-bdg.is-ch-keep { color: var(--ink-faint); border-color: var(--rule); }
.tm-ec.is-cap { border-radius: 3px; border-color: var(--accent); font-family: var(--font-mono); }
.tm-ec.is-cap .tm-ec-n { font-weight: bold; color: var(--accent); }
.tm-kv.is-wide { grid-template-columns: 82px minmax(0, 1fr); }
.tm-plist { margin: 0; padding: 0; list-style: none; max-width: 120ch; }
.tm-plist > li { padding: 8px 0; border-top: 1px solid var(--rule); line-height: 1.55; color: var(--ink); font-size: var(--t-13); }
.tm-plist > li:first-child { border-top: 0; }
.tm-plist .tm-bdg { margin-right: 4px; }
.tm-tsrc { margin: 3px 0 0; font-size: var(--t-11); color: var(--ink-faint); }
.tm-tsrc-l { margin: 3px 0 0; padding-left: 14px; list-style: disc; }
.tm-hz { list-style: none; margin: 8px 0 0; padding: 0; }
.tm-hz > li { padding: 6px 0; border-top: 1px solid var(--rule); font-size: var(--t-12); color: var(--ink); }
.tm-hz .tm-id { font-family: var(--font-mono); font-size: var(--t-11); }
.tm-tent table, .tm-tdec table { min-width: 640px; }
.tm-tent, .tm-tdec { max-height: 460px; }
.tm-tent td:nth-child(3) { color: var(--ink); }
.tm-tdec td { min-width: 120px; }
.tm-tdec td:first-child { min-width: 260px; }
body[data-view="target"] .tm-bar [data-cur] { display: none; }
@media (max-width: 1100px) { .tm-tcanvas.has-strip { grid-template-columns: minmax(0, 1fr); } .tm-retire { position: static; max-height: 360px; } }

/* the target canvas: what changes (outline) and how firm (pills, lines) */
.ab-box.ch-keep, .ab-box.ch-extend { --ev-bg: var(--surface); --ev-fg: var(--ink-soft); --ev-sw: 1.2; --ev-da: none; }
.ab-box.ch-new { --ev-bg: var(--surface); --ev-fg: var(--accent-deep); --ev-sw: 2.4; --ev-da: none; }
.ab-box.ch-replace { --ev-bg: color-mix(in srgb, var(--mint) 55%, var(--surface)); --ev-fg: var(--accent); --ev-sw: 1.4; --ev-da: none; }
.ab-box.ch-open { --ev-bg: var(--surface); --ev-fg: var(--ink-soft); --ev-sw: 1.4; --ev-da: 6 4; }
.ab-box.ch-retire { --ev-bg: color-mix(in srgb, var(--stone) 70%, var(--surface)); --ev-fg: var(--on-stone); --ev-sw: 1.4; --ev-da: 9 3 2 3; }
.ab-box.ch-retire .ab-box-t, .ab-box.ch-retire .ab-box-s { fill: var(--on-stone); }
.ab-cont.ch-replace .ab-cont-rect, .ab-cont.ch-new .ab-cont-rect, .ab-cont.ch-keep .ab-cont-rect, .ab-cont.ch-extend .ab-cont-rect, .ab-cont.ch-open .ab-cont-rect, .ab-cont.ch-retire .ab-cont-rect { stroke: var(--ink-faint); }
.ab-edge.st-agreed { --ev-sw: 2.8; --ev-da: none; }
.ab-edge.st-proposed { --ev-sw: 1.5; --ev-da: none; }
.ab-edge.st-open { --ev-sw: 1.8; --ev-da: 2 4; }
.ab-pill-r { fill: var(--paper); stroke: var(--ink-soft); stroke-width: 1; }
.ab-pill-t { font-size: 10px; font-weight: bold; letter-spacing: .03em; fill: var(--ink); pointer-events: none; }
.ab-pill.ch-new .ab-pill-r { fill: var(--accent-deep); stroke: var(--accent-deep); }
.ab-pill.ch-new .ab-pill-t { fill: var(--paper); }
.ab-pill.ch-replace .ab-pill-r, .ab-pill.ch-extend .ab-pill-r { stroke: var(--accent); stroke-width: 1.3; }
.ab-pill.ch-replace .ab-pill-t, .ab-pill.ch-extend .ab-pill-t { fill: var(--accent); }
.ab-pill.ch-open .ab-pill-r { stroke-dasharray: 3 2; }
.ab-pill.ch-retire .ab-pill-r { fill: var(--stone); stroke: var(--on-stone); }
.ab-pill.ch-retire .ab-pill-t { fill: var(--on-stone); }
.ab-pill.st-agreed .ab-pill-r { fill: var(--ink); stroke: var(--ink); }
.ab-pill.st-agreed .ab-pill-t { fill: var(--paper); }
.ab-pill.st-proposed .ab-pill-r { stroke: var(--ink); }
.ab-pill.st-open .ab-pill-r { stroke: var(--ink-soft); stroke-width: 1.6; stroke-dasharray: 1.5 2.5; stroke-linecap: round; }
.ab-pill.st-open .ab-pill-t { fill: var(--ink-soft); }
.tm-sci { display: inline-block; max-width: 100%; margin-right: 2px; vertical-align: top; }
#tm-jump { width: 200px; }
.tm-vbar #tm-flowsel, .tm-vbar #tm-ent { width: 172px; }
/* the sections under the tabs below describe the current estate; on the Target tab they stay out of the way */
body[data-view="target"] .tm-shell > details.tm-block { display: none; }
@media (max-width: 760px) {
  .tm-fold2 > summary { flex-wrap: wrap; row-gap: 2px; }
  .tm-fold2 > summary h2 { flex: 1 1 auto; min-width: 0; }
  .tm-fold2 > summary .tm-cnt { flex: 1 1 100%; margin-left: 26px; text-align: left; }
  .tm-tleg-p { max-width: none; }
}

/* hooks the scripts select by name; layout comes from their containers */
.tm-view, .tm-zoom, .tm-tbar, .tm-twrap-h, .is-empty { box-sizing: border-box; }