/* Technology Map. Built from the B Matrix layout Alex chose on 2026-10-21 (docs/technology-layers/preview).
   His look-and-feel calls from the review rounds, which are easy to undo by accident:
   - Status dots and bullets are round. Cards take a modest radius, the figure tiles a little more, and the
     small labels are squared off at 3px. No dashed borders and no left-border accent boxes.
   - An opened row sits in one brand-blue tint with its contents, edge to edge. A white sheet floating on a
     well the colour of the page was rejected twice.
   - The figure tiles share one shape, figure then one-line label then the bar pinned to the bottom, so every
     row lines up, and they break evenly into rows of eight, four or two.
   Service line colours are the --bar-* tokens in app.css, so dark mode comes with them. */

/* The page fills the window (Alex, 2026-10-21). The matrix takes the height left under the figures and its rows
   share it, and type and spacing follow the window height as the masthead does. When an opened row needs more room
   than the window has, the card grows and the page scrolls. */
body.tm-body{ min-height:100vh; display:flex; flex-direction:column; }
.tm{ flex:1 0 auto; width:100%; display:flex; flex-direction:column; padding-block:clamp(.6rem,1.8vh,1.4rem) clamp(.8rem,2.2vh,1.6rem); }
#tm{ flex:1 0 auto; display:flex; flex-direction:column; }
.tm-state{ background:var(--paper); border:1px solid var(--rule); border-radius:6px; padding:1rem 1.2rem; color:var(--muted); }
.tm-state.err{ color:var(--red-ink); background:var(--red-bg); border-color:var(--red-line); }
.tm-lede{ margin:0 0 clamp(.5rem,1.4vh,1rem); color:var(--muted); max-width:90ch; font-size:clamp(.88rem,.62rem + .55vh,1.02rem); }

