/*
  Every value here is a token reference. A raw colour or spacing literal in this file is the thing
  the token check exists to find, and it would be found by reading this file.

  IT IS A FILE RATHER THAN A `<style>` BLOCK so the page's Content-Security-Policy can be
  `style-src 'self'` with no `unsafe-inline` and no nonce. An inline block would have cost one of
  those, on the page that collects a password.
*/
body {
  margin: 0;
  background: var(--rome-color-surface);
  color: var(--rome-color-ink);
  font-family: var(--rome-font-body);
  font-size: var(--rome-font-size-body);
  line-height: 1.5;
}
main {
  max-width: var(--rome-measure);
  margin: 0 auto;
  padding: var(--rome-space-4) var(--rome-space-2);
}
h1 {
  font-size: var(--rome-font-size-title);
  margin: 0 0 var(--rome-space-2);
}
p {
  margin: 0 0 var(--rome-space-3);
}
fieldset {
  border: 1px solid var(--rome-color-line);
  border-radius: var(--rome-radius);
  margin: 0 0 var(--rome-space-3);
  padding: var(--rome-space-2);
}
legend {
  padding: 0 var(--rome-space-1);
}
label {
  display: block;
  margin-bottom: var(--rome-space-1);
}
input[type='email'],
input[type='password'],
input[type='text'] {
  width: 100%;
  box-sizing: border-box;
  padding: var(--rome-space-1);
  border: 1px solid var(--rome-color-line);
  border-radius: var(--rome-radius);
  background: var(--rome-color-accent-ink);
  color: var(--rome-color-ink);
  font: inherit;
}
.field {
  margin-bottom: var(--rome-space-3);
}
.hint {
  color: var(--rome-color-ink-muted);
  font-size: var(--rome-font-size-small);
  margin: var(--rome-space-1) 0 0;
}
button {
  background: var(--rome-color-accent);
  color: var(--rome-color-accent-ink);
  border: 0;
  border-radius: var(--rome-radius);
  padding: var(--rome-space-1) var(--rome-space-3);
  font: inherit;
  cursor: pointer;
}
:focus-visible {
  outline: var(--rome-focus-ring) solid var(--rome-color-accent);
  outline-offset: var(--rome-focus-ring);
}
output {
  display: block;
  margin: var(--rome-space-3) 0 0;
}
[data-outcome='refused'] {
  color: var(--rome-color-danger);
}