/* ==========================================================================
   Truo Trade — product UI kit
   Live DOM recreation of the Truo Trade application shell and the seven demo
   screens. Everything here renders as real text so the demo stays sharp on any
   display, reflows responsively, and is readable by assistive technology —
   which a screenshot cannot do. The PNG captures remain the poster fallback.

   Shell dimensions, densities, radii and colour distribution follow
   TruoBrand/design-system: rail 72/240px, top bar 56px, page header 72–96px,
   8px controls, 12px panels, 16px cards, ≤10% Truo Blue.
   ========================================================================== */

.tp {
  --tp-scale: 1;
  --tp-rail: var(--truo-rail-expanded);

  position: relative;
  display: grid;
  grid-template-columns: var(--tp-rail) minmax(0, 1fr);
  container-type: inline-size;
  font-family: var(--truo-font-body);
  font-size: calc(14px * var(--tp-scale));
  line-height: var(--truo-leading-ui);
  color: var(--truo-ink);
  background: var(--truo-mist);
  text-align: left;
  -webkit-font-smoothing: antialiased;
}

.tp[data-nav="compact"] { --tp-rail: var(--truo-rail-collapsed); }
.tp[data-nav="none"] { grid-template-columns: minmax(0, 1fr); }
.tp[data-nav="none"] .tp-rail { display: none; }

/* The stage is authored at a 16:9 reference frame. Screens that need it can
   opt into a fixed aspect; the hero lets height follow content instead. */
.tp--framed { aspect-ratio: 16 / 9; overflow: hidden; }

.tp *,
.tp *::before,
.tp *::after { box-sizing: border-box; }

.tp p, .tp h1, .tp h2, .tp h3, .tp h4, .tp ul, .tp ol, .tp figure { margin: 0; }
.tp ul, .tp ol { padding: 0; list-style: none; }

/* --- Global rail ---------------------------------------------------------- */

.tp-rail {
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: calc(20px * var(--tp-scale)) calc(12px * var(--tp-scale));
  background: var(--truo-ink);
  color: var(--truo-ink-text);
}

.tp-rail__brand {
  display: flex;
  align-items: center;
  min-height: calc(36px * var(--tp-scale));
  padding: 0 calc(8px * var(--tp-scale));
  margin-bottom: calc(24px * var(--tp-scale));
}

.tp-rail__wordmark {
  display: block;
  width: auto;
  height: calc(33px * var(--tp-scale));
}

/* Expanded rail shows the Final V2 `truo trade` wordmark; the 72px rail shows
   the Route Mark. Both are the approved white-on-Ink SVGs. */
.tp-rail__wordmark--short { display: none; }
.tp[data-nav="compact"] .tp-rail__wordmark--full { display: none; }
.tp[data-nav="compact"] .tp-rail__wordmark--short { display: block; height: calc(28px * var(--tp-scale)); }

.tp[data-nav="compact"] .tp-rail { align-items: center; padding-inline: calc(10px * var(--tp-scale)); }
.tp[data-nav="compact"] .tp-rail__brand { padding: 0; justify-content: center; }

.tp-rail__label {
  padding: 0 calc(8px * var(--tp-scale));
  margin-bottom: calc(8px * var(--tp-scale));
  font-size: calc(10px * var(--tp-scale));
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--truo-ink-text-muted);
}

.tp[data-nav="compact"] .tp-rail__label { display: none; }

.tp-nav { display: flex; flex-direction: column; gap: calc(2px * var(--tp-scale)); }
.tp-nav + .tp-rail__label { margin-top: calc(24px * var(--tp-scale)); }

.tp-nav__item {
  display: flex;
  gap: calc(12px * var(--tp-scale));
  align-items: center;
  min-height: calc(38px * var(--tp-scale));
  padding: 0 calc(10px * var(--tp-scale));
  font-size: calc(13.5px * var(--tp-scale));
  font-weight: 500;
  color: var(--truo-ink-text-muted);
  background: transparent;
  border: 0;
  border-radius: var(--truo-radius-control);
  text-decoration: none;
  transition: background var(--truo-duration-fast) var(--truo-ease),
              color var(--truo-duration-fast) var(--truo-ease);
}

.tp-nav__item svg { flex: none; width: calc(17px * var(--tp-scale)); height: calc(17px * var(--tp-scale)); }
.tp-nav__item span:first-of-type { flex: 1; min-width: 0; }

.tp[data-nav="compact"] .tp-nav__item {
  position: relative;
  justify-content: center;
  width: calc(40px * var(--tp-scale));
  padding: 0;
}

.tp[data-nav="compact"] .tp-nav__item > span:not(.tp-nav__badge) { display: none; }

/* Active navigation carries the layer accent: Truo Blue for CRM and execution,
   Clearance Teal for compliance. Which item is
   current follows from [data-screen] on the root, so the rail partial stays
   identical across all seven screens. */
.tp[data-screen="overview"] .tp-nav__item[data-id="home"],
.tp[data-screen="pipeline"] .tp-nav__item[data-id="opportunities"],
.tp[data-screen="opportunity"] .tp-nav__item[data-id="opportunities"],
.tp[data-screen="handoff"] .tp-nav__item[data-id="orders"],
.tp[data-screen="handoff-success"] .tp-nav__item[data-id="orders"],
.tp[data-screen="trade"] .tp-nav__item[data-id="shipments"],
.tp[data-screen="compliance"] .tp-nav__item[data-id="reviews"],
.tp-nav__item[aria-current] {
  color: var(--truo-white);
  background: color-mix(in srgb, var(--tp-layer, var(--truo-info)) 34%, transparent);
}

