/* ========================================
   HUMBOLDT EVENTS — PAGE-SPECIFIC STYLES
   ======================================== */

/* Homepage hero featured mode */
.hero--featured .hero__title {
    font-size: var(--text-2xl);
}
.hero--featured .hero__cta {
    display: flex;
    gap: var(--space-sm);
    justify-content: center;
    margin-bottom: var(--space-lg);
}
@media (min-width: 768px) {
    .hero--featured .hero__title { font-size: var(--text-4xl); }
}

/* Homepage sections */
.home-section {
    margin-bottom: var(--space-xl);
}

/* Trending sidebar list */
.trending-item {
    display: flex;
    gap: var(--space-sm);
    padding: var(--space-sm) 0;
    border-bottom: 1px solid var(--border-light);
    text-decoration: none;
    color: inherit;
    transition: all var(--transition-fast);
}
.trending-item:last-child { border-bottom: none; }
.trending-item:hover { color: var(--accent); }
.trending-item__date {
    color: var(--accent);
    font-size: var(--text-xs);
    font-weight: 700;
    min-width: 48px;
}
.trending-item__title { font-size: var(--text-sm); font-weight: 600; }

/* Venue / Artist detail */
.entity-detail {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: var(--space-lg) var(--container-padding);
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-lg);
}
@media (min-width: 1024px) {
    .entity-detail { grid-template-columns: minmax(0, 1fr) 320px; }
}
.entity-detail__image {
    width: 100%;
    aspect-ratio: 16/9;
    object-fit: cover;
    border-radius: var(--radius-md);
    margin-bottom: var(--space-md);
}
.entity-detail__social {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
}
.entity-detail__social a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--text-xs);
    color: var(--text-muted);
    padding: 6px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-full);
    transition: all var(--transition-fast);
    text-decoration: none;
}
.entity-detail__social a:hover {
    color: var(--accent);
    border-color: var(--accent);
}

/* Reviews */
.review-item { padding: var(--space-md) 0; border-bottom: 1px solid var(--border-light); }
.review-item:last-child { border-bottom: none; }
.review-item__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-xs);
}
.review-item__rating { color: var(--warning); font-size: var(--text-sm); }

/* Star rating input */
.star-rating { display: inline-flex; gap: 2px; direction: rtl; }
.star-rating input { display: none; }
.star-rating label {
    font-size: var(--text-2xl);
    color: var(--border);
    cursor: pointer;
    transition: color var(--transition-fast);
}
.star-rating label:hover,
.star-rating label:hover ~ label,
.star-rating input:checked ~ label {
    color: var(--warning);
}

/* Photos grid */
.photo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: var(--space-sm);
}
.photo-grid img {
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: var(--radius-sm);
    width: 100%;
    cursor: pointer;
    transition: all var(--transition-fast);
}
.photo-grid img:hover { opacity: 0.85; transform: scale(1.02); }

/* Tour dates */
.tour-date {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-sm) 0;
    border-bottom: 1px solid var(--border-light);
    font-size: var(--text-sm);
}
.tour-date:last-child { border-bottom: none; }
.tour-date__date {
    color: var(--accent);
    font-weight: 700;
    min-width: 90px;
}

/* Profile page */
.profile-header {
    display: flex;
    gap: var(--space-md);
    align-items: center;
    padding: var(--space-lg);
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-lg);
}

/* Print landing page */
.print-hero {
    text-align: center;
    padding: var(--space-2xl) var(--container-padding);
    background: linear-gradient(180deg, var(--accent-muted), transparent);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-xl);
}
.print-hero h1 { margin-bottom: var(--space-sm); }
.print-bundle-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-md);
}
@media (min-width: 768px) {
    .print-bundle-grid { grid-template-columns: repeat(3, 1fr); }
}
.print-bundle-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    transition: all var(--transition-base);
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}
.print-bundle-card:hover {
    border-color: var(--border-hover);
    box-shadow: var(--shadow-md);
}
.print-bundle-card__price { color: var(--accent); font-size: var(--text-xl); font-weight: 700; }
.print-bundle-card__features {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--space-md);
    color: var(--text-muted);
    font-size: var(--text-sm);
}
.print-bundle-card__features li {
    padding: var(--space-xs) 0;
    border-bottom: 1px solid var(--border-light);
}
.print-bundle-card__features li:last-child { border-bottom: none; }

/* ========================================
   ARTIST FAN WALL + GALLERY
   ======================================== */
.fan-tabs { margin-bottom: var(--space-lg); }
.fan-tab-panel[hidden] { display: none; }
.fan-section-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-md); }
.fan-section-head h2 { margin: 0; font-size: var(--text-xl); }

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: var(--space-sm);
}
.gallery-grid--preview { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.gallery-item {
    position: relative;
    margin: 0;
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--bg-card);
    border: 1px solid var(--border);
}
.gallery-item img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; cursor: zoom-in; }
.gallery-item figcaption { padding: 6px 8px; font-size: var(--text-xs); color: var(--text-muted); }
.gallery-item__play { position: relative; display: block; width: 100%; padding: 0; border: none; background: none; cursor: pointer; }
.gallery-item__play-btn {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    font-size: 36px; color: #fff; text-shadow: 0 2px 8px rgba(0, 0, 0, .7);
}
.gallery-item__iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; display: block; }
.gallery-item__actions { display: flex; gap: 4px; padding: 6px 8px; flex-wrap: wrap; }
.fan-media--pending, .fan-media--hidden { opacity: .72; outline: 2px dashed var(--warning); outline-offset: -2px; }

