:root { color-scheme: light; --ink: #222222; --muted: #595959; --line: #cccccc; --accent: #333333; }
* { box-sizing: border-box; }
body { font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; margin: 0; color: var(--ink); background: #f5f5f5; line-height: 1.45; }
.app-container { max-width: 1400px; margin: 1.5rem auto; padding: 1.5rem; background: white; border-radius: 2px; box-shadow: none; }
.app-header { margin-bottom: 1.5rem; }
h1 { font-size: 1.65rem; margin: 0; } h2 { font-size: 1.05rem; margin: 0 0 .75rem; } h3 { font-size: 1.1rem; margin: 1.35rem 0 .65rem; } h4 { font-size: .95rem; margin: 1rem 0 .4rem; }
p { margin: .5rem 0 .8rem; }
.app-header p { color: var(--muted); margin-bottom: 0; }
.flex-row { display: flex; gap: 1.5rem; align-items: flex-start; }
.flex-column { display: flex; flex-direction: column; gap: 1rem; }
.controls { flex: 0 0 320px; }
.panel { background: #fafafa; border: 1px solid var(--line); border-radius: 2px; padding: 1rem; }
.stronghold-sheet { flex: 1 1 auto; min-width: 0; }
#sheetStrongholdName { font-size: 1.65rem; overflow-wrap: anywhere; }
.eyebrow { color: var(--muted); font-size: .8rem; letter-spacing: .05em; margin-top: 0; }
label, legend { display: block; font-size: .85rem; font-weight: 600; margin: .5rem 0 .25rem; }
input[type="text"], input[type="number"], select { width: 100%; padding: .45rem; border: 1px solid #888888; border-radius: 2px; font: inherit; font-size: .9rem; background: white; color: var(--ink); }
button { font: inherit; font-size: .85rem; padding: .45rem .7rem; border-radius: 2px; border: 1px solid var(--accent); background: var(--accent); color: white; cursor: pointer; }
button.secondary { background: white; color: var(--accent); }
button:disabled { opacity: .55; cursor: not-allowed; }
button:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible { outline: 3px solid #111111; outline-offset: 2px; }
#addRoomButton, #printButton, #applyUpgrade { width: 100%; margin-top: .5rem; }
.help { font-size: .8rem; color: var(--muted); }
.notice { border-left: 3px solid #555555; background: #f0f0f0; padding: .6rem; font-size: .85rem; color: #333333; }
.cost-breakdown { font-size: .85rem; white-space: pre-line; }
.dimensions { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
fieldset { border: 1px solid var(--line); border-radius: 2px; padding: .5rem .7rem .7rem; margin: .8rem 0; }
.check { display: flex; gap: .45rem; align-items: flex-start; font-weight: 400; }
.check input { margin-top: .2rem; }
.table-scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: .82rem; }
th, td { padding: .6rem .4rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
th { background: #eeeeee; font-weight: 600; }
tfoot th, tfoot td { font-weight: 600; background: #f4f4f4; }
.numeric { text-align: right; }
.room-title { font-weight: 650; }
.room-detail { display: block; font-size: .75rem; color: var(--muted); margin-top: .25rem; }
.row-actions { display: flex; gap: .3rem; flex-wrap: wrap; }
tr.selected { background: #e8e8e8; }
.summary-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(170px,1fr)); gap: .65rem; }
.summary-grid div { padding: .7rem; border: 1px solid var(--line); border-radius: 2px; }
dt { color: var(--muted); font-size: .77rem; } dd { margin: .2rem 0 0; font-size: 1.15rem; font-weight: 650; }
ul.bonus-list, #reviewNotes { padding-left: 1.25rem; font-size: .85rem; }
li { margin: .35rem 0; }
details { border-top: 1px solid var(--line); padding-top: .75rem; margin-top: 1rem; font-size: .85rem; }
summary { font-weight: 600; cursor: pointer; }
#upgradeQuote { font-size: .85rem; }
[hidden] { display: none !important; }
@media (max-width: 980px) { .app-container { padding: 1rem; margin: .5rem; } .flex-row { gap: 1rem; } .controls { flex-basis: 280px; } }
@media (max-width: 760px) { .flex-row { flex-direction: column; } .controls, .stronghold-sheet { width: 100%; flex-basis: auto; } table { min-width: 560px; } }

/* Personnel extends the existing two-column vocabulary without changing rooms. */
.personnel-section { margin-top: 1.5rem; }
.personnel-section > h2 { font-size: 1.4rem; }
.personnel-layout { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 1.5rem; align-items: start; }
.personnel-controls { padding-right: 1rem; border-right: 1px solid var(--line); }
.personnel-controls h3:first-child, .roster-pane h3:first-child { margin-top: .4rem; }
.personnel-controls button { margin-top: .5rem; }
textarea { width: 100%; padding: .45rem; font: inherit; font-size: .9rem; border: 1px solid #888888; border-radius: 2px; resize: vertical; }
.grant-card { border: 1px solid var(--line); padding: .7rem; margin-bottom: .7rem; border-radius: 2px; }
.grant-card p { margin: .25rem 0; font-size: .8rem; }
#allyEditor { border-top: 1px solid var(--line); margin-top: 1rem; }
#housingSummary { font-size: .85rem; }
#personnelTable td { overflow-wrap: anywhere; }
.personnel-controls, .roster-pane, #allyEditor { min-width: 0; }
.personnel-section h3, .personnel-section h4, .personnel-section p,
.personnel-section li, .personnel-section dd, .personnel-section .room-detail { overflow-wrap: anywhere; }
.personnel-section select, .personnel-section input, .personnel-section textarea { min-width: 0; max-width: 100%; }
.personnel-section .numeric { white-space: normal; overflow-wrap: normal; }
.workplace-compatible { color: #222222; }
.workplace-conditional { color: #333333; }
.workplace-incompatible { color: #111111; }
.saving-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; padding: .65rem; background: #eeeeee; border: 1px solid var(--line); margin-bottom: .8rem; position: sticky; top: 0; z-index: 5; }
.saving-toolbar strong { flex: 1 1 180px; min-width: 0; overflow-wrap: anywhere; }
#saveStatus { white-space: nowrap; font-size: .85rem; }
#saveStatus[data-status="Save failed"] { color: #111111; font-weight: bold; }
#storageError { overflow-wrap: anywhere; }
.library-card { border-top: 1px solid var(--line); padding: .75rem 0; overflow-wrap: anywhere; }
.library-card input { margin: .4rem 0; }
.library-card button { margin: .2rem .4rem .2rem 0; }
.treasury-section { margin-top: 1.5rem; overflow-wrap: anywhere; }
.treasury-section > h2 { font-size: 1.4rem; }
.treasury-controls { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1rem; }
.treasury-controls .panel { min-width: 0; }
.treasury-controls button { margin-top: .6rem; }
#toolbarTreasury { font-size: .8rem; overflow-wrap: anywhere; }
@media (max-width: 400px) { .treasury-controls { display: block; } .treasury-controls .panel { margin-bottom: .75rem; } }

/* Phase 5.5: view-only navigation; saved stronghold state is unchanged. */
#appChrome { position: sticky; top: 0; z-index: 10; background: white; padding-bottom: .5rem; }
#appChrome .saving-toolbar { position: static; margin-bottom: .35rem; }
#appChrome #printButton { width: auto; margin-top: 0; }
.primary-tabs { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .3rem; }
.primary-tabs button { min-width: 0; background: #eeeeee; color: var(--accent); border-color: var(--line); overflow-wrap: anywhere; }
.primary-tabs button[aria-selected="true"] { background: var(--accent); color: white; border-color: var(--accent); }
.primary-panel { min-width: 0; margin-top: 1.25rem; }
#panel-overview, #recordRoot { overflow-wrap: anywhere; }
.dashboard-links { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
#openRoomDialog, #openAllyDialog { width: 100%; padding: .65rem; }
dialog { width: min(680px, calc(100vw - 1.5rem)); max-height: calc(100dvh - 1.5rem); overflow-y: auto; border: 1px solid var(--line); border-radius: 2px; padding: 1.25rem; color: var(--ink); background: white; box-sizing: border-box; overflow-wrap: anywhere; }
dialog::backdrop { background: rgb(0 0 0 / 65%); }
.dialog-heading { display: flex; justify-content: space-between; align-items: center; gap: .75rem; margin-bottom: .75rem; }
.dialog-heading h2 { margin: 0; font-size: 1.25rem; }
.dialog-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .8rem; }
dialog input, dialog select { min-width: 0; max-width: 100%; }
#roomSelect { min-height: 9rem; }
#panel-allies .personnel-section, #panel-treasury .treasury-section { margin-top: 0; }
#recordRoot .panel { background: white; }
#recordRoot .roster-pane { min-width: 0; }
#recordRoot table td { overflow-wrap: anywhere; }
@media (max-width: 760px) { .primary-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); } dialog { padding: .85rem; } }
@media (max-width: 400px) { .primary-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
#personnelTable th:first-child { width: 24%; }
#personnelTable th:nth-child(2), #personnelTable th:nth-child(3) { width: 20%; }
@media (max-width: 980px) { .personnel-layout { grid-template-columns: 260px minmax(0, 1fr); gap: 1rem; } }
@media (max-width: 760px) { .personnel-layout { display: block; } .personnel-controls { border-right: 0; padding-right: 0; border-bottom: 1px solid var(--line); padding-bottom: 1rem; margin-bottom: 1rem; } }
/* Phase 6A: monochrome geometry inside a bounded scrolling viewport. */
.map-toolbar { display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; margin:.75rem 0; min-width:0; }
.map-toolbar input,.map-toolbar select { width:auto; min-width:0; max-width:100%; flex:1 1 9rem; }
.map-toolbar button { width:auto; max-width:100%; white-space:normal; }
.map-toolbar p { flex-basis:100%; overflow-wrap:anywhere; }
.map-control { display:flex; align-items:center; gap:.4rem; min-width:0; max-width:100%; flex:0 1 23rem; }
.map-control label { flex:0 0 auto; margin:0; }
.map-control select { flex:1 1 8rem; width:0; }
.overview-layout { display:grid; grid-template-columns:minmax(0, 7fr) minmax(0, 3fr); gap:0; align-items:start; }
.overview-information,.overview-artwork { min-width:0; }
.overview-information { width:calc(100% * 5 / 7); margin-inline:auto; }
.overview-artwork img { display:block; width:100%; height:auto; object-fit:contain; margin-inline-start:auto; margin-inline-end:0; }
@media (max-width:760px) { .overview-layout { grid-template-columns:minmax(0, 1fr); gap:1.5rem; } .overview-information { width:100%; } .overview-artwork img { width:100%; } .map-control { flex:1 1 100%; } }
.map-viewport { width:100%; max-width:100%; height:65vh; min-height:260px; overflow:auto; border:1px solid #222; overscroll-behavior:contain; }
.map-board { position:relative; background-color:#fff; background-image:linear-gradient(to right,#ddd 1px,transparent 1px),linear-gradient(to bottom,#ddd 1px,transparent 1px); }
.map-board:focus { outline:3px solid #222; outline-offset:-3px; }
.map-room { position:absolute; margin:0; padding:2px; border:2px solid #222; border-radius:0; color:#111; background:#fff; overflow:hidden; overflow-wrap:anywhere; white-space:pre-line; font-size:11px; line-height:1.15; touch-action:none; min-width:0; cursor:grab; }

.map-room.map-conflict,.map-room.map-invalid { border:3px dashed #000; background:repeating-linear-gradient(135deg,#fff,#fff 5px,#ddd 5px,#ddd 7px); }
.map-room.map-valid { border:3px solid #000; opacity:.8; }
#mapWarnings,#mapStatus,#mapSelection { overflow-wrap:anywhere; }
/* Phase 6A.1: site-wide neutral palette, following the SagaBorn SRD's
   black navigation, white reading surface and system typography. */
input, select, textarea { accent-color: #333; }
.app-header { background: #171717; color: #fff; padding: 1.35rem 1.5rem; border-bottom: 4px solid #777; }
.app-header p { color: #ddd; }
h1 { font-weight: 650; letter-spacing: -.025em; }
.primary-panel > h2, .personnel-section > h2, .treasury-section > h2 { border-bottom: 1px solid #ccc; padding-bottom: .65rem; font-size: 1.3rem; }
.primary-tabs { background: #222; padding: .3rem; gap: .2rem; }
.primary-tabs button { border-color: #222; background: #222; color: #fff; padding: .65rem .5rem; }
.primary-tabs button[aria-selected="true"] { background: #fff; color: #111; border-color: #fff; font-weight: 700; }
button:hover:not(:disabled) { background: #111; color: #fff; }
.primary-tabs button:hover:not(:disabled) { outline: 1px solid #aaa; }
.primary-tabs button[aria-selected="true"]:hover { background: #fff; color: #111; }
option:checked { background: #ddd; color: #111; }
:is(button,input,select,textarea,summary,[tabindex]):focus-visible { outline: 3px solid #111; outline-offset: 3px; box-shadow: 0 0 0 3px #fff; }
.notice { border-left: 4px double #333; }
#saveStatus[data-status="Save failed"] { border-bottom: 2px dashed #111; }
.workplace-compatible { color: #222; }
.workplace-conditional { color: #333; border-left: 3px dashed #777; padding-left: .4rem; }
.workplace-incompatible { color: #111; border-left: 3px double #222; padding-left: .4rem; }
.map-frame { display: grid; grid-template-columns: 3.5rem minmax(0,1fr); grid-template-rows: 2rem minmax(0,1fr); min-width: 0; max-width: 100%; }
.map-ruler { position: relative; overflow: hidden; background: #eee; color: #111; font: 11px system-ui,sans-serif; user-select: none; }
.map-ruler-top { grid-column: 2; grid-row: 1; border: 1px solid #888; border-bottom: 0; position: sticky; top: var(--app-chrome-height, 0px); z-index: 3; }
.map-ruler-left { grid-column: 1; grid-row: 2; border: 1px solid #888; border-right: 0; }
.map-ruler-corner { grid-column: 1; grid-row: 1; display: grid; place-items: center; background: #ddd; color: #222; border: 1px solid #888; font-size: 11px; position: sticky; top: var(--app-chrome-height, 0px); z-index: 3; }
.map-frame .map-viewport { grid-column: 2; grid-row: 2; border-color: #888; }
.map-ruler-label { position: absolute; display: flex; align-items: center; justify-content: center; white-space: nowrap; }
.map-ruler-top .map-ruler-label { top: 0; height: 100%; border-left: 1px solid #ccc; }
.map-ruler-left .map-ruler-label { left: 0; width: 100%; border-top: 1px solid #ccc; }
@media (max-width: 400px) { .app-header { padding: 1rem; } .map-frame { grid-template-columns: 2.75rem minmax(0,1fr); } }
/* Phase 6A.2: local help and isolated practice-mode guidance. */
.header-menus { display:flex; gap:.35rem; align-items:center; margin-left:auto; }
.header-menu { position:fixed; z-index:40; width:280px; max-width:calc(100vw - 16px); max-height:60dvh; overflow:auto; padding:.35rem; background:#fff; border:2px solid #333; }
.header-menu button,.header-menu a { display:block; width:100%; text-align:left; margin:0!important; padding:.65rem; border:0; background:#fff; color:#222; text-decoration:none; font:inherit; font-size:.9rem; }
.header-menu a:hover,.header-menu button:hover { background:#eee; color:#111; }
.help-icon { display:inline-flex; align-items:center; justify-content:center; border-radius:50%; width:1.7rem!important; min-width:1.7rem; height:1.7rem; padding:0!important; font-size:.8rem; margin:0 .2rem; background:#fff; color:#222; border:1px solid #555; }
.help-open { margin-right:380px; }
#helpDrawer { position:fixed; right:0; top:0; bottom:0; width:360px; padding:1.2rem; overflow:auto; border-left:2px solid #555; background:#fafafa; z-index:20; overflow-wrap:anywhere; }
#helpDrawer article { border-top:1px solid #ccc; padding:.6rem 0; font-size:.9rem; }
#helpDrawer article:focus { outline:2px solid #222; outline-offset:2px; }
#helpDrawer .dialog-heading { align-items:flex-start; }
#tutorialPanel { float:left; position:sticky; top:calc(var(--app-chrome-height, 0px) + .5rem); width:270px; max-height:calc(100dvh - var(--app-chrome-height, 0px) - 1rem); overflow:auto; margin-top:1.25rem; font-size:.88rem; }
#tutorialPanel details { border:0; padding:0; margin:0; }
#tutorialPanel summary { font-size:1rem; }
#tutorialPanel button { max-width:100%; margin:.2rem 0; white-space:normal; }
.tutorial-actions { display:flex; gap:.4rem; flex-wrap:wrap; margin-top:.6rem; }
.tutorial-active #designerWorkspace { margin-left:290px; }
.tutorial-active .flex-row,.help-open .flex-row { flex-direction:column; }
.tutorial-active .controls,.help-open .controls { width:100%; flex-basis:auto; }
.tutorial-active .personnel-layout,.help-open .personnel-layout { display:block; }
.tutorial-highlight { outline:3px dashed #333!important; outline-offset:4px; }
@media (max-width:980px) {
  #tutorialPanel { float:none; width:100%; max-height:38dvh; z-index:8; }
  .tutorial-active #designerWorkspace { margin-left:0; }
}
@media (max-width:760px) {
  .help-open { margin-right:.5rem; }
  #helpDrawer { position:relative; inset:auto; width:100%; max-height:70dvh; border:2px solid #555; margin-top:1rem; }
  .header-menu button,.header-menu a { padding:.75rem; }
}
@media (max-width:400px) {
  #appChrome .saving-toolbar { padding:.45rem; gap:.3rem; }
  #appChrome .saving-toolbar strong { flex-basis:100%; font-size:.9rem; }
  #appChrome .saving-toolbar button:not([role="menuitem"]) { font-size:.75rem; padding:.35rem .45rem; }
  #appChrome .primary-tabs button { font-size:.75rem; padding:.45rem .3rem; }
  .header-menus { gap:.25rem; }
}
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; animation:none!important; transition:none!important; } }
#recordRoot .tutorial-highlight { outline:none!important; }
@media print { .tutorial-active #designerWorkspace { margin-left:0!important; } .help-open { margin-right:auto!important; } .tutorial-highlight { outline:none!important; } }

#roomCustomName, #roomNotes { width: 100%; min-width: 0; max-width: 100%; box-sizing: border-box; }
.room-title, .room-detail, .record-room { overflow-wrap: anywhere; }
.room-notes { white-space: pre-wrap; overflow-wrap: anywhere; }

.map-tools { display:flex; flex-wrap:wrap; gap:.35rem; margin:.5rem 0; }
.map-tools [aria-pressed="true"] { background:#111; color:white; outline:2px solid #555; }
.map-opening { position:absolute; z-index:7; padding:0; border:0; background:white; overflow:visible; pointer-events:none; }
.map-opening svg {display:block; overflow:visible;width:100%;height:100%;}
.map-stair {position:absolute;z-index:5;background:white;color:black;border:1px solid black;padding:0;font-size:10px;line-height:1;touch-action:none;}
.map-wall-preview {outline:3px dashed #555;}

.map-tools[hidden] { display:none; }
.map-tools label { min-width:0; max-width:100%; }
.map-tools select,.map-tools input { max-width:100%; min-width:0; }



.map-stair svg { display:block; width:100%; height:60%; }
.map-stair span { display:block; font-size:8px; }

.map-stair.map-invalid { outline:2px dashed #000; opacity:.6; }
.map-stair.map-valid { outline:1px solid #000; }

/* One tile per five-foot square, aligned to the room's border box. */
.map-room { background-image:url("../assets/map-grid.svg"); background-origin:border-box; background-position:0 0; }
.map-room-label { position:relative; background:#fff; box-decoration-break:clone; -webkit-box-decoration-break:clone; }
.map-wall-outline { position:absolute; z-index:6; box-sizing:border-box; border:2px solid #222; background:transparent; pointer-events:none; }
.map-door-symbol { box-sizing:border-box; border:1px solid #000; background:#fff; }
.map-selected-room { font-weight:bold; overflow-wrap:anywhere; }
.map-room.map-selected { outline:none; }
/* Brackets are editor-only selection markers, separate from physical walls. */
.map-selection-marker { position:absolute; z-index:8; pointer-events:none; background:linear-gradient(#000,#000) left top/10px 3px no-repeat,linear-gradient(#000,#000) left top/3px 10px no-repeat,linear-gradient(#000,#000) right top/10px 3px no-repeat,linear-gradient(#000,#000) right top/3px 10px no-repeat,linear-gradient(#000,#000) left bottom/10px 3px no-repeat,linear-gradient(#000,#000) left bottom/3px 10px no-repeat,linear-gradient(#000,#000) right bottom/10px 3px no-repeat,linear-gradient(#000,#000) right bottom/3px 10px no-repeat; }
.map-wall-preview { z-index:9; }

.map-room:hover:not(:disabled) { background-color:#fff; color:#111; background-image:url("../assets/map-grid.svg"); background-origin:border-box; background-position:0 0; }
.map-stair:hover:not(:disabled) { background:#fff; color:#000; }

.map-workspace { display:grid; grid-template-columns:minmax(0,1fr) 180px; align-items:start; gap:.75rem; min-width:0; }
.map-floor-panel { display:flex; flex-direction:column; gap:.65rem; padding:.6rem; border:1px solid #bbb; background:#f4f4f4; min-width:0; }
.map-floor-current { display:flex; flex-direction:column; align-items:stretch; gap:.4rem; min-width:0; }
.map-floor-current label { font-size:.7rem; margin:0; }
.map-floor-current select { width:100%; min-width:0; max-width:100%; font-weight:700; }
.map-floor-classification { font-size:.75rem; color:#444; }
.map-floor-actions,.map-floor-reorder { display:flex; flex-direction:column; align-items:stretch; gap:.35rem; min-width:0; }
.map-floor-actions { margin:0; }
.map-floor-actions button { width:100%; min-height:36px; padding:.4rem .45rem; white-space:normal; }
.map-floor-actions details { max-width:100%; border:0; padding:0; margin:0; }
.map-floor-actions summary { cursor:pointer; border:1px solid #888; background:#fff; padding:.4rem; font-size:.85rem; }
.map-floor-reorder { padding-top:.4rem; }
.map-tools button[aria-pressed="false"] { background:#f3f3f3; color:#111; border:1px solid #aaa; }
.map-tools button[aria-pressed="true"] { background:#111; color:#fff; font-weight:700; box-shadow:inset 0 -3px #fff; outline:2px solid #111; }
.map-tools button[aria-pressed]:focus-visible { outline:3px double #111; outline-offset:3px; }
.map-tool-instruction { font-size:.85rem; margin:.35rem 0 .6rem; }
.build-floor-group th { background:#dedede; border-top:2px solid #555; font-size:.95rem; text-align:left; overflow-wrap:anywhere; }
@media (max-width:760px) {
  .map-workspace { grid-template-columns:minmax(0,1fr); }
  .map-floor-panel { padding:.6rem; }
  .map-floor-actions,.map-floor-reorder { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
  .map-floor-actions details { grid-column:1 / -1; }
  .map-floor-actions button,.map-floor-actions summary { min-height:40px; }
}