.catalog-dialog{width:min(840px,calc(100vw - 24px));max-width:none;max-height:90dvh}.catalog-dialog .dialog-card,.catalog-editor .dialog-card{width:100%;max-width:none;box-sizing:border-box}.catalog-toolbar,.catalog-record-actions{display:flex;gap:var(--space-4);flex-wrap:wrap}.catalog-toolbar{margin-bottom:14px}.catalog-record{padding:16px 0;border-top:1px solid var(--line)}.catalog-record-summary{display:flex;gap:var(--space-6);align-items:center;min-width:0}.catalog-record-summary>div{min-width:0}.catalog-record-summary img{border-radius:var(--radius-md);object-fit:cover;flex:none}.catalog-record h3{margin:0;color:var(--accent);overflow-wrap:anywhere}.catalog-record p{margin:5px 0 12px;color:var(--muted);font-size:var(--size-compact);overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.catalog-record-actions button{font-size:var(--size-small);min-height:40px}.catalog-editor{width:min(700px,calc(100vw - 24px));max-width:none;max-height:90dvh}.catalog-editor label{display:grid;gap:var(--space-3);margin:14px 0 6px;min-width:0}.catalog-editor input,.catalog-editor select,.catalog-editor textarea{box-sizing:border-box;min-width:0;width:100%;padding:10px;border:1px solid var(--line);border-radius:var(--radius-md);background:var(--bg);color:var(--text)}.catalog-editor details{margin-top:18px}.catalog-editor summary{cursor:pointer;color:var(--accent)}.catalog-fields{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-6)}.catalog-editor [role=status],#catalog-status{overflow-wrap:anywhere;color:var(--muted)}.catalog-editor [data-world-assist]{font:var(--size-label) var(--head);padding:6px 10px}.creator-portrait-actions{display:flex;flex-wrap:wrap;gap:var(--space-3);margin:10px 0}.creator-portrait-actions button{font-size:var(--size-label)}.opening-pending{padding:15px;border:1px solid var(--line);border-radius:var(--radius-lg);max-width:820px;margin:20px auto}.opening-pending p{margin:0 0 12px}.opening-pending button{min-height:44px}.skill-pick .skill-rank{margin-top:6px}
@media(max-width:600px){.catalog-fields{grid-template-columns:1fr;gap:0}.catalog-dialog .dialog-card,.catalog-editor .dialog-card{padding:16px}.catalog-toolbar button,.catalog-record-actions button{min-height:44px}.catalog-record-actions{gap:var(--space-3)}.catalog-editor input,.catalog-editor select,.catalog-editor textarea{font-size:var(--size-body)}}
.catalog-dialog #catalog-status:empty{display:none}
.catalog-editor label[hidden]{display:none}
/* The world editor (v7.9): generate from an idea, the world's people, and
   its magic rules and words. */
