/* ============ EMERGENCIES — CWP AND VEMD ============
   Two panels a pilot already knows by sight, and the flight manual's actions underneath.

   ONE COLOUR RULE RUNS THROUGH ALL OF IT. Yellow means a caution lens, red means a warning
   lens, and neither is ever used for anything else here — not for a heading, not for a
   hover state, not for the tab. Green is the only colour that means "this is the one you
   pressed", precisely because no lens on either panel is ever green, so the highlight can
   never be misread as a light that is actually on.

   The two panels themselves are BLACK IN BOTH THEMES. Everything else in the app follows
   the pilot's light or dark preference; these do not, because they are pictures of physical
   equipment and that equipment is black. A CWP on a white background is not the panel.
   Only the procedure text below follows the theme. */

/* ---------- the tabs ---------- */
/* Red, and unlike every other tab in the bar — that is the whole point of them. The active
   state fills rather than merely outlining, so at a glance you can see you are in the
   emergency section and not in the planning section. */
.tab.tab-em,.tabgroup.tab-em{
  background:var(--em-tab); color:var(--em-tab-ink); border-color:var(--em-tab-line);
}
/* Red rather than the orange that marks where you are everywhere else on the bar. The whole
   point of these two is that they are the only red thing on the screen, and a tab that turned
   orange the moment it was opened would be red only while you were not in it. */
.tab.tab-em.active,.tabgroup.tab-em.current,.tabgroup.tab-em.open{
  background:var(--em-tab-on); color:#fff; border-color:var(--em-tab-on);
}
:root{
  --em-tab:#3a1418; --em-tab-ink:#ff9a9a; --em-tab-line:#6d2028; --em-tab-on:#c62230;
  --em-lens:#0d0d0d; --em-bezel:#8d8d8d; --em-bezel2:#6a6a6a;
  --em-y:#ffd400; --em-r:#ff2a2a; --em-on:#22c55e; --em-on-ink:#04130a;
  --em-scr:#000; --em-scr-line:#e9e9e9; --em-scr-ink:#fff; --em-scr-cy:#35c6f4;
}
html[data-theme="light"]{
  --em-tab:#fdeaea; --em-tab-ink:#a01722; --em-tab-line:#e9a9ae; --em-tab-on:#c62230;
}

/* ---------- panel frame ---------- */
/* The bezel around the CWP is the grey metal plate it is screwed to, and the reason the
   whole thing is centred with a max-width: past about 760px the lenses stop looking like
   lenses and start looking like buttons on a web page. */
.em-frame{
  background:var(--em-bezel);
  border:1px solid var(--em-bezel2); border-radius:6px;
  padding:12px; margin:0 auto 4px; max-width:760px;
  box-shadow:inset 0 0 0 3px var(--em-bezel2), var(--shadow);
  overflow-x:auto;
}
.em-cwp{ display:flex; flex-direction:column; gap:6px; min-width:520px; }
.em-cwp-r{ display:flex; gap:6px; }

/* ---------- one lens ---------- */
/* Fixed aspect rather than fixed height so eight of them always fit the width they are
   given, on a phone as well as a desktop. font-size scales with the viewport for the same
   reason — the label has to stay inside the lens at every size, and a lens with its text
   spilling out of it is not recognisable as the panel. */
.em-cell{
  flex:1 1 0; min-width:0; aspect-ratio:5/3;
  display:flex; align-items:center; justify-content:center; text-align:center;
  background:var(--em-lens); border:1px solid #000; border-radius:3px;
  font-weight:800; letter-spacing:.5px; line-height:1.05;
  font-size:clamp(9px, 1.55vw, 14px);
  font-family:"Helvetica Neue", Arial, sans-serif;
  padding:2px; margin:0; cursor:pointer;
  transition:background .12s, color .12s, box-shadow .12s;
}
.em-y{ color:var(--em-y); }
.em-r{ color:var(--em-r); }
.em-cell.em-inert, .em-cell.em-blank{ cursor:default; opacity:.55; }
/* An unused position on the real panel: a dark lens with the moulded double dash and no
   legend at all. Drawn rather than left empty so the grid still reads as the panel. */
