/* ============================================================================
   hub.css — The Menopause Hub
   ----------------------------------------------------------------------------
   ONE stylesheet for the whole dashboard. Everything that used to be a separate
   partial is now a labelled SECTION below. To build a page you only include
   three PHP assets — partials/_head.php, partials/sidebar.php, partials/_foot.php
   — and write the rest of the markup yourself, copying the snippet printed at the
   top of each section.

   HOW TO USE
     1. Find the section for the block you want (see Table of contents).
     2. Copy the markup from the comment block at the top of that section.
     3. Paste it into your page and swap in your own content.
   ----------------------------------------------------------------------------
   TABLE OF CONTENTS
     00  DESIGN TOKENS .............. :root custom properties
     01  RESET & BASE ............... box-sizing, body, keyframes
     02  APP SHELL .................. .app
     03  SIDEBAR  ··· partials/sidebar.php (kept as a separate asset)
     04  TOPBAR ..................... .topbar
     05  MAIN / CONTENT / GRIDS ..... .main .content .stats-grid .two-col .three-col
     06  BUTTONS .................... .btn .icon-btn .notif-btn
     07  CARD SHELL ................. .card .card-header
     08  PILLS ...................... .pill-*
     09  AVATARS .................... .avatar (+ size / tone modifiers)
     10  CAPACITY BAR ............... .capacity-bar
     11  TREND PILLS ................ .stat-trend .trend-up/-down
     12  STARS ...................... .feedback-stars .star
     13  HEALTH BANNER .............. .health-banner
     14  STAT CARD .................. .stat-card
     15  SESSION ITEM ............... .session-item
     16  INBOX ITEM ................. .inbox-item
     17  ATTENDEE ROW ............... .attendee-row
     18  FEEDBACK ITEM .............. .feedback-item
     19  QUICK ACTIONS .............. .quick-actions
     20  BAR CHART .................. .bar-chart
     ·· FORMS ··
     21  FORM LAYOUT ................ .form .form-grid .field .field-label/-hint/-error
     22  TEXT INPUTS ................ .input (+ states) · .input-group (leading icon)
     23  TEXTAREA ................... .textarea
     24  SELECT ..................... .select-wrap > .select
     25  CHECKBOX ................... .check
     26  RADIO ...................... .radio
     27  SWITCH ..................... .switch
     28  RANGE SLIDER ............... .range
     29  FILE UPLOAD ................ .file-drop
     30  FORM ACTIONS ............... .form-actions
   ============================================================================ */


/* ============================================================================
   00  DESIGN TOKENS
   The single source of truth. Change a value here and it ripples site-wide.
   ============================================================================ */
:root {
  /* — Brand — */
  --rose:        #C2466B;
  --rose-light:  #F5E0E8;
  --rose-mid:    #E8B4C5;
  --sage:        #4A7C6F;
  --sage-light:  #E2EFEC;
  --amber:       #C27C2E;
  --amber-light: #FBF0E0;
  --purple:      #7C5CBF;
  --purple-light:#EDE9FB;
  --blue:        #2E7BAF;
  --blue-light:  #E8F4FB;

  /* — Ink (text) — */
  --ink:       #1E1A1D;
  --ink-mid:   #4A4148;
  --ink-soft:  #7A7178;

  /* — Paper (surfaces) — */
  --paper:      #FAF8F6;
  --paper-mid:  #F2EEE9;
  --paper-dark: #E8E2DB;
  --white:      #FFFFFF;

  /* — Borders — */
  --border:     rgba(30,26,29,0.10);
  --border-med: rgba(30,26,29,0.16);

  /* — Radii — */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 24px;

  /* — Type — */
  --font-serif: 'Fraunces', Georgia, serif;
  --font-sans:  'DM Sans', system-ui, sans-serif;
}


/* ============================================================================
   01  RESET & BASE
   ============================================================================ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body { height: 100%; }

body {
  font-family: var(--font-sans);
  background: var(--paper);
  color: var(--ink);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}


/* ============================================================================
   02  APP SHELL
   Wraps the sidebar + main on every screen.
   ----------------------------------------------------------------------------
   MARKUP
     <div class="app">
       <!-- include 'partials/sidebar.php' -->
       <main class="main"> … </main>
     </div>
   ============================================================================ */
.app {
  display: flex;
  min-height: 100vh;
}


/* ============================================================================
   03  SIDEBAR        ·····  partials/sidebar.php (KEPT AS A SEPARATE ASSET)
   ----------------------------------------------------------------------------
   The sidebar stays a PHP partial because it's identical on every page and is
   driven by data ($active, $nav, runner details). Don't hand-write it — just:
       $active = 'dashboard';
       include 'partials/sidebar.php';
   The classes it renders are documented here for reference / direct edits.
   ============================================================================ */
.sidebar {
  width: 240px;
  min-height: 100vh;
  background: var(--ink);
  display: flex;
  flex-direction: column;
  padding: 0;
  flex-shrink: 0;
  position: sticky;
  top: 0;
  height: 100vh;
}

.sidebar-brand {
  padding: 28px 24px 24px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.brand-name {
  font-family: var(--font-serif);
  font-size: 13px;
  font-weight: 300;
  color: rgba(255,255,255,0.5);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.brand-hub {
  font-family: var(--font-serif);
  font-size: 17px;
  font-weight: 400;
  color: #fff;
  line-height: 1.3;
}

.hub-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 8px;
  font-size: 11px;
  font-weight: 500;
  color: #86EFAC;
  letter-spacing: 0.03em;
}

.hub-status::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #86EFAC;
}

.sidebar-nav {
  flex: 1;
  padding: 20px 12px;
  overflow-y: auto;
}

.nav-section-label {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.3);
  padding: 0 12px;
  margin: 16px 0 6px;
}

