/* mobile.css — phone and small-tablet layout.
   Loaded last so it overrides the desktop rules above it.

   The desktop layout is a fixed 248px reading index beside the content, and a
   header that lays brand and mode buttons on one line. Neither fits a phone, and
   when they overflow the document grows wider than the viewport — which also
   throws the fixed-position chips off-screen, since they anchor to the layout
   viewport rather than the visual one. Everything here follows from that. */

/* Nothing may make the page scroll sideways. */
html, body { max-width: 100%; overflow-x: hidden; }

/* A grid item defaults to min-width:auto, so one wide child — a table, a chart —
   stretches its whole track and drags the layout past the viewport. Allowing the
   tracks to shrink is what lets the rules further down actually take effect. */
.reader, .reader > *, .reader-body,
.wrap, .wrap > *, .grid2, .grid2 > *,
.tabpane, .panel, .results { min-width: 0; }

@media (max-width: 900px) {
  /* Reading index stacks above the content instead of beside it. */
  .reader { grid-template-columns: 1fr; gap: 16px; }
  .margin-index {
    position: static;
    max-height: none;
    border-right: 0;
    border-bottom: 1px solid var(--line);
    padding: 6px 0 12px;
  }
}

@media (max-width: 780px) {
  .pothi-frame { padding: 0; }
  .wrap { padding-left: 12px; padding-right: 12px; }

  /* Header: brand, then the mode buttons on their own wrapped row. */
  header { flex-wrap: wrap; gap: 10px; padding-top: 58px; }
  .head-spacer { display: none; }
  .brand { gap: 11px; }
  .brand .title h1 { font-size: 20px; line-height: 1.25; }
  .brand .title .sub { font-size: 11px; letter-spacing: 1px; }
  .mode-toggle { width: 100%; flex-wrap: wrap; gap: 6px; }
  .mode-toggle .mode-btn { flex: 1 1 auto; min-width: 0; padding: 8px 10px; font-size: 13px; }

  /* The two fixed chips share the strip above the header. */
  .settings-fab { top: 10px; right: 12px; padding: 8px 12px; font-size: 12.5px; }
  .acct-chip { top: 10px; right: 108px; padding: 8px 12px; font-size: 12.5px;
               max-width: 44vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  /* Birth details stack; the DD/MM/YYYY boxes stay on one line. */
  .row2, .col-grid { grid-template-columns: 1fr; }
  .dmy-in.dmy-d, .dmy-in.dmy-m { width: 3.4em; }
  .dmy-in.dmy-y { width: 5em; }

  /* Wide tables scroll inside their own box rather than stretching the page. */
  table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  table thead, table tbody { display: table; width: 100%; min-width: 460px; }

  /* The chart is square: let it use the full width and no more. */
  .grid2 { grid-template-columns: 1fr !important; }
  .chartbox { overflow-x: auto; max-width: 100%; }
  .chartbox svg { width: 100%; height: auto; max-width: min(100%, 520px); }

  /* Modals become near-full-screen sheets. */
  .fb-box, .crm-box, .consent-box { width: calc(100% - 20px); max-width: none;
    margin: 10px; padding: 18px 16px; max-height: 88vh; }
  .fb-actions { flex-wrap: wrap; gap: 8px; }
  .fb-actions .fb-status { flex: 1 1 100%; margin-right: 0; }

  /* Touch targets: nothing smaller than a fingertip. */
  button, .sc-btn, .fam-btn, .mode-btn, .cs-btn { min-height: 40px; }
  input, select, textarea { font-size: 16px; }   /* 16px stops iOS zooming on focus */

  /* Feed rows wrap rather than truncate. */
  .cf-row { flex-wrap: wrap; }
  .cf-who { min-width: 0; }
  .cf-what { flex: 1 1 100%; }

  /* The add-a-thing rows: each control takes a full line rather than squeezing
     four of them into 360px, which would leave every label unreadable. */
  .cl-add select, .cl-add input { flex: 1 1 100%; }
  .cl-add button { flex: 1 1 100%; }
  .cl-top h3 { font-size: 16px; }
}

@media (max-width: 480px) {
  .brand .title h1 { font-size: 18px; }
  .brand .mark svg { width: 28px; height: 28px; }
  .mode-toggle .mode-btn { font-size: 12px; padding: 8px 6px; }
  .mode-toggle .mode-btn .deva { display: none; }   /* keep one line per button */
  .acct-chip { max-width: 38vw; }
  .wrap { padding-left: 9px; padding-right: 9px; }
  h2 { font-size: 17px; }
}

/* Landscape phones are short: let modals scroll rather than clip. */
@media (max-height: 480px) and (orientation: landscape) {
  .fb-box, .crm-box { max-height: 94vh; overflow-y: auto; }
}