/* Reveal Recipe UI kit: reset, type, layout primitives and the components every view is built from.
   Page-specific layout lives in views.css; colours and sizes come from tokens.css. */

/*---------------------------------
  Reset and base
----------------------------------*/
*, *::before, *::after {
    box-sizing: border-box;
}
html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}
html {
    height: 100%;
}
/* No fixed height on body: sticky children (header, action bar) stick for the whole page, not just one screen. */
body {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 100%;
    margin: 0;
    font-family: var(--font-body);
    font-size: var(--text-md);
    line-height: var(--leading);
    color: var(--ink);
    background: var(--page);
    -webkit-font-smoothing: antialiased;
}
/* Parchment grain over the whole page; it never catches clicks and is skipped in print. */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image: var(--grain);
    opacity: var(--grain-opacity);
}
body > * {
    position: relative;
    z-index: 1;
}
/* `hidden` wins over any display rule a component sets. */
[hidden]:not([popover]) {
    display: none !important;
}
main {
    flex: 1 0 auto;
}
h1, h2, h3, h4, h5, h6 {
    margin: 0 0 var(--space-2);
    font-family: var(--font-display);
    font-weight: 600;
    font-optical-sizing: auto;
    font-variation-settings: 'SOFT' 40, 'WONK' 0;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--ink);
    overflow-wrap: anywhere;
}
h1 { font-size: var(--text-3xl); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl); }
h4 { font-size: var(--text-lg); }
h5, h6 { font-size: var(--text-md); }
p {
    margin: 0 0 var(--space-3);
}
a {
    color: var(--paprika);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.15em;
}
a:hover {
    color: var(--paprika-hover);
}
img, video {
    max-width: 100%;
    height: auto;
}
button, input, select, textarea {
    font: inherit;
    color: inherit;
}
button {
    cursor: pointer;
}
ul, ol {
    margin: 0;
    padding-left: 1.25rem;
}
hr {
    border: 0;
    border-top: 1px solid var(--border);
    margin: var(--space-4) 0;
}
small, .u-small {
    font-size: var(--text-sm);
}
strong {
    font-weight: 600;
}
/* Keyboard focus: the gold glow plus a solid ink outline, which keeps 3:1 against every surface in both themes. */
:focus-visible {
    outline: 2px solid var(--ink);
    outline-offset: 2px;
    box-shadow: var(--ring);
    border-radius: var(--radius-sm);
}
/* Headings and regions that script moves focus to on navigation aren't controls, so they don't get a ring. */
[tabindex="-1"]:focus {
    outline: none;
    box-shadow: none;
}
::selection {
    background: var(--gold-soft);
}

/*---------------------------------
  Typography helpers
----------------------------------*/
.display {
    font-size: clamp(2rem, 5.5vw, 3.5rem);
    font-weight: 600;
    font-variation-settings: 'SOFT' 60, 'WONK' 1;
    line-height: 1.08;
    letter-spacing: -0.02em;
}
.section-title {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-xl);
    margin: 0;
}
.section-title .bi {
    color: var(--gold);
    font-size: 0.9em;
}
.eyebrow {
    display: inline-block;
    margin: 0 0 var(--space-1);
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gold-deep);
}
.u-muted { color: var(--ink-muted); }
.u-faint { color: var(--ink-faint); }
.u-center { text-align: center; }
.u-grow { flex: 1 1 auto; }
.u-push { margin-left: auto; }
.u-nowrap { white-space: nowrap; }
.u-tnum { font-variant-numeric: tabular-nums; }
.u-mt-2 { margin-top: var(--space-2); }
.u-mt-4 { margin-top: var(--space-4); }
.u-mb-0 { margin-bottom: 0; }
.u-mb-2 { margin-bottom: var(--space-2); }
.u-mb-4 { margin-bottom: var(--space-4); }
.u-mb-5 { margin-bottom: var(--space-5); }
.u-hide-sm { }
.u-show-sm { display: none !important; }
@media (max-width: 767.98px) {
    .u-hide-sm { display: none !important; }
    .u-show-sm { display: initial !important; }
}
.visually-hidden, .sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/*---------------------------------
  Layout primitives
----------------------------------*/
.wrap {
    width: 100%;
    max-width: var(--wrap);
    margin-inline: auto;
    padding-inline: var(--space-4);
}
.wrap--narrow {
    max-width: var(--wrap-narrow);
}
@media (min-width: 768px) {
    .wrap {
        padding-inline: var(--space-5);
    }
}
.stack {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}
.stack--lg { gap: var(--space-5); }
.cluster {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
}
.cluster--between {
    justify-content: space-between;
}
.cluster--center {
    justify-content: center;
}
.cluster--nowrap {
    flex-wrap: nowrap;
}
.grid {
    display: grid;
    gap: var(--space-4);
}
.grid--2 {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
}
.grid--3 {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
}
.page-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-3);
    margin-bottom: var(--space-4);
}
.page-head > :first-child {
    margin-right: auto;
}
.page-head :is(h1, h2) {
    margin: 0;
    font-size: var(--text-2xl);
}
.page-head .eyebrow {
    display: block;
    margin-bottom: 0.15rem;
}

