/* ===== Mission Setup (compact strip) ===== */
/* Two equal columns: left = readouts + selectors, right = equipment stacked. */
.ms-strip{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
.ms-left{display:flex;flex-direction:column;gap:12px;min-width:0}
/* Readouts: 3-up row at the top (highest in the hierarchy). */
.ms-reads{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}
/* Selectors: Aircraft spans the row; conditions/crew sit in a 2-col grid below. */
.ms-fields{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-items:end}
.ms-fields .field{margin:0}
.ms-fields .field.span2{grid-column:1 / -1}
/* Equipment column: label above a vertical stack of chips */
.ms-eqrow{display:flex;flex-direction:column;align-items:stretch;gap:7px}
.ms-eqlabel{font-size:11px;text-transform:uppercase;letter-spacing:.4px;color:var(--muted);flex:none}
.ms-equip{display:flex;flex-direction:column;gap:7px}
.ms-eq{display:flex;align-items:center;gap:7px;background:var(--panel);border:1px solid var(--line);
  border-radius:999px;padding:5px 11px;cursor:pointer;transition:border-color .12s,background .12s}
.ms-eq:hover{border-color:var(--accent)}
.ms-eq.on{border-color:var(--accent);background:var(--liftbg)}
.ms-eq .dot{width:13px;height:13px;border-radius:50%;border:1.5px solid var(--muted);flex:none;
  position:relative;transition:border-color .12s,background .12s}
.ms-eq.on .dot{border-color:var(--accent);background:var(--accent)}
.ms-eq.on .dot::after{content:"";position:absolute;left:3.5px;top:1px;width:3px;height:6px;
  border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.ms-eq .name{font-size:13px;font-weight:600;white-space:nowrap;flex:1}
.ms-eq .w{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums;display:flex;align-items:center;gap:3px}
.ms-eq.on .w{color:var(--ink)}
.ms-eq .w input{width:46px;text-align:center;padding:3px;min-height:24px;font-size:12px}
/* readout metric chips */
/* Label sits on its own line above the value+unit, so a long number can never collide
   with the label text when the chip gets narrow (e.g. in the two-column desktop layout). */
.ms-read{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 6px;background:var(--ro);
  border:1px solid var(--line);border-radius:8px;padding:7px 11px;min-width:0}
.ms-read.ms-read-tot{background:var(--subhead);border-style:dashed}
.ms-read .k{flex:0 0 100%;font-size:11px;text-transform:uppercase;letter-spacing:.4px;color:var(--muted);margin-bottom:2px}
.ms-read .v{font-size:17px;font-weight:800;font-variant-numeric:tabular-nums;color:var(--ink);min-width:0;overflow-wrap:anywhere}
.ms-read .u{font-size:11px;color:var(--muted)}
.ms-read.invalid{border-color:var(--bad);background:var(--badbg)}
.ms-read.invalid .v{font-size:13px;color:var(--negtext);font-weight:700}
@media(max-width:680px){ .ms-strip{grid-template-columns:1fr} .ms-fields{grid-template-columns:1fr 1fr 1fr}
  /* Three compact readouts side-by-side; the base rule already stacks label over value. */
  .ms-reads{grid-template-columns:1fr 1fr 1fr;gap:6px}
  .ms-read{padding:6px 8px}
  .ms-read .v{font-size:15px}
  .ms-read.invalid .v{font-size:12px} }