/* ===========================================================================
   Redesign, 2026-09-23 — toolbar nav, converter instrument, dark footer.

   Appended as the last stylesheet section on purpose. .site-nav already has
   a dozen club/mobile overrides between lines 1014 and 1581 of style.css, and
   this section has to win over them without those rules being unpicked one by
   one on a live site. Nothing above is deleted; everything here overrides.

   Palette is entirely the existing tokens. The few literals below are the
   shades the redesign adds — a finer border, a subtler surface, the answer
   panel's gradient and the dark footer — and they are declared as tokens here
   rather than inlined so the next person has one place to change them.
   =========================================================================== */

:root {
  --line-fine: #E3DFD8;   /* control borders, one step softer than --line */
  --line-soft: #EFEDE8;   /* internal rules inside a card */
  --surface-sub: #FBF9F6; /* inset fields, the recent band */
  /* Alias, not a new colour: #8A827A measured 3.78:1 on white and failed
     AA. Small uppercase text is the worst place to spend contrast, so the
     micro-labels use the existing muted token. */
  --label: var(--ink-mute);
  --amber-deep: #8F4207;  /* the answer number; 7.0:1 on the panel */
  --amber-bright: #E89B3C;
  --panel-1: #FEF6DE;     /* answer panel gradient */
  --panel-2: #FDEFC9;
  --panel-line: #F0DDB0;
  --footer-bg: #1A1613;
  --footer-ink: #CFC7BD;
  --footer-head: #9E958B; /* 5.0:1 on --footer-bg */
  --footer-line: #2E2822;
  /* Numbers are DATA, not display type. Playfair is a high-contrast
     editorial serif: its 3, 4 and 5 have the swelling bowls and hairline
     joins that make a headline handsome and a measurement look decorative.
     At 66px "438 g" read as a logotype rather than an answer. Inter is
     already loaded for the UI, so the numerals cost nothing extra and come
     with real tabular figures, which stop the answer jittering sideways as
     the digits change. Headings keep --display. */
  --num: 'Inter', system-ui, -apple-system, sans-serif;
}

/* ---------------------------------------------------------------- toolbar */

.header-inner { height: 68px; gap: 20px; justify-content: flex-start; }
.logo { flex: none; }
/* The mark: an amber tile with the cup knocked out of it, so the logo has a
   shape at small sizes instead of a thin amber outline that disappears. */
.logo svg {
  width: 34px; height: 34px; padding: 7px; border-radius: 10px;
  background: var(--primary-dark); color: #FFF7EA; stroke-width: 2.1;
  flex: none;
}

.nav-seg {
  display: flex; align-items: center; gap: 2px; flex: none;
  background: #F5F2ED; border: 1px solid #EAE6DF;
  border-radius: 12px; padding: 3px;
}
.site-nav { align-items: center; gap: 16px; flex: 1; min-width: 0; }
.nav-seg > a,
.nav-seg .nav-dropdown-toggle {
  display: inline-flex; align-items: center; gap: 7px;
  height: 38px; padding: 0 14px; border-radius: 9px;
  font-size: .88rem; font-weight: 500; color: var(--ink-soft);
  background: none; border: none; white-space: nowrap;
}
.nav-seg > a:hover,
.nav-seg .nav-dropdown-toggle:hover {
  background: rgba(255,255,255,.7); color: var(--ink-strong); text-decoration: none;
}
/* The current page is a raised chip. This is the whole point of a segmented
   control: the old bar gave no indication of where you were. */
.site-nav .nav-seg > a.on {
  background: var(--surface); color: var(--ink-strong); font-weight: 600;
  box-shadow: 0 1px 2px rgba(44,40,36,.10);
}
.nav-ico { width: 16px; height: 16px; flex: none; }
.nav-seg > a.on .nav-ico,
.nav-seg > a:first-child .nav-ico { color: var(--primary-dark); }

/* ------------------------------------------------------ ingredient search */

