/* Time Capsule — standalone add-on styles. Builds on the builder's own tokens and form styles. */
.tc-parent{margin:26px auto 0}
.tc-parent h3{font-family:"Playfair Display",Georgia,serif;font-weight:600;font-size:19px;color:var(--navy);margin:0 0 4px}
.tc-parent .tc-lede{font-size:13px;color:var(--ink-2);margin:0 0 18px;line-height:1.55}
.tc-ref{font-family:"IBM Plex Mono",monospace;font-weight:600;letter-spacing:.04em;color:var(--navy)}
.tc-err{font-size:11.5px;color:var(--bad);margin:5px 0 0;line-height:1.45}
.tc-err:empty{display:none}
.f input[aria-invalid="true"],.f textarea[aria-invalid="true"]{border-color:var(--bad)}
.tc-gate{text-align:center;font-size:12px;color:var(--ink-3);margin:10px 0 0}
.tc-gate:empty{display:none}
.review .row dd.tc-ref{font-size:14px}

/* photo upload status — a line in the build step, a panel in the order step */
.tc-up{border-radius:5px;padding:11px 14px;font-size:12.5px;line-height:1.5;margin:12px 0 0;background:var(--desk-2);color:var(--ink-2)}
#tcUpReview{max-width:640px;margin:16px auto 0}
.tc-up b{color:var(--ink)}
.tc-up.ok{background:var(--ok-bg);color:var(--ok)}
.tc-up.ok b{color:var(--ok)}
.tc-up.bad{background:var(--bad-bg);color:var(--bad)}
.tc-up.bad b{color:var(--bad)}
.tc-bar{display:block;height:5px;border-radius:3px;background:var(--rule);margin-top:8px;overflow:hidden}
.tc-bar i{display:block;height:100%;background:var(--blue);border-radius:3px;transition:width .4s ease}
@media (prefers-reduced-motion:reduce){.tc-bar i{transition:none}}

/* school or nursery: a typing box with suggestions from schools.json */
.tc-school{position:relative}
.tc-suggest{position:absolute;left:0;right:0;z-index:30;margin:4px 0 0;padding:4px;list-style:none;background:var(--panel);
  border:1px solid var(--rule);border-radius:6px;box-shadow:var(--sh);max-height:260px;overflow:auto}
.tc-suggest li{padding:9px 11px;border-radius:4px;cursor:pointer;font-size:14px;color:var(--ink)}
.tc-suggest li:hover,.tc-suggest li.on{background:var(--desk-2);color:var(--blue-ink)}
.tc-suggest li.none{cursor:default;color:var(--ink-3);font-size:13px}
.tc-parent{margin-top:18px}

/* a picture that will print soft - shown in the build step the moment it lands in a frame */
.tc-soft{background:var(--bad-bg);color:var(--bad);border:1px solid var(--bad);border-radius:6px;padding:12px 14px;margin:0 0 14px;font-size:13px;line-height:1.5}
.tc-soft[hidden]{display:none}
.tc-soft b{display:block;font-size:14px}
.tc-soft-sub{display:block;color:var(--ink-2);margin:2px 0 8px}
.tc-soft ul{list-style:none;margin:0 0 8px;padding:0;display:flex;flex-direction:column;gap:6px}
.tc-soft li{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;background:var(--panel);border-radius:4px;padding:7px 9px;color:var(--ink)}
.tc-soft-where{font-weight:700;min-width:84px}
.tc-soft code{font-family:"IBM Plex Mono",monospace;font-size:12px;overflow-wrap:anywhere}
.tc-soft-dpi{font-family:"IBM Plex Mono",monospace;font-size:12px;color:var(--bad);font-weight:600}
.tc-soft-acts{display:flex;gap:6px;flex-wrap:wrap;margin-left:auto}
.tc-gate a{color:var(--blue-ink)}

