/* playas.css — RX-OS chrome for the sargassum / beach console.
 *
 * The panel, chip, metric and button rules are the RX-OS Fleet idiom
 * (gps-RD/web/fleet-live.css) kept byte-faithful where they are shared, so
 * this screen sits next to Fleet Live without a second visual language.
 * Only the page-specific pieces below the PANELS block are new: the beach
 * rail, the inspector, the month scrubber and the map markers.
 *
 * Depends on rx-tokens.css for every colour, radius, font and duration.
 */

/* --- second token layer: the panel chrome, dark default ------------------ */
:root {
  --map-bg-tile: #0A0D12;
  --panel-bg: rgba(11, 14, 18, 0.78);
  --panel-bg-solid: rgba(11, 14, 18, 0.94);
  --panel-border: rgba(212, 217, 228, 0.10);
  --panel-border-strong: rgba(212, 217, 228, 0.18);
  --panel-shadow: 0 1px 0 rgba(0,0,0,0.5), 0 24px 60px -20px rgba(0,0,0,0.7), inset 0 0 0 1px rgba(255,255,255,0.04);
  --panel-radius: 10px;

  /* Risk hues are the API's own contract ('none'|'low'|'medium'|'high'),
     mapped onto RX signal/anomaly/guard so the console reads as one system
     instead of importing Bootstrap red. */
  --risk-none: var(--rx-fog-4);
  --risk-low: var(--rx-signal-500);
  --risk-medium: var(--rx-anomaly-500);
  --risk-high: var(--rx-guard-500);
  --sargazo: #C08A3E;
}

html.theme-light {
  --map-bg-tile: #E7ECF1;
  --panel-bg: rgba(255, 255, 255, 0.90);
  --panel-bg-solid: rgba(255, 255, 255, 0.98);
  --panel-border: rgba(15, 20, 25, 0.10);
  --panel-border-strong: rgba(15, 20, 25, 0.20);
  --panel-shadow: 0 1px 2px rgba(15,20,25,0.06), 0 16px 40px -20px rgba(15,20,25,0.20), inset 0 0 0 1px rgba(15,20,25,0.04);
  --sargazo: #8A5A00;
}

* { box-sizing: border-box; }
html, body {
  margin: 0; height: 100%;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--rx-ff-sans);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

.stage { position: fixed; inset: 0; background: var(--map-bg-tile); overflow: hidden; }

/* ---------- MAP ---------- */
#map { position: absolute; inset: 0; z-index: 0; background: var(--bg-sunk); }
#map .leaflet-control-attribution {
  font-size: 9px; background: rgba(0,0,0,0.45); color: #8a93a3;
  font-family: var(--rx-ff-sans);
}
html.theme-light #map .leaflet-control-attribution { background: rgba(255,255,255,0.8); color: #55606E; }
#map .leaflet-control-attribution a { color: var(--fg-2); }
/* Zoom lives bottom-right: top-left is where the brand/filter panel sits, and
   Leaflet's default corner puts the control underneath it. */
#map .leaflet-control-zoom { border: 0; margin: 0 16px 26px 0; }
#map .leaflet-control-zoom a {
  background: var(--panel-bg-solid); color: var(--fg-1);
  border: 1px solid var(--panel-border-strong);
  backdrop-filter: blur(14px);
}
#map .leaflet-control-zoom a:hover { background: var(--surface-2); color: var(--fg); }
#map .leaflet-popup-content-wrapper, #map .leaflet-popup-tip {
  background: var(--panel-bg-solid); color: var(--fg);
  border: 1px solid var(--panel-border-strong);
  box-shadow: var(--panel-shadow); border-radius: 6px;
}
#map .leaflet-popup-content { margin: 10px 12px; font-size: 12px; }

/* ---------- PANELS ---------- */
.panel {
  position: absolute;
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  border-radius: var(--panel-radius);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  box-shadow: var(--panel-shadow);
  color: var(--fg);
  z-index: 5;
}
.panel-header {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--panel-border);
  font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--fg-2); min-height: 38px;
}
.panel-header .marker { color: var(--accent); font-size: 12px; letter-spacing: 0; }
.panel-header .title { color: var(--fg-1); }
.panel-header .right { margin-left: auto; display: flex; gap: 6px; align-items: center; }

