/* Fonts: self-hosted latin subsets (SIL OFL 1.1, licenses in assets/fonts/). Built from the TTFs in
   site/app/fonts with fontTools: Bricolage Grotesque variable (opsz 12-96, wght 700-800, wdth 100),
   DM Sans variable (wght 400-700, opsz 14 as Google serves it), Caveat Bold. Change ?v= when a file
   changes (assets are cached as immutable). header.php preloads the Bricolage file. */
@font-face { font-family: "Bricolage Grotesque"; src: url("fonts/bricolage-grotesque-latin-var.woff2?v=1") format("woff2"); font-weight: 700 800; font-style: normal; font-display: swap; }
@font-face { font-family: "DM Sans"; src: url("fonts/dm-sans-latin-var.woff2?v=1") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Caveat"; src: url("fonts/caveat-latin-700.woff2?v=1") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
/* Metric-matched fallbacks, shown until the web fonts arrive (or if they fail): a local font scaled
   (size-adjust) so its text is about as wide as the brand font's, with the brand's ascent and descent,
   so the swap barely moves anything. One family per local font, because a face has one size-adjust.
   Widths measured in Chrome against the woff2 above (display at 24px, body at 16px, hand at 28px). */
@font-face { font-family: "Bricolage Fallback"; src: local("Trebuchet MS Bold"), local("TrebuchetMS-Bold"); font-weight: 700 800; size-adjust: 104.93%; ascent-override: 88.63%; descent-override: 25.73%; line-gap-override: 0%; }
@font-face { font-family: "Bricolage Fallback Arial"; src: local("Arial Bold"), local("Arial-BoldMT"); font-weight: 700 800; size-adjust: 88.95%; ascent-override: 104.55%; descent-override: 30.35%; line-gap-override: 0%; }
@font-face { font-family: "Bricolage Fallback Roboto"; src: local("Roboto Bold"), local("Roboto-Bold"); font-weight: 700 800; size-adjust: 108.34%; ascent-override: 85.84%; descent-override: 24.92%; line-gap-override: 0%; }
@font-face { font-family: "Bricolage Fallback DejaVu"; src: local("DejaVu Sans Bold"), local("DejaVuSans-Bold"); font-weight: 700 800; size-adjust: 85.81%; ascent-override: 108.38%; descent-override: 31.46%; line-gap-override: 0%; }
@font-face { font-family: "DM Sans Fallback"; src: local("Arial"), local("ArialMT"); font-weight: 400 500; size-adjust: 102.78%; ascent-override: 96.52%; descent-override: 30.16%; line-gap-override: 0%; }
@font-face { font-family: "DM Sans Fallback"; src: local("Arial Bold"), local("Arial-BoldMT"); font-weight: 600 700; size-adjust: 102.78%; ascent-override: 96.52%; descent-override: 30.16%; line-gap-override: 0%; }
@font-face { font-family: "DM Sans Fallback Roboto"; src: local("Roboto"), local("Roboto-Regular"); font-weight: 400 500; size-adjust: 104.06%; ascent-override: 95.33%; descent-override: 29.79%; line-gap-override: 0%; }
@font-face { font-family: "DM Sans Fallback Roboto"; src: local("Roboto Bold"), local("Roboto-Bold"); font-weight: 600 700; size-adjust: 104.06%; ascent-override: 95.33%; descent-override: 29.79%; line-gap-override: 0%; }
@font-face { font-family: "DM Sans Fallback DejaVu"; src: local("DejaVu Sans"), local("DejaVuSans"); font-weight: 400 500; size-adjust: 91.34%; ascent-override: 108.61%; descent-override: 33.94%; line-gap-override: 0%; }
@font-face { font-family: "DM Sans Fallback DejaVu"; src: local("DejaVu Sans Bold"), local("DejaVuSans-Bold"); font-weight: 600 700; size-adjust: 91.34%; ascent-override: 108.61%; descent-override: 33.94%; line-gap-override: 0%; }
@font-face { font-family: "Caveat Fallback"; src: local("Comic Sans MS Bold"), local("ComicSansMS-Bold"); font-weight: 700; size-adjust: 66.97%; ascent-override: 143.35%; descent-override: 44.80%; line-gap-override: 0%; }

/* Printable Drop components. Plain CSS on top of tokens.css. Theme = data-theme on <html>: paper (default), holiday, night. */

.pd-page { background: var(--paper); color: var(--ink); font-family: var(--font-body); font-size: 17px; line-height: 1.55; }
/* Line breaks: no one-word last lines. Headings, questions and buttons balance their lines;
   paragraphs and list items wrap "pretty". Browsers without support wrap normally, so short
   intros and ledes also join their last two words server-side (text_tail() in helpers.php).
   Zero specificity, so a component's own white-space or text-wrap always wins. */
:where(.pd-page :is(h1, h2, h3, h4, summary, figcaption, .pd-btn)) { text-wrap: balance; overflow-wrap: break-word; }
:where(.pd-page :is(p, li, dd, blockquote, label)) { text-wrap: pretty; overflow-wrap: break-word; }
/* overflow-wrap is the width backstop for the &nbsp; helpers: a joined run that is wider than
   its column breaks instead of pushing the page sideways. */
.pd-page a { color: var(--ink); }
.pd-page a:hover { color: var(--accent); }
.pd-wrap { max-width: 1200px; margin: 0 auto; padding-inline: var(--space-5); }

/* Button */
.pd-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: 52px; padding: 0 26px; border-radius: var(--radius-pill); border: var(--stroke) solid var(--line); background: var(--card); color: var(--ink); font-family: var(--font-body); font-weight: 700; font-size: 17px; text-decoration: none; cursor: pointer; }
.pd-btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.pd-btn--primary { background: var(--accent); color: var(--on-accent); box-shadow: var(--shadow-pop); }
.pd-btn--primary:hover { transform: translate(-1px, -1px); }
.pd-btn--dark { background: var(--inverse); color: var(--on-inverse); }
.pd-btn--danger { background: var(--tint-danger); color: var(--ink); }
.pd-btn--sm { min-height: 44px; padding: 0 16px; font-size: 14px; }
.pd-btn--block { display: flex; width: 100%; }
.pd-btn[disabled] { background: var(--disabled); color: var(--ink); box-shadow: none; cursor: not-allowed; }
.pd-page .pd-btn--primary, .pd-page .pd-btn--primary:hover { color: var(--on-accent); }
.pd-page .pd-btn--dark, .pd-page .pd-btn--dark:hover { color: var(--on-inverse); }

