/* ============================================================
   THE CONSOLE — the floating system window (js/syswin.js).

   The window has almost no material of its own, on purpose: the
   operator's reference keeps the wing pages' #05070c register, so
   the Console is a steel hairline, a scrim, and the page itself.
   Everything expressive inside the frame belongs to the page.
   ============================================================ */

.syswin {
  position: fixed;
  inset: 0;
  /* over the Mosaic (10000): a system opened from inside a reading
     stands above the sheet, not under it */
  z-index: 10500;
  display: none;
}
.syswin.on { display: block; }

.sw-scrim {
  position: absolute;
  inset: 0;
  background: rgba(4, 6, 10, 0.74);
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
}

/* ---------- the window ----------
   Size and travel are inline (js owns them — persisted geometry);
   here lives only the material: ground, hairline, elevation. */
.sw-win {
  position: absolute;
  top: 50%;
  left: 50%;
  background: #05070c;
  border: 1px solid rgba(151, 166, 196, 0.24);
  border-radius: 6px;
  /* neutral elevation, offset and soft — never a colored halo */
  box-shadow:
    0 30px 80px -20px rgba(0, 0, 0, 0.72),
    0 4px 16px rgba(0, 0, 0, 0.5);
  overflow: hidden;
}

.sw-frame {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: #05070c;
}

/* ---------- the circuit ----------
   The quadrant border drawn per pixel size (js/syswin.js § quadrant) —
   the systems flow's own frame, as the flourish is the lectures'. The
   skin picks its metal: steel over the black pages, gold over the desk. */