/* ---------- top-left: brand + search + region chips ---------- */
.panel.brand-search { left: 16px; top: 16px; width: 372px; max-height: calc(100vh - 220px); overflow: auto; }
.brand-row {
  display: flex; align-items: baseline; gap: 8px;
  padding: 14px 14px 0;
  font-size: 12px; letter-spacing: 0.06em; color: var(--fg-2);
}
.brand-row .brand-strong { color: var(--fg); font-weight: 600; letter-spacing: -0.01em; font-size: 13px; }
.brand-row .sep { color: var(--rx-signal-500); }
.brand-row .path { color: var(--fg-3); margin-left: auto; font-size: 10px; letter-spacing: 0.1em; }

.search-bar {
  margin: 10px 14px 12px;
  display: flex; align-items: center; gap: 10px;
  background: var(--bg-sunk);
  border: 1px solid var(--panel-border-strong);
  border-radius: 6px; padding: 7px 10px;
  transition: border-color var(--rx-dur-fast) var(--rx-ease);
}
.search-bar:focus-within { border-color: var(--rx-signal-500); }
html.theme-light .search-bar:focus-within { border-color: var(--rx-deep-500); }
.search-bar input {
  flex: 1; background: transparent; border: 0; outline: 0;
  color: var(--fg); font-family: var(--rx-ff-sans); font-size: 12px; letter-spacing: 0.04em;
}
.search-bar input::placeholder { color: var(--fg-3); }
.search-bar .icon {
  width: 14px; height: 14px; border: 1.5px solid var(--fg-3); border-radius: 50%;
  position: relative; flex: 0 0 14px;
}
.search-bar .icon::after {
  content: ""; position: absolute; right: -4px; bottom: -4px;
  width: 6px; height: 1.5px; background: var(--fg-3); transform: rotate(45deg);
}

.chip-row { display: flex; gap: 6px; flex-wrap: wrap; padding: 0 14px 14px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 9px; border-radius: 999px;
  font-family: var(--rx-ff-sans); font-size: 10.5px;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--fg-1); background: transparent;
  border: 1px solid var(--panel-border-strong);
  cursor: pointer; transition: all var(--rx-dur-fast) var(--rx-ease);
  user-select: none;
}
.chip:hover { border-color: var(--line-strong); color: var(--fg); }
.chip .count { font-size: 10px; color: var(--fg-3); font-variant-numeric: tabular-nums; }
.chip[data-active="true"] { background: var(--rx-signal-500); border-color: var(--rx-signal-500); color: var(--on-status); }
html.theme-light .chip[data-active="true"] { background: var(--rx-deep-500); border-color: var(--rx-deep-500); color: var(--rx-paper); }
.chip[data-active="true"] .count { color: var(--on-status); opacity: 0.65; }
html.theme-light .chip[data-active="true"] .count { color: var(--rx-paper); }
.chip .swatch { width: 7px; height: 7px; border-radius: 50%; background: var(--fg-3); }

.field-label {
  padding: 0 14px 6px; font-size: 9px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--fg-3);
}
.sel-row { display: flex; gap: 6px; padding: 0 14px 12px; }
select.rx-select {
  flex: 1; min-width: 0;
  background: var(--bg-sunk); color: var(--fg);
  border: 1px solid var(--panel-border-strong); border-radius: 6px;
  padding: 6px 8px; font-family: var(--rx-ff-sans); font-size: 11px;
  outline: 0;
}
select.rx-select:focus { border-color: var(--rx-signal-500); }
html.theme-light select.rx-select:focus { border-color: var(--rx-deep-500); }

/* ---------- top-center: screen nav ---------- */
.panel.screen-nav-panel {
  left: 50%; top: 16px; transform: translateX(-50%);
  display: flex; align-items: stretch; padding: 0; z-index: 5;
}
.panel.screen-nav-panel a, .panel.screen-nav-panel button {
  background: transparent; border: 0;
  font-family: var(--rx-ff-sans); font-size: 11px;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--fg-2); text-decoration: none;
  padding: 13px 11px 11px; border-bottom: 2px solid transparent;
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  cursor: pointer;
  transition: color var(--rx-dur-fast) var(--rx-ease), border-color var(--rx-dur-fast) var(--rx-ease);
}
.panel.screen-nav-panel a:hover, .panel.screen-nav-panel button:hover { color: var(--fg); }
.panel.screen-nav-panel a.active, .panel.screen-nav-panel button.active {
  color: var(--fg); border-bottom-color: var(--rx-signal-500);
}
html.theme-light .panel.screen-nav-panel a.active,
html.theme-light .panel.screen-nav-panel button.active { border-bottom-color: var(--rx-deep-500); }

