/* Atlas.Showcase — industrial instrument skin with light/dark themes.
   Design language: precision tools. Cool gray/graphite surfaces, steel-blue
   accent, amber warning, 2px radius, 1px hairlines, subtle grid texture.
   The whole content palette is driven by --showcase-* variables: :root defines
   the light palette, @media (prefers-color-scheme: dark) swaps in a graphite
   variant, so the showcase follows the OS/browser theme automatically.
   Atlas chrome comes from the optional IDE theme (themes/ide.css, ADR-0039);
   this file styles Showcase-owned content, topbar, statusbar and teaching
   panels only. */

:root {
    color-scheme: light dark;
    font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    font-size: 14px;

    /* Showcase palette — light (instrument panel) */
    --showcase-bg: #eef1f4;
    --showcase-surface: #ffffff;
    --showcase-chrome: #d7dde3;
    --showcase-chrome-ink: #26303a;
    --showcase-accent: #0b6bcb;
    --showcase-accent-ink: #ffffff;
    --showcase-warning: #9a4a0b;
    --showcase-ink: #26303a;
    --showcase-muted: #5c6b7a;
    --showcase-border: #b8c2cc;
    --showcase-hover: #e2f0fb;
    --showcase-selection: #cfe4f7;
    --showcase-ok: #1e7e34;
    --showcase-error: #b3261e;
    --showcase-code-bg: #f6f8fa;
    background: var(--showcase-bg);
    color: var(--showcase-ink);
}

@media (prefers-color-scheme: dark) {
    :root {
        /* Showcase palette — dark (graphite instrument) */
        --showcase-bg: #171b1f;
        --showcase-surface: #20262c;
        --showcase-chrome: #2c343c;
        --showcase-chrome-ink: #d8dee4;
        --showcase-accent: #4c9aff;
        --showcase-accent-ink: #0a1420;
        --showcase-warning: #f0a24e;
        --showcase-ink: #d8dee4;
        --showcase-muted: #8f9ba8;
        --showcase-border: #3d4750;
        --showcase-hover: #2e4257;
        --showcase-selection: #274a6b;
        --showcase-ok: #4cd07d;
        --showcase-error: #ff8a80;
        --showcase-code-bg: #1a2026;
        background: var(--showcase-bg);
        color: var(--showcase-ink);
    }
}

html,
body,
#app,
.showcase-shell,
.showcase-shell > .atlas-v2-workspace {
    width: 100%;
    height: 100%;
    margin: 0;
    overflow: hidden;
}

body {
    min-width: 20rem;
    /* Industrial grid texture on the outer shell only */
    background-image:
        linear-gradient(var(--showcase-border) 1px, transparent 1px),
        linear-gradient(90deg, var(--showcase-border) 1px, transparent 1px);
    background-size: 32px 32px;
    background-position: -1px -1px;
}

button { font: inherit; }
#blazor-error-ui { display: none; }

.showcase-loading {
    min-height: 100%;
    display: grid;
    place-items: center;
    background: var(--showcase-bg);
    color: var(--showcase-muted);
}

.showcase-init-error {
    align-content: center;
    gap: 0.6rem;
    padding: 1rem;
    text-align: center;
}

.showcase-init-error p { margin: 0; color: var(--showcase-error); font-weight: 700; }
.showcase-init-error code {
    font-family: "Cascadia Code", Consolas, monospace;
    font-size: 0.75rem;
}

.showcase-host-error {
    padding: 0.75rem;
    color: var(--showcase-error);
}

/* ============================================================
   Showcase chrome (topbar / statusbar) — showcase-owned, no Atlas tokens.
   ============================================================ */
.showcase-topbar {
    min-height: 2.5rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0 0.5rem;
    background: var(--showcase-chrome);
    border-bottom: 1px solid var(--showcase-border);
    color: var(--showcase-chrome-ink);
}

.showcase-brand {
    width: 1.5rem;
    height: 1.5rem;
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    border: 1px solid var(--showcase-border);
    border-radius: 0.125rem;
    background: var(--showcase-surface);
    color: var(--showcase-accent);
    font-weight: 800;
    font-size: 0.875rem;
}

