@charset "UTF-8";
/**
 * Organizing Lab Resource Hub — Main Stylesheet (SCSS source)
 *
 * Compile with `npm run build` (or `npm run watch` while editing).
 * Output: ../css/style.css
 */
/* ==========================================================================
   Design Tokens — CSS Custom Properties + Role-Based Overrides
   ========================================================================== */
:root {
  /* Palette */
  --color-bg: #C8D4C0;
  --color-sidebar-bg: #2B4028;
  --color-accent: #ebe04d;
  --color-text: #004622;
  --color-text-inverse: #FFFFFF;
  --color-card-bg: #FFFFFF;
  --color-card-border: #E0E0D8;
  --color-tag-bg: #E8EFDF;
  --color-tag-text: #004622;
  --color-btn-primary: #004622;
  --color-btn-hover: #1A2618;
  --color-link: #004622;
  --color-link-hover: #4A6644;
  /* Sidebar */
  --sidebar-width: 20rem;
  /* Shared height: the bordered sidebar nav area and the bordered main
     content area both use this so they're always the same height. */
  --bordered-section-height: 65vh;
  /* Spacing */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  /* Typography */
  --font-display: 'Raleway', 'Helvetica Neue', Arial, sans-serif;
  --font-body: 'Roboto', 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
  --text-xs: 0.6875rem;
  --text-sm: 0.8125rem;
  --text-base: 0.9375rem;
  --text-md: 1.0625rem;
  --text-lg: 1.25rem;
  --text-xl: 1.5rem;
  --text-2xl: 1.875rem;
  /* Border radius */
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 1.25rem;
  --radius-pill: 999px;
  /* Shadows */
  --shadow-card: 0 0 0 rgba(0, 0, 0, 0), 0 0 0 rgba(0, 0, 0, 0);
  --shadow-sidebar: 0 0 0 rgba(0, 0, 0, 0);
  /* Transitions */
  --transition-fast: 120ms ease;
  --transition-base: 200ms ease;
}

/* --- Trainer / Coach / Core Trainer --- */
body.role--trainer {
  --color-bg: #d3dbd5;
  --color-sidebar-bg: #d3dbd5;
  --color-accent: #ebe04d;
  --color-text: #1A2618;
  --color-tag-bg: #d3dbd5;
  --color-tag-text: #2B4028;
  --color-btn-primary: #2B4028;
  --color-btn-hover: #1A2618;
  --color-link: #2B4028;
}

/* --- Participant --- */
body.role--participant {
  --color-bg: #f2d0c5;
  --color-sidebar-bg: #f2d0c5;
  --color-accent: #2B4028;
  --color-text: #3A1A14;
  --color-tag-bg: #f2d0c5;
  --color-tag-text: #7A3830;
  --color-btn-primary: #C07868;
  --color-btn-hover: #A05E52;
  --color-link: #8B4840;
  --color-link-hover: #C07868;
}

/* --- Public / Anonymous --- */
body.role--public {
  --color-bg: #f4f0c0;
  --color-sidebar-bg: #f4f0c0;
  --color-accent: #ebe04d;
  --color-text: #004622;
  --color-tag-bg: #EBE04D;
  --color-tag-text: #004622;
  --color-btn-primary: #004622;
  --color-btn-hover: #1A2618;
  --color-link: #004622;
  --color-link-hover: #4A6644;
}

/* ==========================================================================
   CSS Reset & Base
   ========================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.6;
  min-height: 100vh;
  transition: background-color var(--transition-base);
}
body.role--participant {
  color: #004622;
}

a {
  color: var(--color-link);
  font-weight: 600;
  text-decoration: none;
  transition: color var(--transition-fast);
}
a:hover, a:focus {
  color: var(--color-link-hover);
  text-decoration: underline;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Make sure any embedded media never breaks out of its container. */
iframe,
embed,
object,
video,
svg {
  max-width: 100%;
}

/* Tables that aren't wrapped in an explicit overflow container still get
   a safe upper bound rather than blowing out their parent. */
table {
  max-width: 100%;
}

/* Long URLs, slugs, or shared-link strings should wrap rather than push
   the page out wider than the viewport. */
pre,
code {
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
  white-space: pre-wrap;
}

ul,
ol {
  list-style: none;
}

button,
input,
select,
textarea {
  font-family: inherit;
  font-size: inherit;
}

/* ==========================================================================
   Typography
   ========================================================================== */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--color-text);
}

h1 {
  font-size: var(--text-2xl);
}

h2 {
  font-size: var(--text-xl);
}

h3 {
  font-size: var(--text-lg);
}

h4 {
  font-size: var(--text-md);
}

h5 {
  font-size: var(--text-base);
}

h6 {
  font-size: var(--text-sm);
}

p {
  margin-bottom: var(--space-md);
}
p:last-child {
  margin-bottom: 0;
}

small {
  font-size: var(--text-xs);
}

.label-caps {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ==========================================================================
   Layout — Full Page Shell
   Uses CSS Grid: [ sidebar ] [ main ], main = [ header ] + [ content ]
   ========================================================================== */
.layout-page-wrapper {
  display: grid;
  grid-template-columns: var(--sidebar-width) 1fr;
  /* Lock the wrapper to viewport height so the page itself never scrolls;
     long sidebars and long content scroll INSIDE their bordered cards. */
  height: 100vh;
  overflow: hidden;
}

/* Flex column inside each grid cell. The bordered card (.sidebar /
   #block-organizing-lab-content) gets `flex: 1` further down so it
   fills whatever vertical space is left under its top siblings. */
.layout-sidebar {
  grid-column: 1;
  width: var(--sidebar-width);
  height: 100vh;
  display: flex;
  flex-direction: column;
  padding: var(--space-lg) var(--space-md) 1rem;
  overflow: hidden;
}

.layout-main {
  grid-column: 2;
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.layout-header {
  position: sticky;
  top: 0;
  z-index: 100;
}

.layout-content {
  flex: 1;
  padding: var(--space-xl) var(--space-xl);
}

/* ==========================================================================
   Sidebar
   ========================================================================== */
/* The .sidebar element is now a sibling of .sidebar__branding inside
   .layout-sidebar. It carries the single 2px outline and wraps the
   filter accordions, external links, and footer. Its height matches the
   bordered main content area on the right, and overflows scroll. */
.sidebar {
  position: relative;
  border: 2px solid var(--color-text);
  border-radius: var(--radius-lg);
  padding: var(--space-md);
  margin-bottom: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  /* flex:1 inside .layout-sidebar's flex column so this card fills
     whatever vertical space is left under the branding block. min-height:0
     lets overflow-y: auto actually constrain it. */
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
}
.sidebar__branding {
  padding-top: var(--space-xl);
  padding-bottom: var(--space-xl);
  margin-bottom: var(--space-lg);
  border-bottom: none;
  text-align: center;
  background-color: var(--color-tag-text);
  border-radius: var(--radius-lg);
  min-height: 11.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.sidebar__logo-link {
  display: block;
  margin-bottom: var(--space-xs);
  transition: opacity var(--transition-fast);
}
.sidebar__logo-link:hover {
  opacity: 0.8;
}
.sidebar__logo {
  display: block;
  max-width: 12.5rem;
  width: 100%;
  height: auto;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}
.sidebar {
  /* Fallback text mark if logo image is unavailable */
}
.sidebar__logo-mark {
  display: inline-block;
  font-size: var(--text-xl);
  font-weight: 900;
  color: var(--color-text-inverse);
  letter-spacing: -0.02em;
  line-height: 1;
  margin-bottom: var(--space-xs);
  font-family: var(--font-mono);
}
.sidebar__tagline {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: white;
  line-height: 1.4;
  margin-top: var(--space-md);
  padding-inline: var(--space-lg);
}
.sidebar__section {
  /* Sits at the bottom of the .sidebar flex column thanks to
     margin-top: auto on .sidebar__footer below. Natural flow keeps
     the bordered card from collapsing around an out-of-flow absolute
     child, which was creating layout glitches in Firefox. */
  margin-top: auto;
  width: 100%;
  /* All section nav anchors are blue pills, centered by default */
}
.sidebar__section a {
  background-color: #5278b8;
  text-align: center;
}
.sidebar__section {
  /* External Links section overrides → dark green with letter-spacing */
}
.sidebar__section[aria-label="External links"] .sidebar__nav-link {
  background-color: #004622;
  letter-spacing: 0.5px;
}
.sidebar__section[aria-label="External links"] .sidebar__nav-link:hover, .sidebar__section[aria-label="External links"] .sidebar__nav-link:focus {
  background-color: #ebe04d;
  color: #004622;
}
.sidebar__section-label {
  display: none;
}
.sidebar__nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
.sidebar__nav-link {
  display: block;
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: 600;
  color: rgb(235, 224, 77);
  background-color: rgb(0, 70, 34);
  text-decoration: none;
  transition: background-color var(--transition-fast), color var(--transition-fast);
  white-space: normal;
  word-break: break-word;
  text-transform: uppercase;
}
.sidebar__nav-link:hover, .sidebar__nav-link:focus {
  background-color: var(--color-btn-hover);
  color: var(--color-accent);
  text-decoration: none;
}
.sidebar__nav-link.is-active {
  background-color: #e16d46;
  color: white;
  font-weight: 700;
}
.sidebar__nav-link {
  /* Training group pills */
}
.sidebar__nav-link--group {
  font-size: var(--text-xs);
  font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #f8faf9;
  background-color: #004622;
  border: none;
  border-radius: var(--radius-pill);
}
.sidebar__nav-link--group:hover, .sidebar__nav-link--group:focus {
  background-color: #ebe04d;
  color: #004622;
  text-decoration: none;
}
.sidebar__nav-link {
  /* Filter shortcut links — full-width dark-green pills with icon.
     Hover state is unified across all roles: bright yellow background
     with dark-green text + icon. Role-specific overrides further down
     in this file must not contradict this. */
}
.sidebar__nav-link--filter {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  font-size: var(--text-xs);
  background-color: #004622;
  color: #fff;
  border: none;
  text-align: left;
  letter-spacing: 0.5px;
  border-radius: var(--radius-pill);
  font-weight: bold;
  text-transform: uppercase;
}
.sidebar__nav-link--filter:hover, .sidebar__nav-link--filter:focus {
  background-color: #ebe04d;
  color: #004622;
}
.sidebar__nav-link--filter:hover .sidebar__filter-icon,
.sidebar__nav-link--filter:hover .sidebar__filter-icon svg, .sidebar__nav-link--filter:focus .sidebar__filter-icon,
.sidebar__nav-link--filter:focus .sidebar__filter-icon svg {
  color: #004622;
}
.sidebar {
  /* Icon prepended to file-type filter links (e.g. doc/slides/sheet/pdf
     glyph next to "Google Doc", "PDF", etc.) */
}
.sidebar__filter-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 1.1rem;
  height: 1.1rem;
  color: inherit;
  line-height: 0;
}
.sidebar__filter-icon svg {
  display: block;
  width: 100%;
  height: 100%;
}
.sidebar__footer {
  /* margin-top removed — the auto margin on .sidebar__section above
     already absorbs the free space and pushes both blocks to the
     bottom of the bordered .sidebar as a single group. */
  margin-top: 0;
  padding-top: var(--space-md);
  border-top: none;
  text-align: center;
}
.sidebar__footer p {
  text-transform: uppercase;
  font-size: 0.6rem;
  margin-bottom: 0 !important;
}
.sidebar__footer-powered {
  color: #004622;
  font-weight: 600;
}
.sidebar__footer-copyright {
  color: #004622;
}

/* ==========================================================================
   Participant role overrides (sidebar only — header overrides live in _header.scss)
   ========================================================================== */
body.role--participant .sidebar__branding {
  background-color: #004622;
}
body.role--participant .sidebar__filter-toggle {
  background-color: #e16d46;
  color: white;
}
body.role--participant .sidebar__filter-toggle:hover, body.role--participant .sidebar__filter-toggle:focus {
  background-color: #e16d46;
  color: #ebe04d !important;
}
body.role--participant .sidebar__nav-link--group {
  color: #FFFFFF;
}
body.role--participant .sidebar__nav-link--group:hover, body.role--participant .sidebar__nav-link--group:focus {
  background-color: #ebe04d;
  color: #004622 !important;
  text-decoration: none;
}
body.role--participant .sidebar__nav-link--locked {
  opacity: 0.2;
  cursor: not-allowed;
}
body.role--participant .sidebar__nav-link--filter {
  background-color: #004622;
  color: #fff;
}
body.role--participant .sidebar__nav-link--filter:hover, body.role--participant .sidebar__nav-link--filter:focus {
  background-color: #ebe04d;
  color: #004622;
}
body.role--participant .sidebar__nav-link--filter:hover .sidebar__filter-icon,
body.role--participant .sidebar__nav-link--filter:hover .sidebar__filter-icon svg, body.role--participant .sidebar__nav-link--filter:focus .sidebar__filter-icon,
body.role--participant .sidebar__nav-link--filter:focus .sidebar__filter-icon svg {
  color: #004622;
}
body.role--participant .sidebar__section[aria-label="External links"] .sidebar__nav-link:hover, body.role--participant .sidebar__section[aria-label="External links"] .sidebar__nav-link:focus {
  background-color: #e16d46;
  color: #ebe04d;
}

/* ==========================================================================
   Trainer role overrides
   ========================================================================== */
body.role--trainer .sidebar__branding {
  background-color: #004622;
}
body.role--trainer .sidebar__filter-toggle:hover, body.role--trainer .sidebar__filter-toggle:focus {
  background-color: #ebe04d;
  color: #004622 !important;
}
body.role--trainer .sidebar__nav-link--filter {
  background-color: #004622;
}
body.role--trainer .sidebar__nav-link--filter:hover, body.role--trainer .sidebar__nav-link--filter:focus {
  background-color: #ebe04d !important;
  color: #004622;
}
body.role--trainer .sidebar__nav-link--filter:hover .sidebar__filter-icon,
body.role--trainer .sidebar__nav-link--filter:hover .sidebar__filter-icon svg, body.role--trainer .sidebar__nav-link--filter:focus .sidebar__filter-icon,
body.role--trainer .sidebar__nav-link--filter:focus .sidebar__filter-icon svg {
  color: #004622;
}

/* --- File-type filter accordion ---
   <details>/<summary> gives us native open/close with no JS. The summary is
   styled as a pill button to match the rest of the sidebar nav. */
.sidebar__filter {
  /* Border now lives on the .sidebar wrapper, not each individual accordion. */
  margin: 0;
  margin-bottom: -0.5rem;
  /* Hide the default marker triangle on all browsers */
}
.sidebar__filter > summary {
  list-style: none;
}
.sidebar__filter > summary::-webkit-details-marker {
  display: none;
}
.sidebar__filter > summary::marker {
  content: "";
}

/* When a filter accordion is OPEN, let the <details> element grow inside
   .sidebar to absorb the remaining vertical space — the inner list then
   scrolls if there are more items than fit. CSS Grid (auto / 1fr) is
   more reliable than flex on a <details> element: with flex some
   browsers let the inner <ul> escape its parent's height because of
   the special slotted-content handling of <details>. Grid forces the
   row to be exactly the available height and the list's overflow-y
   takes over inside it. */
.sidebar__filter[open] {
  display: grid;
  grid-template-rows: auto 1fr;
  flex: 1 1 0;
  min-height: 0;
}

.sidebar__filter-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-pill);
  background-color: #004622;
  color: #ebe04d;
  font-size: var(--text-xs);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  user-select: none;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}
