/* The mobile layout.
 *
 * Loaded with media="(max-width: 900px)" on the <link>, so a desktop browser never
 * applies — or even downloads — a single rule in here. That is the point: mobile work
 * cannot regress the desktop layout, because desktop never sees it.
 *
 * Everything else is shared: same routes, same templates, same data. Only presentation
 * forks, and only below 900px.
 */

/* ---------------------------------------------------------------- report shell */

/* The sidebar becomes a header strip. Sticky full-height navigation is wrong on a
   handset — it eats the screen and the page it is navigating is below it anyway. */
.ww-shell { display: block; }

.ww-nav {
  position: static;
  width: auto;
  height: auto;
  border-right: 0;
  border-bottom: 1px solid var(--border);
  padding: 18px 16px 14px;
}

.ww-main { padding: 20px 16px 96px; max-width: none; }

/* Report section links run as a wrapped row rather than a stacked list. */
.ww-nav-group { margin-bottom: 14px; }
.ww-nav-group h3 { padding-left: 0; margin-bottom: 6px; }
.ww-nav-group > a { display: inline-flex; margin: 0 6px 6px 0; }
.ww-nav a { padding: 8px 12px; }

.ww-people { padding-bottom: 14px; margin-bottom: 16px; }

/* ---------------------------------------------------------------- report content */

.ww-page-head h1 { font-size: 25px; }
.ww-page-head p { font-size: 15px; }
h2.ww-section { font-size: 18px; margin-top: 32px; }

.ww-tiles { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.ww-tile-value { font-size: 23px; }
:root[data-units="stlb"] .ww-tile-value { font-size: 19px; }

.ww-grid-2, .ww-panel-grid { grid-template-columns: 1fr; }
.ww-card { padding: 16px 15px 13px; }
.ww-callout { padding: 15px 16px; }

/* Charts keep their aspect ratio but the axis text needs to survive the shrink. */
.ww-chart { min-height: 200px; }
.ww-axis-label { font-size: 15px; }
.ww-mini .ww-axis-label { font-size: 11px; }
.ww-direct-label { font-size: 15px; }
.ww-goal-label { font-size: 14px; }
.ww-rug-label { font-size: 13px; }

/* Wide tables scroll inside their own box; the page itself never does. */
.ww-table-wrap { -webkit-overflow-scrolling: touch; }
.ww-table th, .ww-table td { padding: 8px 11px; font-size: 13.5px; }

.ww-theme-toggle { margin-top: 12px; }

/* ---------------------------------------------------------------- the web app */

.ww-app { padding: 16px 14px 90px; }
.ww-app.is-wide { max-width: none; }

.ww-appbar { gap: 4px; margin-bottom: 18px; padding-bottom: 12px; }
.ww-appbar .ww-logo { flex: 1 0 100%; margin: 0 0 8px; }
.ww-appbar a.ww-tab { padding: 8px 11px; font-size: 14px; }
.ww-appbar .ww-spacer { display: none; }

.ww-grid-fields { grid-template-columns: 1fr; }
.ww-split { grid-template-columns: 1fr; }
.ww-person-cards { grid-template-columns: 1fr; }

/* Full-width controls: comfortably tappable, and wide enough not to need aiming. */
.ww-btn { width: 100%; text-align: center; padding: 13px 18px; }
.ww-actions { flex-direction: column; align-items: stretch; }
.ww-field input, .ww-field select { padding: 12px 11px; font-size: 16px; }

/* 16px on inputs specifically: anything smaller makes iOS Safari zoom the page on
   focus, which then leaves the layout scrolled sideways. */
.ww-bug-text { font-size: 16px; }

.ww-dl { grid-template-columns: 1fr; gap: 2px 0; }
.ww-dl dt { margin-top: 8px; }
.ww-dl dd { min-width: 0; overflow-wrap: anywhere; }
.ww-code { font-size: 12.5px; }

/* ---------------------------------------------------------------- phone-sized */

@media (max-width: 640px) {
  .ww-app { padding: 14px 12px 90px; }
  h1 { font-size: 22px !important; }
  .ww-tiles { grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); }
  .ww-tile-value { font-size: 21px; }

  /* Keep the bug button clear of the home indicator on a modern handset. */
  .ww-bug-button { left: 14px; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); }
  .ww-bug-panel { left: 12px; right: 12px; width: auto; bottom: calc(66px + env(safe-area-inset-bottom, 0px)); }
}

