/* ══════════════════════════════════════════
   COMPONENTS — Shared UI components
   Covers: character cards, forms, dots, expandable rows,
   character sheet, editor controls, disciplines, merits,
   reading pane (questionnaires, downtimes).
   Loaded by all three apps (index.html, admin.html, player.html).
   ══════════════════════════════════════════ */

/* ── Character cards / chips ── */
.char-grid{display:flex;flex-wrap:wrap;gap:8px;}
.char-chip{background:var(--surf2);border:1px solid var(--bdr);border-radius:6px;padding:10px 16px;min-height:44px;font-family:var(--fl);font-size:13px;font-weight:600;letter-spacing:.04em;color:var(--txt);cursor:pointer;display:inline-flex;align-items:center;text-align:left;transition:border-color .15s,background .15s;}
.char-chip:hover{border-color:var(--bdr2);background:var(--surf3);color:var(--accent);}
.char-card{background:var(--surf);border:1px solid var(--bdr);border-radius:8px;padding:14px 18px;cursor:pointer;transition:border-color .15s,background .15s;display:flex;flex-direction:column;gap:6px;position:relative;}
.char-card:hover{border-color:var(--bdr2);background:var(--surf2);}
.char-card.dirty{border-left:3px solid var(--gold);}
.cc-top{display:flex;align-items:center;gap:10px;}
.cc-card-right{margin-left:auto;flex-shrink:0;display:flex;align-items:center;gap:6px;}
.cc-alert-wrap{flex-shrink:0;}
.cc-alert{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;font-size:11px;font-weight:700;font-family:var(--ft);line-height:1;}
.cc-alert.red{background:var(--badge-err-bg);color:var(--txt-on-dark);border:1px solid var(--badge-err-bdr);}
.cc-alert.yellow{background:var(--badge-warn-bg);color:var(--txt-on-dark);border:1px solid var(--badge-warn-bdr);font-size:8px;}
.cc-identity{flex:1;min-width:0;}
.cc-name{font-family:var(--fh);font-size:15px;font-weight:700;color:var(--accent);letter-spacing:.04em;}
.cc-player{font-family:var(--fl);font-size:12px;font-weight:700;color:var(--label-tertiary);}
.cc-mid{display:flex;gap:8px;align-items:center;flex-wrap:wrap;}
.cc-tag{font-family:var(--fl);font-size:10px;font-variant:small-caps;font-weight:600;letter-spacing:.04em;color:var(--label-tertiary);background:var(--surf2);border:0.5px solid var(--bdr);border-radius:10px;padding:2px 8px;display:flex;align-items:center;gap:4px;}
.cc-tag.clan{color:var(--txt2);}
.cc-tag.cov{color:var(--accent);border-color:var(--accent-a25);}
.cc-tag.title{color:var(--accent);border-color:var(--accent-a25);}
.cc-bot{display:flex;gap:16px;font-family:var(--fl);font-size:12px;color:var(--label-tertiary);}
.cc-bot span{white-space:nowrap;}
.cc-bot .val{color:var(--label-secondary);font-weight:600;}

/* ── Form elements ── */
.form-section{margin-bottom:28px;}
.form-section-title{font-family:var(--fl);font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);margin-bottom:14px;padding-bottom:6px;border-bottom:1px solid var(--bdr);}
.form-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px 20px;}
.form-row{display:flex;flex-direction:column;gap:4px;}
.form-label{font-family:var(--fl);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--txt3);}
.form-input{background:var(--surf2);border:1px solid var(--bdr);border-radius:5px;padding:8px 12px;font-family:var(--ft);font-size:14px;color:var(--txt);outline:none;transition:border-color .15s;}
.form-input:focus{border-color:var(--bdr3);}
.form-select{background:var(--surf2);border:1px solid var(--bdr);border-radius:5px;padding:8px 12px;font-family:var(--ft);font-size:14px;color:var(--txt);outline:none;cursor:pointer;}
.form-select:focus{border-color:var(--bdr3);}
.form-select option{background:var(--surf);color:var(--txt);}

/* ── Dot steppers ── */
.dot-stepper{display:flex;gap:2px;align-items:center;}
.dot{width:18px;height:18px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:16px;user-select:none;-webkit-tap-highlight-color:transparent;transition:opacity .1s;}
.dot.filled{color:var(--accent);}
.dot.bonus{color:var(--accent2);}
/* CSS-rendered hollow dot (legacy — use .pointed/.pointed.hollow instead) */
.dot-hollow{display:inline-block;width:.65em;height:.65em;border:1.5px solid currentColor;border-radius:50%;vertical-align:middle;margin-bottom:.1em;}
/* Uniform CSS dots — identical on all platforms including iOS Safari.
   Replaces Unicode ●/○ which render at different sizes per platform. */
.pointed{display:inline-block;width:8px;height:8px;border-radius:50%;background:currentColor;margin:0 1px;vertical-align:middle;}
.pointed.hollow{background:transparent;border:1.5px solid currentColor;width:7px;height:7px;}
.dot.empty{color:var(--accent-a25);}
.dot:hover{opacity:1;}

/* ── Expandable rows ── */
.exp-row{display:flex;justify-content:space-between;align-items:center;padding:10px 10px;min-height:44px;background:var(--surf2);border:0.5px solid var(--bdr);border-radius:4px;cursor:pointer;margin-bottom:3px;user-select:none;-webkit-user-select:none;}
.exp-row.open{border-bottom-left-radius:0;border-bottom-right-radius:0;border-bottom-color:transparent;margin-bottom:0;}
.exp-lbl{font-family:var(--fl);font-size:9px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:var(--label-secondary);flex-shrink:0;}
.exp-lbl.labeled{min-width:82px;}
.exp-val{font-family:var(--fl);font-size:12px;font-variant:small-caps;font-weight:600;color:var(--label-secondary);flex:1;padding:0 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.exp-arr{font-size:11px;color:var(--txt3);transition:transform .15s;flex-shrink:0;}
.exp-row.open .exp-arr{transform:rotate(90deg);}
.trait-arr-hidden{visibility:hidden;}
.exp-body{display:none;background:var(--surf3);border:0.5px solid var(--bdr);border-top:none;border-radius:0 0 4px 4px;padding:9px 10px;margin-bottom:3px;font-family:var(--ft);font-size:11px;color:var(--txt2);line-height:1.6;}
.exp-body.visible{display:block;}
.exp-wp-lbl{font-family:var(--fl);font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin-right:4px;}
.exp-ts-row{margin-bottom:5px;}
.exp-ts-hum{font-family:var(--fl);font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--txt3);display:block;margin-bottom:2px;}
.exp-ts-name{font-family:var(--fl);font-size:11px;color:var(--txt);}
.exp-ts-desc{font-family:var(--fl);font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--txt3);}

/* ── Shared icon filters ── */
.topbar-logo{width:28px;height:28px;filter:invert(1) sepia(1) brightness(.78) saturate(2.8);opacity:.8;}
.edit-icon{width:22px;height:22px;opacity:.7;filter:invert(1) sepia(1) brightness(.78) saturate(2.8);}
/* faction-icon: clan/covenant <span> elements using CSS mask + background-color.
   Avoids filter-chain maths entirely — background-color is the icon colour. */
.faction-icon{display:inline-block;background-color:var(--gold);-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;}
.clan-icon{opacity:.7;}
.cov-icon{opacity:.6;}

/* ── Search and filter toolbar ── */
.list-toolbar{display:flex;gap:12px;margin-bottom:20px;align-items:center;flex-wrap:wrap;}
.list-search{flex:1;min-width:200px;background:var(--surf2);border:1px solid var(--bdr);border-radius:6px;padding:8px 14px;font-family:var(--ft);font-size:14px;color:var(--txt);outline:none;}
.list-search:focus{border-color:var(--bdr3);}
.list-search::placeholder{color:var(--txt3);}
.list-filter{background:var(--surf2);border:1px solid var(--bdr);border-radius:6px;padding:8px 12px;font-family:var(--ft);font-size:13px;color:var(--txt);cursor:pointer;outline:none;}
.list-filter:focus{border-color:var(--bdr3);}
.list-count{font-family:var(--fl);font-size:11px;color:var(--txt3);letter-spacing:.06em;}

/* ── Merit breakdown row ── */
.merit-bd-row{display:flex;align-items:center;gap:5px;background:var(--surf);border:1px solid var(--bdr);border-top:none;border-radius:0 0 5px 5px;padding:3px 6px;font-size:11px;font-family:var(--ft);}
.merit-bd-row .bd-grp{display:flex;flex-direction:column;align-items:stretch;gap:1px;flex:0 0 44px;}
.merit-bd-row .bd-lbl{color:var(--txt);font-weight:600;font-size:10px;}
.merit-bd-row .bd-eq{display:flex;align-items:center;gap:2px;margin-left:auto;flex-shrink:0;min-width:54px;justify-content:flex-end;}
.merit-bd-row .bd-eq .bd-lbl{color:var(--txt3);}
.merit-bd-row .bd-val{color:var(--txt);font-weight:600;}
.merit-bd-input{width:100%;min-width:0;background:var(--surf2);border:1px solid var(--bdr2);border-radius:3px;color:var(--txt);font-family:var(--ft);font-size:11px;text-align:center;padding:2px;outline:none;box-sizing:border-box;}
.merit-bd-input:focus{border-color:var(--gold);}
.bd-sep{width:1px;background:var(--bdr2);align-self:stretch;margin:0 2px;flex-shrink:0;}
.bd-bonus-lbl{color:var(--accent)!important;}
.bd-bonus-input{color:var(--accent)!important;border-color:var(--accent-a25)!important;}
.bd-bonus-input:focus{border-color:var(--accent)!important;}
.bd-total{font-size:9px;font-family:var(--ft);color:var(--txt3);margin-left:auto;}
.bd-needs-hint{font-size:9px;color:var(--txt3);font-style:italic;margin-left:4px;}
.dots-purch{color:var(--gold2);}
.dots-bonus{color:var(--gdim);}
.merit-prereq-warn{font-size:10px;font-family:var(--ft);color:var(--err);background:var(--crim-a12);border:1px solid var(--crim-a30);border-radius:3px;padding:3px 8px;margin-bottom:4px;}
.merit-prereq-txt{color:var(--txt2);font-style:italic;}
.merit-prereq-fail{border-left:2px solid var(--err)!important;}

/* ══════════════════════════════════════════
   PARCHMENT THEME OVERRIDES
   Applied to admin.html + player.html (light default).
   index.html is always dark — these rules never fire there.
   ══════════════════════════════════════════ */


/* Faction icons: switch background-color to crimson on parchment.
   opacity:1 overrides the .clan-icon/.cov-icon dim values tuned for dark bg. */
html:not([data-theme="dark"]) .faction-icon { background-color: var(--crim); opacity: 1; }

/* Topbar / edit button icons: filter recolour on parchment (not tokenisable — SVG filter chain) */
html:not([data-theme="dark"]) .topbar-logo,
html:not([data-theme="dark"]) .edit-icon {
  filter: invert(1) sepia(1) hue-rotate(300deg) brightness(0.30);
  opacity: 1;
}


/* ══════════════════════════════════════════
   EDITOR — Editor-specific styles
   Topbar, list view, edit view, sheet view,
   merit/MCI/domain editing, XP, disciplines
   ══════════════════════════════════════════ */

/* ══ TOP BAR ══ */
#topbar{flex-shrink:0;background:var(--surf);border-bottom:1px solid var(--bdr);display:flex;align-items:center;padding:0 24px;height:56px;gap:24px;z-index:50;}
.topbar-title{font-family:var(--fl);font-size:18px;color:var(--accent);letter-spacing:.04em;white-space:nowrap;}
.topbar-nav{display:flex;gap:4px;margin-left:24px;}
.topbar-btn{background:none;border:none;font-family:var(--fl);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--txt3);padding:8px 16px;cursor:pointer;border-radius:4px;transition:color .15s,background .15s;}
.topbar-btn:hover{color:var(--txt2);background:var(--gold-a5);}
.topbar-btn.on{color:var(--accent);background:var(--accent-a8);}
.topbar-right{margin-left:auto;display:flex;gap:8px;align-items:center;}
.topbar-action{background:none;border:1px solid var(--bdr2);font-family:var(--fl);font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);padding:6px 14px;border-radius:4px;cursor:pointer;transition:background .15s;}
.topbar-action:hover{background:var(--gold-a10);}
.topbar-action.crim{border-color:var(--crim-a45);color:var(--txt);}
.topbar-action.crim:hover{background:var(--crim-a15);}
.topbar-action.green{border-color:var(--green-a45);color:var(--green2);}
.topbar-action.green:hover{background:var(--green-a15);}

/* ══ LIST VIEW ══ */
#v-list{padding:24px 32px;}

/* ══ EDIT VIEW ══ */
#v-edit.active{display:flex;flex-direction:column;padding:0;}
.edit-header{flex-shrink:0;background:var(--surf);border-bottom:1px solid var(--bdr);padding:12px 24px;display:flex;align-items:center;gap:16px;}
.edit-charname{font-family:var(--fh);font-size:16px;font-weight:600;color:var(--accent);letter-spacing:.02em;}
.edit-back{background:none;border:none;color:var(--txt3);font-size:18px;cursor:pointer;padding:4px 8px;}
.edit-back:hover{color:var(--gold);}
.edit-tabs{display:flex;gap:2px;margin-left:24px;}
.edit-tab{background:none;border:none;font-family:var(--fl);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--txt3);padding:8px 14px;cursor:pointer;border-radius:4px 4px 0 0;transition:color .15s,background .15s;}
.edit-tab:hover{color:var(--txt2);}
.edit-tab.on{color:var(--accent);background:var(--accent-a8);border-bottom:2px solid var(--accent);}
.edit-dirty{font-family:var(--fl);font-size:10px;color:var(--accent);letter-spacing:.08em;margin-left:auto;opacity:0;transition:opacity .2s;}
.edit-dirty.on{opacity:1;}
.edit-body{flex:1;overflow-y:auto;padding:24px 32px 48px;}
.etab{display:none;}
.etab.active{display:block;}

/* ── Attribute grid ── */
.attr-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:20px;}
.attr-group-title{font-family:var(--fl);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin-bottom:10px;text-align:center;}
.attr-row{display:flex;align-items:center;justify-content:space-between;padding:5px 0;border-bottom:1px solid var(--gold-a6);}
.attr-name{font-family:var(--fl);font-size:12px;letter-spacing:.04em;color:var(--txt2);min-width:100px;}

/* ── Skills ── */
.skill-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:20px;}
.skill-group-title{font-family:var(--fl);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin-bottom:10px;text-align:center;}
.skill-row{padding:5px 0;border-bottom:1px solid var(--gold-a6);}
.skill-top{display:flex;align-items:center;justify-content:space-between;}
.skill-name{font-family:var(--fl);font-size:11px;letter-spacing:.04em;color:var(--txt2);min-width:90px;}
.skill-flags{display:flex;gap:4px;align-items:center;margin-left:4px;}
.skill-flag{font-family:var(--fl);font-size:9px;letter-spacing:.06em;color:var(--txt3);border:1px solid var(--bdr);border-radius:3px;padding:1px 5px;cursor:pointer;user-select:none;transition:color .15s,border-color .15s;}
.skill-flag.on{color:var(--accent);border-color:var(--bdr2);}
.skill-spec{margin-top:4px;}
.skill-spec-input{width:100%;background:var(--bg);border:1px solid var(--gold-a10);border-radius:3px;padding:4px 8px;font-family:var(--ft);font-size:11px;color:var(--txt2);outline:none;}
.skill-spec-input:focus{border-color:var(--bdr2);}
.skill-spec-input::placeholder{color:var(--txt3);opacity:.5;}

/* ── XP sidebar ── */
.xp-summary{position:sticky;top:0;background:var(--surf);border:1px solid var(--bdr);border-radius:8px;padding:14px 18px;margin-bottom:20px;}
.xp-title{font-family:var(--fl);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:8px;}
.xp-row{display:flex;justify-content:space-between;padding:3px 0;font-size:13px;}
.xp-row .xp-label{color:var(--txt3);}
.xp-row .xp-val{color:var(--txt2);font-variant-numeric:tabular-nums;}
.xp-row.total .xp-label{color:var(--txt2);}
.xp-row.total .xp-val{color:var(--accent);font-weight:500;}
.xp-row.left .xp-val{color:var(--green2);}
.xp-row.left.neg .xp-val{color:var(--err);}
.xp-divider{border:none;border-top:1px solid var(--bdr);margin:6px 0;}

/* ══ EXPORT VIEW ══ */
#v-export{padding:32px;}
.export-section{max-width:500px;}
.export-desc{color:var(--txt2);font-size:14px;line-height:1.6;margin-bottom:20px;}

/* ── Inline edit mode ── */
.sh-edit-input{background:var(--surf2);border:1px solid var(--bdr2);border-radius:4px;padding:4px 8px;font-family:var(--ft);color:var(--txt);outline:none;width:100%;}
.sh-edit-input:focus{border-color:var(--gold);}
.sh-edit-select{background:var(--surf2);border:1px solid var(--bdr2);border-radius:4px;padding:4px 8px;font-family:var(--ft);font-size:12px;color:var(--txt);outline:none;cursor:pointer;width:100%;}
.sh-edit-select:focus{border-color:var(--gold);}
.sh-edit-select option{background:var(--surf);color:var(--txt);}
.sh-char-name .sh-edit-input{font-family:var(--fh);font-size:20px;font-weight:600;color:var(--accent);letter-spacing:.02em;background:transparent;border-color:var(--bdr2);padding:2px 6px;}
.sh-char-player .sh-edit-input{font-family:var(--fl);font-size:11px;color:var(--txt2);background:transparent;border-color:var(--bdr);padding:2px 6px;}
.sh-char-concept .sh-edit-input{font-family:var(--ft);font-size:11px;color:var(--txt);background:transparent;border-color:var(--bdr);padding:2px 6px;}
.sheet-edit-btn.editing{background:var(--accent-a8);color:var(--accent);}
.sh-bane-edit-row{display:flex;gap:6px;align-items:center;margin-bottom:4px;}
.sh-bane-edit-row .sh-edit-input{flex:1;}
.sh-bane-rm{background:none;border:none;color:var(--txt3);cursor:pointer;font-size:14px;padding:2px 6px;}
.sh-bane-rm:hover{color:var(--err);}
.sh-bane-add{background:none;border:1px solid var(--bdr);border-radius:4px;color:var(--txt3);cursor:pointer;font-family:var(--fl);font-size:10px;letter-spacing:.08em;padding:6px 12px;margin-top:4px;}
.sh-bane-add:hover{color:var(--accent);border-color:var(--bdr2);}

/* ── Ordeals and XP breakdown ── */
.sh-ordeals{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px;padding:6px 10px;background:var(--surf);border:1px solid var(--bdr);border-radius:6px;justify-content:center;}
.sh-ordeal{display:flex;align-items:center;gap:5px;font-family:var(--fl);font-size:10px;letter-spacing:.04em;color:var(--txt3);cursor:default;}
.sh-ordeal.done{color:var(--accent);}
.sh-ordeal-dot{font-size:12px;}
.sh-ordeal-label{text-transform:uppercase;}
.sh-xp-breakdown{margin-top:6px;padding:8px 10px;background:var(--surf);border:1px solid var(--bdr);border-radius:6px;}
.sh-xp-breakdown table{width:100%;border-collapse:collapse;font-family:var(--ft);font-size:11px;}
.sh-xp-breakdown th{color:var(--accent);font-family:var(--fl);font-size:10px;letter-spacing:.06em;text-transform:uppercase;text-align:left;padding:2px 4px 4px;border-bottom:1px solid var(--bdr);}
.sh-xp-breakdown td{padding:3px 4px;color:var(--txt2);vertical-align:middle;}
.sh-xp-breakdown td:nth-child(odd){font-family:var(--fl);font-size:9px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--label-secondary);}
.sh-xp-breakdown td:nth-child(even){text-align:right;font-family:var(--ft);font-size:11px;font-weight:normal;letter-spacing:normal;text-transform:none;color:var(--txt2);}
.sh-xp-breakdown .xp-total-row td{border-top:1px solid var(--bdr);color:var(--txt);font-weight:600;}
.sh-xp-breakdown input[type=number]{width:48px;background:var(--surf2);border:1px solid var(--bdr);border-radius:3px;color:var(--txt);font-family:var(--ft);font-size:11px;text-align:right;padding:2px 4px;outline:none;}
.sh-xp-breakdown input[type=number]:focus{border-color:var(--gold);}

/* ── Attribute creation points ── */
.sh-attr-col-hdr{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin-bottom:4px;}
.sh-attr-pri{display:flex;flex-direction:column;align-items:center;justify-content:center;}
.sh-cp-remaining{font-size:9px;color:var(--txt2);margin-top:2px;}
.sh-cp-remaining.full{color:var(--green2-a8);}
.sh-cp-remaining.over{color:var(--err-a9);}
.sh-attr-pri select{background:var(--surf2);border:1px solid var(--bdr);border-radius:4px;padding:3px 6px;font-family:var(--fl);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--gold);outline:none;cursor:pointer;text-align:center;width:100%;}
.sh-attr-pri select option{background:var(--surf);color:var(--txt);}
.sh-clan-attr-row{display:flex;align-items:center;gap:8px;margin-bottom:8px;font-family:var(--fl);font-size:10px;letter-spacing:.06em;color:var(--txt2);text-transform:uppercase;}
.clan-attr-pill{display:flex;border:1px solid var(--bdr);border-radius:4px;overflow:hidden;}
.cap-btn{flex:1;padding:2px 10px;font-family:var(--fl);font-size:10px;letter-spacing:.05em;text-transform:uppercase;background:var(--surf2);color:var(--txt2);border:none;border-right:1px solid var(--bdr);cursor:pointer;transition:background .1s,color .1s;white-space:nowrap;}
.cap-btn:last-child{border-right:none;}
.cap-btn.active{background:var(--accent-a15);color:var(--accent);font-weight:700;}
.cap-btn:hover:not(.active){background:var(--surf3);color:var(--txt);}
.attr-clan-star{color:var(--accent);font-size:10px;margin-left:3px;}

