/* ======================================== 
   CHARITY CATALYST — WARM SANDY CHARITY THEME
   Serif body (Lora) · Sans-serif headings (DM Sans)
   Sandy / Teal / Navy palette
   ======================================== */

:root {
  /* Primary Accent — Teal */
  --accent: #2aa198;
  --accent-dark: #1a7872;
  --accent-light: #7dd3cb;
  --accent-gradient: linear-gradient(135deg, #2aa198 0%, #1a7872 100%);

  /* Secondary Accent — Navy */
  --navy: #1b365d;
  --navy-dark: #0f1f3a;
  --navy-light: #2e5090;
  --navy-gradient: linear-gradient(135deg, #1b365d 0%, #2e5090 100%);

  /* Warm Sandy Palette */
  --sand: #f5f0e6;
  --sand-dark: #e8dfd0;
  --sand-light: #faf7f1;
  --cream: #fffcf6;
  --coral: #e87461;
  --sunset-orange: #f09860;

  /* Backgrounds */
  --bg: #faf7f1;
  --bg-light: #f7f3eb;
  --bg-sand: #f5f0e6;
  --bg-wave: linear-gradient(135deg, rgba(42, 161, 152, 0.04) 0%, rgba(245, 240, 230, 0.6) 100%);

  /* Text Colors */
  --text: #3d3530;
  --text-light: #6b5e54;
  --text-dark: #1e1916;

  /* UI Elements */
  --border: #e5ddd2;
  --border-light: #f0ebe3;
  --shadow-sm: 0 2px 8px rgba(42, 161, 152, 0.07);
  --shadow-md: 0 4px 20px rgba(27, 54, 93, 0.08);
  --shadow-lg: 0 8px 36px rgba(27, 54, 93, 0.12);
  --shadow-hover: 0 14px 44px rgba(27, 54, 93, 0.16);

  /* Status Colors */
  --success: #4caf50;
  --success-light: #66bb6a;
  --error: #e53935;
  --error-light: #ef5350;
  --warning: #f59e0b;
  --info: #2196f3;

  /* Spacing */
  --spacing-xs: 8px;
  --spacing-sm: 16px;
  --spacing-md: 24px;
  --spacing-lg: 32px;
  --spacing-xl: 48px;
  --spacing-xxl: 72px;

  /* Border Radius */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-pill: 50px;

  /* Transitions */
  --transition-fast: 0.15s ease;
  --transition-base: 0.3s ease;
  --transition-slow: 0.5s ease;

  /* Font stacks */
  --font-body: 'Alegreya Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-heading: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Volunteer hub layout */
  --header-h: 76px;
  --sidebar-w: 244px;
}

* {
  box-sizing: border-box;
}

body {
  font-family: var(--font-body);
  margin: 0;
  background: var(--bg);
  color: var(--text);
  line-height: 1.7;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-size: 18px;
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.25;
  margin-top: 0;
  color: var(--navy);
}

h1 {
  font-size: 2.8em;
  font-weight: 800;
  margin-bottom: var(--spacing-lg);
  color: var(--navy);
  letter-spacing: -0.02em;
}

h2 {
  font-size: 2.2em;
  margin-bottom: var(--spacing-md);
  color: var(--navy);
}

h3 {
  font-size: 1.55em;
  margin-bottom: var(--spacing-sm);
}

p {
  margin-bottom: var(--spacing-md);
  line-height: 1.7;
}

a {
  transition: all var(--transition-base);
}

.lead {
  font-size: 1.3em;
  color: var(--text-light);
  margin-bottom: var(--spacing-lg);
  line-height: 1.8;
  font-weight: 400;
}

/* ========================================
   HEADER & NAVIGATION
   ======================================== */

.site-header {
  background: var(--sand-light);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 12px rgba(27, 54, 93, 0.06);
  position: sticky;
  top: 0;
  z-index: 100;
  backdrop-filter: blur(12px);
}

.header-inner {
  position: relative;
  max-width: 100%;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-md);
  padding: var(--spacing-sm) var(--spacing-lg);
}

.logo {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  flex-shrink: 0;
}

.logo img {
  height: 48px;
  display: block;
  transition: transform var(--transition-base);
}

.logo a {
  display: block;
  line-height: 0;
}

/* "Volunteer Hub" wordmark beside the logo on hub pages */
.hub-tag {
  font-family: var(--font-heading);
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-dark);
  padding-left: var(--spacing-sm);
  border-left: 1px solid var(--border);
  line-height: 1.2;
  white-space: nowrap;
}

.logo img:hover {
  transform: scale(1.05);
}

/* Navigation */
.main-nav {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
}

.nav-auth {
  display: flex;
  gap: var(--spacing-xs);
  align-items: center;
  margin-left: var(--spacing-sm);
  flex-shrink: 0;
}

/* Hamburger. Hidden on wide screens; the media queries below swap it in and
   turn .main-nav into a drop-down panel. */
.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-left: auto;
  padding: 0;
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--navy);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  transition: all var(--transition-base);
}

.nav-toggle i {
  margin-right: 0;
}

.nav-toggle:hover {
  border-color: var(--accent);
  color: var(--accent-dark);
  background: rgba(42, 161, 152, 0.06);
}

.nav-toggle[aria-expanded="true"] {
  border-color: var(--accent);
  color: var(--accent-dark);
  background: rgba(42, 161, 152, 0.1);
}

.user-info-header {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  margin-left: auto;
  background: none;
  box-shadow: none;
  border: none;
  padding: 0;
}

.user-info {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  margin-left: var(--spacing-md);
}

.username {
  color: var(--navy);
  font-weight: 600;
  font-size: 1em;
  font-family: var(--font-heading);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.username i {
  color: var(--text-light);
  font-size: 1.15em;
  margin-right: 0;
}

/* nowrap is what stops "For Charities" breaking onto two lines and going
   ragged-left as the window narrows. */
.main-nav > a {
  color: var(--text);
  text-decoration: none;
  padding: var(--spacing-sm) 14px;
  border-radius: var(--radius-sm);
  transition: all var(--transition-base);
  font-weight: 600;
  font-size: 0.95em;
  font-family: var(--font-heading);
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.main-nav > a::after {
  content: '';
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%) scaleX(0);
  width: 60%;
  height: 2px;
  background: var(--accent);
  transition: transform var(--transition-base);
}

.main-nav > a:hover {
  color: var(--accent-dark);
  background: rgba(42, 161, 152, 0.06);
}

.main-nav > a:hover::after {
  transform: translateX(-50%) scaleX(1);
}

.main-nav > a.nav-active {
  color: var(--accent-dark);
}

.main-nav > a.nav-active::after {
  transform: translateX(-50%) scaleX(1);
  background: var(--accent);
}

.btn-login,
.btn-register {
  background: var(--accent-gradient);
  color: white !important;
  padding: 10px 20px !important;
  border-radius: var(--radius-pill);
  font-weight: 600;
  box-shadow: var(--shadow-sm);
  font-size: 0.95em;
  white-space: nowrap;
  text-decoration: none;
}

.btn-login::after,
.btn-register::after {
  display: none;
}

.btn-login:hover,
.btn-register:hover {
  background: var(--accent-dark) !important;
  color: white !important;
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.btn-hub {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--accent-gradient);
  color: white;
  padding: 10px 22px;
  border-radius: var(--radius-pill);
  font-weight: 600;
  text-decoration: none;
  transition: all var(--transition-base);
  box-shadow: var(--shadow-sm);
  font-size: 0.95em;
  white-space: nowrap;
  flex-shrink: 0;
}

.btn-hub i {
  margin-right: 0;
}

.btn-hub:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.logout-link {
  color: var(--text-light) !important;
  font-size: 1em;
}

/* ========================================
   PUBLIC HEADER — RESPONSIVE

   Breakpoints are measured, not guessed. Laid out at full size the six nav
   items need 864px; with the logo and the signed-in name plus Volunteer Hub
   button either side, the bar needs ~1440px to fit. Dropping the icons and
   tightening the spacing brings the nav to 593px, which fits down to ~1120px.
   Below that there is no honest way to keep six items on one line, so it
   collapses into a drop-down panel behind the hamburger.

   Getting these wrong is what made the nav wrap into a ragged second row and
   run underneath the logo, so keep them in step with the measurements above if
   nav items are ever added or renamed.
   ======================================== */

@media (max-width: 1500px) {
  .header-inner {
    padding: var(--spacing-sm) var(--spacing-md);
  }

  .main-nav > a {
    padding: var(--spacing-sm) 9px;
    font-size: 0.88em;
    gap: 5px;
  }

  .main-nav > a i {
    display: none;
  }

  .btn-login,
  .btn-register {
    padding: 9px 16px !important;
    font-size: 0.88em;
  }

  .btn-hub {
    padding: 9px 18px;
    font-size: 0.88em;
  }

  .user-info-header .username {
    font-size: 0.9em;
  }
}

@media (max-width: 1180px) {
  /* margin-left: 0 so the auto margin on .user-info-header is the only one
     claiming the free space — otherwise the two share it and the signed-in
     name floats in the middle of the bar. */
  .nav-toggle {
    display: inline-flex;
    order: 3;
    margin-left: var(--spacing-sm);
  }

  /* Drops out of the flex row and becomes a panel under the bar. */
  .main-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 2px;
    padding: var(--spacing-sm);
    background: var(--sand-light);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-md);
    max-height: calc(100vh - 100%);
    overflow-y: auto;
  }

  .main-nav.is-open {
    display: flex;
  }

  .main-nav > a {
    width: 100%;
    padding: 12px var(--spacing-sm);
    font-size: 1em;
    gap: 10px;
  }

  .main-nav > a i {
    display: inline-block;
    width: 20px;
    text-align: center;
    color: var(--accent);
  }

  /* The sliding underline reads as a stray dash in a vertical list. */
  .main-nav > a::after {
    display: none;
  }

  .main-nav > a.nav-active {
    background: rgba(42, 161, 152, 0.1);
  }

  .nav-auth {
    width: 100%;
    margin: var(--spacing-xs) 0 0;
    padding-top: var(--spacing-sm);
    border-top: 1px solid var(--border);
    gap: var(--spacing-xs);
  }

  .nav-auth a {
    flex: 1;
    text-align: center;
  }

  .user-info-header {
    margin-left: auto;
    gap: var(--spacing-sm);
  }
}

/* Below this the username is the first thing worth dropping — the Volunteer
   Hub button it sits beside is the actual destination. */
@media (max-width: 600px) {
  .site-header .user-info-header .username {
    display: none;
  }
}

@media (max-width: 400px) {
  .btn-hub span {
    display: none;
  }

  .btn-hub {
    padding: 9px 14px;
  }
}

/* ========================================
   PAGE LAYOUT
   ======================================== */

/* flex: 1 instead of the old `calc(100vh - 180px)`, which guessed at the header
   and footer heights. Hub pages get a real minimum below — see
   .main-content.with-sidebar. */
.page-wrapper {
  display: flex;
  align-items: stretch;
  flex: 1;
  background: var(--bg);
}

.sidebar {
  width: var(--sidebar-w);
  flex-shrink: 0;
  background: var(--sand);
  border-right: 1px solid var(--border);
  padding: var(--spacing-md) 0 var(--spacing-xl);
}

/* The rail fills the column so the sand band never stops short of the content,
   while the links themselves stay in view as the page scrolls. */
.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0 12px;
  position: sticky;
  top: calc(var(--sticky-top, var(--header-h)) + var(--spacing-md));
}

.sidebar-link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  color: var(--text);
  text-decoration: none;
  transition: background var(--transition-fast), color var(--transition-fast);
  font-weight: 500;
  font-family: var(--font-heading);
  border-radius: var(--radius-sm);
  font-size: 0.97em;
  line-height: 1.3;
}

/* Single accent marker, inset so its ends clear the pill's rounded corners. */
.sidebar-link::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 3px;
  height: 0;
  border-radius: 0 3px 3px 0;
  background: var(--accent);
  transform: translateY(-50%);
  transition: height var(--transition-base);
}

.sidebar-link:hover {
  background: rgba(42, 161, 152, 0.07);
  color: var(--accent-dark);
}

.sidebar-link.active {
  background: rgba(42, 161, 152, 0.1);
  color: var(--accent-dark);
  font-weight: 700;
}

.sidebar-link.active::before {
  height: 22px;
}

.sidebar-divider {
  height: 1px;
  background: var(--border);
  margin: var(--spacing-sm) 14px;
}

.sidebar-section-title {
  font-size: 0.84em;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--text-light);
  padding: var(--spacing-xs) 14px;
  letter-spacing: 0.1em;
  font-family: var(--font-heading);
}

/* How much is waiting behind an admin link. Here rather than in admin.css
   because coordinators see the sidebar on every hub page, not only the admin
   ones; the class is only ever written into the staff part of the menu, so
   no volunteer's page contains anything it applies to. */
.sidebar-count {
  margin-left: auto;
  min-width: 22px;
  padding: 1px 7px;
  border-radius: var(--radius-pill);
  background: var(--warning);
  color: #fff;
  font-family: var(--font-heading);
  font-size: 0.78em;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.sidebar-count-live {
  background: var(--accent);
}

.main-content {
  flex: 1;
  min-width: 0;
  padding: var(--spacing-md) var(--spacing-xl);
  max-width: 100%;
}

/* Public pages are built from full-bleed sections that each bring their own
   inner container and padding. Giving them an unpadded column means they no
   longer have to cancel this padding with negative margins — a trick that
   silently broke, and pushed every section 8px past both screen edges, as
   soon as --spacing-xl shrank at the 768px breakpoint. */
.main-content:not(.with-sidebar) {
  padding: 0;
}

/* Fills the first screen so the footer starts just below the fold on every hub
   page. Without it a short page (an empty Pending Uploads, say) puts the footer
   halfway up the screen while a long one puts it off-screen, which is what made
   the footer look like it moved between pages. */
.main-content.with-sidebar {
  padding: var(--spacing-lg) var(--spacing-lg);
  max-width: calc(100% - var(--sidebar-w));
  min-height: calc(100vh - var(--header-h));
}

/* ========================================
   LOGOUT BUTTON
   ======================================== */

/* Beats the global `form button[type=submit]` pill so the header keeps a quiet
   secondary action instead of a second primary-looking button. */
.logout-btn,
form.plain-form button.logout-btn[type="submit"] {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: 1px solid transparent;
  color: var(--text-light);
  font-size: 0.92em;
  font-family: var(--font-heading);
  font-weight: 600;
  padding: 7px 14px;
  cursor: pointer;
  border-radius: var(--radius-pill);
  box-shadow: none;
  transition: all var(--transition-base);
}

.logout-btn i {
  margin-right: 0;
  font-size: 1.05em;
}

.logout-btn:hover,
form.plain-form button.logout-btn[type="submit"]:hover {
  color: var(--accent-dark);
  background: rgba(42, 161, 152, 0.08);
  border-color: rgba(42, 161, 152, 0.25);
  transform: none;
  box-shadow: none;
}

/* ========================================
   COMPACT HEADER (logged-in dashboard)
   ======================================== */

.header-compact .header-inner {
  height: var(--header-h);
  padding: 0 var(--spacing-lg);
  gap: var(--spacing-md);
}

.header-compact .logo img {
  height: 46px;
}

.header-compact .username {
  font-size: 0.95em;
}

.header-compact .logout-btn {
  font-size: 0.95em;
  padding: 8px 16px;
}

/* ========================================
   FORMS
   ======================================== */

form {
  background: var(--sand-light);
  padding: var(--spacing-xl);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  max-width: 500px;
}

/* Forms that exist only to carry a single action (log out, mark as seen) are
   not panels — without this the global rule above draws a card around them. */
form.plain-form {
  display: inline;
  background: none;
  padding: 0;
  margin: 0;
  border: none;
  border-radius: 0;
  box-shadow: none;
  max-width: none;
}

form p {
  margin-bottom: var(--spacing-md);
}

form label {
  display: block;
  font-weight: 600;
  margin-bottom: var(--spacing-sm);
  color: var(--navy);
  font-size: 1em;
  font-family: var(--font-heading);
}

form input[type="text"],
form input[type="email"],
form input[type="password"],
form input[type="file"],
form textarea,
form select {
  width: 100%;
  padding: 14px 18px;
  border: 2px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 1em;
  font-family: var(--font-body);
  transition: all var(--transition-base);
  background: #ffffff;
  color: var(--text);
}

form input:focus,
form textarea:focus,
form select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(42, 161, 152, 0.1);
  background: #ffffff;
}