/* ---------- metric detail views on a phone ---------- */

/* .ww-chart has a min-height so small charts stay legible, but an SVG that scales down
   by aspect ratio then letterboxes inside it -- the detail charts ended up with ~65px of
   dead space above and below. They are full-width already, so let them size themselves. */
.ww-panel-detail .ww-chart { min-height: 0; }

/* Three columns of "label / value / date" forced every date onto two lines and made each
   row triple height. Stack instead: label above, value and note on one line below. */
.ww-panel-table, .ww-panel-table tbody, .ww-panel-table tr, .ww-panel-table th,
.ww-panel-table td { display: block; width: 100%; }
.ww-panel-table tr {
  padding: 9px 0; border-bottom: 1px solid var(--border);
  display: grid; grid-template-columns: 1fr auto; align-items: baseline;
  column-gap: 12px;
}
.ww-panel-table tr:last-child { border-bottom: 0; }
.ww-panel-table th {
  grid-column: 1; padding: 0; font-size: 14px; font-weight: 500; white-space: normal;
}
.ww-panel-table td { grid-column: 2; padding: 0; text-align: right; font-weight: 600; }
.ww-panel-table td.ww-muted {
  grid-column: 1 / -1; text-align: left; font-weight: 400; font-size: 12.5px;
  margin-top: 2px;
}
.ww-panel-table td.ww-muted:empty { display: none; }

.ww-panel-detail { padding: 16px 14px 18px; }
.ww-panel-what { font-size: 14.5px; }

/* ---------- fixed-length windows on a phone ---------- */

.ww-window-grid { grid-template-columns: 1fr; }
.ww-window { padding: 15px 15px 17px; }
.ww-window-value { font-size: 26px; }
.ww-window-facts { grid-template-columns: 1fr auto; column-gap: 12px; }
.ww-window-facts dd { text-align: right; }

/* A gap row spans the table, so it must not inherit the wide-table minimum width. */
.ww-row-gap td { white-space: normal; }

/* ---------- overview hero on a phone ---------- */

.ww-hero-big { font-size: 30px; }
.ww-hero-sub { font-size: 15px; }
.ww-wins { grid-template-columns: 1fr 1fr; gap: 9px; }
.ww-win { padding: 12px 12px 11px; }
.ww-win-value { font-size: 22px; }
.ww-strip { grid-template-columns: 1fr 1fr; }
.ww-overlays { gap: 6px; }
.ww-overlay-chip { font-size: 12.5px; padding: 5px 10px; }

/* ---------- per-person page on a phone ---------- */

.ww-person-head { flex-direction: column; align-items: stretch; gap: 12px; }
.ww-person-now { font-size: 32px; }
.ww-card-upload-row { flex-direction: column; align-items: stretch; }
/* The desktop rule sets flex-basis 190px, which in a column becomes 190px of *height*
   and leaves a gaping hole between the file picker and the button. */
/* Specificity has to beat the inline <style> in base.html, which is later in the head
   and would otherwise win on an equal count. */
.ww-card-upload .ww-card-upload-row input[type=file] { flex: 0 0 auto; width: 100%; }
.ww-card-upload .ww-card-upload-row .ww-btn { width: 100%; }

/* Thumb-sized controls. 28px is fine for a mouse and mean on a phone. */
.ww-appearance button,
.ww-appearance-mini button,
.ww-units button { min-height: 40px; }
.ww-overlay-chip { min-height: 36px; }

/* Report upload box stacks on a phone. */
.ww-report-upload-row { flex-direction: column; align-items: stretch; }
.ww-report-upload .ww-report-upload-row input[type=file] { flex: 0 0 auto; width: 100%; }
.ww-report-upload .ww-report-upload-row .ww-btn { width: 100%; }


