/* Field Command — shared layout/form foundation (all portals).
 *
 * Load BEFORE portal-specific CSS (dashboard.css, public.css, SA, operator).
 * Rules only: every design value comes from tokens.css (load it first).
 * Brand cache-bust via ?v=BRAND_VERSION on the <link>.
 *
 * Goals: symmetric gutters, consistent control heights, touch ≥44px on
 * phone, iOS 16px inputs (no zoom), safe-area, future-proof form/stack
 * patterns for admin · operator · super-admin · public.
 */

/* Design scale, touch and layout tokens live in tokens.css. */

/* Public pages read tokens.css directly (the customer scope follows the device theme); the old
   public --fc-* -> shared alias block lived here and is gone. */

/* ── Box model baseline ──────────────────────────────────────── */
.fc-foundation,
.fc-page,
.fc-shell{
  box-sizing:border-box;
}
.fc-foundation *,
.fc-page *,
.fc-shell *{box-sizing:border-box;}

/* ── Symmetric page shell ────────────────────────────────────── */
.fc-page{
  min-height:100dvh;
  padding-top:calc(var(--gutter) + var(--safe-top));
  padding-right:calc(var(--gutter) + var(--safe-right));
  padding-bottom:calc(var(--gutter) + var(--safe-bottom));
  padding-left:calc(var(--gutter) + var(--safe-left));
}
.fc-shell{
  width:100%;
  max-width:var(--content-max);
  margin-inline:auto;
}
.fc-shell-narrow{
  width:100%;
  max-width:var(--form-max);
  margin-inline:auto;
}

/* ── Layout primitives (use in new markup) ───────────────────── */
.fc-stack{display:flex;flex-direction:column;gap:var(--section-gap);}
.fc-stack-sm{display:flex;flex-direction:column;gap:var(--space-2);}
.fc-stack-lg{display:flex;flex-direction:column;gap:var(--space-6);}
.fc-row{
  display:flex;flex-wrap:wrap;align-items:center;
  gap:var(--space-2) var(--space-3);
}
.fc-row-between{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-3);}
.fc-grid-2{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--space-3);
}
.fc-grid-3{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--space-3);
}
.fc-grid-4{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:var(--space-3);
}

/* ── Cards (symmetric padding) ───────────────────────────────── */
.fc-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:var(--card-pad);
}
.fc-card-tight{padding:var(--space-3);border-radius:var(--radius-md);}
.fc-card-head{
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--space-3);margin-bottom:var(--space-3);flex-wrap:wrap;
}
.fc-card-title{
  font-size:12px;font-weight:800;color:var(--text-muted);
  text-transform:uppercase;letter-spacing:.05em;margin:0;
}

/* ── Forms (all portals) ─────────────────────────────────────── */
.fc-field{
  display:flex;flex-direction:column;gap:var(--space-2);
  margin:0 0 var(--space-4);
  min-width:0;
}
.fc-field:last-child{margin-bottom:0;}
.fc-field > label,
.fc-label{
  font-size:11px;font-weight:700;color:var(--text-muted);
  text-transform:uppercase;letter-spacing:.04em;line-height:1.3;
  display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap;
}
.fc-hint,.field-hint{
  font-size:12px;color:var(--text-muted);line-height:1.45;margin-top:var(--space-1);
}

/* Canonical control look — opt-in class OR layered onto .fg / common inputs */
.fc-control,
.fg input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]),
.fg select,
.fg textarea,
.sett-input,
.sa-control,
.public-page input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]),
.public-page select,
.public-page textarea,
.booking-page input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]),
.booking-page select,
.booking-page textarea,
.renew-page input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]),
.renew-page select,
.renew-page textarea,
.quote-page input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]),
.quote-page select,
.quote-page textarea{
  width:100%;
  min-height:var(--control-h-sm);
  padding:10px 12px;
  font-size:var(--control-font);
  font-family:inherit;
  line-height:1.35;
  color:var(--text);
  background:var(--input-bg);
  border:1px solid var(--input-border);
  border-radius:var(--radius-md);
  outline:none;
  box-sizing:border-box;
  transition:border-color .15s,box-shadow .15s;
  -webkit-appearance:none;
  appearance:none;
}
.fc-control:focus,
.fg input:focus,.fg select:focus,.fg textarea:focus,
.sett-input:focus,
.public-page input:focus,.public-page select:focus,.public-page textarea:focus,
.booking-page input:focus,.booking-page select:focus,.booking-page textarea:focus,
.renew-page input:focus,.renew-page select:focus,.renew-page textarea:focus,
.quote-page input:focus,.quote-page select:focus,.quote-page textarea:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}
textarea.fc-control,
.fg textarea,
.public-page textarea,
.booking-page textarea,
.renew-page textarea,
.quote-page textarea{
  min-height:96px;
  resize:vertical;
}

