/* pyme: direction A "Talonario": shared tokens, base, chrome and components.
   Every class and token carries the prefix `py-` (UI-355).
   Strict-CSP friendly: no inline styles anywhere; motion via classes. */

/* ---------- Fonts (self-hosted, OFL) ---------- */
@font-face {
  font-family: "Recursive";
  src: url("../vendor/recursive-5.3.0/recursive-latin-full-normal.bc032504f642.woff2") format("woff2");
  font-weight: 300 1000;
  font-style: oblique 0deg 15deg;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F,
    U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Recursive";
  src: url("../vendor/recursive-5.3.0/recursive-latin-ext-full-normal.e06027efdcdb.woff2") format("woff2");
  font-weight: 300 1000;
  font-style: oblique 0deg 15deg;
  font-display: swap;
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
    U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Archivo";
  src: url("../vendor/archivo-5.3.0/archivo-latin-wdth-normal.de2f1fe81758.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  color-scheme: light dark;

  /* Paper and ink. Dark mode is "carbon paper": blue-black sheet, light ink. */
  --py-desk:      light-dark(oklch(0.925 0.014 250), oklch(0.165 0.022 262));
  --py-paper:     light-dark(oklch(0.985 0.004 250), oklch(0.232 0.03 262));
  --py-paper-2:   light-dark(oklch(0.962 0.008 250), oklch(0.27 0.032 262));
  --py-ink:       light-dark(oklch(0.27 0.045 262), oklch(0.93 0.012 250));
  --py-ink-soft:  light-dark(oklch(0.45 0.035 262), oklch(0.78 0.02 250));
  --py-ink-faint: light-dark(oklch(0.58 0.025 262), oklch(0.66 0.02 250));
  --py-print:     light-dark(oklch(0.43 0.12 258), oklch(0.80 0.08 250)); /* the form's pre-printed ink */
  --py-rule:      light-dark(oklch(0.84 0.045 240), oklch(0.40 0.04 250));
  --py-ruling:    light-dark(oklch(0.905 0.025 242), oklch(0.31 0.03 255));

  /* The talonario's printed colors */
  --py-folio:     light-dark(oklch(0.53 0.20 25), oklch(0.73 0.15 25));
  --py-stamp:     light-dark(oklch(0.47 0.16 300), oklch(0.77 0.12 300));
  --py-canary:    light-dark(oklch(0.955 0.065 98), oklch(0.315 0.05 95));
  --py-canary-ink:light-dark(oklch(0.38 0.06 85), oklch(0.90 0.06 95));
  --py-rosa:      light-dark(oklch(0.955 0.03 355), oklch(0.30 0.045 355));
  --py-verde:     light-dark(oklch(0.955 0.035 160), oklch(0.29 0.04 160));

  /* States, always paired with text or an icon */
  --py-ok:        light-dark(oklch(0.47 0.11 160), oklch(0.80 0.11 160));
  --py-warn:      light-dark(oklch(0.50 0.12 70), oklch(0.83 0.12 80));
  --py-danger:    light-dark(oklch(0.48 0.17 32), oklch(0.76 0.14 35));
  --py-danger-bg: light-dark(oklch(0.955 0.03 30), oklch(0.30 0.06 30));
  --py-focus:     light-dark(oklch(0.52 0.18 255), oklch(0.78 0.13 250));

  /* Type: 1.25 scale from 16 px */
  --py-f-ui: "Recursive", system-ui, sans-serif;
  --py-f-display: "Archivo", "Recursive", system-ui, sans-serif;
  --py-s--2: 0.64rem;
  --py-s--1: 0.8rem;
  --py-s-0: 1rem;
  --py-s-1: 1.25rem;
  --py-s-2: 1.5625rem;
  --py-s-3: 1.953rem;
  --py-s-4: 2.441rem;
  --py-s-5: 3.052rem;
  --py-s-6: 3.815rem;

  /* Recursive axes, inherited as variables and resolved per element */
  --py-mono: 0;
  --py-casl: 0;

  /* Space: 4 px grid */
  --py-1: 0.25rem; --py-2: 0.5rem; --py-3: 0.75rem; --py-4: 1rem;
  --py-5: 1.5rem;  --py-6: 2rem;   --py-7: 3rem;    --py-8: 4rem;

  /* Radii by hierarchy, not one radius for everything */
  --py-r-sheet: 3px;
  --py-r-ctl: 5px;
  --py-r-tab: 10px;
  --py-r-pill: 999px;

  --py-shadow-sheet: 0 1px 0 var(--py-rule), 0 18px 32px -24px light-dark(oklch(0.3 0.05 262 / 0.45), oklch(0 0 0 / 0.7));
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { font-variation-settings: "MONO" var(--py-mono), "CASL" var(--py-casl), "CRSV" 0.5; }
[hidden] { display: none !important; } /* UI-254 */

html { font-family: var(--py-f-ui); font-size: 100%; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--py-desk);
  color: var(--py-ink);
  font-size: var(--py-s-0);
  line-height: 1.45;
  font-weight: 420;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4 { margin: 0; line-height: 1.15; text-wrap: balance; font-weight: 700; }
p { margin: 0; text-wrap: pretty; max-width: 68ch; }
a { color: inherit; text-decoration-color: var(--py-rule); text-underline-offset: 0.2em; }
a:hover { text-decoration-color: currentColor; }
button, input, select, textarea { font: inherit; color: inherit; }
img, svg { display: block; }
:focus-visible { outline: 3px solid var(--py-focus); outline-offset: 2px; border-radius: 2px; }
::selection { background: color-mix(in oklch, var(--py-focus) 28%, transparent); }

.py-num { font-variant-numeric: tabular-nums lining-nums; }
.py-casual { --py-casl: 1; }
.py-mono { --py-mono: 1; }
.py-display { font-family: var(--py-f-display); }
.py-soft { color: var(--py-ink-soft); }
.py-faint { color: var(--py-ink-faint); }
.py-sr {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ---------- App chrome: the book with index tabs ---------- */
.py-app {
  min-height: 100dvh;
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr);
  align-content: start; /* UI-259 */
}
.py-tabs {
  position: sticky; top: 0; align-self: start;
  height: 100dvh;
  display: flex; flex-direction: column; gap: var(--py-1);
  padding: var(--py-4) 0 var(--py-4) var(--py-2);
}
.py-brand {
  display: grid; place-items: center; gap: 2px;
  padding: var(--py-2) var(--py-1) var(--py-4);
  margin-inline-end: var(--py-2);
  text-decoration: none;
  font-family: var(--py-f-display); font-stretch: 70%; font-weight: 800;
  font-size: var(--py-s-1); letter-spacing: 0.01em; line-height: 1;
}
.py-brand small { font-family: var(--py-f-ui); font-stretch: 100%; font-weight: 500; font-size: var(--py-s--2); color: var(--py-ink-soft); text-align: center; line-height: 1.2; }
.py-tab {
  position: relative;
  display: grid; justify-items: start; gap: 2px;
  padding: var(--py-3) var(--py-3) var(--py-3) var(--py-3);
  border-radius: var(--py-r-tab) 0 0 var(--py-r-tab);
  background: color-mix(in oklch, var(--py-paper) 55%, var(--py-desk));
  color: var(--py-ink-soft);
  text-decoration: none;
  font-weight: 560; font-size: var(--py-s--1);
  translate: 0.4rem 0;
  transition: translate 160ms ease, background-color 160ms ease;
}
.py-tab::before { /* the tab's paper color: which form this module is */
  content: ""; width: 1.25rem; height: 4px; border-radius: 2px; background: var(--py-tab-paper, var(--py-rule));
}
.py-tab:hover { translate: 0.15rem 0; color: var(--py-ink); }
.py-tab[aria-current="page"] {
  translate: 0 0;
  background: var(--py-paper);
  color: var(--py-ink);
  font-weight: 700;
}
.py-tab--canary { --py-tab-paper: oklch(0.86 0.13 98); }
.py-tab--rosa   { --py-tab-paper: oklch(0.80 0.08 355); }
.py-tab--verde  { --py-tab-paper: oklch(0.78 0.09 160); }
.py-tab--folio  { --py-tab-paper: var(--py-folio); }
.py-tab--stamp  { --py-tab-paper: var(--py-stamp); }
.py-tabs-spacer { flex: 1; }
.py-who { margin-inline-end: var(--py-2); padding: var(--py-2); font-size: var(--py-s--1); color: var(--py-ink-soft); line-height: 1.3; }
.py-who strong { display: block; color: var(--py-ink); }
/* The branch under the business's name, the Equipo tab, and the signed-in name as the button that opens
   where the account works (pass 3) */
.py-tab--print { --py-tab-paper: var(--py-print); }
.py-brand .py-brand-branch { color: var(--py-ink); font-weight: 650; }
/* The brand's mark, the icon drawn inline (web/icons/mark.html, docs/design.md *The icon*). Its
   colors are icono.svg's in both schemes: the icon carries its own background, so they are fixed
   values, not the sheet's light-dark tokens. Beside the menu's name it is still. On the cover,
   the sign-in pages' frame, it enters (`py-mark--enters`): the tool stands on white, the copy drops
   onto the spike, then the original, the original is stamped, and the sun comes up behind turning
   counter-clockwise; then the sun keeps turning, slowly (`py-mark--turns`). The resting state is
   the drawing: the entrance animates each part only from its start (`backwards`) and the turn
   ends on a whole turn, so reduced motion, which turns animations off, shows the icon whole.
   design/icon-motion.html tuned the timings. */
.py-mark {
  --py-mark-speed: 1;
  --py-mark-drop: 14px;
  --py-mark-n1-at: 0.25s;   --py-mark-n1-for: 0.5s;
  --py-mark-n2-at: 0.8s;    --py-mark-n2-for: 0.5s;
  --py-mark-stamp-at: 1.5s; --py-mark-stamp-for: 0.28s; --py-mark-stamp-zoom: 2.2;
  --py-mark-sun-at: 1.95s;  --py-mark-sun-for: 1.2s; --py-mark-sun-turn: 120deg; --py-mark-sun-from: 0.4;
  --py-mark-turn-for: 40s;
  --py-mark-note-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --py-mark-stamp-ease: cubic-bezier(0.55, 0, 0.85, 0.35);
  --py-mark-sun-ease: cubic-bezier(0.15, 0.6, 0.25, 1);
  display: block; width: 2.5rem; height: 2.5rem;
}
.py-brand .py-mark { margin-block-end: var(--py-1); }
.py-mark-paper, .py-mark-original { fill: #f8fafd; }
.py-mark-mango { fill: #fea83b; }
.py-mark-rays { fill: #fbde46; transform-box: view-box; transform-origin: 16px 15px; }
.py-mark-ink { fill: #1a263c; }
.py-mark-copy { fill: #fbf1c0; }
.py-mark-copy, .py-mark-original { stroke: #1a263c; stroke-width: 1.2; }
.py-mark-folio { fill: #c51d28; }
.py-mark-stamp { transform-box: fill-box; transform-origin: center; }
.py-mark-stamp rect { fill: none; stroke: #6a3ea5; stroke-width: 1.1; }
.py-mark--enters :is(.py-mark-n1, .py-mark-n2, .py-mark-stamp, .py-mark-mango, .py-mark-rays) { animation-fill-mode: backwards; }
.py-mark--enters :is(.py-mark-n1, .py-mark-n2) { animation-name: py-mark-drop; animation-timing-function: var(--py-mark-note-ease); }
.py-mark--enters .py-mark-n1 {
  animation-delay: calc(var(--py-mark-n1-at) / var(--py-mark-speed));
  animation-duration: calc(var(--py-mark-n1-for) / var(--py-mark-speed));
}
.py-mark--enters .py-mark-n2 {
  animation-delay: calc(var(--py-mark-n2-at) / var(--py-mark-speed));
  animation-duration: calc(var(--py-mark-n2-for) / var(--py-mark-speed));
}
.py-mark--enters .py-mark-stamp {
  animation-name: py-mark-stamp; animation-timing-function: var(--py-mark-stamp-ease);
  animation-delay: calc(var(--py-mark-stamp-at) / var(--py-mark-speed));
  animation-duration: calc(var(--py-mark-stamp-for) / var(--py-mark-speed));
}
.py-mark--enters :is(.py-mark-mango, .py-mark-rays) {
  animation-timing-function: var(--py-mark-sun-ease);
  animation-delay: calc(var(--py-mark-sun-at) / var(--py-mark-speed));
  animation-duration: calc(var(--py-mark-sun-for) / var(--py-mark-speed));
}
.py-mark--enters .py-mark-mango { animation-name: py-mark-mango; }
.py-mark--enters .py-mark-rays { animation-name: py-mark-sun; }
.py-mark--enters.py-mark--turns .py-mark-rays {
  animation-name: py-mark-sun, py-mark-turn;
  animation-timing-function: var(--py-mark-sun-ease), linear;
  animation-delay: calc(var(--py-mark-sun-at) / var(--py-mark-speed)), calc((var(--py-mark-sun-at) + var(--py-mark-sun-for)) / var(--py-mark-speed));
  animation-duration: calc(var(--py-mark-sun-for) / var(--py-mark-speed)), var(--py-mark-turn-for);
  animation-iteration-count: 1, infinite;
  animation-fill-mode: backwards, none;
}
@keyframes py-mark-drop { from { translate: 0 calc(-1 * var(--py-mark-drop)); opacity: 0; } 30% { opacity: 1; } }
@keyframes py-mark-stamp { from { scale: var(--py-mark-stamp-zoom); opacity: 0; } 40% { opacity: 0.9; } }
@keyframes py-mark-mango { from { opacity: 0; } 50% { opacity: 1; } }
@keyframes py-mark-sun { from { rotate: var(--py-mark-sun-turn); scale: var(--py-mark-sun-from); opacity: 0; } 50% { opacity: 1; } }
@keyframes py-mark-turn { to { rotate: -1turn; } }
.py-who--menu {
  display: block; width: calc(100% - var(--py-2)); text-align: start; cursor: pointer;
  border: 0; border-radius: var(--py-r-ctl); background: transparent; font: inherit; font-size: var(--py-s--1);
  anchor-name: --py-who;
}
.py-who--menu:hover { background: color-mix(in oklch, var(--py-ink) 7%, transparent); }
.py-who--menu::after { content: " ▾"; color: var(--py-ink-faint); }
.py-place { position-anchor: --py-who; position-area: inline-end span-block-start; margin-inline: var(--py-2); min-width: 16rem; }
.py-place h2 { font-size: var(--py-s-0); margin-bottom: var(--py-2); }
.py-place-biz { font-weight: 700; font-size: var(--py-s--1); color: var(--py-ink-soft); }
.py-place-list { list-style: none; margin: var(--py-1) 0 var(--py-3); padding: 0; display: grid; gap: 2px; }
.py-place-list a { display: flex; justify-content: space-between; align-items: center; gap: var(--py-3); min-height: 2.75rem; padding: 0 var(--py-3); border-radius: var(--py-r-ctl); text-decoration: none; }
.py-place-list a:hover { background: color-mix(in oklch, var(--py-ink) 7%, transparent); }
.py-place-list a[aria-current="page"] { font-weight: 700; }
.py-place .py-hint { margin-bottom: var(--py-3); }
.py-place-out { border-top: 1px solid var(--py-ruling); padding-top: var(--py-3); }

.py-page {
  min-width: 0;
  background: var(--py-paper);
  min-height: 100dvh;
  padding: var(--py-5) clamp(var(--py-4), 3vw, var(--py-7)) var(--py-8);
  display: grid; align-content: start; gap: var(--py-5); /* UI-259 */
}

@media (max-width: 47.99rem) {
  .py-app { grid-template-columns: minmax(0, 1fr); }
  .py-tabs {
    position: fixed; inset: auto 0 0 0; z-index: 20;
    height: auto; flex-direction: row; gap: 0;
    padding: 0 var(--py-1) env(safe-area-inset-bottom);
    background: var(--py-desk);
    border-top: 1px solid var(--py-rule);
  }
  .py-brand, .py-who, .py-tabs-spacer { display: none; }
  .py-tab {
    flex: 1; justify-items: center; text-align: center;
    min-height: 3.25rem; padding: var(--py-2) 0;
    border-radius: 0 0 var(--py-r-tab) var(--py-r-tab);
    translate: 0 -0.2rem; font-size: var(--py-s--2);
  }
  .py-tab:hover { translate: 0 -0.1rem; }
  .py-tab[aria-current="page"] { translate: 0 0; }
  .py-page { padding-bottom: 6rem; }
  .py-btn .py-kbd, .py-head .py-kbd { display: none; }
}

/* Short screens (a 1366×768 laptop, a tablet on its side): less air above the page */
@media (max-height: 50rem) and (min-width: 48rem) { .py-page { padding-top: var(--py-4); gap: var(--py-4); } }

/* ---------- Page header ---------- */
.py-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--py-2) var(--py-5); }
.py-title {
  font-family: var(--py-f-display); font-stretch: 112%; font-weight: 750;
  font-size: var(--py-s-3); letter-spacing: -0.01em;
}
.py-head-meta { color: var(--py-ink-soft); font-size: var(--py-s--1); display: flex; flex-wrap: wrap; gap: var(--py-1) var(--py-4); }
.py-head-end { margin-inline-start: auto; display: flex; flex-wrap: wrap; align-items: center; gap: var(--py-3); }

/* ---------- Folio, stamp, perforation ---------- */
.py-folio {
  display: inline-flex; align-items: baseline; gap: 0.3em;
  color: var(--py-folio);
  font-family: var(--py-f-display); font-stretch: 66%; font-weight: 700;
  font-size: var(--py-s-3); letter-spacing: 0.04em; line-height: 1;
}
.py-folio small { font-size: 0.55em; font-stretch: 100%; letter-spacing: 0; font-weight: 600; }

.py-stamp {
  display: inline-grid; place-items: center;
  padding: 0.2em 0.6em 0.15em;
  border: 3px double var(--py-stamp);
  border-radius: 6px;
  color: var(--py-stamp);
  font-family: var(--py-f-display); font-stretch: 118%; font-weight: 850;
  font-size: var(--py-s--1); letter-spacing: 0.12em; text-transform: uppercase; /* the real stamp is uppercase */
  line-height: 1.1;
  rotate: -6deg;
  mix-blend-mode: multiply;
}
/* On the dark sheet, multiply would sink the stamp's light ink into the paper. */
@media (prefers-color-scheme: dark) { .py-stamp { mix-blend-mode: normal; } }
.py-stamp--pending { --py-stamp: var(--py-warn); border-style: dashed; }
.py-stamp-in { animation: py-thump 420ms cubic-bezier(.2,.9,.25,1.25) both; }
@keyframes py-thump { from { scale: 1.6; opacity: 0; rotate: -14deg; } 70% { opacity: 1; } to { scale: 1; rotate: -6deg; } }

.py-perf { /* the perforated edge where the original tears from the book */
  position: relative; height: 0; margin: var(--py-2) 0;
  border-top: 2px dashed var(--py-rule);
}
.py-perf::before, .py-perf::after {
  content: ""; position: absolute; top: -0.55rem; width: 1rem; height: 1rem; border-radius: 50%;
  background: var(--py-desk);
}
.py-perf::before { left: -0.5rem; }
.py-perf::after { right: -0.5rem; }

/* ---------- Sheets ---------- */
.py-sheet {
  background: var(--py-paper);
  border-radius: var(--py-r-sheet);
  box-shadow: var(--py-shadow-sheet);
  padding: var(--py-5);
}
.py-sheet--canary { background: var(--py-canary); }
.py-sheet--rosa   { background: var(--py-rosa); }
.py-sheet--verde  { background: var(--py-verde); }

/* ---------- Buttons ---------- */
.py-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--py-2);
  min-height: 2.75rem; padding: 0 var(--py-4);
  border: 2px solid var(--py-ink); border-radius: var(--py-r-ctl);
  background: transparent; color: var(--py-ink);
  font-weight: 650; text-decoration: none; cursor: pointer;
  transition: background-color 120ms ease, translate 80ms ease;
}
.py-btn:hover { background: color-mix(in oklch, var(--py-ink) 8%, transparent); }
.py-btn:active { translate: 0 1px; }
.py-btn--ink { background: var(--py-ink); color: var(--py-paper); }
.py-btn--ink:hover { background: color-mix(in oklch, var(--py-ink) 86%, var(--py-paper)); }
.py-btn--quiet { border-color: transparent; padding-inline: var(--py-2); }
.py-btn--small { min-height: 2rem; padding: 0 var(--py-3); font-size: var(--py-s--1); border-width: 1.5px; }
.py-btn[aria-disabled="true"], .py-btn:disabled { opacity: 0.55; cursor: progress; }
.py-btn .py-kbd { border-color: currentColor; color: inherit; opacity: 0.8; }

.py-kbd {
  display: inline-grid; place-items: center; min-width: 1.6em; height: 1.6em; padding: 0 0.35em;
  border: 1px solid var(--py-rule); border-bottom-width: 2px; border-radius: 4px;
  font-size: 0.78em; font-weight: 650; line-height: 1; color: var(--py-ink-soft);
}

/* ---------- Fields ---------- */
.py-field { display: grid; gap: var(--py-1); }
.py-label { font-size: var(--py-s--1); font-weight: 600; color: var(--py-ink-soft); }
.py-input {
  width: 100%; min-height: 2.75rem; padding: var(--py-2) var(--py-1);
  border: 0; border-bottom: 2px solid var(--py-rule); border-radius: 0;
  background: transparent;
}
.py-input:hover { border-bottom-color: var(--py-ink-soft); }
.py-input:focus-visible { outline-offset: 0; border-bottom-color: var(--py-ink); }
.py-input[aria-invalid="true"] { border-bottom-color: var(--py-danger); }
.py-hint { font-size: var(--py-s--1); color: var(--py-ink-soft); }
.py-error-text { font-size: var(--py-s--1); color: var(--py-danger); font-weight: 600; display: flex; gap: var(--py-1); align-items: baseline; }

.py-switch { display: inline-flex; align-items: center; gap: var(--py-2); cursor: pointer; min-height: 2.75rem; }
.py-switch input { appearance: none; width: 2.6rem; height: 1.5rem; border-radius: var(--py-r-pill); background: var(--py-rule); position: relative; margin: 0; cursor: pointer; transition: background-color 140ms; flex: none; }
.py-switch input::after { content: ""; position: absolute; inset: 3px auto 3px 3px; width: 1.1rem; border-radius: 50%; background: var(--py-paper); transition: translate 140ms ease; }
.py-switch input:checked { background: var(--py-ink); }
.py-switch input:checked::after { translate: 1.1rem 0; }

/* ---------- Tags (two channels: mark + word) ---------- */
.py-tag {
  display: inline-flex; align-items: center; gap: 0.3em;
  padding: 0.1em 0.55em; border-radius: var(--py-r-pill);
  font-size: var(--py-s--1); font-weight: 600; line-height: 1.5; white-space: nowrap;
  border: 1px solid currentColor;
}
.py-tag--free   { color: var(--py-canary-ink); background: var(--py-canary); border-color: transparent; }
.py-tag--stamp  { color: var(--py-stamp); }
.py-tag--ok     { color: var(--py-ok); }
.py-tag--warn   { color: var(--py-warn); }
.py-tag--danger { color: var(--py-danger); background: var(--py-danger-bg); border-color: transparent; }
.py-tag--quiet  { color: var(--py-ink-soft); border-color: var(--py-rule); }

/* ---------- Combobox listbox (anchored under its input) ---------- */
.py-combo { position: relative; }
.py-listbox {
  margin: 0; padding: var(--py-1); list-style: none;
  background: var(--py-paper); color: var(--py-ink);
  border: 2px solid var(--py-ink); border-top-width: 0;
  border-radius: 0 0 var(--py-r-ctl) var(--py-r-ctl);
  box-shadow: 0 22px 40px -26px oklch(0.2 0.05 262 / 0.6);
  position: absolute; inset: 100% 0 auto 0; z-index: 30;
  max-height: min(22rem, 60dvh); overflow: auto;
}
.py-option {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: baseline; gap: var(--py-2) var(--py-4);
  padding: var(--py-2) var(--py-3); border-radius: 3px; cursor: pointer;
}
.py-option[aria-selected="true"] { background: var(--py-ink); color: var(--py-paper); }
.py-option[aria-selected="true"] .py-soft, .py-option[aria-selected="true"] .py-faint { color: color-mix(in oklch, var(--py-paper) 78%, var(--py-ink)); }
.py-option mark { background: none; color: inherit; text-decoration: underline 2px; text-underline-offset: 0.15em; }
.py-option--free { grid-template-columns: minmax(0, 1fr) auto; border-top: 1px dashed var(--py-rule); margin-top: var(--py-1); }
.py-listbox-keys { max-width: none; display: flex; flex-wrap: wrap; gap: var(--py-1) var(--py-4); padding: var(--py-2) var(--py-3) var(--py-1); font-size: var(--py-s--1); color: var(--py-ink-soft); border-top: 1px solid var(--py-ruling); margin-top: var(--py-1); }

/* ---------- Spinner (pending work, always next to words) ---------- */
.py-spin, .py-cap-spin { display: inline-block; inline-size: 0.9em; block-size: 0.9em; border-radius: 50%; border: 2px solid var(--py-rule); border-top-color: var(--py-ink); vertical-align: -0.1em; animation: py-spin 800ms linear infinite; margin-inline-end: 0.4em; }
@keyframes py-spin { to { rotate: 1turn; } }

/* ---------- Banner, toast ---------- */
.py-banner { /* icon, message, actions; the actions drop below the message when it would get under 12rem */
  display: flex; flex-wrap: wrap; gap: var(--py-2) var(--py-3); align-items: flex-start;
  padding: var(--py-3) var(--py-4); border-radius: var(--py-r-ctl);
  border-inline-start: 5px solid currentColor;
  background: var(--py-paper-2);
}
.py-banner--danger { color: var(--py-danger); background: var(--py-danger-bg); }
.py-banner--stamp { color: var(--py-stamp); }
.py-banner > svg { flex: none; }
.py-banner > :nth-child(2) { color: var(--py-ink); flex: 1 1 12rem; min-width: 0; }
.py-banner > :nth-child(2) strong { color: inherit; }
.py-banner strong { display: block; }
.py-banner-actions { display: flex; flex-wrap: wrap; gap: var(--py-2); margin-inline-start: auto; }

.py-toast:not(:popover-open) { display: none; }
.py-toast {
  position: fixed; inset: auto 1rem 1rem auto; margin: 0;
  max-width: min(26rem, calc(100vw - 2rem));
  display: flex; align-items: center; gap: var(--py-3);
  padding: var(--py-3) var(--py-4);
  border: 0; border-radius: var(--py-r-ctl);
  background: var(--py-ink); color: var(--py-paper);
  box-shadow: 0 18px 40px -20px oklch(0.15 0.05 262 / 0.7);
}
.py-toast .py-btn { border-color: currentColor; color: inherit; }
@media (max-width: 47.99rem) { .py-toast { inset: auto 0.75rem 4.5rem 0.75rem; } }

/* ---------- Popover sheet (shortcuts etc.) ---------- */
.py-pop {
  margin: 0; padding: var(--py-4) var(--py-5);
  border: 2px solid var(--py-ink); border-radius: var(--py-r-ctl);
  background: var(--py-paper); color: var(--py-ink);
  box-shadow: 0 24px 50px -28px oklch(0.15 0.05 262 / 0.7);
  max-width: min(30rem, calc(100vw - 2rem));
  position-area: block-end span-inline-start;
  position-try-fallbacks: flip-block, flip-inline;
  margin-block: var(--py-2);
}
.py-pop h2 { font-size: var(--py-s-1); margin-bottom: var(--py-3); }
.py-keys { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--py-2) var(--py-4); margin: 0; }
.py-keys dt { white-space: nowrap; }
.py-keys dd { margin: 0; color: var(--py-ink-soft); }
/* A popover slides in from its anchor and slides out the same way. Its closed state sits at the
   offset its entrance starts from, or it would hold still while it leaves (UI-447); `display` and
   `overlay` transition with `allow-discrete`, so it stays drawn as it goes. A screen that narrows
   `transition-property` sets `transition-behavior` beside it with the same list (UI-443). Only a
   popover: without scripts, the dashboard's list is a plain block in its `<details>`. */
.py-pop:popover-open { opacity: 1; translate: 0 0; }
.py-pop[popover]:not(:popover-open) { translate: 0 -6px; }
@starting-style { .py-pop:popover-open { opacity: 0; translate: 0 -6px; } }
.py-pop { transition: opacity 140ms ease, translate 140ms ease, display 140ms allow-discrete, overlay 140ms allow-discrete; }

/* ---------- Generic data table on ruled paper ---------- */
.py-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.py-table th {
  text-align: start; font-family: var(--py-f-display); font-stretch: 78%; font-weight: 650;
  font-size: var(--py-s--1); color: var(--py-ink-soft); padding: var(--py-2) var(--py-3);
  border-bottom: 2px solid var(--py-rule);
}
.py-table td { padding: var(--py-3); border-bottom: 1px solid var(--py-ruling); vertical-align: baseline; }
.py-table .py-r { text-align: end; }

@media print { .py-tabs { display: none !important; } }

/* ---------- Motion: reduced motion ---------- */
/* The device's *reduce motion* is the product's one opt-out (docs/interface.md, *Motion*): every
   transition and animation off, on every element and pseudo-element, so a popover or a card
   appears and disappears at once. `transition-property: none`, since a shortened duration still
   makes every style change a transition (UI-437); important, since a screen's own transition is
   more specific than `*`. No screen turns its own motion down. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-property: none !important; animation: none !important; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

/* Native file input, dressed as our button (its text follows the browser's language) */
input[type="file"] { font-size: var(--py-s--1); }
input[type="file"]::file-selector-button { font: inherit; font-weight: 650; margin-inline-end: var(--py-3); padding: 0.45em 0.9em; border: 1.5px solid var(--py-ink); border-radius: var(--py-r-ctl); background: transparent; color: var(--py-ink); cursor: pointer; }