/* tinylogin's pages: one narrow column with a form, in the starter's tokens (frontend.md › Starter contract). Light
   or dark follows the system: public pages offer no switch. No inline style anywhere (CSP). */
@layer tokens, base, compositions, components, utilities;

@layer tokens {
  :root {
    color-scheme: light dark;
    --paper: light-dark(#eff1f5, #2e3440);
    --ink: light-dark(#2e3440, #eceff4);
    --muted: light-dark(#4c566a, #b4bccb);
    --line: light-dark(#5c667a, #8a94a8);
    --accent: light-dark(#1f5a97, #9cc5ec);
    --on-accent: light-dark(#ffffff, #1b2330);
    --danger: light-dark(#a3242f, #f2a7ad);
    --focus-color: light-dark(#1f5a97, #ebcb8b);
    --sans: "Helvetica Neue", Helvetica, Arial, Roboto, "Liberation Sans", sans-serif;
    --small: 15px;
    --body: 17px;
    --lead: clamp(24px, 1.2rem + 1vw, 32px);
    --s2: 8px;
    --s3: 12px;
    --s4: 16px;
    --s6: 24px;
    --s8: 32px;
    --s12: 48px;
    --gutter: max(var(--s4), env(safe-area-inset-left), env(safe-area-inset-right));
    --focus: 3px;
    --focus-offset: 2px;
    --target: 44px;
    --measure: 26rem;
  }
}

@layer base {
  *,
  ::before,
  ::after {
    box-sizing: border-box;
  }
  :root {
    -webkit-text-size-adjust: 100%;
  }
  body {
    margin: 0;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    background: var(--paper);
    color: var(--ink);
    font: 400 var(--body) / 1.5 var(--sans);
    overflow-wrap: anywhere;
  }
  h1,
  h2,
  p,
  ul {
    margin: 0;
  }
  h1 {
    font-size: var(--lead);
    line-height: 1.15;
  }
  h2 {
    font-size: 1.25em;
    line-height: 1.2;
  }
  ul {
    padding-inline-start: 0;
    list-style: none;
  }
  a {
    color: var(--accent);
    text-underline-offset: 0.2em;
  }
  :focus-visible {
    outline: var(--focus) solid var(--focus-color);
    outline-offset: var(--focus-offset);
  }
  @media (prefers-reduced-motion: reduce) {
    * {
      transition: none !important;
    }
  }
}

@layer compositions {
  .column {
    width: min(var(--measure), 100% - 2 * var(--gutter));
    margin-inline: auto;
  }
  body > main {
    flex: 1;
    padding-block: var(--s8) var(--s12);
  }
  .stack > * + * {
    margin-block-start: var(--s6);
  }
}

@layer components {
  .skip {
    position: absolute;
    inset-inline-start: var(--s2);
    inset-block-start: var(--s2);
    padding: var(--s2) var(--s3);
    background: var(--paper);
  }
  .skip:not(:focus) {
    clip-path: inset(50%);
    width: 1px;
    height: 1px;
    overflow: hidden;
  }
  .site-name {
    padding-block-start: max(var(--s4), env(safe-area-inset-top));
    color: var(--muted);
    font-size: var(--small);
    font-weight: 700;
    letter-spacing: 0.04em;
  }
  form {
    display: grid;
    gap: var(--s4);
  }
  label {
    display: block;
    font-weight: 700;
    margin-block-end: var(--s2);
  }
  input {
    width: 100%;
    min-height: var(--target);
    padding: var(--s2) var(--s3);
    border: 1.5px solid var(--line);
    border-radius: 0;
    background: var(--paper);
    color: var(--ink);
    font: inherit;
  }
  input[readonly] {
    border-style: dashed;
    color: var(--muted);
  }
  button {
    justify-self: start;
    min-height: var(--target);
    padding: var(--s2) var(--s6);
    border: 1.5px solid var(--accent);
    background: var(--accent);
    color: var(--on-accent);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
  }
  .notice {
    padding-inline-start: var(--s3);
    border-inline-start: 4px solid var(--danger);
  }
  .muted {
    color: var(--muted);
  }
  /* The passkey island: invisible until its script runs, its space kept; gone where the browser lacks WebAuthn. */
  tl-passkey {
    display: grid;
    gap: var(--s4);
  }
  tl-passkey:not(:defined) {
    visibility: hidden;
  }
  tl-passkey[hidden] {
    display: none;
  }
  .qr {
    display: block;
    width: min(16rem, 100%);
    height: auto;
  }
  .secret {
    font-family: ui-monospace, monospace;
    letter-spacing: 0.08em;
  }
  @media (forced-colors: active) {
    button,
    input {
      border: 1px solid ButtonText;
    }
  }
}