/* ==========================================================================
   Testing Suite components (WP0, shared: frozen after WP0)

   The ts-* product components that Bootstrap does not have. Each one has a
   macro in templates/_macros.html.twig and a live example on /_ui (dev).
   Source: docs/design/design-system.md section 5.
   ========================================================================== */

/* Site chips ---------------------------------------------------------------- */
.ts-site { --_c: var(--ts-blue-900); display: inline-flex; align-items: center; gap: 8px; color: #123063; font-size: var(--ts-fs-small); line-height: 18px; font-weight: 500; white-space: nowrap; vertical-align: middle; }
.ts-site__mark { width: 22px; height: 22px; flex: none; display: inline-grid; place-items: center; border-radius: var(--ts-radius-sm); background: var(--_c); color: #fff; font-size: 11px; line-height: 1; font-weight: 600; letter-spacing: 0.01em; }
.ts-site__text { display: inline-flex; flex-direction: column; min-width: 0; }
.ts-site__name { overflow: hidden; text-overflow: ellipsis; }
.ts-site__domain { font-size: 12px; line-height: 16px; color: var(--ts-text-muted); font-weight: 400; }
.ts-site--chip { padding: 3px 10px 3px 3px; border-radius: var(--ts-radius-sm); background: #fff; border: 1px solid var(--ts-border); }
.ts-site--lg { font-size: var(--ts-fs-body); line-height: 20px; }
.ts-site--lg .ts-site__mark { width: 28px; height: 28px; font-size: 13px; }
.ts-site--mark-only { gap: 0; }
[data-site="rss"] { --_c: var(--ts-site-rss); }
[data-site="dss"] { --_c: var(--ts-site-dss); }
[data-site="iss"] { --_c: var(--ts-site-iss); }
[data-site="dos"] { --_c: var(--ts-site-dos); }
[data-site="pss"] { --_c: var(--ts-site-pss); }
[data-site="lss"] { --_c: var(--ts-site-lss); }
[data-site="bks"] { --_c: var(--ts-site-bks); }
[data-site="cbn"] { --_c: var(--ts-site-cbn); }
[data-site="bss"] { --_c: var(--ts-site-bss); }

/* Status pills: a distinct marker shape per status, so colour is never the only signal */
.ts-status {
  --_bg: var(--ts-st-draft-bg); --_fg: var(--ts-st-draft-fg); --_dot: var(--ts-st-draft-dot);
  display: inline-flex; align-items: center; gap: 7px;
  height: 24px; padding: 0 10px 0 9px;
  border-radius: var(--ts-radius-pill);
  background: var(--_bg); color: var(--_fg);
  font-size: 12px; line-height: 1; font-weight: 600; white-space: nowrap; letter-spacing: 0;
  vertical-align: middle;
}
.ts-status::before { content: ""; width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--_dot); }
.ts-status--draft::before { background: transparent; box-shadow: inset 0 0 0 1.5px var(--_dot); }
.ts-status--qa { --_bg: var(--ts-st-qa-bg); --_fg: var(--ts-st-qa-fg); --_dot: var(--ts-st-qa-dot); }
.ts-status--qa::before { background: linear-gradient(90deg, var(--_dot) 50%, transparent 50%); box-shadow: inset 0 0 0 1.5px var(--_dot); }
.ts-status--pending { --_bg: var(--ts-st-pending-bg); --_fg: var(--ts-st-pending-fg); --_dot: var(--ts-st-pending-dot); }
.ts-status--scheduled { --_bg: var(--ts-st-scheduled-bg); --_fg: var(--ts-st-scheduled-fg); --_dot: var(--ts-st-scheduled-dot); }
.ts-status--scheduled::before { background: radial-gradient(circle, var(--_dot) 0 1.6px, transparent 2px); box-shadow: inset 0 0 0 1.5px var(--_dot); }
.ts-status--live { --_bg: var(--ts-st-live-bg); --_fg: var(--ts-st-live-fg); --_dot: var(--ts-st-live-dot); }
.ts-status--live::before { animation: ts-pulse 2s var(--ts-ease-out) infinite; }
.ts-status--paused { --_bg: var(--ts-st-paused-bg); --_fg: var(--ts-st-paused-fg); --_dot: var(--ts-st-paused-dot); }
.ts-status--paused::before { border-radius: 1px; width: 8px; height: 9px; background: linear-gradient(90deg, var(--_dot) 0 3px, transparent 3px 5px, var(--_dot) 5px); }
.ts-status--ended { --_bg: var(--ts-st-ended-bg); --_fg: var(--ts-st-ended-fg); --_dot: var(--ts-st-ended-dot); }
.ts-status--ended::before { border-radius: 2px; }
.ts-status--archived { --_bg: var(--ts-st-archived-bg); --_fg: var(--ts-st-archived-fg); --_dot: var(--ts-st-archived-dot); box-shadow: inset 0 0 0 1px var(--ts-slate-200); }
.ts-status--archived::before { border-radius: 2px; background: transparent; box-shadow: inset 0 0 0 1.5px var(--_dot); }
.ts-status--lg { height: 28px; font-size: 13px; padding: 0 12px 0 11px; }

/* Plain dot for dense lists */
.ts-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--ts-slate-300); flex: none; }
.ts-dot--live { background: var(--ts-green-600); animation: ts-pulse 2s var(--ts-ease-out) infinite; }