/* Badge: stickers, pills, status */
.pd-badge { display: inline-flex; align-items: center; padding: 5px 14px; border-radius: var(--radius-pill); border: var(--stroke-thin) solid var(--line); background: var(--card); color: var(--ink); font-family: var(--font-body); font-weight: 700; font-size: 13px; line-height: 1.2; }
.pd-badge--sticker { border-radius: var(--radius-sm); border-width: var(--stroke); background: var(--sunny); transform: rotate(var(--tilt-sticker)); }
.pd-badge--free { border-radius: var(--radius-sm); border-style: dashed; }
.pd-badge--coloring, .pd-badge--live, .pd-badge--scale { background: var(--tint-coloring); }
.pd-badge--games { background: var(--tint-games); }
.pd-badge--planners { background: var(--tint-planners); }
.pd-badge--hidden, .pd-badge--watch { background: var(--sunny); }
.pd-badge--draft, .pd-badge--early { border-style: dashed; }
.pd-badge--archived { background: var(--disabled); }
.pd-badge--kill { background: var(--tint-danger); }

/* Hand note + section title */
.pd-hand { font-family: var(--font-hand); font-weight: 700; font-size: 32px; line-height: 1; color: var(--accent); }
.pd-title { display: inline-flex; flex-direction: column; gap: var(--space-1); }
.pd-title h2 { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: clamp(32px, 10.5vw, 40px); line-height: 1.05; letter-spacing: -1px; }
.pd-title svg path { stroke: var(--accent); }

