/* Wardrobe: the owned list, the wishlist, the journal (Worn), Insights (the
   coverage map, thin spots, suggestions, the style mix, starters and
   doubles), and the add, paste, add-it-yourself and How you wear sheets. */

/* ---------- Owned ---------- */

.owned .seg.wide { margin-bottom: var(--s-1); }
.owned .action-row { margin-top: var(--s-4); }
/* An empty list says so inside the card, not as a second card in it. */
/* Headings focus takes when the control it was on goes (a sheet's list
   replacing its text box, a want leaving the list): not controls, so no ring,
   as with the page's h1. */
:is(#import-title, .wishlist .section-head h2, .insights .section-head h3):focus { outline: none; }
.owned .message { max-width: none; margin: var(--s-4) 0 0; padding: var(--s-6) var(--s-2) var(--s-2); border: 0; background: none; box-shadow: none; }
.list-note { margin: var(--s-5) 0 var(--s-3); font-size: var(--fs-footnote); line-height: var(--lh-footnote); }
/* The filter sticks under the sub-navigation while the list scrolls by. */
.owned-filter {
  position: sticky;
  top: calc(var(--s-2) + var(--head-bar) + env(safe-area-inset-top));
  z-index: 5;
  margin: calc(-1 * var(--s-2)) calc(-1 * var(--s-1)) var(--s-2);
  padding: var(--s-2) var(--s-1) var(--s-1);
  border-radius: 0 0 calc(var(--r-control) + var(--s-1)) calc(var(--r-control) + var(--s-1));
  background: color-mix(in srgb, var(--surface-1) 88%, transparent);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
@media (prefers-reduced-transparency: reduce) { .owned-filter { background: var(--surface-1); } }
/* Stuck (.stuck, from the view), a band of the card's surface reaches up
   behind the sub-navigation, so the rows scrolling by don't show around the
   pill or between it and the field. */
.owned-filter::before {
  content: '';
  position: absolute;
  z-index: -1;
  left: 0;
  right: 0;
  bottom: 100%;
  height: calc(var(--head-bar) + var(--s-2) + env(safe-area-inset-top));
  background: var(--surface-1);
  opacity: 0;
  pointer-events: none;
}
.owned-filter.stuck::before { opacity: 1; }
.owned-list { margin: 0 calc(-1 * var(--s-2)); }
/* Two columns of rows once there's room, switches close to their names. */
@container page (min-width: 700px) {
  .owned-list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s-4); }
}
.rows.results, .rows.import-rows { margin-top: var(--s-3); }
.owned-tag { display: inline-flex; flex: none; align-items: center; gap: var(--s-1); padding: 0 var(--s-3); color: var(--positive); font-size: var(--fs-footnote); font-weight: 600; }
.owned-tag svg { width: 14px; height: 14px; }

/* ---------- Worn ---------- */

.journal > section { margin-top: var(--s-6); }
.journal h3 { margin-bottom: var(--s-3); font-size: var(--fs-headline); line-height: var(--lh-headline); font-weight: 600; }
.journal .journal-scope { margin: calc(-1 * var(--s-2)) 0 var(--s-3); }
.stat-tiles { display: grid; grid-template-columns: 1fr 1fr 2.2fr; gap: var(--s-2); }
.stat {
  display: grid;
  align-content: center;
  gap: var(--s-0);
  min-width: 0;
  padding: var(--s-3);
  border-radius: var(--r-inset);
  border: 1px solid var(--border-subtle);
  background: var(--surface-2);
}
.stat > b { font-family: var(--display); font-size: var(--fs-title-2); font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; }
.stat > span { color: var(--text-secondary); font-size: var(--fs-caption); line-height: var(--lh-caption); }
.stat.wide { grid-template-columns: 30px 1fr; align-items: center; gap: var(--s-3); }
.stat.wide img { width: 30px; height: 36px; object-fit: contain; }
.stat.wide > span { display: grid; min-width: 0; }
/* A long name takes a second line rather than losing its end. */
.stat .name { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; font-size: var(--fs-footnote); line-height: var(--lh-footnote); font-weight: 600; }
.stat.wide > span > span { color: var(--text-secondary); font-size: var(--fs-caption); line-height: var(--lh-caption); }

/* minmax(0, …): a column narrower than its label shrinks, never the page wider. */
.calendar { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--s-1); }
.cal-dow { padding-bottom: var(--s-0); color: var(--text-tertiary); font-size: var(--fs-caption); line-height: var(--lh-caption); font-weight: 600; text-align: center; }
.cal-cell {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr;
  aspect-ratio: 1 / 1.05;
  padding: var(--s-1);
  border-radius: var(--r-thumb);
  background: var(--fill-faint);
}
.cal-cell small { overflow: hidden; color: var(--text-tertiary); font-size: var(--fs-caption); font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cal-cell.has { background: color-mix(in srgb, var(--positive) 7%, var(--surface-2)); }
.cal-cell.has small { color: var(--text-secondary); }
.cal-cell.today { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--accent) 70%, transparent); }
.cal-cell.today small { color: var(--accent); }
.cal-cell.future { background: transparent; box-shadow: inset 0 0 0 1px var(--border-subtle); }
.cal-bottles { display: flex; justify-content: center; align-items: flex-end; min-height: 0; }
.cal-bottles img { width: 60%; max-width: 30px; height: auto; max-height: 100%; object-fit: contain; }
.cal-bottles img + img { margin-left: -18%; }
/* Under a 360px phone (a 328px column) the 1st says its month alone ("Oct"),
   in tighter cells. */
