/* site.css -- the shell every tool shares: the tool head row, panel heads,
 * empty states. Tokens and components come from styles.css (the vendored
 * design system); tool-specific rules live in each tool's own sheet.
 * Lifted from "Tunerr Workbench.dc.html" in the design project. */

/* ---------- shell ---------- */
.app{display:flex;flex-direction:column;min-height:100dvh}
.app-top{position:sticky;top:0;z-index:3;background:var(--bg-page);border-bottom:1px solid var(--border-hairline);box-shadow:0 4px 10px var(--bg-page)}
.app-main{display:flex;flex-direction:column;min-width:0}
.tool-head{display:flex;align-items:center;flex-wrap:nowrap;gap:var(--gap);padding:var(--gap) var(--gap-loose);max-width:52rem;width:100%;margin-inline:auto}
.tool-switch{box-shadow:var(--shadow-button);display:inline-flex;align-items:center;gap:var(--gap-tight);min-height:2.5rem;padding:.25rem .625rem;border:1px solid var(--border-hairline);border-radius:var(--radius-button);background-color:var(--bg-surface);color:var(--fg-default);text-decoration:none;font-family:var(--font-display);font-weight:var(--weight-head);font-size:var(--text-xl);line-height:var(--leading-tight);letter-spacing:var(--track-xl);white-space:nowrap}
.tool-switch:hover{border-color:var(--fg-muted)}
.tool-menu-list[data-tool="videos-review"] .menu-item[data-slug="videos-review"],.tool-menu-list[data-tool="home"] .menu-item[data-slug="home"]{background:var(--bg-raised);font-weight:var(--weight-strong)}
.tool-pass{white-space:nowrap;flex:0 0 auto;font-family:var(--font-code);font-size:var(--text-sm);font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--fg-muted);padding-top:.15rem}
.tool-live{margin-left:auto;display:flex;align-items:center;gap:var(--gap-tight);font-size:var(--text-sm);color:var(--fg-muted);white-space:nowrap;min-width:0;overflow:hidden;text-overflow:ellipsis}
.live-dot{--pulse-color:var(--signal-keep);width:.5rem;height:.5rem;border-radius:50%;background:var(--signal-keep);flex:0 0 auto;animation:tunerr-pulse 1.6s cubic-bezier(.3,0,.2,1) infinite}
@media (prefers-reduced-motion: reduce){.live-dot{animation:none;box-shadow:0 0 0 .2rem color-mix(in oklab,var(--signal-keep) 20%,transparent)}}
.tool-finish{box-shadow:var(--shadow-button);display:inline-flex;align-items:center;justify-content:center;gap:var(--gap-tight);font-weight:var(--weight-head);letter-spacing:.04em;text-transform:uppercase;flex:0 0 auto;min-height:2.25rem;padding:.375rem .875rem;border:1px solid var(--border-hairline);background-color:var(--bg-surface);color:var(--fg-default);text-decoration:none;font-family:var(--font-body);font-size:var(--text-md);border-radius:var(--radius-button);white-space:nowrap}
.tool-finish:hover{border-color:var(--fg-muted)}
.tool-body{display:flex;flex-direction:column;gap:var(--gap-loose);padding:var(--gap-loose);max-width:52rem;width:100%;margin-inline:auto}

/* the first label in a panel clears the notch */
.app .panel-name,
.app .empty-label{margin-left:1rem}
.panel-head{display:flex;align-items:baseline;gap:var(--gap);overflow:hidden;padding:var(--gap) var(--pad-surface);border-bottom:1px solid var(--bevel-shadow);box-shadow:0 1px 0 var(--bevel-light)}
.panel-name{white-space:nowrap;font-family:var(--font-code);font-size:var(--text-sm);font-weight:500;letter-spacing:var(--track-label);text-transform:uppercase;color:var(--fg-muted)}
.panel-meta{margin-left:auto;min-width:0;font-family:var(--font-code);font-size:var(--text-sm);color:var(--fg-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---------- empty states ---------- */
.empty{padding:var(--gap-loose);display:flex;flex-direction:column;gap:var(--gap-tight)}
.empty-label{font-family:var(--font-code);font-size:var(--text-sm);font-weight:500;letter-spacing:var(--track-label);text-transform:uppercase;color:var(--fg-muted)}
.empty-title{font-family:var(--font-display);font-weight:var(--weight-head);font-size:var(--text-xl);line-height:var(--leading-tight);letter-spacing:var(--track-xl);margin:0}
.empty-note{margin:0;font-size:var(--text-md);line-height:var(--leading-body);color:var(--fg-muted);max-width:var(--measure)}
.empty-note code{font-family:var(--font-code)}

@media (max-width: 52rem){
	.tool-head{flex-wrap:wrap}
	.tool-live{margin-left:0}
}

/* ---------- apex ---------- */
.apex{gap:var(--gap-section);padding-top:var(--gap-section)}
.apex-wm{display:block;width:12rem;height:auto}
.wm-tune,.wm-rr{fill:var(--brand-ink)}
.wm-bolt{fill:var(--brand-mark)}
.apex-tool{display:flex;align-items:baseline;gap:var(--gap);padding:.75rem var(--pad-surface);color:var(--fg-default);text-decoration:none;font-size:var(--text-md)}
.apex-tool:hover{background:var(--bg-raised)}
.apex-tool-name{font-weight:var(--weight-strong)}
.apex-tool-note{margin-left:auto;font-family:var(--font-code);font-size:var(--text-sm);color:var(--fg-muted)}