/* HRR: Defines reusable color and layout variables for the whole homepage. */
:root {
  /* HRR: Stores the main page background color. */
  --ink: #12352f;
  /* HRR: Stores the primary text color. */
  --muted: #5c766f;
  /* HRR: Stores the secondary text color. */
  --surface: #fbfff6;
  /* HRR: Stores the card and header surface color. */
  --line: rgba(18, 53, 47, 0.14);
  /* HRR: Stores the subtle border color used across panels. */
  --coral: #8fdc7f;
  /* HRR: Stores the warm accent color. */
  --teal: #15b8a6;
  /* HRR: Stores the cool accent color. */
  --amber: #f5cf45;
  /* HRR: Stores the highlight accent color. */
  --blue: #2c9f88;
  /* HRR: Stores the deep action accent color. */
  --shadow: 0 24px 70px rgba(21, 123, 104, 0.18);
  /* HRR: Stores the large soft shadow used by floating cards. */
}

/* HRR: Applies consistent box sizing so spacing calculations are predictable. */
* {
  /* HRR: Includes borders and padding in element width and height. */
  box-sizing: border-box;
}

/* HRR: Ensures hidden routed and authentication elements stay hidden despite component display styles. */
[hidden] {
  /* HRR: Forces hidden elements out of the layout. */
  display: none !important;
}

/* HRR: Enables smooth anchor scrolling and sets the base page background. */
html {
  /* HRR: Makes navigation links scroll smoothly to each section. */
  scroll-behavior: smooth;
  /* HRR: Sets the neutral background behind the page shell. */
  background: #f3fbf4;
}

/* HRR: Defines the default body typography and removes browser margin. */
body {
  /* HRR: Removes the default browser margin around the page. */
  margin: 0;
  /* HRR: Sets the body font stack for readable text. */
  font-family: "Segoe UI", Arial, sans-serif;
  /* HRR: Applies the primary text color to the whole page. */
  color: var(--ink);
  /* HRR: Paints layered gradients that give the page visual depth. */
  background: radial-gradient(circle at 18% 12%, rgba(143, 220, 127, 0.28), transparent 28%), radial-gradient(circle at 88% 18%, rgba(21, 184, 166, 0.24), transparent 30%), radial-gradient(circle at 58% 72%, rgba(245, 207, 69, 0.2), transparent 26%), linear-gradient(135deg, #f8fff6 0%, #ddf7ef 50%, #fff7c7 100%);
  /* HRR: Prevents horizontal scroll caused by carousel side-card overflow. */
  overflow-x: hidden;
}

/* HRR: Keeps the app content stacked vertically with generous page spacing. */
.page-shell {
  /* HRR: Sets a minimum full-screen height for the homepage. */
  min-height: 100vh;
  /* HRR: Adds bottom breathing room after the last section. */
  padding-bottom: 72px;
}

/* HRR: Styles the sticky header and navigation area. */
.site-header {
  /* HRR: Keeps the header visible while scrolling. */
  position: sticky;
  /* HRR: Pins the sticky header to the top of the viewport. */
  top: 0;
  /* HRR: Places the header above animated page content. */
  z-index: 20;
  /* HRR: Uses a three-column grid so the navigation can sit centered while the brand stays left. */
  display: grid;
  /* HRR: Gives the brand, centered navigation, and right spacer equal layout zones. */
  grid-template-columns: 1fr auto 1fr;
  /* HRR: Centers header items vertically inside the grid row. */
  align-items: center;
  /* HRR: Adds responsive spacing around the header content. */
  padding: 18px clamp(18px, 5vw, 72px);
  /* HRR: Applies a translucent surface so scrolled content softly shows behind it. */
  background: rgba(248, 255, 246, 0.78);
  /* HRR: Blurs the content behind the sticky header for a polished glass effect. */
  backdrop-filter: blur(18px);
  /* HRR: Adds a subtle divider line under the header. */
  border-bottom: 1px solid var(--line);
}

/* HRR: Styles the clickable brand title in the header. */
.brand {
  /* HRR: Aligns the brand mark and text horizontally. */
  display: inline-flex;
  /* HRR: Centers the brand mark and text vertically. */
  align-items: center;
  /* HRR: Adds space between the mark and title. */
  gap: 12px;
  /* HRR: Removes the default link underline. */
  text-decoration: none;
  /* HRR: Uses the main text color for brand consistency. */
  color: var(--ink);
  /* HRR: Uses a larger header title size for stronger brand visibility. */
  font-size: clamp(1.2rem, 2.2vw, 1.55rem);
  /* HRR: Uses a strong font weight for the brand title. */
  font-weight: 800;
  /* HRR: Places the brand in the left header grid column. */
  grid-column: 1;
  /* HRR: Keeps the brand aligned to the left edge of the header. */
  justify-self: start;
}

/* HRR: Styles the primary navigation links. */
.nav-links {
  /* HRR: Places navigation in the center header grid column. */
  grid-column: 2;
  /* HRR: Centers the navigation group within the full header. */
  justify-self: center;
  /* HRR: Lays navigation links out in a row. */
  display: flex;
  /* HRR: Allows links to wrap on narrow screens. */
  flex-wrap: wrap;
  /* HRR: Adds consistent spacing between links. */
  gap: 8px;
  /* HRR: Centers wrapped links inside the navigation row. */
  justify-content: center;
}

/* HRR: Styles each navigation link as a compact button-like target. */
.nav-links a {
  /* HRR: Removes default underlines from navigation links. */
  text-decoration: none;
  /* HRR: Uses the main text color for readable navigation. */
  color: var(--ink);
  /* HRR: Sets readable navigation text size. */
  font-size: 0.94rem;
  /* HRR: Uses semi-bold navigation labels. */
  font-weight: 700;
  /* HRR: Adds click target padding. */
  padding: 10px 12px;
  /* HRR: Rounds navigation hover surfaces lightly. */
  border-radius: 8px;
  /* HRR: Animates hover color and movement smoothly. */
  transition: background 180ms ease, transform 180ms ease;
}

/* HRR: Adds feedback when hovering over navigation links. */
.nav-links a:hover {
  /* HRR: Shows a subtle hover background. */
  background: rgba(21, 184, 166, 0.14);
  /* HRR: Moves the link slightly upward for tactile feedback. */
  transform: translateY(-2px);
}

/* HRR: Styles the small nav lock hint for Premium-only financial details. */
.nav-lock {
  /* HRR: Keeps the lock close to the Financials label. */
  display: inline-block;
  /* HRR: Adds a little breathing room before the lock. */
  margin-left: 4px;
  /* HRR: Keeps the lock visually compact in the nav. */
  font-size: 0.76rem;
}

/* HRR: Positions account controls in the right header column. */
.auth-area {
  /* HRR: Keeps the personal account dock visible beside the main page on desktop. */
  position: fixed;
  /* HRR: Places the personal dock below the sticky header. */
  top: 112px;
  /* HRR: Anchors the personal dock to the right side so the main page can stay centered. */
  right: 18px;
  /* HRR: Keeps the dock above ordinary page sections. */
  z-index: 18;
  /* HRR: Stacks personal controls vertically. */
  display: grid;
  /* HRR: Adds spacing between sign-in and signed-in controls. */
  gap: 10px;
  /* HRR: Gives the account dock a stable readable desktop width. */
  width: 240px;
  /* HRR: Adds comfortable spacing around the personal controls. */
  padding: 12px;
  /* HRR: Uses a translucent card surface consistent with the site. */
  background: rgba(248, 255, 246, 0.9);
  /* HRR: Blurs content behind the floating personal dock. */
  backdrop-filter: blur(18px);
  /* HRR: Adds a subtle dock outline. */
  border: 1px solid var(--line);
  /* HRR: Rounds the personal dock. */
  border-radius: 18px;
  /* HRR: Adds gentle depth to distinguish the dock from page content. */
  box-shadow: 0 18px 45px rgba(21, 123, 104, 0.16);
  /* HRR: Animates the personal dock width when visitors expand or collapse it. */
  transition: width 220ms ease, padding 220ms ease, border-radius 220ms ease;
}

/* HRR: Keeps direct personal dock controls inside the translucent outer shell. */
.auth-area > * {
  /* HRR: Prevents bordered inner controls from calculating wider than the personal dock. */
  max-width: 100%;
}

/* HRR: Shrinks the personal dock to icon-only controls by default. */
.auth-area.is-collapsed {
  /* HRR: Makes the compact personal dock wide enough for icon buttons and outlines. */
  width: 66px;
  /* HRR: Uses tighter padding around icon-only controls. */
  padding: 8px;
  /* HRR: Keeps the compact dock softly rounded without wasting width. */
  border-radius: 16px;
}

/* HRR: Styles the personal dock expand and collapse button. */
.personal-dock-toggle {
  /* HRR: Centers the arrow icon inside a stable compact button. */
  display: inline-grid;
  /* HRR: Centers the arrow glyph visually. */
  place-items: center;
  /* HRR: Gives the toggle a fixed square footprint. */
  width: 36px;
  /* HRR: Gives the toggle a fixed square footprint. */
  height: 36px;
  /* HRR: Aligns the toggle with the right edge in the expanded dock. */
  justify-self: end;
  /* HRR: Removes native button borders for the custom dock control. */
  border: 0;
  /* HRR: Rounds the compact toggle button. */
  border-radius: 10px;
  /* HRR: Uses a readable teal-tinted surface for the dock toggle. */
  background: rgba(21, 184, 166, 0.12);
  /* HRR: Uses the primary ink color for the arrow. */
  color: var(--ink);
  /* HRR: Shows the toggle can be clicked. */
  cursor: pointer;
  /* HRR: Gives the arrow a clear readable size. */
  font-size: 1.35rem;
  /* HRR: Makes the arrow visually strong. */
  font-weight: 900;
  /* HRR: Animates hover and expanded-state rotation smoothly. */
  transition: transform 180ms ease, background 180ms ease;
}

/* HRR: Adds hover feedback to the personal dock toggle. */
.personal-dock-toggle:hover {
  /* HRR: Strengthens the toggle surface on hover. */
  background: rgba(21, 184, 166, 0.22);
}

/* HRR: Rotates the dock arrow so it points toward collapse when the dock is expanded. */
.auth-area:not(.is-collapsed) .personal-dock-toggle span {
  /* HRR: Turns the left arrow into a right-facing collapse arrow. */
  transform: rotate(180deg);
}

/* HRR: Centers the dock toggle inside the compact personal dock. */
.auth-area.is-collapsed .personal-dock-toggle {
  /* HRR: Keeps the icon-only toggle aligned with other compact controls. */
  justify-self: center;
}

/* HRR: Styles the compact community language selector inside the personal dock. */
.community-language-control {
  /* HRR: Aligns the language icon and completion selector. */
  display: inline-flex;
  /* HRR: Centers language control content vertically. */
  align-items: center;
  /* HRR: Adds compact spacing between language control parts. */
  gap: 6px;
  /* HRR: Lets the language control fill the personal dock between membership and My Space. */
  width: 100%;
  /* HRR: Adds a distinct but quiet language-control surface. */
  padding: 8px 9px;
  /* HRR: Adds a subtle boundary inside the personal dock. */
  border: 1px solid rgba(21, 123, 104, 0.16);
  /* HRR: Rounds the personal language-control row. */
  border-radius: 12px;
  /* HRR: Uses a soft translucent surface for the language row. */
  background: rgba(255, 255, 255, 0.72);
}

/* HRR: Styles the community language completion selector. */
.community-language-control select {
  /* HRR: Uses a light surface consistent with header controls. */
  background: rgba(255, 255, 255, 0.82);
  /* HRR: Adds a subtle border around the language selector. */
  border: 1px solid var(--line);
  /* HRR: Rounds the language selector. */
  border-radius: 999px;
  /* HRR: Adds a comfortable compact click target. */
  padding: 7px 10px;
  /* HRR: Uses strong readable language labels. */
  font-weight: 700;
  /* HRR: Uses the primary page text color. */
  color: var(--ink);
  /* HRR: Lets the readable language label use the remaining dock width. */
  flex: 1 1 auto;
  /* HRR: Prevents the selector from overflowing the narrow personal dock. */
  min-width: 0;
}

/* HRR: Converts the language selector to an icon-sized control when the personal dock is collapsed. */
.auth-area.is-collapsed .community-language-control {
  /* HRR: Centers the globe icon in the collapsed personal dock. */
  justify-content: center;
  /* HRR: Uses the same compact size as the other dock icon controls. */
  width: 48px;
  /* HRR: Keeps the collapsed language control stable beside other icon controls. */
  min-height: 42px;
  /* HRR: Removes extra horizontal padding from the icon-only language control. */
  padding: 8px;
}

/* HRR: Hides the readable language dropdown until the visitor expands the personal dock. */
.auth-area.is-collapsed .community-language-control select {
  /* HRR: Removes the select from the compact layout while preserving the globe trigger surface. */
  display: none;
}

/* HRR: Creates separate routed shared ecosystem page surfaces. */
.ecosystem-page {
  /* HRR: Keeps ecosystem pages within a readable desktop width. */
  width: min(1180px, calc(100% - 32px));
  /* HRR: Centers ecosystem pages below the sticky header. */
  margin: 40px auto 0;
  /* HRR: Adds generous space inside the routed page. */
  padding: clamp(24px, 4vw, 52px);
  /* HRR: Uses the shared bright glass surface. */
  background: rgba(251, 255, 246, 0.9);
  /* HRR: Adds a subtle boundary around ecosystem pages. */
  border: 1px solid var(--line);
  /* HRR: Rounds the large routed page surface. */
  border-radius: 30px;
  /* HRR: Adds depth consistent with existing homepage panels. */
  box-shadow: var(--shadow);
}

/* HRR: Pulls neighboring My Space panels together into one cohesive personal destination. */
.my-space-panel + .my-space-panel {
  /* HRR: Uses a smaller gap between account, profile, and shop panels. */
  margin-top: 18px;
}

/* HRR: Styles the in-page community translation section consistently with Financials. */
.translation-section {
  /* HRR: Adds visible separation below the Financials section. */
  margin-top: 22px;
  /* HRR: Adds comfortable spacing around translation contribution controls. */
  padding: 46px clamp(18px, 4vw, 42px);
  /* HRR: Uses a bright translucent homepage section surface. */
  background: rgba(255, 255, 255, 0.66);
  /* HRR: Adds a subtle section outline. */
  border: 1px solid rgba(21, 123, 104, 0.12);
  /* HRR: Rounds the translation section consistently with Financials. */
  border-radius: 8px;
  /* HRR: Adds soft section depth. */
  box-shadow: 0 22px 54px rgba(18, 53, 47, 0.08);
  /* HRR: Gives sticky-header anchor navigation comfortable clearance. */
  scroll-margin-top: 120px;
}

/* HRR: Styles the short explanation at the top of My Space. */
.ecosystem-intro {
  /* HRR: Keeps the My Space explanation readable without becoming too wide. */
  max-width: 720px;
  /* HRR: Uses the secondary text color for supporting copy. */
  color: var(--muted);
  /* HRR: Improves readability for the combined hub explanation. */
  line-height: 1.6;
}

/* HRR: Creates responsive shared ecosystem card grids. */
.ecosystem-grid {
  /* HRR: Uses responsive columns that collapse naturally. */
  display: grid;
  /* HRR: Fits cards to available width without tiny columns. */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  /* HRR: Adds consistent space between shared cards. */
  gap: 18px;
  /* HRR: Adds separation below ecosystem headings and controls. */
  margin-top: 22px;
}

/* HRR: Styles shared economy, translation, profile, and shop cards. */
.ecosystem-card {
  /* HRR: Adds comfortable card spacing. */
  padding: 22px;
  /* HRR: Uses a bright readable card surface. */
  background: #fff;
  /* HRR: Adds a subtle card outline. */
  border: 1px solid var(--line);
  /* HRR: Rounds shared ecosystem cards. */
  border-radius: 20px;
  /* HRR: Adds soft card depth. */
  box-shadow: 0 14px 36px rgba(21, 123, 104, 0.1);
}

/* HRR: Gives the redesigned profile preview a layered community identity surface. */
.profile-preview {
  /* HRR: Keeps the profile preview inside its parent column on narrow screens. */
  width: 100%;
  /* HRR: Prevents equipped cosmetic visuals from widening the profile card. */
  max-width: 100%;
  /* HRR: Lets profile grid children shrink instead of forcing horizontal overflow. */
  min-width: 0;
  /* HRR: Adds a subtle progression-themed background behind profile visuals. */
  background: radial-gradient(circle at 12% 5%, rgba(143, 220, 127, 0.24), transparent 32%), radial-gradient(circle at 95% 20%, rgba(44, 159, 136, 0.2), transparent 34%), #ffffff;
  /* HRR: Keeps profile visual sections stacked with consistent spacing. */
  display: grid;
  /* HRR: Adds breathing room between profile visual sections. */
  gap: 18px;
}

/* HRR: Applies a visible equipped static background cosmetic to the profile card. */
.profile-preview.has-equipped-background {
  /* HRR: Paints a richer layered background when a background cosmetic is equipped. */
  background: radial-gradient(circle at 18% 10%, rgba(245, 207, 69, 0.36), transparent 30%), radial-gradient(circle at 86% 8%, rgba(54, 142, 232, 0.22), transparent 34%), linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(228, 250, 244, 0.94));
}

/* HRR: Applies the initial static background theme with a distinct reviewable visual identity. */
.profile-preview.cosmetic-static-background-theme {
  /* HRR: Adds a soft patterned accent for the seeded static background item. */
  background: radial-gradient(circle at 20% 14%, rgba(245, 207, 69, 0.42), transparent 26%), radial-gradient(circle at 92% 18%, rgba(143, 220, 127, 0.28), transparent 30%), linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(229, 247, 255, 0.92));
}

/* HRR: Applies a visible equipped frame cosmetic to the profile card. */
.profile-preview.has-equipped-frame {
  /* HRR: Creates a stronger frame outline around equipped profile cosmetics. */
  border-color: rgba(21, 184, 166, 0.62);
  /* HRR: Adds a polished frame glow around the preview card. */
  box-shadow: 0 18px 42px rgba(21, 184, 166, 0.18), 0 0 0 4px rgba(245, 207, 69, 0.16);
}

/* HRR: Applies the initial animated frame cosmetic with a gentle visible pulse. */
.profile-preview.cosmetic-animated-profile-frame {
  /* HRR: Runs a restrained profile-frame animation for the seeded animated item. */
  animation: profile-frame-pulse 3.4s ease-in-out infinite;
}

/* HRR: Applies a visible equipped shape cosmetic to rank artwork. */
.profile-preview.has-equipped-shape .rank-emblem {
  /* HRR: Changes the rank emblem silhouette when a shape cosmetic is equipped. */
  border-radius: 50% 34% 48% 36%;
}

/* HRR: Applies the initial profile shape cosmetic with a stronger custom silhouette. */
.profile-preview.cosmetic-profile-shape-pack .rank-emblem {
  /* HRR: Gives the seeded shape item a clear asymmetrical profile emblem shape. */
  border-radius: 54% 32% 50% 35%;
  /* HRR: Adds a small rotation so the equipped shape reads as intentional. */
  transform: rotate(-2deg);
}

/* HRR: Arranges the rank emblem beside the user's identity and biography. */
.profile-identity {
  /* HRR: Places rank artwork and profile copy in one responsive row. */
  display: flex;
  /* HRR: Aligns the identity copy with the top of the rank emblem. */
  align-items: flex-start;
  /* HRR: Adds readable space beside the rank emblem. */
  gap: 16px;
}

/* HRR: Styles the current community rank name above the display name. */
.profile-rank-name {
  /* HRR: Displays the rank name as a compact progression label. */
  display: inline-block;
  /* HRR: Adds space below the rank name. */
  margin-bottom: 4px;
  /* HRR: Uses the teal accent for progression identity. */
  color: var(--teal);
  /* HRR: Makes the rank name easy to scan. */
  font-weight: 900;
  /* HRR: Uses compact uppercase-like letter spacing. */
  letter-spacing: 0.05em;
  /* HRR: Keeps the rank name secondary to the display name. */
  font-size: 0.78rem;
}

/* HRR: Removes default spacing from the redesigned profile display name. */
.profile-identity h3 {
  /* HRR: Keeps the display name aligned tightly with its rank label. */
  margin: 0;
  /* HRR: Gives the profile display name stronger visual presence. */
  font-size: 1.45rem;
}

/* HRR: Styles the biography inside the redesigned profile identity. */
.profile-bio {
  /* HRR: Adds compact space below the display name. */
  margin: 8px 0 0;
  /* HRR: Uses secondary readable text for biography content. */
  color: var(--muted);
  /* HRR: Preserves user-written biography line breaks. */
  white-space: pre-wrap;
  /* HRR: Improves biography readability. */
  line-height: 1.55;
}

/* HRR: Arranges active cosmetic chips beneath the profile bio. */
.profile-equipped-list {
  /* HRR: Places equipped cosmetic labels in a wrapping row. */
  display: flex;
  /* HRR: Allows cosmetic chips to wrap on narrow profile cards. */
  flex-wrap: wrap;
  /* HRR: Adds compact spacing between equipped cosmetic chips. */
  gap: 6px;
  /* HRR: Separates the equipped cosmetic row from the biography. */
  margin-top: 10px;
}

/* HRR: Styles one active equipped cosmetic chip. */
.profile-equipped-list span {
  /* HRR: Lets long equipped cosmetic labels shrink inside narrow profile cards. */
  min-width: 0;
  /* HRR: Prevents equipped cosmetic chips from exceeding the profile card width. */
  max-width: 100%;
  /* HRR: Adds compact chip padding for active cosmetic labels. */
  padding: 5px 8px;
  /* HRR: Uses a bright chip surface over cosmetic backgrounds. */
  background: rgba(255, 255, 255, 0.78);
  /* HRR: Adds a subtle active-cosmetic outline. */
  border: 1px solid rgba(21, 184, 166, 0.22);
  /* HRR: Rounds active cosmetic chips. */
  border-radius: 999px;
  /* HRR: Keeps chip labels compact. */
  font-size: 0.72rem;
  /* HRR: Makes equipped labels easy to scan. */
  font-weight: 800;
  /* HRR: Uses readable muted text inside active cosmetic chips. */
  color: var(--muted);
  /* HRR: Wraps long catalog names before they create horizontal overflow. */
  overflow-wrap: anywhere;
}

/* HRR: Displays one generated community-rank emblem from the shared sprite sheet. */
.rank-emblem {
  /* HRR: Prevents the emblem from shrinking beside long profile text. */
  flex: 0 0 auto;
  /* HRR: Gives the profile rank a strong visual size. */
  width: 92px;
  /* HRR: Keeps rank artwork square. */
  height: 92px;
  /* HRR: Loads the generated twenty-rank community emblem sprite sheet. */
  background-image: url("assets/ecosystem/community-rank-emblems.png");
  /* HRR: Scales the five-column by four-row sprite sheet into equal emblem cells. */
  background-size: 500% 400%;
  /* HRR: Prevents sprite artwork from repeating. */
  background-repeat: no-repeat;
  /* HRR: Rounds the visible rank artwork. */
  border-radius: 18px;
  /* HRR: Adds rank artwork depth. */
  box-shadow: 0 12px 28px rgba(18, 53, 47, 0.2);
}

/* HRR: Defines the animated profile frame pulse. */
@keyframes profile-frame-pulse {
  /* HRR: Starts the frame at its resting glow. */
  0%, 100% {
    /* HRR: Uses the base equipped-frame glow at animation endpoints. */
    box-shadow: 0 18px 42px rgba(21, 184, 166, 0.18), 0 0 0 4px rgba(245, 207, 69, 0.16);
  }

  /* HRR: Brightens the frame briefly midway through the pulse. */
  50% {
    /* HRR: Increases frame glow without shifting layout. */
    box-shadow: 0 22px 48px rgba(54, 142, 232, 0.24), 0 0 0 6px rgba(245, 207, 69, 0.22);
  }
}

/* HRR: Respects reduced-motion preference for equipped animated profile frames. */
@media (prefers-reduced-motion: reduce) {
  /* HRR: Stops cosmetic frame motion for users who prefer reduced movement. */
  .profile-preview.cosmetic-animated-profile-frame {
    /* HRR: Disables the nonessential frame pulse animation. */
    animation: none;
  }
}

/* HRR: Uses a compact rank emblem inside the personal dock. */
.rank-emblem-small {
  /* HRR: Keeps the personal-dock rank artwork compact. */
  width: 42px;
  /* HRR: Keeps the compact rank artwork square. */
  height: 42px;
  /* HRR: Uses a smaller corner radius in the compact dock. */
  border-radius: 10px;
  /* HRR: Uses lighter depth inside the personal dock. */
  box-shadow: 0 7px 16px rgba(18, 53, 47, 0.18);
}

/* HRR: Styles the personal-dock community-rank summary. */
.user-rank-summary {
  /* HRR: Places the compact rank artwork beside its name and level. */
  display: flex;
  /* HRR: Centers rank summary content vertically. */
  align-items: center;
  /* HRR: Adds compact space beside the rank artwork. */
  gap: 9px;
  /* HRR: Adds comfortable rank summary spacing. */
  padding: 8px 9px;
  /* HRR: Uses a subtle progression surface. */
  background: linear-gradient(135deg, rgba(143, 220, 127, 0.18), rgba(44, 159, 136, 0.14));
  /* HRR: Adds a subtle outline around the compact rank summary. */
  border: 1px solid rgba(21, 123, 104, 0.16);
  /* HRR: Rounds the compact rank summary. */
  border-radius: 12px;
}

/* HRR: Shows only the rank emblem while the personal dock is collapsed. */
.auth-area.is-collapsed .user-rank-summary {
  /* HRR: Centers the rank emblem inside the compact dock row. */
  justify-content: center;
  /* HRR: Gives the collapsed rank control a stable width. */
  width: 48px;
  /* HRR: Removes extra spacing beside the hidden rank text. */
  gap: 0;
  /* HRR: Uses compact padding that stays inside the outer dock. */
  padding: 4px;
}

