/* =============================================================================
   Alston Moor Health — site stylesheet
   Single file. CSS variables for palette and typography. No build step.
   ============================================================================= */

:root {
  /* Palette — Alston Moor */
  --heather: #7B5A8C;
  --heather-deep: #5A3F6B;
  --fellside: #3D5A4A;
  --fellside-deep: #2A3F33;
  --sandstone: #D4A574;
  --sandstone-light: #E8C99A;
  --slate: #2D3142;
  --ochre: #E8A552;
  --rust: #C66E47;
  --cream: #FAF6EC;
  --paper: #FFFCF5;
  --ink: #1A1A1A;
  --ink-soft: #4A4A4A;
  --rule: rgba(45, 49, 66, 0.15);

  /* Type */
  --display: 'Fraunces', Georgia, serif;
  --body: 'Lora', Georgia, serif;
  --ui: 'DM Sans', -apple-system, system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: var(--heather-deep); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--rust); }

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin: 0 0 0.5em;
  color: var(--slate);
}

.container { max-width: 1180px; margin: 0 auto; padding: 0 1.5rem; }

/* ---------- Top utility bar ---------- */
.topbar {
  background: var(--slate);
  color: var(--cream);
  font-family: var(--ui);
  font-size: 13px;
  letter-spacing: 0.04em;
}
.topbar .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 0.55rem;
  padding-bottom: 0.55rem;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.topbar a { color: var(--cream); text-decoration: none; }
.topbar a:hover { color: var(--ochre); }
.topbar-meta { opacity: 0.8; }
.topbar-cta { display: flex; gap: 1.5rem; align-items: center; }
.vault-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--ochre);
  color: var(--slate) !important;
  padding: 0.3rem 0.85rem;
  border-radius: 2px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 12px;
}
.vault-link:hover { background: var(--cream); color: var(--slate) !important; }

/* ---------- Masthead ---------- */
.masthead {
  background: var(--cream);
  border-bottom: 1px solid var(--rule);
  position: relative;
  overflow: hidden;
}
.masthead::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(ellipse 600px 200px at 85% 120%, rgba(123, 90, 140, 0.08), transparent 60%),
    radial-gradient(ellipse 800px 250px at 10% 130%, rgba(61, 90, 74, 0.07), transparent 60%);
  pointer-events: none;
}
.masthead .container {
  padding-top: 2.25rem;
  padding-bottom: 1.5rem;
  position: relative;
}
.wordmark {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
}
.wordmark-title {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(2.4rem, 5.5vw, 4rem);
  letter-spacing: -0.02em;
  color: var(--slate);
  margin: 0;
  font-variation-settings: "SOFT" 50, "WONK" 0;
}
.wordmark-title .amp {
  color: var(--heather);
  font-style: italic;
  font-weight: 500;
}
.wordmark-meta {
  font-family: var(--ui);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  text-align: right;
  line-height: 1.4;
}
.wordmark-meta strong { color: var(--slate); display: block; font-weight: 600; }
.masthead-tagline {
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(1rem, 1.6vw, 1.2rem);
  color: var(--ink-soft);
  margin-top: 0.5rem;
  max-width: 60ch;
}

/* ---------- Main nav ---------- */
.mainnav {
  background: var(--paper);
  border-bottom: 2px solid var(--slate);
  position: sticky;
  top: 0;
  z-index: 50;
  box-shadow: 0 1px 0 var(--rule);
}
.mainnav-inner {
  display: flex;
  align-items: stretch;
  gap: 0;
  flex-wrap: wrap;
}
.mainnav a {
  font-family: var(--ui);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--slate);
  text-decoration: none;
  padding: 1rem 1.25rem;
  border-right: 1px solid var(--rule);
  transition: background 0.15s, color 0.15s;
}
.mainnav a:first-child { border-left: 1px solid var(--rule); }
.mainnav a:hover { background: var(--slate); color: var(--cream); }
.mainnav a.current { background: var(--heather); color: var(--cream); }

/* ---------- Hero ---------- */
.hero {
  background: linear-gradient(180deg, var(--paper) 0%, var(--cream) 100%);
  padding: 4rem 0 3rem;
  position: relative;
  overflow: hidden;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 3rem;
  align-items: center;
}
.hero-eyebrow {
  font-family: var(--ui);
  font-size: 13px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--rust);
  font-weight: 600;
  margin-bottom: 1rem;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}
.hero-eyebrow::before {
  content: '';
  width: 32px;
  height: 1px;
  background: var(--rust);
}
.hero h1 {
  font-size: clamp(2.4rem, 5vw, 4rem);
  font-weight: 700;
  line-height: 1.05;
  margin-bottom: 1.5rem;
  color: var(--slate);
}
.hero h1 em {
  font-style: italic;
  color: var(--heather);
  font-weight: 500;
}
.hero p.lede {
  font-size: 1.2rem;
  line-height: 1.55;
  color: var(--ink-soft);
  margin-bottom: 2rem;
  max-width: 50ch;
}
.hero-ctas { display: flex; gap: 1rem; flex-wrap: wrap; }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.85rem 1.5rem;
  font-family: var(--ui);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-decoration: none;
  border-radius: 2px;
  transition: transform 0.15s, box-shadow 0.15s, background 0.15s;
  border: 2px solid transparent;
  cursor: pointer;
}
.btn-primary { background: var(--heather); color: var(--cream); }
.btn-primary:hover { background: var(--heather-deep); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(90, 63, 107, 0.25); color: var(--cream); }
.btn-secondary { background: transparent; color: var(--slate); border-color: var(--slate); }
.btn-secondary:hover { background: var(--slate); color: var(--cream); }
.btn-ochre { background: var(--ochre); color: var(--slate); }
.btn-ochre:hover { background: var(--cream); color: var(--slate); transform: translateY(-1px); }
.btn-arrow::after { content: '→'; font-family: var(--display); }

.hero-visual {
  position: relative;
  aspect-ratio: 4 / 5;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-svg { width: 100%; height: auto; }

/* ---------- Section heading ---------- */
.section { padding: 5rem 0; }
.section-eyebrow {
  font-family: var(--ui);
  font-size: 12px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--rust);
  font-weight: 600;
  margin-bottom: 0.75rem;
  display: block;
}
.section h2 {
  font-size: clamp(1.8rem, 3.5vw, 2.6rem);
  max-width: 28ch;
  margin-bottom: 0.5rem;
}
.section-intro {
  font-family: var(--display);
  font-style: italic;
  font-size: 1.15rem;
  color: var(--ink-soft);
  max-width: 60ch;
  margin-bottom: 3rem;
}

/* ---------- Campaigns ---------- */
.campaigns { background: var(--paper); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.campaign-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border: 1px solid var(--rule);
  background: var(--rule);
}
.campaign-card { background: var(--paper); padding: 2.5rem; position: relative; transition: background 0.2s; }
.campaign-card.heather-block { background: var(--heather); color: var(--cream); }
.campaign-card.fellside-block { background: var(--fellside); color: var(--cream); }
.campaign-card.heather-block h3,
.campaign-card.fellside-block h3 { color: var(--cream); }
.campaign-stamp {
  display: inline-block;
  font-family: var(--ui);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 0.35rem 0.7rem;
  border: 2px solid currentColor;
  border-radius: 2px;
  transform: rotate(-1.5deg);
  margin-bottom: 1.5rem;
  opacity: 0.95;
}
.campaign-card h3 { font-size: clamp(1.6rem, 2.6vw, 2rem); margin-bottom: 0.75rem; line-height: 1.15; }
.campaign-card p { font-size: 1.02rem; line-height: 1.6; margin-bottom: 1.5rem; }
.campaign-card.heather-block p,
.campaign-card.fellside-block p { color: rgba(250, 246, 236, 0.92); }
.campaign-actions {
  display: flex;
  gap: 1.25rem;
  flex-wrap: wrap;
  font-family: var(--ui);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.campaign-actions a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1.5px solid currentColor;
  padding-bottom: 2px;
  transition: opacity 0.15s, transform 0.15s;
}
.campaign-actions a:hover { opacity: 0.7; transform: translateX(2px); }

/* ---------- News ---------- */
/* Columns are minmax(0, 1fr) rather than plain 1fr so the column width
   is not forced wider by an unbreakable run of text (e.g. NBSPs from a
   rich-text paste, or a long URL). overflow-wrap on the children
   handles the case where a single token is wider than the column. */
.news-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; }
.news-item { display: flex; flex-direction: column; border-top: 3px solid var(--slate); padding-top: 1.25rem; transition: transform 0.2s; min-width: 0; }
.news-item h3, .news-item p { overflow-wrap: break-word; }
.news-item:hover { transform: translateY(-3px); }
.news-item:nth-child(2) { border-top-color: var(--heather); }
.news-item:nth-child(3) { border-top-color: var(--fellside); }
.news-meta {
  font-family: var(--ui);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 0.5rem;
  display: flex;
  gap: 0.75rem;
  align-items: center;
}
.news-meta .dot { width: 4px; height: 4px; background: currentColor; border-radius: 50%; opacity: 0.5; }
.news-item h3 { font-size: 1.4rem; line-height: 1.2; margin-bottom: 0.75rem; font-weight: 600; }
.news-item h3 a {
  color: var(--slate);
  text-decoration: none;
  background-image: linear-gradient(var(--ochre), var(--ochre));
  background-size: 0% 6px;
  background-position: 0 88%;
  background-repeat: no-repeat;
  transition: background-size 0.3s;
}
.news-item h3 a:hover { background-size: 100% 6px; color: var(--slate); }
.news-item p { color: var(--ink-soft); margin: 0; flex-grow: 1; }
.news-readmore {
  font-family: var(--ui);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  margin-top: 1rem;
  text-decoration: none;
  color: var(--rust);
}
.news-readmore:hover { color: var(--heather-deep); }

/* ---------- Vault preview ---------- */
.vault-section { background: var(--slate); color: var(--cream); position: relative; overflow: hidden; }
.vault-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(45deg, transparent 0, transparent 80px, rgba(232, 165, 82, 0.04) 80px, rgba(232, 165, 82, 0.04) 81px);
  pointer-events: none;
}
.vault-section .container { position: relative; }
.vault-section .section-eyebrow { color: var(--ochre); }
.vault-section h2 { color: var(--cream); }
.vault-section .section-intro { color: rgba(250, 246, 236, 0.75); }
.vault-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: rgba(250, 246, 236, 0.12); border: 1px solid rgba(250, 246, 236, 0.12); }
.vault-doc {
  background: var(--slate);
  padding: 1.5rem;
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
  transition: background 0.15s;
  text-decoration: none;
  color: inherit;
}
.vault-doc:hover { background: rgba(232, 165, 82, 0.08); color: inherit; }
.doc-icon {
  width: 44px;
  height: 56px;
  flex-shrink: 0;
  background: var(--cream);
  color: var(--slate);
  border-radius: 2px;
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 0.4rem;
  font-family: var(--ui);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.doc-icon::before {
  content: '';
  position: absolute;
  top: 0; right: 0;
  border-style: solid;
  border-width: 0 12px 12px 0;
  border-color: transparent var(--paper) transparent transparent;
  filter: drop-shadow(-1px 1px 0 rgba(0,0,0,0.1));
}
.doc-icon.pdf { background: var(--rust); color: var(--cream); }
.doc-icon.doc { background: var(--heather); color: var(--cream); }
.doc-icon.img { background: var(--fellside); color: var(--cream); }
.doc-meta {
  font-family: var(--ui);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ochre);
  margin-bottom: 0.4rem;
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
}
.doc-title { font-family: var(--display); font-size: 1.05rem; font-weight: 500; line-height: 1.3; margin-bottom: 0.4rem; color: var(--cream); }
.doc-summary { font-size: 0.9rem; color: rgba(250, 246, 236, 0.7); line-height: 1.5; margin: 0; }
.vault-cta {
  margin-top: 2.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(250, 246, 236, 0.15);
  flex-wrap: wrap;
  gap: 1rem;
}
.vault-cta-text { font-family: var(--display); font-style: italic; font-size: 1.05rem; color: rgba(250, 246, 236, 0.8); margin: 0; }

/* ---------- Mailing list ---------- */
.signup { background: var(--sandstone); padding: 4rem 0; position: relative; overflow: hidden; }
.signup::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle at 20% 30%, rgba(255,252,245,0.3), transparent 40%); pointer-events: none; }
.signup-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 3rem; align-items: center; position: relative; }
.signup h2 { font-size: clamp(1.8rem, 3.2vw, 2.4rem); color: var(--slate); margin-bottom: 0.5rem; }
.signup p { color: var(--slate); opacity: 0.85; margin-bottom: 0; max-width: 45ch; }
.signup-form { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.signup-form input[type="email"],
.signup-form input[type="text"] {
  flex: 1 1 200px;
  padding: 0.9rem 1rem;
  font-family: var(--ui);
  font-size: 15px;
  border: 2px solid var(--slate);
  background: var(--paper);
  color: var(--ink);
  border-radius: 2px;
}
.signup-form input:focus { outline: none; box-shadow: 0 0 0 3px var(--ochre); }
.signup-form button {
  padding: 0.9rem 1.75rem;
  font-family: var(--ui);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--slate);
  color: var(--cream);
  border: 2px solid var(--slate);
  cursor: pointer;
  transition: background 0.15s;
  border-radius: 2px;
}
.signup-form button:hover { background: var(--heather-deep); border-color: var(--heather-deep); }
.signup-note { font-family: var(--ui); font-size: 12px; color: var(--slate); opacity: 0.7; margin-top: 1rem; }
.signup-note a { color: inherit; text-decoration: underline; }
.signup-form .signup-field { flex: 1 1 200px; display: block; }
.signup-form .signup-field label {
  display: block;
  font-family: var(--ui);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--slate);
  margin-bottom: 0.4rem;
}
.signup-form .signup-field input[type="email"],
.signup-form .signup-field input[type="text"] {
  width: 100%;
  box-sizing: border-box;
  flex: none;
}