/* :not(.btn) so a button that opts into the button system — .btn-secondary,
   .btn-reject — is not overridden back to a primary pill by this fallback. */
form button[type="submit"]:not(.btn) {
  background: var(--accent-gradient);
  color: white;
  padding: 14px 32px;
  border: none;
  border-radius: var(--radius-pill);
  font-size: 1em;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-base);
  box-shadow: var(--shadow-sm);
  font-family: var(--font-heading);
}

form button[type="submit"]:not(.btn):hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

form button[type="submit"]:not(.btn):active {
  transform: translateY(0);
}

form .helptext {
  display: block;
  font-size: 0.95em;
  color: var(--text-light);
  margin-top: 6px;
  line-height: 1.5;
}

form .errorlist {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--spacing-sm) 0;
  color: var(--error);
  font-size: 1em;
}

/* ========================================
   MESSAGES & ALERTS
   ======================================== */

.messages {
  list-style: none;
  padding: 0;
  margin-bottom: var(--spacing-lg);
}

.message {
  background: rgba(42, 161, 152, 0.08);
  box-shadow: inset 3px 0 0 var(--accent);
  padding: 12px var(--spacing-md);
  margin-bottom: var(--spacing-sm);
  border-radius: var(--radius-sm);
  font-size: 0.95em;
  font-weight: 500;
  color: var(--text);
}

/* ========================================
   LISTS & CONTENT
   ======================================== */

ul {
  margin: var(--spacing-md) 0;
}

li {
  margin-bottom: var(--spacing-sm);
}

/* ========================================
   FOOTER
   ======================================== */

.site-footer {
  background: var(--navy-dark);
  border-top: 3px solid var(--accent);
  margin-top: 0;
  padding: var(--spacing-xl) var(--spacing-lg) var(--spacing-md);
  color: rgba(255, 255, 255, 0.75);
}

.footer-inner {
  max-width: 1200px;
  margin: 0 auto;
}

.footer-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--spacing-lg);
  margin-bottom: var(--spacing-lg);
}

.footer-section h4 {
  color: #ffffff;
  margin-top: 0;
  margin-bottom: 10px;
  font-size: 1em;
  font-family: var(--font-heading);
}

.footer-section p {
  margin: var(--spacing-xs) 0;
  font-size: 0.88em;
  line-height: 1.6;
}

.footer-section a {
  color: var(--accent-light);
  text-decoration: none;
  transition: all var(--transition-base);
}

.footer-section a:hover {
  text-decoration: underline;
  color: #ffffff;
}

.footer-acnc {
  display: flex;
  align-items: center;
  justify-content: center;
}

.acnc-logo {
  max-width: 128px;
  height: auto;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}

.footer-bottom {
  text-align: center;
  padding-top: var(--spacing-md);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.5);
}

.footer-bottom p {
  margin: 0;
  font-size: 0.88em;
}

/* ========================================
   HERO SECTION
   ======================================== */

.hero {
  padding: var(--spacing-xl) var(--spacing-xl);
  background: linear-gradient(160deg, #0d4f4a 0%, #1a7872 40%, #0f3d3a 100%);
  border-radius: 0;
  margin-bottom: 0;
  position: relative;
  overflow: hidden;
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-xxl);
  align-items: center;
  position: relative;
  z-index: 1;
}

.hero-left {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.hero-right {
  border-left: 1px solid rgba(255, 255, 255, 0.15);
  padding-left: var(--spacing-xxl);
  padding-top: var(--spacing-xl);
  align-self: end;
}

.hero::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -10%;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(125, 211, 203, 0.15) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

.hero::after {
  content: '';
  position: absolute;
  bottom: -30%;
  left: -10%;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(255, 153, 102, 0.12) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

.hero h1 {
  font-size: 4.2em;
  margin-bottom: 0;
  position: relative;
  z-index: 1;
  color: white;
  -webkit-text-fill-color: white;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.3);
  line-height: 1.05;
}

.hero .lead {
  font-size: 1.55em;
  margin-bottom: 0;
  position: relative;
  z-index: 1;
  color: white;
  line-height: 1.6;
  background: rgba(255, 255, 255, 0.1);
  border-left: 4px solid var(--accent-light);
  border-radius: 0;
  padding: var(--spacing-sm) var(--spacing-md);
  text-align: left;
}

.hero p {
  margin-bottom: var(--spacing-sm);
  position: relative;
  z-index: 1;
  font-size: 1.3em;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.8;
  text-align: left;
}

.hero ul {
  text-align: left;
  margin: var(--spacing-xs) 0;
  position: relative;
  z-index: 1;
  font-size: 1.1em;
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.9);
  padding-left: var(--spacing-md);
}

.hero .cta-buttons {
  position: relative;
  z-index: 1;
  justify-content: flex-start;
  margin-top: var(--spacing-sm);
}

.hero li {
  margin-bottom: 6px;
}

/* ========================================
   PAGE HEADER (light variant for inner pages)
   ======================================== */

.page-header {
  padding: var(--spacing-lg) var(--spacing-xl);
  background: var(--sand);
  border-bottom: 1px solid var(--border);
  position: relative;
}

.page-header h1 {
  font-size: 2.8em;
  margin-bottom: var(--spacing-sm);
  color: var(--navy);
  line-height: 1.1;
}

.page-header .lead {
  font-size: 1.25em;
  color: var(--text);
  line-height: 1.7;
  max-width: 900px;
  border-left: 4px solid var(--accent);
  background: rgba(42, 161, 152, 0.06);
  padding: var(--spacing-sm) var(--spacing-md);
  margin-bottom: var(--spacing-sm);
}

.page-header p {
  font-size: 1.1em;
  color: var(--text-light);
  line-height: 1.75;
  max-width: 800px;
  margin-bottom: var(--spacing-xs);
}

/* ========================================
   BUTTONS
   ======================================== */

.btn {
  display: inline-block;
  padding: 16px 36px;
  border-radius: var(--radius-pill);
  text-decoration: none;
  font-weight: 700;
  transition: all var(--transition-base);
  border: none;
  cursor: pointer;
  font-size: 1.05em;
  font-family: var(--font-heading);
  box-shadow: var(--shadow-md);
  letter-spacing: 0.02em;
}

.btn-primary {
  background: var(--accent-gradient);
  color: white;
  position: relative;
  overflow: hidden;
}

.btn-primary::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
  transition: left 0.5s ease;
}

.btn-primary:hover::after {
  left: 100%;
}

.btn-primary:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
}

.btn-secondary {
  background: transparent;
  color: var(--accent);
  border: 3px solid var(--accent);
  box-shadow: none;
}

.btn-secondary:hover {
  background: var(--accent);
  color: white;
  box-shadow: var(--shadow-md);
}

.cta-buttons {
  display: flex;
  gap: var(--spacing-md);
  justify-content: center;
  margin-top: var(--spacing-md);
}

/* ========================================
   FEATURE CARDS
   ======================================== */

.features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--spacing-xl);
  margin-top: var(--spacing-xxl);
}

.feature-card {
  background: var(--cream);
  padding: var(--spacing-xl) var(--spacing-lg);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-base);
  position: relative;
  overflow: hidden;
  border-left: 3px solid var(--accent);
}

.feature-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 5px;
  background: var(--accent-gradient);
  transform: scaleX(0);
  transition: transform var(--transition-base);
}

.feature-card:hover {
  transform: translateY(-10px);
  box-shadow: var(--shadow-hover);
  border-color: var(--accent);
}

.feature-card:hover::before {
  transform: scaleX(1);
}

.feature-card h3 {
  color: var(--accent-dark);
  margin-top: 0;
  margin-bottom: var(--spacing-md);
  font-size: 1.5em;
}

.feature-card p {
  margin-bottom: var(--spacing-md);
  color: var(--text);
  line-height: 1.85;
  font-size: 1.05em;
}

.feature-card a {
  color: var(--accent);
  text-decoration: none;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all var(--transition-base);
  padding: var(--spacing-xs) 0;
  font-size: 1.05em;
}

.feature-card a:hover {
  color: var(--accent-dark);
  gap: 14px;
}

/* ========================================
   CONTENT PAGES
   ======================================== */

.content-page {
  max-width: 1800px;
  width: 95%;
  margin: 0 auto;
  padding: 0;
  border: 1px solid var(--border);
  overflow: hidden;
  background: var(--cream);
  border-radius: var(--radius-md);
}

.content-wide {
  max-width: 1800px;
  width: 95%;
  margin: 0 auto;
  padding: 0;
  border: 1px solid var(--border);
  overflow: hidden;
  background: var(--cream);
  border-radius: var(--radius-md);
}

/* Inside the hub the shell already sits in a padded column, so it uses the
   full width rather than a second 5% inset. */
.main-content.with-sidebar .content-wide,
.main-content.with-sidebar .content-page {
  width: 100%;
  max-width: 1280px;
  margin: 0;
  box-shadow: var(--shadow-sm);
}

/* Dashboard header */
.dash-header {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-md) var(--spacing-lg);
  background: var(--sand-light);
  border-bottom: 1px solid var(--border);
}

.dash-header-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  background: rgba(42, 161, 152, 0.12);
  color: var(--accent-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05em;
  flex-shrink: 0;
}

.dash-header-icon i {
  margin-right: 0;
}

.dash-header h1 {
  margin: 0;
  font-size: 1.3em;
  letter-spacing: -0.01em;
}

.dash-header .lead {
  margin: 2px 0 0;
  font-size: 0.95em;
  line-height: 1.5;
}

.dash-body {
  padding: var(--spacing-lg);
}

/* Headings inside a hub page are subordinate to the dash-header title, so they
   step down from it rather than using the marketing-page display sizes. */
.dash-body h2 {
  font-size: 1.15em;
  margin-bottom: var(--spacing-sm);
}

.dash-body h3 {
  font-size: 1.05em;
}

/* Panels inside a dash-body are already on a card; a second frame just adds
   another nested box, so they get plain spacing instead. */
.dash-body > :first-child {
  margin-top: 0;
}

.dash-body > :last-child {
  margin-bottom: 0;
}

/* Constrains prose and forms to a readable measure inside the wide shell. */
.dash-narrow {
  max-width: 680px;
}

.content-wide > h1,
.content-page > h1 {
  background: var(--sand);
  padding: var(--spacing-lg) var(--spacing-xl);
  margin: 0 0 var(--spacing-lg);
  border-bottom: 1px solid var(--border);
  font-size: 2em;
}

.content-wide > .lead,
.content-page > .lead {
  padding: 0 var(--spacing-xl);
  margin-top: calc(-1 * var(--spacing-md));
}

.form-container {
  max-width: 600px;
}

.content-section {
  margin-bottom: 0;
  padding: var(--spacing-xl);
  background: var(--cream);
  border-radius: 0;
  box-shadow: none;
  border-top: 1px solid var(--border);
}

.content-section:first-of-type {
  margin-top: var(--spacing-lg);
  border-top: none;
}

.content-section h2 {
  color: var(--navy);
  margin-top: 0;
  padding-bottom: var(--spacing-sm);
  border-bottom: 3px solid var(--border);
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-lg);
  font-size: 1.9em;
  font-weight: 700;
}

.content-section ul,
.content-section ol {
  padding-left: var(--spacing-lg);
  margin: var(--spacing-md) 0;
}

.content-section li {
  margin-bottom: var(--spacing-sm);
  color: var(--text);
  line-height: 1.85;
  font-size: 1.05em;
}

/* ========================================
   CTA BOX
   ======================================== */

.cta-box {
  background: linear-gradient(160deg, rgba(42, 161, 152, 0.07) 0%, rgba(255, 153, 102, 0.05) 50%, rgba(255, 138, 107, 0.07) 100%);
  border: none;
  border-radius: 0;
  border-top: 3px solid var(--accent);
  padding: var(--spacing-xxl);
  text-align: center;
  margin-top: 0;
  box-shadow: none;
  position: relative;
  overflow: hidden;
}

.cta-box::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -20%;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(42, 161, 152, 0.1) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

.cta-box h3 {
  margin-top: 0;
  color: var(--accent-dark);
  font-size: 2.2em;
  margin-bottom: var(--spacing-md);
}

.cta-box p {
  font-size: 1.15em;
  color: var(--text);
  margin-bottom: var(--spacing-lg);
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.7;
}

/* ======================================== 
   FORM PAGES
   ======================================== */

.form-page {
  max-width: 500px;
  margin: 0 auto;
}

.form-page h1 {
  text-align: center;
}

.form-page > p {
  text-align: center;
  color: var(--text-light);
  margin-bottom: var(--spacing-lg);
}

/* The hub shell is already a card, so these forms sit flat on it rather than
   drawing a third nested panel. */
.upload-form-container,
.notice-form-container {
  max-width: 620px;
}

.upload-form-container h1,
.notice-form-container h1 {
  margin-top: 0;
}

.upload-form,
.notice-form {
  background: none;
  padding: 0;
  border: none;
  box-shadow: none;
  max-width: none;
}

.upload-form .form-group,
.notice-form .form-group {
  margin-bottom: var(--spacing-md);
}

.upload-form label,
.notice-form label {
  font-size: 0.92em;
  margin-bottom: 6px;
}

.upload-form textarea,
.notice-form textarea {
  min-height: 120px;
  max-height: 320px;
  resize: vertical;
}

/* Custom File Upload */
.custom-file-upload {
  margin-bottom: var(--spacing-md);
  padding: var(--spacing-lg);
  background: var(--sand-light);
  border: 1px dashed var(--border);
  border-radius: var(--radius-md);
  text-align: center;
  transition: all var(--transition-base);
}

.custom-file-upload:hover {
  border-color: var(--accent);
  background: rgba(42, 161, 152, 0.05);
}

.file-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 22px;
  background: var(--cream);
  border: 1px solid var(--accent);
  color: var(--accent-dark);
  border-radius: var(--radius-pill);
  cursor: pointer;
  font-weight: 600;
  font-size: 0.92em;
  transition: all var(--transition-base);
  font-family: var(--font-heading);
}

.file-label:hover {
  background: var(--accent);
  color: #ffffff;
}

.custom-file-upload input[type="file"] {
  display: none;
}

.file-name {
  display: block;
  color: var(--text-light);
  font-size: 0.88em;
  margin-top: 10px;
}

.btn-large {
  padding: 13px 36px;
  font-size: 1em;
  width: 100%;
  margin-top: var(--spacing-sm);
}