.sidebar__filter-toggle:hover, .sidebar__filter-toggle:focus {
  background-color: #ebe04d;
  color: #ebe04d !important;
}

.sidebar__filter-label {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

.sidebar__filter-chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  transition: transform 200ms ease;
}

.sidebar__filter[open] .sidebar__filter-chevron {
  transform: rotate(180deg);
}

.sidebar__filter-list {
  margin-top: var(--space-sm);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  /* Inside the open <details> flex column the list grows to fill the
     remaining space under the summary toggle, then scrolls internally
     if there are more items than fit. */
  flex: 1 1 0;
  min-height: 0;
  height: auto;
  overflow-y: auto;
}

/* Anonymous/public users see blue filter toggles to match the public palette */
body.role--public .sidebar__filter-toggle {
  background-color: #5278b8;
  color: white;
}

/* Access indicator dot inside Filter Resources items.
   --access: filled yellow circle  → user has access
   --locked: outlined yellow circle → user is not a member */
.sidebar__access-dot {
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  margin-right: 0.4rem;
  vertical-align: middle;
  flex-shrink: 0;
}
.sidebar__access-dot--access {
  background-color: white;
  box-shadow: none;
}
.sidebar__access-dot--locked {
  background-color: transparent;
  border: 1px solid #ebe04d;
  opacity: 0.55;
}

/* Locked training pills look slightly dimmed — they're still clickable
   (lands on the group page where the request-access prompt renders) */
.sidebar__nav-link--locked {
  opacity: 0.7;
}

/* ==========================================================================
   Header / Top Bar
   ========================================================================== */
.user--anonymous .site-header {
  background-color: #f4f0c0;
}

.site-header {
  background-color: transparent;
  backdrop-filter: unset;
  -webkit-backdrop-filter: unset;
  border-bottom: none;
  padding: var(--space-lg) var(--space-xl);
  padding-bottom: var(--space-xs);
  display: flex;
  align-items: center;
  gap: var(--space-md);
  min-height: 3.75rem;
}

.header__search {
  flex: 1;
  max-width: 31.25rem;
  margin: 0 auto;
  margin-left: -0.75rem;
  position: relative;
}
.header__search-input {
  width: 100%;
  padding: var(--space-sm) var(--space-md) var(--space-sm) 2.75rem;
  border: 2px solid #004622;
  border-radius: var(--radius-pill);
  background-color: #ffffff;
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #004622;
  outline: none;
  transition: box-shadow var(--transition-fast);
  text-transform: uppercase;
  /* Placeholder is a single space (just to keep :placeholder-shown valid
     for the animated overlay below). Hide it visually. */
}
.header__search-input::placeholder {
  color: transparent;
}
.header__search-input:focus {
  border-color: #004622;
  box-shadow: 0 0 0 3px rgba(0, 70, 34, 0.15);
}
.header {
  /* Autocomplete dropdown below the header search input */
}
.header__search-dropdown {
  position: absolute;
  top: calc(100% + 0.4rem);
  left: 0;
  right: 0;
  background: #fff;
  border: 2px solid #004622;
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 24px rgba(0, 70, 34, 0.18);
  z-index: 150;
  max-height: 26rem;
  overflow-y: auto;
  padding: 0.4rem;
}
.header__search-dropdown[hidden] {
  display: none;
}
.header__search-result {
  display: block;
  padding: 0.65rem 0.9rem;
  border-radius: var(--radius-md);
  color: #004622;
  text-decoration: none;
  border-left: 4px solid var(--card-accent, #004622);
  border-top: 1px solid #c3c8c1;
  border-right: 1px solid #c3c8c1;
  border-bottom: 1px solid #c3c8c1;
  margin-bottom: 0.33rem;
  transition: background var(--transition-fast);
}
.header__search-result:hover, .header__search-result.is-active {
  background: rgba(235, 224, 77, 0.35);
  text-decoration: none;
}
.header__search-result mark {
  background: #ebe04d;
  color: #004622;
  font-weight: 700;
  padding: 0 0.1rem;
  border-radius: 2px;
}
.header__search-result {
  /* Accent color per result */
}
.header__search-result--green {
  --card-accent: #004622;
}
.header__search-result--blue {
  --card-accent: #3B6EA5;
}
.header__search-result--yellow {
  --card-accent: #C8A800;
}
.header__search-result--coral {
  --card-accent: #C07868;
}
.header__search-result--teal {
  --card-accent: #2B6B5A;
}
.header__search-result--purple {
  --card-accent: #6B4FBB;
}
.header__search-result__title {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: 0.04em;
  font-size: var(--text-sm);
  color: #004622;
  line-height: 1.3;
}
.header__search-result__snippet {
  display: block;
  margin-top: 0.2rem;
  font-size: var(--text-xs);
  color: rgba(0, 70, 34, 0.7);
  line-height: 1.45;
}
.header__search-empty {
  padding: 1rem;
  text-align: center;
  color: rgba(0, 70, 34, 0.55);
  font-size: var(--text-sm);
  font-style: italic;
}
.header__search-icon {
  position: absolute;
  left: 0.95rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1.1rem;
  height: 1.1rem;
  color: #004622;
  opacity: 1;
  pointer-events: none;
}
.header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-left: auto;
}
.header {
  /* Round dark-green icon buttons (messages, alerts, calendar) */
}
.header__icon-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border: none;
  border-radius: 50%;
  background-color: #004622;
  color: #ebe04d;
  cursor: pointer;
  text-decoration: none;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}
.header__icon-btn:hover, .header__icon-btn:focus {
  background-color: #EBE04D;
  color: #004622;
  text-decoration: none;
}
.header__icon-btn svg {
  width: 1.125rem;
  height: 1.125rem;
}
.header__icon-btn {
  /* Red notification dot (top-right) — added when icon has alerts pending */
}
.header__icon-btn--has-dot::after {
  content: "";
  position: absolute;
  top: 0.1875rem;
  right: 0.1875rem;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background-color: #E04A2F;
  border: 2px solid #004622;
}
.header {
  /* "PUBLIC FACING →" pill — green pill with yellow arrow circle on the right */
}
.header__public-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 0.3125rem 0.3125rem 0.3125rem var(--space-md);
  background-color: #004622;
  color: #ebe04d;
  border: none;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 800;
  letter-spacing: 0.1em;
  text-decoration: none;
  transition: background-color var(--transition-fast);
  white-space: nowrap;
}
.header__public-btn:hover, .header__public-btn:focus {
  background-color: #1A2618;
  color: #ebe04d;
  text-decoration: none;
}
.header__public-btn__label {
  line-height: 1;
}
.header__public-btn__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #ebe04d;
  line-height: 0;
}
.header__public-btn__arrow svg {
  display: block;
  width: 1.375rem;
  height: 1.375rem;
}
.header {
  /* Spacer for organizer header (pushes login pills to the right) */
}
.header__anon-spacer {
  flex: 1;
}
.header {
  /* Compound login pill: [lock icon] PARTICIPANTS/TRAINERS [LOGIN sub-pill] */
}
.header__login-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 0.25rem 0.25rem 0.25rem var(--space-sm);
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  transition: opacity var(--transition-fast);
  white-space: nowrap;
}
.header__login-pill:hover, .header__login-pill:focus {
  opacity: 1;
  background-color: #ebe04d;
  color: #004622 !important;
  text-decoration: none;
}
.header__login-pill__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.625rem;
  height: 1.625rem;
  border-radius: 50%;
  background-color: #ebe04d;
  color: #004622;
  position: relative;
  left: -0.1rem;
}
.header__login-pill__icon svg {
  width: 0.875rem;
  height: 0.875rem;
}
.header__login-pill__label {
  line-height: 1;
  padding-right: var(--space-xs);
}
.header__login-pill__action {
  display: inline-flex;
  align-items: center;
  padding: 0.375rem var(--space-md);
  border-radius: var(--radius-pill);
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1;
  position: relative;
  right: 0.1rem;
}
.header__login-pill {
  /* Participants: dark green bg with yellow text */
}
.header__login-pill--participant {
  background-color: #004622;
  color: #ebe04d !important;
}
.header__login-pill--participant .header__login-pill__action {
  background-color: #e16d46;
  color: #FFFFFF;
}
.header__login-pill {
  /* Trainers: dark green bg, yellow text, green LOGIN pill */
}
.header__login-pill--trainer {
  background-color: #004622;
  color: #ebe04d;
}
.header__login-pill--trainer .header__login-pill__action {
  background-color: #2B6B2C;
  color: #ebe04d;
}

/* Hide trainer-only elements for non-trainers */
body:not(.role--trainer) .trainer-only {
  display: none !important;
}

/* Header focus state (global) + participant role hover overrides */
.header__icon-btn:focus,
body.role--participant .header__icon-btn:hover {
  background-color: #E16D46;
  color: #ebe04d;
}

body.role--participant .header__public-btn:hover, body.role--participant .header__public-btn:focus {
  background-color: #E16D46;
  color: #ebe04d;
}

body.role--trainer .header__public-btn:hover, body.role--trainer .header__public-btn:focus {
  background-color: #004622;
  color: white;
}

/* Hide primary local tasks (admin tabs) */
#block-organizing-lab-primary-local-tasks {
  display: none;
}

/* ==========================================================================
   Main Content Area
   ========================================================================== */
.content-area {
  padding: 2rem 2.5rem 1rem;
  /* Flex column inside .layout-main so the content block (last child)
     can `flex: 1` to fill remaining height. */
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Drupal's block-region rendering can wrap #block-organizing-lab-content
   in an unnamed <div>. Make any non-greeting direct child of .content-area
   flex-grow into a column container so the bordered card inside still
   gets a definite height. */
.content-area > div:not(.content-greeting):not(.request-access-prompt) {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.content-greeting {
  margin-bottom: var(--space-xl);
}
.content-greeting__hello {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 800;
  color: var(--color-text);
  margin-bottom: var(--space-md);
}
.content-greeting__hello .greeting-name {
  color: var(--color-tag-text);
}
.content-greeting__hello {
  /* Participant greeting forces dark green for both the leading text
     and the role-name highlight, overriding the role palette defaults. */
}
body.role--participant .content-greeting__hello {
  color: #004622;
}
body.role--participant .content-greeting__hello .greeting-name {
  color: #004622;
}
.content-greeting__subtitle {
  font-family: var(--font-display);
  font-size: var(--text-md);
  color: #004622;
  font-weight: 500;
  max-width: 30rem;
  /* Reserve space on desktop so the greeting block height stays
     stable across routes whose subtitle text wraps differently. */
}
@media (min-width: 1001px) {
  .content-greeting__subtitle {
    min-height: 3.25rem;
  }
}
.content-greeting__subtitle {
  /* Hide the user-name variant of the subtitle */
}
.content-greeting__subtitle.content-greeting__name {
  display: none;
}
.content-greeting__name {
  font-size: var(--text-base);
  margin-bottom: var(--space-xs);
}

/* Drupal system messages */
.messages-list {
  margin-bottom: var(--space-lg);
}

/* Floating site-wide message toast (Drupal's default status/error stack) */
div[data-drupal-messages] {
  position: fixed;
  top: 1.5rem;
  right: 0;
  margin-right: 0.75rem;
  z-index: 2;
  max-width: 26rem;
  padding: 1rem;
  background-color: #ebe04d;
  border-radius: var(--radius-lg);
  box-shadow: 0 5px 18px rgba(0, 0, 0, 0.2);
  font-size: 0.8rem;
}

/* Main content block — flex-grows to fill remaining vertical space
   inside .content-area, so its bottom edge meets the sidebar card
   1rem above the viewport. */
#block-organizing-lab-content {
  border: 2px solid var(--color-text);
  padding: var(--space-lg);
  border-radius: var(--radius-lg);
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
}

/* Title row at the top of #block-organizing-lab-content describing
   the current view (training name, filter name, etc.). */
.content-block__title-wrap {
  margin-bottom: var(--space-lg);
  padding-bottom: var(--space-md);
  border-bottom: 2px solid #004622;
}

.content-block__title-eyebrow {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #004622;
  opacity: 0.65;
  margin: 0 0 0.25rem;
}

.content-block__title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 800;
  line-height: 1.15;
  color: #004622;
  margin: 0;
}