/* ---------- top-right: run status ---------- */
.panel.topbar-right { right: 16px; top: 16px; display: flex; align-items: stretch; padding: 0; }
.panel.topbar-right .stat {
  padding: 10px 14px; border-right: 1px solid var(--panel-border);
  display: flex; flex-direction: column; gap: 2px; text-decoration: none;
}
.panel.topbar-right .stat:last-child { border-right: 0; }
.panel.topbar-right .stat .k {
  font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-3);
}
.panel.topbar-right .stat .v {
  font-size: 15px; color: var(--fg); font-variant-numeric: tabular-nums; line-height: 1.2;
}
.panel.topbar-right .stat .v.live { color: var(--rx-signal-500); }
.panel.topbar-right .stat .v.alarm { color: var(--rx-guard-500); }
.live-dot {
  display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: var(--rx-signal-500); margin-right: 6px;
  animation: pulse 2s var(--rx-ease) infinite;
}
@keyframes pulse { 0%,100% { opacity: 1 } 50% { opacity: 0.35 } }

/* ---------- bottom-left: metrics ---------- */
.panel.metrics { left: 16px; bottom: 76px; width: 372px; }
.metric-grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 1px; background: var(--panel-border); padding: 1px;
}
.metric {
  background: var(--panel-bg-solid); padding: 12px 14px;
  display: flex; flex-direction: column; gap: 4px;
}
.metric .k { font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-3); }
.metric .v {
  font-size: 28px; font-weight: 500; line-height: 1; letter-spacing: -0.02em;
  color: var(--fg); font-variant-numeric: tabular-nums;
}
.metric .v.live { color: var(--rx-signal-500); }
.metric .v.warn { color: var(--rx-anomaly-500); }
.metric .v.alarm { color: var(--rx-guard-500); }
.metric .v.muted { color: var(--fg-3); }
.metric .sub { font-size: 10px; color: var(--fg-3); letter-spacing: 0.06em; }

.health-strip {
  display: flex; border-top: 1px solid var(--panel-border);
  font-size: 10px; letter-spacing: 0.08em;
}
.health-strip .h-item {
  flex: 1; padding: 10px 12px; border-right: 1px solid var(--panel-border);
  color: var(--fg-2); display: flex; align-items: center; justify-content: space-between; gap: 6px;
}
.health-strip .h-item:last-child { border-right: 0; }
.health-strip .h-item .badge { font-size: 11px; color: var(--fg); font-variant-numeric: tabular-nums; }
.health-strip .h-item .badge.zero { color: var(--rx-signal-500); }
.health-strip .h-item .badge.warn { color: var(--rx-anomaly-500); }
.health-strip .h-item .badge.alarm { color: var(--rx-guard-500); }

