.character-shell{min-width:0}
.character-subtabs,.lore-subtabs{position:sticky;top:-18px;z-index:3;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;margin:-18px -18px 18px;background:var(--line);border-bottom:1px solid var(--line)}
.character-subtabs button,.lore-subtabs button{min-width:0;min-height:54px;border:0;border-radius:0;background:var(--surface-low);color:var(--muted);display:flex;align-items:center;justify-content:center;gap:var(--space-4);padding:9px 8px;font:var(--size-caption)/1.2 var(--head);text-align:center}
.character-subtabs button span:last-child,.lore-subtabs button span:last-child{overflow-wrap:anywhere}
.character-subtabs button.active,.lore-subtabs button.active{color:var(--accent);background:linear-gradient(var(--accent-950),var(--surface-warm));box-shadow:inset 0 -2px var(--accent)}
.character-subtabs button:focus-visible,.lore-subtabs button:focus-visible{outline:1px solid var(--accent);outline-offset:-2px}
.character-content{min-width:0}
.character-card{border:1px solid var(--line);border-radius:var(--radius-2xl);background:linear-gradient(135deg,rgb(var(--accent-900-rgb) / .45),rgb(var(--surface-low-rgb) / .8));padding:18px;margin-bottom:16px;min-width:0}
.character-card>header{display:flex;align-items:center;margin-bottom:14px;border-bottom:1px solid rgb(var(--accent-800-rgb) / .68);padding-bottom:8px}
.character-card h2{display:flex;align-items:center;gap:var(--space-4);margin:0;color:var(--accent);font:600 var(--size-compact)/1.2 var(--head);letter-spacing:.14em;text-transform:uppercase}
.character-card h2 .material-symbols-outlined{font-size:19px}
.character-card h3{margin:0;color:var(--text);font:600 var(--size-story)/1.2 var(--head)}
.character-card p{overflow-wrap:anywhere}
.character-when{display:flex;align-items:center;gap:var(--space-5);border:1px solid var(--stone-850);border-radius:var(--radius-md);background:var(--well);padding:10px 12px;margin-bottom:12px;color:var(--accent-100)}
.character-when .material-symbols-outlined{color:var(--accent);font-size:21px}
.character-when strong{font-size:var(--size-lead);line-height:1.25}
.character-when strong>span{display:block}
.character-definitions{margin:0}
.character-definitions>div{display:grid;grid-template-columns:minmax(95px,.8fr) minmax(0,1.2fr);gap:var(--space-6);padding:8px 0;border-top:1px solid var(--stone-850);align-items:start}
.character-definitions>div:first-child{border-top:0}
.character-definitions dt{color:var(--muted)}
.character-definitions dd{margin:0;text-align:right;overflow-wrap:anywhere}
.condition-record{padding:4px 0 12px}
.condition-record:last-child{padding-bottom:0}
.condition-heading{display:flex;align-items:center;justify-content:space-between;gap:var(--space-6);margin-bottom:7px}
.condition-heading>span{display:flex;align-items:center;gap:var(--space-4);color:var(--muted)}
.condition-heading strong{text-align:right;font-weight:500}
.condition-heading .material-symbols-outlined{font-size:20px}
.condition-meter{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--space-3)}
.condition-meter>span{height:13px;border:1px solid var(--grey-800);border-radius:var(--radius-sm);background:var(--field)}
.condition-meter>span.lit{border-color:transparent}
.condition-health .material-symbols-outlined{color:var(--health-icon)}.condition-health .lit{background:linear-gradient(90deg,var(--health-from),var(--health-to));box-shadow:0 0 9px rgb(var(--health-glow-rgb) / .45)}
.condition-stamina .material-symbols-outlined{color:var(--stamina-icon)}.condition-stamina .lit{background:linear-gradient(90deg,var(--stamina-from),var(--stamina-to));box-shadow:0 0 9px rgb(var(--stamina-icon-rgb) / .5)}
.condition-hunger .material-symbols-outlined{color:var(--hunger-icon)}.condition-hunger .lit{background:linear-gradient(90deg,var(--hunger-from),var(--hunger-to));box-shadow:0 0 9px rgb(var(--hunger-to-rgb) / .48)}
.condition-thirst .material-symbols-outlined{color:var(--thirst-to)}.condition-thirst .lit{background:linear-gradient(90deg,var(--thirst-from),var(--thirst-to));box-shadow:0 0 9px rgb(var(--thirst-to-rgb) / .45)}
.condition-mana .material-symbols-outlined{color:var(--mana-icon)}.condition-mana .lit{background:linear-gradient(90deg,var(--mana-from),var(--mana-to));box-shadow:0 0 9px rgb(var(--mana-to-rgb) / .48)}
.injury-list,.magic-rule-list{margin:0;padding-left:1.2rem}
.injury-list li,.magic-rule-list li{padding:5px 0;overflow-wrap:anywhere}
.trait-list{display:flex;flex-wrap:wrap;gap:var(--space-4)}
.character-tag,.record-source{display:inline-flex;border:1px solid var(--stone-700);border-radius:var(--radius-pill);padding:4px 9px;color:var(--text-lore);font-size:var(--size-ui);background:var(--surface-low)}
.progress-record{position:relative;padding:9px 0 11px;border-top:1px solid var(--stone-850)}
.progress-record:first-child{border-top:0}
.progress-record.inactive{opacity:.65}
.progress-heading{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--space-6);align-items:baseline}
.progress-heading span{overflow-wrap:anywhere}
.progress-heading strong{font-weight:500;text-align:right}
.character-progress{height:8px;margin:7px 0 5px;border:1px solid var(--stone-800);border-radius:var(--radius-xs);background:var(--field);overflow:hidden}
.character-progress span{display:block;height:100%;background:linear-gradient(90deg,var(--accent-600),var(--accent-100));box-shadow:0 0 8px rgb(var(--accent-rgb) / .35)}
.progress-record.inactive .character-progress span{background:var(--stone-700);box-shadow:none}
.progress-record small{display:block;color:var(--muted);font-size:var(--size-ui);text-align:right}
.record-source{margin:-6px 0 8px;font-size:var(--size-caption);padding:2px 7px}
.character-crosslink{margin:-5px 2px 16px;color:var(--muted);font-size:var(--size-small);font-style:italic}
.practice-row{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:var(--space-6);padding:8px 0;border-top:1px solid var(--stone-850)}
.practice-row:first-child{border-top:0}
.practice-row span{text-align:right;color:var(--muted);overflow-wrap:anywhere}
.practice-more{margin-top:8px}
.practice-more summary{cursor:pointer;color:var(--accent)}
.record-note{color:var(--muted);font-size:var(--size-small);margin:4px 0 10px;overflow-wrap:anywhere}
/* Backstory & Information (character-view.mjs backstoryHtml): the full
   figure head to feet in a frame, a blurred wash of itself filling the
   sides, the name over its foot; the backstory as a page in the reading
   type, its first letter in the accent; the facts as a ledger. */
