/* Repeating mineral, glass-reflection and warm LED image materials. */
.grey-site.material-surfaces {
    --material-mineral: url("/assets/images/site/materials/mineral-grey-tile.webp");
    --material-reflection: url("/assets/images/site/materials/glass-reflection-tile.webp");
    --material-led-edge: url("/assets/images/site/materials/warm-led-edge-tile.webp");
    --material-led: rgba(255, 244, 207, 0.72);
    --material-led-soft: rgba(255, 237, 183, 0.24);
    --material-cast: rgba(35, 40, 37, 0.18);
    background: #424642 var(--material-mineral) repeat;
    background-size: 640px 640px;
}

.material-surfaces .site-stage {
    background-color: #454a46;
    background-image:
        linear-gradient(132deg, rgba(255, 245, 208, 0.13), transparent 31%),
        linear-gradient(315deg, rgba(24, 29, 26, 0.22), transparent 49%),
        var(--material-mineral);
    background-repeat: no-repeat, no-repeat, repeat;
    background-size: 100% 100%, 100% 100%, 640px 640px;
    background-blend-mode: normal, multiply, soft-light;
}

.material-surfaces .site-frame {
    border-color: rgba(255, 255, 255, 0.7);
    border-top-color: var(--material-led);
    background-color: #d2d5d1;
    background-image:
        var(--material-led-edge),
        linear-gradient(145deg, rgba(255, 255, 255, 0.27), transparent 34%),
        var(--material-mineral);
    background-repeat: repeat-x, no-repeat, repeat;
    background-position: left top, left top, left top;
    background-size: 512px 10px, 100% 100%, 640px 640px;
    background-blend-mode: normal, normal, soft-light;
    box-shadow:
        inset 1px 1px 0 rgba(255, 255, 255, 0.74),
        -10px -8px 34px rgba(255, 239, 192, 0.24),
        30px 36px 78px rgba(13, 17, 15, 0.4);
}

.material-surfaces :is(
    .signal-hero,
    .page-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
) {
    background-color: rgba(218, 221, 217, 0.9);
    background-image:
        linear-gradient(125deg, rgba(255, 255, 255, 0.34), rgba(222, 225, 221, 0.17) 52%, rgba(188, 193, 189, 0.18)),
        var(--material-mineral);
    background-repeat: no-repeat, repeat;
    background-size: 100% 100%, 640px 640px;
    background-blend-mode: normal, soft-light;
}

.material-surfaces :is(
    .services-section,
    .about-section,
    .capability-section,
    .project-section,
    .article-reading,
    .article-credit,
    .contact-layout,
    .auth-page
) {
    background-color: rgba(236, 238, 234, 0.92);
}

.material-surfaces :is(
    .knowledge-section,
    .content-section,
    .article-accreditations,
    .article-support,
    .adsense-band,
    .process-overview,
    .delivery-section
) {
    background-color: rgba(207, 211, 207, 0.9);
}

.material-surfaces .frame-header,
.material-surfaces .member-dashboard-band {
    background-color: rgba(232, 235, 231, 0.76);
    background-image:
        linear-gradient(112deg, rgba(255, 255, 255, 0.62), rgba(222, 226, 222, 0.42)),
        var(--material-reflection);
    background-repeat: no-repeat, repeat;
    background-size: 100% 100%, 720px 720px;
    background-blend-mode: normal, soft-light;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.96),
        0 12px 28px rgba(29, 34, 31, 0.11);
    backdrop-filter: blur(26px) saturate(1.16);
    -webkit-backdrop-filter: blur(26px) saturate(1.16);
}

.material-surfaces .frame-header::after {
    right: 0;
    left: 0;
    bottom: -5px;
    height: 12px;
    background: var(--material-led-edge) repeat-x center / 512px 12px;
    box-shadow: 0 -2px 8px rgba(255, 244, 210, 0.58), 0 5px 16px rgba(31, 35, 33, 0.12);
    opacity: 1;
}

