/* =========================================================================
   PHONE-ONLY STYLESHEET
   =========================================================================
   This file exists to answer one request, precisely: "retains its
   current design for desktop/laptop/tablet/pads but can detect if
   it's on a mobile phone and rework the UI while retaining the same
   visual language, features and functionality."

   How "detect if it's on a mobile phone" actually works here: this
   file is linked with media="(max-width: 600px)" (see header.php), so
   browsers on a larger screen never apply — and modern browsers never
   even fetch — a single rule in it. That's a stronger guarantee than
   a media query living inside the main stylesheet: physically
   separate files make it structurally impossible for a phone-only
   rule to leak onto tablet or desktop by accident.

   "Same visual language" — every rule below reuses this app's own
   existing variables (--green, --gold, --charcoal, --radius, etc.,
   all already defined in style.css, loaded before this file) rather
   than introducing new colors, fonts, or shapes. Nothing here changes
   what a color means or what a component does — only sizing, spacing,
   and layout direction, so it reads as the same app, rearranged for a
   smaller screen, not a different one.

   "Features and functionality" — nothing is removed or hidden except
   where a control is genuinely redundant at this size (the "Table
   view" toggle on the shop page, since phones default to card view
   already, and cards are the better fit here anyway — the toggle to
   switch back to cards stays, so nothing is a dead end).
   ========================================================================= */

/* ---------- Header / nav ---------- */
/* This request's own "reworks the UI" starts here — the nav genuinely
   needs different behavior on a phone, not just smaller spacing: no
   room for nine horizontal items, so it becomes a toggle-opened,
   full-width panel instead. (Separately, this also happens to fix a
   real, pre-existing bug: before any of this work, the nav was
   simply display: none below 820px with no replacement at all,
   making it completely inaccessible on a phone.) */
.hero .container { grid-template-columns: 1fr; margin: 5px; }
.family-row { gap: 8px; }
.family-card { width: auto; flex: 1 1 0; padding: 1px; margin: 0; min-width: 0; }
.family-card img { width: 95%; margin: 0 auto; }

/* This thread's own decisive fix: "no dashboard access on phone,"
   after several rounds of diagnosis couldn't pin down what was
   failing on the specific device involved. Removes the JavaScript
   dependency entirely — the checkbox's own :checked state (toggled
   by clicking its label, no script required) is what controls
   whether the panel shows, so this can't be broken by a script
   error, a timing issue, or anything else that can silently fail.
   Visually hidden rather than display: none, so it stays reachable
   by keyboard/assistive tech through its label. */
.nav-container { display: contents; }
.nav-toggle-checkbox { grid-column: 2; grid-row: 1; }
.nav-toggle { display: inline-flex; align-items: center; grid-column: 2; grid-row: 1; justify-self: center; }
.brand { grid-column: 1 / -1; grid-row: 2; padding-left: 0; }
.nav-toggle-checkbox:focus-visible ~ .nav-toggle { outline: 2px solid var(--gold); outline-offset: 2px; }
/* This request's own header restructure — a 2-column/2-row grid:
   [ticker info][menu button] on top, [logo] spanning both columns
   below, matching style.css's own identical rules exactly. */
.site-header .container { max-width: none; margin: 0; padding: 0 !important; }
.site-header {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: start;
    gap: 10px;
    padding: 10px;
}
.header-ticker {
    grid-column: 1;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
}
.header-flag, .header-clock, .header-currency { display: block; }
.header-sep { display: none; }
.nav-links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--charcoal);
    border-top: 1px solid rgba(255,255,255,0.15);
    box-shadow: 0 8px 16px rgba(0,0,0,0.25);
    max-height: calc(100vh - var(--header-height));
    overflow-y: auto;
}
.nav-toggle-checkbox:checked ~ .nav-links { display: flex; }
.nav-links a {
    flex-direction: row;
    justify-content: flex-start;
    gap: 10px;
    width: 100%;
    padding: 14px 20px;
    font-size: 0.9rem;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    white-space: normal;
}
.nav-links .nav-icon { width: 20px; height: 20px; flex-shrink: 0; }
.credit-tip { width: 100%; }
.credit-tip-popup { position: static; display: block !important; box-shadow: none; margin: 0 20px 10px; width: auto; }