/* ── Skill specs and breakdown ── */
.sh-spec-counter{font-family:var(--fl);font-size:10px;letter-spacing:.04em;color:var(--txt3);text-align:center;margin-bottom:6px;}
.sh-merit-cp-row{font-family:var(--fl);font-size:12px;letter-spacing:.04em;margin-bottom:4px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.sh-merit-cp-lbl{color:var(--label-secondary);}
.sh-bh-grid{display:grid;grid-template-columns:62px 72px 72px 72px auto;align-items:center;row-gap:4px;font-family:var(--fl);font-size:11px;letter-spacing:.04em;margin-bottom:4px;}
.sh-bh-lbl{color:var(--label-secondary);font-weight:600;}
.sh-bh-field{display:flex;align-items:center;gap:3px;color:var(--txt3);}
.sh-bh-field input{width:36px;padding:2px 4px;font-size:11px;text-align:center;}
.sh-bh-flbl{color:var(--label-secondary);}
.sh-bh-total{color:var(--txt2);padding-left:4px;}
.sh-bh-alert{color:var(--accent);font-size:10px;margin-left:4px;}
.sh-spec-counter .sc-val{color:var(--txt2);}
.sh-spec-counter .sc-over{color:var(--err-a9);}
.sh-spec-counter .sc-full{color:var(--green2-a8);}
.sh-spec-counter .sc-xp{font-size:10px;color:var(--crim);}
.sh-spec-counter .sc-bonus{font-size:10px;color:var(--accent);}
.sh-spec-counter .sc-parts{font-size:10px;color:var(--txt3);margin-top:1px;}
.sk-spec-list{margin-top:3px;border-top:1px solid var(--bdr);padding-top:3px;}
.sk-spec-row{display:flex;gap:4px;align-items:center;margin-bottom:2px;}
.sk-spec-input{flex:1;min-width:0;background:var(--surf2);border:1px solid var(--bdr);border-radius:3px;color:var(--txt2);font-family:var(--ft);font-size:9px;padding:2px 5px;outline:none;}
.sk-spec-input:focus{border-color:var(--gold);}
.sk-spec-rm{background:none;border:none;color:var(--txt3);cursor:pointer;font-size:12px;padding:0 3px;line-height:1;}
.sk-spec-rm:hover{color:var(--err);}
.sk-spec-add{background:none;border:1px solid var(--bdr2);border-radius:4px;color:var(--label-secondary);cursor:pointer;font-family:var(--fl);font-size:9px;font-variant:small-caps;font-weight:600;letter-spacing:.05em;padding:2px 8px;margin-top:2px;}
.sk-spec-add:hover{background:var(--surf2);color:var(--txt);}
.sk-bd-panel{background:var(--surf);border:1px solid var(--bdr);border-top:none;border-radius:0 0 4px 4px;padding:3px 6px;margin-bottom:3px;}
.sk-bd-row{display:flex;gap:5px;align-items:center;font-size:11px;font-family:var(--ft);min-width:0;}
.sk-bd-row .bd-grp{display:flex;flex-direction:column;align-items:stretch;gap:1px;flex:1;min-width:0;}
.sk-bd-row .bd-lbl{color:var(--txt);font-weight:600;font-size:10px;}
.sk-bd-row .bd-eq{display:flex;align-items:center;gap:2px;}
.sk-bd-row .bd-eq .bd-lbl{color:var(--txt3);}
.sk-bd-row .bd-val{color:var(--txt);font-weight:600;}
.sh-skill-row.sk-edit{background:var(--surf2);border-color:var(--bdr);border-radius:4px 4px 0 0;border-bottom:none;}

/* ── Attribute breakdown panel ── */
.attr-bd-panel{background:var(--surf);border:1px solid var(--bdr);border-top:none;border-radius:0 0 5px 5px;padding:3px 6px;min-width:0;overflow:hidden;margin-bottom:3px;}
.attr-bd-row{display:flex;gap:5px;align-items:center;font-size:11px;font-family:var(--ft);min-width:0;}
.attr-bd-row .bd-grp{display:flex;flex-direction:column;align-items:stretch;gap:1px;flex:1;min-width:0;}
.attr-bd-row .bd-lbl{color:var(--txt);font-weight:600;font-size:10px;}
.attr-bd-row .bd-eq{display:flex;align-items:center;gap:2px;}
.attr-bd-row .bd-eq .bd-lbl{color:var(--txt3);}
.attr-bd-row .bd-val{color:var(--txt);font-weight:600;}
.attr-bd-input{width:100%;min-width:0;background:var(--surf2);border:1px solid var(--bdr2);border-radius:3px;color:var(--txt);font-family:var(--ft);font-size:11px;text-align:center;padding:2px;outline:none;box-sizing:border-box;}
.attr-bd-input:focus{border-color:var(--gold);}
.attr-bd-ro{display:block;width:100%;min-width:0;background:var(--surf1);border:1px solid var(--bdr);border-radius:3px;color:var(--txt2);font-family:var(--ft);font-size:11px;text-align:center;padding:2px;box-sizing:border-box;}
.attr-derived-row{display:flex;gap:6px;align-items:center;font-size:11px;font-family:var(--ft);margin-top:3px;border-top:1px solid var(--bdr);padding-top:3px;}
.attr-derived-row .bd-lbl{color:var(--label-secondary);}
.attr-derived-row .bd-src{color:var(--label-secondary);}
.attr-derived-row .bd-src-lbl{color:var(--txt3);font-size:10px;}
.attr-derived-row .bd-eff{margin-left:auto;display:flex;align-items:center;gap:2px;}
.attr-derived-row .bd-eff .bd-lbl{color:var(--txt2);}
.attr-derived-row .bd-eff .bd-val{color:var(--accent);font-weight:600;}

/* ── Influence editing ── */
.infl-edit-row{display:flex;gap:6px;align-items:center;padding:5px 8px;background:var(--surf2);border:0.5px solid var(--bdr);border-radius:4px;margin-bottom:3px;}
.infl-edit-row select,.infl-edit-row input[type=text]{background:var(--surf);border:1px solid var(--bdr);border-radius:3px;color:var(--txt);font-family:var(--ft);font-size:10px;padding:3px 5px;outline:none;}
.infl-edit-row select:focus,.infl-edit-row input:focus{border-color:var(--gold);}
.infl-edit-row .infl-type{width:90px;}
.infl-edit-row .infl-area{flex:1;min-width:80px;}
.infl-edit-row .infl-dots{width:40px;text-align:center;}
.infl-edit-row .infl-dots-fixed{width:40px;text-align:center;font-size:11px;color:var(--txt3);}
.infl-edit-row .infl-area-none{flex:1;}
.infl-edit-row .infl-area-narrow{flex:1;}
.infl-edit-row .infl-area-fixed{flex:1;font-family:var(--ft);font-size:10px;color:var(--txt2);padding:3px 5px;}
.infl-ghoul-lbl{font-family:var(--ft);font-size:10px;color:var(--txt2);white-space:nowrap;display:flex;align-items:center;gap:3px;cursor:pointer;}
.infl-mode-btn{font-family:var(--ft);font-size:9px;color:var(--txt3);background:var(--surf);border:1px solid var(--bdr);border-radius:3px;padding:2px 5px;cursor:pointer;white-space:nowrap;flex-shrink:0;}
.infl-mode-btn:hover{border-color:var(--gold);color:var(--txt);}
.infl-contacts-total{font-family:var(--ft);font-size:12px;color:var(--txt2);padding:4px 8px 2px;}
.contacts-edit-block{background:var(--surf);border:1px solid var(--bdr);border-radius:6px;padding:10px 12px;margin:6px 0;}
.contacts-edit-hdr{font-family:var(--fl);font-size:13px;color:var(--accent);margin-bottom:8px;}
.contacts-dot-row{display:flex;align-items:center;gap:8px;margin-bottom:4px;}
.contacts-dot-num{font-size:13px;color:var(--txt2);min-width:32px;}
.contacts-sphere-sel{flex:1;padding:4px 6px;background:var(--surf2);border:1px solid var(--bdr);border-radius:4px;color:var(--txt);font-size:13px;}
.contacts-dot-src{font-family:var(--fl);font-size:11px;color:var(--txt3);letter-spacing:.06em;}
.infl-dots-derived{width:60px;text-align:center;font-size:11px;color:var(--txt2);padding:0 4px;}
.infl-edit-row .infl-inf{display:flex;align-items:center;flex-shrink:0;}
.infl-tier-chip{font-family:var(--fl);font-size:9px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--accent);background:var(--accent-a8);border:1px solid var(--accent-a40);padding:1px 5px;border-radius:3px;white-space:nowrap;}
.infl-total{font-family:var(--fl);font-size:11px;letter-spacing:.04em;color:var(--txt2);text-align:right;padding:4px 8px;border-top:1px solid var(--bdr);margin-top:4px;}
.infl-total .inf-n{color:var(--accent);font-weight:600;}

/* ── MCI blocks ── */
.mci-block{background:var(--surf2);border:1px solid var(--bdr);border-radius:6px;padding:8px 10px;margin-bottom:6px;}
.mci-block.mci-inactive{opacity:0.45;}
.mci-header{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;margin-bottom:4px;}
.mci-title{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0;}
.mci-cult-name{display:block;font-size:10px;color:var(--txt2);letter-spacing:.06em;}
.mci-header-right{display:flex;align-items:center;gap:6px;flex-shrink:0;}
.mci-toggle-btn{font-family:var(--ft);font-size:9px;padding:2px 7px;border-radius:3px;border:1px solid var(--bdr2);background:var(--surf);color:var(--txt2);cursor:pointer;white-space:nowrap;}
.mci-toggle-btn:hover{border-color:var(--gold);color:var(--txt);}
.mci-inactive .mci-toggle-btn{border-color:var(--bdr);color:var(--txt3);}
.mci-benefit-row{display:flex;align-items:center;gap:8px;padding:3px 0;border-top:1px solid var(--bdr);}
.mci-dot-lbl{font-family:var(--fl);font-size:9px;color:var(--accent);letter-spacing:.05em;flex-shrink:0;width:44px;}
.mci-dot-content{display:flex;flex-wrap:wrap;align-items:center;gap:4px;flex:1;}
.mci-benefit-text{font-family:var(--ft);font-size:11px;color:var(--txt);flex:1;}
.mci-unset{color:var(--txt3);font-style:italic;}
.mci-benefit-empty{color:var(--txt3);}
.mci-benefit-input{flex:1;background:var(--w-a6);border:1px solid var(--w-a12);color:var(--txt1);font-size:11px;padding:3px 6px;}
.mci-choice-btn{font-family:var(--ft);font-size:10px;padding:2px 8px;border-radius:3px;border:1px solid var(--bdr2);background:var(--surf);color:var(--txt3);cursor:pointer;white-space:nowrap;}
.mci-choice-btn:hover{border-color:var(--gold);color:var(--txt);}
.mci-choice-active{background:var(--surf3);border-color:var(--accent);color:var(--accent);}
.mci-pool-row{display:flex;align-items:center;gap:8px;padding:4px 0;border-top:1px solid var(--gold2-a12);margin-top:2px;}
.mci-pool-lbl{font-family:var(--fl);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--txt3);}
.mci-pool-val{font-family:var(--fl);font-size:12px;color:var(--accent);}
.mci-pool-hint{font-family:var(--ft);font-size:10px;color:var(--txt3);font-style:italic;}
.mci-tier-pick{display:flex;gap:6px;align-items:center;margin-top:3px;}
.mci-tier-sel{padding:3px 6px;font-size:11px;background:var(--surf);color:var(--txt1);border:1px solid var(--bdr);border-radius:3px;max-width:200px;}
.mci-tier-qual{max-width:120px;padding:3px 6px;font-size:11px;}
.mci-unassigned{color:var(--txt3);font-style:italic;font-size:11px;}

/* ── General merit editing ── */
.gen-edit-row{display:flex;align-items:center;gap:6px;padding:4px 8px;border-bottom:1px solid var(--w-a5);}
.gen-name-input{flex:1;min-width:0;background:var(--w-a6);border:1px solid var(--w-a12);color:var(--txt1);font-size:12px;padding:3px 6px;}
.gen-name-select{flex:1;min-width:0;background:var(--surf2);border:1px solid var(--bdr2);color:var(--txt);font-size:11px;padding:3px 4px;}
.gen-granted-row{opacity:.75;}
.gen-granted-name{flex:1;font-size:12px;color:var(--txt2);}
.grant-pools{padding:4px 8px;margin-bottom:6px;border-bottom:1px solid var(--gold2-a12);}
.grant-pool-row{font-size:10px;font-family:var(--fl);letter-spacing:.03em;padding:2px 0;color:var(--txt2);display:flex;align-items:center;}
.grant-pool-tag{color:var(--label-secondary);flex-shrink:0;font-weight:700;}
.derived-note{font-size:10px;font-family:var(--fl);letter-spacing:.03em;color:var(--label-secondary);padding:2px 8px;}
.merit-rating-warn{color:var(--crim);font-weight:600;cursor:help;}
.grant-pool-rank{font-size:10px;color:var(--txt3);margin-left:6px;}
.gen-granted-tag{font-size:9px;font-family:var(--ft);color:var(--accent);background:var(--accent-a8);border:1px solid var(--accent-a25);padding:1px 5px;border-radius:2px;white-space:nowrap;}
.gen-granted-tag-view{font-size:9px;font-family:var(--fl);font-weight:600;text-transform:uppercase;color:var(--accent);background:var(--accent-a8);border:1px solid var(--accent-a40);padding:1px 5px;border-radius:3px;white-space:nowrap;margin-left:auto;}
.merit-prereq-fail{opacity:.5;text-decoration:line-through;}
.merit-prereq-fail-tag{font-size:9px;font-family:var(--ft);color:var(--err);background:var(--err-a12);border:1px solid var(--err-a25);padding:1px 5px;border-radius:2px;white-space:nowrap;margin-left:4px;}
.gen-qual-input{width:120px;background:var(--surf2);border:1px solid var(--bdr2);color:var(--txt);font-size:11px;padding:3px 4px;outline:none;}
.gen-qual-input option{background:var(--surf2);color:var(--txt);}
.gen-qual-input:focus{border-color:var(--gold);}

/* ── Standing merit editing ── */
.stand-name-input{flex:1;min-width:0;background:var(--w-a6);border:1px solid var(--w-a12);color:var(--txt1);font-size:12px;padding:3px 6px;}

/* ── Professional Training ── */
.pt-block{background:var(--surf2);border:1px solid var(--bdr);border-radius:6px;padding:8px 10px;margin-bottom:6px;}
.pt-block.mci-inactive{opacity:0.45;}
.pt-header{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;margin-bottom:4px;}
.pt-skills-edit{display:flex;flex-wrap:wrap;gap:4px;padding:4px 0 2px;}
.pt-skill-sel{background:var(--surf2);border:1px solid var(--bdr2);color:var(--txt);font-size:11px;padding:2px 4px;outline:none;}
.pt-skill-sel option{background:var(--surf2);color:var(--txt);}
.pt-skill-sel:focus{border-color:var(--gold);}
.pt-assets{display:flex;flex-wrap:wrap;gap:4px;padding:2px 0 6px;}
.pt-skill-tag{background:var(--w-a8);border:1px solid var(--w-a10);color:var(--txt2);font-size:10px;padding:2px 6px;font-family:var(--ft);}

/* ── Domain merit editing ── */
.dom-edit-block{border-bottom:1px solid var(--w-a6);padding-bottom:4px;margin-bottom:4px;}
.dom-contrib-lbl{font-size:10px;font-family:var(--ft);color:var(--txt3);padding:0 4px;}
.dom-total-lbl{font-size:10px;font-family:var(--ft);color:var(--accent);font-weight:600;padding:0 4px;}
.dom-partners-row{display:flex;flex-wrap:wrap;gap:4px;padding:4px 8px;}
.dom-partner-tag{display:inline-flex;align-items:center;gap:3px;background:var(--w-a7);border:1px solid var(--w-a12);color:var(--txt2);font-size:10px;font-family:var(--ft);padding:2px 6px;border-radius:3px;}
.dom-partner-rm{background:none;border:none;color:var(--txt3);cursor:pointer;padding:0 0 0 2px;font-size:11px;line-height:1;}
.dom-partner-rm:hover{color:var(--crimson);}
.dom-add-partner-row{padding:2px 8px 6px;}
.dom-partner-sel{background:var(--surf2);border:1px solid var(--bdr2);color:var(--txt2);font-size:11px;padding:2px 4px;}
.dom-shared-lbl{}
.dom-total-view{font-family:var(--ft);font-size:13px;color:var(--accent);font-weight:600;}
.dom-own-view{font-family:var(--ft);font-size:9px;color:var(--txt3);}
.dom-qual-row{display:flex;align-items:center;gap:6px;padding:2px 8px 0;}
.dom-qual-lbl{font-size:10px;font-family:var(--ft);color:var(--txt3);white-space:nowrap;}
.dom-qual-input{flex:1;background:var(--surf2);border:1px solid var(--bdr2);color:var(--txt);font-size:11px;padding:3px 5px;outline:none;}
.dom-qual-input:focus{border-color:var(--gold);}
.dom-qual-hint{font-size:9px;color:var(--txt3);font-style:italic;}
.dom-qual-error{font-size:10px;color:var(--err);padding:1px 8px 2px;font-family:var(--ft);}
.dom-attach-row{display:flex;align-items:center;gap:6px;padding:2px 8px 0;}
.dom-attach-lbl{font-size:10px;font-family:var(--ft);color:var(--txt3);white-space:nowrap;}
.dom-attach-sel{flex:1;background:var(--surf2);border:1px solid var(--bdr2);color:var(--txt);font-size:11px;padding:2px 4px;outline:none;}
.dom-attach-sel:focus{border-color:var(--gold);}
.dom-cap-warn{font-size:10px;color:var(--warn-dk);font-family:var(--ft);padding:1px 8px 2px;}
.dom-cap-info{font-size:9px;color:var(--txt3);padding:0 8px 2px;}

/* ── Devotion add/remove ── */
.dev-add-row{display:flex;gap:6px;align-items:center;margin-top:6px;}
.dev-add-sel{flex:1;background:var(--surf2);border:1px solid var(--bdr2);border-radius:4px;color:var(--txt);font-family:var(--ft);font-size:11px;padding:4px 6px;outline:none;}
.dev-add-sel:focus{border-color:var(--gold);}
.dev-add-btn{background:none;border:1px solid var(--bdr2);border-radius:4px;color:var(--label-secondary);font-family:var(--fl);font-size:10px;font-variant:small-caps;font-weight:600;letter-spacing:.06em;padding:4px 10px;cursor:pointer;}
.dev-add-btn:hover{background:var(--surf2);color:var(--txt);}
.dev-rm-btn{background:none;border:none;color:var(--txt3);cursor:pointer;font-size:14px;padding:0 4px;line-height:1;flex-shrink:0;}
.dev-rm-btn:hover{color:var(--err);}
.dev-prereq{font-family:var(--ft);font-size:9px;color:var(--txt3);margin-top:1px;}
.dev-xp-tag{font-family:var(--fl);font-size:11px;font-weight:700;color:var(--txt2);margin-left:6px;}

/* ── Discipline breakdown ── */
.disc-bd-panel{background:var(--surf);border:1px solid var(--bdr);border-top:none;border-radius:0 0 4px 4px;padding:3px 6px;margin-bottom:2px;}
.disc-bd-row{display:flex;gap:5px;align-items:center;font-size:11px;font-family:var(--ft);}
.disc-bd-row .bd-grp{display:flex;flex-direction:column;align-items:stretch;gap:1px;flex:1;min-width:0;}
.disc-bd-row .bd-lbl{color:var(--txt);font-weight:600;font-size:10px;}
.disc-bd-row .bd-eq{display:flex;align-items:center;gap:2px;}
.disc-bd-row .bd-val{color:var(--txt);font-weight:600;}
.disc-tap-row.disc-edit{border-radius:4px 4px 0 0;border-bottom:none;background:var(--surf2);border:1px solid var(--bdr);}
.disc-cp-counter{font-family:var(--fl);font-size:10px;letter-spacing:.04em;color:var(--txt3);margin-bottom:6px;display:flex;gap:12px;}
.disc-cp-counter span{color:var(--txt2);}
.disc-clan-tag{font-family:var(--fl);font-size:9px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--accent);background:var(--accent-a8);border:1px solid var(--accent-a40);padding:1px 5px;border-radius:3px;white-space:nowrap;margin-left:auto;}

/* ══ SHEET VIEW ══ */
#v-sheet.active{display:block;padding:0;overflow-y:auto;}
.sheet-topbar{position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:12px;padding:10px 16px;background:var(--surf);border-bottom:1px solid var(--bdr);}
.sheet-topbar button{background:none;border:none;font-family:var(--fl);font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--txt3);cursor:pointer;padding:6px 10px;border-radius:4px;}
.sheet-topbar button:hover{color:var(--accent);background:var(--accent-a8);}
.sheet-topbar .sheet-edit-btn{margin-left:auto;border:1px solid var(--bdr2);color:var(--accent);}

/* ── Character header ──
   Accessibility minimums (WCAG 2.1 AA):
   - Normal text (<18pt / <14pt bold): contrast ratio ≥ 4.5:1 against background
   - Large text (≥18pt / ≥14pt bold): contrast ratio ≥ 3:1
   - UI components (badges, borders): ≥ 3:1
   Player name and XP badge are interactive-adjacent labels — minimum font-size 11px,
   minimum font-weight 600, minimum colour --label-secondary (not --txt3). */
.sh-char-hdr{background:var(--surf);border-bottom:1px solid var(--bdr2);}
.sh-namerow{padding:14px 14px 10px;border-bottom:1px solid var(--bdr);position:relative;}
.sh-char-name{font-family:var(--fh);font-size:20px;font-weight:600;color:var(--accent);letter-spacing:.02em;line-height:1.2;margin-bottom:4px;}
/* Audit badge — anchored top-right of namerow */
.audit-badge{position:absolute;top:12px;right:14px;display:inline-block;font-size:11px;font-weight:700;padding:2px 8px;border-radius:4px;cursor:default;white-space:pre-line;font-family:var(--fl);letter-spacing:.04em;}
.audit-ok{color:var(--result-succ);font-size:14px;}
.audit-warn{background:var(--warn-dk-bg);color:var(--warn-dk);border:1px solid var(--gold2-a25);}
.audit-err{background:var(--crim-a15);color:var(--crim2);border:1px solid var(--crim-a25);}
.sh-player-row{display:flex;justify-content:space-between;align-items:center;}
/* Player name: min 12px Lato 700, --label-secondary — meets 4.5:1 contrast floor */
.sh-char-player{font-family:var(--fl);font-size:12px;font-weight:700;color:var(--label-secondary);letter-spacing:.03em;}
/* XP badge: min 11px Lato 700. Neutral state --label-secondary; over = err; under = accent */
.sh-xp-badge{font-family:var(--fl);font-size:11px;font-weight:700;color:var(--label-secondary);letter-spacing:.04em;}
.sh-char-body{display:flex;align-items:stretch;}
.sh-char-left{flex:3;min-width:0;padding:10px 12px 12px;border-right:1px solid var(--bdr);}
.sh-concept-row{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px;gap:8px;}
.sh-char-concept{font-family:var(--ft);font-size:12px;font-weight:700;color:var(--txt);}
.sh-char-pronoun{font-family:var(--ft);font-size:12px;font-weight:700;color:var(--txt);text-align:right;flex-shrink:0;}

/* ── Right panel (clan, covenant, status) ── */
.sh-hdr-right{flex:2;flex-shrink:0;display:flex;flex-direction:column;}
.sh-hdr-row{display:flex;align-items:center;gap:12px;padding:10px 12px;}
.sh-icon-slot{width:48px;height:48px;flex-shrink:0;}
.sh-faction-icon{width:48px;height:48px;flex-shrink:0;display:flex;align-items:center;justify-content:center;}
.sh-faction-text{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0;}
.sh-faction-label{font-family:var(--fl);font-size:15px;font-variant:small-caps;font-weight:700;letter-spacing:.04em;color:var(--accent);}
.sh-faction-sub{font-family:var(--fl);font-size:12px;font-variant:small-caps;font-weight:600;letter-spacing:.06em;color:var(--label-secondary);}
.sh-faction-bloodline{font-family:var(--fl);font-size:12px;font-variant:small-caps;font-weight:600;letter-spacing:.06em;color:var(--label-tertiary);}
.sh-stat-pip{display:flex;flex-direction:column;align-items:center;gap:1px;flex-shrink:0;}
.sh-stat-pip-edit{gap:0;}
.sh-status-shape{position:relative;width:52px;height:52px;display:flex;align-items:center;justify-content:center;}
.sh-status-shape svg{position:absolute;inset:0;width:100%;height:100%;color:var(--crim);opacity:.9;}
.sh-status-n{position:relative;z-index:1;font-family:var(--fl);font-size:20px;font-weight:700;color:var(--txt);line-height:1;}
.sh-status-lbl{font-family:var(--fl);font-size:10px;font-weight:700;letter-spacing:.10em;text-transform:uppercase;color:var(--accent);line-height:1;}
.sh-stat-adj{background:none;border:none;color:var(--txt3);cursor:pointer;font-size:8px;padding:1px 4px;line-height:1;}
.sh-stat-adj:hover{color:var(--gold);}
.sh-stat-edit-row{display:flex;align-items:center;gap:2px;}
.sh-stat-editable .sh-stat-edit-row{display:flex;align-items:center;gap:2px;}

/* ── Status track + edit buttons ── */
.sh-status-track{display:flex;gap:3px;justify-content:center;margin-top:3px;}
.sh-status-track-rows{flex-direction:column;gap:2px;}
.sh-track-row{display:flex;gap:3px;justify-content:center;}
.sh-track-dot{font-size:13px;line-height:1;}
.sh-track-base{color:var(--txt);}
.sh-track-empty{color:var(--txt3);opacity:.4;}
.sh-status-btns{display:flex;gap:4px;justify-content:center;margin-top:3px;}
.sh-stat-lr{background:none;border:1px solid var(--surf3);border-radius:3px;color:var(--txt2);cursor:pointer;font-size:11px;padding:2px 7px;line-height:1;}
.sh-stat-lr:hover{border-color:var(--accent);color:var(--accent);}
.cov-strip-cell-edit{flex-direction:column;align-items:center;padding:4px 8px;}

/* ── Status dot track (faction panel: city/cov/clan) ──
   Inherent = full accent, bonus = hollow accent, non-dots not rendered. */
.sh-sdot-track{display:flex;gap:2px;margin-top:3px;}
.sh-sdot-rows{flex-direction:column;gap:2px;}
.sh-sdot-row{display:flex;gap:2px;}
.sh-sdot{font-size:14px;line-height:1;color:var(--accent);}
.sh-sdot-base{/* full ● — colour from .sh-sdot */}
.sh-sdot-bonus{/* hollow ○ — same colour as base */}

/* ── Features ── */
.sh-features-card{background:var(--surf2);border:0.5px solid var(--bdr);border-radius:4px;padding:6px 10px;margin-bottom:3px;display:flex;flex-direction:column;gap:4px;}
.sh-features-top{display:flex;align-items:center;min-height:28px;}
.sh-feat-none{font-family:var(--fl);font-size:12px;font-variant:small-caps;font-weight:600;color:var(--label-secondary);}
.sh-features-card .sh-edit-input{margin:0;font-size:11px;}

/* ── Touchstone edit ── */
.sh-touchstones-edit{padding:0 10px 4px;}
.sh-ts-edit-row{display:flex;gap:4px;align-items:center;margin-bottom:3px;}
.sh-ts-hum{background:var(--surf2);border:1px solid var(--bdr);border-radius:3px;color:var(--txt);font-family:var(--fl);font-size:10px;padding:3px;width:40px;text-align:center;}

