/* gm-tools.css — the field tools sheet and the recorder (gm-tools.js). Painted only with the frame's tokens
   (--a-*, --ph*, --btn-p-*; gm-frame.css sets them for day and night), so both themes follow the design law:
   day = paperbark ground, white cards, navy buttons with hi-vis text; night = Poseidon navy, hi-vis buttons with navy text.
   Hazard red is the scope's reserved hazard colour (day #B3261E, night #FF8178), used only for "over your angle".
   Touch targets 44px; spacing 4/8/12/16/24. */
html.th-on .gmt-sheet{
  --gmt-bad:#B3261E; --gmt-bad-bg:#FBEAE8; --gmt-hv:#D4F53C; --gmt-navy:#143C5D;
  --gmt-sky:#DCEAEE; --gmt-gnd:#E8DFCF; --gmt-hz:#143C5D;
  position:fixed;z-index:760;top:72px;right:16px;width:380px;max-height:calc(100dvh - 96px);
  display:flex;flex-direction:column;overflow:hidden;
  background:var(--a-surface,#FFFFFF);color:var(--a-tx,#143C5D);border-radius:var(--a-rd,12px);box-shadow:var(--a-sh3);
  font:400 14px/1.45 var(--sans,system-ui,sans-serif)
}
html.th-on[data-theme="dark"]:not([data-mode="sun"]) .gmt-sheet{
  --gmt-bad:#FF8178; --gmt-bad-bg:rgba(255,129,120,.14);
  --gmt-sky:#1E5175; --gmt-gnd:#0F2E48; --gmt-hz:#D4F53C
}
html.th-on[data-mode="sun"] .gmt-sheet{outline:1.5px solid #3B4454;outline-offset:-1.5px}
html.th-on .gmt-sheet[hidden]{display:none}
html.th-on .gmt-sheet *{box-sizing:border-box}
html.th-on .gmt-grab{display:none}
html.th-on .gmt-head{display:flex;align-items:center;gap:8px;padding:12px 8px 4px 16px}
html.th-on .gmt-head h2{margin:0;font:700 18px/1.2 "Archivo",var(--sans,sans-serif);color:var(--a-tx);outline:none}
html.th-on .gmt-sheet .gmt-x{margin-left:auto;width:44px;height:44px;padding:0;display:inline-flex;align-items:center;justify-content:center;
  background:transparent;border:0;border-radius:var(--a-r,6px);color:var(--a-tx2)}
html.th-on .gmt-sheet .gmt-x:hover{background:var(--a-hover);color:var(--a-tx)}

/* tabs: a two-position segmented control */
html.th-on .gmt-tabs{display:grid;grid-template-columns:1fr 1fr;gap:4px;margin:4px 16px 8px;padding:4px;border-radius:var(--a-rl,8px);background:var(--a-sunk)}
html.th-on .gmt-sheet .gmt-tabs button{height:36px;min-height:36px;border:0;border-radius:var(--a-r,6px);background:transparent;color:var(--a-tx2);font:600 14px var(--sans)}
html.th-on .gmt-sheet .gmt-tabs button[aria-selected="true"]{background:var(--a-surface);color:var(--a-tx);box-shadow:var(--a-sh1)}
html.th-on .gmt-sheet .gmt-tabs button:hover{background:var(--a-hover)}
html.th-on .gmt-sheet .gmt-tabs button[aria-selected="true"]:hover{background:var(--a-surface)}
/* the tab row itself is 44px tall to the finger (36px button + 4px padding either side) */

html.th-on .gmt-body{overflow:auto;overscroll-behavior:contain;padding:0 16px 16px;-webkit-overflow-scrolling:touch}
html.th-on .gmt-body section[hidden]{display:none}
html.th-on .gmt-card{padding:12px;margin:0 0 12px;border:1px solid var(--a-line);border-radius:var(--a-rl,8px);background:var(--a-surface)}
html.th-on .gmt-lab{font:600 12px/1.3 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--a-mut);margin:0 0 4px}
html.th-on .gmt-mono{font-family:var(--mono,ui-monospace,Menlo,monospace);font-variant-numeric:tabular-nums}
html.th-on .gmt-coord{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
html.th-on .gmt-coord .gmt-mono{font-size:17px;font-weight:600;color:var(--a-tx);overflow-wrap:anywhere;user-select:all;-webkit-user-select:all}
html.th-on .gmt-sub{font-size:13px;color:var(--a-tx2);margin-top:4px}
html.th-on .gmt-note{font-size:12px;line-height:1.4;color:var(--a-mut);margin-top:4px}
html.th-on .gmt-empty{font-size:14px;color:var(--a-tx2);padding:4px 0}
html.th-on .gmt-fine{margin:0 0 12px;font-size:12px;line-height:1.45;color:var(--a-tx2)}
html.th-on .gmt-fine b{color:var(--a-tx);font-weight:600}
html.th-on .gmt-row{display:grid;grid-template-columns:96px 1fr;gap:8px;padding:8px 0;border-top:1px solid var(--a-line-soft);font-size:13px}
html.th-on .gmt-row:first-of-type{border-top:0}
html.th-on .gmt-row b{font-weight:600;color:var(--a-tx)}
html.th-on .gmt-row span{color:var(--a-tx2)}

/* stat tiles */
html.th-on .gmt-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:0 0 8px}
html.th-on .gmt-tiles-2{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:12px}
html.th-on .gmt-tiles-rec{grid-template-columns:repeat(2,minmax(0,1fr))}
html.th-on .gmt-tile{position:relative;padding:8px 12px;border-radius:var(--a-rl,8px);background:var(--a-sunk);min-width:0}
html.th-on .gmt-val{font:700 22px/1.15 "Archivo",var(--sans);color:var(--a-tx);font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html.th-on .gmt-val small{font:500 12px var(--sans);color:var(--a-tx2)}
html.th-on .gmt-tile.gmt-bad{background:var(--gmt-bad-bg);box-shadow:inset 0 0 0 2px var(--gmt-bad)}
html.th-on .gmt-tile.gmt-bad .gmt-val{color:var(--gmt-bad)}
html.th-on .gmt-rose{position:absolute;top:8px;right:8px;width:22px;height:22px}
html.th-on .gmt-rose circle{fill:none;stroke:var(--a-line2);stroke-width:2}
html.th-on .gmt-rose path{fill:var(--a-tx)}

/* buttons */
html.th-on .gmt-sheet .gmt-btn{min-height:44px;height:auto;padding:0 16px;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border:1px solid var(--a-line2);border-radius:var(--a-r,6px);background:var(--a-surface);color:var(--a-tx);font:600 14px var(--sans);cursor:pointer;text-decoration:none}
html.th-on .gmt-sheet .gmt-btn:hover{background:var(--a-hover);border-color:var(--a-tx2)}
html.th-on .gmt-sheet .gmt-btn-s{min-height:44px;padding:0 12px;margin-left:auto}
html.th-on .gmt-sheet .gmt-btn-p{background:var(--btn-p-bg,#143C5D);color:var(--btn-p-ink,#D4F53C);border-color:transparent}
html.th-on .gmt-sheet .gmt-btn-p:hover{background:var(--acc-h,#0F2E48);color:var(--btn-p-ink,#D4F53C);border-color:transparent}
html.th-on .gmt-sheet .gmt-btn-stop{background:var(--gmt-bad);color:#FFFFFF;border-color:transparent}
html.th-on[data-theme="dark"]:not([data-mode="sun"]) .gmt-sheet .gmt-btn-stop{color:#0F2E48}
html.th-on .gmt-sheet .gmt-btn-stop:hover{background:var(--gmt-bad);filter:brightness(.94);border-color:transparent}
html.th-on .gmt-sheet .gmt-big{width:100%;min-height:52px;font-size:16px;margin:4px 0 12px}
html.th-on .gmt-sheet .gmt-btn:disabled{opacity:.55;cursor:default}
html.th-on .gmt-sheet :is(button,input):focus-visible{outline:2px solid var(--a-tx);outline-offset:2px}
html.th-on .gmt-acts{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}
html.th-on .gmt-i{flex:0 0 auto}

/* inclinometer gauge */
html.th-on .gmt-gauge{display:flex;justify-content:center;margin:8px 0 0}
html.th-on .gmt-gauge svg{width:220px;max-width:100%;height:auto;display:block}
html.th-on .gmt-sky{fill:var(--gmt-sky)}
html.th-on .gmt-gnd{fill:var(--gmt-gnd)}
html.th-on .gmt-hz{stroke:var(--gmt-hz);stroke-width:2.5}
html.th-on .gmt-tick{stroke:var(--a-tx2);stroke-width:1.5;opacity:.7}
html.th-on .gmt-ring{fill:none;stroke:var(--a-line2);stroke-width:4}
html.th-on .gmt-lim{stroke:var(--gmt-bad);stroke-width:3;stroke-linecap:round}
html.th-on .gmt-ptr{fill:var(--a-tx)}
html.th-on .gmt-veh{fill:none;stroke:var(--a-tx);stroke-width:4;stroke-linecap:round;stroke-linejoin:round}
html.th-on[data-theme="dark"]:not([data-mode="sun"]) .gmt-veh{stroke:#D4F53C}
html.th-on[data-theme="dark"]:not([data-mode="sun"]) .gmt-ptr,html.th-on[data-theme="dark"]:not([data-mode="sun"]) .gmt-veh-c{fill:#D4F53C}
html.th-on .gmt-veh-c{fill:var(--a-tx)}
html.th-on .gmt-over .gmt-ring{stroke:var(--gmt-bad);stroke-width:8}
html.th-on .gmt-over .gmt-gnd{fill:color-mix(in srgb,var(--gmt-bad) 30%,var(--gmt-gnd))}
html.th-on .gmt-alert{margin:8px 0;padding:8px 12px;border-radius:var(--a-r,6px);background:var(--gmt-bad-bg);color:var(--gmt-bad);font-weight:600;font-size:14px;border-left:4px solid var(--gmt-bad)}
html.th-on .gmt-cal{margin-top:8px}
html.th-on .gmt-warnset{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin:12px 0}
html.th-on .gmt-warnset .gmt-lab{margin:0;width:100%}
html.th-on .gmt-warnset label{display:inline-flex;align-items:center;gap:8px;font-size:14px;color:var(--a-tx)}
html.th-on .gmt-sheet .gmt-warnset input{width:72px;height:44px;padding:0 8px;border:1px solid var(--a-line2);border-radius:var(--a-r,6px);
  background:var(--well,var(--a-sunk));color:var(--a-tx);font:600 16px var(--sans);font-variant-numeric:tabular-nums}

/* recorder */
html.th-on .gmt-kinds{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:4px 0 12px}
html.th-on .gmt-sheet .gmt-kind{min-height:44px;padding:4px 8px;border:1px solid var(--a-line2);border-radius:var(--a-r,6px);background:var(--a-surface);
  color:var(--a-tx);font:600 14px/1.15 var(--sans);text-align:center}
html.th-on .gmt-sheet .gmt-kind:hover{background:var(--a-hover)}
html.th-on .gmt-sheet .gmt-kind.on,html.th-on .gmt-sheet .gmt-kind.on:hover{background:var(--btn-p-bg,#143C5D);color:var(--btn-p-ink,#D4F53C);border-color:transparent}
html.th-on .gmt-rechead{display:flex;align-items:center;gap:8px;margin:0 0 12px}
html.th-on .gmt-rechead b{font:700 16px "Archivo",var(--sans);color:var(--a-tx)}
html.th-on .gmt-time{margin-left:auto;font-size:24px;font-weight:700;color:var(--a-tx)}
html.th-on .gmt-dot{width:12px;height:12px;border-radius:50%;background:var(--gmt-bad,#B3261E);flex:0 0 auto;animation:gmtPulse 1.6s ease-in-out infinite}
@keyframes gmtPulse{50%{opacity:.35}}
html.th-on .gmt-title{margin:0 0 12px;font:700 18px/1.25 "Archivo",var(--sans);color:var(--a-tx)}
html.th-on .gmt-save{margin:4px 0;padding:8px 12px;border-radius:var(--a-r,6px);font-size:14px;line-height:1.4}
html.th-on .gmt-save-cloud{background:var(--a-ok-bg,#E8F6EE);color:var(--a-ok-tx,#11713F)}
html.th-on .gmt-save-local{background:var(--a-warn-bg,#FDF3DC);color:var(--a-warn-tx,#8A5300)}
html.th-on .gmt-save-none{background:var(--gmt-bad-bg);color:var(--gmt-bad)}
html.th-on[data-theme="dark"]:not([data-mode="sun"]) .gmt-save-cloud{background:rgba(212,245,60,.14);color:#D4F53C}
html.th-on[data-theme="dark"]:not([data-mode="sun"]) .gmt-save-local{background:rgba(216,196,165,.16);color:#F1E4CE}

/* copy confirmation */
html.th-on .gmt-flash{position:absolute;left:16px;right:16px;bottom:16px;padding:8px 12px;border-radius:var(--a-r,6px);
  background:var(--gmt-navy);color:#FFFFFF;font-size:13px;opacity:0;transform:translateY(8px);pointer-events:none;transition:opacity .18s,transform .18s}
html.th-on[data-theme="dark"]:not([data-mode="sun"]) .gmt-flash{background:#D4F53C;color:#0F2E48}
html.th-on .gmt-flash.on{opacity:1;transform:none}
html.th-on .gmt-flash:empty{display:none}

/* the recording pill: shown while recording with the sheet closed */
html.th-on .gmt-pill{position:fixed;z-index:755;left:50%;transform:translateX(-50%);bottom:calc(24px + env(safe-area-inset-bottom,0px));
  min-height:44px;padding:0 16px;display:inline-flex;align-items:center;gap:12px;border:0;border-radius:999px;
  background:#143C5D;color:#FFFFFF;font:600 14px var(--sans);font-variant-numeric:tabular-nums;box-shadow:0 8px 24px rgba(3,14,26,.35);cursor:pointer;max-width:calc(100vw - 32px);white-space:nowrap}
html.th-on .gmt-pill:hover{background:#0F2E48;color:#FFFFFF}
html.th-on .gmt-pill b{color:#D4F53C;font-weight:700}
html.th-on[data-theme="dark"]:not([data-mode="sun"]) .gmt-pill{background:#D4F53C;color:#0F2E48;box-shadow:0 8px 24px rgba(3,14,26,.55)}
html.th-on[data-theme="dark"]:not([data-mode="sun"]) .gmt-pill:hover{background:#E2FA6E;color:#0F2E48}
html.th-on[data-theme="dark"]:not([data-mode="sun"]) .gmt-pill b{color:#0F2E48}
html.th-on[data-theme="dark"]:not([data-mode="sun"]) .gmt-pill .gmt-dot{background:#B3261E}
html.th-on .gmt-pill[hidden]{display:none}
html.th-on .gmt-pill:focus-visible{outline:2px solid var(--a-tx,#143C5D);outline-offset:3px}

/* phone and small tablet: a bottom sheet */
@media (max-width:700px){
  html.th-on .gmt-sheet{top:auto;left:0;right:0;bottom:0;width:auto;max-height:78dvh;border-radius:16px 16px 0 0;
    padding-bottom:env(safe-area-inset-bottom,0px)}
  html.th-on .gmt-grab{display:block;width:40px;height:4px;margin:8px auto 0;border-radius:2px;background:var(--a-line2)}
  html.th-on .gmt-head{padding-top:4px}
  html.th-on .gmt-val{font-size:20px}
  html.th-on .gmt-tiles{gap:8px}
  html.th-on .gmt-tile{padding:8px}
}
@media (max-width:380px){
  html.th-on .gmt-val{font-size:18px}
  html.th-on .gmt-tile{padding:8px 8px}
  html.th-on .gmt-rose{display:none}
  html.th-on .gmt-sheet .gmt-kind{font-size:13px}
}
@media (prefers-reduced-motion:reduce){
  html.th-on .gmt-dot{animation:none}
  html.th-on .gmt-flash{transition:none}
}