/* ============================================================
   Shared shell for the standalone project apps.
   ============================================================
   Several of these were built fast and look it. This gives them
   the portfolio's typography and restraint without touching a
   line of their logic: it only restyles the chrome around the
   canvas, and every app keeps its own IDs and classes.

   Injected at build time into apps listed in POLISH (build.mjs).
   ============================================================ */

:root {
  --s-bg: #0d0d0f;
  --s-bg-2: #141417;
  --s-bg-3: #1b1b20;
  --s-text: #eceae5;
  --s-muted: #9d9a94;
  --s-faint: #6b6965;
  --s-line: #26262c;
  --s-accent: #89a9ff;

  --s-sans: "Instrument Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --s-serif: "Newsreader", Georgia, serif;
  --s-mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
}

html, body {
  background: var(--s-bg) !important;
  color: var(--s-text) !important;
  font-family: var(--s-sans) !important;
  margin: 0;
  min-height: 100%;
}

body {
  padding: clamp(1.25rem, 4vw, 3rem) !important;
  max-width: 1180px;
  margin-inline: auto !important;
  line-height: 1.6;
}

/* ---- type ---- */

h1 {
  font-family: var(--s-serif) !important;
  font-weight: 400 !important;
  font-size: clamp(1.9rem, 4.2vw, 3rem) !important;
  line-height: 1.1 !important;
  letter-spacing: -.022em !important;
  margin: 0 0 .6rem !important;
  color: var(--s-text) !important;
}
h2, h3 {
  font-family: var(--s-sans) !important;
  font-weight: 600 !important;
  letter-spacing: -.01em;
  color: var(--s-text) !important;
}
p { color: var(--s-muted) !important; }
a { color: var(--s-accent); }

/* The eyebrow line most of these apps put above the title. */
.tagline, .subtitle, .kicker, header p:first-of-type {
  font-family: var(--s-mono) !important;
  font-size: .7rem !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
  color: var(--s-faint) !important;
}

/* ---- surfaces ---- */

canvas {
  background: var(--s-bg-2) !important;
  border: 1px solid var(--s-line) !important;
  border-radius: 6px;
  max-width: 100%;
  display: block;
}

section, .panel, .card, .sidebar, .controls, .stats, aside, fieldset {
  background: var(--s-bg-2) !important;
  border: 1px solid var(--s-line) !important;
  border-radius: 6px !important;
  box-shadow: none !important;
}

/* ---- controls ---- */

button, .btn {
  font-family: var(--s-sans) !important;
  font-size: .85rem !important;
  font-weight: 500 !important;
  color: var(--s-text) !important;
  background: transparent !important;
  border: 1px solid var(--s-line) !important;
  border-radius: 5px !important;
  padding: .5rem 1rem !important;
  cursor: pointer;
  transition: border-color .18s, background .18s, color .18s;
  box-shadow: none !important;
  text-shadow: none !important;
}
button:hover, .btn:hover {
  border-color: var(--s-accent) !important;
  color: var(--s-accent) !important;
}
button:disabled { opacity: .4; cursor: not-allowed; }

button.primary, button[data-primary], .btn--primary {
  background: var(--s-text) !important;
  color: var(--s-bg) !important;
  border-color: var(--s-text) !important;
}
button.primary:hover, .btn--primary:hover {
  background: var(--s-accent) !important;
  border-color: var(--s-accent) !important;
  color: #0d0d0f !important;
}

input, select, textarea {
  font-family: var(--s-sans) !important;
  font-size: .9rem !important;
  background: var(--s-bg-3) !important;
  color: var(--s-text) !important;
  border: 1px solid var(--s-line) !important;
  border-radius: 5px !important;
  padding: .45rem .6rem !important;
}
input[type="range"] { padding: 0 !important; accent-color: var(--s-accent); background: none !important; border: 0 !important; }
label { color: var(--s-muted) !important; font-size: .85rem; }

:focus-visible { outline: 2px solid var(--s-accent) !important; outline-offset: 2px; }

/* ---- readouts ---- */

.score, .value, .readout, output, .metric, [data-score], [data-value] {
  font-family: var(--s-mono) !important;
  font-variant-numeric: tabular-nums;
  color: var(--s-text) !important;
}

table { border-collapse: collapse; width: 100%; font-size: .875rem; }
th, td { text-align: left; padding: .5rem .6rem; border-bottom: 1px solid var(--s-line); }
th { font-family: var(--s-mono); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--s-faint); font-weight: 400; }

hr { border: 0; border-top: 1px solid var(--s-line); }


/* ---- list rows ---- */

/* Apps name their result rows all sorts of things. Catch the common ones
   rather than leaving a light card sitting on a dark page. */
li.track, li.item, li.result, li.row, li.entry,
.track, .result-item, .list-item, .queue-item {
  background: var(--s-bg-3) !important;
  border: 1px solid var(--s-line) !important;
  border-radius: 5px !important;
  color: var(--s-text) !important;
  box-shadow: none !important;
}
ul, ol { list-style: none; padding-left: 0; }
li { color: var(--s-text); }

/* Anything still painting a light background inside a dark page. */
[style*="background: #fff"], [style*="background:#fff"],
[style*="background-color: #fff"], [style*="background-color:#fff"] {
  background: var(--s-bg-3) !important;
}

/* ---- a way back to the portfolio ---- */

.shell-back {
  position: fixed; left: 1rem; bottom: 1rem; z-index: 50;
  display: inline-flex; align-items: center; gap: .45rem;
  font-family: var(--s-mono); font-size: .66rem;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--s-faint); text-decoration: none;
  background: color-mix(in srgb, var(--s-bg) 90%, transparent);
  border: 1px solid var(--s-line); border-radius: 100px;
  padding: .45rem .85rem;
  backdrop-filter: blur(8px);
  transition: color .18s, border-color .18s;
}
.shell-back:hover { color: var(--s-text); border-color: var(--s-faint); }

@media (max-width: 640px) {
  .shell-back { left: .6rem; bottom: .6rem; font-size: .6rem; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}