/* ============================================================
   tasting.css: styles the cellar's theme.css does not have.
   Loaded after main.css and theme.css; uses their tokens and classes.
   The app is the cellar's gold tasting area, so the "selected" fill is the
   accent (gold) at 16%, not the cellar's pink.
   ============================================================ */

.tasting {
  --accent-fill: rgba(217, 185, 122, .16);
}
.tasting .chip.on, .tasting .chip[aria-pressed="true"],
.tasting .chipbox input:checked + .chip,
.tasting .segbox input:checked + span,
.tasting .seg > .on { background: var(--accent-fill); }

.wt-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 8px; flex-shrink: 0; }

/* ---------- Page ---------- */
.sheet-page { max-width: 720px; margin: 0 auto; }
.sheet-form { padding-bottom: 1rem; }
.sheet-form .btn-wide { margin-top: 1.5rem; }
.sheet-form .backlink { margin-top: .5rem; }
.plist-title h1 { color: var(--text); }
.sheet-page .plist-title { margin-bottom: .25rem; }

.type-filter { margin: .35rem 0 .6rem; }
.type-filter .chip { text-decoration: none; }
.plist-search { position: sticky; }
.empty-cta { display: flex; align-items: center; justify-content: center; text-decoration: none; max-width: 20rem; margin: 0 auto; }

.show-title { font-family: var(--font-serif); font-weight: 600; font-size: 2.3rem; line-height: 1.1; }
.tst-banner { margin-top: .25rem; }
.show-facts { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem 1rem; margin-bottom: .5rem; }
.note-card { background: var(--surface); border: 1px solid var(--hair); border-left: 3px solid var(--gold);
  border-radius: 12px; padding: .75rem .9rem; margin-bottom: .75rem; }
.note-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.hint { color: var(--muted); font-size: .85rem; }
.note-grid { grid-template-columns: 8.5rem 1fr; }
@media (max-width: 480px) { .note-grid { grid-template-columns: 6.5rem 1fr; } }

/* ---------- Form fields: 44px, 12px radius, 16px text (stops iOS zooming on focus) ---------- */
.tasting .form-input, .tasting .form-select, .tasting .form-textarea {
  min-height: 44px; border-radius: 12px; border-color: var(--hair2); background: var(--surface2);
  font-size: 1rem; padding: .6rem .8rem; margin-top: .3rem; }
.tasting .form-input:focus, .tasting .form-select:focus, .tasting .form-textarea:focus { border-color: var(--accent); }
.tasting .form-error { margin-top: .25rem; color: var(--neg); }
.sheet-form .fset { margin-bottom: 1.1rem; }
.sheet-form .fset--2 { margin-bottom: .75rem; }
.sheet-form .fset--2 > label, .sheet-form .fset > label { min-width: 0; }
.sheet-form fieldset.fset { padding: 0; }
.sheet-form fieldset.fset legend { margin-bottom: .45rem; }
.sheet-form .sec .sec-h { margin-bottom: 1rem; }

.more-detail { margin: .25rem 0 .5rem; }
.more-detail > summary, .tier > summary { cursor: pointer; min-height: 44px; display: flex; align-items: center;
  color: var(--muted); font-weight: 500; }
.more-detail[open] > summary { margin-bottom: .5rem; }

/* ---------- Scales on a phone: long labels get a grid instead of one cramped row ---------- */
.seg .colour-group { border: 0; }
.colour-group + .colour-group, .colour-group + [data-all-colours] { margin-top: .6rem; }
.fam-h { color: var(--muted); font: 600 .72rem var(--font); letter-spacing: .09em; text-transform: uppercase; margin: .2rem 0 .4rem; }
.segbox span { line-height: 1.2; }
@media (max-width: 759px) {
  .seg--grid { display: grid; grid-template-columns: repeat(var(--cols, 3), 1fr); gap: 1px; background: var(--hair2); }
  .seg--grid label { border-right: 0; background: var(--bg); }
  .seg--grid[style*="--cols:4"] label:last-child:nth-child(4n+3) { grid-column: span 2; }
  .seg--grid[style*="--cols:3"] label:last-child:nth-child(3n+2) { grid-column: span 2; }
  .seg--grid[style*="--cols:3"] label:last-child:nth-child(3n+1) { grid-column: span 3; }
  .seg--grid[style*="--cols:2"] label:last-child:nth-child(2n+1) { grid-column: span 2; }
  .segbox span { padding: 0 .2rem; font-size: .88rem; }
}

