@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,600;9..144,700;9..144,800&family=Manrope:wght@400;500;700;800&display=swap');

:root {
  color-scheme: light;
  --topbar-sticky-offset: 6.25rem;
  --nav-shell-bg: rgba(255, 255, 255, 0.025);
  --nav-shell-border: rgba(255, 255, 255, 0.34);
  --nav-shell-radius: 26px;
  --nav-shell-min-height: 5.1rem;
  --nav-active-bee-image: url('../images/site/beeflying.png');
  --bg: #f8f1de;
  --panel: rgba(255, 243, 214, 0.9);
  --panel-strong: #ffedbe;
  --ink: #050505;
  --muted: #6b5a40;
  --gold: #f0b429;
  --gold-deep: #c98600;
  --olive: #6c7a36;
  --olive-deep: #44501f;
  --brick: #b84a1a;
  --shadow: 0 24px 60px rgba(86, 58, 12, 0.16);
  font-family: 'Manrope', sans-serif;
  line-height: 1.5;
  font-weight: 400;
  color: var(--ink);
  background:
    radial-gradient(circle at top left, rgba(255, 255, 255, 0.42), transparent 34%),
    radial-gradient(circle at bottom right, rgba(255, 255, 255, 0.16), transparent 28%),
    linear-gradient(180deg, #dff5ff 0%, #c7ebff 40%, #9fd8ff 100%);
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
}

body {
  min-height: 100vh;
  background:
    radial-gradient(circle at 12% 14%, rgba(255, 255, 255, 0.74), transparent 24%),
    radial-gradient(circle at 84% 12%, rgba(255, 255, 255, 0.2), transparent 18%),
    radial-gradient(circle at 76% 82%, rgba(255, 255, 255, 0.12), transparent 18%),
    linear-gradient(180deg, #d9f3ff 0%, #bfe6fb 42%, #87ceeb 100%);
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
textarea,
select {
  font: inherit;
}

.app-frame {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  padding: 1.2rem;
  isolation: isolate;
}

.app-frame::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(circle at 10% 12%, rgba(255, 255, 255, 0.5), transparent 24%),
    radial-gradient(circle at 88% 76%, rgba(255, 255, 255, 0.16), transparent 20%),
    linear-gradient(180deg, rgba(220, 244, 255, 0.95) 0%, rgba(191, 230, 251, 0.96) 42%, rgba(135, 206, 235, 0.98) 100%);
}

.app-frame::after {
  content: '';
  position: fixed;
  inset: -56px;
  z-index: -3;
  pointer-events: none;
  opacity: 0.44;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='190' viewBox='0 0 220 190'%3E%3Cg fill='none' stroke='%23d29512' stroke-width='5' stroke-opacity='0.3'%3E%3Cpath d='M55 8 100 34v52L55 112 10 86V34z'/%3E%3Cpath d='M165 8l45 26v52l-45 26-45-26V34z'/%3E%3Cpath d='M110 91l45 26v52l-45 26-45-26v-52z'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 220px 190px repeat;
  background-position: 0 0;
  will-change: background-position;
  animation: honeycomb-drift 56s linear infinite;
}

.sky-illustration-layer {
  position: fixed;
  top: 0;
  left: 50%;
  z-index: -2;
  width: 100%;
  /* height: clamp(180px, 24vw, 360px); */
  pointer-events: none;
  transform: translateX(-50%);
  overflow: hidden;
}

.sky-illustration {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  opacity: 0.95;
  /.account-action: saturate(1.02) contrast(1.02);
}

.topbar {
  position: sticky;
  top: 0.85rem;
  z-index: 1200;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: 'brand nav actions';
  gap: 0.62rem;
  align-items: center;
  min-height: var(--nav-shell-min-height);
  width: min(1360px, calc(100vw - 2.4rem));
  margin: 0.85rem auto 0;
  padding: 0.8rem 1rem;
  overflow: hidden;
  isolation: isolate;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0) 52%, rgba(255, 236, 177, 0.015)),
    var(--nav-shell-bg);
  border: 1px solid var(--nav-shell-border);
  border-radius: var(--nav-shell-radius);
  color: #050505;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.42),
    inset 0 -10px 18px rgba(255, 255, 255, 0.018),
    var(--shadow);
  backdrop-filter: blur(8px) saturate(1.08);
  -webkit-backdrop-filter: blur(8px) saturate(1.08);
  transition: background 200ms ease, border-color 200ms ease, box-shadow 200ms ease, padding 180ms ease;
}

.topbar.topbar-member {
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: 'brand nav actions';
  column-gap: 0.62rem;
  row-gap: 0;
  align-items: center;
  padding: 0.76rem 0.78rem;
}

.topbar > * {
  position: relative;
  z-index: 1;
}

.topbar .brand-lockup {
  grid-area: brand;
}

.topbar .nav-form {
  grid-area: actions;
  display: flex;
  align-items: center;
  gap: 0.42rem;
  justify-self: end;
}

.topbar.topbar-member .brand-lockup {
  gap: 0.66rem;
}

.topbar.topbar-member .brand-mark {
  width: 2.88rem;
}

.topbar.topbar-member .brand-kicker {
  font-size: 0.72rem;
  letter-spacing: 0.15em;
}

.topbar.topbar-member .brand-name {
  font-size: 1.12rem;
}

.topbar .nav-strip {
  grid-area: nav;
  min-width: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  gap: 0.2rem;
}

.topbar .nav-strip .nav-link {
  min-height: 2.55rem;
  padding: 0.48rem 0.78rem;
  font-size: 0.98rem;
  font-weight: 800;
  line-height: 1.2;
  white-space: nowrap;
  position: relative;
  z-index: 0;
}

.topbar .nav-strip .nav-strip-row {
  justify-content: center;
  gap: 0.56rem;
  flex-wrap: nowrap;
}

.topbar.topbar-member .nav-form {
  justify-self: end;
}

.topbar.topbar-member .nav-form form {
  margin: 0;
}

.topbar.topbar-member .nav-form .login-action {
  padding: 0.68rem 0.98rem;
}

.topbar.is-scrolled {
  /* Keep the same background colour on scroll; only subtle elevation change */
  border-color: rgba(255, 255, 255, 0.54);
  box-shadow: 0 22px 52px rgba(72, 40, 8, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

.topbar::before,
.topbar::after {
  content: '';
  position: absolute;
  z-index: 0;
  pointer-events: none;
}

.topbar::before {
  top: 4px;
  bottom: 4px;
  left: 50%;
  right: 0;
  border-radius: 0 20px 20px 0;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.035) 42%, rgba(255, 255, 255, 0.01)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='84' viewBox='0 0 96 84'%3E%3Cg fill='none' stroke='%23ab5808' stroke-width='2.7' stroke-opacity='0.98' stroke-linejoin='round'%3E%3Cpath d='M24 0 48 14v28L24 56 0 42V14z'/%3E%3Cpath d='M72 0 96 14v28L72 56 48 42V14z'/%3E%3Cpath d='M0 -42 24 -28V0L0 14-24 0v-28z'/%3E%3Cpath d='M48 -42 72 -28V0L48 14 24 0v-28z'/%3E%3Cpath d='M96 -42 120 -28V0L96 14 72 0v-28z'/%3E%3Cpath d='M0 42 24 56v28L0 98-24 84V56z'/%3E%3Cpath d='M48 42 72 56v28L48 98 24 84V56z'/%3E%3Cpath d='M96 42 120 56v28L96 98 72 84V56z'/%3E%3C/g%3E%3C/svg%3E") right center / 86px 74px repeat;
  opacity: 0.58;
  -webkit-mask-image: linear-gradient(90deg, rgba(255,255,255,0.02) 0%, rgba(255,255,255,0.06) 14%, rgba(255,255,255,0.2) 34%, rgba(255,255,255,0.54) 68%, rgba(255,255,255,1) 100%);
  mask-image: linear-gradient(90deg, rgba(255,255,255,0.02) 0%, rgba(255,255,255,0.06) 14%, rgba(255,255,255,0.2) 34%, rgba(255,255,255,0.54) 68%, rgba(255,255,255,1) 100%);
}

.topbar::after {
  inset: 1px;
  border-radius: calc(var(--nav-shell-radius) - 1px);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0) 18%),
    radial-gradient(ellipse at 5% 8%, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0) 18%),
    radial-gradient(ellipse at 96% 10%, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0) 16%);
  box-shadow:
    inset 12px 0 18px rgba(255, 255, 255, 0.045),
    inset -12px 0 18px rgba(255, 255, 255, 0.04);
  opacity: 0.34;
}

/* Tighter nav spacing so links fit neater */
.nav-strip {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.2rem;
  align-items: center;
}

.nav-strip-row {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.56rem;
  align-items: center;
}

.nav-strip .nav-link {
  margin: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.55rem;
  padding: 0.48rem 0.78rem;
  border: 1px solid rgba(201, 134, 0, 0.18);
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(255, 248, 227, 0.98), rgba(255, 232, 177, 0.88));
  box-shadow: 0 10px 22px rgba(122, 82, 12, 0.12);
  font-size: 0.98rem;
  font-weight: 800;
  position: relative;
  z-index: 0;
  overflow: visible;
  white-space: nowrap;
}

.nav-strip .nav-link:hover,
.nav-strip .nav-link.active {
  background: linear-gradient(135deg, rgba(255, 217, 121, 0.94), rgba(239, 166, 0, 0.94));
  color: #050505;
  box-shadow: 0 14px 26px rgba(103, 68, 12, 0.18);
}

.topbar.topbar-member .nav-strip .nav-link,
.topbar .nav-strip .nav-link {
  padding: 0.48rem 0.78rem;
}

.member-directory-table-wrap {
  overflow-x: auto;
}

.member-directory-table {
  width: 100%;
  border-collapse: collapse;
}

.member-directory-table th,
.member-directory-table td {
  padding: 1rem 0.95rem;
  text-align: left;
  vertical-align: middle;
  border-bottom: 1px solid rgba(120, 85, 14, 0.14);
}

.member-directory-table th {
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.member-directory-table tbody tr:hover {
  background: rgba(255, 248, 227, 0.55);
}

.member-directory-person {
  display: flex;
  gap: 0.85rem;
  align-items: center;
}

.member-directory-person img {
  width: 2.8rem;
  height: 2.8rem;
  border-radius: 999px;
  object-fit: cover;
  border: 1px solid rgba(201, 134, 0, 0.22);
  background: rgba(255, 255, 255, 0.82);
}

.member-directory-person strong {
  display: block;
  font-size: 1rem;
}

.member-directory-person .pill-badge {
  margin-top: 0.18rem;
}

.nav-link,
.login-action,
.primary-action,
.secondary-action,
.link-button,
.danger-action {
  border-radius: 999px;
  transition: transform 160ms ease, background 160ms ease, color 160ms ease;
}

.nav-link {
  padding: 0.5rem 0.8rem;
  color: #050505;
}

.nav-link:hover,
.nav-link.active {
  background: linear-gradient(135deg, rgba(255, 214, 108, 0.18), rgba(255, 214, 108, 0.06));
  color: #050505;
}

.nav-strip .nav-link.active {
  isolation: isolate;
}

.nav-strip .nav-link::before {
  content: none;
}

.nav-strip .nav-link.active::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 3.35rem;
  height: 3.1rem;
  pointer-events: none;
  z-index: -1;
  opacity: 0.88;
  background: var(--nav-active-bee-image) center / contain no-repeat;
  filter: drop-shadow(0 10px 12px rgba(82, 50, 8, 0.22));
  transform: translate(-50%, -50%) rotate(-6deg);
  transform-origin: center;
}

.login-action,
.primary-action,
.secondary-action,
.link-button,
.danger-action {
  border: none;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.login-action::after,
.primary-action::after,
.secondary-action::after,
.link-button::after,
.danger-action::after {
  content: '';
  position: absolute;
  inset: -120% auto auto -36%;
  width: 42%;
  height: 260%;
  opacity: 0.32;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.88), rgba(255, 255, 255, 0));
  transform: rotate(20deg) translateX(0);
  animation: slideShine 1200ms linear infinite paused;
}

@keyframes slideShine {
  from { transform: rotate(20deg) translateX(0); }
  to { transform: rotate(20deg) translateX(360%); }
}

.login-action,
.primary-action {
  padding: 0.8rem 1.2rem;
  background: linear-gradient(135deg, #ffd979, #efa600);
  color: #432b00;
  font-weight: 800;
  box-shadow: 0 12px 26px rgba(160, 110, 5, 0.22);
}

.secondary-action,
.link-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.7rem;
  padding: 0.65rem 0.95rem;
  background: linear-gradient(135deg, rgba(255, 248, 227, 0.98), rgba(255, 232, 177, 0.88));
  border: 1px solid rgba(201, 134, 0, 0.18);
  color: var(--ink);
  font-weight: 700;
  box-shadow: 0 10px 22px rgba(122, 82, 12, 0.12);
}

.danger-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.7rem;
  padding: 0.65rem 1rem;
  background: linear-gradient(135deg, #d66b35, #a73a16);
  color: #fff8f1;
  font-weight: 800;
  box-shadow: 0 12px 24px rgba(167, 58, 22, 0.2);
}

.danger-action-compact {
  min-height: 2.7rem;
  padding: 0.65rem 1rem;
  font-size: 1rem;
}

.icon-button {
  display: inline-grid;
  place-items: center;
  min-width: 2.2rem;
  min-height: 2.2rem;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(255, 248, 227, 0.98), rgba(255, 232, 177, 0.88));
  border: 1px solid rgba(201, 134, 0, 0.12);
  font-weight: 800;
}

.login-action:hover,
.primary-action:hover,
.secondary-action:hover,
.link-button:hover,
.danger-action:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 26px rgba(103, 68, 12, 0.18);
}

.login-action:hover::after,
.primary-action:hover::after,
.secondary-action:hover::after,
.link-button:hover::after,
.danger-action:hover::after {
  animation-play-state: running;
}

.secondary-action.is-active {
  background: linear-gradient(135deg, rgba(255, 217, 121, 0.94), rgba(239, 166, 0, 0.94));
  border-color: rgba(201, 134, 0, 0.28);
  color: #432b00;
}

.action-button-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.button-spinner {
  display: none;
  width: 0.95rem;
  height: 0.95rem;
  border-radius: 999px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  animation: button-spin 0.8s linear infinite;
}

.login-action.is-loading,
.primary-action.is-loading,
.secondary-action.is-loading,
.link-button.is-loading,
.danger-action.is-loading {
  pointer-events: none;
  opacity: 0.82;
}

.login-action.is-loading::after,
.primary-action.is-loading::after,
.secondary-action.is-loading::after,
.link-button.is-loading::after,
.danger-action.is-loading::after {
  opacity: 0;
}

.login-action.is-loading .button-spinner,
.primary-action.is-loading .button-spinner,
.secondary-action.is-loading .button-spinner,
.link-button.is-loading .button-spinner,
.danger-action.is-loading .button-spinner {
  display: inline-block;
}

.nav-form {
  --topbar-action-size: 3rem;
  margin: 0;
}

.nav-form .login-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--topbar-action-size);
  padding: 0.58rem 1.02rem;
}

/* Compact layout tweaks for smaller screens */
@media (max-width: 820px) {
  .topbar { gap: 0.28rem; padding: 0.35rem 0.5rem; width: min(100%, calc(100vw - 1rem)); }
  .topbar > * { padding: 0; }
  .nav-strip { gap: 0.1rem; justify-content: flex-start; }
  .nav-strip .nav-link { padding: 0.45rem 0.7rem; font-size: 0.94rem; }
  .nav-strip .nav-link + .nav-link { margin-left: 0; }
  .nav-form .login-action { padding: 0.22rem 0.5rem; }

  .topbar .nav-strip {
    align-items: center;
  }

  .topbar .nav-strip .nav-strip-row {
    justify-content: center;
  }

}

.account-action {
  display: inline-grid;
  place-items: center;
  width: var(--topbar-action-size);
  height: var(--topbar-action-size);
  padding: 0;
  flex: 0 0 auto;
  border: 2px solid rgba(122, 59, 4, 0.28);
  overflow: hidden;
}

