/* app.css — Range Card
 *
 * Layout only. Colours come from theme.css; nothing here may hardcode a hex
 * value, or it will break the moment the theme switches.
 */

/* black-translucent puts the status bar over the page, so the safe-area insets
 * are what keep the masthead out from under the clock and the notch. They
 * evaluate to zero everywhere else, so this costs nothing in a browser. */
body {
  padding-top: env(safe-area-inset-top);
  padding-right: calc(16px + env(safe-area-inset-right));
  padding-bottom: calc(24px + env(safe-area-inset-bottom));
  padding-left: calc(16px + env(safe-area-inset-left));
}

/* An explicit display on a class beats the hidden attribute, which silently
 * breaks every hidden element in the page. Put hidden back in charge. */
[hidden] { display: none !important; }

.wrap { max-width: var(--maxw); margin: 0 auto; }

.masthead {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--gap);
  padding: 24px 0 16px;
  border-bottom: 1px solid var(--line-strong);
  margin-bottom: 20px;
}

.masthead h1 { margin: 0; line-height: 1; }
.masthead p { margin: 4px 0 0; font-size: 13px; color: var(--text-faint); }

/* Phone first: the two panes sit side by side in a horizontal scroller with
 * snap points, so one swipe moves between setup and card. On a laptop there is
 * room for both at once, so the scroller becomes a plain two-column grid and
 * the pager disappears. Same markup, same state, both ways. */
.columns {
  display: flex;
  gap: 20px;
  align-items: start;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.columns::-webkit-scrollbar { display: none; }
.columns > * { flex: 0 0 100%; scroll-snap-align: start; }

/* Two dots under the panes rather than a pager bar: it says you can swipe
 * without spending a row of screen on saying it. Still buttons, so they can be
 * tapped and read out. */
.pager { display: flex; justify-content: center; gap: 7px; padding: 9px 0 3px; flex: none; }
.pager button {
  width: 7px;
  height: 7px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--line-strong);
  transition: width .15s ease, background-color .15s ease;
}
.pager button[aria-pressed="true"] { width: 20px; background: var(--accent); }
.pager button:hover { background: var(--text-dim); }
.pager button[aria-pressed="true"]:hover { background: var(--accent); }

/* One plot at a time, on any screen. The segmented pair is the only control,
 * so what it says is what you get. */
.col-results.has-reticle .chart { display: none; }

@media (min-width: 860px) {
  .columns {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    overflow-x: visible;
    scroll-snap-type: none;
  }
  .columns > * { flex: none; }
  .col-inputs { position: sticky; top: 16px; }
  .pager { display: none; }
}

.stack { display: flex; flex-direction: column; gap: var(--gap); }

/* Flex children shrink by default. Once a pane has a fixed height that turns
 * into everything inside being squeezed to fit instead of the pane scrolling:
 * readouts clipped mid-digit, the graph flattened to a strip, the table down to
 * nothing. These blocks keep their natural height and the pane scrolls. */
.stack > * { flex-shrink: 0; }

/* Grid and flex children default to min-width: auto, so a wide child (the
 * table, a number input at its intrinsic size) can push the whole page wider
 * than the viewport instead of shrinking or scrolling inside its own box.
 * Landscape has enough room to hide it; portrait does not. */
.columns > *, .stack > *, .fields > *, .row > * { min-width: 0; }
input, select { min-width: 0; }

fieldset {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  padding: 12px 14px 14px;
  margin: 0;
}

legend { padding: 0 6px; font-size: 12px; color: var(--text-faint); }

.fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.fields .wide { grid-column: 1 / -1; }

.row { display: flex; gap: 8px; align-items: center; }
.row > * { flex: 1; }
.row > .shrink { flex: 0 0 auto; }