/*---------------------------------
  Buttons
----------------------------------*/
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4em;
    min-height: 2.5rem;
    padding: 0.5rem 1rem;
    font-size: var(--text-sm);
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    color: var(--ink);
    background: var(--card);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-pill);
    box-shadow: var(--shadow-sm);
    transition: background var(--quick) var(--ease), color var(--quick) var(--ease), border-color var(--quick) var(--ease),
        transform var(--quick) var(--ease), box-shadow var(--quick) var(--ease);
    -webkit-tap-highlight-color: transparent;
}
.btn:hover {
    color: var(--ink);
    background: var(--sunken);
    border-color: var(--ink-faint);
}
.btn:active {
    transform: translateY(1px);
}
.btn:disabled, .btn[aria-disabled="true"] {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}
.btn .bi {
    font-size: 1.05em;
    line-height: 1;
}
.btn--primary {
    color: var(--on-paprika);
    background: var(--paprika);
    border-color: var(--paprika);
}
.btn--primary:hover {
    color: var(--on-paprika);
    background: var(--paprika-hover);
    border-color: var(--paprika-hover);
}
.btn--ghost {
    background: transparent;
    box-shadow: none;
}
.btn--quiet {
    min-height: 1.5rem;
    padding: 0.25rem 0.5rem;
    color: var(--paprika);
    background: transparent;
    border-color: transparent;
    box-shadow: none;
}
.btn--quiet:hover {
    color: var(--paprika-hover);
    background: var(--paprika-soft);
    border-color: transparent;
}
.btn--quiet.u-muted {
    color: var(--ink-muted);
}
.btn--danger {
    color: var(--chili);
}
.btn--danger:hover {
    color: var(--chili);
    background: var(--chili-soft);
    border-color: var(--chili);
}
.btn--icon {
    width: 2.5rem;
    padding: 0;
}
.btn--icon .bi {
    font-size: 1.15rem;
}
.btn--sm {
    min-height: 2rem;
    padding: 0.3rem 0.75rem;
    font-size: var(--text-xs);
}
.btn--sm.btn--icon {
    width: 2rem;
}
.btn--lg {
    min-height: 3rem;
    padding: 0.75rem 1.5rem;
    font-size: var(--text-md);
}
.btn.is-active {
    color: var(--on-paprika);
    background: var(--paprika);
    border-color: var(--paprika);
}
.btn--gold.is-active, .btn--gold.is-on {
    color: var(--ink);
    background: var(--gold-soft);
    border-color: var(--gold);
}
.btn--gold.is-on .bi {
    color: var(--gold-deep);
}

