/* V5: the character's own sheet panels (js/char-sheet.js) */
.cs-sec{border-top:1px solid var(--border); padding:8px 0;}
.cs-sec:first-child{border-top:none; padding-top:0;}
.cs-sec > summary{cursor:pointer; font-family:var(--font-display); color:var(--sea); font-size:0.95rem; padding:2px 0; list-style:none;}
.cs-sec > summary::-webkit-details-marker{display:none;}
.cs-sec > summary::before{content:'▸'; display:inline-block; width:1em; transition:transform .15s;}
.cs-sec[open] > summary::before{transform:rotate(90deg);}
.cs-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:8px 12px; margin-top:8px;}
.cs-grid.cs-scores{grid-template-columns:repeat(auto-fill, minmax(110px, 1fr));}
.cs-field{display:flex; flex-direction:column; gap:3px; font-size:0.72rem; text-transform:uppercase; letter-spacing:0.05em; color:var(--ink-dim);}
.cs-field.cs-wide{grid-column:1 / -1;}
.cs-field input, .cs-field select, .cs-field textarea, .cs-add input, .gold-row input{
  background:var(--panel2); border:1px solid var(--border); color:var(--ink); border-radius:4px; padding:6px 8px;
  font-size:0.9rem; font-family:var(--font-body); text-transform:none; letter-spacing:normal; width:100%; box-sizing:border-box;}