.nav-section-label:first-child { margin-top: 0; }

.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  font-size: 13.5px;
  font-weight: 400;
  color: rgba(255,255,255,0.6);
  cursor: pointer;
  transition: all 0.15s;
  text-decoration: none;
  margin-bottom: 1px;
}

.nav-item:hover {
  background: rgba(255,255,255,0.07);
  color: rgba(255,255,255,0.9);
}

.nav-item.active {
  background: var(--rose);
  color: #fff;
}

.nav-item svg { width: 16px; height: 16px; flex-shrink: 0; opacity: 0.8; }
.nav-item.active svg { opacity: 1; }

.nav-badge {
  margin-left: auto;
  background: var(--rose);
  color: #fff;
  font-size: 10px;
  font-weight: 500;
  padding: 1px 6px;
  border-radius: 20px;
  min-width: 18px;
  text-align: center;
}

.nav-item.active .nav-badge { background: rgba(255,255,255,0.25); }

.sidebar-footer {
  padding: 16px 12px;
  border-top: 1px solid rgba(255,255,255,0.08);
}

.runner-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  background: rgba(255,255,255,0.06);
}

.runner-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--rose);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-serif);
  font-size: 13px;
  color: #fff;
  flex-shrink: 0;
}

.runner-name {
  font-size: 13px;
  font-weight: 500;
  color: rgba(255,255,255,0.9);
}

.runner-role {
  font-size: 11px;
  color: rgba(255,255,255,0.4);
  margin-top: 1px;
}


/* ============================================================================
   04  TOPBAR
   Title on the left, action buttons + notification bell on the right.
   ----------------------------------------------------------------------------
   MARKUP
     <header class="topbar">
       <h1 class="topbar-title">Good morning, Sarah</h1>
       <div class="topbar-actions">
         <a href="#" class="btn btn-ghost">…icon…Share hub page</a>
         <a href="#" class="btn btn-primary">…icon…Add session</a>
         <button class="notif-btn" aria-label="Notifications">
           <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></svg>
           <span class="notif-dot"></span>
         </button>
       </div>
     </header>
   ============================================================================ */
.topbar {
  background: var(--white);
  border-bottom: 1px solid var(--border);
  padding: 0 32px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  position: sticky;
  top: 0;
  z-index: 10;
}

.topbar-title {
  font-family: var(--font-serif);
  font-size: 20px;
  font-weight: 400;
  color: var(--ink);
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}


/* ============================================================================
   05  MAIN / CONTENT / GRIDS
   The scrolling area to the right of the sidebar, plus the three layout grids.
   ----------------------------------------------------------------------------
   MARKUP
     <main class="main">
       <header class="topbar"> … </header>
       <div class="content">
         <div class="stats-grid"> …4 stat cards… </div>
         <div class="two-col">   …main column + 380px aside… </div>
         <div class="three-col"> …three equal columns… </div>
       </div>
     </main>
   ============================================================================ */
.main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.content {
  padding: 32px;
  flex: 1;
}

.content > * + * { margin-top: 28px; }

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

.two-col {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 20px;
}

.three-col {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 20px;
}

/* Vertical stack used inside a grid cell (e.g. feedback + quick actions). */
.stack-20 {
  display: flex;
  flex-direction: column;
  gap: 20px;
}


/* ============================================================================
   06  BUTTONS
   ----------------------------------------------------------------------------
   MARKUP
     <a class="btn btn-primary" href="#">
       <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M12 5v14M5 12h14"/></svg>Add session
     </a>
     <a class="btn btn-ghost" href="#">Share hub page</a>
     <button class="icon-btn" title="Edit">…svg…</button>
     <button class="notif-btn"><svg…></svg><span class="notif-dot"></span></button>
   ============================================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  border: none;
  transition: all 0.15s;
  text-decoration: none;
}

.btn-primary {
  background: var(--rose);
  color: #fff;
}
.btn-primary:hover { background: #AD3C5E; }

.btn-ghost {
  background: transparent;
  color: var(--ink-mid);
  border: 1px solid var(--border-med);
}
.btn-ghost:hover { background: var(--paper-mid); }

.btn svg { width: 14px; height: 14px; }

.icon-btn {
  width: 30px;
  height: 30px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-med);
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--ink-soft);
  transition: all 0.12s;
}
.icon-btn:hover { background: var(--paper-mid); color: var(--ink); }
.icon-btn svg { width: 14px; height: 14px; }

.notif-btn {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-med);
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  color: var(--ink-mid);
}
.notif-btn svg { width: 16px; height: 16px; }

.notif-dot {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--rose);
  border: 1.5px solid var(--white);
}


/* ============================================================================
   07  CARD SHELL
   The white panel that wraps lists of rows (sessions, messages, attendees…).
   ----------------------------------------------------------------------------
   MARKUP
     <section class="card">
       <header class="card-header">
         <h2 class="card-title">Upcoming sessions</h2>
         <a class="card-link" href="#">View all →</a>
       </header>
       <!-- rows go here: .session-item / .inbox-item / .attendee-row … -->
     </section>
   ============================================================================ */
.card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  animation: fadeUp 0.4s 0.2s ease both;
}