/*---------------------------------
  Fields and forms
----------------------------------*/
.field {
    display: block;
    width: 100%;
    min-height: 2.5rem;
    padding: 0.5rem 0.75rem;
    font-size: var(--text-md);
    color: var(--ink);
    background: var(--card);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    transition: border-color var(--quick) var(--ease), box-shadow var(--quick) var(--ease);
}
.field::placeholder {
    color: var(--ink-faint);
}
.field:focus, .field:focus-within {
    outline: none;
    border-color: var(--gold);
    box-shadow: var(--ring);
}
.field:disabled {
    opacity: 0.6;
}
textarea.field {
    min-height: 6rem;
    resize: vertical;
    line-height: var(--leading);
}
select.field {
    padding-right: 2rem;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%236f5b4e' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='m3 6 5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.6rem center;
}
.field--sm {
    min-height: 2rem;
    padding: 0.25rem 0.6rem;
    font-size: var(--text-sm);
}
.field-label {
    display: block;
    margin-bottom: var(--space-1);
    font-size: var(--text-sm);
    font-weight: 600;
}
.field-label .u-muted {
    font-weight: 400;
}
.field-hint {
    margin-top: var(--space-1);
    font-size: var(--text-xs);
    color: var(--ink-muted);
}
.form-row {
    margin-bottom: var(--space-4);
}
/* A text field with a button fused to its right edge */
.url-field {
    display: flex;
    align-items: stretch;
    width: 100%;
    background: var(--card);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-pill);
    box-shadow: var(--shadow-sm);
    transition: border-color var(--quick) var(--ease), box-shadow var(--quick) var(--ease);
}
.url-field:focus-within {
    border-color: var(--gold);
    box-shadow: var(--ring), var(--shadow-sm);
}
.url-field input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0.6rem 1rem;
    color: var(--ink);
    background: transparent;
    border: 0;
    border-radius: var(--radius-pill);
}
.url-field input:focus {
    outline: none;
    box-shadow: none;
}
.url-field input::placeholder {
    color: var(--ink-faint);
}
.url-field .btn {
    flex-shrink: 0;
    margin: 3px;
    box-shadow: none;
}
.url-field .btn--ghost {
    border-color: transparent;
}
.url-field--lg input {
    padding: 0.85rem 1.25rem;
    font-size: var(--text-lg);
}
.url-field--lg .btn {
    min-height: 2.75rem;
    padding-inline: 1.25rem;
    font-size: var(--text-md);
}
@media (max-width: 575.98px) {
    .url-field--lg .btn--primary .btn__label {
        display: none;
    }
    .url-field--lg .btn--primary {
        width: 2.75rem;
        padding: 0;
    }
}
/* Search box with a leading icon */
.search-field {
    position: relative;
    flex: 1 1 16rem;
}
.search-field .bi {
    position: absolute;
    top: 50%;
    left: 0.85rem;
    transform: translateY(-50%);
    color: var(--ink-faint);
    pointer-events: none;
}
.search-field .field {
    padding-left: 2.4rem;
    border-radius: var(--radius-pill);
}
/* Custom checkbox */
.check {
    appearance: none;
    flex-shrink: 0;
    width: 1.5rem;
    height: 1.5rem;
    margin: 0;
    cursor: pointer;
    vertical-align: middle;
    background: var(--card);
    border: 2px solid var(--border-strong);
    border-radius: 50%;
    transition: background var(--quick) var(--ease), border-color var(--quick) var(--ease);
}
.check:checked {
    background: var(--paprika) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' d='m3.5 8.5 3 3 6-7'/%3E%3C/svg%3E") center/70% no-repeat;
    border-color: var(--paprika);
}
.check:focus-visible {
    box-shadow: var(--ring);
    border-radius: 50%;
}

/*---------------------------------
  Segmented control (radios or links)
----------------------------------*/
.segmented {
    display: inline-flex;
    padding: 3px;
    background: var(--sunken);
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
}
.segmented input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.segmented__item {
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    min-height: 1.9rem;
    padding: 0.25rem 0.8rem;
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--ink-muted);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    border: 0;
    background: transparent;
    border-radius: var(--radius-pill);
    transition: background var(--quick) var(--ease), color var(--quick) var(--ease);
}
.segmented__item:hover {
    color: var(--ink);
}
.segmented input:checked + .segmented__item,
.segmented__item.is-active,
.segmented__item[aria-current="page"] {
    color: var(--ink);
    background: var(--card);
    box-shadow: var(--shadow-sm);
}
.segmented input:focus-visible + .segmented__item {
    box-shadow: var(--ring);
}
.segmented--lg .segmented__item {
    min-height: 2.25rem;
    padding: 0.4rem 1rem;
    font-size: var(--text-md);
}
.segmented--fill {
    display: flex;
}
.segmented--fill .segmented__item {
    flex: 1 1 0;
    justify-content: center;
}
/* Never wider than its container: on narrow screens the segments share the width and shrink their padding. */
.segmented {
    max-width: 100%;
}
@media (max-width: 575.98px) {
    .segmented--lg {
        display: flex;
    }
    .segmented--lg .segmented__item {
        flex: 1 1 0;
        min-width: 0;
        justify-content: center;
        padding-inline: 0.5rem;
        font-size: var(--text-sm);
    }
    .segmented--lg .segmented__item .bi {
        display: none;
    }
}

