/* =============================================================
   THE SOMNIAL WORKSHOP — Component styles
   Import AFTER colors_and_type.css.
   Flat, bordered, terminal-flavored. No rounded pills.
   ============================================================= */

/* ---- STATUS BADGE — terminal output, not a pill ---------- */
.sw-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: var(--t-micro);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 3px 8px 3px 7px;
  border: 1px solid currentColor;
  border-radius: var(--radius-1);
  line-height: 1;
  white-space: nowrap;
}
.sw-badge::before {
  content: "";
  width: 6px; height: 6px;
  background: currentColor;
  border-radius: 50%;
  flex: none;
}
.sw-badge--built    { color: var(--built);    background: var(--built-dim); }
.sw-badge--failed   { color: var(--failed);   background: var(--failed-dim); }
.sw-badge--withheld { color: var(--withheld); background: var(--withheld-dim); }
.sw-badge--withheld::before { border-radius: 50%; background: transparent; box-shadow: inset 0 0 0 1px currentColor; }
.sw-badge--running  { color: var(--blue);    background: var(--blue-dim); }
.sw-badge--running::before { animation: sw-pulse 1.4s ease-in-out infinite; }
@keyframes sw-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.25; } }
@media (prefers-reduced-motion: reduce){ .sw-badge--running::before{ animation:none; } }

/* Bracketed text variant — pure terminal: [ BUILT ] */
.sw-stat {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--t-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.sw-stat--built::before    { content: "● "; }
.sw-stat--failed::before   { content: "● "; }
.sw-stat--withheld::before { content: "○ "; }
.sw-stat--built    { color: var(--built); }
.sw-stat--failed   { color: var(--failed); }
.sw-stat--withheld { color: var(--withheld); }

/* ---- BUTTONS --------------------------------------------- */
.sw-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--t-micro);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  padding: 11px 18px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-1);
  background: var(--ink-750);
  color: var(--bone);
  cursor: pointer;
  white-space: nowrap;
  /* Keycap depth: 1px top highlight + solid bottom edge + soft cast shadow. */
  box-shadow:
    inset 0 1px 0 rgba(231,233,236,0.07),
    0 2px 0 0 #050506,
    0 4px 9px -4px rgba(0,0,0,0.7);
  transition: border-color 0.12s linear, background 0.12s linear, color 0.12s linear,
              transform 0.05s ease-out, box-shadow 0.05s ease-out;
  text-decoration: none;
}
.sw-btn:hover {
  border-color: var(--bone);
  background: var(--ink-700);
  box-shadow:
    inset 0 1px 0 rgba(231,233,236,0.10),
    0 3px 0 0 #050506,
    0 7px 14px -5px rgba(0,0,0,0.75);
  transform: translateY(-1px);
}
/* Press the key down: collapse the bottom edge, sink the cast. */
.sw-btn:active {
  transform: translateY(2px);
  box-shadow:
    inset 0 1px 2px rgba(0,0,0,0.45),
    0 0 0 0 #050506,
    0 1px 3px -1px rgba(0,0,0,0.6);
}
.sw-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.sw-btn--primary {
  background: var(--blue);
  border-color: var(--blue);
  color: #06182F;
  font-weight: 600;
  /* Lit keycap: bright bevel on top, deep blue rim beneath. */
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.45),
    inset 0 -1px 0 rgba(6,24,47,0.35),
    0 2px 0 0 #2C6AB0,
    0 5px 12px -4px rgba(43,116,200,0.5);
}
.sw-btn--primary:hover {
  background: var(--blue-bright);
  border-color: var(--blue-bright);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.55),
    inset 0 -1px 0 rgba(6,24,47,0.3),
    0 3px 0 0 #2C6AB0,
    0 8px 18px -5px rgba(91,163,245,0.55);
}
.sw-btn--primary:active {
  box-shadow:
    inset 0 2px 4px rgba(6,24,47,0.5),
    0 0 0 0 #2C6AB0,
    0 1px 4px -1px rgba(0,0,0,0.5);
}

.sw-btn--ghost { border-color: transparent; color: var(--ash); background: transparent; box-shadow: none; }
.sw-btn--ghost:hover { color: var(--bone); background: var(--ink-750); transform: none;
  box-shadow: inset 0 1px 0 rgba(231,233,236,0.06), 0 2px 6px -3px rgba(0,0,0,0.6); }
.sw-btn--ghost:active { transform: translateY(1px); box-shadow: inset 0 1px 2px rgba(0,0,0,0.4); }

/* ---- LAUNCH CTA — "run this specimen". Layers on .sw-btn--primary:
   a diagonal light sweep glints across on hover/focus, and the arrow
   nudges forward. Same keycap physics as .sw-btn, just dressed up. ---- */
.sw-btn--launch {
  position: relative;
  overflow: hidden;
}
.sw-btn--launch::before {
  content: "";
  position: absolute;
  inset: 0;
  left: -60%;
  width: 40%;
  background: linear-gradient(115deg, transparent, rgba(255,255,255,0.55), transparent);
  transform: skewX(-18deg);
  transition: left 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}
.sw-btn--launch:hover::before,
.sw-btn--launch:focus-visible::before { left: 130%; }
.sw-btn--launch > * { position: relative; }
.sw-btn__arrow {
  display: inline-block;
  transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}
.sw-btn--launch:hover .sw-btn__arrow,
.sw-btn--launch:focus-visible .sw-btn__arrow { transform: translateX(5px); }

.sw-btn--lg { padding: 16px 30px; font-size: 13.5px; letter-spacing: 0.14em; }
.sw-btn--sm { padding: 7px 13px; font-size: 10.5px; }

/* ---- CARD / SPECIMEN ------------------------------------- */
.sw-card {
  background: var(--ink-800);
  border: 1px solid var(--line);
  border-radius: var(--radius-0);
  transition: border-color 0.12s linear, background 0.12s linear;
}
.sw-card--link { cursor: pointer; }
.sw-card--link:hover { border-color: var(--line-strong); background: var(--ink-750); }

/* ---- INPUT / FIELD --------------------------------------- */
.sw-input {
  font-family: var(--font-mono);
  font-size: var(--t-small);
  color: var(--bone);
  background: var(--ink-850);
  border: 1px solid var(--line);
  border-radius: var(--radius-1);
  padding: 10px 12px;
  width: 100%;
  caret-color: var(--blue);
  transition: border-color 0.12s linear;
}
.sw-input::placeholder { color: var(--faint); }
.sw-input:focus { outline: none; border-color: var(--blue-line); }

/* ---- DIVIDER / RULE -------------------------------------- */
.sw-rule { height: 1px; background: var(--line); border: 0; }
.sw-rule--soft { background: var(--line-soft); }

/* ---- KEY-VALUE META ROW (ledger) ------------------------- */
.sw-meta {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 2px 16px;
  font-family: var(--font-mono);
  font-size: var(--t-small);
}
.sw-meta dt { color: var(--slate); text-transform: uppercase; letter-spacing: 0.08em; font-size: var(--t-micro); align-self: center; }
.sw-meta dd { color: var(--bone); margin: 0; font-variant-numeric: tabular-nums; }