/* ============================================================================
   BLUEPRINT — shared visual identity for the oliverfilso.com simulators
   ----------------------------------------------------------------------------
   Single source of truth for the look of every model under /Simulations/.
   Tokens and components are lifted directly from the site home page
   (index.html) so the simulators read as part of the same document set:

     · navy "blueprint paper" ground with a 32px engineering grid
     · hairline cyan-blue rules, amber section accents and corner brackets
     · IBM Plex Mono for data, JetBrains Mono for headings, Inter for prose

   Loaded by every simulation shell as ../blueprint.css. Each model then keeps
   only the rules specific to its own layout, and maps its local semantic
   variables (--panel, --line, --accent, …) onto the tokens declared here.

   NOTE ON DISPLAY AREAS: the interactive canvases deliberately do NOT inherit
   the dark chrome. Readability wins over theme purity, so each model paints
   its own display ground (pale paper, daylight sky, lit navy) using the
   --display-* tokens at the bottom of this block.
   ========================================================================== */

:root{
  /* ── ground & structure ── */
  --blueprint:      #16314f;
  --blueprint-deep: #102640;
  --panel:          #1e4266;
  /* Panels are more opaque than the home page's: these models are far denser
     with small text, and the 32px ground grid must not read through a label. */
  --panel-fill:     rgba(16, 38, 64, 0.88);
  --panel-head:     rgba(30, 66, 102, 0.92);
  --line:           rgba(154, 197, 235, 0.18);
  --line-strong:    rgba(154, 197, 235, 0.55);

  /* ── type colours ── */
  --ink:            #eef5fc;
  --ink-muted:      #b8d4e9;
  --ink-dim:        #7ea6c4;

  /* ── accents ── */
  --amber:          #c9a94e;
  --amber-hover:    #ddc06c;
  --amber-dim:      rgba(201, 169, 78, 0.55);
  --cyan:           #5fd0f0;
  --cyan-dim:       #2c7f9d;
  --blue:           #7fb6ff;
  --ember:          #e0864a;
  --green:          #4ade80;
  --red:            #ff6b6b;

  /* ── type families ── */
  --disp:  'JetBrains Mono', 'IBM Plex Mono', ui-monospace, monospace;
  --mono:  'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --sans:  'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* ── display grounds (interactive canvases — kept light for legibility) ── */
  --display-paper:  #dce9f5;   /* pale blueprint paper: schematics, diagrams   */
  --display-lit:    #24507d;   /* lifted navy: bright colour-mapped fields     */
  --display-sky:    #9dc4e4;   /* daylight sky: plant elevations               */
  --display-deep:   #1b3f66;   /* deeper navy: 3-D fields needing dark contrast*/
  --display-grid:   rgba(21, 61, 99, 0.16);
  --display-ink:    #16314f;
}

/* ── blueprint ground ─────────────────────────────────────────────────────
   32px engineering grid over navy, with a soft light source at top-left.
   Fixed attachment so the grid stays put while panels scroll over it.      */
.bp-ground{
  background-color: var(--blueprint);
  background-image:
    repeating-linear-gradient(0deg,  var(--line) 0px, var(--line) 1px, transparent 1px, transparent 32px),
    repeating-linear-gradient(90deg, var(--line) 0px, var(--line) 1px, transparent 1px, transparent 32px),
    radial-gradient(ellipse at top left, rgba(154,197,235,0.10), transparent 55%);
  background-attachment: fixed;
  color: var(--ink);
}

/* crisp blueprint corners — no soft radii anywhere in the chrome */
.bp-ground .rounded-lg,
.bp-ground .rounded-md,
.bp-ground .rounded,
.bp-ground .rounded-sm{ border-radius:0 !important; }
.bp-ground .rounded-full{ border-radius:2px !important; }

/* ── scrollbars ─────────────────────────────────────────────────────────── */
.bp-ground ::-webkit-scrollbar{ width:9px; height:9px; }
.bp-ground ::-webkit-scrollbar-track{ background:rgba(154,197,235,0.06); }
.bp-ground ::-webkit-scrollbar-thumb{ background:var(--line-strong); }
.bp-ground ::-webkit-scrollbar-thumb:hover{ background:var(--amber); }
.bp-ground *{ scrollbar-width:thin; scrollbar-color:var(--line-strong) rgba(154,197,235,0.06); }

/* ── panel frame: hairline border + amber corner brackets ───────────────── */
.bp{
  position:relative;
  background: var(--panel-fill);
  border: 1px solid var(--line-strong);
  box-shadow: 0 10px 30px rgba(0,0,0,0.28);
  backdrop-filter: blur(1px);
}
.bp::after{
  content:""; position:absolute; inset:4px; pointer-events:none; z-index:6;
  background:
    linear-gradient(var(--amber-dim),var(--amber-dim)) left  top/10px 1px no-repeat,
    linear-gradient(var(--amber-dim),var(--amber-dim)) left  top/1px 10px no-repeat,
    linear-gradient(var(--amber-dim),var(--amber-dim)) right top/10px 1px no-repeat,
    linear-gradient(var(--amber-dim),var(--amber-dim)) right top/1px 10px no-repeat,
    linear-gradient(var(--amber-dim),var(--amber-dim)) left  bottom/10px 1px no-repeat,
    linear-gradient(var(--amber-dim),var(--amber-dim)) left  bottom/1px 10px no-repeat,
    linear-gradient(var(--amber-dim),var(--amber-dim)) right bottom/10px 1px no-repeat,
    linear-gradient(var(--amber-dim),var(--amber-dim)) right bottom/1px 10px no-repeat;
}

/* section caption, styled like the site's metabar strip */
.bp-head{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--amber);
  background: var(--panel-head);
  border-bottom:1px solid var(--line-strong);
  padding:6px 10px;
}