.tp-nav__item[data-layer="crm"] { --tp-layer: #4a7fe8; }
.tp-nav__item[data-layer="execution"] { --tp-layer: var(--truo-blue); }
.tp-nav__item[data-layer="compliance"] { --tp-layer: #17a394; }

.tp-nav__badge {
  flex: none;
  min-width: calc(18px * var(--tp-scale));
  height: calc(18px * var(--tp-scale));
  padding: 0 calc(5px * var(--tp-scale));
  font-size: calc(10.5px * var(--tp-scale));
  font-weight: 600;
  font-variant-numeric: var(--truo-numeric-variant);
  line-height: calc(18px * var(--tp-scale));
  text-align: center;
  color: var(--truo-ink-text);
  background: var(--truo-ink-line-strong);
  border-radius: var(--truo-radius-pill);
}

.tp[data-nav="compact"] .tp-nav__badge {
  position: absolute;
  top: calc(2px * var(--tp-scale));
  right: calc(-2px * var(--tp-scale));
}

.tp-rail__user {
  display: flex;
  gap: calc(10px * var(--tp-scale));
  align-items: center;
  margin-top: auto;
  padding-top: calc(14px * var(--tp-scale));
  border-top: 1px solid var(--truo-ink-line);
}

.tp-rail__user-name { font-size: calc(13px * var(--tp-scale)); font-weight: 600; color: var(--truo-ink-text); }
.tp-rail__user-role { font-size: calc(11.5px * var(--tp-scale)); color: var(--truo-ink-text-muted); }
.tp[data-nav="compact"] .tp-rail__user { justify-content: center; }
.tp[data-nav="compact"] .tp-rail__user div { display: none; }

/* --- Avatar --------------------------------------------------------------- */

.tp-avatar {
  display: grid;
  flex: none;
  place-items: center;
  width: calc(28px * var(--tp-scale));
  height: calc(28px * var(--tp-scale));
  font-size: calc(10.5px * var(--tp-scale));
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--truo-white);
  background: #33417a;
  border-radius: var(--truo-radius-pill);
}

.tp-avatar--sm { width: calc(20px * var(--tp-scale)); height: calc(20px * var(--tp-scale)); font-size: calc(8.5px * var(--tp-scale)); }
.tp-avatar--light { color: var(--truo-info-dark); background: var(--truo-info-tint); }
.tp-avatar--teal { color: var(--truo-clearance-dark); background: var(--truo-clearance-tint); }
.tp-avatar--muted { color: var(--truo-slate); background: var(--truo-mist); }

/* --- Main column ---------------------------------------------------------- */

.tp-main { display: flex; flex-direction: column; min-width: 0; }

.tp-topbar {
  display: flex;
  gap: calc(20px * var(--tp-scale));
  align-items: center;
  padding: 0 calc(20px * var(--tp-scale));
  min-height: calc(56px * var(--tp-scale));
  background: var(--truo-white);
  border-bottom: 1px solid var(--truo-line);
}

.tp-search {
  display: flex;
  gap: calc(10px * var(--tp-scale));
  align-items: center;
  width: min(420px, 42%);
  height: calc(34px * var(--tp-scale));
  padding: 0 calc(12px * var(--tp-scale));
  font-size: calc(13px * var(--tp-scale));
  color: var(--truo-slate);
  background: var(--truo-mist);
  border: 1px solid transparent;
  border-radius: var(--truo-radius-control);
}

.tp-search svg { flex: none; width: calc(15px * var(--tp-scale)); height: calc(15px * var(--tp-scale)); opacity: 0.7; }

.tp-topbar__context { font-size: calc(12.5px * var(--tp-scale)); color: var(--truo-slate); }
.tp-topbar__end { display: flex; gap: calc(16px * var(--tp-scale)); align-items: center; margin-left: auto; }
.tp-topbar__end svg { width: calc(17px * var(--tp-scale)); height: calc(17px * var(--tp-scale)); color: var(--truo-ink); }

.tp-header {
  display: flex;
  gap: calc(24px * var(--tp-scale));
  align-items: flex-end;
  padding: calc(16px * var(--tp-scale)) calc(24px * var(--tp-scale)) calc(18px * var(--tp-scale));
  background: var(--truo-white);
  border-bottom: 1px solid var(--truo-line);
}

.tp-header__body { min-width: 0; }

.tp-breadcrumb {
  display: flex;
  gap: calc(6px * var(--tp-scale));
  align-items: center;
  margin-bottom: calc(4px * var(--tp-scale));
  font-size: calc(12px * var(--tp-scale));
  color: var(--truo-slate);
}

.tp-breadcrumb b { font-weight: 400; color: var(--truo-info); font-family: var(--truo-font-mono); font-variant-numeric: var(--truo-identifier-variant); }

.tp-header__title {
  font-family: var(--truo-font-display);
  font-size: calc(29px * var(--tp-scale));
  font-weight: 700;
  line-height: var(--truo-leading-heading);
  letter-spacing: -0.015em;
}

.tp-header__meta { margin-top: calc(3px * var(--tp-scale)); font-size: calc(12.5px * var(--tp-scale)); color: var(--truo-slate); }
.tp-header__actions { display: flex; gap: calc(10px * var(--tp-scale)); align-items: center; margin-left: auto; }

.tp-canvas {
  flex: 1;
  min-height: 0;
  padding: calc(20px * var(--tp-scale)) calc(24px * var(--tp-scale)) calc(24px * var(--tp-scale));
  background: var(--truo-mist);
}

/* --- Controls -------------------------------------------------------------- */

.tp-btn {
  display: inline-flex;
  gap: calc(8px * var(--tp-scale));
  align-items: center;
  height: calc(34px * var(--tp-scale));
  padding: 0 calc(14px * var(--tp-scale));
  font-family: inherit;
  font-size: calc(13px * var(--tp-scale));
  font-weight: 600;
  color: var(--truo-ink);
  white-space: nowrap;
  background: var(--truo-white);
  border: 1px solid var(--truo-line);
  border-radius: var(--truo-radius-control);
  cursor: pointer;
  transition: background var(--truo-duration-fast) var(--truo-ease),
              border-color var(--truo-duration-fast) var(--truo-ease);
}

.tp-btn svg { width: calc(15px * var(--tp-scale)); height: calc(15px * var(--tp-scale)); }
.tp-btn:hover { background: var(--truo-mist); }

.tp-btn--primary { color: var(--truo-white); background: var(--truo-ink); border-color: var(--truo-ink); }
.tp-btn--primary:hover { background: var(--truo-ink-hover); border-color: var(--truo-ink-hover); }

.tp-chip {
  display: inline-flex;
  flex: none;
  white-space: nowrap;
  gap: calc(6px * var(--tp-scale));
  align-items: center;
  height: calc(30px * var(--tp-scale));
  padding: 0 calc(12px * var(--tp-scale));
  font-size: calc(12.5px * var(--tp-scale));
  font-weight: 500;
  color: var(--truo-ink);
  background: var(--truo-white);
  border: 1px solid var(--truo-line);
  border-radius: var(--truo-radius-pill);
}

.tp-chip--selected { color: var(--truo-info-dark); background: var(--truo-info-tint); border-color: color-mix(in srgb, var(--truo-info) 30%, transparent); }
.tp-chip--plain { background: transparent; border-color: transparent; }
.tp-chip svg { width: calc(14px * var(--tp-scale)); height: calc(14px * var(--tp-scale)); }

/* --- Surfaces -------------------------------------------------------------- */

.tp-card {
  background: var(--truo-white);
  border: 1px solid var(--truo-line);
  border-radius: var(--truo-radius-card);
}

.tp-panel {
  background: var(--truo-white);
  border: 1px solid var(--truo-line);
  border-radius: var(--truo-radius-panel);
}

.tp-panel__head {
  display: flex;
  gap: calc(12px * var(--tp-scale));
  align-items: baseline;
  padding: calc(14px * var(--tp-scale)) calc(16px * var(--tp-scale));
  border-bottom: 1px solid var(--truo-line);
}

.tp-panel__title { font-size: calc(14px * var(--tp-scale)); font-weight: 600; }
.tp-panel__sub { font-size: calc(12px * var(--tp-scale)); color: var(--truo-slate); }
.tp-panel__end { margin-left: auto; font-size: calc(12px * var(--tp-scale)); color: var(--truo-slate); }

/* --- Identifiers, values and badges ----------------------------------------- */

.tp-id {
  font-family: var(--truo-font-mono);
  font-size: calc(11.5px * var(--tp-scale));
  font-variant-numeric: var(--truo-identifier-variant);
  letter-spacing: 0.01em;
  color: var(--truo-info);
}

.tp-num { font-variant-numeric: var(--truo-numeric-variant); }

.tp-value {
  font-family: var(--truo-font-display);
  font-size: calc(19px * var(--tp-scale));
  font-weight: 700;
  font-variant-numeric: var(--truo-numeric-variant);
  letter-spacing: -0.01em;
}

.tp-tag {
  display: inline-flex;
  align-items: center;
  height: calc(19px * var(--tp-scale));
  padding: 0 calc(7px * var(--tp-scale));
  font-size: calc(10.5px * var(--tp-scale));
  font-weight: 500;
  color: var(--truo-slate);
  background: var(--truo-mist);
  border-radius: var(--truo-radius-sm);
}

.tp-status {
  display: inline-flex;
  gap: calc(6px * var(--tp-scale));
  align-items: center;
  height: calc(24px * var(--tp-scale));
  padding: 0 calc(10px * var(--tp-scale));
  font-size: calc(11.5px * var(--tp-scale));
  font-weight: 600;
  border-radius: var(--truo-radius-pill);
}

.tp-status::before {
  content: "";
  width: calc(6px * var(--tp-scale));
  height: calc(6px * var(--tp-scale));
  background: currentcolor;
  border-radius: 50%;
}

.tp-status--won,
.tp-status--cleared { color: var(--truo-clearance-dark); background: var(--truo-clearance-tint); }
.tp-status--active { color: var(--truo-blue-dark); background: var(--truo-blue-tint); }
.tp-status--attention { color: var(--truo-warning); background: var(--truo-warning-tint); }
.tp-status--info { color: var(--truo-info-dark); background: var(--truo-info-tint); }

/* --- Attention banner -------------------------------------------------------
   The one place the system allows a coloured edge: a 3px semantic border on a
   tinted surface, always paired with an icon and an explicit label. */

.tp-banner {
  display: flex;
  gap: calc(12px * var(--tp-scale));
  align-items: flex-start;
  padding: calc(12px * var(--tp-scale)) calc(14px * var(--tp-scale));
  background: var(--truo-warning-tint);
  border: 1px solid color-mix(in srgb, var(--truo-warning) 22%, transparent);
  border-left: 3px solid var(--truo-warning);
  border-radius: var(--truo-radius-panel);
}

.tp-banner svg { flex: none; width: calc(17px * var(--tp-scale)); height: calc(17px * var(--tp-scale)); color: var(--truo-warning); }
.tp-banner__label { font-size: calc(11px * var(--tp-scale)); font-weight: 600; color: var(--truo-warning); }
.tp-banner__title { margin-top: calc(2px * var(--tp-scale)); font-size: calc(13px * var(--tp-scale)); font-weight: 600; }
.tp-banner__body { margin-top: calc(3px * var(--tp-scale)); font-size: calc(12px * var(--tp-scale)); line-height: 1.45; color: var(--truo-warning); }
.tp-banner__end { margin-left: auto; }

/* --- Pipeline board ---------------------------------------------------------- */

.tp-toolbar {
  display: flex;
  gap: calc(10px * var(--tp-scale));
  align-items: center;
  margin-bottom: calc(18px * var(--tp-scale));
}

.tp-viewswitch {
  display: flex;
  gap: calc(2px * var(--tp-scale));
  align-items: center;
  margin-left: auto;
  padding: calc(3px * var(--tp-scale));
  background: var(--truo-white);
  border: 1px solid var(--truo-line);
  border-radius: var(--truo-radius-control);
}

.tp-viewswitch button {
  height: calc(26px * var(--tp-scale));
  padding: 0 calc(10px * var(--tp-scale));
  font-family: inherit;
  font-size: calc(12px * var(--tp-scale));
  font-weight: 500;
  color: var(--truo-slate);
  background: transparent;
  border: 0;
  border-radius: var(--truo-radius-sm);
  cursor: pointer;
}

.tp-viewswitch button[aria-pressed="true"] { color: var(--truo-ink); background: var(--truo-mist); }

.tp-board {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: calc(14px * var(--tp-scale));
  align-items: start;
}

.tp-column {
  padding: calc(12px * var(--tp-scale));
  background: color-mix(in srgb, var(--truo-white) 55%, transparent);
  border: 1px solid var(--truo-line);
  border-radius: var(--truo-radius-panel);
  transition: border-color var(--truo-duration-normal) var(--truo-ease),
              background var(--truo-duration-normal) var(--truo-ease);
}

.tp-column[data-emphasis="true"] {
  background: var(--truo-white);
  border-color: color-mix(in srgb, var(--truo-clearance) 34%, transparent);
}

.tp-column__head {
  display: flex;
  flex-wrap: wrap;
  gap: calc(8px * var(--tp-scale));
  align-items: baseline;
  padding: 0 calc(4px * var(--tp-scale)) calc(12px * var(--tp-scale));
}

.tp-column__name { font-size: calc(13px * var(--tp-scale)); font-weight: 600; }
.tp-column__count {
  min-width: calc(18px * var(--tp-scale));
  padding: 0 calc(5px * var(--tp-scale));
  margin-left: auto;
  font-size: calc(10.5px * var(--tp-scale));
  font-weight: 600;
  font-variant-numeric: var(--truo-numeric-variant);
  line-height: calc(18px * var(--tp-scale));
  text-align: center;
  color: var(--truo-slate);
  background: var(--truo-mist);
  border-radius: var(--truo-radius-pill);
}
.tp-column__sum { width: 100%; font-size: calc(11.5px * var(--tp-scale)); font-variant-numeric: var(--truo-numeric-variant); color: var(--truo-slate); }

.tp-cards { display: flex; flex-direction: column; gap: calc(10px * var(--tp-scale)); }

.tp-opp {
  display: block;
  width: 100%;
  padding: calc(12px * var(--tp-scale));
  font: inherit;
  text-align: left;
  background: var(--truo-white);
  border: 1px solid var(--truo-line);
  border-radius: var(--truo-radius-panel);
  cursor: pointer;
  transition: border-color var(--truo-duration-normal) var(--truo-ease),
              box-shadow var(--truo-duration-normal) var(--truo-ease),
              transform var(--truo-duration-normal) var(--truo-ease);
}

.tp-opp:hover { border-color: var(--truo-slate); }

.tp-opp[data-selected="true"] {
  border-color: var(--truo-info);
  box-shadow: 0 0 0 1px var(--truo-info), var(--truo-shadow-raised);
}

.tp-opp__name {
  margin: calc(4px * var(--tp-scale)) 0 calc(10px * var(--tp-scale));
  font-size: calc(13px * var(--tp-scale));
  font-weight: 600;
  line-height: 1.35;
}

.tp-opp__value { font-size: calc(17px * var(--tp-scale)); }
.tp-opp__tags { display: flex; gap: calc(6px * var(--tp-scale)); margin: calc(10px * var(--tp-scale)) 0; }

.tp-opp__foot {
  display: flex;
  gap: calc(8px * var(--tp-scale));
  align-items: center;
  font-size: calc(11.5px * var(--tp-scale));
  color: var(--truo-slate);
}

.tp-opp__foot time { margin-left: auto; font-variant-numeric: var(--truo-numeric-variant); }

/* --- Record layout ------------------------------------------------------------ */

.tp-record {
  display: grid;
  grid-template-columns: minmax(0, 1fr) calc(288px * var(--tp-scale));
  gap: calc(16px * var(--tp-scale));
  align-items: start;
}

.tp-record--wide { grid-template-columns: minmax(0, 1fr) calc(300px * var(--tp-scale)); }
.tp-stack { display: flex; flex-direction: column; gap: calc(16px * var(--tp-scale)); min-width: 0; }

/* Keep the stage tracker and its paired next-action card on one visual row. */
.tp[data-screen="opportunity"] .tp-record > .tp-stack:first-child > .tp-panel:first-child,
.tp[data-screen="opportunity"] .tp-record > aside.tp-stack > .tp-banner {
  height: calc(92px * var(--tp-scale));
}

/* Stage tracker */
.tp .tp-stages {
  display: grid;
  grid-auto-columns: 1fr;
  grid-auto-flow: column;
  height: 100%;
  align-content: center;
  padding: 0 calc(24px * var(--tp-scale));
}

.tp-stage { position: relative; text-align: center; }

.tp-stage::before {
  content: "";
  position: absolute;
  top: calc(6px * var(--tp-scale));
  left: 50%;
  width: 100%;
  height: 2px;
  background: var(--truo-line);
}

.tp-stage:last-child::before { display: none; }
.tp-stage[data-done="true"]::before { background: var(--truo-info); }

.tp-stage__dot {
  position: relative;
  display: block;
  width: calc(13px * var(--tp-scale));
  height: calc(13px * var(--tp-scale));
  margin: 0 auto calc(9px * var(--tp-scale));
  background: var(--truo-white);
  border: calc(3px * var(--tp-scale)) solid var(--truo-line);
  border-radius: 50%;
}

.tp-stage[data-done="true"] .tp-stage__dot { border-color: var(--truo-info); }
.tp-stage[data-current="true"] .tp-stage__dot { border-color: var(--truo-clearance); }
.tp-stage__name { font-size: calc(12px * var(--tp-scale)); font-weight: 600; }
.tp-stage__meta { font-size: calc(11px * var(--tp-scale)); color: var(--truo-slate); }

/* Tabs */
.tp-tabs {
  display: flex;
  gap: calc(20px * var(--tp-scale));
  padding: 0 calc(16px * var(--tp-scale));
  border-bottom: 1px solid var(--truo-line);
}

.tp-tab {
  padding: calc(13px * var(--tp-scale)) 0 calc(11px * var(--tp-scale));
  font-family: inherit;
  font-size: calc(12.5px * var(--tp-scale));
  font-weight: 500;
  color: var(--truo-slate);
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  cursor: pointer;
}

.tp-tab[aria-selected="true"] { color: var(--truo-ink); font-weight: 600; border-bottom-color: var(--truo-info); }

/* Activity feed */
.tp-feed { display: flex; flex-direction: column; }

.tp-feed__item {
  display: flex;
  gap: calc(12px * var(--tp-scale));
  align-items: flex-start;
  padding: calc(13px * var(--tp-scale)) calc(16px * var(--tp-scale));
  border-bottom: 1px solid var(--truo-line);
}

.tp-feed__item:last-child { border-bottom: 0; }

.tp-feed__icon {
  display: grid;
  flex: none;
  place-items: center;
  width: calc(26px * var(--tp-scale));
  height: calc(26px * var(--tp-scale));
  background: var(--truo-mist);
  border-radius: var(--truo-radius-control);
}

.tp-feed__icon svg { width: calc(14px * var(--tp-scale)); height: calc(14px * var(--tp-scale)); color: var(--truo-slate); }
.tp-feed__icon--crm { background: var(--truo-info-tint); }
.tp-feed__icon--crm svg { color: var(--truo-info); }
.tp-feed__icon--exec { background: var(--truo-blue-tint); }
.tp-feed__icon--exec svg { color: var(--truo-blue); }
.tp-feed__icon--ok { background: var(--truo-clearance-tint); }
.tp-feed__icon--ok svg { color: var(--truo-clearance); }
.tp-feed__icon--warn { background: var(--truo-warning-tint); }
.tp-feed__icon--warn svg { color: var(--truo-warning); }

.tp-feed__body { min-width: 0; flex: 1; }
.tp-feed__title { font-size: calc(12.5px * var(--tp-scale)); font-weight: 600; }
.tp-feed__meta { margin-top: calc(2px * var(--tp-scale)); font-size: calc(11.5px * var(--tp-scale)); line-height: 1.45; color: var(--truo-slate); }
.tp-feed__time { flex: none; font-size: calc(11px * var(--tp-scale)); font-variant-numeric: var(--truo-numeric-variant); color: var(--truo-slate); }

/* Context rail */
.tp-rail-section { padding: calc(14px * var(--tp-scale)) calc(14px * var(--tp-scale)); }
.tp-rail-section + .tp-rail-section { border-top: 1px solid var(--truo-line); }

.tp-rail-section__label {
  margin-bottom: calc(10px * var(--tp-scale));
  font-size: calc(10px * var(--tp-scale));
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--truo-slate);
}

