/* Greg studio steps 3 to 5 (plan 0457 Task 9, ported from the v11 prototype). ASCII only.
   Uses the shell's palette tokens (--navy, --rule, --paper, --bg-2, ...) from index.html.
   Selection and change marks are navy (Sven 17:06Z walk: no gold or yellow highlights). */

/* ---- step 3: format tiles ---- */
.fmts{display:flex;flex-wrap:wrap;gap:18px;margin-top:20px}
.fmt{width:210px;background:var(--paper,#fff);border:2px solid var(--rule,#ddd6ca);border-radius:12px;overflow:hidden;cursor:pointer;position:relative;align-self:flex-start}
.fmt:focus-visible{outline:3px solid var(--navy,#1f4e79);outline-offset:2px}
.fmt.on{border-color:var(--navy,#1f4e79);box-shadow:0 0 0 3px var(--navy-soft,#e7eef6)}
.fmt .th{width:100%;aspect-ratio:8.5/11;background:var(--bg-2,#ede8df);position:relative;overflow:hidden;border-bottom:1px solid var(--rule,#ddd6ca)}
.fmt .th img{display:block;width:100%;height:100%;object-fit:cover;object-position:top center;pointer-events:none}
.fmt .th .pg{position:absolute;left:0;top:0;width:640px;transform-origin:0 0;pointer-events:none}
.fmt .bd{padding:12px 14px}
.fmt .bd h3{margin:0 0 4px;font-size:16px}
.fmt .fd{font-size:13px;color:var(--ink-2,#4a5666)}
.fmt .tag{margin-top:6px}
.fmt .ck{position:absolute;top:10px;right:10px;width:26px;height:26px;border-radius:50%;background:#fff;border:2px solid var(--rule-2,#c9c1b4)}
.fmt.on .ck{background:var(--navy,#1f4e79);border-color:var(--navy,#1f4e79)}
.fmt.on .ck::after{content:'';position:absolute;left:7px;top:3px;width:6px;height:11px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}

/* ---- steps 4 and 5: tabs, "This one is good", "Whole page" ---- */
.rbar{display:flex;align-items:center;gap:10px;margin:14px 0}
.rbar .sp{flex:1;min-width:6px}
/* one row of tabs (Sven's walk): no wrap, tighter padding; a scroll only as the last resort */
.rtabs{display:flex;gap:6px;flex-wrap:nowrap;align-items:center;min-width:0;overflow-x:auto}
.rtabs button{flex:none;white-space:nowrap;border:1px solid var(--rule-2,#c9c1b4);background:var(--paper,#fff);border-radius:8px;padding:5px 10px;font:inherit;font-size:14px;color:var(--ink,#1b2431);cursor:pointer}
.rtabs button.on{background:var(--navy,#1f4e79);color:#fff;border-color:var(--navy,#1f4e79)}
.rtabs button.on .tag.ok{background:#fff}
.rtabs button.pend{opacity:.6;cursor:default}
/* "Whole page" sits beside "This one is good" in the right-hand group */
.rbar .wholepg{flex:none;white-space:nowrap;width:auto}
.rbar .wholepg.on{background:var(--navy,#1f4e79);color:#fff;border-color:var(--navy,#1f4e79)}
#goodbtn{flex:none;white-space:nowrap;width:auto;min-width:max-content}
#goodbtn[disabled]{opacity:.7;cursor:default}
.ferr{color:var(--bad,#9b2c2c);font-size:13px}
.fhint{color:var(--ink-3,#5b6472);font-size:14px}
.fempty{padding:30px 6px}
.fspin{display:inline-block;width:12px;height:12px;margin-right:6px;vertical-align:-1px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:fspin .8s linear infinite}
@keyframes fspin{to{transform:rotate(360deg)}}

/* ---- the page: the template's PNGs, regions laid over them ---- */
.fpages{display:flex;flex-direction:column;align-items:center;gap:22px;padding:4px 0 20px}
/* each page keeps its own natural height (pages fit their content); no fixed letter box */
.fpage{position:relative;width:100%;max-width:820px;background:#fff;border:1px solid var(--rule,#ddd6ca);border-radius:6px;box-shadow:0 6px 24px rgba(0,0,0,.08);overflow:hidden}
.fpage .fpimg{display:block;width:100%;height:auto;user-select:none}
.fpage:not(.ld){min-height:360px;background:linear-gradient(90deg,#ece6db 25%,#f7f4ee 50%,#ece6db 75%);background-size:200% 100%;animation:fshim 1.2s infinite linear}
.fpage:not(.ld) .fpimg{opacity:0}
.fpage:not(.ld) .rg,.fpage:not(.ld) .swapwrap{visibility:hidden}
.fpage.err::after{content:'This page could not be loaded.';position:absolute;left:20px;top:20px;color:var(--bad,#9b2c2c);font-size:14px}
@keyframes fshim{to{background-position:-200% 0}}
.fpages.wholesel .fpage{outline:2px solid var(--navy,#1f4e79);outline-offset:3px}

/* reveal: a new render writes on top to bottom, page by page; pictures fade in */
.fpage.rev .fpimg{animation:freveal 1.1s ease-out both;animation-delay:calc(var(--i,0) * .45s)}
@keyframes freveal{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}
.fpage.rev .rg-image{animation:fpicfade 1.4s ease-out both;animation-delay:calc(var(--i,0) * .45s + .3s)}
@keyframes fpicfade{from{background:rgba(255,255,255,.92)}to{background:rgba(255,255,255,0)}}

/* regions: one transparent button per part of the page; pictures sit under the text */
.rg{position:absolute;margin:0;padding:0;border:0;background:transparent;border-radius:3px;cursor:pointer;outline:2px dashed transparent;outline-offset:1px;transition:outline-color .2s,background .3s}
.rg-image{z-index:1}
.rg-fixed{z-index:2;cursor:help}
.rg-text{z-index:3}
.rg:hover{outline-color:var(--navy,#1f4e79)}
.rg-fixed:hover{outline-color:var(--rule-2,#c9c1b4)}
.rg:focus-visible{outline:2px solid var(--navy,#1f4e79)}
.rg.sel{outline:2px solid var(--navy,#1f4e79)!important;background:transparent}
.rg.rgflash{animation:frgflash 2.4s ease-out}
@keyframes frgflash{0%,40%{outline:3px solid var(--navy,#1f4e79);box-shadow:0 0 0 6px rgba(31,78,121,.25)}100%{outline-color:transparent;box-shadow:none}}
.rg.imgload{background:rgba(255,255,255,.65)}
.swapwrap{position:absolute;z-index:4;transform:translate(-50%,-50%);text-align:center}
.swapwrap .swapchip{box-shadow:0 4px 14px rgba(0,0,0,.25);white-space:nowrap}
.swapwrap .chiprow{display:flex;gap:6px;align-items:center;justify-content:center}
.swapwrap .nudges{display:flex;gap:4px}
.swapwrap .nudge{box-shadow:0 4px 14px rgba(0,0,0,.2);white-space:nowrap}
.swapwrap .draghint{margin-top:6px;display:inline-block;background:rgba(255,255,255,.92);color:var(--navy,#1f4e79);border-radius:6px;padding:2px 8px;font-size:12px;pointer-events:none}
/* moving a picture: grab it when selected; it follows the pointer; a veil while the new page prints */
.rg-image.sel{cursor:grab;touch-action:none}
.rg-image.sel.dragging{cursor:grabbing;overflow:hidden}
.rg-image .rgdrag{position:absolute;inset:0;background-repeat:no-repeat;pointer-events:none;border-radius:3px}
.rg.moving{background:rgba(255,255,255,.65)}
.rg.moving::after{content:'';position:absolute;left:50%;top:50%;width:26px;height:26px;margin:-13px 0 0 -13px;border:3px solid var(--navy,#1f4e79);border-right-color:transparent;border-radius:50%;animation:fspin .8s linear infinite}
.swapwrap .ferr{margin-top:6px;background:#fff;border-radius:6px;padding:4px 8px}

@media (prefers-reduced-motion:reduce){.fpage,.fpage .fpimg,.rg,.fspin{animation:none!important}}