/*
  src/web/assets/sign-in.css

  The layout of the sign-in pages, the mock's rules as the operator approved them on 2026-10-30
  (factory-on-the-internet/design/sign-in-mock.html): console.tucum.mx's two columns, the drawing on
  the left with the website's ink and its grain, the form column on the right at the console's
  measure with the wordmark, the title, the route line, the field as a rule under the words, the
  button and the code; one column under 860px, the drawing a band on top. The mock's state switcher
  is the mock's alone and is not here.
*/

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

html {
  background: var(--field);
  color: var(--text);
  font-family: var(--font);
  font-size: 100%;
  font-weight: var(--weight-light);
  line-height: var(--leading);
  letter-spacing: var(--tracking);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  margin: 0;
  background: var(--field);
  color: var(--text);
  font: inherit;
  letter-spacing: inherit;
  caret-color: var(--text);
}

::selection {
  background: rgb(from var(--text) r g b / 0.18);
}

h1,
p {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
}

button,
input {
  margin: 0;
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
}

:focus-visible {
  outline: var(--focus-ring) solid var(--text);
  outline-offset: var(--focus-offset);
  border-radius: var(--radius-focus);
}

[hidden] {
  display: none !important;
}

/* ---- the two columns, as console.tucum.mx lays them out ---- */

.sign-in {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  min-height: 100dvh;
}

/* the drawing: the website's water, edge to edge in its column */
.drawing {
  position: relative;
  overflow: hidden;
  background: var(--field);
}

.drawing [data-ink] {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  touch-action: pan-y pinch-zoom;
  opacity: 0;
  transition: opacity var(--ink-rise) ease-out;
}

.drawing [data-ink][data-staged] {
  opacity: 1;
}

/* the GPU painter's own canvas, shown in place on a touch try: the same box, no pointer */
.drawing .ink-gpu {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--ink-rise) ease-out;
}

.drawing [data-ink][data-staged] ~ .ink-gpu {
  opacity: 1;
}

/* the grain: the paper's tooth, a CSS layer when the 2D path paints; in the ink itself when the GPU does */
.drawing [data-grain] {
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.86 0 0 0 0 0.85 0 0 0 0 0.83 0 0 0 0.5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  opacity: var(--grain-alpha);
  mix-blend-mode: var(--grain-blend);
  pointer-events: none;
}

.drawing [data-ink][data-painter="gl"] ~ [data-grain] {
  display: none;
}

/* the form half: centred column at the console's measure, the console's extra room on its left */
.form-half {
  position: relative;
  display: grid;
  place-items: center;
  padding-block: var(--space-block);
  padding-left: max(16px, env(safe-area-inset-left, 0px), calc(var(--space-gutter) + var(--space-page)));
  padding-right: max(16px, env(safe-area-inset-right, 0px), var(--space-gutter));
  min-width: 0;
}

.form-column {
  width: 100%;
  max-width: var(--measure-form);
  min-width: 0;
  animation: column-arrives var(--duration-arrive) var(--ease-out) both;
}

@keyframes column-arrives {
  0% {
    opacity: 0;
    transform: translateY(var(--shift-arrive));
  }
}

/* the wordmark, where the console puts its mark: the site's prompt, the name and its hollow cursor */
.wordmark {
  display: flex;
  align-items: baseline;
  gap: 0.3em;
  height: var(--measure-mark);
  margin-bottom: var(--space-stride);
  font-size: var(--text-title);
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-title);
  line-height: var(--leading-title);
}

.prompt {
  color: var(--text-3);
}

.cursor {
  display: inline-block;
  width: var(--cursor-width);
  height: 0.95em;
  margin-left: 0.1em;
  border: var(--cursor-edge) solid rgb(from var(--text-3) r g b / var(--cursor-alpha));
  vertical-align: -0.1em;
  animation: blink var(--cursor-period) steps(1, end) infinite;
}

@keyframes blink {
  50% {
    opacity: 0;
  }
}

/* the title and the line under it */
.title {
  margin: 0 0 var(--space-tight);
  font-size: var(--size-sign-in-title);
  font-weight: var(--weight-regular);
  line-height: var(--leading-title);
  letter-spacing: var(--tracking);
  text-wrap: balance;
}

.route,
.lead {
  margin: 0 0 var(--space-block);
  color: var(--text-2);
  font-size: var(--text-label);
  overflow-wrap: anywhere;
}

.route {
  color: var(--text-2);
}

.route strong {
  color: var(--text);
  font-weight: var(--weight-regular);
}

/* the form: the console's grid, the site's field (a rule under the words) */
.form {
  display: grid;
  gap: var(--space-tight);
}

.label {
  color: var(--text-3);
  font-size: var(--text-label);
}

.field {
  width: 100%;
  height: 2rem;
  padding: 0;
  border: 0;
  border-bottom: 1px solid var(--field-rule);
  border-radius: 0;
  background: transparent;
  color: var(--text);
  font-size: 1rem;
  font-weight: var(--weight-light);
  transition: border-color var(--dur-quick) ease;
}

.field:hover,
.field:focus {
  border-bottom-color: var(--text);
}

.field:focus-visible {
  outline: none;
}

.field:autofill {
  -webkit-text-fill-color: var(--text);
  box-shadow: 0 0 0 100px var(--field) inset;
}

.button {
  width: 100%;
  height: var(--measure-control);
  margin-top: var(--space-tight);
  padding: 0 var(--space-close);
  border: 0;
  border-radius: 0;
  background: var(--text);
  color: var(--field);
  font-size: var(--text-label);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking);
  cursor: pointer;
  transition: opacity var(--dur-quick) ease;
}

.button:hover {
  opacity: var(--opacity-hover);
}

.button:disabled {
  opacity: 0.6;
  cursor: progress;
}

/* the waiting page: the code, then the status the tab reads every three seconds */
.code {
  margin: 0 0 var(--space-stride);
  font-size: var(--text-code);
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-code);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.status {
  color: var(--text-2);
  font-size: var(--text-label);
  max-width: 44ch;
}

.waiting .button {
  margin-top: var(--space-stride);
}


/* a link in the column: the site's underline, the words' colour */
.form-column a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: var(--underline-offset);
  text-decoration-thickness: var(--underline);
  transition: color var(--dur-quick) ease;
}

.form-column a:hover {
  color: var(--text-2);
}

/* one column under the console's width: the water a band on top, the column under it */
@media (max-width: 860px) {
  .sign-in {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(11rem, var(--measure-field-band)) 1fr;
  }

  .form-half {
    align-items: start;
    padding-block: var(--space-page);
    padding-left: max(16px, env(safe-area-inset-left, 0px), var(--space-gutter));
    padding-right: max(16px, env(safe-area-inset-right, 0px), var(--space-gutter));
  }
}

@media (prefers-reduced-motion: reduce) {
  .form-column,
  .cursor {
    animation: none;
  }

  .drawing [data-ink],
  .drawing .ink-gpu {
    transition: none;
  }
}