@container page (max-width: 327px) {
  .calendar { gap: var(--s-0); }
  .cal-cell { padding: var(--s-0); }
  .cal-cell.first .cal-day { display: none; }
}

.rank-list { display: grid; gap: var(--s-1); }
.rank-list li { display: grid; grid-template-columns: 30px minmax(0, 1.1fr) minmax(40px, 1fr) 28px; align-items: center; gap: var(--s-3); padding: var(--s-1) var(--s-0); }
.rank-list img { width: 30px; height: 34px; object-fit: contain; }
.rank-bar { height: 6px; overflow: hidden; border-radius: var(--r-pill); background: var(--fill); }
.rank-bar span { display: block; height: 100%; border-radius: var(--r-pill); background: linear-gradient(90deg, color-mix(in srgb, var(--ambient) 55%, transparent), var(--ambient)); }
.rank-n { color: var(--text-secondary); font-size: var(--fs-footnote); font-variant-numeric: tabular-nums; text-align: right; }

/* A row's tiles as tall as its tallest (a name on two lines). */
.dust-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2); }
.dust-list li { display: grid; }
.dust-list button { display: grid; grid-template-columns: 28px 1fr; align-items: center; gap: var(--s-2); width: 100%; min-height: 48px; padding: var(--s-1) var(--s-2); border-radius: var(--r-control); border: 1px solid var(--border-subtle); background: var(--surface-2); text-align: left; transition: transform var(--dur-1) var(--ease-out), background-color var(--dur-2), border-color var(--dur-2); }
.dust-list button:active { transform: scale(0.97); }
@media (hover: hover) { .dust-list button:hover { border-color: var(--border-strong); background: var(--surface-3); } }
.dust-list img { width: 28px; height: 32px; object-fit: contain; }
.dust-list span { display: grid; min-width: 0; }
.dust-list b { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; font-size: var(--fs-footnote); line-height: var(--lh-footnote); font-weight: 600; }
.dust-list small { overflow: hidden; color: var(--text-tertiary); font-size: var(--fs-caption); line-height: var(--lh-caption); text-overflow: ellipsis; white-space: nowrap; }
@container page (min-width: 600px) { .dust-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* Under a 360px phone two columns would cut a long word ("Sandalwood"). */
@container page (max-width: 327px) { .dust-list { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Paste a list ---------- */

.import-form { display: grid; gap: var(--s-3); }
.import-form textarea {
  width: 100%;
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-control);
  border: 1px solid var(--border-strong);
  background: var(--surface-2);
  color: var(--text-primary);
  font-size: var(--fs-headline);
  line-height: var(--lh-body);
  resize: vertical;
  outline: none;
}
.import-form textarea:focus { border-color: color-mix(in srgb, var(--accent) 60%, transparent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent); }
.import-rows .pending .spinner { margin: 0 var(--s-2); }

/* ---------- Add it yourself ---------- */

.custom-form fieldset { margin: var(--s-5) 0 0; padding: 0; border: 0; }
.custom-form legend { display: flex; justify-content: space-between; gap: var(--s-3); width: 100%; margin-bottom: var(--s-2); color: var(--text-secondary); font-size: var(--fs-footnote); line-height: var(--lh-footnote); }
.custom-form legend span { color: var(--text-tertiary); font-variant-numeric: tabular-nums; }
.custom-form .name-field { margin: var(--s-3) 0 0; }
.custom-form .error { margin-top: var(--s-4); }
/* By its field: under the name, or between the accords' legend and chips. */
.custom-form .name-field + .error { margin-top: var(--s-2); }
.custom-form legend + .error { margin: 0 0 var(--s-2); }
.custom-form input[aria-invalid='true'] { border-color: var(--negative); }
.pick-chips { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.pick-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 36px;
  padding: 0 var(--s-3);
  border-radius: var(--r-pill);
  border: 1px solid var(--border-strong);
  color: var(--text-secondary);
  font-size: var(--fs-footnote);
}
.pick-chip::after { content: ''; order: -1; flex: none; width: 8px; height: 8px; border-radius: var(--r-round); background: var(--c); }
.pick-chip.on {
  border-color: color-mix(in srgb, var(--c) 60%, transparent);
  background: color-mix(in srgb, var(--c) 20%, transparent);
  color: color-mix(in srgb, var(--c) 45%, var(--paper));
}
.pick-chip.on::after { display: none; }
.pick-chip b { display: grid; place-items: center; width: 18px; height: 18px; border-radius: var(--r-round); background: var(--c); color: var(--surface-0); font-size: var(--fs-caption); font-weight: 600; }
.pick-chip:disabled { opacity: 0.35; }
@media (hover: hover) { .pick-chip:hover:not(:disabled):not(.on) { color: var(--text-primary); border-color: color-mix(in srgb, var(--text-primary) 22%, transparent); } }
.when { display: grid; justify-items: start; gap: var(--s-2); }
.when .seg { flex-wrap: wrap; }
.when .seg button { padding: 0 var(--s-3); }

/* ---------- Shared by Insights and the Wishlist ---------- */

/* A buy-check verdict: its own glyph and word, tinted by how good it is. */
.verdict {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: var(--s-1);
  padding: var(--s-0) var(--s-2) var(--s-0) var(--s-1);
  border-radius: var(--r-pill);
  border: 1px solid var(--border-strong);
  color: var(--text-secondary);
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  font-weight: 600;
  white-space: nowrap;
}
.verdict svg { width: 14px; height: 14px; flex: none; }
.verdict .v-cut { stroke: var(--surface-1); }
.verdict:is([data-kind='strong'], [data-kind='good']) { border-color: color-mix(in srgb, var(--positive) 40%, transparent); color: var(--positive); }
.verdict[data-kind='strong'] { background: color-mix(in srgb, var(--positive) 12%, transparent); }
.verdict[data-kind='risky'] { border-color: color-mix(in srgb, var(--negative) 45%, transparent); color: var(--negative); }

/* The kit's Want heart (gold once wanted, as on every screen), ghosted in
   rows: neutral at rest and on hover, not the remove button's red. */
.icon-btn.ghosted.want-btn { color: var(--text-secondary); }
@media (hover: hover) { .icon-btn.ghosted.want-btn:hover { color: var(--text-primary); } .icon-btn.ghosted.want-btn:hover::after { background: var(--fill); } }
.icon-btn.ghosted.want-btn[aria-pressed='true'] { color: var(--accent); }

/* A fill: where, the match it would have, the bottle it beats, and the two
   as a dumbbell on a 60–100% track (a ring for your best now, a dot for it). */
.fills { display: grid; gap: var(--s-3); max-width: 520px; margin-top: var(--s-3); }
.fill { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 0 var(--s-2); }
.fill-place { font-size: var(--fs-footnote); line-height: var(--lh-footnote); font-weight: 600; }
.fill-pct { font-size: var(--fs-footnote); line-height: var(--lh-footnote); font-variant-numeric: tabular-nums; }
.fill-vs { grid-column: 1 / -1; color: var(--text-tertiary); font-size: var(--fs-caption); line-height: var(--lh-caption); }
.dumbbell { position: relative; grid-column: 1 / -1; height: 10px; margin-top: var(--s-1); }
.dumbbell::before { content: ''; position: absolute; left: 0; right: 0; top: 4px; height: 2px; border-radius: var(--r-pill); background: var(--fill); }
.db-span { position: absolute; top: 4px; height: 2px; background: color-mix(in srgb, var(--ambient) 70%, transparent); }
.db-from, .db-to { position: absolute; top: 1px; width: 8px; height: 8px; margin-left: -4px; border-radius: var(--r-round); }
.db-from { background: var(--surface-1); box-shadow: inset 0 0 0 1.5px var(--text-tertiary); }
.db-to { background: var(--ambient); box-shadow: 0 0 0 2px var(--surface-1); }
.fills-more { margin-top: var(--s-2); }

/* Loading lines for lists of bottles. */
.sk-rows .row { gap: var(--s-3); padding-left: var(--s-2); }
.sk-dot { width: 34px; height: 38px; flex: none; }
.sk-pill { display: inline-block; flex: none; width: 76px; height: 20px; border-radius: var(--r-pill); }
.sk-switch { display: inline-block; flex: none; width: 44px; height: 26px; border-radius: var(--r-pill); }

/* ---------- Insights ---------- */

.insights { display: grid; gap: var(--s-4); }
@container page (min-width: 600px) { .insights { gap: var(--s-5); } }
.insights.busy :is(.ins-cov, .ins-thin, .ins-fill) { opacity: 0.55; transition: opacity var(--dur-3); }
.ins-top, .ins-part { padding: var(--s-2) var(--s-1) 0; }
.ins-part { margin-top: var(--s-6); }
.ins-headline { font-family: var(--display); font-size: var(--fs-title-2); line-height: var(--lh-title-2); font-weight: 600; letter-spacing: -0.01em; text-wrap: balance; }
.ins-sub { margin-top: var(--s-1); color: var(--text-secondary); font-size: var(--fs-headline); line-height: var(--lh-headline); }
.ins-context { display: grid; gap: var(--s-3); margin-top: var(--s-4); }
.ins-climate { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-2); color: var(--text-secondary); font-size: var(--fs-footnote); line-height: var(--lh-footnote); }
.ins-climate > svg { width: 16px; height: 16px; flex: none; color: var(--ambient); }
.ins-climate b { color: var(--text-primary); font-weight: 600; }
.ins-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2) var(--s-4); }
.ins-switch { display: inline-flex; align-items: center; gap: var(--s-3); color: var(--text-secondary); font-size: var(--fs-footnote); line-height: var(--lh-footnote); }
.ins-switch .switch { margin-right: 0; }
.ins-tuned { margin-top: 0; }
.ins-subhead { margin: var(--s-6) 0 var(--s-2); font-size: var(--fs-headline); line-height: var(--lh-headline); font-weight: 600; }
.ins-error .message { padding: var(--s-5) var(--s-3); border: 0; background: none; box-shadow: none; }
.ins-empty-line { padding: var(--s-1) 0; }
.ins-failed .link-btn { color: var(--text-primary); }