.card-header {
  padding: 18px 22px 16px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.card-title {
  font-family: var(--font-serif);
  font-size: 16px;
  font-weight: 400;
  color: var(--ink);
}

.card-link {
  font-size: 12px;
  color: var(--rose);
  text-decoration: none;
  font-weight: 500;
}
.card-link:hover { text-decoration: underline; }

/* Generic list row that lives inside a card. */
.card-row {
  border-bottom: 1px solid var(--border);
  transition: background 0.1s;
}
.card-row:last-child { border-bottom: none; }
.card-row:hover { background: var(--paper); }

/* Padded body for cards that hold a form or free content (not list rows). */
.card-body { padding: 22px 22px 24px; }


/* ============================================================================
   08  PILLS
   ----------------------------------------------------------------------------
   MARKUP
     <span class="pill pill-rose">In person</span>
     <span class="pill pill-sage">In person</span>
     <span class="pill pill-amber">Online</span>
     <span class="pill pill-gray">Returning</span>
   ============================================================================ */
.pill {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 20px;
}
.pill-rose  { background: var(--rose-light);  color: var(--rose); }
.pill-sage  { background: var(--sage-light);  color: var(--sage); }
.pill-amber { background: var(--amber-light); color: var(--amber); }
.pill-gray  { background: var(--paper-mid);   color: var(--ink-soft); }


/* ============================================================================
   09  AVATARS
   ----------------------------------------------------------------------------
   MARKUP
     <span class="avatar">LM</span>              <!-- default rose, 34px -->
     <span class="avatar avatar-sm">JB</span>    <!-- 28px -->
     <span class="avatar avatar-lg">SJ</span>    <!-- 40px -->
     <span class="avatar avatar-sage">RP</span>  <!-- tone: -sage -amber -purple -blue -->
   ============================================================================ */
.avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--rose-light);
  color: var(--rose);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-serif);
  font-size: 13px;
  flex-shrink: 0;
}
.avatar-sm   { width: 28px; height: 28px; font-size: 11px; }
.avatar-lg   { width: 40px; height: 40px; font-size: 15px; }

.avatar-sage   { background: var(--sage-light);   color: var(--sage); }
.avatar-amber  { background: var(--amber-light);  color: var(--amber); }
.avatar-purple { background: var(--purple-light); color: var(--purple); }
.avatar-blue   { background: var(--blue-light);   color: var(--blue); }


/* ============================================================================
   10  CAPACITY BAR
   ----------------------------------------------------------------------------
   MARKUP
     <div class="capacity-bar"><div class="capacity-fill" style="width:25%"></div></div>
     <div class="capacity-bar"><div class="capacity-fill warning" style="width:67%"></div></div>
     <div class="capacity-bar"><div class="capacity-fill full" style="width:100%"></div></div>
   ============================================================================ */
.capacity-bar {
  height: 4px;
  background: var(--paper-dark);
  border-radius: 2px;
  overflow: hidden;
  width: 120px;
}

.capacity-fill {
  height: 100%;
  border-radius: 2px;
  background: var(--sage);
  transition: width 0.3s;
}
.capacity-fill.warning { background: var(--amber); }
.capacity-fill.full    { background: var(--rose); }


/* ============================================================================
   11  TREND PILLS
   ----------------------------------------------------------------------------
   MARKUP
     <span class="stat-trend trend-up"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="18 15 12 9 6 15"/></svg>+12%</span>
     <span class="stat-trend trend-down"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="6 9 12 15 18 9"/></svg>−4</span>
   ============================================================================ */
.stat-trend {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  font-weight: 500;
  padding: 2px 7px;
  border-radius: 20px;
}
.trend-up   { background: var(--sage-light); color: var(--sage); }
.trend-down { background: var(--rose-light); color: var(--rose); }
.stat-trend svg { width: 10px; height: 10px; }


/* ============================================================================
   12  STARS
   ----------------------------------------------------------------------------
   MARKUP
     <div class="feedback-stars">
       <span class="star">★</span><span class="star">★</span><span class="star">★</span>
       <span class="star">★</span><span class="star empty">★</span>
     </div>
   ============================================================================ */
.feedback-stars { display: flex; gap: 2px; }
.star { color: var(--amber); font-size: 12px; }
.star.empty { color: var(--paper-dark); }


/* ============================================================================
   13  HEALTH BANNER
   ----------------------------------------------------------------------------
   MARKUP
     <section class="health-banner">
       <div class="health-ring">
         <svg width="72" height="72" viewBox="0 0 72 72">
           <circle cx="36" cy="36" r="30" fill="none" stroke="#F2EEE9" stroke-width="6"/>
           <!-- dashoffset = 188.5 * (1 - score/100) -->
           <circle cx="36" cy="36" r="30" fill="none" stroke="#C2466B" stroke-width="6" stroke-dasharray="188.5" stroke-dashoffset="47" stroke-linecap="round"/>
         </svg>
         <div class="health-ring-num">75</div>
       </div>
       <div class="health-text">
         <h3>Hub health score: good</h3>
         <p>Your hub profile is 75% complete…</p>
       </div>
       <div class="health-items">
         <span class="health-item done"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="20 6 9 17 4 12"/></svg>Description</span>
         <span class="health-item todo"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>Welcome video</span>
       </div>
     </section>
   ============================================================================ */
.health-banner {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 24px 28px;
  display: flex;
  align-items: center;
  gap: 28px;
  animation: fadeUp 0.35s ease both;
}

.health-ring {
  position: relative;
  width: 72px;
  height: 72px;
  flex-shrink: 0;
}
.health-ring svg { transform: rotate(-90deg); }

.health-ring-num {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-serif);
  font-size: 20px;
  font-weight: 400;
  color: var(--rose);
}

.health-text h3 {
  font-family: var(--font-serif);
  font-size: 17px;
  font-weight: 400;
  color: var(--ink);
  margin-bottom: 4px;
}

.health-text p {
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.5;
}

.health-items {
  display: flex;
  gap: 10px;
  margin-left: auto;
  flex-wrap: wrap;
}

.health-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--ink-mid);
  padding: 6px 12px;
  border-radius: 20px;
  background: var(--paper-mid);
}
.health-item.done { color: var(--sage); background: var(--sage-light); }
.health-item.todo { color: var(--rose); background: var(--rose-light); }
.health-item svg { width: 13px; height: 13px; }


