/* App shell layout (#459 #494, Mission Control, Oct 16 directive). The frame is the shared .sg-shell grid from sg-components.css, re-pointed here
   to: top navigation and command bar over the main workspace (about 65%) and the Maya cockpit (about 35%). This file adds what the shell owns:
   the top navigation, the command bar and its time controls, state tags, Agency Pulse, the mission card, the cockpit, the Maya panel as a
   drawer and a full-screen phone page, the More sheet and the Home composition helpers. Semantic --sg-* tokens only: no hex, no raw brand value.
   Tokens another helper may still be adding (--sg-glass, --sg-live, --sg-pulse) are always used with a fallback to a token that exists. */
html { background: var(--sg-bg); color: var(--sg-text); font-family: var(--sg-font-body); }
a:focus-visible, button:focus-visible, [tabindex]:focus-visible { outline: none; box-shadow: var(--sg-focus-ring); }
.sgx-main { min-width: 0; outline: none; }
.sgx-main:focus-visible { box-shadow: none; }

/* ---------- frame: top navigation and command bar over the workspace and the cockpit ---------- */
.sg-shell.sgx-app { --sgx-top-h: 120px; grid-template-columns: minmax(0, 1fr); grid-template-areas: "top" "main"; }
.sgx-top { position: sticky; top: 0; z-index: var(--sg-z-nav); }
.sgx-navbar { min-height: 56px; padding: 0 var(--sg-space-5); gap: var(--sg-space-4); border-bottom: 1px solid var(--sg-border); }
.sgx-brand { display: inline-flex; align-items: center; gap: var(--sg-space-3); flex: none; color: var(--sg-text); text-decoration: none; min-height: var(--sg-tap); }
.sgx-brand__mark { display: grid; place-items: center; width: 34px; height: 34px; border-radius: var(--sg-radius-m); border: 1px solid var(--sg-gold); color: var(--sg-gold); font-family: var(--sg-font-display); font-size: var(--sg-fs-m); letter-spacing: 0.02em; }
.sgx-brand__text { display: flex; flex-direction: column; line-height: 1.15; }
.sgx-brand__text strong { font-family: var(--sg-font-display); font-weight: var(--sg-fw-regular); font-size: var(--sg-fs-m); }
.sgx-brand__text small { font-size: var(--sg-fs-xs); letter-spacing: var(--sg-tracking-label); text-transform: uppercase; color: var(--sg-gold-text); }
.sgx-topnav { display: flex; align-items: stretch; gap: 2px; min-width: 0; align-self: stretch; overflow-x: auto; scrollbar-width: none; }
.sgx-topnav::-webkit-scrollbar { display: none; }
.sgx-topnav__item { position: relative; display: inline-flex; align-items: center; gap: var(--sg-space-2); padding: 0 var(--sg-space-3); color: var(--sg-text-muted); text-decoration: none; font: var(--sg-fw-semibold) var(--sg-fs-s) var(--sg-font-body); white-space: nowrap; border-bottom: 3px solid transparent; }
.sgx-topnav__item:hover { color: var(--sg-text); background: var(--sg-accent-soft); }
.sgx-topnav__item[aria-current="page"] { color: var(--sg-text); border-bottom-color: var(--sg-gold); background: var(--sg-accent-soft); }
.sgx-topnav__item .sg-count { position: static; margin-left: 2px; }
.sgx-topnav__item .sg-icon { width: 1.05rem; height: 1.05rem; }
.sgx-topnav__short { display: inline; }
.sgx-topnav__long { display: none; }
@media (max-width: 1279px) { .sgx-topnav__item .sg-icon { display: none; } .sgx-brand__text, .sgx-navbar .sg-topbar__attention span:not(.sg-count) { display: none; } .sgx-topnav__item { padding: 0 var(--sg-space-2); } }
@media (min-width: 1400px) { .sgx-topnav__short { display: none; } .sgx-topnav__long { display: inline; } }
/* Oct 16 integration test: all seven items must fit beside the right-hand buttons. Below 1600px the Needs you and Maya panel buttons show
   their icon only (the panel label stays readable to screen readers), which frees about 200px so Operations is never clipped. */
@media (max-width: 1599px) {
  .sgx-navbar .sg-topbar__attention span:not(.sg-count) { display: none; }
  .sgx-paneltoggle .sgx-toggle-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
.sg-count[hidden] { display: none; }
.sg-topbar__title { flex: none; }
.sgx-paneltoggle { flex: none; display: none; }
.sgx-askmaya { flex: none; }
@media (min-width: 1280px) { .sgx-paneltoggle { display: inline-flex; } .sgx-askmaya { display: none; } }

/* ---------- command bar: time, freshness, connection, refresh, reviewer ---------- */
.sgx-command { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--sg-space-2) var(--sg-space-5); padding: var(--sg-space-2) var(--sg-space-5); background: var(--sg-glass, var(--sg-surface)); border-bottom: 1px solid var(--sg-border); color: var(--sg-text);
  box-shadow: 0 1px 0 0 color-mix(in srgb, var(--sg-live, var(--sg-info)) 22%, transparent); }