/* ---------- Layout: use the full width, don't waste it on margins ---------- */
/* Direct feedback: "text sizes... need to be more rational" — rem-
   based sizing throughout this app scales proportionally from one
   root change, plus specific, larger reductions for the hero
   heading/lede specifically, checked directly against the reported
   screenshot rather than guessed at. */
html { font-size: 92%; }
/* This request's own "fix this so the full screen is used" — matches
   style.css's own identical fix and reasoning exactly, including the
   regression it avoids (overflow-x: hidden on html/body breaks
   position: sticky on the header — confirmed directly by testing). */
section, .container { overflow-x: hidden; max-width: 100%; }
select, input, textarea { max-width: 100%; }
.hero h1 { font-size: 1.9rem; }
.hero p.lede { font-size: 1rem; }
.container { padding: 0 16px; max-width: calc(100vw - 20px); margin: 0 auto; }
.section { padding: 20px 0; }
.form-card { max-width: none; margin: 20px 0; padding: 20px; }

/* ---------- Touch targets ---------- */
/* Apple/Google's own HIG both recommend a minimum ~44px touch target;
   .btn-small in particular (used for a lot of secondary actions
   throughout this app) falls well short of that at its default
   padding. */
.btn { min-height: 44px; padding: 10px 16px; }
.btn-small { min-height: 40px; padding: 8px 14px; font-size: 0.85rem; }
.form-card input, .form-card select, .form-card textarea,
input[type="text"], input[type="number"], input[type="email"],
input[type="password"], input[type="date"], input[type="time"],
select, textarea {
    min-height: 44px;
    font-size: 16px; /* below 16px, iOS Safari zooms in on focus — this
                         isn't Android-only, but the same fix helps any
                         WebKit-based phone browser, including the
                         wrapper app from this project's own earlier
                         Android work. */
}

/* ---------- Shop page: one column, bigger tap targets, no dense table ---------- */
.product-grid { grid-template-columns: 1fr; gap: 14px; }
.product-card { padding: 20px; margin: 20px; }
/* "Table view" is redundant on a phone — the shop page already
   defaults to card view, and a dense, many-column table is a poor
   fit at this width regardless. The toggle back to "Card view" stays
   visible, so switching away from table view (if a saved link or
   history entry ever lands on it) is still one tap away — nothing
   becomes a dead end. */
a[href*="view=table"] { display: none; }

/* ---------- Tables: this app's own .table-wrap already scrolls
   horizontally (unchanged, established before this file existed) —
   just make the rows themselves easier to tap and read at this size. ---------- */
.data-table th, .data-table td { padding: 10px 12px; font-size: 0.88rem; }

/* ---------- Popups/tooltips: cap width to the viewport itself, so
   nothing this app already shows on hover/focus (image previews,
   tier pricing, the credit balance popup outside the nav panel, shelf
   talkers) can ever overflow off the side of a narrow screen. ---------- */
.image-tip-popup, .tier-tip-popup, .shelf-talker-popup {
    max-width: calc(100vw - 32px);
}
.image-tip-popup img, .tier-tip-popup img { max-width: 100%; height: auto; }

/* ---------- Dashboard: reserved-order cards and summary rows already
   stack reasonably well (they're not a rigid grid to begin with) —
   just tighten the padding so more fits without feeling cramped, and
   make sure every action button reaches full width, which is easier
   to hit accurately with a thumb than a narrow inline one. ---------- */
.btn-block { width: 100%; justify-content: center; }

/* ---------- Recipe / quiz / other card-based widgets already used
   elsewhere in this app (chart_display, options_card, etc. render
   inline, not through this stylesheet) are untouched by design —
   this file only reaches the plain HTML/CSS this project's own pages
   render themselves. ---------- */