/* Figure tiles */
.tm-kpis{ display:grid; gap:clamp(.5rem,1.2vh,.9rem); grid-template-columns:repeat(8,minmax(0,1fr)); margin:0 0 clamp(.6rem,1.6vh,1.1rem); }
@media (max-width:1240px){ .tm-kpis{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
@media (max-width:560px){ .tm-kpis{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.tm-kpi{ background:var(--paper); border:1px solid var(--rule); border-radius:10px; padding:clamp(.5rem,1.3vh,1rem) .9rem;
  box-shadow:var(--shadow); display:flex; flex-direction:column; min-width:0; }
.tm-kpi b{ font-size:clamp(1.15rem,.7rem + 1.3vh,1.7rem); line-height:1.1; font-variant-numeric:tabular-nums; }
.tm-kpi span{ color:var(--muted); font-size:clamp(.78rem,.6rem + .35vh,.92rem); line-height:1.3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tm-kpi .tm-cov{ margin-top:auto; } .tm-kpi span + .tm-cov{ margin-top:.6rem; }
.tm-cov{ height:5px; border-radius:3px; background:var(--track); overflow:hidden; }
.tm-cov i{ display:block; height:100%; background:var(--blue); }
:root[data-theme="dark"] .tm-cov i{ background:var(--bluesub); }

/* Switch and legend */
.tm-bar{ display:flex; gap:.6rem 1.2rem; align-items:center; flex-wrap:wrap; margin:0 0 .7rem; }
.tm-seg{ display:inline-flex; border:1px solid var(--rule); border-radius:8px; background:var(--paper); padding:2px; }
.tm-seg button{ all:unset; cursor:pointer; padding:.32rem .9rem; border-radius:6px; font-size:.84rem; font-weight:600; color:var(--muted); }
.tm-seg button[aria-pressed="true"]{ background:var(--blue); color:#fff; }
:root[data-theme="dark"] .tm-seg button[aria-pressed="true"]{ background:var(--bluesub); color:var(--paper); }
.tm-seg button:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.tm-legend{ display:flex; flex-wrap:wrap; gap:.4rem 1rem; font-size:.78rem; color:var(--muted); align-items:center; }
.tm-legend span{ display:inline-flex; gap:.4rem; align-items:center; }

/* Status dots, one per product, and the role slots */
.tm-sd{ display:inline-block; width:9px; height:9px; border-radius:50%; flex-shrink:0; background:#2F7A50; }
.tm-sd.some{ background:#3E6E92; } .tm-sd.moving{ background:transparent; box-shadow:inset 0 0 0 2px #3E6E92; }
.tm-sd.phasing{ background:#B7791F; } .tm-sd.internal{ background:#7D8697; } .tm-sd.confirm{ background:#A8432B; }
:root[data-theme="dark"] .tm-sd{ filter:brightness(1.35); }
.tm-dots{ display:inline-flex; gap:3px; }
.tm-slots{ display:inline-flex; gap:3px; vertical-align:middle; }
.tm-slots i{ width:16px; height:16px; border-radius:50%; border:1.5px solid var(--rule); font:700 .52rem/13px 'Hanken Grotesk',sans-serif;
  font-style:normal; text-align:center; color:var(--muted); }
.tm-slots i.on{ background:var(--blue); border-color:var(--blue); color:#fff; }
.tm-na{ color:var(--muted); font-style:italic; font-size:.8rem; white-space:nowrap; }
.tm-tag{ display:inline-block; margin-left:.5rem; font-size:.66rem; font-weight:700; padding:1px 7px; border-radius:3px;
  background:var(--ms-bg); color:var(--ms-ink); border:1px solid var(--ms-line); vertical-align:2px; white-space:nowrap; }
.tm-tag.cl{ background:var(--note-bg); color:var(--note-ink); border-color:var(--note-line); }

/* The matrix */
/* Row height comes from fit() in tech-map.js: the rows share the height left in the window, between 38 and
   58 px. Filling the window outright ran rows to 86 px on a 1270 px screen, which Alex called too stretched
   (2026-10-21), so a tall window keeps the 58 px rows and leaves the canvas below. The selectors stop at the
   outer table (">"), because the opened band holds a table of its own and the outer header style once
   reached into it and turned its header grey. */
.tm-card{ background:var(--paper); border:1px solid var(--rule); border-radius:6px; box-shadow:var(--shadow); overflow-x:auto; }
.tm-m > tbody > tr.tm-r > td{ height:var(--rowh,auto); }
.tm-m{ border-collapse:collapse; width:100%; font-size:clamp(.84rem,.56rem + .72vh,1rem); }
.tm-m > thead > tr > th, .tm-m > tbody > tr > td{ padding:clamp(.4rem,.9vh,.75rem) .7rem; border-bottom:1px solid var(--rule); text-align:left; vertical-align:middle; }
.tm-m > tbody > tr:last-child > td{ border-bottom:0; }
.tm-m > thead > tr > th{ font-size:clamp(.66rem,.5rem + .32vh,.78rem); text-transform:uppercase; letter-spacing:.05em; color:var(--muted); background:var(--tint); white-space:nowrap; }
.tm-m > thead > tr > th.ln{ text-align:center; box-shadow:inset 0 4px 0 var(--c); padding-top:.75rem; line-height:1.2; white-space:normal; width:clamp(48px,5vw,80px); }
.tm-m td.tm-dc{ text-align:center; }
.tm-m td.tm-dc i, .tm-lc i{ display:inline-block; width:clamp(10px,1.3vh,14px); height:clamp(10px,1.3vh,14px); border-radius:50%; background:var(--c); vertical-align:middle; }
:root[data-theme="dark"] .tm-m td.tm-dc i{ box-shadow:0 0 0 1px rgba(255,255,255,.25); }
.tm-m td.num{ font-variant-numeric:tabular-nums; }
tr.tm-r{ cursor:pointer; } tr.tm-r:hover td{ background:var(--hover); }
tr.tm-r td:first-child{ font-weight:700; white-space:nowrap; }
tr.tm-r td:first-child::before{ content:'\25B8'; display:inline-block; width:16px; color:var(--muted); transition:transform .15s; }
tr.tm-r.open td:first-child::before{ transform:rotate(90deg); }
tr.tm-r:focus-visible td{ outline:none; background:var(--hover); }
/* The opened row and its contents share one tint from edge to edge. */
tr.tm-r.open td{ background:var(--ms-bg); border-bottom-color:var(--ms-line); }
.tm-m > tbody > tr.tm-band > td{ background:var(--ms-bg); padding:0 .9rem .8rem 2.4rem; border-bottom:1px solid var(--ms-line); }
.tm-bnote{ margin:.6rem 0 .1rem; font-size:.84rem; color:var(--ms-ink); }
table.tm-bt{ width:100%; border-collapse:collapse; }
.tm-bt th{ background:transparent; color:var(--ms-ink); font-size:.66rem; text-transform:uppercase; letter-spacing:.05em;
  border-bottom:1px solid var(--ms-line); padding:.45rem .6rem; text-align:left; }
.tm-bt td{ background:transparent; border-bottom:1px solid var(--ms-line); padding:.45rem .6rem; font-size:.86rem; }
.tm-bt tr:last-child td{ border-bottom:0; }
.tm-bt tbody tr[data-svc]{ cursor:pointer; } .tm-bt tbody tr[data-svc]:hover td{ background:rgba(1,74,115,.06); }
.tm-prods{ display:inline-flex; align-items:center; gap:.5rem; } .tm-prods span{ color:var(--muted); font-size:.82rem; }
/* Narrow windows fold the seven service line columns into one, so the table fits rather than scrolls. */
.tm-lc{ display:none; gap:3px; flex-wrap:wrap; }
.tm-m th.lc, .tm-m td.lc{ display:none; }
@media (max-width:980px){
  .tm-m th.ln, .tm-m td.tm-dc{ display:none; }
  .tm-m th.lc, .tm-m td.lc{ display:table-cell; }
  .tm-lc{ display:inline-flex; }
  .tm-m .hide-narrow{ display:none; }
}
@media (max-width:600px){
  .tm-m > tbody > tr.tm-band > td{ padding-left:.9rem; } .tm-bt .hide-phone{ display:none; }
  .tm-m > thead > tr > th, .tm-m > tbody > tr > td{ padding:.5rem .4rem; } .tm-m .tm-na{ white-space:normal; }
  .tm-m .hide-phone{ display:none; } .tm-lc{ max-width:58px; }
}

/* Drawer */
.tm-scrim{ position:fixed; inset:0; background:rgba(20,18,15,.35); opacity:0; pointer-events:none; transition:opacity .15s; z-index:40; }
.tm-drawer{ position:fixed; top:0; right:0; height:100%; width:min(440px,100%); background:var(--paper); color:var(--ink);
  box-shadow:-10px 0 30px rgba(0,0,0,.18); transform:translateX(100%); transition:transform .2s; overflow-y:auto; padding:1.2rem 1.35rem; z-index:41; }
body.tm-open .tm-scrim{ opacity:1; pointer-events:auto; } body.tm-open .tm-drawer{ transform:none; }
.tm-drawer h2{ margin:0 2rem .2rem 0; font-size:1.2rem; }
.tm-drawer .tm-x{ all:unset; cursor:pointer; position:absolute; top:.8rem; right:1rem; font-size:1.5rem; color:var(--muted); }
.tm-drawer h5{ margin:1.1rem 0 .4rem; font-size:.7rem; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); }
.tm-sub{ color:var(--muted); font-size:.86rem; margin:0; }
.tm-role{ display:grid; grid-template-columns:130px 1fr; gap:.5rem; align-items:center; padding:.45rem 0; border-bottom:1px solid var(--rule); }
.tm-role b{ font-size:.88rem; } .tm-role small{ display:block; color:var(--muted); font-size:.74rem; font-weight:500; }
.tm-prow{ display:flex; justify-content:space-between; gap:.6rem; align-items:center; padding:.45rem 0; border-bottom:1px solid var(--rule); }
.tm-prow b{ font-size:.9rem; } .tm-prow small{ display:block; color:var(--muted); font-size:.76rem; }
.tm-prow .st{ display:inline-flex; gap:.4rem; align-items:center; color:var(--muted); font-size:.8rem; white-space:nowrap; }
button.tm-prow{ all:unset; box-sizing:border-box; display:flex; width:100%; justify-content:space-between; gap:.6rem; align-items:center;
  padding:.45rem 0; border-bottom:1px solid var(--rule); cursor:pointer; }
button.tm-prow:hover b{ color:var(--blue); text-decoration:underline; }
:root[data-theme="dark"] button.tm-prow:hover b{ color:var(--bluesub); }
.tm-chips{ display:flex; flex-wrap:wrap; gap:.35rem; }
.tm-chip{ display:inline-flex; gap:.4rem; align-items:center; font-size:.78rem; padding:2px 9px; border-radius:999px; background:var(--tint); border:1px solid var(--rule); }
.tm-chip i{ width:9px; height:9px; border-radius:50%; background:var(--c); }
.tm-caps{ margin:.2rem 0 0; padding-left:1.1rem; font-size:.86rem; } .tm-caps li{ margin:.15rem 0; }
@media (prefers-reduced-motion: reduce){ .tm-drawer, .tm-scrim, tr.tm-r td:first-child::before{ transition:none; } }
@media print{ .tm-bar, .tm-drawer, .tm-scrim{ display:none; } .tm-card{ overflow:visible; box-shadow:none; } }