.fan-comment { position: relative; }
.fan-comment--pending, .fan-comment--hidden { opacity: .78; }
.fan-comment--rejected { opacity: .55; }
.fan-status {
    display: inline-block; padding: 1px 8px; border-radius: var(--radius-full);
    font-size: var(--text-xs); font-weight: 600;
}
.fan-status--pending { background: rgba(255, 183, 77, .2); color: var(--warning); }
.fan-status--hidden { background: rgba(255, 255, 255, .08); color: var(--text-muted); }
.fan-status--rejected { background: rgba(248, 113, 113, .2); color: var(--error); }
.fan-comment__pending-edit {
    margin-top: 6px; padding: 8px; border-left: 2px solid var(--warning);
    background: var(--bg-surface); font-size: var(--text-sm);
}
.badge--band { background: var(--accent-muted); color: var(--accent); }
.fan-compose-row { display: flex; gap: var(--space-md); flex-wrap: wrap; align-items: stretch; }
.fan-youtube-form { display: flex; gap: var(--space-sm); flex-wrap: wrap; flex: 1; min-width: 260px; }
.fan-youtube-form .form-input { flex: 1; min-width: 160px; }
.fan-upload { display: inline-flex; align-items: center; padding: var(--space-md) var(--space-lg); cursor: pointer; margin: 0; }
.fan-reply-note { margin-bottom: 6px; font-size: var(--text-sm); color: var(--text-muted); }
.fan-edit-form { margin-top: var(--space-sm); }
.fan-lightbox img { max-width: 92vw; max-height: 88vh; border-radius: var(--radius-md); }
.fan-comments-preview, .fan-comments--preview { opacity: .98; }

/* YouTube gallery card metadata */
.gallery-item figcaption { display: flex; flex-direction: column; gap: 2px; }
.gallery-item__title { font-weight: 600; color: var(--text); font-size: var(--text-sm); line-height: 1.3; }
.gallery-item__caption { color: var(--text-muted); font-style: italic; }
.gallery-item__desc { color: var(--text-dim, var(--text-muted)); opacity: .85; }
.gallery-item__author { color: var(--accent); font-weight: 500; }

/* ========================================
   VENUE MENUS
   ======================================== */
.menu-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--space-md);
}
.menu-grid--preview { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.menu-card {
    margin: 0;
    display: flex;
    flex-direction: column;
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--bg-card);
    border: 1px solid var(--border);
}
.menu-card--archived { opacity: .68; }
.menu-card__img {
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: contain;
    background: var(--bg-surface);
    cursor: zoom-in;
    display: block;
}
.menu-card__title { padding: 8px 10px 0; font-weight: 600; font-size: var(--text-sm); }
.menu-card__meta { padding: 4px 10px 8px; }
.menu-card__actions { display: flex; gap: 4px; padding: 0 10px 10px; flex-wrap: wrap; }
.menu-card__doc {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    aspect-ratio: 3 / 4;
    padding: var(--space-md);
    text-align: center;
    text-decoration: none;
    background: var(--bg-surface);
}
.menu-card__doc:hover { background: var(--bg-hover, var(--bg-surface)); }
.menu-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--error);
    color: var(--error);
    font-weight: 700;
    font-size: var(--text-sm);
    letter-spacing: .5px;
}
.menu-card__hint { font-size: var(--text-xs); color: var(--accent); }

/* ---- Online presence: the free website and sponsorship page --------------------------------- */
.op-hero {
    padding: clamp(2rem, 6vw, 4rem) 0 clamp(1.5rem, 4vw, 3rem);
    max-width: 46rem;
}
.op-hero__tag {
    display: inline-block;
    background: var(--accent-muted);
    color: var(--accent);
    border-radius: var(--radius-full);
    font-size: var(--text-sm);
    font-weight: 700;
    padding: 4px 12px;
    margin-bottom: var(--space-sm);
}
.op-hero h1 {
    font-size: clamp(1.9rem, 4vw, 2.9rem);
    line-height: 1.15;
    margin: 0 0 var(--space-sm);
}
.op-hero__lede {
    color: var(--text-muted);
    font-size: var(--text-lg);
    line-height: 1.6;
    margin: 0;
}
.op-hero__note {
    color: var(--text-muted);
    font-size: var(--text-sm);
    margin: var(--space-sm) 0 0;
}
.op-section {
    padding: clamp(2rem, 5vw, 3.5rem) 0;
    border-top: 1px solid var(--border);
}
.op-section h2 {
    font-size: clamp(1.3rem, 2.4vw, 1.7rem);
    margin: 0 0 var(--space-sm);
}
.op-lede {
    color: var(--text-muted);
    line-height: 1.6;
    max-width: 68ch;
    margin: 0 0 var(--space-md);
}
.op-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    margin-top: var(--space-md);
}
.op-actions--left { justify-content: flex-start; }

/* Feature cards: equal height, bordered so they read as objects rather than one dark slab. */
.op-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-md);
    margin-top: var(--space-md);
}
@media (min-width: 720px) { .op-grid { grid-template-columns: repeat(2, 1fr); } }
.op-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent);
    border-radius: var(--radius-md);
    padding: var(--space-md);
}
.op-card__step {
    display: block;
    color: var(--accent);
    font-weight: 700;
    margin-bottom: 6px;
}
.op-card p { margin: 0; line-height: 1.6; }

