/* The whisky ledger at /whisky/. Tokens come from theme.css; nothing here
   sets a colour that is not a --color-* / --grad-* token. */

.page { padding-bottom: 64px;
        background: radial-gradient(130% 70% at 10% -12%,
                    color-mix(in srgb, var(--color-accent) 14%, transparent) 0%, transparent 62%); }
.wrap { max-width: var(--shell-max); margin: 0 auto; padding: 0 28px; }
.toolbar { display: flex; align-items: center; gap: 16px; margin-top: 24px; padding: 10px 16px 10px 20px;
           background: var(--color-surface); border-radius: 999px; box-shadow: var(--shadow-sm); }
.kick { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-neutral-500); }
.rule { height: 26px; background: none; }
.hero { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 32px; margin-bottom: 30px; }
.hero h1 { font-size: 44px; font-weight: 500; margin: 0 0 8px; letter-spacing: -0.02em; }
.hero p { margin: 0; max-width: 46ch; font-size: 14px; color: var(--color-neutral-400); }
.stats { display: flex; gap: 34px; padding-bottom: 4px; }
.stat-n { font-family: var(--font-heading); font-size: 30px; line-height: 1; }
.stat-l { font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-neutral-500); margin-top: 6px; }
.cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr)); gap: 30px; align-items: start; }
.col { min-width: 0; }
.lbl { font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-neutral-500); }
.shelf { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 12px; margin: 9px 0 14px; }
.tile { width: 92px; flex: none; }
.tile .shot { height: 116px; overflow: hidden; border-radius: var(--radius-sm); background: var(--color-neutral-900);
              display: flex; align-items: center; justify-content: center; box-shadow: inset 0 0 0 1px var(--color-divider); }
.tile .shot img { width: 100%; height: 100%; object-fit: cover; }
.tile .shot .ph { font-size: 20px; color: var(--color-neutral-700); }
.tile button { display: block; width: 100%; margin-top: 6px; padding: 0; text-align: left; cursor: pointer;
               background: transparent; border: 0; font-family: var(--font-heading); font-size: 11.5px; line-height: 1.3;
               color: var(--color-neutral-400); }
.tile.on .shot { box-shadow: inset 0 0 0 1px var(--color-accent); }
.tile.on button { color: var(--color-accent); }
.chiprow { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 4px; }
.chip { cursor: pointer; white-space: nowrap; font-family: var(--font-heading); font-size: 11.5px; letter-spacing: 0.06em;
        text-transform: uppercase; padding: 6px 13px; border-radius: 999px; background: transparent;
        color: var(--color-neutral-400); border: 1px solid var(--color-divider); }
.chip:hover { border-color: var(--color-accent); }
.chip.on { background: color-mix(in srgb, var(--color-accent) 20%, transparent); color: var(--color-neutral-100);
           border-color: var(--color-accent); }
.chip.plain { font-family: var(--font-body); text-transform: none; letter-spacing: 0; }
.lhead { display: flex; gap: 12px; align-items: center; padding: 14px 4px 8px; font-size: 10px;
         letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-neutral-500); }
.list { max-height: min(70vh, 760px); overflow-y: auto; padding-right: 6px; }
/* Both scroll regions take their track and thumb from the neutral ramp. */
.list, .shelf { scrollbar-width: thin; scrollbar-color: var(--color-neutral-700) var(--color-neutral-900); }
.list::-webkit-scrollbar, .shelf::-webkit-scrollbar { width: 8px; height: 8px; }
.list::-webkit-scrollbar-track, .shelf::-webkit-scrollbar-track {
  background: var(--color-neutral-900); border-radius: 999px; }
.list::-webkit-scrollbar-thumb, .shelf::-webkit-scrollbar-thumb {
  background: var(--color-neutral-700); border-radius: 999px;
  border: 2px solid var(--color-neutral-900); background-clip: padding-box; }
.list::-webkit-scrollbar-thumb:hover, .shelf::-webkit-scrollbar-thumb:hover {
  background: var(--color-neutral-600); background-clip: padding-box; }
.list::-webkit-scrollbar-corner, .shelf::-webkit-scrollbar-corner { background: transparent; }
.ghead { position: sticky; top: 0; z-index: 2; display: flex; align-items: baseline; gap: 10px; padding: 9px 4px 7px;
         background: var(--color-bg); border-bottom: 1px solid var(--color-divider); }
.ghead b { font-family: var(--font-heading); font-weight: 500; font-size: 11px; letter-spacing: 0.14em;
           text-transform: uppercase; color: var(--color-accent); }
.ghead span { font-size: 11px; color: var(--color-neutral-500); }
.row { display: flex; gap: 12px; align-items: center; padding: 10px 4px; cursor: pointer; border-radius: 6px;
       border-bottom: 1px solid color-mix(in srgb, var(--color-text) 9%, transparent); }
.row:hover { background: color-mix(in srgb, var(--color-text) 6%, transparent); }
.row.on { background: color-mix(in srgb, var(--color-accent) 14%, transparent); box-shadow: inset 2px 0 0 0 var(--color-accent); }
.init { width: 30px; height: 38px; flex: none; display: flex; align-items: center; justify-content: center; border-radius: 3px;
        font-family: var(--font-heading); font-size: 11px; letter-spacing: 0.04em;
        background: var(--color-neutral-900); color: var(--color-neutral-400); }
