/* The look of the pages that the gateway writes itself: login, logout, refusals.

   It is the look of Grimoire (app/globals.css): a white (or deep blue-grey) page, flat
   blocks with a grey edge and round corners, violet for the one main action with a deeper
   lower edge that goes down when it is pressed. These pages are shown before the login,
   and their policy lets them load this one file and nothing else: no font, no picture.
   So the tokens are written out again here (keep them in step with app/globals.css), the
   fonts are the ones of the device (Nunito and DM Sans when it has them), and the mark is
   drawn by the stylesheet itself.

   Light and dark by the setting of the device. Phone first. */
:root {
  --bg: #ffffff;
  --bg-elevated: #ffffff;
  --border-strong: #c6cccf;

  --fg: #3c3c3c;
  --fg-body: #4b4b4b;
  --fg-muted: #6a6a6a;

  --accent: #7b2ff0;
  --accent-hover: #6c22e0;
  --accent-deep: #5a16c4;
  --accent-fg: #ffffff;
  --accent-text: #6417d6;
  --accent-soft: #f1e8ff;
  --accent-soft-fg: #5a16c4;
  --focus: #7b2ff0;
  --spark: #ffc800;

  --danger: #c01818;
  --danger-soft: #ffdfe0;
  --danger-edge: #ffb2b2;

  --radius-md: 0.75rem;
  --radius-lg: 1rem;
  --edge: 2px;
  --lip: 4px;

  --font-head:
    Nunito, ui-rounded, "SF Pro Rounded", system-ui, -apple-system, "Segoe UI", Roboto,
    sans-serif;
  --font-sans:
    "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial,
    sans-serif;

  /* One unit of the drawing of the mark: a book of 18 by 17 units with a lower edge of 3,
     as in app/components/GrimoireMark.tsx. */
  --u: 0.25rem;

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #131f24;
    --bg-elevated: #131f24;
    --border-strong: #52656f;

    --fg: #f1f7fb;
    --fg-body: #dce6ec;
    --fg-muted: #a3b4bf;

    --accent: #b48cff;
    --accent-hover: #c4a5ff;
    --accent-deep: #8c62e0;
    --accent-fg: #1b1033;
    --accent-text: #c4a5ff;
    --accent-soft: #2a2346;
    --accent-soft-fg: #d6c1ff;
    --focus: #b48cff;

    --danger: #ff8a8a;
    --danger-soft: #3f2024;
    --danger-edge: #8a3a3f;

    color-scheme: dark;
  }
}

* {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  padding: 1.5rem max(1rem, env(safe-area-inset-right, 0px))
    calc(1.5rem + env(safe-area-inset-bottom, 0px)) max(1rem, env(safe-area-inset-left, 0px));
  font: 500 1rem/1.55 var(--font-sans);
  color: var(--fg-body);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
}

::selection {
  background: var(--accent-soft);
  color: var(--accent-soft-fg);
}

/* One narrow column in the middle, like a card without an edge. */
main {
  max-width: 22rem;
  margin: clamp(0.5rem, 6vh, 3.5rem) auto 0;
  text-align: center;
}

p {
  margin: 0 0 1rem;
  overflow-wrap: anywhere;
}

/* The name of the app, in violet: the <p> above the heading of the login page, and the
   heading of every other page. */
.app,
h1 {
  margin: 0;
  font: 900 1.75rem/1.15 var(--font-head);
  color: var(--accent-text);
  overflow-wrap: anywhere;
}

.bar {
  margin: 0 0 1.25rem;
}

/* On the login page the name is the large line, and "Log in" a small one under it. */
.login h1 {
  margin: 0.25rem 0 1.25rem;
  font: 800 1rem/1.3 var(--font-head);
  color: var(--fg-muted);
}

/* The mark, above the name: a closed book as a flat violet block with a deeper lower
   edge, a line for its spine, and one gold spark. No picture is loaded for it. */
.app,
.bar {
  position: relative;
}

