/* PB admin theme pbadmin4 (.project/features/admin-redesign/, style guide .project/13-admin-style-guide.md).
   Three parts: 1 tokens, 2 the frame and the shared parts, 3 a compatibility layer that styles the
   Bootstrap 3 class names unconverted pages still print. Part 3 shrinks as pages convert. */

/* ================================================================== 1. tokens */
:root {
  --bg: #f3f4f6; --surface: #ffffff; --surface-2: #f8f9fb; --sunken: #eceef2;
  --ink: #1f2933; --muted: #5b6672; --line: #dfe3e8; --line-strong: #c9cfd6;
  --accent: #2a62b8; --accent-ink: #ffffff; --accent-soft: #e6effb;   /* was #2f6fd0: 4.2 on accent-soft, 2026-09-27 */
  /* Text-on-fill colors, darkened 2026-09-27 so every pill, note and button label clears 4.5:1 on every
     soft fill it sits on (were 3.5-4.4: warn pill 3.81, info note 4.2, muted on ok-soft 4.39). Measured,
     not eyeballed - see 13-admin-style-guide.md and 11-admin-design-patterns.md "Text contrast". */
  --ok: #26703a; --ok-soft: #e3f3e6; --warn: #935600; --warn-soft: #fff1dc; --bad: #b3261e; --bad-soft: #fbe4e2; --info: #2a62b8; --info-soft: #e6effb;
  --bar-on: #3f9d4e; --bar-off: #d08a2e; --bar-none: #c9cfd6; --bar-bad: #c94a44; --bar-info: #4f86c8;
  --badge-e: #3f9d4e; --badge-h: #9aa3ad; --badge-d: #c94a44;
  --top-bg: #ffffff; --nav-bg: #ffffff; --shadow: 0 1px 2px rgba(16,24,40,.06); --radius: 10px; --radius-sm: 8px;
  --chart-bar: #9fbde0;
  /* A SITE ADMIN'S own look (body.pb-siteadmin, .project/features/admin-switcher/, 2026-09-30): a
     navy sweep on the top bar and the sign-in page, in light and dark alike, so a site's admin is
     told from the full admin on gonjx.com at a glance (which keeps the plain frame). Jeff picked the
     gradient and the direction: "Admin is default. Site admins have the gradient." It runs his
     #1c2a42 into a brighter blue on the right. Text on it clears 4.5:1 at the brightest end
     (siteadmin-muted on #234a86 is 5.2). Not redefined in the dark blocks on purpose. */
  --siteadmin-bg: linear-gradient(90deg, #17223a 0%, #1c2a42 40%, #234a86 100%);
  --siteadmin-page: linear-gradient(160deg, #17223a 0%, #1c2a42 45%, #234a86 100%);
  --siteadmin-ink: #e6e9ee; --siteadmin-muted: #c2cad6; --siteadmin-line: rgba(255,255,255,.16); --siteadmin-fill: rgba(255,255,255,.09);
  --siteadmin-badge: #ffffff; --siteadmin-badge-ink: #1c2a42;
  /* CKEditor 4 (kama skin) chrome: the frame, the toolbar groups, hover, and the icon sprite filter */
  --cke-chrome: #e9ecf0; --cke-tool: #ffffff; --cke-hover: #dfe8f5; --cke-icon: none;
  color-scheme: light;
}
:root[data-mode="dark"] {
  --bg: #0f1115; --surface: #181b21; --surface-2: #1e2229; --sunken: #0f1115;
  --ink: #e6e9ee; --muted: #98a2ae; --line: #2a2f38; --line-strong: #3a414c;
  --accent: #6ea8ff; --accent-ink: #0f1115; --accent-soft: #1c2a42;
  --ok: #6fcf86; --ok-soft: #173021; --warn: #f0b35a; --warn-soft: #3a2a12; --bad: #ff8a80; --bad-soft: #3d1c1a; --info: #6ea8ff; --info-soft: #1c2a42;
  --bar-on: #4fae5f; --bar-off: #d9a052; --bar-none: #3a414c; --bar-bad: #e0665f; --bar-info: #6ea8ff;
  --top-bg: #14171c; --nav-bg: #14171c; --shadow: 0 1px 2px rgba(0,0,0,.4); --chart-bar: #3d5f86;
  --cke-chrome: #1e2229; --cke-tool: #2a2f38; --cke-hover: #3a414c; --cke-icon: invert(.85) hue-rotate(180deg);
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-mode="light"]):not([data-mode="dark"]) {
    --bg: #0f1115; --surface: #181b21; --surface-2: #1e2229; --sunken: #0f1115;
    --ink: #e6e9ee; --muted: #98a2ae; --line: #2a2f38; --line-strong: #3a414c;
    --accent: #6ea8ff; --accent-ink: #0f1115; --accent-soft: #1c2a42;
    --ok: #6fcf86; --ok-soft: #173021; --warn: #f0b35a; --warn-soft: #3a2a12; --bad: #ff8a80; --bad-soft: #3d1c1a; --info: #6ea8ff; --info-soft: #1c2a42;
    --bar-on: #4fae5f; --bar-off: #d9a052; --bar-none: #3a414c; --bar-bad: #e0665f; --bar-info: #6ea8ff;
    --top-bg: #14171c; --nav-bg: #14171c; --shadow: 0 1px 2px rgba(0,0,0,.4); --chart-bar: #3d5f86;
    --cke-chrome: #1e2229; --cke-tool: #2a2f38; --cke-hover: #3a414c; --cke-icon: invert(.85) hue-rotate(180deg);
    color-scheme: dark;
  }
}

/* ================================================================== 2. frame and shared parts */
*, *::before, *::after { box-sizing: border-box; }
html { height: 100%; -webkit-text-size-adjust: 100%; }
body.pb-admin { margin: 0; min-height: 100%; background: var(--bg); color: var(--ink); font: 16px/1.45 "Source Sans 3", "Source Sans Pro", "Segoe UI", Arial, sans-serif; }
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent); text-decoration: underline; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
img { max-width: 100%; height: auto; }
h1, h2, h3, h4, h5 { margin: 0 0 .5em; font-weight: 600; line-height: 1.2; color: var(--ink); }
h1 { font-size: 28px; } h2 { font-size: 22px; } h3 { font-size: 18px; } h4 { font-size: 17px; } h5 { font-size: 16px; }
p { margin: 0 0 12px; }
hr { border: 0; border-top: 1px solid var(--line); margin: 16px 0; }
code, pre { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 14px; }
pre { background: var(--sunken); padding: 10px 12px; border-radius: var(--radius-sm); overflow: auto; }
.hidden, [hidden] { display: none !important; }

/* top bar */
.pb-top { position: sticky; top: 0; z-index: 1030; height: 52px; display: flex; align-items: center; gap: 12px; padding: 0 16px; background: var(--top-bg); border-bottom: 1px solid var(--line); }
/* locdev: a solid LOCAL DEV badge in the middle of the top bar and a red line under it, so the
   dev box cannot pass for production (Jeff, 2026-10-05, after a batch went into locdev by mistake;
   his mockup put the badge in the middle). It sits centered in the free space between the search
   box and the account menu, so it never covers either. AdminShell::returnBodyKindClass adds .pb-env-dev. */
.pb-env-dev .pb-top-right { order: 2; }
.pb-env-dev .pb-top { border-bottom: 3px solid var(--bad); }
.pb-env-dev .pb-top::after { content: "LOCAL DEV"; order: 1; margin-left: auto; flex: 0 0 auto; padding: 3px 12px; border-radius: 6px; background: var(--bad); color: var(--bad-soft); font-size: 13px; font-weight: 700; letter-spacing: .06em; pointer-events: none; white-space: nowrap; }
.pb-top-menu { display: inline-flex; border: 0; background: transparent; padding: 6px; border-radius: 6px; color: var(--muted); cursor: pointer; }
.pb-top-menu:hover { background: var(--surface-2); color: var(--ink); }
.pb-brand { display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--ink); white-space: nowrap; }
.pb-brand:hover { text-decoration: none; }
.pb-brand b { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 6px; background: var(--accent); color: var(--accent-ink); font-size: 13px; }
/* The admin switcher (2026-09-30, .project/features/admin-switcher/): a caret after the brand that
   opens the list of admins this account may use - "Every site" (gonjx.com) pinned first for an
   administrator, then the sites the account covers. Each row is a link to that domain's admin, so
   the domain still decides what you see. Replaced the 12px scope pill of 2026-09-20. Printed by
   AdminShell::returnAdminSwitcher, and only when there is somewhere else to go. */
