/*
 * Shared responsive page shell for Laser Tools Hub production tools.
 * This file changes only the outer page layout and visual rhythm.
 * Individual generator geometry, calculations and export logic stay in each tool.
 */

body.tool-page {
    --tool-page-gutter: 32px;
    --tool-page-standard: 1360px;
    --tool-page-wide: 1720px;
    --tool-page-studio: 1880px;
    --tool-page-panel-radius: 16px;
    --tool-page-panel-border: #dce4ef;
    --tool-page-panel-shadow: 0 10px 30px rgba(9, 28, 56, .055);
    background: #eef3f8;
}

body.tool-page .page-hero {
    padding: 58px 0 62px;
}

body.tool-page .page-hero .container.narrow {
    width: min(1040px, calc(100% - 40px));
    max-width: 1040px;
}

body.tool-page .page-hero h1 {
    margin: 8px 0 12px;
    font-size: clamp(40px, 4vw, 62px);
    line-height: 1.03;
    letter-spacing: -.045em;
}

body.tool-page .page-hero p {
    max-width: 900px;
    margin: 0;
    font-size: clamp(16px, 1.35vw, 19px);
    line-height: 1.55;
}

body.tool-page main > section:not(.page-hero),
body.tool-page main > .tool-shell {
    padding-top: 32px;
    padding-bottom: 72px;
    background: #eef3f8;
}

body.tool-page--standard main > section:not(.page-hero) > .container,
body.tool-page--standard main > .tool-shell > .container {
    width: min(var(--tool-page-standard), calc(100% - var(--tool-page-gutter)));
    max-width: none;
}

body.tool-page--wide main > section:not(.page-hero) > .container,
body.tool-page--wide main > .tool-shell > .container {
    width: min(var(--tool-page-wide), calc(100% - var(--tool-page-gutter)));
    max-width: none;
}

body.tool-page--studio main > section:not(.page-hero) > .container,
body.tool-page--studio main > .tool-shell > .container {
    width: min(var(--tool-page-studio), calc(100% - 20px));
    max-width: none;
}

/* Keep workspace roots fluid instead of allowing an old local max-width to squeeze them. */
body.tool-page main > section:not(.page-hero) > .container > :is(
    .gdo-wrap,
    .gdts-wrap,
    .gdps-wrap,
    .gds-wrap,
    .gdh-wrap,
    .gdt-wrap,
    .hps-app,
    .gdm-wrap,
    .lrg-wrap,
    .jpg-app,
    .gdn-wrap,
    .abg-wrap,
    .gdk-wrap,
    .weld-score-layout,
    .wsc,
    .keychain-generator,
    .gdss-wrap,
    .gduk-wrap,
    .qr-tool-layout
) {
    width: 100%;
    max-width: none;
}

/* Shared surface language. Tool-specific colours remain untouched. */
body.tool-page :is(
    .gds-card,
    .gdn-card,
    .abg-card,
    .gdm-card,
    .gdh-card,
    .gdt-card,
    .gdk-card,
    .lrg-card,
    .wsc-panel,
    .weld-score-preview,
    .gdss-card,
    .gduk-card,
    .keychain-toolbar-card,
    .keychain-editor,
    .hps-panel,
    .hps-preview-wrap,
    .hps-assignments,
    .jpg-panel,
    .jpg-preview-card,
    .qr-tool-layout > *,
    .gdps-card,
    .gdps-preview-card,
    .gdps-editor
) {
    border-radius: var(--tool-page-panel-radius);
}

body.tool-page :is(
    .gds-card,
    .gdn-card,
    .abg-card,
    .gdm-card,
    .gdh-card,
    .gdt-card,
    .gdk-card,
    .lrg-card,
    .wsc-panel,
    .gdss-card,
    .gduk-card,
    .keychain-toolbar-card,
    .keychain-editor,
    .hps-panel,
    .hps-preview-wrap,
    .hps-assignments,
    .jpg-panel,
    .jpg-preview-card,
    .gdps-card,
    .gdps-preview-card,
    .gdps-editor
) {
    box-shadow: var(--tool-page-panel-shadow);
}

