/*
  Tinyhuman Books components, shared by the Astro pages and the Express (EJS) screens.
  Load after /css/brand.css (faces, tokens.css, brand-art.css). Built to the work proofs
  in brand/proof/: paper and line, square corners, 0.75px rules, one book-cloth button.
  No colour in this file that isn't a brand token.
*/

/* ---------- Base ---------- */
:root {
  color-scheme: light;
  /* The generated semantic layer lands near, not on, paper and line (d16). Pin it. */
  --surface-page: var(--paper);
  --surface-raised: var(--paper);
  --text-primary: var(--line);
  --rule: 0.75px solid var(--line);
  --rule-strong: 1.5px solid var(--line);
  --page-gutter: 20px;
  --page-max: 1312px;
}
@media (min-width: 768px) { :root { --page-gutter: 40px; } }
@media (min-width: 1280px) { :root { --page-gutter: 64px; } }

*, *::before, *::after { box-sizing: border-box; }
html { font-synthesis: none; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--line);
  font-family: var(--font-text);
  font-size: 17px;
  line-height: 1.55;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
@media (min-width: 768px) { body { font-size: 18px; } }
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: var(--line); text-underline-offset: 4px; text-decoration-thickness: 0.75px; }
a:hover { text-decoration-thickness: 1.5px; }
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--ink-blue); color: var(--paper); }
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--cloth);
  outline-offset: 3px;
}
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--paper); border: var(--rule); padding: 10px 14px; font-family: var(--font-ui); font-weight: 600; }
.skip-link:focus { top: 12px; }