/* ---------- Footer ---------- */
footer { background: var(--fellside-deep); color: var(--cream); padding: 4rem 0 2rem; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 3rem; margin-bottom: 3rem; }
footer h4 { font-family: var(--ui); font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ochre); margin-bottom: 1rem; font-weight: 600; }
footer .footer-brand h3 { font-family: var(--display); font-size: 1.6rem; color: var(--cream); margin-bottom: 0.5rem; font-weight: 700; }
footer .footer-brand p { color: rgba(250, 246, 236, 0.7); font-size: 0.95rem; max-width: 32ch; margin: 0; }
footer ul { list-style: none; margin: 0; padding: 0; font-family: var(--ui); font-size: 14px; }
footer ul li { margin-bottom: 0.5rem; }
footer ul a { color: rgba(250, 246, 236, 0.85); text-decoration: none; }
footer ul a:hover { color: var(--ochre); }
.footer-bottom {
  padding-top: 1.5rem;
  border-top: 1px solid rgba(250, 246, 236, 0.15);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--ui);
  font-size: 12px;
  color: var(--cream);
  flex-wrap: wrap;
  gap: 1rem;
}
.footer-bottom a { color: var(--cream); text-decoration: none; }
.footer-bottom a:hover { color: var(--ochre); }
.footer-bottom-links { display: flex; flex-wrap: wrap; gap: 1.75rem; }

/* ---------- Forms (login etc.) ---------- */
.formbox { max-width: 460px; margin: 4rem auto; padding: 2.5rem; background: var(--paper); border: 1px solid var(--rule); border-radius: 4px; }
.formbox h1 { font-size: 2rem; margin-bottom: 0.25rem; }
.formbox .lede { font-family: var(--display); font-style: italic; color: var(--ink-soft); margin-bottom: 1.75rem; }
.formbox label { display: block; font-family: var(--ui); font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--slate); margin-bottom: 0.4rem; }
.formbox input[type="email"],
.formbox input[type="password"],
.formbox input[type="text"] {
  width: 100%;
  padding: 0.85rem 1rem;
  font-family: var(--ui);
  font-size: 15px;
  border: 2px solid var(--rule);
  background: var(--paper);
  color: var(--ink);
  border-radius: 2px;
  margin-bottom: 1.25rem;
}
.formbox input:focus { outline: none; border-color: var(--heather); box-shadow: 0 0 0 3px rgba(123, 90, 140, 0.15); }
.formbox .btn { width: 100%; justify-content: center; }
.formbox .formerror {
  background: rgba(198, 110, 71, 0.1);
  border-left: 3px solid var(--rust);
  padding: 0.85rem 1rem;
  margin-bottom: 1.25rem;
  font-size: 0.95rem;
  color: var(--slate);
}
.formbox .formnote { font-family: var(--ui); font-size: 12px; color: var(--ink-soft); margin-top: 1rem; text-align: center; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .hero-grid, .campaign-grid, .news-grid, .vault-grid, .signup-grid, .footer-grid {
    grid-template-columns: 1fr;
  }
  .hero-visual { aspect-ratio: 16 / 9; max-width: 500px; margin: 0 auto; }
  .news-grid { gap: 2.5rem; }
  .vault-grid > .vault-doc:nth-child(odd) { border-bottom: 1px solid rgba(250,246,236,0.12); }
  .footer-grid { gap: 2rem; }
  .mainnav a { padding: 0.75rem 1rem; font-size: 13px; }
  .section { padding: 3.5rem 0; }
  .wordmark { gap: 1rem; }
  .wordmark-meta { text-align: left; }
}
@media (max-width: 600px) {
  .topbar-meta { display: none; }
  .topbar .container { justify-content: flex-end; }
}

/* ---------- Reveal-on-load ---------- */
.reveal { opacity: 0; transform: translateY(12px); animation: reveal 0.7s 0.1s ease-out forwards; }
.reveal-delay-1 { animation-delay: 0.2s; }
.reveal-delay-2 { animation-delay: 0.35s; }
@keyframes reveal { to { opacity: 1; transform: translateY(0); } }
/* =============================================================================
   Phase 2 additions
   Append to existing site.css. Uses the existing variables and patterns —
   no overrides of Phase 1 rules.
   ============================================================================= */

/* ---------- Long-form prose blocks ---------- */
.prose { max-width: 70ch; }
.prose h3 {
  font-size: 1.35rem;
  margin-top: 2rem;
  margin-bottom: 0.6rem;
  color: var(--slate);
}
.prose p { margin: 0 0 1rem; }
.prose ul, .prose ol { margin: 0 0 1rem; padding-left: 1.4rem; }
.prose ul li { margin-bottom: 0.4rem; }
.prose blockquote.quote-block {
  margin: 1.5rem 0;
  padding: 1rem 1.4rem;
  border-left: 3px solid var(--heather);
  background: var(--cream);
  font-family: var(--display);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--slate);
}
.prose .callout {
  margin: 2rem 0 0;
  padding: 1.25rem 1.5rem;
  background: var(--cream);
  border-left: 3px solid var(--ochre);
  border-radius: 2px;
}
.prose .callout p:last-child { margin-bottom: 0; }
.prose .placeholder-note {
  font-family: var(--ui);
  font-size: 0.95rem;
  color: var(--ink-soft);
  font-style: italic;
  padding: 0.85rem 1rem;
  background: var(--cream);
  border-left: 2px solid var(--rule);
  border-radius: 2px;
}
.prose .contact-list { list-style: none; padding-left: 0; margin-bottom: 1.5rem; }
.prose .contact-list li {
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--rule);
}
.prose .contact-list li:last-child { border-bottom: 0; }

/* ---------- Heather and fellside light blocks (for long-form pages) ---------- */
.heather-block-light { background: var(--heather-deep); color: var(--cream); }
.heather-block-light h2 { color: var(--cream); }
.fellside-block-light { background: var(--fellside-deep); color: var(--cream); }
.fellside-block-light h2 { color: var(--cream); }
.prose-on-dark { color: rgba(250, 246, 236, 0.92); }
.prose-on-dark h3 { color: var(--cream); }
.prose-on-dark blockquote.quote-block {
  background: rgba(250, 246, 236, 0.06);
  border-left-color: var(--ochre);
  color: var(--cream);
}

/* ---------- Contact form (wider variant of formbox) ---------- */
.formbox-wide { max-width: 720px; margin: 1.5rem 0 0; }
.formbox-wide textarea {
  width: 100%;
  padding: 0.85rem 1rem;
  font-family: var(--ui);
  font-size: 15px;
  border: 2px solid var(--rule);
  background: var(--paper);
  color: var(--ink);
  border-radius: 2px;
  margin-bottom: 1.25rem;
  resize: vertical;
  min-height: 12rem;
}
.formbox-wide textarea:focus {
  outline: none;
  border-color: var(--heather);
  box-shadow: 0 0 0 3px rgba(123, 90, 140, 0.15);
}
.formbox-wide .formerror div { padding: 0.15rem 0; }
.honeypot {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---------- News post page ---------- */
.news-post { max-width: 70ch; }
.news-post-eyebrow {
  font-family: var(--ui);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--rust);
  margin-bottom: 1rem;
}
.news-post-eyebrow a { color: inherit; text-decoration: none; }
.news-post-eyebrow a:hover { color: var(--heather-deep); }
.news-post-title {
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  margin-bottom: 0.75rem;
  max-width: none;
}
.news-post-meta { margin-bottom: 1.5rem; }
.news-post-lede {
  font-family: var(--display);
  font-style: italic;
  font-size: 1.2rem;
  line-height: 1.5;
  color: var(--ink-soft);
  margin-bottom: 2rem;
  max-width: none;
}
.news-post-body { margin-bottom: 2.5rem; }
.news-post-body p { margin: 0 0 1rem; }
.news-post-back { margin-top: 2rem; }

/* ---------- Pagination ---------- */
.pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--rule);
  flex-wrap: wrap;
}
.pagination-info {
  font-family: var(--ui);
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  text-transform: uppercase;
}

/* ---------- Documents page ---------- */
.filter-bar {
  display: flex;
  gap: 1.25rem;
  align-items: flex-end;
  flex-wrap: wrap;
  padding: 1.25rem;
  background: var(--cream);
  border: 1px solid var(--rule);
  border-radius: 2px;
  margin-bottom: 1.5rem;
}
.filter-group { display: flex; flex-direction: column; gap: 0.4rem; }
.filter-group label {
  font-family: var(--ui);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--slate);
}
.filter-group select {
  padding: 0.6rem 0.9rem;
  font-family: var(--ui);
  font-size: 14px;
  border: 2px solid var(--rule);
  background: var(--paper);
  color: var(--ink);
  border-radius: 2px;
  min-width: 200px;
}
.filter-group select:focus {
  outline: none;
  border-color: var(--heather);
  box-shadow: 0 0 0 3px rgba(123, 90, 140, 0.15);
}
.filter-actions { flex-direction: row; gap: 1rem; align-items: center; }
.filter-clear {
  font-family: var(--ui);
  font-size: 13px;
  color: var(--ink-soft);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.filter-clear:hover { color: var(--rust); }

.results-count {
  font-family: var(--ui);
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  margin-bottom: 1.5rem;
}

.document-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: 2px;
}
.document-item {
  background: var(--paper);
  padding: 1.25rem 1.5rem;
}
.document-item .document-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  margin-bottom: 0.6rem;
}
.tag {
  display: inline-block;
  font-family: var(--ui);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.3rem 0.7rem;
  border-radius: 2px;
}
.tag-type { background: var(--slate); color: var(--cream); }
.tag-campaign { background: var(--heather); color: var(--cream); }
/* Campaign-specific tag colours. The base .tag-campaign rule above acts
 * as the fallback for unknown campaigns; these override it for known
 * campaigns. Underscores in the keys are translated to hyphens by the
 * templates to follow standard CSS naming. */
.tag-campaign-grisedale-croft         { background: var(--fellside); color: var(--cream); }
.tag-campaign-alston-cottage-hospital { background: var(--heather);  color: var(--cream); }
.tag-campaign-both                    { background: var(--rust);     color: var(--cream); }
.tag-campaign-general                 { background: var(--slate);    color: var(--cream); }
.document-date {
  font-family: var(--ui);
  font-size: 12px;
  color: var(--ink-soft);
  letter-spacing: 0.04em;
}
.document-title {
  font-family: var(--display);
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1.3;
  margin: 0 0 0.4rem;
  color: var(--slate);
}
.document-description {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.96rem;
}

/* ---------- Responsive — Phase 2 ---------- */
@media (max-width: 700px) {
  .filter-bar { gap: 0.75rem; padding: 1rem; }
  .filter-group select { min-width: 100%; }
  .filter-actions { flex-basis: 100%; }
  .pagination { justify-content: center; }
}

/* ---------- Hero image (Phase 2 — replaces inline SVG) ---------- */
.hero-img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 2px;
}
/* When the hero contains an image, let the image dictate its own height
   instead of forcing a fixed aspect ratio (the original SVG was locked to 4:5;
   the image wants to flow at its natural ratio on every viewport). */
.hero-visual:has(.hero-img) { aspect-ratio: auto; }

/* ---------- Embedded family-evidence form (Get Involved §2) ---------- */
.evidence-form {
  margin-top: 2rem;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: 0.5rem;
  /* Slight inner padding so the iframe never touches the border. */
}
.evidence-form-frame {
  width: 100%;
  height: 1400px;          /* tall enough for the longest page of the form */
  border: 0;
  display: block;
  background: var(--paper);
}
@media (max-width: 700px) {
  .evidence-form-frame { height: 1700px; } /* fields stack on narrow screens */
}

/* ---------- Home page: bring the gap below the hero up to the same
   rhythm as the gap below the campaigns block. The campaigns section
   was unpadded — we add a small top padding so the spacing under the
   hero matches the spacing under campaigns (≈5rem either side). ---------- */
.campaigns { padding-top: 2rem; }

/* =============================================================================
   Phase 3 additions — the Vault
   ============================================================================= */

/* ---------- Public document detail ---------- */
.document-eyebrow {
  font-family: var(--ui);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--rust);
  margin-bottom: 1rem;
}
.document-eyebrow a { color: inherit; text-decoration: none; }
.document-eyebrow a:hover { color: var(--heather-deep); }

.document-detail-title {
  font-size: clamp(1.6rem, 3.2vw, 2.4rem);
  margin-bottom: 1rem;
  max-width: none;
}
.document-detail-meta {
  margin-bottom: 1.75rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
  align-items: center;
}
.document-detail-description p {
  font-size: 1.05rem;
  line-height: 1.65;
  margin: 0 0 1rem;
  color: var(--ink-soft);
}
.document-detail-file {
  margin-top: 2.5rem;
  padding: 1.5rem;
  background: var(--cream);
  border: 1px solid var(--rule);
  border-radius: 2px;
}
.document-detail-file h3 {
  margin: 0 0 0.5rem;
  font-size: 1.1rem;
}
.document-file-info {
  margin: 0 0 1rem;
}
.document-file-meta {
  display: block;
  font-family: var(--ui);
  font-size: 0.9rem;
  color: var(--ink-soft);
  letter-spacing: 0.04em;
  margin-top: 0.2rem;
}