/*---------------------------------
  Stepper (servings)
----------------------------------*/
.stepper {
    display: inline-flex;
    align-items: center;
    background: var(--card);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-pill);
}
.stepper button {
    width: 2.25rem;
    height: 2.25rem;
    color: var(--ink);
    background: transparent;
    border: 0;
    border-radius: 50%;
}
.stepper button:hover {
    color: var(--paprika);
    background: var(--paprika-soft);
}
.stepper input {
    width: 3.25rem;
    padding: 0.25rem 0;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    text-align: center;
    background: transparent;
    border: 0;
    -moz-appearance: textfield;
}
.stepper input:focus {
    outline: none;
    box-shadow: none;
}
/* The number field draws no focus of its own, so the whole stepper shows it. */
.stepper:has(input:focus-visible) {
    border-color: var(--gold);
    outline: 2px solid var(--ink);
    outline-offset: 2px;
    box-shadow: var(--ring);
}
.stepper input::-webkit-outer-spin-button,
.stepper input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.stepper__suffix {
    padding-right: 0.5rem;
    font-size: var(--text-sm);
    color: var(--ink-muted);
}

/*---------------------------------
  Chips (tags and filters)
----------------------------------*/
.chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3em;
    padding: 0.2rem 0.7rem;
    font-size: var(--text-xs);
    font-weight: 600;
    line-height: 1.5;
    color: var(--ink);
    text-decoration: none;
    white-space: nowrap;
    background: var(--card);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-pill);
    transition: background var(--quick) var(--ease), color var(--quick) var(--ease), border-color var(--quick) var(--ease);
}
button.chip {
    cursor: pointer;
}
button.chip:hover, button.chip:focus-visible {
    color: var(--gold-deep);
    border-color: var(--gold);
}
.chip.is-active, .chip.is-active:hover {
    color: var(--ink);
    background: var(--gold-soft);
    border-color: var(--gold);
}
.chip--add {
    color: var(--ink-muted);
    border-style: dashed;
}
.chip__count {
    opacity: 0.65;
    font-variant-numeric: tabular-nums;
    font-weight: 500;
}
/* A 24px hit area around the 16px icon; the negative margins keep the chip the size it was. */
.chip__remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5rem;
    min-height: 1.5rem;
    padding: 0;
    margin: -0.25rem -0.55rem -0.25rem -0.25rem;
    font-size: 1rem;
    line-height: 1;
    color: inherit;
    background: none;
    border: 0;
    border-radius: 50%;
    opacity: 0.6;
}
.chip__remove:hover, .chip__remove:focus-visible {
    opacity: 1;
    color: var(--chili);
}
.chip-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem;
}
@media (max-width: 575.98px) {
    .chip-row--scroll {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 0.25rem;
        margin-inline: calc(-1 * var(--space-4));
        padding-inline: var(--space-4);
        scrollbar-width: none;
    }
    .chip-row--scroll::-webkit-scrollbar {
        display: none;
    }
}

/*---------------------------------
  Stat tiles (servings, prep, cook, total)
----------------------------------*/
.facts {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}
.fact {
    display: flex;
    flex-direction: column;
    min-width: 5.5rem;
    padding: 0.4rem 0.75rem;
    background: var(--sunken);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
.fact__label {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-muted);
}
.fact__value {
    font-size: var(--text-sm);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/*---------------------------------
  Cards and panels
----------------------------------*/
.card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}
.card__body {
    padding: var(--space-4);
}
@media (min-width: 768px) {
    .card__body {
        padding: var(--space-5);
    }
}
.panel {
    padding: var(--space-3) var(--space-4);
    background: var(--sunken);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
.panel--note {
    border-left: 4px solid var(--gold);
}
.panel--paprika {
    border-left: 4px solid var(--paprika);
}
.panel__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
}
.panel__title {
    display: flex;
    align-items: center;
    gap: 0.4em;
    margin: 0;
    font-size: var(--text-md);
}
.panel__title .bi {
    color: var(--gold-deep);
}