.backstory-hero{position:relative;height:min(460px,66vh);margin:0 0 14px;overflow:hidden;border:1px solid var(--stone-700);border-radius:var(--ledger-radius,2px);background:var(--well)}
.backstory-figure,.backstory-figure-paint{position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;border-radius:0;background:none}
.backstory-figure{cursor:zoom-in}
.backstory-figure-main{position:relative;z-index:1;display:block;width:auto;max-width:100%;height:100%;margin:0 auto;object-fit:contain}
.backstory-figure-wash{position:absolute;inset:-30px;width:calc(100% + 60px);height:calc(100% + 60px);object-fit:cover;filter:blur(18px) brightness(.45)}
.backstory-hero::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(to top,var(--surface) 3%,rgb(var(--bg-rgb) / .2) 26%,transparent 40%)}
.backstory-figure:focus-visible,.backstory-figure-paint:focus-visible{outline:2px solid var(--accent);outline-offset:-3px}
.backstory-figure.busy .backstory-figure-main{animation:figure-painting 1.4s ease-in-out infinite}
.backstory-figure-paint{display:grid;align-content:center;justify-items:center;gap:var(--space-3);padding-bottom:70px;color:var(--accent);font:var(--size-label)/1.3 var(--head);cursor:pointer}
.backstory-figure-paint .material-symbols-outlined{font-size:96px;color:var(--stone-500)}
.backstory-figure-paint:hover .material-symbols-outlined{color:var(--accent-600)}
.backstory-figure-paint:disabled{cursor:progress;color:var(--muted)}
.backstory-figure-paint[aria-busy=true] .material-symbols-outlined{animation:figure-painting 1.4s ease-in-out infinite}
.backstory-name{position:absolute;left:14px;right:14px;bottom:10px;z-index:3;pointer-events:none}
.backstory-name .profile-name{margin:0;color:var(--text);font:500 34px/1 var(--body);overflow-wrap:anywhere;text-shadow:0 1px 8px var(--bg)}
.backstory-name p{margin:4px 0 0;color:var(--text-dim);font:var(--size-label)/1.4 var(--head);text-shadow:0 1px 6px var(--bg)}
.backstory-hero .status-hero-more{z-index:4}
.backstory-page{margin:0 0 14px;padding:16px 16px 14px;border:1px solid var(--stone-700);border-radius:var(--ledger-radius,2px);background:linear-gradient(var(--surface-warm),var(--surface))}
.backstory-page p{margin:0;color:var(--text-soft);font-family:var(--read-font);font-size:calc(var(--read-scale) * var(--size-lead));line-height:var(--read-leading);overflow-wrap:anywhere}
.backstory-page p+p{margin-top:.7em}
.backstory-page>p:first-child::first-letter{float:left;margin:4px 8px 0 0;color:var(--accent);font:500 calc(var(--read-scale) * 46px)/.8 var(--read-font)}
.backstory-page h3{margin:16px 0 6px;color:var(--accent);font:600 var(--size-tiny)/1.4 var(--head);letter-spacing:.14em;text-transform:uppercase}
.backstory-page.empty-page p::first-letter{float:none;margin:0;color:inherit;font:inherit}
.backstory-ledger{margin:0;padding:0;list-style:none;border-top:1px solid var(--stone-700)}
.backstory-ledger li{display:flex;justify-content:space-between;align-items:baseline;gap:var(--space-6);padding:8px 0;border-bottom:1px solid var(--stone-850);font:var(--size-caption)/1.4 var(--head)}
.backstory-ledger span{flex:none;color:var(--muted);font:600 var(--size-tiny)/1.4 var(--head);letter-spacing:.1em;text-transform:uppercase}
.backstory-ledger b{min-width:0;color:var(--text-soft);font-weight:500;text-align:right;overflow-wrap:anywhere}
.backstory-note{margin-top:8px;font:var(--size-caption)/1.45 var(--head)}
@media(prefers-reduced-motion:reduce){.backstory-figure.busy .backstory-figure-main,.backstory-figure-paint[aria-busy=true] .material-symbols-outlined{animation:none}}
/* Magic & Spells (character-view.mjs magicHtml): the pool of power and the
   magic attribute as a ruled pair of tiles, the schools as small cards, then
   the spellbook, a grid of cards, each its kind, name, numbers and whether
   it is ready; a tap opens the spell dialog. */
