/* Lore Mind shared visual system — Release 1B.
   Quiet campaign archive: parchment reading surfaces, midnight navigation,
   restrained violet actions, brass highlight. Server-first; all workflows
   complete without JavaScript. */

:root {
  /* Color */
  --color-canvas: #f4f0e8;
  --color-surface: #fffdf8;
  --color-surface-muted: #ece6dc;
  --color-surface-raised: #ffffff;
  --color-ink: #241f2d;
  --color-muted: #5d5666;
  --color-faint: #7d7585;
  --color-rule: #d5cdbf;
  --color-rule-strong: #b9ad9c;
  --color-accent: #5c3a76;
  --color-accent-strong: #452858;
  --color-accent-soft: #e9deef;
  --color-accent-ink: #3c2350;
  --color-brass: #8a6420;
  --color-brass-soft: #f3e8cf;
  --color-sidebar: #231a2c;
  --color-sidebar-deep: #1b1322;
  --color-sidebar-ink: #f7f1fa;
  --color-sidebar-muted: #c9bccd;
  --color-danger: #8f2f2f;
  --color-danger-strong: #6f1f1f;
  --color-danger-soft: #f9e9e9;
  --color-success: #2f6b3a;
  --color-success-soft: #e7f2e7;
  --color-warning: #7a4a12;
  --color-warning-soft: #faf0da;
  --color-info: #2f5370;
  --color-info-soft: #e4eef5;
  --focus-ring: #7a4fa3;

  /* Spacing (4px base) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;

  /* Typography */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-serif: Georgia, "Times New Roman", serif;
  --text-compact: 13px;
  --text-nav: 15px;
  --text-body: 16px;
  --text-section: 20px;
  --text-title-compact: 24px;
  --text-title: 32px;
  --text-hero: 40px;
  --leading-body: 1.6;
  --leading-tight: 1.25;
  --measure-reading: 75ch;

  /* Layout */
  --shell-max: 1360px;
  --work-max: 1040px;
  --form-max: 760px;
  --reading-max: 720px;
  --context-col: 280px;
  --rail-width: 256px;
  --rail-width-compact: 240px;
  --topbar-height: 56px;

  /* Borders / elevation */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-pill: 999px;
  --border-thin: 1px solid var(--color-rule);
  --border-strong: 1px solid var(--color-rule-strong);
  --shadow-menu: 0 4px 16px rgba(35, 26, 44, 0.16);
  --shadow-image: 0 1px 4px rgba(35, 26, 44, 0.2);

  /* Controls */
  --control-min: 40px;
  --control-touch: 44px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--color-canvas);
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  overflow-wrap: break-word;
}

h1, h2, h3, h4 { font-family: var(--font-serif); line-height: var(--leading-tight); overflow-wrap: break-word; }
h1 { font-size: var(--text-title); margin: 0 0 var(--space-2); }
h2 { font-size: var(--text-section); margin: var(--space-8) 0 var(--space-3); }
h3 { font-size: 17px; margin: var(--space-4) 0 var(--space-2); }

a { color: var(--color-accent-strong); text-underline-offset: 2px; }
a:hover { color: var(--color-accent-ink); }
a:active { color: var(--color-accent-ink); }

:focus { outline: none; }
:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: 2px;
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.skip-link { position: absolute; left: -999px; }
.skip-link:focus {
  left: var(--space-2); top: var(--space-2);
  background: var(--color-surface); padding: var(--space-3) var(--space-4);
  z-index: 100; border: var(--border-strong); border-radius: var(--radius-sm);
}

/* ---------- Top bar (56px single row) ---------- */
.topbar {
  background: var(--color-sidebar);
  color: var(--color-sidebar-ink);
  min-height: var(--topbar-height);
}
.topbar-inner {
  max-width: var(--shell-max);
  margin: 0 auto;
  min-height: var(--topbar-height);
  padding: 0 var(--space-4);
  display: flex; gap: var(--space-4); align-items: center; flex-wrap: wrap;
}
.brand {
  color: var(--color-sidebar-ink); font-family: var(--font-serif);
  font-size: 19px; font-weight: 700; text-decoration: none; white-space: nowrap;
  min-height: var(--control-touch); display: inline-flex; align-items: center;
}
.topbar-nav { display: flex; gap: var(--space-3); align-items: center; margin-left: auto; min-width: 0; }
.topbar-nav a { color: var(--color-sidebar-ink); font-size: var(--text-nav); white-space: nowrap; }
.topbar-link { min-height: var(--control-touch); display: inline-flex; align-items: center; padding: 0 var(--space-2); }
.topbar-search { display: flex; gap: var(--space-2); align-items: center; }
.topbar-search input {
  min-height: 36px; font-size: 14px; padding: 6px 10px; width: 200px;
  border: 1px solid #85788d; border-radius: var(--radius-sm);
  background: #fff; color: var(--color-ink);
}
.topbar-search button {
  min-height: 36px; padding: 4px 12px; font-size: 14px;
  background: transparent; color: var(--color-sidebar-ink);
  border: 1px solid #85788d; border-radius: var(--radius-sm); cursor: pointer;
}
.topbar-search button:hover { background: rgba(255, 255, 255, 0.12); }
.topbar-new {
  min-height: 36px; display: inline-flex; align-items: center; padding: 4px 12px;
  background: var(--color-accent); color: #fff; border-radius: var(--radius-sm);
  font-size: 14px; font-weight: 600; text-decoration: none; white-space: nowrap;
}
.topbar-new:hover { background: var(--color-accent-strong); color: #fff; }
.account-menu { position: relative; }
.account-menu > summary {
  cursor: pointer; min-height: var(--control-touch);
  display: inline-flex; align-items: center; gap: var(--space-2);
  list-style: none; font-size: var(--text-nav);
}
.account-menu > summary::-webkit-details-marker { display: none; }
.account-avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--color-accent); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 14px; flex-shrink: 0;
}
.account-menu-items {
  position: absolute; right: 0; top: calc(100% + 4px); z-index: 50;
  background: var(--color-surface); padding: var(--space-2);
  border: var(--border-strong); border-radius: var(--radius-md);
  box-shadow: var(--shadow-menu); min-width: 220px;
}
.account-menu-items a, .account-menu-items button {
  display: flex; align-items: center; width: 100%;
  min-height: var(--control-touch); padding: var(--space-2) var(--space-3);
  color: var(--color-ink); text-decoration: none; font-size: var(--text-nav);
  background: none; border: 0; border-radius: var(--radius-sm); cursor: pointer;
  text-align: left;
}
.account-menu-items a:hover, .account-menu-items button:hover { background: var(--color-surface-muted); }
/* Closed disclosure menus keep no boxes: author display values would
   otherwise override the UA hiding and leak absolutely-positioned
   menu content into the page scroll overflow (seen at 200% zoom). */
details:not([open]) > .account-menu-items,
details:not([open]) > .menu-items,
details:not([open]) > .mobile-nav-body { display: none; }

