/* ============================================================
   Emulator widget styles (scoped to .emu-*). Shared by index.html
   and matter.html via <link>. Extracted from index.html's inline
   <style> so multiple plot instances on one page share one stylesheet.
   NOTE: layout hooks are class-based (.emu-sliders) rather than id-based
   so more than one instance can coexist on a page.
   ============================================================ */
.emu-widget{
  display:flex; gap:18px; align-items:flex-start;
  margin:24px 0 40px;
}
.emu-plot-wrap{
  position:relative; flex:1 1 460px; max-width:660px;
}
/* portrait 3:4 aspect, like the python figures */
.emu-plot-wrap canvas{ width:100%; height:auto; display:block; }
.emu-status{
  position:absolute; top:6px; right:10px; font:11px/1.2 serif;
  color:#9aa3b2;
}
.emu-status.err{ color:#c0392b; }

.emu-sliders{
  flex:0 0 300px; display:flex; flex-direction:column; gap:11px;
  padding-top:2px;
}
.emu-slider{ display:flex; flex-direction:column; align-items:stretch; }
.emu-slider input[type="range"]{
  width:100%; height:0.38em; margin:3px 0;
  border-radius:0.25em; outline:none;
  -webkit-appearance:none; appearance:none; cursor:pointer;
  /* fill-to-value gradient; updated in JS (matches .slider-container) */
  background:linear-gradient(to right,#7B4397 0%,#7B4397 50%,#e0e0e0 50%,#e0e0e0 100%);
}
.emu-slider input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none; width:1.1em; height:1.1em;
  background:#7B4397; border-radius:50%; cursor:pointer;
}
.emu-slider input[type="range"]::-moz-range-thumb{
  width:1.1em; height:1.1em; background:#7B4397; border-radius:50%;
  cursor:pointer; border:0;
}
.emu-slider-value{
  font-family:'sans-serif',Arial; font-weight:bold; font-size:1.05rem;
  color:#2C3E50; display:flex; align-items:center; justify-content:flex-start;
}
.emu-slider-value .emu-num{ color:#7B4397; margin-left:0.4em; }

.emu-reset{
  font-family:'sans-serif',Arial; font-size:0.8rem; font-weight:bold; line-height:1.2;
  color:#7B4397; background:transparent; border:1.5px solid #7B4397;
  border-radius:0.4em; padding:7px 10px; cursor:pointer; white-space:nowrap;
}
.emu-reset:hover{ background:#7B4397; color:#fff; }

.emu-btn-row{ display:flex; gap:8px; align-items:center; flex-wrap:nowrap; margin-top:4px; }
.emu-save{ position:relative; display:inline-flex; }
.emu-save-main, .emu-save-caret{
  font-family:'sans-serif',Arial; font-size:0.8rem; font-weight:bold; line-height:1.2;
  color:#fff; background:#7B4397; border:1.5px solid #7B4397; cursor:pointer;
  white-space:nowrap;
}
.emu-save-main{ border-radius:0.4em 0 0 0.4em; padding:7px 10px; }
.emu-save-caret{ border-radius:0 0.4em 0.4em 0; padding:7px 8px; border-left:1.5px solid #eebfe0; }
.emu-save-main:hover, .emu-save-caret:hover{ background:#6a3a83; }
.emu-save-menu{
  display:none; position:absolute; top:calc(100% + 4px); right:0; z-index:5;
  background:#fff; border:1px solid #d7d2e0; border-radius:0.4em;
  box-shadow:0 4px 14px rgba(0,0,0,0.12); overflow:hidden; min-width:180px;
}
.emu-save-menu.open{ display:block; }
.emu-save-menu button{
  display:block; width:100%; text-align:left; background:#fff; border:0;
  font-family:'sans-serif',Arial; font-size:0.85rem; color:#2C3E50;
  padding:9px 14px; cursor:pointer;
}
.emu-save-menu button:hover{ background:#f3eef8; color:#7B4397; }

/* real-LaTeX axis-title overlays positioned over the canvas */
.emu-axis-overlay{ position:absolute; inset:0; pointer-events:none; }
.emu-ylabel{
  position:absolute; left:0; display:flex; align-items:center; justify-content:center;
  font-size:0.95rem; color:#000;
}
.emu-ylabel > span{ transform:rotate(-90deg); white-space:nowrap; }
.emu-xlabel{
  position:absolute; bottom:0; text-align:center; font-size:1.05rem; color:#000;
}

/* derived-parameter readout */
.emu-derived{
  border-top:1px solid #d7d2e0; padding-top:6px; margin-top:0;
  font-family:'sans-serif',Arial;
}
.emu-derived h4{
  margin:0 0 6px; font-size:0.8rem; font-weight:bold; letter-spacing:.04em;
  text-transform:uppercase; color:#6b7280;
}
.emu-derived-grid{
  display:grid; grid-template-columns:1fr 1fr; column-gap:16px; row-gap:4px;
}
.emu-derived-grid .cell{
  display:flex; justify-content:flex-start; align-items:baseline; gap:5px;
  font-size:0.95rem; color:#2C3E50;
}
.emu-derived-grid .cell .eq{ color:#6b7280; }
.emu-derived-grid .cell b{ color:#7B4397; font-weight:bold; }

/* dataset legend + checkboxes, overlaid on the TT panel */
.emu-legend{
  position:absolute; z-index:3; pointer-events:auto;
  display:flex; flex-direction:column; gap:2px;
  font-family:serif; font-size:0.9rem; color:#000;
  padding:2px 4px;
}
.emu-legend .emu-leg-row{
  display:flex; align-items:center; gap:5px; cursor:pointer; user-select:none; margin:0;
}
.emu-legend input[type="checkbox"]{ width:13px; height:13px; margin:0; cursor:pointer; }
.emu-legend .emu-leg-dot{ width:9px; height:9px; border-radius:50%; display:inline-block; }
.emu-legend .emu-leg-line{ width:16px; height:2px; display:inline-block; margin:0 0 0 2px; }
.emu-legend .emu-leg-box{ width:16px; height:10px; display:inline-block; margin:0 0 0 2px; }  /* shaded envelope */
/* display.legendCompact: a tighter legend for long entry lists */
.emu-legend.emu-legend--compact{ gap:1px; padding:1px 3px; font-size:0.85rem; line-height:1.2; }
.emu-legend .emu-leg-limit{ width:16px; height:12px; display:inline-block; margin:0 0 0 2px; line-height:0; }  /* upper-limit bar + arrow */

/* zoom-column layout (display.zoom; neutrinos.html Graph 2 only): a wider plot for the
   main + zoom columns and a slimmer sidebar (slider, buttons, derived values; no pie).
   800 + 18 + 220 = 1038px fits the 1110px page container. */
.emu-widget--zoom .emu-plot-wrap{ flex:1 1 560px; max-width:800px; }
.emu-widget--zoom .emu-sliders{ flex:0 0 220px; }

/* energy-density pie */
.emu-pie{
  border-top:1px solid #d7d2e0; padding-top:12px; margin-top:2px;
  font-family:'sans-serif',Arial;
}
.emu-pie h4{
  margin:0 0 6px; font-size:0.8rem; font-weight:bold; letter-spacing:.04em;
  text-transform:uppercase; color:#6b7280;
}
.emu-pie .emu-pie-svg{ display:flex; justify-content:center; margin-bottom:-6px; }
.emu-pie svg text{ font-family:serif; fill:#1a1a1a; }
/* container for one or two stacked pies (energy density, plus matter density on
   the matter page). Stacks vertically in the sidebar; goes side-by-side when narrow. */
.emu-pies{ display:flex; flex-direction:column; }

/* mobile toggle row (only shown on touch devices <=980px; kept below the pie) */
.emu-mobile-toggles{ display:none; }

/* ==== NARROW VIEWPORT (any device) ====
   Single source of truth: below 980px viewport, sidebar drops below
   and sliders reformat to 3x2. 980px = plot max-width (660) + gap (18)
   + sidebar (300) — the width below which side-by-side gets cramped. */
@media (max-width:980px){
  .emu-widget{ flex-direction:column; }
  /* In column flex, flex-basis becomes the main-axis (height). Reset it
     so the plot-wrap sizes to the canvas, not a stale 460px height. */
  .emu-plot-wrap{ flex-basis:auto; width:100%; }
  .emu-sliders{ flex-basis:auto; width:100%; }

  /* sliders in 3 rows x 2 columns to reclaim vertical space */
  .emu-sliders{
    display:grid; grid-template-columns:repeat(2, 1fr); gap:10px 14px;
  }
  /* items that should span the full row inside the grid */
  .emu-sliders .emu-btn-row,
  .emu-sliders .emu-pies,
  .emu-sliders .emu-derived,
  .emu-sliders .emu-mobile-toggles{ grid-column:1 / -1; }
  /* below the graph, sit the two pies side by side instead of stacked */
  .emu-sliders .emu-pies{ flex-direction:row; gap:16px; align-items:flex-start; justify-content:center; }
  .emu-sliders .emu-pies .emu-pie{ flex:1 1 0; min-width:0; }
}

/* ==== ACTUAL MOBILE ONLY (touch + no-hover, narrow) ====
   On real phones/tablets the tiny checkboxes inside the on-plot legend
   are hard to hit and make the legend too tall — swap them for a proper
   "Data shown" row below the pie. A narrow *desktop* window keeps the
   desktop legend since a mouse cursor can hit small checkboxes fine. */
@media (max-width:980px) and (hover:none) and (pointer:coarse){
  /* keep the widget contained within the viewport even if a sibling
     element (e.g. an equation table) makes the parent wider */
  .emu-widget{ max-width:100vw; overflow-x:hidden; }
  .emu-plot-wrap{ max-width:100%; }

  .emu-legend input[type="checkbox"]{ display:none; }
  .emu-legend.emu-legend--compact{ font-size:0.7rem; }
  .emu-legend{ font-size:0.8rem; }
  .emu-mobile-toggles{
    display:block;
    border-top:1px solid #d7d2e0; padding-top:10px; margin-top:2px;
    font-family:'sans-serif',Arial;
  }
  .emu-mobile-toggles h4{
    margin:0 0 6px; font-size:0.8rem; font-weight:bold; letter-spacing:.04em;
    text-transform:uppercase; color:#6b7280;
  }
  .emu-mobile-toggles label{
    display:inline-flex; align-items:center; gap:5px; margin-right:12px;
    font-size:0.9rem; color:#2C3E50; cursor:pointer; user-select:none;
  }
  .emu-mobile-toggles input[type="checkbox"]{ width:14px; height:14px; cursor:pointer; }
  .emu-mobile-toggles .emu-swatch{ width:10px; height:10px; border-radius:50%; display:inline-block; }
  .emu-mobile-toggles .emu-swatch-line{ width:14px; height:2px; display:inline-block; }
}