/* Module list: two columns, each module named with the ways it can render. */
.op-modules {
    list-style: none;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-sm);
    margin: var(--space-md) 0;
    padding: 0;
}
@media (min-width: 720px) { .op-modules { grid-template-columns: repeat(2, 1fr); } }
.op-module {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 10px 12px;
}
.op-module strong { display: block; }
.op-module span { color: var(--text-muted); font-size: var(--text-sm); }

/* Steps. */
.op-steps {
    list-style: none;
    counter-reset: op-step;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-sm);
    margin: var(--space-md) 0 0;
    padding: 0;
}
@media (min-width: 720px) { .op-steps { grid-template-columns: repeat(4, 1fr); } }
.op-steps li { position: relative; padding-left: 44px; min-height: 34px; }
.op-steps li::before {
    counter-increment: op-step;
    content: counter(op-step);
    position: absolute;
    left: 0;
    top: 0;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--accent-muted);
    color: var(--accent);
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
}
.op-steps strong { display: block; }
.op-steps span { color: var(--text-muted); font-size: var(--text-sm); line-height: 1.5; }

/* Free vs sponsor: the paid column is the one to look at, so it is the one that stands out. */
.op-compare {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-md);
    margin: var(--space-md) 0 var(--space-lg);
}
@media (min-width: 720px) { .op-compare { grid-template-columns: repeat(2, 1fr); align-items: start; } }
.op-compare__col {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: var(--space-md);
    position: relative;
}
.op-compare__col--paid { border-color: var(--accent); box-shadow: var(--shadow-glow); }
.op-compare__col--paid .op-compare__flag { margin: -1px -1px 0 0; }
.op-compare__flag {
    position: absolute;
    top: 0;
    right: 0;
    border-radius: 0 var(--radius-md) 0 var(--radius-sm);
    background: var(--accent);
    color: var(--text-inverse);
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: 800;
    padding: 4px 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.op-compare__col h3 { margin: 0 0 var(--space-sm); }
.op-compare__col ul { list-style: none; margin: 0; padding: 0; }
.op-compare__col li { padding: 6px 0 6px 22px; position: relative; line-height: 1.5; }
.op-compare__col li::before { content: "✓"; position: absolute; left: 0; color: var(--accent); font-weight: 800; }
.op-compare__col li.op-compare__foot {
    border-top: 1px solid var(--border);
    margin-top: var(--space-sm);
    padding-top: var(--space-sm);
    color: var(--text-muted);
    font-size: var(--text-sm);
}
.op-compare__col li.op-compare__foot::before { content: ""; }
.op-compare__col--paid .btn { width: 100%; margin-top: var(--space-sm); }

.op-table-wrap { overflow-x: auto; }
.op-terms td:first-child { color: var(--text-muted); }
.op-terms td:not(:first-child), .op-terms th:not(:first-child) { font-weight: 600; }
.op-fineprint {
    color: var(--text-muted);
    font-size: var(--text-sm);
    line-height: 1.6;
    margin: var(--space-sm) 0 0;
    max-width: 70ch;
}

/* FAQ: visible questions, with the native marker styled rather than hidden. */
.op-faq { display: grid; gap: var(--space-sm); margin-top: var(--space-md); }
.op-faq details {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 12px 14px;
}
.op-faq summary {
    cursor: pointer;
    font-weight: 700;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-sm);
}
.op-faq summary::-webkit-details-marker { display: none; }
.op-faq summary::after { content: "+"; color: var(--accent); font-weight: 800; font-size: 1.2rem; }
.op-faq details[open] summary::after { content: "−"; }
.op-faq details p { color: var(--text-muted); line-height: 1.6; margin: var(--space-sm) 0 0; }

.op-cta {
    text-align: center;
    padding: var(--space-xl) var(--space-md);
    margin-top: var(--space-lg);
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
}
.op-cta h2 { margin: 0 0 var(--space-sm); }
.op-cta p { color: var(--text-muted); margin: 0; }
.op-cta .op-actions { justify-content: center; }

/* A secondary button on this page must read as a button, not as text: the page background and the
   button fill are otherwise nearly the same dark. */
.page .btn-secondary {
    background: var(--bg-card);
    border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
    color: var(--text);
}
.page .btn-secondary:hover {
    border-color: var(--accent);
    background: var(--bg-card-hover);
}
.btn-wide { min-width: 12rem; }
.op-compare__price { font-size: var(--text-lg); font-weight: 800; margin: 0 0 2px; }
.op-compare__sub { color: var(--text-muted); font-size: var(--text-sm); line-height: 1.5; margin: 0 0 var(--space-sm); }
@media (max-width: 719px) {
    .btn-wide { width: 100%; }
}

.op-terms__caption {
    caption-side: top;
    text-align: left;
    color: var(--text-muted);
    font-size: var(--text-sm);
    line-height: 1.5;
    padding: 0 0 var(--space-sm);
    max-width: 70ch;
}
/* The row labels were the dimmest thing on the page; they carry the meaning, so lift them. */
.op-terms td:first-child { color: var(--text); opacity: 0.85; }

/* The paid card's button sat almost against the list above it, and the price labels in the table
   read smaller than the rest of the page. */
.op-compare__col--paid .btn { margin-top: var(--space-md); }
.op-terms td, .op-terms th { font-size: var(--text-md, 0.95rem); vertical-align: middle; }
.op-terms__caption { font-size: var(--text-md, 0.95rem); margin-bottom: var(--space-sm); }