/* Tags: results, goal roles, small facts */
.ts-tag { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; border-radius: var(--ts-radius-pill); font-size: 12px; line-height: 1; font-weight: 600; white-space: nowrap; letter-spacing: 0; vertical-align: middle; background: var(--ts-slate-100); color: var(--ts-slate-700); }
.ts-tag .bi { font-size: 11px; }
.ts-tag--neutral, .ts-tag--secondary, .ts-tag--early { background: var(--ts-slate-100); color: var(--ts-slate-700); }
.ts-tag--primary { background: #123063; color: #fff; }
.ts-tag--guardrail { background: var(--ts-amber-100); color: var(--ts-amber-700); }
.ts-tag--winner { background: var(--ts-success-solid); color: #123063; }
.ts-tag--leading { background: var(--ts-blue-100); color: var(--ts-blue-700); }
.ts-tag--trailing { background: var(--ts-amber-100); color: var(--ts-amber-700); }
.ts-tag--worse, .ts-tag--alert { background: var(--ts-red-100); color: var(--ts-red-700); }
.ts-tag--outline { background: transparent; box-shadow: inset 0 0 0 1px var(--ts-border); color: var(--ts-text-secondary); }
.ts-tag--inverse { background: #fff; color: var(--ts-red-700); }
.ts-tag--patch { background: var(--ts-pink-100); color: var(--ts-pink-650); }
.ts-tag--approved { background: var(--ts-green-150); color: var(--ts-green-650); }

/* Variation swatch: identity comes from the mark, never from coloured text */
.ts-var { --_c: var(--ts-var-0); display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.ts-var::before { content: ""; width: 10px; height: 10px; flex: none; border-radius: var(--ts-radius-xs); background: var(--_c); }
.ts-var--0 { --_c: var(--ts-var-0); } .ts-var--1 { --_c: var(--ts-var-1); } .ts-var--2 { --_c: var(--ts-var-2); } .ts-var--3 { --_c: var(--ts-var-3); }
.ts-var--4 { --_c: var(--ts-var-4); } .ts-var--5 { --_c: var(--ts-var-5); } .ts-var--6 { --_c: var(--ts-var-6); } .ts-var--7 { --_c: var(--ts-var-7); }
.ts-var--x::before { background: transparent; box-shadow: inset 0 0 0 1.5px var(--ts-slate-400); }

/* Uplift: tone comes from the verdict, never from the sign */
.ts-delta { display: inline-flex; align-items: center; gap: 2px; font-weight: 600; white-space: nowrap; }
.ts-delta--up { color: var(--ts-up); }
.ts-delta--down { color: var(--ts-down); }
.ts-delta--flat { color: var(--ts-flat); }
.ts-delta .bi { font-size: 0.9em; }

/* Toolbars, segmented control, filter tabs -------------------------------- */
.ts-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 12px; background: var(--ts-surface-muted); border-radius: var(--ts-radius-md); }
.ts-toolbar a:not(.btn) { color: var(--ts-link-on-muted); }
.ts-toolbar .form-control, .ts-toolbar .form-select { border-color: transparent; box-shadow: 0 0 0 1px var(--ts-sand-400); }
.ts-toolbar .form-control:hover, .ts-toolbar .form-select:hover { box-shadow: 0 0 0 1px var(--ts-blue-700); }
.ts-toolbar .form-control:focus, .ts-toolbar .form-select:focus { box-shadow: 0 0 0 1px var(--ts-pink-600), var(--ts-focus-halo); }
.ts-toolbar .form-label { margin: 0; font-size: var(--ts-fs-small); color: var(--ts-text-secondary); }
.ts-search-input { position: relative; flex: 1 1 260px; margin: 0; }
.ts-search-input .bi { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--ts-text-muted); pointer-events: none; }
.ts-search-input .form-control { padding-left: 36px; }

.ts-segmented { position: relative; display: inline-flex; gap: 2px; padding: 3px; background: var(--ts-surface-muted); border-radius: 8px; vertical-align: middle; }
.ts-segmented > input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.ts-segmented > label, .ts-segmented > a, .ts-segmented > button {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border: 0; border-radius: var(--ts-radius-sm);
  background: transparent; color: var(--ts-text-secondary);
  font-size: 13px; line-height: 18px; font-weight: 600; text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color var(--ts-dur-1) var(--ts-ease), color var(--ts-dur-1) var(--ts-ease);
}
.ts-segmented > label:hover, .ts-segmented > a:hover, .ts-segmented > button:hover { color: #123063; background: rgba(255, 255, 255, 0.6); }
.ts-segmented > input:checked + label, .ts-segmented > .is-active, .ts-segmented > [aria-pressed="true"], .ts-segmented > [aria-current="true"], .ts-segmented > [aria-current="page"] { background: #123063; color: #fff; }
.ts-segmented > input:focus-visible + label { outline: 2px solid var(--ts-focus); outline-offset: 2px; }
.ts-segmented .ts-count { font-weight: 500; opacity: 0.75; }

.ts-filter-tabs { display: flex; gap: 4px; flex-wrap: wrap; border-bottom: 1px solid var(--ts-border); margin-bottom: 16px; }
.ts-filter-tabs a {
  position: relative; display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 12px 12px; color: var(--ts-text-secondary); font-weight: 600; text-decoration: none; white-space: nowrap; border-radius: var(--ts-radius-sm) var(--ts-radius-sm) 0 0;
}
.ts-filter-tabs a:hover { color: #123063; background: var(--ts-hover); }
.ts-filter-tabs a:focus-visible { outline: 2px solid var(--ts-focus); outline-offset: -2px; }
.ts-filter-tabs a[aria-current="page"] { color: #123063; }
.ts-filter-tabs a[aria-current="page"]::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: -1px; height: 3px; border-radius: 3px 3px 0 0; background: var(--ts-pink-500); }
.ts-filter-tabs .ts-count { min-width: 22px; padding: 1px 7px; border-radius: 999px; background: var(--ts-slate-100); color: var(--ts-slate-700); font-size: 12px; line-height: 18px; text-align: center; }
.ts-filter-tabs a[aria-current="page"] .ts-count { background: #123063; color: #fff; }
@media (max-width: 767.98px) {
  .ts-filter-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-left: -16px; margin-right: -16px; padding: 0 16px; }
  .ts-filter-tabs::-webkit-scrollbar { display: none; }
}

/* Filter menus (checkbox groups in a dropdown, applied when the menu closes) and chips */
.ts-filter-menu { display: inline-block; }
.ts-filter-menu__toggle strong { font-weight: 600; }
.ts-filter-menu__toggle .bi-chevron-down { font-size: 12px; }
.ts-filter-menu__menu { min-width: 220px; padding: 10px 12px 4px; }
.ts-filter-menu__menu legend { font-size: var(--ts-fs-micro); font-weight: 600; color: var(--ts-text-muted); margin-bottom: 8px; }
.ts-chip { display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 4px 0 10px; border-radius: var(--ts-radius-pill); background: var(--ts-pink-50); box-shadow: inset 0 0 0 1px var(--ts-pink-200); color: #123063; font-size: var(--ts-fs-small); font-weight: 500; white-space: nowrap; }
.ts-chip:not(:has(.ts-chip__remove)) { padding-right: 10px; }
.ts-chip__remove { width: 24px; height: 24px; display: inline-grid; place-items: center; border-radius: 50%; color: var(--ts-pink-700); text-decoration: none; }
.ts-chip__remove:hover { background: var(--ts-pink-100); color: var(--ts-pink-800); }
.ts-chip__remove .bi { font-size: 16px; }

/* Stat tiles ------------------------------------------------------------------ */
.ts-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); background: #fff; border: 1px solid var(--ts-border-subtle); border-radius: var(--ts-radius-lg); box-shadow: var(--ts-shadow-xs); overflow: hidden; }
.ts-stats--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ts-stat { position: relative; padding: 18px 24px 20px; min-width: 0; }
.ts-stat + .ts-stat { border-left: 1px solid var(--ts-border-subtle); }
.ts-stat__label { font-size: var(--ts-fs-small); line-height: var(--ts-lh-small); color: var(--ts-text-secondary); font-weight: 500; }
.ts-stat__value { margin-top: 6px; font-size: var(--ts-fs-stat); line-height: var(--ts-lh-stat); font-weight: 600; letter-spacing: var(--ts-ls-stat); color: #123063; }
.ts-stat__value small { font-size: 15px; font-weight: 500; letter-spacing: 0; color: var(--ts-text-secondary); margin-left: 4px; }
.ts-stat__foot { margin-top: 6px; font-size: var(--ts-fs-small); line-height: var(--ts-lh-small); color: var(--ts-text-muted); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ts-stat__spark { position: absolute; right: 24px; top: 46px; width: 88px; height: 30px; overflow: visible; }
@media (max-width: 1199.98px) {
  .ts-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ts-stat:nth-child(3) { border-left: 0; }
  .ts-stat:nth-child(n+3) { border-top: 1px solid var(--ts-border-subtle); }
}
@media (max-width: 575.98px) {
  .ts-stat { padding: 14px 16px 16px; }
  .ts-stat__value { font-size: 24px; line-height: 30px; }
  .ts-stat__spark { display: none; }
}
.ts-stat--tile { border: 1px solid var(--ts-border-subtle); border-radius: var(--ts-radius-md); background: #fff; }
/* Tiles link to the filtered list they count */
a.ts-stat--link { display: block; color: inherit; text-decoration: none; font-weight: 400; transition: background-color var(--ts-dur-1) var(--ts-ease); }
a.ts-stat--link:hover { background: var(--ts-hover); color: inherit; }
a.ts-stat--link:hover .ts-stat__label { color: #123063; text-decoration: underline; text-underline-offset: 3px; }
a.ts-stat--link:focus-visible { outline: 2px solid var(--ts-focus); outline-offset: -4px; border-radius: var(--ts-radius-md); }

/* Meters and bars ------------------------------------------------------------ */
.ts-meter { --_v: 0%; position: relative; display: block; height: 6px; border-radius: 999px; background: var(--ts-slate-100); overflow: hidden; }
.ts-meter > span { position: absolute; inset: 0 auto 0 0; width: var(--_v); border-radius: inherit; background: #123063; }
.ts-meter--done > span { background: var(--ts-green-600); }
.ts-meter--warning > span { background: var(--ts-amber-600); }
.ts-meter--danger > span { background: var(--ts-red-600); }

/* Chance bar. No decision-line marker: the threshold is not returned by the stats API,
   so the interface must not draw or quote it. The verdict tag says whether it is decisive. */
.ts-prob { --_v: 0%; --_c: var(--ts-var-1); position: relative; display: block; height: 8px; border-radius: 999px; background: var(--ts-slate-100); }
.ts-prob > span { position: absolute; inset: 0 auto 0 0; width: var(--_v); border-radius: inherit; background: var(--_c); }
.ts-prob--0 { --_c: var(--ts-var-0); } .ts-prob--1 { --_c: var(--ts-var-1); } .ts-prob--2 { --_c: var(--ts-var-2); } .ts-prob--3 { --_c: var(--ts-var-3); }
.ts-prob--4 { --_c: var(--ts-var-4); } .ts-prob--5 { --_c: var(--ts-var-5); } .ts-prob--6 { --_c: var(--ts-var-6); } .ts-prob--7 { --_c: var(--ts-var-7); }
.ts-prob--success { --_c: var(--ts-green-500); }
.ts-prob--neutral { --_c: var(--ts-slate-400); }
.ts-prob-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.ts-prob-row__value { font-weight: 600; font-size: var(--ts-fs-small); min-width: 44px; text-align: right; }

/* Likely range: one shared scale per table, zero line in the middle */
.ts-ci { --_lo: 40%; --_hi: 60%; --_pt: 50%; --_zero: 50%; --_c: var(--ts-slate-500); position: relative; display: block; height: 20px; min-width: 160px; }
.ts-ci::before { content: ""; position: absolute; left: var(--_zero); top: 0; bottom: 0; width: 1px; background: var(--ts-slate-300); }
.ts-ci__bar { position: absolute; top: 8px; height: 4px; left: var(--_lo); right: calc(100% - var(--_hi)); border-radius: 2px; background: var(--_c); opacity: 0.35; }
.ts-ci__pt { position: absolute; top: 4px; left: var(--_pt); width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: var(--_c); box-shadow: 0 0 0 2px #fff; }
.ts-ci--up { --_c: var(--ts-green-600); }
.ts-ci--down { --_c: var(--ts-red-600); }
.ts-ci--flat { --_c: var(--ts-slate-500); }
.ts-ci-scale { display: flex; justify-content: space-between; margin-top: 4px; font-family: var(--ts-font-figures); font-weight: 500; color: var(--ts-text-muted); }

/* Headline result for lists (m.verdict_inline): Home rows and the campaign table */
.ts-headline { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ts-headline .ts-var { font-size: 12px; line-height: 16px; color: var(--ts-text-secondary); font-weight: 500; }
.ts-headline__others { color: var(--ts-text-muted); font-weight: 400; }
.ts-headline__line { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 6px; }
.ts-headline__uplift { font-size: 18px; line-height: 24px; letter-spacing: -0.3px; }
.ts-headline__metric { font-size: var(--ts-fs-small); line-height: 18px; color: var(--ts-text-secondary); font-weight: 500; }
.ts-headline__bar { display: grid; grid-template-columns: 112px auto; align-items: center; gap: 10px; margin-top: 6px; font-size: 12px; line-height: 16px; color: var(--ts-text-secondary); white-space: nowrap; }
.ts-headline__bar strong { color: #123063; font-weight: 600; }
.ts-headline__status { font-size: var(--ts-fs-small); line-height: 18px; font-weight: 600; color: #123063; }
.ts-headline__status--alert { color: var(--ts-red-700); }
.ts-headline__note { font-size: 12px; line-height: 16px; color: var(--ts-text-muted); }
.ts-headline--table { gap: 2px; }
.ts-headline--table .ts-headline__line { font-size: var(--ts-fs-body); line-height: 20px; }
.ts-headline--table .ts-headline__note { font-size: var(--ts-fs-small); line-height: 18px; }
.ts-headline--table > .ts-tag { align-self: flex-start; }

/* Skeletons for lazy frames: static (only the live pulse moves on its own) and the
   same height as the content they stand in for, so nothing shifts on load. */
.ts-skeleton { display: flex; flex-direction: column; gap: 2px; }
.ts-skeleton__line { display: block; border-radius: 4px; background: var(--ts-sand-150); }
.ts-skeleton--home { height: 70px; justify-content: center; }
.ts-skeleton--home .ts-skeleton__line:nth-child(1) { width: 40%; height: 12px; margin: 2px 0; }
.ts-skeleton--home .ts-skeleton__line:nth-child(2) { width: 62%; height: 18px; margin: 3px 0; }
.ts-skeleton--home .ts-skeleton__line:nth-child(3) { width: 86%; height: 8px; margin-top: 10px; }
.ts-skeleton--table { height: 40px; justify-content: center; gap: 6px; }
.ts-skeleton--table .ts-skeleton__line:nth-child(1) { width: 70%; height: 14px; }
.ts-skeleton--table .ts-skeleton__line:nth-child(2) { width: 50%; height: 12px; }

/* Wizard stepper: done, needs attention (amber, with a count), current, not started.
   Red is not used for build problems. */
.ts-stepper { display: flex; list-style: none; margin: 0 0 24px; padding: 0; counter-reset: step; }
.ts-stepper li { flex: 1 1 0; position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-width: 0; }
.ts-stepper li::after { content: ""; position: absolute; top: 13px; left: 36px; right: 8px; height: 2px; border-radius: 1px; background: var(--ts-slate-200); }
.ts-stepper li:last-child::after { display: none; }
.ts-stepper li.is-done::after { background: #123063; }
.ts-stepper a, .ts-stepper span.ts-step { display: flex; flex-direction: column; gap: 8px; text-decoration: none; color: inherit; border-radius: var(--ts-radius-sm); }
.ts-stepper a:focus-visible { outline: 2px solid var(--ts-focus); outline-offset: 4px; }
.ts-step__num { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 1.5px var(--ts-slate-300); color: var(--ts-text-secondary); font-size: 13px; font-weight: 600; position: relative; z-index: 1; }
.ts-step__num .bi { font-size: 15px; }
.ts-step__label { font-size: var(--ts-fs-small); font-weight: 600; color: var(--ts-text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.ts-step__flag { display: inline-flex; align-items: center; gap: 4px; align-self: flex-start; height: 20px; padding: 0 7px; border-radius: var(--ts-radius-pill); background: var(--ts-amber-100); color: var(--ts-amber-700); font-size: 11px; font-weight: 600; white-space: nowrap; }
.ts-stepper a:hover .ts-step__label { color: #123063; text-decoration: underline; text-underline-offset: 3px; }
.ts-stepper .is-done .ts-step__num { background: #123063; box-shadow: none; color: #fff; }
.ts-stepper .is-done .ts-step__label { color: #123063; }
.ts-stepper .is-attention .ts-step__num { background: var(--ts-amber-50); box-shadow: inset 0 0 0 1.5px var(--ts-amber-600); color: var(--ts-amber-700); }
.ts-stepper .is-current .ts-step__num { background: var(--ts-pink-600); box-shadow: 0 0 0 4px var(--ts-pink-100); color: #fff; }
.ts-stepper .is-current .ts-step__label { color: #123063; }
@media (max-width: 767.98px) {
  .ts-stepper { overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; }
  .ts-stepper li { flex: 0 0 auto; min-width: 104px; padding-right: 8px; }
}

/* Callouts (icon + text): the brand alert palette, accessible */
.ts-callout { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 14px 16px; border-radius: var(--ts-radius-md); border: 1px solid transparent; font-size: var(--ts-fs-body); line-height: var(--ts-lh-body); }
.ts-callout > .bi { font-size: 18px; line-height: 20px; }
.ts-callout__title { font-weight: 600; margin: 0; }
.ts-callout__text { margin: 2px 0 0; }
.ts-callout__text > :last-child { margin-bottom: 0; }
.ts-callout > .btn { align-self: center; }
.ts-callout--info { background: var(--ts-info-bg); border-color: var(--ts-info-border); color: var(--ts-info-fg); }
.ts-callout--info > .bi { color: var(--ts-info-icon); }
.ts-callout--info a:not(.btn) { color: var(--ts-link-on-muted); }
.ts-callout--success { background: var(--ts-success-bg); border-color: var(--ts-success-border); color: #123063; }
.ts-callout--success > .bi { color: var(--ts-success-icon); }
.ts-callout--warning { background: var(--ts-warning-bg); border-color: var(--ts-warning-border); color: #123063; }
.ts-callout--warning > .bi { color: var(--ts-warning-icon); }
.ts-callout--danger { background: var(--ts-danger-bg); border-color: var(--ts-danger-border); color: #123063; }
.ts-callout--danger > .bi { color: var(--ts-danger-icon); }
.ts-callout--critical { background: var(--ts-danger-solid); color: #fff; }
.ts-callout--critical a:not(.btn) { color: #fff; }
/* The raw technical message under a callout's words (an unavailable service, a sign-in error) */
.ts-callout__tech { display: block; margin-top: 6px; font-size: var(--ts-fs-micro); line-height: var(--ts-lh-micro); color: var(--ts-text-muted); overflow-wrap: anywhere; }
@media (max-width: 575.98px) {
  .ts-callout { grid-template-columns: 20px minmax(0, 1fr); }
  .ts-callout > .btn { grid-column: 2; justify-self: start; }
}

/* Verdict banner: the one loud thing on a report ---------------------------- */
.ts-verdict {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(300px, 1fr); gap: 32px;
  padding: 32px 36px; border-radius: var(--ts-radius-lg);
  background: #123063; color: #fff;
}
.ts-verdict::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: url("../images/blueprint-vcFAyba.svg") 100% 50% / cover no-repeat;
  -webkit-mask-image: linear-gradient(90deg, transparent 25%, #000 80%);
  mask-image: linear-gradient(90deg, transparent 25%, #000 80%);
}
.ts-verdict__kicker { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; color: var(--ts-text-inverse-2); font-size: var(--ts-fs-small); }
.ts-verdict__title { font-size: 34px; line-height: 40px; font-weight: 700; letter-spacing: -1.1px; margin: 0; color: #fff; }
.ts-verdict__text { margin: 12px 0 0; font-size: 15px; line-height: 23px; color: var(--ts-text-inverse-2); max-width: 58ch; }
.ts-verdict__text strong { color: #fff; }
.ts-verdict__muted { margin: 12px 0 0; font-size: var(--ts-fs-small); color: var(--ts-text-inverse-3); }
.ts-verdict__actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 24px; }
.ts-verdict__figure { align-self: stretch; display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: 24px; border-radius: var(--ts-radius-md); background: rgba(11, 31, 69, 0.55); border: 1px solid rgba(255, 255, 255, 0.12); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.ts-verdict__metric { font-size: var(--ts-fs-small); color: var(--ts-text-inverse-2); font-weight: 500; }
.ts-verdict__uplift { font-size: var(--ts-fs-hero); line-height: var(--ts-lh-hero); font-weight: 700; letter-spacing: var(--ts-ls-hero); color: #fff; display: flex; align-items: center; gap: 10px; }
.ts-verdict__uplift .bi { font-size: 32px; color: var(--ts-green-500); }
.ts-verdict__range { font-size: var(--ts-fs-small); color: var(--ts-text-inverse-2); }
.ts-verdict__range strong { color: #fff; }
.ts-verdict__caption { font-size: var(--ts-fs-small); color: var(--ts-text-inverse-3); }
.ts-verdict__compare { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 14px 0 0; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, 0.14); }
.ts-verdict__compare dt { font-size: 12px; font-weight: 500; color: var(--ts-text-inverse-3); display: flex; align-items: center; gap: 6px; }
.ts-verdict__compare dd { margin: 2px 0 0; font-size: 20px; line-height: 26px; font-weight: 600; color: #fff; }
.ts-verdict .ts-prob { background: rgba(255, 255, 255, 0.16); }
.ts-verdict .ts-prob-row__value { color: #fff; }
.ts-verdict .ts-var::before { box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.5); }
.ts-verdict a:not(.btn) { color: #fff; }
.ts-verdict--alert { background: var(--ts-red-900); }
.ts-verdict--alert::before { opacity: 0.25; }
@media (max-width: 991.98px) {
  .ts-verdict { grid-template-columns: minmax(0, 1fr); padding: 24px; gap: 20px; }
  .ts-verdict__title { font-size: 26px; line-height: 32px; }
}

/* Health checks ------------------------------------------------------------ */
.ts-checks { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ts-check { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 10px; padding: 16px 20px; }
.ts-check + .ts-check { border-left: 1px solid var(--ts-border-subtle); }
.ts-check:nth-child(3n+1) { border-left: 0; }
.ts-check:nth-child(n+4) { border-top: 1px solid var(--ts-border-subtle); }
.ts-check > .bi { font-size: 20px; line-height: 20px; }
@media (max-width: 1199.98px) {
  .ts-checks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ts-check + .ts-check { border-left: 0; }
  .ts-check { border-top: 1px solid var(--ts-border-subtle); }
}
@media (max-width: 575.98px) {
  .ts-checks { grid-template-columns: minmax(0, 1fr); }
}
.ts-check--ok > .bi { color: var(--ts-green-600); }
.ts-check--warn > .bi { color: var(--ts-amber-600); }
.ts-check--fail > .bi { color: var(--ts-red-600); }
.ts-check--wait > .bi { color: var(--ts-slate-500); }
.ts-check__title { margin: 0; font-weight: 600; font-size: var(--ts-fs-small); line-height: var(--ts-lh-small); }
.ts-check__text { margin: 2px 0 0; font-size: 12px; line-height: 16px; color: var(--ts-text-secondary); }

/* Goal strip ------------------------------------------------------------------- */
.ts-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); background: #fff; border: 1px solid var(--ts-border-subtle); border-radius: var(--ts-radius-lg); box-shadow: var(--ts-shadow-xs); }
.ts-metric { padding: 20px 24px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.ts-metric + .ts-metric { border-left: 1px solid var(--ts-border-subtle); }
.ts-metric__head { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.ts-metric__name { font-weight: 600; font-size: 15px; line-height: 22px; letter-spacing: -0.1px; margin: 0; }
.ts-metric__delta { font-size: 26px; line-height: 32px; letter-spacing: -0.7px; }
.ts-metric__values { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 10px 0; border-top: 1px solid var(--ts-border-subtle); border-bottom: 1px solid var(--ts-border-subtle); }
.ts-metric__values > div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.ts-metric__values dt { font-size: var(--ts-fs-small); line-height: 20px; font-weight: 500; color: var(--ts-text-secondary); }
.ts-metric__values dd { margin: 0; font-family: var(--ts-font-figures); font-size: 15px; line-height: 20px; font-weight: 600; }
.ts-metric__foot { margin: auto 0 0; font-size: 12px; line-height: 16px; color: var(--ts-text-muted); display: flex; align-items: center; gap: 6px; }
@media (max-width: 1199.98px) {
  .ts-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ts-metric:nth-child(3) { border-left: 0; }
  .ts-metric:nth-child(n+3) { border-top: 1px solid var(--ts-border-subtle); }
}
@media (max-width: 575.98px) {
  .ts-metrics { grid-template-columns: minmax(0, 1fr); }
  .ts-metric + .ts-metric { border-left: 0; border-top: 1px solid var(--ts-border-subtle); }
}

/* Charts ------------------------------------------------------------------------ */
.ts-chart { position: relative; }
.ts-chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.ts-chart .grid line { stroke: var(--ts-sand-300); stroke-width: 1; shape-rendering: crispEdges; }
.ts-chart .axis text, .ts-chart .tick { fill: var(--ts-text-muted); font-family: var(--ts-font-figures); font-size: 12px; }
.ts-chart .series { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.ts-chart .band { opacity: 0.1; }
.ts-chart .end-dot { stroke: #fff; stroke-width: 2; }
.ts-chart .label { font-family: var(--ts-font); font-size: 12px; font-weight: 600; fill: #123063; }
.ts-legend { display: flex; flex-wrap: wrap; gap: 6px 20px; font-size: var(--ts-fs-small); color: var(--ts-text-secondary); }
.ts-legend .ts-var { color: #123063; font-weight: 500; }
.ts-chart__tip { position: absolute; pointer-events: none; padding: 8px 10px; border-radius: var(--ts-radius-sm); background: #0b1f45; color: #fff; font-size: 12px; line-height: 18px; box-shadow: var(--ts-shadow-md); white-space: nowrap; transform: translate(-50%, -100%); margin-top: -12px; opacity: 0; transition: opacity var(--ts-dur-1) var(--ts-ease); }
.ts-chart__tip.is-on { opacity: 1; }
.ts-chart__tip .ts-var::before { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.6); }

/* Code -------------------------------------------------------------------------- */
/* Editable code fields: monospace on a calm sunken surface (not a dark IDE) */
.code-editor { font-family: var(--ts-font-mono); font-size: 13px; line-height: 20px; tab-size: 2; white-space: pre; }
.ts-code-field .form-label { display: flex; align-items: center; gap: 8px; }
/* Read-only code blocks */
.ts-code { border-radius: var(--ts-radius-md); background: #0b1f45; color: #dbe3f1; overflow: hidden; border: 1px solid #0b1f45; }
.ts-code__head { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 8px 12px 8px 16px; background: var(--ts-blue-850); border-bottom: 1px solid rgba(255, 255, 255, 0.08); font-size: 12px; color: var(--ts-text-inverse-2); font-weight: 600; }
.ts-code__head .ts-tag { background: rgba(255, 255, 255, 0.1); color: #fff; }
.ts-code__head .btn { margin-left: auto; --bs-btn-color: var(--ts-text-inverse-2); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: rgba(255, 255, 255, 0.1); --bs-btn-hover-border-color: transparent; }
.ts-code pre { margin: 0; padding: 14px 0; font-family: var(--ts-font-mono); font-size: 13px; line-height: 21px; counter-reset: line; overflow-x: auto; color: #dbe3f1; }
.ts-code pre > span { display: block; padding: 0 16px 0 0; }
.ts-code pre > span::before { counter-increment: line; content: counter(line); display: inline-block; width: 44px; padding-right: 16px; text-align: right; color: #7d8fb3; user-select: none; }
.ts-code .k { color: #ff8fc4; }   /* keyword: pink 300 */
.ts-code .s { color: #8fe39a; }   /* string: success green, lifted */
.ts-code .n { color: #ffcf66; }   /* number */
.ts-code .c { color: #8a9bbf; font-style: italic; }  /* comment */
.ts-code .p { color: #9fb3d9; }   /* property / punctuation */
.ts-code .f { color: #8fd3ff; }   /* function */

/* Kill switch: the only solid red control in the product ---------------------- */
.kill-switch { min-height: 48px; padding-left: 22px; padding-right: 22px; font-size: 15px; font-weight: 700; letter-spacing: 0.04em; }
.kill-switch .bi { font-size: 18px; }
.ts-kill { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 16px 20px; border-radius: var(--ts-radius-md); background: var(--ts-red-50); border: 1px solid var(--ts-red-200); }
.ts-kill__icon { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: var(--ts-red-600); color: #fff; font-size: 20px; box-shadow: 0 0 0 4px var(--ts-red-100); }
.ts-kill__title { margin: 0; font-weight: 600; }
.ts-kill__text { margin: 2px 0 0; font-size: var(--ts-fs-small); color: var(--ts-text-secondary); }
.ts-kill--killed { background: #fff; border-color: var(--ts-border); }
.ts-kill--killed .ts-kill__icon { background: var(--ts-slate-200); color: var(--ts-slate-700); box-shadow: none; }
@media (max-width: 575.98px) {
  .ts-kill { grid-template-columns: auto minmax(0, 1fr); }
  .ts-kill > .btn, .ts-kill > form { grid-column: 1 / -1; width: 100%; }
  .ts-kill > form > .btn { width: 100%; }
}

/* Empty states --------------------------------------------------------------------- */
.ts-empty { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 40px 24px; }
.ts-empty__art { position: relative; width: 120px; height: 104px; display: grid; place-items: center; margin-bottom: 12px; }
/* The splatter's blob sits behind the icon and its trail runs off to the lower right */
.ts-empty__art::before { content: ""; position: absolute; z-index: -1; width: 236px; height: 207px; left: -7px; top: -27px; background: url("../images/splatter-lightpink-3UBvOHp.png") 0 0 / 100% 100% no-repeat; transform-origin: 67px 79px; transform: rotate(-42deg); }
.ts-empty__art .bi { font-size: 34px; color: var(--ts-pink-600); }
.ts-empty__art img { width: 56px; height: 56px; }
.ts-empty__title { font-size: var(--ts-fs-card); line-height: var(--ts-lh-card); font-weight: 600; margin: 0; }
.ts-empty__text { margin: 4px 0 0; color: var(--ts-text-secondary); max-width: 44ch; }
.ts-empty .btn { margin-top: 16px; }
.ts-empty--compact { padding: 24px 16px; }
.ts-empty--compact .ts-empty__art { width: 72px; height: 60px; margin-bottom: 6px; }
.ts-empty--compact .ts-empty__art::before { width: 142px; height: 125px; left: -4px; top: -18px; transform-origin: 40px 48px; }
.ts-empty--compact .ts-empty__art .bi { font-size: 24px; }
/* The quiet one-line version (m.empty) for table cells and short lists */
.ts-empty-line { padding: 8px 0; color: var(--ts-text-muted); font-size: var(--ts-fs-small); }

/* People, tickets, menus ----------------------------------------------------------- */
.ts-person { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; min-width: 0; }
.ts-person__text { display: flex; flex-direction: column; line-height: 18px; min-width: 0; }
.ts-person__text small { color: var(--ts-text-muted); font-size: 12px; line-height: 16px; }
.ts-person--sm { gap: 6px; font-size: var(--ts-fs-small); }

.ts-ticket { display: inline-flex; align-items: center; gap: 5px; min-height: 24px; color: #123063; font-size: var(--ts-fs-small); font-weight: 600; text-decoration: none; white-space: nowrap; }
.ts-ticket > .bi { color: var(--ts-slate-400); font-size: 15px; }
.ts-ticket span { text-decoration: underline; text-underline-offset: 3px; }
.ts-ticket .ts-ticket__ext { font-size: 11px; color: var(--ts-slate-400); }
.ts-ticket:hover { color: var(--ts-link-hover); }
.ts-ticket:hover > .bi { color: currentColor; }

.ts-more .dropdown-menu { min-width: 200px; }
.ts-more form { margin: 0; }
.dropdown-item.ts-dropdown-danger, .dropdown-item.ts-dropdown-danger > .bi { color: var(--ts-red-600); }
.dropdown-item.ts-dropdown-danger:hover, .dropdown-item.ts-dropdown-danger:focus { background: var(--ts-red-50); color: var(--ts-red-700); }
button.dropdown-item { font-family: var(--ts-font); }

.ts-tabs { margin-bottom: 0; }

/* Sideways-scrolling regions are made focusable by app.js; show where focus is */
[data-ts-scroll]:focus-visible { outline: 2px solid var(--ts-focus); outline-offset: 2px; }

/* Rows that link (row-link controller): the whole row is a target, the name stays a link */
tr[data-row-link-url] { cursor: pointer; }

/* Shared screen helpers ------------------------------------------------------------
   Pieces more than one screen uses, folded in from the screen stylesheets (WP6). Every
   screens/*.css file loads on every page, so a shared piece lives here, not in a screen. */

/* Text and inputs */
.ts-mono { font-family: var(--ts-font-mono); font-size: 13px; }
.ts-optional { font-weight: 400; color: var(--ts-text-muted); }
.ts-input-short { max-width: 240px; }
.ts-input-date { max-width: 220px; }

/* A list without bullets or indent (Home's cards, the gallery) */
.ts-list { list-style: none; margin: 0; padding: 0; }

/* A result in words with an icon: Published, Failed, Active, Revoked ... (never colour alone) */
.ts-result { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; white-space: nowrap; }
.ts-result > .bi { font-size: 15px; }
.ts-result--ok > .bi { color: var(--ts-success-icon); }
.ts-result--warn { color: var(--ts-warning-fg); }
.ts-result--warn > .bi { color: var(--ts-warning-icon); }
.ts-result--fail { color: var(--ts-danger-fg); }
.ts-result--fail > .bi { color: var(--ts-danger-icon); }
.ts-result--wait { color: var(--ts-text-secondary); }
.ts-result--wait > .bi, .ts-result--off > .bi { color: var(--ts-slate-400); }
.ts-result--off { color: var(--ts-text-secondary); }

/* "All sites" in the place of a site chip: a neutral tile with the grid icon */
.ts-all-sites { display: inline-flex; align-items: center; gap: var(--ts-space-2); font-size: var(--ts-fs-small); line-height: 18px; font-weight: 500; white-space: nowrap; }
.ts-all-sites > .bi { width: 22px; height: 22px; display: inline-grid; place-items: center; border-radius: var(--ts-radius-sm); background: var(--ts-slate-100); color: var(--ts-blue-900); font-size: 12px; }

/* Row actions: the quiet buttons at the end of a table row */
.ts-row-actions { display: inline-flex; align-items: center; justify-content: flex-end; gap: var(--ts-space-2); }
.ts-row-actions .btn { --bs-btn-color: var(--ts-slate-600); }
.ts-row-actions .btn:hover { --bs-btn-hover-color: var(--ts-text); }

/* Tables whose rows become small cards below 768px: the first cell leads, the rest follow with a
   short label (data-label), actions last. Same markup, so nothing is rendered twice. */
@media (max-width: 767.98px) {
  .ts-cards-table, .ts-cards-table > tbody, .ts-cards-table > tbody > tr, .ts-cards-table > tbody > tr > * { display: block; width: 100%; }
  .ts-cards-table > thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .ts-cards-table > tbody > tr { padding: 14px var(--ts-space-4); border-bottom: 1px solid var(--ts-border-subtle); }
  .ts-cards-table > tbody:last-child > tr:last-child { border-bottom: 0; }
  .card .ts-cards-table.table > tbody > tr > * { padding: 2px 0 !important; border: 0; text-align: left; white-space: normal; }
  .ts-cards-table > tbody > tr > :first-child { padding-bottom: 6px !important; }
  .ts-cards-table td[data-label] { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; font-size: var(--ts-fs-small); }
  .ts-cards-table td[data-label]::before { content: attr(data-label); flex: none; min-width: 88px; color: var(--ts-text-muted); font-weight: 500; }
  .ts-cards-table td.num { font-family: var(--ts-font); }
  .ts-cards-table td:empty { display: none; }
  .ts-cards-table .ts-cards-table__actions { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: var(--ts-space-2); padding-top: 8px !important; }
  .ts-cards-table .ts-cards-table__actions:not(:has(*)) { display: none; }
  .ts-cards-table .ts-row-actions { justify-content: flex-start; }
}

/* Choice tiles: a radio or checkbox with a title and a line on what it means (the invite dialog's roles) */
.ts-choice { position: relative; }
.ts-choice + .ts-choice { margin-top: 6px; }
.ts-choice__input { position: absolute; left: 14px; top: 15px; width: 18px; height: 18px; margin: 0; accent-color: var(--ts-pink-600); }
.ts-choice__label {
  display: flex; flex-direction: column; gap: 1px; padding: 11px 14px 11px 44px;
  border: 1px solid var(--ts-border); border-radius: var(--ts-radius-md); background: var(--ts-white);
  cursor: pointer; transition: border-color var(--ts-dur-1) var(--ts-ease), background-color var(--ts-dur-1) var(--ts-ease);
}
.ts-choice__label:hover { border-color: var(--ts-blue-700); }
.ts-choice__input:checked + .ts-choice__label { border-color: var(--ts-pink-600); background: var(--ts-pink-50); box-shadow: inset 0 0 0 1px var(--ts-pink-600); }
.ts-choice__input:focus-visible + .ts-choice__label { outline: 2px solid var(--ts-focus); outline-offset: 2px; }
.ts-choice__title { font-weight: 600; }
.ts-choice__text { color: var(--ts-text-secondary); font-size: var(--ts-fs-small); line-height: var(--ts-lh-small); }

/* Advanced: rarely needed fields behind a disclosure at the foot of a form card (the library's key) */
.ts-advanced { border-top: 1px solid var(--ts-border-subtle); }
.ts-advanced__toggle {
  display: flex; align-items: center; gap: var(--ts-space-2); padding: 14px var(--ts-space-6);
  list-style: none; font-weight: 600; color: var(--ts-text);
  border-bottom-left-radius: calc(var(--ts-radius-lg) - 1px); border-bottom-right-radius: calc(var(--ts-radius-lg) - 1px);
}
.ts-advanced__toggle::-webkit-details-marker { display: none; }
.ts-advanced__toggle::marker { content: ""; }
.ts-advanced__toggle:hover { background: var(--ts-hover); }
.ts-advanced__toggle > .bi { color: var(--ts-pink-600); font-size: 13px; transition: transform var(--ts-dur-1) var(--ts-ease); }
.ts-advanced[open] > .ts-advanced__toggle, .ts-advanced:not(:last-child) > .ts-advanced__toggle { border-radius: 0; }
.ts-advanced[open] > .ts-advanced__toggle > .bi { transform: rotate(90deg); }
.ts-advanced__toggle:focus-visible { outline-offset: -2px; }
.ts-advanced__body { padding: var(--ts-space-1) var(--ts-space-6) var(--ts-space-2); }
@media (max-width: 767.98px) {
  .ts-advanced__toggle { padding: 12px var(--ts-space-4); }
  .ts-advanced__body { padding: var(--ts-space-1) var(--ts-space-4) var(--ts-space-2); }
}

/* Form footers: one component, two placements.
   A form of several sections ends with a row under the last section: Cancel on the left, then any
   note, the primary last on the right. A form in one card ends with a sunken footer inside the card
   (--card): the note on the left, then Cancel and the primary last. Small forms inside a section
   (Add rule, Create key) keep their button under the fields. */
.ts-form-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 16px; margin-top: var(--ts-space-6); }
.ts-form-actions > .btn { flex: none; }
.ts-form-actions > :last-child { margin-left: auto; }
.ts-form-actions__note { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 0 auto; color: var(--ts-text-secondary); font-size: var(--ts-fs-small); line-height: var(--ts-lh-small); }
.ts-form-actions__note + :last-child { margin-left: 0; }
.ts-form-actions__note > .bi { flex: none; font-size: 16px; color: var(--ts-slate-500); }
.ts-form-actions--card {
  gap: 12px 8px; justify-content: flex-end; margin: 0; padding: 16px var(--ts-space-6);
  background: var(--ts-surface-sunken); border-top: 1px solid var(--ts-border-subtle);
  border-radius: 0 0 calc(var(--ts-radius-lg) - 1px) calc(var(--ts-radius-lg) - 1px);
}
.ts-form-actions--card > :last-child { margin-left: 0; }
.ts-form-actions--card > .ts-form-actions__note { flex: 1 1 240px; margin: 0 var(--ts-space-2) 0 0; }
@media (max-width: 575.98px) {
  .ts-form-actions { gap: 12px 8px; }
  .ts-form-actions__note, .ts-form-actions--card > .ts-form-actions__note { order: -1; flex: 1 1 100%; margin: 0; }
  .ts-form-actions > .btn-primary { flex: 1 1 auto; }
  .ts-form-actions--card { padding: 16px; }
}

/* Utility bits ------------------------------------------------------------------- */
.ts-meta-list { display: flex; flex-wrap: wrap; gap: 4px 16px; color: var(--ts-text-muted); font-size: var(--ts-fs-small); }
.ts-divider-v { width: 1px; align-self: stretch; background: var(--ts-border); }
.ts-muted { color: var(--ts-text-muted); }
.ts-secondary { color: var(--ts-text-secondary); }
.ts-strong { color: #123063; font-weight: 600; }
.ts-ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ts-surface-muted { background: var(--ts-surface-muted); }
.ts-surface-muted a:not(.btn) { color: var(--ts-link-on-muted); }
.ts-visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }
.ts-stack { display: flex; flex-direction: column; gap: 24px; }

/* Motion and forced colours ------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
  .ts-status--live::before, .ts-dot--live { box-shadow: 0 0 0 3px rgba(47, 158, 61, 0.25); }
}
@media (forced-colors: active) {
  .ts-status, .ts-tag, .badge, .ts-chip { border: 1px solid CanvasText; }
  .ts-nav__link.is-active, .ts-nav__link[aria-current="page"] { outline: 2px solid Highlight; }
  .ts-prob, .ts-meter { border: 1px solid CanvasText; }
  .ts-prob > span, .ts-meter > span { background: Highlight; forced-color-adjust: none; }
  /* The likely-range plot is drawn with backgrounds only, which forced colours remove */
  .ts-ci::before, .ts-ci__bar, .ts-ci__pt { forced-color-adjust: none; background: CanvasText; }
  .ts-ci__bar { opacity: 1; }
  .ts-ci__pt { background: Highlight; box-shadow: none; }
}

/* Claude beside code fields and in the launch step's Code to review (code_assist_controller.js, ai/_code.html.twig) */
/* Label, then the Claude buttons on their own row, so fields side by side line up whatever their label length. */
.ts-code-field__head { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin-bottom: var(--ts-space-2); }
.ts-code-field__head .form-label { margin-bottom: 0; }
.ts-code-assist__actions { display: flex; flex-wrap: wrap; gap: 6px; }
.ts-code-assist__actions .btn { display: inline-flex; align-items: center; gap: 6px; }
.ts-code-assist__write { margin-top: var(--ts-space-2); padding: 12px; border: 1px solid var(--ts-border-subtle); border-radius: var(--ts-radius-md); background: var(--ts-surface-sunken); }
.ts-code-assist__write .form-label { font-size: var(--ts-fs-small); }
.ts-code-assist__write-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 8px; }
.ts-code-assist__write-actions .form-text { margin: 0; }
.ts-code-assist__result:empty { display: none; }
.ts-code-assist__result { margin-top: var(--ts-space-2); }
.ts-ai-result { padding: 12px; border: 1px solid var(--ts-border-subtle); border-radius: var(--ts-radius-md); background: var(--ts-surface); }
.ts-ai-result__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; margin-bottom: 8px; }
.ts-ai-result__summary { margin: 0; font-size: var(--ts-fs-small); line-height: var(--ts-lh-small); }
.ts-ai-result__status, .ts-ai-result__error, .ts-ai-result__ok, .ts-ai-result__warn { margin: 0; font-size: var(--ts-fs-small); line-height: var(--ts-lh-small); }
.ts-ai-result__status { color: var(--ts-text-secondary); }
.ts-ai-result__error { color: var(--ts-danger-fg); }
.ts-ai-result__ok { color: var(--ts-success-fg); }
.ts-ai-result__warn { margin-top: 8px; color: var(--ts-warning-fg); }
.ts-ai-result__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.ts-ai-result__meta { flex-basis: 100%; margin: 0; font-size: 12px; color: var(--ts-text-muted); }
.ts-ai-verdict { display: inline-flex; align-items: center; gap: 5px; padding: 1px 8px; border-radius: 999px; border: 1px solid; font-size: 12px; font-weight: 600; line-height: 18px; white-space: nowrap; }
.ts-ai-verdict--ok { color: var(--ts-success-fg); background: var(--ts-success-bg); border-color: var(--ts-success-border); }
.ts-ai-verdict--warn { color: var(--ts-warning-fg); background: var(--ts-warning-bg); border-color: var(--ts-warning-border); }
.ts-ai-verdict--danger { color: var(--ts-danger-fg); background: var(--ts-danger-bg); border-color: var(--ts-danger-border); }
.ts-code__head .ts-ai-verdict { margin-left: auto; }
.ts-ai-findings { margin: 8px 0 16px; }
.ts-ai-findings__none { margin: 0; font-size: var(--ts-fs-small); color: var(--ts-text-secondary); display: flex; gap: 6px; align-items: center; }
.ts-ai-issues { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ts-ai-issue { display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px; border-radius: var(--ts-radius-sm); background: var(--ts-surface-sunken); border-left: 3px solid var(--ts-border); }
.ts-ai-issue--high { border-left-color: var(--ts-danger-icon); }
.ts-ai-issue--medium { border-left-color: var(--ts-warning-icon); }
.ts-ai-issue--low { border-left-color: var(--ts-border-control); }
.ts-ai-issue__sev { flex: none; min-width: 56px; font-size: 12px; font-weight: 600; line-height: 18px; color: var(--ts-text-secondary); }
.ts-ai-issue--high .ts-ai-issue__sev { color: var(--ts-danger-fg); }
.ts-ai-issue--medium .ts-ai-issue__sev { color: var(--ts-warning-fg); }
.ts-ai-issue__body { min-width: 0; }
.ts-ai-issue__body p { margin: 0; font-size: var(--ts-fs-small); line-height: var(--ts-lh-small); }
.ts-ai-issue__title { font-weight: 600; color: var(--ts-text-strong); }
.ts-ai-issue__line { margin-right: 8px; font-family: var(--ts-font-mono); font-size: 12px; font-weight: 500; color: var(--ts-text-secondary); }
.ts-ai-issue__detail { color: var(--ts-text-secondary); }
.ts-ai-issue__fix { margin-top: 2px !important; }
.ts-ai-fix { margin-top: 10px; }
.ts-ai-fix > summary, .ts-ai-fix__title { margin: 0 0 6px; font-size: var(--ts-fs-small); font-weight: 600; cursor: pointer; }
.ts-ai-fix__title { cursor: default; }
.ts-ai-blocked { margin: 8px 0 0; font-size: var(--ts-fs-small); color: var(--ts-danger-fg); display: flex; gap: 6px; }
.ts-diff { max-height: 320px; overflow: auto; border-radius: var(--ts-radius-sm); border: 1px solid var(--ts-border-subtle); background: var(--ts-surface); font-family: var(--ts-font-mono); font-size: 12px; line-height: 18px; }
.ts-diff__line { display: flex; min-width: max-content; }
.ts-diff__line code { color: inherit; background: none; border: 0; border-radius: 0; font-size: inherit; white-space: pre; padding: 0 12px 0 0; }
.ts-diff__sign { flex: none; width: 22px; text-align: center; color: var(--ts-text-muted); user-select: none; }
.ts-diff__line--add { background: var(--ts-success-bg); color: var(--ts-success-fg); }
.ts-diff__line--del { background: var(--ts-danger-bg); color: var(--ts-danger-fg); text-decoration: line-through; text-decoration-color: rgba(0, 0, 0, .25); }
.ts-diff__line--skip { color: var(--ts-text-muted); font-style: italic; background: var(--ts-surface-sunken); }
.ts-ai-review { margin-top: var(--ts-space-4); padding: 14px 16px; border: 1px solid var(--ts-border-subtle); border-radius: var(--ts-radius-md); background: var(--ts-surface-sunken); }
.ts-ai-review__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; }
.ts-ai-review__summary { margin: 0; font-size: var(--ts-fs-small); line-height: var(--ts-lh-small); }
.ts-ai-review__meta { margin: 6px 0 0; font-size: 12px; color: var(--ts-text-muted); }
.ts-ai-review__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 10px; }
.ts-ai-review__actions .form-text { margin: 0; }
.ts-ai-review__head + .ts-ai-review__meta + .ts-ai-review__actions:empty { display: none; }