/* character-sheet.css — PHB-flavored, responsive character sheet.
 *
 * Borrows the Player's-Handbook vocabulary from 5e-style.css (fonts are
 * declared there and loaded site-wide) but deliberately does NOT use .phb,
 * whose fixed 8.5x11 page and overflow:hidden would truncate long profiles
 * and break mobile. */

/* ── filter bar ───────────────────────────────────────────────────────── */

.sheet-controls {
  max-width: 48rem;
  margin: 1rem auto 0;
  padding: .7rem .9rem;
  background: #2a1712;
  border: 1px solid #c9ad6a;
  border-radius: .3rem;
  display: flex;
  gap: .8rem;
  align-items: flex-end;
  flex-wrap: wrap;
}

.sheet-controls-fields {
  display: flex;
  flex-direction: column;
  gap: .6rem;
  flex: 1;
}

.sheet-controls-row {
  display: flex;
  gap: .8rem;
  flex-wrap: wrap;
  align-items: flex-end;
}

.sheet-controls label.control-narrow {
  flex: 0 0 4.5rem;
  min-width: 4.5rem;
}

.sheet-controls-row .sheet-generate { align-self: flex-end; }

.sheet-controls label {
  display: flex;
  flex-direction: column;
  gap: .2rem;
  font-family: ScalySansSmallCaps, ScalySans, sans-serif;
  font-size: .8rem;
  color: #e8d9b0;
  min-width: 7rem;
  flex: 1;
}

.sheet-controls select {
  font-family: ScalySans, sans-serif;
  font-size: .95rem;
  padding: .35rem .4rem;
  background: #EEE5CE;
  color: #1f1508;
  border: 1px solid #c9ad6a;
  border-radius: .2rem;
}

.sheet-generate {
  font-family: MrJeeves, serif;
  font-size: 1.05rem;
  background: #58180D;
  color: #EEE5CE;
  border: 1px solid #c9ad6a;
  border-radius: .25rem;
  padding: .45rem 1.2rem;
  cursor: pointer;
  white-space: nowrap;
}

