/* CRATE — custom styles layered on top of Pico CSS classless */

:root, [data-crate-theme="classic"] {
    --pico-primary: #92400e;
    --pico-primary-hover: #78350f;
    --pico-primary-focus: rgba(146, 64, 14, 0.25);
    --pico-primary-inverse: #fff;

    --color-score-bar: #d97706;
    --color-score-bg: #fef3c7;
    --color-muted: #6b7280;
    --color-surface: #ffffff;
    --color-border: #e5e7eb;
    --color-success-bg: #d1fae5;
    --color-success-text: #065f46;
    --color-error-bg: #fee2e2;
    --color-error-text: #991b1b;
    --color-info-bg: #dbeafe;
    --color-info-text: #1e40af;

    --color-nav-bg: var(--pico-primary);
    --color-nav-border: var(--pico-primary-hover);
    --color-stepper-bg: #f9fafb;
    --color-input-bg: #ffffff;
    --color-progress-track: #f3f4f6;
    --color-progress-default: #d1d5db;
}

/* ── Theme: Speakeasy ── */
[data-crate-theme="speakeasy"] {
    --pico-primary: #c9a227;
    --pico-primary-hover: #b8922a;
    --pico-primary-focus: rgba(201, 162, 39, 0.25);
    --pico-primary-inverse: #1a1a2e;

    --color-score-bar: #c9a227;
    --color-score-bg: rgba(201, 162, 39, 0.15);
    --color-muted: #9ca3af;
    --color-surface: #232342;
    --color-border: #3a3a5c;
    --color-success-bg: #064e3b;
    --color-success-text: #6ee7b7;
    --color-error-bg: #7f1d1d;
    --color-error-text: #fca5a5;
    --color-info-bg: #1e3a5f;
    --color-info-text: #93c5fd;

    --color-nav-bg: #12122a;
    --color-nav-border: #0a0a1e;
    --color-stepper-bg: #1e1e38;
    --color-input-bg: #1a1a2e;
    --color-progress-track: #2a2a4a;
    --color-progress-default: #3a3a5c;
}

/* ── Theme: Botanical ── */
[data-crate-theme="botanical"] {
    --pico-primary: #1b4332;
    --pico-primary-hover: #14532d;
    --pico-primary-focus: rgba(27, 67, 50, 0.25);
    --pico-primary-inverse: #fff;

    --color-score-bar: #d4a373;
    --color-score-bg: #fefae0;
    --color-muted: #6b7280;
    --color-surface: #fffef5;
    --color-border: #d4d1c0;
    --color-success-bg: #d1fae5;
    --color-success-text: #065f46;
    --color-error-bg: #fee2e2;
    --color-error-text: #991b1b;
    --color-info-bg: #dbeafe;
    --color-info-text: #1e40af;

    --color-nav-bg: var(--pico-primary);
    --color-nav-border: var(--pico-primary-hover);
    --color-stepper-bg: #f5f3e8;
    --color-input-bg: #fffef5;
    --color-progress-track: #ece9d8;
    --color-progress-default: #d4d1c0;
}

/* ── Theme: Midnight Copper ── */
[data-crate-theme="midnight"] {
    --pico-primary: #d97706;
    --pico-primary-hover: #b45309;
    --pico-primary-focus: rgba(217, 119, 6, 0.25);
    --pico-primary-inverse: #0f172a;

    --color-score-bar: #d97706;
    --color-score-bg: rgba(217, 119, 6, 0.15);
    --color-muted: #94a3b8;
    --color-surface: #1e293b;
    --color-border: #334155;
    --color-success-bg: #064e3b;
    --color-success-text: #6ee7b7;
    --color-error-bg: #7f1d1d;
    --color-error-text: #fca5a5;
    --color-info-bg: #1e3a5f;
    --color-info-text: #93c5fd;

    --color-nav-bg: #0f172a;
    --color-nav-border: #080e1a;
    --color-stepper-bg: #172033;
    --color-input-bg: #0f172a;
    --color-progress-track: #283347;
    --color-progress-default: #334155;
}

/* ── Theme: Dracula ── */
[data-crate-theme="dracula"] {
    --pico-primary: #bd93f9;
    --pico-primary-hover: #a87de8;
    --pico-primary-focus: rgba(189, 147, 249, 0.25);
    --pico-primary-inverse: #282a36;

    --color-score-bar: #ff79c6;
    --color-score-bg: rgba(189, 147, 249, 0.12);
    --color-muted: #6272a4;
    --color-surface: #282a36;
    --color-border: #44475a;
    --color-success-bg: #1a3a2a;
    --color-success-text: #50fa7b;
    --color-error-bg: #3d1520;
    --color-error-text: #ff5555;
    --color-info-bg: #1a2a3d;
    --color-info-text: #8be9fd;

    --color-nav-bg: #21222c;
    --color-nav-border: #191a21;
    --color-stepper-bg: #2d2f3d;
    --color-input-bg: #21222c;
    --color-progress-track: #343746;
    --color-progress-default: #44475a;
}

/* ── Theme: Nord ── */
[data-crate-theme="nord"] {
    --pico-primary: #88c0d0;
    --pico-primary-hover: #81a1c1;
    --pico-primary-focus: rgba(136, 192, 208, 0.25);
    --pico-primary-inverse: #2e3440;

    --color-score-bar: #88c0d0;
    --color-score-bg: rgba(136, 192, 208, 0.12);
    --color-muted: #7b88a1;
    --color-surface: #3b4252;
    --color-border: #4c566a;
    --color-success-bg: #2e3d2e;
    --color-success-text: #a3be8c;
    --color-error-bg: #3d2e2e;
    --color-error-text: #bf616a;
    --color-info-bg: #2e3440;
    --color-info-text: #5e81ac;

    --color-nav-bg: #2e3440;
    --color-nav-border: #242933;
    --color-stepper-bg: #353c4a;
    --color-input-bg: #2e3440;
    --color-progress-track: #434c5e;
    --color-progress-default: #4c566a;
}