.sgx-command__time { display: flex; min-width: 0; }
.sgx-time { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--sg-space-2) var(--sg-space-4); }
.sgx-field { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sgx-field__label, .sgx-status__label { font: var(--sg-fw-bold) 0.6875rem var(--sg-font-body); letter-spacing: var(--sg-tracking-label); text-transform: uppercase; color: var(--sg-text-muted); }
.sgx-stepper { display: inline-flex; align-items: stretch; min-width: 0; }
.sgx-select { min-height: 40px; min-width: 0; max-width: 100%; padding: 0 var(--sg-space-3); border: 1px solid var(--sg-border-strong); border-radius: var(--sg-radius-m); background: var(--sg-surface-2); color: var(--sg-text); font: var(--sg-fw-semibold) var(--sg-fs-s) var(--sg-font-body); }
.sgx-stepper .sgx-select { border-radius: 0; border-left: 0; border-right: 0; min-width: 11.5rem; }
.sgx-step { min-width: 40px; min-height: 40px; display: inline-grid; place-items: center; border: 1px solid var(--sg-border-strong); background: var(--sg-surface-2); color: var(--sg-text); font: var(--sg-fw-bold) var(--sg-fs-l) var(--sg-font-body); cursor: pointer; }
.sgx-step:first-child { border-radius: var(--sg-radius-m) 0 0 var(--sg-radius-m); }
.sgx-step:last-child { border-radius: 0 var(--sg-radius-m) var(--sg-radius-m) 0; }
.sgx-step:hover:not(:disabled) { background: var(--sg-accent-soft); }
.sgx-step:disabled, .sgx-seg__btn:disabled, .sgx-select:disabled { opacity: 0.55; cursor: not-allowed; }
.sgx-seg { display: inline-flex; border: 1px solid var(--sg-border-strong); border-radius: var(--sg-radius-m); overflow: hidden; background: var(--sg-surface-2); }
.sgx-seg__btn { min-height: 38px; padding: 0 var(--sg-space-3); border: 0; border-right: 1px solid var(--sg-border); background: transparent; color: var(--sg-text-muted); font: var(--sg-fw-semibold) var(--sg-fs-s) var(--sg-font-body); cursor: pointer; white-space: nowrap; }
.sgx-seg__btn:last-child { border-right: 0; }
.sgx-seg__btn:hover:not(:disabled) { color: var(--sg-text); background: var(--sg-accent-soft); }
.sgx-seg__btn[aria-pressed="true"] { color: var(--sg-text); background: var(--sg-accent-soft); box-shadow: inset 0 -3px 0 var(--sg-live, var(--sg-info)); }
.sgx-seg__btn:disabled { text-decoration: line-through; text-decoration-color: var(--sg-border-strong); }
.sgx-seg__short { display: none; }
.sgx-command__status { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--sg-space-2) var(--sg-space-4); }
.sgx-status { display: inline-flex; flex-direction: column; gap: 2px; min-width: 0; }
.sgx-status__text { font-size: var(--sg-fs-s); color: var(--sg-text); }
.sgx-status > .sgx-state, .sgx-status > .sgx-status__text { align-self: flex-start; }
.sgx-refresh { min-height: 36px; padding: 0 var(--sg-space-3); margin-left: auto; border-radius: 999px; gap: 6px; font-size: var(--sg-fs-s); }   /* Oct 16: refresh sits at the end of the status row, labelled */
.sgx-refresh[data-busy="true"] .sg-icon { animation: sgx-spin 0.9s linear infinite; }
.sgx-who { display: inline-flex; align-items: center; gap: var(--sg-space-2); }
.sgx-who__text { display: flex; flex-direction: column; line-height: 1.2; font-size: var(--sg-fs-s); }
.sgx-who__text small { font-size: var(--sg-fs-xs); color: var(--sg-text-muted); }
@keyframes sgx-spin { to { transform: rotate(360deg); } }
@media (max-width: 1279px) { .sgx-seg__long { display: none; } .sgx-seg__short { display: inline; } .sgx-who__text { display: none; } }
/* Oct 16 alignment pass (#482): one command row, every control's bottom edge on the same line, one gap. Data and Agency are compact pills at the
   right end; disabled period options stay compact; only the three pickers wrap, and only below about 900px. The main content always starts
   below the sticky top bars (html scroll padding uses the measured --sgx-top-h). */