.magic-tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;margin:0 0 12px;border:1px solid var(--stone-700);background:var(--stone-700)}
.magic-tile{display:grid;align-content:start;gap:3px;min-width:0;padding:10px 12px;background:var(--surface)}
.magic-tiles>.magic-tile:last-child:nth-child(odd){grid-column:1/-1}
.magic-tile small{color:var(--muted);font:600 var(--size-tiny)/1.3 var(--head);letter-spacing:.12em;text-transform:uppercase;overflow-wrap:break-word}
.magic-tile b{color:var(--text);font:500 var(--size-title)/1.15 var(--head);font-variant-numeric:tabular-nums}
.magic-tile b i{margin-left:5px;color:var(--ok);font:500 var(--size-caption) var(--head);font-style:normal;white-space:nowrap}
.magic-tile b i.down{color:var(--danger)}
.magic-tile b em{margin-left:6px;color:var(--text-dim);font:400 var(--size-label) var(--head);font-style:normal;white-space:nowrap}
.magic-tile p{margin:0;color:var(--text-dim);font:var(--size-caption)/1.4 var(--head)}
.magic-tile-bar{display:block;height:5px;margin-top:4px;background:linear-gradient(90deg,var(--mana-from),var(--mana-to)) 0 0/var(--fill,0%) 100% no-repeat,var(--stone-850)}
.magic-schools{display:flex;flex-wrap:wrap;gap:var(--space-3);margin:0 0 14px}
.magic-school{display:grid;gap:4px;flex:1 1 150px;min-width:0;padding:8px 10px;border:1px solid var(--stone-700);border-radius:var(--ledger-radius,2px);background:var(--surface)}
.magic-school>div{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-3)}
.magic-school b{min-width:0;color:var(--text);font:500 var(--size-small)/1.25 var(--head);overflow-wrap:anywhere}
.magic-school span{color:var(--text-dim);font:var(--size-caption) var(--head);font-variant-numeric:tabular-nums;white-space:nowrap}
.magic-school .skill-line-bar{margin:2px 0 0}
.magic-school small{color:var(--muted);font:var(--size-tiny)/1.35 var(--head)}
.magic-schools-empty{margin:0 0 12px}
.magic-spells{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-4)}
.magic-spell{display:flex;flex-direction:column;gap:6px;min-width:0;min-height:44px;padding:10px;border:1px solid var(--stone-700);border-radius:var(--ledger-radius,2px);background:linear-gradient(160deg,var(--surface-raised),var(--surface));color:var(--text);text-align:left;font:inherit;letter-spacing:0}
.magic-spell:hover,.magic-spell:focus-visible{border-color:var(--accent-600)}
.magic-spell:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.magic-spell-kind{color:var(--accent);font:600 var(--size-micro)/1.3 var(--head);letter-spacing:.14em;text-transform:uppercase;overflow-wrap:anywhere}
.magic-spell b{font:500 var(--size-compact)/1.2 var(--head);overflow-wrap:anywhere}
.magic-spell dl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:2px 8px;margin:0;font:var(--size-caption)/1.35 var(--head)}
.magic-spell dt{color:var(--muted)}
.magic-spell dd{margin:0;color:var(--text-soft);overflow-wrap:anywhere}
.magic-spell-state{margin-top:auto;padding-top:6px;border-top:1px solid var(--stone-850);color:var(--ok);font:600 var(--size-caption) var(--head)}
.magic-spell.cooling .magic-spell-state{color:var(--text-dim)}
.magic-spell.cooling b,.magic-spell.cooling dd{color:var(--text-dim)}
@media(max-width:340px){.magic-spells{grid-template-columns:minmax(0,1fr)}}
/* The Status tab's first card (character-view.mjs statusHeroHtml): the name,
   level, XP, points waiting and the pools on the left, over the full figure
   standing at the right and fading into the card from its left edge and up
   from its foot, where hunger and thirst run. In a narrow card (the desktop
   drawer) the figure is cropped at its sides rather than slid under the
   text. Text over the figure keeps a shadow of the page's colour. Before a figure is painted, that side offers
   to paint it. */
