/* GEGENEREERD BESTAND, niet met de hand bewerken. Gemaakt door deploy/login/bouw.mjs uit src/stijl.css en src/deur/deur.css.
   Hoort op de server in /var/www/vermogendheid-login/inloggen/. Wijzig de bronnen en draai: node deploy/login/bouw.mjs */
/* The password screen in the potjes look. One file, nothing is loaded from anywhere: behind the gate
   every request is answered with this same page and a 401, so a stylesheet, a font file or an image
   can never arrive. The two font files are put in here as data URIs by bouw.mjs.

   Everything here is a copy of what the app already has: the tokens of web/src/stijl/tokens.css, the
   page texture of basis.css, the button of Knop.astro, the field of Veld.astro, the note of
   Briefje.astro, the brand of Pagina.astro and the fridge door of pages/index.astro.
   bouw.mjs warns when a token here no longer equals the one in tokens.css. */

@font-face {
  font-family: 'Young Serif';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url('/inloggen/lettertypen/young-serif-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 400 700;
  font-display: block;
  src: url('/inloggen/lettertypen/figtree-latin.woff2') format('woff2');
}

:root {
  --cream: #f7efe0;
  --paper: #fffcf4;
  --paper-warm: #fdf3d7;
  --fridge: #e9ece6;
  --ink: #3b2135;
  --ink-2: #6a4f61;
  --op-ink: #fff8ea;
  --clay-deep: #9a4425;
  --sage: #8da27e;
  --ochre-tint: #f5e6c4;
  --warn-text: #7e2f14;

  --shadow-paper: 0 1px 1px rgba(74, 40, 30, 0.1), 0 10px 22px -10px rgba(74, 40, 30, 0.3);
  --shadow-soft: 0 1px 2px rgba(74, 40, 30, 0.06), 0 18px 40px -20px rgba(74, 40, 30, 0.3);
  --shadow-press: 0 3px 0 var(--ink);
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);

  --f-display: 'Young Serif', 'Iowan Old Style', Georgia, serif;
  --f-body: 'Figtree', 'Avenir Next', system-ui, sans-serif;

  --t-xs: 13px;
  --t-sm: 14.5px;
  --t-base: 16px;

  --r-sm: 8px;
  --r-md: 14px;
  --r-xl: 40px;
  --r-pill: 999px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  color: var(--ink);
  background-color: var(--cream);
  /* grain plus two soft washes, the same paper as every page of the app */
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .29 0 0 0 0 .16 0 0 0 0 .12 0 0 0 .075 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    radial-gradient(62vw 42vw at 92% -6%, rgba(141, 162, 126, 0.2), transparent 62%),
    radial-gradient(52vw 44vw at -12% 38%, rgba(217, 163, 63, 0.13), transparent 60%);
  background-attachment: fixed, fixed, fixed;
  font-family: var(--f-body);
  font-size: var(--t-base);
  line-height: 1.55;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
p {
  margin: 0;
}

button,
input {
  font: inherit;
  color: inherit;
}

::selection {
  background: var(--ochre-tint);
  color: var(--ink);
}

/* One focus ring for the whole app. */
:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------- the page and the brand, where they are on every page of the app ---------- */
.page {
  flex: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 48px;
}

.top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 36px;
  padding: 22px 0 26px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--f-display);
  font-weight: 400;
  font-size: 27px;
  line-height: 1;
  letter-spacing: -0.01em;
}
.brand svg {
  width: 30px;
  height: 34px;
  flex: none;
}
/* The fonts are in this file, but the browser still decodes them after the first layout. The word gets
   its room up front, so the line next to it does not move when the font arrives. */
.brand span {
  display: inline-block;
  min-width: 206px;
  white-space: nowrap;
}
.ill {
  fill: none;
  stroke: var(--ink);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.onder-naam {
  font-size: 15.5px;
  font-weight: 600;
  color: var(--ink-2);
}

/* ---------- the door: the house and the note ---------- */
.deur {
  position: relative;
  z-index: 0;
  display: grid;
  grid-template-columns: auto 474px;
  column-gap: 44px;
  justify-content: center;
  align-items: end;
  /* anchored to the top, never centred on the height: nothing moves when a message appears */
  padding-top: clamp(20px, 11vh, 130px);
}

/* The canvas has its size here and only here. huis.js reads it and never sets it.
   The bottom margin puts the foot of the house level with the bottom edge of the fridge door. */
#huis {
  grid-column: 1;
  grid-row: 1;
  display: block;
  width: 217px;
  height: 193px;
  margin-bottom: -7px;
  pointer-events: none;
  user-select: none;
}