/* Buttons — symmetric padding + touch floor on narrow */
.fc-btn,
.fc-btn-primary{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);
  min-height:var(--control-h-sm);
  padding:10px 16px;
  border-radius:var(--radius-md);
  font-size:14px;font-weight:700;font-family:inherit;
  border:1px solid transparent;cursor:pointer;
  text-align:center;text-decoration:none;
}
.fc-btn-primary,
.fc-btn.primary{
  background:var(--accent);color:#0b0a0c;border-color:transparent;
}
.fc-btn-primary:hover{opacity:.92;}
.fc-btn-primary:disabled,
.fc-btn:disabled{opacity:.5;cursor:not-allowed;}
.fc-btn-block{width:100%;}
.fc-btn-row{
  display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3);
}
.fc-btn-row .fc-btn,
.fc-btn-row .fc-btn-primary,
.fc-btn-row button{width:100%;}

/* Checkbox / radio rows stay usable */
.fc-check-row{
  display:flex;align-items:flex-start;gap:var(--space-3);
  min-height:var(--touch-min);padding:var(--space-2) 0;
}
.fc-check-row input[type="checkbox"],
.fc-check-row input[type="radio"]{
  width:20px;height:20px;min-height:20px;margin-top:2px;flex-shrink:0;
  accent-color:var(--accent);
}

/* ── Modal / auth form helpers (all portals) ─────────────────── */
.fc-modal-lead{
  font-size:13px;color:var(--text-muted);line-height:1.55;
  margin:0 0 var(--space-4);
}
.fc-form-msg{
  font-size:12px;color:var(--text-muted);min-height:18px;
  margin:0 0 var(--space-3);line-height:1.4;
}
.fc-form-msg.err,.fc-form-msg.is-error{color:var(--danger);}
.fc-otp{
  font-family:var(--mono,ui-monospace,SFMono-Regular,Menlo,monospace);
  font-size:20px;letter-spacing:.28em;text-align:center;
  font-variant-numeric:tabular-nums;
}
.fc-divider-or{
  display:flex;align-items:center;gap:var(--space-2);
  font-size:11px;color:var(--text-muted);
  margin:var(--space-3) 0;
}
.fc-divider-or::before,
.fc-divider-or::after{
  content:"";flex:1;height:1px;background:var(--border);
}
.fc-link-muted{
  font-size:12px;color:var(--text-muted);text-decoration:none;
}
.fc-link-muted:hover{color:var(--accent);text-decoration:underline;}
.fc-modal-narrow{max-width:420px;}
.fc-modal-foot-note{
  font-size:12px;color:var(--text-muted);margin-top:var(--space-4);
  text-align:center;line-height:1.45;
}
/* Segmented choice chips (payment method, filters) */
.fc-chip-row{
  display:flex;flex-wrap:wrap;gap:var(--space-2);
  margin:0 0 var(--space-4);
}
.fc-chip{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:var(--touch-min);
  padding:8px 12px;
  background:transparent;
  border:1px solid var(--border-strong);
  border-radius:var(--radius-sm);
  color:var(--text-muted);
  font-size:12px;font-weight:600;font-family:inherit;
  cursor:pointer;
}
.fc-chip.active,.fc-chip[aria-pressed="true"]{
  background:color-mix(in srgb, var(--success) 15%, transparent);
  border-color:var(--success);
  color:var(--success);
  font-weight:700;
}