/* ---------- Vault admin: shared layout ---------- */
.vault-admin .vault-admin-header {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 2rem;
}
.vault-admin .vault-admin-header h2 {
  margin-bottom: 0;
}
.vault-admin-greeting {
  font-family: var(--ui);
  font-size: 13px;
  color: var(--ink-soft);
  margin: 0.5rem 0 0;
  letter-spacing: 0.04em;
}
.vault-admin-greeting a { color: var(--rust); }

.vault-admin-actions { display: flex; gap: 0.75rem; flex-wrap: wrap; }

/* ---------- Vault dashboard ---------- */
.vault-counters {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: 2px;
  margin-bottom: 2rem;
}
.counter {
  background: var(--cream);
  padding: 1.25rem;
  text-align: center;
}
.counter-num {
  display: block;
  font-family: var(--display);
  font-size: 2rem;
  font-weight: 600;
  color: var(--slate);
  line-height: 1;
  margin-bottom: 0.25rem;
}
.counter-lbl {
  font-family: var(--ui);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-weight: 600;
}
@media (max-width: 700px) {
  .vault-counters { grid-template-columns: repeat(2, 1fr); }
}

.vault-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--rule);
  border-radius: 2px;
}
.vault-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--paper);
  font-family: var(--ui);
  font-size: 14px;
}
.vault-table thead {
  background: var(--cream);
  border-bottom: 2px solid var(--rule);
}
.vault-table th {
  text-align: left;
  padding: 0.75rem 1rem;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--slate);
}
.vault-table td {
  padding: 1rem;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
}
.vault-table tbody tr:last-child td { border-bottom: 0; }
.vault-table tbody tr:hover { background: var(--cream); }

.vault-cell-date {
  white-space: nowrap;
  color: var(--ink-soft);
  font-size: 13px;
}
.vault-cell-title strong {
  display: block;
  font-family: var(--display);
  font-weight: 600;
  font-size: 1rem;
  color: var(--slate);
  margin-bottom: 0.2rem;
  overflow-wrap: anywhere;
}
.vault-cell-filename {
  display: block;
  color: var(--ink-soft);
  font-size: 12px;
  overflow-wrap: anywhere;
}
.vault-cell-actions {
  font-size: 13px;
}
.vault-cell-actions a { color: var(--heather-deep); text-decoration: none; }
.vault-cell-actions a:hover { color: var(--rust); }
.vault-cell-actions .vault-action-delete { color: var(--rust); }

.status {
  display: inline-block;
  padding: 0.3rem 0.7rem;
  border-radius: 2px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
/* Status badge colours.
   Public uses a brighter green than --fellside (which stays reserved for the
   Cottage Hospital campaign accent). Private uses a slate-blue lifted from
   --slate (which stays reserved for body text). Draft stays at --ochre.
   Picked May 2026 — Option 2 from the badge-colour review. */
.status-public  { background: #4F7559;             color: var(--cream); }
.status-private { background: #3F5A8C;             color: var(--cream); }
.status-draft   { background: var(--ochre);        color: var(--slate); }

/* ---------- Vault forms (upload, edit) ---------- */
.vault-form { max-width: 720px; }
.vault-field { margin-bottom: 1.5rem; }
.vault-field label {
  display: block;
  font-family: var(--ui);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--slate);
  margin-bottom: 0.4rem;
}
.vault-field .form-req { color: var(--rust); }
.vault-field input[type="text"],
.vault-field input[type="email"],
.vault-field input[type="date"],
.vault-field input[type="file"],
.vault-field select,
.vault-field textarea {
  width: 100%;
  padding: 0.7rem 0.9rem;
  font-family: var(--ui);
  font-size: 15px;
  border: 2px solid var(--rule);
  background: var(--paper);
  color: var(--ink);
  border-radius: 2px;
}
.vault-field textarea { resize: vertical; min-height: 6rem; line-height: 1.5; }
.vault-field input:focus,
.vault-field select:focus,
.vault-field textarea:focus {
  outline: none;
  border-color: var(--heather);
  box-shadow: 0 0 0 3px rgba(123, 90, 140, 0.15);
}
.vault-field input[type="file"] {
  padding: 0.55rem 0.9rem;
  background: var(--cream);
}
.vault-field-help {
  font-family: var(--ui);
  font-size: 12px;
  color: var(--ink-soft);
  margin: 0.4rem 0 0;
  line-height: 1.5;
}
.vault-field-checkbox label {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  text-transform: none;
  letter-spacing: 0;
  font-size: 15px;
  color: var(--ink);
  font-weight: 500;
}
.vault-field-checkbox input[type="checkbox"] {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.vault-grid-two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}
@media (max-width: 700px) {
  .vault-grid-two { grid-template-columns: 1fr; gap: 0; }
}

.vault-field-actions {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
}

.vault-file-info {
  background: var(--cream);
  padding: 1.25rem 1.5rem;
  border: 1px solid var(--rule);
  border-radius: 2px;
  margin-bottom: 2rem;
}
.vault-file-info h3 {
  margin: 0 0 0.5rem;
  font-size: 0.95rem;
  font-family: var(--ui);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-soft);
  font-weight: 600;
}
.vault-file-info p {
  margin: 0;
  color: var(--ink);
  font-size: 14px;
}

/* ---------- Vault delete confirmation ---------- */
.vault-confirm-card {
  max-width: 720px;
  background: var(--cream);
  border: 2px solid var(--rust);
  border-radius: 2px;
  padding: 2rem;
}
.vault-confirm-warn {
  background: rgba(198, 110, 71, 0.1);
  border-left: 3px solid var(--rust);
  padding: 0.85rem 1rem;
  margin: 0 0 1.5rem;
}
.vault-confirm-list {
  list-style: none;
  padding: 0;
  margin: 0 0 2rem;
}
.vault-confirm-list li {
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--rule);
  font-size: 0.95rem;
}
.vault-confirm-list li:last-child { border-bottom: 0; }
.vault-confirm-form {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.btn-rust { background: var(--rust); color: var(--cream); }
.btn-rust:hover { background: var(--heather-deep); color: var(--cream); }

/* ---------- Vault flash messages (after redirects) ---------- */
.vault-flash {
  background: var(--fellside);
  color: var(--cream);
  padding: 0.85rem 1.25rem;
  border-radius: 2px;
  margin-bottom: 1.5rem;
  font-family: var(--ui);
  font-size: 14px;
}

/* ---------- Responsive — Phase 3 ---------- */
@media (max-width: 700px) {
  .vault-admin-header { flex-direction: column; align-items: stretch; }
  .vault-table { font-size: 13px; }
  .vault-table th, .vault-table td { padding: 0.6rem 0.75rem; }
  .vault-cell-actions { white-space: normal; }
}

/* =============================================================================
   Wave 2 additions — Workspace, Tasks, News editor, Users
   ============================================================================= */

/* ---------- Small button variant ---------- */
.btn.btn-sm {
  padding: 0.4rem 0.8rem;
  font-size: 12px;
  letter-spacing: 0.04em;
}

/* ---------- Vault credential card (used for new user / password reset) ---- */
.vault-credential-card {
  max-width: 720px;
  background: var(--cream);
  border: 2px solid var(--ochre);
  border-radius: 2px;
  padding: 2rem;
  margin-bottom: 2rem;
}
.vault-credential-warn {
  background: rgba(232, 165, 82, 0.18);
  border-left: 3px solid var(--ochre);
  padding: 0.85rem 1rem;
  margin: 0 0 1.5rem;
}
.vault-credential-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1.5rem;
}
.vault-credential-table th {
  text-align: left;
  padding: 0.5rem 0.75rem;
  font-family: var(--ui);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--slate);
  width: 30%;
  vertical-align: top;
  border-bottom: 1px solid var(--rule);
}
.vault-credential-table td {
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--rule);
}
.vault-credential-table tr:last-child th,
.vault-credential-table tr:last-child td { border-bottom: 0; }
.vault-pw {
  font-family: ui-monospace, "SF Mono", Consolas, "DejaVu Sans Mono", monospace;
  font-size: 1.05rem;
  background: var(--paper);
  padding: 0.3rem 0.6rem;
  border-radius: 2px;
  border: 1px solid var(--rule);
  letter-spacing: 0.05em;
  user-select: all;
}

/* ---------- Featured status (news) ---------- */
.status-featured {
  background: var(--rust);
  color: var(--cream);
}

/* ---------- Workspace landing ---------- */
.workspace-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin-bottom: 2.5rem;
}
@media (max-width: 800px) {
  .workspace-grid { grid-template-columns: 1fr; }
}
.workspace-block {
  background: var(--cream);
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: 1.5rem 1.75rem;
}
.workspace-block-title {
  font-family: var(--display);
  font-size: 1.1rem;
  margin: 0 0 1rem;
  color: var(--slate);
}
.workspace-empty {
  color: var(--ink-soft);
  font-style: italic;
  margin: 0 0 1rem;
}

.workspace-task-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.workspace-task-item {
  border-bottom: 1px solid var(--rule);
  padding: 0.6rem 0;
}
.workspace-task-item:last-child { border-bottom: 0; }
.workspace-task-item.is-overdue { color: var(--rust); }
.workspace-task-link {
  display: block;
  text-decoration: none;
  color: inherit;
}
.workspace-task-link:hover .workspace-task-title { color: var(--rust); }
.workspace-task-priority {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.1rem 0.4rem;
  border-radius: 2px;
  margin-right: 0.6rem;
  vertical-align: middle;
}
.priority-high   { background: var(--rust);      color: var(--cream); }
.priority-normal { background: var(--heather);   color: var(--cream); }
.priority-low    { background: var(--ink-soft);  color: var(--cream); }

.workspace-task-title {
  font-weight: 600;
  color: var(--slate);
  font-family: var(--display);
}
.workspace-task-due {
  display: block;
  margin-top: 0.2rem;
  font-size: 12px;
  color: var(--ink-soft);
  margin-left: 0; /* aligned with priority pill */
}

.workspace-activity-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.workspace-activity-item {
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--rule);
  font-size: 14px;
}
.workspace-activity-item:last-child { border-bottom: 0; }
.workspace-activity-when {
  display: block;
  font-size: 11px;
  color: var(--ink-soft);
  letter-spacing: 0.04em;
  margin-bottom: 0.15rem;
}
.workspace-activity-line { color: var(--ink); }

/* ---------- Workspace quick links ---------- */
.workspace-quicklinks {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-top: 1.5rem;
}
@media (max-width: 700px) {
  .workspace-quicklinks { grid-template-columns: 1fr; }
}
.workspace-quicklink {
  display: block;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: 1.25rem;
  text-decoration: none;
  color: inherit;
  transition: all 0.15s ease;
}
.workspace-quicklink:hover {
  border-color: var(--heather);
  background: var(--cream);
  transform: translateY(-1px);
}
.workspace-quicklink strong {
  display: block;
  font-family: var(--display);
  font-size: 1.05rem;
  color: var(--slate);
  margin-bottom: 0.3rem;
}
.workspace-quicklink span {
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.45;
}

/* ---------- Task board ---------- */
.task-board {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1rem;
  margin-top: 1rem;
}
@media (max-width: 900px) {
  .task-board { grid-template-columns: 1fr; }
}
.task-column {
  background: var(--cream);
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: 1rem;
  min-height: 200px;
}
.task-column-title {
  font-family: var(--ui);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--slate);
  margin: 0 0 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--rule);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.task-column-count {
  background: var(--paper);
  border: 1px solid var(--rule);
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  font-size: 11px;
  color: var(--ink-soft);
}
.task-column-empty {
  color: var(--ink-soft);
  font-style: italic;
  font-size: 13px;
  text-align: center;
  margin: 1rem 0;
}

.task-card {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: 0.85rem 1rem;
  margin-bottom: 0.6rem;
  font-size: 14px;
}
.task-card.is-overdue {
  border-left: 3px solid var(--rust);
}
.task-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-bottom: 0.5rem;
  align-items: center;
}
.task-priority {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.1rem 0.4rem;
  border-radius: 2px;
}
.task-campaign {
  font-size: 11px;
  color: var(--ink-soft);
  letter-spacing: 0.04em;
}
.task-due {
  font-size: 11px;
  color: var(--ink-soft);
  letter-spacing: 0.04em;
  margin-left: auto;
}
.task-due.is-overdue { color: var(--rust); font-weight: 600; }
.task-card-title {
  font-family: var(--display);
  font-size: 1rem;
  font-weight: 600;
  margin: 0 0 0.4rem;
  line-height: 1.3;
}
.task-card-title a {
  color: var(--slate);
  text-decoration: none;
}
.task-card-title a:hover { color: var(--rust); }
.task-claimed-by {
  font-size: 12px;
  color: var(--ink-soft);
  margin: 0 0 0.5rem;
}
.task-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.5rem;
}

/* ---------- Members directory ---------- */
.members-list {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}
@media (max-width: 700px) { .members-list { grid-template-columns: 1fr; } }
.members-item {
  background: var(--cream);
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: 1.25rem;
}
.members-name {
  font-family: var(--display);
  font-size: 1.05rem;
  margin-bottom: 0.4rem;
  color: var(--slate);
}
.members-contact {
  font-size: 14px;
  margin-bottom: 0.3rem;
}
.members-meta {
  font-size: 12px;
  color: var(--ink-soft);
}

/* ---------- News audience badges (added Wave 3+) ---------- */
.status-workgroup { background: var(--heather); color: var(--cream); }
.status-pending   { background: var(--rust);    color: var(--cream); }