/*---------------------------------
  Notices, undo rows and toasts
----------------------------------*/
.notice {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    padding: 0.6rem var(--space-4);
    margin-bottom: var(--space-3);
    font-size: var(--text-sm);
    background: var(--sunken);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
.notice > span:first-child {
    flex: 1 1 auto;
}
.notice--info {
    border-left: 4px solid var(--gold);
}
.notice--success {
    color: var(--herb);
    background: var(--herb-soft);
    border-color: transparent;
}
.notice--error {
    color: var(--chili);
    background: var(--chili-soft);
    border-color: transparent;
}
.toast-host {
    position: fixed;
    left: 50%;
    bottom: calc(var(--space-4) + env(safe-area-inset-bottom));
    z-index: 1200;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    width: min(28rem, calc(100vw - 2rem));
    transform: translateX(-50%);
    pointer-events: none;
}
.toast {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: 0.65rem 1rem;
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--page);
    background: var(--ink);
    border-radius: var(--radius-pill);
    box-shadow: var(--shadow-lg);
    pointer-events: auto;
    animation: toast-in var(--slow) var(--ease);
}
.toast .bi {
    color: var(--gold);
}
.toast__action {
    padding: 0;
    font-weight: 700;
    color: var(--toast-accent);
    background: none;
    border: 0;
    text-decoration: none;
}
.toast.is-leaving {
    animation: toast-out var(--slow) var(--ease) forwards;
}
@keyframes toast-in {
    from { opacity: 0; transform: translateY(0.75rem); }
}
@keyframes toast-out {
    to { opacity: 0; transform: translateY(0.75rem); }
}
@media (max-width: 767.98px) {
    body.has-tabbar .toast-host {
        bottom: calc(var(--tabbar-h) + var(--space-3) + env(safe-area-inset-bottom));
    }
}

/*---------------------------------
  Sheet: a <dialog> that slides in from the right (desktop) or the bottom (phones)
----------------------------------*/
.sheet {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(27rem, 100vw);
    max-width: none;
    height: 100%;
    max-height: none;
    margin: 0;
    padding: 0;
    color: var(--ink);
    background: var(--card);
    border: 0;
    border-left: 1px solid var(--border);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}
.sheet[open] {
    display: flex;
    flex-direction: column;
    animation: sheet-in-right var(--slow) var(--ease);
}
.sheet::backdrop {
    background: rgba(43, 29, 20, 0.45);
    backdrop-filter: blur(2px);
}
.sheet__header {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-4) var(--space-3);
    border-bottom: 1px solid var(--border);
}
.sheet__title {
    flex: 1 1 auto;
    margin: 0;
    font-size: var(--text-xl);
}
.sheet__body {
    flex: 1 1 auto;
    padding: var(--space-4);
    overflow-y: auto;
    overscroll-behavior: contain;
}
.sheet__handle {
    display: none;
}
@media (max-width: 575.98px) {
    .sheet {
        inset: auto 0 0 0;
        width: 100%;
        height: auto;
        max-height: 88vh;
        border-left: 0;
        border-top: 1px solid var(--border);
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    }
    .sheet[open] {
        animation: sheet-in-up var(--slow) var(--ease);
    }
    .sheet__handle {
        display: block;
        width: 2.5rem;
        height: 4px;
        margin: 0.5rem auto 0;
        background: var(--border-strong);
        border-radius: var(--radius-pill);
    }
}
@keyframes sheet-in-right {
    from { transform: translateX(2rem); opacity: 0; }
}
@keyframes sheet-in-up {
    from { transform: translateY(2rem); opacity: 0; }
}

