/* 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;
  /* Signature colour — used for links, accents, selected states, borders, etc. */
  --ofload-orange: #D85559;
  --ofload-orange-hover: #B8484C;
  /* Button fill keeps the original Ofload orange (the "except buttons" carve-out). */
  --btn-orange: #F05637;
  --btn-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: #151515;
  --text-body:    #404040;
  --text-muted:   #404040;

  --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:  4px;
  --radius-field: 4px;

  --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. */
  /* Open Sans = base / all sub text. Lato = headings + buttons only. */
  --font-body:    "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-display: "Lato", -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);
  /* Sticky-footer layout: body is a full-height column so short pages
     push .site-footer to the bottom of the viewport instead of leaving
     it floating mid-screen. The main container grows to fill the gap. */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
body > main.container { flex: 1 0 auto; }

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);
  font-weight: 400;
  letter-spacing: -0.01em;
  margin: 0 0 0.6em;
}
h1 { font-size: 36px; line-height: 1.1; letter-spacing: -0.025em; }
h2 { font-size: 22px; line-height: 1.25; }
h3 { font-size: 17px; line-height: 1.3; }

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); }
/* Ofload logo (arc + LOAD wordmark) — inline SVG in the topbar brand link. */
.brand-logo { width: 110px; height: auto; display: block; }
.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; }

/* Splits the nav into "your stuff" (Dashboard/Stats/What's New) and the
   admin cluster (Access/Audit/Tools/Admins) so a busy admin bar reads as
   two groups rather than one long undifferentiated run of links. */
.nav-group-sep {
  width: 1px; height: 18px; margin: 0 10px;
  background: rgba(255, 255, 255, 0.14);
  flex-shrink: 0;
}

.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: #fff !important;
  background: transparent !important; border: 0 !important; box-shadow: none !important;
  padding: 0 12px; height: 32px;
  font-size: 13px; font-weight: 400;
  cursor: pointer;
  border-radius: 8px;
  transition: all var(--dur-fast) var(--ease-standard);
}
.nav-logout:hover { color: #F05637 !important; background: transparent !important; }

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

/* ---------- Footer ---------- */
/* A quiet finishing edge on every page. Light to sit on the ice bg (not a
   second navy slab), separated by a hairline. Pinned to the viewport
   bottom on short pages via the body flex-column layout above. */
.site-footer {
  flex-shrink: 0;
  border-top: 1px solid var(--border-default);
  background: transparent;
}
.site-footer-inner {
  max-width: 1280px; margin: 0 auto;
  padding: 18px 32px;
  display: flex; align-items: center; gap: 16px;
  flex-wrap: wrap;
  font-size: 12.5px; color: var(--text-muted);
}
.site-footer-brand {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 600; letter-spacing: 0.02em;
  color: var(--navy-60);
}
.site-footer-brand .footer-o { color: var(--ofload-orange); }
.site-footer-brand .footer-dot {
  width: 3px; height: 3px; border-radius: 999px;
  background: var(--border-strong);
}
.site-footer-spacer { flex: 1; }
.site-footer-links { display: inline-flex; align-items: center; gap: 18px; }
.site-footer-links a {
  color: var(--text-muted); font-weight: 500;
  transition: color var(--dur-fast) var(--ease-standard);
}
.site-footer-links a:hover { color: var(--text-heading); }

/* ---------- 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: var(--font-body); }
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: 400;
  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(--btn-orange); color: #fff;
  box-shadow: var(--elev-1);
}
.btn.primary:hover, button.primary:hover {
  background: var(--btn-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(--btn-orange); color: #fff;
}
.btn.danger:hover, button.danger:hover { background: var(--btn-orange-hover); }

/* Tertiary button — text only, signature-orange. !important beats the base
   button[type=submit] pill/secondary styling. */
.btn-tertiary {
  height: auto !important; padding: 6px 4px !important;
  background: none !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important;
  color: var(--btn-orange) !important; font-family: var(--font-body) !important; font-size: 14px !important; font-weight: 400 !important; cursor: pointer;
}
.btn-tertiary:hover { color: var(--btn-orange-hover) !important; background: none !important; text-decoration: underline; transform: none !important; }

/* Secondary button — white fill, signature-orange 1px border + text. */
.btn-secondary {
  background: #fff !important; color: var(--btn-orange) !important;
  border: 1px solid var(--btn-orange) !important; box-shadow: none !important;
}
.btn-secondary:hover { background: #FFF7F4 !important; color: var(--btn-orange) !important; }

.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;
}
/* All dropdown fields site-wide: custom chevron + room to its right. */
select {
  -webkit-appearance: none; appearance: none;
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23555555' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 34px;
}
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: #555555;
  box-shadow: none;
}
input::placeholder, textarea::placeholder { color: #AAAAAA; opacity: 1; }
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: #FFF8F5; }
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: #fff;
}
table.sites tbody tr.site-row-recent:hover {
  background: #FFF8F5;
}
.site-recent-pill {
  display: inline-block;
  margin-left: 8px;
  vertical-align: middle;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  padding: 2px 8px;
  border-radius: 4px;
  background: #E5F7FF;
  color: #00364D;
}

/* --- 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;
  padding: 0;
  font-size: 13px; font-weight: 400;
  letter-spacing: 0;
  color: var(--text-body);
}
.badge-dot { display: none; }
.badge-allowlist, .badge-workspace, .badge-password, .badge-public { background: none; color: var(--text-body); }

/* ---------- 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); }

/* Calm colorways — white cards; colour lives in a small icon tile only. */
.stat-card .stat-label svg {
  width: 30px; height: 30px; padding: 7px; border-radius: 8px;
  background: rgba(1, 10, 38, 0.05); color: var(--ofload-navy);
  box-sizing: border-box;
}
.stat-card.accent-navy   .stat-label svg { background: rgba(1, 10, 38, 0.06);  color: var(--ofload-navy); }
.stat-card.accent-orange .stat-label svg { background: rgba(240, 86, 55, 0.12); color: var(--ofload-orange-hover); }
.stat-card.accent-forest .stat-label svg { background: rgba(36, 132, 124, 0.12); color: var(--success); }

/* ---------- 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 svg { width: 20px; height: 20px; }
.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; }

/* Admin all-sites table: denser rows (it can hold 100+ sites) + pager. */
table.sites td { padding-top: 9px; padding-bottom: 9px; }
.site-name { gap: 11px; }
.site-icon { width: 32px; height: 32px; }
table.sites .site-path { display: none; }           /* drop the created-date subline for density */
table.sites .url-cell {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 240px;
}
.sites-pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 18px 2px 4px;
  flex-wrap: wrap;
}
.sites-pager-nav { display: flex; align-items: center; gap: 16px; }
.sites-pagesize { font-size: 13px; display: inline-flex; align-items: center; gap: 6px; }
.sites-pagesize select { padding: 4px 8px; }
.sites-pager .row-btn[disabled] { opacity: 0.45; cursor: default; }
.sites-pager #sites-pager-info { font-size: 13px; }

.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: #555555;
  background: #fff;
  box-shadow: none;
}
.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: #555555;
  box-shadow: none;
}
.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 --------------------------------------------- */
/* Panel is white only in Table view; Folder view is transparent so the
   group cards float on the page background. */
.pages-table-wrap {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
}
.pages-table-wrap.is-list {
  background: #fff;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-card);
  box-shadow: var(--elev-1);
}
.pages-table-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 2px 14px;
  background: transparent;
  gap: 12px;
  flex-wrap: wrap;
}
.pages-table-wrap.is-list .pages-table-head {
  padding: 14px 18px;
  background: #FAFBFC;
  border-bottom: 1px solid var(--border-default);
  border-radius: var(--radius-card) var(--radius-card) 0 0;
}
.pages-views { padding: 0; }

