:root{
  --bg:#f7f8fa;--panel:#fff;--text:#25282d;--muted:#828994;--line:#e5e7eb;
  --soft:#f3f5f7;--accent:#4295ef;--accent-soft:#eaf4ff;--danger:#c94b4b;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:"Kaisei Tokumin","Yu Mincho","Hiragino Mincho ProN",serif;color:var(--text);background:var(--bg)}
button,input,textarea,select{font:inherit}
button{border:1px solid var(--line);background:#fff;border-radius:8px;padding:8px 13px;cursor:pointer;color:var(--text)}
button:hover{border-color:#adb6c0;background:#fafbfc}.primary{background:#5f6368;color:#fff;border-color:#5f6368}.danger{color:var(--danger)}
.app-header{height:64px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;padding:0 4vw;gap:36px;position:sticky;top:0;z-index:20}
.brand{font-weight:700}.app-header nav{display:flex;gap:7px}.app-header nav button{border:0;background:transparent}
main{max-width:1380px;margin:28px auto;padding:0 26px}.muted{color:var(--muted);font-size:.88rem}.spacer{flex:1}
.toolbar{display:flex;align-items:center;gap:10px;margin-bottom:18px}.toolbar h1{margin:0}.card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:20px}.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px}
input,textarea,select{width:100%;border:1px solid #d9dde2;border-radius:7px;padding:9px 10px;background:#fff;color:var(--text)}textarea{min-height:110px;resize:vertical}label{display:block;margin:10px 0;font-size:.9rem}
dialog{border:0;border-radius:14px;width:min(820px,94vw);max-height:90vh;padding:0;box-shadow:0 24px 80px #0003}dialog::backdrop{background:#0005}dialog form{padding:26px}.dialog-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:22px}.date-time,.basic-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:0 14px}

/* character list */
.character-index-layout{display:grid;grid-template-columns:280px minmax(0,1fr);gap:24px;align-items:start}
.filter-panel{position:sticky;top:84px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px}.filter-panel h3{margin:0 0 12px}.filter-panel hr{border:0;border-top:1px solid var(--line);margin:16px 0}.filter-condition{display:grid;grid-template-columns:1fr 72px 72px auto;gap:6px;margin-top:7px}.filter-condition select,.filter-condition input{padding:7px}.filter-condition button{padding:5px 8px}
.character-card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:18px}.character-card{height:150px;display:grid;grid-template-columns:142px 1fr;gap:16px;border:1px solid var(--line);border-radius:14px;background:#fff;overflow:hidden;cursor:pointer;transition:.15s}.character-card:hover{transform:translateY(-1px);box-shadow:0 5px 20px #0000000d;border-color:#cfd5dc}.character-card-thumb{width:142px;height:150px;background:linear-gradient(150deg,#eef5ff,#e8eaf6);display:flex;align-items:flex-end;justify-content:center;overflow:hidden;border-radius:13px 0 0 13px}.character-card-thumb img{width:100%;height:100%;object-fit:contain;object-position:center bottom}.character-card-fallback{font-size:2.2rem;color:#8993a0;align-self:center}.character-card-body{padding:18px 15px 14px 0;min-width:0}.character-card-reading{font-size:.72rem;color:#8e949d;min-height:1em}.character-card h3{font-size:1.1rem;margin:4px 0 12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.system-label{font-size:.78rem;color:#69717c;margin-bottom:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tag-row{display:flex;flex-wrap:wrap;gap:5px}.tag-chip{display:inline-flex;align-items:center;gap:4px;padding:4px 8px;border-radius:999px;background:#eff5fb;color:#4b6f96;font-size:.75rem}.tag-chip button{padding:0;border:0;background:transparent;font-size:.9rem;color:inherit}

/* character detail */
.detail-topbar{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.character-detail-shell{height:calc(100vh - 108px);min-height:560px;display:grid;grid-template-columns:minmax(600px,55%) minmax(360px,45%);background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden}
.character-data-scroll{overflow-y:auto;padding:34px 38px 56px;min-width:0}.portrait-fixed{height:100%;background:linear-gradient(155deg,#a8cff8 0%,#e7e9fb 100%);display:flex;align-items:flex-end;justify-content:center;overflow:hidden}.portrait-fixed img{width:100%;height:100%;object-fit:contain;object-position:center bottom}.portrait-empty{align-self:center;color:#7d8794}
.sheet-reading{font-size:.78rem;color:#8d949d;min-height:1.1em}.sheet-name{font-size:clamp(2.2rem,4vw,4rem);letter-spacing:.01em;margin:5px 0 7px}.sheet-meta{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 23px}.sheet-tabs{display:flex;border-bottom:1px solid var(--line);margin:0 -8px 24px;gap:4px}.sheet-tabs button{flex:1;border:0;border-radius:0;background:transparent;padding:13px 8px;color:#68717d;border-bottom:2px solid transparent}.sheet-tabs button.active{color:#222;font-weight:700;border-bottom-color:var(--accent)}
.section-title{display:flex;align-items:center;gap:10px;margin:22px 0 12px}.section-title h3{margin:0;font-size:1rem}.section-title .line{height:1px;background:var(--line);flex:1}.edit-hint{font-size:.72rem;color:var(--muted)}
.personal-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:13px 22px}.datum{display:flex;align-items:baseline;gap:9px;min-width:0}.datum-label{font-size:.74rem;color:#626a74;background:#f1f3f5;padding:4px 6px;white-space:nowrap}.datum-value{min-width:44px;border-radius:5px;padding:3px 5px;overflow:hidden;text-overflow:ellipsis}.editable-value{cursor:pointer}.editable-value:hover{background:var(--accent-soft)}
.inline-input{width:90px!important;padding:3px 5px!important;border-radius:5px!important}.inline-input.wide{width:190px!important}.inline-textarea{width:100%;min-height:170px}
.stats-grid{display:grid;grid-template-columns:repeat(8,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.stat-cell{text-align:center;padding:14px 5px}.stat-cell small{display:block;color:#65707b;font-size:.72rem;margin-bottom:4px}.stat-value{font-weight:650;display:inline-block;padding:3px 6px;border-radius:5px;cursor:pointer}.stat-value:hover{background:var(--accent-soft)}.pool-row{display:grid;grid-template-columns:repeat(6,1fr);border-bottom:1px solid var(--line);margin-bottom:18px}.pool-row .stat-cell{padding:12px 5px}
.points-row{display:flex;gap:30px;align-items:center;padding:12px 0}.point-item{display:flex;gap:8px;align-items:center}.point-item b{font-size:.83rem}.point-item span{padding:4px 7px;border-radius:5px}
.skill-list{border-top:1px solid var(--line)}.skill-line{display:grid;grid-template-columns:minmax(0,1fr) 70px 28px;align-items:center;gap:8px;border-bottom:1px solid var(--line);padding:5px 3px;min-height:32px}.skill-name{font-size:.88rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.skill-value{text-align:right;font-weight:600;padding:3px 5px;border-radius:5px;cursor:pointer}.skill-value:hover{background:var(--accent-soft)}.icon-delete{border:0;background:transparent;color:#aaa;padding:3px}.icon-delete:hover{color:var(--danger);background:transparent}.add-link{border:0;background:transparent;color:#4b79a9;padding:9px 2px;text-decoration:underline;text-underline-offset:4px}
.fold{border-top:1px solid var(--line)}.fold summary{cursor:pointer;font-weight:700;padding:14px 0}.fold-content{padding:0 0 16px}.read-block{white-space:pre-wrap;line-height:1.65;color:#454b54}.fold textarea{min-height:170px}
.data-table-wrap{overflow-x:auto}.data-table{width:100%;border-collapse:collapse;table-layout:auto}.data-table th,.data-table td{border-bottom:1px solid #dedede;padding:10px 8px;text-align:center;font-size:.87rem}.data-table th{font-weight:500;color:#777;background:#fafafa}.data-table td:first-child{text-align:left}.table-edit{display:block;padding:3px 4px;border-radius:4px;min-height:1.5em;cursor:pointer}.table-edit:hover{background:var(--accent-soft)}.data-table .table-delete{width:38px}.data-table .table-delete button{border:0;background:transparent;color:#aaa;padding:4px}.data-table .table-delete button:hover{color:var(--danger)}
.scenario-history-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}.scenario-history-count{font-size:.76rem;letter-spacing:.16em;color:#9a8a80}.scenario-history{border-top:1px solid var(--line)}.history-row{display:grid;grid-template-columns:32px minmax(0,1fr) 110px;gap:10px;padding:10px 2px;border-bottom:1px solid var(--line);align-items:center}.history-no{color:#478ee8;font-size:.78rem}.history-title{cursor:pointer}.history-title:hover{text-decoration:underline}.history-date{text-align:right;color:#8a8f98;font-size:.78rem}.history-add{margin-top:14px}
.settings-danger{border:1px solid #f0d0d0;background:#fffafa;border-radius:10px;padding:18px}.settings-danger h3{margin-top:0;color:#a83c3c}
.snapshot-banner{background:#fff6db;border:1px solid #f1d98d;padding:10px 14px;border-radius:9px;margin-bottom:12px}

/* character edit */
.editor-card{max-width:900px;margin:0 auto;background:#fff;border:1px solid var(--line);border-radius:14px;padding:24px}.editor-card section{border-top:1px solid var(--line);padding-top:15px;margin-top:20px}.editor-card section:first-of-type{border-top:0}.import-box{background:#f4f8fd;padding:14px;border-radius:10px}.form-preview{display:block;max-width:280px;max-height:360px;object-fit:contain;margin:12px auto;background:linear-gradient(145deg,#eaf4ff,#e8eafd);border-radius:10px}.form-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:22px}

/* sessions */
.session-list{background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden}.session-row{display:grid;grid-template-columns:minmax(0,1fr) 150px 220px 80px;gap:18px;align-items:center;padding:14px 18px;border-bottom:1px solid var(--line)}.session-row:last-child{border-bottom:0}.session-title-link{font-weight:650;cursor:pointer}.session-title-link:hover{text-decoration:underline}.status-pill{font-size:.75rem;padding:4px 8px;background:#f1f3f5;border-radius:999px;text-align:center}.status-pill.completed{background:#edf7ef;color:#3d7647}
.session-detail{max-width:960px;margin:0 auto}.session-title{font-size:2.2rem;margin:5px 0 22px}.session-title .editable-value{display:inline-block}.session-status-toggle{display:flex;gap:6px}.session-status-toggle button.active{background:#5f6368;color:#fff;border-color:#5f6368}.session-fields{display:grid;grid-template-columns:150px 1fr;border-top:1px solid var(--line)}.session-field{display:contents}.session-field>label{margin:0;padding:13px 10px;border-bottom:1px solid var(--line);color:#717883}.session-field-value{padding:9px 10px;border-bottom:1px solid var(--line)}.session-field-value input,.session-field-value textarea{border-color:transparent;background:transparent;padding:4px 6px}.session-field-value input:hover,.session-field-value textarea:hover,.session-field-value input:focus,.session-field-value textarea:focus{border-color:#d9dde2;background:#fff}.weekday{display:inline-block;margin-left:8px;color:#7d858f;font-size:.85rem}.date-editor{display:flex;align-items:center;gap:7px}.date-editor input{max-width:190px}.participant-grid{display:flex;flex-wrap:wrap;gap:10px}.participant{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:10px;padding:7px 10px;cursor:pointer;background:#fff}.participant:hover{border-color:#b9c2cc}.avatar{width:42px;height:42px;border-radius:10px;object-fit:cover;background:#eef1f4}.avatar.fallback{display:inline-flex;align-items:center;justify-content:center;font-weight:700;color:#7d8794}.participant-add{width:42px;height:42px;border-radius:10px;font-size:1.35rem;padding:0}.session-danger{margin-top:28px;padding-top:18px;border-top:1px solid var(--line)}.character-checks{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.character-check{display:flex;align-items:center;gap:9px;border:1px solid var(--line);border-radius:8px;padding:8px}.character-check input{width:auto}

@media(max-width:980px){
  .character-index-layout{grid-template-columns:1fr}.filter-panel{position:static}.character-detail-shell{height:auto;grid-template-columns:1fr}.portrait-fixed{order:-1;height:420px}.character-data-scroll{overflow:visible;padding:25px}.personal-grid{grid-template-columns:repeat(2,1fr)}.stats-grid{grid-template-columns:repeat(4,1fr)}.pool-row{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:650px){main{padding:0 14px}.app-header{padding:0 12px;gap:10px}.brand{display:none}.character-card-grid{grid-template-columns:1fr}.character-card{grid-template-columns:120px 1fr}.character-card-thumb{width:120px}.filter-condition{grid-template-columns:1fr 64px 64px auto}.basic-grid,.date-time{grid-template-columns:1fr}.personal-grid{grid-template-columns:1fr}.stats-grid{grid-template-columns:repeat(2,1fr)}.pool-row{grid-template-columns:repeat(2,1fr)}.sheet-tabs{overflow-x:auto}.sheet-tabs button{min-width:82px}.session-row{grid-template-columns:1fr 105px}.session-row .session-system,.session-row .status-pill{grid-column:1/-1}.session-fields{grid-template-columns:100px 1fr}.character-checks{grid-template-columns:1fr}.history-row{grid-template-columns:30px 1fr 86px}}

/* v6 refinements */
.detail-topbar.compact{margin-bottom:8px;min-height:42px}
.icon-button{width:40px;height:40px;padding:9px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:#fff}
.icon-button svg{width:20px;height:20px;fill:currentColor}
.section-title{margin:22px 0 12px;gap:8px}
.section-title .line{display:none}

.character-data-pane{min-width:0;min-height:0;display:flex;flex-direction:column;background:#fff}
.character-sheet-header{padding:30px 38px 0;flex:0 0 auto;background:#fff;z-index:3}
.character-tab-scroll{min-height:0;overflow-y:auto;padding:0 38px 54px;scrollbar-width:thin;scrollbar-color:#dfe4ea transparent}
.character-tab-scroll::-webkit-scrollbar{width:7px}
.character-tab-scroll::-webkit-scrollbar-track{background:transparent}
.character-tab-scroll::-webkit-scrollbar-thumb{background:#dfe4ea;border-radius:999px}
.character-tab-scroll::-webkit-scrollbar-thumb:hover{background:#cbd2da}
.character-detail-shell{height:calc(100vh - 114px)}
.sheet-tabs{margin:0 -8px 0}

.portrait-fixed{position:relative;align-items:center;justify-content:center;background:linear-gradient(155deg,#b8d7f8 0%,#eceefe 100%)}
.portrait-fixed img{position:relative;z-index:2;width:92%;height:92%;object-fit:contain;object-position:center center;background:transparent}
.portrait-empty{position:relative;z-index:2}
.radar-backdrop{position:absolute;inset:8%;z-index:1;display:flex;align-items:center;justify-content:center;pointer-events:none;opacity:.24}
.radar-svg{width:min(84%,620px);height:auto;overflow:visible}
.radar-grid polygon,.radar-grid line{fill:none;stroke:#4a96e8;stroke-width:1.4}
.radar-data{fill:#4a96e8;fill-opacity:.18;stroke:#4a96e8;stroke-width:2}

.personal-grid{margin-top:2px}
.personal-add{position:relative;display:inline-block;margin-top:12px}
.personal-add>summary{list-style:none;width:28px;height:28px;border:1px solid var(--line);border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#727b86;background:#fff;font-size:1rem}
.personal-add>summary::-webkit-details-marker{display:none}
.personal-add-menu{position:absolute;left:0;top:34px;z-index:10;min-width:170px;padding:6px;background:#fff;border:1px solid var(--line);border-radius:9px;box-shadow:0 12px 32px #0002;display:grid;gap:2px}
.personal-add-menu button{border:0;text-align:left;padding:7px 9px;background:transparent}
.personal-add-menu button:hover{background:var(--soft)}
.personal-tags{display:flex;align-items:flex-start;gap:10px;margin-top:14px;flex-wrap:wrap}
.personal-tags .tag-row{flex:1}

.skill-list{border-top:0;overflow-x:auto}
.skill-line{grid-template-columns:minmax(160px,1fr) repeat(6,62px) 28px;min-width:610px;padding:4px 3px;min-height:30px;gap:6px}
.skill-head{font-size:.72rem;color:#858c95;background:#fafbfc;border-top:1px solid var(--line)}
.skill-head span:not(:first-child){text-align:right}
.skill-part{text-align:right;font-size:.83rem;padding:3px 4px;border-radius:5px}
.skill-name{font-size:.86rem}
.skill-empty{padding:12px 4px;border-bottom:1px solid var(--line);min-width:610px}
.initial-skills-fold{margin-top:8px}
.initial-skills-fold>summary{cursor:pointer;color:#9aa0a8;font-size:.78rem;padding:8px 2px;list-style:none}
.initial-skills-fold>summary::-webkit-details-marker{display:none}
.initial-skills-fold>summary::before{content:"▸";margin-right:6px}
.initial-skills-fold[open]>summary::before{content:"▾"}
.folded-skill-list{margin-top:2px}
.skill-add-inline{display:grid;grid-template-columns:minmax(160px,1fr) repeat(5,62px) 62px 34px;gap:6px;align-items:center;margin-top:9px;min-width:610px}
.skill-add-inline input{padding:6px 7px}
.skill-add-inline button{padding:6px 8px}

.session-index-layout{display:grid;grid-template-columns:280px minmax(0,1fr);gap:24px;align-items:start}
.session-list{min-width:0}
.session-tags{display:flex;gap:5px;flex-wrap:wrap;margin-top:6px}
.session-tags .tag-chip{padding:2px 7px;font-size:.7rem}
.status-pill.postponed{background:#fff4df;color:#8a6425}
.status-pill.cancelled{background:#f6ecec;color:#9d4f4f}
.session-field-value select{border-color:transparent;background:transparent;padding:4px 6px}
.session-field-value select:hover,.session-field-value select:focus{border-color:#d9dde2;background:#fff}

@media(max-width:980px){
  .character-detail-shell{height:auto}
  .character-sheet-header{padding:24px 25px 0}
  .character-tab-scroll{overflow:visible;padding:0 25px 40px}
  .portrait-fixed{height:420px}
  .session-index-layout{grid-template-columns:1fr}
}
@media(max-width:650px){
  .character-sheet-header{padding:20px 16px 0}
  .character-tab-scroll{padding:0 16px 32px}
  .skill-line,.skill-empty,.skill-add-inline{min-width:590px}
}

/* v7 character sheet layout refinements */
body.character-page main{max-width:1680px;margin:14px auto 40px;padding:0 22px}
.character-detail-view{width:100%}
.character-detail-shell{
  position:relative;
  height:auto;
  min-height:760px;
  display:grid;
  grid-template-columns:minmax(650px,58%) minmax(360px,42%);
  align-items:stretch;
  overflow:visible;
  background:#fff;
  border:1px solid var(--line);
  border-radius:16px;
  isolation:isolate;
}
.character-detail-shell.tab-status{grid-template-columns:minmax(780px,64%) minmax(340px,36%)}
.character-detail-shell::before{
  content:"";
  position:absolute;
  z-index:0;
  top:0;right:0;bottom:0;
  width:43%;
  background:linear-gradient(155deg,#b7d8fa 0%,#e8ebfb 100%);
  clip-path:polygon(22% 0,100% 0,100% 100%,0 100%);
  border-radius:0 16px 16px 0;
  pointer-events:none;
}
.character-detail-shell.tab-status::before{width:37%}
.character-data-pane{position:relative;z-index:1;background:transparent;display:block;min-width:0}
.character-sheet-header{padding:18px 30px 0;background:transparent;position:relative;z-index:3}
.character-tab-scroll{padding:0 30px 48px;overflow:visible;min-height:0}
.sheet-reading{font-size:.73rem;min-height:1em;margin-bottom:1px}
.sheet-title-row{display:flex;align-items:center;gap:22px;min-width:0}
.sheet-name{font-size:clamp(2.2rem,3.25vw,3.6rem);line-height:1.05;margin:3px 0 6px;white-space:nowrap}
.sheet-tags-inline{display:flex;align-items:center;flex-wrap:wrap;gap:5px;min-width:0;flex:1}
.sheet-tags-inline .tag-chip{white-space:nowrap}
.tag-inline-input{width:150px!important;min-width:120px;padding:5px 9px!important;border-radius:999px!important;border-style:dashed!important;font-size:.74rem!important;background:#fff9!important}
.sheet-tabs{margin:8px -8px 0;border-bottom:1px solid var(--line)}
.sheet-tabs button{padding:11px 8px}

.portrait-fixed{
  position:sticky;
  top:76px;
  z-index:2;
  height:calc(100vh - 92px);
  min-height:650px;
  align-self:start;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:visible;
  background:transparent;
}
.portrait-fixed img{
  position:relative;
  z-index:2;
  width:96%;
  height:92%;
  object-fit:contain;
  object-position:center center;
  background:transparent;
}
.portrait-empty{position:relative;z-index:2}
.sheet-controls{position:absolute;right:22px;top:20px;z-index:5;display:flex;flex-direction:column;gap:10px;align-items:flex-end}
.sheet-controls .icon-button{box-shadow:0 2px 8px #00000012;background:#fffffff0}
.current-character-button{font-size:.72rem;padding:6px 10px;border-radius:999px;background:#fffffff0}
.radar-backdrop{display:none}

/* compact section spacing */
.section-title{margin:18px 0 10px}
.section-title h3,.section-heading h3,.skill-section-heading h3{font-size:1rem;margin:0}

/* status */
.status-summary{display:grid;grid-template-columns:minmax(0,1fr) 270px;gap:18px;align-items:center;margin-bottom:12px}
.status-values{min-width:0}
.stats-grid.ability-row{grid-template-columns:repeat(8,minmax(54px,1fr));border-top:0;border-bottom:1px solid var(--line)}
.secondary-row{display:grid;grid-template-columns:repeat(9,minmax(48px,1fr));border-bottom:1px solid var(--line)}
.stats-grid.ability-row .stat-cell,.secondary-row .stat-cell{padding:10px 3px}
.stat-cell small{font-size:.68rem;margin-bottom:2px;color:#6f7781}
.stat-value{padding:2px 4px}
.status-radar{display:flex;align-items:center;justify-content:center;min-width:0}
.status-radar .radar-svg{width:255px;max-width:100%;height:auto}
.radar-grid polygon,.radar-grid line{fill:none;stroke:#6ba8e7;stroke-width:1.1}
.radar-data{fill:#64a8ef;fill-opacity:.20;stroke:#4295ef;stroke-width:1.8}
.radar-label{font-size:11px;fill:#68717d;font-weight:600}
.radar-label-value{font-size:10px;fill:#4295ef;font-weight:700}
.skill-section-heading{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin:20px 0 8px}
.points-inline{display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.points-inline .point-item{gap:5px}
.points-inline .point-item b{font-size:.76rem}
.points-inline .point-item span{font-size:.78rem;padding:2px 4px}

/* two-column, read-focused skills */
.skills-two-column{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.skill-column{min-width:0}
.skill-list{overflow:visible;border-top:0}
.skill-line{display:grid;grid-template-columns:minmax(100px,1fr) repeat(5,40px) 46px;min-width:0;gap:2px;min-height:28px;padding:3px 2px;border-bottom:1px solid #e8eaed;align-items:center}
.skill-head{font-size:.67rem;color:#969da6;background:transparent;border-top:1px solid var(--line)}
.skill-head span:not(:first-child){text-align:right}
.skill-name{font-size:.82rem;font-weight:600;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.skill-part{font-size:.75rem;padding:2px 2px;text-align:right}
.skill-component{color:#9ba2ab;font-weight:400}
.skill-total{color:#262a30;font-size:.86rem;font-weight:750}
.skill-empty{min-width:0;padding:10px 3px}
.initial-skills-fold{margin-top:8px}
.initial-skills-fold>summary{font-size:.76rem;color:#969da6;padding:8px 2px}
.folded-skill-list{margin-top:3px}

/* overview */
.income-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 22px;margin-bottom:22px}
.plain-section{margin:22px 0 8px}
.section-heading{display:flex;align-items:center;gap:7px;margin-bottom:9px}
.tiny-edit{width:25px;height:25px;padding:5px;border:0;border-radius:50%;background:transparent;color:#7d858e;display:inline-flex;align-items:center;justify-content:center}
.tiny-edit:hover{background:var(--soft);border:0}
.tiny-edit svg{width:15px;height:15px;fill:currentColor}
.plain-text{white-space:pre-wrap;line-height:1.7;color:#454b54;padding:2px 0}
.inline-long-editor textarea{min-height:180px;resize:vertical}
.inline-long-actions{display:flex;justify-content:flex-end;gap:7px;margin-top:7px}

/* backstory */
.backstory-sections{border-top:1px solid var(--line)}
.backstory-fold{border-bottom:1px solid var(--line)}
.backstory-fold>summary{display:flex;align-items:center;justify-content:space-between;gap:10px;cursor:pointer;font-weight:650;padding:12px 2px;list-style:none}
.backstory-fold>summary::-webkit-details-marker{display:none}
.backstory-fold>summary>span::before{content:"▸";display:inline-block;width:16px;color:#9aa0a8}
.backstory-fold[open]>summary>span::before{content:"▾"}
.backstory-content{padding:0 2px 14px 18px}
.backstory-content .read-block{line-height:1.7}

/* items */
.inventory-table td:nth-child(3){text-align:left}
.inventory-table td:nth-child(3) .table-edit{text-align:left}

@media(max-width:1220px){
  .character-detail-shell,.character-detail-shell.tab-status{grid-template-columns:minmax(600px,62%) minmax(320px,38%)}
  .character-detail-shell::before,.character-detail-shell.tab-status::before{width:40%}
  .status-summary{grid-template-columns:minmax(0,1fr) 230px}
  .status-radar .radar-svg{width:225px}
  .skill-line{grid-template-columns:minmax(90px,1fr) repeat(5,34px) 42px}
  .skill-part{font-size:.7rem}
}
@media(max-width:980px){
  body.character-page main{padding:0 14px;margin-top:10px}
  .character-detail-shell,.character-detail-shell.tab-status{display:block;min-height:0}
  .character-detail-shell::before,.character-detail-shell.tab-status::before{display:none}
  .portrait-fixed{position:relative;top:auto;height:440px;min-height:0;background:linear-gradient(155deg,#b7d8fa 0%,#e8ebfb 100%)}
  .portrait-fixed img{height:95%}
  .character-sheet-header{padding:18px 22px 0}
  .character-tab-scroll{padding:0 22px 38px}
  .status-summary{grid-template-columns:1fr}
  .status-radar{order:-1}
  .status-radar .radar-svg{width:250px}
  .sheet-title-row{align-items:flex-start;flex-direction:column;gap:5px}
  .skills-two-column{grid-template-columns:1fr}
  .income-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:650px){
  .character-sheet-header{padding:16px 14px 0}
  .character-tab-scroll{padding:0 14px 30px}
  .sheet-name{font-size:2.2rem;white-space:normal}
  .stats-grid.ability-row{grid-template-columns:repeat(4,1fr)}
  .secondary-row{grid-template-columns:repeat(3,1fr)}
  .income-grid{grid-template-columns:1fr}
  .skill-line{grid-template-columns:minmax(92px,1fr) repeat(5,33px) 40px}
}

/* v8 fixed character sheet / editing / filtering refinements */
body.character-page{overflow:hidden}
body.character-page main{max-width:1680px;height:calc(100vh - 64px);margin:0 auto;padding:14px 22px 18px;overflow:hidden}
.character-detail-view{height:100%}
.character-detail-shell,
.character-detail-shell.tab-status{
  --character-color:#9fc9f5;
  height:100%;min-height:0;
  grid-template-columns:minmax(700px,62%) minmax(360px,38%);
  overflow:hidden;
}
.character-detail-shell::before,
.character-detail-shell.tab-status::before{
  width:40%;
  background:linear-gradient(155deg,
    color-mix(in srgb,var(--character-color) 76%,white) 0%,
    color-mix(in srgb,var(--character-color) 22%,white) 100%);
}
.character-data-pane{display:grid;grid-template-rows:188px minmax(0,1fr);min-height:0;height:100%}
.character-sheet-header{height:188px;padding:16px 30px 0;display:flex;flex-direction:column;overflow:hidden}
.sheet-reading{height:18px;min-height:18px;line-height:18px;margin:0 0 2px}
.sheet-title-row{align-items:center;min-height:90px;gap:22px}
.sheet-name{flex:0 0 auto;margin:0;font-size:clamp(2.4rem,3.15vw,3.55rem)}
.sheet-meta-stack{flex:1;min-width:0;display:grid;gap:7px;align-content:center}
.sheet-tags-inline{min-height:31px;max-height:62px;overflow:hidden}
.image-color-setting{display:flex;align-items:center;gap:8px;margin:0;font-size:.72rem;color:#7a828d;width:max-content}
.image-color-setting input[type=color]{width:31px;height:22px;padding:1px;border-radius:6px;cursor:pointer}
.image-color-readonly{display:inline-flex;align-items:center;gap:7px;color:#8b929c;font-size:.72rem}
.image-color-readonly i{display:block;width:18px;height:18px;border-radius:50%;border:1px solid #d8dce1}
.sheet-tabs{margin:auto -8px 0;min-height:45px;flex:0 0 45px}
.sheet-tabs button{padding:10px 8px}
.character-tab-scroll{padding:18px 30px 42px;overflow-y:auto;overflow-x:hidden;min-height:0;scrollbar-width:thin;scrollbar-color:#dfe4ea transparent}
.character-tab-scroll::-webkit-scrollbar{width:7px}
.character-tab-scroll::-webkit-scrollbar-track{background:transparent}
.character-tab-scroll::-webkit-scrollbar-thumb{background:#dfe4ea;border-radius:999px}
.portrait-fixed{position:relative;top:auto;align-self:stretch;height:100%;min-height:0;overflow:hidden;background:transparent}
.portrait-fixed img{width:96%;height:94%;object-position:center center}
.sheet-controls{right:20px;top:18px}
.snapshot-banner{margin:0 0 10px}
.snapshot-banner + .character-detail-shell{height:calc(100% - 48px)}

/* Personal data alignment */
.personal-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 18px;align-items:center}
.personal-grid .datum{display:grid;grid-template-columns:74px minmax(0,1fr);align-items:center;gap:7px;min-width:0}
.personal-grid .datum.wide{grid-column:span 2}
.personal-grid .datum.url-row{grid-column:1/-1}
.personal-grid .datum-value{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.personal-grid .datum-label{text-align:center}

/* Radar readability */
.radar-label{font-size:13px;fill:#59636f;font-weight:750}
.radar-label-value{font-size:11.5px;fill:#328ce9;font-weight:800}

/* Character list portraits use center as reference */
.character-card-thumb{align-items:center;background:linear-gradient(150deg,color-mix(in srgb,var(--character-color,#9fc9f5) 28%,white),#f4f5f8)}
.character-card-thumb img{object-position:center center}

/* Backstory can be folded as a whole and individual rows can be hidden */
.backstory-master{margin-top:2px;border-top:0}
.backstory-master>summary{cursor:pointer;font-size:1rem;font-weight:700;padding:8px 2px 12px;list-style:none}
.backstory-master>summary::-webkit-details-marker{display:none}
.backstory-master>summary::before{content:"▾";display:inline-block;width:18px;color:#9aa0a8}
.backstory-master:not([open])>summary::before{content:"▸"}
.backstory-master-content{padding-bottom:8px}
.backstory-actions{display:flex;align-items:center;gap:2px}
.tiny-hide{width:25px;height:25px;padding:0;border:0;border-radius:50%;background:transparent;color:#a7adb5;font-size:1rem}
.tiny-hide:hover{background:var(--soft);color:#6f7680;border:0}
.backstory-restore{margin-top:10px}
.backstory-restore>summary{cursor:pointer;color:#7f8791;font-size:.78rem;list-style:none;padding:6px 0}
.backstory-restore>summary::-webkit-details-marker{display:none}
.backstory-restore>div{display:flex;flex-wrap:wrap;gap:5px;padding:5px 0}
.backstory-restore button{font-size:.76rem;padding:5px 8px}

/* Settings */
.settings-block{padding:4px 0 22px;margin-bottom:18px;border-bottom:1px solid var(--line)}
.settings-block h3{margin:0 0 10px;font-size:1rem}
.settings-inline{display:flex;align-items:center;gap:14px;max-width:360px;margin:0}
.settings-inline select{width:190px}

/* Character editor styled like detail sheet */
body:not(.character-page) .character-editor-shell{max-width:1450px;margin:0 auto;--character-color:#9fc9f5;display:grid;grid-template-columns:minmax(640px,62%) minmax(340px,38%);background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;min-height:760px;position:relative}
.editor-sheet{padding:22px 30px 28px;min-width:0;overflow:auto;background:#fff}
.editor-sheet-head{display:flex;align-items:flex-start;gap:14px;margin-bottom:14px}
.editor-sheet-head h1{margin:2px 0 0;font-size:2rem}
.editor-reading-space{height:18px;color:#8d949d;font-size:.73rem}
.editor-manual-section{padding:16px 0;border-top:1px solid var(--line)}
.editor-manual-section h3{margin:0 0 8px;font-size:1rem}
.editor-basic-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 16px}
.editor-url-field{grid-column:1/-1}
.editor-portrait{position:relative;display:flex;align-items:center;justify-content:center;min-height:720px;background:linear-gradient(155deg,color-mix(in srgb,var(--character-color) 76%,white),color-mix(in srgb,var(--character-color) 22%,white));overflow:hidden}
.editor-portrait img{width:96%;height:92%;object-fit:contain;object-position:center center}
.editor-image-controls{position:absolute;right:18px;top:18px;z-index:3}
.image-file-button{display:inline-flex;width:auto;margin:0;padding:8px 12px;border:1px solid #d9dde2;border-radius:9px;background:#fffffff0;cursor:pointer;font-size:.82rem}
.image-file-button input{display:none}
.editor-sheet .import-box{margin-top:14px}

/* Session date/time */
.session-date-time{grid-template-columns:repeat(3,1fr)}
.time-range-editor{display:flex;align-items:center;gap:8px;max-width:360px}
.time-range-editor input{max-width:145px}
.session-date-label{font-size:.86rem;white-space:nowrap}

@media(max-width:980px){
  body.character-page{overflow:auto}
  body.character-page main{height:auto;overflow:visible;padding:10px 14px 30px}
  .character-detail-view{height:auto}
  .character-detail-shell,.character-detail-shell.tab-status{display:block;height:auto;overflow:visible}
  .character-detail-shell::before,.character-detail-shell.tab-status::before{display:none}
  .character-data-pane{display:block;height:auto}
  .character-sheet-header{height:auto;min-height:178px;overflow:visible}
  .character-tab-scroll{overflow:visible;padding-bottom:34px}
  .portrait-fixed{height:440px;position:relative;background:linear-gradient(155deg,color-mix(in srgb,var(--character-color) 76%,white),color-mix(in srgb,var(--character-color) 22%,white))}
  .personal-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .personal-grid .datum.wide{grid-column:span 2}
  body:not(.character-page) .character-editor-shell{grid-template-columns:1fr;min-height:0}
  .editor-portrait{min-height:440px;order:-1}
}
@media(max-width:650px){
  .sheet-title-row{align-items:flex-start;flex-direction:column;gap:5px;min-height:118px}
  .character-sheet-header{min-height:220px}
  .sheet-meta-stack{width:100%}
  .personal-grid{grid-template-columns:1fr}
  .personal-grid .datum.wide,.personal-grid .datum.url-row{grid-column:auto}
  .editor-basic-grid,.session-date-time{grid-template-columns:1fr}
}
body.character-editor-page main{max-width:1540px;margin:14px auto 36px;padding:0 22px}

/* =========================================================
   v9: detail stability, creation tabs, filters and history
   ========================================================= */

/* Keep the fixed character header stable and let long names yield space. */
.sheet-title-row{display:flex;min-width:0;width:100%;overflow:hidden}
.sheet-name{
  flex:1 1 42%;min-width:110px;max-width:100%;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.sheet-meta-stack{flex:1 1 58%;min-width:250px;max-width:62%}
.sheet-tags-inline{min-width:0;overflow:hidden}
.sheet-tags-inline .tag-chip{flex:0 0 auto}
.tag-inline-input{min-width:120px;max-width:220px;flex:1 1 150px}

/* The scroll indicator is visible only while the user is actually scrolling. */
.character-tab-scroll,.editor-tab-scroll{
  scrollbar-width:thin;
  scrollbar-color:transparent transparent;
}
.character-tab-scroll::-webkit-scrollbar,.editor-tab-scroll::-webkit-scrollbar{width:7px;height:7px}
.character-tab-scroll::-webkit-scrollbar-track,.editor-tab-scroll::-webkit-scrollbar-track{background:transparent}
.character-tab-scroll::-webkit-scrollbar-thumb,.editor-tab-scroll::-webkit-scrollbar-thumb{background:transparent;border-radius:999px}
.character-tab-scroll.is-scrolling,.editor-tab-scroll.is-scrolling{scrollbar-color:#dfe4ea transparent}
.character-tab-scroll.is-scrolling::-webkit-scrollbar-thumb,.editor-tab-scroll.is-scrolling::-webkit-scrollbar-thumb{background:#dfe4ea}

/* Status balance/readability. */
.status-tab .section-title h3,.status-tab .skill-section-heading h3{font-size:1.22rem;font-weight:760}
.status-tab .section-title{margin-bottom:11px}
.status-tab .stat-cell small{font-size:.78rem;font-weight:650;color:#6f7782}
.status-tab .stat-value,.status-tab .stat-cell>span:not(.stat-value){font-size:1rem;font-weight:670}
.status-tab .skill-name{font-size:.91rem;font-weight:650}
.status-tab .skill-component{font-size:.79rem}
.status-tab .skill-total{font-size:1rem;font-weight:800}
.status-tab .skill-head{font-size:.73rem}
.radar-label{font-size:15px;fill:#59636f;font-weight:800}
.radar-label-value{font-size:13px;fill:#328ce9;font-weight:850}

/* Personal-data cells use a 3-column packing grid; long values may span two cells. */
.personal-grid{grid-auto-flow:row dense}
.personal-grid .datum.wide{grid-column:span 2}
.personal-grid .datum.url-row{grid-column:1/-1}

/* Make the fixed backstory hierarchy visually explicit. */
.backstory-master{border:0;margin-top:0}
.backstory-master>summary{padding:8px 0 11px;border-bottom:1px solid #eceff2}
.backstory-master-content{padding:10px 0 4px}
.backstory-sections{margin:5px 0 0 12px;padding-left:17px;border-left:2px solid #edf0f3}
.backstory-fold{margin:0;border:0;border-bottom:1px solid #f0f2f4}
.backstory-fold>summary{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 2px;list-style:none;cursor:pointer}
.backstory-fold>summary::-webkit-details-marker{display:none}
.backstory-fold>summary>span::before{content:none!important}
.backstory-fold>summary>.backstory-label{display:flex;align-items:center;min-width:0;font-weight:650}
.backstory-fold>summary>.backstory-label::before{content:"▸"!important;width:18px;flex:0 0 18px;color:#9aa1aa;font-size:.8rem}
.backstory-fold[open]>summary>.backstory-label::before{content:"▾"!important}
.backstory-actions{display:flex;align-items:center;gap:0;flex:0 0 auto}
.backstory-content{padding:0 6px 13px 20px}
.backstory-visibility{margin:3px 0 10px 19px;padding:7px 9px;border:1px solid #eef0f3;border-radius:8px;background:#fbfcfd}
.backstory-visibility>summary{cursor:pointer;color:#7c848e;font-size:.78rem}
.backstory-visibility>div{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px 12px;padding-top:8px}
.backstory-visibility label{display:flex;align-items:center;gap:6px;margin:0;font-size:.78rem}

/* Scenario history/date stays on its own column even when a time range exists. */
.history-row{grid-template-columns:34px minmax(0,1fr) minmax(190px,max-content);column-gap:10px}
.history-title{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.history-date{white-space:nowrap;text-align:right;font-size:.78rem}

/* Session index: allocate enough room for weekday + time range. */
.session-row{grid-template-columns:minmax(0,1fr) minmax(190px,235px) minmax(170px,230px) 78px;gap:14px}
.session-date-label,.session-system{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.status-filter-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 8px;margin:7px 0 13px}
.status-filter-check{display:flex!important;align-items:center;gap:7px;margin:0!important;padding:7px 8px;border:1px solid var(--line);border-radius:8px;background:#fff;cursor:pointer}
.status-filter-check input{width:auto;margin:0}
.filter-label{font-size:.8rem;font-weight:650;color:#515965}

/* Character-condition filtering is now a two-step flow: choose field, then set value. */
.condition-picker{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:7px;margin:8px 0 10px}
.condition-picker select{min-width:0}
.filter-condition.staged{display:grid;grid-template-columns:minmax(0,1fr) 72px 76px 32px;gap:6px;align-items:center;margin-bottom:6px}
.filter-condition-name{font-size:.78rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.filter-condition.staged input,.filter-condition.staged select{min-width:0;padding:7px 6px}
.filter-condition.staged button{padding:6px 0}

/* Home upcoming sessions share fixed title/date/time columns. */
.home-session-list{border-top:1px solid var(--line);margin-top:8px}
.home-session-row{display:grid;grid-template-columns:minmax(0,1fr) 175px 125px;gap:16px;align-items:center;min-height:42px;border-bottom:1px solid var(--line);padding:4px 2px}
.home-session-head{min-height:32px;color:#8a919b;font-size:.76rem}
.home-session-title{justify-self:start;border:0;background:transparent;padding:6px 0;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;cursor:pointer}
.home-session-title:hover{color:var(--accent)}
.home-session-date,.home-session-time{white-space:nowrap;color:#68717d;font-size:.82rem}
.home-session-empty{padding:18px 2px}

/* Session detail footer and existing-session picker. */
.session-detail-actions{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:28px;padding-top:18px;border-top:1px solid var(--line)}
.session-choice-list{display:grid;gap:6px;max-height:52vh;overflow:auto;margin:10px 0 18px}
.session-choice{display:flex;align-items:center;gap:10px;padding:9px 10px;border:1px solid var(--line);border-radius:9px;cursor:pointer}
.session-choice>span{display:grid;gap:2px;min-width:0}
.session-choice b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.session-choice small{color:#89919b}

/* Settings fields added in v9. */
.settings-check{display:flex;align-items:center;gap:9px;width:max-content;margin:0}
.settings-check input,.editor-check input{width:auto;margin:0}
.editor-check{display:flex!important;align-items:center;gap:9px;align-self:end;min-height:42px}

/* ---------------------------------------------------------
   Character create/edit: same five-tab structure as detail.
   Only the tab content scrolls; portrait and title/tabs stay fixed.
   --------------------------------------------------------- */
body.character-editor-page{overflow:hidden}
body.character-editor-page main{
  max-width:1680px;height:calc(100vh - 64px);margin:0 auto;
  padding:14px 22px 18px;overflow:hidden;
}
body.character-editor-page .character-editor-shell{
  width:100%;max-width:none;height:100%;min-height:0;margin:0;
  display:grid;grid-template-columns:minmax(700px,62%) minmax(360px,38%);
  border:1px solid var(--line);border-radius:16px;background:#fff;overflow:hidden;
}
.editor-sheet{
  min-width:0;height:100%;padding:0;overflow:hidden;background:#fff;
  display:grid;grid-template-rows:150px minmax(0,1fr);
}
.editor-fixed-header{height:150px;padding:12px 30px 0;display:flex;flex-direction:column;overflow:hidden}
.editor-title-row{display:flex;align-items:center;gap:13px;min-height:83px;min-width:0}
.editor-title-text{flex:1;min-width:0}
.editor-title-text h1{margin:2px 0 0;font-size:2rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.editor-reading-space{height:18px;line-height:18px;color:#8d949d;font-size:.73rem}
.editor-save{flex:0 0 auto}
.editor-tabs{margin:auto -8px 0;min-height:45px;flex:0 0 45px}
.editor-tab-scroll{min-height:0;overflow-y:auto;overflow-x:hidden;padding:18px 30px 48px}
.editor-portrait{height:100%;min-height:0;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;background:linear-gradient(155deg,color-mix(in srgb,var(--character-color) 76%,white),color-mix(in srgb,var(--character-color) 22%,white))}
.editor-portrait img{width:96%;height:94%;object-fit:contain;object-position:center center}
.editor-section{padding:0 0 23px;margin:0 0 20px;border-bottom:1px solid var(--line)}
.editor-section:last-child{border-bottom:0}
.editor-section>h3{font-size:1.08rem;margin:0 0 12px}
.editor-field-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 16px}
.editor-field-grid label{min-width:0}
.editor-span-2{grid-column:1/-1}
.editor-stat-grid{display:grid;grid-template-columns:repeat(8,minmax(66px,1fr));gap:8px}
.editor-stat-grid.secondary{grid-template-columns:repeat(6,minmax(76px,1fr));margin-top:14px}
.editor-stat-grid label,.editor-points-grid label{font-size:.73rem;color:#69717c}
.editor-stat-grid input,.editor-points-grid input{margin-top:4px;padding:7px 6px;text-align:right}
.editor-points-grid{display:grid;grid-template-columns:repeat(4,minmax(100px,1fr));gap:10px}
.editor-skills{display:grid;gap:18px}
.editor-skill-group h4{margin:0 0 7px;font-size:.9rem}
.editor-skill-table{overflow-x:auto}
.editor-skill-head,.editor-skill-row{display:grid;grid-template-columns:minmax(135px,1fr) repeat(6,68px) 28px;gap:4px;align-items:center;min-width:600px;padding:4px 0;border-bottom:1px solid #edf0f2}
.editor-skill-head{font-size:.69rem;color:#8a919a}
.editor-skill-row input{padding:5px 4px;text-align:right;font-size:.78rem}
.editor-skill-name{font-size:.81rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.editor-add-skill{display:grid;grid-template-columns:150px minmax(150px,1fr) 85px auto;gap:7px;align-items:center;padding-top:12px}
.editor-add-skill>*{margin:0}
.editor-backstory-grid{display:grid;gap:14px}
.editor-backstory-grid label{margin:0}
.editor-backstory-grid textarea{min-height:115px;margin-top:5px}
.editor-item-table input{min-width:85px;padding:6px 5px}
.editor-item-table td:last-child{width:34px}
.editor-image-controls{right:18px;top:18px}

@media(max-width:1180px){
  .sheet-name{font-size:clamp(2rem,3vw,3rem)}
  .sheet-meta-stack{min-width:220px;max-width:64%}
  .session-row{grid-template-columns:minmax(0,1fr) 205px 175px 72px}
  .editor-stat-grid{grid-template-columns:repeat(4,minmax(72px,1fr))}
}

@media(max-width:980px){
  body.character-editor-page{overflow:auto}
  body.character-editor-page main{height:auto;overflow:visible;padding:10px 14px 30px}
  body.character-editor-page .character-editor-shell{display:flex;flex-direction:column;height:auto;min-height:0}
  .editor-portrait{order:-1;height:420px;min-height:420px}
  .editor-sheet{display:block;height:auto}
  .editor-fixed-header{height:auto;min-height:145px}
  .editor-tab-scroll{overflow:visible;padding-bottom:34px}
  .history-row{grid-template-columns:30px minmax(0,1fr) minmax(170px,max-content)}
}

@media(max-width:700px){
  .sheet-title-row{display:block;min-height:120px}
  .sheet-name{width:100%;max-width:100%}
  .sheet-meta-stack{width:100%;max-width:none;min-width:0;margin-top:6px}
  .home-session-row{grid-template-columns:minmax(0,1fr) 135px}
  .home-session-time{grid-column:2}
  .home-session-head span:nth-child(3){display:none}
  .personal-grid{grid-template-columns:1fr}
  .personal-grid .datum.wide,.personal-grid .datum.url-row{grid-column:auto}
  .editor-field-grid,.editor-points-grid{grid-template-columns:1fr}
  .editor-span-2{grid-column:auto}
  .editor-stat-grid,.editor-stat-grid.secondary{grid-template-columns:repeat(2,minmax(80px,1fr))}
  .editor-add-skill{grid-template-columns:1fr}
  .status-filter-list{grid-template-columns:1fr}
}

/* =========================================================
   v10: checkbox direction, settings grouping, compact status,
   foldable history, multiselect session filters, URL link
   ========================================================= */

/* Keep the v8-like header geometry while allowing a long name to ellipsize. */
.sheet-title-row{align-items:center;min-height:90px;gap:22px;overflow:hidden}
.sheet-name{
  flex:0 1 auto;
  min-width:110px;
  max-width:48%;
  margin:0;
  font-size:clamp(2.4rem,3.15vw,3.55rem);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.sheet-meta-stack{flex:1 1 auto;min-width:250px;max-width:none}
.sheet-tabs{margin:auto -8px 0;min-height:45px;flex:0 0 45px}
.sheet-tabs button{padding:10px 8px}

/* Restore v8-scale status/skill body text. Titles remain emphasized. */
.status-tab .section-title h3,.status-tab .skill-section-heading h3{font-size:1.22rem;font-weight:760}
.status-tab .stat-cell small{font-size:.68rem;font-weight:400;color:#6f7781}
.status-tab .stat-value,.status-tab .stat-cell>span:not(.stat-value){font-size:inherit;font-weight:650}
.status-tab .skill-name{font-size:.82rem;font-weight:600}
.status-tab .skill-component{font-size:.75rem;font-weight:400}
.status-tab .skill-total{font-size:.86rem;font-weight:750}
.status-tab .skill-head{font-size:.67rem}

/* Checkbox rows: subject text at left, checkbox at right. */
.settings-check,.editor-check,.backstory-visibility label,.status-filter-check{
  display:flex!important;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.settings-check input,.editor-check input,.backstory-visibility label input,.status-filter-check input{
  order:2;
  width:auto;
  flex:0 0 auto;
  margin:0;
}
.settings-check span,.editor-check span,.backstory-visibility label span,.status-filter-check span{
  order:1;
  min-width:0;
}

/* Classification and player stay on one row. Player is active only for other PCs. */
.settings-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:end}
.settings-inline.is-disabled,.editor-field-grid .is-disabled{opacity:.55}
.settings-inline input:disabled,.editor-field-grid input:disabled{background:#f3f4f6;color:#9aa1aa;cursor:not-allowed}

/* Backstory visibility controls sit below the fixed sub-sections. */
.backstory-visibility{margin:12px 0 2px 29px}
.backstory-visibility>div{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px 12px;padding-top:8px}
.backstory-visibility label{padding:5px 7px;border-radius:6px}
.backstory-visibility label:hover{background:#f7f8fa}

/* Scenario history can be folded as a whole. */
.scenario-history-master{margin-top:20px;border-top:1px solid var(--line)}
.scenario-history-master>summary{cursor:pointer;font-size:1rem;font-weight:700;padding:14px 2px 11px;list-style:none}
.scenario-history-master>summary::-webkit-details-marker{display:none}
.scenario-history-master>summary::before{content:"▾";display:inline-block;width:18px;color:#9aa0a8}
.scenario-history-master:not([open])>summary::before{content:"▸"}
.scenario-history-body{padding:0 0 6px}

/* Expandable multiselect session status filter. */
.multi-select-filter{position:relative;margin:7px 0 13px}
.multi-select-filter>summary{
  list-style:none;
  border:1px solid #d9dde2;
  border-radius:7px;
  background:#fff;
  padding:9px 30px 9px 10px;
  cursor:pointer;
  position:relative;
  font-size:.9rem;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.multi-select-filter>summary::-webkit-details-marker{display:none}
.multi-select-filter>summary::after{content:"⌄";position:absolute;right:10px;top:50%;transform:translateY(-55%);color:#6d7580}
.multi-select-filter[open]>summary::after{content:"⌃"}
.multi-select-filter .status-filter-list{
  position:absolute;
  left:0;right:0;top:calc(100% + 5px);
  z-index:12;
  display:grid;
  grid-template-columns:1fr;
  gap:4px;
  margin:0;
  padding:7px;
  border:1px solid var(--line);
  border-radius:9px;
  background:#fff;
  box-shadow:0 8px 24px #00000014;
}
.status-filter-check{padding:7px 8px;border:0;border-radius:6px;background:#fff;cursor:pointer;margin:0!important}
.status-filter-check:hover{background:#f5f7f9}

/* Session URL keeps an editable field and an explicit navigation affordance. */
.session-url-editor{display:flex;align-items:center;gap:8px}
.session-url-editor input{min-width:0;flex:1}
.url-open-button{flex:0 0 auto;text-decoration:none;border:1px solid var(--line);border-radius:7px;padding:6px 10px;color:#3f6f9f;background:#fff;font-size:.82rem}
.url-open-button:hover{border-color:#aeb8c3;background:#f8fafc}

@media(max-width:700px){
  .sheet-name{max-width:100%}
  .settings-pair{grid-template-columns:1fr}
  .backstory-visibility>div{grid-template-columns:1fr}
}

/* Checkbox pickers outside settings also put the label/character first. */
.session-choice{justify-content:space-between}
.session-choice>span{order:1;flex:1}
.session-choice>input{order:2;width:auto;margin:0;flex:0 0 auto}
.character-check{justify-content:flex-start}
.character-check .avatar{order:1}
.character-check>span{order:2;min-width:0;flex:1}
.character-check>input{order:3;width:auto;margin:0 0 0 auto;flex:0 0 auto}

/* =========================================================
   v11: status balance, shorter tag entry, creation gateway,
   aligned history dates and single-line player setting
   ========================================================= */

/* Give long character names more room by keeping the tag entry compact. */
.sheet-name{max-width:56%}
.sheet-meta-stack{min-width:205px}
.tag-inline-input{
  width:108px!important;
  min-width:88px!important;
  max-width:108px!important;
  flex:0 1 108px!important;
  padding-left:8px!important;
  padding-right:8px!important;
}

/* Status: larger radar and a tighter, better balanced ability block. */
.status-tab .section-title{margin:9px 0 0}
.status-tab .section-title+.status-summary{margin-top:-5px}
.status-summary{
  grid-template-columns:minmax(0,1fr) 320px;
  gap:10px;
  align-items:start;
  margin-bottom:7px;
}
.status-values{padding-top:8px}
.status-radar{margin-top:-8px}
.status-radar .radar-svg{width:319px;max-width:319px}
.stats-grid.ability-row .stat-cell{padding:8px 3px 9px}
.secondary-row{
  grid-template-columns:
    minmax(70px,1.22fr) minmax(70px,1.22fr) minmax(76px,1.30fr)
    repeat(6,minmax(42px,.82fr));
}
.secondary-row .stat-cell{padding:8px 2px 9px}

/* Keep scenario date/time on one shared, stable column. */
.history-row{grid-template-columns:34px minmax(0,1fr) 210px}
.history-date{width:210px;justify-self:end;white-space:nowrap;text-align:right}

/* Player setting must remain on a single line next to classification. */
.settings-pair{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.settings-inline{
  max-width:none!important;
  width:100%;
  display:flex!important;
  align-items:center;
  gap:10px;
  white-space:nowrap;
}
.settings-inline select,.settings-inline input{flex:1 1 auto;min-width:0;width:auto!important}

/* New-character gateway: choose import or system before the CoC7 editor appears. */
.character-create-setup-shell{
  --character-color:#9fc9f5;
  height:100%;
  display:grid;
  grid-template-columns:minmax(620px,62%) minmax(340px,38%);
  background:#fff;
  border:1px solid var(--line);
  border-radius:16px;
  overflow:hidden;
  position:relative;
}
.create-setup-panel{padding:28px 34px 42px;overflow:auto}
.create-setup-top{display:flex;align-items:center;gap:14px;margin-bottom:12px}
.create-setup-top h1{margin:0;font-size:2rem}
.create-setup-lead{margin:8px 0 24px;color:#68717c}
.create-setup-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.create-setup-card{border:1px solid var(--line);border-radius:13px;padding:20px;background:#fff}
.create-setup-card h2{margin:0 0 8px;font-size:1.1rem}
.create-setup-card textarea{min-height:150px}
.import-status{font-size:.82rem;color:#a34c4c;line-height:1.5}
.create-setup-side{
  position:relative;
  overflow:hidden;
  background:linear-gradient(155deg,
    color-mix(in srgb,var(--character-color) 76%,white),
    color-mix(in srgb,var(--character-color) 22%,white));
}
.create-setup-side::before{
  content:"";
  position:absolute;
  inset:14% 12%;
  border:1px solid #ffffff80;
  border-radius:50%;
  box-shadow:0 0 0 70px #ffffff12,0 0 0 140px #ffffff0c;
}
.create-setup-side-label{
  position:absolute;
  left:50%;top:50%;transform:translate(-50%,-50%) rotate(-90deg);
  color:#ffffff9c;
  font-size:clamp(2.5rem,5vw,5.2rem);
  font-weight:800;
  letter-spacing:.2em;
}

@media(max-width:1320px){
  .status-summary{grid-template-columns:minmax(0,1fr) 292px}
  .status-radar .radar-svg{width:292px;max-width:292px}
  .sheet-name{max-width:53%}
}
@media(max-width:1080px){
  .status-summary{grid-template-columns:minmax(0,1fr) 265px}
  .status-radar .radar-svg{width:265px;max-width:265px}
  .secondary-row{grid-template-columns:repeat(3,minmax(66px,1fr)) repeat(6,minmax(42px,.72fr))}
}
@media(max-width:980px){
  .character-create-setup-shell{grid-template-columns:1fr;height:auto;min-height:0}
  .create-setup-side{display:none}
  .create-setup-grid{grid-template-columns:1fr}
  .status-summary{grid-template-columns:1fr}
  .status-radar .radar-svg{width:319px;max-width:100%}
  .history-row{grid-template-columns:30px minmax(0,1fr) 190px}
  .history-date{width:190px}
}
@media(max-width:700px){
  .sheet-name{max-width:100%}
  .tag-inline-input{width:100px!important;max-width:100px!important}
  .secondary-row{grid-template-columns:repeat(3,1fr)}
  .history-row{grid-template-columns:28px minmax(0,1fr) 135px}
  .history-date{width:135px;white-space:normal}
  .create-setup-panel{padding:20px 16px 32px}
}


/* =========================================================
   v12: status ratio, import-from-edit and CCFOLIA pawn output
   ========================================================= */

/* Match the requested status-tab composition: a broad data sheet at left
   and a stable portrait panel at right. */
body.character-page main{max-width:1540px}
.character-detail-shell.tab-status{
  grid-template-columns:minmax(760px,61.5%) minmax(390px,38.5%);
}
.character-detail-shell.tab-status::before{width:40.5%}
.character-detail-shell.tab-status .character-sheet-header{padding-left:28px;padding-right:28px}
.character-detail-shell.tab-status .character-tab-scroll{padding-left:28px;padding-right:28px}
.character-detail-shell.tab-status .status-summary{
  grid-template-columns:minmax(0,1fr) 300px;
  column-gap:18px;
  align-items:center;
  margin-top:-3px;
  margin-bottom:14px;
}
.character-detail-shell.tab-status .status-values{padding-top:0}
.character-detail-shell.tab-status .status-radar{margin-top:-4px}
.character-detail-shell.tab-status .status-radar .radar-svg{width:300px;max-width:300px}
.character-detail-shell.tab-status .stats-grid.ability-row .stat-cell{padding:8px 3px 11px}
.character-detail-shell.tab-status .secondary-row .stat-cell{padding:9px 2px 11px}
.character-detail-shell.tab-status .skill-section-heading{margin-top:18px}

/* Settings utilities */
.settings-action-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.editor-import-update{border-top:1px solid var(--line);padding-top:20px}
.editor-import-grid{display:grid;grid-template-columns:minmax(220px,.8fr) minmax(320px,1.4fr);gap:14px;align-items:start}
.editor-import-grid textarea{min-height:110px}

/* Keep the status proportions reasonable at narrower desktop widths. */
@media(max-width:1320px){
  .character-detail-shell.tab-status{grid-template-columns:minmax(680px,62%) minmax(340px,38%)}
  .character-detail-shell.tab-status .status-summary{grid-template-columns:minmax(0,1fr) 270px}
  .character-detail-shell.tab-status .status-radar .radar-svg{width:270px;max-width:270px}
}
@media(max-width:1080px){
  .character-detail-shell.tab-status{grid-template-columns:minmax(620px,63%) minmax(320px,37%)}
  .character-detail-shell.tab-status .status-summary{grid-template-columns:minmax(0,1fr) 245px}
  .character-detail-shell.tab-status .status-radar .radar-svg{width:245px;max-width:245px}
}
@media(max-width:980px){
  body.character-page main{max-width:none}
  .character-detail-shell.tab-status{display:block}
  .character-detail-shell.tab-status::before{display:none}
  .character-detail-shell.tab-status .status-summary{grid-template-columns:1fr}
  .character-detail-shell.tab-status .status-radar .radar-svg{width:300px;max-width:100%}
  .editor-import-grid{grid-template-columns:1fr}
}


/* =========================================================
   v13: restore v11 sheet proportions; session ranges, import review,
   history expansion and navigation refinements
   ========================================================= */
/* v12 changed horizontal proportions and padding. Restore the v11 geometry,
   while retaining the vertical ability/radar balance introduced in v12. */
body.character-page main{max-width:1680px}
.character-detail-shell.tab-status{grid-template-columns:minmax(700px,62%) minmax(360px,38%)}
.character-detail-shell.tab-status::before{width:40%}
.character-detail-shell.tab-status .character-sheet-header{padding-left:30px;padding-right:30px}
.character-detail-shell.tab-status .character-tab-scroll{padding-left:30px;padding-right:30px}
.character-detail-shell.tab-status .status-summary{
  grid-template-columns:minmax(0,1fr) 320px;
  column-gap:10px;
  align-items:center;
  margin-top:-3px;
  margin-bottom:14px;
}
.character-detail-shell.tab-status .status-values{padding-top:0}
.character-detail-shell.tab-status .status-radar{margin-top:-4px}
.character-detail-shell.tab-status .status-radar .radar-svg{width:319px;max-width:319px}
.character-detail-shell.tab-status .stats-grid.ability-row .stat-cell{padding:8px 3px 11px}
.character-detail-shell.tab-status .secondary-row .stat-cell{padding:9px 2px 11px}
.character-detail-shell.tab-status .skill-section-heading{margin-top:18px}

/* Session list: sorted serial number + date range. */
.session-row{grid-template-columns:38px minmax(0,1fr) minmax(190px,235px) minmax(170px,230px) 78px}
.session-no{font-size:.75rem;color:#8b94a0;text-align:center;font-variant-numeric:tabular-nums}
.date-range-filter{display:grid;grid-template-columns:1fr;gap:6px;margin-top:12px}
.date-range-filter>span:not(.filter-label){text-align:center;color:#8c939d;font-size:.78rem;line-height:1}
.date-range-filter input{width:100%}
.filter-clear-date{justify-self:start;padding:5px 8px;font-size:.74rem}

/* Import update review. */
.import-update-dialog{width:min(980px,92vw);max-height:86vh}
.import-update-panel{min-width:0}
.import-review-toolbar{display:flex;gap:8px;margin:12px 0}
.import-update-list{display:grid;gap:0;max-height:58vh;overflow:auto;border:1px solid var(--line);border-radius:10px}
.import-update-row{display:grid!important;grid-template-columns:minmax(150px,.9fr) minmax(0,1.25fr) 28px minmax(0,1.25fr) 28px;gap:8px;align-items:center;margin:0!important;padding:10px 12px;border-bottom:1px solid var(--line);cursor:pointer}
.import-update-row:last-child{border-bottom:0}
.import-update-row:hover{background:#f8fafc}
.import-update-label{font-weight:650;color:#454d57}
.import-update-old,.import-update-new{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:.8rem}
.import-update-old{color:#8a929d}
.import-update-new{color:#313a45}
.import-update-arrow{text-align:center;color:#a0a7b0}
.import-update-row>input{width:auto;margin:0;justify-self:end}

/* Scenario history expands in place without changing the simple row appearance. */
.history-entry{border:0;margin:0}
.history-entry>summary{list-style:none;cursor:pointer}
.history-entry>summary::-webkit-details-marker{display:none}
.history-entry>.history-row{border-bottom:1px solid var(--line)}
.history-entry[open]>.history-row{background:#fbfcfd}
.history-title{border:0;background:transparent;padding:0;text-align:left;font:inherit;color:inherit;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.history-expanded{padding:12px 34px 18px;background:#fbfcfd;border-bottom:1px solid var(--line)}
.history-meta{display:grid;gap:12px;margin-bottom:14px}
.history-meta>div{display:grid;grid-template-columns:130px minmax(0,1fr);gap:12px;align-items:start}
.history-meta-label{font-size:.76rem;color:#8b929c}
.history-participants{display:flex;gap:7px;flex-wrap:wrap}
.history-participant{display:flex;align-items:center;gap:6px;padding:4px 8px;border:1px solid var(--line);border-radius:9px;background:#fff;font-size:.78rem}
.history-participant .avatar{width:28px;height:28px;border-radius:7px}
.history-diff-columns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.history-diff-columns section{min-width:0;border-top:1px solid var(--line);padding-top:10px}
.history-diff-columns h4{font-size:.82rem;margin:0 0 8px;color:#59616b}
.history-diff-list{display:grid;gap:4px}
.history-diff-row{display:grid;grid-template-columns:minmax(110px,.75fr) minmax(0,1fr) 20px minmax(0,1fr);gap:6px;align-items:center;font-size:.74rem}
.history-diff-row>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.history-diff-row>span:first-child{color:#6f7781}
.history-diff-row>b{text-align:center;color:#9ba2ab;font-weight:400}
.history-diff-empty{font-size:.76rem;margin:4px 0}

@media(max-width:1320px){
  .character-detail-shell.tab-status{grid-template-columns:minmax(700px,62%) minmax(340px,38%)}
  .character-detail-shell.tab-status .status-summary{grid-template-columns:minmax(0,1fr) 292px}
  .character-detail-shell.tab-status .status-radar .radar-svg{width:292px;max-width:292px}
}
@media(max-width:1080px){
  .character-detail-shell.tab-status{grid-template-columns:minmax(600px,62%) minmax(320px,38%)}
  .character-detail-shell.tab-status .status-summary{grid-template-columns:minmax(0,1fr) 265px}
  .character-detail-shell.tab-status .status-radar .radar-svg{width:265px;max-width:265px}
}
@media(max-width:980px){
  body.character-page main{max-width:none}
  .character-detail-shell.tab-status{display:block}
  .character-detail-shell.tab-status::before{display:none}
  .character-detail-shell.tab-status .status-summary{grid-template-columns:1fr}
  .character-detail-shell.tab-status .status-radar .radar-svg{width:319px;max-width:100%}
  .session-row{grid-template-columns:32px minmax(0,1fr) 205px 175px 72px}
  .history-diff-columns{grid-template-columns:1fr}
}
@media(max-width:700px){
  .session-row{grid-template-columns:28px minmax(0,1fr) 110px}
  .session-row .session-system,.session-row .status-pill{grid-column:2/-1}
  .import-update-row{grid-template-columns:minmax(110px,.8fr) minmax(0,1fr) 24px;gap:5px}
  .import-update-old{grid-column:2}.import-update-arrow{grid-column:3}.import-update-new{grid-column:2}.import-update-row>input{grid-column:3;grid-row:1}
  .history-expanded{padding-left:12px;padding-right:12px}
  .history-meta>div{grid-template-columns:1fr}
}

/* =========================================================
   v14: portrait scaling, computed point totals, complete import review,
   per-category skill addition, scenario-history actions
   ========================================================= */
.portrait-fixed img,.editor-portrait img{
  transform-origin:center center;
  transition:transform .16s ease;
}
.editor-image-controls{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:8px;
  max-width:min(360px,calc(100% - 36px));
}
.image-scale-control{
  display:grid;
  grid-template-columns:auto 30px minmax(100px,160px) 30px 48px;
  gap:5px;
  align-items:center;
  padding:7px 8px;
  border:1px solid rgba(255,255,255,.72);
  border-radius:10px;
  background:rgba(255,255,255,.86);
  box-shadow:0 2px 12px rgba(35,53,75,.08);
  font-size:.74rem;
  color:#5f6873;
  backdrop-filter:blur(6px);
}
.image-scale-control button{
  width:30px;
  height:28px;
  padding:0;
  border-radius:7px;
  line-height:1;
}
.image-scale-control input[type="range"]{width:100%;margin:0;padding:0}
.image-scale-control b{text-align:right;font-size:.72rem;color:#303740}

.editor-points-computed{
  display:grid;
  grid-template-columns:minmax(180px,1.25fr) repeat(4,minmax(105px,1fr));
  gap:10px;
  align-items:stretch;
}
.editor-points-computed>label,.computed-point{
  min-height:64px;
  padding:8px 10px;
  border:1px solid #e6e9ed;
  border-radius:9px;
  background:#fbfcfd;
}
.editor-points-computed>label{font-size:.73rem;color:#69717c}
.editor-points-computed select{margin-top:5px;padding:6px 7px;width:100%}
.computed-point{display:grid;grid-template-columns:1fr auto;align-items:center;gap:4px 8px}
.computed-point span{font-size:.72rem;color:#707986}
.computed-point b{font-size:1rem;font-variant-numeric:tabular-nums;color:#252b33}
.computed-point small{grid-column:1/-1;font-size:.64rem;color:#9aa1aa;white-space:nowrap}

/* Reserve the delete column for every skill row, whether a delete button exists or not. */
.editor-skill-head,.editor-skill-row{
  grid-template-columns:minmax(135px,1fr) repeat(6,68px) 34px;
}
.editor-skill-delete-slot{width:34px;min-width:34px;display:flex;justify-content:center;align-items:center}
.editor-skill-add-row{
  display:grid;
  grid-template-columns:26px minmax(160px,1fr) 76px minmax(120px,.8fr) 64px 34px;
  gap:5px;
  align-items:center;
  min-width:600px;
  padding:7px 0 3px;
  border-bottom:1px solid #edf0f2;
}
.editor-skill-add-row input{padding:5px 6px;font-size:.77rem}
.editor-add-plus{color:#8290a0;text-align:center;font-size:.9rem}
.editor-add-hint{font-size:.69rem;color:#9aa2ac;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.editor-skill-add-row button{padding:5px 8px;font-size:.74rem}

/* Import review: values must remain fully visible instead of being ellipsized. */
.import-update-dialog{width:min(1120px,94vw)}
.import-update-list{max-height:62vh}
.import-update-row{
  grid-template-columns:minmax(150px,.72fr) minmax(0,1.35fr) 30px minmax(0,1.35fr) 30px;
  align-items:start;
}
.import-update-old,.import-update-new{
  margin:0;
  padding:7px 8px;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  word-break:break-word;
  overflow:visible;
  text-overflow:clip;
  max-height:none;
  border-radius:7px;
  background:#f5f7f9;
  font-family:inherit;
  font-size:.76rem;
  line-height:1.5;
}
.import-update-new{background:#f0f7ff;color:#263747}
.import-update-arrow{padding-top:8px}
.import-update-row>input{margin-top:8px}

.history-entry>summary.history-row{cursor:pointer}
.history-title{pointer-events:none}
.history-expanded{position:relative}
.history-expanded-actions{position:absolute;right:12px;top:10px;z-index:2}
.history-detail-icon{
  width:32px;height:32px;padding:0;border-radius:50%;
  display:grid;place-items:center;
  border:1px solid #dfe4ea;background:#fff;color:#4b6f97;
  font-size:1rem;line-height:1;
}
.history-detail-icon:hover{background:#f1f6fb}
.history-url{min-width:0;color:#3f76ad;text-decoration:underline;text-underline-offset:2px;overflow-wrap:anywhere}

@media(max-width:1100px){
  .editor-points-computed{grid-template-columns:repeat(2,minmax(120px,1fr))}
  .editor-points-computed>label{grid-column:1/-1}
}
@media(max-width:700px){
  .image-scale-control{grid-template-columns:auto 28px minmax(80px,1fr) 28px 44px;max-width:100%}
  .editor-points-computed{grid-template-columns:1fr}
  .editor-points-computed>label{grid-column:auto}
  .import-update-row{grid-template-columns:1fr 30px}
  .import-update-label{grid-column:1}.import-update-row>input{grid-column:2;grid-row:1}
  .import-update-old,.import-update-new,.import-update-arrow{grid-column:1/-1}
  .import-update-arrow{text-align:left;padding:0}
}

/* =========================================================
   v15: editor status rules, derived values, specialization inputs
   ========================================================= */
/* Keep the editor's outer geometry identical for every tab. */
body.character-editor-page .character-editor-shell{
  grid-template-columns:minmax(700px,62%) minmax(360px,38%);
}
.editor-tab-scroll{font-size:.86rem}
.editor-section>h3{font-size:1.08rem;line-height:1.35;margin-bottom:12px}
.editor-field-grid label,
.editor-backstory-grid label,
.editor-import-grid label,
.editor-section>label{font-size:.78rem;line-height:1.4;color:#616b77}
.editor-field-grid input,.editor-field-grid select,
.editor-backstory-grid textarea,
.editor-import-grid input,.editor-import-grid textarea,
.editor-section>textarea{font-size:.86rem}
/* Preserve the compact skill typography requested by the user. */
.editor-skill-name{font-size:.81rem}
.editor-skill-row input{font-size:.78rem}
.editor-skill-head{font-size:.69rem}

.editor-status-section{padding-top:0}
.editor-section-title-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 12px}
.editor-section-title-row h3{font-size:1.08rem;margin:0}
.roll-all-button{padding:6px 10px;font-size:.75rem;white-space:nowrap}
.editor-primary-stats{grid-template-columns:repeat(8,minmax(68px,1fr));gap:9px}
.editor-derived-stats{grid-template-columns:repeat(6,minmax(82px,1fr));gap:9px 10px;margin-top:14px}
.editor-stat-field{min-width:0;margin:0;font-size:.73rem!important;color:#69717c!important}
.editor-stat-field>span{display:block;min-height:1.2em;margin-bottom:4px}
.editor-stat-field input{width:100%;margin:0;padding:7px 6px;text-align:right;font-size:.84rem}
.editor-stat-field.calculated output{
  display:flex;align-items:center;justify-content:flex-end;
  min-height:35px;padding:7px 7px;border:1px solid #e2e6ea;border-radius:8px;
  background:#f7f9fb;color:#3e4650;font-size:.84rem;font-variant-numeric:tabular-nums;
}
.stat-input-with-dice{display:grid;grid-template-columns:minmax(0,1fr) 30px;gap:4px;align-items:center}
.dice-button{width:30px;height:35px;padding:0;border-radius:8px;font-size:1rem;line-height:1;background:#f7f9fb;color:#536274}
.dice-button:hover{background:#eef4fa}

.editor-save-area{display:flex;align-items:center;justify-content:flex-end;gap:10px;min-width:0;margin-left:auto}
.editor-point-warning{max-width:390px;color:#c62828;font-size:.76rem;line-height:1.35;text-align:right}
.editor-save:disabled{opacity:.45;cursor:not-allowed}

.editor-skill-specialized{display:flex!important;align-items:center;min-width:0;white-space:nowrap;overflow:visible}
.skill-specialization-input{
  width:78px!important;min-width:58px!important;height:27px!important;
  margin:0 3px!important;padding:3px 5px!important;text-align:left!important;
  font-size:.78rem!important;border-radius:6px!important;
}

@media(max-width:1180px){
  .editor-primary-stats{grid-template-columns:repeat(4,minmax(76px,1fr))}
  .editor-derived-stats{grid-template-columns:repeat(4,minmax(82px,1fr))}
}
@media(max-width:700px){
  .editor-primary-stats,.editor-derived-stats{grid-template-columns:repeat(2,minmax(90px,1fr))}
  .editor-section-title-row{align-items:flex-start;flex-direction:column}
  .editor-save-area{gap:6px}
  .editor-point-warning{max-width:190px;font-size:.68rem}
}

/* =========================================================
   v16: optional specialized skills, portrait positioning, radar-free status
   ========================================================= */
/* Detail status: use the full data width now that the radar chart is removed. */
.character-detail-shell.tab-status .status-summary.status-summary-no-radar{
  display:block;
  margin-top:-3px;
  margin-bottom:14px;
}
.character-detail-shell.tab-status .status-summary-no-radar .status-values{width:100%;padding-top:0}
.character-detail-shell.tab-status .status-summary-no-radar .stats-grid.ability-row{
  grid-template-columns:repeat(8,minmax(62px,1fr));
}
.character-detail-shell.tab-status .status-summary-no-radar .secondary-row{
  grid-template-columns:repeat(9,minmax(54px,1fr));
}

/* Specialized skills are optional and are added within their own category. */
.editor-special-add-row{
  display:grid;
  grid-template-columns:26px auto minmax(110px,1fr) auto 64px 34px;
  gap:5px;
  align-items:center;
  min-width:600px;
  padding:5px 0;
  border-bottom:1px dashed #edf0f2;
  color:#75808d;
}
.editor-special-add-row input{padding:5px 6px;font-size:.77rem;min-width:0}
.editor-special-add-row button{padding:5px 8px;font-size:.74rem}
.editor-special-add-row .special-base{font-size:.77rem;white-space:nowrap;color:#66717e}

/* Portrait can be zoomed and repositioned without mutating the saved character until Save. */
.editor-portrait .draggable-portrait{cursor:grab;touch-action:none;user-select:none;-webkit-user-drag:none}
.editor-portrait .draggable-portrait.is-dragging{cursor:grabbing}
.image-position-note{
  position:absolute;left:18px;bottom:18px;z-index:4;
  padding:6px 9px;border-radius:9px;background:rgba(255,255,255,.82);
  color:#66717d;font-size:.72rem;pointer-events:none;backdrop-filter:blur(5px);
}
.image-position-reset{
  position:absolute;right:18px;bottom:18px;z-index:4;
  padding:6px 9px;border-radius:9px;background:rgba(255,255,255,.9);font-size:.72rem;
}

@media(max-width:980px){
  .character-detail-shell.tab-status .status-summary-no-radar .stats-grid.ability-row{grid-template-columns:repeat(4,minmax(70px,1fr))}
  .character-detail-shell.tab-status .status-summary-no-radar .secondary-row{grid-template-columns:repeat(3,minmax(80px,1fr))}
}
@media(max-width:700px){
  .editor-special-add-row{grid-template-columns:24px auto minmax(90px,1fr) auto 58px 34px;min-width:560px}
  .image-position-note{left:12px;bottom:12px}.image-position-reset{right:12px;bottom:12px}
}
/* Final radar-free status balance override (v16). */
.character-detail-shell.tab-status .status-summary{display:block!important;grid-template-columns:none!important;column-gap:0!important}
.character-detail-shell.tab-status .status-summary .status-values{width:100%;max-width:none}


/* =========================================================
   v17: detail typography/margins, inline skill-add stability,
   human-readable import review and complete history diff modal
   ========================================================= */
/* Use one typography rhythm across all character-detail tabs. */
.character-tab-scroll{
  font-size:.86rem;
  line-height:1.55;
  padding-left:22px!important;
  padding-right:12px!important;
}
.character-sheet-header{padding-left:22px!important;padding-right:18px!important}
body.character-page main{padding-left:10px!important;padding-right:10px!important}
.character-tab-scroll .section-title h3,
.character-tab-scroll .section-heading h3,
.character-tab-scroll .plain-section h3,
.character-tab-scroll .fold>summary,
.character-tab-scroll .backstory-master>summary,
.character-tab-scroll .scenario-history-master>summary,
.character-tab-scroll .settings-block h3,
.character-tab-scroll .settings-danger h3{font-size:1rem;line-height:1.4}
.character-tab-scroll .read-block,
.character-tab-scroll .plain-text,
.character-tab-scroll .datum,
.character-tab-scroll .data-table th,
.character-tab-scroll .data-table td,
.character-tab-scroll .settings-block,
.character-tab-scroll .settings-danger{font-size:.86rem}
/* Keep the compact skill typography, but balance the two status titles. */
.status-tab .section-title h3,.status-tab .skill-section-heading h3{font-size:1.13rem!important;font-weight:750;line-height:1.35}
.status-tab .skill-name{font-size:.82rem!important;font-weight:600!important}
.status-tab .skill-component{font-size:.75rem!important}
.status-tab .skill-total{font-size:.86rem!important;font-weight:750!important}
.status-tab .skill-head{font-size:.67rem!important}
/* Item tab starts cleanly: no stray rule above the Weapon heading. */
.items-tab>.fold:first-child{border-top:0!important}
.items-tab>.fold:first-child>summary{padding-top:2px}
/* Let the data side use more of the available width without changing the fixed portrait behavior. */
.character-detail-shell,.character-detail-shell.tab-status{grid-template-columns:minmax(720px,63%) minmax(350px,37%)}
.character-tab-scroll{scrollbar-gutter:auto}

/* Specialized-skill addition includes the initial value in the same compact row. */
.editor-special-add-row{
  grid-template-columns:26px auto minmax(105px,1fr) auto 106px 64px 34px;
}
.special-initial-entry{display:flex;align-items:center;gap:5px;margin:0!important;font-size:.7rem!important;color:#7b8490!important;white-space:nowrap}
.special-initial-entry input{width:62px!important;min-width:62px!important;text-align:right}

/* Import review reads as actual character-sheet fields, never raw JSON. */
.import-update-label{line-height:1.45}
.import-update-old,.import-update-new{font-family:inherit!important}

/* Scenario-history differences are opened on demand and displayed in full. */
.history-diff-columns section{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.history-diff-columns h4{margin-bottom:0}
.history-diff-open{display:inline-flex;align-items:center;gap:7px;padding:7px 10px;border-radius:8px;background:#fff;border:1px solid #d9e1e8;color:#426d99;font-size:.78rem}
.history-diff-open:hover{background:#f4f8fc;border-color:#b9c9d8}
.history-diff-open span{color:#8a949f;font-size:.7rem}
.history-diff-dialog{width:min(1080px,94vw);max-height:88vh;padding:0}
.history-diff-panel{padding:22px;min-width:0}
.history-diff-panel h2{margin:0 0 6px;font-size:1.25rem}
.history-diff-modal-list{display:grid;gap:0;max-height:66vh;overflow:auto;border:1px solid var(--line);border-radius:10px;margin-top:14px}
.history-diff-modal-row{display:grid;grid-template-columns:minmax(190px,.8fr) minmax(0,1.15fr) 28px minmax(0,1.15fr);gap:8px;align-items:start;padding:10px 12px;border-bottom:1px solid var(--line)}
.history-diff-modal-row:last-child{border-bottom:0}
.history-diff-modal-label{font-weight:650;color:#48515c;overflow-wrap:anywhere}
.history-diff-modal-row pre{margin:0;padding:7px 8px;border-radius:7px;background:#f5f7f9;white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-word;font:inherit;font-size:.78rem;line-height:1.5;color:#56606c}
.history-diff-modal-row pre:last-child{background:#f0f7ff;color:#263747}
.history-diff-modal-arrow{text-align:center;padding-top:8px;color:#a0a7b0}

@media(max-width:1180px){
  .character-detail-shell,.character-detail-shell.tab-status{grid-template-columns:minmax(650px,63%) minmax(330px,37%)}
  .editor-special-add-row{grid-template-columns:24px auto minmax(90px,1fr) auto 100px 60px 34px}
}
@media(max-width:980px){
  .character-detail-shell,.character-detail-shell.tab-status{display:block}
  .character-sheet-header{padding-left:18px!important;padding-right:18px!important}
  .character-tab-scroll{padding-left:18px!important;padding-right:12px!important}
  .history-diff-modal-row{grid-template-columns:1fr 26px}
  .history-diff-modal-label{grid-column:1/-1}
  .history-diff-modal-row pre{grid-column:1/-1}
  .history-diff-modal-arrow{grid-column:1/-1;text-align:left;padding-top:0}
}

/* =========================================================
   v18: portrait emphasis, title overlay, foldable abilities,
   computed point display, lost tag and full list tags
   ========================================================= */
/* Give the portrait more of the sheet while keeping the data pane usable. */
@media(min-width:981px){
  .character-detail-shell,
  .character-detail-shell.tab-status{
    grid-template-columns:minmax(600px,54%) minmax(380px,46%);
  }
  .character-detail-shell::before,
  .character-detail-shell.tab-status::before{width:48%}
  .portrait-fixed img{width:99%;height:96%}

  /* The name / tags / image colour keep their original starting position,
     but sit above the portrait layer and may use part of the portrait width. */
  .character-data-pane{z-index:3}
  .character-sheet-header{overflow:visible!important}
  .sheet-title-row{
    position:relative;
    z-index:8;
    width:168%;
    max-width:none;
    overflow:visible;
  }
  .sheet-name{
    flex:0 1 auto;
    max-width:64%!important;
    min-width:120px;
  }
  .sheet-meta-stack{
    flex:1 1 auto;
    min-width:210px;
    max-width:none!important;
  }
}

/* Abilities can be collapsed; the default HTML state remains open. */
.ability-fold{margin:14px 0 0;border:0}
.ability-fold>summary{
  display:flex;
  align-items:center;
  gap:9px;
  list-style:none;
  cursor:pointer;
  min-height:30px;
  margin:0 0 8px;
  font-size:1.13rem;
  font-weight:750;
  line-height:1.35;
}
.ability-fold>summary::-webkit-details-marker{display:none}
.ability-fold>summary::before{content:"▾";font-size:.72rem;color:#7e8792;transform-origin:center;transition:transform .15s}
.ability-fold:not([open])>summary::before{transform:rotate(-90deg)}
.ability-fold>summary small{font-size:.7rem;font-weight:400;color:var(--muted)}
.ability-fold .status-summary{margin-top:0}

/* Point totals are derived values on the detail sheet, not editable fields. */
.points-inline .point-readonly{display:flex;align-items:center;gap:5px;flex-wrap:wrap}
.points-inline .point-readonly span{cursor:default}
.point-formula{font-size:.67rem;color:#8a929c;font-weight:500;margin-left:4px;white-space:nowrap}

/* Lost is an automatic reserved tag. */
.tag-chip.tag-lost{
  background:#fdeaea;
  color:#b43b3b;
  border:1px solid #efc0c0;
}
.tag-chip.tag-lost button{color:#b43b3b}

/* Character cards grow when needed so every tag remains visible. */
.character-card{height:auto;min-height:150px}
.character-card-thumb{height:100%;min-height:150px}
.character-card-body{align-self:stretch}
.character-card .tag-row{max-height:none;overflow:visible;padding-bottom:2px}

@media(max-width:980px){
  .sheet-title-row{width:100%;max-width:100%;overflow:hidden}
  .sheet-name{max-width:100%!important}
  .character-card-thumb{height:100%}
}

/* =========================================================
   v19: stable title overlay, weapon expansion, aligned stats,
   and matching portrait proportions in editor/detail
   ========================================================= */
/* The title/meta row may extend over the portrait, but it no longer participates
   in header sizing, so long names cannot push the tabs or data pane wider/taller. */
@media(min-width:981px){
  .character-sheet-header{
    position:relative;
    height:178px;
    flex:0 0 178px;
    padding:0 22px!important;
    overflow:visible!important;
    z-index:20;
  }
  .character-sheet-header>.sheet-reading{
    position:absolute;
    left:22px;
    top:30px;
    width:calc(100% - 40px);
    min-height:1.1em;
  }
  .character-sheet-header>.sheet-title-row{
    position:absolute;
    left:22px;
    top:45px;
    width:calc(180% - 22px);
    max-width:none;
    min-height:88px;
    height:88px;
    margin:0;
    overflow:visible;
    z-index:35;
  }
  .character-sheet-header>.sheet-title-row .sheet-name{
    max-width:70%!important;
    flex:0 1 auto;
  }
  .character-sheet-header>.sheet-tabs{
    position:absolute;
    left:22px;
    right:18px;
    bottom:0;
    width:auto;
    min-height:45px;
    height:45px;
    margin:0 -8px;
    z-index:15;
  }
  /* The editor portrait panel now matches the detail screen's 46% image area. */
  body.character-editor-page .character-editor-shell{
    grid-template-columns:minmax(600px,54%) minmax(380px,46%)!important;
  }
  .editor-portrait img{width:99%;height:96%}
}

/* Back/edit controls are always the topmost interactive layer. */
.character-detail-shell>.sheet-controls{
  z-index:1000!important;
  pointer-events:auto;
}
.character-detail-shell>.sheet-controls .icon-button,
.character-detail-shell>.sheet-controls .current-character-button{pointer-events:auto}

/* Align the primary ability values along one lower baseline. */
.status-tab .stats-grid.ability-row .stat-cell{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-end;
  min-height:58px;
}
.status-tab .stats-grid.ability-row .stat-cell small{
  min-height:1.15em;
  display:flex;
  align-items:flex-end;
  justify-content:center;
}
.status-tab .stats-grid.ability-row .stat-value{margin-top:auto}

/* Weapon rows expand individually; the free-form "その他" text lives below. */
.weapon-list-wrap{overflow-x:auto;padding-bottom:4px}
.weapon-grid{
  display:grid;
  grid-template-columns:22px minmax(130px,1.4fr) minmax(105px,1.05fr) minmax(110px,1.1fr) minmax(78px,.8fr) minmax(76px,.72fr) minmax(64px,.62fr) minmax(64px,.62fr) minmax(58px,.58fr);
  gap:7px;
  align-items:center;
  min-width:910px;
}
.weapon-grid-head{
  padding:6px 8px;
  border-bottom:1px solid var(--line);
  color:#7d8791;
  font-size:.7rem;
  font-weight:650;
  background:#fafbfc;
}
.weapon-row-fold{min-width:910px;border-bottom:1px solid var(--line)}
.weapon-row-fold>summary{list-style:none;padding:8px;cursor:pointer}
.weapon-row-fold>summary::-webkit-details-marker{display:none}
.weapon-row-fold>summary:hover{background:#fafcfe}
.weapon-row-toggle::before{content:"›";display:block;color:#87919c;font-size:1rem;transform-origin:center;transition:transform .15s}
.weapon-row-fold[open] .weapon-row-toggle::before{transform:rotate(90deg)}
.weapon-row-fold .table-edit{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.weapon-row-extra{
  display:grid;
  grid-template-columns:92px minmax(0,1fr);
  gap:12px;
  align-items:start;
  padding:8px 14px 12px 37px;
  background:#fafbfc;
  min-width:910px;
}
.weapon-extra-label{font-size:.72rem;color:#7a8490;font-weight:650}
.weapon-extra-value{white-space:pre-wrap;overflow-wrap:anywhere;min-height:1.5em}
.weapon-empty{padding:14px 8px}
.weapon-grid.editable{grid-template-columns:22px minmax(130px,1.4fr) minmax(105px,1.05fr) minmax(110px,1.1fr) minmax(78px,.8fr) minmax(76px,.72fr) minmax(64px,.62fr) minmax(64px,.62fr) minmax(58px,.58fr) 30px}

/* Same expandable weapon model in the editor. */
.editor-weapon-list{overflow-x:auto;padding-bottom:4px}
.editor-weapon-grid{
  display:grid;
  grid-template-columns:22px minmax(125px,1.35fr) minmax(100px,1fr) minmax(108px,1.05fr) minmax(76px,.76fr) minmax(74px,.7fr) minmax(62px,.6fr) minmax(62px,.6fr) minmax(58px,.56fr) 30px;
  gap:5px;
  align-items:center;
  min-width:900px;
}
.editor-weapon-head{padding:5px 0;border-bottom:1px solid var(--line);font-size:.68rem;color:#858e98}
.editor-weapon-row{min-width:900px;border-bottom:1px solid #edf0f2}
.editor-weapon-row>summary{list-style:none;padding:5px 0;cursor:pointer}
.editor-weapon-row>summary::-webkit-details-marker{display:none}
.editor-weapon-row input{min-width:0;width:100%;padding:5px 4px;font-size:.78rem}
.editor-weapon-note{display:grid!important;grid-template-columns:72px minmax(0,1fr);gap:8px;align-items:start;margin:0;padding:8px 28px 10px;background:#fafbfc}
.editor-weapon-note>span{font-size:.72rem;color:#78828e;padding-top:6px}
.editor-weapon-note textarea{min-height:58px;margin:0;font-size:.8rem}
.editor-weapon-row[open] .weapon-row-toggle::before{transform:rotate(90deg)}

@media(max-width:980px){
  .character-sheet-header{height:auto;flex-basis:auto}
  .character-sheet-header>.sheet-reading,.character-sheet-header>.sheet-title-row,.character-sheet-header>.sheet-tabs{position:static;width:auto;height:auto}
  .character-sheet-header>.sheet-title-row{min-height:90px}
  .character-detail-shell>.sheet-controls{z-index:1000!important}
}

/* =========================================================
   v20: preserve v19 header separation while restoring v18
   vertical rhythm; top-right image colour emphasis; compact
   item typography without truncating names/descriptions.
   ========================================================= */
@media(min-width:981px){
  /* v18 used a 188px fixed header with reading -> 90px title zone -> tabs.
     Keep the v19 absolute separation so long names never resize the data pane. */
  .character-sheet-header{
    height:188px;
    flex:0 0 188px;
    padding:0 22px!important;
  }
  .character-sheet-header>.sheet-reading{
    top:16px;
    min-height:18px;
    height:18px;
    line-height:18px;
  }
  .character-sheet-header>.sheet-title-row{
    top:36px;
    min-height:90px;
    height:90px;
  }
  .character-sheet-header>.sheet-tabs{
    bottom:0;
    min-height:45px;
    height:45px;
  }
}

/* Image-colour area: darkest at the upper-right, fading toward the lower-left.
   The clipped diagonal is gentler than before. */
.character-detail-shell::before,
.character-detail-shell.tab-status::before{
  background:linear-gradient(225deg,
    color-mix(in srgb,var(--character-color) 78%,white) 0%,
    color-mix(in srgb,var(--character-color) 50%,white) 44%,
    color-mix(in srgb,var(--character-color) 18%,white) 100%);
  clip-path:polygon(12% 0,100% 0,100% 100%,0 100%);
}
.editor-portrait{
  background:linear-gradient(225deg,
    color-mix(in srgb,var(--character-color) 78%,white) 0%,
    color-mix(in srgb,var(--character-color) 50%,white) 44%,
    color-mix(in srgb,var(--character-color) 18%,white) 100%)!important;
}

/* Item tab: denser typography, but never hide long weapon/item names or notes. */
.items-tab .fold>summary{font-size:.9rem}
.weapon-grid,
.weapon-grid-head,
.weapon-row-extra,
.inventory-table th,
.inventory-table td{font-size:.74rem}
.weapon-grid-head{font-size:.66rem}
.weapon-row-fold .table-edit{
  white-space:normal;
  overflow:visible;
  text-overflow:clip;
  overflow-wrap:anywhere;
  line-height:1.35;
  font-size:.74rem;
}
.weapon-row-fold>summary{align-items:start}
.weapon-extra-value{
  white-space:pre-wrap!important;
  overflow:visible!important;
  text-overflow:clip!important;
  overflow-wrap:anywhere;
  font-size:.74rem;
}
.inventory-table{table-layout:auto}
.inventory-table .table-edit{
  white-space:normal;
  overflow:visible;
  text-overflow:clip;
  overflow-wrap:anywhere;
  line-height:1.4;
  font-size:.74rem;
}
.inventory-table td:nth-child(1){min-width:150px;max-width:none}
.inventory-table td:nth-child(2){width:58px;min-width:58px}
.inventory-table td:nth-child(3){min-width:240px;max-width:none;text-align:left}

@media(max-width:980px){
  .character-detail-shell::before,.character-detail-shell.tab-status::before{clip-path:none}
}

/* =========================================================
   v21: item hierarchy, steeper-left colour panel and
   transparent-aware portrait defaults
   ========================================================= */
/* Item section titles use the same hierarchy as other tab titles. */
.items-tab>.fold>summary{
  font-size:1rem!important;
  line-height:1.4;
  font-weight:700;
}

/* Keep only the primary weapon identity in the collapsed row. */
.weapon-grid{
  grid-template-columns:22px minmax(190px,1.55fr) minmax(135px,1fr) minmax(150px,1.1fr);
  gap:10px;
  min-width:610px;
  font-size:.8rem;
}
.weapon-grid.editable{
  grid-template-columns:22px minmax(190px,1.55fr) minmax(135px,1fr) minmax(150px,1.1fr) 30px;
}
.weapon-grid-head{
  min-width:610px;
  font-size:.75rem;
}
.weapon-row-fold{min-width:610px}
.weapon-row-fold>summary{
  font-family:inherit;
  font-weight:400!important;
  font-size:.8rem;
  line-height:1.45;
}
.weapon-row-fold .table-edit{font-size:.8rem}
.weapon-row-extra{
  display:block;
  min-width:610px;
  padding:10px 14px 13px 37px;
  font-family:inherit;
  font-size:.8rem;
}
.weapon-extra-grid{
  display:grid;
  grid-template-columns:repeat(5,minmax(88px,1fr));
  gap:9px 14px;
  align-items:start;
}
.weapon-detail-field{display:grid;grid-template-columns:auto minmax(0,1fr);gap:7px;align-items:baseline;min-width:0}
.weapon-detail-label{color:#737d89;font:inherit;font-weight:600;white-space:nowrap}
.weapon-detail-value{font:inherit;line-height:1.45;white-space:normal;overflow-wrap:anywhere}
.weapon-detail-note{grid-column:1/-1;grid-template-columns:52px minmax(0,1fr)}

/* Inventory is compact but slightly larger than v20 and remains fully readable. */
.inventory-table th,.inventory-table td{font-size:.8rem}
.inventory-table .table-edit{font-size:.8rem;line-height:1.45}

/* Editor weapon rows mirror the detail screen's collapsed/expanded structure. */
.editor-weapon-grid{
  grid-template-columns:22px minmax(190px,1.5fr) minmax(135px,1fr) minmax(150px,1.1fr) 30px;
  min-width:610px;
  gap:8px;
}
.editor-weapon-head{font-size:.75rem}
.editor-weapon-row{min-width:610px}
.editor-weapon-row>summary{font-family:inherit;font-weight:400!important}
.editor-weapon-row input{font-family:inherit;font-size:.8rem}
.editor-weapon-extra-grid{
  display:grid;
  grid-template-columns:repeat(5,minmax(90px,1fr));
  gap:9px 12px;
  padding:10px 28px 13px 30px;
  background:#fafbfc;
  font-family:inherit;
}
.editor-weapon-detail{display:grid;grid-template-columns:auto minmax(0,1fr);gap:7px;align-items:center;margin:0!important;font:inherit!important;color:inherit!important}
.editor-weapon-detail>span{font:inherit;color:#737d89;font-weight:600;white-space:nowrap}
.editor-weapon-detail input{min-width:0;width:100%;font-size:.8rem}
.editor-weapon-detail.editor-weapon-note{grid-column:1/-1;grid-template-columns:52px minmax(0,1fr);align-items:start}
.editor-weapon-detail.editor-weapon-note textarea{min-height:62px;margin:0;font-family:inherit;font-size:.8rem;line-height:1.45}

/* Move the colour field left and make its separating diagonal more pronounced.
   The gradient remains darkest at the upper-right and fades lower-left. */
@media(min-width:981px){
  .character-detail-shell::before,
  .character-detail-shell.tab-status::before{
    width:55%!important;
    clip-path:polygon(30% 0,100% 0,100% 100%,0 100%)!important;
  }
  body.character-editor-page .character-editor-shell::before{
    content:"";
    position:absolute;
    z-index:0;
    inset:0 0 0 auto;
    width:55%;
    border-radius:0 16px 16px 0;
    pointer-events:none;
    background:linear-gradient(225deg,
      color-mix(in srgb,var(--character-color) 78%,white) 0%,
      color-mix(in srgb,var(--character-color) 50%,white) 44%,
      color-mix(in srgb,var(--character-color) 18%,white) 100%);
    clip-path:polygon(30% 0,100% 0,100% 100%,0 100%);
  }
  body.character-editor-page .editor-sheet,
  body.character-editor-page .editor-portrait{position:relative;z-index:1;background:transparent!important}
}

@media(max-width:980px){
  .weapon-extra-grid,.editor-weapon-extra-grid{grid-template-columns:repeat(2,minmax(120px,1fr))}
  .weapon-detail-note,.editor-weapon-detail.editor-weapon-note{grid-column:1/-1}
  .editor-portrait{
    background:linear-gradient(225deg,
      color-mix(in srgb,var(--character-color) 78%,white) 0%,
      color-mix(in srgb,var(--character-color) 50%,white) 44%,
      color-mix(in srgb,var(--character-color) 18%,white) 100%)!important;
  }
}
.editor-weapon-detail.editor-weapon-note{padding:0!important;background:transparent!important}
.editor-weapon-detail.editor-weapon-note>span{padding-top:6px!important}

/* =========================================================
   v22: home settings, full-data backup and dark mode
   ========================================================= */
.home-settings-section{margin-top:32px;padding-top:2px}
.home-settings-section>h2{margin:0 0 12px}
.home-settings-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.home-setting-card{min-height:154px}
.home-setting-card h3{margin:0 0 12px;font-size:1rem}
.home-setting-toggle{display:flex!important;align-items:center;justify-content:space-between;gap:18px;margin:0!important;padding:10px 0;cursor:pointer}
.home-setting-toggle>span{display:grid;gap:3px;min-width:0}
.home-setting-toggle b{font-size:.9rem}
.home-setting-toggle small{font-size:.76rem;color:var(--muted);font-weight:400;line-height:1.45}
.home-setting-toggle input{width:auto;flex:0 0 auto;margin:0}
.home-backup-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:14px}
.visually-hidden-file{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}

/* Theme variables */
body.dark-mode{
  --bg:#111419;
  --panel:#191d24;
  --text:#e8ebef;
  --muted:#9aa3ae;
  --line:#303741;
  --soft:#222832;
  --accent:#69adf2;
  --accent-soft:#20364b;
  --danger:#ef7777;
  background:var(--bg);
  color:var(--text);
}
body.dark-mode .app-header,
body.dark-mode .card,
body.dark-mode .filter-panel,
body.dark-mode .character-card,
body.dark-mode .session-list,
body.dark-mode .character-detail-shell,
body.dark-mode .character-data-pane,
body.dark-mode .character-sheet-header,
body.dark-mode .editor-card,
body.dark-mode .character-editor-shell,
body.dark-mode .editor-sheet,
body.dark-mode .create-setup-panel,
body.dark-mode .create-setup-card,
body.dark-mode dialog,
body.dark-mode .import-update-panel,
body.dark-mode .history-diff-panel{
  background:var(--panel)!important;
  color:var(--text);
}
body.dark-mode button,
body.dark-mode input,
body.dark-mode textarea,
body.dark-mode select{
  background:#1d222a;
  border-color:#39414c;
  color:var(--text);
}
body.dark-mode button:hover{background:#252b34;border-color:#505966}
body.dark-mode .primary{background:#586472;color:#fff;border-color:#667484}
body.dark-mode .primary:hover{background:#657282}
body.dark-mode .app-header nav button{background:transparent}
body.dark-mode .app-header nav button:hover{background:#20262e}
body.dark-mode input:disabled,
body.dark-mode textarea:disabled,
body.dark-mode select:disabled{background:#171b21!important;color:#737d89!important}
body.dark-mode input::placeholder,
body.dark-mode textarea::placeholder{color:#6f7883}
body.dark-mode .datum-label,
body.dark-mode .status-pill,
body.dark-mode .filter-condition-name{color:#aeb6c0}
body.dark-mode .datum-label{background:#252b33}
body.dark-mode .tag-chip{background:#213247;color:#9fc9f6}
body.dark-mode .tag-chip.tag-lost{background:#452528;color:#ff9a9a;border-color:#6d3b40}
body.dark-mode .status-pill{background:#252b33}
body.dark-mode .status-pill.completed{background:#20372a;color:#86c995}
body.dark-mode .status-pill.postponed{background:#403521;color:#dcb86b}
body.dark-mode .status-pill.cancelled{background:#40272a;color:#d99097}
body.dark-mode .data-table th,
body.dark-mode .skill-head{background:#1d2229!important;color:#a6aeb8}
body.dark-mode .data-table th,
body.dark-mode .data-table td{border-color:var(--line)}
body.dark-mode .skill-name,
body.dark-mode .skill-total,
body.dark-mode .history-diff-modal-row pre:last-child{color:var(--text)}
body.dark-mode .read-block,
body.dark-mode .plain-text,
body.dark-mode .history-diff-modal-label{color:#d6dbe1}
body.dark-mode .personal-add>summary,
body.dark-mode .personal-add-menu,
body.dark-mode .participant,
body.dark-mode .session-choice,
body.dark-mode .history-participant,
body.dark-mode .status-filter-check,
body.dark-mode .multi-select-filter-menu,
body.dark-mode .url-open-button,
body.dark-mode .history-diff-open{
  background:#1d2229!important;
  color:var(--text);
  border-color:var(--line);
}
body.dark-mode .personal-add-menu button{background:transparent}
body.dark-mode .personal-add-menu button:hover,
body.dark-mode .status-filter-check:hover,
body.dark-mode .session-choice:hover{background:#252b34!important}
body.dark-mode .history-expanded,
body.dark-mode .history-entry[open]>.history-row,
body.dark-mode .editor-weapon-extra-grid,
body.dark-mode .backstory-visibility,
body.dark-mode .import-update-row:hover{background:#171b21!important}
body.dark-mode .history-diff-modal-row pre{background:#20262e;color:#bdc5cf}
body.dark-mode .history-diff-modal-row pre:last-child{background:#1c3043}
body.dark-mode .settings-danger{background:#2a1d1f;border-color:#563034}
body.dark-mode .settings-danger h3{color:#f08b8b}
body.dark-mode .snapshot-banner{background:#302b1d;border-color:#584b27;color:#ded3a4}
body.dark-mode .import-box{background:#182536}
body.dark-mode .session-field-value input,
body.dark-mode .session-field-value textarea,
body.dark-mode .session-field-value select{background:transparent}
body.dark-mode .session-field-value input:hover,
body.dark-mode .session-field-value textarea:hover,
body.dark-mode .session-field-value select:hover,
body.dark-mode .session-field-value input:focus,
body.dark-mode .session-field-value textarea:focus,
body.dark-mode .session-field-value select:focus{background:#1d2229;border-color:#4a5360}
body.dark-mode .character-card:hover{box-shadow:0 5px 20px #0005;border-color:#46505c}
body.dark-mode .character-card-thumb{background:linear-gradient(150deg,color-mix(in srgb,var(--character-color,#9fc9f5) 30%,#171b21),#20252d)}
body.dark-mode .character-detail-shell::before,
body.dark-mode .character-detail-shell.tab-status::before,
body.dark-mode.character-editor-page .character-editor-shell::before{
  background:linear-gradient(225deg,
    color-mix(in srgb,var(--character-color) 70%,#20242b) 0%,
    color-mix(in srgb,var(--character-color) 43%,#20242b) 44%,
    color-mix(in srgb,var(--character-color) 16%,#171b21) 100%)!important;
}
body.dark-mode .editor-portrait{
  background:linear-gradient(225deg,
    color-mix(in srgb,var(--character-color) 70%,#20242b) 0%,
    color-mix(in srgb,var(--character-color) 43%,#20242b) 44%,
    color-mix(in srgb,var(--character-color) 16%,#171b21) 100%)!important;
}
body.dark-mode .sheet-tabs button{background:transparent;color:#aeb6c0}
body.dark-mode .sheet-tabs button.active{color:#f0f3f6}
body.dark-mode .image-file-button,
body.dark-mode .current-character-button,
body.dark-mode .sheet-controls .icon-button{background:#1d222ae8}
body.dark-mode .character-tab-scroll.is-scrolling,
body.dark-mode .editor-tab-scroll.is-scrolling{scrollbar-color:#4b5562 transparent}
body.dark-mode .character-tab-scroll.is-scrolling::-webkit-scrollbar-thumb,
body.dark-mode .editor-tab-scroll.is-scrolling::-webkit-scrollbar-thumb{background:#4b5562}
body.dark-mode .home-session-title{background:transparent}
body.dark-mode .home-session-title:hover{background:transparent;color:var(--accent)}

@media(max-width:760px){
  .home-settings-grid{grid-template-columns:1fr}
}

/* =========================================================
   v23: softer dark mode, consistent session filter,
   single-line unsaved editor status
   ========================================================= */

/* Session status filter uses the same field rhythm as the other selects. */
.filter-field{display:block;margin:10px 0;font-size:.9rem}
.filter-field-label{margin-bottom:0}
.session-status-filter-field .multi-select-filter{margin:0}
.session-status-filter-field .multi-select-filter>summary{
  margin-top:0;
  min-height:39px;
  padding:9px 30px 9px 10px;
  border-color:#d9dde2;
  border-radius:7px;
  font-size:.9rem;
  font-weight:400;
  line-height:20px;
}

/* Save note remains beside the button and never wraps to a second line. */
.editor-save-area{flex-wrap:nowrap;white-space:nowrap}
.editor-point-warning{
  max-width:none;
  white-space:nowrap;
  line-height:1.2;
  font-size:.74rem;
  text-align:right;
}
.editor-point-warning.is-unsaved{color:#9a6700}
.editor-point-warning.is-error{color:#c62828;font-weight:600}
@media(max-width:980px){
  .editor-point-warning{font-size:.68rem;max-width:none;white-space:nowrap}
}

/* A softer charcoal theme: dark enough for contrast without near-black surfaces. */
body.dark-mode{
  --bg:#20242a;
  --panel:#292e35;
  --text:#e7e9ec;
  --muted:#a7adb5;
  --line:#414851;
  --soft:#323840;
  --accent:#78afe4;
  --accent-soft:#33475b;
  --danger:#e57f7f;
  background:var(--bg);
}
body.dark-mode .app-header,
body.dark-mode .card,
body.dark-mode .filter-panel,
body.dark-mode .character-card,
body.dark-mode .session-list,
body.dark-mode .character-detail-shell,
body.dark-mode .character-data-pane,
body.dark-mode .character-sheet-header,
body.dark-mode .editor-card,
body.dark-mode .character-editor-shell,
body.dark-mode .editor-sheet,
body.dark-mode .create-setup-panel,
body.dark-mode .create-setup-card,
body.dark-mode dialog,
body.dark-mode .import-update-panel,
body.dark-mode .history-diff-panel{
  background:var(--panel)!important;
}
body.dark-mode button,
body.dark-mode input,
body.dark-mode textarea,
body.dark-mode select{
  background:#31363e;
  border-color:#4a525d;
  color:var(--text);
}
body.dark-mode button:hover{background:#394049;border-color:#626c78}
body.dark-mode .primary{background:#5d748a;border-color:#6a8197}
body.dark-mode .primary:hover{background:#687f95}
body.dark-mode .app-header nav button:hover{background:#343a42}
body.dark-mode input:disabled,
body.dark-mode textarea:disabled,
body.dark-mode select:disabled{background:#252a31!important;color:#858d97!important}
body.dark-mode input::placeholder,
body.dark-mode textarea::placeholder{color:#858d97}
body.dark-mode .datum-label{background:#353b43;color:#c0c6cd}
body.dark-mode .status-pill{background:#363c44;color:#c5cbd2}
body.dark-mode .data-table th,
body.dark-mode .skill-head{background:#30353c!important;color:#bcc2c9}
body.dark-mode .personal-add>summary,
body.dark-mode .personal-add-menu,
body.dark-mode .participant,
body.dark-mode .session-choice,
body.dark-mode .history-participant,
body.dark-mode .status-filter-check,
body.dark-mode .multi-select-filter-menu,
body.dark-mode .url-open-button,
body.dark-mode .history-diff-open,
body.dark-mode .multi-select-filter>summary{
  background:#31363e!important;
  color:var(--text);
  border-color:#4a525d;
}
body.dark-mode .personal-add-menu button:hover,
body.dark-mode .status-filter-check:hover,
body.dark-mode .session-choice:hover{background:#3a414a!important}
body.dark-mode .history-expanded,
body.dark-mode .history-entry[open]>.history-row,
body.dark-mode .editor-weapon-extra-grid,
body.dark-mode .backstory-visibility,
body.dark-mode .import-update-row:hover{background:#252a31!important}
body.dark-mode .history-diff-modal-row pre{background:#30363e;color:#cbd0d6}
body.dark-mode .history-diff-modal-row pre:last-child{background:#30465a}
body.dark-mode .settings-danger{background:#38292b;border-color:#624348}
body.dark-mode .snapshot-banner{background:#403a29;border-color:#6a5d39;color:#e2d7aa}
body.dark-mode .import-box{background:#2b3948}
body.dark-mode .session-field-value input:hover,
body.dark-mode .session-field-value textarea:hover,
body.dark-mode .session-field-value select:hover,
body.dark-mode .session-field-value input:focus,
body.dark-mode .session-field-value textarea:focus,
body.dark-mode .session-field-value select:focus{background:#343a42;border-color:#59626e}
body.dark-mode .character-card:hover{box-shadow:0 5px 20px #0003;border-color:#59636f}
body.dark-mode .sheet-tabs button{color:#b8bec6}
body.dark-mode .sheet-tabs button.active{color:#f5f6f7}
body.dark-mode .image-file-button,
body.dark-mode .current-character-button,
body.dark-mode .sheet-controls .icon-button{background:#30363edb}

/* Tags in character detail use neutral translucent chips so they do not clash
   with the image colour background. */
body.dark-mode .character-detail-shell .tag-chip,
body.dark-mode .character-editor-shell .tag-chip,
body.dark-mode .character-card .tag-chip{
  background:rgba(52,59,68,.88);
  color:#e0e5eb;
  border:1px solid #56606c;
}
body.dark-mode .character-detail-shell .tag-chip.tag-lost,
body.dark-mode .character-editor-shell .tag-chip.tag-lost,
body.dark-mode .character-card .tag-chip.tag-lost{
  background:#573236;
  color:#ffb0b0;
  border-color:#7b4b50;
}
body.dark-mode .tag-inline-input{
  background:rgba(46,52,60,.9)!important;
  color:#e4e8ed!important;
  border-color:#616b77!important;
}
body.dark-mode .editor-point-warning.is-unsaved{color:#e0b55f}
body.dark-mode .editor-point-warning.is-error{color:#ff9b9b}
body.dark-mode .character-detail-shell::before,
body.dark-mode .character-detail-shell.tab-status::before,
body.dark-mode.character-editor-page .character-editor-shell::before,
body.dark-mode .editor-portrait{
  background:linear-gradient(225deg,
    color-mix(in srgb,var(--character-color) 62%,#3a4048) 0%,
    color-mix(in srgb,var(--character-color) 36%,#343a42) 46%,
    color-mix(in srgb,var(--character-color) 12%,#292e35) 100%)!important;
}


/* =========================================================
   v24: header theme toggle, calmer dark controls,
   compact point cards and stable skill deletion
   ========================================================= */

/* Theme switch lives at the far right of the global header. */
.theme-toggle{
  margin-left:auto;
  width:36px;
  height:36px;
  padding:0;
  display:grid;
  place-items:center;
  flex:0 0 36px;
  border:1px solid var(--line);
  border-radius:50%;
  background:var(--panel);
  color:var(--text);
  font-size:1.05rem;
  line-height:1;
}
.theme-toggle:hover{background:var(--soft)}
.home-settings-grid-single{grid-template-columns:minmax(0,1fr);max-width:760px}

/* Use one subdued chevron instead of a different text glyph for open/closed states. */
.multi-select-filter>summary::after,
.multi-select-filter[open]>summary::after{
  content:"";
  width:7px;
  height:7px;
  right:12px;
  top:50%;
  border-right:1.5px solid #77818d;
  border-bottom:1.5px solid #77818d;
  transform:translateY(-68%) rotate(45deg);
  transform-origin:center;
}

/* Keep the profession/interest readouts compact instead of stretching across the tab. */
.editor-points-computed{
  width:min(100%,680px);
  grid-template-columns:minmax(170px,1.35fr) repeat(4,minmax(86px,.8fr));
  gap:8px;
  align-items:stretch;
}
.editor-points-computed>label,.computed-point{
  min-height:50px;
  padding:6px 8px;
}
.editor-points-computed select{margin-top:3px;padding:5px 6px}
.computed-point{gap:2px 6px}
.computed-point span{font-size:.7rem}
.computed-point b{font-size:.94rem}
.computed-point small{font-size:.61rem}

/* Dark-mode surfaces that remained brighter than the rest of the UI. */
body.dark-mode .session-status-filter-field .multi-select-filter>summary,
body.dark-mode .session-status-filter-field .multi-select-filter .status-filter-list{
  background:#2b3037!important;
  border-color:#454d57;
  color:#d9dde2;
}
body.dark-mode .session-status-filter-field .status-filter-check{
  background:transparent!important;
  color:#d6dbe0;
}
body.dark-mode .session-status-filter-field .status-filter-check:hover{
  background:#343a42!important;
}
body.dark-mode .session-status-filter-field .multi-select-filter>summary::after,
body.dark-mode .session-status-filter-field .multi-select-filter[open]>summary::after{
  border-color:#9aa3ad;
}
body.dark-mode .weapon-row-fold>summary:hover,
body.dark-mode .weapon-row-fold[open]>summary{
  background:#30363e!important;
}
body.dark-mode .weapon-row-extra{
  background:#272c33!important;
  color:var(--text);
}
body.dark-mode .weapon-detail-label{color:#aeb5bd}
body.dark-mode .editor-stat-field.calculated output{
  background:#2c3239!important;
  border-color:#474f59!important;
  color:#dce0e5!important;
}
body.dark-mode .editor-points-computed>label,
body.dark-mode .computed-point{
  background:#2c3239!important;
  border-color:#474f59!important;
  color:#dce0e5;
}
body.dark-mode .computed-point span,
body.dark-mode .editor-points-computed>label{color:#b5bdc6!important}
body.dark-mode .computed-point b{color:#eef0f3!important}
body.dark-mode .computed-point small{color:#969faa!important}
body.dark-mode .theme-toggle{
  background:#30363d;
  border-color:#4a525d;
  color:#e5e8ec;
}
body.dark-mode .theme-toggle:hover{background:#3a4149}

@media(max-width:900px){
  .editor-points-computed{width:100%;grid-template-columns:repeat(2,minmax(120px,1fr))}
  .editor-points-computed>label{grid-column:1/-1}
}
@media(max-width:650px){
  .app-header{gap:7px}
  .theme-toggle{width:34px;height:34px;flex-basis:34px}
  .editor-points-computed{grid-template-columns:1fr}
  .editor-points-computed>label{grid-column:auto}
}

/* =========================================================
   v25: calmer save hover, weapon headers, faithful colour
   panels in dark mode, and rounded theme icons
   ========================================================= */

/* Keep the light-mode save action subdued instead of flashing nearly white. */
body:not(.dark-mode) .editor-save.primary:hover:not(:disabled){
  background:#545b62;
  border-color:#545b62;
  color:#fff;
}

/* Weapon column headings should sit quietly within the dark palette. */
body.dark-mode .weapon-grid-head,
body.dark-mode .editor-weapon-head{
  background:#2b3037!important;
  color:#b6bdc6!important;
  border-color:#454d57!important;
}

/* The character image-colour field should retain the same colour expression
   in both themes; dark mode changes only the surrounding UI surfaces. */
body.dark-mode .character-detail-shell::before,
body.dark-mode .character-detail-shell.tab-status::before,
body.dark-mode.character-editor-page .character-editor-shell::before{
  background:linear-gradient(225deg,
    color-mix(in srgb,var(--character-color) 78%,white) 0%,
    color-mix(in srgb,var(--character-color) 50%,white) 44%,
    color-mix(in srgb,var(--character-color) 18%,white) 100%)!important;
}
@media(max-width:980px){
  body.dark-mode .editor-portrait{
    background:linear-gradient(225deg,
      color-mix(in srgb,var(--character-color) 78%,white) 0%,
      color-mix(in srgb,var(--character-color) 50%,white) 44%,
      color-mix(in srgb,var(--character-color) 18%,white) 100%)!important;
  }
}

/* Softer, rounded line icons for the global light/dark switch. */
.theme-toggle{
  border-radius:999px;
  overflow:hidden;
}
.theme-toggle .theme-icon{
  width:21px;
  height:21px;
  display:block;
  fill:none;
  stroke:currentColor;
  stroke-width:1.75;
  stroke-linecap:round;
  stroke-linejoin:round;
  pointer-events:none;
}
.theme-toggle .theme-icon-sun circle{
  fill:color-mix(in srgb,currentColor 12%,transparent);
}
.theme-toggle .theme-icon-moon{
  width:20px;
  height:20px;
}

/* Ensure the same diagonal colour panel remains visible through dark-mode
   detail/editor content surfaces on desktop. */
@media(min-width:981px){
  body.dark-mode .character-detail-shell .character-data-pane,
  body.dark-mode .character-detail-shell .character-sheet-header,
  body.dark-mode.character-editor-page .editor-sheet,
  body.dark-mode.character-editor-page .editor-portrait{
    background:transparent!important;
  }
}

/* Calm the weapon section titles as well as their column headings in dark mode. */
body.dark-mode .items-tab>.fold:first-child>summary,
body.dark-mode .editor-tab-scroll .editor-section:first-child>h3{
  color:#c5cbd2!important;
}

/* =========================================================
   v27: variable-based Cocofolia palette support is handled in
   app.js; refine the image-colour field specifically for dark
   mode so the right edge is brightest and the tone deepens
   toward the lower centre of the sheet.
   ========================================================= */
body.dark-mode .character-detail-shell::before,
body.dark-mode .character-detail-shell.tab-status::before,
body.dark-mode.character-editor-page .character-editor-shell::before{
  background:linear-gradient(200deg,
    color-mix(in srgb,var(--character-color) 76%,white) 0%,
    color-mix(in srgb,var(--character-color) 54%,#343a42) 48%,
    color-mix(in srgb,var(--character-color) 22%,#20252c) 100%)!important;
}
@media(max-width:980px){
  body.dark-mode .editor-portrait{
    background:linear-gradient(200deg,
      color-mix(in srgb,var(--character-color) 76%,white) 0%,
      color-mix(in srgb,var(--character-color) 54%,#343a42) 48%,
      color-mix(in srgb,var(--character-color) 22%,#20252c) 100%)!important;
  }
}

/* =========================================================
   v30: list search, uniform character cards, NoData artwork,
   light/dark-consistent thumbnails
   ========================================================= */
.filter-search-label{display:block;margin-bottom:12px}
.filter-search-label .filter-search-input{width:100%;margin-top:6px}

/* Keep every card in the current result set the same height. JavaScript raises
   all cards to the tallest card so all tags remain visible without truncation. */
.character-card-grid{align-items:start}
.character-card{min-height:170px}
.character-card-thumb{min-height:170px;height:100%;align-items:center;justify-content:center}
.character-card-thumb img{
  width:100%;height:100%;object-fit:contain;object-position:center center;
  transform:none!important;
}
.character-card-fallback{
  width:100%;height:100%;min-height:170px;display:flex;align-items:center;justify-content:center;
  align-self:stretch;font-size:1rem;font-weight:650;letter-spacing:.08em;color:#7d8792;
  background:linear-gradient(145deg,rgba(255,255,255,.42),rgba(255,255,255,.08));
}
.character-card-fallback span{padding:7px 10px;border:1px solid rgba(100,110,122,.28);border-radius:8px;background:rgba(255,255,255,.34)}

/* Card artwork keeps its character colour in dark mode instead of being mixed
   with the dark UI surfaces. */
body.dark-mode .character-card-thumb{
  background:linear-gradient(150deg,
    color-mix(in srgb,var(--character-color,#9fc9f5) 28%,white),
    #f4f5f8)!important;
}
body.dark-mode .character-card-fallback{color:#66717d;background:linear-gradient(145deg,rgba(255,255,255,.46),rgba(255,255,255,.12))}
body.dark-mode .character-card-fallback span{background:rgba(255,255,255,.42);border-color:rgba(95,106,118,.26)}

/* =========================================================
   v31: stable list search/card artwork and session detail sheet
   ========================================================= */

/* Character-card artwork uses the source image canvas (when available) as its
   100% reference. `contain` keeps the upper edge visible; the image is centred
   instead of inheriting the character-sheet crop/transform. */
.character-card{width:100%}
.character-card-thumb{overflow:hidden}
.character-card-thumb img{
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  object-position:center center!important;
  transform:none!important;
  max-width:none!important;
  max-height:none!important;
}

/* Session detail follows the visual language of the character sheet. */
.session-detail-shell{
  position:relative;
  width:min(1120px,100%);
  min-height:calc(100vh - 124px);
  margin:0 auto;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:16px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
.session-detail-back{
  position:absolute;
  top:18px;
  left:20px;
  z-index:5;
}
.session-detail-header{
  flex:0 0 auto;
  padding:28px 38px 0 84px;
  background:var(--panel);
}
.session-detail-title-row{
  min-height:72px;
  display:flex;
  align-items:center;
  gap:22px;
}
.session-detail-title{
  flex:1 1 auto;
  min-width:0;
  border:0;
  background:transparent;
  padding:4px 0;
  border-radius:0;
  font-size:clamp(1.8rem,3vw,2.8rem);
  line-height:1.15;
  font-weight:700;
  color:var(--text);
}
.session-detail-title:hover,
.session-detail-title:focus{
  background:transparent;
  border-color:transparent;
  outline:none;
  box-shadow:none;
}
.session-detail-status{
  flex:0 0 auto;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.session-detail-status button{
  min-width:58px;
  padding:6px 11px;
  font-size:.82rem;
}
.session-detail-tabs{
  margin:10px -8px 0;
  min-height:45px;
}
.session-detail-content{
  flex:1 1 auto;
  min-height:0;
  padding:22px 38px 34px;
}
.session-tab-section>.section-title:first-child{margin-top:0}
.session-info-list{
  border-top:1px solid var(--line);
  margin-top:8px;
}
.session-info-row{
  display:grid;
  grid-template-columns:150px minmax(0,1fr);
  align-items:center;
  gap:18px;
  min-height:52px;
  margin:0;
  border-bottom:1px solid var(--line);
}
.session-info-row>span{
  padding:12px 8px;
  color:var(--muted);
  font-size:.82rem;
}
.session-info-row>div{
  min-width:0;
  padding:7px 0;
}
.session-info-row input,
.session-info-row select{
  max-width:100%;
  border-color:transparent;
  background:transparent;
  padding:7px 8px;
}
.session-info-row input:hover,
.session-info-row input:focus,
.session-info-row select:hover,
.session-info-row select:focus{
  border-color:var(--line);
  background:var(--soft);
}
.session-info-row .time-range-editor{max-width:430px}
.session-info-row .date-editor{max-width:360px}
.session-note-fold{
  margin-top:26px;
  border-top:1px solid var(--line);
}
.session-note-fold>summary{
  min-height:48px;
  padding:13px 2px;
  display:flex;
  align-items:center;
  gap:10px;
  list-style:none;
  cursor:pointer;
  font-weight:700;
}
.session-note-fold>summary::-webkit-details-marker{display:none}
.session-note-fold>summary::before{
  content:"⌄";
  width:18px;
  color:var(--muted);
  font-weight:500;
}
.session-note-fold:not([open])>summary::before{content:"›"}
.session-note-fold>summary .tiny-edit{margin-left:auto}
.session-note-content{padding:4px 4px 18px 22px}
.session-note-content .plain-text{white-space:pre-wrap;line-height:1.75;min-height:44px}
.session-note-content textarea{min-height:220px}
.session-participant-list{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
  gap:10px;
  margin-top:12px;
}
.session-participant-card{
  min-width:0;
  display:flex;
  align-items:center;
  gap:11px;
  text-align:left;
  padding:10px 12px;
  background:var(--panel);
}
.session-participant-card>span{min-width:0;display:grid;gap:2px}
.session-participant-card b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.session-participant-card small{color:var(--muted);font-size:.74rem}
.session-participant-edit{margin-top:14px}
.session-settings-danger{margin-top:8px}
.session-detail-footer{
  flex:0 0 auto;
  display:flex;
  justify-content:flex-end;
  padding:14px 38px 20px;
  border-top:1px solid var(--line);
  background:var(--panel);
}
.session-detail-footer .primary{min-width:92px}

body.dark-mode .session-detail-shell,
body.dark-mode .session-detail-header,
body.dark-mode .session-detail-footer,
body.dark-mode .session-participant-card{
  background:var(--panel)!important;
}
body.dark-mode .session-info-row input,
body.dark-mode .session-info-row select,
body.dark-mode .session-detail-title{
  color:var(--text);
}
body.dark-mode .session-info-row input:hover,
body.dark-mode .session-info-row input:focus,
body.dark-mode .session-info-row select:hover,
body.dark-mode .session-info-row select:focus{
  background:var(--soft)!important;
  border-color:var(--line)!important;
}

@media(max-width:760px){
  .session-detail-shell{min-height:calc(100vh - 96px);border-radius:12px}
  .session-detail-header{padding:72px 18px 0}
  .session-detail-back{top:16px;left:16px}
  .session-detail-title-row{align-items:flex-start;flex-direction:column;gap:10px;min-height:0}
  .session-detail-status{justify-content:flex-start}
  .session-detail-content{padding:18px 18px 28px}
  .session-detail-footer{padding:12px 18px 16px}
  .session-info-row{grid-template-columns:100px minmax(0,1fr);gap:8px}
  .session-participant-list{grid-template-columns:1fr}
}

/* =========================================================
   v32: import aliases, calmer primary actions, robust list search,
   expandable session index, and character-sheet-style session detail
   ========================================================= */

/* Keep the three high-frequency creation/backup actions subdued in light mode. */
body:not(.dark-mode) .toolbar .primary:hover,
body:not(.dark-mode) .home-backup-actions .primary:hover{
  background:#545b62;
  border-color:#545b62;
  color:#fff;
}

/* Session index rows now expand in place, like character scenario history. */
.session-list-entry{margin:0;border:0;border-bottom:1px solid var(--line);background:var(--panel)}
.session-list-entry:last-child{border-bottom:0}
.session-list-entry>summary{list-style:none;cursor:pointer}
.session-list-entry>summary::-webkit-details-marker{display:none}
.session-list-entry>.session-row{border-bottom:0}
.session-list-entry[open]>.session-row{background:var(--soft)}
.session-list-entry[open] .session-title-link{text-decoration:underline;text-underline-offset:3px}
.session-list-expanded{position:relative;padding:8px 22px 22px 74px;border-top:1px solid var(--line);background:color-mix(in srgb,var(--panel) 92%,var(--soft))}
.session-list-expanded-actions{position:absolute;right:16px;top:10px}
.session-list-expanded-grid{display:grid;gap:16px;padding-right:44px}
.session-list-expanded-grid>div{display:grid;grid-template-columns:138px minmax(0,1fr);gap:14px;align-items:start}
.session-list-meta-label{font-size:.76rem;color:var(--muted);padding-top:3px}
.session-list-participants{display:flex;gap:8px;flex-wrap:wrap}
.session-list-participant{display:inline-flex;align-items:center;gap:7px;padding:4px 9px 4px 5px;border-radius:999px;background:var(--panel);max-width:250px}
.session-list-participant .avatar{width:30px;height:30px;border-radius:50%}
.session-list-participant span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:.82rem}
.session-list-text{white-space:pre-wrap;line-height:1.65;overflow-wrap:anywhere}
body.dark-mode .session-list-entry,
body.dark-mode .session-list-expanded,
body.dark-mode .session-list-participant{background:var(--panel)}
body.dark-mode .session-list-entry[open]>.session-row{background:var(--soft)}

/* Session detail: a smaller image-colour accent than the character sheet. */
.session-detail-shell{isolation:isolate;--session-color:#9fc9f5}
.session-detail-shell::before{
  content:"";
  position:absolute;
  z-index:0;
  top:0;right:0;bottom:0;
  width:34%;
  pointer-events:none;
  background:linear-gradient(220deg,
    color-mix(in srgb,var(--session-color) 76%,white) 0%,
    color-mix(in srgb,var(--session-color) 42%,white) 48%,
    color-mix(in srgb,var(--session-color) 13%,white) 100%);
  clip-path:polygon(34% 0,100% 0,100% 100%,61% 100%);
  opacity:.9;
}
.session-detail-header,.session-detail-content,.session-detail-footer{position:relative;z-index:1;background:transparent!important}
.session-detail-back{left:auto;right:20px;z-index:7}
.session-detail-header{padding:28px 84px 0 38px}
.session-detail-title-row{min-height:62px;align-items:center}
.session-detail-title{padding-right:8px}
.session-detail-meta{display:flex;align-items:flex-start;gap:18px;min-height:42px;margin-top:3px;position:relative;z-index:2}
.session-detail-tags{display:flex;align-items:center;gap:6px;flex-wrap:wrap;min-width:0;flex:1}
.session-detail-tags .tag-chip button{padding:0;border:0;background:transparent;color:inherit;font-size:.9rem;line-height:1}
.session-tag-inline-input{width:104px!important;max-width:104px;padding:5px 7px!important;font-size:.76rem!important;background:color-mix(in srgb,var(--panel) 78%,transparent)!important}
.session-image-color{flex:0 0 auto;margin:0!important;background:color-mix(in srgb,var(--panel) 74%,transparent)}
.session-status-single{
  flex:0 0 auto;
  min-width:72px;
  border-radius:999px;
  padding:7px 14px;
  font-size:.82rem;
  font-weight:650;
  background:#eef1f4;
  border-color:#d9dee5;
  color:#59616b;
}
.session-status-single.upcoming{background:#edf3fa;color:#4f6f92;border-color:#cedbea}
.session-status-single.completed{background:#edf6ef;color:#3f744a;border-color:#cfe1d3}
.session-status-single.postponed{background:#f8f1df;color:#826d3d;border-color:#e7d9b6}
.session-status-single.cancelled{background:#f6e9e9;color:#8a4f4f;border-color:#e4caca}
.session-status-single:hover{filter:brightness(.98)}
body.dark-mode .session-status-single{filter:none}
body.dark-mode .session-status-single.upcoming{background:#334252;color:#c8d8e9;border-color:#4d6074}
body.dark-mode .session-status-single.completed{background:#30483a;color:#c8dfcf;border-color:#486653}
body.dark-mode .session-status-single.postponed{background:#4b4431;color:#e2d6b6;border-color:#655c43}
body.dark-mode .session-status-single.cancelled{background:#4d3739;color:#e4c5c7;border-color:#684a4d}
body.dark-mode .session-detail-shell::before{
  background:linear-gradient(220deg,
    color-mix(in srgb,var(--session-color) 66%,white) 0%,
    color-mix(in srgb,var(--session-color) 40%,#353b43) 48%,
    color-mix(in srgb,var(--session-color) 16%,#252a31) 100%);
  opacity:.82;
}

/* Small, conventional fold arrows for description/common HO/impression. */
.session-note-fold>summary::before{content:"▼"!important;width:13px;font-size:.58rem;line-height:1;color:var(--muted);font-weight:500}
.session-note-fold:not([open])>summary::before{content:"▶"!important}

/* Participant tab: circular portraits with a circular add control. */
.session-participant-list{
  display:flex;
  align-items:flex-start;
  flex-wrap:wrap;
  gap:14px 12px;
  margin-top:14px;
}
.session-participant-bubble-wrap{position:relative;width:86px;display:grid;justify-items:center}
.session-participant-bubble{
  width:86px;
  min-height:92px;
  padding:3px 2px 4px;
  border:0;
  background:transparent!important;
  display:grid;
  justify-items:center;
  align-content:start;
  gap:6px;
}
.session-participant-bubble:hover{border:0;background:transparent!important}
.session-participant-bubble .avatar{width:62px;height:62px;border-radius:50%;object-fit:cover;border:1px solid var(--line);box-shadow:0 1px 5px #0001}
.session-participant-bubble span{width:84px;text-align:center;font-size:.75rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.session-participant-remove{
  position:absolute;
  top:0;right:5px;
  width:22px;height:22px;
  padding:0;
  border-radius:50%;
  line-height:19px;
  font-size:.78rem;
  color:var(--muted);
  background:var(--panel);
}
.session-participant-add{
  width:62px;height:62px;
  margin:3px 12px 0;
  border-radius:50%;
  padding:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:1.65rem;
  font-weight:300;
  background:var(--panel);
}
.session-participant-empty{align-self:center;margin:20px 0 0 -6px}
body.dark-mode .session-participant-remove,
body.dark-mode .session-participant-add{background:var(--panel);border-color:var(--line)}

/* Single-character add/update dialog. */
.participant-search-label{margin:10px 0 14px}
.participant-choice-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;max-height:52vh;overflow:auto;padding-right:3px}
.participant-choice{display:flex;align-items:center;gap:10px;margin:0;padding:9px 10px;border:1px solid var(--line);border-radius:10px;background:var(--panel);cursor:pointer;min-width:0}
.participant-choice:hover{background:var(--soft)}
.participant-choice input{width:auto;flex:0 0 auto}
.participant-choice .avatar{width:42px;height:42px;border-radius:50%}
.participant-choice>span{min-width:0;display:grid;gap:2px}
.participant-choice b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.participant-choice small{font-size:.72rem;color:var(--muted)}

@media(max-width:760px){
  .session-detail-header{padding:70px 18px 0}
  .session-detail-back{left:auto;right:16px;top:16px}
  .session-detail-title-row{flex-direction:row;align-items:center;gap:8px}
  .session-detail-title{font-size:1.8rem}
  .session-detail-meta{flex-wrap:wrap}
  .session-image-color{margin-left:auto!important}
  .session-detail-shell::before{width:48%;clip-path:polygon(56% 0,100% 0,100% 100%,75% 100%)}
  .session-list-expanded{padding:10px 14px 18px 46px}
  .session-list-expanded-grid>div{grid-template-columns:1fr;gap:4px}
  .participant-choice-list{grid-template-columns:1fr}
}
body.dark-mode .session-detail-header,
body.dark-mode .session-detail-content,
body.dark-mode .session-detail-footer{
  background:transparent!important;
}

/* =========================================================
   v33: IME-safe list search, session detail polish, history memo
   ========================================================= */

/* Session title sits on the same visual baseline as the status control. */
.session-detail-title-row{
  align-items:flex-end;
  padding-top:8px;
}
.session-detail-title{
  transform:translateY(3px);
}
.session-status-single{
  margin-bottom:1px;
}

/* Keep image colour directly beside the tag controls. */
.session-detail-meta{
  gap:8px;
}
.session-detail-tags{
  flex:0 1 auto;
  max-width:100%;
}
.session-image-color{
  flex:0 0 auto;
  margin:0 0 0 2px!important;
  align-self:center;
}

/* The session accent remains modest overall, but widens toward the bottom. */
.session-detail-shell::before{
  width:34%;
  clip-path:polygon(72% 0,100% 0,100% 100%,18% 100%);
}
body.dark-mode .session-detail-shell::before{
  clip-path:polygon(72% 0,100% 0,100% 100%,18% 100%);
}

/* Impression starts cleanly, and its edit icon stays beside the title. */
.session-note-inline-edit>summary .tiny-edit{
  margin-left:0!important;
}
.session-note-no-top-line{
  border-top:0!important;
  margin-top:0!important;
}
.session-empty-note{
  display:flex;
  align-items:baseline;
  gap:12px;
  min-height:44px;
  line-height:1.65;
}
.session-empty-note>span{
  color:color-mix(in srgb,var(--muted) 58%,transparent);
  font-size:.78rem;
}
.session-empty-note>small{
  color:var(--muted);
  font-size:.84rem;
}

/* Circular participant portraits favor the face/top area only when cropping is needed. */
.session-participant-bubble .avatar{
  object-position:center 36%;
}

/* Per-character memo inside each scenario-history session. */
.history-session-memo{
  margin:16px 0 2px;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.history-session-memo>summary{
  display:flex;
  align-items:center;
  gap:8px;
  min-height:42px;
  padding:9px 2px;
  list-style:none;
  cursor:pointer;
  font-size:.84rem;
  font-weight:650;
}
.history-session-memo>summary::-webkit-details-marker{display:none}
.history-session-memo>summary::before{
  content:"▶";
  width:13px;
  color:var(--muted);
  font-size:.58rem;
  font-weight:500;
}
.history-session-memo[open]>summary::before{content:"▼"}
.history-session-memo>summary .tiny-edit{margin-left:0!important}
.history-session-memo-body{
  padding:2px 4px 14px 21px;
}
.history-session-memo-body textarea{
  min-height:120px;
}
.history-session-memo-empty{
  display:flex;
  align-items:baseline;
  gap:10px;
  color:var(--muted);
}
.history-session-memo-empty>span{
  opacity:.58;
  font-size:.76rem;
}
.history-session-memo-empty>small{
  font-size:.8rem;
}

/* The removed session footer must not reserve any visual space. */
.session-detail-footer{display:none!important}

@media(max-width:760px){
  .session-detail-title-row{padding-top:4px;align-items:flex-end}
  .session-detail-title{transform:translateY(2px)}
  .session-detail-shell::before{width:48%;clip-path:polygon(80% 0,100% 0,100% 100%,30% 100%)}
  body.dark-mode .session-detail-shell::before{clip-path:polygon(80% 0,100% 0,100% 100%,30% 100%)}
  .session-detail-tags{flex:1 1 100%}
}

/* =========================================================
   v34: high-quality small character avatars
   ========================================================= */
img.avatar{
  image-rendering:auto;
  backface-visibility:hidden;
}

/* =========================================================
   v35: reliable list search + fixed session detail header
   ========================================================= */

/* Explicitly honor search filtering even when component rules set display. */
.character-card[hidden],
.session-list-entry[hidden]{display:none!important}

/* Session detail scrollbar behavior. Layout itself is defined once in the
   canonical block at the end of this stylesheet. */
body.session-detail-page .session-detail-content{
  scrollbar-width:thin;
  scrollbar-color:transparent transparent;
}
body.session-detail-page .session-detail-content.is-scrolling{scrollbar-color:#cfd5dc transparent}
body.session-detail-page .session-detail-content::-webkit-scrollbar{width:7px}
body.session-detail-page .session-detail-content::-webkit-scrollbar-track{background:transparent}
body.session-detail-page .session-detail-content::-webkit-scrollbar-thumb{background:transparent;border-radius:999px}
body.session-detail-page .session-detail-content.is-scrolling::-webkit-scrollbar-thumb{background:#cfd5dc}
body.dark-mode.session-detail-page .session-detail-content.is-scrolling{scrollbar-color:#5b6470 transparent}
body.dark-mode.session-detail-page .session-detail-content.is-scrolling::-webkit-scrollbar-thumb{background:#5b6470}

/* Description/common HO/impression use clean, line-free headers with the edit icon next to the title. */
.session-tab-section>.session-note-fold{
  border-top:0!important;
}
.session-note-fold>summary .tiny-edit{
  margin-left:0!important;
}
.session-empty-note{min-height:40px}
.session-empty-note>small{font-size:.84rem;color:var(--muted)}

/* =========================================================
   v36: session field sizing, scenario caption, registration
   participant picker, dark URL/title polish
   ========================================================= */

/* A small field label sits above the editable scenario title without changing
   the fixed session-detail header structure. */
.session-detail-title-group{
  flex:1 1 auto;
  min-width:0;
  display:grid;
  align-content:end;
  gap:2px;
  margin:0;
}
.session-detail-title-caption{
  display:block;
  color:var(--muted);
  font-size:.69rem;
  font-weight:600;
  line-height:1;
  letter-spacing:.02em;
  padding-left:1px;
}
.session-detail-title-group .session-detail-title{
  width:100%;
  flex:none;
}

/* Keep the single-line session fields readable without letting them stretch
   across the full sheet width. */
.session-info-system>div{max-width:430px}
.session-info-gm>div{max-width:320px}
.session-info-url>div{max-width:560px}
.session-info-system select,
.session-info-gm input,
.session-info-url input{width:100%}

/* The new-session participant selector mirrors the circular detail-screen UI. */
.session-register-participants{
  min-height:74px;
  margin-top:8px;
  padding:4px 0 0;
}
.session-register-participants .session-participant-empty{margin-top:20px}

/* Session-index URLs need explicit contrast in dark mode. */
.session-list-url{
  color:var(--accent);
  overflow-wrap:anywhere;
  word-break:break-word;
}
body.dark-mode .session-list-url{
  color:#a9cfee!important;
  text-decoration-color:#7398b7;
}
body.dark-mode .session-list-url:hover{color:#c6e1f6!important}

/* The scenario-name input should visually belong to the same transparent
   header surface in dark mode as it does in light mode. */
body.dark-mode .session-detail-title,
body.dark-mode .session-detail-title:hover,
body.dark-mode .session-detail-title:focus{
  background:transparent!important;
  border-color:transparent!important;
  box-shadow:none!important;
  color:var(--text)!important;
}

@media(max-width:760px){
  .session-info-system>div,
  .session-info-gm>div,
  .session-info-url>div{max-width:100%}
}


/* =========================================================
   v37: detail-sheet inline editors fill the visual cells.
   Personal-data slot sizing is 1 / 2 / full-row (URL), while
   active inputs now use the same width as the displayed value.
   ========================================================= */
.character-tab-scroll .personal-grid .datum,
.character-tab-scroll .personal-grid .datum-value,
.character-tab-scroll .items-tab .table-edit,
.character-tab-scroll .items-tab .weapon-detail-value{
  min-width:0;
  box-sizing:border-box;
}
.character-tab-scroll .personal-grid .datum-value,
.character-tab-scroll .items-tab .table-edit,
.character-tab-scroll .items-tab .weapon-detail-value{
  width:100%;
}

/* Remove the parent padding only while the inline editor is active so the
   input occupies exactly the same visible field width rather than a smaller
   fixed 190px box inside it. */
.character-tab-scroll .personal-grid .datum-value:has(.inline-input),
.character-tab-scroll .items-tab .table-edit:has(.inline-input),
.character-tab-scroll .items-tab .weapon-detail-value:has(.inline-input){
  padding:0;
  overflow:visible;
  text-overflow:clip;
}
.character-tab-scroll .personal-grid .datum-value .inline-input,
.character-tab-scroll .personal-grid .datum-value .inline-input.wide,
.character-tab-scroll .items-tab .table-edit .inline-input,
.character-tab-scroll .items-tab .table-edit .inline-input.wide,
.character-tab-scroll .items-tab .weapon-detail-value .inline-input,
.character-tab-scroll .items-tab .weapon-detail-value .inline-input.wide{
  display:block;
  width:100%!important;
  max-width:100%;
  min-width:0;
  box-sizing:border-box;
  margin:0;
}

/* Reassert the intended personal-data geometry: three equal slots, long
   values span two slots, and URL owns the last full-width row. */
.character-tab-scroll .personal-grid{
  grid-template-columns:repeat(3,minmax(0,1fr));
  grid-auto-flow:row dense;
}
.character-tab-scroll .personal-grid .datum{width:100%}
.character-tab-scroll .personal-grid .datum.wide{grid-column:span 2}
.character-tab-scroll .personal-grid .datum.url-row{grid-column:1 / -1}
.character-tab-scroll .personal-grid .datum-value{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Item editors use the complete table/grid cell, including long weapon and
   inventory names/notes. */
.character-tab-scroll .items-tab .inventory-table td,
.character-tab-scroll .items-tab .weapon-grid > span,
.character-tab-scroll .items-tab .weapon-detail-field{
  min-width:0;
}
.character-tab-scroll .items-tab .inventory-table .table-edit,
.character-tab-scroll .items-tab .weapon-row-fold .table-edit{
  width:100%;
  box-sizing:border-box;
}

@media(max-width:980px){
  .character-tab-scroll .personal-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .character-tab-scroll .personal-grid .datum.wide{grid-column:span 2}
  .character-tab-scroll .personal-grid .datum.url-row{grid-column:1 / -1}
}
@media(max-width:650px){
  .character-tab-scroll .personal-grid{grid-template-columns:1fr}
  .character-tab-scroll .personal-grid .datum.wide,
  .character-tab-scroll .personal-grid .datum.url-row{grid-column:auto}
}

/* v38: backstory presence indicator and empty-state descriptions */
.backstory-label-text{min-width:0}
.backstory-presence{
  display:inline-block;
  width:7px;
  height:7px;
  margin-left:7px;
  border-radius:50%;
  flex:0 0 7px;
  border:1px solid color-mix(in srgb,var(--muted) 48%,transparent);
  background:transparent;
  vertical-align:middle;
}
.backstory-presence.is-filled{
  border-color:color-mix(in srgb,var(--accent,#7698bd) 70%,var(--muted));
  background:color-mix(in srgb,var(--accent,#7698bd) 72%,white 28%);
}
.backstory-presence.is-empty{
  opacity:.58;
}
.backstory-empty-description{
  color:var(--muted);
  font-size:.82rem;
  line-height:1.65;
  padding:2px 0 3px;
}
body.dark-mode .backstory-presence.is-filled{
  border-color:color-mix(in srgb,var(--character-color,#9fc9f5) 55%,#929ba6);
  background:color-mix(in srgb,var(--character-color,#9fc9f5) 48%,#737d88 52%);
}
body.dark-mode .backstory-empty-description{color:color-mix(in srgb,var(--muted) 88%,white 12%)}

/* v38: scenario-history memo has no decorative top divider. */
.history-session-memo{
  border-top:0!important;
}
.history-session-memo-empty{
  display:block;
  color:var(--muted);
}
.history-session-memo-empty>small{
  display:block;
  font-size:.8rem;
  line-height:1.6;
}

/* =========================================================
   v39: quieter backstory markers, stable card artwork sizing,
   and numbered upcoming sessions
   ========================================================= */
.backstory-presence{
  width:6px;
  height:6px;
  flex-basis:6px;
  margin-left:7px;
  position:relative;
  top:2px;
  opacity:.42;
  border-color:color-mix(in srgb,var(--muted) 34%,transparent);
}
.backstory-presence.is-filled{
  opacity:.54;
  border-color:color-mix(in srgb,var(--accent,#7698bd) 45%,var(--muted));
  background:color-mix(in srgb,var(--accent,#7698bd) 46%,white 54%);
}
.backstory-presence.is-empty{opacity:.28}
body.dark-mode .backstory-presence.is-filled{
  opacity:.5;
  border-color:color-mix(in srgb,var(--character-color,#9fc9f5) 34%,#929ba6);
  background:color-mix(in srgb,var(--character-color,#9fc9f5) 30%,#737d88 70%);
}

/* Artwork must never contribute to a character card's intrinsic height.
   The body/tags determine the required height; the image only fills that area. */
.character-card-thumb{position:relative;min-height:170px;height:auto!important}
.character-card-thumb>img{
  position:absolute!important;
  inset:0;
  width:100%!important;
  height:100%!important;
  min-width:0!important;
  min-height:0!important;
}
.character-card-fallback{min-height:170px;height:auto}

.home-session-row{grid-template-columns:42px minmax(0,1fr) 175px 125px}
.home-session-no{font-variant-numeric:tabular-nums;color:#8a919b;font-size:.78rem;text-align:center;white-space:nowrap}
@media(max-width:760px){
  .home-session-row{grid-template-columns:34px minmax(0,1fr) 135px}
  .home-session-time{grid-column:3}
  .home-session-head span:nth-child(4){display:none}
}

/* =========================================================
   v40: backstory marker baseline, session registration sheet,
   and image-colour accents in the session index
   ========================================================= */

/* Backstory presence markers sit on the title baseline rather than floating
   around the vertical center. Their ring is clean white in both themes. */
.backstory-fold>summary>.backstory-label{align-items:baseline}
.backstory-presence{
  top:0!important;
  align-self:flex-end;
  margin-bottom:2px;
  border-color:#fff!important;
  box-shadow:0 0 0 1px rgba(0,0,0,.035);
}
.backstory-presence.is-filled{
  border-color:#fff!important;
}
body.dark-mode .backstory-presence,
body.dark-mode .backstory-presence.is-filled{
  border-color:#fff!important;
  box-shadow:0 0 0 1px rgba(0,0,0,.10);
}

/* New-session registration uses the same sheet language as session detail. */
.session-register-dialog{
  width:min(1120px,95vw);
  max-height:92vh;
  padding:0;
  overflow:hidden;
  border-radius:16px;
}
.session-register-dialog .session-register-form{padding:0!important;margin:0}
.session-register-shell{
  --session-color:#9fc9f5;
  position:relative;
  isolation:isolate;
  display:flex;
  flex-direction:column;
  min-height:min(820px,88vh);
  max-height:92vh;
  background:var(--panel);
  overflow:hidden;
}
.session-register-shell::before{
  content:"";
  position:absolute;
  z-index:0;
  top:0;right:0;bottom:0;
  width:34%;
  pointer-events:none;
  background:linear-gradient(220deg,
    color-mix(in srgb,var(--session-color) 76%,white) 0%,
    color-mix(in srgb,var(--session-color) 42%,white) 48%,
    color-mix(in srgb,var(--session-color) 13%,white) 100%);
  clip-path:polygon(72% 0,100% 0,100% 100%,18% 100%);
  opacity:.9;
}
body.dark-mode .session-register-shell::before{
  background:linear-gradient(220deg,
    color-mix(in srgb,var(--session-color) 66%,white) 0%,
    color-mix(in srgb,var(--session-color) 40%,#353b43) 48%,
    color-mix(in srgb,var(--session-color) 16%,#252a31) 100%);
  opacity:.82;
}
.session-register-header,
.session-register-content,
.session-register-actions{position:relative;z-index:1}
.session-register-header{padding:28px 52px 0 38px}
.session-register-title-row{
  min-height:62px;
  display:flex;
  align-items:center;
  gap:22px;
}
.session-register-title-group{margin:0!important}
.session-register-title{
  width:100%;
  border:0!important;
  background:transparent!important;
  padding:4px 8px 4px 0!important;
  box-shadow:none!important;
}
.session-register-hidden-status{display:none!important}
.session-register-meta{margin-top:3px}
.session-register-tabs{margin:10px -8px 0;min-height:45px}
.session-register-tabs span{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:110px;
  min-height:45px;
  padding:0 16px;
  color:var(--muted);
  border-bottom:2px solid transparent;
  font-size:.9rem;
  font-weight:600;
}
.session-register-tabs span.active{color:var(--text);border-bottom-color:var(--accent)}
.session-register-content{
  flex:1 1 auto;
  min-height:0;
  overflow:auto;
  padding:22px 38px 30px;
}
.session-register-long-field{
  display:grid;
  gap:7px;
  margin-top:22px;
  font-weight:650;
}
.session-register-long-field>span{font-size:.92rem}
.session-register-long-field textarea{min-height:120px}
.session-register-participant-section{margin-top:30px}
.session-register-actions{
  flex:0 0 auto;
  display:flex;
  justify-content:flex-end;
  gap:8px;
  padding:14px 38px 18px;
  border-top:1px solid var(--line);
  background:color-mix(in srgb,var(--panel) 94%,transparent);
}
body.dark-mode .session-register-dialog,
body.dark-mode .session-register-shell{background:var(--panel)}
body.dark-mode .session-register-title{color:var(--text)!important}

/* Give each session row a controlled accent using that session's image colour.
   The accent is independent of the row height/content and remains subtle. */
.session-list-entry{--session-color:#9fc9f5}
.session-list-entry>.session-row{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  box-shadow:inset 4px 0 0 color-mix(in srgb,var(--session-color) 78%,white 22%);
  background-image:linear-gradient(90deg,
    color-mix(in srgb,var(--session-color) 15%,transparent) 0%,
    color-mix(in srgb,var(--session-color) 6%,transparent) 13%,
    transparent 30%);
}
.session-list-entry>.session-row>*{position:relative;z-index:1}
.session-list-entry[open]>.session-row{
  background-color:var(--soft);
  background-image:linear-gradient(90deg,
    color-mix(in srgb,var(--session-color) 19%,transparent) 0%,
    color-mix(in srgb,var(--session-color) 7%,transparent) 16%,
    transparent 34%);
}
.session-list-entry>.session-list-expanded{
  box-shadow:inset 4px 0 0 color-mix(in srgb,var(--session-color) 55%,white 45%);
}
body.dark-mode .session-list-entry>.session-row{
  box-shadow:inset 4px 0 0 color-mix(in srgb,var(--session-color) 72%,#dce5ee 28%);
  background-image:linear-gradient(90deg,
    color-mix(in srgb,var(--session-color) 16%,transparent) 0%,
    color-mix(in srgb,var(--session-color) 7%,transparent) 13%,
    transparent 30%);
}
body.dark-mode .session-list-entry[open]>.session-row{
  background-color:var(--soft);
  background-image:linear-gradient(90deg,
    color-mix(in srgb,var(--session-color) 20%,transparent) 0%,
    color-mix(in srgb,var(--session-color) 8%,transparent) 16%,
    transparent 34%);
}
body.dark-mode .session-list-entry>.session-list-expanded{
  box-shadow:inset 4px 0 0 color-mix(in srgb,var(--session-color) 58%,#aab3bd 42%);
}

@media(max-width:760px){
  .session-register-dialog{width:96vw}
  .session-register-shell{min-height:86vh}
  .session-register-header{padding:24px 18px 0}
  .session-register-title-row{align-items:flex-end;gap:10px}
  .session-register-content{padding:18px 18px 24px}
  .session-register-actions{padding:12px 18px 15px}
  .session-register-shell::before{width:48%;clip-path:polygon(80% 0,100% 0,100% 100%,30% 100%)}
}

/* =========================================================
   v41: switch-style theme control, baseline backstory marker,
   non-gradient session accents and restrained action buttons
   ========================================================= */

/* Global theme switch: compact slider rather than a standalone sun/moon button. */
.theme-toggle{
  width:52px!important;
  height:28px!important;
  flex:0 0 52px!important;
  padding:0!important;
  border:0!important;
  border-radius:999px!important;
  background:transparent!important;
  overflow:visible!important;
  display:block!important;
}
.theme-toggle:hover{background:transparent!important}
.theme-switch-track{
  position:relative;
  display:block;
  width:52px;
  height:28px;
  border:1px solid #d8dde3;
  border-radius:999px;
  background:#eef2f5;
  box-shadow:inset 0 1px 2px rgba(20,30,40,.04);
  transition:background .18s ease,border-color .18s ease;
}
.theme-switch-icon{
  position:absolute;
  top:7px;
  width:13px;
  height:13px;
  fill:none;
  stroke:#8b949e;
  stroke-width:1.6;
  stroke-linecap:round;
  stroke-linejoin:round;
  pointer-events:none;
}
.theme-switch-sun{left:7px}
.theme-switch-moon{right:7px}
.theme-switch-knob{
  position:absolute;
  z-index:2;
  top:3px;
  left:3px;
  width:20px;
  height:20px;
  border-radius:50%;
  background:#fff;
  border:1px solid #d7dce2;
  box-shadow:0 1px 4px rgba(28,36,44,.16);
  transition:transform .18s ease,background .18s ease,border-color .18s ease;
}
.theme-toggle.is-dark .theme-switch-knob{transform:translateX(24px)}
body.dark-mode .theme-switch-track{
  background:#3a4149;
  border-color:#515a64;
}
body.dark-mode .theme-switch-icon{stroke:#b7c0c9}
body.dark-mode .theme-switch-knob{
  background:#dfe5eb;
  border-color:#cbd2d9;
}

/* Backstory marker: bottom edge aligns to the title text baseline area.
   Keep the white ring, but restore the filled aqua to its original strength. */
.backstory-fold>summary>.backstory-label{
  align-items:flex-end!important;
}
.backstory-presence{
  top:auto!important;
  align-self:flex-end!important;
  margin-bottom:0!important;
  opacity:.34;
  border-color:#fff!important;
}
.backstory-presence.is-empty{opacity:.24}
.backstory-presence.is-filled{
  opacity:1;
  border-color:#fff!important;
  background:color-mix(in srgb,var(--accent,#7698bd) 72%,white 28%)!important;
}
body.dark-mode .backstory-presence.is-filled{
  opacity:1;
  border-color:#fff!important;
  background:color-mix(in srgb,var(--character-color,#9fc9f5) 62%,#87919c 38%)!important;
}

/* Session rows keep only a clean colour strip; remove the v40 gradients. */
.session-list-entry>.session-row,
.session-list-entry[open]>.session-row,
body.dark-mode .session-list-entry>.session-row,
body.dark-mode .session-list-entry[open]>.session-row{
  background-image:none!important;
}
.session-list-entry>.session-row{
  box-shadow:inset 4px 0 0 color-mix(in srgb,var(--session-color) 82%,white 18%)!important;
}
.session-list-entry[open]>.session-row{background-color:var(--soft)!important}
body.dark-mode .session-list-entry>.session-row{
  box-shadow:inset 4px 0 0 color-mix(in srgb,var(--session-color) 72%,#d7e0e8 28%)!important;
}
.session-list-entry>.session-list-expanded,
body.dark-mode .session-list-entry>.session-list-expanded{
  box-shadow:inset 4px 0 0 color-mix(in srgb,var(--session-color) 54%,white 46%)!important;
}
body.dark-mode .session-list-entry>.session-list-expanded{
  box-shadow:inset 4px 0 0 color-mix(in srgb,var(--session-color) 56%,#aab3bd 44%)!important;
}

/* Circular create/register controls on list screens. */
.circle-add-button{
  width:38px;
  height:38px;
  flex:0 0 38px;
  display:grid;
  place-items:center;
  padding:0;
  border:1px solid #d9dde2;
  border-radius:50%;
  background:#fff;
  color:#4f5964;
  font-size:1.35rem;
  font-weight:400;
  line-height:1;
  box-shadow:0 1px 2px rgba(25,33,41,.035);
}
.circle-add-button:hover{
  background:#f6f7f8;
  border-color:#c9ced4;
  color:#343b43;
}
body.dark-mode .circle-add-button{
  background:#30363d;
  border-color:#4b535d;
  color:#e0e5ea;
}
body.dark-mode .circle-add-button:hover{background:#394049;border-color:#5a6470}

/* Text action buttons follow the attached reference: quiet outlined pills. */
.soft-pill-button{
  min-height:38px;
  padding:8px 15px!important;
  border:1px solid #ddd8d2!important;
  border-radius:999px!important;
  background:#fff!important;
  color:#4e4945!important;
  font-size:.84rem;
  font-weight:500;
  line-height:1.2;
  box-shadow:none!important;
  white-space:nowrap;
}
.soft-pill-button:hover:not(:disabled){
  background:#f6f4f1!important;
  border-color:#cec7c0!important;
  color:#37332f!important;
}
.soft-pill-button:active:not(:disabled){background:#efede9!important}
.soft-pill-button:disabled{opacity:.45;cursor:not-allowed}
body.dark-mode .soft-pill-button{
  background:#30353c!important;
  border-color:#555d66!important;
  color:#e2e5e8!important;
}
body.dark-mode .soft-pill-button:hover:not(:disabled){
  background:#393f47!important;
  border-color:#626c77!important;
  color:#f1f3f5!important;
}

/* Preserve compact editor-save placement with the new pill treatment. */
.editor-save.soft-pill-button{min-width:64px}
.session-register-actions .soft-pill-button{min-width:72px}

@media(max-width:650px){
  .theme-toggle{width:48px!important;height:26px!important;flex-basis:48px!important}
  .theme-switch-track{width:48px;height:26px}
  .theme-switch-knob{width:18px;height:18px}
  .theme-toggle.is-dark .theme-switch-knob{transform:translateX(22px)}
  .theme-switch-icon{top:6px}
  .theme-switch-sun{left:6px}.theme-switch-moon{right:6px}
}

/* =========================================================
   v42: consistent pill actions, exact backstory marker baseline,
   and wider/left-anchored session-detail composition
   ========================================================= */

/* Buttons reached from the small edit icons use the same restrained pill
   treatment as the primary save/register controls in the reference UI. */
.inline-long-actions button{
  min-height:38px;
  padding:8px 15px!important;
  border:1px solid #ddd8d2!important;
  border-radius:999px!important;
  background:#fff!important;
  color:#4e4945!important;
  font-size:.84rem;
  font-weight:500;
  line-height:1.2;
  box-shadow:none!important;
  white-space:nowrap;
}
.inline-long-actions button:hover:not(:disabled){
  background:#f6f4f1!important;
  border-color:#cec7c0!important;
  color:#37332f!important;
}
.inline-long-actions button:active:not(:disabled){background:#efede9!important}
body.dark-mode .inline-long-actions button{
  background:#30353c!important;
  border-color:#555d66!important;
  color:#e2e5e8!important;
}
body.dark-mode .inline-long-actions button:hover:not(:disabled){
  background:#393f47!important;
  border-color:#626c77!important;
  color:#f1f3f5!important;
}

/* The aqua fill — not the outside of the ring — shares the visual bottom edge
   of the backstory title. The former grey halo is replaced by a white ring. */
.backstory-fold>summary>.backstory-label{align-items:flex-end!important}
.backstory-presence{
  position:relative!important;
  top:1px!important;
  align-self:flex-end!important;
  margin-bottom:0!important;
  border-color:#fff!important;
  box-shadow:0 0 0 1px #fff!important;
}
.backstory-presence.is-filled,
body.dark-mode .backstory-presence,
body.dark-mode .backstory-presence.is-filled{
  border-color:#fff!important;
  box-shadow:0 0 0 1px #fff!important;
}

/* Tabs occupy only the width they need and stay anchored at the left instead
   of stretching across the wider sheet. */
.session-detail-tabs{
  justify-content:flex-start!important;
}
.session-detail-tabs button{
  flex:0 0 auto!important;
  min-width:96px;
  width:auto;
  padding-left:22px;
  padding-right:22px;
}

@media(max-width:760px){
  .session-detail-tabs button{min-width:82px;padding-left:14px;padding-right:14px}
}

/* =========================================================
   v43: backstory presence marker final vertical alignment
   ========================================================= */
/* Raise the small presence marker slightly so the bottom edge of its aqua
   fill visually aligns with the bottom edge of the backstory title glyphs. */
.backstory-presence{
  top:-2px!important;
}


/* =========================================================
   v44: final backstory baseline tweak, roomier session-detail shell,
   closed lower accent edge, and simpler session-register header
   ========================================================= */

/* Move the marker about 2px higher again so the aqua fill baseline
   sits exactly where requested against the title glyphs. */
.backstory-presence{
  top:-4px!important;
}

/* The accent panel now closes along the bottom like the character sheet,
   instead of continuing as a long diagonal edge. */
.session-detail-shell::before{
  clip-path:polygon(72% 0,100% 0,100% 100%,0 100%);
}
body.dark-mode .session-detail-shell::before{
  clip-path:polygon(72% 0,100% 0,100% 100%,0 100%);
}

/* Register dialog: no separate participant tab label. Keep the remaining
   overview tab left-aligned and tidy. */
.session-register-tabs span{
  min-width:0;
  padding-right:8px;
}

/* The tag helper text should fit without being cut off. */
.session-register-meta .session-detail-tags{
  gap:10px;
}
.session-register-meta .session-tag-inline-input{
  width:210px!important;
  max-width:260px!important;
  min-width:210px!important;
  flex:0 1 230px;
}

@media(max-width:760px){
  .session-register-meta .session-tag-inline-input{width:100%!important;min-width:0!important;max-width:none!important;flex:1 1 180px}
}

/* =========================================================
   v46: single-session selection and borderless weapon delete
   ========================================================= */

/* Existing-session picker behaves like the participant picker:
   one selection at a time, with a second click clearing it. */
.session-choice > input[type="radio"]{
  order:2;
  width:auto;
  margin:0;
  flex:0 0 auto;
  accent-color:var(--accent);
}
.session-choice:has(input[type="radio"]:checked){
  border-color:color-mix(in srgb,var(--accent) 52%,var(--line));
  background:color-mix(in srgb,var(--accent-soft) 58%,transparent);
}
body.dark-mode .session-choice:has(input[type="radio"]:checked){
  background:color-mix(in srgb,var(--accent) 14%,var(--panel));
  border-color:color-mix(in srgb,var(--accent) 46%,var(--line));
}

/* Weapon delete control matches inventory: show only the × glyph,
   without the default button frame or fill. */
.weapon-grid .table-delete button{
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
  border-radius:0!important;
  padding:4px!important;
  color:#a3a9b1;
  line-height:1;
}
.weapon-grid .table-delete button:hover{
  border:0!important;
  background:transparent!important;
  color:var(--danger);
}

/* =========================================================
   v47: unified character / scenario search behaviour
   ========================================================= */
.filter-search-label.participant-search-label{
  display:block;
  margin:0 0 12px;
}
.filter-search-label.participant-search-label .filter-search-input,
#characterSessionSearch,
#participantSearch{
  width:100%;
  margin-top:6px;
}
.character-session-filter-empty{
  padding:14px 4px;
  margin:0;
}


/* =========================================================
   ver0.49: top navigation, settings page, session-list action position
   ========================================================= */
.brand-home{
  border:0!important;
  background:transparent!important;
  color:inherit!important;
  padding:6px 4px!important;
  margin:0!important;
  font:inherit;
  font-weight:700;
  cursor:pointer;
  border-radius:8px;
}
.brand-home:hover{background:var(--soft)!important}
body.dark-mode .brand-home:hover{background:#343a42!important}
.settings-page-section{margin-top:12px}
.settings-page-section .home-settings-grid-single{grid-template-columns:minmax(0,720px)}
.session-list-expanded-actions{
  top:auto!important;
  right:16px!important;
  bottom:14px!important;
}
@media(max-width:650px){
  .brand-home{display:inline-flex!important;font-size:.82rem;white-space:nowrap}
  .session-list-expanded-actions{right:12px!important;bottom:10px!important}
}


/* =========================================================
   ver1.03: backstory dark-mode refinement and visibility menu state
   ========================================================= */

/* Backstory heading separator: avoid the light hard-coded line in dark mode. */
body.dark-mode .backstory-master>summary{
  border-bottom-color:#454c55!important;
}

/* "表示項目" rows: use a subdued dark hover instead of the light-mode hover. */
body.dark-mode .backstory-visibility label:hover{
  background:#343a42!important;
  color:var(--text)!important;
}

/* Character detail: reserve space for the subtle update timestamp. */
.character-tab-scroll{
  padding-bottom:56px!important;
}

/* =========================================================
   ver1.10: canonical session-detail frame and scroll layout
   ========================================================= */

/* Keep the page itself still. The detail shell, like the character-detail
   shell, has a fixed viewport-relative height and a visibly closed border. */
body.session-detail-page{
  overflow:hidden;
}
body.session-detail-page main{
  max-width:1380px;
  margin:28px auto;
  padding:0 26px;
  height:auto;
  overflow:visible;
}
body.session-detail-page #app.session-detail-view{
  width:100%;
  height:auto;
  min-height:0;
  overflow:visible;
}
body.session-detail-page .session-detail-shell{
  position:relative;
  display:flex;
  flex-direction:column;
  width:min(1232px,100%);
  height:calc(100vh - 114px);
  min-height:0;
  max-height:none;
  margin:0 auto;
  border:1px solid var(--line);
  border-radius:16px;
  overflow:hidden;
  background:var(--panel);
  box-shadow:none;
}

/* Header/title/tags/tabs never scroll. */
body.session-detail-page .session-detail-header{
  flex:0 0 auto;
  min-height:0;
  padding:30px 96px 0 46px;
  overflow:visible;
}

/* The tab body receives only the remaining space inside the closed shell.
   min-height:0 is essential: content may scroll, but may not grow the shell. */
body.session-detail-page .session-detail-content{
  flex:1 1 auto;
  min-height:0;
  max-height:none;
  overflow-y:auto;
  overflow-x:hidden;
  padding:22px 138px 34px 46px;
  overscroll-behavior:contain;
  scrollbar-gutter:auto;
}

/* Session update time is a real footer row rather than an absolutely
   positioned overlay. This reserves the bottom edge and keeps it visible. */
body.session-detail-page .session-detail-shell > .detail-updated-at{
  position:relative;
  right:auto;
  bottom:auto;
  flex:0 0 auto;
  align-self:stretch;
  z-index:8;
  margin:0;
  padding:4px 16px 9px;
  text-align:right;
  color:var(--muted);
  font-size:.68rem;
  font-weight:400;
  line-height:1.2;
  letter-spacing:.01em;
  opacity:.78;
  pointer-events:none;
  white-space:nowrap;
  background:transparent;
}
body.dark-mode.session-detail-page .session-detail-shell > .detail-updated-at{
  color:#929aa4;
  background:transparent;
}

/* Character detail keeps the same small lower-right timestamp treatment. */
.character-detail-shell > .detail-updated-at{
  position:absolute;
  right:16px;
  bottom:10px;
  z-index:8;
  margin:0;
  padding:2px 5px;
  color:var(--muted);
  font-size:.68rem;
  font-weight:400;
  line-height:1.2;
  letter-spacing:.01em;
  opacity:.78;
  pointer-events:none;
  white-space:nowrap;
  background:color-mix(in srgb,var(--panel) 70%,transparent);
  border-radius:4px;
}
body.dark-mode .character-detail-shell > .detail-updated-at{
  color:#929aa4;
  background:color-mix(in srgb,var(--panel) 72%,transparent);
}

@media(max-width:760px){
  body.session-detail-page main{
    margin:10px auto 14px;
    padding:0 12px;
  }
  body.session-detail-page .session-detail-shell{
    width:100%;
    height:calc(100vh - 88px);
    border-radius:12px;
  }
  body.session-detail-page .session-detail-header{
    padding:70px 18px 0;
  }
  body.session-detail-page .session-detail-content{
    padding:18px 20px 28px 18px;
  }
  body.session-detail-page .session-detail-shell > .detail-updated-at{
    padding:4px 10px 7px;
    font-size:.64rem;
  }
  .character-detail-shell > .detail-updated-at{
    right:10px;
    bottom:7px;
    font-size:.64rem;
  }
}


/* =========================================================
   ver1.15: point adjustments, sticky skill-point header,
   and allocated-skill emphasis
   ========================================================= */

.point-max-display{
  display:inline-flex;
  align-items:center;
  gap:4px;
}
.point-adjustment-note{
  padding:1px 5px;
  border:1px solid color-mix(in srgb,var(--accent) 34%,var(--line));
  border-radius:999px;
  background:color-mix(in srgb,var(--accent) 9%,var(--panel));
  color:color-mix(in srgb,var(--accent) 72%,var(--text));
  font-size:.62rem;
  font-weight:600;
  white-space:nowrap;
}
.point-readonly .point-formula{
  color:var(--muted);
  font-size:.63rem;
}

/* The point summary becomes the skill editor header and remains visible
   while the skill list itself is being edited. */
.editor-skills-section{
  position:relative;
  border-bottom:0!important;
  padding-bottom:0!important;
}
.editor-skill-sticky-header{
  position:sticky;
  top:0;
  z-index:18;
  margin:0 -8px 14px;
  padding:10px 8px 11px;
  background:color-mix(in srgb,var(--panel) 97%,transparent);
  border-bottom:1px solid var(--line);
  box-shadow:0 8px 14px -14px rgba(0,0,0,.34);
  backdrop-filter:blur(8px);
}
.editor-skill-header-title{
  display:flex;
  align-items:baseline;
  gap:10px;
  margin-bottom:8px;
}
.editor-skill-header-title h3{
  margin:0;
  font-size:1.08rem;
}
.editor-skill-header-title .muted{
  font-size:.68rem;
}

.editor-skill-sticky-header .editor-points-computed{
  width:100%;
  max-width:none;
  grid-template-columns:minmax(150px,1.25fr) repeat(4,minmax(98px,.8fr));
}
.computed-point-with-adjust{
  grid-template-columns:1fr auto;
}
.point-adjust-input{
  grid-column:1/-1;
  display:flex!important;
  align-items:center;
  justify-content:space-between;
  gap:7px;
  min-height:0!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
  color:var(--muted)!important;
  font-size:.65rem!important;
}
.point-adjust-input input{
  width:62px;
  min-width:0;
  padding:3px 5px;
  text-align:right;
  font-size:.7rem;
}

/* Keep every row aligned, then add a clear but subdued visual treatment
   when profession and/or interest points have been allocated. */
.editor-skill-head,
.editor-skill-row{
  padding-left:5px;
  padding-right:5px;
  box-sizing:border-box;
}
.editor-skill-row{
  border:1px solid transparent;
  border-bottom-color:#edf0f2;
  border-radius:8px;
  margin:2px 0;
  transition:background .12s ease,border-color .12s ease,box-shadow .12s ease;
}
.editor-skill-row.has-profession-points{
  background:#eef6fd;
  border-color:#c7dceb;
  box-shadow:inset 3px 0 0 #8fb8d8;
}
.editor-skill-row.has-interest-points{
  background:#fff8ea;
  border-color:#e8d5ad;
  box-shadow:inset 3px 0 0 #d4ad62;
}
.editor-skill-row.has-both-point-types{
  background:#f1f4fb;
  border-color:#c8d1e5;
  box-shadow:inset 3px 0 0 #9daecf;
}

body.dark-mode .editor-skill-sticky-header{
  background:color-mix(in srgb,var(--panel) 95%,#1d2228 5%);
  border-bottom-color:var(--line);
  box-shadow:0 8px 14px -14px rgba(0,0,0,.8);
}
body.dark-mode .point-adjustment-note{
  background:#2d3845;
  border-color:#4b6074;
  color:#b8d1e8;
}
body.dark-mode .editor-skill-row{
  border-bottom-color:#3e4650;
}
body.dark-mode .editor-skill-row.has-profession-points{
  background:#263746;
  border-color:#3f5b70;
  box-shadow:inset 3px 0 0 #6e9bc0;
}
body.dark-mode .editor-skill-row.has-interest-points{
  background:#3b3426;
  border-color:#625337;
  box-shadow:inset 3px 0 0 #b18b49;
}
body.dark-mode .editor-skill-row.has-both-point-types{
  background:#303542;
  border-color:#4d5870;
  box-shadow:inset 3px 0 0 #8397bd;
}
body.dark-mode .point-adjust-input{
  color:#aeb6c0!important;
}
body.dark-mode .point-adjust-input input{
  background:#252b32;
  border-color:#48515b;
  color:#eef0f3;
}

@media(max-width:900px){
  .editor-skill-sticky-header .editor-points-computed{
    grid-template-columns:repeat(2,minmax(120px,1fr));
  }
  .editor-skill-sticky-header .editor-points-computed>label{
    grid-column:1/-1;
  }
}
@media(max-width:650px){
  .editor-skill-header-title{
    align-items:flex-start;
    flex-direction:column;
    gap:3px;
  }
  .editor-skill-sticky-header .editor-points-computed{
    grid-template-columns:1fr;
  }
  .editor-skill-sticky-header .editor-points-computed>label{
    grid-column:auto;
  }
}

/* =========================================================
   ver1.18: unified secondary ability value layout
   ========================================================= */

/* All values in the second row share the same label/value geometry.
   SAN no longer creates its own taller internal layout. */
.secondary-row .secondary-stat-cell{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-end;
  min-height:58px;
  box-sizing:border-box;
}
.secondary-row .secondary-stat-cell>small{
  display:flex;
  align-items:flex-end;
  justify-content:center;
  width:100%;
  min-height:1.15em;
  margin-bottom:2px;
  line-height:1.15;
}
.secondary-value-line{
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:0;
  min-height:24px;
  line-height:1;
  white-space:nowrap;
}
.secondary-value-line .stat-value,
.secondary-static-value{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:22px;
  box-sizing:border-box;
  padding:2px 4px;
  font-size:inherit;
  font-weight:650;
  line-height:1;
}
.secondary-value-separator{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:22px;
  color:var(--muted);
  font-size:.72rem;
  font-weight:400;
  line-height:1;
}
.san-indefinite-value{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:22px;
  margin-left:1px;
  color:#b45b67;
  font-size:.72rem;
  font-weight:700;
  line-height:1;
}

/* Keep the second row compact even where older rules set its padding. */
.character-detail-shell.tab-status .secondary-row .secondary-stat-cell,
.status-tab .secondary-row .secondary-stat-cell{
  padding-top:8px;
  padding-bottom:9px;
}

body.dark-mode .secondary-value-separator{
  color:#929aa4;
}
body.dark-mode .san-indefinite-value{
  color:#e18a95;
}


/* =========================================================
   ver1.19: slightly larger HP / MP values
   ========================================================= */
.secondary-row .pool-hp .secondary-value-line .stat-value,
.secondary-row .pool-mp .secondary-value-line .stat-value{
  font-size:1.06em;
}


/* =========================================================
   ver1.20: status ability vertical alignment
   Keep the skill section position unchanged while moving
   the ability title / first row slightly upward and balancing
   the two ability rows visually.
   ========================================================= */

.character-detail-shell.tab-status .ability-fold>summary{
  transform:translateY(-4px);
}

/* Move the first row slightly more than the second row.
   Transform is used intentionally so the following skill section
   keeps exactly the same document-flow position. */
.character-detail-shell.tab-status .stats-grid.ability-row{
  transform:translateY(-4px);
}
.character-detail-shell.tab-status .secondary-row{
  transform:translateY(-2px);
}

/* Slightly tighten the internal vertical balance of both rows
   without changing their allocated layout height. */
.character-detail-shell.tab-status .stats-grid.ability-row .stat-cell{
  padding-top:7px;
  padding-bottom:12px;
}
.character-detail-shell.tab-status .secondary-row .secondary-stat-cell{
  padding-top:7px;
  padding-bottom:10px;
}

/* =========================================================
   v18: compact character editor status layout
   ========================================================= */
/* Individual ability dice were removed; the single bulk-roll action remains. */
.editor-primary-stats{
  grid-template-columns:repeat(8,minmax(0,1fr));
  gap:7px;
}
.editor-derived-stats{
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:7px;
  margin-top:9px;
}
.editor-stat-field>span{margin-bottom:3px}
.editor-stat-field input,
.editor-stat-field.calculated output{
  min-height:33px;
  padding:6px;
}

/* Profession / interest each use one current/max card. */
.editor-skill-sticky-header .editor-points-computed{
  grid-template-columns:minmax(150px,1.15fr) repeat(2,minmax(150px,1fr));
  gap:8px;
}
.editor-skill-sticky-header .computed-point-combined{
  min-height:58px;
  grid-template-columns:1fr auto;
}
.point-ratio{
  display:flex;
  align-items:baseline;
  justify-content:flex-end;
  gap:5px;
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
.point-ratio i{font-style:normal;color:var(--muted);font-size:.78rem}
.point-ratio b{font-size:1rem}
.computed-point-combined small{grid-column:1/-1}

/* Highlight the whole skill frame whenever any allocatable point column is non-zero. */
.editor-skill-row.has-allocated-points{
  background:#f4f7fb;
  border-color:#d2dce7;
  box-shadow:inset 3px 0 0 #a6b9cc;
}
/* Keep the profession/interest distinction when those columns are the source. */
.editor-skill-row.has-profession-points{background:#eef6fd;border-color:#c7dceb;box-shadow:inset 3px 0 0 #8fb8d8}
.editor-skill-row.has-interest-points{background:#fff8ea;border-color:#e8d5ad;box-shadow:inset 3px 0 0 #d4ad62}
.editor-skill-row.has-both-point-types{background:#f1f4fb;border-color:#c8d1e5;box-shadow:inset 3px 0 0 #9daecf}
body.dark-mode .editor-skill-row.has-allocated-points{background:#29323b;border-color:#465565;box-shadow:inset 3px 0 0 #71879b}
body.dark-mode .editor-skill-row.has-profession-points{background:#263746;border-color:#3f5b70;box-shadow:inset 3px 0 0 #6e9bc0}
body.dark-mode .editor-skill-row.has-interest-points{background:#3b3426;border-color:#625337;box-shadow:inset 3px 0 0 #b18b49}
body.dark-mode .editor-skill-row.has-both-point-types{background:#303542;border-color:#4d5870;box-shadow:inset 3px 0 0 #8397bd}

/* Reduce vertical waste in long skill lists while retaining row separation. */
.editor-skills{gap:10px}
.editor-skill-group h4{margin:0 0 4px;font-size:.86rem}
.editor-skill-head,.editor-skill-row{padding-top:3px;padding-bottom:3px}
.editor-skill-row{margin:1px 0}
.editor-skill-row input{padding:4px 4px}
.editor-special-add-row{padding:3px 0}
.editor-skill-add-row{padding:4px 0 2px}
.editor-skill-sticky-header{margin-bottom:9px;padding-top:8px;padding-bottom:8px}

/* Item add actions use the same quiet pill language as the editor Save action. */
.editor-add-action{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  margin-top:10px;
}
.editor-add-action svg{width:15px;height:15px;fill:currentColor;flex:0 0 auto}

@media(max-width:1180px){
  .editor-primary-stats{grid-template-columns:repeat(4,minmax(76px,1fr))}
  .editor-derived-stats{grid-template-columns:repeat(4,minmax(82px,1fr))}
}
@media(max-width:900px){
  .editor-skill-sticky-header .editor-points-computed{grid-template-columns:repeat(2,minmax(120px,1fr))}
  .editor-skill-sticky-header .editor-points-computed>label{grid-column:1/-1}
}
@media(max-width:700px){
  .editor-primary-stats,.editor-derived-stats{grid-template-columns:repeat(2,minmax(90px,1fr))}
  .editor-skill-sticky-header .editor-points-computed{grid-template-columns:1fr}
}

/* =========================================================
   ver1.23: compact editor stats, precise skill allocation color,
   spinner-free numeric entry and unified detail add actions
   ========================================================= */

/* Do not stretch the ability area to the right edge. Keep compact cards
   grouped from the left with consistent gaps. */
.editor-primary-stats{
  grid-template-columns:repeat(8,76px)!important;
  justify-content:start;
  width:max-content;
  max-width:100%;
  gap:7px!important;
}
.editor-derived-stats{
  grid-template-columns:repeat(6,82px)!important;
  justify-content:start;
  width:max-content;
  max-width:100%;
  gap:7px!important;
  margin-top:8px!important;
}
.editor-status-section .editor-stat-field{min-width:0}
.editor-status-section .editor-stat-field input,
.editor-status-section .editor-stat-field output{width:100%;box-sizing:border-box}

/* Number inputs are direct-entry fields; browser increment/decrement controls
   are intentionally hidden throughout the character editor. */
.character-editor-shell input[type="number"]{
  appearance:textfield;
  -moz-appearance:textfield;
}
.character-editor-shell input[type="number"]::-webkit-outer-spin-button,
.character-editor-shell input[type="number"]::-webkit-inner-spin-button{
  -webkit-appearance:none;
  margin:0;
}

/* Allocation colour rules:
   - profession / interest: colour the skill-name cell and that input only;
   - growth / other: colour only that input;
   - never tint the entire row. */
.editor-skill-row.has-allocated-points,
.editor-skill-row.has-profession-points,
.editor-skill-row.has-interest-points,
.editor-skill-row.has-both-point-types{
  background:transparent!important;
  border-color:#edf0f2!important;
  box-shadow:none!important;
}
.editor-skill-row .editor-skill-name{
  border-radius:5px;
  padding:4px 5px;
  margin-left:-5px;
}
.editor-skill-row.has-profession-points:not(.has-interest-points) .editor-skill-name{
  background:#eef6fd;
  color:#315b78;
}
.editor-skill-row.has-interest-points:not(.has-profession-points) .editor-skill-name{
  background:#fff8ea;
  color:#765b27;
}
.editor-skill-row.has-both-point-types .editor-skill-name{
  background:#f1f4fb;
  color:#4a5874;
}
.editor-skill-row input.is-allocated.skill-input-profession{
  background:#eef6fd;
  border-color:#aecaDF;
}
.editor-skill-row input.is-allocated.skill-input-interest{
  background:#fff8ea;
  border-color:#dcc38c;
}
.editor-skill-row input.is-allocated.skill-input-growth{
  background:#f2f8ef;
  border-color:#b9d2ae;
}
.editor-skill-row input.is-allocated.skill-input-other{
  background:#f7f1fb;
  border-color:#ceb7dc;
}
body.dark-mode .editor-skill-row.has-allocated-points,
body.dark-mode .editor-skill-row.has-profession-points,
body.dark-mode .editor-skill-row.has-interest-points,
body.dark-mode .editor-skill-row.has-both-point-types{
  background:transparent!important;
  border-color:#3e4650!important;
  box-shadow:none!important;
}
body.dark-mode .editor-skill-row.has-profession-points:not(.has-interest-points) .editor-skill-name{background:#263746;color:#b9d8ef}
body.dark-mode .editor-skill-row.has-interest-points:not(.has-profession-points) .editor-skill-name{background:#3b3426;color:#ead49f}
body.dark-mode .editor-skill-row.has-both-point-types .editor-skill-name{background:#303542;color:#c8d4ef}
body.dark-mode .editor-skill-row input.is-allocated.skill-input-profession{background:#263746;border-color:#4d7089}
body.dark-mode .editor-skill-row input.is-allocated.skill-input-interest{background:#3b3426;border-color:#74633f}
body.dark-mode .editor-skill-row input.is-allocated.skill-input-growth{background:#29382a;border-color:#4e6b50}
body.dark-mode .editor-skill-row input.is-allocated.skill-input-other{background:#352c3c;border-color:#654e74}

/* Match detail-page add actions to the same pill/icon language as Save. */
.detail-add-action{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  margin-top:10px;
}
.detail-add-action svg{width:15px;height:15px;fill:currentColor;flex:0 0 auto}

@media(max-width:1180px){
  .editor-primary-stats{grid-template-columns:repeat(4,76px)!important}
  .editor-derived-stats{grid-template-columns:repeat(4,82px)!important}
}
@media(max-width:700px){
  .editor-primary-stats,.editor-derived-stats{grid-template-columns:repeat(2,minmax(80px,1fr))!important;width:100%}
}

/* =========================================================
   ver1.24: continuous skill rows with a single divider
   ========================================================= */
/* Remove card-like gaps/borders between skills. Each skill is separated
   only by the bottom rule of the preceding row. */
.editor-skill-row,
.editor-skill-row.has-allocated-points,
.editor-skill-row.has-profession-points,
.editor-skill-row.has-interest-points,
.editor-skill-row.has-both-point-types{
  margin:0!important;
  border:0!important;
  border-bottom:1px solid #edf0f2!important;
  border-radius:0!important;
  box-shadow:none!important;
}
body.dark-mode .editor-skill-row,
body.dark-mode .editor-skill-row.has-allocated-points,
body.dark-mode .editor-skill-row.has-profession-points,
body.dark-mode .editor-skill-row.has-interest-points,
body.dark-mode .editor-skill-row.has-both-point-types{
  border:0!important;
  border-bottom:1px solid #3e4650!important;
  border-radius:0!important;
  box-shadow:none!important;
}

/* =========================================================
   ver1.25: compact editor layout refinement
   Reference direction: tighten the editable status area from the left,
   keeping a balanced compact layout instead of stretching to the right edge.
   ========================================================= */

/* Tighten section spacing a little more. */
.editor-section{
  padding:0 0 18px;
  margin:0 0 16px;
}
.editor-section-title-row{
  margin:0 0 9px;
}

/* Keep the ability area compact and left-aligned like the reference. */
.editor-primary-stats{
  grid-template-columns:repeat(8,70px)!important;
  gap:6px!important;
  width:max-content;
  max-width:100%;
  justify-content:start;
}
.editor-derived-stats{
  grid-template-columns:repeat(6,76px)!important;
  gap:6px 7px!important;
  width:max-content;
  max-width:100%;
  justify-content:start;
  margin-top:6px!important;
}
.editor-stat-field>span{
  margin-bottom:2px;
}
.editor-stat-field input,
.editor-stat-field.calculated output{
  min-height:31px;
  padding:5px 6px;
}

/* Make the skill controls compact instead of spreading across the full line. */
.editor-skill-sticky-header{
  margin:0 0 8px;
  padding:8px 0 8px;
}
.editor-skill-header-title{
  margin-bottom:6px;
}
.editor-skill-header-title .muted{
  font-size:.66rem;
}
.editor-skill-sticky-header .editor-points-computed{
  width:max-content;
  max-width:100%;
  grid-template-columns:148px 168px 168px;
  gap:7px;
  align-items:stretch;
}
.editor-points-computed>label,
.editor-points-computed .computed-point{
  min-height:52px;
  padding:7px 8px;
}
.editor-points-computed select{
  margin-top:4px;
  padding:5px 6px;
}
.point-ratio b{font-size:.96rem;}
.computed-point-combined small,
#editorProfessionFormula,
#editorInterestFormula{
  font-size:.61rem;
  line-height:1.25;
}
.point-adjust-input{
  gap:6px;
  font-size:.62rem!important;
}
.point-adjust-input input{
  width:56px;
  padding:2px 5px;
  font-size:.69rem;
}

/* Tighten the skill list itself while keeping readability. */
.editor-skills{
  gap:8px;
}
.editor-skill-group h4{
  margin:0 0 3px;
  font-size:.84rem;
}
.editor-skill-table{
  width:max-content;
  max-width:100%;
}
.editor-skill-head,
.editor-skill-row{
  grid-template-columns:190px repeat(6,42px) 24px;
  gap:3px;
  min-width:466px;
  padding-left:0;
  padding-right:0;
}
.editor-skill-head{
  font-size:.67rem;
}
.editor-skill-name{
  font-size:.79rem;
}
.editor-skill-row input{
  padding:4px 3px;
  font-size:.76rem;
}
.editor-skill-row .editor-skill-name{
  padding:3px 4px;
  margin-left:0;
}
.editor-skill-delete-slot{
  width:24px;
  min-width:24px;
}

/* Auxiliary add rows follow the same compact rhythm. */
.editor-skill-add-row{
  grid-template-columns:24px 170px 56px 1fr 52px 24px;
  gap:3px;
  padding:3px 0 1px;
  min-width:466px;
}
.editor-skill-add-row input{
  padding:4px 5px;
  font-size:.76rem;
}
.editor-skill-add-row button{
  padding:4px 7px;
  font-size:.73rem;
}
.editor-add-hint{
  font-size:.67rem;
}
.editor-special-add-row{
  grid-template-columns:24px auto minmax(88px,1fr) auto 54px 52px 24px;
  gap:3px;
  min-width:466px;
  padding:2px 0;
}
.editor-special-add-row input{
  padding:4px 5px;
  font-size:.76rem;
}
.editor-special-add-row button{
  padding:4px 7px;
  font-size:.73rem;
}
.editor-special-add-row .special-base,
.editor-special-add-row .special-initial-entry{
  font-size:.75rem;
}

/* Responsive fallback: relax to 4 / 2 columns on narrower screens. */
@media(max-width:1180px){
  .editor-primary-stats{grid-template-columns:repeat(4,70px)!important}
  .editor-derived-stats{grid-template-columns:repeat(4,76px)!important}
}
@media(max-width:860px){
  .editor-skill-sticky-header .editor-points-computed{
    width:100%;
    grid-template-columns:repeat(2,minmax(140px,1fr));
  }
  .editor-points-computed>label{grid-column:1/-1}
}
@media(max-width:700px){
  .editor-primary-stats,
  .editor-derived-stats{
    grid-template-columns:repeat(2,minmax(84px,1fr))!important;
    width:100%;
  }
  .editor-skill-sticky-header .editor-points-computed{
    grid-template-columns:1fr;
  }
  .editor-points-computed>label{grid-column:auto}
  .editor-skill-table{width:100%}
}

/* =========================================================
   ver1.26: borderless compact numeric editing
   Numeric values read like plain text until focused, and only reserve
   the width needed for the expected value range.
   ========================================================= */

/* Default number-entry appearance inside the character editor. */
.character-editor-shell input[type="number"]{
  width:auto;
  min-width:0;
  border-color:transparent;
  background:transparent;
  box-shadow:none;
  border-radius:4px;
  transition:background .12s ease,border-color .12s ease,box-shadow .12s ease;
}
.character-editor-shell input[type="number"]:hover{
  background:color-mix(in srgb,var(--soft) 65%,transparent);
}
.character-editor-shell input[type="number"]:focus{
  outline:none;
  border-color:color-mix(in srgb,var(--accent) 68%,var(--line));
  background:var(--panel);
  box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 14%,transparent);
}

/* Ability / derived values: expected values are mostly 1–3 digits.
   Keep enough room for labels, but do not let the numeric box stretch. */
.editor-primary-stats{
  grid-template-columns:repeat(8,58px)!important;
  gap:5px!important;
}
.editor-derived-stats{
  grid-template-columns:repeat(6,68px)!important;
  gap:5px 6px!important;
}
.editor-stat-field{
  width:max-content;
  max-width:100%;
}
.editor-stat-field input[type="number"]{
  width:4.5ch!important;
  min-width:4.5ch!important;
  max-width:4.5ch!important;
  padding:5px 3px!important;
  text-align:right;
  font-variant-numeric:tabular-nums;
}
.editor-stat-field.calculated output{
  width:auto!important;
  min-width:4.5ch;
  max-width:none;
  padding:5px 3px!important;
  border-color:transparent!important;
  background:transparent!important;
  box-shadow:none!important;
  text-align:right;
  font-variant-numeric:tabular-nums;
}

/* Skill allocation cells: compact 3-digit numeric columns. */
.editor-skill-head,
.editor-skill-row{
  grid-template-columns:190px repeat(6,38px) 24px;
  min-width:442px;
}
.editor-skill-row input[type="number"]{
  width:5ch!important;
  min-width:5ch!important;
  max-width:5ch!important;
  padding:4px 2px!important;
  justify-self:end;
  text-align:right;
  font-variant-numeric:tabular-nums;
}

/* Preserve allocation colors without restoring a permanent outline. */
.editor-skill-row input.is-allocated.skill-input-profession,
.editor-skill-row input.is-allocated.skill-input-interest,
.editor-skill-row input.is-allocated.skill-input-growth,
.editor-skill-row input.is-allocated.skill-input-other{
  border-color:transparent;
}
.editor-skill-row input.is-allocated:focus{
  border-color:color-mix(in srgb,var(--accent) 68%,var(--line));
}

/* Point adjustment fields only need a few digits. */
.point-adjust-input input[type="number"]{
  width:5ch!important;
  min-width:5ch!important;
  max-width:5ch!important;
  padding:2px 3px!important;
}

/* Numeric input used while adding a skill. */
.editor-skill-add-row input[type="number"],
.editor-special-add-row input[type="number"]{
  width:5ch!important;
  min-width:5ch!important;
  max-width:5ch!important;
  padding-left:2px!important;
  padding-right:2px!important;
  text-align:right;
}
.editor-skill-add-row{
  grid-template-columns:24px 170px 42px 1fr 52px 24px;
  min-width:452px;
}
.editor-special-add-row{
  grid-template-columns:24px auto minmax(88px,1fr) auto 42px 52px 24px;
  min-width:452px;
}

body.dark-mode .character-editor-shell input[type="number"]{
  border-color:transparent;
  background:transparent;
}
body.dark-mode .character-editor-shell input[type="number"]:hover{
  background:#252b32;
}
body.dark-mode .character-editor-shell input[type="number"]:focus{
  border-color:#6684a2;
  background:#20262d;
  box-shadow:0 0 0 2px rgba(102,132,162,.18);
}
body.dark-mode .editor-stat-field.calculated output{
  border-color:transparent!important;
  background:transparent!important;
}

@media(max-width:1180px){
  .editor-primary-stats{grid-template-columns:repeat(4,58px)!important}
  .editor-derived-stats{grid-template-columns:repeat(4,68px)!important}
}
@media(max-width:700px){
  .editor-primary-stats,
  .editor-derived-stats{
    grid-template-columns:repeat(2,minmax(68px,max-content))!important;
    width:max-content!important;
  }
}

/* =========================================================
   ver1.27: centered status values, visible editable ability fields,
   bold skill totals
   ========================================================= */

/* Ability / derived values are centered within their value areas. */
.editor-status-section .editor-stat-field input[type="number"],
.editor-status-section .editor-stat-field.calculated output{
  text-align:center!important;
}

/* Only editable ability/status numeric fields keep a visible input frame.
   Calculated values remain borderless. */
.editor-status-section .editor-stat-field:not(.calculated) input[type="number"]{
  border:1px solid #d9dde2!important;
  background:var(--panel)!important;
  border-radius:6px!important;
}
.editor-status-section .editor-stat-field:not(.calculated) input[type="number"]:hover{
  border-color:#c3c9d0!important;
  background:var(--panel)!important;
}
.editor-status-section .editor-stat-field:not(.calculated) input[type="number"]:focus{
  border-color:color-mix(in srgb,var(--accent) 68%,var(--line))!important;
  background:var(--panel)!important;
}
.editor-status-section .editor-stat-field.calculated output{
  border-color:transparent!important;
  background:transparent!important;
}

/* Skill numeric values are centered in each compact column. */
.editor-skill-row input[type="number"]{
  text-align:center!important;
  justify-self:center!important;
}
.editor-skill-head>span:not(:first-child):not(:last-child){
  text-align:center;
}

/* The total skill value is visually distinguished from allocation columns. */
.editor-skill-row input[data-skill-part="total"]{
  font-weight:700!important;
}

body.dark-mode .editor-status-section .editor-stat-field:not(.calculated) input[type="number"]{
  border-color:#48515b!important;
  background:#20262d!important;
}
body.dark-mode .editor-status-section .editor-stat-field:not(.calculated) input[type="number"]:hover{
  border-color:#596572!important;
  background:#252b32!important;
}
body.dark-mode .editor-status-section .editor-stat-field:not(.calculated) input[type="number"]:focus{
  border-color:#6684a2!important;
  background:#20262d!important;
}

/* =========================================================
   ver1.28: skill table grid + delete-column breathing room
   ========================================================= */

/* The delete column needs enough room for the × control without crowding
   the numeric table. The blank header cell keeps the same geometry. */
.editor-skill-head,
.editor-skill-row{
  grid-template-columns:190px repeat(6,40px) 40px!important;
  gap:0!important;
  min-width:470px!important;
  padding-left:0!important;
  padding-right:10px!important;
}
.editor-skill-delete-slot{
  width:40px!important;
  min-width:40px!important;
  padding-left:8px;
  justify-content:center;
}
.editor-skill-delete-slot .mini-delete{
  margin:0;
}

/* Skill name + six numeric columns are drawn as one continuous table.
   The delete column stays outside the grid lines. */
.editor-skill-head>span:nth-child(-n+7),
.editor-skill-row>.editor-skill-name,
.editor-skill-row>input[type="number"]{
  min-height:28px;
  margin:0!important;
  border:0!important;
  border-right:1px solid #dfe4e9!important;
  border-bottom:1px solid #dfe4e9!important;
  border-radius:0!important;
  box-shadow:none!important;
  box-sizing:border-box;
}
.editor-skill-head>span:nth-child(-n+7){
  display:flex;
  align-items:center;
  justify-content:center;
  padding:4px 3px;
  border-top:1px solid #dfe4e9!important;
  background:color-mix(in srgb,var(--soft) 42%,var(--panel));
}
.editor-skill-head>span:first-child{
  justify-content:flex-start;
  border-left:1px solid #dfe4e9!important;
  padding-left:5px;
}
.editor-skill-row>.editor-skill-name{
  display:flex;
  align-items:center;
  border-left:1px solid #dfe4e9!important;
  padding:3px 5px!important;
  background-clip:padding-box;
}
.editor-skill-row>input[type="number"]{
  width:100%!important;
  min-width:0!important;
  max-width:none!important;
  height:28px;
  padding:3px 2px!important;
  justify-self:stretch!important;
  text-align:center!important;
  background:transparent;
}

/* Avoid the old row separator creating a second horizontal rule. */
.editor-skill-row,
.editor-skill-row.has-allocated-points,
.editor-skill-row.has-profession-points,
.editor-skill-row.has-interest-points,
.editor-skill-row.has-both-point-types{
  border:0!important;
}

/* Keep allocation colours as cell fills within the table grid. */
.editor-skill-row input.is-allocated.skill-input-profession{background:#eef6fd!important}
.editor-skill-row input.is-allocated.skill-input-interest{background:#fff8ea!important}
.editor-skill-row input.is-allocated.skill-input-growth{background:#f2f8ef!important}
.editor-skill-row input.is-allocated.skill-input-other{background:#f7f1fb!important}
.editor-skill-row input[type="number"]:focus{
  position:relative;
  z-index:1;
  outline:2px solid color-mix(in srgb,var(--accent) 55%,transparent)!important;
  outline-offset:-2px;
}

body.dark-mode .editor-skill-head>span:nth-child(-n+7),
body.dark-mode .editor-skill-row>.editor-skill-name,
body.dark-mode .editor-skill-row>input[type="number"]{
  border-color:#48515b!important;
}
body.dark-mode .editor-skill-head>span:nth-child(-n+7){
  background:#272d34;
}
body.dark-mode .editor-skill-row input.is-allocated.skill-input-profession{background:#263746!important}
body.dark-mode .editor-skill-row input.is-allocated.skill-input-interest{background:#3b3426!important}
body.dark-mode .editor-skill-row input.is-allocated.skill-input-growth{background:#29382a!important}
body.dark-mode .editor-skill-row input.is-allocated.skill-input-other{background:#352c3c!important}

/* Custom/special add rows keep the delete column width aligned with the table. */
.editor-skill-add-row{
  grid-template-columns:24px 170px 42px 1fr 52px 40px!important;
  padding-right:10px;
}
.editor-special-add-row{
  grid-template-columns:24px auto minmax(88px,1fr) auto 42px 52px 40px!important;
  padding-right:10px;
}

/* =========================================================
   ver1.29: borderless compact skill delete control
   ========================================================= */
/* Keep the delete area available at the right side, but make the × itself
   a borderless icon-sized control that never increases the skill-row height. */
.editor-skill-delete-slot{
  width:40px!important;
  min-width:40px!important;
  height:28px!important;
  min-height:28px!important;
  padding:0 0 0 8px!important;
  margin:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  align-self:stretch!important;
  box-sizing:border-box;
}
.editor-skill-delete-slot .mini-delete{
  width:20px!important;
  min-width:20px!important;
  max-width:20px!important;
  height:20px!important;
  min-height:20px!important;
  max-height:20px!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  line-height:1!important;
  font-size:16px!important;
  font-weight:400!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  color:var(--muted);
}
.editor-skill-delete-slot .mini-delete:hover,
.editor-skill-delete-slot .mini-delete:focus,
.editor-skill-delete-slot .mini-delete:active{
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
}
.editor-skill-delete-slot .mini-delete:hover{
  color:var(--danger);
}

/* Explicitly lock the data-row height to the table cell height so the
   delete control cannot introduce vertical whitespace. */
.editor-skill-row{
  min-height:28px!important;
  align-items:stretch!important;
}

/* =========================================================
   ver1.30: muted initial/other columns + overflow only at tab edge
   ========================================================= */

/* Initial and Other are visually muted from the outset, including zero values.
   They remain directly editable when clicked. */
.editor-skill-head>span:nth-child(2),
.editor-skill-head>span:nth-child(6),
.editor-skill-row>input[data-skill-part="initial"],
.editor-skill-row>input[data-skill-part="other"]{
  background:#f1f3f5!important;
  color:#7b838d!important;
}
.editor-skill-row>input[data-skill-part="initial"]:focus,
.editor-skill-row>input[data-skill-part="other"]:focus{
  background:#fff!important;
  color:var(--text)!important;
}
body.dark-mode .editor-skill-head>span:nth-child(2),
body.dark-mode .editor-skill-head>span:nth-child(6),
body.dark-mode .editor-skill-row>input[data-skill-part="initial"],
body.dark-mode .editor-skill-row>input[data-skill-part="other"]{
  background:#30363d!important;
  color:#9da5ae!important;
}
body.dark-mode .editor-skill-row>input[data-skill-part="initial"]:focus,
body.dark-mode .editor-skill-row>input[data-skill-part="other"]:focus{
  background:#20262d!important;
  color:#eef0f3!important;
}

/* Use the skill section itself as the horizontal overflow boundary.
   Rows can keep extending to the right; a scrollbar is shown only after the
   table actually reaches and exceeds the right edge of the tab content. */
.editor-skills-section{
  min-width:0;
  overflow-x:auto;
  overflow-y:visible;
  scrollbar-width:thin;
  scrollbar-color:transparent transparent;
}
.editor-skills-section:hover,
.editor-skills-section:focus-within{
  scrollbar-color:#dfe4ea transparent;
}
.editor-skills-section::-webkit-scrollbar{height:7px}
.editor-skills-section::-webkit-scrollbar-track{background:transparent}
.editor-skills-section::-webkit-scrollbar-thumb{background:transparent;border-radius:999px}
.editor-skills-section:hover::-webkit-scrollbar-thumb,
.editor-skills-section:focus-within::-webkit-scrollbar-thumb{background:#dfe4ea}

/* Do not create a separate scrollbar for every skill category. */
.editor-skill-table{
  overflow:visible!important;
  width:max-content!important;
  max-width:none!important;
  min-width:100%!important;
}
.editor-skills{
  width:max-content!important;
  min-width:100%!important;
  max-width:none!important;
}
.editor-skill-group{
  width:max-content;
  min-width:100%;
}

/* Keep the established compact cells, but let the full grid extend rightward
   instead of compressing when the available tab width is too small. */
.editor-skill-head,
.editor-skill-row{
  width:max-content!important;
  min-width:100%!important;
  grid-template-columns:minmax(190px,max-content) repeat(6,44px) 40px!important;
}
.editor-skill-add-row,
.editor-special-add-row{
  width:max-content!important;
  min-width:100%!important;
}

body.dark-mode .editor-skills-section:hover,
body.dark-mode .editor-skills-section:focus-within{
  scrollbar-color:#4b5562 transparent;
}
body.dark-mode .editor-skills-section:hover::-webkit-scrollbar-thumb,
body.dark-mode .editor-skills-section:focus-within::-webkit-scrollbar-thumb{
  background:#4b5562;
}

/* =========================================================
   ver1.31: added-skill name field sized for ~10 full-width characters
   ========================================================= */
/* This is a visual assumption only; input length itself is not restricted. */
.editor-skill-add-row{
  grid-template-columns:24px 11.5em 42px minmax(48px,1fr) 52px 40px!important;
}
.editor-skill-add-row>input:not([type="number"]){
  width:11.5em!important;
  min-width:11.5em!important;
  max-width:11.5em!important;
}
.editor-special-add-row{
  grid-template-columns:24px auto 11.5em auto 42px 52px 40px!important;
}
.editor-special-add-row>input:not([type="number"]){
  width:11.5em!important;
  min-width:11.5em!important;
  max-width:11.5em!important;
}

/* =========================================================
   ver1.32: compact two-line point summary
   ========================================================= */
/* Profession point ability selector: remove only the outer card/frame. */
.editor-skill-sticky-header .editor-points-computed>label{
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  padding:2px 0!important;
  min-height:0!important;
  align-self:center;
}
.editor-skill-sticky-header .editor-points-computed>label>select{
  margin-top:3px;
}

/* Profession / interest point cards use two visual rows:
   row 1 = label + current/max, row 2 = formula + adjustment input. */
.editor-skill-sticky-header .computed-point-combined{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  grid-template-rows:auto auto;
  align-items:center;
  column-gap:8px;
  row-gap:3px;
  min-height:50px;
  padding:6px 8px;
}
.editor-skill-sticky-header .computed-point-combined>span{
  grid-column:1;
  grid-row:1;
}
.editor-skill-sticky-header .computed-point-combined>.point-ratio{
  grid-column:2;
  grid-row:1;
}
.editor-skill-sticky-header .computed-point-combined>small{
  grid-column:1!important;
  grid-row:2;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.editor-skill-sticky-header .computed-point-combined>.point-adjust-input{
  grid-column:2!important;
  grid-row:2;
  display:flex!important;
  align-items:center;
  justify-content:flex-end;
  gap:4px;
  margin:0!important;
  padding:0!important;
  min-height:24px!important;
  white-space:nowrap;
  opacity:1!important;
  visibility:visible!important;
}
/* Keep the adjustment input visibly available from the initial state. */
.editor-skill-sticky-header .point-adjust-input input{
  display:block!important;
  visibility:visible!important;
  opacity:1!important;
  width:48px;
  min-width:48px;
  height:24px;
  padding:2px 4px;
  border:1px solid #d9dde2!important;
  border-radius:5px!important;
  background:#fff!important;
  text-align:center;
}
body.dark-mode .editor-skill-sticky-header .point-adjust-input input{
  background:#252b32!important;
  border-color:#48515b!important;
  color:#eef0f3!important;
}

@media(max-width:700px){
  .editor-skill-sticky-header .computed-point-combined{
    grid-template-columns:minmax(0,1fr) auto;
  }
}

/* =========================================================
   ver1.33: editor alignment / skill-header behavior / compact inventory count
   ========================================================= */

/* All ability and derived value cells use one alignment rule.  The editable
   fields remain framed, while every value is visually centered in its column. */
.editor-status-section .editor-stat-field{
  width:100%!important;
  max-width:none!important;
  text-align:center!important;
  justify-self:stretch;
}
.editor-status-section .editor-stat-field>span{
  text-align:center!important;
}
.editor-status-section .editor-stat-field input[type="number"]{
  display:block;
  margin-left:auto!important;
  margin-right:auto!important;
  text-align:center!important;
}
.editor-status-section .editor-stat-field.calculated output{
  display:flex!important;
  align-items:center;
  justify-content:center;
  width:100%!important;
  min-width:0!important;
  max-width:none!important;
  margin:0!important;
  text-align:center!important;
}

/* Keep the skill summary as the vertical sticky header.  Horizontal overflow
   belongs only to the table below it; putting overflow on the whole section
   would make the sticky header establish the wrong scrolling container. */
.editor-skills-section{
  overflow:visible!important;
  min-width:0;
}
.editor-skill-sticky-header{
  position:sticky!important;
  top:0!important;
  z-index:24!important;
}
.editor-skills-scroll{
  width:100%;
  min-width:0;
  overflow-x:auto;
  overflow-y:visible;
  scrollbar-width:thin;
  scrollbar-color:transparent transparent;
}
.editor-skills-scroll:hover,
.editor-skills-scroll:focus-within{
  scrollbar-color:#dfe4ea transparent;
}
.editor-skills-scroll::-webkit-scrollbar{height:7px}
.editor-skills-scroll::-webkit-scrollbar-track{background:transparent}
.editor-skills-scroll::-webkit-scrollbar-thumb{background:transparent;border-radius:999px}
.editor-skills-scroll:hover::-webkit-scrollbar-thumb,
.editor-skills-scroll:focus-within::-webkit-scrollbar-thumb{background:#dfe4ea}
body.dark-mode .editor-skills-scroll:hover,
body.dark-mode .editor-skills-scroll:focus-within{scrollbar-color:#4b5562 transparent}
body.dark-mode .editor-skills-scroll:hover::-webkit-scrollbar-thumb,
body.dark-mode .editor-skills-scroll:focus-within::-webkit-scrollbar-thumb{background:#4b5562}

/* Added-skill controls should occupy only the space their controls need.
   Remove the old flexible filler that created unexplained blank areas. */
.editor-skill-add-row{
  grid-template-columns:24px 11.5em 42px max-content 52px 40px!important;
  column-gap:4px!important;
  width:max-content!important;
  min-width:0!important;
  padding-right:0!important;
  justify-content:start;
}
.editor-special-add-row{
  grid-template-columns:24px max-content 11.5em max-content 42px 52px 40px!important;
  column-gap:4px!important;
  width:max-content!important;
  min-width:0!important;
  padding-right:0!important;
  justify-content:start;
}
.editor-skill-add-row .editor-add-hint{
  width:max-content;
  min-width:0;
  padding:0 3px;
}
.editor-special-add-row .special-base,
.editor-special-add-row .special-initial-entry{
  width:max-content;
}

/* Inventory count is expected to be at most three digits, so do not allocate
   a general text-field width for it. */
.editor-item-table th:nth-child(2),
.editor-item-table td:nth-child(2){
  width:5.5ch!important;
  min-width:5.5ch!important;
  max-width:5.5ch!important;
  text-align:center!important;
}
.editor-item-table .editor-item-count{
  width:4.5ch!important;
  min-width:4.5ch!important;
  max-width:4.5ch!important;
  padding-left:3px!important;
  padding-right:3px!important;
  text-align:center!important;
}

/* =========================================================
   ver1.34: skill text +8% and plus-icon add action
   ========================================================= */
/* Increase the text in each skill table and the skill-category labels by 8%. */
.editor-skill-group h4{
  font-size:.9072rem!important; /* .84rem × 1.08 */
}
.editor-skill-head{
  font-size:.7236rem!important; /* .67rem × 1.08 */
}
.editor-skill-name{
  font-size:.8532rem!important; /* .79rem × 1.08 */
}
.editor-skill-row input,
.editor-skill-add-row input,
.editor-special-add-row input{
  font-size:.8208rem!important; /* .76rem × 1.08 */
}
.editor-skill-add-row .editor-add-hint{
  font-size:.7236rem!important;
}
.editor-special-add-row .special-base,
.editor-special-add-row .special-initial-entry,
.editor-special-add-row>span:not(.editor-skill-delete-slot){
  font-size:.81rem!important; /* .75rem × 1.08 */
}

/* The left + is the add control itself; the former text Add button is removed. */
.editor-add-plus-button{
  width:24px!important;
  min-width:24px!important;
  height:24px!important;
  min-height:24px!important;
  padding:0!important;
  margin:0!important;
  display:inline-flex!important;
  align-items:center;
  justify-content:center;
  border:0!important;
  border-radius:50%!important;
  background:transparent!important;
  color:#72808f!important;
  font-size:1.05rem!important;
  font-weight:700;
  line-height:1!important;
  box-shadow:none!important;
}
.editor-add-plus-button:hover,
.editor-add-plus-button:focus-visible{
  background:color-mix(in srgb,var(--accent) 10%,transparent)!important;
  color:var(--accent)!important;
  outline:none;
}
body.dark-mode .editor-add-plus-button{
  color:#aeb8c3!important;
}
body.dark-mode .editor-add-plus-button:hover,
body.dark-mode .editor-add-plus-button:focus-visible{
  background:rgba(255,255,255,.08)!important;
  color:#d7e8f7!important;
}

/* Repack add rows after removing the separate Add button. */
.editor-skill-add-row{
  grid-template-columns:24px 11.5em 42px max-content 40px!important;
  column-gap:4px!important;
}
.editor-special-add-row{
  grid-template-columns:24px max-content 11.5em max-content 42px 40px!important;
  column-gap:4px!important;
}


/* =========================================================
   ver1.35: service logo in the application header
   ========================================================= */
.brand-home{
  display:inline-flex;
  align-items:center;
  justify-content:flex-start;
  flex:0 0 auto;
  height:48px;
  min-width:0;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent!important;
}
.brand-home:hover,
.brand-home:focus-visible{
  border:0;
  background:transparent!important;
}
.brand-home:focus-visible{
  outline:2px solid color-mix(in srgb,var(--accent) 55%,transparent);
  outline-offset:4px;
  border-radius:6px;
}
.brand-logo{
  display:block;
  width:auto;
  height:34px;
  max-width:min(260px,30vw);
  object-fit:contain;
  object-position:left center;
}
.brand-logo-dark{display:none}
body.dark-mode .brand-logo-light{display:none}
body.dark-mode .brand-logo-dark{display:block}

@media(max-width:760px){
  .app-header{gap:18px;padding-left:18px;padding-right:18px}
  .brand-logo{height:30px;max-width:190px}
}
@media(max-width:560px){
  .brand-logo{height:27px;max-width:145px}
}

/* =========================================================
   ver1.36: PNG service logos
   ========================================================= */
.brand-logo{
  object-fit:contain;
  object-position:left center;
}

/* =========================================================
   ver1.37: larger visible service logo
   Transparent padding has been trimmed from the PNG assets, so the
   visible artwork can use most of the 64px header height.
   ========================================================= */
.brand-home{
  height:56px;
}
.brand-logo{
  height:48px;
  max-width:min(320px,34vw);
  width:auto;
  object-fit:contain;
  object-position:left center;
}
@media(max-width:760px){
  .brand-logo{height:42px;max-width:230px}
}
@media(max-width:560px){
  .brand-logo{height:38px;max-width:185px}
}


/* =========================================================
   ver1.38: global typography — Kaisei Tokumin
   ========================================================= */
html,body,button,input,textarea,select,option,dialog,table{
  font-family:"Kaisei Tokumin","Yu Mincho","Hiragino Mincho ProN",serif;
}
button,input,textarea,select{font:inherit;}

/* =========================================================
   ver1.39: shell-edge scrolling, compact left tabs, ripple accent,
   editor controls and personal-data style basic information
   ========================================================= */

/* The character frame itself owns vertical scrolling, so the scrollbar sits
   at the far right edge, beyond the portrait. Inner text panes no longer
   create their own vertical scrollbar. */
body.character-page .character-detail-shell,
body.character-editor-page .character-editor-shell{
  overflow-y:auto!important;
  overflow-x:hidden!important;
  align-items:start;
  scrollbar-width:thin;
  scrollbar-color:transparent transparent;
}
body.character-page .character-detail-shell.is-scrolling,
body.character-editor-page .character-editor-shell.is-scrolling{
  scrollbar-color:#dfe4ea transparent;
}
body.character-page .character-detail-shell::-webkit-scrollbar,
body.character-editor-page .character-editor-shell::-webkit-scrollbar{width:7px}
body.character-page .character-detail-shell::-webkit-scrollbar-track,
body.character-editor-page .character-editor-shell::-webkit-scrollbar-track{background:transparent}
body.character-page .character-detail-shell::-webkit-scrollbar-thumb,
body.character-editor-page .character-editor-shell::-webkit-scrollbar-thumb{background:transparent;border-radius:999px}
body.character-page .character-detail-shell.is-scrolling::-webkit-scrollbar-thumb,
body.character-editor-page .character-editor-shell.is-scrolling::-webkit-scrollbar-thumb{background:#dfe4ea}

.character-detail-shell .character-data-pane,
.character-editor-shell .editor-sheet{
  height:auto!important;
  min-height:100%;
  overflow:visible!important;
  align-self:start;
}
.character-detail-shell .character-data-pane{grid-template-rows:188px auto!important}
.character-editor-shell .editor-sheet{grid-template-rows:150px auto!important}
.character-detail-shell .character-tab-scroll,
.character-editor-shell .editor-tab-scroll{
  overflow:visible!important;
  min-height:0;
}

/* Keep the portrait visible while the shared frame scrolls. */
.character-detail-shell .portrait-fixed,
.character-editor-shell .editor-portrait{
  position:sticky!important;
  top:0!important;
  align-self:start;
  height:100%!important;
  min-height:100%!important;
  max-height:100%;
}

/* Fixed header areas remain at the top while the frame scrolls. */
.character-detail-shell .character-sheet-header,
.character-editor-shell .editor-fixed-header{
  position:sticky!important;
  top:0!important;
  z-index:40;
  background:color-mix(in srgb,var(--panel) 96%,transparent)!important;
  backdrop-filter:blur(7px);
}

/* Tabs use only their content width and stay left aligned regardless of
   the width of the character frame. */
.character-detail-shell .sheet-tabs,
.character-editor-shell .editor-tabs{
  width:max-content!important;
  max-width:100%;
  justify-content:flex-start!important;
  align-self:flex-start!important;
  gap:4px;
}
.character-detail-shell .sheet-tabs button,
.character-editor-shell .editor-tabs button{
  flex:0 0 auto!important;
  width:auto!important;
  min-width:0!important;
  padding-left:11px;
  padding-right:11px;
}
@media(min-width:981px){
  .character-detail-shell .character-sheet-header>.sheet-tabs{
    left:22px!important;
    right:auto!important;
    width:max-content!important;
    margin-left:-8px!important;
    margin-right:0!important;
  }
}

/* Accent colour becomes concentric ripples originating near the lower-right. */
.character-detail-shell::before,
.character-detail-shell.tab-status::before,
body.character-editor-page .character-editor-shell::before{
  width:55%!important;
  inset:0 0 0 auto!important;
  clip-path:none!important;
  border-radius:0 16px 16px 0!important;
  background:
    repeating-radial-gradient(circle at 80% 82%,
      color-mix(in srgb,var(--character-color) 38%,transparent) 0 2px,
      transparent 2px 34px),
    radial-gradient(circle at 80% 82%,
      color-mix(in srgb,var(--character-color) 34%,white) 0%,
      color-mix(in srgb,var(--character-color) 15%,white) 54%,
      transparent 86%)!important;
  opacity:.9;
}
.editor-portrait{background:transparent!important}

/* Detail/editor action icons share the same upper-right vertical stack and
   remain visible while the shell scrolls. */
.character-detail-shell>.sheet-controls,
.character-editor-shell>.editor-sheet-controls{
  position:sticky!important;
  grid-column:1/-1;
  grid-row:1;
  justify-self:end;
  align-self:start;
  top:18px!important;
  right:auto!important;
  margin-right:20px;
  z-index:1000!important;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:10px;
  width:max-content;
  height:max-content;
  pointer-events:auto;
}
.character-editor-shell>.editor-sheet-controls .icon-button{
  box-shadow:0 2px 8px #00000012;
  background:#fffffff0;
}
.editor-save-icon:disabled{opacity:.42;cursor:not-allowed}

/* Warning text now belongs beside the editor title rather than beside Save. */
.editor-title-text{
  display:flex;
  align-items:baseline;
  gap:14px;
  min-width:0;
}
.editor-title-text h1{flex:0 1 auto}
.editor-title-text .editor-point-warning{
  flex:0 1 auto;
  max-width:480px;
  text-align:left;
  white-space:normal;
}
.editor-save-area{display:none!important}

/* Editor basic information follows the same datum layout and click-to-edit
   interaction used by the detail screen's Personal Data section. */
.editor-basic-info-section .personal-grid{margin-top:2px}
.editor-basic-info-section .datum-value{min-height:1.55em;cursor:text}
.editor-basic-info-section .datum-value:hover{
  background:color-mix(in srgb,var(--accent) 7%,transparent);
  border-radius:5px;
}
.editor-personal-add{margin-top:9px}
.editor-image-color-bar{
  display:flex!important;
  align-items:center;
  gap:10px;
  width:max-content;
  margin:13px 0 0!important;
  color:#727b86!important;
  font-size:.72rem!important;
}
.editor-image-color-bar input[type="color"]{
  width:190px!important;
  height:18px!important;
  min-height:18px!important;
  padding:0!important;
  border:0!important;
  border-radius:999px!important;
  overflow:hidden;
  cursor:pointer;
  background:transparent!important;
}
.editor-image-color-bar input[type="color"]::-webkit-color-swatch-wrapper{padding:0}
.editor-image-color-bar input[type="color"]::-webkit-color-swatch{border:0;border-radius:999px}
.editor-image-color-bar input[type="color"]::-moz-color-swatch{border:0;border-radius:999px}

/* The image picker remains at the upper-right. Scale controls are anchored to
   the bottom of the portrait and include a one-click 100% reset. */
.editor-image-controls{right:18px!important;top:18px!important}
.editor-image-bottom-controls{
  position:absolute;
  left:18px;
  right:18px;
  bottom:18px;
  z-index:8;
  display:flex;
  justify-content:center;
  pointer-events:none;
}
.editor-image-bottom-controls .image-scale-control{
  pointer-events:auto;
  grid-template-columns:auto 30px minmax(120px,180px) 30px 48px 58px;
  max-width:100%;
}
.image-scale-reset{
  width:58px!important;
  padding:0 7px!important;
  font-size:.7rem!important;
  white-space:nowrap;
}

/* Remove the faint separator immediately above Import update. */
.editor-settings-main{
  border-bottom:0!important;
  padding-bottom:0!important;
  margin-bottom:12px!important;
}
.editor-import-update{
  border-top:0!important;
  padding-top:0!important;
}

body.dark-mode.character-page .character-detail-shell.is-scrolling,
body.dark-mode.character-editor-page .character-editor-shell.is-scrolling{scrollbar-color:#4b5562 transparent}
body.dark-mode.character-page .character-detail-shell.is-scrolling::-webkit-scrollbar-thumb,
body.dark-mode.character-editor-page .character-editor-shell.is-scrolling::-webkit-scrollbar-thumb{background:#4b5562}
body.dark-mode .character-detail-shell .character-sheet-header,
body.dark-mode .character-editor-shell .editor-fixed-header{
  background:color-mix(in srgb,var(--panel) 95%,transparent)!important;
}
body.dark-mode .character-editor-shell>.editor-sheet-controls .icon-button{background:#30363edb}
body.dark-mode .editor-basic-info-section .datum-value:hover{background:#ffffff0a}

@media(max-width:980px){
  /* On stacked layouts, normal page flow is preferable to a fixed frame. */
  body.character-page .character-detail-shell,
  body.character-editor-page .character-editor-shell{overflow:visible!important}
  .character-detail-shell .portrait-fixed,
  .character-editor-shell .editor-portrait{position:relative!important;height:440px!important;min-height:440px!important;max-height:none}
  .character-detail-shell .character-sheet-header,
  .character-editor-shell .editor-fixed-header{position:relative!important;top:auto!important}
  .character-detail-shell>.sheet-controls,
  .character-editor-shell>.editor-sheet-controls{position:absolute!important;top:18px!important;right:0!important}
}

/* Follow-up safeguards for the shared outer scroll model. */
@media(min-width:981px){
  .character-detail-shell .portrait-fixed,
  .character-editor-shell .editor-portrait{
    height:calc(100vh - 96px)!important;
    min-height:0!important;
    max-height:none!important;
  }
  /* The skill summary remains a header beneath the sticky editor title/tabs. */
  .character-editor-shell .editor-skill-sticky-header{
    top:150px!important;
    z-index:30;
  }
}

/* =========================================================
   ver1.40: compact character headers + natural water ripples
   ========================================================= */

/* Remove the legacy fixed vertical breathing room above the character name.
   Keep reading -> name/meta -> tabs in a compact, predictable stack. */
@media(min-width:981px){
  .character-detail-shell .character-data-pane{
    grid-template-rows:150px auto!important;
  }
  .character-detail-shell .character-sheet-header{
    height:150px!important;
    min-height:150px!important;
    flex:0 0 150px!important;
    padding:0 22px!important;
  }
  .character-detail-shell .character-sheet-header>.sheet-reading{
    top:10px!important;
    left:22px!important;
    height:18px!important;
    min-height:18px!important;
    line-height:18px!important;
  }
  .character-detail-shell .character-sheet-header>.sheet-title-row{
    top:27px!important;
    left:22px!important;
    height:76px!important;
    min-height:76px!important;
    align-items:center!important;
  }
  .character-detail-shell .character-sheet-header>.sheet-tabs{
    bottom:0!important;
    height:42px!important;
    min-height:42px!important;
  }

  /* Match the editor header rhythm to the detail screen. */
  .character-editor-shell .editor-sheet{
    grid-template-rows:132px auto!important;
  }
  .character-editor-shell .editor-fixed-header{
    height:132px!important;
    min-height:132px!important;
    padding:5px 30px 0!important;
  }
  .character-editor-shell .editor-title-row{
    min-height:78px!important;
  }
  .character-editor-shell .editor-tabs{
    min-height:42px!important;
    height:42px!important;
    flex-basis:42px!important;
  }
  .character-editor-shell .editor-skill-sticky-header{
    top:132px!important;
  }
}

/* Natural water-ripple treatment: several slightly offset elliptical rings
   with uneven spacing/strength, rather than a mechanically repeated circle. */
.character-detail-shell::before,
.character-detail-shell.tab-status::before,
body.character-editor-page .character-editor-shell::before{
  width:55%!important;
  inset:0 0 0 auto!important;
  clip-path:none!important;
  border-radius:0 16px 16px 0!important;
  background:
    radial-gradient(ellipse 86% 48% at 83% 84%,
      transparent 0 14%,
      color-mix(in srgb,var(--character-color) 30%,transparent) 14.2% 14.55%,
      transparent 14.8% 22.8%,
      color-mix(in srgb,var(--character-color) 24%,transparent) 23.05% 23.36%,
      transparent 23.65% 31.8%,
      color-mix(in srgb,var(--character-color) 31%,transparent) 32.05% 32.36%,
      transparent 32.65% 42.5%,
      color-mix(in srgb,var(--character-color) 22%,transparent) 42.8% 43.12%,
      transparent 43.45% 54.2%,
      color-mix(in srgb,var(--character-color) 27%,transparent) 54.48% 54.76%,
      transparent 55.05% 67%,
      color-mix(in srgb,var(--character-color) 20%,transparent) 67.25% 67.55%,
      transparent 67.85%),
    radial-gradient(ellipse 78% 42% at 79% 80%,
      transparent 0 19%,
      color-mix(in srgb,var(--character-color) 18%,transparent) 19.3% 19.6%,
      transparent 19.9% 39%,
      color-mix(in srgb,var(--character-color) 16%,transparent) 39.25% 39.5%,
      transparent 39.8% 61%,
      color-mix(in srgb,var(--character-color) 14%,transparent) 61.25% 61.48%,
      transparent 61.8%),
    radial-gradient(ellipse 70% 38% at 86% 88%,
      color-mix(in srgb,var(--character-color) 18%,white) 0%,
      color-mix(in srgb,var(--character-color) 10%,white) 38%,
      color-mix(in srgb,var(--character-color) 5%,white) 66%,
      transparent 92%)!important;
  opacity:.92!important;
}

/* Keep the light/dark variants subtle enough that the portrait remains primary. */
body.dark-mode .character-detail-shell::before,
body.dark-mode .character-detail-shell.tab-status::before,
body.dark-mode.character-editor-page .character-editor-shell::before{
  opacity:.74!important;
}

@media(max-width:980px){
  .character-detail-shell .character-sheet-header,
  .character-editor-shell .editor-fixed-header{
    height:auto!important;
    min-height:0!important;
  }
}

/* =========================================================
   ver1.41: rebuild character header flow + organic water ripples
   ========================================================= */

/*
   Detail header is now a normal document-flow stack.
   This intentionally neutralizes the older absolute-position / fixed-height
   rules rather than continuing to tune their pixel offsets.
*/
@media(min-width:981px){
  .character-detail-shell .character-data-pane{
    display:grid!important;
    grid-template-rows:auto auto!important;
    align-content:start;
    height:auto!important;
    min-height:100%;
  }

  .character-detail-shell .character-sheet-header{
    position:sticky!important;
    top:0!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    height:auto!important;
    min-height:0!important;
    flex:0 0 auto!important;
    padding:18px 22px 0!important;
    overflow:visible!important;
    z-index:40;
  }

  .character-detail-shell .character-sheet-header>.sheet-reading{
    position:static!important;
    inset:auto!important;
    width:auto!important;
    height:auto!important;
    min-height:0!important;
    margin:0 0 3px!important;
    line-height:1.35!important;
  }

  .character-detail-shell .character-sheet-header>.sheet-title-row{
    position:static!important;
    inset:auto!important;
    display:flex!important;
    align-items:center!important;
    width:auto!important;
    max-width:100%!important;
    height:auto!important;
    min-height:0!important;
    margin:0 0 8px!important;
    gap:20px!important;
    overflow:visible!important;
  }

  .character-detail-shell .character-sheet-header>.sheet-title-row .sheet-name{
    max-width:none!important;
    margin:0!important;
    line-height:1.16;
  }

  .character-detail-shell .character-sheet-header>.sheet-tabs{
    position:static!important;
    inset:auto!important;
    width:max-content!important;
    max-width:100%!important;
    height:auto!important;
    min-height:0!important;
    flex:0 0 auto!important;
    align-self:flex-start!important;
    margin:4px 0 0 -8px!important;
  }

  .character-detail-shell .sheet-tabs button{
    padding-top:9px!important;
    padding-bottom:9px!important;
  }

  /* Content starts directly after the naturally-sized header. */
  .character-detail-shell .character-tab-scroll{
    padding-top:18px!important;
  }
}

/* The same geometry is retained in dark mode; only surface colours change. */
body.dark-mode .character-detail-shell .character-sheet-header{
  background:color-mix(in srgb,var(--panel) 95%,transparent)!important;
}

/*
   Organic water-ripple accent.
   The soft wash and the ripple lines are split into separate layers.
   Ripple rings have different centres/spacing and are partially masked so
   they read as water movement rather than a geometric target pattern.
*/
.character-detail-shell::before,
.character-detail-shell.tab-status::before,
body.character-editor-page .character-editor-shell::before{
  width:55%!important;
  inset:0 0 0 auto!important;
  clip-path:none!important;
  border-radius:0 16px 16px 0!important;
  background:
    radial-gradient(ellipse 96% 72% at 88% 88%,
      color-mix(in srgb,var(--character-color) 17%,var(--panel)) 0%,
      color-mix(in srgb,var(--character-color) 10%,var(--panel)) 38%,
      color-mix(in srgb,var(--character-color) 4%,var(--panel)) 62%,
      transparent 84%)!important;
  opacity:.92!important;
}

.character-detail-shell::after,
body.character-editor-page .character-editor-shell::after{
  content:"";
  position:absolute;
  z-index:0;
  pointer-events:none;
  top:0;
  right:0;
  bottom:0;
  width:55%;
  border-radius:0 16px 16px 0;
  background:
    radial-gradient(ellipse 90% 49% at 86% 88%,
      transparent 0 18.0%,
      color-mix(in srgb,var(--character-color) 38%,transparent) 18.15% 18.42%,
      transparent 18.62% 28.8%,
      color-mix(in srgb,var(--character-color) 28%,transparent) 29.0% 29.28%,
      transparent 29.5% 40.7%,
      color-mix(in srgb,var(--character-color) 34%,transparent) 40.92% 41.18%,
      transparent 41.42% 53.4%,
      color-mix(in srgb,var(--character-color) 24%,transparent) 53.62% 53.86%,
      transparent 54.1% 67.5%,
      color-mix(in srgb,var(--character-color) 29%,transparent) 67.72% 67.96%,
      transparent 68.2%),
    radial-gradient(ellipse 74% 39% at 81% 83%,
      transparent 0 24.0%,
      color-mix(in srgb,var(--character-color) 21%,transparent) 24.2% 24.5%,
      transparent 24.75% 44.0%,
      color-mix(in srgb,var(--character-color) 18%,transparent) 44.22% 44.48%,
      transparent 44.75% 64.5%,
      color-mix(in srgb,var(--character-color) 16%,transparent) 64.7% 64.95%,
      transparent 65.2%),
    radial-gradient(ellipse 58% 31% at 90% 91%,
      transparent 0 34%,
      color-mix(in srgb,var(--character-color) 24%,transparent) 34.2% 34.48%,
      transparent 34.72% 58%,
      color-mix(in srgb,var(--character-color) 17%,transparent) 58.2% 58.45%,
      transparent 58.7%);
  -webkit-mask-image:conic-gradient(from -24deg at 86% 88%,
    #000 0deg 25deg,
    transparent 25deg 42deg,
    #000 42deg 104deg,
    transparent 104deg 120deg,
    #000 120deg 174deg,
    transparent 174deg 196deg,
    #000 196deg 252deg,
    transparent 252deg 272deg,
    #000 272deg 329deg,
    transparent 329deg 344deg,
    #000 344deg 360deg);
  mask-image:conic-gradient(from -24deg at 86% 88%,
    #000 0deg 25deg,
    transparent 25deg 42deg,
    #000 42deg 104deg,
    transparent 104deg 120deg,
    #000 120deg 174deg,
    transparent 174deg 196deg,
    #000 196deg 252deg,
    transparent 252deg 272deg,
    #000 272deg 329deg,
    transparent 329deg 344deg,
    #000 344deg 360deg);
  opacity:.82;
}

/* Keep content and portrait above both decorative layers. */
.character-detail-shell .character-data-pane,
.character-detail-shell .portrait-fixed,
body.character-editor-page .editor-sheet,
body.character-editor-page .editor-portrait{
  position:relative;
  z-index:2;
}
.character-detail-shell>.sheet-controls,
.character-detail-shell>.detail-updated-at,
.character-editor-shell>.editor-sheet-controls{
  z-index:1000!important;
}

/* Dark mode keeps the same ripple geometry, just quieter and cooler. */
body.dark-mode .character-detail-shell::before,
body.dark-mode .character-detail-shell.tab-status::before,
body.dark-mode.character-editor-page .character-editor-shell::before{
  opacity:.66!important;
}
body.dark-mode .character-detail-shell::after,
body.dark-mode.character-editor-page .character-editor-shell::after{
  opacity:.48;
}

@media(max-width:980px){
  .character-detail-shell .character-data-pane{
    display:block!important;
  }
  .character-detail-shell .character-sheet-header{
    position:relative!important;
    height:auto!important;
    min-height:0!important;
    padding:16px 18px 0!important;
  }
  .character-detail-shell .character-sheet-header>.sheet-reading,
  .character-detail-shell .character-sheet-header>.sheet-title-row,
  .character-detail-shell .character-sheet-header>.sheet-tabs{
    position:static!important;
    inset:auto!important;
    width:auto!important;
    height:auto!important;
    min-height:0!important;
  }
  .character-detail-shell .character-sheet-header>.sheet-title-row{
    margin:2px 0 7px!important;
  }
  .character-detail-shell .character-sheet-header>.sheet-tabs{
    width:max-content!important;
    max-width:100%!important;
    margin:3px 0 0 -8px!important;
  }
  .character-detail-shell::after,
  body.character-editor-page .character-editor-shell::after{
    display:none;
  }
}

/* =========================================================
   ver1.42: fixed character chrome, hidden content scrollbars,
   optional basic fields and editor image-control refinement
   ========================================================= */

/* Detail/editor shells themselves no longer scroll. Header/tabs and portrait
   stay fixed; only the data panel below the tabs owns vertical scrolling. */
@media(min-width:981px){
  body.character-page .character-detail-shell,
  body.character-editor-page .character-editor-shell{
    overflow:hidden!important;
    height:100%!important;
    min-height:0!important;
    align-items:stretch!important;
  }

  .character-detail-shell .character-data-pane{
    display:grid!important;
    grid-template-rows:auto minmax(0,1fr)!important;
    height:100%!important;
    min-height:0!important;
    overflow:hidden!important;
    align-content:stretch!important;
  }
  .character-editor-shell .editor-sheet{
    display:grid!important;
    grid-template-rows:150px minmax(0,1fr)!important;
    height:100%!important;
    min-height:0!important;
    overflow:hidden!important;
  }

  .character-detail-shell .character-sheet-header,
  .character-editor-shell .editor-fixed-header{
    position:relative!important;
    top:auto!important;
    flex:0 0 auto!important;
  }

  .character-detail-shell .character-tab-scroll,
  .character-editor-shell .editor-tab-scroll{
    min-height:0!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    scrollbar-width:none!important;
    -ms-overflow-style:none;
  }
  .character-detail-shell .character-tab-scroll::-webkit-scrollbar,
  .character-editor-shell .editor-tab-scroll::-webkit-scrollbar{
    width:0!important;
    height:0!important;
    display:none!important;
  }

  .character-detail-shell .portrait-fixed,
  .character-editor-shell .editor-portrait{
    position:relative!important;
    top:auto!important;
    align-self:stretch!important;
    height:100%!important;
    min-height:0!important;
    max-height:none!important;
    overflow:hidden!important;
  }

  /* Skill summary sticks within the editor's content scroller, directly under
     the fixed title/tabs rather than using the old outer-shell offset. */
  .character-editor-shell .editor-skill-sticky-header{
    top:0!important;
  }

  .character-detail-shell>.sheet-controls,
  .character-editor-shell>.editor-sheet-controls{
    position:absolute!important;
    top:18px!important;
    right:18px!important;
    margin:0!important;
  }
}

/* Detail screen uses the same ●image presentation as snapshots. */
.image-color-readonly{
  gap:5px;
}
.image-color-readonly i{
  width:18px;
  height:8px;
  border-radius:3px;
  border:1px solid #d8dce1;
}


/* Image picker becomes the third action icon below Back / Save. */
.editor-image-pick-icon{
  display:flex!important;
  align-items:center;
  justify-content:center;
  padding:0!important;
  cursor:pointer;
}
.editor-image-pick-icon input{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  opacity:0!important;
  pointer-events:none;
}
.editor-image-pick-icon svg{width:18px;height:18px;fill:currentColor}
.editor-image-controls{display:none!important}

/* Image reset actions sit above the size slider. */
.editor-image-bottom-controls{
  left:18px!important;
  right:18px!important;
  bottom:18px!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  gap:7px!important;
  pointer-events:none;
}
.editor-image-reset-row{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  pointer-events:auto;
}
.editor-image-bottom-controls .image-position-reset,
.editor-image-bottom-controls .image-scale-reset{
  position:static!important;
  width:auto!important;
  height:auto!important;
  padding:6px 10px!important;
  margin:0!important;
  border-radius:9px!important;
  background:rgba(255,255,255,.9);
  font-size:.72rem!important;
  white-space:nowrap;
}
.editor-image-bottom-controls .image-scale-control{
  grid-template-columns:auto 30px minmax(120px,180px) 30px 48px!important;
}

/* Weapon delete action uses exactly the same visual treatment as inventory. */
.editor-item-delete-button{
  border:0!important;
  background:transparent!important;
  color:#aaa!important;
  padding:4px!important;
  width:auto!important;
  height:auto!important;
  min-width:0!important;
  border-radius:0!important;
  box-shadow:none!important;
}
.editor-item-delete-button:hover{color:var(--danger)!important;background:transparent!important}

/* Session history starts immediately with the timeline; no 01-00 / SESSIONS strip. */
.scenario-history-head{display:none!important}

body.dark-mode .editor-image-bottom-controls .image-position-reset,
body.dark-mode .editor-image-bottom-controls .image-scale-reset{background:rgba(42,48,55,.9);color:#eef0f3;border-color:#505a65}

@media(max-width:980px){
  /* Stacked layouts remain page-flow based, but hide the inner scrollbar if
     a browser creates one temporarily during layout changes. */
  .character-detail-shell .character-tab-scroll,
  .character-editor-shell .editor-tab-scroll{scrollbar-width:none!important}
  .character-detail-shell .character-tab-scroll::-webkit-scrollbar,
  .character-editor-shell .editor-tab-scroll::-webkit-scrollbar{display:none!important}
}

/* =========================================================
   ver1.43: backstory visibility toggles without screen rerender
   ========================================================= */
.backstory-fold.is-backstory-hidden{display:none!important}
.backstory-no-visible[hidden]{display:none!important}

/* =========================================================
   ver1.44: align detail content split with character editor
   ========================================================= */
@media(min-width:981px){
  /* Use exactly the same left data / right portrait ratio as the editor.
     This keeps the vertical boundary below the tabs aligned between the two screens. */
  body.character-page .character-detail-shell,
  body.character-page .character-detail-shell.tab-status{
    grid-template-columns:minmax(640px,62%) minmax(340px,38%)!important;
  }
}

@media(max-width:1220px) and (min-width:981px){
  body.character-page .character-detail-shell,
  body.character-page .character-detail-shell.tab-status{
    grid-template-columns:minmax(600px,62%) minmax(320px,38%)!important;
  }
}

/* =========================================================
   ver1.45: right-align portrait reset / scale controls
   ========================================================= */
.editor-image-bottom-controls{
  align-items:flex-end!important;
  justify-content:flex-end!important;
}
.editor-image-reset-row{
  justify-content:flex-end!important;
  align-self:flex-end!important;
}
.editor-image-bottom-controls .image-scale-control{
  align-self:flex-end!important;
  width:max-content!important;
  max-width:min(100%,360px)!important;
}

/* =========================================================
   ver1.46: editor image setting alignment / roll action placement
   ========================================================= */
.editor-roll-all-row{
  display:flex;
  justify-content:flex-start;
  margin-top:10px;
}
.editor-roll-all-row .roll-all-button{
  margin:0;
}


/* =========================================================
   ver1.47: canonical tab-content scrolling model
   ---------------------------------------------------------
   Desktop character screens now have exactly one vertical
   scrolling owner: the content area below the tabs.
   The shell, fixed header/tabs and portrait never scroll.
   Character scrollbars stay visually hidden.
   ========================================================= */
@media(min-width:981px){
  /* Outer character frames are fixed viewports, never scrollers. */
  body.character-page .character-detail-shell,
  body.character-editor-page .character-editor-shell{
    overflow:hidden!important;
    overscroll-behavior:none;
    height:100%!important;
    min-height:0!important;
  }

  /* Left side is split into fixed header + one scrolling content viewport. */
  .character-detail-shell .character-data-pane,
  .character-editor-shell .editor-sheet{
    display:grid!important;
    grid-template-rows:auto minmax(0,1fr)!important;
    height:100%!important;
    min-height:0!important;
    overflow:hidden!important;
  }

  /* Header and tabs remain outside the scrolling viewport. */
  .character-detail-shell .character-sheet-header,
  .character-editor-shell .editor-fixed-header{
    position:relative!important;
    inset:auto!important;
    top:auto!important;
    height:auto!important;
    min-height:0!important;
    flex:0 0 auto!important;
    overflow:visible!important;
  }

  /* This is the only vertical scrolling owner on character screens. */
  .character-detail-shell .character-tab-scroll,
  .character-editor-shell .editor-tab-scroll{
    min-height:0!important;
    height:auto!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    overscroll-behavior:contain;
    scrollbar-width:none!important;
    scrollbar-color:transparent transparent!important;
    -ms-overflow-style:none!important;
  }
  .character-detail-shell .character-tab-scroll::-webkit-scrollbar,
  .character-editor-shell .editor-tab-scroll::-webkit-scrollbar{
    width:0!important;
    height:0!important;
    display:none!important;
  }
  .character-detail-shell .character-tab-scroll::-webkit-scrollbar-thumb,
  .character-editor-shell .editor-tab-scroll::-webkit-scrollbar-thumb{
    background:transparent!important;
  }

  /* Portrait shares the viewport but never participates in data scrolling. */
  .character-detail-shell .portrait-fixed,
  .character-editor-shell .editor-portrait{
    position:relative!important;
    inset:auto!important;
    top:auto!important;
    align-self:stretch!important;
    height:100%!important;
    min-height:0!important;
    max-height:none!important;
    overflow:hidden!important;
  }

  /* Skill summary sticks only inside the editor's single tab-content scroller. */
  .character-editor-shell .editor-skill-sticky-header{
    position:sticky!important;
    top:0!important;
    z-index:30!important;
  }
}

/* Character screens no longer use transient visible-scrollbar classes. */
body.character-page .character-detail-shell.is-scrolling,
body.character-editor-page .character-editor-shell.is-scrolling,
body.character-page .character-tab-scroll.is-scrolling,
body.character-editor-page .editor-tab-scroll.is-scrolling{
  scrollbar-width:none!important;
  scrollbar-color:transparent transparent!important;
}
body.character-page .character-detail-shell.is-scrolling::-webkit-scrollbar-thumb,
body.character-editor-page .character-editor-shell.is-scrolling::-webkit-scrollbar-thumb,
body.character-page .character-tab-scroll.is-scrolling::-webkit-scrollbar-thumb,
body.character-editor-page .editor-tab-scroll.is-scrolling::-webkit-scrollbar-thumb{
  background:transparent!important;
}

/* =========================================================
   ver1.48: basic information spacing / image control alignment
   ========================================================= */

/* Bring the first Basic Information section closer to the tabs. */
.character-tab-scroll > .section-title:first-child{
  margin-top:4px!important;
}
.editor-tab-scroll > .editor-basic-info-section:first-child{
  margin-top:0!important;
  padding-top:0!important;
}
.editor-basic-info-section > h3{
  margin-top:0!important;
}

/* Give each basic-information datum a little more vertical breathing room. */
.character-tab-scroll .personal-grid,
.editor-basic-info-section .personal-grid{
  row-gap:18px!important;
}

/* Detail-screen image indicator reads "image ●". */
.image-color-readonly{
  display:inline-flex!important;
  align-items:center!important;
  gap:6px!important;
}
.image-color-readonly i{
  order:2;
  flex:0 0 auto;
}


@media(max-width:650px){
  .character-tab-scroll .personal-grid,
  .editor-basic-info-section .personal-grid{
    row-gap:15px!important;
  }
}

/* =========================================================
   ver1.49: force detail split to match the current editor split
   ========================================================= */
@media(min-width:981px){
  /* The editor's current desktop split is 54% data / 46% portrait.
     Override older detail-only 62/38 rules so the vertical boundary of the
     tab-content scroller matches the editor exactly on every detail tab. */
  body.character-page .character-detail-shell,
  body.character-page .character-detail-shell.tab-status{
    grid-template-columns:minmax(600px,54%) minmax(380px,46%)!important;
  }
}

/* =========================================================
   ver1.50: unified 55 / 45 character layout split
   ========================================================= */
@media(min-width:1181px){
  body.character-page .character-detail-shell,
  body.character-page .character-detail-shell.tab-status,
  body.character-editor-page .character-editor-shell{
    grid-template-columns:minmax(600px,55%) minmax(380px,45%)!important;
  }

  .character-detail-shell::before,
  .character-detail-shell.tab-status::before,
  body.character-editor-page .character-editor-shell::before,
  .character-detail-shell::after,
  body.character-editor-page .character-editor-shell::after{
    width:55%!important;
  }
}

/* =========================================================
   ver1.51: rebalance basic-information vertical spacing
   ========================================================= */
/* Keep the section compact while retaining enough separation for scanning. */
.character-tab-scroll .personal-grid,
.editor-basic-info-section .personal-grid{
  row-gap:12px!important;
}
.character-tab-scroll .personal-grid .datum,
.editor-basic-info-section .personal-grid .datum{
  min-height:27px;
}

@media(max-width:650px){
  .character-tab-scroll .personal-grid,
  .editor-basic-info-section .personal-grid{
    row-gap:10px!important;
  }
}

/* =========================================================
   ver1.53: correctly apply 15px basic-information row spacing
   ========================================================= */
/* Previous ver1.52 did not actually override ver1.51's 12px rule.
   Keep this at the end of the stylesheet so both detail and editor basic
   information grids use the requested 15px spacing. */
.character-tab-scroll .personal-grid,
.editor-basic-info-section .personal-grid{
  row-gap:15px!important;
}

@media(max-width:650px){
  .character-tab-scroll .personal-grid,
  .editor-basic-info-section .personal-grid{
    row-gap:15px!important;
  }
}

/* =========================================================
   ver1.55: collapsible basic info / income sections
   ========================================================= */
.character-tab-scroll .overview-fold{
  margin:0;
  border:0;
}
.character-tab-scroll .overview-fold + .overview-fold{
  margin-top:16px;
}
.character-tab-scroll .overview-fold > summary{
  margin:0 0 9px;
}
.character-tab-scroll .overview-fold:not([open]) > summary{
  margin-bottom:0;
}
.character-tab-scroll .overview-fold-content{
  min-width:0;
}

/* =========================================================
   ver1.56: overview balance refinement
   - compact Income & Assets spacing
   - pull image indicator closer to the tag row
   - quiet the detail-screen ripple accent
   ========================================================= */

/* 1) Keep the low-density income section compact without squeezing Basic Info. */
.character-tab-scroll .overview-tab .overview-fold + .overview-fold{
  margin-top:11px!important;
}
.character-tab-scroll .overview-tab .overview-fold:nth-of-type(2) > summary{
  margin-bottom:6px!important;
}
.character-tab-scroll .overview-tab .overview-fold:nth-of-type(2) .income-grid{
  margin-bottom:12px!important;
  row-gap:8px!important;
}
.character-tab-scroll .overview-tab .overview-fold:nth-of-type(2) + .plain-section,
.character-tab-scroll .overview-tab .overview-fold:nth-of-type(2) + section{
  margin-top:10px!important;
}

/* 2) Treat tags + image indicator as one compact metadata block. */
.character-detail-shell .sheet-meta-stack{
  gap:3px!important;
}
.character-detail-shell .sheet-tags-inline{
  min-height:27px!important;
}
.character-detail-shell .image-color-readonly{
  margin-top:-1px!important;
  line-height:1.1!important;
}
.character-detail-shell .image-color-readonly i{
  width:18px!important;
  height:8px!important;
  border-width:1px!important;
  border-radius:3px!important;
}

/* 3) Reduce the visual weight and ring count of the detail-screen ripples.
   Keep the editor background unchanged. */
.character-detail-shell::before,
.character-detail-shell.tab-status::before{
  background:
    radial-gradient(ellipse 92% 68% at 88% 89%,
      color-mix(in srgb,var(--character-color) 11%,var(--panel)) 0%,
      color-mix(in srgb,var(--character-color) 6%,var(--panel)) 39%,
      color-mix(in srgb,var(--character-color) 2%,var(--panel)) 64%,
      transparent 84%)!important;
  opacity:.72!important;
}
.character-detail-shell::after{
  background:
    radial-gradient(ellipse 90% 49% at 86% 88%,
      transparent 0 22%,
      color-mix(in srgb,var(--character-color) 28%,transparent) 22.18% 22.42%,
      transparent 22.68% 40%,
      color-mix(in srgb,var(--character-color) 22%,transparent) 40.18% 40.42%,
      transparent 40.68% 59%,
      color-mix(in srgb,var(--character-color) 24%,transparent) 59.18% 59.42%,
      transparent 59.7%),
    radial-gradient(ellipse 66% 34% at 80% 84%,
      transparent 0 31%,
      color-mix(in srgb,var(--character-color) 17%,transparent) 31.18% 31.42%,
      transparent 31.68% 58%,
      color-mix(in srgb,var(--character-color) 14%,transparent) 58.18% 58.42%,
      transparent 58.7%)!important;
  opacity:.56!important;
}
body.dark-mode .character-detail-shell::before,
body.dark-mode .character-detail-shell.tab-status::before{
  opacity:.5!important;
}
body.dark-mode .character-detail-shell::after{
  opacity:.34!important;
}


/* =========================================================
   ver1.60: overview content alignment
   Headings stay fixed. Basic info shifts 10px right, income/assets 3px,
   and memo content 8px.
   ========================================================= */
.character-tab-scroll .overview-tab .overview-fold:first-of-type .overview-fold-content{
  position:relative;
  left:10px;
}
.character-tab-scroll .overview-tab .overview-fold:nth-of-type(2) .overview-fold-content{
  position:relative;
  left:6px;
}
.character-tab-scroll .overview-tab > .plain-section .plain-text,
.character-tab-scroll .overview-tab > .plain-section .read-block,
.character-tab-scroll .overview-tab > .plain-section .inline-long-editor{
  position:relative;
  left:8px;
}

/* Image colour uses a small rectangular swatch in detail and editor views. */
.character-detail-shell .image-color-readonly i{
  width:18px!important;
  height:8px!important;
  min-width:18px!important;
  border:1px solid #d8dce1!important;
  border-radius:3px!important;
}
body.dark-mode .character-detail-shell .image-color-readonly i{
  border-color:#4a535d!important;
}

/* =========================================================
   ver1.62: restore detail header tag/image placement to ver1.55
   Keep the current rectangular image-colour swatch shape.
   ========================================================= */
.character-detail-shell .sheet-meta-stack{
  gap:7px!important;
}
.character-detail-shell .sheet-tags-inline{
  min-height:31px!important;
}
.character-detail-shell .image-color-readonly{
  margin-top:0!important;
  line-height:normal!important;
}

/* =========================================================
   ver1.63: compact tag editor below the basic-information + action
   ========================================================= */
.editor-tag-editor{
  display:grid;
  grid-template-columns:54px minmax(0,1fr);
  align-items:start;
  gap:8px;
  margin-top:8px;
  padding-left:0;
}
.editor-tag-editor-label{
  padding-top:5px;
  color:#6d7580;
  font-size:.74rem;
  line-height:1.2;
}
.editor-tag-editor-body{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:5px;
  min-width:0;
}
.editor-tag-editor-chips{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:5px;
}
.editor-tag-chip{
  padding:3px 7px;
  font-size:.72rem;
}
.editor-tag-chip button{
  width:auto!important;
  min-width:0!important;
  height:auto!important;
  margin:0 0 0 2px!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
  color:inherit!important;
  line-height:1!important;
  box-shadow:none!important;
}
.editor-tag-input{
  width:132px!important;
  min-width:112px!important;
  max-width:180px!important;
  padding:4px 7px!important;
  border-radius:999px!important;
  border:1px dashed #cfd5dc!important;
  background:transparent!important;
  font-size:.72rem!important;
}
.editor-tag-input:focus{
  border-style:solid!important;
  border-color:#aeb7c1!important;
  outline:none;
}
body.dark-mode .editor-tag-editor-label{color:#aeb6c0}
body.dark-mode .editor-tag-input{
  border-color:#4a535d!important;
  color:#eef0f3!important;
}
body.dark-mode .editor-tag-input:focus{border-color:#6d7884!important}

@media(max-width:650px){
  .editor-tag-editor{grid-template-columns:1fr;gap:4px}
  .editor-tag-input{width:100%!important;max-width:220px!important}
}

/* =========================================================
   ver1.65: character system chip is visual metadata, not a user tag
   ========================================================= */
.system-tag-chip{
  cursor:default;
  user-select:none;
}

/* =========================================================
   ver1.66: light/dark character accent consistency
   - keep the 55% data / 45% portrait split authoritative
   - decorative colour/ripple layers belong only to the 45% portrait side
   - dark mode uses the same accent recipe and opacity as light mode
   ========================================================= */

/* The image side is 45%, so the decorative layers must be 45% as well. */
.character-detail-shell::before,
.character-detail-shell.tab-status::before,
.character-detail-shell::after,
body.character-editor-page .character-editor-shell::before,
body.character-editor-page .character-editor-shell::after{
  width:45%!important;
  left:auto!important;
  right:0!important;
}

/* Detail: use one shared recipe in both themes. var(--panel) supplies the
   theme surface colour, while --character-color only provides the accent. */
body.dark-mode .character-detail-shell::before,
body.dark-mode .character-detail-shell.tab-status::before{
  background:
    radial-gradient(ellipse 92% 68% at 88% 89%,
      color-mix(in srgb,var(--character-color) 11%,var(--panel)) 0%,
      color-mix(in srgb,var(--character-color) 6%,var(--panel)) 39%,
      color-mix(in srgb,var(--character-color) 2%,var(--panel)) 64%,
      transparent 84%)!important;
  opacity:.72!important;
}
body.dark-mode .character-detail-shell::after{
  background:
    radial-gradient(ellipse 90% 49% at 86% 88%,
      transparent 0 22%,
      color-mix(in srgb,var(--character-color) 28%,transparent) 22.18% 22.42%,
      transparent 22.68% 40%,
      color-mix(in srgb,var(--character-color) 22%,transparent) 40.18% 40.42%,
      transparent 40.68% 59%,
      color-mix(in srgb,var(--character-color) 24%,transparent) 59.18% 59.42%,
      transparent 59.7%),
    radial-gradient(ellipse 66% 34% at 80% 84%,
      transparent 0 31%,
      color-mix(in srgb,var(--character-color) 17%,transparent) 31.18% 31.42%,
      transparent 31.68% 58%,
      color-mix(in srgb,var(--character-color) 14%,transparent) 58.18% 58.42%,
      transparent 58.7%)!important;
  opacity:.56!important;
}

/* Editor: likewise keep the light-mode water accent recipe in dark mode. */
body.dark-mode.character-editor-page .character-editor-shell::before{
  background:
    radial-gradient(ellipse 96% 72% at 88% 88%,
      color-mix(in srgb,var(--character-color) 17%,var(--panel)) 0%,
      color-mix(in srgb,var(--character-color) 10%,var(--panel)) 38%,
      color-mix(in srgb,var(--character-color) 4%,var(--panel)) 62%,
      transparent 84%)!important;
  opacity:.92!important;
}
body.dark-mode.character-editor-page .character-editor-shell::after{
  opacity:.82!important;
}

/* Old dark-mode portrait gradients must not paint a solid accent panel. */
body.dark-mode .character-detail-shell .portrait-fixed,
body.dark-mode.character-editor-page .editor-portrait{
  background:transparent!important;
}

/* =========================================================
   ver1.69: move portrait size control to the top-left of Back
   ========================================================= */
/* The size slider is a fixed shell-level control beside the action stack,
   so it no longer occupies the lower portrait area. */
.character-editor-shell>.editor-image-scale-top{
  position:sticky!important;
  grid-column:1/-1;
  grid-row:1;
  justify-self:end;
  align-self:start;
  top:18px!important;
  margin-right:76px;
  z-index:1001!important;
  width:max-content;
  height:max-content;
  pointer-events:auto;
}
.character-editor-shell>.editor-image-scale-top .image-scale-control{
  width:max-content!important;
  max-width:360px!important;
  grid-template-columns:auto 30px minmax(120px,180px) 30px 48px!important;
  margin:0!important;
  padding:6px 8px!important;
  border:1px solid color-mix(in srgb,var(--line) 86%,transparent);
  border-radius:10px;
  background:color-mix(in srgb,var(--panel) 94%,transparent);
  box-shadow:0 2px 8px #00000012;
  backdrop-filter:blur(6px);
}
/* The bottom portrait controls now contain reset actions only. */
.editor-image-bottom-controls .image-scale-control{display:none!important}
body.dark-mode .character-editor-shell>.editor-image-scale-top .image-scale-control{
  background:color-mix(in srgb,var(--panel) 92%,transparent);
  border-color:var(--line);
}
@media(max-width:980px){
  .character-editor-shell>.editor-image-scale-top{
    position:absolute!important;
    top:18px!important;
    right:76px!important;
    margin:0!important;
  }
}

/* =========================================================
   ver1.71: vertical portrait scale control
   ========================================================= */
.character-editor-shell>.editor-sheet-controls{
  align-items:center!important;
}
.character-editor-shell>.editor-image-scale-top{
  display:none!important;
}
.editor-image-scale-vertical{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:5px;
  width:40px;
  padding:7px 4px 6px;
  border:1px solid color-mix(in srgb,var(--line) 86%,transparent);
  border-radius:12px;
  background:color-mix(in srgb,var(--panel) 94%,transparent);
  box-shadow:0 2px 8px #00000012;
  backdrop-filter:blur(6px);
}
.editor-image-scale-vertical>span{
  font-size:.66rem;
  line-height:1;
  color:var(--muted);
  writing-mode:vertical-rl;
  letter-spacing:.04em;
}
.editor-image-scale-vertical button{
  width:28px;
  height:28px;
  min-width:28px;
  padding:0;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  line-height:1;
}
.editor-image-scale-vertical input[type="range"]{
  writing-mode:vertical-lr;
  direction:rtl;
  width:22px;
  height:116px;
  min-height:116px;
  margin:1px 0;
  padding:0;
  cursor:pointer;
}
.editor-image-scale-vertical b{
  font-size:.63rem;
  font-variant-numeric:tabular-nums;
  color:var(--text);
  white-space:nowrap;
}
body.dark-mode .editor-image-scale-vertical{
  background:color-mix(in srgb,var(--panel) 92%,transparent);
  border-color:var(--line);
  box-shadow:0 2px 8px #00000030;
}
@media(max-width:980px){
  .editor-image-scale-vertical input[type="range"]{height:92px;min-height:92px}
}

/* =========================================================
   ver1.75: stable editor save cluster
   The warning and Save button are a single right-aligned group so showing or
   hiding the warning can never change the Save button's horizontal anchor.
   ========================================================= */
.character-editor-shell .editor-title-text{
  display:flex!important;
  align-items:center!important;
  width:100%!important;
  min-width:0!important;
}
.character-editor-shell .editor-title-text h1{
  flex:0 0 auto!important;
  margin-right:0!important;
}
.character-editor-shell .editor-save-cluster{
  margin-left:auto;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  min-width:0;
  flex:0 1 auto;
}
.character-editor-shell .editor-save-cluster .editor-point-warning{
  margin:0!important;
  flex:0 1 auto!important;
  max-width:460px!important;
  color:#c62828!important;
  font-weight:600;
  text-align:right!important;
  white-space:normal!important;
  line-height:1.3;
}
.character-editor-shell .editor-save-cluster .editor-point-warning.is-unsaved,
.character-editor-shell .editor-save-cluster .editor-point-warning.is-error{
  color:#c62828!important;
}
.character-editor-shell .editor-title-save{
  flex:0 0 auto!important;
  width:auto!important;
  height:auto!important;
  min-width:64px!important;
  padding:7px 14px!important;
  border-radius:999px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  box-shadow:none!important;
  margin:0!important;
}
body.dark-mode .character-editor-shell .editor-save-cluster .editor-point-warning,
body.dark-mode .character-editor-shell .editor-save-cluster .editor-point-warning.is-unsaved,
body.dark-mode .character-editor-shell .editor-save-cluster .editor-point-warning.is-error{
  color:#ff8f8f!important;
}
@media(max-width:700px){
  .character-editor-shell .editor-save-cluster{gap:6px}
  .character-editor-shell .editor-save-cluster .editor-point-warning{
    max-width:180px!important;
    font-size:.68rem!important;
  }
  .character-editor-shell .editor-title-save{
    min-width:56px!important;
    padding:6px 11px!important;
  }
}

/* =========================================================
   ver1.73: illustrated home dashboard
   ========================================================= */
body.home-page{
  overflow:hidden;
}
body.home-page main{
  max-width:none;
  height:calc(100vh - 64px);
  margin:0;
  padding:0;
  overflow:hidden;
}
.home-hero-shell{
  position:relative;
  display:grid;
  grid-template-columns:minmax(420px,43%) minmax(0,57%);
  width:100%;
  height:100%;
  min-height:620px;
  overflow:hidden;
  background:var(--bg);
}
.home-brand-panel{
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:5vh 3vw 4vh 2vw;
  background:var(--bg);
  overflow:hidden;
}
.home-brand-panel::after{
  content:"";
  position:absolute;
  top:-7%;
  right:-20%;
  width:43%;
  height:114%;
  background:var(--bg);
  border-radius:0 0 82% 0 / 0 0 72% 0;
  transform:skewX(-8deg);
  z-index:-1;
}
.home-brand-art{
  display:block;
  width:min(94%,760px);
  height:auto;
  max-height:78vh;
  object-fit:contain;
  object-position:center;
  filter:none;
}
.home-brand-art-dark{display:none}
body.dark-mode .home-brand-art-light{display:none}
body.dark-mode .home-brand-art-dark{display:block}

.home-dashboard-panel{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-rows:auto 1fr;
  align-content:start;
  gap:7vh;
  padding:7vh 5.5vw 6vh 7vw;
  background:color-mix(in srgb,var(--accent) 24%,#f4fbff);
}
.home-primary-actions{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7vw;
  min-height:300px;
}
.home-circle-action{
  width:clamp(210px,16vw,290px);
  aspect-ratio:1;
  border-radius:50%;
  border:5px solid color-mix(in srgb,var(--accent) 74%,#7aa0ff);
  background:color-mix(in srgb,var(--panel) 93%,transparent);
  box-shadow:0 3px 0 color-mix(in srgb,var(--accent) 48%,transparent);
  display:grid;
  place-items:center;
  padding:0;
  color:var(--accent);
  font-size:clamp(1.6rem,2.3vw,2.55rem);
  font-weight:700;
  letter-spacing:.02em;
}
.home-circle-action:hover{
  background:color-mix(in srgb,var(--panel) 97%,var(--accent) 3%);
  border-color:var(--accent);
  transform:translateY(-2px);
}
.home-circle-action:focus-visible{
  outline:3px solid color-mix(in srgb,var(--accent) 45%,transparent);
  outline-offset:5px;
}
.home-next-session{
  width:min(100%,820px);
  margin:0 auto;
  align-self:start;
}
.home-next-session h2{
  margin:0 0 14px;
  font-size:clamp(1.2rem,1.35vw,1.55rem);
}
.home-next-session .home-session-list{
  margin-top:0;
  border-top:1px solid color-mix(in srgb,var(--text) 14%,transparent);
}
.home-next-session .home-session-row{
  grid-template-columns:42px minmax(0,1fr) 150px 105px;
  border-bottom:1px solid color-mix(in srgb,var(--text) 11%,transparent);
  background:transparent;
}
.home-next-session .home-session-head{
  color:color-mix(in srgb,var(--text) 58%,transparent);
}
.home-next-session .home-session-title,
.home-next-session .home-session-date,
.home-next-session .home-session-time,
.home-next-session .home-session-no{
  color:color-mix(in srgb,var(--text) 66%,transparent);
}
.home-next-session .home-session-title:hover{color:var(--accent)}

body.dark-mode .home-hero-shell,
body.dark-mode .home-brand-panel,
body.dark-mode .home-brand-panel::after{
  background:var(--bg);
}
body.dark-mode .home-dashboard-panel{
  background:color-mix(in srgb,var(--accent) 15%,var(--bg));
}
body.dark-mode .home-circle-action{
  background:color-mix(in srgb,var(--panel) 94%,transparent);
  border-color:color-mix(in srgb,var(--accent) 74%,#7aa0ff);
  color:#8ec5ff;
}

@media(max-width:1100px){
  body.home-page{overflow:auto}
  body.home-page main{height:auto;min-height:calc(100vh - 64px);overflow:visible}
  .home-hero-shell{grid-template-columns:1fr;min-height:0}
  .home-brand-panel{min-height:420px;padding:40px 24px 20px}
  .home-brand-panel::after{display:none}
  .home-brand-art{width:min(82%,620px);max-height:360px}
  .home-dashboard-panel{padding:40px 28px 56px;gap:38px}
  .home-primary-actions{min-height:0;gap:48px}
}
@media(max-width:680px){
  .home-brand-panel{min-height:300px}
  .home-brand-art{width:min(96%,520px);max-height:260px}
  .home-primary-actions{gap:18px}
  .home-circle-action{width:min(42vw,190px);font-size:1.25rem;border-width:4px}
  .home-dashboard-panel{padding:28px 18px 44px}
  .home-next-session .home-session-row{grid-template-columns:32px minmax(0,1fr) 105px}
  .home-next-session .home-session-time{display:none}
  .home-next-session .home-session-head span:nth-child(4){display:none}
}

/* =========================================================
   ver1.74: calmer home dashboard + stable editor save UI
   ========================================================= */
/* Keep the illustrated two-column concept, but reduce the logo/action scale
   and replace the flat right-side fill with a light ripple field. */
.home-brand-art{
  width:min(82%,650px);
  max-height:67vh;
}
.home-dashboard-panel{
  position:relative;
  isolation:isolate;
  grid-template-rows:auto auto;
  gap:3.2vh;
  padding:5.2vh 5.5vw 6vh 6.2vw;
  background:var(--panel);
  overflow:hidden;
}
.home-dashboard-panel::before,
.home-dashboard-panel::after{
  content:"";
  position:absolute;
  z-index:-1;
  pointer-events:none;
  border-radius:50%;
  border:2px solid color-mix(in srgb,var(--accent) 22%,transparent);
  opacity:.72;
}
.home-dashboard-panel::before{
  width:760px;
  height:330px;
  right:-250px;
  bottom:-135px;
  box-shadow:
    0 0 0 32px color-mix(in srgb,var(--accent) 8%,transparent),
    0 0 0 76px color-mix(in srgb,var(--accent) 6%,transparent),
    0 0 0 128px color-mix(in srgb,var(--accent) 4%,transparent);
  transform:rotate(-6deg);
}
.home-dashboard-panel::after{
  width:520px;
  height:210px;
  right:20%;
  bottom:-85px;
  border-color:color-mix(in srgb,var(--accent) 14%,transparent);
  transform:rotate(4deg);
}
.home-primary-actions{
  gap:5vw;
  min-height:245px;
}
.home-circle-action{
  width:clamp(175px,13vw,235px);
  border-width:4px;
  font-size:clamp(1.35rem,1.75vw,1.95rem);
  box-shadow:none;
}
.home-next-session{
  width:min(100%,780px);
  margin:0 auto;
}
.home-next-session h2{margin-bottom:10px}
.home-next-session .home-session-row{
  grid-template-columns:minmax(0,1fr) 150px 105px;
}
.home-next-session .home-session-empty{
  min-height:86px;
  display:grid;
  place-items:center;
  text-align:center;
  padding:20px;
}
body.dark-mode .home-dashboard-panel{
  background:var(--panel);
}
body.dark-mode .home-dashboard-panel::before,
body.dark-mode .home-dashboard-panel::after{
  opacity:.42;
}

/* Saving should remain visually stable while the current control has focus. */
.editor-title-save:disabled{cursor:not-allowed}

@media(max-width:1100px){
  .home-brand-art{width:min(72%,560px);max-height:330px}
  .home-dashboard-panel{padding:34px 28px 50px;gap:26px}
  .home-primary-actions{gap:38px}
}
@media(max-width:680px){
  .home-brand-art{width:min(88%,460px);max-height:240px}
  .home-circle-action{width:min(39vw,170px);font-size:1.15rem}
  .home-next-session .home-session-row{grid-template-columns:minmax(0,1fr) 105px}
  .home-next-session .home-session-time{display:none}
  .home-next-session .home-session-head span:nth-child(3){display:none}
}


/* =========================================================
   ver1.76: home logo circle + shared home-style ripple treatment
   ========================================================= */

/* Home screen: remove the large circular shortcuts and keep the session list
   as the main content. The service logo sits inside a large circle whose
   interior uses the same tinted area that previously appeared on the right. */
.home-brand-panel{
  padding:4.2vh 2.8vw 4.2vh 2.4vw!important;
}
.home-brand-panel::after{
  display:none!important;
}
.home-logo-frame{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  width:min(88%,680px);
  aspect-ratio:1;
  border-radius:50%;
  margin:0 auto;
  background:color-mix(in srgb,var(--accent) 18%,var(--panel));
  border:1px solid color-mix(in srgb,var(--accent) 16%,transparent);
  overflow:hidden;
}
.home-logo-frame::before,
.home-logo-frame::after{
  content:"";
  position:absolute;
  border-radius:50%;
  pointer-events:none;
}
.home-logo-frame::before{
  width:88%;
  height:36%;
  right:-18%;
  bottom:2%;
  border:2px solid color-mix(in srgb,var(--accent) 18%,transparent);
  box-shadow:
    0 0 0 26px color-mix(in srgb,var(--accent) 8%,transparent),
    0 0 0 64px color-mix(in srgb,var(--accent) 5%,transparent),
    0 0 0 108px color-mix(in srgb,var(--accent) 3%,transparent);
  transform:rotate(-7deg);
  opacity:.78;
}
.home-logo-frame::after{
  width:58%;
  height:23%;
  right:18%;
  bottom:8%;
  border:2px solid color-mix(in srgb,var(--accent) 13%,transparent);
  transform:rotate(4deg);
  opacity:.7;
}
.home-brand-art{
  position:relative;
  z-index:1;
  width:min(84%,560px)!important;
  max-height:none!important;
}
.home-dashboard-panel.home-dashboard-panel-simple{
  grid-template-rows:minmax(0,1fr)!important;
  align-content:center!important;
  gap:0!important;
  padding:5.6vh 5.5vw 6vh 6.2vw!important;
}
.home-dashboard-panel.home-dashboard-panel-simple .home-next-session{
  width:min(100%,780px)!important;
  margin:0 auto!important;
  align-self:center!important;
}
.home-dashboard-panel.home-dashboard-panel-simple .home-next-session h2{
  margin:0 0 14px!important;
}
.home-dashboard-panel.home-dashboard-panel-simple .home-session-list{
  margin-top:0!important;
}
.home-primary-actions,
.home-circle-action{
  display:none!important;
}
body.dark-mode .home-logo-frame{
  background:color-mix(in srgb,var(--accent) 14%,var(--panel));
  border-color:color-mix(in srgb,var(--accent) 18%,transparent);
}
body.dark-mode .home-logo-frame::before,
body.dark-mode .home-logo-frame::after{
  opacity:.46;
}

@media(max-width:1100px){
  .home-logo-frame{
    width:min(92%,560px);
  }
  .home-dashboard-panel.home-dashboard-panel-simple{
    padding:34px 28px 50px!important;
  }
}
@media(max-width:680px){
  .home-logo-frame{
    width:min(96%,420px);
  }
  .home-brand-art{
    width:min(88%,360px)!important;
  }
  .home-dashboard-panel.home-dashboard-panel-simple{
    padding:28px 18px 44px!important;
  }
}

/* =========================================================
   ver1.77: portrait scale control as a true overlay layer
   ========================================================= */
/* The scale UI no longer participates in the action-stack flex layout.
   It is anchored below the portrait-picker icon as an independent overlay,
   so its height/width cannot push or resize any neighboring frame. */
.character-editor-shell>.editor-sheet-controls{
  position:absolute!important;
  top:18px!important;
  right:18px!important;
  margin:0!important;
  z-index:1200!important;
  overflow:visible!important;
  isolation:isolate;
}
.character-editor-shell>.editor-sheet-controls .editor-image-scale-vertical{
  position:absolute!important;
  top:calc(100% + 10px)!important;
  right:0!important;
  margin:0!important;
  z-index:2!important;
  flex:none!important;
  pointer-events:auto!important;
}

/* Keep the two ordinary action icons as the only elements that determine
   the size of the controls stack. */
.character-editor-shell>.editor-sheet-controls>.icon-button,
.character-editor-shell>.editor-sheet-controls>.editor-image-pick-icon{
  position:relative;
  z-index:3;
  flex:0 0 auto;
}

@media(max-width:980px){
  .character-editor-shell>.editor-sheet-controls{
    top:18px!important;
    right:18px!important;
  }
  .character-editor-shell>.editor-sheet-controls .editor-image-scale-vertical{
    top:calc(100% + 8px)!important;
  }
}


/* =========================================================
   ver1.78: portrait picker overlay + remove image reset buttons
   ========================================================= */
/* Only the Back button participates in the controls container's layout.
   Portrait picker and scale control are independent overlay layers. */
.character-editor-shell>.editor-sheet-controls{
  width:40px!important;
  min-width:40px!important;
  height:40px!important;
  min-height:40px!important;
  display:block!important;
  overflow:visible!important;
}
.character-editor-shell>.editor-sheet-controls>.icon-button:not(.editor-image-pick-icon){
  position:absolute!important;
  top:0!important;
  right:0!important;
  margin:0!important;
  z-index:5!important;
}
.character-editor-shell>.editor-sheet-controls>.editor-image-pick-icon{
  position:absolute!important;
  top:50px!important;
  right:0!important;
  margin:0!important;
  z-index:5!important;
  width:40px!important;
  height:40px!important;
  min-width:40px!important;
  min-height:40px!important;
}
.character-editor-shell>.editor-sheet-controls .editor-image-scale-vertical{
  position:absolute!important;
  top:100px!important;
  right:0!important;
  margin:0!important;
  z-index:4!important;
  flex:none!important;
  pointer-events:auto!important;
}
/* Legacy bottom reset controls are no longer part of the editor UI. */
.editor-image-bottom-controls,
.editor-image-reset-row,
.image-position-reset,
.image-scale-reset{
  display:none!important;
}
@media(max-width:980px){
  .character-editor-shell>.editor-sheet-controls>.editor-image-pick-icon{top:50px!important}
  .character-editor-shell>.editor-sheet-controls .editor-image-scale-vertical{top:100px!important}
}


/* =========================================================
   ver1.79: detail edit action as an independent overlay layer
   ========================================================= */
/* The detail Edit button no longer participates in the sheet-controls
   flex layout. It is anchored below Back as an overlay, matching the
   editor portrait-picker/scale controls, so it cannot alter frame sizing. */
.character-detail-shell>.sheet-controls{
  position:absolute!important;
  top:18px!important;
  right:18px!important;
  margin:0!important;
  z-index:1200!important;
  overflow:visible!important;
  isolation:isolate;
}
.character-detail-shell>.sheet-controls>.detail-edit-overlay{
  position:absolute!important;
  top:50px!important;
  right:0!important;
  width:40px!important;
  height:40px!important;
  min-width:40px!important;
  min-height:40px!important;
  margin:0!important;
  z-index:6!important;
  flex:none!important;
  pointer-events:auto!important;
}
@media(max-width:980px){
  .character-detail-shell>.sheet-controls{
    top:18px!important;
    right:18px!important;
  }
  .character-detail-shell>.sheet-controls>.detail-edit-overlay{
    top:50px!important;
  }
}


/* =========================================================
   ver1.81: lock character detail/editor desktop split to 55 / 45
   ========================================================= */
@media(min-width:981px){
  body.character-page .character-detail-shell,
  body.character-page .character-detail-shell.tab-status,
  body.character-editor-page .character-editor-shell{
    grid-template-columns:minmax(0,55%) minmax(0,45%)!important;
  }
}

/* =========================================================
   ver1.82: canonical character frame geometry
   Detail and editor now share the exact same desktop viewport,
   outer padding, shell width and 55 / 45 split.
   ========================================================= */
@media(min-width:981px){
  body.character-page main#app,
  body.character-editor-page main#app{
    width:100%!important;
    max-width:1680px!important;
    height:calc(100vh - 64px)!important;
    margin:0 auto!important;
    padding:14px 10px 18px!important;
    overflow:hidden!important;
  }

  body.character-page .character-detail-shell,
  body.character-page .character-detail-shell.tab-status,
  body.character-editor-page .character-editor-shell{
    width:100%!important;
    max-width:none!important;
    min-width:0!important;
    height:100%!important;
    margin:0!important;
    display:grid!important;
    grid-template-columns:55% 45%!important;
  }

  .character-detail-shell::before,
  .character-detail-shell.tab-status::before,
  body.character-editor-page .character-editor-shell::before{
    width:45%!important;
  }
}


/* =========================================================
   ver1.83: full-width portrait layer + constrained image movement
   ========================================================= */
@media(min-width:981px){
  /* The portrait canvas now spans the entire character frame. It is a visual
     layer behind the data pane; the actual character image remains confined
     to the right-hand 45% display zone. */
  body.character-page .character-detail-shell,
  body.character-editor-page .character-editor-shell{
    position:relative!important;
    isolation:isolate;
  }

  body.character-page .character-detail-shell .character-data-pane,
  body.character-editor-page .character-editor-shell .editor-sheet{
    grid-column:1 / 2!important;
    position:relative!important;
    z-index:2!important;
  }

  body.character-page .character-detail-shell .portrait-fixed,
  body.character-editor-page .character-editor-shell .editor-portrait{
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    min-height:0!important;
    max-height:none!important;
    z-index:0!important;
    overflow:hidden!important;
    pointer-events:none!important;
    display:block!important;
    background:transparent!important;
    border-radius:16px!important;
  }

  body.character-page .character-detail-shell .portrait-fixed img,
  body.character-editor-page .character-editor-shell .editor-portrait img{
    position:absolute!important;
    top:0!important;
    right:0!important;
    width:45%!important;
    height:100%!important;
    max-width:45%!important;
    object-fit:contain!important;
    object-position:center center!important;
    pointer-events:auto!important;
    z-index:2!important;
  }

  body.character-page .character-detail-shell .portrait-empty,
  body.character-editor-page .character-editor-shell .portrait-empty{
    position:absolute!important;
    top:50%!important;
    right:0!important;
    width:45%!important;
    transform:translateY(-50%)!important;
    text-align:center!important;
    pointer-events:none!important;
    z-index:2!important;
  }

  /* The colour/ripple field uses the full canvas instead of being clipped to
     the previous 45% portrait column. */
  .character-detail-shell::before,
  .character-detail-shell.tab-status::before,
  body.character-editor-page .character-editor-shell::before{
    width:100%!important;
    inset:0!important;
    border-radius:16px!important;
    background:transparent!important;
    opacity:0!important;
  }

  .character-detail-shell::after,
  body.character-editor-page .character-editor-shell::after{
    right:-150px!important;
    bottom:-120px!important;
    width:900px!important;
    height:360px!important;
    opacity:.72!important;
  }

  body.character-page .character-detail-shell .portrait-fixed::before,
  body.character-editor-page .character-editor-shell .editor-portrait::before{
    right:10%!important;
    bottom:-80px!important;
    width:620px!important;
    height:240px!important;
  }

  /* Keep the left information pane readable while allowing the full-width
     portrait layer to exist underneath it. */
  body.character-page .character-detail-shell .character-data-pane,
  body.character-editor-page .character-editor-shell .editor-sheet{
    background:var(--panel)!important;
  }

  /* Editor image remains draggable even though its parent visual layer does
     not receive pointer events. */
  body.character-editor-page .character-editor-shell .editor-portrait .draggable-portrait{
    pointer-events:auto!important;
    touch-action:none!important;
  }
}

@media(max-width:980px){
  body.character-page .character-detail-shell .portrait-fixed,
  body.character-editor-page .character-editor-shell .editor-portrait{
    width:100%!important;
  }
}


/* =========================================================
   ver1.84: remove portrait-image movement/display restrictions
   ========================================================= */
@media(min-width:981px){
  /* The portrait image itself is no longer restricted to the right 45%.
     It can use the full visual canvas; the opaque data pane remains above it. */
  body.character-page .character-detail-shell .portrait-fixed img,
  body.character-editor-page .character-editor-shell .editor-portrait img{
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    max-width:none!important;
    max-height:none!important;
    object-fit:contain!important;
    object-position:center center!important;
  }
}

/* =========================================================
   ver1.85: place the left information-panel background below the portrait
   ========================================================= */
@media(min-width:981px){
  /* The panel colour belongs to the shell itself. This keeps it beneath the
     portrait layer while preserving the familiar 55% information region. */
  body.character-page .character-detail-shell,
  body.character-editor-page .character-editor-shell{
    background:
      linear-gradient(to right,
        var(--panel) 0%,
        var(--panel) 55%,
        transparent 55%,
        transparent 100%)!important;
  }

  /* Data containers no longer paint an opaque surface over the portrait. */
  body.character-page .character-detail-shell .character-data-pane,
  body.character-editor-page .character-editor-shell .editor-sheet{
    background:transparent!important;
    z-index:auto!important;
  }

  /* The portrait canvas/image sits above the panel background. */
  body.character-page .character-detail-shell .portrait-fixed,
  body.character-editor-page .character-editor-shell .editor-portrait{
    z-index:1!important;
  }

  /* Information itself remains above the portrait. */
  body.character-page .character-detail-shell .character-data-pane > *,
  body.character-editor-page .character-editor-shell .editor-sheet > *{
    position:relative;
    z-index:2;
  }

  /* Header surfaces must also be transparent; their text/tabs are already
     raised by the rule above. */
  body.character-page .character-detail-shell .character-sheet-header,
  body.character-editor-page .character-editor-shell .editor-fixed-header{
    background:transparent!important;
    backdrop-filter:none!important;
  }
}

body.dark-mode.character-page .character-detail-shell,
body.dark-mode.character-editor-page .character-editor-shell{
  background:
    linear-gradient(to right,
      var(--panel) 0%,
      var(--panel) 55%,
      transparent 55%,
      transparent 100%)!important;
}

/* =========================================================
   ver1.86: remove character-page ripple drawings
   ========================================================= */
/* Keep the image-colour background and layer structure, but remove only the
   decorative ripple overlays from character detail and editor screens. */
.character-detail-shell::after,
body.character-editor-page .character-editor-shell::after,
.character-detail-shell .portrait-fixed::before,
body.character-editor-page .character-editor-shell .editor-portrait::before{
  content:none!important;
  display:none!important;
  background:none!important;
  border:0!important;
  box-shadow:none!important;
}

/* =========================================================
   ver1.88: fully remove character image-colour background painting
   ========================================================= */
body.character-page .character-detail-shell .portrait-fixed,
body.character-editor-page .character-editor-shell .editor-portrait,
body.dark-mode.character-page .character-detail-shell .portrait-fixed,
body.dark-mode.character-editor-page .character-editor-shell .editor-portrait{
  background:transparent!important;
}

body.character-page .character-detail-shell::before,
body.character-editor-page .character-editor-shell::before,
body.dark-mode.character-page .character-detail-shell::before,
body.dark-mode.character-editor-page .character-editor-shell::before{
  content:none!important;
  display:none!important;
  background:none!important;
  opacity:0!important;
}


/* =========================================================
   ver1.89: remove character-editor image colour control
   ========================================================= */
.editor-basic-info-section > .editor-personal-add{
  margin-top:12px!important;
  width:max-content;
}
.editor-personal-actions,
.editor-personal-add-placeholder,
.editor-image-color-row,
.editor-image-color-dot-setting{
  display:none!important;
}


/* =========================================================
   ver1.90: character detail uses the shared session image-colour control
   ========================================================= */
.character-detail-shell .sheet-meta-stack .image-color-setting.session-image-color{
  margin:0 0 0 2px!important;
  align-self:flex-start;
}


/* =========================================================
   ver1.91: portrait transform reset control
   ========================================================= */
.character-editor-shell .editor-image-reset-all{
  position:absolute!important;
  right:18px!important;
  bottom:18px!important;
  z-index:1200!important;
  margin:0!important;
  width:max-content!important;
  min-width:0!important;
  padding:7px 12px!important;
  border:1px solid var(--line)!important;
  border-radius:999px!important;
  background:color-mix(in srgb,var(--panel) 92%,transparent)!important;
  color:var(--text)!important;
  font-size:.72rem!important;
  line-height:1.2!important;
  box-shadow:0 2px 8px rgba(0,0,0,.06)!important;
  backdrop-filter:blur(4px);
  cursor:pointer;
}
.character-editor-shell .editor-image-reset-all:hover,
.character-editor-shell .editor-image-reset-all:focus-visible{
  background:var(--panel)!important;
  border-color:color-mix(in srgb,var(--text) 22%,var(--line))!important;
}
body.dark-mode .character-editor-shell .editor-image-reset-all{
  background:rgba(42,48,55,.9)!important;
  color:#eef0f3!important;
  border-color:#505a65!important;
}
@media(max-width:980px){
  .character-editor-shell .editor-image-reset-all{
    right:14px!important;
    bottom:14px!important;
  }
}


/* =========================================================
   ver1.92: shrink only overlong character names
   ========================================================= */
/* JS locks the name box before reducing font-size, so surrounding header
   elements keep exactly the same positions. */
.character-detail-shell .sheet-title-row .sheet-name{
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:clip!important;
  min-width:0!important;
}


/* =========================================================
   latest: responsive header nav, collapsible filters, home character loop
   ========================================================= */
.header-nav{display:flex;align-items:center;gap:7px;min-width:0}
.app-header .header-nav button{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  min-width:0;white-space:nowrap;padding:8px 10px;border-radius:9px;
}
.header-nav-icon{width:17px;height:17px;flex:0 0 17px;fill:currentColor}
.header-nav-label{display:inline-block;min-width:0}
@media(max-width:820px){
  .app-header{gap:15px}
  .app-header .header-nav button{width:38px;height:38px;padding:0;gap:0}
  .header-nav-label{display:none}
  .header-nav-icon{width:19px;height:19px;flex-basis:19px}
}
@media(max-width:560px){
  .app-header{padding-left:10px;padding-right:10px;gap:8px}
  .app-header .brand-home{flex:1 1 auto;overflow:hidden}
  .app-header .brand-logo{max-width:132px}
  .header-nav{gap:2px}
  .app-header .header-nav button{width:34px;height:34px}
}

.character-index-layout.filters-collapsed,
.session-index-layout.filters-collapsed{grid-template-columns:52px minmax(0,1fr)!important;gap:14px!important}
.filter-panel{transition:width .16s ease,padding .16s ease}
.filter-panel-heading{display:flex;align-items:center;gap:8px;min-height:30px}
.filter-panel-heading h3{flex:1;margin:0!important;white-space:nowrap}
.filter-collapse-button{
  width:30px;height:30px;min-width:30px;padding:0;border-radius:50%;
  display:inline-grid;place-items:center;font-size:1.25rem;line-height:1;
  background:transparent;border:1px solid var(--line);color:var(--muted);
}
.filter-collapse-button:hover{background:var(--soft);color:var(--text)}
.filter-panel.is-collapsed{padding:10px!important;width:52px;overflow:visible}
.filter-panel.is-collapsed .filter-panel-heading{justify-content:center}
.filter-panel.is-collapsed .filter-panel-heading h3{display:none}
.filter-panel.is-collapsed .filter-collapse-button{margin:0 auto}
.filter-panel-content[hidden]{display:none!important}
body.dark-mode .filter-collapse-button{border-color:#48515b;color:#b6bec8}
body.dark-mode .filter-collapse-button:hover{background:#343a42;color:#f0f2f4}
@media(max-width:980px){
  .character-index-layout.filters-collapsed,
  .session-index-layout.filters-collapsed{grid-template-columns:1fr!important;gap:12px!important}
  .filter-panel.is-collapsed{width:100%;padding:8px 12px!important}
  .filter-panel.is-collapsed .filter-panel-heading{justify-content:flex-end}
  .filter-panel.is-collapsed .filter-collapse-button{margin:0}
}

/* Home character shelf. Fixed-size cards intentionally omit tags so their
   height never changes. Three identical sequences are used for seamless
   manual horizontal looping. */
.home-dashboard-panel.home-dashboard-panel-simple{
  grid-template-rows:auto auto!important;
  align-content:center!important;
  gap:clamp(34px,5vh,64px)!important;
}
.home-character-section,
.home-next-session{width:min(100%,860px)!important;margin:0 auto!important;min-width:0}
.home-section-title-row{display:flex;align-items:center;gap:14px;margin-bottom:12px}
.home-section-title-row h2{margin:0;font-size:clamp(1.15rem,1.25vw,1.42rem)}
.home-section-link{margin-left:auto;border:0;background:transparent;color:var(--muted);padding:5px 2px;font-size:.78rem}
.home-section-link:hover{color:var(--accent)}
.home-character-viewport{
  width:100%;overflow-x:auto;overflow-y:hidden;padding:2px 1px 8px;
  scrollbar-width:none;-ms-overflow-style:none;
  overscroll-behavior-x:contain;scroll-snap-type:x proximity;
  cursor:grab;touch-action:pan-y;user-select:none;
}
.home-character-viewport::-webkit-scrollbar{display:none;width:0;height:0}
.home-character-viewport.is-dragging{cursor:grabbing;scroll-snap-type:none}
.home-character-viewport.is-dragging .home-character-card{pointer-events:none}
.home-character-loop-track{display:flex;width:max-content;align-items:stretch}
.home-character-sequence{display:flex;align-items:stretch;gap:12px;padding-right:12px}
.home-character-card{
  width:258px;height:126px;flex:0 0 258px;display:grid;grid-template-columns:106px minmax(0,1fr);
  gap:0;padding:0;overflow:hidden;text-align:left;border:1px solid var(--line);border-radius:13px;
  background:var(--panel);color:var(--text);box-shadow:none;scroll-snap-align:start;
}
.home-character-card:hover{border-color:color-mix(in srgb,var(--text) 24%,var(--line));box-shadow:0 5px 18px #0000000b;transform:translateY(-1px)}
.home-character-thumb{display:flex;align-items:center;justify-content:center;width:106px;height:126px;overflow:hidden;background:linear-gradient(150deg,color-mix(in srgb,var(--character-color,#9fc9f5) 24%,white),#f4f5f8)}
.home-character-thumb img{width:100%;height:100%;object-fit:contain;object-position:center center}
.home-character-card-fallback{font-size:.7rem;color:var(--muted)}
.home-character-card-body{display:flex;flex-direction:column;justify-content:center;min-width:0;padding:13px 12px}
.home-character-reading{font-size:.66rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-height:1em}
.home-character-card strong{display:block;margin:4px 0 10px;font-size:1rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.home-character-system{font-size:.7rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.home-character-empty{display:grid;place-items:center;min-height:126px;border:1px dashed var(--line);border-radius:13px;text-align:center}
.home-next-session{align-self:auto!important}
body.dark-mode .home-character-card{background:var(--panel);border-color:#414a54}
body.dark-mode .home-character-thumb{background:linear-gradient(150deg,color-mix(in srgb,var(--character-color,#9fc9f5) 22%,#20252d),#1f242b)}
@media(max-width:1100px){
  .home-dashboard-panel.home-dashboard-panel-simple{gap:34px!important;align-content:start!important}
  .home-character-section,.home-next-session{width:100%!important}
}
@media(max-width:680px){
  .home-character-card{width:224px;flex-basis:224px;height:112px;grid-template-columns:92px minmax(0,1fr)}
  .home-character-thumb{width:92px;height:112px}
  .home-character-card-body{padding:11px 10px}
}

.home-character-viewport.is-static{overflow-x:hidden;scrollbar-width:none}
.home-character-viewport.is-static::-webkit-scrollbar{display:none}
.home-character-sequence[hidden]{display:none!important}

/* ver1.82: drag-to-scroll home character shelf without a visible scrollbar. */
.home-character-thumb img{-webkit-user-drag:none;user-drag:none;user-select:none;pointer-events:none}


/* ver1.83: restrained inertial home shelf + settings theme control */
.home-character-viewport{scroll-behavior:auto!important}
.home-character-viewport.is-dragging{cursor:grabbing!important}
.settings-theme-card{min-height:auto!important}
.settings-theme-toggle{padding:4px 0!important}
.settings-theme-toggle .theme-toggle{margin-left:auto;flex:0 0 auto}


/* =========================================================
   ver1.84: list filters use the same fold-title interaction as Weapons
   ========================================================= */
.character-index-layout,
.session-index-layout{
  grid-template-columns:280px minmax(0,1fr)!important;
  gap:24px!important;
}
.filter-panel.filter-fold{
  position:sticky;
  top:84px;
  width:auto!important;
  padding:0 16px!important;
  overflow:visible!important;
  transition:none!important;
}
.filter-panel.filter-fold>summary{
  display:block;
  position:relative;
  list-style:none;
  cursor:pointer;
  font-weight:700;
  padding:14px 24px 14px 0;
  margin:0;
  white-space:nowrap;
  user-select:none;
}
.filter-panel.filter-fold>summary::-webkit-details-marker{display:none}
.filter-panel.filter-fold>summary::after{
  content:"›";
  position:absolute;
  right:2px;
  top:50%;
  transform:translateY(-50%);
  color:#87919c;
  font-size:1rem;
  line-height:1;
  transition:transform .15s ease;
}
.filter-panel.filter-fold[open]>summary::after{transform:translateY(-50%) rotate(90deg)}
.filter-panel.filter-fold .filter-panel-content{padding:0 0 16px}
.filter-panel.filter-fold:not([open]) .filter-panel-content{display:none!important}
/* Retire the previous narrow-sidebar collapse UI. */
.filter-panel-heading,
.filter-collapse-button{display:none!important}
.character-index-layout.filters-collapsed,
.session-index-layout.filters-collapsed{grid-template-columns:280px minmax(0,1fr)!important;gap:24px!important}
.filter-panel.is-collapsed{width:auto!important;padding:0 16px!important}
@media(max-width:980px){
  .character-index-layout,
  .session-index-layout,
  .character-index-layout.filters-collapsed,
  .session-index-layout.filters-collapsed{grid-template-columns:1fr!important;gap:12px!important}
  .filter-panel.filter-fold{position:static;width:100%!important}
}
body.dark-mode .filter-panel.filter-fold>summary::after{color:#aeb6c0}


/* =========================================================
   ver1.85: session-history add action + acquaintances
   ========================================================= */
/* Session-history add action now uses the same pill treatment as weapon add. */
.scenario-history-body .history-add{
  margin-top:12px;
}

/* "知り合った探索者" mirrors the collapsible Backstory / Session history
   section treatment and lays unique co-participants out as compact cards. */
.acquaintances-master{
  margin-top:20px;
  border-top:1px solid var(--line);
}
.acquaintances-master>summary{
  cursor:pointer;
  font-size:1rem;
  font-weight:700;
  padding:14px 2px 11px;
  list-style:none;
}
.acquaintances-master>summary::-webkit-details-marker{display:none}
.acquaintances-master>summary::before{
  content:"▾";
  display:inline-block;
  width:18px;
  color:#9aa0a8;
}
.acquaintances-master:not([open])>summary::before{content:"▸"}
.acquaintances-body{padding:0 0 8px}
.acquaintance-list{
  display:flex;
  align-items:stretch;
  flex-wrap:wrap;
  gap:9px;
}
.acquaintance-card{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:154px;
  max-width:230px;
  height:46px;
  padding:6px 11px 6px 7px;
  border:1px solid var(--line);
  border-radius:10px;
  background:var(--panel);
  color:var(--text);
  text-align:left;
  cursor:pointer;
  box-shadow:none;
}
.acquaintance-card:hover:not(:disabled){
  border-color:color-mix(in srgb,var(--text) 24%,var(--line));
  background:color-mix(in srgb,var(--panel) 96%,var(--soft) 4%);
}
.acquaintance-card:disabled{cursor:default;opacity:.75}
.acquaintance-card .avatar{
  flex:0 0 auto;
  width:32px;
  height:32px;
  border-radius:8px;
  object-fit:cover;
  object-position:center 36%;
}
.acquaintance-card>span:last-child{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:.8rem;
  font-weight:600;
}
.acquaintance-empty{margin:2px 0 4px}
body.dark-mode .acquaintance-card{
  background:var(--panel);
  border-color:#414a54;
}


/* =========================================================
   ver1.86: URL-addressable screens + native link behavior
   ========================================================= */
.brand-home,
.app-header .header-nav a{
  text-decoration:none;
  color:inherit;
}
.app-header .header-nav a{
  border:0;
  background:transparent;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  padding:8px 10px;
  border-radius:8px;
  cursor:pointer;
}
.app-header .header-nav a:hover{background:var(--soft)}
body.dark-mode .app-header .header-nav a:hover{background:#343a42}
.character-card,
.home-character-card,
.home-section-link,
.home-session-title,
.acquaintance-card,
.history-detail-icon{
  text-decoration:none;
  color:inherit;
}
.history-detail-icon{display:inline-flex;align-items:center;justify-content:center}
@media(max-width:820px){
  .app-header .header-nav a{width:38px;height:38px;padding:0;gap:0}
}
@media(max-width:560px){
  .app-header .header-nav a{width:34px;height:34px}
}


/* =========================================================
   ver1.87: keep list filters beside results when width allows
   ========================================================= */
@media (min-width:981px){
  .character-index-layout,
  .session-index-layout,
  .character-index-layout.filters-collapsed,
  .session-index-layout.filters-collapsed{
    display:grid!important;
    grid-template-columns:280px minmax(0,1fr)!important;
    grid-template-areas:"filter results"!important;
    column-gap:24px!important;
    row-gap:0!important;
    align-items:start!important;
  }
  .character-index-layout>.filter-panel,
  .session-index-layout>.filter-panel{
    grid-area:filter!important;
    min-width:0!important;
  }
  .character-index-layout>.character-card-grid,
  .session-index-layout>.session-list{
    grid-area:results!important;
    min-width:0!important;
    width:100%!important;
  }
}
@media (max-width:980px){
  .character-index-layout,
  .session-index-layout,
  .character-index-layout.filters-collapsed,
  .session-index-layout.filters-collapsed{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    grid-template-areas:"filter" "results"!important;
    gap:12px!important;
  }
  .character-index-layout>.filter-panel,
  .session-index-layout>.filter-panel{grid-area:filter!important}
  .character-index-layout>.character-card-grid,
  .session-index-layout>.session-list{grid-area:results!important;min-width:0!important;width:100%!important}
}


/* ver1.88: session-list title is an actual detail link; the rest of the summary remains the expand/collapse target. */
.session-list-entry .session-title-link{
  display:inline-block;
  color:inherit;
  text-decoration:none;
  max-width:100%;
}
.session-list-entry .session-title-link:hover,
.session-list-entry .session-title-link:focus-visible{
  color:var(--accent);
  text-decoration:underline;
  text-underline-offset:3px;
}

/* =========================================================
   ver1.97: taller home character cards + shelf raised slightly
   ========================================================= */
/* Give the home character shelf a little more vertical presence without
   changing its horizontal drag/loop behavior. The whole character section is
   nudged upward as a unit so the title, viewport frame and cards stay aligned. */
.home-character-section{
  transform:translateY(-18px);
}
.home-character-card{
  height:144px;
}
.home-character-thumb{
  height:144px;
}
.home-character-empty{
  min-height:144px;
}
.home-character-card-body{
  padding-top:15px;
  padding-bottom:15px;
}

@media(max-width:1100px){
  .home-character-section{transform:translateY(-12px)}
}
@media(max-width:680px){
  .home-character-section{transform:translateY(-8px)}
  .home-character-card{
    height:124px;
  }
  .home-character-thumb{
    height:124px;
  }
  .home-character-empty{
    min-height:124px;
  }
}


/* ver1.98: login-time character loading uses the same bottom status notice as normal saves. */


/* ver2.03: shared session detail is read-only. */
.session-detail-title-readonly{display:flex;align-items:center;min-height:2.4rem;overflow-wrap:anywhere}
.session-info-readonly .session-info-row>div{min-width:0;overflow-wrap:anywhere}
.session-detail-readonly .session-status-single{cursor:default}


/* ver2.04: participant owner selector */
#participantOwner{width:100%;min-height:40px;border:1px solid var(--line);border-radius:10px;background:var(--panel);color:var(--text);font:inherit;padding:7px 10px;}

/* ver2.15: cards remain normal clickable links until horizontal movement becomes a drag. */
.home-character-card{cursor:pointer}
.home-character-viewport.is-dragging .home-character-card{cursor:grabbing}

.chat-palette-editor{display:block;width:75%;height:21.6em;margin-left:0;margin-right:auto;box-sizing:border-box;resize:vertical;font-family:monospace;line-height:1.6;min-height:13.5rem;}

.point-item .point-current-over,.point-ratio .point-current-over{color:#c62828;}
body.dark-mode .point-item .point-current-over,body.dark-mode .point-ratio .point-current-over{color:#ff8585;}

body.custom-page-background{background:var(--page-background)!important;}
.background-color-setting{margin-top:22px;padding-top:18px;border-top:1px solid var(--line);}
.background-color-controls{display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
.background-color-controls input[type="color"]{width:56px;height:40px;padding:3px;cursor:pointer;}
.background-color-controls input[type="text"]{width:120px;font-family:monospace;}

/* Character data background opt-in; portrait canvas and page background stay independent. */
body.character-page .character-detail-shell.reflect-image-color .character-data-pane,
body.character-editor-page .character-editor-shell.reflect-image-color .editor-sheet,
body.character-page .character-detail-shell.reflect-image-color .character-sheet-header,
body.character-editor-page .character-editor-shell.reflect-image-color .editor-fixed-header{background:var(--character-color)!important;}
@media(min-width:981px){
  body.character-page .character-detail-shell.reflect-image-color,
  body.character-editor-page .character-editor-shell.reflect-image-color{background:linear-gradient(to right,var(--character-color) 0%,var(--character-color) 55%,transparent 55%,transparent 100%)!important;}
  body.character-page .character-detail-shell.reflect-image-color .character-data-pane,
  body.character-editor-page .character-editor-shell.reflect-image-color .editor-sheet,
  body.character-page .character-detail-shell.reflect-image-color .character-sheet-header,
  body.character-editor-page .character-editor-shell.reflect-image-color .editor-fixed-header{background:transparent!important;}
}