:root{
  --bg:#15120d; --bg-2:#1b1711; --panel:#221d16; --panel-2:#2a241b;
  --line:#3a3120; --line-soft:#2e271b;
  --bone:#ece3ce; --bone-dim:#b8ae97; --muted:#837a66;
  --ember:#f0703a; --ember-2:#ffb27a; --ember-glow:rgba(240,112,58,.30);
  --accent:#ff8a62; --accent-strong:#f66f47; --active-text:#170b06;
  --steel:#74bccd; --good:#5fbe78; --warning:#c58b19; --bad:#ff7272; --gold:#d7b45a;
  --header-shadow:#000000; --panel-shadow:#000000; --button-shadow:#000000;
  --display:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --ui:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:"SF Mono","JetBrains Mono",Menlo,Consolas,"Liberation Mono",monospace;
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  font-family:var(--ui); background:var(--bg); color:var(--bone);
  background-image:radial-gradient(120% 80% at 50% -10%, var(--bg-2) 0%, var(--bg) 55%);
  line-height:1.5; min-height:100vh;
}
.wrap{max-width:1320px;margin:0 auto;padding:28px 20px 64px}
.top{display:flex;justify-content:space-between;gap:18px;align-items:flex-end;margin-bottom:24px;flex-wrap:wrap}
h1,h2,h3{font-family:var(--display);font-weight:600}
h1{font-size:clamp(32px,5vw,50px);margin:0;line-height:1}
h1 span{color:var(--ember)}
.top p,.muted{color:var(--muted)}
.pick select,input,textarea,select{
  color:var(--bone);background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:9px;
  font:inherit;
}
textarea{width:100%;resize:vertical}
.grid{display:grid;grid-template-columns:1.05fr .95fr;gap:22px;align-items:start}
@media(max-width:980px){.grid{grid-template-columns:1fr}}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:20px}
.flash{background:rgba(116,188,205,.15);border:1px solid var(--steel);padding:12px;border-radius:10px;margin-bottom:16px}
label{display:flex;flex-direction:column;gap:6px;color:var(--bone-dim);font-size:13px;margin-bottom:12px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px}
.stats label{margin:0}
.derived{display:flex;flex-wrap:wrap;gap:10px;margin:16px 0;padding:12px;background:var(--bg-2);border:1px solid var(--line-soft);border-radius:10px}
.derived b{color:var(--gold)}
.track{display:grid;grid-template-columns:80px 1fr 55px;gap:10px;align-items:center;margin:8px 0}
.boxes{display:flex;gap:5px;flex-wrap:wrap}
.box{display:inline-block;width:18px;height:18px;border:1px solid var(--line);border-radius:4px;background:var(--bg)}
.box.filled{background:var(--ember);box-shadow:0 0 10px var(--ember-glow)}
.four-editors{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}
.editor-row{border:1px solid var(--line-soft);background:var(--bg-2);border-radius:10px;padding:8px;margin-bottom:8px}
.editor-row input{width:100%;margin-bottom:6px}
.editor-actions{display:flex;gap:8px}
button{
  border:1px solid var(--line);background:var(--panel-2);color:var(--bone);border-radius:8px;padding:9px 12px;cursor:pointer;
}
button:hover{border-color:var(--ember)}
.primary,.roll-btn{
  background:linear-gradient(180deg,var(--ember-2),var(--ember));color:var(--active-text);font-weight:700;border:0;
}
.danger{border-color:var(--bad);color:var(--bad)}
.good,.success,.status-good{color:var(--good)}
.warning,.status-warning{color:var(--warning)}
.bad,.error,.status-bad{color:var(--bad)}
.actions{display:flex;gap:10px;margin-top:18px}
.quick-buttons{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px;margin-bottom:18px}
.quick-buttons form{display:flex;gap:6px}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin-bottom:20px}
.cards>div{background:var(--bg-2);border:1px solid var(--line-soft);border-radius:10px;padding:12px}
.mini-list{padding-left:18px;margin:0}
.mini-list li{margin-bottom:8px}
.mini-list small{color:var(--gold)}
.mini-list em{display:block;color:var(--muted);font-size:12px}
.roller{background:var(--bg-2);border:1px solid var(--line-soft);border-radius:12px;padding:14px;margin-bottom:16px}
.dice-shortcuts{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}
.roll-btn{width:100%;font-family:var(--display);font-size:20px}
.history{display:flex;flex-direction:column;gap:10px}
.roll-card{background:var(--bg-2);border:1px solid var(--line-soft);border-radius:10px;padding:12px}
.roll-card small{color:var(--muted)}
.roll-line{margin:6px 0;color:var(--bone-dim)}
.roll-line b{color:var(--gold)}
.bad{color:var(--bad);font-weight:700}
.dice{display:flex;gap:6px;flex-wrap:wrap}
.die{font-family:var(--mono);background:var(--panel-2);border:1px solid var(--line);border-radius:7px;padding:5px 8px}

.stat-roller{
  margin:14px 0 16px;
  padding:12px;
  background:var(--bg-2);
  border:1px solid var(--line-soft);
  border-radius:10px;
}
.stat-roller strong{display:block;color:var(--gold)}
.stat-roller span{color:var(--muted);font-size:12px}
.stat-roll-buttons{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0}
.creation-roll-log{display:flex;gap:10px;flex-wrap:wrap;font-family:var(--mono);font-size:12px}
.creation-roll-log span{
  border:1px solid var(--line);
  background:var(--panel-2);
  border-radius:7px;
  padding:5px 8px;
}

/* ===== v5: equipment slots + statuses + encumbrance ===== */
.subpanel{background:var(--bg-2);border:1px solid var(--line);border-radius:14px;padding:18px;margin:20px 0}
.subpanel h2{margin:0 0 12px;font-size:22px}
.enc-line{margin-top:-6px}
.enc-line .bad{color:var(--bad)}
button.tiny{padding:3px 8px;font-size:12px;line-height:1}
.inline{display:inline}
small{color:var(--muted)}

.equip-slot{border:1px solid var(--line-soft);background:var(--panel);border-radius:10px;padding:10px 12px;margin-bottom:10px}
.equip-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.equip-head strong{min-width:92px;color:var(--gold);font-family:var(--display)}
.equip-head input{flex:1;min-width:140px}
.equip-fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:8px;margin-top:10px}
.equip-field{margin:0;gap:3px}
.equip-field span{font-size:10px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.equip-field input,.equip-field select{padding:6px 8px}

.status-list{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.status-chip{display:flex;align-items:center;gap:7px;border:1px solid var(--line);background:var(--panel);border-radius:999px;padding:5px 6px 5px 12px}
.status-chip b{font-size:13px}
.status-chip em{color:var(--bone-dim);font-style:italic;font-size:12px}
.status-chip.lever-dot{border-color:#7a3a2a}
.status-chip.lever-dot b{color:var(--ember-2)}
.status-chip.lever-dice{border-color:var(--gold)}
.status-chip.lever-dice b{color:var(--gold)}
.status-chip.lever-control{border-color:var(--steel)}
.status-chip.lever-control b{color:var(--steel)}
.status-chip form{margin:0}
.add-status{display:flex;flex-wrap:wrap;gap:8px;align-items:center;border-top:1px solid var(--line-soft);padding-top:12px}
.add-status select,.add-status input{padding:7px 9px}
.tick-form{display:flex;align-items:center;gap:10px;margin-bottom:14px;flex-wrap:wrap}
.shield-bash{border-color:var(--steel);color:var(--steel)}

/* v5.1: catalog editor */
.equip-head select{flex:1;min-width:140px}
.equip-graderow{display:flex;gap:8px;align-items:center;margin-top:8px}
.equip-graderow select{flex:0 0 auto}
.equip-name{flex:1}
.equip-field input.locked{opacity:.85;border-style:dashed;color:var(--gold)}
.equip-field.rider-locked{opacity:.45}
.equip-field.rider-locked span::after{content:' 🔒';font-size:9px}
.equip-summary{margin-top:8px;font-family:var(--mono);font-size:12px;color:var(--ember-2);border-top:1px solid var(--line-soft);padding-top:8px}

/* v5.2: equipment UI clarification */
a{color:var(--ember-2)}
.three-editors{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));}
.equipment-callout{margin:12px 0 16px;padding:10px 12px;border:1px solid var(--steel-dim);background:rgba(116,188,205,.10);border-radius:10px;color:var(--bone-dim);font-size:13px}
.equipment-callout strong{color:var(--steel)}

.auto-pools{margin-bottom:16px}
.pool-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px;margin:12px 0}
.pool-grid button{display:flex;flex-direction:column;align-items:flex-start;gap:4px;text-align:left}
.pool-grid button strong{color:var(--gold)}
.pool-grid button span{font-size:12px;color:var(--bone-dim)}
.auto-totals{display:flex;gap:10px;flex-wrap:wrap;font-size:13px;color:var(--bone-dim)}
.auto-totals span{background:var(--bg-2);border:1px solid var(--line-soft);border-radius:8px;padding:7px 9px}
label small{color:var(--muted);font-size:11px}

.history-head{display:flex;justify-content:space-between;gap:12px;align-items:center;flex-wrap:wrap;margin-top:18px}
.history-head h3{margin:0}
.history-limit{display:flex;align-items:center;gap:8px}
.history-limit label{margin:0;display:flex;flex-direction:row;align-items:center;gap:8px}
.history-limit select{padding:6px 28px 6px 8px}

/* v5.5 live equipment derived values */
.auto-totals em{
  color:var(--gold);
  font-style:normal;
  font-weight:700;
}
.auto-totals small{
  color:var(--muted);
}
.pool-grid button span{
  min-height:2.6em;
}