/* ── Theme: Gruvbox ── */
[data-crate-theme="gruvbox"] {
    --pico-primary: #fe8019;
    --pico-primary-hover: #d65d0e;
    --pico-primary-focus: rgba(254, 128, 25, 0.25);
    --pico-primary-inverse: #1d2021;

    --color-score-bar: #fabd2f;
    --color-score-bg: rgba(254, 128, 25, 0.12);
    --color-muted: #a89984;
    --color-surface: #282828;
    --color-border: #504945;
    --color-success-bg: #2a2e1f;
    --color-success-text: #b8bb26;
    --color-error-bg: #3c1f1f;
    --color-error-text: #fb4934;
    --color-info-bg: #1f2e2e;
    --color-info-text: #83a598;

    --color-nav-bg: #1d2021;
    --color-nav-border: #141617;
    --color-stepper-bg: #32302f;
    --color-input-bg: #1d2021;
    --color-progress-track: #3c3836;
    --color-progress-default: #504945;
}

/* ── Theme: Monokai ── */
[data-crate-theme="monokai"] {
    --pico-primary: #f92672;
    --pico-primary-hover: #e01f63;
    --pico-primary-focus: rgba(249, 38, 114, 0.25);
    --pico-primary-inverse: #272822;

    --color-score-bar: #a6e22e;
    --color-score-bg: rgba(249, 38, 114, 0.12);
    --color-muted: #75715e;
    --color-surface: #272822;
    --color-border: #49483e;
    --color-success-bg: #2a331a;
    --color-success-text: #a6e22e;
    --color-error-bg: #3d1520;
    --color-error-text: #f92672;
    --color-info-bg: #1a2e33;
    --color-info-text: #66d9ef;

    --color-nav-bg: #1e1f1c;
    --color-nav-border: #141512;
    --color-stepper-bg: #32332c;
    --color-input-bg: #1e1f1c;
    --color-progress-track: #3e3d32;
    --color-progress-default: #49483e;
}

/* ── Theme: Solarized ── */
[data-crate-theme="solarized"] {
    --pico-primary: #268bd2;
    --pico-primary-hover: #1a6da8;
    --pico-primary-focus: rgba(38, 139, 210, 0.25);
    --pico-primary-inverse: #fdf6e3;

    --color-score-bar: #2aa198;
    --color-score-bg: #eee8d5;
    --color-muted: #657b83;
    --color-surface: #fdf6e3;
    --color-border: #d6cdb5;
    --color-success-bg: #d9ead3;
    --color-success-text: #586e0a;
    --color-error-bg: #f5d5d0;
    --color-error-text: #dc322f;
    --color-info-bg: #d4e9f7;
    --color-info-text: #268bd2;

    --color-nav-bg: #073642;
    --color-nav-border: #002b36;
    --color-stepper-bg: #eee8d5;
    --color-input-bg: #fdf6e3;
    --color-progress-track: #eee8d5;
    --color-progress-default: #d6cdb5;
}

/* ── Layout ── */
body { font-size: 1rem; }

main { padding: 1rem; }

@media (max-width: 480px) {
    nav a, nav button { font-size: 0.8rem; padding: 0.25rem 0.35rem; }
    .nav-brand { font-size: 1rem; }
}

@media (min-width: 640px) {
    main { padding: 2rem; }
}

/* ── Navigation ── */
nav {
    padding: 0.75rem 1rem;
    background: var(--color-nav-bg);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
    position: sticky;
    top: 0;
    z-index: 200;
}

nav a, nav button {
    color: #fff !important;
    text-decoration: none;
    font-size: 0.9rem;
    background: none;
    border: none;
    padding: 0.25rem 0.5rem;
    cursor: pointer;
    font-weight: 500;
    width: auto;
    margin: 0;
    white-space: nowrap;
    flex-shrink: 0;
    /* Identical box model for links and the logout <button> so they align exactly */
    display: inline-flex;
    align-items: center;
    line-height: 1.5;
    height: auto;
}

/* The logout button is wrapped in a <form>; make the wrapper a transparent flex
   item so the button sits on the same baseline as the <a> nav links. */
.nav-links form {
    display: inline-flex;
    align-items: center;
    margin: 0;
}

.nav-brand {
    font-weight: 700;
    font-size: 1.1rem;
    letter-spacing: 0.05em;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.nav-links::-webkit-scrollbar { display: none; }

/* ── Flash messages ── */
.flash-messages { margin-bottom: 1rem; }

.flash {
    position: relative;
    padding: 0.75rem 1rem;
    border-radius: 6px;
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
    transition: opacity 180ms ease, max-height 180ms ease,
                margin 180ms ease, padding 180ms ease;
}

.flash-success { background: var(--color-success-bg); color: var(--color-success-text); }
.flash-error   { background: var(--color-error-bg);   color: var(--color-error-text); }
.flash-info    { background: var(--color-info-bg);     color: var(--color-info-text); }

.flash-dismiss {
    float: right;
    margin: -0.35rem -0.5rem -0.35rem 0.75rem;
    padding: 0.15rem 0.45rem;
    border: 0;
    background: transparent;
    color: inherit;
    font-size: 1.25rem;
    line-height: 1;
    opacity: 0.7;
    cursor: pointer;
}

.flash-dismiss:hover,
.flash-dismiss:focus-visible { opacity: 1; }

.flash-dismissed {
    max-height: 0;
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
    opacity: 0;
    overflow: hidden;
}

/* ── Cards ── */
.card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1rem;
}

/* ── Assessment scorecard categories ── */
/* Mobile-first: each category is a self-contained card with description always visible */
.category-card {
    border: 1px solid var(--color-border);
    border-left-width: 4px;   /* JS sets border-left-color to reflect score level */
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 0.875rem;
    background: var(--color-surface);
    transition: border-left-color 0.3s ease;
}

.category-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.4rem;
}

.category-name {
    font-weight: 700;
    font-size: 1rem;
    margin: 0;
}

.category-pts-badge {
    font-size: 0.72rem;
    font-weight: 700;
    background: var(--color-score-bg);
    color: var(--pico-primary);
    padding: 0.2rem 0.45rem;
    border-radius: 4px;
    white-space: nowrap;
    flex-shrink: 0;
}

.category-description {
    font-size: 0.85rem;
    color: var(--color-muted);
    margin: 0 0 0.875rem;
    line-height: 1.5;
}

.category-rubric {
    min-height: 1.25rem;
    margin: -0.35rem 0 0.75rem;
    color: var(--color-muted);
    font-size: 0.78rem;
    font-style: italic;
    line-height: 1.4;
}

/* ── Stepper control ── */
.stepper-row {
    display: flex;
    border: 2px solid var(--color-border);
    border-radius: 10px;
    overflow: hidden;
    transition: border-color 0.2s;
}

