/* Site additions on top of Tasca (assets/tasca.css + assets/tokens.css).
   Same rules as the system: square corners, 1px frame borders, accent text only for
   amounts, the kicker and the Tip label, accent-fill only for selected states. */

html { background: var(--surface); }
body { min-height: 100vh; -webkit-text-size-adjust: 100%; }
.ts-site { min-height: 100vh; }
.ts-site a { color: inherit; }
.ts-site img { display: block; }
.visually-hidden, .res-toc__label { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.icon { width: 16px; height: 16px; flex: 0 0 auto; }

/* SiteHeader: current page */
.ts-header__nav, .ts-header__nav a { white-space: nowrap; flex: 0 0 auto; }
/* The logo: the framed G mark beside the name */
.ts-header__logo { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-3); white-space: nowrap; }
.ts-header__mark { width: 32px; height: 32px; flex: 0 0 auto; }
/* Header links: icon and text (the text hides on phones) */
.nav-link { display: inline-flex; align-items: center; gap: 6px; min-height: var(--size-control); color: var(--ink-muted); text-decoration: none; }
.nav-link:hover, .nav-link[aria-current="page"] { color: var(--ink); }
.nav-link[aria-current="page"] .nav-link__text { text-decoration: underline; text-decoration-color: var(--frame); text-underline-offset: 6px; }

/* Sticky header, and on the home page the results bar sticks just under it */
.ts-header { position: sticky; top: 0; z-index: 20; background: var(--surface); }

/* ---------- Home ---------- */
.home-hero { text-align: center; padding: var(--space-6) 0 var(--space-3); }
.home-hero .ts-title { font-size: 36px; line-height: 40px; }   /* title-l: page titles at any width */
.random-link { display: inline-flex; align-items: center; gap: 6px; margin-top: var(--space-2); font-size: 14px; line-height: 20px; }
.random-link .icon { color: var(--ink-muted); }

.filters { display: grid; gap: var(--space-4); padding: var(--space-5) 0 0; }
.filters [data-slot="chips"] { display: grid; gap: var(--space-5); }
.search { position: relative; max-width: 480px; width: 100%; margin: 0 auto var(--space-2); }
.search .icon { position: absolute; left: var(--space-3); top: 50%; transform: translateY(-50%); color: var(--ink-muted); pointer-events: none; }
.search input { appearance: none; box-sizing: border-box; width: 100%; height: var(--size-control); margin: 0; padding: 0 var(--space-3) 0 36px; border: 1px solid var(--frame); border-radius: 0; background: var(--surface); color: var(--ink); font: 400 15px/24px var(--font-sans); }
.search input::placeholder { color: var(--ink-muted); opacity: 1; }
.search input::-webkit-search-cancel-button { filter: grayscale(1); }

