/* Signal Scope - signed-in app shell: workspace bar, rail, canvas, composer, progress, failure, empty state. */
.sg-app { position: relative; max-width: 1280px; margin: 0 auto; padding: 0 16px 72px; } /* 16px matches .nav-content so the workspace bar and the site nav share one left edge */
.sg-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 24px; padding: 22px 0 18px; border-bottom: 1px solid var(--sg-border); margin-bottom: 24px; }
.sg-bar__id { display: flex; align-items: center; gap: 12px; margin-right: auto; min-width: 0; }
.sg-bar__title { font-size: 1.5rem; line-height: 1.2; }
.sg-bar__actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.sg-bar__reports { display: none; }
.sg-bar__cmd .sg-kbd { margin-left: 4px; }
.sg-meter { min-width: 220px; }
.sg-meter__t { font-size: .875rem; color: var(--sg-text-2); }
.sg-meter__t strong { color: var(--sg-text); font-weight: 700; }
.sg-meter__bar { height: 6px; border-radius: 99px; background: rgba(255,255,255,.12); margin-top: 6px; overflow: hidden; }
.sg-meter__fill { display: block; height: 100%; width: var(--p, 0%); border-radius: inherit; background: var(--sg-ramp-5); transition: width .4s ease; }
.sg-meter__fill.is-out { background: var(--sg-warn); }
.sg-banners { display: grid; gap: 8px; margin-bottom: 16px; }
.sg-banners:empty { display: none; }

.sg-layout { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 32px; align-items: start; }
.sg-rail { position: sticky; top: calc(var(--sg-nav-h, 64px) + 16px); max-height: calc(100dvh - var(--sg-nav-h, 64px) - 32px); overflow: auto; border: 1px solid var(--sg-border); border-radius: var(--sg-r3); background: var(--sg-surface); overscroll-behavior: contain; }
.sg-rail__inner { display: grid; gap: 12px; padding: 16px; }
.sg-rail__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sg-rail__headacts { display: flex; align-items: center; gap: 4px; }
.sg-rail__title { font-size: 1.125rem; }
/* V6-01: collapsible rail. Collapsed, the column is a 48px strip holding one "Show reports list" button (chevron pointing at the canvas it
   gives back), and the report canvas may grow from 1000px to 1120px so the matrix shows six of its nine columns at 1440 without scrolling. */
.sg-rail__collapse .sg-icon { transform: rotate(90deg); }
.sg-rail__expand { display: none; width: 44px; height: 44px; margin: 1px; }   /* R8: 44 + 2 x 1 = the 46px inside the 48px strip's borders (a 2px margin overflowed it by 2px: a sideways scrollbar where scrollbars are not overlays) */
.sg-layout.is-rail-collapsed { grid-template-columns: 48px minmax(0, 1fr); gap: 24px; }
.sg-rail.is-collapsed { overflow: visible; }
.sg-rail.is-collapsed .sg-rail__expand { display: inline-grid; }
.sg-layout.is-rail-collapsed .sg-canvas--report { max-width: 1120px; }   /* only the report grows; a 1120px composer or progress card reads worse, not better */
.sg-rail__search { position: relative; }
.sg-rail__search .sg-icon { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--sg-muted); pointer-events: none; z-index: 1; }
/* V7-09: the five filters fit ONE row of the 300px rail (266px of content; at 15px text with 9px sides they needed 327px and wrapped to two
   rows): 13px text and 6px sides = about 260px. The row never widens the rail (min-width: 0 on the rail's children). */