.account-action.account-action--placeholder {
  background: linear-gradient(135deg, #eef2f6, #d7dee6);
  color: #66707a;
  box-shadow: 0 12px 24px rgba(84, 96, 108, 0.16);
}

.account-action img {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
  display: block;
}

.account-action img.account-action-placeholder {
  object-fit: contain;
  padding: 0.22rem;
  transform: scale(1);
}

.account-action.active {
  background: linear-gradient(135deg, #ffe29a, #f2b31d);
  box-shadow: 0 14px 28px rgba(160, 110, 5, 0.26);
}

.brand-lockup {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.brand-mark {
  display: grid;
  place-items: center;
  width: 3rem;
  aspect-ratio: 1;
  background: linear-gradient(145deg, #ffd56c, #e5a600);
  color: #4f3205;
  font-weight: 800;
  clip-path: polygon(25% 6%, 75% 6%, 100% 50%, 75% 94%, 25% 94%, 0 50%);
  box-shadow: 0 14px 24px rgba(55, 35, 2, 0.2);
}

.brand-kicker,
.eyebrow {
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.75rem;
  line-height: 1.3;
  color: var(--gold-deep);
}

.brand-kicker {
  color: rgba(0, 0, 0, 0.72);
}

.brand-name,
h1,
h2,
h3 {
  font-family: 'Fraunces', serif;
}

.brand-name {
  font-size: 1.2rem;
  font-weight: 700;
}

.nav-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.45rem;
}

.nav-form {
  margin: 0;
}

.nav-link,
.login-action,
.primary-action,
.secondary-action,
.link-button,
.danger-action {
  border-radius: 999px;
  transition: transform 160ms ease, background 160ms ease, color 160ms ease;
}

.nav-link {
  padding: 0.5rem 0.8rem;
  color: #050505;
}

.nav-link:hover,
.nav-link.active {
  background: linear-gradient(135deg, rgba(255, 214, 108, 0.18), rgba(255, 214, 108, 0.06));
  color: #050505;
}

.nav-strip .nav-link.active {
  isolation: isolate;
}

.nav-strip .nav-link::before {
  content: none;
}

.nav-strip .nav-link.active::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 3.35rem;
  height: 3.1rem;
  pointer-events: none;
  z-index: -1;
  opacity: 0.88;
  background: var(--nav-active-bee-image) center / contain no-repeat;
  filter: drop-shadow(0 10px 12px rgba(82, 50, 8, 0.22));
  transform: translate(-50%, -50%) rotate(-6deg);
  transform-origin: center;
}

.login-action,
.primary-action,
.secondary-action,
.link-button,
.danger-action {
  border: none;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.login-action::after,
.primary-action::after,
.secondary-action::after,
.link-button::after,
.danger-action::after {
  content: '';
  position: absolute;
  inset: -120% auto auto -36%;
  width: 42%;
  height: 260%;
  opacity: 0.32;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.88), rgba(255, 255, 255, 0));
  transform: rotate(20deg) translateX(0);
  animation: slideShine 1200ms linear infinite paused;
}

@keyframes slideShine {
  from { transform: rotate(20deg) translateX(0); }
  to { transform: rotate(20deg) translateX(360%); }
}

.login-action,
.primary-action {
  padding: 0.8rem 1.2rem;
  background: linear-gradient(135deg, #ffd979, #efa600);
  color: #432b00;
  font-weight: 800;
  box-shadow: 0 12px 26px rgba(160, 110, 5, 0.22);
}

.secondary-action,
.link-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.7rem;
  padding: 0.65rem 0.95rem;
  background: linear-gradient(135deg, rgba(255, 248, 227, 0.98), rgba(255, 232, 177, 0.88));
  border: 1px solid rgba(201, 134, 0, 0.18);
  color: var(--ink);
  font-weight: 700;
  box-shadow: 0 10px 22px rgba(122, 82, 12, 0.12);
}

.danger-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.7rem;
  padding: 0.65rem 1rem;
  background: linear-gradient(135deg, #d66b35, #a73a16);
  color: #fff8f1;
  font-weight: 800;
  box-shadow: 0 12px 24px rgba(167, 58, 22, 0.2);
}

.danger-action-compact {
  /* make compact variant consistent with other buttons */
  min-height: 2.7rem;
  padding: 0.65rem 1rem;
  font-size: 1rem;
}

.icon-button {
  display:inline-grid;
  place-items:center;
  min-width:2.2rem;
  min-height:2.2rem;
  border-radius:999px;
  background: linear-gradient(135deg, rgba(255,248,227,0.98), rgba(255,232,177,0.88));
  border:1px solid rgba(201,134,0,0.12);
  font-weight:800;
}

.login-action:hover,
.primary-action:hover,
.secondary-action:hover,
.link-button:hover,
.danger-action:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 26px rgba(103, 68, 12, 0.18);
}

.login-action:hover::after,
.primary-action:hover::after,
.secondary-action:hover::after,
.link-button:hover::after,
.danger-action:hover::after {
  animation-play-state: running;
}

.secondary-action.is-active {
  background: linear-gradient(135deg, rgba(255, 217, 121, 0.94), rgba(239, 166, 0, 0.94));
  border-color: rgba(201, 134, 0, 0.28);
  color: #432b00;
}

.action-button-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.button-spinner {
  display: none;
  width: 0.95rem;
  height: 0.95rem;
  border-radius: 999px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  animation: button-spin 0.8s linear infinite;
}

.login-action.is-loading,
.primary-action.is-loading,
.secondary-action.is-loading,
.link-button.is-loading,
.danger-action.is-loading {
  pointer-events: none;
  opacity: 0.82;
}

.login-action.is-loading::after,
.primary-action.is-loading::after,
.secondary-action.is-loading::after,
.link-button.is-loading::after,
.danger-action.is-loading::after {
  opacity: 0;
}

.login-action.is-loading .button-spinner,
.primary-action.is-loading .button-spinner,
.secondary-action.is-loading .button-spinner,
.link-button.is-loading .button-spinner,
.danger-action.is-loading .button-spinner {
  display: inline-block;
}

@keyframes button-spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.nav-form .account-action {
  width: var(--topbar-action-size);
  height: var(--topbar-action-size);
  min-width: var(--topbar-action-size);
  min-height: var(--topbar-action-size);
  box-sizing: border-box;
  padding: 0;
  border: 2px solid rgba(122, 59, 4, 0.34);
  border-radius: 999px;
}

.nav-form .account-action img {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  border-radius: inherit;
  object-fit: cover;
}

.nav-form .account-action img.account-action-placeholder {
  padding: 0.2rem;
  object-fit: contain;
}

.topbar.topbar-member .nav-form > a.login-action.account-action {
  display: block;
  width: var(--topbar-action-size);
  height: var(--topbar-action-size);
  min-width: var(--topbar-action-size);
  min-height: var(--topbar-action-size);
  aspect-ratio: 1;
  box-sizing: border-box;
  padding: 0 !important;
  border: 2px solid rgba(122, 59, 4, 0.38);
  border-radius: 999px;
  overflow: hidden;
  line-height: 0;
}

.topbar.topbar-member .nav-form > a.login-action.account-action > img.account-action-image {
  display: block;
  width: 100% !important;
  height: 100% !important;
  max-width: none;
  margin: 0;
  padding: 0;
  border-radius: 999px;
  object-fit: cover;
  object-position: center;
}

.topbar.topbar-member .nav-form > a.login-action.account-action > img.account-action-placeholder {
  padding: 0.2rem;
  object-fit: contain;
}

.flash-banner {
  width: min(1360px, calc(100vw - 2.4rem));
  margin: 1rem auto 0;
  padding: 0.9rem 1rem;
  border-radius: 18px;
  background: rgba(255, 248, 230, 0.94);
  color: var(--ink);
  box-shadow: var(--shadow);
}

.login-welcome {
  position: fixed;
  top: 0.55rem;
  left: 50%;
  z-index: 1600;
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.75rem 1.15rem 0.75rem 0.85rem;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid rgba(122, 59, 4, 0.22);
  border-radius: 999px;
  background:
    radial-gradient(circle at 18% 30%, rgba(255, 221, 140, 0.55), transparent 24%),
    linear-gradient(135deg, rgba(255, 204, 97, 0.98) 0%, rgba(226, 140, 31, 0.97) 52%, rgba(171, 88, 8, 0.97) 100%);
  color: #fff7e2;
  box-shadow: 0 22px 46px rgba(72, 40, 8, 0.28);
  pointer-events: none;
  transform: translateX(-50%);
  animation: login-welcome-fade 5s ease forwards;
}

.login-welcome::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.34;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='84' viewBox='0 0 96 84'%3E%3Cg fill='none' stroke='%23fff1c8' stroke-width='2.6' stroke-opacity='0.9' stroke-linejoin='round'%3E%3Cpath d='M24 0 48 14v28L24 56 0 42V14z'/%3E%3Cpath d='M72 0 96 14v28L72 56 48 42V14z'/%3E%3Cpath d='M0 42 24 56v28L0 98-24 84V56z'/%3E%3Cpath d='M48 42 72 56v28L48 98 24 84V56z'/%3E%3C/g%3E%3C/svg%3E") center / 74px 64px repeat;
}

.login-welcome::after {
  content: '';
  position: absolute;
  inset: 1px;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255, 248, 225, 0.12), transparent 46%, rgba(90, 46, 4, 0.12));
}

.login-welcome-copy {
  margin: 0;
  color: #fff7e2;
  font-family: 'Fraunces', serif;
  font-size: clamp(1rem, 0.95rem + 0.5vw, 1.35rem);
  font-weight: 700;
  line-height: 1.1;
  text-shadow: 0 2px 8px rgba(63, 34, 5, 0.22);
  white-space: nowrap;
}

.login-welcome-name {
  color: #ffe39a;
}

.login-welcome-bee {
  width: 5.4rem;
  height: 3.8rem;
  flex: 0 0 auto;
  filter: drop-shadow(0 10px 14px rgba(72, 48, 8, 0.22));
  animation: login-bee-bob 1.8s ease-in-out infinite;
}

.login-welcome-bee svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.login-welcome-bee .bee-wing-left {
  transform-origin: 102px 74px;
  animation: login-wing-left 0.16s ease-in-out infinite alternate;
}

.login-welcome-bee .bee-wing-right {
  transform-origin: 120px 72px;
  animation: login-wing-right 0.16s ease-in-out infinite alternate;
}

@keyframes login-welcome-fade {
  0% {
    opacity: 0;
    transform: translate(-50%, -0.55rem) scale(0.96);
  }

  10%,
  82% {
    opacity: 1;
    transform: translate(-50%, 0) scale(1);
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -0.75rem) scale(0.98);
  }
}

@keyframes login-bee-bob {
  0%,
  100% {
    transform: translateY(0) rotate(-2deg);
  }

  50% {
    transform: translateY(-0.25rem) rotate(1deg);
  }
}

@keyframes login-wing-left {
  from {
    transform: rotate(-6deg);
  }

  to {
    transform: rotate(-18deg);
  }
}

@keyframes login-wing-right {
  from {
    transform: rotate(6deg);
  }

  to {
    transform: rotate(18deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .login-welcome,
  .login-welcome-bee,
  .login-welcome-bee .bee-wing-left,
  .login-welcome-bee .bee-wing-right {
    animation: none;
  }
}

.page-shell {
  width: min(1360px, calc(100vw - 2.4rem));
  margin: 1.4rem auto 0;
  display: grid;
  gap: 1.25rem;
}

.content-stack {
  display: grid;
  gap: 1.2rem;
}

.hero-panel,
.content-section,
.standalone-panel {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at top right, rgba(255, 214, 108, 0.18), transparent 32%),
    radial-gradient(circle at bottom left, rgba(108, 122, 54, 0.12), transparent 24%),
    linear-gradient(180deg, rgba(255, 248, 227, 0.96), rgba(255, 238, 203, 0.9));
  border: 1px solid rgba(106, 75, 10, 0.1);
  border-radius: 32px;
  box-shadow: var(--shadow);
}

.hero-panel::after,
.content-section::after,
.standalone-panel::after,
.feature-card::after {
  content: '';
  position: absolute;
  right: -2.5rem;
  bottom: -2.5rem;
  width: 190px;
  height: 150px;
  opacity: 0.18;
  pointer-events: none;
  background: none;
}

.hero-panel > *,
.content-section > *,
.standalone-panel > *,
.feature-card > * {
  position: relative;
  z-index: 1;
}

.hero-panel {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(280px, 0.9fr);
  gap: 2rem;
  padding: clamp(1.5rem, 4vw, 3rem);
  overflow: hidden;
}

.hero-copy h1,
.section-heading h2,
.standalone-panel h1 {
  margin: 0.35rem 0 0.8rem;
  font-size: clamp(2.3rem, 5vw, 4.6rem);
  line-height: 0.98;
}

.standalone-panel h1 {
  font-size: clamp(2rem, 4vw, 3.8rem);
}

.hero-text,
.page-copy,
.feature-card p,
.surface-copy {
  margin: 0;
  color: var(--muted);
  max-width: 60ch;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin-top: 1.5rem;
}

.hero-visual {
  position: relative;
  min-height: 360px;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 50% 20%, rgba(255, 232, 166, 0.9), rgba(255, 232, 166, 0) 50%),
    linear-gradient(180deg, rgba(249, 226, 158, 0.5), rgba(255, 255, 255, 0));
  border-radius: 28px;
}

.bee-float {
  position: relative;
  width: 180px;
  height: 180px;
  animation: bee-bob 3.8s ease-in-out infinite;
}

.bee-illustration,
.bee-wing,
.bee-body,
.bee-face,
.bee-stripe {
  position: absolute;
}

.bee-illustration {
  inset: 0;
}

.bee-wing {
  top: 28px;
  width: 72px;
  height: 96px;
  border-radius: 60% 60% 55% 55%;
  background: rgba(255, 255, 255, 0.56);
  border: 2px solid rgba(120, 104, 82, 0.18);
  transform-origin: bottom center;
  animation: wing-flutter 140ms ease-in-out infinite alternate;
}

.bee-wing-left {
  left: 16px;
}

.bee-wing-right {
  right: 16px;
}