.stepper-row:focus-within {
    border-color: var(--pico-primary);
}

.stepper-btn {
    flex: 0 0 3.5rem;          /* 56px — minimum comfortable tap target */
    height: 3.5rem;
    font-size: 1.6rem;
    font-weight: 300;
    line-height: 1;
    background: var(--color-stepper-bg);
    border: none;
    cursor: pointer;
    color: var(--pico-primary);
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation; /* prevents 300ms tap delay and double-tap zoom */
    transition: background 0.1s;
}

.stepper-btn:active,
.stepper-btn:hover {
    background: var(--color-score-bg);
}

/* The number input between the two buttons */
.stepper-input {
    flex: 1;
    height: 3.5rem;
    min-width: 0;
    font-size: 1.75rem !important;
    font-weight: 700;
    text-align: center;
    border: none;
    border-left: 1px solid var(--color-border);
    border-right: 1px solid var(--color-border);
    color: var(--pico-primary);
    background: var(--color-input-bg);
    -moz-appearance: textfield;
    outline: none;
    cursor: text;
}

.stepper-input::-webkit-outer-spin-button,
.stepper-input::-webkit-inner-spin-button { -webkit-appearance: none; }

/* Full-width progress bar */
.score-progress {
    height: 14px;
    background: var(--color-progress-track);
    border-radius: 7px;
    overflow: hidden;
    margin-top: 0.625rem;
}

.score-progress-fill {
    height: 100%;
    border-radius: 7px;
    width: 0%;
    background-color: var(--color-progress-default);
    transition: width 0.2s ease, background-color 0.35s ease;
}

/* Score fraction label: "18 / 25" right-aligned below the bar */
.score-frac-label {
    text-align: right;
    font-size: 0.8rem;
    color: var(--color-muted);
    margin-top: 0.3rem;
    font-variant-numeric: tabular-nums;
}

/* ── Sticky score total ── */
.score-total-bar {
    position: sticky;
    bottom: 0;
    background: var(--pico-primary);
    color: #fff;
    padding: 0.875rem 1rem;
    text-align: center;
    font-size: 1.1rem;
    font-weight: 700;
    border-top: 3px solid var(--color-nav-border);
    z-index: 100;
    letter-spacing: 0.02em;
    transition: background-color 0.4s ease;
}

/* Space so submit button isn't hidden behind the sticky bar */
.form-submit-area { padding-bottom: 4rem; margin-top: 1rem; }

/* ── Score display bars (reports) ── */
.score-bar-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0.25rem 0;
}

.score-bar-track {
    flex: 1;
    height: 10px;
    background: var(--color-score-bg);
    border-radius: 5px;
    overflow: hidden;
}

.score-bar-fill {
    height: 100%;
    background: var(--color-score-bar);
    border-radius: 5px;
}

.score-label {
    min-width: 3rem;
    font-size: 0.85rem;
    color: var(--color-muted);
    text-align: right;
}

/* ── Big score badge ── */
.score-badge {
    display: inline-block;
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--pico-primary);
    line-height: 1;
}

.score-badge-max {
    font-size: 1rem;
    color: var(--color-muted);
    font-weight: 400;
}

/* ── Tables ── */
table { font-size: 0.9rem; }
thead th { color: var(--color-muted); font-weight: 600; }

/* Rank column */
td.rank { font-weight: 700; color: var(--pico-primary); text-align: center; }

/* ── Utility ── */
.text-muted { color: var(--color-muted); font-size: 0.875rem; }
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.section-title { margin-top: 2rem; margin-bottom: 0.75rem; scroll-margin-top: 1rem; }

/* In-page section jump nav (long report pages). */
.report-jump {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 0.9rem;
    margin: 1rem 0 0.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--color-border);
    font-size: 0.85rem;
}
.report-jump a { color: var(--color-muted); text-decoration: none; }
.report-jump a:hover { color: var(--pico-primary); text-decoration: underline; }

/* ── Forms ── */
/* Keep all inputs 16px minimum to prevent iOS auto-zoom */
input, select, textarea { font-size: 1rem !important; }

.form-hint { font-size: 0.8rem; color: var(--color-muted); margin-top: 0.25rem; }

