/* html-hub v19 — Ofload design system
 * --------------------------------------------------------------
 *   Brand tokens
 *   Typography
 *   Layout primitives
 *   Topbar
 *   Page header
 *   Buttons
 *   Forms
 *   Cards + tables + chips + badges
 *   Tabs (manage views)
 *   Opt-in collapsible section cards
 *   Live preview toggle (Content tab)
 *   Draggable page list
 *   Version history rows
 *   Activity / dashboard accent helpers
 *   Flash + legacy utility rules that older templates still reference
 * -------------------------------------------------------------- */

:root {
  /* Ofload brand colours */
  --ofload-navy: #010A26;
  --ofload-orange: #F05637;
  --ofload-orange-hover: #C0441B;
  --ofload-ice: #EBF2F4;
  --ofload-forest: #AAC3BC;
  --success: #24847C;

  --navy-80: rgba(1, 10, 38, 0.80);
  --navy-60: rgba(1, 10, 38, 0.60);
  --navy-40: rgba(1, 10, 38, 0.40);

  --text-heading: #010A26;
  --text-body:    #1F2944;
  --text-muted:   rgba(1, 10, 38, 0.58);

  --border-default: #E3E8EE;
  --border-strong:  #C7CFDA;

  --elev-1: 0 1px 2px  rgba(1, 10, 38, 0.06);
  --elev-2: 0 4px 12px rgba(1, 10, 38, 0.08);
  --elev-3: 0 10px 30px rgba(1, 10, 38, 0.12);
  --elev-4: 0 20px 44px rgba(1, 10, 38, 0.16);

  --radius-card:  15px;
  --radius-field: 10px;

  --dur-fast: 150ms;
  --ease-standard: cubic-bezier(.2, .8, .2, 1);

  /* Single typeface for everything — body + display use Inter with
     different weights to build hierarchy. Keeps the geometric, refined
     feel of the Claude/Ofload mock without a serif switch. */
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-display: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;

  /* Back-compat with older template rules. */
  --accent: var(--ofload-orange);
  --fg:     var(--text-heading);
  --muted:  var(--text-muted);
  --border: var(--border-default);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-body);
  background: var(--ofload-ice);
  min-height: 100vh;
}

a  { color: var(--ofload-orange); text-decoration: none; }
a:hover { color: var(--ofload-orange-hover); }

code {
  font-family: "SFMono-Regular", ui-monospace, Menlo, Consolas, monospace;
  font-size: 0.92em;
  background: #F3F0EE;
  padding: 0.1em 0.4em;
  border-radius: 4px;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--text-heading);
  letter-spacing: -0.01em;
  margin: 0 0 0.6em;
}
h1 { font-size: 40px; line-height: 1.1; font-weight: 700; letter-spacing: -0.025em; }
h2 { font-size: 22px; line-height: 1.25; font-weight: 600; }
h3 { font-size: 17px; line-height: 1.3;  font-weight: 600; }

p { margin: 0 0 0.8em; }
p:last-child { margin-bottom: 0; }

.muted { color: var(--text-muted); }
.row { display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap; }
.stack { display: flex; flex-direction: column; gap: 0.8rem; }
.stack > label { display: flex; flex-direction: column; gap: 0.35rem; font-size: 13px; color: var(--text-heading); font-weight: 500; }
.inline { display: inline; }

/* ---------- Layout ---------- */
.container {
  max-width: 900px;
  margin: 0 auto;
  padding: 48px 32px 96px;
}
.container.wide { max-width: 1280px; }
/* v20.7.18 — extra-wide container for the site overview specifically,
   where the live preview wants real estate to actually preview the site
   at something approaching its target viewport. */
/* v20.7.48 — bumped from 1480 to 1640 so the pages-table can fit all
   eight columns (Type, Name, URL, Privacy, Created by, Last updated,
   Open, Edit, ⋯) without horizontal clipping on standard laptop
   screens. The table itself also scrolls horizontally as a fallback if
   the viewport is still too narrow. */
.container.xwide { max-width: 1640px; }

/* ---------- Topbar ---------- */
.topbar {
  background: var(--ofload-navy);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  position: sticky; top: 0; z-index: 30;
}
.topbar-inner {
  max-width: 1280px; margin: 0 auto;
  padding: 0 32px;
  height: 64px;
  display: flex; align-items: center; gap: 20px;
}
.brand {
  display: flex; align-items: center; gap: 14px;
  text-decoration: none;
  color: inherit;
}
.brand:hover { color: inherit; }
.logo-wordmark {
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 18px;
  letter-spacing: 0.04em;
  color: #fff;
}
.logo-wordmark span { color: var(--ofload-orange); }
.brand-divider { width: 1px; height: 22px; background: rgba(255, 255, 255, 0.18); }
.brand-product {
  font-size: 14px; font-weight: 600;
  color: #fff;
  letter-spacing: 0.01em;
}
.nav-spacer { flex: 1; }

.nav-links { display: flex; align-items: center; gap: 4px; height: 64px; }
.nav-links a {
  color: rgba(255, 255, 255, 0.72); text-decoration: none;
  padding: 0 14px; height: 100%;
  display: inline-flex; align-items: center;
  font-size: 14px; font-weight: 500;
  position: relative;
  transition: color var(--dur-fast) var(--ease-standard);
}
.nav-links a:hover { color: #fff; }
.nav-links a.is-active { color: #fff; }
.nav-links a.is-active::after {
  content: "";
  position: absolute; left: 14px; right: 14px; bottom: 0;
  height: 2px; background: var(--ofload-orange);
  border-radius: 2px 2px 0 0;
}

.nav-sep { width: 1px; height: 24px; background: rgba(255, 255, 255, 0.18); margin: 0 8px; }

.user-chip {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 4px 14px 4px 4px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.06);
  transition: all var(--dur-fast) var(--ease-standard);
  cursor: default;
}
.user-chip:hover { border-color: rgba(255, 255, 255, 0.3); background: rgba(255, 255, 255, 0.1); }
.user-chip .user-name { font-size: 14px; font-weight: 600; color: #fff; line-height: 1; }
.avatar, .avatar-img {
  width: 30px; height: 30px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--ofload-orange); color: #fff;
  font-size: 12px; font-weight: 700; letter-spacing: 0.02em;
  object-fit: cover;
  flex-shrink: 0;
}
.avatar-img { background: transparent; }

.nav-logout {
  color: rgba(255, 255, 255, 0.65);
  background: transparent; border: 0;
  padding: 0 12px; height: 32px;
  font-size: 13px; font-weight: 500;
  cursor: pointer;
  border-radius: 8px;
  transition: all var(--dur-fast) var(--ease-standard);
}
.nav-logout:hover { color: #fff; background: rgba(255, 255, 255, 0.08); }

.nav-signin {
  color: #fff;
  padding: 8px 18px;
  border-radius: 999px;
  background: var(--ofload-orange);
  font-weight: 600;
}
.nav-signin:hover { background: var(--ofload-orange-hover); color: #fff; }

/* ---------- Flash ---------- */
.flash {
  max-width: 1280px; margin: 20px auto -8px;
  padding: 12px 20px;
  border-radius: 12px;
  font-size: 14px; font-weight: 500;
}
.flash-success { background: rgba(36, 132, 124, 0.12); color: #166A64; border: 1px solid rgba(36, 132, 124, 0.28); }
.flash-error   { background: rgba(240, 86, 55, 0.10); color: var(--ofload-orange-hover); border: 1px solid rgba(240, 86, 55, 0.28); }

/* v20.7.52 — TEST MODE banner that pins under the topbar whenever the
   session is the local test user. Bright purple to make it obvious
   you're impersonating; not destructive-red because no danger is
   actually happening — just signalling the impersonation. */
.test-mode-banner {
  background: #2b1c4f;
  color: #fff;
  font-size: 13px;
  padding: 8px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.test-mode-banner code {
  background: rgba(255, 255, 255, 0.14);
  padding: 1px 6px;
  border-radius: 4px;
  color: inherit;
}
.test-mode-pill {
  background: #a78bfa;
  color: #1a103d;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.08em;
  padding: 2px 8px;
  border-radius: 4px;
}
.test-mode-signout {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.4);
  font-size: 12px;
  padding: 4px 12px;
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
}
.test-mode-signout:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.7);
}

/* v20.7.53 — Hide button shares the signout styling but smaller. */
.test-mode-collapse {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.4);
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
}
.test-mode-collapse:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.7);
}

/* Tiny floating restore button — shows after the banner collapses so
   the operator can never lose the impersonation indicator entirely. */
.test-mode-restore {
  position: fixed;
  bottom: 16px;
  right: 16px;
  z-index: 1000;
  background: #2b1c4f;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.18);
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-shadow: var(--elev-3);
}
.test-mode-restore:hover { background: #1a103d; }
.test-mode-restore .test-mode-pill { font-size: 9px; }

/* ---------- Page header (top of each page inside .container) ---------- */
.page-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px; margin-bottom: 32px; flex-wrap: wrap;
}
.page-head h1 { margin: 0 0 6px; }
.page-head .sub { font-size: 15px; color: var(--text-muted); margin: 0; }
.head-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

/* ---------- Buttons ---------- */
button, .button { font-family: inherit; }
button, input, select, textarea { font-family: var(--font-body); }

.btn, button[type="submit"], .button {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px;
  height: 40px;
  padding: 0 18px;
  border-radius: var(--radius-field);
  font-size: 14px; font-weight: 600;
  letter-spacing: 0.005em;
  border: 0;
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease-standard);
  white-space: nowrap;
  text-decoration: none;
}
.btn svg, button[type="submit"] svg { width: 16px; height: 16px; stroke-width: 2.25; }

.btn.primary, button[type="submit"].primary, button.primary, .button.primary {
  background: var(--ofload-orange); color: #fff;
  box-shadow: var(--elev-1);
}
.btn.primary:hover, button.primary:hover {
  background: var(--ofload-orange-hover);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(240, 86, 55, 0.25);
}
.btn.primary:active, button.primary:active { transform: translateY(0); }

.btn:not(.primary):not(.danger), button[type="submit"]:not(.primary):not(.danger) {
  background: #fff;
  color: var(--text-heading);
  border: 1px solid var(--border-default);
}
.btn:not(.primary):not(.danger):hover,
button[type="submit"]:not(.primary):not(.danger):hover {
  border-color: var(--border-strong);
  background: #F8FAFB;
}

.btn.danger, button.danger {
  background: var(--ofload-orange); color: #fff;
}
.btn.danger:hover, button.danger:hover { background: var(--ofload-orange-hover); }

.linklike {
  display: inline-flex; align-items: center; gap: 4px;
  background: none; border: 0; padding: 0;
  color: var(--ofload-orange);
  font-size: inherit; font-weight: 500; cursor: pointer;
  text-decoration: none;
}
.linklike:hover { color: var(--ofload-orange-hover); text-decoration: underline; }
.linklike.danger { color: #A42E10; }
.linklike.danger:hover { color: #6B1A08; }

/* ---------- Forms ---------- */
input[type="text"], input[type="password"], input[type="email"], input[type="search"],
input:not([type]), textarea, select {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-field);
  background: #fff;
  font-size: 14px;
  color: var(--text-heading);
  transition: border-color var(--dur-fast) var(--ease-standard),
              box-shadow var(--dur-fast) var(--ease-standard);
  outline: none;
}
input[type="file"] {
  padding: 8px;
  border: 1px dashed var(--border-strong);
  background: #fff;
  border-radius: var(--radius-field);
  font-size: 13px; width: 100%;
}
input:focus, textarea:focus, select:focus {
  border-color: var(--ofload-orange);
  box-shadow: 0 0 0 3px rgba(240, 86, 55, 0.18);
}
textarea { min-height: 72px; resize: vertical; line-height: 1.5; }

label.radio, label.checkbox {
  display: flex; align-items: center; gap: 0.55rem;
  font-size: 14px; color: var(--text-heading); font-weight: 500;
  cursor: pointer;
}
label.radio input, label.checkbox input { accent-color: var(--ofload-orange); }
label.radio strong, label.checkbox strong { font-weight: 600; }

fieldset {
  border: 1px solid var(--border-default);
  border-radius: var(--radius-card);
  padding: 14px 18px;
  margin: 0;
}
fieldset legend {
  padding: 0 8px;
  font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--text-muted);
}

/* ---------- Cards ---------- */
.card, .card.compact {
  background: #fff;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-card);
  padding: 18px 20px;
  margin: 0 0 16px;
}
.card.compact { padding: 16px 18px; }
.card.danger  { border-color: rgba(240, 86, 55, 0.25); background: #FFF9F6; }

.section-card {
  background: #fff;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-card);
  margin: 0 0 16px;
  overflow: hidden;
}
.section-card > summary {
  list-style: none;
  cursor: pointer;
  padding: 14px 20px;
  font-size: 15px; font-weight: 600;
  color: var(--text-heading);
  display: flex; align-items: center; gap: 10px;
  user-select: none;
  background: #FAFBFC;
  transition: background var(--dur-fast) var(--ease-standard);
}
.section-card > summary:hover { background: #F3F5F8; }
.section-card > summary::-webkit-details-marker { display: none; }
.section-card > summary::before {
  content: "›";
  font-size: 18px;
  color: var(--navy-60);
  transition: transform var(--dur-fast) var(--ease-standard);
  display: inline-block; line-height: 1;
}
.section-card[open] > summary::before { transform: rotate(90deg); }
.section-card[open] > summary { border-bottom: 1px solid var(--border-default); }
.section-card > .section-body { padding: 18px 20px; }
.section-card .section-count {
  margin-left: auto;
  font-weight: 400;
  font-size: 12px;
  color: var(--text-muted);
  background: #EDF0F4;
  padding: 2px 10px;
  border-radius: 999px;
}

/* ---------- Tables ---------- */
table.list, table.sites {
  width: 100%; border-collapse: collapse;
  background: #fff;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-card);
  overflow: hidden;
  table-layout: auto;
}
table.list th, table.list td, table.sites th, table.sites td {
  text-align: left;
  padding: 14px 20px;
  vertical-align: middle;
  overflow-wrap: anywhere;
  word-break: break-word;
}
table.list thead th, table.sites thead th {
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--text-muted);
  background: #FAFBFC;
  border-bottom: 1px solid var(--border-default);
}
table.list tbody tr, table.sites tbody tr {
  border-bottom: 1px solid var(--border-default);
  transition: background var(--dur-fast) var(--ease-standard);
}
table.list tbody tr:last-child, table.sites tbody tr:last-child { border-bottom: 0; }
table.list tbody tr:hover, table.sites tbody tr:hover { background: rgba(235, 242, 244, 0.45); }
table.list td code, table.list th code { white-space: normal; word-break: break-all; background: transparent; padding: 0; }

/* v20.7.49 — "new in the last 7 days" highlight for admin dashboard.
   Soft orange tint + a 3px stripe on the leading edge so the eye can
   scan straight to brand-new POCs. The matching "NEW" pill sits next
   to the site name. Tint persists on hover (slightly stronger). */
table.sites tbody tr.site-row-recent {
  background: rgba(240, 86, 55, 0.06);
  box-shadow: inset 3px 0 0 var(--ofload-orange);
}
table.sites tbody tr.site-row-recent:hover {
  background: rgba(240, 86, 55, 0.11);
}
.site-recent-pill {
  display: inline-block;
  margin-left: 8px;
  vertical-align: middle;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--ofload-orange);
  color: #fff;
}

