/* The Ember Workbench, threshold edition.
 *
 * This page is a threshold surface — met once, never worked in — so the card is
 * an ember panel on a light page, and the one Ephesis word is allowed. The
 * tokens are copied rather than imported: the installer ships as its own
 * workspace precisely so nothing the panel depends on can reach the route that
 * handles a credential, and a stylesheet is a dependency like any other.
 *
 * Fonts are served from this origin. Not a preference — `default-src 'none'`
 * with no third-party origin means a font from a CDN simply would not load.
 */

@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fonts/dm-sans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
    U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fonts/dm-sans-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308,
    U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
    U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Ephesis";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/ephesis-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
    U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --paper: #fefefe;
  --surface: #f2f2f2;
  --hairline: #dfdfdf;
  --hairline-strong: #c9c9c9;
  --ink: #1e1e1e;
  --muted: #585959;
  --faint: #8a8a8a;
  --on-panel: #fefefe;
  --on-panel-muted: rgb(255 255 255 / 78%);
  --panel-border: rgb(255 255 255 / 30%);
  --panel-divider: rgb(255 255 255 / 16%);
  --primary: #f0460e;
  --primary-deep: #c53608;
  --primary-wash: rgb(240 70 14 / 8%);
  --lime: #8fe39b;
  --amber: #fbd786;
  --danger: #ff6a50;

  --font-sans: "DM Sans", "Helvetica Neue", Arial, sans-serif;
  --font-script: "Ephesis", "Snell Roundhand", cursive;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;

  --fs-display: clamp(2rem, 4.4vw, 3.25rem);
  --fs-title: 1.0625rem;
  --fs-body: 0.875rem;
  --fs-small: 0.8125rem;
  --fs-label: 0.6875rem;

  --r-glyph: 2px;
  --r-field: 0.5rem;
  --r-panel: clamp(1rem, 2vw, 1.75rem);
  --r-pill: 999px;

  --frame: clamp(0.625rem, 1.2vw, 1rem);
  --card-pad: clamp(1.25rem, 3vw, 2.25rem);
  --stack: 1.25rem;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --t-state: 150ms;
  --t-arrow: 250ms;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.5;
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
}

/* ── chrome: one line, as the spec asks ─────────────────────────────────── */

.bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem var(--frame) 0;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--fs-title);
  font-weight: 600;
  letter-spacing: -0.03em;
}

/* The 2px rotated square: the family glyph, unchanged from the portfolio. */
.wordmark__glyph {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: var(--r-glyph);
  background: var(--primary);
  transform: rotate(45deg);
}

.bar__lang,
.foot a {
  color: var(--muted);
  font-size: var(--fs-small);
  text-decoration: none;
  border-bottom: 1px solid var(--hairline-strong);
}

.bar__lang:hover,
.foot a:hover {
  color: var(--ink);
  border-color: var(--primary);
}

.frame {
  flex: 1;
  display: grid;
  place-items: start center;
  padding: var(--frame);
}

.foot {
  display: flex;
  gap: 1rem;
  align-items: center;
  padding: 0 calc(var(--frame) + 0.5rem) 1.25rem;
  color: var(--faint);
  font-size: var(--fs-small);
}

/* ── the card: the product speaking ─────────────────────────────────────── */

.card {
  width: min(38rem, 100%);
}

.ember {
  position: relative;
  isolation: isolate;
  border-radius: var(--r-panel);
  background:
    radial-gradient(120% 80% at 12% 0%, rgb(251 215 134 / 22%) 0%, transparent 55%),
    radial-gradient(90% 70% at 88% 10%, rgb(240 70 14 / 26%) 0%, transparent 60%),
    linear-gradient(160deg, #171210 0%, #100c0a 55%, #0b0908 100%);
  color: var(--on-panel);
  overflow: hidden;
}

/* Scanlines: the texture signature, 1px of translucent white. */
.ember::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: repeating-linear-gradient(
    to bottom,
    rgb(255 255 255 / 3%) 0 1px,
    transparent 1px 3px
  );
  z-index: -1;
}

.card__inner {
  padding: var(--card-pad);
  display: grid;
  gap: var(--stack);
}

.card__title {
  margin: 0;
  font-size: var(--fs-display);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -0.04em;
}

/* One script word, on a surface met exactly once. */
.script {
  font-family: var(--font-script);
  font-size: 1.12em;
  font-weight: 400;
  line-height: 0.6;
  letter-spacing: 0;
}

.card__lede {
  margin: 0;
  max-width: 46ch;
  color: var(--on-panel-muted);
  font-size: 1rem;
  line-height: 1.6;
}

.notices {
  margin: 0;
  padding: 0.875rem 0 0;
  list-style: none;
  display: grid;
  gap: 0.5rem;
  border-top: 1px solid var(--panel-divider);
  color: var(--on-panel-muted);
  font-size: var(--fs-small);
}

.notices li {
  padding-left: 1rem;
  position: relative;
}

.notices li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5rem;
  width: 0.375rem;
  height: 0.375rem;
  border-radius: var(--r-glyph);
  background: var(--primary);
  transform: rotate(45deg);
}

.notices a {
  color: var(--on-panel);
}

