/* Server pages "V3" (2026-10-31): the V1 look with a macOS layer on top. /customize →
   Dashboard style V3 puts .dash-v1 AND .dash-v3 on the root, so everything V1 has
   stays and only these rules are added. Undo: drop the <link> in layout.ejs and
   this file.

   macOS rules: system font, source-list sidebar (plain accent icons, solid accent
   selection), window traffic lights, 12px windows with big soft shadows, push
   buttons with a hairline and a 1px drop, 3.5px focus ring. Colours stay the
   theme's own (var(--brand), var(--text)), so every theme and light/dark works. */

.dashboard-root.has-guild.dash-v3 {
    --mac-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
    --mac-hair: color-mix(in srgb, var(--text) 10%, transparent);
    --mac-fill: color-mix(in srgb, var(--text) 7%, transparent);
    --mac-fill-2: color-mix(in srgb, var(--text) 11%, transparent);
    --mac-ring: 0 0 0 3.5px color-mix(in srgb, var(--brand) 45%, transparent);
    --mac-window: 0 0 0 .5px rgba(0, 0, 0, .06), 0 2px 6px rgba(0, 0, 0, .06), 0 12px 32px -12px rgba(0, 0, 0, .28);
}

/* ---- Type: San Francisco on Apple devices, the system font elsewhere ---- */
.dashboard-root.has-guild.dash-v3 :is(.app-sidebar, .app-main, .app-rightbar),
.dashboard-root.has-guild.dash-v3 :is(.app-sidebar, .app-main, .app-rightbar) :is(h1, h2, h3, h4, .btn, .label, .field, .select, .textarea, .badge, .nav-section, .side-title, .nav-group-toggle) {
    font-family: var(--mac-font);
    -webkit-font-smoothing: antialiased;
}
.dashboard-root.has-guild.dash-v3 .app-main h1 { font-size: 26px; line-height: 32px; font-weight: 700; letter-spacing: -.012em; }
.dashboard-root.has-guild.dash-v3 .app-main :is(h2, h3) { font-weight: 600; letter-spacing: -.005em; }

/* ---- Sidebar: Finder-style source list ---- */
/* No backdrop-filter here: the sidebar sits on the plain page, so the blur showed
   nothing, and Chrome let it stay sharp above the setup overlay and smear the next
   page during a page switch (Mike's video + screenshot, 2026-10-31). */