.cs-field textarea{resize:vertical; line-height:1.4;}
.cs-sub{font-size:0.7rem; text-transform:uppercase; letter-spacing:0.06em; color:var(--sea); margin:12px 0 6px;}
.cs-checks{display:flex; flex-wrap:wrap; gap:6px 16px; font-size:0.85rem;}
.cs-check{display:flex; align-items:center; gap:6px; cursor:pointer;}
.cs-skills{display:grid; grid-template-columns:repeat(auto-fill, minmax(230px, 1fr)); gap:4px 16px;}
.cs-skill{display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:0.85rem;}
.cs-skill small{color:var(--ink-dim);}
.cs-skill select{background:var(--panel2); border:1px solid var(--border); color:var(--ink); border-radius:4px; padding:3px 6px; font-size:0.8rem;}
.cs-save-msg{font-size:0.75rem; color:var(--green); margin-left:auto;}
.cs-save-msg.err{color:var(--danger);}
.cs-none{font-size:0.8rem; color:var(--ink-dim); font-style:italic; margin:4px 0;}
/* Chip lists (proficiencies, languages) */
.cs-chips{display:flex; flex-wrap:wrap; gap:6px;}
.cs-chip{display:inline-flex; align-items:center; gap:4px; padding:3px 4px 3px 10px; border-radius:999px; background:var(--panel2); border:1px solid var(--border); font-size:0.8rem;}
.cs-chip button{background:none; border:none; color:var(--ink-dim); padding:0 4px; font-size:1rem; line-height:1; box-shadow:none; cursor:pointer;}
.cs-chip button:hover{color:var(--danger); background:none;}
.cs-chip-auto{padding-right:10px; border-style:dashed;}
.cs-chip-auto small{color:var(--ink-dim); font-size:0.7rem; margin-left:2px;}
.cs-add{display:flex; gap:6px; margin-top:6px; max-width:420px;}
.cs-add .chip-btn{background:var(--panel2); border:1px solid var(--border); border-radius:999px; color:var(--ink); padding:4px 14px; font-size:0.8rem;}
/* Gold */
.gold-bal{font-family:var(--font-display); font-size:1.4rem; color:var(--sea); margin-left:auto;}
.gold-row{display:flex; flex-wrap:wrap; gap:8px; align-items:center;}
.gold-row #goldAmt{width:96px; flex:0 0 auto;}
.gold-row #goldNote{flex:1 1 220px;}
.gold-row button{min-width:40px; font-size:1.1rem; font-weight:700;}
.gold-row button:disabled{opacity:0.45; cursor:not-allowed;}
table.ledger{width:100%; border-collapse:collapse; margin-top:12px; font-size:0.85rem;}
table.ledger th{text-align:left; font-size:0.68rem; text-transform:uppercase; letter-spacing:0.05em; color:var(--ink-dim); border-bottom:1px solid var(--border); padding:4px 6px;}
table.ledger td{padding:5px 6px; border-bottom:1px solid var(--border); vertical-align:top;}
table.ledger td.pos{color:var(--green); white-space:nowrap;}
table.ledger td.neg{color:var(--danger); white-space:nowrap;}
table.ledger td:last-child, table.ledger th:last-child{text-align:right;}
/* Notes */
/* Inventory and Equipment (js/inventory.js) */
.inv-add{max-width:none;}
.inv-add #invName{flex:1 1 260px;}
.inv-add #invQty{width:70px; flex:0 0 auto;}
table.inv{width:100%; border-collapse:collapse; margin-top:10px; font-size:0.84rem;}
table.inv th{text-align:left; font-size:0.66rem; text-transform:uppercase; letter-spacing:0.05em; color:var(--ink-dim); border-bottom:1px solid var(--border); padding:4px 6px;}
table.inv td{padding:6px; border-bottom:1px solid var(--border); vertical-align:top;}
table.inv input{background:var(--panel2); border:1px solid var(--border); color:var(--ink); border-radius:4px; padding:4px 6px; font-size:0.82rem; width:100%; box-sizing:border-box;}
table.inv input.inv-qty{width:58px;}
table.inv input[type=checkbox]{width:auto;}
.inv-eq{display:flex; flex-wrap:wrap; gap:4px; margin-top:4px;}
.inv-eq .chip-btn, .item-form .chip-btn, .fx-form .chip-btn{background:var(--panel2); border:1px solid var(--border); border-radius:999px; color:var(--ink); padding:2px 10px; font-size:0.74rem;}
.inv-eq .chip-btn.on{border-color:var(--sea); color:var(--sea);}
.inv-custom{font-size:0.66rem; color:var(--sea); text-transform:uppercase; letter-spacing:0.05em;}
.inv-attune{font-size:0.72rem; color:var(--ink-dim); display:inline-flex; gap:3px; align-items:center;}
.inv-fx{font-size:0.75rem; color:var(--sea); margin-top:3px;}
.inv-defnote{font-size:0.75rem; color:var(--ink-dim); margin-top:3px;}
.item-form, .fx-form{border:1px solid var(--sea-dim); border-radius:6px; padding:10px 12px; margin:10px 0; background:var(--panel2);}
.fx-form{background:var(--panel);}
.item-form .cs-field input, .item-form .cs-field select, .item-form .cs-field textarea{background:var(--panel);}
.eq-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(180px, 1fr)); gap:4px 16px;}
.eq-slot{display:flex; justify-content:space-between; gap:8px; padding:5px 0; border-bottom:1px solid var(--border); font-size:0.88rem;}
.eq-label{color:var(--ink-dim); font-size:0.78rem;}
.eq-ac{margin:10px 0 4px; font-size:0.9rem;}
.eq-notes{margin:4px 0 6px 18px; padding:0; font-size:0.8rem; color:var(--ink-dim);}
@media (max-width:640px){ table.inv thead{display:none;} table.inv tr{display:block; border-bottom:1px solid var(--border); padding:6px 0;} table.inv td{display:block; border:none; padding:2px 0;} }
.cs-granted{font-size:0.84rem; padding:6px 10px; border-left:3px solid var(--sea-dim); background:var(--panel2); border-radius:4px; margin-bottom:6px;}
.cs-granted span{color:var(--sea); font-size:0.72rem; text-transform:uppercase; letter-spacing:0.05em;}
.cs-granted .cs-none{margin:4px 0 0;}
select.build-pick{background:var(--panel2); border:1px solid var(--border); color:var(--ink); border-radius:4px; padding:4px 6px; font-size:0.8rem; margin:2px 4px 2px 0;}
/* Tabs (js/tabs.js) */
.tk-tabs{display:flex; flex-wrap:wrap; gap:4px; margin:-6px 0 16px; border-bottom:1px solid var(--border);}
.tk-tab{background:none; border:1px solid transparent; border-bottom:none; border-radius:8px 8px 0 0; padding:8px 18px; margin-bottom:-1px;
  color:var(--ink-dim); font-family:var(--font-display); font-size:0.95rem; box-shadow:none; text-shadow:none; cursor:pointer; touch-action:none; user-select:none;}