.tp-kv { display: flex; flex-direction: column; gap: calc(1px * var(--tp-scale)); }

.tp-kv__row {
  display: flex;
  gap: calc(12px * var(--tp-scale));
  align-items: baseline;
  justify-content: space-between;
  padding: calc(7px * var(--tp-scale)) 0;
  font-size: calc(12px * var(--tp-scale));
  border-bottom: 1px solid var(--truo-mist);
}

.tp-kv__row:last-child { border-bottom: 0; }
.tp-kv__row dt { color: var(--truo-slate); }
.tp-kv__row dd { margin: 0; font-weight: 600; text-align: right; font-variant-numeric: var(--truo-numeric-variant); }

.tp-linked { display: flex; flex-direction: column; gap: calc(8px * var(--tp-scale)); }

.tp-linked__item {
  display: flex;
  gap: calc(10px * var(--tp-scale));
  align-items: center;
  padding: calc(9px * var(--tp-scale)) calc(11px * var(--tp-scale));
  background: var(--truo-mist);
  border-radius: var(--truo-radius-control);
  transition: background var(--truo-duration-normal) var(--truo-ease),
              opacity var(--truo-duration-normal) var(--truo-ease);
}

.tp-linked__item span:last-of-type { margin-left: auto; }
.tp-linked__sub { font-size: calc(11px * var(--tp-scale)); color: var(--truo-slate); }