/* the fridge door of the start page, with its handle. The note hangs on it. */
.koelkast {
  grid-column: 2;
  grid-row: 1;
  position: relative;
  z-index: 0;
  min-width: 0;
  padding: 36px 26px 72px 52px;
  border: 2px solid var(--ink);
  border-radius: var(--r-xl);
  /* #f3f5f1 is the fridge colour mixed 55 to 45 with white, as the start page does with color-mix */
  background: linear-gradient(100deg, #f3f5f1 0, var(--fridge) 22%, var(--fridge) 100%);
  box-shadow: var(--shadow-soft);
}
.greep {
  position: absolute;
  left: 17px;
  top: 30px;
  width: 13px;
  height: 120px;
  border-radius: 7px;
  border: 2px solid var(--ink);
  background: var(--paper);
  box-shadow: 2px 3px 0 rgba(59, 33, 53, 0.14);
}
/* the note: a slip of paper held by a magnet, with a second sheet askew behind it.
   The sheet you type on hangs straight. */
.briefje {
  position: relative;
  min-width: 0;
  background: var(--paper);
  border-radius: var(--r-sm);
  padding: 30px 24px 18px;
  box-shadow: var(--shadow-paper);
}
.briefje::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0;
  border-radius: var(--r-sm);
  background: var(--paper-warm);
  box-shadow: var(--shadow-paper);
  transform: rotate(-1.6deg);
}
.magneet {
  position: absolute;
  z-index: 2;
  top: -11px;
  left: 50%;
  width: 26px;
  height: 26px;
  margin-left: -13px;
  border-radius: 50%;
  border: 2px solid var(--ink);
  background:
    radial-gradient(circle at 34% 30%, rgba(255, 255, 255, 0.65) 0 17%, transparent 18%),
    var(--sage);
  box-shadow: 0 3px 0 rgba(59, 33, 53, 0.22);
}

.briefje h2 {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: 24px;
  line-height: 1.15;
  letter-spacing: -0.01em;
}
.lead {
  margin-top: 6px;
  color: var(--ink-2);
}

/* ---------- the field, as Veld.astro ---------- */
.veld {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 5px;
  margin-top: 20px;
}
.veld label {
  font-weight: 600;
  font-size: var(--t-sm);
  line-height: 1.3;
}
.regel {
  display: flex;
  align-items: stretch;
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: var(--r-md);
  box-shadow: 0 2px 0 rgba(59, 33, 53, 0.14);
  transition: box-shadow 0.16s var(--ease-out);
}
/* the ring goes round the whole field when the input has the focus */
.regel:focus-within {
  box-shadow: 0 2px 0 var(--ink);
  outline: 3px solid var(--ink);
  outline-offset: 2px;
}
/* with the focus on the show button the ring belongs to that button alone */
.regel:has(.toon:focus-visible) {
  box-shadow: 0 2px 0 rgba(59, 33, 53, 0.14);
  outline: none;
}
.regel input {
  flex: 1;
  min-width: 0;
  /* 16px keeps iOS Safari from zooming the page on focus */
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  padding: 13px 6px 13px 14px;
  border: 0;
  border-radius: var(--r-md);
  background: transparent;
  color: var(--ink);
}
.regel input:focus-visible {
  outline: none;
}
.regel:has(input[aria-invalid='true']) {
  border-color: var(--clay-deep);
  box-shadow: 0 2px 0 var(--clay-deep);
}

/* the quiet show button, the 'stil' kind of Knop.astro, inside the field on the right */
.toon {
  position: relative;
  flex: none;
  min-width: 92px;
  margin: 6px;
  padding: 0 8px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--clay-deep);
  font-size: var(--t-sm);
  font-weight: 600;
  line-height: 1;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
/* a finger gets the whole height of the field */
.toon::before {
  content: '';
  position: absolute;
  inset: -8px -8px -8px -4px;
}
.toon:hover {
  background: rgba(59, 33, 53, 0.06);
  color: var(--ink);
}
.toon:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: -1px;
  border-radius: 9px;
}

/* One place under the field, two lines high, for the help line or the message. The room is always
   there, so the button never moves when a message appears. */
.onder {
  display: grid;
  min-height: 37px;
  font-size: var(--t-xs);
  line-height: 1.4;
}
.onder > * {
  grid-area: 1 / 1;
}
.hulp {
  color: var(--ink-2);
}
.fout {
  font-weight: 700;
  color: var(--warn-text);
}
.fout:not(:empty) + .hulp {
  visibility: hidden;
}

/* ---------- the button, the 'primair' kind of Knop.astro ---------- */
.knop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 48px;
  margin-top: 6px;
  padding: 0 24px;
  border-radius: var(--r-pill);
  border: 2px solid var(--ink);
  font: 600 16px/1 var(--f-body);
  color: var(--op-ink);
  background: var(--clay-deep);
  cursor: pointer;
  user-select: none;
  box-shadow: var(--shadow-press);
  transition:
    transform 0.14s var(--ease-out),
    box-shadow 0.14s var(--ease-out),
    background-color 0.18s ease;
  -webkit-tap-highlight-color: transparent;
}
.knop:hover {
  background: #87391d;
}
.knop:active {
  transform: translateY(3px) scale(0.985);
  box-shadow: 0 0 0 var(--ink);
}
.knop[disabled] {
  opacity: 0.45;
  cursor: progress;
  box-shadow: none;
  transform: none;
}
/* the arrow of Knop.astro. It is drawn by the stylesheet, because the login script writes the label
   with textContent and would wipe an element inside the button. */