.showcase-menu,
.showcase-history,
.showcase-actions {
    display: flex;
    align-items: center;
    gap: 0.125rem;
}

.showcase-menu button,
.showcase-menu a,
.showcase-history button,
.showcase-actions button,
.showcase-action {
    border: 1px solid transparent;
    border-radius: 0.125rem;
    padding: 0.2rem 0.5rem;
    background: transparent;
    color: var(--showcase-chrome-ink);
    font-weight: 600;
    font-size: 0.875rem;
    cursor: pointer;
}

.showcase-menu button:hover,
.showcase-menu a:hover,
.showcase-history button:not(:disabled):hover,
.showcase-actions button:hover,
.showcase-action:hover {
    background: var(--showcase-hover);
    border-color: var(--showcase-border);
    color: var(--showcase-accent);
}

.showcase-history button:disabled { color: var(--showcase-muted); opacity: 0.5; }
.showcase-actions { margin-inline-start: auto; }
.showcase-branch {
    color: var(--showcase-chrome-ink);
    opacity: 0.65;
    font-size: 0.75rem;
    white-space: nowrap;
}

/* Panel manager (visibility / move / layout mode) */
.showcase-quickmenu {
    position: relative;
    z-index: 41;
}

.showcase-dialog-backdrop {
    position: fixed;
    inset: 0;
    z-index: 39;
}

.showcase-panel-manager {
    position: absolute;
    top: calc(100% + 0.25rem);
    right: 0;
    z-index: 40;
    width: min(30rem, calc(100vw - 1rem));
    max-height: 70vh;
    overflow: auto;
    border: 1px solid var(--showcase-border);
    border-radius: 0.125rem;
    background: var(--showcase-surface);
    color: var(--showcase-ink);
    box-shadow: 0 0.375rem 0.75rem rgb(0 0 0 / 18%);
    padding: 0.4rem;
    font-size: 0.875rem;
}

.showcase-panel-manager-header,
.showcase-panel-manager-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.4rem;
    padding: 0.3rem;
}

.showcase-panel-manager-header {
    border-bottom: 1px solid var(--showcase-border);
}

.showcase-panel-manager-header h2 {
    margin: 0;
    font-size: 1rem;
}

.showcase-panel-manager-actions {
    justify-content: flex-start;
    border-bottom: 1px solid var(--showcase-border);
}

.showcase-panel-manager-close,
.showcase-panel-manager-actions button,
.showcase-panel-manager-row-actions button {
    border: 1px solid var(--showcase-border);
    border-radius: 0.125rem;
    background: transparent;
    color: var(--showcase-muted);
    padding: 0.2rem 0.45rem;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
}

.showcase-panel-manager-close:hover,
.showcase-panel-manager-actions button:hover,
.showcase-panel-manager-row-actions button:not(:disabled):hover {
    color: var(--showcase-accent);
    border-color: var(--showcase-accent);
    background: var(--showcase-hover);
}

.showcase-panel-manager-row-actions button:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.showcase-panel-manager-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.showcase-panel-manager-row {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 0.45rem 0.3rem;
    border-bottom: 1px solid var(--showcase-border);
}

.showcase-panel-manager-row:last-child {
    border-bottom: 0;
}

.showcase-panel-manager-main {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
}

.showcase-panel-manager-main .name {
    font-weight: 700;
}

.showcase-panel-manager-main .state,
.showcase-panel-manager-note {
    color: var(--showcase-muted);
    font-size: 0.75rem;
}

.showcase-panel-manager-row-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.3rem;
}

.showcase-panel-manager-row-actions select {
    min-width: 7rem;
    border: 1px solid var(--showcase-border);
    border-radius: 0.125rem;
    background: var(--showcase-surface);
    color: var(--showcase-ink);
    padding: 0.15rem 0.25rem;
    font-size: 0.75rem;
}

.showcase-panel-manager-note {
    margin: 0.4rem 0.3rem 0;
    line-height: 1.5;
}