/* ── NPCR.4 Touchstone picker (Shape B) ── */
.sh-touchstones-loading{padding:8px 10px;font-family:var(--fl);font-size:11px;color:var(--txt3);}
.sh-touchstones-error{padding:6px 10px;margin-bottom:6px;font-family:var(--fl);font-size:11px;color:var(--err);background:var(--warn-dk-bg);border:1px solid var(--err);border-radius:3px;}
.sh-ts-slot{border:1px solid var(--bdr);border-radius:4px;margin-bottom:6px;background:var(--surf);}
.sh-ts-slot-head{display:flex;align-items:center;gap:6px;padding:5px 8px;border-bottom:1px solid var(--bdr);font-family:var(--fl);font-size:10px;color:var(--txt3);letter-spacing:.06em;text-transform:uppercase;}
.sh-ts-slot-hum{color:var(--accent);font-weight:700;}
.sh-ts-slot-att{font-size:10px;}
.sh-ts-slot-body{padding:6px 8px;}
.sh-ts-slot-add{background:none;border:1px dashed var(--bdr);border-radius:3px;color:var(--txt3);cursor:pointer;font-family:var(--fl);font-size:10px;letter-spacing:.06em;padding:6px 12px;width:100%;text-align:left;}
.sh-ts-slot-add:hover{color:var(--accent);border-color:var(--bdr2);}
.sh-ts-slot-empty-all{padding:8px;font-family:var(--fl);font-size:11px;color:var(--txt3);font-style:italic;}
.sh-ts-slot-filled-list{display:flex;flex-direction:column;gap:4px;}
.sh-ts-slot-filled-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.sh-ts-slot-filled-row.editing{flex-direction:column;align-items:stretch;gap:4px;}
.sh-ts-slot-name{font-family:var(--ft);font-size:12px;color:var(--txt);font-weight:600;}
.sh-ts-slot-state{font-family:var(--ft);font-size:11px;color:var(--txt3);font-style:italic;flex:1;}
.sh-ts-slot-actions{display:flex;gap:4px;margin-left:auto;}
.sh-ts-slot-btn{background:var(--surf2);border:1px solid var(--bdr);border-radius:3px;color:var(--txt3);cursor:pointer;font-family:var(--fl);font-size:10px;letter-spacing:.04em;padding:3px 8px;}
.sh-ts-slot-btn:hover{color:var(--accent);border-color:var(--bdr2);}
.sh-ts-slot-btn.primary{color:var(--accent);border-color:var(--accent);}
.sh-ts-slot-btn.primary:hover{background:var(--gold2-a12);}
.sh-ts-slot-btn.danger:hover{color:var(--err);border-color:var(--err);}
.sh-ts-picker{display:flex;flex-direction:column;gap:6px;padding:4px 0;}
.sh-ts-picker-field{display:flex;flex-direction:column;gap:2px;}
.sh-ts-picker-field>span{font-family:var(--fl);font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--txt3);}
.sh-ts-picker-field .sh-edit-input,.sh-ts-picker-field .sh-edit-select{font-size:11px;padding:4px 6px;}
.sh-ts-picker-textarea{background:var(--surf2);border:1px solid var(--bdr);border-radius:3px;color:var(--txt);font-family:var(--ft);font-size:11px;padding:4px 6px;min-height:50px;resize:vertical;}
.sh-ts-picker-actions{display:flex;gap:6px;flex-wrap:wrap;margin-top:2px;}

/* ── NPCR.6 Player Relationships tab ── */
.rel-tab{padding:14px 16px 40px;max-width:860px;margin:0 auto;}
.rel-tab-head{border-bottom:1px solid var(--bdr);padding-bottom:10px;margin-bottom:12px;}
.rel-tab-head-row{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap;}
.rel-tab-title{font-family:var(--fh);font-size:22px;font-weight:700;color:var(--accent);letter-spacing:.04em;margin:0;}
.rel-tab-sub{font-family:var(--ft);font-size:12px;color:var(--txt3);margin-top:3px;}

/* NPCR.7 Add Relationship picker */
.rel-add-btn{background:none;border:1px solid var(--accent);border-radius:4px;color:var(--accent);cursor:pointer;font-family:var(--fl);font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:6px 12px;align-self:flex-start;}
.rel-add-btn:hover{background:var(--gold2-a12);}
.rel-add-btn.primary{background:var(--accent);color:var(--bg);border-color:var(--accent);}
.rel-add-btn.primary:hover{opacity:.85;background:var(--accent);}
.rel-add-btn.muted{border-color:var(--bdr);color:var(--txt3);}
.rel-add-btn.muted:hover{border-color:var(--bdr2);color:var(--txt);background:var(--surf2);}

.rel-add-form{background:var(--surf);border:1px solid var(--bdr);border-radius:6px;padding:14px 16px;margin-bottom:14px;display:flex;flex-direction:column;gap:10px;}
.rel-add-form-head{font-family:var(--fl);font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);padding-bottom:6px;border-bottom:1px solid var(--bdr);}
.rel-add-field{display:flex;flex-direction:column;gap:4px;}
.rel-add-field-label{font-family:var(--fl);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--txt3);}
.rel-add-input{background:var(--surf2);border:1px solid var(--bdr);border-radius:4px;color:var(--txt);font-family:var(--ft);font-size:13px;padding:6px 10px;outline:none;}
.rel-add-input:focus{border-color:var(--accent);}
.rel-add-textarea{resize:vertical;min-height:60px;font-family:var(--ft);line-height:1.5;}
.rel-add-loading{font-family:var(--fl);font-size:11px;color:var(--txt3);font-style:italic;padding:6px;}
.rel-add-actions{display:flex;gap:8px;margin-top:4px;}

.rel-disp-chips{display:flex;gap:6px;flex-wrap:wrap;}
.rel-disp-chip{background:var(--surf2);border:1px solid var(--bdr);border-radius:12px;color:var(--txt3);cursor:pointer;font-family:var(--fl);font-size:10px;letter-spacing:.06em;text-transform:uppercase;padding:3px 10px;}
.rel-disp-chip:hover{border-color:var(--bdr2);color:var(--txt);}
.rel-disp-chip.positive.on{color:var(--green2, #5a8a5a);border-color:var(--green2, #5a8a5a);background:rgba(140,200,140,.08);}
.rel-disp-chip.neutral.on{color:var(--txt);border-color:var(--bdr2);}
.rel-disp-chip.negative.on{color:var(--err);border-color:var(--err);background:var(--warn-dk-bg);}
.rel-disp-chip.clear.on{color:var(--accent);border-color:var(--accent);}

/* NPCR.8 NPC-source mode toggle */
.rel-add-mode-chips{display:flex;gap:6px;flex-wrap:wrap;padding:4px 0;}
.rel-add-mode-chip{background:var(--surf2);border:1px solid var(--bdr);border-radius:4px;color:var(--txt3);cursor:pointer;font-family:var(--fl);font-size:11px;letter-spacing:.06em;padding:5px 12px;}
.rel-add-mode-chip:hover{border-color:var(--bdr2);color:var(--txt);}
.rel-add-mode-chip.on{background:var(--gold2-a12);color:var(--accent);border-color:var(--accent);}
.rel-add-hint{font-family:var(--ft);font-size:11px;color:var(--txt3);font-style:italic;padding:0 2px;}

/* NPCR.11 Flag-for-review */
.rel-flag-btn{background:none;border:1px solid transparent;border-radius:10px;color:var(--txt3);cursor:pointer;font-family:var(--fl);font-size:12px;padding:1px 7px;line-height:1;}
.rel-flag-btn:hover{color:var(--err);border-color:var(--err);}
.rel-flag-chip{display:inline-flex;align-items:center;gap:4px;font-family:var(--fl);font-size:9px;letter-spacing:.08em;text-transform:uppercase;padding:2px 7px;border-radius:10px;border:1px solid;}
.rel-flag-chip.flagged{color:var(--err);border-color:var(--err);background:var(--warn-dk-bg);}
.rel-flag-chip.resolved{color:var(--accent);border-color:var(--accent);background:var(--gold2-a12);cursor:pointer;text-transform:none;font-size:10px;letter-spacing:.02em;}
.rel-flag-chip.resolved:hover{background:var(--gold2-a25);}

/* NPCR.10 Pending incoming banner */
.rel-pending-banner{display:flex;align-items:center;gap:12px;background:var(--gold2-a12);border:1px solid var(--accent);border-radius:6px;padding:10px 12px;margin-bottom:10px;flex-wrap:wrap;}
.rel-pending-text{flex:1;min-width:220px;font-family:var(--ft);font-size:13px;color:var(--txt);line-height:1.5;}
.rel-pending-text strong{color:var(--accent);font-weight:700;}
.rel-pending-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.rel-pending-state{font-family:var(--ft);font-size:12px;color:var(--txt2);font-style:italic;margin-top:4px;}
.rel-pending-actions{display:flex;gap:6px;flex-wrap:wrap;}

/* NPCR.9 Edit own-edge controls */
.rel-edge-actions{display:flex;gap:6px;justify-content:flex-end;}
.rel-edit-btn{background:none;border:1px solid var(--bdr);border-radius:4px;color:var(--txt3);cursor:pointer;font-family:var(--fl);font-size:10px;letter-spacing:.06em;text-transform:uppercase;padding:3px 10px;}
.rel-edit-btn:hover{border-color:var(--accent);color:var(--accent);}
.rel-edge-card-editing{border-color:var(--accent);}
.rel-edit-counter{font-family:var(--fl);font-size:10px;color:var(--txt3);text-align:right;}
.rel-edit-counter.over-cap,.rel-add-input.over-cap,.rel-add-textarea.over-cap{color:var(--err);border-color:var(--err);}
.rel-loading,.rel-empty,.rel-error{padding:24px;text-align:center;font-family:var(--fl);font-size:13px;color:var(--txt3);}
.rel-error{color:var(--err);background:var(--warn-dk-bg);border:1px solid var(--err);border-radius:4px;}
.rel-empty p{margin:0 0 6px;}
.rel-empty-title{font-family:var(--fh);font-size:15px;font-weight:700;color:var(--accent);margin-bottom:8px !important;}
.rel-empty strong{color:var(--accent);font-weight:700;}
.rel-empty-hint{font-size:11px;color:var(--txt3);font-style:italic;}

.rel-family{border:1px solid var(--bdr);border-radius:6px;margin-bottom:10px;background:var(--surf);overflow:hidden;}
.rel-family-head{display:flex;align-items:center;gap:10px;padding:8px 12px;cursor:pointer;background:var(--surf2);border-bottom:1px solid var(--bdr);user-select:none;}
.rel-family-head:hover{background:var(--surf3);}
.rel-family-name{flex:1;font-family:var(--fl);font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);}
.rel-family-count{font-family:var(--fl);font-size:10px;color:var(--txt3);padding:1px 6px;border:1px solid var(--bdr);border-radius:10px;}
.rel-family-caret{font-size:12px;color:var(--txt3);width:14px;text-align:center;}
.rel-family-body{padding:8px 10px;display:flex;flex-direction:column;gap:6px;}
.rel-family.collapsed .rel-family-body{display:none;}
.rel-family.collapsed .rel-family-head{border-bottom:none;}

.rel-edge-card{background:var(--surf2);border:1px solid var(--bdr);border-radius:5px;padding:8px 10px;display:flex;flex-direction:column;gap:5px;}
.rel-edge-head{display:flex;align-items:flex-start;gap:8px;flex-wrap:wrap;}
.rel-edge-head-main{display:flex;flex-direction:column;gap:2px;flex:1;min-width:180px;}
.rel-edge-name{font-family:var(--fh);font-size:14px;font-weight:700;color:var(--txt);}
.rel-edge-kind{font-family:var(--fl);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--txt3);}
.rel-edge-head-chips{display:flex;flex-wrap:wrap;gap:4px;align-items:center;}

.rel-disp{font-family:var(--fl);font-size:9px;letter-spacing:.08em;text-transform:uppercase;padding:2px 7px;border-radius:10px;border:1px solid;}
.rel-disp.positive{color:var(--green2, #5a8a5a);border-color:var(--green2, #5a8a5a);background:rgba(140,200,140,.08);}
.rel-disp.neutral{color:var(--txt3);border-color:var(--bdr);background:var(--surf);}
.rel-disp.negative{color:var(--err);border-color:var(--err);background:var(--warn-dk-bg);}

.rel-status-chip{font-family:var(--fl);font-size:9px;letter-spacing:.08em;text-transform:uppercase;padding:2px 7px;border-radius:10px;border:1px solid var(--bdr);color:var(--txt3);background:var(--surf);}
.rel-status-chip.pending{color:var(--warn-dk);border-color:var(--warn-dk);background:var(--warn-dk-bg);}
.rel-status-chip.retired{opacity:.6;}
.rel-status-chip.rejected{color:var(--err);border-color:var(--err);}

.rel-new-badge{font-family:var(--fl);font-size:9px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:2px 7px;border-radius:10px;background:var(--accent);color:var(--bg);}
.rel-updated-chip{font-family:var(--fl);font-size:9px;letter-spacing:.08em;text-transform:uppercase;padding:2px 7px;border-radius:10px;background:var(--gold2-a12);color:var(--accent);border:1px solid var(--accent);cursor:pointer;}
.rel-updated-chip:hover{background:var(--gold2-a25);}

.rel-edge-state{font-family:var(--ft);font-size:12px;color:var(--txt2);line-height:1.5;position:relative;}
.rel-edge-state-more{background:none;border:none;color:var(--accent);cursor:pointer;font-family:var(--fl);font-size:10px;padding:0 0 0 4px;text-decoration:underline;}
.rel-edge-state-full{display:none;}

/* Picker extras (NPCR.4) */
.sh-ts-picker-head{font-family:var(--fl);font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);padding-bottom:4px;border-bottom:1px solid var(--bdr);margin-bottom:4px;}
.sh-ts-picker-check{display:flex;align-items:center;gap:6px;cursor:pointer;}
.sh-ts-picker-mode-chips{display:flex;gap:6px;margin-bottom:4px;}
.sh-ts-picker-loading{font-family:var(--fl);font-size:10px;color:var(--txt3);font-style:italic;padding:4px;}
.sh-ts-slot-kind{font-family:var(--fl);font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin-left:4px;}
.sh-ts-slot-kind.dim{color:var(--txt3);}

/* ── Covenant strip ── */
.cov-strip{display:flex;background:var(--surf);border-bottom:1px solid var(--bdr2);}
.cov-strip-cell{flex:1;display:flex;align-items:center;gap:6px;padding:5px 10px;}
.cov-strip-name{font-family:var(--fl);font-size:11px;font-weight:700;font-variant:small-caps;letter-spacing:.04em;color:var(--label-secondary);}
.cov-strip-name.active{color:var(--accent);}
.cov-strip-dot{font-family:var(--fl);font-size:13px;color:var(--label-secondary);}
.cov-strip-dot.active{color:var(--accent);}

/* ── Stats strip ── */
.sh-stats-strip{display:flex;background:var(--surf2);border-top:1px solid var(--bdr2);border-bottom:1px solid var(--bdr2);}
.sh-stat-cell{flex:1;text-align:center;padding:8px 4px;display:flex;flex-direction:column;align-items:center;gap:0;}
.sh-stat-icon{position:relative;width:44px;height:44px;display:flex;align-items:center;justify-content:center;}
.sh-stat-icon svg{position:absolute;inset:0;width:100%;height:100%;color:var(--crim);opacity:.9;}
.sh-stat-n{position:relative;z-index:1;font-family:var(--fl);font-size:17px;font-weight:700;color:var(--txt);line-height:1;}
.sh-stat-lbl{font-size:8px;font-family:var(--fl);font-weight:700;text-transform:uppercase;letter-spacing:.10em;color:var(--accent);margin-top:2px;}

/* ── Sheet sections ── */
.sh-body{padding:0 14px 24px;}
.sh-sec{margin-top:16px;}
.sh-sec-title{font-family:var(--fl);font-size:11px;font-weight:900;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);padding-bottom:5px;border-bottom:1px solid var(--bdr2);margin-bottom:8px;display:flex;align-items:center;gap:6px;}
.sh-sub-title{font-family:var(--fl);font-size:9px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;color:var(--label-secondary);margin:6px 0 3px;}
.sh-sec-subtitle{font-family:var(--fl);font-size:10px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--accent);padding-bottom:4px;border-bottom:1px solid var(--bdr);margin-bottom:6px;margin-top:4px;display:flex;align-items:center;gap:5px;}
.sh-sec-alert{display:inline-flex;align-items:center;justify-content:center;width:15px;height:15px;border-radius:50%;font-size:9px;font-weight:700;font-family:var(--ft);line-height:1;flex-shrink:0;text-transform:none;letter-spacing:0;}
.sh-sec-alert.red{background:rgba(180,30,30,.9);color:var(--txt-on-dark);border:1px solid rgba(255,80,80,.4);}
.sh-sec-alert.yellow{background:rgba(160,120,10,.85);color:var(--txt-on-dark);border:1px solid rgba(220,180,50,.4);font-size:7px;}
.sh-xp-badge.xp-over{color:var(--err)!important;}
.sh-xp-badge.xp-under{color:var(--accent)!important;}

/* ── Sheet attribute grid ── */
.sh-attr-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;overflow:hidden;min-width:0;}
.attr-cell{display:flex;align-items:center;justify-content:space-between;background:var(--surf2);border:1px solid var(--bdr);border-radius:5px;padding:7px 8px;}
.attr-cell-edit{border-radius:5px 5px 0 0;border-bottom:none;}
.attr-name-sh{font-family:var(--fl);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--label-secondary);}
.attr-dots-sh{font-size:15px;letter-spacing:2.5px;color:var(--accent);line-height:1;flex-shrink:0;}

/* ── Sheet skills ── */
.skills-3col{display:grid;grid-template-columns:repeat(3,1fr);gap:3px;align-items:start;}
.sh-skill-row{display:flex;justify-content:space-between;align-items:flex-start;padding:4px 6px;border-radius:4px;border:0.5px solid transparent;}
.sh-skill-row.has-dots{background:var(--surf2);border-color:var(--bdr);}
.skill-name-wrap{display:flex;flex-direction:column;gap:2px;min-width:0;}
.sh-skill-name{font-family:var(--fl);font-size:10px;font-weight:700;color:var(--label-secondary);letter-spacing:.08em;text-transform:uppercase;}
.sh-skill-row.has-dots .sh-skill-name{color:var(--txt);}
.sh-skill-spec{font-family:var(--fl);font-size:11px;letter-spacing:.06em;color:var(--txt2);line-height:1.3;}
.skill-dots-wrap{display:flex;flex-direction:column;align-items:flex-end;flex-shrink:0;gap:2px;margin-top:1px;}
.sh-skill-na{font-family:var(--fl);font-size:9px;font-weight:600;text-transform:uppercase;color:var(--accent);background:var(--accent-a8);border:1px solid var(--accent-a40);border-radius:3px;padding:1px 5px;margin-left:auto;}
.sh-skill-dots{font-size:15px;color:var(--accent);letter-spacing:2.5px;line-height:1;flex-shrink:0;}
.sh-skill-zero{font-size:11px;color:var(--txt3);opacity:.55;}

/* ── Disciplines ── */
.disc-list{display:flex;flex-direction:column;gap:3px;}
.disc-tap-row{display:flex;align-items:center;justify-content:space-between;padding:11px 12px;min-height:48px;background:var(--surf2);border:1px solid var(--bdr);border-radius:6px;cursor:pointer;user-select:none;}
.disc-tap-row.open{border-bottom-left-radius:0;border-bottom-right-radius:0;border-bottom-color:transparent;margin-bottom:0;}
.disc-tap-left{display:flex;align-items:center;gap:8px;}
.disc-tap-name{font-family:var(--fl);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--label-secondary);}
.trait-name.secondary{color:var(--txt2);}
.trait-qual.dim{color:var(--txt3);}
.disc-tap-dots{font-size:14px;color:var(--accent);letter-spacing:2px;}
.disc-tap-arr{font-size:11px;color:var(--txt3);transition:transform .15s;}
.disc-tap-row.open .disc-tap-arr{transform:rotate(90deg);}
.disc-drawer{display:none;background:var(--surf3);border:1px solid var(--bdr);border-top:none;border-radius:0 0 6px 6px;margin-bottom:3px;overflow:hidden;}
.disc-drawer.visible{display:block;}
.disc-power{padding:9px 12px;border-bottom:0.5px solid var(--bdr);}
.disc-power:last-child{border-bottom:none;}
.disc-power-name{font-family:var(--fl);font-size:11px;font-weight:700;font-variant:small-caps;color:var(--accent);letter-spacing:.03em;margin-bottom:3px;}
.disc-power-stats{font-family:var(--fl);font-size:10px;font-weight:700;color:var(--label-secondary);margin-bottom:5px;line-height:1.5;}
.disc-power-effect{font-family:var(--ft);font-size:11px;color:var(--label-secondary);line-height:1.55;}
.disc-sub-head{font-family:var(--fl);font-size:9px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;color:var(--label-tertiary);padding:7px 12px 3px;}

/* ── Rite badges ── */
.rite-free-badge,.rite-xp-badge{font-family:var(--fl);font-size:9px;letter-spacing:.1em;text-transform:uppercase;border:1px solid;border-radius:3px;padding:1px 5px;cursor:pointer;transition:background .15s,color .15s;}
.rite-free-badge{background:var(--accent-a8);color:var(--accent);border-color:var(--accent);}
.rite-free-badge:hover{background:var(--accent-a25);}
.rite-xp-badge{background:rgba(139,0,0,.15);color:var(--crim);border-color:var(--crim);}
.rite-xp-badge:hover{background:rgba(139,0,0,.3);}

/* ── Pact oaths ── */
.pact-edit-block{background:var(--surf2);border:1px solid var(--bdr);border-radius:6px;padding:8px 10px;display:flex;flex-direction:column;gap:6px;}
.pact-edit-hdr{display:flex;align-items:center;gap:6px;}
.pact-edit-hdr .trait-name{flex:1;}
.pact-cp-xp{display:flex;align-items:center;gap:6px;font-size:11px;}
.pact-total{font-size:11px;color:var(--txt3);}
.pact-total.met{color:var(--accent);}
.pact-total.over{color:var(--err);}
.pact-controls{display:flex;flex-direction:column;gap:4px;padding-top:4px;border-top:0.5px solid var(--bdr);}
.pact-ctrl-row{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--txt2);font-family:var(--fl);}
.pact-ctrl-lbl{font-size:10px;color:var(--label-secondary);white-space:nowrap;font-family:var(--fl);}
.pact-ctrl-row label{font-size:10px;color:var(--txt3);white-space:nowrap;}
.pact-hint{font-size:10px;color:var(--txt3);font-style:italic;}
.pact-linked{font-size:10px;color:var(--accent);}

/* ── Merits ── */
.merit-list{display:flex;flex-direction:column;gap:3px;}
.merit-name-sh{font-family:var(--fl);font-size:11px;font-weight:700;text-transform:uppercase;color:var(--label-secondary);letter-spacing:.06em;}
.merit-sub-sh{font-family:var(--fl);font-size:10px;letter-spacing:.06em;color:var(--txt2);margin-top:2px;}
.merit-dots-sh{font-size:12px;color:var(--accent);letter-spacing:1.5px;flex-shrink:0;margin-right:6px;}
.merit-plain{display:flex;justify-content:space-between;align-items:center;padding:5px 8px;background:var(--surf2);border:0.5px solid var(--bdr);border-radius:4px;font-family:var(--fl);font-size:11px;color:var(--txt2);letter-spacing:.02em;}

/* ── Unified trait card ── */
.trait-row{display:flex;flex-direction:column;gap:3px;flex:1;min-width:0;}
.trait-main{display:flex;align-items:center;justify-content:space-between;gap:6px;}
.trait-name{font-family:var(--fl);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--label-secondary);}
.trait-dots{font-size:15px;color:var(--accent);letter-spacing:2.5px;line-height:1;flex-shrink:0;}
.trait-sub{display:flex;align-items:center;gap:4px;}
.trait-qual{font-family:var(--fl);font-size:11px;letter-spacing:.04em;color:var(--txt2);flex:1;}
.trait-right{display:flex;align-items:center;gap:6px;flex-shrink:0;}

/* ── Manoeuvres ── */
.man-list{display:flex;flex-direction:column;gap:3px;}
.man-exp-body .man-style{font-family:var(--fl);font-size:10px;letter-spacing:.06em;color:var(--txt2);margin-bottom:4px;}
.man-exp-body .man-prereq{font-family:var(--ft);font-size:10px;color:var(--txt3);font-style:italic;margin-top:5px;line-height:1.4;}

/* ── Sheet max width (overridden in desktop mode) ── */
#sh-content{max-width:640px;margin:0 auto;}
.cd-sheet #sh-content,
#sh-content.cd-sheet,
.char-detail #sh-content{max-width:none !important;}

/* ── Desktop character sheet: 2-column layout ── */
.sh-desktop{display:grid;grid-template-columns:1fr 1fr;gap:0 24px;align-items:start;}
.sh-dcol{min-width:0;overflow:visible;}

/* Narrow viewports: collapse the 3-col sheet into a single column.
   We do not touch sheet.js — this is a pure CSS override of the outer
   grid plus the two most likely inner grids that would otherwise still
   force a 3-wide layout inside the now-stacked column. */
