/* Lore panel (src/ui/lore-view.mjs): subtabs (shared rules live with
   .character-subtabs in character.css and ledger.css), then per subtab:
   Quests as contract cards (a kicker, the title, the task in the reading
   font, the terms ruled like a ledger) and a list of the finished ones;
   Places opening on where the character stands, then a fold per town with
   its places in a grid; Threads counted by kind, then cards edged in the
   kind's colour; Story a timeline, newest first. Tokens from tokens.css. */
.lore-shell{min-width:0}
.lore-subtabs{grid-template-columns:repeat(4,minmax(0,1fr))}
.lore-content{min-width:0}
@media(max-width:480px){.lore-subtabs button{font-size:var(--size-micro);gap:var(--space-2);padding:7px 2px}.lore-subtabs button .material-symbols-outlined{font-size:16px}}
/* The side drawer is about 340px across: four tabs fit with the small type, no word broken. */
@media(min-width:801px){.lore-subtabs button{font-size:var(--size-caption);gap:var(--space-2);padding:7px 2px}.lore-subtabs button .material-symbols-outlined{font-size:16px}}
.lore-group{display:flex;align-items:baseline;gap:var(--space-4);margin:18px 0 8px;color:var(--accent);font:600 var(--size-tiny)/1.4 var(--head);letter-spacing:.16em;text-transform:uppercase}
.lore-content>.lore-group:first-child,.lore-bar+.lore-group,.place-here+.lore-group{margin-top:0}
.lore-group small{margin-left:auto;color:var(--muted);font:500 var(--size-caption) var(--head);letter-spacing:0;text-transform:none}
.lore-editing{color:var(--accent)}
.lore-kicker{display:flex;justify-content:space-between;flex-wrap:wrap;gap:2px var(--space-5);margin:0;color:var(--muted);font:600 var(--size-micro)/1.5 var(--head);letter-spacing:.12em;text-transform:uppercase}
.lore-kicker .live{color:var(--accent)}
.lore-remove{min-height:44px;padding:0 14px;border:1px solid var(--danger-700);border-radius:var(--ledger-radius,2px);background:none;color:var(--danger);font:500 var(--size-caption) var(--head)}
/* Quests */
.quest-card{margin:0 0 12px;padding:14px 14px 6px;border:1px solid var(--stone-700);border-left:3px solid var(--accent);border-radius:var(--ledger-radius,2px);background:linear-gradient(var(--surface-warm),var(--surface))}
.quest-card.offered{border-left-style:dashed;border-left-color:var(--stone-500)}
.quest-card h3{margin:6px 0;color:var(--text);font:500 var(--size-title)/1.2 var(--head);overflow-wrap:anywhere}
.quest-task{margin:0 0 10px;color:var(--text-soft);font-family:var(--read-font);font-size:calc(var(--read-scale) * var(--size-body));font-style:italic;line-height:1.45;overflow-wrap:anywhere}
.quest-terms{margin:0;padding:0;list-style:none;border-top:1px solid var(--stone-750)}
.quest-terms li{display:flex;justify-content:space-between;align-items:baseline;gap:var(--space-6);padding:7px 0;border-bottom:1px solid var(--stone-850);font:var(--size-caption)/1.4 var(--head)}
.quest-terms li:last-child{border-bottom:0}
.quest-terms span{flex:none;color:var(--muted);font:600 var(--size-tiny)/1.4 var(--head);letter-spacing:.1em;text-transform:uppercase}
.quest-terms b{min-width:0;color:var(--text-soft);font-weight:500;text-align:right;overflow-wrap:anywhere}
.quest-edit{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:var(--space-5);margin:4px 0 8px;padding-top:10px;border-top:1px dashed var(--stone-700)}
.quest-edit label{display:grid;gap:4px;min-width:0;color:var(--muted);font:600 var(--size-tiny)/1.4 var(--head);letter-spacing:.1em;text-transform:uppercase}
.quest-edit select{width:100%;min-height:44px;padding:0 8px;border:1px solid var(--stone-750);border-radius:var(--ledger-radius,2px);background:var(--field);color:var(--text);font:var(--size-small) var(--head);letter-spacing:0;text-transform:capitalize}
.quest-finished{border:1px solid var(--stone-700);border-radius:var(--ledger-radius,2px);background:var(--surface)}
.quest-done+.quest-done{border-top:1px solid var(--stone-850)}
.quest-done>summary{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:var(--space-5);min-height:52px;padding:7px 34px 7px 12px;list-style:none;cursor:pointer}
.quest-done>summary::-webkit-details-marker{display:none}
.lore-content .quest-done>summary::before{content:none;display:none}
.quest-done>summary::after{content:"";position:absolute;top:50%;right:14px;width:6px;height:6px;margin-top:-5px;border:solid var(--accent-600);border-width:0 2px 2px 0;transform:rotate(45deg);transition:transform .15s}
.quest-done[open]>summary::after{transform:rotate(-135deg);margin-top:-1px}
.quest-done>summary:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.quest-done-name{display:grid;gap:1px;min-width:0}
.quest-done-name b{color:var(--text-soft);font:500 var(--size-caption)/1.35 var(--head);overflow-wrap:anywhere}
.quest-done-name small{color:var(--muted);font:var(--size-caption)/1.35 var(--head);overflow-wrap:anywhere}
.quest-outcome{color:var(--muted);font:500 var(--size-caption) var(--head);text-align:right}
.quest-outcome.completed{color:var(--ok)}
.quest-outcome.failed{color:var(--danger)}
.quest-done-more{padding:0 12px 8px}
.quest-done-more .quest-task{font-size:calc(var(--read-scale) * var(--size-compact))}
.quest-days{display:block;margin:6px 0 2px;color:var(--muted);font:var(--size-caption)/1.4 var(--head)}
.quest-addrow{margin-top:16px;padding-top:12px;border-top:1px solid var(--stone-750)}
/* Places */
.place-here{margin:0 0 16px;padding:14px;border:1px solid var(--accent-600);border-radius:var(--ledger-radius,2px);background:linear-gradient(160deg,var(--accent-950),var(--surface) 70%)}
.place-here h3{margin:4px 0 2px;color:var(--text);font:500 var(--size-display)/1.12 var(--head);overflow-wrap:anywhere}
.place-here-where{display:block;color:var(--text-dim);font:var(--size-caption)/1.4 var(--head);overflow-wrap:anywhere}
.place-here-text{margin:10px 0 6px;color:var(--text-soft);font-family:var(--read-font);font-size:calc(var(--read-scale) * var(--size-body));line-height:1.45;white-space:pre-line;overflow-wrap:anywhere}
.place-chips{display:flex;flex-wrap:wrap;gap:var(--space-3);margin:8px 0 0;padding:0;list-style:none}
.place-chips li{padding:3px 8px;border:1px solid var(--stone-700);border-radius:var(--ledger-radius,2px);color:var(--text-dim);font:var(--size-caption)/1.4 var(--head);overflow-wrap:anywhere}
.place-group{margin:0 0 10px;border:1px solid var(--stone-700);border-radius:var(--ledger-radius,2px);background:var(--surface)}
.place-group>summary{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:2px var(--space-5);min-height:56px;padding:8px 38px 8px 12px;list-style:none;cursor:pointer}
.place-group>summary::-webkit-details-marker{display:none}
.lore-content .place-group>summary::before{content:none;display:none}
.place-group>summary::after{content:"";position:absolute;top:50%;right:15px;width:6px;height:6px;margin-top:-5px;border:solid var(--accent-600);border-width:0 2px 2px 0;transform:rotate(45deg);transition:transform .15s}
.place-group[open]>summary::after{transform:rotate(-135deg);margin-top:-1px}
.place-group>summary:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.place-group-name{color:var(--text);font:500 var(--size-small)/1.3 var(--head);overflow-wrap:anywhere}
.place-group-region{grid-column:1;color:var(--muted);font:var(--size-caption)/1.35 var(--head);overflow-wrap:anywhere}
.place-group-region:empty{display:none}
.place-group-count{grid-row:1/3;grid-column:2;color:var(--accent);font:500 var(--size-title)/1 var(--head)}
.place-group-note{margin:0;padding:0 12px 10px;color:var(--text-dim);font:var(--size-caption)/1.45 var(--head);white-space:pre-line;overflow-wrap:anywhere}
.place-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;border-top:1px solid var(--stone-850)}
.place-tile{min-width:0;background:var(--surface);box-shadow:0 0 0 1px var(--stone-850)}
.place-tile:last-child:nth-child(odd){grid-column:1/-1}
.place-tile[open]{grid-column:1/-1}
.place-tile>summary,div.place-tile{position:relative;display:grid;align-content:start;gap:3px;min-height:64px;padding:10px 12px}
.place-tile>summary{padding-right:28px;list-style:none;cursor:pointer}
.place-tile>summary::-webkit-details-marker{display:none}
.lore-content .place-tile>summary::before{content:none;display:none}
.place-tile>summary::after{content:"";position:absolute;top:15px;right:12px;width:5px;height:5px;border:solid var(--accent-600);border-width:0 2px 2px 0;transform:rotate(45deg);transition:transform .15s}
.place-tile[open]>summary::after{transform:rotate(-135deg);top:18px}
.place-tile>summary:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.place-tile b{color:var(--text-soft);font:500 var(--size-caption)/1.3 var(--head);overflow-wrap:anywhere}
.place-tile small{color:var(--muted);font:600 var(--size-tiny)/1.3 var(--head);letter-spacing:.06em;text-transform:uppercase}
.place-tile.here small{color:var(--accent)}
.place-tile.heard>summary,div.place-tile.heard{background:repeating-linear-gradient(135deg,var(--surface),var(--surface) 6px,var(--surface-low) 6px,var(--surface-low) 7px)}
.place-more{padding:0 12px 12px}
.place-more p{margin:0 0 6px;color:var(--text-soft);font-family:var(--read-font);font-size:calc(var(--read-scale) * var(--size-compact));line-height:1.45;white-space:pre-line;overflow-wrap:anywhere}
.place-spots,.place-location{display:block;margin-top:4px;color:var(--muted);font:var(--size-caption)/1.4 var(--head);overflow-wrap:anywhere}
.place-spots{font-style:italic}
/* Shops you know (src/ui/lore-view.mjs shopsHtml): a search, then a row a
   shop, a coin tile edged in gold for one seen, dashed for one heard of; a
   seen one opens to its shelf, each thing and its price on a dotted leader. */
