/* Sample tracker. Internal page. Styled like the fine print on an export
   label: hairline rules, square corners, monospaced detail, rust as the
   single accent. Colour and type come from css/tokens.css; the lockup comes
   from css/style.css. */

:root {
  --hair: 1px solid var(--ink);
  --hair-soft: 1px solid rgba(28, 21, 18, 0.22);
  --cap: 0.8125rem;   /* label size, 13px: smallest text on the page */
}

.mono, .cap { font-family: var(--font-mono); }
.cap { font-size: var(--cap); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }

.top { padding-top: var(--s-6); display: flex; justify-content: space-between; align-items: center; gap: var(--s-4); }
.top__label { font-family: var(--font-mono); font-size: var(--cap); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
a.lockup--foot:hover { background: var(--rust-soft); }

.title { padding-block: var(--s-7) var(--s-5); border-bottom: 3px double var(--ink); margin-bottom: var(--s-5); }
.title h1 { font-size: var(--t-xl); }

.block { padding-top: var(--s-7); }
.block__h { font-family: var(--font-mono); font-size: var(--cap); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin-bottom: var(--s-4); }

.dim { color: var(--muted); }

.status { font-family: var(--font-mono); font-size: var(--cap); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap; }
.status--chosen  { color: #fff; background: var(--rust); padding: 0.1rem 0.4rem; }
.status--dropped { color: var(--muted); text-decoration: line-through; }
.status--pending { color: var(--rust-deep); }

/* Round */
.round { border-top: 3px double var(--ink); border-bottom: var(--hair); background: rgba(255, 255, 255, 0.4); }
.round__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-2) var(--s-4); padding: var(--s-4) 0 var(--s-3); border-bottom: var(--hair-soft); }
.round__n { font-family: var(--font-mono); font-size: var(--cap); font-weight: 700; letter-spacing: 0.14em; color: var(--rust); }
.round__t { font-weight: 800; letter-spacing: var(--tr-snug); font-size: var(--t-lg); }
.round__meta { margin-left: auto; font-family: var(--font-mono); font-size: var(--cap); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }

.row { display: grid; grid-template-columns: 14rem 1fr; gap: var(--s-3); padding: var(--s-3) 0; border-top: var(--hair-soft); font-size: var(--t-base); }
.row--first { border-top: 0; }
.row > b { font-family: var(--font-mono); font-size: var(--cap); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); padding-top: 0.2rem; }
@media (max-width: 30rem) { .row { grid-template-columns: 1fr; gap: var(--s-1); } }

/* Sample tiles */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); border-top: var(--hair-soft); }
.tile { display: grid; grid-template-columns: 4.5rem 1fr; gap: var(--s-4); align-items: start; padding: var(--s-4) var(--s-4) var(--s-4) 0; }
.tile + .tile { border-left: var(--hair-soft); padding-left: var(--s-4); }
@media (max-width: 36rem) { .tile + .tile { border-left: 0; border-top: var(--hair-soft); padding-left: 0; } }
.tile__top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s-2) var(--s-3); padding-bottom: var(--s-2); margin-bottom: var(--s-2); border-bottom: 1px dotted rgba(28, 21, 18, 0.35); }
.tile__id { font-family: var(--font-mono); font-size: var(--t-base); font-weight: 700; letter-spacing: 0.06em; }
.tile__brief, .tile__notes { font-size: var(--t-base); line-height: 1.55; }
.tile__notes { margin-top: var(--s-2); color: var(--muted); }
.tile--chosen .tile__id { color: var(--rust); }

