/* Shared presentation layer. Existing forms, tile controls and live regions keep
   their original layout contracts; semantic colors make every surface themeable. */
:root {
    color-scheme: light;
    --canvas: #f7f7f6;
    --surface: #ffffff;
    --surface-muted: #f0f1f2;
    --text: #25282b;
    --muted: #666c73;
    --accent: #25282b;
    --accent-hover: #404449;
    --accent-on: #ffffff;
    --accent-soft: #e7eee8;
    --focus: #39745d;
    --line: #dedfe1;
    --line-strong: #c8ccd0;
    --ink-950: #f7f7f6;
    --ink-900: var(--canvas);
    --ink-850: var(--surface-muted);
    --ink-800: var(--surface);
    --ink-750: #e8e9eb;
    --ink-700: #dde0e3;
    --paper-100: var(--text);
    --paper-200: #3b4046;
    --paper-300: #565e67;
    --paper-400: var(--muted);
    --paper-500: #6c737c;
    --blue-200: #31664f;
    --blue-300: #39745d;
    --blue-400: var(--accent);
    --blue-500: #35654c;
    --blue-600: #264e39;
    --gold-300: var(--paper-200);
    --gold-400: var(--accent);
    --gold-500: var(--accent);
    --gold-glow: var(--accent-soft);
    --green-300: #287044;
    --green-500: #3c8b57;
    --red-300: #a63030;
    --red-500: #b23e3e;
    --violet-400: #72639c;
    --glass-fill: var(--surface);
    --glass-fill-strong: var(--surface);
    --glass-highlight: transparent;
    --shadow-md: 0 4px 18px #0000000a;
    --shadow-lg: 0 16px 56px #00000020;
    --radius-sm: .4rem;
    --radius-md: .6rem;
    --radius-lg: .75rem;
    --radius-xl: .8rem;
}

:root[data-theme="dark"] {
    color-scheme: dark;
    --canvas: #181a1d;
    --surface: #22252a;
    --surface-muted: #2b2f35;
    --text: #eff1f4;
    --muted: #aeb5bd;
    --accent: #e5e8ec;
    --accent-hover: #ffffff;
    --accent-on: #1a1d21;
    --accent-soft: #303e33;
    --focus: #99c3a5;
    --line: #393f46;
    --line-strong: #505961;
    --ink-950: #101215;
    --ink-750: #30353c;
    --ink-700: #424952;
    --paper-200: #d7dce2;
    --paper-300: #bec7d0;
    --paper-500: #a1abb6;
    --blue-200: #9ac8ad;
    --blue-300: #99c3a5;
    --blue-500: #83b695;
    --blue-600: #658e73;
    --green-300: #99d9aa;
    --green-500: #67b782;
    --red-300: #f3a5a5;
    --red-500: #d97474;
    --violet-400: #b5a9d6;
    --shadow-md: 0 4px 18px #0002;
    --shadow-lg: 0 16px 56px #0006;
}

body, .glass-page, .auth-page, .builder-page {
    color: var(--text);
    background: var(--canvas);
    font-size: .9375rem;
    line-height: 1.5;
}

a { text-decoration-color: var(--line-strong); }
a:hover { text-decoration-color: currentColor; }
::selection { color: var(--accent-on); background: var(--accent); }
:focus-visible { outline-color: var(--focus); }
.shell, .shell-wide { width: min(calc(100% - 4rem), var(--shell)); }

/* Small, right-aligned navigation leaves the page to the user's content. */
.site-header {
    border-color: var(--line);
    background: var(--canvas);
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}
.header-inner { --shell: var(--shell-wide); min-height: 3.6rem; gap: .75rem; }
.brand { gap: .65rem; border-radius: .3rem; }
.brand-mark {
    width: 2.1rem;
    border: 0;
    border-radius: .4rem;
    background: var(--accent);
    color: var(--accent-on);
    box-shadow: none;
    font-size: .65rem;
}
.brand-copy strong { font-size: .9375rem; font-weight: 700; }
.header-actions { display: flex; align-items: center; gap: .5rem; margin-left: auto; }
.site-nav {
    color: var(--text);
    border-color: var(--line);
    border-radius: .6rem;
    background: var(--surface);
    box-shadow: var(--shadow-lg);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}
