/* Chisel ID — uses the studio's bright tokens so sign-in reads as the front door of /app/. */
:root {
  --paper: #f7f7f5;
  --surface: #fff;
  --ink: #171714;
  --muted: #777772;
  --rule: #deded8;
  --purple: #635bff;
  --red: #c2412f;
  --control-radius: 10px;
  --mono: "DM Mono", "SFMono-Regular", monospace;
  --sans: Outfit, Arial, sans-serif;
}

* { box-sizing: border-box; }
body { margin: 0; min-height: 100dvh; background: var(--paper); color: var(--ink); font-family: var(--sans); }
[hidden] { display: none !important; }

.id-header { min-height: 64px; padding: 0 2.2vw; display: flex; align-items: center; border-bottom: 1px solid var(--rule); }
.wordmark { font-weight: 700; letter-spacing: -.06em; color: var(--ink); text-decoration: none; }

.id-layout { min-height: calc(100dvh - 64px); padding: 2rem 1rem; display: grid; place-items: center; }

.id-card { width: min(100%, 400px); padding: 1.6rem; display: grid; gap: .95rem; border: 1px solid var(--rule); border-radius: var(--control-radius); background: var(--surface); }
.id-card h1 { margin: .2rem 0 .1rem; font-size: 1.7rem; font-weight: 600; letter-spacing: -.05em; }

.mode-switch { display: grid; grid-template-columns: 1fr 1fr; padding: 3px; border: 1px solid var(--rule); border-radius: var(--control-radius); background: var(--paper); }
.mode-switch button { height: 34px; border: 0; border-radius: 8px; background: transparent; color: var(--muted); font: 500 .68rem/1 var(--mono); letter-spacing: .04em; cursor: pointer; }
.mode-switch button[aria-selected="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(0, 0, 0, .06); }

label { display: grid; gap: .4rem; color: var(--muted); font: 500 .62rem/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
input { height: 42px; padding: 0 .8rem; border: 1px solid var(--rule); border-radius: var(--control-radius); background: var(--surface); color: var(--ink); font: 400 .95rem var(--sans); letter-spacing: 0; text-transform: none; }
input:focus-visible, button:focus-visible, a:focus-visible { outline: 2px solid var(--purple); outline-offset: 2px; }

.primary-button { height: 44px; margin-top: .2rem; border: 1px solid var(--ink); border-radius: var(--control-radius); background: var(--ink); color: #fff; font: 500 .72rem/1 var(--mono); letter-spacing: .05em; cursor: pointer; transition: background-color .2s ease, border-color .2s ease; }
.primary-button:hover:not(:disabled) { background: var(--purple); border-color: var(--purple); }
.primary-button:disabled { opacity: .55; cursor: wait; }

.form-message { margin: 0; padding: .65rem .75rem; border: 1px solid var(--red); border-radius: var(--control-radius); background: #fbeeec; color: var(--red); font: 400 .8rem/1.4 var(--sans); }
.form-message[data-kind="notice"] { border-color: var(--purple); background: #efeeff; color: var(--purple); }

.card-index { margin: 0; color: var(--purple); font: 500 .62rem/1 var(--mono); letter-spacing: .1em; }
.card-copy { margin: 0; color: var(--muted); font-size: .88rem; line-height: 1.45; }

.id-support { margin: .3rem 0 0; display: grid; gap: .45rem; color: var(--muted); font-size: .74rem; line-height: 1.45; }
.id-support a, .text-link { color: var(--purple); text-decoration: none; }
.id-support a:hover, .text-link:hover { text-decoration: underline; }
.text-link { justify-self: center; font: 500 .65rem/1 var(--mono); }