/* city-guide.css — City Guidebook additions on top of character-sheet.css. */

/* ── re-roll & edit buttons ───────────────────────────────────────────── */

.reroll-btn {
  background: none;
  border: none;
  color: #c9ad6a;
  cursor: pointer;
  font-size: 14px;
  padding: 0 .25rem;
  vertical-align: middle;
}

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

.city-guide h2 .reroll-btn { float: none; }

/* ── header name editing ──────────────────────────────────────────────── */

.name-input {
  font-family: MrJeeves, serif;
  font-size: 2rem;
  color: #58180D;
  background: #faf7ea;
  border: 1px solid #c9ad6a;
  border-radius: .2rem;
  width: 100%;
  padding: .1rem .4rem;
  margin-bottom: .3rem;
}

/* ── demographics bars & sliders ──────────────────────────────────────── */

.demo-row {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin: .25rem 0;
  break-inside: avoid;
}

.demo-label {
  flex: 0 0 7rem;
  font-family: ScalySansSmallCaps, ScalySans, sans-serif;
}

.demo-bar-wrap {
  flex: 1;
  background: #e0d5b8;
  border-radius: .2rem;
  height: .75rem;
  overflow: hidden;
}

.demo-bar {
  display: block;
  height: 100%;
  background: #58180D;
  border-right: 2px solid #c9ad6a;
}

.demo-pct {
  flex: 0 0 3rem;
  text-align: right;
  font-family: ScalySans, sans-serif;
}

.demo-row input[type="range"] { flex: 1; accent-color: #58180D; }

/* ── establishments grid ──────────────────────────────────────────────── */

.est-grid {
  columns: 3 12rem;
  column-gap: 1.2rem;
  margin-bottom: .6rem;
}

.est-group { break-inside: avoid; margin-bottom: .8rem; }

.est-group h3 {
  font-family: ScalySansSmallCaps, ScalySans, sans-serif;
  font-size: .95rem;
  color: #58180D;
  border-bottom: 1px dotted #c9ad6a;
  margin-bottom: .25rem;
}

.est-group ul { list-style: none; margin: 0; padding: 0; }

/* name | (View Details) | count — count hugs the right edge; rows alternate
   the same pale green as the shop inventories */
.est-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: .5rem;
  font-family: ScalySans, sans-serif;
  font-size: .9rem;
  padding: .12rem .35rem;
  border-radius: 2px;
}
.est-row.est-alt { background: #e0e5c1; }

.est-count { color: #58180D; font-weight: bold; text-align: right; grid-column: 3; }

/* ── people & tavern cards ────────────────────────────────────────────── */

.person-card {
  border: 1px solid #c9ad6a;
  background: rgba(255, 252, 240, .55);
  border-radius: .25rem;
  padding: .6rem .8rem;
  margin: .5rem 0;
  break-inside: avoid;
}

.person-name {
  font-family: MrJeeves, serif;
  font-size: 1.15rem;
  color: #58180D;
  margin-bottom: .1rem;
}

.person-meta {
  font-family: ScalySansSmallCaps, ScalySans, sans-serif;
  font-size: .85rem;
  margin-bottom: .3rem;
}

.person-quote { margin: .3rem 0; }

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

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

.tavern-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  gap: .6rem;
}

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

@media (max-width: 600px) {
  .est-grid { columns: 2 9rem; }
  .demo-label { flex-basis: 5.5rem; font-size: .85rem; }
  .tavern-list { grid-template-columns: 1fr; }

  /* keep the overview table tabular — the stacked-row treatment in
     character-sheet.css is for the traits table, not stat pairs */
  .city-guide table tr { display: table-row; padding: 0; }
  .city-guide table td { display: table-cell; padding: .15rem .3rem; font-size: .85rem; }
  .city-guide table td:nth-child(2)::before { content: none; }
}

/* ── two-column section grid (replaces CSS columns: no header/body splits) ── */

.guide-grid-2 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0 1.6rem;
  align-items: start;
}

@media (min-width: 900px) {
  .guide-grid-2 { grid-template-columns: 1fr 1fr; }
}