/* ---------- right: beach rail ---------- */
.panel.rail {
  right: 16px; top: 92px; bottom: 116px; width: 320px;
  display: flex; flex-direction: column; padding: 0; overflow: hidden;
  transition: width var(--rx-dur-med) var(--rx-ease);
}
.panel.rail.collapsed { width: 64px; }
.panel.rail.collapsed .rail-list, .panel.rail.collapsed .rail-header .label { display: none; }
.rail-header {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 12px 12px; border-bottom: 1px solid var(--panel-border);
  font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-2);
}
.rail-header .toggle {
  background: transparent; border: 1px solid var(--panel-border-strong);
  border-radius: 4px; color: var(--fg-2); cursor: pointer;
  width: 24px; height: 24px; line-height: 1; flex: 0 0 24px;
}
.rail-header .toggle:hover { color: var(--fg); border-color: var(--line-strong); }
.rail-list { flex: 1; overflow-y: auto; }
.rail-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border-bottom: 1px solid var(--panel-border);
  cursor: pointer; transition: background var(--rx-dur-fast) var(--rx-ease);
}
.rail-item:hover { background: var(--surface-2); }
.rail-item.sel { background: var(--surface-2); box-shadow: inset 2px 0 0 var(--accent); }
.rail-item .dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 8px; }
.rail-item .txt { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 2px; }
.rail-item .n {
  font-size: 12px; color: var(--fg); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.rail-item .m {
  font-size: 9.5px; color: var(--fg-3); letter-spacing: 0.08em;
  text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rail-item .km { font-size: 10px; color: var(--fg-2); font-variant-numeric: tabular-nums; }

/* ---------- inspector (beach detail) ---------- */
.panel.inspector {
  right: 352px; top: 92px; width: 340px; max-height: calc(100vh - 230px);
  display: none; flex-direction: column; overflow: hidden;
}
.panel.inspector.open { display: flex; }
.ins-body { overflow-y: auto; padding: 0 0 4px; }
.ins-title { padding: 12px 14px 4px; }
.ins-title .n { font-size: 17px; color: var(--fg); letter-spacing: -0.01em; }
.ins-title .p { font-size: 10px; color: var(--fg-3); letter-spacing: 0.12em; text-transform: uppercase; margin-top: 3px; }
.ins-risk {
  margin: 10px 14px; padding: 10px 12px; border-radius: 6px;
  border: 1px solid var(--panel-border-strong); background: var(--bg-sunk);
}
.ins-risk .lvl { font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600; }
.ins-risk .why { font-size: 10.5px; color: var(--fg-2); margin-top: 5px; line-height: 1.5; }
.ins-sec { padding: 8px 14px; border-top: 1px solid var(--panel-border); }
.ins-sec .k { font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-3); margin-bottom: 5px; }
.ins-sec .v { font-size: 12px; color: var(--fg-1); line-height: 1.5; }
.tag-row { display: flex; flex-wrap: wrap; gap: 4px; }
.tag {
  font-size: 10px; letter-spacing: 0.04em; padding: 3px 7px;
  border: 1px solid var(--panel-border-strong); border-radius: 999px; color: var(--fg-1);
}
.ins-actions { display: flex; gap: 6px; padding: 10px 14px; border-top: 1px solid var(--panel-border); }

/* ---------- bottom-center: month scrubber ---------- */
.panel.scrubber { left: 50%; transform: translateX(-50%); bottom: 16px; width: min(760px, calc(100vw - 32px)); }
.scrub-row { display: flex; align-items: center; gap: 14px; padding: 10px 14px; }
.scrub-status { min-width: 132px; }
.scrub-status .label { font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-3); display: block; }
.scrub-status .value { font-size: 13px; color: var(--fg); }
.months { display: flex; flex: 1; gap: 2px; }
.months button {
  flex: 1; background: transparent; border: 1px solid transparent;
  border-radius: 4px; padding: 7px 0;
  font-family: var(--rx-ff-sans); font-size: 10px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--fg-3); cursor: pointer;
  transition: all var(--rx-dur-fast) var(--rx-ease);
}
.months button:hover { color: var(--fg); }
.months button.on { color: var(--on-status); background: var(--accent); border-color: var(--accent); }
.months button .bar { display: block; height: 3px; margin-top: 5px; border-radius: 2px; opacity: 0.9; }

.btn {
  background: transparent; border: 1px solid var(--panel-border-strong);
  border-radius: 4px; padding: 5px 10px;
  font-family: var(--rx-ff-sans); font-size: 10px;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-1);
  cursor: pointer; transition: all var(--rx-dur-fast) var(--rx-ease);
  text-decoration: none; display: inline-flex; align-items: center; gap: 5px;
}
.btn:hover { color: var(--fg); border-color: var(--line-strong); }
.btn.primary { background: var(--rx-signal-500); color: var(--on-status); border-color: var(--rx-signal-500); }
.btn.primary:hover { background: var(--rx-signal-600); }
html.theme-light .btn.primary { background: var(--rx-deep-500); border-color: var(--rx-deep-500); color: var(--rx-paper); }

/* ---------- legend + credits ---------- */
/* The legend rides inside the scrubber panel: as a free-floating panel it
   collided with the scrubber on every viewport between 1180 and 1500px. */
.legend-row {
  display: flex; gap: 14px; align-items: center; flex-wrap: wrap;
  padding: 8px 14px; border-top: 1px solid var(--panel-border);
}
.legend-row .lg { display: flex; align-items: center; gap: 6px; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-2); }
.legend-row .lg .sw { width: 9px; height: 9px; border-radius: 50%; }
.legend-row .lg .sw.mass { border-radius: 50%; background: var(--sargazo); opacity: 0.85; }
/* ---------- credits · licences ---------- */
/* Off the map chrome, behind the brand-row ⓘ. Anchored bottom-left where the
   old corner credit sat, so the affordance and the panel read as one thing. */