@media (max-width: 900px) {
  .sh-desktop { grid-template-columns: 1fr; gap: 16px; }
  .sh-desktop .attr-grid,
  .sh-desktop .sh-sec .attr-grid { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
  .sh-desktop .skills-3col { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
}

/* Hide name row in view mode only when inside admin panel (header already shows it).
   Player portal has no panel header, so name row stays visible there. */
.char-detail .sh-desktop .sh-namerow{display:none;}
.char-detail .sh-desktop.sh-editing .sh-namerow{display:block;}

/* Stats strip wraps within column */
.sh-desktop .sh-stats-strip{flex-wrap:wrap;}

/* Breakdown inputs — larger on desktop */
.sh-desktop .attr-bd-input,
.sh-desktop .attr-bd-ro,
.sh-desktop .merit-bd-input,
.sh-desktop .sk-bd-row .attr-bd-input,
.sh-desktop .disc-bd-row .attr-bd-input{width:44px;font-size:13px;padding:3px 4px;}
.sh-desktop .bd-lbl{font-size:12px;}
.sh-desktop .bd-val{font-size:13px;}

/* Attribute grid */
.sh-desktop .attr-grid,
.sh-desktop .sh-sec .attr-grid{grid-template-columns:repeat(3,minmax(140px,1fr));gap:10px;}

/* Skill grid */
.sh-desktop .skills-3col{grid-template-columns:repeat(3,minmax(160px,1fr));gap:12px;}

/* Edit controls */
.sh-desktop .sh-edit-select{font-size:13px;padding:5px 8px;}
.sh-desktop .sh-edit-input{font-size:13px;padding:5px 8px;}
.sh-desktop .sh-ts-edit-row input{font-size:12px;padding:4px 8px;}
.sh-desktop .sh-ts-hum{font-size:12px;padding:4px 6px;}
.sh-desktop .infl-edit-row{padding:6px 10px;gap:8px;}
.sh-desktop .infl-edit-row select,
.sh-desktop .infl-edit-row input[type=text]{font-size:12px;padding:4px 8px;}
.sh-desktop .gen-edit-row{padding:6px 10px;gap:8px;}
.sh-desktop .gen-name-select,
.sh-desktop .gen-qual-input{font-size:12px;padding:4px 8px;}
.sh-desktop .sk-spec-input{font-size:13px;padding:3px 6px;}
.sh-desktop .disc-bd-panel{padding:4px 8px;}
.sh-desktop .dev-add-btn,
.sh-desktop .sh-bane-add,
.sh-desktop .sk-spec-add{font-size:13px;padding:6px 14px;}

/* ── Dev-mode redacted inputs ──
   Disabled inputs in dev mode display block-character placeholders.
   Style them to look deliberate (black background, gold text) rather
   than like broken greyed-out controls. */
input.form-input:disabled,
input.sh-edit-input:disabled {
  background: var(--surf-ink);
  color: var(--gold2);
  opacity: 1;
  cursor: not-allowed;
  -webkit-text-fill-color: var(--gold2);
}

/* ── Free-dot highlighter ──
   Marks any item (attribute, skill, discipline, merit, fighting style)
   that was purchased using the unsourced `free` bucket. These dots bypass
   the normal CP/XP economy and usually come from legacy imports or manual
   ST grants that weren't properly tracked. Not necessarily wrong, but
   worth review. */
.has-free-dots {
  box-shadow: inset 0 0 0 2px rgba(180, 40, 40, 0.55);
  border-radius: 4px;
  position: relative;
}
.has-free-dots::before {
  content: 'FREE';
  position: absolute;
  top: -6px;
  right: 6px;
  font-family: var(--fl);
  font-size: 9px;
  letter-spacing: 0.08em;
  color: var(--txt-on-dark);
  background: rgba(180, 40, 40, 0.85);
  padding: 1px 5px;
  border-radius: 2px;
  pointer-events: none;
  z-index: 2;
}

/* Wrappers for the MCI dot-1/3/5 alternate-choice picker controls so they
   sit on a single inline-flex line and accept the inset .has-unfilled box. */
.mci-spec-pick {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  vertical-align: middle;
}

/* Unfilled-input highlighter — same red box, "EMPTY" tag.
   Used for MCI tier merit pickers and PT asset-skill selectors when the
   ST hasn't yet allocated all required slots. */
.has-unfilled {
  box-shadow: inset 0 0 0 2px rgba(180, 40, 40, 0.55);
  border-radius: 4px;
  position: relative;
}
.has-unfilled::before {
  content: 'EMPTY';
  position: absolute;
  top: -6px;
  right: 6px;
  font-family: var(--fl);
  font-size: 9px;
  letter-spacing: 0.08em;
  color: var(--txt-on-dark);
  background: rgba(180, 40, 40, 0.85);
  padding: 1px 5px;
  border-radius: 2px;
  pointer-events: none;
  z-index: 2;
}

/* ══════════════════════════════════════════
   PARCHMENT THEME OVERRIDES
   Applied to admin.html + player.html (light default).
   index.html is always dark — these rules never fire there.
   ══════════════════════════════════════════ */


/* Stat/status diamond and pip numbers — light text on dark SVG shape background */
html:not([data-theme="dark"]) .sh-stat-n,
html:not([data-theme="dark"]) .sh-status-n { color: var(--bg); }

/* Stat/status gem SVGs — dark mode: soft gold; parchment: crimson at reduced opacity */
[data-theme="dark"] .sh-stat-icon svg,
[data-theme="dark"] .sh-status-shape svg { color: var(--gdim); opacity: 0.75; }
html:not([data-theme="dark"]) .sh-stat-icon svg,
html:not([data-theme="dark"]) .sh-status-shape svg { opacity: 0.55; }

/* Attribute priority selects — form controls should be dark text, not accent */
html:not([data-theme="dark"]) .sh-attr-pri select { color: var(--txt); }

/* CP remaining: "full" state uses green — replace with neutral on parchment */
html:not([data-theme="dark"]) .sh-cp-remaining.full { color: var(--txt3); }


/* Audit warning badge — amber → crimson on parchment */
html:not([data-theme="dark"]) .audit-warn { color: var(--crim); }

/* AoE spec — highlight AoE bonus in skill specs */
html:not([data-theme="dark"]) .sh-skill-spec span { color: var(--crim) !important; }
html:not([data-theme="dark"]) .sk-spec-row  span { color: var(--crim) !important; }


/* Reading pane — warm parchment surface for document-heavy content.
 * Use on questionnaires, downtimes, dossiers, and any long-form text.
 * Wrap content in <div class="reading-pane"> to activate. */

.reading-pane {
  background: var(--rp-bg);
  color: var(--rp-txt);
  border: 1px solid rgba(139,0,0,.18);
  border-radius: 8px;
  padding: 24px 20px;
}

@media (min-width: 600px) {
  .reading-pane { padding: 32px 28px; }
}

/* ── Headings ── */

.reading-pane h3,
.reading-pane .qf-title {
  color: var(--rp-head);
  font-weight: 700;
}

.reading-pane h4,
.reading-pane .qf-section-title {
  color: var(--rp-head);
  font-weight: 700;
}

.reading-pane .qf-label {
  font-weight: 700;
}

/* ── Body text ── */

.reading-pane p,
.reading-pane .qf-intro,
.reading-pane .qf-section-intro,
.reading-pane .qf-desc {
  color: var(--rp-txt2);
}

.reading-pane .qf-label {
  color: var(--rp-txt);
}

.reading-pane .qf-readonly-value {
  color: var(--rp-txt);
}

/* ── Form inputs (editing mode) ── */

.reading-pane .qf-input,
.reading-pane .qf-textarea,
.reading-pane .qf-select {
  background: var(--rp-surf);
  color: var(--rp-txt);
  border-color: rgba(139,0,0,.2);
}

.reading-pane .qf-input:focus,
.reading-pane .qf-textarea:focus,
.reading-pane .qf-select:focus {
  border-color: var(--rp-accent);
}

.reading-pane .qf-input::placeholder,
.reading-pane .qf-textarea::placeholder {
  color: var(--rp-placeholder);
}

/* ── Locked fields (from character sheet) ── */

.reading-pane .qf-locked-value {
  background: var(--rp-surf2);
  color: var(--rp-txt);
  border-color: rgba(139,0,0,.15);
}

.reading-pane .qf-locked-note {
  color: var(--rp-txt3);
}

/* ── Radio and select ── */

.reading-pane .qf-radio-label {
  color: var(--rp-txt);
}

.reading-pane .qf-radio-label:hover {
  background: rgba(139,0,0,.06);
}

.reading-pane .qf-radio-label input[type="radio"] {
  accent-color: var(--rp-accent);
}

/* ── Badges ── */

.reading-pane .qf-badge-draft {
  background: rgba(139,0,0,.1);
  color: var(--rp-accent);
  border-color: rgba(139,0,0,.3);
}

.reading-pane .qf-badge-submitted {
  background: rgba(139,0,0,.1);
  color: var(--rp-accent);
  border-color: rgba(139,0,0,.3);
}

.reading-pane .qf-badge-approved {
  background: rgba(60,100,60,.12);
  color: var(--rp-badge-approved);
  border-color: rgba(60,100,60,.3);
}

.reading-pane .qf-save-status {
  color: var(--rp-txt3);
}

.reading-pane .qf-deadline {
  font-size: 13px;
  color: var(--txt-dim);
  margin: 0 0 4px;
}
.reading-pane .qf-deadline-closed {
  color: var(--crim);
  font-weight: 600;
}

/* ── Prior cycle results banner ── */
.reading-pane .qf-results-banner {
  margin-bottom: 16px;
  padding: 10px 14px;
  background: var(--accent-a8);
  border: 1px solid var(--accent-a25);
  border-radius: 6px;
  font-size: 13px;
  color: var(--accent);
}

/* ── Story 1.10: Player results view ── */
.reading-pane .qf-results {
  margin-bottom: 24px;
  padding: 16px;
  background: var(--surf2);
  border: 1px solid var(--bdr);
  border-radius: 8px;
  border-left: 3px solid var(--accent);
}
.reading-pane .qf-results-title {
  font-family: var(--fl);
  font-size: 16px;
  color: var(--accent);
  margin: 0 0 14px;
}
.reading-pane .qf-results-section {
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--bdr);
}
.reading-pane .qf-results-section:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.reading-pane .qf-results-section-head {
  font-family: var(--fl);
  font-size: 13px;
  color: var(--accent);
  margin: 0 0 8px;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.reading-pane .qf-results-section p { margin: 0 0 8px; font-size: 14px; line-height: 1.6; }
.reading-pane .qf-results-mech { background: var(--surf); padding: 10px; border-radius: 6px; }
.reading-pane .qf-results-pre { font-family: monospace; font-size: 12px; white-space: pre-wrap; margin: 0; color: var(--txt-dim); }
.reading-pane .qf-results-body { font-size: 14px; line-height: 1.6; }
.reading-pane .qf-results-pending {
  margin-bottom: 20px;
  padding: 14px 18px;
  background: rgba(139,0,0,.06);
  border: 1px solid rgba(139,0,0,.15);
  border-left: 3px solid var(--rp-accent);
  border-radius: 6px;
}
.reading-pane .qf-results-pending-msg {
  margin: 0;
  font-size: 14px;
  color: var(--rp-txt2);
  font-weight: 500;
  line-height: 1.5;
}

/* ── Cycle gate page ── */
.qf-gate-page { padding: 32px 24px; }
.qf-gate-msg { font-size: 15px; color: var(--txt2, #C4A47A); line-height: 1.6; margin: 0 0 16px; }
.qf-gate-sub-status { display: flex; align-items: center; gap: 10px; margin-top: 8px; font-size: 13px; color: var(--txt3, #8A7E6E); }

/* ── Required marker ── */

.reading-pane .qf-req {
  color: var(--rp-accent);
}

/* ── Section dividers ── */

.reading-pane .qf-section {
  border-bottom-color: rgba(139,0,0,.12);
}

/* ── Buttons ── */

.reading-pane .qf-btn-save {
  background: var(--rp-surf2);
  color: var(--rp-txt2);
  border-color: rgba(139,0,0,.2);
}

.reading-pane .qf-btn-save:hover {
  border-color: var(--rp-accent);
}

.reading-pane .qf-btn-submit {
  background: var(--rp-accent);
  color: var(--rp-bg);
}

.reading-pane .qf-btn-edit {
  background: var(--rp-surf2);
  color: var(--rp-head);
  border-color: rgba(139,0,0,.3);
}

.reading-pane .qf-btn-edit:hover {
  background: rgba(139,0,0,.1);
}

.reading-pane .qf-btn-approve {
  background: var(--success-exceptional);
  color: var(--txt-on-dark);
}

/* ── Icon filter override (dark bg icons need to be dark on light bg) ── */

.reading-pane .qf-radio-icon img,
.reading-pane .qf-locked-value img {
  filter: sepia(1) brightness(.3) saturate(2) !important;
  opacity: .8 !important;
}

/* ══════════════════════════════════════════
   Long-form markdown rendering (the primer)
   Styles the full set of elements produced by marked: h1–h6, p, strong,
   em, a, ul, ol, li, blockquote, hr, img, table. Scoped to .reading-pane
   so questionnaires and downtimes keep their more restrained styling.
   ══════════════════════════════════════════ */

.reading-pane h1,
.reading-pane h2,
.reading-pane h3,
.reading-pane h4,
.reading-pane h5,
.reading-pane h6 {
  /* Gutter above headings when anchor-scrolled to via scrollIntoView */
  scroll-margin-top: 20px;
}

.reading-pane h1,
.reading-pane h2 {
  font-family: var(--fh-decorative);
  color: var(--rp-head);
  font-weight: 700;
  line-height: 1.2;
  margin: 1.4em 0 0.5em;
  letter-spacing: 0.01em;
}
.reading-pane h1 {
  font-size: 1.9rem;
  padding-bottom: 0.3em;
  border-bottom: 2px solid rgba(139, 0, 0, 0.2);
}
.reading-pane h1:first-child { margin-top: 0; }
.reading-pane h2 {
  font-size: 1.45rem;
  padding-bottom: 0.2em;
  border-bottom: 1px solid rgba(139, 0, 0, 0.15);
}

/* h3/h4 already coloured above — tighten typography + scale */
.reading-pane h3 {
  font-family: var(--fh);
  font-size: 1.15rem;
  margin: 1.3em 0 0.4em;
  letter-spacing: 0.02em;
}
.reading-pane h4 {
  font-family: var(--fh);
  font-size: 1rem;
  margin: 1.1em 0 0.35em;
  letter-spacing: 0.02em;
}
.reading-pane h5,
.reading-pane h6 {
  font-family: var(--fh);
  color: var(--rp-head);
  font-weight: 700;
  font-size: 0.95rem;
  margin: 0.9em 0 0.3em;
}

.reading-pane p {
  font-family: var(--ft);
  font-size: var(--reading-font-size, 15px);
  line-height: 1.75;
  margin: 0 0 0.9em;
}
.reading-pane strong {
  color: var(--rp-strong);
  font-weight: 700;
}
.reading-pane em { font-style: italic; color: var(--rp-txt2); }

.reading-pane a {
  color: var(--rp-accent);
  text-decoration: underline;
  text-decoration-color: rgba(139, 0, 0, 0.35);
  text-underline-offset: 2px;
  transition: color 0.15s, text-decoration-color 0.15s;
}
.reading-pane a:hover {
  color: var(--rp-accent);
  text-decoration-color: var(--rp-accent);
}

.reading-pane ul,
.reading-pane ol {
  margin: 0 0 1em;
  padding-left: 1.6em;
  font-family: var(--ft);
  font-size: var(--reading-font-size, 15px);
  line-height: 1.7;
  color: var(--rp-txt2);
}
.reading-pane li { margin: 0.25em 0; }
.reading-pane li > ul,
.reading-pane li > ol { margin: 0.3em 0 0.3em; }
.reading-pane ul li::marker { color: rgba(139, 0, 0, 0.55); }
.reading-pane ol li::marker { color: rgba(139, 0, 0, 0.6); font-weight: 600; }

.reading-pane blockquote {
  margin: 1em 0;
  padding: 0.6em 1.1em;
  background: rgba(139, 0, 0, 0.04);
  border-left: 3px solid rgba(139, 0, 0, 0.4);
  color: var(--rp-txt2);
  font-style: italic;
}
.reading-pane blockquote p:last-child { margin-bottom: 0; }

.reading-pane hr {
  border: none;
  border-top: 1px solid rgba(139, 0, 0, 0.25);
  margin: 1.8em auto;
  width: 60%;
}

.reading-pane img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 1.5em auto;
  border: 1px solid rgba(139, 0, 0, 0.2);
  border-radius: 4px;
  box-shadow: 0 2px 10px rgba(60, 30, 10, 0.15);
}

.reading-pane table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.2em 0;
  font-family: var(--ft);
  font-size: var(--reading-font-size, 15px);
  background: rgba(255, 248, 238, 0.5);
  border: 1px solid rgba(139, 0, 0, 0.25);
  border-radius: 4px;
  overflow: hidden;
}
.reading-pane table th {
  background: rgba(139, 0, 0, 0.1);
  color: var(--rp-head);
  font-family: var(--fh);
  font-weight: 700;
  text-align: left;
  padding: 10px 12px;
  border-bottom: 2px solid rgba(139, 0, 0, 0.3);
  font-size: 13px;
  letter-spacing: 0.03em;
}
.reading-pane table td {
  padding: 10px 12px;
  border-bottom: 1px solid rgba(139, 0, 0, 0.1);
  color: var(--rp-txt);
  vertical-align: top;
  line-height: 1.55;
}
.reading-pane table tr:last-child td { border-bottom: none; }
.reading-pane table tr:nth-child(even) td { background: rgba(139, 0, 0, 0.03); }




/* ══════════════════════════════════════════
   DOWNTIME FORM — Questionnaire form through Regency tab
   Moved from player-layout.css — shared between player.html and index.html
   ══════════════════════════════════════════ */

/* ── Questionnaire form ── */

.qf-header { margin-bottom: 16px; }

/* Opener: player identity block */
.qf-opener {
  background: var(--gold-a6);
  border: 1px solid var(--bdr);
  border-radius: 6px;
  padding: 12px 16px;
  margin-bottom: 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.qf-opener-row {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
}

.qf-opener-label {
  font-family: var(--fl);
  font-size: 12px;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: .04em;
  min-width: 72px;
  flex-shrink: 0;
}

.qf-opener-value { color: var(--txt); }
.qf-opener-empty { color: var(--txt3); font-style: italic; }

/* Reading-pane colour overrides for opener */
.reading-pane .qf-opener {
  background: rgba(139,0,0,.03);
  border-color: rgba(139,0,0,.12);
}
.reading-pane .qf-opener-label { color: var(--rp-head); }
.reading-pane .qf-opener-value { color: var(--rp-txt); }
.reading-pane .qf-opener-empty { color: var(--rp-txt3); }

.qf-opener-input {
  flex: 1;
  background: var(--surf2);
  border: 1px solid var(--bdr2);
  border-radius: 4px;
  padding: 4px 8px;
  color: var(--txt);
  font-size: 14px;
}

/* Character identity header */
.qf-char-header {
  background: var(--surf2);
  border: 1px solid var(--gold-a12);
  border-radius: 6px;
  padding: 14px 16px;
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.qf-char-identity {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
}

.qf-char-clan,
.qf-char-cov {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 15px;
  font-family: var(--fl);
  color: var(--txt);
}

.qf-char-bloodline {
  font-size: 13px;
  color: var(--txt2);
  font-family: var(--ft);
}

.qf-char-archetypes {
  display: flex;
  gap: 20px;
  font-size: 14px;
}

.qf-char-arch {
  display: flex;
  gap: 6px;
  align-items: baseline;
}

.qf-arch-label {
  font-family: var(--fl);
  font-size: 11px;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: .04em;
}

.qf-char-concept {
  font-size: 14px;
  color: var(--txt2);
  font-style: italic;
}

.qf-char-stats { font-size: 13px; color: var(--txt3); }

/* Reading-pane overrides for character header */
.reading-pane .qf-char-header {
  background: rgba(139,0,0,.03);
  border-color: rgba(139,0,0,.12);
}
.reading-pane .qf-char-clan,
.reading-pane .qf-char-cov { color: var(--rp-txt); }
.reading-pane .qf-char-header img {
  filter: sepia(1) saturate(8) hue-rotate(320deg) brightness(0.65) !important;
}
.reading-pane .qf-char-bloodline { color: var(--rp-txt3); }
.reading-pane .qf-arch-label { color: var(--rp-head); }
.reading-pane .qf-char-concept { color: var(--rp-txt2); }
.reading-pane .qf-char-stats { color: var(--rp-txt3); }

.qf-title {
  font-family: var(--fl);
  font-size: 18px;
  color: var(--accent);
  font-weight: 600;
  margin-bottom: 8px;
}

.qf-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.qf-badge {
  font-family: var(--fl);
  font-size: 11px;
  letter-spacing: 0.5px;
  padding: 3px 10px;
  border-radius: 3px;
}

.qf-badge-draft {
  background: var(--gold-a15);
  color: var(--accent);
  border: 1px solid var(--gold);
}

.qf-badge-submitted {
  background: var(--gold-a15);
  color: var(--accent);
  border: 1px solid var(--gold);
}

.qf-badge-approved {
  background: var(--green-a15);
  color: var(--green2);
  border: 1px solid var(--green);
}

.qf-save-status {
  font-size: 12px;
  color: var(--txt3);
}

.qf-intro {
  font-size: 14px;
  color: var(--rp-neutral-warm);
  line-height: 1.6;
}

.qf-req { color: var(--crim2); font-weight: 700; }

/* ── Status badges ── */
.dt-status-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}
.dt-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .3px;
}
.dt-badge-on {
  background: rgba(76,175,80,.12);
  color: var(--toast-succ-fg);
  border: 1px solid rgba(76,175,80,.25);
}
.dt-badge-off {
  background: rgba(139,0,0,.08);
  color: var(--crim);
  border: 1px solid rgba(139,0,0,.15);
}
.dt-badge-info {
  background: rgba(201,169,98,.1);
  color: var(--accent);
  border: 1px solid rgba(201,169,98,.2);
}

/* Reading pane badge overrides */
.reading-pane .dt-badge-on { background: rgba(76,175,80,.08); color: var(--rp-badge-approved); border-color: rgba(76,175,80,.2); }
.reading-pane .dt-badge-off { background: rgba(139,0,0,.06); color: var(--rp-accent); border-color: rgba(139,0,0,.15); }
.reading-pane .dt-badge-info { background: rgba(139,0,0,.04); color: var(--rp-head); border-color: rgba(139,0,0,.1); }

.qf-section {
  margin-bottom: 28px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(201,169,98,.12);
}

.qf-section:last-of-type { border-bottom: none; }

.qf-section-title {
  font-family: var(--fl);
  font-size: 17px;
  color: var(--accent);
  font-weight: 600;
  margin-bottom: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  user-select: none;
}

.qf-section-title::before {
  content: '▾';
  display: inline-block;
  font-size: 13px;
  transition: transform .2s;
  flex-shrink: 0;
  width: 14px;
  text-align: center;
}

.qf-section.collapsed .qf-section-title::before {
  transform: rotate(-90deg);
}

.qf-section-tick {
  margin-left: auto;
  font-size: 16px;
  color: var(--toast-succ-fg);
  display: none;
}

.qf-section-tick.visible {
  display: inline;
}

.qf-section-body {
  transition: none;
}

.qf-section.collapsed .qf-section-body {
  display: none;
}

.qf-section-intro {
  font-size: 14px;
  color: var(--rp-neutral-warm);
  margin-bottom: 20px;
  line-height: 1.6;
}

/* CHM-3: chapter-finale maintenance reminder shown above Personal Projects */
.dt-maintenance-warning {
  background: var(--warn-dk-bg);
  color: var(--warn-dk);
  border: 1px solid var(--gold2-a25);
  border-radius: 4px;
  padding: 10px 14px;
  margin-bottom: 14px;
  font-size: 13px;
  line-height: 1.5;
}
.dt-maintenance-warning strong { color: var(--gold2); }
.dt-maintenance-warning + .dt-maintenance-warning { margin-top: -4px; }

.qf-field { margin-bottom: 22px; }

.qf-label {
  display: block;
  font-family: var(--fl);
  font-size: 14px;
  color: var(--txt);
  font-weight: 600;
  margin-bottom: 6px;
}

.qf-desc {
  font-size: 13px;
  font-style: italic;
  color: var(--rp-neutral-warm);
  line-height: 1.6;
  margin-bottom: 10px;
  white-space: pre-line;
}

.reading-pane .qf-desc { color: var(--rp-txt3); }
.reading-pane .qf-section-intro { color: var(--rp-txt3); }
.reading-pane .qf-label { color: var(--rp-label); }
.reading-pane .qf-readonly-value { color: var(--rp-txt); }
.reading-pane .qf-section-title { color: var(--rp-accent); }

.qf-input, .qf-textarea, .qf-select {
  width: 100%;
  background: var(--surf2);
  color: var(--txt);
  border: 1px solid var(--bdr);
  border-radius: 4px;
  padding: 10px 12px;
  font-family: var(--ft);
  font-size: 15px;
  transition: border-color .2s;
}

.reading-pane .qf-input,
.reading-pane .qf-textarea,
.reading-pane .qf-select {
  background: rgba(255,255,255,.5);
  color: var(--rp-txt);
  border-color: rgba(139,0,0,.25);
}

.reading-pane .qf-input:focus,
.reading-pane .qf-textarea:focus,
.reading-pane .qf-select:focus {
  border-color: var(--rp-accent);
  background: rgba(255,255,255,.75);
}

.qf-input:focus, .qf-textarea:focus, .qf-select:focus {
  outline: none;
  border-color: var(--gold);
}

.qf-textarea {
  resize: vertical;
  min-height: 100px;
  line-height: 1.6;
}

.qf-select {
  cursor: pointer;
  appearance: auto;
}

.qf-radio-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.qf-radio-label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  color: var(--txt);
  cursor: pointer;
  padding: 8px 10px;
  border-radius: 4px;
  transition: background .15s;
  line-height: 1.4;
}

.qf-radio-label:hover { background: var(--gold-a6); }

.qf-radio-label input[type="radio"] {
  margin-top: 2px;
  accent-color: var(--accent);
}

.qf-radio-icon {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.qf-checkbox-group {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
}

.qf-checkbox-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--txt);
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 4px;
  transition: background .15s;
}

.qf-checkbox-label:hover { background: var(--gold-a6); }

.qf-checkbox-label input[type="checkbox"] {
  accent-color: var(--accent);
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

.reading-pane .qf-checkbox-label { color: var(--rp-txt); }

.qf-tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 2px;
}

.qf-tag {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 13px;
  background: var(--gold-a6);
  color: var(--accent);
  border: 1px solid var(--gold-a20);
}

.reading-pane .qf-tag {
  background: rgba(139,0,0,.07);
  color: var(--rp-head);
  border-color: rgba(139,0,0,.2);
}

.qf-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
  padding: 16px 0;
}

.qf-btn {
  font-family: var(--fl);
  font-size: 13px;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  letter-spacing: 0.5px;
  transition: background .2s, opacity .2s;
}

.qf-btn-save {
  background: var(--surf2);
  color: var(--txt2);
  border: 1px solid var(--bdr);
}

.qf-btn-save:hover { border-color: var(--gold); }

.qf-btn-submit {
  background: var(--gold);
  color: var(--bg);
}

.qf-btn-submit:hover { opacity: .85; }

.qf-btn-edit {
  background: var(--surf2);
  color: var(--accent);
  border: 1px solid var(--gold);
}

.qf-btn-edit:hover { background: var(--gold-a10); }

.qf-btn-approve {
  background: var(--green);
  color: var(--txt-on-dark);
}

.qf-btn-approve:hover { opacity: .85; }

/* Archive dossier three-section layout (ORD-12): core info card +
   questionnaire details + history narrative, all inside one reading-pane. */

.arc-core-card {
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--rp-bdr);
}