html { scroll-padding-top: var(--sgx-top-h, 120px); }
.sgx-main [id] { scroll-margin-top: var(--sgx-top-h, 120px); }
.sgx-top { isolation: isolate; }
.sgx-command { flex-wrap: nowrap; align-items: flex-end; gap: var(--sg-space-3); }
.sgx-command__time { flex: 1 1 auto; }
.sgx-time { flex-wrap: nowrap; align-items: flex-end; gap: var(--sg-space-3); }
.sgx-command__status { flex: none; flex-wrap: nowrap; align-items: flex-end; gap: var(--sg-space-2); margin-left: auto; }
.sgx-status { flex-direction: row; align-items: center; gap: 6px; min-height: 38px; padding: 0 var(--sg-space-3); border: 1px solid var(--sg-border); border-radius: var(--sg-radius-pill); background: var(--sg-surface-2); white-space: nowrap; }
.sgx-status > .sgx-state, .sgx-status > .sgx-status__text { align-self: center; }
.sgx-status .sgx-state { border: 0; background: transparent; padding: 0; }
.sgx-refresh { margin-left: 0; min-height: 38px; }
.sgx-seg { flex-wrap: nowrap; }
.sgx-seg__btn { flex: none; }
.sgx-seg__btn:disabled { flex: 0 0 auto; padding: 0 var(--sg-space-2); font-size: var(--sg-fs-xs); max-width: 7.5rem; overflow: hidden; text-overflow: ellipsis; }
.sgx-navbar .sgx-who { flex: none; }
/* Oct 16 2:45 PM (Roman: "overlaps on nav"): controls never shrink under their own text and never slide under the Data pill.
   When the row is too narrow, the status pills wrap to a second line instead of overlapping. */
.sgx-command { flex-wrap: wrap; row-gap: var(--sg-space-2); }
.sgx-command__time { flex: 0 1 auto; min-width: 0; }
.sgx-time { flex-wrap: wrap; row-gap: var(--sg-space-2); }
.sgx-time > .sgx-field { flex: none; }
.sgx-stepper .sgx-select { width: auto; min-width: 16rem; }
.sgx-command__status { flex: none; }
@media (max-width: 900px) {
  .sgx-command { flex-wrap: wrap; }
  .sgx-time { flex-wrap: wrap; }
  .sgx-command__time { flex-basis: 100%; }
}

/* ---------- state tags: a dot and a word, never colour alone ---------- */
.sgx-state { display: inline-flex; align-items: center; gap: 6px; padding: 1px var(--sg-space-2); border: 1px solid var(--sg-border); border-radius: var(--sg-radius-pill); background: var(--sg-surface-2); color: var(--sg-text); font: var(--sg-fw-semibold) var(--sg-fs-xs) var(--sg-font-body); white-space: nowrap; }
.sgx-state__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--sg-text-muted); flex: none; }
.sgx-state[data-state="live"] .sgx-state__dot { background: var(--sg-live, var(--sg-info)); box-shadow: 0 0 6px var(--sg-live, var(--sg-info)); }
.sgx-state[data-state="verified"] .sgx-state__dot { background: var(--sg-success); }
.sgx-state[data-state="scheduled"] .sgx-state__dot { background: var(--sg-info); }
.sgx-state[data-state="progress"] .sgx-state__dot { background: var(--sg-info); }
.sgx-state[data-state="pending"] .sgx-state__dot, .sgx-state[data-state="stale"] .sgx-state__dot { background: var(--sg-warning); }
.sgx-state[data-state="failed"] .sgx-state__dot { background: var(--sg-danger); }
.sgx-state[data-state="historical"], .sgx-state[data-state="unavailable"] { border-style: dashed; }
.sg-badge--historical { color: var(--sg-text); background: var(--sg-neutral-soft); border-style: dashed; }

/* ---------- Maya panel: one element, three presentations ---------- */
.sgx-panel { padding: 0; overflow: hidden; display: flex; flex-direction: column; background: var(--sg-glass, var(--sg-surface)); }
.sgx-panel__bar { display: none; align-items: center; gap: var(--sg-space-2); min-height: var(--sg-topbar-h); padding: 0 var(--sg-space-3); background: var(--sg-surface); border-bottom: 1px solid var(--sg-border); }
.sgx-panel__name { font-family: var(--sg-font-display); font-size: var(--sg-fs-l); }
.sgx-panel__body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }   /* chat.js adds .sgc-root to this element itself */
.sgx-panel__body.sgc-root { flex: 1 1 auto; max-width: none; height: auto; min-height: 0; position: static; transform: none; width: 100%; border-radius: 0; box-shadow: none; z-index: auto; }
@media (max-width: 600px) { .sgx-panel__body.sgc-root { max-width: none; height: auto; border-top: 0; } }
.sgx-pad { padding: var(--sg-space-4); }