.em-blank{ color:transparent; }
.em-dash{ display:block; width:44%; height:0; border-top:2px solid var(--em-y);
          border-bottom:2px solid var(--em-y); height:7px; opacity:.85; }
button.em-cell:hover{ box-shadow:inset 0 0 0 2px rgba(255,255,255,.35); }
button.em-cell:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

/* The pressed lens. Solid green fill with dark text: it has to win against a lens that is
   itself bright yellow, and an outline alone does not at arm's length. */
.em-cell.em-on, .em-f.em-on, .em-gauge.em-on{
  background:var(--em-on) !important; color:var(--em-on-ink) !important;
  box-shadow:0 0 0 2px #fff, 0 0 14px rgba(34,197,94,.55);
}
.em-cell.em-on{ text-shadow:none; }

/* ---------- the VEMD ---------- */
.em-vemd{ max-width:430px; margin:0 auto 4px; display:flex; flex-direction:column; gap:14px; }
.em-scr{
  background:var(--em-scr); border:2px solid var(--em-bezel2); border-radius:4px;
  padding:0; overflow:hidden; color:var(--em-scr-ink);
  font-family:"Helvetica Neue", Arial, sans-serif;
}
.em-scr-fli{ display:block; }
.em-scr-fli > .em-fli{ display:none; }
/* The FLI page: dial on the left, the three engine parameters stacked on the right. */
.em-scr-fli{ display:grid; grid-template-columns:1fr auto; }
.em-scr-fli .em-fli{ display:flex; align-items:center; padding:6px 0 4px 6px;
                     border-right:1px solid var(--em-scr-line); position:relative; }
/* The dial is pressable in its own right — a failure of the screen rather than of a reading
   on it. It is a bare button so the gauge still looks like a gauge. */
.em-fli-btn{ flex:1 1 auto; min-width:0; background:none; border:none; padding:0; margin:0;
             cursor:pointer; display:block; border-radius:4px; }
.em-fli-btn:hover{ box-shadow:inset 0 0 0 2px rgba(255,255,255,.35); }
.em-fli-btn:focus-visible{ outline:2px solid var(--accent); outline-offset:-2px; }
.em-fli-btn.em-on{ background:var(--em-on); }
.em-fli-btn.em-on .em-scale, .em-fli-btn.em-on .em-ndl{ stroke:var(--em-on-ink); }
.em-fli-btn.em-on .em-dial-n, .em-fli-btn.em-on .em-dial-t{ fill:var(--em-on-ink); }
.em-fli-btn.em-on .em-cy, .em-fli-btn.em-on .em-dial-s{ fill:var(--em-on-ink); }

/* The bleed valve flag: green and white diagonal stripes, upper left of the FLI arc, which
   is where the aircraft puts it. Absolutely positioned and a sibling of the dial button
   rather than a child of it — a button inside a button is invalid and the inner one stops
   responding. */