/* The vial: a situation's coverage as a fill level, one sky hue darker as it
   fills, so it reads by shape as much as shade. One that falls short has a
   coral rim and a mark at its top (what the top bottles there average), filled
   as near as your best comes (--lvl, set inline; empty only when nothing
   fits); Never is struck through; a cell that rarely comes up has a dashed
   rim. The rim and the thinnest fill clear 3:1 on the card in both themes. */
.vial {
  --lvl: 0;
  --liquid: var(--ambient);
  position: relative;
  display: block;
  flex: none;
  width: 22px;
  height: 28px;
  overflow: hidden;
  border-radius: 7px 7px 8px 8px;
  border: 1.5px solid color-mix(in srgb, var(--ambient) 62%, transparent);
  background: var(--fill-faint);
}
.vial-fill {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: calc(var(--lvl) * 100%);
  background: var(--liquid);
  box-shadow: inset 0 2px 0 color-mix(in srgb, var(--paper) 30%, transparent);
  transform-origin: bottom;
}
.vial[data-status='plenty'] { --lvl: 1; border-color: color-mix(in srgb, var(--ambient) 80%, transparent); }
.vial[data-status='covered'] { --lvl: 0.75; --liquid: color-mix(in srgb, var(--ambient) 80%, transparent); }
.vial[data-status='room'] { --lvl: 0.58; --liquid: color-mix(in srgb, var(--ambient) 66%, transparent); }
.vial[data-status='thin'] { --lvl: 0.42; --liquid: color-mix(in srgb, var(--ambient) 58%, transparent); }
.vial[data-status='gap'] { --lvl: 0.24; --liquid: color-mix(in srgb, var(--ambient) 50%, transparent); border-color: var(--negative); background: color-mix(in srgb, var(--negative) 12%, transparent); }
.vial[data-status='gap']::after { content: ''; position: absolute; left: 50%; top: 4px; width: 8px; height: 2px; margin-left: -4px; border-radius: var(--r-pill); background: var(--negative); }
.vial[data-status='off'] { border-color: var(--border-strong); background: none; }
.vial[data-status='off']::after { content: ''; position: absolute; left: -4px; right: -4px; top: 50%; height: 1.5px; background: var(--border-strong); transform: rotate(-52deg); }
.vial.rare { border-style: dashed; }
.cov.fill-in .vial-fill { animation: rise 0.7s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 10ms); }
@keyframes rise { from { transform: scaleY(0); } }

