/* S1 Command Center. Every selector starts with .s1cc; tokens come from s1-tokens.css. Color carries meaning only
 * (late / soon / wait). No inline styles: sizing is by class and grid. Motion: one entrance, one flash per refresh. */

.s1cc { display: block; width: 100%; box-sizing: border-box; padding: 0; background: var(--s1-canvas); color: var(--s1-ink); font: var(--s1-text-base)/1.45 var(--s1-font-ui); min-height: 100%; }
.s1cc-page { gap: 20px; }
.s1cc-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: var(--s1-space-4); }
.s1cc-title { margin: 0; font: 700 var(--s1-title)/1.15 var(--s1-font-display); letter-spacing: -.01em; }
.s1cc-title:focus, .s1cc-title[tabindex]:focus-visible { outline: none !important; }
.s1cc-sub { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1-space-2) var(--s1-space-3); margin-top: 6px; color: var(--s1-mute); font-size: var(--s1-text-small); }
.s1cc-scope { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--s1-ink-2); }
.s1cc-head-actions { display: flex; flex-wrap: wrap; gap: var(--s1-space-2); }
.s1cc-muted { color: var(--s1-mute); font-size: var(--s1-text-small); }
.s1cc-h2 { margin: 0; font: 700 15px/1.3 var(--s1-font-ui); }
.s1cc-count { margin-left: 6px; font-weight: 600; font-size: var(--s1-text-small); color: var(--s1-mute); }
.s1cc-sub-h { margin: 14px 0 6px; font: 700 var(--s1-text-micro)/1.4 var(--s1-font-ui); letter-spacing: .06em; text-transform: uppercase; color: var(--s1-mute); }
.s1cc-link { color: inherit; font-weight: 600; text-decoration: underline; text-decoration-color: var(--s1-line); text-underline-offset: 3px; }
.s1cc-link:hover { text-decoration-color: currentColor; }
.s1cc-link:focus-visible, .s1cc-tool:focus-visible, .s1cc-kpi:focus-visible { outline: 2px solid var(--s1-ink); outline-offset: 2px; border-radius: 6px; }

/* KPI strip: six tiles, each a button that jumps to its section. */
.s1cc-kpis { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--s1-space-3); }
.s1cc-kpi { display: grid; gap: 2px; text-align: left; padding: var(--s1-space-4) var(--s1-space-4) 14px; border: 1px solid var(--s1-line); border-radius: var(--s1-radius-panel); background: var(--s1-panel); color: var(--s1-ink); font: inherit; cursor: pointer; transition: border-color var(--s1-dur-1) var(--s1-ease), transform var(--s1-dur-1) var(--s1-ease); }
.s1cc-kpi:hover { border-color: var(--s1-ink-2); transform: translateY(-1px); }
.s1cc-kpi-value { font: 700 30px/1.1 var(--s1-font-display); font-variant-numeric: tabular-nums; }
.s1cc-kpi-label { font-weight: 700; }
.s1cc-kpi-hint { color: var(--s1-mute); font-size: var(--s1-text-small); }
.s1cc-kpi--late { box-shadow: inset 4px 0 0 var(--s1-late); } .s1cc-kpi--late .s1cc-kpi-value { color: var(--s1-late); }
.s1cc-kpi--soon { box-shadow: inset 4px 0 0 var(--s1-soon); } .s1cc-kpi--soon .s1cc-kpi-value { color: var(--s1-soon); }
.s1cc-kpi--wait { box-shadow: inset 4px 0 0 var(--s1-wait); } .s1cc-kpi--wait .s1cc-kpi-value { color: var(--s1-wait); }