.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: none;
  color: var(--text-body);
  border: 0;
}
.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 #eaeaea;
  border-radius: 8px;
  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: 9px 12px;
  font-size: 14px;
  border-radius: 6px;
  cursor: pointer;
  color: #404040;
  font-family: var(--font-body);
  text-decoration: none;
  font-weight: 400;
  box-shadow: none;
  transform: none !important;
}
.kebab-menu a:hover,
.kebab-menu button:hover { background: #FFF8F5; }
.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. */
/* =========================================================================
   Modern card-row pages list (v-redesign). Same <table>/<tr>/<td> skeleton
   as the old .pages-tree (so drag-reorder, tree-collapse, kebab menus and
   the reparent/source dialogs all keep working) — restyled into spacious,
   full-width card rows with the page name + URL stacked.
   ========================================================================= */
.pages-cards {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 10px;
  font-size: 14px;
}
.pages-cards col.c-page    { width: auto; }
.pages-cards col.c-privacy,
.pages-cards col.c-sources,
.pages-cards col.c-updated,
.pages-cards col.c-actions { width: 1%; }

.pages-cards thead th {
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--navy-40);
  padding: 0 18px 2px;
  white-space: nowrap;
}
.pages-cards thead th:last-child { width: 1%; }

.pages-cards tbody td {
  background: #fff;
  padding: 16px 18px;
  vertical-align: middle;
  border-top: 1px solid var(--border-default);
  border-bottom: 1px solid var(--border-default);
  white-space: nowrap;
}
.pages-cards tbody td.c-page { white-space: normal; }
.pages-cards tbody td:first-child {
  border-left: 1px solid var(--border-default);
  border-top-left-radius: 13px;
  border-bottom-left-radius: 13px;
}
.pages-cards tbody td:last-child {
  border-right: 1px solid var(--border-default);
  border-top-right-radius: 13px;
  border-bottom-right-radius: 13px;
}
.pages-cards tbody tr.page-row { cursor: pointer; }
.pages-cards tbody tr.page-row td { transition: background 120ms ease, border-color 120ms ease; }
.pages-cards tbody tr.page-row:hover td {
  background: #FBFCFD;
  border-color: var(--border-strong);
}
.pages-cards tbody tr.page-row.is-home td { background: rgba(240, 86, 55, 0.04); }
.pages-cards tbody tr.page-row.is-home td:first-child { box-shadow: inset 4px 0 0 var(--ofload-orange); }
.pages-cards tbody tr.page-row.is-hidden td { opacity: 0.6; }
.pages-cards tbody tr.dragging td { opacity: 0.5; }
.pages-cards tbody tr.drop-above td { box-shadow: 0 -3px 0 var(--ofload-orange) inset; }
.pages-cards tbody tr.is-collapsed-child { display: none; }
.pages-table-wrap.is-directory-mode .pages-cards tr.page-row.is-home strong,
.pages-table-wrap.is-directory-mode .pages-cards tr.page-row.is-home code { text-decoration: line-through; opacity: 0.65; }