/* ── Tables: horizontal scroll shell (no layout blowout) ─────── */
.fc-table-wrap{
  width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;
  border:1px solid var(--border);border-radius:var(--radius-lg);
  background:var(--surface);
}
.fc-table-wrap table{min-width:560px;width:100%;border-collapse:collapse;}

/* ── Responsive breakpoints ──────────────────────────────────── */
/* sm ≤480 · md ≤768 · lg ≤1024 · xl ≥1281 (xl root overrides live in tokens.css) */

@media (max-width:1024px){
  .fc-grid-4{grid-template-columns:repeat(2,minmax(0,1fr));}
  .fc-grid-3{grid-template-columns:repeat(2,minmax(0,1fr));}
}

@media (max-width:768px){
  /* iOS zoom guard — all form controls on phone */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]):not([type="file"]),
  select,textarea,
  .fc-control,.sett-input{
    font-size:16px !important;
    min-height:var(--touch-min);
  }
  .fc-btn,.fc-btn-primary,
  button.btn-primary,button.btn-secondary,button.btn-ghost,
  .btn-primary,.btn-secondary,.btn-ghost,.btn-danger,.btn-success{
    min-height:var(--touch-min);
  }
  .fc-grid-2,.fc-grid-3,.fc-grid-4{grid-template-columns:1fr;}
  .fc-btn-row{grid-template-columns:1fr;}
  /* Full-bleed-safe modal padding */
  .overlay,.fc-modal-pad{
    padding:var(--space-3);
    padding-bottom:calc(var(--space-3) + var(--safe-bottom));
  }
}

@media (max-width:480px){
  .fc-card{border-radius:var(--radius-md);}
}