/* ── states ─────────────────────────────────────────────────────────────── */

.state {
  display: grid;
  gap: 1rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--panel-divider);
}

.state[hidden] {
  display: none;
}

.state__heading {
  margin: 0;
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--on-panel-muted);
}

.state__heading--split {
  margin-top: 0.75rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--panel-divider);
}

.state__subheading {
  margin: 0.5rem 0 0;
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--on-panel-muted);
}

.state__lede,
.state__note {
  margin: 0;
  color: var(--on-panel-muted);
  font-size: var(--fs-small);
}

/* ── fields ─────────────────────────────────────────────────────────────── */

.field {
  display: grid;
  gap: 0.375rem;
}

.field__label {
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--on-panel-muted);
}

.field__input {
  width: 100%;
  font: inherit;
  color: var(--on-panel);
  background: rgb(255 255 255 / 6%);
  border: 1px solid var(--panel-border);
  border-radius: var(--r-field);
  padding: 0.5rem 0.75rem;
  transition: border-color var(--t-state) var(--ease), box-shadow var(--t-state) var(--ease);
}

.field__input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgb(240 70 14 / 25%);
}

.field__input::placeholder {
  color: rgb(255 255 255 / 45%);
}

.field__hint {
  margin: 0;
  color: var(--on-panel-muted);
  font-size: var(--fs-small);
}

.error {
  margin: 0;
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--danger);
  border-radius: var(--r-field);
  color: var(--danger);
  font-size: var(--fs-small);
}

.error[hidden] {
  display: none;
}

/* ── guides ─────────────────────────────────────────────────────────────── */

.guide {
  border: 1px solid var(--panel-divider);
  border-radius: var(--r-field);
  padding: 0.5rem 0.75rem;
}

.guide__summary {
  cursor: pointer;
  color: var(--on-panel-muted);
  font-size: var(--fs-small);
}

.guide__steps {
  margin: 0.625rem 0 0.25rem;
  padding-left: 1.125rem;
  display: grid;
  gap: 0.375rem;
  color: var(--on-panel-muted);
  font-size: var(--fs-small);
}

/* ── buttons: one action colour, one arrow ──────────────────────────────── */

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
}

.button {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  font: inherit;
  font-weight: 600;
  color: #ffffff;
  background: var(--primary);
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  padding: 0.5625rem 1.125rem;
  text-decoration: none;
  cursor: pointer;
}

.button:hover {
  background: var(--primary-deep);
}

.button:disabled {
  opacity: 0.6;
  cursor: progress;
}

.button--quiet {
  background: transparent;
  color: var(--on-panel);
  border-color: var(--panel-border);
}

.button--quiet:hover {
  background: rgb(255 255 255 / 12%);
}

.button__arrow {
  transition: transform var(--t-arrow) var(--ease);
}

.button:hover .button__arrow {
  transform: translate(0.1875rem, -0.1875rem);
}

/* ── facts, records, phases, events ─────────────────────────────────────── */

.facts {
  margin: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.375rem 1rem;
  font-size: var(--fs-small);
}

.facts dt {
  color: var(--on-panel-muted);
}

.facts dd {
  margin: 0;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.records,
.events {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.25rem;
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  color: var(--on-panel-muted);
  overflow-x: auto;
}

.records li,
.events li {
  padding: 0.375rem 0.5rem;
  border-left: 2px solid var(--panel-divider);
  white-space: nowrap;
}

.phases {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.625rem;
}

.phase {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  color: rgb(255 255 255 / 45%);
  transition: color var(--t-state) var(--ease);
}

.phase__dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: var(--r-glyph);
  background: rgb(255 255 255 / 30%);
  transform: rotate(45deg);
  flex: none;
}

.phase[data-status="running"] {
  color: var(--on-panel);
}

.phase[data-status="running"] .phase__dot {
  background: var(--primary);
}

.phase[data-status="done"] {
  color: var(--on-panel-muted);
}

.phase[data-status="done"] .phase__dot {
  background: var(--lime);
}

.phase[data-status="failed"] {
  color: var(--danger);
}

.phase[data-status="failed"] .phase__dot {
  background: var(--danger);
}

/* ── motion: opt-in, and only where there is nothing to read yet ─────────── */

@media (prefers-reduced-motion: no-preference) {
  [data-motion="enhanced"] .reveal {
    animation: reveal 0.6s var(--ease) both;
  }

  [data-motion="enhanced"] .phase[data-status="running"] .phase__dot {
    animation: pulse 1.4s ease-in-out infinite;
  }
}

.reveal-1 { animation-delay: 0.08s; }
.reveal-2 { animation-delay: 0.16s; }
.reveal-3 { animation-delay: 0.24s; }
.reveal-4 { animation-delay: 0.32s; }

@keyframes reveal {
  from { opacity: 0; transform: translateY(0.875rem); }
  to { opacity: 1; transform: none; }
}

@keyframes pulse {
  50% { opacity: 0.35; }
}

@media (max-width: 30rem) {
  .facts {
    grid-template-columns: 1fr;
    gap: 0.125rem;
  }

  .facts dd {
    margin-bottom: 0.5rem;
  }
}