/* ---------- Type ---------- */
.disp, h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: var(--font-weight-display);
  line-height: 1.08;
  text-wrap: balance;
  margin: 0;
}
h1, .h1 { font-size: clamp(2.2rem, 1.6rem + 3.2vw, 4.25rem); line-height: 1.04; }
h2, .h2 { font-size: clamp(1.9rem, 1.5rem + 2vw, 3.1rem); }
h3, .h3 { font-size: clamp(1.4rem, 1.2rem + 1vw, 2.2rem); line-height: 1.12; }
p { margin: 0; }
.text { font-family: var(--font-text); }
.italic, em { font-style: italic; }
.ui { font-family: var(--font-ui); }
.label {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.lead { font-size: clamp(1.06rem, 1rem + 0.35vw, 1.3rem); line-height: 1.55; max-width: 36ch; }
.small { font-family: var(--font-ui); font-size: 14px; line-height: 1.5; }
.measure { max-width: 62ch; }

/* ---------- Layout ---------- */
.wrap { width: 100%; max-width: calc(var(--page-max) + 2 * var(--page-gutter)); margin-inline: auto; padding-inline: var(--page-gutter); }
.stack { display: flex; flex-direction: column; gap: var(--stack-gap, 16px); }
.rule-top { border-top: var(--rule); }
.rule-bottom { border-bottom: var(--rule); }
.section { padding-block: clamp(48px, 6vw, 88px); }
main { flex: 1 0 auto; }

/* ---------- Buttons ---------- */
/* The one button is book cloth green, square, Franklin 600. Secondary actions are text links. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--font-ui); font-weight: 600; font-size: 17px; line-height: 1.2;
  background: var(--cloth); color: var(--paper);
  padding: 18px 28px; border: 1.5px solid var(--cloth); border-radius: 0;
  text-decoration: none; cursor: pointer; min-height: 48px;
  transition: background-color var(--duration-base) var(--ease-standard), transform var(--duration-fast) var(--ease-standard);
}
.btn:hover { background: var(--accent-solid-hover); border-color: var(--accent-solid-hover); text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--cloth); outline-offset: 3px; }
.btn[disabled], .btn[aria-disabled="true"] { background: var(--control-bg); border-color: var(--control-bg); color: var(--text-disabled); cursor: not-allowed; transform: none; }
.btn[aria-busy="true"] { cursor: progress; }
.btn[aria-busy="true"]::before {
  content: ''; width: 14px; height: 14px; flex: none; border-radius: 50%;
  border: 2px solid currentColor; border-top-color: transparent; opacity: 0.85;
  animation: th-spin 900ms linear infinite;
}
@keyframes th-spin { to { transform: rotate(360deg); } }
.btn--sm { font-size: 16px; padding: 12px 20px; min-height: 44px; }
.btn--block { display: flex; width: 100%; }
.btn--quiet { background: var(--paper); color: var(--line); border: var(--rule-strong); }
.btn--quiet:hover { background: var(--paper); border-color: var(--line); text-decoration: underline; }
.link-italic { font-family: var(--font-text); font-style: italic; font-size: 19px; text-underline-offset: 5px; }
.link-ui { font-family: var(--font-ui); font-size: 14px; text-underline-offset: 4px; }

/* ---------- The bookplate ---------- */
/* Outer rule 1.5px, 6px of paper, inner rule 0.75px. Always paper, never a shadow. */
.plate {
  --plate-w: 300px;
  --name-size: calc(var(--plate-w) * 0.2);
  width: var(--plate-w); max-width: 100%;
  background: var(--paper); color: var(--line);
  border: var(--rule-strong); padding: 6px;
}
.plate-in {
  border: var(--rule);
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: calc(var(--plate-w) * 0.022);
  padding: calc(var(--plate-w) * 0.07) calc(var(--plate-w) * 0.045) calc(var(--plate-w) * 0.058);
}
.plate .label { font-size: max(11px, calc(var(--name-size) * 0.17)); }
.plate-name {
  font-family: var(--font-text); font-style: italic; font-size: var(--name-size); line-height: 1.05;
  max-width: 100%; overflow-wrap: anywhere;
}
/* The fit scripts (app.js, site.ts) set a size and measure it at once. brand.css's
   reduced-motion rule turns every change into a 0.01ms transition, so the measure read
   the old size and a long name overflowed the plate. The name's size never transitions;
   the ink copy keeps its own transitions. */
.plate-name, .plate-name * { transition-property: none; }
.plate-short-rule { width: 34%; border-top: var(--rule); }
.plate-line { font-family: var(--font-text); font-style: italic; font-size: max(14px, calc(var(--name-size) * 0.22)); line-height: 1.3; }

/* Riso ink under the line: an ink copy of the type, down and right, multiplied. */
.ci { position: relative; display: inline-block; }
.ci .ink {
  position: absolute; left: max(3px, 0.07em); top: max(3px, 0.07em);
  -webkit-text-stroke: 0.03em currentColor; mix-blend-mode: multiply;
  color: var(--plate-ink, var(--ink-sunflower));
}
.ci .line { position: relative; color: var(--line); }
.ink-sunflower { --plate-ink: var(--ink-sunflower); }
.ink-red { --plate-ink: var(--ink-red); }
.ink-blue { --plate-ink: var(--ink-blue); }
.ink-orange { --plate-ink: var(--guest-orange); }
.ink-green { --plate-ink: var(--guest-green); }
.ink-pink { --plate-ink: var(--guest-pink); }
.ink-gold { --plate-ink: var(--guest-gold); }
.ink-chip { width: 13px; height: 13px; display: inline-block; background: var(--plate-ink, var(--ink-sunflower)); border: var(--rule); vertical-align: -1px; }

/* ---------- Pages on screen ---------- */
/* A page shown on screen: 0.75px line and the brand's large shadow. Never in the PDF. */
.a4 {
  background: var(--paper); border: var(--rule); position: relative; overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.a4--portrait { aspect-ratio: 210 / 297; }
.a4--landscape { aspect-ratio: 297 / 210; }
.a4 > img, .a4 .art { position: absolute; inset: 7%; width: 86%; height: 86%; object-fit: contain; mix-blend-mode: multiply; }
.frame-double::before, .frame-double::after { content: ''; position: absolute; pointer-events: none; }
.frame-double::before { inset: 3.3%; border: var(--rule-strong); }
.frame-double::after { inset: 4.2%; border: var(--rule); }
.frame-single::before { content: ''; position: absolute; inset: 3.3%; border: var(--rule-strong); pointer-events: none; }
.page-caption { font-family: var(--font-text); font-style: italic; font-size: 17px; margin-top: 12px; }

/* A drawing stuck on like a sticker (coloured item on paper) */
.sticker { position: absolute; width: var(--sticker-w, 120px); transform: rotate(var(--tilt, -6deg)); pointer-events: none; }

/* ---------- Forms ---------- */
.field { display: flex; flex-direction: column; gap: 6px; }
.field label, .field .field-label { font-family: var(--font-ui); font-weight: 600; font-size: 14px; }
.field .hint { font-family: var(--font-ui); font-size: 14px; color: var(--text-secondary); }
.input, .field input[type="text"], .field input[type="email"], .field input:not([type]), .field select, .field textarea {
  font-family: var(--font-ui); font-size: 17px; line-height: 1.3;
  background: var(--paper); color: var(--line);
  border: var(--rule-strong); border-radius: 0; padding: 13px 14px; min-height: 48px; width: 100%;
}
.input:focus, .field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--cloth); outline-offset: 1px; border-color: var(--cloth); }
.field [aria-invalid="true"] { border-color: var(--danger-solid); }
.field .error { font-family: var(--font-ui); font-size: 14px; color: var(--danger-text); display: inline-flex; gap: 6px; align-items: center; }
.check { display: flex; gap: 12px; align-items: flex-start; font-family: var(--font-ui); font-size: 15px; line-height: 1.45; cursor: pointer; }
.check input { width: 22px; height: 22px; margin: 1px 0 0; flex: none; accent-color: var(--cloth); }