.em-bleed{
  position:absolute; left:15%; top:14%; width:34px; height:19px;
  border:none; padding:0; margin:0; cursor:pointer; border-radius:2px;
  background:repeating-linear-gradient(115deg, #14c236 0 5px, #ffffff 5px 10px);
  box-shadow:0 0 0 1px rgba(0,0,0,.5);
}
.em-bleed:hover{ box-shadow:0 0 0 2px #fff; }
.em-bleed:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.em-bleed.em-on{ background:var(--em-on); box-shadow:0 0 0 2px #fff, 0 0 14px rgba(34,197,94,.55); }

/* The procedures with nothing on the glass to press. Deliberately shaped like buttons and
   not like screen fields, so nobody hunts for them among the indications. */
.em-extra{ display:flex; gap:8px; flex-wrap:wrap; }
.em-xbtn{
  flex:1 1 140px; padding:11px 12px; border-radius:8px; cursor:pointer;
  background:var(--panel2); color:var(--ink); border:1px solid var(--em-tab-line);
  font-weight:800; letter-spacing:.6px; font-size:12px; text-transform:uppercase;
}
.em-xbtn:hover{ border-color:var(--em-tab-on); }
.em-xbtn:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.em-xbtn.em-on{ background:var(--em-on); color:var(--em-on-ink); border-color:var(--em-on); }
/* The three engine parameters share the height of the dial beside them, so the column reads
   as one block against the gauge rather than three boxes stacked at the top of an empty
   half — which is how the real screen sets them. */
.em-scr-fli .em-col{ display:flex; flex-direction:column; }
.em-scr-fli .em-col .em-f{ flex:1 1 0; }
.em-dial{ width:100%; height:auto; display:block; }
.em-scale{ fill:none; stroke:#fff; stroke-width:2.5; }
.em-mk-y{ fill:none; stroke:var(--em-y); stroke-width:5; }
.em-mk-r{ fill:none; stroke:var(--em-r); stroke-width:5; }
.em-ndl{ stroke:#fff; stroke-width:6; stroke-linecap:round; }
.em-dial-t{ fill:#fff; font-size:15px; font-weight:700; text-anchor:middle; }
.em-dial-n{ fill:#fff; font-size:13px; font-weight:600; text-anchor:middle; }
.em-dial-s{ fill:var(--em-scr-cy); font-size:9px; text-anchor:middle; }
.em-cy{ fill:var(--em-scr-cy); }

/* A readout on the screen. Label small on top, figure large underneath with its unit in
   the display's own cyan — exactly as the VEMD sets them. */
.em-f{
  display:flex; flex-direction:column; align-items:flex-end; justify-content:center;
  background:var(--em-scr); color:var(--em-scr-ink); border:none;
  border-bottom:1px solid var(--em-scr-line);
  padding:5px 10px; margin:0; text-align:right; min-width:96px;
  font-family:inherit; cursor:default;
}
.em-f:last-child{ border-bottom:none; }
.em-f-l{ font-size:13px; font-weight:600; letter-spacing:.4px; }
.em-f-v{ font-size:17px; font-weight:700; }
.em-f-v i{ font-style:normal; font-size:10px; font-weight:600; color:var(--em-scr-cy); margin-left:2px; }
.em-f-live{ cursor:pointer; }
.em-f-live:hover{ box-shadow:inset 0 0 0 2px rgba(255,255,255,.4); }
.em-f-live:focus-visible{ outline:2px solid var(--accent); outline-offset:-2px; }

/* The bottom strips: fields sitting side by side, divided by the screen's own hairlines. */
.em-strip{ display:flex; border-top:1px solid var(--em-scr-line); }
.em-strip .em-f{ flex:1 1 0; border-bottom:none; border-right:1px solid var(--em-scr-line);
                 align-items:flex-start; text-align:left; min-width:0; }
.em-strip .em-f:last-child{ border-right:none; align-items:flex-end; text-align:right; }
.em-strip-2 .em-f{ align-items:center; text-align:center; }
.em-f-gap{ flex:1 1 0; }
.em-f-ff .em-f-l{ color:var(--em-scr-ink); }

/* The two oil gauges on the vehicle page. */
.em-oil{ padding:9px 0 2px; }
/* Clear of both the screen's own border above it and the tops of the two arcs below — the
   label had been sitting hard against the bezel with the gauges creeping up into it. */
.em-oil-t{ text-align:center; font-size:12px; font-weight:600; margin-bottom:-2px;
           position:relative; z-index:1; }
.em-oil-g{ display:flex; }
.em-gauge{
  flex:1 1 0; min-width:0; background:var(--em-scr); color:var(--em-scr-ink);
  border:none; padding:2px 6px 8px; cursor:pointer; font-family:inherit;
  display:flex; flex-direction:column; align-items:center;
}
.em-gauge .em-dial{ max-width:150px; }
.em-gauge .em-f-l{ font-size:10px; font-weight:500; margin-top:-6px; }
.em-gauge .em-f-v{ font-size:16px; }
.em-gauge:hover{ box-shadow:inset 0 0 0 2px rgba(255,255,255,.4); }
.em-gauge:focus-visible{ outline:2px solid var(--accent); outline-offset:-2px; }
.em-gauge.em-on .em-ndl, .em-gauge.em-on .em-scale{ stroke:var(--em-on-ink); }
.em-gauge.em-on .em-f-v i{ color:var(--em-on-ink); }

.em-hint{ text-align:center; color:var(--muted); font-size:12px; margin:8px 0 0; }

/* ---------- the action window ---------- */
.em-empty{ color:var(--muted); font-size:13px; text-align:center; padding:22px 10px; }
/* THE WHOLE PROCEDURE IS CENTRED, HEADING AND ALL. It is capped at a readable measure —
   past about 640px a line of instructions is too long to track back to the start of the next
   one — but on a landscape iPad that cap used to leave the text pinned to the left edge with
   a third of the panel empty beside it, which read as a rendering fault rather than as a
   deliberate column.

   The cap is on .em-proc rather than on the body alone, so the title, the Close button and
   the red rule move with the text. Capping only the body left the rule spanning the full
   panel with the procedure tucked under one end of it. */
.em-proc{ font-size:14px; line-height:1.45; max-width:640px; margin:0 auto; }
.em-proc-h{
  display:flex; align-items:center; gap:10px; margin-bottom:12px;
  padding-bottom:8px; border-bottom:2px solid var(--em-tab-on);
}
.em-proc-t{ font-size:15px; font-weight:800; letter-spacing:1px; text-transform:uppercase;
            color:var(--ink); flex:1; }
.em-close{ flex:none; }

/* Sub-headings, paragraphs, indented continuations. */
.em-h{ font-weight:700; margin:14px 0 6px; color:var(--ink); }
.em-h:first-child{ margin-top:0; }
/* A numbered part of a procedure written in several — smoke in the cabin has three. Set
   above the sub-headings, with a rule, so the parts cannot be mistaken for each other's
   steps. */
.em-sec{ font-weight:800; font-size:15px; letter-spacing:.5px; color:var(--ink);
         margin:22px 0 10px; padding-bottom:6px; border-bottom:1px solid var(--line); }
.em-sec:first-child{ margin-top:0; }
.em-p{ margin:6px 0; }
.em-c{ text-align:center; }
.em-sub{ margin:2px 0 2px 30px; }
.em-steps{ margin:6px 0; }

/* An action line. The dotted leader is a stretchy border between the two halves so it fits
   whatever width the screen turns out to be; below 560px the halves stack and the leader is
   removed rather than left dangling. */
/* NEITHER HALF OF AN ACTION LINE MAY BE CRUSHED. With both halves free to shrink, a very
   long result — "ON, one by one, if smoke returns, switch off that particular system for
   remainder of flight" — took nearly all the width and left the action squeezed into a
   column so narrow that the word-break backstop fired and "Minimum required consumers"
   came apart mid-word. Each half now keeps a floor of about seven characters' worth, and
   the line wraps the result onto its own row when both will not fit, exactly as it does on
   a phone. Words break only if a single word is genuinely wider than that floor. */
/* AN ITEM AND ITS ACTION SHARE A ROW, AT EVERY WIDTH. This is the one piece of layout in
   the tab that is not allowed to vary: down a numbered list, an action that has dropped
   below its item no longer sits against the item it belongs to, and the reader has to count
   to work out which OFF goes with which switch. Whichever half runs out of room wraps
   inside its own column instead, and baseline alignment keeps the action level with the
   FIRST line of an item that took two.

   nowrap cannot cause an overflow here: the action keeps a floor, the leader collapses to
   nothing before either half gives way, and the result shrinks freely with break-word
   behind it. */
.em-step{ display:flex; align-items:baseline; gap:6px; padding:2px 0; flex-wrap:nowrap; }
.em-step.em-b{ font-weight:700; }
.em-step.em-in{ padding-left:30px; }
.em-num{ flex:none; min-width:16px; }
/* The action half keeps a floor a little wider than its longest word; the result half is
   free to shrink and wrap. That asymmetry is deliberate. A result that runs out of room
   takes more lines, but an action squeezed to nothing puts the thing you are operating —
   the switch, the lever — into a column too narrow to read, which is the half that must
   stay legible. The leader gives way before either of them, having no meaning of its own.
   The result shrinks as far as it must and wraps within its own column. */
.em-act{ flex:0 1 auto; min-width:min(100%, 5.5em); max-width:62%; }
/* An instruction that is its own result takes the rest of the line and wraps inside it. The
   zero basis is what keeps it beside its number: sized from its content it would be measured
   at its full unwrapped width, decide it did not fit, and drop to a line of its own, leaving
   the number stranded above it. */
.em-act.em-wide{ flex:1 1 0; min-width:0; max-width:none; }
/* The guarantee, whatever the width turns out to be: a word longer than the space it is in
   breaks rather than spilling out of sight. It should almost never fire — the columns above
   collapse first — but an instruction with its end cut off is the one failure this tab must
   not have, and a broken word is always better than a missing one. */
.em-act, .em-res, .em-out, .em-arm-l, .em-p, .em-sub, .em-call-l{ overflow-wrap:break-word; }
.em-lead{ flex:1 1 auto; min-width:0; align-self:center;
          border-bottom:2px dotted var(--line); margin:0 2px; }
.em-res{ flex:0 1 auto; min-width:0; text-align:right; }

/* The landing decision, in the manual's own colours. These four are the only place those
   colours appear in the procedure text, so a pilot skimming a long procedure finds the
   answer without reading it. */
.em-out{
  text-align:center; font-weight:800; letter-spacing:.6px; margin:12px 0;
  padding:7px 10px; border-radius:6px; font-size:15px;
}
.em-out-imm { color:#fff;            background:var(--em-tab-on); }
.em-out-poss{ color:var(--warn);     background:var(--warnbg); border:1px solid var(--warn); }
.em-out-prac{ color:var(--ink);      background:var(--panel2); border:1px solid var(--line); }
.em-out-cont{ color:var(--good);     background:var(--goodbg); border:1px solid var(--good); }
html[data-theme="light"] .em-out-cont{ color:#0f7a35; }

/* WARNING / CAUTION / NOTE, in that order of severity. */
.em-call{ margin:12px 0; padding:9px 12px; border-radius:6px; border:1px solid var(--line);
          background:var(--panel2); }
.em-call-t{ font-weight:800; letter-spacing:1px; font-size:12px; text-align:center;
            margin-bottom:5px; }
.em-call-l{ margin:3px 0; }
.em-call-warn{ border-color:var(--em-tab-on); background:var(--badbg); }
.em-call-warn .em-call-t, .em-call-warn .em-call-l{ color:var(--bad); font-weight:700; }
.em-call-caut{ border-color:var(--warn); background:var(--warnbg); }
.em-call-caut .em-call-t, .em-call-caut .em-call-l{ color:var(--warn); }
.em-call-note .em-call-t{ color:var(--muted); }

.em-arrow{ text-align:center; font-size:20px; line-height:1; color:var(--muted); margin:2px 0; }
/* Sits under the left-hand arm of the branch above rather than across both, so a procedure
   written as a NO track and a YES track shows which of the two the next question follows
   from. The width is one column of .em-arms — half, less half the 10px gap. It goes full
   width on a narrow screen, where the arms have stacked and there are no columns to sit
   under. */
.em-half{ width:calc(50% - 5px); }

/* A decision point. Arms sit side by side under a shared rule and stack on a narrow screen;
   each keeps its own label, so a stacked branch is still unambiguous. `then` is what the
   arms converge back onto. */
.em-branch{ margin:12px 0; }
/* COLUMNS THAT GIVE UP RATHER THAN CLIP. A branch inside a branch inside a branch — which
   smoke in the cabin genuinely is — was splitting an already-narrow arm in half twice over
   and leaving columns too thin to hold the words, so the ends of the instructions were
   being cut off. Nothing decides this by counting nesting levels; auto-fit simply drops to
   a single column whenever two would not fit, so a branch stacks exactly when it must and
   sits side by side whenever there is room. */
/* 190px is the narrowest a column can be and still hold an action line — a switch name, a
   leader and a result. Below that the words start being cut off, so a branch that cannot
   give both its arms 190px stacks them instead. That is what happens three levels down in
   smoke in the cabin, which is the only procedure that nests that deep. */
.em-arms{ display:grid; gap:10px; align-items:stretch;
          grid-template-columns:repeat(auto-fit, minmax(190px, 1fr)); }
/* EVERY ARM OF A BRANCH ENDS ON THE SAME LINE. The arms are already equal height — the grid
   stretches them — but their contents were top-aligned, so one arm that took three lines to
   reach its decision and another that took one left their two banners at different heights,
   and the pair read as ragged rather than as the two answers to one question. The arm is a
   column, its last child is pushed to the bottom, and the decisions line up whatever it
   took each branch to get there. */
.em-arm{ border:1px solid var(--line); border-radius:6px; padding:8px 10px;
         background:var(--panel2); min-width:0;
         display:flex; flex-direction:column; }
.em-arm-l{ text-align:center; font-weight:800; font-size:13px; margin-bottom:6px;
           padding-bottom:5px; border-bottom:1px solid var(--line); flex:none; }
.em-arm-b{ flex:1 1 auto; display:flex; flex-direction:column; min-width:0; }
/* The decision fills whatever room is left in its arm. Where two arms carry the same amount
   of text before their decision — which is the ordinary case, and exactly the case in the
   ENG OIL PRESS light test — the two banners come out identically sized, so the pair reads
   as one choice rather than two mismatched boxes. Where the arms differ, the banners still
   finish flush with the bottom of the branch, which is the alignment that matters. Capped
   so that a two-word answer in a long arm cannot become a slab. */
.em-arm-b > .em-out:last-child{ flex:1 1 auto; max-height:5.5em; margin-bottom:0; }
.em-arm-b > .em-branch:last-child{ margin-top:auto; margin-bottom:0; }
.em-arm-b > *:last-child{ margin-bottom:0; }
/* A nested branch fills the arm it sits in, so its own arms stretch too and its decisions
   line up with each other — the ENG OIL PRESS light-test pair is two levels deep. */
.em-arm-b > .em-branch:last-child{ display:flex; flex-direction:column; }
.em-arm-b > .em-branch:last-child > .em-arms{ flex:1 1 auto; }
.em-arm .em-out{ font-size:13px; margin:8px 0; padding:7px 6px;
                 display:flex; align-items:center; justify-content:center; }
/* No fixed share of the width inside an arm. The 60% cap it used to carry was what actually
   clipped "[AVIONIC]": in a narrow column 60% was less than the word, and a switch name is
   deliberately unbreakable. Flex gives each half what it needs instead. */
.em-arm .em-act{ max-width:none; }
.em-then{ margin-top:10px; }
.em-then::before{ content:'↓'; display:block; text-align:center; font-size:20px;
                  line-height:1; color:var(--muted); margin-bottom:2px; }

/* A light symbol quoted inside procedure text — the manual draws the actual lens, and so
   does this, at text size. Black background in both themes for the same reason the panels
   are black in both themes. */
.em-lamp{
  display:inline-block; background:#0d0d0d; border-radius:2px;
  padding:1px 5px; margin:0 1px; font-weight:800; font-size:.86em; letter-spacing:.4px;
  vertical-align:baseline; white-space:nowrap;
}
.em-lamp-y{ color:var(--em-y); }
.em-lamp-r{ color:var(--em-r); }
.em-lamp-k{ color:#fff; }
.em-lamp-h{ background:var(--em-y); color:#000; }
/* The bleed valve flag quoted mid-sentence. It has no legend on the screen, so it has none
   here either — the stripes are the whole symbol. */
.em-lamp-f{
  width:26px; height:12px; padding:0; border-radius:1px; vertical-align:-1px;
  background:repeating-linear-gradient(115deg, #14c236 0 4px, #ffffff 4px 8px);
}
.em-sw{ white-space:nowrap; }

/* The N1 table from the TRQ procedure. A blank cell is blank in the manual — that altitude
   and temperature is off the chart, not zero — so it is hatched rather than left looking
   like a value someone forgot to fill in. */
.em-n1{ margin:10px 0; }
.em-n1-d{ text-align:right; font-weight:700; font-size:13px; margin-bottom:4px; }
.em-n1-f{ text-align:center; font-size:12px; color:var(--muted); margin-top:4px; }
.em-n1-t{ width:100%; border-collapse:collapse; font-size:13px; }
.em-n1-t th, .em-n1-t td{ border:1px solid var(--line); padding:5px 4px; text-align:center; }
.em-n1-t thead th{ background:var(--head); font-weight:700; font-size:11px; line-height:1.2; }
.em-n1-hp{ background:var(--head); font-weight:700; font-size:11px; white-space:nowrap; }
.em-n1-hp span{ font-weight:500; color:var(--muted); }
.em-n1-t td{ background:var(--ro); color:var(--ink); font-weight:700; }
.em-n1-x{ background:var(--hatch) !important; }

/* ---------- narrow screens ---------- */
@media (max-width:560px){
  /* THE WHOLE PANEL HAS TO FIT THE SCREEN. Left to scroll sideways it fitted perfectly and
     hid the right-hand two columns — which are the red warnings, ENG FIRE and HYDR among
     them. The one thing a pilot must never have to discover is that the panel continues off
     the edge, so the cells shrink instead: tighter gaps, no letter-spacing, a slightly
     taller lens to take two lines of smaller type, and no minimum width holding it open. */
  .em-frame{ padding:6px; }
  .em-cwp{ min-width:0; gap:3px; }
  .em-cwp-r{ gap:3px; }
  .em-cell{ font-size:clamp(7px, 2.15vw, 11px); letter-spacing:0; aspect-ratio:5/3.4;
            border-radius:2px; }
  .em-dash{ height:5px; border-top-width:1.5px; border-bottom-width:1.5px; }

  /* The row itself never breaks — that rule is global now, see .em-step above. What is
     specific to a phone is only that the item may use the full width before it wraps. */
  .em-act{ max-width:none; }
  .em-res{ font-weight:700; }
  .em-step.em-in{ padding-left:14px; }
  .em-sub{ margin-left:16px; }
  .em-arms{ grid-template-columns:1fr; }
  .em-half{ width:100%; }
  .em-proc-t{ font-size:14px; }
  .em-out{ font-size:13px; }
}

/* ---------- printing ---------- */
/* The panel is a navigation control, not a document: on paper the procedure is what is
   worth having, so the panel and the Close button come off and the procedure stays. */
@media print{
  .em-frame, .em-vemd, .em-hint, .em-close{ display:none !important; }
  .em-proc{ max-width:none; margin:0; }
  .em-arms{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}