/* ============================================================
 * table-side.css — the human-run side: the Cast (and next, Locations).
 * Loaded after style.css; only adds what these pages need.
 * ============================================================ */
.cast-filters { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-bottom: .75rem; }
.cast-filters input[type=search] { flex: 1 1 260px; padding: .4rem .6rem; background: var(--smoke, #211C17); color: var(--vellum, #E8DFCE); border: 1px solid var(--iron, #4A3F32); border-radius: 4px; font: inherit; }
.cast-filters select { padding: .35rem .5rem; background: var(--smoke, #211C17); color: var(--vellum, #E8DFCE); border: 1px solid var(--iron, #4A3F32); border-radius: 4px; font: inherit; font-size: .9rem; }
.cast-table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.cast-table th { text-align: left; padding: .45rem .5rem; border-bottom: 1px solid var(--iron, #4A3F32); color: var(--ash, #9C8F7A); font-weight: 600; font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; }
.cast-table th.sortable { cursor: pointer; }
.cast-table th.sortable:hover, .cast-table th.on { color: var(--ember-2, #E09550); }
.cast-table th.on::after { content: ' ▾'; }
.cast-table td { padding: .45rem .5rem; border-bottom: 1px solid rgba(74, 63, 50, .5); vertical-align: middle; }
.cast-row { cursor: pointer; }
.cast-row:hover td { background: rgba(232, 223, 206, .04); }
.cast-row.is-dead td { opacity: .6; }
.cast-table td.portrait { width: 44px; padding: .25rem .4rem; }
.cast-table td.portrait img, .no-portrait { width: 36px; height: 36px; border-radius: 4px; object-fit: cover; display: inline-grid; place-items: center; background: var(--oak-2, #362E25); color: var(--ash, #9C8F7A); font-family: 'IM Fell English', serif; font-size: 1.1rem; }
.cast-table td.name { font-family: 'IM Fell English', serif; font-size: 1.1rem; white-space: nowrap; }
.cast-table td.name a { text-decoration: none; }
.cast-table td.summary { max-width: 360px; color: var(--ash, #9C8F7A); }
.cast-table .tags { display: block; font-size: .78rem; color: var(--ember-2, #E09550); }
.cast-table .badge { font-size: .65rem; vertical-align: middle; }

.cast-sheet { display: grid; grid-template-columns: 280px 1fr; gap: 1rem; align-items: start; }
@media (max-width: 800px) { .cast-sheet { grid-template-columns: 1fr; } }
.cast-sheet.cast-sheet-player { grid-template-columns: minmax(0, 420px); justify-content: center; }   /* (66) a player's card: face and what they know */
.cast-side { text-align: center; }
.cast-portrait { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 6px; border: 1px solid var(--iron, #4A3F32); }
.cast-portrait-empty { display: grid; place-items: center; background: var(--oak-2, #362E25); color: var(--ash, #9C8F7A); font-family: 'IM Fell English', serif; font-size: 4rem; }
.cast-facts { text-align: left; margin: .75rem 0 0; display: grid; grid-template-columns: auto 1fr; gap: .25rem .6rem; font-size: .9rem; }
.cast-facts dt { color: var(--ash, #9C8F7A); }
.cast-facts dd { margin: 0; }
.cast-summary { text-align: left; margin-top: .75rem; font-style: italic; }

/* Inside the Atlas's modal: no sidebar, tight padding. */
.embed-body { margin: 0; padding: .75rem 1rem 1.5rem; background: var(--smoke, #211C17); }
.embed-body .wrap { padding: 0; max-width: none; }
.embed-body .page-head { padding: .75rem 1rem; }
.embed-body .page-head h1 { font-size: 1.6rem; margin: 0; }
.loc-flag { display: inline-flex; align-items: center; gap: .25rem; margin: 0; padding: .05rem .4rem; border: 1px solid var(--iron, #4A3F32); border-radius: 3px; font-family: 'Alegreya', Georgia, serif; font-size: .78rem; color: var(--vellum, #E8DFCE); cursor: pointer; white-space: nowrap; }
.loc-flag:hover { border-color: var(--ember, #C9772E); }
.loc-flag input { margin: 0; accent-color: var(--ember, #C9772E); }
.loc-flags { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; margin: .4rem 0; }
.loc-mapslot { text-align: left; margin-top: .9rem; padding-top: .6rem; border-top: 1px solid var(--iron, #4A3F32); }
.loc-mapslot h4 { margin: 0 0 .2rem; font-family: 'IM Fell English', serif; font-weight: 400; color: var(--ember-2, #E09550); }

/* ── Layout: one rhythm for every page on this side ─────────
 * The site's stylesheet spaces stacked panels with .panel + .panel { margin-top },
 * which also pushes down the second panel of a side-by-side row. Inside these grids
 * the grid's own gap does the spacing, every card in a row is the same height, and
 * each group sits 1.25rem below the last. */
.home-doors, .campaign-cards, .atlas-worlds, .cast-sheet { gap: 1.25rem; margin: 0 0 1.25rem; align-items: stretch; }
.home-doors > .panel, .campaign-cards > .panel, .atlas-worlds > .panel, .cast-sheet > .panel, .cast-sheet > * > .panel:first-child { margin-top: 0; }
.wrap > .panel + .home-doors, .wrap > .panel + .campaign-cards { margin-top: 0; }

/* Storage tools (admins). */
.storage-table td.num, .storage-table th.num { text-align: right; font-family: 'IBM Plex Mono', monospace; }
.storage-bar { height: 6px; background: var(--smoke, #211C17); border-radius: 3px; margin: .9rem 0 .5rem; overflow: hidden; }
.storage-bar > div { height: 100%; width: 0; background: var(--ember, #C9772E); transition: width .4s; }
.storage-log { max-height: 220px; overflow: auto; background: var(--smoke, #211C17); border: 1px solid var(--iron, #4A3F32); border-radius: 3px; padding: .6rem .8rem; font-size: .78rem; color: var(--ash, #9C8F7A); white-space: pre-wrap; }

/* ── Covers ─────────────────────────────────────────────── */
.cover { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 3px; background: var(--smoke, #211C17); }
.cover-empty { display: grid; place-items: center; background:
  radial-gradient(ellipse at 30% 20%, rgba(224, 149, 80, .16), transparent 60%),
  radial-gradient(ellipse at 80% 90%, rgba(94, 126, 155, .14), transparent 55%),
  linear-gradient(160deg, #2C251E, #1A1612); border: 1px solid var(--iron, #4A3F32); }
.cover-empty span { font-family: 'IM Fell English', serif; font-size: clamp(2rem, 6vw, 3.5rem); color: rgba(232, 223, 206, .35); }
.campaign-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.campaign-card { display: flex; flex-direction: column; padding: .75rem; text-decoration: none; color: inherit; transition: border-color .15s, transform .15s; }
.campaign-card:hover { border-color: var(--ember-2, #E09550); }
.campaign-card .cover-wrap, .campaign-card > .cover { margin-bottom: .7rem; }
/* The cover is its own control: a + to add one, a click to see it full size. */
.cover-wrap { position: relative; display: block; }
.cover-wrap.has-cover { cursor: zoom-in; }
.cover-wrap.has-cover::after { content: '⤢'; position: absolute; top: .4rem; right: .4rem; width: 1.6rem; height: 1.6rem; display: grid; place-items: center; border-radius: 50%; background: rgba(14, 11, 8, .7); color: var(--vellum, #E8DFCE); font-size: .9rem; opacity: 0; transition: opacity .15s; pointer-events: none; }
.cover-wrap.has-cover:hover::after, .cover-wrap.has-cover:focus-visible::after { opacity: 1; }
.cover-wrap.has-cover:focus-visible { outline: 2px solid var(--ember-2, #E09550); outline-offset: 2px; }
.cover-add { position: absolute; inset: 0; display: grid; place-items: center; background: none; border: 0; padding: 0; cursor: pointer; border-radius: 3px; }
.cover-add span { width: 2.6rem; height: 2.6rem; display: grid; place-items: center; border-radius: 50%; border: 2px dashed rgba(224, 149, 80, .7); color: var(--ember-2, #E09550); font-size: 1.6rem; line-height: 1; background: rgba(14, 11, 8, .55); transition: transform .15s, background .15s; }
.cover-add:hover span, .cover-add:focus-visible span { transform: scale(1.08); background: var(--ember, #C9772E); color: #1a120a; border-style: solid; }
.cover-wrap .cover-empty span { transition: opacity .15s; }
.cover-wrap[data-cover-owner]:not(.has-cover) .cover-empty span { opacity: .25; }
/* Full screen */
.cover-view { position: fixed; inset: 0; z-index: 3000; background: rgba(8, 6, 4, .92); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 3.5rem 1rem 1rem; }
.cover-view img { max-width: 100%; max-height: calc(100vh - 8.5rem); object-fit: contain; border-radius: 3px; box-shadow: 0 10px 40px rgba(0, 0, 0, .7); }
.cover-view .cv-bar { display: flex; align-items: center; gap: .6rem; margin-top: 1rem; flex-wrap: wrap; justify-content: center; }
.cover-view .cv-name { font-family: 'IM Fell English', serif; font-size: 1.3rem; color: var(--vellum, #E8DFCE); margin-right: .6rem; }
.cover-view .cv-close { position: absolute; top: .9rem; right: 1rem; width: 2.4rem; height: 2.4rem; border-radius: 50%; border: 1px solid var(--iron, #4A3F32); background: rgba(26, 18, 10, .8); color: var(--vellum, #E8DFCE); font-size: 1.4rem; line-height: 1; cursor: pointer; }
.cover-view .cv-close:hover { border-color: var(--ember-2, #E09550); }
.campaign-card h3 { margin: 0 0 .2rem; font-family: 'IM Fell English', serif; font-weight: 400; font-size: 1.3rem; color: var(--ember-2, #E09550); }
.campaign-card .role { color: var(--ash, #9C8F7A); font-size: .85rem; margin-top: auto; }
/* Row actions (players, places): buttons and inline forms on one line, same height. */
.atlas-tree .acts { display: inline-flex; gap: .4rem; align-items: center; flex-wrap: wrap; }
.atlas-tree .acts form { display: inline-flex; margin: 0; }
.atlas-tree .acts .btn { margin: 0; }
.cover-thumbs { display: flex; gap: .4rem; margin: .1rem 0 .7rem; }
.cover-thumbs .cover { width: 72px; aspect-ratio: 16 / 9; }
.cover-thumbs .cover-empty span { font-size: 1.1rem; }

/* AI campaign rows (dashboard.php): a cover column in front of the day badge. */
.card-campaign.with-cover { grid-template-columns: 168px 84px 1fr auto; }
.card-campaign.with-cover > .cover-wrap { align-self: center; }
@media (max-width: 700px) {
  .card-campaign.with-cover { grid-template-columns: 52px 1fr; }
  .card-campaign.with-cover > .cover-wrap { grid-column: 1 / -1; margin-bottom: .6rem; }
  .card-campaign.with-cover > *:nth-child(2) { grid-column: auto; }
  .card-campaign.with-cover > *:nth-child(3) { grid-column: 2; min-width: 0; }
  .card-campaign.with-cover > *:nth-child(3) h3 { font-size: 1.08rem; }
}

/* Home: two doors. */
.home-doors { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.home-door { display: flex; flex-direction: column; text-decoration: none; color: inherit; padding: 1.25rem 1.4rem; transition: border-color .15s; }
.home-door:hover { border-color: var(--ember-2, #E09550); }
.home-door-kicker { color: var(--ash, #9C8F7A); font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; }
.home-door h2 { margin: .2rem 0 .5rem; font-family: 'IM Fell English', serif; font-weight: 400; color: var(--ember-2, #E09550); }
.home-door p { margin: 0 0 .75rem; }
.home-door-foot { color: var(--ember-2, #E09550); margin-top: auto; }
.home-first { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; border-color: var(--ember, #C9772E); margin: 0 0 1.25rem; }
.home-first h2 { margin: .2rem 0 .3rem; font-family: 'IM Fell English', serif; font-weight: 400; color: var(--ember-2, #E09550); }
.home-first p { margin: 0; max-width: 60ch; }
.home-chars { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: 0; }
.home-chars p { margin: 0; }
.home-chars h3 { margin: 0 0 .25rem; }
/* Landing: two doors in the hero. */
.lp-doors { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; margin: 1.5rem 0 .75rem; text-align: left; }
.lp-door { padding: 1.25rem 1.4rem; background: var(--oak, #2C251E); border: 1px solid var(--iron, #4A3F32); border-radius: 8px; }
.lp-door h3 { margin: 0 0 .4rem; font-family: 'IM Fell English', serif; font-weight: 400; font-size: 1.5rem; color: var(--ember-2, #E09550); }
.lp-door p { margin: 0 0 .6rem; }
.lp-door-note { color: var(--ash, #9C8F7A); font-size: .9rem; }

/* A disabled button looks it (the site's stylesheet has no style for this). */
.btn[disabled], .btn:disabled, button[disabled].btn-ghost { opacity: .4; cursor: not-allowed; filter: grayscale(.6); }

/* The party, at the top of the Cast. */
.cast-party h2, .cast-h { margin: 0 0 .6rem; font-family: 'IM Fell English', serif; font-weight: 400; font-size: 1.35rem; color: var(--ember-2, #E09550); }
.cast-partylist { list-style: none; margin: 0 0 .6rem; padding: 0; }
.cast-partylist li { display: flex; align-items: center; gap: .7rem; padding: .55rem 0; border-bottom: 1px solid rgba(74, 63, 50, .5); }
.cast-partylist .disc { flex: 0 0 42px; height: 42px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: var(--oak-2, #362E25); color: var(--vellum, #E8DFCE); box-shadow: 0 0 0 2px var(--woad, #5E7E9B); font-family: 'IM Fell English', serif; font-size: 1.2rem; }
.cast-partylist .disc img { width: 100%; height: 100%; object-fit: cover; }
.cast-partylist .who { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.cast-partylist .nm { font-family: 'IM Fell English', serif; font-size: 1.15rem; text-decoration: none; }
.cast-partylist .where { color: var(--vellum, #E8DFCE); opacity: .8; }
.cast-partylist .acts { display: flex; gap: .35rem; flex: 0 0 auto; flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 560px) { .cast-partylist li { flex-wrap: wrap; } .cast-partylist .acts { width: 100%; justify-content: flex-start; padding-left: 50px; } }

/* Locations */
.loc-levels .atlas-tree { padding: 0; margin: 0 0 .75rem; list-style: none; }
.loc-levels .atlas-tree li { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; padding: .4rem 0; border-bottom: 1px solid rgba(74, 63, 50, .5); }
.loc-levels .atlas-tree li .acts { margin-left: auto; display: inline-flex; gap: .4rem; }
.loc-levels .seat-form input { flex: 1 1 220px; max-width: 360px; padding: .3rem .5rem; background: var(--smoke, #211C17); color: var(--vellum, #E8DFCE); border: 1px solid var(--iron, #4A3F32); border-radius: 4px; font: inherit; }
.loc-main .panel { margin: 0 0 1.25rem; }
.loc-main h3 { margin: 0 0 .4rem; font-family: 'IM Fell English', serif; font-weight: 400; color: var(--ember-2, #E09550); }
.loc-tree { list-style: none; margin: 0; padding: 0; }
.loc-image { width: 100%; border-radius: 6px; border: 1px solid var(--iron, #4A3F32); }

/* The stat block, in the classic shape. */
.statblock { font-size: .95rem; }
.statblock .sb-head h2 { margin: 0; font-family: 'IM Fell English', serif; color: var(--ember-2, #E09550); }
.statblock .sb-sub { margin: 0 0 .5rem; font-style: italic; color: var(--ash, #9C8F7A); }
.statblock p { margin: .3rem 0; }
.statblock h3 { margin: .5rem 0 .3rem; font-family: 'IM Fell English', serif; font-weight: 400; color: var(--ember-2, #E09550); }
.statblock hr.rule-ember { margin: .5rem 0; }
.sb-abilities { width: 100%; text-align: center; border-collapse: collapse; }
.sb-abilities th { color: var(--ash, #9C8F7A); font-size: .78rem; letter-spacing: .08em; }
.sb-abilities td { font-family: 'IBM Plex Mono', monospace; }
.sb-text { white-space: pre-wrap; }

/* The editor. */
.cast-editor label { display: block; margin: .5rem 0; color: var(--ash, #9C8F7A); font-size: .85rem; }
.cast-editor input:not([type=checkbox]), .cast-editor select, .cast-editor textarea { display: block; width: 100%; margin-top: .2rem; padding: .35rem .5rem; background: var(--smoke, #211C17); color: var(--vellum, #E8DFCE); border: 1px solid var(--iron, #4A3F32); border-radius: 4px; font: inherit; font-size: .95rem; box-sizing: border-box; }
.cast-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0 .75rem; }
.cast-grid-6 { grid-template-columns: repeat(6, 1fr); gap: 0 .5rem; }
.cast-check, .cast-checks label { display: inline-flex !important; align-items: center; gap: .35rem; color: var(--vellum, #E8DFCE) !important; margin: .3rem .8rem .3rem 0 !important; }
.cast-checks { border: 1px solid var(--iron, #4A3F32); border-radius: 4px; padding: .3rem .6rem; margin: .5rem 0; }
.cast-checks legend { color: var(--ash, #9C8F7A); font-size: .8rem; padding: 0 .3rem; }
.cast-editor h3 { margin: 1rem 0 .25rem; font-family: 'IM Fell English', serif; font-weight: 400; color: var(--ember-2, #E09550); }
.cast-attacks { width: 100%; border-collapse: collapse; }
.cast-attacks th { text-align: left; color: var(--ash, #9C8F7A); font-size: .78rem; font-weight: 600; }
.cast-attacks td { padding: .15rem .2rem; }
.cast-danger { color: var(--ember-2, #E09550); margin-left: auto; }
.btn.small { padding: .2rem .55rem; font-size: .8rem; }

/* Small buttons are as tall as their text, centred; the 44 px touch size applies only to touch. */
.btn.small { display: inline-flex; align-items: center; justify-content: center; line-height: 1.25; }
.btn.small, button.btn.small { min-height: 0; }
@media (pointer: coarse) { .btn.small, button.btn.small { min-height: 44px; } }   /* a finger still gets a full-size target */

/* Every section: a back arrow at its top-left, a close × at its top-right. */
.sec-head { display: flex; align-items: center; gap: .6rem; }
.sec-head h1, .sec-head h2 { margin: 0; flex: 1; min-width: 0; }
.sec-back, .sec-close { flex: 0 0 auto; display: inline-grid; place-items: center; width: 2rem; height: 2rem; min-height: 0; padding: 0; border-radius: 50%; border: 1px solid var(--iron, #4A3F32); background: rgba(26, 18, 10, .5); color: var(--vellum, #E8DFCE); font: 400 1.15rem/1 Alegreya, Georgia, serif; text-decoration: none; cursor: pointer; }
.sec-back:hover, .sec-close:hover, .sec-back:focus-visible, .sec-close:focus-visible { background: rgba(26, 18, 10, .8); border-color: var(--ember, #C9772E); color: var(--ember-2, #E09550); text-decoration: none; }

/* The NPC filters: hidden behind a small Filters button. */
.cast-filterbtn .badge { margin-left: .35rem; min-width: 1.1rem; padding: 0 .3rem; border-radius: 999px; background: var(--ember, #C9772E); color: #1a120a; font-size: .7rem; line-height: 1.1rem; text-align: center; }
.cast-filterbtn.on { border-color: var(--ember, #C9772E); color: var(--ember-2, #E09550); }
.cast-filterbox { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .4rem; margin: 0 0 .8rem; padding: .6rem; border: 1px solid var(--iron, #4A3F32); border-radius: 4px; background: rgba(26, 18, 10, .35); }
.cast-filterbox[hidden] { display: none; }
.cast-filterbox select { width: 100%; }
.cast-filterbox #cast-filterclear { justify-self: start; }
.cast-filters { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.cast-filters #cast-q { flex: 1 1 220px; }

/* The Cast pinned beside the map: quick view. */
.cast-quick { padding: .2rem .1rem; }
.cq-top { display: flex; gap: .4rem; align-items: center; margin-bottom: .5rem; position: sticky; top: 0; z-index: 2; padding: .4rem 0; background: var(--smoke, #211C17); }
.cq-top input { flex: 1; min-width: 0; padding: .35rem .5rem; background: var(--oak, #2C251E); color: var(--vellum, #E8DFCE); border: 1px solid var(--iron, #4A3F32); border-radius: 4px; font: inherit; font-size: .9rem; }
.cq-h { margin: .6rem 0 .2rem; font-family: 'IM Fell English', serif; font-weight: 400; font-size: 1.05rem; color: var(--ember-2, #E09550); }
.cq-list { list-style: none; margin: 0; padding: 0; }
.cq-list li { display: flex; align-items: center; gap: .55rem; padding: .35rem .1rem; border-bottom: 1px solid rgba(74, 63, 50, .45); }
.cq-list li[hidden] { display: none; }
.cq-disc { flex: 0 0 34px; height: 34px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: var(--oak-2, #362E25); color: var(--vellum, #E8DFCE); box-shadow: 0 0 0 2px var(--rust, #A0522D); font-family: 'IM Fell English', serif; }
.cq-disc.pc { box-shadow: 0 0 0 2px var(--woad, #5E7E9B); }
.cq-disc img { width: 100%; height: 100%; object-fit: cover; }
.cq-who { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.cq-name { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-decoration: none; font-family: 'IM Fell English', serif; font-size: 1.02rem; }
.cq-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ash, #9C8F7A); font-size: .74rem; }
.cq-hrow { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.cq-hrow .btn.small { min-height: 0; }
.cq-act { flex: 0 0 26px; width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; border-radius: 6px; color: var(--ember-2, #E09550); text-decoration: none; }
.cq-act:hover, .cq-act:focus-visible { background: rgba(201, 119, 46, .18); color: #fff3e0; }
.cq-act.none { visibility: hidden; }
.cq-act.cq-place { color: var(--ash, #9C8F7A); }
.cq-act.cq-place.off { color: var(--ember-2, #E09550); }
.cq-act.cq-place:hover { color: #fff3e0; }
/* (66) a character's place on the map, on their page in the Cast */
.castbar { display: flex; flex-direction: column; align-items: stretch; gap: .45rem; margin: .6rem 0 0; padding: .55rem .65rem; border: 1px solid var(--iron, #4A3F32); border-radius: 8px; background: rgba(14, 11, 8, .25); text-align: left; }
.castbar-row { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem; justify-content: flex-start; }
.castbar-k { flex: 0 0 5.4rem; color: var(--ash, #9C8F7A); }
.castbar-where { margin-right: auto; display: inline-flex; align-items: center; gap: .4rem; color: var(--vellum-2, #D9CDB6); }
.castbar-dot { width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid #6e6458; }
.castbar-dot.on { background: #8fc277; border-color: #8fc277; }
.castbar-dot.far { background: #d39a4a; border-color: #d39a4a; }
.castbar select { width: auto !important; }
.castbar .btn.small, .castbar select { min-height: 0; }
.castbar select { max-width: 100%; flex: 1 1 8rem; min-width: 0; padding: .25rem .4rem; background: var(--smoke, #211C17); color: var(--vellum, #E8DFCE); border: 1px solid var(--iron, #4A3F32); border-radius: 6px; font: inherit; font-size: .85rem; }
.castbar-seg { display: inline-flex; border: 1px solid var(--iron, #4A3F32); border-radius: 6px; overflow: hidden; }
.castbar-seg .btn.small { padding: .15rem .55rem; margin: 0; border: 0; border-radius: 0; background: none; color: var(--vellum-2, #D9CDB6); box-shadow: none; }
.castbar-seg .btn.small + .btn.small { border-left: 1px solid var(--iron, #4A3F32); }
.castbar-seg .btn.small:hover { background: rgba(201, 119, 46, .14); }
.castbar-seg .btn.small.on { background: var(--ember, #C9772E); color: #1a120a; }
.sheet-castbar { display: flex; align-items: flex-start; gap: .6rem; margin: 0 0 .8rem; }
.sheet-castbar .castbar { flex: 1 1 auto; margin: 0; }
.sheet-castbar .sec-back { flex: 0 0 auto; margin-top: .35rem; }
.cq-list .btn.small { flex: 0 0 auto; }

/* The DM rolls for an NPC from its stat block. */
.sb-roll { cursor: pointer; border-bottom: 1px dotted rgba(224, 149, 80, .6); }
.sb-roll:hover { color: var(--ember-2, #E09550); border-bottom-style: solid; }
.sb-abilities td .sb-roll { border-bottom: 0; display: inline-block; padding: .05rem .25rem; border-radius: 3px; }
.sb-abilities td .sb-roll:hover { background: rgba(201, 119, 46, .15); }
/* (67) every save and skill, to roll for the NPC from its page */
.sb-rolls { margin: .5rem 0 .2rem; display: grid; gap: .35rem; font-size: .9rem; }
.sb-rollrow { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; }
.sb-rk { font: 600 .68rem/1 'IBM Plex Mono', monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--ash, #9C8F7A); margin-right: .2rem; }
.sb-rolls .sb-roll { border: 1px solid var(--iron, #4A3F32); border-radius: 4px; padding: .1rem .45rem; background: rgba(26, 18, 10, .4); white-space: nowrap; }
.sb-rolls .sb-roll:hover { border-color: var(--ember, #C9772E); background: rgba(201, 119, 46, .14); }
.sb-allskills summary { cursor: pointer; color: var(--ash, #9C8F7A); font-size: .85rem; width: max-content; }
.sb-allskills[open] summary { margin-bottom: .3rem; }
.sb-rolls .sb-roll.sb-prof { border-color: rgba(201, 119, 46, .65); color: var(--vellum, #E8DFCE); }   /* (93) proficient: the stat block's Saving Throws and Skills */
.sb-rolls .sb-roll.sb-prof::before { content: ''; display: inline-block; width: .38em; height: .38em; margin: 0 .35em .12em 0; border-radius: 50%; background: var(--ember-2, #E09550); vertical-align: middle; }

/* Deleting a campaign. */
.danger-zone { border-color: rgba(192, 57, 43, .55); }
.danger-zone h3 { margin: 0 0 .4rem; color: #E0603B; font-family: 'IM Fell English', serif; font-weight: 400; }
.danger-zone .seat-form { display: flex; gap: .6rem; align-items: flex-end; flex-wrap: wrap; }
.danger-zone label { display: flex; flex-direction: column; gap: .25rem; flex: 1 1 240px; }
.danger-zone input[type=text] { padding: .35rem .5rem; background: var(--smoke, #211C17); color: var(--vellum, #E8DFCE); border: 1px solid var(--iron, #4A3F32); border-radius: 4px; font: inherit; }
.btn.danger { background: #8E2F22; border-color: #C0392B; color: #F5E6DC; }
.btn.danger:hover { background: #A8372A; border-color: #E0603B; color: #fff; }

/* The guided New location. */
.wiz [hidden] { display: none !important; }   /* the site's .btn style would otherwise show hidden buttons */
.wiz .sec-head h2 { font-family: 'IM Fell English', serif; font-weight: 400; font-size: 1.4rem; color: var(--vellum, #E8DFCE); }
.wiz-steps { list-style: none; margin: .9rem 0 1.1rem; padding: 0; display: flex; gap: .25rem; counter-reset: wiz; flex-wrap: wrap; }
.wiz-steps li { counter-increment: wiz; flex: 1 1 0; min-width: 4.5rem; display: flex; align-items: center; gap: .35rem; padding: .35rem .5rem; border-bottom: 3px solid var(--iron, #4A3F32); color: var(--ash, #9C8F7A); font-size: .85rem; cursor: default; }
.wiz-steps li::before { content: counter(wiz); display: inline-grid; place-items: center; width: 1.35rem; height: 1.35rem; border-radius: 50%; border: 1px solid var(--iron, #4A3F32); font: 600 .7rem/1 'IBM Plex Mono', monospace; }
.wiz-steps li.can { cursor: pointer; }
.wiz-steps li.can:hover { color: var(--vellum, #E8DFCE); }
.wiz-steps li.done { border-bottom-color: rgba(201, 119, 46, .55); color: var(--vellum, #E8DFCE); }
.wiz-steps li.done::before { content: '\2713'; border-color: var(--ember, #C9772E); color: var(--ember-2, #E09550); }
.wiz-steps li.on { border-bottom-color: var(--ember, #C9772E); color: var(--ember-2, #E09550); }
.wiz-steps li.on::before { background: var(--ember, #C9772E); border-color: var(--ember-2, #E09550); color: #1a120a; }
.wiz-step { display: flex; flex-direction: column; gap: .8rem; }
.wiz-step label { display: flex; flex-direction: column; gap: .3rem; }
.wiz-row { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
@media (max-width: 560px) { .wiz-row { grid-template-columns: 1fr; } }
.wiz-inline { display: flex; align-items: center; gap: .4rem; }
.wiz-inline input[type=number] { width: 6.5rem; flex: 0 0 auto; }
.wiz-inline select { width: auto; flex: 0 0 auto; }
.wiz-tip { margin: 0; padding: .55rem .75rem; border-left: 3px solid var(--ember, #C9772E); background: rgba(201, 119, 46, .1); color: var(--vellum, #E8DFCE); font-size: .92rem; border-radius: 0 4px 4px 0; }
.wiz-file { position: relative; display: flex; flex-direction: column; gap: .35rem; padding: .8rem; border: 1px solid var(--iron, #4A3F32); border-radius: 6px; background: rgba(26, 18, 10, .35); }
.wiz-slot { height: 150px; border: 1px dashed var(--iron, #4A3F32); border-radius: 6px; overflow: hidden; background: #14110E; }
.wiz-slot.picked { border-style: solid; border-color: var(--ember, #C9772E); }
.wiz-slot > img { width: 100%; height: 100%; object-fit: contain; }
.wiz-slot > .imgslot-empty { background: none; }
.wiz-file input[type=file] { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.wiz-file:focus-within { border-color: var(--ember-2, #E09550); box-shadow: 0 0 0 2px rgba(224, 149, 80, .35); }
.wiz-filetitle { font-weight: 600; color: var(--vellum, #E8DFCE); }
.wiz-filebtn { align-self: flex-start; padding: .3rem .7rem; border: 1px solid var(--ember, #C9772E); border-radius: 4px; color: var(--ember-2, #E09550); font-size: .88rem; }
.wiz-filename { font: .82rem 'IBM Plex Mono', monospace; color: var(--ash, #9C8F7A); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wiz-filename.set { color: var(--vellum, #E8DFCE); }
.wiz-nav { display: flex; justify-content: space-between; align-items: center; gap: .5rem; margin-top: 1.2rem; padding-top: .8rem; border-top: 1px solid rgba(74, 63, 50, .6); }
.wiz-navright { display: flex; gap: .5rem; margin-left: auto; }

/* ── (65) Locations: a tree that folds, one clean line a place ─────────────── */
.loc-panel { padding: .75rem .6rem .6rem; }
.loc-bar { display: flex; align-items: center; gap: .35rem; margin-bottom: .45rem; }
.loc-search { flex: 1 1 auto; display: flex; align-items: center; gap: .4rem; min-width: 0; padding: 0 .55rem; height: 2rem; background: var(--smoke, #211C17); border: 1px solid var(--iron, #4A3F32); border-radius: 6px; color: var(--ash, #9C8F7A); }
.loc-search:focus-within { border-color: var(--ember, #C9772E); }
.loc-search input { flex: 1 1 auto; min-width: 0; height: 100%; padding: 0; background: none; border: 0; outline: none; color: var(--vellum, #E8DFCE); font: inherit; font-size: .92rem; }
.loc-iconbtn { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; padding: 0; background: none; border: 1px solid var(--iron, #4A3F32); border-radius: 6px; color: var(--ash, #9C8F7A); cursor: pointer; }
.loc-iconbtn:hover, .loc-iconbtn:focus-visible, .loc-iconbtn.on { background: rgba(201, 119, 46, .14); border-color: var(--ember, #C9772E); color: var(--vellum, #E8DFCE); }
.loc-bar .loc-new { flex: 0 0 auto; height: 2rem; display: inline-flex; align-items: center; padding: 0 .65rem; white-space: nowrap; }
.loc-filters { display: flex; gap: .35rem; margin: 0 0 .45rem; }
.loc-filters select { flex: 1 1 0; min-width: 0; padding: .25rem .4rem; background: var(--smoke, #211C17); color: var(--vellum, #E8DFCE); border: 1px solid var(--iron, #4A3F32); border-radius: 6px; font: inherit; font-size: .85rem; }
.loc-filters[hidden] { display: none; }
.loc-panel .loc-tree { list-style: none; margin: 0; padding: 0; }
.loc-panel .loc-tree > li { margin: 0; line-height: 1.3; }
.loc-panel .loc-row, .loc-panel .loc-head { display: flex; align-items: center; gap: .3rem; min-height: 2rem; padding: .15rem .3rem .15rem calc(.15rem + var(--d, 0) * .95rem); border-radius: 5px; cursor: pointer; }
.loc-panel .loc-row:hover, .loc-panel .loc-head:hover { background: rgba(232, 223, 206, .05); }
.loc-panel .loc-row.hit .loc-name { color: var(--vellum, #E8DFCE); }
.loc-twist { flex: 0 0 18px; width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; padding: 0; margin: 0; background: none; border: 0; border-radius: 4px; color: var(--ash, #9C8F7A); cursor: pointer; transition: transform .12s; }
.loc-twist:hover, .loc-twist:focus-visible { background: rgba(232, 223, 206, .08); color: var(--vellum, #E8DFCE); }
.loc-row.open > .loc-twist, .loc-head.open > .loc-twist { transform: rotate(90deg); }
.loc-twist.none { visibility: hidden; }
.loc-eye { flex: 0 0 24px; width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; border-radius: 5px; color: var(--ember-2, #E09550); text-decoration: none; }
.loc-eye:hover, .loc-eye:focus-visible { background: rgba(201, 119, 46, .18); color: #fff3e0; }
.loc-eye.none { color: var(--iron, #4A3F32); opacity: .6; cursor: default; }
.loc-eye.none:hover { background: none; }
.loc-label { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.loc-name { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--vellum-2, #D9CDB6); text-decoration: none; font-family: 'IM Fell English', Georgia, serif; font-size: 1.02rem; line-height: 1.3; }
.loc-name:hover { color: var(--ember-2, #E09550); }
.loc-name mark { background: rgba(201, 119, 46, .35); color: inherit; border-radius: 2px; }
.loc-row.has-kids > .loc-label .loc-name { color: var(--vellum, #E8DFCE); }
.loc-meta { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--ash, #9C8F7A); font-size: .78rem; }
.loc-meta .tags { color: var(--ember-2, #E09550); margin-left: .3rem; }
.loc-panel .loc-head { margin-top: .5rem; color: var(--ash, #9C8F7A); font-size: .74rem; text-transform: uppercase; letter-spacing: .08em; }
.loc-panel .loc-head > span { flex: 1 1 auto; }
.loc-foot { margin: .5rem .3rem 0; }
.loc-panel .loc-thumb { flex: 0 0 34px; width: 34px; height: 34px; border-radius: 5px; object-fit: cover; }
.loc-panel .loc-thumb-empty { display: flex; align-items: center; justify-content: center; background: var(--oak-2, #362E25); border: 1px solid rgba(74, 63, 50, .7); color: var(--ash, #9C8F7A); font-family: 'IM Fell English', serif; font-size: 1.05rem; text-transform: uppercase; }
.loc-panel:not(.loc-compact) .loc-row { min-height: 2.6rem; }
/* in the panel beside the map: no page furniture */
.embed-body .loc-panel { margin: 0; border: 0; background: none; box-shadow: none; padding: .1rem 0 .4rem; }
.loc-panel .loc-twist, .loc-panel .loc-tg, .loc-panel .loc-iconbtn { min-height: 0; }   /* (a narrow panel is not a phone: the site's 44-px buttons are for fingers) */
@media (pointer: coarse) { .loc-panel .loc-row, .loc-panel .loc-head { min-height: 44px; } .loc-panel .loc-tg { width: 34px; height: 34px; } }
.embed-body .loc-bar { position: sticky; top: -.75rem; z-index: 3; margin: -.75rem -1rem .45rem; padding: .75rem 1rem .45rem; background: var(--smoke, #211C17); }   /* (the search stays put while the list scrolls under it) */
.loc-head-embed { display: flex; align-items: center; gap: .45rem; }
.loc-head-embed h1 { flex: 1 1 auto; min-width: 0; margin: 0; }
.embed-body .page-head .loc-head-embed h1 { font-size: 1.32rem; line-height: 1.2; }
.loc-head-embed h1 .small { font-size: .8rem; white-space: nowrap; }
.loc-eye.loc-eye-lg { flex: 0 0 32px; width: 32px; height: 32px; border: 1px solid var(--iron, #4A3F32); border-radius: 50%; }
.loc-head-embed .loc-iconbtn { text-decoration: none; }
.loc-actions-embed:not(:has(*)) { display: none; }
.loc-actions-embed { gap: .4rem; }
.embed-body .page-head .btn-row.loc-actions-embed { margin-top: .5rem; }
/* (65) a place's own page beside the map */
.embed-body .cast-sheet { display: block; margin: 0; }
.embed-body .cast-side { padding: 0 .1rem; margin: .7rem 0 .8rem; background: none; border: 0; box-shadow: none; }
.embed-body .cast-side::before, .embed-body .cast-side::after { display: none; }
.embed-body .cast-side .loc-image { width: 100%; max-height: 220px; object-fit: cover; border-radius: 4px; margin: 0 0 .5rem; }
.loc-chips { display: flex; flex-wrap: wrap; gap: .3rem; margin: 0; }
.loc-chip { font-size: .78rem; line-height: 1.5; padding: 0 .5rem; border: 1px solid var(--iron, #4A3F32); border-radius: 999px; color: var(--vellum, #E8DFCE); white-space: nowrap; }
.loc-chip-tag { color: var(--ash, #9C8F7A); border-style: dashed; }
.loc-chip-vis.vis-hidden { color: var(--ash, #9C8F7A); }
.loc-chip-vis.vis-name { color: #d9b56a; border-color: rgba(217, 181, 106, .5); }
.loc-chip-vis.vis-known { color: #9fca8a; border-color: rgba(159, 202, 138, .45); }
.embed-body .loc-main .panel { padding: .7rem .9rem; margin: 0 0 .75rem; }
.embed-body .loc-main h3 { font-size: 1.15rem; }
.embed-body .loc-main .sb-text, .embed-body .loc-main .panel > p { font-size: .98rem; line-height: 1.5; }
.loc-manage > summary { cursor: pointer; color: var(--ash, #9C8F7A); font-size: .9rem; list-style: none; }
.loc-manage > summary::-webkit-details-marker { display: none; }
.loc-manage > summary::before { content: '▸'; display: inline-block; width: 1rem; color: var(--ember-2, #E09550); }
.loc-manage[open] > summary::before { content: '▾'; }
.loc-manage[open] > summary { margin-bottom: .5rem; }
.loc-manage .loc-mapslot { margin-top: .6rem; }
.loc-main .atlas-tree { list-style: none; padding: 0; margin: 0; }
.loc-main .atlas-tree li { display: flex; align-items: baseline; justify-content: space-between; gap: .6rem; padding: .22rem 0; border-bottom: 1px solid rgba(74, 63, 50, .45); }
.loc-main .atlas-tree li:last-child { border-bottom: 0; }
.loc-main .atlas-tree .name { min-width: 0; }
.loc-main .atlas-tree .meta { flex: 0 0 auto; color: var(--ash, #9C8F7A); font-size: .8rem; white-space: nowrap; }
/* (66) a row's toggles: the real map, the rumor map, that players know the place */
.loc-tg { flex: 0 0 26px; width: 26px; height: 24px; display: inline-flex; align-items: center; justify-content: center; padding: 0; margin: 0; background: none; border: 1px solid transparent; border-radius: 5px; color: #6e6458; cursor: pointer; position: relative; }
.loc-tg.none { visibility: hidden; }
.loc-tg:hover, .loc-tg:focus-visible { border-color: var(--iron, #4A3F32); background: rgba(232, 223, 206, .05); color: var(--vellum-2, #D9CDB6); }
.loc-tg:not(.on) { color: #75695b; background-image: linear-gradient(to top right, transparent calc(50% - .9px), #9a8c7a calc(50% - .9px), #9a8c7a calc(50% + .9px), transparent calc(50% + .9px)); background-size: 70% 70%; background-position: center; background-repeat: no-repeat; }
.loc-tg.on { background-color: rgba(232, 223, 206, .06); }
.loc-tg.on.tg-real { color: var(--ember-2, #E09550); background-color: rgba(224, 149, 80, .12); }
.loc-tg.on.tg-rumor { color: #d3b27a; background-color: rgba(211, 178, 122, .12); }
.loc-tg.on.tg-know { color: #8fc277; background-color: rgba(143, 194, 119, .12); }
.loc-tg.tg-know.k-name { color: #d39a4a; }
.loc-tg.tg-know.k-name { background-color: rgba(211, 154, 74, .12); }
.loc-tg[disabled] { opacity: .5; cursor: progress; }
/* (66) where the party is */
.loc-panel .loc-row.party-here { background: rgba(143, 194, 119, .13); box-shadow: inset 3px 0 0 #8fc277; }
.loc-panel .loc-row.party-here:hover { background: rgba(143, 194, 119, .2); }
.loc-row.party-here .loc-name { color: #e9f3df; }
.loc-row.party-in > .loc-label .loc-name::after { content: ''; display: inline-block; width: 6px; height: 6px; margin-left: .35rem; border-radius: 50%; background: #8fc277; vertical-align: middle; }
.loc-party { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 2px; color: #8fc277; font-size: .72rem; }
.loc-party b { font-weight: 600; }
/* (98) places inside places: the line of places above a place's name, its Inside choice, the places inside it */
.loc-path { margin: .3rem 0 0; color: var(--ash, #9C8F7A); font-size: .9rem; line-height: 1.4; overflow-wrap: anywhere; }
.loc-path[hidden] { display: none; }
.loc-path a { color: var(--ember-2, #E09550); text-decoration: none; }
.loc-path a:hover, .loc-path a:focus-visible { text-decoration: underline; }
.loc-path-sep { margin: 0 .1rem; color: var(--ash, #9C8F7A); }
label.loc-inside { display: flex; align-items: center; gap: .5rem; max-width: 28rem; margin: .4rem 0 0; color: var(--ash, #9C8F7A); font-size: .85rem; }
.loc-inside select { flex: 1 1 auto; width: auto; min-width: 0; padding: .2rem .4rem; background: var(--smoke, #211C17); border-radius: 4px; font-size: .88rem; text-overflow: ellipsis; }
.loc-inside select:disabled { opacity: .6; cursor: progress; }
.embed-body .page-head .loc-path { font-size: .85rem; }
.loc-subhead { display: flex; align-items: baseline; justify-content: space-between; gap: .3rem .6rem; flex-wrap: wrap; margin: 0 0 .4rem; }
.loc-main .loc-subhead h3 { margin: 0; }
.loc-subhead .btn { white-space: nowrap; }
.loc-insides > p { margin: 0; }
.loc-chip-shape.none { color: var(--ash, #9C8F7A); border-style: dashed; }
.cast-editor .loc-newlevel[hidden] { display: none; }   /* (98: the editor's labels are blocks, which showed it before a new level was chosen) */
/* (66) a character's page beside the map: no great empty frame where a portrait would be */
.embed-body .cast-side .cast-portrait { max-height: 240px; object-fit: cover; }
.embed-body .cast-side .cast-portrait-empty { width: 72px; height: 72px; aspect-ratio: auto; margin: 0 auto .4rem; border-radius: 50%; font-size: 2rem; display: grid; place-items: center; }

/* (66) The sheet beside the map (in the Cast) keeps its three columns a little narrower than the page does, so the
   floating Cast shows it as the AI side's sheet does; pinned in a narrow panel it reads top to bottom: a small
   portrait and who they are, hit points and armour class, the working tabs, then what they wear. */
@media (min-width: 961px) and (max-width: 1100px) {
  .sheet-embed .dndb-header { grid-template-columns: minmax(130px, 1fr) auto minmax(300px, 2fr); }
  .sheet-embed .dndb-topright { grid-column: auto; }
  .sheet-embed .dndb-worktabs { max-height: none; }
}
.dndb-mini-vitals { display: none; }
@media (max-width: 560px) {
  .sheet-embed .dndb-header { display: flex; flex-direction: column; align-items: stretch; text-align: left; gap: .8rem; }
  .sheet-embed .dndb-portrait-col { order: 1; flex-direction: row; align-items: center; justify-content: flex-start; gap: .5rem; }
  .sheet-embed .dndb-portrait, .sheet-embed .dndb-portrait-empty { flex: 0 0 64px; width: 64px; height: 64px; min-height: 0; border-radius: 50%; font-size: .6rem; }
  .sheet-embed .dndb-portrait-col > .imgslot { flex: 0 0 64px; width: 64px; height: 64px; min-height: 0; border-radius: 50%; }   /* (68) the portrait's picture box */
  .sheet-embed .dndb-portrait-col > .imgslot .imgslot-add > span { width: 1.9rem; height: 1.9rem; font-size: 1.2rem; }
  .sheet-embed .dndb-portrait-col .portrait-tools { flex-direction: row; }
  .sheet-embed .dndb-topright { order: 2; width: 100%; }
  .sheet-embed .dndb-header > .pd { order: 3; align-self: center; }
  .sheet-embed .dndb-identity h1 { font-size: 1.7rem; }
  .sheet-embed .dndb-mini-vitals { display: flex; gap: .4rem; margin: .35rem 0 .2rem; }
  .sheet-embed .dndb-mini-vitals > span { padding: .05rem .5rem; border: 1px solid rgba(201,119,46,.5); border-radius: 6px; font: .8rem/1.5 'IBM Plex Mono', ui-monospace, monospace; color: var(--vellum, #E8DFCE); }
  .sheet-embed .dndb-mini-vitals b { font-weight: 400; color: var(--ash, #9C8F7A); margin-right: .25rem; }
  .sheet-embed .dndb-tabs { flex-wrap: wrap; }
}

/* (68) Pictures are their own upload controls (Helper_ImageSlot): the boxes in the Cast and the Locations */
.cast-side .imgslot { border-radius: 6px; }
.cast-side .imgslot > .imgslot-empty.cast-portrait { width: 100%; }
.embed-body .cast-side .cast-portrait-slot:not(.has-img) { width: 72px; margin: 0 auto .4rem; border-radius: 50%; }
.embed-body .cast-side .cast-portrait-slot:not(.has-img) > .cast-portrait-empty { margin: 0; }
.embed-body .cast-side .loc-image-slot.has-img { margin: 0 0 .5rem; border-radius: 4px; }
.embed-body .cast-side .loc-image-slot.has-img > .loc-image { margin: 0; }
.loc-picslot { text-align: left; margin-top: .4rem; }
.loc-picslot h4, .loc-mapslot h4 { margin: 0 0 .3rem; }
.loc-image-slot-small { height: 96px; border-radius: 6px; }
.loc-image-slot-small > .cast-portrait-empty { aspect-ratio: auto; height: 100%; font-size: 2rem; border-radius: 6px; }
.loc-mapcells { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; margin: .5rem 0 .2rem; }
.loc-mapcell { display: flex; flex-direction: column; gap: .25rem; min-width: 0; }
.loc-mapcap { font: 600 .68rem/1 'IBM Plex Mono', monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--ash, #9C8F7A); }
.loc-map-slot { height: 104px; border: 1px solid var(--iron, #4A3F32); border-radius: 6px; overflow: hidden; background: #14110E; }
.loc-map-slot:not(.has-img) { border-style: dashed; }
.loc-map-slot > img { width: 100%; height: 100%; object-fit: contain; }
.loc-map-slot > .imgslot-empty { background: none; }

/* (69) An NPC's hit points and conditions open the vitals menu (Assets/JS/Helper_Vitals.js) */
.statblock .sb-hp { padding: 0 .3rem; border-radius: 4px; border-bottom: 1px dotted currentColor; }
.statblock .sb-hp:hover, .statblock .sb-hp:focus-visible { background: rgba(201, 119, 46, .14); outline: none; }
.statblock .sb-conds { margin-left: .3rem; }

/* (70) Campaign settings (campaign-settings.php): sections of rows, a label and its note on the left, the control on the right */
.set-page { max-width: 760px; }
.embed-body .set-page { padding-top: .2rem; }
.set-sec { margin-bottom: 1rem; }
.set-sec h3 { margin: 0 0 .6rem; font-family: 'IM Fell English', serif; font-weight: 400; color: var(--ember-2, #E09550); font-size: 1.25rem; }
.set-sec.danger-zone h3 { color: #E0603B; }
.set-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .4rem 1.2rem; align-items: center; padding: .6rem 0; border-top: 1px solid rgba(74, 63, 50, .6); }
.set-sec h3 + .set-row, .set-sec .set-cover + .set-row { border-top: 0; }
.set-text { min-width: 0; }
.set-text p { margin: .15rem 0 0; }
.set-label, .set-text > label { display: block; margin: 0; font: 700 1rem/1.3 Alegreya, Georgia, serif; letter-spacing: normal; text-transform: none; color: var(--vellum, #E8DFCE); }
.set-ctl { justify-self: end; max-width: 100%; }
.set-inline { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; }
.set-inline input[type=text], .set-ctl select { margin: 0; min-width: 0; }
.set-num { display: inline-flex; align-items: center; gap: .35rem; font-size: .9rem; color: var(--ash, #9C8F7A); white-space: nowrap; }   /* (101) a number of feet */
.set-num input[type=number] { width: 5.5rem; margin: 0; min-width: 0; }
.set-sight { flex-direction: column; align-items: flex-end; }   /* (101) the two distances, one above the other */
#set-name { width: 16rem; max-width: 100%; }
#set-invite { width: 19rem; max-width: 100%; font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: .8rem; }
.set-cover { max-width: 420px; margin-bottom: .4rem; }
.set-cover .cover { aspect-ratio: 16 / 7; }
.set-list { list-style: none; margin: 0 0 .4rem; padding: 0; }
.set-list li { display: flex; align-items: center; gap: .6rem; padding: .45rem 0; border-top: 1px solid rgba(74, 63, 50, .6); flex-wrap: wrap; }
.set-list li:first-child { border-top: 0; }
.set-list .set-char { flex: 1; min-width: 10rem; }
/* a switch: a checkbox drawn as a slider */
.set-switch { position: relative; display: inline-block; width: 2.9rem; height: 1.6rem; cursor: pointer; }
.set-switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.set-switch span { position: absolute; inset: 0; border-radius: 999px; background: #2a2119; border: 1px solid var(--iron, #4A3F32); transition: background .15s, border-color .15s; pointer-events: none; }
.set-switch span::after { content: ''; position: absolute; top: 2px; left: 2px; width: calc(1.6rem - 6px); height: calc(1.6rem - 6px); border-radius: 50%; background: var(--ash, #9C8F7A); transition: transform .15s, background .15s; }
.set-switch input:checked + span { background: rgba(201, 119, 46, .35); border-color: var(--ember, #C9772E); }
.set-switch input:checked + span::after { transform: translateX(1.3rem); background: var(--ember-2, #E09550); }
.set-switch input:focus-visible + span { outline: 2px solid var(--ember-2, #E09550); outline-offset: 2px; }
/* three choices side by side */
.set-seg { display: inline-flex; border: 1px solid var(--iron, #4A3F32); border-radius: 6px; overflow: hidden; }
.set-seg button { margin: 0; min-height: 0; padding: .35rem .75rem; border: 0; border-left: 1px solid var(--iron, #4A3F32); border-radius: 0; background: #1a1511; color: var(--ash, #9C8F7A); font: inherit; font-size: .88rem; cursor: pointer; }
.set-seg button:first-child { border-left: 0; }
.set-seg button.on { background: rgba(201, 119, 46, .28); color: var(--vellum, #E8DFCE); }
.set-saved { position: fixed; left: 50%; bottom: 1.2rem; transform: translate(-50%, 1rem); padding: .4rem .9rem; border-radius: 6px; background: var(--oak, #2C251E); border: 1px solid var(--ember, #C9772E); color: var(--vellum, #E8DFCE); opacity: 0; transition: opacity .2s, transform .2s; pointer-events: none; z-index: 50; }
.set-saved.on { opacity: 1; transform: translate(-50%, 0); }
@media (max-width: 600px) {
  .set-row { grid-template-columns: 1fr; }
  .set-ctl { justify-self: start; }
}
/* (71) Real campaigns: what they are, and + New campaign on the same line */
.rc-lede { display: flex; align-items: center; gap: 1rem 1.5rem; flex-wrap: wrap; }
.rc-lede p { flex: 1 1 22rem; margin: 0; }
.rc-new { flex: 0 0 auto; margin: 0; display: inline-flex; align-items: center; gap: .4rem; }
.rc-new span { font-size: 1.25em; line-height: 1; }
/* (94) + New campaign and From a campaign file… side by side; characters waiting for players; the join page's pick */
.rc-newgroup { flex: 0 0 auto; display: inline-flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.rc-newgroup .btn { margin: 0; }
#rc-import-status:empty, #set-file-status:empty { display: none; }
.set-held .badge { border-color: var(--ember, #C9772E); color: var(--ember, #C9772E); }
.set-held-note { margin: .35rem 0 .6rem; }
/* (96) players the DM removed: Unblock lets them join again */
.set-blocked .set-list { margin: 0; }
.set-blocked .set-list li { justify-content: flex-end; border-top: 0; padding: .15rem 0; }
.set-kick { color: #D08A77; }
.join-held { margin: 0 0 .4rem; padding: .7rem .9rem; border: 1px solid var(--ember, #C9772E); border-radius: 6px; }
.join-held select { width: 100%; max-width: 32rem; margin: .35rem 0; }

/* (74) a location's map beside the map, in Edit: what the map workshop did */
.loc-maptools { margin-top: .7rem; padding-top: .55rem; border-top: 1px dashed var(--iron, #4A3F32); }
.loc-maptools .btn-row { margin: 0 0 .45rem; gap: .4rem; flex-wrap: wrap; }
.loc-gridrow { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.loc-gridrow .loc-gridang { width: 5.5rem; margin: 0; padding: .25rem .4rem; }

/* (87, 88) Spawn NPCs: the settings, then On the map (Start spawning) or Straight into the Cast */
.ng-bulk { margin-top: 1rem; }
.ng-bulk h2 { margin-bottom: .4rem; }
.ng-spawn { margin: .2rem 0 .6rem; padding: .1rem .8rem .2rem; border: 1px solid var(--ember, #C9772E); border-radius: 6px; background: rgba(201, 119, 46, .07); }
.ng-spawn .ng-place .btn { min-width: 10rem; }
.ng-spawn p { margin: 0 0 .5rem; }
.ng-h { margin: .8rem 0 .2rem; font-family: 'IM Fell English', serif; font-weight: 400; color: var(--ember-2, #E09550); }
.ng-bulk .ng-row { align-items: flex-end; }
.ng-bulk .ng-row > .btn { margin: 0 0 .35rem; }
.ng-intro { margin: 0; }
.npcgen-form label { color: var(--ash, #9C8F7A); font-size: .85rem; margin: .35rem 0; }
.npcgen-form input:not([type=checkbox]):not([type=radio]), .npcgen-form select { margin-top: .2rem; }
.ng-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .4rem 1.2rem; }
.ng-what { flex: 1 1 18rem; }
.ng-all { margin-bottom: .55rem !important; }
.ng-about { margin: .2rem 0 .5rem; color: #cfc4b0; }
.ng-count { flex: 0 0 auto; }
.ng-countrow { display: flex; align-items: center; gap: .4rem; }
.ng-countrow input { width: 5rem; margin: 0 !important; }
.ng-countrow .btn { min-height: 0; white-space: nowrap; }
.ng-radios { border: 1px solid var(--iron, #4A3F32); border-radius: 4px; padding: .15rem .6rem .3rem; margin: 0; display: flex; flex-wrap: wrap; gap: 0 .9rem; }
.ng-radios legend { color: var(--ash, #9C8F7A); font-size: .78rem; padding: 0 .3rem; }
.ng-radios label { display: inline-flex; align-items: center; gap: .3rem; margin: .15rem 0; color: var(--vellum, #E8DFCE); font-size: .9rem; }
.ng-radios label.muted { color: var(--ash, #9C8F7A); }
.ng-texts label { flex: 1 1 12rem; display: block; }
.ng-texts input { display: block; width: 100%; }
.ng-checks { display: flex; flex-wrap: wrap; margin: .4rem 0 .2rem; }
.ng-checks label.muted { color: var(--ash, #9C8F7A) !important; }
.npcgen-done { margin-top: 1rem; }
.npcgen-done h2 { margin-bottom: .4rem; }
.ng-place { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .4rem 1rem; margin: .6rem 0; }
.ng-place label { margin: 0; color: var(--ash, #9C8F7A); font-size: .85rem; }
.ng-place select { width: auto; margin-top: .2rem; }
.ng-place .btn { margin: 0; }
.cq-top .btn.small { white-space: nowrap; }

/* ── (97) Factions on the Characters list, the NPC form and the sheets ──────────────────── */
/* a faction's symbol (Helper_Factions faction_symbol_html): an uploaded picture, a built-in symbol, or a coloured dot */
.fx-chip .fx-symbol, .cq-gh .fx-symbol, .cast-ghbtn .fx-symbol, .fxp .fx-symbol { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; line-height: 0; }
.fx-chip .fx-dot, .cq-gh .fx-dot, .cast-ghbtn .fx-dot, .fxp .fx-dot { border-radius: 50%; }
.fx-chip img.fx-symbol, .cq-gh img.fx-symbol, .cast-ghbtn img.fx-symbol, .fxp img.fx-symbol { border-radius: 3px; object-fit: cover; }
/* chips: someone's factions (symbol, name, their rank) */
.fx-chips { display: inline-flex; flex-wrap: wrap; gap: .3rem; vertical-align: middle; }
.fx-chip { display: inline-flex; align-items: center; gap: .3rem; max-width: 100%; padding: .05rem .55rem .05rem .3rem; border: 1px solid var(--iron, #4A3F32); border: 1px solid color-mix(in srgb, var(--fx, #9C8F7A) 55%, transparent); border-radius: 999px; background: color-mix(in srgb, var(--fx, #9C8F7A) 13%, transparent); color: var(--vellum, #E8DFCE); font-size: .8rem; line-height: 1.45; text-decoration: none; white-space: nowrap; }
a.fx-chip:hover, a.fx-chip:focus-visible { border-color: var(--fx, #C9772E); color: #fff3e0; text-decoration: none; }
.fx-chip-name { overflow: hidden; text-overflow: ellipsis; }
.fx-chip-rank { color: var(--ash, #9C8F7A); font-size: .74rem; }
.fx-chip-rank::before { content: '·'; margin-right: .3rem; }
.cast-fx { text-align: left; margin: .7rem 0 0; }
.npc-fx { display: inline-flex; align-items: center; flex-wrap: wrap; gap: .3rem .4rem; }
.npc-fx > b { color: #8f8577; font-weight: 600; }
.sheet-fx { margin: .35rem 0 .1rem; }
/* Group by: Faction · Place · None */
.cq-groupbar { margin: 0 0 .2rem; flex-wrap: wrap; }
.cq-groupby, .cast-groupby { display: inline-flex; align-items: center; gap: .45rem; }
.cq-gblabel { color: var(--ash, #9C8F7A); font-size: .78rem; white-space: nowrap; }
.cq-seg button, .cast-seg button { padding: .18rem .6rem; font-size: .8rem; line-height: 1.3; }
.cast-seg button { padding: .3rem .7rem; font-size: .85rem; }
/* a group: its header folds it */
.cq-group { margin: .35rem 0 0; }
.cq-gh, .cast-ghbtn { display: flex; align-items: center; gap: .45rem; width: 100%; min-height: 0; margin: 0; padding: .35rem .2rem .3rem; background: none; border: 0; border-radius: 4px; color: var(--ember-2, #E09550); font: 400 1.05rem/1.25 'IM Fell English', Georgia, serif; text-align: left; cursor: pointer; }
.cq-gh { border-bottom: 1px solid var(--iron, #4A3F32); border-radius: 4px 4px 0 0; }
.cq-gh:hover, .cq-gh:focus-visible, .cast-ghbtn:hover, .cast-ghbtn:focus-visible { background: rgba(232, 223, 206, .05); outline: none; }
.cq-gh:focus-visible, .cast-ghbtn:focus-visible { box-shadow: 0 0 0 2px rgba(224, 149, 80, .45); }
.cq-gh.plain .cq-gname, .cast-ghbtn.plain .cq-gname { color: var(--vellum-2, #D9CDB6); }
.cq-tw { flex: 0 0 10px; display: inline-flex; justify-content: center; color: var(--ash, #9C8F7A); }
.cq-tw::before { content: ''; border-left: 5px solid currentColor; border-top: 4px solid transparent; border-bottom: 4px solid transparent; transform: rotate(90deg); transition: transform .12s; }
.folded:not(.found) > .cq-gh .cq-tw::before, .folded:not(.found) .cast-ghbtn .cq-tw::before { transform: none; }
.cq-gname { flex: 0 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.cq-gcount { flex: 0 0 auto; margin-left: auto; min-width: 1.4rem; padding: 0 .4rem; border: 1px solid var(--iron, #4A3F32); border-radius: 999px; color: var(--ash, #9C8F7A); font: .72rem/1.45 'IBM Plex Mono', ui-monospace, monospace; text-align: center; }
.cq-group.folded:not(.found) > .cq-list { display: none; }
.cq-group[hidden], #cq-party[hidden] { display: none; }
/* a name, and their rank in this group's faction */
.cq-line { display: flex; align-items: baseline; gap: .4rem; min-width: 0; }
.cq-line .cq-name { flex: 0 1 auto; }
.cq-rank { flex: 0 1 auto; min-width: 2.5rem; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--ash, #9C8F7A); font: .74rem/1.2 Alegreya, Georgia, serif; }
/* the full page: a header row a group */
.cast-filters .cast-groupby { flex: 0 0 auto; }
.cast-table tr.cast-gh td { padding: .9rem .2rem .25rem; border-bottom: 1px solid var(--iron, #4A3F32); }
.cast-table tbody.cast-group:first-of-type tr.cast-gh td { padding-top: .35rem; }
.cast-ghbtn { font-size: 1.15rem; }
.cast-ghbtn .cq-gcount { margin-left: .2rem; }
.cast-group.folded:not(.found) tr.cast-row { display: none; }
.cast-table td.cast-fxcol { min-width: 9rem; font-size: .86rem; }
.cast-rank { margin-left: .3rem; color: var(--ash, #9C8F7A); font: .8rem Alegreya, Georgia, serif; white-space: nowrap; }
.cast-row.no-href { cursor: default; }
/* the NPC form: its factions */
.fxp { margin: .7rem 0 .5rem; padding: .45rem .7rem .55rem; border: 1px solid var(--iron, #4A3F32); border-radius: 4px; }
.fxp-label { color: var(--ash, #9C8F7A); font-size: .85rem; }
.fxp-list { list-style: none; margin: 0; padding: 0; }
.fxp-row { display: grid; grid-template-columns: minmax(7rem, 1fr) minmax(8rem, 1fr) minmax(14.5rem, 1.2fr) auto; grid-template-areas: "who rank known x"; gap: 0 .6rem; align-items: end; padding: .2rem 0 .4rem; border-bottom: 1px solid rgba(74, 63, 50, .5); }
.fxp-who { grid-area: who; display: flex; align-items: center; gap: .45rem; min-width: 0; min-height: 2.05rem; margin-bottom: .2rem; }
.fxp-name { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--vellum, #E8DFCE); font-family: 'IM Fell English', Georgia, serif; font-size: 1.05rem; }
.cast-editor .fxp-field { margin: .2rem 0; font-size: .78rem; }
.fxp-row .fxp-field:nth-of-type(1) { grid-area: rank; }
.fxp-row .fxp-field:nth-of-type(2) { grid-area: known; }
.fxp-x { grid-area: x; margin: 0 0 .3rem !important; min-width: 2rem; font-size: 1.05rem !important; line-height: 1 !important; }
.fxp-add { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-top: .5rem; }
.cast-editor .fxp-add select { width: auto; min-width: 14rem; max-width: 100%; margin: 0; }
.fxp-newbox { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.cast-editor .fxp-newbox input { width: 16rem; max-width: 100%; margin: 0; }
.fxp-newbox[hidden], .fxp-add select[hidden] { display: none; }
.fxp-none, .fxp-help { margin: .35rem 0 0; }
@media (max-width: 600px) {
  .fxp-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; grid-template-areas: "who who x" "rank known known"; }
  .fxp-x { align-self: center; margin: 0 !important; }
}
/* the NPC generator's Faction box: its hint */
.ng-hint { display: block; margin-top: .15rem; font-size: .74rem; }
.ng-row.ng-texts { align-items: flex-start; }   /* (the hint under it: the three boxes stay in line) */

/* ── (98) Place on the Characters list: places inside places, each folding (Aldhaven ▸ Market Quarter ▸ Market Square) ── */
/* beside the map: a place's header (fold it; show it on the map; its page), then its people and the places inside it */
.cq-ghrow { display: flex; align-items: center; gap: .1rem; border-bottom: 1px solid var(--iron, #4A3F32); border-radius: 4px 4px 0 0; }
.cq-ghrow > .cq-gh { flex: 1 1 auto; min-width: 0; border-bottom: 0; }
.cq-ghrow > .cq-act { flex: 0 0 26px; }
.cq-act.cq-gpage { color: var(--ash, #9C8F7A); }
.cq-act.cq-gpage:hover, .cq-act.cq-gpage:focus-visible { color: #fff3e0; }
.cq-nest > .cq-gbody { margin-left: 7px; padding-left: 6px; border-left: 1px solid rgba(74, 63, 50, .7); }   /* (the line runs down from the arrow) */
.cq-group.folded:not(.found) > .cq-gbody { display: none; }
.folded:not(.found) > .cq-ghrow > .cq-gh .cq-tw::before { transform: none; }
.cq-gbody > .cq-group { margin-top: .2rem; }
.cq-gbody > .cq-group > .cq-ghrow > .cq-gh { font-size: .98rem; padding-top: .28rem; padding-bottom: .24rem; }
.cq-gbody .cq-gbody .cq-gbody .cq-gbody { margin-left: 4px; padding-left: 4px; }   /* (very deep: a smaller step, so names still fit) */
/* the full page: a header row a place, indented as deep as it is; the places inside a folded one are hidden with it */
.cast-ghrow { display: flex; align-items: center; gap: .1rem; padding-left: calc(var(--d, 0) * 1.35rem); }
.cast-ghrow > .cast-ghbtn { flex: 0 1 auto; width: auto; min-width: 0; }   /* (its icons just after the count: the table may be wider than the screen; a click beside them folds it too) */
.cast-ghrow > .cast-ghbtn .cq-tw { min-width: 10px; }   /* (sized by its content, the button would otherwise come out a little short of its name) */
.cast-ghrow > .cq-act { flex: 0 0 26px; }
.cast-ghrow { cursor: pointer; }
.cast-table tbody.nest:not([data-up=""]) tr.cast-gh td { padding-top: .5rem; }
.cast-table tbody.nest:not([data-up=""]) .cast-ghbtn { font-size: 1.05rem; }
.cast-table tbody.cast-under { display: none; }