.filters-toggle { display: none; }
.filter { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2); }
.filter__label { margin: 0; font-size: 13px; line-height: 18px; font-weight: 600; color: var(--ink-muted); }
.chips { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.chip { appearance: none; margin: 0; display: inline-flex; align-items: center; gap: 6px; min-height: var(--size-control); padding: 0 var(--space-3); border: 1px solid var(--frame); border-radius: 0; background: var(--surface); color: var(--ink); font: 600 13px/18px var(--font-sans); cursor: pointer; }
.chip:hover { background: var(--surface-hover); }
.chip[aria-pressed="true"] { background: var(--accent-fill); color: var(--on-accent-fill); }
.chip__count { font-weight: 400; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.chip[aria-pressed="true"] .chip__count { color: inherit; }
.chip .icon { width: 14px; height: 14px; }
.filter--ingredients .chips { margin-bottom: var(--space-2); }
.filter__hint { margin: 0; font-size: 13px; line-height: 18px; color: var(--ink-muted); }

.results-bar { position: sticky; top: var(--header-h, 0px); z-index: 15; background: var(--surface); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0 var(--space-3); margin: var(--space-5) 0 var(--space-5); padding: 2px 0; border-bottom: 1px solid var(--frame); font-size: 13px; line-height: 18px; color: var(--ink-muted); }
.results-bar strong { color: var(--ink); font-weight: 600; }
.results-bar__count { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--space-4); }
.results-bar__count p { margin: 0; }

/* Sort by: looks like the other text links (underlined, frame-colored line) with a down arrow;
   an invisible native select covers it, so clicking opens the normal menu. */
.sort { margin-left: auto; display: flex; align-items: center; gap: var(--space-2); }
.sort label { color: var(--ink-muted); }
.sortlink { position: relative; display: inline-flex; align-items: center; gap: 4px; min-height: var(--size-control); color: var(--ink); cursor: pointer; }
.sortlink__text { text-decoration: underline; text-decoration-color: var(--frame); text-underline-offset: 4px; }
.sortlink .icon { width: 14px; height: 14px; }
.sortlink select { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; font-size: 16px; appearance: none; -webkit-appearance: none; border: 0; }
.sortlink:has(select:focus-visible) { box-shadow: var(--focus-ring); }
.linkbutton { appearance: none; margin: 0; padding: 0; border: 0; background: none; color: var(--ink); font: inherit; text-decoration: underline; text-decoration-color: var(--frame); text-underline-offset: 4px; cursor: pointer; min-height: var(--size-control); }
.linkbutton[hidden] { display: none; }

.recipe-grid { list-style: none; margin: 0; padding: 0 0 var(--space-7); display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 248px), 1fr)); gap: var(--space-6) var(--space-5); }
.card[hidden] { display: none; }
.card a { display: block; text-decoration: none; color: var(--ink); }
.card .ts-photo { aspect-ratio: 16 / 10; padding: 0; }
.card__body { padding-top: var(--space-3); }
.card .ts-kicker { display: flex; justify-content: space-between; gap: var(--space-2); }
.card__title { margin: var(--space-1) 0 0; font-family: var(--font-display); font-weight: 400; font-size: 22px; line-height: 28px; color: var(--ink); text-wrap: balance; }
.card__sub { margin: 2px 0 0; font-size: 14px; line-height: 21px; color: var(--ink-muted); }
.card__meta { display: flex; flex-wrap: wrap; gap: 0 var(--space-3); margin: var(--space-2) 0 0; padding: 0; list-style: none; font-size: 13px; line-height: 18px; color: var(--ink-muted); }
.card a:hover .card__title { text-decoration: underline; text-decoration-color: var(--frame); text-decoration-thickness: 1px; text-underline-offset: 5px; }
.fav { display: inline-flex; align-items: center; gap: 4px; color: var(--ink-muted); letter-spacing: 0; text-transform: none; font-weight: 400; }
.fav .icon { width: 14px; height: 14px; }
.empty { margin: 0; padding: var(--space-7) 0; text-align: center; color: var(--ink-muted); }
.empty p { margin: 0 0 var(--space-2); }

/* ---------- Recipe ---------- */
.crumbs { margin: 0; padding: var(--space-3) 0 0; font-size: 13px; line-height: 18px; }
.crumbs a { display: inline-flex; align-items: center; gap: 6px; min-height: var(--size-control); color: var(--ink-muted); text-decoration: none; }
.crumbs a:hover { color: var(--ink); }
.recipe .ts-hero { padding-top: var(--space-3); }
.ts-title__sub { display: block; margin-top: var(--space-2); font-size: 22px; line-height: 28px; }
.recipe .ts-lede { max-width: 62ch; }
.ts-kicker__fav { white-space: nowrap; }
.ts-kicker__fav .icon { width: 12px; height: 12px; margin-right: 4px; vertical-align: -1px; }

.ts-controls .ts-units button { min-width: 64px; }

