/* --------------------------------------------------------------------------
   The mobile version
   --------------------------------------------------------------------------
   Phones get a site of their own, laid over style.css. base.html loads this
   file for screens up to 720px wide, for every screen when someone picks the
   mobile site in the footer, and never when they pick the desktop site.

   It has its own navigation: the top bar is the name and a Menu button that
   opens every link as a full width row, and the admin portal's and the
   guide's side lists become a menu at the top of the page that names the page
   you are on. Everything else is the desktop page reflowed for a finger:
   every row of controls becomes a column, nothing scrolls sideways, text
   inputs are 16px so iOS does not zoom when they are tapped, and anything
   tappable is at least 40px tall. Nothing is hidden that a phone cannot get
   at some other way.

   Pieces made for only one version carry .desktoponly or .mobileonly. */
:root { --control-font: 16px; --control-height: 40px; }
.desktoponly { display: none !important; }
.mobileonly { display: revert !important; }

main { padding: 12px 12px 48px; }
footer { padding: 0 16px 24px; }
h1 { font-size: 20px; }
.panel { padding: 12px; border-radius: 10px; }


/* Session header: title, then status underneath rather than beside. */
.sessionhead { flex-direction: column; gap: 6px; }
.statusbox { text-align: left; max-width: none; }

/* Every control column goes full width, and taps get room. */
.grid, .grid.bounds { grid-template-columns: 1fr; }
.modegrid { grid-template-columns: 1fr; }
.tokens, .scenarios, .doccards, .dashboard .dashgrid { grid-template-columns: 1fr; }
.stats > div { flex: 1 1 140px; min-width: 0; }
button, .button { min-height: 40px; padding: 8px 14px; white-space: normal; }
.runbadge { white-space: normal; }
button.link, .rangepick .link { min-height: 32px; }
.actions { gap: 8px; }
.actions form, .actions .button { flex: 1 1 auto; }
.actions button, .actions .button { width: 100%; text-align: center; }
input[type=text], input[type=password], input[type=number], input[type=email],
input[type=time], input[type=datetime-local], input[type=search], select { font-size: 16px; min-height: 40px; }
input[type=file] { width: 100%; font-size: 15px; min-height: 40px; padding: 8px 0; }
.inline { flex-direction: column; align-items: stretch; }
.inline input[type=text] { min-width: 0; }

/* Rows of small fields stack, each field taking the width. */
.saverow, .presets { flex-direction: column; align-items: stretch; }
.presets select, .presets input[type=text] { width: 100%; min-width: 0; }
.deadrow, .schedrow, .stagerow, .replayupload { flex-direction: column; align-items: stretch; }
.deadrow input, .deadrow select, .deadspeed input,
.schedrow input, .schedrow input.schedlabel, .stagerow input[type=number] {
  max-width: none; width: 100%;
}
.deadspeed { justify-content: space-between; }
.field.compact { width: 100%; }
.scenario { flex-direction: column; align-items: stretch; gap: 8px; }
.scenario button { width: 100%; }
.speedslider { gap: 8px; }
.speedslider input[type=range] { flex: 1 1 100%; max-width: none; }
.speedslider .speedbox { width: 90px; }

/* The chart: shorter plot, wrapped legend, and the table scrolls on its own
   rather than pushing the page sideways. */
.plot { height: 72px; }
.legend { gap: 8px 12px; }
.rangepick { margin-left: 0; }
.hero { font-size: 22px; }
figure.chart .asof { margin-left: 0; }
.charttools .muted { margin-left: 0; }
.tabledata, table.distdata { display: block; overflow-x: auto; }

/* The admin user list reads as one card per account, since seven columns
   never fit. Each cell carries its own heading from data-label. */
.adminwrap, .docswrap { grid-template-columns: 1fr; }
table.admintable, table.admintable tbody, table.admintable tr, table.admintable td {
  display: block; width: 100%;
}
table.admintable thead { display: none; }
table.admintable tr {
  border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px; margin-bottom: 8px;
}
/* The heading sits in its own column on the left and the value keeps its
   normal text flow, so a cell made of several bits still reads as a
   sentence instead of breaking into little columns. */
table.admintable td {
  border: none; padding: 3px 0 3px 42%; position: relative; min-height: 20px;
}
table.admintable td::before {
  content: attr(data-label); position: absolute; left: 0; top: 3px;
  width: 38%; color: var(--muted); font-size: 12px;
}
dl.meta { grid-template-columns: 1fr; gap: 2px 0; }
dl.meta dt { margin-top: 6px; }

