/* Build Catalogue & Planner — /build-catalogue
   Shares the Build Calculator's parchment-and-leather look so the two pages
   read as pages of one book. Dark mode uses the same body class and the same
   localStorage key, so the visitor's choice carries between them. */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  min-height: 100vh;
  background: #2a2218;
  color: #3e2e1e;
  font-family: 'Crimson Text', Georgia, serif;
  line-height: 1.6;
  transition: background .4s ease;
}

.parchment-bg {
  background:
    repeating-linear-gradient(0deg, transparent, transparent 28px,
      rgba(139,115,75,.03) 28px, rgba(139,115,75,.03) 29px),
    radial-gradient(ellipse at 15% 10%, rgba(180,140,80,.12) 0%, transparent 50%),
    radial-gradient(ellipse at 85% 90%, rgba(160,120,60,.1) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 50%, rgba(200,170,110,.06) 0%, transparent 70%),
    linear-gradient(180deg, #f5ecd4 0%, #efe2c4 30%, #e8d8b4 70%, #e0d0a8 100%);
  transition: background .4s ease, color .4s ease;
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: rgba(60,45,25,.15); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #b89860, #8a6e3e);
  border-radius: 5px; border: 2px solid rgba(245,236,212,.5);
}

/* ── Binding ─────────────────────────────────────────────── */
.book-wrapper { display: flex; min-height: 100vh; }
.book-spine {
  width: 36px; min-width: 36px; position: relative;
  background: linear-gradient(90deg, #1e160e 0%, #3a2a18 30%, #4a3820 60%, #3a2a18 85%, #2a1e12 100%);
  box-shadow: inset -4px 0 12px rgba(0,0,0,.4), 2px 0 8px rgba(0,0,0,.3);
}
.book-spine::after {
  content: ''; position: absolute; top: 0; bottom: 0; right: 0; width: 3px;
  background: linear-gradient(180deg, rgba(180,140,80,.4), rgba(180,140,80,.15) 20%, rgba(180,140,80,.15) 80%, rgba(180,140,80,.4));
}
.book-body { flex: 1; display: flex; flex-direction: column; min-width: 0; }

/* ── Header ──────────────────────────────────────────────── */
.header { padding: 32px 36px 0; border-bottom: 2px solid #c4a46a; position: relative; }
.header::after {
  content: ''; position: absolute; bottom: -5px; left: 36px; right: 36px;
  height: 1px; background: rgba(160,120,60,.3);
}
.header-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.header h1 {
  font-family: 'Cinzel Decorative', 'Cinzel', serif; font-size: 2.1rem; color: #5a3e1c;
  text-shadow: 1px 1px 0 rgba(255,248,220,.6), 2px 2px 3px rgba(90,62,28,.2); letter-spacing: .02em;
}
.header .subtitle { font-style: italic; color: #8a6e46; font-size: 1.02rem; margin: 2px 0 14px; }
.breadcrumb { font-size: .85rem; color: #9a7e52; margin-bottom: 6px; font-family: 'Cinzel', serif; }
.breadcrumb a { color: #7a5c30; text-decoration: none; }
.breadcrumb a:hover { color: #5a3e1c; text-decoration: underline; }
.breadcrumb .sep { margin: 0 6px; color: #b89860; }
.breadcrumb .current { color: #5a3e1c; font-weight: 600; }

.header-actions { display: flex; align-items: center; gap: 10px; }
.corner-nav { display: flex; gap: 8px; flex-wrap: wrap; }
.corner-nav a {
  font-family: 'Cinzel', serif; font-size: .8rem; color: #6a4e28; text-decoration: none;
  padding: 5px 12px; border: 1px solid rgba(140,110,60,.4); border-radius: 4px;
  background: rgba(245,236,212,.4); white-space: nowrap;
}
.corner-nav a:hover { background: rgba(220,200,160,.6); color: #3e2a12; }
.dark-mode-toggle {
  width: 34px; height: 34px; border: 1px solid rgba(140,110,60,.4); border-radius: 50%;
  background: rgba(245,236,212,.4); cursor: pointer; font-size: 1rem; line-height: 1; color: #6a4e28;
}
.dark-mode-toggle:hover { background: rgba(220,200,160,.6); }

/* ── Step tabs ───────────────────────────────────────────── */
.step-tabs { display: flex; gap: 4px; margin-top: 4px; flex-wrap: wrap; }
.step-tab {
  font-family: 'Cinzel', serif; font-size: .85rem; padding: 9px 18px; cursor: pointer;
  border: 1px solid rgba(140,110,60,.4); border-bottom: none;
  border-radius: 6px 6px 0 0; background: rgba(230,214,178,.45); color: #7a5c30;
  position: relative; top: 1px;
}
.step-tab:hover { background: rgba(240,228,196,.75); }
.step-tab.active {
  background: linear-gradient(180deg, #f7efd8, #f1e6c8); color: #4a3210;
  border-color: #c4a46a; font-weight: 600;
}

/* ── Toolbar ─────────────────────────────────────────────── */
.toolbar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 12px 36px; border-bottom: 1px solid rgba(160,120,60,.35);
}
.build-name {
  flex: 1; min-width: 220px; font-family: 'Cinzel', serif; font-size: .95rem; color: #4a3210;
  padding: 8px 12px; border: 1px solid rgba(140,110,60,.45); border-radius: 5px;
  background: rgba(255,250,235,.6);
}
.build-name:focus { outline: none; border-color: #a8843e; background: rgba(255,252,242,.9); }
.toolbar-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.tool-btn {
  font-family: 'Cinzel', serif; font-size: .8rem; padding: 7px 14px; cursor: pointer;
  border: 1px solid rgba(140,110,60,.55); border-radius: 5px; color: #5a3e1c;
  background: linear-gradient(180deg, rgba(250,242,220,.95), rgba(232,216,180,.95));
}
.tool-btn:hover { background: linear-gradient(180deg, #fff8e4, #e8d8b4); }
.tool-btn.danger { color: #8a3010; border-color: rgba(150,60,30,.45); }

/* ── Frame ───────────────────────────────────────────────── */
.main { flex: 1; display: flex; align-items: flex-start; gap: 0; min-height: 0; }
.workbench { flex: 1; padding: 22px 36px 60px; min-width: 0; }
.side-sheet {
  width: 340px; min-width: 340px; align-self: stretch; padding: 22px 22px 60px;
  border-left: 2px solid rgba(160,120,60,.4);
  position: sticky; top: 0; max-height: 100vh; overflow-y: auto;
}
@media (max-width: 1080px) {
  .main { flex-direction: column; }
  .side-sheet { width: 100%; min-width: 0; border-left: none; border-top: 2px solid rgba(160,120,60,.4); position: static; max-height: none; }
  .header, .toolbar { padding-left: 18px; padding-right: 18px; }
  .workbench { padding: 18px 18px 40px; }
}

.loading { padding: 60px 0; text-align: center; color: #8a6e46; font-style: italic; }
.loading-spinner {
  display: inline-block; width: 14px; height: 14px; margin-right: 8px; vertical-align: -2px;
  border: 2px solid rgba(140,110,60,.35); border-top-color: #8a6e3e; border-radius: 50%;
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Shared blocks ───────────────────────────────────────── */
.panel { margin-bottom: 24px; }
.panel > h2, .sec-title {
  font-family: 'Cinzel', serif; font-size: 1.15rem; color: #5a3e1c; margin-bottom: 4px;
  border-bottom: 1px solid rgba(160,120,60,.35); padding-bottom: 5px;
}
.sec-note { font-size: .92rem; color: #7a6142; font-style: italic; margin: 6px 0 14px; }
.hint { font-size: .86rem; color: #866c48; }
.prose p { margin-bottom: 12px; }
.prose ul { margin: 0 0 12px 22px; }
.prose li { margin-bottom: 5px; }
.prose code {
  font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .85em;
  background: rgba(160,120,60,.14); padding: 1px 5px; border-radius: 3px;
}
.callout {
  border-left: 3px solid #b08a3e; background: rgba(200,170,110,.16);
  padding: 10px 14px; border-radius: 0 5px 5px 0; margin-bottom: 14px; font-size: .95rem;
}
.callout.warn { border-left-color: #b5651d; background: rgba(200,120,40,.15); }
.callout.danger { border-left-color: #9c3520; background: rgba(170,60,35,.14); }

/* ── Resource chips ──────────────────────────────────────── */
.res { display: inline-flex; align-items: baseline; gap: 4px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.res b { font-weight: 700; }
.res .u { font-size: .78em; opacity: .75; }
.lumber  { color: #7a5423; }
.granite { color: #5c5c52; }
.lead    { color: #4a5a70; }
.eminence{ color: #8a5a9a; }
.bp      { color: #3f6446; }

/* ── Catalogue ───────────────────────────────────────────── */
.cat-controls { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 16px; }
.cat-search {
  flex: 1; min-width: 200px; padding: 8px 12px; font-family: 'Crimson Text', Georgia, serif; font-size: .98rem;
  border: 1px solid rgba(140,110,60,.45); border-radius: 5px; background: rgba(255,250,235,.6); color: #3e2e1e;
}
.cat-search:focus { outline: none; border-color: #a8843e; }
.chipbar { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 18px; }
.chip {
  font-family: 'Cinzel', serif; font-size: .78rem; padding: 5px 12px; cursor: pointer;
  border: 1px solid rgba(140,110,60,.45); border-radius: 14px; color: #6a4e28; background: rgba(245,236,212,.5);
}
.chip:hover { background: rgba(224,206,164,.75); }
.chip.active { background: linear-gradient(180deg, #6a4e28, #513a1c); color: #f3e6c4; border-color: #4a3210; }
.chip .n { opacity: .6; font-size: .9em; margin-left: 4px; }

.cat-group { margin-bottom: 26px; }
.cat-group h3 {
  font-family: 'Cinzel', serif; font-size: 1rem; color: #6a4e28; margin-bottom: 8px;
  letter-spacing: .02em; text-transform: uppercase;
}
table.cat-table { width: 100%; border-collapse: collapse; font-size: .94rem; }
table.cat-table th {
  font-family: 'Cinzel', serif; font-size: .74rem; text-transform: uppercase; letter-spacing: .04em;
  color: #866c48; text-align: right; padding: 4px 8px; border-bottom: 1px solid rgba(160,120,60,.4);
}
table.cat-table th:first-child { text-align: left; }
table.cat-table td { padding: 7px 8px; border-bottom: 1px solid rgba(160,120,60,.16); text-align: right; vertical-align: top; }
table.cat-table td:first-child { text-align: left; }
table.cat-table tr:hover td { background: rgba(200,170,110,.12); }
.cat-name { font-weight: 600; color: #4a3210; }
.cat-details { display: block; font-size: .84rem; color: #83694a; font-style: italic; margin-top: 2px; max-width: 46ch; }
.add-btn {
  font-family: 'Cinzel', serif; font-size: .72rem; padding: 3px 10px; cursor: pointer; white-space: nowrap;
  border: 1px solid rgba(140,110,60,.5); border-radius: 4px; color: #5a3e1c; background: rgba(250,242,220,.8);
}
.add-btn:hover { background: #fff8e4; }
.add-btn.in { background: linear-gradient(180deg, #6a4e28, #513a1c); color: #f3e6c4; border-color: #4a3210; }
.empty { padding: 30px 0; text-align: center; color: #8a6e46; font-style: italic; }

/* ── Pictures ────────────────────────────────────────────── */
.cat-thumb {
  float: left; margin: 2px 10px 4px 0; padding: 0; position: relative; cursor: zoom-in;
  width: 54px; height: 40px; border: 1px solid rgba(140,110,60,.5); border-radius: 4px;
  overflow: hidden; background: rgba(160,130,80,.12);
}
.cat-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cat-thumb:hover { border-color: #a8843e; box-shadow: 0 0 0 2px rgba(168,132,62,.25); }
.cat-thumb-n {
  position: absolute; right: 2px; bottom: 2px; min-width: 15px; padding: 0 3px;
  border-radius: 7px; background: rgba(40,28,12,.82); color: #f3e6c4;
  font-family: 'Cinzel', serif; font-size: .6rem; line-height: 14px; text-align: center;
}
/* Smaller scales for the planner's item table and the totals sheet, where the
   thumbnail sits inline with the name rather than beside a block of detail. */
.cat-thumb.sm { width: 40px; height: 30px; margin: 0 8px 0 0; float: none; vertical-align: -9px; }
.cat-thumb.xs { width: 26px; height: 20px; margin: 0 6px 0 0; float: none; vertical-align: -5px; }
.cat-thumb.sm .cat-thumb-n { min-width: 13px; font-size: .55rem; line-height: 12px; }
.cat-thumb-gap { display: inline-block; flex: none; }
.cat-thumb-gap.sm { width: 40px; margin-right: 8px; }
.cat-thumb-gap.xs { width: 26px; margin-right: 6px; }
td.plan-item { white-space: normal; }
.line-list .li .nm { display: flex; align-items: center; min-width: 0; }

/* display:flex would beat the `hidden` attribute's own display:none, leaving
   an invisible full-screen overlay swallowing every click on the page. Hidden
   wins explicitly. */
.pics-overlay[hidden] { display: none !important; }
.pics-overlay {
  position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center;
  padding: 24px; background: rgba(20,14,6,.78); backdrop-filter: blur(2px);
}
.pics-box {
  max-width: min(900px, 100%); max-height: 100%; display: flex; flex-direction: column;
  border: 1px solid #a8843e; border-radius: 8px; box-shadow: 0 10px 40px rgba(0,0,0,.5); overflow: hidden;
}
.pics-head {
  display: flex; align-items: center; gap: 12px; padding: 11px 14px;
  border-bottom: 1px solid rgba(160,120,60,.4);
}
.pics-title { font-family: 'Cinzel', serif; font-size: 1.05rem; font-weight: 600; color: #4a3210; flex: 1; }
.pics-close {
  border: 1px solid rgba(140,110,60,.5); border-radius: 4px; background: rgba(250,242,220,.7);
  color: #5a3e1c; width: 28px; height: 28px; font-size: 1.2rem; line-height: 1; cursor: pointer;
}
.pics-close:hover { background: #fff8e4; }
.pics-stage { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 10px; }
.pics-stage img { max-width: 100%; max-height: 62vh; border-radius: 4px; display: block; }
.pics-strip { display: flex; gap: 6px; flex-wrap: wrap; padding: 0 14px 10px; }
.pics-thumb {
  width: 62px; height: 44px; padding: 0; cursor: pointer; overflow: hidden;
  border: 1px solid rgba(140,110,60,.45); border-radius: 4px; background: none;
}
.pics-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pics-thumb.on { border-color: #a8843e; box-shadow: 0 0 0 2px rgba(168,132,62,.35); }
.pics-foot {
  display: flex; flex-direction: column; gap: 4px; padding: 10px 14px 13px;
  border-top: 1px solid rgba(160,120,60,.3); font-size: .9rem;
}
.pics-details { color: #7a6142; font-style: italic; }

/* ── Planner ─────────────────────────────────────────────── */
.floor-card {
  border: 1px solid rgba(140,110,60,.4); border-radius: 7px; margin-bottom: 14px;
  background: rgba(255,250,235,.42); overflow: hidden;
}
.floor-head {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 9px 14px; background: rgba(200,170,110,.2); border-bottom: 1px solid rgba(160,120,60,.3);
}
.floor-title { font-family: 'Cinzel', serif; font-size: .95rem; color: #4a3210; font-weight: 600; }
.floor-mult {
  font-family: 'Cinzel', serif; font-size: .74rem; padding: 2px 8px; border-radius: 10px;
  background: rgba(106,78,40,.16); color: #6a4e28; white-space: nowrap;
}
.floor-mult.deep { background: rgba(120,60,40,.18); color: #8a4020; }
.floor-body { padding: 12px 14px; }
.floor-spacer { flex: 1; }
.mini-btn {
  font-family: 'Cinzel', serif; font-size: .72rem; padding: 3px 9px; cursor: pointer;
  border: 1px solid rgba(140,110,60,.5); border-radius: 4px; color: #5a3e1c; background: rgba(250,242,220,.8);
}
.mini-btn:hover { background: #fff8e4; }
.mini-btn.danger { color: #8a3010; border-color: rgba(150,60,30,.4); }
.mini-btn.on { background: linear-gradient(180deg, #6a4e28, #513a1c); color: #f3e6c4; border-color: #4a3210; }

.field-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 10px; }
.field { display: flex; flex-direction: column; gap: 3px; }
.field label { font-family: 'Cinzel', serif; font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; color: #866c48; }
.field input, .field select {
  padding: 5px 8px; font-family: 'Crimson Text', Georgia, serif; font-size: .93rem; color: #3e2e1e;
  border: 1px solid rgba(140,110,60,.45); border-radius: 4px; background: rgba(255,252,242,.75);
}
.field input:focus, .field select:focus { outline: none; border-color: #a8843e; }
.field input[type=number] { width: 86px; }
.field.grow { flex: 1; min-width: 150px; }
.field.grow input { width: 100%; }

table.room-table { width: 100%; border-collapse: collapse; font-size: .92rem; margin-bottom: 8px; }
table.room-table th {
  font-family: 'Cinzel', serif; font-size: .7rem; text-transform: uppercase; color: #866c48;
  text-align: right; padding: 3px 6px; border-bottom: 1px solid rgba(160,120,60,.35);
}
table.room-table th:first-child { text-align: left; }
table.room-table td { padding: 4px 6px; text-align: right; border-bottom: 1px solid rgba(160,120,60,.14); }
table.room-table td:first-child { text-align: left; }

/* ── Grid painter ────────────────────────────────────────── */
.grid-wrap { overflow: auto; max-width: 100%; padding-bottom: 6px; }
.grid {
  display: grid; gap: 0; width: max-content;
  border: 1px solid rgba(120,95,55,.5); background: rgba(255,252,242,.5);
  user-select: none; touch-action: none;
}
.gc {
  width: 22px; height: 22px; border-right: 1px solid rgba(160,130,80,.22); border-bottom: 1px solid rgba(160,130,80,.22);
  cursor: crosshair; background: transparent;
}
.gc.major { border-right-color: rgba(120,95,55,.55); }
.gc.majorRow { border-bottom-color: rgba(120,95,55,.55); }
.gc.on { background: linear-gradient(160deg, #b8945a, #96763f); }
.gc.on.deep { background: linear-gradient(160deg, #8a6a86, #6b4f6a); }
/* Painted, but thinner than 10m somewhere — cannot be built as drawn. */
.gc.on.thin {
  background: repeating-linear-gradient(45deg, #c46a3a 0 5px, #a4512a 5px 10px);
  box-shadow: inset 0 0 0 1px rgba(120,40,15,.6);
}
/* Space the player says is already standing: theirs, free, and erasable —
   distinguished from the preset's hatching by being a flat, cooler fill. */
.gc.have { background: rgba(96,120,132,.55); cursor: crosshair; }
/* The preset's own footprint: present, paid for, and not editable. */
.gc.base {
  background: repeating-linear-gradient(45deg, rgba(120,95,55,.34) 0 4px, rgba(120,95,55,.18) 4px 8px);
  cursor: not-allowed;
}
.grid-legend { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; font-size: .84rem; color: #7a6142; margin-top: 8px; }
.grid-legend .swatch {
  display: inline-block; width: 13px; height: 13px; margin-right: 5px; vertical-align: -2px;
  border: 1px solid rgba(120,95,55,.5); border-radius: 2px;
}
.grid-legend .swatch.base { background: repeating-linear-gradient(45deg, rgba(120,95,55,.34) 0 4px, rgba(120,95,55,.18) 4px 8px); }
.grid-legend .swatch.on { background: linear-gradient(160deg, #b8945a, #96763f); }
.grid-legend .swatch.have, .brush .swatch.have { background: rgba(96,120,132,.75); }
.brush { align-items: center; }
.brush-label {
  font-family: 'Cinzel', serif; font-size: .7rem; text-transform: uppercase;
  letter-spacing: .04em; color: #866c48; margin-right: 2px;
}
.brush .swatch {
  display: inline-block; width: 11px; height: 11px; margin-right: 5px; vertical-align: -1px;
  border: 1px solid rgba(120,95,55,.5); border-radius: 2px;
}
.brush .swatch.on { background: linear-gradient(160deg, #b8945a, #96763f); }
tr.room-have td { opacity: .72; }
tr.room-have input[type=number], tr.room-have input[type=text] { opacity: .85; }

/* "Already included" — what the catalogue price already bought you. */
.incl-block {
  border: 1px dashed rgba(140,110,60,.5); border-radius: 6px;
  background: rgba(200,170,110,.12); padding: 9px 12px; margin-bottom: 12px;
}
.incl-head {
  font-family: 'Cinzel', serif; font-size: .72rem; text-transform: uppercase; letter-spacing: .05em;
  color: #7a5c30; margin-bottom: 4px;
}
table.incl-table { margin-bottom: 0; }
table.incl-table td, table.incl-table th { border-bottom-color: rgba(160,120,60,.14); }
.floor-mult.incl { background: rgba(120,95,55,.14); color: #7a5c30; font-style: italic; }
.grid-tools { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-bottom: 8px; }

/* ── Option cards (Adjustments) ──────────────────────────── */
.opt-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; }
.opt-card {
  display: flex; gap: 11px; align-items: flex-start; cursor: pointer;
  padding: 13px 15px; border: 1px solid rgba(140,110,60,.42); border-radius: 7px;
  background: rgba(255,250,235,.42); transition: border-color .15s ease, background .15s ease;
}
.opt-card:hover { background: rgba(255,252,242,.75); border-color: rgba(140,110,60,.7); }
.opt-card input { margin-top: 4px; flex: none; width: 15px; height: 15px; cursor: pointer; }
.opt-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.opt-title { font-family: 'Cinzel', serif; font-size: .95rem; font-weight: 600; color: #4a3210; }
.opt-desc { font-size: .88rem; line-height: 1.45; color: #7a6142; }
.opt-card.on { border-color: #a8843e; background: rgba(200,170,110,.24); box-shadow: inset 0 0 0 1px rgba(168,132,62,.35); }
.opt-card.restricted { border-left: 3px solid #b5651d; }
.opt-card.restricted.on { border-left-color: #9c3520; background: rgba(190,110,50,.2); box-shadow: inset 0 0 0 1px rgba(156,53,32,.35); }
.opt-flag {
  font-family: 'Cinzel', serif; font-size: .62rem; letter-spacing: .08em; text-transform: uppercase;
  vertical-align: 2px; margin-left: 7px; padding: 2px 7px; border-radius: 9px;
  background: rgba(181,101,29,.2); color: #8a4415; border: 1px solid rgba(181,101,29,.45);
}

/* ── Filing a build request ──────────────────────────────── */
.filing-as { font-size: 1rem; margin-bottom: 12px; color: #5a4630; }
.filing-as b { color: #4a3210; font-family: 'Cinzel', serif; }
.opt-card.owner input { margin-top: 3px; }
.opt-card.off { opacity: .5; cursor: not-allowed; }
.opt-card.off:hover { background: rgba(255,250,235,.42); border-color: rgba(140,110,60,.42); }
.owner-select {
  margin-top: 4px; padding: 4px 8px; max-width: 100%;
  font-family: 'Crimson Text', Georgia, serif; font-size: .9rem; color: #3e2e1e;
  border: 1px solid rgba(140,110,60,.45); border-radius: 4px; background: rgba(255,252,242,.85);
}
.file-notes {
  width: 100%; min-height: 120px; resize: vertical; padding: 8px 10px;
  font-family: 'Crimson Text', Georgia, serif; font-size: .95rem; line-height: 1.5; color: #3e2e1e;
  border: 1px solid rgba(140,110,60,.45); border-radius: 5px; background: rgba(255,252,242,.75);
}
.file-notes:focus { outline: none; border-color: #a8843e; }
.tool-btn.submit-br {
  font-size: .88rem; padding: 9px 22px;
  background: linear-gradient(180deg, #6a4e28, #513a1c); color: #f3e6c4; border-color: #4a3210;
}
.tool-btn.submit-br:hover:not(:disabled) { background: linear-gradient(180deg, #7a5c32, #5f4522); }
.tool-btn.submit-br:disabled { opacity: .45; cursor: not-allowed; }

.filed-box {
  max-width: 640px; border: 1px solid rgba(122,154,106,.65); border-left: 3px solid #4f7a46;
  border-radius: 7px; background: rgba(120,170,110,.12); padding: 16px 18px;
}
.filed-head {
  display: flex; align-items: center; gap: 8px;
  font-family: 'Cinzel', serif; font-size: 1.05rem; font-weight: 600; color: #3f6446; margin-bottom: 6px;
}
.filed-check {
  display: inline-flex; align-items: center; justify-content: center; width: 21px; height: 21px;
  border-radius: 50%; background: #4f7a46; color: #f2f7ef; font-size: .74rem; flex: none;
}
.filed-lead { font-size: .96rem; margin-bottom: 14px; }
.filed-linkbox {
  border: 1px solid rgba(140,110,60,.4); border-radius: 6px;
  background: rgba(255,252,242,.55); padding: 11px 13px; margin-bottom: 14px;
}
.filed-linklabel {
  font-family: 'Cinzel', serif; font-size: .68rem; text-transform: uppercase; letter-spacing: .06em;
  color: #7a5c30; margin-bottom: 6px;
}
.filed-linkrow { display: flex; gap: 8px; align-items: stretch; flex-wrap: wrap; }
.filed-linkinput {
  flex: 1; min-width: 220px; padding: 7px 10px; border-radius: 4px;
  border: 1px solid rgba(140,110,60,.45); background: rgba(255,255,255,.6); color: #4a3210;
  font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .82rem;
}
.filed-linkinput:focus { outline: none; border-color: #a8843e; }
.filed-note { font-size: .84rem; color: #7a6142; margin: 8px 0 0; line-height: 1.45; }
.filed-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.filed-actions .mini-btn { text-decoration: none; display: inline-flex; align-items: center; padding: 6px 14px; }
.filed-banner {
  border: 1px solid rgba(140,110,60,.45); border-left: 3px solid #a8843e; border-radius: 0 6px 6px 0;
  background: rgba(200,170,110,.18); padding: 10px 14px; margin-bottom: 20px; font-size: .95rem;
}
.filed-banner-actions {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(160,120,60,.3);
}
.filed-banner-actions .hint { flex: 1; min-width: 220px; }
.filed-tag {
  font-family: 'Cinzel', serif; font-size: .7rem; text-transform: uppercase; letter-spacing: .06em;
  padding: 2px 8px; border-radius: 10px; background: rgba(106,78,40,.2); color: #5a3e1c; margin-right: 6px;
}

/* ── Totals sheet ────────────────────────────────────────── */
.total-block { margin-bottom: 20px; }
.total-block h3 {
  font-family: 'Cinzel', serif; font-size: .95rem; color: #5a3e1c;
  border-bottom: 1px solid rgba(160,120,60,.35); padding-bottom: 4px; margin-bottom: 8px;
}
.total-row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 3px 0; font-size: .96rem; }
.total-row .k { color: #7a6142; }
.total-row.grand { border-top: 1px solid rgba(160,120,60,.4); margin-top: 6px; padding-top: 7px; font-size: 1.06rem; font-weight: 700; }
.line-list { font-size: .88rem; }
.line-list .li { display: flex; justify-content: space-between; gap: 8px; padding: 3px 0; border-bottom: 1px dotted rgba(160,120,60,.28); }
.line-list .li .nm { color: #5a4630; }
.line-list .li .vl { color: #7a6142; white-space: nowrap; font-variant-numeric: tabular-nums; }
.qty-btn {
  border: 1px solid rgba(140,110,60,.5); background: rgba(250,242,220,.8); color: #5a3e1c;
  width: 18px; height: 18px; line-height: 1; border-radius: 3px; cursor: pointer; font-size: .8rem;
}
.qty-btn:hover { background: #fff8e4; }

.share-toast {
  position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%) translateY(20px);
  background: #4a3210; color: #f3e6c4; font-family: 'Cinzel', serif; font-size: .85rem;
  padding: 9px 20px; border-radius: 5px; opacity: 0; pointer-events: none; transition: all .25s ease; z-index: 50;
}
.share-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ── Dark mode ───────────────────────────────────────────── */
body.dark-mode { background: #0f0b07; color: #c8b890; }
body.dark-mode .parchment-bg {
  background:
    repeating-linear-gradient(0deg, transparent, transparent 28px, rgba(90,72,44,.05) 28px, rgba(90,72,44,.05) 29px),
    radial-gradient(ellipse at 15% 10%, rgba(90,70,40,.18) 0%, transparent 50%),
    radial-gradient(ellipse at 85% 90%, rgba(70,55,30,.16) 0%, transparent 50%),
    linear-gradient(180deg, #1c1610 0%, #191309 40%, #150f08 100%);
}
body.dark-mode .book-spine { background: linear-gradient(90deg, #0a0704 0%, #1e160c 40%, #241c10 60%, #14100a 100%); }
body.dark-mode .header { border-bottom-color: #6a5230; }
body.dark-mode .header::after { background: rgba(80,60,30,.3); }
body.dark-mode .header h1 { color: #e0c888; text-shadow: none; }
body.dark-mode .header .subtitle { color: #8a7858; }
body.dark-mode .breadcrumb { color: #7a6a4a; }
body.dark-mode .breadcrumb a { color: #a08858; }
body.dark-mode .breadcrumb a:hover, body.dark-mode .breadcrumb .current { color: #e0c888; }
body.dark-mode .corner-nav a { color: #b09868; border-color: rgba(120,95,55,.5); background: rgba(40,30,18,.5); }
body.dark-mode .corner-nav a:hover { background: rgba(60,45,25,.7); color: #e0c888; }
body.dark-mode .dark-mode-toggle { color: #b09868; border-color: rgba(120,95,55,.5); background: rgba(40,30,18,.5); }
body.dark-mode .step-tab { background: rgba(30,22,12,.6); color: #907c54; border-color: rgba(110,85,50,.4); }
body.dark-mode .step-tab:hover { background: rgba(45,34,18,.8); }
body.dark-mode .step-tab.active { background: linear-gradient(180deg, #2c2212, #241c10); color: #e0c888; border-color: #6a5230; }
body.dark-mode .toolbar { border-bottom-color: rgba(80,60,30,.4); }
body.dark-mode .build-name { background: rgba(30,22,12,.7); color: #e0c888; border-color: rgba(120,95,55,.5); }
body.dark-mode .tool-btn, body.dark-mode .mini-btn, body.dark-mode .add-btn, body.dark-mode .chip, body.dark-mode .qty-btn {
  background: linear-gradient(180deg, rgba(50,38,20,.9), rgba(38,28,15,.9)); color: #c8ac70; border-color: rgba(120,95,55,.55);
}
body.dark-mode .tool-btn:hover, body.dark-mode .mini-btn:hover, body.dark-mode .add-btn:hover,
body.dark-mode .chip:hover, body.dark-mode .qty-btn:hover { background: rgba(70,54,28,.95); color: #f0d8a0; }
body.dark-mode .tool-btn.danger { color: #d08868; border-color: rgba(160,80,50,.5); }
body.dark-mode .mini-btn.danger { color: #d08868; }
body.dark-mode .chip.active, body.dark-mode .add-btn.in, body.dark-mode .mini-btn.on {
  background: linear-gradient(180deg, #7a5c2e, #5a4220); color: #f6ead0; border-color: #8a6a38;
}
body.dark-mode .side-sheet { border-left-color: rgba(80,60,30,.5); }
@media (max-width: 1080px) { body.dark-mode .side-sheet { border-top-color: rgba(80,60,30,.5); } }
body.dark-mode .panel > h2, body.dark-mode .sec-title, body.dark-mode .total-block h3 { color: #e0c888; border-bottom-color: rgba(90,70,40,.5); }
body.dark-mode .sec-note, body.dark-mode .hint, body.dark-mode .cat-details, body.dark-mode .total-row .k,
body.dark-mode .line-list .li .vl, body.dark-mode .grid-legend { color: #9a8560; }
body.dark-mode .cat-group h3 { color: #b09868; }
body.dark-mode .cat-name, body.dark-mode .floor-title { color: #e6d0a0; }
body.dark-mode .line-list .li .nm { color: #c8b890; }
body.dark-mode .line-list .li { border-bottom-color: rgba(90,70,40,.35); }
body.dark-mode table.cat-table th, body.dark-mode table.room-table th { color: #9a8560; border-bottom-color: rgba(90,70,40,.5); }
body.dark-mode table.cat-table td, body.dark-mode table.room-table td { border-bottom-color: rgba(90,70,40,.28); }
body.dark-mode table.cat-table tr:hover td { background: rgba(90,70,40,.18); }
body.dark-mode .cat-search, body.dark-mode .field input, body.dark-mode .field select {
  background: rgba(30,22,12,.7); color: #e0c888; border-color: rgba(120,95,55,.5);
}
body.dark-mode .floor-card { background: rgba(28,21,12,.55); border-color: rgba(110,85,50,.45); }
body.dark-mode .floor-head { background: rgba(60,45,25,.5); border-bottom-color: rgba(90,70,40,.45); }
body.dark-mode .floor-mult { background: rgba(120,95,55,.3); color: #d8bc84; }
body.dark-mode .floor-mult.deep { background: rgba(140,70,50,.3); color: #e0a080; }
body.dark-mode .field label { color: #9a8560; }
body.dark-mode .grid { background: rgba(25,18,10,.6); border-color: rgba(110,85,50,.55); }
body.dark-mode .gc { border-right-color: rgba(110,88,55,.28); border-bottom-color: rgba(110,88,55,.28); }
body.dark-mode .gc.major { border-right-color: rgba(140,112,68,.6); }
body.dark-mode .gc.majorRow { border-bottom-color: rgba(140,112,68,.6); }
body.dark-mode .callout { background: rgba(120,95,55,.18); border-left-color: #8a6a38; }
body.dark-mode .callout.warn { background: rgba(150,90,40,.18); border-left-color: #b5651d; }
body.dark-mode .callout.danger { background: rgba(140,55,35,.18); border-left-color: #b04530; }
body.dark-mode .prose code { background: rgba(120,95,55,.25); }
body.dark-mode .empty, body.dark-mode .loading { color: #9a8560; }
body.dark-mode .lumber  { color: #c69b5e; }
body.dark-mode .granite { color: #a8a89a; }
body.dark-mode .lead    { color: #8fa6c4; }
body.dark-mode .eminence{ color: #c89ad8; }
body.dark-mode .bp      { color: #86b892; }
body.dark-mode .opt-card { background: rgba(28,21,12,.55); border-color: rgba(110,85,50,.45); }
body.dark-mode .opt-card:hover { background: rgba(45,34,18,.75); border-color: rgba(140,112,68,.7); }
body.dark-mode .opt-title { color: #e6d0a0; }
body.dark-mode .opt-desc { color: #9a8560; }
body.dark-mode .opt-desc b, body.dark-mode .opt-card b { color: #c8b890; }
body.dark-mode .opt-card.on { background: rgba(120,95,55,.26); border-color: #8a6a38; box-shadow: inset 0 0 0 1px rgba(160,128,64,.4); }
body.dark-mode .opt-card.restricted { border-left-color: #b5651d; }
body.dark-mode .opt-card.restricted.on { background: rgba(150,75,40,.24); border-left-color: #d0704a; box-shadow: inset 0 0 0 1px rgba(190,90,55,.4); }
body.dark-mode .opt-flag { background: rgba(181,101,29,.26); color: #e0a173; border-color: rgba(200,120,50,.5); }
body.dark-mode .gc.on.thin { background: repeating-linear-gradient(45deg, #a8542c 0 5px, #7e3c1e 5px 10px); }
body.dark-mode .gc.have { background: rgba(120,150,166,.42); }
body.dark-mode .grid-legend .swatch.have, body.dark-mode .brush .swatch.have { background: rgba(120,150,166,.7); }
body.dark-mode .brush-label { color: #9a8560; }
body.dark-mode .brush .swatch { border-color: rgba(140,112,68,.6); }
body.dark-mode .gc.base { background: repeating-linear-gradient(45deg, rgba(180,148,90,.3) 0 4px, rgba(180,148,90,.12) 4px 8px); }
body.dark-mode .grid-legend .swatch { border-color: rgba(140,112,68,.6); }
body.dark-mode .grid-legend .swatch.base { background: repeating-linear-gradient(45deg, rgba(180,148,90,.3) 0 4px, rgba(180,148,90,.12) 4px 8px); }
body.dark-mode .incl-block { background: rgba(120,95,55,.16); border-color: rgba(120,95,55,.55); }
body.dark-mode .incl-head { color: #b09868; }
body.dark-mode .floor-mult.incl { background: rgba(120,95,55,.24); color: #c0a878; }
body.dark-mode .owner-select, body.dark-mode .file-notes {
  background: rgba(30,22,12,.7); color: #e0c888; border-color: rgba(120,95,55,.5);
}
body.dark-mode .opt-card.off:hover { background: rgba(28,21,12,.55); border-color: rgba(110,85,50,.45); }
body.dark-mode .tool-btn.submit-br { background: linear-gradient(180deg, #7a5c2e, #5a4220); color: #f6ead0; border-color: #8a6a38; }
body.dark-mode .tool-btn.submit-br:hover:not(:disabled) { background: linear-gradient(180deg, #8a6a38, #6a4e28); }
body.dark-mode .filed-box { background: rgba(90,150,90,.12); border-color: rgba(79,122,70,.7); }
body.dark-mode .filed-head { color: #9ccfa6; }
body.dark-mode .filed-check { background: #4f7a46; color: #eaf5e8; }
body.dark-mode .filed-linkbox { background: rgba(20,15,8,.5); border-color: rgba(110,85,50,.5); }
body.dark-mode .filed-linklabel { color: #b09868; }
body.dark-mode .filed-linkinput { background: rgba(10,7,4,.6); color: #e0c888; border-color: rgba(120,95,55,.55); }
body.dark-mode .filed-note { color: #9a8560; }
body.dark-mode .filed-banner { background: rgba(120,95,55,.2); border-color: rgba(110,85,50,.5); border-left-color: #8a6a38; }
body.dark-mode .filing-as { color: #c8b890; }
body.dark-mode .filing-as b { color: #e6d0a0; }
body.dark-mode .filed-banner-actions { border-top-color: rgba(90,70,40,.5); }
body.dark-mode .filed-tag { background: rgba(120,95,55,.3); color: #d8bc84; }
body.dark-mode .cat-thumb { border-color: rgba(120,95,55,.55); background: rgba(90,70,40,.2); }
body.dark-mode .cat-thumb:hover { border-color: #a8843e; }
body.dark-mode .pics-overlay { background: rgba(8,5,2,.85); }
body.dark-mode .pics-box { border-color: #8a6a38; }
body.dark-mode .pics-head { border-bottom-color: rgba(90,70,40,.5); }
body.dark-mode .pics-title { color: #e6d0a0; }
body.dark-mode .pics-close { background: rgba(40,30,18,.7); color: #c8ac70; border-color: rgba(120,95,55,.55); }
body.dark-mode .pics-close:hover { background: rgba(70,54,28,.95); color: #f0d8a0; }
body.dark-mode .pics-thumb { border-color: rgba(120,95,55,.5); }
body.dark-mode .pics-foot { border-top-color: rgba(90,70,40,.45); }
body.dark-mode .pics-details { color: #9a8560; }
body.dark-mode .total-row.grand { border-top-color: rgba(90,70,40,.5); }