/* ---------- Descriptors ---------- */
.tier { border-top: 1px solid var(--hair); }
.tier:first-of-type { border-top: 0; }
.tier > summary { justify-content: space-between; color: var(--text); text-transform: uppercase;
  font: 600 .78rem var(--font); letter-spacing: .12em; }
.tier-count { color: var(--gold); font-weight: 500; letter-spacing: 0; text-transform: none; font-size: .85rem; }
.fam { margin-bottom: .9rem; }
.chip--more { border-style: dashed; }
.chip-row .chipbox[hidden] { display: none; }

/* ---------- Note ---------- */
.note-box { min-height: 9rem; line-height: 1.5; resize: vertical; width: 100%; }
.note-tools { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: .6rem; }
.note-tools .btn { min-height: 44px; }
.note-state { color: var(--gold); font-size: .85rem; }
.draft-bar { display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  background: var(--surface); border: 1px dashed var(--gold); border-radius: 12px; padding: 0 .9rem; margin: .5rem 0; font-size: .9rem; }
.draft-bar[hidden], .note-tools [hidden] { display: none; }

.viewer-actions .btn { min-height: 44px; }
.danger-zone .btn { min-height: 44px; }
.backlink { text-decoration: none; }

/* ---------- Blind mode ---------- */
.mode-pick { display: grid; gap: .75rem; margin-top: 1rem; }
.mode-card { display: block; text-decoration: none; color: var(--text); background: var(--surface);
  border: 1px solid var(--hair); border-left: 3px solid var(--gold); border-radius: 12px; padding: 1rem 1.1rem; min-height: 44px; }
.mode-card h2 { font-family: var(--font-serif); font-size: 1.6rem; font-weight: 600; margin-bottom: .2rem; }
.mode-card p { color: var(--muted); font-size: .9rem; }
.plist-title .tst-tag { vertical-align: middle; margin-left: .4rem; }

.guess-conf { margin-top: .6rem; }
.guess-conf-h { display: block; color: var(--muted); font-size: .8rem; margin-bottom: .3rem; }

.reveal-card { background: var(--surface); border: 1px solid var(--hair); border-left: 3px solid var(--gold);
  border-radius: 12px; padding: 1rem 1.1rem; margin-bottom: .75rem; }
.reveal-card p { margin-bottom: .75rem; color: var(--muted); }
.score-total { font-family: var(--font-serif); font-size: 2.2rem; font-weight: 600; line-height: 1; }
.score-total small { font: 500 .9rem var(--font); color: var(--muted); }
.guess-list { list-style: none; margin: .75rem 0 0; padding: 0; }
.guess-list li { display: grid; grid-template-columns: 5.5rem 1fr auto; gap: .15rem .75rem; align-items: baseline;
  padding: .6rem 0; border-top: 1px solid var(--hair); }
.guess-list li:first-child { border-top: 0; }
.guess-what { color: var(--muted); font-size: .85rem; }
.guess-actual { grid-column: 2 / -1; color: var(--muted); font-size: .85rem; }
.guess-conf-tag { color: var(--muted); font-size: .8rem; }
.res { font: 600 .72rem var(--font); text-transform: uppercase; letter-spacing: .06em; border-radius: 999px;
  padding: .1rem .55rem; border: 1px solid currentColor; white-space: nowrap; }
.res--correct { color: var(--pos); }
.res--close { color: var(--gold); }
.res--wrong { color: var(--neg); }
.res--unknown { color: var(--muted); }

#guesses .hint { margin-bottom: .9rem; }

