/* Home (owner: WP1). Live tests, Needs you, Coming up, Live patches, the first-run welcome panel and
   Ideas to test next. The headline result inside a live row comes from m.verdict_inline
   (components.css), loaded into a lazy frame (campaign/_headline.html.twig). The .ts-live, .ts-attn and
   .ts-next rows are also shown on the /_ui gallery without frames, so the base rules work for both. */

/* Page furniture ------------------------------------------------------------- */
.ts-home-alerts { display: grid; gap: var(--ts-space-3); margin-bottom: var(--ts-space-6); }
.ts-home-stats { margin-bottom: var(--ts-space-6); }
.ts-home-card { overflow: hidden; }
.ts-home-card__foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 4px 16px; margin-top: auto; padding: 14px 24px; border-top: 1px solid var(--ts-border-subtle); font-size: var(--ts-fs-small); }
.ts-home-card__note { display: flex; align-items: flex-start; gap: 8px; margin: 0; padding: 12px 24px; border-top: 1px solid var(--ts-border-subtle); background: var(--ts-surface-sunken); color: var(--ts-text-secondary); font-size: var(--ts-fs-small); line-height: var(--ts-lh-small); }
.ts-home-card__note .bi { margin-top: 1px; color: var(--ts-slate-500); }
/* A note that closes a stretched card: it sits on the card's bottom edge */
.ts-home-card__note--end { margin-top: auto; }
.ts-home-card__foot + .ts-home-card__note--end { margin-top: 0; }
.ts-home-card .ts-empty--compact { padding: 32px 24px 36px; }
.ts-home-card .ts-empty__text a { color: var(--ts-link); font-weight: 600; }

/* Live tests ------------------------------------------------------------------- */
.ts-live {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1fr) 272px 132px;
  align-items: center; gap: 12px 28px; padding: 16px 24px;
  border-top: 1px solid var(--ts-border-subtle);
  transition: background-color var(--ts-dur-1) var(--ts-ease);
}
.ts-live:first-child { border-top: 0; }
.ts-live:hover { background: var(--ts-hover-row); }
.ts-live:has(.ts-live__name:focus-visible) { outline: 2px solid var(--ts-focus); outline-offset: -2px; }
.ts-live__main { min-width: 0; }
.ts-live__name { display: block; color: var(--ts-text); font-weight: 600; font-size: 15px; line-height: 22px; text-decoration: none; overflow-wrap: anywhere; }
.ts-live__name:hover { color: var(--ts-text); }
.ts-live__name:focus-visible { outline: 0; }
.ts-live:hover .ts-live__name { text-decoration: underline; text-underline-offset: 3px; }
.ts-live__meta { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 14px; margin-top: 6px; color: var(--ts-text-muted); font-size: var(--ts-fs-small); line-height: var(--ts-lh-small); }
/* The frame (or its static stand-in) spans the result and tag columns and lays them out on the row's
   own tracks (subgrid). It stays a real box: a display: contents frame never intersects, so a lazy
   frame would never load. */
.ts-live__frame { grid-column: 2 / 4; display: grid; grid-template-columns: subgrid; align-items: center; min-width: 0; }
/* The result keeps the skeleton's height whatever loads, so nothing below it moves (CLS) */
.ts-live__frame > .ts-headline, .ts-live__frame > .ts-skeleton { min-height: 66px; justify-content: center; }
.ts-live .ts-skeleton--home { height: 66px; }
.ts-live__state { display: flex; align-items: center; justify-content: flex-end; gap: 12px; min-width: 0; }
.ts-live__state > .bi { color: var(--ts-slate-400); font-size: 16px; }
.ts-live:hover .ts-live__state > .bi { color: var(--ts-text); }
.ts-live__tag-skeleton { display: inline-block; width: 84px; height: 22px; border-radius: var(--ts-radius-pill); background: var(--ts-sand-150); }
/* Kept for the gallery's meters (patch lifetime) */
.ts-live__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-live__bar strong { color: var(--ts-text); font-weight: 600; }