/* The coverage map: a table, one slot at a time under 740px of column
   (the Day / Night toggle), both side by side from there, where every cell
   (the first night one too, past its gap) is still 44px wide. */
.cov-toggle { margin-bottom: var(--s-3); }
.cov-table { width: 100%; border-collapse: separate; border-spacing: 2px; table-layout: fixed; }
.cov-table col.cov-use { width: 92px; }
.cov-table th { font-weight: 600; }
.cov-table th[scope='row'] { overflow: hidden; padding-right: var(--s-2); color: var(--text-secondary); font-size: var(--fs-footnote); line-height: var(--lh-footnote); font-weight: 500; text-align: left; text-overflow: ellipsis; white-space: nowrap; }
.cov-table th[scope='row'] small { display: block; color: var(--text-tertiary); font-size: var(--fs-caption); line-height: var(--lh-caption); }
.cov-bands th { padding-bottom: var(--s-1); vertical-align: top; color: var(--text-secondary); font-size: var(--fs-caption); line-height: var(--lh-caption); text-align: center; }
/* The ranges are the bands' only legend: never below the caption size, and
   on two lines ("40–" / "58°") in a column too narrow for one, never cut. */
.cov-bands th small { display: block; color: var(--text-tertiary); font-size: var(--fs-caption); line-height: var(--lh-caption); font-weight: 400; font-variant-numeric: tabular-nums; }
.cov-slots th { padding-bottom: var(--s-2); color: var(--text-primary); font-size: var(--fs-footnote); line-height: var(--lh-footnote); text-align: left; }
.cov-slots th svg { display: inline-block; width: 14px; height: 14px; margin-right: var(--s-1); vertical-align: -2px; color: var(--ambient); }
.cov-table td { padding: 0; text-align: center; }
.cov-cell { position: relative; display: grid; place-items: center; width: 100%; min-height: var(--hit); border-radius: var(--r-thumb); transition: background-color var(--dur-2); }
@media (hover: hover) { .cov-cell:hover { background: var(--fill); } }
/* The open cell: a gold tint and a bar under its vial. Keyboard focus is the
   ring around it (base.css), so the two never look alike. */