/* --- Sortable column headers --- */
table.sites th.sortable {
  cursor: pointer;
  position: relative;
  padding-right: 28px; /* room for the sort-indicator arrow */
  user-select: none;
  transition: color var(--dur-fast) var(--ease-standard);
}
table.sites th.sortable:hover { color: var(--text-heading); }
table.sites th.sortable::after {
  content: "↕";
  position: absolute; right: 12px; top: 50%;
  transform: translateY(-50%);
  font-size: 10px; opacity: 0.35;
  transition: opacity var(--dur-fast) var(--ease-standard);
}
table.sites th.sortable:hover::after { opacity: 0.7; }
table.sites th.sortable[data-sort-dir="asc"]::after  { content: "▲"; opacity: 1; color: var(--ofload-orange); }
table.sites th.sortable[data-sort-dir="desc"]::after { content: "▼"; opacity: 1; color: var(--ofload-orange); }

/* --- Resizable column grip (lives on the right edge of each <th>) --- */
/* Every table that ships a resize grip keeps table-layout: auto so
   the browser can grow columns to fit content when the user hasn't
   manually dragged them. Once they drag, an explicit th width wins. */
table.list th, table.sites th {
  position: relative;
}
.col-resize-grip {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 6px;
  cursor: col-resize;
  user-select: none;
  touch-action: none;
  z-index: 1;
  transition: background var(--dur-fast) var(--ease-standard);
}
.col-resize-grip::before {
  content: "";
  position: absolute;
  top: 20%; bottom: 20%; right: 2px;
  width: 2px;
  background: var(--border-default);
  border-radius: 1px;
}
.col-resize-grip:hover::before,
.col-resize-grip.is-active::before { background: var(--ofload-orange); }
body.col-resizing { cursor: col-resize !important; user-select: none; }

/* ---------- Badges ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.01em;
}
.badge-dot { width: 6px; height: 6px; border-radius: 999px; }
.badge-allowlist { background: rgba(36, 132, 124, 0.14); color: #1A6963; }
.badge-allowlist .badge-dot { background: var(--success); }
.badge-workspace { background: rgba(1, 10, 38, 0.06); color: var(--text-heading); }
.badge-workspace .badge-dot { background: var(--ofload-navy); }
.badge-password, .badge-public { background: rgba(240, 86, 55, 0.10); color: var(--ofload-orange-hover); }
.badge-password .badge-dot, .badge-public .badge-dot { background: var(--ofload-orange); }

/* ---------- Summary stat tiles ---------- */
.summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin: 0 0 32px;
}
@media (max-width: 900px) { .summary { grid-template-columns: 1fr; } }
.stat-card {
  border: 1px solid var(--border-default);
  border-radius: var(--radius-card);
  padding: 20px 24px;
  display: flex; flex-direction: column; gap: 6px;
  transition: border-color var(--dur-fast) var(--ease-standard),
              box-shadow var(--dur-fast) var(--ease-standard);
  background: #fff;
}
.stat-card:hover { box-shadow: var(--elev-1); }
.stat-label {
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--text-muted);
  display: flex; align-items: center; gap: 8px;
}
.stat-label svg { width: 14px; height: 14px; stroke-width: 2; color: var(--navy-60); }
.stat-value {
  font-size: 40px; line-height: 1.1;
  color: var(--text-heading); font-weight: 600;
  letter-spacing: -0.025em;
  margin-top: 2px;
}
.stat-meta { font-size: 13px; color: var(--text-muted); margin-top: 4px; }
.stat-meta strong { color: var(--text-heading); font-weight: 600; }
.stat-meta strong.up   { color: var(--success); }
.stat-meta strong.down { color: var(--ofload-orange-hover); }

/* Colorways — Active sites (navy), Unique viewers (orange), Page views (forest). */
.stat-card.accent-navy {
  background: var(--ofload-navy);
  border-color: var(--ofload-navy);
  color: #fff;
}
.stat-card.accent-navy .stat-label       { color: rgba(255, 255, 255, 0.6); }
.stat-card.accent-navy .stat-label svg   { color: var(--ofload-orange); }
.stat-card.accent-navy .stat-value       { color: #fff; }
.stat-card.accent-navy .stat-meta        { color: rgba(255, 255, 255, 0.65); }
.stat-card.accent-navy .stat-meta strong { color: var(--ofload-orange); }

.stat-card.accent-orange {
  background: var(--ofload-orange);
  border-color: var(--ofload-orange);
  color: #fff;
}
.stat-card.accent-orange .stat-label       { color: rgba(255, 255, 255, 0.85); }
.stat-card.accent-orange .stat-label svg   { color: #fff; }
.stat-card.accent-orange .stat-value       { color: #fff; }
.stat-card.accent-orange .stat-meta        { color: rgba(255, 255, 255, 0.85); }
.stat-card.accent-orange .stat-meta strong { color: #fff; }

.stat-card.accent-forest {
  background: var(--ofload-forest);
  border-color: transparent;
  color: var(--text-heading);
}
.stat-card.accent-forest .stat-label       { color: rgba(1, 10, 38, 0.72); }
.stat-card.accent-forest .stat-label svg   { color: #1F5A52; }
.stat-card.accent-forest .stat-value       { color: var(--text-heading); }
.stat-card.accent-forest .stat-meta        { color: rgba(1, 10, 38, 0.65); }
.stat-card.accent-forest .stat-meta strong.up   { color: #1A6963; }
.stat-card.accent-forest .stat-meta strong.down { color: #8A3B1E; }

/* ---------- Dashboard site list ---------- */
.site-name { display: flex; align-items: center; gap: 14px; }
.site-icon {
  width: 40px; height: 40px;
  border-radius: 10px;
  background: var(--ofload-ice);
  display: flex; align-items: center; justify-content: center;
  color: var(--ofload-navy);
  flex-shrink: 0;
  font-size: 16px; font-weight: 700;
}
.site-icon-ice    { background: var(--ofload-ice); color: var(--ofload-navy); }
.site-icon-orange { background: rgba(240, 86, 55, 0.10); color: var(--ofload-orange); }
.site-icon-forest { background: rgba(170, 195, 188, 0.35); color: #1F5A52; }
.site-icon-navy   { background: rgba(1, 10, 38, 0.08);  color: var(--ofload-navy); }
.site-title {
  font-size: 15px; font-weight: 600;
  color: var(--text-heading);
  text-decoration: none;
  display: block; line-height: 1.3;
}
.site-title:hover { color: var(--ofload-orange); text-decoration: none; }
.site-path { font-size: 12px; color: var(--text-muted); margin-top: 2px; }

.url-cell {
  font-family: "SFMono-Regular", ui-monospace, Menlo, Consolas, monospace;
  font-size: 12.5px;
  color: var(--navy-60);
  word-break: break-all;
}
.url-cell .url-host { color: var(--navy-40); }
.url-cell .url-slug { color: var(--text-heading); font-weight: 500; }

.updated { font-size: 13.5px; color: var(--text-heading); line-height: 1.3; }
.updated .rel { display: block; font-size: 12px; color: var(--text-muted); margin-top: 2px; }

.row-actions { display: flex; align-items: center; justify-content: flex-end; gap: 4px; }
.action-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  border-radius: 8px;
  background: transparent; border: 0;
  color: var(--navy-60);
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease-standard);
}
.action-btn:hover { background: var(--ofload-ice); color: var(--text-heading); }
.action-btn svg { width: 16px; height: 16px; stroke-width: 2; }

.open-link {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 8px;
  font-size: 13px; font-weight: 600;
  color: var(--ofload-orange);
  text-decoration: none;
  white-space: nowrap;
  transition: all var(--dur-fast) var(--ease-standard);
}
.row-actions { white-space: nowrap; }
.open-link:hover { background: rgba(240, 86, 55, 0.08); color: var(--ofload-orange-hover); text-decoration: none; }
.open-link svg { width: 14px; height: 14px; stroke-width: 2.25; transition: transform var(--dur-fast) var(--ease-standard); }
.open-link:hover svg { transform: translate(2px, -2px); }

/* ---------- Tabs (manage views) ---------- */
.tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--border-default);
  margin: 0 0 20px;
  overflow-x: auto;
  background: transparent;
}
.tabs button {
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  padding: 12px 18px;
  color: var(--text-muted);
  font-weight: 500;
  font-size: 14px;
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease-standard);
}
.tabs button:hover { color: var(--text-heading); background: transparent; border-color: transparent; box-shadow: none; transform: none; }
.tabs button.active {
  color: var(--ofload-orange);
  border-bottom-color: var(--ofload-orange);
}
.tab-panel { display: none; }
.tab-panel.active { display: block; }

.tabs-spacer { flex: 1; }
.tabs .help-btn {
  background: #fff;
  border: 1px solid var(--border-default);
  border-radius: 999px;
  padding: 6px 14px;
  height: 32px;
  font-size: 13px; font-weight: 600;
  color: var(--text-heading);
  cursor: pointer;
  align-self: center;
  white-space: nowrap;
  transition: all var(--dur-fast) var(--ease-standard);
}
.tabs .help-btn:hover {
  background: var(--ofload-orange);
  color: #fff;
  border-color: var(--ofload-orange);
}

/* ---------- Two-column helper ---------- */
.two-col {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px;
}
@media (max-width: 900px) {
  .two-col { grid-template-columns: 1fr; }
}

/* ---------- Compact manage header strip ---------- */
.manage-header {
  display: flex; flex-wrap: wrap; gap: 16px;
  align-items: baseline; justify-content: space-between;
  margin: 0 0 16px;
}
.manage-header h1 { margin: 0; font-size: 32px; }
.manage-header .url-bar {
  font-family: "SFMono-Regular", ui-monospace, Menlo, Consolas, monospace;
  font-size: 13px; color: var(--text-muted);
}
/* v20.7.42 — same blue-hyperlink treatment for .url-bar links used by
   the drill-down headers and the homepage identity. */
.manage-header .url-bar a,
.homepage-identity .url-bar a,
.url-bar a.live-link {
  color: #1e6fff;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: rgba(30, 111, 255, 0.40);
}
.manage-header .url-bar a code,
.homepage-identity .url-bar a code {
  color: inherit;
}
.manage-header .url-bar a:hover,
.homepage-identity .url-bar a:hover {
  text-decoration-color: #1e6fff;
}

/* v20.7.45 — superadmin-only "Download .zip" link. Looks like a normal
   pill action so it sits next to "Open ↗" without screaming for
   attention. Rendered only inside `<% if (locals.isSuperadmin) %>`
   blocks; non-superadmins never see it. */
.superadmin-download-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 500;
  padding: 2px 10px;
  margin-left: 8px;
  border-radius: 999px;
  border: 1px solid rgba(1, 10, 38, 0.12);
  background: rgba(240, 86, 55, 0.06);
  color: var(--ofload-orange);
  text-decoration: none;
  white-space: nowrap;
  transition: background 80ms ease, border-color 80ms ease;
}
.superadmin-download-link:hover {
  background: rgba(240, 86, 55, 0.14);
  border-color: rgba(240, 86, 55, 0.40);
  text-decoration: none;
}
.manage-header-main { min-width: 0; flex: 1; }
.manage-header-meta { text-align: right; }

/* v20.7.26 — Identity inputs live INSIDE a section-card now, so the
   outer container is just a form with no extra chrome. Field labels +
   hairline borders on inputs make the editability obvious; Save / Cancel
   appear when dirty. */
.site-identity-inline { margin: 0; }
.site-identity-inline-row {
  display: flex;
  align-items: flex-end;
  gap: 14px;
  flex-wrap: wrap;
  margin: 0;
}
.site-identity-field-wrap {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}
.site-identity-field-wrap.site-identity-field-name { flex: 1 1 260px; }
.site-identity-field-wrap.site-identity-field-slug { flex: 1 1 280px; }
.site-identity-field-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.site-identity-field-label::after {
  content: '✎';
  color: var(--text-muted);
  font-size: 10px;
  opacity: 0.7;
}
.site-identity-h1 {
  font-size: 28px;
  font-weight: 700;
  line-height: 1.2;
  font-family: inherit;
  color: var(--text-heading);
  padding: 6px 12px;
  margin: 0;
  border: 1px solid var(--border-default);
  border-radius: 8px;
  background: #fff;
  width: 100%;
  min-width: 0;
}
.site-identity-h1:hover { border-color: var(--text-muted); }
.site-identity-h1:focus {
  outline: 0;
  border-color: var(--ofload-orange);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(240, 86, 55, 0.12);
}
.site-identity-divider { display: none; } /* legacy slash — labels carry the meaning now */
.site-identity-inline-slug {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--border-default);
  border-radius: 8px;
  padding: 8px 12px;
  background: #fff;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 14px;
  color: var(--text-muted);
  width: 100%;
  min-width: 0;
}
.site-identity-inline-slug:hover { border-color: var(--text-muted); }
.site-identity-inline-slug:focus-within {
  border-color: var(--ofload-orange);
  box-shadow: 0 0 0 3px rgba(240, 86, 55, 0.12);
}
.site-identity-slug-prefix,
.site-identity-slug-suffix {
  color: var(--text-muted);
  user-select: none;
}
.site-identity-slug-input {
  border: 0; padding: 0 2px;
  font-family: inherit;
  font-size: 14px;
  background: transparent;
  color: var(--text-heading);
  font-weight: 500;
  flex: 1;
  min-width: 80px;
}
.site-identity-slug-input:focus { outline: 0; }
.site-identity-inline-save,
.site-identity-inline-cancel {
  height: 32px;
  padding: 0 14px;
  font-size: 13px;
  font-weight: 600;
  border-radius: var(--radius-field);
  cursor: pointer;
  font-family: inherit;
}
.site-identity-inline-save {
  background: var(--ofload-orange);
  border: 1px solid var(--ofload-orange);
  color: #fff;
}
.site-identity-inline-save:hover { background: var(--ofload-orange-hover); border-color: var(--ofload-orange-hover); }
.site-identity-inline-cancel {
  background: #fff;
  border: 1px solid var(--border-default);
  color: var(--text-heading);
}
.site-identity-inline-cancel:hover { border-color: var(--text-muted); }
.site-identity-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed var(--border-default);
  font-size: 13px;
}
/* v20.7.42 — Live-URL links in the admin header read as real hyperlinks
   (blue + underlined). Matches the visitor directory styling so admins
   recognise these as the public URL their site is served at, not just
   decorative monospace text. The `<code>` inside the link inherits the
   blue color too. Hover bumps the underline to full opacity. */
.site-identity-meta a {
  color: #1e6fff;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: rgba(30, 111, 255, 0.40);
}
.site-identity-meta a code { color: inherit; }
.site-identity-meta a:hover {
  color: #1e6fff;
  text-decoration-color: #1e6fff;
}
.site-identity-warn {
  font-size: 12px;
  color: #B45309;
}
.site-identity-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  align-self: flex-end;
}