.sheet-generate:hover:not(:disabled) { background: #7a2a16; }
.sheet-generate:disabled { opacity: .6; cursor: wait; }

/* ── pager ────────────────────────────────────────────────────────────── */

.sheet-pager {
  max-width: 48rem;
  margin: .6rem auto 0;
  display: flex;
  /* top-aligned, not centered: when the tab strip overflows, its scrollbar
     adds height BELOW the tabs — centering would sink the arrows half a
     scrollbar under the tab buttons */
  align-items: flex-start;
  gap: .4rem;
}

.sheet-pager button {
  font-family: ScalySansSmallCaps, ScalySans, sans-serif;
  background: #EEE5CE;
  color: #58180D;
  border: 1px solid #c9ad6a;
  border-radius: .2rem;
  padding: .3rem .7rem;
  cursor: pointer;
  font-size: .95rem;
}

.sheet-pager button:hover { background: #faf7ea; }

.pager-tabs {
  display: flex;
  gap: .3rem;
  flex: 1;
  overflow-x: auto;
  scrollbar-width: thin;
}

.pager-tabs .pager-tab {
  flex: 0 0 auto;
  max-width: 9rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pager-tabs .pager-tab.active {
  background: #58180D;
  color: #EEE5CE;
  border-bottom: 3px solid #c9ad6a;
}

/* ── sheet toolbar (top-right icon buttons) ───────────────────────────── */

.sheet-toolbar {
  float: right;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: .4rem;
  margin: .1rem 0 .4rem .8rem;
}

.toolbar-buttons {
  display: flex;
  gap: .35rem;
  align-items: center;
}

.sheet-toolbar button,
.sheet-toolbar a {
  font-size: 14px;
  line-height: 1;
  padding: .4rem;
  background: #EEE5CE;
  color: #58180D;
  border: 1px solid #c9ad6a;
  border-radius: .25rem;
  cursor: pointer;
  text-decoration: none;
}

.sheet-toolbar button:hover,
.sheet-toolbar a:hover { background: #faf7ea; }

/* journal state: dark book = changes to write, dim book = up to date */
.sheet-toolbar button.attn {
  background: #58180D;
  color: #EEE5CE;
  border-color: #58180D;
}

.sheet-toolbar button.attn:hover { background: #6d2013; }

.sheet-toolbar button:disabled {
  opacity: .45;
  cursor: default;
}

.sheet-toolbar button:disabled:hover { background: #EEE5CE; }

/* ── bottom action bar (copy link + PDF) ──────────────────────────────── */

.sheet-bottom {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: .5rem;
  border-top: 1px solid #c9ad6a;
  margin-top: 1.2rem;
  padding-top: .7rem;
  clear: both;
}

.sheet-bottom button {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-family: ScalySansSmallCaps, ScalySans, sans-serif;
  font-size: .85rem;
  padding: .45rem .7rem;
  background: #EEE5CE;
  color: #58180D;
  border: 1px solid #c9ad6a;
  border-radius: .25rem;
  cursor: pointer;
}

.sheet-bottom button:hover { background: #faf7ea; }
.sheet-bottom button:disabled { opacity: .55; cursor: wait; }

.sheet-bottom .toolbar-status {
  margin-right: auto;
  font-family: ScalySansSmallCaps, ScalySans, sans-serif;
  font-size: .78rem;
  color: #58180D;
}

.sheet-toolbar .toolbar-status {
  font-family: ScalySansSmallCaps, ScalySans, sans-serif;
  font-size: .78rem;
  color: #58180D;
  margin-right: .2rem;
}

/* re-roll dice + edit pencils: one size everywhere, dice first */
.reroll-btn, .edit-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: #c9ad6a;
  font-size: 12px;
  padding: 0 .15rem;
  vertical-align: middle;
}

.reroll-btn:hover, .edit-btn:hover { color: #58180D; }

.reroll-btn.reroll-labeled {
  font-family: ScalySansSmallCaps, ScalySans, sans-serif;
  font-size: 14px;
  color: #58180D;
  background: #EEE5CE;
  border: 1px solid #c9ad6a;
  border-radius: .2rem;
  padding: .12rem .5rem;
  margin-left: .4rem;
}

.reroll-btn.reroll-labeled:hover { background: #faf7ea; }

/* highlight sections a re-roll just replaced */
@keyframes sectionFlash {
  from { background: #f0dfae; }
  to   { background: transparent; }
}

.section-flash { animation: sectionFlash 1.1s ease-out; border-radius: .25rem; }

.sheet-edit-area {
  width: 100%;
  min-height: 9rem;
  font-family: BookSanity, serif;
  font-size: .95rem;
  background: #faf7ea;
  border: 1px solid #c9ad6a;
  border-radius: .25rem;
  padding: .6rem;
}

.edit-done {
  font-family: ScalySansSmallCaps, ScalySans, sans-serif;
  font-size: .85rem;
  background: #58180D;
  color: #EEE5CE;
  border: 1px solid #c9ad6a;
  border-radius: .25rem;
  padding: .3rem .8rem;
  margin: .4rem 0 .8rem;
  cursor: pointer;
}

/* ── sheet ────────────────────────────────────────────────────────────── */

.char-sheet {
  max-width: 48rem;
  margin: 1rem auto 2.5rem;
  padding: 2rem 2.4rem 2.2rem;
  background-color: #EEE5CE;
  background-image: radial-gradient(ellipse at top, rgba(255,255,255,.35), transparent 60%);
  box-shadow: 0 0 6px rgba(0,0,0,.45), inset 0 0 60px rgba(94,60,17,.08);
  font-family: BookSanity, "Bookinsanity", Georgia, serif;
  color: #1f1508;
  font-size: .93rem;
  line-height: 1.35;
}

.char-sheet-empty { text-align: center; padding: 3rem 2rem; }

/* ── headings ─────────────────────────────────────────────────────────── */

.char-sheet h1,
.char-sheet h2 {
  font-family: MrJeeves, "Mr Eaves Small Caps", serif;
  color: #58180D;
  margin: 0;
  border: none;
}

.char-sheet h1 { font-size: 2.1rem; line-height: 1.05; }

.char-sheet h2 {
  font-size: 1.35rem;
  margin-top: 1.3rem;
  border-bottom: 2px solid #c9ad6a;
  padding-bottom: .05rem;
}

.sheet-subtitle {
  font-family: ScalySansSmallCaps, ScalySans, sans-serif;
  font-size: 1rem;
  letter-spacing: .03em;
  color: #58180D;
  margin: .15rem 0 .6rem;
}

.sheet-subtitle {
  display: flex;
  align-items: baseline;
  gap: .6rem;
  flex-wrap: wrap;
}

.sheet-subtitle > span:first-child { flex: 1; min-width: 12rem; }

.name-edit-input {
  font-family: MrJeeves, serif;
  font-size: 1.4rem;
  color: #58180D;
  background: #faf7ea;
  border: 1px solid #c9ad6a;
  border-radius: .25rem;
  padding: .15rem .4rem;
  max-width: 11rem;
}

.sheet-archetype {
  float: none;
  margin-left: auto;
  align-self: baseline;
  white-space: nowrap;
  font-family: ScalySans, sans-serif;
  font-size: .8rem;
  background: #58180D;
  color: #EEE5CE;
  padding: .1rem .55rem .15rem;
  border-radius: .15rem;
}

.sheet-rule {
  height: 5px;
  border: none;
  margin: .3rem 0 .8rem;
  background: linear-gradient(to right, #58180D, #c9ad6a 55%, transparent);
}

/* ── description with drop cap ────────────────────────────────────────── */

.char-sheet .lede::first-letter {
  font-family: GoudyInitialen, serif;
  font-size: 3.4em;
  float: left;
  line-height: .85;
  padding: .04em .08em 0 0;
  color: #58180D;
}

.char-sheet p { margin: 0 0 .65rem; }

/* two columns for the descriptive middle on wide screens */
@media (min-width: 900px) {
  .sheet-columns { columns: 2; column-gap: 1.8rem; }
  .sheet-columns > * { break-inside: avoid; }
}

/* ── voice box (descriptive-insert flavor) ────────────────────────────── */

.sheet-descriptive {
  background-color: #faf7ea;
  border: 2px solid #58180D;
  outline: 2px solid #c9ad6a;
  outline-offset: 2px;
  box-shadow: 0 0 6px rgba(0,0,0,.35);
  padding: .8rem 1rem .6rem;
  margin: 1rem .25rem;
}

.sheet-descriptive .voice-head {
  font-family: MrJeeves, serif;
  font-size: 1.15rem;
  color: #58180D;
  margin-bottom: .4rem;
  border-bottom: 1px solid #c9ad6a;
}

.sheet-descriptive .voice-quote {
  margin-bottom: .5rem;
}

.sheet-descriptive .voice-habits { margin-bottom: .15rem; }

.sheet-descriptive ul { margin: .3rem 0 .3rem 1.2rem; padding: 0; }

/* ── traits table (PHB banded style) ──────────────────────────────────── */

.char-sheet table {
  width: 100%;
  border-collapse: collapse;
  font-family: ScalySans, sans-serif;
  font-size: .88rem;
  margin: .5rem 0 1rem;
}

.char-sheet th {
  font-family: ScalySansSmallCaps, ScalySans, sans-serif;
  text-align: left;
  padding: .25rem .5rem;
  border-bottom: 2px solid #58180D;
}

.char-sheet td { padding: .3rem .5rem; vertical-align: top; }
/* generic zebra for data tables (overview, traits, staff) — but NOT the
   inventory/menu tables, which stripe their item rows explicitly below so
   section-header rows don't throw off the alternation */
.char-sheet table:not(.menu-table) tbody tr:nth-child(odd) { background-color: rgba(88,24,13,.08); }

/* inventory & menu item rows: alternate parchment-green, headers untouched */
.char-sheet .menu-table tr.inv-alt td { background-color: #e0e5c1; }

/* inventory header: title on the left, price-sort control on the right.
   The gold rule belongs to the whole header row so it spans the table width,
   not just the (now flex-shrunk) h2. */
.char-sheet .inv-head {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: .75rem; flex-wrap: wrap;
    margin-top: 1.3rem;
    border-bottom: 2px solid #c9ad6a;
    padding-bottom: .05rem;
}
.char-sheet .inv-head h2 { margin-top: 0; border-bottom: none; }

/* Coastal / Riverside water toggles on the city guide's Overview */
.char-sheet .setting-toggles {
    display: flex; align-items: center; gap: .5rem;
    flex-wrap: wrap; margin: .4rem 0 .2rem;
}
.char-sheet .setting-toggles-label {
    font-family: ScalySansSmallCaps, ScalySans, sans-serif;
    font-size: .8rem; color: #58180D; opacity: .8; letter-spacing: .03em;
}
.char-sheet .setting-toggle {
    font-family: ScalySansSmallCaps, ScalySans, sans-serif;
    font-size: .8rem; color: #58180D;
    background: #EEE5CE; border: 1px solid #c9ad6a; border-radius: 1rem;
    padding: .12rem .7rem; cursor: pointer; opacity: .6;
    display: inline-flex; align-items: center; gap: .35rem;
}
.char-sheet .setting-toggle:hover { background: #faf7ea; opacity: .85; }
.char-sheet .setting-toggle.on {
    background: #58180D; color: #EEE5CE; border-color: #58180D; opacity: 1;
}

/* "Open all" button on a Staff/party section (shared with the tavern sheet) */
.char-sheet .open-party {
    font-family: ScalySansSmallCaps, ScalySans, sans-serif;
    background: #EEE5CE; color: #58180D; border: 1px solid #c9ad6a;
    border-radius: .2rem; padding: .2rem .6rem; margin-left: .5rem;
    font-size: .8rem; cursor: pointer; vertical-align: middle;
}
.char-sheet .open-party:hover { background: #faf7ea; }
.char-sheet .inv-sort {
    font-family: ScalySansSmallCaps, ScalySans, sans-serif;
    font-size: .8rem; color: #58180D; opacity: .9;
    display: inline-flex; align-items: center; gap: .35rem; white-space: nowrap;
}
.char-sheet .inv-sort select {
    font-family: ScalySans, sans-serif; font-size: .8rem;
    color: #58180D; background: #EEE5CE;
    border: 1px solid #c9ad6a; border-radius: .2rem; padding: .1rem .3rem;
}

/* ── DM section ───────────────────────────────────────────────────────── */

.sheet-dm { margin-top: 1.2rem; }

.sheet-dm summary {
  cursor: pointer;
  font-family: MrJeeves, serif;
  font-size: 1.35rem;
  color: #58180D;
  border-bottom: 2px solid #c9ad6a;
  list-style-position: outside;
}

.sheet-dm .dm-hint {
  font-family: ScalySans, sans-serif;
  font-size: .75rem;
  color: #6b5333;
}

.sheet-dm .dm-grid {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: .3rem .8rem;
  margin: .8rem 0;
}

.sheet-dm .dm-grid dt {
  font-family: ScalySansSmallCaps, ScalySans, sans-serif;
  color: #58180D;
  font-weight: bold;
}

.sheet-dm .dm-grid dd { margin: 0; }

.sheet-dm ul { margin: .2rem 0 .8rem 1.2rem; padding: 0; }

.sheet-dm .dm-notes {
  border-left: 3px solid #c9ad6a;
  padding-left: .8rem;
  margin-top: .8rem;
  font-style: normal;
}

/* ── footer bar ───────────────────────────────────────────────────────── */

.sheet-back-link {
  font-family: ScalySansSmallCaps, ScalySans, sans-serif;
  font-size: .9rem;
  color: #58180D;
  border: 1px solid #c9ad6a;
  border-radius: .2rem;
  padding: .3rem .7rem;
  text-decoration: none;
  background: #EEE5CE;
}

.sheet-back-link:hover { background: #faf7ea; }

.sheet-footer {
  display: flex;
  gap: .8rem;
  justify-content: flex-end;
  align-items: center;
  margin-top: 1.4rem;
  padding-top: .6rem;
  border-top: 1px solid #c9ad6a;
  font-family: ScalySans, sans-serif;
  font-size: .85rem;
}

.sheet-footer button,
.sheet-footer a.sheet-btn {
  font-family: ScalySansSmallCaps, ScalySans, sans-serif;
  background: #58180D;
  color: #EEE5CE;
  border: 1px solid #c9ad6a;
  padding: .3rem .9rem;
  border-radius: .2rem;
  cursor: pointer;
  text-decoration: none;
  font-size: .9rem;
}

.sheet-footer button:hover,
.sheet-footer a.sheet-btn:hover { background: #7a2a16; }

.sheet-share-status { color: #6b5333; margin-right: auto; }

/* ── tablet ───────────────────────────────────────────────────────────── */

@media (max-width: 820px) {
  .sheet-controls { margin: .8rem .6rem 0; }
  .sheet-pager { margin: .6rem .6rem 0; }
  .char-sheet { margin: .8rem .6rem 2rem; }
}

/* ── phones ───────────────────────────────────────────────────────────── */

@media (max-width: 600px) {
  .sheet-controls {
    padding: .55rem .6rem;
    gap: .5rem;
  }
  .sheet-controls-fields { gap: .5rem .6rem; }
  .sheet-controls label {
    min-width: calc(50% - .4rem);
    flex: 0 0 calc(50% - .4rem);
    font-size: .75rem;
  }
  .sheet-controls select { font-size: 16px; } /* prevents iOS zoom-on-focus */
  .sheet-generate { width: 100%; padding: .55rem; }

  .char-sheet { margin: .6rem .4rem 1.6rem; padding: 1.1rem 1rem; font-size: .95rem; }
  .char-sheet h1 { font-size: 1.6rem; }
  /* the toolbar stops floating: one clean row above the name —
     archetype badge left, action buttons right */
  .sheet-toolbar {
    float: none;
    flex-direction: row-reverse;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: .3rem .6rem;
    margin: 0 0 .6rem;
  }
  .sheet-archetype { margin-left: 0; margin-top: 0; }
  .toolbar-buttons { flex-wrap: wrap; justify-content: flex-end; }
  /* status text drops to its own line instead of squeezing the buttons */
  .toolbar-buttons .toolbar-status { flex-basis: 100%; text-align: right; order: 2; margin: 0; }
  .sheet-dm .dm-grid { grid-template-columns: 1fr; gap: .05rem; }
  .sheet-dm .dm-grid dd { margin-bottom: .5rem; }
  /* stack trait rows instead of a cramped 3-column table */
  .char-sheet table { font-size: .85rem; }
  .char-sheet thead { display: none; }
  .char-sheet tr { display: block; padding: .35rem .3rem; }
  .char-sheet td { display: inline; padding: 0; }
  .char-sheet td:nth-child(2)::before { content: " — "; }
  .char-sheet td:nth-child(3) { display: block; }
  .sheet-footer { flex-wrap: wrap; }
}

/* ── page title above the picker box ──────────────────────────────────── */

.page-title {
  max-width: 48rem;
  margin: 1.2rem auto -0.4rem;
  font-family: MrJeeves, serif;
  font-weight: 700;
  font-size: 2rem;
  color: #58180D;
  border-bottom: 2px solid #c9ad6a;
  padding-bottom: .15rem;
}

@media (max-width: 820px) {
  .page-title { margin: 1rem .6rem -0.3rem; font-size: 1.7rem; }
}

/* the hidden attribute must beat display:flex */
.sheet-pager[hidden] { display: none; }

.inline-edit {
  font-family: ScalySans, sans-serif;
  font-size: .95rem;
  max-width: 10rem;
  padding: .05rem .35rem;
  background: #faf7ea;
  border: 1px solid #c9ad6a;
  border-radius: .2rem;
}

.inline-edit + .edit-done { margin: 0 0 0 .35rem; padding: .15rem .6rem; }

/* collapsed picker (journal modes): sheets take the stage */
.sheet-controls.collapsed .sheet-controls-fields { display: none; }
.sheet-controls.collapsed {
  padding: 0 .9rem;
  align-items: center;
  min-height: 38px;
}
.controls-toggle {
  font-family: ScalySansSmallCaps, ScalySans, sans-serif;
  font-size: .9rem;
  line-height: 1;
  background: none;
  border: none;
  color: #e8d9b0;
  cursor: pointer;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  gap: .4rem;
}
.controls-toggle:hover { color: #fff; }


/* ── the shared dossier drawer (js/dossier.js) — person links on any
   sheet page open a sliding panel with the figure's full dossier ── */
/* person links + the dossier drawer */
.person-link {
  background: none; border: none; padding: 0; margin: 0; font: inherit;
  color: #007618; cursor: pointer; font-weight: inherit;
  border-bottom: 1px dotted #007618;
}
.person-link:hover { color: #005912; border-bottom-color: #005912; }
.dossier-name {
  font-family: ScalySansSmallCaps, ScalySans, sans-serif; color: #58180D;
  font-size: 1.05rem;
}
.dossier-close {
  background: none; border: none; color: #8a7250; font-size: 1.15rem;
  cursor: pointer; padding: 0 0 0 .6rem; line-height: 1; margin: 0;
}
.dossier-close:hover { color: #58180D; }
.dossier-role {
  font-family: ScalySansSmallCaps, ScalySans, sans-serif; font-size: .76rem;
  color: #7a5a2a; letter-spacing: .03em;
}
.dossier-traits { margin: .1rem 0 .3rem; display: flex; flex-wrap: wrap; gap: .3rem; }
.ethos-chips { display: inline-flex; gap: .3rem; flex-wrap: wrap; }
.ethos-chip {
  font-family: ScalySansSmallCaps, ScalySans, sans-serif; font-size: .72rem;
  background: #e6dcc0; color: #58180D; border: 1px solid #c9ad6a;
  border-radius: 1rem; padding: .04rem .5rem; cursor: help;
}
.dossier-desc { margin: .25rem 0; }
.dossier-quote {
  margin: .3rem 0; font-style: italic; color: #5a3d1a;
  border-left: 3px solid #cbb586; padding-left: .5rem;
}
.dossier-line { margin: .2rem 0; }
.dossier-secret { color: #5e357a; }
.dossier-wait { color: #8a7250; }

/* the quill affordance on every clickable name */
.person-quill { font-size: .62em; margin-left: .25em; color: #007618; vertical-align: super; }
.person-link:hover .person-quill { color: #005912; }

.dossier-btn {
  font-family: ScalySansSmallCaps, ScalySans, sans-serif; font-size: .74rem;
  background: #EEE5CE; color: #58180D; border: 1px solid #c9ad6a;
  border-radius: .25rem; padding: .14rem .55rem; cursor: pointer; margin: 0;
  white-space: nowrap;
}
.dossier-btn:hover { background: #faf7ea; }

/* the drawer — the complete dossier in a right-hand panel; slides in */
#dossierDrawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(430px, 92vw);
  z-index: 70; background: #f9edd3; border-left: 2px solid #b08d57;
  box-shadow: -8px 0 28px rgba(60, 40, 15, .35);
  padding: .8rem .95rem .9rem; overflow-y: auto;
  font-size: .8rem; line-height: 1.45; color: #3a2c1a;
  transform: translateX(100%); transition: transform .18s ease-out;
}
#dossierDrawer.open { transform: translateX(0); }
.drawer-head {
  display: flex; gap: .6rem; align-items: flex-start;
  border-bottom: 1px solid #d9c391; padding-bottom: .5rem; margin-bottom: .5rem;
}
.drawer-title { flex: 1; display: flex; flex-direction: column; }
.drawer-title .dossier-role { border-bottom: none; padding-bottom: 0; margin-bottom: 0; }
.dossier-who {
  font-family: ScalySansSmallCaps, ScalySans, sans-serif; font-size: .74rem;
  color: #7a5a2a; letter-spacing: .03em; margin-top: .05rem;
}
.drawer-head .dossier-btn { margin-top: .1rem; }
.drawer-rule { border: none; border-top: 1px dotted #cbb586; margin: .45rem 0; }
.drawer-connections { margin: .1rem 0 .2rem 1.1rem; padding: 0; }
.drawer-connections li { font-size: .78rem; margin: .12rem 0; }
#dossierDrawer .dossier-name { font-size: .98rem; }
#dossierDrawer .dossier-quote, #dossierDrawer .dossier-desc,
#dossierDrawer .dossier-line { font-size: .8rem; }
#dossierDrawer .ethos-chip { font-size: .66rem; }
@media (max-width: 46rem) {
  #dossierDrawer .dossier-close { font-size: 1.7rem; padding: 0 .2rem 0 .8rem; }
}

/* ── the story playbill (engine v2) — shared by City Guide + one-shot-adventures.html ── */
.playbill {
  border: 1px solid #c9ad6a; border-radius: .35rem; background: rgba(255,252,240,.5);
  padding: .9rem 1.2rem 1rem; margin: .9rem 0; break-inside: avoid;
}
.pb-head { border-bottom: 2px solid #c9ad6a; padding-bottom: .4rem; margin-bottom: .55rem; }
.pb-title { font-family: MrJeeves, serif; color: #58180D; font-size: 1.45rem; margin: 0; }
.pb-kicker {
  font-family: ScalySansSmallCaps, ScalySans, sans-serif; font-size: .82rem;
  color: #7a5a2a; margin: .15rem 0 0;
}
.pb-threat { font-weight: bold; letter-spacing: .03em; }
.pb-threat-nuisance  { color: #3f7d4f; }
.pb-threat-dangerous { color: #b07d2a; }
.pb-threat-deadly    { color: #a52a2a; }
.pb-threat-line { font-family: ScalySans, sans-serif; font-style: italic; opacity: .9; }

.pb-glance {
  background: #f4ead2; border: 1px solid #d9c391; border-radius: .3rem;
  padding: .45rem .7rem; margin: 0 0 .7rem; font-size: .86rem;
}
.pb-glance-row { display: flex; gap: .6rem; padding: .12rem 0; align-items: baseline; }
.pb-glance-row + .pb-glance-row { border-top: 1px dotted rgba(201,173,106,.5); }
.pb-glance-row > b {
  flex: 0 0 5.4rem; font-family: ScalySansSmallCaps, ScalySans, sans-serif;
  color: #58180D; font-weight: normal;
}
.pb-glance-row.pb-gm > b { color: #5e357a; }
.pb-glance-cast { display: block; }
.pb-glance-cast em { color: #7a5a2a; }

.pb-act { margin: .55rem 0; }
.pb-act h4 {
  font-family: ScalySansSmallCaps, ScalySans, sans-serif; color: #58180D;
  font-size: .98rem; border-bottom: 1px dotted #c9ad6a; margin: 0 0 .3rem;
}
/* The Cast heading carries its own "Open all", so the rule sits under the
   pair rather than under the words alone. */
.pb-act h4.pb-cast-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: .8rem; flex-wrap: wrap;
}
.pb-cast-head .pb-act-btn { align-self: center; }

.pb-act p { margin: .3rem 0; font-size: .92rem; line-height: 1.5; }
.pb-readaloud {
  font-style: italic; border-left: 3px solid #cbb586; padding-left: .6rem;
  color: #4a3a22;
}
.pb-lead { display: block; margin-top: .2rem; }
.pb-cast { list-style: none; margin: 0; padding: 0; }
.pb-cast li { margin: .35rem 0; font-size: .92rem; line-height: 1.45; }
.pb-citytitle { font-family: ScalySansSmallCaps, ScalySans, sans-serif; color: #7a5a2a; }
.pb-voice { display: block; font-style: italic; color: #5a3d1a; padding-left: 1rem; }
.pb-want { display: block; padding-left: 1rem; color: #3a2f1b; }
.pb-endings { margin: .2rem 0 .3rem 1.1rem; padding: 0; }
.pb-endings li { margin: .35rem 0; font-size: .92rem; line-height: 1.5; }
.pb-reward { display: block; color: #6a5638; font-size: .88rem; }
.pb-offscript { font-size: .9rem; color: #4a3c28; }

.pb-gm-block {
  background: #efe3f2; border: 1px solid #b99cc4; border-radius: .3rem;
  padding: .4rem .7rem .55rem; margin-top: .6rem; font-size: .88rem;
}
.pb-gm-block summary {
  font-family: ScalySansSmallCaps, ScalySans, sans-serif; color: #5e357a;
  cursor: pointer; font-size: .95rem;
}
.pb-gm-block p { margin: .3rem 0; line-height: 1.45; }
.pb-trail { margin: .1rem 0 .3rem 1.3rem; }
.pb-trail li { margin: .15rem 0; }
.playbill-legacy { opacity: .8; font-size: .9rem; }

/* One-Shot Adventures: per-playbill controls. Re-rolling one adventure must
   not disturb its siblings — a guide may already be in someone's journal. */
.pb-actions { float: right; display: flex; gap: .35rem; margin: 0 0 .3rem .6rem; }
.pb-act-btn {
  font-family: ScalySansSmallCaps, ScalySans, sans-serif; font-size: .72rem;
  background: #EEE5CE; color: #58180D; border: 1px solid #c9ad6a;
  border-radius: .25rem; padding: .1rem .5rem; cursor: pointer; line-height: 1.5;
}
.pb-act-btn:hover { background: #faf7ea; color: #7a2a16; }
.pb-act-btn i { font-size: .9em; opacity: .8; }

/* The reward is what the party carries out — mark it, don't bury it inline. */
.pb-reward {
  display: block; margin: .25rem 0 0; padding: .15rem 0 .15rem .55rem;
  border-left: 3px solid #86ac8e; font-style: normal;
}
.pb-reward-tag {
  font-family: ScalySansSmallCaps, ScalySans, sans-serif; font-size: .72rem;
  letter-spacing: .04em; color: #245e3c; margin-right: .35rem;
}

.system-badge {
  font-family: ScalySansSmallCaps, ScalySans, sans-serif; font-size: .5em;
  vertical-align: middle; color: #7a5a2a; border: 1px solid #c9ad6a;
  border-radius: .25rem; padding: .05rem .4rem; margin-left: .5rem;
}

/* Account page — preferences card. */
.account-prefs-title {
  font-family: MrJeeves, serif; color: #58180D; font-size: 1.2rem;
  border-bottom: 1px solid #c9ad6a; margin: 0 0 .8rem; padding-bottom: .15rem;
}
/* Left-aligned: these are settings, not a form to fill in, and centring
   them would leave the label floating away from the control it names. */
.account-pref {
  display: flex; align-items: center; gap: .8rem; flex-wrap: wrap;
  justify-content: flex-start; text-align: left;
}
.account-pref-check { gap: .5rem; }
.account-pref-check input { margin: 0; }
.account-pref-check > span { flex: 0 0 auto; }
/* The preferences block sits inside the one account card. Written as a
   self-contained layout under #prefsSection rather than leaning on
   .account-pref: the account card's own label styling was centring these, and
   a settings list that argues with its container is a list that drifts. */
#prefsSection { text-align: left; margin-top: 1.4rem; }
#prefsSection .account-prefs-title { margin-top: 0; }

#prefsSection .account-pref {
  display: block;              /* label above its control, both flush left */
  margin: 0 0 .3rem;
  text-align: left;
}
#prefsSection .account-pref > span {
  display: block;
  margin: 0 0 .2rem;
  text-align: left;
  font-family: ScalySansSmallCaps, ScalySans, sans-serif;
  color: #58180D;
}
#prefsSection .account-pref select {
  display: block;
  width: auto;
  min-width: 14rem;
  max-width: 100%;
  margin: 0;
}
/* The checkbox is the exception: it belongs beside its label, not above. */
#prefsSection .account-pref-check {
  display: flex;
  /* The card's own label styling is a column flex — which is what was
     stacking and centring these. Stated outright rather than inherited. */
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: .5rem;
  margin-top: 1rem;
}
#prefsSection .account-pref-check input { margin: 0; flex: 0 0 auto; }
#prefsSection .account-pref-check > span { display: inline; margin: 0; }

#prefsSection .account-note {
  text-align: left;
  margin-left: 0;
  margin-top: .2rem;
}

/* Destructive action. Sized to match Sign Out rather than spanning the card:
   a full-width button reads as the primary thing to do, which this is not.
   Outlined at rest, full red on hover — the colour arrives when the pointer
   does, which is the moment the warning is worth giving. */
.account-danger {
  display: inline-block; margin-top: .6rem;
  font-family: MrJeeves, serif; font-size: 1.05rem;
  color: #7a2211; background: transparent;
  border: 1px solid #7a2211; border-radius: .25rem;
  padding: .5rem 1rem; cursor: pointer;
}
.account-danger:hover { background: #d10000; border-color: #d10000; color: #fff; }
.account-danger:disabled { opacity: .5; cursor: default; }

#logoutBtn { margin-top: 1.4rem; }

/* In the dialog the deed is already framed, so Confirm carries the full red
   outright rather than waiting for a hover. */
.account-modal-actions .account-danger {
  background: #d10000; border-color: #d10000; color: #fff; margin-top: 0;
}
.account-modal-actions .account-danger:hover { background: #a80000; border-color: #a80000; }

/* Confirmation overlay. */
.account-modal {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  background: rgba(30, 22, 14, .6); padding: 1rem;
}
.account-modal[hidden] { display: none; }
.account-modal-box {
  background: #EEE5CE; border: 2px solid #58180D; border-radius: 4px;
  max-width: 26rem; width: 100%; padding: 1.2rem 1.4rem;
  box-shadow: 0 8px 30px rgba(0, 0, 0, .35); text-align: left;
}
.account-modal-box h2 {
  font-family: MrJeeves, serif; color: #58180D; font-size: 1.3rem;
  margin: 0 0 .5rem; border-bottom: 1px solid #c9ad6a; padding-bottom: .2rem;
}
.account-modal-body {
  font-family: BookSanity, serif; font-size: .92rem; line-height: 1.5;
  color: #3b3226; margin: 0 0 1rem;
}
.account-modal-body strong { color: #7a2211; }
.account-modal-actions { display: flex; gap: .6rem; }
.account-modal-actions button { margin: 0; flex: 1; }
.account-pref > span {
  font-family: ScalySansSmallCaps, ScalySans, sans-serif; color: #58180D;
}
.account-pref select {
  font-family: BookSanity, serif; font-size: .95rem; color: #3b3226;
  background: rgba(255, 255, 255, .55); border: 1px solid rgba(88, 24, 13, .35);
  border-radius: 3px; padding: .35rem .5rem; flex: 1; min-width: 12rem;
}