/* Shared components: sheets, band, dateline, method line, buttons, chips, prose. */

/* visually hidden, still read aloud */
.wa-sr {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* the sheet laid on the ground: hairline bound, no radius, no shadow */
.sheet {
  background: var(--wa-sheet);
  border: 1px solid var(--wa-hairline);
}
.sheet-pad { padding: var(--wa-s-6) var(--wa-s-6) var(--wa-s-6); }
.recess { background: var(--wa-recess); padding: var(--wa-s-4); }
@media (max-width: 640px) {
  .sheet-pad { padding: var(--wa-s-5) var(--wa-s-4); }
}

/* two rules 6px apart: the major region division, at most twice per page */
.band {
  height: 8px;
  border-top: 1px solid var(--wa-rule);
  border-bottom: 1px solid var(--wa-rule);
}

/* dateline and method line: Plex Mono meta */
.dateline,
.method-line {
  font-family: var(--wa-font-measure);
  font-size: var(--wa-t-meta);
  line-height: 1.45;
  letter-spacing: .01em;
  color: var(--wa-ink-muted);
  font-variant-numeric: tabular-nums;
}
.method-line { margin-top: var(--wa-s-3); }
.num { font-family: var(--wa-font-measure); font-variant-numeric: tabular-nums; }

/* page heading block: more space above a heading than below */
.page-head { margin-bottom: var(--wa-s-6); }
.page-head h1 { margin-bottom: var(--wa-s-2); }
.page-head .lede { margin-top: var(--wa-s-4); }

.lede {
  font-family: var(--wa-font-read);
  font-size: var(--wa-t-4);
  line-height: 1.5;
  color: var(--wa-ink-body);
}
.prose {
  font-family: var(--wa-font-read);
  font-size: var(--wa-t-body);
  line-height: 1.65;
  color: var(--wa-ink-body);
}
.prose p + p { margin-top: var(--wa-s-4); }
.section-title { margin-bottom: var(--wa-s-3); }
.section + .section { margin-top: var(--wa-s-8); }

/* buttons */
.btn {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 20px;
  font-family: var(--wa-font-operate);
  font-size: var(--wa-t-ui);
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  border: 1px solid var(--wa-ink);
  cursor: pointer;
}
.btn-primary { background: var(--wa-ink); color: var(--wa-sheet); }
.btn-primary:hover { background: var(--wa-accent); border-color: var(--wa-accent); color: var(--wa-sheet); }
.btn-secondary { background: transparent; color: var(--wa-ink); border-color: var(--wa-rule); }
.btn-secondary:hover { border-color: var(--wa-ink); color: var(--wa-ink); }
.btn .arrow { display: inline-block; margin-left: var(--wa-s-2); transition: transform var(--wa-dur-state) var(--wa-ease); }
.btn:hover .arrow { transform: translateX(4px); }

/* chips: Plex Mono meta, hairline, never a fill */
.chip {
  display: inline-block;
  font-family: var(--wa-font-measure);
  font-size: var(--wa-t-meta);
  line-height: 1.45;
  color: var(--wa-ink-body);
  border: 1px solid var(--wa-hairline);
  padding: 2px 7px;
}
.chip-ok { color: var(--wa-ok); border-color: var(--wa-ok); }
.chip-warn { color: var(--wa-warn); border-color: var(--wa-warn); }
.chip-alert { color: var(--wa-accent); border-color: var(--wa-accent); }

.section-actions { margin-top: var(--wa-s-5); }

.wa-state { margin-top: var(--wa-s-4); padding: var(--wa-s-3) 0; border-top: 1px solid var(--wa-rule); }
.wa-state[hidden] { display: none; }
.wa-state-line { margin: 0; color: var(--wa-ink-body); }
.wa-noscript { margin: var(--wa-s-3) 0; padding: var(--wa-s-3) 0; border-bottom: 1px solid var(--wa-rule); }