/* Highlight rows in the vault news table that are awaiting review. */
.vault-table tbody tr.row-pending {
  background: rgba(232, 165, 82, 0.12); /* faint ochre tint */
}
.vault-table tbody tr.row-pending:hover {
  background: rgba(232, 165, 82, 0.22);
}

/* ---------- Timeline page (added Wave 4) ---------- */

.timeline-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.25rem;
  padding: 0.85rem 1rem;
  margin: 1.5rem 0 2rem;
  background: rgba(122, 90, 140, 0.05);
  border: 1px solid rgba(122, 90, 140, 0.18);
  border-radius: 2px;
}
.timeline-control { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.timeline-control-label {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-soft);
}
.timeline-btn {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 12px;
  padding: 5px 11px;
  background: transparent;
  color: var(--heather-deep);
  border: 1px solid var(--heather-deep);
  border-radius: 2px;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}
.timeline-btn:hover { background: rgba(90, 63, 107, 0.08); }
.timeline-btn.is-active { background: var(--heather-deep); color: var(--cream); }
.timeline-btn.is-active:hover { background: var(--heather-deep); }
.timeline-legend {
  display: flex;
  gap: 0.9rem;
  align-items: center;
  margin-left: auto;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 12px;
  color: var(--ink-soft);
}
.timeline-legend-item { display: inline-flex; align-items: center; gap: 5px; }
.timeline-legend-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
@media (max-width: 700px) {
  .timeline-legend { margin-left: 0; }
}

.timeline { margin: 0; }
.timeline-row {
  display: grid;
  grid-template-columns: 110px 28px 1fr;
  gap: 16px;
  align-items: stretch;
}
.timeline-date {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 12px;
  color: var(--ink-soft);
  padding-top: 4px;
  text-align: right;
}
.timeline-rail { position: relative; }
.timeline-rail-line {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 13px;
  width: 2px;
  opacity: 0.35;
}
.timeline-rail-dot {
  position: absolute;
  top: 5px;
  left: 8px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid transparent;
  box-sizing: border-box;
}
.timeline-rail-dot.is-hollow { background: var(--cream); }
.timeline-row.is-future .timeline-rail-line { opacity: 0.22; }

/* Hide rail above the first visible row's dot, and below the last
   visible row's dot, so the line doesn't bleed off the top/bottom. */
.timeline-row:first-child .timeline-rail-line { top: 11px; }
.timeline-row:last-child  .timeline-rail-line { bottom: calc(100% - 11px); }

.timeline-content { padding-bottom: 1.5rem; }
.timeline-title {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 18px;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 0.3rem;
  line-height: 1.25;
}
.timeline-desc {
  font-family: 'Lora', Georgia, serif;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0 0 0.4rem;
}
.timeline-doc-link {
  margin: 0.3rem 0 0;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 12px;
}
.timeline-doc-link a { color: var(--heather-deep); }
.timeline-empty-msg {
  margin-top: 2rem;
  padding: 1rem;
  text-align: center;
  background: var(--cream);
  border: 1px solid var(--rule);
  border-radius: 2px;
  color: var(--ink-soft);
}

@media (max-width: 600px) {
  .timeline-row { grid-template-columns: 78px 22px 1fr; gap: 10px; }
  .timeline-date { font-size: 11px; }
  .timeline-rail-line { left: 10px; }
  .timeline-rail-dot { left: 5px; width: 11px; height: 11px; }
  .timeline-title { font-size: 16px; }
  .timeline-desc { font-size: 14px; }
}
/* ============================================================================
   Back-office sub-navigation — three-group, three-row layout
   ============================================================================

   Three category rows (Workspace / Vault / Admin), each on its own line,
   on a warm-slate background. Buttons are filled in their group's hue:
     - Workspace: muted rose
     - Vault:     slate-blue
     - Admin:     sandy amber
   The current page is shown in the same hue but darker.
   Hover lightens the button (the same hue at higher saturation).

   Mobile: below 720px, all rows collapse behind a hamburger toggle that
   uses a native <details>/<summary> element (no JS, fully accessible).
   ============================================================================ */

.backoffice-subnav {
  background: #5a546a;
  border-top: 1px solid rgba(0, 0, 0, 0.18);
  border-bottom: 1px solid rgba(0, 0, 0, 0.18);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

/* The desktop container shows the three rows directly. Matches the
   site's standard .container width and padding so the buttons line up
   with the page content vertically. */
.bo-desktop {
  display: block;
  padding: 0.6rem 1.5rem 0.4rem;
  max-width: 1180px;
  margin: 0 auto;
}

/* Each group is one row. */
.bo-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  padding: 0.3rem 0;
  line-height: 1.5;
}
.bo-group + .bo-group {
  border-top: 0.5px solid rgba(255, 255, 255, 0.08);
  margin-top: 0.2rem;
  padding-top: 0.5rem;
}
.bo-group-label {
  font-family: var(--ui);
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  white-space: nowrap;
  flex: 0 0 auto;
  width: 95px;
  margin-right: 0.5rem;
  display: inline-block;
}

/* The list of buttons in each group. */
.bo-group-items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 5px 5px;
}
.bo-group-items li { margin: 0; }

/* Default button — set per group below. */
.bo-link {
  display: inline-block;
  padding: 5px 11px;
  border-radius: 3px;
  font-family: var(--ui);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-decoration: none;
  border: 0;
  white-space: nowrap;
  transition: background-color 0.12s ease;
}