.app::before,
.bar::before {
  content: "";
  display: block;
  width: calc(18 * var(--u));
  height: calc(17 * var(--u));
  /* under the book: its lower edge, then the room before the name */
  margin: 0 auto calc(3 * var(--u) + 0.875rem);
  border-radius: calc(4 * var(--u));
  box-shadow: 0 calc(3 * var(--u)) 0 var(--accent-deep);
  /* the spine: a line with two round ends */
  background:
    radial-gradient(circle closest-side, var(--accent-deep) calc(100% - 0.5px), transparent 100%)
      calc(4.25 * var(--u)) calc(1.75 * var(--u)) / calc(1.5 * var(--u)) calc(1.5 * var(--u))
      no-repeat,
    radial-gradient(circle closest-side, var(--accent-deep) calc(100% - 0.5px), transparent 100%)
      calc(4.25 * var(--u)) calc(13.75 * var(--u)) / calc(1.5 * var(--u)) calc(1.5 * var(--u))
      no-repeat,
    linear-gradient(var(--accent-deep), var(--accent-deep)) calc(4.25 * var(--u))
      calc(2.5 * var(--u)) / calc(1.5 * var(--u)) calc(12 * var(--u)) no-repeat,
    var(--accent);
}

/* The spark: a star of four points, each side an arc. */
.app::after,
.bar::after {
  content: "";
  position: absolute;
  top: calc(3.5 * var(--u));
  left: calc(50% - 2.5 * var(--u));
  width: calc(9 * var(--u));
  height: calc(9 * var(--u));
  background: var(--spark);
  clip-path: polygon(
    50% 0%, 51.7% 12.9%, 56.7% 25%, 64.6% 35.4%, 75% 43.3%, 87.1% 48.3%,
    100% 50%, 87.1% 51.7%, 75% 56.7%, 64.6% 64.6%, 56.7% 75%, 51.7% 87.1%,
    50% 100%, 48.3% 87.1%, 43.3% 75%, 35.4% 64.6%, 25% 56.7%, 12.9% 51.7%,
    0% 50%, 12.9% 48.3%, 25% 43.3%, 35.4% 35.4%, 43.3% 25%, 48.3% 12.9%
  );
}

/* Something went wrong, or was refused: red, in words. */
.warn {
  padding: 0.625rem 0.875rem;
  border: var(--edge) solid var(--danger-edge);
  border-radius: var(--radius-md);
  background: var(--danger-soft);
  color: var(--danger);
  font-size: 0.9375rem;
  font-weight: 600;
  text-align: left;
}

/* A field is one block: its name on top, and under it what is written, without an edge
   of its own. The block shows the focus. */
.write {
  display: flex;
  flex-direction: column;
  gap: 0.1875rem;
  margin: 0 0 0.75rem;
  padding: 0.5625rem 0.875rem 0.625rem;
  border: var(--edge) solid var(--border-strong);
  border-radius: var(--radius-lg);
  background: var(--bg-elevated);
  text-align: left;
  transition: border-color 0.1s ease-out;
}

.write:focus-within {
  border-color: var(--focus);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.write label {
  font: 800 0.8125rem/1.3 var(--font-head);
  color: var(--fg-muted);
}

/* 16px: a phone does not zoom in when the box gets the focus. */
.write input {
  display: block;
  width: 100%;
  min-height: 1.75rem;
  padding: 0.125rem 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--fg);
  font: 500 1rem/1.4 var(--font-sans);
  /* the ring is on the block; this one only shows where colours are forced */
  outline: 2px solid transparent;
  outline-offset: 2px;
}

/* What a password manager fills in keeps the colours of the block: a browser would paint
   it in a colour of its own. Two rules, because a browser that does not know one of the
   two names would drop both. */
.write input:-webkit-autofill {
  -webkit-text-fill-color: var(--fg);
  caret-color: var(--fg);
  box-shadow: 0 0 0 10rem var(--bg-elevated) inset;
}

.write input:autofill {
  -webkit-text-fill-color: var(--fg);
  caret-color: var(--fg);
  box-shadow: 0 0 0 10rem var(--bg-elevated) inset;
}

.actions {
  margin: 1rem 0 0;
}

/* The one action of the page: violet, with a lower edge. Pressed, it goes down on it. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 2.875rem;
  margin: 0 0 var(--lip);
  padding: 0 1.25rem;
  border: var(--edge) solid var(--accent);
  border-radius: var(--radius-lg);
  background: var(--accent);
  color: var(--accent-fg);
  font: 800 1rem/1 var(--font-head);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 var(--lip) 0 var(--accent-deep);
  transition:
    transform 0.1s ease-out,
    box-shadow 0.1s ease-out,
    background-color 0.1s ease-out,
    border-color 0.1s ease-out;
}

.btn:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
}

.btn:active {
  transform: translateY(var(--lip));
  box-shadow: none;
}

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

@media (prefers-reduced-motion: reduce) {
  .write,
  .btn {
    transition: none;
  }
}