/* Card + DropCard */
.pd-card { background: var(--card); border: var(--stroke) solid var(--line); border-radius: var(--radius-lg); padding: var(--space-5); }
.pd-drop { display: flex; flex-direction: column; background: var(--card); border: var(--stroke) solid var(--line); border-radius: 20px; overflow: hidden; text-decoration: none; color: var(--ink); }
.pd-drop__art { position: relative; height: 220px; display: flex; align-items: center; justify-content: center; border-bottom: var(--stroke) solid var(--line); background: var(--tint-coloring); }
.pd-drop--games .pd-drop__art { background: var(--tint-games); }
.pd-drop--planners .pd-drop__art { background: var(--tint-planners); }
.pd-drop__page { width: 130px; height: 170px; background: var(--card); border: var(--stroke) solid var(--line); border-radius: 8px; transform: rotate(var(--tilt-page)); object-fit: cover; }
.pd-drop__count { position: absolute; top: 14px; left: 14px; }
/* Card badges ("FREE PAGE", "N pages", "1 free page") always sit above the tilted page image. */
.pd-drop__art > .pd-badge { z-index: 1; }
.pd-drop__body { display: flex; flex-direction: column; gap: 6px; padding: 18px 18px 20px; flex: 1; }
.pd-drop__lane { font-size: 13px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; }
.pd-drop__name { font-family: var(--font-display); font-weight: 700; font-size: 20px; line-height: 1.2; flex: 1; text-wrap: balance; }
.pd-drop__foot { display: flex; justify-content: space-between; align-items: center; margin-top: var(--space-2); }
.pd-drop__price { font-family: var(--font-display); font-weight: 800; font-size: 22px; }
.pd-drop__free { font-size: 14px; font-weight: 700; color: var(--accent); }

/* Field */
.pd-field { display: flex; flex-direction: column; gap: 6px; font-family: var(--font-body); }
.pd-field > label, .pd-label { font-weight: 700; font-size: 14px; color: var(--ink); }
.pd-input, .pd-select, .pd-textarea { min-height: 50px; box-sizing: border-box; padding: 0 16px; border-radius: var(--radius-md); border: var(--stroke) solid var(--line); background: var(--card); color: var(--ink); font-family: var(--font-body); font-size: 16px; }
.pd-input--pill { border-radius: var(--radius-pill); }
.pd-textarea { padding: 12px 16px; line-height: 1.5; resize: vertical; }
.pd-input:focus, .pd-select:focus, .pd-textarea:focus { outline: 3px solid var(--accent); outline-offset: 2px; }
.pd-input[aria-invalid="true"] { border-color: var(--accent); }
.pd-help { font-size: 14px; color: var(--ink-muted); }
.pd-error { font-size: 14px; font-weight: 700; color: var(--accent); }
.pd-check { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.45; }
.pd-check input { width: 22px; height: 22px; margin: 0; flex-shrink: 0; accent-color: var(--accent); }

/* Email capture band */
.pd-capture { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-6); padding: clamp(24px, 5vw, 56px); border-radius: 28px; background: var(--inverse); color: var(--on-inverse); }
.pd-capture__copy { flex: 1 1 340px; min-width: 0; display: flex; flex-direction: column; gap: 10px; container-type: inline-size; }
.pd-capture__copy h2 { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: 40px; line-height: 1; letter-spacing: -1px; }
/* Guide drawing cards: the text column sits beside the drawing only from 660px (stacked below,
   so titles don't shrink in a narrow column at 560 to 650px). */