/* Photo tiles (upload) */
.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 768px) { .tiles { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.tile { aspect-ratio: 1; border: var(--rule); position: relative; overflow: hidden; background: var(--paper); }
.tile img { width: 100%; height: 100%; object-fit: cover; }
.tile--add { border-style: dashed; display: flex; align-items: center; justify-content: center; font-family: var(--font-ui); font-size: 26px; cursor: pointer; }

/* ---------- Status ---------- */
/* Always an icon and a word, never colour alone. */
.status { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border: 1px solid; font-family: var(--font-ui); font-size: 15px; line-height: 1.45; }
.status svg { flex: none; width: 18px; height: 18px; margin-top: 1px; }
.status strong { font-weight: 600; }
.status--danger { background: var(--danger-bg); border-color: var(--danger-border); color: var(--danger-text); }
.status--warning { background: var(--warning-bg); border-color: var(--warning-border); color: var(--warning-text); }
.status--success { background: var(--success-bg); border-color: var(--success-border); color: var(--success-text); }
.status--info { background: var(--info-bg); border-color: var(--info-border); color: var(--info-text); }
.status p, .status span { color: var(--line); }

/* Placeholder for anything waiting on a real photo or an owner decision */
.todo { font-family: var(--font-ui); font-size: 15px; line-height: 1.5; border: 0.75px dashed var(--line); display: flex; align-items: center; justify-content: center; text-align: center; padding: 24px; }

/* ---------- Site header (shared partial) ---------- */
.site-header { border-bottom: var(--rule); background: var(--paper); position: relative; z-index: 20; }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-block: 18px; }
@media (min-width: 1024px) { .site-header .wrap { padding-block: 28px; } }
.site-logo { display: block; width: 172px; flex: none; }
@media (min-width: 1024px) { .site-logo { width: 236px; } }
.site-logo img { width: 100%; height: auto; }
.site-nav { display: flex; align-items: center; gap: 28px; font-family: var(--font-ui); font-size: 16px; }
.site-nav a:not(.btn) { text-decoration: none; }
.site-nav a:not(.btn):hover { text-decoration: underline; }
.site-nav .nav-links { display: none; gap: 28px; align-items: center; }
@media (min-width: 900px) { .site-nav .nav-links { display: flex; } }
.site-nav .nav-step { font-size: 14px; }
.menu-toggle { display: inline-flex; align-items: center; gap: 8px; background: none; border: 0; padding: 10px 0 10px 10px; font-family: var(--font-ui); font-weight: 600; font-size: 15px; cursor: pointer; min-height: 44px; }
@media (min-width: 900px) { .menu-toggle { display: none; } }
.menu-toggle svg { width: 22px; height: 22px; }
.mobile-menu { border-top: var(--rule); padding: 8px var(--page-gutter) 20px; font-family: var(--font-ui); font-size: 18px; }
.mobile-menu a { display: block; padding: 14px 0; border-bottom: var(--rule); text-decoration: none; }
.mobile-menu[hidden] { display: none; }
@media (min-width: 900px) { .mobile-menu { display: none !important; } }
.site-header .btn { font-size: 16px; padding: 12px 20px; min-height: 44px; }

/* ---------- Site footer (shared partial) ---------- */
.site-footer { border-top: var(--rule); margin-top: auto; padding-block: 48px 56px; font-family: var(--font-ui); font-size: 15px; line-height: 1.9; }
.site-footer .wrap { display: grid; gap: 36px; }
@media (min-width: 900px) { .site-footer .wrap { grid-template-columns: 1.2fr 1fr 1fr; gap: 48px; } }
.site-footer .footer-logo { width: 200px; }
.site-footer .tagline { font-family: var(--font-text); font-style: italic; font-size: 20px; line-height: 1.4; margin-top: 28px; text-wrap: balance; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer a { text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }

/* ---------- Cookie consent (shared partial) ---------- */
.cookie-consent {
  position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); z-index: 50;
  max-width: 560px; margin-inline: auto;
  background: var(--paper); border: var(--rule-strong); padding: 6px;
  box-shadow: var(--shadow-lg);
}
.cookie-consent-content { border: var(--rule); padding: 16px 18px; display: flex; flex-direction: column; gap: 14px; font-family: var(--font-ui); font-size: 15px; line-height: 1.5; }
.cookie-consent-actions { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; }
.cookie-consent-actions .btn { font-size: 15px; padding: 11px 18px; min-height: 44px; }
/* Phones: as small as it can be while staying readable, so it never hides the step underneath.
   The page also gets bottom padding while the banner shows (consent partial). */
.cc-short { display: none; }
@media (max-width: 599px) {
  .cc-long { display: none; }
  .cc-short { display: block; }
  .cookie-consent { left: 0; right: 0; bottom: 0; max-width: none; padding: 0; border-width: 1.5px 0 0; box-shadow: none; }
  .cookie-consent-content { border: 0; padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)); gap: 8px; font-size: 13px; line-height: 1.35; }
  .cookie-consent-actions { gap: 6px 12px; flex-wrap: nowrap; }
  .cookie-consent-actions .btn { font-size: 14px; padding: 8px 12px; min-height: 44px; }
  .cookie-consent-link { font-size: 13px; }
}
main:focus { outline: none; }

/* ---------- Motion ---------- */
/* Restrained: 90, 150, 240, 360ms on the brand curves. Content is never hidden waiting for JS. */
@media (prefers-reduced-motion: no-preference) {
  .rise { animation: th-rise var(--duration-slower) var(--ease-enter) both; animation-delay: var(--delay, 0ms); }
}
@keyframes th-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* ---------- Long-form pages (privacy, terms) ---------- */
.legal { max-width: 68ch; display: flex; flex-direction: column; gap: 16px; }
.legal h1 { margin-bottom: 4px; }
.legal h2 { font-size: clamp(1.5rem, 1.3rem + 0.8vw, 2rem); margin-top: 28px; padding-top: 20px; border-top: var(--rule); scroll-margin-top: 24px; }
.legal ul { margin: 0; padding-left: 1.2em; display: flex; flex-direction: column; gap: 10px; }
.legal li::marker { color: var(--line); }
.legal strong { font-family: var(--font-ui); font-weight: 600; font-size: 0.94em; }
.legal code { font-family: var(--font-ui); font-size: 0.88em; }