.form-footer {
  text-align: center;
  margin-top: var(--spacing-lg);
  color: var(--text-light);
}

.form-footer a {
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
}

.form-footer a:hover {
  text-decoration: underline;
}

/* ========================================
   SUCCESS PAGE
   ======================================== */

.success-page {
  text-align: center;
  padding: var(--spacing-xxl) var(--spacing-lg);
  background: var(--cream);
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  max-width: 600px;
  margin: var(--spacing-xl) auto;
}

.success-page h1 {
  font-size: 2.5em;
  color: var(--success);
  margin-bottom: var(--spacing-md);
}

.success-page p {
  color: var(--text);
  font-size: 1.15em;
  margin-bottom: var(--spacing-lg);
}

.success-page .cta-buttons {
  display: flex;
  gap: var(--spacing-md);
  justify-content: center;
  flex-wrap: wrap;
}

/* ========================================
   NOTICE CARDS
   ======================================== */

.notices-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.notice-card {
  background: var(--sand-light);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--spacing-md) var(--spacing-lg);
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
}

.notice-card:hover {
  border-color: var(--accent-light);
  box-shadow: var(--shadow-sm);
}

.notice-card h3 {
  margin-top: 0;
  color: var(--navy);
  margin-bottom: var(--spacing-xs);
  font-size: 1.15em;
}

.notice-card p {
  margin-bottom: 0;
  line-height: 1.65;
  font-size: 0.98em;
  color: var(--text);
}

.notice-card .attachment-link {
  margin-top: var(--spacing-sm);
}

.notice-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-xs) var(--spacing-md);
  padding-top: 10px;
  border-top: 1px solid var(--border);
  margin-top: var(--spacing-sm);
}

.notice-meta small {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-light);
  font-size: 0.88em;
}

.notice-meta i {
  margin-right: 0;
  font-size: 0.95em;
}

.attachment-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--cream);
  color: var(--accent-dark);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.88em;
  font-family: var(--font-heading);
}

.attachment-link i {
  margin-right: 0;
}

.attachment-link:hover {
  border-color: var(--accent);
  background: rgba(42, 161, 152, 0.08);
  color: var(--accent-dark);
}

/* ========================================
   EMPTY STATE
   ======================================== */

.empty-state {
  text-align: center;
  padding: var(--spacing-xl) var(--spacing-lg);
  color: var(--text-light);
  background: var(--sand-light);
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
}

.empty-state i {
  display: block;
  margin: 0 0 var(--spacing-sm);
  font-size: 1.9em;
  color: var(--accent);
  opacity: 0.4;
}

.empty-state p {
  margin: 0;
  font-size: 0.98em;
}

/* How a walk ended, on the walk page and in the review queue. Reviewing hours
   means knowing whether a person ended the walk or a rule did. */
.walk-ending {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 var(--spacing-sm);
  padding: 12px var(--spacing-sm);
  background: var(--bg-sand);
  border-radius: var(--radius-sm);
  font-size: 0.92em;
  line-height: 1.6;
}

.walk-ending > i {
  margin-right: 0;
  font-size: 1.15rem;
  color: var(--accent-dark);
}

.ending-time {
  display: block;
  margin-top: 3px;
  font-size: 0.85em;
  white-space: nowrap;
  color: var(--text-light);
}

/* Both columns hold sentences rather than figures, and a table that shares
   width equally between them wraps these one word per line. */
.hub-table .col-ending {
  min-width: 150px;
}

.hub-table .col-notes {
  min-width: 165px;
}

/* A date is never worth three lines, which is what an equal share of a seven
   column table gives it. */
.hub-table .col-date {
  white-space: nowrap;
}

.review-note-line {
  display: block;
  font-size: 0.9em;
  line-height: 1.5;
}

.review-note-more {
  display: inline-block;
  margin-top: 4px;
  font-size: 0.88em;
  color: var(--accent-dark);
}

.review-note-line + .review-note-line {
  margin-top: 4px;
}

/* ========================================
   WALK IN PROGRESS BAR
   ======================================== */

/* Sits under the header on every hub page but the tracking page itself. Green
   rather than a warning colour: a walk running is the normal, correct state,
   and the bar is here to be noticed on the way past, not to alarm anyone. */
.walk-bar {
  position: sticky;
  top: var(--header-real-h, var(--header-h));
  z-index: 95;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px var(--spacing-lg);
  background: #14532d;
  color: #fff;
  font-family: var(--font-heading);
  font-size: 0.92rem;
}

.walk-bar-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.7);
  animation: walk-bar-pulse 2.2s infinite;
}

@keyframes walk-bar-pulse {
  70% { box-shadow: 0 0 0 9px rgba(74, 222, 128, 0); }
  100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0); }
}

.walk-bar-text {
  font-weight: 700;
}

.walk-bar-timer {
  font-variant-numeric: tabular-nums;
  color: rgba(255, 255, 255, 0.85);
}

.walk-bar-open {
  margin-left: auto;
  color: #fff;
  text-decoration: underline;
  font-weight: 600;
}

.walk-bar-open:hover {
  color: #d1fae5;
}

.walk-bar-stop {
  padding: 7px 16px;
  border: 0;
  border-radius: var(--radius-pill);
  background: #fff;
  color: #14532d;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.88rem;
  cursor: pointer;
  transition: background var(--transition-fast);
}

.walk-bar-stop:hover:not(:disabled) {
  background: #d1fae5;
}

.walk-bar-stop:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

@media (max-width: 768px) {
  .walk-bar {
    padding: 9px var(--spacing-md);
    gap: 8px;
    font-size: 0.86rem;
  }

  /* The link is the first thing to go: the whole bar is one tap from the
     tracking page anyway, and Stop is what people need from here. */
  .walk-bar-open {
    display: none;
  }

  .walk-bar-timer {
    margin-left: auto;
  }
}

/* A finished walk, reminding the app half of the pair to be switched off. */
.walk-remind {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: var(--spacing-md);
  padding: 14px var(--spacing-sm);
  background: var(--navy);
  color: #fff;
  border-radius: var(--radius-md);
  font-size: 0.92em;
  line-height: 1.6;
}

.walk-remind > i {
  flex: none;
  margin-right: 0;
  font-size: 1.25rem;
  color: var(--sunset-orange);
}

.walk-remind strong {
  color: #fff;
}

/* ========================================
   WALK TRACKER
   ======================================== */

.track-wrap {
  max-width: 460px;
  margin: 0 auto;
}

/* On a phone the instructions sit above the button and the column is the whole
   screen. On a desktop that same column left two thirds of the window empty and
   pushed the button below the fold, so the two halves sit side by side instead:
   instructions to read on the left, the thing you press on the right. */
@media (min-width: 900px) {
  .track-wrap {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-xl);
    max-width: 1000px;
  }

  .track-col-guide {
    flex: 1 1 auto;
    min-width: 0;
  }

  .track-col-panel {
    flex: 0 0 360px;
    position: sticky;
    top: calc(var(--sticky-top, var(--header-h)) + var(--spacing-md));
  }

  .track-guide {
    margin-bottom: 0;
  }
}

/* Android only — see the note where it is unhidden. */
.track-app-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding: 7px 14px;
  border-radius: var(--radius-pill);
  background: rgba(42, 161, 152, 0.12);
  color: var(--accent-dark);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.88rem;
  text-decoration: none;
}

.track-app-link:hover {
  background: rgba(42, 161, 152, 0.2);
}

.track-app-link i {
  margin-right: 0;
}

/* Shown to volunteers with no phone app: the first thing to do is not on this
   page at all, so it is said before the steps rather than after them. */
.track-guide-first {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: var(--spacing-sm);
  padding: 12px 14px;
  background: rgba(42, 161, 152, 0.09);
  border: 1px solid rgba(42, 161, 152, 0.28);
  border-radius: var(--radius-sm);
  font-size: 0.9em;
  line-height: 1.6;
}

.track-guide-first > i {
  flex: none;
  margin-right: 0;
  font-size: 1.15rem;
  color: var(--accent-dark);
}

.track-panel {
  border-radius: var(--radius-lg);
  padding: var(--spacing-lg);
  text-align: center;
  background: var(--sand-light);
  border: 1px solid var(--border);
  transition: background var(--transition-base), border-color var(--transition-base), color var(--transition-base);
}

/* While a walk is running the panel goes black. On the OLED screens most
   phones have, black pixels are switched off, which meaningfully extends
   how long the screen can stay awake. */
.track-panel.is-tracking {
  background: #000;
  border-color: #000;
  color: #fff;
}

.track-status {
  font-family: var(--font-heading);
  font-size: 0.85em;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-light);
}

.track-panel.is-tracking .track-status {
  color: var(--accent-light);
}

.track-timer {
  font-family: var(--font-heading);
  font-size: 3.2rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 6px 0 var(--spacing-md);
  color: var(--navy);
}

.track-panel.is-tracking .track-timer {
  color: #fff;
}

.track-stats {
  display: flex;
  justify-content: center;
  gap: var(--spacing-xl);
  padding-top: var(--spacing-md);
  border-top: 1px solid var(--border);
}

.track-panel.is-tracking .track-stats {
  border-top-color: rgba(255, 255, 255, 0.15);
}

.track-stat-value {
  font-family: var(--font-heading);
  font-size: 1.35rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}

.track-stat-label {
  font-size: 0.84rem;
  font-family: var(--font-heading);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-light);
  margin-top: 2px;
}

.track-panel.is-tracking .track-stat-label {
  color: rgba(255, 255, 255, 0.6);
}

.track-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin-top: var(--spacing-lg);
  padding: 15px;
  border: 0;
  border-radius: var(--radius-pill);
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 700;
  color: #fff;
  cursor: pointer;
  transition: filter var(--transition-base), transform var(--transition-base);
}

.track-btn i {
  margin-right: 0;
  font-size: 1.2em;
}

.track-btn:hover:not(:disabled) {
  filter: brightness(1.08);
}

.track-btn:active:not(:disabled) {
  transform: translateY(1px);
}

.track-btn-start { background: #1f9d55; }
.track-btn-stop { background: #d64545; }

.track-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.track-alert {
  margin-top: var(--spacing-md);
  padding: 12px var(--spacing-md);
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  line-height: 1.55;
  display: none;
}

.track-alert.show {
  display: block;
}

.track-alert-warn {
  background: rgba(245, 158, 11, 0.1);
  color: #7a5200;
  box-shadow: inset 3px 0 0 var(--warning);
}

.track-alert-error {
  background: rgba(229, 57, 53, 0.08);
  color: #a8231f;
  box-shadow: inset 3px 0 0 var(--error);
}

.track-hint {
  margin: var(--spacing-md) 0 0;
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--text-light);
}

/* The walk instructions. They sit above the Start button rather than below
   it, because they are the thing a volunteer has to have read before pressing
   it, and they borrow the numbered-step look from the phone setup page so the
   two pages read as one set of instructions rather than two. */
.track-guide {
  margin: 0 0 var(--spacing-lg);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.track-guide-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px var(--spacing-md);
  background: var(--navy);
  color: #fff;
}

.track-guide-head i {
  flex: none;
  margin-right: 0;
  font-size: 1.25rem;
  color: var(--accent-light);
}

.track-guide-head strong {
  display: block;
  font-family: var(--font-heading);
  font-size: 1.02rem;
  line-height: 1.3;
}

.track-guide-head span {
  display: block;
  margin-top: 2px;
  font-size: 0.86rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.78);
}

.track-guide-body {
  padding: var(--spacing-md);
}

.track-guide-intro {
  margin: 0 0 var(--spacing-sm);
  font-size: 0.92em;
  line-height: 1.65;
}

.track-guide .setup-steps {
  margin-bottom: 0;
}

.track-guide .setup-steps li {
  padding-bottom: 14px;
  font-size: 0.92em;
}

.track-guide .setup-steps li:last-child {
  padding-bottom: 0;
}

.track-guide-note {
  margin: var(--spacing-sm) 0 0;
  padding-top: var(--spacing-sm);
  border-top: 1px solid var(--border-light);
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--text-light);
}

.track-notice {
  margin-top: var(--spacing-lg);
  padding-top: var(--spacing-md);
  border-top: 1px solid var(--border);
  font-size: 0.88rem;
  line-height: 1.65;
  color: var(--text-light);
}

.track-notice h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.95rem;
  margin-bottom: 6px;
  color: var(--navy);
}

.track-notice h3 i {
  color: var(--accent);
  margin-right: 0;
}

.track-notice p {
  margin-bottom: var(--spacing-sm);
}

.track-notice p:last-child {
  margin-bottom: 0;
}

/* ========================================
   WALK DETAIL (map view)
   ======================================== */

#map {
  height: 440px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  margin: 0 0 var(--spacing-sm);
}

.walk-status {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: var(--spacing-md);
  font-size: 0.92em;
  color: var(--text-light);
}

.walk-flag {
  background: rgba(245, 158, 11, 0.1);
  box-shadow: inset 3px 0 0 var(--warning);
  color: #7a5200;
  padding: 12px var(--spacing-md);
  border-radius: var(--radius-sm);
  margin-bottom: var(--spacing-md);
  font-size: 0.92em;
}

.walk-flag strong {
  display: flex;
  align-items: center;
  gap: 8px;
}

.walk-flag i {
  margin-right: 0;
}

.walk-flag ul {
  margin: 6px 0 0;
  padding-left: 26px;
}

.walk-flag li {
  margin-bottom: 2px;
}

.walk-legend {
  font-size: 0.88em;
  color: var(--text-light);
  margin-bottom: var(--spacing-md);
}

.walk-legend span {
  display: inline-block;
  margin-right: var(--spacing-md);
}

.walk-legend i {
  display: inline-block;
  width: 22px;
  height: 3px;
  vertical-align: middle;
  margin-right: 6px;
}

.dash-back {
  margin: 0;
  padding-top: var(--spacing-md);
  border-top: 1px solid var(--border);
}

/* ========================================
   PHONE APP SETUP
   ======================================== */

.setup-qr {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--spacing-md);
  width: 240px;
  margin: 0 0 var(--spacing-md);
}

.setup-qr svg {
  width: 100%;
  height: auto;
  display: block;
}

.setup-steps {
  counter-reset: step;
  list-style: none;
  padding: 0;
  margin: 0 0 var(--spacing-lg);
}

.setup-steps li {
  counter-increment: step;
  position: relative;
  padding: 0 0 var(--spacing-md) 42px;
  font-size: 0.95em;
  line-height: 1.6;
  margin-bottom: 0;
}

.setup-steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(42, 161, 152, 0.14);
  color: var(--accent-dark);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.88rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* The two notes on this page are the ones that decide whether a walk records
   at all, so they are given the weight of the page rather than the tint of a
   footnote — a pale amber panel reads as something safe to skip. */
.setup-warn {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: var(--navy);
  color: #fff;
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--radius-md);
  margin-bottom: var(--spacing-md);
  font-size: 0.92em;
  line-height: 1.65;
  box-shadow: var(--shadow-md);
}

.setup-warn > i {
  flex: none;
  margin-right: 0;
  font-size: 1.3rem;
  line-height: 1.4;
  color: var(--sunset-orange);
}

.setup-warn strong {
  color: #fff;
  font-weight: 700;
}

.setup-warn a {
  color: var(--accent-light);
  text-decoration: underline;
}

.setup-warn a:hover {
  color: #fff;
}

.setup-warn ul {
  margin: 10px 0 0;
  padding-left: 20px;
}

.setup-warn li {
  margin-bottom: 6px;
}