.pb-switch { position: relative; }
.pb-brand + .pb-switch { margin-left: -4px; }
.pb-brand:has(+ .pb-switch) { cursor: pointer; }
.pb-switch-btn { display: inline-flex; align-items: center; border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); padding: 5px 7px; border-radius: 8px; cursor: pointer; line-height: 1; }
.pb-switch-btn:hover { background: var(--surface-2); }
.pb-switch-menu { position: absolute; left: 0; top: calc(100% + 8px); width: 360px; max-width: calc(100vw - 32px); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 10px 30px rgba(16,24,40,.15); z-index: 1040; color: var(--ink); text-align: left; }
.pb-switch-head { padding: 10px 14px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 14px; }
.pb-switch-head b { color: var(--ink); }
.pb-switch-group { padding: 10px 14px 4px; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.pb-switch-filter { margin: 8px 10px 4px; display: flex; align-items: center; gap: 8px; padding: 5px 10px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--surface); color: var(--muted); }
.pb-switch-filter input { border: 0; background: transparent; outline: 0; flex: 1; min-width: 0; color: var(--ink); }
.pb-switch-list { max-height: 60vh; overflow-y: auto; padding-bottom: 6px; }
.pb-switch-row { display: flex; align-items: center; gap: 10px; padding: 7px 14px; color: var(--ink); }
a.pb-switch-row:hover { background: var(--surface-2); text-decoration: none; }
.pb-switch-row.pb-switch-here { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.pb-switch-row i.fa { width: 18px; text-align: center; color: var(--muted); flex: none; }
.pb-switch-row.pb-switch-here i.fa { color: var(--accent); }
.pb-switch-row b { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; background: var(--accent); color: var(--accent-ink); font-size: 12px; flex: none; }
.pb-switch-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.pb-switch-dom { margin-left: auto; color: var(--muted); font-size: 14px; white-space: nowrap; }
.pb-switch-here .pb-switch-dom { color: var(--accent); }
.pb-switch-st { font-size: 13px; font-weight: 700; padding: 0 7px; border-radius: 999px; line-height: 19px; flex: none; }
.pb-switch-st.live { background: var(--ok-soft); color: var(--ok); }
.pb-switch-st.dev { background: var(--sunken); color: var(--muted); }
.pb-switch-pin { border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.pb-switch-pin .pb-switch-row { padding: 10px 14px; }
.pb-switch-none { padding: 8px 14px 12px; color: var(--muted); }
.pb-switch-foot { padding: 8px 14px 10px; border-top: 1px solid var(--line); color: var(--muted); font-size: 14px; }

/* A site admin's look: body.pb-siteadmin on every site's own domain, never on gonjx.com
   (AdminShell::returnBodyKindClass). Every part of the top bar takes the siteadmin tokens; the
   menus that drop from it stay on the ordinary surface. */
body.pb-siteadmin .pb-top { background: var(--siteadmin-bg); border-bottom-color: var(--siteadmin-line); color: var(--siteadmin-ink); }
body.pb-siteadmin .pb-top-menu { color: var(--siteadmin-muted); }
body.pb-siteadmin .pb-top-menu:hover { background: var(--siteadmin-fill); color: var(--siteadmin-ink); }
body.pb-siteadmin .pb-brand { color: var(--siteadmin-ink); }
body.pb-siteadmin .pb-brand b { background: var(--siteadmin-badge); color: var(--siteadmin-badge-ink); }
body.pb-siteadmin .pb-switch-btn { background: var(--siteadmin-fill); border-color: var(--siteadmin-line); color: var(--siteadmin-ink); }
body.pb-siteadmin .pb-switch-btn:hover { background: var(--siteadmin-line); }
body.pb-siteadmin .pb-search { background: var(--siteadmin-fill); border-color: var(--siteadmin-line); color: var(--siteadmin-muted); }
body.pb-siteadmin .pb-search:hover { border-color: var(--siteadmin-muted); color: var(--siteadmin-ink); }
body.pb-siteadmin .pb-search kbd { border-color: var(--siteadmin-line); }
body.pb-siteadmin .pb-seg { background: transparent; border-color: var(--siteadmin-line); }
body.pb-siteadmin .pb-seg button { color: var(--siteadmin-muted); }
body.pb-siteadmin .pb-seg button:hover { color: var(--siteadmin-ink); }
body.pb-siteadmin .pb-seg button[aria-pressed="true"] { background: var(--siteadmin-fill); color: var(--siteadmin-ink); }
body.pb-siteadmin .pb-user-btn { color: var(--siteadmin-ink); }
body.pb-siteadmin .pb-user-btn:hover { background: var(--siteadmin-fill); }
body.pb-siteadmin .pb-avatar { background: var(--siteadmin-fill); color: var(--siteadmin-ink); }
body.pb-siteadmin.pb-login { background: var(--siteadmin-page); }
body.pb-siteadmin .pb-login-box { border-color: transparent; box-shadow: 0 12px 32px rgba(0,0,0,.35); }

.pb-search { flex: 1 1 auto; max-width: 520px; margin-left: 12px; display: flex; align-items: center; gap: 8px; padding: 6px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-2); color: var(--muted); cursor: pointer; text-align: left; }
.pb-search:hover { border-color: var(--line-strong); color: var(--ink); }
.pb-search span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pb-search kbd { font: 12px ui-monospace, monospace; padding: 1px 6px; border: 1px solid var(--line-strong); border-radius: 4px; }
.pb-top-right { margin-left: auto; display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.pb-seg { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--surface); }
.pb-seg button { border: 0; background: transparent; padding: 5px 10px; cursor: pointer; display: flex; align-items: center; gap: 6px; color: var(--muted); }
.pb-seg button:hover { color: var(--ink); }
.pb-seg button[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.pb-user { position: relative; }
.pb-user-btn { display: flex; align-items: center; gap: 8px; border: 0; background: transparent; padding: 4px 6px; border-radius: 8px; cursor: pointer; }
.pb-user-btn:hover { background: var(--surface-2); }
.pb-avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--sunken); display: grid; place-items: center; font-weight: 700; font-size: 13px; text-transform: uppercase; }
.pb-user-menu { position: absolute; right: 0; top: calc(100% + 6px); min-width: 230px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 10px 30px rgba(16,24,40,.15); padding: 6px; z-index: 1040; }
.pb-user-head { padding: 8px 10px; color: var(--muted); font-size: 14px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.pb-user-menu a { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 6px; color: var(--ink); }
.pb-user-menu a:hover { background: var(--surface-2); text-decoration: none; }
.pb-user-menu a.pb-user-out { color: var(--bad); }
/* Appearance lives in the account menu since 2026-10-05, at every width (Jeff, 2026-10-01:
   "these color selections need to move into the Account menu"; features/admin-mobile). */
.pb-user-appearance { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 10px 8px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.pb-user-appearance-label { color: var(--muted); font-size: 14px; }
.pb-user-menu { min-width: 300px; }
/* Lookout in the top bar (2026-10-10): the Do now count, and a glance menu that lists the first
   entries, each a link straight to its action. The menu is a .pb-user-menu, so it opens, closes and
   goes full width on a phone the same way as the account menu. */
.pb-lk-top { position: relative; }
.pb-lk-top-btn { display: flex; align-items: center; gap: 6px; border: 0; background: transparent; padding: 6px 8px; border-radius: 8px; cursor: pointer; color: var(--ink); min-height: 36px; }
.pb-lk-top-btn:hover { background: var(--surface-2); }
.pb-lk-top-count { min-width: 22px; text-align: center; border-radius: 999px; padding: 0 6px; font-size: 13px; font-weight: 700; background: var(--warn-soft); color: var(--warn); font-variant-numeric: tabular-nums; }
.pb-lk-top-count.is-bad { background: var(--bad-soft); color: var(--bad); }
.pb-lk-top-menu { width: 420px; max-width: calc(100vw - 24px); color: var(--ink); }   /* not the top bar's own text color */
.pb-lk-top-head { padding: 8px 10px; border-bottom: 1px solid var(--line); margin-bottom: 4px; font-size: 14px; }
.pb-lk-top-over { color: var(--bad); font-weight: 600; margin-left: 6px; }
.pb-user-menu a.pb-lk-top-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 8px 10px; min-height: 40px; }
.pb-lk-top-row .pb-lk-when { font-size: 12px; white-space: nowrap; }
.pb-lk-top-main { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.pb-lk-top-main .pb-lk-tag { margin-right: 6px; }
.pb-lk-top-go { color: var(--accent); font-size: 13px; font-weight: 600; white-space: nowrap; }
.pb-user-menu a.pb-lk-top-all { justify-content: center; border-top: 1px solid var(--line); margin-top: 4px; font-weight: 600; color: var(--accent); }
.pb-lk-top-empty { padding: 10px; margin: 0; color: var(--muted); font-size: 14px; }
@media (max-width: 600px) { .pb-lk-top-word { display: none; } .pb-lk-top-menu { width: auto; } }

/* frame */
.pb-frame { display: grid; grid-template-columns: 248px minmax(0, 1fr); min-height: calc(100vh - 52px); }
body.collapse-leftbar .pb-frame { grid-template-columns: 64px minmax(0, 1fr); }
.pb-side { background: var(--nav-bg); border-right: 1px solid var(--line); padding: 10px 10px 40px; position: sticky; top: 52px; height: calc(100vh - 52px); overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; }
.pb-side ul.acc-menu > li > a > span { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.pb-scrim { display: none; }
#page-content { min-width: 0; padding: 0 28px 48px; }
#wrap { max-width: 1600px; }

/* the generated menu (core::Navigate::BuildComplexAdminNAVLinks markup) */
.pb-side ul.acc-menu { list-style: none; margin: 0; padding: 0; }
.pb-side ul.acc-menu > li > a { display: flex; align-items: center; gap: 10px; padding: 7px 12px; border-radius: 8px; color: var(--ink); white-space: nowrap; }
.pb-side ul.acc-menu > li > a:hover { background: var(--surface-2); text-decoration: none; }
.pb-side ul.acc-menu > li > a i.fa { width: 18px; text-align: center; color: var(--muted); flex: none; }
.pb-side ul.acc-menu > li.active > a { color: var(--accent); font-weight: 600; background: var(--accent-soft); }
.pb-side ul.acc-menu > li.active > a i.fa { color: var(--accent); }
.pb-side ul.acc-menu > li.hasChild > a::after { content: "\f105"; font-family: FontAwesome; margin-left: auto; color: var(--muted); transition: transform .15s; }
.pb-side ul.acc-menu > li.hasChild.open > a::after { transform: rotate(90deg); }
.pb-side ul.acc-menu ul.acc-menu { display: none; padding: 2px 0 6px 26px; }
.pb-side ul.acc-menu ul.acc-menu > li > a { padding: 5px 10px; color: var(--muted); font-weight: 400; background: none; }
.pb-side ul.acc-menu ul.acc-menu > li.active > a { color: var(--accent); font-weight: 600; }
.pb-side ul.acc-menu ul.acc-menu > li > a i.fa { display: none; }
.pb-side ul.acc-menu ul.acc-menu ul.acc-menu { padding-left: 14px; }
.pb-side li.divider { height: 1px; margin: 8px 12px; background: var(--line); }
.pb-side li.divider.no-margin { margin: 4px 0; }
body.collapse-leftbar .pb-side { padding: 10px 8px; }
body.collapse-leftbar .pb-side ul.acc-menu > li > a span, body.collapse-leftbar .pb-side ul.acc-menu > li > a::after, body.collapse-leftbar .pb-side ul.acc-menu ul.acc-menu { display: none !important; }
body.collapse-leftbar .pb-side ul.acc-menu > li > a { justify-content: center; padding: 10px 0; }
body.collapse-leftbar .pb-side li.divider { margin: 8px 4px; }
/* The version label, the menu's last line: small, muted, not a link (2026-09-19). */
.pb-side li.pb-side-version { margin-top: 14px; padding: 6px 14px; font-size: 12px; color: var(--muted); opacity: .65; letter-spacing: .02em; cursor: default; }
body.collapse-leftbar .pb-side li.pb-side-version { display: none; }

/* page heading */
#page-heading { padding: 14px 0 16px; }
#page-heading .breadcrumb { list-style: none; margin: 0 0 6px; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 6px; color: var(--muted); font-size: 14px; background: none; border-radius: 0; }
#page-heading .breadcrumb li + li::before { content: "/"; padding-right: 6px; color: var(--line-strong); }
#page-heading .breadcrumb a { color: inherit; }
#page-heading .breadcrumb a:hover { color: var(--accent); text-decoration: none; }
.pb-heading-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
#page-heading h1 { margin: 0; font-size: 28px; font-weight: 600; line-height: 1.15; }
#page-heading .options { margin-left: auto; }
#page-heading .btn-toolbar, #page-heading .btn-group { display: flex; gap: 8px; flex-wrap: wrap; }
#page-heading .admin-back-to-list { margin: 0 !important; }
/* the old header drop menu, on pages that still print it */
#page-heading .dropdown-menu-large-in-header { display: inline-flex; }
#page-heading .dropdown-menu-large-in-header .caret-col { display: none; }

/* login */
body.pb-login { display: grid; place-items: center; padding: 24px 16px; }
.pb-login-box { width: 100%; max-width: 420px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 26px 28px 28px; }
.pb-login-brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 20px; margin-bottom: 18px; }
.pb-login-brand b { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 8px; background: var(--accent); color: var(--accent-ink); font-size: 15px; }
body.pb-content-only #page-content { padding: 16px; }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 7px 14px; border-radius: 8px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); cursor: pointer; white-space: nowrap; line-height: 1.2; vertical-align: middle; text-decoration: none; }
.btn:hover, .btn:focus { background: var(--surface-2); color: var(--ink); text-decoration: none; }
.btn.active, .btn:active { box-shadow: inset 0 1px 3px rgba(0,0,0,.12); }
.btn-primary, .btn-action-primary, .btn-action-submit { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn-primary:hover, .btn-primary:focus, .btn-action-primary:hover, .btn-action-submit:hover { background: var(--accent); color: var(--accent-ink); filter: brightness(1.06); }
.btn-success { background: var(--ok); border-color: var(--ok); color: #fff; } .btn-success:hover, .btn-success:focus { background: var(--ok); color: #fff; filter: brightness(1.06); }
.btn-danger { color: var(--bad); border-color: var(--bad); } .btn-danger:hover, .btn-danger:focus { background: var(--bad-soft); color: var(--bad); }
.btn-warning { color: var(--warn); border-color: var(--warn); } .btn-warning:hover, .btn-warning:focus { background: var(--warn-soft); color: var(--warn); }
.btn-info { color: var(--info); border-color: var(--info); } .btn-info:hover, .btn-info:focus { background: var(--info-soft); color: var(--info); }
.btn-link { border-color: transparent; background: transparent; color: var(--accent); }
.btn-xs, .btn-sm { padding: 4px 10px; font-size: 14px; border-radius: 7px; }
.btn-lg { padding: 10px 18px; font-size: 17px; }
.btn-block { display: flex; width: 100%; }
.btn.disabled, .btn[disabled], fieldset[disabled] .btn { opacity: .5; cursor: not-allowed; pointer-events: none; }
.btn-group { display: inline-flex; flex-wrap: wrap; gap: 6px; vertical-align: middle; }
.btn-group-vertical { display: inline-flex; flex-direction: column; gap: 4px; }
.btn-toolbar { display: flex; flex-wrap: wrap; gap: 8px; }
.btn-label { background: var(--sunken); color: var(--muted); }
/* A long label wraps instead of running past its column (the map's Geocode buttons on pictures,
   events and posts measured 260px in a narrower column on a landscape tablet, 2026-10-14). */
.btn.btn-label { white-space: normal; max-width: 100%; }
.btn .badge { margin-left: 4px; }
.caret { display: inline-block; width: 0; height: 0; margin-left: 4px; vertical-align: middle; border-top: 4px solid; border-right: 4px solid transparent; border-left: 4px solid transparent; }
.close { float: right; border: 0; background: transparent; font-size: 22px; line-height: 1; color: var(--muted); cursor: pointer; opacity: .8; }
.close:hover { color: var(--ink); opacity: 1; }

/* badges, labels, pills */
.badge { display: inline-block; min-width: 20px; padding: 1px 7px; border-radius: 999px; font-size: 13px; font-weight: 700; line-height: 1.4; text-align: center; background: var(--sunken); color: var(--muted); vertical-align: middle; }
.badge-success { background: var(--ok-soft); color: var(--ok); } .badge-danger { background: var(--bad-soft); color: var(--bad); } .badge-info { background: var(--info-soft); color: var(--info); } .badge-warning { background: var(--warn-soft); color: var(--warn); }
.label { display: inline-block; padding: 1px 7px; border-radius: 6px; font-size: 13px; font-weight: 700; line-height: 1.4; color: #fff; background: var(--muted); vertical-align: middle; white-space: nowrap; }
.label-success { background: var(--badge-e); } .label-active { background: var(--badge-e); } .label-info { background: var(--info); } .label-primary { background: var(--accent); color: var(--accent-ink); } .label-warning { background: var(--bar-off); } .label-danger { background: var(--badge-d); } .label-default { background: var(--badge-h); }
.pb-pill { display: inline-flex; align-items: center; gap: 4px; padding: 1px 9px; border-radius: 999px; font-size: 14px; font-weight: 600; white-space: nowrap; }
.pb-pill-up, .pb-pill.ok { background: var(--ok-soft); color: var(--ok); } .pb-pill-down, .pb-pill.bad { background: var(--bad-soft); color: var(--bad); } .pb-pill-flat, .pb-pill.flat { background: var(--sunken); color: var(--muted); } .pb-pill.warn { background: var(--warn-soft); color: var(--warn); } .pb-pill.info { background: var(--info-soft); color: var(--info); }

/* cards and sections (the panel replacement) */
.pb-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.pb-section { padding: 18px 22px 22px; border-bottom: 1px solid var(--line); }
.pb-section:last-child { border-bottom: 0; }
.pb-section > h3 { margin: 0 0 12px; font-size: 17px; font-weight: 600; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pb-section > h3 .hint { font-weight: 400; color: var(--muted); font-size: 14px; }

/* messages */
.alert { display: block; padding: 12px 14px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface-2); margin-bottom: 16px; }
.alert-success { background: var(--ok-soft); border-color: transparent; color: var(--ok); }
.alert-danger, .alert-error { background: var(--bad-soft); border-color: transparent; color: var(--bad); }
.alert-warning { background: var(--warn-soft); border-color: transparent; color: var(--warn); }
.alert-info { background: var(--info-soft); border-color: transparent; color: var(--info); }
.alert h3, .alert h4 { color: inherit; }
.alert ul { margin: 6px 0 0; padding-left: 20px; }
.alert .close { color: inherit; }
.ui-pnotify .ui-pnotify-container { border-radius: var(--radius); }
.ui-pnotify-history-container { display: none !important; }

/* tables */
.table { width: 100%; border-collapse: collapse; margin-bottom: 16px; font-variant-numeric: tabular-nums; }
.table > thead > tr > th { text-align: left; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding: 10px 12px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.table > tbody > tr > td, .table > tbody > tr > th, .table > tfoot > tr > td { padding: 9px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.table-striped > tbody > tr:nth-of-type(odd) > td { background: var(--surface-2); }
.table-hover > tbody > tr:hover > td, table.list tr:hover td { background: var(--surface-2); }
.table-bordered { border: 1px solid var(--line); } .table-bordered > tbody > tr > td, .table-bordered > thead > tr > th { border: 1px solid var(--line); }
.table-condensed > tbody > tr > td, .table-condensed > thead > tr > th { padding: 5px 8px; }
.table-responsive { overflow-x: auto; }
.pagination { display: inline-flex; flex-wrap: wrap; gap: 4px; margin: 0; padding: 0; list-style: none; }
.pagination > li > a, .pagination > li > span { display: grid; place-items: center; min-width: 32px; height: 32px; padding: 0 8px; border-radius: 7px; border: 1px solid transparent; color: var(--ink); font-variant-numeric: tabular-nums; }
.pagination > li > a:hover { background: var(--surface-2); text-decoration: none; }
.pagination > li.active > a, .pagination > li.active > span { background: var(--accent); color: var(--accent-ink); }
.pagination > li.disabled > a, .pagination > li.disabled > span { color: var(--muted); opacity: .6; }
.footable .fooicon { font-family: FontAwesome; }

/* the list frame printed by core::Admin::AdminDataTable (style guide 4, "List"): one card whose top
   is the bar (search, the always-visible status toggles, Filters, Refresh, Reset), then the filter
   pane, the table, and the footer with "Showing 1-25 of N", the page size and the page numbers.
   Inside a card body the frame runs edge to edge. DataTables' own stylesheets are not loaded; the
   hooks it adds (sorting classes, the length select, the info text, the processing note, the
   pagination) are styled here. */
.pb-list { position: relative; }
.pb-sec-body .pb-list { margin-left: -18px; margin-right: -18px; }
.pb-sec-body > .pb-list:first-child, .pb-sec-body > div:first-child > .control-element > .pb-list:first-child { margin-top: -16px; }
.pb-sec-body > .pb-list:last-child, .pb-sec-body > div:last-child > .control-element > .pb-list:last-child { margin-bottom: -16px; }
.pb-sec-body > .pb-list:last-child .pb-list-foot, .pb-sec-body > div:last-child > .control-element > .pb-list:last-child .pb-list-foot { border-radius: 0 0 var(--radius) var(--radius); }
.pb-list-summary { padding: 12px 18px 0; color: var(--muted); }
.pb-list-summary:empty { padding: 0; }
.pb-list-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 12px 18px; border-bottom: 1px solid var(--line); }
.pb-list-search { position: relative; flex: 1 1 220px; max-width: 420px; margin: 0; font-weight: 400; }
.pb-list-search > i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.pb-list-search > .form-control { padding-left: 34px; }
.pb-list-caption { font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.pb-list-status { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; }
.pb-toggles { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.pb-toggle, .pb-toggle i { color: var(--muted); }
.pb-toggle.active, .pb-toggle.active i { color: var(--accent); }
.pb-toggle.active { background: var(--accent-soft); border-color: transparent; box-shadow: none; }
.pb-list-actions { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.pb-list-actions .btn[aria-expanded="true"] { background: var(--accent-soft); border-color: transparent; color: var(--accent); }
.pb-list-filters { display: grid; gap: 12px; padding: 12px 18px 14px; border-bottom: 1px solid var(--line); background: var(--surface-2); }
.pb-list-filter-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.pb-list-filter-row > .pb-list-caption { margin-right: 4px; }
/* The Filters category picker: a bucket menu and a searchable category menu, each an ordinary
   labeled filter field so the row reads as part of the same form as the radius fields above it,
   with what is picked as chips on their own line underneath. It replaced every bucket rendered as
   its own collapsible panel, all on screen at once - on the Locations list that was 16 panels and
   784 categories, a wall that pushed the table off the screen. */
/* The active filters, on the bar and not inside the pane: closing Filters must never hide the
   fact that one is still on. Empty it collapses to nothing, so a list with no filter applied
   looks exactly as it did. */
.pb-list-active { display: none; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 18px; border-bottom: 1px solid var(--line); }
.pb-list-active.has-filters { display: flex; }
.pb-list-active-clear { color: var(--muted); }
.pb-list-active-clear:hover { border-color: var(--bad); color: var(--bad); }
/* the category menu is the one people type into, so it gets the room when the row is tight */
.pb-list-filter-field:has(> .pb-cat-picker-cat) { flex-grow: 2; }
.pb-list-filter-field { flex: 1 1 260px; max-width: 420px; }
.pb-list-filter-field.narrow { flex: 0 1 150px; }
.pb-list-filter-field > label { display: block; font-weight: 600; margin: 0 0 4px; }
.pb-list-filters .checkbox-inline { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-weight: 400; cursor: pointer; }
.pb-list-filters #loc-search-pane .well, .pb-list-filters .well { margin: 0; padding: 0; border: 0; background: transparent; }
.pb-list-scroll { overflow-x: auto; }
.pb-wide-table { overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; }
/* On a phone the first column of such a table stays put while the rest scrolls, so a row's name
   stays beside its numbers (the Sites summary list does the same, .pb-table-keep). 2026-10-15. */
@media (max-width: 767px) {
  .pb-wide-table > table > thead > tr > th:first-child, .pb-wide-table > table > tbody > tr > td:first-child { position: sticky; left: 0; z-index: 1; background: var(--surface); box-shadow: 1px 0 0 var(--line); }
}
.pb-table { width: 100%; border-collapse: collapse; margin: 0; font-variant-numeric: tabular-nums; }
.pb-table > thead > tr > th { text-align: left; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding: 10px 14px; border-bottom: 1px solid var(--line); white-space: nowrap; background: var(--surface-2); }
.pb-table > tbody > tr > td { padding: 10px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.pb-table > tbody > tr:hover > td { background: var(--surface-2); }
.pb-table > tbody > tr > td.dataTables_empty { text-align: center; color: var(--muted); padding: 28px 14px; }
.pb-table a.asset-list-header-link { font-weight: 600; }
/* A list thumbnail (Locations, Guides, News & More, Media, 2026-09-25): a fixed frame the photo
   FILLS, cropped at the edges, instead of a small photo floating in a gray box. Jeff: "I don't
   need to see the whole picture... Just a reasonable version." The frame keeps its size while the
   image loads, so rows do not shift. */
.pb-thumb { width: 64px; height: 48px; border-radius: 6px; overflow: hidden; background: var(--sunken); flex-shrink: 0; }
.pb-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* A list of numbers that stays a table (AdminDataTable phoneLayout => 'table', 2026-10-06): when
   the screen is too narrow for every column, the table scrolls sideways inside its frame and its
   first column (the row's name or date) stays pinned on the left. */
@media (max-width: 1100px) {
  .pb-table-keep { display: block; width: 100% !important; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .pb-table-keep > thead > tr > th, .pb-table-keep > tbody > tr > td { white-space: nowrap; }
  .pb-table-keep > thead > tr > th:first-child, .pb-table-keep > tbody > tr > td:first-child { position: sticky; left: 0; z-index: 1; background: var(--surface); box-shadow: 1px 0 0 var(--line); }
}
@media (max-width: 640px) {
  .pb-table-keep > thead > tr > th, .pb-table-keep > tbody > tr > td { padding: 8px 10px; }
}
/* A LIST WITH A NAME COLUMN STAYS A TABLE at every width (.pb-table-fit, features/admin-mobile
   2026-10-15; it replaced the phone's two-line compact row): admin4.js pbFitTables hides the
   lowest-priority columns until the table fits its box and says so in the footer. Under 1200 a
   row stays one line except the name and the page's chosen detail, which may take two. */
.pb-col-off { display: none !important; }
.pb-list-hidden { margin-left: 12px; color: var(--muted); }
.pb-list-hidden:empty { display: none; }
.pb-fit-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 4px; font-weight: 400; color: var(--muted); }
@media (max-width: 1199px) {
  .pb-table-fit > tbody > tr > td:not(.pb-ph-title):not(.pb-ph-meta):not(.dataTables_empty) { white-space: nowrap; }
  .pb-table-fit > tbody > tr > td.pb-ph-title { min-width: 140px; overflow-wrap: anywhere; }
  .pb-table-fit > tbody > tr > td.pb-ph-meta { min-width: 120px; }
}
@media (max-width: 640px) {
  .pb-table-fit > thead > tr > th, .pb-table-fit > tbody > tr > td { padding: 8px 10px; }
}
/* Lists on a phone (2026-09-25): every AdminDataTable row becomes a small card, one line per
   column with the column's name in front ("County  Ocean"), so all of a row's data is on screen
   instead of the columns past the second being off to the right. The name comes from the cell's
   data-label, which AdminDataTable sets from the column titles. A column with no title (a photo)
   shows without a name; an empty cell is left out. Sorting is by the desktop header only. */
@media (max-width: 640px) {
  .pb-table-cards, .pb-table-cards > tbody, .pb-table-cards > tbody > tr { display: block; width: 100% !important; }
  .pb-table-cards > thead { display: none; }
  .pb-table-cards > tbody > tr { padding: 10px 0; border-bottom: 1px solid var(--line); }
  .pb-table-cards > tbody > tr:hover > td { background: transparent; }
  .pb-table-cards > tbody > tr > td { display: flex; flex-wrap: nowrap; align-items: flex-start; gap: 12px; padding: 3px 16px; border-bottom: 0; overflow-wrap: anywhere; }
  .pb-table-cards > tbody > tr > td > * { min-width: 0; }
  /* top-aligned, nudged down to sit on the first line of a 16px value beside it */
  .pb-table-cards > tbody > tr > td::before { content: attr(data-label); flex: 0 0 110px; padding-top: 3px; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
  .pb-table-cards > tbody > tr > td[data-label=""]::before, .pb-table-cards > tbody > tr > td.dataTables_empty::before { content: none; }
  .pb-table-cards > tbody > tr > td:empty { display: none; }
  .pb-table-cards > tbody > tr > td.dataTables_empty { display: block; }

}
/* The map center block on Location & directions (shared_general_utils::generateHTMLFor_Map):
   a latitude and longitude pair on one line, a small button under a control, and the map with
   the theme's corners (2026-09-19). */
.pb-latlon { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; max-width: 420px; }
.pb-latlon-btn { margin-top: 8px; }
.pb-short { max-width: 140px; }
.pb-map-edit { width: 100%; height: 460px; margin: 4px 0; border-radius: var(--radius-sm); border: 1px solid var(--line); overflow: hidden; }
/* The Pages list on a Site Overview: sub-pages step in under their parent, and a flat page's
   Make button reports into the span under its buttons (2026-09-19). */
.pb-table .pb-tree-1 { padding-left: 18px; }
.pb-table .pb-tree-2 { padding-left: 36px; }
.pb-table .pb-tree-3 { padding-left: 54px; }
.pb-table [class*="pb-tree-"] .fa { margin-right: 5px; color: var(--muted); }
.pb-table .pb-page-rebuild { display: block; margin-top: 4px; font-size: 12px; color: var(--muted); }
.pb-table .pb-row-actions { display: flex; gap: 4px; white-space: nowrap; }
.pb-table .pb-row-actions .btn { padding: 3px 8px; }
.pb-table > thead > tr > th.sorting, .pb-table > thead > tr > th.sorting_asc, .pb-table > thead > tr > th.sorting_desc { cursor: pointer; position: relative; padding-right: 28px; }
.pb-table > thead > tr > th.sorting::after, .pb-table > thead > tr > th.sorting_asc::after, .pb-table > thead > tr > th.sorting_desc::after { content: "\f0dc"; font-family: FontAwesome; font-weight: 400; letter-spacing: 0; position: absolute; right: 12px; top: 50%; transform: translateY(-50%); opacity: .4; }
.pb-table > thead > tr > th.sorting_asc::after { content: "\f0d8"; opacity: 1; color: var(--accent); }
.pb-table > thead > tr > th.sorting_desc::after { content: "\f0d7"; opacity: 1; color: var(--accent); }
.pb-table > thead > tr > th.sorting_asc, .pb-table > thead > tr > th.sorting_desc { color: var(--ink); }
.pb-table > thead > tr > th:hover { color: var(--ink); }
.dataTables_wrapper { position: relative; }
.dataTables_wrapper .dataTables_processing.panel { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); z-index: 5; margin: 0; padding: 3px 12px; border: 0; border-radius: 999px; box-shadow: var(--shadow); background: var(--accent-soft); color: var(--accent); font-size: 14px; font-weight: 600; white-space: nowrap; }
.dataTables_wrapper .dataTables_processing > div:last-child { display: none; }
.pb-list-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; padding: 12px 18px; border-top: 1px solid var(--line); background: var(--surface-2); }
.pb-list-foot-left { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; }
.pb-list-foot .dataTables_info { padding: 0; color: var(--ink); font-variant-numeric: tabular-nums; }
.pb-list-foot .dataTables_length label { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-weight: 400; color: var(--muted); white-space: nowrap; }
.pb-list-foot .dataTables_length select.form-control { display: inline-block; width: auto; padding: 4px 8px; }
.pb-list-foot .dataTables_paginate { padding: 0; }
.pb-list-foot .dataTables_paginate .pagination > li > a { cursor: pointer; }

/* forms */
.form-control { display: block; width: 100%; padding: 7px 10px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); line-height: 1.4; }
.form-control:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.form-control[readonly], .form-control[disabled] { background: var(--sunken); color: var(--muted); }
.form-control::placeholder { color: var(--muted); opacity: .8; }
select.form-control { appearance: auto; }
textarea.form-control { min-height: 80px; resize: vertical; }
.input-sm, .form-group-sm .form-control { padding: 5px 9px; }
.input-lg { padding: 10px 12px; font-size: 17px; }
.form-group { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 6px 16px; padding: 10px 0; border-bottom: 1px dashed var(--line); }
.form-group:last-child, .form-group.flat-top:only-child { border-bottom: 0; }
.form-group > .control-label { padding-top: 7px; font-weight: 600; color: var(--ink); margin: 0; overflow-wrap: anywhere; }
.form-group > .control-label.hidden { display: none; }
.form-group > .control-element { flex: 1 1 320px; min-width: 0; }
.form-group > .help-block { flex-basis: 100%; }
.help-block { display: block; margin: 4px 0 0; color: var(--muted); font-size: 14px; }
.has-error .form-control { border-color: var(--bad); box-shadow: 0 0 0 3px var(--bad-soft); }
.has-error .control-label { color: var(--bad); }
.form-horizontal .form-group { margin: 0; }
/* the field row printed by core::Builders::BuildSimpleTitleFormFieldElement: label | control, or
   stacked (.pb-field-stack) when the caller asked for the full width; help and the error note sit
   under the control inside .control-element */
.pb-field { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 4px 16px; align-items: start; padding: 10px 0; border-bottom: 1px dashed var(--line); }
.pb-field:last-child { border-bottom: 0; }
.pb-field.pb-field-stack, .pb-field.pb-field-nolabel { grid-template-columns: minmax(0, 1fr); }
.pb-field > .control-label { margin: 0; padding-top: 7px; font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.pb-field.pb-field-stack > .control-label { padding-top: 0; }
.pb-field > .control-label .req { color: var(--warn); margin-left: 2px; }
.pb-field .pb-help { color: var(--muted); cursor: help; margin-left: 2px; font-size: 15px; }
.pb-field .pb-help:hover { color: var(--accent); }
.pb-field > .control-element { min-width: 0; }
.pb-field .help-block { margin: 4px 0 0; color: var(--muted); font-size: 14px; }
.pb-field .error-note { margin: 4px 0 0; color: var(--bad); font-size: 14px; }
.pb-field .error-note::before { content: "\f071"; font-family: FontAwesome; margin-right: 6px; }
.pb-field .error-note.hidden { display: none; }
.pb-field.has-error > .control-label { color: var(--bad); }
.force-condensed-rows .pb-field { padding: 5px 0; }
/* the save bar printed by Shared_Form_Interaction::BuildHTML_SaveBar: sticky at the bottom of the
   card it ends, the unsaved state on the left, Cancel then the one primary Save on the right */
.pb-save-bar { position: sticky; bottom: 0; z-index: 5; display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding: 12px 18px; margin: 20px 0 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 -4px 14px rgba(16,24,40,.08); }
.pb-sec-body > .pb-save-bar, .pb-sec-body > div > .control-element > .pb-save-bar:last-child { margin: 20px -18px -16px; border-width: 1px 0 0; border-radius: 0 0 var(--radius) var(--radius); }
.pb-save-state { margin-right: auto; color: var(--muted); display: flex; align-items: center; gap: 8px; min-height: 24px; }
.pb-save-state.dirty { color: var(--warn); font-weight: 600; }
.pb-save-state.dirty::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--warn); }
.pb-save-note { color: var(--muted); }
.pb-save-bar .btn-primary .fa { font-size: 14px; }
@media (max-width: 767px) { .pb-field { grid-template-columns: minmax(0, 1fr); } .pb-field > .control-label { padding-top: 0; } }
.input-group { display: flex; align-items: stretch; width: 100%; }
.input-group .form-control { flex: 1 1 auto; width: auto; border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.input-group-addon { display: flex; align-items: center; padding: 0 10px; border: 1px solid var(--line-strong); border-left: 0; background: var(--sunken); color: var(--muted); white-space: nowrap; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.input-group-addon:first-child { border-left: 1px solid var(--line-strong); border-right: 0; border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.input-group-addon:first-child + .form-control { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.input-group-btn { display: flex; }
.input-group-btn .btn { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; margin-left: -1px; }
.input-group-btn:first-child .btn { border-radius: var(--radius-sm) 0 0 var(--radius-sm); margin: 0 -1px 0 0; }
.input-group-btn + .form-control { border-radius: 0; }
.checkbox, .radio { display: flex; align-items: center; gap: 8px; padding: 4px 0; }
.checkbox label, .radio label { display: inline-flex; align-items: center; gap: 8px; font-weight: 400; cursor: pointer; margin: 0; }
label { display: inline-block; font-weight: 600; margin-bottom: 4px; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--accent); width: 17px; height: 17px; margin: 0; vertical-align: middle; }
.icheckbox_square-blue, .iradio_square-blue { vertical-align: middle; margin-right: 6px; }
.error-note.alert { margin: 6px 0 0; padding: 6px 10px; }
.form-element-error-off { }
/* the original select behind a select2 box must stay out of the layout (seen 1485px wide on
   Categories & related, making the page scroll sideways, with select2.min.css loaded) */
select.select2-hidden-accessible { position: absolute !important; width: 1px !important; height: 1px !important; margin: -1px !important; padding: 0 !important; border: 0 !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; }
.select2-container--bootstrap .select2-selection { border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); min-height: 36px; }
.select2-container--bootstrap .select2-selection--single { height: 36px; padding: 6px 28px 6px 10px; }
.select2-container--bootstrap .select2-selection--single .select2-selection__rendered { color: var(--ink); line-height: 22px; padding: 0; }
.select2-container--bootstrap .select2-selection--single .select2-selection__arrow { height: 34px; right: 6px; }
.select2-container--bootstrap .select2-selection--multiple { padding: 2px 6px; }
.select2-container--bootstrap .select2-selection--multiple .select2-selection__choice { background: var(--accent-soft); color: var(--accent); border: 0; border-radius: 999px; padding: 1px 8px; margin: 3px 4px 0 0; }
.select2-container--bootstrap .select2-selection--multiple .select2-search__field { margin-top: 5px; }
.select2-container--bootstrap.select2-container--focus .select2-selection { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.select2-container--bootstrap .select2-dropdown { border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); box-shadow: 0 10px 30px rgba(16,24,40,.15); }
/* The results list caps its own height and scrolls. select2's stylesheet is not loaded here - the
   admin styles its hooks itself - and that stylesheet is what normally carries this, so without
   it a menu with hundreds of options (the list Filters category menu has 768) rendered as one
   list taller than the screen with no way to scroll it. Only the top level list scrolls, never
   the nested option groups. overscroll-behavior stops a flick at the end of the list from
   scrolling the page underneath, which is how this reads worst on a phone. */
.select2-container--bootstrap .select2-results > .select2-results__options { max-height: 320px; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.select2-container--bootstrap .select2-results__option { padding: 6px 10px; }
.select2-container--bootstrap .select2-results__option--highlighted[aria-selected] { background: var(--accent-soft); color: var(--accent); }
.select2-container--bootstrap .select2-search--dropdown .select2-search__field { border: 1px solid var(--line-strong); border-radius: 6px; padding: 6px 8px; background: var(--surface); color: var(--ink); }
.ms-container .ms-selectable, .ms-container .ms-selection { background: var(--surface); color: var(--ink); }
.ms-container .ms-list { border: 1px solid var(--line-strong); border-radius: var(--radius-sm); }
.ms-container .ms-list li.ms-elem-selectable:hover, .ms-container .ms-list li.ms-hover { background: var(--accent-soft); color: var(--accent); }
.datepicker { color: #1f2933; }

/* tabs (kept where a screen truly has two or three views) */
.nav { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; }
.nav-tabs { gap: 2px; border-bottom: 1px solid var(--line); margin-bottom: 14px; }
.nav-tabs > li > a { display: block; padding: 8px 14px; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.nav-tabs > li > a:hover { color: var(--ink); text-decoration: none; }
.nav-tabs > li.active > a { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }
.tab-content > .tab-pane { display: none; } .tab-content > .active { display: block; }
.tab-container { margin-bottom: 16px; }

/* dropdowns */
.dropdown, .dropup { position: relative; display: inline-block; }
.dropdown-menu { position: absolute; top: 100%; left: 0; z-index: 1000; display: none; min-width: 180px; margin: 4px 0 0; padding: 6px; list-style: none; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: 0 10px 30px rgba(16,24,40,.15); }
.dropdown-menu-right, .pull-right > .dropdown-menu { left: auto; right: 0; }
.open > .dropdown-menu { display: block; }
.dropdown-menu > li > a { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 6px; color: var(--ink); white-space: nowrap; }
.dropdown-menu > li > a:hover { background: var(--surface-2); text-decoration: none; }
.dropdown-menu > li.active > a { background: var(--accent-soft); color: var(--accent); }
.dropdown-menu > li.divider { height: 1px; margin: 6px 0; background: var(--line); }
.dropdown-menu > li.dropdown-header, .dropdown-menu > li.heading { padding: 6px 10px; color: var(--muted); font-size: 13px; text-transform: uppercase; letter-spacing: .06em; }
.dropdown-menu .fa-stack { width: 1.4em; height: 1.4em; line-height: 1.4em; }
.dropdown-menu .fa-stack .fa-square-o { display: none; }

/* modals (Bootstrap 3 JS drives these) */
.modal { position: fixed; inset: 0; z-index: 1050; display: none; overflow: auto; -webkit-overflow-scrolling: touch; }
.modal.in { display: block; }
.modal-backdrop { position: fixed; inset: 0; z-index: 1040; background: #000; }
.modal-backdrop.fade { opacity: 0; } .modal-backdrop.in { opacity: .5; }
.fade { opacity: 0; transition: opacity .15s linear; } .fade.in { opacity: 1; }
.modal-dialog { position: relative; width: auto; max-width: 620px; margin: 40px auto; padding: 0 16px; }
.modal-lg, .modal-large, .modal-xlg { max-width: 980px; }
.modal-content { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 20px 60px rgba(16,24,40,.25); color: var(--ink); }
.modal-header { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.modal-header .close { order: 2; margin-left: auto; }
.modal-title { margin: 0; font-size: 17px; font-weight: 600; }
.modal-body { padding: 18px; }
.modal-footer { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 18px; border-top: 1px solid var(--line); }
.collapse { display: none; } .collapse.in { display: block; } .collapsing { position: relative; height: 0; overflow: hidden; transition: height .2s ease; }
.tooltip { position: absolute; z-index: 1070; display: block; font-size: 14px; opacity: 0; }
.tooltip.in { opacity: 1; }
.tooltip-inner { max-width: 260px; padding: 6px 10px; color: #fff; background: #1f2933; border-radius: 6px; }
.tooltip .tooltip-arrow { display: none; }
.progress { height: 10px; border-radius: 999px; background: var(--sunken); overflow: hidden; margin-bottom: 10px; }
.progress-bar { height: 100%; background: var(--accent); }
.progress-bar-success { background: var(--ok); } .progress-bar-danger { background: var(--bad); } .progress-bar-warning { background: var(--warn); }

/* ================================================================== 3. compatibility layer for unconverted pages */
.container { width: auto; max-width: none; padding: 0; margin: 0; }
.row { display: flex; flex-wrap: wrap; margin: 0 -10px; }
.row-fluid { display: flex; flex-wrap: wrap; }
.row > [class*="col-"] { padding: 0 10px; }
/* a row placed straight in the page container (the old 15px container padding is gone) keeps its
   columns flush with the page edge instead of poking 10px out each side */
#wrap > .container > .row, .pb-rec-main > .row { margin-left: 0; margin-right: 0; }
#wrap > .container > .row > [class*="col-"]:first-child, .pb-rec-main > .row > [class*="col-"]:first-child { padding-left: 0; }
#wrap > .container > .row > [class*="col-"]:last-child, .pb-rec-main > .row > [class*="col-"]:last-child { padding-right: 0; }
/* on a phone every column stacks full width, so no row needs gutters; this also ends the 10px
   sideways overflow a row causes inside any parent that has no padding of its own */
@media (max-width: 767px) { .row { margin-left: 0; margin-right: 0; } .row > [class*="col-"] { padding-left: 0; padding-right: 0; } }
[class*="col-"] { position: relative; min-height: 1px; flex: 0 0 100%; max-width: 100%; }
/* A row whose columns would be squeezed under 150px stacks them (admin4.js pbNarrowRows). */
.row.pb-row-stacked > [class*="col-"] { flex-basis: 100%; max-width: 100%; margin-left: 0; }
/* The highlighted result of any type-ahead (admin4.js pbTypeahead): Enter opens it. */
.pb-ta-active, .pb-ta-active:hover, .pb-ta-active:focus { background: var(--accent-soft) !important; color: var(--ink) !important; box-shadow: inset 3px 0 0 var(--accent); text-decoration: none; }
/* A long accordion of editors on a phone (admin4.js pbPhoneAccordions): each heading is one tap
   target with Filled or Empty and the first words; one section open at a time. */
.pb-acc-phone > .accordion-item > .accordion-title { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 8px; align-items: center; padding: 10px 2px; border-bottom: 1px solid var(--line); text-decoration: none; }
.pb-acc-phone > .accordion-item > .accordion-title > h4 { margin: 0; font-size: 16px; min-width: 0; }
.pb-acc-phone > .accordion-item > .accordion-title > h4 small { display: none; }
.pb-acc-state { font-size: 12px; font-weight: 700; padding: 1px 8px; border-radius: 999px; }
.pb-acc-state.is-filled { background: var(--ok-soft); color: var(--ok); }
.pb-acc-state.is-empty { background: var(--sunken); color: var(--muted); }
.pb-acc-first { grid-column: 1 / -1; font-size: 14px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* A facts panel on a phone (admin4.js pbFactRows): one line per fact, the label on the left and
   the value on the right, with a dashed line between facts, as a form's fields have. */
@media (max-width: 767px) {
  .row.pb-facts > [class*="col-"] { display: grid; grid-template-columns: minmax(110px, 40%) minmax(0, 1fr); column-gap: 12px; align-items: baseline; margin: 0 !important; padding: 7px 0; border-bottom: 1px dashed var(--line); overflow-wrap: anywhere; }
  .row.pb-facts > [class*="col-"]:last-child { border-bottom: 0; }
  .row.pb-facts > [class*="col-"] > .text-muted:first-child { grid-column: 1; grid-row: 1 / span 4; }
  .row.pb-facts > [class*="col-"] > :not(.text-muted:first-child) { grid-column: 2; }
  .row.pb-facts > [class*="col-"] strong[style*="font-size"] { font-size: 17px !important; }
  .row.pb-facts > [class*="col-"] > br { display: none; }
}
.col-xs-1 { flex-basis: 8.333%; max-width: 8.333%; } .col-xs-2 { flex-basis: 16.666%; max-width: 16.666%; } .col-xs-3 { flex-basis: 25%; max-width: 25%; } .col-xs-4 { flex-basis: 33.333%; max-width: 33.333%; } .col-xs-5 { flex-basis: 41.666%; max-width: 41.666%; } .col-xs-6 { flex-basis: 50%; max-width: 50%; } .col-xs-7 { flex-basis: 58.333%; max-width: 58.333%; } .col-xs-8 { flex-basis: 66.666%; max-width: 66.666%; } .col-xs-9 { flex-basis: 75%; max-width: 75%; } .col-xs-10 { flex-basis: 83.333%; max-width: 83.333%; } .col-xs-11 { flex-basis: 91.666%; max-width: 91.666%; } .col-xs-12 { flex-basis: 100%; max-width: 100%; }
@media (min-width: 768px) {
  .col-sm-1 { flex-basis: 8.333%; max-width: 8.333%; } .col-sm-2 { flex-basis: 16.666%; max-width: 16.666%; } .col-sm-3 { flex-basis: 25%; max-width: 25%; } .col-sm-4 { flex-basis: 33.333%; max-width: 33.333%; } .col-sm-5 { flex-basis: 41.666%; max-width: 41.666%; } .col-sm-6 { flex-basis: 50%; max-width: 50%; } .col-sm-7 { flex-basis: 58.333%; max-width: 58.333%; } .col-sm-8 { flex-basis: 66.666%; max-width: 66.666%; } .col-sm-9 { flex-basis: 75%; max-width: 75%; } .col-sm-10 { flex-basis: 83.333%; max-width: 83.333%; } .col-sm-11 { flex-basis: 91.666%; max-width: 91.666%; } .col-sm-12 { flex-basis: 100%; max-width: 100%; }
  .col-sm-offset-3 { margin-left: 25%; } .col-sm-offset-2 { margin-left: 16.666%; }
  .hidden-sm { display: none !important; } .visible-xs { display: none !important; }
}
@media (min-width: 992px) {
  .col-md-1 { flex-basis: 8.333%; max-width: 8.333%; } .col-md-2 { flex-basis: 16.666%; max-width: 16.666%; } .col-md-3 { flex-basis: 25%; max-width: 25%; } .col-md-4 { flex-basis: 33.333%; max-width: 33.333%; } .col-md-5 { flex-basis: 41.666%; max-width: 41.666%; } .col-md-6 { flex-basis: 50%; max-width: 50%; } .col-md-7 { flex-basis: 58.333%; max-width: 58.333%; } .col-md-8 { flex-basis: 66.666%; max-width: 66.666%; } .col-md-9 { flex-basis: 75%; max-width: 75%; } .col-md-10 { flex-basis: 83.333%; max-width: 83.333%; } .col-md-11 { flex-basis: 91.666%; max-width: 91.666%; } .col-md-12 { flex-basis: 100%; max-width: 100%; }
  .col-md-offset-3 { margin-left: 25%; } .col-md-offset-0 { margin-left: 0; }
  .hidden-md { display: none !important; } .hidden-sm { display: revert !important; } .visible-sm { display: none !important; }
}
@media (min-width: 1200px) {
  .col-lg-1 { flex-basis: 8.333%; max-width: 8.333%; } .col-lg-2 { flex-basis: 16.666%; max-width: 16.666%; } .col-lg-3 { flex-basis: 25%; max-width: 25%; } .col-lg-4 { flex-basis: 33.333%; max-width: 33.333%; } .col-lg-5 { flex-basis: 41.666%; max-width: 41.666%; } .col-lg-6 { flex-basis: 50%; max-width: 50%; } .col-lg-7 { flex-basis: 58.333%; max-width: 58.333%; } .col-lg-8 { flex-basis: 66.666%; max-width: 66.666%; } .col-lg-9 { flex-basis: 75%; max-width: 75%; } .col-lg-10 { flex-basis: 83.333%; max-width: 83.333%; } .col-lg-11 { flex-basis: 91.666%; max-width: 91.666%; } .col-lg-12 { flex-basis: 100%; max-width: 100%; }
  .hidden-lg { display: none !important; } .hidden-md { display: revert !important; } .visible-md { display: none !important; }
}
@media (max-width: 767px) { .hidden-xs { display: none !important; } .visible-sm, .visible-md, .visible-lg { display: none !important; } }
/* Marked for both phone and small tablet, as Bootstrap 3 shows it: the two rules above each hid it
   at one of the two sizes, so it never showed (features/admin-mobile, bug 3: the template editor's
   Save, 2026-10-14). */
@media (max-width: 991px) { .visible-xs.visible-sm { display: block !important; } }
.clearfix::after, .row::after { content: ""; display: table; clear: both; }
.pull-right { float: right; } .pull-left { float: left; }
.row > .pull-right, .btn-toolbar .pull-right, h3 .pull-right, h4 .pull-right, .panel-heading .pull-right { float: none; margin-left: auto; }
.center-block { display: block; margin-left: auto; margin-right: auto; }
.text-center { text-align: center; } .text-right { text-align: right; } .text-left { text-align: left; } .nowrap, .no-wrap { white-space: nowrap; }
.text-muted, .muted, .text-grey { color: var(--muted); } .text-success { color: var(--ok); } .text-danger, .text-error, .Xtext-danger { color: var(--bad); } .text-warning { color: var(--warn); } .text-info { color: var(--info); } .text-important, .txt-important { font-weight: 600; }
.sml, .text-smaller, small { font-size: 14px; color: var(--muted); }
.img-responsive { display: block; max-width: 100%; height: auto; } .img-thumbnail, .thumbnail { padding: 4px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); }
.well { padding: 14px 16px; margin-bottom: 16px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius); } .well-sm { padding: 8px 10px; }
/* an old page that puts a well straight inside a row and columns inside the well (the map center
   block on Location & directions): the well fills the row and lays its columns out as a row */
.row > .well { flex: 0 0 100%; max-width: 100%; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 0; margin-left: 10px; margin-right: 10px; }
.row > .well > [class*="col-"] { padding: 0 8px; }
.list-group { list-style: none; margin: 0 0 16px; padding: 0; }
.list-group-item { display: block; padding: 9px 12px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); margin-bottom: -1px; }
.list-group-item:first-child { border-radius: var(--radius-sm) var(--radius-sm) 0 0; } .list-group-item:last-child { border-radius: 0 0 var(--radius-sm) var(--radius-sm); margin-bottom: 0; }
a.list-group-item:hover { background: var(--surface-2); text-decoration: none; }
.list-group-item.active { background: var(--accent-soft); color: var(--accent); border-color: var(--line); }
.list-group-item-heading { margin: 0; font-size: 16px; } .list-group-item-text { color: var(--muted); }
.list-unstyled, .list-inline { list-style: none; padding: 0; } .list-inline > li { display: inline-block; margin-right: 10px; }
.breadcrumb { list-style: none; padding: 0; margin: 0 0 12px; display: flex; flex-wrap: wrap; gap: 6px; color: var(--muted); }
.breadcrumb > li + li::before { content: "/"; padding-right: 6px; color: var(--line-strong); }
.disabled { opacity: .6; }
.fa-stack { display: inline-block; width: 2em; height: 2em; line-height: 2em; position: relative; vertical-align: middle; }
.fa-stack-1x, .fa-stack-2x { position: absolute; left: 0; width: 100%; text-align: center; } .fa-stack-2x { font-size: 2em; } .fa-stack-1x { line-height: inherit; }
.tblOverFlow { overflow-x: auto; }
/* old pages print light gray boxes inline (background-color:#f0f0f0 with a silver or grey border,
   44 places on 2026-09-19); they take the second surface and the line color so dark mode holds */
[style*="background-color:#f0f0f0"], [style*="background-color: #f0f0f0"], [style*="background-color:#eee"], [style*="background-color:#eeeeee"] { background-color: var(--surface-2) !important; color: var(--ink); }
[style*="silver solid"], [style*="solid silver"], [style*="grey solid"], [style*="solid grey"], [style*="gray solid"], [style*="solid gray"] { border-color: var(--line) !important; }

/* sections: the one box shape, printed by core::Builders::BuildSimpleTitleFormFieldElementStart/End.
   A top-level .pb-sec is a card; a .pb-sec inside another is a titled section of that card. */
.pb-sec { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); margin-bottom: 20px; }
.pb-sec-head { display: flex; align-items: center; gap: 10px; padding: 12px 18px; border-bottom: 1px solid var(--line); }
.pb-sec-head h4, .pb-sec-head h3 { margin: 0; font-size: 17px; font-weight: 600; color: var(--ink); flex: 1 1 auto; }
.pb-sec-head .options { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.pb-sec-head .options a.pb-sec-collapse { color: var(--muted); padding: 2px 4px; }
.pb-sec-head .options a.pb-sec-collapse:hover { color: var(--ink); text-decoration: none; }
.pb-sec-head.pb-sec-toggle { cursor: pointer; }
/* On a phone a card's header buttons drop under its title and wrap, instead of running off the
   edge (2026-09-25: Site Overview > Error Pages cut "Open on the Error Pages page" in half). */
@media (max-width: 767px) {
  .pb-sec-head { flex-wrap: wrap; }
  .pb-sec-head .options { flex-wrap: wrap; justify-content: flex-start; margin-left: 0; }
  .pb-sec-head h4, .pb-sec-head h3 { min-width: 0; }
}
.pb-sec-head.rounded-bottom { border-bottom-color: transparent; }
.pb-sec-head .nav-tabs { margin: -12px -18px; border: 0; flex: 1 1 auto; }
.pb-sec-head .nav-tabs > li > a { padding: 12px 16px; }
.pb-sec-body { padding: 16px 18px; }
.pb-sec-body.padd0, .pb-sec-body.p0 { padding: 0; } .pb-sec-body.padd5 { padding: 5px; }
.pb-sec-body > .list-group { margin: 0; } .pb-sec-body > .list-group .list-group-item:first-child { border-top: 0; }
.pb-sec-foot { display: flow-root; padding: 12px 18px; border-top: 1px solid var(--line); background: var(--surface-2); border-radius: 0 0 var(--radius) var(--radius); }
.pb-sec .pb-sec { background: transparent; border: 0; border-radius: 0; box-shadow: none; margin: 0; }
/* a line between sections of one card, including sections laid side by side in a grid row */
.pb-sec .pb-sec + .pb-sec, .pb-sec .row + .pb-sec,
.pb-sec .pb-sec + .row:has(> [class*="col-"] > .pb-sec),
.pb-sec .row:has(> [class*="col-"] > .pb-sec) + .row:has(> [class*="col-"] > .pb-sec) { border-top: 1px solid var(--line); margin-top: 18px; padding-top: 16px; }
@media (max-width: 767px) { .pb-sec .row > [class*="col-"] + [class*="col-"] > .pb-sec { border-top: 1px solid var(--line); margin-top: 18px; padding-top: 16px; } }
.pb-sec .pb-sec > .pb-sec-head { padding: 0 0 10px; border-bottom: 0; }
.pb-sec .pb-sec > .pb-sec-head .nav-tabs { margin: 0; }
.pb-sec .pb-sec > .pb-sec-body { padding: 0; }
.pb-sec .pb-sec > .pb-sec-foot { padding: 10px 0 0; background: transparent; border-radius: 0; }

/* panels: the old blue-bar box, still printed raw by a few pages (calendar registrations, mappoints overlays, the API reference) */
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); margin-bottom: 20px; }
.panel-heading { display: flex; align-items: center; gap: 10px; padding: 12px 18px; border-bottom: 1px solid var(--line); border-radius: var(--radius) var(--radius) 0 0; cursor: default; }
.panel-heading h4, .panel-heading h3, .panel-title { margin: 0; font-size: 17px; font-weight: 600; color: var(--ink); flex: 1 1 auto; }
.panel-heading .options { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.panel-heading .options a.panel-collapse { color: var(--muted); padding: 2px 4px; }
.panel-heading .options a.panel-collapse:hover { color: var(--ink); text-decoration: none; }
.panel-heading .nav-tabs { margin: -12px -18px; border: 0; flex: 1 1 auto; }
.panel-heading .nav-tabs > li > a { padding: 12px 16px; }
.panel-body { padding: 16px 18px; }
.panel-body.padd0, .panel-body.p0 { padding: 0; } .panel-body.padd5 { padding: 5px; } .panel-body.noPaddingTop { padding-top: 0; } .panel-body.noPaddingBottom { padding-bottom: 0; }
.panel-footer { padding: 12px 18px; border-top: 1px solid var(--line); background: var(--surface-2); border-radius: 0 0 var(--radius) var(--radius); }
.panel .panel { box-shadow: none; border-color: var(--line); }
.panel .panel > .panel-heading { background: var(--surface-2); }
.panel .panel > .panel-heading h4 { font-size: 16px; }
.panel-search-results-wrap > .panel-heading h4, .panel-action-edit-form > .panel-heading h4 { font-size: 17px; }
.accordion-item { border: 1px solid var(--line); border-radius: var(--radius-sm); margin-bottom: 8px; overflow: hidden; }
.accordion-title { display: block; padding: 10px 14px; background: var(--surface-2); color: var(--ink); }
.accordion-title:hover { text-decoration: none; background: var(--sunken); }
.accordion-title h4 { margin: 0; font-size: 16px; }
.accordion-body { padding: 14px; }
/* the old two-column info tables (Location Overview): keep them inside the box whatever the text holds */
.accordion-body > table { width: 100% !important; max-width: 100%; }
.accordion-body > table td.table-basic-data { overflow-wrap: anywhere; }
.accordion-body > table td.table-basic-label { font-weight: 600; padding-right: 10px; white-space: nowrap; vertical-align: top; }

/* CKEditor 4, kama skin: its chrome drawn with the tokens so it follows light and dark. The
   writing area itself is an iframe and gets css/ckeditor-contents.css (see Shared_Form_Interaction). */
.cke_chrome { border-color: var(--line-strong) !important; border-radius: var(--radius-sm) !important; }
.cke_inner { background: var(--cke-chrome) !important; border-radius: var(--radius-sm) !important; }
.cke_toolgroup, .cke_combo_button { background: var(--cke-tool) !important; border: 1px solid var(--line) !important; }
.cke_button_off:hover, a.cke_button_off:focus, a.cke_button_off:active, .cke_combo_off .cke_combo_button:hover, .cke_combo_off .cke_combo_button:focus { background: var(--cke-hover) !important; }
.cke_button_on, .cke_button_on:hover, a.cke_button_on:focus { background: var(--accent-soft) !important; }
.cke_button_icon, .cke_combo_open, .cke_button_arrow, .cke_resizer { filter: var(--cke-icon); }
.cke_combo_text, .cke_path_item, .cke_path_empty, .cke_button_label { color: var(--ink) !important; }
.cke_toolbar_separator { border-color: var(--line-strong) !important; }
.cke_wysiwyg_frame, .cke_wysiwyg_div, .cke_source { background-color: var(--surface) !important; color: var(--ink); }
.cke_dialog_body, .cke_dialog_contents, .cke_dialog_footer, .cke_dialog_contents_body, .cke_dialog_page_contents { background: var(--surface) !important; color: var(--ink) !important; border-color: var(--line) !important; }
.cke_dialog_title { background: var(--surface-2) !important; color: var(--ink) !important; border-color: var(--line) !important; }
.cke_dialog_ui_labeled_label, .cke_dialog_ui_labeled_content, .cke_dialog_ui_checkbox_input + label, .cke_dialog label { color: var(--ink) !important; }
.cke_dialog input.cke_dialog_ui_input_text, .cke_dialog input.cke_dialog_ui_input_password, .cke_dialog textarea.cke_dialog_ui_input_textarea, .cke_dialog select.cke_dialog_ui_input_select, .cke_dialog div.cke_dialog_ui_input_text, .cke_dialog div.cke_dialog_ui_input_textarea, .cke_dialog div.cke_dialog_ui_input_select { background: var(--surface) !important; color: var(--ink) !important; border-color: var(--line-strong) !important; }
a.cke_dialog_tab { background: var(--surface-2) !important; color: var(--muted) !important; border-color: var(--line) !important; }
a.cke_dialog_tab_selected { background: var(--surface) !important; color: var(--ink) !important; }
a.cke_dialog_ui_button, a.cke_dialog_ui_button span { background: var(--surface-2) !important; color: var(--ink) !important; border-color: var(--line-strong) !important; }
a.cke_dialog_ui_button_ok, a.cke_dialog_ui_button_ok span { background: var(--accent) !important; color: var(--accent-ink) !important; border-color: var(--accent) !important; }
.cke_panel { background: var(--surface) !important; border-color: var(--line-strong) !important; }

/* spacing helpers the pages use */
.mb0 { margin-bottom: 0 !important; } .mb5 { margin-bottom: 5px !important; } .mb10 { margin-bottom: 10px !important; } .mb15 { margin-bottom: 15px !important; } .mb20 { margin-bottom: 20px !important; }
.mt0 { margin-top: 0 !important; } .mt5 { margin-top: 5px !important; } .mt10 { margin-top: 10px !important; } .mt15 { margin-top: 15px !important; } .mt20 { margin-top: 20px !important; }
.mr5 { margin-right: 5px !important; } .mr10 { margin-right: 10px !important; } .mr15 { margin-right: 15px !important; } .ml5 { margin-left: 5px !important; } .ml10 { margin-left: 10px !important; }
.marg0, .m0, .noMargin { margin: 0 !important; } .marg5 { margin: 5px !important; } .noMarginTop { margin-top: 0 !important; }
.padd0, .p0 { padding: 0 !important; } .padd5 { padding: 5px !important; } .padd10 { padding: 10px !important; } .pt5 { padding-top: 5px !important; } .pl5 { padding-left: 5px !important; } .pl10 { padding-left: 10px !important; }
.row-condensed { margin-bottom: 4px; } .force-condensed-rows .form-group { padding: 4px 0; } .row-border { border-bottom: 1px solid var(--line); }

/* category tree (piece 9) inside the new colors */
/* The category buckets on Categorization, the calendar listing editor and the Categories admin
   screen. They still carry their old col-md-6 col-lg-4 names, but the sizing here ignores those
   and fits as many 340px columns across as the space allows: 3 in the roughly 1280px content
   area of a maximized window, 2 below 734px, 1 below 376px. The grid, not a breakpoint, decides,
   so the buckets fill the row whatever is open beside them.

   Columns, not flex items, on purpose: a flex row shares its space between whatever landed on
   it, so a last row holding two buckets drew them half again as wide as the three above, and the
   same thing happened every time the search filtered a row down. auto-fill keeps the empty
   tracks, so every bucket is the same width on every row. */
.relcnt-adminedit-bucket-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 18px; align-items: start; }
.relcnt-adminedit-bucket-grid > [class*="col-"] { max-width: none; padding: 0; min-height: 0; }
.relcnt-adminedit-bucket-grid > .relcnt-adminedit-bucket-section-wrapper { margin-bottom: 0; }
.relcnt-adminedit-bucket-section-wrapper { margin-bottom: 18px; }
.relcnt-adminedit-bucket-item-header { font-weight: 600; padding: 8px 10px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-sm) var(--radius-sm) 0 0; }
.relcnt-adminedit-bucket-item-body-wrap { border: 1px solid var(--line); border-top: 0; border-radius: 0 0 var(--radius-sm) var(--radius-sm); }
.relcnt-adminedit-bucket-item-body { max-height: 360px; overflow: auto; }
.relcnt-adminedit-category-item { padding: 4px 8px !important; border: 0 !important; border-bottom: 1px solid var(--line) !important; margin: 0 !important; border-radius: 0 !important; }
/* One category row, left to right: the box, the name right beside it, then everything that is
   not the name pushed to the far right. The markup emits the cog first and the name third, which
   is why the pieces are ordered here instead. Before this the cog carried margin-left:auto, so
   the name and the id were dragged over to the right edge with it and the indentation staircase
   read backwards. */
.relcnt-adminedit-category-item .mylabel > a { display: flex; align-items: center; gap: 8px; color: var(--ink); }
.relcnt-adminedit-category-item .mylabel > a::before { font-family: FontAwesome; flex: 0 0 14px; text-align: center; }
.relcnt-adminedit-category-item .mylabel > a:hover { text-decoration: none; }
.relcnt-adminedit-category-item .actual-relcnt-label { min-width: 0; }
.relcnt-adminedit-category-item .mylabel > a > small.muted { order: 1; margin-left: auto; padding-left: 10px; }
.relcnt-adminedit-category-item .mylabel > a > .helpNote-Color { order: 2; margin-right: 0; }
.relcnt-adminedit-category-item .mylabel > a > .fn-modal-click-set { order: 3; margin-left: 0; }
.relcnt-adminedit-category-item .mylabel > a > .Xfn-quick-click-set { order: 4; }
/* the help badge is an empty green pill on every row that has no comment - it was reading as a
   stray dash at the right edge of nearly every line */
.relcnt-adminedit-category-item .helpNote-None { display: none; }
.relcnt-adminedit-category-item .row-has-data > a { color: var(--ok); font-weight: 600; }
.relcnt-adminedit-category-item .row-has-data > a::before { content: "\f00c"; color: var(--ok); }
.relcnt-adminedit-category-item .row-doesnot-haves-data > a::before { content: "\f096"; color: var(--muted); }
.relcnt-adminedit-category-item-wrapper .relcnt-adminedit-category-item-wrapper { padding-left: 18px; }
.relcnt-adminedit-category-item .fn-modal-click-set.btn { padding: 2px 6px; background: transparent; border-color: transparent; color: var(--muted); }
.relcnt-adminedit-category-item .fn-modal-click-set.btn:hover { background: var(--accent-soft); color: var(--accent); }

/* Search across the buckets. Typing two or more characters keeps the matching rows, keeps their
   parents as dimmed context so a category is still readable in its tree, and drops any bucket
   with nothing in it. The height cap comes off while searching so every match is on screen. */
.relcnt-cat-search { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 14px; }
.relcnt-cat-search-field { position: relative; flex: 0 1 380px; }
.relcnt-cat-search-field > .fa { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.relcnt-cat-search-input { padding-left: 32px; }
.relcnt-cat-search-count { font-size: 13px; color: var(--muted); }
.relcnt-cat-search-clear { visibility: hidden; }
.relcnt-cat-search.is-active .relcnt-cat-search-clear { visibility: visible; }
/* Check all matches appears only once a search is actually matching something. With no filter on
   it would mean "tick all 700-odd categories", which is not an action this form should offer. */
.relcnt-cat-search-checkall { display: none; align-items: center; gap: 6px; margin: 0; padding: 4px 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-2); font-weight: 600; }
.relcnt-cat-search.is-active.has-matches .relcnt-cat-search-checkall { display: inline-flex; }
.relcnt-cat-search-checkall:hover { border-color: var(--accent); }
.relcnt-cat-search-checkall:hover label { color: var(--accent); }
/* the input sits beside its label rather than inside it: nesting a checkbox in its own label
   makes one click count twice in some paths, which ticked and immediately unticked the box.
   iCheck replaces the input with its own styled box here, so the skin's own right margin is
   dropped in favour of the pill's gap. */
.relcnt-cat-search-checkall input { margin: 0; cursor: pointer; }
.relcnt-cat-search-checkall .icheckbox_square-blue { margin-right: 0; }
.relcnt-cat-search-checkall label { margin: 0; cursor: pointer; font-weight: 600; }
.relcnt-adminedit-bucket-grid .cat-search-hide { display: none !important; }
.relcnt-adminedit-bucket-grid .cat-search-context > .mylabel > a { opacity: .5; }
.relcnt-adminedit-bucket-grid .cat-search-hit > .mylabel > a { background: var(--accent-soft); border-radius: var(--radius-sm); padding: 0 6px; margin: 0 -6px; }
.relcnt-adminedit-bucket-grid.is-searching .relcnt-adminedit-bucket-item-body { max-height: none; }
/* the connections picker (core::Builders::Shared_Form_MultiSelectList, piece 10): the multi-select
   plugin's two lists in the theme's colors (its own stylesheet prints literal grays) */
.ms-container { width: 100%; background: none !important; }
.ms-container .ms-selectable, .ms-container .ms-selection { background: transparent; color: var(--ink); }
.ms-container .ms-list { border: 1px solid var(--line-strong) !important; border-radius: var(--radius-sm) !important; background: var(--surface) !important; box-shadow: none !important; }
.ms-container .ms-list.ms-focus { border-color: var(--accent) !important; box-shadow: 0 0 0 3px var(--accent-soft) !important; }
.ms-container .ms-list li.ms-elem-selectable, .ms-container .ms-list li.ms-elem-selection { color: var(--ink) !important; border-bottom: 1px solid var(--line) !important; padding: 5px 10px; }
.ms-container .ms-list li.ms-hover, .ms-container .ms-list li.ms-elem-selectable:hover, .ms-container .ms-list li.ms-elem-selection:hover { background: var(--accent-soft) !important; color: var(--accent) !important; }
.ms-container .ms-list li.ms-optgroup-label { color: var(--muted) !important; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.ms-container .ms-list li.ms-optgroup-label span { color: inherit; }
.ms-container .ms-selectable .search-input, .ms-container .ms-selection .search-input { margin-bottom: 6px; }

/* the contacts repeater (contactssimple::ContactsSimple::makeTheContactFields, piece 6): one
   group per contact type with its Add button in the heading, one flex row per entry whose
   Bootstrap col-* cells become flex items with a caption above each control; the Primary button
   is a check (on) or a circle (off), never red */
.contact_section { margin-bottom: 18px; }
.contact_section .contact_header { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.contact_section .contact_header h3 { float: none; margin: 0; font-size: 16px; font-weight: 600; display: flex; align-items: center; gap: 10px; }
.contact_section .contact_header > .clearfix { display: none; }
.contact-section { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-2); margin-bottom: 8px; }
.contact-section.clearfix::after { display: none; }
.contact-section > [class*="col-"] { flex: 0 1 auto; max-width: none; padding: 0; min-height: 0; }
.contact-section > .col-md-2 { flex: 1 1 150px; max-width: 220px; }
.contact-section > .col-md-4 { flex: 1 1 260px; }
.contact-section > .col-md-6 { flex: 1 1 320px; }
.contact-section > .col-md-2.pull-right { flex: 0 0 auto; float: none; margin-left: auto; max-width: none; }
.contact-section > .col-md-2.pull-right > small, .contact-section > .col-md-2.pull-right > br { display: none; }
.contact-section > .col-md-2.pull-right .btn { float: none; }
.contact-section > .col-md-2:has(> input.hidden) { display: none; }
.contact-section small.text-muted { display: block; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; white-space: nowrap; }
.contact-section .contact_section-order { width: 64px; text-align: center; }
/* the Primary toggle shared by the contacts repeater and the town connections: the widgets' JS
   swaps btn-danger (on) and btn-default (off); here on is a green check, off a muted circle */
.contact-section .click-lbl.btn, .phys-loc-connection .click-lbl.btn { padding: 4px 10px; font-size: 14px; }
.contact-section .click-lbl.btn::before, .phys-loc-connection .click-lbl.btn::before { font-family: FontAwesome; }
.contact-section .click-lbl.btn-danger, .phys-loc-connection .click-lbl.btn-danger { background: var(--ok-soft); color: var(--ok); border-color: transparent; }
.contact-section .click-lbl.btn-danger::before, .phys-loc-connection .click-lbl.btn-danger::before { content: "\f00c"; }
.contact-section .click-lbl.btn-danger:hover, .contact-section .click-lbl.btn-danger:focus, .phys-loc-connection .click-lbl.btn-danger:hover, .phys-loc-connection .click-lbl.btn-danger:focus { background: var(--ok-soft); color: var(--ok); }
.contact-section .click-lbl.btn-default, .phys-loc-connection .click-lbl.btn-default { color: var(--muted); }
.contact-section .click-lbl.btn-default::before, .phys-loc-connection .click-lbl.btn-default::before { content: "\f10c"; }
/* view mode (editOrView => info, the Overview): plain lines, the type as a muted label, never a badge */
.contact-section:not(:has(.contact-primary)) { background: transparent; border: 0; padding: 4px 0; gap: 6px 10px; align-items: baseline; }
.contact-section > span.label { display: inline; padding: 0; border-radius: 0; background: transparent; color: var(--muted); font-size: inherit; font-weight: 600; white-space: normal; }
.contact-section > span.data { color: var(--ink); }
/* the rare full-address and full-name types print their inputs inside one span with text labels */
.contact-section > span.form-control { float: none; flex: 1 1 100%; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 8px; align-items: center; border: 0; background: transparent; padding: 0; font-size: 14px; color: var(--muted); }
.contact-section > span.form-control > br { display: none; }
.contact-section textarea.form-control { min-height: 60px; }
@media (max-width: 767px) { .contact-section > [class*="col-"] { flex-basis: 100%; max-width: none; } .contact-section > .col-md-2.pull-right { margin-left: 0; } }
/* the town and zip connections (zips_plus Obj_HTML_AutoCompleteBox, piece 8): one line per
   connected town with the Primary toggle, the name and a remove button; the search box below */
#phys-loc-wrapper .phys-loc-connection { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-2); margin-bottom: 8px; }
#phys-loc-wrapper .phys-loc-connection.clearfix::after, #phys-loc-wrapper .phys-loc-connection > hr { display: none; }
#phys-loc-wrapper .phys-loc-connection .click-lbl { order: 1; }
#phys-loc-wrapper .phys-loc-connection .phys-loc-name { order: 2; flex: 1 1 auto; min-width: 0; }
#phys-loc-wrapper .phys-loc-connection .click-delete { order: 3; float: none; margin: 0 0 0 auto; }
.sel2addNewConnection.well { padding: 10px 12px; margin: 0 0 10px; display: flex; align-items: center; gap: 10px; }
.sel2addNewConnection.well.hidden { display: none; }
.sel2addNewConnection.well > [class*="col-"] { padding: 0; max-width: none; flex: 1 1 auto; }
.sel2addNewConnection.well > .col-md-2 { flex: 0 0 auto; }
.sel2addNewConnection.well .cancelAddNewConnection { float: none; margin: 0; }
/* the map center picker (piece 12): a Google map in a box with the theme's corners */
div:has(> .gm-style) { border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; }
/* Photos & video (media::utilities::Uploader and Galleries_Many, piece 11) */
.pb-media-galbar { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 10px 16px; margin-bottom: 14px; }
.pb-media-galbar form { display: flex !important; flex-wrap: wrap; align-items: center; gap: 8px; } /* !important: BuildHTML_StartForm prints display:inline on it */
.pb-media-galbar form .pb-list-caption { margin: 0; }
.pb-media-galbar form select.form-control { width: auto; min-width: 240px; max-width: 100%; }
.pb-media-galcount { display: block; margin-bottom: 8px; color: var(--muted); }
/* the upload box: the blueimp button bar, its progress bar and the rows of files being sent */
.pb-media-upload { margin-bottom: 18px; padding: 14px 16px; border: 1px dashed var(--line-strong); border-radius: var(--radius); background: var(--surface-2); }
.pb-media-upload .well { margin: 0; padding: 0; border: 0; background: transparent; }
.pb-media-upload .fileupload-buttonbar { margin: 0; }
.pb-media-upload .fileupload-buttonbar > .col-lg-12 { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 0; }
.pb-media-upload .fileupload-progress { padding: 0; margin-top: 10px; }
.pb-media-upload .fileupload-progress.fade:not(.in) { display: none; } /* the blueimp UI adds .in while sending */
.pb-media-upload .fileupload-progress .progress { margin: 0; }
.pb-media-upload .progress-extended { color: var(--muted); font-size: 13px; }
.pb-media-upload .uploadexmapletbl { margin: 10px 0 0; }
.pb-media-upload .uploadexmapletbl:not(:has(tr)) { display: none; }
.pb-media-upload .uploadexmapletbl .preview img { max-width: 120px; height: auto; border-radius: var(--radius-sm); }
.pb-media-upload #uploadimgjs__AddAllBtn { margin-top: 10px; }
.fileinput-button { position: relative; overflow: hidden; }
.fileinput-button input { position: absolute; top: 0; right: 0; margin: 0; opacity: 0; font-size: 200px; direction: ltr; cursor: pointer; }
/* the primary image and the logo, side by side */
.pb-media-primaries { margin-bottom: 4px; }
.pb-media-thumb { display: flex; justify-content: center; align-items: center; min-height: 48px; margin-bottom: 10px; border-radius: var(--radius-sm); overflow: hidden; background: var(--sunken); }
.pb-media-thumb img { display: block; max-width: 100%; height: auto; border: 0 !important; }
.pb-media-thumb img[style*="height:1px"] { display: none; }
.pb-media-editlink { margin-bottom: 10px; }
.pb-media-slot .pb-media-thumb img { width: auto !important; max-width: 100%; max-height: 200px; }
.loopmediaimage { margin: 0; }
.loopmediaimage > [class*="col-"] { flex-basis: 100%; max-width: 100%; padding: 0; }
/* the image slots: a grid of tiles; empty slots hide behind the toggle button except the next free one */
.pb-media-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; margin: 0; }
.pb-media-slots > .pb-media-slot { flex: none; max-width: none; padding: 0; min-width: 0; }
.pb-media-slot > div > .pb-sec { border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; height: 100%; }
.pb-media-slot.is-empty > div > .pb-sec { border-style: dashed; }
.pb-media-slot .pb-sec-head h4 { font-size: 14px; }
.pb-media-slot .loopmediaimage > .col-md-9 > div > div { padding: 0 !important; }
.pb-media-slot .form-group { padding: 3px 0 !important; }
.pb-media-slot .form-group > .control-element { flex-basis: 100%; max-width: 100%; padding: 0; }
/* A gallery's Files tab (media::utilities::MediaFiles_Many): one tile per image. Its old float
   columns (col-md-4 plus clearfix breaks) stacked into one long column once the admin moved off
   floats; a grid gives three or more across on a desktop and one on a phone. */
.pb-gallery-files { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; margin: 0 0 14px; }
.pb-gallery-file { position: relative; min-width: 0; padding: 10px; border: 1px solid var(--line); border-radius: var(--radius); }
/* Tile states read straight off the buttons the page's own JS already flips, so they follow every
   click with no script: the primary image (Primary button filled) gets an accent frame and badge;
   a hidden one (Unhide, btn-info) and one marked for removal (Undo remove, btn-danger) fade, the
   removal also going gray with a red frame. Tiles stay in place: their position is the saved order. */
.pb-gallery-file:has(.media-data-makeprimarylink.btn-primary) { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.pb-gallery-file:has(.media-data-makeprimarylink.btn-primary)::before { content: "Primary"; }
.pb-gallery-file:has(.btn-info)::after { content: "Hidden"; background: var(--warn); }
.pb-gallery-file:has(.btn-danger)::after { content: "Will be removed"; background: var(--bad); }
.pb-gallery-file::before, .pb-gallery-file::after { position: absolute; top: 16px; z-index: 1; padding: 1px 8px; border-radius: 999px; color: #fff; font-size: 12px; font-weight: 600; pointer-events: none; }
.pb-gallery-file::before { left: 16px; background: var(--accent); color: var(--accent-ink); }
.pb-gallery-file::after { right: 16px; }
.pb-gallery-file:has(.btn-info) img { opacity: .45; }
.pb-gallery-file:has(.btn-danger) { border-color: var(--bad); }
.pb-gallery-file:has(.btn-danger) img { opacity: .3; filter: grayscale(1); }
.pb-gallery-file img { display: block; width: 100%; height: auto; margin-bottom: 6px; border-radius: var(--radius-sm); }
.pb-gallery-file .btn-group-vertical { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; width: 100%; margin: 6px 0; }
.pb-gallery-file .btn-group-vertical > .btn { margin: 0; border-radius: var(--radius-sm); }
.pb-gallery-file .pb-gallery-ids input { display: block; width: 100%; border: 0; background: transparent; color: var(--muted); font-size: 11px; text-align: center; }
.pb-media-slot .input-group-addon:first-child { min-width: 112px; font-size: 13px; }
.pb-media-slot .input-group-addon label { margin: 0; font-weight: 400; font-size: 13px; display: inline-flex; gap: 6px; align-items: center; white-space: nowrap; }
.pb-media-slots:not(.show-all) > .pb-media-slot.is-empty:not(.is-next) { display: none; }
.pb-media-slots-toggle { margin-top: 12px; }

/* THE PICTURE CARD (admin4/js/pb-picture.js, features/fix-uploads 2026-10-13): one picture wherever
   the admin shows it, with Change, Replace, Title and credit, Turn or crop. Once the script has drawn
   the card, a slot's old fields (Media ID, the credit copies, the old picture and its links) are
   hidden: they still post, so the page's own save is unchanged. */
.pb-pic { display: grid; grid-template-columns: 168px minmax(0, 1fr); gap: 12px 14px; align-items: start; margin-bottom: 10px; }
.pb-pic-img { display: flex; align-items: center; justify-content: center; width: 168px; aspect-ratio: 3 / 2; border-radius: var(--radius-sm); overflow: hidden; background: var(--sunken); color: var(--muted); font-size: 28px; }
.pb-pic-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pb-pic-img.is-broken { padding: 8px; text-align: center; border: 1px dashed var(--line-strong); }
.pb-pic-body { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.pb-pic-title { font-weight: 600; overflow-wrap: anywhere; }
.pb-pic-credit, .pb-pic-meta { color: var(--muted); overflow-wrap: anywhere; }
.pb-pic-meta { display: flex; flex-wrap: wrap; gap: 2px 14px; font-size: 14px; }
.pb-pic-meta .k, .pb-pic-facts .k { margin-right: 6px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.pb-pic-meta .pb-copyable, .pb-pic-facts .pb-copyable { color: var(--ink); overflow-wrap: anywhere; cursor: pointer; }
.pb-pic-blank { color: var(--muted); font-weight: 400; font-style: italic; }
.pb-pic-uses { align-self: flex-start; padding: 0; border: 0; background: none; color: var(--accent); text-decoration: underline; text-underline-offset: 2px; font: inherit; font-size: 14px; cursor: pointer; }
.pb-pic-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.pb-pic-help { color: var(--muted); font-size: 14px; }
.pb-pic-help.is-bad { color: var(--bad); }
.pb-pic-offer { margin-top: 8px; padding: 8px 10px; border-radius: var(--radius-sm); background: var(--warn-soft); color: var(--ink); font-size: 14px; }
.pb-pic-offer .btn { margin-top: 6px; }
.pb-pic.is-empty .pb-pic-title { color: var(--muted); }
.pb-pic-on .pb-pic-legacy, .pb-pic-replaced { display: none !important; }
.pb-media-slot .pb-pic { grid-template-columns: 1fr; }
/* A slot's own rows (Show, Order, Caption with "Use media title") wrap inside the tile instead of
   running past it: at three tiles across they pushed the whole page 100px sideways (2026-10-13). */
.pb-media-slot .input-group { display: flex; flex-wrap: wrap; width: 100%; }
.pb-media-slot .input-group > .form-control { flex: 1 1 120px; min-width: 0; width: auto; }
.pb-media-slot .input-group > .input-group-addon { display: flex; align-items: center; width: auto; }
.pb-media-slot .loopmediaimage .row > [class*="col-"] { flex: 1 1 100%; max-width: 100%; padding: 0; }
.pb-media-slot .pb-pic-img { width: 100%; }
@media (max-width: 640px) {
  .pb-pic { grid-template-columns: 1fr; }
  .pb-pic-img { width: 100%; }
  .pb-pic-actions .btn { min-height: 40px; }
}
/* THE RECORD BOX (data-pb-pic-mode="record", features/fix-uploads 12-plan-record-box.md, 2026-10-14):
   on a record's page a picture is the picture, "i" top right, a gear bottom right and the caption
   under it. The record's old rows are hidden; their inputs still post. */
.pb-pic-rec-host { display: block !important; margin: 0; }
.pb-pic-rec-host > :not(.pb-pic):not(.pb-pic-rec-cap):not(.pb-pic-rec-more) { display: none !important; }
.pb-pic.pb-pic-rec { display: block; margin-bottom: 6px; }
/* The main picture and the logo: a picture you can judge, not the page's full width. */
#primary-edit-form-container.pb-pic-rec-host, #primary-edit-form-logo-container.pb-pic-rec-host { max-width: 520px; }
.pb-pic-rec-fig { position: relative; }
.pb-pic-rec-img { display: block; width: 100%; padding: 0; border: 0; border-radius: var(--radius-sm); overflow: hidden; background: var(--sunken); aspect-ratio: 3 / 2; cursor: zoom-in; }
.pb-pic-rec-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pb-pic-rec-img.is-broken { padding: 8px; color: var(--muted); font-size: 14px; cursor: default; }
.pb-pic-rec.is-hidden .pb-pic-rec-img img { opacity: .45; }
.pb-pic-rec-tags { position: absolute; left: 8px; top: 8px; right: 52px; display: flex; flex-wrap: wrap; gap: 4px; pointer-events: none; }
.pb-pic-rec-i, .pb-pic-rec-gear { position: absolute; right: 8px; width: 34px; height: 34px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: var(--surface); color: var(--ink); box-shadow: 0 2px 8px rgba(0,0,0,.3); font: 700 15px/1 inherit; cursor: pointer; }
.pb-pic-rec-i { top: 8px; color: var(--accent); }
.pb-pic-rec-gear { bottom: 8px; font-size: 17px; }
.pb-pic-rec-i:hover, .pb-pic-rec-gear:hover { background: var(--surface-2); }
.pb-pic-rec-pop, .pb-pic-rec-menu { position: absolute; z-index: 20; right: 8px; background: var(--surface); color: var(--ink); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); box-shadow: 0 8px 24px rgba(0,0,0,.25); }
.pb-pic-rec-pop { top: 48px; width: min(300px, calc(100% - 16px)); padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.pb-pic-rec-pop[hidden], .pb-pic-rec-menu[hidden] { display: none; }
.pb-pic-rec-row { display: flex; flex-wrap: wrap; gap: 2px 8px; align-items: baseline; min-width: 0; overflow-wrap: anywhere; }
.pb-pic-rec-row .k { min-width: 52px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.pb-pic-rec-row .pb-copyable { color: var(--ink); cursor: pointer; }
.pb-pic-rec-credit { display: inline-flex; flex-wrap: wrap; gap: 2px 10px; align-items: baseline; min-width: 0; }
.pb-pic-rec-link { padding: 0; border: 0; background: none; color: var(--accent); font: inherit; font-size: 14px; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.pb-pic-rec-menu { bottom: 48px; min-width: 190px; padding: 4px; display: flex; flex-direction: column; }
.pb-pic-rec-menu button { padding: 8px 10px; border: 0; border-radius: 6px; background: none; color: var(--ink); font: inherit; font-size: 14px; text-align: left; cursor: pointer; }
.pb-pic-rec-menu button:hover, .pb-pic-rec-menu button:focus-visible { background: var(--surface-2); }
.pb-pic-rec-menu button.is-bad { color: var(--bad); }
.pb-pic-rec-cap, .pb-pic-rec-more { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; }
.pb-pic-rec-cap[hidden], .pb-pic-rec-more[hidden] { display: none; }
.pb-pic-rec-k { margin: 4px 0 0; font-size: 13px; font-weight: 600; color: var(--muted); }
.pb-pic-rec-check label { display: inline-flex; gap: 6px; align-items: center; margin: 0; font-weight: 400; }
.pb-pic-rec-empty { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 18px; border: 1px dashed var(--line-strong); border-radius: var(--radius-sm); background: var(--surface-2); }
/* "This post only or all N records", asked before the first turn or crop of a shared picture */
.pb-pic-scope { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.pb-pic-choice { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 8px; align-items: start; margin: 0; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); font-weight: 400; cursor: pointer; }
.pb-pic-choice:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.pb-pic-choice input { margin-top: 4px; }
.pb-pic-choice b { display: block; font-weight: 600; }
/* Photos and files > Add pictures in place: the gallery the pictures go into, one line at the top */
.pb-pic-into { display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: baseline; margin-bottom: 12px; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-2); }
.pb-pic-into b { font-weight: 600; }
/* A place with no galleries yet: one sentence and the Add button */
.pb-gal-empty { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 20px; border: 1px dashed var(--line-strong); border-radius: var(--radius); background: var(--surface-2); }
.pb-gal-empty h3 { margin: 0; font-size: 18px; }
.pb-gal-empty p { margin: 0; max-width: 60ch; }
.pb-pic-dialog.pb-pic-lb { width: min(1200px, calc(100vw - 32px)); }
.pb-pic-lb img { display: block; max-width: 100%; max-height: 75vh; margin: 0 auto; border-radius: var(--radius-sm); }
.pb-pic-lb-foot { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; justify-content: space-between; margin-top: 10px; }
@media (max-width: 640px) {
  .pb-pic-rec-i, .pb-pic-rec-gear { width: 40px; height: 40px; }
  .pb-pic-rec-pop { top: 54px; }
  .pb-pic-rec-menu { bottom: 54px; }
  .pb-pic-rec-menu button { min-height: 44px; }   /* a finger's tap, as the phone rules elsewhere (2026-10-17) */
}
/* The cover picture on a phone or a tablet (2026-10-17, Jeff: "on the phone that just take up too
   much room... half a page scroll before I get to the form"): pb-picture.js coverForPhone moves the
   card to the top of the writing under 992px, so there it is one compact row, a 160px picture with
   its caption beside it, instead of the full-width picture. The same picture, "i", gear and caption;
   their pop-ups open over the caption, not past the card's left edge. */
@media (max-width: 991px) {
  .pb-pic-coverslot #primary-edit-form-container.pb-pic-rec-host { display: grid !important; grid-template-columns: 160px minmax(0, 1fr); gap: 0 12px; align-items: start; max-width: none; }
  .pb-pic-coverslot .pb-pic-rec-host > .pb-pic.pb-pic-rec { grid-column: 1; grid-row: 1 / span 2; margin: 0; }
  .pb-pic-coverslot .pb-pic-rec-host > .pb-pic-rec-cap { grid-column: 2; margin: 0; }
  .pb-pic-coverslot .pb-pic-rec-host > .pb-pic-rec-more { grid-column: 1 / -1; margin: 8px 0 0; }
  .pb-pic-coverslot .pb-pic-rec-i { top: 6px; right: 6px; }
  .pb-pic-coverslot .pb-pic-rec-gear { bottom: 6px; right: 6px; }
  .pb-pic-coverslot .pb-pic-rec-tags { left: 6px; top: 6px; right: 50px; }
  .pb-pic-coverslot .pb-pic-rec-pop { left: 0; right: auto; width: min(300px, calc(100vw - 72px)); }
  .pb-pic-coverslot .pb-pic-rec-menu { left: 0; right: auto; bottom: auto; top: calc(100% + 6px); }
}
/* the panel: a dialog, centered on a computer, the whole screen on a phone */
.pb-pic-dialog { width: min(760px, calc(100vw - 32px)); max-height: calc(100vh - 48px); padding: 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); color: var(--ink); box-shadow: 0 12px 40px rgba(0,0,0,.35); }
.pb-pic-dialog[open] { display: flex; flex-direction: column; }
.pb-pic-dialog::backdrop { background: rgba(10, 12, 16, .55); }
.pb-pic-dhead { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.pb-pic-dhead h3 { margin: 0; font-size: 18px; }
.pb-pic-close { border: 0; background: none; color: var(--muted); font-size: 18px; min-width: 40px; min-height: 40px; }
.pb-pic-dbody { padding: 14px 16px; overflow: auto; flex: 1 1 auto; }
.pb-pic-dfoot { display: flex; justify-content: flex-end; gap: 8px; padding: 10px 16px; border-top: 1px solid var(--line); background: var(--surface-2); }
.pb-pic-dfoot:empty { display: none; }
.pb-pic-msg { padding: 0 16px; }
.pb-pic-msg:not(:empty) { padding: 8px 16px; background: var(--info-soft); color: var(--ink); }
.pb-pic-msg.is-bad { background: var(--bad-soft); color: var(--bad); }
.pb-pic-msg.is-ok { background: var(--ok-soft); color: var(--ok); }
@media (max-width: 640px) {
  .pb-pic-dialog { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; border: 0; border-radius: 0; }
  .pb-pic-dfoot .btn { flex: 1 1 auto; min-height: 44px; }
}
.pb-pic-default { margin: -6px 0 12px; }
.pb-pic-default .pb-pic-defaultbtn { padding: 0; vertical-align: baseline; font-size: inherit; }
.pb-pic-tabs { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; margin-bottom: 14px; border-bottom: 1px solid var(--line); }
.pb-pic-tab { padding: 8px 6px; border: 0; border-bottom: 3px solid transparent; background: none; color: var(--muted); font-weight: 600; line-height: 1.2; min-height: 44px; }
.pb-pic-tab.is-on { color: var(--accent); border-bottom-color: var(--accent); }
.pb-pic-field { margin-bottom: 10px; }
.pb-pic-label { display: block; margin-bottom: 4px; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.pb-pic-field.has-mine { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 6px; align-items: center; }
.pb-pic-field.has-mine > .pb-pic-label, .pb-pic-field.has-mine > .pb-pic-help { grid-column: 1 / -1; }
.pb-pic-minesetup { margin: 4px 0 12px; padding: 10px 12px; border: 1px dashed var(--line-strong); border-radius: var(--radius-sm); }
.pb-pic-drop { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 140px; margin-bottom: 14px; padding: 18px; border: 2px dashed var(--line-strong); border-radius: var(--radius); background: var(--surface-2); color: var(--ink); text-align: center; cursor: pointer; }
.pb-pic-drop .fa { font-size: 30px; color: var(--accent); }
.pb-pic-drop.is-over { border-color: var(--accent); background: var(--accent-soft); }
.pb-pic-drop input[type=file] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.pb-pic-drop-t { font-weight: 600; }
.pb-pic-files { display: flex; flex-direction: column; gap: 12px; }
.pb-pic-file-row { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 12px; padding: 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.pb-pic-file-th { width: 120px; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 6px; background: var(--sunken); }
.pb-pic-file-name { margin-bottom: 6px; font-weight: 600; overflow-wrap: anywhere; }
.pb-pic-file-state { margin-top: 4px; }
.pb-pic-shared { margin-bottom: 4px; }
@media (max-width: 640px) { .pb-pic-file-row { grid-template-columns: 1fr; } .pb-pic-file-th { width: 100%; } }
.pb-pic-urlprev img { display: block; max-width: 100%; max-height: 240px; margin-bottom: 6px; border-radius: var(--radius-sm); background: var(--sunken); }
.pb-pic-urlprev { margin-bottom: 10px; }
.pb-pic-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-bottom: 10px; }
.pb-pic-tile { display: flex; flex-direction: column; gap: 3px; padding: 6px; border: 2px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); text-align: left; font: inherit; font-size: 13px; min-width: 0; }
.pb-pic-tile img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 6px; background: var(--sunken); }
.pb-pic-tile-t { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pb-pic-tile-m, .pb-pic-tile-u { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pb-pic-tile.is-on { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.pb-pic-replace { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.pb-pic-replace figure { margin: 0; }
.pb-pic-replace img { display: block; width: 100%; max-height: 220px; object-fit: contain; border-radius: var(--radius-sm); background: var(--sunken); }
.pb-pic-replace figcaption { margin-top: 4px; color: var(--muted); font-size: 14px; overflow-wrap: anywhere; }
@media (max-width: 640px) { .pb-pic-replace { grid-template-columns: 1fr; } }
.pb-pic-warnbox { margin-bottom: 12px; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--warn-soft); color: var(--ink); }
.pb-pic-useslist ul, .pb-pic-versions ul { margin: 4px 0 8px; padding-left: 20px; }
.pb-pic-kind { display: inline-block; min-width: 0; padding: 0 6px; border-radius: 999px; background: var(--sunken); color: var(--muted); font-size: 12px; font-weight: 700; }
.pb-pic-dtop { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 14px; margin-bottom: 14px; }
.pb-pic-dtop img { width: 200px; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius-sm); background: var(--sunken); }
.pb-pic-facts { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
@media (max-width: 640px) { .pb-pic-dtop { grid-template-columns: 1fr; } .pb-pic-dtop img { width: 100%; } }
.pb-pic-where, .pb-pic-versions { margin-top: 12px; }
.pb-pic-stage { position: relative; width: fit-content; max-width: 100%; margin: 10px auto; user-select: none; touch-action: none; }
.pb-pic-stage img { display: block; max-width: 100%; max-height: 55vh; border-radius: var(--radius-sm); }
.pb-pic-cropbox { position: absolute; border: 2px solid #ffffff; box-shadow: 0 0 0 9999px rgba(0,0,0,.45); cursor: move; touch-action: none; }
.pb-pic-h { position: absolute; width: 22px; height: 22px; border-radius: 50%; background: #ffffff; border: 2px solid var(--accent); }
.pb-pic-h-nw { left: -11px; top: -11px; cursor: nwse-resize; } .pb-pic-h-ne { right: -11px; top: -11px; cursor: nesw-resize; }
.pb-pic-h-sw { left: -11px; bottom: -11px; cursor: nesw-resize; } .pb-pic-h-se { right: -11px; bottom: -11px; cursor: nwse-resize; }
.pb-pic-editrow { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.pb-pic-editrow .btn.active { background: var(--accent-soft); color: var(--accent); }
.pb-pic-addbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 14px; }
/* the small version under a picture an importer draws: Used on N, Replace, Title and credit */
.pb-pic-mini { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 6px 0 2px; }
.pb-pic-mini:empty { display: none; }
.pbimport-altrow { display: flex; flex-wrap: wrap; gap: 8px; align-items: stretch; }
.pbimport-altrow > input { flex: 1 1 220px; min-width: 0; }
.pbimport-altrow > .btn { flex: 0 0 auto; white-space: nowrap; }
@media (max-width: 640px) { .pbimport-altrow { flex-wrap: wrap; } .pbimport-altrow > .btn { flex: 1 1 100%; min-height: 40px; } }
/* the record Overview (oneListing_FrontPage, oneGuide_FrontPage): the flat map, the town
   connections (zips_plus Obj_HTML_AutoCompleteBox with NoStraightCSSStyling), the category display
   (related_content HTML_Generation_Flat, htmlStyle 3) and the descriptions accordion */
.pb-kv .pb-field { grid-template-columns: 132px minmax(0, 1fr); padding: 7px 0; }
/* the Site Overview's Details tab (core::Admin::admin_Content) */
.pb-site-details .site-detail { margin-bottom: 12px; }
.pb-site-details .site-detail .text-muted { font-weight: 600; font-size: 13px; }
.pb-site-details-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.pb-site-details-head h4 { margin: 0; }
.pb-site-cover { display: block; margin: 0 auto 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.pb-site-editarea { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.pb-site-editarea .form-group > label { font-weight: 600; margin-bottom: 4px; display: block; }
.pb-kv .pb-field > .control-label { padding-top: 0; font-size: 14px; }
.pb-map-flat { text-align: center; margin-bottom: 14px; }
.pb-map-flat img { display: inline-block; max-width: 100%; height: auto; border-radius: var(--radius-sm); border: 1px solid var(--line); }
.pb-map-flat .text-muted { margin-top: 6px; font-size: 13px; }
.pb-towns .State-Name { font-weight: 600; }
.pb-towns .Region-Wrapper { padding-left: 6px; }
.pb-towns .Region-Name { color: var(--muted); font-style: italic; }
.pb-towns .County-Wrapper { padding-left: 14px; }
.pb-towns .County-Name { font-weight: 600; }
.pb-towns .City-Wrapper { padding-left: 16px; }
#category-list-admin-area .outer-most-ul { display: flex; flex-wrap: wrap; margin: 0 -8px; }
#category-list-admin-area .inner-loop-wrapper-1 { padding: 0 8px 12px; }
#category-list-admin-area .div-cats-level-1 { font-weight: 600; font-size: 13px; padding: 4px 8px; margin: 0 0 2px; background: var(--surface-2); border-radius: var(--radius-sm); }
#category-list-admin-area .div-cats-level-2, #category-list-admin-area .div-cats-level-3, #category-list-admin-area .div-cats-level-4, #category-list-admin-area .div-cats-level-5 { padding: 4px 0 4px 16px; border-bottom: 1px solid var(--line); font-size: 14px; }
#category-list-admin-area .div-cats-level-3 { margin-left: 12px; }
#category-list-admin-area .div-cats-level-4 { margin-left: 24px; }
#category-list-admin-area .div-cats-level-5 { margin-left: 36px; }
/* A category name with no spaces ("Northern NJ (Ber|Ess|Hud|...)") may break anywhere: deep in the
   tree it ran past the page edge on a tablet (2026-10-14). */
.actual-label { overflow-wrap: anywhere; }
#category-list-admin-area .actual-label-wrapper i, #category-list-admin-area .actual-label-wrapper em { color: var(--muted); font-size: 13px; }
.accordion-title small { font-weight: 400; }
.accordion-title .pb-acc-count { margin-left: 6px; white-space: nowrap; }
.accordion-title .pb-acc-count::before { content: "("; } .accordion-title .pb-acc-count::after { content: ")"; }
.cke { border-radius: var(--radius-sm) !important; overflow: hidden; }

/* the record layout printed by core::Admin::RecordLayout (style guide 4, "Record"): the section
   list on the left of every part of a one-thing page, and the stats strip on an overview */
.pb-rec { display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: 22px; align-items: start; }
.pb-rec.pb-rec-narrow { grid-template-columns: 200px minmax(0, 1fr); gap: 14px; }
.pb-rec-nav { position: sticky; top: 64px; padding: 6px 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
/* A list taller than the window scrolls on its own, so every section can be reached without
   scrolling the whole page to its end (Jeff, 2026-10-01, on a 69-event import review). An
   import review also keeps clear of its fixed Save bar. */
.pb-rec-nav { max-height: calc(100vh - 80px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.pbimport-page .pb-rec-nav { max-height: calc(100vh - 64px - var(--pbimport-bar, 96px)); }
.pb-rec-nav ul { list-style: none; margin: 0; padding: 0; }
.pb-rec-nav .pb-rec-nav-group { margin: 12px 14px 4px; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); line-height: 1.4; }
.pb-rec-nav a { display: flex; align-items: center; gap: 10px; padding: 7px 14px 7px 11px; border-left: 3px solid transparent; color: var(--ink); text-decoration: none; }
.pb-rec-nav a .fa { color: var(--muted); font-size: 18px; }
.pb-rec-nav a:hover, .pb-rec-nav a:focus { background: var(--surface-2); color: var(--ink); text-decoration: none; }
.pb-rec-nav a[aria-current="page"] { background: var(--accent-soft); border-left-color: var(--accent); color: var(--accent); font-weight: 600; }
.pb-rec-nav a[aria-current="page"] .fa { color: var(--accent); }
.pb-rec-main { min-width: 0; }
/* The phone section picker (core::Admin::RecordLayout::sectionNavPage, 2026-09-25): hidden on a
   wide screen, where the list at the left does the job. */
.pb-rec-picker { display: none; }
/* Two-column editors (page, event, user, template...): the main editing column is
   .edit-form-section-wrapper and the tools column sits beside it. Once they stack, the editing
   comes first; before 2026-09-25 a phone showed Tools, Page Details and Permissions for about
   1,300px before the page's own content. */
@media (max-width: 991px) {
  .row:has(> .edit-form-section-wrapper) { display: flex; flex-direction: column; }
  .row:has(> .edit-form-section-wrapper) > .edit-form-section-wrapper { order: -1; }
}
.pb-stats { display: grid; grid-template-columns: repeat(var(--pb-stats-n, 3), minmax(0, 1fr)); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); margin-bottom: 8px; }
.pb-stats.pb-stats-with-chart { grid-template-columns: repeat(var(--pb-stats-n, 3), minmax(0, 1fr)) minmax(0, 1.6fr); }
.pb-stat { padding: 16px 20px; border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pb-stat:last-child { border-right: 0; }
.pb-stat-k { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.pb-stat-v { font-size: 38px; font-weight: 600; line-height: 1.05; font-variant-numeric: tabular-nums; color: var(--ink); }
.pb-stat-cmp { color: var(--muted); }
.pb-stat-top { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.pb-stat-top a { white-space: nowrap; }
.pb-stat-chart svg { width: 100%; height: 92px; display: block; margin-top: 6px; }
.pb-chart-bar { fill: var(--chart-bar); }
.pb-chart-now { fill: var(--accent); }
.pb-chart-base { stroke: var(--line); }
.pb-stat-axis { display: flex; justify-content: space-between; color: var(--muted); }
.pb-stats-foot { color: var(--muted); margin: 0 0 22px; }
@media (max-width: 1199px) {
  .pb-stats.pb-stats-with-chart { grid-template-columns: repeat(var(--pb-stats-n, 3), minmax(0, 1fr)); }
  .pb-stat-chart { grid-column: 1 / -1; border-top: 1px solid var(--line); }
  .pb-stats.pb-stats-with-chart .pb-stat:nth-last-child(2) { border-right: 0; }
}
/* The picker: one button naming the section (or tab) you are on, which opens every section with
   the current one marked. A swiping row of tabs hid which one was current (Jeff, 2026-09-25). Its
   look at every width; where it shows is set below. */
.pb-rec-picker { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.pb-rec-picker > summary { display: flex; align-items: center; gap: 10px; padding: 12px 14px; cursor: pointer; list-style: none; }
.pb-rec-picker > summary::-webkit-details-marker { display: none; }
.pb-rec-picker-caption { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.pb-rec-picker-current { display: flex; align-items: center; gap: 8px; min-width: 0; font-weight: 600; color: var(--accent); }
.pb-rec-picker-current .fa { font-size: 18px; }
.pb-rec-picker-arrow { margin-left: auto; color: var(--muted); transition: transform .15s; }
.pb-rec-picker[open] .pb-rec-picker-arrow { transform: rotate(180deg); }
.pb-rec-picker-menu { border-top: 1px solid var(--line); padding: 6px 0; }
.pb-rec-picker-menu ul { list-style: none; margin: 0; padding: 0; }
.pb-rec-picker-menu .pb-rec-nav-group { margin: 12px 14px 4px; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); line-height: 1.4; }
.pb-rec-picker-menu a { display: flex; align-items: center; gap: 10px; padding: 11px 14px 11px 11px; border-left: 3px solid transparent; color: var(--ink); text-decoration: none; }
.pb-rec-picker-menu a .fa { color: var(--muted); font-size: 18px; }
.pb-rec-picker-menu a:hover, .pb-rec-picker-menu a:focus { background: var(--surface-2); color: var(--ink); text-decoration: none; }
.pb-rec-picker-menu a[aria-current="page"] { background: var(--accent-soft); border-left-color: var(--accent); color: var(--accent); font-weight: 600; }
.pb-rec-picker-menu a[aria-current="page"] .fa { color: var(--accent); }
/* A Bootstrap tab row of three or more gets the same picker (admin4.js pbTabsToPickers). It shows
   on a phone, and at ANY width when the row would wrap onto a second line (pbTabsFit adds
   .pb-tabs-wrapped; features/admin-mobile 2026-10-15: on tablets the editors' 6 to 9 tabs wrapped,
   and two lines of tabs is where the current one gets lost). In a card header it fills the header
   instead of being a second card. */
.pb-tab-picker { margin-bottom: 12px; font-size: 16px; font-weight: 400; letter-spacing: 0; text-transform: none; }
.pb-sec-head .pb-tab-picker { flex: 1 1 100%; margin: -12px -18px; border: 0; border-radius: 0; box-shadow: none; background: transparent; }
.nav-tabs.pb-tabs-wrapped { display: none; }
.nav-tabs.pb-tabs-wrapped + .pb-tab-picker { display: block; }
/* one arrow in that header: the picker's, not also the card's collapse chevron beside it */
.pb-sec-head:has(.nav-tabs.pb-tabs-wrapped) > .options .pb-sec-collapse { display: none; }
/* TABLETS (features/admin-mobile, 2026-10-15). Sideways (992 to 1199) the section list is 200px;
   upright (768 to 991) it becomes the picker, as on a phone, so the record gets the width. Before,
   a record had 467px of a 1024 screen beside the admin menu and a 232px list. */
@media (min-width: 992px) and (max-width: 1199px) {
  .pb-rec, .pb-rec.pb-rec-narrow { grid-template-columns: 200px minmax(0, 1fr); gap: 16px; }
}
@media (max-width: 991px) {
  .pb-rec, .pb-rec.pb-rec-narrow { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .pb-rec-nav { display: none; }
  .pb-rec-picker:not(.pb-tab-picker) { display: block; }
}
@media (max-width: 767px) {
  .nav-tabs.pb-tabs-has-picker { display: none; }
  .pb-tab-picker { display: block; }
  .pb-sec-head:has(.pb-tab-picker) > .options .pb-sec-collapse { display: none; }
  .pb-stats, .pb-stats.pb-stats-with-chart { grid-template-columns: minmax(0, 1fr); }
  .pb-stat { border-right: 0; border-bottom: 1px solid var(--line); }
  .pb-stat:last-child { border-bottom: 0; }
}

/* ================================================================== responsive */
/* A TABLET SIDEWAYS (900 to 1199) shows the admin menu as its icons only, the desktop "collapse"
   look, whatever the desktop setting is; the menu button opens the full menu over the page, as on
   a phone (admin4.js toggleMenu). Gives the page 184px back (features/admin-mobile, 2026-10-15). */
@media (min-width: 900px) and (max-width: 1199px) {
  .pb-frame, body.collapse-leftbar .pb-frame { grid-template-columns: 64px minmax(0, 1fr); }
  body:not(.pb-menu-open) .pb-side { padding: 10px 8px; }
  body:not(.pb-menu-open) .pb-side ul.acc-menu > li > a span, body:not(.pb-menu-open) .pb-side ul.acc-menu > li > a::after, body:not(.pb-menu-open) .pb-side ul.acc-menu ul.acc-menu { display: none !important; }
  body:not(.pb-menu-open) .pb-side ul.acc-menu > li > a { justify-content: center; padding: 10px 0; }
  body:not(.pb-menu-open) .pb-side li.divider { margin: 8px 4px; }
  body:not(.pb-menu-open) .pb-side li.pb-side-version { display: none; }
  body:not(.pb-menu-open) .pb-side .pb-side-site { display: none; }
  body:not(.pb-menu-open) .pb-side .pb-side-head { font-size: 0; padding: 0; height: 1px; margin: 8px 4px; background: var(--line); }
  .pb-search kbd { display: none; }
  body.pb-menu-open .pb-side { position: fixed; left: 0; top: 52px; bottom: 0; width: 270px; height: auto; z-index: 1035; padding: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.25); }
  /* the open menu leaves the grid, so the page keeps its own column instead of sliding into the 64px one */
  .pb-frame > #page-content { grid-column: 2; }
  body.pb-menu-open.collapse-leftbar .pb-side ul.acc-menu > li > a span, body.pb-menu-open.collapse-leftbar .pb-side ul.acc-menu > li > a::after { display: inline !important; }
  body.pb-menu-open.collapse-leftbar .pb-side ul.acc-menu > li.open > ul.acc-menu { display: block !important; }
  body.pb-menu-open.collapse-leftbar .pb-side ul.acc-menu > li > a { justify-content: flex-start; padding: 7px 12px; }
  body.pb-menu-open.collapse-leftbar .pb-side li.pb-side-version { display: block; }
  body.pb-menu-open.collapse-leftbar .pb-side .pb-side-site { display: flex; }
  body.pb-menu-open.collapse-leftbar .pb-side .pb-side-head { font-size: 13px; padding: 14px 14px 4px; height: auto; margin: 0; background: none; }
  .pb-scrim { display: block; position: fixed; inset: 52px 0 0 0; background: rgba(0,0,0,.35); z-index: 1034; opacity: 0; pointer-events: none; transition: opacity .18s; }
  body.pb-menu-open .pb-scrim { opacity: 1; pointer-events: auto; }
  .pb-admin .pbimport-confirm, body.collapse-leftbar .pbimport-confirm { left: 64px; }
}
@media (max-width: 1200px) { #page-content { padding: 0 20px 40px; } }
@media (max-width: 899px) {
  .pb-search span, .pb-search kbd { display: none; }
  .pb-search { flex: 0 0 auto; max-width: none; padding: 6px 10px; margin-left: 0; }
  .pb-user-name { display: none; }
  .pb-brand { min-width: 0; }
  .pb-brand span { overflow: hidden; text-overflow: ellipsis; }
  .pb-env-dev .pb-top::after { content: "DEV"; padding: 2px 8px; font-size: 12px; }
  .pb-top { overflow: hidden; }
  /* The bar clips its own children (above), so on a phone both top-bar menus open as a full-width
     panel fixed just under the bar instead (features/admin-mobile, bug 1, 2026-10-05). Before this
     they opened inside the clipped bar and showed nothing, so a phone could not switch admins or
     log out. admin4.js sets the top to the bar's bottom when a report strip sits above it. */
  .pb-switch-menu, .pb-user-menu { position: fixed; top: 52px; left: 0; right: 0; width: auto; max-width: none; min-width: 0; max-height: calc(100vh - 52px); overflow-y: auto; border-radius: 0 0 var(--radius) var(--radius); }
  .pb-frame, body.collapse-leftbar .pb-frame { grid-template-columns: minmax(0, 1fr); }
  .pb-side, body.collapse-leftbar .pb-side { position: fixed; left: 0; top: 52px; bottom: 0; width: 270px; z-index: 1035; transform: translateX(-100%); transition: transform .18s ease; padding: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.25); }
  body.pb-menu-open .pb-side { transform: none; }
  body.collapse-leftbar .pb-side ul.acc-menu > li > a span, body.collapse-leftbar .pb-side ul.acc-menu > li > a::after { display: inline !important; }
  body.collapse-leftbar .pb-side ul.acc-menu > li.open > ul.acc-menu { display: block !important; }
  body.collapse-leftbar .pb-side ul.acc-menu > li > a { justify-content: flex-start; padding: 7px 12px; }
  .pb-scrim { display: block; position: fixed; inset: 52px 0 0 0; background: rgba(0,0,0,.35); z-index: 1034; opacity: 0; pointer-events: none; transition: opacity .18s; }
  body.pb-menu-open .pb-scrim { opacity: 1; pointer-events: auto; }
  #page-content { padding: 0 16px 40px; }
  /* No "#wrap > .container { overflow-x: auto }" here any more (features/admin-mobile, bug 2,
     2026-10-14): it made the whole page a scroll box, so the sticky Save bar never stuck on a phone
     or a portrait tablet. A table too wide for its box now scrolls in .pb-wide-table (admin4.js
     pbWrapWideTables); measured on every left-menu page and record section at 390 and 820. */
  #page-heading h1 { font-size: 24px; }
  #page-heading .options { margin-left: 0; flex-basis: 100%; }
  .form-group > .control-label { padding-top: 0; flex-basis: 100%; }
  .modal-dialog { margin: 16px auto; }
}
/* THE TOP OF A PAGE ON A PHONE (features/admin-mobile, 2026-10-15): the breadcrumb (two or three
   lines), the Back button's own row, a two-line title and the page buttons took about 250px
   before the first field. Now one small line goes back (the Back button, which returns to the list
   as it was left; else the nearest parent from the breadcrumb), the title is 20px, and the page
   buttons open from a "more" button at the end of the title line (admin4.js pbHeadMore). */
.pb-head-more { display: none; }
@media (max-width: 767px) {
  #page-heading { padding: 8px 0 12px; }
  #page-heading:has(.admin-back-to-list) .breadcrumb { display: none; }
  #page-heading .breadcrumb { margin: 0 0 4px; }
  #page-heading .breadcrumb > li { display: none; }
  #page-heading .breadcrumb > li:nth-last-child(2) { display: block; }
  #page-heading .breadcrumb > li:nth-last-child(2)::before { content: "\f104"; font-family: FontAwesome; padding-right: 8px; color: var(--muted); }
  #page-heading .breadcrumb > li:only-child { display: block; }
  /* The row wraps. The title takes its own width (at least 8em), so the page buttons, when they
     are not behind "more", go to the next line instead of squeezing the title; 6.3.60 kept the row
     on one line, which printed the Dashboard's title one letter per line (2026-10-15). With a
     "more" button the title starts from zero width, so it and the button always share a line. */
  #page-heading .pb-heading-row { gap: 4px 8px; }
  #page-heading .admin-back-to-list { order: -1; flex: 0 0 100%; display: flex; justify-content: flex-start; align-items: center; gap: 8px; min-height: 32px; margin: 0 !important; padding: 0; border: 0; background: none; box-shadow: none; color: var(--muted); font-size: 14px; }
  #page-heading h1 { font-size: 20px; flex: 1 1 auto; min-width: min(100%, 8em); overflow-wrap: anywhere; }
  #page-heading.pb-has-more h1 { flex-basis: 0; }
  #page-heading.pb-has-more:not(.pb-head-open) .options { display: none; }
  #page-heading.pb-has-more .pb-head-more { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 44px; height: 40px; padding: 0; }
  #page-heading.pb-head-open .pb-head-more { background: var(--accent-soft); color: var(--accent); border-color: transparent; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }

/* ---------------------------------------------------------------------------------------------
   Import review (locations2::Admin::admin_Listing_Import, and the Destination importer's shared
   classes): the Review before write shape, drawn in 11-mockup-import-review.html. The row bar
   answers one question, IS THIS GOING TO HAPPEN WHEN I SAVE: green ticked, orange unticked,
   gray nothing to decide, red something is wrong, blue information only. (2026-09-19) */
.pbrow { border-left: 5px solid var(--bar-none); }
.pbrow.pbrow-on { border-left-color: var(--bar-on); }
.pbrow.pbrow-off { border-left-color: var(--bar-off); }
.pbrow.st-error { border-left-color: var(--bar-bad); }
.pbrow.st-info { border-left-color: var(--bar-info); }
.pbrow.st-same, .pbrow.st-untouched { border-left-color: var(--bar-none); }
tr.pbrow { border-left: 0; }
tr.pbrow > td:first-child { border-left: 5px solid var(--bar-none); }
tr.pbrow.st-info > td:first-child { border-left-color: var(--bar-info); }
tr.pbrow.st-error > td:first-child { border-left-color: var(--bar-bad); }
tr.pbrow.pbrow-on > td:first-child { border-left-color: var(--bar-on); }
tr.pbrow.pbrow-off > td:first-child { border-left-color: var(--bar-off); }

.pill { display: inline-flex; align-items: center; gap: 4px; padding: 1px 9px; border-radius: 999px; font-size: 13px; font-weight: 700; letter-spacing: .02em; white-space: nowrap; vertical-align: middle; }
.pill.ok { background: var(--ok-soft); color: var(--ok); } .pill.warn { background: var(--warn-soft); color: var(--warn); }
.pill.bad { background: var(--bad-soft); color: var(--bad); } .pill.info { background: var(--info-soft); color: var(--info); }
.pill.flat { background: var(--sunken); color: var(--muted); }
/* Chips: the style guide's part for a chosen category or an active filter, each with a remove x.
   Named there since the redesign but not built until the list Filters pane needed them, 2026-09-20.
   Same soft-fill, borderless, fully rounded language as .pill, one step larger because a chip
   carries a button and a real name rather than a status word. */
.chip { display: inline-flex; align-items: center; max-width: 100%; gap: 2px; padding: 3px 4px 3px 12px; border-radius: 999px; background: var(--accent-soft); color: var(--ink); font-weight: 600; line-height: 1.5; vertical-align: middle; }
.chip > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip.flat { background: var(--sunken); color: var(--muted); }
.chip-x { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--muted); font-size: 13px; cursor: pointer; }
.chip-x:hover { background: var(--bad-soft); color: var(--bad); }
.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--bar-none); }
.dot.on { background: var(--bar-on); } .dot.off { background: var(--bar-off); } .dot.bad { background: var(--bar-bad); } .dot.info { background: var(--bar-info); }

.pbimport-mode { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 18px; align-items: center; padding: 14px 18px; margin: 0 0 18px; background: var(--surface); border: 1px solid var(--line); border-left: 6px solid var(--bar-none); border-radius: var(--radius); box-shadow: var(--shadow); }
.pbimport-mode-word { font-size: 24px; font-weight: 700; letter-spacing: .08em; line-height: 1; }
.pbimport-mode-what strong { font-weight: 600; }
.pbimport-mode-links { grid-column: 2; display: flex; gap: 16px; font-size: 14px; }
.pbimport-mode.is-update { border-left-color: var(--bar-info); } .pbimport-mode.is-update .pbimport-mode-word { color: var(--info); }
.pbimport-mode.is-add { border-left-color: var(--bar-on); } .pbimport-mode.is-add .pbimport-mode-word { color: var(--ok); }
.pbimport-mode.is-bad { border-left-color: var(--bar-bad); } .pbimport-mode.is-bad .pbimport-mode-word { color: var(--bad); }
.pbimport-mode.is-waiting .pbimport-mode-word { color: var(--muted); }
/* The waiting-list counter above a review opened from the list (2026-10-05): the ADD banner's
   shape, the count as its word, and a bar of what was saved today. */
.pbimport-mode.is-queue { border-left-color: var(--bar-info); } .pbimport-mode.is-queue .pbimport-mode-word { color: var(--info); letter-spacing: 0; white-space: nowrap; }
.pbimport-mode.is-queue .pbimport-mode-word small { font-size: 15px; font-weight: 600; color: var(--muted); }
.pbimport-queue-foot { grid-column: 1 / -1; display: flex; align-items: center; gap: 14px; }
.pbimport-progress { flex: 1 1 auto; height: 8px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); overflow: hidden; }
.pbimport-progress > span { display: block; height: 100%; min-width: 4px; background: var(--info); border-radius: 999px; }
.pbimport-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; margin: 0 0 18px; }
.pbimport-head h3 { margin: 0; font-size: 20px; font-weight: 600; }
.pbimport-meta { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 14px; color: var(--muted); font-size: 14px; }
.pbimport-meta li { display: contents; }
.pbimport-meta li span { font-weight: 600; color: var(--ink); }
.pbimport-meta li span::after { content: ""; }

.pbimport-block { padding: 12px 14px; margin: 0 0 14px; border-radius: var(--radius); border-left: 5px solid var(--bar-none); background: var(--surface-2); }
.pbimport-block.bad { background: var(--bad-soft); color: var(--bad); border-left-color: var(--bar-bad); }
.pbimport-block.warn { background: var(--warn-soft); color: var(--warn); border-left-color: var(--bar-off); }
.pbimport-block.note { background: var(--info-soft); color: var(--info); border-left-color: var(--bar-info); }
.pbimport-block.ok { background: var(--ok-soft); color: var(--ink); border-left-color: var(--bar-on); }
.pbimport-block h4 { margin: 0 0 6px; font-size: 16px; font-weight: 700; color: inherit; }
.pbimport-block ul { margin: 0; padding-left: 20px; } .pbimport-block li { margin: 4px 0; }
/* Plain links only: this also caught .btn links, so a button in a result block took the text color and
   lost its own (Event importer's "Open the calendar", 1.98:1 in dark mode, 2026-09-27). */
.pbimport-block a:not(.btn) { color: inherit; text-decoration: underline; }
/* Event importer parts (2026-09-27): the default image thumbnail on a new event's Image row, the
   category ticks, and the list of saved events in the Saved block. */
.pbimport-thumb img { display: block; max-width: 240px; width: 100%; height: auto; border-radius: var(--radius-sm); border: 1px solid var(--line); margin-bottom: 6px; }
/* Organizer image or default, side by side on a new event's Image row (2026-09-30). */
.pbimport-imgchoice { display: flex; flex-wrap: wrap; gap: 12px; }
.pbimport-imgopt { flex: 1 1 110px; min-width: 0; max-width: 260px; display: block; font-weight: 400; cursor: pointer; }
.pbimport-imgopt-name { font-weight: 700; margin-bottom: 6px; display: inline-block; }
/* The picture of a Media id typed under "Use a different image" (2026-10-01). [hidden] has to be
   restated: the display: block above outranks the browser's own rule for it. */
.pbimport-idpreview { margin-top: 10px; }
.pbimport-idpreview[hidden], .pbimport-idpreview img[hidden] { display: none; }
/* Pictures from places in the town and nearby, one click each (features/picture-nearby, 2026-10-21). */
.pbimport-near { margin-top: 10px; }
.pbimport-near-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); gap: 8px; margin-top: 6px; }
.pbimport-near-tile { display: flex; flex-direction: column; gap: 2px; padding: 0 0 6px; text-align: left; background: var(--surface); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; cursor: pointer; font: inherit; }
.pbimport-near-tile:hover { border-color: var(--accent); }
.pbimport-near-tile.is-on { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
.pbimport-near-tile img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; background: var(--sunken); }
.pbimport-near-tile .t { padding: 0 6px; font-weight: 600; font-size: 13px; line-height: 1.25; overflow-wrap: anywhere; }
.pbimport-near-tile .m { padding: 0 6px; font-size: 12px; color: var(--muted); line-height: 1.25; }
/* A pasted Media id's title and credit with its "Edit title and credit" link, and the Credit box
   under "Use a different image" (2026-10-02, features/fix-uploads). */
.pbimport-imgmeta { margin: 4px 0 6px; display: grid; gap: 3px; }
.pbimport-imgmeta[hidden], .pbimport-credit[hidden] { display: none; }
.pbimport-imgmeta .k { color: var(--muted); margin-right: 8px; }
.pbimport-imgmeta .pbimport-blank { color: var(--muted); font-style: italic; }
.pbimport-credit { margin-top: 12px; }
.pbimport-credit label.lbl { margin: 0 0 4px; }
.pbimport-creditnote { margin-top: 4px; }
.pbimport-catbox { display: inline-flex; align-items: center; gap: 6px; margin: 0 14px 4px 0; font-weight: 400; }
.pbimport-saved { margin: 4px 0 10px 18px; }

.pbimport-page { padding-bottom: 96px; }
.pbimport-page .pb-rec { grid-template-columns: 260px minmax(0, 1fr); }
.pb-rec-nav-meta { margin-left: auto; display: flex; gap: 4px; align-items: center; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.pb-rec-nav a[aria-current="page"] .pb-rec-nav-meta { color: var(--accent); }
.pb-rec-nav-tally { margin: 10px 14px 4px; padding: 10px 12px; border-radius: 8px; background: var(--surface-2); font-size: 14px; display: grid; gap: 4px; }
.pb-rec-nav-tally div { display: flex; align-items: center; gap: 8px; }
.pb-rec-nav-tally b { margin-left: auto; font-variant-numeric: tabular-nums; }

.pbimport-card { padding: 0; }
.pbimport-sec { padding: 18px 22px 22px; border-bottom: 1px solid var(--line); scroll-margin-top: 72px; }
.pbimport-sec:last-child { border-bottom: 0; }
/* A BATCH review (core::Admin::ImportReview::batchScript): one record at a time, an approve box
   per record in the list, and Previous / Skip / Approve and next in the Save bar. The script adds
   .pbimport-oneview, so without JavaScript every section shows. */
.pbimport-oneview .pbimport-sec { display: none; }
.pbimport-oneview .pbimport-sec.is-shown { display: block; border-bottom: 0; }
.pbimport-noenter { display: none; }
/* After a save from the waiting list: the button to the next place (2026-10-05). */
.pbimport-next { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 16px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); }
/* The record's name under the review's tally, above Decide (2026-10-05). */
.pbimport-railhead { margin-top: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); }
.pbimport-railhead .t { font-weight: 700; color: var(--ink); line-height: 1.3; overflow-wrap: anywhere; }
.pbimport-railhead .s { margin-top: 2px; font-size: 13px; color: var(--muted); }
.pb-rec-nav li.pbimport-hastick, .pb-rec-picker-menu li.pbimport-hastick { display: flex; align-items: center; }
li.pbimport-hastick > .icheckbox_square-blue, li.pbimport-hastick > input[type=checkbox] { flex: 0 0 auto; margin: 0 0 0 14px; }
li.pbimport-hastick > a { flex: 1 1 auto; min-width: 0; padding-left: 10px; }
li.pbimport-hastick > a > .fa { display: none; }
.pb-rec-nav li.pbimport-hastick:hover { background: var(--surface-2); }
.pb-rec-nav li.pbimport-hastick:has(> a[aria-current="page"]) { background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--accent); }
.pb-rec-nav li.pbimport-hastick > a[aria-current="page"], .pb-rec-nav li.pbimport-hastick > a:hover { background: transparent; border-left-color: transparent; }
li.is-rejected > a > span:first-of-type { text-decoration: line-through; color: var(--muted); }
.pbimport-lead .pbimport-visit { font-weight: 600; margin-right: 6px; white-space: nowrap; }
.pb-rec-nav-meta .cnt { white-space: nowrap; }
.pbimport-evnav { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pbimport-where { color: var(--muted); font-size: 14px; font-variant-numeric: tabular-nums; white-space: nowrap; margin-right: 4px; }
/* A NEW record's fields: one plain form of the incoming values, no Now | Incoming columns. */
.pbimport-fields { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px 18px; }
.pbimport-field { grid-column: span 3; min-width: 0; }
.pbimport-field.wide { grid-column: 1 / -1; }
.pbimport-field.third { grid-column: span 2; }
.pbimport-field .lbl label { margin: 0; font: inherit; color: inherit; }
.pbimport-field .lbl a { text-transform: none; letter-spacing: 0; font-size: 14px; font-weight: 600; }
.pbimport-field .pbimport-inlinenote { margin: 0 0 6px; }
.pbimport-usebox { display: flex; align-items: center; gap: 6px; margin: 6px 0 0; font-weight: 400; }
@media (max-width: 640px) {
  .pbimport-field, .pbimport-field.third { grid-column: 1 / -1; }
  /* On a phone the bar keeps only its buttons; the banner above the review says the same. */
  .pbimport-oneview .pbimport-confirm .what { display: none; }
}
.pbimport-sec > h3 { margin: 0 0 6px; font-size: 18px; font-weight: 600; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pbimport-sec > h3 .sum { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; }
.pbimport-sec.bad > h3 { color: var(--bad); }
.pbimport-sub { margin: 18px 0 6px; font-size: 16px; font-weight: 600; }
.pbimport-lead { margin: 0 0 12px; color: var(--muted); max-width: 90ch; }
.pbimport-lead b, .pbimport-lead strong { color: var(--ink); font-weight: 600; }
.pbimport-note { color: var(--muted); font-size: 14px; margin: 2px 0; }
.pbimport-src { color: var(--muted); font-size: 13px; font-weight: 400; }
.pbimport-qs { margin: 6px 0; padding-left: 22px; } .pbimport-qs li { margin: 0 0 10px; }
.pbimport-flat { list-style: none; margin: 0; padding: 0; } .pbimport-flat li { margin: 4px 0; }
.pbimport-flat .id { color: var(--muted); font-size: 13px; }

.pbimport-sec .rows { display: flex; flex-direction: column; gap: 8px; }
.pbimport-drow { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 0 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); padding: 10px 12px 10px 8px; }
.pbimport-drow > .tick { display: flex; align-items: flex-start; justify-content: center; padding-top: 2px; }
.pbimport-drow > .tick .none { color: var(--muted); }
.pbimport-drow > .tick .fa-check { color: var(--ok); margin-top: 3px; }
.pbimport-drow > .tick input[type="checkbox"] { margin: 0; }
.pbimport-drow > .body { min-width: 0; }
.pbimport-drow .title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pbimport-drow .title b { font-weight: 600; }
.pbimport-drow .title code { font-size: 13px; color: var(--muted); background: transparent; padding: 0; }
.pbimport-drow .title .right { margin-left: auto; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.pbimport-drow .title a { font-weight: 600; }
.pbimport-inlinenote { margin: 6px 0 0; padding: 6px 10px; border-radius: 6px; background: var(--info-soft); color: var(--info); font-size: 14px; }
.pbimport-inlinenote.bad { background: var(--bad-soft); color: var(--bad); }
.pbimport-inlinenote b, .pbimport-inlinenote strong { font-weight: 600; }
.pbimport-drow .cmp { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 8px; }
.pbimport-drow .one { margin-top: 8px; }
.pbimport-drow .lbl { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; display: flex; justify-content: space-between; gap: 8px; }
.pbimport-drow .lbl .len { font-weight: 400; text-transform: none; letter-spacing: 0; }
.pbimport-drow .lbl .len.bad { color: var(--bad); font-weight: 700; }
.pbimport-drow .now { padding: 8px 10px; border-radius: 6px; background: var(--sunken); color: var(--muted); white-space: pre-wrap; max-height: 260px; overflow: auto; font-size: 15px; }
.pbimport-drow .now.blank { font-style: italic; }
.pbimport-edit { width: 100%; padding: 8px 10px; border: 1px solid var(--line-strong); border-radius: 6px; background: var(--surface); color: var(--ink); font: inherit; font-size: 15px; }
textarea.pbimport-edit { min-height: 100px; resize: vertical; white-space: pre-wrap; }
.pbimport-edit:focus { border-color: var(--accent); outline: none; }
.pbimport-short { max-width: 220px; display: inline-block; }
.pbimport-inline { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.pbimport-inline .btn { margin: 0; }
.pbimport-drow .latlon { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; max-width: 360px; }
.pbimport-map { width: 100%; height: 420px; margin-top: 12px; border-radius: 8px; border: 1px solid var(--line); overflow: hidden; }
.pbimport-cats { margin-top: 6px; color: var(--muted); font-size: 14px; }
.pbimport-cats .bad { color: var(--bad); }

.pbimport-reject { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pbimport-reject label.rej { display: inline-flex; align-items: center; gap: 6px; margin: 0; color: var(--muted); font-size: 14px; font-weight: 400; cursor: pointer; }
.pbimport-reject-why { width: 24em; max-width: 100%; padding: 4px 8px; border: 1px solid var(--bad); border-radius: 6px; background: var(--surface); color: var(--ink); font-size: 14px; }
.pbimport-drow .title .right .pbimport-reject-why { flex-basis: 100%; }

.pbimport-group { margin-top: 6px; }
.pbimport-group > summary { cursor: pointer; color: var(--muted); padding: 6px 0; list-style: none; display: flex; align-items: center; gap: 8px; }
.pbimport-group > summary::-webkit-details-marker { display: none; }
.pbimport-group > summary .fa { transition: transform .15s; font-size: 12px; }
.pbimport-group[open] > summary .fa { transform: rotate(90deg); }
.pbimport-group > .rows { margin-top: 8px; }

.pbimport-bucket { margin-top: 10px; }
.pbimport-bucket > summary { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 8px; background: var(--surface-2); cursor: pointer; list-style: none; font-weight: 600; }
.pbimport-bucket > summary::-webkit-details-marker { display: none; }
.pbimport-bucket > summary .fa { transition: transform .15s; font-size: 12px; color: var(--muted); }
.pbimport-bucket[open] > summary .fa { transform: rotate(90deg); }
.pbimport-bucket > summary .cnt { color: var(--muted); font-weight: 400; }
.pbimport-bucket > summary .sum { margin-left: auto; display: flex; gap: 6px; }
.pbimport-bucket.networks { border: 1px solid var(--bar-off); border-radius: 8px; padding: 0 0 6px; }
.pbimport-bucket.networks > summary { background: var(--warn-soft); color: var(--warn); }
.pbimport-bucket .pbimport-note { margin: 8px 12px 0; }
.pbimport-bucket .cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 6px 14px; padding: 8px 4px 4px; }
.pbimport-bucket .cat { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 5px 8px 5px 6px; border-radius: 4px; border-left-width: 4px; }
.pbimport-bucket .cat.new { background: var(--ok-soft); }
.pbimport-bucket .cat > label { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-weight: 400; cursor: pointer; }
.pbimport-bucket .cat .id { color: var(--muted); font-size: 13px; }
/* "More sites": the sites not ticked, behind one closed line (Location and Event importers, 2026-10-12) */
.pbimport-more-sites { margin: 2px 4px 4px; }
.pbimport-more-sites > summary { cursor: pointer; color: var(--muted); padding: 4px 6px; font-size: 14px; }
/* "Already in PB with this name": same place or a different place, one click each (2026-10-12) */
.pbimport-dup-list { padding-left: 18px; }
.pbimport-dup-list li { margin: 6px 0; }
.pbimport-dup-form { display: inline-block; margin: 2px 0 2px 8px; }
.pbimport-bucket .cat .pbimport-reject { margin-left: auto; }
.pbimport-bucket .cat .pbimport-reject-why { flex-basis: 100%; }

.pbimport-confirm { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; background: var(--surface); border-top: 1px solid var(--line); box-shadow: 0 -6px 20px rgba(16,24,40,.08); }
.pbimport-confirm .in { max-width: 1500px; margin: 0 auto; padding: 12px 28px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.pbimport-confirm .what { color: var(--muted); font-size: 14px; flex: 1 1 360px; }
.pbimport-confirm .what b { color: var(--ink); font-weight: 600; }
.pbimport-confirm label.ack { display: flex; align-items: center; gap: 8px; font-weight: 600; margin: 0; }
.pbimport-confirm .actions { display: flex; gap: 8px; margin-left: auto; }
/* The Event importer's save in pieces (2026-10-02): while it runs the bar shows its progress, on a
   phone too, and its buttons go (the review is inert until the result page loads). */
.pbimport-confirm.pbimport-saving .pbimport-evnav,
.pbimport-confirm.pbimport-saving .actions,
.pbimport-confirm.pbimport-saving .pbimport-startover { display: none; }
.pbimport-oneview .pbimport-confirm.pbimport-saving .what { display: block; }
.pbimport-confirm.pbimport-saving .what .fa { margin-right: 6px; color: var(--accent); }
.pbimport-confirm.bad { border-top-color: var(--bad); }
.pbimport-confirm.bad .what { color: var(--bad); }
/* The bar starts where the content does: right of the menu, and of the collapsed menu. */
.pb-admin .pbimport-confirm { left: 248px; }
body.collapse-leftbar .pbimport-confirm { left: 64px; }

/* The paste screen and the result screens */
.pbimport-intro h3 { margin: 0 0 8px; font-size: 20px; font-weight: 600; }
.pbimport-paste { width: 100%; font-family: ui-monospace, monospace; font-size: 13px; padding: 10px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--surface); color: var(--ink); }
.pbimport-peek { padding: 10px 12px; margin: 0 0 8px; border-radius: var(--radius); border-left: 5px solid var(--bar-none); background: var(--surface-2); }
.pbimport-peek.ok { border-left-color: var(--bar-on); background: var(--ok-soft); }
.pbimport-peek.warn { border-left-color: var(--bar-off); background: var(--warn-soft); }
.pbimport-peek.bad { border-left-color: var(--bar-bad); background: var(--bad-soft); }
.pbimport-peek.waiting { color: var(--muted); }
.pbimport-mono { font-family: ui-monospace, monospace; background: var(--surface); border: 1px solid var(--line); border-radius: 6px; padding: 6px 8px; margin: 6px 0; white-space: pre-wrap; word-break: break-all; }
.pbimport-mono b { background: var(--bad-soft); color: var(--bad); }
.pbimport-tbl { width: 100%; border-collapse: collapse; }
.pbimport-tbl th { text-align: left; border-bottom: 2px solid var(--line-strong); padding: 6px 8px; }
.pbimport-tbl td { border-bottom: 1px solid var(--line); padding: 8px; vertical-align: top; }
.pbimport-pre { white-space: pre-wrap; }
.pbimport-tag { background: var(--sunken); padding: 2px 6px; border-radius: 4px; color: var(--muted); }
.pbimport-id { color: var(--muted); }
.pbimport-dash { color: var(--muted); }
.ok { color: var(--ok); } .bad { color: var(--bad); } .warn { color: var(--warn); }

@media (max-width: 991px) {
  .pbimport-page .pb-rec { grid-template-columns: minmax(0, 1fr); }
  .pb-rec-nav-tally, .pb-rec-nav-meta { display: none; }
  .pbimport-drow .cmp { grid-template-columns: minmax(0, 1fr); }
  .pbimport-page { padding-bottom: 150px; }
  .pb-admin .pbimport-confirm, body.collapse-leftbar .pbimport-confirm { left: 0; }
}
@media (max-width: 640px) {
  .pbimport-mode { grid-template-columns: minmax(0, 1fr); } .pbimport-mode-links { grid-column: 1; }
  .pbimport-sec { padding: 14px 16px 16px; }
  .pbimport-confirm .in { padding: 10px 16px; }
  .pbimport-confirm .actions { margin-left: 0; width: 100%; } .pbimport-confirm .actions .btn { flex: 1; justify-content: center; }
}

/* ---------------------------------------------------------------------------------------------
   Design patterns (core::Admin::admin_DesignPatterns): the in-admin style guide. Only the page's
   own layout lives here; every example uses the real part's classes. (2026-09-19) */
.pbdp .pb-rec-nav-intro { margin: 10px 14px 4px; font-size: 14px; color: var(--muted); }
.pbdp-lead { color: var(--muted); max-width: 90ch; margin: 0 0 14px; }
.pbdp-lead b { color: var(--ink); font-weight: 600; }
.pbdp-code { margin: 14px 0 0; font-size: 13px; color: var(--muted); font-family: ui-monospace, monospace; overflow-wrap: anywhere; }
.pbdp-code .fa { margin-right: 4px; }
.pbdp-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 8px 18px; margin: 0 0 14px; }
.pbdp-swatch { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.pbdp-chip { display: inline-block; width: 28px; height: 28px; border-radius: 8px; border: 1px solid var(--line); flex: none; }
.pbdp-shapes { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.pbdp-shape { padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-2); }
.pbdp-shape h4 { margin: 0 0 6px; font-size: 16px; font-weight: 600; }
.pbdp-shape p { margin: 0 0 8px; color: var(--muted); font-size: 15px; }
.pbdp-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 12px; }
.pbdp-dots > span { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--muted); }
.pbdp-words, .pbdp-steps { margin: 0; padding-left: 22px; }
.pbdp-words li, .pbdp-steps li { margin: 0 0 8px; max-width: 90ch; }
.pbdp-list .pb-table table { margin: 0; }
.pbdp-review { padding: 0; border: 0; }

/* ---------------------------------------------------------------------------------------------
   Quick Actions palette (vendor/quick-actions/quick-actions.css hard-codes light colors) on the
   theme's tokens, so it follows System, Light and Dark like every other part. Layout stays in
   the vendor file; only color lives here. (2026-09-20: in dark mode its rows were dark text on
   a dark surface, with white header and footer bars.) */
.qa-content { background: var(--surface); color: var(--ink); }
.qa-searchbar { border-bottom-color: var(--line); }
.qa-search-icon { color: var(--muted); }
.qa-input { background: transparent; color: var(--ink); }
.qa-input::placeholder { color: var(--muted); }
.qa-mode-btn { background: var(--surface-2); border-color: var(--line-strong); color: var(--accent); }
.qa-mode-btn:hover, .qa-mode-btn:focus, .qa-mode-btn.active { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.qa-mode-btn.on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.qa-scopebar { background: var(--accent-soft); border-bottom-color: var(--line); color: var(--ink); }
.qa-scopebar-back, .qa-scopebar-clear { color: var(--muted); }
.qa-scopebar-back:hover, .qa-scopebar-clear:hover { color: var(--ink); }
.qa-scopebar-link { color: var(--accent); }
.qa-scopebar-link:hover { color: var(--ink); }
.qa-scopebar-note { color: var(--muted); }
.qa-group + .qa-group { border-top-color: var(--line); }
.qa-group-label, .qa-row-header { background: var(--surface); color: var(--muted); }
.qa-row-header:hover, .qa-row-header.active { color: var(--ink); }
.qa-group-more, .qa-group-error-note { color: var(--muted); }
.qa-group-actions { background: var(--surface-2); border-bottom-color: var(--line); box-shadow: inset 3px 0 0 var(--accent); }
.qa-group-actions .qa-group-label { background: var(--surface-2); color: var(--accent); }
.qa-group-actions .qa-item-icon { color: var(--accent); }
.qa-row:hover, .qa-row.active, .qa-group-actions .qa-row:hover, .qa-group-actions .qa-row.active { background-color: var(--accent-soft); }
.qa-item, .qa-item:hover, .qa-item:focus { color: var(--ink); }
.qa-row.active .qa-item { color: var(--ink); font-weight: 600; }
.qa-item-icon { color: var(--muted); }
.qa-row.active .qa-item-icon { color: var(--accent); }
.qa-item-sublabel { color: var(--muted); }
.qa-btn, .qa-detail-value .pb-copy-btn { color: var(--muted); }
.qa-btn:hover, .qa-btn:focus, .qa-detail-value .pb-copy-btn:hover { color: var(--ink); }
.qa-detail { background: var(--surface-2); border-bottom-color: var(--line); }
.qa-detail-label { color: var(--muted); }
.qa-detail-value { color: var(--ink); }
.qa-detail-value:hover { color: var(--accent); }
.qa-detail-value.pb-copied { background-color: var(--ok-soft); color: var(--ok); }
.qa-empty, .qa-loading { color: var(--muted); }
.qa-footer { background: var(--surface-2); border-top-color: var(--line); }
.qa-hint { color: var(--muted); }
.qa-key { background: var(--surface); border-color: var(--line-strong); color: var(--muted); }

/* ---------------------------------------------------------------------------------------------
   Publish on (core::Publishing::returnPublishOnHTML): which sites a record appears on. The first
   section of every Categories form since 2026-09-20, part 8 of the account changes feature.

   Deliberately NOT the category accordion's look. That is a long scrolling list you hunt through;
   this is a short set of tiles you read at a glance, because the answer matters more and there
   are only ever as many as the account covers. A ticked site fills with the accent so the answer
   survives a glance in either mode. (2026-09-20) */
.pb-publishon-help { color: var(--muted); margin: 0 0 10px; max-width: 90ch; }
.pb-publishon-sites { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; }
.pb-publishon-site {
    display: flex; align-items: center; gap: 10px; margin: 0;
    padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm);
    background: var(--surface); font-weight: 400; cursor: pointer;
}
.pb-publishon-site:hover { border-color: var(--line-strong); background: var(--surface-2); }
.pb-publishon-site.is-on { border-color: var(--accent); background: var(--accent-soft); }
.pb-publishon-site.is-on .pb-publishon-name { color: var(--accent); font-weight: 600; }
/* The theme's iCheck wrapper is what is actually visible; it must not be squeezed by the flex row. */
.pb-publishon-site .icheckbox_square-blue, .pb-publishon-site .iradio_square-blue { flex: none; }
.pb-publishon-name { flex: 1 1 auto; }
.pb-publishon-note {
    margin: 12px 0 0; padding: 10px 12px; border-radius: var(--radius-sm);
    background: var(--info-soft); color: var(--info); max-width: 90ch;
}
.pb-publishon-note .fa { margin-right: 6px; }
.pb-publishon-empty { color: var(--muted); padding: 10px 0; }
.pb-publishon-summary { margin: 0 0 12px; font-weight: 600; color: var(--ink); max-width: 90ch; }

/* ---------------------------------------------------------------------------------------------
   ACCOUNT TYPES: the User Types grid, the per-account override table, and the site picker.
   Added 2026-09-20.

   These three screens were built with class names that nothing styled, so the User Types grid
   rendered every cell as the same plain letter whether the type held that action or not - Jeff:
   "Why when I click through the different account type pages I still see the same settings".
   The data differed the whole time and there was no way to see it.
   --------------------------------------------------------------------------------------------- */

.pb-type-grid, .pb-ov-table { width: 100%; }
.pb-type-grid th, .pb-ov-table th { white-space: nowrap; }
.pb-type-grid td, .pb-ov-table td { vertical-align: middle; }

/* The section header row inside either table. */
.pb-type-sec td { background: var(--sunken); font-weight: 700; }

/* An area's name, indented under its section so the shape of the map is readable. */
.pb-type-area { padding-left: 22px !important; }

/* The four action columns: narrow, centered, and the same width in both tables. */
.pb-type-cell, .pb-ov-cell { text-align: center; width: 92px; white-space: nowrap; }
.pb-ov-cell label { font-weight: 400; margin: 0; cursor: pointer; }
.pb-ov-cell input { margin-right: 4px; }

/* The one-line description under the account type dropdown. */
.pb-type-note { margin-top: 6px; color: var(--muted); }

/* The site picker. Without this the 31 sites stack one per line and the form runs off the page. */
.pb-site-picker {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 4px 16px; margin-top: 8px; max-height: 340px; overflow-y: auto;
    padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm);
    background: var(--sunken);
}
.pb-site-box { font-weight: 400; margin: 0; display: flex; align-items: center; gap: 6px; cursor: pointer; }
.pb-site-summary { margin: 0 0 4px; }

/* The facts block at the top of a User Types page. */
.pb-type-facts { margin-bottom: 14px; max-width: 90ch; }
.pb-type-facts code { font-size: 12px; }

/* EVERY CELL IS COLORED BY ITS STATE, so the difference is instant (Jeff, 2026-09-20: "change
   the background color of the cell depending on what the checkbox status is. I want it to be
   instant to see that there is a difference"). Coloring only the exception made the other cells
   ambiguous: no color could mean allowed, or could mean the script never ran.

   The color is on the CELL rather than the row - a row usually holds one exception and three
   ordinary allowances, and coloring all four says the wrong thing about the three - and the
   classes are toggled live as boxes are ticked, so the table is honest before the form is saved
   as well as after.

   --ok and --warn are the admin's own status tokens from 13-admin-style-guide.md, so this reads
   the same as every other green-good, orange-changed thing in the admin. */
.pb-ov-cell.pb-ov-on     { background: var(--ok-soft); }
.pb-ov-cell.pb-ov-on label { color: var(--ok); }

.pb-ov-cell.pb-ov-denied { background: var(--warn-soft); box-shadow: inset 2px 0 0 var(--warn); }
.pb-ov-cell.pb-ov-denied label { color: var(--warn); font-weight: 700; }

/* Not in the type at all: a flat sunken fill, so the third state is as obvious as the other two
   rather than being the absence of a color. */
.pb-ov-cell.pb-ov-off { background: var(--sunken); }

/* .pb-ov-swatch and .pb-ov-key were removed 2026-09-20 with the key they drew. Jeff: "We don't
   need the blue What the colors mean section on the user edit permission tab." The cell colors
   say it on their own; the words moved to User Mgmt. > Help. */

/* An action the account type does not include: a real checkbox so the grid reads normally, but
   disabled and dimmed, because an exception can only take away. Added 2026-09-20. */
.pb-ov-off label { color: var(--muted); cursor: not-allowed; opacity: .55; }

/* ------------------------------------------------------------------------------------------- */
/* TWO-COLUMN FORM ROWS. Added 2026-09-20 for the Edit user "Who they are" card, which was six
   short fields stacked one per row and twice as tall as it needed to be.

   The label column narrows to 130px inside the grid because each field now has half the width to
   work with. One explicit breakpoint rather than auto-fit, so the answer is always two columns or
   one and never a surprise third on a wide monitor.

   .pb-field draws its own dashed rule, and in a grid the browser's :last-child is the last in
   source order, not the last on screen - so the rule is put back on every row and the card's own
   padding closes the bottom. */
.pb-form-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
.pb-form-cols > .pb-field { grid-template-columns: 130px minmax(0, 1fr); border-bottom: 1px dashed var(--line); }
.pb-form-cols > .pb-field.pb-field-stack, .pb-form-cols > .pb-field.pb-field-nolabel { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 900px) {
    .pb-form-cols { grid-template-columns: minmax(0, 1fr); }
    .pb-form-cols > .pb-field { grid-template-columns: minmax(0, 1fr); }
    .pb-form-cols > .pb-field > .control-label { padding-top: 0; }
}

/* THE PASSWORD BLOCK on the Edit user form. The checkbox is the whole point: a password that can
   only be changed on purpose. The two boxes underneath are hidden until it is ticked. */
.pb-pass-check { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-weight: 600; cursor: pointer; }
.pb-pass-check input { margin: 0; }
.pb-pass-boxes[hidden] { display: none; }
.pb-pass-boxes { margin-top: 2px; }


/* ---------------------------------------------------------------------------------------------
   Reporting parts (2026-10-05, content-insights build steps 2 and 3): the row list, captions and
   sentence shared by the Dashboard and the weekly report, the "New report ready" strip above the
   top bar, and a report item with its I care / When / Dismiss controls. Tokens only.
   --------------------------------------------------------------------------------------------- */
.pbd-k { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.pbd-rows { display: flex; flex-direction: column; }
.pbd-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 14px; padding: 10px 0; border-top: 1px solid var(--line); align-items: baseline; }
.pbd-row:first-child { border-top: 0; padding-top: 0; }
.pbd-t { font-weight: 600; color: var(--ink); min-width: 0; overflow-wrap: anywhere; }
.pbd-num { font-weight: 700; color: var(--ink); text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pbd-s { grid-column: 1 / -1; color: var(--muted); }
.pbd-empty, .pbd-muted, .pbd-foot { color: var(--muted); margin: 0; }
.pbd-sentence { font-size: 22px; font-weight: 600; line-height: 1.3; color: var(--ink); margin: 0 0 10px; }

.pb-report-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 8px 16px; background: var(--ink); color: var(--surface); }
.pb-report-strip[hidden] { display: none; }
.pb-report-strip-text { flex: 1 1 260px; min-width: 0; }
.pb-report-strip-open { font-weight: 700; color: var(--surface); background: transparent; border: 1px solid var(--surface); border-radius: 8px; padding: 3px 12px; text-decoration: none; }
.pb-report-strip-open:hover, .pb-report-strip-open:focus { color: var(--ink); background: var(--surface); text-decoration: none; }
.pb-report-strip-dismiss { font: inherit; color: var(--surface); background: transparent; border: 0; padding: 3px 6px; text-decoration: underline; cursor: pointer; }

.pb-report-from { color: var(--muted); margin: 0 0 12px; }
.pb-report-items { display: flex; flex-direction: column; gap: 12px; }
.pb-report-item { border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; background: var(--surface); display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.pb-report-item[hidden] { display: none; }
.pb-report-top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.pb-report-pill { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; border-radius: 6px; padding: 1px 8px; color: var(--muted); background: var(--surface-2); }
.pb-report-action .pb-report-pill { color: var(--accent); background: var(--accent-soft); }
.pb-report-theory .pb-report-pill { color: var(--info); background: var(--info-soft); }
.pb-report-note .pb-report-pill { color: var(--warn); background: var(--warn-soft); }
.pb-report-src { color: var(--muted); font-size: 14px; }
.pb-report-title { font-size: 17px; font-weight: 600; margin: 0; color: var(--ink); }
.pb-report-text, .pb-report-pay { margin: 0; }
.pb-report-pay { color: var(--muted); }
.pb-report-pay b { color: var(--ink); }
.pb-report-why { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 14px; margin: 0; }
.pb-report-why dt { color: var(--muted); font-weight: 600; }
.pb-report-why dd { margin: 0; min-width: 0; }
.pb-report-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; padding-top: 8px; border-top: 1px solid var(--line); }
.pb-report-ctl { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pb-report-ctl-end { margin-left: auto; }
.pb-report-k { color: var(--muted); }
.pb-report-reasons { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.pb-report-reasons[hidden] { display: none; }
.pb-seg { display: inline-flex; border: 1px solid var(--line-strong); border-radius: 8px; overflow: hidden; }
.pb-seg button { font: inherit; font-size: 15px; border: 0; border-left: 1px solid var(--line); background: var(--surface); color: var(--ink); padding: 3px 10px; min-width: 34px; cursor: pointer; }
.pb-seg button:first-child { border-left: 0; }
.pb-seg button[aria-pressed="true"] { background: var(--accent); color: var(--surface); font-weight: 700; }
.pb-chip-btn, .pb-chip-link { font: inherit; font-size: 14px; font-weight: 600; border: 1px solid var(--line); background: var(--surface); color: var(--ink); border-radius: 999px; padding: 2px 12px; cursor: pointer; text-decoration: none; display: inline-flex; gap: 6px; align-items: center; }
.pb-chip-btn.is-on, .pb-chip-link.is-on { background: var(--accent); border-color: var(--accent); color: var(--surface); }
.pb-chip-link:hover { text-decoration: none; }
.pb-chip-n { font-variant-numeric: tabular-nums; opacity: .85; }
.pb-report-item.is-dismissed { background: var(--surface-2); }
.pb-report-item.is-dismissed > :not(.pb-report-top):not(.pb-report-title):not(.pb-report-gone) { display: none; }
.pb-report-gone { color: var(--muted); }
.pb-report-gone button { font: inherit; color: var(--accent); background: none; border: 0; padding: 0; font-weight: 600; cursor: pointer; }
.pb-report-head { margin-bottom: 14px; }
.pb-report-week { font-size: 24px; font-weight: 700; margin: 2px 0 10px; color: var(--ink); }
.pb-report-chips, .pb-report-filter { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.pb-report-bullets { margin: 0 0 4px; padding-left: 20px; display: grid; gap: 4px; }
.pb-report-build { margin: 14px 0 0; }
.pb-report-msg { color: var(--muted); }
.pb-report-foot { color: var(--muted); margin: 4px 0 20px; }
@media (max-width: 520px) { .pb-report-ctl-end { margin-left: 0; } .pbd-sentence { font-size: 20px; } }

/* ---------------------------------------------------------------------------------------------
   Lookout (2026-10-05, features/claude-write-door): Reporting > Lookout, a record's "From
   Lookout" notes and an importer's "Waiting for you". Notes and ideas reuse the report item
   (.pb-report-item); these are the parts it adds. Tokens only.
   --------------------------------------------------------------------------------------------- */
.pb-lk-count { font-size: 13px; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }
.pb-lk-count.is-bad { color: var(--bad); }
.pb-lk-state { display: flex; align-items: center; gap: 8px; padding: 8px 10px; margin: 0 0 8px; border-radius: 8px; background: var(--surface-2); font-weight: 600; }
.pb-lk-state a { color: var(--ink); }
.pb-lk-state.is-on a { color: var(--ok); }
.pb-lk-state.is-shut { background: var(--bad-soft); }
.pb-lk-state.is-shut a { color: var(--bad); }
.pb-lk-intro { margin: 0 0 12px; max-width: 72ch; }
.pb-lk-problem .pb-report-pill { color: var(--bad); background: var(--bad-soft); }
.pb-lk-idea .pb-report-pill { color: var(--info); background: var(--info-soft); }
.pb-lk-note .pb-report-pill { color: var(--warn); background: var(--warn-soft); }
.pb-lk-msg { color: var(--muted); }
.pb-lk-fix { border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; background: var(--surface-2); display: flex; flex-direction: column; gap: 6px; }
.pb-lk-fix.is-target { border-color: var(--accent); background: var(--accent-soft); }
.pb-lk-fix-row { display: flex; flex-wrap: wrap; gap: 4px 18px; align-items: baseline; }
.pb-lk-fix-f { font-weight: 700; color: var(--ink); }
.pb-lk-fix-now, .pb-lk-fix-new { color: var(--muted); overflow-wrap: anywhere; min-width: 0; }
.pb-lk-fix-now b, .pb-lk-fix-new b { color: var(--ink); }
.pb-lk-fix-do { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.pb-lk-fix-msg { color: var(--ink); font-weight: 600; }
.pb-lk-field-target { outline: 3px solid var(--accent) !important; outline-offset: 2px; }
.pb-lk-fb { border-top: 1px solid var(--line); padding-top: 6px; }
.pb-lk-fb summary { cursor: pointer; color: var(--accent); font-weight: 600; }
.pb-lk-fb textarea { display: block; width: 100%; max-width: 100%; margin-top: 6px; background: var(--surface); color: var(--ink); border: 1px solid var(--line-strong); border-radius: 8px; padding: 6px 10px; font: inherit; }
.pb-lk-fb-bar { display: flex; justify-content: flex-end; align-items: center; gap: 10px; margin-top: 6px; }
.pb-lk-docs { display: flex; flex-direction: column; }
.pb-lk-doc { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 14px; padding: 10px 0; border-top: 1px solid var(--line); align-items: start; }
.pb-lk-doc:first-child { border-top: 0; }
/* A row lights up under the pointer, so the buttons at the right end clearly belong to it
   (Jeff, 2026-10-05). The side padding gives the color room; the negative margin keeps text aligned. */
.pb-lk-doc { padding: 10px 10px; margin: 0 -10px; border-radius: var(--radius-sm); transition: background-color .12s; }
.pb-lk-doc:hover, .pb-lk-doc:focus-within { background: var(--info-soft); }
.pb-lk-doc .pb-lk-fb, .pb-lk-doc-care { grid-column: 1 / -1; }
.pb-lk-doc-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pb-lk-doc-main .pbd-t { overflow-wrap: anywhere; }
.pb-lk-doc-main .pill { align-self: flex-start; }
.pb-lk-doc-main .pbd-s { color: var(--muted); }
.pb-lk-doc-do { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px; }
.pb-lk-doc-do .pb-lk-msg { flex-basis: 100%; text-align: right; }
.pb-lk-doc.is-closed .pb-lk-doc-main .pbd-t { color: var(--muted); }
.pb-lk-doc.is-current { background: var(--accent-soft); border-radius: 8px; padding-left: 8px; padding-right: 8px; }
/* The photo a waiting place would save with (2026-10-07): a thumbnail, or "No photo" when it has none */
.pb-lk-doc.has-pic { grid-template-columns: 72px minmax(0, 1fr) auto; }
.pb-lk-pic { width: 72px; height: 48px; border-radius: var(--radius-sm); overflow: hidden; background: var(--sunken); display: flex; align-items: center; justify-content: center; text-align: center; font-size: 12px; font-weight: 600; line-height: 1.2; }
.pb-lk-pic img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pb-lk-pic.is-none { background: var(--warn-soft); color: var(--warn); }
.pb-lk-log { display: flex; flex-direction: column; }
.pb-lk-logrow { display: grid; grid-template-columns: 110px 80px minmax(0, 1fr); gap: 4px 12px; padding: 9px 0; border-top: 1px solid var(--line); align-items: baseline; }
.pb-lk-logrow .pb-lk-fb { grid-column: 3; border-top: 0; padding-top: 0; }
.pb-lk-log-when { color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pb-lk-logrow > .pill { justify-self: start; }
.pb-lk-log-what { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pb-lk-log-what .pbd-t { overflow-wrap: anywhere; }
.pb-lk-log-what .pbd-s { color: var(--muted); overflow-wrap: anywhere; }
.pb-lk-switch-box { display: flex; flex-direction: column; gap: 8px; max-width: 72ch; }
.pb-lk-switch-box .pbd-muted { margin: 0; }
.pb-lk-switch-box.is-on .pbd-sentence { color: var(--ok); }
.pb-lk-switch-box.is-shut .pbd-sentence { color: var(--bad); }
.pb-lk-why { margin: 0; padding: 8px 12px; border-radius: 8px; background: var(--bad-soft); color: var(--bad); font-weight: 600; }
.pb-lk-switch-do { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.pb-lk-sites { display: flex; flex-direction: column; }
.pb-lk-site { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 14px; padding: 8px 0; border-top: 1px solid var(--line); align-items: center; }
.pb-lk-site:first-child { border-top: 0; }
.pb-lk-site .pb-lk-msg { grid-column: 1 / -1; text-align: right; }
.pb-lk-site .pb-lk-msg:empty { display: none; }
.pb-lk-record { margin-bottom: 16px; }
/* The left menu's group headings and Lookout's count (2026-10-08, features/admin-left-menu) */
.pb-side-head { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding: 14px 14px 4px; list-style: none; }
.pb-side-count { margin-left: auto; min-width: 24px; text-align: center; border-radius: 999px; padding: 0 7px; font-size: 14px; font-weight: 700; background: var(--warn-soft); color: var(--warn); font-variant-numeric: tabular-nums; }
.pb-side-count.is-bad { background: var(--bad-soft); color: var(--bad); }
/* One site's own admin: the site band on top, and Design as the theme with its Pages and Templates */
.pb-side-site { list-style: none; margin: 4px 8px 8px; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--siteadmin-bg); color: var(--siteadmin-ink); display: flex; flex-direction: column; gap: 4px; }
.pb-side-site-name { font-weight: 700; font-size: 17px; line-height: 1.2; overflow-wrap: anywhere; }
.pb-side-site-meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; color: var(--siteadmin-muted); }
.pb-side-site-meta a { color: var(--siteadmin-ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.pb-side-site-state { font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; border-radius: 4px; padding: 0 6px; background: var(--siteadmin-badge); color: var(--siteadmin-badge-ink); }
.pb-side-site-state.is-dev { background: var(--warn-soft); color: var(--warn); }
/* Icons only (the desktop collapse, or a tablet sideways): the site's name is in the top bar, and a
   64px column printed this card one letter a line (2026-10-15). */
body.collapse-leftbar .pb-side .pb-side-site { display: none; }
/* ...and a group heading (THIS SITE, CONTENT, SETUP) is a thin line there, as the dividers are. */
body.collapse-leftbar .pb-side .pb-side-head { font-size: 0; padding: 0; height: 1px; margin: 8px 4px; background: var(--line); }
.pb-side-theme { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 8px; margin: 2px 8px 2px; padding: 6px 10px; border-radius: var(--radius-sm); background: var(--surface-2); border: 1px solid var(--line); }
.pb-side-theme-name { min-width: 0; overflow-wrap: anywhere; font-weight: 600; line-height: 1.25; }
.pb-side-theme-manage { flex: none; border: 1px solid var(--line-strong); border-radius: 8px; padding: 1px 8px; font-weight: 600; color: var(--accent); background: var(--surface); }
#sidebar > li.pb-side-tree > a { padding-left: 34px; }
#sidebar > li.pb-side-tree > a span::before { content: ""; display: inline-block; width: 8px; height: 8px; border-left: 2px solid var(--line-strong); border-bottom: 2px solid var(--line-strong); margin-right: 8px; vertical-align: 3px; }
/* Lookout's own page (6.2.94): tabs across the top, the list straight under them */
.pb-lk-tabs { display: flex; flex-wrap: wrap; align-items: stretch; gap: 4px; border-bottom: 1px solid var(--line); margin: 0 0 14px; }
.pb-lk-tab { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-bottom: 3px solid transparent; margin-bottom: -1px; color: var(--muted); font-weight: 600; text-decoration: none; }
.pb-lk-tab:hover { color: var(--ink); text-decoration: none; }
.pb-lk-tab.is-on { border-bottom-color: var(--accent); color: var(--ink); }
.pb-lk-tab .pb-lk-count { background: var(--sunken); color: var(--ink); border-radius: 999px; padding: 0 8px; font-size: 14px; }
.pb-lk-tab .pb-lk-count.is-bad { background: var(--bad-soft); color: var(--bad); }
.pb-lk-tabs-gap { flex: 1 1 auto; }
.pb-lk-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; background: var(--line-strong); }
.pb-lk-dot.is-on { background: var(--ok); }
.pb-lk-dot.is-bad { background: var(--bad); }
.pb-lk-panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 14px 16px; }
@media (max-width: 600px) { .pb-lk-tabs-gap { display: none; } .pb-lk-tab { padding: 8px 10px; } }
/* Do now (2026-10-08, claude-write-door/07): the date on the left, the kind tag, the priority with
   its reason, what it goes with, the one action on the right, the full item folded below. */
.pb-lk-back { margin: 0 0 8px; }
.pb-lk-older { margin: 14px 0 0; }
.pb-lk-dn { display: flex; flex-direction: column; }
.pb-lk-dn-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 4px 14px; padding: 12px 0; border-top: 1px solid var(--line); align-items: start; }
.pb-lk-dn-row:first-child { border-top: 0; }
.pb-lk-dn-row:target { background: var(--accent-soft); border-radius: var(--radius-sm); }
.pb-lk-dn-row.is-dismissed > .pb-lk-dn-main { opacity: .6; }
.pb-lk-when { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; width: 104px; box-sizing: border-box; padding: 1px 6px; border-radius: 6px; text-align: center; }
.pb-lk-when.is-over { background: var(--bad-soft); color: var(--bad); }
.pb-lk-when.is-today { background: var(--warn-soft); color: var(--warn); }
.pb-lk-when.is-soon { background: var(--accent-soft); color: var(--accent); }
.pb-lk-when.is-none { background: var(--sunken); color: var(--muted); font-weight: 600; }
.pb-lk-when.is-snoozed { background: var(--accent-soft); color: var(--accent); }
.pb-lk-dn-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pb-lk-dn-title { font-weight: 600; overflow-wrap: anywhere; }
/* What is left in a batch document ("21 to do, 20 done", 2026-10-21): the work, so in ink, right under the
   title, on Do now rows and on every document line (inbox, importer card, Show all). */
.pb-lk-prog { display: block; font-weight: 600; color: var(--ink); }
.pb-lk-prog[data-lk-progress] { color: var(--muted); font-weight: 400; }
.pb-lk-tag { display: inline-block; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; border-radius: 4px; padding: 0 6px; margin-right: 8px; vertical-align: 1px; }
.pb-lk-tag.is-publish { background: var(--accent-soft); color: var(--accent); }
.pb-lk-tag.is-review { background: var(--ok-soft); color: var(--ok); }
.pb-lk-tag.is-fix { background: var(--bad-soft); color: var(--bad); }
.pb-lk-dn-why, .pb-lk-dn-sub, .pb-lk-with { color: var(--muted); overflow-wrap: anywhere; }
/* One row everywhere (2026-10-11, features/lookout-gist-and-more): the label says what to do and what
   kind; More is only for reading; the optional line after Dismiss or Done; Snooze's four lengths. */
.pb-lk-lbl { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.pb-lk-lbl .pb-lk-tag { margin-right: 0; }
.pb-lk-tag.is-kind { background: var(--surface-2); color: var(--ink); border: 1px solid var(--line-strong); }
.pb-lk-tag.is-idea { background: var(--warn-soft); color: var(--warn); }
.pb-lk-lbl .pb-lk-prio { font-size: 14px; }
.pb-lk-more { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 14px; margin: 0; padding: 10px 12px; background: var(--surface-2); border-radius: var(--radius-sm); }
.pb-lk-more > dt { color: var(--muted); font-size: 14px; font-weight: 600; }
.pb-lk-more > dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.pb-lk-more .pb-lk-fix { padding: 6px 10px; gap: 2px; }
.pb-lk-follow, .pb-lk-snz { grid-column: 2 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px 10px; border: 1px dashed var(--line-strong); border-radius: var(--radius-sm); }
.pb-lk-snz { justify-self: end; border-style: solid; background: var(--surface-2); }
.pb-lk-follow-k { color: var(--muted); font-size: 14px; font-weight: 600; }
.pb-lk-follow .pb-lk-note { flex: 1 1 180px; width: auto; min-width: 0; height: auto; }
.pb-lk-follow > .pb-lk-msg { flex-basis: 100%; }
.pb-lk-follow > .pb-lk-msg:empty { display: none; }
.pb-lk-sec { font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin: 18px 0 2px; padding-top: 14px; border-top: 1px solid var(--line-strong); }
.pb-lk-sec-note { font-weight: 600; text-transform: none; letter-spacing: 0; margin-left: 6px; }
.pb-lk-dn-all .pb-lk-docs { padding: 0 10px; }
.pb-lk-dn-all > .pb-lk-more { margin: 6px 0 8px; }   /* a batch's From / Goes with, above its list (2026-10-12) */
/* Answered on this page (2026-10-11): folded to its title, the answer where the buttons were. */
.pb-lk-dn-row.is-answered .pb-lk-dn-why, .pb-lk-dn-row.is-answered .pb-lk-dn-sub, .pb-lk-dn-row.is-answered .pb-lk-with,
.pb-lk-dn-row.is-answered > details.pb-lk-dn-more { display: none; }
.pb-lk-dn-row.is-answered .pb-lk-dn-title { color: var(--muted); }
.pb-lk-dn-row.is-answered > .pb-lk-when { background: var(--sunken); color: var(--muted); }
.pb-lk-answered { align-self: center; color: var(--muted); font-weight: 600; }
.pb-lk-prio { font-weight: 700; }
.pb-lk-prio.is-first { color: var(--bad); text-transform: uppercase; letter-spacing: .03em; }
.pb-lk-prio.is-now { color: var(--bad); }
.pb-lk-prio.is-soon { color: var(--warn); }
.pb-lk-prio.is-whenever { color: var(--muted); }
.pb-lk-dn-do { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.pb-lk-dn-more { grid-column: 2 / -1; }
.pb-lk-dn-more > summary { cursor: pointer; color: var(--accent); font-weight: 600; }
.pb-lk-dn-more[open] > summary { margin-bottom: 8px; }
.pb-lk-task .pb-report-pill { color: var(--accent); background: var(--accent-soft); }
/* A closed place's marker in the Places and Guides lists (features/place-closed, 2026-10-08) */
.pb-closed-mark { display: inline-block; border-radius: 4px; padding: 0 7px; font-size: 13px; font-weight: 700; letter-spacing: .04em; background: var(--sunken); color: var(--ink); border: 1px solid var(--line-strong); white-space: nowrap; vertical-align: 1px; }
/* A record's marker in its list and its strip on its own page (2026-10-08) */
.pb-lk-mark { display: inline-block; border-radius: 999px; padding: 0 8px; font-size: 13px; font-weight: 700; white-space: nowrap; vertical-align: 1px; margin-left: 2px; }
.pb-lk-mark.is-fix { background: var(--bad-soft); color: var(--bad); }
.pb-lk-mark.is-review { background: var(--ok-soft); color: var(--ok); }
.pb-lk-mark.is-publish { background: var(--accent-soft); color: var(--accent); }
.pb-lk-strips { margin: 0 0 12px; padding: 0 14px 10px; background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius); }
.pb-lk-strip-all { font-size: 14px; }
.pb-lk-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 8px 12px; border-radius: var(--radius-sm); border: 1px solid var(--line-strong); background: var(--surface); }
.pb-lk-strip.is-fix { border-color: var(--bad); background: var(--bad-soft); }
.pb-lk-strip.is-review { border-color: var(--ok); background: var(--ok-soft); }
.pb-lk-strip.is-publish { border-color: var(--accent); background: var(--accent-soft); }
.pb-lk-strip-t { flex: 1 1 260px; min-width: 0; overflow-wrap: anywhere; }
/* A record's changes together (features/one-click-actions, 2026-10-09): one entry per record in
   Do now and one strip on its page, each change a row with when it was sent, the field, what the
   record says now and what Claude suggests, and its own Apply and Dismiss. */
.pb-lk-strip.is-many > details { flex-basis: 100%; }
.pb-lk-strip.is-many > details > summary, .pb-lk-dn-chg > summary { cursor: pointer; color: var(--muted); }
.pb-lk-chg { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.pb-lk-chg-warn { margin: 0; padding: 8px 12px; border-left: 3px solid var(--warn); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; background: var(--warn-soft); color: var(--ink); }
.pb-lk-chg-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.pb-lk-chg-row { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 4px 12px; align-items: start; padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); }
.pb-lk-chg-row.is-replaced { background: var(--surface-2); }
.pb-lk-chg-row.is-dismissed { background: var(--surface-2); }
.pb-lk-chg-row.is-dismissed > .pb-lk-chg-main { opacity: .6; }
.pb-lk-chg-when { color: var(--muted); font-size: 14px; padding-top: 2px; }
.pb-lk-chg-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.pb-lk-chg-f { font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.pb-lk-chg-v { color: var(--ink); }
/* A batch's line names its record first (features/import-place-changes, 2026-10-16). */
.pb-lk-chg-rec { font-weight: 600; color: var(--ink); }
.pb-lk-chg-why { color: var(--muted); font-size: 14px; }
.pb-lk-chg-why.is-replaced { color: var(--warn); }
.pb-lk-chg-do { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: flex-end; }
/* A button's answer on its own full line under its row, never in the button column (2026-10-10: a
   long answer there squeezed the change to one letter a line). */
.pb-lk-row-msg { min-width: 0; overflow-wrap: anywhere; }
.pb-lk-row-msg:empty { display: none; }
.pb-lk-dn-row > .pb-lk-row-msg, .pb-lk-chg-row > .pb-lk-row-msg { grid-column: 2 / -1; }
.pb-lk-strip > .pb-lk-fix-msg:not(:empty) { flex-basis: 100%; overflow-wrap: anywhere; }
@media (max-width: 640px) {
    .pb-lk-chg-row { grid-template-columns: 1fr; }
    .pb-lk-chg-do { justify-content: flex-start; }
    .pb-lk-chg-row > .pb-lk-row-msg { grid-column: 1; }
}
.pb-lk-strip .pb-lk-tag { margin-right: 0; }
@media (max-width: 600px) {
  /* Thumb-sized buttons on a phone (2026-10-10: Jeff acts on Lookout from his phone; measured 27px). */
  .pb-lk-dn-do .btn, .pb-lk-strip .btn, .pb-lk-chg .btn, .pb-lk-doc-do .btn { min-height: 40px; padding-top: 8px; padding-bottom: 8px; }
  .pb-lk-dn-row { grid-template-columns: 1fr; }
  .pb-lk-when { justify-self: start; }
  .pb-lk-dn-do { justify-content: flex-start; }
  .pb-lk-dn-more, .pb-lk-dn-row > .pb-lk-row-msg, .pb-lk-follow, .pb-lk-snz { grid-column: 1; justify-self: stretch; }
  .pb-lk-more { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .pb-lk-more > dd + dt { margin-top: 6px; }
  .pb-lk-follow .btn, .pb-lk-snz .btn { min-height: 40px; }
  .pb-lk-doc { grid-template-columns: 1fr; }
  .pb-lk-doc.has-pic { grid-template-columns: 72px minmax(0, 1fr); }
  .pb-lk-doc.has-pic .pb-lk-doc-do { grid-column: 2; }
  .pb-lk-doc-do { justify-content: flex-start; }
  .pb-lk-doc-do .pb-lk-msg { text-align: left; }
  .pb-lk-logrow { grid-template-columns: auto minmax(0, 1fr); }
  .pb-lk-log-when { grid-column: 1 / -1; }
  .pb-lk-logrow .pb-lk-fb { grid-column: 1 / -1; }
  .pb-lk-site { grid-template-columns: 1fr; }
  .pb-lk-site .pb-lk-msg { text-align: left; }
}
/* Media's upload page, rebuilt on the picture card (media::Admin::admin_UploadNewFile, 2026-10-13) */
.pb-upl-gal { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-bottom: 14px; }
.pb-upl-gal .pb-pic-label { margin: 0; }
.pb-upl-drop { min-height: 180px; }
.pb-upl-more { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.pb-upl-done h4 { margin: 8px 0 12px; font-size: 17px; }
.pb-upl-item { padding: 12px 0; border-top: 1px dashed var(--line); }
@media (max-width: 640px) { .pb-upl-more .btn { flex: 1 1 100%; min-height: 44px; } }
/* Pictures to fix: a row fixed in place fades its warning pills */
tr.pb-pic-fixed .pill.warn { opacity: .55; }
/* the credit box: the words in front ((c), Courtesy of, Photo by, none) and the name */
.pb-pic-creditctl { display: flex; gap: 6px; min-width: 0; }
.pb-pic-creditctl .pb-pic-creditfront { flex: 0 0 auto; width: auto; max-width: 46%; }
.pb-pic-creditctl input { flex: 1 1 auto; min-width: 0; }
/* the credit link on a card or popup */
.pb-pic-link { font-size: 14px; color: var(--muted); overflow-wrap: anywhere; }
.pb-pic-link .k { margin-right: 6px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
/* the picture popup: hover any Media picture (press and hold on a phone) */
.pb-pic-pop { position: fixed; z-index: 1060; padding: 12px 14px; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--surface); color: var(--ink); box-shadow: 0 10px 30px rgba(0,0,0,.35); display: flex; flex-direction: column; gap: 4px; }
/* The small "i" a hovered Media picture shows (no details on hover, Jeff 2026-10-14); a click opens them. */
.pb-pic-hover-i { position: fixed; z-index: 1059; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; background: var(--surface); color: var(--accent); box-shadow: 0 2px 8px rgba(0,0,0,.3); font: 700 14px/28px inherit; text-align: center; cursor: pointer; }
.pb-pic-hover-i[hidden] { display: none; }
.pb-pic-pop[hidden] { display: none; }

/* ===== The weekly report reads, Lookout does (features/weekly-report-actions, 2026-10-14) ===== */
/* "New in Lookout" on the report: what reached Lookout since the last report, linked */
.pb-report-lookout .pb-report-pill { color: var(--accent); background: var(--accent-soft); }
.pb-report-lk { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 4px; }
.pb-report-lk li { overflow-wrap: anywhere; }
/* a note's "See more" links to the numbers behind it */
.pb-report-more { margin: 0; color: var(--muted); overflow-wrap: anywhere; }

/* The photo picker on a Lookout photo change (features/import-place-changes, 2026-10-16): the photo
   now, the candidates to pick from, and Use my own. Wraps on a phone. */
.pb-lk-cands { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-start; margin: 6px 0 2px; }
.pb-lk-cand { display: flex; flex-direction: column; gap: 4px; width: 150px; margin: 0; padding: 6px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); cursor: pointer; font-weight: 400; }
.pb-lk-cand img { width: 100%; height: 96px; object-fit: cover; border-radius: var(--radius-sm); background: var(--surface-2); }
.pb-lk-cand input[type=radio] { margin: 0; }
.pb-lk-cand:has(input:checked), .pb-lk-cand.is-own.is-on { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.pb-lk-cand.is-now { cursor: default; background: var(--surface-2); }
.pb-lk-cand.is-none span { display: flex; align-items: center; justify-content: center; height: 96px; color: var(--muted); }
.pb-lk-cand figcaption, .pb-lk-cand-cap { font-size: 13px; color: var(--muted); overflow-wrap: anywhere; }
.pb-lk-own { align-self: center; }
@media (max-width: 640px) { .pb-lk-cand { width: calc(50% - 5px); } }

/* Add a place: "Already in PB?" under the Title (features/site-search, step 6, 2026-10-17). */
.pb-similar-places { margin: 4px 0 8px; padding: 6px 10px; border-left: 3px solid var(--warn); background: var(--warn-soft); color: var(--ink); border-radius: 4px; font-size: 13px; line-height: 1.5; }
.pb-similar-places .pb-similar-one { display: inline-block; margin-left: 10px; }
.pb-similar-places a { color: var(--ink); text-decoration: underline; }

/* The running box (admin4.js pbRunner, 2026-10-22): any job the page runs on its own, bottom right. */
.pb-runner { position: fixed; right: 16px; bottom: 16px; z-index: 1060; width: 340px; max-width: calc(100vw - 32px);
  background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-left: 4px solid var(--accent);
  border-radius: 8px; box-shadow: 0 6px 24px rgba(0, 0, 0, .25); padding: 12px 14px; font-size: 14px; line-height: 1.4; }
.pb-runner.is-ok { border-left-color: var(--ok); }
.pb-runner.is-warn { border-left-color: var(--warn); }
.pb-runner.is-bad { border-left-color: var(--bad); }
.pb-runner-head { display: flex; align-items: flex-start; gap: 8px; }
.pb-runner-title { flex: 1 1 auto; }
.pb-runner-x { border: 0; background: none; color: var(--muted); font-size: 20px; line-height: 1; padding: 0 2px; cursor: pointer; }
.pb-runner-x[hidden], .pb-runner-cancel[hidden], .pb-runner-bar[hidden] { display: none; }
.pb-runner-count { font-weight: 600; margin-top: 4px; }
.pb-runner-count:empty, .pb-runner-on:empty, .pb-runner-msg:empty { display: none; }
.pb-runner-on { color: var(--muted); overflow-wrap: anywhere; }
.pb-runner-bar { height: 6px; background: var(--sunken); border-radius: 3px; margin: 8px 0 4px; overflow: hidden; }
.pb-runner-bar span { display: block; height: 100%; width: 0; background: var(--accent); transition: width .3s; }
.pb-runner-msg { margin-top: 6px; overflow-wrap: anywhere; }
.pb-runner.is-ok .pb-runner-msg { color: var(--ok); font-weight: 600; }
.pb-runner.is-warn .pb-runner-msg { color: var(--warn); font-weight: 600; }
.pb-runner.is-bad .pb-runner-msg { color: var(--bad); font-weight: 600; }
.pb-runner-do { margin-top: 8px; text-align: right; }
.pb-runner-do:empty { display: none; }
@media (max-width: 640px) { .pb-runner { right: 8px; left: 8px; bottom: 8px; width: auto; max-width: none; } }