/* Admin tabs */
.tabs {
  display: flex;
  gap: 0.25rem;
  padding: 0.5rem 1.5rem;
  background: rgba(0, 0, 0, 0.08);
  flex-wrap: wrap;
}
.tabs a {
  display: inline-block;
  padding: 0.35rem 0.85rem;
  border-radius: 4px;
  font-size: 0.8rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--color-text);
  background: rgba(255, 255, 255, 0.4);
  transition: background 0.15s;
}
.tabs a:hover, .tabs a.is-active {
  background: rgba(255, 255, 255, 0.75);
}

/* ==========================================================================
   Resource Card Grid
   ========================================================================== */
.resource-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-lg);
  /* Mobile-first: 2 cols → 3 → 4 as the viewport gets wider. */
}
@media (min-width: 86.25rem) {
  .resource-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (min-width: 105.625rem) {
  .resource-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}
.resource-grid__title {
  grid-column: 1/-1;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 700;
  margin-bottom: var(--space-md);
  color: var(--color-text);
}
.resource-grid__empty {
  grid-column: 1/-1;
  color: rgba(26, 38, 24, 0.6);
  font-size: var(--text-base);
  padding: var(--space-xl) 0;
}

/* Filter heading shown on /resources/tag/* pages */
.resource-filter-heading {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
  padding: var(--space-sm) var(--space-md);
  background-color: #004622;
  border-radius: var(--radius-pill);
  font-size: var(--text-sm);
  flex-wrap: wrap;
}
.resource-filter-heading__label {
  font-weight: 500;
  color: #fff;
}
.resource-filter-heading__term {
  font-weight: 800;
  letter-spacing: 0.06em;
  color: #fff;
}
.resource-filter-heading__clear {
  font-size: var(--text-xs);
  font-weight: 600;
  color: rgb(235, 224, 77);
  text-decoration: none;
  margin-left: auto;
  padding: 0.125rem var(--space-sm);
  border: 0 solid rgba(26, 38, 24, 0.2);
  border-radius: var(--radius-pill);
  transition: background-color var(--transition-fast), color var(--transition-fast);
}
.resource-filter-heading__clear:hover {
  background-color: rgba(26, 38, 24, 0.08);
  color: white !important;
  text-decoration: none;
}

/* ==========================================================================
   Module Detail Page (single module node view)
   The .module--<color> class sets --card-accent variables for the whole
   page, so child .resource-card paragraphs and their internals all use
   the same accent.
   ========================================================================== */
.module {
  --card-accent: #004622;
  --card-accent-hover: #1A2618;
  --card-accent-text: #ebe04d;
}
.module--green {
  --card-accent: #004622;
  --card-accent-hover: #1A2618;
  --card-accent-text: #ebe04d;
}
.module--blue {
  --card-accent: #3B6EA5;
  --card-accent-hover: #2A578A;
  --card-accent-text: #FFFFFF;
}
.module--yellow {
  --card-accent: #C8A800;
  --card-accent-hover: #9A8200;
  --card-accent-text: #FFFFFF;
}
.module--coral {
  --card-accent: #C07868;
  --card-accent-hover: #A05E52;
  --card-accent-text: #FFFFFF;
}
.module--teal {
  --card-accent: #2B6B5A;
  --card-accent-hover: #1F4F44;
  --card-accent-text: #FFFFFF;
}
.module--purple {
  --card-accent: #6B4FBB;
  --card-accent-hover: #523C92;
  --card-accent-text: #FFFFFF;
}

/* Module page resource grid */
.module-title {
  font-size: 2rem;
  font-weight: 800;
  margin-bottom: 0.5rem;
  color: var(--color-text);
  /* Participant role forces the dark-green branding color */
}
body.role--participant .module-title {
  color: #004622;
}

.module-description {
  font-size: 1rem;
  color: var(--color-text);
  opacity: 0.8;
  margin-bottom: 2rem;
  max-width: 43.75rem;
}

.module-resources {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.25rem;
  margin-top: 1rem;
}
.module-resources > div > div:first-of-type {
  font-weight: bold;
  text-transform: uppercase;
  margin-bottom: 1rem;
}

/* Paragraph resource cards on the module detail page need a bit more breathing room. */
.node--type-module .resource-card {
  min-width: 30rem;
}

/* ==========================================================================
   Section divider between participant-facing and trainer-only resources
   on the module detail page. Only renders when the current viewer can see
   both groups (i.e. a trainer/coach/admin viewing a mixed module).
   ========================================================================== */
.module-resources__divider {
  grid-column: 1/-1;
  display: flex;
  align-items: center;
  gap: 0.875rem;
  margin: 0.5rem 0 0.25rem;
}
.module-resources__divider::before, .module-resources__divider::after {
  content: "";
  flex: 1;
  height: 2px;
  background: rgba(0, 70, 34, 0.18);
}
.module-resources__divider-label {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(0, 70, 34, 0.6);
  white-space: nowrap;
}

/* ==========================================================================
   Trainer-materials-only notice
   Shown on module pages whose only paragraphs are trainer_notes / coach_notes
   and the current viewer (Participant or anonymous) can't see any of them.
   Keeps the page from looking empty and tells them what's actually going on.
   ========================================================================== */
.module-restricted-notice {
  grid-column: 1/-1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
  max-width: 34rem;
  margin: var(--space-xl) auto;
  padding: var(--space-xl) var(--space-lg);
  text-align: center;
  background: #fff;
  border: 2px dashed #004622;
  border-radius: var(--radius-lg);
  color: #004622;
}
.module-restricted-notice__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: #ebe04d;
  color: #004622;
}
.module-restricted-notice__icon svg {
  width: 1.5rem;
  height: 1.5rem;
}
.module-restricted-notice__title {
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #004622;
  margin: 0;
}
.module-restricted-notice__body {
  font-size: var(--text-sm);
  color: #004622;
  line-height: 1.55;
  margin: 0;
  max-width: 28rem;
}

/* ==========================================================================
   Resource Card Component (both the grid card and the module-page paragraph)
   ========================================================================== */
.resource-card {
  /* Accent color resolves in this priority order:
       1. .resource-card--<color> modifier on this element (grid cards)
       2. Inherited from .module--<color> parent (paragraph cards on detail page)
       3. Fallback green for safety.
     We never set --card-accent on .resource-card itself, otherwise it would
     reset the inherited value from a parent .module--<color>. */
  position: relative;
  min-width: 18rem;
  background-color: var(--color-card-bg);
  border: 2px solid var(--card-accent, #004622);
  border-top: 7px solid var(--card-accent, #004622);
  border-bottom-left-radius: var(--radius-lg);
  border-bottom-right-radius: var(--radius-lg);
  padding: 1.25rem 1.5rem 5rem;
  margin-bottom: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  box-shadow: none;
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.resource-card:hover {
  transform: none;
  box-shadow: none;
}
.resource-card {
  /* Color variants — set the accent token on the card itself.
     The same tokens are also defined on .module--<color> below so that
     the accent cascades down to paragraph .resource-card children on
     the module detail page. */
}
.resource-card--green {
  --card-accent: #004622;
  --card-accent-hover: #1A2618;
  --card-accent-text: #ebe04d;
}
.resource-card--blue {
  --card-accent: #3B6EA5;
  --card-accent-hover: #2A578A;
  --card-accent-text: #FFFFFF;
}
.resource-card--yellow {
  --card-accent: #C8A800;
  --card-accent-hover: #9A8200;
  --card-accent-text: #FFFFFF;
}
.resource-card--coral {
  --card-accent: #C07868;
  --card-accent-hover: #A05E52;
  --card-accent-text: #FFFFFF;
}
.resource-card--teal {
  --card-accent: #2B6B5A;
  --card-accent-hover: #1F4F44;
  --card-accent-text: #FFFFFF;
}
.resource-card--purple {
  --card-accent: #6B4FBB;
  --card-accent-hover: #523C92;
  --card-accent-text: #FFFFFF;
}
.resource-card__divider {
  border: none;
  border-top: 1px solid var(--color-card-border);
  margin: var(--space-xs) 0;
}
.resource-card__date {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: rgba(26, 38, 24, 0.5);
  text-transform: uppercase;
}
.resource-card__title {
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.3;
  margin: 0;
}
.resource-card__title a {
  color: #004622;
  text-decoration: none;
}
.resource-card__title a:hover {
  color: var(--color-link-hover);
  text-decoration: underline;
}
.resource-card {
  /* Header row: audience label on the left, file-type chip on the right. */
}
.resource-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  border-bottom: 2px solid #004622;
  padding-bottom: 0.5rem;
  margin-bottom: 0.25rem;
}
.resource-card {
  /* Resource-section label (e.g. TRAINER NOTES) on the module detail page.
     Hardcoded to dark green for legibility on all accent backgrounds. */
}
.resource-card__label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #004622;
  /* Border now lives on the parent .resource-card__header */
  border-bottom: 0 !important;
  padding-bottom: 0;
  margin-bottom: 0;
}
.resource-card {
  /* File-type chip — small inline pill with an icon and text label
     ("Google Doc", "PDF", "Video", etc.) so users can see what kind of
     file the link points to without opening it. */
}
.resource-card__file-type {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.2rem 0.55rem;
  border-radius: var(--radius-pill);
  background: rgba(0, 70, 34, 0.08);
  color: #004622;
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
}
.resource-card__file-type svg {
  display: block;
  width: 0.85rem;
  height: 0.85rem;
}
.resource-card__file-type-icon {
  display: inline-flex;
  align-items: center;
  line-height: 0;
}
.resource-card {
  /* Row of file-type chips on module grid cards — surfaces which kinds
     of files live inside the module (deduped) so users can scan a
     filter-results page without opening every card. */
}
.resource-card__file-types {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.4rem;
}
.resource-card__content {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  font-size: 0.9rem;
  color: #444;
}
.resource-card__content a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--card-accent);
  color: var(--card-accent-text);
  padding: 0.5rem 1rem;
  border-radius: 6rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  text-decoration: none;
  margin-top: 0.25rem;
  transition: background 0.15s, color 0.15s;
}
.resource-card__content a:hover {
  background: #EBE04D;
  color: #004622;
}
.resource-card__content > div > div:first-of-type {
  display: none;
}
.resource-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-top: var(--space-xs);
}
.resource-card__tag {
  display: inline-block;
  padding: 0.125rem var(--space-sm);
  background-color: var(--color-tag-bg);
  color: var(--color-tag-text);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.resource-card {
  /* Dot-separated uppercase label row (card grid style) */
}
.resource-card__tag-row {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: rgba(26, 38, 24, 0.55);
  line-height: 1.4;
  margin-top: var(--space-xs);
}
.resource-card__tag-link {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(26, 38, 24, 0.55);
  text-decoration: none;
  transition: color var(--transition-fast);
}
.resource-card__tag-link:hover, .resource-card__tag-link:focus {
  color: #004622;
  text-decoration: underline;
}
.resource-card__tag-dot {
  color: rgba(26, 38, 24, 0.35);
  font-weight: 500;
}
.resource-card {
  /* Audience counts ("Participants 4" / "Trainers 2") shown just under
     the tag row on module cards inside a training-group page. Helps
     participants see at a glance how much of each module is open to them. */
}
.resource-card__counts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.4rem;
}
.resource-card__count {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.2rem 0.6rem;
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1;
}
.resource-card__count strong {
  font-weight: 800;
  font-size: 0.7rem;
}
.resource-card__count {
  /* Participant count badge — pink/coral fill to read at a glance */
}
.resource-card__count--participant {
  background: #f2d0c5;
  color: #004622;
}
.resource-card__count {
  /* Trainer count badge — green fill with white text */
}
.resource-card__count--trainer {
  background: #004622;
  color: white;
}
.resource-card__description {
  font-size: var(--text-sm);
  color: rgba(26, 38, 24, 0.72);
  line-height: 1.55;
  flex: 1;
  margin-bottom: 0;
  /* Clamp to ~4 lines */
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.resource-card {
  /* "View Resource →" button — uses the per-card accent token.
     Absolutely positioned at the bottom of the card so CTAs line up across
     a grid row regardless of varying excerpt height. */
}
.resource-card__cta {
  position: absolute;
  bottom: 1rem;
  left: 50%;
  width: calc(100% - 2rem);
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xs);
  padding: var(--space-sm) var(--space-md);
  background-color: var(--card-accent);
  color: white;
  border: none;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}
.resource-card__cta:hover, .resource-card__cta:focus {
  background-color: #EBE04D;
  color: #004622;
  text-decoration: none;
}
.resource-card__cta:hover .resource-card__cta-arrow circle {
  fill: #fff !important;
}
.resource-card__cta:hover .resource-card__cta-arrow svg {
  color: #004622 !important;
}
.resource-card__cta-arrow {
  display: inline-flex;
  align-items: center;
  line-height: 0;
}
.resource-card__cta-arrow svg {
  display: block;
  color: var(--card-accent);
}