.status-hero{--hero-body:max(62%,212px);position:relative;overflow:hidden;min-width:0;margin:0 0 16px;padding:12px;border:1px solid var(--stone-700);border-radius:var(--ledger-radius,2px);background:var(--surface)}
.status-hero-art,.status-hero-paint{position:absolute;top:0;right:0;bottom:0;padding:0;border:0;border-radius:0;background:none}
.status-hero-art{aspect-ratio:9/16;max-width:calc(100% - var(--hero-body) + 24px);cursor:zoom-in}
.status-hero-art img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 0;-webkit-mask-image:linear-gradient(to right,transparent,var(--black) 42%);mask-image:linear-gradient(to right,transparent,var(--black) 42%)}
.status-hero-art::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,var(--surface),transparent 30%)}
.status-hero-art:focus-visible,.status-hero-paint:focus-visible{outline:2px solid var(--accent);outline-offset:-3px}
.status-hero-art.busy img{animation:figure-painting 1.4s ease-in-out infinite}
@keyframes figure-painting{50%{opacity:.45}}
.status-hero-paint{display:grid;align-content:center;justify-items:center;gap:var(--space-3);width:36%;padding:0 8px 56px;background:linear-gradient(to right,transparent,rgb(var(--accent-900-rgb) / .35));color:var(--accent);font:var(--size-caption)/1.3 var(--head);text-align:center;cursor:pointer}
.status-hero-paint .material-symbols-outlined{font-size:72px;color:var(--stone-500)}
.status-hero-paint:hover .material-symbols-outlined{color:var(--accent-600)}
.status-hero-paint:disabled{cursor:progress;color:var(--muted)}
.status-hero-paint[aria-busy=true] .material-symbols-outlined{animation:figure-painting 1.4s ease-in-out infinite}
@media(prefers-reduced-motion:reduce){.status-hero-art.busy img,.status-hero-paint[aria-busy=true] .material-symbols-outlined{animation:none}}
.status-hero-more{position:absolute;top:4px;right:4px;z-index:2;display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:var(--ledger-radius,2px);background:rgb(var(--bg-rgb) / .55);color:var(--text)}
.status-hero-more:hover,.status-hero-more[aria-expanded=true]{background:var(--accent-950);color:var(--accent)}
.status-hero-more:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.status-hero-more .action-glyph{width:22px;height:22px}
.status-hero-body{position:relative;z-index:1;width:var(--hero-body);min-width:0}
.status-hero .profile-name{margin:0;font:500 var(--size-headline)/1.1 var(--head);letter-spacing:-.02em;color:var(--text);overflow-wrap:anywhere;text-shadow:0 1px 6px var(--bg)}
.status-hero-body>p{margin:4px 0 0;color:var(--text-dim);font:var(--size-label)/1.4 var(--head);text-shadow:0 1px 4px var(--bg)}
.status-hero-body>p b{color:var(--accent-300);font-weight:500}
.status-hero-xp{display:grid;gap:5px;margin:12px 0}
.status-hero-xp>div{display:flex;justify-content:space-between;gap:var(--space-4);color:var(--muted);font:var(--size-caption)/1.3 var(--head);text-shadow:0 1px 4px var(--bg)}
.status-hero-xp>div span:last-child{color:var(--text-dim);font-variant-numeric:tabular-nums}
.status-hero-xp i{display:block;height:4px;background:linear-gradient(90deg,var(--accent-600),var(--accent)) 0 0/var(--fill,0%) 100% no-repeat,var(--stone-850)}
.status-hero-spend{display:inline-flex;align-items:center;gap:var(--space-2);min-height:44px;margin:0 0 10px;padding:0 10px 0 6px;border:1px solid var(--accent-700);border-radius:var(--ledger-radius,2px);background:var(--accent-950);color:var(--accent);font:500 var(--size-label)/1.2 var(--head);text-align:left}
.status-hero-spend .material-symbols-outlined{font-size:18px}
.status-hero-spend:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.status-hero .condition-record{padding:2px 0 10px}
.status-hero .condition-heading{text-shadow:0 1px 4px var(--bg)}
.status-hero-needs{position:relative;z-index:1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 var(--space-7);margin-top:4px}
@keyframes portrait-pulse{0%,100%{box-shadow:0 0 0 0 rgb(var(--accent-rgb) / 0)}50%{box-shadow:0 0 0 6px rgb(var(--accent-rgb) / .22)}}
.long-form{white-space:pre-wrap;line-height:1.55;margin:0}
.magic-detail dl{margin:0}
.magic-detail dl>div{display:grid;grid-template-columns:110px minmax(0,1fr);gap:var(--space-6);padding:8px 0;border-top:1px solid var(--stone-850)}
.magic-detail dt{color:var(--muted)}
.magic-detail dd{margin:0;overflow-wrap:anywhere}
.magic-detail .long-form{margin-bottom:12px}

