/* FHI Live Operations Mosaic - wallboard chrome.
   The 3D scene owns the screen; chrome floats over it and stays minimal. */

:root {
  --bg: #06080d;
  --ink: #e8ecf4;
  --ink-dim: #8e99ad;
  --ink-faint: #55607a;
  --panel: rgba(10, 14, 22, 0.55);
  --panel-strong: rgba(8, 11, 18, 0.88);
  --hairline: rgba(255, 255, 255, 0.08);
  --vignette-edge: rgba(3, 5, 9, 0.55);
}

/* The UA stylesheet's [hidden] { display: none } is the weakest rule
   there is, so ANY id or class rule setting display overrides it and the
   element stays on screen while el.hidden reads true. That has now bitten
   twice: #timeline, where a live-only viewer could still scrub the board
   into an as-of cut, and #hints-body, where the controls plate would not
   collapse. Fixing it per id missed the second one, so fix the class of
   bug instead. #clear-filters below is the one deliberate exception.
   editor.html does not load this stylesheet, so its scope is index.html. */
[hidden] { display: none !important; }

body.theme-light {
  --bg: #e9e6dd;
  --ink: #23272f;
  --ink-dim: #585f6d;
  --ink-faint: #8a8f9a;
  --panel: rgba(255, 255, 255, 0.72);
  --panel-strong: rgba(252, 251, 248, 0.94);
  --hairline: rgba(0, 0, 0, 0.10);
  --vignette-edge: rgba(120, 112, 96, 0.28);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--ink);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}

#stage { position: fixed; inset: 0; }
#stage canvas { display: block; }

/* soft radial vignette for depth; pointer events pass through */
#vignette {
  position: fixed; inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 120% 100% at 50% 42%,
              transparent 55%, var(--vignette-edge) 100%);
}

/* honest-failure banner: live fallback / stale data. Loud on purpose. */
#live-banner {
  position: fixed;
  top: 0; left: 50%;
  transform: translateX(-50%);
  max-width: 92vw;
  padding: 8px 18px;
  border-radius: 0 0 8px 8px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  z-index: 40;
  pointer-events: none;
}
#live-banner.err {
  background: rgba(122, 28, 34, 0.92);
  color: #ffd9db;
  border: 1px solid rgba(255, 120, 128, 0.5);
  border-top: none;
}

#hud-header {
  position: fixed;
  top: 22px; left: 28px;
  pointer-events: none;
  user-select: none;
}
#hud-title {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.22em;
  color: var(--ink-dim);
}
#hud-title #hud-view {
  color: var(--ink);
  margin-left: 6px;
}
#hud-clock {
  margin-top: 6px;
  font-size: 34px;
  font-weight: 650;
  letter-spacing: 0.02em;
}
#hud-mode {
  margin-top: 4px;
  font-size: 12px;
  color: var(--ink-faint);
  letter-spacing: 0.06em;
}

/* snapshot cycle pills */
#cycle-toggle {
  margin-top: 10px;
  display: flex;
  gap: 6px;
  pointer-events: auto;
}
.cycle-pill {
  font: inherit;
  font-size: 11px;
  letter-spacing: 0.05em;
  padding: 3px 11px;
  border-radius: 999px;
  border: 1px solid var(--hairline);
  color: var(--ink-dim);
  background: var(--panel);
  cursor: pointer;
}
.cycle-pill:hover { color: var(--ink); }
.cycle-pill.active {
  color: var(--ink);
  border-color: var(--ink-dim);
}

#hud-right {
  position: fixed;
  top: 22px; right: 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
  user-select: none;
}
#clear-filters {
  align-self: flex-end;
  pointer-events: auto;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--ink-dim);
  border: 1px solid var(--hairline);
  border-radius: 4px;
  padding: 4px 9px;
  background: var(--panel);
  cursor: pointer;
}
#clear-filters:hover { color: var(--ink); }
/* reserve the chip's slot even while hidden, so pinning a first filter
   never shifts the legend panels down */
#clear-filters[hidden] {
  /* !important to beat the global [hidden] rule above; the id keeps this
     more specific, so it wins. */
  display: block !important;
  visibility: hidden;
  pointer-events: none;
}
.hud-panel {
  width: 264px;                /* fixed: hover context never resizes the HUD */
  padding: 12px 16px;
  background: var(--panel);
  border: 1px solid var(--hairline);
  border-radius: 10px;
  backdrop-filter: blur(6px);
}
#hud-total {
  font-size: 12px;
  color: var(--ink-dim);
}
#hud-total-n {
  font-size: 16px;
  font-weight: 650;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