.nav-search {
  position: relative; flex: 1; min-width: 0; max-width: 460px;
  display: flex; align-items: center; gap: 9px; height: 44px; padding: 0 14px;
  border: 1px solid var(--line-fine); border-radius: 12px;
  background: var(--surface-sub);
  transition: border-color .2s var(--ease), background-color .2s var(--ease);
}
.nav-search:focus-within { border-color: var(--primary); background: var(--surface); }
.nav-search-ico { width: 17px; height: 17px; color: var(--label); flex: none; }
.nav-search input {
  flex: 1; min-width: 0; height: 100%; border: none; background: none; outline: none;
  font: 400 .88rem 'Inter', system-ui, sans-serif; color: var(--ink);
}
.nav-search input::-webkit-search-cancel-button { display: none; }
.nav-search-kbd {
  flex: none; font: 600 .72rem ui-monospace, monospace; color: var(--label);
  border: 1px solid var(--line-fine); border-radius: 6px; padding: 2px 6px;
  background: var(--surface);
}
.nav-search:focus-within .nav-search-kbd { display: none; }

.nav-search-results {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 60;
  list-style: none; margin: 0; padding: 6px; max-height: 340px; overflow-y: auto;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-sm); box-shadow: var(--shadow);
}
.nav-search-results[hidden] { display: none; }
.nav-search-results li { margin: 0; }
.nav-search-results a {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 9px 11px; border-radius: 8px; color: var(--ink); font-size: .88rem;
}
.nav-search-results a:hover,
.nav-search-results a.on { background: var(--primary-light); color: var(--amber-deep); text-decoration: none; }
.nav-search-results .r-gpc { color: var(--ink-mute); font-size: .82rem; font-variant-numeric: tabular-nums; }
.nav-search-empty { padding: 12px; color: var(--ink-mute); font-size: .88rem; }

/* --------------------------------------------- the converter as instrument */

#converter {
  border: 1px solid #E5E1D9; border-radius: 16px; background: var(--surface);
  overflow: hidden; padding: 0; position: static;
}
#converter .conv-body { display: grid; grid-template-columns: minmax(0, 1fr) 320px; }
#converter .conv-inputs {
  padding: 26px 28px; display: flex; flex-direction: column; gap: 20px;
  border-right: 1px solid var(--line-soft); min-width: 0;
}
#converter .converter-grid {
  display: grid; gap: 12px;
  grid-template-columns: 132px minmax(0, 1fr) 44px;
  align-items: end;
}
#converter .field label {
  font-size: .72rem; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--label);
}
#converter .field input,
#converter .field select {
  height: 56px; border: 1.5px solid var(--line-fine); border-radius: 12px;
  background: var(--surface-sub); font-size: 1.05rem; font-weight: 600;
  color: var(--ink-strong); padding: 0 12px; width: 100%;
}
/* The amount is the one number the visitor types, so it gets the display face
   at the size the answer uses — the two read as a pair. */
#converter .field-amount input {
  font-family: var(--num); font-size: 28px; font-weight: 700;
  letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}
#converter .field-to { grid-column: 1 / 3; }
#converter .field-ingredient { grid-column: 1 / -1; }
#converter .swap-btn {
  position: static; width: 44px; height: 44px; margin: 0 0 6px;
  border-radius: 12px; border: 1.5px solid var(--line-fine);
  background: var(--surface); color: var(--primary-dark);
  display: flex; align-items: center; justify-content: center;
}

#converter .conv-quick { display: flex; flex-direction: column; gap: 8px; }
#converter .conv-quick-label {
  font-size: .72rem; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--label);
}
#converter .conv-quick-chips { display: flex; flex-wrap: wrap; gap: 6px; }
#converter .conv-quick-chips button {
  font: 600 .88rem 'Inter', system-ui, sans-serif; font-variant-numeric: tabular-nums;
  min-width: 52px; height: 38px; padding: 0 12px; border-radius: 10px;
  border: 1px solid var(--line-fine); background: var(--surface);
  color: var(--ink); cursor: pointer;
  transition: background-color .18s var(--ease), border-color .18s var(--ease);
}
#converter .conv-quick-chips button:hover {
  background: var(--primary-light); border-color: var(--primary); color: var(--amber-deep);
}

#converter .conv-answer {
  background: linear-gradient(180deg, var(--panel-1), var(--panel-2));
  padding: 26px 28px; display: flex; flex-direction: column;
  justify-content: space-between; gap: 14px; min-width: 0;
}
#converter .conv-answer-cap {
  font-size: .72rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--amber-deep);
}
#converter .converter-result {
  display: flex; align-items: baseline; gap: 8px; margin: 2px 0 0;
  background: none; padding: 0; border: none; min-height: 0;
}
#converter .result-value {
  font-family: var(--num); font-size: clamp(2.5rem, 5.6vw, 3.8rem);
  line-height: 1; font-weight: 800; color: var(--amber-deep);
  letter-spacing: -.035em; font-variant-numeric: tabular-nums;
}
#converter .result-unit { font-size: 1.3rem; font-weight: 700; color: var(--amber-deep); }
#converter .conv-answer-alt {
  font-size: .88rem; color: #7A4A12; font-variant-numeric: tabular-nums;
  margin-top: 4px;
}
#converter .conv-answer-foot { display: flex; flex-direction: column; gap: 12px; margin-top: 4px; }