/* Wide tools need a stable preview column and sidebars that do not consume the canvas. */
body.tool-page--wide :is(
    .gds-grid,
    .gdn-grid,
    .gdt-grid,
    .gdh-grid,
    .gdm-grid,
    .abg-grid,
    .gdk-grid,
    .lrg-grid
) {
    grid-template-columns: clamp(310px, 21vw, 370px) minmax(0, 1fr);
    gap: 18px;
}

body.tool-page--wide .hps-workspace {
    grid-template-columns: clamp(270px, 18vw, 320px) minmax(0, 1fr) clamp(270px, 18vw, 320px);
    gap: 18px;
}

body.tool-page--wide .gdps-grid {
    grid-template-columns: clamp(290px, 19vw, 330px) minmax(0, 1fr);
    gap: 18px;
}

/* Do not make compact tools look like a tiny card floating in an empty desktop page. */
body.tool-page--standard :is(
    .gdo-grid,
    .gdts-grid,
    .weld-score-layout,
    .wsc-grid,
    .gdss-grid,
    .gduk-grid,
    .qr-tool-layout
) {
    column-gap: 20px;
}

body.tool-page .tool-output-notice {
    border-radius: 12px;
}

/* LED studio is a workspace, not a QR-style card embedded in another card. */
body.tool-page--studio .led-lamp-page {
    padding-top: 20px;
}

body.tool-page--studio .led-lamp-shell {
    display: grid;
    gap: 12px;
}

body.tool-page--studio .led-lamp-live-frame {
    display: block;
    width: 100%;
    height: max(820px, calc(100vh - 96px));
    min-height: 820px;
    border: 1px solid var(--tool-page-panel-border);
    border-radius: 16px;
    background: #f4f7fb;
    box-shadow: 0 16px 40px rgba(9, 28, 56, .09);
}

@media (max-width: 1180px) {
    body.tool-page--wide :is(
        .gds-grid,
        .gdn-grid,
        .gdt-grid,
        .gdh-grid,
        .gdm-grid,
        .abg-grid,
        .gdk-grid,
        .lrg-grid,
        .gdps-grid
    ) {
        grid-template-columns: 1fr;
    }

    body.tool-page--wide .hps-workspace {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    body.tool-page {
        --tool-page-gutter: 20px;
    }

    body.tool-page .page-hero {
        padding: 42px 0 46px;
    }

    body.tool-page .page-hero .container.narrow {
        width: calc(100% - 28px);
    }

    body.tool-page main > section:not(.page-hero),
    body.tool-page main > .tool-shell {
        padding-top: 18px;
        padding-bottom: 48px;
    }

    body.tool-page--studio main > section:not(.page-hero) > .container,
    body.tool-page--studio main > .tool-shell > .container {
        width: calc(100% - 12px);
    }


    body.tool-page--studio .led-lamp-live-frame {
        height: 820px;
        min-height: 820px;
        border-radius: 12px;
    }
}

/* Admin-only tool version badge.
 * Tool versions change only when that individual tool changes.
 * Global LTHub releases do not alter tool versions.
 */
body.tool-page .page-hero h1 > .tool-version-badge {
    display: inline-flex !important;
    align-items: center !important;
    margin-left: 10px !important;
    padding: 3px 7px !important;
    border: 1px solid #4ade80 !important;
    border-radius: 999px !important;
    background: #15803d !important;
    color: #ffffff !important;
    font-family: inherit !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    vertical-align: middle !important;
    white-space: nowrap !important;
    transform: translateY(-0.18em);
}

@media (max-width: 640px) {
    body.tool-page .page-hero h1 > .tool-version-badge {
        margin-left: 7px !important;
        padding: 2px 6px !important;
        font-size: 9px !important;
    }
}