/* True monochrome dark modes for Garam: Onix and Ash.
   Activated by garam_theme.js; all light presets remain unchanged.
   Main colors: Onix #000000, Ash #323339; page backgrounds #000000/#2c2d32. */
html[data-garam-mode="dark"] {
    color-scheme: dark;
    --garam-layout-ink: var(--garam-dark-text);
    --garam-layout-muted: var(--garam-dark-muted);
    --garam-layout-accent: var(--garam-theme-ui-accent);
}
html[data-garam-mode="dark"] body.garam-shell-body,
html[data-garam-mode="dark"] body.garam-shell-body.pricing-page,
html[data-garam-mode="dark"] body.garam-shell-body.guide-page,
html[data-garam-mode="dark"] body.garam-shell-body.pokas-home-page {
    background: var(--garam-theme-surface) !important;
    color: var(--garam-dark-text) !important;
}
html[data-garam-mode="dark"] body.garam-shell-body #container.garam-site-root {
    background: var(--garam-theme-surface) !important;
    color: var(--garam-dark-text);
}
html[data-garam-mode="dark"] body.garam-shell-body main.garam-site-frame,
html[data-garam-mode="dark"] body.garam-shell-body.pokas-home-page main.garam-site-frame {
    background: var(--garam-theme-surface) !important;
    background-image: none !important;
    color: var(--garam-dark-text);
}
/* Shared header, footer and mobile navigation */
html[data-garam-mode="dark"] body.garam-shell-body header.garam-site-header,
html[data-garam-mode="dark"] body.garam-shell-body header.garam-site-header.is-scrolling {
    background: var(--garam-dark-panel) !important;
    border-color: var(--garam-dark-border) !important;
    box-shadow: 0 8px 34px rgba(0,0,0,.33);
}
html[data-garam-mode="dark"] body.garam-shell-body #menu.garam-header-links a,
html[data-garam-mode="dark"] body.garam-shell-body .garam-footer-nav a,
html[data-garam-mode="dark"] body.garam-shell-body .garam-footer-legal a,
html[data-garam-mode="dark"] body.garam-shell-body .garam-mobile-nav a {
    color: var(--garam-dark-text) !important;
}
html[data-garam-mode="dark"] body.garam-shell-body #menu.garam-header-links a:hover,
html[data-garam-mode="dark"] body.garam-shell-body .garam-footer-nav a:hover,
html[data-garam-mode="dark"] body.garam-shell-body .garam-footer-legal a:hover,
html[data-garam-mode="dark"] body.garam-shell-body .garam-mobile-nav a:hover {
    color: var(--garam-theme-ui-accent) !important;
}
html[data-garam-mode="dark"] body.garam-shell-body a.garam-header-login {
    background: var(--garam-theme-accent) !important;
    border: 1px solid var(--garam-dark-border) !important;
    color: #fff !important;
}
html[data-garam-theme="onix"] body.garam-shell-body a.garam-header-login {
    background: #292a2e !important; /* Black on black needs a visible button. */
}
html[data-garam-mode="dark"] body.garam-shell-body a.garam-header-login:hover {
    background: var(--garam-dark-hover) !important;
}
html[data-garam-mode="dark"] body.garam-shell-body .garam-account-trigger img {
    border-color: var(--garam-dark-panel);
    box-shadow: 0 0 0 2px var(--garam-dark-border);
}
html[data-garam-mode="dark"] body.garam-shell-body .garam-account-dropdown {
    background: var(--garam-dark-panel) !important;
    color: var(--garam-dark-text) !important;
    border-color: var(--garam-dark-border) !important;
}
html[data-garam-mode="dark"] body.garam-shell-body .garam-account-menu-item,
html[data-garam-mode="dark"] body.garam-shell-body .garam-theme-custom,
html[data-garam-mode="dark"] body.garam-shell-body .garam-theme-label {
    color: var(--garam-dark-text) !important;
}
html[data-garam-mode="dark"] body.garam-shell-body .garam-account-menu-item:hover,
html[data-garam-mode="dark"] body.garam-shell-body .garam-account-menu-item:focus-visible {
    background: var(--garam-dark-hover) !important;
}
html[data-garam-mode="dark"] body.garam-shell-body .garam-theme-palette {
    background: var(--garam-dark-raised) !important;
    color: var(--garam-dark-text) !important;
}
html[data-garam-mode="dark"] body.garam-shell-body .garam-theme-reset,
html[data-garam-mode="dark"] body.garam-shell-body .garam-theme-custom input {
    color: var(--garam-dark-text) !important;
    background: var(--garam-dark-panel) !important;
    border-color: var(--garam-dark-border) !important;
}
html[data-garam-mode="dark"] body.garam-shell-body .garam-account-logout {
    border-color: var(--garam-dark-border) !important;
}
/* Circular theme selector: five light presets + custom, then Onix/Ash. */
html body.garam-shell-body .garam-theme-group + .garam-theme-group {
    margin-top: 16px;
}
html body.garam-shell-body .garam-theme-label {
    display: block;
    margin-bottom: 9px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .035em;
}
html body.garam-shell-body .garam-theme-presets {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 5px;
}
html body.garam-shell-body .garam-theme-presets button[data-garam-theme] {
    display: inline-flex;
    flex: 0 0 31px;
    align-items: center;
    justify-content: center;
    width: 31px;
    height: 31px;
    min-width: 31px;
    min-height: 31px;
    padding: 0;
    border-radius: 50%;
    border: 2px solid #fff;
    background: var(--swatch);
    color: transparent;
    font-size: 0;
    line-height: 0;
    cursor: pointer;
    box-shadow: 0 0 0 1px rgba(0,0,0,.20);
    transition: transform .15s ease;
}
html body.garam-shell-body .garam-theme-presets button[data-garam-theme][aria-pressed="true"] {
    outline: 2px solid var(--garam-theme-ui-accent, #087cce);
    outline-offset: 2px;
}
html body.garam-shell-body .garam-theme-presets button[data-garam-theme]:focus-visible {
    outline: 2px solid var(--garam-theme-ui-accent, #087cce);
    outline-offset: 3px;
}
/* The native color picker stays fully clickable, but looks like a circular swatch. */
html body.garam-shell-body .garam-theme-presets .garam-theme-custom {
    display: block;
    flex: 0 0 31px;
    width: 31px;
    height: 31px;
    min-width: 31px;
    min-height: 31px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    overflow: hidden;
    cursor: pointer;
    box-shadow: 0 0 0 1px rgba(0,0,0,.20);
}
html body.garam-shell-body .garam-theme-presets .garam-theme-custom input[type="color"] {
    display: block;
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 3px;
    border: 0 !important;
    border-radius: 50%;
    box-sizing: border-box;
    cursor: pointer;
    background: conic-gradient(#fa586c, #eb9b32, #20ad8b, #087cce, #a276db, #fa586c) !important;
}
html body.garam-shell-body .garam-theme-custom input[type="color"]::-webkit-color-swatch-wrapper {
    padding: 0;
    border-radius: 50%;
}
html body.garam-shell-body .garam-theme-custom input[type="color"]::-webkit-color-swatch {
    border: 0;
    border-radius: 50%;
}
html body.garam-shell-body .garam-theme-custom input[type="color"]::-moz-color-swatch {
    border: 0;
    border-radius: 50%;
}
html body.garam-shell-body .garam-theme-presets .garam-theme-custom:focus-within {
    outline: 2px solid var(--garam-theme-ui-accent, #087cce);
    outline-offset: 3px;
}
html body.garam-shell-body .garam-theme-dark-presets {
    gap: 17px;
}
html body.garam-shell-body .garam-theme-choice {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    min-width: 31px;
}
html body.garam-shell-body .garam-theme-presets .garam-theme-dark-preset {
    border: 2px solid #777982;
}
html body.garam-shell-body .garam-theme-choice-name {
    color: var(--garam-c-44718d, #44718d);
    font-size: 11px;
    line-height: 1.2;
    font-weight: 700;
}
html[data-garam-mode="dark"] body.garam-shell-body .garam-theme-choice-name {
    color: var(--garam-dark-muted);
}
html[data-garam-mode="dark"] body.garam-shell-body footer#jufooter.garam-site-footer {
    background: var(--garam-dark-panel) !important;
    color: var(--garam-dark-text) !important;
    box-shadow: 0 -6px 24px rgba(0,0,0,.2);
}
html[data-garam-mode="dark"] body.garam-shell-body .garam-footer-brand p,
html[data-garam-mode="dark"] body.garam-shell-body .garam-footer-bottom {
    color: var(--garam-dark-muted) !important;
}
html[data-garam-mode="dark"] body.garam-shell-body .garam-footer-bottom {
    border-color: var(--garam-dark-border) !important;
}
@media (max-width: 700px) {
    html[data-garam-mode="dark"] body.garam-shell-body nav.garam-mobile-nav {
        background: var(--garam-dark-panel) !important;
        border-color: var(--garam-dark-border) !important;
        box-shadow: -10px 12px 35px rgba(0,0,0,.45);
    }
    html[data-garam-mode="dark"] body.garam-shell-body .garam-site-header .hamburger {
        background: var(--garam-dark-raised) !important;
        border-color: var(--garam-dark-border) !important;
    }
    html[data-garam-mode="dark"] body.garam-shell-body .hamburger .bar,
    html[data-garam-mode="dark"] body.garam-shell-body .hamburger .bar::before,
    html[data-garam-mode="dark"] body.garam-shell-body .hamburger .bar::after {
        background: var(--garam-dark-text) !important;
    }
    html[data-garam-mode="dark"] body.garam-shell-body .hamburger.is-active .bar {
        background: transparent !important;
    }
    html[data-garam-mode="dark"] body.garam-shell-body .garam-mobile-nav a:hover,
    html[data-garam-mode="dark"] body.garam-shell-body .garam-mobile-nav a:focus-visible {
        background: var(--garam-dark-hover) !important;
    }
}
/* Inventory including guest chooser, modal panels, fields, and results. */
html[data-garam-mode="dark"] body.garam-shell-body .garam-page {
    color: var(--garam-dark-text) !important;
}
html[data-garam-mode="dark"] body.garam-shell-body .garam-filter-panel,
html[data-garam-mode="dark"] body.garam-shell-body .garam-guest-card,
html[data-garam-mode="dark"] body.garam-shell-body .garam-owner-modal-panel,
html[data-garam-mode="dark"] body.garam-shell-body .garam-modal-panel {
    background: var(--garam-dark-panel) !important;
    color: var(--garam-dark-text) !important;
    border-color: var(--garam-dark-border) !important;
}
html[data-garam-mode="dark"] body.garam-shell-body .garam-card-tile,
html[data-garam-mode="dark"] body.garam-shell-body .garam-modal-details {
    background: var(--garam-dark-raised) !important;
    color: var(--garam-dark-text) !important;
    border-color: var(--garam-dark-border) !important;
}
html[data-garam-mode="dark"] body.garam-shell-body .garam-modal-stage,
html[data-garam-mode="dark"] body.garam-shell-body .garam-modal-fallback,
html[data-garam-mode="dark"] body.garam-shell-body .garam-card-missing {
    background: var(--garam-dark-hover) !important;
    color: var(--garam-dark-text) !important;
}
html[data-garam-mode="dark"] body.garam-shell-body .garam-hero-title,
html[data-garam-mode="dark"] body.garam-shell-body .garam-owner-instruction,
html[data-garam-mode="dark"] body.garam-shell-body .garam-modal-header h2,
html[data-garam-mode="dark"] body.garam-shell-body .garam-modal-summary h3,
html[data-garam-mode="dark"] body.garam-shell-body .garam-owner-modal-header h2,
html[data-garam-mode="dark"] body.garam-shell-body .garam-modal-facts dd,
html[data-garam-mode="dark"] body.garam-shell-body .garam-guest-card h2 {
    color: var(--garam-dark-text) !important;
}
html[data-garam-mode="dark"] body.garam-shell-body .garam-filter span,
html[data-garam-mode="dark"] body.garam-shell-body .garam-filter-hint,
html[data-garam-mode="dark"] body.garam-shell-body #inventoryCount,
html[data-garam-mode="dark"] body.garam-shell-body #pageDisplay,
html[data-garam-mode="dark"] body.garam-shell-body .garam-modal-facts dt,
html[data-garam-mode="dark"] body.garam-shell-body .garam-modal-summary p,
html[data-garam-mode="dark"] body.garam-shell-body .garam-owner-modal-description,
html[data-garam-mode="dark"] body.garam-shell-body .garam-owner-form label,
html[data-garam-mode="dark"] body.garam-shell-body .garam-modal-status {
    color: var(--garam-dark-muted) !important;
}
html[data-garam-mode="dark"] body.garam-shell-body .garam-page .garam-filter .inputStyle,
html[data-garam-mode="dark"] body.garam-shell-body .garam-owner-id-input,
html[data-garam-mode="dark"] body.garam-shell-body .garam-guest-id-input,
html[data-garam-mode="dark"] body.garam-shell-body input:not([type="color"]).garam-owner-id-input {
    background: var(--garam-dark-raised) !important;
    color: var(--garam-dark-text) !important;
    border-color: var(--garam-dark-border) !important;
}
html[data-garam-mode="dark"] body.garam-shell-body .garam-page input::placeholder,
html[data-garam-mode="dark"] body.garam-shell-body .garam-page select::placeholder,
html[data-garam-mode="dark"] body.garam-shell-body .garam-owner-id-input::placeholder {
    color: var(--garam-dark-muted) !important;
    opacity: .85;
}
html[data-garam-mode="dark"] body.garam-shell-body .garam-page .garam-button-outline,
html[data-garam-mode="dark"] body.garam-shell-body .garam-owner-action-outline,
html[data-garam-mode="dark"] body.garam-shell-body .garam-modal-close,
html[data-garam-mode="dark"] body.garam-shell-body .garam-page .garam-button-icon {
    background: var(--garam-dark-raised) !important;
    border-color: var(--garam-dark-border) !important;
    color: var(--garam-dark-text) !important;
}
html[data-garam-mode="dark"] body.garam-shell-body .garam-page .garam-button-primary,
html[data-garam-mode="dark"] body.garam-shell-body .garam-owner-action-primary {
    background: var(--garam-dark-hover) !important;
    border: 1px solid var(--garam-theme-ui-accent) !important;
    color: var(--garam-dark-text) !important;
    box-shadow: none !important;
}
html[data-garam-mode="dark"] body.garam-shell-body .garam-page .garam-button:hover,
html[data-garam-mode="dark"] body.garam-shell-body .garam-owner-action:hover,
html[data-garam-mode="dark"] body.garam-shell-body .garam-modal-close:hover {
    background: var(--garam-dark-hover) !important;
}
html[data-garam-mode="dark"] body.garam-shell-body .garam-modal-chip {
    background: var(--garam-dark-hover) !important;
    color: var(--garam-dark-text) !important;
}
html[data-garam-mode="dark"] body.garam-shell-body .garam-modal-facts a {
    color: var(--garam-theme-ui-accent) !important;
}
html[data-garam-mode="dark"] body.garam-shell-body .garam-modal-summary {
    border-color: var(--garam-dark-border) !important;
}
html[data-garam-mode="dark"] body.garam-shell-body .garam-card-badge-copy {
    background: #24252a !important;
    color: white !important;
}
/* Keep the user's requested fixed modal overlay untouched in all themes. */
html[data-garam-mode="dark"] body.garam-shell-body #garam3DModal.garam-modal {
    background: rgb(10 10 10 / 40%) !important;
}
/* Guide: white panels and pink highlights become dark surfaces/greys. */
html[data-garam-mode="dark"] body.garam-shell-body .guide-section,
html[data-garam-mode="dark"] body.garam-shell-body .abbr-card {
    background: var(--garam-dark-panel) !important;
    color: var(--garam-dark-text) !important;
    border-color: var(--garam-dark-border) !important;
}
html[data-garam-mode="dark"] body.garam-shell-body .abbr-card,
html[data-garam-mode="dark"] body.garam-shell-body .note-box {
    background: var(--garam-dark-raised) !important;
    color: var(--garam-dark-text) !important;
}
html[data-garam-mode="dark"] body.garam-shell-body .guide-header h1,
html[data-garam-mode="dark"] body.garam-shell-body .guide-section h2,
html[data-garam-mode="dark"] body.garam-shell-body .guide-content h3,
html[data-garam-mode="dark"] body.garam-shell-body .abbr-card strong {
    color: var(--garam-dark-text) !important;
}
html[data-garam-mode="dark"] body.garam-shell-body .guide-section h2,
html[data-garam-mode="dark"] body.garam-shell-body .note-box {
    border-color: var(--garam-dark-border) !important;
}
html[data-garam-mode="dark"] body.garam-shell-body .cmd {
    background: var(--garam-dark-hover) !important;
    color: var(--garam-theme-ui-accent) !important;
}
/* Pricing membership + shop: retain payment provider buttons as provided. */
html[data-garam-mode="dark"] body.garam-shell-body .pricing-card,
html[data-garam-mode="dark"] body.garam-shell-body .shop-card {
    background: var(--garam-dark-panel) !important;
    border: 1px solid var(--garam-dark-border) !important;
    color: var(--garam-dark-text) !important;
}
html[data-garam-mode="dark"] body.garam-shell-body .pricing-card .plan-name,
html[data-garam-mode="dark"] body.garam-shell-body .pricing-card .plan-price,
html[data-garam-mode="dark"] body.garam-shell-body .shop-card-title {
    color: var(--garam-dark-text) !important;
}
html[data-garam-mode="dark"] body.garam-shell-body .plan-price span,
html[data-garam-mode="dark"] body.garam-shell-body .member-count,
html[data-garam-mode="dark"] body.garam-shell-body .features-list li,
html[data-garam-mode="dark"] body.garam-shell-body .shop-card-desc,
html[data-garam-mode="dark"] body.garam-shell-body .shop-card-sold {
    color: var(--garam-dark-muted) !important;
}
html[data-garam-mode="dark"] body.garam-shell-body .shop-card-price {
    background: var(--garam-dark-hover) !important;
    color: var(--garam-dark-text) !important;
    border: 1px solid var(--garam-dark-border);
}
html[data-garam-mode="dark"] body.garam-shell-body .join-btn:not([href^="https://buy.stripe.com"]) {
    background: var(--garam-dark-hover) !important;
    color: var(--garam-dark-text) !important;
    border: 1px solid var(--garam-dark-border) !important;
}
html[data-garam-mode="dark"] body.garam-shell-body .tab-btn {
    color: var(--garam-dark-muted) !important;
    border-color: var(--garam-dark-border) !important;
}
html[data-garam-mode="dark"] body.garam-shell-body .tab-btn.active {
    color: var(--garam-dark-text) !important;
    border-color: var(--garam-theme-ui-accent) !important;
}
/* Home: replace editorial white, colorful info cards, and white logo strip. */
html[data-garam-mode="dark"] body.garam-shell-body .pokas-home-editorial,
html[data-garam-mode="dark"] body.garam-shell-body.pokas-home-page .pokas-home-editorial,
html[data-garam-mode="dark"] body.garam-shell-body.pokas-home-page .logos {
    background: var(--garam-theme-surface) !important;
    color: var(--garam-dark-text) !important;
}
html[data-garam-mode="dark"] body.garam-shell-body .pokas-section-heading h2,
html[data-garam-mode="dark"] body.garam-shell-body .pokas-journey-intro h3,
html[data-garam-mode="dark"] body.garam-shell-body .pokas-moment-section h2 {
    color: var(--garam-dark-text) !important;
}
html[data-garam-mode="dark"] body.garam-shell-body .pokas-journey-intro p,
html[data-garam-mode="dark"] body.garam-shell-body .pokas-feature-stat-subtitle {
    color: var(--garam-dark-muted) !important;
}
html[data-garam-mode="dark"] body.garam-shell-body .pokas-section-arrow,
html[data-garam-mode="dark"] body.garam-shell-body .pokas-image-placeholder {
    background: var(--garam-dark-raised) !important;
    color: var(--garam-dark-text) !important;
}
html[data-garam-mode="dark"] body.garam-shell-body .pokas-section-arrow:hover {
    background: var(--garam-dark-hover) !important;
}
html[data-garam-mode="dark"] body.garam-shell-body .pokas-journey-panel,
html[data-garam-mode="dark"] body.garam-shell-body .pokas-feature-box,
html[data-garam-mode="dark"] body.garam-shell-body .pokas-feature-box .pokas-feature-inner {
    background: var(--garam-dark-panel) !important;
    color: var(--garam-dark-text) !important;
    border-color: var(--garam-dark-border) !important;
}
html[data-garam-mode="dark"] body.garam-shell-body .pokas-journey-panel p {
    color: var(--garam-dark-muted) !important;
}
html[data-garam-mode="dark"] body.garam-shell-body .pokas-pill-link {
    background: var(--garam-dark-raised) !important;
    color: var(--garam-dark-text) !important;
}
html[data-garam-mode="dark"] body.garam-shell-body .pokas-feature-label,
html[data-garam-mode="dark"] body.garam-shell-body .pokas-feature-inner h3 {
    color: var(--garam-dark-text) !important;
}
html[data-garam-mode="dark"] body.garam-shell-body .pokas-home-hero-copy {
    background: rgba(23, 24, 28, .90) !important;
    border-color: var(--garam-dark-border) !important;
    color: var(--garam-dark-text) !important;
}
html[data-garam-mode="dark"] body.garam-shell-body .pokas-home-hero-copy h1,
html[data-garam-mode="dark"] body.garam-shell-body .pokas-home-hero-copy p {
    color: var(--garam-dark-text) !important;
}
html[data-garam-mode="dark"] body.garam-shell-body .pokas-home-hero-copy .join-pokas-btn {
    background: var(--garam-dark-hover) !important;
    color: var(--garam-dark-text) !important;
    border: 1px solid var(--garam-theme-ui-accent);
}
html[data-garam-mode="dark"] body.garam-shell-body.pokas-home-page .logos {
    border-color: var(--garam-dark-border) !important;
}