/* Tool pages share the site's width, glass edges and spacing. */
.grey-site.glass-depth.photographic-glass.tools-section {
    --tool-space: clamp(18px, 2.2vw, 30px);
    --tool-gap: 20px;
}

.grey-site.glass-depth.photographic-glass.tools-section main > .tool-page {
    display: block;
    width: 100%;
    min-width: 0;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent !important;
    box-shadow: none;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

.grey-site.glass-depth.photographic-glass.tools-section .tool-page-heading {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px 32px;
    width: var(--photo-banner-width);
    min-height: 164px !important;
    box-sizing: border-box;
    margin: 26px auto 24px;
    padding: 26px var(--tool-space);
    border: 3px solid;
    border-color: var(--photo-panel-edge);
    border-radius: var(--photo-panel-radius);
    color: var(--frame-ink);
    background: var(--photo-shine), var(--photo-fill) !important;
    box-shadow: var(--photo-shadow);
    -webkit-backdrop-filter: blur(13px);
    backdrop-filter: blur(13px);
}
.grey-site.glass-depth.photographic-glass.tools-section .tool-page-heading::after { content: none; }
.grey-site.glass-depth.photographic-glass.tools-section .tool-page-heading > div:first-child { min-width: 0; flex: 1 1 320px; }
.grey-site.glass-depth.photographic-glass.tools-section .tool-page-heading h1 {
    margin: 8px 0 0;
    color: var(--frame-ink);
    font: 600 clamp(26px, 2.8vw, 40px)/1.18 var(--font-ui);
    letter-spacing: -.025em;
    overflow-wrap: anywhere;
    text-shadow: none;
}
.grey-site.glass-depth.photographic-glass.tools-section .tool-page-heading .section-index { margin: 0; color: var(--site-corporate-red); }
.grey-site.glass-depth.photographic-glass.tools-section .tool-page-heading .page-intro-side { flex: 0 1 500px; }
.grey-site.glass-depth.photographic-glass.tools-section .tool-page-heading .page-intro-side p { margin: 0; font-size: 15px; line-height: 1.7; }
.grey-site.glass-depth.photographic-glass.tools-section .tool-page > .site-ad {
    width: var(--photo-banner-width);
    box-sizing: border-box;
    margin: 24px auto;
}

/* One full-width frosted workspace contains results, controls and help text. */
.grey-site.glass-depth.photographic-glass.tools-section .tool-page-workspace {
    display: flow-root;
    width: var(--photo-banner-width);
    min-width: 0;
    box-sizing: border-box;
    margin: 24px auto 32px;
    padding: var(--tool-space);
    border: 3px solid;
    border-color: var(--photo-panel-edge);
    border-radius: var(--photo-panel-radius);
    background: var(--photo-shine), var(--photo-fill);
    color: var(--frame-ink);
    box-shadow: var(--photo-shadow);
    -webkit-backdrop-filter: var(--photo-frost);
    backdrop-filter: var(--photo-frost);
}
.tool-page-workspace, .tool-page-workspace *, .tool-page-workspace *::before, .tool-page-workspace *::after { box-sizing: border-box; }
.tool-page-workspace > *, .tool-page-workspace :is(form, section, article, aside) { min-width: 0; }
.grey-site.glass-depth.photographic-glass.tools-section .tools-support { width: var(--photo-banner-width); box-sizing: border-box; margin-inline: auto; }
.grey-site.glass-depth.photographic-glass.tools-section[data-page-template='tools'] main > .tools-project-section { width: var(--photo-banner-width); box-sizing: border-box; margin: 24px auto 32px; padding: 0; }
.grey-site.glass-depth.photographic-glass.tools-section[data-page-template='tools'] :is(.tools-download-note, .empty-state) {
    max-width: none;
    margin: 0 0 24px;
    padding: 20px var(--tool-space);
    border: 3px solid;
    border-color: var(--photo-panel-edge);
    border-radius: var(--photo-panel-radius);
    background: var(--photo-shine), var(--photo-fill);
    box-shadow: var(--photo-shadow);
    -webkit-backdrop-filter: var(--photo-frost);
    backdrop-filter: var(--photo-frost);
}
.grey-site.glass-depth.photographic-glass.tools-section .tool-page-toolbar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 12px;
    margin: 0 0 20px;
    padding: 0 0 20px;
    border-bottom: 1px solid rgba(79,65,67,.16);
}
.grey-site.glass-depth.photographic-glass.tools-section .tool-page-toolbar :is(.reference-count, .encoder-local-state) { margin: 0; }

/* Internal columns use one gutter, rather than inheriting another page gutter. */
.grey-site.glass-depth.photographic-glass.tools-section .tool-page-workspace :is(
    .json-workbench, .comparer-inputs, .comparer-results, .password-settings,
    .date-adjust-workspace, .ico-workspace, .encoder-workbench, .encoder-file-grid,
    .encoder-hmac-grid, .downloader-workspace, .css-workspace, .margin-workspace,
    .ai-grid, .bgr-workspace, .colour-value-grid
) {
    width: 100%;
    margin: 0;
    padding: 0;
    gap: var(--tool-gap);
    border: 0;
    background: transparent;
}