.world-generate{display:grid;gap:var(--space-3);padding:14px;border:1px solid var(--accent-600);border-radius:var(--radius-lg);background:linear-gradient(135deg,rgb(var(--accent-900-rgb) / .45),rgb(var(--surface-low-rgb) / .8))}
.world-generate h3{margin:0;color:var(--accent);font:600 var(--size-lead) var(--head)}
.world-generate .hint{margin:0}
.catalog-editor label.world-keep{display:flex;flex-direction:row;align-items:center;gap:var(--space-4);margin:4px 0;color:var(--text)}
.catalog-editor .world-keep input{width:auto;min-width:0}
.world-generate-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-6)}
.world-generate-row .primary,.world-generate-row button{min-height:44px;padding:0 18px}
.world-generate-row p{flex:1 1 200px;margin:0;color:var(--muted);font-size:var(--size-small)}
.catalog-fields>div{display:grid;align-content:start;min-width:0}
.world-magic{display:grid;gap:var(--space-3)}
.world-magic[hidden]{display:none}
.world-cast,.world-factions{display:grid;gap:var(--space-5);margin:18px 0 0;padding:14px;border:1px solid var(--stone-750);border-radius:var(--radius-md);background:rgb(var(--surface-low-rgb) / .58);min-width:0}
.world-cast>legend,.world-factions>legend{padding:0 8px;color:var(--accent-350);font:500 var(--size-body) var(--body)}
.world-cast .hint,.world-factions .hint{margin:0}
.world-cast [data-world-cast],.world-factions [data-world-factions]{display:grid;gap:var(--space-6)}
.catalog-editor :is(.world-person,.world-faction){min-width:0;margin:0;padding:0 12px;border:1px solid var(--line);border-radius:var(--radius-md);background:var(--surface)}
.catalog-editor :is(.world-person,.world-faction)[open]{padding-bottom:12px}
.catalog-editor :is(.world-person,.world-faction) summary{min-height:44px;display:flex;align-items:center;color:var(--accent);font:600 var(--size-ui) var(--head);overflow-wrap:anywhere}
.catalog-editor :is(.world-person,.world-faction) label{margin:8px 0 2px}
.catalog-editor :is(.world-person,.world-faction) textarea{min-height:0;resize:vertical}
.world-person-remove{margin-top:10px;min-height:40px;font-size:var(--size-small)}
.world-cast-actions{display:flex;flex-wrap:wrap;gap:var(--space-4)}
.world-cast-actions button{min-height:44px}
/* Shared worlds (v7.25): the Shared tab, and sharing notes on worlds. */
.catalog-toolbar[hidden]{display:none}
.shared-intro{margin:0 0 14px;color:var(--muted);font-size:var(--size-compact);line-height:1.5}
.catalog-record .shared-by{margin:2px 0 6px;color:var(--accent-550);font:var(--size-label) var(--head);-webkit-line-clamp:1}
.catalog-record .world-share-note{display:block;margin:-6px 0 12px;color:var(--accent-300);font:var(--size-label) var(--head)}
/* The collection (numbers-based branch, the gallery; src/ui/catalog-cards.mjs):
   one row of tabs with Adventures first, each with its
   icon and count, New and Import, then the records as their pictures: the
   adventure played last as a banner with Continue, every other adventure
   and world two to a row (more on a wide screen), characters three to a row
   as full figures, the name over the foot of each. A tile opens what it is
   for (Resume; Start adventure); its ⋯ menu holds the rest. */