.tp-badge {
  display: inline-flex;
  align-items: center;
  height: calc(19px * var(--tp-scale));
  padding: 0 calc(7px * var(--tp-scale));
  font-size: calc(10px * var(--tp-scale));
  font-weight: 600;
  border-radius: var(--truo-radius-sm);
}

.tp-badge--info { color: var(--truo-info-dark); background: var(--truo-info-tint); }
.tp-badge--ok { color: var(--truo-clearance-dark); background: var(--truo-clearance-tint); }
.tp-badge--exec { color: var(--truo-blue-dark); background: var(--truo-blue-tint); }

/* --- Handoff (CRM → execution) ------------------------------------------------ */

.tp-handoff { max-width: calc(920px * var(--tp-scale)); margin: 0 auto; }
.tp-handoff__eyebrow {
  font-size: calc(10.5px * var(--tp-scale));
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--truo-slate);
}

.tp-handoff__title {
  margin: calc(6px * var(--tp-scale)) 0 calc(5px * var(--tp-scale));
  font-family: var(--truo-font-display);
  font-size: calc(23px * var(--tp-scale));
  font-weight: 700;
  letter-spacing: -0.015em;
}

.tp-handoff__lead { font-size: calc(12.5px * var(--tp-scale)); color: var(--truo-slate); }

