:root{--bg:#eeeee6;--paper:#fffdf7;--soft:#eef1e8;--ink:#263c34;--muted:#6c7e73;--line:#d7ddd1;--green:#315f54;--gold:#bd8b41;--red:#a24c41;--header:#203b32;--shadow:0 12px 40px #213b3216;--radius:9px;--sidebar:370px}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font:14px/1.6 system-ui,-apple-system,'Segoe UI',sans-serif}a{color:var(--green);text-underline-offset:3px}button,.button{font:600 12px/1.4 system-ui;border:1px solid var(--line);background:var(--paper);color:var(--ink);padding:9px 13px;border-radius:6px;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:35px}button:hover,.button:hover{background:#eaf0e4;border-color:#b1c2b5}button:disabled{opacity:.42;cursor:not-allowed}button.primary,.button.primary{background:var(--green);border-color:var(--green);color:#fff}button.primary:hover,.button.primary:hover{background:#214e42}button.accent{background:#f2e6ca;border-color:#d6c59a;color:#74531e}button.danger{color:var(--red)}button.icon{min-width:35px;padding:6px;font-size:19px}input,select,textarea{font:14px/1.5 system-ui;padding:9px 10px;background:#fffefa;color:var(--ink);border:1px solid #cdd6c9;border-radius:5px;max-width:100%}input[type=color]{min-height:39px;padding:3px;width:90px}input[type=checkbox]{width:auto;accent-color:var(--green)}textarea{resize:vertical;width:100%;min-height:60px}label{display:flex;flex-direction:column;gap:5px;font:12px/1.5 system-ui;color:#5d7165}label input,label select,label textarea{width:100%}.check{display:flex;flex-direction:row;align-items:center;gap:7px;margin:5px 0}.check input{width:auto}h1,h2,h3{line-height:1.2;letter-spacing:-.5px}h1{font-size:34px;margin:12px 0 20px}h2{font-size:21px;margin:25px 0 14px}h3{font-size:17px;margin:15px 0 9px}p{margin:0 0 14px}.muted,.hint{color:var(--muted)}.hint{font-size:11px;line-height:1.65;margin-top:9px}.lead{font:17px/1.7 Georgia,serif;color:#596e5f}.eyebrow{font:750 10px/1.5 system-ui;letter-spacing:1.7px;text-transform:uppercase;color:#96723a}.row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:12px 0}.stack{display:flex;flex-direction:column;gap:8px}.grid2,.grid3{display:grid;gap:14px}.grid2{grid-template-columns:1fr 1fr}.grid3{grid-template-columns:1fr 1fr 1fr}.grid2>label,.grid3>label{min-width:0}.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit;font-weight:780;letter-spacing:1px;font-size:15px;line-height:1.3}.brand small{display:block;font-size:9px;letter-spacing:.8px;font-weight:500;opacity:.7;margin-top:4px;max-width:230px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.brand-icon{font:35px Georgia;color:#d2b06d;font-weight:normal}.app-top{height:66px;background:var(--header);color:#f5f5e9;display:flex;align-items:center;gap:22px;padding:0 18px;border-bottom:1px solid #173227}.app-top button{color:#f2f4eb;background:#ffffff08;border-color:#ffffff20}.app-top button:hover{background:#ffffff15}.app-top .primary{background:#4b735d;border-color:#63866c}.mode-switch{display:flex;border:1px solid #ffffff2b;border-radius:7px;overflow:hidden}.mode-switch button{border:0;border-radius:0;background:transparent;color:#b6c9bb}.mode-switch button.active{background:#ecdfbb;color:#2b4736}.top-links{display:flex;align-items:center;gap:7px}.top-links a{color:#dce5d5;font-size:12px;text-decoration:none;padding:7px}.top-right{display:flex;align-items:center;gap:10px;margin-left:auto}#clock-button{border:0;background:none;padding:0 4px;display:block;text-align:left}#clock-button small{display:block;color:#a7beae;font-size:8px;letter-spacing:1px}#clock-button b{display:block;font-size:12px;font-weight:600}.workspace{height:calc(100dvh - 66px);display:grid;grid-template-columns:minmax(0,1fr) var(--sidebar);min-height:0}.map-workspace{min-width:0;min-height:0;display:flex;flex-direction:column;background:#dedfd5;position:relative}.map-bar{height:49px;display:flex;align-items:center;gap:7px;padding:6px 12px;background:#f7f8f0;border-bottom:1px solid var(--line);z-index:3}.map-bar select{font-size:12px;max-width:240px;padding:7px}.map-nav{display:flex;align-items:center;gap:3px;min-width:0;overflow:auto;white-space:nowrap;flex:1}.map-nav .crumb{font-size:11px;border:0;background:none;padding:5px 6px;white-space:nowrap;min-height:26px}.map-nav>span{color:#a1ae9e}.canvas-wrap{flex:1;position:relative;min-height:0}#map-canvas{position:absolute;inset:0;overflow:hidden}#map-canvas svg{width:100%;height:100%;display:block;user-select:none;touch-action:none;outline:none;cursor:grab}#map-canvas[data-tool=point] svg,#map-canvas[data-tool=route] svg,#map-canvas[data-tool=area] svg,#map-canvas[data-tool=label] svg{cursor:crosshair}#map-canvas .marker,#map-canvas .route,#map-canvas .area,#map-canvas [data-object=vertex]{cursor:pointer}#map-canvas .marker:hover circle,#map-canvas .marker:focus circle{stroke:#dca850;stroke-width:3}#map-canvas .map-label,#map-canvas .road-event{pointer-events:none;font-family:system-ui}#map-canvas .zone-label{font-family:Georgia,serif;font-style:italic;font-weight:600}#map-canvas .marker text{user-select:none}.map-tools{position:absolute;top:14px;left:13px;background:#fffdf4f2;display:flex;border:1px solid #cbd3c2;padding:4px;border-radius:7px;box-shadow:0 4px 20px #152a2112;gap:1px}.map-tools button{background:none;border:0;min-width:31px;padding:4px 8px;min-height:31px;font-size:18px}.editor-toolbar{position:absolute;top:63px;left:13px;display:flex;flex-wrap:wrap;gap:3px;padding:5px;background:#fffdf4f5;border:1px solid #c4cdb9;border-radius:7px;box-shadow:var(--shadow);max-width:calc(100% - 30px)}.editor-toolbar button{border:0;background:none;min-height:29px;padding:5px 8px;font-size:11px}.editor-toolbar button.active{background:var(--green);color:white}.editor-toolbar .check{font-size:10px;padding:0 6px}.canvas-hint{position:absolute;bottom:14px;left:14px;right:14px;width:fit-content;max-width:calc(100% - 35px);padding:7px 12px;background:#fffdf2e8;color:#687665;border:1px solid #d7dbcd;border-radius:6px;font-size:11px;pointer-events:none}.map-bottom{display:flex;align-items:center;gap:20px;padding:8px 13px;background:#f7f8ef;border-top:1px solid var(--line);font-size:10px;color:#72836e;min-height:32px}#xp{margin-left:auto;color:#4d6b52}.journey-strip{padding:11px 13px;background:#e6ecdc;border-top:1px solid #b7c9af;display:flex;gap:8px;align-items:center}.journey-strip>div{flex:1;min-width:0}.journey-strip b{font-size:12px;display:block}.journey-strip small{font-size:10px;color:#6a7c62;display:block}.journey-strip progress{width:100%;height:5px;accent-color:#4b735d}.journey-strip button{font-size:10px;padding:6px 8px;white-space:nowrap}.inspector{background:var(--paper);border-left:1px solid #c8d2c1;display:flex;flex-direction:column;min-height:0;min-width:0;box-shadow:-6px 0 26px #2d463209}.inspector>header{height:49px;display:flex;align-items:center;padding:7px 17px;border-bottom:1px solid var(--line);justify-content:space-between;background:#f7f8f0}.inspector>header span{font-size:9px;font-weight:700;letter-spacing:1.4px;color:#798972}.inspector>header button{font-size:10px;border:0;background:none}#inspector-body{padding:23px 22px 45px;overflow:auto;flex:1;overscroll-behavior:contain}#inspector-body h1{font-size:26px;line-height:1.15;margin:11px 0 15px}#inspector-body h2{font-size:16px;margin:27px 0 12px}#inspector-body .lead{font-size:15px;line-height:1.65}#inspector-body p{font-size:13px}#inspector-body input:not([type=checkbox]),#inspector-body select{width:100%;font-size:12px}#inspector-body textarea{font-size:12px}.panel-eyebrow{display:flex;align-items:center;justify-content:space-between;gap:7px}.badge{font-size:10px;border:1px solid var(--line);padding:3px 7px;border-radius:4px;background:#f0f2e6;color:#69815f}.badge:empty{display:none}.brief{border-top:1px solid var(--line);margin-top:18px;padding:12px 0}.brief summary{cursor:pointer;font-size:12px;font-weight:600;color:#517250}.brief .prose{font-size:13px;margin-top:12px}.npc-reminder{border:1px solid #d9dfd1;padding:12px 13px;border-radius:6px;margin:9px 0;background:#fbfcf3}.npc-reminder>a{font-size:13px;font-weight:700;text-decoration:none}.npc-reminder p{margin:5px 0;color:#63735e;line-height:1.5}.npc-reminder small{display:block;color:#7a846c;font-size:11px}.small-link{display:block;margin:7px 0;font-size:11px!important}.route-button,.submap-button{justify-content:flex-start;text-align:left;padding:12px;font-size:12px;background:#eef2e6}.route-button::before{content:'⌁';color:#a67d3d;font-size:19px}.submap-button{border-left:3px solid var(--gold)}.enc-button{background:#f2e9de;border-left:3px solid #ac6144;text-align:left;justify-content:flex-start}.reference-links a{display:block;padding:7px 0;font-size:12px}.reference-links small{display:block;color:var(--muted)}.note-block{border-top:1px solid var(--line);margin-top:25px;padding-top:4px}.note-block textarea{margin:8px 0}.metrics{display:flex;border:1px solid var(--line);background:#edf1e5;border-radius:6px;overflow:hidden;margin:17px 0}.metrics>div{flex:1;padding:12px;border-right:1px solid var(--line);min-width:0}.metrics>div:last-child{border:0}.metrics small{display:block;font-size:9px;color:#6b7d64;letter-spacing:.8px}.metrics b{font-size:17px;display:block;margin-top:5px}.callout{border-left:3px solid var(--gold);padding:13px 16px;background:#f4efdf;border-radius:0 5px 5px 0;margin:16px 0}.callout p:last-child{margin-bottom:0}.event-plan{border:1px solid var(--line);background:#f3f0e2;padding:12px;border-radius:5px;margin:10px 0}.event-plan a{font-size:12px;font-weight:600;display:block;margin-bottom:7px}.event-plan p{font-size:12px;margin:7px 0}.tracker-card{border:1px solid var(--line);padding:12px;border-radius:5px;background:#f5f6ed}.tracker-card>div{margin-bottom:9px}.tracker-card small{display:block;font-size:10px;color:var(--muted)}.tracker-card input{max-width:130px}.tracker-card p{font-size:11px!important;color:var(--muted);margin:7px 0}.timeline>div{border-bottom:1px solid var(--line);padding:10px 0}.timeline small{font-size:10px;color:var(--gold)}.timeline p{font-size:12px;margin:3px 0}.actor-card{border:1px solid var(--line);border-left:3px solid #ac6952;background:#f5f3e9;border-radius:6px;padding:13px 14px}.actor-card h3{font-size:15px;margin:0}.actor-card .row{gap:5px}.actor-card .check{font-size:10px;white-space:nowrap}.actor-fields{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:12px 0}.actor-fields label{font-size:9px}.actor-fields input{font-size:12px;padding:6px;min-width:0}.amount-row input{width:60px!important}.amount-row button{font-size:11px;padding:6px 8px}.actor-card.down{opacity:.57}.actor-card.active-turn{outline:2px solid var(--gold);outline-offset:1px}.local-directory button{display:block;width:100%;text-align:left;justify-content:flex-start;border:0;border-bottom:1px solid var(--line);border-radius:0;background:transparent;padding:10px 0;font-size:12px}.inspector-toggle{display:none}.modal{width:min(720px,calc(100vw - 36px));max-height:90dvh;border:1px solid #b6c5b1;border-radius:12px;box-shadow:0 30px 100px #10291e55;background:var(--paper);padding:0;color:var(--ink)}.modal.wide{width:min(1010px,calc(100vw - 36px))}.modal::backdrop{background:#182f2869;backdrop-filter:blur(3px)}.modal form{display:flex;flex-direction:column;max-height:89dvh}.modal header,.modal footer{padding:18px 24px;display:flex;align-items:center;justify-content:space-between;gap:10px;background:#f1f3e9;flex-shrink:0}.modal header{border-bottom:1px solid var(--line)}.modal h2{font-size:23px;margin:5px 0}.modal footer{border-top:1px solid var(--line);justify-content:flex-end}.modal-body{padding:23px 26px;overflow:auto;display:flex;flex-direction:column;gap:14px}.modal-body>label{margin:0}.modal-body fieldset{margin:10px 0;border:1px solid var(--line);border-radius:6px;padding:16px}.modal-body fieldset legend{font-weight:650;font-size:13px;padding:0 6px}.modal-body fieldset>label{margin-top:12px}.modal-body hr{border:0;border-top:1px solid var(--line);width:100%}.modal .form-error{color:#a33c35;font-size:13px;padding:0 25px;margin:0 0 10px}.modal .form-error:empty{display:none}.slot{display:grid;grid-template-columns:2fr 2fr .7fr 1.6fr 28px;gap:8px;align-items:end;border-bottom:1px solid var(--line);padding:12px 0}.slot input,.slot select{padding:7px;font-size:12px;min-width:0}.toast{position:fixed;bottom:19px;left:22px;max-width:min(560px,calc(100vw - 44px));padding:13px 18px;background:#244f40;color:#fff;border:1px solid #668474;border-radius:7px;box-shadow:var(--shadow);z-index:2000;opacity:0;pointer-events:none;transition:opacity .15s;font-size:13px}.toast.visible{opacity:1}.toast.error{background:#743f36;border-color:#b87566}.landing-top,.reference-top{padding:17px 30px;background:var(--header);color:#eef0e5;display:flex;align-items:center;gap:25px;border-bottom:1px solid #1a3027;min-height:72px}.landing-top>a{color:#dddcca;font-size:12px;margin-left:auto}.version{font-size:11px;color:#aabdaa}.landing{max-width:1210px;margin:auto;padding:50px 35px}.hero{max-width:680px;padding-bottom:35px}.hero h1{font:normal 70px/1.0 Georgia,serif;letter-spacing:-3px;margin:15px 0 25px}.hero>p{font:19px/1.7 Georgia,serif;color:#677965;max-width:610px}.hero .row{margin-top:25px}.hero button{padding:13px 20px}.section-heading{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:20px}.section-heading h1,.section-heading h2{margin:0}.section-heading .eyebrow{display:block;margin-bottom:10px}.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px}.entry-card{border:1px solid #ced8c8;border-top:3px solid #6e8d77;border-radius:7px;padding:21px 22px;text-decoration:none;color:var(--ink);background:var(--paper);display:flex;flex-direction:column;transition:transform .1s,background .1s}.entry-card:hover{background:#f3f7ea;transform:translateY(-2px)}.entry-card h3{font-size:19px;margin:12px 0}.entry-card p{font:14px/1.65 Georgia,serif;color:#6b7d67;flex:1}.card-foot{font-size:11px;color:#8c733f;margin-top:15px}.quick-guide{display:grid;grid-template-columns:repeat(3,1fr);gap:35px;margin:50px 0}.quick-guide b{color:#ac8741;font:italic 29px Georgia}.quick-guide p{color:#6a7d68;font-size:13px}.landing footer{border-top:1px solid var(--line);font-size:12px;color:#788872;padding:22px 0;max-width:1000px}.empty-state{border:1px dashed #bdcbb4;border-radius:7px;padding:30px;color:#77866e;grid-column:1/-1;background:#f6f7ed}.empty-state h2,.empty-state h3{margin-top:0;color:#4c6855}.reference-top{position:sticky;top:0;z-index:10;padding:13px 26px}.reference-top nav{display:flex;gap:20px;margin-left:auto;flex-wrap:wrap}.reference-top nav a{font-size:12px;color:#e0e9d7;text-decoration:none}.reference-top>button{background:#ffffff0a;color:#eff4e5;border-color:#ffffff30}.reading-layout{max-width:1370px;margin:auto;display:grid;grid-template-columns:225px minmax(0,1fr);min-height:calc(100vh - 74px)}.reading-aside{padding:35px 24px;border-right:1px solid var(--line);position:sticky;top:73px;height:calc(100vh - 73px);overflow:auto}.reading-aside .eyebrow{display:block;margin-bottom:20px}.reading-aside a{display:block;font-size:12px;padding:8px 0;text-decoration:none}.reading-aside a small{display:block;font-size:10px;color:var(--muted)}.small-title{font-size:10px;color:#899276;text-transform:uppercase;letter-spacing:1px;margin:25px 0 8px}.reading{max-width:1040px;background:var(--paper);padding:40px 52px;min-width:0}.reading>h1{font:normal 43px/1.15 Georgia,serif;margin:15px 0 20px}.reading .lead{font-size:19px}.reading-actions{display:flex;justify-content:space-between;align-items:center}.tags{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0}.tags span{font-size:10px;border:1px solid var(--line);padding:3px 7px;border-radius:4px;color:#7e8a70}.prose{font:17px/1.75 Georgia,serif;overflow-wrap:anywhere}.prose h2,.prose h3,.prose h4,.prose h5{font-family:system-ui;margin-top:30px}.prose h2{font-size:24px}.prose p{margin:0 0 15px}.prose ul{padding-left:23px}.prose li{margin:5px 0}.prose code{font-size:.85em}.prose pre{padding:18px;background:#edf0e4;border:1px solid var(--line);white-space:pre-wrap;font:13px/1.6 monospace}.prose blockquote{margin:16px 0;padding:16px 20px;border-left:3px solid var(--gold);background:#f3efdf;color:#687260}.table-scroll{overflow:auto}table{border-collapse:collapse;width:100%;font:13px/1.55 system-ui;margin:16px 0}th,td{padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:top;text-align:left}th{background:var(--soft)}.missing-link{color:#ad7551;text-decoration:underline wavy}.field-list{display:grid;grid-template-columns:1fr 1fr;gap:12px 26px;margin:24px 0}.field-list h3{font:700 12px system-ui;color:#7b834f;text-transform:uppercase;letter-spacing:1px}.field-list p{font:16px/1.7 Georgia,serif}.ability-row{display:grid;grid-template-columns:repeat(6,1fr);border:1px solid var(--line);border-radius:5px;margin:20px 0}.ability-row>div{text-align:center;padding:13px 5px}.ability-row small{font-size:10px;color:#82906e;display:block}.ability-row b{display:block;font-size:22px;margin:5px}.ability-row span{font-size:12px;color:#6a7d5a}.gallery-section{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:19px 0;margin:25px 0}.gallery-section h2{font-size:17px;margin:0}.gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;min-height:60px}.gallery-empty{border:1px dashed #c0ccb4;padding:24px;text-align:center;color:#859076;font-size:13px;border-radius:6px;grid-column:1/-1}.gallery-empty small{display:block;margin-top:5px;font-size:11px}.gallery-card{border:1px solid var(--line);border-radius:6px;overflow:hidden;background:#f2f2e7}.gallery-card .image-button{display:block;padding:0;border:0;background:#dfe6dc;width:100%}.gallery-card img{width:100%;height:170px;object-fit:contain;display:block}.gallery-card .row{margin:8px;gap:4px}.gallery-card .row button{padding:5px 7px;font-size:10px;min-height:25px}.gallery-card p{padding:5px 10px;font-size:11px;margin:0}.image-preview{background:#e6e7db;padding:15px;display:grid;place-items:center;max-height:60vh}.image-preview img{max-width:100%;max-height:53vh;object-fit:contain}.session-note{border-top:1px solid var(--line);padding-top:20px;margin-top:35px}.document-footer{border-top:1px solid var(--line);padding-top:22px;margin-top:35px;font-size:11px;color:#8b967a}.library-layout{display:grid;grid-template-columns:220px minmax(0,1fr);max-width:1460px;margin:auto}.library-aside{padding:35px 20px;min-height:calc(100vh - 75px);border-right:1px solid var(--line)}.library-aside .eyebrow{display:block;margin:0 10px 22px}.kind-filter{display:flex;width:100%;border:0;background:transparent;text-align:left;justify-content:space-between;padding:11px 12px;font-size:13px;margin:4px 0}.kind-filter.active{background:#dfe8d6;color:#315f54}.kind-filter small{color:#8c977c}.library-main{padding:36px 38px}.library-main h1{font-size:33px}.library-filters{display:flex;gap:15px;margin-bottom:28px}.library-filters input{flex:1}.entry-grid .cards{grid-template-columns:repeat(2,minmax(0,1fr))}.entry-group{margin-bottom:36px}.entry-group>h2{font-size:17px;margin-bottom:17px;color:#718066}.reference-top .brand-icon{font-size:28px}.inspector-toggle{display:none}[hidden]{display:none!important}:focus-visible{outline:3px solid #d3a955;outline-offset:2px}body:has(dialog[open]){overflow:hidden}.map-workspace:fullscreen{height:100vh;background:#e5e5d7}.map-workspace:fullscreen .map-bar{height:53px}
@media(min-width:1650px){:root{--sidebar:405px}#inspector-body{padding:25px 26px}.canvas-hint{font-size:12px}}
@media(max-width:1250px){:root{--sidebar:325px}.app-top{gap:12px;padding:0 12px}.app-top .brand{font-size:12px}.app-top .brand small{max-width:150px}.top-links{gap:3px}.top-links a,.top-links button{font-size:11px}.map-bar select{max-width:160px}.map-bottom{gap:8px}.map-bottom #save-state{display:none}.map-nav .crumb{max-width:170px;overflow:hidden;text-overflow:ellipsis}#inspector-body{padding:20px 17px}.cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:980px){.app-top .brand span:not(.brand-icon){display:none}.top-right{gap:5px}.top-links a{max-width:82px}.reference-top{padding:11px 16px;gap:15px}.reference-top nav{gap:12px}.reading{padding:32px}.reading-layout{grid-template-columns:180px 1fr}.reading-aside{padding:25px 17px}.library-layout{grid-template-columns:170px 1fr}.library-main{padding:30px 22px}.library-aside{padding:30px 10px}.reading>h1{font-size:35px}.slot{grid-template-columns:1fr 1fr}.hero h1{font-size:60px}}
@media(max-width:740px){.app-top{height:59px;gap:8px;padding:0 8px}.brand-icon{font-size:27px}.top-links button{display:none}.top-links a{font-size:10px}.top-right #settings{display:none}.top-right #export{font-size:10px;padding:7px}.top-right #clock-button{display:none}.mode-switch button{font-size:11px;padding:8px}.workspace{height:calc(100dvh - 59px);display:block}.map-workspace{height:100%}.inspector{position:fixed;left:0;right:0;bottom:0;height:62dvh;z-index:20;transform:translateY(100%);transition:transform .15s;border-top:1px solid var(--line);border-radius:12px 12px 0 0;box-shadow:0 -10px 40px #17382825}.show-inspector .inspector{transform:none}.inspector-toggle{display:block;position:absolute;bottom:49px;right:12px;background:var(--green);color:white;z-index:21}.show-inspector .inspector-toggle{position:fixed;bottom:calc(62dvh + 8px)}.map-nav .crumb{font-size:10px;max-width:120px}.map-bar select{max-width:150px;font-size:11px}.map-bar #edit-map{display:none}.map-bar #add-map{font-size:10px;padding:7px}.map-bottom{font-size:9px}.map-tools{top:10px;left:10px}.editor-toolbar{left:10px;top:60px;max-width:calc(100% - 20px)}.editor-toolbar button{font-size:10px;padding:5px}.canvas-hint{font-size:10px;bottom:8px}.journey-strip{flex-wrap:wrap;gap:5px}.journey-strip>div{width:100%;flex-basis:100%}.journey-strip button{flex:1}.reference-top .brand span:not(.brand-icon){display:none}.reference-top nav{gap:10px}.reference-top nav a{font-size:10px}.reference-top #print-ref{display:none}.reading-layout,.library-layout{display:block}.reading-aside{position:static;height:auto;padding:15px 22px;border-right:0;border-bottom:1px solid var(--line)}.reading-aside .small-title,.reading-aside .small-title~a,.reading-aside .muted{display:none}.reading-aside .eyebrow{margin-bottom:5px}.reading{padding:27px 23px}.reading>h1{font-size:33px}.library-aside{min-height:0;display:flex;overflow:auto;gap:5px;padding:12px}.library-aside .eyebrow{display:none}.kind-filter{width:auto;flex-shrink:0;font-size:11px;gap:8px}.library-main{padding:25px 20px}.entry-grid .cards{grid-template-columns:1fr}.library-main h1{font-size:27px}.library-filters{gap:8px}.library-filters input{min-width:0}.library-filters select{max-width:140px}.field-list,.grid2,.grid3{grid-template-columns:1fr}.gallery{grid-template-columns:1fr 1fr}.modal-body{padding:18px}.modal header,.modal footer{padding:15px 18px}.modal h2{font-size:20px}.landing{padding:34px 22px}.landing-top{padding:15px 20px;gap:15px}.landing-top .version{display:none}.hero h1{font-size:53px}.hero>p{font-size:17px}.cards,.quick-guide{grid-template-columns:1fr}.hero .row button{flex:1;padding:12px}.quick-guide{gap:15px;margin-top:35px}.metrics{flex-wrap:wrap}.metrics>div{min-width:50%;border-bottom:1px solid var(--line)}.reference-top .brand-icon{font-size:25px}}
@media print{.reference-top,.reading-aside,.reading-actions,.gallery-section button,.session-note button,.document-footer,.toast{display:none!important}.reading-layout{display:block}.reading{padding:0;max-width:none}.prose{font-size:11pt}.reading>h1{font-size:25pt}.reading .lead{font-size:12pt}.field-list{grid-template-columns:1fr 1fr}.gallery-card img{max-height:160px}.gallery-section .hint{display:none}body{background:white}h2,h3{break-after:avoid}.metrics,.field-list section{break-inside:avoid}.app-top,.map-workspace{display:none}.workspace{display:block;height:auto}.inspector{position:static;transform:none;height:auto;border:0}#inspector-body{overflow:visible}button{display:none!important}@page{size:A4;margin:16mm}}

/* 0.2: migrated reference prose and trusted extension panels */
.module-links{display:inline-flex;gap:5px}.module-links a{font-size:11px;white-space:nowrap;text-decoration:none;padding:7px 9px;border:1px solid #719583;border-radius:5px;color:inherit;background:#ffffff10}.search-hit{display:block;padding:12px;border-bottom:1px solid #ccd6cb;text-decoration:none}.search-hit small{display:block;color:#6a7969}.tool-layout{display:grid;grid-template-columns:230px minmax(0,1fr);max-width:1500px;margin:auto;min-height:calc(100vh - 70px)}.tool-nav{position:sticky;top:0;max-height:100vh;overflow:auto;padding:28px 18px;background:#e6ecdf;border-right:1px solid #cbd6c4}.tool-nav button{display:block;width:100%;text-align:left;border:0;background:none;margin:4px 0;padding:11px;border-radius:5px;font-size:13px}.tool-nav button.active{background:#355e4e;color:white}.tool-nav small{display:block;font-size:11px;line-height:1.6;margin:24px 8px;color:#697965}.tool-main{padding:28px 36px;max-width:1170px;min-width:0}.tools-status{display:flex;gap:12px;align-items:center;flex-wrap:wrap;font-size:12px;border-bottom:1px solid #cbd6c4;padding-bottom:15px}.tools-status button{margin-left:auto}.tool-form{border:1px solid #d0dbc9;background:#fafbf6;padding:20px;margin:18px 0;border-radius:7px}.tool-form>button[type=submit]{margin-top:14px}.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.tool-form label{display:block;font-size:12px;line-height:1.5;margin:8px 0}.tool-form label:not(.check)>input,.tool-form textarea,.tool-form select{display:block;width:100%;margin-top:6px;min-width:0}.tool-form .check{display:flex;gap:8px;align-items:center}.tool-form .check input{width:auto}.tool-card{padding:18px;border:1px solid #d0dbc9;margin:18px 0;border-radius:7px}.roster-detail,.event-detail,.thread-detail{border:1px solid #cdd8c9;margin:12px 0;padding:16px;border-radius:7px;background:#fffefa}.roster-detail summary{display:grid;grid-template-columns:1fr 1fr;cursor:pointer;gap:6px;font-size:13px}.roster-detail summary small{grid-column:1/-1;color:#6d7c67}.event-detail summary small,.thread-detail summary small{display:block;color:#6d7c67;font-size:12px;margin-top:7px}.roster-detail>.tool-form{margin:12px 0;background:#f4f6ef}.goal-row{display:flex;gap:12px;align-items:flex-start;justify-content:space-between;border-bottom:1px solid #d2dccd;padding:16px 0}.goal-row p{margin:5px 0;font-size:14px}.goal-row small{color:#6a7662}.goal-row button{flex-shrink:0}.reading article.prose table{font-size:14px;width:100%;border-collapse:collapse}.prose td,.prose th{border:1px solid #d3dccd;padding:10px}.prose table{display:table;max-width:100%}.prose figure img{max-width:100%;height:auto}.prose details{padding:12px;margin:15px 0;border:1px solid #d3dccd;border-radius:6px}.prose summary{cursor:pointer;font-weight:650}.prose .missing-link{color:#904e38}.prose h1{font-size:28px}.prose{overflow-wrap:anywhere}.prose>div{max-width:100%}.brief .prose{max-height:650px;overflow:auto}.atmosphere p{font:15px/1.7 Georgia;color:#384e41}.actor-card .turn details{width:100%;padding:9px;border:1px solid #d4ddce}.actor-card .turn label{display:flex;justify-content:space-between;align-items:center;gap:8px;margin:5px 0}.actor-card .turn input{max-width:80px}.actor-card .turn summary{cursor:pointer;font-size:12px}
body.night{--paper:#24332a;--ink:#e0e7db;--muted:#a4b49c;--bg:#18271f;color:#e0e7db;background:#18271f}.night .inspector,.night .reference-top,.night .reading,.night .reading-aside,.night .library-main,.night .tool-main{background:#24332a;color:#e0e7db}.night input,.night select,.night textarea,.night button,.night .modal{background:#293c2f;color:#e0e7db;border-color:#51614a}.night .tool-nav,.night .tool-form,.night .entry-card,.night .event-detail,.night .roster-detail,.night .thread-detail,.night .callout{background:#2b4031;color:#e0e7db}.night a{color:#b8d4ac}.night .npc-reminder,.night .route-button,.night .actor-card,.night .note-block{background:#2b4031}.night .atmosphere p{color:#dce7d3}
@media(max-width:1000px){.tool-layout{grid-template-columns:185px minmax(0,1fr)}.tool-main{padding:22px}.grid3{grid-template-columns:1fr 1fr}.module-links a{max-width:140px;white-space:normal}.desk-top{gap:6px}.module-links{max-width:150px}}
@media(max-width:740px){.tool-layout{display:block}.tool-nav{position:static;display:flex;gap:3px;flex-wrap:wrap;padding:10px;max-height:none}.tool-nav .eyebrow,.tool-nav small{display:none}.tool-nav button{width:auto;font-size:11px;padding:8px}.tool-main{padding:18px}.grid2,.grid3{grid-template-columns:1fr}.roster-detail summary{grid-template-columns:1fr}.goal-row{flex-wrap:wrap}.module-links a{font-size:10px;max-width:100px}.prose table{display:block;overflow:auto}}
@media print{.tool-nav,.tools-status button,.module-links,.tool-form button{display:none}.tool-layout{display:block}.tool-main{max-width:none;padding:0}.tool-form,.roster-detail{break-inside:avoid}.tool-form{background:white}}
/* 0.3.1: visible focus without changing target dimensions or world geometry. */
.marker:hover .pin-shape,.marker:focus .pin-shape{stroke:#f2cf81;stroke-width:3;filter:drop-shadow(0 1px 2px #12281c88)}
.marker:focus{outline:none}.route:focus path:last-of-type,.route:hover path:last-of-type{stroke:#bc8033;stroke-width:4}
.grid-overlay{pointer-events:none}.marker .pin-hit{cursor:pointer}
#display-grid label{font-size:12px}#display-grid input[type=number]{max-width:150px}
/* 0.4: map navigation and library placement. Reference documents remain independent tabs. */
#map-canvas svg[data-label-mode="context"] .marker .label-container{display:none}
#map-canvas svg[data-label-mode="context"] .marker.selected .label-container,
#map-canvas svg[data-label-mode="context"] .marker:hover .label-container,
#map-canvas svg[data-label-mode="context"] .marker.hovered .label-container,
#map-canvas svg[data-label-mode="context"] .marker:focus .label-container{display:initial}
#map-canvas svg[data-label-mode="none"] .label-container,#map-canvas svg[data-label-mode="none"] .zone-label{display:none}
.marker.locked .pin-shape{stroke:#e0d5b6;stroke-dasharray:3 2}
.marker.locked .pin-hit{cursor:help}.route.locked{cursor:help}
#map-canvas.drop-ready{outline:4px dashed #d3a747;outline-offset:-10px}
.map-tools{max-width:calc(100% - 26px);flex-wrap:wrap;gap:3px}.map-tools button{min-width:31px}
.mini-map{position:absolute;right:13px;bottom:50px;width:218px;border:1px solid #7e9288;border-radius:9px;background:#203d32ed;box-shadow:0 5px 25px #142c263b;z-index:7;overflow:hidden;color:#f0e9d6}
.mini-map svg{width:216px;height:137px;display:block;cursor:crosshair;touch-action:none;background:#263e35;outline-offset:-3px}
.mini-map .mini-heading{display:flex;justify-content:space-between;padding:9px 11px;font:650 9px system-ui;letter-spacing:1px}
.mini-map .mini-heading .mini-zoom{font:600 10px ui-monospace;letter-spacing:0;color:#d3be86}
.mini-map p{font:10px system-ui;margin:0;padding:7px 10px;color:#c3d1bd}
.mini-viewport{cursor:grab}.mini-viewport:active{cursor:grabbing}
.map-library{position:absolute;left:12px;top:108px;bottom:46px;width:304px;max-width:calc(100% - 24px);background:var(--paper);border:1px solid #a1b29e;box-shadow:0 10px 50px #132b293d;border-radius:10px;z-index:16;display:flex;flex-direction:column;overflow:hidden}
.map-library header{display:flex;align-items:center;gap:10px;padding:14px 15px;border-bottom:1px solid var(--line);background:#e8eddf}
.map-library header>div{flex:1}.map-library header b{font:700 13px system-ui;display:block}.map-library header small{display:block;font:10px system-ui;color:var(--muted);margin-top:4px}
.map-library .close-tray{font-size:20px;padding:2px 8px;min-height:29px}
.tray-filters{padding:12px 14px 0;display:grid;grid-template-columns:1fr 120px;gap:8px}.tray-filters input[type=search]{grid-column:1/-1;min-width:0;width:100%}.tray-filters select{font-size:12px;min-width:0}
.tray-filters .check{font:10px/1.4 system-ui;display:flex;align-items:center;gap:4px}
.tray-help{font:11px/1.55 system-ui!important;padding:10px 14px;margin:0!important;color:var(--muted)}
.tray-results{overflow:auto;padding:0 10px 12px;min-height:0;flex:1}
.tray-card{padding:13px 12px;border:1px solid var(--line);background:#fffdf7;margin:0 0 8px;border-radius:7px;cursor:grab}.tray-card:active{cursor:grabbing}
.tray-card>b{display:block;font:650 13px system-ui;line-height:1.4}.tray-card>small{display:block;font:11px/1.4 system-ui;color:var(--muted);margin-top:5px}.tray-card .eyebrow{font-size:9px;letter-spacing:.7px;margin:0 0 7px}
.tray-card .row{margin-top:10px;justify-content:space-between;gap:6px}.tray-card button{font:600 11px system-ui;min-height:30px;padding:5px 8px}.tray-card a{font-size:11px}
.map-library footer{padding:9px 14px;border-top:1px solid var(--line);font:11px system-ui;color:var(--muted);background:#edf1e7}
.placement-prompt{position:absolute;left:50%;transform:translateX(-50%);bottom:48px;max-width:calc(100% - 40px);background:#2e5446;color:#fff7dd;padding:11px 15px;border:1px solid #d4b571;border-radius:8px;box-shadow:0 6px 24px #132e2a42;font:600 13px system-ui;z-index:18}.placement-prompt button{margin-left:8px;font-size:11px;min-height:28px;padding:5px 9px}
.overlap-choices,.object-results{display:flex;flex-direction:column;gap:6px;max-height:52vh;overflow:auto;margin-top:14px}.object-choice{display:flex;gap:12px;align-items:center;text-align:left;width:100%;min-height:53px;padding:11px 14px;font:13px/1.4 system-ui;border:1px solid #c8d4c5;background:#f5f7ef;white-space:normal}
.object-choice b{display:block;font:650 14px system-ui}.object-choice small{display:block;font:11px system-ui;color:#6b7c65;margin-top:6px}.choice-icon{display:grid;place-items:center;min-width:28px;height:28px;border-radius:50%;color:#fff}
.saved-view{display:flex;gap:6px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line)}.saved-view .view-open{flex:1;border:0;text-align:left;background:none;min-width:0}.view-open b{display:block;font-size:14px;overflow-wrap:anywhere}.view-open small{display:block;font-size:11px;margin-top:5px;color:var(--muted)}.saved-view>button:not(.view-open){font-size:11px;padding:6px 9px;min-height:32px}
.lock-options{border:1px solid var(--line);background:#f3f5eb;padding:10px 14px;border-radius:6px;margin:14px 0}.lock-options summary{cursor:pointer;font:650 13px system-ui;padding:4px 0}.lock-options .grid2{margin-top:10px}.lock-options .check{font-size:12px}
.entry-card[draggable=true]{cursor:grab}.entry-card[draggable=true]:active{cursor:grabbing}
.night .map-library,.night .tray-card,.night .object-choice,.night .lock-options{background:#2b4031;color:#dce7d3}.night .map-library header,.night .map-library footer{background:#203729}.night .object-choice small{color:#b9cbb1}
@media(max-width:740px){.map-tools{max-width:calc(100% - 18px);gap:1px;padding:3px}.map-tools button{min-width:27px;width:27px;font-size:13px;padding:4px;min-height:30px}.mini-map{right:10px;bottom:94px;width:154px}.mini-map svg{width:152px;height:96px}.mini-map .mini-heading{padding:7px 8px;font-size:8px}.mini-map p{display:none}.map-library{top:130px;bottom:55px;width:280px}.saved-view{flex-wrap:wrap}.saved-view .view-open{flex-basis:100%}.placement-prompt{font-size:12px;left:10px;right:10px;transform:none;max-width:none;bottom:55px}.show-inspector .mini-map{display:none}.map-library .tray-filters{grid-template-columns:1fr 125px}}
@media print{.mini-map,.map-library,.placement-prompt{display:none!important}}
@media(max-width:740px){
 .app-top{height:96px;flex-wrap:wrap;align-content:center;row-gap:4px;padding:5px 8px}
 .app-top>.brand{flex:0 0 auto}.app-top .mode-switch{flex:0 0 auto;max-width:none}.app-top .mode-switch button{white-space:nowrap}
 .app-top .top-links{margin-left:auto}.app-top .top-right{flex:0 0 100%;width:100%;margin-left:0;justify-content:flex-end;gap:7px}
 .app-top .top-right #export{margin-right:auto}.workspace{height:calc(100dvh - 96px)}
 .map-bar .map-nav{flex:1;min-width:0;justify-content:flex-start}.map-bar select{flex-shrink:0}
}
/*0.5 world atlas: static tiles stay under the shared SVG coordinate space.*/
#map-canvas{position:absolute}#map-canvas>.tile-background{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}#map-canvas>svg{position:relative;background:transparent}.map-tools{max-width:calc(100% - 30px);flex-wrap:wrap}.map-tools button{min-width:34px}.measure-panel{position:absolute;z-index:8;left:16px;top:100px;width:300px;max-width:calc(100% - 32px);max-height:calc(100% - 145px);overflow:auto;background:#fffdf4f5;border:1px solid #bd9dbe;border-radius:12px;padding:14px;box-shadow:0 5px 25px #21142a33;color:#372e39}.measure-panel header{display:flex;align-items:center;justify-content:space-between}.measure-panel header button{border:0;background:none}.measure-total{font-size:29px;font-weight:700;margin:5px 0;color:#753869}.measure-total small{font-size:16px}.measure-panel .hint{font-size:11px;margin:8px 0}.measure-panel .row{gap:4px;margin-top:8px}.measure-panel button{font-size:11px;padding:7px}.measure-panel select{width:100%}.measure-panel details{font-size:12px;max-height:150px;overflow:auto}.authored-ring{filter:drop-shadow(0 1px 1px #43300b)}.map-bar #world-map{white-space:nowrap;font-size:12px}.map-bar #map-back{padding:6px 10px}.marker .status-badge{pointer-events:none}.map-tools .active{background:#754269;color:#fff}.map-bar{gap:7px}.map-bar .map-nav{min-width:0;overflow:hidden}.map-bar select{min-width:100px}.night .measure-panel{background:#28342cf5;color:#e7eedc}.night .measure-total{color:#edb9df}@media(max-width:740px){.measure-panel{top:108px;width:280px}.map-bar #world-map{font-size:10px;padding:7px}.map-bar .map-nav{display:none}.map-tools{gap:3px}.map-tools button{min-width:30px}.map-bar #map-back{padding:6px}.map-bar select{flex:1}.map-tools{max-width:calc(100% - 20px)}}
/*0.5.1: visible placement entry and explicit tile health, never a silent blurry fallback.*/
#place-from-library{white-space:nowrap;font-size:12px;padding:8px 11px}.map-bar{flex-wrap:wrap;min-height:53px;height:auto;padding-top:7px;padding-bottom:7px}.map-library{z-index:15;max-height:calc(100% - 145px)}.tray-plan{color:#756124!important;font-weight:600}.tile-status{position:absolute;right:12px;top:12px;z-index:6;max-width:360px;padding:9px 12px;border:1px solid #abc2a6;border-radius:9px;background:#fffdf4f5;color:#294135;box-shadow:0 2px 10px #1c362622;font:11px/1.4 system-ui}.tile-status b{font-size:11px}.tile-status[data-state=ready]{max-width:270px;padding:6px 9px}.tile-status[data-state=error]{border:2px solid #ba593b;background:#fff0e3;max-width:410px}.tile-status-detail{white-space:pre-wrap;overflow-wrap:anywhere;margin:7px 0;color:#862f23}.tile-status-actions{display:flex;gap:6px;margin-top:5px}.tile-status button{font:10px system-ui;padding:5px 7px;min-height:27px}.tile-status-diagnostic{font:10px/1.4 ui-monospace,monospace;white-space:pre-wrap;overflow-wrap:anywhere;max-height:190px;overflow:auto;margin:8px 0 0}.night .tile-status{background:#263d30;color:#e2ebd8}.night .tile-status[data-state=error]{background:#422f26}.night .tile-status-detail{color:#ffc2a0}@media(max-width:1100px){.tile-status{top:auto;bottom:45px;left:12px;right:auto;max-width:300px}.tile-status[data-state=ready]{max-width:240px}.map-bar #place-from-library{font-size:11px;padding:7px}}@media(max-width:740px){.map-bar #place-from-library{order:8;flex-basis:100%;font-size:12px}.tile-status{bottom:54px;max-width:230px}.tile-status[data-state=error]{max-width:calc(100% - 24px)}.tile-status[data-state=ready]{max-width:210px}.map-library{top:125px;width:calc(100% - 24px);max-width:360px}}
/*0.6 campaign owns regions; the world is an optional view.*/
.campaign-home{position:fixed;z-index:25;inset:75px 0 0;background:var(--bg,#edf0e5);color:var(--ink,#233d31);overflow:auto;padding:32px max(24px,calc((100vw - 1220px)/2)) 50px}.campaign-heading{display:flex;justify-content:space-between;align-items:start;gap:24px}.campaign-heading h1{font-size:34px;line-height:1.15;margin:8px 0}.campaign-heading p{max-width:760px}.campaign-home section{margin:25px 0}.campaign-setting{display:flex;align-items:center;flex-wrap:wrap;gap:14px;border:1px solid var(--line);border-radius:10px;padding:18px;background:var(--paper,#fffdf4)}.campaign-setting span{flex:1;min-width:200px;font-size:13px}.campaign-region-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px}.campaign-region-card{background:var(--paper,#fffdf4);border:1px solid var(--line);border-radius:12px;padding:24px}.campaign-region-card h2{font-size:23px;line-height:1.25}.campaign-region-card p{font-size:14px}.campaign-region-card small{color:#527367}.region-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:17px}.region-actions button{font-size:12px}.migration-preview{background:#fff2d6;border-left:4px solid #b1843f;padding:20px}.migration-preview h2{font-size:21px;margin-top:0}.campaign-other-maps{display:flex;flex-wrap:wrap;gap:10px}.campaign-home footer{margin-top:32px;border-top:1px solid var(--line);padding-top:20px}.world-region-row{display:flex;gap:7px}.world-region-row button:first-child{flex:1;text-align:left}.region-picker-item{text-align:left;padding:14px}.region-gateway{cursor:pointer}.region-gateway:hover rect,.region-gateway:focus rect{stroke:#ffd46e;stroke-width:4}.region-gateway:focus{outline:none}#base-layer{width:auto!important;font-size:12px!important;padding:6px 8px}.night .migration-preview{background:#473e28}.night .campaign-home{background:#182c22;color:#e0e7d5}.night .campaign-setting,.night .campaign-region-card{background:#253b2d}.night .campaign-region-card small{color:#b1c8b4}@media(max-width:740px){.campaign-home{top:59px;padding:22px 15px 35px}.campaign-heading{display:block}.campaign-heading h1{font-size:26px}.campaign-heading button{margin-top:12px}.campaign-region-grid{grid-template-columns:1fr}.campaign-region-card{padding:18px}.campaign-setting{display:block}.campaign-setting span{display:block;margin:8px 0}.map-tools #base-layer{font-size:10px!important;max-width:135px}.editor-toolbar{top:86px}.map-library{top:154px}.measure-panel{top:134px}.map-bar #campaign-home-button{font-size:10px;padding:7px}}
/* Independent source-map reference layer; authored campaign markers render above it. */
.canon-feature{cursor:pointer}.canon-feature:focus{outline:none}.canon-feature:focus text,.canon-feature.selected text{fill:#7a390f;stroke:#fff5b8;stroke-width:5}.canon-feature:hover text{fill:#9b4718}.canon-results{max-height:48vh;overflow:auto}.canon-search-hit{display:flex;align-items:center;justify-content:space-between;gap:16px;text-align:left}.canon-search-hit small{color:var(--muted)}#canon-open{white-space:nowrap;color:#6b4223;background:#fff5da}#canon-controls{border-block:1px solid #d7d3c1;padding:12px 0;margin:12px 0}#canon-status{margin:12px 0;font-size:13px;color:#5b695e}
.region-gateway .gateway-label-context{opacity:0;pointer-events:none}.region-gateway:hover .gateway-label-context,.region-gateway:focus .gateway-label-context,.region-gateway.selected .gateway-label-context{opacity:1;pointer-events:all}.canon-binding-panel{border-top:1px solid #d9d2b8;margin-top:22px;padding-top:10px}.grid-legend{position:absolute;left:12px;bottom:44px;z-index:4;max-width:min(80%,640px);background:#fff9e7ed;border:1px solid #b5ad95;border-radius:5px;padding:6px 9px;font-size:12px;color:#293f34;pointer-events:none}.grid-presets{display:flex;flex-wrap:wrap;gap:5px}.grid-presets button{padding:5px 9px}.grid-preview{padding:10px;background:#f3eedf;margin:12px 0}

/* Shared layout and readable controls. Keep the existing atlas appearance. */
:root {
    --chrome-surface: #f7f8f0;
    --chrome-text: #263c34;
    --chrome-muted: #536a5b;
    --chrome-accent: #8a642b;
    --control-height: 36px;
}

/* The header may wrap: both views share the remaining grid row. */
#app:has(> .workspace) {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    height: 100dvh;
    overflow: hidden;
}
.app-top {
    grid-column: 1;
    grid-row: 1;
    height: auto;
    min-height: 66px;
    flex-wrap: wrap;
    row-gap: 6px;
    padding-top: 6px;
    padding-bottom: 6px;
}
.app-top .brand { min-width: 0; }
.app-top .top-right { flex-wrap: wrap; max-width: 100%; min-width: 0; }
.workspace { grid-column: 1; grid-row: 2; height: auto; }
.campaign-home {
    position: relative;
    inset: auto;
    grid-column: 1;
    grid-row: 2;
    min-height: 0;
    width: 100%;
    height: 100%;
}

/* Toolbar wrapping changes its height; the editor follows in normal flow. */
.canvas-wrap {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto minmax(0, 1fr);
    gap: 6px;
    padding: 14px 13px;
}
.map-tools, .editor-toolbar {
    position: relative;
    top: auto;
    left: auto;
    grid-column: 1;
    justify-self: start;
    align-self: start;
    max-width: 100%;
    width: fit-content;
    z-index: 8;
}
.map-tools { grid-row: 1; }
.editor-toolbar { grid-row: 2; }
.map-library, .measure-panel {
    position: relative;
    top: auto;
    left: auto;
    bottom: auto;
    grid-column: 1;
    grid-row: 3;
    justify-self: start;
    align-self: start;
    width: min(360px, 100%);
    max-width: 100%;
    max-height: 100%;
    min-height: 0;
}
.map-library { height: 100%; }
.tile-status { top: auto; bottom: 44px; left: 12px; right: auto; }

button, .button { min-height: var(--control-height); }
button.icon { min-width: var(--control-height); }
.map-library .close-tray, .gallery-card .row button { min-width: var(--control-height); }
.map-library .close-tray, .tray-card button, .tile-status button,
.placement-prompt button, .saved-view > button:not(.view-open),
.gallery-card .row button { min-height: var(--control-height); }
.map-tools button {
    min-width: var(--control-height);
    width: auto;
    min-height: var(--control-height);
}
.map-tools #grid-settings { font-size: 13px; }
.editor-toolbar button, .editor-toolbar .check {
    font-size: 12px;
    min-height: var(--control-height);
}
.map-nav .crumb { min-height: var(--control-height); font-size: 12px; }
.map-nav > span { color: var(--chrome-muted); }
.map-bottom { gap: 12px; font-size: 12px; flex-wrap: wrap; }
.map-bottom #save-state { display: inline; }
.map-bottom #xp { font-size: 12px; }
.inspector > header { height: auto; min-height: 49px; gap: 8px; }
.inspector > header span, .inspector > header button { font-size: 12px; }
.inspector > header button { flex-shrink: 0; }
#inspector-body figure { margin: 16px 0; }
#inspector-body figure img { display: block; max-width: 100%; height: auto; }
.draft-status {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 10px 0;
    padding: 9px;
    border: 1px solid var(--line);
    border-radius: 5px;
    background: var(--soft);
    color: var(--muted);
    font-size: 12px;
}
.draft-status:empty { display: none; }
#inspector-body .draft-status p { flex-basis: 100%; margin: 0; font-size: 12px; }
.draft-status button { padding: 6px 9px; font-size: 12px; }
.hint, .eyebrow, .badge, .version, .card-foot,
.brand small, #clock-button small, .npc-reminder small,
.metrics small, .tracker-card small, .timeline small,
.actor-card .check, .actor-fields label, .module-links a,
.tray-card .eyebrow, .map-library header small,
.tray-filters .check, .map-library footer, .mini-map .mini-heading,
.mini-map .mini-heading .mini-zoom, .journey-strip small,
.journey-strip button, .view-open small,
.reading-aside a small, .small-title, .tags span, .ability-row small,
.gallery-empty small, .gallery-card .row button, .gallery-card p,
.document-footer, .tool-nav small { font-size: 12px; }
.small-link, .tracker-card p, .tray-help { font-size: 12px !important; }
.measure-panel .hint, .measure-panel button, .tile-status,
.tile-status b, .tile-status button, .tile-status-diagnostic,
.tray-help, .tray-card > small, .tray-card button, .tray-card a,
.object-choice small, .saved-view > button:not(.view-open) { font-size: 12px; }
.app-top .top-links a, .app-top .top-links button,
.mode-switch button, .top-right #export { font-size: 12px; }
.map-bar, .map-bottom, .inspector > header,
.modal header, .modal footer { background: var(--chrome-surface); color: var(--chrome-text); }
.map-bottom, .inspector > header span { color: var(--chrome-muted); }
.toast.visible { pointer-events: auto; }
.toast.error { display: flex; align-items: start; gap: 12px; }
.toast.error > span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.toast.error button {
    flex-shrink: 0;
    min-width: var(--control-height);
    padding: 4px 8px;
    background: transparent;
    color: inherit;
    border-color: #ffffff55;
    font-size: 18px;
}
.toast.error button:hover { background: #ffffff16; border-color: #ffffffaa; }

/* UI darkness is independent of the artwork and the campaign's day/night. */
body.night {
    --chrome-surface: #263a2e;
    --chrome-text: #e0e7db;
    --chrome-muted: #b8c7ac;
    --chrome-accent: #d8be86;
    --line: #546657;
    --soft: #2b4031;
    --muted: #b8c7ac;
}
.night .map-workspace { background: var(--bg); }
.night .map-tools, .night .editor-toolbar, .night .canvas-hint,
.night .grid-legend, .night .grid-preview, .night .metrics,
.night .event-plan, .night .tracker-card, .night .badge {
    background: var(--chrome-surface);
    color: var(--chrome-text);
    border-color: var(--line);
}
.night .map-nav .crumb, .night .inspector > header button {
    color: var(--chrome-text);
    background: transparent;
}
.night .map-bottom #xp, .night label, .night .brief summary,
.night .npc-reminder p, .night .npc-reminder small,
.night .metrics small, .night .map-library header small,
.night .mini-map .mini-heading, .night .journey-strip small,
.night .search-hit small, .night .card-foot, .night .kind-filter small {
    color: var(--chrome-muted);
}
.night .lead, .night .entry-card p, .night .entry-group > h2,
.night .small-title, .night .tags span, .night .field-list h3,
.night .ability-row small, .night .ability-row span,
.night .document-footer, .night .gallery-empty,
.night .tool-nav small, .night .roster-detail summary small,
.night .event-detail summary small, .night .thread-detail summary small,
.night .goal-row small { color: var(--chrome-muted); }
.night .eyebrow, .night .timeline small { color: #d8be86; }
.night .tray-plan { color: #d8be86 !important; }
.night .empty-state, .night .prose pre, .night .prose blockquote,
.night .gallery-card, .night .gallery-card .image-button,
.night .image-preview, .night .submap-button, .night .enc-button {
    background: var(--chrome-surface);
    color: var(--chrome-text);
    border-color: var(--line);
}
.night .empty-state h2, .night .empty-state h3 { color: var(--chrome-text); }
.night .kind-filter.active { background: #354f3c; color: var(--chrome-text); }
.night .entry-card:hover { background: #354f3c; }
.night .library-embedded .library-aside { background: transparent; }
.night .journey-strip, .night .library-aside,
.night .reading-aside, .night .map-library header,
.night .map-library footer { background: var(--chrome-surface); }
.night .editor-toolbar button.active, .night .map-tools button.active,
.night .mode-switch button.active {
    background: #d8be86;
    color: #24332a;
}
.night button:hover, .night .button:hover { background: #354f3c; border-color: #8ca48c; }
.night .primary:hover { background: #214e42; }
.night button.danger, .night .form-error { color: #edab97; }
.night #canon-open { background: #3f3525; color: #e8c784; }
.night #canon-status { color: var(--chrome-muted); }

/* Search and compact library views share the same readable controls. */
.search-controls, .library-view-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: 8px;
}
.search-controls input { flex: 1; min-width: 160px; }
.search-controls select { max-width: 210px; }
.search-status, .library-results-count { font-size: 12px; color: var(--muted); }
.search-results { min-height: 0; }
.library-extra-controls { min-width: 0; margin: 0 0 12px; }
.library-extra-controls > summary {
    min-height: max(44px, var(--control-height));
    padding: 9px 10px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--paper);
    color: var(--chrome-text);
    font-size: 12px;
    font-weight: 600;
    list-style-position: inside;
    cursor: pointer;
}
.library-extra-controls > summary::marker { color: var(--chrome-accent); }
.library-extra-controls > summary:focus-visible { outline-color: var(--chrome-accent); }
.library-extra-controls[open] > summary { display: none; }
.search-hit.active, .search-hit:focus-visible { background: var(--soft); outline: 2px solid var(--gold); outline-offset: -2px; }
.search-hit mark { background: #f0deae; color: #263c34; }
.night .search-hit.active, .night .search-hit:focus-visible { background: #354f3c; }
.night .search-hit mark { background: #5b4825; color: #f1e1bf; }
.search-more { margin-top: 12px; }
.library-entry { display: flex; flex-wrap: wrap; min-width: 0; align-items: start; gap: 6px; }
.library-entry > .entry-card { flex: 1 1 280px; min-width: 0; }
.library-archive { flex-shrink: 0; min-width: var(--control-height); }

/* Material organization stays beside the content and wraps before narrowing it. */
.material-scope-toolbar, .search-scope-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: 8px;
    min-width: 0;
    margin-bottom: 12px;
}
.material-scope-toolbar > label, .search-scope-controls > label {
    flex: 0 1 260px;
    min-width: 0;
    max-width: 100%;
}
.material-scope-toolbar select, .search-scope-controls select {
    width: 100%;
    min-width: 0;
    min-height: var(--control-height);
    padding: 7px 9px;
    font-size: 13px;
}
.search-scope-controls > select { width: min(360px, 100%); }
.material-scope-actions.row { gap: 6px; min-width: 0; margin: 0; }
.material-scope-actions button { max-width: 100%; padding: 7px 10px; font-size: 12px; }
.library-entry-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    flex: 0 1 auto;
    min-width: 0;
    max-width: 100%;
    margin-left: auto;
}
.library-entry-actions .library-archive,
.material-collection-remove { padding: 7px 9px; font-size: 12px; }
.material-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 8px 0; }
.material-actions button { max-width: 100%; padding: 7px 9px; font-size: 12px; }
.material-actions:empty, .library-entry-actions:empty,
.material-scope-toolbar:empty, .search-scope-controls:empty,
.material-scope-actions:empty { display: none; }
button.material-favorite {
    flex: 0 0 var(--control-height);
    width: var(--control-height);
    height: var(--control-height);
    min-width: var(--control-height);
    min-height: var(--control-height);
    padding: 6px;
    color: var(--chrome-muted);
    background: var(--paper);
    border-color: var(--line);
}
.material-favorite-icon { display: block; width: 20px; height: 20px; flex-shrink: 0; }
button.material-favorite:hover,
button.material-favorite[aria-pressed="true"] {
    color: var(--chrome-accent);
    background: var(--soft);
    border-color: var(--chrome-accent);
}
.material-favorite:focus-visible { outline: 2px solid var(--chrome-accent); outline-offset: 2px; }
.search-result-row { display: flex; align-items: center; gap: 6px; min-width: 0; border-bottom: 1px solid var(--line); }
.search-result-row > .search-hit { flex: 1; min-width: 0; border-bottom: 0; overflow-wrap: anywhere; }
.search-result-row > .material-favorite { margin-right: 6px; }
.entry-list-mode .cards { grid-template-columns: minmax(0, 1fr); gap: 6px; }
.entry-card.compact {
    display: grid;
    grid-template-columns: minmax(90px, .65fr) minmax(0, 2fr) minmax(120px, 1fr);
    gap: 12px;
    align-items: center;
    padding: 12px;
    border-top-width: 1px;
}
.entry-card.compact .eyebrow { margin: 0; letter-spacing: .06em; }
.entry-card.compact h3 { margin: 0; font-size: 15px; overflow-wrap: anywhere; }
.entry-card.compact p { display: none; }
.entry-card.compact.matching p {
    display: block;
    grid-column: 1 / -1;
    order: 1;
    margin: 0;
    font: 13px/1.55 system-ui;
}
.entry-card.compact .card-foot { margin: 0; padding: 0; border: 0; overflow-wrap: anywhere; }
.library-embedded { display: block; container-type: inline-size; container-name: embedded-library; }
.library-embedded .library-aside { display: flex; flex-wrap: nowrap; overflow-x: auto; max-width: 100%; width: 100%; gap: 4px; padding: 2px 2px 6px; min-height: 0; border: 0; background: transparent; }
.library-embedded .library-aside .eyebrow { display: none; }
.library-embedded .kind-filter { flex: 0 0 auto; width: auto; max-width: 100%; white-space: nowrap; gap: 6px; font-size: 12px; padding: 8px; }
.library-embedded .library-main { padding: 0; }
.library-embedded .section-heading { flex-wrap: wrap; gap: 8px; }
.library-embedded h1 { font-size: 22px; }
.library-embedded .library-filters { flex-wrap: wrap; }
.library-embedded .entry-card.compact { grid-template-columns: minmax(0, 1fr); gap: 5px; }
.library-embedded .entry-grid .cards { grid-template-columns: minmax(0, 1fr); }

@container embedded-library (max-width: 639px) {
    .library-embedded .section-heading { flex-wrap: nowrap; gap: 8px; margin-bottom: 10px; }
    .library-embedded .section-heading > div { flex: 1; min-width: 0; }
    .library-embedded .section-heading .eyebrow { display: none; }
    .library-embedded .section-heading h1 { font-size: 18px; line-height: 1.25; }
    .library-embedded #new-entry { flex-shrink: 0; padding: 7px 9px; font-size: 12px; }
    .library-embedded .material-scope-toolbar { gap: 6px; margin-bottom: 8px; }
    .library-embedded .material-scope-toolbar > label { flex: 1 1 140px; }
    .library-embedded .material-scope-actions button { padding: 7px 8px; }
    .library-embedded .material-scope-hint { margin: 0 0 8px; line-height: 1.4; }
    .library-embedded .library-filters { gap: 6px; margin-bottom: 8px; }
    .library-embedded .library-filters input { flex: 1 1 140px; min-width: 0; min-height: var(--control-height); }
    .library-embedded .library-filters select { flex: 0 1 135px; min-width: 0; max-width: 135px; min-height: var(--control-height); padding: 7px 9px; font-size: 13px; }
    .library-embedded .library-extra-controls[open] > summary { display: list-item; }
    .library-embedded .library-extra-controls[open] > .library-view-controls { margin-top: 8px; }
    .library-embedded .library-view-controls { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
    .library-embedded .library-view-controls label { min-width: 0; }
    .library-embedded .library-view-controls select { min-width: 0; width: 100%; min-height: var(--control-height); padding: 7px 6px; font-size: 12px; }
    .library-embedded .library-results-count { margin: 0 0 8px; }
}

@container embedded-library (min-width: 640px) {
    .library-embedded .entry-card.compact {
        grid-template-columns: 120px minmax(0, 2fr) minmax(110px, 1fr);
        gap: 8px;
        padding: 8px 10px;
        min-height: calc(var(--control-height) + 4px);
    }
    .library-embedded .entry-card.compact .eyebrow,
    .library-embedded .entry-card.compact h3,
    .library-embedded .entry-card.compact .card-foot {
        min-width: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .library-embedded .entry-card.compact h3 { font-size: 14px; }
    .library-embedded .entry-list-mode .library-archive { min-height: calc(var(--control-height) + 4px); }
}

@media (max-width: 1100px) {
    .map-bar .map-nav { display: none; }
}

@media (max-width: 740px) {
    :root { --control-height: 44px; }
    .app-top { height: auto; min-height: 96px; align-content: center; }
    .workspace { height: auto; }
    .campaign-home { inset: auto; }
    .canvas-wrap { padding: 10px; }
    .map-tools, .editor-toolbar, .map-library, .measure-panel { top: auto; left: auto; max-width: 100%; }
    .map-tools button { min-width: var(--control-height); min-height: var(--control-height); width: auto; font-size: 17px; }
    .map-tools #grid-settings { font-size: 12px; }
    .map-tools #base-layer { font-size: 12px !important; }
    .app-top .top-right { gap: 4px; }
    .top-right #settings { display: inline-flex; }
    .top-right #export { padding: 8px; }
    .module-links a { max-width: 100px; min-height: var(--control-height); display: inline-flex; align-items: center; }
    .top-links a { min-height: var(--control-height); display: inline-flex; align-items: center; }
    .map-bar select { max-width: none; min-height: var(--control-height); }
    .map-bar #campaign-home-button, .map-bar #world-map,
    .map-bar #add-map, .map-bar #place-from-library { font-size: 12px; }
    .inspector-toggle { max-width: calc(100% - 24px); font-size: 12px; }
    .map-bottom { font-size: 12px; padding: 7px 10px; }
    .canvas-hint { font-size: 12px; max-width: calc(100% - 160px); }
    .mini-map .mini-heading { font-size: 12px; letter-spacing: .04em; }
    .entry-card.compact { grid-template-columns: minmax(0, 1fr); gap: 5px; }
    .library-extra-controls[open] > summary { display: list-item; }
    .library-extra-controls[open] > .library-view-controls { margin-top: 8px; }
    .tool-nav button { font-size: 12px; }
}
@media (pointer: coarse) {
    :root { --control-height: 44px; }
    .check { min-height: 44px; }
    select { min-height: 44px; }
}
@media print {
    #app:has(> .workspace) { display: block; height: auto; overflow: visible; }
    .workspace { height: auto; }
}

/* Marker authoring and grouped atlas tools share the existing chrome tokens. */
.action-icon { display: block; width: 20px; height: 20px; flex-shrink: 0; }
.map-tools button:has(.action-icon) { gap: 5px; padding: 6px 8px; font-size: 12px; }
.map-tools [data-tooltip] { position: static; }
.map-tools [data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 1;
    width: max-content;
    max-width: min(280px, calc(100vw - 28px));
    box-sizing: border-box;
    padding: 7px 9px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--chrome-surface);
    color: var(--chrome-text);
    box-shadow: var(--shadow);
    font: 12px/1.4 system-ui;
    text-align: left;
    white-space: normal;
    overflow-wrap: anywhere;
    pointer-events: none;
    visibility: hidden;
}
.map-tools [data-tooltip]:focus-visible::after { visibility: visible; }
.map-tools:has([data-tooltip]:focus-visible) { z-index: 19; }
@media (hover: hover) {
    .map-tools:not(:has([data-tooltip]:focus-visible)) [data-tooltip]:hover::after { visibility: visible; }
    .map-tools:has([data-tooltip]:hover) { z-index: 19; }
}
.editor-toolbar .action-icon { width: 18px; height: 18px; }
.editor-tool-selection, .editor-tool-history { display: flex; flex-wrap: wrap; align-items: center; gap: 3px; min-width: 0; }
.map-tool-group { display: flex; flex-wrap: wrap; align-items: center; gap: 3px; min-width: 0; }
.map-tools-navigation { min-width: 0; max-width: 100%; }
.map-tools-navigation > summary {
    min-height: max(44px, var(--control-height));
    padding: 9px 10px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--paper);
    color: var(--chrome-text);
    font-size: 12px;
    font-weight: 600;
    list-style-position: inside;
    cursor: pointer;
}
.map-tools-navigation > summary::marker { color: var(--chrome-accent); }
.map-tools-navigation[open] > summary { display: none; }
.map-tools-navigation > .map-tool-group { max-width: 100%; }
#map-canvas svg[data-label-mode="context"] .marker.important .label-container { display: initial; }
.marker-editor { min-width: 0; }
.marker-preview { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; padding: 12px; margin-bottom: 12px; border: 1px solid var(--line); border-radius: 6px; background: var(--soft); }
.marker-preview > svg { display: block; overflow: visible; flex-shrink: 0; }
.marker-preview > div { min-width: 0; }
.marker-preview > span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.marker-preview small { display: block; font-size: 12px; color: var(--muted); }
.marker-style-actions { display: flex; flex-wrap: wrap; align-items: end; gap: 8px; margin: 12px 0; }
.marker-style-actions > label { flex: 1 1 180px; min-width: 0; }
.marker-style-actions button { max-width: 100%; padding: 7px 10px; font-size: 12px; }
.marker-style-row { display: flex; flex-wrap: wrap; align-items: end; gap: 8px; padding: 12px; border: 1px solid var(--line); border-radius: 6px; background: var(--soft); }
.marker-style-row > .marker-icon, .marker-style-row > .marker-icon-text { align-self: center; }
.marker-style-row > label { flex: 1 1 160px; min-width: 0; }
.marker-style-row button { max-width: 100%; padding: 7px 9px; font-size: 12px; }
.marker-properties-basic { min-width: 0; }
.marker-editor details { margin: 12px 0; }
.marker-editor details > summary { min-height: var(--control-height); cursor: pointer; font-size: 13px; font-weight: 600; padding: 8px 0; }
.marker-editor details > .grid2 { margin-top: 10px; }
.marker-picker { min-width: 0; }
.marker-picker-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.marker-picker-current { display: flex; align-items: center; gap: 10px; min-width: 0; }
.marker-picker-current > div { min-width: 0; }
.marker-picker-current b { display: block; font-size: 13px; }
.marker-picker-current small { display: block; font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
.marker-icon { display: block; width: 28px; height: 28px; flex-shrink: 0; }
.marker-picker-current > .marker-icon { width: 36px; height: 36px; color: var(--chrome-accent); }
.marker-icon-text { display: inline-grid; place-items: center; min-width: 28px; max-width: 64px; font-weight: 700; overflow-wrap: anywhere; }
.marker-picker-controls { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; gap: 8px; }
.marker-picker-controls label, .marker-picker-controls input, .marker-picker-controls select { min-width: 0; }
.marker-picker-controls input, .marker-picker-controls select { width: 100%; min-height: var(--control-height); font-size: 13px; padding: 7px 9px; }
.marker-icon-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 6px; max-height: 320px; padding: 3px; overflow: auto; scrollbar-gutter: stable; }
.marker-icon-option { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-width: 0; min-height: 76px; padding: 8px; background: var(--paper); color: var(--chrome-text); border-color: var(--line); font-size: 12px; text-align: center; }
.marker-icon-option > span { max-width: 100%; overflow-wrap: anywhere; }
.marker-icon-option[aria-pressed="true"] { background: var(--soft); border-color: var(--chrome-accent); outline: 1px solid var(--chrome-accent); outline-offset: -2px; }
.marker-icon-option[aria-pressed="true"]::after { content: '✓'; position: absolute; top: 3px; right: 5px; font-size: 14px; font-weight: 700; color: var(--chrome-accent); }
.marker-icon-option:focus-visible { outline: 3px solid var(--chrome-accent); outline-offset: 0; }
.marker-auto { flex-direction: row; justify-content: start; min-height: var(--control-height); width: 100%; padding: 7px 9px; margin: 8px 0; }
.marker-picker-status, .marker-picker-hint { margin: 8px 0 0; font-size: 12px; color: var(--muted); }
.marker-picker-avatar { flex-shrink: 0; }
.avatar-thumbnail { display: inline-block; vertical-align: middle; border-radius: 50%; aspect-ratio: 1; object-fit: cover; flex-shrink: 0; border: 1px solid var(--line); background: var(--soft); }
.entry-avatar { position: relative; display: inline-grid; place-items: center; flex-shrink: 0; width: var(--avatar-size, 32px); height: var(--avatar-size, 32px); border-radius: 50%; overflow: hidden; background: var(--soft); }
.entry-avatar > .avatar-thumbnail { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; }
.entry-avatar > .avatar-fallback { display: inline-grid; place-items: center; width: var(--avatar-size, 32px); height: var(--avatar-size, 32px); border: 1px solid var(--line); border-radius: 50%; background: var(--soft); color: var(--chrome-text); font-size: 12px; font-weight: 700; }
.entry-avatar > .avatar-fallback .action-icon, .entry-avatar > .avatar-fallback .marker-icon { width: 20px; height: 20px; }
.avatar-preview { display: block; max-width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 50%; border: 1px solid var(--line); background: var(--soft); }
#avatar-fields { min-width: 0; }
#avatar-fields > p { margin: 0; }
#avatar-fields > label { min-width: 0; }
#avatar-fields input[type="file"] { min-width: 0; width: 100%; }
.avatar-preview-wrap { min-width: 0; }
#avatar-preview-status { margin: 8px 0 0; color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
.avatar-crop-controls { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.avatar-crop-controls input[type="range"] { width: 100%; min-width: 0; min-height: var(--control-height); padding: 0; accent-color: var(--chrome-accent); }
#avatar-crop-values { font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
@media (min-width: 741px) {
    #avatar-fields { display: grid; grid-template-columns: 256px minmax(0, 1fr); gap: 14px 20px; }
    #avatar-fields > p { grid-column: 1 / -1; }
    #avatar-fields > label { margin: 0; }
    .avatar-preview-wrap { grid-column: 1; }
    .avatar-crop-controls { grid-column: 2; align-self: start; }
}
@media (max-width: 740px) {
    #avatar-fields { display: flex; flex-direction: column; gap: 14px; }
    #avatar-fields > label { margin: 0; }
    .avatar-preview-wrap { align-self: center; max-width: 100%; }
}
.has-avatar > .avatar-thumbnail, .has-avatar > .entry-avatar { align-self: start; }
.entry-card.compact.has-avatar { position: relative; padding-left: 54px; }
.entry-card.compact.has-avatar > .entry-avatar { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); }
.entry-card.compact.matching.has-avatar > .entry-avatar { top: 8px; transform: none; }
.entry-card.has-avatar:not(.compact) > .entry-avatar { margin-bottom: 8px; }
.reading h1.has-avatar, .material-heading, .npc-identity { display: flex; align-items: center; gap: 12px; min-width: 0; }
.reading h1.has-avatar > span { flex-shrink: 0; }
.material-heading > span:not(.entry-avatar), .npc-identity > span:not(.entry-avatar) { min-width: 0; overflow-wrap: anywhere; }
.search-hit.has-avatar { display: grid; grid-template-columns: 32px minmax(0, 1fr); column-gap: 10px; }
.search-hit.has-avatar > .avatar-thumbnail, .search-hit.has-avatar > .entry-avatar { grid-column: 1; grid-row: 1 / span 3; }
.search-hit.has-avatar > :not(.avatar-thumbnail):not(.entry-avatar) { grid-column: 2; min-width: 0; }
.map-legend-list { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.map-legend-row { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); min-width: 0; }
.map-legend-row > div { min-width: 0; }
.map-legend-row small { display: block; font-size: 12px; color: var(--muted); }
.legend-symbol { display: inline-grid; place-items: center; flex: 0 0 40px; width: 40px; height: 40px; }
.legend-symbol svg { display: block; width: 32px; height: 32px; }
.legend-status { color: var(--muted); font-size: 12px; }
.legend-status b { color: var(--chrome-text); }
@media (max-width: 740px) {
    /* Each mobile row keeps its touch targets; overflow stays inside that row. */
    .map-tools { display: grid; grid-template-columns: minmax(0, 1fr); width: 100%; gap: 2px; padding: 2px; }
    .map-tools > .map-tool-group,
    .editor-tool-selection, .editor-tool-history {
        flex-wrap: nowrap;
        width: 100%;
        max-width: 100%;
        height: var(--control-height);
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;
        overscroll-behavior-x: contain;
    }
    .map-tools > .map-tool-group::-webkit-scrollbar,
    .editor-tool-selection::-webkit-scrollbar,
    .editor-tool-history::-webkit-scrollbar { display: none; }
    .map-tools > .map-tool-group > button,
    .editor-tool-selection > button,
    .editor-tool-history > button,
    .editor-tool-history > .check { flex: 0 0 auto; white-space: nowrap; }
    .map-tools > .map-tool-group > button:focus-visible,
    .editor-tool-selection > button:focus-visible,
    .editor-tool-history > button:focus-visible,
    .editor-tool-history .check input:focus-visible { outline-offset: -2px; }
    .editor-toolbar { display: grid; grid-template-columns: minmax(0, 1fr); width: 100%; gap: 3px; padding: 4px; }
    .editor-toolbar .check { min-height: var(--control-height); margin: 0; padding: 0 6px; }
    .editor-toolbar button { min-height: var(--control-height); }
    .map-tools-navigation[open] > summary { display: list-item; }
    .map-tools-navigation { position: static; width: 100%; }
    .map-tools-navigation > summary { width: fit-content; max-width: 100%; }
    .map-tools-navigation[open] > .map-tool-group {
        position: absolute;
        top: calc(100% + 4px);
        left: 0;
        right: 0;
        width: 100%;
        margin: 0;
        padding: 6px;
        max-height: min(240px, 36dvh);
        overflow-y: auto;
        border: 1px solid var(--line);
        border-radius: 6px;
        background: var(--chrome-surface);
        color: var(--chrome-text);
        box-shadow: var(--shadow);
    }
    .map-tools:has(.map-tools-navigation[open]) { z-index: 19; }
    .marker-icon-grid { max-height: min(300px, 35dvh); }
    .marker-icon-option { min-height: 80px; }
    .marker-auto { min-height: var(--control-height); }
    .marker-preview { padding: 10px; gap: 8px; }
    .marker-properties-basic.grid2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .marker-properties-basic input[type="color"] { min-height: var(--control-height); }
}

/* Prepared events: choose and read beside the map, then explicitly use a copy. */
.map-session-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 3px; min-width: 0; max-width: 100%; }
.map-session-tools > #prepared-events { flex-shrink: 0; }
.prepared-events-dialog.modal.wide { width: min(1080px, calc(100vw - 36px)); }
.prepared-events-dialog .modal-body, .prepared-episode-dialog .modal-body { min-width: 0; min-height: 0; }
.prepared-events-dialog footer { flex-wrap: wrap; }
.prepared-events-dialog footer button { max-width: 100%; white-space: normal; }
.prepared-event-filters {
    display: grid;
    grid-template-columns: minmax(160px, 1.2fr) minmax(100px, .6fr) minmax(150px, 1fr) minmax(180px, 1.4fr) minmax(120px, .8fr);
    gap: 10px;
    min-width: 0;
}
.prepared-event-filters > label, .prepared-event-filters input, .prepared-event-filters select { min-width: 0; width: 100%; }
.prepared-event-filters input, .prepared-event-filters select { min-height: var(--control-height); font-size: 13px; padding: 7px 9px; }
.prepared-event-tools.row { margin: 0; gap: 6px; }
.prepared-event-tools button { max-width: 100%; font-size: 13px; padding: 7px 10px; white-space: normal; }
#event-status, #event-count { margin: 0; font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }
.prepared-event-workspace { display: grid; grid-template-columns: minmax(240px, .85fr) minmax(0, 1.15fr); gap: 18px; min-width: 0; }
.prepared-event-catalog { min-width: 0; }
#prepared-event-list { display: flex; flex-direction: column; gap: 6px; min-width: 0; max-height: min(440px, 48dvh); overflow-y: auto; padding: 3px; scrollbar-gutter: stable; }
.prepared-event-choice { position: relative; display: flex; flex-direction: column; align-items: stretch; gap: 4px; width: 100%; min-width: 0; min-height: var(--control-height); padding: 10px; text-align: left; color: var(--chrome-text); background: var(--paper); border-color: var(--line); }
.prepared-event-choice > b { font-size: 14px; line-height: 1.35; overflow-wrap: anywhere; }
.prepared-event-choice > span { font-size: 13px; line-height: 1.5; font-weight: 400; overflow-wrap: anywhere; }
.prepared-event-choice > small { font-size: 12px; line-height: 1.45; font-weight: 400; color: var(--muted); overflow-wrap: anywhere; }
.prepared-event-choice.event-unavailable { border-style: dashed; }
.prepared-event-choice[aria-pressed="true"] { border-color: var(--chrome-accent); outline: 1px solid var(--chrome-accent); outline-offset: -2px; background: var(--soft); padding-right: 28px; }
.prepared-event-choice[aria-pressed="true"]::after { content: '✓'; position: absolute; top: 8px; right: 8px; font-size: 14px; font-weight: 700; color: var(--chrome-accent); }
.prepared-event-choice:focus-visible { outline: 3px solid var(--chrome-accent); outline-offset: 0; }
#prepared-event-preview { min-width: 0; scroll-margin-top: 12px; padding: 12px; border: 1px solid var(--line); border-radius: 6px; background: var(--paper); overflow-wrap: anywhere; }
#prepared-event-preview h3 { margin: 6px 0 12px; font-size: 21px; line-height: 1.25; }
#prepared-event-preview .lead { font: 15px/1.6 system-ui; color: var(--chrome-muted); }
.prepared-events-dialog .prose, .prepared-episode-dialog .prose { font-size: 16px; line-height: 1.65; }
.prepared-events-dialog .prose img, .prepared-episode-dialog .prose img { max-width: 100%; height: auto; }
.prepared-events-dialog .prose table, .prepared-episode-dialog .prose table { font-size: 13px; }
.prepared-events-dialog .event-preview-actions { gap: 6px; margin: 12px 0; }
.prepared-events-dialog .event-preview-actions button { max-width: 100%; font-size: 12px; padding: 7px 9px; white-space: normal; }
.prepared-events-dialog .event-preview-actions .event-back-catalog { display: none; }
.prepared-events-dialog details > summary, .prepared-episode-dialog details > summary,
.event-history > summary, .event-options > summary {
    min-height: var(--control-height);
    padding: 8px 0;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.5;
    color: var(--chrome-text);
    cursor: pointer;
    overflow-wrap: anywhere;
}
.event-adaptation, .event-template-details, .prepared-event-current { margin-top: 12px; border-top: 1px solid var(--line); }
.event-adaptation > label, .prepared-episode-dialog details > label { min-width: 0; margin: 10px 0; }
.prepared-events-dialog input, .prepared-events-dialog textarea, .prepared-episode-dialog input, .prepared-episode-dialog textarea { min-width: 0; font-size: 14px; }
.prepared-events-dialog .event-availability { margin: 12px 0; }
.prepared-events-dialog .event-source-conflict { margin: 12px 0; font-size: 13px; }
.context-events { min-width: 0; margin-top: 20px; padding-top: 12px; border-top: 1px solid var(--line); }
.panel-event-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.panel-event-heading h2, #inspector-body .panel-event-heading h2 { margin: 0; }
.panel-event-heading button { max-width: 100%; font-size: 12px; padding: 7px 9px; }
.context-events .event-plan, .prepared-events-dialog .event-plan { min-width: 0; padding: 10px; background: var(--soft); color: var(--chrome-text); border-color: var(--line); }
.event-plan-heading { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
button.event-episode-title { flex: 1 1 160px; min-width: 0; max-width: 100%; padding: 0; border: 0; background: transparent; color: var(--chrome-text); font-size: 14px; line-height: 1.4; text-align: left; justify-content: start; white-space: normal; overflow-wrap: anywhere; }
.event-status-label { font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
.event-plan-actions.row { gap: 6px; margin: 8px 0 0; min-width: 0; }
.event-plan-actions select { flex: 1 1 130px; min-width: 0; max-width: 100%; min-height: var(--control-height); padding: 7px 8px; font-size: 13px; }
.event-plan-actions button { max-width: 100%; font-size: 12px; padding: 7px 9px; white-space: normal; }
.event-plan .event-result { overflow-wrap: anywhere; }
.event-history { min-width: 0; margin-top: 12px; border-top: 1px solid var(--line); }
.event-history-list { min-width: 0; }
.event-sets-toolbar.row { align-items: end; gap: 8px; margin: 0; min-width: 0; }
.event-sets-toolbar > label { flex: 1 1 180px; min-width: 0; }
.event-sets-toolbar button { max-width: 100%; white-space: normal; font-size: 12px; padding: 7px 9px; }
.event-set-list { display: flex; flex-direction: column; gap: 6px; min-width: 0; max-height: min(320px, 40dvh); overflow-y: auto; padding: 3px; scrollbar-gutter: stable; }
.event-set-item.check { align-items: start; gap: 10px; min-height: var(--control-height); margin: 0; padding: 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--soft); cursor: pointer; }
.event-set-item > input { flex-shrink: 0; margin-top: 3px; }
.event-set-item > span { flex: 1; min-width: 0; }
.event-set-item strong { display: block; font-size: 14px; line-height: 1.4; color: var(--chrome-text); overflow-wrap: anywhere; }
.event-set-item .hint { display: block; margin: 4px 0 0; font-size: 12px; line-height: 1.45; overflow-wrap: anywhere; }
.event-set-conflict { min-width: 0; padding: 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--soft); }
.event-set-conflict .row { margin: 10px 0 0; gap: 6px; }
.event-set-conflict button { max-width: 100%; white-space: normal; }
.event-set-remote { overflow-wrap: anywhere; }
.event-set-remote > summary { min-height: var(--control-height); padding: 8px 0; cursor: pointer; }
.event-options { margin: 12px 0; min-width: 0; }
.event-options input[name="eventWeight"] { width: min(180px, 100%); min-height: var(--control-height); }
.event-options .check { min-height: var(--control-height); margin: 0; }
@media (max-width: 900px) {
    .prepared-event-filters { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .prepared-event-filters > label:first-child { grid-column: span 2; }
}
@media (max-width: 740px) {
    .map-tools > .map-session-tools { flex-wrap: nowrap; width: 100%; height: var(--control-height); gap: 4px; }
    .prepared-events-dialog .event-preview-actions .event-back-catalog { display: inline-flex; }
    .map-session-tools > .map-tools-navigation { flex: 1 1 auto; min-width: 0; width: auto; }
    .map-session-tools > .map-tools-navigation > summary { white-space: nowrap; font-size: 12px; padding: 9px 8px; }
    .prepared-events-dialog .modal-body { gap: 10px; }
    .prepared-event-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .prepared-event-filters > label:first-child { grid-column: 1 / -1; }
    .prepared-event-filters input, .prepared-event-filters select { min-height: var(--control-height); }
    .prepared-events-dialog input:not([type="checkbox"]), .prepared-episode-dialog input:not([type="checkbox"]), .event-sets-dialog input:not([type="checkbox"]), .event-sets-dialog select { min-height: var(--control-height); }
    .prepared-event-tools button { flex: 1 1 130px; min-height: var(--control-height); font-size: 12px; }
    .prepared-event-workspace { grid-template-columns: minmax(0, 1fr); gap: 12px; }
    #prepared-event-list { max-height: min(220px, 26dvh); }
    #prepared-event-preview { padding: 10px; }
    #prepared-event-preview h3 { font-size: 19px; }
    .prepared-events-dialog footer { gap: 6px; padding: 12px; }
    .prepared-events-dialog footer button { min-height: var(--control-height); padding: 8px 9px; font-size: 12px; }
    .prepared-events-dialog #event-assign { flex: 1 1 150px; }
    .event-set-list { max-height: min(280px, 34dvh); }
    .event-options .grid2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
}

/* Ambient: shared local media and one player that stays beside the workspace. */
.map-session-tools > #ambient-library { flex-shrink: 0; }
.location-ambient { min-width: 0; margin-top: 20px; padding-top: 12px; border-top: 1px solid var(--line); }
.location-ambient-list { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.location-ambient-track { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--soft); }
.location-ambient-track > div { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.location-ambient-track b { display: block; font-size: 14px; line-height: 1.45; }
.location-ambient-track .hint { display: block; margin: 3px 0 0; font-size: 12px; }
.location-ambient-track button { flex-shrink: 0; min-height: var(--control-height); font-size: 13px; }
.ambient-library-dialog .modal-body { min-width: 0; gap: 10px; }
.ambient-library-dialog .modal-body > p { margin: 0; }
.ambient-library-dialog #ambient-library-status:empty { display: none; }
.ambient-library-dialog footer { flex-wrap: wrap; }
.ambient-library-tools { align-items: center; gap: 8px; margin: 0; }
.ambient-library-tools > label { flex: 1 1 230px; min-width: 0; margin: 0; }
.ambient-library-tools input[type="file"] { flex: none; width: 100%; min-width: 0; max-width: 100%; font-size: 13px; }
.ambient-library-tools button { white-space: normal; min-height: var(--control-height); }
.ambient-library-search input { min-width: 0; width: 100%; min-height: var(--control-height); }
.ambient-library-search > label { margin: 0; }
.ambient-library-summary { font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }
.ambient-track-list { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.ambient-track-row { min-width: 0; padding: 12px; border: 1px solid var(--line); border-radius: 6px; background: var(--paper); }
.ambient-track-row > .check { align-items: start; gap: 10px; margin: 0; min-height: var(--control-height); cursor: pointer; }
.ambient-track-row > .check > input { flex-shrink: 0; margin-top: 5px; }
.ambient-track-info { min-width: 0; overflow-wrap: anywhere; }
.ambient-track-info strong, .ambient-track-info b { font-size: 15px; line-height: 1.5; }
.ambient-track-info p { margin: 5px 0; font-size: 14px; line-height: 1.6; }
.ambient-track-info .hint, .ambient-track-info small { font-size: 12px; line-height: 1.5; }
.ambient-track-actions { flex-wrap: wrap; gap: 6px; margin: 10px 0 0; }
.ambient-track-actions button { min-height: var(--control-height); max-width: 100%; font-size: 13px; white-space: normal; }
.ambient-association-conflict { padding: 12px; border: 1px solid var(--line); border-radius: 6px; background: var(--soft); }
.ambient-association-conflict button { white-space: normal; max-width: 100%; }
.ambient-library-playback.row { flex: 1 1 260px; min-width: 0; gap: 8px; margin: 0; }
.ambient-library-playback > span { flex: 1 1 140px; min-width: 0; margin: 0; overflow-wrap: anywhere; }
.ambient-properties-conflict { padding: 12px; border: 1px solid var(--line); background: var(--soft); border-radius: 6px; }
.ambient-properties-conflict button { white-space: normal; }
.ambient-properties-dialog footer { flex-wrap: wrap; }
.ambient-player-bar { position: fixed; inset: auto 0 0; z-index: 35; display: flex; align-items: center; gap: 14px; padding: 10px 14px; min-height: 76px; border-top: 1px solid var(--line); background: var(--chrome-surface); color: var(--chrome-text); box-shadow: var(--shadow); }
.ambient-player-bar[hidden] { display: none; }
.ambient-player-info { flex: 1 1 180px; min-width: 0; }
.ambient-player-title { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; line-height: 1.45; }
.ambient-player-status { display: block; margin: 3px 0 0; font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }
.ambient-player-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.ambient-player-controls button { min-height: 44px; min-width: 60px; padding: 8px 10px; font-size: 13px; }
.ambient-player-volume { display: grid; grid-template-columns: minmax(0, 1fr) auto; width: 116px; min-height: 44px; margin: 0; font-size: 12px; line-height: 1.4; }
.ambient-player-volume > span { grid-column: 1; grid-row: 1; }
.ambient-player-volume > output { grid-column: 2; grid-row: 1; }
.ambient-player-volume input[type="range"] { grid-column: 1 / -1; grid-row: 2; width: 100%; min-width: 0; min-height: 28px; margin: 0; padding: 0; accent-color: var(--chrome-accent); }
.ambient-player-loop { display: flex; gap: 6px; align-items: center; min-height: 44px; margin: 0; font-size: 12px; cursor: pointer; }
.ambient-player-loop input { margin: 0; width: auto; accent-color: var(--chrome-accent); }
body:has(#ambient-player:not([hidden])) { padding-bottom: var(--ambient-bar-height, 76px); }
body:has(#ambient-player:not([hidden])) #app:has(> .workspace) { height: calc(100dvh - var(--ambient-bar-height, 76px)); }
body:has(#ambient-player:not([hidden])) .toast { bottom: calc(var(--ambient-bar-height, 76px) + 12px); }
@media (max-width: 740px) {
    .map-session-tools > #prepared-events, .map-session-tools > #ambient-library { padding: 7px 6px; gap: 4px; font-size: 12px; }
    .map-session-tools > .map-tools-navigation > summary { padding: 9px 5px; }
    .ambient-library-dialog input:not([type="checkbox"]), .ambient-library-dialog select, .ambient-properties-dialog input { min-height: var(--control-height); }
    .ambient-library-tools button { flex: 1 1 140px; }
    .ambient-library-dialog footer button { min-height: var(--control-height); white-space: normal; }
    .ambient-library-playback.row { flex-basis: 100%; }
    .ambient-track-actions button { flex: 1 1 80px; }
    .ambient-player-bar { flex-direction: column; align-items: stretch; gap: 6px; padding: 8px 12px; min-height: 104px; }
    .ambient-player-info { flex: none; }
    .ambient-player-controls { justify-content: space-between; gap: 6px; }
    .ambient-player-controls button { min-width: 60px; padding: 8px; font-size: 12px; }
    .ambient-player-volume { width: 100px; }
    .ambient-player-volume input[type="range"] { min-height: 44px; }
    body:has(#ambient-player:not([hidden])) .inspector { bottom: var(--ambient-bar-height, 104px); max-height: calc(100dvh - var(--ambient-bar-height, 104px) - 145px); }
    body:has(#ambient-player:not([hidden])) .show-inspector .inspector-toggle { bottom: calc(62dvh + var(--ambient-bar-height, 104px) + 8px); }
}
@media print { #ambient-player { display: none; } body:has(#ambient-player:not([hidden])) { padding-bottom: 0; } body:has(#ambient-player:not([hidden])) #app:has(> .workspace) { height: auto; } }

/* Compact authoring controls; the original select retains all saved references. */
.searchable-select { position: relative; min-width: 0; }
.searchable-select > input { width: 100%; }
.selected-references { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 4px; }
.reference-chip { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; border: 1px solid var(--line); border-radius: 6px; padding: 2px 6px; font-size: 12px; background: var(--paper); overflow-wrap: anywhere; }
.reference-chip button { padding: 0 4px; min-width: 24px; min-height: 24px; border: 0; background: transparent; }
.reference-results { position: absolute; inset: auto 0 auto 0; z-index: 50; max-height: 230px; overflow: auto; padding: 4px; border: 1px solid var(--line); border-radius: 6px; background: var(--paper); box-shadow: 0 6px 18px #0003; }
.reference-results > button { display: block; width: 100%; text-align: left; border: 0; white-space: normal; }
.reference-results > button.active { background: var(--soft); }
.reference-count:empty { display: none; }
.custom-field-row { display: grid; grid-template-columns: minmax(110px,1fr) minmax(180px,2fr) auto; gap: 8px; align-items: start; margin: 10px 0; }
.custom-field-row > button { align-self: center; }
.entry-advanced { margin: 10px 0; }
.entry-advanced > summary { cursor: pointer; padding: 8px 0; }
.map-properties-menu { position: relative; flex-shrink: 0; }
.map-properties-menu > summary { list-style: none; cursor: pointer; border: 1px solid var(--line); border-radius: 5px; padding: 7px 10px; white-space: nowrap; }
.map-properties-actions { position: absolute; right: 0; top: calc(100% + 5px); z-index: 80; width: 250px; padding: 6px; display: grid; gap: 4px; background: var(--paper); border: 1px solid var(--line); box-shadow: 0 6px 18px #0003; border-radius: 6px; }
.map-properties-actions > button { text-align: left; }
#battle[hidden] { display: none !important; }
@media (max-width: 600px) { .custom-field-row { grid-template-columns: minmax(0,1fr) auto; } .custom-field-row > label:first-child { grid-column: 1 / -1; } .reference-results > button { min-height: 44px; } }
.editor-toolbar .editor-options-panel > button.primary { background: var(--green); color: white; } .map-bar:has(.map-properties-menu[open]) { z-index: 40; }

/* Campaign details stay close to the title; editing does not open the project card. */
.campaign-heading { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px 20px; }
.campaign-heading > div:first-child { flex: 1 1 520px; min-width: 0; }
.campaign-heading h1 { overflow-wrap: anywhere; }
.campaign-heading .campaign-description { margin: 8px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.campaign-heading-actions {
    display: flex; flex-wrap: wrap; align-items: center; flex: 0 1 auto;
    gap: 8px; max-width: 100%;
}
.campaign-heading-actions > button { margin: 0; max-width: 100%; white-space: normal; }
.project-card-shell { display: flex; flex-direction: column; gap: 0; min-width: 0; border: 1px solid var(--line); border-top: 3px solid #6e8d77; border-radius: 7px; overflow: hidden; background: var(--paper); }
.project-card-shell > .project-card { flex: 1 1 auto; min-width: 0; border: 0; border-radius: 0; margin: 0; }
.project-card-shell > .project-card:hover { transform: none; }
.project-card-shell > .project-card :is(h3, p) { overflow-wrap: anywhere; }
.project-card-shell > .project-card > p { white-space: pre-wrap; }
.project-card-actions { display: flex; flex-wrap: wrap; align-items: stretch; gap: 8px; padding: 10px 14px 14px; border-top: 1px solid var(--line); }
.project-card-actions > button { min-width: 0; min-height: 34px; margin: 0; padding: 7px 9px; font-size: 11px; white-space: normal; }
.project-card-actions > .project-edit-action {
    display: inline-flex; align-items: center;
    gap: 6px; width: auto; max-width: 100%; margin: 0;
    padding: 7px 9px; font-size: 11px; white-space: normal;
}
.campaign-details-editor footer [data-campaign-delete] { margin-inline-end: auto; }
/* Equal landing actions for both navigation links and command buttons. */
#project-actions { align-items: stretch; }
#project-actions > :is(button, .button) { min-height: 46px; padding: 13px 20px; }
#project-actions > .bestiary-launch { background: #efe2be; border-color: #c6aa6c; color: #694b20; }
#project-actions > .bestiary-launch:hover { background: #e7d49d; border-color: #aa8846; }
.night #project-actions > .bestiary-launch { background: #4b3b24; border-color: #9e7b43; color: #f2d691; }
.night #project-actions > .bestiary-launch:hover { background: #5c472a; border-color: #c5a05a; }
@media (max-width: 740px), (pointer: coarse) {
    .campaign-heading-actions > button, .project-card-actions > button { min-height: 44px; }
}
@media (max-width: 740px) {
    #project-actions > :is(button, .button) { flex: 1 1 145px; min-height: 44px; padding: 12px; }
}

/* The map remains the workspace; controls occupy its edges. */
.map-tools {
    position: absolute; top: 12px; right: 12px; left: auto;
    display: flex; flex-wrap: nowrap; align-items: flex-start; gap: 6px;
    width: auto; max-width: calc(100% - 86px); padding: 0;
    border: 0; background: transparent; box-shadow: none;
}
.map-tools > .map-tool-group, .map-tools > .map-session-tools {
    display: flex; flex-wrap: nowrap; align-items: center; gap: 3px;
    width: auto; height: auto; margin: 0; padding: 3px;
    border: 1px solid var(--line); border-radius: 7px;
    background: var(--chrome-surface); box-shadow: var(--shadow);
    overflow: visible;
}
.map-tools > button, .map-tools > .map-tool-menu > summary {
    background: var(--chrome-surface); border: 1px solid var(--line); box-shadow: var(--shadow);
}
.map-tools button:has(.action-icon), .map-tool-menu > summary {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; min-width: 40px; height: 44px; min-height: 44px;
    margin: 0; padding: 8px; border-radius: 5px; color: var(--chrome-text);
    font-size: 13px; cursor: pointer;
}
.map-tools > .map-session-tools > button > span { display: none; }
.map-tool-menu { position: relative; flex: 0 0 auto; min-width: 0; max-width: none; }
.map-tool-menu > summary { list-style: none; }
.map-tool-menu > summary::-webkit-details-marker { display: none; }
.map-tools .map-tool-menu[open] > summary { display: inline-flex; background: var(--soft); }
.map-tools .map-tool-menu > .map-tool-menu-panel {
    position: absolute; top: calc(100% + 6px); right: 0; left: auto;
    display: flex; flex-direction: column; align-items: stretch; flex-wrap: nowrap; gap: 4px;
    width: 248px; max-width: calc(100vw - 28px); max-height: min(430px, 52dvh);
    margin: 0; padding: 8px; border: 1px solid var(--line); border-radius: 7px;
    background: var(--chrome-surface); color: var(--chrome-text); box-shadow: var(--shadow);
    overflow-y: auto; overflow-x: hidden;
}
.map-tools .map-tool-menu:not([open]) > .map-tool-menu-panel { display: none; }
.map-tools .map-tool-menu-panel button:has(.action-icon) {
    width: 100%; height: auto; min-height: 44px; justify-content: flex-start;
    gap: 10px; padding: 8px 10px; text-align: left; white-space: normal;
}
.map-tools .map-tool-menu-panel button span { font-size: 13px; line-height: 1.4; }
.map-tools:has(.map-tool-menu[open]) { z-index: 22; }
.map-tools .map-session-tools > .map-tools-navigation { width: auto; flex: 0 0 auto; }
.map-tools .map-session-tools > .map-tools-navigation > summary { padding: 8px; }

.editor-toolbar {
    position: absolute; left: 12px; right: auto; top: 12px; z-index: 21;
    display: flex; flex-direction: column; gap: 4px; width: 54px; max-width: none;
    padding: 4px; border: 1px solid var(--line); border-radius: 7px;
    background: var(--chrome-surface); color: var(--chrome-text); box-shadow: var(--shadow);
    overflow: visible;
}
.editor-toolbar .editor-tool-selection, .editor-toolbar .editor-tool-history {
    display: flex; flex-direction: column; flex-wrap: nowrap; width: auto; height: auto;
    gap: 3px; overflow: visible;
}
.editor-toolbar .editor-tool-history { border-top: 1px solid var(--line); padding-top: 4px; }
.editor-toolbar .editor-tool-selection > button, .editor-options > summary {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; min-width: 44px; min-height: 44px; padding: 8px; margin: 0;
    border: 0; border-radius: 5px; background: transparent; color: var(--chrome-text);
    cursor: pointer;
}
.editor-toolbar .editor-tool-selection > button > span {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.editor-toolbar .editor-tool-selection > button.active { background: var(--chrome-accent); color: var(--chrome-surface); }
.editor-options { position: relative; }
.editor-options > summary { list-style: none; }
.editor-options > summary::-webkit-details-marker { display: none; }
.editor-options[open] > summary { background: var(--soft); }
.editor-options-panel {
    position: absolute; bottom: 0; left: calc(100% + 8px);
    display: flex; flex-direction: column; gap: 6px; width: 250px;
    max-width: calc(100vw - 84px); max-height: min(326px, 48dvh); overflow-y: auto;
    padding: 10px; background: var(--chrome-surface); border: 1px solid var(--line);
    border-radius: 7px; box-shadow: var(--shadow);
}
.editor-options:not([open]) > .editor-options-panel { display: none; }
.editor-toolbar .editor-options-panel > button {
    display: flex; align-items: center; justify-content: flex-start; gap: 10px;
    min-height: 44px; padding: 8px; font-size: 13px; text-align: left; white-space: normal;
}
.editor-toolbar .editor-options-panel .check { min-height: 44px; margin: 0; padding: 8px; font-size: 13px; }

/* The library docks beside the canvas; editor controls keep their own edge. */
.canvas-wrap:has(> .map-library:not([hidden])) { --map-tray-width: clamp(220px, 34%, 340px); }
.canvas-wrap:has(> .map-library:not([hidden])) > #map-canvas { right: calc(var(--map-tray-width) + 24px); }
.canvas-wrap:has(> .map-library:not([hidden])) > .map-tools {
    right: calc(var(--map-tray-width) + 36px); max-width: calc(100% - var(--map-tray-width) - 110px);
}
.canvas-wrap > .map-library {
    position: absolute; grid-column: auto; grid-row: auto;
    top: 12px; right: 12px; bottom: 46px; left: auto;
    width: var(--map-tray-width, 340px); height: calc(100% - 58px); max-width: calc(100% - 24px); max-height: calc(100% - 58px);
    align-self: stretch; min-height: 0;
    z-index: 24;
}
.canvas-wrap:has(> .map-library:not([hidden])) .mini-map { visibility: hidden; }
#map-canvas[data-tool="line"] svg { cursor: crosshair; }
#map-canvas .map-line { cursor: pointer; }

/* Card identity, reading content and utility actions share a compact hierarchy. */
#inspector-body > .inspector-card-header {
    display: grid; grid-template-columns: minmax(0, 1fr) auto;
    align-items: start; gap: 10px; margin: 0 0 10px; padding: 0;
    border: 0; background: transparent; container-type: inline-size; container-name: inspector-card;
}
#inspector-body .inspector-card-header h1 {
    display: flex; align-items: center; gap: 12px; min-width: 0;
    margin: 0 !important; font-size: 24px !important; font-weight: 650 !important;
    line-height: 1.2 !important; color: var(--chrome-text);
}
#inspector-body .inspector-card-header h1 > .entry-avatar {
    --avatar-size: 96px !important; align-self: start; box-shadow: 0 0 0 1px var(--line);
}
#inspector-body .inspector-card-header .avatar-fallback { font-size: 25px; }
.inspector-card-name { display: flex; flex-direction: column; gap: 6px; min-width: 0; overflow-wrap: anywhere; }
.inspector-card-name > span { display: block; }
#inspector-body .inspector-card-group {
    display: block; margin: 0; font: 400 12px/1.4 system-ui, sans-serif;
    letter-spacing: normal; color: var(--chrome-muted); overflow-wrap: anywhere;
}
#inspector-body .inspector-card-header .inspector-header-actions {
    display: flex; flex-flow: row nowrap; align-items: center; justify-content: flex-end;
    align-self: start; gap: 2px; width: auto; min-width: 0; margin: 0; padding: 0;
}
#inspector-body .inspector-header-actions > .inspector-external-link,
#inspector-body .inspector-header-actions > details > summary {
    display: inline-flex; align-items: center; justify-content: center; list-style: none;
    flex: 0 0 36px; width: 36px; height: 36px; min-width: 36px; min-height: 36px;
    margin: 0; padding: 8px; border: 1px solid transparent; border-radius: 6px;
    background: transparent; color: var(--chrome-muted); cursor: pointer; text-decoration: none;
}
#inspector-body .inspector-header-actions > .inspector-external-link:hover,
#inspector-body .inspector-header-actions > details > summary:hover,
#inspector-body .inspector-header-actions > details[open] > summary {
    background: var(--soft); border-color: var(--line); color: var(--chrome-text);
}
#inspector-body .inspector-header-actions .action-icon { width: 18px; height: 18px; }
.npc-action-menu, .inspector-action-menu { position: relative; }
.npc-action-menu > summary::-webkit-details-marker,
.inspector-action-menu > summary::-webkit-details-marker { display: none; }
.npc-action-menu-body, .inspector-action-menu-body, .inspector-action-menu > div {
    position: absolute; top: calc(100% + 6px); right: 0; z-index: 24;
    display: flex; flex-direction: column; align-items: stretch; gap: 6px;
    width: 265px; max-width: calc(100vw - 48px); max-height: min(420px, 48dvh);
    padding: 10px; overflow-y: auto; background: var(--chrome-surface);
    color: var(--chrome-text); border: 1px solid var(--line); border-radius: 7px; box-shadow: var(--shadow);
}
.npc-action-menu:not([open]) > .npc-action-menu-body,
.inspector-action-menu:not([open]) > div { display: none; }
.npc-action-menu-body > button, .npc-action-menu-body .material-actions > button,
.inspector-action-menu > div > button, .inspector-action-menu > div .material-actions > button {
    min-height: 44px; width: 100%; justify-content: flex-start; text-align: left;
    padding: 8px 10px; white-space: normal; font-size: 13px;
}
.npc-action-menu-body .material-actions, .inspector-action-menu > div .material-actions { display: flex; flex-direction: column; align-items: stretch; gap: 6px; margin: 0; }
.npc-action-menu-body .material-favorite, .inspector-action-menu > div .material-favorite { font-size: 13px; }
#inspector-body > article.prose.place-lore { margin: 12px 0 16px; padding: 0; border: 0; }
#inspector-body > .place-summary.lead { margin: 0 0 14px; }
#inspector-body > .inspector-secondary { margin: 16px 0; padding: 8px 0 0; border: 0; border-top: 1px solid var(--line); }
#inspector-body > .inspector-secondary > summary { min-height: 30px; padding: 4px 0; color: var(--chrome-muted); cursor: pointer; font-size: 12px; font-weight: 500; }
#inspector-body .inspector-secondary .field-list { grid-template-columns: minmax(0, 1fr); margin: 10px 0 0; gap: 12px; }
#inspector-body .inspector-secondary .field-list h3 { margin: 0 0 5px; font-size: 12px; }
#inspector-body .inspector-secondary figure { margin: 12px 0; }
#inspector-body button.inspector-image-open {
    position: relative; display: block; width: 100%; max-width: 100%; min-width: 0; min-height: 0;
    margin: 0; padding: 0; border: 0; border-radius: 6px; background: transparent;
    box-shadow: none; overflow: hidden; cursor: zoom-in;
}
#inspector-body button.inspector-image-open > img { display: block; width: 100%; max-width: 100%; height: auto; margin: 0; border: 0; border-radius: inherit; object-fit: contain; }
#inspector-body button.inspector-image-open > .inspector-image-zoom {
    position: absolute; right: 8px; bottom: 8px; display: grid; place-items: center;
    width: 25px; height: 25px; border: 1px solid var(--line); border-radius: 5px;
    background: var(--paper); color: var(--chrome-text); box-shadow: 0 1px 4px #0002;
    font: 18px/1 system-ui, sans-serif; opacity: .85; pointer-events: none;
}
#inspector-body .inspector-image-zoom .action-icon { width: 18px; height: 18px; }
#inspector-body button.inspector-image-open:hover > .inspector-image-zoom,
#inspector-body button.inspector-image-open:focus-visible > .inspector-image-zoom { opacity: 1; }
#inspector-body button.inspector-image-open:focus-visible { outline: 3px solid var(--chrome-accent); outline-offset: 3px; }
#inspector-body > .inspector-related { display: flex; flex-wrap: wrap; align-items: baseline; gap: 5px 12px; margin: 14px 0; font-size: 12px; }
#inspector-body > .inspector-related > a { display: inline-flex; align-items: baseline; gap: 5px; min-width: 0; max-width: 100%; padding: 3px 0; overflow-wrap: anywhere; }
#inspector-body > .inspector-related small { color: var(--chrome-muted); font-size: 11px; }

@container inspector-card (max-width: 330px) {
    #inspector-body .inspector-card-header h1 { gap: 10px; font-size: 22px !important; }
    #inspector-body .inspector-card-header h1 > .entry-avatar { --avatar-size: 80px !important; }
    #inspector-body .inspector-header-actions > .inspector-external-link,
    #inspector-body .inspector-header-actions > details > summary { flex-basis: 32px; width: 32px; height: 32px; min-width: 32px; min-height: 32px; padding: 6px; }
}

/* Reading aids stay on the canvas and leave its remaining surface interactive. */
.map-legend-overlay { position: absolute; left: 12px; bottom: 58px; z-index: 18; width: 290px; max-width: calc(100% - 24px); border: 1px solid var(--line); border-radius: 7px; background: color-mix(in srgb, var(--chrome-surface) 92%, transparent); color: var(--chrome-text); box-shadow: var(--shadow); backdrop-filter: blur(5px); }
.map-legend-overlay[hidden] { display: none; }
.is-editing .map-legend-overlay { left: 86px; }
.map-legend-overlay > summary { display: flex; align-items: center; gap: 9px; min-height: 44px; padding: 9px 48px 9px 12px; font-weight: 650; cursor: pointer; list-style: none; }
.map-legend-overlay > summary::-webkit-details-marker { display: none; }
.map-legend-overlay > summary::after { content: '▾'; margin-left: auto; }
.map-legend-overlay:not([open]) > summary::after { content: '▸'; }
.map-legend-overlay .legend-close { position: absolute; right: 0; top: 0; width: 44px; min-height: 44px; border: 0; background: transparent; padding: 6px; font-size: 20px; }
.map-legend-overlay .map-legend-body { padding: 0 12px 12px; max-height: min(350px, 42dvh); overflow-y: auto; overscroll-behavior: contain; }
.map-legend-overlay .map-legend-row { grid-template-columns: 32px minmax(0,1fr); gap: 9px; padding: 8px 0; }
.map-legend-overlay .legend-symbol { width: 32px; height: 32px; }
.map-legend-overlay .map-legend-row b { font-size: 13px; }
.map-legend-overlay .legend-status { font-size: 12px; line-height: 1.5; margin: 8px 0; }
.map-overlap-panel { position: absolute; top: 80px; right: 12px; z-index: 23; width: 310px; max-width: calc(100% - 24px); background: var(--chrome-surface); color: var(--chrome-text); border: 1px solid var(--line); border-radius: 7px; box-shadow: var(--shadow); }
.map-overlap-panel header { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-left: 12px; }
.map-overlap-panel header button { width: 44px; min-height: 44px; border: 0; background: transparent; font-size: 20px; }
.map-overlap-panel .overlap-choices { display: flex; flex-direction: column; gap: 4px; padding: 0 8px 8px; max-height: 45dvh; overflow-y: auto; }
.map-overlap-panel .object-choice { justify-content: flex-start; width: 100%; min-height: 48px; text-align: left; padding: 7px; gap: 10px; }
.map-overlap-panel .object-choice > span { min-width: 0; }
.map-overlap-panel .object-choice b { display: block; overflow-wrap: anywhere; }
.map-overlap-panel .object-choice small { display: block; color: var(--muted); font-weight: 400; }
.map-overlap-panel .choice-symbol { flex: 0 0 40px; }

.mini-map .mini-heading { align-items: center; gap: 6px; padding: 0 0 0 9px; }
.mini-map #mini-collapse { flex: 0 0 44px; width: 44px; min-height: 44px; padding: 9px; border: 0; border-radius: 0; background: transparent; color: inherit; }
.mini-map #mini-collapse .action-icon { width: 24px; height: 24px; }
.mini-map .mini-map-body { transition: opacity .16s ease; }
.mini-map .mini-map-body[hidden] { display: none; }
.mini-map.is-collapsed { width: 44px; height: 44px; }
.mini-map.is-collapsed .mini-heading { padding: 0; }
.mini-map.is-collapsed .mini-heading > span { display: none; }
@media (hover:hover) { .mini-map:not(.is-collapsed):hover:not(:focus-within) .mini-map-body { opacity: .2; } }
@media (prefers-reduced-motion:reduce) { .mini-map .mini-map-body { transition: none; } }

#inspector-body > .inspector-utility-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin: 0 0 12px; padding: 0; }
#inspector-body .operational-notes { position: static; flex: 0 1 auto; min-width: 0; max-width: 100%; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; color: var(--chrome-muted); box-shadow: none; }
#inspector-body .inspector-utility-strip > .operational-notes[open] { flex: 1 0 100%; }
.operational-notes > summary { display: flex; align-items: center; gap: 6px; min-height: 30px; padding: 4px 0; cursor: pointer; font-size: 12px; font-weight: 500; list-style: none; }
.operational-notes > summary .action-icon { width: 15px; height: 15px; }
.operational-notes > summary::-webkit-details-marker { display: none; }
.operational-notes > summary::after { content: '▸'; margin-left: 3px; font-size: 10px; }
.operational-notes[open] > summary::after { content: '▾'; }
.operational-notes[data-dirty="true"] > summary > span::after { content: ' · Черновик'; color: var(--gold); font-weight: 500; }
#inspector-body .operational-notes .operational-notes-body { padding: 10px 0 12px; max-height: none; overflow: visible; border-top: 1px solid var(--line); }
#inspector-body .operational-notes .note-block { padding: 0; margin: 0; border: 0; background: transparent; box-shadow: none; }
.operational-notes .note-block textarea { min-height: 90px; }
.operational-notes .map-runtime-notes { margin: 12px 0 0; }
.operational-notes .map-runtime-notes summary { min-height: 44px; }
.operational-notes .note-block input:not([type=checkbox]) { width: 100%; }
.operational-notes .note-block > button { margin-top: 8px; }
#inspector-body .inspector-utility-strip > .party-status-banner {
    display: inline-flex; flex: 0 1 auto; align-items: center; justify-content: flex-start; gap: 5px;
    width: auto; max-width: 100%; min-height: 30px; margin: 0; padding: 4px 0;
    border: 0; border-radius: 0; background: transparent; box-shadow: none; color: var(--chrome-muted);
    font-size: 12px; font-weight: 500; text-align: left;
}
#inspector-body .inspector-utility-strip > .party-status-banner .banner-badge { display: inline-flex; align-items: center; gap: 5px; color: inherit; font-size: 12px; font-weight: 500; overflow-wrap: anywhere; }
#inspector-body .inspector-utility-strip > .party-status-banner .banner-note { display: none; }
#inspector-body .inspector-utility-strip > .party-status-banner.here { color: var(--chrome-accent); }
#inspector-body .inspector-utility-strip > button.party-status-banner:hover { color: var(--chrome-accent); text-decoration: underline; text-underline-offset: 3px; }
#inspector-body .inspector-utility-strip .party-status-banner .action-icon { width: 15px; height: 15px; }

@media (max-width: 740px) {
    .map-tools { top: 10px; left: 10px; right: 10px; width: auto; max-width: none; gap: 3px; }
    .map-tools > .map-tool-group, .map-tools > .map-session-tools { gap: 0; padding: 0; flex: 0 0 auto; height: auto; }
    .map-tools button:has(.action-icon), .map-tool-menu > summary { width: 44px; min-width: 44px; min-height: 44px; padding: 8px; }
    .map-tools > .map-session-tools { flex: 1 1 auto; justify-content: space-between; }
    .map-tools .map-tool-menu > .map-tool-menu-panel { position: fixed; top: calc(var(--topbar-h, 110px) + 116px); right: 10px; left: auto; max-height: 42dvh; width: 260px; }
    .editor-toolbar { top: 66px; left: 10px; right: 10px; width: auto; max-width: none; flex-direction: row; flex-wrap: nowrap; gap: 4px; }
    .editor-toolbar .editor-tool-selection { flex: 1 1 auto; flex-direction: row; gap: 2px; min-width: 0; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
    .editor-toolbar .editor-tool-history { flex: 0 0 44px; flex-direction: row; border-top: 0; border-left: 1px solid var(--line); padding: 0 0 0 4px; }
    .editor-options-panel { left: auto; right: 0; bottom: auto; top: calc(100% + 6px); max-width: calc(100vw - 32px); max-height: 40dvh; }
    .canvas-wrap:has(> .map-library:not([hidden])) { --map-tray-height: min(360px, 65%); }
    .canvas-wrap:has(> .map-library:not([hidden])) > #map-canvas { right: 0; bottom: calc(var(--map-tray-height) + 22px); }
    .canvas-wrap:has(> .map-library:not([hidden])) > .map-tools { right: 10px; max-width: none; }
    .canvas-wrap > .map-library {
        top: auto; right: 10px; bottom: 10px; left: 10px; width: auto;
        height: var(--map-tray-height, 65%); max-width: none; max-height: var(--map-tray-height, 65%);
    }
    .canvas-wrap > .map-library header { padding: 8px 10px; }
    .canvas-wrap > .map-library header small { display: none; }
    .canvas-wrap > .map-library .tray-help { display: none; }
    .show-inspector .editor-toolbar, .show-inspector .map-tools { visibility: hidden; }
    .map-legend-overlay, .is-editing .map-legend-overlay { bottom: 110px; left: 10px; max-width: calc(100% - 20px); }
    .map-legend-overlay .map-legend-body { max-height: 30dvh; }
    .map-overlap-panel { top: 126px; right: 10px; }
    .show-inspector .map-legend-overlay { visibility: hidden; }
    .canvas-wrap:has(.map-legend-overlay[open]:not([hidden])) .mini-map { visibility: hidden; }
    #inspector-body > .inspector-card-header { gap: 8px; container-type: normal; container-name: none; }
    #inspector-body .inspector-card-header h1 { font-size: 23px !important; }
    #inspector-body .inspector-header-actions > .inspector-external-link,
    #inspector-body .inspector-header-actions > details > summary { flex-basis: 44px; width: 44px; height: 44px; min-width: 44px; min-height: 44px; padding: 10px; }
    .npc-action-menu-body, .inspector-action-menu-body, .inspector-action-menu > div { position: fixed; top: auto; bottom: calc(var(--ambient-bar-height, 0px) + 12px); right: 12px; width: calc(100vw - 24px); max-width: none; max-height: min(430px, 50dvh); }
}
@media (max-width: 370px) {
    .map-tools > .map-tool-group > #zoom-out { display: none; }
    .editor-toolbar .editor-tool-selection { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
    #inspector-body .inspector-card-header h1 > .entry-avatar { --avatar-size: 72px !important; }
}

/* Disclosure for overlapping authored markers; geometry remains in the renderer. */
.marker-cluster { cursor: pointer; }
.marker-cluster .cluster-shape { fill: #244b43; stroke: #fff8e7; stroke-width: 2; }
.marker-cluster .cluster-count { fill: #fff8e7; font-family: system-ui, sans-serif; font-weight: 700; }
.marker-cluster:hover .cluster-shape { fill: #356b5c; }
.marker-cluster:focus { outline: none; }
.marker-cluster:focus .cluster-shape { stroke: #eab44f; stroke-width: 4; }

/* Persistent marker panels keep drafts intact while exposing a small primary form. */
.marker-editor .marker-editor-tabs { display: flex; gap: 6px; min-width: 0; margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.marker-editor .marker-editor-tabs > [role="tab"] { min-height: var(--control-height, 36px); padding: 8px 14px; color: var(--chrome-text); background: var(--paper); border-color: var(--line); font-size: 13px; }
.marker-editor .marker-editor-tabs > [aria-selected="true"] { color: var(--chrome-text); background: var(--soft); border-color: var(--chrome-accent); box-shadow: inset 0 -2px 0 var(--chrome-accent); }
.marker-editor .marker-editor-tabs > [role="tab"]:focus-visible { outline: 3px solid var(--chrome-accent); outline-offset: 2px; }
.marker-editor .marker-editor-panel { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.marker-editor .marker-editor-panel[hidden] { display: none; }
.marker-editor .marker-editor-panel > p, .marker-editor .marker-editor-section > p { margin: 0; }
.marker-editor .marker-material-title { min-width: 0; overflow-wrap: anywhere; }
.marker-editor .marker-material-title > span { display: block; color: var(--muted); font-size: 12px; }
.marker-editor .marker-material-title > b { display: block; color: var(--chrome-text); font-size: 17px; line-height: 1.4; }
.marker-editor .marker-preview { margin-bottom: 0; }
.marker-editor .marker-properties-basic, .marker-editor .marker-properties-advanced { gap: 10px 14px; align-items: end; }
.marker-editor .marker-properties-basic > label, .marker-editor .marker-properties-advanced > label, .marker-editor .marker-editor-section > label { min-width: 0; margin: 0; font-size: 13px; }
.marker-editor .marker-editor-panel input:not([type="checkbox"]), .marker-editor .marker-editor-panel select { width: 100%; min-width: 0; min-height: var(--control-height, 36px); font-size: 14px; }
.marker-editor .marker-editor-panel .check { min-height: var(--control-height, 36px); margin: 0; }
.marker-editor .marker-editor-section { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.marker-editor .marker-editor-section + .marker-editor-section { padding-top: 12px; border-top: 1px solid var(--line); }
.marker-editor .marker-editor-section h3, .marker-editor .marker-editor-icons h3 { margin: 0 0 6px; color: var(--chrome-text); font-size: 15px; }
.marker-editor .marker-editor-panel .hint { font-size: 12px; line-height: 1.55; }
.marker-editor .marker-style-actions { margin: 0; }
@media (max-width: 740px) {
    .marker-editor .marker-editor-tabs { gap: 6px; margin-bottom: 10px; }
    .marker-editor .marker-editor-tabs > [role="tab"] { flex: 1; min-width: 0; min-height: 44px; padding: 9px 8px; }
    .marker-editor .marker-editor-panel { gap: 10px; }
    .marker-editor .marker-properties-basic.grid2, .marker-editor .marker-properties-advanced.grid2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .marker-editor .marker-editor-panel input:not([type="checkbox"]), .marker-editor .marker-editor-panel select, .marker-editor .marker-editor-panel .check, .marker-editor .marker-style-actions button { min-height: 44px; }
    .marker-editor .marker-properties-basic > .check, .marker-editor .marker-properties-advanced > .check { grid-column: 1 / -1; }
    .marker-editor .marker-style-actions button { white-space: normal; }
}

/* Library-specific refinements; loaded after the shared application styles. */
.entry-organization { margin: 8px 0; min-width: 0; border: 1px solid var(--line); border-radius: 6px; }
.entry-organization > summary { padding: 9px 10px; cursor: pointer; font-size: 13px; line-height: 1.45; overflow-wrap: anywhere; }
.entry-organization-context { color: var(--chrome-muted, var(--muted)); font-size: 12px; font-weight: 400; }
.entry-organization-grid { padding: 10px; margin: 0; gap: 12px; }
.entry-organization-grid > label { min-width: 0; }
.entry-organization-grid .searchable-select { min-width: 0; }
.entry-organization-grid .reference-results { position: relative; max-height: 220px; overflow: auto; }
.entry-organization-grid .selected-references { flex-wrap: wrap; }
.entry-organization-grid .reference-chip { max-width: 100%; overflow-wrap: anywhere; }
.entry-organization-grid .hint { margin: 2px 0 0; }
.library-preview-related > .related-create-action { margin-top: 8px; width: fit-content; }
@media (max-width: 600px) { .entry-organization-grid { grid-template-columns: minmax(0,1fr); } }
.library-catalog-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--line);
}
.library-catalog-label {
    margin-right: 6px;
    color: var(--chrome-muted);
    font-size: 11px;
}
.library-catalog-current,
.library-catalog-nav > button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--control-height, 36px);
    padding: 7px 12px;
    border: 1px solid var(--line);
    border-radius: 5px;
    font-size: 12px;
}
.library-catalog-current {
    color: var(--chrome-accent);
    border-color: var(--chrome-accent);
    background: var(--soft);
    font-weight: 650;
}
.library-catalog-nav > button { color: var(--chrome-text); background: var(--paper); }
.library-catalog-nav > button:hover { background: var(--soft); border-color: var(--chrome-accent); }
.library-catalog-nav > button:focus-visible { outline: 2px solid var(--chrome-accent); outline-offset: 2px; }

.library-layout .library-main > .section-heading { flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }
.library-heading-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; max-width: 100%; }
.library-heading-actions > .library-preview-more { margin-left: 0; }
.library-layout .library-main > .section-heading .eyebrow { display: none; }
.library-layout .library-filters {
    display: grid;
    grid-template-columns: minmax(200px, 1fr) minmax(155px, .4fr) minmax(135px, .35fr);
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}
.library-layout .library-filters input,
.library-layout .library-filters select { width: 100%; min-width: 0; max-width: none; min-height: var(--control-height); }
.library-layout #library-scope { padding: 7px 9px; font-size: 13px; }
.library-layout .library-extra-controls { margin-bottom: 10px; }
.library-layout .library-extra-controls > summary { min-height: var(--control-height); padding: 7px 10px; }
.library-layout .library-extra-controls[open] > summary { display: list-item; }
.library-layout .library-extra-controls > .material-scope-toolbar { margin: 10px 0 8px; }
.library-layout .library-extra-controls > .material-scope-hint { margin: 0 0 10px; }
.library-layout .library-extra-controls > .library-view-controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; }
.library-layout .library-results-count { margin: 0 0 8px; }
.library-layout .library-group-control {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-column: 1 / -1;
    align-items: center;
    gap: 8px;
    min-width: 0;
    margin: 0;
    font-size: 14px;
    color: var(--chrome-text);
}
.library-layout .library-group-control select { width: 100%; min-width: 0; }
.library-layout .entry-group > h2 { display: inline-block; margin: 16px 0 8px; font-size: 16px; line-height: 1.35; }
.library-layout .entry-group:first-child > h2 { margin-top: 4px; }
.library-layout .library-group-count { margin-left: 8px; padding: 2px 7px; font-size: 12px; vertical-align: baseline; color: var(--chrome-muted); background: var(--soft); border-color: var(--line); }
.library-layout .library-list-pane .entry-group { margin-bottom: 18px; }
.library-layout .library-list-pane .entry-group > h2 { margin-top: 4px; }

/* Compact, ergonomic list item actions */
.library-layout .library-entry-actions {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    flex-shrink: 0;
}
.library-layout .library-entry-actions button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    min-width: 30px;
    min-height: 30px;
    padding: 0;
    border-radius: 6px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--chrome-muted);
    cursor: pointer;
    transition: all 0.15s ease-in-out;
}
.library-layout .library-entry-actions button:hover {
    background: var(--soft, rgba(0, 0, 0, 0.05));
    border-color: var(--line);
    color: var(--chrome-text);
}
.library-layout .library-entry-actions button:focus-visible {
    outline: 2px solid var(--chrome-accent, #c9983e);
    outline-offset: 1px;
}
.library-layout .library-entry-actions button.material-favorite[aria-pressed="true"] {
    color: #e5a93b;
    border-color: rgba(229, 169, 59, 0.4);
    background: rgba(229, 169, 59, 0.12);
}
.library-layout .library-entry-actions button.material-favorite[aria-pressed="true"]:hover {
    background: rgba(229, 169, 59, 0.2);
}
.library-layout .library-entry-actions .library-archive:hover,
.library-layout .library-entry-actions .material-collection-remove:hover {
    color: #c0392b;
    border-color: rgba(192, 57, 43, 0.35);
    background: rgba(192, 57, 43, 0.08);
}
.library-layout .library-entry-actions .library-archive .action-icon,
.library-layout .library-entry-actions .material-collection-remove .action-icon,
.library-layout .library-entry-actions .material-favorite .material-favorite-icon {
    display: block;
    width: 17px;
    height: 17px;
    pointer-events: none;
}
.library-layout .library-entry-actions .library-archive-label,
.library-layout .library-entry-actions .material-remove-label {
    display: none;
}

.library-layout .entry-card.compact.npc-only {
    grid-template-columns: minmax(0, 2fr) minmax(100px, 1fr);
}
.library-layout .library-entry-state { display: inline-block; vertical-align: middle; white-space: nowrap; }
.library-layout .entry-card.compact.has-avatar {
    --library-avatar-size: 56px;
    min-height: calc(var(--library-avatar-size) + 16px);
    padding-left: calc(var(--library-avatar-size) + 24px);
}
.library-layout .entry-card.compact.has-avatar > .entry-avatar {
    width: var(--library-avatar-size);
    height: var(--library-avatar-size);
}
.library-layout .entry-card.has-avatar > .entry-avatar > .avatar-fallback { width: 100%; height: 100%; font-size: 16px; }
.library-layout .entry-card.has-avatar > .entry-avatar > .avatar-fallback .action-icon,
.library-layout .entry-card.has-avatar > .entry-avatar > .avatar-fallback .marker-icon { width: 26px; height: 26px; }
.library-layout .entry-card.has-avatar:not(.compact) > .entry-avatar { margin-bottom: 12px; }
.library-layout .entry-card > .entry-avatar.item-thumbnail,
.library-layout .entry-card > .item-thumbnail > .avatar-thumbnail,
.library-layout .entry-card > .item-thumbnail > .avatar-fallback { border-radius: 6px; }
.library-layout .entry-card > .item-thumbnail > .avatar-thumbnail { object-fit: contain; }

/* One catalog, with independent list and reading panes on wide screens. */
.modal.wide:has(.library-split-view) { width: min(1200px, calc(100vw - 36px)); }
.library-split-view {
    display: grid;
    grid-template-columns: var(--library-split-list-width, minmax(340px, .9fr)) 12px minmax(0, 1.1fr);
    align-items: stretch;
    gap: 0;
    height: min(620px, calc(90dvh - 260px));
    min-height: 300px;
}
/* Dialog panes fill the body's remaining space after its real headers, not the viewport. */
.modal.wide:has(.library-split-view) > form { height: min(89dvh, 900px); min-height: 0; }
.modal.wide:has(.library-split-view) > form > .modal-body { flex: 1; min-height: 0; overflow: hidden; }
.modal.wide:has(.library-split-view) .modal-body > :has(.library-split-view) {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    min-height: 0;
    width: 100%;
}
.modal.wide:has(.library-split-view) .library-embedded.library-has-preview {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    min-height: 0;
    width: 100%;
    margin: 0;
}
.modal.wide:has(.library-split-view) .library-aside { flex-shrink: 0; }
.modal.wide:has(.library-split-view) .library-main { display: flex; flex-direction: column; flex: 1; min-width: 0; min-height: 0; }
.modal.wide:has(.library-split-view) .library-main > .library-catalog-nav,
.modal.wide:has(.library-split-view) .library-main > .section-heading { flex-shrink: 0; }
.modal.wide:has(.library-split-view) .library-split-view { flex: 1; height: auto; min-height: 0; grid-template-rows: minmax(0, 1fr); }
.modal.wide:has(.library-split-view) .library-list-pane { overflow: auto; }
.library-list-pane { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.library-list-pane > #entry-grid { min-height: 0; flex: 1; overflow: auto; overscroll-behavior: contain; padding: 2px 3px 8px 2px; }
.library-layout .library-list-pane .library-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.library-layout .library-list-pane .library-filters > input { grid-column: 1 / -1; }
.library-layout .library-list-pane .library-view-controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.library-layout .library-list-pane .library-view-controls label { min-width: 0; }
.library-layout .library-list-pane .library-view-controls select { width: 100%; min-width: 0; min-height: var(--control-height); padding: 7px 6px; font-size: 12px; }
.library-layout .library-list-pane .entry-card.compact { grid-template-columns: minmax(0, 1fr); gap: 4px; }
.library-layout .library-list-pane .entry-card.compact .card-foot { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.library-list-pane .entry-card.is-preview-selected { border-color: var(--chrome-accent); background: var(--soft); box-shadow: inset 3px 0 var(--chrome-accent); }
.library-preview-pane {
    container-type: inline-size;
    container-name: material-preview;
    min-width: 0;
    min-height: 0;
    overflow: auto;
    overscroll-behavior: contain;
    border: 1px solid var(--line);
    border-radius: 7px;
    padding: 16px 18px;
    background: var(--paper);
}
.library-preview-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 14px; }
.library-preview-actions .button, .library-preview-actions button { min-height: var(--control-height); padding: 7px 9px; font-size: 12px; }
.library-preview-pane > .library-preview-heading {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 14px;
    padding: 0;
    border: 0;
    background: transparent;
}
.library-preview-heading > div { flex: 0 1 auto; min-width: 0; text-align: left; }
.library-preview-heading .avatar-fallback { font-size: 24px; }
.library-preview-heading h2 { margin: 6px 0; font: 25px/1.15 Georgia, serif; overflow-wrap: anywhere; }
.library-preview-heading .hint { margin: 4px 0 0; }
.library-preview-pane .lead { font-size: 15px; margin: 16px 0; }
.library-preview-pane .prose { font-size: 15px; }
.library-preview-pane .field-list { grid-template-columns: minmax(0, 1fr); gap: 12px; margin: 18px 0; }
.library-preview-pane .field-list h3 { margin: 0 0 5px; }
.library-preview-pane .field-list p { font-size: 14px; margin: 0; }
.library-preview-body { max-width: 76ch; margin: 12px 0 18px; border: 1px solid var(--line); border-radius: 5px; }
.library-preview-body > summary { min-height: var(--control-height); padding: 8px 10px; font-size: 14px; line-height: 1.4; cursor: pointer; }
.library-preview-body[open] > summary { border-bottom: 1px solid var(--line); }
.library-preview-body > article.prose { margin: 0; padding: 12px; font-size: 15px; overflow-wrap: anywhere; }
.library-preview-gallery, .library-preview-related, .library-preview-note { border-top: 1px solid var(--line); margin-top: 18px; padding-top: 12px; }
.library-preview-pane section > h3 { margin: 0 0 10px; font-size: 13px; }
.library-preview-gallery > div { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 14px; }
.library-preview-gallery figure { flex: 0 1 auto; width: fit-content; max-width: min(240px, 100%); margin: 0; min-width: 0; }
.library-preview-gallery img { display: block; width: auto; height: auto; max-width: min(240px, 100%); max-height: 320px; object-fit: contain; border-radius: 5px; }
.library-preview-gallery figcaption { font-size: 14px; line-height: 1.45; color: var(--chrome-muted); margin-top: 6px; overflow-wrap: anywhere; }
.library-preview-related a { display: block; padding: 5px 0; font-size: 13px; overflow-wrap: anywhere; }
.library-preview-related small { display: block; color: var(--chrome-muted); }
.library-preview-note p { font-size: 13px; white-space: pre-wrap; overflow-wrap: anywhere; }
.library-preview-status:empty { display: none; }

/* A standalone catalog uses the window's width and actual header height. */
.standalone-material-library { display: grid; grid-template-rows: auto minmax(0, 1fr); width: 100%; height: calc(100dvh - var(--ambient-bar-height, 0px)); min-width: 0; min-height: 0; overflow: hidden; }
.library-layout.library-standalone { width: 100%; max-width: none; height: 100%; min-width: 0; min-height: 0; margin: 0; padding-inline: 24px; grid-template-columns: 180px minmax(0, 1fr); overflow: hidden; }
.library-standalone .library-aside { min-width: 0; min-height: 0; padding: 20px 12px 20px 0; overflow: auto; }
.library-standalone .library-aside > .eyebrow { margin: 0 8px 12px; font-size: 12px; }
.library-standalone .kind-filter { padding: 9px 10px; font-size: 14px; }
.library-standalone .library-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; padding: 18px 0 18px 20px; overflow: auto; }
.library-standalone .library-main > .library-catalog-nav, .library-standalone .library-main > .section-heading { flex-shrink: 0; }
.library-standalone .section-heading h1 { font-size: 25px; line-height: 1.3; }
.library-standalone .library-split-view {
    flex: 1;
    height: auto;
    min-height: 0;
    grid-template-columns: var(--library-split-list-width, minmax(320px, 420px)) 12px minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    gap: 0;
}
.library-standalone .library-list-pane { overflow: auto; container-type: inline-size; container-name: standalone-library-list; }
.library-standalone .library-list-pane #entry-grid .cards { grid-template-columns: minmax(0, 1fr); gap: 8px; }
.library-standalone .library-list-pane .entry-list-mode .library-entry { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; }
.library-standalone .library-list-pane .entry-list-mode .library-entry > .entry-card { width: 100%; }
.library-standalone .library-list-pane .entry-list-mode .entry-card h3 { line-height: 1.35; }
.library-standalone .library-list-pane .entry-list-mode .entry-card:hover { transform: none; }
.library-standalone .library-list-pane .entry-list-mode .library-entry-actions { flex-direction: row; align-items: center; justify-content: flex-end; gap: 4px; margin-left: 0; }
.library-standalone .library-preview-pane { --library-reading-width: 76ch; font-size: 15px; }
.library-standalone .library-preview-pane > .prose,
.library-standalone .library-preview-pane > .field-list,
.library-standalone .library-preview-pane > .lead,
.library-standalone .library-preview-pane > .library-preview-gallery,
.library-standalone .library-preview-pane > .library-preview-related,
.library-standalone .library-preview-pane > .library-preview-note { max-width: var(--library-reading-width); }

@container material-preview (min-width: 740px) {
    .library-layout .library-preview-pane > .field-list { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: none; column-gap: 22px; row-gap: 16px; }
    .library-layout .library-preview-pane > .field-list > section { min-width: 0; overflow-wrap: anywhere; }
}

@container standalone-library-list (min-width: 560px) {
    .library-standalone .library-list-pane .library-filters { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; }
    .library-standalone .library-list-pane .library-filters > input { grid-column: 1 / -1; }
    .library-standalone .library-list-pane .library-group-control { display: flex; flex-direction: column; align-items: stretch; grid-column: auto; gap: 4px; }
}
@container standalone-library-list (max-width: 439px) {
    .library-standalone .library-list-pane .entry-list-mode .library-entry { grid-template-columns: minmax(0, 1fr) auto; gap: 6px; }
    .library-standalone .library-list-pane .entry-list-mode .library-entry-actions { flex-wrap: nowrap; padding: 0; }
    .library-standalone .library-list-pane .entry-list-mode .library-archive { width: var(--control-height); min-width: var(--control-height); height: var(--control-height); min-height: var(--control-height); padding: 6px; }
    .library-standalone .library-list-pane .entry-list-mode .library-archive > .library-archive-label { display: none; }
    .library-standalone .library-list-pane .entry-list-mode .library-archive > .action-icon { display: block; width: 20px; height: 20px; }
}

/* Reference actions stay beside their title; secondary management uses one menu. */
.reading > .reading-heading { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 20px; }
.reading-heading > h1 { flex: 0 1 100%; width: 100%; min-width: 0; margin: 0 0 4px; font: normal 43px/1.15 Georgia, serif; overflow-wrap: anywhere; }
.reading-heading > .badge { max-width: 100%; overflow-wrap: anywhere; }
.reading-heading > .reading-actions { display: flex; flex-wrap: wrap; align-items: center; flex: 0 1 auto; justify-content: flex-start; width: fit-content; max-width: 100%; gap: 6px; margin: 0; }
.reading-heading .reading-actions > .row { flex: 0 0 auto; max-width: 100%; justify-content: flex-start; gap: 6px; margin: 0; }
.reading-more { position: relative; flex: 0 0 auto; margin: 0; }
.reading-more > summary { display: inline-flex; align-items: center; justify-content: center; width: fit-content; min-width: 36px; min-height: 35px; padding: 4px 9px; border: 1px solid var(--line); border-radius: 6px; background: var(--paper); cursor: pointer; list-style: none; font-weight: 700; }
.reading-more > summary::-webkit-details-marker { display: none; }
.reading-more-menu { position: absolute; top: calc(100% + 5px); right: 0; z-index: 30; display: flex; flex-direction: column; align-items: stretch; gap: 4px; width: 220px; max-width: calc(100vw - 46px); padding: 6px; border: 1px solid var(--line); border-radius: 7px; background: var(--paper); box-shadow: var(--shadow); }
.reading-more-menu > * { justify-content: flex-start; width: 100%; text-align: left; white-space: normal; overflow-wrap: anywhere; }
.reading-more:not([open]) > .reading-more-menu { display: none; }

.library-preview-gallery > .section-heading,
.reading .gallery-section > .section-heading { justify-content: flex-start; width: fit-content; max-width: 100%; flex-wrap: wrap; gap: 10px; }
.library-preview-gallery.is-empty,
.reading .gallery-section.is-empty { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 6px 12px; width: fit-content; max-width: 100%; margin: 14px 0; padding: 0; border: 0; }
.library-preview-gallery.is-empty > .section-heading,
.reading .gallery-section.is-empty > .section-heading { flex: 0 1 auto; gap: 0; margin: 0; }
.library-preview-gallery.is-empty > .section-heading button,
.reading .gallery-section.is-empty > .section-heading button { width: auto; max-width: 100%; min-height: 32px; padding: 6px 9px; font-size: 12px; white-space: normal; }
.library-preview-gallery.is-empty > .library-preview-images,
.reading .gallery-section.is-empty > #gallery { display: block; flex: 0 1 auto; width: auto; min-height: 0; margin: 0; padding: 0; border: 0; }
.library-preview-gallery.is-empty .hint,
.reading .gallery-section.is-empty .gallery-empty { margin: 0; padding: 0; border: 0; background: transparent; color: var(--chrome-muted); font-size: 12px; line-height: 1.5; text-align: left; }
.reading .gallery-section.is-empty > #gallery-hint { display: none; }
.reading > .location-ambient:has(> .location-ambient-list > .hint) { width: fit-content; max-width: 100%; margin: 14px 0; padding: 0; border: 0; }
.reading > .location-ambient:has(> .location-ambient-list > .hint) > .panel-event-heading { justify-content: flex-start; flex-wrap: wrap; align-items: center; width: fit-content; max-width: 100%; gap: 8px 12px; margin: 0; }
.reading > .location-ambient:has(> .location-ambient-list > .hint) > .panel-event-heading h2 { margin: 0; color: var(--chrome-muted); font-size: 13px; font-weight: 500; }
.reading > .location-ambient:has(> .location-ambient-list > .hint) > .panel-event-heading button { width: auto; max-width: 100%; min-height: 32px; padding: 6px 9px; font-size: 12px; white-space: normal; }
.reading > .location-ambient:has(> .location-ambient-list > .hint) > .location-ambient-list { display: none; }
.reading > details.session-note { margin-top: 22px; padding-top: 10px; }
.reading > details.session-note > summary { width: fit-content; min-height: 32px; padding: 5px 0; color: var(--chrome-muted); cursor: pointer; font-size: 13px; font-weight: 500; }
.reading > details.session-note[open] > summary { margin-bottom: 12px; }
.reading > .tags:empty { display: none; }
.library-layout .entry-card > .card-foot:empty { display: none; }

/* Combat values remain together in previews and full statblock cards. */
.statblock-reference > .reading-heading > h1 { font-size: 30px; line-height: 1.2; margin: 0 0 4px; }
.statblock-reference > .lead { font-size: 15px; line-height: 1.5; margin: 8px 0; }
.statblock-reference > .reading-actions { align-items: flex-start; gap: 8px; }
.statblock-reference > .reading-actions .row { margin: 0; }
.statblock-reference > .tags { margin: 8px 0; }
.statblock-gallery { margin: 16px 0; }
.statblock-gallery > summary { min-height: var(--control-height); padding: 8px 10px; cursor: pointer; }
.statblock-gallery .gallery-section { margin: 0; }
.statblock-reading-compact { max-width: 960px; margin: 10px 0 12px; font-size: 15px; line-height: 1.5; }
.statblock-inline-card > .statblock-reading-compact,
.statblock-reading-compact:has(.lss-sheet-container),
.character-statblock-wrapper .statblock-reading-compact {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0;
}
.statblock-reading-compact > .metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin: 0; border: 1px solid var(--line); border-radius: 5px; overflow: hidden; }
.statblock-reading-compact > .metrics > div { min-width: 0; min-height: 0; padding: 8px 10px; border-right: 1px solid var(--line); }
.statblock-reading-compact > .metrics > div:last-child { border-right: 0; }
.statblock-reading-compact > .metrics b { white-space: nowrap; }
.statblock-reading-compact > .metrics small { display: block; font-size: 13px; line-height: 1.35; color: var(--chrome-muted); overflow-wrap: anywhere; }
.statblock-reading-compact > .metrics b { display: block; margin: 2px 0 0; font-size: 18px; line-height: 1.25; color: var(--chrome-text); }
.statblock-reading-compact > .metrics + p { margin: 8px 0; font-size: 15px; line-height: 1.4; }
.statblock-reading-compact > .ability-row { grid-template-columns: repeat(6, minmax(0, 1fr)); margin: 8px 0 12px; }
.statblock-reading-compact > .ability-row > div { min-width: 0; padding: 6px 4px; }
.statblock-reading-compact > .ability-row small { font-size: 13px; line-height: 1.3; color: var(--chrome-muted); }
.statblock-reading-compact > .ability-row b { margin: 2px 0; font-size: 18px; line-height: 1.25; color: var(--chrome-text); }
.statblock-reading-compact > .ability-row span { font-size: 14px; line-height: 1.3; color: var(--chrome-text); }
.statblock-reading-compact > h2 { margin: 12px 0 5px; font-size: 18px; line-height: 1.35; }
.statblock-reading-compact .prose, .statblock-reading-compact p, .statblock-reading-compact li { font-size: 15px; line-height: 1.5; }
.statblock-reading-compact p { margin: 0 0 8px; }
.statblock-extra { margin: 12px 0; }
.statblock-extra > summary { min-height: var(--control-height); padding: 8px 10px; cursor: pointer; }
.statblock-extra > .field-list { margin: 12px 0; }
.statblock-reading-compact table { font-size: 14px; line-height: 1.45; }
.statblock-reading-compact td, .statblock-reading-compact th { padding: 6px 8px; }

@container embedded-library (max-width: 639px) {
    .library-layout .entry-card.compact.npc-only { grid-template-columns: minmax(0, 1fr); }
    .library-layout .entry-card.compact.has-avatar { --library-avatar-size: 48px; }
    .library-catalog-nav { margin-bottom: 10px; gap: 5px; }
    .library-layout .library-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .library-layout .library-filters > input { grid-column: 1 / -1; }
}
@media (max-width: 740px) {
    .statblock-reading-compact > .metrics > div { padding-inline: 6px; }
    .library-layout.library-standalone { display: flex; flex-direction: column; padding-inline: 12px; }
    .library-standalone .library-aside { flex-shrink: 0; padding: 8px 0; border-right: 0; border-bottom: 1px solid var(--line); }
    .library-standalone .library-aside > .eyebrow { display: none; }
    .library-standalone .kind-filter { min-height: 44px; font-size: 14px; }
    .library-standalone .library-main { flex: 1; padding: 12px 0; }
    .library-standalone .library-preview-actions button, .library-standalone .library-preview-actions .button { min-height: 44px; }
    .library-layout .entry-card.compact.npc-only { grid-template-columns: minmax(0, 1fr); }
    .library-layout .entry-card.compact.has-avatar { --library-avatar-size: 48px; }
    .library-catalog-nav { margin-bottom: 12px; }
    .library-layout .library-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .library-layout .library-filters > input { grid-column: 1 / -1; }
}

/* ==========================================================================
   ENHANCED GAME-RUNNING & CHARACTER MANAGEMENT SYSTEM
   ========================================================================== */

/* Split Resizer Divider */
.library-split-resizer {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 12px;
    margin: 0;
    cursor: col-resize;
    user-select: none;
    touch-action: none;
    z-index: 15;
}
.library-split-resizer::before {
    content: '';
    position: absolute;
    top: 4px;
    bottom: 4px;
    left: 5px;
    width: 2px;
    border-radius: 2px;
    background: var(--line);
    transition: background-color 0.15s, width 0.15s, left 0.15s;
}
.library-split-resizer:hover::before,
.library-split-resizer.dragging::before,
.library-split-resizer:focus-visible::before {
    left: 4px;
    width: 4px;
    background: var(--chrome-accent, #c9983e);
}
.library-split-resizer .resizer-handle {
    display: block;
    width: 4px;
    height: 38px;
    border-radius: 4px;
    background: var(--chrome-muted);
    opacity: 0.45;
    transition: opacity 0.15s, transform 0.15s, background-color 0.15s;
}
.library-split-resizer:hover .resizer-handle,
.library-split-resizer.dragging .resizer-handle {
    opacity: 1;
    transform: scaleY(1.3);
    background: var(--chrome-accent, #c9983e);
}
body.is-resizing-panels {
    cursor: col-resize !important;
    user-select: none !important;
}
body.is-resizing-panels * {
    user-select: none !important;
}

/* Collapsible Library Sidebar */
.library-aside-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 12px;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--line);
}
.library-aside-header .eyebrow {
    margin: 0;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--chrome-muted);
}
.library-aside-toggle-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border-radius: 4px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--chrome-muted);
    cursor: pointer;
    transition: all 0.15s;
}
.library-aside-toggle-btn:hover {
    background: var(--soft);
    border-color: var(--line);
    color: var(--chrome-text);
}
.library-aside-toggle-btn .action-icon {
    width: 14px;
    height: 14px;
}
.library-layout.aside-collapsed {
    grid-template-columns: 46px minmax(0, 1fr) !important;
}
.library-layout.aside-collapsed .library-aside {
    padding-right: 4px;
}
.library-layout.aside-collapsed .library-aside-header .eyebrow {
    display: none;
}
.library-layout.aside-collapsed .kind-filter {
    padding: 8px 0;
    text-align: center;
    justify-content: center;
    font-size: 0;
}
.library-layout.aside-collapsed .kind-filter::first-letter {
    font-size: 13px;
    font-weight: 700;
}
.library-layout.aside-collapsed .kind-filter small {
    display: none;
}

/* Character Preview Tabs */
.character-preview-tabs {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 14px;
    padding: 3px;
    background: var(--soft);
    border: 1px solid var(--line);
    border-radius: 8px;
    max-width: 100%;
    overflow-x: auto;
}
.char-tab-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    font-size: 12px;
    font-weight: 500;
    border-radius: 6px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--chrome-muted);
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.15s ease-in-out;
}
.char-tab-btn:hover {
    color: var(--chrome-text);
    background: rgba(0, 0, 0, 0.04);
}
.char-tab-btn.active {
    color: var(--chrome-text);
    background: var(--paper);
    border-color: var(--line);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    font-weight: 600;
}
.night .char-tab-btn.active {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

/* Character Avatar in Preview */
.preview-avatar-btn {
    position: relative;
    cursor: zoom-in;
    display: inline-block;
    border-radius: 50%;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.preview-avatar-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 0 0 3px var(--chrome-accent, #c9983e);
}
.preview-avatar-btn .avatar-zoom-badge {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--paper);
    border: 1px solid var(--line);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.15);
    opacity: 0.85;
}
.preview-avatar-btn:hover .avatar-zoom-badge {
    opacity: 1;
    background: var(--chrome-accent, #c9983e);
    color: #fff;
    border-color: var(--chrome-accent, #c9983e);
}

/* Dossier Fields Grid */
.library-preview-pane .field-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
    gap: 12px;
    margin: 18px 0;
}
.dossier-card {
    display: flex;
    flex-direction: column;
    padding: 12px 14px;
    background: var(--paper);
    border: 1px solid var(--line);
    border-left: 3px solid var(--chrome-accent, #c9983e);
    border-radius: 6px;
    transition: all 0.15s ease;
    cursor: default;
}
.dossier-card:hover {
    border-color: var(--chrome-accent, #c9983e);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    background: var(--soft);
}
.night .dossier-card:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}
.dossier-card-head, .dossier-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
}
.dossier-card-title-group, .dossier-card-title {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    overflow-wrap: anywhere;
}
.dossier-card-title { flex: 1 1 auto; color: var(--chrome-muted); font-size: 12px; font-weight: 600; line-height: 1.4; }
.dossier-icon {
    font-size: 15px;
    line-height: 1;
}
.dossier-title {
    margin: 0;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--chrome-muted);
}
.dossier-card .dossier-quick-edit-btn {
    opacity: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    min-width: 22px;
    min-height: 22px;
    flex: 0 0 22px;
    padding: 0;
    border-radius: 4px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--chrome-muted);
    cursor: pointer;
    transition: all 0.15s;
}
.dossier-card:hover .dossier-quick-edit-btn,
.dossier-card:focus-within .dossier-quick-edit-btn {
    opacity: 1;
}
.dossier-quick-edit-btn:hover {
    background: var(--paper);
    border-color: var(--line);
    color: var(--chrome-accent);
}
.dossier-quick-edit-btn .action-icon {
    width: 13px;
    height: 13px;
}
.dossier-body-text, .dossier-card-content {
    font-size: 14px;
    line-height: 1.5;
    color: var(--chrome-text);
    min-width: 0;
    overflow-wrap: anywhere;
}
.dossier-card-content > :last-child { margin-bottom: 0; }
@media (hover: none) { .dossier-card .dossier-quick-edit-btn { opacity: 1; } }
.dossier-body-text p {
    margin: 0;
}

/* Character Statblock Integration */
.character-statblock-wrapper {
    margin: 18px 0;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--paper);
    overflow: visible;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
    width: 100%;
    transition: all 0.2s ease;
}

.reading:has(.character-statblock-wrapper),
.reading.statblock-reference {
    max-width: 1680px;
    width: 100%;
}

.reading-layout:has(.character-statblock-wrapper),
.reading-layout:has(.statblock-reference) {
    max-width: 1920px;
    width: 100%;
}

.reading-layout:has(.character-statblock-wrapper.is-fullwidth) {
    max-width: 98vw;
    width: 98vw;
}

.reading:has(.character-statblock-wrapper.is-fullwidth) {
    max-width: 100%;
    width: 100%;
    padding-left: clamp(16px, 2vw, 36px);
    padding-right: clamp(16px, 2vw, 36px);
}

.character-statblock-wrapper.is-fullwidth {
    margin-left: 0;
    margin-right: 0;
    width: 100%;
}
.character-statblock-wrapper.unlinked {
    border-style: dashed;
    background: var(--soft);
    padding: 16px;
}
.statblock-card-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--line);
    background: var(--soft);
}
.statblock-badge-group {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.statblock-linked-title {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: var(--chrome-text);
}
.statblock-cr-badge {
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 4px;
    background: var(--paper);
    border: 1px solid var(--line);
    color: var(--chrome-muted);
    font-weight: 600;
}
.statblock-header-tools {
    display: flex;
    align-items: center;
    gap: 6px;
}
.statblock-header-tools .button-sm {
    padding: 4px 8px;
    font-size: 11px;
    min-height: 26px;
}
.statblock-inline-card {
    padding: 8px 10px;
}

/* Combat HP Tracker Bar */
.combat-quick-tracker {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 8px 14px;
    background: rgba(0, 0, 0, 0.02);
    border-bottom: 1px solid var(--line);
    font-size: 13px;
    flex-wrap: wrap;
}
.night .combat-quick-tracker {
    background: rgba(255, 255, 255, 0.03);
}
.combat-tracker-label {
    font-weight: 700;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--chrome-muted);
    margin-right: 4px;
}
.combat-hp-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 12px;
    background: #27ae60;
    color: #fff;
    font-weight: 700;
    font-size: 13px;
    min-width: 68px;
    justify-content: center;
    transition: background-color 0.2s ease;
}
.combat-hp-pill.hp-bloodied {
    background: #d35400;
}
.combat-hp-pill.hp-critical {
    background: #c0392b;
    animation: hpPulse 1.5s infinite;
}
@keyframes hpPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}
.combat-tracker-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 24px;
    height: 24px;
    padding: 0 7px;
    font-size: 11px;
    font-weight: 600;
    border-radius: 4px;
    border: 1px solid var(--line);
    background: var(--paper);
    color: var(--chrome-text);
    cursor: pointer;
    transition: all 0.15s;
}
.combat-tracker-btn:hover {
    background: var(--soft);
    border-color: var(--chrome-accent);
}
.combat-tracker-btn.danger-step {
    color: #c0392b;
}
.combat-tracker-btn.heal-step {
    color: #27ae60;
}
.combat-tracker-reset {
    margin-left: auto;
    font-size: 11px;
    padding: 2px 6px;
    height: 22px;
    min-height: 22px;
    color: var(--chrome-muted);
    background: transparent;
    border: 1px solid transparent;
    cursor: pointer;
}
.combat-tracker-reset:hover {
    color: var(--chrome-text);
    border-color: var(--line);
}

/* Unlinked Statblock Prompt */
.unlinked-statblock-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    text-align: center;
    padding: 12px;
}
.unlinked-statblock-card p {
    margin: 0;
    font-size: 13px;
    color: var(--chrome-muted);
}
.unlinked-statblock-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
}
.unlinked-statblock-actions select {
    min-width: 220px;
    max-width: 320px;
    font-size: 13px;
    padding: 6px 10px;
}

/* Gallery Hover and Lightbox Zoom */
.library-preview-gallery figure {
    cursor: zoom-in;
    transition: transform 0.15s ease;
}
.library-preview-gallery figure:hover {
    transform: translateY(-2px);
}
.library-preview-gallery figure:hover img {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Image Lightbox Viewer */
.library-lightbox-overlay {
    position: fixed; inset: 0; z-index: 9999; display: none;
    width: 100vw; height: 100dvh; max-width: none; max-height: none;
    margin: 0; padding: 0; border: 0; border-radius: 0; overflow: hidden;
    background: #0b100e; color: #f2f5f0; box-shadow: none;
}
.library-lightbox-overlay[open] { display: flex; align-items: stretch; animation: lbFadeIn .15s ease-out; }
.library-lightbox-overlay::backdrop { background: #000d; backdrop-filter: blur(4px); }
.library-lightbox-overlay.closing { opacity: 0; transition: opacity .15s ease-out; }
@keyframes lbFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
.library-lightbox-dialog { display: flex; flex-direction: column; width: 100%; height: 100%; min-width: 0; min-height: 0; overflow: hidden; }
.library-lightbox-header { display: flex; flex-wrap: wrap; align-items: center; flex: 0 0 auto; gap: 8px 16px; min-width: 0; padding: 10px 16px; border-bottom: 1px solid #ffffff24; background: #111a16; }
.library-lightbox-titles { flex: 1 1 240px; min-width: 0; }
.library-lightbox-titles > .eyebrow { display: none; }
.library-lightbox-titles h3 { margin: 0; color: inherit; font: 600 16px/1.35 system-ui, sans-serif; letter-spacing: normal; overflow-wrap: anywhere; }
.library-lightbox-titles .lightbox-caption { max-height: min(96px, 14dvh); margin: 4px 0 0; overflow: auto; color: #c8d3cc; font-size: 12px; line-height: 1.4; white-space: pre-wrap; overflow-wrap: anywhere; }
.library-lightbox-header-actions { display: flex; flex-wrap: wrap; align-items: center; flex: 0 1 auto; gap: 6px; max-width: 100%; margin-left: auto; }
.library-lightbox-overlay button { width: auto; max-width: 100%; min-height: 36px; padding: 7px 10px; border: 1px solid #ffffff40; border-radius: 6px; background: #ffffff0d; color: #f2f5f0; font-size: 12px; white-space: normal; }
.library-lightbox-overlay button:hover { background: #ffffff20; border-color: #ffffff70; }
.library-lightbox-overlay button.primary { background: #315f54; border-color: #6d9c8c; }
.library-lightbox-overlay button.primary:hover { background: #3b7163; }
.library-lightbox-overlay .library-lightbox-close { flex: 0 0 36px; width: 36px; height: 36px; min-width: 36px; padding: 0; font-size: 23px; line-height: 1; }
.library-lightbox-view { display: flex; flex: 1 1 0; min-width: 0; min-height: 0; padding: 12px; overflow: auto; overscroll-behavior: contain; }
.library-lightbox-view > .lightbox-full-img { display: block; flex: 0 0 auto; width: auto; height: auto; max-width: 100%; max-height: 100%; margin: auto; object-fit: contain; cursor: zoom-in; }
.library-lightbox-view > .lightbox-full-img.is-zoomed { width: auto; height: auto; max-width: none; max-height: none; object-fit: initial; cursor: zoom-out; }
.library-lightbox-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; flex: 0 0 auto; gap: 8px 16px; min-width: 0; padding: 8px 16px; border-top: 1px solid #ffffff24; background: #111a16; }
.library-lightbox-footer > .hint { flex: 1 1 300px; min-width: 0; margin: 0; color: #c8d3cc; font-size: 12px; line-height: 1.4; }
.library-lightbox-footer > .row { display: flex; flex-wrap: wrap; align-items: center; flex: 0 1 auto; gap: 6px; max-width: 100%; margin: 0; }
@media (max-width: 740px) {
    .library-lightbox-header, .library-lightbox-footer { gap: 8px 10px; padding: 8px 10px; }
    .library-lightbox-titles { flex-basis: 120px; }
    .library-lightbox-titles h3 { font-size: 14px; }
    .library-lightbox-overlay button { min-height: 44px; }
    .library-lightbox-overlay .library-lightbox-close { flex-basis: 44px; width: 44px; height: 44px; min-width: 44px; }
    .library-lightbox-view { padding: 8px; }
    .library-lightbox-footer > .hint { flex-basis: 100%; font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
    .library-lightbox-overlay[open], .library-lightbox-overlay.closing { animation: none; transition: none; }
}

/* Keep public-image controls beside a preview that uses the remaining dialog height. */
.modal.image-presentation-dialog {
    height: min(760px, calc(100dvh - 24px));
    max-height: calc(100dvh - 24px);
    overflow: hidden;
}
.image-presentation-dialog > form {
    height: 100%; max-height: none; min-width: 0; min-height: 0;
}
.image-presentation-dialog > form > :is(header, footer) {
    flex: 0 0 auto; gap: 8px; padding: 10px 14px;
}
.image-presentation-dialog > form > header > div { min-width: 0; }
.image-presentation-dialog > form > header .eyebrow { display: none; }
.image-presentation-dialog > form > header h2 {
    margin: 0; font-size: 20px; line-height: 1.35; overflow-wrap: anywhere;
}
.image-presentation-dialog > form > .modal-body {
    display: grid; grid-template-rows: minmax(80px, 1fr) auto auto auto;
    flex: 1 1 0; min-width: 0; min-height: 0;
    gap: 10px; padding: 12px 14px; overflow: auto;
}
.image-presentation-dialog .image-preview {
    display: flex; align-items: center; justify-content: center;
    min-width: 0; min-height: 0; max-height: none; padding: 8px; overflow: hidden;
}
.image-presentation-dialog .image-preview > img {
    display: block; width: 100%; height: 100%; min-width: 0; min-height: 0;
    max-width: 100%; max-height: 100%; object-fit: contain;
}
.image-presentation-dialog .modal-body > label {
    display: grid; gap: 4px; min-width: 0; margin: 0; font-size: 12px; line-height: 1.4;
}
.image-presentation-dialog .modal-body > label > input { min-width: 0; width: 100%; margin: 0; }
.image-presentation-dialog .modal-body > .hint {
    margin: 0; font-size: 12px; line-height: 1.4; overflow-wrap: anywhere;
}
.image-presentation-dialog #presentation-actions {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start;
    gap: 6px; min-width: 0; margin: 0;
}
.image-presentation-dialog button {
    flex: 0 1 auto; width: auto; max-width: 100%; min-height: 36px; padding: 7px 10px;
}
@media (max-width: 740px) {
    .image-presentation-dialog > form > :is(header, footer) { padding: 8px 10px; }
    .image-presentation-dialog > form > header h2 { font-size: 18px; }
    .image-presentation-dialog > form > .modal-body { padding: 10px; gap: 8px; }
    .image-presentation-dialog button { min-height: 44px; }
}

/* In-place Character & Material Editor */
.library-inplace-editor {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 16px;
    padding: 16px;
    background: var(--paper);
    border: 1px solid var(--chrome-accent, #c9983e);
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    animation: editorSlideDown 0.2s ease-out;
}
.library-preview-pane:has(> .library-inplace-editor) { scroll-padding-bottom: 132px; }
.library-inplace-editor textarea[name="body"] { min-height: clamp(240px, 42dvh, 480px); }
.library-inplace-editor textarea:is([data-auto-grow], [data-textarea-sizing]) { max-height: none; overflow-y: hidden; resize: vertical; }
.library-inplace-editor :is(input, select, textarea) { scroll-margin-bottom: 12px; }
.library-inplace-editor .inline-body-section { display: grid; gap: 6px; min-width: 0; }
.library-inplace-editor .inline-body-heading {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start;
    gap: 8px; min-width: 0;
}
.library-inplace-editor .inline-body-heading > label { margin: 0; }
.library-inplace-editor .inline-body-format {
    position: relative; display: inline-flex; flex-direction: row; align-items: center;
    flex: 0 1 auto; gap: 6px; min-width: 0;
}
.library-inplace-editor .inline-body-format > span {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.library-inplace-editor .inline-body-format > select {
    flex: 0 1 auto; width: 112px; max-width: 100%; min-width: 0; min-height: 32px;
    height: 32px; padding: 5px 8px; font-size: 12px; line-height: 1.4;
}
.library-inplace-editor .inline-body-section > textarea { margin: 0; }
.library-inplace-editor > .library-editor-footer {
    /* Include the preview pane's bottom padding so text cannot peek below the actions. */
    position: sticky; bottom: -16px; z-index: 10;
    display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start;
    flex: 0 0 auto; gap: 8px; margin: 0; padding: 10px 0;
    border-top: 1px solid var(--line); background: var(--paper);
}
.library-editor-footer > button { flex: 0 1 auto; max-width: 100%; }
.library-editor-footer > .library-draft-status { flex: 1 1 160px; margin: 0; }
.library-editor-footer > .library-draft-status:empty { display: none; }
@keyframes editorSlideDown {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}
.inplace-editor-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--line);
}
.inplace-editor-header h3 {
    margin: 0;
    font-size: 17px;
    color: var(--chrome-text);
}
.inplace-editor-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}
.inplace-editor-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 12px;
}
.inplace-dossier-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 12px 0;
}
.inplace-dossier-row {
    display: grid;
    grid-template-columns: 160px minmax(0, 1fr) 36px;
    gap: 8px;
    align-items: center;
}
.inplace-dossier-row input,
.inplace-dossier-row textarea {
    width: 100%;
    font-size: 13px;
}
.inplace-dossier-row .btn-remove-field {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    color: #c0392b;
    border: 1px solid transparent;
    border-radius: 4px;
    background: transparent;
    cursor: pointer;
}
.inplace-dossier-row .btn-remove-field:hover {
    background: rgba(192, 57, 43, 0.1);
    border-color: rgba(192, 57, 43, 0.3);
}
.btn-add-field {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    font-size: 12px;
    border-radius: 4px;
    border: 1px dashed var(--line);
    background: transparent;
    color: var(--chrome-muted);
    cursor: pointer;
}
.btn-add-field:hover {
    color: var(--chrome-accent);
    border-color: var(--chrome-accent);
    background: var(--soft);
}

/* Reading and finding material take priority over management controls. */
.library-layout .library-filters,
.library-layout .library-list-pane .library-filters {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 8px;
    margin-bottom: 10px;
}
.library-layout .library-filters > input { grid-column: auto; width: 100%; min-width: 0; }
.library-layout .library-filters > .library-extra-controls { margin: 0; min-width: 0; }
.library-layout .library-extra-controls > summary { display: block; white-space: nowrap; padding: 8px 10px; list-style: none; }
.library-layout .library-extra-controls > summary::-webkit-details-marker { display: none; }
.library-layout .library-extra-controls[open] > summary { display: block; border-color: var(--chrome-accent); }
.library-filter-panel { position: absolute; z-index: 25; top: calc(100% + 6px); right: 0; width: min(400px, 100%); padding: 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); box-shadow: var(--shadow); }
.library-filter-panel .material-scope-toolbar { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; margin: 0 0 8px; }
.library-filter-panel .material-scope-toolbar > label { max-width: none; }
.library-filter-panel .material-scope-hint { display: none; }
.library-filter-panel .library-view-controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.library-filter-panel .library-group-control { display: flex; flex-direction: column; align-items: stretch; gap: 5px; grid-column: auto; font-size: 12px; }

.library-layout .library-entry,
.library-standalone .library-list-pane .entry-list-mode .library-entry {
    position: relative;
    display: block;
    min-width: 0;
}
.library-layout .library-entry > .entry-card { width: 100%; min-width: 0; }
.library-layout .library-entry-actions,
.library-standalone .library-list-pane .entry-list-mode .library-entry-actions {
    position: absolute;
    top: 6px;
    right: 6px;
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    gap: 1px;
    margin: 0;
    padding: 0;
    max-width: none;
}
.library-layout .library-entry-actions button,
.library-standalone .library-list-pane .entry-list-mode .library-entry-actions button {
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    min-width: 28px;
    min-height: 28px;
    padding: 4px;
    background: var(--paper);
}
.library-layout .entry-card.compact,
.library-layout .entry-card.compact.npc-only,
.library-layout .library-list-pane .entry-card.compact { display: flex; flex-direction: column; gap: 4px; min-height: 74px; padding-top: 12px; padding-bottom: 12px; padding-right: 72px; }
.library-layout .entry-card.compact h3 { margin: 0; }
.library-layout .entry-card.compact .card-foot { white-space: normal; margin: 0; }
.library-layout #entry-grid:not(.entry-list-mode) .entry-card { min-height: 0; padding: 16px; padding-top: 40px; }
.library-layout #entry-grid:not(.entry-list-mode) .entry-card h3 { margin: 4px 0 8px; font-size: 17px; }
.library-layout #entry-grid:not(.entry-list-mode) .entry-card p { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; flex: none; margin: 0; }
.library-layout #entry-grid:not(.entry-list-mode) .card-foot { margin-top: 10px; }
.library-layout .library-list-pane #entry-grid:not(.entry-list-mode) .cards { grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); }

.library-preview-more { position: relative; margin-left: auto; }
.library-preview-more > summary { display: grid; place-items: center; min-width: 36px; min-height: 35px; padding: 4px 9px; cursor: pointer; list-style: none; border: 1px solid var(--line); border-radius: 6px; font-weight: 700; }
.library-preview-more > summary::-webkit-details-marker { display: none; }
.library-preview-more-menu { position: absolute; z-index: 30; top: calc(100% + 5px); right: 0; display: flex; flex-direction: column; align-items: stretch; gap: 4px; width: 200px; padding: 6px; border: 1px solid var(--line); border-radius: 7px; background: var(--paper); box-shadow: var(--shadow); }
.library-preview-more-menu > * { justify-content: flex-start; text-align: left; }
.library-preview-heading > .library-preview-identity { flex: 1 1 0; min-width: 0; max-width: 100%; }
.library-preview-heading .library-preview-actions {
    display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center;
    width: fit-content; max-width: 100%; gap: 6px; margin: 10px 0 0;
}
.library-preview-heading .library-preview-actions > .library-preview-more { flex: 0 0 auto; margin-left: 0; }
.library-preview-heading .library-preview-actions > button,
.library-preview-heading .library-preview-actions > a {
    flex: 0 1 auto; max-width: 100%; white-space: normal; overflow-wrap: anywhere;
}
.preview-avatar-wrap { position: relative; flex: 0 0 auto !important; cursor: zoom-in; }
.preview-avatar-wrap .avatar-zoom-cue { position: absolute; bottom: 8px; right: 8px; display: grid; place-items: center; width: 26px; height: 26px; border: 1px solid var(--line); border-radius: 50%; background: var(--paper); }
.library-preview-heading:has(.entry-avatar) { margin: 8px 0 20px; align-items: center; }
.library-preview-heading:has(.entry-avatar) h2 { font-size: 28px; }
.reference-character-portrait { display: inline-flex; }
.library-combat-section,
.reading > details.character-statblock-wrapper { margin: 18px 0; border: 1px solid var(--line); border-radius: 7px; padding: 0; }
.library-combat-section > summary,
.reading > details.character-statblock-wrapper > summary { padding: 10px 12px; cursor: pointer; font-size: 13px; font-weight: 600; }
.library-combat-section > .character-statblock-wrapper { margin: 0; border: 0; }
.reading > details.character-statblock-wrapper > :not(summary) { margin: 12px; }
.library-preview-gallery > .section-heading { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.library-preview-gallery > .section-heading h3 { margin: 0; }
.library-preview-gallery > .library-preview-images { display: flex; flex-wrap: wrap; gap: 12px; min-height: 40px; }
.library-preview-images[data-empty] { padding: 12px; border: 1px dashed var(--line); border-radius: 6px; }
.library-preview-images .hint { margin: 0; }
.library-draft-status { margin: 0; }
.reading > .field-list:empty, .library-preview-pane > .field-list:empty { display: none; }

@container material-preview (max-width: 560px) {
    .library-preview-heading .entry-avatar { --avatar-size: 120px !important; }
    .library-preview-heading:has(.entry-avatar) { gap: 12px; }
    .library-preview-heading:has(.entry-avatar) h2 { font-size: 24px; }
}
@container material-preview (max-width: 359px) {
    .library-preview-pane > .library-preview-heading { flex-wrap: wrap; align-items: flex-start; }
    .library-preview-heading > .library-preview-identity { flex: 1 1 190px; }
    .library-preview-heading .library-preview-actions > .library-preview-more[open] { flex-basis: 100%; }
    .library-preview-heading .library-preview-actions > .library-preview-more[open] > summary { width: fit-content; }
    .library-preview-heading .library-preview-actions > .library-preview-more > .library-preview-more-menu {
        position: static; width: min(200px, 100%); max-width: 100%; margin-top: 5px;
    }
}
@media (max-width: 740px) {
    .reading h1.has-avatar { flex-direction: column; align-items: flex-start; }
    .reading h1.has-avatar .entry-avatar { --avatar-size: 150px !important; }
    .library-layout .library-filters > input { grid-column: auto; }
    .reading-heading > h1 { font-size: 33px; }
    .reading-heading .reading-actions button, .reading-more > summary { min-height: 44px; }
    .reading-more[open] { flex-basis: 100%; }
    .reading-more-menu { position: static; width: min(220px, 100%); max-width: 100%; margin-top: 5px; }
}

/* Profile controls follow the available card width, independently of the battle UI. */
:is(.library-preview-pane, .reading) .statblock-card-header {
    align-items: flex-start; gap: 8px 12px;
}
:is(.library-preview-pane, .reading) .statblock-badge-group {
    flex: 1 1 200px; min-width: 0;
}
:is(.library-preview-pane, .reading) .statblock-linked-title {
    min-width: 0; margin: 0; overflow-wrap: anywhere;
}
:is(.library-preview-pane, .reading) .statblock-header-tools {
    flex: 0 1 auto; flex-wrap: wrap; justify-content: flex-start; min-width: 0; max-width: 100%;
}
:is(.library-preview-pane, .reading) .statblock-header-tools > :is(button, a) {
    max-width: 100%; min-height: var(--control-height, 40px); white-space: normal;
}
:is(.library-preview-pane, .reading) .hp-tracker-unit {
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; max-width: 100%;
}
:is(.library-preview-pane, .reading) .hp-value-display {
    display: inline-flex; align-items: baseline; gap: 4px; white-space: nowrap;
}
:is(.library-preview-pane, .reading) .combat-quick-tracker .hp-btn {
    flex: 0 0 auto; min-height: var(--control-height, 40px);
}

/* A sheet can be narrow inside a wide desktop library; viewport media queries cannot detect that. */
:is(.library-preview-pane, .reading) .statblock-reading-compact {
    min-width: 0; max-width: 100%; overflow-x: auto;
}
:is(.library-preview-pane, .reading) .lss-sheet-container {
    container-type: inline-size; container-name: library-statblock-sheet; min-width: 0; max-width: 100%;
}
:is(.library-preview-pane, .reading) .lss-toolbar > div {
    min-width: 0; max-width: 100%;
}
:is(.library-preview-pane, .reading) :is(.lss-page-tabs, .lss-toolbar-right, .lss-zoom-group) {
    flex-wrap: wrap; min-width: 0; max-width: 100%;
}
:is(.library-preview-pane, .reading) .lss-attacks-box {
    min-width: 0; max-width: 100%; overflow-x: auto;
}
@container library-statblock-sheet (max-width: 1080px) {
    :is(.library-preview-pane, .reading) .lss-header { grid-template-columns: minmax(0, 1fr); }
    :is(.library-preview-pane, .reading) .lss-header-name-box {
        border-right: 0; border-bottom: 1.5px solid var(--lss-border-faint); padding-right: 0; padding-bottom: 10px;
    }
    :is(.library-preview-pane, .reading) .lss-header-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    :is(.library-preview-pane, .reading) .lss-3col-sheet-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    :is(.library-preview-pane, .reading) .lss-col-3 { grid-column: 1 / -1; }
}
@container library-statblock-sheet (max-width: 680px) {
    :is(.library-preview-pane, .reading) .lss-header-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    :is(.library-preview-pane, .reading) .lss-3col-sheet-grid { grid-template-columns: minmax(0, 1fr); }
    :is(.library-preview-pane, .reading) .lss-col-3 { grid-column: auto; }
}

/* The library sheet keeps navigation and saving visible; appearance is a disclosure. */
:is(.library-preview-pane, .reading) .lss-logo-badge { display: none; }
:is(.library-preview-pane, .reading) .lss-toolbar {
    justify-content: flex-start; align-items: center; gap: 6px; padding-bottom: 8px;
}
:is(.library-preview-pane, .reading) .lss-toolbar-left {
    flex: 1 0 auto; min-width: 0; max-width: 100%; gap: 6px;
}
:is(.library-preview-pane, .reading) .lss-page-tabs { gap: 6px; }
:is(.library-preview-pane, .reading) .lss-toolbar-right {
    order: 2; flex: 0 0 auto; gap: 6px; max-width: 100%;
}
:is(.library-preview-pane, .reading) .library-sheet-options {
    order: 1; position: relative; flex: 0 0 auto; min-width: 0; max-width: 100%;
}
:is(.library-preview-pane, .reading) .library-sheet-options > summary {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px; list-style: none;
    min-height: var(--control-height, 40px); padding: 6px 12px; cursor: pointer;
    font: 600 12px/1.4 var(--lss-font); color: var(--lss-text); background: var(--lss-box-bg);
    border: 1.5px solid var(--lss-border-subtle); border-radius: 6px;
}
:is(.library-preview-pane, .reading) .library-sheet-options > summary::-webkit-details-marker { display: none; }
:is(.library-preview-pane, .reading) .library-sheet-options > summary::after { content: '▾'; }
:is(.library-preview-pane, .reading) .library-sheet-options[open] > summary::after { content: '▴'; }
:is(.library-preview-pane, .reading) .library-sheet-options-menu {
    position: absolute; right: 0; top: calc(100% + 6px); z-index: 30;
    display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
    width: 360px; max-width: calc(100cqw - 40px); padding: 10px;
    color: var(--lss-text); background: var(--lss-box-bg); border: 1.5px solid var(--lss-border-subtle);
    border-radius: 6px; box-shadow: var(--shadow);
}
:is(.library-preview-pane, .reading) .library-sheet-options:not([open]) > .library-sheet-options-menu { display: none; }
:is(.library-preview-pane, .reading) .library-sheet-options-menu .lss-toolbar-center {
    justify-content: flex-start; align-items: center; gap: 6px; min-width: 0; max-width: 100%;
}
@container library-statblock-sheet (max-width: 680px) {
    :is(.library-preview-pane, .reading) .library-sheet-options[open] { order: 3; flex: 1 1 100%; }
    :is(.library-preview-pane, .reading) .library-sheet-options-menu {
        position: static; width: 100%; max-width: 100%; margin-top: 6px; box-shadow: none;
    }
}


/* Rectangular source image and a movable circular frame; appended after legacy app.css. */
.avatar-editor-dialog #avatar-fields.avatar-editor-fields { display: flex; flex-direction: column; gap: 12px; min-width: 0; margin: 0; padding: 0; border: 0; }
.avatar-editor-dialog .avatar-editor-intro { font-size: 14px; line-height: 1.55; }
.avatar-editor-dialog .avatar-source-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.avatar-editor-dialog .avatar-source-fields label { min-width: 0; margin: 0; font-size: 13px; }
.avatar-editor-dialog .avatar-source-fields input, .avatar-editor-dialog .avatar-source-fields select { width: 100%; min-width: 0; min-height: var(--control-height, 36px); font-size: 14px; }
.avatar-editor-dialog .avatar-crop-workspace { display: grid; grid-template-columns: minmax(0, 1fr) 190px; gap: 20px; min-width: 0; align-items: start; }
.avatar-editor-dialog .avatar-crop-image-area { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.avatar-editor-dialog #avatar-preview-status { margin: 0; font-size: 12px; line-height: 1.5; }
.avatar-editor-dialog .avatar-crop-stage { position: relative; width: 100%; max-width: min(100%, calc(min(50dvh, 420px) * var(--avatar-source-ratio, 1))); aspect-ratio: var(--avatar-source-ratio, 1); margin-inline: auto; overflow: hidden; border-radius: 4px; background: var(--soft); cursor: crosshair; touch-action: none; user-select: none; }
.avatar-editor-dialog .avatar-crop-stage[hidden] { display: none; }
.avatar-editor-dialog .avatar-crop-stage:focus-visible { outline: 3px solid var(--chrome-accent); outline-offset: 3px; }
.avatar-editor-dialog .avatar-crop-source { display: block; width: 100%; height: 100%; max-width: none; margin: 0; object-fit: contain; pointer-events: none; user-select: none; }
.avatar-editor-dialog .avatar-crop-overlay { position: absolute; inset: 0; width: 100%; height: 100%; overflow: hidden; }
.avatar-editor-dialog .avatar-crop-shade { fill: var(--header); opacity: .68; pointer-events: none; }
.avatar-editor-dialog .avatar-crop-outline { fill: none; stroke: var(--paper); stroke-width: 6px; vector-effect: non-scaling-stroke; pointer-events: none; }
.avatar-editor-dialog .avatar-crop-selection { fill: none; stroke: var(--gold); stroke-width: 3px; vector-effect: non-scaling-stroke; cursor: grab; }
.avatar-editor-dialog .avatar-crop-stage.dragging, .avatar-editor-dialog .avatar-crop-stage.dragging .avatar-crop-selection { cursor: grabbing; }
.avatar-editor-dialog .avatar-crop-stage[aria-disabled="true"] { cursor: default; }
.avatar-editor-dialog .avatar-crop-sidebar { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.avatar-editor-dialog .avatar-crop-result-wrap { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; font-size: 12px; color: var(--muted); }
.avatar-editor-dialog .avatar-crop-result { display: block; width: 96px; height: 96px; border: 1px solid var(--line); border-radius: 50%; background: var(--soft); }
.item-thumbnail-editor-dialog .avatar-crop-result { border-radius: 6px; }
.avatar-editor-dialog .avatar-zoom-control { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.avatar-editor-dialog .avatar-zoom-control label { margin: 0; font-size: 13px; }
.avatar-editor-dialog .avatar-zoom-control input[type="range"] { width: 100%; min-width: 0; min-height: var(--control-height, 36px); margin: 0; padding: 0; accent-color: var(--chrome-accent); }
.avatar-editor-dialog .avatar-zoom-actions { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.avatar-editor-dialog .avatar-zoom-actions button { min-width: var(--control-height, 36px); min-height: var(--control-height, 36px); font-size: 20px; padding: 4px; }
.avatar-editor-dialog #avatar-crop-values { color: var(--ink); font-size: 14px; font-variant-numeric: tabular-nums; }
.avatar-editor-dialog .avatar-crop-help { font-size: 12px; line-height: 1.6; margin: 0; }
.avatar-editor-dialog .avatar-editor-storage { font-size: 12px; line-height: 1.55; }
.avatar-editor-dialog #avatar-extra-actions:empty { display: none; }
@media (max-width: 740px) {
    .avatar-editor-dialog #avatar-fields.avatar-editor-fields { gap: 10px; }
    .avatar-editor-dialog .avatar-editor-intro { display: none; }
    .avatar-editor-dialog .avatar-source-fields { grid-template-columns: minmax(0, 1fr); gap: 8px; }
    .avatar-editor-dialog .avatar-source-fields input, .avatar-editor-dialog .avatar-source-fields select, .avatar-editor-dialog .avatar-zoom-control input[type="range"], .avatar-editor-dialog .avatar-zoom-actions button { min-height: 44px; }
    .avatar-editor-dialog .avatar-crop-workspace { grid-template-columns: minmax(0, 1fr); gap: 10px; }
    .avatar-editor-dialog .avatar-crop-stage { max-width: min(100%, calc(min(28dvh, 240px) * var(--avatar-source-ratio, 1))); }
    .avatar-editor-dialog .avatar-crop-sidebar { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 8px 14px; }
    .avatar-editor-dialog .avatar-crop-result-wrap { grid-column: 1; grid-row: 1; }
    .avatar-editor-dialog .avatar-crop-result { width: 64px; height: 64px; }
    .avatar-editor-dialog .avatar-zoom-control { grid-column: 2; grid-row: 1; }
    .avatar-editor-dialog .avatar-zoom-actions button { min-width: 44px; }
    .avatar-editor-dialog .avatar-crop-help { grid-column: 1 / -1; }
    .avatar-editor-dialog footer button { min-height: 44px; }
}

/* A bounded catalog scrolls complete rows; it never compresses their text. */
.prepared-events-dialog #prepared-event-list {
    align-items: stretch;
    min-height: 0;
    overflow-x: hidden;
}
.prepared-events-dialog .prepared-event-choice {
    flex: 0 0 auto;
    height: auto;
    min-height: var(--control-height, 36px);
    justify-content: flex-start;
    white-space: normal;
    padding-right: 28px;
}
.prepared-events-dialog .prepared-event-choice > .prepared-event-title,
.prepared-events-dialog .prepared-event-choice > .prepared-event-summary,
.prepared-events-dialog .prepared-event-choice > .prepared-event-rule {
    display: block;
    flex: 0 0 auto;
    min-width: 0;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
    margin: 0;
}

/* ==========================================================================
   GM ATLAS · MODERN GAME RUNNING INTERFACE (DM SCREEN & DESK)
   Target: Desktops & Tablets · Ergonomic, Readable, Modern TTRPG Experience
   ========================================================================== */

:root {
    --desk-sidebar-width: 440px;
    --desk-accent: #2e6b56;
    --desk-accent-hover: #245846;
    --desk-gold: #c99738;
    --desk-gold-soft: #fcf6e8;
    --desk-danger: #c24b38;
    --desk-danger-soft: #fdf0ed;
    --desk-card-bg: #ffffff;
    --desk-card-border: #dbe2d8;
    --desk-card-hover: #f7faf5;
    --desk-text-primary: #1c2b23;
    --desk-text-muted: #5d7065;
    --desk-read-aloud-bg: #fcf9ee;
    --desk-read-aloud-border: #cfaf64;
    --desk-shadow-sm: 0 2px 8px rgba(28, 43, 35, 0.05);
    --desk-shadow-md: 0 6px 20px rgba(28, 43, 35, 0.08);
    --desk-shadow-lg: 0 14px 36px rgba(28, 43, 35, 0.14);
    --desk-radius-sm: 6px;
    --desk-radius-md: 10px;
    --desk-radius-lg: 14px;
}

body.night {
    --desk-card-bg: #223228;
    --desk-card-border: #35473c;
    --desk-card-hover: #283b30;
    --desk-text-primary: #e6eee5;
    --desk-text-muted: #9fb3a4;
    --desk-read-aloud-bg: #2b392f;
    --desk-read-aloud-border: #8c723b;
    --desk-gold-soft: #383222;
    --desk-danger-soft: #3d2724;
    --desk-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.25);
    --desk-shadow-md: 0 6px 20px rgba(0, 0, 0, 0.35);
    --desk-shadow-lg: 0 14px 36px rgba(0, 0, 0, 0.5);
}

/* ==========================================================================
   1. WORKSPACE FLEX LAYOUT & RESIZABLE SPLIT PANE
   ========================================================================== */

#app:has(> .workspace) {
    display: flex;
    flex-direction: column;
    height: 100dvh;
    overflow: hidden;
}

.workspace {
    display: flex !important;
    flex-direction: row;
    flex: 1 1 0%;
    min-height: 0;
    width: 100%;
    height: calc(100dvh - 66px);
    overflow: hidden;
    position: relative;
    grid-template-columns: none !important;
}

.map-workspace {
    flex: 1 1 0%;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    position: relative;
    background: #e3e6dd;
}

/* Draggable Split Resizer */
.desk-split-resizer {
    position: relative;
    flex: 0 0 12px;
    width: 12px;
    margin: 0;
    cursor: col-resize;
    user-select: none;
    touch-action: none;
    background: color-mix(in srgb, var(--chrome-surface, #f7f8f0) 70%, transparent);
    border-left: 1px solid var(--line);
    border-right: 1px solid var(--line);
    z-index: 15;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.desk-split-resizer::after {
    content: '';
    display: block;
    width: 4px;
    height: 44px;
    border-radius: 2px;
    background: var(--muted);
    opacity: 0.5;
    transition: background 0.15s ease, height 0.15s ease, opacity 0.15s ease;
}

.desk-split-resizer:hover,
.desk-split-resizer.is-dragging {
    background: color-mix(in srgb, var(--desk-accent) 15%, var(--paper));
    border-color: var(--desk-accent);
}

.desk-split-resizer:hover::after,
.desk-split-resizer.is-dragging::after {
    background: var(--desk-accent);
    height: 72px;
    opacity: 1;
}

body.is-resizing-desk {
    cursor: col-resize !important;
    user-select: none !important;
}

body.is-resizing-desk iframe,
body.is-resizing-desk svg {
    pointer-events: none !important;
}

/* Inspector Container */
aside.inspector {
    flex: 0 0 var(--sidebar, var(--desk-sidebar-width, 440px));
    width: var(--sidebar, var(--desk-sidebar-width, 440px));
    min-width: 330px;
    max-width: min(850px, 70vw);
    min-height: 0;
    display: flex;
    flex-direction: column;
    background: var(--paper);
    box-shadow: var(--desk-shadow-lg);
    z-index: 14;
    transition: width 0.05s linear;
}

.workspace.inspector-collapsed aside.inspector,
.workspace.inspector-collapsed .desk-split-resizer {
    display: none !important;
}

/* Floating button when inspector is collapsed */
.canvas-wrap .inspector-toggle {
    position: absolute;
    top: 14px;
    right: 14px;
    bottom: auto;
    left: auto;
    z-index: 20;
    display: none;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    font-size: 13px;
    font-weight: 650;
    background: var(--chrome-surface, #f7f8f0);
    color: var(--chrome-text, #1c2b23);
    border: 1px solid var(--desk-card-border);
    border-radius: var(--desk-radius-md);
    box-shadow: var(--desk-shadow-md);
    cursor: pointer;
    backdrop-filter: blur(8px);
    transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

.workspace.inspector-collapsed .canvas-wrap .inspector-toggle {
    display: inline-flex !important;
}

.canvas-wrap .inspector-toggle:hover {
    background: var(--paper);
    border-color: var(--desk-accent);
    transform: translateY(-1px);
}

/* ==========================================================================
   2. TOP BAR & NAVIGATION TABS
   ========================================================================== */

.app-top {
    min-height: 60px;
    padding: 0 20px;
    background: linear-gradient(180deg, #182820 0%, #13221b 100%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
    display: flex;
    align-items: center;
    gap: 16px;
    z-index: 30;
}

.app-top .brand {
    gap: 10px;
    color: #f7faf5;
    letter-spacing: 0.5px;
}

.app-top .brand-icon {
    font-size: 28px;
    color: #e3be74;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.4));
}

.app-top .brand span {
    font-size: 14px;
    font-weight: 750;
}

.app-top .brand small {
    color: #9cb1a2;
    font-size: 10px;
    font-weight: 500;
}

/* Mode Switch: Ведение vs Редактор */
.app-top .mode-switch {
    display: inline-flex;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--desk-radius-md);
    padding: 3px;
    gap: 2px;
}

.app-top .mode-switch button {
    border: 0;
    border-radius: var(--desk-radius-sm);
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 650;
    color: #a4b9ab;
    background: transparent;
    cursor: pointer;
    transition: all 0.15s ease;
    min-height: 32px;
}

.app-top .mode-switch button:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.08);
}

.app-top .mode-switch button.active {
    background: #2b5744;
    color: #ffffff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

/* Nav Tabs: Карта, Журнал, Бой, Библиотека */
.app-top .top-links {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: 8px;
}

.app-top .top-links .nav-tab,
.app-top .top-links .nav-tab-link,
.app-top .top-links button,
.app-top .top-links a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 36px;
    padding: 7px 14px;
    font-size: 13px;
    font-weight: 600;
    color: #c0d1c5;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--desk-radius-sm);
    text-decoration: none;
    cursor: pointer;
    transition: all 0.15s ease;
}

.app-top .top-links .nav-tab:hover,
.app-top .top-links .nav-tab-link:hover,
.app-top .top-links button:hover,
.app-top .top-links a:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.2);
}

.app-top .top-links .nav-tab.active,
.app-top .top-links button.active {
    background: #d8aa4e;
    color: #17241c;
    border-color: #f1cf85;
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(216, 170, 78, 0.35);
}

/* Top Right Clock & Utilities */
.app-top .top-right {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
}

#clock-button {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--desk-radius-sm);
    padding: 5px 12px;
    text-align: left;
    cursor: pointer;
    transition: all 0.15s ease;
}

#clock-button:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: #e3be74;
}

#clock-button small {
    display: block;
    font-size: 9px;
    letter-spacing: 1px;
    color: #9cb1a2;
    text-transform: uppercase;
}

#clock-button b {
    display: block;
    font-size: 12px;
    color: #f5f8f3;
    font-weight: 650;
}

/* ==========================================================================
   3. INSPECTOR HEADER & CONTROLS
   ========================================================================== */

aside.inspector > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 52px;
    min-height: 52px;
    padding: 0 16px;
    background: var(--chrome-surface, #f7f8f0);
    border-bottom: 1px solid var(--line);
}

#panel-crumb {
    font-size: 11px;
    font-weight: 750;
    letter-spacing: 1.2px;
    color: var(--desk-text-muted);
    text-transform: uppercase;
}

.inspector-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

#context {
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 650;
    border-radius: var(--desk-radius-sm);
    border: 1px solid var(--line);
    background: var(--paper);
    color: var(--desk-text-primary);
    cursor: pointer;
    transition: all 0.15s ease;
}

#context:hover {
    background: var(--soft);
    border-color: var(--desk-accent);
}

#inspector-collapse-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    min-width: 32px;
    min-height: 32px;
    padding: 0;
    border-radius: var(--desk-radius-sm);
    border: 1px solid var(--line);
    background: var(--paper);
    color: var(--desk-text-muted);
    font-size: 14px;
    cursor: pointer;
    transition: all 0.15s ease;
}

#inspector-collapse-btn:hover {
    background: var(--soft);
    color: var(--desk-text-primary);
    border-color: var(--desk-accent);
}

#inspector-body {
    padding: 20px 22px 50px;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    flex: 1;
}

/* ==========================================================================
   4. LOCATION / POI OPERATIONAL CARD (placePanel)
   ========================================================================== */

/* Party presence banner */
.party-status-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 10px 14px;
    margin-bottom: 16px;
    border-radius: var(--desk-radius-md);
    box-sizing: border-box;
    transition: all 0.15s ease;
}

.party-status-banner.here {
    background: color-mix(in srgb, var(--desk-accent) 12%, var(--paper));
    border: 1px solid var(--desk-accent);
    color: var(--desk-text-primary);
}

.party-status-banner.here .banner-badge {
    font-weight: 700;
    font-size: 13px;
    color: var(--desk-accent);
    display: flex;
    align-items: center;
    gap: 6px;
}

.party-status-banner.here .banner-note {
    font-size: 11px;
    color: var(--desk-text-muted);
}

.party-status-banner.not-here {
    background: var(--desk-card-bg);
    border: 1px dashed var(--desk-card-border);
    cursor: pointer;
    text-align: left;
}

.party-status-banner.not-here:hover {
    border-color: var(--desk-accent);
    background: var(--desk-card-hover);
}

.party-status-banner.not-here .banner-badge {
    font-weight: 650;
    font-size: 12px;
    color: var(--desk-text-primary);
    display: flex;
    align-items: center;
    gap: 6px;
}

.party-status-banner.not-here .banner-note {
    font-size: 11px;
    color: var(--desk-text-muted);
}

/* Place Headings */
.place-title {
    font-size: 26px !important;
    font-weight: 750 !important;
    line-height: 1.2 !important;
    margin: 6px 0 10px !important;
    color: var(--desk-text-primary);
}

.place-summary.lead {
    font-family: Georgia, serif;
    font-size: 15px;
    line-height: 1.6;
    color: var(--desk-text-muted);
    margin-bottom: 16px;
}

.place-quick-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 20px;
}

.place-quick-actions .btn-action {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 38px;
    padding: 8px 14px;
    font-size: 12px;
    font-weight: 650;
    border-radius: var(--desk-radius-sm);
    border: 1px solid var(--desk-card-border);
    background: var(--desk-card-bg);
    color: var(--desk-text-primary);
    text-decoration: none;
    cursor: pointer;
    transition: all 0.15s ease;
}

.place-quick-actions .btn-action:hover {
    background: var(--desk-card-hover);
    border-color: var(--desk-accent);
}

.place-quick-actions .btn-action.primary {
    background: var(--desk-accent);
    border-color: var(--desk-accent);
    color: #ffffff;
}

.place-quick-actions .btn-action.primary:hover {
    background: var(--desk-accent-hover);
}

/* Read-Aloud Box (Зачитать игрокам) */
.read-aloud-card {
    background: var(--desk-read-aloud-bg);
    border: 1px solid color-mix(in srgb, var(--desk-read-aloud-border) 40%, var(--line));
    border-left: 4px solid var(--desk-gold);
    border-radius: var(--desk-radius-md);
    padding: 16px 18px;
    margin: 20px 0;
    box-shadow: var(--desk-shadow-sm);
}

.read-aloud-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.read-aloud-icon {
    font-size: 20px;
}

.read-aloud-title b {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: var(--desk-gold);
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.read-aloud-title small {
    display: block;
    font-size: 11px;
    color: var(--desk-text-muted);
}

.read-aloud-quote {
    font-family: Georgia, serif;
    font-style: italic;
    font-size: 15px;
    line-height: 1.65;
    color: var(--desk-text-primary);
    margin: 0 0 12px 0;
    padding: 0;
    border: 0;
    background: transparent;
}

.sensory-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 8px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid color-mix(in srgb, var(--desk-read-aloud-border) 25%, transparent);
}

.sensory-chip {
    display: flex;
    align-items: baseline;
    gap: 6px;
    font-size: 12px;
    line-height: 1.4;
    color: var(--desk-text-primary);
    background: color-mix(in srgb, var(--desk-read-aloud-bg) 80%, var(--paper));
    border: 1px solid color-mix(in srgb, var(--desk-read-aloud-border) 30%, transparent);
    border-radius: var(--desk-radius-sm);
    padding: 6px 10px;
}

.sensory-chip b {
    font-size: 11px;
    color: var(--desk-gold);
    white-space: nowrap;
}

/* Card Sections */
.card-section {
    margin: 24px 0;
}

.section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.section-title h3 {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--desk-text-primary);
}

.counter-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 7px;
    font-size: 11px;
    font-weight: 700;
    border-radius: 12px;
    background: var(--soft);
    color: var(--desk-accent);
    border: 1px solid var(--line);
}

/* NPCs Roster */
.npc-roster-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.npc-card {
    background: var(--desk-card-bg);
    border: 1px solid var(--desk-card-border);
    border-radius: var(--desk-radius-md);
    padding: 14px 16px;
    box-shadow: var(--desk-shadow-sm);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.npc-card:hover {
    border-color: var(--desk-accent);
    box-shadow: var(--desk-shadow-md);
}

.npc-card-head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.npc-avatar-wrap {
    flex-shrink: 0;
}

.npc-avatar-wrap .entry-avatar,
.npc-avatar-wrap .avatar-fallback {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    box-shadow: 0 0 0 2px var(--desk-card-border);
}

.npc-main-info {
    flex: 1;
    min-width: 0;
}

.npc-name-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 4px;
}

.npc-name {
    font-size: 15px;
    font-weight: 700;
    color: var(--desk-text-primary);
    text-decoration: none;
}

.npc-name:hover {
    color: var(--desk-accent);
    text-decoration: underline;
}

.npc-faction {
    font-size: 10px;
    font-weight: 600;
    padding: 2px 7px;
    background: var(--desk-gold-soft);
    border: 1px solid var(--desk-gold);
    color: var(--desk-gold);
    border-radius: 4px;
}

.npc-summary {
    font-size: 12px;
    line-height: 1.45;
    color: var(--desk-text-muted);
    margin: 4px 0 0;
}

.npc-goal {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-top: 8px;
    padding: 6px 10px;
    background: var(--soft);
    border-radius: var(--desk-radius-sm);
    font-size: 12px;
    color: var(--desk-text-primary);
}

.npc-goal .goal-icon {
    font-size: 12px;
}

.npc-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid var(--line);
}

.npc-btn-link,
.npc-btn-sb {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 10px;
    font-size: 11px;
    font-weight: 650;
    border-radius: var(--desk-radius-sm);
    border: 1px solid var(--desk-card-border);
    background: var(--desk-card-bg);
    color: var(--desk-text-primary);
    cursor: pointer;
    text-decoration: none;
    transition: all 0.15s ease;
}

.npc-btn-link:hover,
.npc-btn-sb:hover {
    border-color: var(--desk-accent);
    background: var(--desk-card-hover);
}

.npc-btn-sb {
    background: color-mix(in srgb, var(--desk-accent) 8%, var(--paper));
    border-color: var(--desk-accent);
    color: var(--desk-accent);
}

/* Sub-maps Grid */
.submap-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 8px;
}

.submap-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    border-radius: var(--desk-radius-md);
    border: 1px solid var(--desk-card-border);
    border-left: 4px solid var(--desk-gold);
    background: var(--desk-card-bg);
    cursor: pointer;
    text-align: left;
    transition: all 0.15s ease;
}

.submap-card:hover {
    background: var(--desk-card-hover);
    border-color: var(--desk-gold);
    transform: translateX(2px);
}

.submap-info b {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: var(--desk-text-primary);
}

.submap-info small {
    display: block;
    font-size: 11px;
    color: var(--desk-text-muted);
    margin-top: 2px;
}

.submap-arrow {
    font-size: 16px;
    font-weight: bold;
    color: var(--desk-gold);
}

/* Encounters Grid */
.encounters-grid {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.encounter-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border-radius: var(--desk-radius-md);
    border: 1px solid var(--desk-card-border);
    border-left: 4px solid var(--desk-danger);
    background: var(--desk-danger-soft);
}

.enc-info b {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: var(--desk-text-primary);
}

.enc-info p {
    font-size: 11px;
    color: var(--desk-text-muted);
    margin: 2px 0 0;
}

.btn-launch-encounter {
    padding: 8px 14px;
    font-size: 12px;
    font-weight: 700;
    border-radius: var(--desk-radius-sm);
    border: 0;
    background: var(--desk-danger);
    color: #ffffff;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s ease;
}

.btn-launch-encounter:hover {
    background: #a93c2b;
}

/* Routes List */
.routes-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.route-choice-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-radius: var(--desk-radius-md);
    border: 1px solid var(--desk-card-border);
    background: var(--desk-card-bg);
    cursor: pointer;
    text-align: left;
    transition: all 0.15s ease;
}

.route-choice-btn:hover {
    background: var(--desk-card-hover);
    border-color: var(--desk-accent);
}

.route-icon {
    font-size: 16px;
    font-weight: bold;
    color: var(--desk-gold);
}

.route-choice-info {
    flex: 1;
    min-width: 0;
}

.route-choice-info b {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: var(--desk-text-primary);
}

.route-choice-info small {
    display: block;
    font-size: 11px;
    color: var(--desk-text-muted);
}

.route-arrow {
    font-size: 11px;
    font-weight: 650;
    color: var(--desk-accent);
}

/* Operational Notes Card */
.note-card {
    background: var(--desk-card-bg);
    border: 1px solid var(--desk-card-border);
    border-radius: var(--desk-radius-md);
    padding: 16px 18px;
    box-shadow: var(--desk-shadow-sm);
}

.note-row {
    margin-bottom: 12px;
}

.check-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    cursor: pointer;
    user-select: none;
}

.input-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 12px;
}

.input-group label {
    font-size: 11px;
    font-weight: 650;
    color: var(--desk-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.btn-save-note {
    width: 100%;
    padding: 10px;
    font-size: 12px;
    font-weight: 650;
    background: var(--desk-accent);
    color: #ffffff;
    border: 1px solid var(--desk-accent);
    border-radius: var(--desk-radius-sm);
    cursor: pointer;
    transition: background 0.15s ease;
}

.btn-save-note:hover {
    background: var(--desk-accent-hover);
}

/* ==========================================================================
   5. COMBAT / ENCOUNTER SCREEN (battle)
   ========================================================================== */

.combat-top-card {
    background: var(--desk-card-bg);
    border: 1px solid var(--desk-card-border);
    border-radius: var(--desk-radius-md);
    padding: 16px 18px;
    margin-bottom: 20px;
    box-shadow: var(--desk-shadow-sm);
}

.combat-round-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 14px 0 10px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--line);
}

.combat-round-counter {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    background: var(--desk-gold-soft);
    border: 1px solid var(--desk-gold);
    border-radius: 20px;
}

.combat-round-counter .label {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1px;
    color: var(--desk-gold);
}

.combat-round-counter .num {
    font-size: 18px;
    font-weight: 800;
    color: var(--desk-gold);
}

.btn-next-round {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 700;
    border-radius: var(--desk-radius-sm);
    background: var(--desk-accent);
    color: #ffffff;
    border: 0;
    cursor: pointer;
    transition: background 0.15s ease;
}

.btn-next-round:hover {
    background: var(--desk-accent-hover);
}

.combat-actions-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.combat-actions-row button {
    font-size: 11px;
    padding: 6px 10px;
    border-radius: var(--desk-radius-sm);
}

/* Combat Actor Cards */
.actor-card {
    background: var(--desk-card-bg);
    border: 1px solid var(--desk-card-border);
    border-left: 5px solid #6b8273;
    border-radius: var(--desk-radius-md);
    padding: 14px 16px;
    margin-bottom: 12px;
    box-shadow: var(--desk-shadow-sm);
    transition: all 0.15s ease;
}

.actor-card.is-active-turn {
    border-left-color: var(--desk-gold);
    box-shadow: 0 0 0 2px var(--desk-gold), var(--desk-shadow-md);
    background: color-mix(in srgb, var(--desk-gold-soft) 25%, var(--desk-card-bg));
}

.actor-card.is-down {
    border-left-color: var(--desk-danger);
    opacity: 0.65;
}

.actor-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}

.actor-identity {
    display: flex;
    align-items: center;
    gap: 10px;
}

.actor-identity h3 {
    font-size: 16px;
    font-weight: 750;
    margin: 0;
    color: var(--desk-text-primary);
}

.turn-badge {
    font-size: 10px;
    font-weight: 800;
    padding: 3px 8px;
    border-radius: 12px;
    background: var(--desk-gold);
    color: #ffffff;
    letter-spacing: 0.5px;
    animation: turn-pulse 2s infinite;
}

@keyframes turn-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

.actor-badges {
    display: flex;
    align-items: center;
    gap: 6px;
}

.badge-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    font-size: 11px;
    font-weight: 700;
    border-radius: var(--desk-radius-sm);
    background: var(--soft);
    border: 1px solid var(--line);
    color: var(--desk-text-primary);
}

/* Health Bar & Interactive Steppers */
.actor-hp-section {
    margin: 10px 0;
}

.hp-bar-track {
    position: relative;
    width: 100%;
    height: 22px;
    background: var(--soft);
    border: 1px solid var(--line);
    border-radius: 11px;
    overflow: hidden;
    margin-bottom: 8px;
}

.hp-bar-fill {
    height: 100%;
    transition: width 0.25s ease, background 0.25s ease;
}

.hp-bar-fill.healthy {
    background: linear-gradient(90deg, #2e8b57, #3cb371);
}

.hp-bar-fill.warning {
    background: linear-gradient(90deg, #e67e22, #f39c12);
}

.hp-bar-fill.danger {
    background: linear-gradient(90deg, #c0392b, #e74c3c);
}

.hp-bar-text {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 800;
    color: #ffffff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
    pointer-events: none;
}

.hp-steppers-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    flex-wrap: wrap;
}

.hp-btn-group {
    display: flex;
    align-items: center;
    gap: 4px;
}

.hp-btn {
    min-height: 28px;
    padding: 4px 8px;
    font-size: 11px;
    font-weight: 750;
    border-radius: var(--desk-radius-sm);
    cursor: pointer;
    border: 1px solid var(--desk-card-border);
    background: var(--desk-card-bg);
}

.hp-btn.damage {
    color: var(--desk-danger);
    background: var(--desk-danger-soft);
    border-color: color-mix(in srgb, var(--desk-danger) 40%, transparent);
}

.hp-btn.damage:hover {
    background: var(--desk-danger);
    color: #ffffff;
}

.hp-btn.heal {
    color: #27ae60;
    background: #eafaf1;
    border-color: #a3e4d7;
}

.hp-btn.heal:hover {
    background: #27ae60;
    color: #ffffff;
}

.temp-hp-pill {
    font-size: 11px;
    font-weight: 700;
    padding: 3px 8px;
    background: #ebf5fb;
    border: 1px solid #aed6f1;
    color: #2980b9;
    border-radius: 12px;
}

/* Conditions & Action Toggles */
.actor-toggle-chips {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 8px 0;
}

.toggle-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 650;
    border-radius: var(--desk-radius-sm);
    border: 1px solid var(--desk-card-border);
    background: var(--desk-card-bg);
    cursor: pointer;
    user-select: none;
}

.toggle-chip input {
    margin: 0;
}

.actor-card .turn {
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid var(--line);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.btn-take-turn {
    padding: 6px 12px;
    font-size: 11px;
    font-weight: 700;
    background: var(--soft);
    border: 1px solid var(--line);
    border-radius: var(--desk-radius-sm);
    cursor: pointer;
}

.btn-take-turn:hover {
    background: var(--desk-gold);
    color: #ffffff;
    border-color: var(--desk-gold);
}

/* ==========================================================================
   6. JOURNAL SCREEN (journal)
   ========================================================================== */

.journal-time-card {
    background: var(--desk-card-bg);
    border: 1px solid var(--desk-card-border);
    border-radius: var(--desk-radius-md);
    padding: 16px 18px;
    margin-bottom: 18px;
    box-shadow: var(--desk-shadow-sm);
}

.journal-time-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.journal-clock {
    font-size: 20px;
    font-weight: 800;
    color: var(--desk-text-primary);
}

.journal-party-info {
    font-size: 12px;
    color: var(--desk-text-muted);
}

.quick-time-steppers {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--line);
}

.quick-time-btn {
    padding: 6px 12px;
    font-size: 11px;
    font-weight: 650;
    border-radius: var(--desk-radius-sm);
    border: 1px solid var(--desk-card-border);
    background: var(--desk-card-bg);
    color: var(--desk-text-primary);
    cursor: pointer;
    transition: all 0.15s ease;
}

.quick-time-btn:hover {
    border-color: var(--desk-accent);
    background: var(--desk-card-hover);
}

.trackers-grid {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 20px;
}

.tracker-card {
    background: var(--desk-card-bg);
    border: 1px solid var(--desk-card-border);
    border-radius: var(--desk-radius-md);
    padding: 12px 14px;
    box-shadow: var(--desk-shadow-sm);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.tracker-info b {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: var(--desk-text-primary);
}

.tracker-info small {
    display: block;
    font-size: 11px;
    color: var(--desk-text-muted);
}

.tracker-controls {
    display: flex;
    align-items: center;
    gap: 6px;
}

.tracker-controls input {
    width: 60px !important;
    text-align: center;
    font-weight: 750;
    font-size: 13px;
    padding: 5px;
}

/* ==========================================================================
   7. IN-APP STATBLOCK DRAWER / MODAL
   ========================================================================== */

.statblock-drawer-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(16, 28, 22, 0.6);
    backdrop-filter: blur(4px);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.18s ease;
    padding: 16px;
    box-sizing: border-box;
}

.statblock-drawer-backdrop.open {
    opacity: 1;
}

.statblock-drawer-backdrop.closing {
    opacity: 0;
}

.statblock-drawer {
    width: min(720px, 94vw);
    max-height: 90dvh;
    background: var(--paper);
    border: 1px solid var(--desk-gold);
    border-radius: var(--desk-radius-lg);
    box-shadow: var(--desk-shadow-lg);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: scale(0.96);
    transition: transform 0.18s ease;
}

.statblock-drawer-backdrop.open .statblock-drawer {
    transform: scale(1);
}

.statblock-drawer-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 18px 24px;
    background: var(--chrome-surface, #f7f8f0);
    border-bottom: 2px solid var(--desk-gold);
}

.statblock-drawer-header h2 {
    font-size: 24px;
    font-weight: 800;
    margin: 4px 0;
    color: var(--desk-text-primary);
}

.statblock-drawer-header .cr-badge {
    background: var(--desk-gold-soft);
    border: 1px solid var(--desk-gold);
    color: var(--desk-gold);
    font-weight: 700;
    font-size: 11px;
}

.drawer-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.drawer-close-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid var(--line);
    background: var(--paper);
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.drawer-close-btn:hover {
    background: var(--soft);
    border-color: var(--desk-danger);
    color: var(--desk-danger);
}

.statblock-drawer-body {
    padding: 22px 26px;
    overflow-y: auto;
    flex: 1;
}

/* ==========================================================================
   8. TABLET & RESPONSIVE POLISH (768px - 1100px)
   ========================================================================== */

@media (max-width: 1024px) {
    .app-top {
        padding: 0 12px;
        gap: 8px;
    }
    .app-top .brand span {
        display: inline-block;
    }
    .top-links {
        gap: 4px;
    }
    .top-links .nav-tab,
    .top-links .nav-tab-link {
        padding: 6px 10px;
        font-size: 12px;
    }
    .top-right {
        gap: 6px;
    }
    aside.inspector {
        --desk-sidebar-width: 380px;
        min-width: 320px;
    }
}

@media (max-width: 768px) {
    /* Tablet Portrait Fallback */
    .workspace {
        flex-direction: column;
    }
    .desk-split-resizer {
        display: none !important;
    }
    aside.inspector {
        width: 100% !important;
        max-width: none;
        flex: 1 1 auto;
    }
}

/* ==========================================================================
   AUTHENTIC D&D 5E / LONG STORY SHORT CHARACTER SHEET & STATBLOCK STYLING
   ========================================================================== */

:root {
    --sb-bg: #14171e;
    --sb-sheet-bg: #191c24;
    --sb-box-bg: #1d212b;
    --sb-box-border: #2e3444;
    --sb-border-subtle: rgba(255, 255, 255, 0.08);
    --sb-gold: #c99a3e;
    --sb-gold-bright: #e5b352;
    --sb-gold-bg: rgba(201, 154, 62, 0.12);
    --sb-gold-border: rgba(201, 154, 62, 0.35);
    --sb-ruby: #d94848;
    --sb-ruby-bg: rgba(217, 72, 72, 0.15);
    --sb-azure: #4a90e2;
    --sb-emerald: #27ae60;
    --sb-emerald-bg: rgba(39, 174, 96, 0.15);
    --sb-text: #f0f3f8;
    --sb-text-muted: #9aa5b8;
    --sb-text-faint: #6c788d;
    --sb-font-main: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Formula controls stay beside their value and appear on hover or keyboard focus. */
.lss-sheet-container .lss-calculated-field { position: relative; display: inline-flex; align-items: center; min-width: 0; max-width: 100%; }
.lss-sheet-container .lss-calculated-field > input { min-width: 0; max-width: 100%; }
.lss-sheet-container .lss-formula-trigger { position: absolute; right: -20px; top: 50%; transform: translateY(-50%); width: 20px; min-width: 20px; height: 24px; min-height: 24px; padding: 0; border-radius: 4px; border: 1px solid #ccd4e0; background: #fff; color: #224e81; font: italic 15px Georgia,serif; opacity: 0; z-index: 2; }
.lss-sheet-container .lss-calculated-field:hover .lss-formula-trigger,
.lss-sheet-container .lss-calculated-field:focus-within .lss-formula-trigger { opacity: 1; }
.lss-sheet-container .lss-formula-trigger:focus-visible { outline: 2px solid #367d93; outline-offset: 2px; }
.lss-sheet-container .lss-shield-box .lss-formula-trigger { right: -12px; }
.lss-sheet-container input.lss-prof-val { width: 3ch; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; font-weight: 700; text-align: center; }
.lss-sheet-container .lss-calculation-error { text-decoration: underline wavy #b36b25; text-underline-offset: 3px; }
.lss-calculation-dialog { width: min(520px, calc(100vw - 32px)); }
.lss-calculation-dialog .modal-body { display: grid; gap: 12px; min-width: 0; }
.lss-calculation-body { display: grid; gap: 12px; min-width: 0; }
.lss-calculation-result { display: grid; gap: 5px; padding: 12px; border: 1px solid var(--line,#d5ddcf); border-radius: 6px; background: var(--panel,#f5f6f0); overflow-wrap: anywhere; }
.lss-calculation-result strong { font-size: 20px; }
.lss-calculation-result code { white-space: normal; font-size: 13px; }
.lss-calculation-result [role=alert] { margin: 0; color: #9a4d20; }
.lss-calculation-sources > summary { cursor: pointer; margin-bottom: 8px; }
.lss-modifiers { display: grid; gap: 8px; max-height: 260px; overflow: auto; margin-top: 10px; }
.lss-modifier { display: grid; grid-template-columns: minmax(0,1fr) minmax(70px,110px) auto; gap: 8px; align-items: center; }
.lss-modifier > label { overflow-wrap: anywhere; min-width: 0; }
.lss-modifier input:not([type=checkbox]) { width: 100%; min-width: 0; }
.lss-modifier small { font-size: 11px; color: var(--muted,#68776d); }
.lss-formula-help { font-size: 12px; overflow-wrap: anywhere; }
@media (hover:none) { .lss-sheet-container .lss-formula-trigger { opacity: .65; } }
@media (max-width:480px) { .lss-modifier { grid-template-columns: minmax(0,1fr) minmax(60px,90px); }.lss-modifier small { grid-column:1/-1; } }

/* Base Sheet Container */
.custom-statblock-sheet {
    display: flex;
    flex-direction: column;
    gap: 16px;
    background: var(--sb-sheet-bg);
    border: 1px solid var(--sb-box-border);
    border-radius: 8px;
    padding: 20px;
    color: var(--sb-text);
    font-family: var(--sb-font-main);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
    line-height: 1.45;
    position: relative;
    box-sizing: border-box;
}

.custom-statblock-sheet.is-editing {
    border-color: var(--sb-gold);
    box-shadow: 0 0 0 1px var(--sb-gold), 0 6px 30px rgba(0, 0, 0, 0.5);
}

/* ==========================================================================
   TOP ACTION BAR & STICKY EDIT TOOLBAR
   ========================================================================== */
.sb-top-action-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--sb-border-subtle);
    padding-bottom: 10px;
    gap: 10px;
}

.sb-view-indicator {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--sb-gold);
}

.sb-action-bar-right {
    display: flex;
    gap: 8px;
    align-items: center;
}

.sb-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 5px;
    font-size: 12px;
    font-weight: 600;
    background: #252a36;
    color: var(--sb-text);
    border: 1px solid var(--sb-box-border);
    cursor: pointer;
    transition: all 0.15s ease;
}

.sb-btn:hover {
    background: #313746;
    border-color: var(--sb-gold);
    color: #fff;
}

.sb-btn.primary,
.sb-btn-save {
    background: #1e6b3b;
    border-color: var(--sb-emerald);
    color: #fff;
}

.sb-btn.primary:hover,
.sb-btn-save:hover {
    background: #27ae60;
}

.sb-btn-cancel {
    background: #343a46;
    border-color: #4a5263;
    color: #edf2f7;
}

.sb-btn-cancel:hover {
    background: #414958;
}

.sb-edit-toolbar {
    position: sticky;
    top: 8px;
    z-index: 50;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    background: #1e232e;
    border: 1px solid var(--sb-gold);
    border-radius: 6px;
    padding: 10px 14px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45);
}

.sb-edit-toolbar-left {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sb-edit-badge {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--sb-gold-bright);
    letter-spacing: 0.04em;
}

.sb-edit-subtext {
    font-size: 11.5px;
    color: var(--sb-text-muted);
}

.sb-edit-toolbar-actions {
    display: flex;
    gap: 8px;
}

/* ==========================================================================
   SHEET HEADER & IDENTITY
   ========================================================================== */
.sb-sheet-header {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 16px;
    border: 1px solid var(--sb-box-border);
    border-radius: 6px;
    background: var(--sb-box-bg);
    padding: 14px 16px;
}

@media (max-width: 900px) {
    .sb-sheet-header {
        grid-template-columns: 1fr;
    }
}

.sb-header-name-box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-right: 1px solid var(--sb-border-subtle);
    padding-right: 16px;
}

@media (max-width: 900px) {
    .sb-header-name-box {
        border-right: none;
        border-bottom: 1px solid var(--sb-border-subtle);
        padding-right: 0;
        padding-bottom: 12px;
    }
}

.sb-char-name {
    margin: 0;
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: #fff;
    line-height: 1.2;
}

.sb-name-input {
    font-size: 20px !important;
    font-weight: 700;
    color: #fff;
}

.sb-header-tag {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--sb-gold);
    margin-top: 4px;
}

.sb-header-meta-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 10px 14px;
}

.sb-meta-field {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.sb-meta-val {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--sb-text);
    border-bottom: 1px solid var(--sb-border-subtle);
    padding-bottom: 2px;
    min-height: 20px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sb-meta-lbl {
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--sb-text-muted);
    margin-top: 3px;
}

.sb-edit-lbl {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--sb-gold);
    margin-bottom: 3px;
    display: block;
}

/* ==========================================================================
   INPUTS & INLINE EDITING STYLING
   ========================================================================== */
.sb-input,
.sb-textarea {
    width: 100%;
    box-sizing: border-box;
    background: #14171e;
    border: 1px solid #363c4c;
    border-radius: 4px;
    padding: 6px 8px;
    color: #fff;
    font-size: 13px;
    font-family: inherit;
    transition: border-color 0.15s ease;
}

.sb-input:focus,
.sb-textarea:focus {
    border-color: var(--sb-gold);
    outline: none;
    box-shadow: 0 0 0 1px var(--sb-gold);
}

.sb-textarea {
    resize: vertical;
    line-height: 1.4;
}

/* ==========================================================================
   3-COLUMN CLASSIC D&D SHEET LAYOUT
   ========================================================================== */
.sb-classic-grid {
    display: grid;
    grid-template-columns: 270px minmax(360px, 1.4fr) minmax(280px, 1.1fr);
    gap: 16px;
    align-items: start;
}

@media (max-width: 1100px) {
    .sb-classic-grid {
        grid-template-columns: 1fr;
    }
}

.sb-col {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Boxes & Containers */
.sb-box-container {
    background: var(--sb-box-bg);
    border: 1px solid var(--sb-box-border);
    border-radius: 6px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sb-box-title {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--sb-text-muted);
    border-bottom: 1px solid var(--sb-border-subtle);
    padding-bottom: 4px;
    text-align: center;
}

.sb-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--sb-border-subtle);
    padding-bottom: 4px;
    margin-bottom: 8px;
}

.sb-section-title {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--sb-gold);
}

.sb-btn-inline {
    background: transparent;
    border: 1px dashed var(--sb-gold-border);
    color: var(--sb-gold);
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 4px;
    cursor: pointer;
}

.sb-btn-inline:hover {
    background: var(--sb-gold-bg);
    border-color: var(--sb-gold);
}

/* ==========================================================================
   COLUMN 1: ABILITIES, SAVES, SKILLS, PASSIVES
   ========================================================================== */
.sb-abilities-vertical-stack {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.sb-ability-box {
    background: var(--sb-box-bg);
    border: 1px solid var(--sb-box-border);
    border-radius: 6px;
    padding: 8px 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 2px;
}

.sb-ability-label {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.05em;
    color: var(--sb-text-muted);
}

.sb-ability-mod {
    font-size: 20px;
    font-weight: 800;
    color: #fff;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 4px;
    transition: background 0.15s ease;
}

.sb-ability-mod:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--sb-gold-bright);
}

.sb-ability-mod-display {
    font-size: 20px;
    font-weight: 800;
    color: var(--sb-gold-bright);
}

.sb-ability-score {
    font-size: 12px;
    font-weight: 600;
    color: var(--sb-text-muted);
    border: 1px solid var(--sb-border-subtle);
    border-radius: 10px;
    padding: 0 6px;
    background: #14171e;
}

.sb-score-input-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.sb-score-input {
    width: 50px !important;
    text-align: center;
    font-weight: 700;
}

.sb-mini-lbl {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--sb-text-faint);
}

/* Saves & Skills Rows */
.sb-saves-list,
.sb-skills-list {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.sb-save-row,
.sb-skill-row {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    padding: 2px 4px;
    border-radius: 4px;
}

.sb-save-row:hover,
.sb-skill-row:hover {
    background: rgba(255, 255, 255, 0.03);
}

.sb-prof-indicator,
.sb-skill-dot {
    font-size: 11px;
    width: 14px;
    text-align: center;
    color: var(--sb-text-faint);
}

.sb-prof-indicator.active,
.sb-skill-dot.prof {
    color: var(--sb-gold-bright);
}

.sb-skill-dot.exp {
    color: #4ea8de;
}

.sb-prof-dot-btn,
.sb-skill-dot-btn {
    background: transparent;
    border: none;
    color: var(--sb-text-faint);
    cursor: pointer;
    font-size: 13px;
    padding: 0;
    line-height: 1;
}

.sb-prof-dot-btn.active,
.sb-skill-dot-btn.prof {
    color: var(--sb-gold-bright);
}

.sb-skill-dot-btn.exp {
    color: #4ea8de;
}

.sb-save-roll-btn,
.sb-skill-mod-btn {
    background: transparent;
    border: none;
    font-weight: 700;
    color: var(--sb-text);
    width: 26px;
    text-align: right;
    cursor: pointer;
    padding: 0;
    font-family: inherit;
}

.sb-save-roll-btn:hover,
.sb-skill-mod-btn:hover {
    color: var(--sb-gold);
    text-decoration: underline;
}

.sb-save-val,
.sb-skill-val {
    font-weight: 700;
    color: var(--sb-gold);
    width: 26px;
    text-align: right;
}

.sb-save-name,
.sb-skill-name {
    flex: 1;
    color: var(--sb-text);
}

.sb-skill-stat-label {
    font-size: 10px;
    color: var(--sb-text-faint);
}

/* Passive Perception */
.sb-passives-box {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--sb-box-bg);
    border: 1px solid var(--sb-box-border);
    border-radius: 6px;
    padding: 8px 12px;
}

.sb-passive-val {
    font-size: 16px;
    font-weight: 800;
    color: var(--sb-gold);
    border: 1px solid var(--sb-gold-border);
    border-radius: 50%;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #14171e;
}

.sb-passive-lbl {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: var(--sb-text-muted);
}

/* ==========================================================================
   COLUMN 2: VITALS, HP, ATTACKS, SPELLCASTING
   ========================================================================= */
.sb-vitals-box {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.sb-vital-card {
    background: var(--sb-box-bg);
    border: 1px solid var(--sb-box-border);
    border-radius: 6px;
    padding: 10px 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 4px;
}

.sb-vital-label {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.05em;
    color: var(--sb-text-muted);
}

.sb-vital-val {
    font-size: 22px;
    font-weight: 800;
    color: #fff;
    background: transparent;
    border: none;
    font-family: inherit;
    cursor: default;
}

button.sb-vital-val {
    cursor: pointer;
}

button.sb-vital-val:hover {
    color: var(--sb-gold);
}

.sb-vital-val.text-sm {
    font-size: 16px;
}

.sb-vital-num,
.sb-vital-text {
    text-align: center;
    font-weight: 700;
}

/* HP Box with Quick Adjuster */
.sb-hp-box {
    background: var(--sb-box-bg);
    border: 1px solid var(--sb-box-border);
    border-radius: 6px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sb-hp-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.sb-hp-main-label {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    color: var(--sb-text-muted);
}

.sb-hp-ratio {
    font-size: 14px;
    font-weight: 700;
    color: var(--sb-text);
}

.sb-hp-ratio b {
    color: var(--sb-ruby);
    font-size: 18px;
}

.sb-hp-quick-adjust-bar {
    display: flex;
    align-items: center;
    gap: 6px;
}

.sb-hp-delta-btn {
    background: #252a36;
    border: 1px solid var(--sb-box-border);
    border-radius: 4px;
    color: var(--sb-text);
    font-size: 11px;
    font-weight: 700;
    padding: 4px 8px;
    cursor: pointer;
}

.sb-hp-delta-btn:hover {
    background: #363c4c;
    border-color: var(--sb-gold);
}

.sb-hp-reset-btn {
    background: transparent;
    border: 1px solid var(--sb-border-subtle);
    border-radius: 4px;
    color: var(--sb-text-muted);
    font-size: 10px;
    padding: 4px 6px;
    cursor: pointer;
}

.sb-hp-reset-btn:hover {
    background: rgba(255, 255, 255, 0.05);
    color: #fff;
}

.sb-hp-bar-bg {
    flex: 1;
    height: 8px;
    background: #14171e;
    border-radius: 4px;
    overflow: hidden;
}

.sb-hp-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #d94848, #27ae60);
    transition: width 0.2s ease;
}

.sb-hp-sub-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    border-top: 1px solid var(--sb-border-subtle);
    padding-top: 8px;
}

.sb-sub-hp-block {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sb-sub-hp-val {
    font-size: 13px;
    font-weight: 700;
}

.sb-death-saves-row {
    display: flex;
    gap: 8px;
    font-size: 11px;
    color: var(--sb-text-muted);
}

.sb-hp-fields-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.sb-hp-field {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* Attacks Table */
.sb-attacks-section {
    background: var(--sb-box-bg);
    border: 1px solid var(--sb-box-border);
    border-radius: 6px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sb-attacks-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12.5px;
}

.sb-attacks-table th {
    text-align: left;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--sb-text-muted);
    border-bottom: 1px solid var(--sb-border-subtle);
    padding: 4px 6px;
}

.sb-attacks-table td {
    padding: 6px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}

.atk-cell-name {
    color: #fff;
}

.sb-cell-roll {
    background: #252a36;
    border: 1px solid var(--sb-box-border);
    border-radius: 4px;
    padding: 2px 6px;
    font-weight: 700;
    color: var(--sb-text);
    font-size: 12px;
    cursor: pointer;
}

.sb-cell-roll:hover {
    background: #313746;
    border-color: var(--sb-gold);
    color: var(--sb-gold-bright);
}

.sb-dmg-type {
    font-size: 11px;
    color: var(--sb-text-muted);
    margin-left: 4px;
}

.atk-cell-notes {
    font-size: 11.5px;
    color: var(--sb-text-muted);
}

/* Attacks Edit Rows */
.sb-attacks-edit-table {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sb-attack-edit-row {
    display: grid;
    grid-template-columns: 1.5fr 70px 1.2fr 1fr 1fr 30px;
    gap: 6px;
    align-items: center;
}

.sb-btn-del-atk,
.sb-btn-del-spell,
.sb-btn-del-feat {
    background: transparent;
    border: 1px solid #4a3030;
    color: #d94848;
    border-radius: 4px;
    width: 26px;
    height: 26px;
    cursor: pointer;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sb-btn-del-atk:hover,
.sb-btn-del-spell:hover,
.sb-btn-del-feat:hover {
    background: var(--sb-ruby-bg);
}

/* Spellcasting Section */
.sb-spells-section {
    background: var(--sb-box-bg);
    border: 1px solid var(--sb-box-border);
    border-radius: 6px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.sb-spell-header-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 8px;
    background: #151821;
    border: 1px solid var(--sb-border-subtle);
    border-radius: 4px;
    padding: 10px;
}

.sb-slots-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 8px;
}

.sb-slot-tier-box {
    background: #14171e;
    border: 1px solid var(--sb-border-subtle);
    border-radius: 4px;
    padding: 6px 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sb-slot-lvl-tag {
    font-size: 10px;
    font-weight: 800;
    color: var(--sb-gold);
}

.sb-slot-circles-row {
    display: flex;
    gap: 5px;
}

.sb-slot-circle {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid var(--sb-azure);
    background: transparent;
    cursor: pointer;
    padding: 0;
    transition: all 0.15s ease;
}

.sb-slot-circle:hover {
    transform: scale(1.15);
}

.sb-slot-circle.used {
    background: var(--sb-azure);
    opacity: 0.25;
    border-color: #55627a;
}

.sb-spells-tiers-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.sb-spell-tier-box {
    border: 1px solid var(--sb-border-subtle);
    border-radius: 4px;
    background: #151821;
    padding: 8px 10px;
}

.sb-spell-tier-title {
    display: flex;
    justify-content: space-between;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--sb-gold);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    padding-bottom: 4px;
    margin-bottom: 6px;
}

.sb-count-badge {
    font-size: 10px;
    background: rgba(255, 255, 255, 0.08);
    padding: 1px 6px;
    border-radius: 8px;
    color: var(--sb-text-muted);
}

.sb-spell-rows-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 12px;
}

.sb-spell-item-line {
    padding: 2px 0;
    color: var(--sb-text);
}

.sb-spell-sub-text {
    color: var(--sb-text-muted);
    font-size: 11.5px;
}

.sb-slots-edit-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: 8px;
}

.sb-spells-edit-tiers {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.sb-spell-tier-edit-block {
    background: #151821;
    border: 1px solid var(--sb-border-subtle);
    border-radius: 4px;
    padding: 8px;
}

.sb-tier-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}

.sb-spell-items-container {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.sb-spell-edit-row {
    display: grid;
    grid-template-columns: 1.5fr 2fr 30px;
    gap: 6px;
    align-items: center;
}

/* ==========================================================================
   COLUMN 3: DEFENSES, FEATURES, INVENTORY, RP
   ========================================================================== */
.sb-defenses-card {
    background: #151821;
    border: 1px solid var(--sb-border-subtle);
    border-radius: 6px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 12px;
    margin-bottom: 12px;
}

.sb-def-line strong {
    color: var(--sb-gold);
}

.sb-features-section,
.sb-inventory-section {
    background: var(--sb-box-bg);
    border: 1px solid var(--sb-box-border);
    border-radius: 6px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sb-features-items-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sb-feature-card {
    background: #151821;
    border: 1px solid var(--sb-border-subtle);
    border-radius: 4px;
    padding: 8px 10px;
    font-size: 12.5px;
}

.sb-feature-header {
    color: var(--sb-gold);
    margin-bottom: 4px;
}

.sb-feature-body {
    color: var(--sb-text);
    line-height: 1.4;
}

.sb-features-edit-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sb-feature-edit-block {
    background: #151821;
    border: 1px solid var(--sb-border-subtle);
    border-radius: 4px;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.sb-feat-edit-top {
    display: grid;
    grid-template-columns: 1fr 30px;
    gap: 6px;
}

.sb-coins-badge-bar {
    display: flex;
    gap: 12px;
    font-size: 12px;
    background: #151821;
    border: 1px solid var(--sb-border-subtle);
    border-radius: 4px;
    padding: 6px 10px;
    margin-bottom: 8px;
}

.sb-coins-badge-bar b {
    color: var(--sb-gold-bright);
}

.sb-coins-edit-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.sb-rp-display-grid,
.sb-rp-edit-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 8px;
}

.sb-rp-box {
    background: #151821;
    border: 1px solid var(--sb-border-subtle);
    border-radius: 4px;
    padding: 6px 8px;
}

.sb-rp-box p {
    margin: 4px 0 0 0;
    font-size: 12px;
    color: var(--sb-text);
}

/* ==========================================================================
   TABS VIEW LAYOUT
   ========================================================================== */
.sb-tabs-nav {
    display: flex;
    gap: 6px;
    border-bottom: 1px solid var(--sb-box-border);
    padding-bottom: 6px;
    overflow-x: auto;
}

.sb-tab-button {
    background: transparent;
    border: 1px solid var(--sb-box-border);
    border-radius: 4px;
    color: var(--sb-text-muted);
    font-size: 12px;
    font-weight: 600;
    padding: 6px 12px;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.15s ease;
}

.sb-tab-button:hover {
    background: #252a36;
    color: #fff;
}

.sb-tab-button.active {
    background: var(--sb-gold-bg);
    border-color: var(--sb-gold);
    color: var(--sb-gold-bright);
}

.sb-tab-panel {
    display: none;
    flex-direction: column;
    gap: 14px;
}

.sb-tab-panel.active {
    display: flex;
}

.sb-two-col-layout {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 16px;
}

@media (max-width: 800px) {
    .sb-two-col-layout {
        grid-template-columns: 1fr;
    }
}

.sb-empty-msg {
    color: var(--sb-text-faint);
    font-size: 12px;
    margin: 6px 0;
    font-style: italic;
}

/* ==========================================================================
   DICE ROLL TOAST
   ========================================================================== */
.sb-roll-toast {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 9999;
    background: #181c26;
    border: 1px solid var(--sb-gold);
    border-radius: 8px;
    padding: 10px 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #fff;
    font-size: 13px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.6);
    animation: sbToastIn 0.2s ease;
}

.sb-roll-toast-res {
    font-size: 20px;
    font-weight: 800;
    color: var(--sb-gold-bright);
}

.sb-roll-toast-sub {
    font-size: 11.5px;
    color: var(--sb-text-muted);
}

@keyframes sbToastIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ==========================================================================
   LONG STORY SHORT (LSS) AUTHENTIC D&D 5E SHEET DESIGN SYSTEM
   ========================================================================== */

.lss-sheet-container {
    --lss-bg: #fcfbf9;
    --lss-paper: #ffffff;
    --lss-box-bg: #ffffff;
    --lss-border: #334155;
    --lss-border-subtle: #cbd5e1;
    --lss-border-faint: #e2e8f0;
    --lss-text: #0f172a;
    --lss-text-muted: #64748b;
    --lss-text-sub: #334155;
    --lss-line: #e2e8f0;
    --lss-primary: #7c3aed;
    --lss-primary-hover: #6d28d9;
    --lss-accent: #2563eb;
    --lss-radius: 8px;
    --lss-radius-sm: 4px;
    --lss-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    display: flex;
    flex-direction: column;
    gap: 14px;
    background: var(--lss-paper);
    color: var(--lss-text);
    font-family: var(--lss-font);
    padding: 16px 20px;
    border-radius: var(--lss-radius);
    border: 1.5px solid var(--lss-border-subtle);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
    box-sizing: border-box;
    width: 100%;
    max-width: 1780px;
    margin: 0 auto;
    line-height: 1.4;
    transition: max-width 0.2s ease;
}

.lss-sheet-container.is-fullwidth {
    max-width: 100% !important;
}

/* Eliminate native spinner arrows on all numeric inputs */
.lss-sheet-container input[type="number"]::-webkit-inner-spin-button,
.lss-sheet-container input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
}

.lss-sheet-container input[type="number"] {
    -moz-appearance: textfield !important;
    appearance: textfield !important;
}

/* Reset base padding on sheet inputs so they don't inherit bulky 9px 10px from app.css */
.lss-sheet-container input:not([type="checkbox"]):not(.lss-meta-input):not(.lss-table-input) {
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box;
}

.lss-sheet-container .lss-meta-input {
    padding: 2px 4px !important;
}

.lss-sheet-container .lss-table-input {
    padding: 4px 6px !important;
}

/* Authentic Dark Mode */
.lss-sheet-container.theme-dark {
    --lss-bg: #14171f;
    --lss-paper: #181b24;
    --lss-box-bg: #1f2330;
    --lss-border: #475569;
    --lss-border-subtle: #334155;
    --lss-border-faint: #262c3a;
    --lss-text: #f8fafc;
    --lss-text-muted: #94a3b8;
    --lss-text-sub: #cbd5e1;
    --lss-line: #2d3446;
    --lss-primary: #a78bfa;
    --lss-primary-hover: #c4b5fd;
    --lss-accent: #60a5fa;
    box-shadow: 0 6px 30px rgba(0, 0, 0, 0.45);
}

/* Toolbar */
.lss-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--lss-border-faint);
}

.lss-toolbar-left {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.lss-logo-badge {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.1em;
    padding: 4px 8px;
    background: #f1f5f9;
    color: #475569;
    border-radius: 4px;
    text-transform: uppercase;
}

.theme-dark .lss-logo-badge {
    background: #252b3b;
    color: #cbd5e1;
}

.lss-page-tabs {
    display: flex;
    gap: 6px;
}

.lss-tab-btn {
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 600;
    background: transparent;
    color: var(--lss-text-muted);
    border: 1.5px solid var(--lss-border-subtle);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.lss-tab-btn:hover {
    background: var(--lss-border-faint);
    color: var(--lss-text);
}

.lss-tab-btn.active {
    background: var(--lss-primary);
    border-color: var(--lss-primary);
    color: #ffffff;
}

.lss-toolbar-center {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.lss-zoom-group {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    background: var(--lss-box-bg);
    border: 1.5px solid var(--lss-border-subtle);
    border-radius: 6px;
    padding: 2px 4px;
}

.lss-zoom-title {
    font-size: 11px;
    font-weight: 700;
    color: var(--lss-text-muted);
    padding: 0 4px;
}

.lss-zoom-btn {
    border: none;
    background: transparent;
    font-size: 11px;
    font-weight: 700;
    color: var(--lss-text-sub);
    padding: 3px 6px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.lss-zoom-btn:hover {
    background: var(--lss-border-faint);
    color: var(--lss-text);
}

.lss-zoom-btn.active {
    background: var(--lss-primary);
    color: #ffffff;
}

.lss-toolbar-right {
    display: flex;
    gap: 8px;
}

.lss-tool-btn {
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 600;
    background: var(--lss-box-bg);
    color: var(--lss-text);
    border: 1.5px solid var(--lss-border-subtle);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.lss-tool-btn:hover {
    border-color: var(--lss-text);
}

.lss-tool-btn.active {
    background: var(--lss-primary);
    color: #ffffff;
    border-color: var(--lss-primary);
}

.lss-tool-btn.primary {
    background: #10b981;
    border-color: #059669;
    color: #ffffff;
}

.lss-tool-btn.primary:hover {
    background: #059669;
}

/* Header */
.lss-header {
    display: grid;
    grid-template-columns: 290px 1fr;
    gap: 16px;
    border: 2px solid var(--lss-border);
    border-radius: 8px;
    padding: 12px 16px;
    background: var(--lss-box-bg);
}

@media (max-width: 860px) {
    .lss-header {
        grid-template-columns: 1fr;
    }
}

.lss-header-name-box {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    border-right: 1.5px solid var(--lss-border-faint);
    padding-right: 16px;
}

@media (max-width: 860px) {
    .lss-header-name-box {
        border-right: none;
        border-bottom: 1.5px solid var(--lss-border-faint);
        padding-right: 0;
        padding-bottom: 10px;
    }
}

.lss-char-name-input {
    border: none;
    border-bottom: 2px solid var(--lss-border);
    background: transparent;
    font-size: 21px;
    font-weight: 800;
    color: var(--lss-text);
    padding: 4px 2px;
    outline: none;
    width: 100%;
}

.lss-char-name-input:focus {
    border-bottom-color: var(--lss-primary);
}

.lss-sub-lbl {
    font-size: 8.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--lss-text-muted);
    margin-top: 3px;
    display: block;
}

.lss-header-grid {
    display: grid;
    grid-template-columns: minmax(130px, 1.2fr) minmax(170px, 1.6fr) minmax(90px, 0.9fr) minmax(120px, 1.1fr) minmax(90px, 0.8fr) minmax(65px, 0.6fr);
    gap: 8px 14px;
}

.lss-meta-box {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-width: 0;
}

.lss-meta-input {
    border: none;
    border-bottom: 1.5px solid var(--lss-border-subtle);
    background: transparent;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--lss-text);
    padding: 2px 0;
    outline: none;
    width: 100%;
    min-width: 0;
}

.lss-meta-input:focus {
    border-bottom-color: var(--lss-primary);
}

/* 3-Column Sheet Grid */
.lss-3col-sheet-grid {
    display: grid;
    grid-template-columns: minmax(330px, 1.15fr) minmax(290px, 1fr) minmax(340px, 1.25fr);
    gap: 16px;
    align-items: stretch;
    width: 100%;
    box-sizing: border-box;
}

@media (max-width: 1040px) {
    .lss-3col-sheet-grid {
        grid-template-columns: minmax(310px, 1fr) minmax(290px, 1fr);
        gap: 14px;
    }
    .lss-col-3 {
        grid-column: 1 / -1;
    }
}

@media (max-width: 680px) {
    .lss-3col-sheet-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    .lss-col-3 {
        grid-column: auto;
    }
}

.lss-col {
    display: flex;
    flex-direction: column;
    gap: 12px;
    height: 100%;
    min-width: 0;
}

/* Column 1: Abilities, Saves, Skills */
.lss-col-1-top-row {
    display: grid;
    grid-template-columns: 82px minmax(0, 1fr);
    gap: 10px;
}

.lss-abilities-column {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 8px;
    height: 100%;
}

.lss-ability-pill {
    background: var(--lss-box-bg);
    border: 2px solid var(--lss-border);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 6px 3px 14px 3px;
    position: relative;
    text-align: center;
    box-sizing: border-box;
    width: 100%;
    flex: 1 1 0;
    min-height: 72px;
    max-height: 92px;
}

.lss-stat-title {
    font-size: 7px;
    font-weight: 800;
    letter-spacing: 0.01em;
    color: var(--lss-text-sub);
    text-transform: uppercase;
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    padding: 0 4px;
}

.lss-mod-input {
    border: none;
    background: transparent;
    font-size: 24px;
    font-weight: 900;
    color: var(--lss-text);
    text-align: center;
    width: 100%;
    outline: none;
    padding: 1px 0;
    line-height: 1.1;
}

.lss-score-circle {
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--lss-box-bg);
    border: 1.5px solid var(--lss-border);
    border-radius: 10px;
    width: 40px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.lss-score-input {
    border: none;
    background: transparent;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--lss-text);
    text-align: center;
    width: 100%;
    outline: none;
    padding: 0;
    -webkit-appearance: none;
    -moz-appearance: textfield;
}

.lss-col-1-right-stack {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.lss-insp-prof-row {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.lss-insp-box {
    display: flex;
    align-items: center;
    gap: 8px;
    border: 2px solid var(--lss-border);
    border-radius: 8px;
    padding: 6px 10px;
    background: var(--lss-box-bg);
}

.lss-insp-box .lss-sub-lbl {
    margin-top: 0;
    cursor: pointer;
    user-select: none;
}

.lss-insp-check {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.lss-prof-box {
    display: flex;
    align-items: center;
    gap: 8px;
    border: 2px solid var(--lss-border);
    border-radius: 8px;
    padding: 4px 10px;
    background: var(--lss-box-bg);
}

.lss-prof-val {
    font-size: 18px;
    font-weight: 800;
    color: var(--lss-text);
    min-width: 32px;
    text-align: center;
}

.lss-box {
    background: var(--lss-box-bg);
    border: 2px solid var(--lss-border);
    border-radius: 8px;
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

.lss-box-footer-lbl {
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--lss-text-sub);
    text-align: center;
    margin-top: 6px;
    padding-top: 4px;
    border-top: 1px solid var(--lss-border-faint);
    display: block;
}

.lss-saves-list,
.lss-skills-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.lss-save-line,
.lss-skill-line {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    line-height: 1.35;
    padding: 2px 0;
    white-space: nowrap !important;
    min-width: 0;
    width: 100%;
}

.lss-prof-circle {
    background: transparent;
    border: none;
    font-size: 13px;
    cursor: pointer;
    padding: 0;
    width: 15px;
    height: 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--lss-text-muted);
    line-height: 1;
    flex-shrink: 0;
    transition: transform 0.1s ease, color 0.1s ease;
}

.lss-prof-circle:hover {
    transform: scale(1.15);
}

.lss-prof-circle.active,
.lss-prof-circle.prof {
    color: var(--lss-text);
}

.lss-prof-circle.exp {
    color: #d97706;
}

.lss-save-num,
.lss-skill-num {
    border: none;
    border-bottom: 1.5px solid var(--lss-border-faint);
    background: transparent;
    font-size: 13px;
    font-weight: 800;
    width: 25px;
    text-align: center;
    color: var(--lss-text);
    padding: 0;
    outline: none;
    flex-shrink: 0;
}

.lss-save-num:focus,
.lss-skill-num:focus {
    border-bottom-color: var(--lss-primary);
}

.lss-save-title,
.lss-skill-title {
    color: var(--lss-text);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    flex-shrink: 1;
}

/* Dotted leader line connecting skill name and ability hint smoothly */
.lss-skill-dots-leader {
    flex: 1 1 auto;
    min-width: 6px;
    border-bottom: 1.5px dotted var(--lss-border-subtle);
    margin: 0 3px;
    height: 1px;
    opacity: 0.55;
    align-self: flex-end;
    margin-bottom: 4px;
}

.lss-skill-stat {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.03em;
    color: var(--lss-text-muted);
    text-transform: uppercase;
    flex-shrink: 0;
    white-space: nowrap;
    margin-left: auto;
}

.lss-passive-row {
    display: flex;
    align-items: center;
    gap: 12px;
    border: 2px solid var(--lss-border);
    border-radius: 8px;
    padding: 6px 12px;
    background: var(--lss-box-bg);
    box-sizing: border-box;
    min-height: 44px;
}

.lss-passive-circle {
    border: 2px solid var(--lss-border);
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: var(--lss-paper);
}

.lss-passive-input {
    border: none !important;
    background: transparent !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    text-align: center !important;
    width: 100% !important;
    outline: none !important;
    padding: 0 !important;
    margin: 0 !important;
    color: var(--lss-text) !important;
}

.lss-passive-label {
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--lss-text-sub);
    line-height: 1.25;
}

/* Column 2: Vitals, HP, Attacks, Coins, Equipment */
.lss-vitals-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
}

.lss-shield-box {
    background: var(--lss-box-bg);
    border: 2px solid var(--lss-border);
    border-radius: 8px 8px 24px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 6px 4px;
    text-align: center;
    position: relative;
}

.lss-shield-label {
    font-size: 9px;
    font-weight: 800;
    color: var(--lss-text-muted);
}

.lss-shield-input {
    border: none;
    background: transparent;
    font-size: 24px;
    font-weight: 800;
    text-align: center;
    width: 100%;
    outline: none;
    color: var(--lss-text);
}

.lss-vital-rect {
    background: var(--lss-box-bg);
    border: 2px solid var(--lss-border);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 6px 4px;
    text-align: center;
}

.lss-vital-rect-input {
    border: none;
    background: transparent;
    font-size: 18px;
    font-weight: 800;
    text-align: center;
    width: 100%;
    outline: none;
    color: var(--lss-text);
    padding: 0 !important;
    margin: 0 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Direct HP container — ZERO +1/+5 buttons! */
.lss-hp-box {
    padding: 6px 12px;
    gap: 4px;
}

.lss-hp-max-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--lss-border-faint);
    padding-bottom: 2px;
}

.lss-hp-sub-label {
    font-size: 9.5px;
    font-weight: 700;
    color: var(--lss-text-muted);
    text-transform: uppercase;
}

.lss-hp-max-input {
    border: none;
    background: transparent;
    font-size: 16px;
    font-weight: 800;
    text-align: right;
    width: 80px;
    outline: none;
    color: var(--lss-text);
}

.lss-hp-current-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 4px 0;
}

.lss-hp-current-input {
    border: none;
    background: transparent;
    font-size: 32px;
    font-weight: 900;
    text-align: center;
    width: 120px;
    outline: none;
    color: var(--lss-text);
    line-height: 1.05;
}

.lss-hp-main-label {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--lss-text-sub);
    margin-top: 2px;
}

.lss-hp-temp-line {
    display: flex;
    flex-direction: column;
    align-items: center;
    border-top: 1px solid var(--lss-border-faint);
    padding-top: 2px;
}

.lss-hp-temp-input {
    border: none;
    background: transparent;
    font-size: 16px;
    font-weight: 700;
    text-align: center;
    width: 80px;
    outline: none;
    color: var(--lss-text);
}

.lss-hitdice-death-box {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 8px 10px;
}

.lss-hitdice-half {
    border-right: 1px solid var(--lss-border-faint);
    padding-right: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.lss-hd-top {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
}

.lss-hd-sub {
    color: var(--lss-text-muted);
}

.lss-hd-total-input {
    border: none;
    background: transparent;
    font-size: 13px;
    font-weight: 700;
    width: 32px;
    text-align: center;
    outline: none;
    color: var(--lss-text);
}

.lss-hd-val-input {
    border: none;
    background: transparent;
    font-size: 20px;
    font-weight: 800;
    text-align: center;
    width: 100%;
    outline: none;
    color: var(--lss-text);
    padding: 2px 0;
}

.lss-death-half {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.lss-death-line {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
}

.lss-death-lbl {
    color: var(--lss-text-sub);
    width: 50px;
}

.lss-death-pips {
    display: flex;
    gap: 4px;
}

.lss-death-pip {
    font-size: 14px;
    color: var(--lss-text-muted);
}

/* Attacks Table */
.lss-attacks-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 11px;
    background: transparent !important;
}

.lss-attacks-table th {
    font-size: 8.5px !important;
    font-weight: 800 !important;
    letter-spacing: 0.05em !important;
    color: var(--lss-text-muted) !important;
    background: var(--lss-box-bg) !important;
    border: none !important;
    border-bottom: 2px solid var(--lss-border) !important;
    padding: 6px 3px !important;
    text-align: left !important;
}

.lss-attacks-table th.col-atk-name,
.lss-attacks-table td.lss-atk-cell-name {
    min-width: 110px;
}

.lss-attacks-table th.col-atk-bonus,
.lss-attacks-table td.lss-atk-cell-bonus {
    text-align: center !important;
    width: 52px;
}

.lss-attacks-table th.col-atk-dmg,
.lss-attacks-table td.lss-atk-cell-dmg {
    text-align: left;
    width: 120px;
}

.lss-attacks-table th.col-atk-act,
.lss-attacks-table td.lss-atk-cell-actions {
    text-align: right;
    width: 24px;
}

.lss-attack-row td {
    border-bottom: 1px solid var(--lss-border-faint);
    padding: 4px 2px;
}

.lss-table-input {
    border: none;
    background: transparent;
    font-size: 12px;
    color: var(--lss-text);
    width: 100%;
    outline: none;
    padding: 2px 0;
}

.lss-row-del-btn {
    background: transparent;
    border: none;
    color: var(--lss-text-muted);
    cursor: pointer;
    font-size: 12px;
    padding: 2px 4px;
    border-radius: 3px;
}

.lss-row-del-btn:hover {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.1);
}

.lss-add-atk-btn {
    background: transparent;
    border: 1px solid var(--lss-border-subtle);
    border-radius: 3px;
    cursor: pointer;
    font-size: 11px;
    font-weight: bold;
    color: var(--lss-text);
    padding: 1px 4px;
}

.lss-box-bottom-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto;
    padding-top: 4px;
    border-top: 1px solid var(--lss-border-faint);
}

.lss-btn-add-line {
    background: transparent;
    border: 1px solid var(--lss-border-subtle);
    border-radius: 4px;
    font-size: 10px;
    font-weight: 600;
    color: var(--lss-text-sub);
    cursor: pointer;
    padding: 2px 6px;
}

.lss-btn-add-line:hover {
    background: var(--lss-border-faint);
    color: var(--lss-text);
}

/* Coins Row */
.lss-coins-row {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 6px;
}

.lss-coin-slot {
    border: 2px solid var(--lss-border);
    border-radius: 6px;
    background: var(--lss-box-bg);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 4px 2px;
}

.lss-coin-tag {
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.04em;
    color: var(--lss-text-muted);
}

.lss-coin-slot:nth-child(3) .lss-coin-tag {
    color: #d97706; /* Golden tag for ЗМ */
}

.lss-coin-input {
    border: none;
    background: transparent;
    font-size: 14px;
    font-weight: 800;
    text-align: center;
    width: 100%;
    outline: none;
    color: var(--lss-text);
    padding: 1px 0;
    -webkit-appearance: none;
    -moz-appearance: textfield;
}

/* Direct Writable Text Blocks & Font Scaling Controls */
.lss-sheet-container .lss-editable-textarea,
.lss-sheet-container .lss-editable-textarea * {
    box-sizing: border-box;
}

.lss-sheet-container .lss-editable-textarea {
    outline: none;
    color: var(--lss-text);
    line-height: 1.5;
    word-break: break-word;
    padding: 8px 10px;
    background: transparent;
    font-size: inherit;
    border-radius: 4px;
    transition: background 0.15s ease;
}

.lss-sheet-container .lss-editable-textarea:focus {
    background: rgba(124, 58, 237, 0.03);
}

.lss-sheet-container .lss-editable-textarea b,
.lss-sheet-container .lss-editable-textarea strong {
    font-weight: 700;
    color: var(--lss-text);
}

.lss-sheet-container .lss-editable-textarea i,
.lss-sheet-container .lss-editable-textarea em {
    font-style: italic;
}

.lss-sheet-container .lss-editable-textarea u {
    text-decoration: underline;
}

/* Force strict typography inheritance inside all editable textareas to prevent external styles (like .statblock-reading-compact p) from overriding */
.lss-sheet-container .lss-editable-textarea p,
.lss-sheet-container .lss-editable-textarea div,
.lss-sheet-container .lss-editable-textarea span,
.lss-sheet-container .lss-editable-textarea li,
.lss-sheet-container .lss-editable-textarea b,
.lss-sheet-container .lss-editable-textarea strong,
.lss-sheet-container .lss-editable-textarea em,
.lss-sheet-container .lss-editable-textarea i,
.lss-sheet-container .lss-editable-textarea u,
.lss-sheet-container .lss-editable-textarea a,
.lss-sheet-container .lss-trait-item,
.lss-sheet-container .lss-trait-item p,
.lss-sheet-container .lss-trait-item div,
.lss-sheet-container .lss-trait-item span {
    font-size: inherit !important;
    line-height: 1.5 !important;
}

.lss-sheet-container .lss-editable-textarea p,
.lss-sheet-container .lss-editable-textarea .lss-trait-item {
    margin: 0 0 6px 0 !important;
}

.lss-section-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 10px 0 6px 0;
    color: var(--lss-text-sub);
}

.lss-section-header:first-child {
    margin-top: 0;
}

.lss-section-header span {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    background: var(--lss-border-faint);
    padding: 2px 7px;
    border-radius: 4px;
    color: var(--lss-text);
}

.lss-section-header::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--lss-border-faint);
}

.lss-sheet-container .lss-editable-textarea p:last-child,
.lss-sheet-container .lss-editable-textarea .lss-trait-item:last-child {
    margin-bottom: 0 !important;
}

.lss-editable-textarea ul,
.lss-editable-textarea ol {
    margin: 0 0 6px 0;
    padding-left: 18px;
}

.lss-editable-textarea li {
    margin-bottom: 2px;
}

.lss-editable-textarea:empty:before {
    content: attr(placeholder);
    color: var(--lss-text-muted);
    font-style: italic;
}

.lss-languages-box,
.lss-equipment-box,
.lss-features-box {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}

.lss-features-box {
    height: 100%;
    min-height: 440px;
}

.lss-languages-box {
    min-height: 120px;
}

.lss-equipment-box {
    min-height: 140px;
}

.lss-languages-box .lss-editable-textarea,
.lss-equipment-box .lss-editable-textarea,
.lss-features-box .lss-editable-textarea {
    flex: 1 1 auto;
}

.lss-languages-box .lss-editable-textarea {
    min-height: 80px;
}

.lss-equipment-box .lss-editable-textarea {
    min-height: 90px;
}

.lss-features-box .lss-editable-textarea {
    min-height: 380px;
    max-height: none !important;
    overflow-y: visible !important;
}

.lss-box-tools {
    display: flex;
    align-items: center;
    gap: 8px;
}

.lss-fmt-group {
    display: flex;
    align-items: center;
    gap: 2px;
}

.lss-tool-icon-btn {
    width: 22px;
    height: 22px;
    border-radius: 3px;
    border: 1px solid var(--lss-border-subtle);
    background: var(--lss-box-bg);
    color: var(--lss-text-sub);
    cursor: pointer;
    font-size: 11px;
    font-weight: bold;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: all 0.15s ease;
}

.lss-tool-icon-btn:hover {
    background: var(--lss-border-faint);
    color: var(--lss-text);
    border-color: var(--lss-border);
}

.lss-font-scale-controls {
    display: flex;
    align-items: center;
    gap: 3px;
}

.lss-scale-btn {
    background: var(--lss-box-bg);
    border: 1px solid var(--lss-border-subtle);
    border-radius: 3px;
    font-size: 11px;
    font-weight: 800;
    color: var(--lss-text-sub);
    cursor: pointer;
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: all 0.15s ease;
}

.lss-scale-btn:hover {
    background: var(--lss-border-faint);
    color: var(--lss-text);
    border-color: var(--lss-border);
}

/* Floating Rich-Text Selection Toolbar */
.lss-selection-toolbar {
    position: fixed;
    inset: auto;
    margin: 0;
    z-index: 3000;
    display: none;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px;
    width: max-content;
    max-width: calc(100vw - 16px);
    box-sizing: border-box;
    background: #1e232e;
    color: #ffffff;
    font: 12px/1.4 system-ui, sans-serif;
    border-radius: 6px;
    padding: 4px 6px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.lss-selection-toolbar.visible {
    display: flex;
}

.lss-selection-toolbar[hidden] { display: none !important; }
.lss-selection-toolbar::backdrop { background: transparent; pointer-events: none; }

.lss-selection-toolbar button {
    background: transparent;
    border: none;
    color: #ffffff;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    width: auto;
    min-width: 32px;
    min-height: 32px;
    padding: 3px 7px;
    line-height: 1.2;
    white-space: nowrap;
    border-radius: 4px;
    transition: background 0.1s ease;
}

.lss-selection-toolbar button:hover,
.lss-selection-toolbar button[aria-pressed="true"] {
    background: rgba(255, 255, 255, 0.2);
}

.lss-selection-toolbar button:focus-visible { outline: 2px solid #e0b85a; outline-offset: 1px; }
@media (pointer: coarse), (max-width: 740px) {
    .lss-selection-toolbar button { min-width: 44px; min-height: 44px; }
}

.lss-selection-toolbar-sep {
    width: 1px;
    height: 14px;
    background: rgba(255, 255, 255, 0.2);
    margin: 0 3px;
}

/* Page 2: Spells Sheet */
.lss-spells-sheet {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.lss-spells-header {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
    border: 2px solid var(--lss-border);
    border-radius: 8px;
    background: var(--lss-box-bg);
    padding: 10px 14px;
}

.lss-spell-stat-card {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.lss-spell-header-input {
    border: none;
    border-bottom: 1.5px solid var(--lss-border-subtle);
    background: transparent;
    font-size: 18px;
    font-weight: 700;
    color: var(--lss-text);
    padding: 2px 0;
    outline: none;
}

.lss-spell-header-input.color-purple {
    color: var(--lss-primary);
}

/* Page 2: Spells Sheet */
.lss-spells-sheet {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.lss-spells-header {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
    border: 2px solid var(--lss-border);
    border-radius: 8px;
    background: var(--lss-box-bg);
    padding: 12px 16px;
}

.lss-spell-stat-card {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.lss-spell-header-input {
    border: none;
    border-bottom: 1.5px solid var(--lss-border-subtle);
    background: transparent;
    font-size: 18px;
    font-weight: 700;
    color: var(--lss-text);
    padding: 2px 0;
    outline: none;
}

.lss-spell-header-input.color-purple {
    color: var(--lss-primary);
}

/* Adaptive 2-Column Wide Grid for Active Spell Circles */
.lss-spells-active-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(420px, 1fr));
    gap: 16px;
}

@media (max-width: 960px) {
    .lss-spells-active-grid {
        grid-template-columns: 1fr;
    }
}

.lss-spell-circle-box {
    border: 2px solid var(--lss-border);
    border-radius: 10px;
    background: var(--lss-box-bg);
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    box-sizing: border-box;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.lss-spell-circle-box:focus-within {
    border-color: var(--lss-primary);
    box-shadow: 0 2px 12px rgba(124, 58, 237, 0.08);
}

.lss-circle-header {
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 1.5px solid var(--lss-border);
    padding-bottom: 6px;
}

.lss-circle-num {
    width: 28px;
    height: 28px;
    border: 1.5px solid var(--lss-border);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 800;
    color: var(--lss-text);
    background: var(--lss-paper);
    flex-shrink: 0;
}

.lss-circle-name {
    font-size: 12.5px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--lss-text-sub);
}

.lss-circle-slots-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    border-bottom: 1px solid var(--lss-border-faint);
    padding-bottom: 6px;
}

.lss-circle-total-lbl {
    color: var(--lss-text-muted);
    font-size: 11px;
    font-weight: 600;
}

.lss-circle-max-input {
    border: none;
    border-bottom: 1.5px solid var(--lss-border-subtle);
    background: transparent;
    font-size: 14px;
    font-weight: 800;
    width: 28px;
    text-align: center;
    outline: none;
    color: var(--lss-text);
}

.lss-circle-max-input:focus {
    border-bottom-color: var(--lss-primary);
}

.lss-circle-pips-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: 8px;
}

.lss-slot-pip {
    background: transparent;
    border: none;
    font-size: 18px;
    cursor: pointer;
    padding: 0 2px;
    line-height: 1;
    color: var(--lss-text);
    transition: transform 0.1s ease, color 0.1s ease;
}

.lss-slot-pip:hover:not(.empty) {
    transform: scale(1.25);
}

.lss-slot-pip.empty {
    color: var(--lss-text-muted);
    opacity: 0.35;
    cursor: default;
}

.lss-slot-pip.used {
    color: var(--lss-primary);
}

.lss-spell-lines-area {
    min-height: 180px;
    outline: none;
    color: var(--lss-text);
    line-height: 28px;
    font-size: inherit;
    white-space: pre-wrap;
    word-break: break-word;
    background-image: repeating-linear-gradient(transparent, transparent 27px, var(--lss-line) 27px, var(--lss-line) 28px);
    background-attachment: local;
    background-size: 100% 28px;
    padding: 4px 8px;
    border-radius: 4px;
}

.lss-spell-lines-area:focus {
    background-color: rgba(124, 58, 237, 0.02);
}

.lss-sheet-container .lss-spell-lines-area :is(p, div, span, li, b, strong, i, em, u, a) {
    font-size: inherit !important;
    line-height: inherit !important;
}
.lss-sheet-container .lss-spell-lines-area :is(p, div) { margin: 0 !important; }
.lss-sheet-container .lss-spell-lines-area :is(ul, ol) {
    margin: 0; padding-left: 22px; font-size: inherit; line-height: inherit;
}
.lss-sheet-container .lss-spell-lines-area li { margin: 0; }
.lss-sheet-container .lss-spell-lines-area :is(b, strong) { font-weight: 700; }
.lss-sheet-container .lss-spell-lines-area :is(i, em) { font-style: italic; }
.lss-sheet-container .lss-spell-lines-area u { text-decoration: underline; }

/* Collapsible Section for Unused High-Level Circles */
.lss-unused-spells-details {
    border: 2px dashed var(--lss-border-subtle);
    border-radius: 8px;
    background: var(--lss-box-bg);
    padding: 10px 14px;
    margin-top: 8px;
    transition: all 0.2s ease;
}

.lss-unused-spells-details[open] {
    border-style: solid;
    border-color: var(--lss-border);
    padding: 14px 16px;
}

.lss-unused-spells-summary {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 700;
    font-size: 13px;
    color: var(--lss-text-sub);
    user-select: none;
    outline: none;
}

.lss-unused-spells-summary:hover {
    color: var(--lss-primary);
}

.lss-unused-title {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.lss-unused-hint {
    font-size: 11.5px;
    font-weight: 500;
    color: var(--lss-text-muted);
}

.lss-unused-spells-grid {
    margin-top: 14px;
}

/* Statistics use their own column width, without stretching to the sheet's other columns. */
.lss-sheet-container .lss-col-1 {
    height: auto; align-self: start; gap: 10px;
    container-type: inline-size; container-name: lss-statistics;
}
.lss-sheet-container .lss-col-1 .lss-col-1-top-row {
    display: flex; flex-direction: column; gap: 10px; min-width: 0;
}
.lss-sheet-container .lss-col-1 .lss-abilities-column {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; height: auto;
}
.lss-sheet-container .lss-col-1 .lss-ability-pill {
    flex: none; height: 76px; min-height: 76px; max-height: none; padding: 4px 3px; gap: 2px;
}
.lss-sheet-container .lss-col-1 .lss-stat-title {
    font-size: 12.5px; line-height: 14px; letter-spacing: 0; padding: 0;
}
.lss-sheet-container .lss-col-1 .lss-mod-input {
    min-width: 0; height: 26px; min-height: 26px; max-height: 26px; line-height: 26px; padding: 0;
}
.lss-sheet-container .lss-col-1 .lss-score-circle {
    position: static; transform: none; width: 36px; height: 20px; min-height: 20px; border-radius: 8px;
}
.lss-sheet-container .lss-col-1 .lss-score-input {
    min-width: 0; height: 16px; min-height: 16px; max-height: 16px; font-size: 12.5px; line-height: 16px;
}
.lss-sheet-container .lss-col-1 .lss-col-1-right-stack { gap: 8px; min-width: 0; }
.lss-sheet-container .lss-col-1 .lss-insp-prof-row {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr)); gap: 6px;
}
.lss-sheet-container .lss-col-1 :is(.lss-insp-box, .lss-prof-box) {
    min-width: 0; padding: 4px 8px; gap: 6px;
}
.lss-sheet-container .lss-col-1 .lss-insp-prof-row .lss-sub-lbl {
    min-width: 0; font-size: 12.5px; line-height: 1.2; letter-spacing: 0; margin: 0;
}
.lss-sheet-container .lss-col-1 .lss-saves-list {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr)); gap: 2px 8px;
}
.lss-sheet-container .lss-col-1 .lss-skills-list {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr)); gap: 2px 8px;
}
.lss-sheet-container .lss-col-1 :is(.lss-save-line, .lss-skill-line) {
    display: grid; align-items: center; gap: 3px; min-width: 0; min-height: 28px;
    padding: 2px 0; font-size: 13px; line-height: 1.25; white-space: normal !important;
}
.lss-sheet-container .lss-col-1 .lss-save-line { grid-template-columns: 24px 28px minmax(0, 1fr); }
.lss-sheet-container .lss-col-1 .lss-skill-line { grid-template-columns: 24px 28px minmax(0, 1fr) auto; }
.lss-sheet-container .lss-col-1 .lss-prof-circle {
    width: 24px; min-width: 24px; max-width: 24px; height: 24px; min-height: 24px; max-height: 24px;
    padding: 0; line-height: 1;
}
.lss-sheet-container .lss-col-1 :is(.lss-save-num, .lss-skill-num) {
    width: 28px; min-width: 0; height: 24px; min-height: 24px; max-height: 24px;
    font-size: 13px; line-height: 24px;
}
.lss-sheet-container .lss-col-1 :is(.lss-save-title, .lss-skill-title) {
    white-space: normal; overflow: visible; text-overflow: clip; font-size: 13px; line-height: 1.25;
    overflow-wrap: anywhere;
}
.lss-sheet-container .lss-col-1 .lss-skill-dots-leader { display: none; }
.lss-sheet-container .lss-col-1 .lss-skill-stat { font-size: 11px; letter-spacing: 0; margin: 0; }
.lss-sheet-container .lss-col-1 :is(.lss-saves-box, .lss-skills-box) > .lss-box-footer-lbl {
    order: -1; margin: 0 0 6px; padding: 0 0 6px; border-top: 0;
    border-bottom: 1px solid var(--lss-border-faint); text-align: left; font-size: 12.5px; letter-spacing: 0.04em;
}
.lss-sheet-container .lss-col-1 .lss-languages-box {
    flex: none; height: auto; min-height: 0;
}
.lss-sheet-container .lss-col-1 .lss-languages-box .lss-editable-textarea {
    flex: none; height: auto; min-height: 0;
}
@container lss-statistics (min-width: 390px) {
    .lss-sheet-container .lss-col-1 .lss-abilities-column { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
@media (pointer: coarse) {
    .lss-sheet-container .lss-col-1 .lss-prof-circle {
        width: 32px; min-width: 32px; max-width: 32px; height: 32px; min-height: 32px; max-height: 32px;
    }
    .lss-sheet-container .lss-col-1 .lss-save-line { grid-template-columns: 32px 28px minmax(0, 1fr); }
    .lss-sheet-container .lss-col-1 .lss-skill-line { grid-template-columns: 32px 28px minmax(0, 1fr) auto; }
}


/* Keep the manual indicator in the numeric column, away from its label. */
.lss-sheet-container .lss-col-1 .lss-save-line { grid-template-columns:24px 48px minmax(0,1fr); }
.lss-sheet-container .lss-col-1 .lss-skill-line { grid-template-columns:24px 48px minmax(0,1fr) auto; }
.lss-sheet-container :is(.lss-save-line,.lss-skill-line) .lss-calculated-field { width:48px; }
.lss-sheet-container .lss-formula-trigger { right:0; }
.lss-sheet-container .lss-formula-trigger.is-manual { opacity:.85; color:#8c5b12; border-color:#c8a66b; font:700 10px system-ui; }
.lss-sheet-container .lss-attack-row .lss-calculated-field { display:flex; width:100%; }
.lss-sheet-container .lss-attack-row .lss-calculated-field input { padding-right:24px; }
.lss-sheet-container .lss-spell-ability-select { width:100%; min-width:0; border:0; border-bottom:1px solid #ccd4e0; border-radius:0; background:transparent; color:inherit; font:inherit; font-weight:600; }
.lss-calculation-result > button { justify-self:start; width:auto; }
.lss-attack-settings > summary { cursor:pointer; margin-bottom:8px; }
.lss-bonus-row { grid-template-columns:minmax(0,1fr) minmax(70px,110px) auto; }
.lss-bonus-row:has(.lss-bonus-remove) { grid-template-columns:minmax(0,1fr) minmax(70px,110px) auto 28px; }
.lss-bonus-row .lss-bonus-inactive { grid-column:1/-1; color:#94621f; }
.lss-bonus-row .lss-bonus-remove { width:28px; min-width:28px; height:28px; padding:0; }
.lss-bonus-add { margin-top:8px; }
.lss-bonus-add-form { display:grid; grid-template-columns:minmax(0,1fr) minmax(90px,120px); gap:10px; padding:12px; margin-top:10px; border:1px solid var(--line,#d5ddcf); border-radius:6px; }
.lss-bonus-add-form[hidden] { display:none!important; }
.lss-bonus-add-form :is(p,.row) { grid-column:1/-1; margin:0; }
.lss-bonus-error { color:#9a4d20; }
@media (max-width:650px) {
 .lss-sheet-container .lss-col-1 .lss-save-line { grid-template-columns:32px 48px minmax(0,1fr); }
 .lss-sheet-container .lss-col-1 .lss-skill-line { grid-template-columns:32px 48px minmax(0,1fr) auto; }
}
@media (max-width:480px) {
 .lss-bonus-row,.lss-bonus-row:has(.lss-bonus-remove) { grid-template-columns:minmax(0,1fr) minmax(60px,90px) 28px; }
 .lss-bonus-row > small:not(.lss-bonus-inactive) { grid-column:1/3; }
 .lss-bonus-row .lss-bonus-remove { grid-column:3; grid-row:1; }
 .lss-bonus-add-form { grid-template-columns:minmax(0,1fr); }
}
.lss-sheet-container .lss-shield-box .lss-formula-trigger { right:4px; }

/* Selection tools never reserve a row in the card or editor. */
.markdown-format-toolbar {
    position: fixed; inset: auto; margin: 0; z-index: 10000;
    display: flex; flex-wrap: wrap; align-items: center; gap: 3px;
    width: max-content; max-width: calc(100vw - 16px); padding: 4px;
    color: var(--ink); background: var(--paper); border: 1px solid var(--line);
    border-radius: 7px; box-shadow: 0 3px 16px #0003;
}
.markdown-format-toolbar[hidden] { display: none !important; }
.markdown-format-toolbar button {
    flex: 0 0 auto; width: 32px; min-width: 32px; min-height: 32px;
    padding: 4px; margin: 0; font: 600 15px/1 system-ui; border-color: transparent;
}
.markdown-format-toolbar [data-md-command="bold"] { font-weight: 800; }
.markdown-format-toolbar [data-md-command="italic"] { font-style: italic; }
.markdown-format-toolbar button:focus-visible { outline: 2px solid var(--green); outline-offset: 1px; }
.markdown-selection-mirror { contain: layout style; }
textarea[data-textarea-sizing] { max-height: none; overflow-y: hidden; resize: vertical; }
.markdown-note-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; }
.markdown-note-actions > .btn-save-note { width: auto; flex: 1 1 auto; margin: 0; }
.markdown-note-toggle { flex: 0 0 auto; padding: 5px 9px; min-height: 32px; font-size: 12px; }
.markdown-note-preview { font: inherit; overflow-wrap: anywhere; margin: 4px 0; }
.markdown-note-preview > :first-child { margin-top: 0; }
.markdown-note-preview > :last-child { margin-bottom: 0; }
.markdown-note-preview[hidden], textarea[data-markdown-note][hidden] { display: none !important; }
@media (pointer: coarse) { .markdown-format-toolbar button { width: 40px; min-height: 40px; } }
@media print { .markdown-format-toolbar, .markdown-selection-mirror { display: none !important; } }

.material-link-popup {
    position: fixed; inset: auto; margin: 0; z-index: 10020;
    width: min(340px, calc(100vw - 16px)); max-height: min(390px, calc(100dvh - 16px));
    display: flex; flex-direction: column; gap: 6px; padding: 8px;
    border: 1px solid var(--line); border-radius: 8px; background: var(--paper); color: var(--ink);
    box-shadow: 0 5px 24px #0003; font: 13px/1.35 system-ui; overflow: hidden;
}
.material-link-popup[hidden], .material-link-popup input[hidden] { display: none !important; }
.material-link-popup > header { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0; margin: 0; border: 0; background: transparent; }
.material-link-popup > header button { flex: 0 0 auto; min-width: 28px; min-height: 28px; padding: 2px 6px; margin: 0; }
.material-link-popup > input { min-width: 0; width: 100%; min-height: 34px; margin: 0; font: inherit; }
.material-link-results { display: flex; flex-direction: column; min-height: 0; overflow: auto; overscroll-behavior: contain; }
.material-link-results > button { flex: 0 0 auto; display: flex; flex-direction: column; align-items: stretch; gap: 2px; text-align: left; white-space: normal; min-height: 44px; width: 100%; padding: 6px 8px; margin: 0; border: 1px solid transparent; background: transparent; font: inherit; }
.material-link-results > button b, .material-link-results > button small { overflow-wrap: anywhere; }
.material-link-results > button small { font-size: 12px; color: var(--muted, inherit); }
.material-link-results > button[aria-selected="true"] { background: var(--soft); border-color: var(--line); }
.material-link-results > button:focus-visible { outline: 2px solid var(--green); outline-offset: -2px; }
.material-link-status { flex: 0 0 auto; margin: 0; font-size: 11px; color: var(--muted, inherit); }
.markdown-format-toolbar > [data-material-link-command] { width: auto; padding-inline: 8px; font-size: 12px; }
.material-link-mirror { contain: layout style; }
@media print { .material-link-popup, .material-link-mirror { display: none !important; } }

.bestiary-root{min-width:0;color:var(--ink)}
.bestiary-root .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.bestiary-inline-image{display:block;max-width:100%;max-height:420px;object-fit:contain;cursor:zoom-in}
.bestiary-combat-fields{max-width:800px;margin:0 0 18px;font:14px/1.7 Georgia,serif}.bestiary-combat-field{margin:4px 0}.bestiary-combat-field>.prose,.bestiary-combat-field>.prose>p{display:inline;margin:0}.bestiary-combat-field>.prose>p+p::before{content:' ';white-space:pre}
.bestiary-root>.bestiary-top{padding:9px 24px}.bestiary-root>.bestiary-heading{padding:14px 24px}.bestiary-root>.bestiary-heading h1{font-size:26px;margin:0}.bestiary-root>.bestiary-campaign-context{padding:0 24px 12px;align-items:center}.bestiary-root>.bestiary-campaign-context label{flex-direction:row;align-items:center;gap:10px;font-size:11px;max-width:440px}.bestiary-root>.bestiary-campaign-context select{min-width:0;flex:1}.bestiary-root>.bestiary-layout{height:calc(100dvh - 129px)}.bestiary-root:has(>.bestiary-campaign-context)>.bestiary-layout{height:calc(100dvh - 179px)}
@media(max-width:680px){.bestiary-root>.bestiary-layout,.bestiary-root:has(>.bestiary-campaign-context)>.bestiary-layout{height:auto}.bestiary-root>.bestiary-top{padding:9px 14px}.bestiary-root>.bestiary-heading{padding:14px}.bestiary-root>.bestiary-campaign-context{padding:0 14px 12px}}
.bestiary-creature-heading{flex-wrap:wrap}.bestiary-record-actions{display:flex;align-items:center;gap:5px;flex-wrap:wrap}.bestiary-record-actions>button{min-height:32px;padding:7px 10px;font-size:11px}.bestiary-record-actions .bestiary-favorite{margin:0;padding:4px 6px;font-size:18px}.bestiary-record-menu{position:relative}.bestiary-record-menu>summary{cursor:pointer;list-style:none;display:grid;place-items:center;width:32px;min-height:32px;border:1px solid var(--line);border-radius:6px;font-weight:700;background:var(--paper)}.bestiary-record-menu>div{position:absolute;right:0;top:38px;z-index:5;width:185px;padding:5px;border:1px solid var(--line);border-radius:6px;background:var(--paper);box-shadow:var(--shadow)}.bestiary-record-menu button{display:block;width:100%;text-align:left;border:0;padding:8px;font-size:11px}
.bestiary-top{display:flex;gap:24px;align-items:center;padding:14px 24px;background:var(--paper);border-bottom:1px solid var(--line)}
.bestiary-top nav{display:flex;gap:20px;align-items:center;flex-wrap:wrap;margin-left:auto;font-size:12px}.bestiary-top nav a{text-decoration:none}.bestiary-top .brand-icon{font-size:28px}
.bestiary-heading{display:flex;align-items:center;gap:24px;max-width:1560px;margin:auto;padding:24px 28px 18px}.bestiary-heading h1{font-size:29px;margin:4px 0 8px}.bestiary-heading p{margin:0;font-size:12px}.bestiary-heading-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-left:auto}
.bestiary-file-menu{position:relative}.bestiary-file-menu>summary{list-style:none;display:grid;place-items:center;border:1px solid var(--line);border-radius:6px;background:var(--paper);width:36px;min-height:36px;cursor:pointer;font-weight:700}.bestiary-file-menu>div{position:absolute;right:0;top:42px;padding:5px;width:220px;background:var(--paper);border:1px solid var(--line);border-radius:7px;box-shadow:var(--shadow);z-index:8}.bestiary-file-menu button{border:0;justify-content:flex-start;width:100%}
.bestiary-layout{display:grid;grid-template-columns:minmax(330px,440px) minmax(0,1fr);max-width:1560px;margin:auto;border-top:1px solid var(--line);height:calc(100dvh - 187px);min-height:440px}.bestiary-browser{padding:18px 20px;min-width:0;overflow:auto;overscroll-behavior:contain}.bestiary-search-label input{font-size:14px;width:100%}.bestiary-quick-filters{display:grid;grid-template-columns:75px 75px minmax(0,1fr);gap:8px;margin:10px 0}.bestiary-quick-filters label{font-size:10px}.bestiary-quick-filters select{padding:7px 6px;font-size:12px;min-width:0}.bestiary-more-filters{border-top:1px solid var(--line);border-bottom:1px solid var(--line);font-size:12px}.bestiary-more-filters>summary{cursor:pointer;padding:9px 1px;font-weight:600;display:flex;align-items:center;gap:7px}.bestiary-more-filters>summary::before{content:'▸';color:var(--muted)}.bestiary-more-filters[open]>summary::before{content:'▾'}.bestiary-more-filters #bestiary-filter-count:not(:empty){background:var(--green);color:white;border-radius:10px;font-size:9px;padding:1px 5px}.bestiary-filter-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px 12px;padding:4px 0 14px}.bestiary-filter-grid label{font-size:10px;min-width:0}.bestiary-filter-grid select{font-size:12px;padding:7px 6px}.bestiary-filter-grid .check{margin:0;font-size:11px;align-self:end;min-height:31px}
.bestiary-filter-chips{display:flex;flex-wrap:wrap;gap:4px}.bestiary-filter-chips:not(:empty){padding-top:10px}.bestiary-filter-chip,.bestiary-reset-filters{font-size:10px;padding:4px 7px;min-height:26px;border-radius:20px;background:var(--soft)}.bestiary-reset-filters{border:0;background:transparent;color:var(--muted)}.bestiary-results-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:12px 0 5px;color:var(--muted);font-size:10px}.bestiary-results-heading select{background:transparent;border:0;padding:4px;font-size:11px;width:auto}.bestiary-results{display:flex;flex-direction:column;gap:3px}.bestiary-result{display:flex;min-width:0;border:1px solid transparent;border-radius:7px}.bestiary-result:hover{border-color:var(--line);background:var(--paper)}.bestiary-result.selected{border-color:var(--green);background:var(--paper)}.bestiary-result-main{flex:1;min-width:0;text-align:left;justify-content:flex-start;gap:10px;padding:11px 8px 11px 10px;border:0;background:transparent;font-weight:400}.bestiary-result-main:hover{background:transparent}.bestiary-result-name{flex:1;min-width:0}.bestiary-result-name b{display:block;font-size:12px;line-height:1.4}.bestiary-result-name>small{display:block;font-size:10px;color:var(--muted);margin-top:4px;font-weight:400;overflow-wrap:anywhere}.bestiary-result-numbers{display:flex;flex-shrink:0;gap:10px;text-align:center;font-size:11px;font-weight:600}.bestiary-result-numbers small{display:block;color:var(--muted);font-size:8px;font-weight:400;margin-bottom:3px}.bestiary-result-star{align-self:flex-start;border:0;background:transparent;min-width:24px;min-height:28px;padding:4px;font-size:17px;margin:6px 3px 0 0;color:var(--muted)}.bestiary-result-star[aria-pressed=true]{color:#a47630}.bestiary-detail{min-width:0;overflow:auto;overscroll-behavior:contain;border-left:1px solid var(--line);background:var(--paper);padding:16px 30px 40px}.bestiary-detail-actions{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-bottom:18px;max-width:800px}.bestiary-detail-actions button{padding:7px 10px;min-height:32px;font-size:11px}.bestiary-back{display:none}.bestiary-creature-heading{display:flex;align-items:flex-start;gap:12px;max-width:800px;margin:0 0 20px}.bestiary-creature-heading>div{min-width:0}.bestiary-creature-heading h2{font-size:30px;line-height:1.15;font-family:Georgia,serif;margin:0 0 8px;overflow-wrap:anywhere}.bestiary-creature-heading p{font-size:12px;margin:4px 0}.bestiary-aliases{font-style:italic;color:var(--muted)}.bestiary-favorite{flex-shrink:0;border:0;background:transparent;min-height:30px;margin-top:-4px}.bestiary-favorite.active{color:#a47630}.bestiary-stat-basics{display:flex;flex-wrap:wrap;gap:12px 32px;border-top:2px solid var(--gold);border-bottom:1px solid var(--line);padding:12px 0;margin:12px 0;max-width:800px}.bestiary-stat-basics>span{display:flex;align-items:baseline;gap:7px}.bestiary-stat-basics small{font-size:10px;color:var(--muted)}.bestiary-stat-basics b{font-size:17px}.bestiary-speed{font-size:13px;margin:12px 0}.bestiary-abilities{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));max-width:650px;border-bottom:1px solid var(--line);padding:8px 0 14px;margin-bottom:18px;text-align:center}.bestiary-abilities>span{display:flex;flex-direction:column;gap:2px}.bestiary-abilities small{font-size:10px;color:var(--muted)}.bestiary-abilities b{font-size:16px}.bestiary-abilities em{font-size:11px;font-style:normal;color:var(--muted)}.bestiary-stat-section{max-width:800px}.bestiary-stat-section h3{border-bottom:1px solid var(--line);padding-bottom:6px;font:600 19px Georgia,serif;margin:25px 0 10px;color:var(--green)}.bestiary-stat-section .prose{font:14px/1.75 Georgia,serif}.bestiary-stat-section .prose p:last-child{margin-bottom:0}.bestiary-disclosure{max-width:800px;border-top:1px solid var(--line);margin-top:18px;padding-top:10px;font-size:12px}.bestiary-disclosure>summary{cursor:pointer;color:var(--muted);font-weight:600;padding:4px 0}.bestiary-disclosure[open]>summary{margin-bottom:12px}.bestiary-disclosure .prose{font:14px/1.75 Georgia,serif}.bestiary-raw{white-space:pre-wrap;overflow-wrap:anywhere;font:12px/1.6 ui-monospace,monospace;padding:12px;background:var(--soft);border-radius:5px}.bestiary-source{font-size:11px;color:var(--muted);margin:24px 0 0;overflow-wrap:anywhere}.bestiary-tags{display:flex;flex-wrap:wrap;gap:4px;margin:10px 0}.bestiary-tags>span{font-size:10px;border:1px solid var(--line);border-radius:4px;padding:2px 7px;background:var(--soft)}.bestiary-record-status,.bestiary-context-hint,.bestiary-lss-note{font-size:12px;padding:10px 12px;border-left:3px solid var(--gold);background:var(--soft);max-width:800px}.bestiary-empty{max-width:470px;margin:55px auto;padding:10px 20px;color:var(--muted);text-align:center}.bestiary-empty h2{color:var(--ink);font-size:24px}.bestiary-empty p{font-size:13px}.bestiary-no-results{padding:30px 10px;text-align:center;color:var(--muted);font-size:12px}.bestiary-no-results p{font-size:11px;margin-top:7px}.bestiary-campaign-context{max-width:1560px;margin:0 auto;padding:0 28px 14px;display:flex;gap:14px;align-items:end;font-size:12px}.bestiary-campaign-context label{max-width:400px;width:100%;font-size:10px}.bestiary-campaign-context select{font-size:12px;padding:7px 9px}.bestiary-root:has(.bestiary-campaign-context) .bestiary-layout{height:calc(100dvh - 250px)}
.bestiary-editor .modal-body{gap:12px}.bestiary-editor-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.bestiary-editor-stats{display:grid;grid-template-columns:90px 110px minmax(0,1fr);gap:12px}.bestiary-editor-abilities{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}.bestiary-editor-grid label,.bestiary-editor-stats label,.bestiary-editor-abilities label{min-width:0}.bestiary-editor textarea{min-height:95px}.bestiary-editor .bestiary-disclosure{margin-top:5px;max-width:none}.bestiary-editor .bestiary-disclosure label{margin-top:10px}.bestiary-editor .hint{margin:0}.bestiary-import-warnings{border-left:3px solid var(--gold);background:var(--soft);padding:10px 14px;font-size:12px;margin-bottom:14px}.bestiary-import-warnings ul{margin:7px 0 0;padding-left:18px}.bestiary-paste textarea{min-height:230px;max-height:none}.bestiary-paste #bestiary-parse{align-self:flex-start}.bestiary-paste #bestiary-import-preview{border-top:1px solid var(--line);padding-top:12px}.bestiary-paste #bestiary-import-preview>h3{font-size:23px;margin-top:0}.bestiary-paste .bestiary-stat-section .prose{font-size:13px}.bestiary-use-dialog [data-use-mode]>label{margin-bottom:12px}.bestiary-use-dialog .searchable-select{position:relative}.bestiary-use-dialog .reference-results{position:relative;max-height:160px;overflow:auto;border:1px solid var(--line);border-radius:5px}.bestiary-use-dialog .reference-results button{display:block;width:100%;text-align:left;border:0;border-radius:0}.bestiary-use-dialog .reference-count{margin:0}.bestiary-images{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0}.bestiary-image-button{width:115px;height:100px;padding:0;overflow:hidden;background:var(--soft)}.bestiary-image-button img{display:block;width:100%;height:100%;object-fit:contain}.bestiary-image-dialog{padding:0;background:#141b19;border:1px solid #48574f;border-radius:8px;max-width:96vw;max-height:96dvh;color:white}.bestiary-image-dialog::backdrop{background:#101713cc}.bestiary-image-dialog header{display:flex;gap:18px;align-items:center;justify-content:space-between;padding:8px 12px;font-size:12px}.bestiary-image-dialog header button{border:0;color:white;background:transparent;min-height:30px;font-size:20px;padding:4px 8px}.bestiary-image-dialog img{display:block;max-width:94vw;max-height:calc(94dvh - 50px);object-fit:contain;margin:auto}.bestiary-picker-dialog.modal.wide{width:min(1200px,calc(100vw - 28px))}.bestiary-picker-dialog>.modal-body{padding:0}.bestiary-picker-dialog .modal-body{padding:0}.bestiary-picker .bestiary-heading{padding:14px 18px}.bestiary-picker .bestiary-heading h1{font-size:20px}.bestiary-picker .bestiary-heading p,.bestiary-picker .bestiary-heading .eyebrow{display:none}.bestiary-picker .bestiary-layout{height:62dvh;min-height:280px;grid-template-columns:minmax(290px,390px) minmax(0,1fr)}.bestiary-picker .bestiary-browser{padding:14px}.bestiary-picker .bestiary-detail{padding:14px 20px 30px}.bestiary-picker .bestiary-creature-heading h2{font-size:25px}
@media(max-width:850px){.bestiary-heading{padding:18px 18px 14px;gap:12px}.bestiary-heading h1{font-size:26px}.bestiary-heading-actions{max-width:300px}.bestiary-layout{grid-template-columns:minmax(285px,360px) minmax(0,1fr)}.bestiary-browser{padding:14px}.bestiary-detail{padding:14px 20px 30px}.bestiary-creature-heading h2{font-size:26px}.bestiary-result-numbers{gap:7px}.bestiary-top{padding:12px 18px;gap:12px}.bestiary-top nav{gap:12px}.bestiary-top .brand small{display:none}}
@media(max-width:680px){.bestiary-top{padding:10px 14px}.bestiary-top .brand>span:last-child{display:none}.bestiary-top nav{gap:14px;font-size:11px}.bestiary-heading{display:block;padding:16px 14px 12px}.bestiary-heading p{font-size:11px}.bestiary-heading h1{font-size:27px}.bestiary-heading-actions{max-width:none;margin:12px 0 0;gap:6px}.bestiary-heading-actions button{font-size:11px;padding:8px 11px}.bestiary-heading .eyebrow{font-size:8px}.bestiary-layout,.bestiary-root:has(.bestiary-campaign-context) .bestiary-layout,.bestiary-picker .bestiary-layout{display:block;height:auto;min-height:0}.bestiary-browser{padding:12px 14px 25px;overflow:visible}.bestiary-detail{display:none;border:0;padding:14px 18px 35px;overflow:visible;min-height:calc(100dvh - 170px)}.bestiary-detail-open .bestiary-browser{display:none}.bestiary-detail-open .bestiary-detail{display:block}.bestiary-detail-open .bestiary-heading{display:none}.bestiary-back{display:inline-flex}.bestiary-detail-actions{position:sticky;top:0;z-index:2;background:var(--paper);padding:8px 0;margin-top:-8px}.bestiary-detail-actions button{font-size:10px;padding:7px 9px}.bestiary-creature-heading h2{font-size:28px}.bestiary-quick-filters{grid-template-columns:75px 75px minmax(0,1fr)}.bestiary-result-main{padding:12px 9px}.bestiary-result-name b{font-size:13px}.bestiary-result-numbers{gap:12px}.bestiary-result-star{margin-top:8px}.bestiary-campaign-context{padding:0 14px 12px;display:block}.bestiary-campaign-context .hint{display:none}.bestiary-editor-grid{grid-template-columns:1fr 1fr;gap:10px}.bestiary-editor-stats{grid-template-columns:75px 85px minmax(0,1fr);gap:8px}.bestiary-editor-abilities{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.bestiary-editor input{padding:8px}.bestiary-editor .modal-body{padding:15px}.bestiary-editor .modal-body>.hint{font-size:10px}.bestiary-paste textarea{min-height:260px}.bestiary-picker-dialog .modal-body{overflow:auto}.bestiary-picker .bestiary-layout{min-height:45dvh}.bestiary-picker .bestiary-detail{min-height:45dvh}.bestiary-picker .bestiary-heading{padding:12px 14px}.bestiary-filter-chip{max-width:100%;overflow-wrap:anywhere}.bestiary-stat-basics{gap:10px 24px}.bestiary-stat-section .prose,.bestiary-disclosure .prose{font-size:14px}}

/* Direct atlas navigation, hit dice and independently managed bestiary media. */
.bestiary-creature-portrait{flex:0 0 auto}.bestiary-creature-title{flex:1;min-width:160px}#bestiary-avatar-open{padding:0;min-height:0;border:0;background:transparent;border-radius:50%}.bestiary-avatar[hidden]{display:none}
.bestiary-hp{flex-wrap:wrap;align-items:baseline}.bestiary-hp-roll{min-height:24px;padding:2px 5px;border:0;background:transparent;font-size:12px;font-weight:500;color:var(--green)}.bestiary-hp-result{flex-basis:100%;font:600 12px/1.5 system-ui;color:var(--green)}
.bestiary-gallery{margin-top:24px;border-top:1px solid var(--line);padding-top:8px}.bestiary-gallery>.section-heading{display:flex;align-items:center;justify-content:space-between;gap:10px}.bestiary-gallery h3{margin:8px 0}.bestiary-gallery .section-heading button{font-size:11px;min-height:30px;padding:5px 9px}.bestiary-images figure{margin:0;width:115px}.bestiary-images figcaption{font-size:11px;color:var(--muted);overflow-wrap:anywhere;margin-top:4px}
.bestiary-atlas-dialog.modal.wide{width:min(1460px,calc(100vw - 24px));height:min(94dvh,980px);max-height:94dvh}
.bestiary-atlas-dialog>form{display:flex;flex-direction:column;height:100%;min-height:0;max-height:none}
.bestiary-atlas-dialog>form>.modal-body{flex:1;min-width:0;min-height:0;padding:0;overflow:hidden}
.bestiary-atlas-dialog>form>header{flex-wrap:wrap}
.bestiary-atlas-dialog>form>footer{display:none}
.bestiary-atlas-dialog .bestiary-root{display:flex;flex-direction:column;flex:1;min-width:0;min-height:0}
.bestiary-atlas-dialog .bestiary-heading{flex-shrink:0;width:100%;padding:10px 18px}
.bestiary-atlas-dialog .bestiary-heading h1{display:none}
.bestiary-atlas-dialog .bestiary-heading-actions{margin-left:0;max-width:100%}
.bestiary-atlas-dialog .bestiary-layout{flex:1;width:100%;height:auto;min-height:0;min-width:0}
.bestiary-atlas-dialog .bestiary-return-button{margin-left:auto}

/* Every control belongs to the same readable column as the statblock. */
.bestiary-creature-heading{width:100%;justify-content:flex-start}
.bestiary-creature-title{flex:1 1 180px;min-width:0}
.bestiary-record-actions,.bestiary-heading-actions{position:relative;min-width:0;max-width:100%}
.bestiary-record-actions{justify-content:flex-start}
.bestiary-record-actions>button{max-width:100%;white-space:normal}
.bestiary-record-menu,.bestiary-file-menu{position:static}
.bestiary-record-menu>div,.bestiary-file-menu>div{top:calc(100% + 6px);max-width:100%}
.bestiary-gallery{max-width:800px;min-width:0}
.bestiary-gallery>.section-heading{justify-content:flex-start;flex-wrap:wrap;margin-bottom:10px}
.bestiary-gallery>.section-heading h3{min-width:0;overflow-wrap:anywhere}
.bestiary-detail .prose{min-width:0;overflow-wrap:anywhere}
.bestiary-detail .prose img{max-width:100%;height:auto}
.bestiary-detail .bestiary-tags,.bestiary-detail .bestiary-speed{max-width:800px;overflow-wrap:anywhere}
@media(max-width:680px){.bestiary-creature-portrait .bestiary-avatar{--bestiary-avatar-size:84px!important}.bestiary-atlas-dialog>form>.modal-body{overflow:auto}.bestiary-atlas-dialog .bestiary-root,.bestiary-atlas-dialog .bestiary-layout{flex:0 0 auto}.bestiary-atlas-dialog .bestiary-layout{height:auto}.bestiary-result-main{gap:7px}.bestiary-result-numbers{gap:7px}.bestiary-hp{max-width:100%}}

.bestiary-use-dialog #bestiary-use-target-results{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin-top:8px}.bestiary-target-result{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;min-width:0}.bestiary-target-result b{overflow-wrap:anywhere}.bestiary-target-result small{color:var(--muted)}.bestiary-target-result[aria-pressed=true]{border-color:var(--accent);background:var(--soft)}@media(max-width:540px){.bestiary-use-dialog #bestiary-use-target-results{grid-template-columns:1fr}}

.bestiary-warning-heading{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.bestiary-warning-heading button{min-height:26px;padding:3px 8px;font-size:11px}.bestiary-review-error{margin:6px 0 0;color:var(--danger,#a33)}.bestiary-review-error:empty{display:none}

.bestiary-quick-filters input,.bestiary-quick-filters select{padding:7px 6px;font-size:12px;min-width:0}
.bestiary-quick-filters input[aria-invalid=true]{border-color:var(--red)}
.bestiary-cr-error{margin:-3px 0 8px;color:var(--red);font-size:11px;line-height:1.5}

/* Keep search and page controls reachable while only the short result page scrolls. */
.bestiary-browser{display:flex;flex-direction:column;min-height:0;overflow:auto}
.bestiary-browser> :not(.bestiary-results){flex-shrink:0}
.bestiary-browser>.bestiary-results{flex:1;min-height:80px;overflow:auto;overscroll-behavior:contain}
.bestiary-pages{display:flex;align-items:center;justify-content:center;gap:12px;padding:6px 0;margin:0 0 6px;border-bottom:1px solid var(--line);font-size:11px;color:var(--muted)}
.bestiary-pages[hidden]{display:none}
.bestiary-pages button{min-width:32px;min-height:30px;padding:3px 8px}
.bestiary-page-status{min-width:58px;text-align:center;white-space:nowrap;font-variant-numeric:tabular-nums}
@media(max-width:680px){.bestiary-browser{display:block;overflow:visible}.bestiary-browser>.bestiary-results{max-height:60dvh;min-height:0;overflow:auto}.bestiary-pages{padding-top:10px}}

.bestiary-destination{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 12px;padding:10px 12px;border:1px solid var(--line);border-radius:6px;background:var(--soft)}
.bestiary-destination label{min-width:0;margin:0;font-size:11px}.bestiary-destination select{width:100%;min-width:0;font-size:12px}
.bestiary-destination label[hidden]{display:none}.bestiary-destination .hint{grid-column:1/-1;margin:0;font-size:11px}
.bestiary-destination:has(label[hidden])>label:first-child{grid-column:1/-1}
.bestiary-catalog-hint{display:block;color:var(--muted);font-size:10px;line-height:1.45;margin-top:4px;overflow-wrap:anywhere}
@media(max-width:500px){.bestiary-destination{grid-template-columns:minmax(0,1fr)}.bestiary-destination .hint{grid-column:auto}}

.bestiary-avatar { position: relative; display: inline-grid; place-items: center; flex: 0 0 var(--bestiary-avatar-size, 40px); width: var(--bestiary-avatar-size, 40px); height: var(--bestiary-avatar-size, 40px); overflow: hidden; border: 1px solid var(--line); border-radius: 50%; background: var(--soft); vertical-align: middle; }
.bestiary-avatar-fallback { font: 600 clamp(12px, calc(var(--bestiary-avatar-size, 40px) * .27), 40px) / 1 var(--font-ui, sans-serif); color: var(--muted); }
.bestiary-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bestiary-avatar img[hidden] { display: none; }
.bestiary-media-dialog .bestiary-media-fields { display: flex; flex-direction: column; gap: 12px; border: 0; margin: 0; padding: 0; min-width: 0; }
.bestiary-media-upload { margin: 0; }
.bestiary-media-upload input { display: block; width: 100%; min-width: 0; }
.bestiary-media-list { display: flex; flex-direction: column; gap: 14px; }
.bestiary-media-row { display: grid; grid-template-columns: 144px minmax(0, 1fr); align-items: start; gap: 16px; padding-block: 12px; border-top: 1px solid var(--line); }
.bestiary-media-preview { display: grid; place-items: center; min-height: 96px; border-radius: 5px; overflow: hidden; background: var(--soft); }
.bestiary-media-preview img { width: 100%; max-height: 170px; object-fit: contain; }
.bestiary-media-captions { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-width: 0; }
.bestiary-media-captions label { width: 100%; margin: 0; }
.bestiary-media-captions input { width: 100%; min-width: 0; }
.bestiary-media-remove { font-size: 12px; }
.bestiary-media-status:empty { display: none; }
@media (max-width: 560px) {
    .bestiary-media-row { grid-template-columns: 88px minmax(0, 1fr); gap: 10px; }
    .bestiary-media-preview img { max-height: 130px; }
}

.modal.wide.combat-picker-dialog{width:min(1080px,calc(100vw - 24px));height:min(800px,92dvh);max-height:92dvh;overflow:hidden}.combat-picker-dialog>form{height:100%;min-height:0;display:flex;flex-direction:column}.combat-picker-dialog>form>header{flex:none;padding:14px 20px}.combat-picker-dialog>form>header h2{font-size:22px}.combat-picker-dialog>form>.modal-body{flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden;padding:14px 20px 0;gap:10px}.combat-picker-dialog>form>footer{flex:none;display:flex;align-items:center;justify-content:flex-end;gap:8px;padding:12px 20px}.combat-picker-dialog .form-error:empty{display:none}.combat-picker-dialog .form-error{margin:6px 20px;font-size:12px}.combat-picker-controls{display:flex;gap:12px;align-items:end}.combat-picker-search-label{flex:1;min-width:0}.combat-picker-controls label{font-size:10px;color:var(--muted)}.combat-picker-controls input,.combat-picker-controls select{font-size:13px;padding:8px 10px;min-height:38px}.combat-picker-cr{display:flex;gap:6px;flex:none}.combat-picker-cr label{width:78px}.combat-picker-tabs{display:flex;flex-wrap:wrap;gap:5px}.combat-picker-tabs button{padding:5px 10px;min-height:30px;font-size:11px;border-color:transparent;background:transparent;color:var(--muted)}.combat-picker-tabs button[aria-pressed=true]{background:var(--soft);border-color:var(--line);color:var(--green)}.combat-picker-status{font-size:10px;color:var(--muted);min-height:16px}.combat-picker-layout{flex:1;min-height:0;display:grid;grid-template-columns:minmax(280px,370px) minmax(0,1fr);gap:20px}.combat-picker-list-pane{display:flex;flex-direction:column;min-height:0;min-width:0}.combat-picker-results{overflow:auto;min-height:0;flex:1;padding:1px 4px 10px 1px;overscroll-behavior:contain}.combat-picker-result{display:flex;width:100%;gap:10px;align-items:center;justify-content:flex-start;text-align:left;padding:10px 9px;margin:0 0 4px;border:1px solid transparent;background:transparent;border-radius:7px;min-width:0}.combat-picker-result:hover,.combat-picker-result[aria-pressed=true]{background:var(--paper);border-color:var(--line)}.combat-picker-result[aria-pressed=true]{border-color:var(--green)}.combat-picker-result-title{min-width:0;flex:1}.combat-picker-result-title b{display:block;font-size:12px;line-height:1.35;overflow-wrap:anywhere}.combat-picker-result-title small{display:block;font-size:9px;line-height:1.4;margin-top:3px;color:var(--muted);font-weight:400;overflow-wrap:anywhere}.combat-picker-result-cr{font-size:12px;font-weight:650;flex:none;min-width:25px;text-align:center}.combat-picker-result-cr small{display:block;font-size:8px;font-weight:400;color:var(--muted)}.combat-picker-avatar{flex:none;width:var(--combat-avatar-size);height:var(--combat-avatar-size);position:relative;display:grid;place-items:center;overflow:hidden;border-radius:50%;background:var(--soft);border:1px solid var(--line);color:var(--green);font-size:13px;font-weight:650}.combat-picker-avatar img{position:absolute;inset:0;object-fit:cover;width:100%;height:100%}.combat-picker-pages{display:flex;align-items:center;justify-content:center;gap:14px;padding:7px 0 10px;border-top:1px solid var(--line);font-size:11px;color:var(--muted)}.combat-picker-pages button{padding:4px 10px;min-height:28px;font-size:13px}.combat-picker-preview-pane{min-width:0;min-height:0;overflow:auto;padding:2px 4px 20px 20px;border-left:1px solid var(--line);overscroll-behavior:contain}.combat-picker-preview-empty,.combat-picker-empty{font-size:12px;color:var(--muted);padding:35px 15px;text-align:center}.combat-picker-empty p{font-size:11px}.combat-picker-preview-heading{display:flex;align-items:center;gap:14px;margin-bottom:16px}.combat-picker-preview-heading>div{min-width:0}.combat-picker-preview-heading h3{font:600 26px/1.15 Georgia,serif;margin:0 0 7px;overflow-wrap:anywhere}.combat-picker-preview-heading p{font-size:10px;color:var(--muted);margin:0;overflow-wrap:anywhere}.combat-picker-numbers{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-block:1px solid var(--line);padding:10px 0;margin:0 0 10px;text-align:center;gap:8px}.combat-picker-numbers dt{font-size:9px;color:var(--muted)}.combat-picker-numbers dd{font-size:18px;font-weight:650;margin:0}.combat-picker-formula,.combat-picker-speed{font-size:11px;margin:7px 0}.combat-picker-abilities{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));text-align:center;padding:8px 0;border-bottom:1px solid var(--line);gap:5px}.combat-picker-abilities small{font-size:9px;color:var(--muted);display:block}.combat-picker-abilities b{font-size:14px}.combat-picker-preview h4{font:600 18px Georgia,serif;color:var(--green);border-bottom:1px solid var(--line);margin:22px 0 8px;padding-bottom:5px}.combat-picker-prose{font:13px/1.65 Georgia,serif;overflow-wrap:anywhere}.combat-picker-prose p{margin:8px 0}.combat-picker-prose img{display:none}.combat-picker-preview details{font-size:11px;margin-top:16px}.combat-picker-preview details summary{cursor:pointer;color:var(--muted)}.combat-picker-note{font-size:11px;padding:8px 10px;background:var(--soft);border-left:2px solid var(--gold)}.combat-picker-back{display:none}.combat-picker-picked{flex:1;min-width:0;font-size:11px;color:var(--green);overflow-wrap:anywhere}.combat-picker-pick{white-space:nowrap}
@media(max-width:680px){.modal.wide.combat-picker-dialog{width:calc(100vw - 12px);height:94dvh;max-height:94dvh}.combat-picker-dialog>form>header{padding:12px 14px}.combat-picker-dialog>form>header h2{font-size:19px}.combat-picker-dialog>form>.modal-body{padding:10px 12px 0;gap:8px}.combat-picker-dialog>form>footer{padding:10px 12px;flex-wrap:wrap}.combat-picker-picked:empty{display:none}.combat-picker-picked{flex-basis:100%}.combat-picker-controls{gap:7px}.combat-picker-cr{gap:4px}.combat-picker-cr label{width:63px}.combat-picker-controls input,.combat-picker-controls select{padding:7px;font-size:12px}.combat-picker-tabs{gap:2px}.combat-picker-tabs button{font-size:10px;padding:5px 7px}.combat-picker-layout{display:flex;flex-direction:column;gap:0}.combat-picker-list-pane{flex:1}.combat-picker-preview-pane{display:none;border:0;padding:0 3px 20px}.combat-picker-dialog.has-selection .combat-picker-preview-pane{display:block}.combat-picker-dialog.has-selection .combat-picker-list-pane{display:none}.combat-picker-dialog.has-selection .combat-picker-controls,.combat-picker-dialog.has-selection .combat-picker-tabs,.combat-picker-dialog.has-selection .combat-picker-status{display:none}.combat-picker-back{display:inline-flex;margin-bottom:15px;padding:5px 8px;min-height:30px;font-size:11px}.combat-picker-preview-heading h3{font-size:25px}.combat-picker-pick{font-size:12px;padding:8px 10px}.combat-picker-dialog .form-error{margin:5px 12px}.combat-picker-prose{font-size:14px}}
.combat-picker-feedback{flex:1;min-width:0;font-size:11px;line-height:1.5;overflow-wrap:anywhere}.combat-picker-feedback[hidden]{display:none}.combat-picker-feedback>.combat-picker-selection-summary{display:block;color:var(--ink);font-weight:600}.combat-picker-feedback>.combat-picker-picked{display:block;font-size:10px;color:var(--green);margin-top:2px}.combat-picker-feedback>.combat-picker-picked:empty,.combat-picker-feedback>.combat-picker-selection-summary:empty{display:none}.combat-picker-dialog>form>footer>button{flex-shrink:0}
@media(max-width:680px){.combat-picker-feedback{flex-basis:100%}.combat-picker-feedback>.combat-picker-selection-summary{font-size:11px}.combat-picker-dialog>form>footer{gap:6px}.combat-picker-dialog>form>footer>button{max-width:100%;white-space:normal}}
.combat-picker-feedback>.combat-picker-picked{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.combat-picker-controls{display:grid;grid-template-columns:minmax(180px,1fr) auto;gap:12px}.combat-picker-controls input,.combat-picker-controls select{box-sizing:border-box;width:100%;min-width:0}.combat-picker-filters{display:flex;align-items:end;gap:8px;min-width:0}.combat-picker-cr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;width:150px;min-width:0}.combat-picker-cr label{width:auto;min-width:0}.combat-picker-type-label{width:170px;min-width:0}.combat-picker-filter-error{font-size:11px;color:var(--danger,#a43a32);line-height:1.4}.combat-picker-filter-error[hidden]{display:none}.combat-picker-cr input[aria-invalid=true]{border-color:var(--danger,#a43a32)}
@media(max-width:780px){.combat-picker-controls{grid-template-columns:minmax(0,1fr);gap:6px}.combat-picker-filters{display:grid;grid-template-columns:minmax(0,1fr) minmax(135px,1.15fr);gap:8px}.combat-picker-cr,.combat-picker-type-label{width:100%}.combat-picker-cr label{width:auto}.combat-picker-controls input,.combat-picker-controls select{font-size:12px;padding:7px 8px;min-height:36px}}

.encounter-composer{min-width:0}.encounter-composer-heading,.encounter-party-heading{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.encounter-composer-heading{margin-bottom:12px}.encounter-composer-heading h3,.encounter-party-heading h4{font-size:14px;margin:0}.encounter-composer-heading button{font-size:12px;min-height:32px;padding:7px 12px}.encounter-slot-list{display:flex;flex-direction:column;gap:7px}.encounter-slot.slot{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 12px;background:var(--paper);border:1px solid var(--line);border-radius:7px;min-width:0}.encounter-slot-main{flex:1;min-width:170px}.encounter-slot-main>b,.encounter-slot-main>small{display:block;overflow-wrap:anywhere}.encounter-slot-main>b{font-size:13px}.encounter-slot-main>small{font-size:10px;line-height:1.6;color:var(--muted);margin-top:3px}.encounter-slot-controls{display:flex;gap:7px;align-items:center;flex-wrap:wrap}.encounter-slot-side{margin:0}.encounter-slot-side select{font-size:11px;min-height:30px;padding:5px 6px;width:110px}.encounter-slot-quantity{display:flex;gap:0;align-items:center}.encounter-slot-quantity button{min-height:30px;width:28px;padding:3px;border-radius:4px;font-size:14px}.encounter-slot-quantity input{font-size:12px;width:43px;min-height:30px;text-align:center;padding:4px 2px;border-color:transparent;background:transparent;-moz-appearance:textfield}.encounter-slot-quantity input::-webkit-inner-spin-button,.encounter-slot-quantity input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.encounter-slot-controls>.icon{min-height:28px;width:28px;padding:3px;border:0;background:transparent;color:var(--muted)}.encounter-slot-note{flex-basis:100%;font-size:10px;color:var(--muted);margin:0}.encounter-slot-note>summary{cursor:pointer;display:inline-block}.encounter-slot-note[open]>summary{margin-bottom:5px}.encounter-slot-note>input{font-size:12px;padding:6px;width:min(100%,450px)}.encounter-composition-empty{font-size:12px;line-height:1.7;color:var(--muted);margin:0;padding:16px;border:1px dashed var(--line);border-radius:7px;max-width:680px}.encounter-composer-error{font-size:12px;color:var(--danger,#a33);margin:8px 0}.encounter-composer-error:empty{display:none}.encounter-party-setup{margin-top:16px;border-top:1px solid var(--line);padding-top:13px}.encounter-party-heading{margin-bottom:10px}.encounter-edition-label{display:flex!important;flex-direction:row!important;align-items:center;gap:6px!important;font-size:10px!important;margin:0!important}.encounter-edition-label select{width:105px;min-height:28px;padding:4px 6px;font-size:11px}.encounter-party-common,.encounter-party-group{display:flex;align-items:end;gap:10px;flex-wrap:wrap}.encounter-party-common label,.encounter-party-group label{font-size:10px;gap:4px;margin:0}.encounter-party-common input[type=number],.encounter-party-group input{width:85px;padding:6px 8px;font-size:12px;min-height:30px}.encounter-party-common .check{align-items:center;min-height:30px;gap:5px;font-size:11px}.encounter-party-common input:disabled{opacity:.55}.encounter-party-mixed{margin-top:8px}.encounter-party-mixed[hidden]{display:none}.encounter-party-groups{display:flex;flex-direction:column;gap:7px}.encounter-party-group>.icon{padding:4px;width:28px;min-height:28px;border:0;background:transparent}.encounter-party-add{margin-top:7px;min-height:26px;padding:4px 7px;font-size:11px;border:0;background:transparent}.encounter-estimate{margin-top:12px}.encounter-danger{background:var(--soft);border-radius:7px;padding:11px 13px;font-size:12px}.encounter-danger-line{display:flex;gap:8px 16px;align-items:center;flex-wrap:wrap}.encounter-danger-line>span{font-size:11px;color:var(--muted)}.encounter-rating{font-size:14px;color:var(--green)}.encounter-rating[data-rating=hard],.encounter-rating[data-rating=high]{color:#a15d18}.encounter-rating[data-rating=deadly],.encounter-rating[data-rating=over-budget]{color:var(--danger,#a33)}.encounter-party-caption{font-size:10px;color:var(--muted);margin:6px 0 0}.encounter-budget-details{margin-top:8px;font-size:10px;color:var(--muted)}.encounter-budget-details>summary{cursor:pointer;display:inline-block}.encounter-thresholds{display:flex;flex-wrap:wrap;gap:9px 24px;margin-top:8px}.encounter-thresholds span{min-width:50px}.encounter-thresholds small,.encounter-thresholds b{display:block}.encounter-thresholds b{font-size:12px;margin-top:3px;color:var(--ink)}.encounter-budget-details .hint{font-size:10px;line-height:1.5;margin:7px 0 0}.encounter-warnings{font-size:11px;line-height:1.6;color:var(--muted);padding-left:17px;margin:8px 0 0}.encounter-summary{margin:12px 0}.encounter-composer .sr-only{position:absolute;clip:rect(0,0,0,0);width:1px;height:1px;margin:-1px;overflow:hidden;white-space:nowrap;padding:0;border:0}
@media(max-width:680px){.encounter-composer-heading{gap:8px}.encounter-composer-heading h3{flex-basis:100%}.encounter-slot.slot{padding:9px 10px;gap:7px}.encounter-slot-main{flex-basis:100%;min-width:0}.encounter-slot-controls{width:100%;justify-content:flex-start}.encounter-slot-controls>.slot-remove{margin-left:auto}.encounter-slot-main>small{font-size:10px}.encounter-party-common{gap:8px}.encounter-party-common .encounter-party-mixed-toggle{flex-basis:100%}.encounter-danger-line{gap:6px 12px}.encounter-danger{padding:10px}.encounter-thresholds{gap:8px 17px}}
.encounter-rule-attribution{margin-top:8px;font-size:10px;overflow-wrap:anywhere}.encounter-rule-attribution>summary{cursor:pointer;display:inline-block}.encounter-rule-attribution>p{font-size:10px;line-height:1.5;margin:7px 0}
.encounter-slot-note>summary{max-width:100%;overflow-wrap:anywhere}
.encounter-composer .encounter-remember-party{font-size:10px;line-height:1.5;margin:9px 0 0;gap:6px;align-items:center}

/* Point creation groups these controls inside a section, outside the modal body's gap. */
.modal-body #new-point-fields{display:flex;flex-direction:column;gap:14px;min-width:0}

.inspector-encounter{margin:16px 0;min-width:0}.inspector-encounter>.section-heading{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:8px}.inspector-encounter>.section-heading h3{margin:0;font-size:14px}.inspector-encounter>.section-heading button{font-size:11px;min-height:30px;padding:5px 9px}.inspector-encounter .reference-links{margin-top:8px}

.encounter-roster{min-width:0;max-width:900px;margin:16px 0;container-type:inline-size}
.encounter-roster-heading{display:flex;align-items:center;gap:8px 12px;flex-wrap:wrap;margin-bottom:9px}
.encounter-roster-heading>h3{margin:0;font-size:14px;line-height:1.5}
.encounter-roster-heading>h3>span{color:var(--muted);font-weight:400}
.encounter-roster-heading>button{min-height:28px;padding:4px 7px;font-size:11px;background:transparent;border-color:transparent;white-space:normal}
.encounter-roster-list{display:flex;flex-direction:column;gap:7px;min-width:0}
.encounter-roster-row,.encounter-roster-missing{margin:0;border:1px solid var(--line);border-radius:7px;background:var(--paper);min-width:0;overflow:hidden}
.encounter-roster summary.encounter-roster-summary{display:grid;grid-template-columns:48px minmax(0,1fr) 12px 28px;gap:9px;align-items:center;margin:0;padding:9px 10px;list-style:none;cursor:pointer;color:var(--ink);font-weight:400}
.encounter-roster-summary::-webkit-details-marker{display:none}
.encounter-roster-summary:hover{background:var(--soft)}
.encounter-roster-summary:focus-visible{outline:2px solid var(--green);outline-offset:-2px}
.encounter-roster-portrait{position:relative;display:grid;place-items:center;width:48px;height:48px;border-radius:6px;overflow:hidden;background:var(--soft);color:var(--muted);font-size:14px;font-weight:600}
.encounter-roster-portrait>img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover}
.encounter-roster-portrait>img[hidden]{display:none}
.encounter-roster button.encounter-roster-picture{padding:0;min-height:0;border:1px solid transparent;cursor:zoom-in;display:grid;gap:0}
.encounter-roster button.encounter-roster-picture:hover{border-color:var(--green);background:var(--soft)}
.encounter-roster button.encounter-roster-picture:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.encounter-roster-identity{min-width:0}
.encounter-roster-name{display:flex;align-items:baseline;gap:5px 9px;flex-wrap:wrap;font-size:13px;line-height:1.5;overflow-wrap:anywhere}
.encounter-roster-name>b{min-width:0;font-weight:600}
.encounter-roster-count{flex:0 0 auto;font-size:12px;font-weight:600;color:var(--green);white-space:nowrap}
.encounter-roster-identity>small{display:block;margin-top:3px;font-size:10px;line-height:1.6;color:var(--muted);overflow-wrap:anywhere}
.encounter-roster-chevron{color:var(--muted);font-size:12px;transition:transform .12s}
.encounter-roster-row[open]>.encounter-roster-summary>.encounter-roster-chevron{transform:rotate(90deg)}
.encounter-roster a.encounter-roster-new-tab{display:grid;place-items:center;align-self:center;width:28px;height:28px;border:1px solid var(--line);border-radius:5px;background:var(--paper);font-size:16px;line-height:1;text-decoration:none;color:var(--green)}
.encounter-roster a.encounter-roster-new-tab:hover{border-color:var(--green)}
.encounter-roster-profile{padding:2px 14px 16px;border-top:1px solid var(--line);min-width:0;overflow-wrap:anywhere}
.encounter-roster-profile .bestiary-stat-basics{gap:8px 16px;margin-top:9px;padding-top:9px}
.encounter-roster-profile .bestiary-stat-section h3{margin-top:18px;font-size:17px}
.encounter-roster-profile .bestiary-stat-section .prose,.encounter-roster-profile .bestiary-disclosure .prose{font-size:13px;line-height:1.7}
.encounter-roster-profile img{max-width:100%;height:auto}
.encounter-roster-profile .prose pre{white-space:pre-wrap;overflow-wrap:anywhere}
.encounter-roster-missing{display:grid;grid-template-columns:48px minmax(0,1fr);align-items:center;gap:5px 9px;padding:9px 10px}
.encounter-roster-unavailable{grid-column:2;font-size:10px;color:var(--muted)}
@container(max-width:330px){.encounter-roster summary.encounter-roster-summary{grid-template-columns:40px minmax(0,1fr) 10px 26px;gap:6px;padding:8px}.encounter-roster-portrait{width:40px;height:40px}.encounter-roster a.encounter-roster-new-tab{width:26px;height:26px}.encounter-roster-profile{padding-left:10px;padding-right:10px}.encounter-roster-profile .bestiary-abilities{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.encounter-roster-missing{grid-template-columns:40px minmax(0,1fr)}}

#inspector-body .marker-appearance-action.is-compact,
#inspector-body .place-create-action>summary{display:inline-flex;align-items:center;justify-content:center;width:35px;min-width:35px;height:35px;min-height:35px;padding:7px;border:1px solid var(--line);border-radius:6px;background:var(--paper);color:var(--ink);cursor:pointer;list-style:none}
#inspector-body .marker-appearance-action.is-compact:hover,
#inspector-body .place-create-action>summary:hover{background:var(--soft);border-color:var(--green)}
#inspector-body .place-create-action>summary{font-size:22px;font-weight:500;line-height:1}
#inspector-body .place-create-action>summary::-webkit-details-marker{display:none}
#inspector-body .place-create-action{margin:0;flex:0 0 auto;position:relative}
#inspector-body .place-create-action:not([open])>.npc-action-menu-body{display:none}
#inspector-body .place-create-action .npc-action-menu-body button{width:100%;justify-content:flex-start;text-align:left;white-space:normal;overflow-wrap:anywhere}
#inspector-body .gateway-actions{align-items:center;justify-content:flex-start;gap:8px}
@media(max-width:680px){#inspector-body .marker-appearance-action.is-compact,#inspector-body .place-create-action>summary{width:44px;min-width:44px;height:44px;min-height:44px;padding:10px}}
.map-lifecycle-dialog{max-width:min(620px,calc(100vw - 28px))}
.map-lifecycle-dialog .modal-body{min-width:0;overflow-wrap:anywhere}
.map-deletion-counts{font-weight:600;color:var(--green)}
.map-deletion-blockers{padding:12px;border-left:3px solid var(--gold);background:var(--soft);margin:12px 0}
.map-deletion-blockers details{margin:6px 0}
.archived-map-row{display:flex;align-items:center;gap:8px;padding:10px 0;border-bottom:1px solid var(--line);min-width:0}
.archived-map-row>div{flex:1;min-width:0;display:grid;gap:3px}
.archived-map-row small{color:var(--muted)}
.archived-map-row button{flex:none}
#archived-map-pages{justify-content:center;margin-top:12px}
@media(max-width:420px){.archived-map-row{flex-wrap:wrap}.archived-map-row>div{flex-basis:100%}}

.lss-effects-dialog{width:min(960px,calc(100vw - 32px));max-width:calc(100vw - 32px)}
.lss-effects-dialog .modal-body{min-width:0}.lss-effects-intro{margin:0 0 14px}
.lss-effects-layout{display:grid;grid-template-columns:230px minmax(0,1fr);gap:18px;align-items:start;min-width:0}
.lss-effects-sidebar,.lss-effect-detail,.lss-effect-change{min-width:0}.lss-effects-sidebar>[data-add-lss-effect]{width:100%}
.lss-effects-list{display:flex;flex-direction:column;gap:7px;margin-top:12px;max-height:56vh;overflow:auto;padding:1px}
.lss-effect-list-row{display:flex;align-items:center;gap:7px;border:1px solid var(--line);border-radius:7px;padding:7px;background:var(--paper)}
.lss-effect-list-row.is-selected{border-color:var(--green);background:var(--soft)}.lss-effect-list-row>.check{flex:0 0 auto;margin:0}
.lss-effect-list-row>[data-select-effect]{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;text-align:left;border:0;background:transparent;padding:3px;gap:3px}
.lss-effect-list-row b{overflow-wrap:anywhere}.lss-effect-list-row small{font-weight:400;color:var(--muted)}
.lss-effect-detail-heading{display:flex;align-items:flex-end;gap:8px}.lss-effect-detail-heading>label{flex:1;min-width:0}.lss-effect-enabled{margin:13px 0}
.lss-effect-changes{display:flex;flex-direction:column;gap:10px}.lss-effect-change{display:grid;grid-template-columns:minmax(0,1fr) minmax(105px,.7fr) 35px;gap:8px;align-items:end;border-bottom:1px solid var(--line);padding-bottom:10px}
.lss-effect-target{text-align:left;justify-content:space-between;overflow-wrap:anywhere;min-height:39px}.lss-effect-expression-label{min-width:0}.lss-effect-expression-label input{min-width:0}
.lss-effect-target-picker{grid-column:1/-1;border:1px solid var(--line);padding:10px;border-radius:7px;background:var(--paper);min-width:0}
.lss-effect-target-picker>input{width:100%}.lss-effect-target-results{display:grid;grid-template-columns:1fr 1fr;gap:5px;margin-top:8px;min-width:0}
.lss-effect-target-results>button{justify-content:flex-start;text-align:left;min-width:0;overflow-wrap:anywhere;font-size:11px;padding:7px}
.lss-effect-target-pagination{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:8px}.lss-effect-target-pagination>button{min-height:29px;padding:3px 10px}
.lss-effect-detail>[data-add-effect-change]{margin-top:10px}.lss-effect-preview{margin-top:18px;border-top:1px solid var(--line);padding-top:12px}
.lss-effect-preview-title{font-weight:700;margin-bottom:8px}.lss-effect-preview-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:6px 0;border-bottom:1px solid var(--line);font-size:12px}
.lss-effect-preview-row>span{min-width:0;overflow-wrap:anywhere}.lss-effect-preview-row>b{max-width:50%;overflow-wrap:anywhere;text-align:right}.lss-effect-preview-row small{display:block;color:var(--muted);font-size:10px}.lss-effect-preview-row.is-bypassed{color:var(--muted)}
.lss-effects-empty{padding:24px 8px;color:var(--muted)}.lss-effects-error,.lss-effects-warning{margin:8px 0 0;font-size:12px;overflow-wrap:anywhere}.lss-effects-error{color:var(--red)}.lss-effects-warning{color:#866426}
@media(max-width:650px){.lss-effects-layout{grid-template-columns:1fr;gap:14px}.lss-effects-list{max-height:180px}.lss-effect-target-results{grid-template-columns:1fr}.lss-effect-change{grid-template-columns:minmax(0,1fr) 35px}.lss-effect-target{grid-column:1/-1}.lss-effect-expression-label{grid-column:1}.lss-effect-preview-row>b{max-width:45%}}

.lss-workflow-bar {display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:6px 0;margin-bottom:8px;}
.lss-workflow-modes {display:flex;gap:3px;flex-wrap:wrap;}
.lss-workflow-modes [aria-pressed="true"] {background:var(--accent,#315e52);color:var(--paper,#fffdf5);}
.lss-workflow-status {font-size:12px;color:var(--muted,#52675c);flex:1 1 150px;}
.lss-workflow-hint {display:block;font-size:12px;color:var(--muted,#52675c);margin:0 0 10px;}
.lss-sheet-container [readonly] {cursor:default;}
.lss-sheet-container {container-name:lss-sheet;container-type:inline-size;}
.lss-sheet-container .lss-header,.lss-sheet-container .lss-header-name-box,.lss-sheet-container .lss-header-grid,.lss-sheet-container .lss-meta-box {min-width:0;}
@container lss-sheet (max-width:1000px) {
    .lss-sheet-container .lss-header {grid-template-columns:minmax(0,1fr);}
    .lss-sheet-container .lss-header-grid {grid-template-columns:repeat(3,minmax(0,1fr));}
    .lss-sheet-container .lss-header-name-box {border-right:0;padding-right:0;}
    .lss-sheet-container .lss-3col-sheet-grid {grid-template-columns:repeat(2,minmax(0,1fr));}
    .lss-sheet-container .lss-col-3 {grid-column:1 / -1;}
}
@container lss-sheet (max-width:680px) {
    .lss-sheet-container .lss-3col-sheet-grid {grid-template-columns:minmax(0,1fr);}
    .lss-sheet-container .lss-col-3 {grid-column:auto;}
}
.lss-sheet-container .library-sheet-options:not([open])>.library-sheet-options-menu {display:none;}
.lss-workflow-bar [hidden],.lss-sheet-container #lss-save-sheet-btn[hidden] {display:none!important;}
@media(max-width:600px) {.lss-workflow-bar {gap:6px;}.lss-workflow-status {flex-basis:100%;}.lss-workflow-modes button {min-height:36px;}}
@media(max-width:680px) {
    .lss-sheet-container .lss-header,.lss-sheet-container .lss-header-name-box,.lss-sheet-container .lss-header-grid,.lss-sheet-container .lss-meta-box {min-width:0;}
    .lss-sheet-container .lss-header-grid {grid-template-columns:repeat(2,minmax(0,1fr));}
    .statblock-drawer-header {position:relative;flex-wrap:wrap;gap:8px;padding:14px;}
    .statblock-drawer-header>div:first-child {flex:1 1 100%;min-width:0;padding-right:40px;}
    .statblock-drawer-header h2 {font-size:20px;overflow-wrap:anywhere;}
    .statblock-drawer-header .drawer-header-actions {flex-wrap:wrap;gap:6px;}
    .statblock-drawer-header .drawer-close-btn {position:absolute;top:14px;right:14px;}
    .statblock-drawer-body {padding:12px;min-width:0;}
}

/* Roll affordances keep the sheet's existing labels and numeric inputs in place. */
.lss-sheet-container button.lss-roll-target{appearance:none;min-height:0;height:auto;min-width:0;margin:0;padding:0;border:0;border-radius:3px;box-shadow:none;background:transparent;color:inherit;font-family:inherit;line-height:inherit;text-align:inherit;cursor:pointer;}
.lss-sheet-container button.lss-roll-target:hover{background:color-mix(in srgb,currentColor 8%,transparent);text-decoration:underline;text-underline-offset:3px;}
.lss-sheet-container button.lss-roll-target:focus-visible,.lss-sheet-container button.lss-attack-roll:focus-visible{outline:2px solid #6f72ad;outline-offset:2px;}
.lss-sheet-container .lss-roll-cell{position:relative;padding-inline-end:26px;}
.lss-sheet-container .lss-attacks-table :is(th.col-atk-bonus,td.lss-atk-cell-bonus){width:88px;min-width:88px;}
.lss-sheet-container .lss-attacks-table :is(th.col-atk-name,td.lss-atk-cell-name){min-width:64px;}
.lss-sheet-container .lss-attack-row .lss-calculated-field{min-width:0;}
.lss-sheet-container .lss-attack-row .lss-calculated-field input{padding-inline-end:24px!important;}
.lss-sheet-container button.lss-attack-roll{position:absolute;inset-inline-end:1px;top:50%;transform:translateY(-50%);min-width:22px;width:22px;min-height:25px;height:25px;padding:0;margin:0;border:0;border-radius:4px;box-shadow:none;background:transparent;color:var(--lss-text,#243b62);font:20px/1 system-ui,sans-serif;cursor:pointer;opacity:.72;}
.lss-sheet-container button.lss-attack-roll:hover{opacity:1;background:color-mix(in srgb,currentColor 9%,transparent);}
.lss-sheet-container.theme-dark button.lss-attack-roll{color:#dce5ff;}
.lss-roll-panel{--roll-bg:#fffefb;--roll-text:#253750;--roll-border:#cbd2dc;--roll-muted:#647084;position:fixed;z-index:1100;width:min(360px,calc(100vw - 16px));max-width:calc(100vw - 16px);max-height:min(520px,calc(100dvh - 16px));overflow:auto;overscroll-behavior:contain;box-sizing:border-box;padding:12px;border:1px solid var(--roll-border);border-radius:10px;background:var(--roll-bg);color:var(--roll-text);box-shadow:0 10px 30px #17233e30;font:13px/1.4 system-ui,sans-serif;text-align:left;}
.lss-roll-panel[hidden],.lss-roll-panel [hidden]{display:none!important;}
.lss-roll-panel.is-dark{--roll-bg:#202839;--roll-text:#edf1ff;--roll-border:#535f79;--roll-muted:#b1bdd4;box-shadow:0 10px 30px #0006;}
.lss-roll-panel .lss-roll-header{display:flex;align-items:flex-start;gap:8px;margin:0 0 7px;padding:0;border:0;background:transparent;}
.lss-roll-header>strong{flex:1;min-width:0;padding-top:3px;overflow-wrap:anywhere;font-size:14px;}
.lss-roll-panel button{box-sizing:border-box;min-width:0;min-height:30px;padding:4px 7px;margin:0;border:1px solid var(--roll-border);border-radius:5px;background:transparent;color:inherit;box-shadow:none;font:inherit;line-height:1.2;cursor:pointer;}
.lss-roll-panel button:hover{background:color-mix(in srgb,var(--roll-text) 9%,transparent);}
.lss-roll-panel button:focus-visible{outline:2px solid #8585d9;outline-offset:2px;}
.lss-roll-panel .lss-roll-close{flex:0 0 28px;min-height:28px;padding:0;font-size:21px;line-height:1;border-color:transparent;}
.lss-roll-current{display:grid;grid-template-columns:auto 1fr;gap:3px 9px;align-items:center;}
.lss-roll-total{grid-row:1/3;font-size:32px;font-weight:750;line-height:1.15;}
.lss-roll-natural{font-size:12px;font-weight:650;color:#805c1f;}
.is-dark .lss-roll-natural{color:#f6d58a;}
.lss-roll-formula{grid-column:2;font-size:12px;overflow-wrap:anywhere;white-space:normal;}
.lss-roll-breakdown{grid-column:1/-1;margin-top:4px;color:var(--roll-muted);font-size:12px;overflow-wrap:anywhere;}
.lss-roll-panel code,.lss-roll-panel pre{font-family:ui-monospace,Consolas,monospace;color:inherit;background:transparent;}
.lss-roll-panel pre{white-space:pre-wrap;overflow-wrap:anywhere;font-size:11px;margin:7px 0 0;}
.lss-roll-error{margin:4px 0 9px;color:#a13e32;font-size:13px;overflow-wrap:anywhere;}
.is-dark .lss-roll-error{color:#ffb8ad;}
.lss-roll-actions{display:flex;flex-wrap:wrap;gap:5px;margin-top:10px;}
.lss-roll-modes{display:flex;flex:1 1 100%;flex-wrap:wrap;gap:4px;}
.lss-roll-modes>button{flex:1 1 auto;font-size:12px;}
.lss-roll-modes>button[aria-pressed=true]{background:color-mix(in srgb,#8177c3 18%,var(--roll-bg));border-color:#8a80bb;font-weight:650;}
.lss-roll-panel .lss-roll-repeat{margin-inline-start:auto;font-size:12px;}
.lss-roll-help{display:block;margin-top:6px;color:var(--roll-muted);font-size:10px;}
.lss-roll-history,.lss-roll-all-dice{margin-top:9px;padding-top:7px;border-top:1px solid var(--roll-border);}
.lss-roll-panel summary{cursor:pointer;font-size:11px;color:var(--roll-muted);}
.lss-roll-history ol{list-style:none;margin:6px 0 0;padding:0;}
.lss-roll-history li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1px 8px;padding:5px 0;border-top:1px solid color-mix(in srgb,var(--roll-border) 50%,transparent);font-size:11px;}
.lss-roll-history li:first-child{border-top:0;}
.lss-roll-history-label{overflow-wrap:anywhere;}
.lss-roll-history li>code{grid-column:1/-1;color:var(--roll-muted);overflow-wrap:anywhere;white-space:normal;font-size:10px;}
@media(max-width:480px){.lss-roll-panel{padding:10px;max-height:calc(100dvh - 16px);}.lss-roll-panel button{min-height:36px;}.lss-roll-panel .lss-roll-close{min-height:30px;}.lss-sheet-container button.lss-attack-roll{min-height:28px;}}
@container (max-width:480px){
    .lss-sheet-container .lss-attacks-table,.lss-sheet-container .lss-attacks-table tbody{display:block;}
    .lss-sheet-container .lss-attacks-table thead{display:none;}
    .lss-sheet-container .lss-attacks-table .lss-attack-row{display:grid;grid-template-columns:minmax(78px,.7fr) minmax(0,1.5fr) 24px;gap:4px;}
    .lss-sheet-container .lss-attacks-table .lss-attack-row>td{width:auto;min-width:0;}
    .lss-sheet-container .lss-attacks-table .lss-atk-cell-name{grid-column:1/-1;border-bottom:0;padding-bottom:0;}
    .lss-sheet-container .lss-attacks-table .lss-atk-cell-bonus{grid-column:1;}
    .lss-sheet-container .lss-attacks-table .lss-atk-cell-dmg{grid-column:2;}
    .lss-sheet-container .lss-attacks-table .lss-atk-cell-actions{grid-column:3;}
}

.application-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex:0 1 auto;margin-inline-start:auto;min-width:0;}
.application-actions:empty{display:none;}.application-actions .campaign-zip-action{white-space:nowrap;font-size:12px;min-height:34px;}
.server-account-menu{position:relative;font:13px/1.4 system-ui,sans-serif;margin:0;max-width:200px;}
.server-account-menu>summary{display:flex;align-items:center;gap:6px;box-sizing:border-box;min-height:34px;cursor:pointer;white-space:nowrap;list-style:none;border:1px solid var(--line,#ccd4c7);border-radius:6px;padding:7px 10px;}
.server-account-menu>summary::-webkit-details-marker{display:none;}.server-account-name{min-width:0;overflow:hidden;text-overflow:ellipsis;}.server-account-role-badge{flex:none;font-size:10px;font-weight:650;line-height:1.4;padding:1px 5px;border-radius:4px;color:var(--muted,#627265);background:#617b6c16;}.server-account-role-badge[data-role=admin]{color:#76551b;background:#b3893621;}.server-account-role{display:grid;gap:3px;padding:5px 4px 8px;border-bottom:1px solid var(--line,#ccd4c7);}.server-account-role strong{font-size:12px;}.server-account-role small{padding:0;line-height:1.45;}
.server-account-content{position:absolute;z-index:1300;right:0;top:calc(100% + 6px);display:grid;gap:6px;min-width:220px;max-width:min(300px,calc(100vw - 24px));padding:10px;background:var(--paper,#fffdf7);border:1px solid var(--line,#ccd4c7);box-shadow:0 8px 25px #0002;border-radius:7px;}
.server-account-content small{overflow-wrap:anywhere;padding:2px 4px;color:var(--muted,#627265);}.server-account-content button{text-align:left;}
.server-account-help{display:block;padding:5px 4px;font-size:12px;}
.server-auth{box-sizing:border-box;width:min(420px,100%);margin:8vh auto;padding:26px;background:var(--paper,#fffdf7);border:1px solid var(--line,#ccd4c7);border-radius:10px;color:var(--ink,#203a32);}
.server-auth h1{margin:8px 0 10px;font-size:27px;}.server-auth p{font-size:14px;line-height:1.5;}.server-auth-form{display:grid;gap:14px;margin-top:22px;}.server-auth-form label{display:grid;gap:5px;}.server-auth-form input{width:100%;box-sizing:border-box;min-height:40px;}.server-auth-form button{min-height:40px;}.server-auth-error{margin:0;color:#a13e32;}.server-auth-error:empty{display:none;}.server-auth-notice{padding:9px;border-inline-start:3px solid #ae8c44;background:#bca85d12;}
.server-auth-dialog{width:min(460px,calc(100vw - 20px));max-height:calc(100dvh - 20px);padding:0;border:0;border-radius:10px;}.server-auth-dialog::backdrop{background:#17231b;}.server-auth-dialog .server-auth{margin:0;border:0;}
.server-invitation-role{display:grid;gap:5px;}.server-invitation-role select{width:100%;box-sizing:border-box;min-height:38px;}.server-invitation-result{display:grid;gap:8px;margin-top:14px;}.server-invitation-result[hidden]{display:none;}.server-invitation-result input{width:100%;box-sizing:border-box;}.server-invitation-created-role{margin:0;font-weight:650;}
.bestiary-scope-badge{display:inline-flex;align-items:center;margin-inline-end:5px;padding:2px 6px;border:1px solid var(--line,#ccd4c7);border-radius:4px;font:11px/1.4 system-ui,sans-serif;}.bestiary-catalog-scope{margin:5px 0 9px;}.bestiary-catalog-scope select{min-height:34px;}
:is(.app-top,.landing-top) .server-account-role-badge{color:#d5dfd0;background:#ffffff14;}
.night .server-account-role-badge[data-role=admin],:is(.app-top,.landing-top) .server-account-role-badge[data-role=admin]{color:#f0d493;background:#b389362b;}
@media(max-width:700px){.application-actions{gap:4px;max-width:100%;}.application-actions .campaign-zip-action{font-size:11px;white-space:normal;max-width:135px;line-height:1.2;}.app-top .top-right #export{max-width:150px;white-space:normal;font-size:11px;line-height:1.2;}.app-top .top-right>.application-actions{margin-inline-start:0;}.server-account-menu{max-width:160px;font-size:12px;}.server-account-menu>summary{padding:6px 8px;}.server-account-role-badge{font-size:9px;}.server-auth{margin:20px auto;padding:20px;}.reference-top,.landing-top,.bestiary-top{flex-wrap:wrap;gap:8px;}.landing-top[data-storage-mode=server]>.version{display:none;}.server-account-content{min-width:200px;}}