.cov-cell[aria-pressed='true'] { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.cov-cell[aria-pressed='true']::after { content: ''; position: absolute; left: 50%; bottom: 2px; width: 16px; height: 3px; margin-left: -8px; border-radius: var(--r-pill); background: var(--accent); }
.cov-na { display: block; width: 4px; height: 4px; margin: auto; border-radius: var(--r-round); background: var(--fill-strong); }
@container page (max-width: 739px) {
  .cov-slots { display: none; }
  .cov[data-show='day'] [data-slot='night'], .cov[data-show='night'] [data-slot='day'] { display: none; }
  .cov[data-show='day'] tr.only-night, .cov[data-show='night'] tr.only-day { display: none; }
}
/* A 320px phone gives the bands the room the uses' names don't need. */
@container page (max-width: 327px) { .cov-table col.cov-use { width: 80px; } }
@container page (min-width: 740px) {
  .cov-toggle { display: none; }
  .cov-table col.cov-use { width: 112px; }
  .cov-table .edge { padding-left: var(--s-3); }
}
.cov-legend { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); margin-top: var(--s-4); }
.cov-legend li { display: flex; align-items: center; gap: var(--s-2); color: var(--text-secondary); font-size: var(--fs-caption); line-height: var(--lh-caption); }
.cov-legend .vial { width: 12px; height: 16px; border-width: 1px; border-radius: 4px; }
.cov-legend .vial[data-status='gap']::after { top: 2px; width: 6px; margin-left: -3px; height: 1.5px; }
.cov-legend .cov-na { margin: 0 var(--s-1); }
.cov-note { margin-top: var(--s-2); }

.cov-detail { margin-top: var(--s-4); padding: var(--s-4); border-radius: var(--r-inset); border: 1px solid var(--border-subtle); background: var(--surface-2); }
.cov-detail-head { display: flex; align-items: center; gap: var(--s-3); margin-bottom: var(--s-1); scroll-margin-bottom: calc(var(--s-10) + var(--s-6)); }
.cov-detail-head h4 { flex: 1; min-width: 0; font-size: var(--fs-headline); line-height: var(--lh-headline); font-weight: 600; }
.cov-detail-head h4:focus { outline: none; }
.cov-detail > .muted.small { margin-top: 0; }
.cov-sub { margin: var(--s-4) 0 var(--s-1); color: var(--text-tertiary); font-size: var(--fs-caption); line-height: var(--lh-caption); font-weight: 600; }
.cov-best { display: grid; gap: var(--s-0); margin: 0 calc(-1 * var(--s-2)); }
.cov-bottle { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: var(--s-3); width: 100%; min-height: var(--hit); padding: 0 var(--s-2); border-radius: var(--r-control); text-align: left; }
@media (hover: hover) { .cov-bottle:hover { background: var(--fill-faint); } }
.cov-bottle img { width: 28px; height: 32px; object-fit: contain; }
.cov-bottle span { overflow: hidden; font-size: var(--fs-footnote); line-height: var(--lh-footnote); text-overflow: ellipsis; white-space: nowrap; }
.cov-bottle b { font-size: var(--fs-footnote); font-variant-numeric: tabular-nums; }
.cov-none { margin-top: var(--s-3); }
.status-word {
  display: inline-block;
  flex: none;
  padding: 0 var(--s-2);
  border-radius: var(--r-pill);
  border: 1px solid var(--border-strong);
  color: var(--text-secondary);
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  font-weight: 600;
  white-space: nowrap;
}
.status-word[data-status='gap'] { border-color: color-mix(in srgb, var(--negative) 45%, transparent); color: var(--negative); }
.status-word:is([data-status='plenty'], [data-status='covered']) { border-color: color-mix(in srgb, var(--ambient) 45%, transparent); color: var(--ambient); }

/* Where it's thin, and where it's strong. */
.thin-list, .strong-list { display: grid; }
.thin-row, .strong-row { display: grid; grid-template-columns: 22px minmax(0, 1fr); align-items: start; gap: var(--s-3); padding: var(--s-3) 0; border-top: 1px solid var(--border-subtle); }
.thin-row:first-child, .strong-row:first-child { border-top: 0; padding-top: var(--s-1); }
.thin-row .vial, .strong-row .vial { margin-top: var(--s-0); }
.thin-count { margin: 0 0 var(--s-2); }
.thin-text h4 { font-size: var(--fs-body); line-height: var(--lh-body); font-weight: 600; }
.thin-title { position: relative; text-align: left; text-decoration: underline transparent; text-underline-offset: 3px; transition: text-decoration-color var(--dur-2); }
.thin-title::before { content: ''; position: absolute; inset: min(0px, calc(50% - var(--hit) / 2)) 0; }
@media (hover: hover) { .thin-title:hover { text-decoration-color: color-mix(in srgb, var(--text-primary) 40%, transparent); } }
.thin-text p { margin-top: var(--s-1); color: var(--text-secondary); font-size: var(--fs-footnote); line-height: var(--lh-footnote); }
.thin-text p .status-word { margin-right: var(--s-1); }
.thin-fix .link-btn { color: var(--text-primary); }
.strong-row .vial { width: 16px; height: 20px; border-radius: 5px 5px 6px 6px; margin-left: 3px; }
.strong-row div { display: grid; }
.ins-thin .mix-all { margin-top: var(--s-1); }
.strong-row b { font-size: var(--fs-footnote); line-height: var(--lh-footnote); font-weight: 600; }
.strong-row span { color: var(--text-secondary); font-size: var(--fs-footnote); line-height: var(--lh-footnote); }

