/* ==========================================================================
   Layouts: workspace shell, public shell, auth, status pages and installer
   ========================================================================== */

/* ---------- Workspace shell ---------- */
.shell { display: flex; min-height: 100vh; }
.shell-nav {
  position: fixed; inset: 0 auto 0 0; z-index: 60; width: var(--nav-w);
  display: flex; flex-direction: column; background: var(--ink); color: var(--ink-text);
  transform: translateX(-100%); transition: transform var(--t) var(--ease); visibility: hidden;
}
.shell-nav.is-open { transform: none; visibility: visible; box-shadow: var(--shadow-3); }
.shell-nav-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); height: var(--topbar-h); padding: 0 var(--s-4) 0 var(--s-5); flex: none; }
.shell-nav-head .brand { color: #fff; }
.nav-close { --btn-fg: var(--ink-muted); --btn-bg-hover: rgba(255, 255, 255, .1); }
.nav-close:hover { color: #fff; }
.nav-area { margin: 0 var(--s-4) var(--s-3); padding: var(--s-2) var(--s-3); border-radius: var(--r-md); background: rgba(255, 255, 255, .06); border: 1px solid var(--ink-line); display: flex; align-items: center; gap: var(--s-2); font-size: var(--fs-sm); color: var(--ink-muted); }
.nav-area strong { color: #fff; font-weight: var(--fw-semibold); }
.nav-area .icon { color: var(--highlight); }
.nav-scroll { flex: 1; overflow-y: auto; padding: 0 var(--s-3) var(--s-4); scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .2) transparent; }
.nav-group { margin-top: var(--s-4); }
.nav-group:first-child { margin-top: 0; }
.nav-group-label { padding: 0 var(--s-3) var(--s-2); font-size: 11px; font-weight: var(--fw-semibold); letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .5); }
.nav-link { position: relative; display: flex; align-items: center; gap: var(--s-3); min-height: 40px; padding: 0 var(--s-3); border-radius: var(--r-sm); color: var(--ink-muted); font-weight: var(--fw-medium); font-size: var(--fs-md); text-decoration: none; transition: background-color var(--t-fast), color var(--t-fast); }
.nav-link .icon { width: 18px; height: 18px; opacity: .85; }
.nav-link:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.nav-link[aria-current] { background: rgba(255, 255, 255, .12); color: #fff; font-weight: var(--fw-semibold); }
.nav-link[aria-current]::before { content: ""; position: absolute; left: -12px; top: 9px; bottom: 9px; width: 3px; border-radius: 0 3px 3px 0; background: var(--highlight); }
.nav-link[aria-current] .icon { opacity: 1; color: var(--highlight); }
.nav-link:focus-visible { outline-color: var(--highlight); box-shadow: none; }
.shell-nav-foot { flex: none; padding: var(--s-3); border-top: 1px solid var(--ink-line); display: grid; gap: var(--s-1); }
.shell-nav-foot .nav-link { width: 100%; border: 0; background: none; font: inherit; cursor: pointer; }
.shell-nav-foot .nav-link:hover { background: rgba(255, 255, 255, .07); }
.nav-scrim { position: fixed; inset: 0; z-index: 55; background: rgba(8, 18, 40, .5); }

.shell-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: var(--s-3); height: var(--topbar-h); padding: 0 var(--s-4); background: color-mix(in srgb, var(--canvas) 88%, transparent); backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--line); }
.topbar-context { flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--s-2); font-size: var(--fs-sm); color: var(--text-3); }
.topbar-context strong { color: var(--text); font-weight: var(--fw-semibold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar-actions { display: flex; align-items: center; gap: var(--s-2); }
.topbar .account-btn { padding: 0; width: 40px; height: 40px; border-radius: 50%; }
.topbar .theme-btn .icon-sun { display: none; }
html[data-theme=dark] .topbar .theme-btn .icon-sun { display: inline; }
html[data-theme=dark] .topbar .theme-btn .icon-moon { display: none; }
@media (prefers-color-scheme: dark) { html:not([data-theme]) .topbar .theme-btn .icon-sun { display: inline; } html:not([data-theme]) .topbar .theme-btn .icon-moon { display: none; } }
.banner { display: flex; align-items: center; justify-content: center; gap: var(--s-2); padding: var(--s-2) var(--s-4); background: var(--warning-bg); color: var(--warning); border-bottom: 1px solid var(--warning-line); font-size: var(--fs-sm); font-weight: var(--fw-medium); text-align: center; }
.banner a { color: inherit; font-weight: var(--fw-semibold); }
.content { flex: 1; width: 100%; max-width: var(--content-max); margin: 0 auto; padding: var(--s-6) var(--s-4) var(--s-12); }
.content:focus { outline: none; }
.app-footer { padding: var(--s-5) var(--s-4); border-top: 1px solid var(--line); color: var(--text-3); font-size: var(--fs-sm); text-align: center; }

@media (min-width: 1024px) {
  .shell-nav { transform: none; visibility: visible; box-shadow: none; }
  .shell-main { margin-left: var(--nav-w); }
  .nav-toggle, .nav-close, .nav-scrim { display: none !important; }
  .topbar { padding: 0 var(--s-8); }
  .content { padding: var(--s-8) var(--s-8) var(--s-16); }
}
@media (max-width: 600px) {
  .topbar-cta span { display: none; }
  .topbar-cta { width: var(--control-h-sm); padding: 0; }
  .content { padding-top: var(--s-5); }
  .page-header { margin-bottom: var(--s-5); }
  .page-tools { width: 100%; }
  .page-tools > .btn, .page-tools > form, .page-tools > .dropdown { flex: 1 1 auto; }
  .page-tools > form .btn, .page-tools > .btn { width: 100%; }
  .page-tools > .dropdown { flex: 0 0 auto; }
}

/* ---------- Account area (shared tabs for profile, preferences, privacy) ---------- */
.subnav { display: flex; gap: var(--s-1); overflow-x: auto; padding: 4px; margin-bottom: var(--s-6); border-radius: var(--r-md); background: var(--surface-2); border: 1px solid var(--line); width: fit-content; max-width: 100%; }
.subnav a { flex: none; display: inline-flex; align-items: center; gap: var(--s-2); padding: 8px 14px; border-radius: 7px; color: var(--text-2); font-weight: var(--fw-semibold); font-size: var(--fs-sm); text-decoration: none; white-space: nowrap; }
.subnav a:hover { color: var(--text); }
.subnav a[aria-current] { background: var(--surface); color: var(--text); box-shadow: var(--shadow-1), 0 0 0 1px var(--line); }
.subnav .icon { width: 16px; height: 16px; }

/* ---------- Public shell ---------- */
.site { min-height: 100vh; display: flex; flex-direction: column; }
.site-header { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--line); }
.site-header-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); max-width: var(--content-max); margin: 0 auto; height: 68px; padding: 0 var(--s-5); }
.site-header nav { display: flex; align-items: center; gap: var(--s-2); }
.site-header .site-link { color: var(--text-2); font-weight: var(--fw-semibold); font-size: var(--fs-sm); text-decoration: none; padding: 0 var(--s-3); }
.site-header .site-link:hover { color: var(--text); }
@media (max-width: 560px) { .site-header .site-link { display: none; } }
.site-header.is-dark { background: var(--ink); border-bottom-color: var(--ink-line); }
.site-header.is-dark .brand { color: #fff; }
.site-header.is-dark .site-link { color: var(--ink-muted); }
.site-header.is-dark .site-link:hover { color: #fff; }
.site-header.is-dark .btn-ghost { --btn-fg: #fff; --btn-bg-hover: rgba(255, 255, 255, .1); }
.site-main { flex: 1; width: 100%; margin: 0 auto; padding: var(--s-10) var(--s-5) var(--s-16); max-width: 520px; }
.site-main:focus { outline: none; }
.site-main.is-wide { max-width: 860px; }
.site-main.is-full { max-width: none; padding: 0; }
.site-main.is-docs { max-width: var(--content-max); padding-top: var(--s-8); }
.site-footer { border-top: 1px solid var(--line); background: var(--surface); }
.site-footer-inner { max-width: var(--content-max); margin: 0 auto; padding: var(--s-6) var(--s-5); display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-6); align-items: center; justify-content: space-between; color: var(--text-3); font-size: var(--fs-sm); }
.site-footer nav { display: flex; flex-wrap: wrap; gap: var(--s-5); }
.site-footer a { color: var(--text-2); text-decoration: none; font-weight: var(--fw-medium); }
.site-footer a:hover { color: var(--brand); }

/* ---------- Auth & public forms ---------- */
.auth { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); box-shadow: var(--shadow-2); padding: var(--s-8); }
.auth-head { margin-bottom: var(--s-6); }
.auth-badge { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: var(--ink); color: var(--highlight); margin-bottom: var(--s-5); }
.auth-badge .icon { width: 22px; height: 22px; }
.auth h1 { font-size: var(--fs-2xl); }
.auth-lede { margin: var(--s-2) 0 0; color: var(--text-2); }
.auth-alt { margin: var(--s-6) 0 0; padding-top: var(--s-5); border-top: 1px solid var(--line); text-align: center; font-size: var(--fs-sm); color: var(--text-3); }
.auth-alt a { font-weight: var(--fw-semibold); }
@media (max-width: 520px) { .auth { padding: var(--s-6) var(--s-5); border-radius: var(--r-lg); } .site-main { padding-top: var(--s-6); } }

/* ---------- Status pages (link states, errors, maintenance) ---------- */
.status { text-align: center; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); box-shadow: var(--shadow-2); padding: var(--s-10) var(--s-8); }
.status-icon { width: 64px; height: 64px; margin: 0 auto var(--s-5); border-radius: 20px; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand); }
.status-icon.warn { background: var(--warning-bg); color: var(--warning); }
.status-icon.danger { background: var(--danger-bg); color: var(--danger); }
.status-code { display: inline-block; margin-bottom: var(--s-3); padding: 3px 10px; border-radius: var(--r-pill); background: var(--surface-2); color: var(--text-3); font-size: var(--fs-xs); font-weight: var(--fw-semibold); letter-spacing: .06em; text-transform: uppercase; }
.status-title { font-size: var(--fs-2xl); }
.status-text { margin: var(--s-3) auto 0; max-width: 42ch; color: var(--text-2); }
.status-body { margin-top: var(--s-6); text-align: left; }
.status-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-2); margin-top: var(--s-6); }
.destination-preview { margin-top: var(--s-5); padding: var(--s-3) var(--s-4); border-radius: var(--r-md); background: var(--surface-2); border: 1px dashed var(--line-strong); font-family: var(--mono); font-size: var(--fs-sm); text-align: left; overflow-wrap: anywhere; color: var(--text); }
@media (max-width: 520px) { .status { padding: var(--s-8) var(--s-5); border-radius: var(--r-lg); } .status-actions .btn { flex: 1 1 100%; } }