#converter .conv-units {
  display: flex; gap: 4px; padding: 4px;
  background: rgba(255,255,255,.66); border: 1px solid var(--panel-line);
  border-radius: 11px;
}
#converter .conv-units button {
  flex: 1; height: 34px; border: none; border-radius: 8px; background: none;
  font: 600 .88rem 'Inter', system-ui, sans-serif; color: #7A4A12; cursor: pointer;
  transition: background-color .18s var(--ease);
}
#converter .conv-units button:hover { background: rgba(255,255,255,.85); }
#converter .conv-units button.on {
  background: var(--amber-deep); color: #FFF7EA; font-weight: 700;
  box-shadow: 0 1px 3px rgba(122,56,5,.35);
}
#converter .conv-units button.on:hover { background: var(--amber-deep); }

#converter .conv-copy {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; border-radius: 11px; border: none;
  background: var(--amber-deep); color: #FFF7EA;
  font: 600 .88rem 'Inter', system-ui, sans-serif; cursor: pointer;
  transition: background-color .18s var(--ease);
}
#converter .conv-copy:hover { background: #7A3805; }
#converter .conv-copy svg { width: 16px; height: 16px; }

/* The recent band: full card width, its own strip, no inherited padding.
   This is the fix for the dead gap under the controls. */
#converter .conv-history {
  display: none; align-items: center; gap: 16px;
  border-top: 1px solid var(--line-soft); background: var(--surface-sub);
  padding: 14px 28px; margin: 0; border-radius: 0;
  max-width: none; text-align: left;
}
#converter .conv-history.show { display: flex; }
#converter .conv-history-top {
  flex: none; font-size: .72rem; font-weight: 800; letter-spacing: .09em;
  text-transform: uppercase; color: var(--label);
}
#converter .conv-history-chips {
  flex: 1; min-width: 0; display: flex; flex-wrap: nowrap; gap: 8px;
  overflow-x: auto; padding: 2px 2px 4px; scrollbar-width: thin;
}
#converter .conv-history-chips::-webkit-scrollbar { height: 6px; }
#converter .conv-history-chips::-webkit-scrollbar-thumb { background: #E1DBD1; border-radius: 99px; }
#converter .conv-history .conv-chip {
  flex: none; white-space: nowrap; border: 1px solid var(--line-fine);
  background: var(--surface); color: var(--ink-soft); font-weight: 600;
  font-size: .82rem; height: 32px; padding: 0 12px; border-radius: 8px;
  cursor: pointer; font-variant-numeric: tabular-nums;
}
#converter .conv-history .conv-chip:hover { border-color: var(--primary); color: var(--amber-deep); }
#converter .conv-history-clear {
  flex: none; background: none; border: none; cursor: pointer;
  font: 600 .82rem 'Inter', system-ui, sans-serif; color: var(--label);
  text-decoration: underline;
}

/* ------------------------------------------------------------ dark footer */