/* A tip, not a warning: worth seeing before you start, not a walk-losing
   mistake if you miss it. */
.setup-tip {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px var(--spacing-sm);
  margin-bottom: var(--spacing-md);
  background: rgba(42, 161, 152, 0.09);
  border: 1px solid rgba(42, 161, 152, 0.28);
  border-radius: var(--radius-md);
  font-size: 0.92em;
  line-height: 1.6;
}

.setup-tip > i {
  flex: none;
  margin-right: 0;
  font-size: 1.25rem;
  line-height: 1.4;
  color: var(--accent-dark);
}

/* Which app to install. Volunteers search a store and get a page of results
   with similar names, so the icon does the identifying. */
.setup-app {
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: 340px;
  margin-top: 12px;
  padding: 12px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.setup-app-icon {
  flex: none;
  width: 58px;
  height: 58px;
  border-radius: 14px;
}

.setup-app-name {
  display: block;
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--navy);
}

.setup-app-meta {
  display: block;
  font-size: 0.85em;
  color: var(--text-light);
}

/* The setup page is instructions with pictures, not prose, so it is given more
   width than the 680px reading measure the rest of the hub uses. */
.setup-page {
  max-width: 1020px;
}

.setup-step-cols {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--spacing-md);
}

.setup-step-text {
  flex: 1 1 300px;
  min-width: 0;
}

.setup-shot {
  flex: 0 0 auto;
  width: 200px;
  margin: 0;
}

.setup-shot img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

.setup-shot figcaption {
  margin-top: 6px;
  font-size: 0.8rem;
  line-height: 1.45;
  text-align: center;
  color: var(--text-light);
}

.setup-warn .setup-shot {
  width: 230px;
  margin-top: var(--spacing-sm);
}

.setup-warn .setup-shot img {
  border-color: rgba(255, 255, 255, 0.25);
}

.setup-warn .setup-shot figcaption {
  color: rgba(255, 255, 255, 0.75);
}

@media (max-width: 620px) {
  .setup-shot,
  .setup-warn .setup-shot {
    width: 100%;
    max-width: 260px;
    margin-left: auto;
    margin-right: auto;
  }
}

.setup-value-note {
  display: block;
  margin-top: 3px;
  font-size: 0.85em;
  line-height: 1.5;
  color: var(--text-light);
}

.setup-step-head {
  margin: 0 0 4px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.3;
  color: var(--navy);
}

.setup-meta {
  font-size: 0.88em;
  line-height: 1.6;
  color: var(--text-light);
}

.setup-rotate {
  margin-top: var(--spacing-lg);
  padding-top: var(--spacing-md);
  border-top: 1px solid var(--border);
}

.btn-rotate,
form.plain-form button.btn-rotate[type="submit"] {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--cream);
  border: 1px solid var(--error);
  color: var(--error);
  padding: 8px 18px;
  border-radius: var(--radius-pill);
  font-family: var(--font-heading);
  font-size: 0.9em;
  font-weight: 600;
  cursor: pointer;
  box-shadow: none;
  transition: all var(--transition-base);
}

.btn-rotate i {
  margin-right: 0;
}

.btn-rotate:hover,
form.plain-form button.btn-rotate[type="submit"]:hover {
  background: var(--error);
  color: #fff;
  transform: none;
  box-shadow: none;
}

/* ========================================
   VOLUNTEER HUB — SHARED COMPONENTS
   Tables, stat blocks and status pills used across the walk and log pages so
   they share one palette instead of each page inventing its own greys.
   ======================================== */

/* Buttons in the hub are working controls, not marketing CTAs, so they lose the
   display padding, drop shadow and hover lift used on the public pages. */
.dash-body .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 26px;
  font-size: 0.95em;
  font-weight: 600;
  box-shadow: none;
}

.dash-body .btn-large {
  padding: 13px 26px;
}

.dash-body .btn:hover {
  transform: none;
  box-shadow: var(--shadow-sm);
}

.dash-body .btn i,
.dash-body .btn:hover i {
  margin-right: 0;
  transform: none;
}

.dash-body .btn-secondary {
  border-width: 2px;
}

.hub-section {
  margin-bottom: var(--spacing-xl);
}

.hub-section:last-child {
  margin-bottom: 0;
}

.hub-section-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 var(--spacing-sm);
  font-size: 1.05em;
  font-weight: 700;
  color: var(--navy);
  font-family: var(--font-heading);
}

.hub-section-title .count {
  font-weight: 500;
  color: var(--text-light);
}

.hub-section-title i {
  margin-right: 0;
  color: var(--accent);
}

.hub-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92em;
}

.hub-table th {
  text-align: left;
  font-family: var(--font-heading);
  font-size: 0.82em;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-light);
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

.hub-table td {
  padding: 12px;
  border-bottom: 1px solid var(--border-light);
  vertical-align: middle;
}

.hub-table tbody tr:last-child td {
  border-bottom: none;
}

.hub-table tbody tr {
  transition: background var(--transition-fast);
}

.hub-table tbody tr:hover {
  background: var(--sand-light);
}

.hub-table .num {
  font-variant-numeric: tabular-nums;
}

.hub-table .row-action {
  text-align: right;
  white-space: nowrap;
}

.hub-table .row-action a {
  color: var(--accent-dark);
  text-decoration: none;
  font-weight: 600;
  font-family: var(--font-heading);
  font-size: 0.95em;
}

.hub-table .row-action a:hover {
  text-decoration: underline;
}

/* Horizontal scroll for narrow screens, without the page itself scrolling. */
.hub-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Status pills */
.hub-pill {
  display: inline-block;
  padding: 3px 12px;
  border-radius: var(--radius-pill);
  font-family: var(--font-heading);
  font-size: 0.85em;
  font-weight: 600;
  white-space: nowrap;
}

.hub-pill-live {
  background: rgba(42, 161, 152, 0.14);
  color: var(--accent-dark);
}

.hub-pill-done {
  background: var(--sand-dark);
  color: var(--text-light);
}

.hub-pill-flag {
  background: rgba(245, 158, 11, 0.16);
  color: #8a5a00;
}

/* An approved walk and a rejected one are the two outcomes a volunteer cares
   about, so they get the two colours everyone already reads without thinking. */
.hub-pill-approved {
  background: rgba(76, 175, 80, 0.16);
  color: #256428;
}

.hub-pill-rejected {
  background: rgba(229, 57, 53, 0.14);
  color: #a5231f;
}

/* Stat blocks */
.hub-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--spacing-sm);
  max-width: 480px;
  margin-bottom: var(--spacing-lg);
}

.hub-stat {
  background: var(--sand-light);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--spacing-md);
  text-align: center;
}

.hub-stat-value {
  font-family: var(--font-heading);
  font-size: 2em;
  font-weight: 800;
  line-height: 1.1;
  color: var(--navy);
  font-variant-numeric: tabular-nums;
}

.hub-stat-label {
  margin-top: 4px;
  font-size: 0.87em;
  font-family: var(--font-heading);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-light);
}

.hub-stat.is-approved .hub-stat-value { color: #2e7d32; }
.hub-stat.is-rejected .hub-stat-value { color: #c62828; }
.hub-stat.is-accent .hub-stat-value { color: var(--accent-dark); }

.hub-empty {
  color: var(--text-light);
  font-size: 0.95em;
  padding: var(--spacing-md) 0;
  margin: 0;
}

.live-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
  animation: animPulse 2s ease-in-out infinite;
}

/* ========================================
   ADMIN SECTION
   ======================================== */

.admin-section {
  margin-bottom: var(--spacing-xxl);
}

.admin-section h2 {
  color: var(--accent-dark);
  margin-bottom: var(--spacing-md);
}

.uploads-grid {
  display: grid;
  /* min() or the track keeps its 360px floor on a 390px phone and the card
     hangs off the right edge, taking the pending count with it. */
  grid-template-columns: repeat(auto-fill, minmax(min(360px, 100%), 1fr));
  gap: var(--spacing-md);
  margin-top: 0;
}

.user-uploads-card {
  background: var(--sand-light);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 0;
  box-shadow: none;
  overflow: hidden;
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
}

.user-uploads-card:hover {
  border-color: var(--accent-light);
  box-shadow: var(--shadow-sm);
}

.user-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--spacing-sm);
  background: var(--sand);
  padding: 10px var(--spacing-lg);
  border-bottom: 1px solid var(--border);
}

.user-header h3 {
  margin: 0;
  color: var(--navy);
  font-size: 1.05em;
}

.upload-count {
  background: rgba(42, 161, 152, 0.14);
  color: var(--accent-dark);
  padding: 3px 12px;
  border-radius: var(--radius-pill);
  font-family: var(--font-heading);
  font-size: 0.85em;
  font-weight: 600;
  white-space: nowrap;
}

.upload-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.upload-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--spacing-sm);
  margin-bottom: 0;
  padding: 10px var(--spacing-lg);
  font-size: 0.94em;
  border-bottom: 1px solid var(--border-light);
  transition: background var(--transition-base);
}

.upload-list li:hover {
  background: var(--cream);
}

.upload-list li:last-child {
  border-bottom: none;
}

.file-link {
  color: var(--accent);
  text-decoration: none;
  font-weight: 500;
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  transition: all var(--transition-base);
}

.file-icon {
  font-size: 1.15em;
  margin-right: 0;
  color: var(--accent);
  flex-shrink: 0;
}

.file-name {
  word-break: break-word;
}

.file-link:hover {
  color: var(--accent-dark);
  text-decoration: underline;
}

.upload-date {
  color: var(--text-light);
  font-size: 0.95em;
  white-space: nowrap;
  margin-left: var(--spacing-md);
}

/* ========================================
   RESPONSIVE DESIGN
   ======================================== */

@media (max-width: 992px) {
  .sidebar {
    width: 240px;
  }
  
  .main-content.with-sidebar {
    max-width: calc(100% - 240px);
  }
  
  .hero h1 {
    font-size: 2.5em;
  }
}

@media (max-width: 768px) {
  :root {
    --spacing-xl: 32px;
    --spacing-xxl: 48px;
  }

  /* Mobile type scale. Almost every size on the site is expressed in em, so
     stepping the root down scales headings, body copy and the spacing that
     hangs off them together — rather than needing a per-component override.
     Without this the body stayed at desktop's 18px/1.85 on a 390px screen,
     which is what pushed simple list items onto three lines each. */
  body {
    font-size: 16px;
    line-height: 1.65;
  }

  p {
    line-height: 1.65;
  }
  
  /* The header stays a single row at every width — the nav lives behind the
     hamburger from 1180px down, so it no longer needs to stack here. */
  .header-inner {
    padding: var(--spacing-sm) var(--spacing-md);
  }

  .logo img {
    height: 40px;
  }

  .user-info {
    width: 100%;
    margin-left: 0;
    padding-top: var(--spacing-sm);
    border-top: 1px solid var(--border);
  }

  .page-wrapper {
    flex-direction: column;
  }

  /* The rail becomes a scrolling tab strip so the nav costs one row rather
     than a full screen of links above the content. It sticks below the header
     so the menu is reachable from anywhere in a long page, and it carries a
     fade at whichever edge still has links beyond it — with the scrollbar
     hidden there was otherwise nothing to say the strip scrolled at all. */
  .sidebar {
    position: sticky;
    top: calc(var(--sticky-top, var(--header-h)) - 1px);
    z-index: 90;
    width: 100%;
    height: auto;
    padding: 0;
    border-right: none;
    border-bottom: 1px solid var(--border);
  }

  .sidebar::before,
  .sidebar::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 1px;
    width: 32px;
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--transition-fast);
  }

  .sidebar::before {
    left: 0;
    background: linear-gradient(to right, var(--sand) 20%, rgba(245, 240, 230, 0));
  }

  .sidebar::after {
    right: 0;
    background: linear-gradient(to left, var(--sand) 20%, rgba(245, 240, 230, 0));
  }

  .sidebar[data-more-left]::before,
  .sidebar[data-more-right]::after {
    opacity: 1;
  }

  .sidebar-nav {
    scroll-behavior: smooth;
  }

  .sidebar-nav {
    position: static;
    flex-direction: row;
    gap: 4px;
    padding: 8px var(--spacing-md);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .sidebar-nav::-webkit-scrollbar {
    display: none;
  }

  .sidebar-link {
    flex-shrink: 0;
    padding: 8px 14px;
    font-size: 0.9em;
    white-space: nowrap;
  }

  .sidebar-link::before {
    display: none;
  }

  .sidebar-link.active {
    background: var(--accent);
    color: #ffffff;
  }

  .sidebar-link.active i {
    color: #ffffff;
  }

  .sidebar-divider {
    width: 1px;
    height: auto;
    margin: 4px 6px;
    flex-shrink: 0;
  }

  .sidebar-section-title {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    padding: 0 6px;
  }

  .main-content,
  .main-content.with-sidebar {
    max-width: 100%;
    padding: var(--spacing-md);
  }

  .main-content.with-sidebar .content-wide,
  .main-content.with-sidebar .content-page {
    max-width: 100%;
  }

  .dash-header,
  .dash-body {
    padding: var(--spacing-md);
  }

  .header-compact .header-inner {
    flex-direction: row;
    align-items: center;
    height: auto;
    min-height: var(--header-h);
    padding: 8px var(--spacing-md);
    gap: var(--spacing-sm);
  }

  .header-compact .hub-tag {
    display: none;
  }

  .header-compact .username {
    font-size: 0.88em;
  }

  .header-compact .user-info-header {
    width: auto;
    gap: var(--spacing-xs);
    padding-top: 0;
    border-top: none;
  }
  
  .hero {
    padding: var(--spacing-xl) var(--spacing-md);
  }
  
  .hero h1 {
    font-size: 2em;
  }
  
  .lead {
    font-size: 1.15em;
  }
  
  .cta-buttons {
    flex-direction: column;
  }
  
  .features {
    grid-template-columns: 1fr;
  }
  
  .upload-list li {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-sm);
  }
  
  .upload-date {
    margin-left: 0;
  }
  
  .detail-row {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  
  .detail-row strong {
    color: var(--accent);
  }
  
  .application-header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-sm);
  }
  
  .footer-content {
    grid-template-columns: 1fr;
  }
  
  .content-section {
    padding: var(--spacing-lg);
  }
  
  h1 {
    font-size: 2.2em;
  }
  
  h2 {
    font-size: 1.7em;
  }
}

@media (max-width: 480px) {
  .hero h1 {
    font-size: 1.75em;
  }
  
  .stat-number {
    font-size: 2.5em;
  }
  
  .partners-track {
    gap: var(--spacing-lg);
  }
  
  .partner-logo {
    min-width: 140px;
    height: 90px;
  }
}

/* ========================================
   UPLOAD DETAIL PAGE
   ======================================== */

.upload-detail-header {
  margin-bottom: var(--spacing-lg);
}

.back-link {
  color: var(--accent-dark);
  text-decoration: none;
  font-family: var(--font-heading);
  font-size: 0.9em;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: color var(--transition-base);
}

.back-link i {
  margin-right: 0;
  transition: transform var(--transition-base);
}

.back-link:hover {
  color: var(--accent);
}

.back-link:hover i {
  transform: translateX(-3px);
}

.upload-detail-card {
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--spacing-xl);
  box-shadow: none;
}

.upload-info {
  background: var(--sand-light);
  border: 1px solid var(--border);
  padding: var(--spacing-sm) var(--spacing-lg);
  border-radius: var(--radius-md);
  margin: 0 0 var(--spacing-lg);
}

