/* Fixed photographic base, frosted chrome, clear rims and white reading surfaces. */
.grey-site.glass-depth {
    --frame-ember: #e34c35;
    --frame-ember-text: #ae3021;
    --frame-bg: #c7c9cc;
    --frame-soft: #e0e1e3;
    --frame-paper: #fff;
    --frame-ink: #242629;
    --frame-muted: #565a60;
    --frame-line: rgba(44, 47, 53, .18);
    --glass-edge-cool: rgba(219, 227, 239, .65);
    --depth-rim: 9px;
    --depth-shine: linear-gradient(128deg, rgba(255,255,255,.86), rgba(255,255,255,.12) 28%, rgba(216,222,230,.2) 61%, rgba(255,255,255,.7));
    --depth-light: -3px -4px 12px rgba(255,242,202,.55);
    --depth-shadow: 9px 14px 25px rgba(32,35,41,.19);
    --depth-frame: inset 0 1px 0 #fff, inset 0 -1px 0 rgba(93,100,113,.22), 0 -2px 3px rgba(255,246,222,.88), var(--depth-light), var(--depth-shadow);
    --section-backdrop: none;
    --section-backdrop-position: center;
    isolation: isolate;
    background: #a4a8ae;
}

.glass-depth[data-background-section="home"] { --section-backdrop: url("/assets/images/site/backgrounds/home-v1.webp"); }
.glass-depth[data-background-section="notes"] { --section-backdrop: url("/assets/images/site/backgrounds/notes-v1.webp"); }
.glass-depth[data-background-section="process"] { --section-backdrop: url("/assets/images/site/backgrounds/process-v1.webp"); --section-backdrop-position: 75% center; }
.glass-depth[data-background-section="tools"] { --section-backdrop: url("/assets/images/site/backgrounds/tools-v1.webp"); }
.glass-depth[data-background-section="portfolio"] { --section-backdrop: url("/assets/images/site/backgrounds/portfolio-v1.webp"); }
.glass-depth[data-background-section="contact"] { --section-backdrop: url("/assets/images/site/backgrounds/contact-v1.webp"); --section-backdrop-position: 75% center; }
.glass-depth[data-background-section="search"] { --section-backdrop: url("/assets/images/site/backgrounds/search-v1.webp"); --section-backdrop-position: 85% center; }
.glass-depth[data-background-section="account"] { --section-backdrop: url("/assets/images/site/backgrounds/account-v1.webp"); --section-backdrop-position: 80% center; }

/* A fixed layer avoids mobile background-attachment quirks and adds no scroll handler. */
.grey-site.glass-depth::before {
    content: "";
    position: fixed;
    inset: 0;
    height: 100vh;
    height: 100lvh;
    z-index: -1;
    pointer-events: none;
    background: var(--section-backdrop) var(--section-backdrop-position) / cover no-repeat;
}

.glass-depth .site-stage {
    background: transparent;
}

.glass-depth .site-frame {
    background: rgba(229,236,246,.16);
    border: 1px solid rgba(255,255,255,.8);
    border-top-color: #fff4d7;
    box-shadow: inset 0 1px 0 #fff, -5px -6px 22px rgba(255,240,198,.48), 20px 25px 55px rgba(21,24,30,.3);
}

/* The rear frame catches light without painting over the section photograph. */
.glass-depth .site-frame::before {
    content: "";
    position: absolute;
    inset: -6px;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(125deg, rgba(255,255,255,.1), transparent 42%, rgba(204,224,246,.08));
    filter: none;
    opacity: 1;
}

.grey-site.glass-depth :is(
    .signal-hero, .page-intro:not(.account-intro), .services-section, .knowledge-section,
    .delivery-section, .about-section, .content-section, .article-page, .article-page-header,
    .article-reading, .article-credit, .article-accreditations, .article-support, .adsense-band,
    .process-overview, .capability-section, .project-section, .contact-layout, .auth-page,
    .json-tool, .password-tool, .date-tool, .ico-tool, .colour-tool, .encoder-tool,
    .comparer-tool, .downloader-tool, .css-tool, .margin-tool
) {
    background: linear-gradient(90deg, rgba(250,252,255,.1), rgba(250,252,255,.5) 24%, rgba(250,252,255,.5) 78%, rgba(250,252,255,.1)) rgba(237,243,250,.32);
}

