/* Components. Geometry never changes between states (style guide section 3):
   borders are reserved, hover/pressed change color only. */

/* Buttons: one primary per surface; confirmations colored by outcome. */
.btn {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: 0.55em 1.1em;
  border: 1px solid var(--edge);
  border-radius: var(--radius);
  background: var(--panel-2);
  color: var(--linen);
  font-weight: 500;
  cursor: pointer;
  transition: background-color 100ms, border-color 100ms, color 100ms;
}
.btn:hover { background: var(--hover); }
.btn:active { background: var(--pressed); }
.btn:disabled { color: var(--neutral); border-color: var(--edge); background: var(--panel); cursor: default; }
.btn-primary { background: var(--thread); border-color: var(--thread); color: var(--on-thread); font-weight: 700; }
.btn-primary:hover { background: var(--thread-bright); }
.btn-primary:disabled { background: var(--thread-dim); color: var(--on-thread-dim); }
.btn-danger { background: var(--danger); border-color: var(--danger); color: var(--on-danger); }
.btn-danger-ghost { background: transparent; border-color: var(--edge); color: var(--danger); }
.btn-danger-ghost:hover { background: var(--danger-soft); border-color: var(--danger); }
.btn-success { background: var(--success); border-color: var(--success); color: var(--on-success); }
.btn-ghost { background: transparent; }

/* Inputs: recessed, 1px inner border, labels always (style guide section 6). */
.field { display: grid; gap: var(--sp-1); margin-bottom: var(--sp-4); }
.field > label { font-family: var(--font-ui); font-size: var(--fs-1); font-weight: 700; }
.field > .hint { font-family: var(--font-ui); font-size: var(--fs-0); color: var(--linen-dim); }
.input, textarea.input, select.input {
  background: var(--input-bg);
  border: 1px solid var(--edge);
  border-radius: var(--radius);
  color: var(--linen);
  padding: 0.55em 0.8em;
  width: 100%;
}
.input:focus { border-color: var(--thread-dim); outline: none; }

/* Panels and cards. */
.panel { background: var(--panel); border: 1px solid var(--edge); border-radius: var(--radius-lg); }
.panel-pad { padding: var(--sp-5); }
.card { background: var(--panel); border: 1px solid var(--edge); border-radius: var(--radius-lg); padding: var(--sp-5); }

/* Chips (status; aggregate colored by worst case). */
.chip {
  display: inline-block; padding: 0.1em 0.6em;
  border-radius: 999px; font-family: var(--font-ui); font-size: var(--fs-0);
  border: 1px solid var(--edge); color: var(--linen-dim);
}
.chip.success { border-color: var(--success); color: var(--success); }
.chip.info { border-color: var(--info); color: var(--info); }
.chip.warning { border-color: var(--warning); color: var(--warning); }
.chip.danger { border-color: var(--danger); color: var(--danger); }
.chip.thread { border-color: var(--thread); color: var(--thread); }

/* THE SIGNATURE — the warp thread (SPEC 13 / D14).
   The story stream carries a continuous gold thread down its gutter.
   Weaver narration attaches as knots ON the thread; player chat sits
   off-thread. Story vs chat is structural, not just styled. */
.tapestry { position: relative; padding-left: calc(var(--sp-6) + var(--thread-w)); }
.tapestry::before {
  content: "";
  position: absolute; top: 0; bottom: 0; left: var(--sp-4);
  width: var(--thread-w);
  background: linear-gradient(180deg, transparent, var(--thread-soft) 4%, var(--thread-soft) 96%, transparent);
}
.beat { position: relative; margin: 0 0 var(--sp-5); max-width: 62ch; }
.beat::before {
  content: "";
  position: absolute;
  left: calc(-1 * (var(--sp-6) + var(--thread-w)) + var(--sp-4) - (var(--knot) - var(--thread-w)) / 2);
  top: 0.45em;
  width: var(--knot); height: var(--knot);
  border-radius: 50%;
  background: var(--ink);
  border: 2px solid var(--thread);
}
.beat .who { font-family: var(--font-ui); font-size: var(--fs-0); color: var(--thread); letter-spacing: 0.08em; text-transform: uppercase; }
.beat .text { font-size: var(--fs-2); }
.beat.private::before { border-color: var(--whisper); }
.beat.private .who { color: var(--whisper); }
.beat.private .text { color: var(--whisper-bright); font-style: italic; }
.beat.world::before { background: var(--thread); }

/* Chat: off-thread, quieter, no knot. */
.chat-line { margin: 0 0 var(--sp-3); font-family: var(--font-ui); max-width: 62ch; }
.chat-line .who { font-weight: 700; color: var(--linen-dim); }
.chat-line.retracted { color: var(--neutral); font-style: italic; }

/* Presence notes. */
.presence-line { font-family: var(--font-ui); font-size: var(--fs-0); color: var(--linen-dim); margin: 0 0 var(--sp-3); }

/* Say/Act shuttle (D12): both states always visible; color = meaning. */
.shuttle { display: inline-flex; border: 1px solid var(--edge); border-radius: var(--radius); overflow: hidden; }
.shuttle button {
  border: 0; padding: 0.5em 1em; background: var(--panel);
  color: var(--linen-dim); font-weight: 700; cursor: pointer;
  transition: background-color 100ms, color 100ms;
}
.shuttle button[aria-pressed="true"].mode-say { background: var(--panel-2); color: var(--linen); }
.shuttle button[aria-pressed="true"].mode-act { background: var(--thread); color: var(--on-thread); }

/* Modal (confirmations only for destructive/ambiguous; section 7). */
.modal-backdrop { position: fixed; inset: 0; background: var(--backdrop); display: grid; place-items: center; z-index: 50; padding: var(--sp-4); }
.modal { width: min(30rem, 92vw); max-height: 88vh; max-height: 88dvh; overflow-y: auto; }
.modal .rows { margin: var(--sp-4) 0; }