/* Workspace — muted rose */
.bo-group-ws .bo-group-label { color: #e8b8c1; }
.bo-group-ws .bo-link              { background: #b86b78; color: #fff; }
.bo-group-ws .bo-link:hover        { background: #d3909b; color: #3a1a22; }
.bo-group-ws .bo-link.is-current   { background: #7a3a45; color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.18); }

/* Vault — slate-blue */
.bo-group-va .bo-group-label { color: #b8cce0; }
.bo-group-va .bo-link              { background: #6989ad; color: #fff; }
.bo-group-va .bo-link:hover        { background: #8aa6c4; color: #14233a; }
.bo-group-va .bo-link.is-current   { background: #2d4666; color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.18); }

/* Admin — sandy amber */
.bo-group-ad .bo-group-label { color: #e6c8a6; }
.bo-group-ad .bo-link              { background: #b88557; color: #fff; }
.bo-group-ad .bo-link:hover        { background: #d2a37c; color: #3a2310; }
.bo-group-ad .bo-link.is-current   { background: #6e4f25; color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.18); }

/* ----------------------------------------------------------------------------
   Mobile: hamburger toggle.
   ---------------------------------------------------------------------------- */
.bo-mobile { display: none; }            /* hidden on desktop */
.bo-mobile-toggle {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.7rem 1.5rem;
  font-family: var(--ui);
  font-size: 13px;
  font-weight: 500;
  color: #f0e7d4;
  user-select: none;
}
.bo-mobile-toggle::-webkit-details-marker { display: none; }    /* hide native triangle */
.bo-mobile-toggle::marker                 { content: ''; }      /* same, FF/standards */
.bo-mobile-toggle-bars {
  display: inline-flex;
  flex-direction: column;
  justify-content: space-between;
  width: 22px;
  height: 16px;
}
.bo-mobile-toggle-bars span {
  display: block;
  height: 2px;
  background: #f0e7d4;
  border-radius: 1px;
  transition: transform 0.15s ease, opacity 0.15s ease;
}
/* Animate to an X when open. */
.bo-mobile[open] .bo-mobile-toggle-bars span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.bo-mobile[open] .bo-mobile-toggle-bars span:nth-child(2) {
  opacity: 0;
}
.bo-mobile[open] .bo-mobile-toggle-bars span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}
.bo-mobile-panel {
  padding: 0.4rem 1.5rem 1rem;
}
.bo-mobile-panel .bo-group {
  display: block;
  padding: 0.6rem 0;
}
.bo-mobile-panel .bo-group + .bo-group {
  margin-top: 0.4rem;
  padding-top: 0.7rem;
}
.bo-mobile-panel .bo-group-label {
  display: block;
  width: auto;
  margin: 0 0 0.4rem;
}
.bo-mobile-panel .bo-group-items {
  flex-direction: column;
  gap: 4px;
}
.bo-mobile-panel .bo-link {
  display: block;
  padding: 8px 11px;
  font-size: 13.5px;
}

/* Switch to mobile layout below 720px. */
@media (max-width: 720px) {
  .bo-desktop { display: none; }
  .bo-mobile  { display: block; }
}

/* ============================================================================
   Dashboard layout — countdown banner, card rows, and supporting bits
   ============================================================================ */

/* ---- Consultation countdown banner ---- */
.dashboard-countdown {
  background: var(--heather-deep);
  color: var(--cream);
  border-radius: 2px;
  padding: 1.25rem 1.75rem;
  margin: 0 0 1.75rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.dashboard-countdown-text {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  flex: 1 1 auto;
  min-width: 0;
}
.dashboard-countdown-eyebrow {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(250, 246, 236, 0.75);
}
.dashboard-countdown-headline {
  font-family: var(--display);
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--cream);
}
.dashboard-countdown-sep {
  color: rgba(250, 246, 236, 0.55);
}
.btn-translucent {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;
  padding: 0.55rem 1rem;
  border: 1px solid rgba(250, 246, 236, 0.4);
  border-radius: 2px;
  background: rgba(250, 246, 236, 0.08);
  color: var(--cream);
  text-decoration: none;
  transition: background 0.12s ease;
  white-space: nowrap;
}
.btn-translucent:hover {
  background: rgba(250, 246, 236, 0.18);
  color: var(--cream);
}

@media (max-width: 700px) {
  .dashboard-countdown {
    padding: 1rem 1.25rem;
  }
  .dashboard-countdown-headline {
    font-size: 1.3rem;
  }
}

/* ---- Card rows ---- */
.dashboard-row {
  display: grid;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
}
.dashboard-row--two   { grid-template-columns: 1fr 1fr; }
.dashboard-row--three { grid-template-columns: 1fr 1fr 1fr; }
.dashboard-row--four  { grid-template-columns: 1fr 1fr; }

@media (max-width: 1000px) {
  .dashboard-row--three {
    grid-template-columns: 1fr 1fr;
  }
  .dashboard-row--three > .workspace-block:nth-child(3) {
    grid-column: 1 / -1;
  }
}
@media (max-width: 700px) {
  .dashboard-row--two,
  .dashboard-row--three,
  .dashboard-row--four {
    grid-template-columns: 1fr;
  }
  .dashboard-row--three > .workspace-block:nth-child(3) {
    grid-column: auto;
  }
}

/* ---- Card title with count chip ---- */
.workspace-block-count {
  display: inline-block;
  margin-left: 0.45rem;
  padding: 0.05rem 0.45rem;
  border-radius: 999px;
  background: var(--heather-deep);
  color: var(--cream);
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  vertical-align: middle;
  line-height: 1.5;
}
.workspace-block-count--soft {
  background: transparent;
  color: var(--ink-soft);
  font-weight: 500;
  letter-spacing: 0.01em;
  font-style: italic;
  padding: 0;
}

.workspace-block-foot {
  margin: 0.9rem 0 0;
  font-size: 13px;
}
.workspace-block-foot a {
  color: var(--heather-deep);
  text-decoration: none;
  font-weight: 500;
}
.workspace-block-foot a:hover {
  color: var(--rust);
  text-decoration: underline;
}

/* ---- Card variants ---- */
.workspace-block--admin {
  background: var(--paper);
  border: 1px solid var(--ochre);
  border-left-width: 3px;
}
.workspace-block--full {
  margin-bottom: 1.5rem;
}

/* ---- Open-tasks meta row (priority pill + due date inline) ---- */
.workspace-task-meta {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 0.25rem;
}
.workspace-task-due-inline {
  font-size: 12px;
  color: var(--ink-soft);
}

/* ---- Timeline preview list ---- */
.workspace-timeline-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.workspace-timeline-item {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--rule);
}
.workspace-timeline-item:last-child { border-bottom: 0; }
.workspace-timeline-dot {
  display: inline-block;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 2px solid var(--slate);
  background: var(--paper);
  flex: 0 0 auto;
  margin-top: 0.4rem;
}
.workspace-timeline-body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.workspace-timeline-title {
  font-family: var(--display);
  font-weight: 600;
  color: var(--slate);
  font-size: 0.98rem;
  line-height: 1.3;
}
.workspace-timeline-when {
  font-size: 12px;
  color: var(--ink-soft);
  margin-top: 0.15rem;
}

/* ---- Admin nudge rows ---- */
.workspace-nudge {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  margin: 0 0 0.6rem;
  background: var(--cream);
  border: 1px solid var(--rule);
  border-left-width: 3px;
  border-radius: 2px;
  text-decoration: none;
  color: var(--slate);
  transition: background 0.12s ease, transform 0.12s ease;
}
.workspace-nudge:last-child { margin-bottom: 0; }
.workspace-nudge:hover {
  background: var(--paper);
  transform: translateX(2px);
}
.workspace-nudge--rust  { border-left-color: var(--rust); }
.workspace-nudge--ochre { border-left-color: var(--ochre); }
.workspace-nudge-text   { font-size: 14px; }
.workspace-nudge-text strong { font-weight: 700; color: var(--ink); }
.workspace-nudge-arrow  { color: var(--ink-soft); font-size: 1.1rem; }

/* ============================================================================
   Timeline audience: workgroup-only entries
   ============================================================================ */

/* On the public /timeline page (.timeline-row): subtle background tint
   so workgroup entries stand out from public ones, but only when the
   visitor is logged in to see them. */
.timeline-row.is-workgroup {
  background: rgba(123, 90, 140, 0.04); /* very faint heather */
  border-left: 2px solid rgba(123, 90, 140, 0.35);
  padding-left: 0.5rem;
  margin-left: -0.7rem;
}

/* The "Workgroup" badge that sits inside the title on /timeline */
.timeline-badge {
  display: inline-block;
  margin-left: 0.45rem;
  padding: 0.12rem 0.45rem;
  border-radius: 2px;
  font-family: var(--ui);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  vertical-align: middle;
  line-height: 1.5;
}
.timeline-badge-workgroup {
  background: var(--heather);
  color: var(--cream);
}

/* The "you can see workgroup-only entries" notice at the top of /timeline */
.timeline-workgroup-notice {
  background: rgba(123, 90, 140, 0.08);
  border-left: 3px solid var(--heather);
  padding: 0.85rem 1.1rem;
  margin: 1rem 0 1.5rem;
  font-size: 14px;
  color: var(--ink);
}
.timeline-workgroup-notice .timeline-badge {
  margin-left: 0;
  margin-right: 0.4rem;
}

/* On the workspace dashboard "What's next" card: a smaller badge on the
   timeline preview rows */
.workspace-timeline-item.is-workgroup .workspace-timeline-title {
  /* nothing special — keep the visual quiet, the badge does the work */
}
.workspace-timeline-badge {
  display: inline-block;
  margin-left: 0.3rem;
  padding: 0.08rem 0.4rem;
  border-radius: 2px;
  background: var(--heather);
  color: var(--cream);
  font-family: var(--ui);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  vertical-align: middle;
  line-height: 1.6;
}

/* ============================================================================
   Logs / Activity / Analytics views
   ============================================================================ */

/* Tabs across the top of the log viewer — one tab per log file. */
.logs-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1rem 0 1.25rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--rule);
}
.logs-tab {
  display: flex;
  flex-direction: column;
  padding: 0.6rem 1rem;
  background: var(--cream);
  border: 1px solid var(--rule);
  border-radius: 3px;
  text-decoration: none;
  color: var(--ink);
  font-family: var(--ui);
  min-width: 130px;
  transition: background 0.15s ease;
}
.logs-tab:hover { background: #ebe7d8; }
.logs-tab.is-active {
  background: var(--heather-deep);
  color: var(--cream);
  border-color: var(--heather-deep);
}
.logs-tab-label    { font-weight: 600; font-size: 14px; }
.logs-tab-size     { font-size: 11px; opacity: 0.75; margin-top: 2px; }

/* Search bar above the log output. */
.logs-search {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  margin: 0.5rem 0 1rem;
}
.logs-search input[type=search] {
  flex: 1;
  padding: 0.55rem 0.8rem;
  border: 1px solid var(--rule);
  border-radius: 3px;
  font-family: var(--body);
  font-size: 14px;
  background: var(--paper);
}
.logs-clear {
  font-size: 13px;
  color: var(--ink-soft);
  text-decoration: underline;
}

/* The log output pane itself. */
.logs-pane {
  background: #1a1d22;
  border-radius: 3px;
  overflow: auto;
  max-width: 100%;
}
.logs-output {
  margin: 0;
  padding: 1rem 1.1rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
  font-size: 12.5px;
  line-height: 1.55;
  color: #d8d2c1;
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow-x: auto;
}
.logs-output .logs-ts {
  color: #8aa6c8;
}

.logs-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin: 1.25rem 0 0;
}
.logs-page-of {
  font-family: var(--ui);
  font-size: 14px;
  color: var(--ink-soft);
}
.btn.is-disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

/* Activity feed (similar to dashboard's recent-activity but full-page). */
.activity-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.activity-list li {
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--rule);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  align-items: baseline;
}
.activity-when {
  font-family: var(--ui);
  font-size: 12.5px;
  color: var(--ink-soft);
  flex: 0 0 auto;
  min-width: 120px;
}
.activity-actor {
  font-weight: 600;
  flex: 0 0 auto;
}
.activity-action {
  flex: 1 1 auto;
  color: var(--ink);
}
.activity-kind {
  display: inline-block;
  font-family: var(--ui);
  font-size: 10.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 2px 7px;
  background: var(--cream);
  border: 1px solid var(--rule);
  border-radius: 3px;
  color: var(--ink-soft);
  flex: 0 0 auto;
}

/* Activity-feed kind colours — visual scanning aid. */
.activity-kind.k-task    { background: #efeafc; border-color: #ddd0f8; color: var(--heather-deep); }
.activity-kind.k-doc     { background: #e7f1ea; border-color: #c7dfd0; color: #2d5a3d; }
.activity-kind.k-news    { background: #fdf3e5; border-color: #f0d8b0; color: #7a4f12; }
.activity-kind.k-user    { background: #eaeef5; border-color: #c8d3e1; color: #284b7a; }

/* Analytics dashboard.
   ============================================================================ */
.analytics-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem;
  margin: 1rem 0 2rem;
}
.analytics-tile {
  background: var(--cream);
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 1rem 1.1rem;
}
.analytics-tile .tile-num {
  font-family: var(--display);
  font-size: 28px;
  font-weight: 700;
  color: var(--ink);
  display: block;
}
.analytics-tile .tile-lbl {
  font-family: var(--ui);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-soft);
  margin-top: 0.2rem;
  display: block;
}
.analytics-tile .tile-sub {
  font-size: 12px;
  color: var(--ink-soft);
  margin-top: 0.4rem;
  display: block;
}

/* Sparkline chart container (the bars are inline SVG). */
.analytics-chart-wrap {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 1rem 1.1rem 0.4rem;
  margin: 0 0 2rem;
}
.analytics-chart-title {
  font-family: var(--ui);
  font-weight: 600;
  font-size: 13px;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0 0 0.7rem;
}
.analytics-chart svg {
  width: 100%;
  height: auto;
  max-height: 220px;
  display: block;
}
.analytics-chart .bar      { fill: var(--heather); }
.analytics-chart .bar-pv   { fill: var(--heather-deep); }
.analytics-chart .gridline { stroke: var(--rule); stroke-width: 1; }
.analytics-chart .axis-label {
  font-family: var(--ui);
  font-size: 10px;
  fill: var(--ink-soft);
}

/* Top-pages and top-referrers tables. */
.analytics-tables {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin: 0 0 2rem;
}
@media (max-width: 720px) {
  .analytics-tables { grid-template-columns: 1fr; }
}
.analytics-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.analytics-table th {
  text-align: left;
  font-family: var(--ui);
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding: 0 0 0.4rem;
  border-bottom: 1px solid var(--rule);
}
.analytics-table td {
  padding: 0.5rem 0.5rem 0.5rem 0;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
}
.analytics-table td.num {
  font-family: var(--ui);
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
  font-weight: 600;
  color: var(--ink);
}
.analytics-table td.path {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  word-break: break-all;
}

.analytics-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 1rem;
  align-items: center;
}
.analytics-controls label {
  font-family: var(--ui);
  font-size: 13px;
  color: var(--ink-soft);
}
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

/* =============================================================================
   Mobile hamburger nav (added 4 May 2026)

   On narrow screens (<=820px) the wrapping link row is replaced with a
   single colour-coded toggle button that expands/collapses the link
   list. Without JavaScript, the toggle stays hidden and the existing
   wrap behaviour stays as the no-script fallback.
   ============================================================================= */

.mainnav-toggle {
  display: none;
  align-items: center;
  gap: 0.65rem;
  padding: 0.7rem 1rem;
  margin: 0.5rem 0;
  background: var(--heather);
  color: var(--cream);
  border: 0;
  cursor: pointer;
  font-family: var(--ui);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border-radius: 2px;
  transition: background 0.15s;
}
.mainnav-toggle:hover { background: var(--heather-deep); color: var(--cream); }
.mainnav-toggle:focus-visible {
  outline: 2px solid var(--ochre);
  outline-offset: 2px;
}

.mainnav-toggle-bars {
  display: inline-flex;
  flex-direction: column;
  justify-content: space-between;
  width: 18px;
  height: 13px;
}
.mainnav-toggle-bars span {
  display: block;
  height: 2px;
  background: var(--cream);
  border-radius: 1px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.mainnav-toggle[aria-expanded="true"] .mainnav-toggle-bars span:nth-child(1) {
  transform: translateY(5.5px) rotate(45deg);
}
.mainnav-toggle[aria-expanded="true"] .mainnav-toggle-bars span:nth-child(2) {
  opacity: 0;
}
.mainnav-toggle[aria-expanded="true"] .mainnav-toggle-bars span:nth-child(3) {
  transform: translateY(-5.5px) rotate(-45deg);
}

@media (max-width: 820px) {
  /* Show the toggle only when JS is available. Without JS the toggle is
     useless, so we keep it hidden and the existing wrap behaviour stays. */
  html.js .mainnav-toggle { display: inline-flex; }

  /* JS-enabled: collapse the link list behind the toggle.               */
  html.js .mainnav-inner { display: none; }
  html.js .mainnav-toggle[aria-expanded="true"] + .mainnav-inner {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-height: 70vh;
    overflow-y: auto;
    margin-top: 0.5rem;
    padding-bottom: 0.5rem;
    border-top: 1px solid var(--rule);
  }

  /* Open menu: each link gets a cream background and a 4px colour-coded
     left border. :not(.current) keeps the existing `.mainnav a.current`
     heather styling winning on whichever item is the current page.      */
  html.js .mainnav-toggle[aria-expanded="true"] + .mainnav-inner a {
    width: 100%;
    border-right: 0;
    border-bottom: 1px solid var(--rule);
    padding: 0.85rem 0.95rem;
  }
  html.js .mainnav-toggle[aria-expanded="true"] + .mainnav-inner a:not(.current) {
    background: var(--cream);
    border-left: 4px solid var(--rule) !important;
  }
  html.js .mainnav-toggle[aria-expanded="true"] + .mainnav-inner a:last-child {
    border-bottom: 0;
  }

  /* Section accent colours. Classes are emitted by nav.php as
     navlink--<key> so the colours follow the link, not its position. */
  html.js .mainnav-toggle[aria-expanded="true"] + .mainnav-inner a.navlink--home:not(.current)      { border-left-color: var(--slate)         !important; }
  html.js .mainnav-toggle[aria-expanded="true"] + .mainnav-inner a.navlink--grisedale:not(.current) { border-left-color: var(--fellside)      !important; }
  html.js .mainnav-toggle[aria-expanded="true"] + .mainnav-inner a.navlink--alston:not(.current)    { border-left-color: var(--heather)       !important; }
  html.js .mainnav-toggle[aria-expanded="true"] + .mainnav-inner a.navlink--timeline:not(.current)  { border-left-color: var(--ochre)         !important; }
  html.js .mainnav-toggle[aria-expanded="true"] + .mainnav-inner a.navlink--news:not(.current)      { border-left-color: var(--rust)          !important; }
  html.js .mainnav-toggle[aria-expanded="true"] + .mainnav-inner a.navlink--vault:not(.current)     { border-left-color: var(--heather-deep)  !important; }
  html.js .mainnav-toggle[aria-expanded="true"] + .mainnav-inner a.navlink--support:not(.current)   { border-left-color: var(--sandstone)     !important; }
  html.js .mainnav-toggle[aria-expanded="true"] + .mainnav-inner a.navlink--contact:not(.current)   { border-left-color: var(--fellside-deep) !important; }
}

/* =============================================================================
   Document type pill row (added 4 May 2026)

   Sits below the main counter row on the vault dashboard and the
   workspace document library. Only shows types with at least one
   document. Largest type is highlighted in heather. Each pill is a
   link that filters the table to that type.
   ============================================================================= */

.vault-subhead {
  font-family: var(--ui);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-weight: 600;
  margin: 0 0 0.6rem;
}
.vault-types-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 2rem;
}
.vault-type-pill {
  display: inline-flex;
  align-items: baseline;
  gap: 0.55rem;
  padding: 0.55rem 0.9rem;
  background: var(--cream);
  border: 1px solid var(--rule);
  border-radius: 2px;
  white-space: nowrap;
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s, transform 0.15s;
}
.vault-type-pill:hover {
  border-color: var(--slate);
  transform: translateY(-1px);
}
.vault-type-pill-num {
  font-family: var(--display);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--slate);
}
.vault-type-pill-lbl {
  font-family: var(--ui);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-weight: 600;
}
.vault-type-pill--top {
  background: var(--heather);
  border-color: var(--heather);
}
.vault-type-pill--top .vault-type-pill-num,
.vault-type-pill--top .vault-type-pill-lbl { color: var(--cream); }
.vault-type-pill--top:hover {
  background: var(--heather-deep);
  border-color: var(--heather-deep);
}

/* =============================================================================
   Task badges, alert counter, and 5/6-column counter variants
   (added 4 May 2026)
   ============================================================================= */

.counter-num--alert { color: var(--rust); }

/* 5-column variant (tasks page: Open / In progress / Completed / Overdue / Mine) */
.vault-counters--five { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 900px) {
  .vault-counters--five { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 560px) {
  .vault-counters--five { grid-template-columns: repeat(2, 1fr); }
}

/* 6-column variant (news page: Total / Public / Workgroup / Pending / Drafts / Mine) */
.vault-counters--six { grid-template-columns: repeat(6, 1fr); }
@media (max-width: 1000px) {
  .vault-counters--six { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 560px) {
  .vault-counters--six { grid-template-columns: repeat(2, 1fr); }
}

/* Members directory: per-member task badges */
.members-tasks {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
}
.task-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.55rem;
  border-radius: 2px;
  font-family: var(--ui);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  white-space: nowrap;
  line-height: 1.4;
}
.task-badge--claimed {
  background: var(--heather);
  color: var(--cream);
}
.task-badge--open {
  background: var(--cream);
  color: var(--rust);
  border: 1px solid var(--rust);
}
.task-badge--overdue {
  background: var(--rust);
  color: var(--cream);
}
.task-badge--none {
  background: transparent;
  color: var(--ink-soft);
  font-weight: 500;
  font-style: italic;
  padding: 0.25rem 0;
}

/* Members row — make space for the new tasks column on desktop. The
   pre-existing rule had grid-template-columns: 1.2fr 1.4fr 1fr; this
   overrides it to 4 columns. The mobile single-column rule already
   exists and still applies under 700px.                              */
.members-item {
  grid-template-columns: 1.1fr 1.2fr 0.9fr 1fr;
}

/* =============================================================================
   "(admin view)" tag on the vault dashboard h2 (added 4 May 2026)

   Sits inline next to "Document archive." to signal that this is the
   admin curator's view of the same archive members see at
   /workspace/documents. Muted, smaller, doesn't compete with the title.
   ============================================================================= */

.admin-view-tag {
  font-family: var(--ui);
  font-size: 0.5em;
  font-weight: 500;
  color: var(--ink-soft);
  letter-spacing: 0.04em;
  text-transform: lowercase;
  vertical-align: middle;
  margin-left: 0.5rem;
  white-space: nowrap;
}

/* =============================================================================
   Document archive feature (added 9 May 2026)

   Covers the show-mode toggle (Active/Archived/All), the bulk-archive form,
   the inline Archive/Unarchive row actions, the Archived status badge, the
   archived-row visual treatment, and the public detail-page archived
   notice. All colours pulled from the existing palette in :root above.
   ============================================================================= */

/* Status badge — Archived. Uses slate (text-grade) on a muted cream so it
   reads as "muted/inactive" rather than urgent. */
.status-archived {
  background: var(--rule);
  color: var(--slate);
}

/* Show-mode toggle (Active / Archived / All) above the documents table. */
.vault-show-toggle {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1.5rem 0 1rem;
  padding: 0.6rem 0.9rem;
  background: var(--cream);
  border: 1px solid var(--rule);
  border-radius: 4px;
  font-size: 14px;
}
.vault-show-toggle-label {
  font-weight: 600;
  color: var(--slate);
  margin-right: 0.25rem;
}
.vault-show-link {
  color: var(--slate);
  text-decoration: none;
  padding: 0.25rem 0.65rem;
  border-radius: 3px;
}
.vault-show-link:hover {
  background: rgba(45, 49, 66, 0.08);
  color: var(--rust);
}
.vault-show-link--current {
  background: var(--slate);
  color: var(--cream);
  font-weight: 600;
}
.vault-show-link--current:hover {
  background: var(--slate);
  color: var(--cream);
}
.vault-show-sep {
  color: var(--rule);
}

/* Bulk archive form — sits above the table, contains just the button.
   The checkboxes live inside the table and reach this form via the
   HTML5 form="bulk-archive-form" attribute. */
.vault-bulk-form {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0 0 0.75rem;
  flex-wrap: wrap;
}
.vault-bulk-btn {
  font-size: 14px;
}
.vault-bulk-hint {
  font-size: 13px;
  color: var(--slate);
  opacity: 0.75;
}

/* Tickbox column — narrow, vertically centred. */
.vault-cell-tick {
  width: 1.5rem;
  text-align: center;
  vertical-align: middle;
}
.vault-cell-tick input[type="checkbox"] {
  cursor: pointer;
  width: 16px;
  height: 16px;
  vertical-align: middle;
}

/* Archived row — subtle visual de-emphasis on the workspace table.
   Title still readable; row stands out as "not in active use". */
.vault-row-archived {
  background: rgba(45, 49, 66, 0.025);
}
.vault-row-archived .vault-cell-title strong {
  opacity: 0.75;
}

/* Inline form (used for Unarchive in row actions and the edit-page banner).
   Keeps the form inline with surrounding link-actions. */
.vault-inline-form {
  display: inline;
}

/* A button styled to look like a link — used for Unarchive in the row
   actions cell so it sits visually alongside the other &middot;-separated
   action links. */
.vault-action-link {
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  cursor: pointer;
  color: var(--heather-deep);
  text-decoration: none;
}
.vault-action-link:hover {
  color: var(--rust);
  text-decoration: underline;
}
.vault-action-unarchive { color: var(--heather-deep); }

/* Edit-page banner shown above the form when a document is archived. */
.vault-archive-banner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  margin: 0 0 1.5rem;
  padding: 1rem 1.25rem;
  background: rgba(232, 165, 82, 0.10);            /* tinted ochre */
  border-left: 3px solid var(--ochre);
  border-radius: 2px;
}
.vault-archive-banner p {
  margin: 0;
  flex: 1 1 320px;
  color: var(--slate);
  font-size: 14px;
  line-height: 1.5;
}

/* Public detail page — archived notice block under the title. */
.document-archived-notice {
  margin: 1.25rem 0 0;
  padding: 0.9rem 1.1rem;
  background: rgba(45, 49, 66, 0.05);
  border-left: 3px solid var(--rule);
  border-radius: 2px;
  font-size: 14px;
  color: var(--slate);
}
.document-archived-notice p {
  margin: 0;
  line-height: 1.5;
}

/* Visually hidden — for the screen-reader-only "Select" header on the
   tickbox column. Standard recipe, used elsewhere in the codebase if and
   only if needed. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Document titles in the public listing now link through to the detail
   page. Inherit the title's colour and weight; underline only on hover. */
.document-title a {
  color: inherit;
  text-decoration: none;
}
.document-title a:hover,
.document-title a:focus {
  color: var(--rust);
  text-decoration: underline;
}


/* Give the title column priority over actions/status when the table is
   crowded. Without this, the actions column (which can have 5 inline links
   with the relevant icons) takes far more space than the title needs, and
   the title column ends up so narrow that each word wraps to its own line.
   18rem keeps the title readable while still fitting in the 1180px container
   on the busiest pages. */
.vault-table .vault-cell-title { min-width: 18rem; }

/* === Section eyebrows — Option D (numeric emphasis) === */

/* Numbered eyebrow: large serif numeral + uppercase label */
.section-eyebrow.section-eyebrow--numbered {
  display: inline-flex;
  align-items: baseline;
  gap: 0.65rem;
  /* The base .section-eyebrow rule likely applies uppercase/letter-spacing/
     bold to the whole element — reset those on the wrapper so they don't
     distort the inner spans (each child sets its own values below). */
  text-transform: none;
  letter-spacing: normal;
  font-weight: normal;
}

.section-eyebrow__num {
  font-family: var(--font-serif, Fraunces, Lora, Georgia, serif);
  font-size: 2.4rem;
  font-weight: 900;
  line-height: 0.9;
  color: inherit;
}

.section-eyebrow__label {
  font-size: 1.2rem;          /* was 0.85rem */
  font-weight: 900;         /* was 700 */
  letter-spacing: 0.12em;   /* was 0.16em */
  text-transform: uppercase;
  color: inherit;
}

/* Slight bump to the unnumbered intro eyebrow (e.g. "Get involved" at the
   top) so it gains a little presence too, but stays clearly less
   prominent than the numbered section markers below it. */
.section-eyebrow:not(.section-eyebrow--numbered) {
  font-size: 0.85rem;
  letter-spacing: 0.16em;
}



/* =============================================================================
   Page curl — pinned top-right corner link to a key document
   The fold is a CSS clip-path triangle using the brand purple palette.
   The shadow element sits behind the fold and gives it apparent depth.
   A short label slides out to the left on hover.
   ============================================================================= */

.page-curl-outer {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 500;
  /* overflow visible so the label can extend to the left of the fold */
}

/* Drop-shadow behind the fold, offset slightly down-right */
.page-curl-shadow {
  position: absolute;
  top: 4px;
  right: 0;
  width: 90px;
  height: 90px;
  clip-path: polygon(100% 0, 100% 100%, 0 0);
  background: rgba(45, 49, 66, 0.28);
  pointer-events: none;
}

/* The fold itself — the clickable link */
.page-curl-link {
  display: block;
  position: relative;
  width: 90px;
  height: 90px;
  /* Triangle: top-right(100%,0) → bottom-right(100%,100%) → top-left(0,0) */
  clip-path: polygon(100% 0, 100% 100%, 0 0);
  /* Gradient goes from deep purple at the corner to lighter purple toward
     the hypotenuse, suggesting the fold curling away from the viewer */
  background: linear-gradient(
    225deg,
    var(--heather-deep) 0%,
    var(--heather)       65%,
    rgba(123, 90, 140, 0.85) 100%
  );
  text-decoration: none;
  transition: filter 0.18s ease;
}

.page-curl-link:hover,
.page-curl-link:focus-visible {
  filter: brightness(1.12);
  outline: none;
}

/* Document icon — Feather "file-text" style */
.page-curl-icon {
  position: absolute;
  top: 15px;
  right: 13px;
  width: 26px;
  height: 26px;
  fill: none;
  stroke: rgba(250, 246, 236, 0.95); /* --cream */
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
  transition: transform 0.18s ease;
}

.page-curl-link:hover .page-curl-icon,
.page-curl-link:focus-visible .page-curl-icon {
  transform: scale(1.1);
}

/* Label — slides in from right on hover.
   Arrow notch points toward the fold. */
.page-curl-label {
  position: absolute;
  top: 24px;
  right: 94px; /* just left of the 90px fold */
  background: var(--heather-deep);
  color: var(--cream);
  font-family: var(--ui);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 0.3rem 0.7rem 0.3rem 0.65rem;
  border-radius: 2px 0 0 2px;
  white-space: nowrap;
  opacity: 0;
  transform: translateX(8px);
  transition: opacity 0.2s ease 0.04s, transform 0.2s ease 0.04s;
  pointer-events: none;
  box-shadow: -2px 2px 8px rgba(45, 49, 66, 0.2);
}

/* Rightward-pointing arrow notch connecting label to fold */
.page-curl-label::after {
  content: '';
  position: absolute;
  right: -7px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
  border-left: 7px solid var(--heather-deep);
}

/* Show label on hover over the whole outer wrapper, or keyboard focus
   on the link (so keyboard users also get the label visible) */
.page-curl-outer:hover .page-curl-label,
.page-curl-outer:focus-within .page-curl-label {
  opacity: 1;
  transform: translateX(0);
  pointer-events: all;
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  .page-curl-link,
  .page-curl-icon,
  .page-curl-label {
    transition: none;
  }
}
/* =============================================================================
   ALL ADDITIONS — append this entire block to the end of site.css
   Generated: May 2026
   ============================================================================= */

/* -----------------------------------------------------------------------------
   Campaign cards — rounded corners + gap
   Replaces the gap:0 / border-as-divider trick with gap + individual borders.
   ----------------------------------------------------------------------------- */

.campaign-grid {
  gap: 1.25rem;
  border: none;
  background: transparent;
}

.campaign-card {
  border-radius: 10px;
  border: 1px solid var(--rule);
}

.campaign-card.heather-block,
.campaign-card.fellside-block {
  border-color: transparent;
}

/* -----------------------------------------------------------------------------
   Campaigns section — breathing room below cards + remove now-redundant border
   ----------------------------------------------------------------------------- */

.campaigns { padding-bottom: 5rem; border-bottom: none; }

/* -----------------------------------------------------------------------------
   Sandstone top bar — separates every major section
   ----------------------------------------------------------------------------- */

.campaigns,
.section,
.cases-section,
.signup {
  border-top: 4px solid var(--sandstone);
}

/* Soften the bar on the dark Vault section */
.vault-section { border-top-color: rgba(212, 165, 116, 0.35); }

/* -----------------------------------------------------------------------------
   "It can be done" — cases section (home page)
   ----------------------------------------------------------------------------- */

.cases-section {
  padding: 5rem 0;
  background: var(--cream);
}

.cases-section .section-eyebrow { color: var(--rust); }

.cases-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
}

.cases-col {
  padding: 2.5rem;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
}

.cases-col.fellside-block { background: var(--fellside); color: var(--cream); }
.cases-col.heather-block  { background: var(--heather);  color: var(--cream); }

.cases-col-label {
  font-family: var(--ui);
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(250,246,236,0.6);
  font-weight: 600;
  margin: 0 0 0.75rem;
  display: block;
}

.cases-col h3 {
  font-size: clamp(1.2rem, 2vw, 1.55rem);
  color: var(--cream);
  margin: 0 0 0.75rem;
  line-height: 1.15;
}

.cases-col p {
  font-size: 1rem;
  line-height: 1.6;
  color: rgba(250,246,236,0.88);
  margin: 0 0 1.5rem;
  flex: 1;
}

.cases-link {
  font-family: var(--ui);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(250,246,236,0.9);
  text-decoration: none;
  border-bottom: 1.5px solid rgba(250,246,236,0.4);
  padding-bottom: 2px;
  display: inline-block;
  margin-top: auto;
  transition: opacity 0.15s, transform 0.15s;
}

.cases-link:hover {
  opacity: 0.75;
  color: rgba(250,246,236,0.9);
  transform: translateX(2px);
}

@media (max-width: 600px) {
  .cases-grid { grid-template-columns: 1fr; }
}

/* -----------------------------------------------------------------------------
   Mailing list signup — cream background
   ----------------------------------------------------------------------------- */

.signup { background: var(--cream); }

/* -----------------------------------------------------------------------------
   Case pages (/hospital-cases, /care-home-cases)
   ----------------------------------------------------------------------------- */

/* Hero */
.case-page-hero { padding: 4rem 0 3rem; }
.case-page-hero.fellside-bg { background: var(--fellside); }
.case-page-hero.heather-bg  { background: var(--heather); }

.case-page-hero .section-eyebrow {
  color: rgba(250,246,236,0.6);
}

.case-page-hero h1 {
  color: var(--cream);
  font-size: clamp(1.8rem, 3.5vw, 2.8rem);
  max-width: 24ch;
  margin-bottom: 0.85rem;
}

.case-hero-intro {
  font-size: 1.05rem;
  color: rgba(250,246,236,0.88);
  max-width: 58ch;
  line-height: 1.7;
  margin: 0;
}

/* Numbers bar */
.case-numbers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0;
  margin-top: 3rem;
  border-top: 1px solid rgba(250,246,236,0.15);
}

.case-number-item {
  padding: 1.5rem 1.75rem;
  border-right: 1px solid rgba(250,246,236,0.15);
}

.case-number-item:last-child { border-right: none; }

.case-number-value {
  font-family: var(--display);
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 700;
  color: var(--cream);
  line-height: 1;
  margin-bottom: 0.35rem;
}

.case-number-label {
  font-family: var(--ui);
  font-size: 12px;
  color: rgba(250,246,236,0.65);
  line-height: 1.4;
}

@media (max-width: 600px) {
  .case-numbers { grid-template-columns: repeat(2, 1fr); }
  .case-number-item:nth-child(even) { border-right: none; }
  .case-number-item { border-bottom: 1px solid rgba(250,246,236,0.15); }
}

/* Page body */
.case-body { padding: 4rem 0; }

/* Case entries */
.case-entry {
  padding: 2rem 0;
  border-bottom: 1px solid var(--rule);
}

.case-entry:last-child { border-bottom: none; }

.case-entry-where {
  font-family: var(--ui);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 0.5rem;
  font-weight: 600;
  display: block;
}

.case-entry h3 {
  font-size: clamp(1.1rem, 2vw, 1.35rem);
  color: var(--slate);
  margin: 0.5rem 0 0.75rem;
}

.case-entry p {
  font-size: 0.97rem;
  color: var(--ink-soft);
  line-height: 1.7;
  margin: 0 0 0.85rem;
  max-width: 72ch;
}

.case-entry p:last-child { margin-bottom: 0; }

/* Outcome badges */
.case-outcome-badge {
  display: inline-block;
  font-family: var(--ui);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 2px;
}

.outcome-won  { background: #d8ede3; color: #1e3828; }
.outcome-part { background: #f5ecd4; color: #6b4e10; }
.outcome-lost { background: #f5dcd8; color: #6b2010; }

/* Lesson callout */
.case-lesson {
  font-family: var(--ui);
  font-size: 0.88rem;
  line-height: 1.6;
  font-style: italic;
  padding: 0.85rem 1.1rem;
  border-radius: 4px;
  margin-top: 1rem;
  max-width: 68ch;
  border-left: 3px solid transparent;
}

.case-lesson.fellside-lesson {
  color: var(--fellside-deep);
  background: rgba(61,90,74,0.07);
  border-left-color: var(--fellside);
}

.case-lesson.heather-lesson {
  color: var(--heather-deep);
  background: rgba(123,90,140,0.07);
  border-left-color: var(--heather);
}

/* Timeline */
.bc-timeline { margin: 0; padding: 0; list-style: none; }

.bc-timeline-item {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 1.5rem;
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--rule);
}

.bc-timeline-item:last-child { border-bottom: none; }

.bc-timeline-date {
  font-family: var(--ui);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--heather);
  padding-top: 3px;
  line-height: 1.4;
}

.bc-timeline-content {
  font-size: 0.95rem;
  color: var(--ink-soft);
  line-height: 1.7;
  margin: 0;
  max-width: 68ch;
}

.bc-timeline-content strong { color: var(--slate); font-weight: 600; }

@media (max-width: 560px) {
  .bc-timeline-item { grid-template-columns: 1fr; gap: 0.2rem; }
  .bc-timeline-date { padding-top: 0; }
}

/* Strategy moves */
.strategy-moves { margin: 0; padding: 0; list-style: none; }

.strategy-move {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 1.25rem;
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--rule);
  align-items: start;
}

.strategy-move:last-child { border-bottom: none; }

.strategy-move-num {
  font-family: var(--display);
  font-size: 2rem;
  font-weight: 700;
  color: rgba(45,49,66,0.12);
  line-height: 1;
  padding-top: 2px;
}

.strategy-move h4 {
  font-family: var(--ui);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--slate);
  margin: 0 0 0.4rem;
  letter-spacing: 0.01em;
}

.strategy-move p {
  font-size: 0.9rem;
  color: var(--ink-soft);
  line-height: 1.7;
  margin: 0;
  max-width: 65ch;
}

@media (max-width: 560px) {
  .strategy-move { grid-template-columns: 36px 1fr; }
  .strategy-move-num { font-size: 1.5rem; }
}

/* Cases comparison table */
.cases-table-wrap {
  overflow-x: auto;
  margin: 1.5rem 0;
  border: 1px solid var(--rule);
  border-radius: 4px;
}

.cases-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
  font-family: var(--ui);
  min-width: 560px;
}

.cases-table th {
  text-align: left;
  padding: 0.7rem 1rem;
  background: var(--slate);
  color: var(--cream);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

.cases-table td {
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
  color: var(--ink-soft);
  line-height: 1.5;
}

.cases-table tr:last-child td { border-bottom: none; }
.cases-table tr:nth-child(even) td { background: var(--cream); }

/* Core insight box */
.core-insight {
  background: var(--cream);
  border: 1px solid var(--rule);
  border-left: 4px solid var(--sandstone);
  padding: 1.75rem 2rem;
  margin: 2.5rem 0;
  border-radius: 0 4px 4px 0;
  max-width: 72ch;
}

.core-insight p {
  font-size: 0.97rem;
  color: var(--ink-soft);
  line-height: 1.75;
  margin: 0;
}

.core-insight p + p { margin-top: 0.75rem; }

/* Caveats box */
.case-caveats {
  background: var(--cream);
  border: 1px solid var(--rule);
  padding: 1.75rem 2rem;
  margin: 2.5rem 0;
  border-radius: 4px;
}

.case-caveats-label {
  font-family: var(--ui);
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-weight: 700;
  margin: 0 0 0.85rem;
}

.case-caveats ul {
  padding: 0 0 0 1.25rem;
  margin: 0;
}

.case-caveats li {
  font-size: 0.93rem;
  color: var(--ink-soft);
  line-height: 1.7;
  margin-bottom: 0.5rem;
}

.case-caveats li:last-child { margin-bottom: 0; }

/* Sources */
.case-sources {
  padding: 2.5rem 0;
  border-top: 1px solid var(--rule);
}

.case-sources-label {
  font-family: var(--ui);
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-weight: 700;
  margin: 0 0 1rem;
}

.case-sources ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.case-sources li {
  font-family: var(--ui);
  font-size: 0.84rem;
  color: var(--ink-soft);
  line-height: 1.55;
  padding-left: 1.25rem;
  position: relative;
}

.case-sources li::before {
  content: '\2014';
  position: absolute;
  left: 0;
  color: var(--sandstone);
}

/* Section subheadings on case pages */
.case-section-heading {
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  color: var(--slate);
  margin: 2.5rem 0 0.5rem;
  padding-top: 2.5rem;
  border-top: 1px solid var(--rule);
}

.case-section-heading:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

.case-section-intro {
  font-size: 0.97rem;
  color: var(--ink-soft);
  max-width: 68ch;
  line-height: 1.7;
  margin: 0 0 1.5rem;
}

.cases-section h2 {
  font-size: clamp(1.8rem, 3.5vw, 2.6rem);
  max-width: 28ch;
  margin-bottom: 0.5rem;
}

.campaigns h2 {
  font-size: clamp(1.8rem, 3.5vw, 2.6rem);
  max-width: 28ch;
  margin-bottom: 0.5rem;
}

/* ============================================================================
   Feedback lightbox — back-office panel (feedback-lightbox.php)
   and Leave feedback button in backoffice-subnav.php.
   ============================================================================ */

/* ---------- Back-office subnav: flex restructure to accommodate button ------ */

/* Change the desktop container from block to flex so the groups sit on
   the left and the Leave feedback button floats to the right. */
.bo-desktop {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
}

/* Wraps the three group rows (Workspace / Vault / Admin). */
.bo-desktop-groups {
  flex: 1;
  min-width: 0;
}

/* Holds the Leave feedback button, vertically aligned with the first row. */
.bo-desktop-actions {
  flex: 0 0 auto;
  padding-top: 0.35rem;
}

/* Mobile: feedback button sits below the nav groups. */
.bo-mobile-feedback {
  padding: 0.6rem 0 0.2rem;
  border-top: 0.5px solid rgba(255, 255, 255, 0.08);
  margin-top: 0.4rem;
}

/* ---------- Leave feedback button ------------------------------------------ */

.bo-feedback-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: #E8A552;   /* --ochre */
  color: #1E1C2A;
  border: none;
  padding: 9px 18px;
  border-radius: 22px;
  font-family: var(--ui);
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.01em;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.15s ease, transform 0.1s ease;
}

.bo-feedback-btn svg {
  flex-shrink: 0;
}

.bo-feedback-btn:hover {
  background: #d4913d;
  transform: translateY(-1px);
}

.bo-feedback-btn:active {
  transform: translateY(0);
}

.bo-feedback-btn:focus-visible {
  outline: 2px solid #E8A552;
  outline-offset: 3px;
}

/* Mobile variant fills the full width of the panel. */
.bo-mobile-feedback .bo-feedback-btn {
  width: 100%;
  justify-content: center;
  padding: 10px 18px;
  font-size: 14px;
  border-radius: 22px;
}

/* ---- Feedback flag — fixed right-edge tab that slides open on hover ---- */

/* Outer wrapper: fixed to viewport right edge, always visible while scrolling. */
.fb-flag {
  position: fixed;
  top: 160px;    /* clears the topbar + subnav comfortably */
  right: 0;
  z-index: 800;  /* below the lightbox overlay (z-index 900) */
  display: flex;
  align-items: stretch;
  cursor: pointer;
  /* Hidden from guests — toggled to flex by JS when user is logged in */
}

/* Vertical "Feedback" label tab */
.fb-flag-tab {
  background: #E8A552;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transform: rotate(180deg);
  padding: 16px 8px;
  font-family: var(--ui);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #1E1C2A;
  border-radius: 4px 0 0 4px;
  white-space: nowrap;
  user-select: none;
  transition: background-color 0.15s ease;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Slide-out panel */
.fb-flag-panel {
  background: #E8A552;
  width: 0;
  overflow: hidden;
  transition: width 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  align-items: center;
  border-radius: 6px 0 0 6px;
}

.fb-flag-panel-inner {
  padding: 18px 20px;
  width: 270px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 13px;
}

.fb-flag-panel-inner p {
  font-family: var(--ui);
  font-size: 13.5px;
  color: #1E1C2A;
  font-weight: 500;
  line-height: 1.5;
  margin: 0;
}

/* Inner button inside the flag panel */
.fb-flag-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #1E1C2A;
  color: #E8A552;
  border: none;
  padding: 8px 16px;
  border-radius: 20px;
  font-family: var(--ui);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  align-self: flex-start;
  transition: background-color 0.15s ease;
}

.fb-flag-cta:hover {
  background: #2D3142;
}

.fb-flag-cta:focus-visible {
  outline: 2px solid #1E1C2A;
  outline-offset: 3px;
}

/* Hover: slide panel open, darken tab */
.fb-flag:hover .fb-flag-panel {
  width: 270px;
}

.fb-flag:hover .fb-flag-tab {
  background: #d4913d;
  border-radius: 0;
}

/* Keyboard focus equivalent */
.fb-flag:focus-within .fb-flag-panel {
  width: 270px;
}

.fb-flag:focus-within .fb-flag-tab {
  background: #d4913d;
  border-radius: 0;
}

/* ---------- Back-office nav item badge ------------------------------------- */

/* Counts shown on vault nav items (e.g. unreviewed feedback). */
.bo-item-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  margin-left: 0.25rem;
  background: rgba(255, 255, 255, 0.9);
  color: #333;
  border-radius: 8px;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  vertical-align: middle;
}

/* ---------- Feedback lightbox overlay and modal ---------------------------- */

.fb-overlay {
  position: fixed;
  inset: 0;
  z-index: 900;
  background: rgba(45, 49, 66, 0.72);  /* --slate at 72% */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  /* Hidden by default: pointer-events and opacity controlled together so
     keyboard focus cannot reach hidden content. */
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease;
}

.fb-overlay.fb-is-open {
  opacity: 1;
  pointer-events: auto;
}

.fb-modal {
  background: var(--paper);
  border-radius: 5px;
  width: 100%;
  max-width: 500px;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
  box-shadow: 0 6px 32px rgba(0, 0, 0, 0.22);
}

/* ---------- Close button (× in top-right corner) --------------------------- */

.fb-close-btn {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  background: none;
  border: none;
  color: rgba(250, 246, 236, 0.75);  /* --cream at 75% */
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 2px;
  transition: color 0.12s ease;
  z-index: 1;
}

.fb-close-btn:hover {
  color: #FAF6EC;
}

.fb-close-btn:focus-visible {
  outline: 2px solid #FAF6EC;
  outline-offset: 2px;
}

/* ---------- Modal header bar ----------------------------------------------- */

.fb-modal-body {
  padding: 0;
}

.fb-modal-header {
  background: #5A3F6B;   /* --heather-deep */
  padding: 1.1rem 3rem 1rem 1.4rem;  /* right padding clears the × button */
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.fb-header-icon {
  color: rgba(250, 246, 236, 0.75);
  flex-shrink: 0;
}

.fb-modal-title {
  font-family: var(--display);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--cream);
  margin: 0;
  line-height: 1.2;
}

/* Success state title needs the same treatment. */
.fb-success-wrap .fb-modal-title {
  color: var(--slate);
}

/* ---------- Modal body content --------------------------------------------- */

.fb-modal-intro {
  font-family: var(--ui);
  font-size: 13.5px;
  color: var(--ink-soft);
  line-height: 1.55;
  margin: 0;
  padding: 1rem 1.4rem 0;
}

.fb-error-banner {
  font-family: var(--ui);
  font-size: 13.5px;
  color: #7a1a1a;
  background: #fdecea;
  border-left: 3px solid #c62828;
  padding: 0.55rem 1rem;
  margin: 0.75rem 1.4rem 0;
  border-radius: 0 2px 2px 0;
}

/* ---------- Form fields ---------------------------------------------------- */

.fb-field-group {
  padding: 0.75rem 1.4rem 0;
}

.fb-label {
  display: block;
  font-family: var(--ui);
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--slate);
  margin-bottom: 5px;
}

.fb-required {
  color: var(--heather);
}

.fb-optional {
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--ink-soft);
  font-size: 11.5px;
}

