/* Website 3-step wizard. Progressive reveal: steps 2 and 3 start with the
   [hidden] attribute and the client removes it. The attribute-selector guard
   below MUST win over any authored `.sw-step { display: … }` — the landing-v2
   reveal bug was exactly a `display:flex` overriding the UA [hidden] rule. */
.sw-page { max-width: 720px; margin: 0 auto; padding: 1.5rem 1rem 3rem; }
.sw-h1 { text-align: center; margin-bottom: 1.5rem; }

.sw { display: flex; flex-direction: column; gap: 1.25rem; }
.sw-step { display: flex; flex-direction: column; gap: 0.75rem; }
.sw-step[hidden] { display: none; }        /* guard: wins over .sw-step display */
.sw-step-heading { font-size: 1.1rem; margin: 0; }

/* 3.B: responsive grid of engine tiles, each a brand mark above its label.
   .sw-tile overrides the generic `.btn, button` accent fill (equal
   specificity; this sheet loads after app.css) so the tiles read as neutral
   cards and the marks stay legible in both themes. */
.sw-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: 0.6rem; }
.sw-tile {
  display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
  padding: 0.9rem 0.6rem; cursor: pointer;
  background: var(--surface-raised); color: var(--text-default);
  border: 1px solid var(--border-subtle); border-radius: var(--radius-md);
}
.sw-tile:hover { filter: none; border-color: var(--color-accent); }
.sw-tile:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.sw-tile.is-selected { outline: 2px solid var(--brand-star, #F2D592); border-color: var(--color-accent); }
.sw-tile-mark { display: inline-flex; width: 32px; height: 32px; align-items: center; justify-content: center; }
.sw-tile-mono {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 8px;
  background: var(--text-default); color: var(--surface-raised);
  font-weight: var(--fw-bold, 700); font-size: 0.78rem; letter-spacing: 0.02em;
}
.sw-tile-label { font-size: 0.95rem; font-weight: var(--fw-semibold, 600); }

.sw-prompt { display: flex; flex-direction: column; gap: 0.5rem; }
/* 3.E: the copy button rides the prompt box's top corner. The box is dir=ltr
   so `right` (not a logical property) keeps the button off the first LTR
   characters; padding-top clears the button so no prompt text hides under it. */
.sw-prompt-wrap { position: relative; }
.sw-prompt-box { width: 100%; font-family: monospace; padding-top: 2.7rem; box-sizing: border-box; }
.sw-prompt-copy { position: absolute; top: 0.4rem; right: 0.4rem; padding: 0.3rem 0.9rem; font-size: 0.9rem; }
.sw-file { display: flex; flex-direction: column; gap: 0.5rem; }
.sw-status, .sw-prompt-status { min-height: 1.25rem; }

/* 3.F: step-3 form inherits .auth-form (width/contrast); local rule keeps the
   flex column and stops margin-inline:auto fighting the page's RTL flow. */
.sw-signup-form { display: flex; flex-direction: column; gap: 0.75rem; }
.sw-signup-error:empty { display: none; }
.sw-oauth { display: flex; flex-direction: column; gap: 0.5rem; align-items: center; margin-top: 0.75rem; }
.sw-divider { color: var(--muted, #888); }
.sw-signin { margin-top: 1rem; text-align: center; }

/* 3.D: held-file indicator (name + size once the file is held). No authored
   display that could defeat [hidden] — but keep the guard for safety, the
   landing-v2 lesson. */
.sw-file-held { margin: 0; color: var(--text-default); }
.sw-file-held[hidden] { display: none; }
.sw-file-held bdi { font-weight: var(--fw-semibold, 600); }
.sw-file-check { color: var(--ok, #2e7d32); font-weight: var(--fw-bold, 700); }