.guide-section { break-inside: avoid; }
.guide-section > h2:first-child { margin-top: .9rem; }

#cityMapFrame {
  width: 100%;
  aspect-ratio: 4 / 3;
  border: 1px solid #c9ad6a;
  border-radius: .25rem;
  background: #EEE5CE;
}

.map-open {
  font-size: .75rem;
  margin-left: .5rem;
  vertical-align: middle;
}

.guide-edit-select {
  font-family: ScalySans, sans-serif;
  font-size: .95rem;
  padding: .35rem .4rem;
  background: #faf7ea;
  border: 1px solid #c9ad6a;
  border-radius: .2rem;
  margin-right: .5rem;
}


/* ── Quick Look (headcounts + civic figures) ───────────────────────────── */

.ql-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: .6rem 1.4rem;
  margin-bottom: .8rem;
}

@media (min-width: 640px) {
  .ql-grid { grid-template-columns: 1fr 1fr; }
}

.ql-block h3 {
  font-family: ScalySansSmallCaps, ScalySans, sans-serif;
  font-size: .95rem;
  color: #58180D;
  border-bottom: 1px dotted #c9ad6a;
  margin-bottom: .3rem;
  display: flex;
  align-items: baseline;
  gap: .4rem;
}

.ql-note {
  font-family: ScalySans, sans-serif;
  font-size: .72rem;
  font-style: italic;
  color: #7a5a2a;
  font-weight: normal;
}

.ql-item {
  display: flex;
  justify-content: space-between;
  font-family: ScalySans, sans-serif;
  font-size: .9rem;
  padding: .05rem 0;
  border-bottom: 1px dotted rgba(201,173,106,.4);
}

