/* Test Area — Tardilab theme.
 * Palette sampled from inputs/art/tardilab/ (median of the parchment corners, the darkest 2.5%
 * of ink strokes, the vermilion of "lab"). One accent only: vermilion. */

@font-face {
  font-family: "Kalam";
  src: url("/fonts/kalam-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Kalam";
  src: url("/fonts/kalam-latin-700-normal.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

:root {
  color-scheme: light;
  /* colour */
  --paper: #e5d0b2;          /* parchment, sampled */
  --paper-shade: #d8c09c;
  --paper-raised: #f3e8d4;   /* a card: lighter sheet laid on the parchment */
  --paper-sunken: #eadbc2;
  --ink: #2f2d26;            /* sumi ink, sampled */
  --ink-soft: #57524a;
  --ink-faint: rgb(47 45 38 / 0.16);
  --ink-wash: rgb(47 45 38 / 0.07);
  --vermilion: #a84e2d;      /* the one accent, sampled */
  --vermilion-deep: #8a3c20;
  --vermilion-wash: rgb(168 78 45 / 0.12);
  --on-accent: #fbf3e6;
  --paper-glass: rgb(229 208 178 / 0.92);  /* --paper, translucent, for the sticky bar */
  /* type */
  --font-brush: "Kalam", "Segoe Print", "Bradley Hand", cursive;
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --text-xs: 0.78rem;
  --text-sm: 0.9rem;
  --text-md: 1rem;
  --text-lg: 1.25rem;
  --text-xl: 1.7rem;
  --text-2xl: 2.4rem;
  /* space */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  /* shape: brush-drawn, never perfectly round */
  --stroke: 2.5px;
  --stroke-thin: 1.5px;
  --radius-brush: 18px 14px 20px 12px / 14px 20px 12px 18px;
  --radius-soft: 10px 8px 11px 7px / 8px 11px 7px 10px;
  --shadow-ink: 4px 5px 0 var(--ink-faint);
  --shadow-ink-lift: 6px 8px 0 var(--ink-faint);
  --content-width: 1080px;
  --login-width: 1560px;     /* the login splits in two halves: it may use a large screen */
  --painting-height: max(520px, calc(100vh - 2 * var(--space-5)));
  --painting-focus: 22% 0%;  /* x keeps the sign and the mascot when the sides go; y keeps the sign's bar */
  /* the paper grain: an SVG turbulence, data-URI so the CSP stays 'self' */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .28 0 0 0 0 .18 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

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

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: 1.5;
  color: var(--ink);
  background-color: var(--paper);
  background-image: var(--grain),
    radial-gradient(ellipse at 20% 0%, rgb(255 248 235 / 0.55), transparent 60%),
    radial-gradient(ellipse at 100% 100%, rgb(160 120 70 / 0.16), transparent 55%);
}

h1, h2, h3 { font-family: var(--font-brush); font-weight: 700; line-height: 1.15; margin: 0; }
h1 { font-size: var(--text-2xl); }
h2 { font-size: var(--text-xl); }
h3 { font-size: var(--text-lg); }
p { margin: 0; }
a { color: var(--vermilion-deep); }
code, .mono { font-family: var(--font-mono); font-size: 0.92em; }

/* The art is "lifted" (tools/build-art.py): its parchment is transparent, so the ink sits on our paper. */
.art { display: block; height: auto; user-select: none; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* ------------------------------------------------------------------ controls */

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

.field {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  background: var(--paper-sunken);
  border: var(--stroke-thin) solid var(--ink-soft);
  border-radius: var(--radius-soft);
  min-height: 44px;
}
.field:focus-visible { outline: var(--stroke) solid var(--vermilion); outline-offset: 1px; }
.field.mono { letter-spacing: 0.04em; }

.button {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 44px;
  padding: var(--space-2) var(--space-4);
  font-family: var(--font-brush); font-weight: 700; font-size: var(--text-md);
  color: var(--on-accent);
  background: var(--vermilion);
  border: var(--stroke) solid var(--ink);
  border-radius: var(--radius-soft);
  box-shadow: 2px 3px 0 var(--ink);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: transform 80ms ease, box-shadow 80ms ease, background 120ms ease;
}
.button:hover { background: var(--vermilion-deep); }
.button:active { transform: translate(2px, 3px); box-shadow: 0 0 0 var(--ink); }
.button:focus-visible { outline: var(--stroke) solid var(--ink); outline-offset: 3px; }
.button[disabled] { opacity: 0.55; cursor: progress; }
.button.quiet { color: var(--ink); background: var(--paper-raised); }
.button.quiet:hover { background: var(--paper-sunken); }
.button.danger { color: var(--vermilion-deep); background: transparent; border-color: var(--vermilion-deep); box-shadow: none; }
.button.danger:hover { background: var(--vermilion-wash); }
.button.small { min-height: 36px; padding: var(--space-1) var(--space-3); font-size: var(--text-sm); }

.error { color: var(--vermilion-deep); font-size: var(--text-sm); min-height: 1.4em; }
.hint { color: var(--ink-soft); font-size: var(--text-sm); }

/* A switch: ink track, vermilion when on. */
.switch { position: relative; display: inline-flex; align-items: center; gap: var(--space-3); cursor: pointer; min-height: 40px; }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch .track {
  flex: none; width: 46px; height: 26px; border: var(--stroke) solid var(--ink); border-radius: 14px 12px 14px 12px;
  background: var(--paper-sunken); position: relative; transition: background 120ms ease;
}
.switch .track::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 17px; height: 17px; border-radius: 50%;
  background: var(--ink); transition: transform 140ms ease;
}
.switch input:checked + .track { background: var(--vermilion); }
.switch input:checked + .track::after { transform: translateX(20px); background: var(--on-accent); box-shadow: 0 0 0 2px var(--ink); }
.switch input:focus-visible + .track { outline: var(--stroke) solid var(--vermilion); outline-offset: 3px; }
.switch input:disabled + .track { opacity: 0.6; }
.switch input:disabled ~ * { color: var(--ink-soft); }
.switch.locked { cursor: default; }

/* The ink-outlined paper card — the one container shape of the app. */
.sheet {
  background: var(--paper-raised);
  background-image: var(--grain);
  border: var(--stroke) solid var(--ink);
  border-radius: var(--radius-brush);
  box-shadow: var(--shadow-ink);
}

/* ------------------------------------------------------------------ login */

/* Login (AGREED 2026-10-05, second ruling): the LEFT half holds the wordmark, the title, the hint
 * and the cards; the RIGHT half is the painting as a full-height panel. On a phone: brand, cards,
 * painting. */
.login {
  max-width: var(--login-width);
  margin: 0 auto;
  padding: var(--space-6) var(--space-4) var(--space-7);
  display: grid;
  gap: var(--space-6);
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "brand" "cards" "art";
}
.login-brand { grid-area: brand; display: grid; justify-items: center; gap: var(--space-3); text-align: center; }
.login-cards { grid-area: cards; align-self: start; }
.login-art { grid-area: art; }
.login-wordmark { width: min(480px, 88vw); }
.login-title { display: flex; align-items: center; gap: var(--space-3); }
.seal {
  display: inline-grid; place-items: center;
  font-family: var(--font-brush); font-weight: 700; font-size: var(--text-sm); line-height: 1.05;
  color: var(--vermilion); border: var(--stroke) solid var(--vermilion); border-radius: 4px 6px 3px 5px;
  padding: 2px 6px; transform: rotate(-4deg);
}
.login-lead { color: var(--ink-soft); max-width: 34ch; }

.cards {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--space-5);
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
.card { padding: var(--space-5) var(--space-4) var(--space-4); display: grid; gap: var(--space-3); position: relative; }
.card:nth-child(3n+1) { transform: rotate(-0.6deg); }
.card:nth-child(3n+2) { transform: rotate(0.5deg); }
.card:focus-within { box-shadow: var(--shadow-ink-lift); }
.card-head { display: flex; align-items: center; gap: var(--space-3); }
.monogram {
  flex: none; display: grid; place-items: center; width: 52px; height: 52px;
  font-family: var(--font-brush); font-weight: 700; font-size: var(--text-xl); color: var(--ink);
  border: 3px solid var(--ink); border-radius: 52% 48% 50% 46% / 48% 52% 46% 54%;
  border-right-color: transparent; transform: rotate(-20deg);
}
.monogram span { transform: rotate(20deg); }
.card-name { font-size: var(--text-xl); overflow-wrap: anywhere; }
.card form { display: grid; gap: var(--space-2); }
.card-row { display: flex; gap: var(--space-2); }
.card-row .field { flex: 1; min-width: 0; }

/* The painting is cropped by the panel, never stretched: object-position keeps the hanging sign
 * (left) and the mascot at his desk (centre) when the panel is narrower than the square sheet. */
.login-art figure {
  margin: 0; padding: var(--space-3); transform: rotate(0.6deg);
  display: flex; flex-direction: column;
}
.login-art img {
  display: block; width: 100%; aspect-ratio: 4 / 3; height: auto;
  object-fit: cover; object-position: var(--painting-focus);
  border-radius: var(--radius-soft);
}
.login-art figcaption { font-family: var(--font-brush); color: var(--ink-soft); text-align: center; padding-top: var(--space-2); }

@media (min-width: 900px) {
  .login {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    grid-template-areas: "brand art" "cards art";
    column-gap: var(--space-7);
    row-gap: var(--space-6);
    padding-top: var(--space-5);
    padding-bottom: var(--space-5);  /* with the panel at 100vh minus both paddings: no scrollbar */
    min-height: 100vh;
  }
  .login-brand { justify-items: start; text-align: left; }
  /* Full height of the screen beside the left column, and it stays there while many cards scroll. */
  .login-art { align-self: start; position: sticky; top: var(--space-5); height: var(--painting-height); }
  .login-art figure { height: 100%; }
  .login-art img { flex: 1; min-height: 0; aspect-ratio: auto; height: 100%; }
}
}
}

/* ------------------------------------------------------------------ app shell (home, settings) */

.topbar {
  position: sticky; top: 0; z-index: 5;
  background: var(--paper-glass);
  backdrop-filter: blur(4px);
  border-bottom: var(--stroke) solid var(--ink);
}
.topbar-inner {
  max-width: var(--content-width); margin: 0 auto; padding: var(--space-2) var(--space-4);
  display: flex; align-items: center; gap: var(--space-3);
}
.brand { display: flex; align-items: center; gap: var(--space-2); text-decoration: none; color: var(--ink); }
.brand img { width: 40px; }
.brand-name { font-family: var(--font-brush); font-weight: 700; font-size: var(--text-lg); white-space: nowrap; }
.brand-name em { font-style: normal; color: var(--vermilion); }
.topbar nav { margin-left: auto; display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; justify-content: flex-end; }
.who { font-family: var(--font-brush); color: var(--ink-soft); margin-right: var(--space-2); }

.shell { max-width: var(--content-width); margin: 0 auto; padding: var(--space-5) var(--space-4) var(--space-7); display: grid; gap: var(--space-6); }

.hero { display: flex; align-items: center; gap: var(--space-4); }
.hero img { width: 110px; flex: none; }
.hero p { color: var(--ink-soft); }

/* home: the page list */
.pages { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-5); grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.page-card {
  display: grid; grid-template-columns: 76px 1fr; gap: var(--space-3); align-items: center;
  padding: var(--space-4); color: var(--ink); text-decoration: none;
  transition: transform 120ms ease, box-shadow 120ms ease;
}
.page-card:hover, .page-card:focus-visible { transform: translate(-1px, -2px) rotate(-0.4deg); box-shadow: var(--shadow-ink-lift); outline: none; }
.page-card:focus-visible { border-color: var(--vermilion); }
.page-card img { width: 76px; }
.page-card h3 { overflow-wrap: anywhere; }
.page-card .meta { font-size: var(--text-xs); color: var(--ink-soft); }
.page-card .go { font-family: var(--font-brush); font-weight: 700; color: var(--vermilion); }

.empty { display: grid; justify-items: center; text-align: center; gap: var(--space-3); padding: var(--space-6) var(--space-4); }
.empty img { width: 220px; }
.empty p { color: var(--ink-soft); max-width: 42ch; }

/* settings */
.section { display: grid; gap: var(--space-4); }
.section-head { display: flex; align-items: baseline; gap: var(--space-3); flex-wrap: wrap; border-bottom: var(--stroke-thin) dashed var(--ink-soft); padding-bottom: var(--space-2); }
.section-head p { color: var(--ink-soft); font-size: var(--text-sm); }
.panel { padding: var(--space-4); display: grid; gap: var(--space-3); }
.form-grid { display: grid; gap: var(--space-3); grid-template-columns: 1fr; align-items: end; }
.form-grid label { display: grid; gap: var(--space-1); font-size: var(--text-sm); font-weight: 600; }
.token-row { display: flex; gap: var(--space-2); }
.token-row .field { flex: 1; min-width: 0; }
@media (min-width: 760px) {
  .form-grid.users { grid-template-columns: 1.2fr 1.6fr 0.8fr auto; }
  .form-grid.keys { grid-template-columns: 1fr auto; }
}

.once {
  padding: var(--space-3) var(--space-4); display: grid; gap: var(--space-2);
  background: var(--vermilion-wash); border: var(--stroke) dashed var(--vermilion); border-radius: var(--radius-soft);
}
.once strong { font-family: var(--font-brush); font-size: var(--text-lg); }
.confirm-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; padding-top: var(--space-1); }
.once .secret { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; }
.once code { background: var(--paper-raised); padding: var(--space-1) var(--space-2); border: var(--stroke-thin) solid var(--ink-soft); border-radius: 6px; overflow-wrap: anywhere; word-break: break-all; }