.sg-rail__inner > * { min-width: 0; }
.sg-filter { display: flex; flex-wrap: nowrap; gap: 4px; }
.sg-filter__btn { flex: 0 1 auto; min-width: 0; white-space: nowrap; min-height: 30px; padding: 0 6px; border-radius: 999px; border: 1px solid var(--sg-border); background: transparent; color: var(--sg-text-2); font-size: .8125rem; font-weight: 600; cursor: pointer; transition: background var(--sg-t), color var(--sg-t); }
.sg-filter .sg-filter__btn { font-size: .8125rem; }   /* `.sg button { font: inherit }` (base.css) out-ranks the lone class, so the size never applied */
.sg-filter__btn:hover { background: var(--sg-neutral-bg); color: var(--sg-text); }
.sg-filter__btn[aria-pressed="true"] { background: var(--sg-accent-bg); color: var(--sg-accent-text); border-color: var(--sg-accent); }
.sg-hstatus { font-size: .875rem; color: var(--sg-muted); text-align: center; padding: 8px 0; }
.sg-hstatus:empty { display: none; }
.sg-hlist { display: grid; gap: 4px; }
.sg-hitem { position: relative; }
.sg-hrow { display: grid; gap: 6px; width: 100%; padding: 10px 40px 10px 12px; border-radius: 10px; border: 1px solid transparent; background: transparent; text-align: left; cursor: pointer; transition: background var(--sg-t), border-color var(--sg-t); }
.sg-hrow:hover { background: var(--sg-neutral-bg); }
.sg-hrow.is-open { background: var(--sg-accent-bg); border-color: rgba(139,124,255,.5); }
.sg-hrow__top { display: flex; align-items: flex-start; gap: 6px; min-width: 0; }
.sg-hrow__pin { color: var(--sg-accent-text); margin-top: 3px; }
.sg-hrow__title { font-weight: 600; font-size: .9375rem; line-height: 1.35; color: var(--sg-text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.sg-hrow__meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.sg-hrow__conf { display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-xs); color: var(--sg-text-2); white-space: nowrap; }
.sg-hrow__date { font-size: var(--fs-xs); color: var(--sg-muted); font-variant-numeric: tabular-nums; }   /* V6-07: dates in a list line up */
.sg-hrow__more { position: absolute; right: 6px; top: 6px; opacity: .0; }
.sg-hitem:hover .sg-hrow__more, .sg-hitem:focus-within .sg-hrow__more, .sg-hrow__more[aria-expanded="true"] { opacity: 1; }
@media (hover: none) { .sg-hrow__more { opacity: 1; } }
.sg-drawer-rail .sg-rail__inner { padding: 0; }
.sg-drawer--rail .sg-rail__head { display: none; } /* V5-12: the drawer already says "Reports"; the rail's own head would print it twice */

.sg-main { min-width: 0; scroll-margin-top: calc(var(--sg-nav-h, 64px) + 16px); }
.sg-main:focus { outline: none; }
.sg-canvas { max-width: 1000px; margin: 0 auto; display: grid; gap: 24px; }
.sg-canvas--report { gap: 0; }
.sg-loading { display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 280px; color: var(--sg-text-2); }
.sg-loading .sg-spin { border-color: rgba(255,255,255,.25); border-top-color: var(--sg-accent); }

/* Composer */
.sg-compcard { padding: 28px; display: grid; gap: 22px; }
.sg-compcard__title { font-size: var(--fs-h2); line-height: 1.2; }
.sg-compcard__lead { color: var(--sg-muted); margin-top: 4px; }
.sg-composer { display: grid; gap: 22px; }
.sg-examples { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.sg-examples__label { font-size: var(--fs-xs); color: var(--sg-muted); }
.sg-composer__foot { display: grid; gap: 10px; justify-items: start; padding-top: 6px; }
.sg-composer__usage { font-size: .875rem; color: var(--sg-text-2); }
.sg-composer__usage strong { color: var(--sg-text); }
.sg-composer__usage.is-out { color: var(--sg-warn); }
.sg-composer__reason { font-size: var(--fs-xs); color: var(--sg-muted); min-height: 0; }
.sg-composer__reason:empty { display: none; }
.sg-composer__submit { min-width: 220px; }

/* Empty state */
.sg-empty { display: grid; gap: 14px; padding: 32px; border-radius: var(--sg-r3); border: 1px solid var(--sg-border); background: radial-gradient(120% 140% at 0% 0%, rgba(91,75,240,.22), transparent 60%), var(--sg-surface); }
.sg-empty__title { font-size: clamp(1.75rem, 3vw, 2.25rem); line-height: 1.15; }
.sg-empty__lead { color: var(--sg-text-2); max-width: 56ch; font-size: 1.0625rem; }
.sg-empty__eg { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.sg-empty__copy { display: grid; gap: 12px; justify-items: start; }

/* Progress */
.sg-progwrap { display: grid; gap: 24px; }
.sg-prog { display: grid; gap: 18px; padding: 28px; border-radius: var(--sg-r3); border: 1px solid var(--sg-border-strong); background: radial-gradient(100% 140% at 100% 0%, rgba(91,75,240,.2), transparent 55%), var(--sg-surface); box-shadow: var(--sg-shadow); }
.sg-prog__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.sg-prog__title { font-size: var(--fs-h2); line-height: 1.2; }
.sg-prog__clock { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px; background: var(--sg-neutral-bg); font-weight: 600; color: var(--sg-text-2); white-space: nowrap; }
.sg-prog__bar { height: 6px; border-radius: 99px; background: rgba(255,255,255,.12); overflow: hidden; }
.sg-prog__fill { display: block; height: 100%; width: var(--p, 4%); min-width: 4%; border-radius: inherit; background: linear-gradient(90deg, var(--sg-ramp-4), var(--sg-ramp-6)); transition: width .6s ease; }
.sg-stepper { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; counter-reset: none; }
.sg-step { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; position: relative; color: var(--sg-muted); font-size: .875rem; font-weight: 600; }
.sg-step__dot { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--sg-border-strong); font-size: var(--fs-xs); font-weight: 700; background: var(--sg-bg); }
.sg-step__dot .sg-icon { display: none; }
.sg-step.is-done { color: var(--sg-text-2); }
.sg-step.is-done .sg-step__dot { background: var(--sg-ramp-3); border-color: var(--sg-ramp-3); color: #fff; }
.sg-step.is-done .sg-step__dot .sg-icon { display: block; } .sg-step.is-done .sg-step__num { display: none; }
.sg-step.is-current { color: var(--sg-text); }
.sg-step.is-current .sg-step__dot { border-color: var(--sg-accent); color: var(--sg-accent-text); box-shadow: 0 0 0 4px rgba(139,124,255,.22); animation: sg-breathe 1.8s ease-in-out infinite; }
@keyframes sg-breathe { 50% { box-shadow: 0 0 0 7px rgba(139,124,255,.1); } }
.sg-prog__stage { font-family: var(--sg-display); font-size: var(--fs-h3); font-weight: 600; color: var(--sg-text); }
.sg-prog__detail, .sg-prog__counters { color: var(--sg-text-2); }
.sg-prog__note { padding: 10px 14px; border-radius: var(--sg-r1); background: var(--sg-info-bg); border: 1px solid rgba(96,165,250,.4); color: var(--sg-text); font-size: .875rem; }
.sg-prog__foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding-top: 14px; border-top: 1px solid var(--sg-border); }
.sg-prog__leave { display: flex; align-items: center; gap: 8px; color: var(--sg-text-2); font-size: .875rem; }
.sg-prog__leave .sg-icon { color: var(--sg-ok); }
.sg-skeleton { display: grid; gap: 16px; }
.sg-skel-card { display: grid; gap: 12px; padding: 20px; border-radius: var(--sg-r2); border: 1px solid var(--sg-border); background: rgba(255,255,255,.025); }
.sg-skel-gauges { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.sg-skel { display: block; height: 12px; width: var(--w, 100%); border-radius: 6px; background: linear-gradient(90deg, rgba(255,255,255,.07), rgba(255,255,255,.14), rgba(255,255,255,.07)); background-size: 200% 100%; }
.sg-skel.is-eyebrow { height: 9px; } .sg-skel.is-num { height: 26px; } .sg-skel.is-bar { height: 6px; } .sg-skel.is-row { height: 36px; border-radius: 8px; }

/* Failure / cancelled / dead link / boot error */
.sg-fail { display: flex; gap: 20px; padding: 28px; border-radius: var(--sg-r3); border: 1px solid rgba(248,113,113,.5); background: linear-gradient(180deg, rgba(248,113,113,.1), transparent 60%), var(--sg-surface); }
.sg-fail.is-neutral { border-color: var(--sg-border-strong); background: var(--sg-surface); }
.sg-fail__icon { display: grid; place-items: center; width: 48px; height: 48px; flex: none; border-radius: 12px; background: var(--sg-bad-bg); color: var(--sg-bad); }
.sg-fail.is-neutral .sg-fail__icon { background: var(--sg-neutral-bg); color: var(--sg-text-2); }
.sg-fail__main { display: grid; gap: 10px; min-width: 0; justify-items: start; }
.sg-fail__title { font-size: var(--fs-h2); line-height: 1.2; }
.sg-fail__msg { color: var(--sg-text-2); max-width: 62ch; }
.sg-fail__credit { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; background: var(--sg-neutral-bg); font-weight: 600; font-size: .875rem; }
.sg-fail__credit.is-ok { background: var(--sg-ok-bg); color: var(--sg-ok); }
.sg-fail__k { font-weight: 700; margin-bottom: 4px; }
.sg-fail__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 6px; }

@media (min-width: 1280px) { .sg-app { padding-inline: 2rem; } } /* the site nav switches to 2rem side padding at 1280: keep one left edge (V-22r) */
@media (max-width: 1100px) {
  .sg-layout { grid-template-columns: minmax(0, 1fr); }
  .sg-rail { display: none; }
  .sg-bar__reports { display: inline-flex; }
}
@media (max-width: 700px) {
  .sg-app { padding: 0 16px 120px; }
  .sg-bar { padding: 16px 0 14px; margin-bottom: 16px; }
  .sg-bar__id { width: 100%; }
  .sg-meter { width: 100%; min-width: 0; order: 3; }
  .sg-bar__actions { width: 100%; }
  .sg-bar__actions .sg-btn--primary { flex: 1; }
  .sg-bar__cmd .sg-kbd, .sg-bar__cmdtxt { display: none; }
  .sg-compcard, .sg-prog, .sg-fail, .sg-empty { padding: 20px 16px; }
  .sg-composer__submit { width: 100%; min-width: 0; }
  .sg-composer :is(input, textarea, select, button, [tabindex], .sg-field, summary) { scroll-margin-bottom: 150px; }
  /* V6-02: the action bar is sticky while the form is in the bar zone. A sticky box is clamped to its containing block (the form), so while the
     form's top is still below `viewport - bar height` the bar would sit at the form's top edge, hang off the viewport and cover the start of the
     form; composer.js adds .is-unstuck in that state (position: static) and nudges a focused control clear of the bar on focusin. */
  .sg-composer { display: flex; flex-direction: column; }
  .sg-composer > * { min-width: 0; }
  /* composer.js moves the bar beside .sg-composer__slot (a direct child of the canvas) on phones; the canvas is a flex column here because a
     sticky grid item is confined to its own grid area and could never reach the viewport bottom. */
  .sg-canvas--composer { display: flex; flex-direction: column; gap: 24px; }
  .sg-canvas--composer > * { min-width: 0; }
  /* V7-02: the bar is OPAQUE (the usage line and the button sit on solid page colour, so nothing scrolling beneath can show through
     them); the fade into the content above is a ::before band ABOVE the bar's box, never behind its text, and it takes no taps. */
  .sg-composer__foot { justify-items: stretch; position: sticky; bottom: 0; padding: 12px 0 calc(12px + env(safe-area-inset-bottom)); background: var(--bg-primary); z-index: 5; }
  .sg-composer__foot::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 16px; background: linear-gradient(180deg, rgba(13,12,29,0), var(--bg-primary)); pointer-events: none; }
  .sg-composer__foot.is-unstuck::before { display: none; }
  /* V7-02: on a phone the composer's action bar already says "N of M analyses left" next to the button it qualifies; the app bar's meter
     said the same thing a few hundred pixels above (both on one 375x667 screen), so it steps aside while the composer is open. */
  .sg-page:has(.sg-canvas--composer) .sg-meter { display: none; }
  .sg-canvas--composer > .sg-composer__foot { margin-top: -24px; }   /* the bar's natural place is right under the card, not a gap below it */
  .sg-composer__foot.is-unstuck { position: static; }
  .sg-stepper { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 2px; }
  .sg-step { align-items: center; font-size: var(--fs-xs); text-align: center; }
  .sg-skel-gauges { grid-template-columns: 1fr 1fr; }
  .sg-fail { flex-direction: column; }
  .sg-prog__head { flex-direction: column; }
  .sg-prog__foot { flex-direction: column; align-items: stretch; } .sg-prog__cancel { width: 100%; }
}
@media (prefers-reduced-motion: no-preference) {
  .sg-skel { animation: sg-shimmer 1.4s linear infinite; }
  @keyframes sg-shimmer { to { background-position: -200% 0; } }
}
@media (prefers-reduced-motion: reduce) { .sg-step.is-current .sg-step__dot { animation: none; } .sg-prog__fill, .sg-meter__fill { transition: none; } }

/* Grid children may shrink below their content (wide tables scroll inside their own region). */
.sg-canvas { grid-template-columns: minmax(0, 1fr); }
.sg-canvas > *, .sg-report, .sg-report__body, .sg-report__body > *, .sg-sec__body > * { min-width: 0; }