/* 1280 and up: the cockpit is docked on the right at about 35%, collapsible with the top bar toggle (the grid reads data-panel on .sg-shell) */
@media (min-width: 1280px) {
  .sg-shell.sgx-app[data-panel="open"] { grid-template-columns: minmax(0, 65fr) minmax(360px, 35fr); grid-template-areas: "top top" "main panel"; }
  .sg-shell.sgx-app[data-panel="closed"] { grid-template-columns: minmax(0, 1fr); grid-template-areas: "top" "main"; }
  .sgx-panel { position: sticky; top: var(--sgx-top-h); height: calc(100vh - var(--sgx-top-h)); border-left: 1px solid var(--sg-border); }
  .sgx-panel[data-open="false"] { display: none; }
}

/* 1279 and below: the cockpit is a drawer from the right (a full screen page on a phone) */
@media (max-width: 1279px) {
  .sgx-panel { display: flex; position: fixed; top: 0; right: 0; bottom: 0; left: auto; width: min(420px, 100vw); height: auto; z-index: var(--sg-z-drawer);
    background: var(--sg-surface); border-left: 1px solid var(--sg-border); box-shadow: var(--sg-shadow-2);
    transform: translateX(100%); visibility: hidden; transition: transform 0.2s ease, visibility 0s linear 0.2s; }
  .sgx-panel[data-open="true"] { transform: none; visibility: visible; transition: transform 0.2s ease; }
  .sgx-panel__bar { display: flex; }
  /* the page bar above carries Back, so the chat's own Close would be a second way out */
  #sg-conversation-panel .sgc-close { display: none; }
}

/* Phone: Maya is a full-screen page with a clear way back; the composer stays at the bottom of the visible viewport */
@media (max-width: 760px) {
  .sgx-panel { inset: 0; width: 100vw; height: 100vh; height: 100dvh; border-left: 0; box-shadow: none; z-index: var(--sg-z-viewer); }
  .sgx-panel__bar { padding-top: env(safe-area-inset-top, 0px); }
  .sgx-panel[data-open="true"] ~ .sgx-scrim { display: none; }
}

/* ---------- scrim (tablet drawer and the phone More sheet) ---------- */
.sgx-scrim { position: fixed; inset: 0; background: var(--sg-scrim); z-index: calc(var(--sg-z-drawer) - 1); }
.sgx-scrim[hidden] { display: none; }
.sgx-scrim[data-for="more"] { z-index: calc(var(--sg-z-sheet) - 1); }

/* ---------- phone bottom nav (the shared .sg-bottomnav): buttons must look like the links ---------- */
.sgx-tabbar .sg-bottomnav__item { font-family: var(--sg-font-body); }
.sgx-tabbar .sg-bottomnav__item[aria-expanded="true"] { color: var(--sg-text); box-shadow: inset 0 3px 0 var(--sg-gold); }

/* ---------- More sheet ---------- */
.sgx-more { max-height: 80vh; }
.sgx-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sg-space-2); }
.sgx-list li { display: flex; flex-wrap: wrap; gap: var(--sg-space-2); align-items: center; justify-content: space-between; }
.sgx-list--tight { gap: var(--sg-space-1); font-size: var(--sg-fs-s); }
.sgx-more .sgx-list { margin-bottom: var(--sg-space-4); }
.sgx-more .sgx-list li { display: block; }
.sgx-morelink { display: flex; align-items: center; gap: var(--sg-space-3); min-height: var(--sg-tap); padding: var(--sg-space-2) var(--sg-space-3); border-radius: var(--sg-radius-m); border: 1px solid var(--sg-border); color: var(--sg-text); text-decoration: none; }
.sgx-morelink[aria-current="page"] { background: var(--sg-accent-soft); box-shadow: inset 3px 0 0 var(--sg-gold); }
.sgx-morelink small { display: block; font-size: var(--sg-fs-xs); }

/* ---------- Home composition ---------- */
.sgx-home { gap: var(--sg-space-6); }
.sgx-section { min-width: 0; }
.sgx-lead { margin: 0 0 var(--sg-space-3); font-size: var(--sg-fs-l); line-height: var(--sg-lh-body); max-width: var(--sg-measure); }
.sgx-note { margin: 0; font-size: var(--sg-fs-s); line-height: var(--sg-lh-body); color: var(--sg-text); }
.sgx-quiet { background: var(--sg-surface-2); }
.sgx-quiet .sg-section__head { margin-bottom: var(--sg-space-2); }
.sgx-rank { font-family: var(--sg-font-mono); color: var(--sg-link); }
a.sgx-link, .sg-section__head a, .sgx-list a { color: var(--sg-link); }
.sg-section__head a.sg-btn, .sgx-list a.sg-btn { color: var(--sg-text); }
.sg-metric--link .sg-metric__label { margin: 0; }
.sg-metric .sg-btn--ghost { min-height: var(--sg-tap); padding: 0 var(--sg-space-3); }
.sg-hero .sg-hero__sentence { margin-bottom: var(--sg-space-3); }
.sg-media--row .sg-media__frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sg-details > p { margin: 0; padding: 0 var(--sg-space-3) var(--sg-space-3); }
.sg-stack--tight { gap: var(--sg-space-3); }

