/* Swype One V2 — base layer: dark primitives for the Signal Deck system. */

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

html { scroll-behavior: smooth; overflow-x: clip; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--deck);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

img, svg, video { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--signal-soft); }

/* Thin, quiet scrollbars */
* { scrollbar-width: thin; scrollbar-color: var(--panel-3) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb { background: var(--panel-3); border-radius: 8px; }
*::-webkit-scrollbar-track { background: transparent; }

/* --- Type ------------------------------------------------------------------ */
.display {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  font-weight: 500;
  letter-spacing: -0.022em;
}
h1, h2, h3 { font-weight: 600; line-height: var(--lh-title); letter-spacing: -0.01em; }
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
.eyebrow {
  font-family: var(--font-mono); font-size: var(--fs-micro); font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--signal-deep);
}
.lede { font-size: 1.02rem; color: var(--ink-2); }
.small { font-size: var(--fs-small); }
.micro { font-size: var(--fs-micro); color: var(--ink-3); }
.mono  { font-family: var(--font-mono); }
.dim   { color: var(--ink-2); }

a { color: var(--signal-deep); text-decoration: none; }
a:hover { color: var(--signal); }

/* --- Focus ------------------------------------------------------------------- */
:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 2px;
  border-radius: 6px;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* --- Layout helpers ------------------------------------------------------------- */
.shell { max-width: var(--shell); margin-inline: auto; padding-inline: var(--sp-5); }
.row { display: flex; align-items: center; gap: var(--sp-3); }
.row-wrap { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }

/* --- Buttons ---------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--sp-2);
  padding: 0.6rem 1.1rem;
  border: 1px solid var(--line-2);
  border-radius: 10px;
  background: var(--panel-2); color: var(--ink);
  font-weight: 500; font-size: var(--fs-small);
  cursor: pointer; text-decoration: none;
  transition: transform var(--dur-1) var(--ease-out),
              background var(--dur-1) var(--ease-out),
              border-color var(--dur-1) var(--ease-out),
              box-shadow var(--dur-1) var(--ease-out);
}
.btn:hover { background: var(--panel-3); border-color: var(--line-3); }
.btn:active { transform: translateY(1px) scale(.99); }
.btn[disabled] { opacity: 0.45; cursor: not-allowed; }

.btn-primary {
  background: #d93a12; border-color: transparent; color: #fff8f5;
  box-shadow: 0 2px 14px rgba(255,75,36,.32);
}
.btn-primary:hover { background: var(--signal); border-color: transparent; box-shadow: var(--glow-signal); }

.btn-go { background: var(--go); border-color: transparent; color: #16210d; }
.btn-go:hover { background: var(--go-deep); border-color: transparent; }

.btn-ghost { background: transparent; border-color: transparent; color: var(--ink-2); }
.btn-ghost:hover { background: var(--panel-2); color: var(--ink); border-color: transparent; }

.btn-sm { padding: 0.36rem 0.75rem; font-size: var(--fs-micro); border-radius: 8px; }

/* --- Cards & panels ------------------------------------------------------------------ */
.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  box-shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 8px 28px rgba(0,0,0,.3);
}
.card-pad { padding: var(--sp-5); }

/* --- Pills & status (words, always) ----------------------------------------------------- */
.pill {
  display: inline-flex; align-items: center; gap: 0.45em;
  padding: 0.18rem 0.6rem;
  border-radius: var(--r-pill);
  font-family: var(--font-mono); font-size: 0.66rem; font-weight: 500;
  letter-spacing: 0.05em;
  border: 1px solid var(--line-2);
  color: var(--ink-2); background: var(--panel-2);
  white-space: nowrap;
}
.pill .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pill-ready     { color: var(--go-deep);    background: var(--go-soft);     border-color: transparent; }
.pill-working   { color: var(--signal-deep);background: var(--signal-soft); border-color: transparent; }
.pill-needs-you { color: var(--amber);      background: var(--amber-soft);  border-color: transparent; }
.pill-paused    { color: var(--ink-2);      background: var(--panel-2);     border-color: transparent; }
.pill-blocked   { color: var(--hot);        background: var(--hot-soft);    border-color: transparent; }