/* The Live tests card sizes its rows by its own width (it is two thirds of the page from 1200px). */
.ts-home-live { container: home-live / inline-size; }
@container home-live (max-width: 719.98px) {
  /* Tag above the result, beside the name */
  .ts-live { grid-template-columns: minmax(0, 1fr) 280px; align-items: start; }
  .ts-live__frame { grid-column: 2; display: flex; flex-direction: column; align-items: stretch; gap: 8px; }
  .ts-live__state { order: -1; justify-content: flex-start; min-height: 22px; }
  .ts-live__state > .bi { display: none; }
}
@container home-live (max-width: 559.98px) {
  /* The name and meta, then the tag above the result at full width. Nothing sits beside the name, so
     the tag that loads later cannot reflow it (no layout shift). */
  .ts-live { grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 16px; }
  .ts-live__main { grid-column: 1; grid-row: 1; }
  .ts-live__frame { grid-column: 1; grid-row: 2; }
}
/* The gallery's rows (no frame) on narrow screens */
@media (max-width: 767.98px) {
  .ts-live { grid-template-columns: minmax(0, 1fr) auto; padding: 16px; gap: 12px 16px; }
  .ts-live > .ts-headline, .ts-live > .ts-skeleton { grid-column: 1 / -1; grid-row: 2; }
  .ts-live > .ts-live__state { grid-column: 2; grid-row: 1; align-self: start; }
  .ts-live > .ts-live__state > .bi { display: none; }
}

/* Coming up ---------------------------------------------------------------------- */
.ts-next { position: relative; display: flex; align-items: center; gap: 16px; padding: 16px 24px; border-top: 1px solid var(--ts-border-subtle); transition: background-color var(--ts-dur-1) var(--ts-ease); }
.ts-next:first-child { border-top: 0; }
.ts-next:hover { background: var(--ts-hover-row); }
.ts-next:hover .ts-live__name { text-decoration: underline; text-underline-offset: 3px; }
.ts-next:has(.ts-live__name:focus-visible) { outline: 2px solid var(--ts-focus); outline-offset: -2px; }
.ts-next > div { flex: 1; min-width: 0; }
.ts-next > .ts-status { flex: none; }
.ts-next__when { display: flex; align-items: center; gap: 6px; margin: 6px 0 0; color: var(--ts-text-secondary); font-size: var(--ts-fs-small); line-height: var(--ts-lh-small); }
.ts-next__when .bi { color: var(--ts-slate-400); font-size: 13px; }