/* ---------- Home hero photo (#459 #470): the real media behind the briefing, navy scrim keeps text AA ---------- */
.sg-hero--photo > *:not(.sg-hero__photo) { position: relative; z-index: 1; }
.sg-hero__photo { position: absolute; inset: 0; z-index: 0; }
.sg-hero__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sg-hero__photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, color-mix(in srgb, var(--sg-bg) 96%, transparent) 0%, color-mix(in srgb, var(--sg-bg) 86%, transparent) 45%, color-mix(in srgb, var(--sg-bg) 50%, transparent) 100%); }

/* ---------- Home: the mission workspace ---------- */
.sgx-home { container-type: inline-size; container-name: home; }
.sgx-missioncard { grid-template-columns: minmax(0, 1fr); gap: var(--sg-space-5); background: var(--sg-glass, var(--sg-surface)); box-shadow: var(--sg-shadow-soft), 0 0 40px -18px var(--sg-glow, var(--sg-border)); }
.sgx-mission__main, .sgx-mission__moves { display: flex; flex-direction: column; gap: var(--sg-space-3); min-width: 0; }
.sgx-mission__title { font-size: var(--sg-fs-3xl); margin: 0; }
.sgx-mission__line { margin: 0; font-size: var(--sg-fs-m); color: var(--sg-text-muted); }
.sgx-outcomes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sg-space-3); }
.sgx-outcome { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: var(--sg-space-3); border: 1px solid var(--sg-border); border-radius: var(--sg-radius-l); background: color-mix(in srgb, var(--sg-surface-2) 70%, transparent); }
.sgx-outcome__label { font: var(--sg-fw-semibold) var(--sg-fs-xs) var(--sg-font-body); color: var(--sg-text-muted); }
.sgx-outcome__value { font-family: var(--sg-font-display); font-weight: var(--sg-fw-regular); font-size: var(--sg-fs-2xl); line-height: var(--sg-lh-tight); font-variant-numeric: tabular-nums; }
.sgx-outcome__value--null { font-size: var(--sg-fs-l); color: var(--sg-text-muted); }
.sgx-outcome__window { font-size: var(--sg-fs-xs); color: var(--sg-text-muted); }
.sgx-outcome .sg-change { font-size: var(--sg-fs-xs); }
.sgx-target { margin: 0; }
.sgx-read { display: flex; flex-direction: column; gap: var(--sg-space-2); padding-left: var(--sg-space-4); border-left: 3px solid var(--sg-live, var(--sg-info)); }
.sgx-read .sg-eyebrow { margin: 0; }
.sgx-read .sgx-lead { margin: 0; font-size: var(--sg-fs-l); }
.sgx-context { margin: 0; color: var(--sg-text-muted); }
.sgx-moves { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sg-space-3); }
.sgx-move { display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: var(--sg-space-3); padding: var(--sg-space-3); border: 1px solid var(--sg-border); border-radius: var(--sg-radius-l); background: color-mix(in srgb, var(--sg-surface-2) 62%, transparent); }
.sgx-move[data-primary="true"] { border-color: var(--sg-live, var(--sg-info)); box-shadow: 0 0 28px -14px var(--sg-glow, var(--sg-border)); }
.sgx-move__rank { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; border: 1px solid var(--sg-border-strong); font: var(--sg-fw-bold) var(--sg-fs-s) var(--sg-font-mono); color: var(--sg-text); }
.sgx-move__body { display: flex; flex-direction: column; gap: var(--sg-space-2); min-width: 0; }
.sgx-move__body strong { font-size: var(--sg-fs-m); line-height: var(--sg-lh-snug); }
.sgx-move__body p { margin: 0; }
.sgx-behind { margin: 0; }
@container home (min-width: 700px) { .sgx-missioncard { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); } }
@container home (max-width: 520px) { .sgx-outcomes { grid-template-columns: minmax(0, 1fr); } .sgx-mission__title { font-size: var(--sg-fs-2xl); } }

.sgx-metrics__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: var(--sg-space-4); }
.sgx-metrics > .sg-banner { margin-bottom: var(--sg-space-3); }
.sgx-metrics > .sg-source { margin-top: var(--sg-space-3); }
.sgx-metric .sg-metric__value { font-size: var(--sg-fs-2xl); }
.sgx-metric .sg-change { font-size: var(--sg-fs-s); }