.site-nav > a:not(.button) {
    min-height: 2.75rem;
    padding-inline: .75rem;
    border-radius: .3rem;
    color: var(--muted);
    font-size: .875rem;
    font-weight: 550;
}
.site-nav > a:not(.button):hover,
.site-nav > a.active:not(.button) {
    color: var(--text);
    background: var(--surface-muted);
    box-shadow: none;
}
.nav-toggle { min-width: 0; background: transparent; color: var(--text); }
.nav-toggle::before { color: currentColor; }
.nav-drawer[open] .nav-toggle { border-color: var(--line-strong); background: var(--surface-muted); }
.nav-drawer .site-nav { right: -3.25rem; }
.theme-toggle {
    display: grid;
    place-items: center;
    flex: 0 0 2.75rem;
    width: 2.75rem;
    height: 2.75rem;
    padding: .65rem;
    border: 1px solid transparent;
    border-radius: .4rem;
    color: var(--text);
    background: transparent;
    cursor: pointer;
}
.theme-toggle[hidden] { display: none; }
.theme-toggle svg { width: 1.2rem; height: 1.2rem; }
.theme-toggle:hover { background: var(--surface-muted); }

/* A single quiet control vocabulary, retaining visible keyboard focus. */
.button {
    min-height: 2.75rem;
    padding: .55rem .85rem;
    border-radius: .4rem;
    font-size: .875rem;
    font-weight: 600;
    box-shadow: none;
}
.button:hover { transform: none; }
.button-primary {
    color: var(--accent-on);
    border-color: var(--accent);
    background: var(--accent);
    box-shadow: none;
}
.button-primary:hover { color: var(--accent-on); border-color: var(--accent-hover); background: var(--accent-hover); }
.button-secondary, .button-quiet, .icon-button, .quantity-button {
    color: var(--text);
    border-color: var(--line);
    background: var(--surface);
    box-shadow: none;
}
.button-quiet { border-color: transparent; background: transparent; }
.button-secondary:hover, .button-quiet:hover, .icon-button:hover, .quantity-button:hover {
    color: var(--text);
    border-color: var(--line-strong);
    background: var(--surface-muted);
}
.button-danger { color: var(--red-300); border-color: var(--red-500); background: transparent; }
.button-danger:hover { color: var(--red-300); background: color-mix(in srgb, var(--red-500) 12%, var(--surface)); }
input, select, textarea, .deck-list-input {
    color: var(--text);
    border-color: var(--line-strong);
    border-radius: .4rem;
    background: var(--surface);
    box-shadow: none;
    accent-color: var(--focus);
}
input::placeholder, textarea::placeholder { color: var(--muted); opacity: 1; }
input:hover, select:hover, textarea:hover { border-color: var(--muted); }
input:focus, select:focus, textarea:focus { border-color: var(--focus); background: var(--surface); box-shadow: none; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--focus); }

/* Flat surfaces and restrained type carry the same design through every page. */
.glass-panel, .preview-panel, .feature-card, .auth-card, .result-card,
.dashboard-stats article, .deck-tile, .compact-section, .search-panel,
.deck-panel, .stats-panel, .popover-card, .deck-zone-panel, .deck-insights,
.account-settings-section, .public-deck-card, .library-favorite-deck-row > li,
.insight-chart-panel, .deck-validation-panel {
    color: var(--text);
    border-color: var(--line);
    background: var(--surface);
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}
.feature-card:hover, .deck-tile:hover { border-color: var(--line-strong); background: var(--surface); transform: none; }
.workspace-heading h1, .auth-card-heading h2 { font-size: clamp(1.75rem, 4vw, 2.4rem); }
.section-toolbar h2, .catalog-toolbar h2 { font-size: 1.3rem; }
.workspace-heading-copy > p, .auth-card-heading > p:last-child { color: var(--muted); }
.eyebrow { color: var(--muted); font-size: .6875rem; font-weight: 600; letter-spacing: .09em; }
.search-workspace-intro > .search-toolbar { padding: 1rem 0; border: 0; border-block: 1px solid var(--line); background: transparent; border-radius: 0; }
.search-controls { --search-control-height: 2.75rem; }
.search-filters > summary { color: var(--text); border-color: var(--line); border-radius: .4rem; background: var(--surface); }
.search-filters > summary:hover { background: var(--surface-muted); }
.search-filters > summary:focus-visible { outline-color: var(--focus); }
.search-filters-content, .filter-control-group, .color-filter { color: var(--muted); border-color: var(--line); }
.result-count, .count-badge { color: var(--muted); border-color: var(--line); background: transparent; box-shadow: none; }
.filter-chip, .deck-format-badge, .deck-bracket-chip, .format-badge,
.deck-insight-chip, .card-tag, .bracket-filter-chip {
    color: var(--paper-200);
    border-color: var(--line);
    background: var(--surface-muted);
    box-shadow: none;
}
.filter-chip:hover { color: var(--text); border-color: var(--line-strong); background: var(--accent-soft); }
.site-footer { color: var(--muted); border-color: var(--line); background: transparent; }
.footer-inner { padding-block: 1.5rem; }
.skip-link { color: var(--accent-on); background: var(--accent); }

