/* app.css --- Limegrowth's own styles, layered over Bulma.
 *
 * The language switcher markup comes from hyperion/i18n:language-switcher
 * (.language-switcher / __current / __menu / __option). Hyperion ships the
 * behaviour-neutral markup; the app owns the look. This is a pure-CSS
 * hover/focus dropdown so it degrades without JS (each option is also a
 * boosted link, so it works with JS off too). */

.language-switcher {
  position: relative;
  display: inline-block;
  font-size: 0.875rem;
}

.language-switcher__current {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.35em 0.75em;
  cursor: pointer;
  border: 1px solid #dbdbdb;
  border-radius: 4px;
  background: #fff;
  /* Pin the text colour: the switcher sits in a hero/footer whose inherited
     colour is light, which would render the name invisible on the white button
     (the flag still shows -- emoji carry their own colour). */
  color: #363636;
  white-space: nowrap;
}

.language-switcher__current::after {
  content: "\25be";            /* ▾ */
  margin-left: 0.15em;
  opacity: 0.6;
}

.language-switcher__flag {
  font-size: 1.1em;
  line-height: 1;
}

.language-switcher__menu {
  position: absolute;
  right: 0;
  top: 100%;
  min-width: 100%;
  margin: 0.25rem 0 0;
  padding: 0.25rem 0;
  list-style: none;
  background: #fff;
  border: 1px solid #dbdbdb;
  border-radius: 4px;
  box-shadow: 0 0.5em 1em -0.125em rgba(10, 10, 10, 0.1);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-0.25rem);
  transition: opacity 0.12s ease, transform 0.12s ease, visibility 0.12s;
  z-index: 30;
}

/* Same hover-gap bridge as the account menu: the 0.25rem margin above would
   otherwise drop the menu as the pointer travels to it. */
.language-switcher__menu::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -0.35rem;
  height: 0.35rem;
}

/* Reveal on hover or keyboard focus anywhere within the switcher. */
.language-switcher:hover .language-switcher__menu,
.language-switcher:focus-within .language-switcher__menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.language-switcher__option {
  display: flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.4em 0.9em;
  color: #363636;
  white-space: nowrap;
  text-decoration: none;
}

.language-switcher__option:hover {
  background: #f5f5f5;
}

.language-switcher__option.is-current {
  font-weight: 600;
  background: #f0faf0;
}

/* Pinned top navbar --- one look across the site (marketing, auth, later the
 * dashboard); two variants differ only in how the bar meets the page:
 *
 *   --solid  opaque white, sticky (auth/content pages). Sticky avoids the
 *            layout-shift a fixed navbar would need.
 *   --hero   transparent over the landing hero, fixed; main.js adds .is-scrolled
 *            past a small scroll, fading in the SAME solid white bar (which stays
 *            pinned) -- so the scrolled state matches --solid everywhere. Reusable
 *            "transparent-until-scrolled sticky header" pattern (hyperion/js).
 */
.lg-topnav { z-index: 30; }

