/* ==========================================================================
   Context Visualised · team pages (all six) · October 2026, S23 founder round
   Clickable dashboards: levels strip, dashboard frame, tiles as buttons,
   segmented tabs, appetite accordions, tube map stations, process flow,
   detail sheet (bottom sheet on mobile, 480px side panel from 600px),
   board hero phone. Loaded after site.css; uses its tokens.
   ========================================================================== */

/* ---- Hero with phone preview (board) ---- */
.team-hero { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 48px; align-items: center; }
.team-hero .team-hero-copy { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.team-hero .team-hero-copy > * { max-width: 46rem; }
.team-hero.page-hero > * { max-width: none; }

.tphone { margin: 0; width: 320px; max-width: 100%; padding: 10px; border-radius: 44px; border: 1.5px solid var(--ink-3); background: var(--surface-2); }
.tphone-screen { border-radius: 34px; border: 1px solid var(--border); background: var(--ground); padding: 20px 14px 16px; display: flex; flex-direction: column; gap: 10px; overflow: hidden; }
.tphone-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.tphone-top .label { color: var(--ink); }
.tphone-title { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; }
.tphone .rag li { padding: 7px 9px; }
.tphone .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.tphone .tile { padding: 10px 11px; gap: 4px; }
.tphone .tile .num { font-size: 24px; }
.tphone .tile .cap { font-size: 11.5px; line-height: 1.35; }
.tphone-k { margin-top: 2px; }
.tphone-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.tphone-rows li { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 10px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-chip); }
.tphone-rows li > span:first-child { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.tphone-rows b { font-size: 13.5px; font-weight: 600; line-height: 1.3; }
.tphone-rows .m { font-size: 11.5px; color: var(--ink-2); font-variant-numeric: var(--tabular); }
.tphone-foot { font-size: 11.5px; color: var(--ink-2); text-align: center; margin-top: 2px; }

/* ---- Levels strip: the three rollout levels, now interaction states ---- */
.tdash { display: flex; flex-direction: column; gap: 16px; }
.tlevels { display: flex; flex-direction: column; gap: 10px; }
.tl-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.tl-steps li { display: flex; align-items: center; gap: 8px; padding-top: 10px; border-top: 3px solid var(--muted); font-size: 14px; font-weight: 600; color: var(--ink-2); line-height: 1.3; }
.tl-n { width: 26px; height: 26px; flex: none; border-radius: 99px; border: 1.5px solid var(--ink-3); display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; font-variant-numeric: var(--tabular); color: var(--ink-2); }
.tl-steps li[aria-current="step"] { border-top-color: var(--ink); color: var(--ink); }
.tl-steps li[aria-current="step"] .tl-n { background: var(--ink); border-color: var(--ink); color: var(--surface); }
.tl-text p { font-size: 15.5px; line-height: 1.55; color: var(--ink-2); max-width: 60em; }
.tl-text b { color: var(--ink); font-weight: 700; }

/* ---- Dashboard frame (an app screen on the page) ---- */
.tdash-frame { background: var(--ground); border: 1px solid var(--muted); border-radius: 20px; padding: 24px; display: flex; flex-direction: column; gap: 16px; }
.tdash-head { display: flex; flex-direction: column; gap: 6px; }
.tdash-head .row { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.tdash-head .label { color: var(--ink); }
.tpanel { display: flex; flex-direction: column; gap: 14px; }
.tpanel[hidden] { display: none; }

/* Click to explore hint */
.explore { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font-size: 14.5px; line-height: 1.45; color: var(--ink-2); }
.explore-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px 4px 10px; border-radius: var(--radius-pill); background: var(--ink); color: var(--lemon); font-family: var(--font-data); font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; white-space: nowrap; }
.explore-chip svg { color: var(--lemon); }

/* Tiles that are buttons */
.ttiles .tile-li { display: flex; min-width: 0; }
.tile-btn { font: inherit; color: var(--ink); text-align: left; width: 100%; cursor: pointer; position: relative; padding-right: 34px; min-height: var(--tap); }
.tile-btn:hover { border-color: var(--ink); }
.tile-btn.tile-dark:hover { border-color: var(--ink); background: var(--ink-2); }
.tile-btn.tile-alert:hover { border-color: var(--fail); }
.tile-btn .chev { position: absolute; top: 12px; right: 10px; color: var(--ink-2); }
.tile-btn.tile-dark .chev { color: var(--on-ink-2); }
.tile-btn .tile-top { padding-right: 0; }

/* Segmented tabs (DESIGN-LANGUAGE §7) */
.tseg { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; padding: 4px; border-radius: 12px; background: var(--border); max-width: 520px; }
.tseg button { min-height: var(--tap); border: 0; border-radius: 9px; background: transparent; color: var(--ink); font-size: 15px; font-weight: var(--w-ui); cursor: pointer; padding: 0 10px; line-height: 1.2; }
.tseg button:hover { background: var(--surface); }
.tseg button[aria-pressed="true"] { background: var(--ink); color: var(--surface); }
.tseg button:focus-visible { outline-offset: 1px; }

/* Shared chevron rotation on accordions */
.chev { flex: none; transition: transform .16s ease; }
[data-acc][aria-expanded="true"] .chev { transform: rotate(90deg); }

/* ---- Board: appetite areas (folder accordion) ---- */
.tareas { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.tarea { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; }
.tarea.is-open { border-color: var(--ink-3); }
.tarea-btn { font: inherit; width: 100%; min-height: 64px; display: flex; align-items: center; gap: 12px; padding: 12px 16px; border: 0; background: transparent; color: var(--ink); text-align: left; cursor: pointer; }
.tarea-btn:hover { background: var(--surface-2); }
.tarea-btn:focus-visible { outline-offset: -3px; border-radius: 14px; }
.tarea-name { flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tarea-name b { font-size: 16.5px; font-weight: 700; letter-spacing: -0.01em; }
.tarea-name .m { font-size: 13px; color: var(--ink-2); }
.tarea-side { display: flex; align-items: center; gap: 10px; flex: none; }
.tdots { display: inline-flex; gap: 4px; }
.tarea-panel { padding: 2px 16px 16px; display: flex; flex-direction: column; gap: 12px; border-top: 1px solid var(--border); }
.tarea-panel[hidden] { display: none; }
.tarea-stmt { font-size: 14.5px; line-height: 1.5; color: var(--ink-2); padding-top: 12px; max-width: 60em; }
.tkris { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; }
.tkri { position: relative; background: var(--ground); }
.tkri:hover { border-color: var(--ink); }
.tkri .linked { margin-top: -4px; }
.kri-open { font: inherit; align-self: flex-start; display: inline-flex; align-items: center; gap: 4px; min-height: var(--tap); padding: 0; margin: -6px 0 -10px; border: 0; background: none; color: var(--accent-deep); font-size: 14.5px; font-weight: var(--w-ui); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.kri-open::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius-tile); z-index: 1; }
.kri-open:hover { color: var(--ink); }
.kri-open[aria-expanded="true"] { color: var(--ink); }
.tkri:has(.kri-open[aria-expanded="true"]) { border: 2px solid var(--ink); }

/* ---- Detail sheet: bottom sheet on mobile, 480px right panel from 600px ---- */
html.tsheet-open { overflow: hidden; }
.tsheet-backdrop { position: fixed; inset: 0; background: rgba(31, 70, 81, 0.45); z-index: 60; }
.tsheet { position: fixed; top: 0; right: 0; bottom: 0; width: 480px; max-width: 100%; z-index: 61; background: var(--surface); border-left: 1px solid var(--border); display: flex; flex-direction: column; gap: 14px; padding: 20px 22px 28px; overflow-y: auto; overscroll-behavior: contain; }
.tsheet[hidden], .tsheet-backdrop[hidden] { display: none; }
.tsheet-grab { display: none; }
.tsheet-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.tsheet-titles { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.tsheet-title { font-size: 21px; font-weight: 700; letter-spacing: -0.015em; line-height: 1.25; }
.tsheet-title:focus { outline: none; }
.tsheet-close { width: var(--tap); height: var(--tap); flex: none; border-radius: var(--radius-pill); border: 1.5px solid var(--ink); background: transparent; color: var(--ink); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.tsheet-close:hover { background: var(--surface-2); }
.tsheet-body { display: flex; flex-direction: column; gap: 18px; }
.tsheet-meta { font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.tsheet-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.tsec { display: flex; flex-direction: column; gap: 8px; }
.tsec > .label { padding-bottom: 2px; }
.tempty { font-size: 14px; color: var(--ink-2); }
.tsheet .source { margin-top: 4px; }
.tkri-big { background: var(--ground); }
.tkri-big .kri-name b { font-size: 14px; }
.tkri-big .kri-name span { font-variant-numeric: normal; line-height: 1.45; }
.tplan { display: flex; flex-direction: column; gap: 8px; padding: 14px; border-radius: var(--radius-tile); border: 1px solid var(--border); background: var(--ground); }
.tplan-top { display: flex; justify-content: space-between; align-items: baseline; gap: 6px 12px; flex-wrap: wrap; }
.tplan-top > b { font-size: 16px; font-weight: 700; }
.tplan .gwp { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.tplan .gwp b { font-size: 15px; font-weight: 700; }
.tplan .gwp > span:last-child { font-size: 12.5px; color: var(--ink-2); }
.tplan .m { font-size: 12.5px; color: var(--ink-2); line-height: 1.4; font-variant-numeric: var(--tabular); }
.tplan-risk { display: flex; flex-direction: column; gap: 4px; border-top: 1px solid var(--border); padding-top: 10px; }
.tplan-risk .line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tplan-risk .t { font-size: 14px; font-weight: 600; }
.tsheet .rows .side .pill + .pill { margin-left: 0; }

/* ---- Operations: map, line list, station flow, process document ---- */
.tmap-intro { font-size: 14.5px; line-height: 1.5; color: var(--ink-2); max-width: 60em; }
.thot { position: absolute; display: block; width: 44px; height: 44px; transform: translate(-50%, -50%); }
.thot-btn { display: block; width: 100%; height: 100%; padding: 0; border: 2px solid transparent; border-radius: 99px; background: transparent; cursor: pointer; }
.thot-btn:hover { border-color: var(--accent-deep); background: rgba(23, 121, 122, 0.06); }
.thot-btn[aria-expanded="true"] { border-color: var(--ink); background: rgba(31, 70, 81, 0.06); }
.thalo-key { width: 14px; height: 14px; border-radius: 99px; border: 2.5px solid var(--accent-deep); display: inline-block; }

.tlines { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 10px; align-items: start; }
.tline { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; }
.tline-btn { font: inherit; width: 100%; min-height: 64px; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 0; background: transparent; color: var(--ink); text-align: left; cursor: pointer; }
.tline-btn:hover { background: var(--surface-2); }
.tline-btn:focus-visible { outline-offset: -3px; border-radius: 14px; }
.tline-bar { width: 8px; height: 36px; flex: none; border-radius: 99px; background: var(--lc); }
.tline-main { flex: 1 1 auto; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.tline-main b { font-size: 16px; font-weight: 700; }
.tline-main .m { font-size: 12.5px; color: var(--ink-2); }
.tline-panel { padding: 0 14px 12px 18px; }
.tline-panel[hidden] { display: none; }
.tstops { list-style: none; margin: 0; padding: 0; }
.tstop { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 10px; min-height: 42px; }
.tstop-rail { position: relative; display: flex; justify-content: center; align-items: flex-start; }
.tstop-rail::before { content: ""; position: absolute; top: 0; bottom: 0; left: 9px; width: 6px; border-radius: 2px; background: var(--lc); }
.tstop-rail i { position: relative; margin-top: 11px; width: 12px; height: 12px; border-radius: 99px; background: var(--surface); border: 2.5px solid var(--lc); }
.tstop.is-ix .tstop-rail i { width: 16px; height: 16px; margin-top: 9px; border: 3px solid var(--ink); }
.tstop-main { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; padding: 9px 0 10px; min-width: 0; }
.tstop-n { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tstop-n b { font-size: 15px; font-weight: 500; }
.tstop.is-key .tstop-n b { font-weight: 700; }
.tstop-main > .m { font-size: 13px; line-height: 1.4; color: var(--ink-2); }
.tkey { font-family: var(--font-data); font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; padding: 1px 7px; border-radius: var(--radius-pill); background: var(--ink); color: var(--lemon); }
.tix { display: flex; flex-wrap: wrap; gap: 6px; }
.tix-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--ink-2); padding: 2px 8px; border: 1px solid var(--muted); border-radius: var(--radius-pill); }
.tix-chip.is-dashed { border: 1px dashed var(--ink); }
.tix-chip i { width: 12px; height: 4px; border-radius: 99px; display: inline-block; }
.tloop { margin: 2px 0 0 34px; }
.btn-open { font: inherit; display: inline-flex; align-items: center; gap: 6px; min-height: var(--tap); padding: 0 12px 0 16px; border-radius: var(--radius-pill); border: 1.5px solid var(--ink); background: var(--ink); color: var(--surface); font-size: 14px; font-weight: var(--w-ui); cursor: pointer; }
.btn-open:hover { background: var(--ink-2); border-color: var(--ink-2); }
.btn-open[aria-expanded="true"] { background: var(--surface); color: var(--ink); }
.tbadges { display: flex; flex-wrap: wrap; gap: 6px; }
.tbadges:empty { display: none; }
.tbadge { letter-spacing: 0.06em; }

/* Station flow, in place under the map */
.tflows:empty { display: none; }
.tflow { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); grid-template-areas: "back k" "sum steps" "sum note"; grid-template-rows: auto auto 1fr; gap: 12px 32px; align-items: start; background: var(--surface); border: 1px solid var(--border); border-top: 4px solid var(--stn); border-radius: 16px; padding: 16px 20px 20px; }
.tflow[hidden] { display: none; }
.tback { grid-area: back; font: inherit; justify-self: start; display: inline-flex; align-items: center; gap: 6px; min-height: var(--tap); padding: 0 12px 0 6px; border: 0; border-radius: var(--radius-pill); background: none; color: var(--ink); font-size: 15px; font-weight: var(--w-ui); cursor: pointer; }
.tback:hover { background: var(--surface-2); }
.tflow-sum { grid-area: sum; display: flex; flex-direction: column; gap: 8px; }
.tflow-title { font-size: 24px; font-weight: 800; letter-spacing: -0.025em; line-height: 1.15; }
.tflow-title:focus { outline: none; }
.tflow-p { font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }
.tmini { list-style: none; margin: 4px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.tmini li { border: 1px solid var(--border); border-radius: var(--radius-chip); padding: 8px 10px; display: flex; flex-direction: column; gap: 4px; background: var(--ground); }
.tmini .num { font-size: 22px; }
.tmini .cap { font-size: 12px; line-height: 1.35; color: var(--ink-2); }
.tmini li.is-failed { background: var(--fail); border-color: var(--fail); }
.tmini li.is-failed .num, .tmini li.is-failed .cap { color: var(--surface); }
.tflow-k { grid-area: k; align-self: center; }
.tflow > .small { grid-area: note; max-width: 640px; }
.tsteps { grid-area: steps; list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; max-width: 640px; }
.tarrow { display: flex; justify-content: center; height: 22px; color: var(--ink-2); }
.tstep-btn { font: inherit; width: 100%; min-height: 60px; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--border); border-left: 4px solid var(--stn); background: var(--surface); color: var(--ink); text-align: left; cursor: pointer; }
.tstep-btn:hover, .tbranch:hover { border-color: var(--ink); border-left-color: var(--stn); }
.tstep-btn[aria-expanded="true"], .tbranch[aria-expanded="true"] { border-color: var(--ink); border-width: 2px; border-left-width: 4px; border-left-color: var(--stn); }
.tstep-n { width: 28px; height: 28px; flex: none; border-radius: 99px; background: var(--ink); color: var(--surface); display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; font-variant-numeric: var(--tabular); }
.tstep-n.is-failed { background: var(--fail); }
.tstep-main { flex: 1 1 auto; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; }
.tstep-main .t, .tbranch .t { font-size: 15px; font-weight: 600; line-height: 1.3; }
.tstep-main .m, .tbranch .m { font-size: 12.5px; line-height: 1.4; color: var(--ink-2); }
.tstep-main .tbadges { margin-top: 3px; }
.cm-tag { display: inline-flex; align-items: center; padding: 1px 8px; border-radius: var(--radius-pill); background: var(--tint); font-family: var(--font-data); font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink); }
.tdec { display: flex; flex-direction: column; gap: 8px; }
.tdec-q { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 12px; border: 1.5px dashed var(--ink); background: var(--ground); font-size: 15px; font-weight: 600; color: var(--ink); }
.tdec-b { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.tbranch { font: inherit; min-height: 76px; display: flex; flex-direction: column; align-items: flex-start; gap: 5px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); color: var(--ink); text-align: left; cursor: pointer; }
.tbr-l { font-family: var(--font-data); font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; padding: 1px 8px; border-radius: var(--radius-pill); background: var(--border); color: var(--ink); }
.tbr-l.is-first { background: var(--ink); color: var(--surface); }

/* Process document (sheet) */
.tcm { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13.5px; color: var(--ink-2); }
.tdoc-io { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.tchips { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.tchips li { font-size: 13.5px; line-height: 1.35; padding: 7px 10px; border-radius: 8px; }
.tchips.in li { background: var(--ground); }
.tchips.out li { background: var(--tint); }
.tdoc-p { font-size: 15.5px; line-height: 1.55; color: var(--ink); }
.tincs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.tinc { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border-radius: var(--radius-chip); border: 1.5px solid var(--ink); background: var(--surface); }
.tinc-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.tinc-pills { display: flex; gap: 6px; flex-wrap: wrap; }
.tinc .t { font-size: 14.5px; font-weight: 600; line-height: 1.35; }
.tinc .m { font-size: 12.5px; line-height: 1.45; color: var(--ink-2); font-variant-numeric: var(--tabular); }

/* ---- Claims ---- */
.tsummary { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; padding: 12px 16px; border-radius: var(--radius-tile); border: 1.5px solid var(--fail); background: var(--surface); font-size: 15px; line-height: 1.45; }
.tclaims { list-style: none; margin: 0; padding: 0 14px; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; }
.tclaims li + li { border-top: 1px solid var(--border); }
.tclaim { font: inherit; width: 100%; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.5fr) 150px 18px; gap: 14px; align-items: center; padding: 12px 6px; min-height: 60px; border: 0; background: transparent; color: var(--ink); text-align: left; cursor: pointer; }
.tclaim:hover { background: var(--surface-2); }
.tclaim:focus-visible { outline-offset: -2px; border-radius: 10px; }
.tclaim[aria-expanded="true"] { background: var(--surface-2); }
.tclaim .main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.tclaim .t { font-size: 14.5px; font-weight: 600; line-height: 1.35; }
.tclaim .m { font-size: 12.5px; color: var(--ink-2); font-variant-numeric: var(--tabular); }
.tclaim .v { text-align: right; font-size: 13px; color: var(--ink-2); font-variant-numeric: var(--tabular); line-height: 1.4; }
.tclaim .v b { color: var(--ink); font-size: 14px; }
.tclaim .chev { color: var(--ink-2); }
.tgn { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.tgn li { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-radius: var(--radius-chip); border: 1px solid var(--border); background: var(--ground); min-width: 0; }
.tgn .num { font-size: calc(22px * var(--num-scale)); }
.tgn .is-net { background: var(--ink); border-color: var(--ink); }
.tgn .is-net .num { color: var(--lemon); }
.tgn .is-net .label { color: var(--on-ink-2); }
.ttower { display: flex; height: 18px; border-radius: 6px; overflow: hidden; gap: 2px; }
.ttower span { height: 100%; }
.tkeys { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.tkeys li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 14px; }
.tkeys li:last-child { border-bottom: 0; }
.tkeys .tk { display: flex; align-items: center; gap: 8px; min-width: 0; }
.tkeys .tk i { width: 12px; height: 10px; border-radius: 3px; flex: none; display: inline-block; }
.tgauge { height: 10px; }
.tsheet .hbars .bar > span { background: var(--ink-3); }
.tsrcs li { gap: 0; }
.tsrc { font: inherit; position: relative; width: 100%; display: flex; flex-direction: column; gap: 5px; padding: 10px 34px 10px 10px; margin: 0 -10px; width: calc(100% + 20px); border: 0; border-radius: 10px; background: transparent; color: var(--ink); text-align: left; cursor: pointer; }
.tsrc:hover, .tsrc[aria-expanded="true"] { background: var(--surface-2); }
.tsrc .chev { position: absolute; right: 8px; top: 50%; margin-top: -9px; color: var(--ink-2); }
.tsrc .top { display: flex; justify-content: space-between; gap: 8px; font-size: 13.5px; }
.tsrc .top b { font-weight: 600; }
.tctls { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.tctls li + li { border-top: 1px solid var(--border); }
.tctl { font: inherit; width: 100%; display: flex; align-items: center; gap: 12px; padding: 12px 6px; min-height: 60px; border: 0; background: transparent; color: var(--ink); text-align: left; cursor: pointer; }
.tctl:hover, .tctl[aria-expanded="true"] { background: var(--surface-2); }
.tctl:focus-visible { outline-offset: -2px; border-radius: 10px; }
.tctl .main { flex: 1 1 auto; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.tctl .t { font-size: 14.5px; font-weight: 600; }
.tctl .m { font-size: 12.5px; color: var(--ink-2); font-variant-numeric: var(--tabular); }
.tctl .side { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.tctl .chev { color: var(--ink-2); }

/* Sources: breathing room above the dark footer */
.team-sources { padding-top: 8px; padding-bottom: 56px; }

/* ---- Breakpoints ---- */
@media (max-width: 959px) {
  .team-hero { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .team-hero .tphone { justify-self: center; }
  .tflow { grid-template-columns: minmax(0, 1fr); grid-template-areas: "back" "sum" "k" "steps" "note"; grid-template-rows: none; }
}
@media (max-width: 599px) {
  .tdash-frame { padding: 14px; border-radius: 16px; }
  .tl-steps li { font-size: 13px; flex-direction: column; align-items: flex-start; gap: 6px; }
  .tl-text p { font-size: 15px; }
  .tseg { max-width: none; }
  .tseg button { font-size: 14px; padding: 0 6px; }
  .tarea-btn { padding: 12px; }
  .tarea-panel { padding: 2px 12px 12px; }
  .tkris { grid-template-columns: minmax(0, 1fr); }
  .tarea-side .tdots { display: none; }
  .tlines { grid-template-columns: minmax(0, 1fr); }
  .tflow { padding: 12px 14px 16px; }
  .tdec-b { grid-template-columns: minmax(0, 1fr); }
  .tclaim { grid-template-columns: minmax(0, 1fr) 18px; gap: 6px 10px; padding: 12px 2px; }
  .tclaim .main { grid-column: 1; }
  .tclaim .chev { grid-column: 2; grid-row: 1 / span 3; }
  .tclaim .cbar, .tclaim .v { grid-column: 1; }
  .tclaim .v { text-align: left; }
  .tclaims { padding: 0 10px; }
  .tctl { flex-wrap: wrap; }
  .tctl .side { justify-content: flex-start; }
  .tgn .num { font-size: 22px; }
  .tsheet { top: auto; left: 0; right: 0; bottom: 0; width: 100%; max-height: 85vh; border-left: 0; border-top: 1px solid var(--border); border-radius: 20px 20px 0 0; padding: 10px 16px 24px; }
  .tsheet-grab { display: block; width: 44px; height: 5px; border-radius: 99px; background: var(--muted); margin: 0 auto -4px; flex: none; }
  .tdoc-io { grid-template-columns: minmax(0, 1fr); }
  .tphone { width: 300px; }
}
@media (prefers-reduced-motion: reduce) {
  .chev { transition: none; }
}

/* Small meta lines inside sheet sections */
.tsheet-body .tsec > .m, .tsheet-body > .m { font-size: 13.5px; line-height: 1.45; color: var(--ink-2); }
.tpanel .board-grid { align-items: start; }
.tile-foot { display: block; font-size: 11.5px; line-height: 1.4; color: var(--ink-2); border-top: 1px solid var(--border); padding-top: 6px; margin-top: 2px; }

/* Detail content: real DOM, hidden until moved into the sheet (crawlable without JS) */
.tdetails { display: none; }
.tdetail { display: flex; flex-direction: column; gap: 18px; }
.tdetail[hidden] { display: none; }
.tsheet .tdetail-head { display: none; }   /* the sheet header already shows kicker and title */

/* ==========================================================================
   Underwriting, delegated authority and finance dashboards
   ========================================================================== */
.tgn-t { font-size: 14.5px; font-weight: 700; line-height: 1.3; }
.tkv .m { font-size: 12px; }
.tkv .t { font-size: 14.5px; font-weight: 600; line-height: 1.4; }
.tplanbar { margin-top: 6px; height: 6px; max-width: 360px; }
.tgwp { font-size: 16px; font-weight: 700; }
.tctl .v { font-size: 14px; font-weight: 700; }
.tline-row .side { flex-direction: column; align-items: flex-end; gap: 2px; }
.tline-row .side .m { white-space: nowrap; }
.tarea-static .tarea-btn { cursor: default; }
.tarea-static .tarea-btn:hover { background: transparent; }
.tarea-name .bar { margin-top: 6px; }

/* Delegated authority: the stop as one card that opens its flow */
.tstop-card { font: inherit; width: 100%; min-height: 72px; display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 1.5px solid var(--ink); border-radius: 14px; background: var(--surface); color: var(--ink); text-align: left; cursor: pointer; }
.tstop-card:hover { background: var(--surface-2); }
.tstop-card .tline-bar { height: 48px; }
.tstop-card .tline-main b { font-size: 18px; }
.tstop-open { margin-left: auto; flex: none; pointer-events: none; }
.tstop-card[aria-expanded="true"] .tstop-open { background: var(--surface); color: var(--ink); }
.tstop-wrap + .tflows .tflow { margin-top: 12px; }

/* Finance: reverse stress tile, currency dumbbells, reporting calendar */
.trev { margin-top: 14px; width: 100%; }
.tccys { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.tccys li + li { border-top: 1px solid var(--border); }
.tccy { font: inherit; width: 100%; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.4fr) auto 18px; gap: 14px; align-items: center; padding: 12px 6px; min-height: 60px; border: 0; background: transparent; color: var(--ink); text-align: left; cursor: pointer; }
.tccy:hover, .tccy[aria-expanded="true"] { background: var(--surface-2); }
.tccy:focus-visible { outline-offset: -2px; border-radius: 10px; }
.tccy .main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.tccy .t { font-size: 15px; font-weight: 700; }
.tccy .m { font-size: 12.5px; color: var(--ink-2); }
.tccy .side { display: flex; align-items: center; gap: 8px; justify-content: flex-end; }
.tccy .v { font-size: 14px; font-weight: 700; }
.tccy .chev { color: var(--ink-2); }
.tdb { position: relative; height: 18px; display: block; }
.tdb::before { content: ""; position: absolute; left: 0; right: 0; top: 8px; height: 2px; background: var(--border); border-radius: 2px; }
.tdb-line { position: absolute; top: 7px; height: 4px; background: var(--ink-3); border-radius: 2px; }
.tdb-line.is-out { background: var(--fail); }
.tdb-a, .tdb-l { position: absolute; top: 3px; width: 12px; height: 12px; margin-left: -6px; border-radius: 99px; }
.tdb-a { background: var(--ink); }
.tdb-l { background: var(--surface); border: 2.5px solid var(--ink); }
.legend .tdb-ka { width: 10px; height: 10px; border-radius: 99px; background: var(--ink); }
.legend .tdb-kl { width: 10px; height: 10px; border-radius: 99px; border: 2px solid var(--ink); background: var(--surface); }
.tcal { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.tcal-m { margin: 8px 0 2px; }
.tctls li.tcal-static { display: flex; align-items: center; gap: 12px; padding: 12px 6px; min-height: 56px; }
.tctls li.tcal-static .main { flex: 1 1 auto; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.tctls li.tcal-static .t { font-size: 14.5px; font-weight: 600; }
.tctls li.tcal-static .m { font-size: 12.5px; color: var(--ink-2); }
.tctls li.tcal-static .v { font-size: 14px; font-weight: 700; }
.tctls li.tcal-static .side, .tctl .side { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; justify-content: flex-end; text-align: right; }
.tctls li.tcal-static .side { flex-direction: column; align-items: flex-end; gap: 2px; }
/* S24: the clickable calendar row is a .tctl button, so it picked up the phone rule .tctl { flex-wrap: wrap }
   and dropped its title and pill below the date. Pin it to the same single-line layout as .tcal-static rows. */
.tctl.tcal-row { flex-wrap: nowrap; gap: 12px; min-height: 56px; }
.tctl.tcal-row .side { flex: none; flex-direction: column; align-items: flex-end; flex-wrap: nowrap; gap: 2px; justify-content: center; }
.tctl.tcal-row > .chev { align-self: center; margin-left: -4px; }
.tdate { width: 44px; flex: none; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 4px 0; border-radius: 10px; background: var(--ground); border: 1px solid var(--border); }
.tdate span { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; color: var(--ink-2); text-transform: uppercase; }
.tdate b { font-size: 18px; font-weight: 800; }

@media (max-width: 599px) {
  .tccy { grid-template-columns: minmax(0, 1fr) auto 18px; gap: 6px 10px; padding: 12px 2px; }
  .tccy .tdb { grid-column: 1 / span 2; grid-row: 2; }
  .tccy .chev { grid-column: 3; grid-row: 1 / span 2; }
  .tstop-card { flex-wrap: wrap; }
  .tstop-open { margin-left: 22px; }
  .tline-row .side .m { white-space: normal; text-align: right; }
}

/* ==========================================================================
   S23 founder round: phone heroes on every team page, compact tube maps with
   pulse rings, residual rating boxes (G6), emerging risks, mobile text trims (G4)
   ========================================================================== */
.tphone-date { font-size: 11.5px; color: var(--ink-2); font-variant-numeric: var(--tabular); }
.tphone-map { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 8px 4px 4px; }
.tphone-rows .tbadges { flex: none; justify-content: flex-end; gap: 4px; }
.tphone-rows .tbadges .pill { padding: 2px 6px; letter-spacing: 0.06em; }
.tphone-rows .ph-v { font-size: 14px; font-weight: 700; font-variant-numeric: var(--tabular); white-space: nowrap; }
.tphone-rows li > span:last-child:not(:first-child) { display: inline-flex; align-items: center; gap: 6px; flex: none; }
.tphone .tile .pill { align-self: flex-start; }
/* S24: Finance phone carries two headline tiles only, stacked and larger so the screen stays balanced. */
.tphone .tiles.tphone-stack { grid-template-columns: minmax(0, 1fr); gap: 10px; }
.tphone .tphone-stack .tile { padding: 18px 16px; gap: 6px; }
.tphone .tphone-stack .tile .num { font-size: 44px; }
.tphone .tphone-stack .tile .cap { font-size: 13px; }

/* Compact tube map (the phone rendering of the process map), at every width */
.tmap { display: grid; grid-template-columns: minmax(0, 640px) minmax(0, 1fr); gap: 16px 28px; align-items: start; }
.tmap-box { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 12px 10px 8px; }
.tmap-box .tmap-svg, .tphone-map .tmap-svg { display: block; width: 100%; height: auto; overflow: visible; }
.tmap-box .thot { margin: 0; }
.tmap-key { flex-direction: column; align-items: flex-start; gap: 8px; }
.tmap-key .tbadge { padding: 2px 7px; }
.tmap-k { margin-top: 4px; }
.thot-btn:hover { border-color: var(--accent-deep); background: rgba(23, 121, 122, 0.08); }
.thot-btn[aria-expanded="true"] { border-color: var(--ink); background: rgba(31, 70, 81, 0.08); }
.thot-btn:focus-visible { outline: 3px solid var(--accent-deep); outline-offset: 2px; }

/* Pulse ring around a stop whose process flow has active incidents (S24: colour by control status).
   Red, solid: a control in the flow has failed. Amber, dashed: one is partly effective and none failed.
   Decorative: the map's aria-label, the stop button and the key say the same in words, and the dash
   pattern separates the two without colour. Still ring when motion is reduced. */
.tpulse { fill: none; stroke: var(--accent-deep); stroke-width: 2.5; }
.tpulse-wave { fill: none; stroke: var(--accent-deep); stroke-width: 2; transform-box: fill-box; transform-origin: center; animation: tpulse 2.2s ease-out infinite; }
.tpulse-g.is-fail .tpulse, .tpulse-g.is-fail .tpulse-wave { stroke: var(--fail); }
.tpulse-g.is-partial .tpulse, .tpulse-g.is-partial .tpulse-wave { stroke: var(--amber); }
.tpulse-g.is-partial .tpulse { stroke-width: 3; stroke-dasharray: 4.5 3; }
@keyframes tpulse { 0% { transform: scale(1); opacity: 0.9; } 80%, 100% { transform: scale(1.8); opacity: 0; } }
.tpulse-key { width: 16px; height: 16px; flex: none; border-radius: 99px; border: 2.5px solid var(--accent-deep); box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px rgba(23, 121, 122, 0.35); display: inline-block; margin: 0 3px; }
.tpulse-key.is-fail { border-color: var(--fail); box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px rgba(194, 65, 42, 0.35); }
.tpulse-key.is-partial { border: 3px dashed var(--amber); box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px rgba(224, 168, 46, 0.35); }
.thot-btn.is-fail:hover { border-color: var(--fail); background: rgba(194, 65, 42, 0.08); }
.thot-btn.is-partial:hover { border-color: var(--amber-deep); background: rgba(224, 168, 46, 0.1); }
@media (prefers-reduced-motion: reduce) {
  .tpulse-wave { animation: none; opacity: 0; }
}

/* Residual rating box (G6): letter is likelihood A to E, number is impact 1 to 5; colour matches the 5x5 cell */
.trate { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; height: 24px; padding: 0 6px; border-radius: 6px; font-family: var(--font-text); font-size: 13px; font-weight: 700; font-variant-numeric: var(--tabular); letter-spacing: 0.02em; line-height: 1; white-space: nowrap; }
.trate-high { background: var(--fail); color: var(--surface); }
.trate-medium { background: var(--amber); color: var(--ink); }
.trate-low { background: var(--ri-4); color: var(--ink); }
.trate-key { font-size: 12.5px; line-height: 1.45; color: var(--ink-2); }
.tgn .tgn-r .trate { height: 30px; min-width: 42px; font-size: 16px; }
.tctl .side .trate, .rows .side .trate { flex: none; }

/* Emerging risks (board) */
.temg .tcal-m { margin-top: 10px; }
.temg-row .side { flex-wrap: nowrap; align-items: center; }
.timp { display: inline-flex; gap: 2px; align-items: flex-end; height: 16px; }
.timp i { width: 5px; height: 100%; border-radius: 2px; background: var(--border); display: inline-block; }
.timp i:nth-child(1) { height: 40%; } .timp i:nth-child(2) { height: 55%; } .timp i:nth-child(3) { height: 70%; } .timp i:nth-child(4) { height: 85%; }
.timp i.on { background: var(--ink); }

/* Every team page now has a phone hero: keep the copy column readable beside it */
.team-page .team-hero { padding-bottom: 8px; }

@media (max-width: 959px) {
  .tmap { grid-template-columns: minmax(0, 1fr); }
  .tmap-key { flex-direction: row; flex-wrap: wrap; gap: 8px 14px; }
}
@media (max-width: 599px) {
  .tmap-box { padding: 8px 4px 4px; border-radius: 12px; }
  .temg-row .side { flex-wrap: wrap; }
  /* G4: less text on phones, the visual leads. Content stays in the HTML. */
  .team-page .compare,
  .team-page .tmap-intro,
  .team-page .thinks .card p,
  .team-page .band-ink .intro .body-lg:not(.proof-did),
  .team-page .tflow > .small { display: none; }
}

/* S24: plan bars. Track = the whole £750m plan; the dark part = the class's share, split into
   retained (solid ink) and reinsured (hatched teal). Key below the list; numbers in each bar's aria-label. */
.tplanbar { height: 8px; gap: 0; }
.tplanbar > .ret { background: var(--ink); }
.tplanbar > .ced { background: repeating-linear-gradient(-45deg, var(--accent-deep) 0 2px, var(--change-up) 2px 4px); box-shadow: inset 1px 0 0 var(--surface); }
.tplan-key { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; font-size: 12.5px; color: var(--ink-2); margin: 0; }
.tpanel > .tplan-key { margin-top: 4px; }
.tplan-k { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.tplan-key .sw { width: 18px; height: 8px; border-radius: 99px; flex: none; }
.tplan-key .sw-ret { background: var(--ink); }
.tplan-key .sw-ced { background: repeating-linear-gradient(-45deg, var(--accent-deep) 0 2px, var(--change-up) 2px 4px); }
/* channel split: one item per channel, never broken mid-item */
.tdist { list-style: none; margin: 0; padding: 12px 0 0; display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 14px; color: var(--ink-2); }
.tdist li { white-space: nowrap; }
.tdist b { color: var(--ink); font-weight: 600; }
/* desktop: premium right-aligned over its meta line (was centred) */
.tctl.tline-row .side { flex-direction: column; align-items: flex-end; flex-wrap: nowrap; }

@media (max-width: 599px) {
  /* G4: shorter labels on phones ("3 lines", "loss ratio"); the read-note says they are gross */
  .tm-hide { display: none; }
  /* class header: name, premium, change and chevron on one row; meta and bar full width below */
  .tarea-plan .tarea-btn { display: grid; grid-template-columns: minmax(0, 1fr) auto auto 18px; column-gap: 8px; row-gap: 3px; align-items: center; }
  .tarea-plan .tarea-name, .tarea-plan .tarea-side { display: contents; }
  .tarea-plan .tarea-name b { grid-column: 1; grid-row: 1; }
  .tarea-plan .tgwp { grid-column: 2; grid-row: 1; }
  .tarea-plan .tarea-side .change { grid-column: 3; grid-row: 1; }
  .tarea-plan .tarea-btn > .chev { grid-column: 4; grid-row: 1; }
  .tarea-plan .tarea-name .m { grid-column: 1 / -1; grid-row: 2; }
  .tarea-plan .tplanbar { grid-column: 1 / -1; grid-row: 3; max-width: none; margin-top: 4px; }
  .tdist { font-size: 13px; gap: 2px 12px; }
  /* line of business: name and premium on one row, one meta line, then a muted code line; chevron centred */
  .tctl.tline-row { display: grid; grid-template-columns: minmax(0, 1fr) auto 18px; column-gap: 10px; row-gap: 2px; align-items: center; padding: 12px 4px; }
  .tline-row .main, .tline-row .side { display: contents; }
  .tline-row .main .t { grid-column: 1; grid-row: 1; }
  .tline-row .side .v { grid-column: 2; grid-row: 1; text-align: right; }
  .tline-row .side .m { grid-column: 1 / 3; grid-row: 2; text-align: left; white-space: normal; }
  .tline-row .main .m { grid-column: 1 / 3; grid-row: 3; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .tline-row > .chev { grid-column: 3; grid-row: 1 / 4; }
}

/* ---- Round 2 (copy/_round2_copy.md, 13 Oct 2026): bridge lines, Board trace, Finance callout, How it works,
   "What Halden did", footer CTA. The steps reuse the product pages' .steps .lsteps component (lens.css owns .lstep-n). ---- */
.team-page .lstep-n { width: 32px; height: 32px; border-radius: 99px; background: var(--ink); color: var(--lemon); display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-data); font-size: 15px; font-weight: 700; }
.team-bridge { font-weight: 600; color: var(--ink); }
.team-after { max-width: 46em; }
.team-callout { padding: 20px 22px; display: flex; flex-direction: column; gap: 8px; border-left: 4px solid var(--fail); max-width: 46em; }
.team-callout p { color: var(--ink-2); }
.team-trace { display: flex; flex-direction: column; gap: 14px; max-width: 46em; }
.trace-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.trace-list li { font-size: 16px; line-height: 1.5; padding-left: 26px; position: relative; }
.trace-list .trace-head { padding-left: 0; }
.trace-list .trace-arrow { position: absolute; left: 0; top: 0; color: var(--fail-text); font-weight: 700; }
.proof-did { max-width: 46em; }
/* Who-we-are credit line: full width under the CTA columns, with a rule above it (staging QA). */
.cta .cta-credit { flex-basis: 100%; max-width: none; margin-top: 8px; padding-top: 24px; border-top: 1px solid var(--border); color: var(--ink-2); }
.cta-check .cta-sep { color: var(--ink-3); }

/* Staging QA: team hero at phone width. Same content, tighter spacing (the Halden disclaimer stays). */
@media (max-width: 599px) {
  .team-page .team-hero.page-hero { padding-top: 28px; padding-bottom: 36px; gap: 22px; }
  .team-hero .team-hero-copy { gap: 14px; }
  .team-hero .tphone { padding: 6px; border-radius: 34px; }
  .team-hero .tphone-screen { border-radius: 28px; padding: 14px 10px 12px; gap: 8px; }
  .team-hero .tphone .tile { padding: 8px 10px; }
  .team-hero .tphone-rows li { padding: 6px 9px; }
}