/* ===== THE FROSTED LAYOUT (delivered 2026-09-13 as the "glass" layout, renamed 2026-09-14) =====
   A LAYOUT is the second axis of Appearance, separate from the theme: the SURFACE treatment.
   `data-layout="frosted"` on the html element frosts the panels — blur over the artwork,
   translucent fills, rounded controls — and any theme can wear it; `data-layout="classic"`
   is the flat, square look every theme had before. Appearance → Layout picks it outright,
   or "Match theme" lets the theme decide (Glass asks for frosted, the rest for classic —
   the `layout` field in js/themes.js).
   The two pools of light behind the page take the THEME'S accent (--gold) through color-mix,
   so they are red under Shadow, gold under Gilded and Royal, sky blue under Glass — a theme
   never has to know this file exists.
   What is deliberately SOLID: dialogs, tooltips and every dropdown list — they open over
   text and need a floor, not a window. Loaded from index.html after the themes. */
[data-layout="frosted"] {
    /* The layout's own default alphas (OVERLAY OPACITY, royal.css) for a theme that names
       none — a skin's values outrank these, and the reader's sliders outrank both. */
    --op-panel: 55%; --op-nav: 60%; --op-float: 70%;
    --panel-border: rgba(255, 255, 255, 0.11);
    --r-btn: 10px; --r-field: 10px;
    --frost-tint-1: color-mix(in srgb, var(--gold) 16%, transparent);
    --frost-tint-2: color-mix(in srgb, var(--gold) 10%, transparent);
}
[data-layout="frosted"] body {
    background-color: var(--bg-body);
    background-image:
        radial-gradient(1000px 600px at 10% -10%, var(--frost-tint-1), transparent 60%),
        radial-gradient(800px 500px at 90% 10%, var(--frost-tint-2), transparent 60%),
        var(--paper-wash), var(--backdrop);
    background-size: auto, auto, cover, cover;
    background-position: 0 0, 0 0, center center, center center;
    background-attachment: fixed, fixed, fixed, fixed;
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
}
/* The frosted surfaces, in the three groups the opacity sliders know: cards & panels, the
   header and rail, chat & drawers. Same frost, different fill token. */
[data-layout="frosted"] #site-nav, [data-layout="frosted"] .pt-create, [data-layout="frosted"] .pt-detail,
[data-layout="frosted"] .chat-win, [data-layout="frosted"] .control-rail, [data-layout="frosted"] #view-home .card,
[data-layout="frosted"] .fr-drawer-body, [data-layout="frosted"] .fr-handle, [data-layout="frosted"] .notif-panel,
[data-layout="frosted"] .msg-list-panel, [data-layout="frosted"] .rs-pane, [data-layout="frosted"] .card,
[data-layout="frosted"] .pf-card, [data-layout="frosted"] .pt-undo {
    background: var(--panel-bg);
    backdrop-filter: blur(18px) saturate(1.25); -webkit-backdrop-filter: blur(18px) saturate(1.25);
    border-color: var(--panel-border);
    box-shadow: var(--shadow-card), inset 0 1px 0 rgba(255, 255, 255, 0.07);
}
[data-layout="frosted"] #site-nav, [data-layout="frosted"] .control-rail { background: var(--bg-nav); }
[data-layout="frosted"] .chat-win, [data-layout="frosted"] .fr-drawer-body, [data-layout="frosted"] .fr-handle,
[data-layout="frosted"] .notif-panel, [data-layout="frosted"] .msg-list-panel { background: var(--bg-float); }
[data-layout="frosted"] #site-nav { border-radius: 0; border-width: 0 0 1px; }
[data-layout="frosted"] .fr-btn { background: transparent; }
[data-layout="frosted"] .pt-detail, [data-layout="frosted"] .pt-create, [data-layout="frosted"] #view-home .card { border-radius: 12px; }
[data-layout="frosted"] .pf-card { border-radius: 14px; border-top-width: 2px; }
/* Admin (2026-09-23): its cards, section row and panel are cards like any other; the front-page
   cards take the Home cards' corners. */
[data-layout="frosted"] .adm-card, [data-layout="frosted"] .adm-tabs, [data-layout="frosted"] .adm-panel {
    backdrop-filter: blur(18px) saturate(1.25); -webkit-backdrop-filter: blur(18px) saturate(1.25);
    box-shadow: var(--shadow-card), inset 0 1px 0 rgba(255, 255, 255, 0.07);
}
[data-layout="frosted"] .adm-card { border-radius: 12px; }
[data-layout="frosted"] .adm-hub .adm-card:hover { border-color: var(--gold); box-shadow: var(--shadow-hover), inset 0 1px 0 rgba(255, 255, 255, 0.07); }
[data-layout="frosted"] .pt-row { border-bottom: 1px solid var(--border); }
[data-layout="frosted"] .pt-row:last-child { border-bottom: none; }
[data-layout="frosted"] .pt-listhead { border-bottom: none; background: rgba(255, 255, 255, .05); }
[data-layout="frosted"] .pt-row:hover, [data-layout="frosted"] .pt-row:focus-visible { background: rgba(255, 255, 255, .07); }
[data-layout="frosted"] .pt-row.on { background: var(--gold-light); }
[data-layout="frosted"] .action-btn { border-radius: var(--r-btn); }
[data-layout="frosted"] input, [data-layout="frosted"] select, [data-layout="frosted"] textarea { border-radius: var(--r-field); background: var(--bg-input); }
[data-layout="frosted"] .pt-overlay, [data-layout="frosted"] .app-overlay { background: rgba(0, 0, 0, .55); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
[data-layout="frosted"] .pt-rowdesc-tip { box-shadow: 0 8px 24px rgba(0, 0, 0, .35); border-radius: 8px; }
[data-layout="frosted"] .pf-actions .fr-btn { background: rgba(20, 20, 22, .45); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-color: rgba(255, 255, 255, .16); }
/* Solid where a floor is needed: dialogs, tooltips, dropdown lists. */
[data-layout="frosted"] .app-dialog, [data-layout="frosted"] .pt-to-dialog, [data-layout="frosted"] .pt-again-dialog,
[data-layout="frosted"] .pt-rowdesc-tip, [data-layout="frosted"] .pt-goal-list, [data-layout="frosted"] .fr-ctx,
[data-layout="frosted"] .adm-chip > p {
    background: #141416; backdrop-filter: none; -webkit-backdrop-filter: none; border-color: rgba(255, 255, 255, .16);
}
[data-layout="frosted"] .pt-goal-list, [data-layout="frosted"] .fr-ctx { box-shadow: 0 12px 32px rgba(0, 0, 0, .5); }
/* The native select arrow painted a white box on the frosted fields: draw our own chevron, and
   `color-scheme: dark` is the one lever that makes Chrome paint the OS list dark. */
[data-layout="frosted"] select {
    appearance: none; -webkit-appearance: none; padding-right: 30px; color-scheme: dark;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23a3adb8' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
    background-repeat: no-repeat; background-position: right 10px center; background-size: 14px;
}
[data-layout="frosted"] select option { background: #141416; color: #f2f5f8; }