/* Two-column workspace: wide main column, activity rail. Full width, no centered narrow column. */
.s1cc-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 400px); gap: var(--s1-space-5); align-items: start; }
.s1cc-main, .s1cc-rail { display: grid; gap: var(--s1-space-5); min-width: 0; }
.s1cc-rail { position: sticky; top: var(--s1-space-4); max-height: calc(100dvh - 32px); overflow-y: auto; scrollbar-width: thin; }
.s1cc-panel { overflow: hidden; scroll-margin-top: 16px; }
.s1cc-panel:focus, .s1cc-panel[tabindex]:focus-visible { outline: none !important; }
.s1cc-toolbar { padding: var(--s1-space-3) 18px 0; }
.s1cc-tabs { padding-top: 0; border-top: 0; border-bottom: 1px solid var(--s1-line-soft); }

/* Rows: icon, title and meta, trailing state. One pattern for every queue. */
.s1cc-list { list-style: none; margin: 0; padding: 0; }
.s1cc-row { display: flex; align-items: center; gap: var(--s1-space-3); padding: 12px 18px; border-top: 1px solid var(--s1-line-soft); }
.s1cc-list > .s1cc-row:first-child { border-top: 0; }
.s1cc-list--tight .s1cc-row { padding: 10px 18px; }
.s1cc-row--late { box-shadow: inset 4px 0 0 var(--s1-late); }
.s1cc-row--soon { box-shadow: inset 4px 0 0 var(--s1-soon); }
.s1cc-row-icon { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: var(--s1-column); color: var(--s1-ink-2); flex: none; }
.s1cc-row--late .s1cc-row-icon { color: var(--s1-late); } .s1cc-row--soon .s1cc-row-icon { color: var(--s1-soon); }
.s1cc-row-main { display: grid; gap: 2px; min-width: 0; flex: 1 1 auto; }
.s1cc-row-title { font-weight: 700; overflow-wrap: anywhere; }
.s1cc-row-meta { display: flex; flex-wrap: wrap; gap: 0 6px; color: var(--s1-mute); font-size: var(--s1-text-small); }
.s1cc-row-meta i { font-style: normal; opacity: .6; }
.s1cc-row-end { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: var(--s1-space-2); flex: none; }
.s1cc-reasons { display: flex; flex-wrap: wrap; margin-top: 2px; }
.s1cc-metric { display: inline-flex; align-items: center; gap: 4px; font: 700 var(--s1-text-small) var(--s1-font-ui); }
.s1cc-metric--late { color: var(--s1-late); }

.s1cc-empty { display: flex; align-items: center; gap: var(--s1-space-3); margin: 14px 18px; padding: 14px 16px; border: 1.5px dashed var(--s1-line); border-radius: var(--s1-radius-empty); color: var(--s1-mute); }
.s1cc-empty > div { display: grid; gap: 2px; } .s1cc-empty strong { color: var(--s1-ink-2); } .s1cc-empty span { font-size: var(--s1-text-small); }

/* Publication pipeline: four stage columns. */
.s1cc-stages { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s1-space-3); padding: 14px 18px; }
.s1cc-stage { background: var(--s1-column); border: 1px solid var(--s1-line-soft); border-radius: 10px; padding: 10px; min-width: 0; }
.s1cc-stage-head { display: flex; justify-content: space-between; align-items: center; margin: 0 0 8px; font: 700 var(--s1-text-small)/1.45 var(--s1-font-ui); color: var(--s1-ink-2); }
.s1cc-stage-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.s1cc-stage-item { display: grid; background: var(--s1-panel); border: 1px solid var(--s1-line); border-radius: 8px; padding: 8px 10px; font-size: var(--s1-text-small); overflow-wrap: anywhere; }
.s1cc-stage-none { margin: 0; }
.s1cc-goals { padding: 0 18px 14px; display: grid; gap: 6px; }
.s1cc-inline { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 14px; }
.s1cc-webline { margin: 0 18px 16px; }