.op-terms__note { display: block; color: var(--text-muted); font-size: var(--text-xs); font-weight: 400; }

/* ---- Online presence: centred hero, icons, module examples, domain picker -------------------- */
.op-hero--center {
    max-width: none;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.op-hero--center .op-hero__lede { max-width: 62ch; }
.op-hero--center .op-hero__tag { align-self: center; }

/* A wide lede spans the content column instead of hugging the left edge. */
.op-lede--wide { max-width: none; }

.op-icon { display: block; color: var(--accent); }
.op-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: var(--radius-md);
    background: var(--accent-muted);
    margin-bottom: 10px;
}

/* The free-address chooser inside the card. */
.op-card__label {
    display: block;
    font-size: var(--text-sm);
    color: var(--text-muted);
    margin: 12px 0 4px;
}
.op-domain { display: flex; gap: 6px; }
.op-domain .form-input { flex: 1; min-width: 0; }
.op-domain .form-select { width: auto; max-width: 46%; }
.op-domain__preview { font-size: var(--text-sm); margin: 8px 0 0; }
.op-domain__preview strong { color: var(--accent); }
.op-card__note { font-size: var(--text-xs); color: var(--text-muted); margin: 6px 0 0; }

/* Module cards are buttons now, so the whole card is a target. */
.op-module { padding: 0; background: none; border: none; }
.op-module__btn {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    text-align: left;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 12px;
    color: var(--text);
    cursor: pointer;
}
.op-module__btn:hover { border-color: var(--accent); }
.op-module__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: var(--radius-sm);
    background: var(--accent-muted);
    flex: 0 0 auto;
}
.op-module__text { flex: 1; min-width: 0; }
.op-module__text strong { display: block; }
.op-module__text span { color: var(--text-muted); font-size: var(--text-sm); }
.op-module__hint {
    color: var(--accent);
    font-size: var(--text-xs);
    white-space: nowrap;
    opacity: 0;
    transition: opacity .15s ease;
}
.op-module__btn:hover .op-module__hint, .op-module__btn:focus-visible .op-module__hint { opacity: 1; }

/* The example dialog. */
.op-example {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .68);
    z-index: 9999;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 24px;
    overflow: auto;
}
.op-example[hidden] { display: none; }
.op-example__inner {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--space-md);
    width: 100%;
    max-width: 560px;
    margin: auto;
}
.op-mock__hero {
    position: relative;
    border-radius: var(--radius-md);
    overflow: hidden;
    min-height: 170px;
    display: flex;
    align-items: flex-end;
    background: var(--bg-input);
}
.op-mock__hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .85; }
.op-mock__hero-text { position: relative; padding: 16px; text-align: center; width: 100%; background: linear-gradient(0deg, rgba(0,0,0,.7), transparent); }
.op-mock__hero strong { display: block; font-size: 1.25rem; letter-spacing: .06em; }
.op-mock__hero span { color: var(--text-muted); font-size: var(--text-sm); }
.op-mock__bar { display: block; height: 9px; border-radius: 999px; background: var(--bg-input); margin: 8px 0; }
.op-mock__text { padding: 4px 0; }
.op-mock__img { height: 150px; border-radius: var(--radius-md); background: var(--bg-input); overflow: hidden; }
.op-mock__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.op-mock__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.op-mock__grid i { display: block; height: 62px; border-radius: var(--radius-sm); background-color: var(--bg-input); background-size: cover; background-position: center; }
.op-mock__list { display: grid; gap: 6px; }
.op-mock__list div { background: var(--bg-input); border-radius: var(--radius-sm); padding: 8px 10px; font-size: var(--text-sm); }
.op-mock__list b { color: var(--accent); font-weight: 700; }
.op-mock__list--headed > b { background: none; padding: 0 0 2px; font-size: var(--text-sm); text-transform: uppercase; letter-spacing: .06em; }
.op-mock__list span { display: inline-block; min-width: 74px; color: var(--accent); font-weight: 600; }
.op-mock__cards { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.op-mock__cards div { background: var(--bg-input); border-radius: var(--radius-sm); padding: 16px 12px; font-size: var(--text-sm); font-weight: 600; }
.op-mock__form { display: grid; gap: 8px; }
.op-mock__form label { font-size: var(--text-xs); color: var(--text-muted); margin-bottom: -4px; }
.op-mock__form .op-mock__input { display: block; height: 34px; border-radius: var(--radius-sm); background: var(--bg-input); border: 1px solid var(--border); }
.op-mock__form .op-mock__input--tall { height: 62px; }
.op-mock__form small { color: var(--text-muted); font-size: var(--text-xs); }
.op-mock__form em { justify-self: start; font-style: normal; background: var(--accent); color: var(--text-inverse); border-radius: var(--radius-sm); padding: 6px 14px; font-weight: 700; font-size: var(--text-sm); }
.op-mock__pills { display: flex; gap: 8px; flex-wrap: wrap; }
.op-mock__pills i { font-style: normal; background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--radius-full); padding: 6px 14px; font-size: var(--text-sm); }

/* The domain asterisk explains itself where the asterisk is, not a scroll away. */
.op-card__note--fine { border-top: 1px solid var(--border); padding-top: 10px; margin: 10px 0 0; }