/* Quieter inner surfaces keep input and output distinct without stacked rims. */
.grey-site.glass-depth.photographic-glass.tools-section .tool-page-workspace :is(
    .json-pane, .comparer-input-pane, .comparer-result-pane,
    .password-settings > section, .date-endpoint, .date-adjust-form > section,
    .date-adjust-result, .date-world-source, .date-world-locations,
    .ico-source-panel, .ico-options-panel, .ico-output-panel,
    .encoder-panel, .encoder-pane, .encoder-file-pane, .encoder-hmac-panel,
    .downloader-source-panel, .downloader-output-panel,
    .margin-inputs, .margin-results, .css-preview-column, .css-controls,
    .ai-pane, .bgr-pane, .colour-value-grid > article,
    .reference-toolbar, .reference-results
) {
    min-width: 0;
    border: 1px solid;
    border-color: var(--photo-panel-edge);
    border-radius: 12px;
    background: rgba(255,255,255,.38) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.6);
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}
.grey-site.glass-depth.photographic-glass.tools-section .tool-page-workspace :is(
    .password-settings > section, .date-endpoint, .date-adjust-form > section,
    .date-adjust-result, .date-world-source, .date-world-locations,
    .ico-source-panel, .ico-options-panel, .downloader-source-panel, .downloader-output-panel,
    .margin-inputs, .margin-results, .css-preview-column, .css-controls, .ai-pane, .bgr-pane
) { padding: 20px; }
.grey-site.glass-depth.photographic-glass.tools-section .tool-page-workspace :is(
    .json-tool-status, .comparer-status, .password-tool-status, .date-tool-status,
    .colour-tool-status, .encoder-status, .ico-tool-status, .ai-status-wrap,
    .downloader-tool-footer, .downloader-reference-note, .bgr-progress-row
) {
    margin: 20px 0 0;
    padding: 14px 16px;
    border: 1px solid rgba(79,65,67,.12);
    border-radius: 12px;
    background: rgba(255,255,255,.45);
    overflow-wrap: anywhere;
}
.grey-site.glass-depth.photographic-glass.tools-section .tool-page-workspace :is(
    .password-result, .comparer-summary, .date-duration-result, .colour-hue-control,
    .bgr-toolbar, .bgr-controls, .bgr-notes, .ai-band, .ai-note, .margin-formulas
) {
    margin: 20px 0;
    padding: 20px;
    border: 1px solid rgba(79,65,67,.12);
    border-radius: 12px;
    background: rgba(255,255,255,.38);
}
.grey-site.glass-depth.photographic-glass.tools-section .tool-page-workspace > :first-child { margin-top: 0; }
.grey-site.glass-depth.photographic-glass.tools-section .tool-page-workspace > :last-child { margin-bottom: 0; }
.grey-site.glass-depth.photographic-glass.tools-section .tool-page-workspace :is(.reference-toolbar, .reference-results) { width: 100%; margin: 0 0 20px; padding: 20px; }
.grey-site.glass-depth.photographic-glass.tools-section .tool-page-workspace .reference-results { margin-bottom: 0; }
.grey-site.glass-depth.photographic-glass.tools-section .tool-page-workspace .encoder-panel { padding: 18px; }
.grey-site.glass-depth.photographic-glass.tools-section .tool-page-workspace :is(.encoder-action-bar, .encoder-mode-tabs) { padding-inline: 0; }
.grey-site.glass-depth.photographic-glass.tools-section .tool-page-workspace :is(.date-mode-tabs, .encoder-tabs, .css-tabs, .margin-tabs, .downloader-mode-tabs, .ai-tabs) { margin: 0 0 20px; border: 1px solid rgba(79,65,67,.12); border-radius: 12px; background: rgba(255,255,255,.38); }
.grey-site.glass-depth.photographic-glass.tools-section .tool-page-workspace :is(.json-workbench, .ico-workspace) { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
.grey-site.glass-depth.photographic-glass.tools-section .tool-page-workspace :is(.json-pane, .comparer-input-pane, .comparer-result-pane) { overflow: hidden; }
.grey-site.glass-depth.photographic-glass.tools-section .tool-page-workspace .date-adjust-workspace { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
.grey-site.glass-depth.photographic-glass.tools-section .tool-page-workspace .css-workspace { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
.grey-site.glass-depth.photographic-glass.tools-section .tool-page-workspace .colour-picker-stage { grid-template-columns: minmax(0, .42fr) minmax(0, 1.58fr); }
.grey-site.glass-depth.photographic-glass.tools-section .tool-page-workspace .date-check-option { display: inline-flex; align-items: center; gap: 10px; margin: 0; }

@media (max-width: 1000px) {
    .grey-site.glass-depth.photographic-glass.tools-section .tool-page-workspace :is(.json-workbench, .ico-workspace, .date-adjust-workspace, .css-workspace) { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
    .grey-site.glass-depth.photographic-glass.tools-section { --tool-space: 18px; --tool-gap: 16px; }
    .grey-site.glass-depth.photographic-glass.tools-section .tool-page-heading { min-height: 0 !important; margin-top: 20px; padding: 22px 18px; gap: 20px; }
    .grey-site.glass-depth.photographic-glass.tools-section .tool-page-heading > div:first-child { flex-basis: 100%; }
    .grey-site.glass-depth.photographic-glass.tools-section :is(.tool-page-toolbar, .json-tool-controls, .comparer-controls) { justify-content: flex-start; }
    .grey-site.glass-depth.photographic-glass.tools-section .tool-page-workspace :is(.colour-picker-stage, .colour-value-grid, .ai-grid, .margin-workspace, .bgr-workspace, .comparer-inputs, .comparer-results) { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-transparency: reduce) {
    .grey-site.glass-depth.photographic-glass.tools-section :is(.tool-page-heading, .tool-page-workspace) { background: #fff !important; -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media print {
    .grey-site.glass-depth.photographic-glass.tools-section :is(.tool-page-heading, .tool-page-workspace) { width: 100%; min-height: 0 !important; margin: 0 0 20px; background: #fff !important; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
}