/* the hover-context slot is always reserved (two lines), so the rows below
   never move; long labels wrap once, then crop with an ellipsis */
#hud-context {
  height: 28px;
  line-height: 14px;
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.04em;
  color: var(--ink);
  text-align: right;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 2px 0 8px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--hairline);
}
.legend-row > span:nth-child(2) {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.legend-row .n {
  flex: none;
  width: 44px;
  text-align: right;
}
.legend-row .n2 {
  flex: none;
  width: 44px;
  text-align: right;
  color: var(--ink);
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}
.legend-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  line-height: 1.9;
  color: var(--ink-dim);
}

/* legend rows are interactive: hover previews (spotlight / breakdown
   columns), click pins it sticky, ctrl+click multi-selects */
#hud-hosts, #hud-legend, #hud-commodity { pointer-events: auto; }
#hud-hosts .legend-row, #legend-rows .legend-row,
#commodity-rows .legend-row {
  cursor: pointer;
  padding: 0 6px;
  margin: 0 -6px;
  border-radius: 6px;
  user-select: none;
}
#hud-hosts .legend-row:hover, #legend-rows .legend-row:hover,
#commodity-rows .legend-row:hover,
.legend-row.pinned {
  background: var(--hairline);
  color: var(--ink);
}
/* bare rows (no swatch: commodity + single-host facility panels) lead
   with the label; undo the generic nth-child(2) flex rule that assumes
   a swatch is the first child */
#hud-right .legend-row.bare > span:first-child {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#hud-right .legend-row.bare .n {
  flex: none;
  width: 44px;
  text-align: right;
}
.legend-row .swatch {
  width: 10px; height: 10px;
  border-radius: 2px;
  flex: none;
}
.legend-row .n {
  margin-left: auto;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

/* 24h refresh timeline: a line with one node per graph refresh. Click a
   node to view the board as of that refresh; LIVE returns. */
#timeline {
  position: fixed;
  left: 28px; right: 28px; bottom: 38px;
  display: flex;
  align-items: center;
  gap: 14px;
  z-index: 30;
  user-select: none;
}
#tl-track {
  position: relative;
  flex: 1;
  height: 28px;
}
#tl-track::before {              /* faint full-width baseline */
  content: "";
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: 1px;
  background: var(--hairline);
}
#tl-line {                       /* solid line up to the newest refresh;
                                    width transition = the "grow" */
  position: absolute;
  left: 0; top: 50%;
  height: 2px;
  margin-top: -1px;
  width: 0;
  background: var(--ink-faint);
  transition: width 0.9s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.tl-node {
  position: absolute;
  top: 50%;
  width: 9px; height: 9px;
  margin: -4.5px 0 0 -4.5px;
  border-radius: 50%;
  background: var(--ink-dim);
  cursor: pointer;
  transition: left 0.9s cubic-bezier(0.2, 0.7, 0.3, 1),
              transform 0.15s ease, background 0.15s ease;
}
.tl-node:hover { transform: scale(1.7); background: var(--ink); }
.tl-node.sel {
  transform: scale(1.7);
  background: var(--ink);
  box-shadow: 0 0 0 4px var(--hairline);
}
.tl-node.born { animation: tl-pop 0.55s cubic-bezier(0.2, 1.4, 0.4, 1); }
@keyframes tl-pop {
  0%   { transform: scale(0); }
  70%  { transform: scale(1.8); }
  100% { transform: scale(1); }
}
#tl-now {                        /* the right edge is NOW; soft pulse */
  position: absolute;
  right: -3px; top: 50%;
  width: 7px; height: 7px;
  margin-top: -3.5px;
  border-radius: 50%;
  background: var(--ink-faint);
  animation: tl-pulse 2.4s ease-in-out infinite;
}
@keyframes tl-pulse {
  0%, 100% { opacity: 0.35; }
  50%      { opacity: 1; }
}
#tl-tip {
  position: absolute;
  bottom: 24px;
  transform: translateX(-50%);
  padding: 3px 8px;
  border-radius: 4px;
  background: var(--panel);
  border: 1px solid var(--hairline);
  color: var(--ink);
  font-size: 11px;
  letter-spacing: 0.05em;
  white-space: nowrap;
  pointer-events: none;
}
.tl-chip {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--ink-faint);
  border: 1px solid var(--hairline);
  border-radius: 4px;
  padding: 4px 9px;
  cursor: pointer;
  background: var(--panel);
}
.tl-chip:hover { color: var(--ink); }
.tl-chip.on { color: var(--ink); border-color: var(--ink-faint); }
#tl-left {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
#tl-secs-wrap {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 9px;
  color: var(--ink-faint);
  cursor: text;
}
#tl-secs {
  width: 34px;
  padding: 2px 2px;
  font-size: 10px;
  text-align: center;
  color: var(--ink);
  background: var(--panel);
  border: 1px solid var(--hairline);
  border-radius: 4px;
  outline: none;
}
#tl-secs:focus { border-color: var(--ink-faint); }