.shops-known{margin:0 0 16px}
.shop-search{display:flex;align-items:center;gap:var(--space-4);min-height:44px;margin:0 0 10px;padding:0 12px;border:1px solid var(--stone-700);border-radius:var(--ledger-radius,2px);background:var(--field)}
.shop-search:focus-within{border-color:var(--accent)}
.shop-search .material-symbols-outlined{color:var(--muted);font-size:20px}
.shop-search input{flex:1;min-width:0;min-height:42px;padding:0;border:0;background:none;color:var(--text);font:max(16px,var(--size-small)) var(--head);outline:none}
.shop-search input::placeholder{color:var(--muted)}
.shop-search input::-webkit-search-cancel-button{filter:grayscale(1)}
.shop-list{border:1px solid var(--stone-700);border-radius:var(--ledger-radius,2px);background:var(--surface)}
.shop-row{border-top:1px solid var(--stone-850)}
.shop-row:first-child,.shop-row.lead{border-top:0}
.shop-row[hidden]{display:none}
.shop-row>summary,.shop-line{position:relative;display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:var(--space-5);align-items:center;min-height:56px;padding:8px 32px 8px 12px;list-style:none}
.shop-line{padding-right:12px}
.shop-row>summary{cursor:pointer}
.shop-row>summary::-webkit-details-marker{display:none}
.lore-content .shop-row>summary::before{content:none;display:none}
.shop-row>summary::after{content:"";position:absolute;top:50%;right:14px;width:5px;height:5px;margin-top:-4px;border:solid var(--accent-600);border-width:0 2px 2px 0;transform:rotate(45deg);transition:transform .15s}
.shop-row[open]>summary::after{transform:rotate(-135deg);margin-top:-1px}
.shop-row>summary:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.shop-tile{display:grid;place-items:center;width:40px;height:40px;border:1px solid var(--stone-600);border-radius:var(--ledger-radius,2px);background:var(--surface-low);color:var(--text-dim)}
.shop-tile .material-symbols-outlined{font-size:20px}
.shop-row.seen .shop-tile{border-color:var(--accent-600);color:var(--accent)}
.shop-row.heard .shop-tile{border-style:dashed}
.shop-who{display:grid;gap:2px;min-width:0}
.shop-who>b{color:var(--text);font:500 var(--size-small)/1.3 var(--head);overflow-wrap:anywhere}
.shop-who>small{color:var(--text-dim);font:var(--size-caption)/1.35 var(--head);overflow-wrap:anywhere}
.shop-told{margin-top:2px;color:var(--text-soft)!important}
.shop-told b{color:var(--text);font-weight:500}
.shop-told q{quotes:"“" "”"}
.shop-hit{display:grid;justify-items:end;gap:1px;max-width:9.5em;color:var(--muted);font:var(--size-caption)/1.3 var(--head);text-align:right;overflow-wrap:anywhere}
.shop-hit b{color:var(--accent);font:500 var(--size-small)/1.2 var(--head);font-variant-numeric:tabular-nums}
.shop-row.heard .shop-hit b{color:var(--text-dim);font-weight:400}
.shop-prices{margin:0;padding:0 12px 12px 64px;list-style:none}
.shop-prices li{display:flex;align-items:baseline;gap:var(--space-3);min-height:30px;padding:4px 0;color:var(--text-soft);font:var(--size-caption)/1.35 var(--head)}
.shop-prices li span{min-width:0;overflow-wrap:anywhere}
.shop-prices li i{flex:1;min-width:12px;border-bottom:1px dotted var(--stone-600);transform:translateY(-3px)}
.shop-prices li b{color:var(--text);font-weight:500;font-variant-numeric:tabular-nums;white-space:nowrap}
.shop-prices li.hit span,.shop-prices li.hit b{color:var(--accent)}
.shop-none{margin:10px 2px 0;color:var(--text-dim);font:var(--size-caption)/1.45 var(--head)}
.shop-hint{margin:8px 2px 0}
@media(max-width:360px){.shop-prices{padding-left:12px}}
/* Threads: the kind colours stay legible in every theme (ok, mana, thirst
   and the NSFW rose are the same everywhere; the accent is the theme's). */