/* --- Inputs ----------------------------------------------------------------------------- */
.field { display: grid; gap: var(--sp-2); }
.field label { font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); }
.input, .textarea {
  width: 100%;
  padding: 0.68rem 0.9rem;
  border: 1px solid var(--line-2);
  border-radius: 10px;
  background: var(--deck-2);
  transition: border-color var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out);
}
.input::placeholder, .textarea::placeholder { color: var(--ink-3); }
.input:hover, .textarea:hover { border-color: var(--line-3); }
.input:focus, .textarea:focus {
  outline: none; border-color: var(--signal);
  box-shadow: 0 0 0 3px var(--signal-soft);
}
.field .hint { font-size: var(--fs-micro); color: var(--ink-3); }
.field .error { font-size: var(--fs-micro); color: var(--hot); font-weight: 500; }

/* --- The mark ---------------------------------------------------------------------------- */
.mark { display: inline-flex; align-items: center; gap: var(--sp-2); text-decoration: none; }
a.mark:hover { color: var(--ink); }
.mark svg { overflow: visible; }
.mark .wordmark {
  font-family: var(--font-display); font-weight: 700;
  font-size: 1.15rem; letter-spacing: -0.02em; color: var(--ink);
}
.mark .wordmark em { font-style: normal; color: var(--signal); }

/* Stitch line — brighter on dark */
.stitch-line { stroke: var(--signal); stroke-width: 2; fill: none;
               stroke-linecap: round; stroke-dasharray: 7 6; }
.stitch-line.go { stroke: var(--go); }
.stitch-draw { animation: stitch-draw var(--dur-4) var(--ease-out) forwards; }
@keyframes stitch-draw { from { stroke-dashoffset: 260; } to { stroke-dashoffset: 0; } }

.pulse-breath { animation: pulse-breath 4.6s ease-in-out infinite; }
@keyframes pulse-breath { 0%, 100% { opacity: 0.4; } 50% { opacity: 1; } }

/* --- Session canvas messages ---------------------------------------------------------------- */
.msg {
  max-width: min(640px, 100%);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-3);
}
.msg-hermes {
  background: var(--panel);
  border: 1px solid var(--line);
  border-top-left-radius: 6px;
}
.msg-you {
  margin-left: auto;
  background: var(--signal-soft);
  border: 1px solid rgba(255,75,36,.25);
  border-top-right-radius: 6px;
  color: var(--ink);
}
.msg-meta {
  display: flex; align-items: center; gap: var(--sp-2);
  font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-3);
  margin-bottom: 4px;
}
.msg-meta .who { color: var(--signal-deep); font-weight: 500; }
.msg-you .msg-meta .who { color: var(--ink-2); }

/* --- Typing indicator -------------------------------------------------------------------------- */
.typing { display: inline-flex; gap: 4px; align-items: center; padding: 4px 2px; }
.typing i {
  width: 5px; height: 5px; border-radius: 50%; background: var(--signal-deep);
  animation: typing-bounce 1.2s infinite ease-in-out;
}
.typing i:nth-child(2) { animation-delay: 0.15s; }
.typing i:nth-child(3) { animation-delay: 0.3s; }
@keyframes typing-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30% { transform: translateY(-4px); opacity: 1; }
}

/* --- Appear --------------------------------------------------------------------------------------- */
.appear { animation: appear var(--dur-3) var(--ease-out) both; }
@keyframes appear {
  from { opacity: 0; transform: translateY(12px) scale(.985); }
  to   { opacity: 1; transform: none; }
}

/* --- Utility ---------------------------------------------------------------------------------------- */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.demo-tag {
  font-family: var(--font-mono); font-size: 0.62rem;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-3); border: 1px solid var(--line-2);
  padding: 0.16rem 0.5rem; border-radius: 6px;
}