/* ============================================================================
   Minjerribah Living Twin: interface design system.

   Every panel uses these tokens and these primitives. If you need a new colour,
   a new radius or a new shadow, add it here rather than in your panel, or the
   interface stops being one instrument and becomes fourteen.

   The look: a civic instrument made of sea glass and sand. Dark, calm, dense
   where it needs to be, quiet everywhere else. The island is the bright thing
   on screen; the interface is the frame around it and never competes.
   ============================================================================ */

:root {
  /* Surfaces: layered glass over the world, not opaque boxes that hide it */
  --s-0: rgba(10, 14, 17, 0.58);   /* scrim over the world */
  --s-1: rgba(16, 21, 25, 0.82);   /* panel */
  --s-2: rgba(24, 31, 36, 0.94);   /* raised: menus, tooltips */
  --s-3: rgba(33, 42, 48, 0.98);   /* modal */
  --s-sunk: rgba(6, 9, 11, 0.5);   /* wells, tracks, inputs */

  --edge: rgba(232, 220, 196, 0.13);
  --edge-strong: rgba(232, 220, 196, 0.26);
  --edge-focus: rgba(63, 182, 196, 0.7);

  /* Type */
  --t-hi: #f2ebdc;
  --t: #ddd4c2;
  --t-dim: #9aa3a8;
  --t-faint: #6d767c;
  --t-on-accent: #08110f;

  /* Island palette. Named for what they are, used for what they mean. */
  --sea: #3fb6c4;          /* primary accent, information, the bay */
  --sea-deep: #1c6c78;
  --sun: #f0b429;          /* warning, money, warmth, attention */
  --sun-deep: #a8760d;
  --coral: #e2725b;        /* danger, loss, refusal */
  --leaf: #8fbf5a;         /* good, growth, approval */
  --leaf-deep: #4e7a2c;
  --sand: #e8dcc4;         /* neutral highlight, the island itself */
  --heath: #b48ac4;        /* culture, story, the drama layer */
  --iron: #8c99a3;         /* infrastructure, the built layer */

  /* Semantic */
  --ok: var(--leaf);
  --warn: var(--sun);
  --bad: var(--coral);
  --info: var(--sea);

  /* Geometry. Small radii: this is an instrument, not a toy. */
  --r-1: 3px;
  --r-2: 6px;
  --r-3: 10px;
  --r-pill: 99px;

  /* Space, on a 4px rhythm */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px;

  /* Type scale */
  --f-ui: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --f-num: 'SF Mono', 'Cascadia Mono', 'Roboto Mono', ui-monospace, monospace;
  --fs-micro: 10px;
  --fs-label: 11px;
  --fs-sm: 12px;
  --fs-base: 13px;
  --fs-lg: 15px;
  --fs-xl: 19px;
  --fs-display: 28px;

  --shadow-1: 0 2px 8px rgba(0,0,0,.35);
  --shadow-2: 0 8px 28px rgba(0,0,0,.5);
  --shadow-3: 0 20px 60px rgba(0,0,0,.62);
  --glow-sea: 0 0 0 1px rgba(63,182,196,.35), 0 0 18px rgba(63,182,196,.18);

  /* Screen furniture. Where the permanent panels live, in one place, so that two panels written
     by two different hands never claim the same rectangle. Anything that docks itself reads these
     rather than guessing. The bar across the top publishes --hud-height from src/ui/panels/hud.js.
       gutter        the margin every docked panel keeps from the edge of the screen
       insp-width    the right hand inspector column
       bottom-chrome the camera modes, the place shortcuts and the place readout above them
       map-right     puts the minimap clear to the left of the inspector column
       board-inset   every full screen board sits this far in, so they all open in the same frame */
  /* The bar across the top re-publishes this from src/ui/panels/hud.js, including its own
     narrow-screen value. Declared here too so that anything docking under the bar still lands
     somewhere sensible if the bar itself never mounts. */
  --hud-height: 74px;
  --gutter: 16px;
  --insp-width: 376px;
  --bottom-chrome: 96px;
  --map-right: calc(var(--gutter) + var(--insp-width) + 12px);
  --map-bottom: calc(var(--bottom-chrome) + 8px);
  --board-inset: 2.6vh 2.2vw;

  --blur: blur(14px) saturate(1.15);
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --fast: .12s;
  --med: .24s;
  --slow: .45s;
}

/* ---- Panel ------------------------------------------------------------- */
.panel {
  background: var(--s-1);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  border: 1px solid var(--edge);
  border-radius: var(--r-3);
  box-shadow: var(--shadow-2);
  color: var(--t);
  font: var(--fs-base)/1.5 var(--f-ui);
  overflow: hidden;
}
.panel-head {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--edge);
  background: linear-gradient(180deg, rgba(255,255,255,.035), transparent);
}
.panel-title {
  flex: 1; font-size: var(--fs-label); letter-spacing: .16em; text-transform: uppercase;
  color: var(--t-dim); font-weight: 600;
}
.panel-body { padding: var(--sp-4); }
.panel-body.dense { padding: var(--sp-2) var(--sp-3); }
.panel.floating { position: absolute; }

