/* The door (D-489). Mobile first (D-210); the application's colours, none of its code. */

:root {
  --teal-600: #185758;
  --teal-700: #0f4a4a;
  --slate-900: #1f3a4d;
  --slate-500: #3e515d;
  /* Text reaches 7:1 on the page's own background (#e9eff2) and on white (WCAG 1.4.6, D-538): the
     same slate, darker - #3e515d is 7.12:1 on the background, where #556e7f was 4.61:1. */
  --slate-600: #3e515d;
  /* Links, toggles and the button's fill: the palette's teal, darker - 7.11:1 on the background,
     8.26:1 on white and 8.26:1 under white text, where #1c6668 was 5.74:1 on the background. */
  --link: #185758;
  --line: #dce8ec;
  /* A text field's edge must be seen (WCAG 1.4.11): 3.33:1 against white, where --line is 1.25:1. */
  --field-edge: #7a909e;
  --surface: #ffffff;
  --shell: #e9eff2;
  --amber-700: #6b4800;
  --green-700: #175a39;
  /* The ring: the darkest teal, 7:1 or better on the page and on a card. */
  --focus: #185758;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --teal-600: #4fb7b8;
    --teal-700: #6fc9ca;
    --slate-900: #e6eef2;
    --slate-500: #a9bcc8;
    --slate-600: #a9bcc8;
    --link: #6fc9ca;
    --line: #2d4452;
    --field-edge: #6f8b9a;
    --surface: #17262f;
    --shell: #0f1b22;
    --amber-700: #e0b04d;
    --green-700: #6fd19d;
    --focus: #6fc9ca;
    color-scheme: dark;
  }
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--shell);
  color: var(--slate-900);
  font:
    16px/1.5 system-ui,
    -apple-system,
    'Segoe UI',
    Roboto,
    sans-serif;
}

.door {
  max-width: 30rem;
  margin: 0 auto;
  padding: 1.5rem 1rem 3rem;
  display: grid;
  gap: 1rem;
}

.door-head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  column-gap: 0.75rem;
}

/* The tagline has the row under the title to itself, so the language link beside the title can
   never squeeze it onto two lines. */
.tagline {
  grid-column: 2 / -1;
  margin: 0;
  color: var(--slate-600);
}

.door-head img {
  grid-row: 1 / span 2;
}

@media (min-width: 48rem) {
  .door {
    max-width: 34rem;
  }

  .tagline {
    white-space: nowrap;
  }
}

.nowrap {
  white-space: nowrap;
}

.code-example {
  font-family: ui-monospace, 'Cascadia Mono', Menlo, monospace;
}

/* 27px, clearly above the 18px card headings. */
h1 {
  margin: 0;
  font-size: 1.6875rem;
  line-height: 1.2;
}

h2 {
  margin: 0 0 0.25rem;
  font-size: 1.125rem;
}

p {
  margin: 0 0 0.75rem;
}

.muted {
  color: var(--slate-500);
}

.small {
  font-size: 0.875rem;
}

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 0.875rem;
  padding: 1rem;
}

form {
  display: grid;
  gap: 0.5rem;
}

label {
  font-weight: 600;
  font-size: 0.9375rem;
}

input {
  width: 100%;
  min-height: max(2.75rem, 44px);
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--field-edge);
  border-radius: 0.625rem;
  background: var(--surface);
  color: inherit;
  font: inherit;
}

input::placeholder {
  color: var(--slate-500);
  opacity: 1;
}

/* Focused: the ring below, and the edge itself turns teal so the field reads as the active one. */
input:focus-visible {
  border-color: var(--link);
}

#code {
  font-family: ui-monospace, 'Cascadia Mono', Menlo, monospace;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

button {
  min-height: max(2.75rem, 44px);
  font: inherit;
  cursor: pointer;
}

.primary {
  width: 100%;
  margin-top: 0.25rem;
  border: 0;
  border-radius: 0.625rem;
  background: var(--teal-600);
  color: #fff;
  font-weight: 600;
}

@media (prefers-color-scheme: dark) {
  .primary {
    color: #0f1b22;
  }
}

.primary:hover {
  background: var(--teal-700);
}

.primary:disabled {
  opacity: 0.6;
  cursor: wait;
}

.link {
  border: 0;
  background: none;
  color: var(--link);
  text-decoration: underline;
  padding: 0 0.25rem;
  white-space: nowrap;
}

/* The password disclosure: a button, so it carries aria-expanded and closes again. */
.toggle {
  display: flex;
  align-items: center;
  width: 100%;
  margin-top: 0.75rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--link);
  text-align: start;
  text-decoration: underline;
}

.toggle::before {
  content: '▸';
  display: inline-block;
  width: 1.25em;
  text-decoration: none;
}

.toggle[aria-expanded='true']::before {
  content: '▾';
}

#password-box {
  margin-top: 0.25rem;
}

.hint {
  margin: 0.375rem 0 0;
  font-size: 0.875rem;
  color: var(--slate-500);
}

/* The quiet way out at the bottom of a card: small, but a link that says where it goes. */
.card-foot {
  margin: 0.75rem 0 0;
  font-size: 0.875rem;
}

a {
  color: var(--link);
}

/* A link on its own line (WCAG 2.5.5): the text keeps its size, colour and underline; only the box
   a finger or a pointer hits grows to 44px tall. The 4px each side is taken back by the margin, so
   the words sit where they did, and the focus ring draws round the whole box. */
.tap {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: 4px;
  margin-inline: -4px;
}

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

.message {
  margin: 0;
  padding: 0.75rem 1rem;
  border-radius: 0.625rem;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--amber-700);
  overflow-wrap: anywhere;
}

.message.good {
  color: var(--green-700);
}

footer {
  text-align: center;
}