/* Agency Pulse: five source-backed groups. A dot flashes ONCE, only for an item that was not there at the last read. */
.sgx-pulse { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: var(--sg-space-4); }
.sgx-pulse__group { display: flex; flex-direction: column; gap: var(--sg-space-2); min-width: 0; padding: var(--sg-space-4); border: 1px solid var(--sg-border); border-radius: var(--sg-radius-l); background: var(--sg-glass, var(--sg-surface)); box-shadow: var(--sg-shadow-soft); }
.sgx-pulse__label { margin: 0; font: var(--sg-fw-bold) var(--sg-fs-xs) var(--sg-font-body); letter-spacing: var(--sg-tracking-label); text-transform: uppercase; color: var(--sg-gold-text); }
.sgx-pulse__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sg-space-3); }
.sgx-pulse__item { display: grid; grid-template-columns: 12px minmax(0, 1fr); gap: var(--sg-space-3); padding: var(--sg-space-1) 0; border-radius: var(--sg-radius-m); }
.sgx-pulse__dot { width: 10px; height: 10px; margin-top: 5px; border-radius: 50%; background: var(--sg-text-muted); }
.sgx-pulse__item[data-state="live"] .sgx-pulse__dot { background: var(--sg-live, var(--sg-info)); }
.sgx-pulse__item[data-state="verified"] .sgx-pulse__dot { background: var(--sg-success); }
.sgx-pulse__item[data-state="scheduled"] .sgx-pulse__dot, .sgx-pulse__item[data-state="progress"] .sgx-pulse__dot { background: var(--sg-info); }
.sgx-pulse__item[data-state="pending"] .sgx-pulse__dot, .sgx-pulse__item[data-state="stale"] .sgx-pulse__dot { background: var(--sg-warning); }
.sgx-pulse__item[data-state="failed"] .sgx-pulse__dot { background: var(--sg-danger); }
.sgx-pulse__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.sgx-pulse__title { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--sg-space-2); font-weight: var(--sg-fw-semibold); font-size: var(--sg-fs-s); line-height: var(--sg-lh-snug); }
.sgx-pulse__new { padding: 0 var(--sg-space-2); border-radius: var(--sg-radius-pill); border: 1px solid var(--sg-live, var(--sg-info)); color: var(--sg-text); font: var(--sg-fw-bold) 0.6875rem var(--sg-font-body); text-transform: uppercase; letter-spacing: var(--sg-tracking-label); }
.sgx-pulse__detail { margin: 0; font-size: var(--sg-fs-s); color: var(--sg-text-muted); overflow-wrap: anywhere; }
.sgx-pulse__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sg-space-3); font-size: var(--sg-fs-xs); }
.sgx-pulse__item[data-new="true"] { animation: sgx-arrive 1.4s var(--sg-ease) 1; }
.sgx-pulse__item[data-new="true"] .sgx-pulse__dot { animation: sgx-ping 1.4s ease-out 1; }
@keyframes sgx-arrive { from { background: color-mix(in srgb, var(--sg-pulse, var(--sg-info)) 22%, transparent); } to { background: transparent; } }
@keyframes sgx-ping { from { box-shadow: 0 0 0 0 var(--sg-pulse, var(--sg-info)); } to { box-shadow: 0 0 0 10px transparent; } }

/* planned creative: one card per day with each slot's real status */
.sgx-plan { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); gap: var(--sg-space-3); }
.sgx-plan__day { display: flex; flex-direction: column; gap: var(--sg-space-2); min-width: 0; }
.sgx-plan__date { margin: 0; font: var(--sg-fw-semibold) var(--sg-fs-m) var(--sg-font-body); }
.sgx-plan__slots { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sg-space-2); }
.sgx-plan__slot { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; font-size: var(--sg-fs-s); min-width: 0; }
.sgx-plan__slot a { overflow-wrap: anywhere; }