.kind-threat{--kind:var(--danger)}
.kind-debt{--kind:var(--accent)}
.kind-promise{--kind:var(--accent-300)}
.kind-mystery{--kind:var(--mana-icon)}
.kind-goal{--kind:var(--ok)}
.kind-lead{--kind:var(--thirst-to)}
.kind-relationship{--kind:var(--nsfw-300)}
.thread-kinds{display:grid;grid-template-columns:repeat(auto-fit,minmax(76px,1fr));gap:var(--space-3);margin:0 0 12px;padding:0;list-style:none}
.thread-kind-tile{display:grid;gap:2px;justify-items:start;padding:8px 10px;border:1px solid var(--stone-700);border-top:2px solid var(--kind,var(--stone-500));border-radius:var(--ledger-radius,2px);background:var(--surface)}
.thread-kind-tile b{color:var(--kind,var(--text));font:500 var(--size-title)/1 var(--head)}
.thread-kind-tile small{color:var(--muted);font:600 var(--size-micro)/1.3 var(--head);letter-spacing:.1em;text-transform:uppercase}
.panel-body .thread-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.thread-tabs button{display:flex;align-items:center;justify-content:center;gap:var(--space-3);min-width:0;padding:0 4px;font:500 var(--size-caption) var(--head)}
.thread-count{color:inherit;font-weight:600}
.thread-card{margin:0 0 10px;padding:12px 12px 8px;border:1px solid var(--stone-700);border-left:3px solid var(--kind,var(--stone-500));border-radius:var(--ledger-radius,2px);background:var(--surface)}
.thread-card.finished{border-left-color:var(--stone-500);background:var(--surface-low)}
.thread-card.finished h3,.thread-card.finished .thread-note{color:var(--text-dim)}
.thread-card.finished .thread-kind{color:var(--muted)}
.thread-kind{color:var(--kind,var(--muted))}
.thread-card h3{margin:5px 0 4px;color:var(--text);font:500 var(--size-body)/1.25 var(--head);overflow-wrap:anywhere}
.thread-note{margin:0 0 6px;color:var(--text-soft);font-family:var(--read-font);font-size:calc(var(--read-scale) * var(--size-compact));line-height:1.45;overflow-wrap:anywhere}
.thread-history>summary{display:flex;align-items:center;min-height:44px;width:max-content;color:var(--text-dim);font:500 var(--size-caption) var(--head);cursor:pointer}
.thread-history>summary:focus-visible{outline:1px solid var(--accent);outline-offset:2px}
.thread-history ol{margin:0 0 6px;padding-left:18px;color:var(--muted);font:var(--size-caption)/1.5 var(--head);overflow-wrap:anywhere}
/* Story */
.story-line{position:relative;margin:0;padding:0 0 0 24px;list-style:none}
.story-line::before{content:"";position:absolute;left:6px;top:8px;bottom:8px;width:2px;background:var(--stone-750)}
.story-line>li{position:relative;margin:0 0 16px}
.story-line>li::before{content:"";position:absolute;left:-23px;top:4px;width:10px;height:10px;border:2px solid var(--accent-600);border-radius:var(--radius-round);background:var(--surface-low)}
.story-line>li.now::before{background:var(--accent);border-color:var(--accent)}
.story-line>li.story-arc::before{left:-25px;top:2px;width:14px;height:14px;background:var(--accent);border-color:var(--accent);border-radius:var(--ledger-radius,2px)}
.story-when{display:block;color:var(--accent);font:600 var(--size-tiny)/1.5 var(--head);letter-spacing:.14em;text-transform:uppercase}
.story-line p{margin:3px 0 0;color:var(--text-soft);font-family:var(--read-font);font-size:calc(var(--read-scale) * var(--size-compact));line-height:1.5;overflow-wrap:anywhere}
.story-line p+p{margin-top:6px}
.story-line .story-summary{color:var(--text);font-size:calc(var(--read-scale) * var(--size-body))}
.story-arc{padding:10px 12px;border:1px solid var(--stone-700);border-radius:var(--ledger-radius,2px);background:linear-gradient(var(--surface-warm),var(--surface))}
.story-chapter{margin-top:2px}
.story-chapter>summary{display:flex;align-items:center;min-height:44px;width:max-content;color:var(--text-dim);font:500 var(--size-caption) var(--head);list-style:none;cursor:pointer}
.story-chapter>summary::-webkit-details-marker{display:none}
.story-chapter>summary::before{content:"";display:inline-block;width:6px;height:6px;margin:0 9px 2px 2px;border:solid var(--accent-600);border-width:0 2px 2px 0;transform:rotate(-45deg);transition:transform .15s}
.story-chapter[open]>summary::before{transform:rotate(45deg)}
.story-chapter>summary:focus-visible{outline:1px solid var(--accent);outline-offset:2px}
.story-day{padding:4px 0 8px 12px;border-left:1px solid var(--stone-750)}
.story-day h4{margin:0 0 2px;color:var(--muted);font:600 var(--size-micro)/1.5 var(--head);letter-spacing:.14em;text-transform:uppercase}
.story-facts p{margin:0 0 8px;color:var(--text-soft);font-family:var(--read-font);font-size:calc(var(--read-scale) * var(--size-compact));line-height:1.5;overflow-wrap:anywhere}
.story-hint{margin:16px 0 0;font:var(--size-caption)/1.45 var(--head)}
@media(prefers-reduced-motion:reduce){.quest-done>summary::after,.place-group>summary::after,.place-tile>summary::after,.shop-row>summary::after,.story-chapter>summary::before{transition:none}}
/* A built-in world's own tab (src/ui/world-panel-view.mjs): label and value rows with what the next step asks, a meter where a row has a range, and the moves the world listens for. */
.world-panel-note{margin:0 0 12px;color:var(--text-soft);font-size:var(--size-small);line-height:1.5;overflow-wrap:anywhere}
.world-rows{margin:0}
.world-row{display:grid;grid-template-columns:minmax(90px,.8fr) minmax(0,1.2fr);gap:4px var(--space-6);padding:9px 0;border-top:1px solid var(--stone-850);align-items:start}
.world-row:first-child{border-top:0}
.world-row dt{color:var(--muted)}
.world-row dd{display:flex;flex-direction:column;gap:2px;min-width:0;margin:0;text-align:right}
.world-row dd strong{font-weight:500;overflow-wrap:anywhere}
.world-row dd small{color:var(--muted);font-size:var(--size-small);line-height:1.4;overflow-wrap:anywhere}
.world-row .world-meter{grid-column:1/-1;margin-top:4px}
/* --meter is an image (a lone colour is no background layer). */
.world-meter{--meter:linear-gradient(90deg,var(--accent-700),var(--accent))}
.world-meter .lit{background:var(--meter)}
.world-row[data-tone=good] dd strong{color:var(--ok)}.world-row[data-tone=good] .world-meter{--meter:linear-gradient(var(--ok),var(--ok))}
.world-row[data-tone=warn] dd strong{color:var(--warn)}.world-row[data-tone=warn] .world-meter{--meter:linear-gradient(var(--warn),var(--warn))}
.world-row[data-tone=bad] dd strong{color:var(--danger)}.world-row[data-tone=bad] .world-meter{--meter:linear-gradient(var(--danger),var(--danger))}
.world-moves{display:grid;gap:var(--space-4);margin-top:14px;padding-top:12px;border-top:1px solid rgb(var(--accent-800-rgb) / .68)}
.world-moves-hint{margin:0;color:var(--muted);font:var(--size-caption)/1.45 var(--head)}
.world-move{display:flex;align-items:center;justify-content:space-between;gap:var(--space-6);width:100%;min-height:48px;padding:10px 12px;border:1px solid var(--accent-600);border-radius:var(--radius-lg);background:linear-gradient(var(--accent-900),var(--accent-950));text-align:left}
.world-move-text{display:flex;flex-direction:column;gap:2px;min-width:0}
.world-move b{color:var(--accent-100);font-weight:600;overflow-wrap:anywhere}
.world-move small{color:var(--muted);font-size:var(--size-small)}
.world-move>.material-symbols-outlined{flex:none;color:var(--accent)}
.world-move:disabled{border-color:var(--stone-700);background:var(--surface);cursor:not-allowed;opacity:.62}
.world-move:disabled>.material-symbols-outlined,.world-move:disabled b{color:var(--muted)}
.world-card>header+.world-moves{margin-top:0;padding-top:0;border-top:0}