.grey-site.glass-depth :is(.services-section, .article-reading, .contact-layout, .auth-page) {
    background-color: rgba(247,249,252,.38);
}

.grey-site.glass-depth .article-page { background: transparent; }
.grey-site.glass-depth .signal-visual { background-color: rgba(220,233,247,.18); }
.grey-site.glass-depth .mesh-statement { color: #41464d; text-shadow: none; }

.grey-site.glass-depth :is(#note-search-page, #ai-screenshot-redactor, #ai-field-mapper, #ai-audio-transcriber, #ai-background-remover) {
    background: rgba(237,243,250,.6);
}

.grey-site.glass-depth :is(.frame-header, .member-dashboard-band) {
    background-color: rgba(247,249,252,.62);
    background-image: var(--depth-shine), var(--material-reflection);
    background-size: 100% 100%, 720px 720px;
    background-blend-mode: normal, soft-light;
    -webkit-backdrop-filter: blur(22px) saturate(.75);
    backdrop-filter: blur(22px) saturate(.75);
    box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 rgba(255,246,222,.8), 0 8px 20px rgba(37,41,48,.16);
}

.grey-site.glass-depth .member-dashboard-band {
    background-color: rgba(243,245,249,.74);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}

.grey-site.glass-depth .frame-header::after {
    height: 6px;
    bottom: -3px;
    background-size: 512px 6px;
    box-shadow: 0 1px 8px rgba(255,240,194,.65), 0 5px 10px rgba(33,37,44,.16);
}

/* The white padding-box sits inside a transparent reflective border, without extra wrappers. */
.grey-site.glass-depth :is(
    .service-grid > article, .article-card, .capability-grid > article, .project-list > article,
    .login-inline, .protected-note, .comment, .admin-panel, .admin-form, .admin-stats > article,
    .account-panel, .issue-comment, .contact-form, .comment-form, .accreditation-provider,
    .date-endpoint, .date-adjust-form > section, .date-world-source, .date-world-locations,
    .password-length-panel, .password-character-panel, .password-advanced-panel,
    .ico-source-panel, .ico-options-panel, .encoder-panel, .colour-fields > article,
    .json-pane, .comparer-pane, .downloader-source-panel, .downloader-output-panel,
    .margin-inputs, .margin-results, .css-preview-column, .css-controls, .ai-pane, .bgr-pane
) {
    border: var(--depth-rim) solid transparent;
    border-radius: 7px;
    background-color: transparent;
    background-image: linear-gradient(#fff, #fff), var(--material-led-edge), var(--depth-shine), var(--material-reflection);
    background-clip: padding-box, border-box, border-box, border-box;
    background-origin: border-box;
    background-position: left top, left top, left top, center;
    background-size: 100% 100%, 512px 5px, 100% 100%, 720px 720px;
    background-repeat: no-repeat, repeat-x, no-repeat, repeat;
    background-blend-mode: normal;
    box-shadow: var(--depth-frame);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

.grey-site.glass-depth :is(.article-card, .service-grid > article, .project-list > article, .account-panel, .date-endpoint):hover {
    border-color: transparent;
    box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 rgba(93,100,113,.22), 0 -2px 4px #fff4d7,
        -4px -5px 16px rgba(255,240,194,.62), 10px 17px 27px rgba(32,35,41,.22);
}

.grey-site.glass-depth .service-grid > article::before { display: none; }
.grey-site.glass-depth :is(.article-card-body, .comment-content) { background: #fff; }
.grey-site.glass-depth :is(.article-image img, .article-feature img) { filter: none; }
.grey-site.glass-depth .article-image::after { background: transparent; }
.grey-site.glass-depth .editorial-grid { gap: 22px; }

.grey-site.glass-depth .live-article-body {
    width: min(936px, 100%);
    padding: 32px 38px;
    border: 12px solid transparent;
    border-radius: 7px;
    background: linear-gradient(#fff, #fff) padding-box, var(--depth-shine) border-box,
        var(--material-reflection) center / 720px 720px border-box;
    box-shadow: var(--depth-frame);
}

/* Shared tool bands remain unframed; their white work areas get a clear perimeter. */
.grey-site.glass-depth :is(.json-workbench, .comparer-workbench, .margin-workspace, .css-workspace, .ai-grid) {
    gap: 16px;
    padding: 16px;
    background: rgba(213,218,225,.28);
}

.grey-site.glass-depth :is(#json-input, .json-output-highlight, .encoder-workbench textarea, .comparer-pane textarea) {
    background-color: #fff;
    background-image: none;
    box-shadow: inset 0 1px 3px rgba(29,34,42,.05);
}

.grey-site.glass-depth :is(.date-world-card, .encoder-workbench, .account-panel header) {
    background: #fff;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

.grey-site.glass-depth .article-summary-grid {
    background: rgba(241,244,248,.58) var(--material-reflection) center / 720px 720px;
    background-blend-mode: soft-light;
    -webkit-backdrop-filter: blur(9px);
    backdrop-filter: blur(9px);
    box-shadow: inset 0 1px 0 #fff, inset 0 -2px 0 rgba(255,241,204,.8);
}

/* Corporate red commands with white labels and a darker-red hover state. */
.grey-site.glass-depth :is(
    .header-cta, .dark-command, a.button:not(.read-more),
    button[type="submit"]:not(.article-action):not(.member-section-options button),
    .json-tool-action:not(.json-search-step):not(.json-tree-toggle), .comparer-action, .password-primary-action,
    .date-tool-action, .encoder-action, .ico-tool-action, .ico-file-action,
    .downloader-action, .bgr-action:not(.bgr-icon), .ai-btn:not(.ai-icon),
    .ns-button:not(.ns-icon), .margin-primary, .user-access-edit,
    [data-article-readmore], [data-article-upload-image], [data-article-upload-file]
) {
    /* Older component sheets have long :not() chains and ID selectors. Keep this override visual only. */
    color: #fff !important;
    background-color: var(--frame-ember) !important;
    background-image: linear-gradient(175deg, rgba(255,255,255,.22), transparent 48%) !important;
    border-color: #b93a28 !important;
    border-top-color: #f79d82 !important;
    box-shadow: inset 0 1px 0 rgba(255,244,225,.72), inset 0 -1px 0 rgba(32,35,41,.16),
        -2px -3px 9px rgba(255,242,207,.45), 4px 6px 10px rgba(32,35,41,.17) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    text-shadow: none;
    font-weight: 700;
}

.grey-site.glass-depth :is(
    .header-cta, .dark-command, a.button:not(.read-more),
    button[type="submit"]:not(.article-action):not(.member-section-options button),
    .json-tool-action:not(.json-search-step):not(.json-tree-toggle), .comparer-action, .password-primary-action,
    .date-tool-action, .encoder-action, .ico-tool-action, .ico-file-action,
    .downloader-action, .bgr-action:not(.bgr-icon), .ai-btn:not(.ai-icon),
    .ns-button:not(.ns-icon), .margin-primary, .user-access-edit,
    [data-article-readmore], [data-article-upload-image], [data-article-upload-file]
):hover:not(:disabled):not([aria-disabled="true"]) {
    background-color: #c33b27 !important;
    background-image: linear-gradient(175deg, rgba(255,255,255,.08), transparent 48%) !important;
    box-shadow: inset 0 1px 0 #fff0da, -3px -4px 12px rgba(255,239,195,.6), 5px 8px 13px rgba(32,35,41,.2) !important;
    transform: none;
}

.grey-site.glass-depth :is(button, a.button, .dark-command, .header-cta):focus-visible {
    outline: 2px solid #832b1f;
    outline-offset: 3px;
}

.grey-site.glass-depth :is(.frame-tools, .member-section-nav, .article-back, .related-article-list,
    .date-icon-action, .encoder-icon-action, .colour-copy-button, .password-copy-action,
    .css-icon, .margin-icon, .ai-icon, .bgr-icon, .ns-icon, .scroll-top,
    .date-mode-tab, .encoder-tab, .downloader-mode-tab, .json-search-step) i {
    color: var(--frame-ember);
}
.grey-site.glass-depth :is(.service-grid > article > a, .project-list > article > a, .text-command > span,
    .section-link > span, .read-more > span, .service-mark) { color: var(--frame-ember); }
.grey-site.glass-depth :is(.article-action) { --action-color: #e34c35; }
.grey-site.glass-depth .admin-stats strong { color: var(--frame-ember); }
.grey-site.glass-depth .json-tree-toggle { color: var(--frame-ember); }

.grey-site.glass-depth :is(.frame-brand strong, .signal-copy h1 > span, .article-signoff strong,
    .article-page-meta > span:last-child, .about-section .section-index) {
    color: var(--frame-ember);
}
.grey-site.glass-depth .frame-brand strong { font-size: 18px; font-weight: 800; }
.grey-site.glass-depth .article-signoff strong { font-size: 19px; }
.grey-site.glass-depth .frame-nav a[aria-current="page"] { color: var(--frame-ember-text); }
.grey-site.glass-depth .live-article-body a { color: var(--frame-ember-text); text-decoration-color: var(--frame-ember); }
.grey-site.glass-depth ::selection { background: #f7bdab; color: #241713; }

/* Opaque menus stay readable; modal backdrops soften what is behind, never their own text. */
.grey-site.glass-depth .member-section-options { background: #fff; }
.grey-site.glass-depth .modal-backdrop,
.glass-depth #site-search-dialog::backdrop {
    background: rgba(45,49,57,.42);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}
.grey-site.glass-depth .login-modal,
.glass-depth #site-search-dialog {
    border: 10px solid transparent;
    background: linear-gradient(#fff, #fff) padding-box, var(--depth-shine) border-box;
    box-shadow: var(--depth-frame), 16px 26px 60px rgba(23,28,36,.3);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

@media (max-width: 760px) {
    .grey-site.glass-depth { --depth-rim: 6px; --depth-shadow: 5px 9px 16px rgba(32,35,41,.15); }
    .glass-depth[data-background-section="home"] { --section-backdrop-position: 78% center; }
    .glass-depth[data-background-section="notes"] { --section-backdrop-position: 15% center; }
    .glass-depth[data-background-section="tools"] { --section-backdrop-position: 85% center; }
    .glass-depth[data-background-section="portfolio"] { --section-backdrop-position: 80% center; }
    .grey-site.glass-depth .frame-brand strong { font-size: 16px; }
    .grey-site.glass-depth .editorial-grid { gap: 18px; }
    .grey-site.glass-depth .live-article-body { border-width: 7px; padding: 22px 18px; }
    .grey-site.glass-depth :is(.json-workbench, .comparer-workbench, .margin-workspace, .css-workspace, .ai-grid) { gap: 12px; padding: 12px; }
}

@media (prefers-reduced-motion: reduce) {
    .glass-depth .frame-header::after { animation: none; }
}

@media (prefers-reduced-transparency: reduce) {
    .grey-site.glass-depth::before { display: none; }
    .glass-depth .site-frame { background: #e5e7eb; }
    .grey-site.glass-depth :is(.frame-header, .member-dashboard-band, .article-summary-grid) {
        background-color: #f0f1f3;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
}

@media print {
    .grey-site.glass-depth, .glass-depth .site-stage, .glass-depth .site-frame, .glass-depth .live-article-body {
        background: #fff !important;
        box-shadow: none !important;
    }
    .grey-site.glass-depth::before, .glass-depth .site-frame::before { display: none; }
    .glass-depth .live-article-body { width: 100%; padding: 0; border: 0; }
    .glass-depth :is(.print-invoice, .print-invoice *, .article-page, .article-page *) {
        box-shadow: none !important;
        background-image: none !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }
}