.pd-guide-item__text { flex: 1 1 260px; }
@media (max-width: 659.98px) { .pd-guide-item__text { flex-basis: 100%; } }
/* Home sign-up heading: 3 short lines below 375px, two phrases from 375px that shrink to fit. */
.pd-capture__copy h2.pd-capture__h { font-size: min(40px, calc(100cqi / 5.5)); }
@media (max-width: 374.98px) { .pd-gap-w { display: none; } }
@media (min-width: 375px) {
  .pd-gap-n { display: none; }
  .pd-capture__copy h2.pd-capture__h { font-size: min(40px, calc(100cqi / 8.2)); }
}
.pd-capture__copy .pd-hand { color: var(--sunny); font-size: 30px; }
.pd-capture form { flex: 1 1 340px; min-width: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.pd-capture label { font-weight: 700; font-size: 15px; }
.pd-capture .pd-check { font-weight: 500; font-size: 14px; }
.pd-capture__row { display: flex; flex-wrap: wrap; gap: 10px; }
.pd-capture__row .pd-input { flex: 1 1 220px; min-width: 0; border-color: var(--on-inverse); }
.pd-capture__row .pd-btn { border-color: var(--on-inverse); }

/* Site header + footer */
.pd-header { border-bottom: var(--stroke) solid var(--line); background: var(--paper); }
.pd-header__in, .pd-footer__in { max-width: 1200px; margin: 0 auto; padding: 18px var(--space-5); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); }
.pd-logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); }
.pd-logo__word { font-family: var(--font-display); font-weight: 800; font-size: 26px; letter-spacing: -0.5px; }
.pd-nav { display: flex; flex-wrap: wrap; gap: 6px 22px; font-weight: 700; font-size: 16px; }
.pd-nav a { text-decoration: none; padding: 10px 0; }
/* Current page (aria-current="page") or section ("true"): ink with an underline. Orange is kept
   for "Free printables" only (also when current). */
.pd-nav a[aria-current] { color: var(--ink); text-decoration: underline; text-decoration-thickness: var(--stroke-thin); text-underline-offset: 6px; }
.pd-nav a.pd-nav__free { color: var(--accent); }

/* Phone menu (an inline head script adds html.pd-js before the first paint, so the header never
   jumps; nav.js runs the button. Without JS the links stay visible). Below 840px the
   logo and 5 links no longer fit on one row, so the links move into a full-width panel. */
.pd-header .pd-menu-btn { display: none; }
.pd-menu-btn__x { display: none; }
.pd-header.is-open .pd-menu-btn__bars { display: none; }
.pd-header.is-open .pd-menu-btn__x { display: inline; }
@media (max-width: 839.98px) {
  .pd-js .pd-header .pd-header__in { flex-wrap: nowrap; }
  .pd-js .pd-header .pd-menu-btn { display: inline-flex; flex: 0 0 auto; min-width: 44px; padding: 0 14px; font-size: 16px; }
  .pd-js .pd-header .pd-nav { display: none; }
  .pd-js .pd-header.is-open .pd-nav { display: flex; position: fixed; inset: var(--pd-nav-top, 80px) 0 0 0; z-index: 60; flex-direction: column; flex-wrap: nowrap; gap: 0; padding: var(--space-3) var(--space-5) var(--space-7); background: var(--paper); border-top: var(--stroke) solid var(--line); overflow-y: auto; overscroll-behavior: contain; font-size: 20px; }
  .pd-js .pd-header.is-open .pd-nav a { display: flex; align-items: center; min-height: 56px; padding: var(--space-2) 0; border-bottom: var(--stroke-thin) dashed var(--line); }
  .pd-js .pd-header.is-open .pd-nav a:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
  html.pd-nav-open, html.pd-nav-open body { overflow: hidden; }
}
@media (max-width: 399.98px) {
  .pd-js .pd-header .pd-header__in { padding-inline: var(--space-4); gap: var(--space-3); }
  .pd-js .pd-header .pd-logo__word { font-size: 22px; }
}
@media (max-width: 339.98px) {
  /* Too narrow for the word: the icon stays, "Menu"/"Close" is still the button's name. */
  .pd-js .pd-header .pd-menu-btn__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
.pd-footer { border-top: var(--stroke) solid var(--line); background: var(--paper); font-size: 15px; }
.pd-footer__in { padding-block: 32px 40px; align-items: flex-start; }

/* Steps (how it works) */
.pd-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-6); border-top: var(--stroke) dashed var(--line); padding-top: var(--space-7); }
.pd-step { display: flex; flex-direction: column; gap: 10px; container-type: inline-size; }
.pd-step__n { width: 48px; height: 48px; border-radius: var(--radius-pill); background: var(--sunny); border: var(--stroke) solid var(--line); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 800; font-size: 22px; color: var(--ink); }
.pd-step h3 { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: clamp(20px, calc(100cqi / 10.45), 24px); } /* step titles are joined with &nbsp;; fits the longest (19 characters) */