.tp-chain {
  display: flex;
  gap: calc(6px * var(--tp-scale));
  align-items: center;
  margin: calc(20px * var(--tp-scale)) 0 0;
}

/* Explicitly separate the lower handoff cards from the object chain. Keeping
   the spacing on the following row avoids list-margin resets collapsing it. */
.tp-handoff > .tp-split { margin-top: calc(24px * var(--tp-scale)); }

.tp-chain__node {
  flex: 1;
  min-width: 0;
  padding: calc(9px * var(--tp-scale)) calc(12px * var(--tp-scale));
  background: var(--truo-white);
  border: 1px solid var(--truo-line);
  border-radius: var(--truo-radius-panel);
  transition: border-color var(--truo-duration-slow) var(--truo-ease),
              background var(--truo-duration-slow) var(--truo-ease);
}

.tp-chain__label {
  font-size: calc(9.5px * var(--tp-scale));
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--truo-slate);
}

.tp-chain__id {
  margin-top: calc(3px * var(--tp-scale));
  font-family: var(--truo-font-mono);
  font-size: calc(12.5px * var(--tp-scale));
  font-variant-numeric: var(--truo-identifier-variant);
}

.tp-chain__node[data-state="new"] { background: var(--truo-blue-tint); border-color: var(--truo-blue); }
.tp-chain__node[data-state="pending"] { background: transparent; border-style: dashed; }
.tp-chain__node[data-state="pending"] .tp-chain__id { color: var(--truo-slate); }
.tp-chain__arrow { flex: none; color: var(--truo-slate); }
.tp-chain__arrow svg { display: block; width: calc(15px * var(--tp-scale)); height: calc(15px * var(--tp-scale)); }