/* Insite Dock deep-link chip: parked at the hovered department's back
   rim, out of the click-through path but easy to mouse onto */
#dock-link {
  position: fixed;
  z-index: 35;
  transform: translate(-50%, -100%);
  pointer-events: auto;
  opacity: 1;
  transition: opacity 60ms linear;
}
#dock-link.fading {
  opacity: 0;
  pointer-events: none;
}
/* load cards park BESIDE the stack (never over it - the pile above the
   hovered block must stay hoverable) */
#dock-link.side {
  transform: translate(0, -50%);
}
/* dept drill-through chip (non-.side) reads bold */
#dock-link:not(.side) a {
  font-weight: 700;
}
#dock-link a {
  display: block;
  padding: 5px 11px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  line-height: 1.5;
  color: var(--ink);
  text-decoration: none;
  background: var(--panel);
  border: 1px solid var(--hairline);
  border-radius: 6px;
  backdrop-filter: blur(6px);
  white-space: nowrap;
  max-width: 300px;
  overflow: hidden;
  text-overflow: ellipsis;
}
#dock-link .dl-dim {
  color: var(--ink-dim);
  font-weight: 500;
}
#dock-link a:hover { border-color: var(--ink-faint); }

#hud-hints {
  position: fixed;
  bottom: 16px; right: 28px;
  display: flex;
  /* stretch, not flex-end: the pill and the plate have different font
     sizes and padding, so matching their heights by hand would drift the
     moment either changes. Let flex equalise them. */
  align-items: stretch;
  gap: 8px;
  font-size: 11px;
  letter-spacing: 0.05em;
  color: var(--ink-dim);
  /* the footer itself must not eat drags; its two children opt back in */
  pointer-events: none;
  user-select: none;
  max-width: calc(100vw - 56px);
}
#hints-toggle {
  pointer-events: auto;
  cursor: pointer;
  flex: none;
  /* centre the label in whatever height the row settles on */
  display: flex;
  align-items: center;
  padding: 0 12px;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  background: var(--panel-strong);
  backdrop-filter: blur(4px);
  color: var(--ink-dim);
  font: 600 10.5px/1 system-ui, sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
#hints-toggle:hover { color: var(--ink); border-color: var(--ink-faint); }
/* An opaque-enough plate. The hints used to be bare text at --ink-faint
   and became unreadable the moment a facility passed under them, which on
   a wide layout is most of the time. */
#hints-body {
  pointer-events: auto;
  padding: 6px 12px;
  display: flex;
  align-items: center;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  background: var(--panel-strong);
  backdrop-filter: blur(6px);
  line-height: 1.5;
}

#cam-out {
  position: fixed;
  bottom: 44px; left: 28px;
  padding: 12px 16px;
  background: var(--panel);
  border: 1px solid var(--hairline);
  border-radius: 10px;
  backdrop-filter: blur(6px);
  font: 12px/1.6 Consolas, monospace;
  color: var(--ink);
  cursor: pointer;
  user-select: text;
  z-index: 10;
}

#boot-error {
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  max-width: 460px;
  padding: 24px 28px;
  background: #10141d;
  border: 1px solid var(--hairline);
  border-radius: 12px;
}
#boot-error h2 { font-size: 16px; margin-bottom: 10px; }
#boot-error p { font-size: 13px; color: var(--ink-dim); margin: 8px 0; }
#boot-error pre {
  background: #070a10;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 12px;
  color: #9fd6ff;
  overflow-x: auto;
}
#boot-error a { color: #6ab7ff; }

/* Clickthrough gate: the viewer holds no grant on this department in
   Insite Dock, so the chip still names the dock but does not link. Muted
   and not-allowed rather than hidden, so the board reads the same for
   everyone and the absence is legible instead of mysterious. */
#dock-link.no-access a {
  cursor: not-allowed;
  opacity: 0.55;
  border-style: dashed;
}
#dock-link.no-access a:hover { border-color: var(--ink-faint); }

/* Platform-standard support blurb on failure panels (mirrors
   Insite_Photo_Approval's SupportContact component). Kept visually quieter
   than the specific error above it, but always present. */
#boot-error .support {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--ink-faint, #333);
  font-size: 12.5px;
  line-height: 1.5;
}
#boot-error details { margin-top: 12px; }
#boot-error summary {
  font-size: 12px;
  color: var(--ink-dim);
  cursor: pointer;
}