/*---------------------------------
  Popover menu
----------------------------------*/
.menu {
    position: fixed;
    inset: auto;
    min-width: 14rem;
    max-width: min(20rem, calc(100vw - 1rem));
    max-height: 60vh;
    margin: 0;
    padding: var(--space-1);
    overflow-y: auto;
    list-style: none;
    color: var(--ink);
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}
.menu:popover-open {
    animation: menu-in var(--quick) var(--ease);
}
.menu[hidden] {
    display: none;
}
.menu__title {
    padding: 0.4rem 0.75rem 0.25rem;
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-muted);
    margin: 0;
}
.menu__item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    padding: 0.5rem 0.75rem;
    font-size: var(--text-sm);
    text-align: left;
    text-decoration: none;
    color: var(--ink);
    background: transparent;
    border: 0;
    border-radius: var(--radius-sm);
}
.menu__item:hover, .menu__item:focus-visible {
    color: var(--ink);
    background: var(--sunken);
}
.menu__item .bi {
    width: 1.25rem;
    text-align: center;
    color: var(--ink-muted);
}
.menu__item[aria-checked="true"] .bi {
    color: var(--gold-deep);
}
.menu__divider {
    margin: var(--space-1) 0;
    border-top: 1px solid var(--border);
}
@keyframes menu-in {
    from { opacity: 0; transform: translateY(-0.25rem); }
}

/*---------------------------------
  Progress bar
----------------------------------*/
.progress {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-size: var(--text-sm);
    color: var(--ink-muted);
}
.progress__track {
    flex: 1 1 auto;
    height: 0.5rem;
    overflow: hidden;
    background: var(--sunken);
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
}
.progress__bar {
    height: 100%;
    background: linear-gradient(90deg, var(--gold), var(--paprika));
    border-radius: inherit;
    transition: width var(--slow) var(--ease);
}

/*---------------------------------
  Empty states
----------------------------------*/
.empty {
    padding: var(--space-6) var(--space-4);
    text-align: center;
}
.empty__art {
    width: 5.5rem;
    height: 5.5rem;
    margin: 0 auto var(--space-3);
    opacity: 0.9;
}
.empty__icon {
    display: block;
    margin-bottom: var(--space-2);
    font-size: 2.5rem;
    color: var(--gold);
}
.empty h2 {
    font-size: var(--text-xl);
    margin-bottom: var(--space-2);
}
.empty p {
    max-width: 34rem;
    margin-inline: auto;
    color: var(--ink-muted);
}
.empty .cluster {
    justify-content: center;
    margin-top: var(--space-4);
}

/*---------------------------------
  Disclosure
----------------------------------*/
.disclosure {
    border-top: 1px solid var(--border);
}
.disclosure summary {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) 0;
    font-family: var(--font-display);
    font-size: var(--text-lg);
    font-weight: 600;
    cursor: pointer;
    list-style: none;
}
.disclosure summary::-webkit-details-marker {
    display: none;
}
.disclosure summary::after {
    content: "\F282";
    font-family: "bootstrap-icons";
    margin-left: auto;
    font-size: 1rem;
    color: var(--ink-muted);
    transition: transform var(--quick) var(--ease);
}
.disclosure[open] summary::after {
    transform: rotate(180deg);
}
.disclosure__body {
    padding-bottom: var(--space-4);
}

/*---------------------------------
  Stars
----------------------------------*/
.stars {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: var(--text-sm);
    color: var(--ink-muted);
}
.stars .bi {
    color: var(--gold);
    letter-spacing: 0.05em;
}
.stars--mine .bi {
    color: var(--gold-deep);
}

