/* ==========================================================================
   Everyway Panel — faithful HTML replica of the real app UI.
   Used by the showcase for the hero and the "see it work" demo.

   Every colour and label here is taken from the real app:
     palette  SidePanel/themes/jarvis.json
     LED      side_panel.py  LED = {on:#36e07a, pause:#ffc23d, off:#ff5b5b, off_dim:#6a2f2f}
     states   side_panel.py  {"on":"RUNNING","paused":"PAUSED"} else "STOPPED"
   Keep them in step if the app changes.
   ========================================================================== */

:root {
  --led-on:      #36e07a;
  --led-pause:   #ffc23d;
  --led-off:     #ff5b5b;
  --led-off-dim: #6a2f2f;
}

/* ---------- the screen the panel sits on ------------------------------- */

.stage {
  position: relative;
  aspect-ratio: 16 / 10.4;
  border-radius: 12px;
  overflow: hidden;
  background: #070a0f;
  border: 1px solid var(--border-soft);
  box-shadow: 0 26px 64px rgba(0, 0, 0, .55);
  container-type: inline-size;
  user-select: none;
}

/* the document you were already working in */
.doc-win { position: absolute; inset: 0; padding: 3.2%; }
.doc-win .win {
  height: 100%; border-radius: 8px; background: #0c111a;
  border: 1px solid #161d28; padding: 3% 3.4%; overflow: hidden;
}
.doc-win .tb { display: flex; gap: 5px; margin-bottom: 4%; }
.doc-win .tb i { width: 7px; height: 7px; border-radius: 50%; background: #1d2635; display: block; }
.doc-win .ln { height: 6px; border-radius: 4px; background: #141b26; margin: 3.4% 0; }
.doc-win .ln.s { width: 54%; }
.doc-win .ln.m { width: 76%; }

/* the line the demo types into */
.doc-win .slot {
  height: 6px; border-radius: 4px; width: 30%;
  background: #141b26; display: flex; align-items: center;
  font: 600 clamp(7px, 1.55cqw, 12px)/1 var(--mono);
  color: var(--accent); white-space: nowrap; overflow: hidden;
}
.doc-win .slot.filled {
  background: rgba(255, 182, 72, .12);
  width: 52%; height: auto; padding: 2px 6px;
  transition: background .3s ease, width .3s ease;
}
.doc-win .caret {
  display: inline-block; width: 1px; height: 1em; background: var(--accent);
  margin-left: 2px; animation: caret 1s step-end infinite;
}
@keyframes caret { 50% { opacity: 0; } }

/* ---------- the edge handle ------------------------------------------- */

.eg-handle {
  position: absolute; right: 0; top: 44%;
  width: 5px; height: 12%;
  border-radius: 4px 0 0 4px;
  background: var(--accent);
  opacity: .5;
  transition: opacity .3s ease, box-shadow .3s ease, width .3s ease;
}
.eg-handle.hot { opacity: 1; width: 7px; box-shadow: 0 0 16px 2px rgba(255, 182, 72, .6); }

/* ---------- the panel -------------------------------------------------- */

.ep {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: 46%;
  background: var(--panel);
  border-left: 1px solid var(--border-soft);
  padding: 2.6% 2.4%;
  display: flex; flex-direction: column;
  transform: translateX(101%);
  transition: transform .5s cubic-bezier(.22, 1, .32, 1);
  font-size: clamp(7px, 1.5cqw, 13px);
}
.ep.open { transform: translateX(0); }

/* header */
.ep-head { display: flex; align-items: flex-start; gap: 6px; padding-bottom: .8em; }
.ep-head .ttl {
  font-weight: 700; color: var(--accent);
  letter-spacing: .13em; font-size: 1.05em; line-height: 1.1;
}
.ep-head .sub { color: var(--muted); font-size: .72em; letter-spacing: .1em; margin-top: 2px; }
.ep-head .ico { margin-left: auto; display: flex; gap: 7px; align-items: center; padding-top: 2px; }
.ep-head .ico svg { width: 1.05em; height: 1.05em; stroke: var(--muted); fill: none; stroke-width: 1.8; }
.ep-head .ico .pw { stroke: var(--muted); }

/* the tile grid */
.ep-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .42em; align-content: start; flex: 1; }

.ep-tile {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  padding: .6em .65em;
  position: relative;
  overflow: hidden;
  grid-column: span 2;
}
.ep-tile.w4 { grid-column: span 4; }
.ep-tile.w1 { grid-column: span 1; }

/* — text label tile — */
.ep-label {
  text-align: center; color: var(--accent);
  letter-spacing: .22em; font-weight: 700; font-size: .95em;
  padding: .4em 0;
}

/* — action tile — */
.ep-act { display: flex; align-items: center; gap: .5em; min-height: 2.1em; }
.ep-act svg { width: 1.35em; height: 1.35em; stroke: var(--accent); fill: none; stroke-width: 1.8; flex: none; }
.ep-act .lb { color: var(--text); font-size: .92em; font-weight: 550; }
.ep-act.mini { justify-content: center; }

/* — toggle tile: a LEFT LED STRIP, not a switch — */
.ep-tog { padding-left: .85em; }
.ep-tog .led {
  position: absolute; left: 0; top: 12%; bottom: 12%;
  width: 3px; border-radius: 0 2px 2px 0;
  background: var(--led-off-dim);
  transition: background .25s ease, box-shadow .25s ease;
}
.ep-tog.on  .led { background: var(--led-on);    box-shadow: 0 0 10px var(--led-on); }
.ep-tog.pau .led { background: var(--led-pause); box-shadow: 0 0 10px var(--led-pause); }
.ep-tog .row { display: flex; align-items: center; gap: .5em; }
.ep-tog svg { width: 1.3em; height: 1.3em; stroke: var(--text); fill: none; stroke-width: 1.8; flex: none; }
.ep-tog .lb { color: var(--text); font-weight: 650; font-size: .95em; }
.ep-tog .st { color: var(--muted); font-size: .72em; letter-spacing: .09em; margin-top: 3px; padding-left: 0; }
.ep-tog.on  .st { color: var(--led-on); }
.ep-tog.pau .st { color: var(--led-pause); }

/* — live info tile — */
.ep-live { }
.ep-live .lh { display: flex; align-items: center; gap: 5px; margin-bottom: .5em; }
.ep-live .lh svg { width: 1em; height: 1em; stroke: var(--accent-2); fill: none; stroke-width: 1.8; }
.ep-live .lh .t { color: var(--text); font-size: .8em; }
.ep-live .lh .badge {
  margin-left: auto; font-size: .62em; letter-spacing: .1em; color: var(--accent-2);
  border: 1px solid rgba(70, 224, 255, .4); border-radius: 3px; padding: 1px 4px;
}
.ep-live .big { color: var(--accent); font-weight: 700; font-size: 2.1em; line-height: 1; letter-spacing: -.02em; }
.ep-live .unit { color: var(--muted); font-size: .72em; margin-top: 3px; letter-spacing: .06em; }
.ep-live .stat { margin-top: .6em; font-family: var(--mono); font-size: .64em; color: var(--muted); }
.ep-live .stat .r { display: flex; justify-content: space-between; margin-bottom: 3px; }
.ep-live .bar { height: 3px; border-radius: 2px; background: #232c3a; overflow: hidden; }
.ep-live .bar i { display: block; height: 100%; background: var(--accent); border-radius: 2px; transition: width .6s ease; }

/* — clock tile — */
.ep-clock .big { font-family: var(--mono); font-size: 1.5em; letter-spacing: .02em; }

/* — calculator (mini-app) — */
.ep-calc .disp {
  background: #0d1117; border: 1px solid var(--border-soft); border-radius: 4px;
  padding: .35em .5em; text-align: right; font-family: var(--mono);
  color: var(--text); font-size: .85em; margin-bottom: .5em;
}
.ep-calc .keys { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; }
.ep-calc .keys b {
  background: var(--surface-hi); border-radius: 3px; text-align: center;
  padding: .45em 0; font-size: .68em; font-weight: 500; color: var(--text);
}
.ep-calc .keys b.op { color: var(--accent-2); }
.ep-calc .keys b.eq { background: var(--accent); color: var(--on-accent); font-weight: 700; }

/* — spacer (as it looks in Edit Layout) — */
.ep-spacer {
  border: 1.5px dashed #2b3646; background: transparent;
  display: grid; place-items: center; color: #3c485a; font-size: .68em; letter-spacing: .1em;
}

/* footer buttons */
.ep-foot { display: flex; gap: .5em; padding-top: .7em; }
.ep-foot span {
  flex: 1; text-align: center; border: 1px solid var(--border-soft); border-radius: 6px;
  padding: .45em 0; font-size: .74em; color: var(--muted);
}

/* ---------- the demo cursor ------------------------------------------- */

.cursor {
  position: absolute; left: 0; top: 0; width: 15px; height: 21px;
  pointer-events: none; z-index: 20;
  transition: transform .85s cubic-bezier(.4, .1, .2, 1);
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .7));
}
.cursor svg { width: 100%; height: 100%; display: block; }
.cursor .ring {
  position: absolute; left: -8px; top: -8px; width: 30px; height: 30px;
  border: 2px solid var(--accent); border-radius: 50%;
  opacity: 0; transform: scale(.4);
}
.cursor.click .ring { animation: clickRing .5s ease-out; }
@keyframes clickRing {
  0%   { opacity: .9; transform: scale(.4); }
  100% { opacity: 0;  transform: scale(1.5); }
}

/* the tile being clicked flashes, like the real _fire_action_ui */
.ep-tile.flash { animation: tileFlash .45s ease-out; }
@keyframes tileFlash {
  0%   { background: rgba(255, 182, 72, .34); border-color: var(--accent); }
  100% { background: var(--surface); border-color: var(--border-soft); }
}