/* ---------- the Maya cockpit (right panel) ---------- */
.sgx-cockpit { min-height: 0; }
.sgx-cockpit__scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: var(--sg-space-4); padding: var(--sg-space-4); }
.sgx-cockpit__head { display: flex; align-items: center; gap: var(--sg-space-3); }
.sgx-cockpit__avatar { display: inline-flex; border-radius: 50%; padding: 2px; border: 2px solid var(--sg-border-strong); }
.sgx-cockpit__avatar[data-state="live"] { border-color: var(--sg-live, var(--sg-info)); box-shadow: 0 0 18px -4px var(--sg-live, var(--sg-info)); }
.sgx-cockpit__avatar[data-state="stale"] { border-color: var(--sg-warning); }
.sgx-cockpit__avatar[data-state="unavailable"] { border-style: dashed; }
.sgx-cockpit__who { flex: 1; min-width: 0; }
.sgx-cockpit__name { margin: 0; font-family: var(--sg-font-display); font-weight: var(--sg-fw-regular); font-size: var(--sg-fs-xl); }
.sgx-cockpit__who p { margin: 0; }
.sgx-cockpit__avail { margin: 0; }
.sgx-cockpit__sec { display: flex; flex-direction: column; gap: var(--sg-space-2); padding-top: var(--sg-space-3); border-top: 1px solid var(--sg-border); }
.sgx-cockpit__h { margin: 0; font: var(--sg-fw-bold) var(--sg-fs-xs) var(--sg-font-body); letter-spacing: var(--sg-tracking-label); text-transform: uppercase; color: var(--sg-gold-text); }
.sgx-cockpit__read { margin: 0; font-size: var(--sg-fs-m); line-height: var(--sg-lh-body); }
.sgx-cockpit__actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sg-space-2); }
/* Work with Maya: compact glass pill chips in a 2 by 2 grid (#507) */
.sgx-cockpit__actions .sg-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; font-size: var(--sg-fs-s); padding: 0 var(--sg-space-3); text-align: center; border-radius: 999px; border: 1px solid var(--sg-border-lit, var(--sg-border)); background: var(--sg-glass, var(--sg-surface)); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: inherit; transition: box-shadow .2s ease, border-color .2s ease, background .2s ease; }
.sgx-cockpit__actions .sg-btn::before { content: "\2726"; font-size: 12px; color: var(--sg-raw-electric); }
.sgx-cockpit__actions > :nth-child(2)::before { content: "\2192"; }
.sgx-cockpit__actions > :nth-child(3)::before { content: "\25B2"; }
.sgx-cockpit__actions > :nth-child(4)::before { content: "\25C7"; }
.sgx-cockpit__actions .sg-btn:hover, .sgx-cockpit__actions .sg-btn:focus-visible { border-color: var(--sg-raw-electric-soft); background: var(--sg-surface-2); box-shadow: 0 0 14px var(--sg-glow, var(--sg-border)); }
.sgx-cockpit__chips { display: flex; flex-wrap: wrap; gap: var(--sg-space-2); }
.sgx-cockpit__chips .sg-chip { text-align: left; }
/* Oct 16: the conversation started from the Maya panel, shown in the panel (Roman: stay on the page) */
.sgx-panelchat { border: 1px solid var(--sg-border); border-radius: 14px; padding: var(--sg-space-3); background: var(--sg-surface); }
.sgx-panelchat[hidden] { display: none; }
.sgx-panelchat__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sg-space-2); flex-wrap: wrap; }
.sgx-panelchat__log { display: flex; flex-direction: column; gap: var(--sg-space-2); max-height: 50vh; overflow-y: auto; margin-top: var(--sg-space-2); }
.sgx-panelchat__msg { border-radius: 12px; padding: var(--sg-space-2) var(--sg-space-3); font-size: .95rem; line-height: 1.45; overflow-wrap: anywhere; }
.sgx-panelchat__msg--you { align-self: flex-end; max-width: 90%; background: var(--sg-accent-soft); }
.sgx-panelchat__msg--maya { align-self: stretch; background: var(--sg-surface-2); }
.sgx-panelchat__who { display: block; font-size: .75rem; letter-spacing: .04em; text-transform: uppercase; opacity: .7; margin-bottom: 2px; }
.sgx-panelchat__p { margin: 0 0 .4em; }
.sgx-panelchat__p:last-child { margin-bottom: 0; }
.sgx-pulse__list--tight { gap: var(--sg-space-2); }
.sgx-cockpit__full { align-self: flex-start; }
.sgx-cockpit__composer { flex: none; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--sg-space-2); align-items: end; padding: var(--sg-space-3) var(--sg-space-4); padding-bottom: calc(var(--sg-space-3) + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--sg-border); background: var(--sg-surface); }
.sgx-cockpit__input { min-height: 3.25rem; max-height: 8rem; resize: none; }

/* ---------- phone: compact command bar, touch-friendly week and period, Maya from the bottom nav ---------- */
@media (max-width: 760px) {
  .sg-shell.sgx-app { --sgx-top-h: 0px; }
  .sgx-top { position: static; }
  .sgx-navbar { min-height: 52px; padding: 0 var(--sg-space-3); }
  .sgx-topnav { display: none; }
  .sgx-brand__text small { display: none; }
  .sgx-askmaya, .sgx-paneltoggle { display: none; }
  .sgx-command { padding: var(--sg-space-2) var(--sg-space-3); gap: var(--sg-space-2); align-items: stretch; }
  .sgx-command__time, .sgx-time { width: 100%; }
  .sgx-time { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sg-space-2); }
  .sgx-field--week { grid-column: 1 / -1; }
  .sgx-field--week .sgx-stepper { display: grid; grid-template-columns: var(--sg-tap) minmax(0, 1fr) var(--sg-tap); }
  .sgx-field--week .sgx-select, .sgx-field--report .sgx-select { width: 100%; min-width: 0; }
  .sgx-select, .sgx-step { min-height: var(--sg-tap); }
  .sgx-step { min-width: var(--sg-tap); }
  .sgx-seg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sgx-seg__btn { min-height: var(--sg-tap); padding: 0 var(--sg-space-1); }
  .sgx-field--report, .sgx-field--window { width: 100%; min-width: 0; }
  .sgx-seg__btn { font-size: var(--sg-fs-xs); }
  .sgx-command__status { width: 100%; justify-content: space-between; gap: var(--sg-space-2); }
  .sgx-refresh { min-height: var(--sg-tap); }
  .sgx-refresh__label { display: inline; }
  .sgx-who__text { display: none; }
  .sgx-status__text { display: none; }
  .sgx-mission__title { font-size: var(--sg-fs-2xl); }
  .sgx-cockpit__actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sgx-cockpit__composer { padding-bottom: calc(var(--sg-space-3) + env(safe-area-inset-bottom, 0px)); }
}
@media (pointer: coarse) { .sgx-select, .sgx-step, .sgx-seg__btn { min-height: var(--sg-tap); } }