/* Status bar */
.showcase-statusbar {
    min-height: 1.4rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0 0.6rem;
    background: var(--showcase-chrome);
    border-top: 1px solid var(--showcase-border);
    color: var(--showcase-chrome-ink);
    font-size: 0.75rem;
    font-weight: 600;
}

.showcase-status-spacer { flex: 1; }
.showcase-status-revision {
    font-family: "Cascadia Code", Consolas, monospace;
    font-size: 0.6875rem;
    opacity: 0.8;
}
.showcase-ok { color: var(--showcase-ok); }
.showcase-warn { color: var(--showcase-warning); }
.showcase-error { color: var(--showcase-error); }

/* ============================================================
   Teaching panels — showcase-owned styles.
   ============================================================ */
.showcase-tool,
.showcase-editor {
    height: 100%;
    box-sizing: border-box;
    overflow: auto;
}

.showcase-card {
    padding: 0.5rem 0.625rem;
    color: var(--showcase-ink);
    font-size: 1rem;
}

.showcase-req-line {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    margin-bottom: 0.5rem;
}

.showcase-req-line .req {
    color: var(--showcase-muted);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.03em;
}

.showcase-req-line .source {
    margin-inline-start: auto;
    color: var(--showcase-muted);
    font-size: 0.6875rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.showcase-card-title {
    margin: 0.25rem 0 0.5rem;
    padding-bottom: 0.25rem;
    border-bottom: 1px solid var(--showcase-border);
    color: var(--showcase-ink);
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.showcase-card-title .req {
    margin-inline-start: auto;
    color: var(--showcase-muted);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.03em;
}

/* Detailed guide document (editor tab) — headings, FAQ, code blocks. */
.showcase-guide .showcase-card-body h2 {
    margin: 0 0 0.5rem;
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--showcase-ink);
}

.showcase-guide .showcase-card-body h3 {
    margin: 0.75rem 0 0.375rem;
    font-size: 1rem;
    font-weight: 700;
    color: var(--showcase-ink);
}

.showcase-guide .showcase-card-body ul,
.showcase-guide .showcase-card-body ol {
    margin: 0 0 0.5rem;
    padding-inline-start: 1.25rem;
}

.showcase-guide .showcase-card-body li { margin-bottom: 0.25rem; }

.showcase-guide .showcase-code {
    margin: 0.25rem 0 0.75rem;
    border: 1px solid var(--showcase-border);
    border-radius: 0.125rem;
}

.showcase-faq dt {
    font-weight: 700;
    margin-top: 0.5rem;
    color: var(--showcase-ink);
}

.showcase-faq dd {
    margin: 0.125rem 0 0;
    color: var(--showcase-ink);
}

.showcase-faq dt:first-child { margin-top: 0; }

.showcase-card-body {
    padding: 0.5rem 0.6rem;
    line-height: 1.55;
}

.showcase-card-body p { margin: 0 0 0.5rem; }
.showcase-card-body code {
    font-family: "Cascadia Code", Consolas, monospace;
    font-size: 0.75rem;
    background: var(--showcase-code-bg);
    border: 1px solid var(--showcase-border);
    border-radius: 0.125rem;
    padding: 0.05rem 0.25rem;
}

.showcase-code-toggle {
    display: block;
    width: 100%;
    border: 0;
    border-top: 1px solid var(--showcase-border);
    background: var(--showcase-chrome);
    color: var(--showcase-accent);
    padding: 0.3rem;
    font-weight: 700;
    font-size: 0.75rem;
    cursor: pointer;
    text-align: center;
}

.showcase-code-toggle:hover { background: var(--showcase-hover); }

.showcase-code {
    margin: 0;
    padding: 0.6rem;
    background: var(--showcase-code-bg);
    border-top: 1px solid var(--showcase-border);
    font: 0.72rem/1.6 "Cascadia Code", Consolas, monospace;
    overflow: auto;
    white-space: pre;
    color: var(--showcase-ink);
}

.showcase-kbd {
    display: inline-block;
    border: 1px solid var(--showcase-border);
    border-bottom-width: 2px;
    border-radius: 0.125rem;
    background: var(--showcase-code-bg);
    padding: 0.05rem 0.35rem;
    font-size: 0.75rem;
    font-family: "Cascadia Code", Consolas, monospace;
}

.showcase-list {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 0.875rem;
}

.showcase-list li {
    border-bottom: 1px solid var(--showcase-border);
}

.showcase-list li:last-child { border-bottom: 0; }

.showcase-list-button {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    width: 100%;
    border: 0;
    padding: 0.35rem 0.6rem;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: start;
    cursor: pointer;
}

.showcase-list-button:hover { background: var(--showcase-hover); }
.showcase-list-button:focus-visible {
    outline: 2px solid var(--showcase-accent);
    outline-offset: -2px;
}
.showcase-list .title { flex: 1; min-width: 0; }
.showcase-list .state { color: var(--showcase-muted); font-size: 0.6875rem; }
.showcase-list .idx { color: var(--showcase-accent); font-family: "Cascadia Code", Consolas, monospace; font-size: 0.6875rem; }

.showcase-editor-text {
    padding: 0.5rem;
    font: 0.75rem/1.6 "Cascadia Code", Consolas, monospace;
    white-space: pre;
    overflow: auto;
    background: var(--showcase-code-bg);
    color: var(--showcase-ink);
}

/* DBC-like signal rows reused as a neutral "instrument table" for the
   editor tab demo — not a business app, just structured sample data. */
.showcase-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.75rem;
}