.material-surfaces :is(
    .service-grid article,
    .grey-site .article-card,
    .capability-grid article,
    .login-inline,
    .login-modal,
    .protected-note,
    .grey-site .comment,
    .admin-panel,
    .admin-form,
    .admin-stats article,
    .account-panel,
    .issue-comment,
    .accreditation-provider,
    .paypal-donate-form,
    .date-endpoint,
    .date-adjust-form > section,
    .date-world-source,
    .date-world-locations,
    .date-world-card,
    .password-length-panel,
    .password-character-panel,
    .password-advanced-panel,
    .ico-source-panel,
    .ico-options-panel,
    .encoder-panel,
    .colour-fields article
) {
    border: 1px solid rgba(255, 255, 255, 0.78);
    border-top-color: rgba(255, 248, 220, 0.94);
    border-left-color: rgba(255, 255, 255, 0.94);
    border-radius: 6px;
    background-color: rgba(239, 243, 239, 0.54);
    background-image:
        var(--material-led-edge),
        linear-gradient(137deg, rgba(255, 255, 255, 0.66), rgba(242, 246, 242, 0.28) 48%, rgba(198, 207, 202, 0.18)),
        var(--material-reflection);
    background-repeat: repeat-x, no-repeat, repeat;
    background-position: left top, left top, center;
    background-size: 512px 9px, 100% 100%, 720px 720px;
    background-blend-mode: normal, normal, soft-light;
    box-shadow:
        inset 1px 1px 0 rgba(255, 255, 255, 0.98),
        inset -1px -1px 0 rgba(118, 130, 123, 0.14),
        -7px -6px 20px var(--material-led-soft),
        12px 16px 28px var(--material-cast);
    backdrop-filter: blur(18px) saturate(1.08);
    -webkit-backdrop-filter: blur(18px) saturate(1.08);
}

.material-surfaces .service-grid article {
    border-left: 2px solid var(--frame-ember);
}

.material-surfaces :is(
    .service-grid article,
    .grey-site .article-card,
    .capability-grid article,
    .login-inline,
    .admin-panel,
    .admin-form,
    .account-panel,
    .date-endpoint,
    .date-world-card,
    .password-length-panel,
    .password-character-panel,
    .password-advanced-panel,
    .ico-source-panel,
    .ico-options-panel
):hover {
    border-top-color: rgba(255, 250, 228, 1);
    box-shadow:
        inset 1px 1px 0 #fff,
        inset -1px -1px 0 rgba(118, 130, 123, 0.17),
        -9px -8px 24px rgba(255, 238, 184, 0.31),
        16px 20px 34px rgba(31, 36, 33, 0.2);
}

.material-surfaces .article-summary-grid {
    background-color: rgba(229, 232, 228, 0.58);
    background-image:
        var(--material-led-edge),
        linear-gradient(118deg, rgba(255, 255, 255, 0.46), rgba(210, 215, 211, 0.24)),
        var(--material-reflection);
    background-repeat: repeat-x, no-repeat, repeat;
    background-position: left top, left top, center;
    background-size: 512px 8px, 100% 100%, 720px 720px;
    background-blend-mode: normal, normal, soft-light;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.84), inset 0 -1px 0 rgba(84, 94, 88, 0.1);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.material-surfaces :is(
    .json-tool,
    .password-tool,
    .date-tool,
    .ico-tool,
    .colour-tool,
    .encoder-tool,
    .comparer-tool,
    .downloader-tool
) {
    background-color: rgba(220, 224, 220, 0.9);
    background-image:
        linear-gradient(132deg, rgba(255, 255, 255, 0.36), rgba(205, 211, 206, 0.2)),
        var(--material-mineral);
    background-repeat: no-repeat, repeat;
    background-size: 100% 100%, 640px 640px;
    background-blend-mode: normal, soft-light;
}

