/* mobile-calc.css — phone-only (<=640px) calculator-screen layer.
   Loaded after css/mobile-shell.css (see index.html), so it wins at equal specificity;
   every rule here is gated behind @media (max-width: 640px) and scoped by #page-<id>,
   so desktop/tablet stay pixel-identical by construction.

   Maintainer ruling (mobile-shell-mockup-parity): on phone, flatten each calculator's
   PRIMARY input card — the first card holding the calculator's main inputs — so its
   fields sit directly on the page background with no card box and no card-header,
   matching the mockup's #s-calc screen. Every OTHER section on the page (modular
   additions, free water, readouts, results rail, reference tables, detailed-view
   <details>) keeps its normal card chrome so dense calculators stay legible.

   Only css tokens (var(--...)) are used below — no hardcoded hex. `.stat`,
   `.dw-summary-box`, and `.readout-section` all carry their own background via
   components.css, independent of the parent `.page > section` card rule, so they stay
   correctly chromed even when a parent section here is flattened around them. */

@media (max-width: 640px) {

  /* Shared flatten mixin (duplicated per-selector — plain CSS has no @mixin). Strips the
     `.page > section` / `.calc-inputs > section` card box (background/border/shadow/padding)
     and hides that section's own .card-header so bare fields sit on the page background. */

  /* ---- Infant Feeds (regimen): primary = "Formula or EBM" ---- */
  #page-regimen .calc-inputs > section:first-child {
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
    margin-bottom: 20px;
  }
  #page-regimen .calc-inputs > section:first-child > .card-header {
    display: none;
  }

  /* ---- Pediatric Tube Feeds: primary = "Formula & Feeding Schedule" ---- */
  #page-tubefeeds .calc-inputs > section:first-child {
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
    margin-bottom: 20px;
  }
  #page-tubefeeds .calc-inputs > section:first-child > .card-header {
    display: none;
  }

  /* ---- Goal Regimen Builder: a single input section for the whole page — flatten whole,
     matching the mockup's bare-fields calculator-detail screen. The nested
     `.readout-section` keeps its own dark "printout" chrome (readout-section rule in
     components.css), unaffected by this parent going transparent. ---- */
  #page-goalvolume > section {
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
    margin-bottom: 20px;
  }
  #page-goalvolume > section > .card-header {
    display: none;
  }

  /* ---- Volume Advancement Plan: primary = "Input Parameters" ---- */
  #page-advplan .calc-inputs > section:first-child {
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
    margin-bottom: 20px;
  }
  #page-advplan .calc-inputs > section:first-child > .card-header {
    display: none;
  }

  /* ---- Growth: primary = "Growth Percentile Calculator (WHO/CDC)" (feeds the Analysis
     Summary results rail). The Weight Gain mini-calc, Growth Velocity Reference table, and
     Growth Chart companion view are left as cards — they are distinct functional blocks,
     not the page's single primary input. Selector keys on a distinctive child field so it
     cannot accidentally match a sibling section. ---- */
  #page-growth section:has(#gpSexSelect) {
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
    margin-bottom: 20px;
  }
  #page-growth section:has(#gpSexSelect) > .card-header {
    display: none;
  }

  /* ---- Corrected Age: a single input section for the whole page — flatten whole. ---- */
  #page-cga > section {
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
    margin-bottom: 20px;
  }
  #page-cga > section > .card-header {
    display: none;
  }

  /* ---- Formula Recipes: primary = "Formula Mixing". "Recipe Generator" is a distinct
     second tool (small/large batch outputs) and keeps its card. ---- */
  #page-recipes .calc-inputs > section:first-child {
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
    margin-bottom: 20px;
  }
  #page-recipes .calc-inputs > section:first-child > .card-header {
    display: none;
  }

  /* ---- Renal Calculator: primary = "Recipe inputs" (weight, free water, ingredients).
     "Calculation mode" (the Nutrient/Goal toggle) and "Detailed nutrient view" keep their
     cards. Selector keys on the weight field so it cannot drift onto a sibling section. ---- */
  #page-renalblend section:has(#renalWeightKg) {
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
    margin-bottom: 20px;
  }
  #page-renalblend section:has(#renalWeightKg) > .card-header {
    display: none;
  }

  /* ---- Blenderized Recipe Maker: primary = "Recipe inputs" (weight, ingredients, goals).
     "Calculation mode", "Key micronutrients", and the DRI adequacy section keep their cards. ---- */
  #page-blenderizedrecipe section:has(#blzWeightKg) {
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
    margin-bottom: 20px;
  }
  #page-blenderizedrecipe section:has(#blzWeightKg) > .card-header {
    display: none;
  }

  /* ---- Chylothorax: primary = "Formula & Feeds" ---- */
  #page-chylo > section:first-child {
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
    margin-bottom: 20px;
  }
  #page-chylo > section:first-child > .card-header {
    display: none;
  }

  /* ---- GIR Calculator: primary = "GIR Calculator" (the ASPEN dosing reference table
     that follows keeps its card). ---- */
  #page-gir > section:first-child {
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
    margin-bottom: 20px;
  }
  #page-gir > section:first-child > .card-header {
    display: none;
  }

  /* ---- Parenteral Nutrition: primary = "PN Parameters". "Substrates",
     "Electrolytes & Additives", and the ASPEN dosing reference section keep their cards. ---- */
  #page-parenteralnutrition section:has(#pnWeight) {
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
    margin-bottom: 20px;
  }
  #page-parenteralnutrition section:has(#pnWeight) > .card-header {
    display: none;
  }

  /* ---- PN→EN Bridge: primary = "Baseline PN (100%)". "Mode", "Goal EN Regimen", and
     "Steps" keep their cards. ---- */
  #page-pnenbridge section:has(#pebWeight) {
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
    margin-bottom: 20px;
  }
  #page-pnenbridge section:has(#pebWeight) > .card-header {
    display: none;
  }

  /* ---- Micronutrient Adequacy Screen: primary = "Patient". "Day's Intake" (ingredient
     list) and "Screen" (results table) keep their cards. ---- */
  #page-micronutrientscreen section:has(#mnsAgeValue) {
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
    margin-bottom: 20px;
  }
  #page-micronutrientscreen section:has(#mnsAgeValue) > .card-header {
    display: none;
  }

  /* ---- Estimated Needs: primary = "Age-Based Energy & Protein Needs", the first
     in-page-tab section. Fluids/Catch-Up/Critically Ill/Adjusted Body Weight keep their
     cards — the in-page tabs jump between them as distinct tools. ---- */
  #estimatedNeedsEnergySection {
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
    margin-bottom: 20px;
  }
  #estimatedNeedsEnergySection > .card-header {
    display: none;
  }

  /* ---- Unit Converter: a grid of ten equal-weight mini-converters, no single primary
     input card. Flattened into one clean vertical stack (grid -> block) instead of a wall
     of boxes; card-headers stay VISIBLE here (unlike the primary-card flattens above)
     because they are the only thing telling two adjacent bare field groups apart —
     hiding them would leave e.g. "Weight" fields sitting directly above "Length" fields
     with no label. A top border stands in for the removed card boundary between entries. ---- */
  #page-unitconverter .converter-grid {
    display: block;
  }
  #page-unitconverter .converter-grid > section {
    background: transparent;
    border: 0;
    border-top: 1px solid var(--border-subtle);
    box-shadow: none;
    border-radius: 0;
    padding: 20px 0;
    margin: 0;
  }
  #page-unitconverter .converter-grid > section:first-child {
    border-top: 0;
    padding-top: 0;
  }
}