.arc-core-name {
  font-family: var(--fh);
  font-size: 22px;
  font-weight: 700;
  color: var(--rp-head);
  margin-bottom: 6px;
}

.arc-core-identity {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 12px;
  font-size: 14px;
  color: var(--rp-txt2);
}

.arc-core-clan,
.arc-core-cov {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.arc-core-bloodline { color: var(--rp-txt3); }

.arc-core-grid {
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: 16px;
  row-gap: 4px;
  margin: 0;
  font-size: 14px;
}

.arc-core-label {
  font-family: var(--fl);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--rp-txt3);
  align-self: center;
}

.arc-core-value {
  margin: 0;
  color: var(--rp-txt);
}

/* Questionnaire details section */
.arc-quest-details {
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--rp-bdr);
}

.arc-quest-section { margin-bottom: 16px; }
.arc-quest-section:last-child { margin-bottom: 0; }

.arc-quest-section-title {
  font-family: var(--fh);
  font-size: 15px;
  font-weight: 700;
  color: var(--rp-head);
  margin: 0 0 8px;
}

/* History narrative section */
.arc-history-heading {
  font-family: var(--fh);
  font-size: 15px;
  font-weight: 700;
  color: var(--rp-head);
  margin: 0 0 8px;
}

/* Archive document Edit button (ST only) — lives in the detail-view header. */
.arc-btn-edit {
  padding: 4px 12px;
  background: none;
  border: 1px solid var(--accent);
  color: var(--accent);
  font-family: var(--fl);
  font-size: 12px;
  cursor: pointer;
  border-radius: 3px;
  transition: background .15s;
}

.arc-btn-edit:hover { background: var(--gold-a10); }

/* Archive inline editor (ORD-3) — ST-only contentEditable pane with toolbar. */
.arc-editor {
  display: flex;
  flex-direction: column;
  margin: 0 16px;
}

.arc-editor-toolbar {
  display: flex;
  gap: 4px;
  align-items: center;
  padding: 8px;
  background: var(--surf);
  border: 1px solid var(--surf2);
  border-bottom: none;
  border-radius: 4px 4px 0 0;
}

.arc-editor-toolbar button {
  padding: 4px 10px;
  background: none;
  border: 1px solid transparent;
  cursor: pointer;
  color: var(--txt);
  font-family: var(--fl);
  font-size: 13px;
  border-radius: 2px;
  min-width: 28px;
}

.arc-editor-toolbar button:hover {
  border-color: var(--gold-a10);
  background: var(--surf2);
}

.arc-toolbar-sep {
  display: inline-block;
  width: 1px;
  height: 20px;
  background: var(--surf2);
  margin: 0 4px;
}

.arc-toolbar-spacer { flex: 1; }

.arc-editor-toolbar .arc-btn-save {
  background: var(--accent);
  color: var(--txt-on-dark);
  border-color: var(--accent);
  padding: 4px 16px;
}

.arc-editor-toolbar .arc-btn-save:hover {
  opacity: .9;
  background: var(--accent);
}

.arc-editor-toolbar .arc-btn-cancel {
  color: var(--txt2);
}

.arc-editor-content[contenteditable="true"] {
  min-height: 400px;
  padding: 16px;
  background: var(--bg);
  border: 1px solid var(--surf2);
  border-radius: 0 0 4px 4px;
  outline: none;
}

.arc-editor-content[contenteditable="true"]:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-a8);
}

.arc-editor-status {
  padding: 6px 12px;
  font-size: 12px;
  color: var(--txt2);
  min-height: 20px;
}

.arc-editor-status-error { color: var(--crim); }

/* Back-to-index link at the top of ordeal, questionnaire, archive detail panes. */
.qf-back-btn {
  background: none;
  border: none;
  color: var(--accent);
  font-family: var(--fl);
  font-size: 13px;
  cursor: pointer;
  padding: 8px 0;
  margin-bottom: 12px;
  opacity: .7;
  transition: opacity .2s;
}

.qf-back-btn:hover { opacity: 1; }

/* Locked fields — character sheet is authoritative */

.qf-field-locked { opacity: .85; }

.qf-locked-value {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--surf2);
  border: 1px solid var(--bdr);
  border-radius: 4px;
  color: var(--txt);
  font-family: var(--ft);
  font-size: 15px;
}

.qf-locked-note {
  font-size: 11px;
  color: var(--txt3);
  margin-top: 4px;
  font-style: italic;
}

.qf-readonly-value {
  padding: 8px 0;
  color: var(--rp-neutral-warm);
  font-family: var(--ft);
  font-size: 14px;
  line-height: 1.7;
  white-space: pre-line;
}

.qf-readonly-pending {
  font-style: italic;
  color: var(--txt3);
}

.reading-pane .qf-readonly-pending { color: var(--rp-txt3); }

/* ── Character select grid ── */

.qf-char-select-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 4px 8px;
  max-height: 50vh; overflow-y: auto; overscroll-behavior: contain;
}

.qf-char-inactive {
  margin-top: 8px;
  font-size: 13px;
}

.qf-char-inactive summary {
  cursor: pointer;
  color: var(--txt3);
  font-style: italic;
  padding: 4px 0;
  list-style: none;
}

.qf-char-inactive summary::before { content: '▾ '; font-size: 11px; }
.qf-char-inactive[open] summary::before { content: '▴ '; }

.qf-char-select-grid-retired .qf-checkbox-label { opacity: .7; }

.reading-pane .qf-char-inactive summary { color: var(--rp-txt3); }

/* ── Dynamic list ── */

.qf-dynlist {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 8px;
}

.qf-dynlist-entry {
  position: relative;
  border: 1px solid var(--bdr);
  border-radius: 6px;
  padding: 12px 36px 12px 14px;
  background: var(--surf2);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.reading-pane .qf-dynlist-entry {
  background: rgba(255,255,255,.45);
  border-color: rgba(139,0,0,.2);
}

.qf-dynlist-remove {
  position: absolute;
  top: 8px;
  right: 10px;
  background: none;
  border: none;
  color: var(--txt3);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
}

.qf-dynlist-remove:hover { color: var(--crim); }

.qf-dynlist-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.qf-dynlist-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--txt3);
  text-transform: uppercase;
  letter-spacing: .04em;
}

.reading-pane .qf-dynlist-label { color: var(--rp-txt3); }

.qf-dynlist-add {
  align-self: flex-start;
  background: none;
  border: 1px dashed var(--bdr);
  border-radius: 4px;
  color: var(--accent);
  font-size: 13px;
  padding: 6px 14px;
  cursor: pointer;
  transition: border-color .15s, color .15s;
}

.qf-dynlist-add:hover { border-color: var(--accent); }

.reading-pane .qf-dynlist-add {
  color: var(--rp-accent);
  border-color: rgba(139,0,0,.3);
}

/* Dynamic list read-only */

.qf-dynlist-readonly { display: flex; flex-direction: column; gap: 10px; }

.qf-dynlist-card {
  border-left: 2px solid var(--gold-a20);
  padding: 8px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.reading-pane .qf-dynlist-card { border-left-color: rgba(139,0,0,.25); }

.qf-dynlist-card-row {
  display: flex;
  gap: 8px;
  font-size: 14px;
  align-items: baseline;
}

.qf-dynlist-card-label {
  font-weight: 600;
  color: var(--txt3);
  min-width: 90px;
  flex-shrink: 0;
}

.reading-pane .qf-dynlist-card-label { color: var(--rp-txt3); }

.qf-dynlist-card-value { color: var(--txt); }
.reading-pane .qf-dynlist-card-value { color: var(--rp-txt); }

/* ── Downtime gated sections ── */

.dt-gated-hidden { display: none; }

/* ── Star rating widget ── */

.dt-star-row {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  user-select: none;
}

.dt-star {
  display: inline-flex;
  font-size: 0;
  cursor: pointer;
}

.dt-star-half {
  display: inline-block;
  font-size: 28px;
  line-height: 1;
  color: var(--surf3, #333);
  transition: color .15s;
  overflow: hidden;
}

.dt-star-left {
  width: 1em;
  clip-path: inset(0 50% 0 0);
  margin-right: -1em;
  position: relative;
  z-index: 1;
}

.dt-star-right {
  width: 1em;
}

.dt-star-half.dt-star-filled {
  color: var(--accent);
}

.dt-star-half.dt-star-hover {
  color: var(--gold1, #C9A84C);
}

.dt-star-label {
  margin-left: 10px;
  font-size: 14px;
  color: var(--txt3);
  min-width: 35px;
}

/* ── Feedback hidden until rated ── */

.dt-feedback-hidden { display: none; }

/* ── Residency grid ── */
.dt-residency-grid {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 12px 0 16px;
}
.dt-residency-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  border-radius: 4px;
  background: var(--surf);
}
.dt-residency-row.dt-over-cap {
  /* Issue #159: cap is a soft warning surface — token-driven crimson
     wash so the over-cap row reads as "warning" without being aggressive. */
  background: var(--crim-a25);
  border: 1px solid var(--crim);
}
.dt-residency-label {
  min-width: 90px;
  font-weight: 600;
  color: var(--accent);
  font-size: 0.9rem;
}
.dt-residency-locked {
  flex: 1;
  color: var(--txt);
  font-style: italic;
}
.dt-residency-select { flex: 1; }
.dt-over-cap-warn {
  font-size: 0.8rem;
  color: var(--crim);
  font-weight: 600;
  white-space: nowrap;
}

/* ── Feeding territory grid ── */
.dt-feed-grid { display: flex; flex-direction: column; gap: 0; margin: 12px 0 16px; }
.dt-feed-grid-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 4px;
  border-bottom: 1px solid rgba(139,0,0,.1);
  gap: 12px;
}
.dt-feed-grid-terr {
  font-size: 0.9rem;
  color: var(--rp-txt);
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
}
.dt-feed-ambience {
  font-size: 0.75rem;
  color: var(--txt3);
  font-style: italic;
}
.dt-feed-grid-options { display: flex; gap: 16px; flex-shrink: 0; }
.dt-feed-radio-label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.85rem;
  cursor: pointer;
  white-space: nowrap;
}
.dt-feed-radio-label input[type="radio"] { width: 16px; height: 16px; cursor: pointer; accent-color: var(--crim); }
.dt-feed-primary { color: var(--rp-head); font-weight: 600; }
.dt-feed-rights { background: rgba(34, 120, 60, 0.06); border-radius: 3px; }
.dt-feed-rights .dt-feed-primary { color: var(--influence-ok); }

/* ── Influence spending grid ── */
.dt-influence-grid {
  margin: 12px 0 16px;
}
.dt-influence-budget {
  font-size: 0.95rem;
  color: var(--rp-txt2);
  margin-bottom: 12px;
  font-weight: 600;
  text-align: right;
}
.dt-influence-remaining {
  font-size: 1.1rem;
  color: var(--influence-ok);
  font-weight: 700;
}
.dt-influence-remaining.dt-influence-over {
  color: var(--crim);
}
.dt-influence-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 4px;
  border-bottom: 1px solid rgba(139,0,0,.1);
}
.dt-influence-terr {
  width: 30%;
  font-size: 0.9rem;
  color: var(--rp-txt);
}
.dt-influence-control {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex: 1;
}
.dt-inf-btn {
  width: 28px;
  height: 28px;
  border: 1px solid rgba(139,0,0,.25);
  border-radius: 4px;
  background: var(--rp-surf);
  color: var(--rp-txt);
  font-size: 1.1rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.dt-inf-btn:hover {
  background: var(--rp-bg);
  border-color: rgba(139,0,0,.4);
}
.dt-inf-val {
  min-width: 28px;
  text-align: center;
  font-size: 1rem;
  font-weight: 700;
  color: var(--rp-txt2);
}
.dt-inf-val.dt-inf-negative { color: var(--crim); }
.dt-inf-val.dt-inf-positive { color: var(--influence-ok); }

/* DTFP-1: ambience-direction labels around the influence stepper.
   Both slots are always in the DOM with fixed width so the stepper column
   stays in the same horizontal position across rows regardless of whether
   either label has text. */
.dt-influence-label {
  color: var(--rp-txt3);
  font-size: 0.8em;
  font-style: italic;
  white-space: nowrap;
  flex: 0 0 9rem;
}
.dt-influence-label-left  { text-align: right; padding-right: 0.5rem; }
.dt-influence-label-right { text-align: left;  padding-left:  0.5rem; }

/* ── Project tabs ── */
.dt-proj-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 0;
}

.dt-proj-tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 10px 6px 8px;
  border: 1px solid rgba(201,169,98,.15);
  border-bottom: none;
  border-radius: 6px 6px 0 0;
  background: var(--surf);
  color: var(--txt3);
  cursor: pointer;
  font-family: var(--fl);
  transition: background .15s, color .15s;
}

.dt-proj-tab:hover { background: var(--surf2); }

.dt-proj-tab-active {
  background: var(--surf2);
  color: var(--accent);
  border-color: rgba(201,169,98,.3);
  border-bottom: 1px solid var(--surf2);
  position: relative;
  z-index: 1;
  margin-bottom: -1px;
}

.dt-proj-tab-empty .dt-proj-tab-icon { color: var(--crim); }

.dt-proj-tab-icon {
  font-size: 18px;
  line-height: 1;
}

.dt-proj-tab-num {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .5px;
  opacity: .7;
}

.dt-proj-tab-label {
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* ── Project panes ── */
.dt-proj-pane {
  border: 1px solid rgba(201,169,98,.15);
  border-radius: 0 0 6px 6px;
  background: var(--surf2);
  padding: 16px 18px;
}

.dt-proj-pane-hidden { display: none; }

/* ── JDT-2: Solo/Joint toggle and joint authoring panel ── */
.dt-project-solo-joint-toggle {
  display: flex;
  gap: 16px;
  align-items: center;
  margin: 8px 0 12px;
}
.dt-project-mode-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  cursor: pointer;
}
.dt-project-mode-label input[type="radio"]:disabled + * { opacity: .55; }

.dt-joint-authoring {
  margin: 12px 0 16px;
  padding: 14px 16px 18px;
  background: var(--surf);
  border-left: 3px solid var(--gold2);
  border-radius: 4px;
}
.dt-joint-authoring .qf-label {
  display: block;
  margin-top: 18px;
  margin-bottom: 6px;
}
.dt-joint-authoring .dt-joint-explainer + .qf-label,
.dt-joint-authoring .dt-joint-saved-note + .qf-label {
  margin-top: 6px;
}
.dt-joint-authoring .dt-target-flex-radios {
  margin-bottom: 8px;
}
.dt-joint-authoring .qf-textarea { width: 100%; }
.dt-joint-banner {
  display: inline-block;
  padding: 2px 10px;
  background: var(--gold2);
  color: var(--bg);
  font-family: var(--fl);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  border-radius: 999px;
  margin-bottom: 10px;
}
.dt-joint-saved-note { margin: 0 0 10px; font-style: italic; }

.dt-joint-explainer {
  margin: 0 0 14px;
  padding: 10px 12px;
  background: var(--gold2-a12);
  border-left: 2px solid var(--gold2);
  border-radius: 0 3px 3px 0;
  font-size: 12.5px;
  line-height: 1.5;
}
.dt-joint-explainer p { margin: 0; }
.dt-joint-explainer p + p { margin-top: 6px; }
.dt-joint-explainer strong { color: var(--gold2); }

.dt-flex-multi-char-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 6px 12px;
  margin-top: 6px;
}
.dt-flex-multi-char-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px;
  font-size: 13px;
  cursor: pointer;
  border-radius: 3px;
}
.dt-flex-multi-char-item:hover { background: var(--surf2); }

/* ── JDT-3: Pending invitations panel (above project tabs) ── */
.dt-pending-invitations-panel {
  margin: 0 0 18px;
  padding: 14px 16px 16px;
  background: var(--surf2);
  border: 2px solid var(--gold2);
  border-radius: 4px;
}
.dt-pending-invitations-title {
  font-family: var(--fl);
  font-size: 13px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gold2);
  margin: 0 0 12px;
}
.dt-pending-invitation-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px 18px;
  padding: 10px 0;
  align-items: start;
  border-top: 1px solid var(--gold2-a25);
}
.dt-pending-invitation-row:first-of-type { border-top: 0; padding-top: 0; }
.dt-pending-invitation-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  grid-column: 1;
}
.dt-pending-invitation-lead {
  font-family: var(--fh2);
  font-size: 14px;
  color: var(--gold2);
}
.dt-pending-invitation-action {
  font-size: 12px;
  color: var(--gold);
}
.dt-pending-invitation-desc {
  grid-column: 1 / -1;
  font-size: 13px;
  line-height: 1.45;
}
.dt-pending-invitation-desc-empty { font-style: italic; opacity: .7; }
.dt-pending-invitation-actions {
  display: flex;
  gap: 8px;
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
}
.dt-pending-invitation-accept {
  background: var(--gold2);
  color: var(--bg);
  border: none;
  padding: 6px 14px;
  border-radius: 3px;
  font-family: var(--fl);
  font-size: 12px;
  letter-spacing: .04em;
  text-transform: uppercase;
  cursor: pointer;
}
.dt-pending-invitation-accept:hover:not(:disabled) { filter: brightness(1.1); }
.dt-pending-invitation-accept:disabled { opacity: .45; cursor: not-allowed; }
.dt-pending-invitation-decline {
  background: transparent;
  color: var(--crim);
  border: 1px solid var(--crim-a40);
  padding: 6px 14px;
  border-radius: 3px;
  font-family: var(--fl);
  font-size: 12px;
  letter-spacing: .04em;
  text-transform: uppercase;
  cursor: pointer;
}
.dt-pending-invitation-decline:hover { background: var(--crim-a12); }

/* ── JDT-4: Support slot lock + read-only chrome ── */
.dt-proj-support-pane {
  border-left: 3px solid var(--gold2);
  background: var(--surf);
}
.dt-proj-support-header {
  font-family: var(--fl);
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gold2);
  padding: 4px 0 12px;
}
.dt-proj-support-header .dt-proj-support-sep {
  letter-spacing: .04em;
  text-transform: none;
  color: var(--gold);
  font-size: 12px;
}
.dt-proj-support-header strong {
  text-transform: none;
  letter-spacing: 0;
  font-family: var(--fh2);
  color: var(--accent);
}
.dt-proj-support-readonly-block {
  background: var(--surf2);
  padding: 12px 14px 14px;
  border-radius: 4px;
  margin-bottom: 16px;
}
.dt-proj-support-label {
  font-family: var(--fl);
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--gold);
  margin-top: 10px;
  margin-bottom: 4px;
}
.dt-proj-support-readonly-block > .dt-proj-support-label:first-child { margin-top: 0; }
.dt-proj-support-action,
.dt-proj-support-target {
  font-size: 13px;
  color: var(--accent);
}
.dt-proj-support-desc {
  font-size: 13.5px;
  line-height: 1.5;
  white-space: pre-wrap;
}
.dt-proj-support-desc-empty { font-style: italic; opacity: .7; }
.dt-proj-pane-orphaned {
  padding: 12px 14px;
  background: var(--crim-a8);
  border-left: 3px solid var(--crim);
  border-radius: 3px;
}

/* ── JDT-6: lifecycle controls on a support slot ── */
.dt-joint-decouple-row {
  margin-top: 16px;
  padding: 10px 12px;
  background: var(--surf2);
  border-left: 2px solid var(--crim-a40);
  border-radius: 3px;
}
.dt-joint-decouple-btn {
  background: transparent;
  color: var(--crim);
  border: 1px solid var(--crim-a40);
  padding: 6px 14px;
  border-radius: 3px;
  font-family: var(--fl);
  font-size: 12px;
  letter-spacing: .04em;
  text-transform: uppercase;
  cursor: pointer;
}
.dt-joint-decouple-btn:hover { background: var(--crim-a12); }
.dt-joint-decouple-help {
  margin-top: 6px;
  font-size: 12px;
  opacity: .8;
}

/* ── JDT-6: lead re-invite + cancel panels on the joint authoring panel ── */
.dt-joint-reinvite-panel {
  margin-top: 14px;
  padding: 10px 12px;
  background: var(--surf2);
  border-left: 2px solid var(--gold-a30);
  border-radius: 3px;
}
.dt-joint-reinvite-title {
  font-family: var(--fl);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 8px;
}
.dt-joint-reinvite-empty {
  margin-top: 14px;
  font-style: italic;
  opacity: .7;
}
.dt-joint-reinvite-btn {
  margin-top: 8px;
  background: transparent;
  color: var(--gold2);
  border: 1px solid var(--gold-a30);
  padding: 6px 14px;
  border-radius: 3px;
  font-family: var(--fl);
  font-size: 12px;
  letter-spacing: .04em;
  text-transform: uppercase;
  cursor: pointer;
}
.dt-joint-reinvite-btn:hover { background: var(--gold-a12); }
.dt-joint-reinvite-status {
  margin-left: 10px;
  font-size: 12px;
  opacity: .85;
}

.dt-joint-cancel-panel {
  margin-top: 14px;
  padding: 10px 12px;
  background: var(--surf2);
  border-left: 2px solid var(--crim-a40);
  border-radius: 3px;
}
.dt-joint-cancel-btn {
  background: transparent;
  color: var(--crim);
  border: 1px solid var(--crim-a40);
  padding: 6px 14px;
  border-radius: 3px;
  font-family: var(--fl);
  font-size: 12px;
  letter-spacing: .04em;
  text-transform: uppercase;
  cursor: pointer;
}
.dt-joint-cancel-btn:hover { background: var(--crim-a12); }
.dt-joint-cancel-help {
  margin-top: 6px;
  font-size: 12px;
  opacity: .8;
}
.dt-joint-cancel-status {
  margin-left: 10px;
  font-size: 12px;
  opacity: .85;
}

/* JDT-6: lead description edit save row + last edited timestamp */
.dt-joint-desc-edit-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  margin-bottom: 12px;
}
.dt-joint-desc-save-btn {
  background: transparent;
  color: var(--gold2);
  border: 1px solid var(--gold-a30);
  padding: 5px 12px;
  border-radius: 3px;
  font-family: var(--fl);
  font-size: 11px;
  letter-spacing: .04em;
  text-transform: uppercase;
  cursor: pointer;
}
.dt-joint-desc-save-btn:hover { background: var(--gold-a12); }
.dt-joint-desc-last-edited {
  font-size: 11.5px;
  font-style: italic;
  opacity: .8;
}
.dt-joint-desc-save-status {
  margin-left: auto;
  font-size: 12px;
  color: var(--gold2);
}

/* JDT-6: support description-change indicator */
.dt-joint-desc-changed-indicator {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  padding: 10px 14px;
  background: var(--gold-a12);
  border-left: 3px solid var(--gold2);
  border-radius: 3px;
}
.dt-joint-desc-changed-indicator strong {
  font-family: var(--fl);
  font-size: 12.5px;
  letter-spacing: .04em;
  color: var(--accent);
}
.dt-joint-desc-acknowledge-btn {
  margin-left: auto;
  background: var(--gold2);
  color: var(--bg);
  border: none;
  padding: 6px 14px;
  border-radius: 3px;
  font-family: var(--fl);
  font-size: 11px;
  letter-spacing: .04em;
  text-transform: uppercase;
  cursor: pointer;
}
.dt-joint-desc-acknowledge-btn:hover { filter: brightness(1.1); }

/* JDT-6: action-type locked help text on lead's joint slot */
.dt-action-type-locked-help {
  margin-top: 6px;
  font-size: 12px;
  font-style: italic;
  opacity: .85;
}

/* Joint badge on slot tabs (lead or support) */
.dt-proj-tab-joint {
  position: relative;
}
.dt-proj-tab-joint-badge {
  display: inline-block;
  padding: 1px 8px;
  background: var(--gold2);
  color: var(--bg);
  font-size: 10px;
  letter-spacing: .06em;
  text-transform: uppercase;
  border-radius: 999px;
  margin-left: 6px;
  font-family: var(--fl);
  vertical-align: middle;
}