/* ==========================================================================
   Login Page
   ========================================================================== */
/*
 * Login pages have no sidebar. The body gets role--trainer, role--participant,
 * or role--public which drives the background color via :root overrides.
 * The path--user--login body class is added automatically by Drupal.
 */
body.path--user--login--trainers {
  --color-bg: #d3ebd5;
  --color-sidebar-bg: #2B4028;
  --color-btn-primary: #2B4028;
  --color-btn-hover: #1A2618;
  --color-link: #2B4028;
}

body.path--user--login--participants {
  --color-bg: #E0C4BC;
  --color-sidebar-bg: #C07868;
  --color-btn-primary: #C07868;
  --color-btn-hover: #A05E52;
  --color-link: #8B4840;
}

body.path--user--login,
body.path--user--login--trainers,
body.path--user--login--participants,
body.path--user--register,
body.path--user--password {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: var(--space-xl);
}

.login-page {
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: var(--color-bg);
  padding: var(--space-xl);
}
.login-page #block-organizing-lab-content {
  border: none;
  height: unset;
}

.login-card {
  background-color: var(--color-card-bg);
  border: 2px solid #004622;
  border-radius: var(--radius-lg);
  box-shadow: none;
  width: 100%;
  max-width: 25rem;
  padding: 1rem;
  text-align: center;
}
.login-card__logo {
  display: inline-block;
  font-size: var(--text-xl);
  font-weight: 900;
  color: var(--color-sidebar-bg);
  font-family: var(--font-mono);
  letter-spacing: -0.02em;
  margin-bottom: var(--space-md);
}
.login-card__role-title {
  font-size: var(--text-xs);
  font-weight: 800;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(26, 38, 24, 0.45);
  margin-bottom: var(--space-xl);
}
.login-card .user-login-form,
.login-card form {
  text-align: left;
}
.login-card .form-item {
  margin-bottom: var(--space-md);
}
.login-card {
  /* Drupal applies title_display=invisible → renders label.visually-hidden.
     Hide the label off-screen but keep it accessible to screen readers. */
}
.login-card label,
.login-card label.visually-hidden,
.login-card .form-item__label,
.login-card .visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.login-card input[type=text],
.login-card input[type=email],
.login-card input[type=password] {
  width: 100%;
  padding: var(--space-sm) var(--space-lg);
  border: 2px solid #004622;
  border-radius: var(--radius-pill);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #004622;
  background-color: transparent;
  outline: none;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.login-card input[type=text]::placeholder,
.login-card input[type=email]::placeholder,
.login-card input[type=password]::placeholder {
  color: #004622;
  opacity: 1;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.login-card input[type=text]:focus,
.login-card input[type=email]:focus,
.login-card input[type=password]:focus {
  border-color: var(--color-btn-hover);
  box-shadow: 0 0 0 2px rgba(0, 70, 34, 0.15);
}
.login-card input[type=submit],
.login-card .form-submit {
  display: block;
  width: 100%;
  padding-block: var(--space-sm);
  padding-inline: var(--space-md);
  background-color: var(--color-btn-primary);
  color: var(--color-text-inverse);
  border: none;
  border-radius: var(--radius-pill);
  font-size: var(--text-base);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: pointer;
  margin-top: var(--space-md);
  transition: background-color var(--transition-fast), color var(--transition-fast);
}
.login-card input[type=submit]:hover,
.login-card .form-submit:hover {
  background-color: #e16d46;
  color: #ebe04d;
}
.login-card__links {
  margin-top: 0;
  font-size: var(--text-sm);
  color: rgba(26, 38, 24, 0.55);
}
.login-card__links a {
  color: var(--color-link);
  text-decoration: none;
  text-transform: uppercase;
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.5px;
}
.login-card__links a:hover {
  text-decoration: underline;
}
.login-card__links .separator {
  margin: 0 var(--space-xs);
  opacity: 0.4;
}
.login-card__footer {
  margin-top: var(--space-xl);
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-card-border);
  font-size: var(--text-xs);
  color: rgba(26, 38, 24, 0.35);
}
.login-card__footer > p:first-of-type {
  margin-bottom: 0;
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #004622;
}
.login-card__footer > p:last-of-type {
  font-size: 0.6rem;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.login-card {
  /* Badge icon inside login card */
}
.login-card__badge {
  width: 4.5rem;
  height: 5rem;
  margin: 0 auto;
}
.login-card__badge svg,
.login-card__badge img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.login-card__badge-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.login-card {
  /* Drupal messages inside the login card */
}
.login-card .messages,
.login-card .messages--error,
.login-card .messages--warning,
.login-card .messages--status {
  border-radius: var(--radius-md);
  padding: var(--space-md);
  margin-bottom: var(--space-lg);
  font-size: var(--text-sm);
  font-weight: 500;
  line-height: 1.5;
  text-align: left;
  list-style: none;
}
.login-card .messages--error {
  background-color: #FEF2F2;
  border: 1.5px solid #FCA5A5;
  color: #991B1B;
}
.login-card .messages--warning {
  background-color: #FFFBEB;
  border: 1.5px solid #FCD34D;
  color: #92400E;
}
.login-card .messages--status {
  background-color: #F0FDF4;
  border: 1.5px solid #86EFAC;
  color: #166534;
}
.login-card .messages a {
  font-weight: 700;
  text-decoration: underline;
  color: inherit;
}
.login-card {
  /* Suppress placeholder-space error on name field */
}
.login-card .form-item--name .form-item__error-message,
.login-card [data-drupal-selector=edit-name] ~ .form-item__error-message {
  display: none;
}
.login-card .messages li:empty {
  display: none;
}

/* Login branding header (above the white card) */
.login-branding {
  text-align: center;
  margin-bottom: var(--space-sm);
  color: var(--color-sidebar-bg);
  position: relative;
  top: -1rem;
}
.login-branding__logo {
  display: block;
  max-width: 200px;
  width: 100%;
  height: auto;
  margin: 0 auto var(--space-sm);
}
.login-branding__mark {
  font-family: var(--font-mono);
  font-size: var(--text-2xl);
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1;
  margin-bottom: var(--space-xs);
}
.login-branding__name {
  font-size: var(--text-md);
  font-weight: 800;
  letter-spacing: 0.12em;
  line-height: 1.2;
}
.login-branding__sub {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  opacity: 0.7;
  margin-top: 0.125rem;
}

/* Lift the login card slightly to balance vertical spacing */
#login-form {
  position: relative;
  top: -1rem;
}

/* Participants login page route overrides */
body.route--organizing-lab-pages-login-participants {
  background-color: #f2d0c5 !important;
  --color-bg: #f2d0c5;
  --color-sidebar-bg: #f2d0c5;
}
body.route--organizing-lab-pages-login-participants .login-branding__logo {
  max-width: 400px;
}
body.route--organizing-lab-pages-login-participants .login-card {
  border: none;
  max-width: 20rem;
}
body.route--organizing-lab-pages-login-participants .login-card .login-card__role-title {
  font-size: var(--text-2xl);
  letter-spacing: 1px;
  color: #004622;
  margin-bottom: 0;
}

/* Trainers login page route overrides */
body.route--organizing-lab-pages-login-trainers {
  background-color: #d3ebd5 !important;
  --color-bg: #d3ebd5;
  --color-sidebar-bg: #d3ebd5;
}
body.route--organizing-lab-pages-login-trainers .login-branding__logo {
  max-width: 400px;
}
body.route--organizing-lab-pages-login-trainers .login-card {
  border: none;
  max-width: 20rem;
}
body.route--organizing-lab-pages-login-trainers .login-card .login-card__role-title {
  font-size: var(--text-2xl);
  letter-spacing: 1px;
  color: #004622;
  margin-bottom: 0;
}

/* Default user login */
body.route--user-login {
  background-color: #ebe04d !important;
  --color-bg: #ebe04d;
  --color-sidebar-bg: #ebe04d;
}
body.route--user-login .login-branding__logo {
  max-width: 400px;
}
body.route--user-login .login-card {
  border: 2px solid #004622 !important;
  max-width: 20rem;
  background-color: transparent;
}
body.route--user-login .login-card .login-card__role-title {
  font-size: var(--text-2xl);
  letter-spacing: 1px;
  color: #004622;
  margin-bottom: 0;
}
body.route--user-login .login-card .login-card__footer {
  border-top: 1px solid #004622;
}

/* ==========================================================================
   Resource Hub Portal Page (/resource-hub)
   Top third = logo, middle = three cards, bottom = footer
   ========================================================================== */
.portal-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-2xl) var(--space-xl);
  background-color: var(--color-bg);
}

.portal-header {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.portal-header__logo {
  max-width: 18rem;
  width: 100%;
  height: auto;
}

.portal-cards {
  flex: 1;
  display: flex;
  flex-direction: row;
  gap: var(--space-xl);
  align-items: center;
  justify-content: center;
}

.portal-card {
  background-color: var(--color-card-bg);
  border-radius: var(--radius-lg);
  box-shadow: none;
  padding: var(--space-xl) var(--space-lg);
  width: 24vw;
  aspect-ratio: 1/1.25;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
  text-align: center;
}
.portal-card--public {
  background-color: transparent;
  border: 2px solid #004622;
}
.portal-card--participant, .portal-card--trainer {
  border: 0 solid var(--color-card-border);
}
.portal-card__icon {
  width: 57%;
  height: auto;
}
.portal-card__icon svg,
.portal-card__icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.portal-card__icon-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.portal-card__title {
  font-size: var(--text-lg);
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--color-text);
  margin: 0;
  margin-top: 1.25rem;
}
.portal-card__btn {
  display: inline-block;
  padding: var(--space-sm) var(--space-xl);
  border-radius: var(--radius-pill);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-decoration: none;
  transition: background-color var(--transition-fast), color var(--transition-fast);
  white-space: nowrap;
}
.portal-card__btn--outline {
  background-color: #004622;
  border: 2px solid #004622;
  color: var(--color-sidebar-bg);
}
.portal-card__btn--solid {
  color: var(--color-text-inverse);
  border: 2px solid transparent;
}
.portal-card__btn--trainer {
  background-color: #004622;
  color: #ebe04d;
}
.portal-card__btn--participant {
  background-color: #004622;
  color: #ebe04d;
}
.portal-card__btn {
  /* Unified hover for all three portal button variants */
}
.portal-card__btn--outline:hover, .portal-card__btn--participant:hover, .portal-card__btn--trainer:hover {
  background-color: #e26d47;
  color: #EBE04D;
  border-color: #e26d47;
  text-decoration: none;
  filter: none !important;
}

.portal-footer {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  text-align: center;
  color: #2B4028;
  padding-bottom: var(--space-xl);
  font-family: "Raleway", var(--font-sans);
}
.portal-footer__powered {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  margin-bottom: 0.125rem;
}
.portal-footer__copyright {
  font-size: var(--text-xs);
  font-weight: 300;
  letter-spacing: 0.1em;
  margin: 0;
}

/* Force the yellow public background only on the anonymous resource-hub portal. */
.route--organizing-lab-pages-resource-hub.page--resource-hub.role--public.user--anonymous {
  background-color: #ebe04d;
  --color-bg: #ebe04d;
}

/* ==========================================================================
   Request Access — Prompt on group page & Form page
   ========================================================================== */
.request-access-prompt {
  max-width: 30rem;
  margin: var(--space-2xl) auto;
  background-color: var(--color-card-bg);
  border: 0 solid var(--color-card-border);
  border-radius: var(--radius-lg);
  box-shadow: none;
  padding: var(--space-2xl) var(--space-xl);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
}
.request-access-prompt__icon {
  width: 3.5rem;
  height: 3.5rem;
  background-color: var(--color-tag-bg);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-sidebar-bg);
}
.request-access-prompt__icon svg {
  width: 1.75rem;
  height: 1.75rem;
  stroke-width: 1.5;
}
.request-access-prompt__title {
  font-size: var(--text-xl);
  font-weight: 800;
  color: var(--color-text);
  margin: 0;
}
.request-access-prompt__training {
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-sidebar-bg);
  margin: 0;
}
.request-access-prompt__body {
  font-size: var(--text-base);
  color: rgba(26, 38, 24, 0.68);
  line-height: 1.6;
  max-width: 360px;
  margin: 0;
}
.request-access-prompt__btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-md) var(--space-xl);
  background-color: var(--color-btn-primary);
  color: var(--color-text-inverse);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-decoration: none;
  margin-top: var(--space-sm);
  transition: background-color var(--transition-fast);
}
.request-access-prompt__btn:hover, .request-access-prompt__btn:focus {
  background-color: var(--color-btn-hover);
  color: var(--color-text-inverse);
  text-decoration: none;
}

.request-access-form__intro {
  margin-bottom: var(--space-lg);
  padding: var(--space-md) var(--space-lg);
  background-color: #ebe04d;
  border-radius: var(--radius-md);
  font-size: var(--text-base);
  line-height: 1.6;
  color: #004622;
}
.request-access-form__note {
  font-size: var(--text-sm);
  color: #004622;
  opacity: 0.75;
  margin-top: var(--space-xs);
  margin-bottom: 0;
}
.request-access-form__cancel {
  display: inline-block;
  margin-left: var(--space-md);
  font-size: var(--text-sm);
  color: #004622;
  opacity: 0.7;
  text-decoration: underline;
}
.request-access-form__cancel:hover {
  opacity: 1;
  text-decoration: none;
}

