/* Studio shell (index.html): sidebar, page stage, update dialog. Built on
   the tokens of mkh-ui.css. */

html, body { height: 100%; }
body { margin: 0; overflow: hidden; height: 100vh; background: var(--ui-bg); color: var(--ui-text); font-family: var(--ui-font); }

.app-shell { display: flex; width: 100%; height: 100vh; background: var(--ui-bg); }

/* ---------------------------------------------------------------- sidebar
 * .is-pinned = expanded (default); without it the sidebar is a 64px icon
 * rail that expands over the page on hover. */
.sidebar {
    --sb-w: 236px;
    position: relative; z-index: 50; flex: none;
    width: 64px; height: 100vh; display: flex; flex-direction: column;
    background: var(--ui-surface); border-right: 1px solid var(--ui-border);
    transition: width .22s var(--ui-ease);
}
.sidebar.is-pinned { width: var(--sb-w); }
.sidebar:not(.is-pinned):hover { width: var(--sb-w); box-shadow: var(--ui-shadow-lg); position: absolute; left: 0; top: 0; bottom: 0; }
.sidebar:not(.is-pinned) + .stage { margin-left: 0; }
body.studio-scale-host .sidebar { height: calc(100vh / var(--studio-ui-scale, 1)); zoom: var(--studio-ui-scale, 1); }

.sb-head { display: flex; align-items: center; gap: 8px; height: 60px; padding: 0 12px; flex: none; }
.logo-ring { display: flex; align-items: center; gap: 10px; min-width: 0; height: 40px; padding: 4px; border: 0; border-radius: var(--ui-radius); background: transparent; color: var(--ui-text); cursor: pointer; }
.logo-ring:hover { background: var(--ui-hover); }
.logo-mark { width: 32px; height: 32px; border-radius: 9px; flex: none; background: #0a0a0a; padding: 3px; object-fit: contain; }
.logo-brand-text { font-size: 15px; font-weight: 700; letter-spacing: -.01em; white-space: nowrap; }

.sidebar nav { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 6px 10px; display: flex; flex-direction: column; gap: 2px; }
.sb-group-label { padding: 14px 10px 6px; font-size: 11.5px; font-weight: 600; color: var(--ui-text-3); white-space: nowrap; }
.nav-item, .nav-fold-toggle {
    position: relative; display: flex; align-items: center; gap: 12px; height: 38px; padding: 0 12px; border-radius: var(--ui-radius);
    color: var(--ui-text-2); font-size: 13.5px; font-weight: 550; cursor: pointer; white-space: nowrap; user-select: none;
    border: 0; background: transparent; width: 100%; text-align: left; font-family: inherit;
    transition: background .15s var(--ui-ease), color .15s var(--ui-ease);
}
.nav-item svg, .nav-fold-toggle svg { width: 18px; height: 18px; flex: none; stroke-width: 1.9; }
.nav-item:hover, .nav-fold-toggle:hover { background: var(--ui-hover); color: var(--ui-text); }
.nav-item.active { background: var(--ui-sunken); color: var(--ui-text); font-weight: 650; }
.nav-item.active::before { content: ""; position: absolute; left: -10px; top: 9px; bottom: 9px; width: 3px; border-radius: 0 3px 3px 0; background: var(--ui-accent); }
.nav-fold-group.is-collapsed { display: none; }
.nav-fold-icon { transition: transform .2s var(--ui-ease); }
.nav-fold-toggle[aria-expanded="true"] .nav-fold-icon { transform: rotate(180deg); }

.side-actions { flex: none; display: flex; flex-direction: column; gap: 4px; padding: 10px; border-top: 1px solid var(--ui-border); }
.sb-ach { margin-bottom: 6px; }
.side-pill {
    display: flex; align-items: center; gap: 12px; height: 36px; padding: 0 12px; border-radius: var(--ui-radius); border: 0; background: transparent;
    color: var(--ui-text-2); font: 550 13px/1 var(--ui-font); cursor: pointer; white-space: nowrap; width: 100%; text-align: left;
}
.side-pill svg { width: 17px; height: 17px; flex: none; stroke-width: 1.9; }
.side-pill:hover { background: var(--ui-hover); color: var(--ui-text); }
.side-pill.active { background: var(--ui-sunken); color: var(--ui-text); }
.settings-fold-chevron { width: 14px !important; height: 14px !important; margin-left: auto; transition: transform .2s var(--ui-ease); }
.settings-fold-toggle[aria-expanded="true"] .settings-fold-chevron { transform: rotate(180deg); }
.settings-fold-group { display: flex; flex-direction: column; gap: 2px; padding-left: 12px; }
.settings-fold-group.is-collapsed { display: none; }
.sb-foot-row { display: flex; align-items: center; gap: 6px; margin-top: 4px; }
.sb-foot-row .side-pill { flex: 1; }

.update-now-btn { display: none; align-items: center; gap: 8px; height: 32px; padding: 0 12px; border: 1px solid var(--ui-accent); border-radius: var(--ui-radius); background: var(--ui-accent-soft); color: var(--ui-accent-strong); font: 600 12.5px/1 var(--ui-font); cursor: pointer; }
.update-now-btn.show { display: flex; }
.update-now-btn svg { width: 15px; height: 15px; }
.update-now-btn.is-busy svg { animation: ui-spin 1s linear infinite; }
.project-version-badge { flex: none; height: 26px; padding: 0 8px; display: inline-flex; align-items: center; border-radius: 7px; font: 600 11px/1 var(--ui-mono); color: var(--ui-text-3); background: var(--ui-sunken); white-space: nowrap; }
.project-version-badge.is-admin-action { cursor: pointer; }
.project-version-badge.is-admin-action:hover { color: var(--ui-text); }
.project-version-badge.update-available { color: var(--ui-accent-strong); background: var(--ui-accent-soft); }
.project-version-compact, .update-version-compact { display: none; }

/* Collapsed rail: icons only. */
.sidebar:not(.is-pinned):not(:hover) .logo-brand-text,
.sidebar:not(.is-pinned):not(:hover) .nav-text,
.sidebar:not(.is-pinned):not(:hover) .side-pill-text,
.sidebar:not(.is-pinned):not(:hover) .settings-fold-chevron,
.sidebar:not(.is-pinned):not(:hover) .sb-group-label,
.sidebar:not(.is-pinned):not(:hover) .sb-ach,
.sidebar:not(.is-pinned):not(:hover) .project-version-badge,
.sidebar:not(.is-pinned):not(:hover) .update-now-text { display: none; }
.sidebar:not(.is-pinned):not(:hover) .nav-item,
.sidebar:not(.is-pinned):not(:hover) .side-pill { justify-content: center; padding: 0; }
.sidebar:not(.is-pinned):not(:hover) .sb-foot-row { flex-direction: column; }
.sidebar:not(.is-pinned):not(:hover) .settings-fold-group { padding-left: 0; }

/* Anonymous: only the account entry is usable. */
body.studio-login-required .sb-ach { display: none; }

/* ---------------------------------------------------------------- stage */
.stage { position: relative; flex: 1; min-width: 0; height: 100vh; overflow: hidden; background: var(--ui-bg); }
.sidebar:not(.is-pinned) ~ .stage { margin-left: 64px; }
.sidebar:not(.is-pinned) { position: absolute; left: 0; top: 0; bottom: 0; }
iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; opacity: 0; pointer-events: none; transition: opacity .25s var(--ui-ease); background: var(--ui-bg); }
iframe.active { opacity: 1; pointer-events: auto; }

