/* The answer table gained a sixth column (INTERNAL STRUCTURAL), so it takes the width from
   the entry table rather than from its own figures. Entry is two input boxes and can spare
   it; the answer side is four capacity columns of four digits each and cannot. */
.qr-split{display:grid;gap:12px;grid-template-columns:minmax(0,.4fr) minmax(0,1.6fr);
  align-items:start}
@media(max-width:860px){ .qr-split{grid-template-columns:minmax(0,1fr)} }
#qrEntryTable,#qrLiftTable{table-layout:fixed}
/* `overflow-wrap:anywhere` is a guard, not styling. These headers already wrap on spaces,
   but a single word wider than its column cannot wrap at all — it silently overflows into
   the next heading, which is how PERFORMANCE came to read as "PERFORMANCHESLO 4" on a
   phone. Breaking a word mid-way is ugly; two headings printed on top of each other is
   unreadable, and on the panel a pilot checks before lifting that is the worse of the two. */
#qrEntryTable thead th,#qrLiftTable thead th{white-space:normal;line-height:1.2;
  overflow-wrap:anywhere}
/* Entry is now just the two boxes the pilot types in, side by side. Whichever one they
   leave empty is filled in by the answer table's own FUEL and FLIGHT TIME columns, so
   there is no MANUAL/AUTO pair to read twice. */
#qrEntryTable td.man{background:var(--panel2);padding:3px 4px}
#qrEntryTable td.man input{text-align:center}
/* Which box is driving the plan is marked on the CELL, not on the field inside it.
   It used to be the field: an accent border and bold type on whichever input was in
   charge. Two problems with that. The accent border is the app's focus colour, so a
   driving box looked focused whether or not the cursor was in it — and when the pilot
   DID click into it, the state it already wore was the state focus had to announce, so
   focus said nothing. And bold type on the entry made the number the pilot typed look
   heavier than the numbers the tool worked out, which is the wrong way round.
   The outline is the same idiom the performance chart uses to mark the cell it read
   (.perfgrid .hl) — an inset ring around the whole box, so it survives the input keeping
   its ordinary border and its ordinary weight. */
/* The ring goes round the BOX, at the box's own rounded edge — not round the table cell
   containing it. Both were tried. The cell outline is a hard square drawn at the cell
   border, which on a two-column table lands hard against the neighbouring column and the
   panel edge and reads as a table fault rather than a state; and while the cursor was in
   the field it sat outside the field's own focus ring, two blue rectangles deep. This is
   one ring in one place.
   The ring is ORANGE (--qrderived), the same colour the answer table tints the figures it
   worked out. That ties the box the plan is read FROM to everything derived from it, so
   the eye can follow one colour across the panel. It also keeps the ring off the app's
   blue, which is what focus draws: while the two shared a colour a driving box looked
   focused whether or not the cursor was in it, and when the pilot DID click into it the
   state it already wore was the state focus had to announce, so focus said nothing.
   The blue focus outline still applies, and this rule outranks it on specificity —
   deliberately, because which box is driving the plan outlives the caret being in it. */
#qrEntryTable td.man.driving input{outline:2px solid var(--qrderived);border-color:var(--qrderived)}
/* A manual entry the other one has overridden: still readable, clearly not in charge.
   Better than silently ignoring it or destroying what the pilot typed. The tag collapses
   to nothing when there is no message, so the common case costs no vertical space.
   This stays on the input: "not in charge" is about the value the pilot typed, whereas
   "in charge" is about which box the plan is being read from. Different claims, and the
   two never coexist on one cell — the overruled box is by definition not the driving one. */
#qrEntryTable td.man.overruled input{opacity:.45;border-color:var(--line);
  border-style:dashed;font-weight:400}
/* `white-space:normal` is the load-bearing declaration here, not a tidy-up. The app-wide
   `th,td` rule sets nowrap — right for a table of figures, wrong for a sentence — and the
   tag inherited it, so on a narrow column "OVERRULED BY FUEL" ran straight out of its cell
   and across the START FUEL box next door. It reads as a fault in the table rather than as
   a note about the entry above it, and on the cell it lands in it is actively misleading:
   the box it appears to be labelling is the one that WON. The panel's own headers opt out
   of nowrap for exactly the same reason a line above; this is the tag doing the same.
   Two lines is the normal case at this width, hence the tighter line-height. */
#qrEntryTable td.man .tag{display:block;font-size:9px;font-weight:800;letter-spacing:.4px;
  color:var(--warn);text-transform:uppercase;line-height:1.25;
  white-space:normal;overflow-wrap:anywhere}
#qrEntryTable td.man .tag:empty{display:none}
/* Answer table: the whole plan in one place. FUEL carries the litres at each moment,
   FLIGHT TIME spans both rows because there is only one duration — start to minimum
   fuel — and the four capacity columns follow. */
#qrLiftTable th.fuelhdr{width:16%}
#qrLiftTable th.timehdr{width:12%}
/* Every figure in this panel is something the tool worked out, so every figure sits on
   --ro, the calculated-cell background used throughout the app. The panel used to give
   each column its own shade — FUEL on --head, the capacities on the blue --liftbg — which
   made it the lightest block on the page and the one thing that did not look like the
   rest of the tool. The columns are still told apart, by the text colour they always
   had (near-white INT, purple EXT, green PERF, light blue HESLO); the cell shade is now
   free to carry the row instead. */