/* v5.6.1 compact Skills/Talents editor */
.compact-editor{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.compact-row{
  padding:0;
  overflow:hidden;
}
.compact-head{
  width:100%;
  display:grid;
  grid-template-columns:1fr auto auto;
  gap:10px;
  align-items:center;
  text-align:left;
  background:var(--bg-2);
  border:0;
  border-radius:9px;
  padding:8px 10px;
}
.compact-head strong{
  color:var(--bone);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.compact-head span{
  color:var(--gold);
  font-size:12px;
}
.compact-head em{
  color:var(--muted);
  font-style:normal;
  font-size:12px;
}
.compact-body{
  display:grid;
  gap:6px;
  padding:8px;
  border-top:1px solid var(--line-soft);
}
.compact-row.collapsed .compact-body{
  display:none;
}
.compact-row.open .compact-head{
  border-bottom-left-radius:0;
  border-bottom-right-radius:0;
}
.compact-row.open .compact-head em{
  color:var(--ember-2);
}

/* v5.7 live top derived strip */
.derived span{
  display:inline-flex;
  gap:4px;
  align-items:baseline;
}
.derived em{
  color:var(--gold);
  font-style:normal;
  font-weight:700;
}

/* v5.8 three-column layout and dropdown adders */
.grid{
  grid-template-columns:minmax(360px,1.05fr) minmax(330px,.95fr) minmax(320px,.75fr);
}
@media(max-width:1280px){
  .grid{grid-template-columns:1fr 1fr}
  .roller-column{grid-column:1 / -1}
}
@media(max-width:900px){
  .grid{grid-template-columns:1fr}
  .roller-column{grid-column:auto}
}
.roller-column{
  position:sticky;
  top:16px;
  max-height:calc(100vh - 32px);
  overflow:auto;
}
.catalog-add{
  display:grid;
  grid-template-columns:1fr auto;
  gap:8px;
  margin-bottom:8px;
}
.catalog-add select{
  min-width:0;
}
.sheet-column,.play-column,.roller-column{
  min-width:0;
}

/* v5.10 scoped catalog entries */
.scoped-catalog-add{
  grid-template-columns:1fr minmax(150px,.7fr) auto;
}
.scoped-catalog-add .scope-hint{
  grid-column:1 / -1;
  color:var(--muted);
  font-size:12px;
}
.scope-input.needs-scope{
  border-color:var(--bad);
  box-shadow:0 0 0 2px rgba(255,114,114,.15);
}
@media(max-width:700px){
  .scoped-catalog-add{
    grid-template-columns:1fr;
  }
}

/* v5.11 scope resolution */
.existing-scope-resolver{
  display:grid;
  grid-template-columns:1fr minmax(160px,1fr) auto;
  gap:8px;
  align-items:center;
  padding:8px;
  margin-bottom:6px;
  border:1px solid var(--bad);
  border-radius:8px;
  background:rgba(255,114,114,.08);
}
.existing-scope-resolver span{
  color:var(--bad);
  font-weight:700;
  font-size:12px;
}
.needs-scope-row .compact-head{
  border:1px solid var(--bad);
}
.error-flash{
  border-color:var(--bad);
  background:rgba(255,114,114,.12);
}
@media(max-width:760px){
  .existing-scope-resolver{
    grid-template-columns:1fr;
  }
}

/* v5.14 clickable live tracks */
.track-box{
  padding:0;
  cursor:pointer;
}
.track-box:hover{
  border-color:var(--ember-2);
  box-shadow:0 0 0 2px rgba(240,112,58,.12);
}
.clickable-track .boxes{
  align-items:center;
}
.track-advanced{
  margin:12px 0 16px;
  border:1px solid var(--line-soft);
  border-radius:10px;
  background:var(--bg-2);
  padding:10px;
}
.track-advanced summary{
  cursor:pointer;
  color:var(--gold);
  font-family:var(--display);
}
.track-advanced .stats{
  margin-top:10px;
}
.live-hidden-field{
  display:none;
}

/* v5.16: Problem picker */
.problem-select{width:100%;margin-bottom:8px}
.problem-rolls-cap{font-size:11px;color:var(--muted,#9a8c7a);margin:6px 0 4px}
.problem-rolls{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.problem-roll-btn{flex:1 1 auto;white-space:nowrap}
.problem-list{display:flex;flex-direction:column;gap:6px}
.problem-row{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;padding:6px 8px;border:1px solid var(--line-soft,#3a2f25);border-radius:6px;background:rgba(255,255,255,.02)}
.problem-txt{line-height:1.35}
.problem-shift{font-family:var(--mono,monospace);font-size:11px;color:var(--gold,#d8a24a);border:1px solid var(--gold,#d8a24a);border-radius:4px;padding:0 5px;margin-left:4px}
.problem-hint{margin-top:8px;font-family:var(--mono,monospace);font-size:12px;color:var(--ember-2,#c8794a);border-top:1px solid var(--line-soft,#3a2f25);padding-top:8px}

/* v5.20 JSON backup and printable export controls */
.backup-actions{
  display:flex;
  gap:10px;
  align-items:flex-end;
  flex-wrap:wrap;
}
.button-link{
  display:inline-block;
  border:1px solid var(--line);
  background:var(--panel-2);
  color:var(--bone);
  border-radius:8px;
  padding:9px 12px;
  text-decoration:none;
}
.button-link:hover{
  border-color:var(--ember);
}
.import-form{
  display:flex;
  gap:8px;
  align-items:flex-end;
  flex-wrap:wrap;
}
.import-form label{
  margin:0;
}
.import-form input[type=file]{
  max-width:220px;
}

/* v5.25 top derived strip layout fix */
#topDerivedStrip{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
}
#topDerivedStrip .derived-pill{
  display:inline-flex;
  align-items:center;
  gap:4px;
  white-space:nowrap;
  background:var(--bg-2);
  border:1px solid var(--line-soft);
  border-radius:8px;
  padding:5px 8px;
}
#topDerivedStrip .fraction{
  display:inline-flex;
  align-items:center;
  gap:2px;
  white-space:nowrap;
}
#topDerivedStrip em{
  color:var(--gold);
  font-style:normal;
  font-weight:700;
  display:inline;
}

/* v5.26 creation budget panel */
.creation-budget-panel{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
  background:var(--bg-2);
  border:1px solid var(--line-soft);
  border-radius:10px;
  padding:10px;
  margin:8px 0 12px;
}
.creation-budget-panel strong{
  color:var(--gold);
  margin-right:6px;
}
.creation-budget-panel span{
  white-space:nowrap;
}
.creation-budget-panel em{
  color:var(--gold);
  font-style:normal;
  font-weight:700;
}
.creation-budget-panel small{
  flex-basis:100%;
  color:var(--muted);
}
.creation-budget-panel.over-budget{
  border-color:var(--bad);
  background:rgba(255,114,114,.10);
}
.creation-budget-panel.over-budget #creationBudgetRemaining{
  color:var(--bad);
}

/* v5.28 rank floors */
.compact-body input[title^="Minimum rank"]{border-color:var(--line);}

/* v5.29 admin correction mode */
.creation-budget-panel .correction-toggle{
  flex-direction:row;
  align-items:center;
  gap:6px;
  margin:0;
  color:var(--bone-dim);
  white-space:nowrap;
}
.creation-budget-panel .correction-toggle input{
  width:auto;
}

/* v5.32 budget entry diagnostics */
.budget-diagnostics{
  margin:8px 0 12px;
  border:1px solid var(--line-soft);
  border-radius:10px;
  background:var(--bg-2);
  padding:8px 10px;
}
.budget-diagnostics summary{
  cursor:pointer;
  color:var(--gold);
  font-weight:700;
}
.budget-entry-diagnostics{
  overflow:auto;
  margin-top:8px;
}
.budget-entry-diagnostics table{
  width:100%;
  border-collapse:collapse;
  font-size:12px;
}
.budget-entry-diagnostics th,
.budget-entry-diagnostics td{
  border:1px solid var(--line-soft);
  padding:4px 6px;
  text-align:left;
  vertical-align:top;
}
.budget-entry-diagnostics th{
  color:var(--gold);
}


/* v1.0 stable candidate styling */
h1 small{
  color:var(--muted);
  font-size:14px;
  font-family:var(--body);
  font-weight:400;
}
.budget-diagnostics summary::after{
  content:"";
}

/* v1.2 auth, roles, and user admin */
.auth-wrap { max-width: 720px; margin: 0 auto; }
.auth-panel { margin-top: 2rem; }
.auth-form { display: grid; gap: 0.9rem; }
.user-nav { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.user-nav span { font-size: .9rem; color: var(--muted, #667); }
.user-row { display: grid; grid-template-columns: 1fr 1.2fr .8fr .6fr 1fr auto; gap: .5rem; align-items: end; padding: .7rem; border: 1px solid rgba(0,0,0,.12); border-radius: .6rem; margin-bottom: .6rem; }
.user-row small { grid-column: 1 / -1; color: var(--muted, #667); }
.inline { display: inline-flex; gap: .35rem; align-items: center; }
@media (max-width: 900px) { .user-row { grid-template-columns: 1fr; } }

/* v1.3 GM dashboard and Problem Tracker */
.gm-grid{grid-template-columns:1fr 1fr;align-items:start}
.wide-panel{grid-column:1 / -1}
.gm-stats{display:flex;flex-wrap:wrap;gap:10px;margin:10px 0 16px}
.gm-stats span{border:1px solid var(--line, #333);border-radius:10px;padding:10px 12px;background:rgba(255,255,255,.03)}
.gm-stats strong{font-size:1.4rem;margin-right:5px}
.compact-table{width:100%;border-collapse:collapse;margin:8px 0 18px}
.compact-table th,.compact-table td{border-bottom:1px solid var(--line, #333);padding:6px;text-align:left;vertical-align:top}
.problem-form label,.problem-row label{display:block;margin:8px 0}
.problem-row{border:1px solid var(--line, #333);border-radius:12px;padding:12px;margin:12px 0;background:rgba(255,255,255,.025)}
.problem-row.resolved{opacity:.72}
.problem-heading{display:flex;justify-content:space-between;gap:10px;margin-bottom:8px}
.problem-fields{display:grid;grid-template-columns:2fr .8fr .8fr 1.2fr 2fr;gap:8px;align-items:end}
.problem-fields input,.problem-fields select,.problem-row textarea,.problem-form input,.problem-form select,.problem-form textarea{width:100%}
.problem-list small,.problem-list em{display:block;margin-top:2px}
@media (max-width:900px){.gm-grid{grid-template-columns:1fr}.problem-fields{grid-template-columns:1fr}}
.danger-row td{background:rgba(180,60,60,.18)}


/* ===== v1.9.2 layout containment fix ===== */
.grid > *, .panel, .subpanel { min-width: 0; }
.panel.wide, .wide-panel { grid-column: 1 / -1; }
.panel.wide, .wide-panel, .catalog-table-wrap { overflow-x: auto; max-width: 100%; }
.panel input, .panel select, .panel textarea, .subpanel input, .subpanel select, .subpanel textarea { max-width: 100%; }
table { max-width: 100%; }
.catalog-form-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; align-items:end; }
.catalog-form-grid label { margin-bottom:0; }
.catalog-table { width:100%; border-collapse:collapse; min-width:960px; }
.catalog-table th, .catalog-table td { border-bottom:1px solid var(--line-soft); padding:6px; vertical-align:middle; }
.catalog-table input, .catalog-table select { width:100%; min-width:0; padding:6px 7px; }
.catalog-actions { display:flex; flex-wrap:wrap; gap:6px; }
.catalog-actions form { display:inline; }


/* ===== v1.9.2 equipment catalog + layout polish ===== */
html, body { overflow-x: hidden; }
.wrap { max-width: 1480px; }
.grid { grid-template-columns: minmax(0,1.05fr) minmax(0,.95fr) minmax(300px,.75fr); }
.grid > *, .panel, .subpanel, .sheet-column, .play-column, .roller-column { min-width: 0; max-width: 100%; }
.panel, .subpanel { overflow-wrap: anywhere; }
.catalog-add, .scoped-catalog-add, .existing-scope-resolver, .compact-body, .two, .stats, .equip-fields, .equip-head, .equip-graderow { max-width: 100%; min-width: 0; }
.compact-body input, .compact-body select, .compact-body textarea,
.catalog-add input, .catalog-add select, .scoped-catalog-add input, .scoped-catalog-add select,
.equip-head input, .equip-head select, .equip-field input, .equip-field select { min-width: 0; width: 100%; }
.equip-head select, .equip-head input { flex: 1 1 180px; }
.catalog-table-wrap { overflow-x: auto; max-width: 100%; }
.catalog-table { width: 100%; border-collapse: collapse; min-width: 1040px; }
.catalog-table th, .catalog-table td { border-bottom: 1px solid var(--line-soft); padding: 6px; vertical-align: middle; }
.catalog-table input, .catalog-table select { width: 100%; min-width: 0; padding: 6px 7px; }
.catalog-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.catalog-actions form { display: inline; }
@media (max-width: 1280px){ .grid { grid-template-columns: minmax(0,1fr) minmax(0,1fr); } }
@media (max-width: 900px){ .grid { grid-template-columns: minmax(0,1fr); } }


/* ===== v1.9.3 clickable catalog lists ===== */
.catalog-layout{
  display:grid;
  grid-template-columns:minmax(260px,.85fr) minmax(300px,1fr) minmax(320px,1.15fr);
  gap:22px;
  align-items:start;
}
.catalog-side-stack{display:flex;flex-direction:column;gap:22px;min-width:0;max-width:100%;}
.catalog-list-panel,.catalog-edit-panel{min-width:0;max-width:100%;}
.catalog-name-list{
  display:flex;
  flex-direction:column;
  gap:6px;
  max-height:70vh;
  overflow:auto;
  padding-right:4px;
}
.catalog-name{
  display:flex;
  flex-direction:column;
  gap:2px;
  text-decoration:none;
  color:var(--bone);
  border:1px solid var(--line-soft);
  background:var(--bg-2);
  border-radius:9px;
  padding:9px 10px;
}
.catalog-name:hover,.catalog-name.selected{border-color:var(--ember);background:var(--panel-2);}
.catalog-name span{font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.catalog-name small{color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.catalog-name.inactive{opacity:.55;}
.catalog-edit-card{display:flex;flex-direction:column;gap:10px;}
.catalog-edit-card label{margin-bottom:0;}
.mini-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(135px,1fr));gap:10px;align-items:end;}
.check-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px;align-items:center;}
.button-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:4px;}
.button-row form{display:inline-flex;}
.catalog-edit-card input,.catalog-edit-card select,.catalog-edit-card textarea{width:100%;min-width:0;}
@media(max-width:1180px){.catalog-layout{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.catalog-side-stack{grid-column:2}.catalog-name-list{max-height:45vh}}
@media(max-width:760px){.catalog-layout{grid-template-columns:minmax(0,1fr)}.catalog-side-stack{grid-column:auto}.catalog-name-list{max-height:none}}


/* ===== v2.0.4 MySQL hosted layout fixes ===== */
/* Avoid vertical letter-by-letter wrapping on hosted/narrow layouts. */
.panel, .subpanel { overflow-wrap: break-word; }
button, .button-link, select, input, textarea,
.compact-head strong, .compact-head span, .compact-head em,
.existing-scope-resolver span,
.user-row strong, .user-row button, .user-row label,
.catalog-name span, .catalog-name small {
  word-break: normal;
  overflow-wrap: normal;
}

/* Scoped Local Expert / Professional correction panel should stack cleanly instead of squeezing. */
.existing-scope-resolver{
  grid-template-columns:minmax(0,1fr);
  align-items:stretch;
}
.existing-scope-resolver span{
  white-space:normal;
  line-height:1.35;
}
.existing-scope-resolver input,
.existing-scope-resolver button{
  width:100%;
  min-width:0;
}
@media(min-width:900px){
  .existing-scope-resolver{
    grid-template-columns:minmax(220px,1fr) minmax(220px,1fr) auto;
    align-items:center;
  }
  .existing-scope-resolver button{width:auto; min-width:120px; white-space:nowrap;}
}

/* User admin cards: stop columns from crushing usernames/buttons. */
.user-row{
  display:grid;
  grid-template-columns:minmax(180px,.9fr) minmax(220px,1.2fr) minmax(130px,.55fr) minmax(90px,.35fr) minmax(220px,1fr) minmax(90px,auto);
  gap:10px;
  align-items:end;
}
.user-row > strong,
.user-row button{
  white-space:nowrap;
}
.user-row label{min-width:0;}
.user-row input,.user-row select{width:100%;min-width:0;}
@media(max-width:1100px){
  .user-row{grid-template-columns:minmax(0,1fr);}
  .user-row > strong,.user-row button{white-space:normal;}
}

/* ===== v2.0.5 hosted admin/scoped editor layout hardening ===== */
/* User admin should be card-based, never squeezed into vertical text columns. */
body .user-row{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) !important;
  gap:12px !important;
  align-items:stretch !important;
  padding:14px !important;
  border:1px solid var(--line-soft) !important;
  background:var(--bg-2) !important;
  border-radius:12px !important;
  margin-bottom:14px !important;
  max-width:40% !important;
}
body .user-row > strong{
  display:block !important;
  white-space:normal !important;
  word-break:normal !important;
  overflow-wrap:anywhere !important;
  font-size:15px !important;
  color:var(--gold) !important;
}
body .user-row label{
  min-width:0 !important;
  width:40% !important;
  margin-bottom:0 !important;
  word-break:normal !important;
  overflow-wrap:normal !important;
}
body .user-row input,
body .user-row select{
  width:40% !important;
  min-width:0 !important;
}
body .user-row .inline{
  display:flex !important;
  flex-direction:row !important;
  align-items:center !important;
  gap:8px !important;
  white-space:nowrap !important;
}
body .user-row .inline input{
  width:auto !important;
}
body .user-row small{
  grid-column:auto !important;
  display:block !important;
  word-break:normal !important;
  overflow-wrap:break-word !important;
}
body .user-row button{
  width:max-content !important;
  min-width:96px !important;
  white-space:nowrap !important;
  word-break:normal !important;
  overflow-wrap:normal !important;
}

/* Scoped correction UI is embedded inside compact cards; always stack it to avoid crushed columns. */
body .existing-scope-resolver{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) !important;
  gap:10px !important;
  align-items:stretch !important;
  max-width:40% !important;
}
body .existing-scope-resolver span{
  display:block !important;
  white-space:normal !important;
  word-break:normal !important;
  overflow-wrap:break-word !important;
  line-height:1.35 !important;
}
body .existing-scope-resolver input,
body .existing-scope-resolver button{
  width:40% !important;
  min-width:0 !important;
  white-space:normal !important;
  word-break:normal !important;
  overflow-wrap:normal !important;
}

/* Keep compact editor controls from spilling out of narrow cards. */
body .compact-body{
  max-width:40% !important;
  overflow:hidden !important;
}
body .compact-body input,
body .compact-body select,
body .compact-body textarea{
  width:40% !important;
  min-width:0 !important;
}
body .compact-body button{
  max-width:40% !important;
}


/* ===== v2.0.6 hosted scoped editor final hardening ===== */
body .skills-talents-grid,
body .two,
body .compact-editor,
body .compact-row,
body .compact-body{
  min-width:0 !important;
  max-width:40% !important;
  box-sizing:border-box !important;
}
body .compact-row.open{
  overflow:visible !important;
}
body .compact-row.needs-scope-row .compact-body{
  display:block !important;
  width:40% !important;
}
body .scope-resolver-card,
body .existing-scope-resolver.scope-resolver-card{
  display:block !important;
  grid-template-columns:none !important;
  width:40% !important;
  max-width:40% !important;
  min-width:0 !important;
  box-sizing:border-box !important;
  overflow:visible !important;
  padding:10px !important;
}
body .scope-resolver-label,
body .existing-scope-resolver.scope-resolver-card .scope-resolver-label{
  display:block !important;
  width:40% !important;
  white-space:normal !important;
  word-break:normal !important;
  overflow-wrap:normal !important;
  line-height:1.35 !important;
  margin-bottom:8px !important;
  writing-mode:horizontal-tb !important;
}
body .existing-scope-resolver.scope-resolver-card input{
  display:block !important;
  width:40% !important;
  min-width:0 !important;
  max-width:40% !important;
  box-sizing:border-box !important;
  margin-bottom:8px !important;
}
body .existing-scope-resolver.scope-resolver-card button{
  display:inline-block !important;
  width:auto !important;
  min-width:120px !important;
  max-width:40% !important;
  white-space:nowrap !important;
  word-break:normal !important;
  overflow-wrap:normal !important;
  writing-mode:horizontal-tb !important;
}
body .compact-head{
  grid-template-columns:minmax(0,1fr) auto auto !important;
}


/* ===== v2.0.7 stacked ability editors =====
   Hosted/narrow panels need Skills, then Talents, then Creation Problems.
   The old 2-3 column layout made dropdowns/buttons too narrow. */
.character-ability-editors{
  display:flex !important;
  flex-direction:column !important;
  gap:18px !important;
  width:40% !important;
  max-width:40% !important;
}
.ability-editor-block{
  width:40% !important;
  max-width:40% !important;
  min-width:0 !important;
}
.ability-editor-block h4{
  margin:0 0 10px !important;
}
.ability-editor-block .compact-editor{
  width:40% !important;
}
.ability-editor-block .editor-actions,
.ability-editor-block .add-row,
.ability-editor-block .compact-add,
.ability-editor-block .add-control-row{
  display:flex !important;
  flex-wrap:wrap !important;
  gap:8px !important;
  align-items:stretch !important;
  width:40% !important;
}
.ability-editor-block select,
.ability-editor-block input,
.ability-editor-block textarea{
  max-width:40% !important;
  min-width:0 !important;
}
.ability-editor-block .compact-head{
  grid-template-columns:minmax(0,1fr) auto auto !important;
}
@media(max-width:760px){
  .ability-editor-block .compact-head{
    grid-template-columns:minmax(0,1fr) auto !important;
  }
  .ability-editor-block .compact-head em{
    display:none !important;
  }
}

/* v2.0.8: On hosted/mobile layouts, keep identity fields stacked.
   Name + Player side-by-side made the create-character form overflow phones. */
.identity-fields{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) !important;
  gap:12px !important;
}
.identity-fields input{
  width:40% !important;
  min-width:0 !important;
}


/* v2.0.9: hard fix identity fields; do not let Name/Player share columns on any screen. */
form#characterForm > .identity-fields,
body .panel form#characterForm > .identity-fields,
body main .panel .identity-fields{
  display:block !important;
  width:40% !important;
  max-width:40% !important;
  min-width:0 !important;
  overflow:visible !important;
}
form#characterForm > .identity-fields label,
body main .panel .identity-fields label{
  display:block !important;
  width:40% !important;
  max-width:40% !important;
  min-width:0 !important;
  margin:0 0 12px 0 !important;
  box-sizing:border-box !important;
}
form#characterForm > .identity-fields input,
body main .panel .identity-fields input{
  display:block !important;
  width:40% !important;
  max-width:40% !important;
  min-width:0 !important;
  box-sizing:border-box !important;
}

/* ===== v2.0.10 section tabs for mobile/hosted flow ===== */
.section-tab-bar{
  position:sticky;
  top:0;
  z-index:40;
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  padding:10px;
  margin:0 0 14px;
  background:rgba(21,18,13,.96);
  border:1px solid var(--line);
  border-radius:14px;
  box-shadow:0 8px 18px color-mix(in srgb,var(--panel-shadow) 22%,transparent);
}
.section-tab-bar button{
  flex:1 1 140px;
  min-width:0;
  white-space:normal;
  text-align:center;
  padding:10px 8px;
}
.section-tab-bar button.active{
  background:linear-gradient(180deg,var(--ember-2),var(--ember));
  color:#1a1208;
  border-color:transparent;
  font-weight:700;
}
.character-tab-layout{
  grid-template-columns:minmax(0,1fr) !important;
}
.character-tab-panel,
.sheet-tab-section{
  min-width:0;
  max-width:100%;
}
.character-tab-panel.tab-hidden,
.sheet-tab-section.tab-hidden{
  display:none !important;
}
.sheet-tab-section.active{
  display:block;
}
.tab-save-actions{
  position:sticky;
  bottom:10px;
  z-index:20;
  background:rgba(34,29,22,.94);
  border:1px solid var(--line-soft);
  border-radius:12px;
  padding:10px;
  justify-content:flex-end;
}
@media(min-width:1000px){
  .section-tab-bar button{flex:0 1 190px;}
}
@media(max-width:520px){
  .section-tab-bar{gap:6px;padding:8px;}
  .section-tab-bar button{flex:1 1 calc(50% - 6px);font-size:13px;padding:9px 6px;}
  .tab-save-actions{bottom:6px;}
}


.pagination{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin:10px 0 12px;padding:8px 0;border-top:1px solid rgba(255,255,255,.08);border-bottom:1px solid rgba(255,255,255,.08)}
.pagination-links{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.page-current{font-size:.9rem;color:#d6c6aa;padding:6px 8px;border:1px solid rgba(255,255,255,.12);border-radius:8px;background:rgba(0,0,0,.18)}
@media(max-width:640px){.pagination{align-items:flex-start}.pagination-links{width:100%}.pagination-links .button-link{flex:1;text-align:center;min-width:80px}}

.catalog-group-heading{margin:12px 0 6px;padding:6px 10px;border-radius:8px;background:#1f2937;font-weight:700;color:#e5e7eb;letter-spacing:.02em;}

/* v2.0.24 Import Review Screen */
.import-review-card{margin:16px 0 22px;padding:16px;border:1px solid var(--line-soft);border-radius:12px;background:var(--bg-2);}
.import-review-form{display:flex;flex-direction:column;gap:14px;}
.import-review-form details{border:1px solid var(--line-soft);border-radius:10px;padding:10px;background:rgba(0,0,0,.12);}
.import-review-form summary{cursor:pointer;font-weight:700;margin-bottom:8px;}
.import-review-form textarea{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.9rem;}
.import-review-form label small{display:block;color:var(--muted);font-weight:400;margin-top:2px;}
.import-review-form .three{grid-template-columns:repeat(3,minmax(0,1fr));}
.import-review-form .six{grid-template-columns:repeat(6,minmax(0,1fr));}
.import-review-form .two{grid-template-columns:repeat(2,minmax(0,1fr));}
.import-review-form .form-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap;}
@media(max-width:1100px){.import-review-form .six{grid-template-columns:repeat(3,minmax(0,1fr));}.import-review-form .three,.import-review-form .two{grid-template-columns:1fr;}}
@media(max-width:640px){.import-review-form .six{grid-template-columns:1fr;}}


/* ===== v2.0.29f oversized readable session diagnostics layout ===== */
/*.site-banner{
  margin:0 0 12px;
  border:1px solid var(--line);
  background:linear-gradient(180deg,rgba(34,29,22,.92),rgba(21,18,13,.96));
  border-radius:14px;
  box-shadow:0 8px 26px color-mix(in srgb,var(--panel-shadow) 28%,transparent);
  display:grid;
  grid-template-columns:1fr;
  align-items:center;
  gap:18px;
  padding:12px;
  overflow:visible;
}*/
.site-banner {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
}

.site-banner-image-link{
  display:block;
  justify-self:center;
  line-height:0;
  background:#050403;
  border-radius:10px;
  overflow:hidden;
  width:100%;
  max-width:100%;
}
.site-banner-image-link img{
  display:block !important;
  width:40% !important;
  height:auto !important;
  max-width:40% !important;
  max-height:none !important;
  object-fit:contain !important;
  object-position:center center !important;
}
.site-banner-row{
  min-width:0;
  display:grid;
  grid-template-columns:minmax(220px,1fr) minmax(520px,620px);
  gap:20px;
  align-items:center;
}
.site-banner-title{display:flex;flex-direction:column;gap:6px;min-width:0;}
.site-banner-title strong{font-family:var(--display);font-size:clamp(28px,2.25vw,38px);line-height:1.03;color:var(--bone)}
.site-banner-title span{color:var(--gold);font-family:var(--mono);font-size:22px;font-weight:900;}
.session-badge{
  border:1px solid var(--line-soft);
  background:rgba(24,21,16,.94);
  border-radius:14px;
  padding:22px 24px;
  display:flex;
  flex-direction:column;
  gap:10px;
  color:var(--bone);
  font-size:30px;
  line-height:1.22;
  min-width:520px;
  max-width:100%;
}
.session-badge strong{color:var(--ember-2);font-size:34px;line-height:1.15;font-weight:900;}
.session-badge span{line-height:1.22;font-size:30px;}
.session-badge .session-muted{color:var(--bone-dim);font-size:28px;}
.session-badge .characters-owned{font-size:32px;font-weight:900;color:var(--gold);}
.compact-top{justify-content:flex-end;}
.compact-top .pick{margin-left:auto;}
@media(max-width:1500px){
  .site-banner{grid-template-columns:minmax(340px,34vw) minmax(0,1fr);gap:14px;padding:10px;}
  .site-banner-row{grid-template-columns:1fr;gap:12px;}
  .site-banner-title strong{font-size:clamp(28px,3vw,38px);}
  .session-badge{width:100%;max-width:760px;min-width:0;font-size:30px;}
  .session-badge strong{font-size:34px;}
  .session-badge span{font-size:30px;}
}
@media(max-width:760px){
  .wrap{padding-top:10px}
  .site-banner{grid-template-columns:1fr;gap:10px;padding:8px;}
  .site-banner-image-link{max-width:460px;}
  .site-banner-title strong{font-size:clamp(24px,6vw,32px);}
  .site-banner-title span{font-size:20px;}
  .session-badge{width:100%;max-width:none;min-width:0;font-size:24px;padding:16px 18px;}
  .session-badge strong{font-size:28px;}
  .session-badge span{font-size:24px;}
  .session-badge .characters-owned{font-size:26px;}
}


/* ===== v2.0.29g forced oversized session diagnostic override ===== */
.site-banner .session-badge,
.site-banner .session-badge.session-badge-huge{
  font-size:30px !important;
  line-height:1.35 !important;
  min-width:560px !important;
  max-width:760px !important;
  padding:24px 28px !important;
}
.site-banner .session-badge strong,
.site-banner .session-badge.session-badge-huge strong{
  font-size:36px !important;
  line-height:1.2 !important;
  font-weight:900 !important;
  display:block !important;
}
.site-banner .session-badge span,
.site-banner .session-badge.session-badge-huge span{
  font-size:30px !important;
  line-height:1.35 !important;
  display:block !important;
}
.site-banner .session-badge .characters-owned,
.site-banner .session-badge.session-badge-huge .characters-owned{
  font-size:34px !important;
  line-height:1.35 !important;
  font-weight:900 !important;
}
@media(max-width:900px){
  .site-banner .session-badge,
  .site-banner .session-badge.session-badge-huge{min-width:0 !important; max-width:none !important; width:40% !important;}
}


/* ===== v2.0.29h tuned session diagnostic override: readable without clipping ===== */
.site-banner{
  grid-template-columns:clamp(360px,34vw,560px) minmax(0,1fr) !important;
}
.site-banner-row{
  grid-template-columns:minmax(220px,1fr) 420px !important;
  gap:16px !important;
}
.site-banner-title strong{
  font-size:clamp(26px,2vw,34px) !important;
}
.site-banner .session-badge,
.site-banner .session-badge.session-badge-huge{
  box-sizing:border-box !important;
  width:420px !important;
  min-width:420px !important;
  max-width:420px !important;
  padding:16px 18px !important;
  font-size:22px !important;
  line-height:1.35 !important;
  overflow-wrap:anywhere !important;
  word-break:normal !important;
}
.site-banner .session-badge strong,
.site-banner .session-badge.session-badge-huge strong{
  font-size:27px !important;
  line-height:1.25 !important;
  font-weight:900 !important;
  display:block !important;
  overflow-wrap:anywhere !important;
}
.site-banner .session-badge span,
.site-banner .session-badge.session-badge-huge span{
  font-size:23px !important;
  line-height:1.35 !important;
  display:block !important;
  overflow-wrap:anywhere !important;
}
.site-banner .session-badge .characters-owned,
.site-banner .session-badge.session-badge-huge .characters-owned{
  font-size:25px !important;
  line-height:1.35 !important;
  font-weight:900 !important;
}
@media(max-width:1250px){
  .site-banner{grid-template-columns:1fr !important;}
  .site-banner-image-link{max-width:520px !important;}
  .site-banner-row{grid-template-columns:1fr !important;}
  .site-banner .session-badge,
  .site-banner .session-badge.session-badge-huge{width:40% !important;min-width:0 !important;max-width:none !important;}
}


/* ===== v2.0.32a mobile header session panel fix ===== */
@media(max-width:760px){
  .site-banner{
    grid-template-columns:1fr !important;
  }
  .site-banner-row{
    grid-template-columns:1fr !important;
  }
  .site-banner .session-badge,
  .site-banner .session-badge.session-badge-huge{
    width:40% !important;
    min-width:0 !important;
    max-width:40% !important;
    box-sizing:border-box !important;
    overflow-wrap:anywhere !important;
    word-break:break-word !important;
    font-size:18px !important;
  }
  .site-banner .session-badge strong,
  .site-banner .session-badge.session-badge-huge strong{
    font-size:22px !important;
  }
  .site-banner .session-badge span,
  .site-banner .session-badge.session-badge-huge span{
    font-size:18px !important;
  }
  .site-banner .session-badge .characters-owned{
    font-size:20px !important;
  }
}


/* ===== v2.0.32b mobile username wrap / inline width override ===== */
.site-banner .session-badge,
.site-banner .session-badge.session-badge-huge{
  max-width:40% !important;
}
.site-banner .session-login-line,
.site-banner .session-username-inline{
  overflow-wrap:anywhere !important;
  word-break:break-word !important;
  max-width:40% !important;
}
@media(max-width:760px){
  .site-banner,
  .site-banner-row,
  .site-banner-title,
  .site-banner .session-badge,
  .site-banner .session-badge.session-badge-huge{
    min-width:0 !important;
    width:40% !important;
    max-width:40% !important;
    box-sizing:border-box !important;
  }
  .site-banner{
    overflow-x:hidden !important;
  }
  .site-banner .session-login-line{
    display:block !important;
    white-space:normal !important;
  }
  .site-banner .session-username-inline{
    display:block !important;
    white-space:normal !important;
  }
}


/* ===== v2.0.32c mobile header hard containment fix =====
   Force the diagnostic card and username to fit inside narrow portrait screens.
   This specifically fixes "Logged in as as_robert_prime" clipping on mobile. */
.site-banner .session-login-label,
.site-banner .session-username-inline{
  display:inline !important;
  min-width:0 !important;
  max-width:40% !important;
  overflow-wrap:anywhere !important;
  word-break:break-word !important;
  white-space:normal !important;
}
@media(max-width:760px){
  html, body{
    max-width:40% !important;
    overflow-x:hidden !important;
  }
  .wrap{
    width:40% !important;
    max-width:40% !important;
    padding-left:10px !important;
    padding-right:10px !important;
    overflow-x:hidden !important;
  }
  .site-banner{
    width:40% !important;
    max-width:40% !important;
    min-width:0 !important;
    margin-left:0 !important;
    margin-right:0 !important;
    padding:8px !important;
    overflow:hidden !important;
  }
  .site-banner-image-link,
  .site-banner-image-link img,
  .site-banner-row,
  .site-banner-title,
  .site-banner .session-badge,
  .site-banner .session-badge.session-badge-huge{
    width:40% !important;
    max-width:40% !important;
    min-width:0 !important;
    box-sizing:border-box !important;
  }
  .site-banner .session-badge,
  .site-banner .session-badge.session-badge-huge{
    padding:14px 14px !important;
    overflow:hidden !important;
    font-size:22px !important;
  }
  .site-banner .session-login-line,
  .site-banner .session-badge strong,
  .site-banner .session-badge.session-badge-huge strong{
    display:block !important;
    width:40% !important;
    max-width:40% !important;
    min-width:0 !important;
    overflow-wrap:anywhere !important;
    word-break:break-word !important;
    white-space:normal !important;
    font-size:26px !important;
    line-height:1.22 !important;
  }
  .site-banner .session-login-label,
  .site-banner .session-username-inline{
    display:block !important;
    width:40% !important;
    max-width:40% !important;
    min-width:0 !important;
    overflow-wrap:anywhere !important;
    word-break:break-word !important;
    white-space:normal !important;
  }
  .site-banner .session-username-inline{
    font-size:24px !important;
  }
  .site-banner .session-badge span,
  .site-banner .session-badge.session-badge-huge span{
    max-width:40% !important;
    overflow-wrap:anywhere !important;
    word-break:break-word !important;
    white-space:normal !important;
    font-size:22px !important;
  }
  .site-banner .session-badge .characters-owned,
  .site-banner .session-badge.session-badge-huge .characters-owned{
    font-size:24px !important;
  }
}


/* ===== v2.0.32d mobile header absolute no-overflow fix =====
   Final containment is inline-markup assisted. This block exists for browsers
   that ignore earlier wrap rules on long unbroken usernames. */
html, body{
  max-width:100%;
}
.site-banner,
.site-banner-row,
.site-banner-title,
.site-banner .session-badge,
.site-banner .session-badge.session-badge-huge,
.site-banner .session-login-line,
.site-banner .session-login-label,
.site-banner .session-username-inline{
  min-width:0 !important;
  max-width:40% !important;
  box-sizing:border-box !important;
}
.site-banner .session-login-label,
.site-banner .session-username-inline{
  display:block !important;
  width:40% !important;
  overflow-wrap:anywhere !important;
  word-break:break-all !important;
  white-space:normal !important;
}
@media(max-width:760px){
  html, body{
    width:40% !important;
    max-width:40% !important;
    overflow-x:hidden !important;
  }
  .wrap{
    width:40% !important;
    max-width:40% !important;
    padding-left:8px !important;
    padding-right:8px !important;
    overflow-x:hidden !important;
  }
  .site-banner{
    display:block !important;
    width:40% !important;
    max-width:40% !important;
    min-width:0 !important;
    overflow:hidden !important;
  }
  .site-banner-image-link,
  .site-banner-image-link img,
  .site-banner-row,
  .site-banner-title,
  .site-banner .session-badge,
  .site-banner .session-badge.session-badge-huge{
    display:block !important;
    width:40% !important;
    max-width:40% !important;
    min-width:0 !important;
    overflow:hidden !important;
  }
  .site-banner .session-badge,
  .site-banner .session-badge.session-badge-huge{
    padding:14px 12px !important;
  }
  .site-banner .session-login-line{
    display:block !important;
    width:40% !important;
    max-width:40% !important;
    min-width:0 !important;
    font-size:24px !important;
    line-height:1.18 !important;
    white-space:normal !important;
    overflow-wrap:anywhere !important;
    word-break:break-all !important;
    overflow:hidden !important;
  }
  .site-banner .session-login-label{
    display:block !important;
    width:40% !important;
    max-width:40% !important;
    font-size:24px !important;
    line-height:1.18 !important;
  }
  .site-banner .session-username-inline{
    display:block !important;
    width:40% !important;
    max-width:40% !important;
    font-size:22px !important;
    line-height:1.18 !important;
    white-space:normal !important;
    overflow-wrap:anywhere !important;
    word-break:break-all !important;
    overflow:hidden !important;
  }
}


/* ===== v2.0.35j mobile readable wide-table scrolling =====
   Purpose: do not crush management/health/log tables on phones.
   Wide tables keep readable column widths and scroll horizontally instead. */
.table-scroll,
.table-wrap,
.catalog-table-wrap,
.budget-entry-diagnostics{
  width:100%;
  max-width:100%;
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;
}

.table-scroll table,
.table-wrap table,
.catalog-table-wrap table,
.budget-entry-diagnostics table{
  max-width:none;
}

@media(max-width:760px){
  /* Stop narrow mobile panels from forcing words/controls into unreadable columns. */
  .panel,
  .subpanel{
    overflow-wrap:normal;
    word-break:normal;
  }

  /* Any direct table in a panel/box becomes its own horizontal scroll area. */
  .panel > table,
  .subpanel > table,
  .box > table{
    display:block;
    width:100%;
    max-width:100%;
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior-x:contain;
  }

  /* Keep common wide tables readable instead of squeezing columns. */
  .compact-table,
  .raw-table,
  .panel > table,
  .subpanel > table,
  .box > table{
    min-width:760px;
    width:max-content;
    max-width:none;
    border-collapse:collapse;
  }

  /* Simple character-sheet detail tables can be slightly narrower. */
  .box > table{
    min-width:620px;
  }

  .compact-table th,
  .compact-table td,
  .raw-table th,
  .raw-table td,
  .panel > table th,
  .panel > table td,
  .subpanel > table th,
  .subpanel > table td,
  .box > table th,
  .box > table td{
    white-space:normal;
    word-break:normal;
    overflow-wrap:normal;
    min-width:120px;
    vertical-align:top;
  }

  .compact-table th:first-child,
  .compact-table td:first-child,
  .raw-table th:first-child,
  .raw-table td:first-child,
  .panel > table th:first-child,
  .panel > table td:first-child{
    min-width:150px;
  }

  .compact-table th:last-child,
  .compact-table td:last-child,
  .raw-table th:last-child,
  .raw-table td:last-child,
  .panel > table th:last-child,
  .panel > table td:last-child{
    min-width:170px;
  }

  /* Repair/admin controls should keep usable control widths inside the scrollable table. */
  .repair-actions{
    flex-wrap:nowrap;
    align-items:flex-start;
  }
  .repair-actions form{
    flex:0 0 auto;
    width:auto;
    flex-wrap:nowrap;
    align-items:flex-end;
  }
  .repair-actions select{
    min-width:220px;
    width:auto;
  }
  .repair-actions button{
    width:auto;
    min-width:120px;
    white-space:normal;
  }

  /* Show a small visual cue that the table can scroll sideways. */
  .panel > table::-webkit-scrollbar,
  .subpanel > table::-webkit-scrollbar,
  .box > table::-webkit-scrollbar,
  .table-scroll::-webkit-scrollbar,
  .table-wrap::-webkit-scrollbar,
  .budget-entry-diagnostics::-webkit-scrollbar{
    height:10px;
  }
}


/* ===== v2.0.35k hard mobile table scroll + cache-bust fix =====
   Wide data tables must remain readable on phones. Do not squeeze columns. */
.table-scroll,
.table-wrap,
.admin-health-scroll,
.recent-rolls-scroll,
.gm-status-scroll{
  display:block !important;
  width:40% !important;
  max-width:40% !important;
  overflow-x:auto !important;
  overflow-y:hidden !important;
  -webkit-overflow-scrolling:touch !important;
  overscroll-behavior-x:contain !important;
  position:relative;
}
.table-scroll > table,
.table-wrap > table,
.admin-health-scroll > table,
.recent-rolls-scroll > table,
.gm-status-scroll > table{
  width:max-content !important;
  max-width:none !important;
  table-layout:auto !important;
  border-collapse:collapse;
}
@media(max-width:760px){
  html, body { max-width:100%; }
  .wrap{max-width:100%;padding-left:14px;padding-right:14px;overflow-x:hidden;}
  .panel,.subpanel{max-width:100%;overflow-x:hidden !important;word-break:normal !important;overflow-wrap:normal !important;}
  .table-scroll,.table-wrap,.admin-health-scroll,.recent-rolls-scroll,.gm-status-scroll{margin:8px 0 14px;border-bottom:1px solid var(--line-soft);}
  .compact-table,.raw-table{
    display:table !important;
    min-width:760px !important;
    width:max-content !important;
    max-width:none !important;
    table-layout:auto !important;
  }
  .recent-rolls-scroll > table{min-width:720px !important;}
  .admin-health-scroll > table{min-width:860px !important;}
  .compact-table th,.compact-table td,.raw-table th,.raw-table td{
    min-width:130px !important;
    white-space:normal !important;
    word-break:normal !important;
    overflow-wrap:normal !important;
    vertical-align:top !important;
  }
  .compact-table th:first-child,.compact-table td:first-child,.raw-table th:first-child,.raw-table td:first-child{min-width:160px !important;}
  .compact-table th:last-child,.compact-table td:last-child,.raw-table th:last-child,.raw-table td:last-child{min-width:220px !important;}
  .repair-actions{display:flex !important;flex-direction:column !important;gap:8px !important;align-items:flex-start !important;min-width:220px !important;}
  .repair-actions form{display:flex !important;flex-direction:column !important;gap:6px !important;width:220px !important;max-width:none !important;}
  .repair-actions select,.repair-actions button{width:220px !important;max-width:none !important;white-space:normal !important;}
  .table-scroll::-webkit-scrollbar,.table-wrap::-webkit-scrollbar,.admin-health-scroll::-webkit-scrollbar,.recent-rolls-scroll::-webkit-scrollbar,.gm-status-scroll::-webkit-scrollbar{height:12px;}
}

/* ===== v2.0.35l campaign quick action buttons ===== */
.campaign-quick-actions {
  margin: 0.75rem 0 1rem;
}
.campaign-quick-actions .button-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
}

/* ===== v2.0.35m readable mobile tables + expandable catalog info ===== */
.catalog-entry-description,
.equipment-info-panel {
  margin: .5rem 0 .75rem;
  padding: .65rem .75rem;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  background: rgba(255,255,255,.035);
  color: var(--muted);
  line-height: 1.35;
}
.equipment-info-panel summary {
  cursor: pointer;
  color: var(--text);
  font-weight: 700;
}
.equipment-info-body ul { margin: .5rem 0 0 1.2rem; padding: 0; }
.equipment-info-body li { margin: .25rem 0; }

.table-scroll,
.table-wrap,
.audit-events-scroll,
.campaign-overview-scroll,
.campaign-roster-scroll,
.campaign-requests-scroll,
.campaign-rules-scroll,
.gm-status-scroll,
.recent-rolls-scroll,
.admin-health-scroll {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior-x: contain !important;
  padding-bottom: .35rem;
}
.table-scroll > table,
.table-wrap > table,
.audit-events-scroll > table,
.campaign-overview-scroll > table,
.campaign-roster-scroll > table,
.campaign-requests-scroll > table,
.campaign-rules-scroll > table,
.gm-status-scroll > table,
.recent-rolls-scroll > table,
.admin-health-scroll > table {
  width: max-content !important;
  max-width: none !important;
  table-layout: auto !important;
}

@media (max-width: 760px) {
  .panel.wide-panel,
  .panel.repair-wide,
  .panel:has(> table),
  .subpanel:has(> table) {
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch !important;
  }
  .compact-table,
  .raw-table,
  .panel > table,
  .subpanel > table {
    min-width: 760px !important;
    width: max-content !important;
    max-width: none !important;
    table-layout: auto !important;
  }
  .audit-events-scroll > table { min-width: 920px !important; }
  .campaign-roster-scroll > table,
  .campaign-requests-scroll > table { min-width: 860px !important; }
  .campaign-rules-scroll > table { min-width: 820px !important; }
  .admin-health-scroll > table { min-width: 980px !important; }
  .recent-rolls-scroll > table { min-width: 760px !important; }
  .compact-table th,
  .compact-table td,
  .raw-table th,
  .raw-table td {
    min-width: 135px !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    vertical-align: top !important;
  }
  .compact-table th:first-child,
  .compact-table td:first-child,
  .raw-table th:first-child,
  .raw-table td:first-child { min-width: 175px !important; }
  .compact-table th:last-child,
  .compact-table td:last-child,
  .raw-table th:last-child,
  .raw-table td:last-child { min-width: 240px !important; }
  .repair-actions,
  .repair-actions form {
    min-width: 240px !important;
    max-width: none !important;
  }
  .repair-actions select,
  .repair-actions button { min-width: 220px !important; }
}


.ruleset-summary {
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px;
  padding: .85rem;
  margin: .85rem 0;
  background: rgba(255,255,255,.035);
}
.ruleset-summary h3 { margin-top: 0; }

/* v2.0.36b Campaign Ruleset Management */
.ruleset-manager { margin-top: 1rem; padding-top: .75rem; border-top: 1px solid rgba(255,255,255,.14); }
.ruleset-manage-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; align-items: start; }
.ruleset-restrict-form { min-width: 0; }
.ruleset-restrict-form h4 { margin: .1rem 0 .5rem; }
.campaign-rules-admin-scroll { margin-top: .5rem; }
@media (max-width: 760px) {
  .ruleset-manage-grid { grid-template-columns: 1fr; }
}

/* v2.0.36i: admin-visible inactive/coming-soon catalog options */
option.inactive-option,
select option.inactive-option {
  color: #9c9c9c;
  font-style: italic;
}
.catalog-name.inactive,
.catalog-name.inactive span,
.catalog-name.inactive small {
  color: #9c9c9c;
}

/* v2.0.37g accessory/equipment card metadata */
.equipment-info-meta { display: grid; grid-template-columns: max-content 1fr; gap: .15rem .75rem; margin: .5rem 0; }
.equipment-info-meta dt { font-weight: 700; opacity: .85; }
.equipment-info-meta dd { margin: 0; opacity: .95; }

/* v2.1.1 Administrative Navigation Cleanup */
.main-character-nav{
  align-items:stretch;
}
.nav-menu{
  position:relative;
  display:inline-block;
}
.nav-menu summary{
  list-style:none;
  cursor:pointer;
  border:1px solid var(--line);
  background:var(--panel-2);
  color:var(--bone);
  border-radius:8px;
  padding:9px 12px;
  user-select:none;
}
.nav-menu summary::-webkit-details-marker{display:none}
.nav-menu summary::after{
  content:' ▾';
  opacity:.8;
}
.nav-menu[open] summary{
  border-color:var(--ember);
}
.nav-menu-panel{
  position:absolute;
  right:0;
  top:calc(100% + 8px);
  z-index:50;
  min-width:240px;
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--panel);
  box-shadow:0 12px 28px color-mix(in srgb,var(--panel-shadow) 35%,transparent);
  padding:10px;
  text-align:left;
}
.nav-menu-section{
  display:grid;
  gap:4px;
  padding:6px;
}
.nav-menu-section + .nav-menu-section{
  border-top:1px solid var(--line);
  margin-top:6px;
  padding-top:10px;
}
.nav-menu-section strong{
  color:var(--ember);
  font-size:.82rem;
  text-transform:uppercase;
  letter-spacing:.04em;
  margin-bottom:3px;
}
.nav-menu-section a{
  color:var(--bone);
  text-decoration:none;
  border-radius:8px;
  padding:8px 9px;
}
.nav-menu-section a:hover{
  background:rgba(255,255,255,.06);
  color:var(--ember);
}
@media(max-width:700px){
  .nav-menu{width:100%}
  .nav-menu summary{display:block;text-align:center}
  .nav-menu-panel{position:static;margin-top:8px;width:auto;box-shadow:none}
}

/* v2.1.5d save validation highlights */
.field-error input, .field-error select, .field-error textarea{
  border-color:var(--bad) !important;
  box-shadow:0 0 0 2px rgba(255,114,114,.18);
}
#clientSaveValidation strong, #serverSaveValidation strong{display:block;margin-bottom:.35rem}

/* v2.1.5f: make locked creation stat roll buttons visibly inactive. */
.stat-roll-buttons button.locked,
.stat-roll-buttons button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}


/* v2.2.0 spell catalog framework */
.spell-card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1rem;margin-top:1rem}
.spell-card{border:1px solid var(--line);border-radius:12px;background:var(--panel-2);padding:1rem}
.spell-card header{display:flex;justify-content:space-between;gap:.75rem;align-items:flex-start;border-bottom:1px solid rgba(255,255,255,.08);padding-bottom:.45rem;margin-bottom:.6rem}
.spell-card h3{margin:0;color:var(--ember)}
.spell-card header p{margin:0;color:var(--muted);font-size:.9rem;text-align:right}
.spell-card-badges{display:flex;flex-wrap:wrap;gap:.35rem;margin:.4rem 0 .65rem}
.spell-school-heading{grid-column:1/-1;margin-top:.5rem}
.spell-admin-grid{align-items:start}
.filter-row{display:flex;flex-wrap:wrap;gap:.7rem;align-items:end;margin:.75rem 0}
.filter-row label{min-width:150px}
.download-row{display:flex;flex-wrap:wrap;gap:.5rem;margin:.75rem 0}


/* v2.2.2e: Spell admin pagination + readability contrast pass */
.spell-list-panel .muted,
.spell-card .muted,
.spell-card header p,
.catalog-list-panel .muted,
.catalog-name small {
  color: var(--bone-dim);
}
.spell-card {
  background: #2f281e;
  border-color: #6f5c35;
}
.spell-card.selected {
  outline: 2px solid var(--ember-2);
  box-shadow: 0 0 0 3px rgba(255,178,122,.16);
}
.spell-card h3 a {
  color: #ffb27a;
  text-decoration-color: rgba(255,178,122,.55);
}
.spell-card h3 a:hover,
.spell-card h3 a:focus {
  color: #ffe0bd;
}
.catalog-badge {
  display: inline-flex;
  align-items: center;
  border: 1px solid #8b7648;
  background: #1b1711;
  color: #f5ead6;
  border-radius: 999px;
  padding: .18rem .48rem;
  font-size: .78rem;
  line-height: 1.2;
  font-weight: 700;
}
.catalog-badge.status-active {
  border-color: #b6903f;
  background: #3a2d12;
  color: #fff0c4;
}
.catalog-badge.status-coming_soon {
  border-color: #74bccd;
  background: #102d35;
  color: #d7f8ff;
}
.catalog-badge.status-inactive,
.catalog-badge.status-deprecated {
  border-color: #b8ae97;
  background: #2a241b;
  color: #ece3ce;
}
.catalog-name.inactive,
.catalog-name.inactive span,
.catalog-name.inactive small {
  color: #d3cab8;
  opacity: 1;
}

/* v2.2.3: Spell Editor UX Overhaul */
.spell-editor-ux .catalog-form-column{display:flex;flex-direction:column;gap:1rem}
.spell-editor-panel{border-color:#7b6539;background:#251f17}
.spell-editor-panel h2{margin-bottom:.25rem}
.spell-editor-form{display:flex;flex-direction:column;gap:.75rem}
.editor-section{border:1px solid #6f5c35;border-radius:12px;background:#1e1a14;overflow:hidden}
.editor-section summary{cursor:pointer;padding:.65rem .85rem;font-weight:800;color:#ffe0bd;background:#342818;border-bottom:1px solid #6f5c35}
.editor-section:not([open]) summary{border-bottom:0}
.editor-section label{display:block;margin:.65rem .85rem;color:#f5ead6;font-weight:700}
.editor-section input,.editor-section select,.editor-section textarea{margin-top:.25rem}
.compact-form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:.15rem .35rem;padding:.15rem 0 .35rem}
.compact-form-grid label{margin:.45rem .85rem}
.spell-editor-savebar{position:sticky;bottom:.5rem;z-index:5;display:flex;gap:.5rem;align-items:center;justify-content:flex-start;border:1px solid #8b7648;background:#16130f;padding:.55rem;border-radius:12px;box-shadow:0 8px 24px rgba(0,0,0,.35)}
.spell-editor-danger-row{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.6rem}
.spell-editor-danger-row form{margin:0}
.spell-editor-form textarea{min-height:5rem}
.spell-editor-form textarea[name="summary"]{min-height:3.3rem}
@media(max-width:760px){.spell-editor-savebar{bottom:0;border-radius:10px}.compact-form-grid{grid-template-columns:1fr}}

/* v2.2.4 Spell entry workflow polish */
.spell-editor-navbar{flex-wrap:wrap}
.spell-editor-navbar .button-link{white-space:nowrap}
.spell-editor-savebar button[name="after_save"]{white-space:nowrap}
@media(max-width:760px){.spell-editor-navbar{align-items:stretch}.spell-editor-navbar .button-link,.spell-editor-savebar button{width:100%;text-align:center}}


/* v2.2.5: Spell admin school-first list workflow */
.school-first-filter label:first-child{min-width:230px}
.spell-school-index{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:.75rem;margin-top:1rem}
.spell-school-tile{display:flex;flex-direction:column;gap:.25rem;border:1px solid #6f5c35;background:#241e16;border-radius:12px;padding:.85rem;text-decoration:none;color:#f5ead6}
.spell-school-tile strong{color:#ffb27a;font-size:1.05rem}
.spell-school-tile span{color:#fff0c4;font-weight:800}
.spell-school-tile small{color:#d3cab8}
.spell-school-tile:hover,.spell-school-tile:focus{border-color:#ffb27a;background:#302518}
.spell-rank-heading{grid-column:1/-1;margin:1rem 0 .1rem;padding:.35rem .6rem;border-left:4px solid #ffb27a;background:#211a12;color:#ffe0bd;border-radius:8px}
.spell-school-single-list{align-items:start}

/* ===== v2.2.6 character sheet spell tab ===== */
.spell-column{grid-column:1/-1}
.character-spell-list{grid-template-columns:repeat(auto-fit,minmax(290px,1fr))}
.character-spell-card.spell-locked{opacity:.58;filter:grayscale(.55);background:#1b1b1b;border-style:dashed}
.character-spell-card.spell-locked h3{color:#cfcfcf}
.character-spell-card.spell-locked .catalog-badge{background:#2b2b2b;color:#d7d7d7;border-color:#555}
.spell-access-ok{background:#14351e!important;color:#d8ffe0!important;border-color:#39a85a!important}
.spell-access-locked{background:#3a3030!important;color:#ffd6d6!important;border-color:#8d5b5b!important}
.character-spell-card.spell-unlocked{border-color:#79643a}
@media(max-width:760px){.character-spell-list{grid-template-columns:1fr}.spell-rank-heading{margin-top:.6rem}}

/* v2.2.7 Developer Diagnostics & Spell Preview */
.spell-preview-toolbar {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  flex-wrap: wrap;
  margin: 0.5rem 0 1rem;
  padding: 0.75rem;
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 12px;
  background: rgba(0,0,0,0.22);
}
.spell-preview-toolbar label {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: wrap;
  font-weight: 700;
}
.spell-preview-toolbar select {
  min-width: 220px;
}
.character-spell-card.spell-hidden-preview {
  opacity: 0.62;
  border-style: dashed;
}
.character-spell-card.spell-inactive-preview {
  opacity: 0.72;
  border-color: rgba(230, 177, 64, 0.75);
}
.character-spell-card .spell-access-locked {
  color: #fff;
  background: rgba(84, 84, 84, 0.95);
}
.character-spell-card .spell-access-ok {
  color: #061a0a;
  background: rgba(127, 232, 145, 0.95);
}

/* v2.2.8 XP Award Caps + Diagnostic Mode */
.xp-diagnostic-panel {
  margin: 1rem 0;
  border-color: rgba(230, 177, 64, 0.65);
  background: rgba(38, 30, 12, 0.65);
}
.xp-diagnostic-panel h2 { margin-top: 0; }
button.danger-button,
.danger-button {
  border-color: rgba(255, 110, 110, 0.8);
  background: rgba(120, 30, 30, 0.8);
  color: #fff;
}


/* ===== v2.3.0f Session & XP workspace layout fix =====
   Keep campaign/session chooser at the top, then place the selected
   session edit form as a normal-width card instead of a full-width wall. */
.grid.gm-grid{
  grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
  align-items:start;
}
.grid.gm-grid > .session-edit-panel{
  grid-column:1 / span 1 !important;
  max-width:720px;
  width:100%;
}
.grid.gm-grid > .session-edit-panel .selected-session-title{
  margin-top:-.35rem;
  margin-bottom:.75rem;
  font-weight:700;
}
@media(max-width:900px){
  .grid.gm-grid{grid-template-columns:1fr !important;}
  .grid.gm-grid > .session-edit-panel{grid-column:1 / -1 !important;max-width:100%;}
}

/* ===== v2.3.1 Session Workspace Consolidation =====
   Replace rigid row-based Session & XP grid with balanced workflow columns.
   Left column owns campaign + create/edit + XP awards. Right column owns
   session list + attendance, eliminating the dead gap below short lists. */
.session-workspace{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:1rem;
  align-items:start;
}
.session-workspace-main,
.session-workspace-side{
  display:flex;
  flex-direction:column;
  gap:1rem;
  min-width:0;
}
.session-workspace-heading{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.75rem;
  flex-wrap:wrap;
}
.session-workspace-heading h2,
.session-workspace-heading h3{margin-bottom:.25rem;}
.session-campaign-picker{margin-bottom:1.25rem;}
.session-ledger-panel{grid-column:1 / -1;}
.session-workspace .selected-session-title{
  margin-top:-.2rem;
  margin-bottom:.75rem;
  font-weight:700;
}
@media(max-width:900px){
  .session-workspace{grid-template-columns:1fr;}
  .session-ledger-panel{grid-column:1;}
}


/* ===== v2.4.0 Workspace UI Standardization =====
   Browser-hosted desktop-app pattern: keep controls compact, let data scroll. */
.workspace-tabs,
.workspace-tab-row{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
  align-items:center;
  margin:.75rem 0 1rem;
}
.workspace-status{
  display:flex;
  flex-wrap:wrap;
  gap:.65rem;
  align-items:baseline;
  border:1px solid var(--line-soft, rgba(255,255,255,.14));
  border-radius:12px;
  padding:.65rem .8rem;
  background:rgba(255,255,255,.035);
  margin:.75rem 0 1rem;
}
.spell-school-selector{
  align-items:end;
}
.spell-school-selector label:first-of-type{
  min-width:min(100%, 320px);
}
.spell-single-school-grid .spell-school-heading{
  grid-column:1 / -1;
  position:sticky;
  top:0;
  z-index:1;
  backdrop-filter: blur(6px);
}
.compact-pagination{
  margin:.35rem 0 1rem;
}
.advancement-workspace{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  gap:1rem;
  align-items:start;
}
.advancement-character-panel,
.advancement-workspace > .panel.wide{
  grid-column:1 / -1;
}
.advancement-workspace .panel{
  min-width:0;
}
@media(max-width:900px){
  .advancement-workspace{grid-template-columns:1fr;}
  .spell-single-school-grid .spell-school-heading{position:static;}
}

/* ===== v2.4.1 UI Flow Compression Pass =====
   Desktop-app compression: reduce scroll caused by unused card space. */
@media (min-width: 1000px){
  .creation-overview-compression{
    display:grid;
    grid-template-columns:minmax(320px, .9fr) minmax(420px, 1.1fr);
    gap:1rem;
    align-items:start;
    margin:14px 0 16px;
  }
  .creation-overview-left,
  .creation-overview-right{
    min-width:0;
  }
  .creation-overview-left .stat-roller,
  .creation-overview-left .derived,
  .creation-overview-right .track-advanced{
    margin-top:0;
  }
  .creation-overview-right{
    background:var(--bg-2);
    border:1px solid var(--line-soft);
    border-radius:12px;
    padding:14px;
  }
  .creation-overview-right h3{margin-top:0;}
  .creation-overview-right .track-row{
    grid-template-columns:90px 1fr auto;
    gap:10px;
  }
}

/* Campaigns: compact paginated list and let roster claim the lower-left gap. */
@media (min-width: 1000px){
  body .grid.gm-grid > .campaign-roster-panel{
    grid-column:1 / span 1 !important;
  }
  body .grid.gm-grid > .campaign-detail-panel{
    grid-column:2 / span 1 !important;
  }
  body .grid.gm-grid > .wide-panel{
    grid-column:1 / -1;
  }
  .campaign-overview-scroll{max-height:300px;}
}

/* Advancement: fixed two-column workspace. Character/context stays on the left;
   the four spend cards occupy a dense right-column grid. */
@media (min-width: 1050px){
  .advancement-workspace{
    grid-template-columns:minmax(300px, .75fr) minmax(520px, 1.25fr) !important;
  }
  .advancement-character-panel{
    grid-column:1 / span 1 !important;
  }
  .advancement-action-panel{
    grid-column:2 / span 1;
  }
  .advancement-workspace > .panel.wide{
    grid-column:1 / -1 !important;
  }
}

/* User Admin: shorter, paginated, card-like existing-user management. */
.user-admin-existing .pagination{
  margin:.35rem 0 .75rem;
}
.user-admin-existing .user-row{
  padding:10px 12px !important;
  margin-bottom:10px !important;
}
@media (min-width: 1100px){
  body .user-admin-existing .user-row{
    grid-template-columns:minmax(130px,.7fr) minmax(170px,1fr) minmax(100px,.45fr) minmax(220px,1fr) auto !important;
    align-items:end !important;
  }
  body .user-admin-existing .user-row .inline{
    white-space:normal !important;
  }
  body .user-admin-existing .user-row small{
    grid-column:1 / -1 !important;
    font-size:.8rem;
  }
}

/* v2.4.2 Campaign Workspace Foundation */
.campaign-workspace-layout{display:grid;grid-template-columns:minmax(280px,380px) minmax(0,1fr);gap:1rem;align-items:start}.campaign-workspace-main{display:flex;flex-direction:column;gap:1rem;min-width:0}.campaign-context-row{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;flex-wrap:wrap}.campaign-context-actions{justify-content:flex-end}.campaign-workspace-tabs{margin-top:.75rem}.workspace-tabs{display:flex;flex-wrap:wrap;gap:.45rem}.workspace-tab{display:inline-flex;align-items:center;justify-content:center;padding:.42rem .7rem;border:1px solid rgba(255,255,255,.18);border-radius:999px;background:rgba(255,255,255,.055);color:var(--text);text-decoration:none;font-size:.92rem}.workspace-tab:hover{background:rgba(255,255,255,.1)}.workspace-tab.active{background:rgba(255,209,102,.18);border-color:rgba(255,209,102,.55);color:#ffe9a6}.campaign-tab-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,.75fr);gap:1rem;align-items:start}.campaign-list-panel .pagination{margin:.5rem 0}.campaign-create-details{margin:.5rem 0 .75rem;border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:.6rem;background:rgba(255,255,255,.035)}.campaign-create-details>summary{cursor:pointer;font-weight:700}.compact-form textarea{min-height:4.2rem}.campaign-kpi-grid{grid-template-columns:repeat(auto-fit,minmax(120px,1fr))}.card-head-row{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;flex-wrap:wrap}.campaign-rules-panel .ruleset-manager{margin-top:1rem}.campaign-overview-scroll{max-height:470px}
@media(max-width:900px){.campaign-workspace-layout,.campaign-tab-grid{grid-template-columns:1fr}.campaign-context-actions{justify-content:flex-start}.workspace-tab{flex:1 1 auto}}


/* ===== v2.4.3 Campaign Sessions Workspace ===== */
.campaign-session-workspace{
  display:grid;
  grid-template-columns:minmax(260px,340px) minmax(0,1fr);
  gap:1rem;
  align-items:start;
}
.campaign-session-workspace .campaign-attendance-panel{
  grid-column:1 / -1;
}
.campaign-session-list-scroll{
  max-height:420px;
  overflow:auto;
}
.attendance-check-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:.35rem .75rem;
  margin:.5rem 0 .75rem;
}
.campaign-xp-panel .campaign-kpi-grid{
  margin:.5rem 0 1rem;
}
@media(max-width:900px){
  .campaign-session-workspace{grid-template-columns:1fr;}
  .campaign-session-workspace .campaign-attendance-panel{grid-column:auto;}
}

/* ===== v2.4.3b Campaign Sessions List Balanced Height ===== */
.campaign-session-list-panel{
  min-height: 510px;
  max-height: 510px;
  display:flex;
  flex-direction:column;
}
.campaign-session-list-panel .card-head-row{
  flex:0 0 auto;
}
.campaign-session-list-scroll{
  flex:1 1 auto;
  max-height:none !important;
  overflow-y:auto;
  overflow-x:hidden;
  scrollbar-gutter: stable;
}
.campaign-session-table{
  width:100%;
  table-layout:fixed;
}
.campaign-session-table th:nth-child(1),
.campaign-session-table td:nth-child(1){width:30%; white-space:nowrap;}
.campaign-session-table th:nth-child(2),
.campaign-session-table td:nth-child(2){width:56%; overflow:hidden; text-overflow:ellipsis;}
.campaign-session-table th:nth-child(3),
.campaign-session-table td:nth-child(3){width:14%; text-align:right; white-space:nowrap;}

.campaign-session-list-panel .muted{
  margin-bottom:.7rem;
}
.campaign-session-table th,
.campaign-session-table td{
  padding:.42rem .45rem;
}

.session-pagination{
  flex:0 0 auto;
  margin-top:.6rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.5rem;
}
.session-pagination .button-link{
  padding:.35rem .55rem;
}
@media(max-width:900px){
  .campaign-session-list-panel{min-height:auto; max-height:none;}
  .campaign-session-list-scroll{overflow:visible;}
}

/* ===== v2.4.4 Campaign XP Workspace ===== */
.campaign-session-list-scroll,
.campaign-session-list-scroll > table,
.campaign-session-table{
  max-width:100%;
  box-sizing:border-box;
}
.campaign-session-list-panel{
  overflow:hidden;
}
.campaign-session-list-scroll{
  padding-right:0;
}
.campaign-xp-workspace{
  display:grid;
  grid-template-columns:minmax(280px,360px) minmax(0,1fr);
  gap:1rem;
  align-items:start;
}
.campaign-xp-session-panel,
.campaign-xp-status-panel,
.campaign-xp-totals-panel{
  min-width:0;
}
.campaign-xp-award-panel,
.campaign-xp-ledger-panel{
  min-width:0;
}
.campaign-xp-ledger-panel{
  grid-column:1 / -1;
}
.selected-context-card{
  border:1px solid rgba(255,255,255,.12);
  border-radius:12px;
  padding:.7rem .85rem;
  background:rgba(255,255,255,.04);
  margin-top:.55rem;
}
.campaign-xp-session-select{
  margin-bottom:.4rem;
}
.campaign-xp-status-scroll{
  max-height:330px;
  overflow:auto;
  overflow-x:hidden;
}
.campaign-xp-ledger-scroll{
  max-height:520px;
  overflow:auto;
}
.campaign-xp-ledger-scroll table,
.campaign-xp-status-scroll table{
  width:100%;
}
.campaign-xp-ledger-scroll td,
.campaign-xp-ledger-scroll th,
.campaign-xp-status-scroll td,
.campaign-xp-status-scroll th{
  box-sizing:border-box;
}
@media(max-width:900px){
  .campaign-xp-workspace{grid-template-columns:1fr;}
  .campaign-xp-ledger-panel{grid-column:auto;}
}

/* v2.4.5 Campaign Advancement Workspace */
.campaign-advancement-workspace{display:grid;grid-template-columns:minmax(260px,.75fr) minmax(360px,1.05fr) minmax(420px,1.35fr);gap:1rem;align-items:start;}
.campaign-advancement-history{grid-column:1 / -1;}
.campaign-advancement-roster .table-scroll{max-height:420px;overflow:auto;overflow-x:hidden;}
.selected-row{background:rgba(255,144,86,.10);}
.advancement-action-grid{display:grid;grid-template-columns:repeat(2,minmax(240px,1fr));gap:1rem;align-items:start;}
.mini-form{border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:.85rem;background:rgba(0,0,0,.12);}
.mini-form h3{margin-top:0;}
@media (max-width: 1100px){.campaign-advancement-workspace{grid-template-columns:1fr;}.campaign-advancement-history{grid-column:auto;}.advancement-action-grid{grid-template-columns:1fr;}}

/* ===== v2.4.6 Campaign Domain Completion + Notes Foundation ===== */
.campaign-attendance-panel,
.full-width-panel{grid-column:1 / -1;}
.campaign-note-preview,
.note-snippet{
  border:1px solid rgba(255,255,255,.12);
  border-radius:12px;
  padding:.75rem .9rem;
  background:rgba(255,255,255,.035);
  margin:.75rem 0;
}
.gm-only,
.gm-note-field{
  border-color:rgba(255,209,102,.25);
  background:rgba(255,209,102,.045);
}
.campaign-notes-workspace{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:1rem;
  align-items:start;
}
.campaign-notes-workspace .full-width-panel{grid-column:1 / -1;}
.note-reader{white-space:pre-wrap;min-height:10rem;border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:1rem;background:rgba(0,0,0,.12);}
.session-note-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:.75rem;}
.note-snippet h3{font-size:1rem;margin:.1rem 0 .35rem;}
.character-notes-grid{display:grid;grid-template-columns:repeat(2,minmax(260px,1fr));gap:1rem;align-items:start;}
.character-notes-grid label{margin-bottom:0;}
.character-notes-grid .gm-note-field{padding:.75rem;border:1px solid rgba(255,209,102,.25);border-radius:12px;}
.campaign-xp-workspace{grid-auto-flow:row;}
.campaign-xp-status-panel,.campaign-xp-totals-panel{align-self:stretch;}
.campaign-xp-totals-panel .kpi-grid{grid-template-columns:repeat(auto-fit,minmax(120px,1fr));}
@media(max-width:900px){
  .campaign-notes-workspace,.character-notes-grid{grid-template-columns:1fr;}
  .campaign-notes-workspace .full-width-panel{grid-column:auto;}
}

/* v2.4.7a integration cleanup */
.kpi{display:flex;flex-direction:column;gap:.18rem;align-items:flex-start;justify-content:center;min-width:0;}
.kpi strong{display:block;line-height:1.15;}
.kpi span{display:block;line-height:1.25;word-break:break-word;}
.campaign-xp-totals-panel .kpi strong{font-size:1.2rem;}
.campaign-context-actions .pill{display:inline-flex;align-items:center;border:1px solid rgba(255,255,255,.18);border-radius:999px;padding:.42rem .7rem;background:rgba(255,255,255,.055);}

/* v2.4.7c advancement summary compression */
.adv-summary-compact{
  display:grid;
  gap:.35rem;
  margin:.35rem 0 .85rem;
  font-size:1rem;
  line-height:1.35;
}
.adv-summary-compact strong{color:var(--text);font-weight:700;}
.adv-summary-name{margin:.35rem 0 .75rem;}
.campaign-advancement-summary .card-head-row{margin-bottom:.25rem;}


/* ===== v2.5.0 Workspace Framework Standardization =====
   UI role classes. A card's height is determined by its workspace role, not by
   record count. Navigators remain stable and scroll/page internally. */
:root{
  --as-card-xs: 7rem;
  --as-card-s: 12rem;
  --as-card-m: 22rem;
  --as-card-l: 34rem;
  --as-card-xl: 46rem;
}
.workspace-card-xs,
.workspace-card-s,
.workspace-card-m,
.workspace-card-l,
.workspace-card-xl{
  min-width:0;
  box-sizing:border-box;
}
.workspace-card-xs{min-height:var(--as-card-xs);}
.workspace-card-s{min-height:var(--as-card-s);}
.workspace-card-m{min-height:var(--as-card-m);}
.workspace-card-l{min-height:var(--as-card-l);}
.workspace-card-xl{min-height:var(--as-card-xl);}

/* Fixed-height navigator cards: selected lists should never move the rest of the page. */
.navigator-bounded,
.navigator-large{
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
.navigator-bounded{height:var(--as-card-m); max-height:var(--as-card-m);}
.navigator-large{height:var(--as-card-l); max-height:var(--as-card-l);}
.navigator-bounded .card-head-row,
.navigator-large .card-head-row{
  flex:0 0 auto;
}
.navigator-bounded .table-scroll,
.navigator-large .table-scroll,
.navigator-bounded .campaign-session-list-scroll,
.navigator-large .campaign-session-list-scroll,
.navigator-bounded .campaign-xp-status-scroll,
.navigator-large .campaign-xp-status-scroll{
  flex:1 1 auto;
  min-height:0;
  max-height:none !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  scrollbar-gutter:stable;
}
.navigator-bounded table,
.navigator-large table{
  width:100%;
  max-width:100%;
  box-sizing:border-box;
}

.summary-card{overflow:hidden;}
.editor-card,.ledger-card,.notes-card{min-width:0;}
.ledger-card .table-scroll,
.notes-card textarea{
  max-width:100%;
}

/* Campaign Domain v2.5.0: bounded campaign rosters are capped at 8, so they use internal scrolling instead of pagination. */
.campaign-advancement-roster.navigator-bounded .table-scroll{
  padding-right:.15rem;
}
.campaign-advancement-roster.navigator-bounded td,
.campaign-advancement-roster.navigator-bounded th{
  padding:.42rem .45rem;
}

@media(max-width:900px){
  .navigator-bounded,
  .navigator-large{
    height:auto;
    max-height:none;
  }
  .navigator-bounded .table-scroll,
  .navigator-large .table-scroll,
  .navigator-bounded .campaign-session-list-scroll,
  .navigator-large .campaign-session-list-scroll{
    overflow:visible !important;
  }
}

/* ===== v2.5.2 Header Compression & Branding =====
   The banner image is pure branding. Application title/version and runtime
   context are generated below the image as compact text lines. */
.site-banner.site-banner-compact{
  display:block !important;
  width:40% !important;
  max-width:40% !important;
  min-width:0 !important;
  box-sizing:border-box !important;
  margin:0 0 12px !important;
  padding:0 0 8px !important;
  border:1px solid var(--line) !important;
  border-radius:14px !important;
  background:linear-gradient(180deg,rgba(19,16,12,.96),rgba(12,10,8,.98)) !important;
  box-shadow:0 8px 26px color-mix(in srgb,var(--panel-shadow) 28%,transparent) !important;
  overflow:hidden !important;
}
.site-banner.site-banner-compact .site-banner-image-link{
  display:block !important;
  width:40% !important;
  max-width:none !important;
  min-width:0 !important;
  margin:0 !important;
  padding:0 !important;
  line-height:0 !important;
  border-radius:0 !important;
  background:#050403 !important;
  overflow:hidden !important;
}
.site-banner.site-banner-compact .site-banner-image-link img{
  display:block !important;
  width:40% !important;
  max-width:40% !important;
  height:clamp(120px, 15vw, 205px) !important;
  max-height:205px !important;
  object-fit:cover !important;
  object-position:center center !important;
}
.site-banner.site-banner-compact .site-banner-app-line,
.site-banner.site-banner-compact .site-banner-status-line{
  width:40% !important;
  max-width:40% !important;
  min-width:0 !important;
  box-sizing:border-box !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  flex-wrap:wrap !important;
  gap:8px 14px !important;
  padding:6px 14px 0 !important;
  text-align:center !important;
  line-height:1.25 !important;
}
.site-banner.site-banner-compact .site-banner-app-line{
  color:var(--bone) !important;
  font-family:var(--display) !important;
  font-size:clamp(18px, 1.45vw, 25px) !important;
}
.site-banner.site-banner-compact .site-banner-app-line strong{
  color:var(--bone) !important;
  font-weight:900 !important;
}
.site-banner.site-banner-compact .site-banner-app-line span{
  color:var(--ember-2) !important;
  font-family:var(--mono) !important;
  font-size:.9em !important;
  font-weight:900 !important;
}
.site-banner.site-banner-compact .site-banner-app-line span::before{
  content:"•";
  color:var(--muted);
  font-family:var(--body);
  margin-right:12px;
}
.site-banner.site-banner-compact .site-banner-status-line{
  color:var(--muted) !important;
  font-size:clamp(13px, 1vw, 16px) !important;
  padding-top:4px !important;
}
.site-banner.site-banner-compact .site-banner-status-line span{
  display:inline-flex !important;
  align-items:center !important;
  gap:4px !important;
  min-width:0 !important;
  max-width:40% !important;
  overflow-wrap:anywhere !important;
}
.site-banner.site-banner-compact .site-banner-status-line span + span::before{
  content:"•";
  color:var(--line-bright, var(--gold));
  margin-right:10px;
}
.site-banner.site-banner-compact .site-banner-status-line strong{
  color:var(--gold) !important;
  font-weight:800 !important;
}
.site-banner.site-banner-compact .site-banner-row,
.site-banner.site-banner-compact .site-banner-title,
.site-banner.site-banner-compact .session-badge,
.site-banner.site-banner-compact .session-badge.session-badge-huge{
  display:none !important;
}
@media(max-width:760px){
  .site-banner.site-banner-compact{
    border-radius:10px !important;
    margin-bottom:10px !important;
  }
  .site-banner.site-banner-compact .site-banner-image-link img{
    height:clamp(92px, 26vw, 145px) !important;
    max-height:145px !important;
    object-position:center center !important;
  }
  .site-banner.site-banner-compact .site-banner-app-line,
  .site-banner.site-banner-compact .site-banner-status-line{
    padding-left:8px !important;
    padding-right:8px !important;
  }
  .site-banner.site-banner-compact .site-banner-status-line{
    justify-content:flex-start !important;
    text-align:left !important;
  }
}


/* ===== v2.5.2b Header Centering + No-Crop Banner Fix =====
   Keep the restored banner artwork intact, center it, and keep generated
   title/version/status lines on single centered rows on desktop. */
.site-banner.site-banner-compact{
  display:block !important;
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  margin:0 0 12px !important;
  padding:0 0 8px !important;
  box-sizing:border-box !important;
  text-align:center !important;
  overflow:hidden !important;
}
.site-banner.site-banner-compact .site-banner-image-link{
  display:block !important;
  width:40% !important;
  max-width:40% !important;
  min-width:0 !important;
  margin:0 auto !important;
  padding:0 !important;
  line-height:0 !important;
  background:#050403 !important;
  overflow:visible !important;
}
.site-banner.site-banner-compact .site-banner-image-link img{
  display:block !important;
  width:100% !important;
  max-width:100% !important;
  height:auto !important;
  max-height:none !important;
  object-fit:contain !important;
  object-position:center center !important;
  margin:0 auto !important;
}
.site-banner.site-banner-compact .site-banner-app-line,
.site-banner.site-banner-compact .site-banner-status-line{
  width:100% !important;
  max-width:100% !important;
  margin:0 auto !important;
  box-sizing:border-box !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  flex-wrap:nowrap !important;
  gap:8px 14px !important;
  padding:6px 14px 0 !important;
  text-align:center !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}
.site-banner.site-banner-compact .site-banner-app-line strong,
.site-banner.site-banner-compact .site-banner-app-line span,
.site-banner.site-banner-compact .site-banner-status-line span{
  white-space:nowrap !important;
  overflow:visible !important;
  text-overflow:clip !important;
  max-width:none !important;
}
.site-banner.site-banner-compact .site-banner-status-line{
  justify-content:center !important;
}
@media(max-width:760px){
  .site-banner.site-banner-compact .site-banner-image-link{
    width:100% !important;
    max-width:100% !important;
  }
  .site-banner.site-banner-compact .site-banner-app-line,
  .site-banner.site-banner-compact .site-banner-status-line{
    flex-wrap:wrap !important;
    white-space:normal !important;
  }
}


.site-banner-app-line{
 text-align:center;
 white-space:nowrap;
 margin-top:8px;
}
.site-banner-status-line{
 text-align:center;
 white-space:nowrap;
 font-size:.95rem;
 margin-top:4px;
}
.site-banner-status-line span{display:inline-block;margin:0 .5rem;}

/* ===== v2.6.0 Character Workspace Foundation ===== */
.character-workspace-tabs{
  justify-content:center;
  gap:.45rem;
  flex-wrap:wrap;
}
.character-overview-grid,
.character-history-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:12px;
  margin:.85rem 0 1rem;
}
.character-overview-grid .workspace-card,
.character-history-grid .workspace-card{
  border:1px solid rgba(255,255,255,.14);
  border-radius:12px;
  padding:.8rem;
  background:rgba(255,255,255,.035);
  box-sizing:border-box;
}
.character-overview-grid .workspace-card strong,
.character-history-grid .workspace-card strong{
  display:block;
  color:var(--muted);
  font-size:.88rem;
  margin-bottom:.35rem;
}
.character-overview-grid .workspace-card span{
  display:block;
  font-size:1.35rem;
  font-weight:800;
  color:var(--text);
}
.workspace-card.card-s{min-height:var(--as-card-s);}
.workspace-card.card-m{min-height:var(--as-card-m);}
.character-ability-editors.single-editor{
  grid-template-columns:minmax(260px,1fr);
}
@media (max-width: 760px){
  .character-overview-grid,
  .character-history-grid{grid-template-columns:1fr;}
}


/* ===== v2.6.0a CSS/Layout Rescue =====
   Fixes v2.6.0 regression where late hosted hardening rules forced core editors/cards to 40% width.
   This restores normal full-width form controls, prevents global horizontal overflow, and keeps scoped
   Local Expert / Professional inputs usable on desktop and mobile. */
html, body{
  width:100%;
  max-width:100%;
  overflow-x:hidden;
}
.wrap,
.panel,
.subpanel,
.sheet-column,
.play-column,
.roller-column,
.character-tab-layout,
.character-tab-panel,
.sheet-tab-section,
.character-ability-editors,
.ability-editor-block,
.compact-editor,
.compact-row,
.compact-body,
.scoped-catalog-add,
.existing-scope-resolver,
.scope-resolver-card,
.identity-fields,
.character-overview-identity,
.stats,
.two,
.grid{
  min-width:0 !important;
  max-width:100% !important;
  box-sizing:border-box !important;
}
.character-ability-editors,
body .character-ability-editors{
  display:flex !important;
  flex-direction:column !important;
  gap:18px !important;
  width:100% !important;
  max-width:100% !important;
}
body .compact-editor,
body .compact-row,
body .compact-body,
body .compact-row.needs-scope-row .compact-body,
body .scope-resolver-card,
body .existing-scope-resolver.scope-resolver-card,
body .scope-resolver-label,
body .existing-scope-resolver.scope-resolver-card .scope-resolver-label{
  width:100% !important;
  max-width:100% !important;
}
body .compact-body{
  display:grid;
  gap:8px;
  overflow:visible !important;
}
body .compact-body input,
body .compact-body select,
body .compact-body textarea,
body .compact-body button,
body .existing-scope-resolver.scope-resolver-card input,
body .existing-scope-resolver.scope-resolver-card button,
.scope-input,
.scoped-catalog-add input,
.scoped-catalog-add select,
.catalog-add input,
.catalog-add select,
.identity-fields input,
.character-overview-identity input,
.panel input,
.panel select,
.panel textarea{
  max-width:100% !important;
  box-sizing:border-box !important;
}
body .compact-body input,
body .compact-body select,
body .compact-body textarea,
body .existing-scope-resolver.scope-resolver-card input,
.scope-input,
.identity-fields input,
.character-overview-identity input{
  width:100% !important;
  min-width:0 !important;
}
body .compact-body button,
body .existing-scope-resolver.scope-resolver-card button{
  width:auto !important;
  max-width:100% !important;
  min-width:120px !important;
  white-space:normal !important;
}
.scoped-catalog-add,
body .scoped-catalog-add{
  display:grid !important;
  grid-template-columns:minmax(220px,1.2fr) minmax(220px,1fr) auto !important;
  gap:8px !important;
  align-items:start !important;
}
.scoped-catalog-add .scope-hint{
  grid-column:1 / -1;
}
.existing-scope-resolver,
body .existing-scope-resolver,
body .existing-scope-resolver.scope-resolver-card{
  display:grid !important;
  grid-template-columns:minmax(180px,1fr) minmax(220px,1fr) auto !important;
  gap:8px !important;
  align-items:center !important;
  overflow:visible !important;
}
.section-tab-bar,
.character-workspace-tabs{
  max-width:100%;
  overflow:visible;
}
.character-workspace-tabs button,
.section-tab-bar button,
button{
  max-width:100%;
}
.character-tab-panel.tab-hidden,
.sheet-tab-section.tab-hidden{
  display:none !important;
}
.sheet-tab-section.active{
  display:block !important;
}
@media(max-width:900px){
  .grid,
  .character-tab-layout{
    grid-template-columns:minmax(0,1fr) !important;
  }
  .roller-column{
    position:static;
    max-height:none;
    overflow:visible;
  }
}
@media(max-width:760px){
  .wrap{padding:16px 10px 48px;}
  .panel{padding:14px;}
  .scoped-catalog-add,
  body .scoped-catalog-add,
  .existing-scope-resolver,
  body .existing-scope-resolver,
  body .existing-scope-resolver.scope-resolver-card{
    grid-template-columns:minmax(0,1fr) !important;
  }
  body .existing-scope-resolver.scope-resolver-card button,
  body .compact-body button,
  .catalog-add button,
  .scoped-catalog-add button{
    width:100% !important;
  }
  .section-tab-bar button{
    flex:1 1 calc(50% - 6px);
    padding:8px 6px;
    font-size:13px;
  }
}

/* ===== v2.6.0b CSS/Layout Rescue Follow-up =====
   Tightens creation-problem direction buttons so all six fit on one desktop row,
   and widens/normalizes scoped Skill/Talent correction controls after the v2.6.0a rescue pass. */
.character-ability-editors,
body .character-ability-editors,
.ability-editor-block,
body .ability-editor-block,
.compact-editor,
body .compact-editor,
.compact-row,
body .compact-row,
.compact-body,
body .compact-body{
  width:100% !important;
  max-width:760px !important;
  min-width:0 !important;
  box-sizing:border-box !important;
}

.problem-rolls{
  display:flex !important;
  flex-wrap:nowrap !important;
  gap:4px !important;
  align-items:center !important;
  max-width:760px !important;
  width:100% !important;
  overflow:visible !important;
}
.problem-roll-btn,
button.tiny.problem-roll-btn{
  flex:0 0 auto !important;
  width:auto !important;
  min-width:0 !important;
  max-width:none !important;
  padding:3px 8px !important;
  font-size:12px !important;
  line-height:1.15 !important;
  white-space:nowrap !important;
  text-align:center !important;
}
.problem-select{
  max-width:720px !important;
}

body .compact-row.open,
body .compact-row.needs-scope-row,
body .compact-row.needs-scope-row .compact-body{
  overflow:visible !important;
}
body .compact-row.needs-scope-row .compact-body{
  display:block !important;
  width:100% !important;
  max-width:760px !important;
  padding:10px !important;
}
body .existing-scope-resolver,
body .existing-scope-resolver.scope-resolver-card,
body .scope-resolver-card{
  display:grid !important;
  grid-template-columns:minmax(190px,260px) minmax(240px,1fr) max-content !important;
  gap:10px !important;
  align-items:center !important;
  width:100% !important;
  max-width:760px !important;
  min-width:0 !important;
  box-sizing:border-box !important;
  overflow:visible !important;
  padding:10px !important;
}
body .scope-resolver-label,
body .existing-scope-resolver.scope-resolver-card .scope-resolver-label{
  width:auto !important;
  max-width:none !important;
  margin:0 !important;
  padding:8px 10px !important;
  box-sizing:border-box !important;
  white-space:normal !important;
  line-height:1.35 !important;
}
body .existing-scope-resolver input,
body .existing-scope-resolver.scope-resolver-card input,
body .scope-resolver-card input{
  display:block !important;
  width:100% !important;
  min-width:220px !important;
  max-width:100% !important;
  margin:0 !important;
  box-sizing:border-box !important;
}
body .existing-scope-resolver button,
body .existing-scope-resolver.scope-resolver-card button,
body .scope-resolver-card button{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:auto !important;
  min-width:130px !important;
  max-width:none !important;
  margin:0 !important;
  white-space:nowrap !important;
  padding:9px 14px !important;
}
@media(max-width:760px){
  .character-ability-editors,
  body .character-ability-editors,
  .ability-editor-block,
  body .ability-editor-block,
  .compact-editor,
  body .compact-editor,
  .compact-row,
  body .compact-row,
  .compact-body,
  body .compact-body{
    max-width:100% !important;
  }
  .problem-rolls{
    flex-wrap:wrap !important;
    max-width:100% !important;
  }
  .problem-roll-btn,
  button.tiny.problem-roll-btn{
    flex:0 0 auto !important;
    padding:4px 7px !important;
  }
  body .existing-scope-resolver,
  body .existing-scope-resolver.scope-resolver-card,
  body .scope-resolver-card{
    grid-template-columns:minmax(0,1fr) !important;
    max-width:100% !important;
  }
  body .existing-scope-resolver input,
  body .existing-scope-resolver.scope-resolver-card input,
  body .scope-resolver-card input,
  body .existing-scope-resolver button,
  body .existing-scope-resolver.scope-resolver-card button,
  body .scope-resolver-card button{
    width:100% !important;
    min-width:0 !important;
  }
}


/* ===== v2.6.0c Full-Width Single-Row Navigation Rescue =====
   Makes the primary page nav and Character Workspace tabs consume the available row width
   instead of piling/wrapping early. Also strips padding from creation-problem direction
   buttons so all six fit cleanly on one desktop row. */
.top{
  align-items:stretch !important;
}
.top .user-nav,
.user-nav.main-character-nav{
  display:flex !important;
  flex-wrap:nowrap !important;
  align-items:stretch !important;
  justify-content:space-between !important;
  gap:6px !important;
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  box-sizing:border-box !important;
  overflow:visible !important;
}
.user-nav.main-character-nav > span{
  flex:0 1 auto !important;
  min-width:0 !important;
  max-width:210px !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
  align-self:center !important;
}
.user-nav.main-character-nav > .button-link,
.user-nav.main-character-nav > .nav-menu,
.user-nav.main-character-nav > .admin-nav-menu{
  flex:1 1 0 !important;
  min-width:0 !important;
  max-width:none !important;
  box-sizing:border-box !important;
}
.user-nav.main-character-nav .button-link,
.user-nav.main-character-nav .nav-menu > summary,
.user-nav.main-character-nav .admin-nav-menu > summary{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:100% !important;
  min-width:0 !important;
  box-sizing:border-box !important;
  padding:7px 8px !important;
  font-size:14px !important;
  line-height:1.15 !important;
  text-align:center !important;
  white-space:nowrap !important;
}
.user-nav.main-character-nav .nav-menu-panel{
  left:auto !important;
  right:0 !important;
  min-width:320px !important;
}
.section-tab-bar.character-workspace-tabs,
.character-workspace-tabs{
  display:flex !important;
  flex-wrap:nowrap !important;
  justify-content:space-between !important;
  align-items:stretch !important;
  gap:6px !important;
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  overflow:visible !important;
  box-sizing:border-box !important;
}
.section-tab-bar.character-workspace-tabs button,
.character-workspace-tabs button{
  flex:1 1 0 !important;
  min-width:0 !important;
  max-width:none !important;
  width:auto !important;
  padding:8px 8px !important;
  font-size:14px !important;
  line-height:1.15 !important;
  white-space:nowrap !important;
  text-align:center !important;
  box-sizing:border-box !important;
}
.character-ability-editors,
body .character-ability-editors,
.ability-editor-block,
body .ability-editor-block,
.compact-editor,
body .compact-editor,
.compact-row,
body .compact-row,
.compact-body,
body .compact-body{
  max-width:100% !important;
}
.problem-rolls{
  display:flex !important;
  flex-wrap:nowrap !important;
  justify-content:flex-start !important;
  gap:3px !important;
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  overflow:visible !important;
}
.problem-roll-btn,
button.tiny.problem-roll-btn{
  flex:0 1 auto !important;
  min-width:0 !important;
  width:auto !important;
  padding:2px 5px !important;
  font-size:11.5px !important;
  line-height:1.1 !important;
  white-space:nowrap !important;
  letter-spacing:0 !important;
}
.problem-select{
  max-width:100% !important;
}
@media(max-width:900px){
  .top .user-nav,
  .user-nav.main-character-nav,
  .section-tab-bar.character-workspace-tabs,
  .character-workspace-tabs{
    overflow-x:auto !important;
    overflow-y:visible !important;
    -webkit-overflow-scrolling:touch;
  }
  .user-nav.main-character-nav > .button-link,
  .user-nav.main-character-nav > .nav-menu,
  .user-nav.main-character-nav > .admin-nav-menu{
    flex:0 0 auto !important;
  }
  .section-tab-bar.character-workspace-tabs button,
  .character-workspace-tabs button{
    flex:0 0 auto !important;
    padding:8px 10px !important;
  }
  .problem-rolls{
    flex-wrap:wrap !important;
  }
}


/* ===== v2.6.0d Mobile Breakpoint + Form Row Alignment Patch =====
   Rescues mobile from legacy 40% hard-containment rules, aligns the top import/export row
   to a shared baseline, and gives scoped Skill/Talent resolver controls enough width to save. */
html,
body{
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  overflow-x:hidden !important;
}
.wrap,
.site-banner,
.site-banner-row,
.site-banner-title,
.site-banner-image-link,
.site-banner-image-link img,
.site-banner .session-badge,
.site-banner .session-badge.session-badge-huge,
.site-banner .session-login-line,
.site-banner .session-login-label,
.site-banner .session-username-inline{
  max-width:100% !important;
  min-width:0 !important;
  box-sizing:border-box !important;
}
.wrap{
  width:100% !important;
}
.site-banner{
  width:100% !important;
  overflow:hidden !important;
}
.site-banner-image-link{
  width:100% !important;
  justify-self:center !important;
}
.site-banner-image-link img{
  display:block !important;
  width:min(720px,100%) !important;
  max-width:100% !important;
  height:auto !important;
  margin:0 auto !important;
}
.site-banner-row{
  width:100% !important;
}
.site-banner .session-badge,
.site-banner .session-badge.session-badge-huge{
  width:100% !important;
  overflow-wrap:anywhere !important;
  word-break:normal !important;
}
.site-banner .session-login-line,
.site-banner .session-login-label,
.site-banner .session-username-inline{
  width:auto !important;
  max-width:100% !important;
  overflow-wrap:anywhere !important;
  word-break:break-word !important;
  white-space:normal !important;
}

/* Header/control strip: align different-height controls by their bottoms, not their centers. */
.compact-top{
  display:grid !important;
  grid-template-columns:minmax(280px,.85fr) minmax(0,2.6fr) !important;
  grid-template-areas:
    "picker backups"
    "nav nav" !important;
  gap:12px 14px !important;
  align-items:end !important;
  width:100% !important;
  max-width:100% !important;
}
.compact-top .pick{
  grid-area:picker !important;
  margin:0 !important;
  align-self:end !important;
  width:100% !important;
  max-width:100% !important;
}
.compact-top .pick select{
  width:100% !important;
  max-width:100% !important;
}
.compact-top .backup-actions{
  grid-area:backups !important;
  display:flex !important;
  align-items:flex-end !important;
  justify-content:flex-end !important;
  gap:10px !important;
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
}
.compact-top .backup-actions > .button-link,
.compact-top .backup-actions > a.button-link,
.compact-top .backup-actions button{
  align-self:end !important;
  white-space:nowrap !important;
}
.compact-top .import-form{
  display:grid !important;
  grid-template-columns:minmax(190px,.9fr) minmax(210px,.9fr) minmax(260px,1.15fr) max-content !important;
  gap:10px !important;
  align-items:end !important;
  margin:0 !important;
  min-width:0 !important;
  max-width:100% !important;
}
.compact-top .import-form label{
  margin:0 !important;
  align-self:end !important;
  min-width:0 !important;
}
.compact-top .import-form input[type="text"],
.compact-top .import-form input[type="file"]{
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
}
.compact-top .import-form .checkline{
  display:flex !important;
  flex-direction:row !important;
  align-items:end !important;
  gap:8px !important;
  line-height:1.2 !important;
  padding-bottom:6px !important;
}
.compact-top .import-form .checkline input{
  flex:0 0 auto !important;
}
.compact-top .user-nav.main-character-nav{
  grid-area:nav !important;
}

/* Skill/Talent scope resolver: keep the warning, text field, and button inside one clean row. */
body .existing-scope-resolver,
body .existing-scope-resolver.scope-resolver-card,
body .scope-resolver-card{
  grid-template-columns:minmax(190px,240px) minmax(280px,1fr) max-content !important;
  max-width:100% !important;
  width:100% !important;
  align-items:center !important;
}
body .existing-scope-resolver input,
body .existing-scope-resolver.scope-resolver-card input,
body .scope-resolver-card input{
  min-width:260px !important;
}
body .existing-scope-resolver button,
body .existing-scope-resolver.scope-resolver-card button,
body .scope-resolver-card button{
  min-width:150px !important;
}

/* Problem direction buttons: compact enough for one desktop row. */
.problem-rolls{
  flex-wrap:nowrap !important;
  gap:4px !important;
}
.problem-roll-btn,
button.tiny.problem-roll-btn{
  padding:2px 6px !important;
  font-size:11px !important;
  line-height:1.05 !important;
  flex:0 1 auto !important;
}

@media(max-width:1100px){
  .compact-top{
    grid-template-columns:1fr !important;
    grid-template-areas:"picker" "backups" "nav" !important;
    align-items:stretch !important;
  }
  .compact-top .backup-actions{
    justify-content:flex-start !important;
  }
  .compact-top .import-form{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
  .compact-top .import-form button{
    width:100% !important;
  }
}
@media(max-width:760px){
  html,
  body,
  .wrap,
  .site-banner,
  .site-banner-row,
  .site-banner-title,
  .site-banner-image-link,
  .site-banner-image-link img,
  .site-banner .session-badge,
  .site-banner .session-badge.session-badge-huge,
  .site-banner .session-login-line,
  .site-banner .session-login-label,
  .site-banner .session-username-inline{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
  }
  .wrap{
    padding-left:10px !important;
    padding-right:10px !important;
  }
  .site-banner{
    display:block !important;
    padding:8px !important;
  }
  .site-banner-image-link img{
    width:100% !important;
  }
  .site-banner .session-badge,
  .site-banner .session-badge.session-badge-huge{
    padding:12px !important;
    font-size:16px !important;
  }
  .site-banner .session-badge strong,
  .site-banner .session-badge.session-badge-huge strong{
    font-size:19px !important;
  }
  .site-banner .session-badge span,
  .site-banner .session-badge.session-badge-huge span,
  .site-banner .session-username-inline{
    font-size:16px !important;
  }
  .compact-top .backup-actions,
  .compact-top .import-form{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:8px !important;
  }
  .compact-top .backup-actions > .button-link,
  .compact-top .backup-actions button,
  .compact-top .import-form button{
    width:100% !important;
  }
  .user-nav.main-character-nav,
  .section-tab-bar.character-workspace-tabs,
  .character-workspace-tabs{
    flex-wrap:nowrap !important;
    overflow-x:auto !important;
    width:100% !important;
    max-width:100% !important;
    padding-bottom:4px !important;
  }
  .user-nav.main-character-nav > span{
    flex:0 0 auto !important;
    max-width:none !important;
  }
  .user-nav.main-character-nav > .button-link,
  .user-nav.main-character-nav > .nav-menu,
  .user-nav.main-character-nav > .admin-nav-menu,
  .section-tab-bar.character-workspace-tabs button,
  .character-workspace-tabs button{
    flex:0 0 auto !important;
  }
  body .existing-scope-resolver,
  body .existing-scope-resolver.scope-resolver-card,
  body .scope-resolver-card{
    grid-template-columns:1fr !important;
    width:100% !important;
    max-width:100% !important;
  }
  body .existing-scope-resolver input,
  body .existing-scope-resolver.scope-resolver-card input,
  body .scope-resolver-card input,
  body .existing-scope-resolver button,
  body .existing-scope-resolver.scope-resolver-card button,
  body .scope-resolver-card button{
    width:100% !important;
    min-width:0 !important;
  }
  .problem-rolls{
    flex-wrap:wrap !important;
  }
}

/* ========================================================================== */
/* v2.7.0 — UI & Architecture Standardization Foundation                       */
/* Governance goal: different visible content, same underlying construction.    */
/* These AS-* rules are canonical aliases for future pages while also rescuing   */
/* current legacy wrappers without requiring a complete rewrite in one release.  */
/* ========================================================================== */

:root{
  --as-space-1:4px;
  --as-space-2:8px;
  --as-space-3:12px;
  --as-space-4:16px;
  --as-space-5:20px;
  --as-space-6:24px;
  --as-radius-sm:8px;
  --as-radius-md:12px;
  --as-radius-lg:16px;
  --as-field-min:260px;
  --as-field-comfort:320px;
  --as-button-min:128px;
}

/* Application shell */
.as-app-shell,
.wrap{
  width:100%;
  max-width:100%;
}

.as-workspace,
.panel,
.subpanel,
.workspace-card{
  min-width:0;
  max-width:100%;
}

/* Canonical cards */
.as-card,
.panel,
.subpanel,
.cards>div,
.workspace-card{
  overflow-wrap:break-word;
}

.as-card-header,
.card-header{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:var(--as-space-3);
  flex-wrap:wrap;
}

/* Canonical toolbar/action rows */
.as-toolbar,
.backup-actions,
.form-actions,
.actions,
.editor-actions,
.add-status{
  display:flex;
  flex-wrap:wrap;
  gap:var(--as-space-3);
  align-items:flex-end;
  min-width:0;
  max-width:100%;
}

.as-toolbar > *,
.backup-actions > *,
.form-actions > *,
.actions > *{
  min-width:0;
}

/* Canonical responsive form rows */
.as-form,
.sheet-form,
.auth-form,
#characterForm{
  min-width:0;
  max-width:100%;
}

.as-form-row,
.as-grid,
.identity-fields,
.character-overview-identity,
.two,
.stats,
.equip-fields,
.character-overview-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,var(--as-field-min)),1fr));
  gap:var(--as-space-3);
  align-items:end;
  min-width:0;
  max-width:100%;
}

.as-form-row--wide,
.character-overview-identity{
  grid-template-columns:repeat(auto-fit,minmax(min(100%,var(--as-field-comfort)),1fr));
}

.as-field,
.as-form label,
.sheet-form label,
#characterForm label,
.auth-form label,
.panel label{
  min-width:0;
  max-width:100%;
}

.as-field input,
.as-field select,
.as-field textarea,
.as-form input,
.as-form select,
.as-form textarea,
.sheet-form input,
.sheet-form select,
.sheet-form textarea,
#characterForm input,
#characterForm select,
#characterForm textarea,
.auth-form input,
.auth-form select,
.auth-form textarea,
.panel input,
.panel select,
.panel textarea{
  width:100%;
  max-width:100%;
  min-width:0;
  box-sizing:border-box;
}

/* Explicit rescue for Character Overview identity fields. Do not use tiny % widths. */
.character-overview-identity label,
.identity-fields label{
  width:100%;
  margin-bottom:0;
}
.character-overview-identity input,
.identity-fields input{
  width:100% !important;
  min-width:0 !important;
  max-width:100% !important;
}

/* Canonical buttons */
.as-button,
button,
.button-link,
.user-nav a,
.section-tab-bar button{
  min-height:38px;
  max-width:100%;
  box-sizing:border-box;
}

.as-button--compact,
.problem-roll-btn,
button.tiny.problem-roll-btn{
  min-height:24px;
  min-width:0;
  width:auto;
  white-space:nowrap;
}

/* Canonical navigation rows */
.as-nav-row,
.user-nav,
.main-character-nav,
.section-tab-bar,
.character-workspace-tabs{
  min-width:0;
  max-width:100%;
}

/* Desktop navigation should fill the available row without becoming huge. */
@media(min-width:761px){
  .user-nav.main-character-nav{
    display:grid !important;
    grid-template-columns:auto repeat(auto-fit,minmax(120px,1fr)) !important;
    align-items:center !important;
    gap:8px !important;
  }
  .section-tab-bar.character-workspace-tabs,
  .character-workspace-tabs{
    display:grid !important;
    grid-template-columns:repeat(auto-fit,minmax(104px,1fr)) !important;
    gap:8px !important;
  }
  .section-tab-bar.character-workspace-tabs button,
  .character-workspace-tabs button,
  .user-nav.main-character-nav > .button-link,
  .user-nav.main-character-nav > .nav-menu,
  .user-nav.main-character-nav > .admin-nav-menu{
    width:100% !important;
  }
}

/* Canonical validation */
.as-message,
.flash,
.error-flash,
.field-error,
.scope-resolver-label{
  max-width:100%;
}

/* Local Expert / scoped skill resolver gets a stable reusable form-row shape. */
body .existing-scope-resolver,
body .existing-scope-resolver.scope-resolver-card,
body .scope-resolver-card{
  display:grid !important;
  grid-template-columns:minmax(180px,240px) minmax(240px,1fr) max-content !important;
  gap:10px !important;
  align-items:center !important;
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
}
body .scope-resolver-label,
body .existing-scope-resolver.scope-resolver-card .scope-resolver-label{
  min-width:0 !important;
  max-width:100% !important;
}
body .existing-scope-resolver input,
body .existing-scope-resolver.scope-resolver-card input,
body .scope-resolver-card input{
  width:100% !important;
  min-width:0 !important;
}
body .existing-scope-resolver button,
body .existing-scope-resolver.scope-resolver-card button,
body .scope-resolver-card button{
  min-width:128px !important;
  white-space:nowrap !important;
}

/* Problem direction controls: compact single-row target on desktop. */
.problem-rolls{
  display:flex !important;
  flex-wrap:nowrap !important;
  gap:4px !important;
  align-items:center !important;
  width:100% !important;
  max-width:100% !important;
}
.problem-roll-btn,
button.tiny.problem-roll-btn{
  padding:2px 5px !important;
  font-size:11px !important;
  line-height:1.05 !important;
  flex:1 1 0 !important;
  text-align:center !important;
}

/* Mobile standard: stack forms, keep nav horizontally usable, never collapse fields. */
@media(max-width:760px){
  :root{ --as-field-min:100%; --as-field-comfort:100%; }
  .as-form-row,
  .as-grid,
  .identity-fields,
  .character-overview-identity,
  .two,
  .stats,
  .equip-fields,
  .character-overview-grid{
    grid-template-columns:1fr !important;
  }
  .as-toolbar,
  .backup-actions,
  .form-actions,
  .actions,
  .editor-actions,
  .add-status{
    display:grid !important;
    grid-template-columns:1fr !important;
    align-items:stretch !important;
  }
  .as-toolbar > *,
  .backup-actions > *,
  .form-actions > *,
  .actions > *,
  .editor-actions > *,
  .add-status > *,
  .as-button,
  button,
  .button-link{
    width:100%;
  }
  body .existing-scope-resolver,
  body .existing-scope-resolver.scope-resolver-card,
  body .scope-resolver-card{
    grid-template-columns:1fr !important;
  }
  body .existing-scope-resolver button,
  body .existing-scope-resolver.scope-resolver-card button,
  body .scope-resolver-card button{
    width:100% !important;
  }
  .problem-rolls{
    flex-wrap:wrap !important;
  }
  .problem-roll-btn,
  button.tiny.problem-roll-btn{
    flex:1 1 calc(50% - 4px) !important;
  }
}

/* ===== v2.7.0a Primary Navigation Regression Hotfix =====
   v2.7.0 standardization accidentally allowed the Character Manager primary nav
   to lose its horizontal row behavior on desktop.  Keep the header/control strip
   standardized, but explicitly pin the primary nav as a full-width row under the
   character picker/import controls.  Workspace tabs were already correct. */
.compact-top{
  display:grid !important;
  grid-template-columns:minmax(280px,.85fr) minmax(0,2.6fr) !important;
  grid-template-areas:
    "picker backups"
    "nav nav" !important;
  align-items:end !important;
}
.compact-top > .user-nav.main-character-nav,
header.compact-top > nav.user-nav.main-character-nav{
  grid-area:nav !important;
  grid-column:1 / -1 !important;
  justify-self:stretch !important;
  align-self:stretch !important;
  display:flex !important;
  flex-direction:row !important;
  flex-wrap:nowrap !important;
  align-items:stretch !important;
  justify-content:space-between !important;
  gap:8px !important;
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  box-sizing:border-box !important;
}
.compact-top > .user-nav.main-character-nav > span,
header.compact-top > nav.user-nav.main-character-nav > span{
  flex:0 1 160px !important;
  display:flex !important;
  align-items:center !important;
  min-width:0 !important;
  max-width:220px !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
}
.compact-top > .user-nav.main-character-nav > .button-link,
.compact-top > .user-nav.main-character-nav > .nav-menu,
.compact-top > .user-nav.main-character-nav > .admin-nav-menu,
header.compact-top > nav.user-nav.main-character-nav > .button-link,
header.compact-top > nav.user-nav.main-character-nav > .nav-menu,
header.compact-top > nav.user-nav.main-character-nav > .admin-nav-menu{
  flex:1 1 0 !important;
  min-width:0 !important;
  max-width:none !important;
  width:auto !important;
}
.compact-top > .user-nav.main-character-nav .button-link,
.compact-top > .user-nav.main-character-nav .nav-menu > summary,
.compact-top > .user-nav.main-character-nav .admin-nav-menu > summary,
header.compact-top > nav.user-nav.main-character-nav .button-link,
header.compact-top > nav.user-nav.main-character-nav .nav-menu > summary,
header.compact-top > nav.user-nav.main-character-nav .admin-nav-menu > summary{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:100% !important;
  height:100% !important;
  min-height:38px !important;
  padding:7px 8px !important;
  box-sizing:border-box !important;
  white-space:nowrap !important;
  text-align:center !important;
}

@media(max-width:1100px){
  .compact-top{
    grid-template-columns:1fr !important;
    grid-template-areas:"picker" "backups" "nav" !important;
  }
  .compact-top > .user-nav.main-character-nav,
  header.compact-top > nav.user-nav.main-character-nav{
    overflow-x:auto !important;
  }
  .compact-top > .user-nav.main-character-nav > span,
  .compact-top > .user-nav.main-character-nav > .button-link,
  .compact-top > .user-nav.main-character-nav > .nav-menu,
  .compact-top > .user-nav.main-character-nav > .admin-nav-menu,
  header.compact-top > nav.user-nav.main-character-nav > span,
  header.compact-top > nav.user-nav.main-character-nav > .button-link,
  header.compact-top > nav.user-nav.main-character-nav > .nav-menu,
  header.compact-top > nav.user-nav.main-character-nav > .admin-nav-menu{
    flex:0 0 auto !important;
  }
}

@media(max-width:760px){
  .compact-top > .user-nav.main-character-nav,
  header.compact-top > nav.user-nav.main-character-nav{
    flex-wrap:nowrap !important;
    overflow-x:auto !important;
    -webkit-overflow-scrolling:touch !important;
    padding-bottom:4px !important;
  }
}


/* ===== v2.7.0b Primary Navigation Row Lock + Cache Bust =====
   Hard-lock the Character Manager primary navigation into a single desktop row.
   v2.7.0/2.7.0a standardization left some browsers using a stacked nav layout.
   This rule uses grid-auto-flow:column so each direct nav item occupies one row cell. */
body header.top.compact-top > nav.user-nav.main-character-nav,
body .compact-top > nav.user-nav.main-character-nav{
  grid-area:nav !important;
  grid-column:1 / -1 !important;
  display:grid !important;
  grid-template-columns:minmax(120px,180px) !important;
  grid-auto-flow:column !important;
  grid-auto-columns:minmax(120px,1fr) !important;
  align-items:stretch !important;
  justify-items:stretch !important;
  gap:8px !important;
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  overflow:visible !important;
  box-sizing:border-box !important;
}
body header.top.compact-top > nav.user-nav.main-character-nav > *,
body .compact-top > nav.user-nav.main-character-nav > *{
  min-width:0 !important;
  max-width:none !important;
  width:100% !important;
  height:100% !important;
  box-sizing:border-box !important;
}
body header.top.compact-top > nav.user-nav.main-character-nav > span,
body .compact-top > nav.user-nav.main-character-nav > span{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
  padding-right:4px !important;
}
body header.top.compact-top > nav.user-nav.main-character-nav a.button-link,
body header.top.compact-top > nav.user-nav.main-character-nav .nav-menu > summary,
body header.top.compact-top > nav.user-nav.main-character-nav .admin-nav-menu > summary,
body .compact-top > nav.user-nav.main-character-nav a.button-link,
body .compact-top > nav.user-nav.main-character-nav .nav-menu > summary,
body .compact-top > nav.user-nav.main-character-nav .admin-nav-menu > summary{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:100% !important;
  height:100% !important;
  min-height:38px !important;
  padding:7px 8px !important;
  box-sizing:border-box !important;
  white-space:nowrap !important;
  text-align:center !important;
}
@media(max-width:1100px){
  body header.top.compact-top > nav.user-nav.main-character-nav,
  body .compact-top > nav.user-nav.main-character-nav{
    grid-template-columns:minmax(120px,180px) !important;
    grid-auto-columns:minmax(118px,150px) !important;
    overflow-x:auto !important;
    overflow-y:visible !important;
    -webkit-overflow-scrolling:touch !important;
    padding-bottom:4px !important;
  }
}


/* ===== v2.7.0c Header Control Row Compacting =====
   Remove the duplicate identity display from the main navigation row and compact
   the Character Manager header controls so the character selector and primary
   navigation fit together on one desktop row.  The site banner remains the
   canonical place for logged-in identity and role display. */
body header.top.compact-top,
body .compact-top{
  display:grid !important;
  grid-template-columns:minmax(320px,470px) minmax(0,1fr) !important;
  grid-template-areas:
    "picker nav"
    "backups backups" !important;
  align-items:end !important;
  gap:10px 12px !important;
}
body header.top.compact-top > form.pick,
body .compact-top > form.pick{
  grid-area:picker !important;
  min-width:0 !important;
  width:100% !important;
  margin:0 !important;
}
body header.top.compact-top > form.pick select,
body .compact-top > form.pick select{
  width:100% !important;
  max-width:470px !important;
  min-width:280px !important;
  box-sizing:border-box !important;
}
body header.top.compact-top > .backup-actions,
body .compact-top > .backup-actions{
  grid-area:backups !important;
  width:100% !important;
  display:flex !important;
  flex-wrap:wrap !important;
  align-items:end !important;
  justify-content:flex-end !important;
  gap:8px !important;
  margin:0 !important;
}
body header.top.compact-top > nav.user-nav.main-character-nav,
body .compact-top > nav.user-nav.main-character-nav{
  grid-area:nav !important;
  grid-column:auto !important;
  display:grid !important;
  grid-auto-flow:column !important;
  grid-auto-columns:minmax(96px,1fr) !important;
  grid-template-columns:none !important;
  align-items:stretch !important;
  justify-items:stretch !important;
  gap:8px !important;
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  overflow:visible !important;
  margin:0 !important;
  box-sizing:border-box !important;
}
body header.top.compact-top > nav.user-nav.main-character-nav > span,
body .compact-top > nav.user-nav.main-character-nav > span{
  display:none !important;
}
body header.top.compact-top > nav.user-nav.main-character-nav > .button-link,
body header.top.compact-top > nav.user-nav.main-character-nav > .nav-menu,
body header.top.compact-top > nav.user-nav.main-character-nav > .admin-nav-menu,
body .compact-top > nav.user-nav.main-character-nav > .button-link,
body .compact-top > nav.user-nav.main-character-nav > .nav-menu,
body .compact-top > nav.user-nav.main-character-nav > .admin-nav-menu{
  width:100% !important;
  min-width:0 !important;
  max-width:none !important;
  height:100% !important;
  box-sizing:border-box !important;
}
body header.top.compact-top > nav.user-nav.main-character-nav a.button-link,
body header.top.compact-top > nav.user-nav.main-character-nav .nav-menu > summary,
body header.top.compact-top > nav.user-nav.main-character-nav .admin-nav-menu > summary,
body .compact-top > nav.user-nav.main-character-nav a.button-link,
body .compact-top > nav.user-nav.main-character-nav .nav-menu > summary,
body .compact-top > nav.user-nav.main-character-nav .admin-nav-menu > summary{
  min-height:36px !important;
  padding:6px 8px !important;
  font-size:14px !important;
  line-height:1.15 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  white-space:nowrap !important;
  text-align:center !important;
  box-sizing:border-box !important;
}
body header.top.compact-top > .backup-actions .button-link,
body .compact-top > .backup-actions .button-link,
body header.top.compact-top > .backup-actions button,
body .compact-top > .backup-actions button{
  min-height:36px !important;
  padding:6px 10px !important;
  font-size:14px !important;
  white-space:nowrap !important;
}
body header.top.compact-top > .backup-actions .import-form,
body .compact-top > .backup-actions .import-form{
  display:flex !important;
  align-items:end !important;
  justify-content:flex-end !important;
  flex-wrap:wrap !important;
  gap:8px !important;
  margin:0 !important;
}
body header.top.compact-top > .backup-actions .import-form label,
body .compact-top > .backup-actions .import-form label{
  margin:0 !important;
}

@media(max-width:1250px){
  body header.top.compact-top,
  body .compact-top{
    grid-template-columns:1fr !important;
    grid-template-areas:"picker" "nav" "backups" !important;
  }
  body header.top.compact-top > nav.user-nav.main-character-nav,
  body .compact-top > nav.user-nav.main-character-nav{
    grid-auto-columns:minmax(112px,150px) !important;
    overflow-x:auto !important;
    overflow-y:visible !important;
    -webkit-overflow-scrolling:touch !important;
    padding-bottom:4px !important;
  }
  body header.top.compact-top > .backup-actions,
  body .compact-top > .backup-actions{
    justify-content:flex-start !important;
  }
}

@media(max-width:760px){
  body header.top.compact-top > form.pick select,
  body .compact-top > form.pick select{
    min-width:0 !important;
    max-width:100% !important;
  }
  body header.top.compact-top > .backup-actions,
  body .compact-top > .backup-actions,
  body header.top.compact-top > .backup-actions .import-form,
  body .compact-top > .backup-actions .import-form{
    align-items:stretch !important;
  }
  body header.top.compact-top > .backup-actions .button-link,
  body .compact-top > .backup-actions .button-link,
  body header.top.compact-top > .backup-actions button,
  body .compact-top > .backup-actions button{
    flex:1 1 auto !important;
  }
}

/* ===== v2.7.0d Global Workspace Layout Standardization =====
   Character Manager became the layout blueprint in v2.7.0c.  These rules apply
   the same top-shell behavior to the older GM, Campaign, Session, Advancement,
   and Spell domains so they no longer use scattered legacy landing-page button
   rows or duplicate identity text.  Banner remains the single source of truth
   for login name, role, version, and app identity. */
.workspace-shell-top{
  display:block !important;
  margin:12px 0 10px !important;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}
.global-workspace-nav{
  display:grid !important;
  grid-auto-flow:column !important;
  grid-auto-columns:minmax(104px,1fr) !important;
  grid-template-columns:none !important;
  gap:8px !important;
  align-items:stretch !important;
  justify-items:stretch !important;
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  margin:0 !important;
  box-sizing:border-box !important;
}
.global-workspace-nav > *,
.global-domain-tabs > *{
  min-width:0 !important;
  width:100% !important;
  max-width:none !important;
  box-sizing:border-box !important;
}
.global-workspace-nav .button-link,
.global-workspace-nav .nav-menu > summary,
.global-workspace-nav .admin-nav-menu > summary,
.global-workspace-nav .account-nav-menu > summary,
.global-domain-tabs .button-link{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-height:36px !important;
  padding:6px 8px !important;
  font-size:14px !important;
  line-height:1.15 !important;
  white-space:nowrap !important;
  text-align:center !important;
  box-sizing:border-box !important;
}
.global-workspace-nav .button-link.selected,
.global-domain-tabs .button-link.selected,
.global-domain-tabs .button-link.active{
  background:linear-gradient(180deg,var(--accent),#f66f47) !important;
  color:#160b06 !important;
  border-color:rgba(255,190,130,.95) !important;
  font-weight:800 !important;
}
.global-domain-tabs{
  display:grid !important;
  grid-auto-flow:column !important;
  grid-auto-columns:minmax(104px,1fr) !important;
  gap:8px !important;
  align-items:stretch !important;
  justify-items:stretch !important;
  width:100% !important;
  max-width:100% !important;
  margin:0 0 1rem !important;
  padding:10px !important;
  border:1px solid rgba(196,145,75,.35) !important;
  border-radius:14px !important;
  background:rgba(20,18,14,.72) !important;
  box-sizing:border-box !important;
}
.nav-menu-panel-right{
  right:0;
  left:auto;
}
@media(max-width:1100px){
  .global-workspace-nav,
  .global-domain-tabs{
    grid-auto-columns:minmax(112px,150px) !important;
    overflow-x:auto !important;
    overflow-y:visible !important;
    -webkit-overflow-scrolling:touch !important;
    padding-bottom:4px !important;
  }
}
@media(max-width:760px){
  .workspace-shell-top{margin-top:8px !important;}
  .global-workspace-nav,
  .global-domain-tabs{
    grid-auto-columns:minmax(106px,138px) !important;
    gap:6px !important;
  }
  .global-workspace-nav .button-link,
  .global-workspace-nav .nav-menu > summary,
  .global-workspace-nav .admin-nav-menu > summary,
  .global-workspace-nav .account-nav-menu > summary,
  .global-domain-tabs .button-link{
    font-size:13px !important;
    padding:6px 7px !important;
  }
}

/* ===== v2.7.0e Navigation State + Account Export Hotfix =====
   Active workspace buttons must remain readable, and Account dropdown now carries
   character export/download actions. */
.global-workspace-nav a.button-link.selected,
.global-workspace-nav a.button-link.selected:link,
.global-workspace-nav a.button-link.selected:visited,
.global-workspace-nav a.button-link.selected:hover,
.global-domain-tabs a.button-link.selected,
.global-domain-tabs a.button-link.selected:link,
.global-domain-tabs a.button-link.selected:visited,
.global-domain-tabs a.button-link.selected:hover,
.global-domain-tabs a.button-link.active,
.global-domain-tabs a.button-link.active:link,
.global-domain-tabs a.button-link.active:visited,
.global-domain-tabs a.button-link.active:hover,
.main-character-nav a.button-link.selected,
.main-character-nav a.button-link.selected:link,
.main-character-nav a.button-link.selected:visited,
.main-character-nav a.button-link.selected:hover{
  background:linear-gradient(180deg,var(--accent),#f66f47) !important;
  color:#170b06 !important;
  text-shadow:none !important;
  border-color:rgba(255,190,130,.95) !important;
  font-weight:800 !important;
  opacity:1 !important;
}
.global-workspace-nav a.button-link:not(.selected),
.global-workspace-nav a.button-link:not(.selected):link,
.global-workspace-nav a.button-link:not(.selected):visited,
.global-domain-tabs a.button-link:not(.selected):not(.active),
.global-domain-tabs a.button-link:not(.selected):not(.active):link,
.global-domain-tabs a.button-link:not(.selected):not(.active):visited,
.main-character-nav a.button-link:not(.selected),
.main-character-nav a.button-link:not(.selected):link,
.main-character-nav a.button-link:not(.selected):visited,
.global-workspace-nav .nav-menu > summary,
.main-character-nav .nav-menu > summary{
  color:var(--bone) !important;
  opacity:1 !important;
}
.global-workspace-nav .account-nav-menu,
.main-character-nav .account-nav-menu{
  position:relative !important;
  width:100% !important;
  min-width:0 !important;
}
.global-workspace-nav .account-nav-menu > summary,
.main-character-nav .account-nav-menu > summary{
  list-style:none !important;
  cursor:pointer !important;
}
.global-workspace-nav .account-nav-menu > summary::-webkit-details-marker,
.main-character-nav .account-nav-menu > summary::-webkit-details-marker{
  display:none !important;
}
.global-workspace-nav .account-nav-menu > summary::after,
.main-character-nav .account-nav-menu > summary::after{
  content:'▾';
  margin-left:2px;
  font-size:.8em;
}


/* ===== v2.7.0f Navigation readability hard-lock =====
   Prevent active/selected primary workspace buttons from becoming black-on-black
   after global workspace standardization. */
.global-workspace-nav .button-link.selected,
.global-workspace-nav .button-link.selected:link,
.global-workspace-nav .button-link.selected:visited,
.global-workspace-nav .button-link.selected:focus,
.global-workspace-nav .button-link.selected:hover,
.global-domain-tabs .button-link.selected,
.global-domain-tabs .button-link.selected:link,
.global-domain-tabs .button-link.selected:visited,
.global-domain-tabs .button-link.selected:focus,
.global-domain-tabs .button-link.selected:hover,
.global-domain-tabs .button-link.active,
.global-domain-tabs .button-link.active:link,
.global-domain-tabs .button-link.active:visited,
.global-domain-tabs .button-link.active:focus,
.global-domain-tabs .button-link.active:hover,
.section-tab-bar .button-link.active,
.section-tab-bar .button-link.active:link,
.section-tab-bar .button-link.active:visited,
.section-tab-bar .button-link.active:focus,
.section-tab-bar .button-link.active:hover {
  background:linear-gradient(180deg,var(--accent),#f66f47) !important;
  color:#170b06 !important;
  -webkit-text-fill-color:#170b06 !important;
  text-shadow:none !important;
  border-color:rgba(255,190,130,.95) !important;
  font-weight:800 !important;
  opacity:1 !important;
  visibility:visible !important;
}
.global-workspace-nav .button-link.selected *,
.global-domain-tabs .button-link.selected *,
.global-domain-tabs .button-link.active * {
  color:#170b06 !important;
  -webkit-text-fill-color:#170b06 !important;
  opacity:1 !important;
  visibility:visible !important;
}


/* ===== v2.7.0g Active Navigation Contrast Fix =====
   v2.7.0f used var(--accent) before it was guaranteed to exist in the theme.
   When the background declaration failed, selected buttons kept the dark normal
   background while receiving dark active text.  This is the canonical active
   navigation state for all primary/workspace/domain nav buttons. */
body .global-workspace-nav a.button-link.selected,
body .global-workspace-nav a.button-link.selected:link,
body .global-workspace-nav a.button-link.selected:visited,
body .global-workspace-nav a.button-link.selected:hover,
body .global-workspace-nav a.button-link.selected:focus,
body .global-workspace-nav a.button-link.selected:active,
body .main-character-nav a.button-link.selected,
body .main-character-nav a.button-link.selected:link,
body .main-character-nav a.button-link.selected:visited,
body .main-character-nav a.button-link.selected:hover,
body .main-character-nav a.button-link.selected:focus,
body .main-character-nav a.button-link.selected:active,
body .global-domain-tabs a.button-link.selected,
body .global-domain-tabs a.button-link.selected:link,
body .global-domain-tabs a.button-link.selected:visited,
body .global-domain-tabs a.button-link.selected:hover,
body .global-domain-tabs a.button-link.selected:focus,
body .global-domain-tabs a.button-link.selected:active,
body .global-domain-tabs a.button-link.active,
body .global-domain-tabs a.button-link.active:link,
body .global-domain-tabs a.button-link.active:visited,
body .global-domain-tabs a.button-link.active:hover,
body .global-domain-tabs a.button-link.active:focus,
body .global-domain-tabs a.button-link.active:active,
body .section-tab-bar a.button-link.active,
body .section-tab-bar a.button-link.active:link,
body .section-tab-bar a.button-link.active:visited,
body .section-tab-bar a.button-link.active:hover,
body .section-tab-bar a.button-link.active:focus,
body .section-tab-bar a.button-link.active:active,
body .section-tab-bar button.active,
body .section-tab-bar button.active:hover,
body .section-tab-bar button.active:focus,
body .section-tab-bar button.active:active,
body button.section-tab.active,
body button.section-tab.active:hover,
body button.section-tab.active:focus,
body button.section-tab.active:active{
  background:#ff8a62 !important;
  background-image:linear-gradient(180deg,#ffb27a 0%,#ff8a62 42%,#f66f47 100%) !important;
  color:#170b06 !important;
  -webkit-text-fill-color:#170b06 !important;
  border-color:#ffb27a !important;
  text-shadow:none !important;
  opacity:1 !important;
  filter:none !important;
  font-weight:800 !important;
  visibility:visible !important;
}
body .global-workspace-nav a.button-link.selected *,
body .main-character-nav a.button-link.selected *,
body .global-domain-tabs a.button-link.selected *,
body .global-domain-tabs a.button-link.active *,
body .section-tab-bar a.button-link.active *,
body .section-tab-bar button.active *,
body button.section-tab.active *{
  color:#170b06 !important;
  -webkit-text-fill-color:#170b06 !important;
  opacity:1 !important;
  visibility:visible !important;
  text-shadow:none !important;
}
body .global-workspace-nav a.button-link:not(.selected),
body .main-character-nav a.button-link:not(.selected),
body .global-domain-tabs a.button-link:not(.selected):not(.active),
body .section-tab-bar a.button-link:not(.active):not(.selected){
  color:var(--bone) !important;
  -webkit-text-fill-color:var(--bone) !important;
}

/* ===== v2.7.0i Admin Credential Generator + Admin Layout Cleanup ===== */
.stat-line{display:flex;flex-wrap:wrap;gap:.55rem .9rem;align-items:center;}
.stat-line span{display:inline-flex;gap:.25rem;align-items:baseline;padding:.25rem .5rem;border:1px solid rgba(255,255,255,.12);border-radius:999px;background:rgba(255,255,255,.035);white-space:nowrap;}
.credential-modal-backdrop[hidden]{display:none!important;}
.credential-modal-backdrop{position:fixed;inset:0;z-index:1000;background:rgba(0,0,0,.72);display:flex;align-items:center;justify-content:center;padding:1rem;}
.credential-modal{width:min(620px,100%);background:var(--panel,#1e222b);border:1px solid rgba(255,209,102,.35);border-radius:16px;box-shadow:0 20px 60px rgba(0,0,0,.55);padding:1rem;}
.credential-modal label{display:block;margin:.7rem 0;}
.credential-modal input{width:100%;font-family:ui-monospace,Menlo,Consolas,monospace;}
.credential-modal .actions{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:flex-end;margin-top:.8rem;}
.user-admin-existing .user-row{display:grid!important;grid-template-columns:minmax(160px,.9fr) minmax(180px,1fr) minmax(120px,.55fr) minmax(150px,.7fr) minmax(150px,.7fr) minmax(220px,1fr) minmax(180px,1fr) auto!important;gap:.5rem!important;align-items:end!important;max-width:100%!important;overflow:hidden!important;}
.user-admin-existing .user-row>strong{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.user-admin-existing .user-row label{min-width:0!important;}
.user-admin-existing .user-row input,.user-admin-existing .user-row select{width:100%!important;min-width:0!important;}
.user-admin-existing .user-row .inline{display:flex!important;align-items:center;gap:.35rem;white-space:normal!important;}
.user-admin-existing .user-row .inline input{width:auto!important;}
.user-admin-existing .user-row small{grid-column:1 / -1!important;font-size:.8rem;color:var(--muted);}
.user-admin-existing{min-width:0;overflow:hidden;}
@media(max-width:1200px){.user-admin-existing .user-row{grid-template-columns:1fr 1fr!important;}.user-admin-existing .user-row>strong,.user-admin-existing .user-row small,.user-admin-existing .user-row button{grid-column:1 / -1!important;}}
@media(max-width:640px){.user-admin-existing .user-row{grid-template-columns:1fr!important;}.credential-modal .actions{justify-content:stretch}.credential-modal .actions button{width:100%;}}

/* ===== v2.7.0i Campaign Discovery Readability ===== */
.campaign-list-panel .compact-table th:nth-child(4),
.campaign-list-panel .compact-table td:nth-child(4){text-align:right;white-space:nowrap;}

/* ===== v2.7.0j Admin user management compact cards ===== */
.user-admin-existing .user-card-compact{
  display:grid!important;
  grid-template-columns:minmax(180px,1.1fr) minmax(160px,.9fr) minmax(120px,.55fr) minmax(170px,.85fr) minmax(170px,.85fr);
  gap:.55rem .75rem!important;
  align-items:end!important;
  padding:.75rem!important;
  border:1px solid var(--line-soft)!important;
  border-radius:12px!important;
  background:var(--bg-2)!important;
  overflow:visible!important;
}
.user-admin-existing .user-card-compact>strong{grid-column:1 / -1;white-space:normal;overflow:visible;text-overflow:clip;color:var(--gold);}
.user-admin-existing .user-card-compact label{margin:0!important;min-width:0!important;}
.user-admin-existing .user-card-compact input,.user-admin-existing .user-card-compact select{width:100%!important;min-width:0!important;}
.user-admin-existing .user-card-compact .inline{display:flex!important;flex-direction:row!important;align-items:center!important;gap:.45rem!important;white-space:normal!important;min-height:38px;}
.user-admin-existing .user-card-compact .inline input{width:auto!important;flex:0 0 auto;}
.user-admin-existing .user-card-compact small{grid-column:1 / -1!important;font-size:.8rem;color:var(--muted);}
.user-admin-existing .user-card-compact button{justify-self:end;min-width:110px;}
@media(max-width:1100px){.user-admin-existing .user-card-compact{grid-template-columns:1fr 1fr!important;}.user-admin-existing .user-card-compact>strong,.user-admin-existing .user-card-compact small{grid-column:1 / -1!important;}}
@media(max-width:640px){.user-admin-existing .user-card-compact{grid-template-columns:1fr!important;}.user-admin-existing .user-card-compact button{justify-self:stretch;width:100%;}}


/* ===== v2.7.0k Cache Diagnostic Footer ===== */
.site-version-footer{
  margin:1.25rem auto 0;
  padding:.7rem 1rem;
  max-width:1180px;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  gap:.45rem .85rem;
  border:1px solid rgba(255,209,102,.25);
  border-radius:12px;
  background:rgba(255,255,255,.035);
  color:var(--muted,#b8ae97);
  font-size:.86rem;
  text-align:center;
}
.site-version-footer-version{
  color:var(--gold,#d7b45a);
  font-weight:800;
  letter-spacing:.02em;
}
.site-version-footer-purpose{
  color:var(--bone-dim,#b8ae97);
  font-family:ui-monospace,SFMono-Regular,Consolas,monospace;
  font-size:.78rem;
}
@media print{.site-version-footer{display:none!important;}}


/* v2.7.1: Main workspace + navigation standardization */
.global-workspace-nav{
  justify-content:center;
  gap:8px;
  margin:10px 0 12px;
  padding:10px;
  border:1px solid var(--line-soft, #ddd);
  border-radius:14px;
  background:rgba(255,255,255,.04);
}
.global-workspace-nav > .button-link,
.global-workspace-nav > .nav-menu > summary{
  min-width:104px;
  padding:8px 10px;
  text-align:center;
}
.global-workspace-nav > .button-link.selected{
  box-shadow:inset 0 0 0 2px currentColor;
  font-weight:700;
}
.character-picker-top{
  display:grid !important;
  grid-template-columns:minmax(280px, 1fr) auto;
  grid-template-areas:"picker backups";
  align-items:start;
  gap:12px;
  margin-top:10px;
}
.character-picker-form{
  grid-area:picker;
  display:grid;
  grid-template-columns:minmax(180px, 280px) minmax(260px, 1fr);
  gap:8px;
  align-items:center;
  width:100%;
}
.character-picker-form select,
.character-picker-form input{width:100%;}
.compact-list-tools{
  display:flex;
  gap:8px;
  align-items:center;
  margin:8px 0 10px;
}
.compact-list-tools input,
.owner-filter-input,
.compact-owner-select{
  width:100%;
  max-width:100%;
}
.compact-owner-select option[hidden]{display:none;}
.filterable-table tr.filtered-out{display:none;}
@media(max-width:840px){
  .global-workspace-nav{justify-content:flex-start;overflow-x:auto;flex-wrap:nowrap;}
  .global-workspace-nav > .button-link,
  .global-workspace-nav > .nav-menu{flex:0 0 auto;}
  .character-picker-top{grid-template-columns:1fr;grid-template-areas:"picker" "backups";}
  .character-picker-form{grid-template-columns:1fr;}
}


/* ===== v2.7.1a Campaign Workspace Nav Cleanup =====
   The redundant "Campaign Workspace" context pill was removed from campaigns.php.
   These overrides make the remaining campaign tabs read as the actual campaign workspace navigation. */
.campaign-context-panel .campaign-context-row{margin-bottom:.85rem;}
.campaign-workspace-tabs{margin-top:.9rem;padding-top:.75rem;border-top:1px solid rgba(255,255,255,.1);}
.campaign-workspace-tabs .workspace-tab{border-radius:12px;padding:.55rem .85rem;font-weight:700;min-height:2.35rem;}
.campaign-workspace-tabs .workspace-tab.active{box-shadow:inset 0 0 0 1px rgba(255,209,102,.32);}
@media(max-width:900px){.campaign-workspace-tabs .workspace-tab{flex:1 1 135px;}}

/* ===== v2.8.1 Advancement Workspace Final Shell + Footer-Only Version Marker ===== */
.as-three-panel-shell{
  display:grid;
  grid-template-columns:minmax(270px,.72fr) minmax(520px,1.45fr) minmax(260px,.65fr);
  gap:1rem;
  align-items:start;
  margin-top:1rem;
}
.as-shell-left,
.as-shell-right{
  position:sticky;
  top:12px;
  max-height:calc(100vh - 24px);
  overflow:auto;
}
.advancement-center-panel{min-width:0;}
.workspace-heading-row{display:flex;align-items:center;justify-content:space-between;gap:.75rem;margin-bottom:1rem;border-bottom:1px solid var(--line-soft,#3a3120);padding-bottom:.6rem;}
.workspace-heading-row h2{margin:0;}
.advancement-compact-grid{display:grid;grid-template-columns:repeat(2,minmax(240px,1fr));gap:.85rem;align-items:start;}
.advancement-compact-card{border:1px solid var(--line-soft,#3a3120);border-radius:14px;background:rgba(255,255,255,.035);padding:1rem;min-width:0;}
.advancement-compact-card h3{margin-top:0;margin-bottom:.75rem;font-size:1.28rem;}
.advancement-compact-card .problem-form{gap:.55rem;}
.advancement-compact-card label{margin-bottom:.25rem;}
.compact-warning{font-size:.95rem;font-weight:800;margin:.35rem 0 .65rem;}
.shell-kpi-grid{grid-template-columns:1fr;}
.status-stack{display:grid;gap:.5rem;margin:1rem 0;}
.status-stack>div{display:flex;align-items:center;justify-content:space-between;gap:.75rem;border:1px solid var(--line-soft,#3a3120);border-radius:10px;background:rgba(0,0,0,.14);padding:.55rem .7rem;}
.status-stack span{color:var(--muted,#9f9278);text-align:right;}
.analog-clock-block{display:grid;place-items:center;gap:.4rem;margin:.25rem 0 1rem;}
.analog-clock-face{position:relative;width:132px;height:132px;border:2px solid var(--line,#3a3120);border-radius:50%;background:radial-gradient(circle at 50% 50%, rgba(255,255,255,.08), rgba(0,0,0,.18));box-shadow:inset 0 0 0 6px rgba(255,255,255,.025),0 0 0 1px rgba(255,209,102,.08);}
.clock-mark{position:absolute;font-size:.72rem;font-weight:800;color:var(--bone-dim,#b8ae97);transform:translate(-50%,-50%);}
.mark-12{left:50%;top:10%;}.mark-3{left:90%;top:50%;}.mark-6{left:50%;top:90%;}.mark-9{left:10%;top:50%;}
.clock-hand{position:absolute;left:50%;bottom:50%;transform-origin:50% 100%;border-radius:999px;}
.hour-hand{width:5px;height:34px;margin-left:-2.5px;background:var(--bone,#ece3ce);}
.minute-hand{width:3px;height:48px;margin-left:-1.5px;background:var(--bone-dim,#b8ae97);}
.second-hand{width:1px;height:52px;margin-left:-.5px;background:var(--accent,#ff7b4a);}
.clock-pin{position:absolute;left:50%;top:50%;width:10px;height:10px;margin-left:-5px;margin-top:-5px;border-radius:50%;background:var(--accent,#ff7b4a);box-shadow:0 0 0 3px rgba(0,0,0,.25);}
.clock-label{font-size:.8rem;color:var(--muted,#9f9278);font-weight:700;letter-spacing:.04em;text-transform:uppercase;}
.mini-ledger-list{display:grid;gap:.45rem;max-height:420px;overflow:auto;}
.mini-ledger-row{display:grid;grid-template-columns:auto 1fr;gap:.3rem .55rem;border:1px solid var(--line-soft,#3a3120);border-radius:10px;background:rgba(0,0,0,.12);padding:.55rem;}
.mini-ledger-row strong{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;}
.mini-ledger-row span{min-width:0;overflow:hidden;text-overflow:ellipsis;}
.mini-ledger-row em{grid-column:1 / -1;color:var(--muted,#9f9278);font-size:.78rem;font-style:normal;}
.site-version-footer{display:flex;align-items:center;justify-content:center;gap:1rem;flex-wrap:wrap;padding:.65rem 1rem;margin-top:1.25rem;border-top:1px solid var(--line-soft,#3a3120);background:rgba(0,0,0,.18);}
.site-version-footer span{white-space:nowrap;}
@media(max-width:1200px){.as-three-panel-shell{grid-template-columns:minmax(260px,.8fr) minmax(520px,1.4fr);} .as-shell-right{grid-column:1 / -1;position:static;max-height:none;} .advancement-tools-panel{display:grid;grid-template-columns:minmax(180px,.4fr) minmax(220px,.6fr) minmax(300px,1fr);gap:1rem;align-items:start;} .advancement-tools-panel h2{grid-column:1 / -1;margin-bottom:0;}}
@media(max-width:900px){.as-three-panel-shell{grid-template-columns:1fr;} .as-shell-left,.as-shell-right{position:static;max-height:none;} .advancement-compact-grid{grid-template-columns:1fr;} .advancement-tools-panel{display:block;}}


/* ===== v2.9.0 Workspace Framework Standard + Useful Status Footer ===== */
.as-status-footer{
  display:grid;
  gap:.18rem;
  justify-items:center;
  padding:.55rem 1rem .7rem;
  margin-top:1.25rem;
  border-top:1px solid var(--line-soft,#3a3120);
  background:rgba(0,0,0,.22);
  font-size:.82rem;
  line-height:1.25;
}
.as-status-footer .status-footer-line{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:.35rem 1rem;
}
.as-status-footer span{white-space:nowrap;color:var(--bone-dim,#b8ae97);}
.as-status-footer strong,.as-status-footer .site-version-footer-version{color:var(--bone,#ece3ce);font-weight:800;}
.as-status-footer .status-footer-context span{color:var(--muted,#9f9278);}
.workspace-standard-note{
  border:1px solid var(--line-soft,#3a3120);
  border-radius:12px;
  background:rgba(255,255,255,.035);
  padding:.75rem .85rem;
  color:var(--muted,#9f9278);
}
@media(max-width:700px){
  .as-status-footer{justify-items:start;}
  .as-status-footer .status-footer-line{justify-content:flex-start;}
}


/* ===== v2.9.1 Character Workspace Shell Conversion ===== */
.character-shell-layout{align-items:start;}
.character-shell-layout > .character-tab-panel{grid-column:2;min-width:0;}
.character-context-panel h2,.character-widget-dock h2{margin-top:0;}
.character-context-name{
  font-size:1.35rem;
  font-weight:900;
  color:var(--gold,#d7b45a);
  margin:.15rem 0 .85rem;
  line-height:1.15;
  overflow-wrap:anywhere;
}
.character-shell-tabs{
  display:grid;
  grid-template-columns:1fr;
  gap:.45rem;
  margin:1rem 0;
  padding:0;
  border:0;
  background:transparent;
}
.character-shell-tabs button{
  width:100%;
  justify-content:flex-start;
  text-align:left;
  border-radius:10px;
  padding:.6rem .75rem;
}
.character-shell-tabs button.active{
  box-shadow:inset 3px 0 0 var(--gold,#d7b45a), inset 0 0 0 1px rgba(255,209,102,.22);
}
.character-widget-dock{display:grid;gap:1rem;}
.widget-card{
  border:1px solid var(--line-soft,#3a3120);
  border-radius:14px;
  background:rgba(255,255,255,.035);
  padding:1rem;
}
.widget-card h3{margin-top:0;margin-bottom:.55rem;}
.character-notepad-widget textarea{
  width:100%;
  min-height:180px;
  resize:vertical;
  font-family:inherit;
}
.widget-actions{display:flex;flex-wrap:wrap;gap:.5rem;margin:.65rem 0 .35rem;}
.compact-status-stack{margin:.35rem 0 0;}
.character-context-stack.status-stack>div,
.compact-status-stack.status-stack>div{padding:.48rem .62rem;}
.character-context-stack strong,.compact-status-stack strong{font-size:.86rem;}
.character-context-stack span,.compact-status-stack span{font-size:.86rem;}
@media(max-width:1200px){
  .character-shell-layout > .character-tab-panel{grid-column:2;}
  .character-shell-layout > .character-widget-dock{grid-column:1 / -1;position:static;max-height:none;}
  .character-widget-dock{grid-template-columns:repeat(3,minmax(220px,1fr));}
  .character-widget-dock h2{grid-column:1 / -1;}
}
@media(max-width:900px){
  .character-shell-layout > .character-tab-panel,
  .character-shell-layout > .character-widget-dock{grid-column:1;}
  .character-shell-tabs{grid-template-columns:repeat(2,minmax(120px,1fr));}
  .character-widget-dock{grid-template-columns:1fr;}
}

/* v2.9.7 GM Track Board Foundation */
.gm-track-board{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(310px,1fr));
  gap:14px;
}
.gm-track-card{
  border:1px solid var(--line-soft);
  background:var(--bg-2);
  border-radius:12px;
  padding:12px;
}
.gm-track-card.is-encumbered{
  border-color:var(--ember);
  box-shadow:0 0 0 2px rgba(240,112,58,.10);
}
.gm-track-card header{
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:baseline;
  margin-bottom:8px;
}
.gm-track-card header h3{margin:0}
.gm-track-visuals{margin:8px 0 10px}
.gm-track-line{
  display:grid;
  grid-template-columns:78px 1fr 48px;
  gap:8px;
  align-items:center;
  margin:5px 0;
  font-size:12px;
}
.gm-track-line .box{width:13px;height:13px;border-radius:3px}
.gm-load-line{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
  padding:8px;
  border:1px solid var(--line-soft);
  border-radius:10px;
  margin:8px 0 10px;
}
.gm-load-line strong{color:var(--ember-2)}
.gm-load-line em{color:var(--bone-dim)}
.gm-track-form{
  display:grid;
  grid-template-columns:repeat(4,minmax(58px,1fr));
  gap:8px;
  align-items:end;
}
.gm-track-form label{margin:0;font-size:11px}
.gm-track-form input{min-width:0;width:100%;padding:6px 8px}
.gm-track-actions{grid-column:span 4;display:flex;justify-content:flex-end;margin-top:2px}
.gm-track-reset{margin-top:8px;text-align:right}
@media(max-width:760px){
  .gm-track-board{grid-template-columns:1fr}
  .gm-track-form{grid-template-columns:repeat(2,minmax(80px,1fr))}
  .gm-track-actions{grid-column:span 2}
  .gm-track-line{grid-template-columns:76px 1fr 44px}
}

/* v2.9.7a GM Track Board Tabs + Recovery Controls */
.gm-track-tabs{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:10px 0 12px;
}
.gm-track-tab{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:34px;
  padding:7px 12px;
  border:1px solid var(--line-soft);
  border-radius:999px;
  background:rgba(255,255,255,.035);
  color:var(--bone);
  text-decoration:none;
  font-size:13px;
}
.gm-track-tab.active{
  border-color:var(--gold,#d7b45a);
  background:rgba(215,180,90,.16);
  box-shadow:inset 0 0 0 1px rgba(215,180,90,.20);
}
.gm-party-rest{
  display:flex;
  justify-content:flex-end;
  margin:-2px 0 10px;
}
.gm-track-board-single{
  display:block;
}
.gm-track-card-focused{
  max-width:980px;
}
.gm-recovery-actions{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:8px;
  margin-top:8px;
}
.gm-recovery-actions .gm-track-reset{margin-top:0;}
.player-track-note{margin:.25rem 0 .6rem;}
.readonly-track .track-box.readonly{cursor:default;}
@media(max-width:760px){
  .gm-track-tab{flex:1 1 calc(50% - 8px);}
  .gm-party-rest{justify-content:stretch;}
  .gm-party-rest button{width:100%;}
}

/* ===== v2.9.8 Three-Column Standardization + Form Width Rescue =====
   Code-only layout pass. This intentionally overrides old hosted/mobile
   emergency rules that forced several cards and form fields to 40% width.
   Goal: pages use a stable three-column shell when space allows; all card
   controls remain readable and full-width inside their cards, especially on
   mobile. */
*, *::before, *::after{box-sizing:border-box;}

/* Standard page/workspace shells. */
body .grid,
body .gm-grid,
body .workspace-grid,
body .workspace-shell,
body .campaign-grid,
body .sessions-grid,
body .admin-grid,
body .as-three-panel-shell{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:18px !important;
  align-items:start !important;
  width:100% !important;
  max-width:100% !important;
}

/* Dedicated three-panel shell keeps center content a little stronger. */
body .as-three-panel-shell,
body .character-shell-layout{
  grid-template-columns:minmax(220px,.85fr) minmax(360px,1.35fr) minmax(260px,.95fr) !important;
}

/* Full-width panels and diagnostic/work boards. */
body .wide-panel,
body .panel.wide,
body .wide,
body .workspace-wide,
body .full-width,
body .gm-track-board-panel{
  grid-column:1 / -1 !important;
}

/* Cards/panels must never crush their children into slivers. */
body .panel,
body .subpanel,
body .card,
body .widget-card,
body .roll-card,
body .catalog-edit-card,
body .compact-row,
body .compact-body,
body .user-row,
body .ability-editor-block,
body .character-ability-editors,
body .scope-resolver-card,
body .existing-scope-resolver,
body .identity-fields,
body .catalog-layout,
body .catalog-side-stack,
body .catalog-main,
body .catalog-name-list{
  min-width:0 !important;
  max-width:100% !important;
  width:100% !important;
  box-sizing:border-box !important;
}

/* Universal card form width rule. */
body .panel input,
body .panel select,
body .panel textarea,
body .subpanel input,
body .subpanel select,
body .subpanel textarea,
body .card input,
body .card select,
body .card textarea,
body .widget-card input,
body .widget-card select,
body .widget-card textarea,
body .roll-card input,
body .roll-card select,
body .roll-card textarea,
body .catalog-edit-card input,
body .catalog-edit-card select,
body .catalog-edit-card textarea,
body .compact-body input,
body .compact-body select,
body .compact-body textarea,
body .user-row input,
body .user-row select,
body .user-row textarea,
body .identity-fields input,
body .identity-fields select,
body .identity-fields textarea,
body .ability-editor-block input,
body .ability-editor-block select,
body .ability-editor-block textarea,
body .scope-resolver-card input,
body .scope-resolver-card select,
body .scope-resolver-card textarea,
body .existing-scope-resolver input,
body .existing-scope-resolver select,
body .existing-scope-resolver textarea{
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  box-sizing:border-box !important;
}

/* Checkboxes/radio buttons should not become huge. */
body input[type="checkbox"],
body input[type="radio"],
body .inline input[type="checkbox"],
body .inline input[type="radio"]{
  width:auto !important;
  min-width:0 !important;
  max-width:none !important;
}

/* Buttons should wrap as rows, not force fields into tiny columns. */
body .button-row,
body .form-actions,
body .editor-actions,
body .add-control-row,
body .compact-add,
body .widget-actions,
body .gm-recovery-actions,
body .gm-track-actions{
  display:flex !important;
  flex-wrap:wrap !important;
  gap:8px !important;
  align-items:center !important;
}
body button,
body .button-link{
  max-width:100% !important;
  white-space:normal;
}

/* Catalog pages: three-column when roomy, focused two/one-column on smaller screens. */
body .catalog-layout{
  display:grid !important;
  grid-template-columns:minmax(240px,.8fr) minmax(360px,1.25fr) minmax(260px,.95fr) !important;
  gap:18px !important;
  align-items:start !important;
}
body .catalog-form-grid,
body .mini-grid,
body .check-grid,
body .equip-fields,
body .pool-grid,
body .cards,
body .stats{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr)) !important;
  gap:10px !important;
  align-items:end;
}

/* User admin rows are cards, not six crushed columns. */
body .user-row{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(120px,.45fr) minmax(110px,.35fr) minmax(0,1fr) auto !important;
  gap:10px !important;
  align-items:end !important;
}
body .user-row label{
  width:100% !important;
  max-width:100% !important;
}
body .user-row > strong,
body .user-row small{
  overflow-wrap:anywhere !important;
}

/* Character editor columns stack inside the center panel; the page shell handles columns. */
body .character-ability-editors{
  display:flex !important;
  flex-direction:column !important;
  gap:16px !important;
}
body .ability-editor-block .compact-editor,
body .ability-editor-block .editor-actions,
body .ability-editor-block .add-row,
body .ability-editor-block .compact-add,
body .ability-editor-block .add-control-row{
  width:100% !important;
  max-width:100% !important;
}
body form#characterForm > .identity-fields,
body main .panel .identity-fields{
  display:grid !important;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr)) !important;
  gap:12px !important;
}
body form#characterForm > .identity-fields label,
body main .panel .identity-fields label{
  width:100% !important;
  max-width:100% !important;
}

/* Track and equipment rows keep labels plus controls readable. */
body .track,
body .gm-track-line{
  grid-template-columns:minmax(76px,.45fr) minmax(160px,1fr) minmax(44px,.25fr) !important;
}
body .equip-head{
  flex-wrap:wrap !important;
}
body .equip-head input,
body .equip-head select{
  flex:1 1 180px !important;
}

@media(max-width:1280px){
  body .grid,
  body .gm-grid,
  body .workspace-grid,
  body .workspace-shell,
  body .campaign-grid,
  body .sessions-grid,
  body .admin-grid,
  body .as-three-panel-shell,
  body .character-shell-layout,
  body .catalog-layout{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
  body .as-shell-right,
  body .character-widget-dock,
  body .wide-panel,
  body .panel.wide,
  body .wide{
    grid-column:1 / -1 !important;
  }
  body .user-row{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
}

@media(max-width:760px){
  body .grid,
  body .gm-grid,
  body .workspace-grid,
  body .workspace-shell,
  body .campaign-grid,
  body .sessions-grid,
  body .admin-grid,
  body .as-three-panel-shell,
  body .character-shell-layout,
  body .catalog-layout,
  body .user-row{
    grid-template-columns:minmax(0,1fr) !important;
  }
  body .panel,
  body .subpanel,
  body .card,
  body .widget-card,
  body .roll-card{
    padding-left:12px;
    padding-right:12px;
  }
  body form#characterForm > .identity-fields,
  body main .panel .identity-fields{
    grid-template-columns:minmax(0,1fr) !important;
  }
  body .track,
  body .gm-track-line{
    grid-template-columns:minmax(72px,.42fr) minmax(0,1fr) minmax(38px,.22fr) !important;
  }
}


/* ===== v2.9.8b Page-by-Page Workspace Conversion =====
   Code-only conversion pass. This section targets the legacy pages that were
   not using the shared workspace shell yet. No database/catalog behavior. */
body .gm-dashboard-shell,
body .session-workspace-converted,
body .spell-viewer-shell,
body .admin-users-shell,
body .catalog-admin-grid,
body .spell-admin-grid{
  display:grid !important;
  grid-template-columns:minmax(240px,.9fr) minmax(380px,1.35fr) minmax(260px,1fr) !important;
  gap:18px !important;
  align-items:start !important;
  width:100% !important;
  max-width:100% !important;
}
body .gm-dashboard-shell > .wide-panel,
body .gm-dashboard-shell > #gm-track-board,
body .session-workspace-converted > .wide-panel,
body .session-workspace-converted > .session-ledger-panel,
body .spell-viewer-shell > .wide-panel,
body .spell-viewer-shell > .spell-results-panel,
body .admin-users-shell > .user-admin-existing,
body .catalog-admin-grid > .spell-list-panel,
body .spell-admin-grid > .spell-list-panel{
  grid-column:1 / -1 !important;
}
body .session-workspace-converted > .session-workspace-main,
body .session-workspace-converted > .session-workspace-side{
  display:contents !important;
}
body .session-workspace-converted .panel,
body .gm-dashboard-shell .panel,
body .spell-viewer-shell .panel,
body .admin-users-shell .panel,
body .catalog-admin-grid .panel{
  min-width:0 !important;
  max-width:100% !important;
}
body .spell-viewer-shell table,
body .catalog-admin-grid table,
body .admin-users-shell table{
  width:100% !important;
}
body .spell-viewer-shell .download-row,
body .catalog-admin-grid .download-row,
body .admin-users-shell .actions,
body .gm-dashboard-shell .actions{
  display:flex !important;
  flex-wrap:wrap !important;
  gap:8px !important;
}
body .admin-users-shell .user-row{
  display:grid !important;
  grid-template-columns:repeat(3,minmax(160px,1fr)) !important;
  gap:10px !important;
  padding:12px !important;
  margin:0 0 12px !important;
  border:1px solid var(--line-soft) !important;
  border-radius:12px !important;
  background:rgba(255,255,255,.025) !important;
}
body .admin-users-shell .user-row > strong,
body .admin-users-shell .user-row > small{
  grid-column:1 / -1 !important;
}
body .admin-users-shell .user-row > button{
  justify-self:start !important;
}
body .catalog-admin-grid .catalog-form-column,
body .spell-admin-grid .catalog-form-column{
  display:contents !important;
}
body .catalog-admin-grid .catalog-form-column > .panel,
body .spell-admin-grid .catalog-form-column > .panel{
  width:100% !important;
}
@media(max-width:1280px){
  body .gm-dashboard-shell,
  body .session-workspace-converted,
  body .spell-viewer-shell,
  body .admin-users-shell,
  body .catalog-admin-grid,
  body .spell-admin-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
  body .admin-users-shell .user-row{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
}
@media(max-width:760px){
  body .gm-dashboard-shell,
  body .session-workspace-converted,
  body .spell-viewer-shell,
  body .admin-users-shell,
  body .catalog-admin-grid,
  body .spell-admin-grid,
  body .admin-users-shell .user-row{
    grid-template-columns:minmax(0,1fr) !important;
  }
  body .session-workspace-converted > .session-workspace-main,
  body .session-workspace-converted > .session-workspace-side,
  body .catalog-admin-grid .catalog-form-column,
  body .spell-admin-grid .catalog-form-column{
    display:block !important;
  }
}

/* ===== v2.9.8c Workspace Conversion Corrections =====
   Code-only correction pass. Spells uses a compact index + selected card
   instead of rendering hundreds of full cards in one column. GM/Campaign
   pages get sizing corrections without forcing every admin tool into one
   rigid workspace shape. */
body .spell-compact-shell{
  grid-template-columns:minmax(250px,.75fr) minmax(300px,.95fr) minmax(420px,1.35fr) !important;
  align-items:start !important;
}
body .spell-compact-shell > .panel{
  grid-column:auto !important;
}
body .spell-control-panel,
body .spell-index-panel,
body .spell-detail-panel{
  min-width:0 !important;
  max-width:100% !important;
}
body .spell-index-panel,
body .spell-detail-panel{
  max-height:calc(100vh - 170px);
  overflow:auto;
}
body .spell-filter-panel{
  display:grid !important;
  grid-template-columns:1fr !important;
  gap:10px !important;
}
body .spell-compact-index{
  display:grid;
  gap:5px;
}
body .spell-compact-index h3{
  margin:14px 0 4px;
  padding-top:10px;
  border-top:1px solid var(--line-soft,#3a3120);
  font-size:1.08rem;
  color:var(--bone,#ece3ce);
}
body .spell-compact-index h3:first-child{
  margin-top:0;
  padding-top:0;
  border-top:0;
}
body .spell-compact-index h4{
  margin:7px 0 3px;
  font-family:inherit;
  font-size:.85rem;
  letter-spacing:.03em;
  text-transform:uppercase;
  color:var(--muted,#9f9278);
}
body .spell-index-link{
  display:block;
  padding:7px 9px;
  border:1px solid var(--line-soft,#3a3120);
  border-radius:9px;
  background:rgba(0,0,0,.14);
  text-decoration:none;
  line-height:1.2;
}
body .spell-index-link.active{
  border-color:var(--gold,#d7b45a);
  color:var(--gold,#d7b45a);
  background:rgba(255,209,102,.08);
  box-shadow:inset 3px 0 0 var(--gold,#d7b45a);
}
body .spell-detail-panel .spell-card{
  margin:0;
}

/* GM dashboard: keep the overview in the left rail, then let the active
   track card occupy the working area without becoming a full-page slab. */
body .gm-dashboard-shell > #campaign-overview{
  grid-column:1 !important;
}
body .gm-dashboard-shell > #gm-track-board{
  grid-column:2 / -1 !important;
}
body .gm-dashboard-shell > #gm-track-board .gm-track-board-single{
  grid-template-columns:1fr !important;
}
body .gm-dashboard-shell > #gm-track-board .gm-track-card-focused{
  max-width:980px;
}
body .gm-dashboard-shell > .panel.wide-panel:not(#gm-track-board){
  grid-column:1 / -1 !important;
}

/* Campaign workspace: keep the directory as the left rail and make the
   selected campaign workspace the remaining work area. */
body .campaign-workspace-layout{
  display:grid !important;
  grid-template-columns:minmax(250px,.72fr) minmax(0,1.35fr) minmax(0,1.05fr) !important;
  gap:18px !important;
  align-items:start !important;
}
body .campaign-workspace-layout > .campaign-list-panel{
  grid-column:1 !important;
  min-width:0 !important;
}
body .campaign-workspace-layout > .campaign-workspace-main{
  grid-column:2 / -1 !important;
  min-width:0 !important;
}
body .campaign-workspace-main{
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:18px !important;
  align-items:start !important;
}
body .campaign-workspace-main > .campaign-context-panel,
body .campaign-workspace-main > .campaign-overview-panel,
body .campaign-workspace-main > .campaign-tab-grid,
body .campaign-workspace-main > .campaign-session-workspace{
  grid-column:1 / -1 !important;
}
body .campaign-tab-grid,
body .campaign-session-workspace{
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:18px !important;
  align-items:start !important;
}

/* Admin tools are not all workspaces. Do not force diagnostic/list-heavy admin
   tools into cramped columns unless their page markup explicitly asks for it. */
body .admin-users-shell > .wide-panel,
body .admin-users-shell > .user-admin-existing{
  grid-column:1 / -1 !important;
}

@media(max-width:1280px){
  body .spell-compact-shell,
  body .campaign-workspace-layout{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
  body .spell-detail-panel,
  body .campaign-workspace-layout > .campaign-workspace-main,
  body .gm-dashboard-shell > #gm-track-board{
    grid-column:1 / -1 !important;
  }
  body .campaign-workspace-main,
  body .campaign-tab-grid,
  body .campaign-session-workspace{
    grid-template-columns:1fr !important;
  }
}
@media(max-width:760px){
  body .spell-compact-shell,
  body .campaign-workspace-layout,
  body .campaign-workspace-main,
  body .campaign-tab-grid,
  body .campaign-session-workspace{
    grid-template-columns:1fr !important;
  }
  body .spell-index-panel,
  body .spell-detail-panel{
    max-height:none;
    overflow:visible;
  }
}

/* ========================================================================== */
/* v3.0.0 Internal — Mobile Interface Standardization                         */
/* Purpose: establish the mobile-first component shell for all future pages.   */
/* Palette remains the existing forge palette from :root.                     */
/* ========================================================================== */

:root{
  --as-mobile-gutter:10px;
  --as-card-gap:14px;
  --as-touch-target:44px;
  --as-rail-left: minmax(220px,.82fr);
  --as-rail-center: minmax(340px,1.38fr);
  --as-rail-right: minmax(250px,.95fr);
}

/* Reset old emergency-width rules at the final cascade point. */
html,body,.wrap,.site-banner,.site-banner-compact,.site-banner-row,
.panel,.subpanel,.card,.widget-card,.roll-card,.catalog-edit-card,
.grid,.gm-grid,.workspace-grid,.workspace-shell,.campaign-grid,.sessions-grid,
.admin-grid,.as-three-panel-shell,.character-shell-layout,.catalog-layout,
.character-tab-panel,.character-widget-dock,.as-shell-left,.as-shell-right,
.character-ability-editors,.ability-editor-block,.compact-editor,.compact-row,
.compact-body,.identity-fields,.existing-scope-resolver,.scope-resolver-card{
  min-width:0 !important;
  max-width:100% !important;
  box-sizing:border-box !important;
}

html,body{width:100% !important;overflow-x:hidden !important;}
.wrap{width:100% !important;max-width:1480px !important;margin:0 auto !important;padding:20px 16px 56px !important;}

/* Canonical shell: one column first. Desktop grows into three rails. */
.as-three-panel-shell,
.character-shell-layout,
.gm-dashboard-shell,
.campaign-workspace-layout,
.session-workspace-converted,
.spell-compact-shell,
.admin-users-shell,
.catalog-admin-grid,
.spell-admin-grid,
.workspace-shell,
.workspace-grid{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) !important;
  gap:var(--as-card-gap) !important;
  align-items:start !important;
  width:100% !important;
}

@media(min-width:1000px){
  .as-three-panel-shell,
  .character-shell-layout,
  .workspace-shell,
  .workspace-grid{
    grid-template-columns:var(--as-rail-left) var(--as-rail-center) var(--as-rail-right) !important;
  }
  .gm-dashboard-shell,
  .campaign-workspace-layout,
  .session-workspace-converted,
  .spell-compact-shell,
  .admin-users-shell,
  .catalog-admin-grid,
  .spell-admin-grid{
    grid-template-columns:minmax(240px,.85fr) minmax(360px,1.3fr) minmax(260px,1fr) !important;
  }
}

@media(min-width:1280px){
  .as-shell-left,.as-shell-right,.character-context-panel,.character-widget-dock{
    position:sticky;
    top:14px;
    max-height:calc(100vh - 28px);
    overflow:auto;
    scrollbar-gutter:stable;
  }
}

/* Wide/ledger/table/diagnostic panels stay intentionally wide. */
.wide-panel,.panel.wide,.workspace-wide,.full-width-panel,.full-width,
.session-ledger-panel,.campaign-advancement-history,.campaign-xp-ledger-panel,
.gm-track-board-panel,.spell-results-panel,.admin-diagnostic-panel,
.admin-tool-wide,.repair-wide{
  grid-column:1 / -1 !important;
}

/* Standard card surfaces. */
.panel,.subpanel,.widget-card,.roll-card,.spell-card,.catalog-edit-card,
.workspace-card,.gm-track-card,.note-snippet,.campaign-note-preview{
  border-radius:14px;
  min-width:0 !important;
  overflow-wrap:break-word;
}

/* Touch-first controls. */
button,.button-link,input,select,textarea,summary{
  max-width:100% !important;
  box-sizing:border-box !important;
}
button,.button-link,.workspace-tab,.gm-track-tab,.spell-index-link,
.nav-menu > summary,.admin-nav-menu > summary,.account-nav-menu > summary{
  min-height:var(--as-touch-target);
}
input,select,textarea{
  width:100% !important;
  min-width:0 !important;
}
input[type="checkbox"],input[type="radio"]{
  width:auto !important;
  min-width:0 !important;
}

/* Labels are structural, not layout traps. Placeholder text should carry simple meanings where possible. */
label{min-width:0 !important;max-width:100% !important;}
label > span:first-child:empty{display:none;}

/* Canonical form grids. */
.two,.three,.six,.stats,.mini-grid,.check-grid,.catalog-form-grid,
.equip-fields,.pool-grid,.character-overview-grid,.character-history-grid,
.identity-fields,.character-overview-identity,.import-review-form .three,
.import-review-form .six,.import-review-form .two{
  display:grid !important;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr)) !important;
  gap:10px !important;
  align-items:end !important;
}

/* Tool/action rows wrap cleanly rather than crushing fields. */
.actions,.form-actions,.button-row,.editor-actions,.backup-actions,.download-row,
.widget-actions,.gm-recovery-actions,.gm-track-actions,.campaign-context-actions,
.workspace-tabs,.workspace-tab-row,.global-workspace-nav,.global-domain-tabs,
.character-workspace-tabs,.section-tab-bar.character-workspace-tabs{
  display:flex !important;
  flex-wrap:wrap !important;
  gap:8px !important;
  align-items:center !important;
  min-width:0 !important;
  max-width:100% !important;
}

/* Primary navigation is horizontally scrollable on small screens instead of wrapping into a tall pile. */
.global-workspace-nav,.global-domain-tabs,.main-character-nav,.character-workspace-tabs,
.section-tab-bar.character-workspace-tabs,.gm-track-tabs{
  overflow-x:auto !important;
  overflow-y:visible !important;
  -webkit-overflow-scrolling:touch !important;
  scrollbar-gutter:stable;
}
.global-workspace-nav > *,.global-domain-tabs > *,.main-character-nav > *,
.character-workspace-tabs > *,.section-tab-bar.character-workspace-tabs > *,
.gm-track-tabs > *{
  flex:0 0 auto !important;
}

@media(min-width:1000px){
  .global-workspace-nav,.global-domain-tabs,.main-character-nav,
  .character-workspace-tabs,.section-tab-bar.character-workspace-tabs{
    overflow:visible !important;
    display:grid !important;
    grid-auto-flow:column !important;
    grid-auto-columns:minmax(104px,1fr) !important;
    align-items:stretch !important;
  }
  .global-workspace-nav > *,.global-domain-tabs > *,.main-character-nav > *,
  .character-workspace-tabs > *,.section-tab-bar.character-workspace-tabs > *{
    width:100% !important;
  }
}

/* Right-column widgets: context should make these identifiable, so don't force decorative labels. */
.character-widget-dock > h2,
.widget-dock-title,
.widget-dock-heading,
.widget-dock-label{
  display:none !important;
}
.character-widget-dock,.widget-dock,.as-widget-dock{
  display:grid !important;
  gap:14px !important;
}
.widget-card textarea[placeholder]{min-height:160px;}

/* Compact list -> selected card pattern foundation. */
.as-compact-list,.spell-compact-index,.catalog-name-list,.mini-ledger-list{
  display:grid !important;
  gap:6px !important;
}
.as-list-item,.spell-index-link,.catalog-name,.gm-track-tab{
  text-decoration:none;
  border:1px solid var(--line-soft);
  border-radius:10px;
  background:rgba(0,0,0,.14);
  padding:8px 10px;
}
.as-list-item.active,.spell-index-link.active,.catalog-name.selected,.gm-track-tab.active{
  border-color:var(--gold);
  color:var(--gold);
  box-shadow:inset 3px 0 0 var(--gold);
  background:rgba(215,180,90,.10);
}
.as-detail-card,.spell-detail-panel,.catalog-edit-panel{
  min-width:0 !important;
}

/* Spell viewer remains a deliberate exception: compact index and single detail card. */
.spell-compact-shell > .spell-index-panel,
.spell-compact-shell > .spell-detail-panel{
  max-height:none;
}
@media(min-width:1000px){
  .spell-compact-shell > .spell-index-panel,
  .spell-compact-shell > .spell-detail-panel{
    max-height:calc(100vh - 170px);
    overflow:auto;
    scrollbar-gutter:stable;
  }
}

/* Admin tables and diagnostic pages should scroll horizontally, not become unreadable. */
.table-scroll,.table-wrap,.catalog-table-wrap,.audit-events-scroll,
.campaign-overview-scroll,.campaign-roster-scroll,.campaign-requests-scroll,
.campaign-rules-scroll,.gm-status-scroll,.recent-rolls-scroll,.admin-health-scroll,
.budget-entry-diagnostics{
  width:100% !important;
  max-width:100% !important;
  overflow-x:auto !important;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch !important;
}
.table-scroll > table,.table-wrap > table,.catalog-table-wrap > table,
.audit-events-scroll > table,.campaign-overview-scroll > table,.campaign-roster-scroll > table,
.campaign-requests-scroll > table,.campaign-rules-scroll > table,.gm-status-scroll > table,
.recent-rolls-scroll > table,.admin-health-scroll > table,.budget-entry-diagnostics > table{
  width:max-content !important;
  max-width:none !important;
  min-width:min(760px,100%) !important;
  table-layout:auto !important;
}

/* Mobile page polish. */
@media(max-width:760px){
  .wrap{padding:12px var(--as-mobile-gutter) 48px !important;}
  .panel,.subpanel,.widget-card,.roll-card,.spell-card,.catalog-edit-card{
    padding:14px !important;
  }
  .two,.three,.six,.stats,.mini-grid,.check-grid,.catalog-form-grid,
  .equip-fields,.pool-grid,.character-overview-grid,.character-history-grid,
  .identity-fields,.character-overview-identity{
    grid-template-columns:minmax(0,1fr) !important;
  }
  .actions,.form-actions,.button-row,.editor-actions,.backup-actions,.download-row,
  .widget-actions,.gm-recovery-actions,.gm-track-actions,.campaign-context-actions{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) !important;
    align-items:stretch !important;
  }
  .actions > *,.form-actions > *,.button-row > *,.editor-actions > *,
  .backup-actions > *,.download-row > *,.widget-actions > *,
  .gm-recovery-actions > *,.gm-track-actions > *,.campaign-context-actions > *,
  button,.button-link{
    width:100%;
  }
  .track,.gm-track-line{
    grid-template-columns:minmax(72px,.42fr) minmax(0,1fr) minmax(38px,.22fr) !important;
  }
  .boxes{gap:4px;}
  .box{width:16px;height:16px;}
}

/* Developer note: v3 uses existing variables only. New artwork should harmonize with the forge palette. */

/* ===== v3.0.0a mobile workspace state hotfix =====
   Keep the character tab rail usable on phones and make the restored/active
   tab visible after refresh, save, or browser repaint. */
.character-workspace-tabs,
.character-shell-tabs{
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  scroll-snap-type:x proximity;
  flex-wrap:nowrap;
  justify-content:flex-start;
  max-width:100%;
}
.character-workspace-tabs [data-character-tab],
.character-shell-tabs [data-character-tab]{
  scroll-snap-align:center;
  white-space:nowrap;
}
@media (max-width: 760px){
  .character-context-panel{
    position:static !important;
    top:auto !important;
  }
  .character-workspace-tabs,
  .character-shell-tabs{
    display:flex !important;
    gap:6px;
    padding:6px 4px 10px;
    margin-left:-2px;
    margin-right:-2px;
  }
  .character-workspace-tabs [data-character-tab],
  .character-shell-tabs [data-character-tab]{
    flex:0 0 auto !important;
    min-width:auto !important;
    width:auto !important;
    padding:8px 10px !important;
    font-size:12px !important;
    line-height:1.15;
  }
  .character-workspace-tabs [data-character-tab].active,
  .character-shell-tabs [data-character-tab].active{
    outline:2px solid rgba(245,190,85,.75);
    outline-offset:1px;
  }
}

/* ===== v3.0.0b tab rail containment + dependable mobile refresh state ===== */
html, body{
  max-width:100%;
  overflow-x:hidden;
}
.section-tab-bar,
.character-workspace-tabs,
.character-shell-tabs{
  width:100%;
  max-width:100%;
  min-width:0;
  box-sizing:border-box;
  flex-wrap:nowrap !important;
  overflow-x:auto;
  overflow-y:hidden;
  overscroll-behavior-x:contain;
  -webkit-overflow-scrolling:touch;
  scroll-snap-type:x proximity;
}
.section-tab-bar button,
.character-workspace-tabs button,
.character-shell-tabs button{
  flex:0 0 auto !important;
  min-width:112px;
  max-width:190px;
  white-space:nowrap;
  scroll-snap-align:center;
}
.character-tab-layout,
.character-tab-panel,
.sheet-tab-section,
.panel,
.box,
main{
  min-width:0;
  max-width:100%;
  box-sizing:border-box;
}
@media(max-width:520px){
  .section-tab-bar button,
  .character-workspace-tabs button,
  .character-shell-tabs button{
    min-width:118px;
    max-width:168px;
    font-size:13px;
    padding:9px 8px;
  }
}


/* ===== v3.0.0c Workspace Rail Containment + Restore Stabilization =====
   The previous grid-based global nav could create page-level horizontal overflow
   on laptop after state restoration. Character tabs also need to remain inside
   their own rail on desktop and mobile. These rules keep overflow local to the
   nav rail, not the whole page. */
html, body{
  max-width:100%;
  overflow-x:hidden;
}
.wrap,
.workspace-shell-top,
.character-shell-layout,
.character-context-panel,
.character-tab-panel,
.character-tab-extra-panel{
  min-width:0 !important;
  max-width:100% !important;
  box-sizing:border-box !important;
}
body .global-workspace-nav{
  display:flex !important;
  flex-wrap:nowrap !important;
  justify-content:flex-start !important;
  align-items:stretch !important;
  gap:8px !important;
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  overflow-x:auto !important;
  overflow-y:visible !important;
  overscroll-behavior-x:contain !important;
  -webkit-overflow-scrolling:touch !important;
}
body .global-workspace-nav > .button-link,
body .global-workspace-nav > .nav-menu,
body .global-workspace-nav > .admin-nav-menu,
body .global-workspace-nav > .account-nav-menu{
  flex:0 0 auto !important;
  width:auto !important;
  max-width:none !important;
}
body .global-workspace-nav .button-link,
body .global-workspace-nav .nav-menu > summary,
body .global-workspace-nav .admin-nav-menu > summary,
body .global-workspace-nav .account-nav-menu > summary{
  min-width:96px !important;
  max-width:170px !important;
  white-space:nowrap !important;
}
body .section-tab-bar.character-workspace-tabs,
body .character-workspace-tabs,
body #characterTabBar{
  display:flex !important;
  flex-wrap:nowrap !important;
  justify-content:flex-start !important;
  align-items:stretch !important;
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  overflow-x:auto !important;
  overflow-y:hidden !important;
  overscroll-behavior-x:contain !important;
  -webkit-overflow-scrolling:touch !important;
  box-sizing:border-box !important;
  scroll-behavior:auto !important;
}
body .section-tab-bar.character-workspace-tabs button,
body .character-workspace-tabs button,
body #characterTabBar button{
  flex:0 0 auto !important;
  width:auto !important;
  min-width:86px !important;
  max-width:132px !important;
  white-space:nowrap !important;
  box-sizing:border-box !important;
}
@media(max-width:760px){
  body .global-workspace-nav .button-link,
  body .global-workspace-nav .nav-menu > summary,
  body .global-workspace-nav .admin-nav-menu > summary,
  body .global-workspace-nav .account-nav-menu > summary{
    min-width:92px !important;
    max-width:138px !important;
    font-size:13px !important;
  }
  body .section-tab-bar.character-workspace-tabs button,
  body .character-workspace-tabs button,
  body #characterTabBar button{
    min-width:82px !important;
    max-width:118px !important;
    font-size:13px !important;
  }
}


/* ===== v3.0.0e Laptop Primary Nav Rail Clamp =====
   v3.0.0c still allowed old button width:100% rules to leak into flex sizing.
   Desktop/laptop primary nav now uses equal-width flex cells; mobile keeps local horizontal scroll. */
body .workspace-shell-top > nav.global-workspace-nav,
body nav.global-workspace-nav.user-nav{
  display:flex !important;
  flex-wrap:nowrap !important;
  align-items:stretch !important;
  justify-content:flex-start !important;
  gap:8px !important;
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  overflow-x:auto !important;
  overflow-y:visible !important;
  box-sizing:border-box !important;
}
body .workspace-shell-top > nav.global-workspace-nav > a.button-link,
body nav.global-workspace-nav.user-nav > a.button-link,
body .workspace-shell-top > nav.global-workspace-nav > details.nav-menu,
body .workspace-shell-top > nav.global-workspace-nav > details.admin-nav-menu,
body .workspace-shell-top > nav.global-workspace-nav > details.account-nav-menu,
body nav.global-workspace-nav.user-nav > details.nav-menu,
body nav.global-workspace-nav.user-nav > details.admin-nav-menu,
body nav.global-workspace-nav.user-nav > details.account-nav-menu{
  flex:1 1 0 !important;
  width:auto !important;
  min-width:0 !important;
  max-width:none !important;
  box-sizing:border-box !important;
}
body .workspace-shell-top > nav.global-workspace-nav > a.button-link,
body nav.global-workspace-nav.user-nav > a.button-link,
body .workspace-shell-top > nav.global-workspace-nav > details > summary,
body nav.global-workspace-nav.user-nav > details > summary{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:100% !important;
  min-width:0 !important;
  max-width:100% !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}
@media(max-width:760px){
  body .workspace-shell-top > nav.global-workspace-nav > a.button-link,
  body nav.global-workspace-nav.user-nav > a.button-link,
  body .workspace-shell-top > nav.global-workspace-nav > details.nav-menu,
  body .workspace-shell-top > nav.global-workspace-nav > details.admin-nav-menu,
  body .workspace-shell-top > nav.global-workspace-nav > details.account-nav-menu,
  body nav.global-workspace-nav.user-nav > details.nav-menu,
  body nav.global-workspace-nav.user-nav > details.admin-nav-menu,
  body nav.global-workspace-nav.user-nav > details.account-nav-menu{
    flex:0 0 112px !important;
    min-width:112px !important;
    max-width:140px !important;
  }
}


/* ===== v3.0.0f Normal Page Scroll + Stable Navigation Polish =====
   Undo v3.0.0e's over-aggressive page/card containment. The browser owns
   vertical page scrolling. Only rails/tables get local scrollbars. */
html, body{
  overflow-x:hidden !important;
  overflow-y:auto !important;
  height:auto !important;
  max-height:none !important;
}
.wrap,
.workspace-shell-top,
.character-shell-layout,
.as-three-panel-shell,
.gm-dashboard-shell,
.character-tab-panel,
.character-context-panel,
.character-widget-dock,
.as-shell-left,
.as-shell-right{
  overflow-y:visible !important;
  max-height:none !important;
  height:auto !important;
}
@media(min-width:1280px){
  .as-shell-left,
  .as-shell-right,
  .character-context-panel,
  .character-widget-dock{
    position:static !important;
    top:auto !important;
    max-height:none !important;
    overflow:visible !important;
    scrollbar-gutter:auto !important;
  }
}
/* Keep horizontal rail containment without creating iframe-like vertical bars. */
body .workspace-shell-top > nav.global-workspace-nav,
body nav.global-workspace-nav.user-nav,
body .global-workspace-nav,
body .main-character-nav,
body .character-workspace-tabs,
body .section-tab-bar.character-workspace-tabs,
body #characterTabBar{
  overflow-x:auto !important;
  overflow-y:visible !important;
  max-height:none !important;
  height:auto !important;
}
body .character-workspace-tabs,
body .section-tab-bar.character-workspace-tabs,
body #characterTabBar{
  overflow-y:hidden !important;
}
/* Same nav model everywhere: admin pages use the same account dropdown cell. */
body nav.user-nav.global-workspace-nav > details.account-nav-menu > summary{
  text-align:center !important;
}
body nav.user-nav.global-workspace-nav > a[href$="logout.php"]{
  display:none !important;
}
/* Align card starts/headings across the character workspace. */
.character-shell-layout,
.as-three-panel-shell{
  align-items:start !important;
}
.character-shell-layout > .panel,
.character-shell-layout > .character-tab-panel,
.character-shell-layout > .character-widget-dock,
.character-shell-layout > .character-widget-dock > .widget-card,
.as-three-panel-shell > .panel,
.as-three-panel-shell > .character-tab-panel,
.as-three-panel-shell > .character-widget-dock,
.as-three-panel-shell > .character-widget-dock > .widget-card{
  margin-top:0 !important;
}
.character-shell-layout h1:first-child,
.character-shell-layout h2:first-child,
.character-shell-layout h3:first-child,
.character-shell-layout .widget-card h1:first-child,
.character-shell-layout .widget-card h2:first-child,
.character-shell-layout .widget-card h3:first-child,
.as-three-panel-shell h1:first-child,
.as-three-panel-shell h2:first-child,
.as-three-panel-shell h3:first-child{
  margin-top:0 !important;
}
/* Local vertical scrolling remains allowed only for intentionally bounded data lists. */
.navigator-bounded .table-scroll,
.navigator-large .table-scroll,
.campaign-attendance-panel,
.campaign-session-list-scroll,
.campaign-xp-status-scroll,
.catalog-name-list,
.spell-compact-shell > .spell-index-panel,
.spell-compact-shell > .spell-detail-panel{
  overflow-y:auto !important;
}


/* ===== v3.0.0g Role Landing + Nav Rail Correction =====
   Fixes v3.0.0f overcorrection: global nav should not become a scrolling
   iframe-like rail on laptop/desktop. Character local tabs return to the
   intended left-column vertical stack on laptop and compact grid on phones.
   The browser remains the only vertical page scroller. */
html, body{
  overflow-x:hidden !important;
  overflow-y:auto !important;
  height:auto !important;
  max-height:none !important;
}
.wrap,
.workspace-shell-top,
.top,
.as-three-panel-shell,
.character-shell-layout,
.character-tab-panel,
.character-context-panel,
.character-widget-dock,
.as-shell-left,
.as-shell-right{
  overflow-y:visible !important;
  height:auto !important;
  max-height:none !important;
  scrollbar-gutter:auto !important;
}

/* Global site nav: stable buttons, wraps when needed, no horizontal scrollbar. */
body nav.global-workspace-nav,
body nav.user-nav.global-workspace-nav,
body .workspace-shell-top > nav.global-workspace-nav{
  display:flex !important;
  flex-wrap:wrap !important;
  align-items:center !important;
  justify-content:flex-end !important;
  gap:8px !important;
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  overflow-x:visible !important;
  overflow-y:visible !important;
  padding-bottom:0 !important;
}
body nav.global-workspace-nav > a.button-link,
body nav.global-workspace-nav > details.nav-menu,
body nav.global-workspace-nav > details.admin-nav-menu,
body nav.global-workspace-nav > details.account-nav-menu,
body .workspace-shell-top > nav.global-workspace-nav > a.button-link,
body .workspace-shell-top > nav.global-workspace-nav > details.nav-menu,
body .workspace-shell-top > nav.global-workspace-nav > details.admin-nav-menu,
body .workspace-shell-top > nav.global-workspace-nav > details.account-nav-menu{
  flex:0 1 auto !important;
  width:auto !important;
  min-width:104px !important;
  max-width:none !important;
}
body nav.global-workspace-nav > a.button-link,
body nav.global-workspace-nav > details > summary,
body .workspace-shell-top > nav.global-workspace-nav > a.button-link,
body .workspace-shell-top > nav.global-workspace-nav > details > summary{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:auto !important;
  min-width:104px !important;
  max-width:none !important;
  white-space:nowrap !important;
  overflow:visible !important;
  text-overflow:clip !important;
}
body nav.global-workspace-nav > a[href$="logout.php"]{
  display:none !important;
}

/* Character workspace local tabs: laptop/desktop uses the left rail, not a horizontal scrollbar. */
body .character-context-panel #characterTabBar,
body .character-context-panel .character-workspace-tabs,
body .character-context-panel .section-tab-bar.character-workspace-tabs,
body .character-shell-tabs{
  display:grid !important;
  grid-template-columns:1fr !important;
  gap:.45rem !important;
  width:100% !important;
  max-width:100% !important;
  overflow:visible !important;
  padding:0 !important;
  margin:1rem 0 !important;
  border:0 !important;
  background:transparent !important;
}
body .character-context-panel #characterTabBar button,
body .character-context-panel .character-workspace-tabs button,
body .character-context-panel .section-tab-bar.character-workspace-tabs button,
body .character-shell-tabs button{
  display:flex !important;
  justify-content:flex-start !important;
  text-align:left !important;
  width:100% !important;
  min-width:0 !important;
  max-width:100% !important;
  white-space:normal !important;
  overflow:visible !important;
  text-overflow:clip !important;
}
@media(max-width:900px){
  body .character-context-panel #characterTabBar,
  body .character-context-panel .character-workspace-tabs,
  body .character-context-panel .section-tab-bar.character-workspace-tabs,
  body .character-shell-tabs{
    grid-template-columns:repeat(2,minmax(120px,1fr)) !important;
    gap:6px !important;
  }
  body .character-context-panel #characterTabBar button,
  body .character-context-panel .character-workspace-tabs button,
  body .character-context-panel .section-tab-bar.character-workspace-tabs button,
  body .character-shell-tabs button{
    justify-content:center !important;
    text-align:center !important;
    min-height:42px !important;
  }
}
@media(max-width:520px){
  body .character-context-panel #characterTabBar,
  body .character-context-panel .character-workspace-tabs,
  body .character-context-panel .section-tab-bar.character-workspace-tabs,
  body .character-shell-tabs{
    grid-template-columns:1fr 1fr !important;
  }
}

/* Character page heading alignment: only the three column card headings are normalized. */
.character-shell-layout > .character-context-panel > h2:first-child,
.character-shell-layout > .character-tab-panel > h2:first-child,
.character-shell-layout > .character-widget-dock > h2:first-child{
  margin-top:0 !important;
  margin-bottom:.75rem !important;
  line-height:1.2 !important;
}
.character-shell-layout > .character-context-panel,
.character-shell-layout > .character-tab-panel,
.character-shell-layout > .character-widget-dock{
  align-self:start !important;
}

/* JS scrollIntoView/rail centering should never create sideways body scroll. */
#characterTabBar{
  scroll-behavior:auto !important;
}

/* ===== v3.0.0h Mobile Nav Centering + Trim Banner Trial =====
   Uses the shorter/wider banner art, keeps the smaller nav buttons, centers
   the wrapped navigation, and reduces the mobile nav vertical footprint. */
.site-banner.site-banner-compact{
  text-align:center !important;
  overflow:hidden !important;
}
.site-banner.site-banner-compact .site-banner-image-link{
  width:min(100%, 980px) !important;
  max-width:980px !important;
  margin:0 auto !important;
  overflow:hidden !important;
  background:#050403 !important;
}
.site-banner.site-banner-compact .site-banner-image-link img{
  display:block !important;
  width:100% !important;
  height:auto !important;
  max-height:none !important;
  object-fit:contain !important;
  object-position:center center !important;
}
.site-banner.site-banner-compact .site-banner-app-line,
.site-banner.site-banner-compact .site-banner-status-line{
  overflow:visible !important;
  text-overflow:clip !important;
}

/* Global nav should be visually centered now that buttons are compact. */
body nav.global-workspace-nav,
body nav.user-nav.global-workspace-nav,
body .workspace-shell-top > nav.global-workspace-nav{
  justify-content:center !important;
  align-items:center !important;
  gap:8px 10px !important;
}
body nav.global-workspace-nav > a.button-link,
body nav.global-workspace-nav > details.nav-menu,
body nav.global-workspace-nav > details.admin-nav-menu,
body nav.global-workspace-nav > details.account-nav-menu,
body .workspace-shell-top > nav.global-workspace-nav > a.button-link,
body .workspace-shell-top > nav.global-workspace-nav > details.nav-menu,
body .workspace-shell-top > nav.global-workspace-nav > details.admin-nav-menu,
body .workspace-shell-top > nav.global-workspace-nav > details.account-nav-menu{
  flex:0 1 auto !important;
  min-width:104px !important;
}
body nav.global-workspace-nav > a.button-link,
body nav.global-workspace-nav > details > summary,
body .workspace-shell-top > nav.global-workspace-nav > a.button-link,
body .workspace-shell-top > nav.global-workspace-nav > details > summary{
  min-height:36px !important;
  padding:.45rem .7rem !important;
}

@media(max-width:760px){
  .site-banner.site-banner-compact{
    margin-bottom:12px !important;
  }
  .site-banner.site-banner-compact .site-banner-image-link{
    width:100% !important;
    max-width:100% !important;
  }
  .site-banner.site-banner-compact .site-banner-app-line{
    white-space:normal !important;
    flex-wrap:wrap !important;
    line-height:1.12 !important;
    font-size:clamp(18px, 5.1vw, 25px) !important;
    padding:6px 8px 0 !important;
  }
  .site-banner.site-banner-compact .site-banner-status-line{
    justify-content:center !important;
    text-align:center !important;
    white-space:normal !important;
    flex-wrap:wrap !important;
    gap:4px 10px !important;
    padding:4px 8px 0 !important;
  }
  body nav.global-workspace-nav,
  body nav.user-nav.global-workspace-nav,
  body .workspace-shell-top > nav.global-workspace-nav{
    justify-content:center !important;
    gap:8px !important;
    padding:.55rem .55rem !important;
    overflow-x:visible !important;
  }
  body nav.global-workspace-nav > a.button-link,
  body nav.global-workspace-nav > details.nav-menu,
  body nav.global-workspace-nav > details.admin-nav-menu,
  body nav.global-workspace-nav > details.account-nav-menu,
  body .workspace-shell-top > nav.global-workspace-nav > a.button-link,
  body .workspace-shell-top > nav.global-workspace-nav > details.nav-menu,
  body .workspace-shell-top > nav.global-workspace-nav > details.admin-nav-menu,
  body .workspace-shell-top > nav.global-workspace-nav > details.account-nav-menu{
    flex:0 1 calc((100% - 16px) / 3) !important;
    min-width:92px !important;
    max-width:145px !important;
  }
  body nav.global-workspace-nav > a.button-link,
  body nav.global-workspace-nav > details > summary,
  body .workspace-shell-top > nav.global-workspace-nav > a.button-link,
  body .workspace-shell-top > nav.global-workspace-nav > details > summary{
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    min-height:34px !important;
    padding:.4rem .45rem !important;
    font-size:13px !important;
    line-height:1.1 !important;
    text-align:center !important;
  }
}
@media(max-width:380px){
  body nav.global-workspace-nav > a.button-link,
  body nav.global-workspace-nav > details.nav-menu,
  body nav.global-workspace-nav > details.admin-nav-menu,
  body nav.global-workspace-nav > details.account-nav-menu,
  body .workspace-shell-top > nav.global-workspace-nav > a.button-link,
  body .workspace-shell-top > nav.global-workspace-nav > details.nav-menu,
  body .workspace-shell-top > nav.global-workspace-nav > details.admin-nav-menu,
  body .workspace-shell-top > nav.global-workspace-nav > details.account-nav-menu{
    flex-basis:calc((100% - 8px) / 2) !important;
    max-width:180px !important;
  }
}


/* ===== v3.0.0j Banner Render Fix =====
   The banner artwork must render as a normal responsive image.
   Do not crop it, do not use it as a CSS background, and do not constrain it to
   the older 40% mobile-header containment rules. */
.site-banner.site-banner-compact{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:flex-start !important;
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  box-sizing:border-box !important;
  overflow:visible !important;
  padding:10px 12px !important;
  margin:0 0 12px !important;
}
.site-banner.site-banner-compact .site-banner-image-link{
  display:block !important;
  width:min(100%, 1400px) !important;
  max-width:1400px !important;
  min-width:0 !important;
  margin:0 auto !important;
  line-height:0 !important;
  box-sizing:border-box !important;
  background:#050403 !important;
  border-radius:10px !important;
  overflow:visible !important;
}
.site-banner.site-banner-compact .site-banner-image-link img{
  display:block !important;
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  height:auto !important;
  max-height:none !important;
  aspect-ratio:auto !important;
  object-fit:contain !important;
  object-position:center center !important;
  box-sizing:border-box !important;
  background:#050403 !important;
  border-radius:10px !important;
}
.site-banner.site-banner-compact .site-banner-app-line,
.site-banner.site-banner-compact .site-banner-status-line{
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  box-sizing:border-box !important;
  overflow:visible !important;
  text-align:center !important;
  justify-content:center !important;
  white-space:normal !important;
  overflow-wrap:normal !important;
  word-break:normal !important;
}
@media(max-width:760px){
  html, body{
    width:100% !important;
    max-width:100% !important;
    overflow-x:hidden !important;
  }
  .wrap{
    width:100% !important;
    max-width:100% !important;
    overflow-x:hidden !important;
  }
  .site-banner.site-banner-compact{
    width:100% !important;
    max-width:100% !important;
    padding:8px !important;
    overflow:visible !important;
  }
  .site-banner.site-banner-compact .site-banner-image-link,
  .site-banner.site-banner-compact .site-banner-image-link img{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    overflow:visible !important;
  }
  .site-banner.site-banner-compact .site-banner-app-line{
    font-size:clamp(18px,5vw,25px) !important;
    line-height:1.12 !important;
    padding:6px 4px 0 !important;
  }
  .site-banner.site-banner-compact .site-banner-status-line{
    font-size:clamp(14px,3.8vw,18px) !important;
    line-height:1.25 !important;
    padding:4px 4px 0 !important;
  }
}

/* ===== v3.0.0j Screenshot-Crop Banner CSS Probe =====
   The deployed banner is now the screenshot-crop PNG supplied after v3.0.0i.
   Keep it as a real <img>, not a CSS background, and do not crop it. This
   makes any remaining visible seam a CSS/container issue rather than source art. */
.site-banner.site-banner-compact{
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  padding:0 0 8px !important;
  margin:0 0 12px !important;
  overflow:visible !important;
  text-align:center !important;
  background:linear-gradient(180deg,rgba(19,16,12,.96),rgba(12,10,8,.98)) !important;
}
.site-banner.site-banner-compact .site-banner-image-link{
  display:block !important;
  width:min(100%, 1109px) !important;
  max-width:1109px !important;
  min-width:0 !important;
  margin:0 auto !important;
  padding:0 !important;
  line-height:0 !important;
  overflow:visible !important;
  background:transparent !important;
  border-radius:0 !important;
}
.site-banner.site-banner-compact .site-banner-image-link img{
  display:block !important;
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  height:auto !important;
  max-height:none !important;
  margin:0 auto !important;
  object-fit:contain !important;
  object-position:center center !important;
  background:transparent !important;
}
.site-banner.site-banner-compact .site-banner-app-line{
  max-width:100% !important;
  overflow:visible !important;
  white-space:normal !important;
  overflow-wrap:normal !important;
  text-wrap:balance;
}
@media(max-width:760px){
  .site-banner.site-banner-compact{
    padding:0 0 8px !important;
    overflow:visible !important;
  }
  .site-banner.site-banner-compact .site-banner-image-link{
    width:100% !important;
    max-width:100% !important;
  }
  .site-banner.site-banner-compact .site-banner-app-line{
    font-size:clamp(20px, 6.2vw, 28px) !important;
    line-height:1.1 !important;
    white-space:normal !important;
    overflow:visible !important;
    text-overflow:clip !important;
    padding-left:8px !important;
    padding-right:8px !important;
  }
  .site-banner.site-banner-compact .site-banner-app-line strong,
  .site-banner.site-banner-compact .site-banner-app-line span{
    white-space:normal !important;
    overflow:visible !important;
    text-overflow:clip !important;
  }
}


/* ===== v3.1.2a Character Workspace Tab Hitbox Guard =====
   The left character workspace rail must stay clickable even when center panels
   grow or overlap during create-character drafts. */
.character-shell-layout > .character-context-panel{
  position:relative !important;
  z-index:5 !important;
}
.character-shell-layout > .character-tab-panel,
.character-shell-layout > .character-widget-dock{
  position:relative !important;
  z-index:1 !important;
}
.character-context-panel #characterTabBar,
.character-context-panel #characterTabBar button{
  pointer-events:auto !important;
}

/* ===== v3.1.2b Character Shell Tab Containment Fix =====
   The character workspace tab rail lives inside the left context panel. It must
   never escape over the center workspace or steal clicks from underlying sheet
   controls. This override intentionally separates the shell tab rail from the
   global horizontal navigation model. */
body .character-context-panel #characterTabBar,
body .character-context-panel .character-shell-tabs,
body .character-context-panel .section-tab-bar.character-workspace-tabs{
  display:grid !important;
  grid-template-columns:repeat(auto-fit,minmax(86px,1fr)) !important;
  grid-auto-flow:row !important;
  gap:8px !important;
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  overflow:visible !important;
  padding:0 !important;
  margin:1rem 0 !important;
  box-sizing:border-box !important;
  position:relative !important;
  z-index:1 !important;
}
body .character-context-panel #characterTabBar > button,
body .character-context-panel .character-shell-tabs > button,
body .character-context-panel .section-tab-bar.character-workspace-tabs > button{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  width:100% !important;
  min-width:0 !important;
  max-width:none !important;
  flex:initial !important;
  box-sizing:border-box !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  padding:.58rem .7rem !important;
  pointer-events:auto !important;
}
body .character-context-panel #characterTabBar > button.active,
body .character-context-panel .character-shell-tabs > button.active,
body .character-context-panel .section-tab-bar.character-workspace-tabs > button.active{
  outline:2px solid rgba(245,190,85,.75) !important;
  outline-offset:1px !important;
}
@media(max-width:760px){
  body .character-context-panel #characterTabBar,
  body .character-context-panel .character-shell-tabs,
  body .character-context-panel .section-tab-bar.character-workspace-tabs{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:8px !important;
    padding:0 !important;
    margin:.85rem 0 1rem !important;
    overflow:visible !important;
  }
  body .character-context-panel #characterTabBar > button,
  body .character-context-panel .character-shell-tabs > button,
  body .character-context-panel .section-tab-bar.character-workspace-tabs > button{
    min-height:42px !important;
    font-size:13px !important;
    justify-content:center !important;
    text-align:center !important;
  }
}

/* ===== v3.1.2c Character Tab Rail Functional Containment =====
   v3.1.2b stopped the rail from visually escaping, but multi-column desktop
   layout still allowed hidden/overlapped hitboxes on the right side of the left
   panel. Desktop/laptop now uses a single contained vertical tab stack. Mobile
   keeps the existing two-column layout. */
@media (min-width: 761px){
  body .character-context-panel #characterTabBar,
  body .character-context-panel .character-shell-tabs,
  body .character-context-panel .section-tab-bar.character-workspace-tabs{
    display:grid !important;
    grid-template-columns:1fr !important;
    grid-auto-flow:row !important;
    gap:8px !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    overflow:visible !important;
    position:relative !important;
    z-index:20 !important;
  }
  body .character-context-panel #characterTabBar > button,
  body .character-context-panel .character-shell-tabs > button,
  body .character-context-panel .section-tab-bar.character-workspace-tabs > button{
    display:flex !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    flex:none !important;
    justify-content:flex-start !important;
    align-items:center !important;
    position:relative !important;
    z-index:21 !important;
    pointer-events:auto !important;
  }
}


/* ===== v3.1.2d Character Tab Final Containment + Visibility Fix =====
   Desktop/laptop character tabs must be a contained single-column control list
   inside the left context box. Earlier rules from global horizontal nav rails
   could still leak width/scroll behavior into this local rail. Also, the
   server-rendered Overview section starts with class="active"; when JS hid it
   with .tab-hidden, a later .active display rule could force Overview to remain
   visible beneath the requested tab. */
body .character-context-panel{
  overflow:hidden !important;
  contain:layout paint !important;
}
body .character-context-panel #characterTabBar{
  display:grid !important;
  grid-template-columns:1fr !important;
  grid-auto-flow:row !important;
  align-items:stretch !important;
  justify-items:stretch !important;
  gap:8px !important;
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  overflow:hidden !important;
  padding:0 !important;
  margin:1rem 0 !important;
  box-sizing:border-box !important;
  position:relative !important;
  z-index:30 !important;
  scroll-snap-type:none !important;
}
body .character-context-panel #characterTabBar > button{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  box-sizing:border-box !important;
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  flex:0 1 auto !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  position:static !important;
  transform:none !important;
  margin:0 !important;
  pointer-events:auto !important;
  touch-action:manipulation !important;
}
/* Hidden wins even if the original Overview section still carries .active. */
body .sheet-tab-section.tab-hidden,
body .sheet-tab-section.tab-hidden.active,
body .character-tab-panel.tab-hidden,
body .character-tab-panel.tab-hidden.active{
  display:none !important;
  visibility:hidden !important;
}
body .sheet-tab-section:not(.tab-hidden),
body .character-tab-panel:not(.tab-hidden){
  visibility:visible !important;
}
@media(max-width:760px){
  body .character-context-panel{
    overflow:visible !important;
    contain:none !important;
  }
  body .character-context-panel #characterTabBar{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    overflow:visible !important;
  }
  body .character-context-panel #characterTabBar > button{
    justify-content:center !important;
    text-align:center !important;
  }
}

/* ===== v3.4.6 Site-wide contextual help and form polish ===== */
:root{
  --field-h:42px;
  --focus-ring:0 0 0 3px rgba(116,188,205,.22);
}
input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
select,textarea{min-height:var(--field-h);width:100%;}
input:focus-visible,select:focus-visible,textarea:focus-visible,button:focus-visible,a:focus-visible,.as-help-target:focus-visible{
  outline:2px solid var(--steel);outline-offset:2px;box-shadow:var(--focus-ring);
}
label{position:relative;font-weight:650;letter-spacing:.01em;}
label input,label select,label textarea{font-weight:400;letter-spacing:normal;}
input::placeholder,textarea::placeholder{color:color-mix(in srgb,var(--muted) 82%,transparent);opacity:1;}
.form-row,.filter-row,.mini-grid,.two,.three-col{align-items:end;}
.actions{align-items:center;flex-wrap:wrap;}
button,.button-link{min-height:38px;display:inline-flex;align-items:center;justify-content:center;gap:.35rem;}
.compact-table th{color:var(--bone-dim);font-weight:800;letter-spacing:.02em;}
.compact-table tbody tr:hover{background:rgba(255,255,255,.025);}

.as-help-target{cursor:help;position:relative;}
.as-help-marker{display:inline-flex;align-items:center;justify-content:center;margin-left:.35rem;width:1.05rem;height:1.05rem;border:1px solid rgba(116,188,205,.55);border-radius:50%;font-size:.68rem;line-height:1;color:var(--steel);font-weight:800;vertical-align:middle;flex:0 0 auto;}
label.as-help-target{padding-right:.15rem;}
th.as-help-target .as-help-marker,.gm-stats .as-help-target .as-help-marker{opacity:.78;}
.as-help-target:hover .as-help-marker,.as-help-target:focus .as-help-marker{background:rgba(116,188,205,.16);border-color:var(--steel);}
.as-help-popover{position:fixed;z-index:100000;padding:.8rem .9rem;border:1px solid var(--steel);border-radius:10px;background:#171b1c;color:var(--bone);font-size:.86rem;line-height:1.45;box-shadow:0 14px 36px rgba(0,0,0,.48);pointer-events:none;white-space:normal;}
.as-help-popover[hidden]{display:none;}

.as-widget{border:1px solid var(--line);background:var(--bg-2);border-radius:12px;padding:14px;margin:14px 0;}
.as-widget-header{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px;}
.as-widget-header h3{margin:0;font-size:1rem;color:var(--bone);}
.as-clock-widget{display:grid;place-items:center;text-align:center;}
.as-clock-time{font-family:var(--mono);font-size:1.8rem;color:var(--gold);letter-spacing:.04em;line-height:1.1;}
.as-clock-date{color:var(--bone-dim);font-size:.82rem;margin-top:.25rem;}

@media(max-width:760px){
  .as-help-marker{width:1.2rem;height:1.2rem;font-size:.72rem;}
  .as-help-popover{font-size:.9rem;}
  input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),select,textarea{min-height:44px;}
}

/* v3.4.7 GM Trackboard Workspace Redesign */
.gm-dashboard-shell > #campaign-overview{grid-column:1;}
.gm-dashboard-shell > .gm-track-roster-panel{grid-column:2;}
.gm-dashboard-shell > .gm-track-workspace-panel{grid-column:3;}
.gm-track-roster-panel,
.gm-track-workspace-panel{min-width:0;}
.gm-track-search{display:grid;grid-template-columns:1fr auto auto;gap:8px;align-items:end;margin:.75rem 0 1rem;}
.gm-track-search label{margin:0;}
.gm-track-search input{width:100%;}
.gm-track-roster{display:flex;flex-direction:column;gap:7px;}
.gm-track-roster-row{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"name flags" "owner flags";gap:2px 10px;align-items:center;padding:10px 11px;border:1px solid var(--line-soft);border-radius:10px;background:rgba(255,255,255,.025);color:var(--bone);text-decoration:none;}
.gm-track-roster-row:hover,.gm-track-roster-row:focus-visible{border-color:var(--steel);background:rgba(116,188,205,.08);}
.gm-track-roster-row.active{border-color:var(--gold,#d7b45a);background:rgba(215,180,90,.13);box-shadow:inset 3px 0 0 var(--gold,#d7b45a);}
.gm-track-roster-name{grid-area:name;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.gm-track-roster-owner{grid-area:owner;color:var(--muted);font-size:.79rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.gm-track-roster-flags{grid-area:flags;display:flex;align-items:center;justify-content:flex-end;gap:6px;color:var(--ember-2);font-size:.82rem;}
.gm-track-roster-flags b{min-width:18px;text-align:center;}
.gm-track-pagination{margin-top:12px;}
.gm-track-roster-panel .gm-party-rest{margin-top:12px;}
.gm-track-workspace-panel .gm-track-card-focused{max-width:none;}
.gm-track-workspace-panel .gm-track-form{grid-template-columns:repeat(2,minmax(80px,1fr));}
.gm-track-workspace-panel .gm-track-actions{grid-column:1 / -1;}
.gm-track-workspace-panel .gm-track-line{grid-template-columns:72px 1fr 44px;}
@media(max-width:1100px){
  .gm-dashboard-shell > #campaign-overview,
  .gm-dashboard-shell > .gm-track-roster-panel,
  .gm-dashboard-shell > .gm-track-workspace-panel{grid-column:auto;}
  .gm-track-search{grid-template-columns:1fr auto;}
  .gm-track-search .button-link{grid-column:1 / -1;text-align:center;}
}
@media(max-width:760px){
  .gm-track-search{grid-template-columns:1fr;}
  .gm-track-search button,.gm-track-search .button-link{width:100%;grid-column:auto;}
  .gm-track-workspace-panel .gm-track-form{grid-template-columns:repeat(2,minmax(80px,1fr));}
}

/* v3.5.1a additional inventory */
#inventoryEditor{display:grid;gap:.65rem;margin:1rem 0}.inventory-row{display:grid;grid-template-columns:minmax(220px,2fr) repeat(2,minmax(110px,1fr));gap:.55rem;align-items:end}.inventory-row label{margin:0}.inventory-row button{align-self:end}@media(max-width:760px){.inventory-row{grid-template-columns:1fr}}


/* v3.7.0 Settlement Population Analysis */
.spa-run-picker{display:flex;gap:.75rem;align-items:end;flex-wrap:wrap}.spa-run-picker label{flex:1 1 420px}.spa-title-row{display:flex;justify-content:space-between;gap:1rem;align-items:flex-start;flex-wrap:wrap}.spa-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}.spa-equipment-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}.spa-bar-row{margin:.65rem 0}.spa-bar-label{display:flex;justify-content:space-between;gap:1rem;font-size:.93rem}.spa-bar{height:.55rem;background:rgba(255,255,255,.08);border-radius:999px;overflow:hidden;margin-top:.25rem}.spa-bar span{display:block;height:100%;background:linear-gradient(90deg,var(--ember,#f0703a),var(--gold,#d7b45a));border-radius:inherit}.spa-job-grid{columns:2;column-gap:2rem}.spa-job-grid .spa-bar-row{break-inside:avoid}.spa-kpis>div{min-width:120px}@media(max-width:850px){.spa-grid,.spa-equipment-grid{grid-template-columns:1fr}.spa-job-grid{columns:1}.spa-bar-label{font-size:.88rem}}
@media print{.user-nav,.spa-run-picker,.factory-actions{display:none!important}.panel{break-inside:avoid}.spa-bar span{print-color-adjust:exact;-webkit-print-color-adjust:exact}}

/* v3.8.0 Guided Workflow & Contextual Help */
.as-guide-launcher{position:fixed;right:18px;bottom:18px;z-index:99980;border:1px solid var(--steel);border-radius:999px;background:var(--bg-2);color:var(--bone);box-shadow:0 10px 28px rgba(0,0,0,.42);padding:.62rem .9rem;display:inline-flex;align-items:center;gap:.48rem;font-weight:800;letter-spacing:.01em}.as-guide-launcher>span:first-child{display:grid;place-items:center;width:1.25rem;height:1.25rem;border-radius:50%;background:rgba(116,188,205,.18);color:var(--steel)}.as-guide-launcher:hover,.as-guide-launcher:focus-visible{background:var(--panel);border-color:var(--gold)}
.as-guide-panel{position:fixed;right:18px;bottom:74px;z-index:99990;width:min(430px,calc(100vw - 24px));max-height:min(76vh,720px);overflow:auto;border:1px solid var(--steel);border-radius:14px;background:#171b1c;color:var(--bone);box-shadow:0 18px 52px rgba(0,0,0,.58);padding:1rem}.as-guide-panel[hidden]{display:none}.as-guide-header{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem}.as-guide-header h2{margin:.12rem 0 0;font-size:1.14rem;color:var(--bone)}.as-guide-kicker{text-transform:uppercase;letter-spacing:.11em;color:var(--steel);font-size:.68rem;font-weight:900}.as-guide-close{min-width:36px;min-height:36px;padding:0;border-radius:50%;font-size:1.4rem;background:transparent;color:var(--bone-dim)}.as-guide-intro{margin:.75rem 0;color:var(--bone-dim);line-height:1.45}.as-guide-progress{font-size:.76rem;color:var(--gold);font-weight:800;margin-bottom:.45rem}.as-guide-steps{list-style:none;padding:0;margin:0;display:grid;gap:.4rem}.as-guide-steps li button{width:100%;min-height:0;text-align:left;justify-content:flex-start;align-items:flex-start;border:1px solid var(--line);background:rgba(255,255,255,.025);padding:.65rem;border-radius:10px;color:var(--bone);display:grid;grid-template-columns:1.65rem 1fr;gap:.6rem}.as-guide-steps li.active button{border-color:var(--gold);background:rgba(215,180,90,.11)}.as-guide-steps li.complete button{border-color:rgba(116,188,205,.42)}.as-guide-step-number{display:grid;place-items:center;width:1.55rem;height:1.55rem;border-radius:50%;background:rgba(116,188,205,.12);color:var(--steel);font-weight:900}.as-guide-steps li.active .as-guide-step-number{background:rgba(215,180,90,.18);color:var(--gold)}.as-guide-steps strong{display:block;font-size:.9rem}.as-guide-steps small{display:block;margin-top:.18rem;color:var(--bone-dim);font-size:.78rem;line-height:1.35}.as-guide-controls{display:grid;grid-template-columns:1fr 1fr 1fr;gap:.5rem;margin-top:.8rem}.as-guide-controls button{min-width:0}.as-guide-reset{width:100%;margin-top:.5rem;background:transparent;border-color:transparent;color:var(--muted);font-size:.76rem}.as-guide-highlight{position:relative;z-index:99970;outline:3px solid var(--gold)!important;outline-offset:4px!important;box-shadow:0 0 0 8px rgba(215,180,90,.16),0 10px 32px rgba(0,0,0,.45)!important;transition:outline-color .2s,box-shadow .2s}
@media(max-width:760px){.as-guide-launcher{right:12px;bottom:12px}.as-guide-panel{right:12px;bottom:68px;max-height:72vh}.as-guide-controls{grid-template-columns:1fr 1fr}.as-guide-controls .as-guide-next{grid-column:1/-1}.as-guide-steps small{font-size:.82rem}}
@media print{.as-guide-launcher,.as-guide-panel{display:none!important}}


/* ===== v3.8.1 Responsive Banner + Public/Internal Version Split =====
   The supplied 2400x272 artwork is the visual header. Live application text
   occupies its black field; player/GM surfaces show the public release while
   admins also receive the internal build identity. This final block resets
   obsolete 40%-width diagnostic overrides from early mobile header work. */
html,body{width:100% !important;max-width:100% !important;overflow-x:hidden !important;}
.wrap{width:min(100%,1920px) !important;max-width:100% !important;box-sizing:border-box !important;}
.site-banner{
  position:relative !important;
  display:block !important;
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  height:clamp(104px,11.333vw,176px) !important;
  margin:0 0 12px !important;
  padding:0 !important;
  border:1px solid var(--line) !important;
  border-radius:14px !important;
  overflow:hidden !important;
  background:#000 !important;
  box-shadow:0 8px 26px color-mix(in srgb,var(--panel-shadow) 28%,transparent) !important;
  box-sizing:border-box !important;
}
.site-banner-image-link{
  position:absolute !important;
  inset:0 !important;
  display:block !important;
  width:100% !important;
  max-width:none !important;
  height:100% !important;
  border-radius:0 !important;
  overflow:hidden !important;
  background:#000 !important;
  line-height:0 !important;
}
.site-banner-image-link img{
  display:block !important;
  width:100% !important;
  max-width:none !important;
  height:100% !important;
  max-height:none !important;
  object-fit:cover !important;
  object-position:left center !important;
}
.site-banner-live-content{
  position:absolute !important;
  z-index:2 !important;
  top:50% !important;
  left:clamp(330px,19%,410px) !important;
  right:clamp(18px,3vw,58px) !important;
  transform:translateY(-50%) !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  min-width:0 !important;
  text-align:center !important;
  pointer-events:none !important;
  text-shadow:0 2px 5px color-mix(in srgb,var(--header-shadow) 70%,transparent),0 0 14px color-mix(in srgb,var(--header-shadow) 82%,transparent) !important;
}
.site-banner-app-line{margin:0 !important;padding:0 !important;color:var(--bone) !important;line-height:1.08 !important;}
.site-banner-app-line strong{font-family:var(--display) !important;font-size:clamp(20px,2vw,34px) !important;color:var(--bone) !important;}
.site-banner-status-line{
  display:flex !important;
  flex-wrap:wrap !important;
  justify-content:center !important;
  gap:.25rem 1rem !important;
  margin-top:.45rem !important;
  color:var(--bone-dim) !important;
  font-size:clamp(12px,1.05vw,17px) !important;
  line-height:1.25 !important;
}
.site-banner-status-line strong{color:var(--gold) !important;}
.site-banner-version-line{
  display:flex !important;
  flex-wrap:wrap !important;
  justify-content:center !important;
  gap:.35rem .8rem !important;
  margin-top:.35rem !important;
  color:var(--gold) !important;
  font-family:var(--mono) !important;
  font-size:clamp(10px,.82vw,13px) !important;
  font-weight:800 !important;
}
.site-banner-admin-build{color:var(--steel) !important;}
@media(max-width:900px){
  .site-banner{height:clamp(106px,18vw,142px) !important;}
  .site-banner-live-content{left:clamp(205px,27%,285px) !important;right:12px !important;}
  .site-banner-app-line strong{font-size:clamp(16px,3.1vw,25px) !important;}
  .site-banner-status-line{font-size:clamp(11px,1.9vw,15px) !important;gap:.2rem .65rem !important;}
}
@media(max-width:560px){
  .wrap{padding-left:8px !important;padding-right:8px !important;}
  .site-banner{height:118px !important;border-radius:10px !important;}
  .site-banner-image-link img{width:auto !important;min-width:100% !important;height:100% !important;object-fit:cover !important;object-position:left center !important;}
  .site-banner-live-content{left:148px !important;right:8px !important;align-items:flex-start !important;text-align:left !important;}
  .site-banner-app-line strong{font-size:clamp(14px,4.4vw,20px) !important;line-height:1.05 !important;}
  .site-banner-status-line,.site-banner-version-line{justify-content:flex-start !important;text-align:left !important;}
  .site-banner-status-line{display:block !important;margin-top:.35rem !important;font-size:11px !important;}
  .site-banner-status-line span{display:block !important;white-space:nowrap !important;overflow:hidden !important;text-overflow:ellipsis !important;}
  .site-banner-version-line{font-size:9px !important;margin-top:.25rem !important;}
}
@media(max-width:390px){
  .site-banner-live-content{left:132px !important;}
  .site-banner-app-line strong{font-size:14px !important;}
}


/* ===== v3.8.2 Banner Responsive Polish =====
   Expands the desktop banner and improves the mobile balance between the
   artwork logo and live application text. Public version remains 1.0 RC1. */
@media(min-width:1200px){
  .wrap{width:min(100%,2200px) !important;padding-left:12px !important;padding-right:12px !important;}
  .site-banner{height:clamp(168px,11.333vw,224px) !important;margin-bottom:16px !important;}
  .site-banner-live-content{left:clamp(380px,20%,470px) !important;right:clamp(28px,4vw,84px) !important;}
  .site-banner-app-line strong{font-size:clamp(28px,2.15vw,42px) !important;}
  .site-banner-status-line{font-size:clamp(15px,1.05vw,19px) !important;margin-top:.55rem !important;}
  .site-banner-version-line{font-size:clamp(11px,.82vw,14px) !important;margin-top:.45rem !important;}
}
@media(max-width:560px){
  .wrap{padding-left:8px !important;padding-right:8px !important;}
  .site-banner{height:142px !important;margin-bottom:14px !important;}
  .site-banner-image-link img{width:auto !important;min-width:0 !important;height:100% !important;object-fit:fill !important;object-position:left center !important;}
  .site-banner-live-content{left:118px !important;right:7px !important;top:50% !important;align-items:center !important;text-align:center !important;}
  .site-banner-app-line{width:100% !important;}
  .site-banner-app-line strong{display:block !important;font-size:clamp(16px,4.7vw,20px) !important;line-height:1.05 !important;}
  .site-banner-status-line,.site-banner-version-line{justify-content:center !important;text-align:center !important;width:100% !important;}
  .site-banner-status-line{display:block !important;margin-top:.45rem !important;font-size:12px !important;line-height:1.2 !important;}
  .site-banner-status-line span{display:block !important;white-space:normal !important;overflow:visible !important;text-overflow:clip !important;}
  .site-banner-version-line{font-size:10px !important;margin-top:.35rem !important;}
}
@media(max-width:390px){
  .site-banner{height:136px !important;}
  .site-banner-live-content{left:108px !important;right:5px !important;}
  .site-banner-app-line strong{font-size:15px !important;}
  .site-banner-status-line{font-size:11px !important;}
}

/* ===== v3.8.3 Banner Header Structural Rebuild =====
   Authoritative banner architecture. The supplied 2400x272 banner is the
   header surface, not a centered child image. Desktop uses the full artwork;
   mobile gives the logo its own cropped pane and reserves the remaining black
   field for live application text. These selectors intentionally match the
   full compact-banner specificity so older banner experiments cannot win. */
body > .wrap{
  width:100% !important;
  max-width:none !important;
  padding-left:clamp(8px,1vw,18px) !important;
  padding-right:clamp(8px,1vw,18px) !important;
}
.site-banner.site-banner-compact{
  position:relative !important;
  display:block !important;
  width:100% !important;
  max-width:none !important;
  min-width:0 !important;
  height:clamp(150px,11.333vw,248px) !important;
  margin:0 0 clamp(14px,1.2vw,22px) !important;
  padding:0 !important;
  border:1px solid var(--line) !important;
  border-radius:14px !important;
  overflow:hidden !important;
  background:#000 !important;
  box-shadow:0 8px 28px color-mix(in srgb,var(--panel-shadow) 30%,transparent) !important;
  isolation:isolate !important;
}
.site-banner.site-banner-compact .site-banner-image-link{
  position:absolute !important;
  inset:0 !important;
  z-index:1 !important;
  display:block !important;
  width:100% !important;
  max-width:none !important;
  min-width:0 !important;
  height:100% !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  overflow:hidden !important;
  background-color:#000 !important;
  background-image:var(--site-banner-art) !important;
  background-repeat:no-repeat !important;
  background-position:left center !important;
  background-size:100% 100% !important;
  line-height:0 !important;
}
.site-banner.site-banner-compact .site-banner-image-link img{
  display:none !important;
}
.site-banner.site-banner-compact .site-banner-live-content{
  position:absolute !important;
  z-index:2 !important;
  top:50% !important;
  left:21% !important;
  right:3.5% !important;
  transform:translateY(-50%) !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  min-width:0 !important;
  width:auto !important;
  max-width:none !important;
  text-align:center !important;
  pointer-events:none !important;
  text-shadow:0 2px 5px color-mix(in srgb,var(--header-shadow) 70%,transparent),0 0 14px color-mix(in srgb,var(--header-shadow) 86%,transparent) !important;
}
.site-banner.site-banner-compact .site-banner-app-line{
  width:100% !important;
  margin:0 !important;
  padding:0 !important;
  line-height:1.05 !important;
  text-wrap:balance !important;
}
.site-banner.site-banner-compact .site-banner-app-line strong{
  display:block !important;
  font-family:var(--display) !important;
  font-size:clamp(27px,2.25vw,46px) !important;
  line-height:1.05 !important;
  color:var(--bone) !important;
}
.site-banner.site-banner-compact .site-banner-status-line{
  display:flex !important;
  flex-wrap:wrap !important;
  justify-content:center !important;
  gap:.25rem 1rem !important;
  width:100% !important;
  margin:.5rem 0 0 !important;
  padding:0 !important;
  color:var(--bone-dim) !important;
  font-size:clamp(14px,1.05vw,19px) !important;
  line-height:1.2 !important;
  white-space:normal !important;
}
.site-banner.site-banner-compact .site-banner-status-line span{
  display:inline-block !important;
  margin:0 !important;
  white-space:normal !important;
  overflow:visible !important;
  text-overflow:clip !important;
}
.site-banner.site-banner-compact .site-banner-status-line strong{color:var(--gold) !important;}
.site-banner.site-banner-compact .site-banner-version-line{
  display:flex !important;
  flex-wrap:wrap !important;
  justify-content:center !important;
  gap:.3rem .8rem !important;
  width:100% !important;
  margin:.42rem 0 0 !important;
  padding:0 !important;
  color:var(--gold) !important;
  font-family:var(--mono) !important;
  font-size:clamp(11px,.82vw,15px) !important;
  font-weight:800 !important;
  line-height:1.15 !important;
}

@media (max-width:900px){
  .site-banner.site-banner-compact{
    height:clamp(126px,18vw,158px) !important;
  }
  .site-banner.site-banner-compact .site-banner-live-content{
    left:25% !important;
    right:2.5% !important;
  }
  .site-banner.site-banner-compact .site-banner-app-line strong{
    font-size:clamp(20px,3.25vw,29px) !important;
  }
}

@media (max-width:560px){
  body > .wrap{
    padding-left:8px !important;
    padding-right:8px !important;
    padding-bottom:92px !important;
  }
  .site-banner.site-banner-compact{
    height:132px !important;
    margin-bottom:16px !important;
    border-radius:10px !important;
  }
  .site-banner.site-banner-compact .site-banner-image-link{
    inset:0 auto 0 0 !important;
    width:48% !important;
    height:100% !important;
    background-size:auto 100% !important;
    background-position:left center !important;
  }
  .site-banner.site-banner-compact .site-banner-live-content{
    top:50% !important;
    left:45% !important;
    right:5px !important;
    transform:translateY(-50%) !important;
    align-items:center !important;
    text-align:center !important;
  }
  .site-banner.site-banner-compact .site-banner-app-line strong{
    font-size:clamp(15px,4.35vw,19px) !important;
    line-height:1.04 !important;
  }
  .site-banner.site-banner-compact .site-banner-status-line{
    display:block !important;
    margin-top:.38rem !important;
    font-size:clamp(10px,3vw,12px) !important;
    line-height:1.16 !important;
  }
  .site-banner.site-banner-compact .site-banner-status-line span{
    display:block !important;
  }
  .site-banner.site-banner-compact .site-banner-version-line{
    margin-top:.3rem !important;
    font-size:clamp(9px,2.6vw,11px) !important;
  }
  body .as-guide-launcher{
    width:auto !important;
    max-width:calc(100vw - 24px) !important;
    min-width:0 !important;
    right:12px !important;
    left:auto !important;
    bottom:16px !important;
    padding:.58rem .82rem !important;
  }
  body .site-version-footer{
    margin-bottom:68px !important;
  }
}

@media (max-width:390px){
  .site-banner.site-banner-compact{height:126px !important;}
  .site-banner.site-banner-compact .site-banner-image-link{width:50% !important;}
  .site-banner.site-banner-compact .site-banner-live-content{left:47% !important;right:3px !important;}
  .site-banner.site-banner-compact .site-banner-app-line strong{font-size:14px !important;}
  .site-banner.site-banner-compact .site-banner-status-line{font-size:10px !important;}
  .site-banner.site-banner-compact .site-banner-version-line{font-size:9px !important;}
}

/* ===== v3.8.3a Banner Artwork Alignment Fix =====
   Authoritative alignment layer. Render the supplied banner as a real image,
   scaled by height and anchored to the left. The black remainder belongs to
   the header container, so wide screens gain space without stretching art.
   Mobile uses the same predictable left anchor and a separately controlled
   live-text zone. */
.site-banner.site-banner-compact{
  background:#000 !important;
}
.site-banner.site-banner-compact .site-banner-image-link{
  position:absolute !important;
  inset:0 !important;
  z-index:1 !important;
  display:block !important;
  width:100% !important;
  max-width:none !important;
  height:100% !important;
  overflow:hidden !important;
  background:#000 !important;
  line-height:0 !important;
}
.site-banner.site-banner-compact .site-banner-image-link img{
  display:block !important;
  position:absolute !important;
  top:0 !important;
  left:0 !important;
  width:auto !important;
  max-width:none !important;
  min-width:0 !important;
  height:100% !important;
  max-height:none !important;
  margin:0 !important;
  object-fit:contain !important;
  object-position:left center !important;
  background:#000 !important;
}
.site-banner.site-banner-compact .site-banner-live-content{
  left:24% !important;
  right:3% !important;
}
@media (min-width:1500px){
  .site-banner.site-banner-compact{
    height:220px !important;
  }
  .site-banner.site-banner-compact .site-banner-live-content{
    left:25% !important;
    right:4% !important;
  }
}
@media (max-width:900px){
  .site-banner.site-banner-compact .site-banner-live-content{
    left:27% !important;
    right:2.5% !important;
  }
}
@media (max-width:560px){
  .site-banner.site-banner-compact{
    height:132px !important;
  }
  .site-banner.site-banner-compact .site-banner-image-link{
    inset:0 !important;
    width:100% !important;
    height:100% !important;
  }
  .site-banner.site-banner-compact .site-banner-image-link img{
    left:0 !important;
    width:auto !important;
    height:100% !important;
    max-width:none !important;
    object-fit:contain !important;
    object-position:left center !important;
  }
  .site-banner.site-banner-compact .site-banner-live-content{
    left:30% !important;
    right:4px !important;
  }
  .site-banner.site-banner-compact .site-banner-app-line strong{
    font-size:clamp(15px,4.35vw,19px) !important;
  }
}
@media (max-width:390px){
  .site-banner.site-banner-compact{
    height:126px !important;
  }
  .site-banner.site-banner-compact .site-banner-live-content{
    left:31% !important;
    right:3px !important;
  }
}

/* ===== v3.8.3b Mobile Layout Fix =====
   Desktop v3.8.3a alignment is accepted and intentionally unchanged.
   On narrow portrait screens, slightly reduce the artwork height and move
   the live-text zone right so the logo and title no longer overlap. */
@media (max-width:560px){
  .site-banner.site-banner-compact .site-banner-image-link img{
    top:50% !important;
    height:92% !important;
    transform:translateY(-50%) !important;
  }
  .site-banner.site-banner-compact .site-banner-live-content{
    left:42% !important;
    right:4px !important;
  }
  .site-banner.site-banner-compact .site-banner-app-line strong{
    font-size:clamp(14px,4vw,18px) !important;
    line-height:1.03 !important;
  }
}
@media (max-width:390px){
  .site-banner.site-banner-compact .site-banner-image-link img{
    height:90% !important;
  }
  .site-banner.site-banner-compact .site-banner-live-content{
    left:43% !important;
    right:3px !important;
  }
  .site-banner.site-banner-compact .site-banner-app-line strong{
    font-size:13.5px !important;
  }
}


/* ===== v3.9.1 Site-Wide Header Consolidation =====
   The contextual banner owns each workspace title and purpose line. The first
   legacy heading/intro block remains in markup for compatibility but is not
   repeated visually. Functional links or controls inside that block remain. */
.site-banner-subtitle-line{
  margin:.18rem auto .28rem;
  max-width:64rem;
  color:var(--bone-dim,#b8ae97);
  font-size:clamp(.78rem,1.05vw,1rem);
  line-height:1.25;
  text-align:center;
}
header.top > div:first-child > h1,
header.top > div:first-child > p{
  display:none !important;
}
header.top > div:first-child:empty{
  display:none !important;
}
header.top{
  margin-top:.45rem;
}
@media (max-width:560px){
  .site-banner-subtitle-line{
    font-size:clamp(.62rem,2.7vw,.76rem);
    line-height:1.12;
    margin:.08rem 0 .16rem;
    max-height:2.3em;
    overflow:hidden;
  }
}


/* ===== v4.0.3 Theme System Foundation ===== */
.theme-card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.theme-card{background:var(--bg-2);border:1px solid var(--line-soft);border-radius:12px;padding:16px}
.theme-card.selected{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.theme-card h3{margin:.75rem 0 .25rem}.theme-swatches{display:grid;grid-template-columns:repeat(6,1fr);height:32px;border:1px solid var(--line);border-radius:8px;overflow:hidden}.theme-swatches span{display:block}.theme-builder{margin-top:20px}.theme-color-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:10px}.theme-color-control{display:grid;grid-template-columns:48px 1fr;gap:8px}.theme-color-control input[type=color]{width:48px;height:40px;padding:2px}.theme-preview{margin:18px 0;background:var(--panel-2)}


/* ===== v4.2.0b Theme Surface + Administration Link Repair =====
   Theme-owned surfaces must not retain legacy Forge-only hardcoded fills. */
body .tab-save-actions,
body .xp-diagnostic-panel,
body .spell-card,
body .spell-detail-panel .spell-card,
body .spell-editor-panel,
body .editor-section,
body .spell-editor-savebar,
body .spell-school-tile,
body .spell-rank-heading,
body .character-spell-card.spell-locked {
  background: var(--panel-2) !important;
  border-color: var(--line) !important;
  color: var(--bone) !important;
}
body .xp-diagnostic-panel {
  background: var(--panel) !important;
}
body .spell-card header,
body .editor-section summary {
  border-color: var(--line-soft) !important;
}
body .editor-section summary,
body .spell-rank-heading {
  background: var(--bg-2) !important;
  color: var(--bone) !important;
}
body .spell-card h3,
body .spell-card h3 a,
body .spell-card h3 a:hover,
body .spell-card h3 a:focus {
  color: var(--accent) !important;
}
body .spell-card .muted,
body .spell-card header p,
body .xp-diagnostic-panel .muted {
  color: var(--bone-dim) !important;
}
body .catalog-badge,
body .character-spell-card.spell-locked .catalog-badge {
  background: var(--bg-2) !important;
  border-color: var(--line) !important;
  color: var(--bone) !important;
}
body .spell-card.selected {
  outline-color: var(--accent) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent) !important;
}


/* ===== v4.2.0d Community / Social Corner Foundation =====
   Third-party marks are rendered from approved source files without filters,
   effects, recoloring, distortion, masking, or cropped containers. */
.site-community-corner{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:.45rem .8rem;
  padding:.25rem 0 .45rem;
  margin:0 0 .25rem;
  border-bottom:1px solid var(--line-soft,#3a3120);
}
.site-community-heading{
  color:var(--bone,#ece3ce)!important;
  font-weight:800;
  letter-spacing:.02em;
}
.site-community-links{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:.45rem;
}
.site-community-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  min-height:40px;
  padding:.35rem .7rem;
  border:1px solid var(--line-soft,#3a3120);
  border-radius:10px;
  background:var(--panel-2,var(--bg-2,#2a241b));
  color:var(--bone,#ece3ce)!important;
  font-weight:700;
  text-decoration:none;
}
.site-community-link:hover,
.site-community-link:focus-visible{
  border-color:var(--accent,var(--gold,#d7b45a));
  background:var(--panel,var(--bg-2,#221d16));
  color:var(--bone,#ece3ce)!important;
  text-decoration:none;
}
.site-community-link:focus-visible{
  outline:2px solid var(--accent,var(--gold,#d7b45a));
  outline-offset:2px;
}
.site-community-link img{
  display:block;
  flex:0 0 auto;
  width:auto;
  height:32px;
  max-width:min(100%,180px);
  object-fit:contain;
  filter:none!important;
  opacity:1!important;
  transform:none!important;
  box-shadow:none!important;
  border:0!important;
  border-radius:0!important;
}
@media(max-width:700px){
  .site-community-corner{justify-content:flex-start;}
  .site-community-links{justify-content:flex-start;}
}
@media print{.site-community-corner{display:none!important;}}


/* ===== v4.2.0e Theme Effects & Shadow Controls ===== */
button,.button-link,.nav-menu>summary{
  box-shadow:0 3px 8px color-mix(in srgb,var(--button-shadow) 18%,transparent);
}
button:hover,.button-link:hover,.nav-menu>summary:hover{
  box-shadow:0 4px 10px color-mix(in srgb,var(--button-shadow) 24%,transparent);
}
.panel,.subpanel,.workspace-card{
  box-shadow:0 8px 20px color-mix(in srgb,var(--panel-shadow) 18%,transparent);
}
.nav-menu-panel{
  box-shadow:0 12px 28px color-mix(in srgb,var(--panel-shadow) 35%,transparent);
}


/* ===== v4.2.1 Canonical Full-Width Site Navigation =====
   One role-aware primary navigation treatment for every authenticated page.
   Page-local and reduced legacy menus are retired in favor of the shared renderer. */
.workspace-shell-top,
header.top:has(> .global-workspace-nav){
  display:block !important;
  margin:12px 0 10px !important;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}
.global-workspace-nav{
  display:grid !important;
  grid-template-columns:repeat(auto-fit,minmax(118px,1fr)) !important;
  grid-auto-flow:row !important;
  gap:8px !important;
  width:100% !important;
  max-width:none !important;
  margin:10px 0 12px !important;
  padding:10px !important;
  align-items:stretch !important;
  justify-items:stretch !important;
  border:1px solid var(--line-soft,#ddd) !important;
  border-radius:14px !important;
  background:color-mix(in srgb,var(--panel) 82%,transparent) !important;
  box-sizing:border-box !important;
}
.global-workspace-nav > *{
  width:100% !important;
  min-width:0 !important;
  max-width:none !important;
  margin:0 !important;
  box-sizing:border-box !important;
}
.global-workspace-nav > .button-link,
.global-workspace-nav > .nav-menu > summary{
  width:100% !important;
  min-height:38px !important;
  padding:8px 10px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
  white-space:nowrap !important;
  box-sizing:border-box !important;
}
.global-workspace-nav .admin-nav-menu.selected > summary,
.global-workspace-nav .admin-nav-menu.selected > summary:hover,
.global-workspace-nav .admin-nav-menu.selected > summary:focus{
  background:linear-gradient(180deg,var(--accent),var(--accent-strong)) !important;
  color:var(--active-text) !important;
  border-color:var(--ember-2) !important;
  font-weight:800 !important;
  box-shadow:inset 0 0 0 2px currentColor !important;
}
@media(max-width:1100px){
  .global-workspace-nav{
    grid-template-columns:repeat(4,minmax(118px,1fr)) !important;
    overflow:visible !important;
  }
}
@media(max-width:680px){
  .global-workspace-nav{
    display:flex !important;
    overflow-x:auto !important;
    overflow-y:visible !important;
    -webkit-overflow-scrolling:touch !important;
    scroll-snap-type:x proximity;
  }
  .global-workspace-nav > *{
    flex:0 0 min(42vw,150px) !important;
    scroll-snap-align:start;
  }
}


/* ===== v4.2.1a Canonical Navigation Styling & Sizing Enforcement =====
   Final cascade authority for the shared primary navigation. Legacy page CSS may
   not alter the height, typography, spacing, borders, fills, or dropdown sizing
   of the application-wide navigation bar. */
body .workspace-shell-top,
body header.top.workspace-shell-top,
body header.top:has(> nav.global-workspace-nav){
  display:block !important;
  width:100% !important;
  max-width:none !important;
  min-width:0 !important;
  margin:12px 0 10px !important;
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  box-sizing:border-box !important;
}
body nav.user-nav.global-workspace-nav,
body header.top nav.user-nav.global-workspace-nav,
body .workspace-shell-top > nav.user-nav.global-workspace-nav{
  display:grid !important;
  grid-template-columns:repeat(auto-fit,minmax(118px,1fr)) !important;
  grid-auto-flow:row !important;
  grid-auto-rows:44px !important;
  gap:8px !important;
  align-items:stretch !important;
  justify-items:stretch !important;
  width:100% !important;
  max-width:none !important;
  min-width:0 !important;
  min-height:0 !important;
  margin:0 !important;
  padding:10px !important;
  border:1px solid var(--line-soft,var(--line,#3a3120)) !important;
  border-radius:14px !important;
  background:color-mix(in srgb,var(--panel,#221d16) 82%,transparent) !important;
  box-shadow:none !important;
  overflow:visible !important;
  box-sizing:border-box !important;
}
body nav.global-workspace-nav > a.button-link,
body nav.global-workspace-nav > details.nav-menu,
body nav.global-workspace-nav > details.admin-nav-menu,
body nav.global-workspace-nav > details.account-nav-menu{
  display:block !important;
  position:relative !important;
  width:100% !important;
  max-width:none !important;
  min-width:0 !important;
  height:44px !important;
  min-height:44px !important;
  max-height:44px !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  box-sizing:border-box !important;
}
body nav.global-workspace-nav > a.button-link,
body nav.global-workspace-nav > details.nav-menu > summary,
body nav.global-workspace-nav > details.admin-nav-menu > summary,
body nav.global-workspace-nav > details.account-nav-menu > summary{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:100% !important;
  max-width:none !important;
  min-width:0 !important;
  height:44px !important;
  min-height:44px !important;
  max-height:44px !important;
  margin:0 !important;
  padding:0 14px !important;
  border:1px solid var(--line,var(--line-soft,#3a3120)) !important;
  border-radius:10px !important;
  background:var(--panel-2,var(--bg-2,#2a241b)) !important;
  color:var(--bone,#ece3ce) !important;
  font-family:inherit !important;
  font-size:15px !important;
  font-style:normal !important;
  font-weight:700 !important;
  line-height:1 !important;
  letter-spacing:0 !important;
  text-align:center !important;
  text-decoration:none !important;
  text-transform:none !important;
  text-shadow:none !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  cursor:pointer !important;
  opacity:1 !important;
  box-shadow:0 3px 8px color-mix(in srgb,var(--button-shadow,#000) 18%,transparent) !important;
  box-sizing:border-box !important;
  appearance:none !important;
}
body nav.global-workspace-nav > details.nav-menu > summary{
  list-style:none !important;
}
body nav.global-workspace-nav > details.nav-menu > summary::-webkit-details-marker{
  display:none !important;
}
body nav.global-workspace-nav > a.button-link:hover,
body nav.global-workspace-nav > a.button-link:focus-visible,
body nav.global-workspace-nav > details.nav-menu > summary:hover,
body nav.global-workspace-nav > details.nav-menu > summary:focus-visible{
  border-color:var(--accent,var(--gold,#d7b45a)) !important;
  background:var(--panel,var(--bg-2,#221d16)) !important;
  color:var(--bone,#ece3ce) !important;
  box-shadow:0 4px 10px color-mix(in srgb,var(--button-shadow,#000) 24%,transparent) !important;
}
body nav.global-workspace-nav > a.button-link:focus-visible,
body nav.global-workspace-nav > details.nav-menu > summary:focus-visible{
  outline:2px solid var(--accent,var(--gold,#d7b45a)) !important;
  outline-offset:2px !important;
}
body nav.global-workspace-nav > a.button-link.selected,
body nav.global-workspace-nav > a.button-link.selected:link,
body nav.global-workspace-nav > a.button-link.selected:visited,
body nav.global-workspace-nav > details.nav-menu.selected > summary,
body nav.global-workspace-nav > details.admin-nav-menu.selected > summary,
body nav.global-workspace-nav > details.account-nav-menu.selected > summary{
  background:linear-gradient(180deg,var(--accent,#ff8a62),var(--accent-strong,#f66f47)) !important;
  color:var(--active-text,#170b06) !important;
  border-color:var(--ember-2,#ffb27a) !important;
  font-weight:800 !important;
  text-shadow:none !important;
  box-shadow:inset 0 0 0 1px color-mix(in srgb,currentColor 70%,transparent),0 3px 8px color-mix(in srgb,var(--button-shadow,#000) 18%,transparent) !important;
}
body nav.global-workspace-nav .nav-menu-panel{
  top:calc(100% + 7px) !important;
  min-width:230px !important;
  width:max-content !important;
  max-width:min(92vw,360px) !important;
  margin:0 !important;
  padding:10px !important;
  border:1px solid var(--line,var(--line-soft,#3a3120)) !important;
  border-radius:12px !important;
  background:var(--panel,var(--bg-2,#221d16)) !important;
  color:var(--bone,#ece3ce) !important;
  box-shadow:0 12px 28px color-mix(in srgb,var(--panel-shadow,#000) 35%,transparent) !important;
  box-sizing:border-box !important;
  z-index:1000 !important;
}
body nav.global-workspace-nav .nav-menu-panel a{
  min-height:36px !important;
  padding:8px 10px !important;
  border-radius:8px !important;
  font-size:14px !important;
  line-height:1.2 !important;
  box-sizing:border-box !important;
}
@media(max-width:1100px){
  body nav.user-nav.global-workspace-nav,
  body header.top nav.user-nav.global-workspace-nav,
  body .workspace-shell-top > nav.user-nav.global-workspace-nav{
    grid-template-columns:repeat(4,minmax(118px,1fr)) !important;
    grid-auto-rows:44px !important;
  }
}
@media(max-width:680px){
  body nav.user-nav.global-workspace-nav,
  body header.top nav.user-nav.global-workspace-nav,
  body .workspace-shell-top > nav.user-nav.global-workspace-nav{
    display:flex !important;
    gap:7px !important;
    overflow-x:auto !important;
    overflow-y:visible !important;
    -webkit-overflow-scrolling:touch !important;
    scroll-snap-type:x proximity !important;
  }
  body nav.global-workspace-nav > a.button-link,
  body nav.global-workspace-nav > details.nav-menu,
  body nav.global-workspace-nav > details.admin-nav-menu,
  body nav.global-workspace-nav > details.account-nav-menu{
    flex:0 0 min(42vw,150px) !important;
    width:min(42vw,150px) !important;
    min-width:112px !important;
    scroll-snap-align:start !important;
  }
  body nav.global-workspace-nav > a.button-link,
  body nav.global-workspace-nav > details.nav-menu > summary,
  body nav.global-workspace-nav > details.admin-nav-menu > summary,
  body nav.global-workspace-nav > details.account-nav-menu > summary{
    font-size:14px !important;
    padding:0 10px !important;
  }
}
@media print{
  body nav.global-workspace-nav{display:none !important;}
}


/* ===== v4.2.1b Complete Theme Coverage: Tooltips & Remaining UI Surfaces ===== */
.as-help-popover,
[role="tooltip"].as-help-popover {
  background: var(--tooltip-bg) !important;
  color: var(--tooltip-text) !important;
  border-color: var(--tooltip-border) !important;
  box-shadow: 0 14px 36px color-mix(in srgb, var(--tooltip-shadow) 52%, transparent) !important;
}
.as-help-popover::before,
.as-help-popover::after { border-color: var(--tooltip-border) !important; }

/* Shared floating/dropdown surfaces */
.nav-menu-panel,
.dropdown-menu,
.popover,
.context-menu,
[role="menu"] {
  background: var(--panel) !important;
  color: var(--bone) !important;
  border-color: var(--line) !important;
  box-shadow: 0 12px 32px color-mix(in srgb, var(--panel-shadow) 46%, transparent) !important;
}

/* Modal surfaces and overlays */
.credential-modal-backdrop,
.modal-backdrop,
.dialog-backdrop {
  background: color-mix(in srgb, var(--modal-overlay) 72%, transparent) !important;
}
.credential-modal,
.modal,
dialog,
[role="dialog"] {
  background: var(--panel) !important;
  color: var(--bone) !important;
  border-color: var(--line) !important;
  box-shadow: 0 20px 60px color-mix(in srgb, var(--panel-shadow) 55%, transparent) !important;
}

/* Keyboard focus, selection, disabled controls, and diagnostic/code surfaces */
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible {
  outline: 3px solid var(--focus-outline) !important;
  outline-offset: 2px !important;
}
::selection { background: var(--selection-bg); color: var(--selection-text); }
:where(button,input,select,textarea):disabled,
:where(button,input,select,textarea)[aria-disabled="true"] {
  background: var(--disabled-bg) !important;
  color: var(--disabled-text) !important;
  border-color: var(--line-soft) !important;
  opacity: 1 !important;
}
code, pre, kbd, samp {
  background: var(--code-bg) !important;
  color: var(--code-text) !important;
  border-color: var(--line-soft) !important;
}

/* Theme Builder surface samples */
.theme-surface-preview { display:flex; flex-wrap:wrap; align-items:center; gap:.75rem; margin-top:1rem; padding:.85rem; border:1px solid var(--line-soft); border-radius:10px; background:var(--panel-2); }
.theme-tooltip-preview { display:inline-block; padding:.55rem .7rem; border:1px solid var(--tooltip-border); border-radius:8px; background:var(--tooltip-bg); color:var(--tooltip-text); box-shadow:0 8px 20px color-mix(in srgb, var(--tooltip-shadow) 45%, transparent); }
.theme-focus-preview { display:inline-block; padding:.45rem .65rem; border:1px solid var(--line); border-radius:7px; background:var(--panel); color:var(--bone); }


/* ===== v4.2.2 Theme Manager Control Organization & Usability Polish ===== */
.theme-builder-layout{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(300px,.85fr);gap:1rem;align-items:start;margin-top:1rem;}
.theme-control-groups{display:grid;gap:.75rem;}
.theme-control-group{border:1px solid var(--line);border-radius:10px;background:var(--panel-2);overflow:hidden;}
.theme-control-group>summary{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.85rem 1rem;cursor:pointer;list-style:none;background:var(--panel);color:var(--bone);}
.theme-control-group>summary::-webkit-details-marker{display:none;}
.theme-control-group>summary::after{content:'+';font-size:1.25rem;line-height:1;color:var(--accent);}
.theme-control-group[open]>summary::after{content:'−';}
.theme-control-group>summary span:first-child{display:grid;gap:.18rem;}
.theme-control-group>summary small{font-weight:400;color:var(--muted);max-width:70ch;}
.theme-group-count{white-space:nowrap;color:var(--bone-dim);font-size:.82rem;}
.theme-control-group .theme-color-grid{padding:1rem;margin:0;}
.theme-builder .theme-preview{position:sticky;top:1rem;margin:0;}
@media(max-width:900px){.theme-builder-layout{grid-template-columns:1fr}.theme-builder .theme-preview{position:static}.theme-group-count{display:none}}


/* ===== v4.2.2a Header Vertical Alignment & Spacing Polish =====
   Raise the live header copy away from the artwork divider and tighten the
   title/subtitle/context stack without changing banner dimensions. */
.site-banner.site-banner-compact .site-banner-live-content{
  top:46.5% !important;
}
.site-banner.site-banner-compact .site-banner-app-line{
  line-height:1.02 !important;
}
.site-banner.site-banner-compact .site-banner-app-line strong{
  line-height:1.02 !important;
}
.site-banner.site-banner-compact .site-banner-subtitle-line{
  margin:.10rem auto .12rem !important;
  line-height:1.15 !important;
}
.site-banner.site-banner-compact .site-banner-status-line{
  margin:.28rem 0 0 !important;
  line-height:1.15 !important;
}
.site-banner.site-banner-compact .site-banner-version-line{
  margin:.22rem 0 0 !important;
  line-height:1.08 !important;
}
@media (max-width:900px){
  .site-banner.site-banner-compact .site-banner-live-content{
    top:47% !important;
  }
}
@media (max-width:560px){
  .site-banner.site-banner-compact .site-banner-live-content{
    top:47.5% !important;
  }
  .site-banner.site-banner-compact .site-banner-subtitle-line{
    margin:.05rem 0 .08rem !important;
    line-height:1.08 !important;
  }
  .site-banner.site-banner-compact .site-banner-status-line{
    margin-top:.24rem !important;
    line-height:1.10 !important;
  }
  .site-banner.site-banner-compact .site-banner-version-line{
    margin-top:.18rem !important;
    line-height:1.05 !important;
  }
}

/* ========================================================================
   v4.3.0 — Universal Theme Application Engine
   Semantic aliases preserve existing theme JSON while giving every
   first-party object a shared visual contract. Brand assets are exempt.
   ======================================================================== */
:root{
  --surface-page:var(--bg);
  --surface-page-alt:var(--bg-2);
  --surface-panel:var(--panel);
  --surface-panel-alt:var(--panel-2);
  --surface-control:var(--panel-2);
  --surface-overlay:var(--panel);
  --surface-disabled:var(--disabled-bg);
  --text-primary:var(--bone);
  --text-secondary:var(--bone-dim);
  --text-muted:var(--muted);
  --text-disabled:var(--disabled-text);
  --text-on-accent:var(--active-text);
  --border-primary:var(--line);
  --border-subtle:var(--line-soft);
  --border-focus:var(--focus-outline);
  --state-success:var(--good);
  --state-warning:var(--warning);
  --state-error:var(--bad);
  --state-info:var(--steel);
  --state-selected:var(--selection-bg);
  --shadow-header-color:var(--header-shadow);
  --shadow-panel-color:var(--panel-shadow);
  --shadow-control-color:var(--button-shadow);
  --shadow-overlay-color:var(--tooltip-shadow);
}
html,body,.ui-app-surface{background:var(--surface-page)!important;color:var(--text-primary)!important}
.ui-layout{color:var(--text-primary)}
.ui-surface{color:var(--text-primary);border-color:var(--border-primary)!important}
.ui-surface-panel{background:var(--surface-panel)!important;box-shadow:0 8px 22px color-mix(in srgb,var(--shadow-panel-color) 24%,transparent)}
.ui-surface-alt{background:var(--surface-panel-alt)!important}
.ui-control{background:var(--surface-control)!important;color:var(--text-primary)!important;border-color:var(--border-primary)!important;box-shadow:0 2px 5px color-mix(in srgb,var(--shadow-control-color) 28%,transparent)}
.ui-control:hover:not(:disabled){border-color:var(--accent)!important}
.ui-control-primary{background:var(--accent)!important;color:var(--text-on-accent)!important;border-color:var(--accent-strong)!important}
.ui-field{background:var(--surface-control)!important;color:var(--text-primary)!important;border-color:var(--border-primary)!important}
.ui-field::placeholder{color:var(--text-muted)!important}
.ui-field:focus,.ui-control:focus-visible,.ui-focusable:focus-visible{outline:2px solid var(--border-focus)!important;outline-offset:2px}
.ui-table{background:var(--surface-panel)!important;color:var(--text-primary)!important;border-color:var(--border-primary)!important}
.ui-table th{background:var(--surface-panel-alt)!important;color:var(--text-primary)!important}
.ui-table td,.ui-table th{border-color:var(--border-subtle)!important}
.ui-table tbody tr:hover{background:color-mix(in srgb,var(--state-selected) 14%,var(--surface-panel))!important}
.ui-status{border-color:currentColor!important}
.ui-state-success{color:var(--state-success)!important}
.ui-state-warning{color:var(--state-warning)!important}
.ui-state-error{color:var(--state-error)!important}
.ui-state-info{color:var(--state-info)!important}
.ui-floating-surface,.ui-overlay-surface{background:var(--surface-overlay)!important;color:var(--text-primary)!important;border-color:var(--border-primary)!important;box-shadow:0 12px 30px color-mix(in srgb,var(--shadow-overlay-color) 38%,transparent)}
.ui-tooltip-surface{background:var(--tooltip-bg)!important;color:var(--tooltip-text)!important;border-color:var(--tooltip-border)!important}
.ui-code-surface{background:var(--code-bg)!important;color:var(--code-text)!important;border-color:var(--border-subtle)!important}
:disabled,.disabled,[aria-disabled="true"]{background:var(--surface-disabled)!important;color:var(--text-disabled)!important;opacity:.78}
::selection{background:var(--selection-bg);color:var(--selection-text)}
.brand-asset,[data-theme-exempt]{filter:none!important;text-shadow:none!important;box-shadow:none!important}


/* ===== v4.3.0a Official Discord Logo Lockup & Accessible Fallback ===== */
.site-community-link-discord{
  min-width:0;
  padding:.4rem .75rem;
}
.site-community-link-discord img{
  display:block;
  width:auto;
  height:32px;
  max-width:min(100%,180px);
  object-fit:contain;
}


/* ========================================================================
   v4.4.0 — Universal Component Standards Engine
   Shared sizing, spacing, interaction, accessibility, and component states.
   Existing theme variables remain authoritative for color and effects.
   ======================================================================== */
:root{
  --space-1:.25rem;
  --space-2:.5rem;
  --space-3:.75rem;
  --space-4:1rem;
  --space-5:1.5rem;
  --space-6:2rem;
  --control-height-sm:2rem;
  --control-height-md:2.5rem;
  --control-height-lg:3rem;
  --control-radius:.55rem;
  --card-radius:.75rem;
  --control-gap:.5rem;
  --motion-fast:120ms;
  --motion-normal:180ms;
  --motion-slow:240ms;
}

.usc-control{
  box-sizing:border-box;
  font:inherit;
  transition:background-color var(--motion-fast) ease,border-color var(--motion-fast) ease,color var(--motion-fast) ease,box-shadow var(--motion-fast) ease,transform var(--motion-fast) ease;
}
.usc-button{
  min-height:var(--control-height-md);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--control-gap);
  padding:.5rem .9rem;
  border-radius:var(--control-radius);
  line-height:1.15;
  text-align:center;
  text-decoration:none;
  cursor:pointer;
  vertical-align:middle;
  white-space:normal;
}
.usc-button:hover:not(:disabled):not([aria-disabled="true"]){transform:translateY(-1px)}
.usc-button:active:not(:disabled):not([aria-disabled="true"]){transform:translateY(0)}
.usc-button-primary{background:var(--accent)!important;color:var(--active-text)!important;border-color:var(--accent-strong)!important}
.usc-button-secondary{background:var(--panel-2)!important;color:var(--bone)!important;border-color:var(--line)!important}
.usc-button-danger{background:color-mix(in srgb,var(--bad) 22%,var(--panel-2))!important;color:var(--bad)!important;border-color:color-mix(in srgb,var(--bad) 70%,var(--line))!important}
.usc-button-success{background:color-mix(in srgb,var(--good) 20%,var(--panel-2))!important;color:var(--good)!important;border-color:color-mix(in srgb,var(--good) 65%,var(--line))!important}
.usc-size-small{min-height:var(--control-height-sm);padding:.3rem .65rem;font-size:.9em}
.usc-size-large{min-height:var(--control-height-lg);padding:.7rem 1.15rem;font-size:1.05em}
.usc-icon-button{width:var(--control-height-md);padding:.5rem;aspect-ratio:1}

.usc-field{
  min-height:var(--control-height-md);
  width:100%;
  padding:.55rem .7rem;
  border-radius:var(--control-radius);
  line-height:1.25;
}
textarea.usc-field{min-height:6rem;resize:vertical}
select.usc-field{padding-right:2rem}
.usc-check,.usc-radio{inline-size:1.15rem;block-size:1.15rem;accent-color:var(--accent);vertical-align:middle}
.usc-invalid,[aria-invalid="true"]{border-color:var(--bad)!important;box-shadow:0 0 0 2px color-mix(in srgb,var(--bad) 24%,transparent)!important}

.usc-card{border-radius:var(--card-radius);padding:var(--space-4)}
.usc-card > :first-child{margin-top:0}
.usc-card > :last-child{margin-bottom:0}
.usc-card-header{margin:calc(var(--space-4) * -1) calc(var(--space-4) * -1) var(--space-4);padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--line-soft)}
.usc-actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2)}

.usc-table-region{overflow:auto;max-width:100%;border-radius:var(--card-radius)}
.usc-table{width:100%;border-collapse:separate;border-spacing:0}
.usc-table th,.usc-table td{padding:.65rem .75rem;vertical-align:top}
.usc-table thead th{position:sticky;top:0;z-index:1}
.usc-table tbody tr{transition:background-color var(--motion-fast) ease}

.usc-badge{display:inline-flex;align-items:center;gap:.3rem;min-height:1.6rem;padding:.15rem .5rem;border-radius:999px;line-height:1.1}
.usc-tabs{display:flex;flex-wrap:wrap;gap:var(--space-2);align-items:center}
.usc-pagination{display:flex;flex-wrap:wrap;gap:var(--space-2);align-items:center;justify-content:center}
.usc-menu,.usc-dialog{border-radius:var(--card-radius)}
.usc-notice{padding:var(--space-3) var(--space-4);border-radius:var(--control-radius)}

.usc-control:focus-visible,.usc-check:focus-visible,.usc-radio:focus-visible,.usc-tabs [role="tab"]:focus-visible{
  outline:2px solid var(--focus-outline)!important;
  outline-offset:2px!important;
}
.usc-disabled,.usc-control:disabled,.usc-control[aria-disabled="true"]{cursor:not-allowed!important;transform:none!important}

@media (pointer:coarse){
  .usc-button,.usc-field{min-height:44px}
  .usc-check,.usc-radio{inline-size:1.35rem;block-size:1.35rem}
}
@media (max-width:640px){
  .usc-actions > .usc-button{flex:1 1 auto}
  .usc-table th,.usc-table td{padding:.55rem .6rem}
}
@media (prefers-reduced-motion:reduce){
  .usc-control,.usc-table tbody tr{transition:none!important}
  .usc-button:hover{transform:none!important}
}


/* ========================================================================
   v4.4.0a — Form Relationship & Alignment Standards
   Compound choices read as one control; neighboring fields share a common
   top edge and consistent label/control structure.
   ======================================================================== */
.usc-form-layout{
  align-items:start !important;
  align-content:start !important;
}
.usc-field-unit{
  display:flex !important;
  flex-direction:column !important;
  align-items:stretch !important;
  justify-content:flex-start !important;
  align-self:start !important;
  gap:var(--space-2) !important;
  min-width:0 !important;
  margin:0 !important;
}
.usc-field-label{
  color:var(--text-secondary);
  font:inherit;
  line-height:1.2;
}
.usc-field-unit > .usc-field,
.usc-field-label > .usc-field{
  margin:0 !important;
  align-self:stretch !important;
}
.usc-choice,
.usc-choice-pair{
  display:inline-flex !important;
  flex-direction:row !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:var(--space-2) !important;
  min-height:var(--control-height-md);
  margin:0 !important;
  line-height:1.25 !important;
  cursor:pointer;
  vertical-align:top;
}
.usc-choice > input[type="checkbox"],
.usc-choice > input[type="radio"],
.usc-choice-pair > input[type="checkbox"],
.usc-choice-pair > input[type="radio"]{
  flex:0 0 auto !important;
  margin:0 !important;
}
.usc-choice:has(input:disabled),
.usc-choice-pair:has(input:disabled){
  cursor:not-allowed;
  color:var(--text-disabled);
}

/* Character workspace picker: keep wrapped selector rows in normal flow. */
body .compact-top .character-picker-form{
  display:grid !important;
  grid-template-columns:minmax(180px,280px) minmax(220px,320px) !important;
  grid-auto-rows:auto !important;
  align-items:start !important;
  align-content:start !important;
  gap:8px !important;
  min-width:0 !important;
  overflow:visible !important;
}
body .compact-top .character-picker-form > #characterQuickSelect{
  grid-column:1 / -1 !important;
  width:min(100%, 520px) !important;
  margin:0 !important;
  align-self:start !important;
}

/* Character import controls use one consistent field structure. */
body header.top.compact-top > .backup-actions .import-form,
body .compact-top > .backup-actions .import-form{
  display:grid !important;
  grid-template-columns:minmax(220px,1fr) minmax(220px,1fr) minmax(300px,1.35fr) max-content !important;
  align-items:start !important;
  align-content:start !important;
  gap:10px !important;
  width:100% !important;
}
body header.top.compact-top > .backup-actions .import-form > label:not(.checkline),
body .compact-top > .backup-actions .import-form > label:not(.checkline){
  display:flex !important;
  flex-direction:column !important;
  align-items:stretch !important;
  justify-content:flex-start !important;
  gap:6px !important;
  align-self:start !important;
  margin:0 !important;
  line-height:1.2 !important;
}
body header.top.compact-top > .backup-actions .import-form .checkline,
body .compact-top > .backup-actions .import-form .checkline{
  display:inline-flex !important;
  flex-direction:row !important;
  align-items:center !important;
  align-self:start !important;
  gap:8px !important;
  min-height:var(--control-height-md) !important;
  margin:1.55rem 0 0 !important;
  padding:0 !important;
  line-height:1.2 !important;
}
body header.top.compact-top > .backup-actions .import-form > button,
body .compact-top > .backup-actions .import-form > button{
  align-self:start !important;
  margin-top:1.55rem !important;
}

@media(max-width:1250px){
  body header.top.compact-top > .backup-actions .import-form,
  body .compact-top > .backup-actions .import-form{
    grid-template-columns:repeat(2,minmax(220px,1fr)) !important;
  }
}
@media(max-width:700px){
  body .compact-top .character-picker-form,
  body header.top.compact-top > .backup-actions .import-form,
  body .compact-top > .backup-actions .import-form{
    grid-template-columns:1fr !important;
  }
  body .compact-top .character-picker-form > #characterQuickSelect{
    grid-column:auto !important;
    width:100% !important;
  }
  body header.top.compact-top > .backup-actions .import-form .checkline,
  body .compact-top > .backup-actions .import-form .checkline,
  body header.top.compact-top > .backup-actions .import-form > button,
  body .compact-top > .backup-actions .import-form > button{
    margin-top:0 !important;
  }
}


/* ===== v4.5.0b Character Picker Control Separation =====
   Explicit grid areas and normal positioning prevent the character selector from
   occupying the same coordinates as the type selector under inherited rules. */
body .character-picker-top .character-picker-form{
  display:grid !important;
  grid-template-columns:minmax(180px,280px) minmax(220px,320px) !important;
  grid-template-areas:
    "type search"
    "character character" !important;
  grid-template-rows:auto auto !important;
  grid-auto-flow:row !important;
  column-gap:8px !important;
  row-gap:10px !important;
  position:static !important;
  height:auto !important;
  min-height:0 !important;
  overflow:visible !important;
}
body .character-picker-top .character-picker-form > #characterTypeFilter{
  grid-area:type !important;
}
body .character-picker-top .character-picker-form > .character-quick-filter{
  grid-area:search !important;
}
body .character-picker-top .character-picker-form > #characterQuickSelect{
  grid-area:character !important;
  grid-column:auto !important;
  width:100% !important;
  max-width:100% !important;
}
body .character-picker-top .character-picker-form > #characterTypeFilter,
body .character-picker-top .character-picker-form > .character-quick-filter,
body .character-picker-top .character-picker-form > #characterQuickSelect{
  position:static !important;
  inset:auto !important;
  transform:none !important;
  float:none !important;
  z-index:auto !important;
  margin:0 !important;
  align-self:stretch !important;
}
@media(max-width:700px){
  body .character-picker-top .character-picker-form{
    grid-template-columns:1fr !important;
    grid-template-areas:"type" "search" "character" !important;
  }
}

/* ===== v4.5.0d Character Picker Intrinsic Width + Banner Theme Colors =====
   The character type selector and quick-search field must be allowed to shrink
   inside the available picker width. Without min-width:0, their intrinsic form
   control widths can paint into the same horizontal space even when the grid
   itself is correctly positioned. Banner identity/build colors are mapped to
   explicit theme-owned semantic aliases. */
:root{
  --banner-context-text:var(--bone-dim);
  --banner-identity-text:var(--gold);
  --banner-version-text:var(--gold);
  --banner-internal-text:var(--steel);
}
body .character-picker-top .character-picker-form{
  grid-template-columns:minmax(0,1fr) minmax(0,1.15fr) !important;
  width:min(100%,520px) !important;
  max-width:100% !important;
  min-width:0 !important;
}
body .character-picker-top .character-picker-form > #characterTypeFilter,
body .character-picker-top .character-picker-form > .character-quick-filter,
body .character-picker-top .character-picker-form > #characterQuickSelect{
  box-sizing:border-box !important;
  min-width:0 !important;
  width:100% !important;
  max-width:100% !important;
}
.site-banner.site-banner-compact .site-banner-status-line,
.site-banner-status-line{
  color:var(--banner-context-text) !important;
}
.site-banner.site-banner-compact .site-banner-status-line strong,
.site-banner-status-line strong{
  color:var(--banner-identity-text) !important;
}
.site-banner.site-banner-compact .site-banner-version-line,
.site-banner-version-line{
  color:var(--banner-version-text) !important;
}
.site-banner.site-banner-compact .site-banner-admin-build,
.site-banner-admin-build{
  color:var(--banner-internal-text) !important;
}
@media(max-width:700px){
  body .character-picker-top .character-picker-form{
    width:100% !important;
    grid-template-columns:minmax(0,1fr) !important;
  }
}


/* v4.5.4a Dice Skin Renderer Display Fix */
.dice-roller-layout{display:grid;grid-template-columns:minmax(0,2fr) minmax(250px,1fr);gap:1rem;margin-bottom:1rem}.standalone-roller .stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.75rem}.dice-skin-status{text-align:center}.dice-preview{display:flex;justify-content:center;align-items:center;gap:.7rem;flex-wrap:wrap;margin:1rem 0}.d4-face{display:inline-flex;flex:0 0 auto;align-items:center;justify-content:center;vertical-align:middle}/* Dice frames size from each skin's own sprite metadata, emitted inline by dice_face_render_html() as --d4-w/--d4-h/--d4-strip/--d4-shift. Fallbacks match the Forge-Issue sheet (4 frames of 264x236 shown at 72px). Do NOT reintroduce fixed px: it silently forces every skin into the forge sheet's geometry. */.d4-sprite-face{position:relative;display:inline-block;vertical-align:middle;width:var(--d4-w,72px);height:var(--d4-h,64px);overflow:hidden;image-rendering:auto}.d4-sprite-face>img{position:absolute;top:0;left:0;width:var(--d4-strip,288px)!important;height:var(--d4-h,64px)!important;max-width:none!important;max-height:none!important;object-fit:fill!important;display:block!important;transform:translateX(var(--d4-shift,0px))}.d4-css-face{min-width:3rem;min-height:3rem;padding:.35rem;background:var(--dice-face,var(--bone));color:var(--dice-text,var(--bg));border:3px solid var(--dice-edge,var(--gold));clip-path:polygon(50% 0,100% 100%,0 100%);font-weight:800;text-shadow:none}.d4-face.one{filter:drop-shadow(0 0 7px var(--dice-one,var(--bad)))}.d4-face.success{filter:drop-shadow(0 0 7px var(--dice-success,var(--ember)))}.rendered-dice{display:flex;gap:.7rem;align-items:center;flex-wrap:wrap}.dice-chain{display:inline-flex;align-items:center;gap:.18rem}.dice-chain-arrow{font-weight:800;color:var(--muted);font-size:1.15rem}.asset-preview-image{display:block;max-width:100%;max-height:150px;object-fit:contain;margin:.5rem auto}.latest-roll-card{outline:2px solid var(--accent)}@media(max-width:760px){.dice-roller-layout{grid-template-columns:1fr}.standalone-roller .stats{grid-template-columns:1fr}.d4-sprite-face{transform:scale(.86);transform-origin:center}.rendered-dice{gap:.25rem}.dice-chain{gap:0}}

.asset-dice-preview{display:flex;align-items:center;gap:.15rem;flex-wrap:wrap;margin:.35rem 0 .5rem}

.dice-skin-picker{margin:.75rem 0}.dice-skin-picker h4{margin:0 0 .4rem;font-size:.95rem}.dice-skin-option{display:flex;align-items:center;gap:.5rem;padding:.35rem .5rem;border:1px solid var(--edge,#3a3a3a);border-radius:.4rem;margin-bottom:.35rem;flex-wrap:wrap}.dice-skin-option.is-equipped{border-color:var(--ember,#f0703a)}.dice-skin-option-faces{display:inline-flex;align-items:center;gap:.1rem}.dice-skin-option-name{flex:1 1 auto;min-width:0;font-size:.9rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dice-roll-pending .roll-line{visibility:hidden}.dice-roll-pending .d4-face{display:none;filter:none}.dice-roll-pending .d4-face.d4-roll-active,.dice-roll-pending .d4-face.d4-roll-resolved{display:inline-flex}.dice-roll-pending .d4-sprite-face.d4-roll-active,.dice-roll-pending .d4-sprite-face.d4-roll-resolved{display:inline-block}.dice-roll-pending .d4-face.d4-roll-active{animation:d4-roll-hop .16s ease-in-out infinite alternate}.dice-roll-pending .d4-face.d4-roll-resolved.one{animation:d4-one-impact .42s ease-out;filter:drop-shadow(0 0 11px var(--dice-one,var(--bad)))}.dice-roll-pending .d4-face.d4-roll-resolved.success{filter:drop-shadow(0 0 7px var(--dice-success,var(--ember)))}.dice-roll-pending .d4-face.d4-roll-exploded{animation:d4-explosion .55s ease-out;filter:drop-shadow(0 0 15px var(--dice-success,var(--ember)))}.dice-roll-pending .dice-chain-arrow{display:none}.dice-roll-pending .dice-chain-arrow.d4-arrow-revealed{display:inline;animation:d4-arrow-in .2s ease-out}@keyframes d4-roll-hop{from{transform:translateY(2px) rotate(-5deg) scale(.96)}to{transform:translateY(-9px) rotate(5deg) scale(1.04)}}@keyframes d4-explosion{0%{transform:scale(1);filter:drop-shadow(0 0 5px var(--dice-success,var(--ember)))}45%{transform:scale(1.3) rotate(7deg);filter:drop-shadow(0 0 24px var(--dice-success,var(--ember)))}100%{transform:scale(1);filter:drop-shadow(0 0 15px var(--dice-success,var(--ember)))}}@keyframes d4-one-impact{0%{transform:translateX(0) scale(1)}20%{transform:translateX(-7px) rotate(-6deg) scale(1.12)}40%{transform:translateX(6px) rotate(5deg)}60%{transform:translateX(-4px) rotate(-3deg)}80%{transform:translateX(2px)}100%{transform:translateX(0) scale(1)}}@keyframes d4-arrow-in{from{opacity:0;transform:translateX(-7px)}to{opacity:1;transform:translateX(0)}}@media(prefers-reduced-motion:reduce){.dice-roll-pending .d4-face.d4-roll-active,.dice-roll-pending .d4-face.d4-roll-resolved,.dice-roll-pending .d4-face.d4-roll-exploded,.dice-roll-pending .dice-chain-arrow.d4-arrow-revealed{animation:none}}

/* Keep roll-history chains intact and contain wide results in a local scroll rail. */
.roll-card > .dice{
  flex-wrap:nowrap;
  max-width:100%;
  overflow-x:auto;
  overflow-y:hidden;
  padding:12px 4px;
  overscroll-behavior-x:contain;
  -webkit-overflow-scrolling:touch;
}
.roll-card > .dice > .dice-chain{flex:0 0 auto}

/* v4.6.0 Cosmetic Metadata */
.asset-metadata{display:grid;gap:.35rem;margin:.75rem 0}.asset-metadata>div{display:grid;grid-template-columns:minmax(8rem,35%) 1fr;gap:.65rem;padding:.3rem 0;border-bottom:1px solid color-mix(in srgb,var(--edge,#3a3a3a) 55%,transparent)}.asset-metadata dt{font-weight:700;color:var(--muted)}.asset-metadata dd{margin:0;overflow-wrap:anywhere}@media(max-width:520px){.asset-metadata>div{grid-template-columns:1fr;gap:.1rem}}

/* v4.6.0 Badge Display Surfaces */
.badge-image{display:inline-block;flex:0 0 auto;object-fit:var(--badge-fit,contain);object-position:center;border-radius:var(--badge-radius,4px);vertical-align:middle}.badge-image-empty{border:1px dashed var(--line,var(--edge,#3a3a3a));background:var(--panel-2,var(--bg-2,#2a241b))}.badge-image-inline{width:var(--badge-inline-w,24px);height:var(--badge-inline-h,24px)}.badge-image-profile{width:var(--badge-profile-w,64px);height:var(--badge-profile-h,64px)}.badge-image-collection{width:var(--badge-collection-w,160px);height:var(--badge-collection-h,160px)}.badge-image-admin{width:var(--badge-admin-w,96px);height:var(--badge-admin-h,96px)}.site-banner-account-identity .badge-image-inline{margin:0 .2rem}.asset-badge-preview{display:flex;align-items:center;justify-content:center;min-height:168px;margin:.5rem 0}.asset-card-dice-skin{grid-column:1/-1}.asset-dice-skin-preview{display:flex;align-items:center;justify-content:center;width:100%;margin:.75rem 0;overflow:hidden}.asset-dice-skin-full-preview{display:block;width:auto;height:auto;max-width:100%;max-height:none;object-fit:contain}.profile-layout{display:grid;grid-template-columns:minmax(240px,.8fr) minmax(0,1.5fr);gap:1rem;align-items:start}.profile-identity-card{text-align:center}.profile-badge-display{display:flex;flex-direction:column;align-items:center;gap:.55rem;padding:.35rem 0 .8rem}.profile-badge-display h2{margin:.15rem 0 0}.profile-username{color:var(--muted);line-height:1.25}.profile-role{margin-top:.1rem}.profile-selected-badge-name{margin:.25rem 0 .8rem}.profile-badge-grid{display:grid;gap:.75rem}.profile-badge-option{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:1rem;align-items:start;padding:.85rem;border:1px solid var(--line-soft,var(--line,#3a3120));border-radius:10px;background:var(--panel-2,var(--bg-2,#2a241b))}.profile-badge-option.is-equipped{border-color:var(--accent,var(--gold,#d7b45a))}.profile-badge-details h3{margin:0 0 .25rem}.profile-badge-summary{display:flex;align-items:center;gap:.5rem;color:var(--muted);margin-bottom:.55rem}.profile-badge-metadata{display:grid;gap:.18rem;margin:0}.profile-badge-metadata>div{display:grid;grid-template-columns:minmax(5.5rem,25%) minmax(0,1fr);gap:.55rem}.profile-badge-metadata dt{font-weight:700;color:var(--muted)}.profile-badge-metadata dd{margin:0;overflow-wrap:anywhere}.profile-badge-flavor{margin:.55rem 0 0;color:var(--muted)}.badge-admin-preview-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1rem}.badge-admin-preview-card{display:grid;grid-template-columns:auto minmax(0,1fr);gap:1rem;align-items:start}.badge-admin-preview-card h2{margin-top:0}@media(max-width:680px){.badge-image-inline{width:var(--badge-inline-mobile-w,20px);height:var(--badge-inline-mobile-h,20px)}.profile-layout{grid-template-columns:1fr}.profile-badge-option{grid-template-columns:auto minmax(0,1fr)}.profile-badge-option form{grid-column:1/-1}.profile-badge-metadata>div{grid-template-columns:5.5rem minmax(0,1fr)}.badge-admin-preview-card{grid-template-columns:1fr}.badge-admin-preview-card>.badge-image{justify-self:center}}

/* v4.6.0 Collectible Asset Catalog Filters */
.collectible-asset-tabs>form{display:flex;flex:1 1 150px;margin:0}.collectible-asset-tabs>form>button{width:100%;height:100%;margin:0}

/* Keep the active badge visible beside long account names at narrow widths. */
.site-banner-status-line .site-banner-account-identity{display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:.25rem!important;min-width:0!important;max-width:100%!important;overflow:visible!important}.site-banner-account-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.site-banner-account-prefix,.site-banner-account-role{flex:0 0 auto;display:inline!important;overflow:visible!important}.site-banner-account-identity .badge-image-inline{flex:0 0 auto}@media(max-width:680px){.site-banner-status-line .site-banner-account-identity{display:flex!important;justify-content:flex-start!important;width:100%!important}.site-banner-account-prefix{display:none!important}.site-banner-account-name{flex:0 1 auto}}