/* 4.14 — Registers & Forms: a visual for every section. */

/* Scope: two picture cards side by side */
.tp37-points:has(>.tp37-point:nth-child(2):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}
.tp37-points:has(>.tp37-point:nth-child(2):last-child) .tp37-point{min-height:520px}

/* Shared */
.tp414-head{max-width:760px;margin-bottom:clamp(28px,4vw,48px)}
.tp414-head.is-split{max-width:none;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(20px,4vw,56px);align-items:end}
.tp-editorial .tp414-head h2,.tp-editorial .tp414-reorder h2{margin:8px 0 14px;font:600 clamp(1.9rem,3.2vw,2.7rem)/1.08 var(--tp3-serif);color:var(--tp3-ink)}
.tp-editorial .tp414-lead{margin:0;font:400 1.06rem/1.7 var(--tp3-sans);color:var(--tp3-text);max-width:40em}
.tp414-tag{position:absolute;left:12px;bottom:12px;padding:5px 10px;border-radius:99px;background:#ffffffe6;color:var(--tp3-ink);font:700 .6rem/1 var(--tp3-sans);letter-spacing:.12em;text-transform:uppercase;box-shadow:0 1px 2px #0b232820}
.tp414-anatomy svg,.tp414-flow svg,.tp414-binding svg,.tp414-reorder svg,.tp414-faq-fig svg,.tp414-next-fig svg{display:block;width:100%;height:auto;overflow:visible}
.tp414-anatomy text,.tp414-flow text,.tp414-reorder text,.tp414-faq-fig text,.tp414-next-fig text{font-family:var(--tp3-sans)}

/* Drawing parts */
.tp414-cover{fill:#04424c}
.tp414-page{fill:#fff;stroke:#dcd5c3}
.tp414-page.is-shadow{filter:drop-shadow(0 10px 14px #0b232822)}
.tp414-desk{fill:#efe8d6}
.tp414-ink{fill:#0b2328}
.tp414-soft{fill:#51666a;opacity:.35}
.tp414-band{fill:#e7f0ee}
.tp414-note{fill:#faf3e0;stroke:#e0b04a;stroke-dasharray:3 3}
.tp414-rule,.tp414-rows line,.tp414-mini,.tp414-mini-rows line{stroke:#c9d8d5;stroke-width:1;fill:none}
.tp414-rows line:nth-last-child(-n+4){stroke:#9dbdb8}
.tp414-labels text{font-size:10px;font-weight:700;fill:#04424c;letter-spacing:.02em}
.tp414-labels.is-form text{font-size:10.5px;fill:#183f42}
.tp414-boxes rect,.tp414-field{fill:#fff;stroke:#9dbdb8;stroke-width:1.2}
.tp414-hand{fill:none;stroke:#1f4fa0;stroke-width:1.4;stroke-linecap:round;opacity:.8}
.tp414-num{font-size:10px;font-weight:700;fill:#b8862f;letter-spacing:.06em}
.tp414-spine{stroke:#0b232833;stroke-width:3}
.tp414-stitch circle{fill:#b8862f}
.tp414-hl{fill:#e0b04a;opacity:0;transition:opacity .25s}
.tp414-pin circle{fill:#b8862f;stroke:#fff;stroke-width:2.5}
.tp414-pin text{font-size:11px;font-weight:700;fill:#fff;text-anchor:middle}
.tp414-pin{transition:transform .25s var(--tp3-ease)}
.tp414-book{fill:#04424c}.tp414-book.is-2{fill:#0a6b7a}.tp414-book.is-3{fill:#b8862f}
.tp414-stamp rect{fill:none;stroke:#c2187f;stroke-width:2.5}
.tp414-stamp text{font-size:13px;font-weight:800;letter-spacing:.14em;fill:#c2187f;text-anchor:middle}
.tp414-stamp.is-small text{font-size:9.5px}
.tp414-badge circle{fill:#e0b04a}
.tp414-badge text{font-size:7.5px;font-weight:800;letter-spacing:.1em;fill:#0b2328;text-anchor:middle}
.tp414-mask{fill:#fff;stroke:#0a6b7a;stroke-width:1.2;transform-box:fill-box;transform-origin:left center}
.tp414-ticks path{fill:none;stroke:#0a6b7a;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.tp414-lens circle{fill:#ffffff55;stroke:#0b2328;stroke-width:3}
.tp414-lens line{stroke:#0b2328;stroke-width:5;stroke-linecap:round}

/* What goes onto each page */
.tp414-anatomy{background:var(--tp3-cream)}
.tp414-anat-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:clamp(20px,3vw,36px);align-items:start}
.tp414-anat{margin:0;background:#fff;border:1px solid var(--tp3-line);border-radius:18px;padding:clamp(14px,2vw,22px);box-shadow:var(--tp3-shadow-1)}
.tp414-anat-art{position:relative;border-radius:12px;background:var(--tp3-paper);padding:clamp(12px,2vw,22px)}
.tp-editorial .tp414-anat h3{margin:18px 0 10px;font:600 1.5rem/1.1 var(--tp3-serif);color:var(--tp3-ink)}
.tp414-anat-art .tp414-tag{position:static;display:inline-block;margin-top:10px}
.tp414-legend{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.tp414-legend button{all:unset;box-sizing:border-box;display:flex;gap:12px;align-items:flex-start;width:100%;padding:9px 10px;border-radius:10px;cursor:pointer;font:400 .95rem/1.5 var(--tp3-sans);color:var(--tp3-text);transition:background .2s}
.tp414-legend button:hover,.tp414-legend button.is-hot,.tp414-legend button:focus-visible{background:#faf1db}
.tp414-legend button:focus-visible{outline:2px solid var(--tp3-teal-2);outline-offset:1px}
.tp414-legend strong{color:var(--tp3-ink)}
.tp414-legend-no{flex:none;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--tp3-gold);color:#fff;font:700 .75rem/1 var(--tp3-sans);margin-top:1px}
.tp414-anat.has-hot .tp414-part .tp414-hl{opacity:0}
.tp414-anat .tp414-part.is-hot .tp414-hl{opacity:.28}
.tp414-anat .tp414-pin.is-hot{transform-box:fill-box}
.tp414-anat .tp414-pin.is-hot circle{fill:#0b2328}
.tp414-examples{margin:clamp(22px,3vw,34px) 0 0;padding:16px 20px;border-left:3px solid var(--tp3-gold-soft);background:#fff;border-radius:0 12px 12px 0;font:400 1rem/1.6 var(--tp3-sans);color:var(--tp3-text)}
.tp414-examples strong{color:var(--tp3-ink)}

/* Process */
.tp414-flow{background:#fff}
.tp414-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,24px);counter-reset:s}
.tp414-step{position:relative;display:flex;flex-direction:column;border:1px solid var(--tp3-line);border-radius:18px;background:var(--tp3-cream);box-shadow:var(--tp3-shadow-1)}
.tp414-step:not(:last-child)::after{content:'→';position:absolute;right:calc(-1 * clamp(16px,2vw,24px) + 1px);top:calc(50% - 90px);z-index:2;display:grid;place-items:center;width:clamp(16px,2vw,24px);color:var(--tp3-gold);font:700 1.2rem/1 var(--tp3-sans)}
.tp414-step-art{position:relative;margin:0;border-radius:18px 18px 0 0;overflow:hidden;background:var(--tp3-paper);padding:10px 8px 6px;border-bottom:1px solid var(--tp3-line)}
.tp414-step-body{padding:20px 22px 24px}
.tp414-step-no{display:inline-block;font:700 .75rem/1 var(--tp3-sans);letter-spacing:.14em;color:var(--tp3-gold)}
.tp-editorial .tp414-step h3{margin:8px 0 8px;font:600 1.45rem/1.12 var(--tp3-serif);color:var(--tp3-ink)}
.tp-editorial .tp414-step p{margin:0;font:400 .98rem/1.6 var(--tp3-sans);color:var(--tp3-text)}
.tp414-brief{position:relative;margin-top:clamp(24px,3vw,40px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(20px,4vw,48px);padding:clamp(26px,4vw,44px);border-radius:20px;background:var(--tp3-ink);color:var(--tp3-on-dark);overflow:hidden}
.tp414-brief::before{content:'';position:absolute;inset:auto -60px -80px auto;width:260px;height:260px;border-radius:50%;background:radial-gradient(circle,#e0b04a33,transparent 70%)}
.tp414-clip{position:absolute;top:0;left:50%;width:84px;height:14px;margin-left:-42px;border-radius:0 0 8px 8px;background:#b8862f}
.tp414-clip span{position:absolute;left:50%;top:3px;width:30px;height:5px;margin-left:-15px;border-radius:3px;background:#0b2328}
.tp-editorial .tp414-brief h3{margin:6px 0 10px;font:600 1.7rem/1.1 var(--tp3-serif);color:#fff}
.tp-editorial .tp414-brief p{color:var(--tp3-on-dark-muted);font:400 1rem/1.6 var(--tp3-sans);margin:0 0 20px}
.tp-editorial .tp414-brief .tp-eyebrow{color:#efca7c}
.tp414-checks{list-style:none;margin:0;padding:0;display:grid;gap:10px;align-content:center}
.tp414-checks li{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border-radius:12px;background:#ffffff0d;border:1px solid var(--tp3-line-dark);font:500 .98rem/1.45 var(--tp3-sans);color:#fff}
.tp414-checks svg{flex:none;width:20px;height:20px;margin-top:1px}
.tp414-checks rect{fill:none;stroke:#e0b04a;stroke-width:1.6}
.tp414-checks path{fill:none;stroke:#e0b04a;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

/* Binding options */
.tp414-binding{background:var(--tp3-cream)}
.tp414-bind-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(12px,1.6vw,20px)}
.tp414-bind{background:#fff;border:1px solid var(--tp3-line);border-radius:16px;padding:16px 16px 20px;box-shadow:var(--tp3-shadow-1);transition:transform .35s var(--tp3-ease),box-shadow .35s}
.tp414-bind:hover{transform:translateY(-4px);box-shadow:var(--tp3-shadow-2)}
.tp414-bind svg{background:var(--tp3-paper);border-radius:10px;padding:6px}
.tp-editorial .tp414-bind h3{margin:14px 0 6px;font:600 1.25rem/1.15 var(--tp3-serif);color:var(--tp3-ink)}
.tp-editorial .tp414-bind p{margin:0;font:400 .92rem/1.55 var(--tp3-sans);color:var(--tp3-text)}
.tp414-board{fill:#04424c}
.tp414-block{fill:#fff;stroke:#dcd5c3}
.tp414-card{fill:#fff;stroke:#0a6b7a;stroke-width:1.4}
.tp414-card.is-r{fill:#f7fbfa}
.tp414-card-edge{fill:none;stroke:#0a6b7a;stroke-width:1.4}
.tp414-line{stroke:#9dbdb8;stroke-width:3;stroke-linecap:round;fill:none}
.tp414-fold{stroke:#0a6b7a;stroke-width:1.4}
.tp414-metal{fill:#8a9699}
.tp414-rings path{fill:none;stroke:#0b2328;stroke-width:3.5;stroke-linecap:round}
.tp414-loops path{fill:none;stroke:#51666a;stroke-width:1.6;stroke-linecap:round}
.tp-editorial .tp414-note-line{margin:18px 0 0;font:400 .88rem/1.5 var(--tp3-sans);color:var(--tp3-muted)}

/* Reorder band */
.tp414-reorder{background:linear-gradient(135deg,#0b2328,#12353b)}
.tp414-reorder-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(24px,5vw,64px);align-items:center}
.tp414-reorder-art{position:relative;margin:0;padding:clamp(14px,2vw,24px);border-radius:18px;background:#ffffff0a;border:1px solid var(--tp3-line-dark)}
.tp414-reorder-art .tp414-tag{left:auto;right:12px}
.tp414-trail{fill:none;stroke:#e0b04a;stroke-width:1.6;stroke-dasharray:4 5}
.tp414-batch-label{font-size:12px;font-weight:700;fill:#efe9dc;letter-spacing:.06em}
.tp-editorial .tp414-reorder h2{color:#fff}
.tp-editorial .tp414-reorder .tp-eyebrow{color:#efca7c}
.tp-editorial .tp414-reorder-text p:not(.tp-eyebrow){color:var(--tp3-on-dark-muted);font:400 1.05rem/1.7 var(--tp3-sans);margin:0}

/* FAQ and next-step drawings */
.tp414-faq-fig{position:relative;margin:26px 0 0;padding:14px;border-radius:14px;background:var(--tp3-paper);max-width:420px}
.tp414-faq-fig .tp414-tag{top:22px;bottom:auto;left:22px}
.tp-editorial .tp414-faq-fig figcaption{margin-top:10px;font:400 .88rem/1.5 var(--tp3-sans);color:var(--tp3-muted)}
.tp414-nums text{font-size:10px;font-weight:700;fill:#b8862f;letter-spacing:.05em}
.tp414-nums.is-b{opacity:0}
.tp414-flip{transform-box:view-box;transform-origin:160px 100px}
.tp414-next-fig{flex:none;width:150px;margin:0 0 6px}
.tp414-badge.is-next circle{fill:#f0d390}
.tp414-badge.is-next text{font-size:6.6px}

/* Motion: only once JS has marked the drawing, and never with reduced motion */
@media (prefers-reduced-motion:no-preference){
  .tp414-js .draw line,.tp414-js .draw rect{stroke-dasharray:600;stroke-dashoffset:600}
  .tp414-js .is-in .draw line,.tp414-js .is-in .draw rect{animation:tp414-draw 1.6s var(--tp3-ease) forwards}
  .tp414-js .tp414-pin{opacity:0}
  .tp414-js .is-in .tp414-pin{animation:tp414-pop .5s var(--tp3-ease) forwards;animation-delay:calc(.9s + var(--k,0) * .12s)}
  .tp414-js [data-tp414-anim] .tp414-mask,.tp414-js [data-tp414-anim] .tp414-lens,.tp414-js [data-tp414-anim] .tp414-ticks path,.tp414-js [data-tp414-anim] .tp414-stamp,.tp414-js [data-tp414-anim] .tp414-stack,.tp414-js [data-tp414-anim] .tp414-flip,.tp414-js [data-tp414-anim] .tp414-nums,.tp414-js [data-tp414-anim] .tp414-batch,.tp414-js [data-tp414-anim] .tp414-badge{animation-play-state:paused}
  .tp414-js .is-in .tp414-mask,.tp414-js .is-in .tp414-lens,.tp414-js .is-in .tp414-ticks path,.tp414-js .is-in .tp414-stamp,.tp414-js .is-in .tp414-stack,.tp414-js .is-in .tp414-flip,.tp414-js .is-in .tp414-nums,.tp414-js .is-in .tp414-batch,.tp414-js .is-in .tp414-badge{animation-play-state:running}
  .tp414-js .is-paused *{animation-play-state:paused!important}
  .tp414-mask{animation:tp414-mask 5s var(--tp3-ease-io) infinite}
  .tp414-mask.is-2{animation-delay:.35s}
  .tp414-badge{transform-box:fill-box;transform-origin:center;animation:tp414-badge 5s var(--tp3-ease) infinite}
  .tp414-badge.is-next{animation-duration:4s}
  .tp414-lens{animation:tp414-lens 6s var(--tp3-ease-io) infinite}
  .tp414-ticks path{stroke-dasharray:20;stroke-dashoffset:20;animation:tp414-tick 6s linear infinite}
  .tp414-ticks path:nth-child(2){animation-name:tp414-tick2}
  .tp414-ticks path:nth-child(3){animation-name:tp414-tick3}
  .tp414-ticks path:nth-child(4){animation-name:tp414-tick4}
  .tp414-stamp{animation:tp414-stamp 6s var(--tp3-ease) infinite}
  .tp414-stamp.is-small{animation:none}
  .tp414-stack{animation:tp414-stack 6s var(--tp3-ease) infinite}
  .tp414-flip{animation:tp414-flip 5s var(--tp3-ease-io) infinite}
  .tp414-nums.is-a{animation:tp414-na 5s linear infinite}
  .tp414-nums.is-b{animation:tp414-nb 5s linear infinite}
  .tp414-batch{opacity:0;animation:tp414-batch .7s var(--tp3-ease) forwards;animation-delay:calc(.3s + var(--n) * .35s)}
  .tp414-js .tp414-step,.tp414-js .tp414-bind{opacity:0;transform:translateY(22px)}
  .tp414-js .tp414-step.is-in,.tp414-js .tp414-bind.is-in{opacity:1;transform:none;transition:opacity .7s var(--tp3-ease),transform .7s var(--tp3-ease);transition-delay:calc(var(--i,0) * .08s)}
  .tp414-js .tp414-checks li{opacity:0;transform:translateX(-10px)}
  .tp414-js .tp414-brief.is-in .tp414-checks li{opacity:1;transform:none;transition:opacity .5s var(--tp3-ease),transform .5s var(--tp3-ease);transition-delay:calc(.2s + var(--n) * .1s)}
  .tp414-js .tp414-checks path{stroke-dasharray:18;stroke-dashoffset:18}
  .tp414-js .tp414-brief.is-in .tp414-checks path{animation:tp414-draw .5s var(--tp3-ease) forwards;animation-delay:calc(.45s + var(--n) * .1s)}
}
@keyframes tp414-draw{to{stroke-dashoffset:0}}
@keyframes tp414-pop{from{opacity:0}to{opacity:1}}
@keyframes tp414-mask{0%,18%{transform:scaleX(0)}40%,88%{transform:scaleX(1)}100%{transform:scaleX(0)}}
@keyframes tp414-badge{0%,40%{transform:scale(0);opacity:0}52%{transform:scale(1.12);opacity:1}58%,90%{transform:scale(1);opacity:1}100%{transform:scale(0);opacity:0}}
@keyframes tp414-lens{0%,6%{transform:translate(0,0)}24%,30%{transform:translate(0,24px)}48%,54%{transform:translate(0,48px)}72%,84%{transform:translate(0,72px)}100%{transform:translate(0,0)}}
@keyframes tp414-tick{0%,8%{stroke-dashoffset:20}14%,92%{stroke-dashoffset:0}100%{stroke-dashoffset:20}}
@keyframes tp414-tick2{0%,30%{stroke-dashoffset:20}36%,92%{stroke-dashoffset:0}100%{stroke-dashoffset:20}}
@keyframes tp414-tick3{0%,54%{stroke-dashoffset:20}60%,92%{stroke-dashoffset:0}100%{stroke-dashoffset:20}}
@keyframes tp414-tick4{0%,80%{stroke-dashoffset:20}86%,92%{stroke-dashoffset:0}100%{stroke-dashoffset:20}}
@keyframes tp414-stamp{0%,10%{opacity:0;transform:translate(96px,132px) rotate(-12deg) scale(1.8)}20%,90%{opacity:1;transform:translate(96px,132px) rotate(-12deg) scale(1)}100%{opacity:0;transform:translate(96px,132px) rotate(-12deg) scale(1)}}
@keyframes tp414-stack{0%,28%{opacity:0;transform:translate(-30px,20px)}46%,90%{opacity:1;transform:none}100%{opacity:0;transform:none}}
@keyframes tp414-flip{0%,30%{transform:scaleX(1)}50%{transform:scaleX(0)}50.01%,100%{transform:scaleX(0)}}
@keyframes tp414-na{0%,48%{opacity:1}52%,100%{opacity:0}}
@keyframes tp414-nb{0%,48%{opacity:0}52%,100%{opacity:1}}
@keyframes tp414-batch{from{opacity:0;transform:translate(180px,20px)}to{opacity:1}}

/* Responsive */
@media(max-width:1100px){.tp414-bind-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:900px){
  .tp414-anat-grid,.tp414-reorder-grid,.tp414-brief,.tp414-head.is-split{grid-template-columns:minmax(0,1fr)}
  .tp414-steps{grid-template-columns:minmax(0,1fr);max-width:560px}
  .tp414-step:not(:last-child)::after{content:'↓';right:auto;left:50%;top:auto;bottom:-24px;margin-left:-8px;width:16px;height:24px}
  .tp414-steps{gap:24px}
  .tp37-points:has(>.tp37-point:nth-child(2):last-child){grid-template-columns:minmax(0,1fr)}
  .tp37-points:has(>.tp37-point:nth-child(2):last-child) .tp37-point{min-height:460px}
}
@media(max-width:600px){
  .tp414-bind-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tp414-bind:last-child{grid-column:1/-1}
  .tp414-next-fig{width:130px}
  .tp414-anat{padding:12px}
}