.showcase-table th,
.showcase-table td {
    padding: 0.25rem 0.5rem;
    text-align: left;
    border-bottom: 1px solid var(--showcase-border);
    white-space: nowrap;
}

.showcase-table th {
    position: sticky;
    top: 0;
    background: var(--showcase-chrome);
    color: var(--showcase-chrome-ink);
    font-weight: 700;
}

.showcase-tag {
    display: inline-block;
    border: 1px solid var(--showcase-border);
    border-radius: 0.125rem;
    padding: 0.05rem 0.35rem;
    font-size: 0.6875rem;
    color: var(--showcase-muted);
}

.showcase-tag.accent { color: var(--showcase-accent); border-color: var(--showcase-accent); }
.showcase-tag.ok { color: var(--showcase-ok); border-color: var(--showcase-ok); }

/* Verification page */
.showcase-verification-page {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--showcase-bg);
}

.showcase-verification-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.4rem 0.6rem;
    background: var(--showcase-chrome);
    border-bottom: 1px solid var(--showcase-border);
    color: var(--showcase-chrome-ink);
}

.showcase-verification-header h1 {
    margin: 0;
    font-size: 1rem;
}

.showcase-verification-header p {
    margin: 0.15rem 0 0;
    font-size: 0.75rem;
    opacity: 0.8;
}

.showcase-verification-header button {
    border: 1px solid var(--showcase-border);
    border-radius: 0.125rem;
    padding: 0.2rem 0.5rem;
    background: var(--showcase-surface);
    color: var(--showcase-ink);
    font-weight: 600;
    cursor: pointer;
}

.showcase-verification-header button:hover,
.showcase-verification-header button:focus-visible {
    color: var(--showcase-accent);
    border-color: var(--showcase-accent);
}

.showcase-verification {
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.25rem;
    overflow: hidden;
    background: var(--showcase-bg);
}

.showcase-verification > section {
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}

/* Declarative example page */
.showcase-declarative-host {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    padding: 0.4rem;
    background: var(--showcase-bg);
}

.showcase-declarative-host > .atlas-v2-workspace {
    height: 100%;
}

.showcase-declarative-chrome,
.showcase-declarative-status {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 1.7rem;
    padding: 0 0.6rem;
    background: var(--showcase-chrome);
    color: var(--showcase-chrome-ink);
    font-size: 0.75rem;
    font-weight: 600;
}

.showcase-declarative-status {
    border-top: 1px solid var(--showcase-border);
}