/* ---------- Label photos ---------- */
.photo-row { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.photo-slot { display: flex; flex-direction: column; align-items: stretch; gap: .35rem; min-width: 0; }
.photo-thumb { display: block; width: 100%; height: 9rem; object-fit: cover; border-radius: 12px; border: 1px solid var(--hair); }
.photo-thumb[hidden], .photo-slot [hidden] { display: none; }
.photo-pick { display: flex; align-items: center; justify-content: center; min-height: 44px; cursor: pointer; text-align: center; }
.label-photos [data-read-label] { margin-top: .75rem; min-height: 44px; }
.label-photos [data-read-label][hidden] { display: none; }
.show-photos { margin: .5rem 0 1rem; }
.label-status--error { color: var(--neg); }

/* ---------- Expected profile ---------- */
.ep-meta { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .5rem; }
.cmp-summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem 1rem; margin: .5rem 0; }
.cmp-h { font: 600 .75rem var(--font); text-transform: uppercase; letter-spacing: .13em; color: var(--gold); margin: 1.25rem 0 .25rem; }
.cmp-desc { grid-template-columns: 5.5rem 1fr; }
.cmp-words { display: flex; flex-direction: column; gap: .15rem; font-size: .9rem; }
.cmp-got { color: var(--pos); }
.cmp-miss { color: var(--muted); }
.cmp-extra { color: var(--gold); }

/* ---------- Study charts ----------
   One-hue ordinal ramp in the app gold (checked with the dataviz validator against the dark surface):
   right/match is the brightest step, close the middle, wrong/off the dimmest. The counts are always
   printed beside each bar, so colour is never the only way to read it. */
.study { --bar-hit: #d9b97a; --bar-near: #a88f58; --bar-miss: #76633f; --bar-track: #2b2126; }
.segbar { display: flex; gap: 2px; height: 8px; border-radius: 999px; overflow: hidden; margin: .4rem 0 .3rem; }
.segbar-part { min-width: 3px; }
.segbar-hit { background: var(--bar-hit); }
.segbar-near { background: var(--bar-near); }
.segbar-miss { background: var(--bar-miss); }
.segbar-track { background: var(--bar-track); }
.legend { display: flex; flex-wrap: wrap; gap: .25rem 1.1rem; margin: .5rem 0 .25rem; font-size: .85rem; color: var(--muted); }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: .4rem; }
.stat-list { list-style: none; margin: .25rem 0; padding: 0; }
.stat-row { padding: .7rem 0; border-top: 1px solid var(--hair); }
.stat-row:first-child { border-top: 0; }
.stat-head { display: flex; justify-content: space-between; align-items: baseline; gap: .75rem; }
.stat-name { color: var(--text); font-weight: 600; }
.stat-fig { color: var(--gold); font: 600 1.35rem var(--font-serif); }
.stat-sub { color: var(--muted); font-size: .82rem; line-height: 1.4; }
.stat-row--thin .stat-name, .stat-row--thin .stat-fig { color: var(--muted); }
.stat-by { margin: .75rem 0 0; }
.cal-wrap { overflow-x: auto; }
.cal-table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.cal-table th, .cal-table td { text-align: left; padding: .55rem .5rem; border-top: 1px solid var(--hair); }
.cal-table thead th { border-top: 0; color: var(--muted); font-weight: 500; font-size: .8rem; }
.cal-table tbody th { font-weight: 500; color: var(--text); }
.cal-table td small { color: var(--muted); }
.cal-thin { color: var(--muted); }

/* ---------- History filters ---------- */
.filters { margin: .1rem 0 .35rem; }
.filters > summary { color: var(--muted); }
.filter-presets { margin-bottom: .75rem; }
.filter-presets .chip, .active-filters .chip { text-decoration: none; }
.filter-apply { width: 100%; min-height: 44px; }
.active-filters { margin: .1rem 0 .6rem; }

/* ---------- Sign-in pages and privacy ---------- */
.auth-page { max-width: 24rem; margin: 3rem auto 2rem; }
.auth-title { font-family: var(--font-serif); font-weight: 600; font-size: 2.3rem; line-height: 1.1; margin-bottom: .35rem; }
.auth-form { margin-top: 1rem; }
.auth-form label { display: block; margin-bottom: .9rem; }
.auth-form .btn-wide { margin-top: .5rem; }
.auth-links { margin-top: 1rem; color: var(--muted); font-size: .9rem; }
.auth-links a { color: var(--gold); }
.privacy p, .privacy ul { margin-bottom: .8rem; line-height: 1.55; }
.privacy ul { padding-left: 1.2rem; }
.privacy .cmp-h { margin-top: 1.4rem; }
.sheet-page .note + .viewer-actions { margin-top: .75rem; }