/* A 150px thumbnail sits happily beside the values well below this sheet's 900px gate,
   so the stack waits until there is genuinely no room for both. Stacking at 900px was
   what left Pete with a full-width picture and the readings underneath it. */
@media (max-width: 560px) {
  .ww-review-body { grid-template-columns: 1fr; }
  .ww-review-shot, .ww-review-shot img { width: 100%; max-height: 240px; object-fit: contain; }
}
.ww-read-values { grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); }


/* ===================== the navigation becomes a drawer =====================
   On a phone the nav column stacked above the content, so you scrolled past the entire
   menu — people list, Yours, Start here, Detail, History — before reaching a single
   number. The data comes first now and the menu is behind a button. */

.ww-burger {
  display: inline-flex; flex-direction: column; justify-content: center; gap: 4px;
  width: 40px; height: 36px; padding: 0 9px; margin-right: 2px;
  border: 1px solid var(--border); border-radius: 9px;
  background: var(--surface); cursor: pointer;
}
.ww-burger span {
  display: block; height: 2px; border-radius: 2px; background: var(--ink);
}

/* A compact single row. It was wrapping onto three, which ate a third of the screen
   before anything had been said. */
.ww-topbar { gap: 7px; padding: 7px 12px; }
.ww-topbar .ww-wordmark { font-size: 15px; }
.ww-topbar-where { display: none; }
/* These live in the drawer on a phone; up here they force the header to wrap. */
.ww-topbar .ww-spend,
.ww-topbar .ww-regen,
.ww-topbar .ww-appearance-mini,
.ww-topbar a.ww-tab { display: none; }
.ww-topbar .ww-signout { margin-left: auto; }

/* Off to the side until asked for. Not display:none — it has to slide, and a hidden
   element cannot be focused into by a keyboard. */
.ww-nav, .ww-sidemenu {
  position: fixed; top: 0; left: 0; bottom: 0; z-index: 60;
  width: min(300px, 86vw); max-width: none; padding: 16px 18px 90px;
  overflow-y: auto; background: var(--surface);
  border-right: 1px solid var(--border);
  transform: translateX(-102%); transition: transform 180ms ease;
  box-shadow: 0 0 40px rgba(0,0,0,0.22);
}
body.ww-drawer-open .ww-nav,
body.ww-drawer-open .ww-sidemenu { transform: translateX(0); }

.ww-drawer-veil {
  position: fixed; inset: 0; z-index: 55; background: rgba(0,0,0,0.45);
  border: 0; padding: 0; opacity: 0; pointer-events: none; transition: opacity 180ms ease;
}
body.ww-drawer-open .ww-drawer-veil { opacity: 1; pointer-events: auto; }
body.ww-drawer-open { overflow: hidden; }

/* The content takes the whole width, because nothing is beside it any more. */
.ww-shell, .ww-app.has-menu { display: block; }
.ww-main, .ww-app-main { grid-column: auto; width: auto; padding: 0 14px 70px; }

/* Everything the header gave up, given a home in the drawer. */
.ww-drawer-extras {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid var(--border);
}
.ww-drawer-extras .ww-regen button { font-size: 13px; padding: 7px 12px; }


/* ===================== the Overview graph on a phone =====================
   The customise chips are 300px of controls between the headline stats and the graph
   they configure. Folded behind one button; the period bar stays out because it is the
   control people actually tap. */

.ww-customise-toggle {
  display: block; width: 100%; margin: 0 0 12px;
  font: inherit; font-size: 14px; font-weight: 620; text-align: left;
  padding: 10px 14px; border: 1px solid var(--border); border-radius: 10px;
  background: var(--surface); color: var(--ink); cursor: pointer;
}
[data-customise-body] { display: none; }
[data-customise-body].is-open { display: flex; }

/* The graph itself: shorter, so the period bar and the chart share a screen. */
.ww-explore-host svg { max-height: 300px; }
.ww-explore-host { min-height: 0; }