/* ---------- Installer ---------- */
.setup { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1fr); }
.setup-rail { background: var(--ink); color: var(--ink-text); padding: var(--s-6) var(--s-5); display: flex; flex-direction: column; gap: var(--s-6); }
.setup-rail .brand { color: #fff; }
.setup-rail .brand small { display: block; font-size: var(--fs-xs); font-weight: var(--fw-medium); color: var(--ink-muted); letter-spacing: 0; }
.setup-steps { list-style: none; margin: 0; padding: 0; display: none; gap: var(--s-1); }
.setup-steps li { display: flex; gap: var(--s-3); align-items: center; padding: var(--s-2) var(--s-3); border-radius: var(--r-sm); color: var(--ink-muted); }
.setup-steps .step-dot { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid rgba(255, 255, 255, .3); font-size: var(--fs-xs); font-weight: var(--fw-bold); }
.setup-steps .step-dot .icon { width: 14px; height: 14px; }
.setup-steps strong { display: block; font-size: var(--fs-md); color: inherit; font-weight: var(--fw-semibold); }
.setup-steps small { display: block; font-size: var(--fs-xs); color: rgba(255, 255, 255, .55); }
.setup-steps li.is-done { color: #fff; }
.setup-steps li.is-done .step-dot { background: rgba(255, 255, 255, .14); border-color: transparent; color: var(--highlight); }
.setup-steps li.is-current { background: rgba(255, 255, 255, .1); color: #fff; }
.setup-steps li.is-current .step-dot { background: var(--highlight); border-color: var(--highlight); color: #1A1405; }
.setup-rail-foot { margin-top: auto; font-size: var(--fs-xs); color: rgba(255, 255, 255, .55); display: none; }
.setup-main { padding: var(--s-6) var(--s-4) var(--s-12); }
.setup-progress { max-width: 720px; margin: 0 auto var(--s-4); }
.setup-progress-row { display: flex; justify-content: space-between; gap: var(--s-3); font-size: var(--fs-sm); color: var(--text-3); margin-bottom: var(--s-2); }
.setup-progress-row strong { color: var(--text); }
.setup-card { max-width: 720px; margin: 0 auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); box-shadow: var(--shadow-2); padding: var(--s-8) var(--s-6); }
.setup-foot { max-width: 720px; margin: var(--s-4) auto 0; text-align: center; font-size: var(--fs-sm); color: var(--text-3); }
@media (min-width: 960px) {
  .setup { grid-template-columns: 300px minmax(0, 1fr); }
  .setup-rail { position: sticky; top: 0; height: 100vh; padding: var(--s-8) var(--s-6); }
  .setup-steps, .setup-rail-foot { display: grid; }
  .setup-main { padding: var(--s-12) var(--s-8); }
  .setup-card { padding: var(--s-10); }
}
@media (max-width: 520px) { .setup-card { padding: var(--s-6) var(--s-5); border-radius: var(--r-lg); } }
@media (max-width: 1023px) { body.nav-locked { overflow: hidden; } }