.lg-topnav--solid {
  position: sticky;
  top: 0;
  box-shadow: 0 2px 8px -4px rgba(10, 10, 10, 0.18);
}
.lg-topnav--solid .navbar-item,
.lg-topnav--solid .lg-signin { color: #363636; }

.lg-topnav--hero {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background-color: transparent;
  box-shadow: none;
  transition: background-color 0.25s ease, box-shadow 0.25s ease;
}
/* Light content while transparent over the dark hero image. */
.lg-topnav--hero .navbar-item,
.lg-topnav--hero .lg-signin { color: #ffffff; }
/* Hover: warning yellow over the transparent hero -- Bulma's default hover turns
   nav items dark (invisible on the hero) and the ghost Sign In green + underlined.
   Stays dark once solid. */
.lg-topnav--hero:not(.is-scrolled) .navbar-item:hover,
.lg-topnav--hero:not(.is-scrolled) .lg-signin:hover {
  color: #fbdc8e;
  background-color: transparent;
  text-decoration: none;
}
.lg-topnav--hero.is-scrolled .navbar-item:hover { color: #363636; }

/* Solidified once scrolled: white bar, dark content, still pinned. */
.lg-topnav--hero.is-scrolled {
  background-color: #ffffff;
  box-shadow: 0 2px 8px -4px rgba(10, 10, 10, 0.18);
}
.lg-topnav--hero.is-scrolled .navbar-item,
.lg-topnav--hero.is-scrolled .lg-signin { color: #363636; }

/* Enlarge the brand logo without growing the bar: drop the brand item's own
 * vertical padding so a taller logo fits within the navbar's existing height. */
.lg-topnav .navbar-brand .navbar-item {
  padding-top: 0;
  padding-bottom: 0;
}

/* CSS hamburger (mobile) --- drawn with currentColor so it follows the navbar
 * state instead of a fixed-colour SVG (which vanished on the white bar). */
.lg-burger {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
}
.lg-burger span {
  display: block;
  width: 22px;
  height: 2px;
  margin: 0 auto;
  border-radius: 2px;
  background-color: currentColor;
  transition: background-color 0.25s ease;
}
/* Colour by navbar state: light over the transparent hero, dark once solid. The
 * .is-scrolled selector is more specific, so it wins over the hero white rule. */
.lg-topnav--hero .lg-burger { color: #ffffff; }
.lg-topnav--solid .lg-burger,
.lg-topnav--hero.is-scrolled .lg-burger { color: #363636; }

/* Cookie-consent banner --- markup + hx wiring come from hyperion/consent; the
 * app owns the look. Fixed to the bottom, above page content, both choices
 * equally weighted (no dark-pattern emphasis on "accept"). */
.hy-consent-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
  padding: 1rem 1.25rem;
  background: #ffffff;
  border-top: 1px solid #dbdbdb;
  box-shadow: 0 -0.25em 1em -0.25em rgba(10, 10, 10, 0.15);
}

.hy-consent-banner__message {
  margin: 0;
  flex: 1 1 22rem;
  min-width: 16rem;
  color: #363636;
  font-size: 0.9rem;
  line-height: 1.4;
}

.hy-consent-banner__policy {
  color: #006251;
  font-weight: 600;
  text-decoration: underline;
}

.hy-consent-banner__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.hy-consent-banner__btn {
  cursor: pointer;
  padding: 0.5em 1.1em;
  border-radius: 4px;
  border: 1px solid #006251;
  font-weight: 600;
  font-size: 0.9rem;
  background: #fff;
  color: #006251;
}

.hy-consent-banner__btn--accept {
  background: #006251;
  color: #fff;
}

.hy-consent-banner__btn:hover {
  filter: brightness(0.95);
}

@media (max-width: 48rem) {
  .hy-consent-banner__actions { width: 100%; }
  .hy-consent-banner__btn { flex: 1 1 auto; }
}

/* --- Assistant panel -------------------------------------------------------
   A launcher button plus a docked side panel (full-screen sheet on small
   screens). Deliberately framework-agnostic in structure -- no limegrowth copy
   or domain here -- so it can be lifted into a hyperion component: only the two
   brand colours below and the .lg- prefix would change. */

.lg-assist-launcher {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 60;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.1rem;
  border: 0;
  border-radius: 999px;
  background: #006251;
  color: #fff;
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.22);
}

.lg-assist-launcher:hover { filter: brightness(1.08); }
.lg-assist-launcher:focus-visible { outline: 3px solid #ffdd57; outline-offset: 2px; }
.lg-assist-launcher[hidden] { display: none; }

.lg-assist-backdrop {
  display: none;               /* phones only -- see the media query below */
  position: fixed;
  inset: 0;
  z-index: 65;
  background: rgba(0, 0, 0, 0.35);
}

.lg-assist {
  position: fixed;
  z-index: 70;
  right: 1.25rem;
  bottom: 1.25rem;
  width: 24rem;
  max-width: calc(100vw - 2.5rem);
  height: min(34rem, calc(100vh - 2.5rem));
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 0.75rem;
  overflow: hidden;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.28);
}

.lg-assist[hidden] { display: none; }

.lg-assist__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  background: #006251;
  color: #fff;
}

.lg-assist__title { font-weight: 700; font-size: 1rem; margin: 0; }

.lg-assist__min {
  border: 0;
  background: transparent;
  color: #fff;
  font-size: 1.4rem;
  line-height: 1;
  padding: 0.15rem 0.4rem;
  cursor: pointer;
  border-radius: 0.25rem;
}

.lg-assist__min:hover { background: rgba(255, 255, 255, 0.18); }
.lg-assist__min:focus-visible { outline: 2px solid #ffdd57; }

/* The head is title + two controls; keep the buttons together on the right. */
.lg-assist__title { margin-right: auto; }

.lg-assist__note {
  padding: 0.6rem 1rem;
  background: #fffbeb;
  border-bottom: 1px solid #fdf0c8;
  color: #7a5c00;
  font-size: 0.78rem;
  line-height: 1.35;
}

.lg-assist__log {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  background: #fafafa;
}

.lg-assist__msg {
  max-width: 85%;
  padding: 0.55rem 0.8rem;
  border-radius: 0.75rem;
  font-size: 0.9rem;
  line-height: 1.4;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.lg-assist__msg--them {
  align-self: flex-start;
  background: #fff;
  border: 1px solid #e6e6e6;
  color: #363636;
}

.lg-assist__msg--you {
  align-self: flex-end;
  background: #006251;
  color: #fff;
}

.lg-assist__form {
  display: flex;
  gap: 0.5rem;
  padding: 0.75rem;
  border-top: 1px solid #ededed;
  background: #fff;
}

.lg-assist__input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0.55rem 0.7rem;
  border: 1px solid #dbdbdb;
  border-radius: 0.5rem;
  font-size: 0.9rem;
  font-family: inherit;
}

.lg-assist__input:focus { outline: 2px solid #006251; outline-offset: -1px; }

.lg-assist__send {
  flex: 0 0 auto;
  border: 0;
  border-radius: 0.5rem;
  padding: 0.55rem 0.9rem;
  background: #006251;
  color: #fff;
  font-weight: 600;
  cursor: pointer;
}

.lg-assist__send:hover { filter: brightness(1.08); }
.lg-assist__send:focus-visible { outline: 3px solid #ffdd57; outline-offset: 2px; }

/* Full-screen sheet on phones: a 24rem panel floating over a 20rem screen is
   unusable, and the composer must stay reachable above the keyboard. */
@media (max-width: 48rem) {
  .lg-assist {
    right: 0;
    bottom: 0;
    left: 0;
    top: 0;
    width: 100%;
    max-width: 100%;
    height: 100%;
    border-radius: 0;
  }
  .lg-assist-launcher { right: 1rem; bottom: 1rem; }
  .lg-assist-backdrop:not([hidden]) { display: block; }
}

/* --- Account menu (signed-in navbar) ---------------------------------------
   Mirrors .language-switcher: opens on hover AND focus-within, so it needs no
   JavaScript and stays reachable by keyboard. */

.lg-account { position: relative; }

.lg-account__button {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 0.15rem;
}

.lg-account__button:focus-visible { outline: 2px solid #006251; outline-offset: 2px; }

.lg-account__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: #006251;
  color: #fff;
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.02em;
}

.lg-account__caret {
  width: 0;
  height: 0;
  border-left: 0.3rem solid transparent;
  border-right: 0.3rem solid transparent;
  border-top: 0.35rem solid currentColor;
  opacity: 0.7;
}

/* The menu sits 0.4rem below the avatar. Without a bridge across that gap the
   pointer leaves .lg-account on the way down and the menu vanishes before it can be
   reached -- so the ::before below covers the gap, keeping hover continuous while the
   visible offset stays. */
.lg-account__menu::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -0.5rem;
  height: 0.5rem;
}

.lg-account__menu {
  position: absolute;
  right: 0;
  top: calc(100% + 0.4rem);
  min-width: 13rem;
  background: #fff;
  border: 1px solid #e6e6e6;
  border-radius: 0.5rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14);
  padding: 0.35rem 0;
  opacity: 0;
  visibility: hidden;
  z-index: 40;
}

.lg-account:hover .lg-account__menu,
.lg-account:focus-within .lg-account__menu,
.lg-account.is-open .lg-account__menu {
  opacity: 1;
  visibility: visible;
}

.lg-account__who {
  padding: 0.4rem 0.9rem 0.5rem;
  margin: 0 0 0.25rem;
  border-bottom: 1px solid #f0f0f0;
  color: #7a7a7a;
  font-size: 0.75rem;
  overflow-wrap: anywhere;
}

.lg-account__item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.5rem 0.9rem;
  border: 0;
  background: transparent;
  color: #363636;
  font-size: 0.9rem;
  font-family: inherit;
  cursor: pointer;
}

.lg-account__item:hover { background: #f5f5f5; color: #006251; }
.lg-account__item:focus-visible { outline: 2px solid #006251; outline-offset: -2px; }
.lg-account__item--danger:hover { color: #b00020; }
.lg-account__form { margin: 0; }

/* The community picker sits inline with its Open button. */
.lg-community-pick .select { flex: 0 1 auto; min-width: 0; }

/* --- Dashboard sidebar (left rail + tree) ----------------------------------
   The rail is flush to the window's left edge: it lives outside Bulma's
   .container, which centres and max-widths its children and would otherwise hold
   the rail an inch or two off the edge. The MAIN column keeps a container, so the
   content stays measured while the navigation is anchored. */

/* The navbar's real height, measured in main.js -- the rail must start exactly
   below it, and the navbar's height depends on the logo and padding. */
/* A fallback only. main.js measures the navbar and overwrites this with the real value,
   because the height depends on the logo, the padding and the font size -- none of which
   a constant here can track. */
:root { --lg-nav-h: 6.5rem; }

.lg-shell {
  display: flex;
  /* Fills the viewport below the navbar, and never more: the rail's own height must not
     be what decides how tall the shell is. */
  min-height: calc(100vh - var(--lg-nav-h));
  /* flex-start, NOT stretch: a stretched flex child is given its height by the
     container, which disables position:sticky on it. */
  align-items: flex-start;
}

.lg-shell__main {
  flex: 1 1 auto;
  min-width: 0;              /* without this the main column refuses to shrink */

  /* At LEAST as tall as the rail. The rail has a fixed height and .lg-shell is
     align-items:flex-start, so the shell takes the height of its tallest child -- and on
     a page whose content is shorter than the rail that left dead space BELOW the footer,
     which you could scroll into. Matching the rail's height here means the shell is never
     taller than the main column, so there is nothing past the footer to scroll to. */
  min-height: calc(100vh - var(--lg-nav-h));
  display: flex;
  flex-direction: column;
}

/* ...and with main now a flex column, the footer takes up the slack rather than sitting
   directly under short content with a gap beneath it. The classic sticky footer. */
.lg-shell__main > .footer {
  margin-top: auto;
}

.lg-side {
  position: sticky;
  top: var(--lg-nav-h);
  height: calc(100vh - var(--lg-nav-h));
  /* Width is a variable so the drag handle can set it; 15rem is the default. */
  flex: 0 0 var(--lg-side-w, 15rem);
  width: var(--lg-side-w, 15rem);
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow-y: auto;          /* the rail scrolls itself if the tree outgrows it */
  background: #fbfbfb;
  border-right: 1px solid #e8e8e8;
  padding: 2.5rem 0 0;
}

.lg-side__nav { flex: 1 1 auto; }

/* Pinned to the bottom of the rail. */
.lg-side__foot {
  margin-top: auto;
  border-top: 1px solid #e8e8e8;
  padding: 0.5rem 0;
  background: #fbfbfb;
}

.lg-side__foot-item {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: 0;
  background: transparent;
  color: #363636;
  font-family: inherit;
  font-size: 0.88rem;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.lg-side__foot-item:hover { background: #eef4f2; color: #006251; }
.lg-side__foot-item:focus-visible { outline: 2px solid #006251; outline-offset: -2px; }
.lg-side__foot-form { margin: 0; }
.lg-side__avatar { width: 1.75rem; height: 1.75rem; font-size: 0.7rem; flex: 0 0 auto; }
.lg-side__foot-icon { width: 1.75rem; text-align: center; flex: 0 0 auto; font-size: 1rem; }

.lg-side__toggle {
  position: absolute;
  top: 0.6rem;
  right: 0.5rem;
  border: 0;
  background: transparent;
  color: #9a9a9a;
  cursor: pointer;
  font-size: 0.95rem;
  line-height: 1;
  padding: 0.25rem 0.4rem;
  border-radius: 0.25rem;
}

.lg-side__toggle:hover { background: #eee; color: #006251; }
.lg-side__toggle:focus-visible { outline: 2px solid #006251; }
.lg-side__chevron { display: inline-block; }

/* --- the tree --- */

.lg-tree, .lg-tree__children { list-style: none; margin: 0; padding: 0; }

.lg-tree__row {
  display: flex;
  align-items: flex-start;
  gap: 0.35rem;
  width: 100%;
  padding: 0.45rem 0.75rem 0.45rem 0.5rem;
  border: 0;
  background: transparent;
  color: #363636;
  font-family: inherit;
  font-size: 0.9rem;
  line-height: 1.3;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.lg-tree__row:hover { background: #eef4f2; color: #006251; }
.lg-tree__row:focus-visible { outline: 2px solid #006251; outline-offset: -2px; }

.lg-tree__row.is-active {
  background: #e3efec;
  color: #006251;
  font-weight: 600;
  box-shadow: inset 3px 0 0 #006251;
}

/* Fixed-width gutter on every row -- branch or leaf -- so all labels align. */
.lg-tree__twisty {
  flex: 0 0 0.9rem;
  width: 0.9rem;
  text-align: center;
  font-size: 0.65rem;
  color: #9a9a9a;
  line-height: 1.6;
  transition: transform 0.12s ease;
}

/* THE overflow fix: a flex child will not shrink below its content unless told,
   so a long community name pushed straight out of the rail and over the page. */
.lg-tree__label {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
}

.lg-tree__row--branch { font-weight: 600; }

/* Children sit under a guide line, which is what makes the nesting legible. */
.lg-tree__children {
  margin-left: 1.1rem;
  border-left: 1px solid #e0e0e0;
}

.lg-tree__children .lg-tree__row { padding-left: 0.6rem; }

.lg-tree__node:not(.is-open) > .lg-tree__children { display: none; }
.lg-tree__node:not(.is-open) > .lg-tree__row .lg-tree__twisty { transform: rotate(-90deg); }

/* Collapsed rail: labels go, icons-only width, children hidden. */
.lg-side.is-collapsed { flex-basis: 3rem; width: 3rem; }
.lg-side.is-collapsed .lg-tree__label { display: none; }
.lg-side.is-collapsed .lg-tree__children { display: none; }
.lg-side.is-collapsed .lg-tree__row { justify-content: center; padding-left: 0.5rem; }
.lg-side.is-collapsed .lg-side__chevron { transform: rotate(180deg); }

@media (max-width: 48rem) {
  .lg-shell { flex-direction: column; }
  .lg-side {
    /* Static on phones: a full-height fixed rail would leave no room for content. */
    position: static;
    height: auto;
    flex: 1 1 auto;
    width: 100%;
    border-right: 0;
    border-bottom: 1px solid #e8e8e8;
    padding-top: 2.5rem;
  }
  /* An icon rail is unreadable on a narrow screen -- keep labels there. */
  .lg-side.is-collapsed { width: 100%; flex-basis: auto; }
  .lg-side.is-collapsed .lg-tree__label { display: inline; }
  .lg-side.is-collapsed .lg-tree__children { display: block; }
  .lg-side.is-collapsed .lg-tree__row { justify-content: flex-start; }
}

/* --- Password reveal -------------------------------------------------------
   The toggle sits inside the field. It flips the input's type rather than
   swapping elements, so the browser's password manager keeps tracking it. */

.lg-pw { position: relative; }

.lg-pw__input { padding-right: 2.75rem !important; }

.lg-pw__toggle {
  position: absolute;
  top: 50%;
  right: 0.4rem;
  transform: translateY(-50%);
  border: 0;
  background: transparent;
  padding: 0.3rem 0.4rem;
  cursor: pointer;
  border-radius: 0.25rem;
  line-height: 1;
}

.lg-pw__toggle:hover { background: #f0f0f0; }
.lg-pw__toggle:focus-visible { outline: 2px solid #006251; outline-offset: 1px; }

/* An eye drawn in CSS: no icon font, no extra request, and it inherits colour. */
.lg-pw__eye {
  display: block;
  width: 1.1rem;
  height: 0.72rem;
  border: 1.5px solid #7a7a7a;
  border-radius: 55% 55% 55% 55% / 62% 62% 38% 38%;
  position: relative;
}

.lg-pw__eye::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.32rem;
  height: 0.32rem;
  margin: -0.16rem 0 0 -0.16rem;
  border-radius: 50%;
  background: #7a7a7a;
}

.lg-pw__toggle:hover .lg-pw__eye,
.lg-pw__toggle:hover .lg-pw__eye::after { border-color: #006251; background-color: #006251; }

/* Pressed = password visible: strike the eye through. */
.lg-pw__toggle[aria-pressed="true"] .lg-pw__eye::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -0.15rem;
  right: -0.15rem;
  height: 1.5px;
  background: #006251;
  transform: rotate(-20deg);
}

/* --- Inline icons ----------------------------------------------------------
   One box for every icon so rows line up whatever glyph they carry, and a real
   gap so the icon never crowds its label. */

.lg-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 1rem;
  height: 1rem;
  color: #7a7a7a;
}

.lg-icon svg { display: block; width: 1rem; height: 1rem; }

/* Menu rows: flex, so the icon column and the label are laid out rather than
   run together as inline content. */
.lg-account__item {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.lg-account__item:hover .lg-icon { color: #006251; }
.lg-account__item--danger:hover .lg-icon { color: #b00020; }

/* The rail's foot uses the same icon box, so its rows align with the tree above. */
.lg-side__foot-item .lg-side__foot-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  flex: 0 0 auto;
}

.lg-side__foot-item:hover .lg-icon { color: #006251; }

/* --- Rail resize handle ----------------------------------------------------
   A thin strip on the rail's right edge. Wider than it looks (the ::before
   extends the hit area) so it is grabbable without hunting for a 1px target. */

.lg-side__resize {
  position: absolute;
  top: 0;
  right: -2px;
  width: 5px;
  height: 100%;
  cursor: col-resize;
  z-index: 5;
  background: transparent;
}

.lg-side__resize::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -3px;
  right: -3px;              /* ~11px of grabbable width, 5px of visible one */
}

.lg-side__resize:hover,
.lg-side__resize:focus-visible { background: #006251; outline: none; }

/* While dragging: kill selection and pointer events on the content, or the drag
   selects text across the page and the cursor flickers over the main column. */
body.lg-resizing { cursor: col-resize; user-select: none; }
body.lg-resizing .lg-shell__main { pointer-events: none; }

/* Collapsed or on a phone the rail is not resizable. */
.lg-side.is-collapsed .lg-side__resize { display: none; }

@media (max-width: 48rem) {
  .lg-side__resize { display: none; }
  .lg-side { flex-basis: auto; width: 100%; }
}

/* --- auth pages (sign-up / log-in) ---------------------------------------
   One centred column on the page background. The previous layout was a primary-green
   section with an absolutely-positioned white panel over 65% of it and two decorative
   SVGs pinned to its corners; it fought every change to the form's height and left a
   large empty band beside a short form. */
.lg-auth {
  max-width: 32rem;
  margin: 0 auto;
}

.lg-auth__head {
  text-align: center;
  margin-bottom: 2rem;
}

.lg-auth__logo {
  max-height: 5.5rem;
  width: auto;
  margin: 0 auto 1.25rem;
}

/* The card. A plain white panel with a hairline border rather than Bulma's .box
   shadow -- on a white page a shadow reads as a bug, not as depth. */
.lg-auth__card {
  background: #fff;
  border: 1px solid #e6e8e6;
  border-radius: 8px;
  padding: 2rem 1.75rem;
}

@media screen and (min-width: 769px) {
  .lg-auth__card { padding: 2.5rem 2.5rem; }
}

/* --- CSS-only tabs -------------------------------------------------------
   Radio inputs plus :checked sibling selectors: no JavaScript, and every field stays
   in the DOM whether or not its panel is showing, so a hidden panel cannot affect what
   the form submits. Only OPTIONAL fields live behind a tab -- a `required` control in a
   display:none panel is one the browser refuses to focus, and the form then fails to
   submit with no visible reason why. */
.lg-tabs__radio {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

.lg-tabs__nav {
  display: flex;
  gap: 0.25rem;
  border-bottom: 1px solid #e6e8e6;
  margin-bottom: 1.5rem;
}

.lg-tabs__label {
  flex: 1;
  text-align: center;
  padding: 0.65rem 0.5rem;
  margin-bottom: -1px;
  border-bottom: 2px solid transparent;
  color: #7a7a7a;
  font-size: 0.9rem;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.lg-tabs__label:hover { color: #363636; }

.lg-tabs__panel { display: none; }

/* Keyboard focus has to be visible: the radio itself is off-screen, so the ring goes
   on the label it controls. */
.lg-tabs__radio:focus-visible + .lg-tabs__radio + .lg-tabs__nav > .lg-tabs__label:first-child,
.lg-tabs__radio:focus-visible ~ .lg-tabs__nav > .lg-tabs__label {
  outline: 2px solid #b5d99c;
  outline-offset: 2px;
}

#lg-tab-1:checked ~ .lg-tabs__nav > [for="lg-tab-1"],
#lg-tab-2:checked ~ .lg-tabs__nav > [for="lg-tab-2"] {
  color: #363636;
  font-weight: 600;
  border-bottom-color: #8ac53e;
}

#lg-tab-1:checked ~ .lg-tabs__panels > .lg-tabs__panel--1,
#lg-tab-2:checked ~ .lg-tabs__panels > .lg-tabs__panel--2 {
  display: block;
}

/* --- invite landing ------------------------------------------------------- */
.lg-invite__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  flex: 0 0 3.5rem;
  border-radius: 50%;
  background: #8ac53e;
  color: #fff;
  font-weight: 600;
  font-size: 1.1rem;
  /* Sized for a photo, not for initials: avatar upload is not built yet, so the space
     is reserved rather than the layout being drawn around two letters and then redrawn. */
}

.lg-invite__note {
  border-left: 3px solid #8ac53e;
  padding: 0.25rem 0 0.25rem 0.9rem;
  color: #363636;
  font-style: italic;
}

/* --- closed dropdowns must not add page height ----------------------------
   A menu hidden with `visibility: hidden` is still LAID OUT, and an absolutely
   positioned box contributes to its scroll container's overflow whether you can see it
   or not. The footer's language switcher is ~290px of closed menu sitting at the bottom
   of the page: it made the document taller than its own content, so you could scroll
   past the footer into nothing and it dragged the rail up with it.

   `display: none` removes it from layout entirely. `transition-behavior: allow-discrete`
   keeps the fade -- display is discrete, so without it the browser would snap. Browsers
   that do not know the property ignore it and the menu simply appears without the fade,
   which is the right way for this to degrade. */
.language-switcher__menu,
.lg-account__menu {
  display: none;
  transition-behavior: allow-discrete;
}

.language-switcher:hover .language-switcher__menu,
.language-switcher:focus-within .language-switcher__menu,
.lg-account.is-open .lg-account__menu,
.lg-account:hover .lg-account__menu,
.lg-account:focus-within .lg-account__menu {
  display: block;
}

/* --- ...and at the foot of the page, a menu should open upward -------------
   Even with the overflow fixed, a 16-language menu dropping DOWN from the footer opens
   below the fold: it works, and you cannot see it. Scoped to the footer so the navbar
   switcher, which has the whole page beneath it, keeps dropping down. */
.footer .language-switcher__menu {
  top: auto;
  bottom: 100%;
  margin: 0 0 0.25rem;
  transform: translateY(0.25rem);
}

.footer .language-switcher:hover .language-switcher__menu,
.footer .language-switcher:focus-within .language-switcher__menu {
  transform: translateY(0);
}

/* The hover bridge flips with it, or the pointer crosses a gap on the way up. */
.footer .language-switcher__menu::before {
  top: auto;
  bottom: -0.35rem;
}