/* HRR: Slightly reduces the rank emblem so it fits inside the collapsed rank control. */
.auth-area.is-collapsed .rank-emblem-small {
  /* HRR: Keeps the collapsed rank artwork inside the compact control width. */
  width: 38px;
  /* HRR: Keeps the collapsed rank artwork inside the compact control height. */
  height: 38px;
}

/* HRR: Stacks rank name and level inside the personal dock. */
.user-rank-summary > span:last-child {
  /* HRR: Places the rank name above its level detail. */
  display: grid;
  /* HRR: Adds a tiny gap between rank name and level detail. */
  gap: 2px;
}

/* HRR: Hides rank text while keeping the rank emblem visible in compact mode. */
.auth-area.is-collapsed .user-rank-summary > span:last-child {
  /* HRR: Removes rank name and skill-point detail until the dock is expanded. */
  display: none;
}

/* HRR: Uses muted compact text for personal-dock level details. */
.user-rank-summary small {
  /* HRR: Uses secondary text color for level and skill-point details. */
  color: var(--muted);
  /* HRR: Keeps dock progression details compact. */
  font-size: 0.68rem;
}

/* HRR: Styles the segmented XP progression panel. */
.profile-progress-panel {
  /* HRR: Adds comfortable space around XP progression. */
  padding: 14px;
  /* HRR: Uses a subtle cool progression surface. */
  background: rgba(44, 159, 136, 0.08);
  /* HRR: Adds a subtle progression outline. */
  border: 1px solid rgba(44, 159, 136, 0.16);
  /* HRR: Rounds the XP progression panel. */
  border-radius: 16px;
}

/* HRR: Places XP and next-rank details above the segmented progress bar. */
.profile-progress-header {
  /* HRR: Distributes XP and next-rank details across the panel. */
  display: flex;
  /* HRR: Allows progress details to wrap on narrow screens. */
  flex-wrap: wrap;
  /* HRR: Separates current XP from next-rank details. */
  justify-content: space-between;
  /* HRR: Adds compact space between wrapped details. */
  gap: 8px;
  /* HRR: Adds space below progress labels. */
  margin-bottom: 10px;
}

/* HRR: Styles secondary next-rank progress text. */
.profile-progress-header span {
  /* HRR: Allows long next-rank text to shrink inside narrow profile cards. */
  min-width: 0;
  /* HRR: Uses secondary text color for the next-rank detail. */
  color: var(--muted);
  /* HRR: Keeps next-rank detail compact. */
  font-size: 0.82rem;
  /* HRR: Makes next-rank detail readable. */
  font-weight: 700;
  /* HRR: Wraps next-rank names before they create horizontal overflow. */
  overflow-wrap: anywhere;
}

/* HRR: Creates the requested rectangular segmented XP progress bar. */
.profile-segmented-progress {
  /* HRR: Positions the level and XP label over the progression rectangles. */
  position: relative;
  /* HRR: Places XP segments in one evenly spaced row. */
  display: grid;
  /* HRR: Creates twelve equal progression rectangles. */
  grid-template-columns: repeat(12, 1fr);
  /* HRR: Adds a small gap between progression rectangles. */
  gap: 4px;
}

/* HRR: Styles locked XP progress segments. */
.profile-segmented-progress span {
  /* HRR: Gives each segment a readable bar height. */
  height: 30px;
  /* HRR: Rounds each progression rectangle lightly. */
  border-radius: 4px;
  /* HRR: Uses a muted locked-segment surface. */
  background: rgba(18, 53, 47, 0.12);
}

/* HRR: Places the current level and XP inside the segmented progress bar. */
.profile-progress-label {
  /* HRR: Overlays the requested level and XP label across the progress bar. */
  position: absolute;
  /* HRR: Stretches the overlay across all progression segments. */
  inset: 0;
  /* HRR: Centers the level and XP text inside the bar. */
  display: grid;
  /* HRR: Centers the level and XP label precisely. */
  place-items: center;
  /* HRR: Uses white text for contrast over filled and locked segments. */
  color: #ffffff;
  /* HRR: Adds a dark text shadow so the label remains readable over every segment. */
  text-shadow: 0 1px 4px rgba(18, 53, 47, 0.9);
  /* HRR: Keeps the progression label compact. */
  font-size: 0.78rem;
  /* HRR: Prevents the overlay from blocking progressbar interaction semantics. */
  pointer-events: none;
}