/* dry run (staff testing only) */
.tc-testbar{background:#b42318;color:#fff;text-align:center;padding:8px 16px;font-size:14px;line-height:1.35}
.tc-testbar b{letter-spacing:.02em}
.tc-softgate{color:#b42318;margin:10px 0 0}
.tc-softgate a{color:inherit;font-weight:600}

/* 2026-09-30 (team feedback): counters hidden, nothing under the book, bigger book */
.counts{display:none}
.sidepanel:empty{display:none}
main:has(#p4.on){max-width:1560px}
.book.spread{max-width:1240px}
.book.single{max-width:640px}
.drop b{font-size:14px}
.drop small{font-size:11.5px}
.drop .got{margin-top:5px;font-weight:700;color:var(--navy)}
.drop .got:empty{display:none}
.tc-soft .tc-ico{display:inline-flex;align-items:center;justify-content:center;padding-left:9px;padding-right:9px}
.tc-soft .tc-ico svg{display:block}
.tc-soft .tc-plus{color:var(--blue);font-weight:700}

/* 2026-10-01: the full-screen review used a near-black backdrop (parents saw a "black background").
   Make it a soft light screen that matches the rest of the site, and darken the text/controls to suit. */
.reviewer{background:#e9edf4;}
.rv-top{color:#142854;}
.rv-ghost{border-color:rgba(20,40,84,.28);background:#fff;color:#142854;}
.rv-ghost:hover{background:#f0f3f9;}
.rv-ghost:focus-visible{outline-color:#142854;}
.rv-arrow{border-color:rgba(20,40,84,.22);background:#fff;color:#142854;box-shadow:0 1px 3px rgba(9,18,40,.12);}
.rv-arrow:hover:not(:disabled){background:#eef2f8;}
.rv-note{color:#5a6374;}
.rv-where{color:#51607a;}
.reviewer .book{filter:drop-shadow(0 16px 38px rgba(9,18,40,.20));}

/* 2026-10-01: the "book not full" message now shows in one place (under the book); keep empty
   message lines from leaving a gap on the left. */
.blocked:empty{display:none;margin:0;}

/* ---------- inside the Drawings By Me app (?app=1) ----------
   The page has always used the brand's own tokens — navy #142854, blue #3984C6, Playfair
   and Montserrat — so it already belongs. What made it read as a website inside the app
   was the furniture: a second header under the app's own, square buttons where the app
   uses pills, and a page that could turn dark while the app stayed light. */
.tc-app header{box-shadow:none;border-bottom:1px solid var(--rule-soft)}
.tc-app header .bar{display:none}            /* the app's header carries the title and the price */
.tc-app .steps{padding:10px 16px;gap:6px;justify-content:center}
.tc-app main{padding:18px 16px 44px}
.tc-app .lede{margin-bottom:20px}

/* the app's buttons: pills, and one gradient call to action per screen */
.tc-app .btn{border-radius:999px;padding:12px 24px;font-size:14px}
.tc-app .btn.primary,.tc-app .btn.primary:hover:not(:disabled){
  background:linear-gradient(to right,#EB5BA1,#EB7C5B);border-color:transparent;color:#fff;
  font-family:"Caveat Brush",Montserrat,sans-serif;font-weight:400;font-size:19px;
  box-shadow:0 6px 20px rgba(20,40,84,.12)}
.tc-app .btn.primary:disabled{box-shadow:none}
.tc-app .mini{border-radius:999px;padding:6px 13px}
.tc-app .card{border-radius:14px}
.tc-app .review,.tc-app .handoff{border-radius:14px}

/* drawings from the Art Vault — the one thing the website cannot offer */
.tc-vault{display:block;width:100%;max-width:420px;margin:12px auto 0;padding:12px 20px;
  border:1px solid var(--blue);border-radius:999px;background:var(--panel);color:var(--blue-ink);
  text-align:center;cursor:pointer;font:inherit}
.tc-vault:hover,.tc-vault:focus-visible{background:color-mix(in srgb,var(--blue) 8%,var(--panel))}
.tc-vault b{display:block;font-size:14px;font-weight:600}
.tc-vault small{display:block;color:var(--ink-3);font-size:11.5px;margin-top:1px}

/* one side of the book at a time, at full width - a spread on a phone is 180 px a side */
.tc-app .bookbox{padding:14px 12px 10px}
.tc-app .book.spread{grid-template-columns:1fr;max-width:none;aspect-ratio:32/24}
.tc-app .book.spread[data-half="0"] .face.r,
.tc-app .book.spread[data-half="1"] .face.l{display:none}
.tc-app .turn{display:none}          /* the page-turn animation belongs to a spread */
/* the full-screen review: fill the space that is there. Without a width the book falls back
   to whatever its contents happen to measure - 223 px on a phone, in a 375 x 563 stage. */
.tc-app .rv-stage{position:relative;padding:0 10px}
/* the two arrows sat in the row and squeezed the book to 223 px of a 375 px screen; over the
   page instead, the book takes the whole width, or the whole height in landscape */
.tc-app .rv-stage .rv-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:2}
.tc-app .rv-stage #rvPrev{left:6px}
.tc-app .rv-stage #rvNext{right:6px}
/* the size itself is set in JavaScript: a 32 x 24 page has to fit the space in BOTH
   directions, and CSS can only hold one of them at a time - max-height on a definite width
   clamps the height and stretches the page, which is exactly what landscape showed */

/* A tray of eighty-one decoded photos is heavy, but skipping the off-screen ones made the
   grid collapse and re-expand while scrolling and pinching - things moving under your finger
   is worse than memory you cannot see. Taken out again. */

/* Turned sideways, the page can be as wide as the screen - but only if the furniture gets
   out of the way. A phone in landscape has about 360 px of height in total, and the review's
   header, caption and footnote were taking half of it. */
@media (orientation:landscape) and (max-height:560px){
  /* Sideways, a 32 x 24 page can be bigger than it ever is upright - but only if nothing else
     takes the height. A phone has about 360 px of it in landscape, so everything that is not
     the page gets out of the way: the step pills, the review's caption and footnote, and the
     padding around the book. The arrows go over the page rather than beside it. */
  .tc-app .steps{display:none}
  /* the review's own title bar floats in the margin beside the page instead of above it */
  .tc-app .rv-top{position:absolute;top:0;left:0;right:0;z-index:4;padding:4px 10px;background:transparent}
  .tc-app .rv-top img{height:16px}
  .tc-app .rv-title{font-size:14px}
  .tc-app .rv-bottom{padding:2px 10px}
  .tc-app #rvDone{padding:7px 20px;font-size:17px}
  .tc-app .rv-note{display:none}

  .tc-app .bookbox{padding:6px 8px 4px;position:relative}
  .tc-app .bookbox .nav{position:static;padding:4px 0 0;gap:8px}
  .tc-app .bookbox .nav .icon{position:absolute;top:calc(50% - 22px);z-index:3}
  .tc-app .bookbox .nav #prev{left:4px}
  .tc-app .bookbox .nav #next{right:4px}
  .tc-app .where{min-width:0;font-size:11px}
  /* the tray, the counters and the add box are a scroll away; the page comes first */
  .tc-app .tray{position:static}
}

/* ---------- moving a picture inside its frame, on a touch screen ----------
   The builder drags with pointer events, which is right, but a touch screen gives the gesture
   to the browser first unless the element says otherwise: the page scrolled and the picture
   stayed where it was. `touch-action:none` hands the touch to the page. This is not app-only -
   on a phone, on the website, this gesture has never worked. */
.slot.adjusting{touch-action:none}
.slot.adjusting img{touch-action:none;pointer-events:none}

/* In the app the screen also holds still while a picture is being moved, and the controls for
   it come to the bottom of the screen so Done is always under the thumb. */
body.tc-app.tc-adjusting{overflow:hidden}
.tc-app.tc-adjusting .adjustbar{
  position:fixed;left:0;right:0;bottom:0;z-index:60;margin:0;border-radius:14px 14px 0 0;
  background:var(--panel);box-shadow:0 -6px 24px rgba(9,18,40,.18);padding:10px 14px}

/* The tap is acknowledged the instant it happens, even when the next page is still being
   prepared — a button that does nothing for half a second reads as a broken button. */
.icon.tc-waiting{opacity:.5;transform:scale(.94);transition:opacity .08s,transform .08s}

/* website version: delivery block in "Your details" */
.tc-parent .tc-dhead{margin-top:22px}
.tc-parent select{width:100%}