/* ============================================================
   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).
   ============================================================ */

/* The same palette as the site, restated rather than imported: these apps are
   served from their own subdomains and never load the portfolio's stylesheet,
   so the values have to live here. They are kept in step by hand, which is the
   cost of the apps staying independently deployable. */
:root {
  --s-bg: #08090a;
  --s-bg-2: #0e1012;
  --s-bg-3: #16191c;
  --s-text: #f2f3f5;
  --s-muted: #a2a8b0;
  --s-faint: #7b828b;
  --s-line: #1d2024;
  --s-accent: #ff9ec6;

  --s-sans: "Inter Tight", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --s-serif: var(--s-sans);
  --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; }
}