/* ==========================================================================
   labels — AI bottle images (WineBottleImage, WineBottleOrLabel, AiGeneratedMark)
   and the review fold-outs (WineReviews, ReviewFoldRow, the friend Reviews tab).
   See Components/ for the matching .razor files. Tokens below mirror the app's
   lib/theme/colors.ts / lib/utils/wine-color.ts; use them, never a raw hex.
   ========================================================================== */

:root {
    /* EU AI icon — pure black/white by rule, never brand-tinted. */
    --lbl-eu-ink: #000000;            /* app colors.euAiMarkInk */
    --lbl-eu-paper: #ffffff;          /* app colors.euAiMarkPaper */
    --lbl-skeleton: #eef2f0;          /* app colors.surfaceAlt (the bottle pulse) */
    --lbl-caption: #7a8b83;           /* app colors.placeholder */
    --lbl-caption-on-dark: rgba(255, 255, 255, 0.82);

    /* Review rows */
    --wr-heading: #131a17;            /* app colors.textHeading */
    --wr-text-secondary: #42524a;     /* app colors.textSecondary */
    --wr-muted: #5b6a63;              /* app colors.textMuted */
    --wr-border: #d7dfdb;             /* app colors.border */
    --wr-border-light: #e4eae7;       /* app colors.borderLight */
    --wr-border-soft: #c7d1cc;        /* app colors.borderSoft */
    --wr-surface: #ffffff;            /* app colors.surface */
    --wr-surface-soft: #f4f6f5;       /* app colors.surfaceSoft */
    --wr-action: #1a2849;             /* app colors.actionPrimary */
    --wr-shadow: rgba(19, 26, 23, 0.06);

    /* Observed appearance colours — app lib/utils/wine-color.ts APPEARANCE_SWATCHES */
    --wr-sw-purple: #4E2A54;
    --wr-sw-ruby: #9B1B30;
    --wr-sw-garnet: #7B2233;
    --wr-sw-tawny: #8A4B2A;
    --wr-sw-brown: #6A4526;
    --wr-sw-lemongreen: #DDE29A;
    --wr-sw-lemon: #EBD65E;
    --wr-sw-gold: #D4AF37;
    --wr-sw-amber: #C08A3E;
    --wr-sw-pink: #F3B0C3;
    --wr-sw-salmon: #F1A07A;
    --wr-sw-copper: #C57A4E;
    --wr-sw-orange: #E67E22;
    --wr-sw-deepamber: #A9611E;
}

/* ── WineBottleImage: a 2:3 box, the generic bottle until the real one exists ── */
.lbl-bottle {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
    vertical-align: top;
}
.lbl-bottle--caption { gap: 4px; }
.lbl-box {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 2 / 3;
}
.lbl-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    -webkit-user-drag: none;
    user-select: none;
}
.lbl-img--real { animation: lbl-fade 0.25s ease-out; }
@keyframes lbl-fade { from { opacity: 0; } to { opacity: 1; } }

/* Faint, slow skeleton breath over the generic bottle while the real one is drawn. */
.lbl-pulse {
    position: absolute;
    inset: 0;
    background: var(--lbl-skeleton);
    -webkit-mask-image: var(--lbl-mask);
    mask-image: var(--lbl-mask);
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    pointer-events: none;
    opacity: 0.08;
    animation: lbl-breath 2.6s ease-in-out infinite;
}
@keyframes lbl-breath {
    0%, 100% { opacity: 0.08; }
    50% { opacity: 0.42; }
}
@media (prefers-reduced-motion: reduce) {
    .lbl-pulse { animation: none; opacity: 0.25; }
    .lbl-img--real { animation: none; }
}

/* The disclosure caption sits UNDER the bottle — never over it. Height is reserved. */
.lbl-caption {
    height: 14px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}
.lbl-caption .euai { flex-shrink: 0; }
.lbl-caption-text {
    font-family: var(--font-body);
    font-size: 10px;
    line-height: 1;
    color: var(--lbl-caption);
}
.lbl-caption--light .lbl-caption-text { color: var(--lbl-caption-on-dark); }

/* EU "AI generated" icon */
/* width:auto lets the svg keep its own width attribute — base/reset.css gives every svg
   width:100%, which stretched the EU mark across its row. */