#qrLiftTable td.moment{background:var(--ro);text-align:center;white-space:nowrap}
/* The moment is a label, the litres are a reading. Only the reading carries weight, so
   the eye lands on the number rather than the word next to it. */
#qrLiftTable td.moment .lab{font-size:10px;font-weight:400;letter-spacing:.4px;text-transform:uppercase}
/* Fuel figures carry the same weight and size as the capacity figures beside them — they
   are readings of equal importance, not captions for the row. */
#qrLiftTable td.moment .lit{font-size:14px;font-weight:700;font-variant-numeric:tabular-nums;
  color:var(--ink);margin-left:6px}
/* STOP fuel is red because it is the minimum — the reserve you are planning down to. */
#qrLiftTable td.moment .lit.min{color:var(--bad)}
#qrLiftTable td.qrtime{background:var(--ro);color:var(--ink);font-size:16px;font-weight:800;
  font-variant-numeric:tabular-nums}
#qrLiftTable td.qrtime.idle{color:var(--muted);font-weight:400;font-size:13px}
/* (1,1,1) — beats the app-wide `td.lift` (0,1,1) that would otherwise paint --liftbg. */
#qrLiftTable td.lift{background:var(--ro);font-variant-numeric:tabular-nums}
/* ===== Zebra striping: STOP row =====
   The same band the leg and nav ladders use: --navbandro over --ro. It can be a flat
   colour now that every cell beneath it is --ro; while the columns each carried their own
   shade it had to be a translucent layer instead, or the band would have erased them.
   The generic `tbody tr:nth-child(even)` stripe still cannot do this — every cell paints
   its own background, which covers the row's — so the override stays per-cell.
   `.neg` is excluded on purpose: an over-limit cell must look identical wherever it
   appears, so a red warning is never two slightly different reds.
   FLIGHT TIME is not banded and should not be: it spans both rows, so it belongs to
   neither. Specificity (1,2,3) clears every base rule above. */
#qrLiftTable tbody tr:nth-child(even) td:not(.neg){background:var(--navbandro)}
/* One of these two figures is what the pilot typed; the other the tool worked out. The
   computed one is tinted so the panel never presents a requirement as a measurement —
   "you need 195 L" and "you have 195 L" are different claims.
   The tint is ORANGE (--qrderived), not the app's blue --accent it started as. Blue is
   this panel's own ring colour on the entry box a few centimetres to the left, so the two
   states that most need telling apart — the figure you TYPED and the figure the tool
   worked out FROM it — were being drawn in one colour. Orange puts the derived figure in
   the same family as the "overruled by fuel" tag: both are the panel reporting back on
   what it did with the entry, as against the blue that marks the entry itself.
   Each selector deliberately mirrors the base rule it has to beat. A shorter
   `#qrLiftTable .derived` (1 id, 1 class) loses on specificity to
   `#qrLiftTable td.moment .lit` (1 id, 2 classes, 1 element), and the tint then silently
   never appears however correct it looks. tests/layout.js compares the two. */
#qrLiftTable td.moment .lit.derived{color:var(--qrderived)}
#qrLiftTable td.qrtime.derived{color:var(--qrderived)}
/* No "governing limit" marker. On every 2800 kg aircraft the performance figure is by
   definition the lower of the two — the chart is capped at 2800 — so highlighting it
   merely restated the obvious on every plan. The real answer is still the lowest number
   on the row; both are on screen. (Note for anyone reading the numbers on a 2500 kg
   aircraft such as LN-OSM: there EXTERNAL is the lower limit in most conditions.) */
@media(max-width:430px){
  /* Back at 9px. It went to 8 while the capacity columns were headed INTERNAL STRUCTURAL /
     EXTERNAL STRUCTURAL / HESLO 4 (PERF − 10%), which needed three wrapped lines on a phone
     and pushed the figures down the cell. The one-word headings fit at the ordinary size. */
  #qrEntryTable thead th,#qrLiftTable thead th{font-size:9px;letter-spacing:.2px}
  /* Six columns on a phone: give the fuel and time columns a little less and let the
     START / STOP litres stack under their label rather than sitting beside it. */
  #qrLiftTable th.fuelhdr{width:17%}
  #qrLiftTable th.timehdr{width:13%}
  #qrLiftTable td.moment .lit{display:block;margin-left:0}
  #qrLiftTable td.qrtime{font-size:15px}
  /* Six columns on a 320px screen leaves the capacity cells short of holding a four-digit
     figure at the app's normal 7px side padding. Buy the width back from the padding, and
     from a point off the digits, rather than from the digits entirely — the numbers are the
     reason the panel exists, and four figures that fit beat four that clip. */
  #qrLiftTable td.lift{font-size:13px;padding-left:1px;padding-right:1px}
  #qrLiftTable td.qrtime{padding-left:2px;padding-right:2px}
  #qrLiftTable td.moment{padding-left:3px;padding-right:3px}
}