.catalog-tabs{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:1px;margin:12px -20px;background:var(--line);border-block:1px solid var(--line)}
.catalog-tabs button{display:grid;justify-items:center;align-content:center;gap:3px;min-width:0;min-height:58px;padding:8px 0;border:0;border-radius:0;background:var(--surface-low);color:var(--muted);font:var(--size-tiny)/1.15 var(--head)}
.catalog-tabs button>span:not(.material-symbols-outlined){max-width:100%;overflow:hidden;font-size:clamp(9px,2.9vw,var(--size-tiny));white-space:nowrap;text-overflow:ellipsis}
.catalog-tabs .material-symbols-outlined{font-size:20px}
.catalog-tabs .action-glyph{width:20px;height:20px}
.catalog-tabs i{min-height:1.2em;color:var(--text-dim);font:var(--size-micro)/1.2 var(--head)}
.catalog-tabs button[aria-pressed=true]{color:var(--accent);background:linear-gradient(var(--accent-950),var(--surface-warm)) var(--surface-warm);box-shadow:inset 0 -2px var(--accent)}
.catalog-tabs button[aria-pressed=true] i{color:var(--accent-300)}
.catalog-tabs button:hover{color:var(--text)}
.catalog-tabs button:focus-visible{outline:1px solid var(--accent);outline-offset:-2px}
.catalog-toolbar{align-items:center;flex-wrap:nowrap;margin:0 0 12px}
.catalog-toolbar button{min-height:44px;border-radius:var(--ledger-radius,2px)}
.catalog-toolbar #catalog-new{display:inline-flex;align-items:center;gap:6px;padding:0 16px 0 12px}
.catalog-toolbar #catalog-import{margin-left:auto;padding:0 14px;font:500 var(--size-caption) var(--head)}
@media(max-width:600px){.catalog-tabs{margin:12px -16px}}
/* The banner: the adventure played last. */
.adventure-hero{position:relative;display:grid;overflow:hidden;margin:0 0 10px;border:1px solid var(--line);border-radius:var(--ledger-radius,2px);background:var(--surface)}
.adventure-hero.is-playing{border-color:var(--accent-600)}
.hero-art{position:relative;aspect-ratio:16/7;max-height:230px;width:100%;background:var(--well)}
.hero-art img{display:block;width:100%;height:100%;object-fit:cover}
.hero-art::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 35%,var(--surface))}
.adventure-hero.no-art .hero-art{aspect-ratio:auto;height:64px;background:repeating-linear-gradient(135deg,var(--surface),var(--surface) 7px,var(--surface-low) 7px,var(--surface-low) 8px)}
.hero-who{position:relative;display:grid;grid-template-columns:56px minmax(0,1fr);gap:var(--space-6);align-items:end;margin:-46px 14px 0}
.hero-face{display:grid;place-items:center;width:56px;height:56px;overflow:hidden;border:1px solid var(--accent-600);border-radius:var(--ledger-radius,2px);background:var(--accent-950);color:var(--accent);font:600 var(--size-lead) var(--head)}
.hero-face img{width:100%;height:100%;object-fit:cover;object-position:50% 20%}
.hero-kicker{display:block;color:var(--accent);font:600 var(--size-micro)/1.3 var(--head);letter-spacing:.16em;text-transform:uppercase}
.adventure-hero h3{margin:2px 0 0;color:var(--text);font:500 var(--size-lead)/1.2 var(--head);overflow-wrap:anywhere}
.hero-who p{margin:2px 0 0;color:var(--text-dim);font:var(--size-caption)/1.35 var(--head);overflow-wrap:anywhere}
.hero-last{margin:10px 14px 0;padding-left:10px;border-left:2px solid var(--accent-800);color:var(--text-soft);font:italic var(--size-compact)/1.45 var(--body);overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.hero-foot{display:flex;align-items:center;gap:var(--space-4);margin:12px 14px 0}
.hero-foot .primary{flex:1;min-height:44px;border-radius:var(--ledger-radius,2px)}
.hero-foot .entry-menu-button{display:grid;place-items:center;flex:none;width:44px;height:44px;padding:0;border-radius:var(--ledger-radius,2px);color:var(--muted)}
.hero-foot .entry-menu-button[aria-expanded=true]{border-color:var(--accent-600);color:var(--accent)}
.hero-cloud{margin:8px 14px 0;color:var(--muted);font:var(--size-caption) var(--head)}
.adventure-hero>:last-child{margin-bottom:14px}
/* The tiles. */
.tile-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:var(--space-4)}
.tile-grid.figures{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
#catalog-list>.empty+.tile-grid{margin-top:12px}
.collection-tile{position:relative;min-width:0;overflow:hidden;border:1px solid var(--stone-700);border-radius:var(--ledger-radius,2px);background:var(--surface-low)}
.collection-tile:hover,.collection-tile:focus-within{border-color:var(--accent-600)}
.tile-open{position:relative;display:block;width:100%;min-height:0;padding:0;border:0;border-radius:0;background:none;text-align:left;cursor:pointer}
.tile-open:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.tile-art{position:relative;display:block;aspect-ratio:4/3;overflow:hidden;background:var(--well)}
.figures .tile-art{aspect-ratio:9/14}
.tile-art img{display:block;width:100%;height:100%;object-fit:cover}
.figures .tile-art img{object-position:50% 10%}
.tile-art::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 25%,rgb(0 0 0 / .62) 52%,rgb(0 0 0 / .9))}
.tile-blank{display:grid;place-items:center;width:100%;height:100%;padding-bottom:22%;background:repeating-linear-gradient(135deg,var(--surface),var(--surface) 7px,var(--surface-low) 7px,var(--surface-low) 8px);color:var(--accent-600);font:600 30px/1 var(--head)}
.tile-blank .material-symbols-outlined{font-size:32px}
.tile-caption{position:absolute;inset:auto 0 0 0;z-index:1;display:grid;gap:1px;padding:8px 46px 8px 10px}
.figures .tile-caption{padding-right:8px}
.tile-caption b{color:#f4ecdc;font:500 var(--size-caption)/1.25 var(--head);overflow-wrap:anywhere}
.tile-caption small{color:#d9cfba;font:var(--size-tiny)/1.3 var(--head);overflow-wrap:anywhere}
.collection-tile .entry-menu-button{position:absolute;right:5px;bottom:5px;z-index:2;display:grid;place-items:center;width:36px;height:36px;min-height:0;padding:0;border:1px solid rgb(255 255 255 / .22);border-radius:var(--ledger-radius,2px);background:rgb(0 0 0 / .55);color:#efe5d2}
.collection-tile .entry-menu-button::after{content:"";position:absolute;inset:-4px}
.figures .collection-tile .entry-menu-button{top:5px;bottom:auto}
.collection-tile .entry-menu-button .action-glyph{width:20px;height:20px}
.collection-tile .entry-menu-button:hover,.collection-tile .entry-menu-button[aria-expanded=true]{border-color:var(--accent);color:var(--accent)}
.tile-tags{position:absolute;left:6px;top:6px;z-index:1;display:flex;flex-wrap:wrap;gap:4px;max-width:calc(100% - 12px);pointer-events:none}
.tile-tag{padding:2px 6px;border:1px solid var(--accent-600);background:rgb(0 0 0 / .62);color:var(--accent);font:600 var(--size-micro)/1.4 var(--head);letter-spacing:.08em;text-transform:uppercase}
.tile-tag[data-tone=warn]{border-color:color-mix(in srgb,var(--warn) 70%,transparent);color:var(--warn)}
.tile-tag[data-tone=adult]{border-color:#c0603e;color:#f2b49b;background:rgb(42 23 18 / .85)}
.unfinished-tag,.choice-card span.unfinished-tag{display:inline-block;min-height:0;margin:0;padding:1px 5px;border:1px solid color-mix(in srgb,var(--warn) 70%,transparent);border-radius:var(--ledger-radius,2px);background:rgb(0 0 0 / .62);color:var(--warn);font:600 var(--size-micro)/1.4 var(--head);letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;vertical-align:middle}
.choice-card span.unfinished-tag{margin:2px auto}
.world-unfinished,.build-note.unfinished-note{color:var(--warn)}
/* The rules a character plays by (a built-in world is played by): a chip in
   each ruleset's colour, on its tile, in the creator and on the Self sheet. */
.rules-chip{--rules:#e3c36a;display:inline-block;padding:2px 6px;border:1px solid color-mix(in srgb,var(--rules) 62%,transparent);border-radius:var(--ledger-radius,2px);background:rgb(0 0 0 / .62);color:var(--rules);font:600 var(--size-micro)/1.4 var(--head);letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;vertical-align:middle}
.rules-chip[data-rules="dnd"]{--rules:#ef8a7a}
.rules-chip[data-rules="starwars"]{--rules:#8cc4f2}
.rules-chip[data-rules="rebirth"]{--rules:#e7a3d8}
.tile-rules{display:flex;margin-bottom:3px}
.tile-rules .rules-chip{max-width:100%;overflow:hidden;text-overflow:ellipsis;letter-spacing:.04em}
.build-rules-fixed{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:0 0 4px}
.build-rules-fixed small{color:var(--muted)}
.tile-cloud{position:absolute;top:8px;right:8px;z-index:1;line-height:0;pointer-events:none}
.tile-cloud .cloud-mark{box-shadow:0 0 0 2px rgb(0 0 0 / .6)}
@media(max-width:600px){.tile-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-3)}.tile-grid.figures{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* A picture painting: the art outlined, its picture breathing, and a note. */
.tile-art.busy{outline:2px solid var(--accent);outline-offset:-2px}
.tile-art.busy img{animation:card-painting 1.6s ease-in-out infinite}
@keyframes card-painting{0%,100%{opacity:.45}50%{opacity:1}}
.card-painting{position:absolute;top:8px;left:50%;z-index:2;transform:translateX(-50%);max-width:calc(100% - 16px);overflow:hidden;padding:4px 10px;border:1px solid var(--accent-600);border-radius:var(--radius-pill);background:rgb(var(--bg-rgb) / .82);backdrop-filter:blur(6px);color:var(--accent-300);font:var(--size-caption) var(--head);text-overflow:ellipsis;white-space:nowrap}
@media(prefers-reduced-motion:reduce){.tile-art.busy img{animation:none}}
/* Images (v7.40, src/ui/image-wall.mjs): every picture in rows that keep each
   picture's shape at the row's height, chips to narrow them; the picture
   picker (src/app/image-picker.mjs) shows the same wall. */
.image-chips{display:flex;flex-wrap:wrap;gap:var(--space-3);margin:0 0 var(--space-7)}
.image-chips button{min-height:40px;padding:0 14px;border-radius:var(--ledger-radius,2px);font:var(--size-label) var(--head)}
.image-chips button[aria-pressed=true]{border-color:var(--accent);color:var(--accent);background:var(--accent-900)}
.image-chips small{margin-left:6px;color:var(--muted)}
.image-wall{--row:190px;display:flex;flex-wrap:wrap;gap:var(--space-4)}
.image-wall::after{content:"";flex-grow:999}
.image-tile{position:relative;flex-grow:var(--ratio);flex-basis:calc(var(--row) * var(--ratio));height:var(--row);min-width:0;min-height:0;overflow:hidden;padding:0;border:1px solid var(--line);border-radius:var(--radius-md);background:var(--well);cursor:zoom-in}
.image-tile:hover,.image-tile:focus-visible{border-color:var(--accent-600)}
.image-tile:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.image-tile img{display:block;width:100%;height:100%;object-fit:cover}
.image-caption{position:absolute;left:0;right:0;bottom:0;display:grid;padding:18px 9px 7px;background:linear-gradient(transparent,rgb(var(--bg-rgb) / .88));text-align:left;pointer-events:none}
.image-caption b,.image-caption span{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.image-caption b{color:var(--text);font:600 var(--size-ui)/1.2 var(--body)}
.image-caption span{color:var(--muted);font:var(--size-tiny)/1.3 var(--head);letter-spacing:.04em}
.image-note{margin:var(--space-7) 0 0;color:var(--muted);font-size:var(--size-small)}
.picture-picker{width:min(840px,calc(100vw - 24px));max-width:none;max-height:90dvh}
.picture-picker .dialog-card{width:100%;max-width:none;box-sizing:border-box}
.picture-picker .image-tile{cursor:pointer}
.picture-picker-device{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-4) var(--space-6);margin:12px 0 var(--space-7)}
.picture-picker-device button{min-height:44px}
.picture-picker-device .hint{flex:1 1 220px;margin:0}
@media(max-width:600px){.image-wall{--row:120px;gap:var(--space-3)}.image-caption{padding:14px 7px 5px}.image-caption b{font-size:var(--size-caption)}.picture-picker .dialog-card{padding:16px}}
/* A checkbox beside its sentence in the setup dialogs (numbers-based branch: hard-core). */
.dialog-card label.checkbox-row{flex-direction:row;align-items:center;gap:var(--space-4);color:var(--text)}
/* Explore, Create and Play (v8.76.0): the collection's pages, in the page
   frame of styles/side-menu.css. */
.catalog-dialog .catalog-tabs{margin:0 auto 16px;border:1px solid var(--line)}
.catalog-tabs[hidden],.catalog-crumb[hidden]{display:none}
.catalog-tabs button[hidden]{display:none}
/* A kind's list under Create: the way back, and what it is. */
.catalog-crumb{display:flex;align-items:center;gap:var(--space-4);margin-bottom:12px}
.catalog-crumb button{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 12px 0 10px;border-radius:var(--ledger-radius,2px);font:600 var(--size-label) var(--head)}
.catalog-crumb button::before{content:"‹";font-size:1.4em;line-height:.8}
.catalog-crumb span{min-width:0;color:var(--muted);font:var(--size-label) var(--head)}
/* Create: each kind a row, with how many and New. */
.create-intro{margin:0 0 4px;color:var(--muted);font-size:var(--size-compact);line-height:1.5}
.create-kinds{border:1px solid var(--line);background:var(--surface)}
.create-kind{display:flex;align-items:center;gap:var(--space-4);padding-right:12px}
.create-kind+.create-kind{border-top:1px solid var(--line)}
.create-kinds .create-open{flex:1 1 auto;display:flex;align-items:center;gap:14px;min-width:0;min-height:64px;padding:10px 12px;border:0;border-radius:0;background:none;color:var(--text);text-align:left}
.create-kinds .create-open:hover{background:var(--surface-warm)}
.create-open .material-symbols-outlined{flex:none;font-size:24px;color:var(--accent)}
.create-open .action-glyph{flex:none;width:24px;height:24px;color:var(--accent)}
.create-label{display:flex;flex-direction:column;gap:2px;min-width:0}
.create-label b{font:600 var(--size-ui) var(--head)}
.create-label b i,.rules-heading i{font-style:normal;font-weight:400;color:var(--muted);letter-spacing:0}
.create-label small{color:var(--muted);font:var(--size-small)/1.35 var(--body)}
.create-kinds .create-new{flex:none;display:inline-flex;align-items:center;gap:4px;min-height:40px;padding:0 12px 0 8px;border-radius:var(--ledger-radius,2px);font:600 var(--size-label) var(--head)}
.create-new .material-symbols-outlined{font-size:18px}
/* Play: the one playing (else played last), New adventure and New story, then both lists. */
.play-actions{display:flex;flex-wrap:wrap;gap:var(--space-4);margin:12px auto 0}
.play-actions button{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;border-radius:var(--ledger-radius,2px)}
.play-actions .material-symbols-outlined{font-size:18px}
#catalog-list>section{margin-top:22px}
@media(max-width:600px){.play-actions{display:grid;grid-template-columns:1fr 1fr}}
/* Personas and roleplay characters as square portraits, three to a row on a phone. */
.tile-grid.portraits{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.portraits .tile-art{aspect-ratio:3/4}
.portraits .tile-art img{object-position:50% 20%}
.portraits .tile-caption{padding-right:8px}
.portraits .tile-caption small{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.portraits .collection-tile .entry-menu-button{top:5px;bottom:auto}
@media(max-width:600px){.tile-grid.portraits{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* A scenario's characters fieldset (src/roleplay/scenario-editor-ui.mjs). */
.roleplay-cast{display:grid;gap:var(--space-4);margin:18px 0 0;padding:14px;border:1px solid var(--stone-750);border-radius:var(--radius-md);background:rgb(var(--surface-low-rgb) / .58);min-width:0}
.roleplay-cast>legend{padding:0 8px;color:var(--accent-350);font:500 var(--size-body) var(--body)}
.roleplay-cast .hint{margin:0}
/* The scenario editor (src/roleplay/scenario-editor-ui.mjs): the NSFW mark,
   the boxes each with Assist, characters as rows with their part in this
   story, choices as buttons, More details folded. */
.scenario-editor .dialog-card{gap:var(--space-6)}
.scenario-label{color:var(--text-dim);font-size:var(--size-body)}
.scenario-content{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 12px;padding:10px 14px;border:1px solid var(--stone-750);border-radius:var(--radius-md);background:rgb(var(--surface-low-rgb) / .58)}
.scenario-content .hint{flex-basis:100%;margin:0}
.scenario-pills{display:flex;flex-wrap:wrap;gap:var(--space-3);align-items:center}
.scenario-pill{min-height:40px;padding:0 16px;border:1px solid var(--stone-750);border-radius:var(--radius-pill);background:var(--surface-low);color:var(--text-dim);font:500 var(--size-caption) var(--head)}
.scenario-pill[aria-pressed=true]{border-color:var(--accent);background:var(--accent-900);color:var(--accent-100)}
.scenario-pill.adult[aria-pressed=true]{border-color:#c0603e;background:#2a1712;color:#f2b49b}
.scenario-field{display:grid;gap:6px;margin:14px 0 0}
.scenario-field-head{display:flex;align-items:flex-end;justify-content:space-between;gap:8px;flex-wrap:wrap}
.catalog-editor .scenario-field-head label{display:block;margin:0;color:var(--text-dim)}
.scenario-required{margin-left:4px;color:var(--muted);font-size:var(--size-small)}
.scenario-field .hint{margin:0}
.scenario-assist{min-height:34px;padding:0 11px;border-radius:var(--radius-md);color:var(--accent-350);font:500 var(--size-label) var(--head)}
.catalog-editor select.scenario-copy-world{width:auto;max-width:100%;min-height:34px;padding:0 8px;margin-left:auto;font:500 var(--size-label) var(--head);color:var(--accent-350);background:var(--surface-warm)}
.scenario-cast{margin:6px 0 0}
.scenario-cast-rows{display:grid;gap:var(--space-4)}
.scenario-cast-row{display:flex;gap:12px;align-items:flex-start;padding:12px;border:1px solid var(--stone-800);border-radius:var(--radius-md);background:var(--bg)}
.scenario-face{display:grid;place-items:center;flex:none;width:48px;height:48px;overflow:hidden;border-radius:50%;border:1px solid var(--accent-750);background:var(--well);color:var(--accent-350);font:600 var(--size-label) var(--head)}
.scenario-face img{width:100%;height:100%;object-fit:cover}
.scenario-cast-who{display:grid;gap:6px;flex:1 1 auto;min-width:0}
.scenario-cast-name{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 8px}
.scenario-cast-name b{font:600 var(--size-ui) var(--head);color:var(--text)}
.scenario-cast-name .hint{margin:0}
.scenario-badge{padding:2px 6px;border-radius:4px;background:var(--accent-350);color:var(--accent-950);font:600 var(--size-micro) var(--head);letter-spacing:.1em;text-transform:uppercase}
.scenario-badge.new{background:transparent;border:1px solid var(--accent-600);color:var(--accent-300)}
.scenario-mini{color:var(--muted);font:600 var(--size-micro) var(--head);letter-spacing:.1em;text-transform:uppercase}
/* A new character's age, on its row (scenario-editor-ui.mjs): its label on one line. */
.catalog-editor .scenario-cast-who label.scenario-mini{display:block;margin:4px 0 0}
.scenario-age{width:100%;max-width:240px;min-height:40px;margin-top:4px;padding:0 10px;border:1px solid var(--stone-700);border-radius:var(--radius-sm);background:var(--field);color:var(--text);font:var(--size-ui) var(--head)}
.scenario-cast-tools{display:flex;gap:4px;flex:none}
.scenario-icon{display:grid;place-items:center;width:40px;height:40px;padding:0;border-radius:8px;color:var(--text-dim)}
.scenario-icon:disabled{opacity:.35;cursor:default}
.scenario-cast-actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3)}
.scenario-cast-actions button{min-height:44px}
.scenario-cast-actions .hint{margin:0 0 0 auto}
.scenario-choice{display:grid;gap:8px;margin:14px 0 0}
.scenario-options{display:flex;flex-wrap:wrap;gap:10px}
.scenario-option{flex:1 1 180px;display:grid;gap:4px;align-content:start;text-align:left;padding:12px 14px;border:1px solid var(--stone-750);border-radius:var(--radius-md);background:var(--surface-low)}
.scenario-option b{font:600 var(--size-caption) var(--head);color:var(--text)}
.scenario-option small{color:var(--muted);font:var(--size-small)/1.35 var(--body)}
.scenario-option[aria-pressed=true]{border-color:var(--accent);background:var(--accent-950)}
.scenario-option[aria-pressed=true] b{color:var(--accent)}
.scenario-sample{margin:0;padding:10px 12px;border:1px dashed var(--stone-750);border-radius:var(--radius-md);background:var(--bg);color:var(--stone-200);white-space:pre-line}
.scenario-more{margin:6px 0 0;padding:4px 14px 14px;border:1px solid var(--stone-750);border-radius:var(--radius-md);background:rgb(var(--surface-low-rgb) / .58)}
.catalog-editor .scenario-more summary{display:list-item;padding:10px 0 4px;font-size:var(--size-body)}
.scenario-more summary small{display:block;color:var(--muted);font-size:var(--size-small)}
.scenario-picture{display:grid;place-items:center;aspect-ratio:16/9;overflow:hidden;border:1px dashed var(--accent-750);border-radius:var(--radius-md);background:repeating-linear-gradient(135deg,var(--surface-low) 0 8px,var(--surface) 8px 16px);color:var(--muted);font:500 var(--size-label) var(--head)}
.scenario-picture img{width:100%;height:100%;object-fit:cover}
/* The character picker over the editor. */
.scenario-cast-picker .dialog-card footer{align-items:center}
.scenario-cast-picker footer .hint{margin:0 auto 0 0}
.catalog-editor .scenario-search{margin:0}
.scenario-pick-list{display:grid;gap:8px}
.scenario-pick{display:flex;align-items:center;gap:12px;width:100%;padding:10px 12px;text-align:left;border:1px solid var(--stone-800);border-radius:var(--radius-md);background:var(--bg)}
.scenario-pick[aria-pressed=true]{border-color:var(--accent);background:var(--accent-950)}
.scenario-pick:disabled{opacity:.5;cursor:default}
.scenario-pick b{font:600 var(--size-ui) var(--head)}
.scenario-pick .hint{margin:0}
.scenario-tick{display:grid;place-items:center;flex:none;width:22px;height:22px;border:1px solid var(--accent-700);border-radius:5px;color:transparent;background:var(--field)}
.scenario-pick[aria-pressed=true] .scenario-tick{border-color:var(--accent);background:var(--accent);color:var(--accent-950)}
@media(max-width:600px){
  .scenario-cast-row{flex-wrap:wrap}
  .scenario-cast-who{flex-basis:calc(100% - 60px)}
  .scenario-cast-tools{width:100%;justify-content:flex-end}
  .scenario-option{flex-basis:100%}
  .scenario-pill{flex:1 1 auto;min-height:44px}
  .scenario-cast-actions button{flex:1 1 auto}
  .scenario-cast-actions .hint{flex-basis:100%;margin:0}
}
/* The persona editor (src/roleplay/persona-editor-ui.mjs) shares the
   scenario editor's boxes; its portrait sits at the top. */
.persona-top{display:flex;align-items:center;gap:16px}
.persona-portrait{display:grid;place-items:center;flex:none;width:112px;height:112px;overflow:hidden;border-radius:50%;border:1px solid var(--accent-600);background:repeating-linear-gradient(135deg,var(--surface-low) 0 8px,var(--surface) 8px 16px);color:var(--accent-350);font:600 28px var(--head)}
.persona-portrait img{width:100%;height:100%;object-fit:cover}
.persona-figure{flex:none;width:63px;height:112px;overflow:hidden;border-radius:var(--radius-md);border:1px solid var(--accent-600);background:var(--surface-low)}
.persona-figure[hidden]{display:none}
.persona-figure img{display:block;width:100%;height:100%;object-fit:cover}
.persona-portrait-side{display:grid;gap:8px;min-width:0}
.persona-portrait-side .hint{margin:0}
.persona-copy{padding:12px 14px;border:1px solid var(--stone-750);border-radius:var(--radius-md);background:rgb(var(--surface-low-rgb) / .58)}
.catalog-editor .persona-copy label{margin:0}
.persona-copy .hint{display:block;margin-top:6px}
.scenario-assist:disabled{opacity:.45;cursor:default}
@media(max-width:600px){.persona-portrait{width:88px;height:88px;font-size:22px}.persona-top{align-items:flex-start}}
/* The character editor: the scenario it is made for, the character's line
   there, and the scenarios that use it. */
.card-context{margin:0;padding:10px 14px;border:1px solid var(--accent-750);border-radius:var(--radius-md);background:var(--accent-950);color:var(--accent-200);font-size:var(--size-small)}
.card-part .scenario-field{margin:0;padding:12px 14px;border:1px solid var(--accent-750);border-radius:var(--radius-md);background:rgb(var(--surface-low-rgb) / .58)}
.card-used{padding:12px 14px;border:1px solid var(--stone-750);border-radius:var(--radius-md);background:rgb(var(--surface-low-rgb) / .58)}
.card-used h3{margin:0 0 8px;color:var(--accent-350);font:500 var(--size-body) var(--body)}
.card-used ul{margin:0;padding:0;list-style:none;display:grid;gap:8px}
.card-used li{display:grid;gap:2px}
.card-used li b{font:600 var(--size-caption) var(--head)}
.card-used li span{color:var(--text-dim);font-size:var(--size-small)}
.card-used .hint{margin:8px 0 0}