/* Activity feed */
.s1cc-live { font: 600 var(--s1-text-micro) var(--s1-font-ui); color: var(--s1-mute); display: inline-flex; align-items: center; gap: 6px; }
.s1cc-live::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--s1-ok); }
.s1cc-live.is-flash::before { animation: s1cc-ping var(--s1-dur-3) var(--s1-ease-emph) 1; }
.s1cc-feed { list-style: none; margin: 0; padding: 4px 18px 8px; }
.s1cc-feed-item { display: flex; gap: var(--s1-space-3); padding: 10px 0; border-top: 1px solid var(--s1-line-soft); }
.s1cc-feed-item:first-child { border-top: 0; }
.s1cc-feed-icon { flex: none; display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--s1-column); color: var(--s1-ink-2); }
.s1cc-feed-item > div { display: grid; gap: 1px; min-width: 0; }
.s1cc-feed-text { overflow-wrap: anywhere; }
.s1cc-feed-meta { color: var(--s1-mute); font-size: var(--s1-text-small); display: flex; flex-wrap: wrap; gap: 0 6px; }
.s1cc-feed-meta i { font-style: normal; opacity: .6; }

/* All-tools grid */
.s1cc-tools { display: grid; gap: var(--s1-space-3); }
.s1cc-tool-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: var(--s1-space-3); }
.s1cc-tool { display: flex; align-items: center; gap: var(--s1-space-3); padding: 14px 16px; background: var(--s1-panel); border: 1px solid var(--s1-line); border-radius: var(--s1-radius-panel); color: var(--s1-ink); text-decoration: none; font: inherit; text-align: left; cursor: pointer; transition: border-color var(--s1-dur-1) var(--s1-ease), transform var(--s1-dur-1) var(--s1-ease); }
.s1cc-tool:hover { border-color: var(--s1-ink-2); transform: translateY(-1px); }
.s1cc-tool > span:last-child { display: grid; gap: 1px; min-width: 0; }
.s1cc-tool > span:last-child > span { color: var(--s1-mute); font-size: var(--s1-text-small); }
.s1cc-tool-icon { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--s1-column); flex: none; }

/* Gate, errors, skeleton */
.s1cc-gate { max-width: 560px; margin: 64px auto; display: grid; gap: var(--s1-space-4); padding: 28px; background: var(--s1-panel); border: 1px solid var(--s1-line); border-radius: var(--s1-radius-panel); }
.s1cc-gate p { margin: 0; color: var(--s1-ink-2); }
.s1cc-gate-actions { display: flex; flex-wrap: wrap; gap: var(--s1-space-2); }
.s1cc-skel-row, .s1cc-skel-card { background: linear-gradient(90deg, var(--s1-column), var(--s1-panel-head), var(--s1-column)); border-radius: var(--s1-radius-panel); }
.s1cc-skel-row { height: 96px; }
.s1cc-skel-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: var(--s1-space-5); margin-top: var(--s1-space-5); }
.s1cc-skel-card { height: 360px; }

/* Access dialog: centered modal on every width above phone. */
.s1cc-dialog { width: min(640px, calc(100vw - 32px)); }
.s1cc-dialog:not([open]) { display: none; }
.s1cc-dialog[open] { animation: s1-pop-in var(--s1-dur-3) var(--s1-ease-emph); }
.s1cc-grant-form { display: grid; gap: var(--s1-space-3); border-top: 1px solid var(--s1-line-soft); padding-top: var(--s1-space-3); }
.s1cc-scope-pick { display: grid; gap: 6px; border: 0; margin: 0; padding: 0; }
.s1cc-scope-pick label { display: flex; align-items: center; gap: 8px; }
.s1cc-grant-form .s1-dialog-foot { padding: 0; border: 0; }

/* Primary nav entry */