.tk-tab:hover{background:none; color:var(--ink);}
.tk-tab[aria-selected="true"]{color:var(--sea); background:var(--panel); border-color:var(--border); border-bottom:1px solid var(--panel);}
body.tabs-dragging .tk-tab{cursor:grabbing;}
.tk-tab.tab-slot{background:transparent; border:2px dashed var(--sea); color:transparent;}
.tab-held{position:fixed; z-index:600; margin:0; pointer-events:none; color:var(--sea); background:var(--panel); border:2px solid var(--sea) !important; border-radius:8px; box-shadow:0 12px 30px rgba(0,0,0,0.5); transform:rotate(-1.5deg) scale(1.05); opacity:0.97;}
@media (prefers-reduced-motion: reduce){ .tab-held{transform:none;} }
body.tabs-dragging{user-select:none;}
.wrap > .panel.tab-off{display:none !important;}
/* Edit Character window */
.cs-modal{position:fixed; inset:0; z-index:120; background:var(--backdrop); display:flex; align-items:flex-start; justify-content:center; padding:5vh 16px; overflow-y:auto;}
.cs-modal[hidden]{display:none;}
.cs-modal-box{background:var(--panel); border:1px solid var(--border); border-radius:10px; padding:16px 18px; width:min(760px, 100%); box-shadow:0 16px 40px rgba(0,0,0,0.55);}
.cs-modal-head{display:flex; align-items:center; gap:12px; margin-bottom:6px;}
.cs-modal-head h2{margin:0; color:var(--sea); font-size:1.15rem;}
.cs-modal-head .roll-close{margin-left:auto;}
.cs-modal-head .cs-save-msg{margin-left:0;}
/* Equipment in the Inventory tab */
.gear-group{border-top:1px solid var(--border); padding:8px 0;}
.gear-group:first-child{border-top:none; padding-top:0;}
.gear-row{display:grid; grid-template-columns:130px 1fr; gap:10px; align-items:start; padding:4px 0;}
.gear-row select{background:var(--panel2); border:1px solid var(--border); color:var(--ink); border-radius:4px; padding:5px 8px; font-size:0.88rem; width:min(320px, 100%);}
.gear-row select:disabled{opacity:0.45;}
.gear-off .gear-hand{opacity:0.5;}
.gear-hand{font-size:0.85rem; color:var(--ink-dim); padding-top:6px;}
.gear-hand small{font-size:0.7rem;}
.gear-stats{font-size:0.84rem; margin-top:4px;}
.gear-note{font-size:0.76rem; color:var(--ink-dim); margin-top:3px;}
.gear-grip{margin-top:4px; font-size:0.8rem;}
.gear-profs{margin-top:4px;}
.inv-tag{font-size:0.72rem; color:var(--sea); margin-top:3px;}
@media (max-width:560px){ .gear-row{grid-template-columns:1fr; gap:2px;} .gear-hand{padding-top:0;} }
/* Gold total in Resources (Overview) */
button.res-gold{display:inline-flex; align-items:center; gap:5px; margin-left:8px; padding:2px 10px 2px 4px; border-radius:999px; background:var(--panel2);
  border:1px solid var(--border); color:var(--ink); font-size:0.9rem; font-weight:700; box-shadow:none; text-shadow:none; cursor:pointer; vertical-align:middle;}