.tp-split {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: calc(16px * var(--tp-scale));
  align-items: start;
}

.tp-defs { display: flex; flex-direction: column; }

.tp-defs__row {
  display: grid;
  grid-template-columns: calc(112px * var(--tp-scale)) minmax(0, 1fr);
  gap: calc(16px * var(--tp-scale));
  align-items: center;
  padding: calc(11px * var(--tp-scale)) calc(16px * var(--tp-scale));
  font-size: calc(12.5px * var(--tp-scale));
  border-bottom: 1px solid var(--truo-line);
}

.tp-defs__row:last-child { border-bottom: 0; }
.tp-defs__row dt { color: var(--truo-slate); }
.tp-defs__row dd { display: flex; gap: calc(8px * var(--tp-scale)); align-items: center; margin: 0; font-weight: 600; }

.tp-preserved { display: flex; flex-wrap: wrap; gap: calc(6px * var(--tp-scale)); padding: calc(14px * var(--tp-scale)); }

.tp-preserved li {
  padding: calc(5px * var(--tp-scale)) calc(9px * var(--tp-scale));
  font-size: calc(11px * var(--tp-scale));
  color: var(--truo-slate);
  background: var(--truo-mist);
  border-radius: var(--truo-radius-sm);
}

.tp-handoff__foot {
  display: flex;
  gap: calc(24px * var(--tp-scale));
  align-items: center;
  padding-top: calc(16px * var(--tp-scale));
  margin-top: calc(16px * var(--tp-scale));
  border-top: 1px solid var(--truo-line);
}

.tp-handoff__note { max-width: calc(520px * var(--tp-scale)); font-size: calc(11.5px * var(--tp-scale)); line-height: 1.5; color: var(--truo-slate); }
.tp-handoff__foot .tp-btn { margin-left: auto; height: calc(40px * var(--tp-scale)); padding-inline: calc(18px * var(--tp-scale)); font-size: calc(13.5px * var(--tp-scale)); }

/* --- Metric row ----------------------------------------------------------------- */

.tp-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(calc(180px * var(--tp-scale)), 1fr)); gap: calc(14px * var(--tp-scale)); }

.tp-metric {
  display: flex;
  gap: calc(12px * var(--tp-scale));
  align-items: center;
  padding: calc(14px * var(--tp-scale)) calc(16px * var(--tp-scale));
  background: var(--truo-white);
  border: 1px solid var(--truo-line);
  border-radius: var(--truo-radius-card);
}

.tp-metric__icon {
  display: grid;
  flex: none;
  place-items: center;
  width: calc(32px * var(--tp-scale));
  height: calc(32px * var(--tp-scale));
  background: var(--truo-info-tint);
  border-radius: var(--truo-radius-control);
}