.ql-val { color: #58180D; font-weight: bold; }

/* ── establishment "View Details" links + note ─────────────────────────── */

.est-name { white-space: nowrap; }

.est-details {
  font-family: ScalySansSmallCaps, ScalySans, sans-serif;
  font-size: .74rem;
  color: #58180D;
  text-decoration: none;
  white-space: nowrap;
  background: #EEE5CE;
  border: 1px solid #c9ad6a;
  border-radius: .25rem;
  padding: .06rem .45rem;
  line-height: 1.3;
}

.est-details:hover { background: #faf7ea; color: #7a2a16; }
.est-details i { font-size: 9px; opacity: .7; }

.est-note {
  font-family: ScalySans, sans-serif;
  font-size: .78rem;
  font-style: italic;
  color: #7a5a2a;
  margin: -.1rem 0 .5rem;
}

/* ── defenses inline multi-select ──────────────────────────────────────── */

.defense-picker {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .15rem .8rem;
  margin: .3rem 0 .5rem;
}

.defense-opt {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-family: ScalySans, sans-serif;
  font-size: .88rem;
  cursor: pointer;
}

.defense-opt.disabled { opacity: .45; cursor: not-allowed; }
.defense-opt input { accent-color: #58180D; }

/* ── city bible: heraldry, character, factions, culture ────────────────── */

.guide-header { position: relative; }
/* the floated toolbar must paint (and hit-test) ABOVE the positioned header,
   or the full-width h1 box swallows the save button's clicks */
.city-guide .sheet-toolbar { position: relative; z-index: 2; }

/* coat of arms, floated by the name */
.city-crest {
  float: right; width: 88px; margin: 0 0 .4rem .9rem; text-align: center;
}
.city-crest .crest-art { width: 88px; height: 104px; display: block;
  cursor: pointer; }
.city-crest .crest-art svg { width: 100%; height: 100%; display: block;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.35)); transition: transform .15s; }
.city-crest .crest-art:hover svg { transform: scale(1.06); }
.city-crest .reroll-btn { margin-top: .1rem; }

/* the city's collective "character" */
.city-character {
  font-family: ScalySans, sans-serif; font-size: .95rem; margin: .1rem 0 .3rem;
  display: flex; align-items: baseline; gap: .4rem; flex-wrap: wrap;
}
.city-archetype {
  font-family: ScalySansSmallCaps, ScalySans, sans-serif; color: #58180D;
  font-weight: bold; letter-spacing: .02em;
}
.city-summary { font-style: italic; opacity: .9; }
/* .ethos-chip lives in character-sheet.css (shared with the dossier drawer) */

/* the Heraldry section — the armorial record with the shield in miniature */
.heraldry-record { display: flex; gap: .8rem; align-items: flex-start; }
.heraldry-mini { flex: 0 0 58px; }
.heraldry-mini svg {
  width: 58px; height: 68px; display: block;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.3));
}
.heraldry-text {
  font-family: ScalySans, sans-serif; font-size: .92rem; margin: 0;
}
.heraldry-blazon { color: #58180D; }
.blazon-gloss { display: block; font-size: .82rem; opacity: .85; margin-top: .15rem; }
.heraldry-tinctures {
  font-family: ScalySans, sans-serif; font-size: .86rem; margin: .35rem 0 0;
}
.tincture-name {
  display: inline-flex; align-items: center; gap: .25rem; white-space: nowrap;
  font-family: ScalySansSmallCaps, ScalySans, sans-serif; color: #58180D;
}
.tincture-name .swatch, .crest-colors .swatch {
  width: 13px; height: 13px; border-radius: 2px; border: 1px solid rgba(0,0,0,.3);
  display: inline-block;
}
.heraldry-copy { min-width: 0; }

/* factions & powers */
.faction-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }
@media (max-width: 46rem) { .faction-grid { grid-template-columns: 1fr; } }
.faction-card {
  border: 1px solid #c9ad6a; border-radius: .3rem; padding: .55rem .7rem;
  background: rgba(255,255,255,.35); display: flex; gap: .6rem;
}
.faction-card .fc-crest { flex: 0 0 46px; }
.faction-card .fc-crest svg { width: 46px; height: 54px; display: block; }
.faction-card .fc-body { flex: 1; min-width: 0; }
.faction-card .fc-name {
  font-family: MrJeeves, serif; color: #58180D; font-size: 1.05rem; margin: 0;
}
.faction-card .fc-kind {
  font-family: ScalySansSmallCaps, ScalySans, sans-serif; font-size: .72rem;
  color: #58180D; opacity: .7;
}
.faction-card p { font-size: .85rem; margin: .2rem 0; line-height: 1.35; }
.faction-card .fc-cues { display: inline-flex; gap: .25rem; flex-wrap: wrap; margin-top: .2rem; }
.faction-card .fc-secret { color: #7a2a16; }
.def-provider {
  font-family: ScalySansSmallCaps, ScalySans, sans-serif; font-size: .76rem;
  color: #7a5a2a;
}
.faction-card .fc-custody strong::before {
  content: "\f3ed"; font-family: "Font Awesome 6 Free"; font-weight: 900;
  font-size: .8em; margin-right: .3rem; color: #9c6b2e;
}
.faction-card .fc-leader { font-family: ScalySansSmallCaps, ScalySans, sans-serif; }

.faction-relations { margin-top: .6rem; }
.faction-relations li { font-size: .86rem; margin: .15rem 0; }
.faction-relations .rel-word {
  font-family: ScalySansSmallCaps, ScalySans, sans-serif; color: #7a2a16;
  padding: 0 .25rem;
}

/* law, custom & culture */
.culture-cols { columns: 2; column-gap: 1.4rem; }
@media (max-width: 46rem) { .culture-cols { columns: 1; } }
.culture-block { break-inside: avoid; margin-bottom: .6rem; }
.culture-block h3 {
  font-family: ScalySansSmallCaps, ScalySans, sans-serif; color: #58180D;
  font-size: .95rem; margin: .2rem 0 .1rem; border-bottom: 1px solid #d8c69a;
}
.culture-block ul { margin: .2rem 0 .2rem 1rem; }
.culture-block li { font-size: .86rem; line-height: 1.35; margin: .12rem 0; }
.festival-when {
  font-family: ScalySansSmallCaps, ScalySans, sans-serif; color: #7a2a16;
  font-size: .78rem;
}

/* Trade & Industry (L4) */
.city-architecture { color: #5a4632; font-size: .92rem; margin: .1rem 0 .4rem; }
.trade-role {
  font-family: ScalySansSmallCaps, ScalySans, sans-serif; color: #7a2a16;
  font-size: .8rem; font-weight: normal; margin-left: .5rem;
}
.trade-cols { columns: 2; column-gap: 1.4rem; }
@media (max-width: 46rem) { .trade-cols { columns: 1; } }
.trade-block { break-inside: avoid; margin-bottom: .55rem; }
.trade-block h4 {
  font-family: ScalySansSmallCaps, ScalySans, sans-serif; color: #58180D;
  font-size: .9rem; margin: .2rem 0 .05rem; border-bottom: 1px solid #d8c69a;
}
.trade-block p { font-size: .86rem; line-height: 1.35; margin: .1rem 0; }
.trade-specialty {
  break-inside: avoid; background: #f3ead2; border: 1px solid #cbb586;
  border-left: 3px solid #b8860b; border-radius: 5px; padding: .5rem .7rem;
  margin: .3rem 0 .6rem;
}
.trade-specialty.exotic { border-left-color: #7a4a86; background: #f2ecf3; }
.trade-specialty h4 {
  font-family: ScalySansSmallCaps, ScalySans, sans-serif; color: #7a2a16;
  font-size: .95rem; margin: 0 0 .15rem;
}
.trade-specialty.exotic h4 { color: #5e357a; }
.trade-specialty p { font-size: .86rem; font-style: italic; margin: 0; color: #4a3c28; }

/* People of Note (L6) */
.notable-cols { columns: 2; column-gap: 1.6rem; }
@media (max-width: 46rem) { .notable-cols { columns: 1; } }
.notable-block { break-inside: avoid; margin-bottom: .7rem; }
.notable-block h3 {
  font-family: ScalySansSmallCaps, ScalySans, sans-serif; color: #58180D;
  font-size: .95rem; margin: .2rem 0 .2rem; border-bottom: 1px solid #d8c69a;
}
.family-list, .notable-list { margin: .2rem 0 .2rem 1rem; padding: 0; }
.family-list li, .notable-list li {
  font-size: .86rem; line-height: 1.4; margin: .3rem 0; break-inside: avoid;
}
.not-title { font-style: italic; color: #5a3d1a; }
.not-tie, .fam-head { color: #7a2a16; }
.not-hook, .fam-hook { color: #4a3c28; }

/* Streets & Trouble (L5) */
.thread-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr)); gap: .8rem; }
.thread-card {
  break-inside: avoid; background: #f5edd8; border: 1px solid #cbb586;
  border-left: 3px solid #a53535; border-radius: 6px; padding: .6rem .75rem;
}
.thread-card.no-villain { border-left-color: #2f7d4f; }
.thread-card h3 { font-size: .96rem; margin: 0 0 .25rem; color: #58180D; line-height: 1.3; }
.thread-meta { margin-bottom: .35rem; }
.thread-tag, .thread-state {
  font-family: ScalySansSmallCaps, ScalySans, sans-serif; font-size: .68rem;
  color: #6a5638; border: 1px solid #cbb586; border-radius: 9px; padding: 0 .4rem; margin-right: .2rem;
}
.thread-state { color: #a53535; border-color: #d6a98a; }
.thread-card p { font-size: .84rem; line-height: 1.4; margin: .28rem 0; }
.thread-hook b, .thread-enc b, .thread-truth b, .thread-line b { color: #7a2a16; }
.thread-omit, .thread-nc { color: #5a4632; font-style: italic; }
.thread-if { color: #8a3a2a; }
.thread-truth { background: #efe6cf; border-radius: 4px; padding: .2rem .4rem; color: #4a3c28; }
.thread-line { font-size: .78rem !important; color: #6a5638; }
.thread-clues summary { font-size: .78rem; color: #7a2a16; cursor: pointer; }
.thread-clues ul { margin: .3rem 0 .3rem 1rem; }
.thread-clues li { font-size: .8rem; line-height: 1.35; }
.thread-cast {
  display: inline-block; font-size: .78rem; color: #4a3c28; margin: 0 .5rem .2rem 0;
}
.thread-cast em { color: #8a7250; }

/* section jump-nav + standalone cross-links */
.guide-toc {
  display: flex; flex-wrap: wrap; gap: .35rem; margin: .5rem 0 .9rem;
}
.guide-toc a {
  font-family: ScalySansSmallCaps, ScalySans, sans-serif; font-size: .78rem;
  color: #58180D; text-decoration: none; background: #f1e6cc;
  border: 1px solid #cbb586; border-radius: 11px; padding: .1rem .6rem;
  white-space: nowrap;
}
.guide-toc a:hover { background: #faf3e0; }
[id^="sec-"] { scroll-margin-top: 3.6rem; }
.section-standalone-link {
  font-family: ScalySansSmallCaps, ScalySans, sans-serif; font-size: .72rem;
  font-weight: normal; margin-left: .6rem; color: #7a2a16; text-decoration: none;
  border-bottom: 1px dotted #b08d57;
}
.section-standalone-link:hover { color: #58180D; }

/* City Condition (#65) — vitals; renders only when something deviates */
.city-vitals {
  background: #f3ead2; border: 1px solid #cbb586; border-left: 3px solid #8a6d3b;
  border-radius: 5px; padding: .45rem .65rem; margin: .35rem 0 .55rem;
}
.vitals-title {
  font-family: ScalySansSmallCaps, ScalySans, sans-serif; color: #58180D;
  font-size: .85rem; margin-right: .45rem;
}
.vital-chips { display: inline; }
.vital-chip {
  display: inline-flex; align-items: center; gap: .3rem;
  font-family: ScalySansSmallCaps, ScalySans, sans-serif; font-size: .74rem;
  border: 1px solid #cbb586; border-radius: 11px; padding: .05rem .55rem;
  margin: 0 .25rem .2rem 0; background: #faf3e0; color: #5a4632;
}
.vital-chip.low  { border-color: #b98080; color: #7e2727; }
.vital-chip.high { border-color: #86ac8e; color: #245e3c; }
.vital-chip.combo { border-color: #9a7bb0; color: #5e357a; background: #f4eef7; }
.vital-pips { display: inline-flex; gap: 2px; }
.vital-pips i {
  width: 5px; height: 5px; border-radius: 50%; background: #d8c69a; display: inline-block;
}
.vital-pips i.mid { background: #c3ac76; }
.vital-pips i.on { background: currentColor; }
.vital-lines { margin: .3rem 0 0 1.1rem; padding: 0; }
.vital-line {
  font-size: .86rem; font-style: italic; color: #4a3c28;
  margin: .15rem 0 0; line-height: 1.35;
}

/* "Where they stand" — the scribe's chart */
.rel-chart-wrap { margin-top: 1rem; }
.rel-chart-wrap h3 {
  font-family: ScalySansSmallCaps, ScalySans, sans-serif; color: #58180D;
  font-size: 1.05rem; margin: .2rem 0 .3rem; border-bottom: 1px solid #d8c69a;
}
.rel-chart {
  width: 100%; height: auto; display: block;
  background: radial-gradient(ellipse at 50% 45%, #faf3e0 0%, #f1e5c8 78%, #e9dab6 100%);
  border: 1px solid #cbb586; border-radius: 8px;
  box-shadow: inset 0 0 42px rgba(120, 90, 40, .18);
}
.rel-ink-label {
  font-family: ScalySansSmallCaps, ScalySans, sans-serif; font-size: 13px;
  fill: #4a3c28; paint-order: stroke; stroke: #f5edd6; stroke-width: 3px;
  letter-spacing: .04em;
}
.rel-node-name {
  font-family: ScalySansSmallCaps, ScalySans, sans-serif; font-size: 12.5px;
  fill: #43301c; paint-order: stroke; stroke: #f5edd6; stroke-width: 3.5px;
}
.rel-notes summary {
  font-family: ScalySansSmallCaps, ScalySans, sans-serif; font-size: .82rem;
  color: #7a2a16; cursor: pointer; margin-top: .35rem;
}
.rel-notes ul { margin: .3rem 0 .2rem 1rem; }
.rel-notes li { font-size: .84rem; line-height: 1.4; }