/* Qodat download page — Darcula/teal site chrome, not a fake desktop window. */
:root {
    --qodat-chrome: #3c3f41;
    --qodat-chrome-dark: #2b2b2b;
    --qodat-panel: #313335;
    --qodat-panel-deep: #2c2e2f;
    --qodat-border: #323232;
    --qodat-text: #d6d6d6;
    --qodat-muted: #828282;
    --qodat-accent: #398291;
    --qodat-focus: #95fbf6;
    --qodat-cyan: #64dbfb;
    --qodat-button: #45494a;
    --qodat-button-hover: #313234;

    --backdrop: var(--qodat-chrome-dark);
    --foreground: var(--qodat-text);
    --button-text: #f5f5f5;
    --button-face: var(--qodat-accent);
    --pane-color: var(--qodat-chrome);
    --no-go-color: var(--qodat-panel);
    --note-text: var(--qodat-text);
}

@media (prefers-color-scheme: light) {
    :root {
        --backdrop: var(--qodat-chrome-dark);
        --foreground: var(--qodat-text);
        --button-text: #f5f5f5;
        --button-face: var(--qodat-accent);
        --pane-color: var(--qodat-chrome);
        --no-go-color: var(--qodat-panel);
        --note-text: var(--qodat-text);
    }
}

html {
    color-scheme: dark;
    background: var(--qodat-chrome-dark);
    height: auto;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
    font-size: 16px;
    line-height: 1.45;
    min-height: 100vh;
    margin: 0;
    background: var(--qodat-chrome-dark);
    color: var(--qodat-text);
}

/* Conveyor centers an “app window”; treat the page as a normal document. */
.container {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    text-align: center;
    width: 100%;
    min-height: 100vh;
    height: auto;
    padding: 0;
}

.container > div {
    min-width: 0 !important;
    min-height: 0 !important;
    width: 100%;
    margin: 0;
}

.qodat-header {
    box-sizing: border-box;
    width: 100%;
    background: var(--qodat-chrome);
    border-bottom: 1px solid var(--qodat-border);
    padding: 0.9rem 1.5rem;
}

.qodat-brand {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.85rem;
    width: min(42rem, 100%);
    margin: 0 auto;
    text-align: left;
}

.qodat-brand-text {
    min-width: 0;
}

.qodat-main {
    box-sizing: border-box;
    width: min(42rem, calc(100% - 2.5rem));
    margin: 0 auto;
    padding: 2rem 0 2.5rem;
    flex: 1 1 auto;
}

.qodat-footer {
    box-sizing: border-box;
    width: 100%;
    margin-top: auto;
    padding: 1.15rem 1.5rem 1.35rem;
    border-top: 1px solid var(--qodat-border);
    background: var(--qodat-panel-deep);
}

#logo {
    padding: 0;
    flex: 0 0 auto;
}

#logo img {
    display: block;
    width: 44px;
    height: 44px;
    border-radius: 8px;
    box-shadow: 0 0 0 1px var(--qodat-border);
}

#title {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: var(--qodat-text);
}

.qodat-tagline {
    margin: 0.15rem 0 0;
    max-width: none;
    font-size: 0.78rem;
    line-height: 1.4;
    color: var(--qodat-muted);
}

#version {
    display: block;
    margin: 0 0 1.15rem;
    font-size: 0.75rem;
    color: var(--qodat-muted);
    letter-spacing: 0.04em;
}

/* Download cards — not a window frame. Kill any leftover title-bar chrome. */
.pane,
#panes.pane {
    position: relative;
    align-items: center;
    background-color: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    padding: 0;
    margin: 0;
    overflow: visible;
}

#panes.pane::before,
#no-go.pane::before,
.pane::before {
    content: none !important;
    display: none !important;
}

#pane-win,
#pane-mac,
#pane-linux {
    width: 100%;
    box-sizing: border-box;
    background-color: var(--qodat-chrome);
    border: 1px solid var(--qodat-border);
    border-radius: 8px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
    padding: 1.75rem 1.5rem 1.6rem;
}

#no-go,
#no-go.pane {
    display: none;
}

.download-button {
    align-items: center;
    background-color: var(--qodat-accent) !important;
    border: 1px solid #2f6d79;
    border-radius: 4px !important;
    box-sizing: border-box;
    color: var(--button-text) !important;
    cursor: pointer;
    display: inline-flex;
    font-size: 0.85rem;
    font-weight: 600;
    justify-content: center;
    letter-spacing: 0.04em;
    padding: 0.85rem 1.5rem !important;
    text-decoration: none;
    text-transform: uppercase;
    white-space: nowrap;
    width: min(22rem, 100%) !important;
    transition: background-color 0.12s ease, color 0.12s ease, box-shadow 0.12s ease;
}

.download-button > svg {
    padding-right: 0.7em;
    width: 1.35em;
    height: 1.35em;
}

.download-button > svg > g > path {
    fill: currentColor;
}

.download-button:hover {
    filter: none;
    background-color: var(--qodat-focus) !important;
    border-color: #6ed8d3;
    color: var(--qodat-chrome-dark) !important;
    box-shadow: 0 0 0 1px rgba(149, 251, 246, 0.35);
}

.download-button:focus-visible {
    outline: 2px solid var(--qodat-focus);
    outline-offset: 3px;
}

