/* Only what a window can assume and a page cannot.
   style.css and dsprack.css are the application's, copied unchanged; nothing
   here restyles them, it adapts them to a browser tab and adds the two
   things a web converter needs that a desktop one does not: a plate where
   the GPU switch goes, saying which route this conversion will take, and a
   download button, because the file has to come back over a network. */

html { background: #000; }

/* `hidden` has to win. A class that sets `display` outranks the attribute's
   own rule, which is how the download button showed before anything had been
   converted. */
[hidden] { display: none !important; }

body {
  /* The application sizes its window so the panel always fits. A page has no
     such luxury — it has to scroll, and it has to be selectable. */
  overflow-y: auto;
  user-select: text;
}

.slide-panel {
  /* The panel is a column in a fixed-width window; centred here, and allowed
     to grow past the viewport. */
  height: auto;
  max-width: 560px;
  margin: 0 auto;
  padding-top: 8px;
  padding-bottom: 48px;
  overflow-y: visible;
}

/* The panel already keeps 8 px from the top here; the application's own
   8 px on the version line would double it. */
.app-version { padding-top: 0; }

/* ── the route plate, where the GPU switch lives in the application ──────
   Two states, and the page moves between them as the tap slider moves: grey
   while the whole conversion is on the CPU, and the application's own blue
   once the filter is long enough for the convolution to be worth handing to
   a card. Same colour, same glow, same geometry as the switch in the window
   — it is the same statement, just one the page makes instead of asking. */

.path-block {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 8px;
  border: 1px solid rgba(148, 163, 184, 0.35);
  background:
    linear-gradient(90deg, rgba(15,23,42,0.8) 0%, rgba(30,41,59,0.5) 50%, rgba(15,23,42,0.8) 100%),
    repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(148,163,184,0.04) 10px, rgba(148,163,184,0.04) 20px);
  box-shadow: inset 0 0 15px rgba(148, 163, 184, 0.06);
  position: relative;
  overflow: hidden;
  transition: border-color 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}
.path-strip {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: #94a3b8;
  box-shadow: 0 0 8px rgba(148, 163, 184, 0.6);
  transition: background 0.3s ease, box-shadow 0.3s ease;
}
.path-text {
  text-transform: uppercase;
  color: #cbd5e1;
  font-weight: 700;
  letter-spacing: 1px;
  flex: 1;
  transition: color 0.3s ease, text-shadow 0.3s ease;
}
.path-badge {
  font-size: 0.7em;
  color: #cbd5e1;
  border: 1px solid rgba(148, 163, 184, 0.3);
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(148, 163, 184, 0.08);
  font-weight: bold;
  letter-spacing: 0.5px;
  transition: color 0.3s ease, border-color 0.3s ease, background 0.3s ease;
}
.path-note {
  margin-top: 6px;
  padding: 6px 10px;
  font-size: 0.72em;
  line-height: 1.45;
  color: rgba(148, 163, 184, 0.85);
  border-left: 2px solid rgba(148, 163, 184, 0.35);
  background: rgba(30, 41, 59, 0.25);
  transition: color 0.3s ease, border-color 0.3s ease, background 0.3s ease;
}

/* Lit: the convolution goes to the card. */
.path-block.on {
  border-color: rgba(56, 189, 248, 0.4);
  background:
    linear-gradient(90deg, rgba(15,23,42,0.8) 0%, rgba(30,58,138,0.4) 50%, rgba(15,23,42,0.8) 100%),
    repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(56,189,248,0.05) 10px, rgba(56,189,248,0.05) 20px);
  box-shadow: inset 0 0 15px rgba(56, 189, 248, 0.1);
}
.path-block.on .path-strip {
  background: #38bdf8;
  box-shadow: 0 0 8px #38bdf8;
}
.path-block.on .path-text {
  color: #38bdf8;
  text-shadow: 0 0 6px rgba(56, 189, 248, 0.6);
}
.path-block.on .path-badge {
  color: #7dd3fc;
  border-color: rgba(56, 189, 248, 0.3);
  background: rgba(56, 189, 248, 0.1);
}
.path-note.on {
  color: rgba(125, 211, 252, 0.85);
  border-left-color: rgba(56, 189, 248, 0.45);
  background: rgba(30, 58, 138, 0.18);
}
@media (prefers-reduced-motion: reduce) {
  .path-block, .path-strip, .path-text, .path-badge, .path-note { transition: none; }
}

/* ── download ─────────────────────────────────────────────────────────── */

.conv-download {
  display: block;
  margin-top: 14px;
  padding: 15px;
  text-align: center;
  text-decoration: none;
  border-radius: 8px;
  border: 1px solid #34d399;
  background: linear-gradient(135deg, rgba(16,185,129,0.22) 0%, rgba(5,150,105,0.30) 100%);
  color: #d1fae5;
  /* It pulses until it is taken: a thirty-million-tap run is long enough for
     attention to wander, and this is the one thing on the page that should
     catch an eye coming back to it. */
  animation: dl-pulse 1.7s ease-in-out infinite;
}
.conv-download:hover { filter: brightness(1.15); animation: none; }
.conv-download .dl-main {
  display: block;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
}
.conv-download .dl-name {
  display: block;
  margin-top: 6px;
  font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace;
  font-size: 0.68em;
  color: rgba(209, 250, 229, 0.75);
  word-break: break-all;
}
@keyframes dl-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.30); border-color: rgba(52, 211, 153, 0.5); }
  50%      { box-shadow: 0 0 20px 3px rgba(52, 211, 153, 0.28); border-color: #34d399; }
}
@media (prefers-reduced-motion: reduce) { .conv-download { animation: none; } }