/* ============================================================================
   14  STAT CARD
   Use four inside a .stats-grid. Top-border colour set by tone modifier.
   ----------------------------------------------------------------------------
   MARKUP
     <div class="stat-card">          <!-- tone: add .sage / .amber / .purple -->
       <p class="stat-label">Total attendees</p>
       <p class="stat-value">284</p>
       <div class="stat-meta">
         <span class="stat-trend trend-up"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="18 15 12 9 6 15"/></svg>+12%</span>
         vs last month
       </div>
     </div>
   ============================================================================ */
.stat-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px 22px;
  position: relative;
  overflow: hidden;
  animation: fadeUp 0.4s ease both;
}

.stat-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--rose);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.stat-card.sage::before   { background: var(--sage); }
.stat-card.amber::before  { background: var(--amber); }
.stat-card.purple::before { background: var(--purple); }

.stats-grid .stat-card:nth-child(1) { animation-delay: 0.05s; }
.stats-grid .stat-card:nth-child(2) { animation-delay: 0.10s; }
.stats-grid .stat-card:nth-child(3) { animation-delay: 0.15s; }
.stats-grid .stat-card:nth-child(4) { animation-delay: 0.20s; }

.stat-label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 10px;
}

.stat-value {
  font-family: var(--font-serif);
  font-size: 38px;
  font-weight: 300;
  color: var(--ink);
  line-height: 1;
  margin-bottom: 8px;
}

.stat-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--ink-soft);
}


/* ============================================================================
   15  SESSION ITEM
   One row per session. Drop inside a .card. Date-box tone: .sage / .amber.
   Capacity-fill state: warning (>=65%) / full (100%).
   ----------------------------------------------------------------------------
   MARKUP
     <article class="session-item">
       <div class="session-date-box">           <!-- tone: add .sage / .amber -->
         <div class="session-day">19</div>
         <div class="session-month">May</div>
       </div>
       <div>
         <p class="session-name">Understanding HRT: your questions answered</p>
         <div class="session-meta">
           <span class="session-meta-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 3"/></svg>6:30 – 8:00pm</span>
           <span class="session-meta-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/></svg>14 / 20 booked</span>
           <span class="pill pill-rose">In person</span>
         </div>
         <div class="capacity-bar" style="margin-top:8px"><div class="capacity-fill warning" style="width:70%"></div></div>
       </div>
       <div class="session-actions">
         <button class="icon-btn" title="Edit"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg></button>
         <button class="icon-btn" title="Share"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/><line x1="8.59" y1="13.51" x2="15.42" y2="17.49"/><line x1="15.41" y1="6.51" x2="8.59" y2="10.49"/></svg></button>
       </div>
     </article>
   ============================================================================ */
.session-item {
  padding: 16px 22px;
  border-bottom: 1px solid var(--border);
  display: grid;
  grid-template-columns: 52px 1fr auto;
  gap: 14px;
  align-items: start;
  transition: background 0.1s;
}
.session-item:last-child { border-bottom: none; }
.session-item:hover { background: var(--paper); }

.session-date-box {
  background: var(--rose-light);
  border-radius: var(--radius-sm);
  text-align: center;
  padding: 6px 4px;
}
.session-date-box.sage  { background: var(--sage-light); }
.session-date-box.amber { background: var(--amber-light); }

.session-day {
  font-family: var(--font-serif);
  font-size: 20px;
  font-weight: 400;
  color: var(--rose);
  line-height: 1;
}
.session-date-box.sage  .session-day { color: var(--sage); }
.session-date-box.amber .session-day { color: var(--amber); }

.session-month {
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--rose);
  margin-top: 2px;
}
.session-date-box.sage  .session-month { color: var(--sage); }
.session-date-box.amber .session-month { color: var(--amber); }

.session-name {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 4px;
  line-height: 1.3;
}

.session-meta {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.session-meta-item {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11.5px;
  color: var(--ink-soft);
}
.session-meta-item svg { width: 12px; height: 12px; }

.session-actions {
  display: flex;
  gap: 6px;
  align-items: center;
}


/* ============================================================================
   16  INBOX ITEM
   ----------------------------------------------------------------------------
   MARKUP
     <article class="inbox-item unread">       <!-- drop .unread for read -->
       <span class="avatar">LM</span>           <!-- tone: avatar-sage etc -->
       <div class="inbox-body">
         <p class="inbox-name">Linda Matthews</p>
         <p class="inbox-msg">Hi Sarah, I wanted to ask about the yoga session…</p>
       </div>
       <div class="inbox-aside">
         <span class="inbox-time">9:14am</span>
         <span class="unread-dot"></span>       <!-- omit when read -->
       </div>
     </article>
   ============================================================================ */
.inbox-item {
  padding: 14px 22px;
  border-bottom: 1px solid var(--border);
  display: flex;
  gap: 12px;
  align-items: flex-start;
  transition: background 0.1s;
  cursor: pointer;
}
.inbox-item:last-child { border-bottom: none; }
.inbox-item:hover { background: var(--paper); }
.inbox-item.unread { background: #FFF8FA; }

.inbox-body { min-width: 0; flex: 1; }

.inbox-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 2px;
}

.inbox-msg {
  font-size: 12px;
  color: var(--ink-soft);
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 240px;
}

.inbox-aside {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  flex-shrink: 0;
}

.inbox-time {
  font-size: 11px;
  color: var(--ink-soft);
  flex-shrink: 0;
}

.unread-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--rose);
  flex-shrink: 0;
}