/* ---------------------------------------------------------------- dialog */
.studio-modal { position: fixed; inset: 0; z-index: 9000; display: flex; align-items: center; justify-content: center; padding: 20px; background: var(--ui-overlay); backdrop-filter: blur(4px); }
.studio-modal[hidden] { display: none; }
.studio-modal-panel { width: min(620px, 100%); max-height: calc(100vh - 40px); display: flex; flex-direction: column; background: var(--ui-surface); border: 1px solid var(--ui-border); border-radius: var(--ui-radius-xl); box-shadow: var(--ui-shadow-lg); overflow: hidden; }
.studio-modal-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 20px 22px 8px; }
.studio-modal-kicker { font-size: 12px; font-weight: 600; color: var(--ui-accent-strong); }
.studio-modal-title { margin: 2px 0 0; font-size: 18px; font-weight: 650; }
.studio-modal-close { width: 32px; height: 32px; display: grid; place-items: center; border: 0; border-radius: var(--ui-radius); background: transparent; color: var(--ui-text-3); cursor: pointer; }
.studio-modal-close:hover { background: var(--ui-hover); color: var(--ui-text); }
.studio-modal-close svg { width: 18px; height: 18px; }
.studio-modal-body { padding: 8px 22px 16px; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; }
.studio-modal-copy { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--ui-text-2); }
.studio-modal-actions { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 22px; border-top: 1px solid var(--ui-border); background: var(--ui-surface-2); }
.studio-modal-btn { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border-radius: var(--ui-radius); border: 1px solid var(--ui-border); background: var(--ui-surface); color: var(--ui-text); font: 600 13px/1 var(--ui-font); cursor: pointer; }
.studio-modal-btn:hover { background: var(--ui-hover); }
.studio-modal-btn.primary { background: var(--ui-primary); border-color: var(--ui-primary); color: var(--ui-on-primary); }
.studio-modal-btn svg { width: 15px; height: 15px; }
.studio-modal-btn.is-busy svg { animation: ui-spin 1s linear infinite; }
.studio-modal-btn:disabled { opacity: .5; cursor: not-allowed; }

