/* Cheap Carbs: a race results sheet.
   Color rules (full guide: ../STYLE.md)
   1. Fuel type is the only categorical color: gel blue, drink mix orange, chew green,
      in that fixed order. Validated on this paper and on the dark sheet.
      Type colors go on marks only (squares, bars, the leader rules). Text never wears them.
   2. Every type color sits next to its type written out. On paper, orange (2.8:1) and
      green (2.5:1) are under 3:1, so the word is required.
   3. Controls, links, and focus use ink. Nothing interactive uses a type color.
   4. Green check = cheapest only, always with the word.
   5. Sales are words and strikethrough in ink, never a color. */

:root {
  color-scheme: light;
  --paper: #f4f1ea;
  --paper-2: #ece8de;
  --paper-3: #e4dfd2;
  --ink: #17150f;
  --ink-2: #6a6458;
  --ink-3: #8f897c;
  --rule: #d6d0c2;
  --gel: #2a78d6;
  --mix: #eb6834;
  --chew: #1baf7a;
  --good: #0b7a0b;
  --display: "Archivo", "Arial Narrow", sans-serif;
  --text: "Archivo", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --paper: #141412;
    --paper-2: #1c1c19;
    --paper-3: #262622;
    --ink: #ecebe6;
    --ink-2: #a19d92;
    --ink-3: #7a766c;
    --rule: #34332e;
    --gel: #3987e5;
    --mix: #d95926;
    --chew: #199e70;
    --good: #3fbf3f;
  }
}