/* ---------- shared simple layout classes the wired views (app-views.js adapters) still use ---------- */
.sgx-stack { display: flex; flex-direction: column; gap: var(--sg-space-4); }
.sgx-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sg-space-2); }
.sgx-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sg-space-3); flex-wrap: wrap; margin-bottom: var(--sg-space-4); }
.sgx-head h1 { font-family: var(--sg-font-display); font-weight: var(--sg-fw-regular); font-size: var(--sg-fs-3xl); margin: 0; }
.sgx-muted { color: var(--sg-text-muted); font-size: var(--sg-fs-s); }
.sgx-chips { display: flex; flex-wrap: wrap; gap: var(--sg-space-2); }

/* ---------- tablet: at most two competing columns, readable cards ---------- */
@media (min-width: 761px) and (max-width: 1279px) {
  .sg-shell__main { padding: var(--sg-space-5); }
  .sg-hero { padding: var(--sg-space-5); }
}

/* ---------- phone: one task-focused surface, a meaningful first viewport, no nested horizontal scroll ---------- */
@media (max-width: 760px) {
  .sg-shell__main { padding-top: var(--sg-space-3); }
  .sgx-home { gap: var(--sg-space-5); }
  .sg-hero { gap: var(--sg-space-4); padding: var(--sg-space-4); }
  .sg-hero__who { gap: var(--sg-space-3); }
  .sg-hero--photo { padding-top: 0; }
  .sg-hero__photo { position: relative; inset: auto; height: 9rem; margin: 0 calc(var(--sg-space-4) * -1); }
  .sg-hero__photo::after { background: linear-gradient(180deg, transparent 55%, color-mix(in srgb, var(--sg-bg) 85%, transparent) 100%); }
  .sg-hero__greeting { font-size: var(--sg-fs-xl); }
  .sg-hero__sentence { font-size: var(--sg-fs-m); }
  .sg-hero__reco-title { font-size: var(--sg-fs-l); }
  .sg-topbar__title { font-size: var(--sg-fs-m); }
  .sg-topbar__date strong { font-size: var(--sg-fs-s); }
  .sg-stages { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sg-media--row { flex-direction: column; }
  .sg-metric__value { font-size: var(--sg-fs-2xl); }
}

@media (prefers-reduced-motion: reduce) {
  .sgx-panel { transition: none; }
  .sgx-pulse__item[data-new="true"], .sgx-pulse__item[data-new="true"] .sgx-pulse__dot, .sgx-refresh[data-busy="true"] .sg-icon { animation: none; }
}

/* Maya's animated avatar (Oct 16): a 28px character in the top bar's Maya button; the cockpit uses the 96px size */
.sgx-paneltoggle .sgx-maya-av .maya-av--sm, .sgx-askmaya .sgx-maya-av .maya-av--sm { --maya-px: 28px; }
.sgx-maya-av { display: inline-flex; line-height: 0; }
.sgx-cockpit__avatar .sgx-maya-av .maya-av--md { --maya-px: 72px; }

/* Oct 16 panel toggle */
.sgx-panel__hide { display: none; margin-left: auto; gap: 4px; align-items: center; }
@media (min-width: 1280px) { .sgx-panel__bar { display: flex; } .sgx-panel__back { display: none; } .sgx-panel__hide { display: inline-flex; } }
.sgx-edge-maya { position: fixed; right: 0; top: 50%; transform: translateY(-50%); z-index: 50; writing-mode: vertical-rl; padding: 14px 6px; border: 1px solid var(--sg-border); border-right: 0; border-radius: 10px 0 0 10px; background: var(--sg-surface); color: inherit; font-weight: 600; cursor: pointer; box-shadow: var(--sg-shadow-2); }
.sgx-edge-maya[hidden] { display: none; }
.sgx-share { flex: none; }
.sgx-update { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 90; }