/* The bottles that would fill the gaps: each stands on a shelf line. */
.ins-fill > .section-head { padding: 0 var(--s-1); }
.ins-picks { display: grid; gap: var(--s-3); }
@container page (min-width: 680px) { .ins-picks { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ins-pick {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  align-items: start;
  gap: var(--s-4);
  padding: var(--s-4);
  border-radius: var(--r-surface);
  border: 1px solid var(--border-subtle);
  background: linear-gradient(180deg, var(--fill-faint), transparent 120px), var(--surface-1);
  box-shadow: var(--e1);
}
.ins-pick-photo { display: grid; place-items: end center; height: 92px; padding-bottom: var(--s-1); border-bottom: 1px solid var(--border-strong); }
.ins-pick-photo img { width: 60px; height: 80px; object-fit: contain; filter: var(--drop-small); transition: transform var(--dur-3) var(--ease-out); }
@media (hover: hover) { .ins-pick-photo:hover img { transform: translateY(-3px); } }
/* Two columns of cards line their actions up along the bottom. */
.ins-pick-body { display: flex; flex-direction: column; align-self: stretch; min-width: 0; }
.ins-pick-name { font-family: var(--display); font-size: var(--fs-title-3); line-height: var(--lh-title-3); font-style: italic; font-weight: 600; letter-spacing: -0.01em; }
.ins-pick-brand { color: var(--text-secondary); font-size: var(--fs-footnote); line-height: var(--lh-footnote); }
.ins-facts { margin-top: var(--s-2); color: var(--text-secondary); font-size: var(--fs-footnote); line-height: var(--lh-footnote); }
.ins-facts b { color: var(--text-primary); font-weight: 500; }
.ins-facts :is(b, span) { white-space: nowrap; }
.ins-near, .ins-twin { margin-top: var(--s-3); }
.ins-twin { color: var(--text-secondary); font-size: var(--fs-footnote); line-height: var(--lh-footnote); }
.ins-pick .action-row { margin-top: auto; padding-top: var(--s-4); }
.ins-fill > .muted { padding: var(--s-3) var(--s-1) 0; }

/* The style mix: one bar per style, the liked ones in full sky, each with a
   Like toggle (a plus, a check and the sky once liked). */
.mix-key { margin: 0 0 var(--s-2); }
.mix { display: grid; max-width: 680px; margin: 0 calc(-1 * var(--s-2)); }
.mix-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: var(--s-1); }
.mix-main { display: grid; grid-template-columns: 104px minmax(0, 1fr) 24px; align-items: center; gap: var(--s-3); min-height: var(--hit); padding: 0 var(--s-2); border-radius: var(--r-control); text-align: left; }
@media (hover: hover) { .mix-main:hover { background: var(--fill-faint); } }
.mix-label { overflow: hidden; color: var(--text-secondary); font-size: var(--fs-footnote); line-height: var(--lh-footnote); text-overflow: ellipsis; white-space: nowrap; }
.mix-label small { display: block; color: var(--text-tertiary); font-size: var(--fs-caption); line-height: var(--lh-caption); }
.mix-row.liked .mix-label { color: var(--text-primary); font-weight: 600; }
.mix-track { display: block; }
/* Mixed with the card, not see-through: 3:1 against it in both themes. */
.mix-bar { display: block; height: 8px; min-width: 4px; border-radius: 0 4px 4px 0; background: color-mix(in srgb, var(--ambient) 62%, var(--surface-1)); }
.mix-row.liked .mix-bar { background: var(--ambient); }
.mix-n { font-size: var(--fs-footnote); line-height: var(--lh-footnote); font-variant-numeric: tabular-nums; text-align: right; }
.mix-like {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  min-width: 72px;
  min-height: 32px;
  margin-right: var(--s-2);
  padding: 0 var(--s-3) 0 var(--s-2);
  border-radius: var(--r-pill);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  font-weight: 600;
  transition: background-color var(--dur-2), border-color var(--dur-2), color var(--dur-2);
}
.mix-like::before { content: ''; position: absolute; inset: min(0px, calc(50% - var(--hit) / 2)) 0; }
.mix-like svg { width: 14px; height: 14px; flex: none; }
.mix-like[aria-pressed='true'] { border-color: color-mix(in srgb, var(--ambient) 55%, transparent); background: color-mix(in srgb, var(--ambient) 14%, transparent); color: var(--text-primary); }
.mix-like[aria-pressed='true'] svg { color: var(--ambient); }
@media (hover: hover) { .mix-like:hover { border-color: var(--border-strong); color: var(--text-primary); } }
.mix-bottles { display: flex; flex-wrap: wrap; grid-column: 1 / -1; gap: var(--s-2); padding: var(--s-1) var(--s-2) var(--s-3); }
.mix-bottles button { display: flex; align-items: center; gap: var(--s-2); min-height: var(--hit); padding: 0 var(--s-3) 0 var(--s-1); border-radius: var(--r-pill); border: 1px solid var(--border-subtle); background: var(--surface-2); font-size: var(--fs-footnote); }
@media (hover: hover) { .mix-bottles button:hover { border-color: var(--border-strong); } }
.mix-bottles img { width: 24px; height: 30px; object-fit: contain; }
.mix-none { grid-column: 1 / -1; padding: 0 var(--s-2) var(--s-3); }
@container page (min-width: 600px) { .mix-main { grid-template-columns: 148px minmax(0, 1fr) 28px; } }

/* More of what you like, and starters for the styles you don't own. From
   1000px of page (the full content column on desktop) the mix and More
   stand side by side. */
.ins-styles { display: grid; gap: var(--s-4); }
@container page (min-width: 600px) { .ins-styles { gap: var(--s-5); } }
@container page (min-width: 1000px) {
  .ins-styles { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .ins-styles > :is(.ins-start, .ins-doubles) { grid-column: 1 / -1; }
  .ins-mix .mix-main { grid-template-columns: 104px minmax(0, 1fr) 20px; gap: var(--s-2); }
}
/* The cards' heads are h3s here (each half has an h2). */
.insights .section-head h3 { font-family: var(--display); font-size: var(--fs-title-3); line-height: var(--lh-title-3); font-weight: 600; letter-spacing: -0.01em; }
.ins-more + .ins-more { margin-top: var(--s-4); padding-top: var(--s-4); border-top: 1px solid var(--border-subtle); }
@container page (min-width: 680px) and (max-width: 999px) {
  .ins-more-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5) var(--s-6); }
  .ins-more + .ins-more { margin-top: 0; padding-top: 0; border-top: 0; }
}
.ins-more-head { font-size: var(--fs-headline); line-height: var(--lh-headline); font-weight: 600; }
.more-rows, .starter-rows { margin: var(--s-1) calc(-1 * var(--s-2)) 0; }
.more-rows .row-text b, .starter-rows .row-text b { font-family: var(--display); font-style: italic; letter-spacing: -0.005em; }
/* The brand, rating and value wrap rather than cut off mid-word. */
.more-rows .row-text small, .starter-rows .row-text small { white-space: normal; }
.more-rows .row-text small > span, .starter-rows .row-text small > span { white-space: nowrap; }
.ins-value-note { margin-top: var(--s-3); }
.ins-value-note .link-btn { color: var(--text-primary); }
.more-link { margin-top: var(--s-4); }
.mix-all { margin: var(--s-2) 0 0 calc(-1 * var(--s-2)); }
.mix-all svg { transform: rotate(90deg); }
.mix-all.less svg { transform: rotate(-90deg); }
.starters { display: grid; gap: var(--s-3); }
@container page (min-width: 600px) { .starters { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.starter { display: grid; align-content: start; gap: var(--s-1); padding: var(--s-3) var(--s-4) var(--s-2); border-radius: var(--r-inset); border: 1px solid var(--border-subtle); background: var(--surface-2); box-shadow: var(--e2); }
.starter-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); }
.starter-head h4 { font-family: var(--display); font-size: var(--fs-title-3); line-height: var(--lh-title-3); font-weight: 600; }
.starter-head .btn.tertiary { flex: none; margin-right: calc(-1 * var(--s-2)); }
.starter > .muted.small { margin-top: 0; }
.starter-none { padding: var(--s-2) 0; }