/* ── Chips / tags ── */
.tag {
    display: inline-block;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    font-size: 0.78rem;
    font-weight: 600;
    background: var(--color-score-bg);
    color: var(--pico-primary);
}
/* Consistency-report verdict pills (green/amber/red, theme-independent). */
.tag-consistent { background: #d1fae5; color: #065f46; }
.tag-spread     { background: #fef3c7; color: #92400e; }
.tag-polarizing { background: #fee2e2; color: #991b1b; }
/* Derived base-spirit pill (search) — outlined to read apart from tags. */
.tag-spirit {
    background: transparent;
    border: 1px solid var(--pico-primary);
    text-transform: capitalize;
}
/* No-longer-offered marker — muted, dashed (record-keeping, not a rating). */
.tag-retired {
    background: transparent;
    border: 1px dashed var(--color-muted);
    color: var(--color-muted);
    margin-left: 0.4rem;
}
/* Seasonal marker — absent lately, may return; distinct amber dashed outline
   so it doesn't read as final/permanent like .tag-retired. */
.tag-seasonal {
    background: transparent;
    border: 1px dashed #b45309;
    color: #b45309;
    margin-left: 0.4rem;
}

.tag-classic {
    background: transparent;
    border: 1px dashed var(--color-info-text);
    color: var(--color-info-text);
    margin-left: 0.4rem;
}

/* Tag-reference page: used tags read as solid pills, unused as muted outlines. */
.tag-ref-list { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.5rem; }
a.tag-ref-used { text-decoration: none; }
.tag-ref-unused {
    background: transparent;
    border: 1px dashed var(--color-border);
    color: var(--color-muted);
    font-weight: 500;
}

/* Cocktail-page tap-only tag editor: vocabulary chips as toggle checkboxes.
   Unchecked reads as a muted dashed suggestion; checked as a solid applied pill
   (mirrors the tag-reference used/unused look). Pure CSS — no JS, CSP-clean. */
.tag-editor { margin: -0.5rem 0 1.25rem; }
.tag-editor summary { cursor: pointer; font-weight: 600; color: var(--pico-primary); }
.tag-editor-hint { font-size: 0.8rem; margin: 0.5rem 0 0.75rem; }
.tag-editor-group { margin: 0.75rem 0 0.35rem; font-size: 0.82rem; color: var(--color-muted); }
.tag-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.5rem; }
.tag-chip { cursor: pointer; }
.tag-chip input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.tag-chip span {
    display: inline-block;
    padding: 0.25rem 0.6rem;
    border-radius: 4px;
    font-size: 0.78rem;
    font-weight: 600;
    background: transparent;
    border: 1px dashed var(--color-border);
    color: var(--color-muted);
    user-select: none;
}
.tag-chip input:checked + span {
    background: var(--color-score-bg);
    border: 1px solid var(--pico-primary);
    color: var(--pico-primary);
}
.tag-chip input:focus-visible + span { outline: 2px solid var(--pico-primary); outline-offset: 1px; }

/* Recent-entries "quick edit tags" nudge link. */
.recent-tag-link { font-size: 0.75rem; }

/* Score lens toggle (footer): raw ↔ percentile view. */
.score-lens-toggle {
    margin-left: 0.75rem;
    padding: 0.15rem 0.6rem;
    font-size: 0.72rem;
    font-weight: 600;
    width: auto;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: transparent;
    color: var(--color-muted);
    cursor: pointer;
}
.score-lens-toggle[aria-pressed="true"] {
    background: var(--color-score-bg);
    border-color: var(--pico-primary);
    color: var(--pico-primary);
}
/* A subtle marker while the lens is active, so 0–100 percentiles aren't mistaken
   for raw scores. */
[data-score-lens="percentile"] .score-num { font-style: italic; }

/* ── Assessment photos ── */
.photo-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1rem;
}
.photo-item { margin: 0; }
.photo-item img {
    display: block;
    width: 160px;
    height: 160px;
    object-fit: cover;
    border-radius: 8px;
    background: var(--color-score-bg);
}
.photo-item form { margin-top: 0.35rem; text-align: center; }
.photo-upload { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-bottom: 1rem; }
.photo-upload input[type="file"] { flex: 1; min-width: 200px; }
/* Subtle "has photo" marker shown wherever assessments are listed */
.photo-flag { vertical-align: -2px; margin-left: 0.5rem; color: var(--color-muted); opacity: 0.7; }
/* Firefox-iOS photo-picker hint (revealed by JS only for that browser) */
.photo-fx-hint { font-size: 0.8rem; margin: -0.5rem 0 1rem; }

/* Full-size photo overlay (opened from the thumbnail) with a clear close button. */
.photo-lightbox {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background: rgba(0, 0, 0, 0.85);
}
.photo-lightbox[hidden] { display: none; }
.photo-lightbox img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 6px;
}
.photo-lightbox-close {
    position: absolute;
    top: max(0.75rem, env(safe-area-inset-top));
    right: max(0.75rem, env(safe-area-inset-right));
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    line-height: 1;
    border: none;
    border-radius: 50%;
    color: #fff;
    background: rgba(0, 0, 0, 0.55);
    cursor: pointer;
}
.photo-lightbox-close:hover { background: rgba(0, 0, 0, 0.8); }

/* ── PWA sidecar: install banner + input-focused standalone chrome ── */
.nav-fullapp { display: none; }  /* revealed only in standalone mode (below) */
.pwa-banner { display: none; }
.pwa-banner:not([hidden]) {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    padding: 0.55rem 1rem;
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    font-size: 0.9rem;
}
.pwa-banner-text { flex: 1; min-width: 12rem; color: var(--color-muted); }
.pwa-banner-open, .pwa-banner #pwa-install { white-space: nowrap; padding: 0.25rem 0.7rem; font-size: 0.85rem; }
.pwa-banner-close {
    background: none; border: none; cursor: pointer;
    font-size: 1.3rem; line-height: 1; color: var(--color-muted); padding: 0 0.2rem;
}
@media all and (display-mode: standalone) {
    nav .nav-secondary { display: none; }
    .nav-fullapp { display: inline; }
    .pwa-banner:not([hidden]) { display: none; }  /* never nudge inside the installed app */
}
.photo-strip { display: flex; gap: 0.5rem; overflow-x: auto; padding-bottom: 0.25rem; }
.photo-strip img {
    width: 96px;
    height: 96px;
    object-fit: cover;
    border-radius: 6px;
    flex-shrink: 0;
}

/* ── Gallery page ── */
.gallery-toggle {
    display: inline-flex;
    gap: 0;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 1rem;
}
.gallery-toggle-btn {
    padding: 0.4rem 1rem;
    font-size: 0.9rem;
    text-decoration: none;
    color: var(--color-muted);
    background: var(--color-surface);
}
.gallery-toggle-btn.is-active {
    background: var(--pico-primary, #3b82f6);
    color: #fff;
}
.gallery-group { margin-bottom: 1.5rem; }
.gallery-count {
    font-size: 0.8rem;
    font-weight: 400;
    margin-left: 0.4rem;
}
/* One photo per row on mobile / installed PWA (big, tappable); three across once
   there's desktop width to use. */
.gallery-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
}
@media (min-width: 700px) {
    .gallery-grid { grid-template-columns: repeat(3, 1fr); }
}
.gallery-item { margin: 0; }
.gallery-item .photo-zoom { display: block; cursor: zoom-in; }
.gallery-item img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 6px;
    display: block;
}
.gallery-caption {
    font-size: 0.78rem;
    line-height: 1.3;
    margin-top: 0.3rem;
    display: flex;
    flex-direction: column;
}

.image-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 1rem;
}
.gallery-item { margin: 0; }
.gallery-item img {
    display: block;
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 8px;
    background: var(--color-score-bg);
}
.gallery-item figcaption { font-size: 0.8rem; margin-top: 0.35rem; }
.gallery-item figcaption form { margin-top: 0.35rem; }

.tag-list { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0 0 1rem; }
a.tag-link { text-decoration: none; }
a.tag-link:hover { filter: brightness(0.95); text-decoration: none; }

/* ── Chart containers ── */
.chart-row {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}
.chart-col { flex: 1; min-width: 0; }
@media (min-width: 900px) {
    .chart-row { flex-direction: row; }
}
.chart-container {
    position: relative;
    margin: 1rem 0;
    max-height: 280px;
}
.chart-container--radar {
    max-height: 450px;
    max-width: 500px;
}