.info-row {
  display: flex;
  justify-content: space-between;
  gap: var(--spacing-md);
  padding: 9px 0;
  font-size: 0.95em;
  border-bottom: 1px solid var(--border-light);
}

.info-row:last-child {
  border-bottom: none;
}

.info-row .label {
  color: var(--text-light);
  font-weight: 600;
}

.info-row .value {
  color: var(--text);
  font-weight: 500;
  /* A flex item will not shrink past its content, and an email address is one
     unbreakable word — long ones ran out of the card without these. */
  min-width: 0;
  text-align: right;
  overflow-wrap: anywhere;
}

/* Scoped to the value cell so a status class elsewhere on the page does not
   tint every line of text around it. */
.info-row .value.status-pending {
  color: #8a5a00;
  font-weight: 600;
}

.info-row .value.status-approved {
  color: #2e7d32;
  font-weight: 600;
}

.info-row .value.status-rejected {
  color: #c62828;
  font-weight: 600;
}

.file-preview {
  margin: 0 0 var(--spacing-lg);
}

.file-preview h2 {
  margin-top: 0;
  margin-bottom: var(--spacing-sm);
}

.preview-image {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  margin-bottom: var(--spacing-md);
  display: block;
  box-shadow: var(--shadow-sm);
}

.file-info {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-md) var(--spacing-lg);
  background: var(--sand-light);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  margin-bottom: var(--spacing-md);
}

.file-info .file-icon {
  font-size: 1.5em;
  color: var(--accent);
  margin-right: 0;
}

.file-info .file-link {
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
}

.file-info .file-link:hover {
  text-decoration: underline;
  color: var(--accent-dark);
}

.action-buttons {
  margin-top: var(--spacing-lg);
  padding-top: var(--spacing-lg);
  border-top: 1px solid var(--border);
}

.action-buttons h2 {
  margin-top: 0;
  margin-bottom: var(--spacing-sm);
}

.button-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  margin-bottom: 0;
}

.btn-approve {
  background: var(--success);
  color: white;
}

.btn-approve:hover {
  background: #43a047;
  color: white;
}

.btn-reject {
  background: var(--error);
  color: white;
}

.btn-reject:hover {
  background: #d32f2f;
  color: white;
}

#reject-form {
  background: var(--sand-light);
  border: 1px solid var(--border);
  padding: var(--spacing-lg);
  border-radius: var(--radius-md);
  margin-top: var(--spacing-md);
  max-width: 620px;
  box-shadow: none;
}

#reject-form .form-group {
  margin-bottom: var(--spacing-md);
}

#reject-form label {
  display: block;
  font-weight: 600;
  margin-bottom: var(--spacing-sm);
}

#reject-form textarea {
  width: 100%;
  padding: 12px 16px;
  border: 2px solid var(--border);
  border-radius: var(--radius-sm);
  background: #ffffff;
  color: var(--text);
  font-family: inherit;
  font-size: 1em;
  resize: vertical;
  transition: all var(--transition-base);
}

#reject-form textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(42, 161, 152, 0.08);
}

/* ========================================
   LOG PAGES
   ======================================== */

.log-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--spacing-sm);
  max-width: 620px;
  margin-bottom: var(--spacing-lg);
}

.stat-card {
  background: var(--sand-light);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--spacing-md);
  text-align: center;
  box-shadow: none;
  transition: all var(--transition-base);
}

.stat-card:hover {
  box-shadow: var(--shadow-sm);
}

.stat-card.approved {
  border-color: rgba(76, 175, 80, 0.3);
  background: rgba(76, 175, 80, 0.07);
}

.stat-card.rejected {
  border-color: rgba(244, 67, 54, 0.28);
  background: rgba(244, 67, 54, 0.06);
}

.stat-number {
  font-size: 2em;
  font-weight: 800;
  line-height: 1.1;
  color: var(--accent-dark);
  margin-bottom: 4px;
  font-family: var(--font-heading);
  font-variant-numeric: tabular-nums;
}

.stat-card.approved .stat-number {
  color: var(--success);
}

.stat-card.rejected .stat-number {
  color: var(--error);
}

.stat-label {
  color: var(--text-light);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.86em;
  letter-spacing: 0.06em;
  font-family: var(--font-heading);
}

.view-file-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: var(--spacing-sm);
  color: var(--accent-dark);
  text-decoration: none;
  font-family: var(--font-heading);
  font-size: 0.9em;
  font-weight: 600;
}

.view-file-link i {
  margin-right: 0;
}

.view-file-link:hover {
  text-decoration: underline;
  color: var(--accent-dark);
}

/* ======================================== 
   PARTNER SLIDER (SCROLLING GALLERY)
   ======================================== */

.partners-section {
  margin-top: var(--spacing-xxl);
  padding: var(--spacing-xxl) var(--spacing-lg);
  border-top: 3px solid var(--accent);
  background: linear-gradient(180deg, rgba(42, 161, 152, 0.03) 0%, transparent 100%);
}

.partners-section h2 {
  text-align: center;
  color: var(--accent-dark);
  margin-bottom: var(--spacing-xl);
  font-size: 2.4em;
  position: relative;
}

.partners-section h2::after {
  content: '';
  display: block;
  width: 80px;
  height: 4px;
  background: linear-gradient(90deg, var(--accent) 0%, var(--coral) 100%);
  margin: var(--spacing-md) auto 0;
  border-radius: 2px;
}

.partners-slider {
  overflow: hidden;
  padding: var(--spacing-xl) 0;
  background: var(--sand-light);
  border-radius: var(--radius-xl);
  position: relative;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}

.partners-slider::before,
.partners-slider::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100px;
  z-index: 2;
  pointer-events: none;
}

.partners-slider::before {
  left: 0;
  background: linear-gradient(90deg, var(--sand-light) 0%, transparent 100%);
}

.partners-slider::after {
  right: 0;
  background: linear-gradient(270deg, var(--sand-light) 0%, transparent 100%);
}

.partners-track {
  display: flex;
  gap: var(--spacing-xxl);
  animation: slide 30s linear infinite;
}

.partner-logo {
  min-width: 200px;
  height: 130px;
  background: var(--cream);
  border: 2px solid var(--border);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: var(--text-light);
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-base);
  font-size: 1.1em;
}

.partner-logo:hover {
  transform: scale(1.08) translateY(-4px);
  box-shadow: var(--shadow-hover);
  border-color: var(--accent);
  color: var(--accent);
}

@keyframes slide {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

.partners-slider:hover .partners-track {
  animation-play-state: paused;
}

/* ========================================
   CONTACT PAGE
   ======================================== */

.contact-info {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
}

.contact-item h3 {
  color: var(--accent-dark);
  margin-top: 0;
  margin-bottom: var(--spacing-sm);
  font-size: 1.2em;
}

.contact-item p {
  margin: 4px 0;
  line-height: 1.7;
}

.contact-item a {
  color: var(--accent);
  text-decoration: none;
  transition: all var(--transition-base);
}

.contact-item a:hover {
  text-decoration: underline;
  color: var(--accent-dark);
}

.contact-form {
  max-width: 600px;
}

.form-note {
  margin-top: var(--spacing-md);
  color: var(--text-light);
  font-size: 0.9em;
  font-style: italic;
}

/* ========================================
   VOLUNTEER REGISTRATION FORM
   ======================================== */

.volunteer-form {
  max-width: 700px;
}

.form-section {
  margin-bottom: var(--spacing-xl);
  padding: var(--spacing-lg);
  background: var(--sand-light);
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
}

.form-section h3 {
  margin-top: 0;
  margin-bottom: var(--spacing-lg);
  color: var(--accent-dark);
  font-size: 1.3em;
  border-bottom: 2px solid var(--accent);
  padding-bottom: var(--spacing-sm);
}

.volunteer-reason-group ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.volunteer-reason-group li {
  margin-bottom: var(--spacing-sm);
}

.volunteer-reason-group input[type="radio"] {
  margin-right: var(--spacing-sm);
  cursor: pointer;
}

.volunteer-reason-group label {
  cursor: pointer;
  font-weight: normal;
  color: var(--text);
}

.error-message {
  color: var(--error);
  font-size: 0.9em;
  margin-top: 6px;
  display: block;
  font-weight: 500;
}

/* A blank that is explained is not the same as a blank that is a mistake. */
.detail-missing {
  color: var(--text-light);
  font-style: italic;
}

/* ========================================
   APPLICATIONS PAGE
   ======================================== */

.applications-section {
  margin-bottom: var(--spacing-xl);
}

.applications-section:last-child {
  margin-bottom: 0;
}

.applications-section h2 {
  color: var(--navy);
  margin-bottom: var(--spacing-sm);
  display: flex;
  align-items: center;
  gap: 10px;
}

.applications-section .badge {
  background: rgba(42, 161, 152, 0.14);
  color: var(--accent-dark);
  padding: 2px 11px;
  border-radius: var(--radius-pill);
  font-size: 0.86em;
  font-weight: 700;
  box-shadow: none;
}

.applications-grid {
  display: grid;
  /* As .uploads-grid — a 380px floor is wider than the phone it is read on. */
  grid-template-columns: repeat(auto-fill, minmax(min(380px, 100%), 1fr));
  gap: var(--spacing-md);
}

.application-card {
  background: var(--sand-light);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--spacing-md) var(--spacing-lg);
  box-shadow: none;
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
}

.unseen-card {
  border-color: var(--accent-light);
  background: rgba(42, 161, 152, 0.04);
}

.seen-card {
  color: var(--text-light);
}

.application-card:hover {
  box-shadow: var(--shadow-sm);
}

.application-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-sm);
  padding-bottom: var(--spacing-sm);
  border-bottom: 1px solid var(--border);
}

.application-header h3 {
  margin: 0;
  color: var(--navy);
  font-size: 1.1em;
}

.status-badge {
  padding: 3px 12px;
  border-radius: var(--radius-pill);
  font-family: var(--font-heading);
  font-size: 0.82em;
  font-weight: 700;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

.unseen-badge {
  background: var(--accent);
  color: white;
  box-shadow: none;
}

.seen-badge {
  background: var(--sand-dark);
  color: var(--text-light);
}

.application-details {
  margin-bottom: var(--spacing-md);
}

.detail-row {
  display: grid;
  grid-template-columns: minmax(120px, 40%) 1fr;
  gap: var(--spacing-sm);
  margin-bottom: 0;
  padding: 7px 0;
  font-size: 0.94em;
  border-bottom: 1px solid var(--border-light);
}

.detail-row:last-child {
  border-bottom: none;
}

.detail-row strong {
  color: var(--text-light);
  font-weight: 600;
}

.detail-row span,
.detail-row a {
  color: var(--text);
  /* A grid item will not shrink below its content, and an email address has
     nowhere to break, so without these it pushes out of the card. */
  min-width: 0;
  overflow-wrap: anywhere;
}

.detail-row a {
  text-decoration: none;
  color: var(--accent);
  font-weight: 500;
}

.detail-row a:hover {
  color: var(--accent-dark);
  text-decoration: underline;
}

.other-reason {
  grid-template-columns: 1fr;
  background: var(--sand-light);
  padding: var(--spacing-md);
  border-radius: var(--radius-sm);
}

.other-reason strong {
  display: block;
  margin-bottom: var(--spacing-sm);
  color: var(--accent-dark);
}

.other-reason p {
  margin: 0;
  line-height: 1.85;
  color: var(--text);
}

.application-action {
  margin-top: 0;
}

.application-action button {
  padding: 9px 24px;
  font-size: 0.92em;
}

.seen-section {
  margin-top: var(--spacing-xl);
  padding-top: var(--spacing-lg);
  border-top: 1px solid var(--border);
}

.empty-message {
  color: var(--text-light);
  padding: var(--spacing-md) 0;
  margin: 0;
  font-size: 0.95em;
}

/* ========================================
   BOOTSTRAP ICONS STYLING
   ======================================== */

.bi {
  vertical-align: middle;
  margin-right: 4px;
}

.feature-card h3 i,
.content-section h2 i {
  color: var(--accent);
  margin-right: var(--spacing-sm);
  font-size: 1.1em;
}

/* Fixed width keeps every label on the same left edge, even if a glyph is
   missing from the icon font. */
.sidebar-link i {
  flex: 0 0 20px;
  font-size: 1.05em;
  margin-right: 0;
  text-align: center;
  color: var(--accent);
  opacity: 0.75;
  transition: opacity var(--transition-base), color var(--transition-base);
}

.sidebar-link:hover i,
.sidebar-link.active i {
  color: var(--accent-dark);
  opacity: 1;
}

.btn i {
  margin-right: 6px;
}

.main-nav > a i {
  font-size: 1.1em;
}

/* ========================================
   ALTERNATING SECTIONS & IMAGE LAYOUTS
   ======================================== */

.section-split {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: var(--spacing-lg);
  align-items: center;
  margin-bottom: 0;
  padding: var(--spacing-md) 0;
}

.section-split.reverse {
  direction: rtl;
}

.section-split.reverse > * {
  direction: ltr;
}

.section-content {
  padding: var(--spacing-md);
}

.section-content h2 {
  margin-top: 0;
  color: var(--accent-dark);
  font-size: 2.5em;
  margin-bottom: var(--spacing-lg);
  line-height: 1.15;
  position: relative;
}

.section-content h2::after {
  content: '';
  display: block;
  width: 80px;
  height: 4px;
  background: var(--accent-gradient);
  border-radius: 2px;
  margin-top: var(--spacing-sm);
}

.section-content p {
  font-size: 1.3em;
  line-height: 1.85;
  color: var(--text);
  margin-bottom: var(--spacing-sm);
}

.section-content ul {
  list-style: none;
  padding: 0;
  margin: var(--spacing-sm) 0;
}

.section-content ul li {
  padding: 8px var(--spacing-md);
  padding-left: calc(var(--spacing-lg) + var(--spacing-md));
  position: relative;
  font-size: 1.2em;
  line-height: 1.65;
  margin-bottom: 4px;
  background: linear-gradient(90deg, rgba(42, 161, 152, 0.04) 0%, transparent 100%);
  border-radius: var(--radius-sm);
  transition: all var(--transition-base);
}

.section-content ul li:hover {
  background: linear-gradient(90deg, rgba(42, 161, 152, 0.08) 0%, transparent 100%);
  transform: translateX(4px);
}

.section-content ul li::before {
  content: "✓";
  position: absolute;
  left: var(--spacing-sm);
  top: var(--spacing-sm);
  color: white;
  font-weight: bold;
  font-size: 0.88em;
  background: var(--accent-gradient);
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.section-image {
  border-radius: 0;
  overflow: hidden;
  box-shadow: var(--shadow-md);
  transition: all var(--transition-base);
  border: 2px solid var(--border);
  max-width: 510px;
  margin-left: auto;
}

.section-image:hover {
  transform: scale(1.02);
  box-shadow: var(--shadow-lg);
  border-color: var(--accent);
}

.section-image img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  min-height: 330px;
  max-height: 420px;
}

.section-bg-light {
  background: var(--sand-light);
  padding: var(--spacing-lg) var(--spacing-xl);
  border-radius: 0;
  margin: 0;
  border: none;
  border-top: 1px solid var(--border);
}

.section-bg-white {
  background: var(--cream);
  padding: var(--spacing-lg) var(--spacing-xl);
  border-radius: 0;
  margin: 0;
  border: none;
  border-top: 1px solid var(--border);
}

.section-bg-gradient {
  background: var(--sand);
  padding: var(--spacing-lg) var(--spacing-xl);
  border-radius: 0;
  margin: 0;
  border: none;
  border-top: 1px solid var(--border);
}

.full-width-section {
  padding: var(--spacing-xl) var(--spacing-xl);
  margin: 0;
  border-top: 1px solid var(--border);
}

.full-width-section.dark {
  background: linear-gradient(135deg, var(--text-dark) 0%, #1a3a4a 100%);
  color: white;
  border-top: none;
}

.full-width-section.dark h2 {
  color: white;
}

.full-width-section.dark p {
  color: rgba(255, 255, 255, 0.9);
}

.content-wrapper {
  max-width: 1600px;
  width: 95%;
  margin: 0 auto;
}

@media (max-width: 992px) {
  .hero-grid {
    grid-template-columns: 1fr;
    gap: var(--spacing-lg);
  }

  .hero-right {
    border-left: none;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    padding-left: 0;
    padding-top: var(--spacing-lg);
  }

  .section-split {
    grid-template-columns: 1fr;
    gap: var(--spacing-xl);
  }
  
  .section-split.reverse {
    direction: ltr;
  }
  
  .section-image {
    max-width: 100%;
  }
}

/* ========================================
   SITEWIDE ANIMATIONS & MICRO-INTERACTIONS
   ======================================== */

/* --- Scroll Reveal --- */
.anim-fade-up {
  opacity: 0;
  transform: translateY(35px);
  transition: opacity 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.anim-fade-up.anim-visible {
  opacity: 1;
  transform: translateY(0);
}

.anim-fade-left {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.anim-fade-left.anim-visible {
  opacity: 1;
  transform: translateX(0);
}

.anim-fade-right {
  opacity: 0;
  transform: translateX(40px);
  transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.anim-fade-right.anim-visible {
  opacity: 1;
  transform: translateX(0);
}

.anim-scale-in {
  opacity: 0;
  transform: scale(0.92);
  transition: opacity 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.anim-scale-in.anim-visible {
  opacity: 1;
  transform: scale(1);
}

/* Stagger delays for children */
.anim-delay-1 { transition-delay: 0.1s; }
.anim-delay-2 { transition-delay: 0.2s; }
.anim-delay-3 { transition-delay: 0.3s; }
.anim-delay-4 { transition-delay: 0.4s; }
.anim-delay-5 { transition-delay: 0.5s; }

/* --- Hover lift for interactive items --- */
.hover-lift {
  transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              box-shadow 0.35s ease;
}

.hover-lift:hover {
  transform: translateY(-6px);
  box-shadow: 0 14px 40px rgba(27, 54, 93, 0.1);
}

/* --- Gentle tilt on hover --- */
.hover-tilt {
  transition: transform 0.4s ease;
}

.hover-tilt:hover {
  transform: perspective(600px) rotateY(-3deg) rotateX(2deg);
}

/* --- Underline grow on links --- */
.link-underline-grow {
  position: relative;
  text-decoration: none;
}

.link-underline-grow::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--accent);
  transition: width 0.4s ease;
}

.link-underline-grow:hover::after {
  width: 100%;
}

/* --- Pulsing dot (for labels, badges) --- */
@keyframes animPulse {
  0%, 100% { opacity: 0.5; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.15); }
}

.pulse-dot::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  animation: animPulse 2.5s ease-in-out infinite;
  margin-right: 8px;
  vertical-align: middle;
}

/* --- Floating keyframes --- */
@keyframes animFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}

@keyframes animFloatSlow {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-8px) rotate(1.5deg); }
}