/* Style the actual Drupal-rendered request access form to match the site. */
#organizing-lab-request-training-access {
  max-width: 40rem;
}
#organizing-lab-request-training-access label {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #004622;
  margin-bottom: var(--space-xs);
}
#organizing-lab-request-training-access textarea {
  width: 100%;
  min-height: 8rem;
  padding: var(--space-md);
  border: 2px solid #004622;
  border-radius: var(--radius-md);
  background-color: #fff;
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: #004622;
  outline: none;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  resize: vertical;
}
#organizing-lab-request-training-access textarea:focus {
  border-color: #1A2618;
  box-shadow: 0 0 0 3px rgba(0, 70, 34, 0.15);
}
#organizing-lab-request-training-access .description {
  font-size: var(--text-sm);
  color: #004622;
  opacity: 0.7;
  margin-top: var(--space-xs);
}
#organizing-lab-request-training-access .form-actions {
  margin-top: var(--space-lg);
  display: flex;
  align-items: center;
  gap: var(--space-md);
}
#organizing-lab-request-training-access input[type=submit],
#organizing-lab-request-training-access .form-submit {
  padding: 0.75rem 2rem;
  background-color: #004622;
  color: #ebe04d;
  border: none;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}
#organizing-lab-request-training-access input[type=submit]:hover, #organizing-lab-request-training-access input[type=submit]:focus,
#organizing-lab-request-training-access .form-submit:hover,
#organizing-lab-request-training-access .form-submit:focus {
  background-color: #e16d46;
  color: #ebe04d;
}

/* ==========================================================================
   Training Signup page (/training-signup/{group}) — anonymous visitor lands
   here when clicking a training they aren't a member of.
   ========================================================================== */
.training-signup__intro {
  margin-bottom: var(--space-xl);
  padding: var(--space-lg) var(--space-xl);
  background: #ebe04d;
  border-radius: var(--radius-lg);
  color: #004622;
  line-height: 1.6;
}

.training-signup__lede {
  font-size: var(--text-md);
  font-weight: 600;
  margin: 0 0 var(--space-lg);
  color: #004622;
}

.training-signup__steps-heading,
.training-signup__form-heading {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #004622;
  margin: 0 0 var(--space-md);
}

.training-signup__form-heading {
  margin-top: var(--space-xl);
  padding-top: var(--space-lg);
  border-top: 2px solid #004622;
}

.training-signup__steps {
  counter-reset: signup-step;
  list-style: none;
  margin: 0 0 var(--space-xl);
  padding: 0;
}
.training-signup__steps li {
  counter-increment: signup-step;
  position: relative;
  padding-left: 2.75rem;
  margin-bottom: var(--space-md);
  line-height: 1.55;
  color: #004622;
}
.training-signup__steps li::before {
  content: counter(signup-step);
  position: absolute;
  left: 0;
  top: 0.05rem;
  width: 1.875rem;
  height: 1.875rem;
  border-radius: 50%;
  background: #004622;
  color: #ebe04d;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-sm);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Drupal's user register + user edit forms, rendered as a clean card.
   `#user-form` is the edit-profile form ID Drupal emits at /user/{uid}/edit. */
#user-register-form,
#user-form,
form[id^=user-register-form],
form[id^=user-form] {
  max-width: 34rem;
  margin: 0;
  background: #fff;
  border: 2px solid #004622;
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
}
#user-register-form .form-item,
#user-form .form-item,
form[id^=user-register-form] .form-item,
form[id^=user-form] .form-item {
  margin-bottom: var(--space-md);
}
#user-register-form label,
#user-form label,
form[id^=user-register-form] label,
form[id^=user-form] label {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #004622;
  margin-bottom: var(--space-xs);
}
#user-register-form input[type=text],
#user-register-form input[type=email],
#user-register-form input[type=password],
#user-form input[type=text],
#user-form input[type=email],
#user-form input[type=password],
form[id^=user-register-form] input[type=text],
form[id^=user-register-form] input[type=email],
form[id^=user-register-form] input[type=password],
form[id^=user-form] input[type=text],
form[id^=user-form] input[type=email],
form[id^=user-form] input[type=password] {
  width: 100%;
  padding: var(--space-sm) var(--space-lg);
  border: 2px solid #004622;
  border-radius: var(--radius-pill);
  background: #fff;
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.05em;
  color: #004622;
  text-transform: uppercase;
  outline: none;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
#user-register-form input[type=text]::placeholder,
#user-register-form input[type=email]::placeholder,
#user-register-form input[type=password]::placeholder,
#user-form input[type=text]::placeholder,
#user-form input[type=email]::placeholder,
#user-form input[type=password]::placeholder,
form[id^=user-register-form] input[type=text]::placeholder,
form[id^=user-register-form] input[type=email]::placeholder,
form[id^=user-register-form] input[type=password]::placeholder,
form[id^=user-form] input[type=text]::placeholder,
form[id^=user-form] input[type=email]::placeholder,
form[id^=user-form] input[type=password]::placeholder {
  color: rgba(0, 70, 34, 0.45);
}
#user-register-form input[type=text]:focus,
#user-register-form input[type=email]:focus,
#user-register-form input[type=password]:focus,
#user-form input[type=text]:focus,
#user-form input[type=email]:focus,
#user-form input[type=password]:focus,
form[id^=user-register-form] input[type=text]:focus,
form[id^=user-register-form] input[type=email]:focus,
form[id^=user-register-form] input[type=password]:focus,
form[id^=user-form] input[type=text]:focus,
form[id^=user-form] input[type=email]:focus,
form[id^=user-form] input[type=password]:focus {
  border-color: #1A2618;
  box-shadow: 0 0 0 3px rgba(0, 70, 34, 0.15);
}
#user-register-form .description,
#user-form .description,
form[id^=user-register-form] .description,
form[id^=user-form] .description {
  font-size: var(--text-xs);
  color: rgba(0, 70, 34, 0.65);
  margin-top: 0.35rem;
  line-height: 1.4;
}
#user-register-form,
#user-form,
form[id^=user-register-form],
form[id^=user-form] {
  /* Picture field is optional and noisy at signup — hide it */
}
#user-register-form .field--name-user-picture,
#user-register-form .form-item-files-user-picture-0,
#user-register-form [data-drupal-selector=edit-user-picture],
#user-form .field--name-user-picture,
#user-form .form-item-files-user-picture-0,
#user-form [data-drupal-selector=edit-user-picture],
form[id^=user-register-form] .field--name-user-picture,
form[id^=user-register-form] .form-item-files-user-picture-0,
form[id^=user-register-form] [data-drupal-selector=edit-user-picture],
form[id^=user-form] .field--name-user-picture,
form[id^=user-form] .form-item-files-user-picture-0,
form[id^=user-form] [data-drupal-selector=edit-user-picture] {
  display: none;
}
#user-register-form .form-actions,
#user-form .form-actions,
form[id^=user-register-form] .form-actions,
form[id^=user-form] .form-actions {
  margin-top: var(--space-lg);
  display: flex;
  align-items: center;
}
#user-register-form input[type=submit],
#user-register-form .form-submit,
#user-form input[type=submit],
#user-form .form-submit,
form[id^=user-register-form] input[type=submit],
form[id^=user-register-form] .form-submit,
form[id^=user-form] input[type=submit],
form[id^=user-form] .form-submit {
  padding: 0.75rem 2rem;
  background-color: #004622;
  color: #ebe04d;
  border: none;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}
#user-register-form input[type=submit]:hover, #user-register-form input[type=submit]:focus,
#user-register-form .form-submit:hover,
#user-register-form .form-submit:focus,
#user-form input[type=submit]:hover,
#user-form input[type=submit]:focus,
#user-form .form-submit:hover,
#user-form .form-submit:focus,
form[id^=user-register-form] input[type=submit]:hover,
form[id^=user-register-form] input[type=submit]:focus,
form[id^=user-register-form] .form-submit:hover,
form[id^=user-register-form] .form-submit:focus,
form[id^=user-form] input[type=submit]:hover,
form[id^=user-form] input[type=submit]:focus,
form[id^=user-form] .form-submit:hover,
form[id^=user-form] .form-submit:focus {
  background-color: #e16d46;
  color: #ebe04d;
}

/* ==========================================================================
   Messaging + Alerts pages
   ========================================================================== */
.message-tabs {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: var(--space-lg);
  border-bottom: 2px solid #004622;
  padding-bottom: var(--space-sm);
}
.message-tabs__tab {
  display: inline-block;
  padding: 0.5rem 1.1rem;
  border-radius: var(--radius-pill);
  background: transparent;
  color: #004622;
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: var(--text-xs);
  text-decoration: none;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.message-tabs__tab:hover {
  background: rgba(0, 70, 34, 0.08);
}
.message-tabs__tab.is-active {
  background: #004622;
  color: #ebe04d;
}
.message-tabs__compose {
  margin-left: auto;
  padding: 0.5rem 1.2rem;
  border-radius: var(--radius-pill);
  background: #e16d46;
  color: #ebe04d;
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: var(--text-xs);
  text-decoration: none;
  transition: background var(--transition-fast);
}
.message-tabs__compose:hover {
  background: #c75a36;
}

.messages-empty {
  padding: var(--space-xl);
  text-align: center;
  color: rgba(0, 70, 34, 0.65);
  font-style: italic;
}

.messages-table,
.alerts-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}
.messages-table thead th,
.alerts-table thead th {
  background: #004622;
  color: #ebe04d;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-size: var(--text-xs);
  padding: 0.75rem 1rem;
  text-align: left;
}
.messages-table tbody td,
.alerts-table tbody td {
  padding: 0.85rem 1rem;
  border-bottom: 1px solid rgba(0, 70, 34, 0.12);
  vertical-align: middle;
}
.messages-table tr.message-row--unread td,
.messages-table tr.alert-row--unread td,
.alerts-table tr.message-row--unread td,
.alerts-table tr.alert-row--unread td {
  background: rgba(235, 224, 77, 0.22);
  font-weight: 600;
}
.messages-table .message-row__link,
.messages-table .alert-row__link,
.alerts-table .message-row__link,
.alerts-table .alert-row__link {
  color: #004622;
  text-decoration: none;
  display: block;
}
.messages-table .message-row__link:hover,
.messages-table .alert-row__link:hover,
.alerts-table .message-row__link:hover,
.alerts-table .alert-row__link:hover {
  color: #1A2618;
}
.messages-table .message-row__preview,
.messages-table .alert-row__preview,
.alerts-table .message-row__preview,
.alerts-table .alert-row__preview {
  font-weight: 400;
  color: rgba(0, 70, 34, 0.65);
  font-size: var(--text-xs);
}
.messages-table .message-row__dot,
.messages-table .alert-row__dot,
.alerts-table .message-row__dot,
.alerts-table .alert-row__dot {
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: #e16d46;
  margin-right: 0.4rem;
  vertical-align: middle;
}

.message-view__meta,
.alert-view__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  font-size: var(--text-sm);
  color: rgba(0, 70, 34, 0.75);
  margin-bottom: var(--space-lg);
  padding-bottom: var(--space-md);
  border-bottom: 1px solid rgba(0, 70, 34, 0.15);
}
.message-view__meta strong,
.alert-view__meta strong {
  color: #004622;
}

.message-view__body,
.alert-view__body {
  font-size: var(--text-base);
  line-height: 1.6;
  color: #004622;
  margin-bottom: var(--space-xl);
  white-space: pre-wrap;
}

.message-view__actions,
.alert-view__actions {
  display: flex;
  gap: var(--space-md);
}

.message-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.4rem 1rem 0.4rem 0.4rem;
  border-radius: var(--radius-pill);
  background: transparent;
  color: #004622;
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: var(--text-xs);
  text-decoration: none;
  border: 2px solid #004622;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.message-action-btn:hover, .message-action-btn:focus {
  background: #004622;
  color: #ebe04d;
  text-decoration: none;
}
.message-action-btn__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  color: #004622;
}
.message-action-btn__arrow svg {
  display: block;
  width: 1.375rem;
  height: 1.375rem;
}
.message-action-btn {
  /* When the label sits before the arrow (e.g. Reply →), reverse padding. */
}
.message-action-btn--reverse {
  padding: 0.4rem 0.4rem 0.4rem 1rem;
}
.message-action-btn--primary {
  background: #004622;
  color: #ebe04d;
}
.message-action-btn--primary .message-action-btn__arrow {
  color: #ebe04d;
}
.message-action-btn--primary:hover, .message-action-btn--primary:focus {
  background: #e16d46;
}