.fb-select,
.fb-input,
.fb-textarea {
  width: 100%;
  border: 1px solid rgba(45, 49, 66, 0.2);
  border-radius: 3px;
  padding: 8px 10px;
  font-family: var(--ui);
  font-size: 14px;
  color: var(--ink);
  background: var(--cream);
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
  appearance: none;
}

.fb-select {
  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='%234A4A4A' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 28px;
}

.fb-select:focus,
.fb-input:focus,
.fb-textarea:focus {
  outline: none;
  border-color: var(--heather);
  box-shadow: 0 0 0 3px rgba(123, 90, 140, 0.15);
}

.fb-textarea {
  resize: vertical;
  min-height: 100px;
  line-height: 1.5;
}

.fb-input-readonly {
  background: rgba(45, 49, 66, 0.04);
  color: var(--ink-soft);
  cursor: default;
}

.fb-hint {
  font-family: var(--ui);
  font-size: 12px;
  color: var(--ink-soft);
  margin-top: 4px;
  line-height: 1.45;
}

/* ---------- Form action buttons -------------------------------------------- */

.fb-form-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.4rem 1.4rem;
}

.fb-btn-primary {
  background: #5A3F6B;   /* --heather-deep */
  color: var(--cream);
  border: none;
  padding: 9px 22px;
  border-radius: 3px;
  font-family: var(--ui);
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.12s ease;
}