/* ---------------------------------------------------------------- Contests */
.contest-hero { text-align: center; margin: 0 0 var(--space-lg); }
.contest-hero__tag {
    display: inline-block; font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
    color: var(--accent); border: 1px solid var(--accent-muted); background: var(--accent-muted);
    border-radius: var(--radius-full); padding: 4px 12px; margin-bottom: var(--space-sm);
}
.contest-hero h1 { margin: 0 0 8px; }
.contest-hero__lede { color: var(--text-muted); max-width: 62ch; margin: 0 auto; }
.contest-hero__win { color: var(--accent); font-weight: 600; margin-top: var(--space-sm); }

.contest-mine-strip {
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-lg);
    padding: var(--space-md) var(--space-lg); margin-bottom: var(--space-lg);
}
.contest-mine-strip__stat { display: flex; flex-direction: column; }
.contest-mine-strip__stat strong { font-size: 26px; line-height: 1; }
.contest-mine-strip__stat span { font-size: 12px; color: var(--text-muted); }
.contest-mine-strip .btn { margin-left: auto; }
.contest-login-nudge {
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md);
    padding: var(--space-md) var(--space-lg); margin-bottom: var(--space-lg);
}

.contest-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 var(--space-lg); border-bottom: 1px solid var(--border-light); }
.contest-tabs a {
    padding: 8px 14px; border-radius: var(--radius-sm) var(--radius-sm) 0 0; color: var(--text-muted);
    font-weight: 600; font-size: 14px;
}
.contest-tabs a.is-active { color: var(--text); background: var(--bg-card); border: 1px solid var(--border-light); border-bottom-color: transparent; }

.contest-section { margin-bottom: var(--space-lg); }
.contest-section h2 { margin: 0 0 var(--space-md); }

.contest-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--space-md); }
.contest-card {
    display: flex; flex-direction: column; background: var(--bg-card); border: 1px solid var(--border-light);
    border-radius: var(--radius-md); overflow: hidden; transition: border-color .15s, transform .15s;
}
.contest-card:hover { border-color: var(--border-hover); transform: translateY(-2px); }
.contest-card__media { display: block; aspect-ratio: 16 / 9; overflow: hidden; }
.contest-card__media img { width: 100%; height: 100%; object-fit: cover; }
.contest-card__body { padding: var(--space-md); display: flex; flex-direction: column; gap: 8px; flex: 1; }
.contest-card__type { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--accent); }
.contest-card h3 { margin: 0; font-size: 18px; }
.contest-card__body p { margin: 0; color: var(--text-muted); font-size: 14px; }
.contest-card__meta { display: flex; flex-wrap: wrap; gap: 10px; font-size: 12px; color: var(--text-muted); }
.contest-card .btn { margin-top: auto; align-self: flex-start; }

.contest-winners { display: flex; flex-direction: column; gap: 8px; }
.contest-winner-chip {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; padding: 10px 14px;
    background: var(--bg-card); border: 1px solid var(--border-light); border-radius: var(--radius-sm);
}
.contest-winner-chip.is-forfeited { opacity: .5; }
.contest-winner-chip__place { font-weight: 700; color: var(--accent); min-width: 28px; }
.contest-winner-chip__name { font-weight: 600; }
.contest-winner-chip__prize { color: var(--text-muted); font-size: 14px; }
.contest-winner-chip__contest { margin-left: auto; font-size: 13px; }

.contest-list { display: flex; flex-direction: column; gap: 6px; }
.contest-list__row {
    display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: var(--bg-card);
    border: 1px solid var(--border-light); border-radius: var(--radius-sm);
}
.contest-list__row:hover { border-color: var(--border-hover); }
.contest-list__title { font-weight: 600; }
.contest-list__meta { margin-left: auto; color: var(--text-muted); font-size: 13px; }

.contest-how { padding: var(--space-lg); }
.contest-how__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-lg); }
.contest-how__grid h3 { margin: 0 0 6px; font-size: 16px; }
.contest-how__grid p { margin: 0; color: var(--text-muted); font-size: 14px; }
.contest-how__legal {
    margin: var(--space-lg) 0 0; padding-top: var(--space-md); border-top: 1px solid var(--border-light);
    font-size: 13px; color: var(--text-muted);
}

.contest-rail { display: flex; flex-direction: column; gap: 2px; }
.contest-rail span { color: var(--text-muted); font-size: 13px; }
.contest-rail-list { margin: 0; padding-left: 18px; color: var(--text-muted); font-size: 14px; }

.contest-detail__head { margin-bottom: var(--space-lg); }
.contest-detail__badges { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px; }
.contest-detail__sponsor { font-size: 13px; color: var(--text-muted); }
.contest-detail__subtitle { color: var(--text-muted); font-size: 18px; margin: 6px 0; }
.contest-detail__meta { display: flex; flex-wrap: wrap; gap: 14px; color: var(--text-muted); font-size: 14px; margin: 10px 0; }
.contest-detail__media { border-radius: var(--radius-md); overflow: hidden; margin-bottom: var(--space-lg); }
.contest-detail__media img { width: 100%; display: block; }
.contest-detail__prose { margin-bottom: var(--space-lg); line-height: 1.7; }
.contest-win-banner a { text-decoration: underline; }