.float-gentle {
  animation: animFloat 5s ease-in-out infinite;
}

.float-slow {
  animation: animFloatSlow 7s ease-in-out infinite;
}

/* --- Shimmer / loading effect --- */
@keyframes animShimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.shimmer-bg {
  background: linear-gradient(
    90deg,
    var(--sand-light) 25%,
    var(--sand) 50%,
    var(--sand-light) 75%
  );
  background-size: 200% 100%;
  animation: animShimmer 3s ease-in-out infinite;
}

/* --- Icon spin on hover --- */
.icon-spin-hover i {
  transition: transform 0.4s ease;
}

.icon-spin-hover:hover i {
  transform: rotate(15deg) scale(1.1);
}

/* --- Counter animation helper (used via JS) --- */
.count-up {
  font-variant-numeric: tabular-nums;
}

/* --- Smooth section transitions for page scroll --- */
html {
  scroll-behavior: smooth;
}

/* Nav underline animation is handled in the original .main-nav > a::after rule */

/* --- Page header subtle gradient animation --- */
@keyframes pgHeaderShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* --- Footer link hover --- */
.site-footer a {
  transition: color 0.3s ease, padding-left 0.3s ease;
}

.site-footer a:hover {
  padding-left: 4px;
}

/* --- Card ribbon shimmer on hover --- */
.feature-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.08),
    transparent
  );
  transition: left 0.6s ease;
  pointer-events: none;
}

.feature-card:hover::after {
  left: 100%;
}

/* --- Button icon nudge on hover --- */
.btn i,
.v2-btn i {
  transition: transform 0.3s ease;
}

.btn:hover i,
.v2-btn:hover i {
  transform: translateX(3px);
}

/* ========================================
   LIVE MAP
   ======================================== */

.live-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: var(--spacing-sm);
  font-size: 0.95em;
  font-weight: 600;
  color: var(--text);
}

.live-updated {
  margin-left: auto;
  font-weight: 400;
  font-size: 0.88em;
  color: var(--text-light);
}

.live-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: var(--spacing-sm);
  align-items: start;
}

.live-layout #map {
  height: 560px;
  margin: 0;
}

.live-panel {
  max-height: 560px;
  overflow-y: auto;
  padding-right: 4px;
}

.live-panel .hub-section-title {
  margin-top: 0;
}

.live-title-warn {
  color: #7a5200;
  margin-top: var(--spacing-md);
}

.live-note {
  font-size: 0.86em;
  color: var(--text-light);
  margin: 0 0 10px;
}

.live-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.live-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  margin-bottom: 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: #fff;
  cursor: pointer;
}

.live-item:hover {
  border-color: var(--accent);
}

.live-item.is-warn {
  background: rgba(245, 158, 11, 0.1);
  box-shadow: inset 3px 0 0 var(--warning);
  border-color: transparent;
  cursor: default;
}

.live-item a {
  text-decoration: none;
  color: inherit;
}

.live-meta {
  font-size: 0.84em;
  color: var(--text-light);
}

.live-empty {
  padding: 10px 0;
  font-size: 0.92em;
  color: var(--text-light);
}

@media (max-width: 900px) {
  .live-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .live-layout #map {
    height: 380px;
  }

  .live-panel {
    max-height: none;
    overflow-y: visible;
  }
}

.live-tip {
  font-size: 0.82em;
  font-weight: 600;
  color: var(--text);
}

/* ---- device setup: app cards and typed-in values ---- */

.setup-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--spacing-md);
  margin-bottom: var(--spacing-md);
  background: #fff;
}

.setup-card.is-muted {
  background: var(--bg-light);
}

.setup-card .hub-section-title {
  margin-top: 0;
}

.setup-card .setup-steps:last-child {
  margin-bottom: 0;
}

.setup-lead {
  font-size: 0.92em;
  color: var(--text-light);
  margin: 0 0 var(--spacing-md);
}

.setup-values {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px var(--spacing-md);
  align-items: baseline;
  margin: 12px 0 0;
  padding: 12px var(--spacing-sm);
  background: var(--bg-sand);
  border-radius: var(--radius-sm);
}

.setup-values dt {
  font-weight: 600;
  font-size: 0.88em;
  color: var(--text-light);
}

.setup-values dd {
  margin: 0;
  font-size: 0.95em;
  min-width: 0;
}

.setup-code,
.setup-url {
  display: inline-block;
  max-width: 100%;
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  background: #fff;
  border: 1px solid var(--border);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  overflow-wrap: anywhere;
}

.setup-code {
  font-size: 1.05em;
  font-weight: 700;
  letter-spacing: 0.14em;
}

.setup-url {
  font-size: 0.85em;
}

@media (max-width: 560px) {
  .setup-values {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
  }

  .setup-values dd {
    margin-bottom: 10px;
  }
}

.setup-manual {
  margin-top: 12px;
  font-size: 0.95em;
}

.setup-manual summary {
  cursor: pointer;
  color: var(--accent-dark);
  font-weight: 600;
  padding: 6px 0;
}

.setup-manual .setup-meta {
  margin: 6px 0 0;
}

/* ---- device setup: live connection status ---- */

.phone-status {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px var(--spacing-sm);
  border-radius: var(--radius-sm);
  margin-bottom: var(--spacing-md);
  font-size: 0.93em;
  line-height: 1.45;
  background: var(--bg-sand);
  color: var(--text-light);
}

.phone-status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--text-light);
}

.phone-status[data-state="ok"] {
  background: rgba(42, 161, 152, 0.12);
  color: var(--accent-dark);
  font-weight: 600;
}

.phone-status[data-state="ok"] .phone-status-dot {
  background: var(--accent);
  animation: animPulse 2s ease-in-out infinite;
}

.phone-status[data-state="stale"] {
  background: rgba(245, 158, 11, 0.12);
  color: #7a5200;
}

.phone-status[data-state="stale"] .phone-status-dot {
  background: var(--warning);
}

/* ---- walk approval ---- */

.hub-section-note {
  font-size: 0.9em;
  color: var(--text-light);
  margin: -6px 0 var(--spacing-sm);
}

.review-box {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-sand);
  padding: 12px var(--spacing-sm);
  margin-bottom: var(--spacing-md);
  font-size: 0.93em;
}

.review-box .plain-form {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-top: 10px;
}

.review-note {
  flex: 1 1 260px;
  min-width: 0;
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 0.95em;
  font-family: inherit;
}

/* View is a different kind of thing from the two decisions, so it gets real
   separation rather than sitting flush against Approve. */
.hub-table td.review-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 22px;
  white-space: nowrap;
}

.inline-form {
  display: inline-flex;
  gap: 10px;
  margin: 0;
}

/* Deliberately close to plain text. These sit inside table rows and there are
   two on every row, so anything button-shaped dominates the table.
 *
 * The long selectors are not decoration: `form button[type="submit"]:not(.btn)`
 * above sets a 14px/32px gradient pill, and it outranks a bare class. Same
 * approach as .btn-rotate and .logout-btn. */
/* Built from the same vocabulary as the status pills sitting next to them:
   pill radius, heading font, soft tint. A square outlined button read as
   imported from somewhere else. */
form.plain-form button.btn-approve[type="submit"],
form.plain-form button.btn-reject[type="submit"] {
  border: none;
  border-radius: var(--radius-pill);
  padding: 8px 20px;
  font-family: var(--font-heading);
  font-size: 0.88em;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
  box-shadow: none;
  cursor: pointer;
  transition: background var(--transition-base), color var(--transition-base);
}

form.plain-form button.btn-approve[type="submit"] {
  background: rgba(76, 175, 80, 0.16);
  color: #256428;
}

form.plain-form button.btn-reject[type="submit"] {
  background: rgba(229, 57, 53, 0.12);
  color: #a5231f;
}

form.plain-form button.btn-approve[type="submit"]:hover {
  background: var(--success);
  color: #fff;
  transform: none;
  box-shadow: none;
}

form.plain-form button.btn-reject[type="submit"]:hover {
  background: var(--error);
  color: #fff;
  transform: none;
  box-shadow: none;
}

/* The detail page has room to be more emphatic, and approving is the primary
   action there rather than one of a pair in a busy row. */
.review-box form.plain-form button.btn-approve[type="submit"] {
  background: var(--success);
  color: #fff;
  padding: 11px 26px;
  font-size: 0.95em;
}

.review-box form.plain-form button.btn-reject[type="submit"] {
  padding: 11px 26px;
  font-size: 0.95em;
}

@media (max-width: 700px) {
  .inline-form {
    display: flex;
    margin: 8px 0 0;
  }
}

/* ---- hub tables on small screens ----
   Six columns cannot fit a phone, and horizontally scrolling a table hides
   whichever column holds the actions — which is exactly where "View map" and
   the approve buttons live. Below 760px each row becomes a card instead. */

@media (max-width: 760px) {
  .hub-table-wrap {
    overflow-x: visible;
  }

  .hub-table,
  .hub-table tbody,
  .hub-table tr,
  .hub-table td {
    display: block;
    width: auto;
  }

  .hub-table thead {
    display: none;
  }

  .hub-table tr {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: #fff;
    padding: 12px 14px;
    margin-bottom: 10px;
  }

  .hub-table td {
    border: none;
    padding: 3px 0;
    text-align: left !important;
  }

  /* The header is gone, so each value names itself. */
  .hub-table td[data-label]:not([data-label=""])::before {
    content: attr(data-label) ": ";
    font-weight: 600;
    color: var(--text-light);
    font-size: 0.86em;
  }

  .hub-table td:empty {
    display: none;
  }

  .hub-table td.row-action {
    padding-top: 10px;
    margin-top: 8px;
    border-top: 1px solid var(--border);
    white-space: normal;
  }

  .hub-table td.row-action a {
    display: inline-block;
    padding: 4px 0;
    font-weight: 600;
  }

  .review-actions .inline-form {
    display: flex;
    gap: 10px;
    margin: 10px 0 0;
  }

  /* Thumb-sized on a phone, and sharing the row rather than stacking. */
  .review-actions form.plain-form button.btn-approve[type="submit"],
  .review-actions form.plain-form button.btn-reject[type="submit"] {
    flex: 1;
    padding: 11px 12px;
  }
}

.status-note {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: 8px;
  font-size: 0.82em;
  color: var(--text-light);
}

.status-note i {
  font-size: 0.95em;
}

.walks-help {
  margin-top: var(--spacing-md);
  padding: 12px var(--spacing-sm);
  background: var(--bg-sand);
  border-radius: var(--radius-sm);
  font-size: 0.9em;
  color: var(--text-light);
  line-height: 1.6;
}

/* ========================================
   VOLUNTEER RECORDS
   ======================================== */

/* Row of things you can do to one record — a link, and one or two small
   forms sitting on the same line as though they were links too. */
.record-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-sm);
  margin-top: var(--spacing-sm);
}

.record-actions .view-file-link {
  margin-top: 0;
}

/* Notice attachment controls on the edit form. */
.current-attachment .attachment-link {
  display: inline-flex;
  margin-bottom: var(--spacing-xs);
}

.clear-attachment {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  font-weight: 500;
  font-size: 0.95em;
  color: var(--text-light);
  cursor: pointer;
}

/* ========================================
   MY LOG
   ======================================== */

/* Where the volunteer stands on their agreement. The state is carried by the
   icon and the pill; the panel itself stays neutral so it reads as part of the
   page rather than an alert. */
.standing {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-md) var(--spacing-lg);
  margin-bottom: var(--spacing-xl);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.standing-icon {
  flex: 0 0 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4em;
  background: var(--sand-dark);
  color: var(--text-light);
}

.standing-icon i {
  margin: 0;
}

.standing-text {
  flex: 1;
  min-width: 0;
}

.standing-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px var(--spacing-sm);
}

.dash-body .standing-title h2 {
  margin: 0;
  font-size: 1.1em;
  color: var(--navy);
}

.standing-text p {
  margin: 4px 0 0;
  font-size: 0.95em;
  line-height: 1.6;
  color: var(--text-light);
}