.site-footer {
  background: var(--footer-bg); color: var(--footer-ink);
  border-top: none; padding: 44px 0 34px; margin-top: 56px;
}
.footer-grid {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px;
}
.footer-brand { font-family: var(--display); font-size: 1.35rem; font-weight: 700; color: #FFF7EA; }
.footer-brand strong { color: var(--amber-bright); }
.footer-note {
  font-size: .88rem; line-height: 1.6; color: var(--footer-head);
  max-width: 46ch; margin: 10px 0 0;
}
.footer-col { display: flex; flex-direction: column; gap: 9px; }
.footer-head {
  font-size: .72rem; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: var(--footer-head);
}
.footer-col a { font-size: .88rem; color: var(--footer-ink); font-weight: 400; }
.footer-col a:hover { color: #FFF7EA; }
.footer-copy {
  margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--footer-line);
  font-size: .82rem; color: #7D746A;
}

/* ------------------------------------------------------------- responsive */

@media (max-width: 1080px) {
  .nav-search { max-width: 300px; }
  .nav-search input { font-size: .88rem; }
}
@media (max-width: 980px) {
  /* The search is the first thing to go: the segmented nav is the primary
     control and the burger panel carries a search of its own below. */
  .header-inner .nav-search { display: none; }
}

@media (max-width: 900px) {
  #converter .conv-body { grid-template-columns: 1fr; }
  #converter .conv-inputs { border-right: none; border-bottom: 1px solid var(--line-soft); }
  /* Answer above the controls on a narrow screen: most visitors are here for
     the number and should not have to scroll past a form to reach it. */
  #converter .conv-answer { order: -1; }
}

@media (max-width: 860px) {
  .header-inner { height: 60px; gap: 12px; justify-content: space-between; }
  .site-nav { flex: none; align-items: stretch; gap: 8px; }
  /* The segment un-segments inside the burger panel: a pill of four chips at
     full width is a cramped row, where the panel wants a list. */
  .nav-seg {
    flex-direction: column; align-items: stretch; width: 100%;
    background: none; border: none; padding: 0; gap: 2px;
  }
  .nav-seg > a,
  .nav-seg .nav-dropdown-toggle {
    width: 100%; height: 46px; font-size: 1rem; border-radius: 10px;
    justify-content: flex-start;
  }
  .site-nav .nav-seg > a.on { box-shadow: none; background: var(--primary-light); color: var(--amber-deep); }
  .nav-seg .nav-dropdown { width: 100%; }
  .nav-seg .nav-dropdown-toggle { justify-content: space-between; }
  /* Shown again here, inside the burger panel, where there is room for it.
     Selector must match the 980px rule above on specificity -- `.nav-search`
     alone loses to `.header-inner .nav-search` regardless of source order,
     which hid the search on every phone. */
  .header-inner .nav-search { display: flex; max-width: none; width: 100%; order: -1; }
  .nav-search-kbd { display: none; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
  .footer-about { grid-column: 1 / -1; }
}

@media (max-width: 560px) {
  #converter .converter-grid { grid-template-columns: 110px minmax(0, 1fr) 44px; gap: 10px; }
  #converter .field input,
  #converter .field select { height: 52px; font-size: 1rem; }
  #converter .field-amount input { font-size: 24px; }
  #converter .conv-inputs,
  #converter .conv-answer { padding: 18px 18px; }
  .conv-history { padding: 10px 14px; gap: 10px; }
  #converter .conv-quick-chips button { min-width: 48px; height: 40px; }
  .footer-grid { grid-template-columns: 1fr; gap: 24px; }
}

/* ------------------------------------------------- hero lede alignment fix */

/* `.hero-sub` carries `margin: 10px auto 18px`, which centres the lede inside
   the container. That is right under a centred `.hero-h` (homepage,
   /converter, offline) and wrong under `.ing-hero`, whose h1 is left-aligned:
   the heading started at the gutter and the sentence under it started 200px
   further in. /ingredients and /oven-temperatures both had it.
   cup_sizes.html and recipe_scaler.html already carried per-page inline
   `margin-left:0` patches for the same bug, which is the tell that it belonged
   in the shared rule. */
.ing-hero .hero-sub { margin-left: 0; margin-right: 0; max-width: 60ch; }

/* --------------------------------------------- recipes using an ingredient */

.ing-rec-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; margin-bottom: 14px;
}
.ing-rec-head h2 { margin: 0; }
.ing-rec-head a { font-size: .88rem; font-weight: 600; white-space: nowrap; }
.ing-rec-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.ing-rec-card {
  display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid #E5E1D9; border-radius: 14px; background: var(--surface);
  color: var(--ink);
  transition: border-color .18s var(--ease), transform .18s var(--ease),
              box-shadow .18s var(--ease);
}
.ing-rec-card:hover {
  border-color: var(--primary); text-decoration: none;
  transform: translateY(-2px); box-shadow: var(--shadow);
}
.ing-rec-media {
  display: block; aspect-ratio: 16 / 9; background: var(--primary-light);
  overflow: hidden;
}
.ing-rec-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ing-rec-emoji {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%; font-size: 2.2rem;
}
.ing-rec-body { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px 14px; }
.ing-rec-name { font-weight: 600; font-size: .98rem; color: var(--ink-strong); line-height: 1.35; }
.ing-rec-meta { font-size: .82rem; color: var(--ink-mute); }

@media (max-width: 700px) {
  .ing-rec-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .ing-rec-grid > :nth-child(3) { display: none; }
}
@media (max-width: 420px) {
  .ing-rec-grid { grid-template-columns: 1fr; }
  .ing-rec-grid > :nth-child(3) { display: flex; }
}

/* -------------------------------------------------- touch targets, phones */

/* Plumb at 390×844: the quick-amount chips rendered 48×40 and the unit chips
   74×34, both under the 44px minimum. They are the two controls this page
   exists to be tapped on, so they get the full target on touch devices.
   Scoped to a coarse pointer so the desktop proportions are unchanged. */
@media (pointer: coarse) {
  #converter .conv-quick-chips button { height: 44px; min-width: 56px; }
  #converter .conv-units button { height: 44px; }
  #converter .conv-history .conv-chip { height: 40px; }
  #converter .swap-btn { width: 48px; height: 48px; }
  .nav-search-results a { padding: 12px 11px; }
  /* Breadcrumb links measured 39×32. Padding rather than height so the strip
     does not grow: the row has room above and below the text. */
  .breadcrumb a { display: inline-block; padding: 6px 0; }
}

/* ---------------------------------------------------- measure (line length) */

/* Body prose ran the full 940px container: Plumb measured 113 characters per
   line against a comfortable maximum of 85. The cap is on direct <p> children
   of a section only, so nothing inside a card, grid or table is touched, and
   it is a max-width rather than a margin so left alignment is unchanged. */
.section > p,
.section > .ing-note-body,
.info > p { max-width: 74ch; }

/* The footer blurb measured 36 characters per line, under the 45 minimum —
   its 46ch cap never applied because the column itself is narrower than that.
   Widening the brand column is the fix; the three link columns need far less
   room than the sentence does. */
.footer-grid { grid-template-columns: 1.8fr 1fr 1fr 1fr; }

/* ------------------------------------------------- .info block alignment */

/* `.info { max-width: 680px }` on an element that is also `.container`
   (`margin: 0 auto`) centred the whole block, so on an ingredient page the
   "Quick reference" heading and its list started ~130px right of every other
   section's left edge. It read as a mistake, because it is one: the 680px was
   there to hold the line length, not to move the block.
   The container width is restored so the left edge lines up, and the measure
   is held on the children instead — same reading comfort, no drift. */
.info { max-width: var(--maxw); }
.info > p,
.info > ul,
.info > ol { max-width: 74ch; }

/* ------------------------------------------------------- select chevrons */

/* The native select arrow is drawn hard against the control's right edge, so
   on a 12px-padded field it sat almost on the border while the text had a
   comfortable inset — the control looked lopsided. Drawing our own chevron is
   the only way to control that gap: `appearance: none` removes the UA arrow,
   and the SVG is placed with an explicit 16px offset so it has the same air on
   its right as the label has on its left.
   The arrow colour is baked into the data URI (currentColor does not resolve
   inside a background image), so it is --ink-mute spelled out: %236F6862. */
#converter .field select,
.field select {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  padding-right: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236F6862' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
}
/* Edge/IE draw a second arrow of their own on top of ours. */
#converter .field select::-ms-expand,
.field select::-ms-expand { display: none; }

/* The Tools caret sat tight against the button's right edge for the same
   reason: the gap between the word and the chevron was larger than the gap
   between the chevron and the edge. */
.nav-seg .nav-dropdown-toggle { padding-right: 12px; }
.nav-seg .nav-dropdown-toggle .nav-caret { margin-left: 1px; }
.nav-search-results a { padding-right: 14px; }

/* ----------------------------------------- focus scroll jump in the header */

/* Focusing the header search jumped the page to the very top from wherever
   the reader was. Cause: `html { scroll-padding-top: 76px }` applies to every
   scroll-into-view, including the implicit one the browser performs when an
   element receives focus. The search input lives in a `position: sticky`
   header and therefore always sits inside that 76px band, so the browser
   decided it was obscured and scrolled up to "reveal" it — which it could
   never do, because the header moves with the viewport.
   scroll-padding is the wrong tool: it is a property of the scroll CONTAINER
   and so affects everything. The clearance is only wanted for anchor jumps
   (#step3, #instructions), so it moves onto the targets themselves as
   scroll-margin, which is what scroll-margin is for. */
html { scroll-padding-top: 0; }
:target { scroll-margin-top: 84px; }