/* DLCMOB1 (2026-10-17): delicious.com phone polish. CSS only, phones only (<=640px; the <link> also carries
   media="(max-width:640px)"). Nothing here hides content or ads. "html body" prefix = wins over the page-level
   <style> blocks that load later in the document, without !important. */
@media (max-width: 640px) {

  /* ---------- 0. Guard: anything the page hides with the hidden attribute stays hidden, whatever display we set below */
  html body [hidden] { display: none !important; }

  /* ---------- 1. Readable type: labels >= 12.5-13px, card copy >= 15px, form fields 16px (stops iOS zoom) */
  html body .eyebrow, html body p.eyebrow { font-size: 12.5px; letter-spacing: .14em; }
  html body .footCols h4 { font-size: 13px; }
  html body .footBase span, html body .footBase { font-size: 14px; }
  html body nav.seoRelated > h2 { font-size: 15px; }
  html body .hAdLabel { font-size: 11.5px; }
  html body .recipeCard .mealType, html body .recipeCard .tags span, html body .diffPill, html body .diffPill span { font-size: 12px; }
  html body .recipeCard .macro, html body .recipeCard .macro b { font-size: 14px; }
  html body .mealColCal, html body .totalsLabel, html body .lvArchMeta, html body .lvTabTag { font-size: 13px; }
  html body .lvArchNum, html body .lvTabNum { font-size: 11.5px; }
  html body .lockTag, html body .shareLabel, html body .chefTipLabel { font-size: 12px; }
  html body .recipeHeroCopy .macroRow span { font-size: 14px; }
  html body .recipeHeroCopy .macroRow i { font-size: 12.5px; }
  html body .recipeProvenance, html body .recipeProvenance * { font-size: 14px; line-height: 1.55; }
  html body .ingScaleLabel, html body .ingServes, html body .ingServes span { font-size: 14px; }
  html body h3.subhead { font-size: 13px; }
  html body .equipList li, html body .orderInFoot, html body .orderInFoot a, html body #madeBox a.muted, html body .fcNote { font-size: 15px; }
  html body .fcMeta { font-size: 13px; }
  html body .lvToolsHint { font-size: 14px; }
  html body .panel p, html body .featureGrid p, html body .split p, html body .pageSection > p,
  html body .hiwSub, html body .kdBox p, html body p.muted { font-size: max(15px, 1em); line-height: 1.6; }
  html body input:not([type=checkbox]):not([type=radio]), html body select, html body textarea { font-size: 16px; }
  html body .ddPromoLead, html body .ddPromoLead + a, html body .ddPromo a { font-size: 13.5px; }
  html body .recipeCard .foodArt .diffPill, html body .recipeCard .foodArt .diffPill span { font-size: 12px; }
  html body .lvArchPanel .totalsBar .totalsLabel { font-size: 13px; }
  html body .dishList .dishMeta, html body nav.dishJump a span { font-size: 13.5px; }
  html body .bkCard .bkBadge { font-size: 12px; }
  html body .bkCard .bd .bkKick { font-size: 12.5px; }
  html body .bkCard .bd .bkMeta { font-size: 13.5px; }
  html body .magCat, html body .collChipN { font-size: 12.5px; }
  html body .plan .price .per, html body .price .per { font-size: 13px; }
  html body .eyebrow, html body p.eyebrow, html body .pageHero p.eyebrow { font-size: 13px; }

  /* ---------- 2. Tap targets: 44px minimum height for links, chips, toggles and small buttons */
  html body .footCols a { min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; justify-content: center; }
  html body .cardActions .favHeart { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
  html body .cardActions .btn.small, html body .lvArchActions .btn.small, html body .daySectionHead a { min-height: 44px; display: inline-flex; align-items: center; }
  html body .lvToolBtn { min-height: 44px; }
  html body .seoRelated li a, html body .seoDepth li a { min-height: 44px; display: inline-flex; align-items: center; }
  html body main details > summary, html body .seoFaq details > summary { min-height: 44px; padding-top: 10px; padding-bottom: 10px; box-sizing: border-box; }
  html body a.chip, html body button.chip, html body .rcChip, html body .qaChip, html body .sousChip, html body .ksAiBtn,
  html body .bkPlan, html body .dmBtn, html body .atFilterToggle, html body .scBtn {
    min-height: 44px; display: inline-flex; align-items: center; justify-content: center; font-size: max(14px, 1em);
  }
  html body .scBtn { min-width: 44px; }
  html body nav.dishJump a, html body .btn.small, html body nav.archPager a { min-height: 44px; }
  html body .bkCard .bd a.bkTitle { min-height: 44px; display: flex; align-items: center; }
  html body .slotBar .slotSwap, html body .slotBar .slotPlan { min-height: 44px; font-size: 13.5px; display: inline-flex; align-items: center; }
  html body .shareBar a, html body .shareBar button, html body .voiceMic { min-width: 44px; min-height: 44px; }
  html body select { min-height: 44px; }

  /* ---------- 3. Recipes archive date filter: a tidy two-column row with a real button */
  html body form.dateRange { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; align-items: end; }
  html body .archiveTools form.dateRange label, html body form.dateRange label { display: flex; flex-direction: column; gap: 4px; font-size: 14px; }
  html body form.dateRange select { width: 100%; border-radius: 10px; padding: 0 10px; }
  html body form.dateRange button, html body form.dateRange .chip, html body form.dateRange a { min-height: 44px; justify-content: center; }
  html body .archiveTools form.dateRange, html body form.dateRange { width: 100%; box-sizing: border-box; flex: 1 1 100%; }
  html body .archiveTools form.dateRange button, html body form.dateRange button { grid-column: 1 / -1; width: 100%; border-radius: 999px; font-weight: 700;
    background: #241a13; color: #fff; border: 0; font-size: 15px; }
  html body .archiveTools #rangeReset, html body form.dateRange ~ #rangeReset { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }

  /* ---------- 4. Day navigation (today): three even, tappable pills */
  html body nav.dayNav { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: center; margin-bottom: 14px; }
  html body nav.dayNav .dayNavBtn { min-height: 44px; display: flex; align-items: center; justify-content: center; text-align: center;
    padding: 0 10px; border: 1px solid rgba(60, 40, 20, .16); border-radius: 999px; font-size: 14px; text-decoration: none; white-space: nowrap; }

  /* ---------- 5. Heading -> text rhythm (description was touching the heading) */
  html body .recipeHeroCopy h1 + .lead { margin-top: .7rem; }
  html body .panel > h2 + p, html body .featureGrid .panel > h2 + p, html body .split h2 + p, html body .pageSection > h2 + p,
  html body .nutHead h2 + p, html body .orderInHead h2 + p, html body .hiwMakeSection > h2 + .hiwSub,
  html body .flavorCluster > h2 + .fcNote, html body .sousHead h2 + p, html body .pantryBox > h2 + p, html body .remixBox > h2 + p { margin-top: .55rem; }

  /* ---------- 6. Calls to action: centred, full width, stacked with even gaps */
  html body .kdBox { text-align: center; }
  html body .kdBox .btn { display: flex; justify-content: center; width: 100%; box-sizing: border-box; min-height: 48px; align-items: center; margin: 10px 0 0; }
  html body .paywallCard .btn, html body .heroBtns .btn { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; }

  /* ---------- 7. House ad moved below the first screen by dlc-mobile.js: give it room, keep it whole */
  html body .hAdWrap.hAdRail.isMoved { margin: 1.6rem auto 1.4rem; }
}