/* ── metabar: the thin status strip at the top of every model ───────────── */
.metabar{
  display:flex; flex-wrap:wrap; align-items:center; gap:.35rem 1.1rem;
  font-family:var(--mono); font-size:.6rem; letter-spacing:.11em;
  text-transform:uppercase; color:var(--amber);
  padding:.45rem .9rem; border-bottom:1px solid var(--line);
}
.led{
  display:inline-block; width:6px; height:6px; border-radius:50%;
  background:var(--green); box-shadow:0 0 6px 2px rgba(74,222,128,.75);
  margin-right:.4rem; vertical-align:middle; animation:led-pulse 2.4s ease-in-out infinite;
}
@keyframes led-pulse{ 0%,100%{opacity:1} 50%{opacity:.35} }

/* ── universal back button ──────────────────────────────────────────────
   Sized in px, not rem, so the box metrics are identical on every model
   regardless of that page's root font-size.                              */
.backlink{
  display:inline-flex; align-items:center; gap:8px;
  padding:6.7px 13.6px; font-family:var(--mono); font-size:10.5px; line-height:1;
  letter-spacing:.13em; text-transform:uppercase; text-decoration:none;
  color:var(--amber); border:1px solid var(--amber-dim); border-radius:2px;
  background:rgba(201,169,78,.07); white-space:nowrap; flex-shrink:0;
  transition:background-color .15s ease, border-color .15s ease, color .15s ease;
}
.backlink::before{
  content:""; width:7px; height:7px; border-radius:50%;
  background:currentColor; box-shadow:0 0 6px currentColor; flex-shrink:0;
}
.backlink:hover{ background:var(--amber); color:var(--blueprint-deep); border-color:var(--amber); }

/* ── controls ───────────────────────────────────────────────────────────── */
.ctlbtn{
  font-family:var(--mono); font-size:.66rem; letter-spacing:.1em; text-transform:uppercase;
  padding:.42rem .8rem; border:1px solid var(--line-strong); border-radius:2px;
  background:var(--panel-fill); color:var(--ink); cursor:pointer; white-space:nowrap;
  transition:border-color .15s ease, color .15s ease;
}
.ctlbtn:hover{ border-color:var(--amber); color:var(--amber); }
.ctlbtn.on{ border-color:var(--cyan); color:var(--cyan); }

.pill{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.28rem .6rem; border:1px solid var(--line); border-radius:2px;
  background:rgba(16,38,64,.5); font-size:.66rem; letter-spacing:.06em;
  color:var(--ink-muted); white-space:nowrap;
}

/* ── sliders: square cyan diamond on a hairline track ───────────────────── */
.bp-ground input[type=range]{
  -webkit-appearance:none; appearance:none; width:100%; height:16px;
  background:transparent; cursor:pointer;
}
.bp-ground input[type=range]::-webkit-slider-runnable-track{
  height:4px; border-radius:0;
  background:linear-gradient(90deg,var(--cyan) var(--fill,0%),rgba(154,197,235,.16) var(--fill,0%));
}
.bp-ground input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; width:12px; height:12px; margin-top:-4px; border-radius:0;
  background:var(--blueprint-deep); border:1px solid var(--cyan);
  box-shadow:0 0 7px rgba(95,208,240,.6); transform:rotate(45deg);
}
.bp-ground input[type=range]::-moz-range-track{ height:4px; background:rgba(154,197,235,.16); }
.bp-ground input[type=range]::-moz-range-progress{ height:4px; background:var(--cyan); }
.bp-ground input[type=range]::-moz-range-thumb{
  width:11px; height:11px; border-radius:0;
  background:var(--blueprint-deep); border:1px solid var(--cyan);
}
/* accent variants for secondary / hot / amber channels */
.bp-ground input[type=range].a2::-webkit-slider-runnable-track{ background:linear-gradient(90deg,var(--blue) var(--fill,0%),rgba(154,197,235,.16) var(--fill,0%)); }
.bp-ground input[type=range].a2::-webkit-slider-thumb{ border-color:var(--blue); box-shadow:0 0 7px rgba(127,182,255,.55); }
.bp-ground input[type=range].a2::-moz-range-progress{ background:var(--blue); }
.bp-ground input[type=range].a2::-moz-range-thumb{ border-color:var(--blue); }
.bp-ground input[type=range].a3::-webkit-slider-runnable-track{ background:linear-gradient(90deg,var(--ember) var(--fill,0%),rgba(154,197,235,.16) var(--fill,0%)); }
.bp-ground input[type=range].a3::-webkit-slider-thumb{ border-color:var(--ember); box-shadow:0 0 7px rgba(224,134,74,.55); }
.bp-ground input[type=range].a3::-moz-range-progress{ background:var(--ember); }
.bp-ground input[type=range].a3::-moz-range-thumb{ border-color:var(--ember); }
.bp-ground input[type=range].a4::-webkit-slider-runnable-track{ background:linear-gradient(90deg,var(--amber) var(--fill,0%),rgba(154,197,235,.16) var(--fill,0%)); }
.bp-ground input[type=range].a4::-webkit-slider-thumb{ border-color:var(--amber); box-shadow:0 0 7px rgba(201,169,78,.55); }
.bp-ground input[type=range].a4::-moz-range-progress{ background:var(--amber); }
.bp-ground input[type=range].a4::-moz-range-thumb{ border-color:var(--amber); }

/* ── typography helpers ─────────────────────────────────────────────────── */
.bp-ground h1, .bp-ground h2, .bp-ground h3{ font-family:var(--disp); margin:0; }
.tnum{ font-variant-numeric:tabular-nums; }

@media (max-width:900px){ .hide-mobile{ display:none !important; } }