/* Mobile corrections for galicia.cervantes50.com
 *
 * Loaded LAST — after each page's own <style>, which sits in the body. In the
 * head every rule here lost to an equal-specificity page rule and silently did
 * nothing; that was measured, not guessed.
 *
 * Measured on a real 375x812 viewport before this file existed:
 *   content width 327px => ~36 chars/line; nav 80px tall over two ragged rows;
 *   star/note buttons 19x27px; h1 34px / h2 26px breaking mid-phrase;
 *   the wide table needed 373px of horizontal scroll with no affordance.
 *
 * Two axes, deliberately separate (external review caught the conflation):
 *   - WIDTH   (max-width) governs layout: gutters, type scale, stacking.
 *   - POINTER (any-pointer: coarse) governs hit areas and input sizing.
 * A phone in landscape is 812px wide and still a finger, so touch sizing keyed
 * to max-width restored 19px buttons the moment the device was rotated.
 */

/* ============================================================
   TOUCH — keyed to the pointer, not the viewport width
   ============================================================ */
@media (any-pointer: coarse) {

  /* 19px was the worst offender; 44px is the Apple/Google floor for a primary
     control, reached with padding so the visual chip stays small. */
  .favbtn {
    min-width: 44px; min-height: 44px;
    padding: 12px 13px; font-size: 15px;
  }
  .favwrap { gap: 4px; margin-left: 4px; }

  .sitenav a { padding: 11px 0; }        /* ~40px tall */
  .ids a { padding: 9px 11px; }          /* ~34px, secondary */
  .favitem .row a,
  .favitem .row button { padding: 11px 14px; min-height: 40px; }
  .favtools button, .favtools label { padding: 13px 18px; min-height: 44px; }

  /* iOS zooms the page whenever a focused field is under 16px — unconditional,
     because the dialog is reachable on a tablet in landscape too. */
  .favdlg-text { font-size: 16px; }
  .favdlg-row button { min-height: 44px; }

  .favline { padding: 7px 0 7px 10px; }   /* touch area only */
}

/* ============================================================
   LAYOUT — keyed to width
   ============================================================ */
@media (max-width: 640px) {

  .wrap { padding-left: 16px; padding-right: 16px; }

  body { font-size: 16px; line-height: 1.55; }

  /* one continuous curve instead of a step at 380px, which jumped 25 -> 30.5px */
  h1 { font-size: clamp(24px, 7.4vw, 34px) !important; line-height: 1.05; letter-spacing: -.025em; }
  h2, h2.sec { font-size: clamp(19px, 5.6vw, 24px) !important; line-height: 1.2; }
  h3, .study h3, .card-top h3, .place { font-size: 17px !important; }
  .lede, .standfirst { font-size: 16.5px; }

  /* --- navigation: one scrollable row --------------------------------- */
  .sitenav {
    gap: 0 14px;
    padding: 4px 16px;
    font-size: 13px;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .sitenav::-webkit-scrollbar { display: none; }
  .sitenav a { flex: 0 0 auto; }
  .sitenav .sep { display: none; }
  /* Pinned to the right edge so it stays reachable while the sections scroll
     under it. It needs an OPAQUE ground of its own: `background: inherit`
     resolves to the transparent nav background, and the links then showed
     through it. */
  .sitenav .favlink {
    position: sticky; right: -16px;
    margin-left: auto;
    padding-left: 16px; padding-right: 16px;
    opacity: 1;                       /* .sitenav a sets .62 — the pin must be solid */
    background: var(--ground, #fff);
    box-shadow: -14px 0 14px -8px var(--ground, #fff);
  }

  /* --- tables: less padding, and a hint that they scroll --------------- */
  .tbl, .table-scroll, .chart-scroll { position: relative; }
  table { min-width: 560px; font-size: 13.5px; }
  th, td { padding: 8px 10px; }
  th { font-size: 10.5px; letter-spacing: .05em; }
  .tbl::after, .table-scroll::after, .chart-scroll::after {
    content: "";
    position: absolute; top: 0; right: 0; bottom: 0; width: 26px;
    pointer-events: none;
    background: linear-gradient(to right, transparent, var(--surface, #fff));
  }

  svg.scatter { min-width: 560px; }
  .chartbox { padding: 14px 12px 10px; }
  .legend { gap: 9px 14px; font-size: 12.5px; }

  /* --- blocks: reclaim padding ---------------------------------------- */
  .card, .v, .study, .gaps, .findings, .favitem, .calib, .favempty { padding: 16px; }
  .card-head, .card-body { padding-left: 16px; padding-right: 16px; }
  .verdicts { gap: 10px; }
  .v .n { font-size: 27px; }
  .counters div { padding: 13px 14px; }
  .counters b { font-size: 23px; }
  section { margin-top: 38px; }
  header, header.top, .masthead { padding-top: 30px; padding-bottom: 18px; }

  .funnel { grid-template-columns: repeat(2, 1fr); }
  .rank { grid-template-columns: 1fr; gap: 6px; }
  .rank .count { text-align: left; }
  .specs li, .facts li { font-size: 11.5px; padding: 5px 9px; }

  /* clamping is layout, not touch: a narrow desktop window needs it too, and a
     wide tablet does not. -webkit-line-clamp does nothing without the box. */
  .favline {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    white-space: normal;
    overflow: hidden;
    font-size: 14px;
    max-width: none;
  }
  tbody .favline { max-width: none; }

  /* --- the note dialog becomes a bottom sheet -------------------------- */
  .favdialog {
    width: 100%; max-width: none;
    margin: auto auto 0;
    border-radius: 12px 12px 0 0;
    border-bottom: 0;
    max-height: 92vh;
  }
  .favform {
    padding: 18px 16px calc(16px + env(safe-area-inset-bottom, 0px));
    max-height: 88vh; overflow-y: auto;
  }
  .favdlg-row button { padding: 12px 15px; flex: 1 1 auto; }
  .favdlg-delete { flex-basis: 100%; margin-left: 0; }
}

/* very narrow phones: only the gutter, the type scale is already continuous */
@media (max-width: 380px) {
  .wrap { padding-left: 13px; padding-right: 13px; }
  .counters { grid-template-columns: 1fr 1fr; }
}

/* a phone held sideways: short viewport, keep the sheet usable */
@media (max-height: 460px) and (any-pointer: coarse) {
  .favdialog { max-height: 96vh; }
  .favform { max-height: 92vh; padding-top: 12px; }
  .favdlg-text { min-height: 70px; }
}

/* A device that cannot hover cannot open an SVG <title>, whatever its width —
   so this is keyed to hover capability, not to the viewport. Full opacity:
   at .7 the light theme measured 3.5:1, under the 4.5:1 floor. */
@media (any-hover: none) {
  .chart-scroll + .legend::after {
    content: "Значения точек — в таблицах ниже: подсказки к точкам открываются только курсором.";
    flex: 1 1 100%;
    font-size: 12.5px; line-height: 1.4; margin-top: 2px;
    color: var(--ink-2, #444);
  }
}

/* dimming is about hover, not about the pointer's size: a device that cannot
   hover never gets the reveal, so the resting state must be readable there. */
@media (any-hover: none) {
  .favbtn { opacity: .55; }
}