* { box-sizing: border-box; }
html { background: var(--paper); }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 15px/1.5 var(--text); font-stretch: 100%; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
a { color: inherit; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
[hidden] { display: none !important; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.sheet { width: min(1180px, 100% - 48px); margin: 0 auto; padding-bottom: 64px; }
.mono, .c-num, .c-rank { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* Type marks: a square in the type color, always followed by the type's name */
.t-gel { --type: var(--gel); }
.t-mix { --type: var(--mix); }
.t-chew { --type: var(--chew); }
.swatch { display: inline-block; width: .62em; height: .62em; background: var(--type); flex: none; }

/* Masthead */
.masthead { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); column-gap: 48px; align-items: end; padding-bottom: 28px; border-bottom: 3px solid var(--ink); }
.masthead-top { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 16px; padding: 14px 0 10px; margin-bottom: 26px; border-bottom: 1px solid var(--ink); font: 500 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.masthead h1 { grid-row: 2 / 4; margin: 0; font: 850 clamp(64px, 10.5vw, 150px)/.8 var(--display); font-stretch: 62%; letter-spacing: -.012em; text-transform: uppercase; }
.dek { margin: 0 0 22px; max-width: 26em; font-size: 19px; line-height: 1.35; font-stretch: 92%; color: var(--ink); }
.plan { padding-top: 16px; border-top: 1px solid var(--ink); }
.plan-sentence { margin: 0; font-size: 22px; line-height: 1.55; font-stretch: 88%; font-weight: 500; }
.inline-field input { width: 2.6em; padding: 0 2px; margin: 0 2px; border: 0; border-bottom: 2px solid var(--ink); border-radius: 0; background: transparent; font: 600 22px/1.2 var(--mono); text-align: center; -moz-appearance: textfield; }
.inline-field input::-webkit-inner-spin-button, .inline-field input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.inline-field input:focus { outline: none; background: var(--paper-2); }
.plan-answer { margin-top: 8px; color: var(--ink-2); font-size: 14px; font-stretch: 92%; }
.plan-lead { margin: 0 0 6px; }
.plan-lead b { color: var(--ink); font-weight: 650; }
.plan-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.plan-list li { border-bottom: 1px solid var(--rule); }
.plan-line { display: grid; grid-template-columns: 7.5em 4.6em minmax(0, 1fr) auto; gap: 10px; align-items: baseline; width: 100%; padding: 7px 4px; border: 0; background: none; text-align: left; color: var(--ink-2); }
.plan-line:hover { background: var(--paper-2); }
.plan-line[aria-pressed="true"] { background: var(--paper-2); box-shadow: inset 3px 0 0 var(--ink); }
.plan-type { display: inline-flex; align-items: center; gap: 7px; color: var(--ink); font-weight: 600; }
.plan-price { font: 600 15px var(--mono); color: var(--ink); text-align: right; }
.plan-what { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plan-hour { font: 400 12px var(--mono); color: var(--ink-3); }

/* Cheapest by type */
.leaders { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 1px solid var(--ink); }
.leader { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto 1fr auto; column-gap: 12px; padding: 18px 20px 18px 0; border: 0; background: none; text-align: left; }
.leader + .leader { padding-left: 20px; border-left: 1px solid var(--rule); }
.leader::before { content: ""; grid-column: 1 / -1; width: 36px; height: 4px; margin-bottom: 12px; background: var(--type); }
.leader-label { display: flex; align-items: center; gap: 7px; font: 500 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.leader-name { grid-column: 1; margin-top: 8px; font-size: 17px; font-weight: 650; font-stretch: 85%; line-height: 1.2; }
.leader-store { grid-column: 1; margin-top: 3px; font-size: 13px; color: var(--ink-2); }
.leader-cost { grid-column: 2; grid-row: 2 / 5; align-self: end; text-align: right; font: 600 32px/1 var(--mono); letter-spacing: -.03em; }
.leader-cost small { display: block; margin-top: 4px; font: 400 11px/1 var(--mono); letter-spacing: 0; color: var(--ink-2); }
.leader:hover .leader-name { text-decoration: underline; text-underline-offset: 3px; }
.leader[aria-pressed="true"] { background: var(--paper-2); }

/* Controls */
.controls { padding-top: 22px; }
.tabs { display: flex; flex-wrap: wrap; gap: 4px 28px; border-bottom: 1px solid var(--rule); }
.tab { display: inline-flex; align-items: center; gap: 8px; padding: 0 0 10px; margin-bottom: -1px; border: 0; border-bottom: 3px solid transparent; background: none; font: 750 22px/1 var(--display); font-stretch: 70%; text-transform: uppercase; letter-spacing: .01em; color: var(--ink-2); }
.tab .count { font: 400 12px var(--mono); color: var(--ink-3); }
.tab:hover { color: var(--ink); }
.tab[aria-pressed="true"] { color: var(--ink); border-bottom-color: var(--ink); }
.controls-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; padding: 16px 0 0; }
.controls-row.small { padding-top: 12px; gap: 10px 24px; font: 400 12px var(--mono); color: var(--ink-2); }
.search { flex: 1 1 280px; }
.search input { width: 100%; padding: 8px 0; border: 0; border-bottom: 1px solid var(--ink); border-radius: 0; background: transparent; font-size: 17px; }
.search input::placeholder { color: var(--ink-3); }
.search input:focus { outline: none; border-bottom-width: 2px; margin-bottom: -1px; }
.toggles { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.toggle { display: inline-flex; align-items: center; gap: 8px; padding: 4px 0; border: 0; background: none; font: 500 12px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.toggle::before { content: ""; width: 12px; height: 12px; border: 1.5px solid var(--ink); flex: none; }
.toggle[aria-pressed="true"]::before { background: var(--ink); box-shadow: inset 0 0 0 2px var(--paper); }
.toggle .count { color: var(--ink-3); letter-spacing: 0; }
.controls-row.small label { display: inline-flex; align-items: center; gap: 8px; }
select { padding: 2px 18px 2px 0; border: 0; border-bottom: 1px solid var(--ink-3); border-radius: 0; background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5'%3E%3Cpath d='M0 0l4 5 4-5z' fill='%238f897c'/%3E%3C/svg%3E") no-repeat right 2px center; appearance: none; font: 500 12px var(--mono); color: var(--ink); cursor: pointer; }
.view { display: inline-flex; gap: 8px; margin-left: auto; color: var(--ink-3); }
.view button { padding: 0; border: 0; background: none; font: 500 12px var(--mono); color: var(--ink-3); }
.view button[aria-pressed="true"] { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }

.status { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 6px 16px; margin: 30px 0 8px; font: 400 12px var(--mono); color: var(--ink-2); }
.status b { color: var(--ink); font-weight: 600; }
.status-actions { display: flex; gap: 18px; }
.text-button { padding: 0; border: 0; background: none; font: 500 12px var(--mono); color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.note { margin: 0 0 8px; font: 400 12px var(--mono); color: var(--ink-2); }

/* Results sheet */
.results { border-top: 3px solid var(--ink); }
.list { list-style: none; margin: 0; padding: 0; }
.row { display: grid; grid-template-columns: 40px minmax(0, 1fr) 60px 72px 104px 150px 88px 150px; column-gap: 18px; align-items: baseline; padding: 14px 6px; }
.head { position: sticky; top: 0; z-index: 2; padding-block: 9px; background: var(--paper); border-bottom: 1px solid var(--ink); font: 500 10.5px/1.2 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.head > * { white-space: nowrap; }
.head button { padding: 0; border: 0; background: none; font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; text-align: left; }
.head button:hover { color: var(--ink); }
.head button[aria-sort] { color: var(--ink); }
.head button[aria-sort]::after { content: " ↓"; }
.head button[aria-sort="ascending"]::after { content: " ↑"; }
.head .c-num, .head .c-num + .c-num { text-align: right; }
.list > li { border-bottom: 1px solid var(--rule); }
.list > li:hover > .row { background: var(--paper-2); }
.c-rank { color: var(--ink-3); font-size: 13px; }
.c-num { text-align: right; font-size: 14px; }
.c-num .label { display: none; }
.c-num .sub { display: block; margin-top: 3px; font: 400 11px/1.3 var(--text); color: var(--ink-3); }
.name { font-size: 17px; font-weight: 650; font-stretch: 86%; line-height: 1.25; }
.meta { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 12px; margin-top: 4px; font-size: 13px; color: var(--ink-2); font-stretch: 94%; }
.meta .type { display: inline-flex; align-items: center; gap: 6px; color: var(--ink); }
.meta .flag { font-weight: 650; color: var(--ink); }
.meta .best::before { content: "✓ "; color: var(--good); font-weight: 800; }
.meta .sale { font: 600 11px/1.6 var(--mono); padding: 0 5px; border: 1px solid var(--ink); color: var(--ink); text-transform: uppercase; letter-spacing: .04em; }
.note-line { margin-top: 3px; font-size: 12.5px; color: var(--ink-3); }
.was { margin-left: 6px; color: var(--ink-3); font-size: 12px; }
.c-cost { font-family: var(--mono); }
.cost { display: block; font-size: 21px; font-weight: 600; letter-spacing: -.02em; line-height: 1; }
.cost.na { font: 400 12px/1.3 var(--text); color: var(--ink-2); letter-spacing: 0; }
.bar { display: block; height: 3px; margin-top: 8px; background: var(--paper-3); }
.bar i { display: block; height: 100%; background: var(--type); }
.plan-cost { font-weight: 600; }
.c-store { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; font-size: 14px; }
.store-link { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 650; font-stretch: 88%; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.store-link::after { content: " ↗"; font-weight: 400; }
.store-link:hover { text-decoration-thickness: 2px; }
.store-more { display: flex; gap: 14px; font: 400 11.5px var(--mono); color: var(--ink-2); }
.store-more a, .store-more button { padding: 0; border: 0; background: none; font: inherit; color: inherit; text-decoration: underline; text-decoration-color: var(--ink-3); text-underline-offset: 3px; }
.store-more button[aria-expanded="true"] { color: var(--ink); }

.offers { list-style: none; margin: 0; padding: 0 0 6px; background: var(--paper-2); }
.offers .row { padding-block: 10px; }
.offers li + li { border-top: 1px dotted var(--rule); }
.offers .c-rank { text-align: right; padding-right: 6px; }
.offers .name { font-size: 14.5px; font-weight: 550; }
.offers .cost { font-size: 17px; }

.empty { margin: 0; padding: 36px 0; font-size: 17px; }

.colophon { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 32px; margin-top: 40px; padding-top: 14px; border-top: 1px solid var(--ink); font-size: 12.5px; color: var(--ink-2); }
.colophon p { margin: 0; }
.colophon b { color: var(--ink); font-weight: 650; }
#disclosure { grid-column: 1 / -1; }

@media (max-width: 1080px) {
  .row { grid-template-columns: 30px minmax(0, 1fr) 54px 64px 96px 130px 80px 124px; column-gap: 12px; }
}

@media (max-width: 860px) {
  .sheet { width: min(100% - 32px, 640px); }
  .masthead { grid-template-columns: 1fr; padding-bottom: 20px; }
  .masthead-top { margin-bottom: 18px; }
  .masthead-top span:first-child { display: none; }
  .was { display: block; margin: 2px 0 0; }
  .masthead h1 { grid-row: auto; margin-bottom: 16px; font-size: clamp(56px, 19vw, 96px); }
  .dek { font-size: 17px; margin-bottom: 16px; }
  .plan-sentence, .inline-field input { font-size: 19px; }
  .plan-line { grid-template-columns: 7em 4.4em minmax(0, 1fr); }
  .plan-what { grid-column: 1 / -1; white-space: normal; padding-left: 1.3em; }
  .plan-hour { grid-column: 3; grid-row: 1; text-align: right; }
  .leaders { grid-template-columns: 1fr; }
  .leader, .leader + .leader { padding: 14px 0; border-left: 0; }
  .leader + .leader { border-top: 1px solid var(--rule); }
  .leader::before { margin-bottom: 10px; }
  .leader-cost { font-size: 26px; }
  .tabs { gap: 4px 18px; }
  .tab { font-size: 19px; }
  .view { margin-left: 0; }
  .search input, select { font-size: 16px; }
  .head { display: none; }
  .row { grid-template-columns: 24px repeat(4, minmax(0, 1fr)); row-gap: 10px; column-gap: 10px; padding: 14px 0; }
  .c-rank { grid-row: 1; grid-column: 1; }
  .c-product { grid-row: 1; grid-column: 2 / 5; }
  .c-cost { grid-row: 1; grid-column: 5; text-align: right; }
  .row > .c-num { grid-row: 2; text-align: left; }
  .row > .c-num .label { display: block; font: 500 9.5px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
  .row > .c-carbs { grid-column: 2; }
  .row > .c-sodium { grid-column: 3; }
  .row > .c-pack { grid-column: 4; }
  .row > .c-plan { grid-column: 5; text-align: right; }
  .c-store { grid-row: 3; grid-column: 2 / -1; flex-direction: row; flex-wrap: wrap; align-items: baseline; justify-content: space-between; }
  .offers .row { padding-inline: 0; }
  .colophon { grid-template-columns: 1fr; }
}