.euai { display: inline-block; vertical-align: middle; width: auto; }
.euai--dark .euai-shape { fill: var(--lbl-eu-ink); }
.euai--dark .euai-glyph { fill: var(--lbl-eu-paper); }
.euai--light .euai-shape { fill: var(--lbl-eu-paper); }
.euai--light .euai-glyph { fill: var(--lbl-eu-ink); }

/* ── Wine page hero: bottle right of the title (WinePage integration helpers) ── */
.lbl-hero-row {
    display: flex;
    align-items: flex-end;
    gap: 0.5rem;
}
.lbl-hero-row > .lbl-hero-text { flex: 1; min-width: 0; }
.lbl-hero-bottle { width: 128px; margin: 0 1.1rem 0.9rem 0; }
@media (max-width: 600px) {
    .lbl-hero-bottle { width: 88px; margin: 0 0.6rem 0.7rem 0; }
}

/* ── Cellar cards (CellarDetails): the bottle replaces the colour stripe ── */
.cc-card-main {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
}
.cc-card-main > .lbl-bottle { margin-top: 0.1rem; }
.cc-card-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

/* ── Review lists (ReviewOverview table, the review feed) ── */
.review-wine-cell.review-wine-cell--bottle { flex-direction: row; align-items: flex-start; gap: 0.6rem; }
.review-wine-cell--bottle > .review-wine-cell-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.15rem; }
.feed-wine-bottle { display: flex; align-items: flex-start; gap: 0.75rem; min-width: 0; }
.feed-wine-bottle > .wine-meta { min-width: 0; }

/* ==========================================================================
   Reviews — WineReviews (wine page) + ReviewFoldRow (also a friend's Reviews tab)
   ========================================================================== */
.wr { margin: 1.5rem 0 1rem; }
.wr-title { margin-bottom: 0.6rem; }

.wr button { font-family: inherit; }

.wr-chevron {
    display: inline-flex;
    color: var(--wr-muted);
    transition: transform 0.18s ease;
    flex-shrink: 0;
}
.wr-chevron--up { transform: rotate(180deg); }

/* Score ring in the wine's colour */
.wr-score {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 50%;
    border-style: solid;
    border-color: var(--wr-accent);
    background: color-mix(in srgb, var(--wr-accent) 10%, var(--wr-surface));
    color: var(--wr-heading);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}
.wr-score--banner { width: 50px; height: 50px; border-width: 2px; font-size: 17px; }
.wr-score--row { width: 38px; height: 38px; border-width: 1.5px; font-size: 13px; }