/* The bar spans the panel's padding (app.css: 18px, 22px from 1200px, 12px and 10px on phones). */
@media(min-width:1200px){
  .character-subtabs,.lore-subtabs{top:-22px;margin:-22px -22px 18px}
}
@media(max-width:800px){
  .character-subtabs,.lore-subtabs{top:-12px;margin:-12px -12px 14px}
}
@media(max-width:480px){
  .character-subtabs,.lore-subtabs{top:-10px;margin:-10px -10px 12px}
  .character-subtabs button,.lore-subtabs button{min-height:52px;padding:7px 5px;font-size:var(--size-tiny);gap:var(--space-3)}
  .character-subtabs button .material-symbols-outlined,.lore-subtabs button .material-symbols-outlined{font-size:18px}
  .character-card{padding:14px;border-radius:var(--radius-xl);margin-bottom:12px}
  .character-card h2{font-size:var(--size-ui);letter-spacing:.12em}
  .character-when{padding:9px 10px}
  .character-when strong{font-size:var(--size-body)}
  .character-definitions>div{grid-template-columns:minmax(88px,.8fr) minmax(0,1.2fr);gap:var(--space-4)}
  .condition-heading{gap:var(--space-4)}
  .condition-meter{gap:var(--space-3)}
  .condition-meter>span{height:12px}
  .practice-row{grid-template-columns:1fr;gap:var(--space-2)}
  .practice-row span{text-align:left}
  .magic-detail dl>div{grid-template-columns:1fr;gap:var(--space-2)}
}
@media(max-width:360px){
  .character-subtabs button,.lore-subtabs button{font-size:var(--size-micro)}
  .condition-meter{gap:var(--space-2)}
  .progress-heading{gap:var(--space-4)}
}