/*---------------------------------
  Skeleton and the reveal loading state
----------------------------------*/
.skeleton {
    position: relative;
    overflow: hidden;
    background: var(--sunken);
    border-radius: var(--radius-sm);
}
.skeleton::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, var(--gold-soft), transparent);
    animation: shimmer 1.4s infinite;
}
@keyframes shimmer {
    to { transform: translateX(100%); }
}
.reveal-loading {
    position: relative;
    padding: var(--space-6) var(--space-4);
}
.reveal-loading__sparkles {
    display: block;
    width: 4.5rem;
    height: 4.5rem;
    margin: 0 auto var(--space-3);
    color: var(--gold);
}
.reveal-loading__sparkles .spark {
    transform-origin: center;
    transform-box: fill-box;
    animation: spark 1.6s ease-in-out infinite;
}
.reveal-loading__sparkles .spark:nth-child(2) { animation-delay: 0.3s; }
.reveal-loading__sparkles .spark:nth-child(3) { animation-delay: 0.6s; }
.reveal-loading__sparkles .spark:nth-child(4) { animation-delay: 0.9s; }
@keyframes spark {
    0%, 100% { opacity: 0.2; transform: scale(0.6) rotate(0deg); }
    50% { opacity: 1; transform: scale(1) rotate(20deg); }
}
.reveal-loading__text {
    margin: 0 0 var(--space-5);
    font-family: var(--font-display);
    font-size: var(--text-xl);
    text-align: center;
}
.reveal-loading__lines {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-5);
    max-width: 52rem;
    margin: 0 auto;
}
@media (min-width: 768px) {
    .reveal-loading__lines {
        grid-template-columns: 1fr 1.4fr;
    }
}
.reveal-loading .skeleton {
    height: 0.9rem;
    margin-bottom: 0.75rem;
}
.reveal-loading .skeleton--title {
    height: 1.5rem;
    width: 60%;
    margin-bottom: 1.25rem;
}
.reveal-loading .skeleton--short { width: 45%; }
.reveal-loading .skeleton--mid { width: 75%; }
.revealed {
    animation: revealed var(--slow) var(--ease);
}
@keyframes revealed {
    from { opacity: 0; transform: translateY(0.5rem); }
}

/*---------------------------------
  Reduced motion
----------------------------------*/
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    .skeleton::after {
        display: none;
    }
    .timer--done {
        animation: none !important;
    }
}

/*---------------------------------
  Sign in with Google button and avatars
----------------------------------*/
/* Google's branding guidelines fix this button's colours, font, logo and shape, so it doesn't use the site's tokens. */
.gsi-button {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: 40px;
    padding: 0 16px 0 12px;
    font-family: Roboto, arial, sans-serif;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.25px;
    color: #1f1f1f;
    white-space: nowrap;
    cursor: pointer;
    background: #fff;
    border: 1px solid #747775;
    border-radius: 20px;
    transition: background var(--quick) var(--ease), box-shadow var(--quick) var(--ease);
}
.gsi-button:hover {
    background: #f7f8f8;
    box-shadow: 0 1px 2px rgba(60, 64, 67, 0.3), 0 1px 3px 1px rgba(60, 64, 67, 0.15);
}
.gsi-button:focus-visible {
    outline: none;
    box-shadow: var(--ring);
}
[data-theme="dark"] .gsi-button {
    color: #e3e3e3;
    background: #131314;
    border-color: #8e918f;
}
[data-theme="dark"] .gsi-button:hover {
    background: #1e1f20;
}
.gsi-button__logo {
    display: inline-flex;
    width: 20px;
    height: 20px;
}
.gsi-button__logo svg {
    width: 100%;
    height: 100%;
}

/* The initial shows until the photo loads, and stays if it can't. */
.avatar {
    position: relative;
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 1.6rem;
    height: 1.6rem;
    overflow: hidden;
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1;
    color: var(--on-paprika);
    background: var(--paprika);
    border-radius: 50%;
}
.avatar img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.avatar--lg {
    width: 3rem;
    height: 3rem;
    font-size: 1.25rem;
}

/*---------------------------------
  Forced colors (Windows High Contrast)
----------------------------------*/
@media (forced-colors: active) {
    :focus-visible,
    .stepper:has(input:focus-visible) {
        outline: 2px solid Highlight;
    }
    .btn, .chip, .field, .url-field, .stepper, .segmented__item, .card, .menu, .toast, .sheet, .tabbar, .check, .gsi-button {
        border: 1px solid ButtonBorder;
    }
    .btn--primary, .count-badge, .segmented input:checked + .segmented__item, .chip.is-active,
    .site-nav__link[aria-current="page"], .tabbar__link[aria-current="page"] {
        forced-color-adjust: none;
        color: HighlightText;
        background: Highlight;
    }
    .check:checked {
        forced-color-adjust: none;
        background-color: Highlight;
        border-color: Highlight;
    }
    .progress__bar {
        forced-color-adjust: none;
        background: Highlight;
    }
    .hero__overlay {
        display: none;
    }
    .skip-link {
        border: 2px solid CanvasText;
    }
}