/* Folded banner — the user's latest review */
.wr-banner {
    all: unset;
    box-sizing: border-box;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--wr-surface);
    border: 1px solid var(--wr-border-light);
    border-radius: 14px;
    padding: 11px 12px;
    cursor: pointer;
    transition: border-color 0.12s, box-shadow 0.12s;
}
.wr-banner:hover { border-color: var(--wr-border); box-shadow: 0 2px 10px var(--wr-shadow); }
.wr-banner:focus-visible { outline: 2px solid var(--wr-action); outline-offset: 2px; }
.wr-banner-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.wr-banner-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--wr-heading);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.wr-banner-meta { font-size: 12px; font-weight: 400; color: var(--wr-muted); }
.wr-banner-preview {
    font-size: 13px;
    line-height: 18px;
    color: var(--wr-text-secondary);
    margin-top: 2px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.wr-banner-quality { color: var(--wr-heading); font-weight: 700; }
.wr-banner-more {
    font-size: 12px;
    font-weight: 700;
    color: var(--wr-action);
    margin-top: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Open: "All reviews (n)" + groups */
.wr-open { display: flex; flex-direction: column; gap: 4px; }
.wr-open-head {
    all: unset;
    box-sizing: border-box;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 0;
    cursor: pointer;
}
.wr-open-head:hover .wr-open-title { color: var(--wr-action); }
.wr-open-head:focus-visible { outline: 2px solid var(--wr-action); outline-offset: 2px; border-radius: 6px; }
.wr-open-title { font-size: 14px; font-weight: 700; color: var(--wr-heading); }
.wr-group { margin-top: 10px; }
.wr-group-title {
    font-size: 10.5px;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--wr-muted);
    margin-bottom: 4px;
}

/* One review row */
.wr-line { border-bottom: 1px solid var(--wr-border); }
.wr-line--open { padding-bottom: 14px; }
.wr-line-head {
    all: unset;
    box-sizing: border-box;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 10px 0;
    cursor: pointer;
}
.wr-line-head:hover .wr-line-who { color: var(--wr-action); }
.wr-line-head:focus-visible { outline: 2px solid var(--wr-action); outline-offset: 2px; border-radius: 8px; }
.wr-line-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.wr-line-title {
    font-size: 12.5px;
    color: var(--wr-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.wr-line-who { font-size: 14px; font-weight: 700; color: var(--wr-heading); transition: color 0.12s; }
.wr-clamp2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.wr-line-preview {
    font-size: 13px;
    color: var(--wr-text-secondary);
    margin-top: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Folded out */
.wr-fold { animation: lbl-fade 0.18s ease-out; }
.wr-detail { padding-left: 49px; display: flex; flex-direction: column; gap: 12px; }
.wr-detail-quality { font-size: 13px; font-weight: 700; color: var(--wr-heading); }
.wr-blic { display: flex; flex-direction: column; gap: 7px; }
.wr-blic-row { display: flex; align-items: center; gap: 8px; }
.wr-blic-label {
    width: 92px;
    flex-shrink: 0;
    font-size: 12.5px;
    color: var(--wr-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.wr-blic-track {
    flex: 1;
    height: 6px;
    border-radius: 3px;
    background: var(--wr-border-light);
    overflow: hidden;
}
.wr-blic-fill { display: block; height: 100%; border-radius: 3px; background: var(--wr-accent); }
.wr-blic-value {
    min-width: 26px;
    text-align: right;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--wr-heading);
    font-variant-numeric: tabular-nums;
}
.wr-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.wr-chip {
    background: var(--wr-surface-soft);
    border-radius: 999px;
    padding: 4px 10px;
    font-size: 12px;
    color: var(--wr-text-secondary);
}
.wr-fields { display: grid; grid-template-columns: 1fr 1fr; row-gap: 10px; column-gap: 8px; }
.wr-field { min-width: 0; }
.wr-field-label {
    display: block;
    font-size: 9.5px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--wr-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.wr-field-value {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 1px;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--wr-heading);
}
.wr-swatch {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    border: 1px solid var(--wr-border-soft);
    flex-shrink: 0;
}
.wr-swatch--purple { background: var(--wr-sw-purple); }
.wr-swatch--ruby { background: var(--wr-sw-ruby); }
.wr-swatch--garnet { background: var(--wr-sw-garnet); }
.wr-swatch--tawny { background: var(--wr-sw-tawny); }
.wr-swatch--brown { background: var(--wr-sw-brown); }
.wr-swatch--lemongreen { background: var(--wr-sw-lemongreen); }
.wr-swatch--lemon { background: var(--wr-sw-lemon); }
.wr-swatch--gold { background: var(--wr-sw-gold); }
.wr-swatch--amber { background: var(--wr-sw-amber); }
.wr-swatch--pink { background: var(--wr-sw-pink); }
.wr-swatch--salmon { background: var(--wr-sw-salmon); }
.wr-swatch--copper { background: var(--wr-sw-copper); }
.wr-swatch--orange { background: var(--wr-sw-orange); }
.wr-swatch--deepamber { background: var(--wr-sw-deepamber); }
.wr-note {
    margin: 0;
    font-size: 13.5px;
    line-height: 20px;
    color: var(--wr-text-secondary);
    white-space: pre-line;
}
.wr-note--empty { font-size: 12.5px; color: var(--wr-muted); font-style: italic; }
.wr-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 18px;
    padding-left: 49px;
    margin-top: 14px;
}
.wr-action-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    font-weight: 700;
    color: var(--wr-action);
    text-decoration: none;
}
.wr-action-link:hover { text-decoration: underline; }

@media (max-width: 480px) {
    .wr-detail, .wr-actions { padding-left: 0; }
    .wr-blic-label { width: 80px; }
}

/* ── A friend's profile: Cellars / Reviews tabs ── */
.fr-tabs { margin-top: 0.5rem; }
.fr-reviews { margin-top: 0.25rem; }
.fr-reviews .wr-line:last-child { border-bottom: none; }
.fr-empty { font-size: 0.9rem; color: var(--color-muted); padding: 1rem 0; }

/* ── WineCard ShowBottle (a friend's cellar): bottle at the left of the text ── */
.wine-card-inner--bottle { position: relative; padding-left: 3.75rem; }
.wine-card-inner--bottle > .wine-card-bottle { position: absolute; left: 1rem; top: 1rem; }