.contest-prizes ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.contest-prizes li {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px; padding: 12px 16px;
    background: var(--bg-card); border: 1px solid var(--border-light); border-left: 3px solid var(--accent);
    border-radius: var(--radius-sm);
}
.contest-prizes__place { text-transform: uppercase; font-size: 11px; letter-spacing: .06em; color: var(--accent); font-weight: 700; }
.contest-prizes__title { font-weight: 600; }
.contest-prizes__kind { color: var(--text-muted); font-size: 13px; }
.contest-prizes__arv { margin-left: auto; color: var(--text-muted); font-size: 13px; }
.contest-prizes__desc { flex-basis: 100%; margin: 4px 0 0; color: var(--text-muted); font-size: 14px; }

.contest-entry { padding: var(--space-lg); margin-bottom: var(--space-lg); }
.contest-entry h2 { margin-top: 0; }
.contest-entry__free { color: var(--text-muted); font-size: 14px; }
.contest-entry__gate { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.contest-entry__counter { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-lg); margin: var(--space-md) 0; }
.contest-entry__counter-big { display: flex; flex-direction: column; }
.contest-entry__counter-big span { font-size: 34px; font-weight: 700; color: var(--accent); line-height: 1; }
.contest-entry__counter-big small { color: var(--text-muted); }
.contest-entry__counter-side { color: var(--text-muted); font-size: 14px; }
.contest-entry__agree { display: block; margin: 8px 0; }
.contest-entry__msg { min-height: 20px; font-size: 14px; margin: 10px 0 0; }
.contest-entry__msg.is-error { color: #ff7b72; }
.contest-entry__msg.is-success { color: var(--accent); }
.contest-entry__msg.is-info { color: var(--text-muted); }

.contest-bonus { margin-top: var(--space-lg); padding-top: var(--space-md); border-top: 1px solid var(--border-light); }
.contest-bonus h3 { margin: 0 0 10px; font-size: 15px; }
.contest-bonus h3 small { color: var(--text-muted); font-weight: 400; }
.contest-bonus__list { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--space-md); }
.contest-bonus__item { display: flex; align-items: center; gap: 12px; font-size: 14px; }
.contest-bonus__item .btn { margin-left: auto; }
.contest-bonus__item.is-done { opacity: .55; }
.contest-bonus__done { margin-left: auto; font-size: 12px; color: var(--accent); }

.contest-rules-card { padding: var(--space-lg); margin-top: var(--space-lg); }
.contest-rules { font-size: 14px; line-height: 1.7; }
.contest-rules h3 { margin-top: 0; }
.contest-rules__notice {
    background: #3a2f10; border: 1px solid #7a6410; border-radius: var(--radius-sm);
    padding: 12px 16px; color: #ffe08a;
}
.contest-rules ul { padding-left: 20px; }

.contest-results { margin-bottom: var(--space-lg); }
.contest-results__fair { font-size: 13px; margin-top: 10px; }
.contest-claim { padding: var(--space-lg); margin-top: var(--space-lg); }

@media (max-width: 640px) {
    .contest-mine-strip .btn, .contest-bonus__item .btn { margin-left: 0; }
    .contest-winner-chip__contest, .contest-list__meta, .contest-prizes__arv { margin-left: 0; }
}

/* Menu line items (a menu can be a list of dishes, not only an image/PDF) */
.menu-items { padding: 8px 10px 4px; text-align: left; }
.menu-items__section { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); margin: 12px 0 4px; }
.menu-items__list { list-style: none; margin: 0; padding: 0; }
.menu-items__item { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding: 5px 0; border-bottom: 1px dashed var(--border); }
.menu-items__name { font-weight: 600; font-size: var(--text-sm); }
.menu-items__diet { font-weight: 400; font-size: var(--text-xs); color: var(--accent); }
.menu-items__price { text-align: right; font-variant-numeric: tabular-nums; font-size: var(--text-sm); }
.menu-items__desc { grid-column: 1 / -1; font-size: var(--text-xs); color: var(--text-muted); }
.menu-card--items { border: 1px solid var(--border); border-radius: var(--radius-md); }

/* ---- media: entity tags, people tags, composer + taggers ------------------- */
.gallery-item__tags,
.gallery-item__people {
    display: flex; flex-wrap: wrap; gap: 4px; align-items: center;
    margin-top: 4px; font-size: var(--text-xs);
}
.gallery-item__people { color: var(--text-muted); }
.tag-chip {
    display: inline-flex; align-items: center; gap: 2px;
    padding: 1px 8px; border-radius: var(--radius-full);
    background: var(--bg-surface); border: 1px solid var(--border);
    color: var(--text); font-size: var(--text-xs); text-decoration: none;
    max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
a.tag-chip:hover { border-color: var(--accent); color: var(--accent); }
.tag-chip--person { background: var(--accent-muted); color: var(--accent); border-color: transparent; }
.tag-chip--pending { opacity: .65; border: 1px dashed var(--warning); }

.media-composer__tags { display: flex; gap: var(--space-sm); flex-wrap: wrap; margin-top: var(--space-sm); }
.media-composer__hint { margin-top: var(--space-xs); }
.media-tagger { position: relative; flex: 1; min-width: 220px; }
/* The admin console's owner typeahead reuses .media-tagger__menu, which is positioned against its
   nearest positioned ancestor — without this the results render as a full-width strip at the
   bottom of the page instead of under the input. */
.admin-owner-picker { position: relative; flex: 1; min-width: 240px; }
/* The menu hugs the input, not the whole field group (which also holds the label and the hint). */
.admin-owner-picker [data-admin-owner-ui] { position: relative; }
.media-tagger__input { width: 100%; }
.media-tagger__chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.media-tagger__chip { padding-right: 4px; }
.media-tagger__chip-x {
    border: none; background: none; color: inherit; cursor: pointer;
    font-size: 14px; line-height: 1; padding: 0 2px;
}
.media-tagger__menu {
    position: absolute; z-index: 40; left: 0; right: 0; top: calc(100% + 2px);
    background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg, 0 8px 24px rgba(0, 0, 0, .4)); max-height: 260px; overflow: auto;
}
.media-tagger__option {
    display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
    width: 100%; padding: 8px 10px; border: none; background: none;
    color: var(--text); text-align: left; cursor: pointer;
}
.media-tagger__option:hover { background: var(--bg-surface); }
.media-tagger__option-sub { font-size: var(--text-xs); color: var(--text-muted); }
.media-tagger__empty { padding: 8px 10px; font-size: var(--text-sm); color: var(--text-muted); }
.media-tag-modal__panel { max-width: 420px; width: 100%; }