.row.on .init { background: color-mix(in srgb, var(--color-accent) 30%, transparent); color: var(--color-neutral-100); }
.rname { display: block; font-family: var(--font-heading); font-size: 15px; line-height: 1.25; }
.row.on .rname { color: var(--color-neutral-100); }
.rsub { display: block; font-size: 11.5px; color: var(--color-neutral-500); margin-top: 2px; }
.spark { width: 72px; flex: none; display: flex; gap: 3px; align-items: flex-end; height: 22px; }
.spark i { flex: 1; border-radius: 1px; }
.rscore { width: 36px; flex: none; text-align: right; font-family: var(--font-heading); font-size: 15px;
          font-variant-numeric: tabular-nums; color: var(--color-neutral-300); }
.row.on .rscore { color: var(--color-accent); }
/* Opens /bottles/<slug>/. The row itself still selects into the panel. */
.rgo { width: 26px; height: 26px; flex: none; display: flex; align-items: center; justify-content: center;
       border-radius: 999px; text-decoration: none; font-size: 14px; color: var(--color-neutral-500);
       opacity: 0; transition: opacity .12s linear; }
.row:hover .rgo, .row.on .rgo, .rgo:focus-visible { opacity: 1; }
.rgo:hover { color: var(--color-accent); background: color-mix(in srgb, var(--color-accent) 18%, transparent); }
.rgo:focus-visible { outline: 1px solid var(--color-accent); outline-offset: 1px; }
@media (hover: none) { .rgo { opacity: 1; } }
.foot { display: flex; justify-content: space-between; padding: 12px 4px 0; font-size: 11px; color: var(--color-neutral-500); }
.panel { position: sticky; top: 80px; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md);
         background: var(--color-surface); }
.phead { padding: 24px 24px 20px;
         background: radial-gradient(90% 120% at 100% 0%, color-mix(in srgb, var(--color-accent) 24%, transparent) 0%, transparent 70%); }
.phead h2 { font-size: 26px; font-weight: 500; margin: 16px 0 0; letter-spacing: -0.015em; text-wrap: balance; }
.pshot { width: 68px; height: 96px; flex: none; overflow: hidden; border-radius: var(--radius-sm);
         background: var(--color-neutral-900); box-shadow: var(--shadow-sm); display: flex; align-items: center; justify-content: center; }
.pshot img { width: 100%; height: 100%; object-fit: cover; }
.pshot .ph { font-size: 22px; color: var(--color-neutral-700); }
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(88px, 100%), 1fr)); gap: 1px; background: var(--color-divider); }
.fact { background: var(--color-surface); padding: 12px 14px; }
.fact b { display: block; font-family: var(--font-heading); font-weight: 500; font-size: 14px; margin-top: 4px;
          font-variant-numeric: tabular-nums; white-space: nowrap; }
.fact span { font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-neutral-500); }
.pbody { padding: 22px 24px 26px; }
.fbar { display: flex; align-items: center; gap: 12px; }
.fbar > span:first-child { width: 132px; flex: none; font-size: 12px; color: var(--color-neutral-300); }
.track { flex: 1; height: 5px; border-radius: 3px; background: var(--color-neutral-900); overflow: hidden; }
.track i { display: block; height: 100%; border-radius: 3px; transition: width .45s cubic-bezier(.2,.7,.2,1); }
.fval { width: 22px; flex: none; text-align: right; font-size: 11px; font-variant-numeric: tabular-nums; color: var(--color-neutral-500); }
.softrule { height: 1px; margin: 24px 0 22px; }
.note { display: flex; gap: 14px; }
.note > span { width: 52px; flex: none; padding-top: 2px; font-size: 10px; letter-spacing: 0.12em;
               text-transform: uppercase; color: var(--color-accent); }
.note p { margin: 0; flex: 1; font-size: 13.5px; line-height: 1.6; color: var(--color-neutral-300); text-wrap: pretty; }
.note.dim > span { color: var(--color-neutral-500); }
.note.dim p { font-size: 12.5px; color: var(--color-neutral-400); }

.sheet { display: none; }
@media print {
  @page { margin: 16mm 12mm; }
  .screen { display: none !important; }
  .sheet { display: grid !important; }
  .page { background: none !important; padding: 0 !important; }
  body { background: #fff !important; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

@media (max-width: 640px) {
  .wrap { padding: 0 18px; }
  .toolbar { flex-wrap: wrap; gap: 10px; border-radius: var(--radius-lg); padding: 12px 14px; }
  .toolbar > div:nth-child(2) { width: 100% !important; max-width: none !important; order: 3; }
  .hero { gap: 20px; }
  .hero h1 { font-size: 34px; }
  .stats { gap: 22px; flex-wrap: wrap; }
  .cols { gap: 24px; }
  .list { max-height: none; padding-right: 2px; }
  .panel { position: static; }
  /* The sparkline is the first thing worth dropping when the row gets tight. */
  .spark { display: none; }
}
@media (max-width: 380px) {
  .wrap { padding: 0 14px; }
  .rsub { font-size: 11px; }
}