.bee-body {
  top: 48px;
  left: 46px;
  width: 88px;
  height: 108px;
  border-radius: 48% 48% 42% 42%;
  background: linear-gradient(180deg, #262013, #51420c 16%, #f7b60a 16%, #f7b60a 33%, #2a220f 33%, #2a220f 49%, #f8bf26 49%, #f8bf26 66%, #2b2212 66%, #2b2212 83%, #f4c84b 83%, #f4c84b 100%);
  box-shadow: 0 16px 36px rgba(90, 56, 7, 0.22);
}

.bee-stripe {
  left: 71px;
  width: 40px;
  background: rgba(36, 29, 18, 0.55);
  border-radius: 999px;
}

.bee-stripe-one {
  top: 88px;
  height: 10px;
}

.bee-stripe-two {
  top: 116px;
  height: 10px;
}

.bee-face {
  top: 44px;
  left: 68px;
  width: 44px;
  height: 34px;
  background: #1f190e;
  border-radius: 48% 48% 36% 36%;
}

.hex-grid {
  position: absolute;
  inset: auto 1.25rem 1.25rem auto;
  display: grid;
  grid-template-columns: repeat(3, 58px);
  gap: 0.45rem;
}

.hex-cell,
.corner-cluster span {
  width: 58px;
  aspect-ratio: 1;
  background: linear-gradient(135deg, rgba(255, 220, 122, 0.92), rgba(232, 171, 17, 0.7));
  clip-path: polygon(25% 6%, 75% 6%, 100% 50%, 75% 94%, 25% 94%, 0 50%);
}

.content-section,
.standalone-panel {
  padding: clamp(1.4rem, 3vw, 2rem);
}

.standalone-panel--information {
  overflow: visible;
}

.alt-surface {
  background: rgba(255, 247, 225, 0.94);
}

.section-heading {
  display: grid;
  gap: 0.35rem;
  margin-bottom: 1.35rem;
}

.section-heading-inline {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 1rem;
}

.section-heading-copy {
  display: grid;
  gap: 0.35rem;
}

.section-heading-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.compact-heading {
  margin-bottom: 0;
}

.section-heading h2 {
  font-size: clamp(1.8rem, 3vw, 2.8rem);
}

.card-grid,
.profile-layout,
.timeline-grid,
.map-layout,
.details-grid,
.maintenance-grid,
.planner-form,
.page-grid {
  display: grid;
  gap: 1rem;
}

.three-up {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.four-up {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.two-up,
.profile-layout,
.timeline-grid,
.map-layout {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.hornet-map-panel {
  width: 100%;
}

.hornet-map-panel .map-layout {
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}

.hornet-map-shell {
  position: relative;
}

.hornet-admin-tools {
  display: grid;
  gap: 0.85rem;
  margin: 1rem 0 0;
}

.hornet-view-only {
  margin-top: 1rem;
}

.hornet-map-loading {
  position: absolute;
  top: 0.85rem;
  right: 0.85rem;
  z-index: 60;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0;
  padding: 0.7rem 0.95rem;
  border-radius: 999px;
  border: 1px solid rgba(201, 134, 0, 0.18);
  background: rgba(255, 247, 220, 0.94);
  box-shadow: var(--shadow);
  color: var(--ink);
  font-weight: 800;
}

.hornet-map-loading .button-spinner {
  display: inline-block;
  flex: 0 0 auto;
  width: 1.35rem;
  height: 1.35rem;
  border-width: 3px;
}

.admin-analytics,
.admin-section,
.admin-record-list,
.admin-record,
.admin-edit-form {
  display: grid;
  gap: 1rem;
}

.admin-sections {
  display: grid;
  gap: 1.1rem;
  margin-top: 1rem;
}

.admin-analytics {
  margin-bottom: 0.55rem;
  gap: 0.5rem;
}

.admin-analytics-top {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  --admin-analytics-control-height: 2.55rem;
}

.admin-kpi-grid {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.3rem;
}

.admin-range-form {
  flex: 0 0 auto;
  margin-left: auto;
}

.admin-kpi-grid .admin-kpi-card {
  min-height: 0;
  height: var(--admin-analytics-control-height);
  padding: 0.08rem 0.75rem;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 0.06rem;
  border-radius: 14px;
  border: 1px solid rgba(201, 134, 0, 0.18);
  background: rgba(255, 244, 214, 0.72);
  cursor: pointer;
  user-select: none;
  overflow: visible;
}

.admin-kpi-grid .admin-kpi-card strong {
  display: inline-block;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.2;
  margin-right: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.admin-kpi-grid .admin-kpi-card span {
  display: inline-block;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 800;
  line-height: 1.2;
  white-space: nowrap;
  margin-left: auto;
}

.admin-kpi-card.is-active {
  border-color: rgba(201, 134, 0, 0.4);
  box-shadow: 0 8px 20px rgba(96, 66, 11, 0.08);
}

.admin-chart-panel {
  border: 1px solid rgba(201, 134, 0, 0.16);
  border-radius: 16px;
  padding: 0;
  background: rgba(255, 250, 237, 0.78);
}

.admin-chart-panel--hidden {
  display: none;
}

.admin-chart-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin: 0;
  padding: 0.7rem 0.85rem;
  cursor: pointer;
}

.admin-chart-summary::-webkit-details-marker {
  display: none;
}

.admin-chart-summary::after {
  content: 'Open';
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--muted);
  margin-left: 0.75rem;
}

.admin-chart-panel[open] .admin-chart-summary::after {
  content: 'Close';
}

.admin-chart-summary span {
  color: var(--muted);
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.admin-chart-body {
  padding: 0 0.85rem 0.85rem;
}
.admin-chart-canvas {
  width: 100%;
  height: 220px;
  display: block;
}

.admin-range-form {
  display: flex;
  justify-content: flex-end;
}

.admin-range-form select {
  height: var(--admin-analytics-control-height);
  min-height: var(--admin-analytics-control-height);
  padding: 0 0.75rem;
  border-radius: 14px;
  border: 1px solid rgba(201, 134, 0, 0.18);
  background: rgba(255, 244, 214, 0.72);
  color: var(--ink);
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1;
}

.admin-section,
.admin-record {
  border: 1px solid rgba(201, 134, 0, 0.16);
  border-radius: 18px;
  background: rgba(255, 250, 237, 0.78);
  gap: 0;
}

.admin-section[open],
.admin-record[open] {
  gap: 0.65rem;
}

.admin-section > summary,
.admin-record > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.55rem;
  min-height: 2.45rem;
  padding: 0.46rem 0.72rem;
  cursor: pointer;
  color: var(--ink);
}

.admin-section > summary span,
.admin-record > summary span {
  min-width: 0;
  color: var(--muted);
  font-size: 0.8rem;
  text-align: right;
  overflow-wrap: anywhere;
}

.admin-section > .panel-body,
.admin-record > .admin-edit-form,
.admin-record > .admin-delete-form {
  padding: 0 1rem 1rem;
}

.admin-inline-upload {
  display: flex;
  align-items: end;
  flex-wrap: wrap;
  gap: 0.7rem;
}

.admin-inline-upload--compact {
  align-items: center;
}

.admin-create-upload-row {
  display: flex;
  align-items: end;
  gap: 0.8rem;
  flex-wrap: nowrap;
}

.admin-create-upload-row .primary-action {
  flex: 0 0 auto;
  min-width: 180px;
}

.admin-create-upload-row .admin-inline-upload {
  margin: 0;
  flex: 1 1 auto;
}

.admin-upload-field {
  display: grid;
  gap: 0.35rem;
  min-width: min(360px, 100%);
}

.admin-upload-field input[type="file"] {
  max-width: 100%;
}

.admin-table-wrap {
  overflow-x: auto;
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
}

.admin-table th,
.admin-table td {
  padding: 0.7rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid rgba(106, 75, 10, 0.1);
}

.admin-action-row,
.format-toolbar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.admin-mail-grid {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.admin-switch {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-weight: 700;
  color: var(--ink);
}

.admin-switch input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.admin-switch-slider {
  position: relative;
  width: 2.9rem;
  height: 1.6rem;
  border-radius: 999px;
  background: rgba(184, 74, 26, 0.28);
  border: 1px solid rgba(122, 59, 4, 0.22);
  transition: background 180ms ease, border-color 180ms ease;
}

.admin-switch-slider::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 0.18rem;
  width: 1.18rem;
  height: 1.18rem;
  border-radius: 50%;
  background: #fff9ec;
  border: 1px solid rgba(122, 59, 4, 0.16);
  transform: translateY(-50%);
  transition: transform 180ms ease;
}

.admin-switch input[type="checkbox"]:checked + .admin-switch-slider {
  background: rgba(79, 109, 42, 0.5);
  border-color: rgba(79, 109, 42, 0.65);
}

.admin-switch input[type="checkbox"]:checked + .admin-switch-slider::after {
  transform: translate(1.3rem, -50%);
}

.admin-switch input[type="checkbox"]:focus-visible + .admin-switch-slider {
  box-shadow: 0 0 0 3px rgba(92, 136, 45, 0.24);
}

.admin-mail-test-form {
  margin-top: 0.25rem;
}

.admin-mail-test-row {
  display: flex;
  align-items: end;
  gap: 0.7rem;
  flex-wrap: wrap;
}

.admin-mail-test-row label {
  flex: 1 1 300px;
}

.format-toolbar {
  margin: 0.35rem 0;
}

.format-toolbar button {
  min-width: 2.25rem;
  min-height: 2rem;
  border: 1px solid rgba(201, 134, 0, 0.22);
  border-radius: 8px;
  background: rgba(255, 248, 227, 0.96);
  color: var(--ink);
  cursor: pointer;
  font-weight: 800;
}

.rich-text-editor {
  min-height: 220px;
  max-height: 520px;
  overflow-y: auto;
  border: 1px solid rgba(201, 134, 0, 0.24);
  border-radius: 14px;
  background: rgba(255, 248, 227, 0.86);
  padding: 0.8rem;
  line-height: 1.5;
}

.rich-text-editor:focus {
  outline: none;
  border-color: rgba(201, 134, 0, 0.5);
  box-shadow: 0 0 0 3px rgba(240, 180, 41, 0.14);
}

.rich-text-editor img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
}

.news-feature-card .content-body img {
  display: block;
  width: min(100%, 720px);
  aspect-ratio: 16 / 9;
  height: auto;
  max-height: 320px;
  object-fit: cover;
  object-position: center;
  margin: 0.8rem auto;
  border-radius: 12px;
}

.news-panel {
  overflow: visible;
}

.news-notifications {
  margin: 0 0 1rem;
  padding: 1rem;
  border-radius: 20px;
  border: 1px solid rgba(201, 134, 0, 0.24);
  background: linear-gradient(145deg, rgba(255, 245, 219, 0.95), rgba(255, 238, 198, 0.9));
  box-shadow: 0 14px 30px rgba(96, 66, 11, 0.1);
  display: grid;
  gap: 0.8rem;
}

.news-sidebar-panel .news-notifications {
  margin: 0;
  padding: 0.8rem;
  border-radius: 18px;
  gap: 0.6rem;
}

.news-notifications-head h2 {
  margin: 0;
  font-family: 'Fraunces', serif;
  font-size: clamp(1.08rem, 2.3vw, 1.32rem);
}

.news-sidebar-panel .news-notifications-head h2 {
  font-size: 1rem;
}

.news-notifications-head p {
  margin: 0.32rem 0 0;
  color: var(--muted);
}

.news-sidebar-panel .news-notifications-head p {
  margin-top: 0.2rem;
  font-size: 0.82rem;
  line-height: 1.4;
}

.news-notifications-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem;
}

.news-sidebar-panel .news-notifications-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.45rem;
}

.news-notification-icon {
  display: inline-block;
  width: 0.85rem;
  height: 0.85rem;
  flex: 0 0 0.85rem;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

.news-notification-icon--bell {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%236b5a40' d='M8 1.75a3 3 0 0 0-3 3v1.08c0 .86-.3 1.69-.84 2.35L3 9.66v1.09h10V9.66l-1.16-1.48A3.77 3.77 0 0 1 11 5.83V4.75a3 3 0 0 0-3-3Zm0 13a1.9 1.9 0 0 1-1.79-1.25h3.58A1.9 1.9 0 0 1 8 14.75Z'/%3E%3C/svg%3E");
}

.news-notification-icon--rss {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%236b5a40' d='M3 11.5a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3Zm-1 3h2A6 6 0 0 0 2 10.5v4Zm0-7v2A6 6 0 0 1 8 15.5h2A8 8 0 0 0 2 7.5Zm0-4v2A10 10 0 0 1 12 15.5h2C14 9.7 9.3 5.5 2 3.5Z'/%3E%3C/svg%3E");
}

.news-notification-icon--mail {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%236b5a40' d='M2.25 3.25h11.5a1 1 0 0 1 1 1v7.5a1 1 0 0 1-1 1H2.25a1 1 0 0 1-1-1v-7.5a1 1 0 0 1 1-1Zm.44 1.5 5.31 4 5.31-4H2.69Zm10.56 6.5v-5.06l-4.8 3.62a.75.75 0 0 1-.9 0l-4.8-3.62v5.06h10.5Z'/%3E%3C/svg%3E");
}

.news-email-form {
  display: grid;
  gap: 0.48rem;
}

.news-email-form label {
  display: inline-flex;
  align-items: center;
  gap: 0.38rem;
  font-size: 0.84rem;
  color: var(--muted);
  font-weight: 700;
}

.news-email-form-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}

.news-sidebar-panel .news-email-form-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.45rem;
}

.news-email-form-row input[type='email'] {
  flex: 1 1 240px;
  min-height: 2.7rem;
  border-radius: 14px;
  border: 1px solid rgba(201, 134, 0, 0.28);
  background: rgba(255, 248, 229, 0.96);
  padding: 0.56rem 0.76rem;
}

.news-sidebar-panel .news-email-form-row input[type='email'] {
  min-height: 2.45rem;
  font-size: 0.92rem;
}

.news-sidebar-panel .news-notifications .secondary-action,
.news-sidebar-panel .news-notifications .primary-action,
.news-sidebar-panel .news-notifications .link-button {
  min-height: 2.3rem;
  padding: 0.55rem 0.75rem;
  font-size: 0.82rem;
  border-radius: 14px;
}

.news-sidebar-panel .news-notifications .action-button-text,
.news-sidebar-panel .news-notifications .link-button {
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
}

.news-sidebar-panel .news-notifications .status-note,
.news-sidebar-panel .news-notifications .field-help {
  font-size: 0.78rem;
  line-height: 1.4;
}

@media (max-width: 700px) {
  .news-notifications-actions,
  .news-email-form-row {
    flex-direction: column;
    align-items: stretch;
  }

  .news-email-form-row input[type='email'] {
    flex-basis: auto;
    width: 100%;
  }
}

.news-entry-list {
  display: grid;
  gap: 1rem;
}

.news-nav-title,
.news-nav-date {
  display: block;
}

.news-nav-date {
  margin-top: 0.2rem;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--muted);
}

.news-sidebar .info-tree-links {
  gap: 0.42rem;
  padding-left: 0.75rem;
}

.news-sidebar .info-tree-link {
  position: relative;
  padding-left: 1rem;
}

.news-sidebar .info-tree-link:hover,
.news-sidebar .info-tree-link.is-active {
  background: rgba(229, 142, 20, 0.16);
  color: var(--ink);
  transform: translateX(2px);
}

.news-sidebar .info-tree-link:hover .news-nav-title,
.news-sidebar .info-tree-link.is-active .news-nav-title {
  color: var(--ink);
}

.news-sidebar .info-tree-link:hover .news-nav-date,
.news-sidebar .info-tree-link.is-active .news-nav-date {
  color: rgba(49, 33, 14, 0.78);
}

.news-sidebar .info-tree-link::before {
  content: '';
  position: absolute;
  left: -0.9rem;
  top: 50%;
  width: 0.9rem;
  height: 1px;
  background: rgba(159, 126, 64, 0.42);
  transform: translateY(-50%);
  transition: background 160ms ease, height 160ms ease;
}

.news-sidebar .info-tree-link::after {
  content: '';
  position: absolute;
  left: -0.18rem;
  top: 50%;
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 999px;
  background: rgba(201, 134, 0, 0.24);
  border: 1px solid rgba(159, 126, 64, 0.28);
  transform: translate(-50%, -50%);
  transition: background 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.news-sidebar .info-tree-link:hover::after,
.news-sidebar .info-tree-link.is-active::after {
  background: rgba(229, 142, 20, 0.84);
  border-color: rgba(179, 112, 10, 0.58);
  transform: translate(-50%, -50%) scale(1.08);
}

.news-sidebar .info-tree-link:hover::before,
.news-sidebar .info-tree-link.is-active::before {
  height: 2px;
  background: rgba(229, 142, 20, 0.84);
}

.news-entry {
  scroll-margin-top: calc(var(--topbar-sticky-offset) + 1rem);
}

.news-entry-head {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
}

.news-entry-body {
  margin-top: 0.25rem;
}

.news-entry.is-targeted {
  border-color: rgba(201, 134, 0, 0.45);
  box-shadow: 0 0 0 4px rgba(240, 180, 41, 0.16), 0 18px 34px rgba(96, 66, 11, 0.16);
}

.admin-inline-actions {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.6rem;
}

.admin-delete-form-inline {
  display: none;
}

.admin-summary-status {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.45rem;
}

.traffic-light {
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  display: inline-block;
  box-shadow: 0 0 0 1px rgba(73, 52, 9, 0.16);
}

.traffic-light--green {
  background: #4a9d2f;
}

.traffic-light--amber {
  background: #c98200;
}

.traffic-light--red {
  background: #c24b2f;
}

.health-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 0.25rem 0.58rem;
  font-size: 0.74rem;
  font-weight: 800;
}

.health-pill--green {
  color: #2d6d1f;
  background: rgba(98, 177, 72, 0.18);
}

.health-pill--amber {
  color: #8c5b00;
  background: rgba(237, 176, 62, 0.2);
}

.health-pill--red {
  color: #8b3514;
  background: rgba(214, 107, 53, 0.16);
}

.danger-badge {
  background: rgba(214, 107, 53, 0.16);
  color: #8b3514;
}

.feature-card {
  position: relative;
  overflow: hidden;
  min-height: 220px;
  padding: 1.25rem;
  border-radius: 24px;
  background:
    radial-gradient(circle at top right, rgba(255, 214, 108, 0.2), transparent 28%),
    linear-gradient(180deg, rgba(255, 248, 232, 0.98), rgba(255, 232, 177, 0.92)),
    linear-gradient(120deg, rgba(255, 189, 72, 0.22), rgba(217, 139, 18, 0.1));
  border: 1px solid rgba(201, 134, 0, 0.16);
  box-shadow: 0 18px 34px rgba(96, 66, 11, 0.14);
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.feature-card::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.16;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0), rgba(255, 214, 108, 0.18));
  animation: honey-sheen 10s ease-in-out infinite;
}

.feature-card:hover {
  transform: translateY(-3px);
  border-color: rgba(201, 134, 0, 0.26);
  box-shadow: 0 28px 58px rgba(86, 58, 12, 0.18);
}

.feature-card h3 {
  margin: 0 0 0.55rem;
  font-size: 1.55rem;
}

.information-directory {
  display: grid;
  grid-template-columns: minmax(280px, 320px) minmax(0, 1fr);
  gap: clamp(1rem, 2vw, 1.35rem);
  align-items: start;
}

.information-sidebar {
  position: sticky;
  top: var(--topbar-sticky-offset);
  align-self: start;
}

.information-sidebar-panel,
.information-content-intro,
.information-entry {
  border-radius: 28px;
  border: 1px solid rgba(106, 75, 10, 0.12);
  background:
    radial-gradient(circle at top right, rgba(255, 214, 108, 0.16), transparent 34%),
    linear-gradient(180deg, rgba(255, 250, 238, 0.98), rgba(255, 240, 207, 0.92));
  box-shadow: 0 18px 34px rgba(96, 66, 11, 0.12);
}