.dashboard-root.has-guild.dash-v3 .app-sidebar {
    border-right: .5px solid var(--mac-hair) !important;
}
/* Window controls: decoration only, the way every Mac window starts. */
.dashboard-root.has-guild.dash-v3 .app-sidebar::before {
    content: "";
    display: block;
    width: 52px; height: 12px; margin: 2px 0 14px 8px;
    background:
        radial-gradient(circle at 6px 6px, #ff5f57 5.5px, rgba(0, 0, 0, .12) 6px, transparent 6.5px),
        radial-gradient(circle at 26px 6px, #febc2e 5.5px, rgba(0, 0, 0, .12) 6px, transparent 6.5px),
        radial-gradient(circle at 46px 6px, #28c840 5.5px, rgba(0, 0, 0, .12) 6px, transparent 6.5px);
}
html.nx-side-mini .dashboard-root.has-guild.dash-v3 .app-sidebar::before { margin-inline: auto; }

.dashboard-root.has-guild.dash-v3 .app-sidebar .nav-link {
    min-height: 32px; padding: 0 8px; gap: 8px; border-radius: 6px;
    font-size: 13px; font-weight: 500; color: var(--text);
    transition: background-color .12s ease, color .12s ease;
}
.dashboard-root.has-guild.dash-v3 .app-sidebar .nav-link > svg {
    width: 16px; height: 16px; padding: 0; border-radius: 0; background: none;
    color: var(--brand); stroke-width: 2;
}
@media (hover: hover) and (pointer: fine) {
    .dashboard-root.has-guild.dash-v3 .app-sidebar .nav-link:hover { background: var(--mac-fill); }
}
.dashboard-root.has-guild.dash-v3 .app-sidebar .nav-link.nav-link-active {
    background: var(--brand) !important; color: #fff !important; box-shadow: none !important;
}
.dashboard-root.has-guild.dash-v3 .app-sidebar .nav-link.nav-link-active > svg { background: none; color: #fff; }
.dashboard-root.has-guild.dash-v3 .app-sidebar :is(.nav-section, .nav-group-toggle) {
    font-size: 11px; font-weight: 600; letter-spacing: normal; text-transform: none;
    color: color-mix(in srgb, var(--text) 50%, transparent);
}
.dashboard-root.has-guild.dash-v3 .nav-menu > :is(.nav-section:not(:first-child), .nav-group + .nav-group) { border-top: 0; }
.dashboard-root.has-guild.dash-v3 .nav-account { border-radius: 10px; border-width: .5px; }

/* ---- Right rail ---- */
.dashboard-root.has-guild.dash-v3 .app-rightbar { border-left: .5px solid var(--mac-hair); }
.dashboard-root.has-guild.dash-v3 .side-title {
    font-size: 11px; font-weight: 600; letter-spacing: normal; text-transform: none;
    color: color-mix(in srgb, var(--text) 50%, transparent);
}

/* ---- Windows: panels and cards ---- */
.dashboard-root.has-guild.dash-v3 .app-main :is(.panel, .panel-strong) {
    border-radius: 12px; border: .5px solid var(--mac-hair); box-shadow: var(--mac-window);
}
.dashboard-root.has-guild.dash-v3 .app-main .panel :is(.panel, .panel-strong) { box-shadow: none; }

/* ---- Push buttons ---- */
.dashboard-root.has-guild.dash-v3 .app-main .btn {
    min-height: 32px; padding: 0 14px; gap: 6px; border-radius: 7px;
    font-size: 13px; font-weight: 500; letter-spacing: normal; text-transform: none;
    transition: filter .12s ease, background-color .12s ease;
}
.dashboard-root.has-guild.dash-v3 .app-main .btn:hover { transform: none; }
.dashboard-root.has-guild.dash-v3 .app-main .btn:active { filter: brightness(.92); }
.dashboard-root.has-guild.dash-v3 .app-main .btn > svg { width: 15px; height: 15px; }
.dashboard-root.has-guild.dash-v3 .app-main .btn-primary {
    background: var(--brand); background-image: none; color: #fff; border: 0;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 .5px 1px rgba(0, 0, 0, .25);
}
.dashboard-root.has-guild.dash-v3 .app-main .btn-secondary {
    background: var(--mac-fill-2); color: var(--text); border: 0;
    box-shadow: inset 0 0 0 .5px var(--mac-hair), 0 .5px 1px rgba(0, 0, 0, .12);
}

/* ---- Fields ---- */
.dashboard-root.has-guild.dash-v3 .app-main :is(.field, .select, .textarea) {
    border-radius: 7px; border: .5px solid var(--mac-hair); font-size: 13px;
    box-shadow: inset 0 .5px 1px rgba(0, 0, 0, .08);
}
.dashboard-root.has-guild.dash-v3 .app-main :is(.field, .select, .textarea):focus { border-color: var(--brand); box-shadow: var(--mac-ring); }
.dashboard-root.has-guild.dash-v3 :is(.app-main, .app-sidebar, .app-rightbar) :focus-visible { outline: none; box-shadow: var(--mac-ring); }
.dashboard-root.has-guild.dash-v3 .app-main .label {
    font-size: 12px; font-weight: 500; letter-spacing: normal; text-transform: none; color: var(--muted);
}

/* ---- Capsule badges, accent switches ---- */
.dashboard-root.has-guild.dash-v3 :is(.app-main, .app-rightbar) .badge { border-radius: 999px; font-size: 11px; font-weight: 600; letter-spacing: normal; text-transform: none; }
.dashboard-root.has-guild.dash-v3 { --kit-accent: var(--brand); }