/* Portrait (v6.11): stored image in the round frame; paint/repaint/remove
   controls beside the name. The Status tab shows the same header as a strip
   above its cards; Backstory keeps it inside the Character Profile card. */

.pool-word{color:var(--text-dim);font-weight:400;font-size:var(--size-small)}
.worn-change{font-style:normal;font-weight:400;font-size:var(--size-small);color:#6fcf8a}
.worn-change.down{color:#e48a7a}
/* Skills & Attributes (character-view.mjs skillsHtml): the Level card, then
   a ruled row of four section buttons, a dot on a section with something to
   spend, and the section under it. A card's heading may carry a count on its
   right. */
.character-card>header .card-aside{margin-left:auto;color:var(--muted);font:500 var(--size-caption) var(--head);letter-spacing:.02em;text-transform:none}
.skill-sections{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;margin:0 0 14px;border:1px solid var(--stone-700);background:var(--stone-700)}
.skill-sections button{position:relative;min-width:0;min-height:44px;padding:0 4px;border:0;border-radius:0;background:var(--surface);color:var(--muted);font:500 var(--size-label) var(--head);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.skill-sections button[aria-selected=true]{background:var(--accent-950);color:var(--accent);box-shadow:inset 0 -2px var(--accent)}
.skill-sections button:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.skill-section-dot{position:absolute;top:7px;right:7px;width:7px;height:7px;border-radius:var(--radius-round);background:var(--accent)}
.spend-note{display:flex;align-items:center;gap:var(--space-3);margin:0 0 12px;padding:8px 10px;border:1px solid var(--accent-700);border-radius:var(--ledger-radius,2px);background:var(--accent-950);color:var(--accent);font:500 var(--size-label)/1.35 var(--head)}
.spend-note .material-symbols-outlined{font-size:18px}
#skill-section .record-note{font:var(--size-caption)/1.45 var(--head)}
/* Attributes: a ruled grid of tiles, the number as worn (gear's part named), what it adds to a roll, and + while a point waits. */
.score-tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;border:1px solid var(--stone-700);background:var(--stone-700)}
.score-tile{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:var(--space-2);min-width:0;min-height:62px;margin:0;padding:8px 6px 8px 10px;background:var(--surface)}
.score-tile>span{display:grid;gap:1px;min-width:0}
.score-tile small{color:var(--muted);font:600 var(--size-tiny)/1.3 var(--head);letter-spacing:.12em;text-transform:uppercase;overflow-wrap:break-word}
.score-tile b{color:var(--text);font:500 var(--size-title)/1.15 var(--head);font-variant-numeric:tabular-nums}
.score-tile b i{margin-left:5px;color:var(--ok);font:500 var(--size-caption) var(--head);font-style:normal;white-space:nowrap}
.score-tile b i.down{color:var(--danger)}
.score-tile b em{margin-left:6px;color:var(--text-dim);font:400 var(--size-label) var(--head);font-style:normal;white-space:nowrap}
.score-tile-rule{display:block;color:var(--muted);font:var(--size-caption)/1.45 var(--head)}
.score-tile-raise{display:grid;place-items:center;width:44px;height:44px;padding:0;border:1px solid var(--accent-700);border-radius:var(--ledger-radius,2px);background:var(--accent-950);color:var(--accent)}
.score-tile-raise:hover,.score-tile-raise:focus-visible{border-color:var(--accent);background:var(--accent-900)}
.score-tile-raise:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.score-tile-raise .material-symbols-outlined{font-size:20px}
@media(max-width:360px){.score-tiles{grid-template-columns:minmax(0,1fr)}}
/* Skills by the attribute they roll with: the name, what it adds to a roll, its level, then the XP toward the next. */
.skill-group+.skill-group{margin-top:14px}
.skill-group h3{display:flex;justify-content:space-between;gap:var(--space-4);margin:0 0 2px;color:var(--accent);font:600 var(--size-tiny)/1.6 var(--head);letter-spacing:.14em;text-transform:uppercase}
.skill-group h3 span{color:var(--muted);letter-spacing:.04em;white-space:nowrap}
.skill-line{padding:8px 0;border-top:1px solid var(--stone-850)}
.skill-line-top{display:flex;align-items:baseline;gap:var(--space-4)}
.skill-line-top b{flex:1;min-width:0;color:var(--text);font:500 var(--size-small)/1.3 var(--head);overflow-wrap:anywhere}
.skill-line-top span{color:var(--text-dim);font:var(--size-caption) var(--head);font-variant-numeric:tabular-nums;white-space:nowrap}
.skill-line-top strong{min-width:44px;text-align:right;color:var(--text);font:600 var(--size-compact) var(--head);font-variant-numeric:tabular-nums;white-space:nowrap}
.skill-line-top strong small{color:var(--muted);font:500 var(--size-tiny) var(--head);letter-spacing:.08em;text-transform:uppercase}
.skill-line-bar{display:block;height:3px;margin:6px 0 4px;background:linear-gradient(90deg,var(--accent-600),var(--accent)) 0 0/var(--fill,0%) 100% no-repeat,var(--stone-850)}
.skill-line>small{display:block;color:var(--muted);font:var(--size-tiny)/1.35 var(--head)}
/* Abilities and trait choices: one row each, the name and its numbers, its words behind a tap, and its action beside it. */
.ability-rows{margin:0;padding:0;list-style:none}
.ability-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:var(--space-4);border-top:1px solid var(--stone-850)}
.ability-rows>.ability-row:first-child{border-top:0}
.ability-row>.ability-learn{margin-top:4px}
.ability-row>.pill{margin-top:16px;background:none;border:1px solid var(--stone-700);color:var(--text-dim)}
.ability-row-more>summary,.ability-row-plain{display:flex;align-items:center;min-height:52px;padding:6px 0}
.ability-row-plain{padding-left:19px}
.ability-row-more>summary::before{flex:none}
.ability-row-more>summary:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.ability-row-text{display:grid;gap:2px;min-width:0}
.ability-row-text b{color:var(--text);font:500 var(--size-small)/1.3 var(--head);overflow-wrap:anywhere}
.ability-row-text small{color:var(--text-dim);font:var(--size-caption)/1.4 var(--head)}
.ability-row.locked .ability-row-text b{color:var(--text-dim)}
.ability-row-more>p{margin:0 0 10px 19px;color:var(--text-soft);font:var(--size-label)/1.5 var(--head)}
.character-card .ability-heading{margin:14px 0 2px;color:var(--accent);font:600 var(--size-label) var(--head);letter-spacing:.14em;text-transform:uppercase}
.ability-learn{min-height:44px;padding:0 14px;border:1px solid var(--accent);border-radius:var(--ledger-radius,2px);background:var(--accent);color:var(--on-accent);font:600 var(--size-label) var(--head);cursor:pointer}
.ability-learn:hover,.ability-learn:focus-visible{border-color:var(--accent-300);background:var(--accent-300)}
.ability-learn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* Learnable: folded into one bar, its count and any point waiting on it. */
.ability-learnable{margin-top:10px;border:1px solid var(--stone-700);border-radius:var(--ledger-radius,2px);background:var(--surface-raised)}
.ability-learnable>summary{display:flex;align-items:center;gap:var(--space-4);min-height:52px;padding:0 10px;color:var(--text);font:500 var(--size-small) var(--head)}
.character-card details.ability-learnable>summary::before{content:none;display:none}
.ability-learnable>summary>span:first-child{flex:1;min-width:0}
.ability-learnable>summary small{color:var(--muted);font:var(--size-caption) var(--head)}
.ability-learnable>summary:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.ability-learnable>summary .material-symbols-outlined{color:var(--text-dim);transition:transform .15s}
.ability-learnable[open]>summary .material-symbols-outlined{transform:rotate(180deg)}
.ability-learnable-badge{padding:2px 8px;border-radius:var(--ledger-radius,2px);background:var(--accent);color:var(--on-accent);font:600 var(--size-caption) var(--head)}
.ability-learnable>.ability-rows{padding:0 10px 4px;border-top:1px solid var(--stone-700);background:var(--surface)}
@media(prefers-reduced-motion:reduce){.ability-learnable>summary .material-symbols-outlined{transition:none}}
/* Traits: the name and its kind, its bonuses under them. */
.trait-rows{margin:0;padding:0;list-style:none}
.trait-rows li{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:2px var(--space-4);padding:8px 0;border-top:1px solid var(--stone-850)}
.trait-rows li:first-child{border-top:0}
.trait-rows b{color:var(--text);font:500 var(--size-small) var(--head)}
.trait-kind{padding:2px 6px;border:1px solid var(--stone-700);border-radius:var(--ledger-radius,2px);color:var(--text-dim);font:600 var(--size-micro) var(--head);letter-spacing:.1em;text-transform:uppercase}
.trait-rows small{grid-column:1/-1;color:var(--text-dim);font:var(--size-caption)/1.45 var(--head)}