.standing-action {
  flex: 0 0 auto;
}

.standing-approved .standing-icon { background: rgba(76, 175, 80, 0.14); color: #256428; }
.standing-approved .standing-pill { background: rgba(76, 175, 80, 0.16); color: #256428; }
.standing-pending .standing-icon { background: rgba(245, 158, 11, 0.16); color: #8a5a00; }
.standing-pending .standing-pill { background: rgba(245, 158, 11, 0.16); color: #8a5a00; }
.standing-missing .standing-icon,
.standing-rejected .standing-icon { background: rgba(229, 57, 53, 0.12); color: #a5231f; }
.standing-missing .standing-pill,
.standing-rejected .standing-pill { background: rgba(229, 57, 53, 0.12); color: #a5231f; }

.doc-list-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-xs);
}

.dash-body .doc-list-head h2 {
  margin: 0;
}

.doc-count {
  margin-left: 6px;
  font-size: 0.8em;
  font-weight: 600;
  color: var(--text-light);
}

.doc-list-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-heading);
  font-size: 0.9em;
  font-weight: 600;
  color: var(--accent-dark);
  text-decoration: none;
}

.doc-list-link:hover {
  color: var(--accent-dark);
  text-decoration: underline;
}

.doc-table td {
  vertical-align: top;
}

.doc-table .row-action {
  vertical-align: top;
}

.doc-name {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
}

.doc-name > i {
  margin: 1px 0 0;
  font-size: 1.25em;
  color: var(--accent-dark);
}

.doc-file {
  display: block;
  font-weight: 600;
  color: var(--text-dark);
  overflow-wrap: anywhere;
}

.doc-kind {
  display: block;
  font-size: 0.88em;
  color: var(--text-light);
}

.doc-muted {
  color: var(--text-light);
}

.doc-reason {
  max-width: 320px;
  margin: 6px 0 0;
  font-size: 0.88em;
  line-height: 1.5;
  color: #a5231f;
}

/* ========================================
   UPLOAD
   ======================================== */

.upload-layout {
  display: grid;
  grid-template-columns: minmax(0, 620px) minmax(0, 320px);
  gap: var(--spacing-xl);
  align-items: start;
}

.upload-form fieldset {
  border: 0;
  margin: 0 0 var(--spacing-md);
  padding: 0;
  min-width: 0;
}

.upload-form .upload-step {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 10px;
  padding: 0;
  font-family: var(--font-heading);
  font-size: 0.98em;
  font-weight: 700;
  color: var(--navy);
}

.upload-step span {
  flex: 0 0 24px;
  height: 24px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8em;
  background: var(--navy);
  color: #fff;
}

.upload-step em {
  font-style: normal;
  font-weight: 500;
  color: var(--text-light);
}

.kind-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--spacing-sm);
}

.upload-form .kind-option {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0;
  padding: 14px var(--spacing-sm);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 1em;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.kind-option:hover {
  border-color: var(--accent-light);
}

.kind-option:has(input:checked) {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}

.kind-option input {
  margin-top: 4px;
  accent-color: var(--accent);
}

.kind-option > i {
  margin: 0;
  font-size: 1.3em;
  color: var(--accent-dark);
}

.kind-option strong {
  display: block;
  font-family: var(--font-heading);
  font-size: 0.95em;
  color: var(--text-dark);
}

.kind-option small {
  display: block;
  font-family: var(--font-body);
  font-weight: 400;
  margin-top: 2px;
  font-size: 0.86em;
  line-height: 1.4;
  color: var(--text-light);
}

.upload-form .drop-zone {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin: 0;
  padding: var(--spacing-lg) var(--spacing-md);
  background: #fff;
  border: 1.5px dashed var(--border);
  border-radius: var(--radius-sm);
  text-align: center;
  cursor: pointer;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}

.drop-zone:hover,
.drop-zone.is-over {
  border-color: var(--accent);
  background: rgba(42, 161, 152, 0.04);
}

.drop-zone.has-file {
  border-style: solid;
  border-color: var(--accent);
}

/* Hidden by opacity rather than display, so the browser can still point its
   "please choose a file" message at it when the form is sent empty. */
.drop-zone input[type="file"] {
  position: absolute;
  inset: auto 50% 0;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.drop-zone > i {
  margin: 0 0 4px;
  font-size: 2em;
  color: var(--accent-dark);
}

.drop-zone-title {
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--text-dark);
  overflow-wrap: anywhere;
}

.drop-zone-hint {
  font-size: 0.86em;
  color: var(--text-light);
}

.upload-submit {
  padding-top: var(--spacing-md);
  border-top: 1px solid var(--border);
}

.upload-aside {
  padding: var(--spacing-md);
  background: var(--sand-light);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.dash-body .upload-aside h2 {
  margin: 0 0 var(--spacing-sm);
  font-size: 1em;
  color: var(--navy);
}

.upload-steps {
  margin: 0;
  padding-left: 1.2em;
  font-size: 0.92em;
  line-height: 1.55;
}

.upload-steps li + li {
  margin-top: 10px;
}

.upload-steps a {
  color: var(--accent-dark);
}

.upload-aside-note {
  display: flex;
  gap: 8px;
  margin: var(--spacing-md) 0 0;
  padding-top: var(--spacing-sm);
  border-top: 1px solid var(--border);
  font-size: 0.88em;
  line-height: 1.5;
  color: var(--text-light);
}

.upload-aside-note i {
  margin: 1px 0 0;
  color: var(--accent-dark);
}

@media (max-width: 900px) {
  .upload-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--spacing-lg);
  }
}

@media (max-width: 700px) {
  .standing {
    flex-wrap: wrap;
    align-items: flex-start;
    padding: var(--spacing-md);
  }

  .standing-icon {
    flex-basis: 40px;
    height: 40px;
    font-size: 1.2em;
  }

  .standing-action {
    flex: 1 1 100%;
  }

  .kind-options {
    grid-template-columns: minmax(0, 1fr);
  }

  .upload-submit .btn {
    width: 100%;
  }
}

/* ========================================
   MOBILE CORRECTIONS
   ======================================== */

/* Approve submits a form and Reject only reveals the reason box, so the two
   picked up different rules — a small tinted pill beside a large solid one,
   which read as two unrelated controls rather than a pair of choices. Size
   them together here. Approving stays the emphatic one: Reject on this page
   opens a form, it does not reject anything by itself. */
.action-buttons .btn,
.action-buttons form.plain-form button.btn-approve[type="submit"],
.action-buttons form.plain-form button.btn-reject[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 28px;
  font-family: var(--font-heading);
  font-size: 0.98em;
  font-weight: 700;
  line-height: 1.4;
  border: none;
  border-radius: var(--radius-pill);
  box-shadow: none;
  cursor: pointer;
}

.action-buttons .btn-approve,
.action-buttons form.plain-form button.btn-approve[type="submit"] {
  background: var(--success);
  color: #fff;
}

.action-buttons .btn-approve:hover,
.action-buttons form.plain-form button.btn-approve[type="submit"]:hover {
  background: #43a047;
  color: #fff;
}

.action-buttons .btn-reject,
.action-buttons form.plain-form button.btn-reject[type="submit"] {
  background: rgba(229, 57, 53, 0.12);
  color: #a5231f;
}

.action-buttons .btn-reject:hover,
.action-buttons form.plain-form button.btn-reject[type="submit"]:hover {
  background: var(--error);
  color: #fff;
}

@media (max-width: 760px) {
  /* This cell is a flex row justified to the right, and that rule outranks
     the `display: block` the card layout gives every other cell. On a phone
     the row cannot fit, and because it is justified from the right the
     "Decision:" label is what gets pushed off — off the left edge, outside
     the card entirely. */
  .hub-table td.review-actions {
    display: block;
    white-space: normal;
  }

  /* The filename, its type pill and the date shared one line, so a long name
     was squeezed into a column a few characters wide. */
  .upload-list li {
    display: block;
    padding: 12px var(--spacing-md);
  }

  .file-link {
    flex-wrap: wrap;
    row-gap: 6px;
  }

  /* A basis under the content width keeps the name beside its icon and wraps
     it internally. Left to size itself it jumps to the next line whole,
     stranding the icon alone on the one above. */
  .file-link .file-name {
    flex: 1 1 60%;
    min-width: 0;
  }

  .upload-date {
    display: block;
    margin-left: 0;
    margin-top: 6px;
  }

  .user-header,
  .upload-list li {
    padding-left: var(--spacing-md);
    padding-right: var(--spacing-md);
  }

  .application-card {
    padding: var(--spacing-md);
  }

  /* Label and value side by side leaves a phone too little room for the
     value, and the header wraps rather than squeezing the status badge. */
  .info-row {
    flex-direction: column;
    gap: 2px;
  }

  .info-row .value {
    text-align: left;
  }

  /* Approve and Reject together are three pixels wider than a 390px phone
     allows, so they wrapped to a line each at odd different widths. Share the
     row instead, thumb-sized — the same treatment the review queue gets. */
  .action-buttons .button-group {
    flex-wrap: nowrap;
  }

  .action-buttons .button-group > .btn,
  .action-buttons .button-group > form.plain-form {
    flex: 1;
  }

  .action-buttons .button-group > form.plain-form > .btn {
    width: 100%;
  }

  .action-buttons .btn {
    padding-left: 12px;
    padding-right: 12px;
  }

  /* Label above value. Two columns on a 390px screen leaves too little for
     the value, which is the half worth reading. */
  .detail-row {
    grid-template-columns: 1fr;
    gap: 2px;
  }
}

/* ========================================
   ADMIN VIEW
   Everything a coordinator sees and a volunteer does not.

   Every rule in this section is scoped under .admin-view, the class the
   staff-only templates put on <body>. That is not tidiness — the two sides of
   the hub share class names (.hub-table, .status-badge, .hub-pill, .dash-header
   and more), and the volunteer pages are in front of real people who did not
   ask for their pages to change. Scoping is what lets the admin side be
   reworked without touching theirs.

   The look is deliberately plainer than the rest of the site: firm borders
   instead of tints and shadows, less colour, and tighter type. These pages are
   read at a desk, several columns at a time, and the decoration that makes a
   landing page welcoming is noise in a table of twenty volunteers.
   ======================================== */

.admin-view {
  /* A touch firmer than --border, so a panel edge reads as a division rather
     than a suggestion. The soft one separates rows inside a panel, where a
     full-strength line would turn a list into a grid. */
  --admin-line: #d6cbba;
  --admin-line-soft: #eae3d8;
}

/* Data, not prose. 18px is right for a paragraph on the public site and too
   loose for a page that is mostly names and dates. */
.admin-view .dash-body {
  font-size: 16px;
}

.admin-view .main-content.with-sidebar .content-wide {
  box-shadow: none;
  border-color: var(--admin-line);
}

/* ---- page heading ---- */

.admin-view .dash-header {
  background: var(--cream);
  border-bottom: 1px solid var(--admin-line);
}

.admin-view .dash-header-icon {
  background: var(--sand-dark);
  color: var(--navy);
}

.admin-view .dash-header h1 {
  font-size: 1.2em;
}

.admin-view .dash-header .lead {
  font-size: 0.88em;
  color: var(--text-light);
}

/* ---- panels ----
   One box per thing, with its own edge. This is the whole layout: an admin page
   is a stack of panels and nothing else. */

.admin-view .admin-panel {
  border: 1px solid var(--admin-line);
  border-radius: var(--radius-md);
  background: #fff;
  margin-bottom: var(--spacing-lg);
  overflow: hidden;
}

.admin-view .admin-panel:last-of-type {
  margin-bottom: 0;
}

/* Only when there is in fact something waiting. An empty review queue with a
   warning stripe down it trains you to ignore the stripe. */
.admin-view .admin-panel-attention:has(table) {
  border-left: 3px solid var(--warning);
}

.admin-view .admin-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  padding: 10px var(--spacing-md);
  background: var(--sand-light);
  border-bottom: 1px solid var(--admin-line);
}

.admin-view .admin-panel-title {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  font-family: var(--font-heading);
  font-size: 1em;
  font-weight: 700;
  color: var(--navy);
}

.admin-view .admin-panel-title i {
  margin-right: 0;
  font-size: 1.05em;
  color: var(--text-light);
}

.admin-view .admin-count {
  font-family: var(--font-heading);
  font-size: 0.8em;
  font-weight: 700;
  color: var(--text-light);
  background: #fff;
  border: 1px solid var(--admin-line);
  border-radius: var(--radius-pill);
  padding: 1px 9px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.admin-view .admin-panel-link {
  font-family: var(--font-heading);
  font-size: 0.86em;
  font-weight: 600;
  color: var(--accent-dark);
  text-decoration: none;
}

.admin-view .admin-panel-link:hover {
  text-decoration: underline;
}

.admin-view .admin-panel-meta {
  font-size: 0.82em;
  color: var(--text-light);
}

.admin-view .admin-panel-body {
  padding: var(--spacing-md);
}

/* A line of explanation between the heading and the rows it is about. */
.admin-view .admin-panel-note {
  padding: 9px var(--spacing-md);
  background: var(--cream);
  border-bottom: 1px solid var(--admin-line-soft);
  color: var(--text-light);
  font-size: 0.9em;
  line-height: 1.5;
}

/* The closing line of a panel, and what an empty one says instead of rows. */
.admin-view .admin-panel-foot {
  padding: 10px var(--spacing-md);
  background: var(--sand-light);
  border-top: 1px solid var(--admin-line-soft);
  color: var(--text-light);
  font-size: 0.9em;
  line-height: 1.5;
}

/* An empty panel is head then foot, and the two borders would double up. */
.admin-view .admin-panel-head + .admin-panel-foot {
  border-top: none;
}

.admin-view .admin-panel-foot a {
  color: var(--accent-dark);
}

.admin-view .admin-empty {
  margin: 0;
  color: var(--text-light);
  font-size: 0.95em;
  line-height: 1.6;
}

/* Two panels side by side where there is room for them, one below the other
   where there is not. */
.admin-view .admin-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  gap: var(--spacing-lg);
  align-items: start;
  margin-bottom: var(--spacing-lg);
}

.admin-view .admin-columns > .admin-panel {
  margin-bottom: 0;
}

/* ---- tables inside panels ----
   Flush to the panel edge, with a line between every column as well as every
   row. Gridlines are clutter on a marketing page and the point of a table of
   twenty volunteers. */

.admin-view .admin-panel-table {
  padding: 0;
}

.admin-view .admin-panel-table .hub-table {
  font-size: 0.95em;
  margin: 0;
}

.admin-view .admin-panel-table .hub-table th {
  background: #fff;
  padding: 8px var(--spacing-md);
  border-bottom: 1px solid var(--admin-line);
}

.admin-view .admin-panel-table .hub-table td {
  padding: 10px var(--spacing-md);
  border-bottom: 1px solid var(--admin-line-soft);
}

.admin-view .admin-panel-table .hub-table th:not(:last-child),
.admin-view .admin-panel-table .hub-table td:not(:last-child) {
  border-right: 1px solid var(--admin-line-soft);
}

.admin-view .admin-panel-table .hub-table tbody tr:last-child td {
  border-bottom: none;
}

/* The actions column holds a link and sometimes a button too. Left on one line
   — which is what it is on the volunteer side, where it is a single link — the
   pair is wide enough to push the whole table past the panel edge and crush
   every other column to fit. Stacked, it takes the width of its widest item. */
.admin-view .admin-panel-table .hub-table td.row-action {
  white-space: normal;
  text-align: right;
}