.dt-joint-readonly-target {
  padding: 6px 10px;
  background: var(--surf2);
  border-radius: 4px;
  font-size: 13px;
}
.dt-joint-readonly-type {
  display: inline-block;
  padding: 1px 8px;
  background: var(--gold2-a12);
  color: var(--gold2);
  border-radius: 999px;
  font-size: 11px;
  letter-spacing: .04em;
  text-transform: uppercase;
  margin-right: 8px;
}

.dt-joint-invitee-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 6px 12px;
  margin-top: 6px;
}
.dt-joint-invitee-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px;
  font-size: 13px;
  cursor: pointer;
  border-radius: 3px;
}
.dt-joint-invitee-item:hover { background: var(--surf2); }

.dt-joint-status-grid {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 6px;
}
.dt-joint-status-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 8px;
  background: var(--surf2);
  border-radius: 3px;
  font-size: 13px;
}
.dt-joint-invitee-name { font-weight: 500; }

.dt-joint-status-badge {
  padding: 2px 10px;
  font-size: 11px;
  letter-spacing: .04em;
  text-transform: uppercase;
  border-radius: 999px;
  font-family: var(--fl);
}
.dt-joint-status-pending  { background: var(--surf3); color: var(--gold2); }
.dt-joint-status-accepted { background: var(--gold2); color: var(--bg); }
.dt-joint-status-declined,
.dt-joint-status-cancelled-by-lead { background: var(--crim); color: var(--bg); }
.dt-joint-status-decoupled { background: var(--surf3); color: var(--crim); }

/* ── DTUI-12: .dt-joint-panel — new authoring panel (no existingJoint) ── */
.dt-joint-panel {
  margin-top: var(--space-3, 12px);
  border: 1px solid var(--surf2);
  border-radius: 4px;
  padding: var(--space-3, 12px);
  background: var(--surf1);
}

.dt-joint-panel__section + .dt-joint-panel__section {
  margin-top: var(--space-4, 16px);
  padding-top: var(--space-4, 16px);
  border-top: 1px solid var(--surf2);
}

.dt-joint-panel__heading {
  font-family: var(--fl);
  font-size: 0.85rem;
  color: var(--gold3);
  margin: 0 0 var(--space-2, 8px) 0;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

@media (prefers-reduced-motion: no-preference) {
  .dt-joint-panel {
    animation: dt-panel-fadein 200ms ease-out;
  }
  @keyframes dt-panel-fadein {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
  }
}

/* ── Acquisitions ── */
.dt-acq-card {
  padding: 16px 18px;
  background: var(--surf);
  border: 1px solid rgba(201,169,98,.15);
  border-radius: 6px;
}
.dt-acq-card-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.dt-acq-card-title {
  font-family: var(--fl);
  font-size: 15px;
  color: var(--accent);
  margin-bottom: 12px;
}
.dt-acq-resources-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  font-size: 14px;
}
.dt-acq-label { font-weight: 600; color: var(--txt); }
.dt-acq-dots { color: var(--accent); letter-spacing: 3px; font-size: 16px; }
.dt-acq-avail-row {
  display: flex;
  align-items: center;
  gap: 6px;
  user-select: none;
}
.dt-acq-dot {
  font-size: 24px;
  cursor: pointer;
  color: var(--surf3, #333);
  transition: color .15s;
  line-height: 1;
}
.dt-acq-dot:hover { color: var(--gold1, #C9A84C); }
.dt-acq-dot-filled { color: var(--accent); }
.dt-acq-unknown {
  font-size: 12px;
  cursor: pointer;
  color: var(--txt3);
  border: 1px solid var(--surf3);
  border-radius: 3px;
  padding: 1px 6px;
  transition: color .15s, border-color .15s;
}
.dt-acq-unknown:hover { color: var(--gold1); border-color: var(--gold1); }
.dt-acq-unknown.dt-acq-dot-filled { color: var(--accent); border-color: var(--accent); }
.dt-acq-avail-label {
  margin-left: 8px;
  font-size: 13px;
  color: var(--txt3);
  font-style: italic;
}

/* ── Skill acquisition pool row (compact) ── */
.dt-acq-card .dt-dice-pool-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
}
.dt-acq-card .dt-dice-pool-row .qf-select {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  padding: 8px;
}
.dt-acq-card .dt-pool-label {
  font-family: var(--fl);
  font-size: 13px;
  color: var(--accent);
  margin-bottom: 6px;
}
.dt-acq-card .dt-pool-total {
  font-family: var(--fl);
  font-size: 18px;
  padding: 0 8px;
  white-space: nowrap;
}

/* Reading pane overrides for acquisitions */
.reading-pane .dt-acq-card { background: var(--rp-surf); border-color: rgba(139,0,0,.12); }
.reading-pane .dt-acq-card-title { color: var(--rp-head); }
.reading-pane .dt-acq-label { color: var(--rp-txt); }
.reading-pane .dt-acq-dots { color: var(--rp-head); }
.reading-pane .dt-acq-dot { color: var(--rp-neutral-warm); }
.reading-pane .dt-acq-dot:hover { color: var(--rp-txt3); }
.reading-pane .dt-acq-dot-filled { color: var(--rp-head); }
.reading-pane .dt-acq-avail-label { color: var(--rp-txt3); }

/* ── Toast notification ── */
.dt-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  padding: 12px 24px;
  border-radius: 6px;
  font-family: var(--fl);
  font-size: 14px;
  font-weight: 600;
  z-index: 9999;
  opacity: 0;
  transition: opacity .3s, transform .3s;
  pointer-events: none;
  max-width: 90vw;
  text-align: center;
  box-shadow: 0 6px 20px rgba(0,0,0,.4);
}
.dt-toast-show { opacity: 1; transform: translateX(-50%) translateY(0); }
.dt-toast-success { background: var(--toast-succ-bg); color: var(--toast-succ-fg); border: 1px solid rgba(76,175,80,.3); }
.dt-toast-error { background: var(--toast-err-bg); color: var(--toast-err-fg); border: 1px solid rgba(229,115,115,.3); }
.dt-toast-info { background: var(--surf2); color: var(--accent); border: 1px solid rgba(201,169,98,.3); }

/* ── XP action budget indicator ── */
.dt-xp-action-budget {
  font-size: 12px;
  color: var(--txt3);
  margin-bottom: 12px;
  padding: 6px 10px;
  background: rgba(201,169,98,.06);
  border-radius: 4px;
}
.dt-xp-action-count { font-weight: 600; color: var(--accent); }
.dt-xp-action-none { font-style: italic; }
.reading-pane .dt-xp-action-budget { background: rgba(139,0,0,.04); }
.reading-pane .dt-xp-action-count { color: var(--rp-head); }

/* ── Contacts table ── */
.dt-contacts-table {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.dt-contact-row {
  border: 1px solid rgba(201,169,98,.1);
  border-radius: 5px;
  overflow: hidden;
  transition: border-color .15s;
}
.dt-contact-row.dt-contact-used {
  border-color: rgba(201,169,98,.25);
}
.dt-contact-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  cursor: pointer;
  background: var(--surf);
  transition: background .1s;
}
.dt-contact-header:hover { background: var(--surf2); }
.dt-contact-area {
  font-family: var(--fl);
  font-size: 14px;
  color: var(--txt);
  flex: 1;
  min-width: 0;
}
.dt-contact-dots {
  font-size: 12px;
  color: var(--accent);
  letter-spacing: 2px;
}
.dt-contact-status {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .5px;
  padding: 2px 8px;
  border-radius: 3px;
  font-weight: 600;
}
.dt-contact-row:not(.dt-contact-used) .dt-contact-status {
  color: var(--txt3);
  background: rgba(255,255,255,.04);
}
.dt-contact-used .dt-contact-status {
  color: var(--toast-succ-fg);
  background: rgba(76,175,80,.1);
}
.dt-contact-clear {
  background: none;
  border: none;
  color: var(--txt3);
  font-size: 14px;
  cursor: pointer;
  padding: 2px 4px;
  line-height: 1;
  opacity: .6;
  transition: opacity .1s, color .1s;
}
.dt-contact-clear:hover { opacity: 1; color: var(--crim); }
.dt-contact-panel {
  padding: 12px 14px;
  background: var(--surf2);
  border-top: 1px solid rgba(201,169,98,.08);
}
.dt-contact-panel-hidden { display: none; }
.dt-contact-panel .qf-field { margin-bottom: 12px; }
.dt-contact-panel .qf-field:last-child { margin-bottom: 0; }

/* Reading pane overrides for contacts */
.reading-pane .dt-contact-header { background: var(--rp-surf2); }
.reading-pane .dt-contact-header:hover { background: var(--rp-surf); }
.reading-pane .dt-contact-area { color: var(--rp-txt); }
.reading-pane .dt-contact-dots { color: var(--rp-head); }
.reading-pane .dt-contact-row:not(.dt-contact-used) .dt-contact-status { color: var(--rp-txt3); background: rgba(0,0,0,.04); }
.reading-pane .dt-contact-panel { background: var(--rp-surf); border-top-color: rgba(139,0,0,.08); }
.reading-pane .dt-contact-row { border-color: rgba(139,0,0,.1); }
.reading-pane .dt-contact-row.dt-contact-used { border-color: rgba(139,0,0,.2); }
.reading-pane .dt-contact-clear:hover { color: var(--rp-accent); }

/* ── Sphere merit info header ── */
.dt-sphere-merit-info {
  font-family: var(--fl);
  font-size: 13px;
  color: var(--accent);
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(201,169,98,.12);
}
.reading-pane .dt-sphere-merit-info { color: var(--rp-head); border-bottom-color: rgba(139,0,0,.12); }

/* ── Project feed summary ── */
.dt-proj-feed-summary {
  padding: 12px 14px;
  background: rgba(201,169,98,.06);
  border: 1px solid rgba(201,169,98,.15);
  border-radius: 4px;
  margin-bottom: 12px;
}
.dt-proj-feed-summary p { margin: 0 0 6px; font-size: 14px; color: var(--txt3); }
.dt-proj-feed-summary p:last-child { margin-bottom: 0; }
.dt-proj-feed-method { color: var(--accent); }

/* ── Cast summary + button ── */
.dt-cast-summary {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.dt-cast-pills { display: flex; flex-wrap: wrap; gap: 4px; }
.dt-cast-pill {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 12px;
  background: rgba(201,169,98,.15);
  color: var(--accent);
  border: 1px solid rgba(201,169,98,.25);
}
.dt-cast-none { font-size: 13px; color: var(--txt3); font-style: italic; }
.dt-cast-btn {
  padding: 5px 14px;
  border: 1px solid rgba(201,169,98,.3);
  border-radius: 4px;
  background: var(--surf2);
  color: var(--accent);
  font-family: var(--fl);
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
}
.dt-cast-btn:hover { background: var(--surf3, #333); }

/* ── Cast picker modal ── */
/* Outer backdrop: .plm-overlay (defined above)
   Modal box: .plm-dialog (defined above) + .dt-cast-modal size override */
.dt-cast-modal {
  max-width: 420px;
  padding: 0;
  gap: 0;
  max-height: 80vh;
}
/* Header: .plm-header (defined above) — restore inset padding since dialog padding is zeroed */
.dt-cast-modal .plm-header {
  padding: 14px 18px 10px;
}

.dt-cast-filter {
  padding: 8px 18px;
  border-bottom: 1px solid rgba(201,169,98,.08);
}
.dt-cast-filter-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--txt3);
  cursor: pointer;
}
.dt-cast-filter-label input { accent-color: var(--accent); }

.dt-cast-list {
  flex: 1;
  overflow-y: auto;
  padding: 6px 0;
}
.dt-cast-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 18px;
  cursor: pointer;
  transition: background .1s;
}
.dt-cast-item:hover { background: rgba(201,169,98,.06); }
.dt-cast-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--surf3, #333);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--fl);
  font-size: 13px;
  font-weight: 700;
  flex-shrink: 0;
  border: 1px solid rgba(201,169,98,.2);
}
.dt-cast-info { flex: 1; min-width: 0; }
.dt-cast-charname {
  font-size: 14px;
  color: var(--txt);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dt-cast-player {
  font-size: 11px;
  color: var(--txt3);
  margin-top: 1px;
}
.dt-cast-check {
  accent-color: var(--accent);
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.dt-cast-empty {
  text-align: center;
  padding: 20px;
  color: var(--txt3);
  font-size: 13px;
}
.dt-cast-modal-footer {
  padding: 10px 18px 14px;
  border-top: 1px solid rgba(201,169,98,.12);
  display: flex;
  justify-content: flex-end;
}

/* ── Merit checkbox grids ── */
.dt-proj-merits {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
}
.dt-proj-merit-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  cursor: pointer;
  color: var(--txt);
}
.dt-proj-merit-label input {
  accent-color: var(--accent);
}

/* ── Reading pane overrides for project tabs ── */
.reading-pane .dt-proj-tab {
  background: var(--rp-surf2);
  color: var(--rp-txt3);
  border-color: rgba(139,0,0,.12);
}
.reading-pane .dt-proj-tab:hover { background: var(--rp-surf); }
.reading-pane .dt-proj-tab-active {
  background: var(--rp-surf);
  color: var(--rp-head);
  border-color: rgba(139,0,0,.2);
  border-bottom-color: var(--rp-surf);
}
.reading-pane .dt-proj-tab-empty .dt-proj-tab-icon { color: var(--rp-accent); }
.reading-pane .dt-proj-pane {
  background: var(--rp-surf);
  border-color: rgba(139,0,0,.12);
}
.reading-pane .dt-proj-feed-summary {
  background: rgba(139,0,0,.04);
  border-color: rgba(139,0,0,.12);
}
.reading-pane .dt-proj-feed-summary p { color: var(--rp-txt2); }
.reading-pane .dt-proj-feed-method { color: var(--rp-head); }
.reading-pane .dt-proj-merit-label { color: var(--rp-txt); }
.reading-pane .dt-proj-merit-label input { accent-color: var(--rp-accent); }
.reading-pane .dt-cast-pill { background: rgba(139,0,0,.08); color: var(--rp-head); border-color: rgba(139,0,0,.2); }
.reading-pane .dt-cast-none { color: var(--rp-txt3); }
.reading-pane .dt-cast-btn { background: var(--rp-surf2); color: var(--rp-head); border-color: rgba(139,0,0,.2); }
.reading-pane .dt-cast-btn:hover { background: rgba(139,0,0,.08); }
.reading-pane .dt-pool-total { color: var(--rp-head); }

/* ── Dice pool row ── */
.dt-dice-pool-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.dt-pool-select {
  flex: 1;
  min-width: 120px;
}
.dt-pool-total {
  min-width: 36px;
  text-align: center;
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--rp-head);
  background: rgba(139,0,0,.06);
  border-radius: 4px;
  padding: 6px 10px;
}

/* ── XP Spend Grid ── */
/* ── XP spend picker (project slot) ── */
.dt-xp-picker { margin: 8px 0; }
.dt-xp-picker-budget { font-size: 12px; font-weight: 600; color: var(--txt2); margin-bottom: 8px; }
.dt-xp-picker-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* ── Project XP carry-forward (admin) ── */
.dt-xp-proj-commits { margin: 0 0 12px; border: 1px solid rgba(224,196,122,.2); border-radius: 4px; overflow: hidden; }
.dt-xp-proj-commits-title { background: rgba(224,196,122,.08); padding: 5px 10px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--gold2); }
.dt-xp-proj-row { display: flex; align-items: center; gap: 8px; padding: 6px 10px; font-size: 13px; border-top: 1px solid rgba(224,196,122,.1); }
.dt-xp-proj-num { font-weight: 600; color: var(--txt2); flex-shrink: 0; min-width: 60px; }
.dt-xp-proj-label { flex: 1; color: var(--txt1); }

.dt-xp-grid { margin: 12px 0 16px; }
.dt-xp-budget {
  font-size: 0.95rem;
  color: var(--rp-txt2);
  margin-bottom: 12px;
  font-weight: 600;
  text-align: right;
}
.dt-xp-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}
.dt-xp-cat { flex: 1; min-width: 140px; }
.dt-xp-item { flex: 2; min-width: 180px; }
.dt-xp-dots { flex: 1; min-width: 130px; }
.dt-xp-cost {
  min-width: 60px;
  text-align: center;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--rp-head);
  background: rgba(139,0,0,.06);
  border-radius: 4px;
  padding: 6px 10px;
  white-space: nowrap;
}
.dt-xp-row-remove {
  background: none;
  border: 1px solid var(--crim);
  color: var(--crim);
  border-radius: 3px;
  padding: 1px 6px;
  font-size: 11px;
  cursor: pointer;
  flex-shrink: 0;
}
.dt-xp-row-remove:hover { background: rgba(139,0,0,.08); }
.dt-xp-row-add {
  background: none;
  border: none;
  color: var(--txt2);
  font-size: 12px;
  cursor: pointer;
  padding: 4px 0;
  margin-top: 2px;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.dt-xp-row-add:hover { color: var(--gold2); }

/* ── Blood Sorcery slots ── */
.dt-sorcery-slot {
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(139,0,0,.1);
}
.dt-sorcery-slot:last-child { border-bottom: none; }
.dt-sorcery-details {
  margin-top: 8px;
  padding: 12px 14px;
  background: rgba(139,0,0,.04);
  border-left: 3px solid rgba(139,0,0,.18);
  border-radius: 0 4px 4px 0;
}
.dt-sorcery-info { margin-bottom: 12px; }
.dt-sorcery-stat {
  font-size: 0.9rem;
  color: var(--rp-txt);
  padding: 3px 0;
  line-height: 1.5;
}
.dt-sorcery-label {
  font-weight: 700;
  color: var(--rp-head);
}
.dt-sorcery-slot-hd {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}
.dt-sorcery-slot-num { font-weight: 600; color: var(--accent); }
.dt-sorcery-remove {
  background: none;
  border: 1px solid var(--crim);
  color: var(--crim);
  border-radius: 3px;
  padding: 1px 6px;
  font-size: 11px;
  cursor: pointer;
}
.dt-mand-label {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  font-size: 12px;
  color: var(--txt2);
  cursor: pointer;
}
.dt-mand-cb { accent-color: var(--accent); }
.dt-add-rite-btn {
  margin-top: 10px;
  background: none;
  border: 1px solid var(--accent);
  color: var(--accent);
  border-radius: 4px;
  padding: 4px 12px;
  font-size: 12px;
  cursor: pointer;
}
.dt-add-rite-btn:hover { background: var(--gold-a10); }

/* ── Equipment rows ── */
.dt-equipment-row { margin-bottom: 8px; }
.dt-equipment-row-fields {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
}
.dt-equip-name { flex: 2; min-width: 140px; }
.dt-equip-qty { flex: 0 0 60px; }
.dt-equip-notes { flex: 3; min-width: 160px; }

/* ── Vitae Budget panel ── */
.dt-vitae-budget {
  margin: 14px 0 6px;
  border: 1px solid var(--bdr2);
  border-radius: 4px;
  padding: 10px 12px;
  background: var(--gold-a6);
  font-size: 13px;
}
.dt-vitae-budget-title {
  font-family: var(--fl);
  font-size: 12px;
  letter-spacing: 0.05em;
  color: var(--accent);
  margin-bottom: 8px;
  text-transform: uppercase;
}
.dt-vitae-row {
  display: flex;
  justify-content: space-between;
  padding: 3px 0;
  color: var(--txt);
}
.dt-vitae-cost span:last-child { color: var(--crim2); }
.dt-vitae-pos span:last-child { color: var(--gold2); }
.dt-vitae-subtotal {
  border-top: 1px dashed var(--bdr2);
  margin-top: 4px;
  padding-top: 4px;
  font-weight: 600;
}
.dt-vitae-total {
  border-top: 1px solid var(--bdr2);
  margin-top: 4px;
  padding-top: 4px;
  color: var(--accent);
  font-weight: 600;
}
.dt-vitae-note {
  font-size: 11px;
  font-style: italic;
  color: var(--txt2);
  margin-top: 2px;
}
.dt-vitae-over { color: var(--crim); font-weight: 700; }

/* ── Shoutout picks ── */
.dt-shoutout-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 6px 12px;
  margin-top: 4px;
  max-height: 50vh; overflow-y: auto; overscroll-behavior: contain;
}
.dt-shoutout-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 4px;
}
.dt-shoutout-item:hover { background: var(--surf2); }
.dt-shoutout-item input[type="checkbox"] { accent-color: var(--gold2); flex-shrink: 0; }
.dt-shoutout-item input[disabled] + span { opacity: 0.45; }
.dt-shoutout-att { color: var(--gold2); }

/* ── Personal Story — NPC picker ─────────────────────────────── */
.dt-npc-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}
.dt-npc-card {
  border: 1px solid var(--bdr);
  border-radius: 5px;
  padding: 8px 12px;
  cursor: pointer;
  background: var(--surf2);
  min-width: 120px;
  transition: border-color .15s, background .15s;
}
.dt-npc-card:hover { border-color: var(--gold2); background: var(--surf1); }
.dt-npc-card-selected { border-color: var(--gold2); background: var(--gold-a12); }
.dt-npc-card-name { font-weight: 600; font-size: 13px; color: var(--txt1); }
.dt-npc-card-rel  { font-size: 11px; color: var(--txt3); margin-top: 2px; font-family: var(--fl); }
.dt-npc-card-loc  { font-size: 11px; color: var(--txt3); font-style: italic; }
.dt-npc-propose   { margin-top: 8px; }
.dt-npc-direction {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 4px;
}
.dt-npc-dir-option {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  cursor: pointer;
  padding: 6px 8px;
  border-radius: 4px;
  border: 1px solid var(--bdr);
  background: var(--surf2);
}
.dt-npc-dir-option:has(input:checked) { border-color: var(--gold2); background: var(--gold-a8); }
.dt-npc-dir-label { font-size: 13px; color: var(--txt1); font-weight: 500; min-width: 180px; }
.dt-npc-dir-desc  { font-size: 12px; color: var(--txt3); font-family: var(--fl); }
.dt-shoutout-limit {
  font-size: 12px;
  font-style: italic;
  color: var(--txt2);
  margin-top: 6px;
}

/* ── Aspiration slots ── */
.dt-aspiration-slots { display: flex; flex-direction: column; gap: 8px; }
.dt-aspiration-slot { display: flex; gap: 8px; align-items: center; }
.dt-aspiration-type { width: 110px; flex-shrink: 0; }

/* DTR.1: Highlight slots (game_recount) — 3 fixed, up to 5 progressive */
.dt-highlight-slots { display: flex; flex-direction: column; gap: 10px; }
.dt-highlight-slot { display: flex; flex-direction: column; gap: 4px; }
.dt-highlight-slot .qf-label { margin: 0; font-size: 12px; color: var(--txt2); letter-spacing: 0.04em; }
.dt-highlight-input { min-height: 42px; }
/* DTFP-7: per-slot mechanical-flag checkbox */
.dt-highlight-flag {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin-top: 2px;
  font-size: 11px;
  color: var(--txt3);
  cursor: pointer;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
}
.dt-highlight-flag input[type="checkbox"] { margin-top: 2px; flex-shrink: 0; }
.dt-highlight-flag-text { line-height: 1.4; }

/* DTOSL.2: Off-Screen Life choice chips */
.dt-osl-choice-group { display: flex; gap: 8px; margin: 4px 0 8px; flex-wrap: wrap; }
.dt-osl-choice {
  padding: 8px 16px;
  background: var(--surf2);
  border: 1px solid var(--bdr);
  border-radius: 6px;
  color: var(--txt2);
  font-family: var(--fl);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color .15s, color .15s;
}
.dt-osl-choice:hover { border-color: var(--accent); color: var(--txt); }
.dt-osl-choice.dt-osl-choice-on {
  background: var(--accent-a8);
  border-color: var(--accent);
  color: var(--accent);
  font-weight: 700;
}
.dt-osl-empty { font-size: 13px; color: var(--txt3); font-style: italic; margin: 0; }
.dt-aspiration-text { flex: 1; }

/* ── Territory pill switcher ── */
.dt-terr-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
  justify-content: center;
}
.dt-terr-pill {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 6px 12px;
  border-radius: 20px;
  border: 1px solid rgba(139,0,0,.25);
  background: var(--surf2);
  color: var(--txt2);
  font-size: 13px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  line-height: 1.2;
}
.dt-terr-pill:hover { background: var(--surf3); color: var(--txt1); }
.dt-terr-pill-on { background: var(--gold2); color: var(--txt-on-gold); border-color: var(--gold2); font-weight: 600; }
.dt-terr-pill-name { font-size: 13px; }
.dt-terr-pill-amb { font-size: 10px; opacity: 0.7; font-style: italic; }
.dt-terr-pill-status { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; margin-top: 1px; }
/* Feeding multi-select states */
.dt-terr-pill-rights { background: rgba(34,120,60,.15); color: var(--terr-rights-fg); border-color: rgba(34,120,60,.4); font-weight: 600; }
.dt-terr-pill-rights .dt-terr-pill-status { color: var(--terr-rights-fg); }
.dt-terr-pill-poach { background: rgba(180,100,0,.12); color: var(--terr-poach-fg); border-color: rgba(180,100,0,.35); font-weight: 600; }
.dt-terr-pill-poach .dt-terr-pill-status { color: var(--terr-poach-fg); }
.dt-terr-pill-barrens { background: rgba(139,0,0,.1); color: var(--crim); border-color: rgba(139,0,0,.3); font-weight: 600; }
.dt-terr-pill-disabled, .dt-terr-pill[disabled] { opacity: .35; cursor: not-allowed; pointer-events: none; }
/* dt-form.21: selection ring layered over always-on rights tint */
.dt-terr-pill--selected { outline: 2px solid var(--gold2); outline-offset: 2px; }
.dt-terr-pill-rights:hover { background: rgba(34,120,60,.22); color: var(--terr-rights-fg); }
.dt-terr-pill-barrens:hover { background: rgba(139,0,0,.17); color: var(--crim); }
.dt-terr-pill-rights.dt-terr-pill--selected { background: rgba(34,120,60,.28); border-color: rgba(34,120,60,.7); }
.dt-terr-pill-barrens.dt-terr-pill--selected { background: rgba(139,0,0,.22); border-color: rgba(139,0,0,.55); }

