/* sf-tabs — the SteelFrame workspace tabs (notes/STEELFRAME-TABS-AND-STRIPE-PLAN.md §2).
   The left column of the page becomes [tab bar] + [stacked panes]: the 3270
   terminal (always rendered, so its cell grid keeps measuring), Studio and
   VS Code as same-origin iframes created on first use and kept alive. */

:root { --sft-h: 34px; --sft-bg: #0a0d0a; --sft-line: #1e2d1e; --sft-fg: #9fbf9f; --sft-dim: #5f7a5f; --sft-green: #33ff33; --sft-hover: #0f160f; --sft-hover-fg: #d6f5d6; --sft-frame: #0b0f0b; }
/* the workspace theme (web/sf-theme.js): neutral, LIGHT by default; only the
   3270 CRT stays green. --sft-green is the accent slot (steel blue now). */
html[data-theme] { --sft-bg: #ffffff; --sft-line: #d9d6cf; --sft-fg: #3d4249; --sft-dim: #5c636b; --sft-green: #2b65a0; --sft-hover: #f1f0ec; --sft-hover-fg: #1d2125; --sft-frame: #f5f5f2; }
html[data-theme="dark"] { --sft-bg: #15191d; --sft-line: #26313c; --sft-fg: #b9c3cd; --sft-dim: #8494a3; --sft-green: #7fb0dd; --sft-hover: #1b232b; --sft-hover-fg: #e6ecf2; --sft-frame: #0f1317; }

/* the column itself: full viewport height, full width of its flex slot */
#sf-left { display: flex; flex-direction: column; align-self: stretch; width: 100%; min-height: 100vh; height: 100vh; flex: 1 1 auto; min-width: 0; }
html.aichat-open #sf-left { width: auto; }

#sf-tabbar {
  flex: 0 0 var(--sft-h); height: var(--sft-h); display: flex; align-items: stretch; gap: 2px;
  background: var(--sft-bg); border-bottom: 1px solid var(--sft-line); padding: 0 8px;
  font: 12.5px/1 -apple-system, "Segoe UI", Helvetica, Arial, sans-serif; color: var(--sft-fg); user-select: none;
}
#sf-tabbar .tab {
  display: flex; align-items: center; gap: 7px; padding: 0 14px; background: transparent; border: 0; border-bottom: 2px solid transparent;
  color: var(--sft-fg); cursor: pointer; font: inherit; white-space: nowrap; position: relative;
}
#sf-tabbar .tab .ico { font-size: 13px; opacity: .85; width: 1.1em; text-align: center; }
#sf-tabbar .tab .short { display: none; }
#sf-tabbar .tab:hover { color: var(--sft-hover-fg); background: var(--sft-hover); }
#sf-tabbar .tab[aria-selected="true"] { color: var(--sft-green); border-bottom-color: var(--sft-green); }
#sf-tabbar .tab:focus-visible { outline: 2px solid var(--sft-green); outline-offset: -3px; }
html[data-theme] #sf-tabbar .tab[aria-selected="true"] { color: var(--sft-hover-fg); font-weight: 600; }
html[data-theme] #sf-tabbar { box-shadow: 0 1px 2px rgba(0, 0, 0, .04); }
#sf-tabbar .tab[disabled] { opacity: .45; cursor: default; }
#sf-tabbar .tab .dot { position: absolute; top: 9px; right: 6px; width: 6px; height: 6px; border-radius: 50%; background: var(--ai-amber, #ffb627); display: none; }
#sf-tabbar .tab.live .dot { display: block; }
#sf-tabbar .sp { flex: 1; }
#sf-tabbar .act { display: none; align-items: center; justify-content: center; width: 30px; background: transparent; border: 0; color: var(--sft-dim); cursor: pointer; font-size: 14px; }
#sf-tabbar .act:hover { color: var(--sft-green); }
#sf-tabbar .act:focus-visible, #sf-tabbar .sf-theme-btn:focus-visible { outline: 2px solid var(--sft-green); outline-offset: -2px; border-radius: 4px; }
/* the light/dark switch (web/sf-theme.js): always shown, before the AI pill */
#sf-tabbar .sf-theme-btn { display: flex; align-items: center; justify-content: center; width: 30px; background: transparent; border: 0; color: var(--sft-dim); cursor: pointer; padding: 0; }
#sf-tabbar .sf-theme-btn:hover { color: var(--sft-green); }
#sf-tabbar.frame .act { display: flex; }
#sf-tabbar .note { display: flex; align-items: center; color: var(--sft-dim); font-size: 11.5px; padding: 0 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 40vw; }

/* the panes: one grid cell, every pane stacked; the inactive ones keep their
   layout box but are neither painted nor focusable */
#sf-panes { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); position: relative; }
.sf-pane { grid-area: 1 / 1; min-width: 0; min-height: 0; visibility: hidden; }
.sf-pane[data-active="true"] { visibility: visible; }
/* the terminal pane is the page as it used to be: centred CRT, key bar, footer */
/* `safe center`: centred when it fits, top-aligned (and scrollable) when the
   CRT + key bar + footer are taller than the pane — never clipped under the bar */
#sf-pane-terminal { display: flex; flex-direction: column; align-items: center; justify-content: safe center; overflow: hidden auto; }
.sf-pane iframe { display: block; width: 100%; height: 100%; border: 0; background: var(--sft-frame); }
.sf-pane .sf-off { display: flex; align-items: center; justify-content: center; height: 100%; color: var(--sft-dim); font: 13px/1.5 -apple-system, "Segoe UI", Helvetica, Arial, sans-serif; text-align: center; padding: 20px; }
.sf-pane .sf-off a { color: var(--sft-green); }

@media (max-width: 1000px) {
  #sf-tabbar .tab { padding: 0 10px; }
  #sf-tabbar .tab .long { display: none; }
  #sf-tabbar .tab .short { display: inline; }
  #sf-tabbar .note { display: none; }
}

/* container VS Code seats: "starting" (amber dot, pulsing) / "busy" (amber dot) */
#sf-tabbar .tab.busy .dot { display: block; }
#sf-tabbar .tab.live[data-seat="starting"] .dot { animation: sft-pulse 1s ease-in-out infinite alternate; }
#sf-tabbar .note[data-seat="starting"] { color: var(--sft-fg); }
#sf-tabbar .note[data-seat="busy"], #sf-tabbar .note[data-seat="quota"], #sf-tabbar .note[data-seat="unavailable"] { color: var(--ai-amber, #ffb627); }
html[data-theme="light"] #sf-tabbar .note[data-seat="busy"], html[data-theme="light"] #sf-tabbar .note[data-seat="quota"], html[data-theme="light"] #sf-tabbar .note[data-seat="unavailable"] { color: #8a5a00; }
@media (prefers-reduced-motion: reduce) { #sf-tabbar .tab.live[data-seat="starting"] .dot { animation: none; } }
@keyframes sft-pulse { from { opacity: .35; } to { opacity: 1; } }

/* the App Preview tab (web/sf-apps.js, notes/SEAT-WEB-APPS-PLAN.md §4): a toolbar, the app at its own origin, the AI overlay */
#sf-pane-apps { display: flex; flex-direction: column; }
#sf-apps { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; background: var(--sft-frame); font: 12.5px/1.4 -apple-system, "Segoe UI", Helvetica, Arial, sans-serif; color: var(--sft-fg); }
#sf-apps .bar { display: flex; align-items: center; gap: 6px; padding: 6px 10px; border-bottom: 1px solid var(--sft-line); background: var(--sft-bg); flex-wrap: wrap; }
#sf-apps .bar .lbl { color: var(--sft-dim); }
#sf-apps select, #sf-apps input, #sf-apps button { font: inherit; color: var(--sft-hover-fg); background: var(--sft-bg); border: 1px solid var(--sft-line); border-radius: 6px; padding: 3px 8px; }
#sf-apps button { cursor: pointer; }
#sf-apps button:hover:not([disabled]) { border-color: var(--sft-green); color: var(--sft-green); }
#sf-apps button[disabled], #sf-apps select[disabled] { opacity: .5; cursor: default; }
#sf-apps button[aria-pressed="true"] { border-color: var(--sft-green); color: var(--sft-green); }
#sf-apps .info { color: var(--sft-dim); padding-left: 4px; }
#sf-apps .sp { flex: 1; }
#sf-apps .msg { color: var(--sft-dim); max-width: 50%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#sf-apps .msg.warn { color: #8a5a00; }
html[data-theme="dark"] #sf-apps .msg.warn { color: var(--ai-amber, #ffb627); }
#sf-apps .form { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 10px; border-bottom: 1px solid var(--sft-line); background: var(--sft-bg); }
#sf-apps .form label { display: flex; align-items: center; gap: 6px; color: var(--sft-dim); }
#sf-apps .form input[name="project"] { width: 240px; }
#sf-apps .form input[name="port"] { width: 90px; }
#sf-apps .form small { color: var(--sft-dim); flex-basis: 100%; }
#sf-apps .banner { display: flex; align-items: center; gap: 8px; padding: 5px 12px; background: #fff4dc; color: #6b4a00; border-bottom: 1px solid #e8c77d; font-weight: 600; }
html[data-theme="dark"] #sf-apps .banner { background: #3a2c0c; color: #ffd27a; border-color: #6b5016; }
#sf-apps .banner .dotai { width: 8px; height: 8px; border-radius: 50%; background: var(--ai-amber, #ffb627); animation: sft-pulse 1s ease-in-out infinite alternate; }
#sf-apps .stage { position: relative; flex: 1 1 auto; min-height: 0; }
#sf-apps .stage iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #fff; }
#sf-apps .empty { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; padding: 24px; color: var(--sft-dim); }
#sf-apps .empty > div { max-width: 520px; }
#sf-apps .empty code { background: var(--sft-hover); padding: 0 4px; border-radius: 4px; }
#sf-apps .ring { position: absolute; border: 3px solid var(--ai-amber, #ffb627); border-radius: 8px; pointer-events: none; box-shadow: 0 0 0 4px rgba(255, 182, 39, .25); }
#sf-apps .ring.pulse { animation: sfa-ring .9s ease-out 1; }
@keyframes sfa-ring { from { transform: scale(1.35); opacity: .2; } to { transform: scale(1); opacity: 1; } }
#sf-apps .logs { flex: 0 0 34%; display: flex; flex-direction: column; border-top: 1px solid var(--sft-line); background: var(--sft-bg); min-height: 0; }
#sf-apps .logs .lh { display: flex; align-items: center; gap: 8px; padding: 4px 10px; color: var(--sft-dim); }
#sf-apps .logs .lh button { margin-left: auto; }
#sf-apps .logs .lh button + button { margin-left: 0; }
#sf-apps .logs pre { flex: 1 1 auto; margin: 0; padding: 6px 10px; overflow: auto; font: 12px/1.35 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--sft-hover-fg); white-space: pre-wrap; }
@media (prefers-reduced-motion: reduce) { #sf-apps .ring.pulse, #sf-apps .banner .dotai { animation: none; } }
/* side by side: the terminal (left) and the App Preview (right) on a wide window */
html.sf-split[data-sf-tab="apps"] #sf-panes { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
html.sf-split[data-sf-tab="apps"] #sf-pane-terminal { grid-area: 1 / 1; visibility: visible; border-right: 1px solid var(--sft-line); }
html.sf-split[data-sf-tab="apps"] #sf-pane-apps { grid-area: 1 / 2; }

/* a site's hidden tabs (server/sites.js hiddenTabs -> <html data-sf-hide-tabs>, codingtutor): their footer links go too
   (with the separator next to them); the default site's page carries no such attribute, so nothing changes there */
html[data-sf-hide-tabs~="studio"] #studio-link, html[data-sf-hide-tabs~="studio"] #studio-link + .sep,
html[data-sf-hide-tabs~="transfer"] #transfer-link, html[data-sf-hide-tabs~="transfer"] .sep:has(+ #transfer-link) { display: none; }