/* ============================================================================
   17  ATTENDEE ROW
   ----------------------------------------------------------------------------
   MARKUP
     <article class="attendee-row">
       <span class="avatar avatar-sm">JB</span>     <!-- tone: avatar-sage etc -->
       <div>
         <p class="att-name">Janet Browne</p>
         <p class="att-sub">First visit · 19 May session</p>
       </div>
       <span class="pill pill-rose">New</span>
     </article>
   ============================================================================ */
.attendee-row {
  padding: 12px 22px;
  border-bottom: 1px solid var(--border);
  display: grid;
  grid-template-columns: 28px 1fr auto;
  gap: 12px;
  align-items: center;
  transition: background 0.1s;
}
.attendee-row:last-child { border-bottom: none; }
.attendee-row:hover { background: var(--paper); }

.att-name { font-size: 13px; font-weight: 500; color: var(--ink); }
.att-sub  { font-size: 11px; color: var(--ink-soft); margin-top: 1px; }


/* ============================================================================
   18  FEEDBACK ITEM
   ----------------------------------------------------------------------------
   MARKUP
     <article class="feedback-item">
       <div class="feedback-stars">
         <span class="star">★</span><span class="star">★</span><span class="star">★</span><span class="star">★</span><span class="star">★</span>
       </div>
       <p class="feedback-text">"Finally somewhere I felt truly understood…"</p>
       <div class="feedback-meta">
         <span>Rachel P. — 12 May</span>
         <span class="approve-btn">Approve as testimonial</span>   <!-- optional -->
       </div>
     </article>
   ============================================================================ */
.feedback-item {
  padding: 14px 22px;
  border-bottom: 1px solid var(--border);
}
.feedback-item:last-child { border-bottom: none; }

.feedback-text {
  font-size: 12.5px;
  color: var(--ink-mid);
  line-height: 1.5;
  font-style: italic;
  margin: 5px 0;
}

.feedback-meta {
  font-size: 11px;
  color: var(--ink-soft);
  display: flex;
  gap: 10px;
}

.approve-btn {
  font-size: 11px;
  font-weight: 500;
  color: var(--sage);
  cursor: pointer;
  text-decoration: underline;
}


/* ============================================================================
   19  QUICK ACTIONS
   2-up grid of dashed action tiles. Drop inside a .card.
   ----------------------------------------------------------------------------
   MARKUP
     <div class="quick-actions">
       <a class="qa-btn" href="#">
         <span class="qa-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg></span>
         <span class="qa-label">Download sign-in list</span>
       </a>
       <!-- repeat .qa-btn … -->
     </div>
   ============================================================================ */
.quick-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 18px 22px;
}

.qa-btn {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px;
  border-radius: var(--radius-md);
  border: 1.5px dashed var(--border-med);
  background: transparent;
  cursor: pointer;
  text-align: left;
  transition: all 0.15s;
  color: var(--ink-mid);
  font-family: var(--font-sans);
  text-decoration: none;
}
.qa-btn:hover {
  border-color: var(--rose);
  background: var(--rose-light);
  color: var(--rose);
}

.qa-icon {
  width: 30px;
  height: 30px;
  border-radius: var(--radius-sm);
  background: var(--paper-mid);
  display: flex;
  align-items: center;
  justify-content: center;
}
.qa-btn:hover .qa-icon { background: rgba(194,70,107,0.15); }
.qa-icon svg { width: 14px; height: 14px; }
.qa-label { font-size: 12px; font-weight: 500; line-height: 1.3; }


/* ============================================================================
   20  BAR CHART
   Server-rendered bars (no JS). Bar height set inline; .active for highlight.
   ----------------------------------------------------------------------------
   MARKUP
     <div class="chart-area">
       <div class="bar-chart">
         <div class="bar-group"><div class="bar" style="height:45px"></div><span class="bar-label">Jan</span></div>
         <div class="bar-group"><div class="bar active" style="height:71px"></div><span class="bar-label">May</span></div>
         <!-- repeat … -->
       </div>
       <div class="chart-legend">
         <div class="legend-item"><span class="legend-dot" style="background:var(--rose)"></span>Attendees per session</div>
       </div>
     </div>
   ============================================================================ */
.chart-area {
  padding: 18px 22px;
}

.bar-chart {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 90px;
}

.bar-group {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.bar {
  width: 100%;
  border-radius: 3px 3px 0 0;
  background: var(--rose-light);
  transition: background 0.2s;
  cursor: pointer;
  min-height: 4px;
}
.bar:hover { background: var(--rose-mid); }
.bar.active { background: var(--rose); }

.bar-label {
  font-size: 10px;
  color: var(--ink-soft);
  text-align: center;
}

.chart-legend {
  display: flex;
  gap: 14px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: var(--ink-soft);
}

.legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}


/* ============================================================================
   21  FORM LAYOUT
   Wrap fields in .form (vertical) or .form-grid (two columns). Every control
   sits in a .field with a label, optional hint, and optional error message.
   ----------------------------------------------------------------------------
   MARKUP
     <form class="form">
       <div class="form-grid">
         <div class="field">
           <label class="field-label" for="first">First name <span class="req">*</span></label>
           <input id="first" class="input" type="text" placeholder="Sarah">
           <p class="field-hint">As it should appear on the sign-in list.</p>
         </div>
         <div class="field has-error">
           <label class="field-label" for="email">Email <span class="req">*</span></label>
           <input id="email" class="input" type="email" value="not-an-email">
           <p class="field-error"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>Enter a valid email address.</p>
         </div>
       </div>
     </form>
   ============================================================================ */
.form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 20px;
}

/* A field that should span both columns of a .form-grid. */
.field--full { grid-column: 1 / -1; }

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.field-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
}
.field-label .req { color: var(--rose); margin-left: 1px; }
.field-label .optional {
  color: var(--ink-soft);
  font-weight: 400;
  font-size: 12px;
  margin-left: 4px;
}