/* Drupal form styling for compose-message and alert-create forms */
#organizing-lab-compose-message,
#organizing-lab-alert-form {
  max-width: 40rem;
}
#organizing-lab-compose-message label,
#organizing-lab-alert-form label {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #004622;
  margin-bottom: var(--space-xs);
}
#organizing-lab-compose-message input[type=text],
#organizing-lab-compose-message input[type=email],
#organizing-lab-compose-message textarea,
#organizing-lab-compose-message select,
#organizing-lab-alert-form input[type=text],
#organizing-lab-alert-form input[type=email],
#organizing-lab-alert-form textarea,
#organizing-lab-alert-form select {
  width: 100%;
  padding: var(--space-sm) var(--space-md);
  border: 2px solid #004622;
  border-radius: var(--radius-md);
  background: #fff;
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: #004622;
  outline: none;
}
#organizing-lab-compose-message input[type=text]:focus,
#organizing-lab-compose-message input[type=email]:focus,
#organizing-lab-compose-message textarea:focus,
#organizing-lab-compose-message select:focus,
#organizing-lab-alert-form input[type=text]:focus,
#organizing-lab-alert-form input[type=email]:focus,
#organizing-lab-alert-form textarea:focus,
#organizing-lab-alert-form select:focus {
  border-color: #1A2618;
  box-shadow: 0 0 0 3px rgba(0, 70, 34, 0.15);
}
#organizing-lab-compose-message textarea,
#organizing-lab-alert-form textarea {
  resize: vertical;
}
#organizing-lab-compose-message .description,
#organizing-lab-alert-form .description {
  font-size: var(--text-xs);
  color: rgba(0, 70, 34, 0.65);
  margin-top: 0.25rem;
}
#organizing-lab-compose-message .form-actions,
#organizing-lab-alert-form .form-actions {
  margin-top: var(--space-lg);
}
#organizing-lab-compose-message input[type=submit],
#organizing-lab-compose-message .form-submit,
#organizing-lab-alert-form input[type=submit],
#organizing-lab-alert-form .form-submit {
  padding: 0.75rem 2rem;
  background: #004622;
  color: #ebe04d;
  border: none;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--transition-fast);
}
#organizing-lab-compose-message input[type=submit]:hover,
#organizing-lab-compose-message .form-submit:hover,
#organizing-lab-alert-form input[type=submit]:hover,
#organizing-lab-alert-form .form-submit:hover {
  background: #e16d46;
}

/* Admin requests table styling */
.training-access-requests {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}
.training-access-requests thead th {
  background: #004622;
  color: #ebe04d;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-size: var(--text-xs);
  padding: 0.75rem 1rem;
  text-align: left;
}
.training-access-requests tbody td {
  padding: 0.85rem 1rem;
  border-bottom: 1px solid rgba(0, 70, 34, 0.12);
  vertical-align: middle;
}
.training-access-requests tbody tr:hover {
  background-color: rgba(235, 224, 77, 0.18);
}

/* ==========================================================================
   File Type Tag Page — View Toggle & Flat File List
   ========================================================================== */
.view-toggle {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
}
.view-toggle__label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: rgba(26, 38, 24, 0.55);
  margin-right: var(--space-xs);
}
.view-toggle__btn {
  display: inline-block;
  padding: 0.375rem 1rem;
  border-radius: 1.25rem;
  border: 2px solid #004622;
  font-size: var(--text-sm);
  font-weight: 600;
  color: #004622;
  text-decoration: none;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.view-toggle__btn:hover {
  background: var(--color-sidebar-bg);
  color: var(--color-sidebar-text);
  text-decoration: none;
}
.view-toggle__btn--active {
  background: #004622;
  color: #ebe04d;
}

.file-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
.file-list__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  background: #ffffff;
  border: 0 solid rgba(0, 0, 0, 0.09);
  border-left: 20px solid var(--card-accent, var(--color-sidebar-bg));
  border-radius: var(--radius-md);
  padding: var(--space-md) var(--space-lg);
}
.file-list__meta {
  display: flex;
  flex-direction: column;
  gap: 0.1875rem;
  flex: 1;
  min-width: 0;
}
.file-list__type-badge {
  display: inline-block;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: white !important;
  background: var(--card-accent, rgb(82, 120, 184));
  border-radius: var(--radius-sm);
  padding: 0.125rem 0.4375rem;
  width: fit-content;
}
.file-list__module-context {
  font-size: var(--text-sm);
  color: rgba(26, 38, 24, 0.55);
}
.file-list__module-link {
  color: #004622;
  font-weight: 600;
  text-decoration: none;
}
.file-list__module-link:hover {
  text-decoration: underline;
}
.file-list {
  /* File-type chip next to the audience badge — small inline pill with
     icon + name (e.g. "📄 Google Doc"). Matches the chip on the
     paragraph resource cards. */
}
.file-list__file-type {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  max-width: 10rem;
  margin-top: 0.25rem;
  margin-bottom: 0.5rem;
  padding: 0.2rem 0.55rem;
  border-radius: var(--radius-pill);
  background: rgba(0, 70, 34, 0.08);
  color: #004622;
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
}
.file-list__file-type svg {
  display: block;
  width: 0.85rem;
  height: 0.85rem;
}
.file-list__file-type-icon {
  display: inline-flex;
  align-items: center;
  line-height: 0;
}
.file-list__link {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: 0.5rem 1.125rem;
  background: var(--card-accent, var(--color-sidebar-bg));
  color: #fff;
  border-radius: var(--radius-pill);
  font-size: var(--text-sm);
  font-weight: 700;
  text-decoration: none;
  transition: background var(--transition-fast), color var(--transition-fast);
  white-space: nowrap;
  /* Wider hit area on desktop so a long row reads as a real "open file"
     button, right-aligned within the row's flex layout. */
}
@media (min-width: 66.75rem) {
  .file-list__link {
    min-width: 25rem;
    justify-content: flex-end;
  }
}
.file-list__link:hover {
  background: #EBE04D;
  color: #004622;
  text-decoration: none;
}
.file-list__arrow {
  position: relative;
  left: 0.5rem;
  display: inline-flex;
  align-items: center;
  line-height: 0;
}
.file-list__arrow svg {
  display: block;
  color: var(--card-accent, var(--color-btn-primary));
}

/* ==========================================================================
   Calendar Page (/calendar)
   ========================================================================== */
.calendar-wrap {
  background: #ffffff;
  border: 1.5px solid rgba(0, 0, 0, 0.1);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-top: var(--space-lg);
}

.calendar-header {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-lg);
}
.calendar-header__left {
  flex: 1;
}
.calendar-header__month {
  display: inline-block;
  background: #004622;
  color: #F9FBFA;
  font-weight: 800;
  font-size: var(--text-sm);
  letter-spacing: 0.07em;
  padding: 0.375rem 1.125rem;
  border-radius: 1.25rem;
}
.calendar-header__nav {
  display: flex;
  gap: var(--space-sm);
}

/* Prev / Next month buttons styled to match the rest of the site's
   circle-arrow buttons (white disc on green background, arrow flips
   per direction). The SVG renders inside, no text content. */
.calendar-nav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.125rem;
  height: 2.125rem;
  border-radius: 50%;
  background: #004622;
  color: #004622;
  text-decoration: none;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.calendar-nav-btn svg {
  display: block;
  width: 1.5rem;
  height: 1.5rem;
}
.calendar-nav-btn svg circle {
  fill: #ffffff;
  transition: fill var(--transition-fast);
}
.calendar-nav-btn:hover {
  background: #EBE04D;
  text-decoration: none;
}
.calendar-nav-btn:hover svg circle {
  fill: #004622;
}
.calendar-nav-btn:hover {
  color: #EBE04D;
}

.calendar-grid {
  border-top: 0;
}
.calendar-grid__headers {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}
.calendar-grid__header-cell {
  padding: 0.5rem 0.375rem;
  text-align: center;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: rgba(26, 38, 24, 0.4);
  border-right: 1px solid rgba(0, 0, 0, 0.06);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
.calendar-grid__header-cell:last-child {
  border-right: none;
}
.calendar-grid__body {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}

.calendar-cell {
  min-height: 5.625rem;
  border-right: 1px solid rgba(0, 0, 0, 0.06);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  padding: var(--space-xs);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.calendar-cell:nth-child(7n) {
  border-right: none;
}
.calendar-cell--empty {
  background: rgba(0, 0, 0, 0.015);
  min-height: 5.625rem;
  border-right: 1px solid rgba(0, 0, 0, 0.06);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.calendar-cell--empty:nth-child(7n) {
  border-right: none;
}
.calendar-cell__events {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  flex: 1;
}
.calendar-cell__date {
  font-size: 0.625rem;
  font-weight: 500;
  color: rgba(26, 38, 24, 0.38);
  align-self: flex-start;
  margin-top: var(--space-xs);
  line-height: 1;
}

.calendar-event {
  display: block;
  padding: 0.125rem 0.375rem;
  border-radius: var(--radius-sm);
  font-size: 0.625rem;
  font-weight: 700;
  color: #ffffff;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.5;
  letter-spacing: 0.01em;
}
.calendar-event:hover {
  opacity: 0.85;
  text-decoration: none;
  color: #ffffff;
}
.calendar-event--green {
  background-color: #2B4028;
}
.calendar-event--blue {
  background-color: #3B52CC;
}
.calendar-event--coral {
  background-color: #C07868;
}
.calendar-event--teal {
  background-color: #2B6B5A;
}
.calendar-event--purple {
  background-color: #6B4FBB;
}
.calendar-event--yellow {
  background-color: #9A8F00;
}

@media (max-width: 900px) {
  .calendar-cell,
  .calendar-cell--empty {
    min-height: 3.75rem;
  }
  .calendar-event {
    font-size: 0.5625rem;
    padding: 0.0625rem 0.25rem;
  }
}
/* ==========================================================================
   Mobile agenda view (≤ 768px)
   The 7-column month grid is unreadable on phones, so we collapse it into
   a vertical list: each day with events becomes one row card. Empty days
   and days without events are hidden. Uses :has() to detect cells with
   children — supported in all current evergreen browsers.
   ========================================================================== */
@media (max-width: 768px) {
  .calendar-wrap {
    padding: 0;
    padding-inline: 0.75rem;
    border: 2px solid #004622;
  }
  .calendar-header {
    flex-direction: column;
    flex-wrap: wrap;
    gap: var(--space-sm);
  }
  .calendar-header__month {
    font-size: var(--text-md);
  }
  .calendar-grid {
    border-top: 0;
  }
  /* Drop the SUN/MON/TUE… strip on mobile — each row labels its own day. */
  .calendar-grid__headers {
    display: none;
  }
  /* One column, no grid. */
  .calendar-grid__body {
    display: block;
  }
  /* Hide empty padding cells and days that have no events. */
  .calendar-cell--empty,
  .calendar-cell:not(:has(.calendar-cell__events)) {
    display: none;
  }
  /* A cell with events becomes a horizontal mini-row: [date] [events]. */
  .calendar-cell {
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
    min-height: 0;
    padding: var(--space-md);
    margin-bottom: var(--space-md);
    border: 2px solid rgb(0, 70, 34);
    border-right: 2px solid rgb(0, 70, 34);
    border-bottom: 2px solid rgb(0, 70, 34);
    border-radius: var(--radius-lg);
    background: #fff;
  }
  .calendar-cell:nth-child(7n) {
    border-right: 2px solid rgb(0, 70, 34);
  }
  .calendar-cell__date {
    align-self: flex-start;
    margin-top: 0.1rem;
    font-size: 1rem;
    font-weight: 800;
    color: #004622;
    line-height: 1;
    min-width: 2.25rem;
    aspect-ratio: 1/1;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background-color: #f2d0c5;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
  }
  .calendar-cell__events {
    flex: 1;
    gap: 0.4rem;
    width: 100%;
    text-align: center;
  }
  .calendar-event {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    padding: 0.45rem 0.75rem;
    font-size: 0.7rem;
    border-radius: var(--radius-pill);
    line-height: 1.3;
  }
}
/* ==========================================================================
   Client Guide Page (/client-guide)
   ========================================================================== */
.guide {
  max-width: 100%;
  margin: 0 auto;
  padding: var(--space-xl) var(--space-lg);
  padding-inline: var(--space-2xl);
  background-color: white;
  border: 2px solid var(--color-text);
  border-radius: var(--radius-lg);
  color: #004622;
  /* Force every nested text element to inherit the dark-green color so
     headings, paragraphs, list items, and links all read consistently. */
}
.guide h1, .guide h2, .guide h3, .guide h4, .guide h5, .guide h6, .guide p, .guide li, .guide dt, .guide dd, .guide strong, .guide em, .guide code, .guide td, .guide th, .guide a {
  color: #004622;
}
.guide a:hover, .guide a:focus {
  color: #004622;
}
.guide__header {
  margin-bottom: var(--space-xl);
  border-bottom: 2px solid var(--color-card-border);
  padding-bottom: var(--space-lg);
}
.guide__eyebrow {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-link);
  margin: 0 0 var(--space-sm);
  opacity: 0.7;
}
.guide__title {
  font-size: var(--text-2xl);
  font-weight: 800;
  margin: 0 0 var(--space-sm);
  line-height: 1.15;
}
.guide__subtitle {
  font-size: var(--text-md);
  margin: 0;
  opacity: 0.8;
}
.guide__toc {
  background: var(--color-tag-bg);
  border: 1px solid var(--color-card-border);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  margin-bottom: var(--space-xl);
}
.guide__toc-label {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.6;
  margin: 0 0 var(--space-sm);
}
.guide__toc-list {
  margin: 0;
  padding-left: 1.25rem;
  columns: 2;
  column-gap: var(--space-xl);
}
.guide__toc-list li {
  margin-bottom: var(--space-xs);
  break-inside: avoid;
}
.guide__toc-list a {
  color: var(--color-link);
  text-decoration: none;
  font-size: var(--text-sm);
}
.guide__toc-list a:hover {
  text-decoration: underline;
  color: var(--color-link-hover);
}
.guide__section {
  margin-bottom: var(--space-2xl);
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-card-border);
}
.guide__section-title {
  font-size: var(--text-xl);
  font-weight: 800;
  margin: 0 0 var(--space-md);
}
.guide__subsection-title {
  font-size: var(--text-md);
  font-weight: 700;
  margin: var(--space-lg) 0 var(--space-sm);
}
.guide__steps {
  margin: 0 0 var(--space-md);
  padding-left: 1.5rem;
}
.guide__steps li {
  margin-bottom: var(--space-sm);
  line-height: 1.6;
}
.guide__list {
  margin: 0 0 var(--space-md);
  padding-left: 1.5rem;
}
.guide__list li {
  margin-bottom: var(--space-sm);
  line-height: 1.6;
}
.guide__list--nested {
  margin-top: var(--space-xs);
  margin-bottom: 0;
}
.guide__list--colors {
  list-style: none;
  padding-left: 0;
}
.guide__list--colors li {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}
.guide__table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: var(--space-md);
  font-size: var(--text-sm);
}
.guide__table th,
.guide__table td {
  text-align: left;
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--color-card-border);
  vertical-align: top;
}
.guide__table thead th {
  background: var(--color-tag-bg);
  font-weight: 700;
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.guide__table tbody tr:nth-child(even) {
  background: #f9f9f7;
}
.guide__table--access td:not(:first-child),
.guide__table--access th:not(:first-child) {
  text-align: center;
}
.guide__yes {
  color: #2a7a3b;
  font-weight: 700;
}
.guide__no {
  color: #9b3a2c;
  opacity: 0.7;
}
.guide__callout {
  background: #eef4e8;
  border-left: 4px solid var(--color-link);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: var(--space-md) var(--space-lg);
  margin-bottom: var(--space-md);
  font-size: var(--text-sm);
  line-height: 1.6;
}
.guide__callout--warning {
  background: #fdf6e3;
  border-left-color: #b8860b;
}
.guide__color-dot {
  display: inline-block;
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
  flex-shrink: 0;
}
.guide__color-dot--green {
  background-color: #4A7C59;
}
.guide__color-dot--coral {
  background-color: #C07868;
}
.guide__color-dot--blue {
  background-color: #3B6EA5;
}
.guide__color-dot--teal {
  background-color: #2B6B5A;
}
.guide__color-dot--purple {
  background-color: #6B4FBB;
}
.guide__color-dot--yellow {
  background-color: #9A8F00;
}

@media (max-width: 640px) {
  .guide__toc-list {
    columns: 1;
  }
  .guide__table {
    font-size: var(--text-xs);
  }
  .guide__table th,
  .guide__table td {
    padding: var(--space-xs) var(--space-sm);
  }
}
/* ==========================================================================
   Utilities
   ========================================================================== */
/* Visually hidden (accessible) */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* Floating "Hide/Show Toolbar" toggle button — collapses Drupal's admin
   toolbar so any user can reclaim the top of the viewport on demand. */
body.orglab-toolbar-toggle-ready #toolbar-administration,
body.orglab-toolbar-toggle-ready .toolbar-tray {
  transition: transform 0.32s ease, opacity 0.32s ease;
}

body.orglab-toolbar-hidden {
  /* Drupal pushes the page body down by ~39px (or 79px when a vertical tray
     is open) with these classes. Cancel that padding when hidden. */
}
body.orglab-toolbar-hidden.toolbar-fixed, body.orglab-toolbar-hidden.toolbar-horizontal, body.orglab-toolbar-hidden.toolbar-tray-open, body.orglab-toolbar-hidden.toolbar-vertical {
  padding-top: 0 !important;
}
body.orglab-toolbar-hidden #toolbar-administration {
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
}