.panel.credits-panel {
  left: 16px; bottom: 16px; width: 372px; max-width: calc(100vw - 32px);
  display: none; flex-direction: column; overflow: hidden; z-index: 6;
}
.panel.credits-panel.open { display: flex; }
.credits-body { padding: 10px 14px 12px; display: flex; flex-direction: column; gap: 8px; }
.credits-body .credit-owner {
  font-size: 10px; color: var(--fg-2); line-height: 1.5;
  padding-bottom: 8px; border-bottom: 1px solid var(--panel-border);
}
.credits-body .credit-item { font-size: 9.5px; color: var(--fg-3); letter-spacing: 0.04em; line-height: 1.6; }
.credits-body a { color: var(--fg-2); }
/* The ⓘ lives in the brand row, which survives the 820px breakpoint — the nav
   does not, and attribution that is unreachable on a phone is not attribution. */
.brand-row .info-btn {
  margin-left: auto; background: transparent; cursor: pointer;
  border: 1px solid var(--panel-border-strong); border-radius: 50%;
  width: 17px; height: 17px; padding: 0; flex: 0 0 auto;
  font-family: var(--rx-ff-sans); font-size: 9.5px; font-style: italic; line-height: 1;
  color: var(--fg-3);
  transition: color var(--rx-dur-fast) var(--rx-ease), border-color var(--rx-dur-fast) var(--rx-ease);
}
.brand-row .info-btn:hover { color: var(--fg); border-color: var(--fg-3); }

/* Scrollbars — the OS default is a bright slab that reads as a light-theme
   element pasted onto a dark panel. */
.ins-body, .rail-list, .panel.brand-search { scrollbar-width: thin; scrollbar-color: var(--panel-border-strong) transparent; }
.ins-body::-webkit-scrollbar, .rail-list::-webkit-scrollbar, .panel.brand-search::-webkit-scrollbar { width: 8px; }
.ins-body::-webkit-scrollbar-track, .rail-list::-webkit-scrollbar-track, .panel.brand-search::-webkit-scrollbar-track { background: transparent; }
.ins-body::-webkit-scrollbar-thumb, .rail-list::-webkit-scrollbar-thumb, .panel.brand-search::-webkit-scrollbar-thumb {
  background: var(--panel-border-strong); border-radius: 999px;
}
.ins-body::-webkit-scrollbar-thumb:hover, .rail-list::-webkit-scrollbar-thumb:hover, .panel.brand-search::-webkit-scrollbar-thumb:hover {
  background: var(--fg-3);
}

/* ---------- map markers ---------- */
.beach-pin {
  width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid rgba(7,9,11,0.85);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.25), 0 2px 6px rgba(0,0,0,0.5);
  transition: transform var(--rx-dur-fast) var(--rx-ease);
}
html.theme-light .beach-pin { border-color: rgba(255,255,255,0.9); box-shadow: 0 0 0 1px rgba(15,20,25,0.25), 0 2px 6px rgba(15,20,25,0.25); }
.beach-pin.sel { transform: scale(1.5); box-shadow: 0 0 0 2px var(--accent), 0 0 18px -2px var(--accent); }
.beach-pin.pa { border-style: dashed; }

/* Toast — one line, same corner as Fleet. */
.toast {
  position: absolute; left: 50%; transform: translateX(-50%); bottom: 96px;
  padding: 9px 14px; font-size: 11px; letter-spacing: 0.06em;
  display: none; z-index: 9;
}
.toast.show { display: block; }
.toast.err { border-color: var(--rx-guard-500); color: var(--rx-guard-500); }

/* ---------- narrow screens: panels stack, rail and inspector go full width -- */
@media (max-width: 1400px) {
  /* The path breadcrumb is the first thing to go: it is the only decorative
     string in the panel and it is what collides with the centre nav. */
  .brand-row .path { display: none; }
}
@media (max-width: 1180px) {
  /* No room for three columns of chrome. The rail and the metrics both restate
     what the inspector and the scrubber already say, so they go and the credit
     line — which the data licence requires — keeps its place. */
  .panel.rail { display: none; }
  .panel.metrics { display: none; }
  .panel.inspector { right: 16px; top: 92px; bottom: 140px; max-height: none; }
  .legend-row { display: none; }
  /* Metrics is gone at this width, so the credit line climbs above the
     scrubber instead of hiding underneath it. */
  .credits { bottom: 88px; }
}
@media (max-width: 820px) {
  .panel.brand-search { width: calc(100vw - 32px); max-height: 46vh; }
  .panel.screen-nav-panel, .panel.topbar-right { display: none; }
  .panel.inspector { width: calc(100vw - 32px); top: 16px; }
  .panel.scrubber { width: calc(100vw - 32px); }
  .panel.credits-panel { width: calc(100vw - 32px); }
}