/* Needs you and Live patches ------------------------------------------------------- */
/* Beyond the first six, Needs you keeps the rest in a collapsed list behind "Show 2 more" */
.ts-home-attention__more > .ts-attn:first-child { border-top: 1px solid var(--ts-border-subtle); }
.ts-home-attention__toggle { margin-left: -8px; }
.ts-home-attention__toggle > .bi { font-size: 13px; transition: transform var(--ts-dur-1) var(--ts-ease); }
.ts-home-attention__toggle[aria-expanded="true"] > .bi { transform: rotate(180deg); }
.ts-home-attention__hide, .ts-home-attention__toggle[aria-expanded="true"] .ts-home-attention__show { display: none; }
.ts-home-attention__toggle[aria-expanded="true"] .ts-home-attention__hide { display: inline; }
.ts-attn { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 14px; padding: 18px 24px; border-top: 1px solid var(--ts-border-subtle); }
.ts-attn:first-child { border-top: 0; }
.ts-attn__icon { width: 36px; height: 36px; display: grid; place-items: center; border-radius: var(--ts-radius-md); font-size: 17px; background: var(--ts-slate-50); color: var(--ts-slate-600); }
.ts-attn--danger .ts-attn__icon { background: var(--ts-red-50); color: var(--ts-red-600); }
.ts-attn--warning .ts-attn__icon { background: var(--ts-amber-50); color: var(--ts-amber-600); }
.ts-attn--success .ts-attn__icon { background: var(--ts-green-50); color: var(--ts-green-600); }
.ts-attn--info .ts-attn__icon { background: var(--ts-blue-100); color: var(--ts-blue-700); }
.ts-attn--approval .ts-attn__icon { background: var(--ts-pink-50); color: var(--ts-pink-600); }
.ts-attn__title { margin: 0; font-weight: 600; line-height: 20px; overflow-wrap: anywhere; }
.ts-attn__link { color: var(--ts-text); text-decoration: none; }
.ts-attn__link:hover { color: var(--ts-link-hover); text-decoration: underline; text-underline-offset: 3px; }
.ts-attn__text { margin: 3px 0 0; color: var(--ts-text-secondary); font-size: var(--ts-fs-small); line-height: var(--ts-lh-small); }
.ts-attn__meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px; margin-top: 10px; font-size: 12px; line-height: 16px; color: var(--ts-text-muted); }
.ts-attn__meta a:not(.ts-ticket) { display: inline-flex; align-items: center; gap: 4px; text-decoration: none; color: var(--ts-text); font-weight: 600; }
.ts-attn__actions { display: flex; align-items: center; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.ts-attn__actions form { margin: 0; }

/* First run: the brand's Help and Advice block ------------------------------------ */
.ts-welcome {
  position: relative; isolation: isolate; overflow: hidden;
  margin-bottom: var(--ts-space-6); padding: 32px 36px 36px;
  border-radius: var(--ts-radius-lg);
  background: var(--ts-surface-inverse); color: var(--ts-text-inverse);
}
.ts-welcome::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: url("../../images/blueprint-vcFAyba.svg") 100% 40% / cover no-repeat;
  -webkit-mask-image: linear-gradient(90deg, transparent 30%, var(--ts-super-blue) 90%);
  mask-image: linear-gradient(90deg, transparent 30%, var(--ts-super-blue) 90%);
}
.ts-welcome__title { margin: 0; font-size: 26px; line-height: 32px; font-weight: 700; letter-spacing: -0.8px; color: var(--ts-text-inverse); }
.ts-welcome__text { margin: 8px 0 0; max-width: 60ch; color: var(--ts-text-inverse-2); font-size: 15px; line-height: 23px; }
.ts-welcome__steps { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 28px 0 0; padding: 0; }
.ts-welcome__step { padding: 20px; border: 1px solid var(--ts-border-inverse); border-radius: var(--ts-radius-md); background: color-mix(in srgb, var(--ts-white) 5%, transparent); }
.ts-welcome__num { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: var(--ts-pink-600); color: var(--ts-white); font-size: 14px; font-weight: 700; }
.ts-welcome__step h3 { margin: 14px 0 4px; font-size: var(--ts-fs-card); line-height: var(--ts-lh-card); font-weight: 600; color: var(--ts-text-inverse); }
.ts-welcome__step p { margin: 0; color: var(--ts-text-inverse-2); font-size: var(--ts-fs-small); line-height: 19px; }
.ts-welcome__actions { margin-top: 28px; }
@media (max-width: 767.98px) {
  .ts-welcome { padding: 24px 20px; }
  .ts-welcome__title { font-size: 22px; line-height: 28px; letter-spacing: -0.5px; }
  .ts-welcome__steps { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .ts-welcome__actions .btn { width: 100%; }
}

/* Ideas to test next (AI) ---------------------------------------------------------- */
.ts-home-ideas { margin-top: var(--ts-space-6); }
.ts-home-ideas .ts-card-head h2 > .bi { color: var(--ts-pink-600); }
.ts-idea { padding: 18px 24px; border-top: 1px solid var(--ts-border-subtle); }
.ts-idea:first-child { border-top: 0; }
.ts-idea__head { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 16px; }
.ts-idea__name { color: var(--ts-text); font-weight: 600; text-decoration: none; }
.ts-idea__name:hover { color: var(--ts-link-hover); text-decoration: underline; text-underline-offset: 3px; }
.ts-idea__meta { display: inline-flex; align-items: center; gap: 12px; font-size: 12px; color: var(--ts-text-muted); }
.ts-idea__findings { list-style: none; display: grid; gap: 12px; margin: 12px 0 0; padding: 0; }
.ts-idea__finding { margin: 0; font-size: var(--ts-fs-small); line-height: 19px; }
.ts-idea__follow { display: flex; gap: 6px; margin: 4px 0 0; font-size: var(--ts-fs-small); line-height: 19px; color: var(--ts-text-secondary); }
.ts-idea__follow .bi { color: var(--ts-slate-400); }

@media (max-width: 575.98px) {
  /* The status leads the row, so the name and its lines get the full width */
  .ts-next { flex-direction: column; align-items: flex-start; gap: 8px; }
  .ts-next > .ts-status { order: -1; }
  .ts-next > div { width: 100%; }
}
@media (max-width: 767.98px) {
  .ts-next { padding: 14px 16px; flex-wrap: wrap; }
  .ts-attn { padding: 16px; }
  .ts-idea { padding: 16px; }
  .ts-home-card__foot, .ts-home-card__note { padding-left: 16px; padding-right: 16px; }
}