/* ---- webmail (/mail/) ---------------------------------------------------- */
/* A mail client gets the whole viewport, not the page's reading width, and no ad rail. */
.page--wide { max-width: none; }

.mail-topbar {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--space-md); flex-wrap: wrap;
    padding: var(--space-sm) 0 var(--space-md);
}
.mail-topbar__id { display: flex; align-items: center; gap: var(--space-sm); min-width: 0; }
.mail-select {
    appearance: none; -webkit-appearance: none;
    background: var(--bg-card) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path d='M0 0l5 6 5-6z' fill='%23888'/></svg>") no-repeat right 10px center;
    border: 1px solid var(--border); border-radius: var(--radius-md);
    color: var(--text); font-size: var(--text-md); font-weight: 600;
    padding: 10px 34px 10px 14px; max-width: 420px; min-width: 260px; cursor: pointer;
}
.mail-select:hover { border-color: var(--accent); }

.webmail {
    display: grid; grid-template-columns: var(--wb-rail, 190px) minmax(0, 1fr);
    gap: var(--space-sm); align-items: stretch;
    height: calc(100vh - 190px); min-height: 480px;
}
/* List and reading pane live in their own grid so the divider between them can resize them. */
.webmail__split {
    display: grid;
    grid-template-columns: minmax(0, var(--wb-l, 42fr)) var(--wb-gutter, 6px) minmax(0, var(--wb-r, 58fr));
    gap: var(--space-sm); align-items: stretch; min-width: 0; min-height: 0;
}
/* A grab bar that is wider than it looks, so it is easy to catch. */
.webmail__gutter { position: relative; cursor: col-resize; touch-action: none; }
.webmail__gutter::before {
    content: ''; position: absolute; inset: 0 2px; border-radius: var(--radius-full);
    background: var(--border); transition: background .15s ease;
}
.webmail__gutter::after { content: ''; position: absolute; inset: 0 -4px; }
.webmail__gutter:hover::before,
.webmail__gutter:focus-visible::before,
.webmail__gutter.is-dragging::before { background: var(--accent); }
.webmail__gutter:focus-visible { outline: none; }
body.webmail-resizing { cursor: col-resize; user-select: none; }
.webmail__folders {
    display: flex; flex-direction: column; gap: 2px;
    background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-md);
    padding: var(--space-sm) 6px; overflow: hidden; min-width: 0;
}
.webmail__rail-toggle {
    display: flex; align-items: center; justify-content: space-between; gap: 6px;
    width: 100%; padding: 6px 10px 4px; border: none; background: none; cursor: pointer;
    color: var(--text-muted); border-radius: var(--radius-sm);
}
.webmail__rail-toggle:hover { color: var(--accent); background: var(--bg-surface); }
.webmail__rail-toggle .webmail__rail-title {
    font-size: var(--text-xs); letter-spacing: .08em; text-transform: uppercase;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.webmail__rail-ico { display: none; font-size: var(--text-sm); line-height: 1; }
.webmail__rail-chevron { font-size: var(--text-md); line-height: 1; flex: 0 0 auto; }
.webmail__rail-list { display: flex; flex-direction: column; gap: 2px; overflow-y: auto; min-height: 0; }
/* Collapsed: a slim strip, and the icon + flipped chevron are the way back. */
.webmail.is-rail-collapsed { --wb-rail: 48px; }
.webmail.is-rail-collapsed .webmail__folders { padding-left: 4px; padding-right: 4px; }
.webmail.is-rail-collapsed .webmail__rail-list,
.webmail.is-rail-collapsed .webmail__rail-title { display: none; }
.webmail.is-rail-collapsed .webmail__rail-toggle {
    flex-direction: column; gap: 8px; align-items: center;
    padding: 8px 0; height: 100%;
}
.webmail.is-rail-collapsed .webmail__rail-ico { display: block; }
.webmail.is-rail-collapsed .webmail__rail-chevron { transform: rotate(180deg); }
@media (max-width: 1100px) {
    .webmail { grid-template-columns: var(--wb-rail, 160px) minmax(0, 1fr); height: auto; }
    .webmail__split { grid-template-columns: minmax(0, 1fr); }
    .webmail__gutter { display: none; }
}
@media (max-width: 720px) { .webmail { grid-template-columns: 1fr; } }
.webmail__folder {
    display: flex; justify-content: space-between; align-items: center; gap: 6px;
    padding: 9px 12px; border: none; background: none; color: var(--text);
    text-align: left; border-radius: var(--radius-sm); cursor: pointer;
    font-size: var(--text-sm);
}
.webmail__folder:hover { background: var(--bg-surface); }
.webmail__folder.is-active { background: var(--accent-muted); color: var(--accent); font-weight: 600; }
.webmail__folder .webmail__count { font-size: var(--text-xs); color: var(--text-muted); }
.webmail__folder.is-active .webmail__count { color: var(--accent); }
.webmail__count--unread {
    background: var(--accent); color: #05261a; font-weight: 700;
    padding: 1px 7px; border-radius: var(--radius-full); font-size: var(--text-xs);
}

.webmail__list {
    display: flex; flex-direction: column;
    border: 1px solid var(--border); border-radius: var(--radius-md);
    background: var(--bg-card); overflow: hidden;
}
.webmail__listbar {
    display: flex; gap: var(--space-sm); align-items: center;
    padding: 10px 12px; border-bottom: 1px solid var(--border);
}
.webmail__list .form-input { font-size: var(--text-sm); }
.webmail__items { overflow-y: auto; flex: 1; }
/* One row per message: the sender and date on the first line, the subject beneath. */
.webmail__item {
    display: block;
    width: 100%; text-align: left; padding: 14px 16px; border: none;
    border-bottom: 1px solid var(--border); background: none; color: var(--text);
    cursor: pointer; font-size: var(--text-sm); line-height: 1.45;
}
.webmail__item:hover { background: var(--bg-surface); }
.webmail__item.is-active { background: var(--accent-muted); box-shadow: inset 2px 0 0 var(--accent); }
/* A comfortable pager bar under the list, not a tacked-on line. */
.webmail__pager {
    display: flex; gap: var(--space-sm); align-items: center; justify-content: center;
    padding: 9px; border-top: 1px solid var(--border); font-size: var(--text-xs); color: var(--text-muted);
}
.webmail__item .webmail__line1 {
    display: flex; gap: 10px; align-items: baseline; min-width: 0;
}
.webmail__item .webmail__subject { display: block; margin-top: 2px; }
/* Show the person, not their angle-bracket address. */
.webmail__item .webmail__from {
    font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; max-width: 46%;
}
.webmail__item .webmail__date { margin-left: auto; }
.webmail__item .webmail__subject {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-muted);
}
.webmail__item.is-unread .webmail__subject { color: var(--text); }
/* Unread: a dot beside the sender, heavier text, and the date in the accent colour. */
.webmail__item.is-unread { box-shadow: inset 3px 0 0 var(--accent); }
.webmail__item.is-unread .webmail__line1::before {
    content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%;
    background: var(--accent); flex: 0 0 auto; align-self: center;
}
.webmail__item.is-unread .webmail__date { color: var(--accent); }
.webmail__item.is-unread .webmail__from { max-width: 42%; }
.webmail__date { color: var(--text-muted); font-size: var(--text-xs); white-space: nowrap; }
.webmail__empty { padding: 32px 16px; text-align: center; color: var(--text-muted); }