/* ---------- Campaign shell ---------- */
.campaign-shell {
  display: grid; grid-template-columns: var(--rail-width) minmax(0, 1fr);
  max-width: var(--shell-max); margin: 0; align-items: start;
}
.sidebar {
  background: var(--color-sidebar); color: var(--color-sidebar-ink);
  padding: var(--space-4) var(--space-3);
  position: sticky; top: 0; align-self: start;
  min-height: calc(100vh - var(--topbar-height));
  font-size: var(--text-nav);
  display: flex; flex-direction: column;
}
.sidebar a { color: var(--color-sidebar-ink); text-decoration: none; }
.sidebar-campaign-name {
  font-family: var(--font-serif); font-size: 18px; font-weight: 700;
  margin: 0 0 2px; line-height: 1.3;
}
.sidebar-campaign-name a { display: block; padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm); }
.switcher { margin: 0 0 var(--space-2); }
.switcher summary {
  cursor: pointer; min-height: var(--control-touch);
  display: inline-flex; align-items: center;
  color: var(--color-sidebar-muted); font-size: 14px; padding: 0 var(--space-2);
}
.switcher nav { padding: var(--space-1) 0; }
.switcher nav a { display: block; padding: var(--space-2); font-size: 14px; border-radius: var(--radius-sm); }
.switcher nav a:hover { background: rgba(255, 255, 255, 0.08); }
.nav-group { margin-top: var(--space-4); }
.nav-group-label {
  margin: 0 0 var(--space-1); padding: 0 var(--space-2);
  color: #aa9caf; font-size: 11px; font-weight: 700; letter-spacing: 0.12em;
}
.nav-group nav { display: grid; gap: 1px; }
.nav-item {
  display: flex; gap: var(--space-2); align-items: center;
  min-height: var(--control-touch); padding: var(--space-2);
  border-radius: var(--radius-sm); font-size: var(--text-nav);
}
.nav-item:hover { background: rgba(255, 255, 255, 0.08); }
.nav-item:active { background: rgba(255, 255, 255, 0.14); }
.nav-item[aria-current="page"] { background: var(--color-accent); font-weight: 600; }
.nav-type-icon { flex-shrink: 0; opacity: 0.9; }
.campaign-access {
  margin-top: var(--space-6); padding-top: var(--space-3);
  border-top: 1px solid #4b3e55; font-size: 14px; color: var(--color-sidebar-muted);
}
.campaign-access a { color: var(--color-sidebar-ink); display: inline-flex; min-height: var(--control-touch); align-items: center; }
/* Owner/admin campaign settings pinned to the sidebar bottom so the
   name/description/cover editor is always one obvious step away. */
.sidebar-settings {
  margin-top: auto; padding-top: var(--space-3);
  border-top: 1px solid #4b3e55;
}
.sidebar-settings .nav-item { font-weight: 600; }

/* Mobile campaign disclosure: same destinations, native details */
.mobile-nav { display: none; margin: var(--space-3) var(--space-4) 0; }
.mobile-nav > summary {
  min-height: var(--control-touch); background: var(--color-surface);
  border: var(--border-thin); border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3); cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-2);
  font-weight: 600;
}
.mobile-nav-body { background: var(--color-surface); border: var(--border-thin); border-top: 0; border-radius: 0 0 var(--radius-md) var(--radius-md); padding: var(--space-2) var(--space-3); }
.mobile-nav-body a {
  display: flex; align-items: center; min-height: var(--control-touch);
  padding: var(--space-1) var(--space-2); color: var(--color-ink);
}
.mobile-nav-group-label { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; color: var(--color-muted); margin: var(--space-3) 0 0; }

/* ---------- Content widths ---------- */
.content { padding: var(--space-6) var(--space-4) var(--space-16); min-width: 0; max-width: var(--work-max); }
.content-wide { max-width: var(--work-max); margin: 0 auto; }
.content-narrow { max-width: var(--form-max); }
.reading-column { max-width: var(--reading-max); }

/* ---------- Page anatomy ---------- */
.breadcrumb { color: var(--color-muted); font-size: 14px; margin: 0 0 var(--space-2); }
.breadcrumb a { color: var(--color-muted); }
.page-header {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: var(--space-4); margin-bottom: var(--space-6); flex-wrap: wrap;
}
.page-header-text { min-width: 0; }
.page-header h1 { font-size: var(--text-title); }
.lede { color: var(--color-muted); max-width: var(--measure-reading); margin: var(--space-1) 0 0; }
.result-count { color: var(--color-muted); font-size: var(--text-nav); margin: var(--space-2) 0; }
.action-group { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; flex-shrink: 0; }
.section-heading { border-bottom: var(--border-thin); padding-bottom: var(--space-2); }
.section-heading-row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); flex-wrap: wrap; }