.field-hint {
  font-size: 12px;
  color: var(--ink-soft);
  line-height: 1.45;
}

.field-error {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: var(--rose);
  line-height: 1.4;
}
.field-error svg { width: 13px; height: 13px; flex-shrink: 0; }


/* ============================================================================
   22  TEXT INPUTS
   .input is the base for text / email / password / number / tel / url / date /
   search. Add .input-group for a leading icon. State modifiers go on .field:
   .has-error (rose), .is-valid (sage); native :disabled is handled too.
   ----------------------------------------------------------------------------
   MARKUP
     <input class="input" type="text" placeholder="Understanding HRT…">

     <div class="input-group">
       <svg class="input-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
       <input class="input" type="search" placeholder="Search attendees…">
     </div>
   ============================================================================ */
.input,
.textarea,
.select {
  font-family: var(--font-sans);
  font-size: 13.5px;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--border-med);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  width: 100%;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.input::placeholder,
.textarea::placeholder { color: var(--ink-soft); }

.input:focus,
.textarea:focus,
.select:focus {
  outline: none;
  border-color: var(--rose);
  box-shadow: 0 0 0 3px var(--rose-light);
}

.input:disabled,
.textarea:disabled,
.select:disabled {
  background: var(--paper-mid);
  color: var(--ink-soft);
  cursor: not-allowed;
}

/* Validation states — set on the parent .field */
.field.has-error .input,
.field.has-error .textarea,
.field.has-error .select { border-color: var(--rose); }
.field.has-error .input:focus,
.field.has-error .textarea:focus,
.field.has-error .select:focus { box-shadow: 0 0 0 3px var(--rose-light); }

.field.is-valid .input,
.field.is-valid .textarea,
.field.is-valid .select { border-color: var(--sage); }
.field.is-valid .input:focus { box-shadow: 0 0 0 3px var(--sage-light); }

/* Leading-icon wrapper */
.input-group { position: relative; }
.input-group .input { padding-left: 36px; }
.input-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 15px;
  height: 15px;
  color: var(--ink-soft);
  pointer-events: none;
}


/* ============================================================================
   23  TEXTAREA
   ----------------------------------------------------------------------------
   MARKUP
     <textarea class="textarea" rows="4" placeholder="Describe the session…"></textarea>
   ============================================================================ */
.textarea {
  resize: vertical;
  min-height: 92px;
  line-height: 1.5;
}


/* ============================================================================
   24  SELECT
   Native <select> with the default arrow removed and a brand chevron drawn on
   top. Always wrap in .select-wrap so the chevron positions correctly.
   ----------------------------------------------------------------------------
   MARKUP
     <div class="select-wrap">
       <select class="select">
         <option>In person</option>
         <option>Online</option>
         <option>Hybrid</option>
       </select>
       <svg class="select-chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="6 9 12 15 18 9"/></svg>
     </div>
   ============================================================================ */
.select-wrap { position: relative; }

.select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 36px;
  cursor: pointer;
}

.select-chevron {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  color: var(--ink-soft);
  pointer-events: none;
}


/* ============================================================================
   25  CHECKBOX
   Custom-styled, accessible (the real <input> is visually hidden but focusable).
   ----------------------------------------------------------------------------
   MARKUP
     <label class="check">
       <input type="checkbox" checked>
       <span class="check-box"></span>
       <span class="check-text">Email me a reminder before each session</span>
     </label>
   ============================================================================ */
.check,
.radio {
  display: inline-flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  font-size: 13.5px;
  color: var(--ink);
  line-height: 1.45;
}
.check input,
.radio input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.check-box {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin-top: 1px;
  border: 1.5px solid var(--border-med);
  border-radius: 5px;
  background: var(--white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, border-color 0.15s;
}
.check-box::after {
  content: '';
  width: 5px;
  height: 9px;
  margin-bottom: 2px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) scale(0);
  transition: transform 0.15s;
}
.check input:checked + .check-box {
  background: var(--rose);
  border-color: var(--rose);
}
.check input:checked + .check-box::after { transform: rotate(45deg) scale(1); }
.check input:focus-visible + .check-box { box-shadow: 0 0 0 3px var(--rose-light); }
.check input:disabled + .check-box { background: var(--paper-mid); border-color: var(--border); }


/* ============================================================================
   26  RADIO
   ----------------------------------------------------------------------------
   MARKUP
     <label class="radio">
       <input type="radio" name="mode" checked>
       <span class="radio-dot"></span>
       <span class="radio-text">In person</span>
     </label>
   ============================================================================ */
.radio-dot {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin-top: 1px;
  border: 1.5px solid var(--border-med);
  border-radius: 50%;
  background: var(--white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.15s;
}
.radio-dot::after {
  content: '';
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--rose);
  transform: scale(0);
  transition: transform 0.15s;
}
.radio input:checked + .radio-dot { border-color: var(--rose); }
.radio input:checked + .radio-dot::after { transform: scale(1); }
.radio input:focus-visible + .radio-dot { box-shadow: 0 0 0 3px var(--rose-light); }

/* Stack a set of choices with comfortable spacing. */
.choice-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.choice-group.inline { flex-direction: row; flex-wrap: wrap; gap: 18px; }


/* ============================================================================
   27  SWITCH
   Toggle for on/off settings.
   ----------------------------------------------------------------------------
   MARKUP
     <label class="switch">
       <input type="checkbox" checked>
       <span class="switch-track"><span class="switch-thumb"></span></span>
       <span class="switch-text">Show this hub in public search results</span>
     </label>
   ============================================================================ */