/* ── Responsive table wrapper ── */
.table-responsive { overflow-x: auto; }

/* ── Heatmap table ── */
.heatmap-table th { font-size: 0.75rem; text-align: center; }
.hm-cell { text-align: center; font-size: 0.8rem; font-weight: 600; }
.hm-high { background: rgba(34, 197, 94, 0.25); color: #166534; }
.hm-mid  { background: rgba(234, 179, 8, 0.25); color: #854d0e; }
.hm-low  { background: rgba(239, 68, 68, 0.25); color: #991b1b; }

/* ── Responsive grid for stats ── */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.stat-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 0.75rem;
    text-align: center;
}

.stat-value {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--pico-primary);
    line-height: 1;
}

.stat-label {
    font-size: 0.78rem;
    color: var(--color-muted);
    margin-top: 0.25rem;
}

/* Dual "N total / M scored" value — smaller so both numbers fit the tile */
.stat-value--dual {
    font-size: 1.25rem;
}

.stat-value--dual .stat-sub {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-muted);
    margin-left: 0.15rem;
    white-space: nowrap;
}

/* ── Price toggle ── */
.price-details {
    margin-bottom: 1rem;
}

.price-details summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--color-muted);
    font-size: 0.9rem;
    padding: 0.5rem 0;
    user-select: none;
}

.price-details summary:hover {
    color: var(--pico-primary);
}

.price-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    margin-top: 0.25rem;
}

/* ── Ingredient toggle (mirrors price-details) ── */
.ingredient-details {
    margin-bottom: 1rem;
}

.ingredient-details summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--color-muted);
    font-size: 0.9rem;
    padding: 0.5rem 0;
    user-select: none;
}

.ingredient-details summary:hover {
    color: var(--pico-primary);
}

.ingredient-row {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-bottom: 0.75rem;
}

.ingredient-main {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.ingredient-flags {
    display: flex;
    gap: 1rem;
    padding-left: 0.25rem;
}

.ingredient-flags label {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.8rem;
    color: var(--color-muted);
    cursor: pointer;
    user-select: none;
    margin-bottom: 0;
}

.ingredient-flags input[type="checkbox"] {
    width: auto;
    margin: 0;
    cursor: pointer;
}

.ingredient-row input[name="ingredient_name[]"] {
    flex: 1 1 0;
    min-width: 0;
    margin-bottom: 0;
}

.ingredient-row input[name="ingredient_amount[]"] {
    width: 5rem;
    flex: 0 0 5rem;
    margin-bottom: 0;
}

.ingredient-row input[name="ingredient_unit[]"] {
    width: 5rem;
    flex: 0 0 5rem;
    margin-bottom: 0;
}

.ingredient-remove {
    flex: 0 0 auto;
    padding: 0.25rem 0.6rem;
    font-size: 1rem;
    line-height: 1;
    background: none;
    border: 1px solid var(--pico-muted-border-color);
    border-radius: var(--pico-border-radius);
    cursor: pointer;
    color: var(--color-muted);
    margin-bottom: 0;
    width: auto;
}

.ingredient-remove:hover {
    color: #ef4444;
    border-color: #ef4444;
}

#add-ingredient {
    margin-top: 0.25rem;
    font-size: 0.85rem;
    padding: 0.35rem 0.75rem;
    width: auto;
}

/* ── Search ── */
.search-form {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
}

.search-form input[type="search"] {
    flex: 1 1 auto;
    min-width: 0;
    margin-bottom: 0;
}

.search-form button {
    flex: 0 0 auto;
    width: auto;
    margin-bottom: 0;
}

.search-results {
    list-style: none;
    padding-left: 0;
}

.search-results li {
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--color-border, var(--pico-muted-border-color));
}

.search-results li:last-child {
    border-bottom: none;
}

/* ── Flight view toggle ── */
.flight-toggle {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 1rem;
}

.flight-toggle a[role="button"] {
    width: auto;
    padding: 0.3rem 0.9rem;
    font-size: 0.85rem;
    margin-bottom: 0;
}

/* ── Ingredient badges (alcohol / in-house) ── */
.ing-badge {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 0.1rem 0.4rem;
    border-radius: 0.75rem;
    vertical-align: middle;
    line-height: 1.4;
    white-space: nowrap;
}