/* ── Feed pool suggestion chips ── */
.dt-feed-suggest { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.dt-feed-suggest-lbl { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: var(--txt3); flex-shrink: 0; }
.dt-feed-suggest-sep { color: var(--txt3); font-size: 12px; }
/* DTFP-5: Kiss / Violent feeding declaration toggle */
.dt-feed-violence-toggle {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}
.dt-feed-vi-btn {
  flex: 1;
  padding: 8px 14px;
  background: var(--surf2);
  border: 1px solid var(--bdr);
  color: var(--txt2);
  border-radius: 4px;
  font-family: var(--ft);
  font-size: 13px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.dt-feed-vi-btn:hover { border-color: var(--gold2); color: var(--gold2); }
.dt-feed-vi-btn.dt-feed-vi-on {
  background: var(--gold2);
  border-color: var(--gold2);
  color: var(--bg);
  font-weight: 600;
}
.dt-feed-vi-hint { margin-top: 4px; font-style: italic; }

/* DTFP-6: sorcery structured target rows */
.dt-sorcery-targets-block { display: flex; flex-direction: column; gap: 6px; }
.dt-sorcery-target-row {
  position: relative;
  padding: 8px 36px 8px 10px;
  background: var(--surf2);
  border: 1px solid var(--bdr);
  border-radius: 4px;
}
.dt-sorcery-target-row .dt-target-picker { margin: 0; }
.dt-sorcery-target-remove-btn {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 22px;
  height: 22px;
  background: transparent;
  border: 1px solid var(--bdr);
  border-radius: 3px;
  color: var(--txt3);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
}
.dt-sorcery-target-remove-btn:hover { border-color: var(--crim); color: var(--crim); }
.dt-sorcery-target-add-btn {
  align-self: flex-start;
  margin-top: 2px;
  padding: 4px 12px;
  background: transparent;
  border: 1px dashed var(--bdr);
  border-radius: 3px;
  color: var(--txt2);
  cursor: pointer;
  font-size: 12px;
  font-family: var(--ft);
}
.dt-sorcery-target-add-btn:hover { border-color: var(--gold2); color: var(--gold2); border-style: solid; }

/* DTFP-3: By Force teaching note (Vigour/Celerity selection) */
.dt-feed-teaching-note {
  margin-top: 6px;
  padding: 6px 10px;
  font-size: 12px;
  font-style: italic;
  color: var(--txt2);
  border-left: 2px solid var(--gold2);
  background: var(--surf2);
  border-radius: 3px;
}
.dt-feed-chip {
  font-size: 12px;
  padding: 3px 9px;
  border-radius: 12px;
  border: 1px solid rgba(139,0,0,.25);
  background: var(--surf2);
  color: var(--txt2);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.dt-feed-chip:hover { background: var(--surf3); color: var(--txt1); }
.dt-feed-chip-on { background: var(--crim); color: var(--txt-on-dark); border-color: var(--crim); }
.dt-feed-chip-disc { border-color: rgba(139,0,0,.5); color: var(--crim); }
.dt-feed-chip-disc:hover { background: rgba(139,0,0,.1); }
.dt-feed-chip-disc.dt-feed-chip-on { background: var(--crim); color: var(--txt-on-dark); }

/* ── Regency sub-field (inside Vamping) ── */
.dt-regency-sub { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--surf3); }

/* ── Target pickers ── */
.dt-target-flex { display: flex; flex-direction: column; gap: 8px; }
.dt-target-flex-radios { display: flex; gap: 16px; flex-wrap: wrap; }
.dt-flex-radio-label { display: flex; align-items: center; gap: 6px; font-size: 13px; cursor: pointer; }
.dt-flex-terr-sel { width: 100%; margin-top: 4px; }

/* ── Feeding method selector ── */
.dt-feed-methods {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 6px;
  margin-bottom: 12px;
}
.dt-feed-card {
  padding: 10px 8px;
  border: 1px solid rgba(139,0,0,.18);
  border-radius: 4px;
  background: var(--rp-surf);
  cursor: pointer;
  text-align: left;
}
.dt-feed-card.dt-feed-sel {
  border-color: var(--rp-head);
  background: rgba(139,0,0,.08);
}
.dt-feed-card:hover { border-color: var(--rp-head); }
.dt-feed-card-name {
  font-family: var(--fl);
  font-size: 12px;
  font-weight: 700;
  color: var(--rp-txt);
  margin-bottom: 2px;
}
.dt-feed-card-desc {
  font-size: 10px;
  color: var(--txt3);
  font-style: italic;
}
.dt-feed-pool {
  padding: 10px 12px;
  background: var(--rp-surf);
  border: 1px solid rgba(139,0,0,.12);
  border-radius: 4px;
  margin-bottom: 8px;
}
.dt-feed-breakdown {
  font-size: 13px;
  color: var(--rp-txt2);
  line-height: 1.6;
}
.dt-feed-bv { font-weight: 700; color: var(--accent); }
.dt-feed-dim { color: var(--txt3); font-size: 11px; }
.dt-feed-total { font-weight: 700; color: var(--accent); }
.dt-feed-disc-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}
.dt-feed-disc-lbl {
  font-size: 12px;
  font-weight: 600;
  color: var(--rp-txt);
  white-space: nowrap;
}
.dt-feed-disc-sel { flex: 1; }
.dt-feed-spec-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  flex-wrap: wrap;
}
.dt-feed-spec-chip {
  padding: 4px 10px;
  border: 1px solid rgba(139,0,0,.18);
  border-radius: 10px;
  background: var(--rp-surf);
  color: var(--rp-txt2);
  font-size: 11px;
  cursor: pointer;
}
.dt-feed-spec-chip.dt-feed-spec-on {
  border-color: var(--rp-head);
  background: rgba(139,0,0,.1);
  color: var(--rp-head);
  font-weight: 600;
}
.dt-feed-spec-chip:hover { border-color: var(--rp-head); }
.dt-feed-spec-bonus { color: var(--influence-ok); margin-left: 2px; font-weight: 600; }
.dt-feed-custom {
  padding: 10px 12px;
  background: rgba(139,0,0,.04);
  border: 1px solid rgba(139,0,0,.12);
  border-radius: 4px;
  margin-bottom: 8px;
}
.dt-feed-custom-row {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
}
.dt-feed-custom-row .qf-select { flex: 1; min-width: 120px; }

/* ── Feeding card wrapper ── */
.dt-feed-card-wrap {
  padding: 16px 18px;
  background: var(--surf);
  border: 1px solid rgba(201,169,98,.15);
  border-radius: 6px;
}
.dt-feed-card-wrap > * + * { margin-top: 12px; }

/* Reading pane override — light theme */
.reading-pane .dt-feed-card-wrap {
  background: var(--rp-surf);
  border-color: rgba(139,0,0,.12);
}

.dt-feed-rote-section {
  margin-top: 10px;
  padding: 16px 18px;
  background: var(--surf);
  border: 1px solid rgba(201,169,98,.15);
  border-radius: 6px;
}
.dt-feed-rote-section > * + * { margin-top: 12px; }
.reading-pane .dt-feed-rote-section {
  background: var(--rp-surf);
  border-color: rgba(139,0,0,.12);
}

/* ── Blood type checkboxes ── */

/* ── Rote feeding checkbox ── */
.dt-rote-toggle-wrap { margin-bottom: 8px; }
.dt-rote-slot-picker { margin-top: 10px; padding: 10px 12px; background: var(--surf2); border-radius: 4px; border-left: 2px solid var(--gold2); }
.dt-proj-rote-locked { padding: 10px 12px; background: rgba(224,196,122,.08); border: 1px solid rgba(224,196,122,.25); border-radius: 4px; }
.dt-proj-rote-badge { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--gold2); }
.dt-proj-rote-desc { margin: 6px 0 0; font-size: 13px; color: var(--txt2); font-style: italic; }
.dt-sphere-locked { padding: 10px 12px; background: rgba(224,196,122,.08); border: 1px solid rgba(224,196,122,.25); border-radius: 4px; }
.dt-sphere-locked-badge { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--gold2); }
.dt-sphere-locked-help { margin: 6px 0 0; font-size: 13px; color: var(--txt2); font-style: italic; }
.dt-feed-rote { margin-bottom: 0; }
.dt-feed-rote-label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  color: var(--accent);
}
.dt-feed-rote-label input[type="checkbox"] {
  accent-color: var(--accent);
  width: 16px;
  height: 16px;
}

/* ── Inline merit forms ── */
.dt-merit-inline {
  margin-top: 8px;
  padding: 12px 14px;
  background: rgba(139,0,0,.04);
  border-left: 3px solid rgba(139,0,0,.18);
  border-radius: 0 4px 4px 0;
}

/* ── Feeding tab ── */

.feeding-wrap { width: 100%; }
.feeding-title { font-family: var(--fl); font-size: 18px; color: var(--accent); margin-bottom: 16px; }

.feeding-state-msg { background: var(--surf); border: 1px solid var(--bdr); border-radius: 8px; padding: 24px; }
.feeding-state-msg p { font-size: 14px; color: var(--txt2); margin-bottom: 12px; line-height: 1.5; }
.feeding-state-detail { font-size: 13px; color: var(--txt3); }

.feeding-flow { display: flex; flex-direction: column; gap: 8px; margin-top: 20px; }
.feeding-flow-step { display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: var(--surf2); border: 1px solid var(--bdr); border-radius: 6px; font-size: 13px; color: var(--txt2); }
.feeding-flow-step.done { border-color: var(--green-a45); color: var(--green2); }
.feeding-flow-num { width: 24px; height: 24px; border-radius: 50%; background: var(--bdr); color: var(--txt); font-family: var(--fl); font-size: 12px; font-weight: 600; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.feeding-flow-step.done .feeding-flow-num { background: var(--green-a45); color: var(--txt-on-dark); }

.feeding-confirmed {
  margin-bottom: 16px;
  padding: 12px 16px;
  background: rgba(58,138,58,.08);
  border: 1px solid rgba(58,138,58,.3);
  border-radius: 8px;
  border-left: 3px solid var(--green3);
}
.feeding-confirmed-head { font-family: var(--fl); font-size: 12px; color: var(--green3); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 6px; }
.feeding-confirmed-body { margin: 0; font-size: 13px; line-height: 1.5; }

/* ── ST Roll Result ── */
.feeding-st-roll {
  background: var(--surf2);
  border: 1px solid var(--bdr);
  border-left: 3px solid var(--accent);
  border-radius: 6px;
  padding: 12px 16px;
  margin: 12px 0;
}
.feeding-st-roll-head {
  font-family: var(--fl);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 8px;
}
.feeding-st-roll-body {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 16px;
}
.feeding-st-roll-dice {
  font-size: 13px;
  color: var(--txt2);
}
.feeding-st-roll-result {
  font-family: var(--fl);
  font-size: 15px;
  font-weight: 600;
}
.feeding-st-roll-suc { color: var(--green3, var(--toast-succ-fg)); }
.feeding-st-roll-exc { color: var(--gold2); }
.feeding-st-roll-fail { color: var(--crim); }
.feeding-st-roll-detail {
  font-family: monospace;
  font-size: 12px;
  color: var(--txt3);
  word-break: break-all;
}

.proj-card-dice {
  font-family: monospace;
  font-size: 11px;
  color: var(--txt3);
  word-break: break-all;
  margin-top: 4px;
}

.feeding-result { text-align: center; padding: 24px; }
.feeding-suc { font-family: var(--fl); font-size: 48px; color: var(--accent); }
.feeding-suc-label { font-family: var(--fl); font-size: 13px; color: var(--txt3); letter-spacing: .1em; text-transform: uppercase; margin-bottom: 16px; }
.feeding-dice-row { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; margin: 16px 0; }
.feeding-vessels { margin-top: 16px; }
.feeding-v-num { font-family: var(--fl); font-size: 36px; color: var(--accent); }
.feeding-v-label { font-size: 13px; color: var(--txt2); }
.feeding-no-vessels { color: var(--txt3); font-style: italic; margin-top: 16px; }
.feeding-vessels-grid { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; justify-content: center; }
.feeding-vessel-card { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--surf); border: 1px solid var(--bdr); border-radius: 6px; }
.fvc-label { font-family: var(--fl); font-size: 12px; color: var(--txt3); min-width: 62px; }
.fvc-val { font-size: 13px; color: var(--txt2); min-width: 52px; }
.fvc-select { background: var(--surf2); border: 1px solid var(--bdr); border-radius: 4px; color: var(--txt); font-size: 13px; padding: 4px 8px; }
.fvc-consequence { font-size: 12px; min-width: 100px; }
.fvc-consequence.fvc-safe { color: var(--accent); }
.fvc-consequence.fvc-drained { color: var(--chip-draft); }
.fvc-consequence.fvc-serious { color: var(--crim); }
.fvc-consequence.fvc-critical { color: var(--dmg-crit); }
/* ── Vitae Tally Card (player portal) ── */
.fvt-card { margin: 16px 0; padding: 14px 16px; background: var(--surf); border: 1px solid var(--bdr); border-radius: 8px; font-size: 13px; }
.fvt-title { font-family: var(--fl); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--gold2); margin-bottom: 10px; }
.fvt-row { display: flex; justify-content: space-between; align-items: baseline; padding: 3px 0; color: var(--txt2); }
.fvt-row .fvt-label { color: var(--txt2); }
.fvt-row .fvt-val { font-family: var(--fm); min-width: 36px; text-align: right; }
.fvt-pos .fvt-val { color: var(--green3); }
.fvt-neg .fvt-val { color: var(--err); }
.fvt-total { border-top: 1px solid var(--bdr); margin-top: 4px; padding-top: 6px; color: var(--txt); font-weight: 600; }
.fvt-total .fvt-val { color: var(--gold2); }
.fvt-divider { height: 1px; background: var(--bdr); margin: 6px 0; }

.fvc-total { margin-top: 12px; font-size: 14px; color: var(--txt2); }
.fvc-alloc-badge { display: inline-block; margin-top: 12px; padding: 6px 14px; background: var(--surf); border: 1px solid var(--green3); border-radius: 6px; color: var(--green3); font-size: 12px; font-family: var(--fl); text-transform: uppercase; letter-spacing: .08em; }
.feeding-dramatic { margin-top: 16px; padding: 16px; background: var(--surf); border: 1px solid var(--err); border-radius: 8px; color: var(--err); font-size: 14px; text-align: center; }
.feeding-overfeed-warn { font-size: 12px; color: var(--err); margin-top: 8px; }
.feeding-roll-btn { width: 100%; padding: 14px; background: var(--crim); border: 1px solid var(--crim-a70); border-radius: 6px; color: var(--txt-on-dark); font-family: var(--fl); font-size: 14px; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; margin-top: 16px; }
.feeding-roll-btn:hover { filter: brightness(1.2); }
.feeding-st-override { margin-top: 24px; padding: 12px 16px; border: 1px solid var(--gold2); border-radius: 6px; background: rgba(224,196,122,.06); display: flex; align-items: center; gap: 12px; }
.feeding-st-label { font-family: var(--fl); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--gold2); white-space: nowrap; }
.feeding-st-override .feeding-roll-btn { margin-top: 0; flex: 1; }
.feed-st-confirm { margin-top: 20px; padding: 14px 16px; border: 1px solid var(--gold2); border-radius: 6px; background: rgba(224,196,122,.06); }
.feed-st-confirm-lbl { font-family: var(--fl); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--gold2); margin-bottom: 10px; }
.feed-confirm-controls { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.feed-confirm-val { font-family: var(--fl); font-size: 24px; color: var(--accent); min-width: 32px; text-align: center; }
.feed-st-row { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.feed-st-row-lbl { font-family: var(--fl); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--txt2); min-width: 120px; }
.feed-st-row-ctrl { display: flex; align-items: center; gap: 8px; }
.feed-st-row-max { font-family: var(--fl); font-size: 12px; color: var(--txt3); margin-left: 4px; }
.feed-confirm-btn { width: 100%; padding: 12px; background: var(--gold); border: none; border-radius: 6px; color: var(--bg); font-family: var(--fl); font-size: 13px; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; }
.feed-confirm-btn:hover { filter: brightness(1.1); }
.feed-confirm-btn:disabled { opacity: .6; cursor: default; }
.feed-st-vitae-total { font-family: var(--fl); font-size: 13px; color: var(--accent); margin-bottom: 10px; }
.feed-inf-display { margin-top: 12px; font-size: 13px; color: var(--txt2); display: flex; gap: 8px; align-items: center; }
.feed-inf-lbl { color: var(--txt2); }
.feed-inf-val { color: var(--accent); font-family: var(--fl); font-size: 24px; min-width: 32px; text-align: center; }
.feed-inf-row { display: flex; align-items: center; gap: 8px; }
.feed-inf-input { width: 52px; background: var(--surf2); border: 1px solid var(--gold2); border-radius: 4px; color: var(--gold2); font-family: var(--fl); font-size: 13px; text-align: center; padding: 2px 4px; }
.feed-confirmed-record { font-family: var(--fl); font-size: 14px; color: var(--accent); letter-spacing: .04em; margin-bottom: 10px; }
.feed-reconfirm-btn { background: none; border: 1px solid var(--gold2); border-radius: 4px; color: var(--gold2); font-family: var(--fl); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; padding: 4px 10px; cursor: pointer; opacity: .7; }
.feed-reconfirm-btn:hover { opacity: 1; }
.feeding-ready .feeding-warning { font-size: 12px; color: var(--err); margin-top: 8px; }
.feeding-pool-display { display: flex; align-items: center; justify-content: space-between; padding: 14px; background: var(--surf); border: 1px solid var(--bdr); border-radius: 6px; margin: 12px 0; }
.feeding-pool-breakdown { font-size: 13px; color: var(--txt2); }
.feeding-pool-total { font-family: var(--fl); font-size: 22px; color: var(--accent); }
.feeding-method-label { font-size: 14px; color: var(--txt2); }
.feeding-method-desc { font-size: 13px; color: var(--txt3); font-style: italic; margin-top: 4px; margin-bottom: 12px; }
.feeding-rote-badge { display: inline-block; font-size: 11px; font-family: var(--fl); text-transform: uppercase; letter-spacing: .05em; color: var(--accent); border: 1px solid var(--accent); border-radius: 3px; padding: 1px 5px; margin-left: 6px; vertical-align: middle; }
.feeding-again-badge { display: inline-block; font-size: 10px; font-family: var(--fl); letter-spacing: .06em; text-transform: uppercase; background: var(--surf3); border: 1px solid var(--bdr); border-radius: 3px; padding: 1px 5px; color: var(--txt3); margin-left: 4px; vertical-align: middle; }
.feeding-defer-row { display: flex; align-items: center; gap: 10px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--bdr); }
.feeding-defer-or { font-size: 11px; color: var(--txt3); flex-shrink: 0; }
.feeding-defer-btn { font-family: var(--fl); font-size: 12px; background: transparent; border: 1px solid var(--bdr); border-radius: 4px; color: var(--txt3); padding: 5px 12px; cursor: pointer; }
.feeding-defer-btn:hover { border-color: var(--crim); color: var(--crim); }
.feeding-deferred-msg { font-family: var(--fl); font-size: 13px; color: var(--result-pend); padding: 12px 0; }

/* ── Feeding summary (synced from downtime submission) ── */
.feeding-summary {
  margin: 12px 0;
  padding: 10px 14px;
  background: rgba(201,169,98,.06);
  border: 1px solid rgba(201,169,98,.12);
  border-radius: 5px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--txt2, #aaa);
}
.feeding-sum-row { margin-bottom: 4px; }
.feeding-sum-row:last-child { margin-bottom: 0; }
.feeding-sum-label { font-weight: 600; color: var(--accent); }
.feeding-sum-rote { margin-top: 6px; padding-top: 6px; border-top: 1px solid rgba(201,169,98,.1); }
.feeding-sum-sub { margin-top: 3px; padding-left: 14px; font-style: italic; color: var(--txt3, #777); }
.feeding-state-detail { font-size: 14px; color: var(--txt2); margin-bottom: 16px; }
.feeding-no-sub .dt-feed-methods { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-bottom: 20px; }
.feeding-no-sub .dt-feed-card { padding: 14px; background: var(--surf2); border: 1px solid var(--bdr); border-radius: 6px; cursor: pointer; text-align: left; color: var(--txt); }
.feeding-no-sub .dt-feed-card:hover { border-color: var(--bdr2); }
.feeding-no-sub .dt-feed-card.dt-feed-sel { border-color: var(--gold); background: var(--gold-a8); }
.feeding-no-sub .dt-feed-card-name { font-family: var(--fl); font-size: 13px; font-weight: 700; color: var(--txt); letter-spacing: .04em; margin-bottom: 4px; }
.feeding-no-sub .dt-feed-card-desc { font-size: 12px; color: var(--txt3); font-style: italic; }
.feeding-disc-row { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.feeding-disc-row label { font-size: 13px; color: var(--txt2); white-space: nowrap; }

/* ── Regency tab ── */

.regency-wrap { max-width: 560px; margin: 0 auto; }
.regency-title { font-family: var(--fl); font-size: 18px; color: var(--accent); margin-bottom: 8px; }
.regency-meta { font-size: 13px; color: var(--txt3); margin-bottom: 4px; }
.regency-desc { font-size: 13px; color: var(--txt3); margin-bottom: 16px; }
.regency-action { margin-top: 20px; }
.regency-actions { margin-top: 16px; display: flex; align-items: center; gap: 12px; }



/* ══════════════════════════════════════════
   DOWNTIME FORM — DTP-2 + Project result cards
   Moved from player-layout.css — shared between player.html and index.html
   ══════════════════════════════════════════ */

/* ── DTP-2: Project result cards ── */
.story-proj-results {
  padding: 14px 16px 16px;
  border-top: 1px solid var(--bdr);
}
.story-proj-results-head {
  font-family: var(--fl);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 10px;
}
.story-proj-card {
  background: var(--surf3);
  border: 1px solid var(--bdr);
  border-radius: 5px;
  padding: 10px 12px;
  margin-bottom: 8px;
}
.story-proj-card:last-child { margin-bottom: 0; }
.story-proj-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.story-proj-chip {
  font-family: var(--fl);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--txt3);
  background: var(--surf2);
  border: 1px solid var(--bdr);
  border-radius: 3px;
  padding: 1px 5px;
  white-space: nowrap;
}
.story-proj-title {
  font-family: var(--fl);
  font-size: 13px;
  font-weight: 600;
  color: var(--txt);
}
.story-proj-objective {
  font-size: 12px;
  color: var(--txt3);
  margin-bottom: 6px;
}
.story-proj-response {
  font-size: 13px;
  color: var(--txt2);
  line-height: 1.6;
  white-space: pre-wrap;
  margin-bottom: 6px;
}
.story-proj-meta {
  font-size: 11px;
  color: var(--txt3);
  margin-bottom: 4px;
}
.story-proj-roll { color: var(--txt2); margin-left: 4px; }
.story-proj-feedback {
  font-size: 12px;
  color: var(--txt2);
  border-left: 2px solid var(--gold2);
  padding-left: 8px;
  margin-top: 6px;
}
.story-proj-withheld {
  font-size: 12px;
  color: var(--txt3);
  font-style: italic;
}
.story-proj-lbl {
  font-family: var(--fl);
  font-size: 10px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--txt3);
  margin-right: 3px;
}

/* ── Project result cards ── */

.proj-card {
  border: 1px solid var(--bdr);
  border-radius: 6px;
  margin: 12px 16px 20px;
  padding: 14px 16px;
  background: var(--surf2);
}
.proj-card-withheld {
  border-style: dashed;
  padding: 12px 16px;
  opacity: 0.7;
}
.proj-card-header {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 8px;
}
.proj-card-type-chip {
  font-family: var(--fl);
  font-size: 10px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  background: var(--surf3);
  border: 1px solid var(--bdr);
  border-radius: 3px;
  padding: 2px 6px;
  color: var(--txt3);
  flex-shrink: 0;
}
.proj-card-name {
  font-family: var(--fl);
  font-size: 13px;
  font-weight: 600;
  color: var(--txt1);
  letter-spacing: 0.03em;
}
.proj-card-objective {
  font-size: 12px;
  color: var(--txt3);
  font-style: italic;
  margin-bottom: 10px;
}
.proj-card-response { font-size: 14px; color: var(--txt2); line-height: 1.7; }
.proj-card-response p { margin: 0 0 8px; }
.proj-card-response p:last-child { margin-bottom: 0; }
.proj-card-pool {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  font-size: 12px;
}
.proj-card-pool-label {
  font-family: var(--fl);
  font-size: 10px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--txt3);
}
.proj-card-pool-val { color: var(--txt2); }
.proj-card-roll {
  display: inline-block;
  margin-top: 8px;
  font-family: var(--fl);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 3px;
  border: 1px solid var(--bdr);
  background: var(--surf3);
  color: var(--txt2);
}
.proj-card-roll-exc { border-color: var(--gold2); color: var(--gold2); background: transparent; }
.proj-card-roll-fail { border-color: var(--crim); color: var(--crim); background: transparent; }
.proj-card-feedback {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--bdr);
  font-size: 12px;
  color: var(--txt3);
  line-height: 1.5;
}
.proj-card-feedback-label {
  font-family: var(--fl);
  font-size: 10px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  display: block;
  margin-bottom: 3px;
  color: var(--txt3);
}
.proj-card-withheld-msg {
  font-size: 12px;
  color: var(--txt3);
  font-style: italic;
  margin: 6px 0 0;
}