/* ---------- Live preview toggle ---------- */
.preview-toggle {
  margin: 0 0 16px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-card);
  background: #fff;
}
.preview-toggle > summary {
  list-style: none;
  cursor: pointer;
  padding: 14px 18px;
  display: flex; align-items: baseline; gap: 10px;
  user-select: none;
}
.preview-toggle > summary::-webkit-details-marker { display: none; }
.preview-chevron { color: var(--navy-60); transition: transform var(--dur-fast) var(--ease-standard); display: inline-block; }
.preview-toggle[open] .preview-chevron { transform: rotate(90deg); }
.preview-label { font-weight: 600; color: var(--text-heading); font-size: 15px; }
.preview-hint { font-size: 13px; }
.preview-body { padding: 0 18px 18px; display: flex; flex-direction: column; gap: 10px; }
.preview-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; }
.preview-frame-inline {
  width: 100%; height: 720px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-card);
  background: #fff;
}
@media (max-width: 700px) { .preview-frame-inline { height: 520px; } }

/* ---------- Site structure mini-tree ---------- */
.site-tree {
  list-style: none; padding: 0; margin: 0 0 8px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-card);
  background: #FAFBFC;
  overflow: hidden;
}
.site-tree > li {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  font-size: 14px;
  border-top: 1px solid #EBEFF3;
}
.site-tree > li:first-child { border-top: 0; }
.tree-home { background: rgba(240, 86, 55, 0.06); font-weight: 500; }
.tree-home-none { background: #fff; color: var(--text-muted); }
.tree-icon { font-size: 16px; flex-shrink: 0; }
.tree-branch { color: var(--navy-40); font-family: ui-monospace, monospace; flex-shrink: 0; }
.tree-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.tree-hint { font-size: 12px; text-align: right; }
.tree-page.tree-effective { background: #FEF8E6; }
.tree-page.tree-hidden { opacity: 0.55; text-decoration: line-through; }
.tree-badge {
  background: #FCD34D; color: #78350F;
  font-size: 11px; font-weight: 600;
  padding: 2px 8px; border-radius: 999px;
  white-space: nowrap;
}
.tree-badge-hidden { background: #E5E7EB; color: #374151; }

/* ---------- Draggable page list (legacy <ul> view in _tab-content.ejs) ----
   v20.7.3: scoped under .page-list so the same .page-row class on the new
   tree-table TR elements isn't force-flexed into a card. The table version
   styles itself via .pages-tree .page-row below. */
.page-list { list-style: none; padding: 0; margin: 8px 0 0; }
.page-list .page-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-card);
  background: #fff;
  margin-bottom: 8px;
  cursor: grab;
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.page-list .page-row:hover { border-color: var(--border-strong); box-shadow: var(--elev-1); }
.page-list .page-row.dragging { opacity: 0.4; }
.page-list .page-row.drop-above { border-top: 2px solid var(--ofload-orange); }
.page-list .page-row.is-home { border-color: var(--ofload-orange); background: rgba(240, 86, 55, 0.03); }
.page-list .page-row.is-hidden { background: #F7F8FA; opacity: 0.8; }
.page-list .page-row.is-hidden .page-title strong { text-decoration: line-through; }
.page-grip { color: var(--navy-40); font-size: 1.05rem; cursor: grab; user-select: none; padding: 0 4px; }
.page-list .page-row:active .page-grip { cursor: grabbing; }
.page-info { flex: 1; min-width: 0; }
.page-title { font-size: 14px; }
.page-actions { display: flex; gap: 12px; align-items: center; flex-shrink: 0; font-size: 13px; }
.home-pill {
  background: var(--ofload-orange); color: #fff;
  font-size: 11px; font-weight: 700;
  padding: 2px 10px; border-radius: 999px;
  margin-right: 6px; display: inline-block; vertical-align: middle;
  letter-spacing: 0.02em;
}
.hidden-pill {
  background: #E5E7EB; color: #374151;
  font-size: 11px; font-weight: 600;
  padding: 2px 10px; border-radius: 999px;
  margin-left: 6px; display: inline-block; vertical-align: middle;
}

/* ---------- Version history rows ---------- */
.version-row { padding: 12px 0; border-top: 1px solid var(--border-default); }
.version-row:first-child { border-top: 0; padding-top: 0; }
.version-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 14px; flex-wrap: wrap;
}

/* ---------- Files list ---------- */
ul.files {
  list-style: none; padding: 0; margin: 6px 0 0;
  display: flex; flex-direction: column; gap: 4px;
}
ul.files li {
  font-size: 13px;
  padding: 6px 10px;
  background: #FAFBFC;
  border: 1px solid var(--border-default);
  border-radius: 6px;
}
ul.files code { background: transparent; padding: 0; }

/* ---------- Dashboard empty state ---------- */
.empty-state {
  text-align: center;
  padding: 64px 32px;
  background: #fff;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-card);
}
.empty-state h2 { margin: 0 0 10px; font-size: 22px; }
.empty-state p  { color: var(--text-muted); margin: 0 0 18px; }

/* ---------- Wide container tweaks for manage-grid (legacy) ---------- */
.manage-grid { display: block; } /* v18.3+ dropped the sticky preview sidebar */

/* =========================================================================
   v20.1 — site-overview redesign
   Single-page layout: pages table on the left, nav tiles on the right,
   upload-and-add collapsible at the bottom. Drill-downs reuse the same
   header strip with a back-link.
   ========================================================================= */

/* Drill-down breadcrumb back-to-overview link. */
.back-link {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  text-decoration: none;
  padding: 4px 0;
}
.back-link:hover { color: var(--ofload-orange); }

/* Drill-down headers re-use .manage-header but bump the bottom margin
   down a touch — drill-downs only have a header + content, no tabs. */
.manage-header.drilldown-header { margin-bottom: 24px; }

/* Compact button variant used inline in headers. */
.btn-compact {
  padding: 6px 12px !important;
  font-size: 13px !important;
  height: auto !important;
  gap: 6px;
}

/* ---------- Overview grid -------------------------------------------- */
/* Pages table dominates (left); tile rail aligned to the right. The
   upload-and-add card stacks UNDER the pages table inside the same left
   column so the two have matching widths. At narrow widths the tile
   column collapses below the page list. */
/* v20.7.46 — Side rail back on the RIGHT (compact 240px column), pages
   on the LEFT taking the full remaining width. Source order in the
   templates is `<aside>` then `<section>`, so we use grid-column to
   force the visual order (pages left, tiles right) without re-shuffling
   the markup again. */
.overview-grid {
  display: grid;
  /* v20.7.48: narrowed the side rail from 240px → 220px and the gap
     from 24px → 18px to give the pages table + live preview an extra
     ~26px of width. Small change, but it's enough on a typical 1440-wide
     screen to fit the extra Created-by / Last-updated columns without
     the row actions clipping off. */
  grid-template-columns: minmax(0, 1fr) 220px;
  gap: 18px;
  margin: 8px 0 24px;
  align-items: start;
}
.overview-grid > .overview-pages { grid-column: 1; grid-row: 1; }
.overview-grid > .overview-side  { grid-column: 2; grid-row: 1; }
@media (max-width: 980px) {
  .overview-grid { grid-template-columns: 1fr; }
  .overview-grid > .overview-pages,
  .overview-grid > .overview-side { grid-column: 1; grid-row: auto; }
}

.overview-pages,
.overview-side {
  min-width: 0; /* let grid shrink children below their content width */
}

.overview-pages {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Upload-and-add lives inside the left column now — same width as the
   pages table above it. scroll-margin keeps anchor jumps clean of the
   sticky topbar. */
.overview-upload-slot {
  scroll-margin-top: 80px;
}
.overview-upload-slot .section-card { margin-bottom: 0; }

/* ---------- Pages table --------------------------------------------- */
.pages-table-wrap {
  background: #fff;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-card);
  box-shadow: var(--elev-1);
  /* v20.7.48 — horizontal scroll fallback so a long table (8 columns +
     URL + actions) doesn't clip the right-edge buttons on narrow
     viewports. The `overflow-clip-margin` keeps the kebab dropdown able
     to escape vertically — without it the dropdown gets clipped by the
     `overflow-x:auto`. */
  overflow-x: auto;
  overflow-y: visible;
  overflow-clip-margin: 12px;
}
.pages-table-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px;
  border-bottom: 1px solid var(--border-default);
  background: #FAFBFC;
  gap: 12px;
}

.pages-empty {
  padding: 48px 24px;
  text-align: center;
}

.pages-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.pages-table thead th {
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  padding: 10px 12px;
  background: #FAFBFC;
  border-bottom: 1px solid var(--border-default);
  white-space: nowrap;
}
.pages-table tbody tr {
  border-bottom: 1px solid var(--border-default);
  cursor: pointer;
  transition: background 80ms ease;
}
.pages-table tbody tr:last-child { border-bottom: none; }
.pages-table tbody tr:hover { background: #FCFDFE; }
.pages-table tbody tr.is-hidden { opacity: 0.62; }
.pages-table tbody tr.is-home   { background: rgba(240, 86, 55, 0.025); }
.pages-table tbody tr.is-home:hover { background: rgba(240, 86, 55, 0.06); }
.pages-table td {
  padding: 12px 12px;
  vertical-align: middle;
}

/* v20.6.4 columns. Both the homepage and subpages tables share these
   widths via matching <colgroup> elements, so the two tables align
   pixel-for-pixel even though they're rendered separately. */
.pages-table col.col-grip,
.pages-table .col-grip   { width: 28px; padding-left: 14px; padding-right: 0; }
.pages-table col.col-pos,
.pages-table .col-pos    { width: 36px; text-align: center; }
.pages-table col.col-name,
.pages-table .col-name   { min-width: 220px; }
.pages-table col.col-privacy,
.pages-table .col-privacy { width: 130px; }
.pages-table col.col-actions,
.pages-table .col-actions { width: 1%; padding-left: 12px; padding-right: 18px; }

.page-grip {
  display: inline-block;
  color: var(--text-muted);
  font-weight: 700;
  cursor: grab;
  user-select: none;
  padding: 0 4px;
  letter-spacing: -2px;
}
.page-grip:active { cursor: grabbing; }
.pages-table tr.dragging { opacity: 0.45; }
.pages-table tr.drop-above td { box-shadow: 0 -2px 0 var(--ofload-orange) inset; }

.home-marker { font-size: 16px; }

.page-cell { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.page-cell-name {
  font-size: 14px;
  color: var(--text-heading);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
}
.page-cell-slug {
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.page-cell-slug code {
  background: transparent;
  padding: 0;
  font-size: 12px;
  color: var(--text-muted);
}
.page-cell-open {
  color: var(--ofload-orange);
  text-decoration: none;
  font-weight: 600;
  flex: none;
}
.page-cell-open:hover { color: var(--ofload-orange-hover); }

/* State pills (Homepage / Active / Hidden). */
.state-pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  border: 1px solid transparent;
}
.state-home   { background: rgba(240, 86, 55, 0.10); color: var(--ofload-orange-hover); border-color: rgba(240, 86, 55, 0.25); }
.state-active { background: rgba(36, 132, 124, 0.10); color: #166A64; border-color: rgba(36, 132, 124, 0.22); }
.state-hidden { background: rgba(1, 10, 38, 0.06);    color: var(--text-muted); border-color: rgba(1, 10, 38, 0.10); }

/* "Inherit" privacy badge (in addition to the existing badge-allowlist /
   badge-workspace / badge-password defined earlier in this file). */
.badge-inherit {
  background: rgba(1, 10, 38, 0.04);
  color: var(--text-muted);
  border: 1px solid rgba(1, 10, 38, 0.08);
}
.badge-inherit .badge-dot { background: var(--text-muted); }

/* Kebab menu (per-row actions). */
.kebab { position: relative; display: inline-block; }
.kebab-btn {
  width: 28px; height: 28px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  font-size: 18px;
  font-weight: 700;
  color: var(--text-muted);
  cursor: pointer;
  line-height: 1;
}
.kebab-btn:hover { background: #F3F5F8; border-color: var(--border-default); color: var(--text-heading); }
.kebab-menu {
  /* v20.7.22 — use position:fixed so the menu can escape ancestor
     overflow:hidden (notably .pages-table-wrap) and never gets clipped
     off the right edge of the page. JS computes top/left on open. */
  position: fixed;
  min-width: 200px;
  background: #fff;
  border: 1px solid var(--border-default);
  border-radius: 10px;
  box-shadow: var(--elev-3);
  padding: 6px;
  z-index: 1000;
  display: none;
  flex-direction: column;
}
.kebab.is-open .kebab-menu { display: flex; }
.kebab-menu a,
.kebab-menu button {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  padding: 7px 10px;
  font-size: 13px;
  border-radius: 6px;
  cursor: pointer;
  color: var(--text-heading);
  font-family: inherit;
  text-decoration: none;
  font-weight: 500;
  box-shadow: none;
  transform: none !important;
}
.kebab-menu a:hover,
.kebab-menu button:hover { background: #F3F5F8; }
.kebab-menu form { margin: 0; }
.kebab-menu .danger { color: #B91C1C; }
.kebab-menu .danger:hover { background: rgba(185, 28, 28, 0.08); }

/* v20.5 — Pages section labels (Homepage / Subpages) */
.pages-section { border-top: 1px solid var(--border-default); }
.pages-section:first-of-type { border-top: none; }
.pages-section-label {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px 8px;
  background: #FAFBFC;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.pages-section-icon { font-size: 14px; flex: none; }
.pages-section-title {
  font-weight: 700;
  color: var(--text-heading);
}
.pages-section-hint {
  margin-left: auto;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  font-size: 11px;
}
.pages-section-hint code {
  background: #fff;
  border: 1px solid var(--border-default);
  padding: 0 4px;
  border-radius: 4px;
}

/* v20.6.4 — row actions cluster.
   - .row-actions is the flex container holding the three buttons.
   - Open is secondary (outline), Edit is primary (filled orange),
     kebab is tertiary (text-only ghost button).
   - The cell uses width:1% so it shrinks to fit the buttons exactly,
     pushing all the available width to .col-name. */
.pages-table .col-actions {
  white-space: nowrap;
  text-align: right;
}
.row-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  justify-content: flex-end;
}

.row-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  border-radius: var(--radius-field);
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-heading);
  font-family: inherit;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-standard),
              color var(--dur-fast) var(--ease-standard),
              background var(--dur-fast) var(--ease-standard),
              box-shadow var(--dur-fast) var(--ease-standard);
  white-space: nowrap;
  line-height: 1.3;
}

/* Open = outline / secondary action. */
.row-btn-open {
  background: #fff;
  border-color: var(--border-default);
  color: var(--text-heading);
}
.row-btn-open:hover {
  color: var(--ofload-orange);
  border-color: var(--ofload-orange);
  background: rgba(240, 86, 55, 0.04);
}

/* Edit = filled / primary action — what the user almost always wants. */
.row-btn-edit {
  background: var(--ofload-orange);
  border-color: var(--ofload-orange);
  color: #fff;
}
.row-btn-edit:hover {
  background: var(--ofload-orange-hover);
  border-color: var(--ofload-orange-hover);
  color: #fff;
  box-shadow: 0 2px 6px rgba(240, 86, 55, 0.25);
}

.row-btn-disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
  background: #F3F5F8;
  border-color: var(--border-default);
}

/* Hide explicit buttons on narrow screens — kebab carries everything. */
@media (max-width: 720px) {
  .row-btn-open,
  .row-btn-edit { display: none; }
}

/* v20.6.4 — state chip lives next to the page name, not in its own
   column. Frees up table width and makes the state visually attached
   to the thing it describes. */
.page-cell-name-row {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.state-chip {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border: 1px solid transparent;
  flex: none;
}
.state-chip-home {
  background: rgba(240, 86, 55, 0.10);
  color: var(--ofload-orange-hover);
  border-color: rgba(240, 86, 55, 0.25);
}
.state-chip-hidden {
  background: rgba(1, 10, 38, 0.06);
  color: var(--text-muted);
  border-color: rgba(1, 10, 38, 0.10);
}

/* =========================================================================
   v20.6.5 — Commands panel (generic HTTP request runner for Node sites)
   ========================================================================= */

/* Method + path on one row, with method shrunk to its content. */
.cmd-row {
  display: flex;
  gap: 12px;
  align-items: flex-end;
}
.cmd-method { flex: 0 0 110px; }
.cmd-method select { width: 100%; padding: 8px 10px; border-radius: var(--radius-field); border: 1px solid var(--border-default); }
.cmd-path   { flex: 1; min-width: 0; }
.cmd-path input { width: 100%; }

/* Response card. Pre-formatted, monospace, scrollable, capped height. */
.cmd-response-body {
  background: #111;
  color: #eee;
  padding: 14px 16px;
  border-radius: 10px;
  font: 13px/1.5 ui-monospace, "SF Mono", Menlo, monospace;
  margin: 0;
  max-height: 480px;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
}

/* Live log pane is taller than the response block — this is where the
   user spends most of their time on the Commands page. */
.cmd-log-pane {
  height: 480px;
  max-height: 70vh;
}

/* =========================================================================
   v20.7 Phase 2 — tree pages-table, live preview, new-page form
   ========================================================================= */

/* Pages tree table — single unified table, no more homepage/subpages
   split. Indentation comes from a CSS custom property `--depth` set on
   the name cell (0 for top-level, 1 for sub, 2 for sub-sub).
   v20.7.2: switched to a fixed table-layout so cells align with the
   header row regardless of content width. */
.pages-tree {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  background: #fff;
  /* v20.7.3: AUTO layout, not fixed. Fixed-layout was causing the cells
     to over-allocate width and the .pages-table-wrap (overflow:hidden)
     was clipping content into "ur"/"te"/"/3" stubs. Auto layout sizes
     each column to its content, which means short page names render
     fully and the Name column uses whatever's left over. */
}
/* The colgroup widths are HINTS only with auto layout — the browser
   honors them when content is short and grows beyond when needed.
   v20.7.3: every visible column hugs its content (width:1%); the Name
   column gets a sensible min-width so short names don't crush it.
   Empty space ends up to the right of the action column on wide
   screens — better than a stretched-out Name column with the URL
   floating in the middle of nowhere. */
.pages-tree col.col-type       { width: 1%; }
.pages-tree col.col-name       { width: auto; }
.pages-tree col.col-url        { width: 1%; }
.pages-tree col.col-privacy    { width: 1%; }
.pages-tree col.col-created-by { width: 1%; }
.pages-tree col.col-updated    { width: 1%; }
.pages-tree col.col-actions    { width: 1%; }

.pages-tree thead th {
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  padding: 12px 14px;
  background: #FAFBFC;
  border-bottom: 1px solid var(--border-default);
  white-space: nowrap;
}

/* Table-row styling: every row a flat horizontal strip. No per-row
   backgrounds — just the row hover. */
.pages-tree tbody tr.page-row {
  border-bottom: 1px solid var(--border-default);
  cursor: pointer;
  transition: background 80ms ease;
}
.pages-tree tbody tr.page-row:last-child { border-bottom: none; }
.pages-tree tbody tr.page-row:hover { background: #FCFDFE; }
.pages-tree tbody tr.page-row.is-hidden { opacity: 0.62; }
.pages-tree tbody tr.dragging { opacity: 0.45; }
.pages-tree tbody tr.drop-above td { box-shadow: 0 -2px 0 var(--ofload-orange) inset; }
.pages-tree td {
  padding: 14px;
  vertical-align: middle;
  white-space: nowrap; /* default — overridden on .col-name */
}
.pages-tree td.col-name { white-space: normal; min-width: 200px; }
.pages-tree td.col-actions { padding-right: 18px; }

/* Type cell: small pill with icon + label. Subtle background so the
   type vocab (Homepage / Parent page / Child page) reads as a tag,
   not a heading.
   v20.7.7: distinct colour per type — homepage = orange, parent = navy,
   child = teal. Mirrors the row tint left of each row. */
.type-cell {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  background: #F3F5F8;
  border-radius: 999px;
  padding: 4px 10px 4px 8px;
  white-space: nowrap;
}
.type-cell-home {
  color: var(--ofload-orange);
  background: rgba(240, 86, 55, 0.10);
}
.type-cell-parent {
  color: var(--navy);
  background: rgba(1, 10, 38, 0.06);
}
.type-cell-child {
  color: #166A64;
  background: rgba(36, 132, 124, 0.10);
}

/* v20.7.7: row tints + collapsible children + directory-mode strikethrough. */
.pages-tree tr.page-row.is-home td.col-type::before { /* unused — stub */ content: ''; }
.pages-tree tr.page-row.is-parent { background: linear-gradient(90deg, rgba(1, 10, 38, 0.025), transparent 22%); }
.pages-tree tr.page-row.is-child { background: linear-gradient(90deg, rgba(36, 132, 124, 0.04), transparent 22%); }
.pages-tree tr.page-row.is-home { background: linear-gradient(90deg, rgba(240, 86, 55, 0.05), transparent 22%); }
.pages-tree tr.is-collapsed-child { display: none; }
.pages-table-wrap.is-directory-mode tr.page-row.is-home {
  opacity: 0.55;
}
.pages-table-wrap.is-directory-mode tr.page-row.is-home strong,
.pages-table-wrap.is-directory-mode tr.page-row.is-home code,
.pages-table-wrap.is-directory-mode tr.page-row.is-home .type-label {
  text-decoration: line-through;
  text-decoration-color: rgba(1, 10, 38, 0.55);
}
.pages-table-wrap.is-directory-mode tr.page-row.is-home .row-btn-edit {
  background: #fff; color: var(--text-heading); border-color: var(--border-default);
}

.page-tree-toggle {
  flex: none;
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent;
  border: 0;
  cursor: pointer;
  color: var(--text-muted);
  border-radius: 6px;
  font-size: 12px;
  transition: transform 160ms ease, background 120ms ease, color 120ms ease;
}
.page-tree-toggle:hover { background: var(--ice); color: var(--text-heading); }
.page-tree-toggle.is-collapsed { transform: rotate(-90deg); }
.page-tree-spacer { flex: none; width: 22px; height: 1px; }
.type-icon { font-size: 14px; flex: none; line-height: 1; }
.type-label { line-height: 1; }

/* Name cell: indents based on depth. Each level = 22px of left padding.
   The decorative └ character sits in the indent gutter. Block-level so
   the strong name fills the cell. */
.page-name-cell {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-left: calc(var(--depth, 0) * 22px);
  min-width: 0;
  font-size: 14px;
}
.page-name-cell strong {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.page-tree-line {
  color: var(--text-muted);
  font-size: 14px;
  margin-right: -2px;
  flex: none;
}
.page-name-meta {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 400;
}

/* URL cell: monospace, no ellipsis trickery — let auto layout pick the
   width based on the longest URL across all rows (capped by max-width
   so a runaway slug doesn't dominate). */
.page-url-cell {
  font-family: "SFMono-Regular", ui-monospace, Menlo, Consolas, monospace;
  font-size: 12px;
  background: transparent;
  padding: 0;
  color: var(--text-muted);
  white-space: nowrap;
  max-width: 320px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
  vertical-align: middle;
}

.pages-tree-footer {
  margin: 0;
  padding: 12px 18px 14px;
  font-size: 12px;
  color: var(--text-muted);
  border-top: 1px solid var(--border-default);
  background: #FAFBFC;
}

/* Hide some columns on narrow widths for legibility. */
@media (max-width: 900px) {
  .pages-tree col.col-url, .pages-tree th:nth-child(3), .pages-tree td:nth-child(3) { display: none; }
}
@media (max-width: 640px) {
  .pages-tree col.col-type, .pages-tree th:nth-child(1), .pages-tree td:nth-child(1) { display: none; }
}

/* ---------- Live preview pane ---------------------------------------- */
.live-preview-card .section-body { padding: 0; }
.live-preview-toolbar {
  display: flex;
  align-items: center;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border-default);
  background: #FAFBFC;
}
.live-preview-frame {
  display: block;
  width: 100%;
  height: 720px;
  border: none;
  background: #fff;
}

/* v20.7.18 — full-width live-preview row below the overview-grid.
   Margin matches the gap inside the grid above, so the visual rhythm
   stays consistent. */
.overview-preview-row { margin-top: 16px; }

/* ---------- New-page form (dedicated screen) -------------------------
   v20.7.2: rebuilt around the .np-* class system below. The two-column
   "field + help panel" layout is gone — explainers now live inline as
   muted text under each field, and Type-driven context callouts
   replace the static help column. .page-new-form is still the outer
   wrapper, .page-new-actions is still the submit row. */
.page-new-form {
  max-width: 1120px;
}
.page-new-actions {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--border-default);
}
.page-new-actions .auth-secondary { padding: 9px 18px; }

/* Recent history list — one row per command, with replay button. */
.cmd-history-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border-default);
  font-size: 13px;
}
.cmd-history-item:last-child { border-bottom: none; }
.cmd-history-replay {
  flex: none;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: var(--radius-field);
  border: 1px solid var(--border-default);
  background: #fff;
  color: var(--text-heading);
  cursor: pointer;
}
.cmd-history-replay:hover {
  border-color: var(--ofload-orange);
  color: var(--ofload-orange);
}
.cmd-history-method {
  flex: none;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.05em;
  width: 56px;
  text-align: center;
  background: #F3F5F8;
  padding: 2px 6px;
  border-radius: 6px;
  color: var(--text-heading);
}
.cmd-history-path {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: transparent;
  padding: 0;
  font-size: 12px;
}
.cmd-history-status {
  flex: none;
  font-weight: 600;
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 999px;
}
.cmd-history-ok  { background: rgba(36, 132, 124, 0.12); color: #166A64; }
.cmd-history-err { background: rgba(240, 86, 55, 0.12);  color: #B91C1C; }
.cmd-history-time { flex: none; font-size: 11px; }

/* =========================================================================
   v20.7.5 — People page tile grid (manager-grouped + drag-drop assign)
   ========================================================================= */
.people-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 24px; margin: 8px 0 24px;
}
.people-head-actions {
  display: flex; align-items: center; gap: 12px;
  flex-wrap: wrap;
}
.people-view-switch {
  display: inline-flex;
  border-radius: 999px;
  background: #F3F5F8;
  padding: 3px;
  border: 1px solid var(--border-default);
}
.people-view-btn {
  font: inherit; font-size: 12px; font-weight: 600;
  padding: 5px 12px;
  border: 0; background: transparent; cursor: pointer;
  border-radius: 999px;
  color: var(--text-muted);
  display: inline-flex; align-items: center; gap: 6px;
  transition: background 120ms ease, color 120ms ease;
}
.people-view-btn:hover:not(.is-on) { color: var(--text-heading); }
.people-view-btn.is-on {
  background: #fff; color: var(--text-heading);
  box-shadow: 0 1px 2px rgba(1, 10, 38, .08);
}

/* Table view (alternate to the tile grid). */
.people-table { display: flex; flex-direction: column; gap: 14px; margin-bottom: 32px; }
/* v20.7.7: explicit fix — `display: flex` on the class beat the [hidden]
   attribute's UA `display: none`, so both views were rendering at once.
   Force-hide whichever view isn't active. */
.people-grid[hidden], .people-table[hidden] { display: none !important; }
.people-table-section {
  background: #fff;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-card);
  box-shadow: var(--elev-1);
  overflow: hidden;
}
.people-table-admins {
  background: linear-gradient(180deg, rgba(240, 86, 55, 0.04) 0%, #fff 80%);
  border-color: rgba(240, 86, 55, 0.30);
}
.people-table-unmanaged {
  background: linear-gradient(180deg, rgba(255, 196, 84, 0.06) 0%, #fff 80%);
  border-color: rgba(255, 196, 84, 0.45);
}
.people-table-section-head {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 16px;
  font-size: 13px; font-weight: 700; color: var(--text-heading);
  border-bottom: 1px solid var(--border-default);
  background: rgba(255,255,255,0.6);
}
.people-table-section-head .people-tile-count { margin-left: auto; }
.people-manager-block { border-bottom: 1px solid var(--border-default); }
.people-manager-block:last-child { border-bottom: none; }
.people-manager-summary {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px;
  cursor: pointer; list-style: none;
  background: rgba(1, 10, 38, 0.02);
}
.people-manager-summary::-webkit-details-marker { display: none; }
.people-manager-summary:hover { background: rgba(1, 10, 38, 0.04); }
.people-manager-block[open] > .people-manager-summary { background: #fff; }
.people-manager-chev {
  flex: none; color: var(--text-muted); font-size: 14px;
  transition: transform 160ms ease;
}
.people-manager-block:not([open]) > .people-manager-summary .people-manager-chev {
  transform: rotate(-90deg);
}
.people-manager-info {
  flex: 1; min-width: 0;
  display: flex; align-items: baseline; gap: 8px;
  overflow: hidden;
}
.people-manager-info code {
  font-size: 11px;
  background: rgba(1, 10, 38, 0.04);
  padding: 1px 5px; border-radius: 4px;
}
.people-manager-counts {
  font-size: 11px; font-weight: 600;
  color: var(--text-muted);
  background: #F3F5F8;
  padding: 3px 8px; border-radius: 999px;
}
.people-flat {
  width: 100%; border-collapse: collapse; font-size: 13px;
}
.people-flat thead th {
  text-align: left;
  font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--text-muted);
  padding: 8px 14px;
  background: #FAFBFC;
  border-bottom: 1px solid var(--border-default);
}
.people-flat tbody td {
  padding: 10px 14px;
  border-bottom: 1px solid rgba(1, 10, 38, 0.04);
  vertical-align: middle;
}
.people-flat tbody tr:last-child td { border-bottom: none; }
.people-flat code {
  font-size: 11px;
  background: transparent; padding: 0;
  color: var(--text-muted);
}
.people-flat-indent thead th:first-child,
.people-flat-indent tbody td:first-child { padding-left: 36px; }
.people-flat-select {
  font: inherit; font-size: 12px;
  padding: 4px 8px;
  border-radius: 6px;
  border: 1px solid var(--border-default);
  background: #fff;
  max-width: 280px;
}
.people-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
  margin-bottom: 32px;
}
.people-tile {
  background: #fff;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-card);
  box-shadow: var(--elev-1);
  display: flex; flex-direction: column;
  min-height: 180px;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.people-tile-admins {
  background: linear-gradient(180deg, rgba(240, 86, 55, 0.04) 0%, #fff 80%);
  border-color: rgba(240, 86, 55, 0.30);
}
.people-tile-unmanaged {
  background: linear-gradient(180deg, rgba(255, 196, 84, 0.06) 0%, #fff 80%);
  border-color: rgba(255, 196, 84, 0.45);
}
.people-tile-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px;
  padding: 14px 16px 8px;
}
.people-tile-head > div:first-child {
  display: inline-flex; align-items: center; gap: 8px;
  min-width: 0;
}
.people-tile-icon { font-size: 16px; }
.people-tile-title {
  font-weight: 700; font-size: 15px; color: var(--text-heading);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.people-tile-count {
  font-size: 11px; font-weight: 600;
  color: var(--text-muted);
  background: #F3F5F8;
  padding: 2px 8px; border-radius: 999px;
}
.people-tile-actions { display: inline-flex; gap: 6px; }
.people-tile-action {
  font: inherit; padding: 4px 10px;
  font-size: 11px; font-weight: 600;
  border-radius: 999px;
  border: 1px solid var(--border-default);
  background: #fff; color: var(--text-heading);
  text-decoration: none; cursor: pointer;
}
.people-tile-action:hover {
  border-color: var(--ofload-orange); color: var(--ofload-orange);
}
.people-tile-action-danger {
  color: #B91C1C; border-color: rgba(185, 28, 28, 0.30);
}
.people-tile-action-danger:hover {
  background: rgba(185, 28, 28, 0.06);
  color: #B91C1C; border-color: #B91C1C;
}
.people-tile-blurb {
  margin: 0 16px 10px; font-size: 12px; line-height: 1.5;
}
.people-tile-blurb code {
  font-size: 11px;
  background: rgba(1, 10, 38, 0.04);
  padding: 1px 5px; border-radius: 4px;
}
.people-tile-body {
  flex: 1;
  display: flex; flex-direction: column; gap: 6px;
  padding: 4px 12px 14px;
  min-height: 80px;
  border-radius: 0 0 var(--radius-card) var(--radius-card);
  transition: background 120ms ease;
}
.people-tile-body.tile-drop-active {
  background: rgba(240, 86, 55, 0.06);
  outline: 2px dashed var(--ofload-orange);
  outline-offset: -8px;
}
.people-empty {
  font-size: 12px; padding: 14px 4px;
  text-align: center;
}

/* Individual user card (one row in a tile). */
.user-card {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  background: #fff;
  border: 1px solid var(--border-default);
  border-radius: 10px;
  cursor: grab;
  transition: border-color 120ms ease, box-shadow 120ms ease, transform 100ms ease;
}
.user-card:hover {
  border-color: rgba(240, 86, 55, 0.40);
  box-shadow: 0 1px 4px rgba(1, 10, 38, .08);
}
.user-card-locked {
  cursor: default;
  background: rgba(240, 86, 55, 0.04);
  border-color: rgba(240, 86, 55, 0.20);
}
.user-card-locked:hover {
  border-color: rgba(240, 86, 55, 0.20);
  box-shadow: none;
}
.user-card-dragging { opacity: 0.45; transform: scale(0.98); }
.user-card-avatar {
  flex: none; width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--navy);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700;
}
.user-card-locked .user-card-avatar { background: var(--ofload-orange); }
.user-card-body { flex: 1; min-width: 0; }
.user-card-name {
  font-size: 13px; font-weight: 600; color: var(--text-heading);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.user-card-email {
  font-size: 11px; color: var(--text-muted);
  font-family: ui-monospace, Menlo, monospace;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.user-card-role {
  flex: none;
  font-size: 10px; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 3px 7px; border-radius: 999px;
  background: #F3F5F8; color: var(--text-heading);
}
.user-card-role.role-superadmin { background: var(--navy); color: #fff; }
.user-card-role.role-admin { background: rgba(240, 86, 55, 0.14); color: #c4451f; }
.user-card-actions { flex: none; }
.user-card-btn {
  font: inherit; font-size: 11px; font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--border-default);
  background: #fff; color: var(--text-heading);
  cursor: pointer;
  transition: border-color 120ms ease, color 120ms ease;
}
.user-card-btn:hover {
  border-color: var(--ofload-orange);
  color: var(--ofload-orange);
}

/* =========================================================================
   v20.7.7 — Page edit layout (identity bar + 2-col upload/preview).
   ========================================================================= */
.page-identity-bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) auto;
  gap: 14px;
  align-items: end;
  background: #fff;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-card);
  box-shadow: var(--elev-1);
  padding: 14px 16px;
  margin: 8px 0 16px;
}
@media (max-width: 800px) {
  .page-identity-bar { grid-template-columns: 1fr; }
}
.page-identity-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.page-identity-label {
  font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--text-muted);
}
.page-identity-field input {
  font-size: 14px;
  padding: 8px 12px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-field);
  background: #fff;
  width: 100%;
}
.page-identity-field input:focus {
  outline: 0;
  border-color: var(--ofload-orange);
  box-shadow: 0 0 0 3px rgba(240, 86, 55, 0.15);
}
.page-identity-slug {
  display: flex; align-items: center; gap: 0;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-field);
  background: #fff;
  overflow: hidden;
}
.page-identity-slug:focus-within { border-color: var(--ofload-orange); box-shadow: 0 0 0 3px rgba(240, 86, 55, 0.15); }
.page-identity-slug input {
  border: 0; flex: 1; min-width: 0; padding: 8px 4px;
  font-family: ui-monospace, Menlo, monospace; font-size: 13px;
}
.page-identity-slug input:focus { outline: 0; box-shadow: none; }
.page-identity-slug-prefix, .page-identity-slug-suffix {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 13px;
  color: var(--text-muted);
  padding: 0 6px;
}
.page-identity-slug-prefix { padding-left: 12px; }
.page-identity-slug-suffix { padding-right: 12px; }
.page-identity-save {
  height: 38px;
}

.page-edit-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: 18px;
  background: #fff;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-card);
  box-shadow: var(--elev-1);
  padding: 18px;
  margin-bottom: 16px;
}
@media (max-width: 900px) {
  .page-edit-grid { grid-template-columns: 1fr; }
}
.page-edit-col { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.page-edit-h3 {
  margin: 0;
  font-size: 15px; font-weight: 700; color: var(--text-heading);
}
.page-edit-blurb {
  font-size: 13px; line-height: 1.5; margin: 0 0 6px;
}
.page-edit-blurb code {
  font-size: 12px;
  background: #F3F5F8; padding: 1px 5px; border-radius: 4px;
}
.page-edit-upload { display: flex; flex-direction: column; gap: 10px; }
.page-edit-files {
  margin-top: 4px;
  font-size: 13px;
}
.page-edit-files > summary { cursor: pointer; padding: 6px 0; }
.page-edit-preview {
  display: flex; flex-direction: column;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-card);
  overflow: hidden;
  background: #FAFBFC;
  min-height: 360px;
  flex: 1;
}
.page-edit-preview-toolbar {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 12px;
  background: #fff;
  border-bottom: 1px solid var(--border-default);
}
.page-edit-preview-frame {
  flex: 1;
  border: 0;
  width: 100%;
  min-height: 320px;
  background: #fff;
}
.page-edit-preview-empty {
  padding: 36px 18px; text-align: center;
}

/* =========================================================================
   v20.7.7 — Reusable Privacy picker (pill cards + conditional fields).
   Used by site create / settings / new-page / page settings / page inline.
   Markup pattern:
     <fieldset class="privacy-picker">
       <label class="privacy-pill" data-value="...">
         <input type="radio" name="privacy" value="..." />
         <span class="privacy-pill-icon">…</span>
         <span class="privacy-pill-label">…</span>
         <span class="privacy-pill-blurb">…</span>
       </label>
     </fieldset>
     <div class="privacy-conditional" data-for="password">…</div>
     <div class="privacy-conditional" data-for="allowlist">…</div>
   The shared script (ApplyPrivacyPicker, in app.js or inline) toggles
   .is-selected on the chosen pill and shows the matching conditional.
   ========================================================================= */
.privacy-picker {
  border: 0; padding: 0; margin: 0;
  display: flex; flex-direction: row; flex-wrap: wrap; gap: 10px;
}
.privacy-picker > legend { display: none; }
.privacy-pill {
  flex: 1 1 290px;
  display: flex; flex-direction: column; gap: 6px;
  padding: 14px 16px 16px;
  border: 1.5px solid var(--border-default);
  border-radius: 14px;
  background: #fff;
  cursor: pointer;
  position: relative;
  transition: border-color 120ms ease, background 120ms ease, transform 100ms ease, box-shadow 120ms ease;
}
.privacy-pill.is-selected,
.privacy-pill:has(input:checked) {
  box-shadow: 0 1px 0 rgba(240, 86, 55, 0.10), 0 4px 14px rgba(1, 10, 38, 0.05);
}
.privacy-pill:hover { border-color: rgba(240, 86, 55, 0.45); }
.privacy-pill input[type="radio"] {
  position: absolute; top: 12px; right: 14px;
  margin: 0; accent-color: var(--ofload-orange);
}
.privacy-pill.is-selected,
.privacy-pill:has(input:checked) {
  border-color: var(--ofload-orange);
  background: linear-gradient(180deg, rgba(240, 86, 55, 0.06) 0%, #fff 60%);
}
.privacy-pill-icon {
  font-size: 14px;
  display: inline-flex; align-items: center; gap: 6px;
}
.privacy-pill-label {
  font-weight: 700; font-size: 14px; color: var(--text-heading);
  padding-right: 24px;
  display: inline-flex; align-items: center; gap: 6px;
}
.privacy-pill-label-icon { font-size: 14px; }
.privacy-pill-blurb {
  font-size: 12px; color: var(--text-body); line-height: 1.45;
}

/* Conditional fields shown only when the matching pill is selected.
   v20.7.22: allowlist conditional also reveals on 'password+allowlist'. */
.privacy-conditional { display: none; margin: 12px 0 0; }
.privacy-host[data-active="password"] .privacy-conditional[data-for="password"],
.privacy-host[data-active="allowlist"] .privacy-conditional[data-for="allowlist"],
.privacy-host[data-active="password+allowlist"] .privacy-conditional[data-for="allowlist"] {
  display: block;
}

/* v20.7.22 — Grouped privacy picker. Three sections (Default / Internal /
   External) with subtle separators so the choice feels less overwhelming
   than 6 flat pills. */
.privacy-group { border: 0; padding: 0; margin: 0 0 14px; }
.privacy-group > legend {
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--text-muted);
  margin: 0 0 8px; padding: 0;
}
.privacy-group + .privacy-group {
  padding-top: 14px;
  border-top: 1px dashed var(--border-default);
}
.privacy-group-default  > legend { color: var(--text-heading); }
.privacy-group-internal > legend { color: #16344E; }
.privacy-group-external > legend { color: #8A2E18; }
.privacy-group-sub {
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-muted);
  margin-left: 4px;
}

/* =========================================================================
   v20.7.17 — Global audit log (filters + table + severity badges).
   ========================================================================= */
.audit-filter-bar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 16px 0 14px;
  padding: 12px 14px;
  background: #fff;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-card);
  box-shadow: var(--elev-1);
}
.audit-filter-search {
  flex: 1; min-width: 240px;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px;
  background: #FAFBFC;
  border-radius: var(--radius-field);
  border: 1px solid var(--border-default);
  color: var(--text-muted);
}
.audit-filter-search input {
  flex: 1; min-width: 0;
  border: 0; outline: 0; background: transparent;
  font: inherit; font-size: 13px; color: var(--text-heading);
}
.audit-filter-select {
  font: inherit; font-size: 13px;
  padding: 7px 10px;
  border-radius: var(--radius-field);
  border: 1px solid var(--border-default);
  background: #fff;
  max-width: 200px;
}
.audit-filter-date {
  font: inherit; font-size: 13px;
  padding: 6px 10px;
  border-radius: var(--radius-field);
  border: 1px solid var(--border-default);
  background: #fff;
}
.audit-filter-clear {
  font-size: 12px;
  color: var(--text-muted);
  text-decoration: none;
  padding: 6px 10px;
}
.audit-filter-clear:hover { color: var(--ofload-orange); }

.audit-table { width: 100%; }
.audit-table thead th {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--text-muted);
}
.audit-row { transition: background 80ms ease; }
.audit-row:hover { background: #FAFBFC; }
.audit-row.severity-warning {
  border-left: 3px solid rgba(240, 86, 55, 0.45);
}
.audit-row.severity-danger {
  border-left: 3px solid #B91C1C;
  background: rgba(185, 28, 28, 0.025);
}

.audit-when {
  white-space: nowrap;
  font-size: 12px;
  min-width: 120px;
}
.audit-rel { font-weight: 600; color: var(--text-heading); }
.audit-abs { display: block; font-size: 10.5px; margin-top: 2px; font-family: ui-monospace, Menlo, monospace; }

.audit-sev {
  display: inline-block;
  font-size: 10px; font-weight: 700;
  padding: 2px 7px; border-radius: 999px;
  text-transform: uppercase; letter-spacing: 0.05em;
}
.audit-sev-info { background: #F3F5F8; color: var(--text-muted); }
.audit-sev-warning { background: rgba(240, 86, 55, 0.12); color: #c4451f; }
.audit-sev-danger { background: rgba(185, 28, 28, 0.12); color: #B91C1C; }

.audit-site-link {
  font-weight: 600; color: var(--text-heading); text-decoration: none;
  border-bottom: 1px dashed transparent;
  transition: color 120ms ease, border-color 120ms ease;
}
.audit-site-link:hover { color: var(--ofload-orange); border-bottom-color: var(--ofload-orange); }
.audit-actor-link {
  color: var(--text-heading); text-decoration: none;
  border-bottom: 1px dashed transparent;
  font-size: 13px;
}
.audit-actor-link:hover { color: var(--ofload-orange); border-bottom-color: var(--ofload-orange); }

.audit-event { font-size: 13px; line-height: 1.45; }
.audit-verb { font-weight: 600; color: var(--text-heading); }
.audit-object { color: var(--text-body); }
.audit-detail { font-size: 12px; }
.audit-type-tag {
  display: inline-block;
  font-size: 10px;
  padding: 1px 6px;
  margin-left: 8px;
  background: transparent;
  border: 1px solid var(--border-default);
  border-radius: 4px;
  color: var(--text-muted);
  font-family: ui-monospace, Menlo, monospace;
  vertical-align: middle;
}

.audit-pagination {
  display: flex; justify-content: center;
  margin: 18px 0;
}

/* v20.7.6 — Dashboard sites-filter bar (search + creator + date). */
.sites-filter-bar,
.people-filter-bar {
  display: flex; align-items: center; gap: 10px;
  flex-wrap: wrap;
  margin: 16px 0 12px;
  padding: 10px 14px;
  background: #fff;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-card);
  box-shadow: var(--elev-1);
}
.people-filter-search {
  flex: 1; min-width: 220px;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px;
  background: #FAFBFC;
  border-radius: var(--radius-field);
  border: 1px solid var(--border-default);
  color: var(--text-muted);
}
.people-filter-search:focus-within { border-color: var(--ofload-orange); background: #fff; }
.people-filter-search input {
  flex: 1; min-width: 0;
  border: 0; outline: 0; background: transparent;
  font: inherit; font-size: 13px;
  color: var(--text-heading);
}
.people-filter-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px;
  color: var(--text-body);
  user-select: none;
  cursor: pointer;
}
.people-filter-toggle input { margin: 0; }

/* v20.7.51 — "Add users" modal styles (rides on .reparent-dialog). */
.people-add-dialog { max-width: 640px; }
.people-add-form { gap: 12px; }
.people-add-list {
  max-height: 50vh;
  overflow-y: auto;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-field);
  background: #fff;
  display: flex;
  flex-direction: column;
}
.people-add-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--border-default);
  cursor: pointer;
}
.people-add-row:last-child { border-bottom: 0; }
.people-add-row:hover { background: #FAFBFC; }
.people-add-row input[type=checkbox] { margin: 0; flex: none; }
.people-add-row-body {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 1px;
  font-size: 13px;
}
.people-add-row-body strong { font-weight: 600; color: var(--text-heading); }
.people-add-row-body .muted { font-size: 11px; }
.people-add-row-meta { font-size: 11px; white-space: nowrap; }
.people-add-row.is-current-report { background: rgba(15, 138, 92, 0.05); }
.people-add-row.is-current-report .people-add-row-meta { color: #0f8a5c; font-weight: 500; }
.people-add-row.is-reassign .people-add-row-meta { color: #b8870b; }

/* Add-users trigger button. Sits in the manager-tile head alongside Demote. */
.people-tile-action-add {
  background: var(--ofload-orange);
  color: #fff;
  border: 1px solid var(--ofload-orange);
}
.people-tile-action-add:hover {
  background: var(--ofload-orange-hover);
  border-color: var(--ofload-orange-hover);
  color: #fff;
}
.sites-filter-search {
  flex: 1; min-width: 220px;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px;
  background: #FAFBFC;
  border-radius: var(--radius-field);
  border: 1px solid var(--border-default);
  color: var(--text-muted);
  transition: border-color 120ms ease, background 120ms ease;
}
.sites-filter-search:focus-within {
  border-color: var(--ofload-orange);
  background: #fff;
}
.sites-filter-search input {
  flex: 1; min-width: 0;
  border: 0; outline: 0; background: transparent;
  font: inherit; font-size: 13px;
  color: var(--text-heading);
}
.sites-filter-select {
  font: inherit; font-size: 13px;
  padding: 7px 10px;
  border-radius: var(--radius-field);
  border: 1px solid var(--border-default);
  background: #fff; color: var(--text-heading);
  max-width: 220px;
}
.sites-filter-clear {
  font: inherit; font-size: 12px; font-weight: 600;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--border-default);
  background: #fff; color: var(--text-heading);
  cursor: pointer;
}
.sites-filter-clear:hover { border-color: var(--ofload-orange); color: var(--ofload-orange); }
.sites-filter-count {
  font-size: 12px; margin-left: auto;
}
.sites-filter-empty-cell {
  padding: 32px 18px !important; text-align: center;
}
.creator-cell {
  font-size: 13px; color: var(--text-body);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  max-width: 180px;
}

/* v20.7.6 — Site-mode segmented switch (lives above the pages table on
   the overview). Two buttons; clicking the inactive one POSTs the new
   mode to /site-mode and reloads. */
.pages-table-head-left {
  display: flex; align-items: center; gap: 18px;
  flex-wrap: wrap; min-width: 0;
}
.site-mode-switch {
  display: inline-flex;
  border-radius: 999px;
  background: #F3F5F8;
  padding: 3px;
  border: 1px solid var(--border-default);
}
.site-mode-btn {
  font: inherit; font-size: 12px; font-weight: 600;
  padding: 5px 12px;
  border: 0; background: transparent; cursor: pointer;
  border-radius: 999px;
  color: var(--text-muted);
  display: inline-flex; align-items: center; gap: 6px;
  transition: background 120ms ease, color 120ms ease;
}
.site-mode-btn:hover:not(.is-on) { color: var(--text-heading); }
.site-mode-btn.is-on {
  background: #fff;
  color: var(--text-heading);
  box-shadow: 0 1px 2px rgba(1, 10, 38, .08);
  cursor: default;
}
.site-mode-btn:disabled { opacity: 0.5; cursor: wait; }

/* v20.7.8 — wake-mode switch styling. Same look as site-mode but the
   "Always on" pill gets a subtle orange tint when active to telegraph
   "this is the costlier option, are you sure?" */
.wake-mode-switch .site-mode-btn[data-wake-mode="always-on"].is-on {
  background: rgba(240, 86, 55, 0.10);
  color: var(--ofload-orange);
}
/* v20.7.9 — wake-mode cluster: switch + recommendation hint stacked. */
.wake-mode-cluster {
  display: flex; flex-direction: column; gap: 4px;
  min-width: 0;
}
.wake-hint {
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--text-body);
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 8px;
  border-radius: 6px;
  background: rgba(240, 86, 55, 0.06);
  border: 1px solid rgba(240, 86, 55, 0.20);
  color: #8A2E18;
  max-width: 380px;
}
.wake-hint strong { color: #6F2412; font-weight: 700; }
.wake-hint-apply {
  font: inherit; font-size: 11px; font-weight: 700;
  margin-left: auto;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid var(--ofload-orange);
  background: var(--ofload-orange);
  color: #fff;
  cursor: pointer;
  white-space: nowrap;
  transition: background 120ms ease;
}
.wake-hint-apply:hover { background: #C2451F; border-color: #C2451F; color: #fff; }
.wake-hint-apply:disabled { opacity: 0.6; cursor: wait; }
.wake-hint-quiet {
  background: rgba(36, 132, 124, 0.06);
  border-color: rgba(36, 132, 124, 0.18);
  color: #166A64;
}
.wake-hint-warn {
  background: rgba(255, 196, 84, 0.10);
  border-color: rgba(255, 196, 84, 0.45);
  color: #6E4D00;
}

/* v20.7.11 — live process status pill + Wake-now button. */
.proc-status-row {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 2px;
}
.proc-status {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; font-weight: 600;
  padding: 3px 10px;
  border-radius: 999px;
  background: #F3F5F8;
  color: var(--text-muted);
  border: 1px solid var(--border-default);
  font-family: ui-monospace, Menlo, monospace;
  letter-spacing: 0;
}
.proc-status-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--text-muted);
  flex: none;
}
.proc-status-port { font-size: 10.5px; opacity: 0.7; }

.proc-status-running {
  background: rgba(36, 132, 124, 0.10);
  border-color: rgba(36, 132, 124, 0.30);
  color: #166A64;
}
.proc-status-running .proc-status-dot {
  background: #24847C;
  box-shadow: 0 0 0 2px rgba(36, 132, 124, 0.18);
  animation: proc-pulse 1.6s ease-out infinite;
}
@keyframes proc-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(36, 132, 124, 0.50); }
  70%  { box-shadow: 0 0 0 6px rgba(36, 132, 124, 0); }
  100% { box-shadow: 0 0 0 0 rgba(36, 132, 124, 0); }
}
.proc-status-starting {
  background: rgba(255, 196, 84, 0.12);
  border-color: rgba(255, 196, 84, 0.45);
  color: #6E4D00;
}
.proc-status-starting .proc-status-dot { background: #C09000; }
.proc-status-crashed,
.proc-status-failed {
  background: rgba(185, 28, 28, 0.08);
  border-color: rgba(185, 28, 28, 0.30);
  color: #B91C1C;
}
.proc-status-crashed .proc-status-dot,
.proc-status-failed  .proc-status-dot { background: #B91C1C; }
.proc-status-stopping {
  background: #F3F5F8; color: var(--text-muted);
}
.proc-status-stopped .proc-status-dot { background: #98A1AE; }

.proc-wake-now {
  font: inherit; font-size: 11.5px; font-weight: 600;
  padding: 4px 12px;
  border-radius: 999px;
  border: 1px solid var(--ofload-orange);
  background: var(--ofload-orange);
  color: #fff;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 4px;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.proc-wake-now:hover {
  background: #C2451F; border-color: #C2451F; color: #fff;
}
.proc-wake-now:disabled { opacity: 0.6; cursor: wait; }

/* Static-runtime tag for sites that have no process to keep alive. */
.site-runtime-tag {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600;
  padding: 5px 12px;
  border-radius: 999px;
  background: #F3F5F8;
  color: var(--text-muted);
  border: 1px solid var(--border-default);
}

/* v20.7.5 — Site-mode picker (homepage vs page directory). */
.site-mode-fieldset { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.site-mode-card {
  display: flex; gap: 12px;
  border: 1.5px solid var(--border-default);
  border-radius: var(--radius-card);
  background: #fff;
  padding: 14px 16px;
  cursor: pointer;
  transition: border-color 120ms ease, background 120ms ease;
}
.site-mode-card:hover { border-color: rgba(240, 86, 55, 0.45); }
.site-mode-card.is-selected {
  border-color: var(--ofload-orange);
  background: linear-gradient(180deg, rgba(240, 86, 55, 0.04) 0%, #fff 65%);
}
.site-mode-card input[type="radio"] {
  margin-top: 3px; flex: none;
  accent-color: var(--ofload-orange);
}
.site-mode-card-body { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
.site-mode-card-title {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 700; font-size: 14px; color: var(--text-heading);
}
.site-mode-card-icon { font-size: 16px; }
.site-mode-card-blurb { font-size: 13px; line-height: 1.5; color: var(--text-body); }
.site-mode-card-blurb code {
  font-size: 12px; background: #F3F5F8; padding: 1px 5px; border-radius: 4px;
}

/* v20.7.16 — Page Privacy section breathing room.
   Wraps the access-passwords block in its own section with a real
   header + subtle background card around the Add form so the layout
   doesn't feel like one tall stack. */
.page-pw-section {
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid var(--border-default);
}
.page-pw-section-head { margin: 0 0 14px; }
.page-pw-section-head h3 {
  margin: 0 0 4px;
  font-size: 16px; font-weight: 700; color: var(--text-heading);
  letter-spacing: -0.01em;
}
.page-pw-section-head p { margin: 0; font-size: 13px; line-height: 1.5; }
.page-pw-empty {
  padding: 18px;
  font-size: 13px;
  text-align: center;
  background: #FAFBFC;
  border: 1px dashed var(--border-default);
  border-radius: var(--radius-card);
  margin: 0 0 14px;
}
.page-pw-add-card {
  margin-top: 16px;
  padding: 16px 18px 18px;
  background: linear-gradient(180deg, #FAFBFC 0%, #FFFFFF 80%);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-card);
}
.page-pw-add-title {
  margin: 0 0 12px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-heading);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.page-pw-add-hint {
  font-size: 11.5px; line-height: 1.55; margin: 10px 0 0;
}

/* v20.7.13/16 — Access passwords table + add-row layout. */
.access-pw-table th, .access-pw-table td { vertical-align: middle; }
.access-pw-table { background: #fff; border-radius: var(--radius-card); overflow: hidden; }
.access-pw-add-form { display: flex; flex-direction: column; gap: 8px; }
.access-pw-row {
  display: grid;
  grid-template-columns: minmax(180px, 1.4fr) minmax(220px, 1.6fr) minmax(140px, auto) auto;
  gap: 12px;
  align-items: end;
}
.access-pw-field { display: flex; flex-direction: column; gap: 5px; }
.access-pw-field > span:first-child {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.access-pw-field > span:first-child .muted {
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
}
.access-pw-field input {
  font-size: 13px;
  padding: 9px 11px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-field);
  background: #fff;
}
.access-pw-field input:focus {
  outline: 0;
  border-color: var(--ofload-orange);
  box-shadow: 0 0 0 3px rgba(240, 86, 55, 0.15);
}
.access-pw-input-wrap { display: flex; gap: 6px; align-items: stretch; }
.access-pw-input-wrap input { flex: 1; min-width: 0; }
.access-pw-generate {
  font: inherit; font-size: 12px; font-weight: 600;
  padding: 8px 12px;
  border: 1px solid var(--border-default);
  background: #fff; color: var(--text-heading);
  border-radius: var(--radius-field);
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 120ms ease, color 120ms ease;
}
.access-pw-generate:hover { border-color: var(--ofload-orange); color: var(--ofload-orange); }
.access-pw-submit { height: 38px; }

@media (max-width: 800px) {
  .access-pw-row { grid-template-columns: 1fr; }
  .access-pw-submit { width: 100%; }
}

/* v20.7.5 — Sharing add-member form: single-line input + Enter-submits. */
.add-member-form { display: flex; flex-direction: column; gap: 6px; }
.add-member-label {
  font-size: 13px; font-weight: 600; color: var(--text-heading);
}
.add-member-row {
  display: flex; gap: 8px; align-items: stretch;
}
.add-member-row input[type="text"] {
  flex: 1; min-width: 0;
}
.add-member-row button { flex: none; }

/* "Static homepage" / "No homepage configured" placeholder rows */
.page-row.is-root-project { background: rgba(240, 86, 55, 0.025); }
.page-row.is-root-project:hover { background: rgba(240, 86, 55, 0.06); }
.page-row.is-empty { background: #FAFBFC; cursor: default; }
.page-row.is-empty:hover { background: #FAFBFC; }
.page-row.is-empty .col-pos { color: var(--text-muted); }

.page-cell-divider { margin: 0 6px; }

.pages-table-footer {
  margin: 0;
  padding: 10px 18px 14px;
  font-size: 12px;
  color: var(--text-muted);
  border-top: 1px solid var(--border-default);
  background: #FAFBFC;
}

/* =========================================================================
   v20.7.2 — Unified new-page form (.np-*).
   One screen for Homepage / Parent page / Child page. Type tiles up top
   drive which sections show; privacy is a stack of collapsible cards
   instead of a long radio list; file upload has a real dropzone look.
   ========================================================================= */

.np-section {
  padding: 24px 0;
  border-bottom: 1px solid var(--border-default);
}
.np-section:first-of-type { padding-top: 8px; }
.np-section:last-of-type { border-bottom: none; }

.np-h2 {
  margin: 0 0 14px;
  font-size: 18px;
  font-weight: 700;
  color: var(--text-heading);
  letter-spacing: -0.01em;
}
.np-h3 {
  margin: 0 0 12px;
  font-size: 15px;
  font-weight: 700;
  color: var(--text-heading);
}
.np-section-lede {
  margin: -4px 0 14px;
  font-size: 13px;
  line-height: 1.55;
}

/* ---- Type picker tiles --------------------------------------------- */
.np-type-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
@media (max-width: 800px) {
  .np-type-grid { grid-template-columns: 1fr; }
}
.np-type-card {
  position: relative;
  display: block;
  border: 1.5px solid var(--border-default);
  border-radius: var(--radius-card);
  background: #fff;
  padding: 16px 16px 14px;
  cursor: pointer;
  transition: border-color 120ms ease, background 120ms ease, box-shadow 120ms ease;
}
.np-type-card:hover { border-color: rgba(240, 86, 55, 0.45); }
.np-type-card.is-selected {
  border-color: var(--ofload-orange);
  background: linear-gradient(180deg, rgba(240, 86, 55, 0.045) 0%, #fff 80%);
  box-shadow: 0 1px 0 rgba(240, 86, 55, 0.10), 0 4px 14px rgba(1, 10, 38, 0.05);
}
.np-type-card input[type="radio"] {
  position: absolute;
  top: 14px;
  right: 14px;
  margin: 0;
  accent-color: var(--ofload-orange);
}
.np-type-card-body {
  display: block;
  padding-right: 28px;
}
.np-type-card-icon {
  display: inline-block;
  font-size: 22px;
  margin-bottom: 6px;
}
.np-type-card-title {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: var(--text-heading);
  margin-bottom: 4px;
}
.np-type-card-blurb {
  display: block;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-body);
}
.np-type-card-blurb code {
  font-size: 12px;
  background: #F3F5F8;
  padding: 1px 5px;
  border-radius: 4px;
}

/* ---- Type-driven context callouts ---------------------------------- */
.np-context { margin: 4px 0 18px; }
.np-callout {
  display: block;
  padding: 12px 14px;
  border-radius: var(--radius-card);
  font-size: 13px;
  line-height: 1.55;
  border: 1px solid transparent;
}
.np-callout strong { color: var(--text-heading); }
.np-callout code {
  font-size: 12px;
  background: rgba(255,255,255,0.65);
  padding: 1px 5px;
  border-radius: 4px;
}
.np-callout-info {
  background: rgba(36, 132, 124, 0.07);
  border-color: rgba(36, 132, 124, 0.22);
  color: #0E5750;
}
.np-callout-warn {
  background: rgba(240, 86, 55, 0.07);
  border-color: rgba(240, 86, 55, 0.30);
  color: #8A2E18;
}

/* ---- Form rows ----------------------------------------------------- */
.np-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
@media (max-width: 800px) {
  .np-row { grid-template-columns: 1fr; }
}
.np-field { display: flex; flex-direction: column; gap: 6px; }
.np-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-heading);
}
.np-field small.muted { font-size: 12px; line-height: 1.5; }
.np-field code {
  font-size: 12px;
  background: #F3F5F8;
  padding: 1px 5px;
  border-radius: 4px;
}

/* ---- Privacy: collapsible cards ----------------------------------- */
.np-privacy-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.np-privacy-card {
  border: 1px solid var(--border-default);
  border-radius: var(--radius-card);
  background: #fff;
  overflow: hidden;
  transition: border-color 120ms ease, background 120ms ease;
}
.np-privacy-card[open] {
  border-color: var(--ofload-orange);
  background: linear-gradient(180deg, rgba(240, 86, 55, 0.04) 0%, #fff 65%);
}
.np-privacy-card > summary {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  cursor: pointer;
  font-size: 14px;
  color: var(--text-heading);
}
.np-privacy-card > summary::-webkit-details-marker { display: none; }
.np-privacy-card > summary::marker { content: ''; }
.np-privacy-radio {
  flex: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1.5px solid var(--border-default);
  background: #fff;
  transition: border-color 120ms ease, background 120ms ease;
}
.np-privacy-card[open] .np-privacy-radio {
  border-color: var(--ofload-orange);
  background: radial-gradient(circle, var(--ofload-orange) 0 4px, #fff 5px 100%);
}
.np-privacy-title { flex: 1; font-weight: 600; font-size: 14px; }
.np-privacy-tag {
  flex: none;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  background: #F3F5F8;
  padding: 3px 8px;
  border-radius: 999px;
  font-weight: 500;
}
.np-privacy-card[open] .np-privacy-tag {
  background: rgba(240, 86, 55, 0.10);
  color: var(--ofload-orange);
}
.np-privacy-body {
  padding: 4px 14px 14px 42px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 13px;
  line-height: 1.55;
}
.np-privacy-body input[type="text"],
.np-privacy-body textarea {
  width: 100%;
}
.np-priv-radio {
  /* The native radio is hidden (we use the .np-privacy-radio dot in the
     summary as the visual indicator) but kept in the DOM so the form
     submits the selected value. */
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

/* ---- File dropzone -------------------------------------------------- */
.np-upload-section { padding-top: 22px; }
.np-dropzone {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 18px;
  border: 1.5px dashed rgba(1, 10, 38, 0.18);
  border-radius: var(--radius-card);
  background: #FAFBFC;
  cursor: pointer;
  transition: border-color 120ms ease, background 120ms ease;
}
.np-dropzone:hover {
  border-color: var(--ofload-orange);
  background: rgba(240, 86, 55, 0.04);
}
.np-dropzone input[type="file"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}
.np-dropzone-icon {
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(240, 86, 55, 0.10);
  color: var(--ofload-orange);
  font-size: 18px;
}
.np-dropzone-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 13px;
}
.np-dropzone-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-heading);
}
.np-dropzone-hint { font-size: 12px; }
.np-dropzone-filename {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
  font-weight: 600;
  color: var(--ofload-orange);
  background: #fff;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(240, 86, 55, 0.30);
  max-width: 240px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.np-checkbox-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 14px 0 4px;
  padding: 12px 14px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-card);
  background: #fff;
  font-size: 13px;
  line-height: 1.5;
}
.np-checkbox-row input[type="checkbox"] {
  margin-top: 3px;
  accent-color: var(--ofload-orange);
}
.np-checkbox-row strong { color: var(--text-heading); }

.np-version-details {
  margin: 12px 0 0;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-card);
  background: #fff;
  padding: 10px 14px;
}
.np-version-details > summary {
  cursor: pointer;
  font-size: 13px;
  list-style: none;
}
.np-version-details > summary::-webkit-details-marker { display: none; }
.np-version-details > summary::marker { content: ''; }

.np-runtime-rules {
  margin: 16px 0 0 18px;
  padding: 0;
  font-size: 13px;
  line-height: 1.7;
}
.np-runtime-rules code {
  font-size: 12px;
  background: #F3F5F8;
  padding: 1px 5px;
  border-radius: 4px;
}
.np-runtime-foot {
  margin: 10px 0 0;
  font-size: 12px;
  line-height: 1.55;
}

/* =========================================================================
   v20.6 — site requests + approvals + people management + help fab
   ========================================================================= */

/* Topbar nav badge for pending approvals count. */
.nav-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.4;
  background: var(--ofload-orange);
  color: #fff;
  border-radius: 999px;
  vertical-align: middle;
  min-width: 20px;
  text-align: center;
}

/* Status filter pills on /site-requests. */
.status-filter {
  display: flex;
  gap: 8px;
  margin: 6px 0 16px;
  flex-wrap: wrap;
}
.status-filter-pill {
  display: inline-block;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  border-radius: 999px;
  border: 1px solid var(--border-default);
  background: #fff;
  color: var(--text-heading);
  transition: border-color var(--dur-fast) var(--ease-standard),
              background var(--dur-fast) var(--ease-standard);
}
.status-filter-pill:hover { border-color: var(--border-strong); color: var(--text-heading); }
.status-filter-pill.is-active {
  background: var(--ofload-navy);
  border-color: var(--ofload-navy);
  color: #fff;
}

/* Per-row request status pill. */
.status-pill {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border: 1px solid transparent;
  white-space: nowrap;
}
.status-pending   { background: rgba(217, 119, 6, 0.12);   color: #B45309; border-color: rgba(217, 119, 6, 0.22); }
.status-approved  { background: rgba(36, 132, 124, 0.10); color: #166A64; border-color: rgba(36, 132, 124, 0.22); }
.status-rejected  { background: rgba(240, 86, 55, 0.12);  color: #B91C1C; border-color: rgba(240, 86, 55, 0.25); }
.status-cancelled { background: rgba(1, 10, 38, 0.06);     color: var(--text-muted); border-color: rgba(1, 10, 38, 0.10); }

/* Per-row role pill on /people. */
.role-pill {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.role-user       { background: #F3F5F8; color: var(--text-muted); }
.role-manager    { background: rgba(36, 132, 124, 0.14); color: #166A64; }
.role-admin      { background: rgba(240, 86, 55, 0.12); color: var(--ofload-orange-hover); }
.role-superadmin { background: var(--ofload-navy); color: #fff; }

/* Manager-select dropdown. Compact so it fits in table rows. */
.manager-select {
  font-size: 13px;
  padding: 4px 8px;
  border-radius: 6px;
  border: 1px solid var(--border-default);
  background: #fff;
  max-width: 280px;
}

/* Request-detail right-column action cards. */
.request-action-card {
  margin-bottom: 14px;
  padding: 16px 18px;
}
.request-action-card h3 { font-size: 15px; }
.request-action-card label { display: block; margin-bottom: 8px; }
.request-action-card textarea {
  width: 100%;
  resize: vertical;
  font-family: inherit;
}
.request-action-card button { width: 100%; margin-top: 8px; }

/* Definition-list display in request detail. */
.kv-list {
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 8px 18px;
  font-size: 14px;
}
.kv-list dt {
  font-weight: 600;
  color: var(--text-muted);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding-top: 4px;
}
.kv-list dd {
  margin: 0;
  color: var(--text-body);
  word-break: break-word;
}

.gate-help-line,
.error-help-line {
  font-size: 13px;
  margin: 16px 0 6px;
}

/* ---------- Help fab (floating ? button) -------------------------- */
.help-fab {
  position: fixed;
  right: 20px;
  bottom: 20px;
  display: flex;
  align-items: center;
  gap: 6px;
  height: 40px;
  padding: 0 14px 0 10px;
  background: var(--ofload-navy);
  color: #fff;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  box-shadow: var(--elev-3);
  z-index: 100;
  transition: background var(--dur-fast) var(--ease-standard),
              transform var(--dur-fast) var(--ease-standard),
              box-shadow var(--dur-fast) var(--ease-standard);
}
.help-fab:hover {
  background: #1a2540;
  transform: translateY(-1px);
  box-shadow: var(--elev-4);
}
.help-fab-q {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  background: var(--ofload-orange);
  color: #fff;
  border-radius: 50%;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
}

/* ---------- Help modal --------------------------------------------- */
.help-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
}
.help-modal[hidden] { display: none; }
.help-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(1, 10, 38, 0.42);
  backdrop-filter: blur(2px);
}
.help-modal-card {
  position: relative;
  max-width: 560px;
  width: calc(100% - 40px);
  max-height: calc(100vh - 80px);
  overflow: auto;
  background: #fff;
  border-radius: var(--radius-card);
  box-shadow: var(--elev-4);
  padding: 32px 36px 28px;
}
.help-modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 32px;
  height: 32px;
  background: transparent;
  border: none;
  font-size: 24px;
  font-weight: 300;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: 6px;
  transition: background var(--dur-fast) var(--ease-standard);
  line-height: 1;
}
.help-modal-close:hover { background: #F3F5F8; color: var(--text-heading); }
.help-modal-title {
  margin: 0 0 18px;
  font-size: 22px;
  letter-spacing: -0.01em;
}
.help-modal-body h3 {
  margin: 0 0 8px;
  font-size: 15px;
}
.help-modal-body section {
  margin-bottom: 0;
}
.help-modal-body p {
  margin: 0 0 10px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-body);
}
.help-modal-body code {
  font-size: 12px;
  background: #F3F5F8;
  padding: 1px 5px;
  border-radius: 4px;
}
.help-modal-footer {
  margin: 18px 0 0;
  font-size: 13px;
  color: var(--text-muted);
  padding-top: 14px;
  border-top: 1px solid var(--border-default);
}

/* Hide the FAB on narrow screens — it overlaps too much on mobile. */
@media (max-width: 540px) {
  .help-fab-label { display: none; }
  .help-fab { padding: 0 10px; }
}

/* Hide the less-critical columns on small screens so the name + state
   stay readable. Edited and Views go first; privacy stays. */
@media (max-width: 720px) {
  .pages-table .col-edited,
  .pages-table .col-views { display: none; }
}
@media (max-width: 540px) {
  .pages-table .col-privacy { display: none; }
  .pages-table .col-grip { display: none; }
}

/* ---------- Overview tiles (right column / bottom on narrow) ------- */
.overview-tiles {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
@media (max-width: 980px) {
  .overview-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 10px;
  }
}

.overview-tile {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: #fff;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-card);
  box-shadow: var(--elev-1);
  text-decoration: none;
  color: inherit;
  transition: border-color 100ms ease, transform 100ms ease, box-shadow 100ms ease;
}
.overview-tile:hover {
  color: inherit;
  border-color: var(--border-strong);
  box-shadow: var(--elev-2);
  transform: translateY(-1px);
}
.overview-tile:active { transform: translateY(0); box-shadow: var(--elev-1); }

.overview-tile-danger {
  border-color: rgba(240, 86, 55, 0.18);
  background: linear-gradient(180deg, #FFFBF8 0%, #FFFFFF 70%);
}
.overview-tile-danger:hover { border-color: rgba(240, 86, 55, 0.4); }

.tile-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.tile-icon svg { width: 18px; height: 18px; stroke-width: 2; }
.tile-icon-orange { background: rgba(240, 86, 55, 0.12); color: var(--ofload-orange-hover); }
.tile-icon-navy   { background: rgba(1, 10, 38, 0.06);  color: var(--ofload-navy); }
.tile-icon-forest { background: rgba(36, 132, 124, 0.12); color: #166A64; }
.tile-icon-ice    { background: rgba(170, 195, 188, 0.22); color: var(--ofload-navy); }

.tile-body { flex: 1; min-width: 0; }
.tile-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-heading);
  line-height: 1.25;
}
.tile-meta {
  font-size: 12px;
  color: var(--text-body);
  line-height: 1.45;
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tile-meta code {
  font-size: 11px;
  background: #F3F5F8;
  padding: 1px 4px;
  border-radius: 4px;
}
.tile-meta a { color: var(--ofload-orange); }
.tile-meta strong { color: var(--text-heading); }

.tile-chip {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(36, 132, 124, 0.14);
  color: #166A64;
}

.tile-chev {
  flex: none;
  font-size: 22px;
  line-height: 1;
  color: var(--text-muted);
  font-weight: 300;
  transition: transform 100ms ease, color 100ms ease;
}
.overview-tile:hover .tile-chev { color: var(--ofload-orange); transform: translateX(2px); }

/* ---------- Overview section cards (Upload & add, Access & identity) -- */
/* These sections live IN the overview / page-overview body. Tighter
   visual chrome than the generic .section-card so they read as part of
   the overview's narrative rather than as floating utility cards. */
.section-card.overview-section {
  box-shadow: var(--elev-1);
}
.section-card.overview-section > summary {
  padding: 16px 22px;
  background: #fff;
  border-bottom: 1px solid transparent; /* visible only when open */
  gap: 14px;
}
.section-card.overview-section > summary:hover { background: #FAFBFC; }
.section-card.overview-section[open] > summary {
  background: #FAFBFC;
  border-bottom-color: var(--border-default);
}
.section-card.overview-section > summary::before {
  font-size: 16px;
  color: var(--text-muted);
  width: 14px;
  text-align: center;
  flex: none;
}

.overview-section-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-heading);
}
.overview-section-hint {
  font-size: 13px;
  font-weight: 400;
  color: var(--text-muted);
  margin-left: 10px;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* When collapsed, hint a clickable affordance on the far right so users
   know there's content to expand into. Hidden when open (the body is
   already on screen). */
.section-card.overview-section > summary::after {
  content: "Open";
  margin-left: auto;
  flex: none;
  font-size: 12px;
  font-weight: 600;
  color: var(--ofload-orange);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 4px 10px;
  border: 1px solid rgba(240, 86, 55, 0.25);
  border-radius: 999px;
  background: rgba(240, 86, 55, 0.05);
  transition: background var(--dur-fast) var(--ease-standard);
}
.section-card.overview-section > summary:hover::after {
  background: rgba(240, 86, 55, 0.12);
}
.section-card.overview-section[open] > summary::after {
  content: "Close";
  color: var(--text-muted);
  border-color: var(--border-default);
  background: #fff;
}

.section-card.overview-section .section-body { padding: 22px 24px 24px; }
.section-card.overview-section .section-body.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}
@media (max-width: 800px) {
  .section-card.overview-section .section-body.two-col { grid-template-columns: 1fr; }
}

/* Inline page-settings card (page-overview) — uses the same overview
   section chrome but its own internal grid. */
.page-inline-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 32px;
}
@media (max-width: 760px) {
  .page-inline-grid { grid-template-columns: 1fr; gap: 22px; }
}
.page-inline-col { min-width: 0; }
.page-inline-h3 {
  margin: 0 0 12px;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}
.page-inline-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--border-default);
  flex-wrap: wrap;
}
.visually-tight { padding: 0; margin: 0; }

/* =========================================================================
   v20.4 — Health banner + viewer error pages
   ========================================================================= */

/* ---------- Health banner (manager-facing) ----------------------- */
.health-banner {
  margin: 0 0 20px;
  border-radius: var(--radius-card);
  border: 1px solid var(--border-default);
  background: #fff;
  box-shadow: var(--elev-1);
  overflow: hidden;
}
.health-banner-summary {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  cursor: pointer;
  list-style: none;
  user-select: none;
  transition: background var(--dur-fast) var(--ease-standard);
  font-size: 14px;
}
.health-banner-summary::-webkit-details-marker { display: none; }
.health-banner-summary:hover { background: #FAFBFC; }

.health-banner-summary.has-error {
  background: linear-gradient(180deg, rgba(240, 86, 55, 0.08), rgba(240, 86, 55, 0.04));
  border-bottom: 1px solid rgba(240, 86, 55, 0.18);
  color: #8A2B14;
}
.health-banner-summary.has-warning {
  background: linear-gradient(180deg, rgba(217, 119, 6, 0.08), rgba(217, 119, 6, 0.03));
  border-bottom: 1px solid rgba(217, 119, 6, 0.16);
  color: #8B5A0A;
}
.health-banner-summary.has-info {
  background: linear-gradient(180deg, rgba(36, 96, 164, 0.06), rgba(36, 96, 164, 0.02));
  border-bottom: 1px solid rgba(36, 96, 164, 0.14);
  color: #1E3A5F;
}

.health-icon {
  flex: none;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}
.health-icon svg { width: 18px; height: 18px; }
.has-error .health-icon   { background: rgba(240, 86, 55, 0.16); color: #B91C1C; }
.has-warning .health-icon { background: rgba(217, 119, 6, 0.18); color: #B45309; }
.has-info .health-icon    { background: rgba(36, 96, 164, 0.16); color: #1E3A5F; }

.health-banner-headline {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  font-weight: 500;
}
.health-banner-headline strong { font-weight: 700; }
.health-banner-mix { margin-left: 8px; font-weight: 400; font-size: 13px; }

.health-banner-toggle {
  flex: none;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: inherit;
  opacity: 0.85;
}
.health-banner[open] .health-toggle-open { display: none; }
.health-banner:not([open]) .health-toggle-close { display: none; }

.health-issue-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.health-issue {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  gap: 14px;
  align-items: start;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border-default);
}
.health-issue:last-child { border-bottom: none; }

.health-issue-marker {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  flex: none;
  margin-top: 1px;
}
.health-issue-error   .health-issue-marker { background: rgba(240, 86, 55, 0.14); color: #B91C1C; }
.health-issue-warning .health-issue-marker { background: rgba(217, 119, 6, 0.14); color: #B45309; }
.health-issue-info    .health-issue-marker { background: rgba(36, 96, 164, 0.12); color: #1E3A5F; }

.health-issue-body { min-width: 0; }
.health-issue-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-heading);
  line-height: 1.3;
}
.health-issue-detail {
  margin-top: 4px;
  font-size: 13px;
  color: var(--text-body);
  line-height: 1.5;
}

.health-issue-action {
  flex: none;
  align-self: center;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  padding: 7px 14px;
  border-radius: var(--radius-field);
  border: 1px solid var(--border-default);
  background: #fff;
  color: var(--text-heading);
  white-space: nowrap;
  transition: border-color var(--dur-fast) var(--ease-standard);
}
.health-issue-action:hover {
  border-color: var(--ofload-orange);
  color: var(--ofload-orange);
}
.health-issue-action span {
  margin-left: 4px;
  color: var(--text-muted);
  font-weight: 400;
}

@media (max-width: 720px) {
  .health-issue {
    grid-template-columns: 28px 1fr;
  }
  .health-issue-action {
    grid-column: 2;
    justify-self: start;
    margin-top: 4px;
  }
}

/* ---------- Viewer-facing error / gate-denied cards -------------- */
.error-card {
  max-width: 540px;
  margin: 56px auto 0;
  padding: 44px 36px 32px;
  background: #fff;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-card);
  box-shadow: var(--elev-2);
  text-align: center;
}
.error-card h1 { margin: 0 0 8px; font-size: 26px; letter-spacing: -0.01em; }
.error-card p  { margin: 0 0 12px; font-size: 15px; line-height: 1.55; }
.error-card .error-hint {
  font-size: 13px;
  background: #FAFBFC;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-field);
  padding: 12px 14px;
  margin: 16px 0 0;
  text-align: left;
  line-height: 1.5;
}

/* v20.7.12 — Gate page: SSO button + divider when external + @ofload
   are both available. */
.gate-sso-btn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; padding: 12px 16px;
  border: 1px solid var(--border-default);
  background: #fff; color: var(--text-heading);
  border-radius: var(--radius-field);
  font-weight: 600; font-size: 14px;
  text-decoration: none;
  transition: border-color 120ms ease, background 120ms ease;
}
.gate-sso-btn:hover { border-color: var(--ofload-orange); color: var(--ofload-orange); }
.gate-divider {
  display: flex; align-items: center; gap: 12px;
  margin: 18px 0;
  color: var(--text-muted); font-size: 12px;
}
.gate-divider::before, .gate-divider::after {
  content: ''; flex: 1; height: 1px; background: var(--border-default);
}
.gate-form { margin-top: 0; }

.error-help,
.gate-help {
  margin: 22px 0 6px;
  padding: 18px 16px 16px;
  background: linear-gradient(180deg, #FFFBF8 0%, #FFFFFF 70%);
  border: 1px solid rgba(240, 86, 55, 0.18);
  border-radius: var(--radius-card);
  text-align: center;
}
.error-help p,
.gate-help p { margin: 0 0 12px; font-size: 13px; }
.error-help code,
.gate-help code {
  font-size: 12px;
  background: #fff;
  border: 1px solid var(--border-default);
  padding: 1px 6px;
  border-radius: 4px;
}

.error-actions,
.gate-actions {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 18px;
}
.gate-actions .auth-secondary,
.error-actions .auth-secondary { padding: 9px 18px; }

/* The .gate class is shared with gate-password / gate-allowlist — when
   we add the .gate-denied modifier we want the same auth-card chrome
   that login uses. Already covered by `.gate` rules above; this is
   just a hook for future variant tweaks. */
.gate.gate-denied { max-width: 540px; }

/* ---------- Auth surfaces (login, gate-*) ---------- */
/* All sign-in / access surfaces share one card style so the look stays
   consistent whether you're at /login, hitting a password-gated site, or
   bouncing off an allowlist. */
.auth-card,
.gate {
  max-width: 440px;
  margin: 56px auto 0;
  padding: 44px 36px 36px;
  background: #fff;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-card);
  box-shadow: var(--elev-2);
  text-align: center;
}
.auth-card h1,
.gate h1 {
  margin: 0 0 8px;
  font-size: 26px;
  letter-spacing: -0.01em;
}
.auth-sub {
  margin: 0 0 28px;
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.5;
}

/* Prominent Google sign-in pill — this is THE primary action on /login,
   so it gets full width inside the card and a generous touch target. */
.google-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  padding: 13px 24px;
  background: #fff;
  color: #1F1F1F;
  border: 1px solid #DADCE0;
  border-radius: 999px;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  letter-spacing: 0.01em;
  transition: box-shadow 120ms ease, transform 120ms ease, border-color 120ms ease;
  box-sizing: border-box;
}
.google-btn:hover {
  color: #1F1F1F;
  border-color: #C7CFDA;
  box-shadow: var(--elev-1);
  transform: translateY(-1px);
}
.google-btn:active { transform: translateY(0); box-shadow: none; }
.google-btn svg { flex: none; }

/* "or" divider with horizontal rules on each side. */
.auth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 22px 0 14px;
  color: var(--text-muted);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.auth-divider::before,
.auth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border-default);
}

.auth-secondary {
  display: inline-block;
  padding: 9px 18px;
  background: transparent;
  color: var(--text-heading);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-field);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: border-color 120ms ease, background 120ms ease;
}
.auth-secondary:hover {
  color: var(--text-heading);
  border-color: var(--border-strong);
  background: #F6F8FB;
}

.auth-fineprint {
  margin: 12px 0 0;
  font-size: 12px;
  color: var(--text-muted);
}
.auth-fineprint code {
  font-size: 11px;
  background: #F3F5F8;
  border: 1px solid var(--border-default);
  padding: 1px 5px;
  border-radius: 4px;
}

/* Gate cards (password / allowlist / denied) keep the auth-card body but
   need a slightly wider card to accommodate the password input + helper
   text without feeling cramped. */
.gate { max-width: 480px; }
.gate form { display: flex; flex-direction: column; gap: 12px; margin-top: 4px; }
.gate input[type="password"],
.gate input[type="email"] {
  text-align: left;
}
.gate .button,
.gate button[type="submit"] {
  width: 100%;
  justify-content: center;
}

/* ---------- Dashboard request-site CTA (non-admin empty state) ---------- */
.request-site-card {
  margin: 24px 0 0;
  padding: 28px 28px 24px;
  background: linear-gradient(180deg, #FFFBF8 0%, #FFFFFF 70%);
  border: 1px solid rgba(240, 86, 55, 0.18);
  border-radius: var(--radius-card);
  box-shadow: var(--elev-1);
}
.request-site-card h2 {
  margin: 0 0 6px;
  font-size: 20px;
}
.request-site-card .lede {
  margin: 0 0 18px;
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1.55;
  max-width: 64ch;
}
.request-site-card ol {
  margin: 0 0 20px;
  padding: 0 0 0 20px;
  color: var(--text-body);
  font-size: 14px;
  line-height: 1.65;
}
.request-site-card ol li + li { margin-top: 4px; }
.request-site-card ol code {
  font-size: 12px;
  background: #F3F5F8;
  border: 1px solid var(--border-default);
  padding: 1px 5px;
  border-radius: 4px;
}
.request-site-card .request-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
}
.request-site-card .request-meta {
  margin: 14px 0 0;
  font-size: 12px;
  color: var(--text-muted);
}

/* ---------- v20.7.26 — Reparent modal --------------------------- */
.reparent-dialog {
  border: 0;
  padding: 0;
  border-radius: var(--radius-card);
  box-shadow: var(--elev-3);
  background: #fff;
  max-width: 520px;
  width: calc(100% - 32px);
}
.reparent-dialog::backdrop { background: rgba(1, 10, 38, 0.45); }
.reparent-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 22px 24px;
}
.reparent-title { margin: 0; font-size: 18px; }
.reparent-blurb { margin: 0; font-size: 13px; line-height: 1.5; }
.reparent-field { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 600; }
.reparent-field select {
  padding: 8px 10px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-field);
  font-size: 13px;
  background: #fff;
  font-family: inherit;
  font-weight: 500;
}
.reparent-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 4px;
}

/* ---------- v20.7.24 — Homepage edit screen (page-overview shell) --- */
.homepage-preview {
  position: relative;
  background: #FAFBFC;
  border-bottom: 1px solid var(--border-default);
  aspect-ratio: 16 / 10;
  overflow: hidden;
}
.homepage-preview-frame {
  border: 0; width: 100%; height: 100%; display: block; background: #fff;
}
/* Two-column upload + preview body inside the Upload section card. */
.homepage-upload-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 20px;
}
@media (max-width: 900px) {
  .homepage-upload-grid { grid-template-columns: 1fr; }
}
.homepage-upload-col, .homepage-preview-col { min-width: 0; }

/* v20.7.27 — the homepage edit screen renders its title as a plain
   H1 + URL line (no read-only fake-input chrome). Below preserves
   tight spacing on the .manage-header used there. */
.homepage-identity { margin: 0 0 18px; }
.homepage-identity .url-bar { font-size: 13px; }

/* Site-level privacy callout reused inside the homepage Privacy section
   (and as a banner on the legacy homepage screen). Makes it clear that
   privacy is governed at the site level, not on this screen. */
.hp-privacy-banner {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 16px;
  margin: 0;
  background: #FFF8EE;
  border: 1px solid #F4D9A8;
  border-radius: var(--radius-card);
  font-size: 13px;
  color: var(--text-heading);
}
.hp-privacy-banner-icon { font-size: 18px; line-height: 1; }
.hp-privacy-banner-body { display: flex; flex-direction: column; gap: 2px; }
.hp-privacy-banner-body a { color: var(--ofload-orange); font-weight: 600; }

/* Promote-an-existing-page form. Sits inside its own section-card now,
   so no outer card/border — only the form layout remains. */
.hp-promote-form {
  display: flex;
  gap: 12px;
  align-items: flex-end;
  flex-wrap: wrap;
}
.hp-promote-field { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 220px; }
.hp-promote-field span { font-size: 12px; font-weight: 600; color: var(--text-heading); }
.hp-promote-field select {
  padding: 8px 10px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-field);
  font-size: 13px;
  background: #fff;
  font-family: inherit;
}