.ing-badge-alcohol {
    background: color-mix(in srgb, #b45309 18%, transparent);
    color: #b45309;
    border: 1px solid color-mix(in srgb, #b45309 35%, transparent);
}

.ing-badge-custom {
    background: color-mix(in srgb, #2563eb 16%, transparent);
    color: #2563eb;
    border: 1px solid color-mix(in srgb, #2563eb 35%, transparent);
}

[data-theme="dark"] .ing-badge-alcohol {
    background: color-mix(in srgb, #f59e0b 20%, transparent);
    color: #fbbf24;
    border-color: color-mix(in srgb, #f59e0b 45%, transparent);
}

[data-theme="dark"] .ing-badge-custom {
    background: color-mix(in srgb, #60a5fa 20%, transparent);
    color: #93c5fd;
    border-color: color-mix(in srgb, #60a5fa 45%, transparent);
}

.ing-badge-bitters {
    background: color-mix(in srgb, #9333ea 16%, transparent);
    color: #9333ea;
    border: 1px solid color-mix(in srgb, #9333ea 35%, transparent);
}

[data-theme="dark"] .ing-badge-bitters {
    background: color-mix(in srgb, #c084fc 20%, transparent);
    color: #d8b4fe;
    border-color: color-mix(in srgb, #c084fc 45%, transparent);
}

/* ── Theme picker ── */
.theme-select {
    appearance: none;
    -webkit-appearance: none;
    background: rgba(255,255,255,0.15);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.25);
    border-radius: 4px;
    padding: 0.2rem 0.4rem;
    font-size: 0.78rem !important;
    font-weight: 500;
    cursor: pointer;
    outline: none;
    min-width: 0;
}

.theme-select option {
    background: #1a1a2e;
    color: #fff;
}

/* ── Footer ── */
.site-footer {
    text-align: center;
    padding: 1.5rem 1rem;
    font-size: 0.75rem;
    color: var(--color-muted);
    border-top: 1px solid var(--color-border);
    margin-top: 2rem;
}

/* ── Quick assess wizard ── */
.q-step {
    display: none;
    text-align: center;
    padding: 0.5rem 0 5rem;
    min-height: calc(100dvh - 10rem);
}

.q-step.q-active { display: block; }

/* Persistent "what am I rating" reminder carried across wizard steps */
.q-context {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.4rem 0.5rem;
    font-size: 0.85rem;
    padding: 0.5rem 0.25rem;
    border-bottom: 1px solid var(--card-border, rgba(127, 127, 127, 0.2));
}
.q-context strong { font-size: 0.95rem; }
.q-context .q-ctx-venue { color: var(--color-muted); }

/* Discreet running total, floated just above the fixed bottom nav on the category
   steps. Bottom placement avoids the top nav (which wraps to several rows on mobile
   and would hide a top-corner badge behind its higher stacking context). */
.q-running-total {
    position: fixed;
    right: max(0.6rem, env(safe-area-inset-right));
    bottom: calc(env(safe-area-inset-bottom) + 3.6rem);
    z-index: 160;  /* above .q-nav (150) */
    padding: 0.25rem 0.7rem;
    border-radius: 999px;
    font-weight: 700;
    font-size: 1.05rem;
    line-height: 1.2;
    color: var(--pico-primary-inverse);
    background: var(--pico-primary);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}
.q-running-total[hidden] { display: none; }
.q-running-total small { font-weight: 400; opacity: 0.75; font-size: 0.72rem; }

.q-step label { text-align: left; }

.q-step-label {
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
}

.q-step-desc {
    font-size: 0.9rem;
    color: var(--color-muted);
    margin-bottom: 1.5rem;
    line-height: 1.5;
}

.q-step .category-rubric {
    margin-top: -1rem;
    text-align: center;
}

.q-score-display {
    font-size: 5rem;
    font-weight: 800;
    line-height: 1;
    margin: 1rem 0 0;
    font-variant-numeric: tabular-nums;
    transition: color 0.3s;
}

.q-score-max {
    font-size: 1.2rem;
    color: var(--color-muted);
    margin-bottom: 1.5rem;
}

/* Preset value chips */
.q-chips {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
    max-width: 320px;
    margin-left: auto;
    margin-right: auto;
}

.q-chip {
    flex: 1;
    min-width: 0;
    padding: 0.6rem 0.1rem;
    font-size: 0.85rem;
    font-weight: 600;
    border: 2px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-stepper-bg);
    color: var(--pico-primary);
    cursor: pointer;
    touch-action: manipulation;
    transition: background 0.15s, border-color 0.15s;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.q-chip:active {
    background: var(--color-score-bg);
}

.q-chip-active {
    background: var(--pico-primary);
    color: var(--pico-primary-inverse);
    border-color: var(--pico-primary);
}

/* Saved-draft recall on quick step 0 */
.q-drafts {
    margin-top: 1.5rem;
}

.q-drafts-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 0.5rem;
}

.q-drafts-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-height: 40vh;
    overflow-y: auto;
}

.draft-chip {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.4rem;
    width: 100%;
    text-align: left;
    padding: 0.65rem 0.85rem;
    border: 2px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-stepper-bg);
    color: inherit;
    cursor: pointer;
    touch-action: manipulation;
    transition: background 0.15s, border-color 0.15s;
}

.draft-chip:active,
.draft-chip:focus {
    border-color: var(--pico-primary);
    background: var(--color-score-bg);
}

.draft-chip-venue {
    color: var(--color-muted);
    font-size: 0.9rem;
}

/* Drafts management page */
.draft-form-fields {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    align-items: end;
}

.draft-form-fields > label {
    flex: 1;
    min-width: 12rem;
}

.draft-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.draft-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    padding: 0.75rem 1rem;
    border: 1px solid var(--color-border);
    border-radius: 8px;
}

.draft-item-note {
    font-size: 0.85rem;
    margin-top: 0.2rem;
}

/* Tap-to-edit score display */
.q-score-display {
    cursor: pointer;
}

.q-score-edit {
    width: 4ch;
    font-size: inherit;
    font-weight: inherit;
    text-align: center;
    background: transparent;
    border: none;
    border-bottom: 3px solid var(--pico-primary);
    color: var(--pico-primary);
    outline: none;
    padding: 0;
    -moz-appearance: textfield;
}

.q-score-edit::-webkit-outer-spin-button,
.q-score-edit::-webkit-inner-spin-button { -webkit-appearance: none; }

.q-stepper {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0;
    margin: 0 auto;
    max-width: 320px;
    border: 2px solid var(--color-border);
    border-radius: 16px;
    overflow: hidden;
}

.q-stepper-btn {
    flex: 0 0 5rem;
    height: 5rem;
    font-size: 2.2rem;
    font-weight: 300;
    line-height: 1;
    background: var(--color-stepper-bg);
    border: none;
    cursor: pointer;
    color: var(--pico-primary);
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    transition: background 0.1s;
}

.q-stepper-btn:active {
    background: var(--color-score-bg);
}

.q-hidden-input {
    flex: 1;
    height: 5rem;
    min-width: 0;
    font-size: 2rem !important;
    font-weight: 700;
    text-align: center;
    border: none;
    border-left: 1px solid var(--color-border);
    border-right: 1px solid var(--color-border);
    color: var(--pico-primary);
    background: var(--color-input-bg);
    -moz-appearance: textfield;
    outline: none;
}

.q-hidden-input::-webkit-outer-spin-button,
.q-hidden-input::-webkit-inner-spin-button { -webkit-appearance: none; }

.q-progress {
    height: 8px;
    background: var(--color-progress-track);
    border-radius: 4px;
    overflow: hidden;
    margin: 1.25rem auto 0;
    max-width: 320px;
}

.q-progress-fill {
    height: 100%;
    border-radius: 4px;
    width: 0%;
    transition: width 0.2s ease, background-color 0.3s ease;
}

/* Nav bar */
.q-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    background: var(--color-surface);
    border-top: 2px solid var(--color-border);
    z-index: 150;
}

.q-nav-btn {
    font-size: 1rem;
    font-weight: 600;
    padding: 0.6rem 1.5rem;
    border-radius: 8px;
    border: none;
    background: var(--pico-primary);
    color: var(--pico-primary-inverse);
    cursor: pointer;
    touch-action: manipulation;
    min-width: 5rem;
}

.q-nav-btn:disabled {
    opacity: 0.3;
    cursor: default;
}

.q-dots {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;   /* wrap rather than scroll — no scrollbar with many steps */
    max-width: 60vw;
}

.q-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-progress-default);
    flex-shrink: 0;
    cursor: pointer;
    position: relative;
    transition: background 0.2s, transform 0.2s;
}

/* Enlarge the touch target without changing the visible dot. */
.q-dot::before {
    content: "";
    position: absolute;
    inset: -7px;
}

.q-dot-active {
    background: var(--pico-primary);
    transform: scale(1.4);
}

.q-dot-done {
    background: #22c55e;
}

/* Untouched-score guard: a ring around any category dot never tapped/typed
   into, regardless of active/done state (composes with both). */
.q-dot-untouched {
    box-shadow: 0 0 0 2px #f59e0b;
}

/* Review total on last step */
.q-review-total {
    margin: 1rem 0 1.5rem;
}

.q-review-total #q-final-score {
    font-size: 4rem;
    font-weight: 800;
    color: var(--pico-primary);
    line-height: 1;
}

.q-review-max {
    font-size: 1.2rem;
    color: var(--color-muted);
}

.q-submit-btn {
    width: 100%;
    padding: 1rem;
    font-size: 1.1rem;
    font-weight: 700;
    border: none;
    border-radius: 12px;
    background: var(--pico-primary);
    color: var(--pico-primary-inverse);
    cursor: pointer;
    touch-action: manipulation;
    margin-top: 1rem;
}

.q-full-form-link {
    display: block;
    text-align: center;
    margin-top: 1rem;
    font-size: 0.85rem;
    color: var(--color-muted);
}

/* Hide footer in quick mode to save vertical space */
body:has(.q-step) .site-footer { display: none; }

/* ── Head-to-head comparison picker ── */
.compare-picker {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.compare-option {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    font-size: 0.9rem;
    cursor: pointer;
    background: var(--color-surface);
    transition: border-color 0.15s, background 0.15s;
}

.compare-option:has(input:checked) {
    border-color: var(--pico-primary);
    background: var(--color-score-bg);
}

.compare-option input[type="checkbox"] {
    margin: 0;
    width: auto;
}

/* ── Danger/delete ── */
.btn-danger {
    background: #dc2626 !important;
    border-color: #dc2626 !important;
    color: #fff !important;
}

/* ── Taste profile ── */
.insight-list {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem;
}

.insight-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-left: 4px solid var(--color-score-bar);
    border-radius: 8px;
    padding: 0.875rem 1rem;
    margin-bottom: 0.75rem;
    font-size: 0.95rem;
    line-height: 1.5;
}

.history-details {
    margin-top: 2rem;
    border-top: 1px solid var(--color-border);
    padding-top: 1rem;
}

.history-details summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--color-muted);
    font-size: 0.9rem;
    padding: 0.5rem 0;
    user-select: none;
}

.history-details summary:hover { color: var(--pico-primary); }

.history-list { margin-top: 1rem; }

.history-snapshot {
    border-left: 2px solid var(--color-border);
    padding-left: 1rem;
    margin-bottom: 1.25rem;
}

.history-snapshot ul {
    margin: 0.25rem 0 0;
    padding-left: 1.25rem;
    font-size: 0.875rem;
}

/* ──────────────────────────────────────────────────────────────────────────
   UI consistency (0.7.6) — shared button/action patterns + layout fixes
   ────────────────────────────────────────────────────────────────────────── */

/* Action row: a horizontal group of buttons that all render at the same size,
   regardless of whether each is an <a role="button">, a <button>, or a <button>
   wrapped in a <form>. Pico gives form controls a margin-bottom and forms a
   margin — zero them so every control is the same box. */
.action-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin-top: 1rem;
}
.action-row > a[role="button"],
.action-row > button,
.action-row > form {
    margin: 0;
}
.action-row form {
    display: inline-flex;
    align-items: center;
}
.action-row form button { margin: 0; }
/* Equal vertical size for mixed <a role=button> / <button> in a row */
.action-row a[role="button"],
.action-row button {
    line-height: 1.5;
}

