/* Signer-portal layout and components.
 *
 * Colours live in tokens.css and reach here only through var(). A literal here
 * is a test failure, not a style choice -- see test/portal-contrast.test.js.
 *
 * Unminified on purpose. The saving over the minified original is ~4KB, which is
 * noise next to the PDF this page fetches, and a stylesheet a reviewer can read
 * is the point of moving the colours out in the first place.
 *
 * The page's CSP is `style-src 'self'` with no 'unsafe-inline', so there are no
 * <style> blocks and no style= attributes anywhere in the portal. JS toggles
 * classes; it never writes styles.
 */

:root {
  /* Inter was named here but never loaded -- no @font-face, no <link>, and the
     CSP forbids a font CDN. Dropping the phantom so the stack is honest. */
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.55;
  color-scheme: light;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-width: 300px;
}

/* --- Chrome ------------------------------------------------------------- */

header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--surface-header);
  color: var(--ink-on-dark);
  padding: max(1rem, env(safe-area-inset-top)) max(1rem, calc((100% - 1100px) / 2)) 1rem;
}

.brand {
  color: var(--ink-on-dark);
  text-decoration: none;
  font-weight: 800;
  font-size: 1.2rem;
}

.brand span {
  font-weight: 400;
  opacity: .85;
  margin-left: .5rem;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--surface-card);
  color: var(--surface-header);
  padding: .75rem;
  z-index: 10;
}

.skip-link:focus { left: 1rem; top: 1rem; }

main {
  max-width: 1100px;
  margin: 2rem auto;
  padding: 0 max(1rem, env(safe-area-inset-right)) 2rem max(1rem, env(safe-area-inset-left));
}

.card {
  background: var(--surface-card);
  border: 1px solid var(--border-card);
  border-radius: 14px;
  padding: 1.5rem;
  margin: 0 0 1.25rem;
  box-shadow: 0 3px 16px var(--shadow-card);
}

.hidden { display: none !important; }

/* --- Type --------------------------------------------------------------- */

.eyebrow,
.step-label {
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--ink-eyebrow);
  font-weight: 750;
  font-size: .8rem;
}

h1, h2 { line-height: 1.2; }

/* Panel headings take focus on step change so assistive technology announces
   the new step. They are programmatically focusable, never keyboard-tabbable,
   so the ring would be noise. */
h2:focus { outline: none; }

dl {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 3rem;
}

dt { font-size: .8rem; color: var(--ink-label); }
dd { margin: 0; font-weight: 700; }

/* --- Progress ----------------------------------------------------------- */

.progress ol {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding: 0;
  margin: 0;
  list-style: none;
  gap: .5rem;
}

.progress li {
  border-top: 4px solid var(--border-step-todo);
  padding-top: .5rem;
  color: var(--ink-step-todo);
}

.progress li.current {
  border-color: var(--border-step-current);
  color: var(--ink-step-current);
  font-weight: 750;
}

.progress li.done {
  border-color: var(--border-step-done);
  color: var(--ink-step-done);
  font-weight: 650;
}

/* --- Controls ----------------------------------------------------------- */

button,
.card a {
  display: inline-block;
  border: 0;
  border-radius: 8px;
  padding: .8rem 1rem;
  background: var(--action);
  color: var(--ink-on-dark);
  font-weight: 750;
  cursor: pointer;
  margin: .5rem .5rem .5rem 0;
  text-decoration: none;
  min-height: 44px;
}

button:disabled { cursor: wait; opacity: .65; }

/* TWO rings, not one. outline-offset places the ring outside the control, so it
   lands on the page, the card, or the header -- never on the button fill. No
   single colour clears 3:1 against both the dark header and the white card, so
   the inner ring covers light surfaces and the outer ring covers dark ones.
   Every adjacent surface is enumerated in test/portal-contrast.test.js. */
button:focus-visible,
.card a:focus-visible,
input:focus-visible,
select:focus-visible,
canvas:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--focus-inner);
  outline-offset: 2px;
  box-shadow: 0 0 0 6px var(--focus-outer);
}

.header-action {
  background: transparent;
  border: 1px solid var(--border-header-action);
  margin: 0;
}

.secondary { background: var(--action-secondary); }
.danger { background: var(--action-danger); }
.primary { font-size: 1.05rem; background: var(--action-emphasis); }

/* --- Document ----------------------------------------------------------- */

.document-shell {
  border: 1px solid var(--border-document);
  border-radius: 8px;
  overflow: hidden;
  background: var(--surface-document);
  margin: 1rem 0;
}

.document-shell iframe {
  display: block;
  width: 100%;
  height: min(72vh, 850px);
  border: 0;
  background: var(--surface-frame);
}

.document-fallback { margin: .75rem; }

.document-fallback a {
  display: inline;
  color: var(--ink-link);
  background: none;
  padding: 0;
  min-height: 0;
  text-decoration: underline;
}

.download-grid {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem;
}

/* --- Forms -------------------------------------------------------------- */

fieldset {
  border: 1px solid var(--border-fieldset);
  border-radius: 8px;
  margin: 1rem 0;
}

label { display: block; margin: .75rem 0; }

.check {
  padding: 1rem;
  background: var(--surface-check);
  border-radius: 8px;
}

input[type=text],
input:not([type]),
select {
  display: block;
  width: min(100%, 550px);
  font: inherit;
  padding: .75rem;
  border: 1px solid var(--border-control);
  border-radius: 6px;
  margin-top: .3rem;
}

input[type=checkbox],
input[type=radio] {
  inline-size: 1.15rem;
  block-size: 1.15rem;
  vertical-align: middle;
  margin-right: .4rem;
}

canvas {
  display: block;
  width: 100%;
  height: auto;
  max-width: 700px;
  touch-action: none;
  border: 2px solid var(--border-canvas);
  border-radius: 8px;
  background: var(--surface-card);
}

.intent { border-left: 5px solid var(--action); }

.inline-status { min-height: 1.5rem; font-weight: 650; }

.spinner {
  width: 42px;
  height: 42px;
  border: 5px solid var(--spinner-track);
  border-top-color: var(--action);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* --- Responsive --------------------------------------------------------- */

@media (max-width: 650px) {
  main { margin-top: 1rem; }
  .card { padding: 1rem; border-radius: 10px; }
  .brand span { display: block; margin-left: 0; font-size: .8rem; }
  .progress { position: sticky; top: 0; z-index: 5; }
  .progress ol { font-size: .78rem; }
  .document-shell iframe { height: 58vh; }
  dl { display: block; }
  .download-grid a { width: 100%; text-align: center; }
  button { width: 100%; margin: .4rem 0; }
  .header-action { width: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .spinner { animation: none; }
}

@media (prefers-contrast: more) {
  .card,
  .document-shell,
  fieldset { border-width: 2px; }
}