.fb-btn-primary:hover {
  background: var(--heather);
}

.fb-btn-primary:focus-visible {
  outline: 2px solid var(--heather-deep);
  outline-offset: 2px;
}

.fb-btn-primary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.fb-btn-secondary {
  background: none;
  border: 1px solid rgba(45, 49, 66, 0.2);
  color: var(--ink-soft);
  padding: 8px 18px;
  border-radius: 3px;
  font-family: var(--ui);
  font-size: 13.5px;
  cursor: pointer;
  transition: background-color 0.12s ease, border-color 0.12s ease;
}

.fb-btn-secondary:hover {
  background: rgba(45, 49, 66, 0.06);
  border-color: rgba(45, 49, 66, 0.3);
}

/* ---------- Success state -------------------------------------------------- */

.fb-success-wrap {
  padding: 2.5rem 1.4rem 2rem;
  text-align: center;
}

.fb-success-icon {
  color: #3D5A4A;  /* --fellside */
  margin-bottom: 1rem;
  display: flex;
  justify-content: center;
}

.fb-success-wrap p {
  font-family: var(--ui);
  font-size: 14.5px;
  color: var(--ink-soft);
  margin: 0.6rem 0 1.5rem;
  line-height: 1.55;
}

.fb-success-wrap .fb-btn-primary {
  display: inline-block;
}