@supports ((mask-image: none) or (-webkit-mask-image: none)) {
  .knop::after {
    content: '';
    flex: none;
    width: 18px;
    height: 18px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13M13 6.5l5.5 5.5-5.5 5.5'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13M13 6.5l5.5 5.5-5.5 5.5'/%3E%3C/svg%3E") center / contain no-repeat;
  }
  .knop[disabled]::after {
    display: none;
  }
}

noscript p {
  margin-top: 14px;
  font-size: var(--t-sm);
  font-weight: 700;
  color: var(--warn-text);
}

.voet {
  grid-column: 2;
  grid-row: 2;
  margin-top: 24px;
  padding: 0 12px 40px;
  font-size: var(--t-sm);
  line-height: 1.45;
  color: var(--ink-2);
  text-align: center;
  text-wrap: balance;
}

/* the gentle shake of the note after a wrong password */
.shake {
  animation: shake 0.35s ease-in-out;
}
@keyframes shake {
  0%,
  100% {
    transform: translateX(0);
  }
  20% {
    transform: translateX(-6px);
  }
  40% {
    transform: translateX(6px);
  }
  60% {
    transform: translateX(-4px);
  }
  80% {
    transform: translateX(4px);
  }
}

/* ---------- smaller screens ---------- */
@media (max-width: 1240px) {
  .page {
    padding: 0 32px;
  }
}

/* A phone: the form goes to the top, so the field and the button stay in sight above the keyboard.
   The house gets smaller and stands in the top right corner, next to the name. */
@media (max-width: 780px) {
  .page {
    --kop: 114px;
    padding: 0 16px;
  }
  /* one column, so the house stays above the right corner of the door on a wider phone or a tablet */
  .top,
  .deur {
    width: 100%;
    max-width: 460px;
    margin: 0 auto;
  }
  /* the name sits where it sits on every page of the app on a phone */
  .top {
    align-content: flex-start;
    gap: 4px 16px;
    height: var(--kop);
    padding: 18px 126px 0 0;
  }
  .brand {
    font-size: 24px;
  }
  .brand span {
    min-width: 0;
  }
  .onder-naam {
    flex-basis: 100%;
    font-size: var(--t-sm);
    font-weight: 500;
  }
  .deur {
    display: block;
    padding-top: 4px;
  }
  /* the house stands in the header, above the note. .deur is what it is placed against. */
  #huis {
    position: absolute;
    top: calc(8px - var(--kop));
    right: 0;
    width: 113px;
    height: 100px;
    margin: 0;
  }
  .koelkast {
    padding: 22px 10px 20px;
    border-radius: 30px;
  }
  .greep {
    display: none;
  }
  .briefje {
    padding: 24px 18px 16px;
  }
  .veld {
    margin-top: 16px;
  }
}

@media (max-width: 374px) {
  .top {
    padding-right: 100px;
  }
  .brand {
    font-size: 21px;
  }
  .brand svg {
    width: 26px;
    height: 30px;
  }
  #huis {
    top: calc(24px - var(--kop));
    width: 95px;
    height: 84px;
  }
}

/* a low window, such as a phone on its side: less air above the door */
@media (min-width: 781px) and (max-height: 640px) {
  .top {
    padding-bottom: 12px;
  }
  .deur {
    padding-top: 0;
  }
  .koelkast {
    padding-top: 28px;
    padding-bottom: 36px;
  }
}

@media (hover: none) {
  .toon:hover {
    background: transparent;
    color: var(--clay-deep);
  }
  .knop:hover {
    background: var(--clay-deep);
  }
}

@media (prefers-reduced-motion: reduce) {
  .shake {
    animation: none;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* ---------- the door's own pieces, appended by bouw.mjs after the password screen's stylesheet ----------
   The two pages of the door (sign in, error) reuse everything above: the page, the brand, the fridge
   door, the note and the button. Only what the password screen does not have is here. */

/* the brand mark is Oscar's coin as an <img> (scripts/logo.py), in the place of the pot's <svg> */
.brand .beeldmerk {
  width: 32px;
  height: 32px;
  flex: none;
}

/* no field on these pages: the button stands a little further from the lead */
.briefje .knop {
  margin-top: 24px;
}

/* "Opnieuw proberen" is a link that looks like the button */
a.knop {
  text-decoration: none;
}

/* the request id that oauth2-proxy gives an error, so it can be found in the log. One unit: on a
   narrow screen it moves to its own line instead of breaking in the middle. */
.verzoek {
  display: inline-block;
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 12px;
  overflow-wrap: anywhere;
}