/* Doubles: the pair's photos side by side. */
.doubles { display: grid; gap: var(--s-1); margin-top: var(--s-2); }
.double { display: flex; align-items: center; gap: var(--s-3); min-height: 56px; }
.double-photos { display: flex; flex: none; }
.double-photos button { display: grid; place-items: center; width: 40px; height: 48px; border-radius: var(--r-thumb); }
.double-photos button + button { margin-left: calc(-1 * var(--s-3)); }
.double-photos img { width: 32px; height: 40px; object-fit: contain; filter: var(--drop-small); }
.double-text { display: grid; min-width: 0; }
.double-text b { font-size: var(--fs-footnote); line-height: var(--lh-footnote); font-weight: 600; }
.double-text small { color: var(--text-secondary); font-size: var(--fs-caption); line-height: var(--lh-caption); }

/* While the library loads: the map in outline. */
.sk-head { height: 22px; margin-bottom: var(--s-3); }
.ins-top .sk-line { display: block; }
/* Shaped like the table (.cov-table): a vial per cell, 5 bands of one slot
   under 740px of page, both slots' 10 from there, past the uses' column. */
.sk-cov { display: grid; gap: var(--s-4); }
/* The top padding stands in for the Day / Night toggle and the bands' heads. */
.sk-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 2px; padding: 116px 0 0 94px; }
.sk-grid .sk-vial { justify-self: center; width: 22px; height: 28px; margin: var(--s-2) 0; border-radius: 7px 7px 8px 8px; }
.sk-grid .sk-vial:nth-child(n + 41) { display: none; }
@container page (max-width: 327px) { .sk-grid { padding-left: 82px; } }
@container page (min-width: 740px) {
  .sk-grid { grid-template-columns: repeat(10, minmax(0, 1fr)); padding: 76px 0 0 114px; }
  .sk-grid .sk-vial:nth-child(n + 41) { display: block; }
}