/* ---------- Vault feedback admin list -------------------------------------- */

.fb-admin-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.fb-admin-item {
  border: 1px solid rgba(45, 49, 66, 0.12);
  border-radius: 4px;
  overflow: hidden;
  background: var(--paper);
}

.fb-item-unreviewed {
  border-left: 3px solid var(--ochre);
}

.fb-item-reviewed {
  opacity: 0.72;
}

.fb-admin-item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  background: rgba(45, 49, 66, 0.03);
  border-bottom: 1px solid rgba(45, 49, 66, 0.08);
}

.fb-admin-item-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.fb-type-badge {
  display: inline-block;
  font-family: var(--ui);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 3px 9px;
  border-radius: 3px;
  color: #fff;
}

.fb-unreviewed-pill {
  display: inline-block;
  background: var(--ochre);
  color: var(--slate);
  font-family: var(--ui);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 2px 7px;
  border-radius: 2px;
}

.fb-admin-date {
  font-family: var(--ui);
  font-size: 12px;
  color: var(--ink-soft);
}

.fb-admin-item-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.fb-action-btn {
  font-family: var(--ui);
  font-size: 12px;
  font-weight: 600;
  padding: 4px 11px;
  border-radius: 3px;
  cursor: pointer;
  border: none;
  transition: background-color 0.12s ease;
}

.fb-action-review {
  background: #3D5A4A;  /* --fellside */
  color: #FAF6EC;
}

.fb-action-review:hover {
  background: #4f7359;
}

.fb-action-delete {
  background: none;
  border: 1px solid rgba(198, 110, 71, 0.35);
  color: var(--rust);
}

.fb-action-delete:hover {
  background: rgba(198, 110, 71, 0.08);
  border-color: var(--rust);
}

.fb-reviewed-note {
  font-family: var(--ui);
  font-size: 12px;
  color: var(--ink-soft);
  font-style: italic;
}

.fb-admin-item-body {
  padding: 0.75rem 1rem 1rem;
}

.fb-admin-submitter {
  font-family: var(--ui);
  font-size: 13px;
  margin-bottom: 0.4rem;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.3rem;
}

.fb-admin-email {
  color: var(--ink-soft);
  font-size: 12px;
}

.fb-role-tag {
  display: inline-block;
  background: rgba(45, 49, 66, 0.08);
  color: var(--slate);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 2px 6px;
  border-radius: 2px;
}

.fb-admin-page,
.fb-admin-subject {
  font-family: var(--ui);
  font-size: 12.5px;
  color: var(--ink-soft);
  margin-bottom: 0.35rem;
}

.fb-admin-page code {
  font-family: 'DM Mono', monospace;
  background: rgba(45, 49, 66, 0.07);
  padding: 1px 5px;
  border-radius: 2px;
  font-size: 12px;
  color: var(--slate);
}

.fb-admin-page-title {
  color: var(--ink-soft);
}

.fb-admin-field-label {
  font-weight: 600;
  color: var(--slate);
}

.fb-admin-subject {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--slate);
}

.fb-admin-message {
  font-size: 14px;
  color: var(--ink);
  line-height: 1.6;
  margin-top: 0.5rem;
  white-space: pre-wrap;
  word-break: break-word;
}

/* Responsive: collapse admin item header to stacked layout on narrow screens. */
@media (max-width: 600px) {
  .fb-admin-item-header {
    flex-direction: column;
    align-items: flex-start;
  }
  .fb-admin-item-actions {
    width: 100%;
  }
}

/* =============================================================================
   Drop-in session feedback — appended 4 June 2026
   Public form additions (dis-*) and back-office screens (sf-*).
   APPEND to the bottom of assets/css/site.css. Uses existing variables only;
   defines new selectors and two deliberate label overrides for consent rows.
   ============================================================================= */

/* ---------- Public form: selects and file inputs in the wide form box ---------- */
.formbox-wide select {
  width: 100%;
  padding: 0.85rem 1rem;
  font-family: var(--ui);
  font-size: 15px;
  border: 2px solid var(--rule);
  background: var(--paper);
  color: var(--ink);
  border-radius: 2px;
  margin-bottom: 1.25rem;
}
.formbox-wide select:focus {
  outline: none;
  border-color: var(--heather);
  box-shadow: 0 0 0 3px rgba(123, 90, 140, 0.15);
}
.formbox-wide input[type="file"] {
  width: 100%;
  padding: 0.7rem 0.85rem;
  font-family: var(--ui);
  font-size: 14px;
  border: 2px dashed var(--rule);
  background: var(--cream);
  color: var(--ink);
  border-radius: 2px;
}

/* ---------- Public form: section separators ---------- */
.dis-fieldset {
  border-top: 1px solid var(--rule);
  padding-top: 1.5rem;
  margin-bottom: 0.5rem;
}

/* ---------- Quick questions (shared by the public form and member entry) ---------- */
.dis-questions {
  border-top: 1px solid var(--rule);
  padding-top: 1.5rem;
  margin-bottom: 1.25rem;
}
.dis-questions-title {
  font-family: var(--ui);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--slate);
  margin: 0 0 0.25rem;
}
.dis-questions-help {
  font-family: var(--ui);
  font-size: 13px;
  color: var(--ink-soft);
  margin: 0 0 1.1rem;
}
.dis-question {
  border: 0;
  padding: 0;
  margin: 0 0 1.1rem;
  min-width: 0;
}
.dis-question legend {
  font-family: var(--ui);
  font-size: 15px;
  color: var(--ink);
  padding: 0;
  margin-bottom: 0.4rem;
  line-height: 1.45;
}
.dis-options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.4rem;
}
.dis-option {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--ui);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
  cursor: pointer;
  margin-bottom: 0;
}
.dis-option input[type="radio"] {
  accent-color: var(--heather);
  width: 16px;
  height: 16px;
  margin: 0;
  flex: 0 0 auto;
}

/* ---------- Consent rows (override the uppercase formbox label style) ---------- */
.dis-consent { margin-bottom: 0.9rem; }
.dis-consent label {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-family: var(--ui);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
  line-height: 1.55;
  cursor: pointer;
  margin-bottom: 0;
}
.dis-consent input[type="checkbox"] {
  accent-color: var(--heather);
  width: 16px;
  height: 16px;
  margin-top: 2px;
  flex: 0 0 auto;
}
.dis-required {
  color: var(--rust);
  font-weight: 600;
}

/* ---------- Back office: photo grid on the detail page ---------- */
.sf-photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 1rem;
  margin: 0.5rem 0 1.75rem;
}
.sf-photo-card {
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 0.6rem;
  background: var(--paper);
  min-width: 0;
}
.sf-photo-card img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 2px;
}
.sf-photo-meta {
  font-family: var(--ui);
  font-size: 12px;
  color: var(--ink-soft);
  margin: 0.5rem 0 0;
  overflow-wrap: anywhere;
}
.sf-photo-actions {
  margin-top: 0.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.sf-photo-actions form {
  display: inline;
  margin: 0;
}

/* ---------- Back office: submitted text blocks ---------- */
.sf-text {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  background: var(--cream);
  border-left: 3px solid var(--heather);
  padding: 0.85rem 1.1rem;
  border-radius: 2px;
  margin: 0.25rem 0 1.5rem;
  font-size: 1rem;
  line-height: 1.6;
}

/* ---------- Back office: detail meta grid ---------- */
.sf-meta-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.85rem 2rem;
  margin: 0 0 1.75rem;
  font-family: var(--ui);
  font-size: 14px;
}
.sf-meta-grid > div { min-width: 0; }
.sf-meta-grid dt {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 0.15rem;
}
.sf-meta-grid dd {
  margin: 0;
  color: var(--ink);
  overflow-wrap: anywhere;
}

/* ---------- Back office: tag pills and the tag picker ---------- */
.sf-tagpill {
  display: inline-block;
  padding: 2px 10px;
  font-family: var(--ui);
  font-size: 0.75rem;
  border-radius: 999px;
  background: rgba(45, 49, 66, 0.08);
  color: var(--slate);
  border: 1px solid var(--rule);
  margin: 0 0.25rem 0.25rem 0;
}
.sf-tagpick {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 4px 12px 4px 8px;
  font-family: var(--ui);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  border-radius: 999px;
  background: var(--cream);
  border: 1px solid var(--rule);
  margin: 0 0.4rem 0.4rem 0;
  cursor: pointer;
  color: var(--ink);
}
.sf-tagpick input[type="checkbox"] {
  accent-color: var(--heather);
  margin: 0;
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
}

/* ---------- Back office: stats bars ---------- */
.sf-bar {
  background: var(--cream);
  border: 1px solid var(--rule);
  border-radius: 999px;
  height: 14px;
  overflow: hidden;
  max-width: 320px;
}
.sf-bar-fill {
  background: var(--heather);
  height: 100%;
}

/* ---------- Back office: collapsible admin edit panel ---------- */
.sf-editbox {
  border: 1px solid var(--rule);
  border-radius: 4px;
  background: var(--cream);
  margin: 0 0 1.75rem;
}
.sf-editbox > summary {
  cursor: pointer;
  padding: 0.8rem 1.1rem;
  font-family: var(--ui);
  font-size: 14px;
  font-weight: 600;
  color: var(--slate);
  list-style: none;
}
.sf-editbox > summary::-webkit-details-marker { display: none; }
.sf-editbox > summary::before { content: '\25B8\00A0'; }
.sf-editbox[open] > summary::before { content: '\25BE\00A0'; }
.sf-editbox-body { padding: 0 1.1rem 1.1rem; }