/* ArcRedress screens. Everything here composes tokens from design.css; no
   colour, size, radius or duration is written as a literal. If a value is
   missing, the token is missing, and the fix is in the platform. */

.skip-link {
  position: absolute; left: var(--space-3); top: calc(var(--space-3) * -6);
  background: var(--surface-raised); color: var(--text);
  padding: var(--space-3) var(--space-4); border-radius: var(--radius-md);
  border: 1px solid var(--border-strong); z-index: 10;
  transition: top var(--motion-duration-fast) var(--motion-easing-standard);
}
.skip-link:focus { top: var(--space-3); }

.masthead {
  border-bottom: 1px solid var(--border);
  background: var(--surface-raised);
}
.masthead__inner, .page, .footer__inner {
  max-width: var(--layout-container-sm);
  margin: 0 auto;
  padding-inline: var(--space-4);
}
.masthead__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-4); min-height: 64px;
}
.wordmark {
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--font-tracking-tight);
  color: var(--text); text-decoration: none;
}
.wordmark span { color: var(--action); }

.page { padding-block: var(--space-6) var(--space-8); }
.page > * + * { margin-top: var(--space-5); }
.measure { max-width: var(--layout-measure); }
.lede { font-size: var(--font-size-md); color: var(--text-muted); }
.quiet { color: var(--text-muted); font-size: var(--font-size-sm); }

.steps { display: flex; gap: var(--space-2); list-style: none; padding: 0; margin: 0 0 var(--space-5);
  font-size: var(--font-size-sm); flex-wrap: wrap; }
.steps li { color: var(--text-muted); }
.steps li[aria-current="step"] { color: var(--text); font-weight: var(--font-weight-medium); }
.steps li + li::before { content: "→"; margin-inline-end: var(--space-2); color: var(--border-strong); }

.card {
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--elevation-sm);
}
.card > * + * { margin-top: var(--space-4); }
.card--sunken { background: var(--surface-sunken); box-shadow: none; }

.field { display: block; }
.field + .field { margin-top: var(--space-5); }
.field__label { display: block; font-weight: var(--font-weight-medium); margin-bottom: var(--space-1); }
.field__hint { display: block; color: var(--text-muted); font-size: var(--font-size-sm); margin-bottom: var(--space-2); }
input[type="text"], input[type="email"], input[type="date"], textarea, select {
  width: 100%; font: inherit; color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  min-height: var(--layout-touch-target);
}
textarea { min-height: 14rem; line-height: var(--font-leading-relaxed); resize: vertical; }

.actions { display: flex; gap: var(--space-3); flex-wrap: wrap; align-items: center; }
.button {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--space-2); padding: var(--space-3) var(--space-5);
  font: inherit; font-weight: var(--font-weight-medium);
  border-radius: var(--radius-md); border: 1px solid transparent;
  background: var(--action); color: var(--text-inverse);
  text-decoration: none; cursor: pointer;
  transition: background var(--motion-duration-fast) var(--motion-easing-standard);
}
.button:hover { background: var(--action-hover); }
.button--quiet { background: transparent; color: var(--action); border-color: var(--border-strong); }
.button--quiet:hover { background: var(--action-quiet); }

.notice {
  border-radius: var(--radius-md);
  border-inline-start: 4px solid var(--border-strong);
  background: var(--surface-sunken);
  padding: var(--space-4);
}
.notice--urgent { border-color: var(--colour-critical-500); background: var(--colour-critical-100); }
.notice--caution { border-color: var(--colour-caution-500); background: var(--colour-caution-100); }
.notice--settled { border-color: var(--colour-positive-500); background: var(--colour-positive-100); }
.notice > * + * { margin-top: var(--space-3); }

.deadline { font-size: var(--font-size-2xl); font-weight: var(--font-weight-semibold);
  line-height: var(--font-leading-tight); letter-spacing: var(--font-tracking-tight); }

.working { list-style: none; padding: 0; margin: 0; }
.working li { display: grid; grid-template-columns: 11rem 1fr; gap: var(--space-3);
  padding-block: var(--space-2); border-top: 1px solid var(--border); }
.working li:first-child { border-top: 0; }
.working dt, .working .k { color: var(--text-muted); font-size: var(--font-size-sm); }
@media (max-width: 30rem) { .working li { grid-template-columns: 1fr; gap: var(--space-1); } }

.letter {
  white-space: pre-wrap;
  font-family: var(--font-family-mono);
  font-size: var(--font-size-sm);
  line-height: var(--font-leading-relaxed);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  overflow-x: auto;
}
blockquote.source {
  margin: 0; padding: var(--space-3) var(--space-4);
  border-inline-start: 3px solid var(--action);
  background: var(--surface-sunken); border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
}
.sources { list-style: none; padding: 0; margin: 0; }
.sources > li + li { margin-top: var(--space-4); }

.support { list-style: none; padding: 0; margin: 0; }
.support > li + li { margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--border); }
.support .tel { font-weight: var(--font-weight-semibold); font-size: var(--font-size-md); }

.checklist { list-style: none; padding: 0; margin: 0; }
.checklist li { display: flex; gap: var(--space-3); padding-block: var(--space-2); align-items: flex-start; }
.checklist input[type="checkbox"] { width: 1.25rem; height: 1.25rem; margin-top: 0.2rem; flex: none; accent-color: var(--action); }

.footer { border-top: 1px solid var(--border); margin-top: var(--space-8);
  background: var(--surface-sunken); }
.footer__inner { padding-block: var(--space-6); font-size: var(--font-size-sm); color: var(--text-muted); }
.footer__inner > * + * { margin-top: var(--space-3); }
.footer a { color: var(--text-muted); }