.tp-metric__icon svg { width: calc(16px * var(--tp-scale)); height: calc(16px * var(--tp-scale)); color: var(--truo-info); }
.tp-metric__icon--ok { background: var(--truo-clearance-tint); }
.tp-metric__icon--ok svg { color: var(--truo-clearance); }
.tp-metric__icon--warn { background: var(--truo-warning-tint); }
.tp-metric__icon--warn svg { color: var(--truo-warning); }
.tp-metric__icon--exec { background: var(--truo-blue-tint); }
.tp-metric__icon--exec svg { color: var(--truo-blue); }
.tp-metric__label { font-size: calc(11.5px * var(--tp-scale)); color: var(--truo-slate); }
.tp-metric__value { font-family: var(--truo-font-display); font-size: calc(20px * var(--tp-scale)); font-weight: 700; font-variant-numeric: var(--truo-numeric-variant); letter-spacing: -0.01em; }

/* --- Route / milestone tracker ---------------------------------------------------- */

.tp-route { display: grid; grid-auto-columns: 1fr; grid-auto-flow: column; padding: calc(18px * var(--tp-scale)) calc(4px * var(--tp-scale)) calc(4px * var(--tp-scale)); }
.tp-leg { position: relative; text-align: center; }

.tp-leg::before {
  content: "";
  position: absolute;
  top: calc(6px * var(--tp-scale));
  left: 50%;
  width: 100%;
  height: 2px;
  background: var(--truo-line);
}

.tp-leg:last-child::before { display: none; }
.tp-leg[data-done="true"]::before { background: var(--truo-ink); }

.tp-leg__dot {
  position: relative;
  display: block;
  width: calc(13px * var(--tp-scale));
  height: calc(13px * var(--tp-scale));
  margin: 0 auto calc(9px * var(--tp-scale));
  background: var(--truo-white);
  border: calc(3px * var(--tp-scale)) solid var(--truo-line);
  border-radius: 50%;
}

.tp-leg[data-done="true"] .tp-leg__dot { background: var(--truo-ink); border-color: var(--truo-ink); }
.tp-leg[data-current="true"] .tp-leg__dot { background: var(--truo-white); border-color: var(--truo-blue); }
.tp-leg__name { font-size: calc(11.5px * var(--tp-scale)); font-weight: 600; }
.tp-leg__meta { font-size: calc(11px * var(--tp-scale)); font-variant-numeric: var(--truo-numeric-variant); color: var(--truo-slate); }

/* --- Compliance queue -------------------------------------------------------------- */

.tp-queue { display: grid; grid-template-columns: calc(250px * var(--tp-scale)) minmax(0, 1fr) calc(256px * var(--tp-scale)); gap: calc(16px * var(--tp-scale)); align-items: start; }

.tp-queue__item {
  display: block;
  width: 100%;
  padding: calc(11px * var(--tp-scale)) calc(14px * var(--tp-scale));
  font: inherit;
  text-align: left;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--truo-line);
  border-left: 3px solid transparent;
  cursor: pointer;
}

.tp-queue__item:last-child { border-bottom: 0; }
.tp-queue__item[aria-current="true"] { background: var(--truo-clearance-tint); border-left-color: var(--truo-clearance); }
.tp-queue__top { display: flex; gap: calc(8px * var(--tp-scale)); align-items: center; }
.tp-queue__id { font-family: var(--truo-font-mono); font-size: calc(12px * var(--tp-scale)); font-variant-numeric: var(--truo-identifier-variant); color: var(--truo-ink); }
.tp-queue__due { margin-left: auto; }
.tp-queue__name { margin-top: calc(6px * var(--tp-scale)); font-size: calc(12.5px * var(--tp-scale)); font-weight: 600; }
.tp-queue__meta { margin-top: calc(2px * var(--tp-scale)); font-size: calc(11.5px * var(--tp-scale)); color: var(--truo-slate); }

.tp-grid2 { display: grid; grid-template-columns: 1fr 1fr; }

.tp-grid2 > div {
  padding: calc(13px * var(--tp-scale)) calc(16px * var(--tp-scale));
  border-right: 1px solid var(--truo-line);
  border-bottom: 1px solid var(--truo-line);
}

.tp-grid2 > div:nth-child(2n) { border-right: 0; }
.tp-grid2 > div:nth-last-child(-n+2) { border-bottom: 0; }
.tp-grid2 dt { font-size: calc(11px * var(--tp-scale)); color: var(--truo-slate); }
.tp-grid2 dd { margin: calc(4px * var(--tp-scale)) 0 0; font-size: calc(12.5px * var(--tp-scale)); font-weight: 600; }

.tp-evidence { display: flex; flex-direction: column; }

.tp-evidence__item { padding: calc(11px * var(--tp-scale)) 0; border-bottom: 1px solid var(--truo-mist); }
.tp-evidence__item:last-child { border-bottom: 0; }
.tp-evidence__id { font-family: var(--truo-font-mono); font-size: calc(11.5px * var(--tp-scale)); font-variant-numeric: var(--truo-identifier-variant); font-weight: 500; }
.tp-evidence__meta { margin-top: calc(3px * var(--tp-scale)); font-size: calc(11px * var(--tp-scale)); line-height: 1.5; color: var(--truo-slate); }

/* --- Responsive product shell ------------------------------------------------------
   The rail collapses, then the context rails stack. The product never scales
   below readable size: it drops secondary columns instead. */

@container (max-width: 1100px) {
  .tp-record, .tp-record--wide { grid-template-columns: minmax(0, 1fr); }
  .tp-queue { grid-template-columns: calc(230px * var(--tp-scale)) minmax(0, 1fr); }
  .tp-queue > :last-child { grid-column: 1 / -1; }
}