.toolbar-toggle {
  position: fixed;
  bottom: 1.25rem;
  right: 1.25rem;
  z-index: 1100;
  display: inline-flex;
  align-items: center;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  font: inherit;
}
.toolbar-toggle__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background-color: #004622;
  color: #ebe04d;
  /* Matches the mobile-filter-bar icon shadow so the button cluster
     reads as one floating group above the page. */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.18), 0 8px 20px rgba(0, 70, 34, 0.32);
  transition: transform 0.3s ease, background-color var(--transition-fast), color var(--transition-fast);
}
.toolbar-toggle__icon svg {
  width: 1.125rem;
  height: 1.125rem;
}
.toolbar-toggle__label {
  position: absolute;
  right: calc(100% + 0.5rem);
  top: 50%;
  transform: translate(0.4rem, -50%);
  background: #004622;
  color: #ebe04d;
  padding: 0.4rem 0.9rem;
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.toolbar-toggle:hover .toolbar-toggle__label, .toolbar-toggle:focus .toolbar-toggle__label, .toolbar-toggle:focus-visible .toolbar-toggle__label {
  opacity: 1;
  transform: translate(0, -50%);
}
.toolbar-toggle:hover .toolbar-toggle__icon, .toolbar-toggle:focus .toolbar-toggle__icon, .toolbar-toggle:focus-visible .toolbar-toggle__icon {
  background-color: #ebe04d;
  color: #004622;
}
.toolbar-toggle {
  /* Icon points DOWN when toolbar is hidden (click to bring it back).
     Default chevron-up = toolbar visible. */
}
.toolbar-toggle.is-hidden .toolbar-toggle__icon {
  transform: rotate(180deg);
}

/* Visually hidden (accessible) */
.skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-md);
  z-index: 9999;
  padding: var(--space-sm) var(--space-md);
  background-color: var(--color-sidebar-bg);
  color: var(--color-text-inverse);
  border-radius: var(--radius-md);
  font-weight: 700;
  text-decoration: none;
  transition: top var(--transition-fast);
}
.skip-link:focus {
  top: var(--space-md);
}

/* ==========================================================================
   Mobile-only components

   - .mobile-filter-bar       Fixed bottom row of round icon buttons that
                              replace the sidebar's three filter accordions
                              on viewports ≤ 768px. Sits to the left of the
                              existing .toolbar-toggle so admins still get
                              both controls in the same bottom-right area.
   - .mobile-filter-sheet     Slide-up panel with the accordion's contents.
   - .mobile-extras           External links + copyright block injected after
                              the main content on mobile.

   All of these are hidden by default; _responsive.scss reveals them at the
   appropriate breakpoint, and js/script.js owns the DOM construction.
   ========================================================================== */
.mobile-filter-bar {
  display: none;
  position: fixed;
  bottom: 1.25rem;
  right: 5rem;
  z-index: 1090;
  gap: 0.45rem;
  align-items: center;
}
.mobile-filter-bar__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 0;
  border-radius: 50%;
  background-color: #004622;
  color: #ebe04d;
  /* Layered shadow gives lift + a soft halo so the icons read clearly
     against the page without a gradient backdrop behind them. */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.18), 0 8px 20px rgba(0, 70, 34, 0.32);
  cursor: pointer;
  transition: background-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}
.mobile-filter-bar__btn svg {
  width: 1.125rem;
  height: 1.125rem;
}
.mobile-filter-bar__btn:hover, .mobile-filter-bar__btn:focus, .mobile-filter-bar__btn.is-open {
  background-color: #ebe04d;
  color: #004622;
}

.mobile-filter-sheet-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1094;
  background: rgba(0, 0, 0, 0.4);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.28s ease;
}
.mobile-filter-sheet-backdrop.is-open {
  opacity: 1;
  pointer-events: auto;
}

.mobile-filter-sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1095;
  background: #fff;
  border-top: 2px solid #004622;
  border-top-left-radius: var(--radius-lg);
  border-top-right-radius: var(--radius-lg);
  padding: var(--space-md);
  max-height: 72vh;
  overflow-y: auto;
  box-shadow: 0 -10px 28px rgba(0, 70, 34, 0.22);
  transform: translateY(110%);
  transition: transform 0.3s ease;
  pointer-events: none;
}
.mobile-filter-sheet.is-open {
  transform: translateY(0);
  pointer-events: auto;
}
.mobile-filter-sheet__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-md);
  padding-bottom: var(--space-sm);
  border-bottom: 2px solid #004622;
}
.mobile-filter-sheet__title {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #004622;
  margin: 0;
}
.mobile-filter-sheet__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border: 0;
  border-radius: 50%;
  background-color: #004622;
  color: #ebe04d;
  cursor: pointer;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}
.mobile-filter-sheet__close svg {
  width: 1rem;
  height: 1rem;
}
.mobile-filter-sheet__close:hover, .mobile-filter-sheet__close:focus {
  background-color: #ebe04d;
  color: #004622;
}
.mobile-filter-sheet__content .sidebar__nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin: 0;
  padding: 0;
  list-style: none;
}
.mobile-filter-sheet__content {
  /* Re-use existing sidebar nav-link styling inside the sheet */
}
.mobile-filter-sheet__content .sidebar__nav-link {
  display: flex;
  align-items: center;
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #f8faf9;
  background-color: #004622;
  text-decoration: none;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}
.mobile-filter-sheet__content .sidebar__nav-link:hover, .mobile-filter-sheet__content .sidebar__nav-link:focus, .mobile-filter-sheet__content .sidebar__nav-link.is-active {
  background-color: #ebe04d;
  color: #004622;
}
.mobile-filter-sheet__content .sidebar__access-dot {
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  margin-right: 0.4rem;
  vertical-align: middle;
  flex-shrink: 0;
}
.mobile-filter-sheet__content .sidebar__access-dot--access {
  background-color: white;
}
.mobile-filter-sheet__content .sidebar__access-dot--locked {
  background-color: transparent;
  border: 1px solid #ebe04d;
  opacity: 0.55;
}

/* ==========================================================================
   Mobile extras — external links + copyright block placed after main content
   ========================================================================== */
.mobile-extras {
  display: none;
}
.mobile-extras__inner {
  padding: var(--space-lg) var(--space-md) calc(var(--space-xl) + 4rem);
  margin-top: var(--space-md);
  text-align: center;
  border-top: 2px solid var(--color-text);
}
.mobile-extras__links {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}
.mobile-extras__link {
  display: inline-block;
  min-width: 14rem;
  padding: var(--space-sm) var(--space-md);
  background-color: #004622;
  color: #ebe04d;
  text-decoration: none;
  font-weight: 800;
  font-size: var(--text-xs);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  border-radius: var(--radius-pill);
  transition: background-color var(--transition-fast), color var(--transition-fast);
}
.mobile-extras__link:hover, .mobile-extras__link:focus {
  background-color: #ebe04d;
  color: #004622;
  text-decoration: none;
}
.mobile-extras__footer p {
  font-size: 0.6rem;
  text-transform: uppercase;
  color: #004622;
  font-weight: 600;
  margin: 0;
  line-height: 1.7;
}

/* ==========================================================================
   Global Responsive Breakpoints
   ========================================================================== */
/* Resource grid column count is mobile-first in _resource-grid.scss
   (2 cols by default, 3 above 1380px, 4 above 1690px). */