.material-surfaces :is(
    .json-pane,
    .downloader-source-panel,
    .downloader-output-panel,
    .encoder-workbench,
    .comparer-pane
) {
    background-color: rgba(237, 241, 237, 0.52);
    background-image:
        var(--material-led-edge),
        linear-gradient(137deg, rgba(255, 255, 255, 0.56), rgba(218, 225, 220, 0.24)),
        var(--material-reflection);
    background-repeat: repeat-x, no-repeat, repeat;
    background-position: left top, left top, center;
    background-size: 512px 8px, 100% 100%, 720px 720px;
    background-blend-mode: normal, normal, soft-light;
    box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(16px) saturate(1.06);
    -webkit-backdrop-filter: blur(16px) saturate(1.06);
}

.material-surfaces :is(
    .grey-site input,
    .grey-site textarea,
    .grey-site select,
    .archive-search input,
    .json-output-highlight
) {
    background-color: rgba(250, 252, 249, 0.64);
    background-image:
        linear-gradient(135deg, rgba(255, 255, 255, 0.66), rgba(224, 231, 226, 0.28)),
        var(--material-reflection);
    background-repeat: no-repeat, repeat;
    background-size: 100% 100%, 720px 720px;
    background-blend-mode: normal, soft-light;
    box-shadow:
        inset 1px 1px 0 rgba(255, 255, 255, 0.96),
        inset -1px -1px 0 rgba(116, 129, 121, 0.13),
        -3px -2px 10px rgba(255, 239, 195, 0.13),
        5px 7px 14px rgba(31, 36, 33, 0.08);
}

.material-surfaces .project-list {
    display: grid;
    gap: 12px;
    border-top: 0;
}

.material-surfaces .project-list article {
    border: 1px solid rgba(255, 255, 255, 0.75);
    border-top-color: rgba(255, 247, 216, 0.92);
    border-radius: 6px;
    background-color: rgba(237, 241, 237, 0.48);
    background-image:
        var(--material-led-edge),
        linear-gradient(132deg, rgba(255, 255, 255, 0.56), rgba(210, 218, 212, 0.2)),
        var(--material-reflection);
    background-repeat: repeat-x, no-repeat, repeat;
    background-position: left top, left top, center;
    background-size: 512px 9px, 100% 100%, 720px 720px;
    background-blend-mode: normal, normal, soft-light;
    box-shadow:
        inset 1px 1px 0 rgba(255, 255, 255, 0.94),
        -6px -5px 18px rgba(255, 239, 195, 0.18),
        11px 15px 26px rgba(31, 36, 33, 0.13);
    backdrop-filter: blur(16px) saturate(1.06);
    -webkit-backdrop-filter: blur(16px) saturate(1.06);
}

.material-surfaces .adsense-band {
    box-shadow: inset 0 2px 0 rgba(255, 248, 219, 0.66), inset 0 -1px 0 rgba(49, 56, 52, 0.12);
}

@media (max-width: 760px) {
    .grey-site.material-surfaces,
    .material-surfaces .site-stage,
    .material-surfaces .site-frame,
    .material-surfaces :is(
        .signal-hero,
        .page-intro,
        .grey-section,
        .content-section,
        .article-page,
        .article-page-header,
        .article-reading,
        .article-credit,
        .article-accreditations,
        .article-support,
        .adsense-band,
        .contact-layout,
        .auth-page
    ) {
        background-size: 520px 520px;
    }

    .material-surfaces :is(
        .service-grid article,
        .grey-site .article-card,
        .capability-grid article,
        .login-inline,
        .admin-panel,
        .admin-form,
        .account-panel,
        .project-list article
    ) {
        box-shadow:
            inset 1px 1px 0 rgba(255, 255, 255, 0.96),
            inset -1px -1px 0 rgba(118, 130, 123, 0.12),
            -4px -3px 13px rgba(255, 238, 184, 0.18),
            7px 10px 18px rgba(31, 36, 33, 0.13);
    }
}

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

@media print {
    .material-surfaces :is(.invoice-screen-shell, .print-invoice, .print-invoice *) {
        background-image: none !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
    }
}