.rows { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.row { padding: var(--space-3) var(--space-4); display: grid; gap: var(--space-3); }
.row-head { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.row-head .monogram { width: 40px; height: 40px; font-size: var(--text-lg); }
.row-title { font-family: var(--font-brush); font-weight: 700; font-size: var(--text-lg); overflow-wrap: anywhere; }
.row-sub { font-size: var(--text-xs); color: var(--ink-soft); overflow-wrap: anywhere; }
.row-actions { margin-left: auto; display: flex; gap: var(--space-2); flex-wrap: wrap; }
.badge {
  font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  padding: 1px 8px; border: var(--stroke-thin) solid var(--ink); border-radius: 999px;
}
.badge.admin { color: var(--on-accent); background: var(--vermilion); border-color: var(--vermilion-deep); }

details.access { border-top: var(--stroke-thin) dashed var(--ink-faint); padding-top: var(--space-2); }
details.access summary { cursor: pointer; font-weight: 600; font-size: var(--text-sm); min-height: 32px; display: flex; align-items: center; gap: var(--space-2); }
details.access summary::marker { color: var(--vermilion); }
.access-list { list-style: none; margin: var(--space-2) 0 0; padding: 0; display: grid; gap: var(--space-1); grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }

.toast {
  position: fixed; left: 50%; bottom: var(--space-5); transform: translateX(-50%);
  background: var(--ink); color: var(--paper-raised); padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-soft); font-size: var(--text-sm); box-shadow: var(--shadow-ink);
  max-width: calc(100vw - 2 * var(--space-4));
}
.toast.bad { background: var(--vermilion-deep); }

/* refusal page (server-rendered for /p/ URLs) */
.refusal { max-width: 520px; margin: 0 auto; padding: var(--space-7) var(--space-4); display: grid; justify-items: center; gap: var(--space-4); text-align: center; }
.refusal-art { width: 220px; }
.refusal p { color: var(--ink-soft); }

@media (max-width: 520px) {
  h1 { font-size: var(--text-xl); }
  .hero img { width: 76px; }
  .who { display: none; }
  .brand-name { font-size: var(--text-md); }
  .brand-sub { display: none; }
  .topbar nav { flex-wrap: nowrap; }
  .card:nth-child(n) { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

.error:empty, .once-slot:empty, .confirm-slot:empty { display: none; }