/* Small button: the compact action buttons used in tables and inline rows.
   Replaces ad-hoc inline `padding:0.2rem 0.5rem;font-size:0.8rem` so they all
   match. Works on <a role="button"> and <button>. */
.btn-sm {
    padding: 0.25rem 0.6rem;
    font-size: 0.8rem;
    line-height: 1.4;
    margin: 0;
    white-space: nowrap;
}

/* Table action cells: keep multiple small buttons aligned on one baseline */
.table-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
}
.table-actions form { margin: 0; display: inline-flex; }

/* Admin index — grouped, wrapping sections (replaces the overflowing nav list) */
.admin-group { margin-bottom: 1.5rem; }
.admin-group > h3 {
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-muted, #888);
    margin: 0 0 0.6rem;
}
.admin-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 0.75rem;
}
.admin-card {
    display: block;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 0.85rem 1rem;
    text-decoration: none;
    color: inherit;
}
.admin-card:hover {
    border-color: var(--color-primary, #888);
    text-decoration: none;
}
.admin-card .admin-card-title { font-weight: 600; }
.admin-card .admin-card-desc {
    font-size: 0.8rem;
    color: var(--color-text-muted, #888);
    margin-top: 0.15rem;
}

/* Browse-by-category tiles: long labels (e.g. "Appearance & Presentation")
   shouldn't wrap awkwardly — smaller text + balanced line breaks. */
.tile-title {
    font-size: 0.95rem;
    line-height: 1.2;
    font-weight: 700;
    text-wrap: balance;
}


/* ── Would-order-again thumbs (0.8.4) ──────────────────────────────────────── */
.thumbs-toggle { border: none; padding: 0; margin: 1rem 0; }
.thumbs-toggle legend { font-weight: 600; padding: 0; margin-bottom: 0.4rem; }
.thumbs-optional { font-weight: 400; color: var(--pico-muted-color, #888); font-size: 0.8rem; }
.thumbs-toggle .thumb { display: inline-flex; align-items: center; }
.thumbs-toggle .thumb input { position: absolute; opacity: 0; width: 0; height: 0; }
.thumbs-toggle .thumb span {
  display: inline-block; padding: 0.5rem 1rem; margin-right: 0.5rem;
  border: 1px solid var(--pico-muted-border-color, #ccc); border-radius: 999px;
  cursor: pointer; user-select: none;
}
.thumbs-toggle .thumb-up input:checked + span { background: #14532d; color: #fff; border-color: #14532d; }
.thumbs-toggle .thumb-down input:checked + span { background: #7f1d1d; color: #fff; border-color: #7f1d1d; }
/* "Clear" resets to unset; muted, and faded when it's the (default) checked state
   so an un-answered toggle doesn't read as a positive choice. */
.thumbs-toggle .thumb-clear span {
  font-size: 0.8rem; color: var(--pico-muted-color, #888); padding: 0.5rem 0.75rem;
  border-style: dashed;
}
.thumbs-toggle .thumb-clear input:checked + span { opacity: 0.55; }
.thumbs-toggle .thumb input:focus-visible + span { outline: 2px solid #c8683a; outline-offset: 2px; }

.woa-verdict { font-weight: 600; margin: 0.25rem 0 1rem; }
.woa-verdict small { font-weight: 400; opacity: 0.7; }
.woa-up { color: #15803d; }
.woa-down { color: #b91c1c; }
.woa-summary { font-weight: 600; color: #15803d; margin: -0.5rem 0 1rem; }

.tldr-quip {
  font-style: italic;
  color: var(--pico-muted-color, #6b6156);
  margin: 0.25rem 0 1rem;
}

.checkin-banner { margin: 0 0 1rem; }
.checkin-upgrade-note {
  background: var(--pico-code-background-color, #f3f0ea);
  padding: 0.6rem 0.9rem; border-radius: 6px;
}
.q-checkin-link { display: inline-block; margin-top: 1rem; font-size: 0.9rem; }

/* ── Shareable card (0.8.4) ────────────────────────────────────────────────── */
.card-share { margin: 1rem 0 1.5rem; }
.card-share > summary { cursor: pointer; font-weight: 600; }
.card-preview {
  display: block; width: 270px; max-width: 100%; height: auto;
  margin: 0.75rem 0; border-radius: 10px; box-shadow: 0 2px 10px rgba(0,0,0,0.25);
}
.card-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.card-note { font-size: 0.8rem; margin-top: 0.4rem; }

/* ── Wrapped (period recap) ────────────────────────────────────────────────
   Fixed dark palette, independent of the site theme — matches card.js's own
   fixed palette (#161514/#c8683a). A Wrapped is a deliberate visual "moment",
   not themed chrome, so it doesn't follow data-crate-theme like the rest of
   the app. */
.wr-page {
    --wr-bg: #161514;
    --wr-panel: #211f1d;
    --wr-text: #f4f1ea;
    --wr-muted: #a8a29a;
    --wr-accent: #c8683a;
    background: var(--wr-bg);
    color: var(--wr-text);
    border-radius: 12px;
    padding: 1rem 1rem 5rem;
    margin: 0 -1rem;
}
body:has(.wr-page) .site-footer { display: none; }

.wr-header {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin-bottom: 1rem;
}
.wr-type-tabs {
    display: flex;
    gap: 0.4rem;
    justify-content: center;
    flex-wrap: wrap;
}
.wr-type-tab {
    padding: 0.3rem 0.8rem;
    border-radius: 999px;
    background: var(--wr-panel);
    color: var(--wr-muted);
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 600;
}
.wr-type-tab-active { background: var(--wr-accent); color: var(--wr-text); }
.wr-period-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}
.wr-period-label { font-weight: 700; min-width: 10rem; text-align: center; }
.wr-period-arrow {
    color: var(--wr-text);
    text-decoration: none;
    font-size: 1.5rem;
    line-height: 1;
    padding: 0.2rem 0.6rem;
    touch-action: manipulation;
}
.wr-period-arrow-disabled { color: var(--wr-panel); pointer-events: none; }

.wr-deck {
    position: relative;
    min-height: 60vh;
    touch-action: pan-y;
}
.wr-card {
    display: none;
    text-align: center;
    padding: 2rem 1rem;
    min-height: 60vh;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}
.wr-card.wr-active { display: flex; }

.wr-eyebrow {
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--wr-accent);
}
.wr-headline {
    font-size: 2.2rem;
    font-weight: 800;
    line-height: 1.15;
}
.wr-value {
    font-size: 3.5rem;
    font-weight: 800;
    color: var(--wr-accent);
}
.wr-sublines { color: var(--wr-muted); }
.wr-subline { margin: 0.15rem 0; }

.wr-comparisons {
    margin: 0.5rem 0 0;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    width: 100%;
    max-width: 20rem;
}
.wr-comparison-row {
    display: flex;
    justify-content: space-between;
    padding: 0.4rem 0.8rem;
    border-radius: 8px;
    background: var(--wr-panel);
}
.wr-comparison-row dt, .wr-comparison-row dd { margin: 0; font-weight: 600; }
.wr-comparison-row dd { color: var(--wr-muted); }
.wr-comparison-row.wr-self { background: var(--wr-accent); }
.wr-comparison-row.wr-self dt, .wr-comparison-row.wr-self dd { color: var(--wr-text); }

.wr-card-link {
    display: inline-block;
    margin-top: 0.5rem;
    color: var(--wr-accent);
    font-weight: 600;
}
.wr-share { text-align: left; width: 100%; max-width: 24rem; color: var(--wr-text); }
.wr-share summary { cursor: pointer; font-weight: 600; text-align: center; }

.wr-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    background: var(--wr-panel);
    border-top: 2px solid rgba(255, 255, 255, 0.08);
    z-index: 150;
}
.wr-nav-btn {
    font-size: 1rem;
    font-weight: 600;
    padding: 0.6rem 1.5rem;
    border-radius: 8px;
    border: none;
    background: var(--wr-accent);
    color: var(--wr-text);
    cursor: pointer;
    touch-action: manipulation;
    min-width: 5rem;
}
.wr-nav-btn:disabled { opacity: 0.3; cursor: default; }

.wr-dots {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    max-width: 50vw;
}
.wr-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    flex-shrink: 0;
    cursor: pointer;
    position: relative;
    transition: background 0.2s, transform 0.2s;
}
.wr-dot::before { content: ""; position: absolute; inset: -7px; }  /* touch target, invisible */
.wr-dot-active { background: var(--wr-accent); transform: scale(1.4); }
.wr-dot-done { background: rgba(255, 255, 255, 0.5); }