.ts-ingredient--sub label { padding-left: var(--space-4); }
.ts-ingredient--group { padding: var(--space-3) 0 var(--space-1); border-bottom: 1px dotted var(--rule); font-size: 13px; line-height: 18px; font-weight: 600; color: var(--ink-muted); }
.ts-ingredient--group::first-letter { text-transform: uppercase; }
.ts-subheading, .res-subheading { margin: var(--space-5) 0 var(--space-1); font-size: 15px; line-height: 24px; font-weight: 600; color: var(--ink); }

div.ts-tip p { margin: 0; }
div.ts-tip p + p { margin-top: var(--space-2); }

/* Ingredients column: Ingredients, Equipment (built the same way), then the tips */
.ts-col > section + section { margin-top: var(--space-6); }
.ts-col .ts-tip { margin-top: var(--space-6); }

.ts-step__title { margin: 0; padding-top: 4px; font-weight: 600; color: var(--ink); }
/* Tap a step's number to mark it done: the number turns into an outlined tick, the text fades */
.ts-step { position: relative; }
.step-check { appearance: none; position: absolute; left: 0; top: 0; width: var(--size-badge); height: var(--size-badge); margin: 0; padding: 0; border: 0; border-radius: var(--radius-full); background: transparent; cursor: pointer; }
.ts-step__title[data-act] { cursor: pointer; }
.ts-step:has(.ts-step__title:hover) .step-check, .step-check:hover { box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px var(--frame); }
.step-check:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.ts-step--done::before { content: '✓'; background: var(--surface); color: var(--accent); box-shadow: inset 0 0 0 1px var(--frame); }
.ts-step--done > div { color: var(--ink-muted); }
.ts-step--done .ts-step__title, .ts-step--done .ts-q { color: var(--ink-muted); }
.ts-step--done .ts-photo { opacity: 0.5; }
.ts-step__title + .ts-step__text { padding-top: 0; }

/* Your recipes: a step's own ingredients (amount first), the Uses sections, and the note listing
   mistakes found in the Markdown */
.step-ings { list-style: none; margin: var(--space-2) 0 0; padding: 0; }
.step-ings:first-child { margin-top: 0; padding-top: 4px; }
.ts-step__title + .step-ings { margin-top: var(--space-1); }
.step-ings li { padding: 2px 0; }
.step-ings__group { padding-top: var(--space-2) !important; font-size: 13px; line-height: 18px; font-weight: 600; color: var(--ink-muted); }
.recipe-extra { margin-top: var(--space-6); }
.recipe-extra > .ts-heading + .ts-subheading { margin-top: 0; }
.recipe-extra p, .recipe-extra ul { margin: var(--space-2) 0 0; }
.recipe-extra ul { padding-left: var(--space-5); }
.chef-check { margin: var(--space-3) 0 0; padding: var(--space-3); border: 1px solid var(--accent); font-size: 14px; line-height: 21px; }
.chef-check__title { margin: 0; font-weight: 600; color: var(--ink); }
.chef-check ul + p { margin: var(--space-1) 0 0; color: var(--ink-muted); }
.chef-check ul { margin: var(--space-1) 0 0; padding-left: var(--space-5); }
.chef-check code { font-size: 13px; overflow-wrap: anywhere; }


/* ---------- Resources: tabs, side menu, Markdown tables ---------- */
.resources .ts-hero { padding-bottom: var(--space-1); }
/* Tabs: one bordered group like the units toggle; the open tab is filled */
.res-tabs { display: flex; width: max-content; max-width: 100%; margin: 0 auto; border: 1px solid var(--frame); }
.res-tabs a { display: inline-flex; align-items: center; height: var(--size-control); padding: 0 var(--space-4); color: var(--ink); font-size: 13px; line-height: 18px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.res-tabs a:hover { background: var(--surface-hover); }
.res-tabs a[aria-current="page"] { background: var(--accent-fill); color: var(--on-accent-fill); }
.res-actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0 var(--space-5); margin-top: var(--space-2); font-size: 13px; line-height: 18px; }
.res-action { display: inline-flex; align-items: center; gap: 6px; }
.res-status { color: var(--ink-muted); }

