/* NautPlot data fields (js/plot-fields.js): the data bar's cell states, the Customise editor, and the Instruments screen (js/plot-instruments.js).
   High contrast like the navigation readouts (--ro-*: black on white, white on black in dark mode); night mode Dim / Red recolours it. */

/* ---- data bar cells */
/* A stale fix greys the VALUES (the muted colour: still ≥ 4.5:1, units included); the labels stay readable and "No fix · 23 s ago" is shown
   as a warning, not greyed with them (UI check 2026-10-06: it was 2:1). */
.nb-cell.nb-c-stale strong { color: var(--muted); filter: grayscale(1); }
.nb-cell.nb-c-stale.nb-pos small { color: #b45309; font-weight: 700; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .nb-cell.nb-c-stale.nb-pos small { color: #fbbf24; } }
body[data-night="dim"] .nb-cell.nb-c-stale.nb-pos small { color: #fbbf24; }
body[data-night="red"] .nb-cell.nb-c-stale.nb-pos small { color: var(--text); }
.nb-cell.nb-c-none strong { color: var(--muted); }
.nb-cell.nb-c-warn strong { color: #b91c1c; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .nb-cell.nb-c-warn strong { color: #ff8a80; } }
.nb-cell { flex: 0 1 auto; }
.nb-cell.nb-pos { flex: 1 1 auto; }
.nb-strip { touch-action: pan-y; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }

/* ---- the editor (Customise): rows with ↑ ↓ ✕, then + Add buttons */
.fe-list { list-style: none; margin: 0 0 6px; padding: 0; display: grid; gap: 6px; counter-reset: fe; }
.fe-row { display: grid; grid-template-columns: 22px minmax(0, 1fr) 44px 44px 44px; align-items: center; gap: 4px; padding: 4px 4px 4px 8px; border: 1px solid var(--border);
  border-radius: 12px; background: var(--surface); }
.fe-row.fe-drag { opacity: 0.5; }
.fe-grab { color: var(--muted); cursor: grab; font-size: 1.1rem; text-align: center; }
.fe-name { min-width: 0; overflow-wrap: anywhere; line-height: 1.25; }
.fe-name b { font-weight: 700; }
.fe-tag { display: inline-block; margin-left: 4px; padding: 0 6px; border-radius: 999px; background: var(--warn-bg); color: var(--warn-text); font-size: 0.72rem; font-weight: 700; }
.fe-btn { width: 44px; min-height: 44px; padding: 0; border-radius: 10px; background: var(--bg); color: var(--text); border: 1px solid var(--border); font-size: 1.1rem; font-weight: 800; }
.fe-btn:disabled { opacity: 0.35; }
.fe-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.fe-rm { color: #b91c1c; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .fe-rm { color: #ff8a80; } }
.fe-add { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.fe-addbtn { min-height: 44px; padding: 0 12px; border-radius: 999px; font-size: 0.9rem; }

/* ---- the Instruments screen: over the chart (the MOB button stays on top, top right) */
.pp-inst { --ro-bg: #ffffff; --ro-text: #000000; --ro-lbl: #333333; --ro-line: #000000; --ro-warn: #b00020; --ro-acc: #0a63e0; --ro-hdg: #c2410c; --ro-wp: #a21caf;
  position: absolute; inset: 0; z-index: 9; display: flex; flex-direction: column; gap: 8px; padding: 10px 10px calc(10px + env(safe-area-inset-bottom, 0px));
  background: var(--ro-bg); color: var(--ro-text); overflow: hidden; touch-action: pan-y; }
.pp-inst[hidden] { display: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .pp-inst { --ro-bg: #000000; --ro-text: #ffffff; --ro-lbl: #d6d6d6; --ro-line: #ffffff; --ro-warn: #ff6b6b; --ro-acc: #5fb8ff; --ro-hdg: #ffa64d; --ro-wp: #f0abfc; } }
:root[data-theme="dark"] .pp-inst { --ro-bg: #000000; --ro-text: #ffffff; --ro-lbl: #d6d6d6; --ro-line: #ffffff; --ro-warn: #ff6b6b; --ro-acc: #5fb8ff; --ro-hdg: #ffa64d; --ro-wp: #f0abfc; }
body.plot-page[data-night="dim"] .pp-inst { --ro-bg: #000000; --ro-text: #e8eef7; --ro-lbl: #b8c4d6; --ro-line: #7d8ba0; --ro-warn: #ff6b6b; --ro-acc: #6fb3ee; --ro-hdg: #e59a4f; --ro-wp: #d8a3e0; }
body.plot-page[data-night="red"] .pp-inst { --ro-bg: #000000; --ro-text: #ff6a5e; --ro-lbl: #e0554a; --ro-line: #7a1f19; --ro-warn: #ff9d92; --ro-acc: #ff6a5e; --ro-hdg: #ff9a7a; --ro-wp: #ff8a7e; }
body.pp-inst-on .fm-root, body.pp-inst-on .nb-recenter { display: none; }
.in-head { display: flex; align-items: center; gap: 8px; padding-right: 66px; }   /* (room for the MOB button) */
.in-head h2 { margin: 0; flex: 1; min-width: 0; font-size: 1.1rem; }
.in-wake { font-size: 0.78rem; font-weight: 700; color: var(--ro-lbl); white-space: nowrap; }
.in-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 48px; padding: 0 16px; border-radius: 999px; background: var(--ro-bg); color: var(--ro-text);
  border: 2px solid var(--ro-line); font-weight: 800; font-size: 0.95rem; }
.in-btn.in-chart { background: var(--ro-text); color: var(--ro-bg); border-color: var(--ro-text); }
.in-btn:focus-visible { outline: 3px solid var(--ro-acc); outline-offset: 2px; }
@media (max-width: 480px) { .in-btn:not(.in-chart) span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .in-btn:not(.in-chart) { width: 48px; padding: 0; justify-content: center; } .in-wake { display: none; } }
.in-alert, .in-gps { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 12px; font-weight: 700; }
.in-alert { background: #b3261e; color: #fff; }
.in-alert[hidden], .in-gps[hidden] { display: none; }
.in-alert button { min-height: 44px; padding: 0 14px; border-radius: 999px; background: #fff; color: #b3261e; border: 0; font-weight: 800; }
.in-gps { border: 2px solid var(--ro-line); }
.in-gps button { min-height: 44px; padding: 0 14px; border-radius: 999px; background: var(--ro-text); color: var(--ro-bg); border: 0; font-weight: 800; }
body.plot-page[data-night="red"] .in-alert { background: #3a0000; color: #ff8a7e; border: 2px solid #ff6a5e; }
body.plot-page[data-night="red"] .in-alert button, body.plot-page[data-night="red"] .in-gps button { background: #ff6a5e; color: #000; }

.in-body { flex: 1 1 auto; min-height: 0; display: grid; grid-template-rows: minmax(150px, 38%) minmax(0, 1fr); gap: 10px; overflow-y: auto; }
.in-body[hidden] { display: none; }
.in-body.in-nodial { grid-template-rows: minmax(0, 1fr); }
.in-dial { display: grid; grid-template-rows: minmax(0, 1fr) auto; justify-items: center; min-height: 0; }
.in-dial[hidden] { display: none; }
.in-dial-svg { height: 100%; width: auto; max-width: 100%; min-height: 0; }
.in-dial-ring { fill: none; stroke: var(--ro-line); stroke-width: 3; }
.in-dial-ticks line { stroke: var(--ro-text); }
.in-dial-lbl text { fill: var(--ro-text); font: 800 17px system-ui, sans-serif; text-anchor: middle; }
.in-dial-cog line { stroke: var(--ro-acc); stroke-width: 5; stroke-linecap: round; }
.in-dial-cog path { fill: var(--ro-acc); }
.in-dial-hdg line { stroke: var(--ro-hdg); stroke-width: 3.5; stroke-dasharray: 2 5; stroke-linecap: round; }
.in-dial-hdg path { fill: var(--ro-hdg); }
.in-dial-wp path { fill: var(--ro-wp); stroke: var(--ro-bg); stroke-width: 1.5; }
.in-dial-hub { fill: var(--ro-text); }
.in-dial-cap { margin: 2px 0 0; font-size: 0.95rem; font-weight: 700; text-align: center; font-variant-numeric: tabular-nums; }
.in-dial-cap b { font-size: 1.3rem; }
.in-hdg-word { color: var(--ro-hdg); } .in-wp-word { color: var(--ro-wp); }
.in-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); grid-auto-rows: minmax(92px, 1fr); gap: 0; align-content: start;
  border: 2px solid var(--ro-line); border-radius: 12px; overflow: hidden; }
.in-grid > p { padding: 12px; }
.in-tile { display: grid; grid-template-rows: auto 1fr auto; min-width: 0; padding: 6px 10px 8px; box-shadow: inset -1px -1px 0 var(--ro-line), inset 1px 1px 0 var(--ro-line); container-type: inline-size; }
.in-tile small { font-size: 0.8rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ro-lbl); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.in-tile strong { align-self: center; font-size: clamp(1.9rem, min(6.2vmin, 28cqi), 3.6rem); line-height: 1.05;   /* big and readable (≥ 30 px) */
  font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -0.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* only a long value ("30–60 ft", "11:26 PM") shrinks to fit its tile, e.g. four columns on a tablet (UI check 2026-10-06) */
.in-tile.in-long strong { font-size: clamp(1.4rem, min(6.2vmin, 19cqi), 3.6rem); }
.in-tile strong i { font-style: normal; font-size: 0.42em; font-weight: 700; color: var(--ro-lbl); margin-left: 4px; }
.in-tile.in-pos strong { display: grid; font-size: clamp(1.05rem, 3.4vmin, 1.6rem); }
.in-tile .in-sub { font-size: 0.82rem; font-weight: 700; color: var(--ro-lbl); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.in-tile.in-warn strong, .in-tile.in-warn .in-sub { color: var(--ro-warn); }
.in-tile.in-none strong { color: var(--ro-lbl); }
.in-stale strong, .in-stale.in-dial-svg, .in-dial-cap.in-stale { opacity: 0.58; filter: grayscale(1); }   /* greyed, still ≥ 3:1 (was 0.4) */
.in-tile.in-stale .in-sub { color: var(--ro-warn); opacity: 1; filter: none; }
.pp-inst.in-is-stale .in-head h2::after { content: ' · no GPS fix'; color: var(--ro-warn); font-size: 0.9rem; }
/* sideways (phones) and wide screens: the dial beside the tiles */
@media (orientation: landscape) {
  .in-body { grid-template-rows: minmax(0, 1fr); grid-template-columns: minmax(150px, 34%) minmax(0, 1fr); }
  .in-body.in-nodial { grid-template-columns: minmax(0, 1fr); }
  .in-grid { grid-auto-rows: minmax(80px, 1fr); }
}
@media (orientation: landscape) and (max-height: 500px) {
  .pp-inst { gap: 6px; padding-top: 6px; }
  .in-btn { min-height: 44px; }
  .in-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); grid-auto-rows: minmax(72px, 1fr); }
  .in-tile strong { font-size: clamp(1.5rem, min(8vmin, 28cqi), 2.4rem); }
  .in-tile.in-long strong { font-size: clamp(1.3rem, min(8vmin, 19cqi), 2.4rem); }
}
/* the editor inside the screen */
.in-edit { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 0 2px 10px; color: var(--text); background: var(--surface); border-radius: 12px; padding: 10px; }
.in-edit[hidden] { display: none; }
.in-edit-head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.in-edit-head h3 { flex: 1; margin: 0; font-size: 1.05rem; }
.in-edit .in-btn.in-done { background: var(--accent); color: var(--accent-text, #fff); border-color: var(--accent); }
@media (prefers-reduced-motion: no-preference) { .pp-inst:not([hidden]) { animation: in-fade 0.15s ease-out; } }
@keyframes in-fade { from { opacity: 0; } to { opacity: 1; } }