/* ---------- Buttons ---------- */
.button {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: var(--control-touch); padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-sm); border: 1px solid transparent;
  text-decoration: none; cursor: pointer; font-size: var(--text-body); font-weight: 600;
  line-height: 1.3; white-space: nowrap;
}
.button-primary { background: var(--color-accent); color: #fff; }
.button-primary:hover { background: var(--color-accent-strong); color: #fff; }
.button-primary:active { background: var(--color-accent-ink); color: #fff; }
.button-secondary { background: var(--color-surface); border-color: var(--color-rule-strong); color: var(--color-ink); }
.button-secondary:hover { background: var(--color-surface-muted); color: var(--color-ink); }
.button-secondary:active { background: #ddd4c6; }
.button-quiet { background: transparent; border-color: transparent; color: var(--color-accent-strong); }
.button-quiet:hover { background: var(--color-accent-soft); }
.button-danger { background: var(--color-danger); color: #fff; }
.button-danger:hover { background: var(--color-danger-strong); color: #fff; }
.button-small { min-height: var(--control-touch); padding: var(--space-1) var(--space-3); font-size: 14px; }
.button[disabled], .button[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }
.button-icon { width: 16px; height: 16px; flex-shrink: 0; }

/* Native details menus (never hover-only) */
.menu { position: relative; display: inline-block; }
.menu > summary {
  list-style: none; cursor: pointer; min-height: var(--control-touch);
  display: inline-flex; align-items: center; gap: var(--space-1);
  padding: var(--space-2) var(--space-3); border: var(--border-strong);
  border-radius: var(--radius-sm); background: var(--color-surface); font-weight: 600;
}
.menu > summary::-webkit-details-marker { display: none; }
.menu-items {
  position: absolute; z-index: 40; min-width: 220px; right: 0;
  background: var(--color-surface-raised); border: var(--border-strong);
  border-radius: var(--radius-md); box-shadow: var(--shadow-menu); padding: var(--space-2);
}
.menu-items a, .menu-items button {
  display: flex; width: 100%; min-height: var(--control-touch); align-items: center;
  padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm);
  color: var(--color-ink); text-decoration: none; background: none; border: 0;
  font-size: var(--text-nav); cursor: pointer; text-align: left;
}
.menu-items a:hover, .menu-items button:hover { background: var(--color-surface-muted); }

/* ---------- Forms & validation ---------- */
.form-narrow { max-width: var(--form-max); }
.form-section {
  background: var(--color-surface); border: var(--border-thin);
  border-radius: var(--radius-md); padding: var(--space-4) var(--space-4) var(--space-2);
  margin: 0 0 var(--space-4);
}
.form-section > h2 { margin-top: 0; font-size: var(--text-section); }
.form-section-intro { color: var(--color-muted); margin-top: calc(-1 * var(--space-2)); }
.field { margin: var(--space-3) 0; }
.field > label { display: block; font-weight: 600; margin-bottom: var(--space-1); }
.field input[type="text"], .field input[type="search"], .field input[type="email"],
.field input[type="password"], .field input[type="number"], .field input[type="date"],
.field select, .field textarea,
.filter-bar input, .filter-bar select {
  width: 100%; max-width: 560px; min-height: var(--control-touch);
  font-size: var(--text-body); font-family: var(--font-sans);
  padding: var(--space-2) var(--space-3);
  border: var(--border-strong); border-radius: var(--radius-sm); background: #fff; color: var(--color-ink);
}
.field input[aria-invalid="true"], .field select[aria-invalid="true"], .field textarea[aria-invalid="true"] {
  border-color: var(--color-danger); border-width: 2px;
}
.field input[type="checkbox"] { width: 24px; height: 24px; accent-color: var(--color-accent); }
.field input[type="file"] { font-size: var(--text-nav); }
.field textarea { line-height: var(--leading-body); resize: vertical; }
.field-required { color: var(--color-danger); font-weight: 600; }
.help { color: var(--color-muted); font-size: 14px; margin: var(--space-1) 0 0; max-width: var(--measure-reading); }
.char-count { color: var(--color-muted); font-size: var(--text-compact); }
.field-check { display: flex; gap: var(--space-2); align-items: center; }
.field-check label { font-weight: 400; }
fieldset { border: var(--border-thin); border-radius: var(--radius-md); margin: var(--space-4) 0; padding: var(--space-3) var(--space-4); background: var(--color-surface); }
legend { padding: 0 var(--space-2); font-weight: 700; font-family: var(--font-serif); }
.form-actions {
  display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap;
  padding-top: var(--space-4); margin-top: var(--space-4);
  border-top: var(--border-thin);
}
.form-actions-sticky { position: sticky; bottom: 0; background: var(--color-surface); padding: var(--space-3) 0; }
.error-summary {
  border: 2px solid var(--color-danger); border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4); background: var(--color-danger-soft); margin: var(--space-4) 0;
}
.error-summary h2 { margin-top: 0; font-size: 19px; }
.error-summary ul { margin-bottom: 0; padding-left: 20px; }
.error-summary a { color: var(--color-danger-strong); }
.field-errors { list-style: none; padding: 0; margin: var(--space-1) 0 0; color: var(--color-danger); font-size: 15px; font-weight: 600; }
.field-errors li::before { content: "⚠ "; }

/* ---------- Filters & chips ---------- */
.filter-bar {
  display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: end;
  margin: var(--space-3) 0; background: var(--color-surface);
  border: var(--border-thin); border-radius: var(--radius-md); padding: var(--space-3);
}
.filter-field { display: grid; gap: 2px; }
.filter-field > label { font-size: 13px; font-weight: 700; color: var(--color-muted); }
.filter-field input, .filter-field select { width: auto; min-width: 140px; }
.filter-chips { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; margin: var(--space-2) 0; min-height: 32px; }
.filter-chip {
  display: inline-flex; gap: var(--space-2); align-items: center;
  background: var(--color-accent-soft); color: var(--color-accent-ink);
  border: 1px solid var(--color-accent); border-radius: var(--radius-pill);
  padding: 4px 6px 4px 12px; font-size: 14px; font-weight: 600;
  min-height: var(--control-touch);
}
.filter-chip a {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: var(--control-touch); min-height: 32px; padding: 0 var(--space-2);
  border-radius: var(--radius-pill); color: var(--color-accent-ink); font-weight: 700;
}
.filter-chip a:hover { background: rgba(69, 40, 88, 0.15); }
.filter-clear { font-size: 14px; min-height: var(--control-touch); display: inline-flex; align-items: center; }
.mobile-filter > summary {
  min-height: var(--control-touch); cursor: pointer; font-weight: 700;
  display: flex; align-items: center;
}

/* ---------- Rows (compact/detailed responsive) ---------- */
.row-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-2); }
.entity-row, .campaign-row, .result-row {
  display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; gap: var(--space-3);
  background: var(--color-surface); border: var(--border-thin);
  border-radius: var(--radius-md); padding: var(--space-3); align-items: start;
}
.entity-row:hover, .campaign-row:hover, .result-row:hover { border-color: var(--color-rule-strong); }
.row-thumb { width: 72px; height: 72px; border-radius: var(--radius-sm); overflow: hidden; flex-shrink: 0; box-shadow: var(--shadow-image); }
.row-thumb img { width: 72px; height: 72px; object-fit: cover; display: block; }
.entity-list-thumb {
  height: auto; max-height: 144px; display: flex; align-items: flex-start;
  justify-content: center; background: var(--color-surface-muted);
}
.entity-list-thumb img {
  width: 100%; height: auto; max-height: 144px; object-fit: contain;
  object-position: center; display: block;
}
.thumb-placeholder, .tile-placeholder, .detail-placeholder {
  display: flex; align-items: center; justify-content: center;
  background: var(--color-surface-muted); color: var(--color-muted); font-family: var(--font-serif);
}
.thumb-placeholder { width: 72px; height: 72px; font-size: 24px; border-radius: var(--radius-sm); }
.row-main { min-width: 0; }
.row-title { font-size: 17px; font-weight: 700; margin: 0; line-height: 1.35; }
.row-title a { color: var(--color-ink); text-decoration: none; display: inline-flex; align-items: center; min-height: var(--control-touch); }
.row-title a:hover { color: var(--color-accent-strong); text-decoration: underline; }
.row-meta { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; margin: var(--space-1) 0; }
.row-summary { margin: var(--space-1) 0; color: var(--color-ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.row-updated { color: var(--color-muted); font-size: var(--text-compact); white-space: nowrap; }
/* Dashboard entry thumbnails (plan 14): fixed square canvas, whole image
   visible via contain on a neutral letterbox. Scoped to dashboard rows
   only; lists keep .entity-list-thumb, search/featured/detail keep cover. */
.row-thumb.dashboard-entry-thumb {
  background: var(--color-surface-muted);
  display: flex;
  align-items: center;
  justify-content: center;
}
.row-thumb.dashboard-entry-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}
/* Recently-updated attribution may wrap on narrow screens; compact
   date-only rows elsewhere keep their nowrap rule. */
.row-updated.recent-attribution { white-space: normal; }
/* Overview activity rows (Continue / Recently updated): the attribution and
   Continue status live inside .row-main beneath the badge, never in the
   shared .entity-row third auto column. Scoped to the Overview work sections
   only; entity-list, search-result, map, and Needs details rows keep the
   shared three-column treatment. */
.overview-work-section .entity-row { grid-template-columns: 72px minmax(0, 1fr); }
.overview-work-section .row-main { min-width: 0; }
.overview-work-section .row-activity.row-updated {
  display: block;
  min-width: 0;
  margin: var(--space-1) 0 0;
  white-space: normal;
  overflow-wrap: anywhere;
}
/* Compact list-filter hierarchy: primary search/sort row, in-flow More
   filters panel, separate list-tools navigation (not filter chips). */
.list-filter { align-items: end; }
.list-filter .filter-search { flex: 1 1 240px; }
.list-filter .filter-search input { width: 100%; }
.list-more-filters { flex: 0 0 auto; }
.list-more-filters > summary {
  min-height: var(--control-touch);
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  font-weight: 700;
}
.more-filters-fields {
  display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: end;
  padding-top: var(--space-2);
}
.needs-toggle.is-active {
  border-width: 2px;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.list-tools {
  display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center;
  margin: var(--space-2) 0;
  color: var(--color-muted); font-size: 14px;
}
.list-tools-label { font-weight: 700; }
@media (min-width: 640px) {
  /* Wide desktop: the closed form fits Search, Sort, Needs details, the
     More filters summary, and Apply on one compact primary row. When
     open, the disclosure dissolves into the form flex flow so its
     summary stays in the primary row while only the Type/Tag/Status
     fields wrap onto an in-flow secondary row. Native <details>
     toggle, DOM/focus order, and no-JS operation are unchanged. */
  .list-more-filters[open] { display: contents; }
  .list-more-filters[open] > .more-filters-fields { flex: 1 0 100%; order: 10; }
}
@media (max-width: 639px) {
  .list-more-filters { flex-basis: 100%; }
  .list-filter .filter-field, .more-filters-fields .filter-field { flex-basis: 100%; }
  .list-filter .filter-field input, .list-filter .filter-field select,
  .more-filters-fields .filter-field input, .more-filters-fields .filter-field select {
    width: 100%;
  }
  .list-filter .needs-toggle, .list-filter button[type="submit"] { min-height: var(--control-touch); }
}
/* ---------- Badges ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 10px; border-radius: var(--radius-pill);
  font-size: 13px; font-weight: 600; border: 1px solid var(--color-rule-strong);
  line-height: 1.6; white-space: nowrap;
}
.badge-type { background: var(--color-accent-soft); border-color: var(--color-accent); color: var(--color-accent-ink); }
.badge-role { background: var(--color-surface-muted); color: var(--color-ink); }
.badge-tag {
  background: var(--color-surface-muted); text-decoration: none; color: var(--color-ink);
  font-size: 12px; font-weight: 500; padding: 1px 8px; line-height: 1.4;
}
a.badge-tag:hover { background: #ddd4c6; color: var(--color-ink); }
.badge-stub { background: var(--color-brass-soft); border: 1px dashed var(--color-brass); color: #5e4413; }
.badge-status { background: var(--color-info-soft); border-color: var(--color-info); color: var(--color-info); }
.badge-count { background: var(--color-surface-muted); font-variant-numeric: tabular-nums; }
/* Linked badges are controls: keep them at touch size, except tag pills
   which stay visually slim and expand only their hit area (same approach
   as .map-pin::after). */
a.badge:not(.badge-tag) { min-height: var(--control-touch); display: inline-flex; align-items: center; }
a.badge-tag { min-height: 0; position: relative; }
a.badge-tag::after {
  content: ""; position: absolute; inset: -10px -2px;
}
.type-icon { vertical-align: -3px; }

/* ---------- Feedback states ---------- */
.flashes { display: grid; gap: var(--space-2); margin-bottom: var(--space-4); }
.flash {
  padding: var(--space-3) var(--space-4); border-radius: var(--radius-md);
  border: 1px solid var(--color-rule-strong); background: var(--color-surface);
  border-left-width: 6px; margin: 0;
}
.flash-success { border-left-color: var(--color-success); background: var(--color-success-soft); }
.flash-danger { border-left-color: var(--color-danger); background: var(--color-danger-soft); }
.flash-warning { border-left-color: var(--color-warning); background: var(--color-warning-soft); }
.flash-info, .flash-message { border-left-color: var(--color-info); background: var(--color-info-soft); }
.notice {
  border: var(--border-thin); border-left: 6px solid var(--color-info);
  background: var(--color-surface); border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4); margin: var(--space-4) 0;
}
.warning, .notice-warning {
  background: var(--color-warning-soft); border: 1px solid var(--color-warning);
  border-left-width: 6px; padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md); margin: var(--space-4) 0;
}
.danger-note {
  background: var(--color-danger-soft); border: 1px solid var(--color-danger);
  border-left-width: 6px; padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md); margin: var(--space-4) 0;
}
.inline-status { display: flex; gap: var(--space-2); align-items: center; color: var(--color-muted); font-size: var(--text-nav); }
.spinner {
  width: 20px; height: 20px; border: 3px solid var(--color-rule);
  border-top-color: var(--color-accent); border-radius: 50%;
  animation: lm-spin 0.9s linear infinite; flex-shrink: 0;
}
@keyframes lm-spin { to { transform: rotate(360deg); } }

/* ---------- Empty states ---------- */
.empty-state {
  border: 2px dashed var(--color-rule-strong); border-radius: var(--radius-md);
  padding: var(--space-8) var(--space-6); background: var(--color-surface);
  margin: var(--space-4) 0; text-align: left;
}
.empty-state h2 { margin-top: 0; }
.empty-state p:last-child { margin-bottom: 0; }

/* ---------- Pagination (page numbers + first/last) ---------- */
.pagination {
  display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap;
  margin: var(--space-4) 0;
}
.pagination a, .pagination span.page-current {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: var(--control-touch); min-height: var(--control-touch); padding: 0 var(--space-3);
  border: var(--border-strong); border-radius: var(--radius-sm);
  background: var(--color-surface); text-decoration: none; color: var(--color-ink);
  font-weight: 600; font-size: var(--text-nav);
}
.pagination a:hover { background: var(--color-surface-muted); }
.pagination span.page-current { background: var(--color-accent); border-color: var(--color-accent); color: #fff; }
.pagination .page-gap { border: 0; background: none; min-width: 0; }
.pagination-status { color: var(--color-muted); font-size: 14px; width: 100%; }

/* ---------- Confirmation / destructive pages ---------- */
.confirm-panel { max-width: var(--form-max); }
.impact-list { background: var(--color-surface); border: var(--border-thin); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); }
.impact-list li { margin: var(--space-1) 0; }
.danger-zone { border-top: 2px solid var(--color-danger); margin-top: var(--space-8); padding-top: var(--space-4); }

/* ---------- Campaign overview ----------
   The overview keeps useful work in the primary column and reserves a
   compact context rail for campaign-level material.  The rail only becomes
   a second column when the campaign shell leaves enough room for it. */
.overview-layout { display: grid; gap: var(--space-8); }
.overview-main, .overview-context, .overview-work-section { min-width: 0; }
.overview-description { margin: calc(-1 * var(--space-2)) 0 var(--space-6); }
.overview-description .lede { margin: 0; }
.overview-section { margin: 0 0 var(--space-8); }
.overview-section > .section-heading-row { margin-bottom: var(--space-3); }
.overview-section > .section-heading-row .section-heading { margin: 0; flex: 1 1 auto; }
.overview-guide { margin: 0 0 var(--space-8); }
.overview-type-rail {
  list-style: none; padding: 0; margin: 0; display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  background: var(--color-surface); border: var(--border-thin);
  border-radius: var(--radius-md); overflow: hidden;
}
.overview-type-rail li { min-width: 0; border-right: var(--border-thin); border-bottom: var(--border-thin); }
.overview-type-rail li:nth-child(6n) { border-right: 0; }
.overview-type-rail li:nth-last-child(-n+6) { border-bottom: 0; }
.overview-type-rail a {
  display: flex; flex-direction: column; justify-content: center; gap: 2px;
  min-height: 76px; padding: var(--space-3); color: var(--color-ink);
  text-decoration: none;
}
.overview-type-rail a:hover { background: var(--color-surface-muted); }
.overview-type-rail .type-count-num { font-size: 23px; }
.overview-work-grid { display: grid; gap: var(--space-8); margin-bottom: var(--space-8); }
.overview-work-section > .section-heading { margin-top: 0; }
.overview-work-section .row-list { gap: var(--space-2); }
.overview-needs { margin-bottom: 0; }
.overview-context { display: grid; gap: var(--space-6); align-content: start; }
.overview-context-section { min-width: 0; border-top: var(--border-thin); padding-top: var(--space-4); }
.overview-context-section:first-child { border-top: 0; padding-top: 0; }
.overview-context-section .section-heading { margin: 0 0 var(--space-3); }
.overview-cover { margin: 0; }
.overview-cover-media {
  width: 100%; height: 220px; display: flex; align-items: center; justify-content: center;
  overflow: hidden; background: var(--color-surface-muted);
  border-radius: var(--radius-md); box-shadow: var(--shadow-image);
}
.overview-cover-media img {
  width: 100%; height: 100%; object-fit: contain; object-position: center; display: block;
}
.overview-cover figcaption { color: var(--color-muted); font-size: var(--text-compact); margin-top: var(--space-2); }
.overview-featured-map { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: var(--space-3); align-items: start; }
.overview-map-thumb {
  width: 88px; height: 88px; display: flex; align-items: center; justify-content: center;
  overflow: hidden; background: var(--color-surface-muted); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-image);
}
.overview-map-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.overview-member-count { font-size: 19px; font-weight: 700; margin: 0; }
.overview-member-count a { color: var(--color-ink); }
.overview-context p:last-child { margin-bottom: 0; }
@media (min-width: 640px) and (max-width: 1199px) {
  .overview-type-rail { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .overview-type-rail li:nth-child(6n) { border-right: var(--border-thin); }
  .overview-type-rail li:nth-child(3n) { border-right: 0; }
  .overview-type-rail li:nth-last-child(-n+6) { border-bottom: var(--border-thin); }
  .overview-type-rail li:nth-last-child(-n+3) { border-bottom: 0; }
  .overview-context { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
  .overview-work-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1200px) {
  .overview-layout { grid-template-columns: minmax(0, 1fr) var(--context-col); align-items: start; }
  .overview-context { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 639px) {
  .overview-type-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .overview-type-rail li:nth-child(6n), .overview-type-rail li:nth-child(3n) { border-right: var(--border-thin); }
  .overview-type-rail li:nth-child(2n) { border-right: 0; }
  .overview-type-rail li:nth-last-child(-n+6), .overview-type-rail li:nth-last-child(-n+3) { border-bottom: var(--border-thin); }
  .overview-type-rail li:nth-last-child(-n+2) { border-bottom: 0; }
}

/* ---------- Type counts / chooser cards ---------- */
.type-counts { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); }
.type-counts a {
  display: block; background: var(--color-surface); border: var(--border-thin);
  border-radius: var(--radius-md); padding: var(--space-3); text-decoration: none; color: var(--color-ink);
  min-height: var(--control-touch);
}
.type-counts a:hover { border-color: var(--color-accent); }
.type-count-num { font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; display: block; }
.type-count-label { color: var(--color-muted); font-size: 14px; }
.member-list { list-style: none; padding: 0; margin: 0; display: grid; }
.member-list > li {
  background: var(--color-surface); border-bottom: var(--border-thin);
  padding: var(--space-3); display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap;
}
.member-list > li:first-child { border-top: var(--border-thin); border-radius: var(--radius-md) var(--radius-md) 0 0; }
.member-list > li:last-child { border-radius: 0 0 var(--radius-md) var(--radius-md); border-bottom: var(--border-thin); }
.avatar {
  width: 36px; height: 36px; border-radius: 50%; background: var(--color-accent-soft);
  color: var(--color-accent-ink); display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; flex-shrink: 0;
}
.inline-form { display: inline-flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; }
.inline-form select { min-height: var(--control-touch); font-size: var(--text-body); }

/* ---------- Detail / prose ---------- */
.detail-grid { display: grid; grid-template-columns: minmax(0, 1fr) var(--context-col); gap: var(--space-6); align-items: start; }
.detail-grid img { max-width: 100%; height: auto; border-radius: var(--radius-md); box-shadow: var(--shadow-image); }
.detail-placeholder { width: 100%; min-height: 240px; font-size: 48px; border-radius: var(--radius-md); }
.prose { white-space: pre-wrap; overflow-wrap: anywhere; max-width: var(--measure-reading); }
.prose table { border-collapse: collapse; max-width: 100%; }
.summary { font-family: var(--font-serif); font-size: 19px; line-height: 1.5; max-width: var(--measure-reading); }
.metadata { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2) var(--space-4); }
.metadata dt { font-weight: 700; font-size: 14px; color: var(--color-muted); }
.metadata dd { margin: 0 0 var(--space-2); overflow-wrap: anywhere; }
.relation-rows { list-style: none; padding: 0; display: grid; gap: var(--space-2); }
.relation-rows li { background: var(--color-surface); border: var(--border-thin); border-radius: var(--radius-md); padding: var(--space-2) var(--space-3); overflow-wrap: anywhere; }
.tag-row { display: flex; flex-wrap: wrap; gap: var(--space-1); margin: var(--space-2) 0; }
img { max-width: 100%; height: auto; }
.muted { color: var(--color-muted); }
.hero { padding: var(--space-12) 0; max-width: var(--work-max); }
.hero h1 { font-size: var(--text-hero); max-width: 16ch; }

/* Link picker enhancement */
.link-combo { margin: var(--space-1) 0 var(--space-2); }
.link-combo-row { display: flex; gap: var(--space-2); align-items: center; }
.link-combo-row[hidden], .link-pill-row[hidden], .link-results[hidden],
.link-type-row[hidden], .link-type-slot[hidden], .link-manual[hidden] { display: none; }
.link-search { flex: 1 1 auto; min-width: 0; }
.link-type-row { display: flex; gap: var(--space-2); align-items: center; margin-top: var(--space-1); }
.link-type-slot { display: inline-flex; gap: var(--space-1); align-items: center; white-space: nowrap; }
.link-results {
  border: var(--border-strong); border-radius: var(--radius-md); margin-top: var(--space-1);
  max-height: 240px; overflow-y: auto; background: var(--color-surface-raised); box-shadow: var(--shadow-menu);
}
.link-option {
  display: block; width: 100%; text-align: left; padding: var(--space-2) var(--space-3);
  background: none; border: 0; border-bottom: var(--border-thin);
  cursor: pointer; font-size: var(--text-body); min-height: var(--control-touch);
}
.link-option:last-child { border-bottom: 0; }
.link-option.active { background: var(--color-accent-soft); }
.link-option[aria-selected="true"] { background: var(--color-accent-soft); font-weight: 600; }
.link-add { font-style: italic; }
.link-pill-row { display: flex; gap: var(--space-2); align-items: center; margin-top: var(--space-1); }
.link-pill { font-size: 14px; }
.tag-tokens { display: flex; flex-wrap: wrap; gap: var(--space-1); margin-top: var(--space-1); }

/* Plural Memberships checkbox control (P3 native fallback + filter) */
.checkbox-list {
  display: flex; flex-direction: column; gap: var(--space-1);
  max-height: 240px; overflow-y: auto;
  border: var(--border-thin); border-radius: var(--radius-md);
  padding: var(--space-2); background: var(--color-surface);
}
.checkbox-row {
  display: flex; gap: var(--space-2); align-items: center;
  min-height: var(--control-touch); cursor: pointer;
}
.checkbox-row input[type="checkbox"] { width: 20px; height: 20px; flex: none; }
.checkbox-row[hidden] { display: none; }

/* Drop target for images */
.drop-target {
  border: 2px dashed var(--color-rule-strong); border-radius: var(--radius-md);
  padding: var(--space-4); background: var(--color-surface); text-align: left;
}
.drop-target.dragging { border-color: var(--color-accent); background: var(--color-accent-soft); }

/* Highlight for search matches */
mark { background: #f5df9a; color: inherit; padding: 0 1px; border-radius: 2px; }
.match-reason { color: var(--color-brass); font-size: var(--text-compact); font-weight: 700; letter-spacing: 0.04em; }

/* Copy-link + viewer */
.copy-feedback { color: var(--color-success); font-size: 14px; font-weight: 600; }
dialog.image-viewer { border: var(--border-strong); border-radius: var(--radius-md); padding: var(--space-2); max-width: min(92vw, 1100px); }
dialog.image-viewer img { max-width: 100%; height: auto; display: block; }
dialog.image-viewer::backdrop { background: rgba(27, 19, 34, 0.7); }

/* Responsive behavior */
@media (min-width: 640px) and (max-width: 899px) {
  .type-counts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .metadata { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 900px) and (max-width: 1199px) {
  .campaign-shell { grid-template-columns: var(--rail-width-compact) minmax(0, 1fr); }
}
@media (min-width: 1200px) {
  .campaign-shell { grid-template-columns: var(--rail-width) minmax(0, 1fr); }
}
@media (max-width: 899px) {
  .campaign-shell { grid-template-columns: minmax(0, 1fr); }
  .sidebar { display: none; }
  .mobile-nav { display: block; }
  .detail-grid { grid-template-columns: minmax(0, 1fr); }
  .content { padding: var(--space-4) var(--space-4) var(--space-12); }
  .page-header h1 { font-size: var(--text-title-compact); }
  .topbar-search input { width: 120px; }
  .type-counts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 639px) {
  .entity-row, .campaign-row, .result-row { grid-template-columns: 56px minmax(0, 1fr); }
  /* Overview activity rows keep the phone thumbnail size; the desktop
     scoped two-column rule above must not win back 72px here. */
  .overview-work-section .entity-row { grid-template-columns: 56px minmax(0, 1fr); }
  .row-thumb, .thumb-placeholder, .row-thumb img { width: 56px; height: 56px; }
  .entity-list-thumb { height: auto; max-height: 112px; }
  .entity-list-thumb img { height: auto; max-height: 112px; }
  .overview-cover-media { height: 160px; }
  .row-updated { grid-column: 2; }
  .page-header { display: block; }
  .page-header .action-group { margin-top: var(--space-3); }
  .topbar-inner { padding: 0 var(--space-3); gap: var(--space-2); flex-wrap: wrap; row-gap: var(--space-1); }
  /* The nav row itself must wrap too, or its nowrap links push past
     the viewport at high zoom instead of stacking. */
  .topbar-nav { flex-wrap: wrap; row-gap: var(--space-1); }
  /* Creation stays reachable via the campaign menu + page headers. */
  .topbar-new { display: none; }
  .topbar-search input { display: none; }
  .topbar-search button { min-height: var(--control-touch); }
  h1 { font-size: var(--text-title-compact); }
  .hero h1 { font-size: 31px; }
  .metadata { grid-template-columns: minmax(0, 1fr); }
  .filter-field input, .filter-field select { min-width: 0; }
}
@media (max-width: 380px) {
  .topbar-inner { gap: var(--space-1); padding: 0 var(--space-2); }
  .brand { font-size: 16px; }
  .topbar-link { padding: 0 var(--space-1); font-size: 14px; }
  .topbar-nav { gap: var(--space-1); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}
@media print {
  .topbar, .sidebar, .mobile-nav, .form-actions, .action-group { display: none; }
  body { background: #fff; }
}

/* ---------- Map detail page (decision 0007) ----------
   Single-column logical flow: compact identity/actions, map stage,
   longer description, filters/selected pin, pin list, incoming links,
   metadata, danger zone. The stage keeps primary-content width on
   desktop and stacks in the same DOM order on phones; never reorder
   visually. */
.map-detail { display: grid; gap: var(--space-6); }
.map-detail > * { min-width: 0; }
.map-detail-text { max-width: var(--reading-max); }
/* ---------- Interactive maps (decision 0007) ----------
   Positioned DOM stage: the protected base image plus native marker
   links. Static percentage positioning is the no-JavaScript fallback;
   zoom/pan/drag only enhance it. */
.map-toolbar { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-bottom: var(--space-2); }
/* Zoom/reset need scripting; the template renders the toolbar hidden
   and the map enhancement reveals it only after initializing. */
.map-toolbar[hidden] { display: none; }
.map-status { min-height: 24px; font-size: 14px; color: var(--color-muted); margin: var(--space-1) 0; }
.map-status[data-state="pending"] { color: var(--color-info); }
.map-status[data-state="error"] { color: var(--color-danger); font-weight: 600; }
.map-stage {
  position: relative; overflow: hidden; border: var(--border-strong);
  border-radius: var(--radius-md); background: #14101a;
  /* Normal vertical page scroll and browser zoom by default; scripting
     captures gestures only while actually zoomed (data-zoomed). */
  touch-action: pan-y pinch-zoom; max-width: 100%;
}
.map-stage[data-zoomed="1"] { touch-action: none; }
/* Editor markers need touch dragging; viewer markers stay plain links
   so touch scrolling over them keeps working. */
.map-pin[data-draggable] { touch-action: none; }
.map-canvas { position: relative; transform-origin: 0 0; width: 100%; }
.map-canvas img[data-map-image] {
  display: block; width: 100%; height: auto; border-radius: 0; box-shadow: none;
  user-select: none; -webkit-user-drag: none;
}
/* Map markers are small uniform teardrops pointing down. The 20px visual
   keeps map clutter low; category is carried by color plus the accessible
   name, pin-list badge, and selected-pin panel (no longer by marker
   shape/glyph). Fill is slightly translucent so map detail shows through;
   the solid fallback keeps older browsers on the opaque color. */
.map-pin {
  position: absolute; transform: translate(-50%, -50%) rotate(-45deg);
  width: 20px; height: 20px; padding: 0;
  display: block; text-decoration: none;
  background: var(--pin-bg, #5c3a76);
  background: color-mix(in srgb, var(--pin-bg, #5c3a76) 82%, transparent);
  border: 2px solid #fff; border-radius: 50% 50% 50% 0;
  box-shadow: 0 0 0 2px rgba(20, 12, 26, 0.85), 0 1px 6px rgba(0, 0, 0, 0.6);
  cursor: pointer; z-index: 2;
}
/* Visual pin is 20px; expand the interactive hit area to a 44px square so
   touch and pointer targets stay accessible without enlarging map clutter.
   Counter-rotate the hit area so it stays axis-aligned with the page. */
.map-pin::after {
  content: ""; position: absolute; inset: -12px; transform: rotate(45deg);
}
.map-pin:hover { filter: brightness(1.15); }
.map-pin-selected { z-index: 3; }
.map-pin-dragging { opacity: 0.75; z-index: 5; cursor: grabbing; }
/* Per-category shape classes remain on marker elements as DOM hooks, but all
   categories render the same teardrop (owner request: uniform markers). */
/* Controlled palette: dark fills stay legible over arbitrary imagery. */
.map-pin-color-violet { --pin-bg: #5c3a76; }
.map-pin-color-brass { --pin-bg: #7a5a1c; }
.map-pin-color-blue { --pin-bg: #2f5370; }
.map-pin-color-teal { --pin-bg: #1f6b5e; }
.map-pin-color-red { --pin-bg: #8f2f2f; }
.map-pin-color-slate { --pin-bg: #3d4451; }
.map-pin-legend {
  display: inline-block;
  width: 18px; height: 18px; transform: rotate(-45deg);
  background: var(--pin-bg, #5c3a76);
  background: color-mix(in srgb, var(--pin-bg, #5c3a76) 82%, transparent);
  border: 2px solid #fff; border-radius: 50% 50% 50% 0;
  box-shadow: 0 0 0 1px rgba(20, 12, 26, 0.85); vertical-align: middle; margin-right: 6px;
}
.pin-list > li.pin-selected { border-color: var(--color-accent); border-width: 2px; }
/* ---------- Click-to-place pin creation ----------
   Placement mode is a restrained enhancement state: crosshair cursor,
   clear focus/placement outline, and an instruction row immediately
   above the stage. Existing markers are inert while armed so a click
   chooses a location instead of following or dragging a marker. */
.map-placement-row {
  display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap;
  background: var(--color-surface); border: var(--border-strong);
  border-left: 6px solid var(--color-accent); border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3); margin: var(--space-2) 0;
}
.map-placement-row[hidden] { display: none; }
.map-placement-row p { margin: 0; flex: 1 1 auto; min-width: min(100%, 24ch); }
.map-stage[data-placing] { outline: 3px solid var(--focus-ring); outline-offset: 2px; cursor: crosshair; }
.map-stage[data-placing]:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 3px; }
.map-stage[data-placing] .map-canvas { cursor: crosshair; }
.map-stage[data-placing] .map-pin:not([data-draft-pin]) { pointer-events: none; }
.map-pin-draft { z-index: 4; opacity: 0.92; pointer-events: none; }
/* Native quick-pin dialog: centered, phone-safe, internally scrolling. */
dialog.quick-pin-dialog {
  border: var(--border-strong); border-radius: var(--radius-md);
  padding: var(--space-4); background: var(--color-surface);
  color: var(--color-ink); max-width: min(92vw, 560px); width: min(92vw, 560px);
  max-height: calc(100dvh - 32px); overflow: auto;
}
dialog.quick-pin-dialog::backdrop { background: rgba(27, 19, 34, 0.6); }
.quick-pin-dialog h2 { margin-top: 0; }
.quick-pin-form .field input[type="text"],
.quick-pin-form .field select,
.quick-pin-form .field textarea { font-size: 16px; }
.pin-color-field { margin: var(--space-3) 0; }
.pin-color-field legend { font-weight: 700; }
.pin-color-options { display: grid; gap: var(--space-2); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pin-color-option {
  display: flex; gap: var(--space-2); align-items: center;
  min-height: var(--control-touch); padding: var(--space-2) var(--space-3);
  border: var(--border-strong); border-radius: var(--radius-md);
  background: var(--color-surface-raised); cursor: pointer; font-size: var(--text-body);
}
.pin-color-option input[type="radio"] { width: 20px; height: 20px; accent-color: var(--color-accent); flex-shrink: 0; }
.pin-color-option:has(input:checked) { border-color: var(--color-accent); background: var(--color-accent-soft); }
.pin-color-swatch {
  display: inline-block; width: 18px; height: 18px; flex-shrink: 0;
  transform: rotate(-45deg); border-radius: 50% 50% 50% 0;
  background: var(--pin-bg, #5c3a76); border: 2px solid #fff;
  box-shadow: 0 0 0 1px rgba(20, 12, 26, 0.85);
}
.quick-pin-form details { border: var(--border-thin); border-radius: var(--radius-md); padding: var(--space-2) var(--space-3); margin: var(--space-3) 0; background: var(--color-surface); }
.quick-pin-form details > summary { min-height: var(--control-touch); display: flex; align-items: center; cursor: pointer; font-weight: 700; }
@media (max-width: 480px) {
  .pin-color-options { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .map-canvas { transition: none !important; }
  .map-pin { transition: none !important; }
  .map-stage[data-placing] { transition: none !important; }
}

/* P2 writing-first optional sections and conflict recovery. */
.optional-section > summary { cursor: pointer; font-weight: 600; font-size: 1.2rem; padding-block: .75rem; min-height: 44px; }
.optional-section[open] > summary { margin-bottom: 1rem; }
.conflict-text { white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; }
.error-summary .button { max-width: 100%; white-space: normal; text-align: center; }
.prose-rich { white-space: normal; }
.prose-rich p { margin-block: 0 1em; }
.prose-rich li > p { margin-block: .25em; }
.editor-toolbar { display: flex; flex-wrap: wrap; gap: .4rem; margin-block: .5rem; }
.editor-toolbar .button { min-height: 44px; }
.rich-writing .ProseMirror { padding: 1rem; min-height: 18rem; border: 1px solid var(--color-rule); border-radius: 4px; background: var(--color-surface); white-space: pre-wrap; overflow-wrap: anywhere; }
.ProseMirror { position: relative; word-wrap: break-word; font-variant-ligatures: none; }
.ProseMirror pre { white-space: pre-wrap; }
.ProseMirror li { position: relative; }
.ProseMirror-selectednode { outline: 2px solid var(--focus-ring); }
.ProseMirror-hideselection *::selection { background: transparent; }
.ProseMirror:focus { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.editor-toolbar details { max-width: 100%; }
@media (max-width: 639px) {
  [data-entity-form] .form-actions-sticky { position: static; }
}

/* Keep authoring actions below the writing surface at every viewport. */
[data-entity-form] .form-actions-sticky { position: static; }

/* ---------- Calendars (CUX overhaul) ----------
   Quiet ruled month grids on parchment surfaces: violet marks
   selection/actions, brass marks current/special-day context. Never
   color alone: current days also carry visible "Current" text. */
.cal-identity {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-3);
}
.cal-identity h1 { margin-bottom: 0; }
.cal-toolbar {
  background: var(--color-surface); border: var(--border-thin);
  border-radius: var(--radius-md); padding: var(--space-3);
  margin: var(--space-3) 0 var(--space-4); display: grid; gap: var(--space-2);
}
.cal-toolbar-row {
  display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center;
}
.cal-picker > summary {
  min-height: var(--control-touch); display: inline-flex; align-items: center;
  cursor: pointer; font-weight: 700; padding: var(--space-2) var(--space-3);
  border: var(--border-strong); border-radius: var(--radius-sm);
  background: var(--color-surface);
}
.cal-nav, .cal-views { display: flex; gap: var(--space-1); flex-wrap: wrap; }
.cal-nav .button, .cal-views .button { min-height: var(--control-touch); }
.cal-jump input, .cal-jump select { min-height: var(--control-touch); font-size: var(--text-body); }
.cal-current-status { margin: var(--space-2) 0; }
.cal-shelf {
  background: var(--color-surface); border: var(--border-thin);
  border-radius: var(--radius-md); padding: var(--space-3) var(--space-4);
  margin: var(--space-4) 0;
}
.cal-shelf > h2 { margin-top: 0; }
.cal-grid {
  width: 100%; table-layout: fixed; border-collapse: collapse;
  background: var(--color-surface); border: var(--border-strong);
  border-radius: var(--radius-md); overflow: hidden;
}
.cal-grid caption { text-align: left; }
.cal-grid th, .cal-grid td {
  border: 1px solid var(--color-rule); padding: var(--space-1);
  vertical-align: top; overflow-wrap: anywhere;
}
.cal-grid thead th {
  background: var(--color-surface-muted); font-size: 13px; text-align: center;
  padding: var(--space-2) var(--space-1);
}
.cal-day, .cal-special {
  min-height: 112px; height: 112px;
}
.cal-cell-content {
  display: flex; flex-direction: column; min-width: 0; height: 100%;
}
.cal-cell-heading {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-1);
  min-height: var(--control-touch); min-width: 0;
}
.cal-cell-heading > a {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: var(--control-touch); min-height: var(--control-touch);
  font-weight: 700; text-decoration: none; border-radius: var(--radius-sm);
}
.cal-cell-heading > a:hover { background: var(--color-accent-soft); }
.cal-special .cal-cell-heading > a { font-size: 14px; font-weight: 600; }
.cal-blank { background: var(--color-canvas); }
.cal-selected { background: var(--color-accent-soft); }
.cal-current { box-shadow: inset 0 0 0 3px var(--color-brass); }
.cal-current-flag {
  display: inline-flex; align-items: center; min-height: 24px;
  font-size: 12px; font-weight: 700; color: var(--color-brass);
  letter-spacing: 0.04em; text-transform: uppercase;
}
.cal-cell-count {
  display: none; font-size: 12px; font-weight: 700; color: var(--color-accent-ink);
}
.cal-cell-events {
  display: grid; gap: 2px; align-content: start; min-width: 0;
  max-height: 64px; overflow: hidden; margin-top: 2px;
}
.cal-point-event, .cal-point-overflow {
  display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; text-decoration: none; border-radius: var(--radius-sm);
}
.cal-point-event {
  color: var(--color-accent-ink); background: var(--color-surface-muted);
  border-left: 3px solid var(--color-accent); padding: 2px 6px;
  font-size: 13px; line-height: 1.35;
}
.cal-point-event:hover, .cal-point-event:focus-visible {
  background: var(--color-accent-soft); color: var(--color-accent-strong);
}
.cal-point-overflow {
  color: var(--color-muted); padding: 1px 6px; font-size: 12px;
  line-height: 1.45; font-weight: 600;
}
.cal-point-overflow:hover, .cal-point-overflow:focus-visible {
  background: var(--color-accent-soft); color: var(--color-accent-strong);
}
.cal-lane-row { height: 28px; }
.cal-lane-row > td { height: 28px; padding: 1px var(--space-1); }
.cal-lane a {
  display: block; font-size: 13px; line-height: 1.4; text-decoration: none;
  background: var(--color-surface-muted); border-radius: var(--radius-sm);
  padding: 2px 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  min-height: 24px;
}
.cal-lane-empty {
  height: 28px; padding: 0 !important; background: transparent;
  border-color: transparent !important;
}
.cal-overflow-row td { background: var(--color-surface); font-size: 14px; }
.cal-special-band {
  background: var(--color-brass-soft); border: var(--border-thin);
  border-left: 6px solid var(--color-brass); border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3); margin: var(--space-2) 0;
}
.cal-selected-panel {
  background: var(--color-surface); border: var(--border-thin);
  border-left: 6px solid var(--color-accent); border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4); margin: var(--space-4) 0;
}
.cal-selected > h2 { margin-top: 0; }
.cal-about { margin: var(--space-4) 0; }
.cal-about > summary {
  min-height: var(--control-touch); cursor: pointer; font-weight: 700;
  display: flex; align-items: center;
}
/* Year overview: as many columns as fit; one or two tiles on phones. */
.cal-year-grid {
  display: grid; gap: var(--space-3);
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
.cal-year-grid > .cal-special-band { grid-column: 1 / -1; margin: 0; }
.cal-mini {
  background: var(--color-surface); border: var(--border-thin);
  border-radius: var(--radius-md); padding: var(--space-3);
}
.cal-mini > h3 { margin-top: 0; font-size: 16px; }
.cal-mini-grid { width: 100%; table-layout: fixed; border-collapse: collapse; }
.cal-mini-grid th, .cal-mini-grid td {
  border: 0; padding: 1px; text-align: center; font-size: 13px;
}
.cal-mini-grid td a {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 32px; min-height: 32px; text-decoration: none; border-radius: var(--radius-sm);
}
.cal-mini-grid td a:hover { background: var(--color-accent-soft); }
/* Builder: step list, editor, sticky live preview. */
.cal-builder { display: grid; gap: var(--space-4); }
@media (min-width: 1100px) {
  .cal-builder { grid-template-columns: 200px minmax(0, 1fr) minmax(0, 340px); align-items: start; }
  .cal-preview { position: sticky; top: var(--space-4); }
}
.cal-steps { background: var(--color-surface); border: var(--border-thin); border-radius: var(--radius-md); padding: var(--space-3); }
.cal-steps ol { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-1); }
.cal-steps a {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-2);
  min-height: var(--control-touch); padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm); text-decoration: none; font-weight: 600;
}
.cal-steps a[aria-current="step"] { background: var(--color-accent-soft); }
.builder-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.builder-rows fieldset { margin: 0; }
.builder-rows [data-dragging] { opacity: 0.6; }
.builder-rows [data-drop-before] { box-shadow: 0 -3px 0 var(--color-accent); }
.builder-rows [data-drop-after] { box-shadow: 0 3px 0 var(--color-accent); }
.row-actions { display: flex; gap: var(--space-1); flex-wrap: wrap; margin: var(--space-2) 0 0; }
.leap-sentence { line-height: 2.4; }
.leap-sentence select, .leap-sentence input {
  min-height: var(--control-touch); font-size: var(--text-body);
}
.starter-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.starter-card {
  background: var(--color-surface); border: var(--border-thin);
  border-radius: var(--radius-md); padding: var(--space-3) var(--space-4);
}
.starter-card > h3 { margin-top: 0; }
.cal-segments { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; }
/* Shared date control + picker dialog. */
.date-control .date-summary { font-weight: 600; }
.date-control [data-picker-action][hidden] { display: none; }
dialog.date-picker-dialog {
  border: var(--border-strong); border-radius: var(--radius-md);
  padding: var(--space-4); background: var(--color-surface); color: var(--color-ink);
  max-width: min(92vw, 640px); width: min(92vw, 640px);
  max-height: calc(100dvh - 32px); overflow: auto;
}
dialog.date-picker-dialog::backdrop { background: rgba(27, 19, 34, 0.6); }
.date-picker-title { margin-top: 0; font-size: 19px; }
.date-picker-year {
  display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap;
  margin: var(--space-2) 0;
}
.date-picker-year a {
  display: inline-flex; align-items: center;
  min-height: var(--control-touch); padding: 0 var(--space-2);
}
.date-picker-year-entry { display: inline-flex; gap: var(--space-1); align-items: center; }
.date-picker-year-entry input {
  width: 96px; min-height: var(--control-touch); font-size: var(--text-body);
  padding: var(--space-1) var(--space-2);
  border: var(--border-strong); border-radius: var(--radius-sm);
}
.date-picker-months { display: flex; gap: var(--space-1); flex-wrap: wrap; }
.date-picker-months a {
  display: inline-flex; align-items: center;
  min-height: var(--control-touch); padding: 0 var(--space-2);
}
.date-picker-months a[aria-current="true"] { font-weight: 700; text-decoration: underline; }
.date-picker .cal-grid td button {
  width: 100%; min-height: var(--control-touch); cursor: pointer;
  background: none; border: 0; border-radius: var(--radius-sm); font-size: var(--text-body);
}
.date-picker .cal-grid td button:hover { background: var(--color-accent-soft); }
.date-picker .cal-grid td button:focus-visible {
  outline: 3px solid var(--focus-ring); outline-offset: 1px;
}
.date-picker [role="status"] { min-height: 24px; }
/* Phone calendar: dots/counts instead of squeezed titles. */
@media (max-width: 639px) {
  .cal-toolbar-row .button, .cal-toolbar-row summary { min-height: var(--control-touch); }
  .cal-grid th, .cal-grid td { padding: 2px; }
  .cal-day, .cal-special { min-height: 56px; height: 56px; }
  .cal-cell-heading { min-height: 48px; gap: 2px; }
  .cal-cell-heading > a { min-width: 40px; min-height: 44px; }
  .cal-cell-events { display: none; }
  .cal-lane-row { display: none; }
  .cal-cell-count {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 24px; min-height: 24px; margin-left: 2px;
    border-radius: var(--radius-pill); background: var(--color-accent-soft);
  }
  .cal-event-marker {
    width: 9px; min-width: 9px; height: 9px; min-height: 9px;
    padding: 0; border-radius: 50%; background: var(--color-accent);
    font-size: 0;
  }
  .cal-special .cal-cell-heading > a { min-width: 40px; }
  .cal-year-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
  dialog.date-picker-dialog {
    width: min(96vw, 640px); max-width: min(96vw, 640px);
    max-height: calc(100dvh - 24px); padding: var(--space-3);
  }
  .date-picker .cal-grid { table-layout: fixed; width: 100%; }
  .date-picker-year-entry input { width: 88px; font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .cal-grid a, .cal-mini-grid td a { transition: none !important; }
}

/* Compact follower sheets: one reading order, two columns when space permits. */
.follower-roster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); align-items: start; }
.follower-sheet { min-width: 0; padding: var(--space-6); border: 2px solid var(--color-rule-strong); border-top: 4px solid var(--color-accent); background: var(--color-surface); overflow-wrap: anywhere; }
.follower-sheet-header { padding-bottom: var(--space-3); margin-bottom: var(--space-3); border-bottom: var(--border-thin); }
.follower-sheet h1, .follower-sheet h2 { margin: 0 0 var(--space-1); font-size: var(--text-title-compact); }
.follower-sheet h2 a { color: var(--color-ink); text-decoration-thickness: 1px; }
.follower-class { margin: 0 0 var(--space-3); color: var(--color-muted); }
.follower-context { margin: var(--space-1) 0; font-size: var(--text-nav); }
.follower-label { font-weight: 600; }
.follower-stats { margin: 0; font-size: var(--text-nav); }
.follower-stats > div { margin: var(--space-1) 0; }
.follower-stats dt, .follower-stats dd { display: inline; margin: 0; }
.follower-stats dt { font-weight: 700; color: var(--color-accent); }
.follower-stats dt::after { content: ": "; }
.follower-sheet h3 { margin: var(--space-4) 0 var(--space-2); padding-bottom: var(--space-1); border-bottom: var(--border-thin); font: 700 var(--text-compact)/var(--leading-body) var(--font-sans); text-transform: uppercase; letter-spacing: .04em; color: var(--color-accent); }
.follower-action-text { white-space: pre-wrap; margin: 0; font-size: var(--text-nav); line-height: 1.5; }
.follower-action { margin-top: var(--space-3); }
.follower-action-label { margin: 0 0 var(--space-1); font-size: var(--text-compact); font-weight: 700; color: var(--color-accent); }
.follower-action-label .badge { white-space: normal; }
.follower-action-locked { padding-left: var(--space-3); border-left: 2px solid var(--color-rule); }
.follower-action-locked .follower-action-text { color: var(--color-muted); }
.follower-detail { max-width: 640px; }
.follower-toolbar { margin-bottom: var(--space-4); }
.follower-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.follower-proficiencies, .follower-action-fields { min-width: 0; border: 0; padding: 0; margin: var(--space-6) 0; }
.follower-proficiencies legend, .follower-action-fields legend { font-weight: 700; margin-bottom: var(--space-2); }
.follower-checks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-1) var(--space-4); }
.follower-checks .checkbox-row { min-height: var(--control-touch); margin: 0; padding: var(--space-2); background: var(--color-surface); border: var(--border-thin); border-radius: var(--radius-sm); font-weight: 400; }
.follower-uses { max-width: 200px; }
.follower-tabs { display: flex; flex-wrap: wrap; gap: var(--space-2); border-bottom: var(--border-thin); margin-bottom: var(--space-6); }
.follower-tabs a { display: flex; align-items: center; min-height: var(--control-touch); padding: var(--space-2) var(--space-3); text-decoration: none; border-bottom: 3px solid transparent; }
.follower-tabs a[aria-current] { border-color: var(--color-accent); font-weight: 700; color: var(--color-accent-strong); }
.follower-class-mode, .follower-class-choice, .follower-new-class { min-width: 0; border: 0; padding: 0; margin: var(--space-4) 0; }
.follower-class-mode legend, .follower-new-class > legend { font-weight: 700; }
.follower-class-choice > legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.follower-shared-notice { padding: var(--space-4); background: var(--color-info-soft); border-left: 3px solid var(--color-info); }
@media (max-width: 767px) {
  .follower-roster { grid-template-columns: minmax(0, 1fr); }
  .follower-sheet { padding: var(--space-4); }
}
@media (max-width: 479px) {
  .follower-form-grid, .follower-checks { grid-template-columns: minmax(0, 1fr); }
}