.switch {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  cursor: pointer;
  font-size: 13.5px;
  color: var(--ink);
}
.switch input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.switch-track {
  position: relative;
  width: 40px;
  height: 22px;
  flex-shrink: 0;
  border-radius: 20px;
  background: var(--paper-dark);
  transition: background 0.2s;
}
.switch-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(30,26,29,0.25);
  transition: transform 0.2s;
}
.switch input:checked + .switch-track { background: var(--rose); }
.switch input:checked + .switch-track .switch-thumb { transform: translateX(18px); }
.switch input:focus-visible + .switch-track { box-shadow: 0 0 0 3px var(--rose-light); }
.switch input:disabled + .switch-track { background: var(--border); cursor: not-allowed; }


/* ============================================================================
   28  RANGE SLIDER
   ----------------------------------------------------------------------------
   MARKUP
     <input class="range" type="range" min="0" max="50" value="20">
   ============================================================================ */
.range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  border-radius: 2px;
  background: var(--paper-dark);
  outline: none;
  cursor: pointer;
  accent-color: var(--rose);
}
.range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--rose);
  border: 3px solid #fff;
  box-shadow: 0 1px 3px rgba(30,26,29,0.25);
  cursor: pointer;
}
.range::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--rose);
  border: 3px solid #fff;
  box-shadow: 0 1px 3px rgba(30,26,29,0.25);
  cursor: pointer;
}


/* ============================================================================
   29  FILE UPLOAD
   A dashed drop-zone (label-wrapped so the whole tile is clickable). Matches
   the dashed .qa-btn aesthetic from §19.
   ----------------------------------------------------------------------------
   MARKUP
     <label class="file-drop">
       <input type="file">
       <span class="file-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8"/><polyline points="16 6 12 2 8 6"/><line x1="12" y1="2" x2="12" y2="15"/></svg></span>
       <span class="file-text"><strong>Click to upload</strong> or drag a file here</span>
       <span class="file-hint">PNG, JPG or PDF — up to 10&nbsp;MB</span>
     </label>
   ============================================================================ */
.file-drop {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
  padding: 28px 24px;
  border: 1.5px dashed var(--border-med);
  border-radius: var(--radius-md);
  cursor: pointer;
  color: var(--ink-mid);
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.file-drop:hover { border-color: var(--rose); background: var(--rose-light); }
.file-drop input { display: none; }

.file-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--paper-mid);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, color 0.15s;
}
.file-drop:hover .file-icon { background: rgba(194,70,107,0.15); color: var(--rose); }
.file-icon svg { width: 17px; height: 17px; }

.file-text { font-size: 13px; }
.file-text strong { color: var(--rose); font-weight: 500; }
.file-hint { font-size: 11.5px; color: var(--ink-soft); }


/* ============================================================================
   30  FORM ACTIONS
   The button row at the foot of a form. Reuses §06 buttons.
   ----------------------------------------------------------------------------
   MARKUP
     <div class="form-actions">
       <a href="#" class="btn btn-ghost">Cancel</a>
       <button class="btn btn-primary">Save session</button>
     </div>
   ============================================================================ */
.form-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding-top: 4px;
}
.form-actions .spacer { margin-right: auto; }


/* ============================================================================
   31  MOBILE NAV TOGGLE
   The hamburger button (shown only ≤900px, hidden otherwise) and the dimmed
   backdrop behind the sidebar when it's opened as an off-canvas drawer.
   ----------------------------------------------------------------------------
   MARKUP
     <!-- inside partials/topbar.php, first child of .topbar -->
     <button class="sidebar-toggle" aria-label="Open menu"
             onclick="document.querySelector('.sidebar').classList.toggle('open');
                      document.querySelector('.sidebar-overlay').classList.toggle('visible');">
       <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8">
         <line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="18" x2="21" y2="18"/>
       </svg>
     </button>

     <!-- inside partials/sidebar.php, immediately BEFORE <aside class="sidebar"> -->
     <div class="sidebar-overlay"
          onclick="document.querySelector('.sidebar').classList.remove('open'); this.classList.remove('visible');"></div>

   Both elements are inert / hidden above 900px — see §32.
   ============================================================================ */
.sidebar-toggle {
  display: none;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-med);
  background: transparent;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--ink-mid);
  flex-shrink: 0;
}
.sidebar-toggle svg { width: 18px; height: 18px; }

.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(30,26,29,0.45);
  z-index: 40;
  opacity: 0;
  transition: opacity 0.2s;
}
.sidebar-overlay.visible {
  display: block;
  opacity: 1;
}


/* ============================================================================
   32  RESPONSIVE BREAKPOINTS
   Three tiers, mobile-styles-last so the narrowest query always wins:
     ≤1200px  Icon rail    — sidebar shrinks to icons only, labels hidden
     ≤900px   Off-canvas   — sidebar becomes a slide-in drawer (needs §31 toggle)
     ≤600px   Single column — grids stack, chrome tightens up
   No existing rules above are edited — everything here is an override that
   only applies inside its own media query.
   ============================================================================ */

/* ---- ≤1200px — icon rail ------------------------------------------------ */
@media (max-width: 1200px) {
  .sidebar { width: 76px; }

  .sidebar-brand { padding: 24px 10px 20px; text-align: center; }
  .brand-name,
  .brand-hub,
  .hub-status { display: none; }

  .sidebar-nav { padding: 16px 8px; }
  .nav-section-label { display: none; }

  .nav-item {
    justify-content: center;
    padding: 10px 0;
    font-size: 0;         /* collapses the bare text node after the icon */
    gap: 0;
  }
  .nav-badge { display: none; }

  .runner-card { justify-content: center; padding: 10px 6px; }
  .runner-card > div:last-child { display: none; }

  .two-col { grid-template-columns: 1fr 320px; }
}