.res-layout { padding: var(--space-5) 0 var(--space-7); }
.res-body { max-width: 760px; min-width: 0; margin: 0 auto; }
.res-body > :first-child { margin-top: 0; }
/* a section lands just under the sticky header (and the menu strip on phones) */
.res-body [data-toc] { scroll-margin-top: calc(var(--header-h, 0px) + var(--toc-h, 0px) + var(--space-4)); }
.res-body .ts-heading { margin: var(--space-7) 0 var(--space-3); }
.res-note { margin: var(--space-3) 0 0; font-size: 14px; line-height: 21px; color: var(--ink-muted); }
.res-list { margin: var(--space-3) 0 0; padding-left: var(--space-5); }
.res-source { margin: var(--space-7) 0 0; padding-top: var(--space-3); border-top: 1px solid var(--frame); font-size: 13px; line-height: 18px; color: var(--ink-muted); }
.res-source code { font: inherit; color: var(--ink); overflow-wrap: anywhere; }
.res-table { overflow-x: auto; }
.res-table table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.res-table th, .res-table td { padding: var(--space-2) var(--space-3) var(--space-2) 0; text-align: left; vertical-align: top; border-bottom: 1px dotted var(--rule); }
.res-table thead th { font-size: 13px; line-height: 18px; font-weight: 600; color: var(--ink-muted); border-bottom: 1px solid var(--frame); }
.res-table tbody th { font-weight: 600; color: var(--ink); }
/* group rows ("BEEF"): a small label across the table */
.res-table .res-group th { padding: var(--space-5) 0 var(--space-1); font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-muted); }
.res-table tbody:first-of-type .res-group th { padding-top: var(--space-3); }

/* Side menu. Phones and tablets: a strip that sticks under the header and scrolls sideways. */
.resources { --toc-h: 40px; }
.res-toc { position: sticky; top: var(--header-h, 0px); z-index: 15; margin: 0 0 var(--space-5); background: var(--surface); border-bottom: 1px solid var(--frame); font-size: 13px; line-height: 18px; }
.res-toc ol { position: relative; display: flex; gap: var(--space-4); margin: 0; padding: 0; list-style: none; overflow-x: auto; scrollbar-width: none; }
.res-toc ol::-webkit-scrollbar { display: none; }
.res-toc li { flex: 0 0 auto; }
.res-toc a { display: flex; align-items: center; height: 39px; color: var(--ink-muted); text-decoration: none; white-space: nowrap; }
.res-toc .res-toc__item--l2 a { color: var(--ink); font-weight: 600; }
.res-toc a:hover { color: var(--ink); }
.res-toc a[aria-current] { color: var(--ink); box-shadow: inset 0 -2px 0 var(--ink); }
.res-layout--single { --toc-h: 0px; }

/* Wide screens: a column on the left that stays in view */
@container (min-width: 880px) {
  .resources { --toc-h: 0px; }
  .res-layout { display: grid; grid-template-columns: 188px minmax(0, 760px); justify-content: center; gap: 0 var(--space-7); padding-top: var(--space-6); }
  .res-layout--single { grid-template-columns: minmax(0, 760px); }
  .res-body { margin: 0; }
  .res-toc { top: calc(var(--header-h, 0px) + var(--space-5)); align-self: start; margin: 0; border: 0; background: none; }
  .res-toc__label { position: static !important; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; margin: 0 0 var(--space-2); font-weight: 600; color: var(--ink-muted); }
  .res-toc ol { display: block; max-height: calc(100vh - var(--header-h, 0px) - 96px); overflow: auto; border-left: 1px solid var(--frame); }
  .res-toc a { height: auto; padding: 5px 0 5px var(--space-3); white-space: normal; }
  .res-toc .res-toc__item--l3 a { padding-left: calc(var(--space-3) * 2); }
  .res-toc .res-toc__item--l4 a { padding-left: calc(var(--space-3) * 3); }
  .res-toc a[aria-current] { box-shadow: inset 2px 0 0 var(--ink); }
}