.showcase-declarative-back {
    border: 1px solid var(--showcase-border);
    border-radius: 0.125rem;
    padding: 0.2rem 0.5rem;
    background: var(--showcase-surface);
    color: var(--showcase-ink);
    font-weight: 600;
    text-decoration: none;
}

.showcase-declarative-back:hover,
.showcase-declarative-back:focus-visible {
    color: var(--showcase-accent);
    border-color: var(--showcase-accent);
}

/* Tabs and auto-hide teaching page */
.showcase-tabs-content {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 0.6rem;
    overflow: auto;
    background: var(--showcase-bg);
}

.showcase-tabs-demo {
    min-width: 0;
    border: 1px solid var(--showcase-border);
    background: var(--showcase-surface);
}

.showcase-tabs-demo h2 {
    margin: 0;
    padding: 0.4rem 0.6rem;
    border-bottom: 1px solid var(--showcase-border);
    background: var(--showcase-chrome);
    color: var(--showcase-chrome-ink);
    font-size: 0.9rem;
}

.showcase-tabs-demo > p {
    margin: 0;
    padding: 0.4rem 0.6rem;
    color: var(--showcase-muted);
    font-size: 0.75rem;
}

.showcase-tabs-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.5rem;
    padding: 0 0.6rem 0.6rem;
}

.showcase-tabs-column {
    min-width: 0;
}

.showcase-tabs-column h3 {
    margin: 0 0 0.25rem;
    font-size: 0.8rem;
    color: var(--showcase-ink);
}

.showcase-tabs-host {
    min-width: 0;
    height: 240px;
    border: 1px solid var(--showcase-border);
    overflow: hidden;
}

.showcase-tabs-host > .atlas-v2-workspace,
.showcase-auto-hide-host > .atlas-v2-workspace {
    inline-size: 100%;
    block-size: 100%;
}

.showcase-tabs-outlet {
    padding: 0.75rem;
    font-size: 0.8rem;
}

.showcase-tabs-outlet p {
    margin: 0 0 0.4rem;
}

.showcase-auto-hide-host {
    inline-size: min(100%, 40rem);
    block-size: 320px;
    margin: 0 0.6rem 0.6rem;
    border: 1px solid var(--showcase-border);
    overflow: hidden;
}

@media (max-width: 900px) {
    .showcase-tabs-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

.showcase-not-found {
    min-height: 100%;
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 0.5rem;
    padding: 1rem;
    text-align: center;
}

.showcase-not-found h1 { margin: 0; font-size: 1.25rem; }
.showcase-not-found p { margin: 0; color: var(--showcase-muted); }
.showcase-not-found a { color: var(--showcase-accent); }

@media (max-width: 900px) {
    .showcase-branch { display: none; }
    .showcase-panel-manager {
        position: fixed;
        inset-inline: 0.5rem;
        bottom: 0.5rem;
        top: auto;
        width: auto;
        max-height: 80vh;
    }
}

.showcase-floating-page {
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr);
    gap: 0.75rem;
    padding: 1rem;
    min-block-size: 100vh;
    box-sizing: border-box;
}

.showcase-floating-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.showcase-floating-actions button {
    padding: 0.35rem 0.7rem;
    border: 1px solid var(--showcase-border, #c9c9c9);
    border-radius: 0.25rem;
    background: var(--showcase-surface, #fff);
    color: inherit;
    cursor: pointer;
}

.showcase-floating-host {
    min-block-size: 0;
    block-size: 34rem;
    border: 1px solid var(--showcase-border, #c9c9c9);
    border-radius: 0.375rem;
    overflow: hidden;
}

.showcase-floating-host > .atlas-v2-workspace {
    inline-size: 100%;
    block-size: 100%;
}

.showcase-floating-error {
    color: #b3261e;
}

@media (max-width: 620px) {
    .showcase-topbar { gap: 0.15rem; padding-inline: 0.25rem; }
    .showcase-menu button { padding-inline: 0.35rem; }
    .showcase-statusbar span:nth-last-child(-n + 3) { display: none; }
    .showcase-verification { grid-template-columns: minmax(0, 1fr); grid-template-rows: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 480px) {
    .showcase-verify { display: none; }
}