@container (max-width: 1000px) {
  .tp-toolbar > .tp-chip:nth-of-type(n+2):not(.tp-chip--plain) { display: none; }
}

@container (max-width: 900px) {
  .tp { --tp-rail: var(--truo-rail-collapsed); }
  .tp .tp-rail__label,
  .tp .tp-rail__user div,
  .tp .tp-nav__item > span:not(.tp-nav__badge) { display: none; }
  .tp .tp-rail { align-items: center; padding-inline: calc(10px * var(--tp-scale)); }
  .tp .tp-rail__brand { justify-content: center; padding: 0; }
  .tp .tp-nav__item { justify-content: center; width: calc(40px * var(--tp-scale)); padding: 0; }
  .tp .tp-rail__user { justify-content: center; }
  .tp-board { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tp-split { grid-template-columns: minmax(0, 1fr); }
  .tp-topbar__context { display: none; }
}

@container (max-width: 640px) {
  .tp-board { grid-template-columns: minmax(0, 1fr); }
  .tp-queue { grid-template-columns: minmax(0, 1fr); }
  .tp-search { width: 100%; }
  .tp-chain { flex-wrap: wrap; }
  .tp-chain__node { flex: 1 1 40%; }
}

/* --- Stage bars (command centre) ------------------------------------------------------- */

.tp-bars { display: flex; flex-direction: column; gap: calc(10px * var(--tp-scale)); padding: calc(16px * var(--tp-scale)); }

.tp-bar {
  display: grid;
  grid-template-columns: calc(96px * var(--tp-scale)) minmax(0, 1fr) calc(84px * var(--tp-scale));
  gap: calc(14px * var(--tp-scale));
  align-items: center;
  font-size: calc(12.5px * var(--tp-scale));
}

.tp-bar__name { color: var(--truo-ink); }
.tp-bar__track { height: calc(9px * var(--tp-scale)); background: var(--truo-mist); border-radius: var(--truo-radius-pill); }

.tp-bar__fill {
  display: block;
  width: var(--pct, 0%);
  height: 100%;
  background: var(--truo-info);
  border-radius: inherit;
}

.tp-bar[data-tone="won"] .tp-bar__fill { background: var(--truo-clearance); }
.tp-bar__value { font-variant-numeric: var(--truo-numeric-variant); text-align: right; }

/* Status dot used where a full badge would crowd the row. Always sits beside a
   text label — colour never carries the meaning on its own. */
.tp-dot {
  flex: none;
  width: calc(8px * var(--tp-scale));
  height: calc(8px * var(--tp-scale));
  margin-top: calc(5px * var(--tp-scale));
  background: var(--truo-slate);
  border-radius: 50%;
}

.tp-dot[data-tone="crm"] { background: var(--truo-info); }
.tp-dot[data-tone="exec"] { background: var(--truo-blue); }
.tp-dot[data-tone="warn"] { background: var(--truo-warning); }
.tp-dot[data-tone="ok"] { background: var(--truo-clearance); }

/* --- Continuity screen -----------------------------------------------------------------
   The one navigation-free frame. It is the signature visual, so it is built to
   read as a poster: dark field, one thread, one record panel. */

.tp-continuity {
  /* This screen sits outside the .tp shell, so it declares the scale variable
     itself — without it every calc() below resolves to an invalid value and the
     whole frame collapses to unstyled defaults. */
  --tp-scale: 1;

  display: flex;
  flex-direction: column;
  padding: calc(40px * var(--tp-scale)) calc(44px * var(--tp-scale));
  color: var(--truo-ink-text);
  background: var(--truo-ink);
  container-type: inline-size;
  font-family: var(--truo-font-body);
  text-align: left;
}

.tp-continuity__head { display: flex; gap: calc(48px * var(--tp-scale)); align-items: flex-start; margin-bottom: calc(40px * var(--tp-scale)); }
.tp-continuity__label { font-size: calc(11px * var(--tp-scale)); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--truo-ink-text-muted); }

.tp-continuity__title {
  max-width: 18ch;
  margin-top: calc(10px * var(--tp-scale));
  font-family: var(--truo-font-display);
  font-size: calc(38px * var(--tp-scale));
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.028em;
}

.tp-continuity__note { max-width: calc(320px * var(--tp-scale)); margin-left: auto; font-size: calc(13px * var(--tp-scale)); line-height: 1.5; color: var(--truo-ink-text-muted); }
.tp-continuity__body { display: grid; grid-template-columns: calc(150px * var(--tp-scale)) minmax(0, 1fr) calc(260px * var(--tp-scale)); gap: calc(32px * var(--tp-scale)); align-items: start; }
.tp-continuity__filters { display: flex; flex-direction: column; gap: calc(8px * var(--tp-scale)); }

.tp-continuity__filter {
  padding: calc(10px * var(--tp-scale)) calc(14px * var(--tp-scale));
  font-size: calc(12.5px * var(--tp-scale));
  text-align: center;
  background: var(--truo-ink-surface);
  border: 1px solid var(--truo-ink-line);
  border-radius: var(--truo-radius-control);
}

.tp-continuity__filter--selected { color: var(--truo-white); background: var(--truo-blue-dark); border-color: var(--truo-blue); }

@container (max-width: 900px) {
  .tp-continuity__body { grid-template-columns: minmax(0, 1fr); }
  .tp-continuity__filters { flex-direction: row; flex-wrap: wrap; }
  .tp-continuity__head { flex-direction: column; gap: calc(16px * var(--tp-scale)); }
  .tp-continuity__note { margin-left: 0; }
}