/* === PANEL READING VIEW ===
   Field request (Jason, 2026-07-27): "click on the info box and make it full
   screen with bigger font". Behaviour parity with iOS
   crewcalc/Design/PanelReading.swift @ 1b6db1e; mechanism is web-native.

   Its own file rather than more of static/index.html (CLAUDE.md extraction
   ratchet); loaded with a cache-busted <link> next to static/panel-reading.js,
   which owns the behaviour. Read that module's header before editing either.

   THE ONE RULE: this is a RE-LAYOUT, never a magnification. No transform,
   no scale(), no zoom. Every size below is a real font-size in `em`, so the
   text stays crisp and the lines re-wrap at whatever step the pilot picks. */

/* The header control that opens the reading view. It is a real focusable
   <button> so keyboard and screen-reader users get the same affordance the
   whole-panel click gives a mouse. */
.pr-titled{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:0.5rem;
}
.pr-open{
  flex:0 0 auto;
  background:transparent;
  border:1px solid rgba(0,229,255,0.35);
  border-radius:3px;
  color:var(--cyan);
  cursor:pointer;
  font-size:0.85rem;
  line-height:1;
  padding:0.2rem 0.4rem;
  opacity:0.75;
  transition:opacity 0.2s,border-color 0.2s;
}
.pr-open:hover{opacity:1;border-color:var(--cyan)}
/* A <summary> title keeps display:list-item so it keeps its own disclosure
   triangle; the control simply rides inline after the text. */
summary.card-title > .pr-open{margin-left:0.6rem;vertical-align:middle}
.pr-open:focus-visible{outline:2px solid var(--cyan);outline-offset:2px;opacity:1}

/* The reading surface itself. */
.pr-dialog{
  /* `font-size:medium` is the CSS absolute-size keyword: it resolves to the
     READER's own default browser font size. The app pins html{font-size:14px},
     which overrides that everywhere else — the reading view deliberately opts
     out, so a pilot who has already turned his browser text up starts from
     his own size, exactly as iOS starts from Dynamic Type. Everything below
     is `em` off this, times the chosen step. */
  font-size:medium;
  --pr-scale:1.2;
  position:fixed;
  inset:0;
  width:100%;
  max-width:100%;
  height:100%;
  max-height:100%;
  margin:0;
  padding:0;
  border:0;
  background:var(--bg);
  color:var(--text);
  overflow:hidden;
}
.pr-dialog:not([open]){display:none}
.pr-dialog[hidden]{display:none}
.pr-dialog::backdrop{background:#000}

.pr-bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:0.75em;
  padding:0.6em 0.9em;
  border-bottom:1px solid rgba(0,229,255,0.25);
  background:var(--bg);
  /* Chrome keeps its own size at every step: it has to stay reachable when
     the content it controls is at A+++. */
  font-size:0.85rem;
}
.pr-done{
  background:transparent;
  border:1px solid var(--cyan);
  border-radius:3px;
  color:var(--cyan);
  cursor:pointer;
  font-family:var(--font-ui);
  font-size:0.8rem;
  font-weight:700;
  letter-spacing:0.12em;
  min-height:2.6rem;
  padding:0 1.1rem;
  text-transform:uppercase;
}
.pr-done:hover{background:rgba(0,229,255,0.1)}
.pr-steps{display:flex;gap:0.3rem}
.pr-step{
  background:transparent;
  border:1px solid rgba(0,229,255,0.5);
  border-radius:3px;
  color:var(--cyan);
  cursor:pointer;
  font-family:var(--font-data);
  font-size:0.75rem;
  font-weight:700;
  min-width:2.6rem;
  min-height:2.6rem;
  padding:0 0.35rem;
}
.pr-step.pr-step-on{background:var(--cyan);border-color:var(--cyan);color:var(--bg)}
.pr-done:focus-visible,.pr-step:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}