/* Summary readouts above the chart */
.readouts { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.readout { background: var(--panel); padding: 10px 12px; }
.readout span { display: block; font-size: 12px; color: var(--text-faint); }
.readout strong { display: block; font-family: var(--font-num); font-size: 20px; font-weight: 500; color: var(--accent); font-variant-numeric: tabular-nums; }
.readout strong small { font-size: 12px; color: var(--text-dim); font-weight: 400; }

.chart { width: 100%; height: auto; display: block; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); }

.table-wrap { border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-wrap table { min-width: 520px; }
.table-wrap th:first-child, .table-wrap td:first-child { padding-left: 14px; }
.table-wrap th:last-child, .table-wrap td:last-child { padding-right: 14px; }
tr.is-zero td { color: var(--accent); }
tbody tr:last-child td { border-bottom: 0; }

details > summary {
  cursor: pointer;
  font-size: 13px;
  color: var(--text-dim);
  padding: 4px 0;
  list-style-position: inside;
}
details > summary:hover { color: var(--accent); }
details[open] > summary { margin-bottom: 10px; }

.hint { font-size: 12px; color: var(--text-faint); margin: 8px 0 0; }
.hint strong { color: var(--text-dim); font-weight: 500; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Icon-only buttons, sized to match a text input next to them */
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  color: var(--text-dim);
}
.icon-btn:hover { color: var(--accent); border-color: var(--accent); }
.icon-btn.armed { color: var(--bad); border-color: var(--bad); }

#profileNote:empty { display: none; }

/* Phones: each pane keeps its own scroll position.
 *
 * With the page as one long document both panes share the document's scroll,
 * so scrolling the setup pane moves the card pane with it and swiping lands
 * you halfway down the other screen. Pinning the shell to the viewport and
 * letting each pane scroll inside itself gives them separate positions, and
 * keeps the pager reachable instead of scrolled off the top. */
@media (max-width: 859.98px) {
  html, body { height: 100%; }

  body {
    height: 100vh;
    height: 100dvh;
    /* --app-height tracks the visual viewport, so the shell shrinks when the
     * keyboard covers half the screen instead of leaving a blank block behind
     * it. See setAppHeight() in app.js. */
    height: var(--app-height, 100dvh);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding-bottom: 0;
  }

  .wrap { display: flex; flex-direction: column; flex: 1; min-height: 0; width: 100%; }

  .columns { flex: 1; min-height: 0; align-items: stretch; }

  .columns > * {
    height: 100%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    padding-bottom: calc(24px + env(safe-area-inset-bottom));
  }
}

/* Portrait phones */
@media (max-width: 460px) {
  /* No bottom padding here: this block comes after the phone layout above and
   * would put back the padding that has to stay zero while the shell is pinned
   * to the viewport, cutting the bottom off the scrolling pane. */
  body {
    padding-right: calc(12px + env(safe-area-inset-right));
    padding-left: calc(12px + env(safe-area-inset-left));
  }
  .masthead { padding: 18px 0 12px; margin-bottom: 16px; }
  .fields { gap: 8px; }
  .table-wrap table { min-width: 430px; }
  .table-wrap th, .table-wrap td { padding: 6px; }
  .readout strong { font-size: 17px; }
  .readouts { grid-template-columns: repeat(3, 1fr); }
  .readout { padding: 7px 8px; }
  .readout span { font-size: 11px; }
  .readout strong small { font-size: 11px; }
  .panel-head { gap: 8px; }
}

/* Result view switch */
.panel-head { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

.seg { display: inline-flex; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); overflow: hidden; }
.seg button {
  border: 0; border-radius: 0; padding: 6px 12px; font-size: 13px;
  background: transparent; color: var(--text-dim);
}
.seg button[aria-pressed="true"] { background: var(--panel-raised); color: var(--accent); }

.toggle { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-dim); margin: 0; }
.toggle input { width: auto; accent-color: var(--accent); }

.reticle {
  display: block;
  width: 100%;
  height: auto;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
#reticleNote { text-align: center; }