/* How you wear (sheet). */
.uses { display: grid; margin-top: var(--s-2); }
.use-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2) var(--s-3); min-height: 56px; padding: var(--s-2) 0; border-top: 1px solid var(--border-subtle); }
.use-row:first-child { border-top: 0; }
.use-row > span:first-child { flex: 1 1 88px; font-weight: 500; }
.use-row .muted.small { margin-top: 0; }
.use-row .seg button { padding: 0 var(--s-3); font-size: var(--fs-footnote); }
/* A radio group drawn as segments: the chosen one lit as a pressed segment. */
.use-row .seg button[aria-checked='true'] {
  background: var(--surface-3);
  color: var(--text-primary);
  box-shadow: inset 0 0 0 1px var(--border-strong), 0 2px 8px rgb(var(--shade) / 0.25);
}

/* ---------- Wishlist ---------- */

.wish-status { margin: 0 0 var(--s-1); }
.wishes { display: grid; transition: opacity var(--dur-3); }
.wish { display: grid; grid-template-columns: 56px minmax(0, 1fr); align-items: start; gap: var(--s-4); padding: var(--s-4) 0; border-top: 1px solid var(--border-subtle); }
.wish:first-child { border-top: 0; }
.wish-photo { display: grid; place-items: end center; height: 76px; padding-bottom: var(--s-1); border-bottom: 1px solid var(--border-strong); }
.wish-photo img { width: 52px; height: 66px; object-fit: contain; filter: var(--drop-small); }
.wish-body { min-width: 0; }
.wish-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-3); }
.wish-head :is(.verdict, .sk-pill, .owned-tag) { margin-top: var(--s-1); }
.wish-head .owned-tag { padding: 0; }
.wish-name { min-width: 0; font-family: var(--display); font-size: var(--fs-title-3); line-height: var(--lh-title-3); font-style: italic; font-weight: 600; letter-spacing: -0.01em; }
.wish-name .sk-line { display: block; height: 20px; margin-top: var(--s-1); }
.wish-stand { display: block; color: var(--text-secondary); font-family: var(--sans); font-size: var(--fs-body); line-height: var(--lh-body); font-style: normal; font-weight: 500; letter-spacing: 0; }
.wish-meta { color: var(--text-secondary); font-size: var(--fs-footnote); line-height: var(--lh-footnote); }
.wish-note { margin-top: var(--s-2); font-size: var(--fs-footnote); line-height: var(--lh-footnote); font-style: italic; }
.wish-reasons { display: grid; gap: var(--s-1); margin-top: var(--s-3); font-size: var(--fs-footnote); line-height: var(--lh-footnote); }
.wish-reasons li:not(:first-child) { color: var(--text-secondary); }
.wish-label { margin-top: var(--s-3); color: var(--text-tertiary); font-size: var(--fs-caption); line-height: var(--lh-caption); font-weight: 600; }
.wish-label + .fills { margin-top: var(--s-2); }
.wish-today { display: flex; align-items: center; gap: var(--s-1); margin-top: var(--s-3); color: var(--text-secondary); font-size: var(--fs-footnote); line-height: var(--lh-footnote); }
.wish .action-row { margin-top: var(--s-3); }
.wish .btn:disabled { opacity: 0.45; }
@container page (min-width: 600px) {
  .wish { grid-template-columns: 72px minmax(0, 1fr); gap: var(--s-5); }
  .wish-photo { height: 92px; }
  .wish-photo img { width: 64px; height: 80px; }
}

@media (forced-colors: active) {
  .vial, .cov-cell[aria-pressed='true'] { border: 1px solid CanvasText; }
  .vial-fill, .mix-bar, .db-to, .db-span { forced-color-adjust: none; background: CanvasText; }
  .vial[data-status='gap'] { border: 2px solid Highlight; }
  .vial.rare { border-style: dashed; }
  .mix-like[aria-pressed='true'] { border: 2px solid Highlight; }
  .cov-cell[aria-pressed='true'] { outline: 2px solid Highlight; }
  .use-row .seg button[aria-checked='true'] { outline: 2px solid Highlight; outline-offset: -2px; }
}