.pr-scroll{
  height:calc(100% - 4.2rem);
  overflow-y:auto;
  overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
  padding:1.4em 1.1em 4em;
}
.pr-scroll:focus-visible{outline:none}
/* A comfortable measure so lines do not run the full width of a desktop
   display, centred like the iOS 760pt cap. The cap lives on its own box: an
   `em` max-width resolves against the element's OWN font-size, so putting it
   on the enlarged headline would widen the cap along with the headline. */
.pr-measure{
  max-width:48em;
  margin:0 auto;
}
.pr-title,.pr-heading,.pr-label,.pr-value,.pr-detail,.pr-row-note{
  overflow-wrap:anywhere;
}
.pr-title{
  font-family:var(--font-ui);
  font-size:calc(1.5em * var(--pr-scale));
  font-weight:700;
  color:var(--cyan);
  letter-spacing:0.1em;
  text-transform:uppercase;
  margin:0 0 1em;
  line-height:1.25;
}
.pr-heading{
  font-family:var(--font-ui);
  font-size:calc(1.05em * var(--pr-scale));
  font-weight:700;
  color:var(--cyan);
  letter-spacing:0.09em;
  text-transform:uppercase;
  margin:1.6em 0 0.6em;
  line-height:1.3;
}
.pr-row{
  padding:0.85em 0;
  border-bottom:1px solid rgba(0,229,255,0.16);
}
.pr-row:last-child{border-bottom:0}
.pr-label{
  font-family:var(--font-ui);
  /* Field labels are promoted from --text-dim to full --text: at night the
     label is as load-bearing as the figure (iOS PanelReadingContrast). */
  color:var(--text-bright);
  font-size:calc(0.9375em * var(--pr-scale));
  font-weight:600;
  letter-spacing:0.08em;
  text-transform:uppercase;
  line-height:1.35;
  margin-bottom:0.25em;
}
.pr-value{
  font-family:var(--font-data);
  font-size:calc(1.875em * var(--pr-scale));
  font-weight:700;
  line-height:1.2;
  font-variant-numeric:tabular-nums;
}
.pr-detail{
  font-size:calc(0.9375em * var(--pr-scale));
  color:var(--text);
  opacity:0.85;
  line-height:1.45;
  margin-top:0.35em;
}
.pr-row-note{
  font-size:calc(1em * var(--pr-scale));
  color:var(--text-bright);
  line-height:1.55;
  border-left:3px solid var(--cyan);
  padding-left:0.8em;
}
.pr-chip{
  display:inline-block;
  margin-left:0.5em;
  border:1px solid var(--amber);
  border-radius:2px;
  color:var(--amber);
  font-size:0.72em;
  letter-spacing:0.1em;
  padding:0.05em 0.3em;
  vertical-align:middle;
}
/* Semantic tints carried through, so an enlarged figure still means what it
   meant in the panel. */
.pr-tone-accent{color:var(--cyan)}
.pr-tone-positive{color:var(--green)}
.pr-tone-caution{color:var(--amber)}
.pr-tone-negative{color:var(--red)}
.pr-tone-neutral{color:var(--text-bright)}
.pr-row-note.pr-tone-positive{border-left-color:var(--green)}
.pr-row-note.pr-tone-caution{border-left-color:var(--amber)}
.pr-row-note.pr-tone-negative{border-left-color:var(--red)}
.pr-row-note.pr-tone-neutral{border-left-color:var(--text-dim)}
/* Tables re-flow into stacked column/cell pairs — never a sideways pan. */
.pr-trow{
  padding:0.7em 0;
  border-bottom:1px dashed rgba(0,229,255,0.14);
}
.pr-trow:last-child{border-bottom:0}
.pr-tcell{margin-bottom:0.5em}
.pr-tcell:last-child{margin-bottom:0}
.pr-tcell .pr-value{font-size:calc(1.25em * var(--pr-scale))}
@media (prefers-reduced-motion:reduce){
  .pr-open{transition:none}
}