/* ── Reduced motion ──────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  .fc-control,.fc-btn,.fc-btn-primary{transition:none !important;}
}

/* ── Shared admin/operator and weather/map rules moved from the retired portal-ui.css ── */
:is(#gpsMapContainer,#fleetMapContainer,#mcMapContainer,#ecMapContainer,#mapContainer),
:is(#gpsMapContainer,#fleetMapContainer,#mcMapContainer,#ecMapContainer,#mapContainer) *{touch-action:none!important;}
:is(#gpsMapContainer,#fleetMapContainer,#mcMapContainer,#ecMapContainer,#mapContainer){overscroll-behavior:contain;}
:is(.admin-app,.operator-page) .portal-theme-toggle{display:grid!important;place-items:center;width:44px!important;height:44px!important;min-width:44px;min-height:44px;
  flex:0 0 44px;padding:0!important;border:1px solid var(--border-strong);border-radius:12px;
  background:var(--elevated);color:var(--accent);position:static;cursor:pointer;}
.portal-theme-toggle svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
.portal-theme-toggle .theme-moon{display:none;}
html[data-theme="light"] .portal-theme-toggle .theme-sun{display:none;}
html[data-theme="light"] .portal-theme-toggle .theme-moon{display:block;}
html:not([data-outdoor="1"]):not([data-contrast="high"]) :is(.admin-app,.operator-page) :is(.btn-danger-solid,.device-approval-deny,.btn-blocked-big,.mnav-badge,.crew-chat-badge,#sosButton){background:var(--portal-danger-fill,#a6323c)!important;color:#fff!important;}
/* Operational weather: every grid can shrink on narrow and rotated screens. */
.operator-weather-panel{position:absolute; z-index:11; top:70px; left:12px; width:min(360px, calc(100% - 92px)); max-height:45dvh; overflow:auto; padding:12px; box-sizing:border-box; border:1px solid var(--border2, #aaa); border-radius:12px; background:var(--bg, #fff); color:var(--text, #182230); box-shadow:0 4px 16px #0003;}
.operator-weather-panel[hidden]{display:none!important;}
.operator-weather-panel button, .operator-weather-panel select{min-height:44px; max-width:100%; font:inherit;}
.operator-weather-panel label{display:block; margin:8px 0;}
.operator-weather-panel .weather-v2{padding:0;}
.operator-weather-panel button{border:1px solid var(--border2, #aaa); border-radius:8px; padding:6px 10px; background:var(--bg2, #f4f6f8); color:var(--text, #182230); cursor:pointer;}
.operator-weather-panel > button{width:100%; margin-bottom:8px;}
.operator-weather-layers{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px;}
.operator-weather-layers button:last-child{grid-column:1/-1;}
.operator-weather-layers button[aria-pressed="true"]{background:var(--accent, #1257a0); color:#fff; border-color:var(--accent, #1257a0);}
#operatorWeatherStatus{font-size:12px; line-height:1.4; margin:8px 0;}
.operator-weather-panel > a{font-size:11px;}
@media(max-height:500px){
  .operator-weather-panel{position:fixed;top:8px;bottom:76px;max-height:none;width:min(340px,calc(100% - 92px));}
}
.weather-v2{padding: 16px; min-width: 0; overflow-wrap: anywhere;}
.home-weather > .weather-v2{border: 1px solid var(--border2, #bbb); border-radius: 12px; background: var(--bg2, #fff);}
.route-weather-status{display: block; max-width: 100%; overflow-wrap: anywhere; font-size: 12px; color: var(--muted, #657080);}
.weather-v2 h3, .weather-v2 h4{margin: 12px 0 8px;}
.weather-grid{display: grid; grid-template-columns: repeat(auto-fit, minmax(min(130px, 100%), 1fr)); gap: 10px;}
.weather-reading{display: flex; flex-direction: column; gap: 5px; padding: 10px; border: 1px solid var(--border2, #bbb); border-radius: 8px; min-width: 0;}
.weather-reading span, .weather-muted{font-size: 12px; color: var(--muted, #657080);}
.weather-risks{padding-left: 20px;}
.weather-risks li{margin: 8px 0;}
.weather-table-wrap{overflow-x: auto; max-width: 100%;}
.weather-hourly{display: flex; gap: 10px; overflow-x: auto; max-width: 100%; min-width: 0; padding: 4px 2px 12px;}
.weather-hourly:focus-visible{outline: 2px solid var(--accent, #36a9be); outline-offset: 2px;}
.weather-hourly-controls{display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0;}
.weather-hourly-controls button{min-height: 44px; min-width: 44px; max-width: 100%; padding: 10px 14px; font: inherit; cursor: pointer; color: var(--text, #182230); background: var(--bg2, #fff); border: 1px solid var(--border2, #bbb); border-radius: 8px;}
.weather-hour{box-sizing: border-box; flex: 0 0 min(230px, 100%); min-width: 0; padding: 12px; border: 1px solid var(--border2, #bbb); border-radius: 10px; scroll-snap-align: start;}
.weather-hour h5{margin: 0 0 8px; font-size: 14px;}
.weather-hour strong{font-size: 22px;}
.weather-hour p{margin: 8px 0;}
.weather-hour span{display: block; font-size: 14px; line-height: 1.6;}
.weather-table-wrap table{border-collapse: collapse; width: 100%; min-width: 680px; overflow-wrap: normal; font-size: 12px;}
.weather-table-wrap th, .weather-table-wrap td{padding: 8px; text-align: left; border-bottom: 1px solid var(--border2, #bbb);}
.weather-v2 summary{padding: 12px 0; cursor: pointer;}
.weather-dialog{box-sizing: border-box; width: min(1000px, 94vw); max-width: 94vw; max-height: 90dvh; overflow: auto; color: var(--text, #182230); background: var(--bg, white); border: 1px solid var(--border2, #bbb); border-radius: 12px; padding: 14px;}
.weather-dialog::backdrop{background: rgb(0 0 0 / 50%);}
/* Compact Overview forecast: readings instead of briefing paragraphs. */
.weather-overview-header,.weather-overview-status{display:flex; justify-content:space-between; align-items:center; gap:8px; flex-wrap:wrap;}
.weather-overview-header h3{margin:0 0 4px;}
.weather-overview-header .weather-now{font-size:30px;}
.weather-overview-status{margin:10px 0; font-size:12px;}
.weather-advisory-count{font-weight:700; color:var(--warning, #8a5100);}
.weather-overview .weather-hour{flex-basis:156px; padding:10px; background:var(--bg2, #fff);}
.weather-overview .weather-condition{font-size:12px; min-height:32px; margin:6px 0;}
.weather-hour-readings{display:grid; grid-template-columns:auto 1fr; gap:4px 8px; margin:0; font-size:12px;}
.weather-hour-readings dt{color:var(--muted, #657080);}
.weather-hour-readings dd{margin:0; text-align:right; font-weight:600;}
.weather-overview small{display:block; font-size:11px;}
/* Shared dispatch / regional weather workspace. */
.map-modes [hidden], .regional-weather-map[hidden], [data-dispatch-controls][hidden], #gpsMapContainer[hidden], #mapContainer[hidden]{display:none!important;}
.operator-weather-panel-head{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:8px;}
#gpsMapWrap .map-toolbar-heading label[hidden],#mapLegend[hidden]{display:none!important;}
.map-mode-switch,.map-view-actions,.map-layer-buttons{display:grid;gap:6px;min-width:0;}
.map-mode-switch{grid-template-columns:repeat(2,minmax(0,1fr));margin-bottom:8px;}
.map-layer-buttons{grid-template-columns:repeat(3,minmax(0,1fr));}
.map-view-actions{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:8px;}
.map-modes button{min-height:44px;min-width:0;padding:8px 6px;border:1px solid var(--border);border-radius:10px;background:var(--bg2);color:var(--text);font:inherit;font-size:12px;cursor:pointer;white-space:normal;}
.map-mode-switch button{font-size:14px;font-weight:700;}
.map-modes button[aria-pressed="true"]{background:#185d85;color:white;border-color:#185d85;}
.map-modes button:focus-visible,.map-layer-drawer summary:focus-visible{outline:3px solid #2483be;outline-offset:2px;}
.map-weather-detail,.map-weather-status,.map-weather-credit{font-size:11px;line-height:1.45;margin:8px 0;overflow-wrap:anywhere;}
.map-weather-legend{display:block;width:100%;height:auto;max-height:56px;background:#fff;border-radius:4px;}
.map-history{margin-top:8px;}
.map-history>div{display:flex;align-items:center;gap:8px;}
.map-history [data-map-time]{font-size:11px;flex:1;}
.map-history label{font-size:11px;display:block;}
.map-history input{display:block;width:100%;min-height:44px;}
.map-layer-drawer{border:1px solid var(--border);border-radius:12px;background:var(--bg);}
.map-layer-drawer summary{min-height:44px;box-sizing:border-box;padding:12px;cursor:pointer;font-size:13px;font-weight:700;}
.map-layer-drawer .map-modes{padding:0 10px 10px;}
#adminWeatherMap{height:440px;min-height:280px;border-radius:12px;overflow:hidden;}
.operator-weather-panel .map-layer-buttons{grid-template-columns:repeat(2,minmax(0,1fr));}
.operator-weather-panel .map-view-actions{grid-template-columns:repeat(2,minmax(0,1fr));}
.operator-weather-panel .map-view-actions button:last-child{grid-column:1/-1;}
@media(max-width:479px){
  #adminWeatherMap{height:380px;}
  .map-view-actions button{font-size:11px;}
  .map-direct-top .map-view-actions{max-width:100%;}
  .map-modes .map-history input{max-width:100%;}
}
@media(max-height:500px){
  #adminWeatherMap{height:280px;}
}
/* Direct map controls: no drawer or nested layer panel. */
.map-direct-top{display:flex;gap:6px;align-items:center;min-width:0;}
.map-direct-top>[data-map-toggle]{flex:none;font-weight:700;background:#185d85;color:#fff;border-color:#185d85;}
.map-direct-top .map-view-actions{display:flex;overflow-x:auto;gap:6px;margin:0;min-width:0;scrollbar-width:thin;}
.map-direct-top .map-view-actions button{flex:none;}
.operator-map-direct .map-layer-buttons{display:flex;overflow-x:auto;gap:6px;padding:6px 0;scrollbar-width:thin;}
.operator-map-direct .map-layer-buttons button{flex:none;min-width:65px;}
.map-weather-detail{position:absolute!important;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);}
.map-modes[data-layer-active="false"] .map-weather-credit{display:none;}
.operator-map-direct .map-weather-legend{max-width:300px;height:33px;object-fit:contain;}
.operator-map-direct .map-weather-status{font-size:10px;margin:4px 0;}
.operator-map-direct{position:absolute;z-index:11;top:68px;left:10px;right:76px;pointer-events:none;}
.operator-map-direct .map-modes{pointer-events:auto;padding:6px;border:1px solid var(--border);border-radius:12px;background:var(--bg);box-shadow:0 2px 8px #0002;}
.operator-map-direct .map-modes button{font-size:11px;}
.operator-map-direct .map-history>div{gap:4px;}
.operator-map-direct .map-history{margin:4px 0;}
.operator-map-direct .map-history label{font-size:10px;}
.operator-map-direct .map-weather-credit{font-size:10px;}
.operator-map-direct .map-modes[data-layer-active="true"] .map-weather-status{max-height:28px;overflow:auto;}
@media(max-height:500px){
  .operator-map-direct{top:8px;right:200px;}
  .operator-map-direct .map-history{display:flex;gap:8px;align-items:center;}
  .operator-map-direct .map-history>div,.operator-map-direct .map-history>label{flex:1;min-width:0;}
  .operator-map-direct .map-weather-legend{height:24px;}
}
/* Keep controls on the map edge rather than inside a floating card. */
.operator-map-direct .map-modes{padding:0;border:0;background:none;box-shadow:none;pointer-events:none;}
.operator-map-direct .map-modes button,.operator-map-direct .map-modes input{pointer-events:auto;}
.operator-map-direct .map-modes button{background:var(--bg,#fff);box-shadow:0 1px 3px #0002;}
.operator-map-direct .map-modes [data-map-toggle],.operator-map-direct .map-modes button[aria-pressed="true"]{background:#185d85;color:#fff;}
.operator-map-direct .map-weather-status,.operator-map-direct .map-weather-credit,.operator-map-direct .map-history{width:fit-content;max-width:100%;padding:3px 6px;border-radius:5px;background:var(--bg,#fff);box-sizing:border-box;}
.operator-map-direct .map-weather-credit{display:inline-block;pointer-events:auto;}
.operator-map-direct .map-modes[data-layer-active="false"] .map-weather-credit{display:none;}
.operator-map-direct[hidden]{display:none!important;}
.map-native-legend{max-height:90px;overflow:auto;max-width:100%;pointer-events:auto;}
/* Reserve loading feedback space so frame changes do not move map controls. */
.map-modes .map-weather-status{min-height:2.6em;line-height:1.3;overflow-wrap:anywhere;}
.map-modes[aria-busy="true"] .map-weather-status{border-inline-start:3px solid #168da0;padding-inline-start:8px;}
.operator-map-direct .map-layer-buttons,.operator-map-direct .map-view-actions{pointer-events:auto;overscroll-behavior-inline:contain;}
.operator-map-direct .map-modes[data-layer-active="true"] .map-weather-status{max-height:4em;}
/* Operator weather shares the existing compact map control stack. */
#mapWeatherBtn{font-size:11px;font-weight:700;}
#mapWeatherBtn[aria-pressed="true"]{background:#185d85;color:#fff;border-color:#185d85;}
.operator-map-direct .map-direct-top,.operator-map-direct .map-layer-buttons,.operator-map-direct .map-history{display:none!important;}
.operator-map-direct .map-modes[data-layer-active="false"]{display:none;}
.operator-map-direct{top:68px;bottom:auto;max-width:230px;}
.operator-map-direct .map-weather-legend{max-width:100%;}
@media(max-height:620px) and (min-width:480px){
  .operator-map-direct{top:8px;max-width:180px;}
  #tabMap:has(#operatorMapModes[data-layer-active="true"]) .map-info-card{left:210px;right:10px;max-width:none;}
}
@media(max-height:620px){
  .operator-map-direct .map-weather-legend{display:block;height:18px;margin:0;}
  .operator-map-direct .map-weather-status,.operator-map-direct .map-weather-credit{display:block;font-size:9px;line-height:13px;margin:0;padding:1px 3px;}
}