.sw-ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
}
.sw-ring path {
  fill: none;
  stroke: rgba(151, 166, 196, 0.5);
  stroke-width: 1.05;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.syswin[data-skin="mesa"] .sw-ring path { stroke: rgba(201, 169, 97, 0.55); }
.syswin[data-skin="mesa"] .sw-win { border-color: rgba(201, 169, 97, 0.4); }

/* ---------- the four corners ----------
   The same law as the Mosaic's: three discs carry the wing's other three
   systems as monograms, the top-right is the index. Dark discs on the
   dark register; the desk skin turns them its gold. */
.sw-c {
  position: absolute;
  z-index: 4;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid rgba(151, 166, 196, 0.4);
  border-radius: 999px;
  background: #0a0e16;
  color: rgba(216, 221, 230, 0.85);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  line-height: 1;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1),
              color 200ms ease, border-color 200ms ease;
}
.sw-c:hover,
.sw-c:focus-visible { transform: scale(1.14); color: #ffd700; border-color: rgba(255, 215, 0, 0.6); }
.sw-c:focus-visible { outline: 2px solid #ffd700; outline-offset: 2px; }
.sw-index-c { font-family: 'Barlow', system-ui, sans-serif; font-size: 13px; }
.syswin[data-skin="mesa"] .sw-c {
  background: #151310;
  border-color: rgba(201, 169, 97, 0.45);
  color: #c9a961;
}
.syswin[data-skin="mesa"] .sw-c:hover,
.syswin[data-skin="mesa"] .sw-c:focus-visible { color: #e8cf9a; border-color: #e8cf9a; }

/* inset to the circuit's bracket pocket (c = 34) */
.sw-c[data-at="tl"] { top: 10px; left: 10px; }
.sw-c[data-at="tr"] { top: 10px; right: 10px; }
.sw-c[data-at="bl"] { bottom: 10px; left: 10px; }
.sw-c[data-at="br"] { bottom: 10px; right: 10px; }

/* ---------- the index ----------
   The wing's four systems, over the frame — the top-right disc's other
   tab. One column, monogram + name, the current one lit. */
.sw-index {
  position: absolute;
  top: 52px;
  right: 12px;
  z-index: 5;
  min-width: 220px;
  padding: 14px 6px 8px;
  background: rgba(5, 7, 12, 0.96);
  border: 1px solid rgba(151, 166, 196, 0.3);
  border-radius: 6px;
  box-shadow: 0 18px 50px -12px rgba(0, 0, 0, 0.7), 0 3px 12px rgba(0, 0, 0, 0.5);
}
.sw-index-t {
  margin: 0 12px 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(216, 221, 230, 0.45);
}
.sw-entry {
  display: flex;
  align-items: baseline;
  gap: 12px;
  width: 100%;
  padding: 9px 12px;
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
  color: rgba(216, 221, 230, 0.85);
  transition: background 160ms ease, color 160ms ease;
}
.sw-entry:hover,
.sw-entry:focus-visible { background: rgba(151, 166, 196, 0.1); }
.sw-entry:focus-visible { outline: 2px solid #ffd700; outline-offset: -2px; }
.sw-entry .g {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  min-width: 26px;
  color: rgba(151, 166, 196, 0.8);
}
.sw-entry .t {
  font-family: 'Barlow', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.sw-entry.here { color: #ffd700; }
.sw-entry.here .g { color: #ffd700; }
.syswin[data-skin="mesa"] .sw-index { background: rgba(11, 10, 8, 0.97); border-color: rgba(201, 169, 97, 0.4); }
.syswin[data-skin="mesa"] .sw-entry.here,
.syswin[data-skin="mesa"] .sw-entry.here .g { color: #c9a961; }

/* raised while dragging or resizing so the iframe cannot eat the stream */
.sw-shield {
  display: none;
  position: absolute;
  inset: 0;
}

/* ---------- the grips ----------
   Invisible 10px rails along each edge — the page stays flush to the
   hairline, and the border itself is what you grab. The south rail
   stops short of the corner so the resize grip keeps its pocket. */
.sw-grip {
  position: absolute;
  touch-action: none;
}
/* the rails stop short of every corner — the discs own the pockets */
.sw-grip[data-edge="n"] { top: -4px; left: 44px; right: 44px; height: 12px; cursor: grab; }
.sw-grip[data-edge="s"] { bottom: -4px; left: 44px; right: 44px; height: 12px; cursor: grab; }
.sw-grip[data-edge="w"] { left: -4px; top: 44px; bottom: 44px; width: 12px; cursor: grab; }
.sw-grip[data-edge="e"] { right: -4px; top: 44px; bottom: 44px; width: 12px; cursor: grab; }
.syswin[data-dragging] .sw-grip { cursor: grabbing; }

/* the corner the operator asked for — drag to expand, both sides at once.
   The very tip, tucked under the BR disc's round shoulder. */
.sw-size {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 6;
  width: 18px;
  height: 18px;
  padding: 3px;
  cursor: nwse-resize;
  touch-action: none;
  color: rgba(216, 221, 230, 0.34);
  transition: color 180ms ease;
}
.sw-size:hover { color: rgba(216, 221, 230, 0.8); }
.sw-size svg { display: block; width: 12px; height: 12px; }
.sw-size path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
}

/* ---------- closing ----------
   Click off it, or Escape. The ✕ exists for the one surface where
   neither works — a phone, where the window is the whole screen —
   and stays hidden everywhere else. */
.sw-x {
  display: none;
  position: absolute;
  top: 4px;
  right: 4px;
  z-index: 3;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 999px;
  background: rgba(5, 7, 12, 0.72);
  color: rgba(216, 221, 230, 0.85);
  font: 400 18px/1 'Barlow', system-ui, sans-serif;
  cursor: pointer;
}

/* ---------- motion — one authored moment ---------- */
@keyframes sw-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes sw-rise {
  from { opacity: 0; margin-top: 14px; }
  to   { opacity: 1; margin-top: 0; }
}
.syswin.on .sw-scrim { animation: sw-fade 0.24s ease both; }
.syswin.on .sw-win   { animation: sw-rise 0.3s cubic-bezier(0.22, 1, 0.36, 1) both; }
.syswin[data-dragging] .sw-win { animation: none; }

@media (prefers-reduced-motion: reduce) {
  .syswin.on .sw-scrim,
  .syswin.on .sw-win { animation: sw-fade 0.01s linear both; }
}

/* ---------- narrow ----------
   The window becomes the screen; the grips would only fight touch
   scrolling, so they retire and the ✕ takes over the exit. JS still
   clamps its persisted geometry, but these !important-free rules win
   over the inline size because the inline style sets width/height,
   not max-*. */
@media (max-width: 720px) {
  .sw-win {
    max-width: calc(100vw - 16px);
    max-height: calc(100dvh - 16px);
  }
  .sw-grip, .sw-size { display: none; }
  .sw-x {
    display: block; z-index: 5;
    top: calc(4px + env(safe-area-inset-top));
    right: calc(4px + env(safe-area-inset-right));
  }
  /* o disco tr (30px, z4) cobria ~85% do ✕ (34px, z3) — o único controle
     de saída visível no toque. O ✕ é dono do canto; o índice desliza. */
  .sw-c[data-at="tr"] { right: 48px; }
  /* hit-area 44px do ✕ */
  .sw-x::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 44px;
    height: 44px;
    transform: translate(-50%, -50%);
    border-radius: 999px;
  }
}

@media print {
  .syswin { display: none; }
}