/* Shared styles for the Nexus page loops.
   Card tokens come from the Nexus app itself (its design tokens):
   surface #0F0F10, inset #141414, border #1F1F22, text #E5E5E5 / #A3A3A3 / #737373,
   accent #EF4444, accent wash #1A0E10 / #3A1A1E, success #22C55E. Amber #F5A524.
   Stage wash uses the site ember (#8E0F1A) from /styles.css.
   Everything is sized in design pixels (1600 x 1000 wide, 720 x 960 narrow) and scaled by loop-engine.js. */
@import url("/fonts/fonts.css");

:root {
  --nx-surface: #0f0f10;
  --nx-inset: #141414;
  --nx-raised: #18181b;
  --nx-border: #1f1f22;
  --nx-border-2: #2a2a2e;
  --nx-text: #e5e5e5;
  --nx-text-2: #a3a3a3;
  --nx-text-3: #737373;
  --nx-red: #ef4444;
  --nx-red-wash: #1a0e10;
  --nx-red-line: #3a1a1e;
  --nx-green: #22c55e;
  --nx-amber: #f5a524;
  --sans: "Inter", "Helvetica Neue", Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #0c0c0e; }
html.light, html.light body { background: #e9e7e2; }
body { font-family: var(--sans); color: var(--nx-text); -webkit-font-smoothing: antialiased; }

.stage {
  position: absolute; left: 0; top: 0; transform-origin: 0 0; overflow: hidden;
  background:
    radial-gradient(ellipse 60% 70% at 88% 4%, rgba(142, 15, 26, 0.30), transparent 62%),
    radial-gradient(ellipse 55% 60% at 4% 100%, rgba(142, 15, 26, 0.16), transparent 60%),
    #0c0c0e;
}
html.light .stage {
  background:
    radial-gradient(ellipse 60% 70% at 88% 4%, rgba(220, 31, 46, 0.10), transparent 62%),
    radial-gradient(ellipse 55% 60% at 4% 100%, rgba(142, 15, 26, 0.07), transparent 60%),
    #e9e7e2;
}
.cam { position: absolute; inset: 0; transform-origin: 50% 50%; }

/* Cards: Nexus surfaces at roughly 2x product scale */
.card {
  position: absolute; background: var(--nx-surface); border: 2px solid var(--nx-border);
  border-radius: 10px; color: var(--nx-text);
  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.02) inset;
}
html.light .card { box-shadow: 0 36px 80px rgba(20, 20, 23, 0.20), 0 6px 18px rgba(20, 20, 23, 0.10); }

.label {
  font-family: var(--mono); font-size: 19px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--nx-text-3); font-weight: 500;
}
.av {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 52px; height: 52px; border-radius: 50%; background: #26262a; color: var(--nx-text);
  font-size: 19px; font-weight: 600; letter-spacing: 0.02em; border: 2px solid #34343a;
}
.av.amber { border-color: var(--nx-amber); }
.av.green { border-color: var(--nx-green); }

.chip {
  display: inline-flex; align-items: center; gap: 12px; height: 54px; padding: 0 20px;
  border-radius: 8px; background: var(--nx-inset); border: 2px solid var(--nx-border-2);
  font-size: 22px; color: var(--nx-text); white-space: nowrap;
}
.chip .ft {
  font-family: var(--mono); font-size: 14px; letter-spacing: 0.08em; padding: 4px 7px; border-radius: 4px;
  background: #222226; color: var(--nx-text-2); font-weight: 500;
}
.chip .ok { width: 22px; height: 22px; flex: none; }

/* status pill */
.pill {
  display: inline-flex; align-items: center; gap: 12px; height: 44px; padding: 0 18px; border-radius: 22px;
  font-family: var(--mono); font-size: 17px; letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap;
}
.pill i { width: 10px; height: 10px; border-radius: 50%; background: currentColor; }
.pill.red { background: var(--nx-red-wash); border: 2px solid var(--nx-red-line); color: var(--nx-red); }
.pill.amber { background: #1c1608; border: 2px solid #4a3a12; color: var(--nx-amber); }
.pill.green { background: #0c1a10; border: 2px solid #17401f; color: var(--nx-green); }

/* step status dot. Each layer is shown or hidden by the loop timeline (tracks), so a row can be
   queued (ring), running (spinner), flagged (amber) or done (green tick) and cross-fade between. */
.st { position: relative; width: 36px; height: 36px; flex: none; }
.st > * { position: absolute; inset: 0; border-radius: 50%; }
.st .q { border: 3px solid #2e2e33; }
.st .spin { border: 3px solid #2a2a2e; border-top-color: var(--nx-text-2); animation: spin 0.9s linear infinite; }
.st .ok { background: var(--nx-green); }
.st .ok::after {
  content: ""; position: absolute; left: 12px; top: 6px; width: 8px; height: 15px;
  border-right: 3px solid #0a0a0a; border-bottom: 3px solid #0a0a0a; transform: rotate(45deg);
}
.st .warn { background: var(--nx-amber); }
.st .warn::after { content: "!"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #0a0a0a; font-weight: 800; font-size: 22px; }
@keyframes spin { to { transform: rotate(360deg); } }

/* buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; height: 64px; padding: 0 30px;
  border-radius: 8px; font-size: 23px; font-weight: 600; white-space: nowrap; transition: transform .18s, box-shadow .3s, background .3s;
}
.btn.primary { background: var(--nx-red); color: #fff7f7; }
.btn.ghost { border: 2px solid var(--nx-border-2); color: var(--nx-text-2); }
.btn.pressed { transform: scale(0.96); box-shadow: 0 0 0 10px rgba(239, 68, 68, 0.22); }
.btn.sent { background: #133a20; color: #b6f2c8; box-shadow: none; transform: none; }

.caret::after {
  content: ""; display: inline-block; width: 3px; height: 1.05em; margin-left: 3px; vertical-align: -0.15em;
  background: var(--nx-red);
}
.mono { font-family: var(--mono); }
.muted { color: var(--nx-text-2); }
.dim { color: var(--nx-text-3); }
.red { color: var(--nx-red); }
.green { color: var(--nx-green); }
.amber { color: var(--nx-amber); }
.hl { color: #fff; background: rgba(239, 68, 68, 0.16); border-radius: 4px; padding: 0 4px; }

/* small green tick used inside chips */
.tk { position: relative; width: 24px; height: 24px; flex: none; border-radius: 50%; background: rgba(34, 197, 94, 0.16); border: 2px solid rgba(34, 197, 94, 0.55); }
.tk::after { content: ""; position: absolute; left: 7px; top: 3px; width: 5px; height: 10px; border-right: 2.5px solid var(--nx-green); border-bottom: 2.5px solid var(--nx-green); transform: rotate(45deg); }
/* file glyph: a folded page in the file-type colour */
.fg { position: relative; width: 22px; height: 28px; flex: none; border-radius: 3px; background: #2a2a2e; }
.fg::after { content: ""; position: absolute; right: 0; top: 0; border-width: 0 8px 8px 0; border-style: solid; border-color: transparent #0f0f10 transparent transparent; }
.fg.pdf { background: #b3363a; } .fg.xls { background: #2f7a4b; } .fg.doc { background: #3563a8; } .fg.mail { background: #5a5a62; }
.hide { opacity: 0 !important; }
.narrow .label { font-size: 20px; }
.narrow .chip .ft { font-size: 16px; }
.pills { position: relative; margin-left: auto; height: 44px; }
.pills .pill { position: absolute; right: 0; top: 0; }

/* Highlight wash laid over a row or chip, faded in and out by the timeline. */
.lit { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; }