/* Page cell: icon + stacked name / URL, indented by tree depth. */
.pcell {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-left: calc(var(--depth, 0) * 24px);
}
.pcell-ico {
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  font-size: 17px;
  line-height: 1;
  background: rgba(1, 10, 38, 0.05);
}
.pcell-ico.home   { background: rgba(240, 86, 55, 0.12); }
.pcell-ico.parent { background: rgba(1, 10, 38, 0.06); }
.pcell-ico.child  { background: rgba(36, 132, 124, 0.10); }
.pcell-tx { min-width: 0; }
.pcell-name { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.pcell-name strong { font-size: 15px; font-weight: 700; color: var(--text-heading); }
.pcell-tag {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: #404040;
  background: #eaeaea;
  padding: 2px 8px;
  border-radius: 4px;
}
.pcell-url {
  display: inline-block;
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 4px;
  background: rgba(1, 10, 38, 0.045);
  padding: 1px 7px;
  border-radius: 5px;
}
.pcell-line { flex: none; width: 20px; text-align: center; color: var(--navy-40); }
.pcell-updated { font-size: 12.5px; color: var(--text-body); }
.pcell-by { font-size: 11.5px; margin-top: 2px; }

/* ---- Group colour-coding ----
   Each top-level parent and everything nested under it share ONE hue, set
   per row via `--group` (an "R,G,B" triplet). The parent renders a stronger
   shade; its children a lighter shade of the same hue — so a group reads as
   one unit. Homepage is always orange. */
.pages-cards tbody tr.page-row.is-home td { background: rgba(240, 86, 55, 0.05); }
.pages-cards tbody tr.page-row.is-home td:first-child { box-shadow: inset 4px 0 0 var(--ofload-orange); }
.pages-cards tbody tr.page-row.is-home:hover td { background: rgba(240, 86, 55, 0.09); }

.pages-cards tbody tr.page-row.is-parent td { background: rgba(var(--group), 0.12); }
.pages-cards tbody tr.page-row.is-parent td:first-child { box-shadow: inset 4px 0 0 rgb(var(--group)); }
.pages-cards tbody tr.page-row.is-parent:hover td { background: rgba(var(--group), 0.17); }

.pages-cards tbody tr.page-row.is-child td { background: rgba(var(--group), 0.05); }
.pages-cards tbody tr.page-row.is-child td:first-child { box-shadow: inset 4px 0 0 rgba(var(--group), 0.45); }
.pages-cards tbody tr.page-row.is-child:hover td { background: rgba(var(--group), 0.09); }

.pages-cards tbody tr.page-row:hover td { border-color: var(--border-strong); }

/* Icon tiles + type tags pick up the group hue. */
.pages-cards tr.is-parent .pcell-ico { background: rgba(var(--group), 0.16); color: rgb(var(--group)); }
.pages-cards tr.is-child  .pcell-ico { background: rgba(var(--group), 0.11); color: rgb(var(--group)); }
.pcell-tag--home,
.pcell-tag--parent,
.pcell-tag--child  { background: #eaeaea; color: #404040; }

/* Inline metadata row under the name (privacy · source · updated). */
.pcell-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 9px;
  font-size: 12px;
}
.pcell-meta-time { font-size: 11.5px; white-space: nowrap; }

/* =========================================================================
   Pages board (v-redesign): group cards tiled in a responsive grid, matched
   1:1 to the dashboard's folder view (.sgroup/.scard/.spage). Each top-level
   parent + its children = one card: a fixed-shape header so cards line up,
   then slim rows for the pages inside.
   ========================================================================= */
.pages-board {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: 16px;
  /* Each card sizes to its own content — no stretching to the tallest. */
  align-items: start;
}

/* Group container (matches dashboard .sgroup). */
.pgroup {
  background: #fff;
  border: 1px solid var(--border-default);
  border-radius: 14px;
  box-shadow: var(--elev-1);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: box-shadow 140ms ease;
}
.pgroup:hover { box-shadow: var(--elev-2); }
.pgroup.is-external { box-shadow: inset 5px 0 0 0 #BA7517, var(--elev-1); }

/* Parent header — a fixed shape so every card in a row lines up: name is
   one line (truncates), meta is two guaranteed single-line rows. Matches
   the dashboard's .scard. */
.pcard { padding: 16px 18px; }
.pcard-head { display: flex; align-items: center; gap: 12px; }
.pcard-ico {
  flex: none; width: 38px; height: 38px; border-radius: 10px;
  display: grid; place-items: center; font-size: 15px; font-weight: 800; line-height: 1;
  letter-spacing: -0.01em;
  background: rgba(1, 10, 38, 0.06); color: var(--ofload-navy);
}
.pcard-ico.home { background: rgba(240, 86, 55, 0.12); color: var(--ofload-orange-hover); }
.pcard-tx { flex: 1; min-width: 0; }
.pcard-name { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; min-width: 0; }
.pcard-title {
  font-size: 15px; font-weight: 700; color: var(--text-heading);
  text-decoration: none; letter-spacing: -0.01em;
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pcard-title:hover { color: var(--ofload-orange); }
/* Chips beside the name never shrink — the title yields space instead. */
.pcard-name .audience-chip-external,
.pcard-name .state-chip { flex-shrink: 0; }
.pcard-url {
  display: block; margin-top: 3px;
  font-size: 12px; color: var(--text-muted); background: transparent; padding: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pcard-actions { flex: none; display: inline-flex; align-items: center; gap: 6px; }
/* Row 1 of meta: privacy + source, single line. */
.pcard-meta {
  display: flex; align-items: center; gap: 8px; flex-wrap: nowrap;
  margin-top: 12px; font-size: 12px; overflow: hidden;
}
/* Row 2 of meta: "Updated … · by …", single line, truncates. */
.pcard-submeta {
  margin-top: 6px; font-size: 12px; color: var(--text-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Collapse control between the parent header and its pages (matches .sgroup-toggle). */
.pgroup-toggle {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 10px 18px;
  border: 0; border-top: 1px solid var(--border-default);
  background: #FAFBFC;
  color: var(--text-muted);
  font-size: 12px; font-weight: 600; cursor: pointer; text-align: left;
  font-family: inherit;
  transition: background 140ms ease, color 140ms ease;
}
.pgroup-toggle:hover { background: #F1F4F7; color: var(--text-heading); }
.pgroup-caret { width: 14px; height: 14px; transition: transform 150ms ease; }
.pgroup-toggle[aria-expanded="false"] .pgroup-caret { transform: rotate(-90deg); }
.pgroup.is-collapsed .pgroup-kids { display: none; }

/* Child pages — slim rows (matches dashboard .spage). */
.pgroup-kids { border-top: 1px solid var(--border-default); }
.pchild {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 18px;
  position: relative;
  /* Nest deeper pages under their parent: grandchildren (depth 3) step in one
     level so they no longer read as siblings of depth-2 pages. --kid-depth is
     0 for a group's direct children, 1 for a grandchild. */
  padding-left: calc(18px + var(--kid-depth, 0) * 30px);
}
/* A grandchild (depth 3) also gets an "└" tree connector so it unmistakably
   reads as nested under its parent row, not as a sibling. */
.pchild.is-nested::before {
  content: "";
  position: absolute;
  left: calc(18px + (var(--kid-depth, 1) - 1) * 30px + 8px);
  top: 0;
  height: 50%;
  width: 12px;
  border-left: 1.5px solid var(--border-default);
  border-bottom: 1.5px solid var(--border-default);
  border-bottom-left-radius: 6px;
}
.pchild + .pchild { border-top: 1px solid rgba(1, 10, 38, 0.05); }
.pchild.is-hidden { opacity: 0.55; }
.pchild.is-external { box-shadow: inset 4px 0 0 0 rgba(186, 117, 23, 0.7); }
.pchild-ico {
  flex: none; width: 26px; height: 26px; border-radius: 7px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(1, 10, 38, 0.04); color: var(--navy-60);
  font-size: 11.5px; font-weight: 700;
}
.pchild-tx { flex: 1; min-width: 0; }
.pchild-name-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
.pchild-name {
  font-size: 13px; font-weight: 600; color: var(--text-heading); text-decoration: none;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pchild-name:hover { color: var(--ofload-orange); }
.pchild-name-row .audience-chip-external,
.pchild-name-row .state-chip { flex-shrink: 0; }
.pchild-url {
  display: block; margin-top: 2px;
  font-size: 11.5px; color: var(--text-muted); background: transparent; padding: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pchild-actions { flex-shrink: 0; display: inline-flex; align-items: center; gap: 8px; }

/* Homepage banner — spans the full width, orange accent (not a group card). */
.pcard-home {
  grid-column: 1 / -1;
  background: #fff;
  border: 1px solid var(--border-default);
  border-left: 4px solid var(--ofload-orange);
  border-radius: 14px;
  box-shadow: var(--elev-1);
}

.pages-board-footer { margin: 18px 2px 0; font-size: 12.5px; }

@media (max-width: 620px) {
  .pages-board { grid-template-columns: 1fr; }
}

/* ---- Unified action buttons (Open / Edit / ⋯) — one consistent set ---- */
.row-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 32px;
  padding: 0 12px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  border: 1px solid var(--border-strong);
  background: #fff;
  color: var(--text-heading);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}
.row-btn:hover { border-color: var(--ofload-navy); background: #F6F8FB; color: var(--text-heading); }
.row-btn-edit, .row-btn-open {
  background: none; border: 0; box-shadow: none;
  padding: 0 4px; gap: 5px;
  color: var(--btn-orange); font-weight: 600;
}
.row-btn-edit:hover, .row-btn-open:hover {
  background: none !important; border: 0; box-shadow: none !important;
  color: var(--btn-orange-hover); text-decoration: underline;
}
.row-btn-edit svg, .row-btn-open svg { width: 14px; height: 14px; }
.row-btn-disabled,
.row-btn-disabled:hover {
  opacity: 0.55; cursor: default; background: #fff;
  border-color: var(--border-default); color: var(--text-muted);
}
.kebab-btn {
  height: 32px;
  width: 32px;
  padding: 0;
  border-radius: 8px;
  border: 1px solid var(--border-strong);
  background: #fff;
  color: var(--text-body);
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  display: inline-grid;
  place-items: center;
  transition: background 120ms ease, border-color 120ms ease;
}
.kebab-btn:hover { border-color: var(--ofload-navy); background: #F6F8FB; }

/* ---- Folder / List view toggle ---- */
.pages-head-actions { display: flex; align-items: center; gap: 12px; }
.view-toggle {
  display: inline-flex;
  background: #fff;
  border: 1px solid var(--border-default);
  border-radius: 9px;
  padding: 2px;
  gap: 2px;
}
.view-toggle button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 12px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
}
.view-toggle button svg { width: 15px; height: 15px; }
.view-toggle button:hover { color: var(--text-heading); }
.view-toggle button.is-on { background: var(--ofload-navy); color: #fff; }

/* ---- View toggle: show board (folder) OR table (list) ---- */
[data-pages-views] .pages-list { display: none; }
[data-pages-views].is-list .pages-board { display: none; }
[data-pages-views].is-list .pages-list { display: table; }

/* ---- List view: a real table, group-coloured like the board ---- */
.pages-list {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
/* Match the All-sites (table.sites) styling. */
.pages-list thead th {
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  background: #FAFBFC;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border-default);
  white-space: nowrap;
}
.pages-list thead th:last-child { width: 1%; }
.pages-list tbody td {
  padding: 14px 20px;
  vertical-align: middle;
  border-bottom: 1px solid var(--border-default);
  white-space: nowrap;
}
.pages-list tbody tr:last-child td { border-bottom: 0; }
.pages-list tbody td.pl-page { white-space: normal; width: auto; }
.pages-list tbody tr.plrow:hover td { background: #FFF8F5; }

/* Drag-to-reorder cues (table view). Each row has a grip handle on the left;
   grab it to drag. The dragged row dims and the drop target shows an orange
   line along its top edge. */
.pl-grip {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  margin-left: -6px;
  color: var(--navy-40, #9aa1b0);
  cursor: grab;
  opacity: 0.3;
  transition: opacity 120ms ease, color 120ms ease;
}
.pl-grip svg { fill: currentColor; display: block; }
.pages-list tbody tr.plrow:hover .pl-grip { opacity: 1; color: var(--ofload-orange); }
.pages-list tbody tr.plrow.dragging { opacity: 0.5; }
.pages-list tbody tr.plrow.dragging .pl-grip,
.pl-grip:active { cursor: grabbing; }
.pages-list tbody tr.plrow.drop-above td { box-shadow: 0 -2px 0 var(--ofload-orange) inset; }

/* Row hover is the plain #FFF8F5 above, matching the All-sites table on the
   dashboard. There used to be a per-family tint here (each family drawn in its
   own colour from GROUP_HUES), but with equal specificity it always beat the
   neutral hover, so every row appeared to hover a different colour — and on a
   flat site, where each page is a family of one, it signalled nothing. Group
   scope is still shown where it actually matters: while dragging, below. */

/* Scope cues while dragging in the TABLE: the siblings you can drop between
   glow with an orange band + edge; everything out of scope dims so it's clear
   you're confined to one group. */
.pages-list tbody tr.plrow.reorder-sibling td { background: rgba(216, 85, 89, 0.12); }
.pages-list tbody tr.plrow.reorder-sibling td:first-child { box-shadow: inset 3px 0 0 var(--ofload-orange); }
.pages-list tbody tr.plrow.reorder-locked td { opacity: 0.3; }

/* ---- Folder (board) view: grip handles + drag/scope cues ---- */
.pcard-grip, .pchild-grip {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 12px;
  color: var(--navy-40, #9aa1b0);
  cursor: grab;
  opacity: 0.3;
  transition: opacity 120ms ease, color 120ms ease;
}
.pcard-grip svg, .pchild-grip svg { fill: currentColor; display: block; }
.pgroup:hover .pcard-grip,
.pchild:hover .pchild-grip { opacity: 1; color: var(--ofload-orange); }
.pgroup.dragging, .pchild.dragging { opacity: 0.5; }
.pgroup.dragging .pcard-grip, .pchild.dragging .pchild-grip { cursor: grabbing; }
/* Drop target: groups tile in a grid (line on the left edge = insert before);
   children stack vertically (line on the top edge). */
.pages-board .pgroup.drop-above { box-shadow: -3px 0 0 var(--ofload-orange); }
.pages-board .pchild.drop-above { box-shadow: 0 -2px 0 var(--ofload-orange) inset; }
/* Scope cues: valid sibling drop-zone glows, out-of-scope items dim. */
.pages-board.is-reordering .pgroup.reorder-locked,
.pages-board.is-reordering .pchild.reorder-locked { opacity: 0.35; }
.pages-board .pgroup.reorder-sibling { outline: 2px dashed rgba(216, 85, 89, 0.45); outline-offset: 3px; }
.pages-board .pchild.reorder-sibling { background: rgba(216, 85, 89, 0.07); border-radius: 6px; }

/* No per-row tints — plain white rows like the All-sites table. */
.pages-list tr.plrow-home td { background: transparent; }
.pages-list tr.plrow.is-external td { background: transparent; }
.pages-list tr.plrow.is-hidden td { opacity: 0.6; }

/* Name cell: monogram + name/url, indented by depth. */
.pl-namecell { display: flex; align-items: center; gap: 11px; padding-left: calc(var(--depth, 0) * 22px); }
.pl-mono {
  flex: none; width: 34px; height: 34px; border-radius: 9px;
  display: grid; place-items: center;
  font-size: 14px; font-weight: 800; line-height: 1;
  background: rgba(1, 10, 38, 0.06); color: var(--ofload-navy);
}
.pl-mono.home { background: rgba(240, 86, 55, 0.12); color: var(--ofload-orange-hover); }
.pages-list tr.plrow.is-child .pl-mono { background: rgba(1, 10, 38, 0.04); color: var(--navy-60); }
.pl-tx { min-width: 0; }
.pl-name { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.pl-name .pcard-title { font-size: 14.5px; }
.pl-updated { font-size: 12.5px; }
.pl-by { font-size: 11.5px; margin-top: 2px; opacity: 0.85; }
.pl-actions .row-actions { justify-content: flex-end; }

/* Table collapse control. */
.pl-twist { flex: none; width: 22px; display: inline-flex; justify-content: center; }
.pl-toggle {
  width: 22px; height: 22px; padding: 0;
  border: 1px solid var(--border-strong); border-radius: 6px;
  background: #fff; color: var(--text-body);
  display: grid; place-items: center; cursor: pointer;
  transition: transform 140ms ease, background 120ms ease, border-color 120ms ease;
}
.pl-toggle:hover { background: var(--ofload-ice); border-color: var(--ofload-navy); }
.pl-toggle[aria-expanded="false"] { transform: rotate(-90deg); }
.pages-list tr.pl-row-hidden { display: none; }


/* "N inside" count on collapsible parents. */
.pcell-count {
  font-size: 11px;
  font-weight: 600;
  color: var(--navy-60);
  background: rgba(1, 10, 38, 0.05);
  padding: 2px 8px;
  border-radius: 999px;
}

/* Clearer collapse control — a real little button that rotates when closed. */
.pages-cards .page-tree-toggle {
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: 7px;
  border: 1px solid var(--border-strong);
  background: #fff;
  display: grid;
  place-items: center;
  font-size: 11px;
  color: var(--text-body);
  cursor: pointer;
  transition: transform 120ms ease, background 120ms ease, border-color 120ms ease;
}
.pages-cards .page-tree-toggle:hover { background: var(--ofload-ice); border-color: var(--ofload-navy); }
.pages-cards .page-tree-toggle.is-collapsed { transform: rotate(-90deg); }

.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: #555555;
  box-shadow: none;
}
.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: #555555; box-shadow: none; }
.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: 8px;
}
.privacy-picker > legend { display: none; }
.privacy-pill {
  flex: 1 1 190px;
  display: flex; flex-direction: column; gap: 3px;
  padding: 11px 13px 12px;
  border: 1px solid var(--border-default);
  border-radius: 11px;
  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: 650; font-size: 13.5px; color: var(--text-heading);
  padding-right: 22px;
  display: inline-flex; align-items: center; gap: 6px;
}
.privacy-pill-label-icon { font-size: 13px; }
.privacy-pill-blurb {
  font-size: 11.5px; color: var(--text-muted, var(--text-body)); line-height: 1.4;
}

/* Internal vs External (v20.10.x). All tiles sit in one row; each carries a
   small colour-coded kind label + a tint per group so the two audiences read
   at a glance. The orange selected state (above) still wins via
   :not(.is-selected). */
.privacy-pill-kind {
  font-size: 9.5px; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.07em; line-height: 1;
}
.privacy-pill[data-group="internal"] .privacy-pill-kind { color: #3954c4; }
.privacy-pill[data-group="external"] .privacy-pill-kind { color: #a06a02; }
.privacy-pill[data-group="internal"]:not(.is-selected) {
  background: #f6f8ff; border-color: #d3ddf6;
}
.privacy-pill[data-group="external"]:not(.is-selected) {
  background: #fffaf1; border-color: #efdcb4;
}
.privacy-pill[data-group="internal"]:not(.is-selected):hover { border-color: #aebef0; }
.privacy-pill[data-group="external"]:not(.is-selected):hover { border-color: #e6c478; }

/* 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: #555555; 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: 8px 16px;
  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 svg { order: 2; }   /* move the search icon to the right */
.sites-filter-search:focus-within {
  border-color: #555555;
  background: #fff;
}
.sites-filter-search input {
  flex: 1; min-width: 0;
  padding: 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: 8px 32px 8px 16px;
  border-radius: var(--radius-field);
  border: 1px solid var(--border-default);
  color: var(--text-heading);
  max-width: 220px;
  -webkit-appearance: none; appearance: none;
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23555555' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;   /* ~4px of breathing room to the right of the arrow */
}
.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: #555555;
  box-shadow: none;
}
.access-pw-field input::placeholder { color: #AAAAAA; opacity: 1; }
.access-pw-field input[type="date"]::-webkit-datetime-edit { color: #AAAAAA; }
.access-pw-field input[type="date"]:focus::-webkit-datetime-edit { color: var(--text-heading); }
.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(--btn-orange); color: var(--btn-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: 16px;
  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) ------- */
/* Redesigned: full-width responsive card grid (was a cramped side rail).
   Each card carries a "what's inside" description. Compact enough that all
   areas fit in ~2 rows, so options are visible without hunting. */
.overview-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(255px, 1fr));
  gap: 12px;
}
@media (max-width: 560px) {
  .overview-tiles { grid-template-columns: 1fr; }
}

/* "Manage this site" wrapper — now sits right under the header. */
.manage-sections { margin: 4px 0 26px; }
.manage-head { margin: 0 0 14px; }
.manage-head h2 {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 2px;
}
.manage-head p { margin: 0; font-size: 13px; }

/* ---------- Compact site identity header ---------- */
.back-link { margin: 0 0 10px; font-size: 13px; }
.site-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin: 2px 0 22px;
}
.site-hero-name {
  font-size: 22px;
  letter-spacing: -0.01em;
  line-height: 1.2;
  margin: 0 0 6px;
}
.site-hero-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-muted);
}
.site-hero-meta code {
  font-size: 12.5px;
  background: #F3F5F8;
  padding: 1px 6px;
  border-radius: 5px;
  color: var(--text-body);
}
.site-hero-link { color: var(--ofload-orange); display: inline-flex; align-items: center; gap: 4px; }
.site-hero-open { font-weight: 600; }
.site-hero-dot { color: var(--navy-40); }
.site-hero-edit { flex: none; white-space: nowrap; }
.site-hero-edit-btn {
  margin-left: 10px;
  vertical-align: middle;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: 1px solid var(--border-default);
  background: #fff;
  color: var(--navy-60);
  display: inline-grid;
  place-items: center;
  cursor: pointer;
  transition: border-color 120ms ease, color 120ms ease, background 120ms ease;
}
.site-hero-edit-btn:hover { border-color: var(--btn-orange); color: var(--btn-orange); background: #FFF7F4; }
.site-identity-panel { margin: 0 0 20px; padding: 16px 18px; }

/* ---- Two-column site layout: pages (left) + manage rail (right) ---- */
.site-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 20px;
  align-items: start;
  margin-bottom: 24px;
}
@media (max-width: 1080px) { .site-layout { grid-template-columns: 1fr; } }
.site-main { min-width: 0; }

.site-manage-rail {
  background: #fff;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-card);
  box-shadow: var(--elev-1);
  padding: 8px;
  position: sticky;
  top: 16px;
}
.rail-head { padding: 10px 10px 6px; }
.rail-head h2 { font-size: 15px; font-weight: 700; margin: 0; letter-spacing: -0.01em; }
.rail-head p { margin: 2px 0 0; font-size: 12px; }
.rail-group { padding: 4px 0; }
.rail-group + .rail-group { border-top: 1px solid var(--border-default); margin-top: 4px; padding-top: 6px; }
.rail-group-label {
  font-size: 10px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--navy-40); padding: 6px 10px 3px;
}

/* ---- Org-btn + site-note-snip + org-pop: shared across dashboard and site overview ---- */
.site-note-snip {
  display: inline-flex; align-items: center; gap: 5px;
  color: var(--text-muted); font-size: 12px; font-style: italic;
  max-width: 340px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.site-note-snip svg { width: 12px; height: 12px; flex-shrink: 0; opacity: 0.7; font-style: normal; }
.org-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 8px; border-radius: 6px;
  border: 1px solid var(--border-default); background: #fff;
  color: var(--text-muted); font-size: 11.5px; font-weight: 600;
  font-family: inherit; cursor: pointer;
  transition: background var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard);
}
.org-btn:hover { background: var(--ofload-ice); color: var(--text-heading); border-color: var(--border-strong); }
.org-btn svg { width: 12px; height: 12px; }
.org-pop-backdrop { position: fixed; inset: 0; z-index: 60; background: transparent; }
.org-pop {
  position: fixed; z-index: 61; width: 300px; max-width: calc(100vw - 24px);
  background: #fff; border: 1px solid var(--border-default);
  border-radius: 12px; box-shadow: var(--elev-3, 0 12px 32px rgba(1,10,38,0.18));
  padding: 14px;
}
.org-pop[hidden] { display: none; }
.org-pop-title {
  font-size: 12px; font-weight: 700; color: var(--text-heading);
  margin: 0 0 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.org-pop label {
  display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.03em;
  text-transform: uppercase; color: var(--text-muted); margin: 0 0 5px;
}
.org-pop select, .org-pop textarea {
  width: 100%; box-sizing: border-box;
  border: 1px solid var(--border-default); border-radius: 8px;
  padding: 8px 10px; font-family: inherit; font-size: 13px; color: var(--text-heading);
  background: #fff;
}
.org-pop textarea { resize: vertical; min-height: 62px; margin-bottom: 4px; }
.org-pop .org-field + .org-field { margin-top: 12px; }
.org-pop-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
.org-pop-actions .row-btn { padding: 6px 12px; }
.org-pop-save {
  background: var(--ofload-orange); color: #fff; border: 0; border-radius: 8px;
  padding: 6px 14px; font-weight: 700; font-size: 13px; font-family: inherit; cursor: pointer;
}
.org-pop-save:hover { background: var(--ofload-orange-hover); }
.org-pop-cancel {
  background: #fff; border: 1px solid var(--border-default); border-radius: 8px;
  padding: 6px 12px; font-weight: 600; font-size: 13px; color: var(--text-muted);
  font-family: inherit; cursor: pointer;
}
.org-pop-cancel:hover { background: var(--ofload-ice); color: var(--text-heading); }

/* ---- Page note strip — inline "✏ Note" button on page rows ---- */
.page-note-strip { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.pchild .page-note-strip { margin-top: 3px; }

/* ---- Private page note (inline rail section on page-overview) ---- */
.rail-note-group { padding: 6px 10px 10px; }
.page-note-ta {
  width: 100%; box-sizing: border-box;
  min-height: 80px; resize: vertical;
  font-size: 12.5px; line-height: 1.5;
  border: 1px solid var(--border-default);
  border-radius: 6px; padding: 7px 9px;
  background: var(--surface-default, #fff);
  color: var(--text-default);
  font-family: inherit;
  margin-top: 4px;
  transition: border-color 0.15s;
}
.page-note-ta:focus {
  outline: none;
  border-color: var(--accent, #4f46e5);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent, #4f46e5) 15%, transparent);
}
.page-note-status {
  font-size: 10px; font-weight: 400; text-transform: none; letter-spacing: 0;
  color: var(--navy-40); margin-left: 6px; vertical-align: middle;
}

/* ---- Section popout (in-page fragment loader) ---- */
.section-popout {
  border: 1px solid var(--border-default);
  border-radius: 4px;
  padding: 0;
  width: min(1040px, 94vw);
  max-width: 94vw;
  max-height: 88vh;
  box-shadow: var(--elev-4);
  overflow: hidden;
  /* Smooth open/close (fade + slight rise) via allow-discrete transitions. */
  opacity: 0;
  transform: translateY(14px) scale(0.97);
  transition: opacity 340ms var(--ease-standard),
              transform 340ms var(--ease-standard),
              width 260ms var(--ease-standard),
              overlay 340ms var(--ease-standard) allow-discrete,
              display 340ms var(--ease-standard) allow-discrete;
}
.section-popout[open] { opacity: 1; transform: translateY(0) scale(1); }
@starting-style {
  .section-popout[open] { opacity: 0; transform: translateY(14px) scale(0.97); }
}
.section-popout::backdrop {
  background: rgba(1, 10, 38, 0);
  transition: background 340ms var(--ease-standard),
              overlay 340ms var(--ease-standard) allow-discrete,
              display 340ms var(--ease-standard) allow-discrete;
}
.section-popout[open]::backdrop { background: rgba(1, 10, 38, 0.35); }
@starting-style {
  .section-popout[open]::backdrop { background: rgba(1, 10, 38, 0); }
}
.section-popout-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border-default);
  background: #FAFBFC;
}
.section-popout-head h2 { font-size: 18px; font-weight: 400; margin: 0; color: var(--text-heading); }
/* Popout content H1s (loaded from full-page views) match the compact hero title. */
.section-popout-body h1 { font-size: 16px; font-weight: 400; }
.section-popout-head-actions { display: flex; align-items: center; gap: 10px; }
.section-popout-body { padding: 20px 22px; overflow-y: auto; max-height: calc(88vh - 58px); }

/* Privacy "Save site default" — right-aligned bar; becomes a sticky white
   footer strip inside the Sharing popout so it stays visible without scrolling. */
.privacy-save-bar { display: flex; justify-content: flex-end; margin-top: 20px; }
.section-popout-body .privacy-save-bar {
  position: sticky; bottom: -20px; z-index: 5;   /* -20px cancels the body's bottom padding so it sits flush */
  margin: 20px -22px -20px;
  padding: 14px 22px;
  background: #fff;
  border-top: 1px solid var(--border-default);
}
.section-popout-loading { padding: 48px; text-align: center; color: var(--text-muted); }

/* ---- Tabs (used inside section pages / popouts) ---- */
.hub-tabs-nav {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  background: #fff;
  border: 1px solid #eaeaea;
  border-radius: 8px;
  padding: 4px;
  margin-bottom: 20px;
}
.hub-tab {
  appearance: none;
  min-width: 90px;
  height: 36px;
  border: 1px solid transparent;
  background: transparent;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  color: #151515;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all 120ms ease;
}
.hub-tab:hover { color: var(--text-heading); }
.hub-tab.is-on { background: #fff8f5; border-color: #eaeaea; color: var(--btn-orange); }
.hub-tab-count {
  display: inline-grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  font-size: 11px;
  font-weight: 700;
  border-radius: 999px;
  background: rgba(1, 10, 38, 0.06);
  color: var(--navy-60);
}
.hub-tab.is-on .hub-tab-count { background: rgba(240, 86, 55, 0.14); color: var(--btn-orange-hover); }

.scope-note {
  background: #F6F8FB;
  border: 1px solid var(--border-default);
  border-radius: 10px;
  padding: 12px 15px;
  font-size: 13px;
  color: var(--text-body);
}
.scope-note ul { line-height: 1.65; margin-top: 4px; }

/* ---- Manage-section blocks: flat sections inside a rail popout / section
   page, replacing the old .section-card accordions. Matches _tab-sharing's
   flat h3 + scope-note layout so every rail section reads the same. ---- */
.mng-block + .mng-block {
  margin-top: 22px;
  padding-top: 22px;
  border-top: 1px solid var(--border-default);
}
.mng-h {
  margin: 0 0 10px;
  font-size: 15px;
  font-weight: 700;
  color: var(--text-heading);
  letter-spacing: -0.01em;
  display: flex; align-items: center; gap: 8px;
}
.mng-h .section-count {
  font-size: 11.5px; font-weight: 700; color: var(--navy-60);
  background: rgba(1, 10, 38, 0.06); padding: 2px 9px; border-radius: 999px;
}
.mng-sub { margin: 0 0 12px; font-size: 13px; color: var(--text-muted); }

/* ---- Regular-user dashboard (matches mockups/user-dashboard.html) ---- */
.usites-group { margin-bottom: 34px; }
.usites-group-head { display: flex; align-items: center; gap: 12px; margin: 0 0 16px 2px; }
.usites-group-label { font-size: 12px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--navy-60); white-space: nowrap; }
.usites-group-count { font-size: 11.5px; font-weight: 700; color: var(--navy-60); background: rgba(1, 10, 38, 0.06); padding: 2px 9px; border-radius: 999px; }
.usites-rule { flex: 1; height: 1px; background: var(--border-default); }

.usites-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(258px, 1fr)); gap: 16px; }

.usite-card {
  position: relative;
  display: flex; flex-direction: column; gap: 14px;
  background: #fff; border: 1px solid var(--border-default); border-radius: var(--radius-card);
  padding: 18px; box-shadow: var(--elev-1);
  text-decoration: none; color: inherit;
  transition: transform var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast), border-color var(--dur-fast);
}
.usite-card:hover { transform: translateY(-3px); box-shadow: var(--elev-3); border-color: var(--border-strong); color: inherit; }

.usite-open-hint { position: absolute; top: 16px; right: 16px; color: var(--navy-40); opacity: 0; transition: opacity var(--dur-fast); }
.usite-open-hint svg { width: 15px; height: 15px; }
.usite-card:hover .usite-open-hint { opacity: 1; }

.usite-top { display: flex; align-items: center; gap: 12px; }
.usite-mono { flex: none; width: 46px; height: 46px; border-radius: 11px; display: grid; place-items: center; font-size: 19px; font-weight: 800; color: #fff; }
.usite-mono.hue-0 { background: var(--ofload-navy); }
.usite-mono.hue-1 { background: var(--ofload-orange); }
.usite-mono.hue-2 { background: var(--success); }
.usite-mono.hue-3 { background: var(--ofload-forest); color: var(--ofload-navy); }
.usite-tx { min-width: 0; }
.usite-name { margin: 0; font-size: 15.5px; font-weight: 700; color: var(--text-heading); line-height: 1.25; letter-spacing: -0.01em; }
.usite-slug { margin-top: 3px; font-size: 12px; color: var(--navy-40); }

.usite-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.usite-updated { font-size: 12px; color: var(--text-muted); }
.usite-shared { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-muted); }
.usite-mini { flex: none; width: 18px; height: 18px; border-radius: 999px; background: var(--ofload-forest); color: var(--ofload-navy); display: grid; place-items: center; font-size: 9px; font-weight: 700; }

.usite-new { align-items: center; justify-content: center; text-align: center; min-height: 152px; border: 1.5px dashed var(--border-strong); background: transparent; box-shadow: none; gap: 8px; color: var(--navy-60); }
.usite-new:hover { border-color: var(--ofload-orange); color: var(--ofload-orange); box-shadow: var(--elev-1); }
.usite-plus { width: 38px; height: 38px; border-radius: 999px; background: rgba(1, 10, 38, 0.05); display: grid; place-items: center; }
.usite-new:hover .usite-plus { background: rgba(240, 86, 55, 0.1); }
.usite-new span:last-child { font-size: 13.5px; font-weight: 600; }

.uchip { display: inline-flex; align-self: flex-start; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; padding: 3px 9px; border-radius: 999px; }
.uchip svg { width: 12px; height: 12px; }
.uchip-everyone { background: rgba(240, 86, 55, 0.14); color: #B23C21; }
.uchip-ofload   { background: #E7EDF6; color: #2C4A7C; }
.uchip-people   { background: rgba(36, 132, 124, 0.12); color: #1C6B64; }
.uchip-pw       { background: #FEF3C7; color: #92400E; }

/* ---- Centered create/form card (New site, etc.) ---- */
.form-card {
  max-width: 660px;
  margin: 4px auto 48px;
  background: #fff;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-card);
  box-shadow: var(--elev-1);
  padding: 28px 30px;
}
.form-card.form-card-wide { max-width: 900px; }
/* `.container` has `margin: 0 auto`, and an auto cross-axis margin on a flex
   item suppresses stretch — so the container shrink-to-fits its content and a
   form card never reaches its max-width unless its content happens to be that
   wide. width: 100% lets it actually hit the 900px cap. */
.container:has(> .form-card-wide) { width: 100%; }
.form-card-title { margin: 0 0 4px; font-size: 26px; }
.form-card-lede { margin: 0 0 22px; font-size: 14px; }
.np-form { display: flex; flex-direction: column; gap: 22px; }
.np-form > .np-field { gap: 8px; display: flex; flex-direction: column; }
.np-actions { display: flex; align-items: center; gap: 14px; margin-top: 2px; }

/* ---------- Site menu items (rendered inside the Manage-site drawer) ---------- */
.site-manage-group {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--navy-40);
  padding: 9px 10px 4px;
}
.site-menu-item {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 10px 12px;
  margin-bottom: 6px;
  border-radius: 10px;
  text-align: left;
  background: #FBFCFD;
  border: 1px solid var(--border-default);
  cursor: pointer;
  color: inherit;
  text-decoration: none;
  transition: background 120ms ease, border-color 120ms ease, box-shadow 120ms ease, transform 120ms ease;
}
.site-menu-item:last-child { margin-bottom: 0; }
.site-menu-item:hover {
  background: #fff;
  border-color: var(--border-strong);
  box-shadow: var(--elev-1);
  transform: translateY(-1px);
  color: inherit;
}
.site-menu-ico {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  background: rgba(1, 10, 38, 0.05);
  color: var(--ofload-navy);
}
.site-menu-ico svg { width: 16px; height: 16px; }
.site-menu-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.site-menu-label { font-size: 13.5px; font-weight: 600; color: var(--text-heading); }
.site-menu-sub { font-size: 12px; color: var(--text-muted); line-height: 1.35; margin-top: 1px; }
.site-menu-count { flex: none; align-self: center; font-size: 11px; color: var(--text-muted); white-space: nowrap; }
.site-manage-sep { height: 1px; background: var(--border-default); margin: 6px 4px; }
.site-menu-item-danger .site-menu-ico { background: rgba(102, 0, 1, 0.08); color: #660001; }
.site-menu-item-danger:hover { background: #FFF4F1; }
.site-menu-item-danger .site-menu-label { color: #660001; }

/* ---------- Edge drawers (left = Live preview, right = Manage site) ---------- */
.edge-drawer {
  position: fixed;
  inset: 0;
  z-index: 80;
  pointer-events: none;
  transition: background 200ms ease;
}
.edge-drawer.is-open {
  pointer-events: auto;
  background: rgba(1, 10, 38, 0.34);
}

/* Prominent pull-out handles pinned to the screen edge. */
.edge-handle {
  position: fixed;
  top: 50%;
  pointer-events: auto;
  writing-mode: vertical-rl;
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: 22px 13px;
  color: #fff;
  border: 0;
  cursor: pointer;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  box-shadow: var(--elev-3);
  transition: transform 160ms var(--ease-standard), background 140ms ease, box-shadow 140ms ease, opacity 160ms ease;
}
.edge-handle svg { width: 17px; height: 17px; }
.edge-handle-caret { opacity: 0.95; }
.edge-handle--left {
  left: 0;
  border-radius: 0 16px 16px 0;
  background: var(--ofload-navy);
  transform: translateY(-50%);
  animation: edgeNudgeL 2.6s var(--ease-standard) infinite;
}
.edge-handle--right {
  right: 0;
  border-radius: 16px 0 0 16px;
  background: var(--ofload-orange);
  transform: translateY(-50%);
  animation: edgeNudgeR 2.6s var(--ease-standard) infinite;
}
.edge-handle--left:hover  { background: #0A1533; animation: none; transform: translateY(-50%) translateX(8px); box-shadow: var(--elev-4); }
.edge-handle--right:hover { background: var(--ofload-orange-hover); animation: none; transform: translateY(-50%) translateX(-8px); box-shadow: var(--elev-4); }
@keyframes edgeNudgeL { 0%, 100% { transform: translateY(-50%); } 50% { transform: translateY(-50%) translateX(6px); } }
@keyframes edgeNudgeR { 0%, 100% { transform: translateY(-50%); } 50% { transform: translateY(-50%) translateX(-6px); } }
.edge-drawer.is-open .edge-handle { opacity: 0; pointer-events: none; animation: none; }
@media (prefers-reduced-motion: reduce) {
  .edge-handle--left, .edge-handle--right { animation: none; }
}

.edge-panel {
  position: fixed;
  top: 0;
  bottom: 0;
  width: min(460px, 92vw);
  background: #fff;
  box-shadow: var(--elev-4);
  display: flex;
  flex-direction: column;
  pointer-events: auto;
  transition: transform 240ms var(--ease-standard);
}
.edge-panel--left  { left: 0;  transform: translateX(-100%); }
.edge-panel--right { right: 0; transform: translateX(100%); }
.edge-drawer.is-open .edge-panel { transform: translateX(0); }
.edge-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--border-default);
}
.edge-panel-title { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.edge-panel-title strong { font-size: 15px; color: var(--text-heading); }
.edge-panel-title .muted { font-size: 12px; }
.edge-close {
  flex: none;
  background: none;
  border: 0;
  font-size: 18px;
  color: var(--text-muted);
  cursor: pointer;
  line-height: 1;
  padding: 3px 7px;
  border-radius: 6px;
}
.edge-close:hover { background: #F4F6F9; color: var(--text-heading); }
.edge-panel-body { flex: 1; display: flex; flex-direction: column; min-height: 0; overflow-y: auto; }
.edge-panel-body.is-menu { display: block; padding: 8px; }

/* Live preview body specifics */
.lp-toolbar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 18px;
  border-bottom: 1px solid var(--border-default);
}
.lp-frame { flex: 1; width: 100%; border: 0; background: #fff; }

.overview-tile {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 15px 16px;
  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: 14.5px;
  font-weight: 700;
  color: var(--text-heading);
  line-height: 1.25;
}
.tile-desc {
  font-size: 12.5px;
  color: var(--text-muted);
  line-height: 1.4;
  margin-top: 3px;
}
.tile-meta {
  font-size: 11.5px;
  color: var(--text-body);
  line-height: 1.45;
  margin-top: 6px;
  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;
  align-self: center;
  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(--btn-orange); color: var(--btn-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: 'Open Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 15px;
  font-weight: 400;
  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;
}

/* ============================================================
   Pill buttons — every action / CTA button uses a 100px radius.
   Appended last so it wins source-order over earlier definitions.
   Segmented toggles (.site-mode-btn, .people-view-btn), tabs and
   dropdown-menu rows are intentionally left with their own radius.
   ============================================================ */
.btn,
.button,
button[type="submit"],
.btn-compact,
.nav-signin,
.nav-logout,
.action-btn,
.row-btn,
.row-btn-open,
.row-btn-edit,
.row-btn-disabled,
.open-link,
.google-btn,
.gate-sso-btn,
.kebab-btn,
.site-hero-edit-btn,
.user-card-btn,
.tabs .help-btn {
  border-radius: 100px;
}

/* ============================================================
   Dropdown / menu item text is navigation "sub text" — keep it on
   Open Sans even when the item is a <button> (the global button →
   Lato rule above would otherwise catch these menu buttons).
   ============================================================ */
.nav-tools-menu a,
.kebab-menu a,
.kebab-menu button,
.site-menu-item {
  font-family: var(--font-body);
}

/* ============================================================
   New Site page — privacy cards, upload box, actions.
   All text inside privacy boxes is Open Sans; cards + inputs 4px.
   ============================================================ */
.ns-lede { margin: 2px 0 12px; color: var(--text-muted); font-size: 13.5px; }

/* Inputs on this form → 4px radius */
#ns-form input[type="text"],
#ns-form input[type="email"],
#ns-form input[type="password"] { border-radius: 4px; }

.ns-privacy { display: flex; flex-direction: column; gap: 12px; }
.ns-privacy, .ns-privacy * { font-family: var(--font-body); }  /* Open Sans everywhere in the boxes */

.ns-card {
  border: 1px solid var(--border-default);
  border-radius: 4px;
  background: #fff;
  padding: 15px 18px;
  transition: border-color 120ms ease, background 120ms ease, box-shadow 120ms ease;
}
.ns-card-main {
  display: grid; grid-template-columns: auto auto 1fr; align-items: start; gap: 12px;
  cursor: pointer; margin: 0;
}
.ns-radio { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.ns-radio-dot {
  width: 18px; height: 18px; margin-top: 2px; border-radius: 50%;
  border: 2px solid #c8cdd6; background: #fff; flex: none; position: relative;
  transition: border-color 120ms ease;
}
.ns-card.is-selected .ns-radio-dot { border-color: var(--ofload-orange); }
.ns-card.is-selected .ns-radio-dot::after {
  content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--ofload-orange);
}
.ns-card-icon { color: var(--text-heading); margin-top: 1px; }
.ns-card-icon svg { width: 20px; height: 20px; display: block; }
.ns-card-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ns-card-title { font-size: 15px; font-family: var(--font-display); font-weight: 600; color: var(--text-heading); }
.ns-card-desc { font-size: 13px; color: var(--text-muted); line-height: 1.45; }
.ns-card-note { display: inline-flex; align-items: center; gap: 5px; margin-top: 4px; font-size: 12.5px; color: #9a7b2e; }
.ns-tag {
  display: inline-block; margin-left: 6px; vertical-align: middle;
  font-size: 10px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  padding: 2px 8px; border-radius: 4px; background: #FAEAEB; color: #851E22;
}

/* Selected — signature-colour 1px border + white bg */
.ns-card.is-selected { border-color: var(--ofload-orange); background: #fff; }

/* Card body — revealed only when the card is selected */
.ns-card-body { display: none; margin: 14px 0 2px 30px; padding-top: 14px; border-top: 1px solid var(--border-default); }
.ns-card.is-selected .ns-card-body { display: block; }
.ns-card-public .ns-card-body { display: none !important; }

.ns-sub + .ns-sub { margin-top: 16px; }
.ns-sub-label { display: block; font-size: 12.5px; font-weight: 600; color: var(--text-heading); margin-bottom: 8px; }

/* Segmented "which employees?" — Figma component (node 26073:13739) */
.ns-seg { display: inline-flex; gap: 8px; align-items: center; background: #fff; border: 1px solid #eaeaea; border-radius: 8px; padding: 4px; }
.ns-seg-btn {
  min-width: 90px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 600;
  padding: 8px 12px; border-radius: 6px; border: 1px solid transparent;
  background: transparent; color: #151515; cursor: pointer;
  transition: all 120ms ease;
}
.ns-seg-btn.is-on { background: #fff8f5; border-color: #eaeaea; color: var(--btn-orange); }

/* Emails editor */
.ns-emails[hidden] { display: none; }
.ns-emails { margin-top: 10px; }
.ns-email-input { width: 100%; }
.ns-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.ns-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; padding: 3px 4px 3px 10px; border-radius: 4px; background: #f1f3f6; color: var(--text-heading); }
.ns-chip-x { border: 0; background: none; cursor: pointer; font-size: 15px; line-height: 1; color: var(--text-muted); padding: 0 4px; }
.ns-chip-x:hover { color: var(--btn-orange); }

/* Guest password — reveal icon sits inside the input */
.ns-pw-wrap { position: relative; }
.ns-pw-input { width: 100%; padding-right: 44px; }
.ns-pw-eye {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center;
  border: 0; background: none; border-radius: 6px; cursor: pointer; color: var(--text-muted);
}
.ns-pw-eye:hover { color: var(--text-heading); }
.ns-pw-eye svg { width: 17px; height: 17px; }
.ns-pw-eye.is-on { color: var(--btn-orange); }
.ns-hint { display: block; margin-top: 6px; font-size: 12px; }

/* Info tooltip beside "Project file" */
.ns-info { position: relative; display: inline-flex; align-items: center; vertical-align: middle; margin-left: 6px; color: var(--text-muted); cursor: help; }
.ns-info svg { width: 15px; height: 15px; }
.ns-info:hover, .ns-info:focus { color: var(--ofload-orange); outline: none; }
.ns-tooltip {
  position: absolute; left: -8px; top: calc(100% + 9px); z-index: 40;
  width: 320px; display: none; flex-direction: column; gap: 5px;
  background: var(--ofload-navy); color: #fff; padding: 12px 14px; border-radius: 8px;
  font-family: var(--font-body); font-weight: 400; font-size: 12px; line-height: 1.5; text-align: left;
  box-shadow: 0 10px 26px rgba(1,10,38,0.28);
}
.ns-tooltip::before { content: ""; position: absolute; top: -5px; left: 12px; width: 10px; height: 10px; background: var(--ofload-navy); transform: rotate(45deg); }
.ns-tooltip strong { font-size: 12.5px; margin-bottom: 2px; }
.ns-tooltip code { background: rgba(255,255,255,0.16); color: #fff; }
.ns-info:hover .ns-tooltip, .ns-info:focus .ns-tooltip { display: flex; }

/* Upload dropzone — matches the Figma component */
.ns-dropzone {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 5px;
  padding: 32px 24px; border: 1.5px dashed #c8cdd6; border-radius: 4px; background: #fff;
  cursor: pointer; transition: background 140ms ease, border-color 140ms ease;
}
.ns-dropzone input[type="file"] { display: none; }
.ns-dropzone-icon { color: var(--text-heading); }
.ns-dropzone-icon svg { width: 26px; height: 26px; display: block; }
.ns-dropzone-title { font-size: 15px; font-weight: 700; color: var(--text-heading); margin-top: 6px; }
.ns-dropzone-hint { font-size: 13px; color: var(--text-muted); }
.ns-dropzone-btn {
  margin-top: 12px; display: inline-flex; align-items: center; justify-content: center;
  padding: 8px 28px; border-radius: 100px; border: 1px solid var(--btn-orange);
  color: var(--btn-orange); font-family: var(--font-body); font-weight: 400; font-size: 14px;
  background: #fff; transition: all 120ms ease;
}
.ns-dropzone.is-drag { background: #FCF1F1; border-color: var(--btn-orange); }
.ns-dropzone.is-drag .ns-dropzone-btn { background: var(--btn-orange); color: #fff; }
.ns-dropzone-filename { margin-top: 10px; font-size: 12.5px; color: var(--ofload-orange); font-weight: 600; }

/* + Add version note — text action that reveals Title + Description */
.ns-addnote {
  margin-top: 12px; display: inline-flex; align-items: center; gap: 6px;
  background: none; border: 0; padding: 4px 0; cursor: pointer;
  color: var(--text-body); font-family: var(--font-body); font-weight: 400; font-size: 13.5px;
}
.ns-addnote:hover { color: var(--text-heading); }
.ns-addnote-arrow { display: inline-flex; }
.ns-addnote-arrow svg { width: 14px; height: 14px; transition: transform 140ms ease; }
.ns-addnote[aria-expanded="true"] .ns-addnote-arrow svg { transform: rotate(90deg); }
.ns-vn[hidden] { display: none; }
.ns-vn { margin-top: 12px; display: flex; flex-direction: column; gap: 14px; }
.ns-vn-field label { display: block; font-size: 13px; font-weight: 600; color: var(--text-heading); margin-bottom: 6px; }
.ns-vn-field input, .ns-vn-field textarea { width: 100%; border-radius: 4px; }
.ns-vn-field textarea { resize: vertical; font-family: var(--font-body); }

/* Actions — bottom-right; Cancel is a tertiary text button */
.ns-actions { display: flex; justify-content: flex-end; align-items: center; gap: 16px; margin-top: 26px; }
.ns-cancel {
  font-family: var(--font-body); font-weight: 400; font-size: 14px;
  color: var(--btn-orange); background: none; border: 0; padding: 8px 4px; cursor: pointer; text-decoration: none;
}
.ns-cancel:hover { color: var(--btn-orange-hover); }

/* Trash icon button (e.g. remove a site manager). !important overrides the
   aggressive button[type=submit] pill/secondary styling for this icon utility. */
.ns-trash-btn {
  display: inline-flex !important; align-items: center; justify-content: center;
  width: 32px !important; height: 32px !important; min-width: 0 !important; padding: 0 !important;
  border: 0 !important; background: none !important; border-radius: 6px !important; box-shadow: none !important;
  color: var(--btn-orange) !important; cursor: pointer; transition: all 120ms ease;
}
.ns-trash-btn svg { width: 16px !important; height: 16px !important; }
.ns-trash-btn:hover { color: var(--btn-orange-hover) !important; background: rgba(240, 86, 55, 0.08) !important; }