/* Tick boxes and the headings that open a section are the two things a
   finger misses most, so both get room. */
input[type=checkbox], input[type=radio] { width: 20px; height: 20px; flex: 0 0 auto; }
input[type=range] { height: 32px; }
.toggle, .chip, .choice { display: flex; align-items: center; gap: 8px; min-height: 40px; }
.days { gap: 8px; }
summary { padding: 9px 0; }
details.placeholders > summary, .distance > summary, .advanced > summary { padding: 10px 0; }

.fitpreview strong { font-size: 16px; }
.issue { flex-direction: column; }
/* One service card a row; Check now spans the card, at its foot like the others. */
.servicecards { grid-template-columns: 1fr; }
.servicecard > form.servicecheck button { width: 100%; text-align: center; }
.issue .button.primary { width: 100%; text-align: center; }

/* --- the top bar and its menu ------------------------------------------------ */
.topbar { gap: 10px; padding: 8px 12px; position: relative; }
.topbar .brand { font-size: 17px; }
details.sitemenu { margin-left: auto; border: 0; padding: 0; margin-top: 0; }
details.sitemenu > summary, details.sectionmenu > summary {
  list-style: none; display: flex; align-items: center; gap: 10px;
  min-height: 40px; padding: 8px 14px; border: 1px solid var(--line); border-radius: 7px;
  background: var(--bg); color: var(--ink); font-size: 16px; font-weight: 550;
}
details.sitemenu > summary::-webkit-details-marker,
details.sectionmenu > summary::-webkit-details-marker { display: none; }
/* Three bars, drawn rather than typed, so no symbol font is needed. */
.menuicon { width: 18px; height: 2px; background: currentColor; border-radius: 1px;
  box-shadow: 0 -6px 0 currentColor, 0 6px 0 currentColor; flex: 0 0 auto; }
details.sitemenu[open] > summary, details.sectionmenu[open] > summary { border-color: var(--accent); }
.sitemenulist {
  position: absolute; z-index: 40; right: 12px; top: calc(100% + 4px);
  width: min(340px, calc(100vw - 24px)); max-height: calc(100vh - 80px); overflow-y: auto;
  display: flex; flex-direction: column; gap: 2px; padding: 8px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .25);
}
.sitemenulist .who { display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  padding: 8px 12px 10px; margin: 0 0 4px; border-bottom: 1px solid var(--line); color: var(--ink); }
.sitemenulist a, .sitemenulist button.link {
  display: flex; align-items: center; width: 100%; min-height: 44px; padding: 0 12px;
  border-radius: 7px; font-size: 16px; font-weight: 500; color: var(--ink); text-decoration: none; text-align: left;
}
.sitemenulist a:hover, .sitemenulist button.link:hover { background: var(--bg); }
.sitemenulist form { margin: 4px 0 0; padding-top: 4px; border-top: 1px solid var(--line); }
.sitemenulist button.link { color: var(--danger); }

/* --- the admin portal's and the guide's page menu --------------------------- */
details.sectionmenu { border: 0; padding: 0; margin: 0 0 12px; }
details.sectionmenu > summary { justify-content: space-between; background: var(--panel); }
details.sectionmenu > summary .sectionnow { color: var(--accent); min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
details.sectionmenu > summary::after { content: ""; flex: 0 0 auto; border: 6px solid transparent;
  border-top-color: var(--muted); margin-top: 6px; }
details.sectionmenu[open] > summary::after { border-top-color: transparent; border-bottom-color: var(--muted);
  margin-top: -6px; }
details.sectionmenu .adminnav, details.sectionmenu .docsnav { margin-top: 6px; }
.adminnav a, .docsnav a { display: flex; align-items: center; min-height: 44px; font-size: 16px; }
.adminnav ul { flex-direction: column; }

/* The switch back to the desktop site, at the foot of every page. */
.viewswitch a { display: inline-flex; align-items: center; min-height: 40px; }

/* Narrow phones: the legend and the token rows get their own line each. */
@media (max-width: 420px) {
  .legend .key { flex: 1 1 100%; }
  .tokenrow .tokenalias { display: none; }
}
/* A bar's number, put up by a tap, in the larger mobile type. */
.reqtip { font-size: 15px; white-space: normal; }