/* The cell wraps between its actions; each action does not wrap inside itself,
   which is what stops "Open record" breaking across two lines. */
.admin-view .admin-panel-table .hub-table td.row-action > *,
.admin-view .admin-panel-table .hub-table td.row-action button {
  display: block;
  white-space: nowrap;
}

.admin-view .admin-panel-table .hub-table td.row-action .inline-form {
  display: flex;
  justify-content: flex-end;
}

.admin-view .admin-panel-table .hub-table td.row-action .inline-form {
  margin-top: 6px;
}

/* A number that has wrapped across two lines cannot be read off a screen,
   which is the entire reason it is on the page. */
.admin-view .hub-table a[href^="tel:"] {
  white-space: nowrap;
}

/* A row and its own detail row are one record, so no line runs between them. */
.admin-view .admin-panel-table .hub-table tr.has-detail td {
  border-bottom: none;
}

.admin-view .admin-panel-table .hub-table tr.admin-row-detail td {
  padding-top: 0;
}

.admin-view .admin-name {
  display: block;
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--navy);
  text-decoration: none;
}

.admin-view .admin-name:hover {
  color: var(--accent-dark);
  text-decoration: underline;
}

.admin-view .admin-sub {
  display: block;
  font-size: 0.82em;
  color: var(--text-light);
}

.admin-view .admin-missing {
  color: var(--text-light);
  font-style: italic;
  font-size: 0.92em;
}

/* ---- somebody's own words ----
   Quoted rather than set as body text, so it is obvious which parts of a page
   the charity wrote and which parts it was told. */

.admin-view .admin-quote {
  margin-top: var(--spacing-sm);
  padding: 9px 14px;
  background: var(--sand-light);
  border: 1px solid var(--admin-line-soft);
  border-left: 3px solid var(--sand-dark);
  border-radius: var(--radius-sm);
  font-size: 0.93em;
  line-height: 1.6;
}

.admin-view .admin-quote-label {
  display: block;
  font-family: var(--font-heading);
  font-size: 0.76em;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-light);
  margin-bottom: 3px;
}

.admin-view .admin-quote-warn {
  border-left-color: var(--error);
  background: rgba(229, 57, 53, 0.05);
}

/* ---- label and value pairs ---- */

.admin-view .admin-facts {
  margin: 0;
}

.admin-view .admin-fact {
  display: grid;
  grid-template-columns: minmax(110px, 34%) 1fr;
  gap: var(--spacing-sm);
  padding: 8px 0;
  border-bottom: 1px solid var(--admin-line-soft);
  font-size: 0.95em;
}

.admin-view .admin-fact:first-child {
  padding-top: 0;
}

.admin-view .admin-fact:last-child {
  padding-bottom: 0;
  border-bottom: none;
}

.admin-view .admin-fact dt {
  font-family: var(--font-heading);
  font-size: 0.86em;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-light);
  padding-top: 2px;
}

.admin-view .admin-fact dd {
  margin: 0;
  /* A grid item will not shrink below its content and an email address has
     nowhere to break, so without these it pushes out of the panel. */
  min-width: 0;
  overflow-wrap: anywhere;
}

/* ---- the checklist ---- */

.admin-view .checklist {
  list-style: none;
  margin: 0 0 var(--spacing-md);
  padding: 0;
  border: 1px solid var(--admin-line);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.admin-view .checklist-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-sm);
  margin: 0;
  padding: 9px 12px;
  border-bottom: 1px solid var(--admin-line-soft);
}

.admin-view .checklist-item:last-child {
  border-bottom: none;
}

.admin-view .checklist-item label {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-size: 0.96em;
  font-family: var(--font-body);
  font-weight: 500;
  color: var(--text);
  cursor: pointer;
}

.admin-view .checklist-item input[type="checkbox"] {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin: 0;
  accent-color: var(--accent);
  cursor: pointer;
}

.admin-view .checklist-item.is-done .checklist-label {
  color: var(--text-light);
}

.admin-view .checklist-when {
  font-size: 0.78em;
  color: var(--text-light);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* ---- forms ----
   .plain-form keeps the global form card off these, which also makes them
   inline; everything here puts the block layout back and tightens the controls
   to the size the rest of the page is set at. */

.admin-view .admin-form {
  display: block;
}

.admin-view .admin-field {
  margin-bottom: var(--spacing-sm);
  min-width: 0;
}

.admin-view .admin-field > label {
  display: block;
  margin-bottom: 5px;
  font-family: var(--font-heading);
  font-size: 0.82em;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-light);
}

.admin-view .admin-field input[type="text"],
.admin-view .admin-field input[type="search"],
.admin-view .admin-field input[type="tel"],
.admin-view .admin-field input[type="email"],
.admin-view .admin-field input[type="date"],
.admin-view .admin-field input[type="number"],
.admin-view .admin-field textarea,
.admin-view .admin-field select {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--admin-line);
  border-radius: var(--radius-sm);
  background: #fff;
  font-family: var(--font-body);
  font-size: 0.97em;
  color: var(--text);
}

.admin-view .admin-field textarea {
  line-height: 1.6;
  resize: vertical;
}

.admin-view .admin-field input:focus,
.admin-view .admin-field textarea:focus,
.admin-view .admin-field select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(42, 161, 152, 0.12);
}

.admin-view .admin-field-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: var(--spacing-sm);
}

/* When, how and what, in the order they are asked. The widths are fixed rather
   than shared evenly because a date needs far less room than a sentence. */
.admin-view .admin-log-row {
  grid-template-columns: 165px 175px minmax(220px, 1fr);
}

.admin-view .admin-add-row,
.admin-view .admin-search-row {
  grid-template-columns: minmax(220px, 1fr) auto;
  align-items: end;
}

.admin-view .admin-search-row {
  display: grid;
  gap: var(--spacing-sm);
  max-width: 620px;
}

.admin-view .admin-search-row .btn {
  margin-bottom: var(--spacing-sm);
}

.admin-view .admin-add-row .btn {
  margin-bottom: var(--spacing-sm);
}

.admin-view .admin-fieldset {
  margin: var(--spacing-md) 0;
  padding: var(--spacing-sm) var(--spacing-md) 4px;
  border: 1px solid var(--admin-line-soft);
  border-radius: var(--radius-sm);
  background: var(--sand-light);
}

.admin-view .admin-fieldset legend {
  padding: 0 7px;
  font-family: var(--font-heading);
  font-size: 0.8em;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-light);
}

.admin-view .admin-field-note {
  margin: 0 0 var(--spacing-sm);
  font-size: 0.88em;
  line-height: 1.55;
  color: var(--text-light);
}

/* ---- the contact log ---- */

.admin-view .admin-timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--admin-line);
}

.admin-view .admin-timeline-item {
  margin: 0;
  padding: 10px var(--spacing-md);
  border-bottom: 1px solid var(--admin-line-soft);
}

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

.admin-view .admin-timeline-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
}

.admin-view .admin-timeline-kind {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 1px 10px;
  border: 1px solid var(--admin-line);
  border-radius: var(--radius-pill);
  font-family: var(--font-heading);
  font-size: 0.76em;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-light);
  white-space: nowrap;
}

.admin-view .admin-timeline-kind i {
  margin-right: 0;
  font-size: 1.05em;
}

.admin-view .admin-timeline-date {
  font-size: 0.85em;
  color: var(--text-light);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.admin-view .admin-timeline-summary {
  flex: 1 1 220px;
  min-width: 0;
  font-weight: 600;
  color: var(--text-dark);
  overflow-wrap: anywhere;
}

.admin-view .admin-timeline-detail {
  margin-top: 5px;
  font-size: 0.93em;
  line-height: 1.6;
}

.admin-view .admin-timeline-by {
  margin-top: 4px;
  font-size: 0.8em;
  color: var(--text-light);
}

/* ---- small buttons ----
   Both of these are submit buttons inside a .plain-form, which the global rule
   would otherwise turn into a teal pill the size of a call to action. The
   selectors are as specific as they are for that reason, not by preference. */

.admin-view form.plain-form button.admin-delete[type="submit"] {
  padding: 2px 8px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: none;
  box-shadow: none;
  color: var(--text-light);
  font-size: 0.95em;
  line-height: 1.2;
  cursor: pointer;
}

.admin-view form.plain-form button.admin-delete[type="submit"]:hover {
  transform: none;
  box-shadow: none;
  border-color: var(--error);
  color: var(--error);
  background: #fff;
}

.admin-view form.plain-form button.admin-quiet-btn[type="submit"] {
  padding: 4px 12px;
  border: 1px solid var(--admin-line);
  border-radius: var(--radius-sm);
  background: #fff;
  box-shadow: none;
  font-family: var(--font-heading);
  font-size: 0.84em;
  font-weight: 600;
  color: var(--navy);
  cursor: pointer;
}

.admin-view form.plain-form button.admin-quiet-btn[type="submit"]:hover {
  transform: none;
  box-shadow: none;
  border-color: var(--accent);
  color: var(--accent-dark);
}

.admin-view .admin-timeline-head .inline-form {
  margin-left: auto;
}

/* ---- documents on file ---- */

.admin-view .admin-docs {
  list-style: none;
  margin: 0;
  padding: 0;
}

.admin-view .admin-doc {
  margin: 0;
  padding: var(--spacing-sm) var(--spacing-md);
  border-bottom: 1px solid var(--admin-line-soft);
}

.admin-view .admin-doc:last-child {
  border-bottom: none;
}

/* Inset rather than a real border, so the accent does not shift the row. */
.admin-view .admin-doc.doc-pending {
  box-shadow: inset 3px 0 0 var(--warning);
}

.admin-view .admin-doc.doc-approved {
  box-shadow: inset 3px 0 0 var(--success);
}

.admin-view .admin-doc.doc-rejected {
  box-shadow: inset 3px 0 0 var(--error);
}

.admin-view .admin-doc-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.admin-view .admin-doc-head .file-name {
  font-weight: 600;
  word-break: break-word;
}

.admin-view .admin-doc-head .status-badge {
  margin-left: auto;
}

.admin-view .admin-doc-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px var(--spacing-md);
  margin-top: 4px;
  font-size: 0.85em;
  color: var(--text-light);
}

/* ---- grouped lists (the pending upload queue) ---- */

.admin-view .admin-groups,
.admin-view .admin-group-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.admin-view .admin-group {
  margin: 0;
  border-bottom: 1px solid var(--admin-line);
}

.admin-view .admin-group:last-child {
  border-bottom: none;
}

.admin-view .admin-group-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-sm);
  padding: 8px var(--spacing-md);
  background: var(--cream);
  border-bottom: 1px solid var(--admin-line-soft);
}

.admin-view .admin-group-list li {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 8px var(--spacing-md);
  border-bottom: 1px solid var(--admin-line-soft);
  font-size: 0.95em;
}

.admin-view .admin-group-list li:last-child {
  border-bottom: none;
}

.admin-view .admin-group-list .file-link {
  flex: 0 1 auto;
}

.admin-view .admin-group-list .upload-date {
  margin-left: auto;
  font-size: 0.85em;
}

/* ---- editing the checklist itself ---- */

.admin-view .admin-step-table {
  margin-bottom: var(--spacing-md);
  border: 1px solid var(--admin-line);
  border-radius: var(--radius-sm);
}

.admin-view .admin-step-table th,
.admin-view .admin-step-table td {
  padding: 7px 10px;
  border-bottom: 1px solid var(--admin-line-soft);
}

.admin-view .admin-step-table tbody tr:last-child td {
  border-bottom: none;
}

.admin-view .admin-step-table .col-order {
  width: 88px;
}

.admin-view .admin-step-table .col-hide {
  width: 78px;
  text-align: center;
}

.admin-view .admin-step-table input[type="text"] {
  width: 100%;
  padding: 7px 10px;
  border: 1px solid var(--admin-line);
  border-radius: var(--radius-sm);
  background: #fff;
  font-family: var(--font-body);
  font-size: 0.97em;
  color: var(--text);
}

.admin-view .admin-step-table input[type="number"] {
  width: 68px;
  padding: 7px 8px;
  border: 1px solid var(--admin-line);
  border-radius: var(--radius-sm);
  background: #fff;
  font-family: var(--font-body);
  font-size: 0.97em;
  text-align: center;
}

.admin-view .admin-step-table input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--accent);
}

.admin-view .admin-step-table input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(42, 161, 152, 0.12);
}

/* ---- shared components, toned down for these pages ---- */

/* Status still carries the colour everyone reads without thinking, but with an
   edge on it rather than a tint alone. */
.admin-view .status-badge {
  padding: 2px 10px;
  border: 1px solid currentColor;
  background: #fff;
  font-size: 0.78em;
  letter-spacing: 0.05em;
}

.admin-view .hub-pill {
  border: 1px solid currentColor;
  font-size: 0.8em;
}

/* Nothing on an admin page lifts, glows or slides when pointed at. There is a
   lot of it on one screen, and all of it is somebody's record. */
.admin-view .admin-panel:hover,
.admin-view .admin-doc:hover,
.admin-view .admin-group:hover {
  box-shadow: none;
  transform: none;
}

.admin-view .upload-info {
  background: #fff;
  border-color: var(--admin-line);
  padding: var(--spacing-sm) var(--spacing-md);
}

.admin-view .info-row {
  border-bottom-color: var(--admin-line-soft);
}

/* ---- narrow screens ---- */

@media (max-width: 760px) {
  /* Each row becomes its own card below this width — see "hub tables on small
     screens". Column gridlines make no sense once there are no columns, and
     the rule above is specific enough to need undoing explicitly. */
  .admin-view .admin-panel-table .hub-table th:not(:last-child),
  .admin-view .admin-panel-table .hub-table td:not(:last-child),
  .admin-view .admin-panel-table .hub-table td {
    border-right: none;
    border-bottom: none;
    padding: 3px 0;
  }

  .admin-view .admin-panel-table {
    padding: var(--spacing-sm);
  }

  .admin-view .admin-panel-table .hub-table tr {
    border-color: var(--admin-line);
  }

  /* The detail row is its own card by now, so it is joined to the row above
     rather than left floating under it. */
  .admin-view .admin-panel-table .hub-table tr.has-detail {
    margin-bottom: 0;
    border-bottom: none;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  }

  .admin-view .admin-panel-table .hub-table tr.admin-row-detail {
    border-top: none;
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
    padding-top: 0;
  }

  .admin-view .admin-panel-table .hub-table td.row-action {
    text-align: left;
  }

  .admin-view .admin-panel-table .hub-table td.row-action .inline-form {
    justify-content: flex-start;
  }

  .admin-view .admin-log-row,
  .admin-view .admin-add-row,
  .admin-view .admin-search-row,
  .admin-view .admin-field-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .admin-view .admin-add-row .btn,
  .admin-view .admin-search-row .btn {
    margin-bottom: 0;
    justify-content: center;
  }
}

@media (max-width: 520px) {
  .admin-view .admin-fact {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
  }

  /* When and who go under the step rather than squeezing it into half a
     column — the step is the thing being read. */
  .admin-view .checklist-item {
    flex-wrap: wrap;
  }

  .admin-view .checklist-when {
    flex-basis: 100%;
    margin-left: 28px;
  }

  .admin-view .admin-panel-body,
  .admin-view .admin-panel-head,
  .admin-view .admin-panel-note,
  .admin-view .admin-panel-foot {
    padding-left: var(--spacing-sm);
    padding-right: var(--spacing-sm);
  }
}