/* Dedicated art planes use native image ratios; no padded banner canvases. */
:root{
 --site-illustration:url('/interface-art/site-background.jpg?v=interface-20261029-3');
 --character-rail-illustration:url('/interface-art/character-wizard-rail.jpg?v=interface-20261029-3');
 --crew-rail-illustration:url('/interface-art/crew-wizard-rail.jpg?v=interface-20261029-3');
 --wizard-rail-shade:linear-gradient(180deg,#080e10e6 0%,#080e10d9 75%,#080e108c 100%);
}
body::before{background:linear-gradient(180deg,#080e1020,#080e10d9 85%),var(--site-illustration) center top/contain no-repeat;background-color:#080e10}
.surface-art{position:absolute;display:flex;align-items:center;justify-content:center;pointer-events:none;z-index:0;overflow:visible;min-width:0}
.surface-art>img{display:block;width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain;object-position:center}
/* Fade the outer edge of the illustration into the host surface, not a hard JPEG rectangle. */
.art-campaign>img,.art-character-heading>img,.art-crew-heading>img{
 -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent),linear-gradient(0deg,transparent,#000 10%,#000 90%,transparent);
 -webkit-mask-composite:source-in;
 mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent),linear-gradient(0deg,transparent,#000 10%,#000 90%,transparent);
 mask-composite:intersect;
}
.session-toolbar.compact-campaign-bar{background:#080e10;isolation:isolate;overflow:visible}
.compact-campaign-bar>.campaign-heading{display:block}
.compact-campaign-bar>.campaign-heading,.compact-campaign-bar>.flow-stage-panel,.compact-campaign-bar>.flow-header-tools{position:relative;z-index:1}
.art-campaign{inset:8px 310px 8px auto;width:46%;max-width:640px;opacity:.65}
.compact-campaign-bar .campaign-heading h1{max-width:100%;overflow-wrap:anywhere}
/* Match the approved character banner: city beneath, large art on the right, left fade. */
.game-sheet.crew-sheet>.sheet-banner{background:linear-gradient(90deg,#090d10d9,#0b10123d),var(--campaign-art) center 42%/cover;isolation:isolate}
.game-sheet.crew-sheet>.sheet-banner::after{content:"";background:linear-gradient(90deg,#090e10e8 0%,#0b1012b3 40%,#090e1038 70%,#090e1080 100%)}
.art-crew{inset:0 0 0 auto;width:52%;height:100%;max-width:none;display:block;opacity:.84;-webkit-mask-image:linear-gradient(90deg,transparent,#000 28%);mask-image:linear-gradient(90deg,transparent,#000 28%)}
.art-crew>img{width:100%;height:100%;max-width:none;max-height:none;object-fit:cover;object-position:center 61%}
.crew-banner>.crew-banner-copy{padding-right:210px}
.crew-banner .banner-seal{position:absolute;right:30px;bottom:20px;top:auto;font-size:2.6rem;opacity:.85}
.sheet-banner>.crew-edit-tools{position:absolute;top:21px;right:25px;z-index:4;display:flex;flex-direction:column;align-items:flex-end;gap:7px;max-width:205px;padding:9px 11px;border:1px solid #8b8e7e52;background:#080e10c9;color:#e1e3d5;backdrop-filter:blur(4px)}
.crew-edit-tools>span{font-size:.59rem;line-height:1.35;max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.crew-edit-tools .primary,.crew-edit-tools .secondary{min-height:32px;padding:7px 11px;font-size:.65rem;justify-content:center;white-space:nowrap}
.crew-edit-tools .secondary{color:#d0d4c6;border-color:#737968;background:#17201cc9}
.crew-edit-tools.editing{border-color:#ba53465e}.crew-edit-tools.editing>span{color:#f5b2a1}
.crew-edit-tools[role="status"]{font-size:.65rem}
.wizard-layout[data-wizard] .wizard-heading::before{content:none;background:none}
.wizard-layout[data-wizard] .wizard-heading{background:#f5f2ea;isolation:isolate;padding-right:clamp(140px,26%,390px)}
.wizard-heading>.kicker,.wizard-heading>.wizard-name{position:relative;z-index:1}
.art-character-heading,.art-crew-heading{inset:8px 12px 8px auto;width:32%;max-width:390px}
.wizard-heading>.wizard-name{width:100%;max-width:720px}
.wizard-layout[data-wizard="character"] .wizard-sidebar-art{background:var(--wizard-rail-shade),var(--character-rail-illustration) center bottom/contain no-repeat;background-color:#080e10}
.wizard-layout[data-wizard="crew"] .wizard-sidebar-art{background:var(--wizard-rail-shade),var(--crew-rail-illustration) center bottom/contain no-repeat;background-color:#080e10}
.entry-cover{aspect-ratio:1;min-height:0;background:#080e10;isolation:isolate}
.art-entry{inset:0;opacity:.55}
.entry-cover>.kicker,.entry-cover>h1,.entry-cover>p{position:relative;z-index:1}
.entry-cover>.cover-mark{position:absolute;z-index:0;pointer-events:none;line-height:1}
@media(max-width:1000px){
 .art-campaign{right:250px;width:44%}
 .wizard-layout[data-wizard] .wizard-heading{padding-right:30%}
}

@media(max-width:650px){
 .art-campaign{inset:8px 8px 8px auto;width:70%;max-width:340px;opacity:.3}
 .art-crew{width:65%;opacity:.65}
 .crew-banner>.crew-banner-copy{padding-right:145px}
 .crew-banner>.crew-banner-copy .banner-kicker{max-width:100%;line-height:1.4}
 .sheet-banner>.crew-edit-tools{top:18px;right:18px;max-width:143px;padding:7px;gap:6px}
 .crew-edit-tools>span{font-size:.53rem;max-width:127px}
 .crew-edit-tools .primary,.crew-edit-tools .secondary{font-size:.58rem;min-height:30px;padding:7px 8px}
 .entry-cover{aspect-ratio:3/2;min-height:0;padding:25px}
 .entry-cover h1{font-size:clamp(1.7rem,6vw,2.4rem)}
 .entry-cover .kicker{font-size:.58rem}
 .entry-cover p{font-size:.72rem;max-width:300px}
 .wizard-layout[data-wizard] .wizard-heading{padding-right:28%}
 .art-character-heading,.art-crew-heading{right:6px;width:27%;opacity:.7}
}

/* Cosmetic audit fixes: shared type, spacing and surface hierarchy. */
:root{
  --ui-text:15px;
  --ui-label:14px;
  --ui-meta:13px;
  --ui-leading:1.55;
  --ui-muted-paper:#59615b;
}
.game-sheet,.wizard-paper,.table-paper,.materials-paper,.entry-paper,.new-campaign,.roll-dialog{
  --muted:var(--ui-muted-paper);
}
.rule-copy,.wizard-body .rule-copy,.item-row .rule-copy,.choice-description p,
.selection-excerpt,.journal-entry p,.ruled-field input,.ruled-field textarea,
.ruled-field select,.wizard-field input,.wizard-field textarea,.wizard-field select,
.wound-row input,.note-card input,.note-card textarea{
  font-size:var(--ui-text);line-height:var(--ui-leading);
}
.rule-accordion summary,.wizard-body .rule-accordion summary,
.ruled-field>span,.wizard-field>span,.track-line strong,.stepper,.action-name,
.material-links a,.auth-field,.note-card summary,.note-card label{
  font-size:var(--ui-label);line-height:1.45;
}
.sheet-bar small,.track-line small,.load-choice small,.journal-meta,
.xp-source small,.item-common-tag,.rule-accordion summary small,.micro-note,
.choice-summary .micro-note,.wizard-field small,.project-copy>small,
.project-copy .text-link,.project-add label>span,.roster-card>span,.roster-card small,
.material-links .subheading,.sheet-footer,.sheet-actions,#sync-status{
  font-size:var(--ui-meta);line-height:1.5;
}
.banner-kicker,.hero-meta,.wizard-heading .kicker,.entry-paper .kicker,
.new-campaign .kicker,.materials-paper .kicker{font-size:var(--ui-meta);line-height:1.5}
.sheet-bar{flex-wrap:wrap;row-gap:4px}
.sheet-bar small{white-space:normal;letter-spacing:.04em}
.sheet-bar small,.journal-meta,.wizard-field small,.project-copy>small,
.project-add label>span,.game-sheet .micro-note,.wizard-paper .micro-note,
.new-campaign p,.entry-paper>p,.sheet-footer{
  color:var(--ui-muted-paper);
}
.ruled-field ::placeholder,.wound-row ::placeholder,.trauma-row ::placeholder,
.wizard-field textarea::placeholder,.note-card input::placeholder,.note-card textarea::placeholder{
  color:var(--ui-muted-paper);opacity:1;
}
.game-sheet .kicker.red,.wizard-paper .kicker.red,.materials-paper .kicker.red,
.entry-paper .kicker.red,.new-campaign .kicker.red,.table-paper .kicker.red,
.rule-accordion summary small,.item-common-tag{color:var(--red-deep)}
.notes-visibility{margin:0 0 12px}
.entry-cover{flex-shrink:0}
.entry-cover>.kicker,.entry-cover>h1,.entry-cover>p{flex-shrink:0}

/* Lift the entire isolated header when its native details menu is open. */
.session-toolbar.compact-campaign-bar:has(.campaign-tools[open]){position:relative;z-index:30}

/* Keep the crew title and edit panel in separate layout tracks. */
.game-sheet.crew-sheet>.crew-banner{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(180px,220px);
  column-gap:24px;row-gap:12px;height:auto;min-height:170px;
}
.crew-banner>.crew-banner-copy{grid-column:1;grid-row:1 / 3;padding-right:0;align-self:center}
.crew-banner .hero-name{width:100%;min-width:0}
.crew-banner .banner-kicker,.crew-banner .hero-meta{overflow-wrap:anywhere}
.sheet-banner>.crew-edit-tools{
  position:relative;top:auto;right:auto;grid-column:2;grid-row:1;
  align-items:stretch;justify-self:stretch;max-width:none;margin:0;
}
.crew-edit-tools>span{max-width:none;font-size:var(--ui-meta);white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere}
.crew-edit-tools .primary,.crew-edit-tools .secondary{font-size:var(--ui-meta);min-height:36px;white-space:normal}
.crew-edit-tools[role="status"]{font-size:var(--ui-meta);line-height:1.5}
.crew-banner .banner-seal{position:relative;top:auto;right:auto;bottom:auto;grid-column:2;grid-row:2;justify-self:end;line-height:1}

/* Visible marks retain their geometry; their buttons get larger targets. */
.pips{gap:3px}
.pip,.creation-action-grid .pip,.wizard-body .creation-action-grid .pip{width:24px;min-width:24px;height:28px;padding:4px;flex-shrink:0}
.stepper{min-height:46px}
.stepper-controls{gap:6px}
.stepper-controls button{width:36px;height:36px;flex-shrink:0}
.rule-select,.rule-status{width:36px;height:36px;flex-basis:36px}
.rule-select.multi-diamonds,.rule-status.multi-diamonds{min-height:36px}
.item-row>button.item-diamond,.item-row>button.item-remove{width:32px;height:32px;flex-basis:32px;flex-shrink:0}
.modal-close,.carousel-arrow{width:36px;height:36px;display:grid;place-items:center;padding:0}
.action-name{min-height:32px}
.clock-pips,.project-copy .clock-pips{gap:6px}
.clock-pips button,.project-copy .clock-pips button{
  width:32px;height:32px;flex:0 0 32px;display:grid;place-items:center;
  padding:0;transform:none;border:0;background:transparent;
}
.clock-pips button::before{
  content:"";width:18px;height:18px;box-sizing:border-box;
  transform:rotate(45deg);border:1px solid #5c6760;background:white;
}
.clock-pips button.filled{background:transparent}
.clock-pips button.filled::before{background:var(--red);border-color:var(--red-deep)}
.clock-pips button:hover:not(:disabled)::before{border-color:var(--red-deep);box-shadow:0 0 0 2px #d6312e25}
.pip:focus-visible,.stepper-controls button:focus-visible,.item-row>button:focus-visible,
.clock-pips button:focus-visible,.carousel-arrow:focus-visible,.modal-close:focus-visible{
  outline:2px solid var(--red-deep);outline-offset:2px;
}

/* Small icons use the same SVG geometry independently of installed fonts. */
.ui-icon{
  display:inline-block;width:18px;height:18px;flex:0 0 18px;
  vertical-align:-.15em;background:currentColor;pointer-events:none;
  -webkit-mask:var(--ui-icon) center / contain no-repeat;
  mask:var(--ui-icon) center / contain no-repeat;
}
.action-name .ui-icon{width:16px;height:16px;flex-basis:16px;color:var(--red-deep)}
.atlas-tools button{display:inline-flex;align-items:center;justify-content:center;gap:6px}

@media(max-width:650px){
  .game-sheet.crew-sheet>.crew-banner{grid-template-columns:minmax(0,1fr);gap:16px;min-height:0}
  .crew-banner>.crew-banner-copy{grid-column:1;grid-row:1;padding-right:0}
  .sheet-banner>.crew-edit-tools{grid-column:1;grid-row:2;justify-self:start;max-width:100%;padding:9px 11px;gap:7px}
  .crew-edit-tools>span{font-size:var(--ui-meta);max-width:none}
  .crew-edit-tools .primary,.crew-edit-tools .secondary{font-size:var(--ui-meta);min-height:36px;padding:7px 11px}
  .crew-banner .banner-seal{display:none}
  .wizard-layout[data-wizard] .wizard-heading{
    display:grid;grid-template-columns:minmax(0,1fr) 76px;gap:10px 12px;
    align-items:center;padding:20px 21px 14px;
  }
  .wizard-heading>.kicker{grid-column:1;grid-row:1}
  .wizard-layout[data-wizard] .wizard-heading>.surface-art{
    position:static;grid-column:2;grid-row:1;width:76px;height:40px;max-width:100%;opacity:.7;
  }
  .wizard-heading>.wizard-name{grid-column:1 / -1;grid-row:2;margin-top:0;max-width:100%}
}
.ui-icon-dice{--ui-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%223%22%20width%3D%2218%22%20height%3D%2218%22%20rx%3D%223%22%2F%3E%3Cpath%20d%3D%22M7%207h.01M17%207h.01M12%2012h.01M7%2017h.01M17%2017h.01%22%20stroke-width%3D%223%22%2F%3E%3C%2Fsvg%3E")}
.ui-icon-book{--ui-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%205v15M12%205C9%203%205%203%202%204v15c4-1%207-1%2010%201%203-2%206-2%2010-1V4c-3-1-7-1-10%201Z%22%2F%3E%3C%2Fsvg%3E")}
.ui-icon-guide{--ui-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m3%204%206%202%206-2%206%202v15l-6-2-6%202-6-2V4Zm6%202v15m6-17v15%22%2F%3E%3C%2Fsvg%3E")}
.ui-icon-character{--ui-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%227%22%20r%3D%224%22%2F%3E%3Cpath%20d%3D%22M4%2021v-2a8%208%200%200%201%2016%200v2%22%2F%3E%3C%2Fsvg%3E")}
.ui-icon-crew{--ui-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%229%22%20cy%3D%227%22%20r%3D%223%22%2F%3E%3Cpath%20d%3D%22M2%2021v-3a7%207%200%200%201%2014%200v3M16%204a3%203%200%200%201%200%206m3%2011v-3a7%207%200%200%200-2-5%22%2F%3E%3C%2Fsvg%3E")}
.ui-icon-move{--ui-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%202v20M2%2012h20M8%206l4-4%204%204M8%2018l4%204%204-4M6%208l-4%204%204%204m12-8%204%204-4%204%22%2F%3E%3C%2Fsvg%3E")}
.ui-icon-marker{--ui-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%2022S4%2014%204%209a8%208%200%201%201%2016%200c0%205-8%2013-8%2013Z%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%229%22%20r%3D%223%22%2F%3E%3C%2Fsvg%3E")}
.ui-icon-pen{--ui-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m15%203%206%206L9%2021H3v-6L15%203Zm-3%203%206%206M3%2021l5-5%22%2F%3E%3C%2Fsvg%3E")}
.ui-icon-erase{--ui-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m15%203%206%206-11%2012H6l-5-5L15%203ZM8%209l9%208m-7%204h12%22%2F%3E%3C%2Fsvg%3E")}
.ui-icon-undo{--ui-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m8%204-6%206%206%206M2%2010h12a7%207%200%200%201%200%2014%22%20transform%3D%22translate(0%20-2)%22%2F%3E%3C%2Fsvg%3E")}