.webmail__read {
    display: flex; flex-direction: column; overflow-y: auto;
    border: 1px solid var(--border); border-radius: var(--radius-md);
    background: var(--bg-card); padding: var(--space-md); min-height: 0;
}
.webmail__head { border-bottom: 1px solid var(--border); padding-bottom: var(--space-sm); }
.webmail__head h2 { font-size: var(--text-lg); margin-bottom: 4px; }
.webmail__actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: var(--space-sm); }
.webmail__body { padding-top: var(--space-md); min-height: 200px; }
.webmail__html {
    width: 100%; height: 100%; min-height: 420px; border: 0; background: #fff;
    border-radius: var(--radius-sm);
}
.webmail__text {
    white-space: pre-wrap; overflow-wrap: break-word; font-size: var(--text-sm);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace; line-height: 1.6;
}
.webmail__notice { padding: var(--space-md); }

/* Festival schedule (multi-venue events): time column, act, place. */
.festival-schedule td { vertical-align: top; padding: 9px 12px 9px 0; border-bottom: 1px solid var(--border); }
.festival-schedule tr:last-child td { border-bottom: none; }
.festival-schedule__time { font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums; white-space: nowrap; }
.festival-schedule td:last-child a { color: var(--accent); }
/* Per-performance going/interested/went control on a festival lineup. */
.festival-schedule__actions { display: flex; gap: 6px; flex-wrap: wrap; }
.festival-schedule__act { font-size: 12px; padding: 3px 10px; line-height: 1.5; }
.festival-schedule__act.active { background: var(--accent); color: #04231a; border-color: var(--accent); }

/* Recommendations ("Recommended for you") — profile + events page. */
.recommend {
    position: relative;
    margin-bottom: var(--space-lg);
    padding: var(--space-md);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: linear-gradient(180deg, var(--accent-muted), transparent 60%);
}
.recommend__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
}
.recommend__title { font-size: var(--text-lg); margin: 0; }
.recommend__sub { color: var(--text-muted); font-size: var(--text-sm); margin: 2px 0 var(--space-md); }
.recommend__why { color: var(--text-muted); font-size: var(--text-sm); margin: 6px 2px 0; }
.recommend__dismiss {
    flex: none;
    width: 32px;
    height: 32px;
    line-height: 1;
    font-size: 22px;
    color: var(--text-muted);
    background: transparent;
    border: 1px solid var(--border);
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: color var(--transition-fast), border-color var(--transition-fast);
}
.recommend__dismiss:hover { color: var(--text); border-color: var(--accent); }