.information-sidebar-panel {
  display: grid;
  gap: 1rem;
  padding: 1.15rem;
  max-height: calc(100vh - var(--topbar-sticky-offset) - 1rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.information-sidebar--qa .information-sidebar-panel {
  grid-template-rows: auto auto auto minmax(0, 1fr);
  overflow: hidden;
}

.information-sidebar--qa .information-tree {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  padding-right: 0.1rem;
}

.information-search,
.information-content,
.information-entry-list {
  display: grid;
  gap: 1rem;
}

.information-search {
  gap: 0.45rem;
}

.information-search-label,
.information-sidebar-meta,
.info-tree-count,
.information-entry-link {
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.information-search-label,
.information-sidebar-meta,
.info-tree-count {
  color: var(--muted);
}

.information-search-row {
  position: relative;
}

.information-search-input {
  width: 100%;
  padding: 0.95rem 3rem 0.95rem 1rem;
  border: 1px solid rgba(120, 85, 14, 0.16);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.8);
  color: var(--ink);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
}

.information-search-input:focus {
  outline: none;
  border-color: rgba(201, 134, 0, 0.52);
  box-shadow: 0 0 0 4px rgba(240, 180, 41, 0.16);
}

.information-search-input::-webkit-search-decoration,
.information-search-input::-webkit-search-cancel-button,
.information-search-input::-webkit-search-results-button,
.information-search-input::-webkit-search-results-decoration {
  -webkit-appearance: none;
  appearance: none;
}

.information-search-clear {
  position: absolute;
  top: 50%;
  right: 0.55rem;
  width: 2rem;
  height: 2rem;
  border: none;
  border-radius: 999px;
  background: rgba(184, 74, 26, 0.12);
  color: var(--brick);
  cursor: pointer;
  font-weight: 800;
  transform: translateY(-50%);
  transition: background 160ms ease, transform 160ms ease;
}

.information-search-clear:hover {
  background: rgba(184, 74, 26, 0.2);
  transform: translateY(-50%) scale(1.04);
}

.information-sidebar-status {
  margin: 0;
}

.information-tree {
  display: grid;
  gap: 0.75rem;
}

.info-tree-group {
  margin: 0;
  padding: 0.95rem 1rem;
  border-radius: 22px;
  background: rgba(255, 248, 229, 0.9);
  border: 1px solid rgba(201, 134, 0, 0.14);
}

.info-tree-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  cursor: pointer;
  list-style: none;
  font-weight: 800;
}

.info-tree-summary::-webkit-details-marker {
  display: none;
}

.info-tree-summary-copy {
  margin: 0.55rem 0 0;
  color: var(--muted);
  font-size: 0.93rem;
}

.info-tree-links {
  display: grid;
  gap: 0.28rem;
  margin: 0.8rem 0 0;
  padding: 0 0 0 0.95rem;
  list-style: none;
  border-left: 1px solid rgba(159, 126, 64, 0.28);
}

.info-tree-item {
  margin: 0;
}

.info-tree-link {
  display: block;
  padding: 0.5rem 0.7rem;
  border-radius: 14px;
  color: var(--muted);
  transition: background 160ms ease, color 160ms ease, transform 160ms ease;
}

.info-tree-link:hover,
.info-tree-link.is-active {
  color: var(--ink);
  background: rgba(229, 142, 20, 0.16);
  transform: translateX(2px);
}

.information-sidebar:not(.news-sidebar) .info-tree-links {
  gap: 0.42rem;
  padding-left: 0.75rem;
}

.information-sidebar:not(.news-sidebar) .info-tree-link {
  position: relative;
  padding-left: 1rem;
}

.information-sidebar:not(.news-sidebar) .info-tree-link::before {
  content: '';
  position: absolute;
  left: -0.9rem;
  top: 50%;
  width: 0.9rem;
  height: 1px;
  background: rgba(159, 126, 64, 0.42);
  transform: translateY(-50%);
  transition: background 160ms ease, height 160ms ease;
}

.information-sidebar:not(.news-sidebar) .info-tree-link::after {
  content: '';
  position: absolute;
  left: -0.18rem;
  top: 50%;
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 999px;
  background: rgba(201, 134, 0, 0.24);
  border: 1px solid rgba(159, 126, 64, 0.28);
  transform: translate(-50%, -50%);
  transition: background 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.information-sidebar:not(.news-sidebar) .info-tree-link:hover::after,
.information-sidebar:not(.news-sidebar) .info-tree-link.is-active::after {
  background: rgba(229, 142, 20, 0.84);
  border-color: rgba(179, 112, 10, 0.58);
  transform: translate(-50%, -50%) scale(1.08);
}

.information-sidebar:not(.news-sidebar) .info-tree-link:hover::before,
.information-sidebar:not(.news-sidebar) .info-tree-link.is-active::before {
  height: 2px;
  background: rgba(229, 142, 20, 0.84);
}

.information-content {
  min-width: 0;
}

.information-content .eyebrow {
  display: block;
  line-height: 1.2;
  padding-top: 0.12rem;
}

.information-visual-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
  scroll-margin-top: calc(var(--topbar-sticky-offset) + 1rem);
}

.information-section-guides {
  margin: 1rem 0 1.1rem;
}

.information-visual-card {
  display: grid;
  gap: 1rem;
  min-width: 0;
  padding: 1.2rem 1.25rem;
  border-radius: 28px;
  border: 1px solid rgba(106, 75, 10, 0.12);
  background:
    radial-gradient(circle at top right, rgba(255, 214, 108, 0.18), transparent 36%),
    linear-gradient(180deg, rgba(255, 250, 238, 0.98), rgba(255, 239, 202, 0.93));
  box-shadow: 0 18px 34px rgba(96, 66, 11, 0.12);
  overflow: hidden;
}

.information-visual-card .section-heading {
  padding-top: 0.45rem;
}

.information-visual-figure {
  display: grid;
  gap: 0.55rem;
  margin: 0;
  padding: 0.8rem;
  border-radius: 24px;
  background: rgba(255, 252, 244, 0.92);
  border: 1px solid rgba(201, 134, 0, 0.14);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.information-visual-image-button {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: none;
  border-radius: 18px;
  background: transparent;
  cursor: zoom-in;
}

.information-visual-image-button:focus-visible {
  outline: 3px solid rgba(177, 114, 0, 0.52);
  outline-offset: 4px;
}

.information-visual-item-image-button {
  display: block;
  padding: 0;
  border: none;
  border-radius: 20px;
  background: transparent;
  cursor: zoom-in;
}

.information-visual-item-image-button:focus-visible {
  outline: 3px solid rgba(177, 114, 0, 0.52);
  outline-offset: 4px;
}

.information-visual-image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 18px;
  background: linear-gradient(180deg, #fff7e9, #fff1cd);
}

.information-visual-image-hint {
  position: absolute;
  right: 0.9rem;
  bottom: 0.9rem;
  padding: 0.4rem 0.7rem;
  border-radius: 999px;
  background: rgba(79, 50, 5, 0.82);
  color: #fff9ef;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  box-shadow: 0 8px 20px rgba(49, 33, 14, 0.22);
}

.information-visual-figure figcaption {
  margin: 0;
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.45;
}

.site-dialog.information-image-dialog {
  width: min(1280px, calc(100vw - 0.75rem));
}

.information-image-dialog-shell {
  gap: 1.2rem;
  padding: clamp(0.95rem, 2vw, 1.55rem);
}

.information-image-dialog-figure {
  display: grid;
  gap: 0.75rem;
  margin: 0;
  align-items: center;
}

.information-image-dialog-image {
  display: block;
  width: 100%;
  height: auto;
  max-height: calc(100vh - 12.5rem);
  object-fit: contain;
  margin: 0 auto;
  border-radius: 24px;
  background: linear-gradient(180deg, #fff7e9, #fff1cd);
  border: 1px solid rgba(201, 134, 0, 0.14);
}

.information-image-dialog-figure figcaption {
  margin: 0;
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.55;
}

.information-visual-items {
  display: grid;
  gap: 0.85rem;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  align-items: stretch;
}

.information-visual-items--lifecycle {
  grid-template-columns: minmax(0, 1fr);
}

.information-visual-items--lifecycle::before {
  display: none;
}

.information-visual-items--castes,
.information-visual-items--systems,
.information-visual-items--anatomy,
.information-visual-items--seasonal,
.information-visual-items--honey-making,
.information-visual-items--comb-building {
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

.information-visual-item {
  position: relative;
  display: grid;
  gap: 0.65rem;
  min-width: 0;
  padding: 0.95rem 1rem;
  border-radius: 22px;
  background: rgba(255, 249, 233, 0.88);
  border: 1px solid rgba(201, 134, 0, 0.14);
  overflow-wrap: anywhere;
}

.information-visual-item-media {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}

.information-visual-item-copy {
  display: grid;
  gap: 0.35rem;
  align-content: start;
}

.information-visual-item-image {
  display: block;
  width: 4.4rem;
  height: 4.4rem;
  object-fit: cover;
  border-radius: 20px;
  background: linear-gradient(180deg, #fff7e9, #fff1cd);
  border: 1px solid rgba(201, 134, 0, 0.14);
  box-shadow: 0 10px 22px rgba(96, 66, 11, 0.12);
  transition: transform 160ms ease, box-shadow 160ms ease;
}

.information-visual-item-image-button:hover .information-visual-item-image,
.information-visual-item-image-button:focus-visible .information-visual-item-image {
  transform: translateY(-1px) scale(1.02);
  box-shadow: 0 14px 28px rgba(96, 66, 11, 0.18);
}

.information-visual-item strong {
  font-family: 'Fraunces', serif;
  font-size: 1.08rem;
  line-height: 1.2;
}

.information-visual-meta {
  font-size: 0.8rem;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold-deep);
}

.information-visual-item p {
  margin: 0;
  color: var(--muted);
  font-size: 0.94rem;
}

.information-visual-marker {
  position: relative;
  width: 2.35rem;
  height: 2.35rem;
  border-radius: 999px;
  background: linear-gradient(145deg, #ffd56c, #d89310);
  box-shadow: 0 10px 20px rgba(86, 58, 12, 0.18);
  animation: information-pulse 2.8s ease-in-out infinite;
}

.information-visual-card--castes .information-visual-marker {
  width: 3.1rem;
  height: 1.7rem;
  border-radius: 52% 52% 48% 48%;
}

.information-visual-card--castes .information-visual-marker::before,
.information-visual-card--castes .information-visual-marker::after {
  content: '';
  position: absolute;
  top: -0.38rem;
  width: 1.15rem;
  height: 0.9rem;
  border-radius: 999px 999px 0 999px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(120, 104, 82, 0.18);
}

.information-visual-card--castes .information-visual-marker::before {
  left: 0.25rem;
  transform: rotate(-18deg);
}

.information-visual-card--castes .information-visual-marker::after {
  right: 0.25rem;
  transform: rotate(18deg) scaleX(-1);
}

.information-visual-card--systems .information-visual-marker {
  width: 2.6rem;
  height: 2rem;
  border-radius: 16px;
}

.information-visual-card--systems .information-visual-marker::before,
.information-visual-card--systems .information-visual-marker::after {
  content: '';
  position: absolute;
  left: 0.2rem;
  right: 0.2rem;
  height: 0.28rem;
  border-radius: 999px;
  background: rgba(79, 50, 5, 0.22);
}

.information-visual-card--systems .information-visual-marker::before {
  top: 0.45rem;
}

.information-visual-card--systems .information-visual-marker::after {
  bottom: 0.45rem;
}

.information-visual-card--anatomy .information-visual-marker {
  width: 2.6rem;
  height: 2.6rem;
}

.information-visual-card--anatomy .information-visual-marker::before,
.information-visual-card--anatomy .information-visual-marker::after {
  content: '';
  position: absolute;
  border-radius: 999px;
  background: rgba(79, 50, 5, 0.18);
}

.information-visual-card--anatomy .information-visual-marker::before {
  inset: 0.42rem;
}

.information-visual-card--anatomy .information-visual-marker::after {
  width: 0.32rem;
  height: 0.32rem;
  top: 0.52rem;
  left: 1.14rem;
  box-shadow: -0.52rem 0 rgba(79, 50, 5, 0.18), 0.52rem 0 rgba(79, 50, 5, 0.18);
}

.information-visual-card--seasonal .information-visual-marker {
  width: 2.7rem;
  height: 2.7rem;
  border-radius: 26% 74% 62% 38% / 34% 40% 60% 66%;
}

.information-visual-card--seasonal .information-visual-marker::before,
.information-visual-card--seasonal .information-visual-marker::after {
  content: '';
  position: absolute;
  inset: 0.25rem;
  border-radius: inherit;
  border: 1px solid rgba(255, 255, 255, 0.32);
}

.information-visual-card--seasonal .information-visual-marker::after {
  inset: auto;
  width: 0.52rem;
  height: 0.52rem;
  top: 1.06rem;
  left: 1.08rem;
  border: none;
  background: rgba(79, 50, 5, 0.18);
  border-radius: 999px;
}

.information-visual-card--lifecycle .information-visual-item {
  grid-template-columns: minmax(84px, 96px) minmax(0, 1fr);
  gap: 1rem;
  align-items: center;
  padding: 1rem 1.05rem;
}

.information-visual-card--lifecycle .information-visual-item-copy {
  gap: 0.28rem;
}

.information-visual-card--lifecycle .information-visual-item strong {
  font-size: 1.14rem;
}

.information-visual-card--lifecycle .information-visual-meta {
  letter-spacing: 0.06em;
}

.information-visual-card--lifecycle .information-visual-item-image {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  border-radius: 24px;
}

.information-visual-card--lifecycle .information-visual-item-image-button {
  width: 100%;
  border-radius: 24px;
}

.information-visual-item:nth-child(2) .information-visual-marker {
  animation-delay: 0.18s;
}

.information-visual-item:nth-child(3) .information-visual-marker {
  animation-delay: 0.36s;
}

.information-visual-item:nth-child(4) .information-visual-marker {
  animation-delay: 0.54s;
}

.information-content-intro {
  display: grid;
  gap: 0.45rem;
  padding: 1.2rem 1.25rem;
}

.information-content-intro h2,
.information-entry h3 {
  margin: 0;
}

.information-content-intro h2 {
  font-size: clamp(1.5rem, 3vw, 2.3rem);
}

.information-section {
  scroll-margin-top: calc(var(--topbar-sticky-offset) + 2.35rem);
}

.information-section .section-heading {
  padding-top: 0.8rem;
}

.information-entry {
  scroll-margin-top: calc(var(--topbar-sticky-offset) + 2.75rem);
}

.information-entry {
  display: grid;
  gap: 0.65rem;
  padding: 1.15rem 1.25rem;
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.information-entry:hover {
  transform: translateY(-2px);
  border-color: rgba(201, 134, 0, 0.26);
}

.information-entry-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.information-entry-link {
  color: var(--gold-deep);
}

.information-entry p {
  margin: 0;
  color: var(--muted);
}

.information-entry:target,
.information-entry.is-targeted {
  border-color: rgba(201, 134, 0, 0.45);
  box-shadow: 0 0 0 4px rgba(240, 180, 41, 0.16), 0 18px 34px rgba(96, 66, 11, 0.16);
}

.information-empty-state {
  margin-top: 0.25rem;
}

.information-ai-assistant {
  margin-top: 0.8rem;
  display: grid;
  gap: 0.68rem;
  padding: 0.95rem 1rem;
  border-radius: 18px;
  border: 1px solid rgba(201, 134, 0, 0.2);
  background:
    radial-gradient(circle at top right, rgba(255, 206, 93, 0.26), transparent 48%),
    linear-gradient(180deg, rgba(255, 248, 230, 0.96), rgba(255, 236, 194, 0.92));
}

.information-ai-assistant-head {
  display: grid;
  gap: 0.15rem;
}

.information-ai-assistant-head strong {
  font-size: 1.02rem;
}

.information-ai-assistant-head span {
  color: var(--muted);
  font-size: 0.92rem;
}

.information-ai-open {
  justify-self: start;
}

.information-ai-open[disabled] {
  cursor: not-allowed;
  opacity: 0.74;
}

.information-ai-note {
  margin: 0;
}

.site-dialog.information-ai-dialog {
  width: min(860px, 94vw);
  max-width: 95vw;
}

.information-ai-dialog-shell {
  width: min(820px, 94vw);
  display: grid;
  gap: 0.75rem;
}

.information-ai-form {
  display: grid;
  gap: 0.72rem;
}

.information-ai-input-row {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  gap: 0.85rem;
  align-items: start;
}

.information-ai-question-field textarea {
  min-height: 130px;
}

.information-ai-upload-column {
  display: grid;
  gap: 0.65rem;
}

.information-ai-upload-label-title {
  display: block;
  margin-bottom: 0.02rem;
  line-height: 1.1;
}

.information-ai-upload-label-copy {
  display: block;
  font-size: 0.76rem;
  font-weight: 500;
  color: var(--muted);
  line-height: 1.05;
}

.information-ai-upload-column input[type="file"] {
  color: transparent;
  font-size: 0;
  padding: 0.55rem 0.7rem;
}

.information-ai-upload-column input[type="file"]::file-selector-button {
  margin-right: 0;
  border: 1px solid rgba(145, 78, 16, 0.34);
  border-radius: 12px;
  background: rgba(255, 248, 232, 0.96);
  color: #6d4115;
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0.45rem 0.75rem;
  cursor: pointer;
}

.information-ai-upload-column input[type="file"]::-webkit-file-upload-button {
  margin-right: 0;
  border: 1px solid rgba(145, 78, 16, 0.34);
  border-radius: 12px;
  background: rgba(255, 248, 232, 0.96);
  color: #6d4115;
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0.45rem 0.75rem;
  cursor: pointer;
}

.information-ai-preview {
  display: grid;
  gap: 0.45rem;
  padding: 0.62rem;
  border-radius: 14px;
  border: 1px dashed rgba(201, 134, 0, 0.34);
  background: rgba(255, 252, 243, 0.96);
}

.information-ai-preview-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 0.35rem;
}

.information-ai-upload-item {
  position: relative;
  display: grid;
  gap: 0.2rem;
  padding: 0.24rem;
  border-radius: 10px;
  border: 1px solid rgba(201, 134, 0, 0.22);
  background: rgba(255, 255, 255, 0.84);
}

.information-ai-upload-thumb {
  width: 100%;
  height: 42px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid rgba(201, 134, 0, 0.22);
}

.information-ai-upload-thumb-placeholder {
  width: 100%;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  border: 1px solid rgba(201, 134, 0, 0.22);
  background: linear-gradient(180deg, rgba(255, 246, 220, 0.95), rgba(255, 234, 187, 0.9));
  color: var(--muted);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.information-ai-preview-meta {
  margin: 0;
  color: var(--muted);
  font-size: 0.7rem;
}

.information-ai-upload-progress {
  display: grid;
  gap: 0.28rem;
}

.information-ai-upload-progress-bar {
  width: 100%;
  height: 0.46rem;
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid rgba(201, 134, 0, 0.28);
  background: rgba(255, 246, 222, 0.94);
}

.information-ai-upload-progress-bar span {
  display: block;
  width: 0;
  height: 100%;
  background: linear-gradient(90deg, #d89000 0%, #f3b647 100%);
  transition: width 130ms linear;
}

.information-ai-upload-progress-text {
  margin: 0;
  color: var(--muted);
  font-size: 0.78rem;
}

.information-ai-upload-remove {
  position: absolute;
  top: -0.35rem;
  right: -0.35rem;
  width: 1.65rem;
  height: 1.65rem;
  border-radius: 999px;
  border: 1px solid rgba(145, 78, 16, 0.35);
  background: rgba(255, 249, 236, 0.98);
  color: #7f3d18;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}

.information-ai-upload-remove:hover,
.information-ai-upload-remove:focus-visible {
  background: #ffffff;
  border-color: rgba(145, 78, 16, 0.55);
}

.information-ai-status {
  margin: 0;
}

.information-ai-disclaimer {
  margin: 0;
  font-size: 0.86rem;
  color: var(--muted);
}

.information-ai-output {
  display: grid;
  gap: 0.65rem;
  padding: 0.95rem;
  border-radius: 16px;
  border: 1px solid rgba(73, 52, 9, 0.14);
  background: rgba(255, 249, 234, 0.95);
}

.information-ai-output h4,
.information-ai-output h5 {
  margin: 0;
}

.information-ai-summary,
.information-ai-safety,
.information-ai-grounding {
  margin: 0;
}

.information-ai-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.information-ai-lists {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.8rem;
}

.information-ai-lists ul {
  margin: 0.35rem 0 0;
  padding-left: 1.15rem;
  display: grid;
  gap: 0.34rem;
}

.information-ai-grounding {
  color: var(--muted);
  font-size: 0.85rem;
}

@media (max-width: 760px) {
  .information-ai-input-row {
    grid-template-columns: 1fr;
  }

  .information-ai-lists {
    grid-template-columns: 1fr;
  }
}

.back-to-top {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 1250;
  display: inline-grid;
  place-items: center;
  width: 3.35rem;
  height: 3.35rem;
  border-radius: 999px;
  border: 1px solid rgba(106, 75, 10, 0.16);
  background: linear-gradient(135deg, rgba(255, 248, 232, 0.98), rgba(255, 214, 108, 0.92));
  color: var(--ink);
  box-shadow: 0 18px 34px rgba(96, 66, 11, 0.18);
  backdrop-filter: blur(10px);
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.back-to-top:hover,
.back-to-top:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(201, 134, 0, 0.32);
  box-shadow: 0 22px 40px rgba(96, 66, 11, 0.22);
}

.back-to-top span {
  font-size: 1.4rem;
  font-weight: 800;
  line-height: 1;
}

@keyframes information-pulse {
  0%,
  100% {
    transform: translateY(0) scale(1);
    box-shadow: 0 10px 20px rgba(86, 58, 12, 0.18);
  }

  50% {
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 16px 28px rgba(86, 58, 12, 0.24);
  }
}

.info-tree-group[hidden],
.info-tree-item[hidden],
.information-section[hidden],
.information-entry[hidden],
.information-empty-state[hidden],
.information-search-clear[hidden] {
  display: none !important;
}

.tall-card {
  min-height: 280px;
}

/* Store product image sizing inside feature cards */
.product-image {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 0 0.85rem;
}

.store-item-image {
  max-width: 100%;
  max-height: 160px;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

@media (max-width: 600px) {
  .store-item-image { max-height: 120px; }
}

.hive-list {
  display: grid;
  gap: 1rem;
}

.profile-form-card {
  min-height: 0;
}

.profile-card-grid,
.profile-fields-grid,
.inline-form,
.dialog-actions,
.species-copy,
.species-copy-meta {
  display: grid;
  gap: 0.9rem;
}

.profile-card-grid {
  position: relative;
  z-index: 2;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 1.25rem;
}

.profile-fields-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.profile-address-field {
  min-width: 0;
}

.profile-address-privacy-row {
  display: grid;
  grid-template-columns: minmax(12rem, 1fr) max-content;
  align-items: end;
  gap: 0.75rem;
  min-width: 0;
}

.profile-address-privacy-row .position-privacy-toggle {
  align-items: center;
  padding-bottom: 0.62rem;
  white-space: nowrap;
}

.profile-address-privacy-row .inline-toggle {
  align-items: center;
}

.profile-address-privacy-row .inline-toggle-switch {
  margin-top: 0;
}

.inline-form {
  justify-content: start;
}

.hive-card-footer,
.hive-visibility-form,
.hive-delete-form {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.action-row .hive-visibility-form {
  margin-left: auto;
  flex: 0 0 auto;
}

.action-row .hive-delete-form {
  margin-left: 0;
  flex: 0 0 auto;
}

.hive-card-footer {
  justify-content: flex-end;
  flex-wrap: wrap;
}

.hive-delete-form {
  margin-left: auto;
}

.action-row .hive-delete-form {
  margin-left: 0;
}

.hive-privacy-action-wrap {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.hive-privacy-toggle-button {
  appearance: none;
  display: inline-flex;
  align-items: center;
  min-height: 2.7rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.hive-privacy-toggle-button .inline-toggle {
  align-items: center;
}

.hive-privacy-toggle-button .inline-toggle-switch {
  margin-top: 0;
}

.hive-privacy-toggle-button.is-exact .inline-toggle-switch {
  background: rgba(224, 124, 28, 0.58);
  border-color: rgba(184, 74, 26, 0.68);
}

.hive-privacy-toggle-button.is-exact .inline-toggle-knob {
  transform: translate(1.28rem, -50%);
}

.hive-privacy-toggle-button:focus-visible .inline-toggle-switch {
  box-shadow: 0 0 0 3px rgba(224, 124, 28, 0.24);
}

.dialog-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 0.25rem;
}

.dialog-actions-single {
  grid-template-columns: max-content;
  justify-content: end;
}

.site-dialog {
  width: min(720px, calc(100vw - 2rem));
  padding: 0;
  border: none;
  border-radius: 28px;
  background: transparent;
}

.site-dialog::backdrop {
  background: rgba(49, 33, 14, 0.36);
  backdrop-filter: blur(8px);
}

.dialog-shell {
  display: grid;
  gap: 1rem;
  padding: 1.35rem;
  border-radius: 28px;
  background: rgba(255, 248, 232, 0.98);
  box-shadow: var(--shadow);
}

.dialog-shell-scrollable {
  max-height: min(82vh, 960px);
  overflow-y: auto;
}

.legal-dialog {
  width: min(860px, calc(100vw - 2rem));
}

.legal-copy,
.legal-section {
  display: grid;
  gap: 0.65rem;
}

.legal-section h4,
.legal-section p,
.legal-list {
  margin: 0;
}

.legal-section p,
.legal-list {
  color: var(--muted);
}

.legal-list {
  padding-left: 1.2rem;
}

.legal-list li + li {
  margin-top: 0.45rem;
}

.hive-card {
  min-height: 0;
  padding: 0;
  overflow: hidden;
}

.hive-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.15rem 1.3rem;
  cursor: pointer;
  list-style: none;
}

.hive-summary::-webkit-details-marker {
  display: none;
}

.hive-summary-copy {
  display: grid;
  gap: 0.2rem;
}

.hive-summary-copy h3 {
  margin: 0;
}

.hive-summary-meta {
  display: grid;
  gap: 0.45rem;
  justify-items: end;
}

.summary-toggle {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.summary-toggle-open {
  display: none;
}

.hive-card[open] .summary-toggle-open {
  display: inline;
}

.hive-card[open] .summary-toggle-closed {
  display: none;
}

.hive-card-body {
  display: grid;
  gap: 1rem;
  padding: 0 1.3rem 1.3rem;
  border-top: 1px solid rgba(73, 52, 9, 0.08);
}

.hive-overview-grid,
.hive-overview-copy {
  display: grid;
  gap: 1rem;
}

.hive-overview-grid {
  grid-template-columns: minmax(0, 1fr) minmax(330px, 390px);
  align-items: start;
}

.hive-inline-map {
  min-height: 0;
  aspect-ratio: 1;
}

/* Keep inline hive map a bounded square and responsive */
.hive-inline-map {
  width: 100%;
  max-width: 390px;
  max-height: 390px;
  align-self: start;
  justify-self: end;
  overflow: hidden;
}

.hive-card-body.has-wide-species-map .hive-overview-grid {
  grid-template-columns: minmax(0, 1fr);
}

.hive-card-body.has-wide-species-map .hive-inline-map {
  max-width: none;
  max-height: none;
  min-height: 320px;
  aspect-ratio: auto;
  justify-self: stretch;
}

@media (max-width: 700px) {
  .hive-overview-grid {
    grid-template-columns: 1fr;
  }

  .hive-inline-map {
    max-width: 300px;
    max-height: 300px;
    justify-self: center;
    margin-top: 0.6rem;
  }

  .hive-card-body.has-wide-species-map .hive-inline-map {
    max-width: none;
    max-height: none;
    min-height: 280px;
    justify-self: stretch;
  }
}

.hive-postcode-line {
  margin-top: 0.15rem;
}

.hive-meta-grid {
  margin-top: 0;
}

.pill-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  padding: 0.35rem 0.65rem;
  border-radius: 999px;
  background: rgba(240, 180, 41, 0.16);
  color: var(--gold-deep);
  font-weight: 800;
  font-size: 0.78rem;
}

.detail-stack {
  display: grid;
  gap: 0.2rem;
}

.detail-label {
  display: block;
  margin-bottom: 0.25rem;
  color: var(--muted);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.detail-label-inline {
  display: inline-flex;
  margin-bottom: 0;
}

.details-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.compact-grid {
  margin-top: 0.9rem;
}

.password-match-group {
  grid-template-columns: minmax(0, 1fr);
}

.inline-toggle {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  color: var(--muted);
  font-weight: 700;
}

.inline-toggle-slider input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

.inline-toggle-switch {
  position: relative;
  flex: 0 0 auto;
  width: 3rem;
  height: 1.7rem;
  margin-top: 0.12rem;
  border-radius: 999px;
  background: rgba(79, 109, 42, 0.5);
  border: 1px solid rgba(79, 109, 42, 0.65);
  transition: background 180ms ease, border-color 180ms ease;
}

.inline-toggle-knob {
  position: absolute;
  top: 50%;
  left: 0.18rem;
  width: 1.22rem;
  height: 1.22rem;
  border-radius: 999px;
  background: #fff9ec;
  border: 1px solid rgba(122, 59, 4, 0.16);
  transform: translateY(-50%);
  transition: transform 180ms ease;
}

.inline-toggle-copy {
  display: grid;
  gap: 0.16rem;
}

.inline-toggle-title-row {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
}

.inline-toggle-title {
  color: var(--ink);
  font-weight: 800;
}

.inline-toggle-note {
  font-size: 0.84rem;
  line-height: 1.4;
}

.inline-toggle-slider input[type="checkbox"]:checked + .inline-toggle-switch {
  background: rgba(224, 124, 28, 0.58);
  border-color: rgba(184, 74, 26, 0.68);
}

.inline-toggle-slider input[type="checkbox"]:checked + .inline-toggle-switch .inline-toggle-knob {
  transform: translate(1.28rem, -50%);
}

.inline-toggle-slider input[type="checkbox"]:focus-visible + .inline-toggle-switch {
  box-shadow: 0 0 0 3px rgba(224, 124, 28, 0.24);
}

.inline-toggle-slider-compact {
  align-items: center;
}

.inline-toggle-slider-compact .inline-toggle-copy {
  gap: 0;
}

.position-privacy-toggle {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.position-privacy-toggle .inline-toggle {
  min-width: 0;
}

.position-privacy-toggle-compact {
  align-items: center;
}

.inline-help-icon {
  appearance: none;
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 1.1rem;
  height: 1.1rem;
  min-width: 1.1rem;
  min-height: 1.1rem;
  padding: 0;
  border-radius: 999px;
  border: 1px solid rgba(122, 59, 4, 0.26);
  background: rgba(255, 248, 227, 0.98);
  color: var(--ink);
  font-size: 0.75rem;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
  flex: 0 0 auto;
}

.inline-help-icon::after {
  content: none;
}

.inline-help-icon[aria-expanded="true"]::after {
  content: none;
}

.inline-help-tooltip {
  position: fixed;
  z-index: 3000;
  width: min(28rem, calc(100vw - 1.5rem));
  max-width: calc(100vw - 1.5rem);
  padding: 0.65rem 0.75rem;
  border: 1px solid rgba(89, 69, 39, 0.18);
  border-radius: 0.45rem;
  background: rgba(39, 34, 25, 0.97);
  box-shadow: 0 14px 28px rgba(31, 24, 15, 0.2);
  color: #fff8e8;
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.35;
  text-align: left;
  white-space: normal;
}

.inline-help-tooltip[hidden] {
  display: none;
}

.inline-help-icon:focus-visible {
  outline: 2px solid rgba(92, 136, 45, 0.45);
  outline-offset: 2px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.remember-login-toggle {
  margin-top: 0.35rem;
}

.remember-login-note {
  margin: 0.2rem 0 0;
}

.legal-agreement-row {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  margin-top: 0.55rem;
}

.legal-agreement-row > input[type="checkbox"] {
  width: auto;
  margin: 0.28rem 0 0;
  flex: 0 0 auto;
}

.legal-agreement-copy {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--muted);
  font-weight: 700;
  line-height: 1.45;
}

.legal-agreement-toggle {
  display: inline;
  color: inherit;
  font-weight: inherit;
}

.legal-inline-link {
  display: inline;
  margin-left: 0.35rem;
  color: #0d5ec9;
  text-decoration: underline;
  text-underline-offset: 0.16em;
  font-weight: 700;
  white-space: nowrap;
}

.legal-inline-link:hover,
.legal-inline-link:focus-visible {
  color: #08428d;
}

.inline-toggle:not(.inline-toggle-slider) input[type="checkbox"] { width: auto; margin: 0; }

.visibility-action {
  gap: 0.65rem;
  white-space: nowrap;
}

.visibility-action.is-enabled {
  background: linear-gradient(135deg, rgba(232, 245, 220, 0.98), rgba(255, 239, 199, 0.92));
  border-color: rgba(79, 109, 42, 0.24);
  color: #324115;
}

.visibility-action.is-disabled {
  background: linear-gradient(135deg, rgba(255, 248, 232, 0.98), rgba(255, 229, 201, 0.9));
  border-color: rgba(184, 74, 26, 0.18);
}

.toggle-indicator {
  display: inline-grid;
  place-items: center;
  width: 1.45rem;
  height: 1.45rem;
  border-radius: 999px;
  font-size: 0.88rem;
  font-weight: 800;
  line-height: 1;
}

.toggle-indicator.is-enabled {
  background: rgba(79, 109, 42, 0.16);
  color: #2f6c1c;
}

.toggle-indicator.is-disabled {
  background: rgba(184, 74, 26, 0.12);
  color: #a33418;
}

.action-row {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.wrap-row {
  flex-wrap: wrap;
}

.subpanel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 0.7rem;
}

.forecast-panel,
.species-panel,
.panel-head {
  display: grid;
  gap: 0.7rem;
}

.species-filter-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem;
}

.species-filter-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 2.2rem;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  border: 1px solid rgba(201, 134, 0, 0.16);
  background: rgba(255, 239, 199, 0.78);
  color: var(--ink);
  font-weight: 700;
}

.botanical-filter-toggle {
  border-color: var(--filter-accent, rgba(201, 134, 0, 0.22));
  background: var(--filter-surface, rgba(255, 239, 199, 0.78));
  box-shadow: inset 0 0 0 1px var(--filter-accent, rgba(201, 134, 0, 0.2));
}

.botanical-filter-toggle:has(input:not(:checked)) {
  background: rgba(255, 248, 230, 0.72);
  border-color: rgba(73, 52, 9, 0.12);
  box-shadow: inset 0 0 0 1px rgba(73, 52, 9, 0.08);
  opacity: 0.62;
}

.botanical-filter-toggle:focus-within {
  outline: 2px solid var(--filter-accent, rgba(201, 134, 0, 0.32));
  outline-offset: 2px;
}

.threat-filter-toggle {
  border-color: var(--threat-accent, rgba(201, 134, 0, 0.22));
  background: var(--threat-surface, rgba(255, 239, 199, 0.78));
  box-shadow: inset 0 0 0 1px var(--threat-accent, rgba(201, 134, 0, 0.2));
}

.threat-filter-toggle:has(input:not(:checked)) {
  background: rgba(255, 248, 230, 0.72);
  border-color: rgba(73, 52, 9, 0.12);
  box-shadow: inset 0 0 0 1px rgba(73, 52, 9, 0.08);
  opacity: 0.62;
}

.threat-filter-toggle:focus-within {
  outline: 2px solid var(--threat-accent, rgba(201, 134, 0, 0.32));
  outline-offset: 2px;
}

.species-filter-count {
  display: inline-grid;
  place-items: center;
  min-width: 1.5rem;
  height: 1.5rem;
  padding: 0 0.35rem;
  border-radius: 999px;
  background: rgba(255, 252, 244, 0.84);
  box-shadow: inset 0 0 0 1px var(--threat-accent, rgba(73, 52, 9, 0.14));
  color: var(--threat-accent, var(--ink));
  font-size: 0.76rem;
  font-weight: 800;
  line-height: 1;
}

.species-filter-toggle input {
  width: auto;
  margin: 0;
}

.species-filter-row + .species-list {
  margin-top: 0.55rem;
}

.panel-head h3,
.panel-head h4 {
  margin: 0;
}

.panel-head p {
  margin: 0;
  color: var(--muted);
}

.panel-head-actions {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.9rem;
  flex-wrap: wrap;
}

.panel-head-actions > div:first-child {
  min-width: 0;
}

.secondary-action-compact {
  align-self: flex-start;
  white-space: nowrap;
}

[data-planner-panel-toggle].secondary-action-compact {
  min-width: 8.4rem;
  flex: 0 0 auto;
  justify-content: center;
}

.forecast-row {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: 0.65rem;
}

.forecast-details {
  margin-top: 0.6rem;
}

.forecast-details-controls {
  display:flex;
  gap:0.5rem;
  margin-bottom:0.45rem;
}

.toggle-button {
  padding: 0.22rem 0.6rem;
  border: 1px solid rgba(73,52,9,0.08);
  background: transparent;
  border-radius: 8px;
  font-weight: 800;
  font-size: 0.82rem;
  cursor: pointer;
}

.toggle-button.active {
  background: rgba(255, 242, 206, 0.92);
}

.forecast-graph { position: relative; width: 100%; overflow-x: auto; overflow-y: visible; }
.forecast-graph-canvas { width: 100%; max-width: 100%; height: 180px; display:block; }
.forecast-forage-graph { margin-top: 0.6rem; }
.forecast-forage-canvas { width: 100%; max-width: 100%; height: 180px; display:block; }

.forecast-details-controls,
.forecast-forage-controls {
  display: flex;
  gap: 0.5rem;
  width: min(100%, 875px);
  margin: 0 auto 0.55rem;
}

.forecast-graph-tooltip {
  position: absolute;
  min-width: 9rem;
  max-width: 14rem;
  padding: 0.55rem 0.7rem;
  border-radius: 12px;
  background: rgba(49, 33, 14, 0.94);
  color: #fff8eb;
  box-shadow: 0 16px 34px rgba(49, 33, 14, 0.18);
  font-size: 0.76rem;
  line-height: 1.35;
  pointer-events: none;
  z-index: 2;
}

.forecast-graph-tooltip strong {
  display: block;
  margin-bottom: 0.2rem;
  font-size: 0.8rem;
}

.forecast-graph-tooltip.is-hidden {
  display: none;
}

.form-actions { display:flex; justify-content:flex-end; gap:0.8rem; flex-wrap:wrap; margin-top:1rem; }

.profile-form-actions {
  align-items: center;
}

.forecast-chip {
  position: relative;
  min-width: 0;
  display: grid;
  /* tighten the top rows so the day/date sit closer to the card border */
  grid-template-rows: minmax(1.2rem, auto) minmax(1.2rem, auto) minmax(1.0rem, auto) minmax(1.0rem, auto) minmax(3rem, auto) minmax(3rem, auto) minmax(3rem, auto);
  column-gap: 0.5rem;
  row-gap: 0.18rem;
  height: 100%;
  align-content: start; /* ensure content pins to the top of each card */
  padding: 0.45rem 0.6rem;
  border-radius: 18px;
  background: rgba(255, 244, 214, 0.94);
  border: 2px solid rgba(73, 52, 9, 0.12);
}

.forecast-chip-day,
.forecast-chip-date,
.weather-chip-summary,
.weather-chip-temp,
.weather-chip-rain {
  padding-right: 0;
}

.forecast-chip-head {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 0.25rem;
  min-height: auto;
  margin-bottom: 0.18rem;
  padding-top: 0;
}

.forecast-chip-head-copy {
  display: grid;
  gap: 0.08rem;
  align-content: center;
  justify-items: center;
  text-align: center;
}

.forecast-chip-day {
  font-size: 0.92rem;
  line-height: 1;
}

.forecast-chip-date {
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 700;
}

.weather-chip-summary-row {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  min-height: 2.1rem;
}

.weather-chip-icon {
  display: grid;
.jodit-container {
  margin-top: 0.4rem;
}
.jodit-workplace {
  min-height: 14rem;
}
  place-items: center;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 999px;
  background: rgba(240, 180, 41, 0.16);
  color: var(--gold-deep);
  font-size: 1.12rem;
  display: inline-grid;
  transform-origin: center;
  will-change: transform, box-shadow, opacity;
}

.weather-chip-icon.weather-icon-sun {
  animation: weather-icon-sun 3.6s ease-in-out infinite;
}

.weather-chip-icon.weather-icon-cloud {
  animation: weather-icon-cloud 4.2s ease-in-out infinite;
}

.weather-chip-icon.weather-icon-rain {
  animation: weather-icon-rain 1.9s ease-in-out infinite;
}

.weather-chip-icon.weather-icon-snow {
  animation: weather-icon-snow 5.4s ease-in-out infinite;
}

.weather-chip-icon.weather-icon-storm {
  animation: weather-icon-storm 2.8s ease-in-out infinite;
}

@keyframes weather-icon-sun {
  0%, 100% { transform: translateY(0) rotate(0deg) scale(1); box-shadow: 0 0 0 rgba(240, 180, 41, 0.18); background: rgba(240, 180, 41, 0.16); }
  20% { transform: translateY(-2px) rotate(10deg) scale(1.1); box-shadow: 0 0 0.55rem rgba(240, 180, 41, 0.28); background: rgba(240, 180, 41, 0.22); }
  50% { transform: translateY(-3px) rotate(0deg) scale(1.2); box-shadow: 0 0 0.95rem rgba(240, 180, 41, 0.34); background: rgba(240, 180, 41, 0.28); }
  80% { transform: translateY(-1px) rotate(-10deg) scale(1.08); box-shadow: 0 0 0.5rem rgba(240, 180, 41, 0.24); background: rgba(240, 180, 41, 0.2); }
}

@keyframes weather-icon-cloud {
  0%, 100% { transform: scale(1); opacity: 0.94; box-shadow: 0 0 0 rgba(111, 122, 140, 0.08); background: rgba(180, 188, 203, 0.2); }
  35% { transform: scale(1.06); opacity: 1; box-shadow: 0 0.22rem 0.45rem rgba(111, 122, 140, 0.14); background: rgba(180, 188, 203, 0.25); }
  65% { transform: scale(1.1); opacity: 0.98; box-shadow: 0 0.28rem 0.55rem rgba(111, 122, 140, 0.18); background: rgba(180, 188, 203, 0.3); }
}

@keyframes weather-icon-rain {
  0%, 100% { transform: translateY(0) scale(1); box-shadow: 0 0 0 rgba(105, 141, 176, 0.12); }
  35% { transform: translateY(2px) scale(0.96); box-shadow: 0 0 0.3rem rgba(105, 141, 176, 0.16); }
  70% { transform: translateY(-1px) scale(1.02); box-shadow: 0 0 0.45rem rgba(105, 141, 176, 0.2); }
}

@keyframes weather-icon-snow {
  0%, 100% { transform: rotate(0deg) translateY(0); }
  25% { transform: rotate(10deg) translateY(-1px); }
  50% { transform: rotate(0deg) translateY(2px); }
  75% { transform: rotate(-10deg) translateY(-1px); }
}

@keyframes weather-icon-storm {
  0%, 100% { transform: translateY(0) scale(1); opacity: 1; }
  20% { transform: translateY(-1px) scale(1.02); opacity: 1; }
  24% { transform: translateY(-1px) scale(1.08); opacity: 0.82; }
  28% { transform: translateY(0) scale(1); opacity: 1; }
  60% { transform: translateY(1px) scale(0.98); opacity: 0.94; }
}

@media (prefers-reduced-motion: reduce) {
  .weather-chip-icon.weather-icon-sun,
  .weather-chip-icon.weather-icon-cloud,
  .weather-chip-icon.weather-icon-rain,
  .weather-chip-icon.weather-icon-snow,
  .weather-chip-icon.weather-icon-storm {
    animation: none;
  }
}

/* Ensure date month sits on its own line and improve label legibility */
.forecast-chip-date { display: block; text-align: center; line-height: 1; margin-left: 0; }
.forecast-chip-day { display: block; font-weight: 700; }
.inspection-chip-label { font-weight: 700; color: var(--olive-deep); }

.forecast-chip.inspection-good {
  border-color: rgba(108, 122, 54, 0.48);
  box-shadow: 0 12px 24px rgba(68, 80, 31, 0.08);
}

.inspection-icon-good {
  background: rgba(108, 122, 54, 0.28);
}

.forecast-chip.inspection-avoid {
  border-color: rgba(184, 74, 26, 0.34);
}

.inspection-icon-avoid {
  background: rgba(184, 74, 26, 0.22);
  color: #7f2e13;
}

.weather-chip-summary {
  min-height: 2.1rem;
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.25;
}

.weather-chip-temp,
.weather-chip-rain {
  font-size: 0.8rem;
  font-weight: 700;
  white-space: nowrap;
}

.resource-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  height: 3rem;
  box-sizing: border-box;
  padding: 0.32rem 0.7rem;
  border: 1px solid rgba(73, 52, 9, 0.08);
  border-radius: 10px;
  font-size: 0.82rem;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: 0.01em;
  width: auto;
  max-width: fit-content;
  white-space: nowrap;
  margin-top: 0;
}

.resource-badge.resource-pollen {
  border-color: rgba(201, 134, 0, 0.14);
}

.resource-badge.resource-pollen.resource-level-high { background: linear-gradient(135deg, #ffd58a, #ffb347); color: #7a4100; }
.resource-badge.resource-pollen.resource-level-medium { background: linear-gradient(135deg, #ffd9c4, #ffb077); color: #7a4100; }
.resource-badge.resource-pollen.resource-level-low { background: linear-gradient(135deg, #fff8ec, #fff3da); color: #7a4100; }

.resource-badge.resource-nectar {
  border-color: rgba(201, 134, 0, 0.14);
}

.resource-badge.resource-nectar.resource-level-high { background: linear-gradient(135deg, #ffd18c, #ff994d); color: #7a4100; }
.resource-badge.resource-nectar.resource-level-medium { background: linear-gradient(135deg, #ffd9c4, #ffb077); color: #7a4100; }
.resource-badge.resource-nectar.resource-level-low { background: linear-gradient(135deg, #fff2de, #ffd7aa); color: #7a4100; }

/* Make the inspection label match resource badges */
.inspection-chip-label {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 3rem !important;
  box-sizing: border-box;
  padding: 0.32rem 0.7rem;
  border-radius: 10px;
  width: 100%;
  font-weight: 800;
  font-size: 0.82rem;
  text-align: center;
  background: linear-gradient(180deg, rgba(144, 238, 144, 0.08), rgba(141, 211, 141, 0.06));
}

/* add spacing between resource badges while keeping the first badge flush */
.forecast-chip .resource-badge + .resource-badge {
  margin-top: 0.25rem;
}
.forecast-chip .resource-badge {
  height: 2rem;
  padding: 0.2rem 0.58rem;
  border-radius: 999px;
  font-size: 0.76rem;
}
.forecast-chip .resource-badge + .inspection-chip-label,
.forecast-chip .resource-badge + .resource-badge + .inspection-chip-label {
  margin-top: 0.25rem;
}

.resource-level-none {
  background: rgba(114, 97, 66, 0.12);
  color: #6b5a44;
}

.resource-level-unavailable {
  background: rgba(114, 97, 66, 0.14);
  color: #6b5a44;
  border-style: dashed;
}

.inspection-chip-label {
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  height: 3rem !important;
  box-sizing: border-box;
  margin-top: 0.12rem;
  padding: 0.32rem 0.7rem;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  border: 1px solid rgba(73, 52, 9, 0.08);
  border-radius: 10px;
  line-height: 1.05;
  text-align: center;
  white-space: normal;
}

.inspection-chip-icon {
  display: inline-grid;
  place-items: center;
  width: 1.95rem;
  height: 1.95rem;
  border-radius: 8px;
  font-size: 1.18rem;
  color: #433005;
  flex: 0 0 auto;
}

.forecast-chip.inspection-good .inspection-chip-label {
  background: linear-gradient(135deg, #dff2c6, #9ad74f);
  border: none;
  color: #2d4a0d;
}

.forecast-chip.inspection-good .inspection-chip-icon {
  background: rgba(141, 197, 61, 0.24);
}

.forecast-chip.inspection-avoid .inspection-chip-label {
  background: linear-gradient(135deg, #ffd6cb, #ff8a64);
  border: none;
  color: #7f2e13;
}

.forecast-chip.inspection-avoid .inspection-chip-icon {
  background: rgba(235, 119, 79, 0.22);
}

.mini-stat-card {
  display: grid;
  gap: 0.3rem;
  padding: 0.95rem;
  border-radius: 18px;
  background: rgba(255, 242, 206, 0.94);
  border: 1px solid rgba(201, 134, 0, 0.14);
}

.mini-stat-card strong {
  font-size: 0.95rem;
}

.weather-results-shell {
  gap: 1rem;
}

.forecast-chip--placeholder {
  border-style: dashed;
  border-color: rgba(73, 52, 9, 0.18);
  background: rgba(252, 247, 235, 0.96);
}

.weather-placeholder-line,
.weather-chip-icon--placeholder,
.weather-placeholder-badge,
.mini-stat-card--placeholder span,
.weather-placeholder-map {
  background: linear-gradient(90deg, rgba(191, 168, 121, 0.18) 0%, rgba(255, 255, 255, 0.74) 50%, rgba(191, 168, 121, 0.18) 100%);
  background-size: 220% 100%;
  animation: weather-placeholder-shimmer 1.8s linear infinite;
}

.weather-placeholder-line {
  display: block;
  align-self: center;
  width: 100%;
  height: 0.95rem;
  border-radius: 999px;
}

.weather-placeholder-line--wide {
  width: 100%;
}

.weather-placeholder-line--medium {
  width: 78%;
}

.weather-chip-icon--placeholder {
  color: transparent;
  box-shadow: none;
}

.weather-placeholder-badge {
  border: 1px dashed rgba(73, 52, 9, 0.14);
  color: transparent;
}

.mini-stat-card--placeholder span {
  display: block;
  width: 72%;
  height: 1.25rem;
  border-radius: 999px;
}

.weather-placeholder-map {
  min-height: 18rem;
  border-radius: 24px;
  border: 1px dashed rgba(73, 52, 9, 0.16);
}

@keyframes weather-placeholder-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .weather-placeholder-line,
  .weather-chip-icon--placeholder,
  .weather-placeholder-badge,
  .mini-stat-card--placeholder span,
  .weather-placeholder-map {
    animation: none;
  }
}

.maintenance-grid,
.stacked-form,
.planner-form {
  gap: 0.9rem;
}

.planner-results-stack {
  margin-top: 1.4rem;
}

.planner-side-by-side {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  align-items: start;
}

.planner-side-by-side .panel-head-actions {
  justify-content: space-between;
  flex-wrap: nowrap;
}

.planner-side-by-side .panel-head-actions > div {
  min-width: 0;
}

@media (max-width: 960px) {
  .planner-side-by-side {
    grid-template-columns: 1fr;
  }
}

.maintenance-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
}

.maintenance-panel {
  display: grid;
  gap: 1rem;
}

.tracker-heading {
  margin-bottom: 0;
}

.tracker-select-form {
  width: min(320px, 100%);
}

.tracker-hive-select {
  gap: 0.28rem;
}

.tracker-hive-select select {
  min-height: 3rem;
  box-shadow: 0 12px 24px rgba(99, 66, 8, 0.1);
}

.tracker-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(320px, 0.88fr);
  gap: 1rem;
}

.tracker-browser-card,
.tracker-entry-card {
  position: relative;
  overflow: hidden;
  padding: 1.15rem;
  border-radius: 26px;
  border: 1px solid rgba(201, 134, 0, 0.18);
  box-shadow: 0 22px 44px rgba(99, 66, 8, 0.14);
}

.tracker-browser-card {
  display: grid;
  gap: 0.95rem;
  background:
    radial-gradient(circle at top right, rgba(255, 214, 108, 0.26), transparent 30%),
    linear-gradient(180deg, rgba(255, 248, 233, 0.98), rgba(255, 235, 192, 0.94));
}

.tracker-entry-card {
  background:
    radial-gradient(circle at top left, rgba(255, 214, 108, 0.22), transparent 28%),
    linear-gradient(180deg, rgba(255, 250, 240, 0.98), rgba(255, 239, 209, 0.96));
}

.tracker-browser-card::after,
.tracker-entry-card::after {
  content: '';
  position: absolute;
  right: -1.5rem;
  bottom: -1.5rem;
  width: 160px;
  height: 126px;
  opacity: 0.18;
  pointer-events: none;
  background: none;
}

.tracker-browser-card > *,
.tracker-entry-card > * {
  position: relative;
  z-index: 1;
}

.tracker-panel-head {
  grid-template-columns: minmax(0, 1fr);
}

.tracker-stat-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.7rem;
}

.tracker-stat-card {
  min-height: 0;
}

.tracker-toolbar {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  margin-bottom: 0.25rem;
}

.tracker-toolbar-group {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.4rem;
}

.tracker-nav-button {
  min-height: 2rem;
  padding: 0.32rem 0.62rem;
  font-size: 0.82rem;
  white-space: nowrap;
}

.tracker-month-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2rem;
  min-width: 8.4rem;
  padding: 0.32rem 0.72rem;
  border-radius: 999px;
  background: rgba(255, 247, 224, 0.92);
  border: 1px solid rgba(201, 134, 0, 0.16);
  color: var(--ink);
  font-weight: 800;
  font-size: 0.84rem;
  white-space: nowrap;
}

.tracker-search-field {
  display: grid;
  gap: 0.28rem;
}

.tracker-search-under-entries {
  margin-top: 0.6rem;
}

.tracker-search-field input {
  min-height: 2.85rem;
}

.tracker-weekday-row,
.tracker-calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.tracker-weekday-row {
  gap: 0.35rem;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-align: center;
  text-transform: uppercase;
}

.tracker-calendar-grid {
  gap: 0.35rem;
  margin-top: 0.1rem;
}

.tracker-day {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 3.2rem;
  padding: 0.4rem;
  border: 1px solid rgba(201, 134, 0, 0.12);
  border-radius: 18px;
  background: rgba(255, 247, 227, 0.94);
  color: var(--ink);
  cursor: pointer;
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

.tracker-day:hover {
  transform: translateY(-1px);
  border-color: rgba(201, 134, 0, 0.26);
  box-shadow: 0 10px 18px rgba(104, 73, 12, 0.14);
}

.tracker-day.is-outside-month {
  opacity: 0.42;
}

.tracker-day.is-selected {
  background: linear-gradient(135deg, rgba(255, 223, 135, 0.98), rgba(239, 166, 0, 0.88));
  border-color: rgba(201, 134, 0, 0.38);
  color: #432b00;
  box-shadow: 0 14px 24px rgba(160, 110, 5, 0.18);
}

.tracker-day.is-today {
  border-color: rgba(79, 109, 42, 0.34);
}

.tracker-day-number {
  font-weight: 800;
}

.tracker-day-marker {
  position: absolute;
  bottom: 0.38rem;
  width: 0.48rem;
  height: 0.48rem;
  border-radius: 999px;
  background: var(--olive);
  box-shadow: 0 0 0 4px rgba(108, 122, 54, 0.12);
}

.tracker-day.is-selected .tracker-day-marker {
  background: #432b00;
  box-shadow: 0 0 0 4px rgba(67, 43, 0, 0.12);
}

.tracker-entry-browser {
  display: grid;
  gap: 0.65rem;
}

.tracker-entry-browser-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.25rem;
}

.tracker-entry-browser-head h5 {
  margin: 0;
  font-family: 'Fraunces', serif;
  font-size: 1rem;
}

.tracker-entry-list {
  display: grid;
  gap: 0.45rem;
  max-height: 318px;

.tracker-entry-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.tracker-entry-row .tracker-entry-chip {
  flex: 1 1 auto;
  position: relative;
  padding-right: 2.6rem; /* room for the delete control */
}

.tracker-entry-delete {
  position: absolute;
  right: 0.45rem;
  top: 0.45rem;
  width: 2rem;
  height: 2rem;
  display: inline-grid;
  place-items: center;
  border-radius: 6px;
  background: transparent;
  border: none;
  font-size: 0.95rem;
  cursor: pointer;
}
}

.tracker-entry-chip {
  display: grid;
  gap: 0.2rem;
  width: 100%;
  padding: 0.72rem 0.82rem;
  border: 1px solid rgba(201, 134, 0, 0.14);
  border-radius: 18px;
  background: rgba(255, 248, 228, 0.92);
  color: var(--ink);
  text-align: left;
  box-shadow: 0 10px 20px rgba(92, 61, 8, 0.08);
}

.tracker-entry-chip.is-selected {
  background: linear-gradient(135deg, rgba(255, 223, 135, 0.98), rgba(255, 239, 199, 0.92));
  border-color: rgba(201, 134, 0, 0.34);
}

.tracker-entry-chip strong {
  font-size: 0.92rem;
}

.tracker-entry-chip span {
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.35;
}

.tracker-entry-chip span:last-child {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.tracker-empty-state {
  margin: 0;
}

.tracker-entry-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.tracker-entry-head h4 {
  margin: 0;
}

.tracker-entry-head p {
  margin: 0.18rem 0 0;
  color: var(--muted);
}

.tracker-selected-badge {
  display: grid;
  place-items: center;
  flex: 0 0 4.25rem;
  width: 4.25rem;
  height: 4.25rem;
  min-width: 4.25rem;
  min-height: 4.25rem;
  border-radius: 22px;
  background: linear-gradient(135deg, rgba(255, 223, 135, 0.98), rgba(239, 166, 0, 0.92));
  color: #432b00;
  font-family: 'Fraunces', serif;
  font-size: 1.7rem;
  font-weight: 800;
  line-height: 1;
  animation: amber-pulse 4.8s ease-in-out infinite;
}

.tracker-form-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.tracker-entry-time-row {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.tracker-time-field {
  width: min(11rem, 100%);
}

.tracker-time-field input {
  min-height: 3rem;
}

.hive-inspection-meta {
  margin-top: 1rem;
}

.hive-inspection-meta p:last-child {
  margin-top: 0.3rem;
}

.hive-inspection-summary {
  display: grid;
  gap: 0.2rem;
  margin-top: 0.7rem;
}

.hive-inspection-summary .detail-label,
.hive-inspection-summary .surface-copy {
  margin: 0;
}

.planner-form {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
}

.planner-form[data-forecast-search-page='weather'] {
  margin-bottom: 0.45rem;
}

label {
  display: grid;
  gap: 0.4rem;
  color: var(--ink);
  font-weight: 700;
}

.password-field-shell {
  position: relative;
  display: flex;
  align-items: center;
}

.password-field-shell input {
  padding-right: 3.8rem;
}

.password-field-shell-status input {
  padding-right: 6rem;
}

.password-toggle {
  position: absolute;
  top: 50%;
  right: 0.6rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.2rem;
  height: 2.2rem;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: rgba(255, 248, 227, 0.94);
  color: rgba(73, 52, 9, 0.76);
  box-shadow: 0 8px 18px rgba(122, 82, 12, 0.12);
  cursor: pointer;
  transform: translateY(-50%);
}

.password-toggle svg {
  width: 1.05rem;
  height: 1.05rem;
}

.password-toggle:hover,
.password-toggle:focus-visible {
  background: rgba(255, 220, 122, 0.92);
  color: #432b00;
}

.password-toggle:focus-visible {
  outline: 2px solid rgba(240, 180, 41, 0.4);
  outline-offset: 2px;
}

.password-toggle.is-visible {
  background: rgba(255, 217, 121, 0.94);
  color: #432b00;
}

.password-toggle:disabled {
  opacity: 0.58;
  cursor: not-allowed;
  box-shadow: none;
}

.password-match-indicator {
  position: absolute;
  top: 50%;
  right: 3.35rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 999px;
  background: rgba(122, 82, 12, 0.1);
  color: rgba(73, 52, 9, 0.72);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-50%) scale(0.82);
  transition: opacity 160ms ease, transform 160ms ease;
}

.password-match-indicator::before {
  content: '';
  font-size: 1rem;
  font-weight: 800;
  line-height: 1;
}

.password-field-shell.is-valid .password-match-indicator {
  opacity: 1;
  transform: translateY(-50%) scale(1);
  background: rgba(89, 147, 54, 0.18);
  color: #2e6a1a;
}

.password-field-shell.is-valid .password-match-indicator::before {
  content: '✓';
}

.password-field-shell.is-valid input {
  border-color: rgba(89, 147, 54, 0.42);
}

.password-field-shell.is-invalid .password-match-indicator {
  opacity: 1;
  transform: translateY(-50%) scale(1);
  background: rgba(194, 66, 43, 0.16);
  color: #8f1f12;
}

.password-field-shell.is-invalid .password-match-indicator::before {
  content: '×';
}

.password-field-shell.is-invalid input {
  border-color: rgba(194, 66, 43, 0.36);
}

.password-requirements {
  margin: 0.2rem 0 0.65rem;
}

input,
textarea,
select {
  width: 100%;
  border: 1px solid rgba(73, 52, 9, 0.14);
  border-radius: 16px;
  background: rgba(255, 243, 214, 0.95);
  padding: 0.85rem 1rem;
  color: var(--ink);
}

textarea {
  min-height: 108px;
  resize: vertical;
}

/* profile specific textarea: keep description compact */
.profile-form-card textarea {
  min-height: 3.2rem; /* ~2 lines */
}

input:focus,
textarea:focus,
select:focus {
  outline: 2px solid rgba(240, 180, 41, 0.35);
  border-color: rgba(201, 134, 0, 0.35);
}

.full-span {
  grid-column: 1 / -1;
  margin-bottom: 1.6rem;
}

.maintenance-row-span {
  grid-column: 1 / -1;
}

.geoapify-address-field {
  position: relative;
  z-index: 70;
}

.geoapify-address-field .geoapify-input-wrapper {
  width: 100%;
}

.geoapify-address-field .geoapify-autocomplete-input,
.geoapify-address-field input {
  width: 100%;
  border: 1px solid rgba(73, 52, 9, 0.14);
  border-radius: 16px;
  background: rgba(255, 243, 214, 0.95);
  padding: 0.85rem 1rem;
  color: var(--ink);
  font: inherit;
}

.geoapify-address-field .geoapify-autocomplete-input:focus,
.geoapify-address-field input:focus {
  outline: 2px solid rgba(240, 180, 41, 0.35);
  border-color: rgba(201, 134, 0, 0.35);
}

.geoapify-address-field .geoapify-autocomplete-items {
  z-index: 5600;
  max-height: min(22rem, 55vh);
  overflow-y: auto;
  border: 1px solid rgba(73, 52, 9, 0.14);
  border-radius: 10px;
  background: #ffffff;
  box-shadow: 0 18px 38px rgba(48, 36, 12, 0.18);
}

.geoapify-address-field .geoapify-autocomplete-item {
  min-height: 2.8rem;
  color: var(--ink);
  font: inherit;
  font-weight: 700;
  line-height: 1.25;
}

.geoapify-address-field .geoapify-autocomplete-items .active,
.geoapify-address-field .geoapify-autocomplete-item:hover {
  background: rgba(255, 242, 202, 0.95);
}

.geoapify-address-field.has-address-error .geoapify-autocomplete-input,
.geoapify-address-field.has-address-error input {
  border-color: rgba(184, 74, 26, 0.45);
}

.geoapify-address-field .geoapify-close-button {
  color: rgba(73, 52, 9, 0.72);
}

/* Slightly reduce left padding for selects inside the maintenance tracker to tighten layout */
.maintenance-grid select {
  padding-left: 0.6rem;
}

.maintenance-grid select[multiple] {
  min-height: 7.4rem;
  height: auto;
  overflow: auto;
  padding-top: 0.55rem;
  padding-bottom: 0.55rem;
  line-height: 1.2;
}

.maintenance-grid label:not(.full-span) select:not([multiple]) {
  min-height: 3rem;
}

.dialog-notes-field {
  margin-bottom: 0.2rem;
}

.field-help {
  font-size: 0.84rem;
  color: var(--muted);
  font-weight: 600;
}

.field-help.error-note {
  width: 100%;
  padding: 0;
  background: transparent;
}

.status-note {
  padding: 0.9rem 1rem;
  border-radius: 18px;
  background: rgba(255, 235, 189, 0.92);
  color: var(--muted);
}

.error-note {
  background: rgba(184, 74, 26, 0.1);
  color: #7e3111;
}

.field-help.error-note {
  background: transparent;
  color: #7e3111;
}

.species-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 0.8rem;
}

.species-list {
  display: grid;
  gap: 0.55rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.species-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.45rem;
  padding: 0.42rem 0.55rem;
  background: rgba(255, 239, 203, 0.94);
  border: 1px solid rgba(201, 134, 0, 0.12);
  border-radius: 16px;
}

.species-item p {
  margin: 0.1rem 0 0;
  color: var(--muted);
  font-size: 0.78rem;
}

.species-media-list {
  gap: 0.38rem;
}

.species-rich-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.45rem;
}

.species-thumb,
.species-thumb-placeholder {
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: 10px;
  background: rgba(240, 180, 41, 0.18);
}

.species-copy {
  gap: 0.16rem;
}

.species-copy strong {
  line-height: 1.12;
  font-size: 0.92rem;
}

.species-thumb-placeholder {
  display: grid;
  place-items: center;
  font-size: 0.74rem;
  color: var(--muted);
}

.species-copy-meta {
  display: flex;
  flex-wrap: wrap;
  grid-auto-flow: column;
  justify-content: start;
  align-items: center;
  gap: 0.28rem;
}

.species-rich-item .pill-badge {
  height: 1.6rem;
  padding: 0 0.5rem;
  font-size: 0.72rem;
  line-height: 1;
}

.species-rich-item .resource-badge {
  height: 1.6rem;
  min-height: 1.6rem;
  padding: 0 0.5rem;
  border-radius: 999px;
  border-width: 0;
  font-size: 0.72rem;
  line-height: 1;
}

.species-rich-item .detail-label {
  margin-bottom: 0;
  font-size: 0.68rem;
}

.species-threat-item {
  box-shadow: inset 4px 0 0 var(--threat-accent, rgba(201, 134, 0, 0.22));
}

.threat-category-badge {
  background: var(--threat-surface, rgba(255, 239, 199, 0.78));
  color: var(--threat-accent, var(--ink));
  box-shadow: inset 0 0 0 1px var(--threat-accent, rgba(201, 134, 0, 0.18));
}

.bee-value-best {
  background: rgba(108, 122, 54, 0.18);
  color: var(--olive-deep);
}

.bee-value-lower {
  background: rgba(213, 140, 20, 0.18);
  color: #8a5a08;
}

.neutral-badge {
  background: rgba(108, 122, 54, 0.12);
  color: var(--olive-deep);
}

.species-rich-item .link-button {
  min-height: 1.8rem;
  padding: 0.26rem 0.52rem;
  font-size: 0.76rem;
}

.species-card {
  display: grid;
  gap: 0.7rem;
  padding: 0.85rem;
  background: rgba(255, 240, 206, 0.94);
  border: 1px solid rgba(201, 134, 0, 0.14);
  border-radius: 18px;
}

.species-card img,
.species-placeholder {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 14px;
  background: rgba(240, 180, 41, 0.12);
}

.species-placeholder {
  display: grid;
  place-items: center;
  color: var(--muted);
}

.avatar-shell {
  width: 140px;
  height: 140px;
  box-sizing: border-box;
  display: grid;
  place-items: stretch;
  border-radius: 999px;
  overflow: hidden;
  border: 0;
  outline: 4px solid rgba(201, 134, 0, 0.28);
  outline-offset: 0;
  background: transparent;
}

.avatar-image,
.avatar-placeholder {
  width: 100%;
  height: 100%;
  border-radius: 999px;
}

.avatar-image {
  min-width: 100%;
  min-height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.avatar-placeholder {
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, rgba(255, 213, 108, 0.35), rgba(108, 122, 54, 0.18));
  color: var(--muted);
  font-weight: 700;
}

.profile-member-level {
  margin: 0.35rem 0 0;
  font-weight: 800;
}

.member-directory-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1rem;
}

.member-directory-card {
  display: grid;
  gap: 1rem;
}

.member-directory-head {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}

.member-directory-head img {
  width: 4rem;
  height: 4rem;
  border-radius: 999px;
  border: 2px solid rgba(69, 36, 4, 0.62);
  object-fit: cover;
  background: rgba(255, 248, 227, 0.42);
}

.member-directory-head h2 {
  margin: 0 0 0.35rem;
  font-size: 1.35rem;
}

.admin-level-form {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  min-width: 13rem;
}

.admin-level-form select {
  min-width: 8.5rem;
}

.map-canvas {
  position: relative;
  z-index: 0;
  width: 100%;
  min-height: 220px;
  overflow: hidden;
  border-radius: 24px;
  border: 1px solid rgba(201, 134, 0, 0.2);
  background: linear-gradient(180deg, rgba(255, 250, 237, 0.92), rgba(255, 240, 206, 0.82));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 18px 36px rgba(96, 66, 11, 0.14);
}

.map-canvas.large-map {
  min-height: 360px;
}

.map-canvas.hornet-map {
  min-height: clamp(420px, 68vh, 760px);
}

@media (max-width: 980px) {
  .hornet-map-panel .map-layout {
    grid-template-columns: 1fr;
  }

  .hornet-map-loading {
    position: absolute;
    top: 0.7rem;
    right: 0.7rem;
    margin: 0;
  }
}

.is-hidden {
  display: none;
}

.corner-cluster {
  position: fixed;
  display: grid;
  gap: 0.35rem;
  opacity: 0.3;
  pointer-events: none;
}

.corner-top-left {
  top: 0.7rem;
  left: 0.7rem;
  grid-template-columns: repeat(2, 58px);
}

.corner-bottom-right {
  right: 0.7rem;
  bottom: 0.7rem;
  grid-template-columns: repeat(2, 58px);
}

.flower-corner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: auto;
  z-index: -2;
  pointer-events: none;
  opacity: 1;
  display: block;
  filter: none;
  will-change: transform;
  transform-origin: 50% 100%;
  animation: flower-strip-wind 10s ease-in-out infinite;
}

.corner-bee {
  --corner-bee-size: clamp(98px, 12.5vw, 150px);
  position: fixed;
  right: calc(clamp(0.7rem, 1.6vw, 1.4rem) + (var(--corner-bee-size) * 0.6));
  bottom: calc(clamp(4.8rem, 8vw, 6.7rem) + var(--corner-bee-size));
  width: var(--corner-bee-size);
  height: auto;
  z-index: -1;
  pointer-events: none;
  transform-origin: 55% 70%;
  will-change: transform;
  animation: corner-bee-hover 38s cubic-bezier(0.33, 0.02, 0.67, 0.98) infinite;
  filter: drop-shadow(0 10px 18px rgba(60, 40, 9, 0.22));
}

.corner-bee.corner-bee-secondary {
  left: clamp(1.2rem, 4vw, 3.2rem);
  right: auto;
  bottom: clamp(16rem, 42vh, 30rem);
  animation-name: corner-bee-hover-mirror;
  animation-duration: 48s;
  animation-delay: -4.1s;
  animation-timing-function: cubic-bezier(0.34, 0.06, 0.64, 0.96);
}

.site-footer {
  width: auto;
  margin: auto 0 0;
  padding: 0;
  color: #fff8e6;
}

.leaflet-container {
  font-family: 'Manrope', sans-serif;
  z-index: 0;
}

@keyframes bee-bob {
  0%,
  100% {
    transform: translateY(0px) rotate(-2deg);
  }

  50% {
    transform: translateY(-15px) rotate(2deg);
  }
}

@keyframes wing-flutter {
  from {
    transform: rotate(-8deg) scale(1);
  }

  to {
    transform: rotate(8deg) scale(1.04);
  }
}

@keyframes honeycomb-drift {
  from {
    background-position: 0 0;
  }

  to {
    background-position: 220px 190px;
  }
}

@keyframes honey-sheen {
  0%,
  100% {
    transform: translateX(-2%);
    opacity: 0.12;
  }

  50% {
    transform: translateX(2%);
    opacity: 0.22;
  }
}

@keyframes flower-strip-wind {
  0%,
  100% {
    transform: translateX(0) rotate(0deg);
  }

  25% {
    transform: translateX(-1px) rotate(-0.12deg);
  }

  50% {
    transform: translateX(0) rotate(0.07deg);
  }

  75% {
    transform: translateX(1px) rotate(0.12deg);
  }
}

@keyframes corner-bee-hover {
  0% {
    transform: translate3d(0, 0, 0) rotate(-42deg) scale(1);
  }

  8% {
    transform: translate3d(-9px, -12px, 0) rotate(-30deg) scale(0.996);
  }

  17% {
    transform: translate3d(12px, -22px, 0) rotate(-12deg) scale(1.004);
  }

  29% {
    transform: translate3d(-15px, -18px, 0) rotate(-36deg) scale(1.001);
  }

  41% {
    transform: translate3d(18px, -30px, 0) rotate(6deg) scale(1.006);
  }

  54% {
    transform: translate3d(-8px, -24px, 0) rotate(-9deg) scale(0.998);
  }

  67% {
    transform: translate3d(21px, -21px, 0) rotate(10deg) scale(1.005);
  }

  79% {
    transform: translate3d(9px, -33px, 0) rotate(4deg) scale(1.002);
  }

  90% {
    transform: translate3d(-12px, -18px, 0) rotate(-28deg) scale(0.997);
  }

  100% {
    transform: translate3d(0, 0, 0) rotate(-42deg) scale(1);
  }
}

@keyframes corner-bee-hover-mirror {
  0% {
    transform: translate3d(0, 0, 0) scaleX(-1) rotate(-38deg) scale(1);
  }

  7% {
    transform: translate3d(6px, -9px, 0) scaleX(-1) rotate(-26deg) scale(0.997);
  }

  16% {
    transform: translate3d(-12px, -21px, 0) scaleX(-1) rotate(4deg) scale(1.003);
  }

  28% {
    transform: translate3d(16px, -15px, 0) scaleX(-1) rotate(10deg) scale(1.006);
  }

  39% {
    transform: translate3d(-9px, -27px, 0) scaleX(-1) rotate(-32deg) scale(1.001);
  }

  52% {
    transform: translate3d(20px, -24px, 0) scaleX(-1) rotate(8deg) scale(1.005);
  }

  64% {
    transform: translate3d(-15px, -16px, 0) scaleX(-1) rotate(-34deg) scale(0.998);
  }

  76% {
    transform: translate3d(10px, -31px, 0) scaleX(-1) rotate(6deg) scale(1.004);
  }

  88% {
    transform: translate3d(-8px, -21px, 0) scaleX(-1) rotate(-28deg) scale(0.999);
  }

  100% {
    transform: translate3d(0, 0, 0) scaleX(-1) rotate(-38deg) scale(1);
  }
}

@keyframes amber-pulse {
  0%,
  100% {
    transform: translateY(0) scale(1);
    box-shadow: 0 18px 34px rgba(168, 112, 7, 0.18);
  }

  50% {
    transform: translateY(-2px) scale(1.03);
    box-shadow: 0 22px 42px rgba(168, 112, 7, 0.26);
  }
}

@media (max-width: 960px) {
  .topbar {
    grid-template-columns: 1fr;
    grid-template-areas:
      'brand'
      'nav'
      'actions';
    justify-items: start;
    row-gap: 0.42rem;
  }

  .topbar.topbar-member {
    grid-template-columns: 1fr;
  }

  .topbar .nav-form,
  .topbar.topbar-member .nav-form {
    justify-self: start;
  }

  .corner-bee {
    --corner-bee-size: clamp(85px, 14vw, 125px);
    bottom: calc(clamp(4.2rem, 11vw, 5.5rem) + var(--corner-bee-size));
    right: calc(clamp(0.7rem, 1.6vw, 1.4rem) + (var(--corner-bee-size) * 0.6));
  }

  .corner-bee.corner-bee-secondary {
    left: clamp(0.9rem, 4vw, 2.4rem);
    right: auto;
    bottom: clamp(12rem, 34vh, 20rem);
  }

  .information-directory {
    grid-template-columns: 1fr;
  }

  .information-visual-items--lifecycle,
  .information-visual-items--castes,
  .information-visual-items--systems,
  .information-visual-items--anatomy,
  .information-visual-items--seasonal,
  .information-visual-items--honey-making,
  .information-visual-items--comb-building {
    grid-template-columns: 1fr;
  }

  .information-visual-card--lifecycle .information-visual-item {
    grid-template-columns: minmax(72px, 86px) minmax(0, 1fr);
    gap: 0.85rem;
  }


@media (max-width: 560px) {
  .information-visual-card--lifecycle .information-visual-item {
    grid-template-columns: 1fr;
  }

  .information-visual-card--lifecycle .information-visual-item-media {
    justify-content: center;
  }

  .information-visual-card--lifecycle .information-visual-item-image {
    width: min(100%, 6rem);
  }
}
  .information-sidebar {
    position: static;
  }

  .information-sidebar-panel {
    max-height: none;
    overflow: visible;
  }

  .nav-strip {
    width: 100%;
    align-items: flex-start;
    justify-content: flex-start;
  }

  .topbar .nav-strip .nav-strip-row {
    width: 100%;
    min-width: 0;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 0.35rem;
  }

  .topbar .nav-strip .nav-link {
    white-space: normal;
  }

  .hero-panel,
  .three-up,
  .two-up,
  .hive-overview-grid,
  .profile-layout,
  .profile-card-grid,
  .profile-fields-grid,
  .profile-address-privacy-row,
  .timeline-grid,
  .map-layout,
  .maintenance-grid,
  .details-grid,
  .planner-form,
  .dialog-actions,
  .section-heading-inline {
    grid-template-columns: 1fr;
  }

  .forecast-row {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .tracker-layout,
  .tracker-form-grid,
  .tracker-stat-row {
    grid-template-columns: 1fr;
  }

  .tracker-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .tracker-toolbar-group {
    width: 100%;
  }

  .hero-visual {
    min-height: 280px;
  }

  .hive-summary,
  .species-item {
    flex-direction: column;
    align-items: flex-start;
  }

  .species-rich-item {
    grid-template-columns: 1fr;
    justify-items: start;
  }

  .hive-summary-meta {
    justify-items: start;
  }

  .section-heading-actions {
    width: 100%;
  }

  .hive-card-footer,
  .hive-visibility-form,
  .hive-delete-form {
    width: 100%;
  }

  .action-row .hive-visibility-form {
    margin-left: 0;
  }

  .hive-delete-form {
    margin-left: 0;
    justify-content: flex-start;
  }

  .visibility-action {
    width: 100%;
    justify-content: space-between;
    white-space: normal;
  }

  .tracker-entry-head {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 640px) {
  .forecast-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .back-to-top {
    right: 0.9rem;
    bottom: 0.9rem;
    width: 3rem;
    height: 3rem;
  }

  .corner-bee {
    --corner-bee-size: 92px;
    right: calc(0.55rem + (var(--corner-bee-size) * 0.6));
    bottom: calc(4.2rem + var(--corner-bee-size));
  }

  .corner-bee.corner-bee-secondary {
    left: 0.6rem;
    right: auto;
    bottom: clamp(8rem, 24vh, 12rem);
  }

  .information-sidebar-panel,
  .information-visual-card,
  .information-content-intro,
  .information-entry,
  .info-tree-group {
    padding: 1rem;
    border-radius: 22px;
  }

  .info-tree-link {
    padding: 0.45rem 0.55rem;
  }

  .information-visual-items {
    grid-template-columns: 1fr;
  }

  .dialog-shell {
    padding: 1rem;
  }

  .tracker-month-label {
    min-width: 0;
    width: 100%;
  }

  .tracker-nav-button {
    flex: 1 1 0;
  }

  .tracker-calendar-grid,
  .tracker-weekday-row {
    gap: 0.25rem;
  }

  .tracker-day {
    min-height: 2.8rem;
    border-radius: 14px;
  }
}

@media (max-width: 640px) {
  .app-frame {
    padding: 0.7rem;
  }

  .site-dialog.information-image-dialog {
    width: calc(100vw - 0.45rem);
  }

  .information-image-dialog-shell {
    padding: 0.9rem;
  }

  .information-image-dialog-image {
    max-height: calc(100vh - 10.5rem);
    border-radius: 18px;
  }

  .page-shell,
  .flash-banner,
  .site-footer {
    width: min(100%, calc(100vw - 1.4rem));
  }

  .topbar {
    top: 0.5rem;
    padding: 0.9rem;
    border-radius: 28px;
    width: min(100%, calc(100vw - 1.4rem));
  }

  .hero-copy h1,
  .section-heading h2,
  .standalone-panel h1 {
    font-size: clamp(2rem, 10vw, 3rem);
  }

  .hero-actions,
  .action-row {
    flex-direction: column;
    align-items: stretch;
  }

  .primary-action,
  .secondary-action,
  .login-action,
  .link-button {
    width: 100%;
  }

  .hex-grid,
  .corner-cluster {
    display: none;
  }

}

/* Footer card styled to echo the top navigation look */
.nav-like-card {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(var(--nav-shell-min-height) * 0.5);
  margin: 0;
  max-width: none;
  padding: 0.38rem 0.5rem;
  overflow: hidden;
  isolation: isolate;
  border-radius: var(--nav-shell-radius);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0) 52%, rgba(255, 236, 177, 0.015)),
    var(--nav-shell-bg);
  color: #fff8e6;
  text-align: center;
  border: 1px solid var(--nav-shell-border);
  backdrop-filter: blur(8px) saturate(1.08);
  -webkit-backdrop-filter: blur(8px) saturate(1.08);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.42),
    inset 0 -10px 18px rgba(255, 255, 255, 0.018),
    var(--shadow);
}

.nav-like-card::before,
.nav-like-card::after {
  content: '';
  position: absolute;
  pointer-events: none;
}

.nav-like-card::before {
  top: 4px;
  bottom: 4px;
  left: 50%;
  right: 0;
  border-radius: 0 20px 20px 0;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.035) 42%, rgba(255, 255, 255, 0.01)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='84' viewBox='0 0 96 84'%3E%3Cg fill='none' stroke='%23ab5808' stroke-width='2.7' stroke-opacity='0.98' stroke-linejoin='round'%3E%3Cpath d='M24 0 48 14v28L24 56 0 42V14z'/%3E%3Cpath d='M72 0 96 14v28L72 56 48 42V14z'/%3E%3Cpath d='M0 -42 24 -28V0L0 14-24 0v-28z'/%3E%3Cpath d='M48 -42 72 -28V0L48 14 24 0v-28z'/%3E%3Cpath d='M96 -42 120 -28V0L96 14 72 0v-28z'/%3E%3Cpath d='M0 42 24 56v28L0 98-24 84V56z'/%3E%3Cpath d='M48 42 72 56v28L48 98 24 84V56z'/%3E%3Cpath d='M96 42 120 56v28L96 98 72 84V56z'/%3E%3C/g%3E%3C/svg%3E") right center / 86px 74px repeat;
  opacity: 0.58;
  -webkit-mask-image: linear-gradient(90deg, rgba(255,255,255,0.02) 0%, rgba(255,255,255,0.06) 14%, rgba(255,255,255,0.2) 34%, rgba(255,255,255,0.54) 68%, rgba(255,255,255,1) 100%);
  mask-image: linear-gradient(90deg, rgba(255,255,255,0.02) 0%, rgba(255,255,255,0.06) 14%, rgba(255,255,255,0.2) 34%, rgba(255,255,255,0.54) 68%, rgba(255,255,255,1) 100%);
}

.nav-like-card::after {
  inset: 1px;
  border-radius: calc(var(--nav-shell-radius) - 1px);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0) 18%),
    radial-gradient(ellipse at 5% 8%, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0) 18%),
    radial-gradient(ellipse at 96% 10%, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0) 16%);
  box-shadow:
    inset 12px 0 18px rgba(255, 255, 255, 0.045),
    inset -12px 0 18px rgba(255, 255, 255, 0.04);
  opacity: 0.34;
}

.nav-like-card p {
  position: relative;
  z-index: 1;
  margin: 0;
}

.nav-like-card a {
  color: #fffaf1;
  font-weight: 700;
}

.card-grid.two-up .feature-card.retailer-card {
  padding-top: 1.15rem;
  padding-bottom: 1.15rem;
}

.retailer-card,
.retailer-card a {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.35rem;
}

.retailer-card .logo-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 96px;
}

.retailer-card .retailer-logo {
  display: block;
  max-width: 160px;
  max-height: 84px;
  width: auto;
  height: auto;
  object-fit: contain;
}

.retailer-card h3 {
  margin: 0.15rem 0 0;
}

.retailer-card p {
  margin: 0.1rem 0 0;
  color: var(--muted);
}

@media (max-width: 640px) {
  .retailer-card .logo-wrap {
    min-height: 72px;
  }

  .retailer-card .retailer-logo {
    max-width: 120px;
    max-height: 64px;
  }
}


/* Product thumbnail card + shadows */
.product-image {
  position: relative;
  background: transparent;
  border-radius: 10px;
  box-shadow: 0 6px 18px rgba(20,24,28,0.04);
}

.store-image-rotator {
  position: relative;
  width: min(100%, 320px);
  height: 160px;
  margin: 0 auto;
}

.store-item-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 6px 14px rgba(20,24,28,0.08);
  background: transparent;
}

.store-image-rotator .store-item-image {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 280ms ease;
}

.store-image-rotator .store-item-image.is-active {
  opacity: 1;
}

/* Fake PayPal buy button for store items (placeholder) */
.paypal-buy {
  display: inline-block;
  margin-top: 0.6rem;
  padding: 0.5rem 0.9rem;
  background: linear-gradient(180deg,#009cde,#0070ba);
  color: #fff;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 600;
  box-shadow: 0 4px 10px rgba(0,0,0,0.12);
}
.paypal-buy:hover { opacity: 0.95; }

.buy-row { margin-top: 0.5rem; }