/* ---- Buttons ----------------------------------------------------------- */
.btn {
  appearance: none; border: 1px solid var(--edge-strong); background: var(--s-sunk);
  color: var(--t); font: 600 var(--fs-sm)/1 var(--f-ui); letter-spacing: .04em;
  padding: var(--sp-2) var(--sp-3); border-radius: var(--r-2); cursor: pointer;
  display: inline-flex; align-items: center; gap: var(--sp-2);
  transition: background var(--fast) var(--ease), border-color var(--fast), transform var(--fast), color var(--fast);
  white-space: nowrap;
}
.btn:hover { background: rgba(63,182,196,.14); border-color: rgba(63,182,196,.5); color: var(--t-hi); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: none; box-shadow: var(--glow-sea); }
.btn[aria-pressed="true"], .btn.on { background: var(--sea); border-color: var(--sea); color: var(--t-on-accent); }
.btn[disabled] { opacity: .35; cursor: not-allowed; }
.btn.ghost { background: transparent; border-color: transparent; color: var(--t-dim); }
.btn.ghost:hover { color: var(--t-hi); background: rgba(255,255,255,.06); }
.btn.danger:hover { background: rgba(226,114,91,.16); border-color: var(--coral); }
.btn.icon { padding: var(--sp-2); width: 30px; height: 30px; justify-content: center; }
.btn-row { display: flex; gap: var(--sp-2); flex-wrap: wrap; }

