/* Cover Factory: the Template step (BRANDS P8.2). Classes .tp*, .tpl1, .tpx*; ported from design/frames-style/st.css (s1, s2, s2b, s2f, s2g). Tokens from tokens.css. */
.tp{display:grid;gap:var(--s-5);min-width:0}
.tp-card{overflow:hidden}
.tp-p{margin:0;color:var(--text-2);font-size:var(--fs-3);line-height:20px}
.tp-hint{margin:var(--s-2) 0 0;color:var(--text-3);font-size:var(--fs-1);line-height:16px}
.tp-why{display:flex;align-items:center;gap:6px;margin:var(--s-3) 0 0;color:var(--text-3);font-size:var(--fs-1);line-height:16px}
.tp-why .i{width:var(--icon-sm);height:var(--icon-sm);color:var(--amber)}
.tp-spin{display:inline-block;width:15px;height:15px;border-radius:50%;border:2px solid var(--accent-soft-2);border-top-color:var(--accent);animation:spin var(--loop-spin) linear infinite;vertical-align:-3px}
.btn .tp-spin{margin-right:var(--s-2)}
/* errors: red = cannot, amber = pick something or wait */
.tp-err{display:flex;gap:var(--s-2);padding:10px var(--s-3);border-radius:var(--r-2);background:var(--red-soft);color:var(--text);font-size:var(--fs-2);line-height:18px}
.tp-err>.i{flex:none;width:var(--icon-md);height:var(--icon-md);margin-top:1px;color:var(--red)}
.tp-err>div{min-width:0;flex:1}
.tp-err b{display:block;font-weight:600}
.tp-err span{display:block;color:var(--text-2)}
.tp-err.amber{background:var(--amber-soft)}
.tp-err.amber>.i{color:var(--amber)}
.tp-err .tp-acts{margin-top:10px}
.tp-acts{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2);margin-top:14px}
.tp-acts.c{justify-content:center}
.tp-acts.rc{margin-top:var(--s-4)}
.tp-acct{display:flex;align-items:center;gap:6px;margin-top:var(--s-2);padding:6px 6px 6px 10px;border-radius:var(--r-2);background:var(--bg);box-shadow:var(--edge)}
.tp-acct code{flex:1;min-width:0;color:var(--text);font:400 var(--fs-2)/18px var(--font);overflow-wrap:anywhere}
.tp-acct .icon-btn{width:24px;height:var(--ctl-xs)}
.tp-acct .icon-btn .i{width:var(--icon-sm);height:var(--icon-sm)}
.tp-conf{display:flex;align-items:center;gap:var(--s-3);padding:var(--s-3) 14px;border-radius:var(--r-2);background:var(--amber-soft);font-size:var(--fs-2);line-height:18px}
.tp-conf>.i{flex:none;width:var(--icon-md);height:var(--icon-md);color:var(--amber)}
.tp-conf>div:nth-child(2){flex:1;min-width:0}
.tp-conf b{display:block;font-weight:600}
.tp-conf span{color:var(--text-2)}
.tp-conf-a{display:flex;gap:6px}
/* the link field */
.tp-lf{display:grid;gap:var(--s-2);min-width:0}
.tp-lab{color:var(--text-2);font-size:var(--fs-2);line-height:18px;font-weight:500}
.tp-row{display:flex;gap:var(--s-2)}
.tp-in{flex:1;min-width:200px;height:44px;font-family:var(--font);font-size:var(--fs-3)}
.tp-in:disabled{opacity:.6;cursor:not-allowed}
.tp-row .btn.lg{min-width:108px;justify-content:center}
.tp-msg:empty{display:none}
.tp-msg .tp-err{margin-top:2px}
/* s1 */
.tp-or{margin:0 0 var(--s-2);color:var(--text-3);font-size:var(--fs-1)}
.tp-cand{display:flex;align-items:center;gap:var(--s-3);padding:10px var(--s-3);border:1px solid var(--line);border-radius:var(--r-3);background:var(--bg)}
.tp-cand+.tp-cand{margin-top:6px}
.tp-cand .i{flex:none;width:var(--icon-md);height:var(--icon-md);color:var(--text-3)}
.tp-cand div{flex:1;min-width:0}
.tp-cand b{display:block;font-size:var(--fs-2);line-height:18px}
.tp-cand span{color:var(--text-3);font-size:var(--fs-1)}
/* s2b: one slot ghost on the left, the words and actions on the right */
.tp-st{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr);gap:var(--s-8);align-items:center;padding:28px 36px}
.tp-stc{display:grid;gap:14px;align-content:center;min-width:0}
.tp-stc .tp-acts{margin-top:0}
.tp-stc .st-h{margin:0}
.tp-ghost{position:relative;display:grid;place-items:center;align-content:center;gap:6px;aspect-ratio:4/3;border-radius:var(--r-3);background:var(--dots) 0 0/16px 16px,var(--bg-deep);box-shadow:var(--edge);color:var(--text-3)}
.tp-ghost .i{width:28px;height:28px;stroke-width:1.4}
.tp-ghost .tp-spin{width:26px;height:26px;border-width:3px}
.tp-ghost.amber{color:var(--amber)}
.tp-ghost.red{color:var(--red)}
.tp-fmt{grid-template-columns:auto auto;justify-content:center;gap:10px var(--s-6);padding:var(--s-5)}
.tp-fmt .o{display:block;width:76px;height:101px;border-radius:var(--r-1);border:1.5px solid var(--red)}
.tp-fmt .o.dash{border:1.5px dashed var(--line-hover);width:101px;height:76px;align-self:center}
.tp-fmt .o[data-a="3:4"]{width:76px;height:101px}
.tp-fmt .o[data-a="4:3"]{width:101px;height:76px}
.tp-fmt small{color:var(--text-3);font:400 var(--fs-1)/16px var(--font);text-align:center}
.tp-prog{display:grid;gap:10px;margin:0;padding:0;list-style:none}
.tp-prog li{display:flex;align-items:center;gap:10px;color:var(--text-2);font-size:var(--fs-2);line-height:18px}
.tp-prog li .i{width:var(--icon-md);height:var(--icon-md)}
.tp-prog li.done,.tp-prog li.now{color:var(--text)}
.tp-prog li.done .i{color:var(--green)}
.tp-prog li.m-pop .i{animation:q-pop var(--dur-4) var(--ease-pop) both}
.tp-prog .ring{width:15px;height:15px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--line-hover)}
.tp-frames,.tp-layers{display:grid;gap:6px;margin:0;padding:0;list-style:none}
.tp-frame{display:flex;align-items:center;gap:var(--s-3);padding:10px var(--s-3);border:1px solid var(--line);border-radius:var(--r-3);background:var(--bg)}
.tp-frame.dim{opacity:.55}
.tp-frame>.i{flex:none;width:var(--icon-md);height:var(--icon-md);color:var(--text-3)}
.tp-frame div{flex:1;min-width:0}
.tp-frame b{display:block;font-size:var(--fs-2);line-height:18px}
.tp-frame span{color:var(--text-3);font-size:var(--fs-1)}
.tp-role{display:grid;gap:var(--s-2)}
.tp-role-h{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s-2);padding:10px var(--s-3);border-radius:var(--r-2);background:var(--bg);box-shadow:var(--edge)}
.tp-role-h b{font-size:var(--fs-2)}
.tp-role-h span{color:var(--amber);font-size:var(--fs-1)}
.tp-layers button{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);width:100%;padding:var(--s-2) var(--s-3);border-radius:var(--r-2);background:var(--surface);box-shadow:var(--edge);text-align:left;transition:background var(--dur-2) var(--ease)}
.tp-layers button:hover:not(:disabled){background:var(--hover);box-shadow:var(--edge-hover)}
.tp-layers button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.tp-layers b{font-size:var(--fs-2);line-height:18px;font-weight:500}
.tp-layers span{color:var(--text-3);font-size:var(--fs-1)}
/* s2 / s2g / s2f */
.tp-src{display:flex;flex-wrap:wrap;align-items:center;gap:2px var(--s-2);min-height:36px;margin:0 0 var(--s-4);color:var(--text-2);font-size:var(--fs-2);min-width:0}
.tp-src b{color:var(--text);font-weight:600;white-space:nowrap}
.tp-src .rf-logo{width:9px;height:14px;flex:none}
.tp-src .end{margin-left:auto;display:flex;gap:2px;flex:none}
.tp-repl{margin:0 0 var(--s-4);padding:14px;border-radius:var(--r-3);background:var(--bg);box-shadow:var(--edge)}
.tp-cv{position:relative;width:100%;max-width:600px;margin:0 auto;border-radius:var(--r-4);overflow:hidden;background:var(--bg-deep);aspect-ratio:4/3;box-shadow:0 0 0 1px var(--line)}
.tp-cv[data-fmt="3:4"]{aspect-ratio:3/4;max-width:420px}
.tp-cv img{display:block;width:100%;height:100%;object-fit:cover}
.tp-cv.dim img{opacity:.5}
.tp-cv-ph{position:absolute;inset:0;display:grid;place-items:center;align-content:center;gap:var(--s-2);color:var(--text-3);font-size:var(--fs-1);background:var(--dots) 0 0/16px 16px,var(--bg-deep)}
.tp-cv-ph .i{width:24px;height:24px;stroke-width:1.4}
.tp-hl{position:absolute;z-index:6;border-radius:var(--r-1);box-shadow:0 0 0 2px var(--accent),0 0 0 999px rgb(var(--p-navy-rgb) / .55);pointer-events:none}
.tp-hl span{position:absolute;left:-2px;bottom:calc(100% + 6px);height:20px;padding:0 var(--s-2);border-radius:var(--r-1);background:var(--accent);color:var(--on-accent);font:600 var(--fs-0)/20px var(--font);white-space:nowrap}
.tp-ok{display:flex;align-items:center;justify-content:center;gap:6px;margin:14px 0 0;color:var(--text-3);font-size:var(--fs-1)}
.tp-ok .i{width:var(--icon-sm);height:var(--icon-sm);color:var(--green)}
.tp-ok.warn{color:var(--amber)}
.tp-ok.warn .i{color:var(--amber)}
.tp-by{display:flex;align-items:flex-start;justify-content:center;gap:var(--s-2);margin:14px 0 0;color:var(--text-2);font-size:var(--fs-2);line-height:20px}
.tp-by>.i{flex:none;width:var(--icon-md);height:var(--icon-md);margin-top:2px;color:var(--green)}
.tp-by b{display:block;color:var(--text);font-weight:600}
.tp-by span{display:inline-flex;align-items:center;gap:6px}
.tp-by span+span{display:flex;color:var(--text-3);font-size:var(--fs-1)}
.tp-det{margin:14px 0 0;padding:var(--s-3) 14px 6px;border-radius:var(--r-2);background:var(--bg);border:1px solid var(--line)}
.tp-dh{display:flex;align-items:baseline;gap:var(--s-2);margin:0 0 6px;font-size:var(--fs-2);font-weight:600}
.tp-dh span{color:var(--text-3);font-size:var(--fs-1);font-weight:400}
.tp-dr{display:grid;grid-template-columns:52px minmax(0,1fr);gap:10px;padding:6px 0;border-top:1px solid var(--line);font-size:var(--fs-1);line-height:18px}
.tp-dr span{color:var(--text-3)}
.tp-dr b{font-weight:500}
.tp-dr em{display:inline-flex;align-items:center;gap:var(--s-1);margin-left:var(--s-2);font-style:normal;font-weight:500;color:var(--green)}
.tp-dr em.warn{color:var(--amber)}
.tp-dr em .i{width:var(--icon-xs);height:var(--icon-xs)}
/* s2f */
.tp-rc{padding:var(--s-4) var(--s-6) var(--s-6);display:grid;gap:0}
.tp-rcx{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-4);margin:0 0 var(--s-4)}
.tp-rcx figure{margin:0;min-width:0}
.tp-rcx figcaption{display:flex;align-items:center;gap:6px;margin:var(--s-2) 0 0;color:var(--text-3);font:400 var(--fs-1)/16px var(--font)}
.tp-rcx figcaption .rf-logo{width:7px;height:11px}
.tp-rcx .tp-cv{max-width:none}
.tp-cv .diff{position:absolute;inset:0;pointer-events:none}
.tp-cv .diff i{position:absolute;border-radius:var(--r-1);box-shadow:0 0 0 2px var(--amber)}
.tp-cv .diff i span{position:absolute;left:-2px;bottom:calc(100% + 4px);height:18px;padding:0 6px;border-radius:var(--r-1);background:var(--amber);color:var(--on-amber);font:600 var(--fs-0)/18px var(--font);letter-spacing:.02em;white-space:nowrap}
.tp-tog{display:inline-flex;align-items:center;gap:var(--s-2);margin-left:auto;color:var(--text-2);font-size:var(--fs-2);cursor:pointer;position:relative}
.tp-tog input{position:absolute;opacity:0;inset:0;cursor:pointer}
.tp-tog .sw{position:relative;width:32px;height:18px;border-radius:var(--r-2);background:var(--active);box-shadow:var(--edge-strong);transition:background var(--dur-2) var(--ease)}
.tp-tog .sw::after{content:"";position:absolute;left:2px;top:2px;width:14px;height:14px;border-radius:50%;background:var(--text-2);transition:transform var(--dur-2) var(--ease)}
.tp-tog input:checked+.sw{background:var(--accent)}
.tp-tog input:checked+.sw::after{transform:translateX(14px);background:var(--on-accent)}
.tp-tog input:focus-visible+.sw{outline:2px solid var(--accent);outline-offset:2px}
.tp-src .sep{flex:none;font-style:normal;color:var(--text-3)}
.tp-src .txt{min-width:0}
.tp-cand.dim{opacity:.55}