.update-notes-box { padding: 12px 14px; border-radius: var(--ui-radius); border: 1px solid var(--ui-border); background: var(--ui-surface-2); }
.update-notes-head { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; }
.update-notes-version { font: 600 11.5px/1 var(--ui-mono); color: var(--ui-text-3); }
.update-notes-list { margin: 8px 0 0; padding-left: 18px; font-size: 13px; line-height: 1.6; color: var(--ui-text-2); }
.update-notes-empty { margin: 6px 0 0; font-size: 12.5px; color: var(--ui-text-3); }
.update-source-list { display: grid; gap: 8px; }
.update-source-card { width: 100%; text-align: left; padding: 12px 14px; border-radius: var(--ui-radius); border: 1px solid var(--ui-border); background: var(--ui-surface); color: var(--ui-text); cursor: pointer; font-family: inherit; }
.update-source-card.active { border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.update-source-head { display: flex; justify-content: space-between; gap: 10px; }
.update-source-title strong { display: block; font-size: 13.5px; }
.update-source-title span { display: block; margin-top: 2px; font-size: 12px; color: var(--ui-text-3); }
.update-source-head-right { display: flex; align-items: center; gap: 6px; }
.update-source-check { width: 18px; height: 18px; display: none; place-items: center; border-radius: 50%; background: var(--ui-accent); color: #1a1205; }
.update-source-card.active .update-source-check { display: grid; }
.update-source-check svg { width: 11px; height: 11px; }
.update-source-badge { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: var(--ui-sunken); color: var(--ui-text-2); }
.update-source-badge.ok { background: var(--ui-success-soft); color: var(--ui-success); }
.update-source-badge.warn, .update-source-badge.checking { background: var(--ui-warning-soft); color: var(--ui-warning); }
.connectivity-list { display: grid; gap: 4px; margin-top: 8px; }
.connectivity-list:empty { display: none; }
.connectivity-row { display: grid; grid-template-columns: 10px 1fr auto; gap: 8px; align-items: center; font-size: 12px; }
.connectivity-indicator { width: 8px; height: 8px; border-radius: 50%; background: var(--ui-border-strong); }
.connectivity-row.ok .connectivity-indicator { background: var(--ui-success); }
.connectivity-row.connectivity-error .connectivity-indicator { background: var(--ui-danger); }
.connectivity-row.checking .connectivity-indicator { background: var(--ui-warning); }
.connectivity-name { font-weight: 600; }
.connectivity-url { color: var(--ui-text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.connectivity-status { color: var(--ui-text-2); }
.update-modal-summary { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: var(--ui-radius); background: var(--ui-sunken); font-size: 12.5px; }
.update-modal-summary strong { display: block; font-size: 13px; }
.update-modal-summary span { color: var(--ui-text-2); }
.update-modal-dot { width: 8px; height: 8px; margin-top: 5px; border-radius: 50%; background: var(--ui-text-3); flex: none; }
.update-modal-summary.ok .update-modal-dot { background: var(--ui-success); }
.update-modal-summary.warn .update-modal-dot { background: var(--ui-warning); }
.update-action-prefix { margin-right: 4px; }

/* Old browsers that cannot render the Tailwind v4 build. */
#legacy-browser-banner { position: fixed; left: 0; right: 0; top: 0; z-index: 10000; padding: 10px 16px; background: var(--ui-warning-soft); color: var(--ui-warning); font-size: 13px; text-align: center; }

@media (max-width: 720px) {
    .sidebar.is-pinned { width: 64px; }
    .sidebar.is-pinned .logo-brand-text, .sidebar.is-pinned .nav-text, .sidebar.is-pinned .side-pill-text,
    .sidebar.is-pinned .sb-group-label, .sidebar.is-pinned .sb-ach, .sidebar.is-pinned .project-version-badge { display: none; }
    .sidebar.is-pinned .nav-item, .sidebar.is-pinned .side-pill { justify-content: center; padding: 0; }
}