/* No recipe found */
.notfound { padding: var(--space-7) 0; text-align: center; }
.notfound__link { display: inline-flex; align-items: center; gap: 6px; min-height: var(--size-control); padding: 0 var(--space-2); text-decoration: underline; text-decoration-color: var(--frame); text-underline-offset: 4px; }

@container (max-width: 519.98px) {
  .ts-header { grid-template-columns: minmax(0, 1fr) auto auto; }
  .ts-header__logo { order: 1; justify-content: flex-start; }
  .ts-header { gap: var(--space-2); }
  .ts-header__logo { gap: var(--space-2); font-size: 20px; line-height: 28px; }   /* the name fits beside the icons */
  .ts-header__mark { width: 28px; height: 28px; }
  .ts-header__nav { display: flex; order: 2; }            /* phones keep the Resources link, as an icon */
  .ts-theme { order: 3; }
  .ts-header__nav { gap: 0; }
  .nav-link { width: var(--size-control); justify-content: center; }
  .nav-link .icon { width: 20px; height: 20px; }
  .nav-link__text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .res-tabs a { padding: 0 var(--space-3); }
  /* the filter chips fold under a Filters button, so the recipes start on the first screen */
  .filters-toggle { appearance: none; justify-self: center; display: inline-flex; align-items: center; gap: 6px; min-height: var(--size-control); margin: 0; padding: 0 var(--space-4); border: 1px solid var(--frame); border-radius: 0; background: var(--surface); color: var(--ink); font: 600 13px/18px var(--font-sans); cursor: pointer; }
  .filters-toggle:hover { background: var(--surface-hover); }
  .filters-toggle__count { min-width: 20px; padding: 1px 6px; background: var(--accent-fill); color: var(--on-accent-fill); text-align: center; font-variant-numeric: tabular-nums; }
  .filters:not([data-open]) #filter-chips { display: none; }
  .res-phone-hide { display: none; }
  /* wide tables: the first cell on its own line, the other cells in columns underneath */
  .res-table--wide table, .res-table--wide thead, .res-table--wide tbody { display: block; }
  .res-table--wide tr { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); column-gap: var(--space-3); border-bottom: 1px dotted var(--rule); }
  .res-table--wide thead tr { border-bottom: 1px solid var(--frame); }
  .res-table--wide th, .res-table--wide td, .res-table--wide thead th { padding-right: 0; border-bottom: 0; }
  .res-table--wide thead th:first-child { display: none; }
  .res-table--wide tbody th[scope="row"] { grid-column: 1 / -1; padding-bottom: 0; }
  .res-table--wide td { padding-top: 2px; font-size: 14px; line-height: 20px; }
  .res-table--wide .res-group th { grid-column: 1 / -1; }
}
@container (max-width: 359.98px) {
  .ts-header__logo { font-size: 0; }   /* very narrow: the G mark alone (the name stays for screen readers) */
}
@container (min-width: 520px) {
  .filter { grid-template-columns: 88px minmax(0, 1fr); align-items: start; }
  .filter__label { padding-top: 10px; }
}

@media (prefers-reduced-motion: no-preference) {
  .ts-site { transition: background-color 120ms linear, color 120ms linear; }
}

/* Print: the recipe on paper, light, without controls */
@media print {
  :root, .ts-site { --surface: #fff; --surface-photo: #fff; --ink: #000; --ink-muted: #333; --accent: #000; --frame: #999; --rule: #bbb; }
  .ts-header, .crumbs, .ts-controls, .step-check, .filters-toggle, .ts-photo--step, .filters, .results-bar, .random-link, .chef-check,
  .res-tabs, .res-actions, .res-toc, .res-source { display: none !important; }
  .res-layout { display: block !important; }
  .ts-photo--hero { height: 180px !important; }
  .ts-step { break-inside: avoid; }
  .ts-step::before { border: 1px solid #000; background: #fff; color: #000; }
}