/* HRR: Fills reached XP segments with a green-to-blue progression gradient. */
.profile-segmented-progress span.is-filled {
  /* HRR: Uses the requested green-to-blue progression color. */
  background: linear-gradient(90deg, #61cf78, #21b8a7 58%, #368ee8);
  /* HRR: Adds a subtle glow to reached progression segments. */
  box-shadow: 0 3px 9px rgba(44, 159, 136, 0.25);
}

/* HRR: Arranges visual contribution statistics in compact cards. */
.profile-stat-grid {
  /* HRR: Uses three responsive contribution metric columns. */
  display: grid;
  /* HRR: Fits contribution metrics naturally on narrow profile cards. */
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  /* HRR: Adds compact spacing between contribution metrics. */
  gap: 9px;
}

/* HRR: Styles one visual contribution metric. */
.profile-stat-grid > div {
  /* HRR: Centers visual contribution content. */
  display: grid;
  /* HRR: Centers contribution text and icons. */
  place-items: center;
  /* HRR: Adds compact contribution card spacing. */
  gap: 4px;
  /* HRR: Adds comfortable contribution card padding. */
  padding: 12px 8px;
  /* HRR: Uses a bright contribution surface. */
  background: rgba(255, 255, 255, 0.82);
  /* HRR: Adds a subtle contribution card outline. */
  border: 1px solid var(--line);
  /* HRR: Rounds contribution metric cards. */
  border-radius: 14px;
}

/* HRR: Enlarges contribution metric values. */
.profile-stat-grid strong {
  /* HRR: Makes contribution counts easy to scan. */
  font-size: 1.15rem;
}

/* HRR: Styles contribution metric labels. */
.profile-stat-grid small {
  /* HRR: Uses secondary text color for metric labels. */
  color: var(--muted);
  /* HRR: Centers contribution metric labels. */
  text-align: center;
}

/* HRR: Styles badge and cosmetic visual sections. */
.profile-visual-section {
  /* HRR: Adds separation above gallery sections. */
  padding-top: 14px;
  /* HRR: Adds a subtle divider above gallery sections. */
  border-top: 1px solid var(--line);
}

/* HRR: Keeps gallery section headings compact. */
.profile-visual-section h4 {
  /* HRR: Adds compact spacing above and below gallery headings. */
  margin: 0 0 10px;
}

/* HRR: Arranges badge and cosmetic gallery items. */
.profile-gallery {
  /* HRR: Places visual collection items in responsive columns. */
  display: grid;
  /* HRR: Creates four compact visual collection columns. */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  /* HRR: Adds compact space between collection items. */
  gap: 8px;
}

/* HRR: Styles one locked badge or cosmetic placeholder. */
.profile-gallery-item {
  /* HRR: Centers gallery icon and label. */
  display: grid;
  /* HRR: Centers gallery content. */
  place-items: center;
  /* HRR: Adds compact space between icon and label. */
  gap: 4px;
  /* HRR: Adds gallery item spacing. */
  padding: 10px 5px;
  /* HRR: Uses a muted locked-item surface. */
  background: rgba(18, 53, 47, 0.06);
  /* HRR: Adds a subtle locked-item outline. */
  border: 1px solid var(--line);
  /* HRR: Rounds gallery collection items. */
  border-radius: 13px;
  /* HRR: Greys out unearned collection visuals. */
  filter: grayscale(1);
  /* HRR: Visually lowers locked collection items. */
  opacity: 0.45;
}

/* HRR: Highlights earned badges and owned cosmetics in full color. */
.profile-gallery-item.is-earned {
  /* HRR: Restores full color for earned collection visuals. */
  filter: none;
  /* HRR: Restores full visibility for earned collection visuals. */
  opacity: 1;
  /* HRR: Uses a colorful earned-item surface. */
  background: linear-gradient(135deg, rgba(143, 220, 127, 0.24), rgba(54, 142, 232, 0.16));
}

/* HRR: Enlarges collection gallery icons. */
.profile-gallery-item strong {
  /* HRR: Makes badge and cosmetic icons visually prominent. */
  font-size: 1.35rem;
}

/* HRR: Styles compact collection gallery labels. */
.profile-gallery-item small {
  /* HRR: Keeps gallery labels readable at compact size. */
  font-size: 0.68rem;
  /* HRR: Centers gallery labels. */
  text-align: center;
}

/* HRR: Creates a scrollable complete twenty-rank community journey. */
.profile-rank-journey {
  /* HRR: Arranges all ranks in compact journey cards. */
  display: grid;
  /* HRR: Uses two readable rank columns inside the profile preview. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  /* HRR: Adds compact spacing between rank journey cards. */
  gap: 8px;
  /* HRR: Limits the journey height while preserving access to all twenty ranks. */
  max-height: 390px;
  /* HRR: Enables contained scrolling for the complete rank journey. */
  overflow: auto;
  /* HRR: Adds room for the journey scrollbar. */
  padding-right: 4px;
}

/* HRR: Styles one future rank journey card. */
.profile-rank-step {
  /* HRR: Aligns rank artwork beside its name and XP requirement. */
  display: grid;
  /* HRR: Creates an artwork column and readable rank-copy column. */
  grid-template-columns: auto 1fr;
  /* HRR: Adds compact spacing inside rank journey cards. */
  gap: 2px 8px;
  /* HRR: Centers rank journey content vertically. */
  align-items: center;
  /* HRR: Adds compact rank card spacing. */
  padding: 7px;
  /* HRR: Uses a muted future-rank surface. */
  background: rgba(18, 53, 47, 0.045);
  /* HRR: Adds a subtle future-rank outline. */
  border: 1px solid var(--line);
  /* HRR: Rounds rank journey cards. */
  border-radius: 12px;
  /* HRR: Greys out future rank artwork and copy. */
  filter: grayscale(1);
  /* HRR: Visually lowers future ranks. */
  opacity: 0.48;
}

/* HRR: Restores reached community ranks to full color. */
.profile-rank-step.is-reached {
  /* HRR: Shows reached rank artwork in full color. */
  filter: none;
  /* HRR: Shows reached ranks at full visibility. */
  opacity: 1;
}

/* HRR: Highlights the user's current community rank. */
.profile-rank-step.is-current {
  /* HRR: Uses a colorful border for the active rank. */
  border-color: rgba(21, 184, 166, 0.62);
  /* HRR: Adds a progression glow to the active rank. */
  box-shadow: 0 8px 18px rgba(21, 184, 166, 0.16);
}

/* HRR: Uses a compact emblem inside the complete rank journey. */
.rank-emblem-journey {
  /* HRR: Keeps journey rank artwork compact. */
  width: 42px;
  /* HRR: Keeps journey rank artwork square. */
  height: 42px;
  /* HRR: Places the artwork across the rank name and XP rows. */
  grid-row: span 2;
  /* HRR: Uses compact journey artwork corners. */
  border-radius: 9px;
  /* HRR: Removes heavy artwork depth in compact journey cards. */
  box-shadow: none;
}

/* HRR: Styles XP requirements inside the rank journey. */
.profile-rank-step small {
  /* HRR: Uses muted text for rank XP requirements. */
  color: var(--muted);
  /* HRR: Keeps rank XP requirements compact. */
  font-size: 0.68rem;
}

/* HRR: Lets wide ecosystem cards span available desktop columns. */
.ecosystem-card-wide {
  /* HRR: Spans two columns when the grid has room. */
  grid-column: span 2;
}

/* HRR: Arranges wallet and progression metrics in a responsive row. */
.ecosystem-metrics {
  /* HRR: Uses responsive compact metric columns. */
  display: grid;
  /* HRR: Fits metrics without forcing horizontal overflow. */
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  /* HRR: Adds spacing between metrics. */
  gap: 12px;
  /* HRR: Adds separation below the page introduction. */
  margin-top: 22px;
}

/* HRR: Styles one shared account metric. */
.ecosystem-metric {
  /* HRR: Stacks metric value and label. */
  display: grid;
  /* HRR: Adds compact space between value and label. */
  gap: 5px;
  /* HRR: Adds comfortable metric padding. */
  padding: 18px;
  /* HRR: Uses a subtle teal-tinted surface. */
  background: rgba(21, 184, 166, 0.1);
  /* HRR: Rounds metric cards. */
  border-radius: 16px;
}

/* HRR: Emphasizes shared metric values. */
.ecosystem-metric strong {
  /* HRR: Makes metric values easy to scan. */
  font-size: 1.35rem;
}

/* HRR: Styles reusable rows for donations and immutable ledger history. */
.ecosystem-row {
  /* HRR: Aligns row details and actions. */
  display: flex;
  /* HRR: Allows narrow rows to wrap. */
  flex-wrap: wrap;
  /* HRR: Distributes details and actions across the row. */
  justify-content: space-between;
  /* HRR: Centers row content vertically. */
  align-items: center;
  /* HRR: Adds compact row spacing. */
  gap: 10px;
  /* HRR: Adds vertical row padding. */
  padding: 12px 0;
  /* HRR: Separates neighboring rows. */
  border-bottom: 1px solid var(--line);
}

/* HRR: Stacks donation row detail lines. */
.ecosystem-row > div {
  /* HRR: Places donation amount above status detail. */
  display: grid;
  /* HRR: Adds compact line spacing. */
  gap: 4px;
}

/* HRR: Adds spacing before the saved-language management rows. */
.language-admin-list {
  /* HRR: Separates saved language rows from the save button above. */
  margin-top: 8px;
  /* HRR: Adds a soft boundary around the saved language editor list. */
  border-top: 1px solid var(--line);
  /* HRR: Adds breathing room above the first saved language row. */
  padding-top: 8px;
}

/* HRR: Keeps saved language rows compact inside the admin form card. */
.language-admin-row {
  /* HRR: Uses slightly tighter padding for form-embedded language rows. */
  padding: 10px 0;
}

/* HRR: Keeps saved language status text readable but secondary. */
.language-admin-row small {
  /* HRR: Uses muted color for enabled and disabled status descriptions. */
  color: var(--muted);
  /* HRR: Keeps language row status compact. */
  font-size: 0.78rem;
  /* HRR: Makes the status text easy to scan. */
  font-weight: 700;
}

/* HRR: Styles shared ecosystem action buttons. */
.ecosystem-row button,
.translation-submit-form button,
.translation-submission button,
.shop-card button,
.ecosystem-form button {
  /* HRR: Adds comfortable action padding. */
  padding: 9px 13px;
  /* HRR: Uses a subtle control outline. */
  border: 1px solid var(--line);
  /* HRR: Rounds ecosystem action controls. */
  border-radius: 10px;
  /* HRR: Uses a bright interactive surface. */
  background: #fff;
  /* HRR: Makes action labels strong and readable. */
  font-weight: 800;
  /* HRR: Signals interactive behavior. */
  cursor: pointer;
}

/* HRR: Styles disabled ecosystem actions clearly. */
.ecosystem-row button:disabled,
.shop-card button:disabled {
  /* HRR: Shows that the action cannot currently run. */
  opacity: 0.55;
  /* HRR: Removes interactive cursor feedback. */
  cursor: not-allowed;
}

/* HRR: Styles the private donation claim code. */
.claim-code {
  /* HRR: Displays the claim code as a separate readable block. */
  display: inline-block;
  /* HRR: Adds separation above the claim code. */
  margin-top: 12px;
  /* HRR: Uses a readable monospace font. */
  font-family: Consolas, monospace;
  /* HRR: Uses a larger claim code size. */
  font-size: 1.12rem;
  /* HRR: Adds letter spacing for easier manual entry. */
  letter-spacing: 0.08em;
}

/* HRR: Styles shared ecosystem forms. */
.ecosystem-form {
  /* HRR: Stacks form controls vertically. */
  display: grid;
  /* HRR: Adds consistent spacing between form controls. */
  gap: 13px;
}

/* HRR: Styles explanatory guidance above administrator configuration forms. */
.admin-config-intro {
  /* HRR: Separates configuration guidance from the tab controls. */
  margin-bottom: 18px;
  /* HRR: Adds comfortable space around shared-impact guidance. */
  padding: 16px 18px;
  /* HRR: Uses a subtle teal outline for administrator guidance. */
  border: 1px solid rgba(21, 184, 166, 0.28);
  /* HRR: Rounds the administrator guidance surface. */
  border-radius: 14px;
  /* HRR: Uses a soft teal surface to distinguish guidance from editable cards. */
  background: linear-gradient(135deg, rgba(21, 184, 166, 0.1), rgba(255, 255, 255, 0.72));
}

/* HRR: Keeps administrator guidance headings compact. */
.admin-config-intro h3 {
  /* HRR: Removes the default top margin from guidance headings. */
  margin: 0 0 6px;
}

/* HRR: Keeps administrator guidance paragraphs readable and compact. */
.admin-config-intro p {
  /* HRR: Removes default spacing around the guidance paragraph. */
  margin: 0;
  /* HRR: Uses secondary text for supporting guidance. */
  color: var(--muted);
  /* HRR: Improves readability for multi-sentence administrator guidance. */
  line-height: 1.55;
}

/* HRR: Styles practical explanations below administrator configuration fields. */
.admin-field-help {
  /* HRR: Pulls help text closer to the field it explains. */
  margin-top: -7px;
  /* HRR: Uses secondary text color for field explanations. */
  color: var(--muted);
  /* HRR: Keeps field guidance compact without becoming difficult to read. */
  font-size: 0.8rem;
  /* HRR: Improves readability of wrapped help text. */
  line-height: 1.45;
}

/* HRR: Highlights administrator guidance attached to risky publication or identifier settings. */
.admin-field-warning {
  /* HRR: Uses a warm warning color while retaining readable contrast. */
  color: #8a5a08;
  /* HRR: Gives important safeguards more visual weight. */
  font-weight: 800;
}

/* HRR: Distinguishes the editable profile card from its read-only progression preview. */
.profile-editor {
  /* HRR: Aligns the long profile editor from its top edge beside the profile preview. */
  align-self: start;
}

/* HRR: Places the profile editor title and primary save action together. */
.profile-editor-header {
  /* HRR: Aligns editor guidance and the immediately visible save action. */
  display: flex;
  /* HRR: Allows the editor header to wrap on narrow cards. */
  flex-wrap: wrap;
  /* HRR: Distributes the title and save action across the editor card. */
  justify-content: space-between;
  /* HRR: Centers the editor header content vertically. */
  align-items: center;
  /* HRR: Adds spacing between editor guidance and the save action. */
  gap: 12px;
  /* HRR: Separates the editor header from the first field. */
  padding-bottom: 14px;
  /* HRR: Adds a subtle divider below the visible save action. */
  border-bottom: 1px solid var(--line);
}

/* HRR: Removes default spacing around the profile editor heading. */
.profile-editor-header h3 {
  /* HRR: Keeps the profile editor title compact. */
  margin: 0;
}

/* HRR: Styles the save guidance below the profile editor title. */
.profile-editor-header p {
  /* HRR: Adds a small gap beneath the editor title. */
  margin: 5px 0 0;
  /* HRR: Uses secondary text color for save guidance. */
  color: var(--muted);
  /* HRR: Keeps the save guidance compact. */
  font-size: 0.86rem;
}

/* HRR: Makes profile save actions visually prominent and consistent. */
.profile-save-button {
  /* HRR: Uses the primary teal action color for profile persistence. */
  background: linear-gradient(135deg, #0fb981, var(--teal)) !important;
  /* HRR: Keeps the save label readable on the primary action surface. */
  color: #ffffff;
  /* HRR: Removes inherited subtle borders from the primary save action. */
  border: 0 !important;
  /* HRR: Adds comfortable save-action spacing. */
  padding: 11px 16px !important;
  /* HRR: Rounds the primary profile action. */
  border-radius: 12px !important;
  /* HRR: Makes the save label easy to identify. */
  font-weight: 900 !important;
  /* HRR: Adds clear depth to the primary save action. */
  box-shadow: 0 12px 26px rgba(21, 184, 166, 0.24);
}

/* HRR: Lets the final profile save action fill the editor width. */
.profile-save-button-bottom {
  /* HRR: Creates a large unmistakable save target after the final field. */
  width: 100%;
}

/* HRR: Shows profile save progress clearly while preventing duplicate submissions. */
.profile-save-button:disabled {
  /* HRR: Makes the saving state visibly inactive. */
  opacity: 0.62;
  /* HRR: Shows that duplicate clicks are temporarily unavailable. */
  cursor: wait;
}

/* HRR: Highlights the user's current social-slot allowance before social fields. */
.social-slot-guidance {
  /* HRR: Adds comfortable space around the social-slot explanation. */
  margin: 2px 0;
  /* HRR: Uses a soft warm surface for the token-economy limitation. */
  padding: 11px 12px;
  /* HRR: Adds a subtle outline around social-slot guidance. */
  border: 1px solid rgba(245, 207, 69, 0.45);
  /* HRR: Rounds the social-slot guidance box. */
  border-radius: 12px;
  /* HRR: Uses a warm translucent background. */
  background: rgba(245, 207, 69, 0.14);
  /* HRR: Keeps the guidance readable and compact. */
  line-height: 1.45;
  /* HRR: Uses strong text so the slot limitation is noticed before saving. */
  font-weight: 700;
}

/* HRR: Visually distinguishes profile fields that still require a skill-point unlock. */
.ecosystem-form label.is-locked {
  /* HRR: Adds space around locked field controls and their unlock action. */
  padding: 11px;
  /* HRR: Uses a muted locked-field surface. */
  background: rgba(18, 53, 47, 0.045);
  /* HRR: Adds a dashed boundary around locked fields. */
  border: 1px dashed rgba(18, 53, 47, 0.25);
  /* HRR: Rounds locked field surfaces. */
  border-radius: 12px;
}

/* HRR: Makes disabled locked profile controls visibly unavailable. */
.ecosystem-form label.is-locked input,
.ecosystem-form label.is-locked textarea {
  /* HRR: Greys out locked profile controls. */
  opacity: 0.52;
  /* HRR: Shows locked fields cannot yet be edited. */
  cursor: not-allowed;
}

/* HRR: Styles the permanent skill-point field unlock action. */
.profile-field-unlock {
  /* HRR: Uses a warm skill-point action surface. */
  background: rgba(245, 207, 69, 0.24) !important;
  /* HRR: Uses readable primary text for unlock actions. */
  color: var(--ink);
  /* HRR: Adds a warm skill-point outline. */
  border-color: rgba(245, 207, 69, 0.55) !important;
}

/* HRR: Stacks shared ecosystem form labels and controls. */
.ecosystem-form label,
.ecosystem-inline-field {
  /* HRR: Places labels above their controls. */
  display: grid;
  /* HRR: Adds compact spacing between label and control. */
  gap: 6px;
  /* HRR: Uses strong readable labels. */
  font-weight: 700;
}

/* HRR: Styles shared ecosystem inputs, selects, and textareas. */
.ecosystem-form input,
.ecosystem-form select,
.ecosystem-form textarea,
.ecosystem-inline-field select,
.translation-submit-form textarea {
  /* HRR: Uses the full available card width. */
  width: 100%;
  /* HRR: Adds comfortable field padding. */
  padding: 10px 12px;
  /* HRR: Adds a subtle control outline. */
  border: 1px solid var(--line);
  /* HRR: Rounds shared form fields. */
  border-radius: 10px;
  /* HRR: Uses inherited readable typography. */
  font: inherit;
}

/* HRR: Keeps checkbox labels in a compact horizontal row. */
.ecosystem-check {
  /* HRR: Places checkbox and explanation side by side. */
  display: flex !important;
  /* HRR: Aligns checkbox with its label. */
  align-items: center;
  /* HRR: Adds spacing beside the checkbox. */
  gap: 8px;
}

/* HRR: Keeps checkbox inputs compact. */
.ecosystem-check input {
  /* HRR: Restores natural checkbox width. */
  width: auto;
}

/* HRR: Styles shared action feedback. */
.ecosystem-message {
  /* HRR: Reserves feedback space without dominating the page. */
  min-height: 1.4em;
  /* HRR: Uses the secondary readable text color. */
  color: var(--muted);
  /* HRR: Makes action feedback easy to notice. */
  font-weight: 700;
}

/* HRR: Styles translation key identity labels. */
.translation-key-id {
  /* HRR: Uses compact uppercase-like key styling. */
  font-family: Consolas, monospace;
  /* HRR: Uses a smaller key label size. */
  font-size: 0.78rem;
  /* HRR: Uses the secondary page text color. */
  color: var(--muted);
}

/* HRR: Arranges translation submission forms. */
.translation-submit-form {
  /* HRR: Stacks translation text and submission action. */
  display: grid;
  /* HRR: Adds spacing between translation controls. */
  gap: 9px;
  /* HRR: Adds separation from active translation text. */
  margin-top: 14px;
}

/* HRR: Styles one open community translation submission. */
.translation-submission {
  /* HRR: Adds separation from the submission form. */
  margin-top: 12px;
  /* HRR: Adds compact submission padding. */
  padding: 12px;
  /* HRR: Uses a subtle review-state surface. */
  background: rgba(245, 207, 69, 0.13);
  /* HRR: Rounds voting submission blocks. */
  border-radius: 12px;
}

/* HRR: Styles the self-vote explanation shown in place of translation vote buttons. */
.translation-self-vote-message {
  /* HRR: Keeps the notice visually grouped with the submission score. */
  margin: 10px 0 0;
  /* HRR: Uses readable text color for the eligibility explanation. */
  color: var(--muted);
  /* HRR: Makes the rule explanation easy to scan without competing with actions. */
  font-weight: 700;
}

/* HRR: Makes translation submission actions visibly active before and during hover. */
.translation-submit-form .translation-submit-button {
  /* HRR: Uses a subtle two-stage surface that can slide into the primary action color. */
  background: linear-gradient(100deg, var(--teal) 0 48%, rgba(21, 184, 166, 0.1) 52% 100%);
  /* HRR: Keeps the resting action label readable on the pale interactive surface. */
  color: var(--ink);
  /* HRR: Gives the slide effect enough painted area to move across the button. */
  background-size: 215% 100%;
  /* HRR: Starts with the pale interactive portion visible. */
  background-position: 100% 0;
  /* HRR: Adds a recognizable teal outline in the resting state. */
  border-color: rgba(21, 184, 166, 0.48);
  /* HRR: Animates the action surface and small lift smoothly. */
  transition: background-position 260ms ease, color 220ms ease, transform 180ms ease, box-shadow 180ms ease;
}

/* HRR: Shows signed-out translation submit controls as unavailable. */
.translation-submit-form textarea:disabled,
.translation-submit-form .translation-submit-button:disabled {
  /* HRR: Mutes disabled translation fields and buttons. */
  opacity: 0.62;
  /* HRR: Uses the disabled cursor for unavailable translation submission controls. */
  cursor: not-allowed;
}

/* HRR: Slides the live translation submission action into its primary state. */
.translation-submit-form .translation-submit-button:not(:disabled):hover,
.translation-submit-form .translation-submit-button:not(:disabled):focus-visible {
  /* HRR: Reveals the teal portion of the sliding background. */
  background-position: 0 0;
  /* HRR: Keeps the label readable on the teal hover surface. */
  color: #ffffff;
  /* HRR: Lifts the live action slightly. */
  transform: translateY(-2px);
  /* HRR: Adds depth so the active button clearly differs from disabled controls. */
  box-shadow: 0 12px 24px rgba(21, 184, 166, 0.24);
}

/* HRR: Gives translation review controls clearly selectable resting states. */
.translation-submission .translation-vote-approve,
.translation-submission .translation-vote-qualify {
  /* HRR: Uses a pale positive surface for approval actions. */
  background: rgba(21, 184, 166, 0.14);
  /* HRR: Uses a readable positive text color. */
  color: #0b6d5d;
  /* HRR: Adds a positive action outline. */
  border-color: rgba(21, 184, 166, 0.42);
}

/* HRR: Gives translation rejection and veto controls clearly selectable resting states. */
.translation-submission .translation-vote-reject,
.translation-submission .translation-vote-veto {
  /* HRR: Uses a pale destructive surface for rejection actions. */
  background: rgba(201, 56, 45, 0.1);
  /* HRR: Uses a readable destructive text color. */
  color: #9d2d25;
  /* HRR: Adds a destructive action outline. */
  border-color: rgba(201, 56, 45, 0.36);
}

/* HRR: Highlights enabled translation review actions on hover and keyboard focus. */
.translation-submission button:not(:disabled):hover,
.translation-submission button:not(:disabled):focus-visible {
  /* HRR: Lifts selectable review actions slightly. */
  transform: translateY(-2px);
  /* HRR: Adds clear action depth without changing the meaning color. */
  box-shadow: 0 10px 20px rgba(18, 53, 47, 0.16);
}

/* HRR: Distinguishes token credits in the immutable ledger. */
.token-credit {
  /* HRR: Uses a positive readable green. */
  color: #177245;
  /* HRR: Emphasizes positive credits. */
  font-weight: 800;
}

/* HRR: Distinguishes token debits in the immutable ledger. */
.token-debit {
  /* HRR: Uses a readable debit color. */
  color: #a13a3a;
  /* HRR: Emphasizes token spending. */
  font-weight: 800;
}

/* HRR: Styles the sign-in opener and sign-out controls consistently. */
.auth-open-button,
.sign-out-button,
.admin-link,
.google-auth-button,
.auth-form-actions button,
.admin-project-save,
.admin-project-delete,
.admin-project-move,
.back-home-link {
  /* HRR: Removes default text decoration from button-like links. */
  text-decoration: none;
  /* HRR: Removes default button borders for custom controls. */
  border: 0;
  /* HRR: Uses a compact radius that matches the site controls. */
  border-radius: 8px;
  /* HRR: Adds comfortable clickable padding. */
  padding: 10px 13px;
  /* HRR: Uses bold text so account actions are easy to scan. */
  font-weight: 800;
  /* HRR: Uses the main text color by default. */
  color: var(--ink);
  /* HRR: Uses a bright surface that matches the site cards. */
  background: var(--surface);
  /* HRR: Shows account controls are interactive. */
  cursor: pointer;
  /* HRR: Adds a subtle border and shadow without introducing a heavy card. */
  box-shadow: inset 0 0 0 1px var(--line), 0 12px 30px rgba(21, 123, 104, 0.1);
  /* HRR: Animates account button hover feedback smoothly. */
  transition: transform 180ms ease, background 180ms ease, color 180ms ease;
}

/* HRR: Adds hover feedback to account action controls. */
.auth-open-button:hover,
.sign-out-button:hover,
.admin-link:hover,
.google-auth-button:hover,
.auth-form-actions button:hover,
.admin-project-save:hover,
.admin-project-delete:hover,
.admin-project-move:hover,
.back-home-link:hover {
  /* HRR: Uses the teal accent for active account controls. */
  background: var(--teal);
  /* HRR: Keeps hover text readable on teal. */
  color: #ffffff;
  /* HRR: Lifts account controls slightly on hover. */
  transform: translateY(-2px);
}

/* HRR: Aligns the header sign-in button icon and label neatly. */
.auth-open-button {
  /* HRR: Places the sign-in icon and text in one row. */
  display: inline-flex;
  /* HRR: Centers the sign-in icon vertically with the label. */
  align-items: center;
  /* HRR: Adds compact spacing between the icon and label. */
  gap: 8px;
}

/* HRR: Adds a small sign-in icon before the header sign-in label. */
.auth-open-button::before {
  /* HRR: Draws a simple right-arrow sign-in symbol without adding extra markup. */
  content: "\2192";
  /* HRR: Makes the sign-in symbol strong enough to read at button size. */
  font-weight: 900;
  /* HRR: Keeps the symbol aligned with the button text. */
  line-height: 1;
}

/* HRR: Shows only the sign-in arrow when the personal dock is collapsed for signed-out visitors. */
.auth-area.is-collapsed .auth-open-button {
  /* HRR: Centers the sign-in icon in the compact button. */
  justify-content: center;
  /* HRR: Gives the collapsed sign-in control a stable width. */
  width: 48px;
  /* HRR: Gives the collapsed sign-in control a stable height. */
  min-height: 42px;
  /* HRR: Removes text spacing when only the icon is visible. */
  gap: 0;
  /* HRR: Uses compact padding that stays inside the outer dock. */
  padding: 8px;
  /* HRR: Prevents the hidden sign-in label from affecting compact width. */
  font-size: 0;
}

/* HRR: Keeps the collapsed sign-in arrow readable after the label font size is hidden. */
.auth-area.is-collapsed .auth-open-button::before {
  /* HRR: Restores the sign-in arrow size in compact mode. */
  font-size: 1rem;
}

/* HRR: Arranges signed-in user information in the header. */
.user-summary {
  /* HRR: Stacks identity and membership details in a compact account block. */
  display: grid;
  /* HRR: Creates two rows for e-mail actions and membership details. */
  grid-template-rows: auto auto;
  /* HRR: Aligns account information to the left inside its header area for easier scanning. */
  justify-items: start;
  /* HRR: Adds comfortable spacing between the bordered account rows. */
  gap: 8px;
  /* HRR: Keeps the account block from taking more header width than needed. */
  max-width: 100%;
  /* HRR: Lets both account rows fill the personal dock width. */
  width: 100%;
}

/* HRR: Centers signed-in controls inside the compact personal dock. */
.auth-area.is-collapsed .user-summary {
  /* HRR: Aligns all compact signed-in controls to the middle of the dock. */
  justify-items: center;
}

/* HRR: Arranges the signed-in identity row beside the log-off action. */
.user-summary-main {
  /* HRR: Stacks the identity and log-off action in the narrow personal dock. */
  display: grid;
  /* HRR: Centers identity row items vertically. */
  align-items: center;
  /* HRR: Adds compact spacing between identity and log-off controls. */
  gap: 8px;
  /* HRR: Lets both identity controls fill the personal dock. */
  justify-content: stretch;
  /* HRR: Lets the row use the account block width. */
  width: 100%;
  /* HRR: Adds a light boundary around identity and log-off controls. */
  border: 1px solid rgba(21, 123, 104, 0.18);
  /* HRR: Uses compact curved corners for the identity group. */
  border-radius: 8px;
  /* HRR: Adds balanced spacing inside the identity group. */
  padding: 6px;
  /* HRR: Uses a bright translucent identity surface. */
  background: rgba(255, 255, 255, 0.72);
}

/* HRR: Turns the identity group into compact icon buttons when the dock is collapsed. */
.auth-area.is-collapsed .user-summary-main {
  /* HRR: Removes the grouped row border so compact controls do not appear wider than the dock. */
  border: 0;
  /* HRR: Removes grouped padding in favor of per-icon control sizing. */
  padding: 0;
  /* HRR: Uses a transparent group surface in compact mode. */
  background: transparent;
  /* HRR: Centers the compact identity and log-off controls. */
  justify-items: center;
}

/* HRR: Groups the user icon and e-mail text. */
.user-email-wrap {
  /* HRR: Keeps the icon and e-mail on one tidy row. */
  display: inline-flex;
  /* HRR: Centers the icon with the e-mail text. */
  align-items: center;
  /* HRR: Adds readable spacing after the icon. */
  gap: 7px;
  /* HRR: Allows the e-mail wrapper to shrink before overflowing the header. */
  min-width: 0;
  /* HRR: Lets the e-mail group use remaining identity-row space before log off. */
  flex: 1 1 auto;
  /* HRR: Adds a distinct curved surface around the signed-in identity. */
  border: 1px solid rgba(21, 184, 166, 0.18);
  /* HRR: Uses compact curved corners around the identity text. */
  border-radius: 8px;
  /* HRR: Adds readable spacing inside the identity surface. */
  padding: 7px 9px;
  /* HRR: Uses a soft teal tint to separate identity from actions. */
  background: rgba(21, 184, 166, 0.08);
}

/* HRR: Shows only the user icon from the signed-in identity when the dock is collapsed. */
.auth-area.is-collapsed .user-email-wrap {
  /* HRR: Centers the icon inside a fixed compact control. */
  justify-content: center;
  /* HRR: Gives the collapsed identity control a stable width. */
  width: 48px;
  /* HRR: Gives the collapsed identity control a stable height. */
  min-height: 42px;
  /* HRR: Removes text spacing when only the icon is visible. */
  gap: 0;
  /* HRR: Uses compact padding that stays inside the outer dock. */
  padding: 8px;
}

/* HRR: Styles the compact user and membership icons in the header. */
.user-info-icon,
.membership-icon {
  /* HRR: Centers each account icon in a stable circular badge. */
  display: inline-grid;
  /* HRR: Centers the symbol inside the badge. */
  place-items: center;
  /* HRR: Gives account icons a fixed compact width. */
  width: 22px;
  /* HRR: Gives account icons a fixed compact height. */
  height: 22px;
  /* HRR: Rounds icon badges into circles. */
  border-radius: 50%;
  /* HRR: Uses a soft teal icon background. */
  background: rgba(21, 184, 166, 0.14);
  /* HRR: Uses teal icon color for account meaning. */
  color: var(--teal);
  /* HRR: Keeps icon glyphs strong at small size. */
  font-weight: 900;
  /* HRR: Prevents icon badges from shrinking next to long text. */
  flex: 0 0 auto;
}

/* HRR: Styles the visible signed-in user e-mail. */
.user-email {
  /* HRR: Limits long e-mail addresses so the header does not overflow. */
  max-width: 150px;
  /* HRR: Truncates long e-mail addresses cleanly. */
  overflow: hidden;
  /* HRR: Shows an ellipsis when an e-mail is too long for the header. */
  text-overflow: ellipsis;
  /* HRR: Keeps e-mail addresses on one line on desktop. */
  white-space: nowrap;
  /* HRR: Uses a compact readable account text size. */
  font-size: 0.88rem;
  /* HRR: Makes the signed-in e-mail visually confident. */
  font-weight: 800;
}

/* HRR: Hides the signed-in e-mail text in the compact personal dock. */
.auth-area.is-collapsed .user-email {
  /* HRR: Removes the e-mail label so only the account icon remains visible. */
  display: none;
}

/* HRR: Arranges membership access details under the user identity row. */
.user-membership-row {
  /* HRR: Places the membership icon, status, detail, and admin link in one row. */
  display: flex;
  /* HRR: Centers membership row items vertically. */
  align-items: center;
  /* HRR: Adds compact spacing between membership items. */
  gap: 7px;
  /* HRR: Allows the membership row to wrap on narrower headers. */
  flex-wrap: wrap;
  /* HRR: Keeps membership details aligned to the left under the identity row. */
  justify-content: flex-start;
  /* HRR: Uses a smaller text rhythm for secondary account details. */
  font-size: 0.82rem;
  /* HRR: Lets the membership group match the identity row width. */
  width: 100%;
  /* HRR: Adds a light boundary around membership details. */
  border: 1px solid rgba(21, 123, 104, 0.16);
  /* HRR: Uses compact curved corners for the membership group. */
  border-radius: 8px;
  /* HRR: Adds balanced spacing inside the membership group. */
  padding: 7px 9px;
  /* HRR: Uses a soft warm surface to distinguish membership details. */
  background: rgba(245, 207, 69, 0.1);
}

/* HRR: Shows only the membership icon when the personal dock is collapsed. */
.auth-area.is-collapsed .user-membership-row {
  /* HRR: Centers the membership icon inside the compact control. */
  justify-content: center;
  /* HRR: Gives the collapsed membership control a stable width. */
  width: 48px;
  /* HRR: Gives the collapsed membership control a stable height. */
  min-height: 42px;
  /* HRR: Removes text spacing when only the icon is visible. */
  gap: 0;
  /* HRR: Uses compact padding that stays inside the outer dock. */
  padding: 8px;
}

/* HRR: Hides membership text labels in the compact personal dock. */
.auth-area.is-collapsed .user-status,
.auth-area.is-collapsed .user-access-detail,
.auth-area.is-collapsed .admin-link {
  /* HRR: Removes readable membership details until the dock is expanded. */
  display: none;
}

/* HRR: Styles the single navigation entry into the combined personal hub. */
.user-hub-link {
  /* HRR: Aligns the My Space icon and label in one clear action row. */
  display: inline-flex;
  /* HRR: Centers the My Space icon and label vertically. */
  align-items: center;
  /* HRR: Adds readable spacing between the icon and label. */
  gap: 8px;
  /* HRR: Gives the personal hub action the full dock width. */
  width: 100%;
  /* HRR: Adds a comfortable click target. */
  padding: 11px 13px;
  /* HRR: Removes the default link underline. */
  text-decoration: none;
  /* HRR: Uses strong readable action text. */
  font-weight: 900;
  /* HRR: Uses the primary page text color. */
  color: var(--ink);
  /* HRR: Uses a soft teal destination surface. */
  background: linear-gradient(135deg, rgba(143, 220, 127, 0.24), rgba(21, 184, 166, 0.18));
  /* HRR: Adds a subtle action outline. */
  border: 1px solid rgba(21, 123, 104, 0.18);
  /* HRR: Rounds the My Space destination control. */
  border-radius: 12px;
  /* HRR: Animates clear hover feedback. */
  transition: transform 180ms ease, background 180ms ease;
}

/* HRR: Shows only the My Space icon while the personal dock is collapsed. */
.auth-area.is-collapsed .user-hub-link {
  /* HRR: Centers the sparkle icon inside the compact hub button. */
  justify-content: center;
  /* HRR: Gives the collapsed hub control a stable width. */
  width: 48px;
  /* HRR: Gives the collapsed hub control a stable height. */
  min-height: 42px;
  /* HRR: Removes text spacing when only the icon is visible. */
  gap: 0;
  /* HRR: Uses compact padding that stays inside the outer dock. */
  padding: 8px;
}

/* HRR: Hides the My Space label in the compact personal dock. */
.auth-area.is-collapsed .user-hub-link span:last-child {
  /* HRR: Removes the hub label until the visitor expands the dock. */
  display: none;
}

/* HRR: Adds tactile hover feedback to the My Space action. */
.user-hub-link:hover {
  /* HRR: Lifts the My Space action slightly. */
  transform: translateY(-2px);
  /* HRR: Strengthens the teal destination surface on hover. */
  background: linear-gradient(135deg, rgba(143, 220, 127, 0.4), rgba(21, 184, 166, 0.3));
}

/* HRR: Styles the Basic or Admin status pill. */
.user-status {
  /* HRR: Uses a small pill shape for account status. */
  border-radius: 999px;
  /* HRR: Adds compact status pill spacing. */
  padding: 6px 10px;
  /* HRR: Uses a soft blue status background for Basic users. */
  background: rgba(47, 128, 237, 0.14);
  /* HRR: Uses blue text for Basic status. */
  color: #2f80ed;
  /* HRR: Makes the status label easy to scan. */
  font-weight: 900;
  /* HRR: Keeps the status pill compact. */
  font-size: 0.78rem;
}

/* HRR: Aligns sign-out icon and label inside the button. */
.sign-out-button {
  /* HRR: Places the log-off icon and label in one row. */
  display: inline-flex;
  /* HRR: Centers the log-off icon with the label. */
  align-items: center;
  /* HRR: Adds compact spacing between the log-off icon and label. */
  gap: 7px;
  /* HRR: Prevents the log-off label from splitting awkwardly. */
  white-space: nowrap;
}

/* HRR: Shows only the log-off icon when the personal dock is collapsed. */
.auth-area.is-collapsed .sign-out-button {
  /* HRR: Centers the sign-out icon in a compact button. */
  justify-content: center;
  /* HRR: Gives the collapsed sign-out control a stable width. */
  width: 48px;
  /* HRR: Gives the collapsed sign-out control a stable height. */
  min-height: 42px;
  /* HRR: Removes text spacing when only the icon is visible. */
  gap: 0;
  /* HRR: Uses compact padding that stays inside the outer dock. */
  padding: 8px;
}

/* HRR: Hides the log-off label in the compact personal dock. */
.auth-area.is-collapsed .sign-out-button span:last-child {
  /* HRR: Removes the text label until the dock is expanded. */
  display: none;
}

/* HRR: Styles the admin status pill when applied by Firebase Auth state. */
.user-status.is-admin {
  /* HRR: Uses a warm admin status background. */
  background: rgba(245, 207, 69, 0.24);
  /* HRR: Uses dark text for readable admin status. */
  color: var(--ink);
}

/* HRR: Styles Premium access status pills. */
.user-status.is-premium {
  /* HRR: Uses the teal gradient for active Premium access. */
  background: linear-gradient(135deg, #0fb981, var(--teal));
  /* HRR: Uses white text for Premium contrast. */
  color: #ffffff;
}

/* HRR: Styles Premium Trial access status pills. */
.user-status.is-trial {
  /* HRR: Uses a warm trial surface. */
  background: rgba(245, 207, 69, 0.3);
  /* HRR: Uses dark text on the warm trial surface. */
  color: var(--ink);
}

/* HRR: Styles the access countdown below signed-in user information. */
.user-access-detail {
  /* HRR: Keeps the access detail compact in the header. */
  font-size: 0.76rem;
  /* HRR: Uses muted text for the countdown detail. */
  color: var(--muted);
  /* HRR: Makes the countdown readable but secondary. */
  font-weight: 800;
  /* HRR: Keeps the countdown from stretching the header too far. */
  max-width: 180px;
  /* HRR: Allows the countdown to wrap when needed. */
  white-space: normal;
  /* HRR: Sets compact line height for wrapped countdowns. */
  line-height: 1.25;
}

/* HRR: Creates a full-screen overlay for the authentication panel. */
.auth-modal {
  /* HRR: Keeps the auth panel fixed over the page. */
  position: fixed;
  /* HRR: Covers the full viewport with the overlay. */
  inset: 0;
  /* HRR: Places the auth panel above page content. */
  z-index: 60;
  /* HRR: Centers the auth card in the viewport. */
  display: grid;
  /* HRR: Places the auth card in the middle of the overlay. */
  place-items: center;
  /* HRR: Adds a soft translucent backdrop behind the auth card. */
  background: rgba(18, 53, 47, 0.28);
  /* HRR: Blurs page content behind the modal for focus. */
  backdrop-filter: blur(10px);
  /* HRR: Adds responsive padding around the auth card. */
  padding: 22px;
}

/* HRR: Styles the authentication dialog card. */
.auth-card {
  /* HRR: Positions the close button relative to the auth card. */
  position: relative;
  /* HRR: Sets a compact readable auth card width. */
  width: min(420px, 100%);
  /* HRR: Adds comfortable spacing inside the auth card. */
  padding: 30px;
  /* HRR: Uses the shared bright surface for the auth card. */
  background: var(--surface);
  /* HRR: Adds a subtle border to the auth card. */
  border: 1px solid var(--line);
  /* HRR: Keeps the auth card radius consistent with the site. */
  border-radius: 8px;
  /* HRR: Adds depth so the auth card reads as an overlay. */
  box-shadow: var(--shadow);
}

/* HRR: Centers the small account access label in the authentication card. */
.auth-card .eyebrow {
  /* HRR: Centers the auth eyebrow so it lines up with the dialog title. */
  text-align: center;
}

/* HRR: Styles the visitor-facing authentication dialog title. */
#auth-title {
  /* HRR: Centers the sign-in title inside the pop-up card. */
  text-align: center;
  /* HRR: Uses a slightly smaller title size so the modal feels calmer. */
  font-size: clamp(1.55rem, 4vw, 2rem);
  /* HRR: Keeps the centered title close to the account label above it. */
  margin: 8px 0 0;
}

/* HRR: Positions the authentication panel close button. */
.auth-close-button {
  /* HRR: Places the close button in the auth card corner. */
  position: absolute;
  /* HRR: Offsets the close button from the top. */
  top: 12px;
  /* HRR: Offsets the close button from the right. */
  right: 12px;
  /* HRR: Sets a stable close button width. */
  width: 36px;
  /* HRR: Sets a stable close button height. */
  height: 36px;
  /* HRR: Removes the default close button border. */
  border: 0;
  /* HRR: Rounds the close button slightly. */
  border-radius: 8px;
  /* HRR: Uses a subtle close button background. */
  background: rgba(21, 184, 166, 0.12);
  /* HRR: Uses the main text color for the close symbol. */
  color: var(--ink);
  /* HRR: Shows the close button is clickable. */
  cursor: pointer;
  /* HRR: Sets a readable close icon size. */
  font-size: 1.4rem;
}

/* HRR: Makes the Google sign-in button span the auth card width. */
.google-auth-button {
  /* HRR: Uses the full auth card width for the primary auth method. */
  width: 100%;
  /* HRR: Adds spacing above the Google auth button. */
  margin-top: 20px;
  /* HRR: Centers the Google icon and label inside the button. */
  display: inline-flex;
  /* HRR: Aligns the Google icon with the button text. */
  align-items: center;
  /* HRR: Centers the Google sign-in contents horizontally. */
  justify-content: center;
  /* HRR: Adds breathing room between the Google icon and label. */
  gap: 10px;
  /* HRR: Uses a slightly smaller label so the Google action feels less heavy. */
  font-size: 0.92rem;
}

/* HRR: Adds a compact Google-style mark to the Google sign-in button. */
.google-auth-button::before {
  /* HRR: Shows a recognizable Google initial without loading an external icon. */
  content: "G";
  /* HRR: Makes the Google initial fit inside a small icon circle. */
  width: 20px;
  /* HRR: Keeps the Google initial circle square. */
  height: 20px;
  /* HRR: Centers the Google initial in the circle. */
  display: grid;
  /* HRR: Places the Google initial exactly in the middle. */
  place-items: center;
  /* HRR: Rounds the Google mark into an icon shape. */
  border-radius: 50%;
  /* HRR: Uses a white icon surface that resembles common Google sign-in buttons. */
  background: #ffffff;
  /* HRR: Uses the Google blue tone for the icon letter. */
  color: #4285f4;
  /* HRR: Makes the Google initial readable at small size. */
  font-size: 0.84rem;
  /* HRR: Makes the Google initial visually strong. */
  font-weight: 900;
  /* HRR: Adds a subtle inner border so the icon remains visible on white surfaces. */
  box-shadow: inset 0 0 0 1px rgba(18, 53, 47, 0.12);
}

/* HRR: Positions the Google Identity Services button inside the auth card. */
.google-auth-slot {
  /* HRR: Adds spacing above the Google sign-in slot. */
  margin-top: 20px;
  /* HRR: Keeps the official Google button centered in the auth panel. */
  display: grid;
  /* HRR: Centers the button without changing the official Google iframe contents. */
  justify-items: center;
}

/* HRR: Removes duplicate top spacing when the fallback Google button sits inside the slot. */
.google-auth-slot .google-auth-button {
  /* HRR: Lets the slot own the vertical spacing for both fallback and official Google buttons. */
  margin-top: 0;
}

/* HRR: Arranges the email auth form fields. */
.email-auth-form {
  /* HRR: Uses a grid so fields stack cleanly. */
  display: grid;
  /* HRR: Adds spacing between email auth fields and buttons. */
  gap: 10px;
  /* HRR: Adds spacing above the email auth form. */
  margin-top: 18px;
}

/* HRR: Styles labels inside the email authentication form. */
.email-auth-form label {
  /* HRR: Uses strong compact labels for auth fields. */
  font-weight: 800;
  /* HRR: Keeps auth labels readable without dominating the form. */
  font-size: 0.88rem;
}

/* HRR: Styles email and password inputs for Firebase Auth. */
.email-auth-form input {
  /* HRR: Uses full-width auth inputs. */
  width: 100%;
  /* HRR: Adds comfortable input padding. */
  padding: 12px;
  /* HRR: Uses a subtle border around inputs. */
  border: 1px solid var(--line);
  /* HRR: Rounds inputs to match the site controls. */
  border-radius: 8px;
  /* HRR: Uses readable input text sizing. */
  font-size: 1rem;
}

/* HRR: Holds the password input and visibility toggle in one stable row. */
.password-field {
  /* HRR: Positions the eye toggle relative to the password input. */
  position: relative;
  /* HRR: Keeps the password wrapper at the same width as other auth fields. */
  width: 100%;
}

/* HRR: Leaves space inside the password field for the eye toggle button. */
.password-field input {
  /* HRR: Prevents typed password text from sitting under the eye toggle. */
  padding-right: 48px;
}

/* HRR: Styles the password visibility toggle as a compact icon button. */
.password-toggle-button {
  /* HRR: Places the eye icon inside the right edge of the password field. */
  position: absolute;
  /* HRR: Aligns the toggle with the password input top edge. */
  top: 50%;
  /* HRR: Anchors the toggle to the right side of the password input. */
  right: 8px;
  /* HRR: Centers the toggle vertically within the password input. */
  transform: translateY(-50%);
  /* HRR: Sets a stable square click target for the icon. */
  width: 34px;
  /* HRR: Sets a stable square click target for the icon. */
  height: 34px;
  /* HRR: Removes default button padding so the icon stays centered. */
  padding: 0;
  /* HRR: Removes the default button border for a clean embedded control. */
  border: 0;
  /* HRR: Uses a transparent surface so the input remains visually simple. */
  background: transparent;
  /* HRR: Uses the muted text color for the inactive icon. */
  color: var(--muted);
  /* HRR: Centers the eye icon in the square target. */
  display: grid;
  /* HRR: Places the eye icon exactly in the middle. */
  place-items: center;
  /* HRR: Makes the icon large enough to recognize. */
  font-size: 1.05rem;
  /* HRR: Shows that the eye icon is interactive. */
  cursor: pointer;
}

/* HRR: Highlights the password toggle when the password is visible or keyboard-focused. */
.password-toggle-button[aria-pressed="true"],
.password-toggle-button:focus-visible {
  /* HRR: Uses the primary accent color to show the active visibility state. */
  color: var(--teal);
  /* HRR: Adds a subtle focus ring for keyboard users. */
  outline: 2px solid rgba(21, 184, 166, 0.28);
  /* HRR: Keeps the focus ring close to the icon button. */
  outline-offset: 2px;
}

/* HRR: Arranges the email auth buttons side by side. */
.auth-form-actions {
  /* HRR: Uses a responsive row for email auth actions. */
  display: flex;
  /* HRR: Allows auth action buttons to wrap on narrow screens. */
  flex-wrap: wrap;
  /* HRR: Adds spacing between email auth action buttons. */
  gap: 10px;
  /* HRR: Adds spacing above the email auth action buttons. */
  margin-top: 8px;
}

/* HRR: Lets email auth action buttons share available space. */
.auth-form-actions button {
  /* HRR: Makes auth action buttons flex evenly. */
  flex: 1;
  /* HRR: Aligns each auth action icon and label in a clean row. */
  display: inline-flex;
  /* HRR: Centers auth action icon and text horizontally. */
  justify-content: center;
  /* HRR: Aligns auth action icon and text vertically. */
  align-items: center;
  /* HRR: Adds compact spacing between auth action icons and labels. */
  gap: 8px;
}

/* HRR: Adds a small icon to the email sign-in action. */
.auth-form-actions button[data-email-sign-in]::before {
  /* HRR: Uses a right arrow to signal entering an existing account. */
  content: "\2192";
  /* HRR: Makes the sign-in action icon strong enough to scan. */
  font-weight: 900;
}

/* HRR: Adds a small icon to the email registration action. */
.auth-form-actions button[data-email-register]::before {
  /* HRR: Uses a plus sign to signal creating a new account. */
  content: "+";
  /* HRR: Makes the registration action icon strong enough to scan. */
  font-weight: 900;
}

/* HRR: Styles authentication feedback text. */
.auth-message {
  /* HRR: Reserves vertical rhythm below the auth controls. */
  margin: 16px 0 0;
  /* HRR: Uses muted text for auth feedback. */
  color: var(--muted);
  /* HRR: Keeps auth feedback readable. */
  line-height: 1.5;
}

/* HRR: Styles the guarded admin page view. */
.admin-page {
  /* HRR: Adds top and bottom spacing around the admin page. */
  padding: clamp(80px, 10vw, 140px) 0;
  /* HRR: Centers admin page text for a clear page-like view. */
  text-align: center;
}

/* HRR: Styles the admin page body copy. */
.admin-page p:not(.eyebrow) {
  /* HRR: Centers admin page copy and limits line length. */
  max-width: 620px;
  /* HRR: Centers admin page paragraphs. */
  margin: 18px auto 0;
  /* HRR: Uses muted text for supporting admin copy. */
  color: var(--muted);
  /* HRR: Sets comfortable admin page line height. */
  line-height: 1.7;
}

/* HRR: Adds spacing to the admin back-home link. */
.back-home-link {
  /* HRR: Displays the homepage link as an inline button. */
  display: inline-block;
  /* HRR: Adds spacing above the back-home control. */
  margin-top: 28px;
}

/* HRR: Lays out the admin project manager below the guarded page intro. */
.admin-project-manager {
  /* HRR: Keeps the admin project manager readable on wide screens. */
  max-width: 1040px;
  /* HRR: Centers the admin project manager inside the page. */
  margin: 36px auto 0;
  /* HRR: Aligns form text to the left for faster scanning. */
  text-align: left;
}

/* HRR: Lays out the compact admin toolbar above the editor. */
.admin-project-toolbar {
  /* HRR: Places the new-project button and position note in one row. */
  display: flex;
  /* HRR: Centers toolbar controls vertically. */
  align-items: center;
  /* HRR: Adds space between toolbar controls. */
  gap: 14px;
  /* HRR: Allows the toolbar to wrap on smaller screens. */
  flex-wrap: wrap;
  /* HRR: Adds spacing below the toolbar. */
  margin-bottom: 14px;
}

/* HRR: Styles the position guidance shown beside the new-project button. */
.admin-project-position-note {
  /* HRR: Removes default paragraph margin in the toolbar. */
  margin: 0;
  /* HRR: Uses muted text for helper copy. */
  color: var(--muted);
  /* HRR: Keeps the helper copy compact. */
  font-size: 0.92rem;
  /* HRR: Uses a readable line height when the helper wraps. */
  line-height: 1.5;
}

/* HRR: Styles the admin edit section as one master-detail work area. */
.admin-project-edit {
  /* HRR: Adds a bright surface behind project management controls. */
  background: rgba(250, 255, 246, 0.9);
  /* HRR: Adds a subtle border that matches other site panels. */
  border: 1px solid rgba(238, 255, 228, 0.82);
  /* HRR: Keeps admin work panels consistent with the site radius. */
  border-radius: 8px;
  /* HRR: Adds comfortable spacing inside admin work panels. */
  padding: 24px;
  /* HRR: Adds a soft shadow so the admin panels separate from the page. */
  box-shadow: 0 18px 46px rgba(18, 53, 47, 0.1);
  /* HRR: Uses a two-column layout for the project list and one editor. */
  display: grid;
  /* HRR: Keeps the side list compact while giving the editor more room. */
  grid-template-columns: minmax(240px, 0.8fr) minmax(0, 1.6fr);
  /* HRR: Adds separation between project navigation and the editor form. */
  gap: 22px;
  /* HRR: Pushes the edit section below admin feedback text. */
  margin-top: 16px;
}

/* HRR: Styles admin project section headings. */
.admin-project-manager h3 {
  /* HRR: Removes default top margin for tighter admin panels. */
  margin: 0 0 18px;
  /* HRR: Uses a strong readable admin heading size. */
  font-size: 1.35rem;
}

/* HRR: Styles the side list container for project titles and movement controls. */
.admin-project-sidebar {
  /* HRR: Keeps the project list visually separate from the editor. */
  border-right: 1px solid rgba(21, 123, 104, 0.16);
  /* HRR: Adds spacing between the border and the project rows. */
  padding-right: 18px;
}

/* HRR: Creates the responsive grid used by the reusable project editor form. */
.admin-project-editor {
  /* HRR: Uses a grid so project fields align cleanly. */
  display: grid;
  /* HRR: Fits two columns on desktop and one column on narrow screens. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  /* HRR: Adds compact space between admin fields. */
  gap: 14px;
  /* HRR: Removes default form margin so the editor fits the panel grid. */
  margin: 0;
}

/* HRR: Places the financial editor mode and pencil action above all financial fields. */
.admin-financial-editor-header {
  /* HRR: Makes the mode header span the full financial form width. */
  grid-column: 1 / -1;
  /* HRR: Aligns the mode label and pencil action in one clear row. */
  display: flex;
  /* HRR: Keeps the pencil action at the far edge of the editor. */
  justify-content: space-between;
  /* HRR: Centers the mode label and icon vertically. */
  align-items: center;
  /* HRR: Adds comfortable space when the header wraps. */
  gap: 12px;
  /* HRR: Separates the active mode from the financial data fields. */
  padding-bottom: 12px;
  /* HRR: Adds a subtle divider below the active mode. */
  border-bottom: 1px solid rgba(21, 123, 104, 0.16);
}

/* HRR: Styles the financial editor mode as a compact status label. */
.admin-financial-editor-header strong {
  /* HRR: Uses the teal accent to make the active mode easy to recognize. */
  color: var(--teal);
  /* HRR: Keeps the mode label compact inside the work-focused editor. */
  font-size: 0.95rem;
}

/* HRR: Groups the financial pencil and trash actions beside the editor mode label. */
.admin-financial-header-actions {
  /* HRR: Keeps the edit and delete icon buttons in one compact row. */
  display: flex;
  /* HRR: Adds clear spacing between the financial action buttons. */
  gap: 8px;
}

/* HRR: Styles the familiar pencil icon used to enter financial edit mode. */
.admin-financial-edit-button {
  /* HRR: Gives the icon a stable square click target. */
  width: 38px;
  /* HRR: Gives the icon a stable square click target. */
  height: 38px;
  /* HRR: Removes the default browser border. */
  border: 0;
  /* HRR: Uses compact site corners for the icon control. */
  border-radius: 8px;
  /* HRR: Uses teal to identify the deliberate edit action. */
  background: var(--teal);
  /* HRR: Keeps the pencil icon readable on teal. */
  color: #ffffff;
  /* HRR: Makes the pencil icon comfortably visible. */
  font-size: 1.15rem;
  /* HRR: Shows that the pencil is clickable. */
  cursor: pointer;
}

/* HRR: Styles the financial trash icon as an unmistakable destructive action. */
.admin-financial-delete-button {
  /* HRR: Gives the trash icon a stable square click target matching the pencil. */
  width: 38px;
  /* HRR: Gives the trash icon a stable square click target matching the pencil. */
  height: 38px;
  /* HRR: Removes the default browser border. */
  border: 0;
  /* HRR: Uses compact site corners for the icon control. */
  border-radius: 8px;
  /* HRR: Uses red to identify the destructive delete action. */
  background: #c9382d;
  /* HRR: Keeps the trash icon readable on red. */
  color: #ffffff;
  /* HRR: Makes the trash icon comfortably visible. */
  font-size: 1.15rem;
  /* HRR: Shows that the trash icon is clickable. */
  cursor: pointer;
}

/* HRR: Darkens the financial trash action on hover while preserving its destructive meaning. */
.admin-financial-delete-button:hover {
  /* HRR: Provides visible hover feedback in the destructive color family. */
  background: #a82d24;
}

/* HRR: Visually distinguishes a new financial draft from an existing-record edit. */
.admin-project-editor[data-editor-mode="new"] {
  /* HRR: Adds a clear green outline around the blank creation form. */
  outline: 2px solid rgba(21, 123, 104, 0.34);
  /* HRR: Keeps the outline separated from the form controls. */
  outline-offset: 10px;
}

/* HRR: Visually distinguishes an active financial edit from read-only viewing. */
.admin-project-editor[data-editor-mode="edit"] {
  /* HRR: Adds a warm outline that signals an existing record is being changed. */
  outline: 2px solid rgba(245, 177, 69, 0.52);
  /* HRR: Keeps the outline separated from the form controls. */
  outline-offset: 10px;
}

/* HRR: Styles each labeled field in the admin project form. */
.admin-project-field {
  /* HRR: Stacks field label text above its control. */
  display: flex;
  /* HRR: Keeps labels and controls in a vertical flow. */
  flex-direction: column;
  /* HRR: Adds spacing between labels and controls. */
  gap: 7px;
  /* HRR: Uses compact bold labels for scanning. */
  font-weight: 800;
  /* HRR: Keeps field labels readable without becoming large. */
  font-size: 0.88rem;
}

/* HRR: Lets long text fields span the full admin form width. */
.admin-project-field-wide {
  /* HRR: Makes description fields use both grid columns on desktop. */
  grid-column: 1 / -1;
}

/* HRR: Styles admin project inputs, selects, and textareas consistently. */
.admin-project-field input,
.admin-project-field select,
.admin-project-field textarea {
  /* HRR: Uses full-width controls inside each admin field. */
  width: 100%;
  /* HRR: Keeps browser sizing from overflowing grid columns. */
  box-sizing: border-box;
  /* HRR: Adds comfortable editable control padding. */
  padding: 11px 12px;
  /* HRR: Uses the compact site radius for form controls. */
  border-radius: 8px;
  /* HRR: Adds a subtle form border. */
  border: 1px solid var(--line);
  /* HRR: Uses the bright surface color for editable controls. */
  background: #ffffff;
  /* HRR: Uses the main text color inside form controls. */
  color: var(--ink);
  /* HRR: Keeps admin form text legible. */
  font: inherit;
}

/* HRR: Makes read-only financial fields clearly look unavailable for editing. */
.admin-project-editor[data-editor-mode="view"] .admin-project-field input:disabled,
.admin-project-editor[data-editor-mode="view"] .admin-project-field select:disabled,
.admin-project-editor[data-editor-mode="view"] .admin-project-field textarea:disabled {
  /* HRR: Uses a muted surface so viewed values cannot be mistaken for editable inputs. */
  background: #edf2ef;
  /* HRR: Softens viewed field text without reducing readability too far. */
  color: #53645f;
  /* HRR: Shows that clicking the field will not edit it. */
  cursor: not-allowed;
}

/* HRR: Styles the financial cancel action separately from the primary save action. */
.admin-financial-cancel {
  /* HRR: Uses a neutral surface for the non-destructive cancel action. */
  background: #e6ece9;
  /* HRR: Keeps the cancel label readable. */
  color: var(--ink);
}

/* HRR: Keeps admin textareas resizable only in the helpful vertical direction. */
.admin-project-field textarea {
  /* HRR: Lets admins expand long descriptions without breaking the grid width. */
  resize: vertical;
}

/* HRR: Styles admin create, save, movement, and delete feedback. */
.admin-project-message {
  /* HRR: Keeps admin feedback close to the project manager. */
  margin: 12px 0 0;
  /* HRR: Uses strong text so save state is noticeable. */
  font-weight: 800;
  /* HRR: Uses the teal color to connect feedback with admin actions. */
  color: var(--teal);
}

/* HRR: Stacks compact project title rows with clear spacing. */
.admin-project-list {
  /* HRR: Arranges project rows in a vertical list. */
  display: grid;
  /* HRR: Adds spacing between each project title row. */
  gap: 9px;
}

/* HRR: Styles each project title and movement row. */
.admin-project-list-item {
  /* HRR: Aligns the title button and movement controls in one compact row. */
  display: grid;
  /* HRR: Gives the title flexible space and keeps movement buttons compact. */
  grid-template-columns: minmax(0, 1fr) auto auto;
  /* HRR: Adds small spacing between row controls. */
  gap: 6px;
  /* HRR: Centers controls vertically inside each row. */
  align-items: center;
}

/* HRR: Highlights the selected project row in the side list. */
.admin-project-list-item.is-selected .admin-project-title-button {
  /* HRR: Uses the teal accent for the active project title. */
  background: var(--teal);
  /* HRR: Keeps selected project title text readable. */
  color: #ffffff;
}

/* HRR: Styles clickable project title buttons in the side list. */
.admin-project-title-button {
  /* HRR: Removes default button border for custom row styling. */
  border: 0;
  /* HRR: Keeps project title buttons compact and consistent. */
  border-radius: 8px;
  /* HRR: Adds tappable spacing inside project title buttons. */
  padding: 10px 11px;
  /* HRR: Aligns project title text to the left for scanning. */
  text-align: left;
  /* HRR: Uses a pale surface for non-selected project titles. */
  background: rgba(255, 255, 255, 0.76);
  /* HRR: Uses the main text color for project titles. */
  color: var(--ink);
  /* HRR: Makes project titles easy to scan. */
  font-weight: 800;
  /* HRR: Shows project title rows are clickable. */
  cursor: pointer;
  /* HRR: Prevents long project titles from overflowing their row. */
  overflow: hidden;
  /* HRR: Shows an ellipsis for long project titles. */
  text-overflow: ellipsis;
  /* HRR: Keeps each project title on one row in the side list. */
  white-space: nowrap;
}

/* HRR: Shows that financial list navigation is paused during edit and new-item modes. */
.admin-project-title-button:disabled {
  /* HRR: Softens unavailable record selectors while preserving their readable labels. */
  opacity: 0.5;
  /* HRR: Shows that another record cannot be selected until the draft is resolved. */
  cursor: not-allowed;
}

/* HRR: Styles compact movement buttons in the project side list. */
.admin-project-move {
  /* HRR: Uses smaller padding than primary action buttons. */
  padding: 8px 9px;
  /* HRR: Keeps movement buttons compact. */
  font-size: 0.78rem;
}

/* HRR: Softens disabled movement buttons at the top or bottom of the list. */
.admin-project-move:disabled {
  /* HRR: Shows the move action is unavailable at the list edge. */
  opacity: 0.42;
  /* HRR: Prevents pointer styling on unavailable movement buttons. */
  cursor: not-allowed;
}

/* HRR: Groups the save and delete buttons at the bottom of the editor. */
.admin-project-actions {
  /* HRR: Places editor actions on the full form width. */
  grid-column: 1 / -1;
  /* HRR: Aligns save and delete controls to the right. */
  justify-self: end;
  /* HRR: Uses a row for the paired editor actions. */
  display: flex;
  /* HRR: Allows actions to wrap on narrow screens. */
  flex-wrap: wrap;
  /* HRR: Adds spacing between save and delete controls. */
  gap: 10px;
}

/* HRR: Styles the primary save button. */
.admin-project-save {
  /* HRR: Uses the teal action color for project save actions. */
  background: var(--teal);
  /* HRR: Keeps save button text readable on teal. */
  color: #ffffff;
}

/* HRR: Styles the destructive project delete button. */
.admin-project-delete {
  /* HRR: Uses a red delete surface to clearly separate the destructive action. */
  background: #c9382d;
  /* HRR: Keeps delete button text readable on red. */
  color: #ffffff;
}

/* HRR: Keeps delete hover feedback in the destructive color family. */
.admin-project-delete:hover {
  /* HRR: Darkens the delete color instead of switching to the normal teal action color. */
  background: #a82d24;
}

/* HRR: Lays out the admin suggestion manager below the project manager. */
.admin-suggestion-manager {
  /* HRR: Keeps suggestion moderation aligned with the project manager width. */
  max-width: 1040px;
  /* HRR: Centers the suggestion manager inside the admin page. */
  margin: 34px auto 0;
  /* HRR: Aligns moderation text to the left for faster scanning. */
  text-align: left;
}

/* HRR: Styles the admin suggestion list. */
.admin-suggestion-list {
  /* HRR: Stacks suggestion moderation cards vertically. */
  display: grid;
  /* HRR: Adds spacing between moderation cards. */
  gap: 14px;
  /* HRR: Adds spacing below the moderation toolbar. */
  margin-top: 16px;
}

/* HRR: Styles one admin suggestion moderation card. */
.admin-suggestion-item {
  /* HRR: Uses the same bright admin panel surface as project controls. */
  background: rgba(250, 255, 246, 0.92);
  /* HRR: Adds a subtle border around moderation cards. */
  border: 1px solid rgba(238, 255, 228, 0.82);
  /* HRR: Rounds moderation cards consistently. */
  border-radius: 8px;
  /* HRR: Adds comfortable spacing inside each moderation card. */
  padding: 18px;
  /* HRR: Adds a soft admin-panel shadow. */
  box-shadow: 0 14px 34px rgba(18, 53, 47, 0.08);
}

/* HRR: Lays out an admin e-mail card with its optional removal action. */
.admin-email-item {
  /* HRR: Places the e-mail details and trash action in one clear row. */
  display: flex;
  /* HRR: Keeps the e-mail details and trash action vertically centered. */
  align-items: center;
  /* HRR: Pushes the optional removal action to the far edge. */
  justify-content: space-between;
  /* HRR: Adds comfortable separation between the e-mail and action. */
  gap: 16px;
}

/* HRR: Allows admin e-mail text to use the available card width. */
.admin-email-details {
  /* HRR: Lets long e-mail addresses wrap without pushing out the trash action. */
  min-width: 0;
  /* HRR: Lets the e-mail detail area grow across the card. */
  flex: 1;
}

/* HRR: Removes extra bottom spacing from the final line inside an admin e-mail detail block. */
.admin-email-details > :last-child {
  /* HRR: Keeps admin e-mail cards compact when a protection note is shown. */
  margin-bottom: 0;
}

/* HRR: Styles private moderation reasons and approval controls in the admin Suggestions tab. */
.admin-suggestion-moderation {
  /* HRR: Adds separation below the submitted suggestion text. */
  margin: 0 0 14px;
  /* HRR: Uses a warm private-review surface. */
  background: rgba(245, 177, 69, 0.14);
  /* HRR: Adds a clear private-review border. */
  border: 1px solid rgba(201, 124, 24, 0.3);
  /* HRR: Rounds the admin moderation panel consistently. */
  border-radius: 8px;
  /* HRR: Adds comfortable moderation-detail spacing. */
  padding: 12px;
  /* HRR: Lays out moderation details and approval action cleanly. */
  display: grid;
  /* HRR: Adds compact spacing between moderation details. */
  gap: 9px;
}

/* HRR: Keeps private moderation reason text compact. */
.admin-suggestion-moderation p {
  /* HRR: Removes default paragraph margins inside the moderation panel. */
  margin: 0;
  /* HRR: Uses readable private moderation detail line height. */
  line-height: 1.5;
}

/* HRR: Keeps the approval action aligned to its content width. */
.admin-suggestion-moderation button {
  /* HRR: Prevents the approval action from stretching across the full card. */
  width: fit-content;
}

/* HRR: Styles the suggestion text shown to the admin. */
.admin-suggestion-text {
  /* HRR: Removes default top margin inside moderation cards. */
  margin: 0 0 14px;
  /* HRR: Uses readable line height for submitted ideas. */
  line-height: 1.65;
  /* HRR: Preserves submitted line breaks. */
  white-space: pre-wrap;
}

/* HRR: Lays out admin suggestion controls. */
.admin-suggestion-form {
  /* HRR: Uses a responsive grid for status, reply, and save controls. */
  display: grid;
  /* HRR: Gives project, status, and reply controls clear desktop space before action buttons. */
  grid-template-columns: minmax(170px, 0.55fr) minmax(150px, 0.4fr) minmax(240px, 1fr) auto auto;
  /* HRR: Aligns controls to the bottom edge for a tidy row. */
  align-items: end;
  /* HRR: Adds compact spacing between moderation controls. */
  gap: 12px;
}

/* HRR: Styles labels inside admin suggestion controls. */
.admin-suggestion-form label {
  /* HRR: Stacks labels above their controls. */
  display: flex;
  /* HRR: Keeps label text and control in a vertical flow. */
  flex-direction: column;
  /* HRR: Adds spacing between label and control. */
  gap: 7px;
  /* HRR: Makes moderation labels easy to scan. */
  font-weight: 900;
  /* HRR: Keeps labels compact. */
  font-size: 0.88rem;
}

/* HRR: Styles admin suggestion inputs consistently. */
.admin-suggestion-form select,
.admin-suggestion-form textarea {
  /* HRR: Uses full-width controls within each grid cell. */
  width: 100%;
  /* HRR: Prevents padding from overflowing the grid. */
  box-sizing: border-box;
  /* HRR: Adds comfortable editable control padding. */
  padding: 11px 12px;
  /* HRR: Uses the site radius for moderation controls. */
  border-radius: 8px;
  /* HRR: Adds a subtle form border. */
  border: 1px solid var(--line);
  /* HRR: Uses a bright control surface. */
  background: #ffffff;
  /* HRR: Uses the main text color inside controls. */
  color: var(--ink);
  /* HRR: Inherits the site font. */
  font: inherit;
}

/* HRR: Lets admin reply boxes grow vertically. */
.admin-suggestion-form textarea {
  /* HRR: Allows vertical resizing for longer replies. */
  resize: vertical;
}

/* HRR: Styles the admin suggestion trash button as a compact destructive icon control. */
.admin-suggestion-delete {
  /* HRR: Sets a stable square size for the trash icon button. */
  width: 44px;
  /* HRR: Sets a stable square height for the trash icon button. */
  height: 44px;
  /* HRR: Removes the default browser button border. */
  border: 0;
  /* HRR: Uses the shared compact radius for admin action controls. */
  border-radius: 8px;
  /* HRR: Uses a red background to signal the destructive delete action. */
  background: #c9382d;
  /* HRR: Keeps the trash icon readable on the red background. */
  color: #ffffff;
  /* HRR: Centers the trash icon inside the button. */
  display: grid;
  /* HRR: Places the icon exactly in the middle of the button. */
  place-items: center;
  /* HRR: Sets a readable icon size without oversized text. */
  font-size: 1.15rem;
  /* HRR: Shows admins that the icon button is clickable. */
  cursor: pointer;
  /* HRR: Animates hover feedback for the destructive control. */
  transition: transform 180ms ease, background 180ms ease;
}

/* HRR: Adds hover feedback to the admin suggestion trash button. */
.admin-suggestion-delete:hover {
  /* HRR: Darkens the destructive button on hover. */
  background: #a82d24;
  /* HRR: Lifts the destructive button slightly on hover. */
  transform: translateY(-2px);
}

/* HRR: Defines shared section width and spacing. */
main {
  /* HRR: Sets a comfortable content width on large screens. */
  width: min(1180px, calc(100% - 36px));
  /* HRR: Centers the main content. */
  margin: 0 auto;
}

/* HRR: Keeps the homepage centered on desktop while the personal dock floats beside it. */
@media (min-width: 1181px) {
  /* HRR: Keeps the main page centered on wide screens. */
  main {
    /* HRR: Keeps the main content readable without shifting it away from center. */
    width: min(1180px, calc(100% - 36px));
    /* HRR: Balances the left side of the centered main column. */
    margin-left: auto;
    /* HRR: Balances the right side of the centered main column. */
    margin-right: auto;
  }
}

/* HRR: Keeps the personal account card inside the header on medium-width screens. */
@media (min-width: 821px) and (max-width: 1180px) {
  /* HRR: Prevents the desktop personal dock from covering tablet-width page content. */
  .auth-area {
    /* HRR: Returns the account card to the header grid at medium widths. */
    position: static;
    /* HRR: Places the account card in the right header column. */
    grid-column: 3;
    /* HRR: Aligns the account card to the right edge. */
    justify-self: end;
    /* HRR: Uses a compact stable width in the header. */
    width: 240px;
    /* HRR: Reduces card spacing slightly at medium widths. */
    padding: 8px;
  }
}

/* HRR: Styles the hero introduction section. */
.hero-section {
  /* HRR: Positions decorative animated elements relative to the hero. */
  position: relative;
  /* HRR: Creates a two-column hero layout on wide screens. */
  display: grid;
  /* HRR: Centers the hero title block after removing the decorative side accent. */
  grid-template-columns: 1fr;
  /* HRR: Centers hero content vertically. */
  align-items: center;
  /* HRR: Centers hero content horizontally so the headline wraps from the middle. */
  justify-items: center;
  /* HRR: Adds space between text and decorative motion. */
  gap: 42px;
  /* HRR: Sets hero top and bottom spacing. */
  padding: clamp(72px, 9vw, 128px) 0 clamp(56px, 8vw, 96px);
}

/* HRR: Keeps the hero text above decorative layers. */
.hero-copy {
  /* HRR: Places text above any animated accent layers. */
  position: relative;
  /* HRR: Ensures the hero text is painted over decorations. */
  z-index: 2;
  /* HRR: Centers the hero copy so wrapped title lines balance evenly. */
  text-align: center;
  /* HRR: Limits the hero copy width so the title wraps in a deliberate centered shape. */
  max-width: 760px;
  /* HRR: Centers the hero copy block within the hero section. */
  margin: 0 auto;
}

/* HRR: Styles small uppercase labels used in sections. */
.eyebrow {
  /* HRR: Removes default paragraph margin from eyebrow labels. */
  margin: 0 0 10px;
  /* HRR: Uses a compact readable label size. */
  font-size: 0.78rem;
  /* HRR: Makes labels visually distinct with uppercase letters. */
  text-transform: uppercase;
  /* HRR: Adds letter spacing only for short uppercase labels. */
  letter-spacing: 0.12em;
  /* HRR: Uses a strong font weight for labels. */
  font-weight: 800;
  /* HRR: Applies the teal accent color to labels. */
  color: var(--teal);
}

/* HRR: Styles the main hero headline. */
h1 {
  /* HRR: Removes default headline margins and adds controlled spacing below. */
  margin: 0 0 18px;
  /* HRR: Uses the display font for the homepage title. */
  font-family: "Segoe UI", Arial, sans-serif;
  /* HRR: Sets a large but bounded hero font size. */
  font-size: clamp(3rem, 7vw, 6.8rem);
  /* HRR: Tightens the hero headline line height without overlapping lines. */
  line-height: 0.96;
  /* HRR: Keeps letter spacing neutral for readability. */
  letter-spacing: 0;
  /* HRR: Applies a rich multi-color text treatment. */
  background: linear-gradient(120deg, var(--ink), var(--teal) 46%, var(--amber) 86%);
  /* HRR: Clips the gradient to the text shape in supporting browsers. */
  -webkit-background-clip: text;
  /* HRR: Clips the gradient to the text shape in standard syntax. */
  background-clip: text;
  /* HRR: Makes the gradient visible through the text. */
  color: transparent;
}

/* HRR: Styles the supporting hero paragraph. */
.hero-text {
  /* HRR: Limits the paragraph width for comfortable reading. */
  max-width: 640px;
  /* HRR: Centers the supporting text below the centered hero title. */
  margin: 0 auto;
  /* HRR: Sets readable intro text size. */
  font-size: clamp(1.05rem, 2vw, 1.35rem);
  /* HRR: Sets comfortable line spacing for the intro paragraph. */
  line-height: 1.65;
  /* HRR: Applies muted color so the headline remains dominant. */
  color: var(--muted);
}

/* HRR: Builds the animated decorative scene beside the hero text. */
.hero-orbit {
  /* HRR: Hides the former side decoration area so the hero title can center cleanly. */
  display: none;
  /* HRR: Positions orbit children inside this container. */
  position: relative;
  /* HRR: Gives the decorative scene a stable square format. */
  aspect-ratio: 1;
  /* HRR: Ensures the scene never grows too large. */
  max-width: 420px;
  /* HRR: Centers the scene inside its grid column. */
  justify-self: center;
  /* HRR: Gives the scene a soft radial glow. */
  background: radial-gradient(circle, rgba(251, 255, 246, 0.92), rgba(221, 247, 239, 0.26) 58%, transparent 62%);
}

/* HRR: Defines the animated floating hero shapes. */
.orbit {
  /* HRR: Positions each shape absolutely inside the hero scene. */
  position: absolute;
  /* HRR: Makes each shape a block-level animated object. */
  display: block;
  /* HRR: Rounds each shape into a soft rounded square. */
  border-radius: 28px;
  /* HRR: Applies the main floating-card shadow to each shape. */
  box-shadow: var(--shadow);
  /* HRR: Animates each shape with a gentle floating motion. */
  animation: floaty 6s ease-in-out infinite;
}

/* HRR: Styles the first hero orbit shape. */
.orbit-one {
  /* HRR: Sets the first shape width. */
  width: 44%;
  /* HRR: Sets the first shape height. */
  height: 44%;
  /* HRR: Places the first shape near the upper-left of the scene. */
  left: 8%;
  /* HRR: Places the first shape near the top of the scene. */
  top: 10%;
  /* HRR: Gives the first shape a warm gradient. */
  background: linear-gradient(135deg, var(--teal), var(--amber));
}

/* HRR: Styles the second hero orbit shape. */
.orbit-two {
  /* HRR: Sets the second shape width. */
  width: 50%;
  /* HRR: Sets the second shape height. */
  height: 50%;
  /* HRR: Places the second shape toward the lower-right. */
  right: 4%;
  /* HRR: Places the second shape below center. */
  bottom: 8%;
  /* HRR: Gives the second shape a cool gradient. */
  background: linear-gradient(135deg, #7bdc8a, var(--teal));
  /* HRR: Offsets the animation timing so shapes do not move together. */
  animation-delay: -2s;
}

/* HRR: Defines the shared floating animation for hero shapes. */
@keyframes floaty {
  /* HRR: Sets the starting transform state. */
  0% {
    /* HRR: Starts each shape at its default position and rotation. */
    transform: translate3d(0, 0, 0) rotate(0deg);
  }
  /* HRR: Sets the middle transform state. */
  50% {
    /* HRR: Moves and rotates each shape to create visible motion. */
    transform: translate3d(0, -18px, 0) rotate(7deg);
  }
  /* HRR: Sets the ending transform state. */
  100% {
    /* HRR: Returns each shape to its default position for a seamless loop. */
    transform: translate3d(0, 0, 0) rotate(0deg);
  }
}

/* HRR: Styles the section containing the carousel. */
.projects-section {
  /* HRR: Adds extra scroll landing space below the sticky header. */
  scroll-margin-top: 96px;
  /* HRR: Adds vertical spacing around the project section. */
  padding: 48px 0 72px;
}

/* HRR: Arranges section heading text and carousel buttons. */
.section-heading {
  /* HRR: Uses flex layout for heading and controls. */
  display: flex;
  /* HRR: Centers heading and controls vertically. */
  align-items: center;
  /* HRR: Spreads heading text and controls apart. */
  justify-content: space-between;
  /* HRR: Allows the row to wrap on narrow screens. */
  flex-wrap: wrap;
  /* HRR: Adds spacing when the row wraps. */
  gap: 18px;
  /* HRR: Adds spacing below the section heading. */
  margin-bottom: 26px;
}

/* HRR: Styles secondary section headings. */
h2 {
  /* HRR: Removes default heading margins. */
  margin: 0;
  /* HRR: Uses display font for section titles. */
  font-family: "Segoe UI", Arial, sans-serif;
  /* HRR: Sets a strong but contained section heading size. */
  font-size: clamp(2rem, 4vw, 3.4rem);
  /* HRR: Keeps the line height comfortable for section headings. */
  line-height: 1.05;
}

/* HRR: Styles the carousel button group. */
.carousel-controls {
  /* HRR: Lays the carousel buttons out in a row. */
  display: flex;
  /* HRR: Adds spacing between carousel buttons. */
  gap: 10px;
}

/* HRR: Styles each carousel control button. */
.control-button {
  /* HRR: Sets a stable button width. */
  width: 46px;
  /* HRR: Sets a stable button height. */
  height: 46px;
  /* HRR: Removes default button border. */
  border: 0;
  /* HRR: Rounds the button slightly for a polished control shape. */
  border-radius: 8px;
  /* HRR: Applies a bright button surface. */
  background: var(--surface);
  /* HRR: Uses the main text color for the arrow. */
  color: var(--ink);
  /* HRR: Sets a large readable arrow size. */
  font-size: 2rem;
  /* HRR: Sets a compact line height so the arrow sits centered. */
  line-height: 1;
  /* HRR: Shows the button is interactive. */
  cursor: pointer;
  /* HRR: Adds a subtle border to define the button edge. */
  box-shadow: inset 0 0 0 1px var(--line), 0 12px 30px rgba(21, 123, 104, 0.14);
  /* HRR: Animates hover and click states smoothly. */
  transition: transform 180ms ease, background 180ms ease, color 180ms ease;
}

/* HRR: Adds hover feedback to carousel buttons. */
.control-button:hover {
  /* HRR: Uses the blue accent color on hover. */
  background: var(--blue);
  /* HRR: Switches button text to white for contrast. */
  color: #ffffff;
  /* HRR: Lifts the button slightly for interaction feedback. */
  transform: translateY(-2px);
}

/* HRR: Defines the stage that displays the rotating project cards. */
.carousel-stage {
  /* HRR: Positions cards relative to the carousel frame. */
  position: relative;
  /* HRR: Sets a stable carousel height for the animated cards. */
  height: clamp(600px, 58vw, 700px);
  /* HRR: Gives Firestore image cards and status buttons enough stable height without layout jumps. */
  overflow: hidden;
  /* HRR: Adds perspective so side cards feel spatial. */
  perspective: 1200px;
}

/* HRR: Styles each project card inside the carousel. */
.project-card {
  /* HRR: Positions cards in the center before JavaScript assigns carousel states. */
  position: absolute;
  /* HRR: Places cards vertically near the top of the stage. */
  top: 24px;
  /* HRR: Places cards horizontally from the center point. */
  left: 50%;
  /* HRR: Sets responsive card width while keeping room for side previews. */
  width: min(430px, 72vw);
  /* HRR: Sets a stable card height. */
  min-height: 460px;
  /* HRR: Gives image, description, and status action enough room inside Firestore cards. */
  padding: 30px;
  /* HRR: Stacks image, text, and status action vertically inside each Firestore project card. */
  display: flex;
  /* HRR: Keeps project card content in a top-to-bottom layout. */
  flex-direction: column;
  /* HRR: Lets the centered status action sit cleanly after the description. */
  align-items: stretch;
  /* HRR: Uses a bright surface for card readability. */
  background: rgba(250, 255, 246, 0.94);
  /* HRR: Adds a subtle border around the card. */
  border: 1px solid rgba(238, 255, 228, 0.82);
  /* HRR: Rounds the card within the requested compact radius style. */
  border-radius: 8px;
  /* HRR: Adds shadow for depth and carousel layering. */
  box-shadow: var(--shadow);
  /* HRR: Hides cards from pointer events unless JavaScript marks them active or adjacent. */
  pointer-events: none;
  /* HRR: Animates card position, fade, scale, and blur as the carousel rotates. */
  transition: transform 520ms cubic-bezier(0.2, 0.8, 0.2, 1), opacity 520ms ease, filter 520ms ease, z-index 520ms step-end;
}

/* HRR: Styles the project image frame inside Firestore-backed cards. */
.project-card-media {
  /* HRR: Creates a taller stable image area so Firestore project screenshots are easier to see. */
  aspect-ratio: 4 / 3;
  /* HRR: Keeps the image frame compact inside the carousel card. */
  width: 100%;
  /* HRR: Adds breathing room between the image and project metadata. */
  margin-bottom: 18px;
  /* HRR: Clips project images to the rounded frame. */
  overflow: hidden;
  /* HRR: Rounds the image frame to match the card shape. */
  border-radius: 8px;
  /* HRR: Adds a soft neutral backdrop behind contained project images. */
  background: rgba(18, 53, 47, 0.06);
  /* HRR: Centers fallback text inside empty image frames. */
  display: grid;
  /* HRR: Places fallback text in the middle of the image frame. */
  place-items: center;
  /* HRR: Uses muted text for image fallback labels. */
  color: var(--muted);
  /* HRR: Makes fallback labels compact and confident. */
  font-weight: 800;
}

/* HRR: Styles project preview images pulled from Firestore image URLs. */
.project-card-media img {
  /* HRR: Makes project images fill the full media frame width. */
  width: 100%;
  /* HRR: Makes project images fill the full media frame height. */
  height: 100%;
  /* HRR: Shows the full project image without cropping important content. */
  object-fit: contain;
  /* HRR: Keeps contained images visually centered inside the media frame. */
  object-position: center;
  /* HRR: Adds a subtle backdrop so transparent or narrow images still feel framed. */
  background: linear-gradient(135deg, rgba(251, 255, 246, 0.92), rgba(221, 247, 239, 0.62));
  /* HRR: Displays images as block elements to avoid inline gaps. */
  display: block;
}

/* HRR: Styles the shared status action control on project cards. */
.project-status-action {
  /* HRR: Centers the status action in the card's middle action area. */
  align-self: center;
  /* HRR: Adds spacing between the description and the status action. */
  margin-top: 22px;
  /* HRR: Removes default link underlines and button decoration. */
  text-decoration: none;
  /* HRR: Removes the default button border. */
  border: 0;
  /* HRR: Creates a compact button-like action shape. */
  border-radius: 8px;
  /* HRR: Adds comfortable click and status label padding. */
  padding: 12px 28px;
  /* HRR: Uses bold text so status is easy to scan. */
  font-weight: 900;
  /* HRR: Keeps status labels readable at a compact size. */
  font-size: 0.95rem;
  /* HRR: Keeps status labels from breaking awkwardly. */
  white-space: nowrap;
  /* HRR: Shows disabled or linked status actions with the right cursor. */
  cursor: default;
  /* HRR: Animates enabled live link hover feedback smoothly. */
  transition: transform 180ms ease, box-shadow 180ms ease;
  /* HRR: Adds a subtle shadow that makes the action feel intentional. */
  box-shadow: 0 14px 34px rgba(18, 53, 47, 0.14);
}

/* HRR: Styles disabled in-scope project actions in blue. */
.project-status-action.status-in-scope {
  /* HRR: Uses a blue surface for planned in-scope projects. */
  background: #2f80ed;
  /* HRR: Uses white text for contrast on the blue status. */
  color: #ffffff;
}

/* HRR: Styles disabled ongoing project actions in yellow. */
.project-status-action.status-ongoing {
  /* HRR: Uses a yellow surface for projects that are actively ongoing. */
  background: var(--amber);
  /* HRR: Uses dark text for contrast on the yellow status. */
  color: var(--ink);
}

/* HRR: Styles completed project actions as animated live links. */
.project-status-action.status-completed {
  /* HRR: Uses a vivid teal-green surface for live completed projects. */
  background: linear-gradient(135deg, #0fb981, var(--teal));
  /* HRR: Uses white text for contrast on the live status. */
  color: #ffffff;
  /* HRR: Adds a pulse animation so live projects feel active. */
  animation: livePulse 1.8s ease-in-out infinite;
  /* HRR: Shows that completed project actions can be opened. */
  cursor: pointer;
}

/* HRR: Adds hover feedback only for enabled live project links. */
.project-status-action.status-completed:hover {
  /* HRR: Lifts the live link slightly on hover. */
  transform: translateY(-2px);
}

/* HRR: Defines the live button glow animation for completed projects. */
@keyframes livePulse {
  /* HRR: Starts the live pulse with a modest glow. */
  0% {
    /* HRR: Sets the initial live button shadow. */
    box-shadow: 0 14px 34px rgba(15, 185, 129, 0.22);
  }
  /* HRR: Brightens the live pulse midway through the animation. */
  50% {
    /* HRR: Expands the glow so completed projects feel active. */
    box-shadow: 0 18px 42px rgba(15, 185, 129, 0.42);
  }
  /* HRR: Returns the glow to the starting strength. */
  100% {
    /* HRR: Restores the initial live button shadow for a looping pulse. */
    box-shadow: 0 14px 34px rgba(15, 185, 129, 0.22);
  }
}

/* HRR: Shows the centered active project card at full visibility. */
.project-card.is-active {
  /* HRR: Enables interaction on the centered active card. */
  pointer-events: auto;
  /* HRR: Places the active card above side cards. */
  z-index: 5;
  /* HRR: Centers and enlarges the active card. */
  transform: translateX(-50%) translateZ(90px) scale(1);
  /* HRR: Makes the active card fully visible. */
  opacity: 1;
  /* HRR: Keeps the active card crisp. */
  filter: blur(0);
}

/* HRR: Keeps loading, empty, and error carousel cards from being widened by the 3D card transform. */
.project-card.project-status-card.is-active {
  /* HRR: Centers status cards without the perspective scale that can clip text on phones. */
  transform: translateX(-50%) translateZ(0) scale(1);
  /* HRR: Keeps status cards inside the visible carousel frame. */
  width: min(430px, calc(100% - 40px));
}

/* HRR: Shows the previous card half-visible on the left. */
.project-card.is-left {
  /* HRR: Enables hover targeting on the left preview card. */
  pointer-events: auto;
  /* HRR: Places the left card behind the active card. */
  z-index: 3;
  /* HRR: Moves, rotates, and scales the left card into a preview position. */
  transform: translateX(-112%) translateZ(-80px) rotateY(18deg) scale(0.9);
  /* HRR: Fades the left card to partial visibility. */
  opacity: 0.5;
  /* HRR: Softens the left card to enhance the fade-away effect. */
  filter: blur(0.8px) saturate(0.92);
}

/* HRR: Shows the next card half-visible on the right. */
.project-card.is-right {
  /* HRR: Enables hover targeting on the right preview card. */
  pointer-events: auto;
  /* HRR: Places the right card behind the active card. */
  z-index: 3;
  /* HRR: Moves, rotates, and scales the right card into a preview position. */
  transform: translateX(12%) translateZ(-80px) rotateY(-18deg) scale(0.9);
  /* HRR: Fades the right card to partial visibility. */
  opacity: 0.5;
  /* HRR: Softens the right card to enhance the fade-away effect. */
  filter: blur(0.8px) saturate(0.92);
}

/* HRR: Hides cards that are outside the three-card viewing window. */
.project-card.is-hidden {
  /* HRR: Places hidden cards behind visible cards. */
  z-index: 1;
  /* HRR: Keeps hidden cards centered but small during transitions. */
  transform: translateX(-50%) translateZ(-180px) scale(0.72);
  /* HRR: Fully fades hidden cards out. */
  opacity: 0;
  /* HRR: Adds blur so hidden cards vanish smoothly. */
  filter: blur(5px);
}

/* HRR: Lays out the project thumbnail overview below the carousel. */
.project-thumbnail-track {
  /* HRR: Places thumbnails in a horizontal strip that can wrap for many projects. */
  display: flex;
  /* HRR: Centers the thumbnail strip under the large active card. */
  justify-content: center;
  /* HRR: Lets thumbnails wrap instead of forcing horizontal page overflow. */
  flex-wrap: wrap;
  /* HRR: Adds compact spacing between thumbnail buttons. */
  gap: 10px;
  /* HRR: Pulls the thumbnail strip close to the carousel without touching it. */
  margin: -12px auto 0;
  /* HRR: Keeps the thumbnail overview from becoming wider than the content column. */
  max-width: 780px;
  /* HRR: Adds comfortable side padding on narrow screens. */
  padding: 0 18px;
}

/* HRR: Styles each compact project thumbnail button. */
.project-thumbnail {
  /* HRR: Creates a stable square thumbnail shape. */
  width: 58px;
  /* HRR: Matches the thumbnail height to the square width. */
  height: 58px;
  /* HRR: Removes default button padding so images fill the thumbnail frame. */
  padding: 0;
  /* HRR: Clips thumbnail images to the rounded frame. */
  overflow: hidden;
  /* HRR: Rounds thumbnails consistently with the project cards. */
  border-radius: 8px;
  /* HRR: Adds a soft neutral border around inactive thumbnails. */
  border: 2px solid rgba(18, 53, 47, 0.12);
  /* HRR: Uses the shared card surface for thumbnails without images. */
  background: rgba(250, 255, 246, 0.92);
  /* HRR: Uses muted text for numbered thumbnail fallbacks. */
  color: var(--muted);
  /* HRR: Makes numbered fallback thumbnails easy to scan. */
  font-weight: 900;
  /* HRR: Adds a small shadow so thumbnails feel tactile. */
  box-shadow: 0 10px 24px rgba(18, 53, 47, 0.1);
  /* HRR: Shows thumbnails are clickable project selectors. */
  cursor: pointer;
  /* HRR: Animates thumbnail highlight and hover feedback smoothly. */
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease, opacity 180ms ease;
  /* HRR: Slightly mutes inactive thumbnails so the active one stands out. */
  opacity: 0.72;
}

/* HRR: Styles image previews inside thumbnail buttons. */
.project-thumbnail img {
  /* HRR: Makes thumbnail images fill the button width. */
  width: 100%;
  /* HRR: Makes thumbnail images fill the button height. */
  height: 100%;
  /* HRR: Crops thumbnail images for quick visual recognition in the small frame. */
  object-fit: cover;
  /* HRR: Centers thumbnail crops around the project image middle. */
  object-position: center;
  /* HRR: Prevents inline image spacing from shifting thumbnail layout. */
  display: block;
}

/* HRR: Adds hover feedback for project thumbnails. */
.project-thumbnail:hover {
  /* HRR: Brightens hovered thumbnails so they feel interactive. */
  opacity: 1;
  /* HRR: Lifts hovered thumbnails slightly for tactile feedback. */
  transform: translateY(-2px);
  /* HRR: Strengthens the hover shadow without overpowering the active state. */
  box-shadow: 0 14px 30px rgba(18, 53, 47, 0.16);
}

/* HRR: Highlights the thumbnail that matches the centered project card. */
.project-thumbnail.is-active {
  /* HRR: Uses the teal accent border to identify the centered project. */
  border-color: var(--teal);
  /* HRR: Restores full visibility for the active thumbnail. */
  opacity: 1;
  /* HRR: Enlarges the active thumbnail slightly so it reads as selected. */
  transform: translateY(-4px) scale(1.08);
  /* HRR: Adds a stronger accent shadow behind the selected thumbnail. */
  box-shadow: 0 18px 34px rgba(18, 171, 159, 0.28);
}

/* HRR: Keeps keyboard focus visible on project thumbnails. */
.project-thumbnail:focus-visible {
  /* HRR: Adds a clear focus ring for keyboard navigation. */
  outline: 3px solid rgba(255, 107, 107, 0.55);
  /* HRR: Offsets the focus ring outside the thumbnail border. */
  outline-offset: 3px;
}

/* HRR: Styles small labels inside project cards. */
.card-kicker {
  /* HRR: Displays the label as its own line. */
  display: inline-block;
  /* HRR: Adds spacing below the label. */
  margin-bottom: 22px;
  /* HRR: Sets a compact label size. */
  font-size: 0.78rem;
  /* HRR: Uses bold text for the project number. */
  font-weight: 800;
  /* HRR: Makes the project number uppercase. */
  text-transform: uppercase;
  /* HRR: Adds spacing for the short uppercase label. */
  letter-spacing: 0.12em;
  /* HRR: Applies the coral accent color. */
  color: var(--coral);
}

/* HRR: Styles project card titles. */
.project-card h3 {
  /* HRR: Removes default title margins and adds controlled bottom spacing. */
  margin: 0 0 18px;
  /* HRR: Uses the display font for card titles. */
  font-family: "Segoe UI", Arial, sans-serif;
  /* HRR: Sets a strong card title size. */
  font-size: clamp(1.55rem, 3vw, 2.35rem);
  /* HRR: Keeps Firestore project titles strong without crowding image cards. */
  line-height: 1.04;
}

/* HRR: Styles project card body text. */
.project-card p {
  /* HRR: Removes default paragraph margins. */
  margin: 0;
  /* HRR: Applies muted text color for supporting copy. */
  color: var(--muted);
  /* HRR: Sets readable card paragraph size. */
  font-size: 1.02rem;
  /* HRR: Sets comfortable line height for card paragraphs. */
  line-height: 1.7;
  /* HRR: Uses a webkit box so long Firestore descriptions can be visually clamped. */
  display: -webkit-box;
  /* HRR: Limits long Firestore descriptions so status actions remain visible. */
  -webkit-line-clamp: 5;
  /* HRR: Sets the clamp direction for multi-line project descriptions. */
  -webkit-box-orient: vertical;
  /* HRR: Hides extra description text after the visual line limit. */
  overflow: hidden;
}

/* HRR: Lets carousel status cards wrap their loading and error text naturally. */
.project-card.project-status-card p {
  /* HRR: Uses normal block text for short status messages instead of card description clamping. */
  display: block;
  /* HRR: Removes the Firestore description line clamp from status messages. */
  -webkit-line-clamp: unset;
  /* HRR: Removes the webkit box orientation from status messages. */
  -webkit-box-orient: initial;
  /* HRR: Allows status message text to wrap inside the card. */
  overflow: visible;
  /* HRR: Prevents long status words from clipping the card. */
  overflow-wrap: anywhere;
}

/* HRR: Styles the supporters and suggestions placeholder grid. */
.info-grid {
  /* HRR: Adds scroll landing space below the sticky header. */
  scroll-margin-top: 96px;
  /* HRR: Creates responsive columns for the two placeholder panels. */
  display: grid;
  /* HRR: Fits one or two panels depending on available width. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  /* HRR: Adds spacing between panels. */
  gap: 22px;
}

/* HRR: Styles the placeholder information panels. */
.info-panel {
  /* HRR: Adds internal spacing to each panel. */
  padding: 30px;
  /* HRR: Uses a translucent surface for depth. */
  background: rgba(250, 255, 246, 0.82);
  /* HRR: Adds a subtle border around panels. */
  border: 1px solid rgba(238, 255, 228, 0.82);
  /* HRR: Rounds panels slightly. */
  border-radius: 8px;
  /* HRR: Adds a soft shadow under panels. */
  box-shadow: 0 18px 52px rgba(21, 123, 104, 0.12);
}

/* HRR: Adds scroll offset for panel anchors. */
.info-panel {
  /* HRR: Prevents sticky header overlap when jumping to panel anchors. */
  scroll-margin-top: 96px;
}

/* HRR: Styles placeholder lists inside panels. */
.info-panel ul {
  /* HRR: Removes default bottom margin while keeping top spacing. */
  margin: 22px 0 0;
  /* HRR: Adds left padding for list bullets. */
  padding-left: 20px;
  /* HRR: Applies muted text color to placeholder list entries. */
  color: var(--muted);
  /* HRR: Sets readable list line height. */
  line-height: 1.9;
}

/* HRR: Styles the suggestions access message. */
.suggestion-access-message {
  /* HRR: Adds controlled spacing around the suggestion access copy. */
  margin: 16px 0 0;
  /* HRR: Adds a soft access message surface. */
  padding: 12px 14px;
  /* HRR: Rounds the access message surface. */
  border-radius: 8px;
  /* HRR: Uses a positive teal-tinted access background by default. */
  background: rgba(21, 184, 166, 0.12);
  /* HRR: Uses the main text color for readable access copy. */
  color: var(--ink);
  /* HRR: Makes access copy easy to scan. */
  font-weight: 800;
  /* HRR: Sets readable access copy line height. */
  line-height: 1.5;
}

/* HRR: Styles the suggestion message when Basic or signed-out users cannot submit. */
.suggestion-access-message.is-locked {
  /* HRR: Uses a warm locked state background. */
  background: rgba(245, 207, 69, 0.18);
  /* HRR: Uses muted text for locked suggestion access. */
  color: var(--muted);
}

/* HRR: Expands the Idea Inbox to the full section width like the supporter wall. */
.suggestion-inbox {
  /* HRR: Lets the Idea Inbox span both info grid columns. */
  grid-column: 1 / -1;
  /* HRR: Uses a subtle richer background so the inbox feels like a complete work area. */
  background: linear-gradient(135deg, rgba(250, 255, 246, 0.96), rgba(236, 251, 244, 0.92));
}

/* HRR: Splits the Idea Inbox into entry and list columns. */
.suggestion-layout {
  /* HRR: Adds spacing below the Idea Inbox heading. */
  margin-top: 20px;
  /* HRR: Creates the two-column desktop layout requested for suggestions. */
  display: grid;
  /* HRR: Keeps the entry side and list side balanced across the full panel. */
  grid-template-columns: minmax(280px, 0.95fr) minmax(0, 1.15fr);
  /* HRR: Adds a comfortable gap between entry and list columns. */
  gap: 22px;
  /* HRR: Aligns both columns at the top. */
  align-items: start;
}

/* HRR: Styles the left-side suggestion entry column. */
.suggestion-entry-panel {
  /* HRR: Adds a clear form surface inside the full-width inbox. */
  background: rgba(255, 255, 255, 0.64);
  /* HRR: Adds a subtle border around the entry area. */
  border: 1px solid rgba(21, 123, 104, 0.12);
  /* HRR: Rounds the entry area consistently. */
  border-radius: 8px;
  /* HRR: Adds comfortable spacing around the form controls. */
  padding: 18px;
  /* HRR: Adds soft depth to separate the entry controls from the list. */
  box-shadow: 0 12px 30px rgba(18, 53, 47, 0.07);
}

/* HRR: Styles the right-side suggestion list column. */
.suggestion-list-panel {
  /* HRR: Allows the list column to shrink safely inside the grid. */
  min-width: 0;
}

/* HRR: Styles the Premium-only suggestion form. */
.suggestion-form {
  /* HRR: Adds breathing room between access copy and the form. */
  margin-top: 18px;
  /* HRR: Uses a compact grid so controls stack cleanly. */
  display: grid;
  /* HRR: Adds consistent spacing between suggestion form fields. */
  gap: 12px;
}

/* HRR: Styles the suggestion form label. */
.suggestion-form label {
  /* HRR: Makes the textarea label easy to scan. */
  font-weight: 900;
  /* HRR: Uses the main text color for readability. */
  color: var(--ink);
}

/* HRR: Styles the public suggestion project selector consistently with the text field. */
.suggestion-form select {
  /* HRR: Keeps the project selector within the form width. */
  width: 100%;
  /* HRR: Prevents selector padding from causing overflow. */
  box-sizing: border-box;
  /* HRR: Adds comfortable selection control padding. */
  padding: 11px 12px;
  /* HRR: Uses the site radius for the project selector. */
  border-radius: 8px;
  /* HRR: Adds a clear editable border. */
  border: 1px solid var(--line);
  /* HRR: Uses a bright selector surface. */
  background: #ffffff;
  /* HRR: Keeps selector text readable. */
  color: var(--ink);
  /* HRR: Inherits the site font. */
  font: inherit;
  /* HRR: Makes project choices easy to scan. */
  font-weight: 800;
}

/* HRR: Styles the locked project selector for Basic and signed-out visitors. */
.suggestion-form select:disabled {
  /* HRR: Mutes the locked project selector. */
  opacity: 0.62;
  /* HRR: Shows the selector is not editable without suggestion access. */
  cursor: not-allowed;
}

/* HRR: Styles the suggestion textarea. */
.suggestion-form textarea {
  /* HRR: Keeps the textarea within the panel width. */
  width: 100%;
  /* HRR: Prevents padding from causing overflow. */
  box-sizing: border-box;
  /* HRR: Adds comfortable writing space. */
  padding: 13px 14px;
  /* HRR: Uses the site radius for form controls. */
  border-radius: 8px;
  /* HRR: Adds a clear editable border. */
  border: 1px solid var(--line);
  /* HRR: Uses a bright input surface. */
  background: #ffffff;
  /* HRR: Keeps suggestion text legible. */
  color: var(--ink);
  /* HRR: Inherits the site font. */
  font: inherit;
  /* HRR: Lets script-driven auto-height control the field without manual drag handles. */
  resize: none;
  /* HRR: Sets a comfortable minimum writing height. */
  min-height: 160px;
  /* HRR: Prevents scrollbars while the field grows with typed text. */
  overflow: hidden;
  /* HRR: Animates height changes gently as users type. */
  transition: min-height 160ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

/* HRR: Styles disabled suggestion input controls. */
.suggestion-form textarea:disabled {
  /* HRR: Mutes the locked input state. */
  opacity: 0.62;
  /* HRR: Shows the field is not editable for Basic users. */
  cursor: not-allowed;
}

/* HRR: Styles suggestion validation and submit feedback. */
.suggestion-form-message {
  /* HRR: Removes default paragraph spacing. */
  margin: 0;
  /* HRR: Keeps feedback close to the form. */
  min-height: 1.3em;
  /* HRR: Uses a strong teal feedback color. */
  color: var(--teal);
  /* HRR: Makes validation messages noticeable. */
  font-weight: 800;
}

/* HRR: Groups suggestion form action buttons. */
.suggestion-actions {
  /* HRR: Places reset and submit controls in a row. */
  display: flex;
  /* HRR: Allows buttons to wrap on narrow screens. */
  flex-wrap: wrap;
  /* HRR: Adds spacing between suggestion actions. */
  gap: 10px;
}

/* HRR: Styles suggestion form buttons. */
.suggestion-actions button {
  /* HRR: Removes default borders for custom action styling. */
  border: 0;
  /* HRR: Adds tappable button padding. */
  padding: 11px 14px;
  /* HRR: Uses compact rounded button corners. */
  border-radius: 8px;
  /* HRR: Uses the site font for buttons. */
  font: inherit;
  /* HRR: Makes action labels strong. */
  font-weight: 900;
  /* HRR: Shows enabled buttons are clickable. */
  cursor: pointer;
  /* HRR: Animates button hover and disabled feedback. */
  transition: transform 180ms ease, opacity 180ms ease, background 180ms ease;
}

/* HRR: Styles the suggestion reset button. */
.suggestion-actions button[type="reset"] {
  /* HRR: Uses a pale neutral surface for reset. */
  background: rgba(255, 255, 255, 0.82);
  /* HRR: Uses the main text color for reset. */
  color: var(--ink);
}

/* HRR: Styles the suggestion submit button. */
.suggestion-actions button[type="submit"] {
  /* HRR: Uses teal for the primary suggestion action. */
  background: var(--teal);
  /* HRR: Keeps submit button text readable on teal. */
  color: #ffffff;
}

/* HRR: Adds hover polish to enabled suggestion buttons. */
.suggestion-actions button:not(:disabled):hover {
  /* HRR: Lifts enabled suggestion buttons slightly. */
  transform: translateY(-2px);
}

/* HRR: Softens locked suggestion buttons. */
.suggestion-actions button:disabled {
  /* HRR: Shows the button is unavailable. */
  opacity: 0.48;
  /* HRR: Prevents pointer styling on unavailable buttons. */
  cursor: not-allowed;
}

/* HRR: Styles the Premium upsell sticker for locked suggestion submission. */
.suggestion-premium-lock {
  /* HRR: Adds spacing below the disabled form. */
  margin-top: 16px;
  /* HRR: Creates a warm sticker-like surface. */
  background: linear-gradient(135deg, rgba(255, 247, 199, 0.92), rgba(245, 207, 69, 0.34));
  /* HRR: Adds a warm border to the sticker. */
  border: 1px solid rgba(245, 177, 69, 0.55);
  /* HRR: Rounds the sticker consistently with the site. */
  border-radius: 8px;
  /* HRR: Adds comfortable sticker spacing. */
  padding: 14px;
  /* HRR: Arranges sticker text and action neatly. */
  display: grid;
  /* HRR: Adds compact spacing between sticker rows. */
  gap: 7px;
  /* HRR: Adds a subtle warm shadow. */
  box-shadow: 0 12px 30px rgba(168, 117, 35, 0.14);
}

/* HRR: Styles the Premium lock headline. */
.suggestion-premium-lock strong {
  /* HRR: Makes the lock headline clear. */
  color: var(--ink);
}

/* HRR: Styles the Premium lock supporting copy. */
.suggestion-premium-lock span {
  /* HRR: Uses muted copy for the secondary explanation. */
  color: var(--muted);
}

/* HRR: Styles the Premium lock coffee link. */
.suggestion-premium-lock a {
  /* HRR: Makes the donation link look like a compact call-to-action. */
  width: fit-content;
  /* HRR: Removes default link underline. */
  text-decoration: none;
  /* HRR: Adds tappable link padding. */
  padding: 9px 12px;
  /* HRR: Rounds the coffee action. */
  border-radius: 8px;
  /* HRR: Uses the warm accent for Premium unlock. */
  background: var(--sun);
  /* HRR: Keeps coffee action text readable. */
  color: #3a2504;
  /* HRR: Makes the coffee action prominent. */
  font-weight: 900;
}

/* HRR: Lays out public suggestion cards. */
.suggestion-board {
  /* HRR: Removes top spacing because the two-column layout owns the gap. */
  margin-top: 0;
  /* HRR: Stacks suggestion cards vertically. */
  display: grid;
  /* HRR: Adds comfortable space between suggestion cards. */
  gap: 12px;
  /* HRR: Keeps long suggestion lists manageable beside the entry form on desktop. */
  max-height: 720px;
  /* HRR: Allows the suggestion list to scroll inside the right column when many cards exist. */
  overflow: auto;
  /* HRR: Adds a little right padding so scrollbars do not touch cards. */
  padding-right: 4px;
}

/* HRR: Styles the suggestion empty and fallback message. */
.suggestion-board-message {
  /* HRR: Removes default paragraph spacing inside the board. */
  margin: 0;
  /* HRR: Uses muted text for empty states. */
  color: var(--muted);
  /* HRR: Sets readable empty-state line height. */
  line-height: 1.6;
}

/* HRR: Lays out admin tab buttons above the manager panels. */
.admin-tabs {
  /* HRR: Places admin tabs in a responsive row. */
  display: flex;
  /* HRR: Allows admin tabs to wrap on smaller screens. */
  flex-wrap: wrap;
  /* HRR: Centers the tab controls. */
  justify-content: center;
  /* HRR: Adds spacing between admin tab buttons. */
  gap: 8px;
  /* HRR: Adds spacing above the tab controls. */
  margin: 24px auto 18px;
}

/* HRR: Styles one admin tab button. */
.admin-tab {
  /* HRR: Removes default button border. */
  border: 0;
  /* HRR: Uses compact rounded tabs. */
  border-radius: 8px;
  /* HRR: Adds clickable tab padding. */
  padding: 10px 14px;
  /* HRR: Uses a bright tab surface. */
  background: rgba(255, 255, 255, 0.78);
  /* HRR: Adds a subtle tab outline and depth. */
  box-shadow: inset 0 0 0 1px var(--line), 0 10px 24px rgba(21, 123, 104, 0.08);
  /* HRR: Uses bold tab labels. */
  font-weight: 900;
  /* HRR: Shows tabs are clickable. */
  cursor: pointer;
  /* HRR: Animates tab feedback smoothly. */
  transition: background 180ms ease, color 180ms ease, transform 180ms ease;
}

/* HRR: Styles hover and active admin tabs. */
.admin-tab:hover,
.admin-tab.is-active {
  /* HRR: Uses teal for selected and hovered tabs. */
  background: var(--teal);
  /* HRR: Keeps selected tab text readable. */
  color: #ffffff;
  /* HRR: Lifts selected and hovered tabs slightly. */
  transform: translateY(-2px);
}

/* HRR: Keeps hidden admin panels out of layout. */
.admin-tab-panel[hidden] {
  /* HRR: Ensures inactive admin panels stay hidden. */
  display: none;
}

/* HRR: Styles visible admin tab panels. */
.admin-tab-panel.is-active {
  /* HRR: Lets active panels fill the admin page width. */
  display: block;
}

/* HRR: Styles admin empty-state messages. */
.admin-empty-message {
  /* HRR: Removes default empty message margins. */
  margin: 0;
  /* HRR: Adds readable empty message padding. */
  padding: 14px;
  /* HRR: Uses muted text for empty admin states. */
  color: var(--muted);
  /* HRR: Keeps empty states readable. */
  line-height: 1.5;
}

/* HRR: Lays out the admin e-mail form. */
.admin-email-form {
  /* HRR: Creates a compact responsive form row. */
  display: grid;
  /* HRR: Fits the e-mail input and button across the available width. */
  grid-template-columns: minmax(240px, 1fr) auto;
  /* HRR: Adds spacing inside the admin e-mail form. */
  gap: 12px;
  /* HRR: Aligns the submit button with the input. */
  align-items: end;
  /* HRR: Keeps the admin e-mail form aligned with other admin panels. */
  max-width: 920px;
  /* HRR: Centers the admin e-mail form. */
  margin: 0 auto 18px;
}

/* HRR: Styles one public suggestion card. */
.suggestion-card {
  /* HRR: Creates a clean white card surface. */
  background: rgba(255, 255, 255, 0.82);
  /* HRR: Adds a subtle border around each suggestion. */
  border: 1px solid rgba(21, 123, 104, 0.14);
  /* HRR: Rounds suggestion cards consistently. */
  border-radius: 8px;
  /* HRR: Adds readable internal spacing. */
  padding: 16px;
  /* HRR: Adds gentle depth without making nested cards feel heavy. */
  box-shadow: 0 12px 30px rgba(18, 53, 47, 0.08);
}

/* HRR: Arranges status and date in suggestion cards. */
.suggestion-card-header {
  /* HRR: Places status and date on one flexible row. */
  display: flex;
  /* HRR: Separates status from the date. */
  justify-content: space-between;
  /* HRR: Centers header items vertically. */
  align-items: center;
  /* HRR: Allows wrapping on narrow cards. */
  flex-wrap: wrap;
  /* HRR: Adds spacing when header content wraps. */
  gap: 8px;
  /* HRR: Adds spacing below the suggestion text. */
  margin-bottom: 10px;
}

/* HRR: Styles suggestion status pills. */
.suggestion-status {
  /* HRR: Displays status as a compact pill. */
  display: inline-flex;
  /* HRR: Centers the status icon and label in the pill. */
  align-items: center;
  /* HRR: Adds a small gap between the icon and label. */
  gap: 6px;
  /* HRR: Positions decorative celebration marks inside completed status pills. */
  position: relative;
  /* HRR: Keeps decorative status marks contained inside the pill. */
  overflow: hidden;
  /* HRR: Adds pill padding. */
  padding: 6px 9px;
  /* HRR: Rounds the status pill. */
  border-radius: 999px;
  /* HRR: Keeps status text compact. */
  font-size: 0.78rem;
  /* HRR: Makes status text strong. */
  font-weight: 900;
}

/* HRR: Styles the small status icon inside suggestion pills. */
.suggestion-status-icon {
  /* HRR: Centers symbol glyphs inside a stable circle. */
  display: inline-grid;
  /* HRR: Centers each symbol in its icon slot. */
  place-items: center;
  /* HRR: Gives each icon a fixed readable size. */
  width: 18px;
  /* HRR: Gives each icon a fixed readable height. */
  height: 18px;
  /* HRR: Rounds the icon backing into a small circle. */
  border-radius: 50%;
  /* HRR: Adds a faint white backing so icons remain readable on colored pills. */
  background: rgba(255, 255, 255, 0.68);
  /* HRR: Keeps the symbol aligned with compact status text. */
  line-height: 1;
}

/* HRR: Keeps suggestion status labels above decorative implemented marks. */
.suggestion-status-label {
  /* HRR: Positions label text above pseudo-element decorations. */
  position: relative;
  /* HRR: Places label text over decorative implemented background marks. */
  z-index: 1;
}

/* HRR: Styles submitted suggestion status. */
.suggestion-status.status-submitted {
  /* HRR: Uses a soft neutral submitted background. */
  background: rgba(104, 115, 125, 0.14);
  /* HRR: Uses muted status text. */
  color: #53616d;
}

/* HRR: Styles accepted suggestion status. */
.suggestion-status.status-accepted {
  /* HRR: Uses teal for accepted ideas. */
  background: rgba(21, 184, 166, 0.15);
  /* HRR: Keeps accepted status readable. */
  color: var(--teal);
}

/* HRR: Styles in-development suggestion status. */
.suggestion-status.status-in-development {
  /* HRR: Uses blue for active development. */
  background: rgba(69, 132, 245, 0.14);
  /* HRR: Keeps in-development status readable. */
  color: #2465c9;
}

/* HRR: Styles implemented suggestion status. */
.suggestion-status.status-implemented {
  /* HRR: Uses green success styling for completed ideas. */
  background: rgba(31, 167, 91, 0.16);
  /* HRR: Adds a stronger green outline for completed ideas. */
  border: 1px solid rgba(31, 167, 91, 0.34);
  /* HRR: Keeps implemented status readable in green. */
  color: #14743e;
  /* HRR: Adds room for the decorative golden celebration mark. */
  padding-right: 13px;
}

/* HRR: Adds a golden celebration star behind implemented suggestion statuses. */
.suggestion-status.status-implemented::before {
  /* HRR: Draws the celebratory star mark. */
  content: "★";
  /* HRR: Places the star behind the implemented label. */
  position: absolute;
  /* HRR: Aligns the star toward the right side of the pill. */
  right: 7px;
  /* HRR: Centers the star vertically inside the pill. */
  top: 50%;
  /* HRR: Centers and slightly rotates the decorative star. */
  transform: translateY(-50%) rotate(-12deg);
  /* HRR: Uses a golden color for the celebration mark. */
  color: rgba(214, 157, 24, 0.34);
  /* HRR: Makes the star large enough to read as celebration without hiding text. */
  font-size: 1.25rem;
  /* HRR: Keeps the decorative star behind icon and label content. */
  z-index: 0;
}

/* HRR: Gives implemented suggestion icons a green check treatment. */
.suggestion-status.status-implemented .suggestion-status-icon {
  /* HRR: Uses a green circle for completed check icons. */
  background: #1fa75b;
  /* HRR: Keeps the completed check mark readable. */
  color: #ffffff;
  /* HRR: Places the implemented icon over the decorative star. */
  z-index: 1;
}

/* HRR: Styles suggestion dates. */
.suggestion-date {
  /* HRR: Uses muted small text for dates. */
  color: var(--muted);
  /* HRR: Keeps dates compact. */
  font-size: 0.86rem;
  /* HRR: Makes dates readable without dominating the card. */
  font-weight: 800;
}

/* HRR: Styles the related-project label on public suggestion cards. */
.suggestion-project-label {
  /* HRR: Uses a compact curved label to distinguish project context from workflow status. */
  border-radius: 999px;
  /* HRR: Adds readable spacing inside the project label. */
  padding: 6px 10px;
  /* HRR: Uses a soft teal project-label background. */
  background: rgba(21, 184, 166, 0.1);
  /* HRR: Adds a subtle outline around the project label. */
  border: 1px solid rgba(21, 184, 166, 0.2);
  /* HRR: Uses the main ink color for project names. */
  color: var(--ink);
  /* HRR: Keeps project labels compact. */
  font-size: 0.78rem;
  /* HRR: Makes project names easy to scan. */
  font-weight: 900;
  /* HRR: Allows long project names to wrap without overflowing cards. */
  overflow-wrap: anywhere;
}

/* HRR: Styles the public warning shown on suspicious suggestions awaiting admin review. */
.suggestion-moderation-flag {
  /* HRR: Uses a warm warning surface distinct from workflow status. */
  background: rgba(245, 177, 69, 0.2);
  /* HRR: Adds a visible warning outline. */
  border: 1px solid rgba(201, 124, 24, 0.38);
  /* HRR: Rounds the public moderation warning into a compact pill. */
  border-radius: 999px;
  /* HRR: Adds readable compact warning spacing. */
  padding: 6px 10px;
  /* HRR: Uses a dark warm warning color for contrast. */
  color: #8a4f0f;
  /* HRR: Keeps the public moderation warning compact. */
  font-size: 0.78rem;
  /* HRR: Makes the public moderation warning easy to notice. */
  font-weight: 900;
}

/* HRR: Styles public suggestion text. */
.suggestion-card-text {
  /* HRR: Removes default top spacing after the header. */
  margin: 0;
  /* HRR: Uses readable line height for suggestions. */
  line-height: 1.65;
  /* HRR: Preserves user line breaks without allowing HTML. */
  white-space: pre-wrap;
}

/* HRR: Styles admin replies inside suggestion cards. */
.suggestion-reply {
  /* HRR: Adds spacing above replies. */
  margin-top: 14px;
  /* HRR: Adds a subtle left accent for admin replies. */
  border-left: 3px solid var(--teal);
  /* HRR: Adds breathing room beside the accent. */
  padding-left: 12px;
  /* HRR: Uses a light teal reply background. */
  background: rgba(21, 184, 166, 0.08);
  /* HRR: Rounds the reply block. */
  border-radius: 8px;
}

/* HRR: Styles reply body text. */
.suggestion-reply p {
  /* HRR: Keeps reply text compact. */
  margin: 5px 0 0;
  /* HRR: Preserves admin reply line breaks. */
  white-space: pre-wrap;
  /* HRR: Uses readable reply line height. */
  line-height: 1.55;
}

/* HRR: Styles the public financial overview section. */
.financials-section {
  /* HRR: Adds a visible gap above Financials so it breathes like the gap before the Idea Inbox. */
  margin-top: 22px;
  /* HRR: Adds comfortable spacing around the financial section. */
  padding: 46px clamp(18px, 4vw, 42px);
  /* HRR: Uses a bright section surface that matches the homepage panels. */
  background: rgba(255, 255, 255, 0.66);
  /* HRR: Rounds the section with the existing site radius. */
  border-radius: 8px;
  /* HRR: Adds a subtle border around the financial section. */
  border: 1px solid rgba(21, 123, 104, 0.12);
  /* HRR: Adds soft depth so the financial section separates from the page. */
  box-shadow: 0 22px 54px rgba(18, 53, 47, 0.08);
}

/* HRR: Styles the financial currency picker. */
.financial-currency-control {
  /* HRR: Places the currency label and select in one row. */
  display: inline-flex;
  /* HRR: Centers the label and select vertically. */
  align-items: center;
  /* HRR: Adds spacing between label and select. */
  gap: 10px;
  /* HRR: Uses strong compact text for the control label. */
  font-weight: 900;
}

/* HRR: Styles the financial currency select. */
.financial-currency-control select {
  /* HRR: Adds readable select padding. */
  padding: 10px 12px;
  /* HRR: Uses a compact radius matching other controls. */
  border-radius: 8px;
  /* HRR: Uses the shared line color for the select border. */
  border: 1px solid var(--line);
  /* HRR: Uses a white control surface. */
  background: #ffffff;
  /* HRR: Keeps select text readable. */
  color: var(--ink);
  /* HRR: Makes currency values easy to scan. */
  font-weight: 900;
}

/* HRR: Holds the financial chart and Premium overlay. */
.financials-shell {
  /* HRR: Positions the Premium overlay relative to the chart area. */
  position: relative;
  /* HRR: Adds spacing below the financial heading. */
  margin-top: 22px;
}

/* HRR: Lays out financial summary metric cards. */
.financial-summary {
  /* HRR: Creates responsive metric columns. */
  display: grid;
  /* HRR: Fits metrics across available width. */
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  /* HRR: Adds spacing between financial metric cards. */
  gap: 12px;
  /* HRR: Adds spacing below the metric row. */
  margin-bottom: 16px;
  /* HRR: Animates blur changes smoothly for locked visitors. */
  transition: filter 180ms ease, opacity 180ms ease;
}

/* HRR: Styles one financial metric card. */
.financial-metric {
  /* HRR: Adds a bright compact metric surface. */
  background: rgba(255, 255, 255, 0.82);
  /* HRR: Adds a subtle metric border. */
  border: 1px solid rgba(21, 123, 104, 0.12);
  /* HRR: Rounds the metric card. */
  border-radius: 8px;
  /* HRR: Adds readable metric padding. */
  padding: 14px;
  /* HRR: Adds soft metric depth. */
  box-shadow: 0 12px 28px rgba(18, 53, 47, 0.07);
}

/* HRR: Styles financial metric values. */
.financial-metric strong {
  /* HRR: Displays the metric value on its own line. */
  display: block;
  /* HRR: Uses a strong value size without crowding the card. */
  font-size: 1.25rem;
  /* HRR: Uses the main ink color for metric values. */
  color: var(--ink);
}

/* HRR: Styles financial metric labels. */
.financial-metric span {
  /* HRR: Displays the metric label below the value. */
  display: block;
  /* HRR: Adds small spacing above the label. */
  margin-top: 4px;
  /* HRR: Uses muted text for metric labels. */
  color: var(--muted);
  /* HRR: Makes metric labels easy to scan. */
  font-weight: 900;
}

/* HRR: Styles the financial category chart. */
.financial-chart {
  /* HRR: Creates a two-column chart layout with a Y-axis and vertical category columns. */
  display: grid;
  /* HRR: Reserves a narrow left axis and a flexible plotting area for category columns. */
  grid-template-columns: minmax(44px, 0.12fr) minmax(0, 1fr);
  /* HRR: Aligns the Y-axis and columns to the same chart height. */
  align-items: stretch;
  /* HRR: Adds space between the Y-axis and the column plot. */
  column-gap: 16px;
  /* HRR: Keeps the chart height stable enough for readable vertical bars. */
  min-height: 360px;
  /* HRR: Adds a bright plot surface around the financial chart. */
  padding: 18px;
  /* HRR: Uses a translucent panel background for the chart area. */
  background: rgba(255, 255, 255, 0.74);
  /* HRR: Adds a subtle border around the column chart. */
  border: 1px solid rgba(21, 123, 104, 0.12);
  /* HRR: Rounds the chart surface consistently with nearby panels. */
  border-radius: 8px;
  /* HRR: Adds soft depth to separate the chart from the page. */
  box-shadow: 0 12px 28px rgba(18, 53, 47, 0.07);
  /* HRR: Animates blur changes smoothly for locked visitors. */
  transition: filter 180ms ease, opacity 180ms ease;
}

/* HRR: Blurs financial details for signed-out and Basic visitors. */
.financial-chart.is-locked,
.financial-summary.is-locked {
  /* HRR: Obscures Premium financial data while keeping the section visible. */
  filter: blur(8px);
  /* HRR: Softens locked financial details behind the overlay. */
  opacity: 0.56;
  /* HRR: Prevents interactions with blurred financial details. */
  pointer-events: none;
}

/* HRR: Styles financial loading and fallback text. */
.financial-loading {
  /* HRR: Lets loading and empty states fill the full chart grid width. */
  grid-column: 1 / -1;
  /* HRR: Removes default paragraph margins. */
  margin: 0;
  /* HRR: Adds a soft fallback surface. */
  padding: 18px;
  /* HRR: Uses a bright translucent fallback background. */
  background: rgba(255, 255, 255, 0.72);
  /* HRR: Rounds fallback messages. */
  border-radius: 8px;
  /* HRR: Uses muted text for fallback copy. */
  color: var(--muted);
  /* HRR: Keeps fallback copy readable. */
  line-height: 1.55;
}

/* HRR: Styles one financial category row. */
.financial-bar-row {
  /* HRR: Stacks amount, column, and category label vertically for the column chart. */
  display: grid;
  /* HRR: Keeps the amount label, bar, and category label in predictable vertical tracks. */
  grid-template-rows: auto minmax(190px, 1fr) auto;
  /* HRR: Centers each category column in its plot slot. */
  justify-items: center;
  /* HRR: Adds a small gap between the amount, bar, and category label. */
  gap: 10px;
  /* HRR: Allows long category names to wrap within each column slot. */
  min-width: 0;
}

/* HRR: Arranges category name and amount. */
.financial-bar-label {
  /* HRR: Lets chart text use contents so amount and category can occupy separate tracks. */
  display: contents;
}

/* HRR: Styles financial category names. */
.financial-bar-label span {
  /* HRR: Places category names at the bottom X-axis label position. */
  order: 3;
  /* HRR: Makes category names bold. */
  font-weight: 900;
  /* HRR: Keeps category names readable. */
  color: var(--ink);
  /* HRR: Centers category names beneath their vertical columns. */
  text-align: center;
  /* HRR: Keeps category names from overflowing narrow chart columns. */
  overflow-wrap: anywhere;
  /* HRR: Uses compact category label text for the X-axis. */
  font-size: 0.9rem;
  /* HRR: Sets a readable line height for wrapped category names. */
  line-height: 1.2;
}

/* HRR: Styles financial category totals. */
.financial-bar-label strong {
  /* HRR: Places amounts above their columns so the Y-value remains visible. */
  order: 1;
  /* HRR: Keeps category totals readable above narrow bars. */
  text-align: center;
  /* HRR: Uses compact amount text to avoid crowding the chart. */
  font-size: 0.86rem;
  /* HRR: Allows large currency values to wrap instead of escaping the column slot. */
  overflow-wrap: anywhere;
}

/* HRR: Styles the financial bar track. */
.financial-bar-track {
  /* HRR: Places the vertical bar track between amount labels and category labels. */
  order: 2;
  /* HRR: Anchors each column to the chart baseline. */
  align-self: stretch;
  /* HRR: Uses a narrow track so columns read clearly across many categories. */
  width: min(54px, 70%);
  /* HRR: Aligns the fill to grow upward from the X-axis baseline. */
  display: flex;
  /* HRR: Places each fill at the bottom of its vertical track. */
  align-items: flex-end;
  /* HRR: Centers the fill inside the track. */
  justify-content: center;
  /* HRR: Rounds the vertical track. */
  border-radius: 8px;
  /* HRR: Uses a subtle vertical guide behind each category column. */
  background: linear-gradient(180deg, rgba(18, 53, 47, 0.04), rgba(18, 53, 47, 0.09));
  /* HRR: Keeps each bar fill inside the rounded track. */
  overflow: hidden;
}

/* HRR: Styles the financial bar fill. */
.financial-bar-fill {
  /* HRR: Makes the column fill the available track width. */
  width: 100%;
  /* HRR: Rounds the top of income and cost columns. */
  border-radius: 8px 8px 0 0;
  /* HRR: Uses teal for income columns by default. */
  background: linear-gradient(180deg, var(--teal), #1fa75b);
  /* HRR: Animates height changes when financial data or currency changes. */
  transition: height 220ms ease;
}

/* HRR: Styles cost category fills. */
.financial-bar-row.is-cost .financial-bar-fill {
  /* HRR: Uses coral and gold for vertical cost columns. */
  background: linear-gradient(180deg, var(--coral), #f5cf45);
}

/* HRR: Styles the visible Y-axis for the financial column chart. */
.financial-y-axis {
  /* HRR: Places Y-axis labels in a top-to-bottom scale beside the columns. */
  display: grid;
  /* HRR: Positions max, midpoint, and zero labels along the chart height. */
  grid-template-rows: auto 1fr auto 1fr auto;
  /* HRR: Aligns Y-axis labels to the right edge near the plot. */
  justify-items: end;
  /* HRR: Adds a subtle divider between axis labels and data columns. */
  border-right: 1px solid rgba(18, 53, 47, 0.12);
  /* HRR: Adds breathing room between Y-axis labels and the divider. */
  padding-right: 10px;
  /* HRR: Uses muted compact text for axis labels. */
  color: var(--muted);
  /* HRR: Makes axis labels readable but secondary. */
  font-size: 0.78rem;
  /* HRR: Keeps axis labels visually steady. */
  font-weight: 900;
}

/* HRR: Places Y-axis spacer rows between numeric labels. */
.financial-y-axis-spacer {
  /* HRR: Lets the chart scale create vertical distance between labels. */
  min-height: 0;
}

/* HRR: Lays out all financial category columns across the X-axis. */
.financial-column-plot {
  /* HRR: Creates responsive X-axis category slots for vertical columns. */
  display: grid;
  /* HRR: Fits as many category columns as possible without crushing labels. */
  grid-template-columns: repeat(auto-fit, minmax(86px, 1fr));
  /* HRR: Adds horizontal and vertical space between category columns. */
  gap: 16px;
  /* HRR: Aligns every category column to the bottom baseline. */
  align-items: end;
  /* HRR: Keeps the plot area from overflowing its chart container. */
  min-width: 0;
}

/* HRR: Styles the exchange-rate note. */
.financial-rate-note {
  /* HRR: Adds spacing above the exchange-rate note. */
  margin: 14px 0 0;
  /* HRR: Uses muted compact text for conversion details. */
  color: var(--muted);
  /* HRR: Keeps rate notes unobtrusive. */
  font-size: 0.88rem;
  /* HRR: Makes the note readable. */
  line-height: 1.45;
}

/* HRR: Positions the Premium overlay over locked financial details. */
.financial-premium-overlay {
  /* HRR: Covers the chart and summary area. */
  position: absolute;
  /* HRR: Anchors overlay to the top of the financial shell. */
  inset: 0;
  /* HRR: Centers the Premium upsell card. */
  display: grid;
  /* HRR: Places the Premium card in the middle. */
  place-items: center;
  /* HRR: Keeps the overlay above blurred financial details. */
  z-index: 2;
}

/* HRR: Styles the Premium upsell card over the financial chart. */
.financial-premium-card {
  /* HRR: Creates a compact overlay card. */
  display: grid;
  /* HRR: Adds spacing between overlay text and action. */
  gap: 9px;
  /* HRR: Centers overlay text. */
  text-align: center;
  /* HRR: Limits the overlay width. */
  max-width: 320px;
  /* HRR: Adds readable overlay padding. */
  padding: 22px;
  /* HRR: Uses a bright overlay surface. */
  background: rgba(255, 255, 255, 0.94);
  /* HRR: Adds a teal overlay border. */
  border: 1px solid rgba(21, 184, 166, 0.26);
  /* HRR: Rounds the overlay card. */
  border-radius: 8px;
  /* HRR: Adds strong overlay depth. */
  box-shadow: 0 24px 60px rgba(18, 53, 47, 0.18);
}

/* HRR: Styles the Premium overlay title. */
.financial-premium-card strong {
  /* HRR: Uses strong text for the locked section label. */
  font-size: 1.1rem;
}

/* HRR: Styles the Premium overlay action link. */
.financial-premium-card a {
  /* HRR: Removes default link underline. */
  text-decoration: none;
  /* HRR: Adds button-like padding. */
  padding: 10px 13px;
  /* HRR: Rounds the action link. */
  border-radius: 8px;
  /* HRR: Uses a warm Premium action background. */
  background: #f5cf45;
  /* HRR: Keeps action text readable. */
  color: var(--ink);
  /* HRR: Makes the action label strong. */
  font-weight: 900;
}

/* HRR: Expands the supporter wall into a hero-like panel within the info grid. */
.supporter-wall {
  /* HRR: Lets the supporter wall use the full grid width for a more celebratory layout. */
  grid-column: 1 / -1;
  /* HRR: Positions the supporter wall decorative layers behind content. */
  position: relative;
  /* HRR: Clips animated glow layers inside the supporter wall panel. */
  overflow: hidden;
  /* HRR: Uses a richer gradient surface so the supporter area feels special. */
  background: linear-gradient(135deg, rgba(250, 255, 246, 0.96), rgba(221, 247, 239, 0.92) 48%, rgba(255, 247, 199, 0.92));
}

/* HRR: Adds a soft animated glow behind supporter wall content. */
.supporter-wall::before {
  /* HRR: Creates the decorative glow layer. */
  content: "";
  /* HRR: Positions the glow inside the supporter panel. */
  position: absolute;
  /* HRR: Places the glow around the top-right corner. */
  inset: -80px -80px auto auto;
  /* HRR: Sets the glow width. */
  width: 240px;
  /* HRR: Sets the glow height. */
  height: 240px;
  /* HRR: Rounds the glow into a soft circle. */
  border-radius: 50%;
  /* HRR: Paints the glow with the warm accent color. */
  background: rgba(245, 207, 69, 0.28);
  /* HRR: Blurs the glow for a soft celebration effect. */
  filter: blur(8px);
  /* HRR: Animates the glow gently without distracting from text. */
  animation: supporterGlow 4.8s ease-in-out infinite;
}

/* HRR: Keeps supporter wall direct children above decorative layers. */
.supporter-wall > * {
  /* HRR: Positions supporter content above the animated background glow. */
  position: relative;
  /* HRR: Places supporter content above pseudo-elements. */
  z-index: 1;
}

/* HRR: Arranges supporter wall heading and coffee badge. */
.supporter-wall-header {
  /* HRR: Places heading copy and the badge in a responsive row. */
  display: flex;
  /* HRR: Keeps the heading and badge separated across the panel. */
  justify-content: space-between;
  /* HRR: Aligns the badge with the heading block. */
  align-items: center;
  /* HRR: Adds space when the header wraps on small screens. */
  gap: 18px;
}

/* HRR: Styles the supporter wall intro copy. */
.supporter-wall-copy {
  /* HRR: Limits the supporter intro line length. */
  max-width: 640px;
  /* HRR: Adds comfortable spacing below the supporter title. */
  margin: 12px 0 0;
  /* HRR: Uses muted text for the supporter intro. */
  color: var(--muted);
  /* HRR: Sets readable line height for supporter intro copy. */
  line-height: 1.6;
}

/* HRR: Styles the animated coffee badge in the supporter header. */
.supporter-coffee-badge {
  /* HRR: Creates a stable circular badge size. */
  width: 78px;
  /* HRR: Matches the circular badge height. */
  height: 78px;
  /* HRR: Centers the coffee symbol inside the badge. */
  display: grid;
  /* HRR: Places the coffee symbol in the middle of the badge. */
  place-items: center;
  /* HRR: Uses the warm accent for the badge surface. */
  background: var(--amber);
  /* HRR: Rounds the badge into a circle. */
  border-radius: 50%;
  /* HRR: Sets a large readable coffee symbol size. */
  font-size: 2.1rem;
  /* HRR: Adds depth behind the coffee badge. */
  box-shadow: 0 18px 38px rgba(245, 207, 69, 0.36);
  /* HRR: Adds a gentle floating motion to the badge. */
  animation: supporterFloat 3.8s ease-in-out infinite;
}

/* HRR: Styles the Buy Me A Coffee call-to-action in the supporter wall. */
.buy-coffee-button {
  /* HRR: Displays the coffee link as a polished button. */
  display: inline-flex;
  /* HRR: Aligns the coffee icon and label. */
  align-items: center;
  /* HRR: Adds spacing between the coffee icon and label. */
  gap: 9px;
  /* HRR: Adds spacing below the supporter wall header. */
  margin-top: 20px;
  /* HRR: Adds comfortable button padding. */
  padding: 12px 18px;
  /* HRR: Removes default link underline. */
  text-decoration: none;
  /* HRR: Rounds the coffee button. */
  border-radius: 8px;
  /* HRR: Uses the warm coffee accent surface. */
  background: var(--amber);
  /* HRR: Uses readable dark text on the warm button. */
  color: var(--ink);
  /* HRR: Makes the coffee button text strong. */
  font-weight: 900;
  /* HRR: Adds a warm shadow to the coffee button. */
  box-shadow: 0 16px 34px rgba(245, 207, 69, 0.28);
  /* HRR: Animates the coffee button hover feedback. */
  transition: transform 180ms ease, box-shadow 180ms ease;
}

/* HRR: Adds a coffee icon to the supporter wall button. */
.buy-coffee-button::before {
  /* HRR: Inserts the coffee symbol before the button label. */
  content: "\2615";
  /* HRR: Sets the coffee icon size. */
  font-size: 1.05rem;
}

/* HRR: Adds hover feedback to the Buy Me A Coffee button. */
.buy-coffee-button:hover {
  /* HRR: Lifts the coffee button slightly. */
  transform: translateY(-2px);
  /* HRR: Strengthens the coffee button shadow. */
  box-shadow: 0 20px 40px rgba(245, 207, 69, 0.36);
}

/* HRR: Styles the supporter refresh schedule note. */
.supporter-refresh-note {
  /* HRR: Keeps the refresh note compact under the coffee button. */
  margin: 12px 0 0;
  /* HRR: Uses muted text so the note is helpful but secondary. */
  color: var(--muted);
  /* HRR: Sets a small readable refresh note size. */
  font-size: 0.88rem;
  /* HRR: Uses bold text so the refresh detail is still discoverable. */
  font-weight: 800;
  /* HRR: Adds comfortable line height if the note wraps. */
  line-height: 1.45;
}

/* HRR: Lays out the supporter wall metric tiles. */
.supporter-stats {
  /* HRR: Creates responsive stat columns. */
  display: grid;
  /* HRR: Fits supporter stat tiles without squeezing. */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  /* HRR: Adds space between supporter stat tiles. */
  gap: 12px;
  /* HRR: Adds spacing above the supporter wall header. */
  margin-top: 24px;
}

/* HRR: Styles one supporter metric tile. */
.supporter-stat {
  /* HRR: Adds a bright glass-like surface to each stat. */
  background: rgba(255, 255, 255, 0.68);
  /* HRR: Adds a subtle border around the stat tile. */
  border: 1px solid rgba(18, 53, 47, 0.1);
  /* HRR: Keeps stat tile corners consistent with the site. */
  border-radius: 8px;
  /* HRR: Adds comfortable spacing inside each stat tile. */
  padding: 16px;
  /* HRR: Centers stat text for quick scanning. */
  text-align: center;
  /* HRR: Adds a soft shadow below each stat tile. */
  box-shadow: 0 14px 30px rgba(21, 123, 104, 0.1);
}

/* HRR: Styles the large supporter stat value. */
.supporter-stat strong {
  /* HRR: Displays the stat value on its own line. */
  display: block;
  /* HRR: Sets a bold readable stat number size. */
  font-size: clamp(1.55rem, 4vw, 2.35rem);
  /* HRR: Uses the deep text color for stat emphasis. */
  color: var(--ink);
}

/* HRR: Styles the supporter stat label. */
.supporter-stat span {
  /* HRR: Displays labels below the stat value. */
  display: block;
  /* HRR: Adds spacing between stat value and label. */
  margin-top: 4px;
  /* HRR: Uses muted text for stat labels. */
  color: var(--muted);
  /* HRR: Makes stat labels easy to scan. */
  font-weight: 800;
}

/* HRR: Lays out supporter cards below the metrics. */
.supporter-list {
  /* HRR: Creates responsive supporter card columns. */
  display: grid;
  /* HRR: Fits supporter cards across available width. */
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  /* HRR: Adds spacing between supporter cards. */
  gap: 14px;
  /* HRR: Adds spacing above supporter metrics. */
  margin-top: 18px;
}

/* HRR: Styles the supporter loading and fallback text. */
.supporter-loading {
  /* HRR: Lets loading messages span the full supporter card grid. */
  grid-column: 1 / -1;
  /* HRR: Removes default paragraph margin. */
  margin: 0;
  /* HRR: Adds a soft placeholder surface. */
  padding: 18px;
  /* HRR: Uses a bright translucent fallback background. */
  background: rgba(255, 255, 255, 0.56);
  /* HRR: Rounds the supporter fallback message. */
  border-radius: 8px;
  /* HRR: Uses muted text for fallback copy. */
  color: var(--muted);
  /* HRR: Keeps fallback copy readable. */
  line-height: 1.6;
}

/* HRR: Styles one public supporter card. */
.supporter-card {
  /* HRR: Places avatar and supporter text in a row. */
  display: flex;
  /* HRR: Aligns avatar with supporter details. */
  align-items: center;
  /* HRR: Adds spacing between avatar and text. */
  gap: 14px;
  /* HRR: Adds comfortable spacing inside supporter cards. */
  padding: 16px;
  /* HRR: Uses a bright translucent surface for supporter cards. */
  background: rgba(255, 255, 255, 0.72);
  /* HRR: Adds a subtle border around supporter cards. */
  border: 1px solid rgba(18, 53, 47, 0.1);
  /* HRR: Rounds supporter cards consistently. */
  border-radius: 8px;
  /* HRR: Adds depth below supporter cards. */
  box-shadow: 0 16px 34px rgba(21, 123, 104, 0.11);
  /* HRR: Animates supporter card hover feedback. */
  transition: transform 180ms ease, box-shadow 180ms ease;
}

/* HRR: Adds hover polish to supporter cards. */
.supporter-card:hover {
  /* HRR: Lifts supporter cards slightly on hover. */
  transform: translateY(-3px);
  /* HRR: Strengthens the card shadow on hover. */
  box-shadow: 0 22px 42px rgba(21, 123, 104, 0.16);
}

/* HRR: Styles the supporter initial avatar. */
.supporter-avatar {
  /* HRR: Prevents avatar shrinking in narrow cards. */
  flex: 0 0 auto;
  /* HRR: Sets a stable avatar width. */
  width: 48px;
  /* HRR: Sets a stable avatar height. */
  height: 48px;
  /* HRR: Centers the supporter initial. */
  display: grid;
  /* HRR: Places the initial in the middle. */
  place-items: center;
  /* HRR: Rounds the avatar into a circle. */
  border-radius: 50%;
  /* HRR: Paints a lively avatar gradient. */
  background: linear-gradient(135deg, var(--teal), var(--coral));
  /* HRR: Uses white text on the avatar. */
  color: #ffffff;
  /* HRR: Makes the initial prominent. */
  font-weight: 900;
  /* HRR: Adds a soft accent shadow around the avatar. */
  box-shadow: 0 12px 26px rgba(21, 184, 166, 0.24);
}

/* HRR: Lets supporter card text fill remaining space. */
.supporter-card-body {
  /* HRR: Allows supporter names and metadata to shrink inside cards. */
  min-width: 0;
}

/* HRR: Styles supporter names. */
.supporter-card h3 {
  /* HRR: Removes default heading margin. */
  margin: 0;
  /* HRR: Sets readable supporter name size. */
  font-size: 1.08rem;
  /* HRR: Keeps supporter names visually strong. */
  font-weight: 900;
}

/* HRR: Styles supporter card metadata. */
.supporter-card-meta {
  /* HRR: Adds compact spacing under supporter names. */
  margin: 5px 0 0;
  /* HRR: Uses muted text for supporter metadata. */
  color: var(--muted);
  /* HRR: Sets compact metadata size. */
  font-size: 0.9rem;
  /* HRR: Keeps supporter metadata readable when it wraps. */
  line-height: 1.45;
}

/* HRR: Styles supporter tier badges. */
.supporter-tier {
  /* HRR: Displays the supporter tier as a compact pill. */
  display: inline-block;
  /* HRR: Adds spacing above supporter metadata. */
  margin-top: 8px;
  /* HRR: Adds compact pill padding. */
  padding: 5px 9px;
  /* HRR: Rounds the supporter tier pill. */
  border-radius: 999px;
  /* HRR: Uses a warm translucent badge surface. */
  background: rgba(245, 207, 69, 0.24);
  /* HRR: Keeps tier text readable. */
  color: var(--ink);
  /* HRR: Makes tier labels scan quickly. */
  font-size: 0.78rem;
  /* HRR: Makes tier labels bold. */
  font-weight: 900;
}

/* HRR: Defines the supporter wall glow animation. */
@keyframes supporterGlow {
  /* HRR: Starts the glow at normal scale. */
  0% {
    /* HRR: Sets the initial glow transform. */
    transform: scale(1);
  }
  /* HRR: Enlarges the glow midway through the animation. */
  50% {
    /* HRR: Sets the expanded glow transform. */
    transform: scale(1.12);
  }
  /* HRR: Returns the glow to normal scale. */
  100% {
    /* HRR: Restores the initial glow transform. */
    transform: scale(1);
  }
}

/* HRR: Defines the supporter coffee badge float animation. */
@keyframes supporterFloat {
  /* HRR: Starts the badge in its resting position. */
  0% {
    /* HRR: Sets the initial badge position. */
    transform: translateY(0) rotate(-3deg);
  }
  /* HRR: Lifts the badge midway through the animation. */
  50% {
    /* HRR: Sets the floating badge position. */
    transform: translateY(-8px) rotate(4deg);
  }
  /* HRR: Returns the badge to rest. */
  100% {
    /* HRR: Restores the initial badge position. */
    transform: translateY(0) rotate(-3deg);
  }
}

/* HRR: Adapts layout for tablet and mobile screens. */
@media (max-width: 820px) {
  /* HRR: Stacks header content on smaller screens. */
  .site-header {
    /* HRR: Places brand and nav in a single centered column on smaller screens. */
    grid-template-columns: 1fr;
    /* HRR: Centers stacked header items for a balanced mobile and tablet header. */
    align-items: center;
    /* HRR: Adds vertical spacing between brand and navigation. */
    gap: 14px;
    /* HRR: Reduces mobile header side padding so navigation links do not clip. */
    padding: 18px 12px;
  }

  /* HRR: Centers the brand when the mobile header becomes one column. */
  .brand {
    /* HRR: Places the brand in the only mobile header column. */
    grid-column: 1;
    /* HRR: Centers the brand title above the navigation on smaller screens. */
    justify-self: center;
  }

  /* HRR: Centers the navigation row when the header stacks vertically. */
  .nav-links {
    /* HRR: Places navigation below the brand in the only mobile header column. */
    grid-column: 1;
    /* HRR: Lets the navigation use the full header width for true centering. */
    width: 100%;
    /* HRR: Centers the navigation links across the available header width. */
    justify-content: center;
    /* HRR: Tightens mobile navigation spacing so all links can wrap inside the viewport. */
    gap: 5px;
    /* HRR: Prevents mobile navigation from becoming wider than the viewport. */
    max-width: 100%;
  }

  /* HRR: Makes mobile navigation links compact enough to avoid right-edge clipping. */
  .nav-links a {
    /* HRR: Uses a slightly smaller mobile nav label size while keeping tap targets readable. */
    font-size: 0.86rem;
    /* HRR: Reduces mobile nav button padding so wrapped rows fit the screen. */
    padding: 8px 7px;
  }

  /* HRR: Places account controls below navigation on smaller screens. */
  .auth-area {
    /* HRR: Returns the personal dock to the stacked header flow on smaller screens. */
    position: static;
    /* HRR: Places the account area in the only mobile header column. */
    grid-column: 1;
    /* HRR: Centers account controls in the stacked mobile header. */
    justify-self: center;
    /* HRR: Lets the mobile personal card use an appropriate width. */
    width: min(100%, 420px);
    /* HRR: Removes desktop floating-card padding duplication inside the stacked header. */
    padding: 10px;
  }

  /* HRR: Centers the community language selector in the stacked mobile header. */
  .community-language-control {
    /* HRR: Keeps the language row full width inside the stacked personal card. */
    width: 100%;
  }

  /* HRR: Keeps wide ecosystem cards within one mobile column. */
  .ecosystem-card-wide {
    /* HRR: Uses one column on narrow layouts. */
    grid-column: span 1;
  }

  /* HRR: Centers signed-in user details in the mobile header. */
  .user-summary {
    /* HRR: Keeps the two-row account block left-aligned on smaller screens. */
    justify-items: start;
    /* HRR: Lets the mobile account block use the available header width. */
    max-width: 100%;
    /* HRR: Lets the mobile account block use the available header width consistently. */
    width: 100%;
  }

  /* HRR: Centers the signed-in identity row on smaller screens. */
  .user-summary-main {
    /* HRR: Keeps the e-mail group and log-off button left-aligned when the header stacks. */
    justify-content: flex-start;
    /* HRR: Allows the identity row to wrap if the e-mail is long. */
    flex-wrap: wrap;
  }

  /* HRR: Centers membership details below the identity row on smaller screens. */
  .user-membership-row {
    /* HRR: Keeps membership items left-aligned when they wrap on mobile. */
    justify-content: flex-start;
  }

  /* HRR: Shortens long e-mail addresses in the stacked mobile header. */
  .user-email {
    /* HRR: Keeps long e-mails from crowding the mobile log-off button. */
    max-width: min(260px, 72vw);
  }

  /* HRR: Converts the hero to one column on smaller screens. */
  .hero-section {
    /* HRR: Uses a single-column hero layout. */
    grid-template-columns: 1fr;
    /* HRR: Reduces hero spacing for smaller screens. */
    padding-top: 52px;
  }

  /* HRR: Keeps mobile hero copy from creating horizontal overflow. */
  .hero-copy {
    /* HRR: Lets hero text use the available mobile column without exceeding it. */
    max-width: 100%;
    /* HRR: Ensures the centered mobile hero copy never exceeds the visible page column. */
    width: 100%;
  }

  /* HRR: Reduces mobile hero title size so each line fits cleanly. */
  h1 {
    /* HRR: Uses a phone-friendly title size that still feels like a hero. */
    font-size: clamp(2.35rem, 10.5vw, 3.1rem);
    /* HRR: Gives wrapped mobile title lines enough vertical breathing room. */
    line-height: 1.05;
    /* HRR: Allows the hero title to wrap before it clips the viewport. */
    overflow-wrap: anywhere;
  }

  /* HRR: Keeps mobile section headings inside the viewport. */
  h2 {
    /* HRR: Uses a smaller mobile heading scale for long section titles. */
    font-size: clamp(2rem, 8vw, 3.15rem);
    /* HRR: Allows long mobile headings to wrap instead of clipping. */
    overflow-wrap: anywhere;
  }

  /* HRR: Keeps mobile eyebrow labels inside narrow viewports. */
  .eyebrow {
    /* HRR: Reduces mobile uppercase label spacing so long labels do not overflow. */
    letter-spacing: 0.09em;
    /* HRR: Allows long translated labels to wrap within the page column. */
    overflow-wrap: anywhere;
  }

  /* HRR: Keeps mobile heading rows and copy from exceeding the page column. */
  .section-heading,
  .section-heading > div,
  .hero-text,
  .project-card {
    /* HRR: Prevents mobile section content from rendering wider than its parent. */
    max-width: 100%;
  }

  /* HRR: Makes the decorative hero scene smaller on mobile. */
  .hero-orbit {
    /* HRR: Sets a mobile-friendly scene width. */
    width: min(300px, 86vw);
  }

  /* HRR: Stacks the placeholder info panels on smaller screens. */
  .info-grid {
    /* HRR: Uses a single column for readable mobile panels. */
    grid-template-columns: 1fr;
  }

  /* HRR: Stacks the Idea Inbox entry and list columns on smaller screens. */
  .suggestion-layout {
    /* HRR: Uses one column so the form and list remain readable on tablets and phones. */
    grid-template-columns: 1fr;
  }

  /* HRR: Lets the suggestion list use normal page scrolling on smaller screens. */
  .suggestion-board {
    /* HRR: Removes the desktop list height cap on narrow layouts. */
    max-height: none;
    /* HRR: Uses the page scroll instead of an inner list scroll on mobile. */
    overflow: visible;
    /* HRR: Removes desktop scrollbar padding on mobile. */
    padding-right: 0;
  }

  /* HRR: Keeps the financial column chart readable on tablet and phone widths. */
  .financial-chart {
    /* HRR: Uses a slimmer Y-axis on smaller screens. */
    grid-template-columns: minmax(36px, 0.16fr) minmax(0, 1fr);
    /* HRR: Reduces the chart side gap on smaller screens. */
    column-gap: 10px;
    /* HRR: Keeps the mobile financial chart compact while preserving column height. */
    min-height: 320px;
    /* HRR: Reduces chart padding so it fits narrow screens. */
    padding: 14px;
  }

  /* HRR: Uses fewer columns per row so financial category labels stay readable on mobile. */
  .financial-column-plot {
    /* HRR: Gives each mobile category column enough width for wrapped X-axis labels. */
    grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
  }

  /* HRR: Shortens mobile financial bar tracks without making columns feel tiny. */
  .financial-bar-row {
    /* HRR: Uses a slightly shorter plot height on mobile screens. */
    grid-template-rows: auto minmax(160px, 1fr) auto;
  }

  /* HRR: Stacks the admin e-mail form on smaller screens. */
  .admin-email-form {
    /* HRR: Uses one column so the e-mail field and button fit mobile widths. */
    grid-template-columns: 1fr;
  }

  /* HRR: Stacks the supporter wall header on smaller screens. */
  .supporter-wall-header {
    /* HRR: Places the supporter copy and coffee badge in one column. */
    flex-direction: column;
    /* HRR: Aligns stacked supporter header content to the left. */
    align-items: flex-start;
  }

  /* HRR: Uses fewer supporter stat columns on smaller screens. */
  .supporter-stats {
    /* HRR: Lets supporter stats wrap into two columns when space is limited. */
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* HRR: Stacks the admin project list and editor on smaller screens. */
  .admin-project-edit {
    /* HRR: Uses one column so the side list sits above the editor on mobile. */
    grid-template-columns: 1fr;
  }

  /* HRR: Removes the desktop divider from the mobile project sidebar. */
  .admin-project-sidebar {
    /* HRR: Removes the right border when the sidebar stacks above the editor. */
    border-right: 0;
    /* HRR: Removes desktop right padding in the stacked layout. */
    padding-right: 0;
    /* HRR: Adds a bottom divider before the editor on mobile. */
    border-bottom: 1px solid rgba(21, 123, 104, 0.16);
    /* HRR: Adds bottom padding before the mobile divider. */
    padding-bottom: 18px;
  }

  /* HRR: Stacks admin project fields on smaller screens. */
  .admin-project-editor {
    /* HRR: Uses one column so admin controls do not squeeze on mobile. */
    grid-template-columns: 1fr;
  }

  /* HRR: Stacks admin suggestion controls on smaller screens. */
  .admin-suggestion-form {
    /* HRR: Uses one column so status, reply, and save controls stay readable. */
    grid-template-columns: 1fr;
  }

  /* HRR: Keeps the mobile suggestion delete icon aligned without stretching full width. */
  .admin-suggestion-delete {
    /* HRR: Aligns the destructive icon button to the start of the stacked form. */
    justify-self: start;
  }
}

/* HRR: Gives administrator form actions strong readable resting contrast. */
.admin-page .ecosystem-form button {
  /* HRR: Uses a polished teal-to-blue surface instead of an ambiguous white action. */
  background: linear-gradient(135deg, #0f9f87, #2278b8);
  /* HRR: Keeps administrator action labels readable before hover. */
  color: #ffffff;
  /* HRR: Adds a visible outline around administrator actions. */
  border: 1px solid rgba(7, 83, 111, 0.24);
  /* HRR: Adds depth so buttons remain discoverable among configuration fields. */
  box-shadow: 0 10px 22px rgba(21, 123, 104, 0.2);
  /* HRR: Centers loading indicators and action labels. */
  display: inline-flex;
  /* HRR: Aligns administrator button contents vertically. */
  align-items: center;
  /* HRR: Centers administrator button contents horizontally. */
  justify-content: center;
  /* HRR: Adds spacing between a state icon and action label. */
  gap: 9px;
  /* HRR: Animates administrator action feedback smoothly. */
  transition: transform 180ms ease, box-shadow 180ms ease, filter 180ms ease;
}

/* HRR: Adds clear hover and keyboard feedback to administrator form actions. */
.admin-page .ecosystem-form button:not(:disabled):hover,
.admin-page .ecosystem-form button:not(:disabled):focus-visible {
  /* HRR: Brightens the active administrator action slightly. */
  filter: brightness(1.08);
  /* HRR: Lifts the active administrator action. */
  transform: translateY(-2px);
  /* HRR: Deepens the active administrator action shadow. */
  box-shadow: 0 14px 28px rgba(21, 123, 104, 0.28);
}

/* HRR: Keeps administrator loading actions readable while preventing repeated clicks. */
.admin-page .ecosystem-form button.is-loading {
  /* HRR: Preserves strong contrast during long-running actions. */
  opacity: 0.82;
  /* HRR: Shows that the current administrator action is still running. */
  cursor: wait;
}

/* HRR: Draws an animated progress ring before a running administrator action. */
.admin-page .ecosystem-form button.is-loading::before {
  /* HRR: Creates the progress-ring box. */
  content: "";
  /* HRR: Uses a compact progress-ring width. */
  width: 15px;
  /* HRR: Uses a compact progress-ring height. */
  height: 15px;
  /* HRR: Draws the visible progress ring. */
  border: 2px solid rgba(255, 255, 255, 0.42);
  /* HRR: Creates the rotating progress-ring segment. */
  border-top-color: #ffffff;
  /* HRR: Rounds the progress ring. */
  border-radius: 50%;
  /* HRR: Rotates the progress ring continuously while waiting. */
  animation: admin-action-spin 760ms linear infinite;
}

/* HRR: Shows a positive completed state after an administrator action succeeds. */
.admin-page .ecosystem-form button.is-success {
  /* HRR: Uses an unmistakable positive completed surface. */
  background: #16845f;
}

/* HRR: Adds a check mark to a successful administrator action. */
.admin-page .ecosystem-form button.is-success::before {
  /* HRR: Displays the completed-action check mark. */
  content: "\2713";
}

/* HRR: Shows an error state after an administrator action fails. */
.admin-page .ecosystem-form button.is-error {
  /* HRR: Uses a readable destructive failure surface. */
  background: #b63831;
}

/* HRR: Adds a cross to a failed administrator action. */
.admin-page .ecosystem-form button.is-error::before {
  /* HRR: Displays the failed-action cross. */
  content: "\00d7";
}

/* HRR: Rotates administrator action progress rings. */
@keyframes admin-action-spin {
  /* HRR: Starts the progress ring at its natural rotation. */
  from { transform: rotate(0deg); }
  /* HRR: Completes one full progress-ring rotation. */
  to { transform: rotate(360deg); }
}

/* HRR: Positions temporary user feedback near the visible viewport edge. */
.toast-region {
  /* HRR: Keeps feedback visible even when the original message is outside the viewport. */
  position: fixed;
  /* HRR: Places feedback below common browser and page header space. */
  top: 20px;
  /* HRR: Places feedback near the right viewport edge. */
  right: 20px;
  /* HRR: Keeps feedback above page cards and overlays. */
  z-index: 10000;
  /* HRR: Stacks multiple action results cleanly. */
  display: grid;
  /* HRR: Adds separation between simultaneous action results. */
  gap: 10px;
  /* HRR: Prevents the toast region from becoming too wide on desktop. */
  width: min(390px, calc(100vw - 32px));
  /* HRR: Lets clicks pass through empty toast-region space. */
  pointer-events: none;
}

/* HRR: Styles one temporary accessible action result. */
.site-toast {
  /* HRR: Aligns the state icon and message text. */
  display: flex;
  /* HRR: Aligns toast contents at the top for wrapped messages. */
  align-items: flex-start;
  /* HRR: Adds spacing between the toast icon and message. */
  gap: 11px;
  /* HRR: Adds comfortable toast padding. */
  padding: 13px 15px;
  /* HRR: Rounds temporary feedback consistently with site cards. */
  border-radius: 12px;
  /* HRR: Keeps toast text readable on its dark surface. */
  color: #ffffff;
  /* HRR: Adds strong but compact depth above the page. */
  box-shadow: 0 18px 42px rgba(18, 53, 47, 0.28);
  /* HRR: Starts the toast just outside its visible resting position. */
  transform: translateX(28px);
  /* HRR: Starts the toast transparent before its entrance animation. */
  opacity: 0;
  /* HRR: Animates temporary feedback into and out of view. */
  transition: transform 220ms ease, opacity 220ms ease;
}

/* HRR: Shows a toast in its readable resting position. */
.site-toast.is-visible {
  /* HRR: Moves the toast into view. */
  transform: translateX(0);
  /* HRR: Makes the toast fully visible. */
  opacity: 1;
}

/* HRR: Uses a positive surface for successful action feedback. */
.site-toast-success {
  /* HRR: Distinguishes successful actions with a teal-green surface. */
  background: linear-gradient(135deg, #116b5b, #15946f);
}

/* HRR: Uses a destructive surface for failed action feedback. */
.site-toast-error {
  /* HRR: Distinguishes failed actions with a red surface. */
  background: linear-gradient(135deg, #8f2823, #c64338);
}

/* HRR: Makes the toast state icon easy to recognize quickly. */
.site-toast-icon {
  /* HRR: Gives the toast icon a stable circular footprint. */
  min-width: 22px;
  /* HRR: Centers the toast icon within its footprint. */
  text-align: center;
  /* HRR: Makes the state icon prominent. */
  font-size: 1.15rem;
  /* HRR: Keeps the state icon compact vertically. */
  line-height: 1.1;
}

/* HRR: Adapts carousel sizing for narrow phones. */
@media (max-width: 560px) {
  /* HRR: Uses a tighter phone header so navigation can wrap without clipping. */
  .site-header {
    /* HRR: Reduces phone header side padding to preserve usable nav width. */
    padding-left: 8px;
    /* HRR: Reduces phone header side padding to preserve usable nav width. */
    padding-right: 8px;
  }

  /* HRR: Arranges phone navigation as balanced rows instead of one clipped line. */
  .nav-links {
    /* HRR: Uses a compact grid so navigation labels wrap predictably on phones. */
    display: grid;
    /* HRR: Fits three short navigation actions on the first phone row. */
    grid-template-columns: repeat(3, max-content);
    /* HRR: Centers the wrapped phone navigation rows. */
    justify-content: center;
    /* HRR: Tightens phone navigation row and column spacing. */
    gap: 4px 5px;
  }

  /* HRR: Keeps phone navigation labels compact but readable. */
  .nav-links a {
    /* HRR: Uses smaller phone navigation padding to avoid edge clipping. */
    padding: 7px 5px;
    /* HRR: Uses a compact phone navigation font size. */
    font-size: 0.82rem;
  }

  /* HRR: Keeps brand text from overflowing small headers. */
  .brand {
    /* HRR: Allows the brand title to wrap cleanly. */
    align-items: flex-start;
  }

  /* HRR: Keeps the phone hero headline comfortably inside the viewport. */
  h1 {
    /* HRR: Narrows the hero title so the brand wraps into clean phone lines. */
    max-width: 9.4ch;
    /* HRR: Centers the narrowed phone title block in the hero. */
    margin-left: auto;
    /* HRR: Centers the narrowed phone title block in the hero. */
    margin-right: auto;
    /* HRR: Uses a slightly smaller phone hero size to prevent clipping. */
    font-size: clamp(2.15rem, 9.5vw, 2.55rem);
  }

  /* HRR: Keeps phone hero supporting copy from running past the viewport edge. */
  .hero-text {
    /* HRR: Narrows the supporting copy to the visible phone column. */
    max-width: 32ch;
    /* HRR: Uses a calm phone paragraph size. */
    font-size: 1rem;
  }

  /* HRR: Keeps phone eyebrow labels centered within the visible page column. */
  .eyebrow {
    /* HRR: Narrows long uppercase labels so they wrap before clipping. */
    max-width: 34ch;
    /* HRR: Centers the wrapped label text. */
    margin-left: auto;
    /* HRR: Centers the wrapped label text. */
    margin-right: auto;
  }

  /* HRR: Keeps phone project headings from reaching beyond the viewport. */
  .section-heading h2 {
    /* HRR: Uses the full phone content column for wrapped project headings. */
    max-width: 100%;
    /* HRR: Keeps long section headings readable on phones. */
    font-size: clamp(1.8rem, 7.4vw, 2.4rem);
  }

  /* HRR: Sets carousel height for Firestore image cards on small screens. */
  .carousel-stage {
    /* HRR: Keeps Firestore image cards and status buttons tall enough on narrow screens. */
    height: 620px;
  }

  /* HRR: Makes cards fit phone screens. */
  .project-card {
    /* HRR: Uses most of the viewport width for the card. */
    width: 82vw;
    /* HRR: Reduces card padding on small screens. */
    padding: 24px;
    /* HRR: Keeps mobile project cards from squeezing the image and status action. */
    min-height: 500px;
  }

  /* HRR: Adjusts the left preview card for narrow screens. */
  .project-card.is-left {
    /* HRR: Keeps about half of the left card visible on phones. */
    transform: translateX(-102%) translateZ(-80px) rotateY(15deg) scale(0.86);
  }

  /* HRR: Adjusts the right preview card for narrow screens. */
  .project-card.is-right {
    /* HRR: Keeps about half of the right card visible on phones. */
    transform: translateX(2%) translateZ(-80px) rotateY(-15deg) scale(0.86);
  }

  /* HRR: Tightens the project thumbnail strip for narrow screens. */
  .project-thumbnail-track {
    /* HRR: Reduces the thumbnail spacing so more projects fit per row. */
    gap: 8px;
    /* HRR: Gives the mobile thumbnail strip enough top separation from the card stage. */
    margin-top: 0;
    /* HRR: Uses smaller side padding on phones. */
    padding: 0 10px;
  }

  /* HRR: Shrinks thumbnails on narrow screens while keeping them tappable. */
  .project-thumbnail {
    /* HRR: Uses a compact mobile thumbnail width. */
    width: 48px;
    /* HRR: Matches the compact mobile thumbnail height. */
    height: 48px;
  }

  /* HRR: Uses one supporter stat column on narrow phones. */
  .supporter-stats {
    /* HRR: Stacks supporter metrics vertically on narrow phones. */
    grid-template-columns: 1fr;
  }

  /* HRR: Shrinks the supporter coffee badge on narrow phones. */
  .supporter-coffee-badge {
    /* HRR: Uses a smaller mobile coffee badge width. */
    width: 62px;
    /* HRR: Uses a smaller mobile coffee badge height. */
    height: 62px;
    /* HRR: Reduces the mobile coffee symbol size. */
    font-size: 1.75rem;
  }

  /* HRR: Stacks profile artwork and copy so equipped chips fit on narrow phones. */
  .profile-identity {
    /* HRR: Changes the profile identity row into a single readable mobile column. */
    flex-direction: column;
    /* HRR: Keeps the stacked profile identity aligned to the card start. */
    align-items: flex-start;
  }

  /* HRR: Lets mobile profile progress labels wrap without horizontal overflow. */
  .profile-progress-header {
    /* HRR: Stacks current XP and next-rank copy on narrow cards. */
    flex-direction: column;
  }

  /* HRR: Keeps equipped cosmetic chips within the mobile profile card. */
  .profile-equipped-list span {
    /* HRR: Lets each long equipped cosmetic label use the available row width. */
    width: fit-content;
  }
}

/* HRR: Adds extra containment for very narrow phones around 320px wide. */
@media (max-width: 360px) {
  /* HRR: Keeps the brand readable without clipping on very narrow phones. */
  .brand {
    /* HRR: Centers wrapped brand text on very narrow phones. */
    text-align: center;
    /* HRR: Uses a smaller brand size for very narrow phones. */
    font-size: 1rem;
    /* HRR: Allows the brand to wrap before hitting the screen edge. */
    max-width: 26ch;
  }

  /* HRR: Uses two compact navigation columns on very narrow phones. */
  .nav-links {
    /* HRR: Prevents three navigation labels from crowding the same narrow row. */
    grid-template-columns: repeat(2, max-content);
  }

  /* HRR: Keeps very narrow phone navigation labels inside the viewport. */
  .nav-links a {
    /* HRR: Uses the smallest readable navigation size for narrow phones. */
    font-size: 0.78rem;
    /* HRR: Tightens narrow-phone navigation padding. */
    padding: 6px 5px;
  }

  /* HRR: Narrows very small phone hero copy to prevent horizontal clipping. */
  .hero-copy {
    /* HRR: Keeps the hero copy within the visible narrow-phone column. */
    max-width: 280px;
  }

  /* HRR: Keeps the hero title centered and contained on very narrow phones. */
  h1 {
    /* HRR: Uses a smaller title scale for very narrow phones. */
    font-size: clamp(1.9rem, 9vw, 2.2rem);
    /* HRR: Narrows the title block so it wraps earlier. */
    max-width: 8.2ch;
  }

  /* HRR: Keeps very narrow phone supporting copy readable. */
  .hero-text {
    /* HRR: Narrows the paragraph before it reaches the viewport edge. */
    max-width: 27ch;
    /* HRR: Slightly reduces the paragraph size for very narrow phones. */
    font-size: 0.96rem;
  }

  /* HRR: Keeps very narrow phone section labels from clipping. */
  .eyebrow {
    /* HRR: Narrows uppercase labels on very small screens. */
    max-width: 28ch;
    /* HRR: Reduces label spacing further for very narrow phones. */
    letter-spacing: 0.07em;
  }

  /* HRR: Keeps very narrow phone section titles inside the viewport. */
  .section-heading h2 {
    /* HRR: Uses a compact heading scale for very narrow phones. */
    font-size: clamp(1.55rem, 7vw, 1.9rem);
  }
}

/* HRR: Respects users who prefer reduced motion. */
@media (prefers-reduced-motion: reduce) {
  /* HRR: Removes smooth scrolling for reduced-motion users. */
  html {
    /* HRR: Switches anchor scrolling to instant behavior. */
    scroll-behavior: auto;
  }

  /* HRR: Disables broad animations and transitions for reduced-motion users. */
  *, *::before, *::after {
    /* HRR: Prevents repeated motion animations. */
    animation-duration: 0.01ms !important;
    /* HRR: Limits animations to a single cycle. */
    animation-iteration-count: 1 !important;
    /* HRR: Prevents long transitions. */
    transition-duration: 0.01ms !important;
  }
}