/* ── a failure, in the application's own error colours ────────────────── */

.web-error {
  margin-top: 12px;
  padding: 10px 12px;
  border: 1px solid rgba(239, 68, 68, 0.4);
  background: rgba(127, 29, 29, 0.2);
  border-radius: 6px;
  color: #fca5a5;
  font-size: 0.8em;
  line-height: 1.45;
}

/* ── footer ───────────────────────────────────────────────────────────── */

.web-foot {
  margin-top: 26px;
  padding-top: 14px;
  border-top: 1px solid rgba(56, 189, 248, 0.10);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: space-between;
  font-size: 0.72em;
  color: rgba(148, 163, 184, 0.7);
}
.web-foot a { color: #38bdf8; text-decoration: none; }
.web-foot a:hover { text-decoration: underline; }

/* The queued file, shown in the drop zone as the application shows its
   queue — one row, because this side takes one track at a time. */
.web-file {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid rgba(56, 189, 248, 0.18);
  background: rgba(15, 23, 42, 0.75);
  border-radius: 6px;
  font-size: 0.78em;
}
.web-file .name { color: #bae6fd; word-break: break-all; }
.web-file .size { color: rgba(148, 163, 184, 0.75); white-space: nowrap; }

@media (max-width: 620px) {
  .slide-panel { padding-left: 16px; padding-right: 16px; }
}

/* ── queue rows, extended for the web ─────────────────────────────────── */

/* The application's rows are inert: its drop zone has to receive the events
   that land on them. Here a finished row carries its own download link, so
   that row — and only that row — takes pointer events back. */
.file-item { pointer-events: auto; }
.file-item.pending { border-color: rgba(148, 163, 184, 0.22); color: #94a3b8; }

.fi-sub { padding-left: 22px; }
.web-row-note {
  font-size: 0.92em;
  color: rgba(148, 163, 184, 0.8);
  word-break: break-all;
}
.web-row-note.err { color: #fca5a5; }

/* The control sits in a wrapper of its own so a redraw can leave it alone:
   only the wrapper is ever replaced, and only when the row wants a different
   kind of control than it already has. The auto margin lives here now — it
   used to be on the button, which no longer touches the row's flex row. */
.fi-control {
  margin-left: auto;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.web-dl-one {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  border: 1px solid rgba(52, 211, 153, 0.45);
  background: rgba(16, 185, 129, 0.14);
  color: #6ee7b7;
  text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
/* The arrow fills the box rather than sitting in it: a glyph carries its own
   side bearings and its own baseline, which is why the character version
   looked both small and pushed to the left however the box was aligned. */
.web-dl-one svg {
  width: 15px;
  height: 15px;
  display: block;
}
.web-dl-one:hover {
  background: rgba(16, 185, 129, 0.3);
  border-color: rgba(52, 211, 153, 0.8);
  transform: scale(1.06);
}
@media (prefers-reduced-motion: reduce) {
  .web-dl-one { transition: none; }
  .web-dl-one:hover { transform: none; }
}

/* The drop zone grows with the queue instead of scrolling inside a fixed
   height: a page can be scrolled, and a batch of eight should be readable
   without a scrollbar inside a scrollbar. */
.smart-drop-zone { height: auto; min-height: 185px; }
.dz-file-list { max-height: none; }

/* ── the XTC measuring panel ──────────────────────────────────────────── */

/* The application measures in a separate window; a tab has none, so the same
   document is shown over the page. Deliberately roomy: four measurements, a
   plan of the triangle and the angle they imply were tried in a small modal
   once, and every label wrapped one word to a line. */
.xtc-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(2, 6, 18, 0.72);
  backdrop-filter: blur(4px);
}
.xtc-panel {
  position: relative;
  width: min(1040px, 100%);
  height: min(760px, 100%);
  border-radius: 12px;
  border: 1px solid rgba(45, 212, 191, 0.35);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55), 0 0 40px rgba(45, 212, 191, 0.10);
  overflow: hidden;
  background: #0B192C;
}
.xtc-panel iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.xtc-close {
  position: absolute;
  top: 10px;
  right: 12px;
  z-index: 2;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: 1px solid rgba(148, 163, 184, 0.35);
  background: rgba(15, 23, 42, 0.85);
  color: #cbd5e1;
  cursor: pointer;
  font-size: 0.9em;
  line-height: 1;
}
.xtc-close:hover { border-color: rgba(45, 212, 191, 0.6); color: #5eead4; }

@media (max-width: 720px) {
  .xtc-overlay { padding: 0; }
  .xtc-panel { width: 100%; height: 100%; border-radius: 0; }
}