/* Admin preview banner. Deliberately loud and non-dismissable: the whole
   failure mode is an admin forgetting they are scoped to a customer and
   reporting the narrow board as a bug. */
#preview-bar {
  position: fixed;
  top: 0; left: 50%;
  transform: translateX(-50%);
  z-index: 60;
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 6px 16px;
  border: 1px solid #c9a227;
  border-top: none;
  border-radius: 0 0 6px 6px;
  background: #3a3117;
  color: #f0d98a;
  font-size: 12.5px;
  letter-spacing: 0.02em;
}
#preview-bar b { color: #fff; font-weight: 600; }
#preview-bar a { color: #f0d98a; text-decoration: underline; }



/* Layout switch (schematic / geographic) beside the HUD title.
   A two-segment control rather than a single chip: showing only the
   alternative read as a label, so it was unclear that it was clickable or
   which layout you were already on. At rest only the selected segment
   shows; hovering slides the other one out to its right. */
#hud-title #hud-layout {
  /* #hud-header is pointer-events:none so drags reach the canvas through
     the overlay; interactive bits opt back in, same as #hud-hosts et al. */
  pointer-events: auto;
  user-select: none;
  display: inline-flex;
  align-items: stretch;
  margin-left: 12px;
  padding: 1px;
  border: 1px solid var(--ink-faint, #444);
  border-radius: 999px;
  vertical-align: middle;
  overflow: hidden;
}
#hud-title #hud-layout .seg {
  display: block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-decoration: none;
  white-space: nowrap;
  color: var(--ink-dim);
  transition: max-width 160ms ease, opacity 140ms ease,
              padding 160ms ease, background-color 140ms ease;
}
/* selected: filled, brighter ink, and never collapses */
#hud-title #hud-layout .seg.on {
  background: var(--ink-faint, #3a3a3a);
  color: var(--ink);
  cursor: default;
}
/* the alternative is hidden at rest and revealed on hover. max-width
   rather than display:none so it slides instead of snapping. */
#hud-title #hud-layout a.seg {
  cursor: pointer;
  max-width: 0;
  padding-left: 0;
  padding-right: 0;
  opacity: 0;
}
#hud-title #hud-layout:hover a.seg,
#hud-title #hud-layout:focus-within a.seg {
  max-width: 140px;
  padding-left: 10px;
  padding-right: 10px;
  opacity: 1;
}
#hud-title #hud-layout a.seg:hover {
  /* Deliberately weaker than the selected fill. Hovering the alternative
     should preview it, not make it look already chosen: --hairline is the
     theme's subtle overlay, against the selected segment's solid
     --ink-faint. Ink brightens partway rather than all the way, so the two
     states stay distinguishable at a glance.
     The plain --ink-dim line is the fallback where color-mix is missing. */
  background: var(--hairline);
  color: var(--ink-dim);
  color: color-mix(in srgb, var(--ink) 60%, var(--ink-dim));
}

/* Account badge, top right above the panels. The board is deliberately
   almost chrome-free, so this is initials at rest and names you on click:
   without it there is no way to tell whether you are signed in, or as
   whom. Absent entirely on an unauthenticated board. */
#hud-account {
  align-self: flex-end;
  position: relative;
  /* #hud-right is pointer-events:none so drags reach the canvas */
  pointer-events: auto;
}
#acct-badge {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid var(--hairline);
  background: var(--panel);
  color: var(--ink-dim);
  font: 600 11px/1 system-ui, sans-serif;
  letter-spacing: 0.04em;
  cursor: pointer;
  backdrop-filter: blur(3px);
}
#acct-badge:hover { color: var(--ink); border-color: var(--ink-faint); }
#acct-menu {
  position: absolute;
  top: 36px;
  right: 0;
  min-width: 210px;
  padding: 10px 12px;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  background: var(--panel);
  backdrop-filter: blur(6px);
  text-align: left;
  z-index: 40;
}
#acct-menu .acct-name {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink);
}
#acct-menu .acct-email,
#acct-menu .acct-role {
  font-size: 11px;
  color: var(--ink-dim);
  margin-top: 2px;
  word-break: break-all;
}
#acct-signout {
  margin-top: 10px;
  width: 100%;
  padding: 5px 8px;
  border: 1px solid var(--hairline);
  border-radius: 5px;
  background: transparent;
  color: var(--ink-dim);
  font: 600 11px system-ui, sans-serif;
  cursor: pointer;
}
#acct-signout:hover { color: var(--ink); border-color: var(--ink-faint); }