/* Compact deck identity, metrics and tools, followed immediately by artwork. */
.builder-shell { padding-block: 1.25rem 3rem; }
.builder-topbar { gap: .75rem 1.5rem; padding-bottom: .5rem; border: 0; }
.builder-title { align-items: flex-start; gap: .65rem; }
.builder-title h1 { max-width: none; font-size: clamp(1.6rem, 3.6vw, 2.1rem); line-height: 1.2; white-space: normal; overflow-wrap: anywhere; }
.builder-title p { color: var(--muted); font-size: .8125rem; }
.builder-title .deck-format-badge { padding: 0; border: 0; background: transparent; color: inherit; font-size: inherit; font-weight: inherit; }
.builder-title .eyebrow { display: none; }
.back-link { color: var(--muted); border-color: var(--line); border-radius: .4rem; background: transparent; box-shadow: none; }
.back-link:hover { color: var(--text); background: var(--surface-muted); }
.deck-topbar-actions { gap: .5rem; }
.deck-import-menu > summary { color: var(--text); border-color: var(--line); background: var(--surface); }
.deck-import-menu > summary:hover { color: var(--text); border-color: var(--line-strong); background: var(--surface-muted); }
.deck-overview { padding-block: .6rem .65rem; }
.deck-overview-metrics { display: flex; flex-wrap: wrap; gap: .6rem 0; }
.deck-overview-metrics > div {
    justify-content: flex-start;
    gap: .35rem;
    padding: 0 1.1rem;
    border: 0;
    border-right: 1px solid var(--line-strong);
    border-radius: 0;
    background: transparent;
}
.deck-overview-metrics > div:first-child { padding-left: 0; }
.deck-overview-metrics > div:last-child { border-right: 0; }
.deck-overview-metrics dt { color: var(--muted); font-size: .8125rem; }
.deck-overview-metrics dd { order: -1; color: var(--text); font-size: .9375rem; font-weight: 650; }
.deck-overview-note { font-size: .6875rem; color: var(--muted); }
.builder-flash:not(:has(> *)) { display: none; }
.deck-card-toolbar { display: flex; flex-wrap: wrap; align-items: flex-start; gap: .65rem 1.25rem; margin-block: 0; padding-block: .65rem; border-block: 1px solid var(--line); }
.deck-card-toolbar .list-content-search { flex: 1 1 24rem; width: auto; min-width: min(100%, 20rem); max-width: 45rem; }
.list-content-search .search-controls { --search-control-height: 2.75rem; }
.list-content-search .search-filters-content { background: var(--surface); border-radius: .5rem; box-shadow: var(--shadow-lg); }
.builder-grid.deck-workspace-grid { margin-top: .5rem; padding-top: 0; }
.deck-zones { gap: 2rem; }
.deck-zone-panel { padding: 0; border: 0; border-radius: 0; background: transparent; }
.deck-panel-heading { margin-bottom: .5rem; padding-bottom: 0; border-color: var(--line); }
.deck-panel-heading h2 { font-size: 1rem; line-height: 1.3; }
.deck-panel-heading .eyebrow { display: none; }
.deck-grouping-tools { align-items: center; gap: .6rem; }
.deck-grouping-form { flex-direction: row; align-items: center; gap: .6rem; }
.deck-grouping-select { font-size: .8125rem; }
.deck-grouping-select select { min-height: 2.75rem; border-radius: .4rem; }
.deck-grouping-multiple { font-size: .75rem; }
.deck-type-groups { gap: 1.5rem; }
.deck-type-heading { font-size: .875rem; font-weight: 600; color: var(--text); }
.deck-command-section { margin-bottom: 1.5rem; }
.deck-card-grid, .unified-card-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 12.5rem), 1fr)); gap: 1rem; }
.unified-card-tile { border: 0; border-radius: .55rem; background: transparent; box-shadow: none; }
.unified-card-tile .deck-card-image { background: var(--surface-muted); }
.unified-card-tile.has-card-warning { outline-color: var(--red-500); }
.card-tile-control, .card-tile-count {
    color: #ffffff;
    border-color: #ffffff66;
    border-radius: .4rem;
    background: #181b20eb;
    box-shadow: 0 2px 6px #0002;
}
.card-tile-control:hover, .card-tile-control:focus-visible { color: #fff; border-color: #c8e4cd; background: #344d3a; }
.card-tile-control:focus-visible { outline-color: #c8e4cd; }
/* Popups, planning zones and analysis retain all their existing controls. */
.popover-card, .deck-import-dropdown, .deck-export-dropdown, .deck-copy-dropdown,
.account-menu-panel, .deck-card-menu-panel, .card-target-panel {
    color: var(--text);
    border-color: var(--line-strong);
    border-radius: .6rem;
    background: var(--surface);
    box-shadow: var(--shadow-lg);
}
.card-actions-dialog, .card-actions-dialog-bar, .card-target-selector > summary,
[data-card-actions-search], .card-actions-dialog-bar button,
.card-actions-art, .card-actions-page {
    color: var(--text);
    border-color: var(--line);
    background: var(--surface);
}
.card-actions-dialog { border-radius: .75rem; }
.empty-inline { color: var(--muted); border-color: var(--line); background: var(--surface-muted); box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.instruction-panel { color: var(--muted); border-color: var(--line); background: var(--surface-muted); box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.account-menu > summary { color: var(--text); border-color: var(--line-strong); background: var(--surface); box-shadow: none; }
.account-menu > summary:hover { background: var(--surface-muted); }
.deck-count, .deck-art .deck-count { color: #fff; border-color: #ffffff55; background: #181b20eb; box-shadow: none; }
.deck-art, .public-deck-art { color: var(--muted); background: var(--surface-muted); }
.deck-orbit { border-color: var(--line-strong); }
.card-actions-dialog::backdrop, #deck-search-dialog::backdrop { background: #12151a6b; -webkit-backdrop-filter: none; backdrop-filter: none; }
[data-card-actions-content] section, [data-card-supporting-content] > section { border-color: var(--line); background: transparent; box-shadow: none; border-radius: .5rem; }
.action-chip, .favorite-chip.button, .favorite-chip.favorite-deck-remove,
.card-printing-links a { color: var(--paper-200); border-color: var(--line-strong); border-radius: .4rem; background: var(--surface); }
.action-chip.is-active, .favorite-chip.is-active, .action-chip[aria-current="true"],
.card-target-group a[aria-current="true"] { color: var(--blue-200); border-color: var(--focus); background: var(--accent-soft); }
.action-chip:hover:not(:disabled), .favorite-chip:hover, .card-printing-links a:hover,
.card-target-group a:hover { color: var(--text); border-color: var(--focus); background: var(--surface-muted); }
.card-compatibility-warnings { color: var(--red-300); border-color: var(--red-500); background: color-mix(in srgb, var(--red-500) 8%, var(--surface)); }
.card-actions-feedback.is-error { color: var(--red-300); }
.action-chip:focus-visible, .favorite-chip:focus-visible { outline-color: var(--focus); }
.card-actions-chip-row + .card-actions-secondary { border-top: 1px solid var(--line); padding-top: .85rem; }
.card-tag-add, .card-tag-suggestions { border-color: var(--line-strong); background: var(--surface); }
.card-tag-reset, .card-tag-add-button { color: var(--blue-200); border-color: var(--line-strong); background: var(--surface-muted); }
.card-tag-suggestions [role="option"]:hover, .card-tag-suggestions [aria-selected="true"],
.card-tag.is-user-added, .card-tag.is-dragging { color: var(--blue-200); border-color: var(--focus); background: var(--accent-soft); }
.card-tag-remove:hover, .card-tag-add-button:hover, .card-tag-reset:hover { background: var(--accent-soft); }
.flash-success { color: var(--green-300); border-color: var(--green-500); background: color-mix(in srgb, var(--green-500) 8%, var(--surface)); }
.flash-error, .import-match-warning { color: var(--red-300); border-color: var(--red-500); background: color-mix(in srgb, var(--red-500) 8%, var(--surface)); }
.import-match-warning strong { color: var(--red-300); }
.deck-valid-badge, .insight-status-valid { color: var(--green-300); }
.insight-status-invalid, .deck-construction-issues { color: var(--red-300); }
.card-legality-chips .is-legal { color: var(--green-300); background: transparent; }
.card-legality-chips .is-not-legal { color: var(--red-300); background: transparent; }
.deck-insights { margin-top: 2rem; padding: 1.25rem; border-radius: .6rem; }
.deck-rules-check { color: var(--text); border-color: var(--line); background: var(--surface-muted); }
.deck-rules-check .library-panel-heading { border-color: var(--line); background: transparent; }
.deck-check-status, .issue-severity { color: var(--paper-200); background: var(--surface-muted); }
.deck-check-invalid, .rule-issue-error .issue-severity {
    color: var(--red-300);
    background: color-mix(in srgb, var(--red-500) 12%, var(--surface-muted));
}
.deck-check-valid {
    color: var(--green-300);
    background: color-mix(in srgb, var(--green-500) 12%, var(--surface-muted));
}
.deck-insights .insight-metric, .deck-insights .insight-chart-panel,
.deck-tag-track, .deck-history-entry, .deck-history-preview { border-color: var(--line); background: var(--surface-muted); box-shadow: none; }
.deck-history-current { border-color: var(--focus); background: var(--accent-soft); }
.deck-history-choice:hover { border-color: var(--focus); background: var(--surface); }
.deck-history-current-badge, .deck-history-label { color: var(--blue-200); }
.deck-history-feedback.is-error { color: var(--red-300); }
.deck-history-choice:focus-visible { outline-color: var(--focus); }
.account-settings-section > summary:hover { background: var(--surface-muted); }
.account-menu-panel a:hover, .account-menu-panel a:focus-visible { background: var(--surface-muted); }

@media (min-width: 64rem) {
    .site-nav.site-nav-desktop { position: static; width: auto; gap: .25rem; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
    .site-nav-desktop > a:not(.button) { border-radius: 0; border-bottom: 2px solid transparent; background: transparent; }
    .site-nav-desktop > a.active:not(.button) { border-bottom-color: var(--text); color: var(--text); background: transparent; }
    .site-nav-desktop > a:not(.button):hover { background: transparent; color: var(--text); }
    .site-nav-desktop .button { padding-inline: .65rem; }
    .site-nav form .button, .site-nav .nav-cta { min-height: 2.75rem; }
}

@media (max-width: 47.99rem) {
    .shell, .shell-wide { width: min(calc(100% - 2rem), var(--shell)); }
    .builder-title { width: 100%; }
    .builder-topbar .list-workspace-tools { flex-basis: 100%; }
    .deck-topbar-actions { justify-content: flex-start; }
    .deck-overview-metrics { gap: .5rem 1rem; }
    .deck-overview-metrics > div { padding: 0; border: 0; }
    .deck-card-toolbar .list-content-search { flex-basis: 100%; width: 100%; max-width: none; }
    .deck-card-toolbar .deck-grouping-tools { flex-basis: 100%; width: 100%; justify-content: flex-start; }
    .deck-grouping-form { flex-wrap: wrap; flex: 1 1 auto; }
    .deck-grouping-multiple { min-height: 2.75rem; }
    .deck-panel-heading { flex-wrap: wrap; }
    .deck-insights { padding: 1rem; }
}

@media (max-width: 40rem) {
    .deck-card-grid, .unified-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
    .brand-copy strong { font-size: .8125rem; }
    .header-inner { gap: .4rem; }
    .header-actions { gap: .15rem; }
    .brand { gap: .4rem; }
    .brand-mark { width: 1.9rem; }
    .nav-toggle { padding-inline: .55rem; font-size: .8125rem; }
}

@media (prefers-reduced-motion: reduce) {
    .button, .theme-toggle { transition: none; }
}

@media (prefers-contrast: more) {
    :root { --line: #737b84; --line-strong: #59636e; --muted: #444f5b; --paper-400: var(--muted); --paper-500: #48515c; }
    :root[data-theme="dark"] { --line: #77818e; --line-strong: #a4aeba; --muted: #d2d9e2; --paper-500: #c3ccd8; }
    .site-header { background: var(--canvas) !important; }
    .empty-inline { background: var(--surface-muted) !important; }
    .deck-count, .deck-art .deck-count { color: #fff; background: #181b20 !important; }
}