.alternative-downloads,
.alternative-downloads a {
    padding-top: 0;
}

.alternative-downloads {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.4rem 0.55rem;
    margin-top: 1.5rem;
    padding: 0.35rem 0.45rem;
    background: rgba(44, 46, 47, 0.92);
    border: 1px solid var(--qodat-border);
    border-radius: 4px;
}

.alternative-downloads span {
    color: var(--qodat-muted);
    font-size: 0.75rem;
}

.alternative-downloads a {
    padding: 0.28rem 0.7rem;
    border-radius: 4px;
    color: var(--qodat-text) !important;
    text-decoration: none;
    font-size: 0.75rem;
}

.alternative-downloads a:hover {
    background: var(--qodat-button-hover);
    color: var(--qodat-focus) !important;
}

.smaller-fonts,
.smaller-fonts a {
    font-size: 0.8rem;
    color: var(--qodat-muted);
}

.smaller-fonts a {
    color: var(--qodat-cyan);
    text-decoration: none;
}

.smaller-fonts a:hover {
    color: var(--qodat-focus);
    text-decoration: underline;
}

.note {
    line-height: 1.55;
    text-align: left;
    display: block;
    color: var(--qodat-text);
    font-size: 0.82rem;
    margin-top: 1.4rem;
    padding: 1rem 1.1rem;
    background: var(--qodat-panel);
    border: 1px solid var(--qodat-border);
    border-radius: 4px;
}

.note a {
    color: var(--qodat-cyan);
}

.note a:hover {
    color: var(--qodat-focus);
}

.help-pane {
    text-align: left;
    width: min(36rem, 100%);
}

.help-pane ol {
    padding-left: 1.2rem;
}

.terminal {
    background-color: var(--qodat-chrome-dark);
    border: 1px solid var(--qodat-border);
    border-radius: 4px;
    box-shadow: inset 0 0 0 1px rgba(57, 130, 145, 0.28);
    color: var(--qodat-cyan);
    font-family: Menlo, Monaco, ui-monospace, "SF Mono", Consolas, monospace;
    font-size: 0.72rem;
    font-weight: 500;
    padding: 0.85rem 1rem;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.terminal a {
    color: var(--qodat-focus);
}

.copy-button {
    padding-left: 1rem;
}

.copy-button path {
    fill: var(--qodat-text);
}

.tooltip {
    border-bottom-color: var(--qodat-muted);
}

#conveyor-logo {
    display: flex;
    justify-content: center;
    opacity: 0.72;
    filter: grayscale(0.15);
    margin: 0 !important;
    text-align: center !important;
}

#conveyor-logo:hover {
    opacity: 1;
}

/* CSS-only fallback if extra-header JS has not run yet (logo/title still in #panes). */
#panes.pane > #logo,
#panes.pane > #title,
#panes.pane > .qodat-tagline {
    align-self: center;
}

#panes.pane > #logo {
    margin-bottom: 0.45rem;
}

#panes.pane > #logo img {
    width: 56px;
    height: 56px;
}

#panes.pane > #title {
    font-size: 1.55rem;
}

#panes.pane > .qodat-tagline {
    margin: 0.4rem auto 0.15rem;
    max-width: 24rem;
}

@media only screen and (min-device-width: 768px) {
    .download-button {
        align-items: center;
        background-color: var(--qodat-accent);
        border-radius: 4px;
        color: var(--button-text) !important;
        cursor: pointer;
        display: inline-flex;
        font-weight: 600;
        justify-content: center;
        letter-spacing: 0.04em;
        padding: 0.85rem 1.5rem;
        text-decoration: none;
        text-transform: uppercase;
        white-space: nowrap;
        width: min(22rem, 100%);
    }

    .pane,
    #panes.pane {
        align-items: center;
        background-color: transparent;
        border-radius: 0;
        box-shadow: none;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        padding: 0;
        margin: 0;
    }

    #version {
        color: var(--qodat-muted);
    }

    .alternative-downloads,
    .alternative-downloads a {
        padding-top: 0;
    }

    .alternative-downloads a {
        padding: 0.28rem 0.7rem;
    }

    #no-go,
    #no-go.pane {
        display: none;
    }
}

@media only screen and (max-device-width: 768px) {
    body {
        font-size: 17px;
    }

    .qodat-header {
        padding: 0.85rem 1rem;
    }

    .qodat-main {
        width: min(42rem, calc(100% - 2rem));
        padding: 1.25rem 0 2rem;
    }

    #panes,
    #conveyor-logo {
        display: none;
    }

    #no-go,
    #no-go.pane {
        display: flex;
    }
}

/* No JS yet: keep a readable stacked hero inside Conveyor’s generated tree. */
body:not(.qodat-site) #logo {
    padding: 1.25rem 1rem 0.35rem;
}

body:not(.qodat-site) #logo img {
    width: 72px;
    height: 72px;
    margin: 0 auto;
    border-radius: 8px;
}

body:not(.qodat-site) #title {
    margin: 0.35rem 0 0;
    font-size: 1.7rem;
}

body:not(.qodat-site) .qodat-tagline {
    margin: 0.55rem auto 0;
    max-width: 22rem;
}

body:not(.qodat-site) #panes.pane > #version {
    margin-top: 0.55rem;
}