/* ── Story 1.14: Six-section report additions ────────────────────── */
.story-moment-divider {
  border: none;
  border-top: 1px solid var(--bdr);
  margin: 12px 0;
}
.story-rumours-list {
  margin: 0;
  padding-left: 18px;
  font-size: 13px;
  color: var(--txt2);
  line-height: 1.6;
}
.story-rumours-list li { margin-bottom: 4px; }

/* ── DTP-4: Merit summary ledger (player-facing) ─────────────────── */
.merit-summary-section {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--bdr);
}
.merit-summary-head { margin-bottom: 12px; }
.merit-summary-group { margin-bottom: 10px; }
.merit-summary-cat-label {
  font-size: 10px;
  font-family: var(--fl);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--txt3);
  margin-bottom: 4px;
  padding-bottom: 3px;
  border-bottom: 1px solid var(--surf3);
}
.merit-summary-row {
  display: flex;
  gap: 8px;
  padding: 4px 0;
  font-size: 13px;
  line-height: 1.4;
  align-items: baseline;
  border-bottom: 1px solid var(--surf3);
}
.merit-summary-row:last-child { border-bottom: none; }
.merit-summary-merit {
  flex-shrink: 0;
  width: 130px;
  color: var(--txt2);
  font-family: var(--fl);
  font-size: 12px;
}
.merit-summary-action-type {
  flex-shrink: 0;
  width: 90px;
  color: var(--txt3);
  font-size: 11px;
  font-family: var(--fl);
}
.merit-summary-text { color: var(--txt1); flex: 1; }



/* ══════════════════════════════════════════
   DOWNTIME FORM — Downtime two-pane
   Moved from player-layout.css — shared between player.html and index.html
   ══════════════════════════════════════════ */

/* ── Downtime two-pane ── */

/* Generic 50/50 split used by Downtime, Feeding, Ordeals */
.tab-split {
  display: flex;
  height: 100%;
  min-height: 0;
}
.tab-split-left {
  flex: 1;
  min-width: 0;
  border-right: 1px solid var(--bdr);
  overflow-y: auto;
  padding: 16px;
}
.tab-split-right {
  flex: 1;
  min-width: 0;
  overflow-y: auto;
  padding: 16px;
}

/* Downtime form lives inside .reading-pane for layout, but the user's
   reading font-size setting is meant for primer/rules prose only — pin
   the form back to the default so submission boxes stay legible. */
#dt-container.reading-pane { --reading-font-size: 15px; }

/* Downtime keeps using dt-split class names — map to tab-split */
.dt-split { display: flex; height: 100%; min-height: 0; }
.dt-split-left { flex: 1; min-width: 0; border-right: 1px solid var(--bdr); overflow-y: auto; }
.dt-split-right { flex: 1; min-width: 0; overflow-y: auto; }

.dt-hist-panel {
  display: flex;
  flex-direction: column;
  padding: 16px;
}

.dt-hist-title {
  font-family: var(--fl);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--txt-dim);
  margin-bottom: 12px;
}

.dt-hist-entry {
  border: 1px solid var(--bdr);
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 10px;
}

.dt-hist-entry-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--surf2);
  border-bottom: 1px solid var(--bdr);
}

.dt-hist-cycle {
  flex: 1;
  font-family: var(--fl);
  font-size: 13px;
  color: var(--txt);
}

.dt-hist-has-outcome {
  font-size: 11px;
  color: var(--accent);
}

.dt-hist-outcome {
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1.6;
}

.dt-hist-outcome p {
  margin: 0 0 0.5em;
}

.dt-hist-outcome p:last-child { margin-bottom: 0; }

.dt-hist-section { margin-bottom: 8px; }
.dt-hist-section-head {
  font-family: var(--fl);
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 4px;
}

.dt-hist-mech .dt-hist-section-head { color: var(--txt-dim); }

.dt-hist-pre {
  font-family: monospace;
  font-size: 12px;
  white-space: pre-wrap;
  color: var(--txt-dim);
  margin: 0;
}

.dt-hist-loading, .dt-hist-empty { padding: 16px; }



/* ══════════════════════════════════════════
   DOWNTIME FORM — Responsive overrides
   Moved from player-layout.css
   ══════════════════════════════════════════ */

@media (max-width: 900px) {
  .tab-split,
  .dt-split {
    flex-direction: column;
    height: auto;
  }
  .tab-split-left,
  .dt-split-left {
    border-right: none;
    border-bottom: 1px solid var(--bdr);
  }
}

@media (max-width: 600px) {
  .dt-feed-grid-row { flex-wrap: wrap; }
  .dt-feed-grid-terr { flex: 1 1 100%; }
  .dt-feed-grid-options { flex-wrap: wrap; }

  /* Influence spending row: territory label jumps above the +/- buttons */
  .dt-influence-row { flex-wrap: wrap; }
  .dt-influence-terr { width: 100%; }

}

/* ════════════════════════════════════════════════════════════════════
   Form components — DTUI (Downtime Form UX Refactor)
   ════════════════════════════════════════════════════════════════════
   Canonical component vocabulary for the player-facing downtime form.
   Epic: specs/epic-dtui-downtime-form-ux-refactor.md
   UX design spec: specs/ux-design-downtime-form.md
   ════════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════════
   .dt-ticker — pill-ticker for "pick one of few"
   ────────────────────────────────────────────────────────────────────
   Canonical selector for the "pick one of a few labelled options"
   gesture-shape used across the downtime form.

   Use for: 2-5 labelled options where the player picks exactly one.
   Examples: Solo/Joint, Method of Feeding, Attack outcome
   (Destroy/Degrade/Disrupt), Ambience direction (Improve/Degrade),
   Blood Type (Animal/Human/Kindred).

   Do NOT use for:
   - Picking from a roster (large lists) — use .dt-chip-grid instead
   - Multi-select — use checkboxes
   - Free text or numeric input

   HTML structure:
   <fieldset class="dt-ticker">
     <legend class="dt-ticker__legend">Method of Feeding</legend>
     <label class="dt-ticker__pill">
       <input type="radio" name="feed-method" value="kiss">
       <span>The Kiss (subtle)</span>
     </label>
     <label class="dt-ticker__pill">
       <input type="radio" name="feed-method" value="assault">
       <span>The Assault (violent)</span>
     </label>
   </fieldset>

   Accessibility: <fieldset> is natively a radiogroup; <legend> names the group.
   For a hidden label, use aria-label on the fieldset and omit the visible legend.

   Adopted by stories: dtui-5, dtui-9, dtui-10, dtui-23, dtui-24, dtui-25
   ════════════════════════════════════════════════════════════════════ */

.dt-ticker {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0;
  margin: 0;
  border: 0;
}

.dt-ticker__legend {
  flex: 0 0 100%;
  display: block;
  font-family: var(--fl);
  font-size: 14px;
  font-weight: 600;
  color: var(--txt);
  margin-bottom: 6px;
  padding: 0;
}

.dt-ticker__pill {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 14px;
  background: var(--surf2);
  border: 1px solid var(--bdr);
  color: var(--txt2);
  border-radius: 4px;
  font-family: var(--ft);
  font-size: 13px;
  cursor: pointer;
  user-select: none;
}

.dt-ticker__pill:hover {
  border-color: var(--gold2);
  color: var(--gold2);
}

.dt-ticker__pill:has(input:checked) {
  background: var(--gold2);
  border-color: var(--gold2);
  color: var(--bg);
  font-weight: 600;
}

.dt-ticker__pill:has(input:focus-visible),
.dt-ticker__pill:focus-within {
  outline: 2px solid var(--gold2);
  outline-offset: 2px;
}

.dt-ticker__pill:has(input:disabled),
.dt-ticker__pill[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
  color: var(--txt3);
}

.dt-ticker__pill:has(input:disabled):hover,
.dt-ticker__pill[aria-disabled="true"]:hover {
  border-color: var(--bdr);
  color: var(--txt3);
}

/* Hide the underlying radio input visually while keeping it accessible */
.dt-ticker__pill input[type="radio"] {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Transitions skipped when reduced motion is requested */
@media (prefers-reduced-motion: no-preference) {
  .dt-ticker__pill {
    transition: background 0.15s, border-color 0.15s, color 0.15s;
  }
}

.dt-target-other-input {
  margin-top: 8px;
}

/* Secondary dice pool — visibility toggled by the Single/Dual ticker. */
.dt-secondary-pool-wrap[hidden] { display: none; }

/* Support Assets panel — chip grid for picking allies/retainers as project
 * support, gated by the Solo / Support Assets ticker on the project slot. */
.dt-support-assets-panel { margin-top: 12px; }
.dt-support-assets-panel[hidden] { display: none; }
.dt-support-assets-panel .dt-joint-panel__heading { margin-top: 0; }

/* Consistent gap between any target-type ticker and the content below it,
 * regardless of whether the picked mode renders chips, pills, or a textarea. */
.dt-ticker + .dt-chip-grid,
.dt-ticker + .dt-target-other-input,
.dt-ticker + select,
.dt-ticker + .qf-select { margin-top: 8px; }

/* Target zone: normalise the gap between the "Target" label and the first
 * piece of content below it. Some actions render a Character/Territory/Other
 * ticker first, others go straight to a chip grid. We want the visual gap
 * to be 8px in both cases — independent of the qf-label default margin. */
.dt-target-zone > .qf-label { margin-bottom: 0; }
.dt-target-zone > .qf-label + * { margin-top: 8px; }

/* ════════════════════════════════════════════════════════════════════
   .dt-chip-grid + .dt-chip — chip grid for "pick from a roster"
   ────────────────────────────────────────────────────────────────────
   Canonical components for the "pick from a roster of 5-30 entities"
   gesture-shape used across the downtime form.

   Use for: targeting (Character/Territory chips), Joint invitees,
   sphere-merit collaborators, NPC correspondents, Maintenance items,
   Court Acknowledge Peers.

   Do NOT use for:
   - Picking one of a few (2-5 options) — use .dt-ticker instead
   - Multi-select where order matters or chips are draggable
   - Hierarchical or nested selection

   HTML structure:
   <div class="dt-chip-grid" role="group" aria-labelledby="my-grid-label">
     <h4 id="my-grid-label">Players</h4>
     <button class="dt-chip" type="button" data-id="alice">Alice Vunder</button>
     <button class="dt-chip dt-chip--selected" type="button" data-id="bob">
       Bob Smith
       <span class="dt-chip__suffix">+3</span>
     </button>
     <button class="dt-chip" type="button" disabled
             aria-disabled="true" title="No free projects this cycle">
       Charlie Doe
     </button>
   </div>

   Three variants (consumer-wired in JS, not CSS-enforced):
   - single-select          — exactly one selected; clicking another deselects
   - multi-select           — any number selected; clicking toggles each
   - single-select-required — single-select but cannot deselect to zero

   ARIA: parent role="group" + aria-labelledby; chip role="button"|"checkbox"|"radio"
   per variant. Consumers set the ARIA roles and aria-checked in JS.

   Adopted by stories: dtui-8, dtui-11, dtui-13, dtui-14, dtui-16,
   dtui-20, dtui-21, dtui-23
   ════════════════════════════════════════════════════════════════════ */

.dt-chip-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: stretch;
  margin-top: 4px;
}

.dt-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: var(--surf2);
  border: 1px solid var(--bdr);
  color: var(--txt1);
  border-radius: 5px;
  font-family: var(--ft);
  font-size: 13px;
  cursor: pointer;
  user-select: none;
  text-align: left;
  min-height: 32px;
}

.dt-chip:hover {
  border-color: var(--gold2);
  background: var(--surf1);
}

.dt-chip--selected {
  border-color: var(--gold2);
  background: var(--gold2);
  color: var(--bg);
  font-weight: 600;
}

.dt-chip--selected:hover {
  background: var(--gold);
  border-color: var(--gold);
}

.dt-chip:focus-visible {
  outline: 2px solid var(--gold2);
  outline-offset: 2px;
}

.dt-chip:disabled,
.dt-chip[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
  color: var(--txt3);
}

.dt-chip:disabled:hover,
.dt-chip[aria-disabled="true"]:hover {
  border-color: var(--bdr);
  background: var(--surf2);
}

.dt-chip--disabled {
  opacity: 0.35;
  cursor: not-allowed;
  color: var(--txt3);
  border-color: var(--bdr);
  pointer-events: none;
}

/* Optional state suffix inside a chip (e.g. "+3", "●●●") */
.dt-chip__suffix {
  font-size: 11px;
  color: var(--txt3);
  margin-left: 2px;
  font-family: var(--fl);
  letter-spacing: .04em;
}

.dt-chip--selected .dt-chip__suffix {
  color: var(--bg);
}

/* Transitions skipped when reduced motion is requested */
@media (prefers-reduced-motion: no-preference) {
  .dt-chip {
    transition: background 0.15s, border-color 0.15s, color 0.15s;
  }
}

/* ════════════════════════════════════════════════════════════════════
   .dt-action-desc — italic copy block under action-type dropdown
   ────────────────────────────────────────────────────────────────────
   Read-only descriptive copy that appears when a player picks an
   action type. Confirms what the action does in calibrated language
   without forcing the player to hunt for help text.

   Distinct from .qf-desc (general italic helper text):
   - .dt-action-desc fades in/out when content changes
   - .dt-action-desc has aria-live="polite" for screen reader announce
   - .dt-action-desc is reserved for action-type explanations
   - .qf-desc remains the canonical general helper text

   HTML structure:
   <p class="dt-action-desc" aria-live="polite">
     You are attempting to destroy, ruin, or harm a specific target...
   </p>

   Used by:
   - dtui-4 (action-block shell wires the element)
   - dtui-6 (Personal Project per-action description copy)
   - dtui-15 (Allies per-action description copy)
   ════════════════════════════════════════════════════════════════════ */

.dt-action-desc {
  margin: 8px 0 16px;
  padding: 10px 12px;
  background: var(--gold2-a12);
  border-left: 2px solid var(--gold2);
  border-radius: 0 3px 3px 0;
  font-family: var(--ft);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--txt);
}
.dt-action-desc strong { color: var(--gold2); }

.dt-action-desc:empty {
  display: none;
}

/* Fade-in / fade-on-change animation. Skipped under reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  .dt-action-desc {
    animation: dt-action-desc-fade-in 200ms ease-in;
  }

  /* Adding .dt-action-desc--swapping briefly during text replacement
     retriggers the animation for a smooth content-swap fade. */
  .dt-action-desc.dt-action-desc--swapping {
    animation: dt-action-desc-fade-in 200ms ease-in;
  }
}

@keyframes dt-action-desc-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ════════════════════════════════════════════════════════════════════
   .dt-action-block — stable shell container for project/merit-action fields
   ════════════════════════════════════════════════════════════════════ */
.dt-action-block {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Downtime/feeding parchment theme weight floor */
html:not([data-theme="dark"]) .feeding-roll-btn,
html:not([data-theme="dark"]) .feeding-confirmed-head,
html:not([data-theme="dark"]) .feeding-rote-badge,
html:not([data-theme="dark"]) .fvc-label,
html:not([data-theme="dark"]) .fvc-alloc-badge,
html:not([data-theme="dark"]) .story-section-head,
html:not([data-theme="dark"]) .story-cycle-label,
html:not([data-theme="dark"]) .feeding-title,
html:not([data-theme="dark"]) .regency-title,
html:not([data-theme="dark"]) .influence-title,
html:not([data-theme="dark"]) .char-picker__pill { font-weight: 600; }

/* ════════════════════════════════════════════════════════════════════
   .dt-mode-selector — Minimal/Advanced toggle (ADR-003 §Q1, story dt-form.17)
   ════════════════════════════════════════════════════════════════════ */
.dt-mode-selector {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin: 0 0 12px;
  padding: 8px 10px;
  background: var(--surf2);
  border: 1px solid var(--bdr2);
  border-radius: 4px;
}

.dt-mode-pill {
  appearance: none;
  border: 1px solid var(--bdr2);
  background: var(--surf);
  color: var(--txt);
  padding: 4px 12px;
  border-radius: 999px;
  font-family: var(--fl);
  font-size: 0.9em;
  font-weight: 600;
  cursor: pointer;
}

.dt-mode-pill:hover {
  border-color: var(--gold);
}

.dt-mode-pill--active {
  background: var(--gold-a15);
  border-color: var(--gold);
  color: var(--gold2);
}

.dt-mode-desc {
  flex: 1 1 200px;
  font-family: var(--fl);
  font-size: 0.85em;
  color: var(--txt3);
}

/* ════════════════════════════════════════════════════════════════════
   .dt-min-banner — below-minimum-complete banner (ADR-003 §Q3, dt-form.17)
   ════════════════════════════════════════════════════════════════════ */
.dt-min-banner {
  margin: 0 0 14px;
  padding: 10px 14px;
  background: var(--crim-a15, var(--gold-a15));
  border: 1px solid var(--crim2, var(--gold));
  border-left: 4px solid var(--crim, var(--gold));
  border-radius: 4px;
  color: var(--txt);
}

.dt-min-banner__lead {
  margin: 0 0 6px;
  font-family: var(--fl);
  font-size: 0.95em;
}

.dt-min-banner__list {
  margin: 0;
  padding-left: 20px;
  font-family: var(--fl);
  font-size: 0.9em;
  color: var(--txt2);
}

.dt-min-banner__list li {
  margin: 2px 0;
}

/* ════════════════════════════════════════════════════════════════════
   .dt-xp-on-hold — XP-Available annotation (ADR-003 §Q3, dt-form.17)
   ════════════════════════════════════════════════════════════════════ */
.dt-xp-on-hold {
  margin-left: 6px;
  font-family: var(--fl);
  font-size: 0.78em;
  font-style: italic;
  color: var(--crim, var(--txt3));
  white-space: nowrap;
}

/* dt-form.17: negative xpLeft treatment in player-facing XP panels. */
.dt-xp-deficit {
  color: var(--crim, #b00020);
  font-weight: 700;
}

.dt-xp-deficit[title] {
  cursor: help;
  text-decoration: underline dotted var(--crim, #b00020);
  text-underline-offset: 2px;
}

/* dt-form.19: influence budget label tooltip — informational, gold accent */
.dt-influence-budget-label[title] {
  cursor: help;
  text-decoration: underline dotted var(--gold2, #E0C47A);
  text-underline-offset: 2px;
}

/* ════════════════════════════════════════════════════════════════════
   .dt-amb-table — Ambience row-table (ADR-003 §Implementation Plan,
   story dt-form.25). Single-target by design: at most one row can
   hold a selection at any time per action slot.
   ════════════════════════════════════════════════════════════════════ */
.dt-amb-table {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 6px;
}

.dt-amb-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: var(--surf2);
  border: 1px solid var(--bdr);
  border-radius: 4px;
}

.dt-amb-row-name {
  font-family: var(--fl);
  font-size: 0.95em;
  color: var(--txt);
}

.dt-amb-arrow {
  appearance: none;
  border: 1px solid var(--bdr2);
  border-radius: 999px;
  background: var(--surf);
  color: var(--txt2);
  width: 32px;
  height: 32px;
  font-size: 1em;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.dt-amb-arrow:hover {
  border-color: var(--gold);
}

.dt-amb-arrow--down {
  color: var(--crim, #b00020);
}

.dt-amb-arrow--down.dt-amb-arrow--on {
  background: var(--crim, #b00020);
  color: var(--txt-on-dark, #fff);
  border-color: var(--crim, #b00020);
}

.dt-amb-arrow--up {
  color: var(--green, #2a8a3a);
}

.dt-amb-arrow--up.dt-amb-arrow--on {
  background: var(--green, #2a8a3a);
  color: var(--txt-on-dark, #fff);
  border-color: var(--green, #2a8a3a);
}

/* ════════════════════════════════════════════════════════════════════
   .dt-min-toast — MINIMAL auto-submit confirmation (ADR-003 §Q5, dt-form.31)
   ════════════════════════════════════════════════════════════════════ */
.dt-min-toast {
  margin: 0 0 14px;
  padding: 10px 14px;
  background: var(--gold-a10);
  border: 1px solid var(--gold-a30);
  border-left: 4px solid var(--gold);
  border-radius: 4px;
  color: var(--txt);
}

.dt-min-toast__lead {
  margin: 0;
  font-family: var(--fl);
  font-size: 0.95em;
}

/* ════════════════════════════════════════════════════════════════════
   .npcr-modal — themed modal pattern (issue #93)
   Promoted from admin-layout.css so non-admin surfaces (player.html, suite)
   that reference these classes (relationships-tab.js, dt-form.31 modal,
   etc.) pick up the styling. Verbatim move; rule bodies unchanged.
   Used by: relationships-tab.js, admin/npc-register.js, editor/edit.js.
   ════════════════════════════════════════════════════════════════════ */
/* Themed modal for resolve-note entry (replaces prompt()). */
.npcr-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.npcr-modal {
  background: var(--surf2, #1a1814);
  border: 1px solid var(--accent, #E0C47A);
  border-radius: 4px;
  min-width: 360px;
  max-width: 520px;
  width: 90%;
  padding: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

.npcr-modal-title {
  font-family: 'Cinzel', serif;
  font-size: 18px;
  color: var(--accent, #E0C47A);
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border, rgba(255, 255, 255, 0.1));
}

.npcr-modal-body {
  margin-bottom: 12px;
}

.npcr-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

/* ════════════════════════════════════════════════════════════════════
   .dt-modal — Submit Final modal (ADR-003 §Q5, story dt-form.31)
   Mirrors the .npcr-modal pattern above (issue #93 promoted both rule
   sets into this file). Future cleanup may consolidate these into one
   shared modal class set; tracked separately.
   ════════════════════════════════════════════════════════════════════ */
.dt-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 16px;
}

.dt-modal {
  background: var(--surf2);
  border: 1px solid var(--gold);
  border-radius: 4px;
  min-width: 320px;
  max-width: 560px;
  width: 100%;
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  padding: 18px 20px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  outline: none;
}

.dt-modal-title {
  font-family: var(--fh);
  font-size: 1.2em;
  color: var(--gold2);
  margin: 0 0 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--bdr);
}

.dt-modal-subhead {
  font-family: var(--fh);
  font-size: 1em;
  color: var(--gold);
  margin: 14px 0 6px;
}

.dt-modal-body {
  margin-bottom: 14px;
  font-family: var(--fl);
  color: var(--txt);
}

.dt-modal-summary-list {
  margin: 4px 0 0;
  padding-left: 22px;
  font-family: var(--fl);
  font-size: 0.95em;
  color: var(--txt2);
}

.dt-modal-summary-list li {
  margin: 2px 0;
}

.dt-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.qf-btn-submit-final {
  background: var(--gold);
  color: var(--txt-on-gold, var(--bg));
  border: 1px solid var(--gold);
}

.qf-btn-submit-final:hover {
  background: var(--gold2);
  border-color: var(--gold2);
}

/* ════════════════════════════════════════════════════════════════════
   .char-picker — universal character picker (ADR-003 §Q6, story dt-form.16)
   Form-local consumption: downtime-form.js + regency-tab.js
   ════════════════════════════════════════════════════════════════════ */
.char-picker {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}

.char-picker__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 0;
}

.char-picker__chip,
.char-picker__pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border: 1px solid var(--bdr2);
  border-radius: 12px;
  background: var(--surf2);
  color: var(--txt);
  font-family: var(--fl);
  font-size: 0.9em;
  line-height: 1.2;
}

.char-picker__pill {
  background: var(--gold-a10);
  border-color: var(--gold-a30);
}

.char-picker__chip-remove,
.char-picker__pill-clear {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--txt2);
  cursor: pointer;
  padding: 0 4px;
  font-size: 1.1em;
  line-height: 1;
}

.char-picker__chip-remove:hover,
.char-picker__pill-clear:hover {
  color: var(--gold);
}

.char-picker__combo {
  position: relative;
}

.char-picker__input {
  width: 100%;
  box-sizing: border-box;
  padding: 6px 10px;
  border: 1px solid var(--bdr2);
  border-radius: 4px;
  background: var(--surf);
  color: var(--txt);
  font-family: var(--fl);
  font-size: 0.95em;
}

.char-picker__input:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 2px var(--gold-a20);
}

.char-picker__listbox {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 30;
  margin: 2px 0 0;
  padding: 0;
  list-style: none;
  max-height: 220px;
  overflow-y: auto;
  background: var(--surf);
  border: 1px solid var(--bdr2);
  border-radius: 4px;
  box-shadow: 0 4px 12px var(--gold-a15);
}

.char-picker__option {
  padding: 6px 10px;
  cursor: pointer;
  color: var(--txt);
  font-family: var(--fl);
  font-size: 0.95em;
}

.char-picker__option:hover,
.char-picker__option--active {
  background: var(--gold-a12);
  color: var(--txt);
}

.char-picker__empty {
  padding: 8px 10px;
  color: var(--txt3);
  font-family: var(--fl);
  font-size: 0.9em;
  font-style: italic;
}