/* --------------------------------------------------------------------------
   Tablet & narrower (max-width: 1024px) — sidebar gets a tiny bit slimmer.
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  :root {
    --sidebar-width: 17rem;
  }
  .resource-grid {
    grid-template-columns: 1fr;
  }
}
/* --------------------------------------------------------------------------
   Mobile / small tablet (max-width: 768px) — stack the layout vertically.
   Sidebar moves to the top of the page and sizes naturally. Bordered
   "section" containers lose their fixed height so they expand with content.
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  :root {
    --sidebar-width: 100%;
  }
  /* ------------------------------------------------------------------
     Global mobile overflow guard.
     The sticky sidebar is disabled at this breakpoint (see below) so
     it's safe to clip horizontal overflow on the document. This is a
     belt-and-braces backstop — every page should also size correctly
     on its own, but if a long URL, oversized image, wide table, or
     stray fixed-width element slips through, the page never gets a
     horizontal scrollbar.
     ------------------------------------------------------------------ */
  html,
  body {
    overflow-x: hidden;
    max-width: 100%;
  }
  /* Force every common content container to respect the viewport width
     and let long unbreakable strings wrap instead of pushing the page. */
  .layout-page-wrapper,
  .layout-main,
  .layout-sidebar,
  .content-area,
  main,
  .resource-card,
  .module-resources,
  .messages-container,
  .alerts-container,
  .training-access-requests,
  .request-access-prompt,
  .training-signup,
  .client-guide,
  .portal-page {
    max-width: 100vw;
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  /* Module detail page: paragraph cards used a wide minimum suited to
     desktop — let them shrink fully on mobile. */
  .module-resources {
    grid-template-columns: 1fr;
  }
  /* Stack: sidebar on top, main content below */
  .layout-page-wrapper {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    /* Undo the desktop "lock page to viewport" rules so the mobile layout
       can scroll naturally. */
    height: auto;
    overflow: visible;
  }
  .layout-sidebar {
    grid-column: 1;
    grid-row: 1;
    position: static;
    width: 100%;
    min-height: 0;
    max-height: none;
    height: auto;
    overflow: visible;
    padding: var(--space-md);
  }
  .layout-main {
    grid-column: 1;
    grid-row: 2;
    min-height: 0;
    height: auto;
    overflow: visible;
  }
  /* Content area also reverts to natural flow */
  .content-area {
    display: block;
    flex: none;
    min-height: 0;
  }
  /* Bordered nav wrapper: no flex sizing, content flows naturally */
  .sidebar {
    position: static;
    flex: none;
    height: auto;
    min-height: 0;
    overflow: visible;
    padding: var(--space-md);
  }
  /* Main content card also stops flexing */
  #block-organizing-lab-content {
    flex: none;
    min-height: 0;
  }
  /* On mobile the three filter accordions move into a fixed bottom bar +
     bottom-sheet (see _mobile-extras.scss). The originals stay in the DOM
     for JS to read but are hidden in the sidebar. */
  .layout-sidebar .sidebar__filter,
  .layout-sidebar .sidebar__section,
  .layout-sidebar .sidebar__footer {
    display: none;
  }
  /* With the filter accordions hidden, collapse the bordered nav wrapper
     so it doesn't render an empty rounded box above the content. */
  .layout-sidebar .sidebar {
    border: 0;
    padding: 0;
    margin-bottom: 0;
  }
  /* Reveal the bottom-bar (icon buttons) and mobile-extras block.
     Filter bar pins to the LEFT edge so it doesn't crowd the
     Hide/Show Toolbar button on the right. The `+ env(safe-area-inset-bottom)`
     lifts both clusters above iOS Safari's bottom URL chrome so they
     never disappear behind it. */
  .mobile-filter-bar {
    display: inline-flex;
    right: auto;
    left: 0.5rem;
    bottom: calc(0.85rem + env(safe-area-inset-bottom, 0px));
  }
  .mobile-extras {
    display: block;
  }
  .toolbar-toggle {
    right: 0.5rem;
    bottom: calc(0.85rem + env(safe-area-inset-bottom, 0px));
  }
  .toolbar-toggle__icon {
    width: 2.5rem;
    height: 2.5rem;
  }
  /* Gradient-blur backdrop behind the bottom-fixed buttons.
     A full-width fixed pseudo-element with a uniform backdrop-filter,
     then masked top-to-bottom so the blur effect fades from fully
     opaque at the bottom to fully transparent ~7rem up the viewport.
     Sits below the buttons (z-index 1085 vs 1090/1100) and ignores
     pointer events so it never interferes with content. */
  /* (Gradient blur backdrop removed — bottom-fixed icons now get a
     standalone drop shadow instead, see _mobile-extras.scss and
     _utilities.scss.) */
  /* Sidebar on mobile: paint the page top with the brand yellow so the
     branding logo sits in a colored band. */
  .layout-sidebar {
    background-color: #ebe04d;
    padding-bottom: 0;
  }
  .sidebar__branding {
    margin-bottom: 0;
    padding-top: var(--space-md);
    padding-bottom: var(--space-md);
    min-height: 8rem;
  }
  .sidebar__tagline {
    margin-top: 0.25rem;
    font-size: 0.6rem;
  }
  /* Top color band behind the search + login/action area.
     Yellow accent so the existing dark-green pills/buttons contrast cleanly. */
  .site-header {
    background-color: #ebe04d;
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    padding-top: 0;
    padding-bottom: var(--space-md);
  }
  .site-header .header__search-input {
    background-color: #fff;
    font-size: var(--text-xs);
  }
  .site-header.layout-header {
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.1);
  }
  body.user--anonymous .site-header {
    background-color: #ebe04d;
  }
  .header__actions {
    justify-content: center;
  }
  .header__public-btn__label {
    padding-left: 0.25rem;
  }
  /* Request-access form — stack action buttons vertically with no offset
     so the Cancel button doesn't push beyond the form width. */
  #organizing-lab-request-training-access .form-actions {
    flex-direction: column;
  }
  #edit-cancel {
    margin-left: 0;
  }
  /* Main content card: full natural height, no inner scrollbar on mobile */
  #block-organizing-lab-content {
    height: auto;
    overflow: visible;
  }
  /* Resource cards — drop the wide minimums that made sense on desktop.
     Stacked module-page cards get a 1rem gap; the /resources grid uses
     its own `gap` so cards there reset to zero. */
  .resource-card {
    min-width: 0;
    margin-bottom: 1rem;
  }
  .page--resources .resource-card {
    margin-bottom: 0;
  }
  .node--type-module .resource-card {
    min-width: 0;
  }
  .resource-grid {
    grid-template-columns: 1fr;
  }
  /* Module page resource links: full-width, centered pills on mobile. */
  .resource-card__content a {
    width: 100%;
    text-align: center !important;
    line-height: 1.5;
    justify-content: center;
  }
  /* Resource Hub portal page (/) — stack the three cards */
  .portal-page {
    padding: var(--space-lg) var(--space-md);
    gap: var(--space-md);
  }
  .portal-cards {
    flex-direction: column;
    align-items: center;
    gap: var(--space-md);
    width: 100%;
  }
  .portal-card {
    width: 100%;
    max-width: 22rem;
    aspect-ratio: auto;
    min-height: 14rem;
  }
  .portal-header__logo {
    max-width: 16rem;
  }
  /* Header: stack search and actions. Padding-top is zero to butt up
     against the yellow band that already wraps the sidebar above. */
  .site-header {
    padding-left: var(--space-md);
    padding-right: var(--space-md);
    flex-wrap: wrap;
    gap: var(--space-sm);
  }
  .header__search {
    order: 2;
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    flex: none;
  }
  .header__actions {
    order: 1;
    width: 100%;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--space-xs);
  }
  .header__public-btn {
    font-size: 0.6rem;
    padding: 0.3rem 0.3rem 0.3rem var(--space-sm);
  }
  .header__login-pill {
    font-size: 0.6rem;
    padding: 0.2rem 0.2rem 0.2rem var(--space-xs);
    padding-left: 0.5rem !important;
  }
  .header__login-pill__icon {
    width: 1.3rem;
    height: 1.3rem;
  }
  .header__login-pill__action {
    padding: 0.3rem var(--space-sm);
  }
  /* Content area: slightly tighter padding */
  .content-area {
    padding: var(--space-md);
  }
  /* Greeting */
  .content-greeting {
    margin-bottom: var(--space-md);
  }
  .content-greeting__hello {
    font-size: var(--text-xl);
    margin-bottom: var(--space-xs);
  }
  .content-greeting__subtitle {
    font-size: var(--text-sm);
  }
  /* Page title block inside the content card */
  .content-block__title {
    font-size: var(--text-xl);
  }
  /* Tables → stacked cards on mobile.
     The JS in script.js copies each <th>'s text onto every body <td>
     as data-label="…"; here we hide thead, lay rows out as cards,
     and surface that label above each cell. The guide__table stays
     horizontally scrollable because it has free-form rows without a
     <th>-driven schema. */
  .messages-table,
  .alerts-table,
  .training-access-requests {
    display: block;
    width: 100%;
    overflow-x: visible;
    background: transparent;
    box-shadow: none;
  }
  .messages-table thead,
  .alerts-table thead,
  .training-access-requests thead {
    display: none;
  }
  .messages-table tbody,
  .alerts-table tbody,
  .training-access-requests tbody {
    display: block;
  }
  .messages-table tr,
  .alerts-table tr,
  .training-access-requests tr {
    display: block;
    padding: var(--space-md);
    margin-bottom: var(--space-sm);
    border: 2px solid rgb(0, 70, 34);
    border-radius: var(--radius-lg);
    background: #fff;
  }
  .messages-table tr.message-row--unread,
  .messages-table tr.alert-row--unread,
  .alerts-table tr.message-row--unread,
  .alerts-table tr.alert-row--unread,
  .training-access-requests tr.message-row--unread,
  .training-access-requests tr.alert-row--unread {
    background: rgba(235, 224, 77, 0.22);
    border-color: #ebe04d;
  }
  .messages-table td,
  .alerts-table td,
  .training-access-requests td {
    display: block;
    padding: 0.3rem 0;
    border: 0 !important;
    font-size: var(--text-sm);
    color: #004622;
    text-align: left;
    word-break: break-word;
    overflow-wrap: anywhere;
  }
  .messages-table td[data-label]::before,
  .alerts-table td[data-label]::before,
  .training-access-requests td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(0, 70, 34, 0.55);
    margin-bottom: 0.15rem;
  }
  .messages-table,
  .alerts-table,
  .training-access-requests {
    /* The Drupal table renders inline-style attributes on action buttons.
       Force them to wrap and stretch on a narrow card. */
  }
  .messages-table .button,
  .alerts-table .button,
  .training-access-requests .button {
    display: inline-block;
    margin: 0.15rem 0.25rem 0.15rem 0 !important;
  }
  /* The guide__table is free-form — keep horizontal scroll as a fallback. */
  .guide__table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  /* Filter heading (e.g. "Filtering by: GOOGLE DOC") — center it as a
     stacked pill on mobile so the label + term + clear-link read clearly. */
  .resource-filter-heading {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 1.5;
    border-radius: var(--radius-lg);
    gap: 0.35rem;
  }
  .resource-filter-heading__label {
    opacity: 0.5;
    text-transform: uppercase;
    font-size: 0.6rem;
  }
  .resource-filter-heading__clear {
    margin-left: 0;
    text-transform: uppercase;
  }
  /* Resource view toggle (grid/list switch) — full-width stacked on mobile. */
  .view-toggle {
    flex-direction: column;
  }
  .view-toggle__btn {
    width: 100%;
    text-align: center;
  }
  /* Message tabs: keep on one row, tighter typography on mobile */
  .message-tabs {
    flex-wrap: nowrap;
    gap: 0.25rem;
  }
  .message-tabs__tab, .message-tabs__compose {
    font-size: 0.55rem;
  }
  .message-tabs__compose {
    margin-left: 0;
  }
  .message-tabs__tab {
    background-color: rgba(0, 0, 0, 0.1);
  }
  .message-tabs__tab:hover, .message-tabs__compose:hover {
    background-color: rgb(235, 224, 77);
    color: #004622;
    text-decoration: none;
  }
  /* Messages + Alerts page cards: white background on mobile so the row
     cards read clearly against it. */
  .page--messages #block-organizing-lab-content,
  .page--messages-sent #block-organizing-lab-content,
  .page--alerts #block-organizing-lab-content,
  .route--organizing-lab-pages-alerts-view #block-organizing-lab-content {
    background-color: white;
  }
  .messages-empty {
    padding-inline: 0;
  }
  /* Compose form: a little breathing room between fields on mobile */
  .page--messages-compose .form-item {
    margin-bottom: 1rem;
  }
  /* Module detail page: tighter title */
  .module-title {
    font-size: 1.5rem;
  }
  .module-description {
    font-size: 0.95rem;
    margin-bottom: 1.25rem;
  }
  /* Calendar page handled separately in _calendar.scss at 900px */
  /* File-list rows: keep the colored left stripe, add a thin matching
     border on the other three sides so each row reads as a full card. */
  .file-list__item {
    border-left-width: 8px !important;
    border-top: 2px solid var(--card-accent);
    border-right: 2px solid var(--card-accent);
    border-bottom: 2px solid var(--card-accent);
    flex-wrap: wrap;
    gap: var(--space-sm);
  }
  .file-list__type-badge {
    border-radius: var(--radius-pill);
    width: 100%;
    text-align: center;
  }
  .file-list__module-context {
    text-align: center;
    line-height: 1.33;
  }
  .file-list__link {
    width: 100%;
    justify-content: center;
    text-align: center;
    white-space: normal;
    word-break: break-word;
    overflow-wrap: anywhere;
    line-height: 1.4;
    border-radius: var(--radius-lg);
  }
  .file-list__arrow {
    min-width: 24px;
    max-width: 24px;
  }
  /* View toggle (grid/list) — uppercase + smaller on mobile */
  .view-toggle__label,
  .view-toggle__btn {
    text-transform: uppercase;
    font-size: 0.65rem;
  }
  /* Calendar event title font size already adapts in _calendar.scss */
  /* Resource-card CTA padding tweaks on mobile (overrides the desktop pill). */
  .resource-card__cta {
    padding-left: 0.75rem !important;
    padding-right: 0.25rem;
  }
  /* Anonymous training-signup page (/training-signup/{group}) — tighten the
     form layout for narrow screens. */
  .training-signup__lede {
    font-size: 1.1rem;
    text-align: center;
    text-wrap: balance;
  }
  .training-signup__form-heading,
  .training-signup__steps-heading {
    text-align: center;
  }
  .training-signup__intro {
    padding-inline: 1.5rem;
  }
  #edit-submit {
    width: 100%;
    font-size: 0.65rem !important;
    padding-inline: 0.5rem !important;
  }
  #edit-mail,
  #edit-name {
    font-size: 0.65rem !important;
    text-align: center;
  }
  #edit-name {
    text-align: center !important;
  }
  #edit-mail--description,
  #edit-name--description {
    line-height: 1.5 !important;
  }
}
/* --------------------------------------------------------------------------
   Phone (max-width: 480px) — tighter spacing, smaller copy.
   -------------------------------------------------------------------------- */
@media (max-width: 480px) {
  .content-greeting__hello {
    font-size: 1.3rem;
  }
  /* Header login pills get TIGHT on small phones; hide the role label and
     keep just the lock-icon + LOGIN pill so they still fit. */
  .header__login-pill__label {
    display: none;
  }
  /* Portal header logo shrinks a bit more */
  .portal-header__logo {
    max-width: 13rem;
  }
  /* Toolbar toggle moves slightly inward */
  .toolbar-toggle {
    bottom: 0.85rem;
    right: 0.85rem;
  }
  .toolbar-toggle__icon {
    width: 2.25rem;
    height: 2.25rem;
  }
  /* Tighter content card */
  .content-block__title {
    font-size: 1.25rem;
  }
  /* Smaller request-access prompt buttons */
  .request-access-prompt__btn,
  .message-action-btn {
    font-size: 0.65rem;
  }
  /* Resource cards: tighter padding */
  .resource-card {
    padding: 1rem 1rem 4.5rem;
  }
  .resource-card__cta {
    width: calc(100% - 1.5rem);
    font-size: 0.7rem;
    padding: var(--space-xs) var(--space-sm);
  }
}
/*
 * Scratchpad for quick CSS while iterating in the IDE.
 * Anything written here is automatically merged into the proper component
 * partial (and this file emptied) on the next compile-and-push cycle.
 */