/* ---- ≤900px — off-canvas drawer ----------------------------------------- */
@media (max-width: 900px) {
  .sidebar-toggle { display: flex; }

  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: 240px;
    height: 100vh;
    z-index: 50;
    transform: translateX(-100%);
    transition: transform 0.25s ease;
  }
  .sidebar.open { transform: translateX(0); }

  /* Restore full labels inside the flyout — overrides the icon-rail rules above */
  .sidebar-brand { padding: 28px 24px 24px; text-align: left; }
  .brand-name,
  .brand-hub,
  .hub-status { display: block; }
  .hub-status { display: inline-flex; }

  .sidebar-nav { padding: 20px 12px; }
  .nav-section-label { display: block; }

  .nav-item {
    justify-content: flex-start;
    padding: 9px 12px;
    font-size: 13.5px;
    gap: 10px;
  }
  .nav-badge { display: inline-block; }

  .runner-card { justify-content: flex-start; padding: 10px 12px; }
  .runner-card > div:last-child { display: block; }

  .two-col { grid-template-columns: 1fr; }
  .three-col { grid-template-columns: 1fr 1fr; }
}

/* ---- ≤600px — single column ---------------------------------------------- */
@media (max-width: 600px) {
  .content { padding: 18px; }
  .content > * + * { margin-top: 18px; }

  .topbar { padding: 0 16px; height: 56px; gap: 10px; }
  .topbar-title { font-size: 16px; }
  .topbar-actions { gap: 6px; }
  .topbar .btn-ghost { display: none; } /* keep primary action + bell, drop "Share hub page" label */

  .stats-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .two-col,
  .three-col { grid-template-columns: 1fr; }

  .health-banner { flex-direction: column; align-items: flex-start; gap: 16px; padding: 20px; }
  .health-items { margin-left: 0; }

  .session-item { grid-template-columns: 44px 1fr; }
  .session-actions { grid-column: 1 / -1; justify-content: flex-end; margin-top: 8px; }

  .inbox-msg { max-width: 160px; }

  .quick-actions { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
}


/* Page-specific — status banner + map preview box. */
  .notice { padding: 10px 16px; border-radius: var(--radius-md); font-size: 13px; font-weight: 500; margin-bottom: 20px; }
  .notice-success { background: var(--sage-light); color: var(--sage); }
  #meeting-map {
    height: 440px;
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 1px solid var(--border);
    background: var(--paper-mid);
  }
  .danger-zone {
    margin-top: 8px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
  }

  /* Meeting sub-nav — tabs on the left, check-in link on the right. */
  .meeting-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
  }
  .meeting-tabs {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid var(--border);
  }
  .meeting-tab {
    padding: 10px 16px;
    font-size: 13px;
    font-weight: 500;
    color: var(--ink-soft);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color 0.15s, border-color 0.15s;
  }
  .meeting-tab:hover { color: var(--ink); }
  .meeting-tab.active { color: var(--rose); border-bottom-color: var(--rose); }

  /* Rich text editor — mirrors .input styling, adds a toolbar on top. */
  .rte-wrap {
    border: 1px solid var(--border-med);
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--white);
    transition: border-color 0.15s, box-shadow 0.15s;
  }
  .rte-wrap:focus-within { border-color: var(--rose); box-shadow: 0 0 0 3px var(--rose-light); }
  .field.has-error .rte-wrap { border-color: var(--rose); }
  .rte-toolbar {
    display: flex;
    gap: 2px;
    padding: 6px 8px;
    background: var(--paper-mid);
    border-bottom: 1px solid var(--border-med);
  }
  .rte-btn {
    width: 28px;
    height: 28px;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    background: transparent;
    color: var(--ink-mid);
    font-size: 12px;
    font-family: var(--font-sans);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
  }
  .rte-btn:hover { background: var(--white); border-color: var(--border-med); color: var(--ink); }
  .rte-btn svg { width: 14px; height: 14px; }
  .rte-editor {
    min-height: 120px;
    padding: 10px 12px;
    font-family: var(--font-sans);
    font-size: 13.5px;
    color: var(--ink);
    line-height: 1.5;
    outline: none;
  }
  .rte-editor:empty::before { content: attr(data-placeholder); color: var(--ink-soft); }

  .pin-map { height: 880px; border-radius: var(--radius-md); }
  .pin-callout {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: var(--amber-light);
    color: var(--ink-mid);
    border: 1px solid rgba(194,124,46,0.25);
    border-radius: var(--radius-md);
    padding: 12px 14px;
    font-size: 13px;
    line-height: 1.5;
    margin-bottom: 14px;
  }
  .pin-callout svg { width: 17px; height: 17px; flex-shrink: 0; margin-top: 1px; color: var(--amber); }
  .pin-callout strong { color: var(--ink); }


/* ============================================================================
   31  RTE CONTENT TYPOGRAPHY
   Matches how this HTML actually renders on the public site
   (.body-text: 16px / 1.8 line-height) so the editor previews close to the
   live result. Font-family stays var(--font-sans) to stay consistent with
   the rest of the admin UI — only size/spacing/list/link rendering is matched.
   ============================================================================ */
.rte-editor { font-size: 16px; line-height: 1.8; }
.rte-editor p { margin: 0; }
.rte-editor p + p { margin-top: 14px; }
.rte-editor strong, .rte-editor b { font-weight: 700; color: var(--ink); }
.rte-editor em, .rte-editor i { font-style: italic; }
.rte-editor ul, .rte-editor ol { margin: 14px 0; padding-left: 1.4em; }
.rte-editor ul { list-style: disc; }
.rte-editor ol { list-style: decimal; }
.rte-editor li { margin-bottom: 6px; line-height: 1.8; }
.rte-editor li::marker { color: var(--rose); }
.rte-editor a { color: var(--rose); text-decoration: underline; text-underline-offset: 2px; }
.rte-editor a:hover { color: var(--rose-mid); }