button.res-gold:hover{border-color:#c8962e; background:var(--panel2);}
button.res-gold small{font-weight:400; color:var(--ink-dim); font-size:0.75rem;}
.coin-gp{width:20px; height:20px; filter:drop-shadow(0 1px 1px rgba(0,0,0,0.4));}
.gear-grip{display:flex; flex-wrap:wrap; gap:4px 14px; margin-top:4px; font-size:0.82rem;}
.gear-grip label{display:inline-flex; align-items:center; gap:4px; cursor:pointer;}
table.inv tr.inv-group th{text-align:left; padding:10px 6px 4px; font-family:var(--font-display); font-size:0.85rem; color:var(--sea); text-transform:none; letter-spacing:0.02em; border-bottom:1px solid var(--sea-dim);}
#invTable h3.inv-part{margin:16px 0 2px; font-family:var(--font-display); font-size:1.05rem; color:var(--sea);}
#invTable h3.inv-part:first-child{margin-top:4px;}
#invTable .inv-part-note{margin:0 0 6px;}
@media (max-width:640px){ table.inv tr.inv-group{display:block;} table.inv tr.inv-group th{display:block;} }
/* Resources header: Inspiration and gold stand out on their own; resting sits at the bottom */
.res-badges{display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-left:auto;}
.res-badges button.insp-btn, .res-badges button.res-gold{margin-left:0; font-size:0.95rem; padding:4px 12px;}
.res-badges button.res-gold{padding:3px 12px 3px 5px;}
.res-badges .coin-gp{width:22px; height:22px;}
.rest-row{display:flex; align-items:center; gap:12px; margin-top:12px; padding-top:10px; border-top:1px solid var(--border);}
.rest-row + .rest-msg:not(:empty){margin:8px 0 0;}
.spell-source{font-size:0.75rem; color:var(--ink-dim); margin:14px 0 0; text-align:center;}
.item-form .chip-btn.item-del{border-color:var(--danger); color:var(--danger); margin-left:auto;}
.ledger-del{background:none; border:none; color:var(--ink-dim); font-size:1rem; padding:0 4px; box-shadow:none; cursor:pointer;} .ledger-del:hover{color:var(--danger); background:none;} .ledger-del.sure{color:var(--danger); font-size:0.75rem;}
/* Details: level up and down, and the XP line under Experience points */
.cs-level{display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:0 0 12px;}
.cs-level > span:first-child{font-family:var(--font-display); font-size:1.05rem; margin-right:4px;}
.cs-level .cs-none{flex-basis:100%;}
.cs-xp{display:block; color:var(--ink-dim); font-size:0.75rem; margin-top:4px;}
/* Manual Roll: a small button at the far right of the tabs row, and its roller (js/manual-roll.js) */
.tk-tabs .tk-manual{margin:0 0 4px auto; align-self:center; background:none; border:1px solid var(--border); border-radius:999px; padding:4px 12px; font-size:0.78rem; color:var(--ink-dim); box-shadow:none; cursor:pointer;}
.tk-tabs .tk-manual:hover, .tk-tabs .tk-manual[aria-expanded="true"]{color:var(--sea); border-color:var(--sea-dim); background:none;}
.manual-roll{position:absolute; z-index:500; background:var(--panel); border:1px solid var(--sea-dim); border-radius:10px; padding:10px 12px; box-shadow:0 10px 30px rgba(0,0,0,0.45);}
.manual-roll .mr-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; font-family:var(--font-display);}
.manual-roll .mr-close{background:none; border:none; box-shadow:none; color:var(--ink-dim); font-size:1.2rem; padding:0 4px; cursor:pointer;}
.manual-roll .mr-dice{display:flex; flex-wrap:wrap; gap:4px; margin-bottom:8px;}
.manual-roll .roll-edit{width:100%;}
.manual-roll .mr-hint{margin:6px 0 0; color:var(--ink-dim); font-size:0.72rem;}
/* Phones: panel titles stay on one line; Resources' Inspiration and gold sit in one small row;
   a folded panel shows only its title (no "Select all") */
@media (max-width: 600px){
  .panel-head{flex-wrap:wrap; align-items:center; row-gap:6px;}
  .panel-head > h2{white-space:nowrap; font-size:1.15rem;}
  .res-badges{flex-wrap:nowrap; gap:6px; margin-left:0;}
  .res-badges button.insp-btn, .res-badges button.res-gold{font-size:0.82rem; padding:3px 10px;}
  .res-badges button.res-gold{padding:2px 10px 2px 4px;}
  .res-badges .coin-gp{width:18px; height:18px;}
  .wrap > .panel.panel-collapsed > .panel-head > :not(.panel-fold):not(.panel-fold-title):not(.panel-grip):not(.res-badges):not(.status-pins){display:none;}
}
/* Gold ledger: ✎ edit and × remove on each line; a line being edited */
table.ledger td.ledger-actions{white-space:nowrap;}
tr.ledger-edit td{vertical-align:middle;}
tr.ledger-edit select, tr.ledger-edit input{background:var(--panel2); border:1px solid var(--border); color:var(--ink); border-radius:4px; padding:3px 6px; font:inherit;}
tr.ledger-edit #geAmt{width:6em; margin-left:4px;}
tr.ledger-edit #geNote{width:100%; box-sizing:border-box;}
tr.ledger-edit .chip-btn{margin-right:6px;}