@media (prefers-reduced-motion: no-preference) {
  .s1cc-page > * { animation: s1-rise-in var(--s1-dur-3) var(--s1-ease-emph) both; }
  .s1cc-page > *:nth-child(2) { animation-delay: 40ms; } .s1cc-page > *:nth-child(3) { animation-delay: 80ms; } .s1cc-page > *:nth-child(4) { animation-delay: 120ms; }
  .s1cc-skel-row, .s1cc-skel-card { background-size: 200% 100%; animation: s1cc-shimmer 1.4s linear 2; }
}
@keyframes s1cc-ping { 0% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.8); opacity: .5; } 100% { transform: scale(1); opacity: 1; } }
@keyframes s1cc-shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }

@media (max-width: 1180px) {
  .s1cc-grid { grid-template-columns: minmax(0, 1fr); }
  .s1cc-rail { position: static; max-height: none; overflow: visible; }
  .s1cc-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .s1cc-stages { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .s1cc { padding: var(--s1-space-4) 16px 96px; }
  .s1cc-title { font-size: var(--s1-title-compact); }
  .s1cc-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .s1cc-kpi-value { font-size: 26px; }
  .s1cc-row { flex-wrap: wrap; }
  .s1cc-row-end { flex: 1 1 100%; justify-content: flex-start; padding-left: 44px; }
  .s1cc-stages { grid-template-columns: minmax(0, 1fr); }
  .s1cc-head-actions .s1-btn { min-height: 44px; }
  .s1cc-skel-grid { grid-template-columns: minmax(0, 1fr); }
  .s1cc-dialog { margin: auto 16px 0; width: auto; }
}

/* The rail is narrow: trailing state wraps under the title instead of clipping. */
.s1cc-rail .s1cc-row { flex-wrap: wrap; }
.s1cc-rail .s1cc-row-end { flex: 1 1 100%; justify-content: flex-start; padding-left: 44px; }
.s1cc-rail .s1cc-row-icon + .s1cc-row-main, .s1cc-rail .s1-avatar + .s1cc-row-main { flex: 1 1 0; }
@media (max-width: 640px) { .s1cc-tabs { flex-wrap: nowrap; overflow-x: auto; padding: 0 8px; } .s1cc-tabs .s1-tab { padding: 10px 8px; white-space: nowrap; } }

/* Kit port: stat tiles, panels, stages, bars. Hue means status only. */
.s1cc-stats { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; }
.s1cc-stats .k-stat { cursor: pointer; transition: border-color var(--s1-dur-1) var(--s1-ease), transform var(--s1-dur-1) var(--s1-ease); }
.s1cc-stats .k-stat:hover { border-color: var(--s1-ink-2); transform: translateY(-1px); }
.s1cc-stats .k-stat:focus-visible { outline: 2px solid var(--s1-ink); outline-offset: 2px; }
.s1cc-grid { grid-template-columns: minmax(0, 1fr) minmax(340px, 420px); gap: 20px; align-items: start; }
.s1cc-main, .s1cc-rail { display: grid; gap: 20px; min-width: 0; align-content: start; }
.s1cc-rail { position: static; max-height: none; overflow: visible; }
.s1cc-tabs { padding: 0 12px; }
.s1cc-sub-h { padding: 0 16px; }
.s1cc-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-top: 6px; color: var(--s1-mute); font-size: 13.5px; }
.s1cc-live { margin-left: 0; }
.s1cc-feed-proj { margin-top: 5px; }
.s1cc-feed-sys { background: var(--s1-ink); color: #fff; }
.s1cc-stages { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.s1cc-stage { background: var(--s1-column); border: 1px solid var(--s1-line-soft); border-radius: 10px; padding: 10px; min-width: 0; display: grid; gap: 8px; align-content: start; }
.s1cc-stage-head { display: flex; align-items: baseline; gap: 8px; margin: 0; font: 650 13px var(--k-font-ui, inherit); color: var(--s1-ink-2); }
.s1cc-stage-n { font: 800 22px/1 var(--k-font-display, inherit); color: var(--s1-ink); font-variant-numeric: tabular-nums; }
.s1cc-stage-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.s1cc-stage-item { display: grid; gap: 2px; background: #fff; border: 1px solid var(--s1-line); border-radius: 8px; padding: 6px 8px; min-width: 0; }
.s1cc-stage-none { margin: 0; }
.s1cc-goals { display: grid; gap: 6px; margin-top: 14px; }
.s1cc-inline { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.s1cc-webline { margin-top: 14px; }
.s1cc-bars, .s1cc-insights { display: grid; gap: 12px; }
.s1cc-bar { display: grid; gap: 6px; font-size: 13px; }
.s1cc-bar-top { display: flex; justify-content: space-between; gap: 8px; color: var(--s1-ink-2); }
.s1cc-bar-top b { color: var(--s1-ink); font-variant-numeric: tabular-nums; }
.s1cc-tools .s1cc-h2 { font: 700 15.5px/1.3 var(--s1-font-display); }
.s1cc-tool-grid { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.s1cc-tool { padding: 10px 12px; }
.s1cc-tool-icon { width: 34px; height: 34px; }
@media (max-width: 1180px) { .s1cc-grid { grid-template-columns: minmax(0, 1fr); } .s1cc-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } .s1cc-stages { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .s1cc-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .s1cc-stages { grid-template-columns: minmax(0, 1fr); } .s1cc-tool-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .s1cc-tool > span:last-child > span { display: none; } .s1cc-rail .s1cc-row, .s1cc-rail .k-row { flex-wrap: initial; } }
.s1cc .s1cc-title:focus, .s1cc .s1cc-title:focus-visible { outline: none !important; box-shadow: none; }
.s1cc-webline .k-callout { flex-wrap: wrap; }
.s1cc .k-empty b { display: block; }
.s1cc-stage-head { justify-content: flex-start; text-align: left; }

/* All tools: topic groups with a finder */
.s1cc-tools-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s1-space-3); }
.s1cc-tool-find { display: flex; align-items: center; gap: 8px; min-width: min(100%, 260px); padding: 0 12px; height: 36px; background: var(--s1-panel); border: 1px solid var(--s1-line); border-radius: var(--s1-radius-control, 10px); color: var(--s1-mute); }
.s1cc-tool-find:focus-within { border-color: var(--s1-ink); }
.s1cc-tool-find input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--s1-ink); font: inherit; outline: none; }
.s1cc-tool-groups { display: grid; gap: var(--s1-space-4); }
.s1cc-toolgroup { display: grid; gap: var(--s1-space-2); }
.s1cc-toolgroup-h { margin: 0; font: inherit; }
.s1cc-toolgroup-btn { display: flex; align-items: center; gap: 8px; width: 100%; padding: 4px 2px; background: none; border: 0; color: var(--s1-ink-2); font: 700 12.5px/1.3 var(--s1-font-ui); letter-spacing: .04em; text-transform: uppercase; text-align: left; cursor: pointer; }
.s1cc-toolgroup-btn:disabled { cursor: default; }
.s1cc-toolgroup-btn:focus-visible { outline: 2px solid var(--s1-ink); outline-offset: 2px; border-radius: 6px; }
.s1cc-toolgroup-n { color: var(--s1-mute); font-weight: 600; font-variant-numeric: tabular-nums; }
.s1cc-toolgroup-chev { margin-left: auto; display: inline-grid; transition: transform var(--s1-dur-1) var(--s1-ease); }
.s1cc-toolgroup-btn[aria-expanded="false"] .s1cc-toolgroup-chev { transform: rotate(-90deg); }
.s1cc-toolgroup-btn:disabled .s1cc-toolgroup-chev { display: none; }
.s1cc-tool-none { margin: 0; padding: var(--s1-space-3) 0; }
@media (max-width: 640px) { .s1cc-tool-find { flex: 1 1 100%; } .s1cc-tool-groups { gap: var(--s1-space-3); } }
.s1cc-serverline { margin: 0; }