.bottle { width: 4.5rem; height: auto; }
.bottle .glass-line { fill: none; stroke: var(--ink); stroke-width: 1.25; stroke-linejoin: round; }
.bottle .cap { fill: var(--ink); }
.bottle .liquid { fill: #7A3612; }   /* darker, browner than the brand rust */
.bottle .liquid-dark { fill: #5A260C; }
.bottle .shine { stroke: #fff; stroke-opacity: 0.5; stroke-width: 1.5; fill: none; }
.bottle .label-box { fill: #fff; stroke: var(--ink); stroke-width: 0.75; }
.bottle .label-rule { stroke: var(--ink); stroke-width: 0.5; }
.bottle .label-txt { font-family: var(--font-mono); font-size: 8px; font-weight: 700; fill: var(--ink); text-anchor: middle; letter-spacing: 0; }

.round-gap { height: var(--s-6); }

/* Ingredients as label fine print: name, dotted leader, amount */
.ingr { display: grid; gap: var(--s-2); max-width: 36rem; }
.ingr li { display: flex; align-items: baseline; gap: var(--s-2); font-family: var(--font-mono); font-size: var(--t-sm); text-transform: uppercase; letter-spacing: 0.06em; }
.ingr .lead { flex: 1; border-bottom: 1px dotted rgba(28, 21, 18, 0.4); transform: translateY(-0.25em); min-width: 1rem; }
.ingr .val { font-weight: 700; }

.fb { display: grid; gap: var(--s-1); counter-reset: fb; }
.fb li { counter-increment: fb; display: grid; grid-template-columns: 2rem 1fr; }
.fb li::before { content: counter(fb, decimal-leading-zero); font-family: var(--font-mono); font-size: var(--t-sm); color: var(--rust); padding-top: 0.15rem; }

.foot { padding-block: var(--s-7) var(--s-8); font-family: var(--font-mono); font-size: var(--t-sm); color: var(--muted); }
.para { max-width: 68ch; }

/* Ingredients column, set beside the samples */
.tiles { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.tile--ingr { display: block; }
.tile--ingr .tile__id { padding-bottom: var(--s-2); margin-bottom: var(--s-3); border-bottom: 1px dotted rgba(28, 21, 18, 0.35); }
.tile--ingr .ingr { gap: var(--s-1); }
.tile--ingr .ingr li { font-size: var(--t-xs); }
.tile__notes + .tile__notes { margin-top: var(--s-1); }

/* Inner margin so text never sits on the card edge. */
.round { padding-inline: var(--s-5); }

/* Room between the ingredient values and the divider to the next column */
.tile--ingr { padding-right: var(--s-6); }

/* Change since the previous round */
.chg { display: inline-flex; align-items: baseline; gap: 0.2rem; font-weight: 700; white-space: nowrap; }
.chg__arrow { font-size: 0.75em; }
.chg--up   { color: #2E7D32; }
.chg--down { color: #C62828; }

.tile__code { font-family: var(--font-mono); font-size: var(--t-sm); color: var(--muted); margin-bottom: var(--s-2); }

/* Commercial reference */
.ref { padding-bottom: var(--s-5); }
.ref__note { font-size: var(--t-sm); color: var(--muted); padding: var(--s-3) 0 var(--s-4); }
.ref__list { max-width: none; gap: var(--s-3); }
.ref__list li { display: grid; grid-template-columns: 1fr; gap: var(--s-1); }
@media (min-width: 56rem) { .ref__list li { grid-template-columns: minmax(0, 30rem) 1fr; gap: var(--s-6); align-items: baseline; } }
.ref__line { display: flex; align-items: baseline; gap: var(--s-2); }
.ref__what { font-family: var(--font); font-size: var(--t-sm); text-transform: none; letter-spacing: 0; color: var(--muted); line-height: 1.5; }
.ref__from { color: var(--muted); white-space: nowrap; }
/* Round, so it never reads as a tick box */
.swatch { display: inline-block; width: 0.65rem; height: 0.65rem; margin-right: 0.3em; vertical-align: 0; border-radius: 50%; box-shadow: 0 0 0 1px rgba(28, 21, 18, 0.35); }

/* Tick box beside each reference ingredient */
.tick { flex: none; display: inline-grid; place-items: center; width: 1rem; height: 1rem; border: 1px solid var(--ink);
  font-size: 0.8rem; font-weight: 700; line-height: 1; transform: translateY(0.1rem); }
.tick--on { color: #fff; background: #2E7D32; border-color: #2E7D32; }