/* The banner and its cover are separate cqw containers. */
#peterpen-page-designs .work-banner{position:relative;container-type:inline-size;aspect-ratio:5/2;width:100%;overflow:hidden;border-radius:8px;background:#1d2a3a}
#peterpen-page-designs .work-banner-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
#peterpen-page-designs .work-banner-tint{display:block;overflow:hidden;border-radius:inherit}
#peterpen-page-designs .work-banner-tint>*{position:absolute;left:-10%;top:50%;width:120%;height:auto;aspect-ratio:2/3;transform:translateY(-50%);filter:blur(3cqw) saturate(1.2)}
#peterpen-page-designs .work-banner-tint img{display:block;width:100%;height:100%;object-fit:cover}
#peterpen-page-designs .work-banner-tint .work-cover-title{display:none}
#peterpen-page-designs .work-banner-tint::after{content:'';position:absolute;inset:0;background:rgb(255 255 255/.58)}
#peterpen-page-designs .work-banner-tint[data-tint=dark]::after{background:rgb(14 16 22/.58)}
#peterpen-page-designs .wr-banner-tint-thumb{position:relative;display:block;aspect-ratio:5/2;overflow:hidden;container-type:inline-size;background:#1d2a3a}
#peterpen-page-designs .work-banner-cover{position:absolute;top:8%;left:6%;height:84%;aspect-ratio:2/3;container-type:inline-size}
/* The book turns toward the text: page edge shows on the right, spine on the left, nearly frontal in the middle. */
#peterpen-page-designs .work-banner-cover>.pp-book{--book-turn:22deg}
#peterpen-page-designs .work-banner[data-cover-side=center]>.work-banner-cover>.pp-book{--book-turn:-7deg}
#peterpen-page-designs .work-banner[data-cover-side=right]>.work-banner-cover>.pp-book{--book-turn:-22deg}
#peterpen-page-designs .work-banner[data-cover-side=center]>.work-banner-cover{left:38.8%}
#peterpen-page-designs .work-banner[data-cover-side=right]>.work-banner-cover{left:71.6%}
#peterpen-page-designs .work-banner>.cover-layer{position:absolute;z-index:2;display:block;max-height:84%;overflow:hidden;white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.22;color:#fff;font-size:7.2cqw;box-sizing:border-box}
#peterpen-page-designs .work-banner>:is(.cover-layer-author,.cover-layer-copy,.cover-layer-genre){font-size:3.2cqw;max-height:18%}
#peterpen-page-designs .work-banner-title{display:block;word-break:keep-all;overflow-wrap:anywhere}
#peterpen-page-designs .work-banner>.cover-layer-sized{display:grid;align-content:center;grid-template-rows:minmax(0,1fr);max-height:none}
#peterpen-page-designs .work-banner>.cover-layer-sized>.cover-layer-text{display:grid;align-content:center}
/* cover-layer-text and cover-run effects reuse work-register.css unchanged. */
#peterpen-page-designs .work-banner>.cover-layer .cover-run-shadow{--cover-run-shadow:0 .3cqw .7cqw #000b}
#peterpen-page-designs .work-banner-dark>.cover-layer .cover-run-shadow{--cover-run-shadow:0 .3cqw .7cqw #fffc}
#peterpen-page-designs .work-banner>.cover-layer-on-light .cover-run-shadow{--cover-run-shadow:0 .3cqw .7cqw #fffc}
#peterpen-page-designs .work-banner>.cover-layer-on-dark .cover-run-shadow{--cover-run-shadow:0 .3cqw .7cqw #000b}
#peterpen-page-designs .wr-banner-picker-head{display:flex;align-items:center;justify-content:space-between;gap:12px;color:var(--ink)}
#peterpen-page-designs .wr-banner-picker-head h2{margin:0;font-size:18px}
#peterpen-page-designs .wr-banner-picker-head button{display:grid;place-items:center;min-height:32px;padding:4px 8px;border:0;border-radius:6px;background:transparent;color:var(--muted);cursor:pointer}
#peterpen-page-designs .wr-banner-moods{display:flex;gap:4px;overflow-x:auto;flex:none;padding:0;border-bottom:1px solid var(--line)}
#peterpen-page-designs .wr-register .wr-banner-moods button,#peterpen-page-designs .wr-banner-moods button{flex:none;min-height:36px;padding:8px 12px;border:0;border-bottom:2px solid transparent;border-radius:0;background:transparent;color:var(--muted);font:inherit;font-size:13px;cursor:pointer}
#peterpen-page-designs .wr-register .wr-banner-moods button[aria-selected=true],#peterpen-page-designs .wr-banner-moods button[aria-selected=true]{border-bottom-color:var(--accent-solid);background:transparent;color:var(--accent-text,var(--accent-solid));font-weight:600}
#peterpen-page-designs .wr-banner-picker-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;padding:4px;max-height:60dvh;overflow-y:auto}
#peterpen-page-designs .wr-register .wr-banner-picker-grid button,#peterpen-page-designs .wr-banner-picker-grid button{display:block;min-height:0;padding:0;border:2px solid transparent;border-radius:6px;overflow:hidden;background:var(--soft);color:var(--ink);font:inherit;aspect-ratio:auto;cursor:pointer}
#peterpen-page-designs .wr-banner-picker-grid button[aria-pressed=true]{border-color:var(--accent-solid)}
#peterpen-page-designs .wr-register .wr-banner-picker-grid img,#peterpen-page-designs .wr-banner-picker-grid img{display:block;width:100%;height:auto;aspect-ratio:5/2;object-fit:cover}
#peterpen-page-designs .wr-banner-picker-grid button>span{display:block;padding:8px;font-size:12px;line-height:1.4;text-align:left}
#peterpen-page-designs :is(.wr-banner-picker-head,.wr-banner-moods,.wr-banner-picker-grid) button:focus-visible{outline:2px solid var(--accent-solid);outline-offset:2px}
@media(hover:hover) and (pointer:fine){#peterpen-page-designs .wr-banner-picker-head button:hover,#peterpen-page-designs .wr-banner-moods button:hover{color:var(--ink);background:var(--soft)}#peterpen-page-designs .wr-banner-picker-grid button:hover:not([aria-pressed=true]){border-color:var(--line)}}
@media(max-width:600px){#peterpen-page-designs .wr-banner-picker-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Registration uses the existing cover buttons, tokens and spacing. */
#peterpen-page-designs .wr-banner-step{display:grid;gap:12px;min-width:0}
#peterpen-page-designs .wr-register .wr-banner-upload{aspect-ratio:5/2;margin:0}
#peterpen-page-designs .wr-banner-toolbar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;min-width:0}
#peterpen-page-designs .wr-banner-side{display:flex;align-items:center;flex-wrap:wrap;gap:8px;min-width:0}
#peterpen-page-designs .wr-banner-side>span{font-size:12px;color:var(--muted)}
#peterpen-page-designs .wr-banner-side .wr-design-segments{display:flex;gap:4px}
#peterpen-page-designs .wr-banner-side .wr-design-segments button{min-height:32px;padding:4px 8px;border:1px solid transparent;border-radius:8px;background:var(--soft);font-size:12px}
#peterpen-page-designs .wr-banner-side .wr-design-segments button[aria-pressed=true]{border-color:var(--accent-solid);color:var(--accent-text);background:color-mix(in srgb,var(--accent-solid) 10%,var(--paper))}
#peterpen-page-designs .wr-register .wr-banner-actions{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:0;min-width:0}
#peterpen-page-designs .wr-register .wr-banner-actions .ui-icon{flex:none;width:12px;height:12px}
#peterpen-page-designs .wr-banner-state{display:flex;align-items:center;flex-wrap:wrap;gap:8px;font-size:12px;color:var(--muted)}
#peterpen-page-designs .wr-banner-step :is(.wr-cover-hint,.wr-cover-pc-hint){margin:0;font-size:12px;color:var(--muted)}
#peterpen-page-designs .wr-banner-step>.wr-banner-state{min-height:0}
#peterpen-page-designs .wr-banner-step>.wr-banner-state+:is(.wr-cover-hint,.wr-cover-pc-hint),#peterpen-page-designs .wr-banner-step>.wr-cover-hint+.wr-cover-pc-hint{margin-top:-8px}
#peterpen-page-designs .wr-design-dialog--banner .wr-design-left{position:sticky;top:0;z-index:3;padding-bottom:8px;background:var(--paper)}
#peterpen-page-designs .wr-banner-review{grid-column:1/-1;width:100%;max-width:480px;min-width:0;margin:16px auto 0}
#peterpen-page-designs .wr-design-dialog--banner .wr-design-grid{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto}
#peterpen-page-designs .wr-design-dialog--banner .wr-design-left{padding:0;align-self:auto}
#peterpen-page-designs .wr-design-dialog--banner .wr-design-preview{position:relative;top:auto;max-width:440px;width:100%;margin:0 auto}
#peterpen-page-designs .wr-design-dialog--banner .wr-design-controls{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
#peterpen-page-designs .wr-design-dialog--banner .wr-design-texts{grid-column:1/-1}
#peterpen-page-designs .wr-design-dialog--banner :is(.wr-design-selected-controls,.wr-design-selection,.wr-design-hint,[data-wr-design-status]){grid-column:1/-1}
#peterpen-page-designs .wr-design-dialog--banner .wr-design-selected-controls{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
#peterpen-page-designs .wr-design-dialog--banner .wr-design-preview .work-banner{overflow:visible}
#peterpen-page-designs .wr-design-dialog--banner .work-banner-bg{border-radius:inherit}
#peterpen-page-designs .wr-design-dialog--banner .work-banner-cover [data-cover-layer]{pointer-events:none;outline:none}
#peterpen-page-designs .wr-design-dialog--banner .wr-design-preview .work-banner>.cover-layer:not(.cover-layer-sized){display:flex;flex-direction:column}
@media(max-width:600px){#peterpen-page-designs .wr-design-dialog--banner .wr-design-selected-controls{grid-template-columns:minmax(0,1fr)}}
/* Banner text items: one row each — checkbox, then the text (or a button that picks the box for styling). */
#peterpen-page-designs .wr-design-dialog--banner .wr-banner-texts{margin:0;padding:0 0 12px;border:0;border-bottom:1px solid var(--line);min-width:0}
#peterpen-page-designs .wr-design-dialog--banner .wr-banner-texts legend{float:left;width:100%;margin:0 0 6px;padding:0;font-size:13px;font-weight:600}
#peterpen-page-designs .wr-design-dialog--banner .wr-banner-text-row{display:grid;grid-template-columns:96px minmax(0,1fr) auto;align-items:center;gap:8px;min-height:36px}
#peterpen-page-designs .wr-design-dialog--banner .wr-banner-text-row>:nth-child(2):last-child{grid-column:2/-1}
#peterpen-page-designs .wr-design-dialog--banner .wr-design-controls label.wr-banner-text-check{display:flex;align-items:center;gap:6px;margin:0;font-size:13px;font-weight:500;cursor:pointer}
#peterpen-page-designs .wr-design-dialog--banner .wr-banner-text-row :is(textarea,input[type=text]){box-sizing:border-box;width:100%;min-width:0;height:36px;margin:0;padding:7px 12px;border:1px solid var(--line);border-radius:10px;background:var(--paper);color:var(--ink);font-size:14px;line-height:20px;resize:none}
#peterpen-page-designs .wr-design-dialog--banner .wr-banner-text-row :is(textarea,input[type=text]):disabled{background:var(--soft);color:var(--muted)}
#peterpen-page-designs .wr-design-dialog--banner .wr-banner-text-row[data-selected] :is(textarea,input[type=text],.wr-design-author-name){border-color:var(--accent-solid)}
#peterpen-page-designs .wr-design-dialog--banner .wr-banner-text-row small{font-size:11px;color:var(--muted);white-space:nowrap}
#peterpen-page-designs .wr-design-dialog--banner .wr-banner-texts .wr-design-guide{margin-top:4px}
#peterpen-page-designs .wr-banner-texts-quick{display:flex;align-items:center;flex-wrap:wrap;gap:0 4px;font-size:13px}
#peterpen-page-designs .wr-banner-texts-quick>span{margin-right:8px;font-weight:600}
#peterpen-page-designs .wr-banner-texts-quick .wr-check{margin:0 12px 0 0;min-height:36px}
#peterpen-page-designs .wr-register [data-wr-form] .wr-banner-step label.wr-banner-copy-field{display:flex;align-items:center;gap:8px;max-width:420px;font-size:13px}
#peterpen-page-designs .wr-banner-copy-field>span{flex:none;font-weight:600}
#peterpen-page-designs .wr-banner-copy-field input{flex:1 1 auto;min-width:0;height:36px;padding:0 12px;border:1px solid var(--line);border-radius:10px;background:var(--paper);color:var(--ink);font:inherit;font-size:14px}
#peterpen-page-designs .wr-banner-copy-field small{flex:none;font-size:11px;color:var(--muted)}
@media(max-width:560px){#peterpen-page-designs .wr-banner-texts-quick .wr-check{min-height:44px}#peterpen-page-designs .wr-banner-copy-field input{height:44px}}