/* ---- Readouts: numbers are the point, so they get real typography ------- */
.readout { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.readout .k { font-size: var(--fs-micro); letter-spacing: .14em; text-transform: uppercase; color: var(--t-faint); }
.readout .v { font: 400 var(--fs-lg)/1.1 var(--f-num); color: var(--t-hi); font-variant-numeric: tabular-nums; }
.readout .v small { font-size: .62em; color: var(--t-dim); margin-left: 2px; }
.readout.big .v { font-size: var(--fs-display); font-weight: 300; }
.readout.good .v { color: var(--leaf); } .readout.warn .v { color: var(--sun); } .readout.bad .v { color: var(--coral); }

/* ---- Meters ------------------------------------------------------------ */
.meter { height: 4px; background: var(--s-sunk); border-radius: var(--r-pill); overflow: hidden; position: relative; }
.meter > i { display: block; height: 100%; background: var(--sea); border-radius: var(--r-pill); transition: width var(--med) var(--ease); }
.meter.good > i { background: var(--leaf); } .meter.warn > i { background: var(--sun); } .meter.bad > i { background: var(--coral); }
.meter .target { position: absolute; top: -2px; bottom: -2px; width: 1px; background: var(--t-dim); }
.meter.thick { height: 8px; }

/* ---- Tabs -------------------------------------------------------------- */
.tabs { display: flex; gap: 0; border-bottom: 1px solid var(--edge); }
.tabs button {
  appearance: none; background: none; border: none; border-bottom: 2px solid transparent;
  color: var(--t-faint); font: 600 var(--fs-sm)/1 var(--f-ui); letter-spacing: .08em;
  padding: var(--sp-3) var(--sp-3); cursor: pointer; transition: color var(--fast), border-color var(--fast);
}
.tabs button:hover { color: var(--t); }
.tabs button.on { color: var(--sea); border-bottom-color: var(--sea); }

/* ---- Lists and rows ---------------------------------------------------- */
.rows { display: flex; flex-direction: column; }
.row {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3); border-radius: var(--r-2);
  transition: background var(--fast); cursor: default;
}
.row.pick { cursor: pointer; }
.row.pick:hover { background: rgba(255,255,255,.055); }
.row.on { background: rgba(63,182,196,.14); box-shadow: inset 2px 0 0 var(--sea); }
.row .lead { flex: 1; min-width: 0; }
.row .name { color: var(--t-hi); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row .sub { font-size: var(--fs-sm); color: var(--t-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row .num { font: var(--fs-sm)/1 var(--f-num); color: var(--t); font-variant-numeric: tabular-nums; }

/* ---- Chips and tags ---------------------------------------------------- */
.chip {
  display: inline-flex; align-items: center; gap: 4px;
  font: 600 var(--fs-micro)/1 var(--f-ui); letter-spacing: .1em; text-transform: uppercase;
  padding: 3px 7px; border-radius: var(--r-pill); border: 1px solid currentColor; opacity: .95;
}
.chip.sea { color: var(--sea); } .chip.sun { color: var(--sun); } .chip.coral { color: var(--coral); }
.chip.leaf { color: var(--leaf); } .chip.heath { color: var(--heath); } .chip.iron { color: var(--iron); }
.chip.solid { border-color: transparent; background: currentColor; }
.chip.solid span { color: var(--t-on-accent); }

/* ---- Tooltip ----------------------------------------------------------- */
.tip {
  position: fixed; z-index: 60; pointer-events: none; max-width: 320px;
  background: var(--s-2); backdrop-filter: var(--blur); border: 1px solid var(--edge-strong);
  border-radius: var(--r-2); box-shadow: var(--shadow-2); padding: var(--sp-2) var(--sp-3);
  font-size: var(--fs-sm); line-height: 1.5; color: var(--t);
  opacity: 0; transform: translateY(4px); transition: opacity var(--fast), transform var(--fast);
}
.tip.show { opacity: 1; transform: none; }
.tip h5 { font-size: var(--fs-base); color: var(--t-hi); margin-bottom: 2px; }
.tip .why { color: var(--t-faint); font-size: var(--fs-micro); margin-top: var(--sp-2);
  padding-top: var(--sp-2); border-top: 1px solid var(--edge); }

/* ---- Scrollbars: thin, so dense panels stay calm ----------------------- */
.scroll { overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--edge-strong) transparent; }
.scroll::-webkit-scrollbar { width: 8px; height: 8px; }
.scroll::-webkit-scrollbar-track { background: transparent; }
.scroll::-webkit-scrollbar-thumb { background: var(--edge-strong); border-radius: var(--r-pill); border: 2px solid transparent; background-clip: content-box; }

/* ---- Motion: the interface moves like water, not like a spring toy ----- */
@keyframes slide-up { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes pulse-ring { 0% { box-shadow: 0 0 0 0 rgba(63,182,196,.5); } 70% { box-shadow: 0 0 0 12px rgba(63,182,196,0); } 100% { box-shadow: 0 0 0 0 rgba(63,182,196,0); } }
.enter { animation: slide-up var(--med) var(--ease-out) both; }
.enter-fade { animation: fade-in var(--med) var(--ease) both; }
.attention { animation: pulse-ring 2s var(--ease) infinite; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ---- Layout anchors: where panels live. Keep the middle of the screen clear. */
.anchor-tl { position: absolute; top: var(--sp-4); left: var(--sp-4); }
.anchor-tr { position: absolute; top: var(--sp-4); right: var(--sp-4); }
.anchor-bl { position: absolute; bottom: var(--sp-4); left: var(--sp-4); }
.anchor-br { position: absolute; bottom: var(--sp-4); right: var(--sp-4); }
.anchor-tc { position: absolute; top: var(--sp-4); left: 50%; transform: translateX(-50%); }
.anchor-bc { position: absolute; bottom: var(--sp-4); left: 50%; transform: translateX(-50%); }

/* ---- The launcher rail -------------------------------------------------
   The column of buttons that opens the full boards. Six panels each contain a rail() helper that
   builds it if it does not exist yet, and each of them used to carry its own copy of this CSS: six
   copies of one rule, guarded by a shared style id so that whichever panel loaded first silently
   decided the layout for the other five. It lives here now, once.

   Top left rather than vertically centred. Centred, it sat straight across the middle of the left
   edge, which is where the info view legend and the island log both open, and the legend covered
   the whole rail whenever a data layer was on. Top left it is a control cluster under the bar, and
   the bottom left belongs to the log. */
#twin-rail {
  position: absolute; left: var(--sp-3); top: calc(var(--hud-height) + var(--sp-3));
  display: flex; flex-direction: column; gap: var(--sp-2); z-index: 20;
}
.rail-btn {
  position: relative; width: 116px; justify-content: flex-start; letter-spacing: .1em;
  font-size: var(--fs-micro); text-transform: uppercase; padding: var(--sp-3) var(--sp-3);
}
.rail-btn .dot {
  position: absolute; top: -5px; right: -5px; min-width: 17px; height: 17px; padding: 0 4px;
  border-radius: var(--r-pill); background: var(--sun); color: var(--t-on-accent);
  font: 700 10px/17px var(--f-num); text-align: center;
}
.rail-btn .dot:empty { display: none; }
@media (max-width: 860px) { #twin-rail { left: var(--sp-2); gap: 4px; } .rail-btn { width: 96px; } }

/* Small screens: panels dock instead of floating. */
@media (max-width: 860px) {
  .panel.floating { position: fixed; left: var(--sp-2); right: var(--sp-2); width: auto !important; }
  .anchor-tl, .anchor-tr { top: var(--sp-2); }
  .anchor-bl, .anchor-br { bottom: var(--sp-2); }
}

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }