/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* The grind chart in fullscreen (chart_fullscreen_controller.js). The card
   keeps its own surface as the backdrop — the browser paints black behind a
   fullscreen element by default, which would put a black frame around a chart
   whose whole design is ink on paper. Centred vertically, because a chart that
   is 400px tall on a 1080px screen otherwise sits pinned to the top with the
   rest of the screen empty. */
.grind-chart-panel.is-fullscreen{display:flex;flex-direction:column;justify-content:center;
  background:var(--surface);border-radius:0;border:0;box-shadow:none;overflow-y:auto}
.grind-chart-panel.is-fullscreen::backdrop{background:var(--surface)}

/* ── Form controls on touch: 16px, or iOS zooms the page ────────────────────
 *
 * Safari on iOS zooms the whole page whenever a field with a font smaller
 * than 16px receives focus, and does not zoom back out. The reader taps a
 * search box and the layout jumps; every subsequent tap is off, and they
 * have to pinch to recover. It is the most common "the site is broken on my
 * phone" report there is, and nothing in the markup looks wrong.
 *
 * Seven controls were affected: the grinder search, the atlas origin search,
 * the contact form, the feedback textarea and email, and the grinders sort
 * select — 12px to 14px.
 *
 * Coarse pointers only. The 14px is a deliberate desktop size and there is
 * no reason for a mouse user to see it change; this is a touch defect, not a
 * typography one. Checkboxes and radios are excluded — they carry no text
 * and sizing them here would fight the explicit w-/h- utilities on them.
 */
@media (pointer: coarse) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  textarea,
  select { font-size: 16px }
}

/* ── The header tucks away while you scroll down a phone ─────────────────────
   64px of a 700px screen is a tenth of it, sitting on top of the thing the
   reader came for. sticky_header_controller only reports the direction; the
   width test lives here, where a media query cannot disagree with the
   viewport the way a cached matchMedia read can.
   Phone only: a desktop window has the room, and a bar that moves under a
   mouse is a bar you have to chase. */
.site-header{transition:transform .22s ease}
@media (max-width:767px){
  .site-header.is-tucked{transform:translateY(-100%)}
}
@media (prefers-reduced-motion:reduce){
  .site-header{transition:none}
}