/* Admin shell */
.pd-admin { display: flex; flex-wrap: wrap; min-height: 100%; background: var(--paper); color: var(--ink); font-family: var(--font-body); }
.pd-side { flex: 1 1 240px; max-width: 100%; box-sizing: border-box; padding: var(--space-5) 18px; display: flex; flex-direction: column; gap: 22px; background: var(--inverse); color: var(--on-inverse); }
.pd-side__brand { font-family: var(--font-display); font-weight: 800; font-size: 20px; padding: 0 8px; }
.pd-side nav { display: flex; flex-direction: column; gap: var(--space-1); font-weight: 700; font-size: 16px; }
.pd-side nav a { color: var(--on-inverse); border-radius: 12px; padding: 12px 14px; text-decoration: none; }
.pd-side nav a[aria-current="page"] { background: var(--sunny); color: var(--ink); }
.pd-main { flex: 999 1 640px; min-width: 0; box-sizing: border-box; padding: 32px clamp(16px, 3vw, 40px) 56px; display: flex; flex-direction: column; gap: 22px; }

/* KPI tile */
.pd-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; }
.pd-kpi { background: var(--card); border: var(--stroke) solid var(--line); border-radius: 18px; padding: 18px; display: flex; flex-direction: column; gap: 6px; }
.pd-kpi__label { font-size: 13px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; }
.pd-kpi__value { font-family: var(--font-display); font-weight: 800; font-size: 34px; line-height: 1; font-variant-numeric: tabular-nums; }
.pd-kpi__note { font-size: 13px; color: var(--ink-muted); }

/* Data table */
.pd-tablebox { overflow-x: auto; }
.pd-table { width: 100%; border-collapse: collapse; font-size: 15px; font-variant-numeric: tabular-nums; }
.pd-table th { text-align: left; padding: 10px 8px; border-bottom: var(--stroke) solid var(--line); font-size: 13px; letter-spacing: 1px; text-transform: uppercase; }
.pd-table td { padding: 12px 8px; border-bottom: 1.5px dashed var(--line); }

/* Studio design tile */
.pd-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; }
.pd-tile { background: var(--card); border: var(--stroke) solid var(--line); border-radius: var(--radius-md); overflow: hidden; }
.pd-tile[data-state="approved"] { border: 3.5px solid var(--success); }
.pd-tile[data-state="rejected"] { border-style: dashed; opacity: 0.55; }
.pd-tile__art { position: relative; height: 170px; display: flex; align-items: center; justify-content: center; border-bottom: var(--stroke) solid var(--line); background: #FFFFFF; }
.pd-tile__art img { max-width: 80%; max-height: 80%; }
.pd-tile__n { position: absolute; top: 8px; left: 8px; font-size: 12px; font-weight: 700; color: #231A33; }
.pd-tile__check { position: absolute; bottom: 8px; right: 8px; font-size: 11px; padding: 2px 8px; }
.pd-tile__actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 10px; }
.pd-tile__actions .pd-btn { min-height: 44px; padding: 0 8px; font-size: 13px; }
.pd-tile__actions .pd-btn[aria-pressed="true"]:first-child { background: var(--tint-coloring); }
.pd-tile__actions .pd-btn[aria-pressed="true"]:last-child { background: var(--tint-danger); }

@media (prefers-reduced-motion: reduce) { .pd-btn--primary:hover { transform: none; } }