/* Evelyn Way Neighbourhood
   Colours and type follow the brief (section 4), with the agreed
   primary #2E4A3B and background #EFE9DD. Mobile first. */

:root {
  --green: #2E4A3B;
  --green-dark: #1F4237;
  --paper: #EFE9DD;
  --paper-light: #F7F3EA; /* a lighter cream for selected sections and boxes */
  --white: #FFFFFF;
  --heading-size: clamp(2.125rem, 1.25rem + 3.5vw, 3.125rem); /* 34px to 50px */
  --ink: #1E2422;
  --muted: #5B6661;
  --border: #DDD7CC;
  --brick: #B23A2E; /* errors and alerts */

  --font-heading: "Fraunces", Georgia, serif;
  --font-body: "Atkinson Hyperlegible", Arial, sans-serif;

  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-6: 48px;
  --space-8: 64px;

  --radius: 6px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  /* Cream by default. Selected sections use the lighter cream (.section--light). */
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.6;
}

main {
  flex: 1;
}

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

h1,
h2,
h3 {
  font-family: var(--font-heading);
  font-weight: 600;
  line-height: 1.2;
  color: var(--green);
  margin: 0 0 var(--space-2);
}

/* Page and section headings: 50px on wider screens, scaling down to 34px
   on phones so long headings still fit */
h1,
h2 {
  font-size: var(--heading-size);
}

p {
  margin: 0 0 var(--space-2);
}

a {
  color: var(--green);
  text-underline-offset: 3px;
}

a:hover {
  color: var(--green-dark);
}

:focus-visible {
  outline: 3px solid var(--green);
  outline-offset: 3px;
}

/* One container for the whole site: header, banner, strip and every
   section start on the same left edge (the logo's edge) */
.wrap {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 var(--space-2);
}

@media (min-width: 960px) {
  .wrap {
    padding: 0 var(--space-6);
  }
}

.skip-link {
  position: absolute;
  left: var(--space-2);
  top: -100px;
  padding: var(--space-1) var(--space-2);
  background: var(--white);
  color: var(--ink);
  z-index: 30; /* above the sticky header */
}

.skip-link:focus {
  top: var(--space-1);
}

/* Buttons: at least 48px tall for easy tapping */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 var(--space-3);
  border: 2px solid transparent;
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}

.btn--primary {
  background: var(--green);
  border-color: var(--green);
  color: var(--white);
}

.btn--primary:hover {
  background: var(--green-dark);
  border-color: var(--green-dark);
  color: var(--white);
}

.btn--secondary {
  background: transparent;
  border-color: var(--green);
  color: var(--green);
}

.btn--secondary:hover {
  background: var(--white);
  color: var(--green-dark);
}

.btn--pill {
  background: var(--paper);
  border-color: var(--paper);
  border-radius: 999px;
  color: var(--ink);
}

.btn--pill:hover {
  background: var(--white);
  border-color: var(--white);
  color: var(--ink);
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

/* Small phones: page buttons share the full width, easier to tap */
@media (max-width: 599px) {
  .actions .btn {
    flex: 1 1 0;
  }
}

/* Header */

/* Stays at the top of the screen while the page scrolls */
.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--green);
  color: var(--paper);
}

/* Links to a section on the same page stop below the sticky header */
html {
  --header-h: 96px;
  scroll-padding-top: calc(var(--header-h) + 16px);
}

@media (min-width: 960px) {
  html {
    --header-h: 128px; /* taller header on wide screens */
  }
}

/* Phone and tablet: logo and a Menu button; the menu opens as a panel
   below them. Wide screens (960px+): logo left, nav pill centred,
   Log in and Join right. */

.site-header__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0 var(--space-2);
  padding-top: 12px;
  padding-bottom: 12px;
}

.site-header__brand {
  display: block;
}

.site-header__brand img {
  width: auto;
  height: 72px;
}

.site-header :focus-visible {
  outline-color: var(--paper);
}

.menu-toggle {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  padding: 0 20px;
  background: transparent;
  border: 2px solid var(--paper);
  border-radius: 999px;
  color: var(--paper);
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
}

.menu-toggle:hover {
  background: var(--green-dark);
}

/* Three lines that turn into a cross when the menu is open */
.menu-toggle__icon,
.menu-toggle__icon::before,
.menu-toggle__icon::after {
  display: block;
  width: 20px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
}

.menu-toggle__icon {
  position: relative;
}

.menu-toggle__icon::before,
.menu-toggle__icon::after {
  content: "";
  position: absolute;
  left: 0;
  transition: transform 0.2s ease;
}

.menu-toggle__icon::before {
  top: -6px;
}

.menu-toggle__icon::after {
  top: 6px;
}

.menu-toggle[aria-expanded="true"] .menu-toggle__icon {
  background: transparent;
}

.menu-toggle[aria-expanded="true"] .menu-toggle__icon::before {
  transform: translateY(6px) rotate(45deg);
}

.menu-toggle[aria-expanded="true"] .menu-toggle__icon::after {
  transform: translateY(-6px) rotate(-45deg);
}

.site-menu {
  display: none;
  width: 100%;
  margin-top: var(--space-1);
  padding: var(--space-1) 0 var(--space-3);
  border-top: 1px solid var(--green-dark);
}

.site-menu.is-open {
  display: block;
}

.site-nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-nav li + li {
  border-top: 1px solid var(--green-dark);
}

.site-nav a {
  display: flex;
  align-items: center;
  min-height: 56px;
  color: var(--paper);
  font-size: 1.25rem;
  text-decoration: none;
}

.site-nav a:hover {
  color: var(--paper);
  text-decoration: underline;
}

/* The page you're on */
.site-nav a[aria-current="page"] {
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}

.site-header__account {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.btn--outline-light {
  background: transparent;
  border-color: var(--paper);
  border-radius: 999px;
  color: var(--paper);
}

.btn--outline-light:hover {
  background: var(--green-dark);
  color: var(--paper);
}

/* Admin panel Log out: a soft shade of red on hover (owner's request,
   21 Oct 2026): a see-through wash of the brief's red over the green, with a
   light red edge */
.btn--outline-light.admin-logout:hover {
  background: rgba(178, 58, 46, 0.35); /* --brick */
  border-color: #E8A39B;
  color: var(--paper);
}

@media (min-width: 960px) {
  .site-header__inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: var(--space-3);
    padding-top: var(--space-2);
    padding-bottom: var(--space-2);
  }

  .site-header__brand {
    justify-self: start;
  }

  .site-header__brand img {
    height: 96px;
  }

  .menu-toggle {
    display: none;
  }

  /* The panel wrapper drops away so nav and account sit in the header grid */
  .site-menu,
  .site-menu.is-open {
    display: contents;
  }

  .site-nav {
    justify-self: center;
  }

  .site-nav ul {
    display: flex;
    align-items: center;
    gap: var(--space-1);
  }

  .site-nav li + li {
    border-top: 0;
  }

  .site-nav a {
    min-height: 48px;
    padding: 0 var(--space-2);
    font-size: 18px;
  }

  .site-nav a:hover {
    text-decoration: underline;
  }

  .site-header__account {
    display: flex;
    align-items: center;
    justify-self: end;
    margin: 0;
  }

  /* On wide screens Log in is a plain bold link, as in the agreed design */
  .site-header__login {
    padding: 0 var(--space-1);
    border-color: transparent;
  }

  .site-header__login:hover {
    background: transparent;
    text-decoration: underline;
  }
}

/* Simple page intro (used by the 404 page) */

.intro {
  padding: var(--space-6) 0;
}

.lead {
  font-size: 1.125rem;
  max-width: 34em;
}

/* Hero: full-width photos fading behind a cream join card.
   Phone: photo strip on top, card overlapping it below.
   Wide screens: card sits on the left, over the photo. */

.hero {
  position: relative;
  background: var(--green);
}

.hero__photos {
  position: relative;
  height: 420px;
  overflow: hidden;
}

.hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.2s ease;
}

.hero__img.is-active {
  opacity: 1;
}

.hero__content {
  position: relative;
  margin-top: -64px;
  padding-bottom: var(--space-2);
}

.hero__card {
  padding: var(--space-4) var(--space-3);
  background: var(--paper);
  border-radius: 20px;
}

/* Wide screens: the card floats over the photo as frosted glass,
   see-through cream with the photo blurred behind it. (On phones it sits
   mostly on the green, so it stays solid there.) */
@media (min-width: 960px) {
  @supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .hero__card {
      background: rgba(239, 233, 221, 0.7); /* --paper */
      border: 1px solid rgba(255, 255, 255, 0.6);
      box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
      -webkit-backdrop-filter: blur(18px) saturate(140%);
      backdrop-filter: blur(18px) saturate(140%);
    }

    .hero__card .hero__note {
      color: var(--ink);
    }
  }
}

.hero__card h1 {
  margin-bottom: var(--space-2);
}

.hero__intro {
  margin-bottom: var(--space-3);
}

.hero__form fieldset {
  margin: 0;
  padding: 0;
  border: 0;
}

.hero__form legend {
  padding: 0;
  margin-bottom: var(--space-2);
  font-weight: 700;
  color: var(--green);
}

/* Street and House no. labels in normal weight (owner's choice), on the
   home page form only */
.hero__form .field label {
  font-weight: 400;
}

/* Small phones: street and house number stacked; side by side from 480px */
.hero__fields {
  display: grid;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

@media (min-width: 480px) {
  .hero__fields {
    grid-template-columns: 1fr 120px;
  }
}

.hero__login {
  margin: var(--space-2) 0;
  text-align: center;
}

.hero__login a {
  font-weight: 700;
}

.hero__note {
  margin: 0;
  padding-top: var(--space-2);
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-size: 16px;
}

@media (prefers-reduced-motion: reduce) {
  .hero__img {
    transition: none;
  }
}

/* Form fields: big, clear and easy to tap */

/* White fields with a soft grey edge; the edge turns green, with a light
   green ring, when a field is selected. */
.field label {
  display: block;
  margin-bottom: 8px;
  font-size: 18px;
  font-weight: 700;
  color: var(--green);
}

.field select,
.field input {
  width: 100%;
  min-height: 56px;
  padding: 0 var(--space-2);
  background-color: var(--white);
  border: 2px solid var(--border);
  border-radius: 12px;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 18px;
}

.field select {
  appearance: none;
  padding-right: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%232E4A3B' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
}

.field select:focus,
.field input:focus {
  outline: none;
  border-color: var(--green);
  background-color: var(--white);
  box-shadow: 0 0 0 3px rgba(46, 74, 59, 0.15); /* --green */
}

.btn--block {
  width: 100%;
  border-radius: 999px;
}

.field__hint {
  margin: -2px 0 6px;
  font-size: 16px;
  color: var(--muted);
}

.field__optional {
  font-weight: 400;
  color: var(--muted);
}

.field__error {
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 700;
  color: var(--brick);
}

.field--error select,
.field--error input {
  border-color: var(--brick);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Big, easy tick boxes with the label beside them */
.check {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 4px 12px;
  align-items: center;
}

.check .field__error {
  grid-column: 1 / -1;
}

.check input {
  width: 28px;
  height: 28px;
  margin: 0;
  accent-color: var(--green);
}

.check label {
  font-weight: 700;
  color: var(--green);
  cursor: pointer;
}

.check--error input {
  outline: 2px solid var(--brick);
  outline-offset: 2px;
}

/* Password with a Show / Hide button inside the field */
.password {
  position: relative;
}

.password input {
  padding-right: 88px;
}

.password__toggle {
  position: absolute;
  top: 4px;
  right: 4px;
  bottom: 4px;
  display: inline-flex;
  align-items: center;
  min-width: 72px;
  padding: 0 var(--space-2);
  background: transparent;
  border: 0;
  border-radius: 8px;
  color: var(--green);
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
}

.password__toggle:hover {
  text-decoration: underline;
}

.password__toggle[hidden] {
  display: none;
}

/* Account pages (Join, Log in, Forgot / Reset password): centred heading
   above a single frosted form card on a white page */

.auth {
  padding: var(--space-6) 0 var(--space-8);
}

.auth-steps {
  margin: 0 0 var(--space-3);
  padding-left: 1.4em;
}

.auth-steps li {
  margin-bottom: var(--space-1);
  padding-left: 4px;
}

.auth-steps li::marker {
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--green);
}

.auth__login a {
  font-weight: 700;
}

.auth__card {
  padding: var(--space-4) var(--space-3);
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: 20px;
  box-shadow: 0 12px 40px rgba(30, 36, 34, 0.08); /* --ink */
}

.auth-form fieldset {
  margin: 0 0 var(--space-4);
  padding: 0;
  border: 0;
}

.auth-form legend {
  padding: 0;
  margin-bottom: var(--space-2);
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--green);
}

.auth-form .field + .field {
  margin-top: var(--space-2);
}

/* Small phones: street and house number stacked; side by side from 480px */
.auth-form__address {
  display: grid;
  gap: var(--space-2);
}

/* Fields side by side share the grid gap, so no extra top margin
   (otherwise House no. sits lower than Street) */
.auth-form__address .field + .field {
  margin-top: 0;
}

/* Centred layout (Join): heading and steps above one centred form column */
.auth--centred {
  background: var(--paper);
}

/* Form card: lighter cream with a thin green edge on the cream page */
.auth--centred .auth__card {
  background: var(--paper-light); /* lighter cream so the card stands out on the cream page */
  border: 1px solid var(--line);
  box-shadow: 0 4px 16px rgba(30, 36, 34, 0.04); /* --ink, kept soft */
  -webkit-backdrop-filter: blur(24px) saturate(140%);
  backdrop-filter: blur(24px) saturate(140%);
}

/* Browsers without blur get a solid card so the text stays readable */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .auth--centred .auth__card {
    background: var(--paper);
  }
}

.auth--centred .auth__head,
.auth--centred .auth__card,
.auth--centred .auth__foot {
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}

.auth--centred .auth__head {
  margin-bottom: var(--space-4);
  text-align: center;
}

.auth--centred .auth__head .lead {
  margin-left: auto;
  margin-right: auto;
}

.auth__foot {
  margin-top: var(--space-3);
  text-align: center;
}

/* The three steps as numbered cards; in a row from 720px */
.auth-steps--row {
  display: grid;
  gap: var(--space-1);
  margin: var(--space-3) 0 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
  text-align: left;
}

.auth-steps--row li {
  position: relative;
  margin: 0;
  padding: var(--space-2) var(--space-2) var(--space-2) 60px;
  background: rgba(46, 74, 59, 0.06); /* --green */
  border-radius: 12px;
  counter-increment: step;
}

.auth-steps--row li::before {
  content: counter(step);
  position: absolute;
  left: var(--space-2);
  top: var(--space-2);
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 2px solid var(--green);
  border-radius: 50%;
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--green);
}

@media (min-width: 720px) {
  .auth-steps--row {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-2);
  }

  /* Each step on a single line */
  .auth-steps--row li {
    padding: 14px 12px 14px 52px;
    font-size: 16px;
    white-space: nowrap;
  }

  .auth-steps--row li::before {
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
  }
}

.auth-form__checks {
  display: grid;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.rules {
  padding: var(--space-1) var(--space-2);
  background: rgba(46, 74, 59, 0.06); /* --green */
  border-radius: 12px;
}

.rules summary {
  min-height: 48px;
  display: flex;
  align-items: center;
  font-weight: 700;
  color: var(--green);
  cursor: pointer;
}

.rules ol {
  margin: var(--space-1) 0 var(--space-1);
  padding-left: 1.3em;
}

.rules li {
  margin-bottom: 4px;
}

.auth-form__note {
  margin: var(--space-2) 0 0;
  font-size: 16px;
  color: var(--muted);
  text-align: center;
}

/* Log in: "keep me logged in" and "forgot password" side by side,
   stacked when there isn't room */
.auth-form__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-1) var(--space-3);
  margin: var(--space-3) 0;
}

.auth-form__forgot {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  font-weight: 700;
}

/* Success message, e.g. after changing a password */
.notice {
  margin-bottom: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-left: 6px solid var(--green);
  background: rgba(46, 74, 59, 0.08); /* --green */
  border-radius: 0 12px 12px 0;
  color: var(--green);
  font-weight: 700;
}

/* Space above the button when it follows a field directly (Forgot, Reset) */
.auth-form > .field + .btn--block {
  margin-top: var(--space-4);
}

.error-summary {
  margin-bottom: var(--space-4);
  padding: var(--space-2) var(--space-3);
  border-left: 6px solid var(--brick);
  background: rgba(178, 58, 46, 0.07); /* --brick */
  border-radius: 0 12px 12px 0;
}

.error-summary:focus {
  outline: 3px solid var(--brick);
  outline-offset: 2px;
}

.error-summary__title {
  margin: 0 0 var(--space-1);
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 700;
  color: var(--brick);
}

.error-summary ul {
  margin: 0;
  padding-left: 1.2em;
}

.error-summary a {
  color: var(--brick);
  font-weight: 700;
}

@media (min-width: 480px) {
  .auth-form__address {
    grid-template-columns: 1fr 140px;
  }

  /* Line the rules box up with the tick-box labels */
  .rules {
    margin-left: 40px;
  }
}

@media (min-width: 960px) {
  .auth__card {
    padding: var(--space-6);
  }
}

/* Log in and Join: form card on the left, photo with a green notes box on
   the right. Phones and tablets: the form first, then the photo and notes. */

.auth--split {
  padding: var(--space-6) 0 var(--space-8);
}

.auth-split {
  display: grid;
  gap: var(--space-4);
  align-items: stretch;
}

/* Stacked: one comfortable centred column */
@media (max-width: 1199px) {
  .auth-panel,
  .auth-aside {
    width: 100%;
    max-width: 760px;
    margin: 0 auto;
  }
}

.auth-panel {
  padding: var(--space-4) var(--space-3);
  background: var(--paper-light);
  border: 1px solid var(--line);
  border-radius: 24px;
}

.auth-panel h1 {
  margin: var(--space-4) 0 var(--space-1);
  line-height: 1.1;
}

.auth-panel__lede {
  margin: 0 0 var(--space-4);
  color: var(--muted);
}

/* Log in / Join switch: a pill with the current page filled in green */
.auth-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  padding: 6px;
  background: rgba(46, 74, 59, 0.08); /* --green */
  border-radius: 999px;
}

.auth-tabs__tab {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  border-radius: 999px;
  color: var(--green);
  font-weight: 700;
  text-decoration: none;
}

.auth-tabs__tab:hover {
  background: rgba(46, 74, 59, 0.08); /* --green */
  color: var(--green);
}

.auth-tabs__tab.is-active {
  background: var(--green);
  color: var(--paper);
}

/* Even space between every part of the form */
.auth--split .auth-form > * + *,
.auth--split .auth-form .field + .field {
  margin-top: var(--space-3);
}

.auth--split .auth-form > .btn--block {
  margin-top: var(--space-4);
}

/* Two fields side by side (name and email) from 600px; stacked on phones */
.auth-form__pair {
  display: grid;
  gap: var(--space-3) var(--space-2);
}

.auth--split .auth-form__address .field + .field,
.auth--split .auth-form__pair .field + .field {
  margin-top: 0;
}

@media (min-width: 600px) {
  .auth-form__pair {
    grid-template-columns: 1fr 1fr;
  }
}

.field__hint--after {
  margin: 8px 0 0;
}

/* "Add a mobile number" and "Read the house rules": underlined links
   that open to show more */
.optional-field summary,
.auth--split .rules summary {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  color: var(--green);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  list-style: none;
}

.optional-field summary::-webkit-details-marker,
.auth--split .rules summary::-webkit-details-marker {
  display: none;
}

.optional-field[open] summary {
  margin-bottom: var(--space-1);
}

.auth--split .rules {
  margin-left: 0;
  padding: 0;
  background: none;
}

.auth--split .rules ol {
  margin-top: var(--space-1);
  padding: var(--space-2) var(--space-2) var(--space-2) 2.2em;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 12px;
}

/* The tick box in its own white box */
.check--boxed {
  align-items: start;
  padding: var(--space-2) 20px;
  background: var(--white);
  border: 2px solid var(--border);
  border-radius: 12px;
}

.check--boxed input {
  margin-top: 2px;
}

.check--boxed label {
  font-weight: 400;
  color: var(--ink);
}

.check--boxed.check--error {
  border-color: var(--brick);
}

/* Photo with the green notes box underneath */
.auth-aside {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 24px;
  background: var(--green);
}

.auth-aside__img {
  width: 100%;
  height: 260px;
  object-fit: cover;
}

.auth-aside__box {
  padding: var(--space-4) var(--space-3);
  color: var(--paper);
}

.auth-aside__box h2 {
  margin: 0 0 var(--space-2);
  font-size: clamp(1.6rem, 2.4vw, 2rem);
  color: var(--paper);
}

.auth-aside__box ul {
  margin: 0;
  padding-left: 1.2em;
}

.auth-aside__box li + li {
  margin-top: 10px;
}

.auth-aside__box p {
  margin: 0;
  opacity: 0.9;
}

/* "Back to log in" under the button */
.auth-panel__back {
  text-align: center;
}

.auth-panel__back a {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  font-weight: 700;
}

@media (min-width: 480px) {
  .auth--split .auth-form__address {
    grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
  }
}

@media (min-width: 600px) {
  .auth-panel {
    padding: var(--space-6);
  }

  .auth-aside__img {
    height: 340px;
  }

  .auth-aside__box {
    padding: var(--space-6);
  }
}

/* Wide screens: a wide form with a narrower photo panel beside it. The panel
   is the same height as the form: the photo fills whatever space the green
   box leaves. */
@media (min-width: 1200px) {
  .auth-split {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: var(--space-6);
  }

  .auth-aside__img {
    flex: 1;
    height: auto;
    min-height: 280px;
  }
}

/* Information pages (History, House rules, Privacy), following the prototype:
   a green page header carrying on from the site header, then a white page
   with a contents list on the left (sticky on wide screens) and a readable
   column on the right. */

:root {
  --line: rgba(46, 74, 59, 0.22);
  --paper-soft: #F7F3EA; /* boxes and contents panel */
}

.page-head {
  background: var(--green);
  color: var(--paper);
}

.page-head__inner {
  padding-top: clamp(24px, 4vw, 48px);
  padding-bottom: clamp(40px, 6vw, 72px);
}

.page-head--small .page-head__inner {
  padding-bottom: clamp(32px, 4vw, 48px);
}

.page-head h1 {
  margin: 0 0 16px;
  max-width: 18ch;
  line-height: 1.04;
  letter-spacing: -0.025em;
  color: var(--paper);
}

.page-head--small h1 {
  max-width: 20ch;
}

.page-head__lede {
  margin: 0;
  max-width: 44ch;
  font-size: 20px;
  line-height: 1.55;
}

.page-head__read {
  margin: 18px 0 0;
  font-size: 16px;
  color: #C9D4C4;
}

.page-head :focus-visible {
  outline-color: var(--paper);
}

.info {
  padding: clamp(40px, 6vw, 80px) 0 clamp(56px, 7vw, 96px);
  background: var(--paper);
  color: var(--green);
}

.info__grid {
  display: grid;
  gap: 32px;
  align-items: start;
}

.info__main {
  max-width: 760px;
  min-width: 0;
}

/* Contents list: a panel above the text on phones and tablets, a sticky
   side list on wide screens */
.toc {
  padding: 20px;
  background: var(--paper-soft);
  border-radius: 16px;
}

.toc h2 {
  margin: 0 0 12px;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 700;
  color: var(--muted);
}

.toc ol {
  margin: 0;
  padding: 0;
  list-style: none;
  columns: 2;
  column-gap: 24px;
}

.toc a {
  display: block;
  padding: 6px 0;
  font-size: 17px;
  line-height: 1.35;
  text-decoration: none;
}

.toc a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* History story */

.story section {
  padding-bottom: 48px;
  margin-bottom: 48px;
  border-bottom: 1px solid var(--line);
}

.story section:last-child {
  padding-bottom: 0;
  margin-bottom: 0;
  border-bottom: 0;
}

.when {
  margin: 0 0 6px;
  font-family: var(--font-heading);
  font-size: 18px;
  color: var(--muted);
}

.story h2 {
  margin: 0 0 16px;
  font-size: clamp(1.7rem, 2.6vw, 2.2rem);
  line-height: 1.15;
  letter-spacing: -0.015em;
}

.story p {
  margin: 0 0 16px;
  font-size: 18px;
  line-height: 1.7;
  color: var(--ink);
}

.hfig {
  margin: 28px 0 0;
}

.hfig img {
  width: 100%;
  height: auto;
  border-radius: 16px;
  background: var(--green);
}

.hfig--narrow {
  max-width: 400px;
}

.hfig figcaption {
  margin-top: 10px;
  font-size: 16px;
  line-height: 1.5;
  color: var(--muted);
}

/* section.streets-box outranks ".story section:last-child", which would
   otherwise remove the bottom edge and padding */
.story section.streets-box {
  padding: 24px;
  margin-bottom: 48px;
  background: var(--paper-soft);
  border: 2px solid var(--green);
  border-radius: 20px;
}

.streets-box p:last-child {
  margin-bottom: 0;
}


/* House rules and privacy text */

.info__main section,
.info__main .rule {
}

.info__main h2 {
  margin: 0 0 10px;
  font-size: clamp(1.5rem, 2.2vw, 1.85rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.info__main p {
  margin: 0 0 14px;
  font-size: 18px;
  line-height: 1.65;
}

/* Rules, each with a real "like this / not like this" example */
.rule-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.rule {
  display: grid;
  gap: 10px;
  padding: 0 0 36px;
  margin: 0 0 36px;
  border-bottom: 1px solid var(--line);
}

.info__main .rule__line {
  color: var(--muted);
}

.eg {
  display: grid;
  gap: 12px;
  margin-top: 18px;
}

.eg > div {
  padding: 16px 18px;
  border-radius: 14px;
}

.eg__good {
  background: var(--white);
  border: 1px solid var(--line);
}

.eg__bad {
  background: rgba(46, 74, 59, 0.06); /* --green */
  border: 1px dashed rgba(46, 74, 59, 0.35); /* --green */
}

.info__main .eg__label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 700;
}

.eg__label svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.eg__bad .eg__label {
  color: var(--brick);
}

.info__main .eg__text {
  margin: 0;
  font-size: 17px;
  line-height: 1.5;
  color: var(--ink);
}

.info__main .eg__bad .eg__text {
  color: var(--muted);
}

.report {
  margin-bottom: 36px;
}

.report-steps {
  display: grid;
  gap: 16px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

.report-steps li {
  padding-top: 16px;
  border-top: 2px solid var(--green);
  font-size: 17px;
  line-height: 1.5;
}

.report-steps strong {
  display: block;
  margin-bottom: 4px;
  font-size: 18px;
}

.report-steps span {
  color: var(--muted);
}

/* Emergency numbers panel */
.emergency {
  display: grid;
  margin: 0 0 28px;
  overflow: hidden;
  background: var(--green);
  border-radius: 20px;
  color: var(--paper);
}

.emergency > div {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 22px 24px;
}

.emergency > div + div {
  border-top: 1px solid rgba(239, 233, 221, 0.2); /* --paper */
}

.emergency__num {
  font-family: var(--font-heading);
  font-size: 2.6rem;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.emergency__label {
  font-size: 17px;
  line-height: 1.4;
}

.info__main .updated {
  font-size: 16px;
  color: var(--muted);
}

/* Privacy */
.info-sec {
  padding-bottom: 36px;
  margin-bottom: 36px;
  border-bottom: 1px solid var(--line);
}

.table-wrap {
  margin-top: 18px;
  overflow-x: auto;
  overflow-y: hidden; /* never an up-and-down scrollbar inside a table (owner's request, 22 Oct 2026) */
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 16px;
}

/* Phones: each row becomes a small card with labels */
.keep {
  width: 100%;
  border-collapse: collapse;
  font-size: 16px;
  line-height: 1.45;
}

.keep thead {
  display: none;
}

.keep tr {
  display: block;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
}

.keep tbody tr:last-child {
  border-bottom: 0;
}

.keep th,
.keep td {
  display: block;
  padding: 0;
  text-align: left;
}

.keep tbody th {
  margin-bottom: 4px;
  font-weight: 700;
}

.keep td {
  color: var(--ink);
}

.keep td:last-child {
  color: var(--muted);
}

.keep td:nth-child(2)::before {
  content: "Who can see it: ";
  font-weight: 700;
  color: var(--green);
}

.keep td:last-child::before {
  content: "Why: ";
  font-weight: 700;
  color: var(--green);
}

.keep .opt {
  font-weight: 400;
  color: var(--muted);
}

.nevers {
  display: grid;
  gap: 12px 32px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}

.nevers li {
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 10px;
  font-size: 18px;
  line-height: 1.5;
  color: var(--ink);
}

.nevers svg {
  width: 22px;
  height: 22px;
  margin-top: 3px;
  fill: none;
  stroke: var(--brick);
  stroke-width: 2.4;
  stroke-linecap: round;
}

.choices {
  display: grid;
  margin: 16px 0 0;
}

.choices > div {
  display: grid;
  gap: 4px;
  padding: 16px 0;
  border-top: 1px solid var(--line);
}

.choices dt {
  font-size: 18px;
  font-weight: 700;
}

.choices dd {
  margin: 0;
  font-size: 18px;
  line-height: 1.55;
  color: var(--muted);
}

.ask {
  margin-bottom: 28px;
  padding: 26px 28px;
  background: var(--paper-soft);
  border: 2px solid var(--green);
  border-radius: 20px;
}

.info__main .ask p {
  margin: 0;
}

@media (min-width: 561px) {
  .story section.streets-box {
    padding: 32px;
  }
}

@media (min-width: 641px) {
  .eg,
  .emergency,
  .nevers {
    grid-template-columns: repeat(2, 1fr);
  }

  .report-steps {
    grid-template-columns: repeat(3, 1fr);
  }

  .emergency > div + div {
    border-top: 0;
    border-left: 1px solid rgba(239, 233, 221, 0.2); /* --paper */
  }

  .choices > div {
    grid-template-columns: 220px 1fr;
    gap: 24px;
  }

  .keep {
    font-size: 17px;
  }

  .keep thead {
    display: table-header-group;
  }

  .keep tr {
    display: table-row;
    padding: 0;
  }

  .keep th,
  .keep td {
    display: table-cell;
    padding: 14px 18px;
    vertical-align: top;
    border-bottom: 1px solid var(--line);
  }

  .keep thead th {
    font-size: 16px;
    font-weight: 700;
    color: var(--muted);
    background: var(--paper-soft);
  }

  .keep tbody th {
    width: 30%;
    margin: 0;
  }

  .keep tbody tr:last-child th,
  .keep tbody tr:last-child td {
    border-bottom: 0;
  }

  .keep td::before {
    display: none;
  }
}

@media (max-width: 560px) {
  .toc ol {
    columns: 1;
  }
}

@media (min-width: 961px) {
  .info__grid {
    grid-template-columns: 240px minmax(0, 1fr);
    gap: 64px;
  }

  .toc {
    position: sticky;
    top: calc(var(--header-h) + 24px); /* below the sticky header */
    padding: 0;
    background: none;
    border-radius: 0;
  }

  .toc ol {
    columns: 1;
    border-left: 2px solid var(--line);
  }

  .toc a {
    padding: 8px 0 8px 16px;
    margin-left: -2px;
    border-left: 2px solid transparent;
  }

  .toc a:hover {
    border-left-color: var(--green);
  }

  .story p,
  .info__main p {
    font-size: 19px;
  }
}

/* Pending: thank-you card after sending the join form */

/* Same cream page and lighter card as the account forms */
.pending {
  padding: var(--space-8) 0;
  background: var(--paper);
}

.pending__card {
  max-width: 640px;
  margin: 0 auto;
  padding: var(--space-6) var(--space-3);
  background: var(--paper-light); /* lighter cream so the card stands out on the cream page */
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: 0 16px 48px rgba(30, 36, 34, 0.1); /* --ink */
  -webkit-backdrop-filter: blur(24px) saturate(140%);
  backdrop-filter: blur(24px) saturate(140%);
  text-align: center;
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .pending__card {
    background: var(--paper);
  }
}

.pending__icon {
  width: 64px;
  height: 64px;
  margin: 0 auto var(--space-3);
  fill: none;
  stroke: var(--green);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.pending .lead {
  margin-left: auto;
  margin-right: auto;
}

.pending .actions {
  justify-content: center;
}

/* Green strip under the hero: three things you can do */

.features {
  padding: var(--space-4) 0;
  background: var(--green);
  color: var(--paper);
}

.features__list {
  display: grid;
  gap: var(--space-3);
  margin: 0 auto;
  list-style: none;
}

.features__item {
  display: flex;
  gap: var(--space-2);
  align-items: flex-start;
}

.features__icon {
  flex: none;
  width: 28px;
  height: 28px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.features__title {
  margin: 0 0 4px;
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 700;
  color: var(--paper);
}

.features p {
  margin: 0;
}

/* Image placeholder: swap for a real <img> once photos arrive */

.img-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 3;
  background: var(--paper-light);
  border: 2px dashed var(--border);
  border-radius: var(--radius);
  color: var(--muted);
  text-align: center;
  padding: var(--space-2);
}

/* Page sections */

h3 {
  font-size: 1.25rem;
  margin-bottom: var(--space-1);
}

.section {
  padding: var(--space-6) 0;
}

.section--white {
  background: var(--white);
}

.section--light {
  background: var(--paper-light);
}

/* Home page background: a lighter cream than the other pages */
.page-home {
  background: #FDF9F2;
}

/* Selected home sections (examples, local history, join card) on white */
.section--white {
  background: var(--white);
}

/* "The sort of thing you'll see": example posts as white cards.
   One per row on phones, two on tablets, four on wide screens. */
.example-grid {
  display: grid;
  gap: var(--space-2);
  margin: var(--space-4) 0 0;
  padding: 0;
  list-style: none;
}

.example {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: var(--space-3);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 16px;
}

.example__text {
  margin: var(--space-2) 0;
}

.example__by {
  margin: auto 0 0;
  font-size: 16px;
  color: var(--muted);
}

/* Small label pills, e.g. post categories */
.tag {
  display: inline-block;
  padding: 4px 12px;
  background: rgba(46, 74, 59, 0.08); /* --green */
  border-radius: 999px;
  font-size: 16px;
  font-weight: 700;
  color: var(--green);
}

.tag--admin {
  background: var(--green);
  color: var(--white);
}

@media (min-width: 720px) {
  .example-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1100px) {
  .example-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-3);
  }
}

/* "How joining works": three steps, each with a filled green number.
   Stacked on phones, side by side from 720px. */
.how-steps {
  display: grid;
  gap: var(--space-4);
  margin: var(--space-4) 0 0;
  padding: 0;
  list-style: none;
  counter-reset: how;
}

.how-steps li {
  counter-increment: how;
}

.how-steps li::before {
  content: counter(how);
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-bottom: var(--space-2);
  background: var(--green);
  border-radius: 50%;
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--white);
}

.how-steps h3 {
  margin-bottom: 4px;
  font-family: var(--font-body);
  font-size: 1.25rem;
  font-weight: 700;
}

.how-steps p {
  margin: 0;
  color: var(--muted);
}

/* "Questions you might have": heading on the left, open/close answers on
   the right (stacked on phones) */
.faq {
  display: grid;
  gap: var(--space-4);
}

.faq__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-3);
  margin: var(--space-3) 0 0;
}

.faq__links a {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  font-weight: 700;
}

.faq__list details {
  border-bottom: 1px solid var(--border);
}

.faq__list details:first-child {
  border-top: 1px solid var(--border);
}

.faq__list summary {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 72px;
  padding: var(--space-2) 48px var(--space-2) 0;
  font-weight: 700;
  font-size: 1.125rem;
  color: var(--green);
  cursor: pointer;
  list-style: none;
}

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

/* Plus sign that turns into a minus when the answer is open */
.faq__list summary::before,
.faq__list summary::after {
  content: "";
  position: absolute;
  right: 8px;
  top: 50%;
  width: 20px;
  height: 2px;
  background: var(--green);
  transition: transform 0.2s ease;
}

.faq__list summary::after {
  transform: rotate(90deg);
}

.faq__list details[open] summary::after {
  transform: rotate(0deg);
}

.faq__list summary:hover {
  text-decoration: underline;
}

.faq__list details p {
  max-width: 60ch;
  margin: 0;
  padding: 0 48px var(--space-3) 0;
  color: var(--muted);
}

@media (min-width: 720px) {
  .how-steps {
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
  }
}

@media (min-width: 960px) {
  .faq {
    grid-template-columns: 5fr 7fr;
    gap: var(--space-8);
    align-items: start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .faq__list summary::after {
    transition: none;
  }
}

/* Placeholders sitting on a light cream section use the main cream */
.section--light .img-placeholder {
  background: var(--paper);
}

/* A photo beside text in a split section, the same shape as the placeholder */
.split__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius);
}

.section__intro {
  color: var(--muted);
  max-width: 34em;
}

.card-grid {
  display: grid;
  gap: var(--space-2);
  margin: var(--space-3) 0 0;
  padding: 0;
  list-style: none;
}

.card {
  padding: var(--space-3);
  background: var(--paper);
  border: 1px solid var(--border);
  border-top: 4px solid var(--green);
  border-radius: var(--radius);
}

.card p {
  margin: 0;
}

.steps {
  display: grid;
  gap: var(--space-3);
  margin: var(--space-3) 0 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.steps__item {
  position: relative;
  padding-left: 64px;
  counter-increment: step;
}

.steps__item::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border: 2px solid var(--green);
  border-radius: 50%;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.375rem;
  color: var(--green);
}

.steps__item p {
  margin: 0;
}

.tick-list {
  margin: var(--space-2) 0 var(--space-3);
  padding: 0;
  list-style: none;
}

.tick-list li {
  position: relative;
  padding-left: 32px;
  margin-bottom: var(--space-1);
}

.tick-list li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 0.45em;
  width: 7px;
  height: 13px;
  border: solid var(--green);
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
}

.split {
  display: grid;
  gap: var(--space-4);
  align-items: center;
}

/* Join band at the bottom of the home page: a large cream card on the white
   page, text on the left and a house photo on the right.
   Phone: photo on top, text below. */
.cta {
  padding: var(--space-6) 0 var(--space-8);
}

.cta__card {
  display: grid;
  overflow: hidden;
  background: var(--paper-light);
  border: 1px solid var(--line);
  border-radius: 24px;
}

.cta__photo {
  order: -1;
  width: 100%;
  height: 220px;
  object-fit: cover;
}

.cta__text {
  padding: var(--space-4) var(--space-3);
}

.cta h2 {
  margin-bottom: var(--space-2);
}

.cta__intro {
  margin: 0;
  max-width: 34em;
  color: var(--ink);
}

.cta__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-4);
  margin-top: var(--space-4);
}

.btn--pill-shape {
  border-radius: 999px;
  padding: 0 var(--space-4);
}

.cta__login {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  font-weight: 700;
}

.cta__note {
  margin: var(--space-4) 0 0;
  padding-top: var(--space-3);
  border-top: 1px solid var(--border);
  font-size: 16px;
  color: var(--muted);
}

/* Small phones: the button fills the width, the link sits under it */
@media (max-width: 479px) {
  .cta .btn--pill-shape {
    width: 100%;
  }
}

@media (min-width: 600px) {
  .cta__photo {
    height: 380px;
  }
}

@media (min-width: 960px) {
  .cta__card {
    grid-template-columns: 4fr 3fr;
    min-height: 600px;
  }

  .cta__photo {
    order: 0;
    height: 100%;
  }

  .cta__text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--space-8);
  }

  .cta__intro {
    font-size: 1.25rem;
  }
}

.btn--light {
  background: var(--paper);
  border-color: var(--paper);
  color: var(--green);
}

.btn--light:hover {
  background: var(--white);
  border-color: var(--white);
  color: var(--green-dark);
}

/* Footer */

/* Footer: all in the header green. Logo and a short description, two
   columns of links, and a "Need help now?" card whose numbers tap to call.
   Then the copyright with a thin line under it, and a band of house
   outlines along the very bottom.
   Phone: stacked, the two link columns side by side.
   Tablet (720px+): logo and description on top, links and card below.
   Wide screens (1100px+): all three in one row. */
.site-footer {
  background: var(--green); /* same green as the header */
  color: var(--paper);
}

.site-footer a {
  color: var(--paper);
}

.site-footer :focus-visible {
  outline-color: var(--paper);
}

/* House band: one repeating outline drawing that stays in place. Only the
   chimney smoke and a few window lights move, inside the drawing. */
.site-footer__skyline {
  position: relative;
  height: 136px; /* the 120px drawing plus a little room above (owner asked for less space under the line) */
  overflow: hidden;
}

.site-footer__skyline::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0; /* ground line at the foot of the page */
  background-repeat: repeat-x;
  background-position: 0 100%;
  height: 120px;
  background-image: url("/assets/images/site/skyline-front.svg?v=2"); /* raise v= when the drawing changes, so Cloudflare fetches it fresh */
  background-size: 1200px 120px; /* houses at their drawn size */
}

/* Phones: the houses at 60% of their drawn size, so a fuller row of the
   street fits the narrow screen instead of one and a half big houses. The
   band shrinks to match. */
@media (max-width: 599px) {
  .site-footer__skyline {
    height: 84px;
  }

  .site-footer__skyline::after {
    height: 72px;
    background-size: 720px 72px;
  }
}

.site-footer__body {
  padding: var(--space-6) 0 var(--space-4);
}

.site-footer__top {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-6) var(--space-4);
}

.site-footer__brand {
  display: inline-block;
}

.site-footer__brand img {
  width: auto;
  height: 104px;
}

.site-footer__about p {
  max-width: 26em;
  margin: var(--space-2) 0 0;
  opacity: 0.85;
}

/* Two plain columns of links, no headings */
.site-footer__links {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: start;
  gap: var(--space-3);
}

@media (min-width: 480px) {
  .site-footer__links {
    gap: var(--space-6);
  }
}

/* Very narrow phones: long links may wrap rather than run off the edge */
@media (max-width: 359px) {
  .site-footer__links {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .site-footer__links li a {
    white-space: normal;
  }
}

/* Column headings: same font as "Need help now?", but smaller (16px) and a
   lighter colour (owner's choice). 70% still gives 4.9:1 contrast. */
.site-footer__links-title {
  margin: 0 0 var(--space-1);
  font-size: 16px;
  color: rgba(239, 233, 221, 0.7); /* --paper */
}

.site-footer__links ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer__links a {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  text-decoration: none;
  white-space: nowrap;
}

.site-footer__links a:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* "Need help now?" card with a thin cream edge */
.site-footer__help {
  padding: var(--space-3);
  border: 1px solid rgba(239, 233, 221, 0.25); /* --paper */
  border-radius: 16px;
}

.site-footer__help-title {
  margin: 0 0 var(--space-2);
  font-size: 1.35rem;
  color: var(--paper);
}

.site-footer__call {
  display: grid;
  grid-template-columns: 4.5rem 1fr;
  gap: var(--space-2);
  align-items: center;
  min-height: 48px;
  text-decoration: none;
}

.site-footer__call + .site-footer__call {
  margin-top: var(--space-1);
}

.site-footer__num {
  font-family: var(--font-heading);
  font-size: 1.9rem;
  font-weight: 600;
  line-height: 1;
}

.site-footer__call-text {
  font-size: 16px;
  line-height: 1.4;
  opacity: 0.9;
}

.site-footer__call:hover .site-footer__call-text {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Copyright, with the thin line under it (owner's choice) */
.site-footer__bottom {
  margin-top: var(--space-6);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid rgba(239, 233, 221, 0.2); /* --paper */
  font-size: 16px;
}

.site-footer__bottom p {
  margin: 0;
  opacity: 0.8;
}

/* The copyright on the left, the designers' credit on the right (under it
   on phones) */
.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
}

.site-footer__credit a {
  color: inherit;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.site-footer__credit a:hover {
  text-decoration-thickness: 2px;
}

@media (min-width: 720px) {
  .site-footer__top {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
  }

  .site-footer__about {
    grid-column: 1 / -1;
  }
}

@media (min-width: 1100px) {
  .site-footer__top {
    grid-template-columns: minmax(0, 1.2fr) auto minmax(0, 1fr);
    column-gap: clamp(48px, 5vw, 96px);
  }

  .site-footer__about {
    grid-column: auto;
  }
}

/* Wider screens */

@media (min-width: 720px) {
  .card-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 960px) {
  .intro,
  .section,
  .cta {
    padding: var(--space-8) 0;
  }

  .card-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-3);
  }

  .steps {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
  }

  .steps__item {
    padding-left: 0;
    padding-top: 64px;
  }

  .split {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8);
  }

  .split--reverse > .img-placeholder,
  .split--reverse > .split__img {
    order: -1;
  }

  /* Room at the bottom for the glass feature strip, which sits over the photo */
  .hero {
    display: flex;
    align-items: center;
    min-height: 1000px;
    padding: var(--space-6) 0 200px;
  }

  .hero__photos {
    position: absolute;
    inset: 0;
    height: auto;
  }

  .hero .features {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
  }

  @supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .hero .features {
      background: rgba(31, 66, 55, 0.6); /* --green-dark */
      border-top: 1px solid rgba(255, 255, 255, 0.15);
      -webkit-backdrop-filter: blur(16px) saturate(140%);
      backdrop-filter: blur(16px) saturate(140%);
    }
  }

  .hero__content {
    margin-top: 0;
    padding-bottom: 0;
  }

  .hero__card {
    max-width: 540px;
    padding: var(--space-4);
  }

  .features__list {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
  }
}

/* Admin area (/admin). Only the site's own colours, fonts and spacing.
   Admin login: the dark logo centred above the form.
   Admin panel: a green sidebar (logo, menu, who is logged in) beside the
   page; a top bar with the page title and date; white cards on cream.
   Phones and tablets (under 960px): the sidebar becomes a green bar at the
   top with a Menu button that opens the menu below it. */

.admin-logo {
  padding: var(--space-4) var(--space-2) 0;
  text-align: center;
}

.admin-logo a {
  display: inline-block;
}

.admin-logo img {
  width: auto;
  height: 96px;
}

/* Sidebar */
.admin-side {
  background: var(--green);
  color: var(--paper);
}

.admin-side :focus-visible {
  outline-color: var(--paper);
}

.admin-side__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-2);
}

.admin-side__logo img {
  display: block;
  width: auto;
  height: 64px;
}

.admin-side__menu {
  display: none;
  padding: 0 var(--space-2) var(--space-3);
}

.admin-side__menu.is-open {
  display: block;
}

.admin-side ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.admin-side nav a {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  margin-bottom: 4px;
  padding: 0 var(--space-2);
  border-radius: 12px;
  color: var(--paper);
  font-weight: 700;
  text-decoration: none;
}

.admin-side nav a:hover {
  background: rgba(239, 233, 221, 0.1); /* --paper */
}

.admin-side nav a[aria-current="page"] {
  background: rgba(239, 233, 221, 0.18); /* --paper */
}

.admin-side nav svg {
  flex: none;
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.admin-side__count {
  margin-left: auto;
  min-width: 28px;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--paper);
  color: var(--green);
  font-size: 16px;
  text-align: center;
}

.admin-side__me {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid rgba(239, 233, 221, 0.25); /* --paper */
}

.admin-side__avatar {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--paper);
  color: var(--green);
  font-weight: 700;
}

.admin-side__name,
.admin-side__role {
  margin: 0;
  overflow-wrap: anywhere;
}

.admin-side__name {
  font-weight: 700;
}

.admin-side__role {
  font-size: 16px;
  opacity: 0.8;
}

.admin-side__me form {
  grid-column: 1 / -1;
}

.admin-side__me .btn {
  width: 100%;
}

/* Top bar and page area */
.admin-top {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-1) var(--space-3);
  padding: var(--space-3) var(--space-2);
  background: var(--paper-light);
  border-bottom: 1px solid var(--border);
}

.admin-top h1 {
  margin: 0;
  font-size: 30px; /* the page title in the top bar (owner's request, 23 Oct 2026; was up to 36px) */
}

.admin-top__date {
  margin: 0;
  color: var(--muted);
  font-size: 16px;
  font-weight: 700;
}

.admin-content {
  padding: var(--space-3) var(--space-2) var(--space-8);
}

/* Wide screens: sidebar on the left, always open */
@media (min-width: 960px) {
  .admin-shell {
    display: grid;
    grid-template-columns: 272px minmax(0, 1fr);
    min-height: 100vh;
  }

  .admin-side {
    position: sticky;
    top: 0;
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow-y: auto;
  }

  /* The logo centred and bigger at the top of the sidebar (owner's request,
     21 Oct 2026); the logo itself is only resized */
  .admin-side__head {
    justify-content: center;
    padding: 5px 0 0; /* only 5px above the logo (owner's requests, 23 Oct 2026; was 48px 24px 32px) */
  }

  .admin-side__logo img {
    height: 104px; /* a little smaller (owner's request, 22 Oct 2026; was 128px) */
  }

  .admin-side__menu,
  .admin-side__menu.is-open {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 0 var(--space-2) var(--space-3);
  }

  .admin-side__me {
    margin-top: auto; /* keeps who is logged in at the foot of the sidebar */
  }

  .admin-top {
    padding: var(--space-3) var(--space-6);
  }

  .admin-content {
    padding: var(--space-4) var(--space-6) var(--space-8);
  }
}

/* Cards: overview boxes, join requests and members */
.admin-stat,
.admin-panel,
.admin-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 16px;
}

.admin-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
  margin: var(--space-3) 0;
  padding: 0;
  list-style: none;
}

/* Overview: the day and date as a heading above the tiles, with no box
   (owner's request, 22 Oct 2026) */
.admin-date {
  margin: 0 0 var(--space-3);
  font-size: clamp(2rem, 1.5rem + 1.6vw, 2.75rem);
  line-height: 1.1;
}

.admin-stats:first-child,
.admin-date + .admin-stats {
  margin-top: 0;
}

@media (min-width: 960px) {
  .admin-stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.admin-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: var(--space-3);
}

.admin-stat__label {
  color: var(--muted);
  font-size: 16px;
  font-weight: 400; /* owner's request, 22 Oct 2026 (was 700) */
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.admin-stat__num {
  color: var(--green);
  font-family: var(--font-heading);
  font-size: 2.75rem;
  line-height: 1.1;
}

.admin-panels {
  display: grid;
  gap: var(--space-3);
}

@media (min-width: 1100px) {
  .admin-panels {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }
}

.admin-panel {
  padding: var(--space-3);
}

/* Overview's Recent activity: no box, just the heading and the table on
   the page (owner's request, 22 Oct 2026) */
.admin-panel--activity {
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
}

.admin-panel--activity h2 {
  margin-bottom: var(--space-2);
}

.admin-panel h2,
.admin-card h2 {
  font-size: 1.5rem;
}

.admin-list {
  margin: 0 0 var(--space-2);
  padding: 0;
  list-style: none;
}

.admin-list li {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px var(--space-2);
  padding: 12px 0;
  border-top: 1px solid var(--border);
}

.admin-list__when {
  color: var(--muted);
  font-size: 16px;
}

/* Overview's Recent activity: each kind of event in its own soft colour
   (owner's request, 22 Oct 2026), from the brief's palette */
.admin-list li {
  align-items: center;
}

.activity-tag {
  display: inline-block;
  padding: 2px 12px;
  border-radius: 999px;
  font-family: "Atkinson Hyperlegible Next", var(--font-body); /* the same font's newer version, which has a 500 weight (loaded in the admin layout) */
  font-size: 16px;
  font-weight: 500; /* owner's request, 22 Oct 2026 */
}

.activity-tag--asked {
  background: #FBEFD9; /* amber tint */
  color: #8A5A00;
}

.activity-tag--approved {
  background: #E3EEE8; /* green tint */
  color: var(--green);
}

.activity-tag--declined {
  background: rgba(178, 58, 46, 0.12); /* --brick */
  color: var(--brick);
}

.activity-tag--deactivated {
  background: rgba(91, 102, 97, 0.14); /* --muted */
  color: var(--ink);
}

.admin-empty {
  color: var(--muted);
}

.admin-card {
  max-width: 880px;
  margin-bottom: var(--space-3);
  padding: var(--space-3);
}

.admin-card h2 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1);
}

.admin-card__details {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  margin: 0 0 var(--space-3);
}

.admin-card__details dt {
  color: var(--muted);
  font-size: 16px;
}

.admin-card__details dd {
  margin: 0 0 var(--space-1);
  overflow-wrap: anywhere; /* long email addresses must not push the page sideways */
}

@media (min-width: 600px) {
  .admin-card__details {
    grid-template-columns: 12em minmax(0, 1fr);
    column-gap: var(--space-2);
  }
}

.admin-card__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-2);
}

.admin-reject {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-2);
  flex: 1 1 320px;
}

.admin-reject .field {
  flex: 1 1 220px;
}

/* "Deactivated" label beside a member's name */
.admin-tag {
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--muted);
  color: var(--white);
  font-family: var(--font-body);
  font-size: 16px;
}

.admin-search {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-2);
  max-width: 880px;
  margin-bottom: var(--space-4);
}

.admin-search .field {
  flex: 1 1 260px;
}

/* Members: the filter buttons on the left and the search on the right, in
   one row (owner's request, 21 Oct 2026); the search goes under the buttons
   when there isn't room */
.admin-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.admin-toolbar .chips {
  margin: 0;
}

.admin-search--inline {
  flex: 0 1 560px;
  align-items: center;
  max-width: none;
  margin: 0;
}

.admin-search--inline .field {
  margin: 0;
}

/* Members' area (residents only): home dashboard, board, news, giveaways,
   directory, street cam, useful info and My account. Built from the same
   parts as the rest of the site: the green page head, white cards like the
   home page examples, the site's buttons, fields and tags. Extra colours are
   only the brief's own tokens (section 4): lavender and amber for tags. */

:root {
  --lavender: #6E5BA6;
  --lavender-tint: #EEEAF6;
  --lavender-ink: #4A3D7A;
  --amber: #8A5A00;
  --amber-tint: #FBEFD9;
  --tabbar-h: 68px;
}

.members {
  padding: var(--space-4) 0 var(--space-8);
}

.narrow {
  max-width: 820px;
}

.members__top {
  margin-bottom: var(--space-3);
}

.members__h2 {
  margin: var(--space-4) 0 var(--space-2);
  font-size: clamp(1.5rem, 1.2rem + 1vw, 1.85rem);
}

.members__note {
  color: var(--muted);
}

.back {
  margin-bottom: var(--space-2);
  font-weight: 700;
}

.back a {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
}

.back a::before {
  content: "\2190\00a0";
}

/* White cards, the same look as the example posts on the home page */
.member-card {
  padding: var(--space-3);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 16px;
  min-width: 0;
}

.member-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin-bottom: 12px;
}

.member-card__title {
  margin: 0 0 var(--space-1);
  font-size: 1.375rem;
  overflow-wrap: anywhere;
}

.member-card__title a {
  text-decoration: none;
}

.member-card__title a:hover {
  text-decoration: underline;
}

.member-card__text {
  margin: 0 0 var(--space-1);
  overflow-wrap: anywhere;
}

.member-card__meta {
  margin: var(--space-1) 0 0;
  font-size: 16px;
  color: var(--muted);
}

.card-list {
  display: grid;
  gap: var(--space-2);
}

.post-card__main {
  display: flex;
  gap: var(--space-2);
  align-items: flex-start;
  justify-content: space-between;
}

.post-card__main > div {
  min-width: 0;
}

.post-card__thumb {
  flex: none;
  width: 96px;
  height: 96px;
  object-fit: cover;
  border-radius: 12px;
}

@media (min-width: 600px) {
  .post-card__thumb {
    width: 140px;
    height: 105px;
  }
}

/* Category tags: a word on every tag, colour only helps (brief section 4) */
.tag--parking {
  background: var(--amber-tint);
  color: var(--amber);
}

.tag--security {
  background: rgba(178, 58, 46, 0.1); /* --brick */
  color: var(--brick);
}

.tag--lost-found,
.tag--recommendations,
.tag--events {
  background: var(--lavender-tint);
  color: var(--lavender-ink);
}

.tag--new {
  background: var(--lavender);
  color: var(--white);
}

.tag--hidden {
  background: var(--muted);
  color: var(--white);
}

/* Giveaway status: Available, Reserved, Gone */
.status {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 16px;
  font-weight: 700;
}

.status--available {
  background: var(--green);
  color: var(--white);
}

.status--reserved {
  background: var(--amber-tint);
  color: var(--amber);
}

.status--gone {
  background: var(--border);
  color: var(--ink);
}

/* Category chips across the top of the board */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin-bottom: var(--space-3);
}

.chip {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 18px;
  background: var(--white);
  border: 2px solid var(--border);
  border-radius: 999px;
  color: var(--green);
  font-weight: 700;
  text-decoration: none;
}

.chip:hover {
  border-color: var(--green);
}

.chip[aria-current="page"] {
  background: var(--green);
  border-color: var(--green);
  color: var(--white);
}

/* Filter capsules in the admin panel (Members, Join requests): lighter and
   softer (owner's request, 22 Oct 2026): 500 weight, a thin light edge,
   rounded 40px ends; the chosen one solid green #2E4A3B with white text. The residents' pages keep their own capsules. */
.admin-shell .chip {
  background: var(--paper-light); /* #F7F3EA for the tabs not chosen (owner's request, 22 Oct 2026) */
  border-width: 1px;
  border-color: #DDD7CC;
  border-radius: 40px;
  font-family: "Atkinson Hyperlegible Next", var(--font-body);
  font-weight: 500;
}

.admin-shell .chip:hover {
  border-color: #A6C3B5;
}

.admin-shell .chip[aria-current="page"] {
  background: var(--green); /* #2E4A3B: the chosen tab solid green everywhere (owner's request, 22 Oct 2026) */
  border-color: var(--green);
  color: var(--white);
}

.pager {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

/* Friendly empty states (brief section 9, principle 6) */
.empty {
  padding: var(--space-4) var(--space-3);
  background: var(--paper-light);
  border: 2px dashed var(--border);
  border-radius: 16px;
  text-align: center;
}

.empty p {
  margin-bottom: 0;
}

.empty .btn {
  margin-top: var(--space-2);
}

.empty--quiet {
  padding: 0;
  background: none;
  border: 0;
  color: var(--muted);
  text-align: left;
}

.notice--quiet {
  border-left-color: var(--muted);
  background: var(--paper-light);
  color: var(--ink);
  font-weight: 400;
}

/* Forms: one white card with the fields stacked */
.form-card {
  max-width: 760px;
  margin: 0 auto;
  padding: var(--space-4) var(--space-3);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 20px;
}

.form-card h1 {
  font-size: clamp(2rem, 1.5rem + 2vw, 2.5rem);
}

.form-card__lede {
  color: var(--muted);
}

.stack-form {
  display: grid;
  gap: var(--space-3);
}

.stack-form .actions {
  margin-top: 0;
}

.stack-form > .btn {
  justify-self: start;
}

.field textarea {
  display: block;
  width: 100%;
  padding: 12px var(--space-2);
  background: var(--white);
  border: 2px solid var(--border);
  border-radius: 12px;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.5;
  resize: vertical;
}

.field textarea:focus {
  outline: none;
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(46, 74, 59, 0.15); /* --green */
}

.field--error textarea {
  border-color: var(--brick);
}

.field input[type="file"] {
  min-height: 0;
  padding: 12px;
  background: var(--paper-light);
}

fieldset.photo-fields,
fieldset.check-group,
fieldset.radio-group {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

.photo-fields legend,
.check-group legend,
.radio-group legend,
.status-switch legend {
  margin-bottom: 8px;
  padding: 0;
  font-size: 18px;
  font-weight: 700;
  color: var(--green);
}

.check-group,
.radio-group {
  display: grid;
  gap: 12px;
}

.photo-list {
  display: grid;
  gap: var(--space-2);
  margin: var(--space-2) 0;
  padding: 0;
  list-style: none;
}

.photo-item {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-2);
  background: var(--paper-light);
  border-radius: 12px;
}

.photo-item img {
  width: 120px;
  height: 90px;
  object-fit: cover;
  border-radius: 8px;
}

.photo-item__fields {
  display: grid;
  gap: 12px;
  min-width: 0;
}

@media (min-width: 600px) {
  .photo-item {
    grid-template-columns: 120px minmax(0, 1fr);
  }
}

.photo-new {
  display: grid;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.more-photos summary {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  margin-top: var(--space-1);
  color: var(--green);
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
}

/* Photos on a post or giveaway: each opens full size */
.gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-1);
  margin: var(--space-3) 0;
  padding: 0;
  list-style: none;
}

.gallery--1 {
  grid-template-columns: minmax(0, 1fr);
  max-width: 640px;
}

.gallery img {
  width: 100%;
  height: 100%;
  max-height: 420px;
  object-fit: cover;
  border-radius: 12px;
}

.post__h2 {
  margin-top: var(--space-3);
  font-size: 1.375rem;
}

.prose {
  overflow-wrap: anywhere;
}

.prose p {
  margin: 0 0 var(--space-2);
}


.post__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--space-2);
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border);
}

.btn--danger {
  background: transparent;
  border-color: var(--brick);
  color: var(--brick);
}

.btn--danger:hover {
  background: var(--brick);
  color: var(--white);
}

.link-button {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0;
  background: none;
  border: 0;
  color: var(--green);
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
}

/* Report: opens a small form with an optional reason */
.report-box {
  flex: 1 1 100%;
}

.report-box summary {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  color: var(--muted);
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
}

.report-box form {
  display: grid;
  gap: 12px;
  max-width: 520px;
  margin-top: var(--space-1);
}

.report-box form .btn {
  justify-self: start;
}

.report-box--small summary {
  font-size: 16px;
}

.reported {
  margin: 0;
  color: var(--muted);
  font-size: 16px;
}

/* Comments: one level */
.comments {
  max-width: 820px;
  margin-top: var(--space-4);
}

.comments h2 {
  font-size: 1.5rem;
}

.comment-list {
  margin: 0 0 var(--space-3);
  padding: 0;
  list-style: none;
}

.comment {
  padding: var(--space-2) 0;
  border-top: 1px solid var(--border);
}

.comment__by {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  margin-bottom: var(--space-1);
}

.comment__by .member-card__meta {
  margin: 0;
}

.avatar {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--green);
  color: var(--paper);
  font-size: 16px;
  font-weight: 700;
}

.comment__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--space-3);
  font-size: 16px;
  font-weight: 700;
}

.comment__actions > a {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
}

.comment-form {
  padding: var(--space-3);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 16px;
}

/* Home dashboard */
.pinned {
  margin-bottom: var(--space-4);
  padding: var(--space-3);
  background: var(--white);
  border: 2px solid var(--green);
  border-radius: 16px;
}

.pinned__label {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin-bottom: var(--space-1);
  color: var(--green);
  font-size: 16px;
  font-weight: 700;
}

.pinned__label svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linejoin: round;
}

.pinned h2 {
  font-size: clamp(1.5rem, 1.2rem + 1vw, 1.85rem);
}

.pinned h2 a {
  text-decoration: none;
}

.dash {
  display: grid;
  gap: var(--space-3);
}

/* The boxes on the right of the board, stacked together */
.dash__side {
  display: grid;
  gap: var(--space-3);
  align-content: start;
  min-width: 0;
}

.dash__block {
  min-width: 0;
  padding: var(--space-3);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 16px;
}

.dash__block--wide {
  padding: 0;
  background: none;
  border: 0;
}

.dash__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px var(--space-2);
  margin-bottom: var(--space-2);
}

.dash__head h2 {
  margin: 0;
  font-size: clamp(1.5rem, 1.2rem + 1vw, 1.85rem);
}

.dash__all {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  font-weight: 700;
}

.dash__block > .btn {
  margin-top: var(--space-2);
}


.mini-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.mini-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px var(--space-1);
  padding: 12px 0;
  border-top: 1px solid var(--border);
  overflow-wrap: anywhere;
}

.mini-list a {
  font-weight: 700;
}

.mini-list__when {
  width: 100%;
  font-size: 16px;
  color: var(--muted);
}

.mini-list--photos li {
  flex-wrap: nowrap;
  gap: var(--space-2);
}

.mini-list--photos img {
  flex: none;
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: 10px;
}

/* Giveaways */
.give-grid {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 600px) {
  .give-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1100px) {
  .give-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-3);
  }
}

.give-card {
  padding: 0;
  overflow: hidden;
}

.give-card__img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.give-card__body {
  padding: var(--space-2) var(--space-3) var(--space-3);
}

.give-card--gone .give-card__img {
  opacity: 0.55;
}

.status-switch {
  margin-top: var(--space-3);
}

.status-switch fieldset {
  margin: 0;
  padding: 0;
  border: 0;
}

.status-switch__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}

.interested {
  margin-top: var(--space-2);
}

.interested__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.interested__list li {
  display: flex;
  flex-wrap: wrap;
  gap: 4px var(--space-2);
  padding: 12px 0;
  border-top: 1px solid var(--border);
  overflow-wrap: anywhere;
}

.interest-form {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border);
}

/* Directory */
.dir-list {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 720px) {
  .dir-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1100px) {
  .dir-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.dir-card {
  display: flex;
  gap: var(--space-2);
  align-items: flex-start;
}

.dir-card p {
  margin: 0;
  overflow-wrap: anywhere;
}

.dir-card__house {
  flex: none;
  display: grid;
  place-items: center;
  min-width: 56px;
  height: 56px;
  padding: 0 8px;
  border-radius: 12px;
  background: var(--green);
  color: var(--paper);
  font-family: var(--font-heading);
  font-size: 1.25rem;
}

.dir-card a {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
}

/* Street cam */
.cam {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--ink);
  border-radius: 16px;
}

.cam iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.side-info {
  margin: var(--space-4) 0;
}

.side-info h2 {
  font-size: 1.375rem;
}

.side-info .info-sec {
  margin: 0;
  padding: 0;
  border: 0;
}

.side-info .info-sec + .info-sec {
  margin-top: var(--space-3);
}

@media (min-width: 1100px) {
  .members__split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: var(--space-4);
    align-items: start;
  }

  .members__split .side-info {
    margin-top: calc(var(--space-4) + 3.25rem);
  }
}

/* The 999 / 101 panel, tappable to call */
.emergency > a {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 22px 24px;
  color: var(--paper);
  text-decoration: none;
}

.emergency > a + a {
  border-top: 1px solid rgba(239, 233, 221, 0.2); /* --paper */
}

.emergency > a:hover .emergency__label {
  text-decoration: underline;
}

.emergency :focus-visible,
.emergency > a:focus-visible {
  outline-color: var(--paper);
  outline-offset: -4px;
}

/* My account */
.account-sec {
  margin-bottom: var(--space-3);
  scroll-margin-top: calc(var(--header-h) + 16px);
}

.account-sec h2 {
  font-size: clamp(1.5rem, 1.2rem + 1vw, 1.85rem);
}

/* My account: contents on the left on wide screens (the same layout as
   History), the cards beside it */
.account-main {
  min-width: 0;
  max-width: 820px;
}


/* News archive */
.archive__list {
  margin: 0;
  padding-left: 1.2em;
}

.archive__list li {
  padding: 6px 0;
}

/* History: sources at the bottom (brief section 5) */
.story section.sources {
  padding-top: 0;
  border-bottom: 0;
}

.sources ul {
  margin: 0;
  padding-left: 1.2em;
  color: var(--ink);
}

.sources li {
  margin-bottom: 6px;
}

/* Members' header: the menu is the bottom bar on phones and tablets, and
   sits in the header on wide screens */
.site-nav--member {
  display: none;
}

@media (min-width: 960px) {
  .site-nav--member {
    display: block;
  }
}

/* Bottom bar (brief section 9, principle 4) */
.tabbar {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 25;
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--white);
  border-top: 1px solid var(--border);
  box-shadow: 0 -4px 16px rgba(30, 36, 34, 0.08); /* --ink */
}

.tabbar ul {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  max-width: 640px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

.tabbar a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: var(--tabbar-h);
  padding: 6px 2px;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.2;
  text-decoration: none;
}

.tabbar svg {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.tabbar a[aria-current="page"] {
  color: var(--green);
  font-weight: 700;
}

.tabbar a[aria-current="page"] svg {
  stroke-width: 2.4;
}

.tabbar :focus-visible {
  outline-offset: -4px;
}

/* Room at the foot of the page so the bar never covers the footer */
.has-tabbar {
  padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom));
}

@media (min-width: 960px) {
  .tabbar {
    display: none;
  }

  .has-tabbar {
    padding-bottom: 0;
  }
}

/* Very narrow phones: labels shrink a little so all five fit */
@media (max-width: 359px) {
  .tabbar a {
    font-size: 16px;
  }
}

/* Admin additions: news, board, pages, street cam and admins */
.admin-h2 {
  margin: var(--space-4) 0 var(--space-2);
  font-size: 1.5rem;
}

.admin-card h3 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1);
  font-size: 1.25rem;
  overflow-wrap: anywhere;
}

.admin-card .prose {
  margin-bottom: var(--space-2);
  padding: var(--space-2);
  background: var(--paper-light);
  border-radius: 12px;
}

.admin-card .prose p:last-child {
  margin-bottom: 0;
}

.admin-tag--green {
  background: var(--green);
}

.admin-tag--alert {
  background: var(--brick);
}

.admin-form .stack-form {
  max-width: 760px;
}

.admin-form h2 {
  font-size: 1.5rem;
}

.admin-log {
  max-width: 880px;
  margin-top: var(--space-4);
}

.admin-panel .admin-list li form {
  margin-left: auto;
}

.page-section {
  display: grid;
  gap: var(--space-2);
  min-width: 0;
  margin: 0;
  padding: var(--space-3);
  background: var(--paper-light);
  border: 0;
  border-radius: 12px;
}

.page-section legend {
  float: left;
  width: 100%;
  margin-bottom: 0;
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--green);
}

/* Members' header: My account and Log out on the right, where visitors see
   Log in. Beside the logo on phones; plain bold links on wide screens. */
.site-header__member {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.site-header__member form {
  margin: 0;
}

/* Small phones: slightly smaller buttons so the logo and both fit on one row */
@media (max-width: 479px) {
  .site-header__member .btn {
    padding: 0 12px;
    font-size: 16px;
  }
}

@media (min-width: 960px) {
  .site-header__member {
    justify-self: end;
  }
}
/* Members' footer: three link columns (Members, More, Explore), spread
   evenly, and no "Need help now?" card (owner's choice). Phones: two
   columns, the third wraps below. Tablets: the links take the full width
   under the logo. Wide screens: logo and description on the left, the
   links filling the right. */
.site-footer__links--members {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  justify-content: stretch;
  gap: var(--space-3);
}

@media (min-width: 600px) {
  .site-footer__links--members {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-4);
  }
}

@media (min-width: 720px) {
  .site-footer__top--members .site-footer__links {
    grid-column: 1 / -1;
  }
}

@media (min-width: 1100px) {
  .site-footer__top--members {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  }

  .site-footer__top--members .site-footer__links {
    grid-column: auto;
  }
}

/* Home page banner card for logged-in residents: a welcome line above the
   button to the members' home, instead of the join form */
.hero__welcome {
  margin-bottom: var(--space-3);
  font-weight: 700;
  color: var(--green);
}

/* Admin tables. Phones and tablets: each row is a small card, each value
   with its label. Wide screens: an ordinary table. */
.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 16px;
  line-height: 1.45;
}

.admin-table thead {
  display: none;
}

.admin-table tr {
  display: block;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
}

.admin-table tbody tr:last-child {
  border-bottom: 0;
}

.admin-table th,
.admin-table td {
  display: block;
  padding: 2px 0;
  text-align: left;
  overflow-wrap: anywhere; /* long email addresses must not push the page sideways */
}

.admin-table tbody th {
  margin-bottom: 4px;
  font-size: 18px;
  color: var(--green);
}

.admin-table td::before {
  content: attr(data-label) ": ";
  font-weight: 700;
  color: var(--green);
}

.admin-table__reason {
  color: var(--muted);
}

@media (min-width: 900px) {
  .admin-table thead {
    display: table-header-group;
  }

  .admin-table tr {
    display: table-row;
    padding: 0;
  }

  .admin-table th,
  .admin-table td {
    display: table-cell;
    padding: 12px 16px;
    vertical-align: middle; /* each row's text lines up with the middle of its buttons (owner's request, 22 Oct 2026) */
    border-bottom: 1px solid var(--line);
  }

  .admin-table tbody tr:last-child th,
  .admin-table tbody tr:last-child td {
    border-bottom: 0;
  }

  .admin-table thead th {
    background: var(--paper-light);
    color: var(--muted);
    font-size: 16px;
    white-space: nowrap;
  }

  .admin-table tbody th {
    margin: 0;
    font-size: 16px;
  }

  .admin-table td::before {
    content: none;
  }

  .admin-table .status {
    white-space: nowrap;
  }
}

/* Admin tables: the buttons' column has a visible heading, on the right
   above them (owner's request, 21 Oct 2026) */
.admin-table thead th.admin-table__action-head {
  text-align: right;
}

/* Admin tables: the button cell has no label */
.admin-table td.admin-table__action {
  padding-top: var(--space-1);
}

.admin-table td.admin-table__action::before {
  content: none;
}

.admin-table__action form {
  margin: 0;
}

@media (min-width: 900px) {
  .admin-table td.admin-table__action {
    padding-top: 6px;
    padding-bottom: 6px; /* even, so the buttons sit in the middle of the row */
    text-align: right;
    white-space: nowrap;
  }
}

/* Admin tables: the buttons in a row. Compact but still 48px tall (brief
   section 4); they wrap onto a second line when the cell is narrow. */
.btn--small {
  padding: 0 14px;
  font-size: 16px;
}

.row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}

.row-actions form {
  margin: 0;
}

.admin-table td.admin-table__action .row-actions {
  justify-content: flex-start;
}

@media (min-width: 900px) {
  .admin-table td.admin-table__action {
    white-space: normal;
  }

  .admin-table td.admin-table__action .row-actions {
    justify-content: flex-end;
  }
}

/* "Turn down" opens a small box for the optional reason */
.row-reject summary {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 14px;
  border: 2px solid var(--green);
  border-radius: var(--radius);
  color: var(--green);
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}

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

.row-reject[open] summary {
  background: var(--paper-light);
}

.row-reject form {
  display: grid;
  gap: var(--space-1);
  min-width: 240px;
  margin-top: var(--space-1);
  text-align: left;
}

.row-reject .btn {
  justify-self: start;
}

/* The whole admin panel (owner's request, 22 Oct 2026): every button and
   status label in the soft style. Lighter 500 weight, light colours, 40px
   rounded ends. Green for everyday actions, red for deleting or removing.
   The admin login page (outside .admin-shell) and the shared "Are you sure?"
   pop-up (added to the page body) keep their strong colours, so the last
   step stays clear. Height stays at 48px (brief section 4, owner's choice). */
.admin-shell .btn {
  border-radius: 40px;
  font-family: "Atkinson Hyperlegible Next", var(--font-body);
  font-weight: 500;
}

.admin-shell .btn--primary {
  background: #E3EEE8; /* green tint */
  border-color: transparent;
  color: var(--green);
}

.admin-shell .btn--primary:hover {
  background: #D3E3DA;
  border-color: transparent;
  color: var(--green);
}

.admin-shell .btn--secondary,
.admin-shell .pin-btn {
  background: var(--white);
  border-width: 1px;
  border-color: #DDD7CC;
  color: var(--green);
}

.admin-shell .btn--secondary:hover,
.admin-shell .pin-btn:hover {
  background: var(--white);
  border-color: #A6C3B5;
  color: var(--green);
}

.admin-shell .pin-btn.is-pinned {
  background: #E3EEE8;
  border-color: #A6C3B5;
}

.admin-shell .btn--danger {
  background: rgba(178, 58, 46, 0.1); /* --brick */
  border-color: transparent;
  color: var(--brick);
}

.admin-shell .btn--danger:hover {
  background: rgba(178, 58, 46, 0.16);
  border-color: transparent;
  color: var(--brick);
}

/* The admin panel's Log out keeps its own look on the green sidebar */
.admin-shell .btn--outline-light {
  border-width: 2px;
}

/* Status labels: Current, Active, Upcoming, Waiting, Deactivated... */
.admin-shell .status,
.admin-shell .mod-status {
  font-family: "Atkinson Hyperlegible Next", var(--font-body);
  font-weight: 500;
}

.admin-shell .status--available {
  background: #E3EEE8;
  color: var(--green);
}

.admin-shell .status--gone {
  background: rgba(91, 102, 97, 0.14); /* --muted */
  color: var(--ink);
}

/* Deactivated members: a light red (owner's request, 22 Oct 2026) */
.admin-shell .status--deactivated {
  background: rgba(178, 58, 46, 0.12); /* --brick */
  color: var(--brick);
}

.admin-shell .mod-status--waiting {
  background: rgba(178, 58, 46, 0.12);
  color: var(--brick);
}

/* Text buttons in every admin table (owner's request, 22 Oct 2026), the same
   look as Approve and Decline: pale background, coloured text, no border,
   rounded ends, a lighter weight. Green for everyday actions, red for
   removing or hiding. Buttons inside pop-ups are unchanged. */
.btn--soft,
.btn--soft-danger {
  border-color: transparent;
  border-radius: 40px;
  font-family: "Atkinson Hyperlegible Next", var(--font-body);
  font-weight: 500;
}

.btn--soft {
  background: #E3EEE8; /* green tint */
  color: var(--green);
}

.btn--soft:hover {
  background: #D3E3DA;
  border-color: transparent;
  color: var(--green);
}

.btn--soft-danger {
  background: rgba(178, 58, 46, 0.1); /* --brick */
  color: var(--brick);
}

.btn--soft-danger:hover {
  background: rgba(178, 58, 46, 0.16);
  border-color: transparent;
  color: var(--brick);
}

/* Join requests: Approve and Decline in very light colours with a lighter
   weight (owner's request, 22 Oct 2026): soft green and soft red, no heavy
   edge. The Decline that sends the form (after the reason) is unchanged. */
.request-actions .btn--primary,
.request-actions .row-reject summary {
  border-radius: 40px; /* rounded ends (owner's request, 22 Oct 2026) */
  font-family: "Atkinson Hyperlegible Next", var(--font-body);
  font-weight: 500;
}

.request-actions .btn--primary {
  background: #E3EEE8; /* green tint */
  border-color: #E3EEE8;
  color: var(--green);
}

.request-actions .btn--primary:hover {
  background: #D3E3DA;
  border-color: #D3E3DA;
  color: var(--green);
}

.request-actions .row-reject summary {
  background: rgba(178, 58, 46, 0.1); /* --brick */
  border-color: transparent;
  color: var(--brick);
}

.request-actions .row-reject summary:hover,
.request-actions .row-reject[open] summary {
  background: rgba(178, 58, 46, 0.16);
}

/* Small grey text under a title in a table cell */
.admin-table__sub {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-weight: 400;
  font-size: 16px;
}

.admin-table .admin-tag {
  display: inline-block;
  margin: 2px 4px 2px 0;
}

.admin-table tbody th a {
  color: var(--green);
}

/* Space between a table section and the form after it (Admins page) */
section + .admin-form {
  margin-top: var(--space-4);
}

/* Events (their own page since 19 Oct 2026): each card starts with a green
   date block, like a calendar page */
.members__h2--first {
  margin-top: 0;
}

.event-card {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
}

.event-card__body {
  flex: 1;
  min-width: 0;
}

.event-card__date {
  flex: none;
  display: grid;
  place-items: center;
  width: 64px;
  margin: 0;
  padding: 8px 0;
  border-radius: 12px;
  background: var(--green);
  color: var(--paper);
  line-height: 1.1;
  text-align: center;
}

.event-card__day {
  font-family: var(--font-heading);
  font-size: 1.75rem;
}

.event-card__month {
  font-size: 16px;
  font-weight: 700;
  text-transform: uppercase;
}

.event-card__when {
  margin: 0 0 var(--space-1);
  color: var(--green);
  font-weight: 700;
}

.event-card--past .event-card__date {
  background: var(--muted);
}

/* Phones: the photo would squeeze the text, so it goes */
@media (max-width: 599px) {
  .event-card .post-card__thumb {
    display: none;
  }
}

/* When and where, on one event's page */
.event-facts {
  display: grid;
  gap: var(--space-1);
  margin: var(--space-2) 0;
  padding: var(--space-2) var(--space-3);
  background: var(--paper-light);
  border-radius: 12px;
}

.event-facts div {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--space-2);
}

.event-facts dt {
  min-width: 4.5em;
  font-weight: 700;
  color: var(--green);
}

.event-facts dd {
  margin: 0;
}

/* Admin event form: date and start time side by side from 480px */
.event-form__when {
  display: grid;
  gap: var(--space-3);
}

@media (min-width: 480px) {
  .event-form__when {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}
/* Members' header menu: seven items (Events and Parking added, owner's
   request). It needs 1100px; between 960 and 1099px the members' area keeps
   the bottom bar instead, with My account and Log out on the right. */
@media (min-width: 960px) and (max-width: 1099px) {
  .site-header--member .site-nav--member {
    display: none;
  }

  .site-header--member .site-header__member {
    grid-column: 3;
  }

  .tabbar {
    display: block;
  }

  .has-tabbar {
    padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom));
  }
}

@media (min-width: 1100px) and (max-width: 1279px) {
  .site-nav--member a {
    padding: 0 var(--space-1);
  }
}

/* Home dashboard, right-hand cards (news, events, parking, giveaways, street
   cam): all the same shape. A header strip with an icon, the name and the
   "See all" link, a thin line under it, then the body. */
.dash__side .dash__block,
.card-box {
  padding: 0;
  overflow: hidden;
}

.dash__side .dash__head,
.card-box .dash__head {
  align-items: center;
  margin: 0;
  padding: 14px var(--space-3);
  border-bottom: 1px solid var(--border);
}

.dash__side .dash__head h2,
.card-box .dash__head h2 {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 1.375rem;
}

.dash__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(46, 74, 59, 0.08); /* --green */
}

.dash__icon svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: var(--green);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.dash__side .dash__all,
.card-box .dash__all {
  font-size: 16px;
}

.dash__body {
  padding: var(--space-2) var(--space-3) var(--space-3);
}

.dash__body > p {
  margin: 0;
}

.dash__body > .btn {
  margin-top: var(--space-2);
}

.dash__body .empty--quiet {
  margin: 0;
}

/* Lists inside a card: no line above the first row, as the header has one */
.dash__body .mini-list li:first-child {
  border-top: 0;
  padding-top: 0;
}

.dash__body .mini-list li:last-child {
  padding-bottom: 0;
}
/* Home dashboard layout (owner's request): the Neighbour board across the
   full width, then the white cards in a grid. Three to a row on wide
   screens, two on tablets, one on phones. Cards in a row are the same
   height, with their buttons lined up along the bottom. */
.dash__side .dash__block {
  display: flex;
  flex-direction: column;
}

.dash__side .dash__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2); /* at least this much above a button */
}

.dash__side .dash__body > .mini-list {
  align-self: stretch;
}

.dash__side .dash__body > .btn {
  margin-top: auto;
}

@media (min-width: 720px) {
  .dash__side {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
  }
}

@media (min-width: 1280px) { /* three to a row once every card name fits on one line */
  .dash__side {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
/* More page: cards in the home page style, the whole card is the link */
.more-grid {
  display: grid;
  gap: var(--space-2);
  margin: 0 0 var(--space-4);
  padding: 0;
  list-style: none;
}

@media (min-width: 720px) {
  .more-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
  }
}

@media (min-width: 1100px) {
  .more-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.more-grid li {
  display: flex;
}

.more-card {
  display: flex;
  flex: 1;
  align-items: center;
  gap: var(--space-2);
  min-height: 96px;
  padding: var(--space-3);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 16px;
  text-decoration: none;
}

.more-card:hover {
  border-color: var(--green);
}

.more-card__text {
  display: grid;
  flex: 1;
  gap: 2px;
  min-width: 0;
}

.more-card__label {
  font-family: var(--font-heading);
  font-size: 1.375rem;
  font-weight: 600;
  color: var(--green);
}

.more-card:hover .more-card__label {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.more-card__line {
  color: var(--muted);
  font-size: 16px;
}

.more-card__arrow {
  flex: none;
  width: 22px;
  height: 22px;
  fill: none;
  stroke: var(--green);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* Directory: the map and "Your listing" side by side on wide screens, then
   one card per street with the neighbours as tiles */
.dir-top {
  display: grid;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

@media (min-width: 960px) {
  .dir-top {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    align-items: stretch;
  }
}

.dir-top .card-box {
  display: flex;
  flex-direction: column;
}

.dir-top .dash__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
}

.dir-top .dash__body > .btn {
  margin-top: auto;
}

.dir-map__frame {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--border);
  border-radius: 12px;
}

@media (min-width: 720px) {
  .dir-map__frame {
    aspect-ratio: 16 / 9;
  }
}

.dir-map__note {
  margin: 0;
  color: var(--muted);
  font-size: 16px;
}

.dir-counts {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.dir-counts strong {
  color: var(--green);
}

.dir-street {
  margin-bottom: var(--space-3);
}

.dir-street__count {
  color: var(--muted);
  font-size: 16px;
  font-weight: 700;
}

.dir-street .dir-card {
  padding: var(--space-2);
  background: var(--paper-light);
  border-radius: 12px;
}

/* Contents lists (My account, History, House rules, Privacy): the section
   you're looking at is marked (bold, with a green bar on wide screens) */
.toc a.is-active {
  font-weight: 700;
  color: var(--green);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

@media (min-width: 961px) {
  .toc a.is-active {
    border-left-color: var(--green);
    text-decoration: none;
  }
}

/* Phones and tablets only (under 960px): the site menu and the admin menu
   slide in from the right as a panel, with the page dimmed behind it. The
   Menu / Close button stays on top. Wide screens are unchanged. */
@media (max-width: 959px) {
  .site-menu,
  .admin-side__menu {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    display: block;
    width: min(340px, 86vw);
    margin: 0;
    padding: 104px var(--space-3) var(--space-4); /* clears the Close button */
    overflow-y: auto;
    background: var(--green);
    border-top: 0;
    border-left: 1px solid rgba(239, 233, 221, 0.2); /* --paper */
    box-shadow: -12px 0 32px rgba(30, 36, 34, 0.3); /* --ink */
    transform: translateX(100%);
    visibility: hidden; /* closed: out of reach for keyboards and screen readers */
    transition: transform 0.25s ease, visibility 0s linear 0.25s;
  }

  .site-menu.is-open,
  .admin-side__menu.is-open {
    display: block;
    transform: none;
    visibility: visible;
    transition: transform 0.25s ease;
  }

  /* Site menu: above the page, inside the sticky header */
  .site-menu {
    z-index: 1;
  }

  .site-header .menu-toggle {
    position: relative;
    z-index: 2;
  }

  /* Admin menu: above the admin page */
  .admin-side__menu {
    z-index: 31;
  }

  .admin-side .menu-toggle {
    position: relative;
    z-index: 32;
  }

  .admin-side__menu .admin-side__me {
    margin-top: var(--space-4);
  }

  /* The dimmed page behind the panel */
  .menu-backdrop {
    position: fixed;
    inset: 0;
    z-index: 19; /* under the sticky header (20), so the site panel sits above it */
    background: rgba(30, 36, 34, 0.55); /* --ink */
  }

  .admin-shell ~ .menu-backdrop {
    z-index: 30; /* admin: under the admin panel (31) */
  }

  .menu-backdrop[hidden] {
    display: none;
  }

  /* Stops the page behind the open menu scrolling. Only on <html>: also
     hiding <body>'s overflow made it a scroll box of its own, which broke
     the sticky header (it jumped out of view with its Close button when the
     menu was opened part-way down a page; fixed 22 Oct 2026) */
  .menu-open {
    overflow: hidden;
  }
}

@media (max-width: 959px) and (prefers-reduced-motion: reduce) {
  .site-menu,
  .site-menu.is-open,
  .admin-side__menu,
  .admin-side__menu.is-open {
    transition: none;
  }
}

/* Members' Menu on phones and tablets (under 1100px, owner's request): the
   header shows the logo and a Menu button; the panel slides in from the
   right with every members' page, then Log out. My account and Log out
   leave the header bar here. From 1100px the header menu shows instead. */
.member-menu {
  display: none;
}

@media (max-width: 1099px) {
  .site-header--member .site-header__member {
    display: none;
  }

  .site-header .menu-toggle--member {
    display: inline-flex;
    position: relative;
    z-index: 2;
    grid-column: 3;
    justify-self: end;
  }

  .member-menu {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    display: block;
    width: min(340px, 86vw);
    padding: 104px var(--space-3) calc(var(--space-4) + var(--tabbar-h));
    overflow-y: auto;
    background: var(--green);
    border-left: 1px solid rgba(239, 233, 221, 0.2); /* --paper */
    box-shadow: -12px 0 32px rgba(30, 36, 34, 0.3); /* --ink */
    transform: translateX(100%);
    visibility: hidden;
    transition: transform 0.25s ease, visibility 0s linear 0.25s;
  }

  .member-menu.is-open {
    transform: none;
    visibility: visible;
    transition: transform 0.25s ease;
  }

  .member-menu__list {
    margin: 0 0 var(--space-3);
    padding: 0;
    list-style: none;
  }

  .member-menu__list li + li {
    border-top: 1px solid var(--green-dark);
  }

  .member-menu__list a {
    display: flex;
    align-items: center;
    min-height: 56px;
    color: var(--paper);
    font-size: 1.25rem;
    text-decoration: none;
  }

  .member-menu__list a:hover,
  .member-menu__list a[aria-current="page"] {
    color: var(--paper);
    text-decoration: underline;
    text-underline-offset: 6px;
  }

  .member-menu__list a[aria-current="page"] {
    font-weight: 700;
    text-decoration-thickness: 2px;
  }

  .member-menu form {
    margin: 0;
  }

  /* The dimmed page goes over the bottom bar too */
  .menu-open .tabbar {
    z-index: 18;
  }
}

@media (max-width: 1099px) and (prefers-reduced-motion: reduce) {
  .member-menu,
  .member-menu.is-open {
    transition: none;
  }
}

/* The backdrop rule above is for phones (under 960px); the members' menu
   also uses it on tablets up to 1099px */
@media (min-width: 960px) and (max-width: 1099px) {
  .menu-backdrop {
    position: fixed;
    inset: 0;
    z-index: 19;
    background: rgba(30, 36, 34, 0.55); /* --ink */
  }

  .menu-backdrop[hidden] {
    display: none;
  }

  /* Stops the page behind the open menu scrolling. Only on <html>: also
     hiding <body>'s overflow made it a scroll box of its own, which broke
     the sticky header (it jumped out of view with its Close button when the
     menu was opened part-way down a page; fixed 22 Oct 2026) */
  .menu-open {
    overflow: hidden;
  }
}

/* "New event" banner at the top of a resident's home page, until they open
   the event or tap "Got it". Lavender edge: the brief's highlight colour. */
.event-alert {
  margin-bottom: var(--space-3);
  padding: var(--space-3);
  background: var(--white);
  border: 1px solid var(--border);
  border-left: 6px solid var(--lavender);
  border-radius: 16px;
}

.event-alert__label {
  margin: 0 0 var(--space-1);
}

.event-alert h2 {
  margin-bottom: 4px;
  font-size: clamp(1.5rem, 1.2rem + 1vw, 1.85rem);
}

.event-alert__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-2);
  margin-top: var(--space-2);
}

.event-alert__actions form {
  margin: 0;
}

/* Pinned events use the pinned notice box; space between several */
.pinned + .pinned,
.pinned + .event-alert {
  margin-top: calc(-1 * var(--space-1));
}

.pinned .btn {
  margin-top: var(--space-1);
}

/* News page: the "Coming up" strip above the news */
.news-events {
  margin-bottom: var(--space-3);
}

/* Giveaways list: the whole card opens the listing, photo included. The
   title is still the only link (stretched over the card), so keyboards and
   screen readers meet it once. */
.give-card {
  position: relative;
}

.give-card .member-card__title a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 16px;
}

.give-card:hover {
  border-color: var(--green);
}

.give-card:hover .member-card__title a {
  text-decoration: underline;
}

.give-card:has(.member-card__title a:focus-visible) { /* keyboard users only, not after a click */
  outline: 3px solid var(--green);
  outline-offset: 3px;
}

.give-card .member-card__title a:focus-visible {
  outline: none; /* the whole card shows the focus ring instead */
}

/* Detail pages (a giveaway, board post, news post or event): the full width
   of the page. Wide screens: photos on the left, details on the right.
   Phones: photos on top. The first photo is large; any others sit
   underneath it, two to a row. Without photos, the text keeps a
   comfortable reading width inside the full-width card. */
.detail {
  display: grid;
  gap: var(--space-4);
}

@media (min-width: 960px) {
  .detail {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    align-items: start;
    padding: var(--space-4);
  }

  .detail--no-photos {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Photos stay in view while the details are read */
  .detail__media {
    position: sticky;
    top: calc(var(--header-h) + var(--space-3));
  }
}

.detail__info {
  min-width: 0;
}

.detail--no-photos .detail__info {
  max-width: 820px;
}

.detail .gallery {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: none;
  margin: 0;
}

.detail .gallery li:first-child {
  grid-column: 1 / -1;
}

.detail .gallery img {
  max-height: none;
  aspect-ratio: 4 / 3;
}

.detail h1 {
  margin-bottom: var(--space-1);
  font-size: clamp(1.875rem, 1.4rem + 2vw, 2.5rem);
  overflow-wrap: anywhere;
}

.detail .prose {
  margin-top: var(--space-2);
}

.detail .post__actions {
  margin-top: var(--space-3);
}

/* Board post: the comments line up with the full-width card */
.detail + .comments,
.comments {
  max-width: none;
}

.comments .comment-list,
.comments .comment-form {
  max-width: 980px;
}

/* Card lists (home page cards, "Coming up" on News): every row looks
   clickable all the time, the same way: a soft cream tile with an arrow.
   Hover: a green edge. The green focus ring shows for keyboard users only.
   The title is the one link, stretched over the tile, with no underline. */
.dash__body .mini-list {
  display: grid;
  gap: var(--space-1);
}

.dash__body .mini-list li,
.dash__body .mini-list li:first-child,
.dash__body .mini-list li:last-child {
  position: relative;
  margin: 0;
  padding: 12px 40px 12px 14px; /* room on the right for the arrow */
  background: var(--paper-light);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: none;
}

/* The arrow on the right of each tile */
.dash__body .mini-list li::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 18px;
  width: 9px;
  height: 9px;
  border-top: 2px solid var(--green);
  border-right: 2px solid var(--green);
  transform: translateY(-50%) rotate(45deg);
}

.dash__body .mini-list a,
.dash__body .mini-list a:hover {
  color: var(--green);
  text-decoration: none;
}

.dash__body .mini-list a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 10px;
}

.dash__body .mini-list li:hover {
  background: var(--white);
  border-color: var(--green);
}

.dash__body .mini-list a:focus-visible {
  outline: none;
}

.dash__body .mini-list li:has(a:focus-visible) {
  outline: 3px solid var(--green);
  outline-offset: 2px;
}

/* "All news", "All events", "See all posts" and the like: no underline,
   an arrow instead; the underline comes on hover */
.dash__all {
  text-decoration: none;
}

.dash__all::after {
  content: "\00a0\2192";
}

.dash__all:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* Every card the same shape: header (icon and name only), body, then a
   footer strip with the card's link ("All news ->" and so on). Footers line
   up along the bottom of each row. */
.dash__foot {
  margin-top: auto;
  padding: 14px var(--space-3);
  border-top: 1px solid var(--border);
}

.dash__foot .dash__all {
  font-size: 16px;
}

.dash__side .dash__head,
.card-box .dash__head {
  min-height: 72px;
}

.dash__side .dash__body {
  flex: 1 0 auto;
}

/* "What you can do here" on the home page (logged-in residents): the same
   steps design as How joining works, with each title a link and an arrow */
.how-steps--links h3 a {
  color: var(--green);
  text-decoration: none;
}

.how-steps--links h3 a::after {
  content: "\00a0\2192";
}

.how-steps--links h3 a:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* Admins page: "Add an admin" and "Change your password" side by side on
   wide screens, the same height, with their buttons lined up along the
   bottom. Stacked on phones and tablets. */
.admin-pair {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.admin-pair .admin-card {
  max-width: none;
  margin: 0;
}

@media (min-width: 1100px) {
  .admin-pair {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start; /* each box only as tall as its content (owner's request, 22 Oct 2026) */
  }

  .admin-pair .admin-card {
    display: flex;
    flex-direction: column;
  }

  .admin-pair .stack-form {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: var(--space-3);
  }

  .admin-pair .stack-form > .btn {
    align-self: flex-start;
  }
}

/* Admin Settings: two cards (board categories; streets and postcodes),
   each a list with its column names shown once */
.admin-pair--top {
  margin-top: 0;
}

.settings-card h2 {
  margin-bottom: 4px;
  font-size: 1.5rem;
}

.settings-card.field--error {
  border-color: var(--brick);
}

.settings-card__hint {
  margin-bottom: var(--space-2);
  color: var(--muted);
  font-size: 16px;
}

.settings-list__head,
.settings-list__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 5.5em;
  gap: 12px;
  align-items: center;
}

.settings-list--streets .settings-list__head,
.settings-list--streets .settings-list__row {
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) 5.5em;
}

.settings-list__head {
  padding-bottom: var(--space-1);
  border-bottom: 1px solid var(--border);
  color: var(--muted);
  font-size: 16px;
  font-weight: 700;
}

.settings-list__head span:last-child {
  text-align: center;
}

.settings-list__row {
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}

.settings-list__row .field input {
  min-height: 48px;
}

.settings-list__end {
  display: flex;
  justify-content: center;
}

.settings-list__end input[type="checkbox"] {
  width: 28px;
  height: 28px;
  margin: 0;
  accent-color: var(--green);
}

.settings-list__row--add {
  padding-top: var(--space-2);
  border-bottom: 0;
  align-items: end;
}

.settings-list:not(.settings-list--streets) .settings-list__row--add {
  grid-template-columns: minmax(0, 1fr);
}

.settings-form__save {
  margin-top: var(--space-3);
}

/* Phones: a street's postcodes go under its name */
@media (max-width: 599px) {
  .settings-list--streets .settings-list__head {
    display: none;
  }

  .settings-list--streets .settings-list__row {
    grid-template-columns: minmax(0, 1fr) 5.5em;
  }

  .settings-list--streets .settings-list__row > .field:nth-child(2) {
    grid-column: 1;
    grid-row: 2;
  }

  .settings-list--streets .settings-list__end {
    grid-row: 1;
    grid-column: 2;
  }
}

/* Home page board posts (owner's request): one post fills the row, two sit
   side by side, three or more go three to a row (two on tablets, one on
   phones). Side by side, each card shows its photo on top, and the cards in
   a row are the same height with the name and date along the bottom. */
@media (min-width: 720px) {
  .post-grid--2,
  .post-grid--3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
  }

  .post-grid--2 .post-card,
  .post-grid--3 .post-card {
    display: flex;
    flex-direction: column;
  }

  /* The photo moves to the very top of the card, above the tags */
  .post-grid--2 .post-card__main,
  .post-grid--3 .post-card__main {
    display: contents;
  }

  .post-grid--2 .post-card__thumb,
  .post-grid--3 .post-card__thumb {
    order: -1;
    width: 100%;
    height: auto;
    margin-bottom: var(--space-2);
    aspect-ratio: 16 / 9;
  }

  .post-grid--2 .post-card__foot,
  .post-grid--3 .post-card__foot {
    margin-top: auto;
    padding-top: var(--space-1);
  }
}

@media (min-width: 1100px) {
  .post-grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Board post cards, laid out like the owner's prototype in the site's own
   style: writer and time at the top (New on the right), category, title,
   a three-line taste, then the comments count. The whole card opens the
   post (the title link is stretched over it). */
.post-card {
  position: relative;
}

.post-card:hover {
  border-color: var(--green);
}

.post-card__by {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: var(--space-1);
}

.post-card__by > div {
  min-width: 0;
}

.post-card__by strong {
  display: block;
  color: var(--green);
  overflow-wrap: anywhere;
}

.post-card__by time {
  display: block;
  color: var(--muted);
  font-size: 16px;
}

.post-card__by .tag--new {
  margin-left: auto;
  align-self: flex-start;
}

.post-card .member-card__title a {
  text-decoration: none;
}

.post-card .member-card__title a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 16px;
}

.post-card:hover .member-card__title a {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.post-card .member-card__title a:focus-visible {
  outline: none;
}

.post-card:has(.member-card__title a:focus-visible) {
  outline: 3px solid var(--green);
  outline-offset: 3px;
}

/* A three-line taste, so cards in a row stay even */
.post-card .member-card__text {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: var(--muted);
}

.post-card__foot {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: var(--space-2) 0 0;
  color: var(--green);
  font-size: 16px;
  font-weight: 700;
}

.post-card__foot svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linejoin: round;
}

/* Write a post: the category as pill buttons (one choice), in the same
   style as the board's filter buttons */
fieldset.cat-pills {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

.cat-pills legend {
  margin-bottom: 8px;
  padding: 0;
  font-size: 18px;
  font-weight: 700;
  color: var(--green);
}

.cat-pills__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}

.cat-pills__opt {
  position: relative;
}

.cat-pills__opt input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.cat-pills__opt span {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 18px;
  background: var(--white);
  border: 2px solid var(--border);
  border-radius: 999px;
  color: var(--green);
  font-weight: 700;
  cursor: pointer;
}

.cat-pills__opt:hover span {
  border-color: var(--green);
}

.cat-pills__opt input:checked + span {
  background: var(--green);
  border-color: var(--green);
  color: var(--white);
}

.cat-pills__opt input:focus-visible + span {
  outline: 3px solid var(--green);
  outline-offset: 2px;
}

.cat-pills.field--error .cat-pills__opt span {
  border-color: var(--brick);
}

/* The parking reminder: only when Parking is picked */
.parking-note {
  display: none;
  margin: 0;
  padding: 12px 16px;
  border-radius: 12px;
  background: var(--amber-tint);
  color: var(--amber);
  font-weight: 700;
}

.stack-form:has(.cat-pills input[value="parking"]:checked) .parking-note {
  display: block;
}

/* Form buttons: the main one, with Cancel as a plain link beside it */
.actions--form {
  align-items: center;
}

.actions__cancel {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 var(--space-1);
  font-weight: 700;
}

/* One board post: writer at the top like the cards; "Report this post" as
   a small grey link; the comment box in a soft cream panel */
.detail .post-card__by {
  margin-bottom: var(--space-2);
}

.detail .post-card__by time {
  display: inline;
}

.comment-form {
  background: var(--paper-light);
  border: 0;
}

.comment-form label {
  font-size: 1.125rem;
}

/* "Show earlier comments (N)": a button above the newest 10 comments that
   opens the rest on the same page */
.comments-earlier {
  margin-bottom: var(--space-1);
}

.comments-earlier > summary {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  margin-bottom: var(--space-2);
  padding: 0 var(--space-3);
  border: 2px solid var(--green);
  border-radius: var(--radius);
  color: var(--green);
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}

.comments-earlier > summary::-webkit-details-marker {
  display: none;
}

.comments-earlier > summary:hover {
  background: var(--white);
}

.comments-earlier[open] > summary {
  display: none; /* once open, the earlier comments simply join the list */
}

.comments-earlier .comment-list {
  margin-bottom: 0;
}

/* Members' header (wide screens): one account button, initials and first
   name, opening a small menu with My account and Log out */
.account-menu {
  position: relative;
  display: flex; /* the button sits centred on the header's line */
  align-items: center;
}

.account-menu__arrow {
  flex: none;
  margin-left: -2px;
}

.account-menu__button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 48px; /* the same height as the header's other buttons */
  padding: 0 14px 0 4px; /* the circle sits 4px from the edge all round */
  line-height: 1;
  font-size: 18px;
  white-space: nowrap;
  border: 2px solid var(--paper);
  border-radius: 999px;
  color: var(--paper);
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}

.account-menu__button::-webkit-details-marker {
  display: none;
}

.account-menu__button:hover,
.account-menu[open] .account-menu__button {
  background: var(--green-dark);
}

.account-menu__avatar {
  display: grid;
  flex: none;
  place-items: center;
  width: 36px;
  height: 36px;
  line-height: 1;
  border-radius: 50%;
  background: var(--paper);
  color: var(--green);
  font-size: 16px;
}

.account-menu__arrow {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.15s ease;
}

.account-menu[open] .account-menu__arrow {
  transform: rotate(180deg);
}

.account-menu__panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0; /* lines up with the button's right edge */
  z-index: 5;
  min-width: 100%;
  width: max-content;
  min-inline-size: 200px;
  padding: 8px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 12px 32px rgba(30, 36, 34, 0.18); /* --ink */
}

.account-menu__panel a,
.account-menu__panel button {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 48px;
  padding: 0 14px;
  background: none;
  border: 0;
  border-radius: 10px;
  color: var(--green);
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 700;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.account-menu__panel a:hover,
.account-menu__panel button:hover,
.account-menu__panel a[aria-current="page"] {
  background: var(--paper-light);
}

.account-menu__panel form {
  margin: 0;
  border-top: 1px solid var(--border);
  padding-top: 4px;
  margin-top: 4px;
}

.account-menu__panel :focus-visible {
  outline: 3px solid var(--green);
  outline-offset: -3px;
}

@media (prefers-reduced-motion: reduce) {
  .account-menu__arrow {
    transition: none;
  }
}

/* Admin tables: a whole row opens the details page (the name is the link,
   stretched over the row). Buttons in the row stay clickable on their own. */
.admin-table tr.row-link {
  position: relative;
}

.admin-table tr.row-link th a {
  color: var(--green);
  text-decoration: none;
}

.admin-table tr.row-link th a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.admin-table tr.row-link:hover {
  background: var(--paper-light);
}

.admin-table tr.row-link:hover th a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.admin-table tr.row-link th a:focus-visible {
  outline: none;
}

.admin-table tr.row-link:has(th a:focus-visible) {
  outline: 3px solid var(--green);
  outline-offset: -3px;
}

.admin-table tr.row-link .admin-table__action {
  position: relative;
  z-index: 1; /* above the row link */
}

/* One member's page */
.member-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  max-width: none;
}

.member-head__avatar {
  flex: none;
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--green);
  color: var(--paper);
  font-family: var(--font-heading);
  font-size: 1.5rem;
}

.member-head__text {
  flex: 1;
  min-width: 0;
}

.member-head__name {
  margin: 0 0 4px;
  font-family: var(--font-heading);
  font-size: clamp(1.5rem, 1.2rem + 1vw, 1.9rem);
  font-weight: 600;
  color: var(--green);
  overflow-wrap: anywhere;
}

.member-head__sub {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) 12px;
  margin: 0;
  color: var(--muted);
}

.member-head__action {
  margin: 0;
}

.member-grid {
  display: grid;
  gap: var(--space-3);
}

.member-grid .admin-card {
  max-width: none;
  margin: 0;
}

@media (min-width: 1100px) {
  .member-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }
}

.member-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2);
  margin: 0 0 var(--space-3);
  padding: 0;
  list-style: none;
  color: var(--muted);
  font-size: 16px;
}

.member-stats li {
  padding: 12px;
  background: var(--paper-light);
  border-radius: 12px;
}

.member-stats__num {
  display: block;
  font-family: var(--font-heading);
  font-size: 1.75rem;
  color: var(--green);
  line-height: 1.1;
}

.member-sub {
  margin: 0 0 var(--space-1);
  font-size: 1.125rem;
}

/* Admin "Deactivate": a pop-up over a dimmed page asking for the reason.
   A refused reason shakes the pop-up. */
.deact-dialog {
  width: min(520px, calc(100vw - 32px));
  max-width: none;
  padding: 0;
  background: transparent;
  border: 0;
  color: var(--ink);
}

.deact-dialog::backdrop {
  background: rgba(30, 36, 34, 0.55); /* --ink */
}

.deact-dialog__box {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-3) var(--space-3);
  background: var(--white);
  border-radius: 20px;
  box-shadow: 0 24px 64px rgba(30, 36, 34, 0.3); /* --ink */
  text-align: left;
  white-space: normal; /* the table cell it sits in doesn't wrap */
}

.deact-dialog__title {
  margin: 0;
  font-size: clamp(1.5rem, 1.25rem + 1vw, 1.85rem);
  overflow-wrap: anywhere;
}

.deact-dialog__lede {
  margin: -8px 0 0;
  color: var(--muted);
}

.deact-dialog__error {
  margin: 6px 0 0;
}

.deact-dialog__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-2);
  margin-top: var(--space-1);
  padding-top: var(--space-2);
  border-top: 1px solid var(--border);
}

/* Phones: the two buttons share the width, Deactivate first */
@media (max-width: 479px) {
  .deact-dialog__actions {
    flex-direction: column-reverse;
  }

  .deact-dialog__actions .btn {
    width: 100%;
  }
}

/* The shake when the reason is missing or too short */
@keyframes deactivate-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-10px); }
  40% { transform: translateX(10px); }
  60% { transform: translateX(-6px); }
  80% { transform: translateX(6px); }
}

.deact-dialog__box.is-shaking {
  animation: deactivate-shake 0.4s ease;
}

/* People who ask for less motion: no shake; the red error still shows */
@media (prefers-reduced-motion: reduce) {
  .deact-dialog__box.is-shaking {
    animation: none;
  }
}

/* Account menu: Log out turns red on hover */
.account-menu__panel button.account-menu__logout:hover,
.account-menu__panel button.account-menu__logout:focus-visible {
  background: rgba(178, 58, 46, 0.1); /* --brick */
  color: var(--brick);
}

/* "Log out?" pop-up: the same pop-up style as Deactivate, a little narrower */
#logout-dialog {
  width: min(440px, calc(100vw - 32px));
}

#logout-dialog .deact-dialog__lede {
  margin: 0;
}

/* Pop-ups placed inside the green header keep a green focus ring (the
   header's own is cream, which would not show on white) */
.deact-dialog :focus-visible {
  outline-color: var(--green);
}

/* Members table: a deactivated member's reason appears beside their
   Deactivated tag when the row is hovered (or reached with the keyboard),
   so long reasons don't make the row taller. On phones (cards) it shows
   under the tag. */
.reason-wrap {
  position: relative;
  display: inline-block;
}

.reason-tip {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 16px;
}

@media (min-width: 900px) {
  .reason-tip {
    position: absolute;
    top: 50%;
    left: calc(100% + 10px);
    z-index: 3; /* above the row's link */
    width: max-content;
    max-width: 280px;
    margin: 0;
    padding: 8px 12px;
    background: var(--green);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(30, 36, 34, 0.2); /* --ink */
    color: var(--paper);
    font-size: 16px;
    line-height: 1.4;
    white-space: normal;
    display: none; /* not even taking up room until the row is hovered */
    transform: translateY(-50%);
    pointer-events: none;
  }

  /* A small pointer towards the tag */
  .reason-tip::before {
    content: "";
    position: absolute;
    top: 50%;
    left: -5px;
    width: 10px;
    height: 10px;
    background: var(--green);
    transform: translateY(-50%) rotate(45deg);
  }

  .admin-table tr:hover .reason-tip,
  .admin-table tr:focus-within .reason-tip {
    display: block;
  }

  /* At the right edge of a table (Join requests, Declined): the bubble opens
     to the left of the label, with its arrow on the right */
  .reason-wrap--left .reason-tip {
    right: calc(100% + 10px);
    left: auto;
    max-width: 420px; /* usually one line, so it fits beside the row */
    text-align: left;
    white-space: normal; /* the button cell keeps its text on one line */
  }

  .reason-wrap--left .reason-tip::before {
    right: -5px;
    left: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .reason-tip {
    transition: none;
  }
}

/* Log in: a deactivated member's reason, highlighted inside the red box */
.error-summary__detail {
  margin: var(--space-2) 0 0;
  padding: 12px 16px;
  background: var(--white);
  border: 1px solid rgba(178, 58, 46, 0.35); /* --brick */
  border-radius: 10px;
  color: var(--ink);
  font-size: 18px;
  overflow-wrap: anywhere;
}

.error-summary__detail strong {
  color: var(--brick);
}

/* Admin Board: "Reported" and "Latest posts" share one column grid, row
   height and padding, so they line up. Desktop: the buttons sit on one line
   on the right. Phones: each row is a card with its buttons underneath. */


/* Wide enough for every button on one line: the button column gets a fixed
   width that fits all five, and the rest share what's left */


/* Phones and tablets: the buttons stack under the row's details */


/* Admin activity pages: "Showing 1-10 of 26" on the left, page numbers on
   the right; stacked on phones. Current page filled green. */
.pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.pagination__count {
  margin: 0;
  color: var(--muted);
  font-size: 1rem;
}

.pagination__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.pagination__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  height: 48px;
  padding: 0 12px;
  border: 2px solid var(--border);
  border-radius: 10px;
  background: var(--white);
  color: var(--green);
  font-weight: 700;
  text-decoration: none;
}

a.pagination__link:hover,
a.pagination__link:focus-visible {
  border-color: var(--green);
}

.pagination__link[aria-current="page"] {
  background: var(--green);
  border-color: var(--green);
  color: var(--white);
}

.pagination__step {
  padding: 0 16px;
}

.pagination__link[aria-disabled="true"] {
  color: var(--muted);
  opacity: 0.5;
}

.pagination__gap {
  padding: 0 4px;
  color: var(--muted);
}

/* Shared "Are you sure?" pop-up for Delete and Deactivate: the same size as
   the Log out one */
.confirm-dialog {
  width: min(440px, calc(100vw - 32px));
}

.confirm-dialog .deact-dialog__lede {
  margin: 0;
}

/* Admin action messages fade out after 3 seconds, then close up (main.js) */
.admin-content .notice[role="status"] {
  overflow: hidden;
  transition: opacity 0.4s ease, max-height 0.3s ease 0.4s, margin 0.3s ease 0.4s, padding 0.3s ease 0.4s;
}

.admin-content .notice.is-fading {
  opacity: 0;
  max-height: 0 !important;
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 0;
  padding-bottom: 0;
}

/* Admin Board, laid out like the owner's reference page: sections down the
   side with counts, the chosen section's posts as white cards. Phones and
   tablets: the sections scroll sideways above the cards. */
.board-admin {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-3);
}

.board-main__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-1) var(--space-2);
  padding-bottom: var(--space-3);
  margin-bottom: var(--space-3);
  border-bottom: 1px solid var(--border);
}

.board-main__head h2 {
  margin: 0;
  font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.25rem);
}

.board-main__count {
  color: var(--muted);
  font-size: 1.15rem;
  font-weight: 700;
}

.board-list {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.board-card {
  display: grid;
  gap: var(--space-2);
  padding: 20px 24px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 16px;
}

/* Board moderation as a table (owner's request, 21 Oct 2026): uses the
   admin table (.admin-table) with the board's own tags, avatar and review
   status inside its cells */
.board-table__title,
.board-table__tags {
  display: block;
}

.board-table__title a {
  color: var(--ink);
  font-weight: 700;
  text-decoration: none;
  overflow-wrap: anywhere;
}

.board-table__title a:hover,
.board-table__title a:focus-visible {
  text-decoration: underline;
}

.board-table__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin-top: 4px;
}

.board-table .board-card__excerpt,
.board-table .board-card__reasons {
  display: block;
  margin-top: 6px;
  font-weight: 400;
}

.board-table__who {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

/* The writer, with the pin / unpin icon beside them */
.board-table__by {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
}

.board-table__by form {
  margin: 0;
}

.board-table__byline {
  display: block;
  margin-top: 4px;
  color: var(--muted);
}

/* Hidden posts and deleted items: a quieter row */
.board-table__row--hidden th,
.board-table__row--hidden td {
  background: var(--white); /* white like the other rows: the Status column now says Hidden (owner's request, 22 Oct 2026) */
}

@media (min-width: 900px) {
  .board-table td,
  .board-table tbody th {
    vertical-align: middle;
  }

  .board-table .row-actions {
    justify-content: flex-end;
  }
}

.board-card--hidden {
  background: var(--paper-light);
}

.board-card__body {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.board-card__title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 14px;
  margin: 0;
}

.board-card__title a {
  color: var(--ink);
  font-size: 1.2rem;
  font-weight: 700;
  text-decoration: none;
  overflow-wrap: anywhere;
}

.board-card__title a:hover,
.board-card__title a:focus-visible {
  text-decoration: underline;
}

/* Category: a coloured dot and the name in capitals */
.board-card__cat {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--green);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.board-card__cat::before {
  content: "";
  width: 10px;
  height: 10px;
  background: currentColor;
  border-radius: 50%;
}

.board-cat--parking { color: var(--amber); }
.board-cat--security { color: var(--brick); }
.board-cat--lost-found,
.board-cat--recommendations,
.board-cat--events { color: var(--lavender-ink); }

/* Pinned, Hidden, Comments closed, "2 reports" */
.board-card__flag {
  color: var(--muted);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.board-card__flag--alert {
  color: var(--brick);
}

.board-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  margin: 0;
  color: var(--muted);
}

.board-card__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  background: var(--green);
  border-radius: 50%;
  color: var(--white);
  font-size: 1rem;
  font-weight: 700;
}

.board-card__who {
  color: var(--ink);
  font-weight: 700;
}

/* A soft dot between the details after the name */
.board-card__meta > span:not(.board-card__avatar):not(.board-card__who)::before {
  content: "·";
  margin-right: 10px;
  color: var(--border);
  font-weight: 700;
}

.board-card__excerpt,
.board-card__reasons {
  margin: 0;
  color: var(--muted);
}

.board-card__reasons {
  color: var(--brick);
  font-size: 1rem;
}

.board-card__actions {
  justify-content: flex-start;
  padding-top: var(--space-2);
  border-top: 1px solid var(--border);
}

/* Very wide: the buttons sit to the right of each card, like the reference */
@media (min-width: 1440px) {
  .board-card {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-3);
  }

  .board-card__actions {
    justify-content: flex-end;
    padding-top: 0;
    border-top: 0;
  }
}

/* Reported Comments and Reported posts: each card's status and who acted,
   e.g. [Hidden] Hidden by Site admin, today 10:56am */
.board-card__history {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  margin: 0;
  color: var(--muted);
  font-size: 1rem;
}

.mod-status {
  display: inline-block;
  padding: 3px 12px;
  border-radius: 999px;
  font-size: 1rem;
  font-weight: 700;
}

.mod-status--waiting {
  background: var(--brick);
  color: var(--white);
}

.mod-status--kept {
  background: rgba(46, 74, 59, 0.12); /* --green */
  color: var(--green);
}

.mod-status--hidden {
  background: rgba(91, 102, 97, 0.16); /* --muted */
  color: var(--ink);
}

.mod-status--deleted {
  background: rgba(178, 58, 46, 0.1); /* --brick */
  color: var(--brick);
}

/* A deleted post or comment: its title, without a link */
.board-card__gone {
  color: var(--muted);
  font-size: 1.2rem;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.board-more {
  margin: var(--space-3) 0 0;
}

/* Neighbour board as a feed (owner's request, from a reference screenshot):
   one post per card down the middle, a "What's happening, neighbour?" box at
   the top, and a side panel on wide screens. Phones: one column, the side
   panel after the posts. */
.feed-layout {
  display: grid;
  gap: var(--space-4);
}

.feed {
  min-width: 0;
}

.feed-compose {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: var(--space-3);
  padding: 14px 16px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 16px;
}

.feed-compose .avatar {
  flex: none;
}

.feed-compose__box {
  flex: 1;
  min-width: 0;
  padding: 12px 18px;
  background: var(--paper-light);
  border-radius: 999px;
  color: var(--muted);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.feed-compose__box:hover {
  background: var(--paper);
  color: var(--ink);
}

.feed-compose__photo {
  flex: none;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 2px solid var(--border);
  border-radius: 50%;
  color: var(--green);
}

.feed-compose__photo:hover {
  border-color: var(--green);
}

.feed-compose__photo svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.feed-compose__post {
  flex: none;
}

.feed-list {
  display: grid;
  gap: var(--space-3);
}

.feed-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
}

.feed-card__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
  padding: 18px 20px 0;
}

.feed-card__who {
  display: grid;
  min-width: 0;
}

.feed-card__meta {
  color: var(--muted);
  font-size: 1rem;
}

.feed-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-left: auto;
}

.feed-card__tags .tag {
  padding: 2px 10px;
  font-size: 1rem;
}

.feed-card__hidden {
  margin: 14px 20px 0;
  padding: 10px 14px;
  background: var(--paper-light);
  border-left: 4px solid var(--muted);
  border-radius: 0 10px 10px 0;
  font-size: 1rem;
}

.feed-card__text {
  padding: 14px 20px 18px;
}

.feed-card__title {
  margin: 0 0 6px;
  font-family: var(--font-body);
  font-size: 1.2rem;
  line-height: 1.35;
}

.feed-card__title a {
  color: var(--ink);
  text-decoration: none;
  overflow-wrap: anywhere;
}

.feed-card__title a:hover,
.feed-card__title a:focus-visible {
  text-decoration: underline;
}

.feed-card__text p {
  margin: 0;
  white-space: pre-line; /* keep the writer's line breaks */
  overflow-wrap: anywhere;
}

.feed-card__more {
  display: inline-block;
  margin-top: 6px;
  color: var(--green);
  font-weight: 700;
}

/* A large photo, edge to edge, like the reference */
.feed-card__photo {
  position: relative;
  display: block;
  background: var(--paper-light);
}

.feed-card__photo img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 560px;
  object-fit: cover;
}

.feed-card__count {
  position: absolute;
  right: 12px;
  bottom: 12px;
  padding: 4px 12px;
  background: rgba(30, 36, 34, 0.75); /* --ink */
  border-radius: 999px;
  color: var(--white);
  font-size: 1rem;
  font-weight: 700;
}

.feed-card__foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-1);
  padding: 10px 14px;
  border-top: 1px solid var(--border);
}

.feed-card__action {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 14px;
  border-radius: 999px;
  color: var(--ink);
  font-weight: 700;
  text-decoration: none;
}

.feed-card__action:hover,
.feed-card__action:focus-visible {
  background: var(--paper-light);
}

.feed-card__action svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linejoin: round;
}

/* Phones: a smaller start-a-post box */
@media (max-width: 479px) {
  .feed-compose {
    padding: 10px 12px;
    gap: 8px;
  }

  .feed-compose__photo {
    display: none;
  }

  .feed-card__head,
  .feed-card__text {
    padding-left: 16px;
    padding-right: 16px;
  }
}

/* Wide screens: the feed in the middle, the side panel on the right */
@media (min-width: 1100px) {
  .feed-layout {
    /* The full page width, so the feed lines up with the logo and the side
       panel with the account button (owner's request) */
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: var(--space-4);
  }
}

/* Board feed: comments in a pop-up (owner's request). A white panel over a
   dimmed page; the comments scroll inside it, the title and × stay put.
   Phones: a sheet filling most of the screen. */
.comments-dialog {
  width: min(680px, calc(100vw - 32px));
  max-width: none;
  max-height: calc(100vh - 48px);
  padding: 0;
  background: transparent;
  border: 0;
  color: var(--ink);
}

.comments-dialog::backdrop {
  background: rgba(30, 36, 34, 0.55); /* --ink */
}

.comments-dialog__box {
  display: flex;
  flex-direction: column;
  max-height: min(760px, calc(100vh - 48px)); /* taller than this, and the comments scroll inside */
  background: var(--paper);
  border-radius: 20px;
  box-shadow: 0 24px 64px rgba(30, 36, 34, 0.3); /* --ink */
  overflow: hidden;
}

.comments-dialog__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: 16px 16px 16px 24px;
  background: var(--white);
  border-bottom: 1px solid var(--border);
}

.comments-dialog__title {
  margin: 0;
  font-size: 1.25rem;
  overflow-wrap: anywhere;
}

.comments-dialog__close {
  flex: none;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  background: transparent;
  border: 2px solid var(--border);
  border-radius: 50%;
  color: var(--ink);
  cursor: pointer;
}

.comments-dialog__close:hover {
  border-color: var(--green);
}

.comments-dialog__close svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
}

.comments-dialog__body {
  flex: 1;
  min-height: 0;
  padding: var(--space-3);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.comments-dialog__body:focus {
  outline: none;
}

.comments-dialog__body[aria-busy="true"] {
  opacity: 0.6;
}

.comments-dialog__body .comments {
  margin: 0;
  padding: 0;
  border: 0;
}

.comments-dialog__count {
  margin-top: 0;
  font-size: 1.15rem;
}

.comments-dialog__loading {
  margin: 0;
  color: var(--muted);
}

.comments-dialog :focus-visible {
  outline-color: var(--green);
}

@media (max-width: 599px) {
  .comments-dialog {
    width: 100vw;
    max-height: 92vh;
    margin: auto 0 0;
  }

  .comments-dialog__box {
    max-height: 92vh;
    border-radius: 20px 20px 0 0;
  }

  .comments-dialog__body {
    padding: var(--space-2);
  }
}

/* Board feed on phones and small tablets: the category chips sit in one row
   that scrolls sideways (owner's request), running to the screen's edges so
   it's clear there are more. */
@media (max-width: 767px) {
  .feed-chips {
    flex-wrap: nowrap;
    margin-left: calc(-1 * var(--space-2));
    margin-right: calc(-1 * var(--space-2));
    padding: 2px var(--space-2) 4px;
    overflow-x: auto;
    scroll-padding: 0 var(--space-2);
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .feed-chips::-webkit-scrollbar {
    display: none;
  }

  .feed-chips .chip {
    flex: none;
    white-space: nowrap;
  }
}

/* Comments pop-up: "Write a comment" stays at the bottom; only the comments
   above it scroll */
.comments-dialog__foot {
  flex: none;
  padding: 14px var(--space-3) var(--space-2);
  background: var(--white);
  border-top: 1px solid var(--border);
}

.comments-dialog__foot[hidden] {
  display: none;
}

.comments-dialog__foot .comment-form {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
}

.comments-dialog__foot .comment-form .field {
  margin: 0;
}

.comments-dialog__foot .comment-form label {
  font-size: 1rem;
}

.comments-dialog__foot textarea {
  min-height: 72px;
  height: 72px;
  resize: vertical;
}

.comments-dialog__foot .comment-form .btn {
  justify-self: end;
}

.comments-dialog__foot > .empty {
  margin: 0;
}

@media (max-width: 599px) {
  .comments-dialog__foot {
    padding: 12px var(--space-2);
  }
}

/* The comments list sizes to its content and shrinks (scrolls) once the pop-up hits its cap */
.comments-dialog__body {
  flex: 1 1 auto;
}

/* Admin: one news item's own page (owner's request) */
.news-view {
  max-width: 860px;
  padding: var(--space-4);
}

.news-view__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}

.news-view__title {
  margin: 0 0 6px;
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.news-view__meta {
  margin: 0;
  color: var(--muted);
  font-size: 16px;
}

.news-view__actions {
  margin: 18px 0 22px;
  padding: 16px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.news-view__body {
  max-width: 68ch;
}

.news-view__photos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
  gap: 14px;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
}

.news-view__photos img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 12px;
}

.news-view__photos span {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-size: 16px;
}

@media (max-width: 599px) {
  .news-view {
    padding: var(--space-3) var(--space-2);
  }
}

/* Admin sidebar: a thin line under the logo instead of the "Neighbours" label,
   the same as the line above the admin's name (owner's request) */
.admin-side__rule {
  height: 0;
  margin: var(--space-2) 0 var(--space-2);
  border: 0;
  border-top: 1px solid rgba(239, 233, 221, 0.25); /* --paper, as .admin-side__me */
}

/* "Pinned": a small pin icon with no background (owner's request) */
.pin-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  vertical-align: middle;
  color: var(--green);
}

.pin-icon svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* An event's own page: when and where, under the title */
.news-view__when {
  margin: 0 0 4px;
  color: var(--green);
  font-weight: 700;
}

/* Edit, Delete and Pin in the admin lists: outline icons with no border
   (owner's request, 21 Oct 2026). Still a 48px tap area (brief section 4),
   a soft background on hover, the name of the action as a tooltip and for
   screen readers. Delete is red; Pin fills in when the item is pinned. */
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--green);
  cursor: pointer;
  text-decoration: none;
}

.icon-btn svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon-btn:hover {
  background: rgba(46, 74, 59, 0.08); /* --green */
}

.icon-btn--danger {
  color: var(--brick);
}

.icon-btn--danger:hover {
  background: rgba(178, 58, 46, 0.1); /* --brick */
}

.icon-btn.is-pinned svg {
  fill: currentColor;
}

/* Comments closed: the crossed-out bubble on a light green background */
.icon-btn.is-on {
  background: rgba(46, 74, 59, 0.12); /* --green */
}

.icon-btn.is-on svg {
  stroke-width: 2.4;
}

.icon-btn:focus-visible {
  outline: 3px solid var(--green);
  outline-offset: 2px;
}

/* Pin / unpin: one icon button (owner's request). Outline pin = not pinned;
   filled pin on a light green background = pinned (press to unpin). */
.pin-btn {
  justify-content: center;
  aspect-ratio: 1;
  padding: 0;
}

.btn--small.pin-btn {
  padding: 0;
}

.pin-btn svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.pin-btn.is-pinned {
  background: rgba(46, 74, 59, 0.12); /* --green */
}

.pin-btn.is-pinned svg {
  fill: currentColor;
}

.pin-btn:hover {
  background: rgba(46, 74, 59, 0.08);
}

.pin-btn.is-pinned:hover {
  background: rgba(46, 74, 59, 0.2);
}

/* Very narrow phones: the bottom bar keeps 16px labels (the brief: never
   below 16px); a long word like "Giveaways" breaks with a hyphen if it must */
@media (max-width: 359px) {
  .tabbar a span {
    hyphens: auto;
    overflow-wrap: anywhere;
    text-align: center;
  }
}

/* Checkbox rows: the whole row (box and words) is at least 48px tall to tap
   (the brief: tap targets at least 48px) */
.check {
  min-height: 48px;
}

.check > label {
  display: flex;
  align-items: center;
  min-height: 48px;
}

/* "Sample" tag after a made-up sample resident's name (owner's choice) */
.tag--sample {
  margin-left: 6px;
  padding: 1px 10px;
  border: 1.5px dashed var(--muted);
  background: transparent;
  color: var(--muted);
  font-size: 16px;
  font-weight: 400;
  vertical-align: middle;
}

/* Tap targets at least 48px (the brief): the skip link, the password Show
   button, and title links in admin tables and Board cards */
.skip-link {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
}

.password__toggle {
  top: 0;
  bottom: 0;
}

.admin-table th[scope="row"] > a,
.board-card__title a {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
}

.tag--sample {
  display: inline-block;
  justify-self: start;
}

/* Declined requests: the reason on one line ending in "..."; a click shows it
   all (owner's request, 22 Oct 2026). main.js marks the long ones. */
.reason-clip {
  display: block;
  max-width: 320px;
  padding: 0;
  overflow: hidden;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: default;
}

.reason-clip.is-long {
  position: relative;
  z-index: 1; /* above the clickable Members row, so the click opens the reason */
  cursor: pointer;
}

.reason-clip.is-long:hover {
  color: var(--green);
}

.reason-clip.is-open {
  white-space: normal;
}

/* Declined requests: the row as tall as a Waiting row, whose 48px buttons set
   its height (owner's request, 22 Oct 2026). An invisible 48px-tall strut
   beside the Declined label does the same. */
@media (min-width: 900px) {
  .admin-table td.admin-table__action--status::after {
    content: "";
    display: inline-block;
    height: 48px;
    vertical-align: middle;
  }

  .admin-table td.admin-table__action--status .status {
    vertical-align: middle;
  }
}

/* A news post's or event's own page: Pin and Archive each in their own soft
   colour from the brief (section 4), so the four buttons are easy to tell
   apart (owner's request, 22 Oct 2026). Pin: lavender tint; Archive: amber. */
.admin-shell .btn--pin,
.admin-shell .btn--pin:hover {
  background: #EEEAF6; /* lavender tint */
  border-color: transparent;
  color: #4A3D7A;
}

.admin-shell .btn--pin:hover {
  border-color: #C9BFE3;
}

.admin-shell .btn--archive,
.admin-shell .btn--archive:hover {
  background: #FBEFD9; /* amber tint */
  border-color: transparent;
  color: #8A5A00;
}

.admin-shell .btn--archive:hover {
  border-color: #E8CF9F;
}

/* One member's page (owner's request, 22 Oct 2026): two columns, each a
   stack of boxes (Details and Directory on the left, Activity and Emails on
   the right), so the boxes never leave big gaps. No spare space at the foot
   of a box, and every label sits level with its answer. */
.member-col {
  display: grid;
  align-content: start;
  gap: var(--space-3);
}

.member-grid .admin-card > :last-child {
  margin-bottom: 0;
}

.member-grid .admin-card h2 {
  margin: 0 0 var(--space-2);
}

.member-grid .admin-card__details {
  row-gap: 4px;
}

@media (min-width: 600px) {
  .member-grid .admin-card__details {
    grid-template-columns: 13em minmax(0, 1fr);
    align-items: baseline;
  }

  .member-grid .admin-card__details dd {
    margin: 0;
    padding: 6px 0;
  }

  .member-grid .admin-card__details dt {
    padding: 6px 0;
  }
}

/* One member's page: a slimmer top box, the name and its label on one line,
   with the usual gap below it (owner's request, 22 Oct 2026) */
.admin-card.member-head {
  margin-bottom: var(--space-3);
  padding: var(--space-2) var(--space-3);
}

.member-head__avatar {
  width: 52px;
  height: 52px;
  font-size: 1.25rem;
}

.member-head__text {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) 12px;
}

.member-head__name {
  margin: 0;
  font-size: clamp(1.375rem, 1.2rem + 0.6vw, 1.625rem);
}

/* Two-column admin pages (a board post, an admin): both columns start level;
   each box is only as tall as its content, no stretching to match the other
   column (owner's request, 22 Oct 2026) */
.member-col .admin-card.member-head {
  margin-bottom: 0;
}

/* "Back to ..." links everywhere: no underline; it shows only on hover, so
   it still reads as a link (owner's request, 22 Oct 2026) */
.back a,
.auth-panel__back a {
  text-decoration: none;
}

.back a:hover,
.auth-panel__back a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* "Write news" and "Add an event": solid green #2E4A3B with white text, like
   the chosen filter tab (owner's request, 22 Oct 2026). Other green buttons
   in the admin panel stay pale. */
.admin-shell .btn--solid {
  background: var(--green);
  border-color: var(--green);
  color: var(--white);
}

.admin-shell .btn--solid:hover {
  background: var(--green-dark);
  border-color: var(--green-dark);
  color: var(--white);
}

/* News list: a pinned post says so beside Current, in the Pin button's
   lavender (owner's request, 22 Oct 2026) */
.admin-shell .status--pinned {
  margin-left: 6px;
  background: #EEEAF6; /* lavender tint */
  color: #4A3D7A;
}

/* One news post in the admin panel, laid out like a member's page (owner's
   request, 22 Oct 2026). The buttons sit under the details, with a line
   above them. */
.news-show .member-head .member-head__name {
  margin: 0;
  line-height: 1.2;
}

.news-show .news-view__photos {
  margin-top: var(--space-3);
}

.news-show__actions {
  margin-top: var(--space-2);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border);
}

/* Buttons on a news post's, event's or member's own admin page: an icon
   before the word (owner's request, 22 Oct 2026). Admin panel only. */
.admin-shell .btn svg {
  flex: none;
  width: 20px;
  height: 20px;
  margin-right: 8px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.admin-shell .btn--pin[aria-pressed="true"] svg {
  fill: currentColor;
}

/* News post and event pages: the buttons are round icons with no words (the
   word shows on hover and is read out by screen readers). Still 48px to tap
   (owner's request, 22 Oct 2026). */
.admin-shell .btn--icon-only {
  width: 48px;
  min-width: 48px;
  height: 48px;
  padding: 0;
}

.admin-shell .btn--icon-only svg {
  margin-right: 0;
}

/* A board post's own page: Close comments as a round icon, filled in pale
   amber while comments are closed (owner's request, 22 Oct 2026) */
.admin-shell .btn--comments[aria-pressed="true"] {
  background: #FBEFD9; /* amber tint */
  border-color: transparent;
  color: #8A5A00;
}

/* Board categories as soft coloured tags, like Overview's activity tags
   (owner's request, 22 Oct 2026). Colours from the brief (section 4). */
.cat-tag--general {
  background: #E3EEE8; /* green tint */
  color: var(--green);
}

.cat-tag--parking {
  background: #FBEFD9; /* amber tint */
  color: #8A5A00;
}

.cat-tag--security {
  background: rgba(178, 58, 46, 0.12); /* --brick */
  color: var(--brick);
}

.cat-tag--lost-found,
.cat-tag--recommendations,
.cat-tag--events {
  background: #EEEAF6; /* lavender tint */
  color: #4A3D7A;
}

.board-table .activity-tag {
  white-space: nowrap;
}

.status-tag--visible {
  background: #E3EEE8; /* green tint */
  color: var(--green);
}

.status-tag--pinned {
  background: #EEEAF6; /* lavender tint, as the Pin button */
  color: #4A3D7A;
}

.status-tag--hidden {
  background: rgba(178, 58, 46, 0.12); /* --brick */
  color: var(--brick);
}

.status-tag--closed {
  background: rgba(91, 102, 97, 0.14); /* --muted */
  color: var(--ink);
}

/* One news post in the admin panel, like the owner's reference image
   (22 Oct 2026), centred on the page: one card, a big title, icon-and-word
   buttons, then the text with no box; Delete in its own card below. */
.nv-page {
  max-width: 1000px; /* on the left, like the other admin pages: centred didn't look right (owner, 22 Oct 2026) */
}

.nv-back a::before {
  content: "\2190\00a0\00a0";
}

.admin-card.nv,
.admin-card.nv-danger {
  max-width: none;
  padding: clamp(24px, 4vw, 52px);
  border-radius: 24px;
}

.nv__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 20px;
}

.nv__tags .activity-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 16px;
}

.nv__tag--current {
  background: #E3EEE8; /* green tint */
  color: var(--green);
}

.nv__tag--pinned {
  background: #FBEFD9; /* amber tint */
  color: #8A5A00;
}

.nv__tags svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.admin-card h2.nv__title {
  display: block;
  max-width: 20ch;
  margin: 0 0 16px;
  color: var(--ink);
  font-size: clamp(2rem, 1.4rem + 2.4vw, 3.25rem);
  line-height: 1.1;
  overflow-wrap: anywhere;
}

.nv__meta {
  margin: 0 0 28px;
  color: var(--muted);
  font-size: 1.125rem;
}

.nv__actions {
  gap: 14px;
  padding-bottom: 28px;
  margin-bottom: 28px;
  border-bottom: 1px solid var(--border);
}

.nv__actions .btn {
  min-height: 56px;
  padding: 0 24px;
  font-size: 1.125rem;
}

.admin-card .nv__body {
  max-width: 70ch;
  font-size: 1.125rem;
  line-height: 1.65;
}

.nv__body p:last-child {
  margin-bottom: 0;
}

.admin-card.nv-danger {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-top: var(--space-3);
  padding-block: 24px;
}

.admin-card.nv-danger h2 {
  margin: 0;
  font-size: 1.375rem;
}

.admin-shell .nv-danger__btn {
  min-height: 56px;
  padding: 0 26px;
  background: var(--white);
  border: 1.5px solid #E8A39B;
  color: var(--brick);
}

.admin-shell .nv-danger__btn:hover {
  background: rgba(178, 58, 46, 0.08); /* --brick */
  border-color: var(--brick);
  color: var(--brick);
}

.nv-danger__btn svg {
  display: none; /* the word alone, as in the reference */
}

/* An event's page: when and where under the title, in green */
.nv__when {
  margin: 0 0 8px;
  color: var(--green);
  font-size: 1.25rem;
  font-weight: 700;
}

/* One member's page, like the owner's reference image (22 Oct 2026) */
.mv-crumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  margin-bottom: var(--space-2);
  color: var(--muted);
}

.mv-crumb a {
  color: var(--green);
  font-weight: 700;
  text-decoration: none;
}

.mv-crumb a::before {
  content: "\2190\00a0\00a0";
}

.mv-crumb a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.mv {
  display: grid;
  gap: var(--space-3);
}

.mv .admin-card {
  max-width: none;
  margin: 0;
  border-radius: 24px;
}

/* Top card: initials, name, status, address and last visit; counts below */
.admin-card.mv-head {
  padding: 0;
  overflow: hidden;
}

.mv-head__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  padding: clamp(24px, 3vw, 40px);
}

.mv-head__avatar {
  flex: none;
  display: grid;
  place-items: center;
  width: clamp(72px, 8vw, 128px);
  aspect-ratio: 1;
  border-radius: 28%;
  background: var(--green);
  color: var(--paper-light);
  font-family: "Atkinson Hyperlegible Next", var(--font-body);
  font-size: clamp(1.5rem, 1rem + 1.5vw, 2.5rem);
  font-weight: 500;
}

.mv-head__line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
}

.admin-card h2.mv-head__name {
  margin: 0;
  color: var(--ink);
  font-size: clamp(2rem, 1.4rem + 2vw, 3rem);
  line-height: 1.1;
}

.mv-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  border-radius: 999px;
  font-family: "Atkinson Hyperlegible Next", var(--font-body);
  font-weight: 500;
}

.mv-status::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
}

.mv-status--approved {
  background: #E3EEE8; /* green tint */
  color: var(--green);
}

.mv-status--deactivated,
.mv-status--rejected {
  background: rgba(178, 58, 46, 0.12); /* --brick */
  color: var(--brick);
}

.mv-head__sub {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 1.125rem;
}

.mv-head__sub span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.mv svg {
  flex: none;
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.mv-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--border);
}

.mv-stats li {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 20px clamp(20px, 3vw, 40px);
  color: var(--green);
  font-size: 1.125rem;
  font-weight: 700;
}

.mv-stats li + li {
  border-left: 1px solid var(--border);
}

.mv-stats__num {
  font-family: "Atkinson Hyperlegible Next", var(--font-body);
  font-size: 2.25rem;
  font-weight: 500;
  line-height: 1;
}

/* The two columns */
.mv-grid {
  display: grid;
  gap: var(--space-3);
}

.mv-col {
  display: grid;
  align-content: start;
  gap: var(--space-3);
}

@media (min-width: 1100px) {
  .mv-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }
}

.admin-card.mv-card {
  padding: clamp(24px, 3vw, 38px);
}

.mv-card h2 {
  margin: 0 0 12px;
  font-size: 1.625rem;
}

/* Label and answer rows with a line between them */
.mv-rows {
  margin: 0;
}

.mv-rows > div {
  display: grid;
  grid-template-columns: minmax(9em, 1fr) 2fr;
  gap: 4px 20px;
  align-items: center;
  padding: 16px 0;
  border-bottom: 1px solid var(--border);
}

.mv-rows > div:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.mv-rows dt {
  color: var(--muted);
}

.mv-rows dd {
  margin: 0;
  color: var(--ink);
  font-weight: 700;
  overflow-wrap: anywhere;
}

.mv-rows dd a {
  color: inherit;
  text-decoration: none;
}

.mv-rows dd a:hover {
  text-decoration: underline;
}

.mv-rows__note {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-weight: 400;
}

.mv-rows--switches > div {
  grid-template-columns: 1fr auto;
}

.mv-rows--switches dt {
  color: var(--ink);
}

.mv-rows--switches dd {
  justify-self: end;
}

.mv-yn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  border-radius: 999px;
  font-family: "Atkinson Hyperlegible Next", var(--font-body);
  font-weight: 500;
}

.mv-yn svg {
  width: 16px;
  height: 16px;
  stroke-width: 2.2;
}

.mv-yn--yes {
  background: #E3EEE8; /* green tint */
  color: var(--green);
}

.mv-yn--no {
  background: #FBEFD9; /* amber tint */
  color: #8A5A00;
}

.mv-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.mv-chip {
  padding: 6px 16px;
  border: 1px solid #DDD7CC;
  border-radius: 999px;
  font-family: "Atkinson Hyperlegible Next", var(--font-body);
  font-weight: 500;
}

.mv-note {
  margin-top: 16px;
  padding: 18px 22px;
  background: var(--paper-light);
  border-radius: 16px;
}

.mv-note p {
  margin: 0;
}

.mv-note__label {
  margin-bottom: 6px !important;
  color: var(--muted);
  font-weight: 700;
}

/* Latest posts as rows you can click */
.mv-posts {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mv-posts a {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px 16px;
  align-items: center;
  padding: 18px 22px;
  background: var(--paper-light);
  border-radius: 16px;
  color: var(--ink);
  text-decoration: none;
}

.mv-posts a:hover {
  background: #EFE9DD; /* --paper */
}

.mv-posts__title {
  font-weight: 700;
  overflow-wrap: anywhere;
}

.mv-posts__meta {
  grid-column: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  color: var(--muted);
}

.mv-posts a > svg {
  grid-column: 2;
  grid-row: 1 / span 2;
}

.mv-posts__hidden {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 12px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--white);
  font-weight: 700;
}

.mv-posts__hidden svg {
  width: 16px;
  height: 16px;
}

/* The Deactivate / Reactivate card at the bottom */
.mv .admin-card.nv-danger {
  margin-top: 0;
  padding: 24px clamp(24px, 3vw, 38px);
}

.admin-shell .mv-reactivate {
  min-height: 56px;
  padding: 0 26px;
}

@media (max-width: 599px) {
  .mv-stats {
    grid-template-columns: 1fr;
  }

  .mv-stats li + li {
    border-left: 0;
    border-top: 1px solid var(--border);
  }

  .mv-rows > div {
    grid-template-columns: 1fr;
  }
}

/* Member page: "See all posts" at the right of Latest posts; Board page:
   "by Jean Osei · Show everyone's" when showing one resident's posts
   (owner's request, 22 Oct 2026) */
.mv-card__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.mv-card__head h2 {
  margin: 0;
}

.board-main__who {
  color: var(--muted);
  font-size: 1.125rem;
}

.board-main__who a {
  color: var(--green);
  font-weight: 700;
}

/* A member's All posts page (owner's request, 22 Oct 2026) */
.mv-crumb a.mv-crumb__plain::before {
  content: none;
}

.admin-card.mv-allposts {
  max-width: none;
  border-radius: 24px;
}

.mv-allposts svg {
  flex: none;
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.mv-allposts .mv-posts__hidden svg {
  width: 16px;
  height: 16px;
}

/* A member's All posts page: the posts as cards, 6 in a row on a wide
   screen (owner's request, 22 Oct 2026), fewer on smaller screens */
.mv-allposts .mv-posts {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
  gap: 14px;
}

@media (min-width: 1500px) {
  .mv-allposts .mv-posts {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

.mv-allposts .mv-posts li {
  display: flex;
}

.mv-allposts .mv-posts a {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: 18px;
}

.mv-allposts .mv-posts__title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3; /* long titles end in ... after three lines */
  overflow: hidden;
}

.mv-allposts .mv-posts__meta {
  margin-top: auto;
}

.mv-allposts .mv-posts a > svg {
  display: none; /* the whole card is the link */
}

/* Member All posts: no big white box round them; each post a white card
   (owner's request, 22 Oct 2026) */
.admin-card.mv-allposts {
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
}

.mv-allposts .mv-posts a {
  background: var(--white);
  border: 1px solid var(--border);
}

.mv-allposts .mv-posts a:hover {
  background: var(--white);
  border-color: #A6C3B5;
  box-shadow: 0 6px 18px -10px rgba(30, 36, 34, 0.25); /* --ink */
}

/* Editing a page (History, Useful info, Parking information), laid out like
   the other admin pages (owner's request, 22 Oct 2026) */
.pe-head {
  margin-bottom: var(--space-3);
}

.pe {
  display: grid;
  gap: var(--space-3);
}

.pe .admin-card {
  max-width: none;
  margin: 0;
}

.admin-card.pe-card {
  min-width: 0;
  padding: clamp(20px, 2.5vw, 32px);
  border: 1px solid var(--border);
  border-radius: 20px;
}

.pe-card h2,
.pe-card__title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0 0 16px;
  padding: 0;
  color: var(--green);
  font-family: var(--font-heading);
  font-size: 1.375rem;
  font-weight: 600;
}

.pe-card__title .activity-tag {
  font-size: 16px;
}

.pe-card .field + .field,
.pe-row + .field {
  margin-top: var(--space-2);
}

.pe-sections {
  display: grid;
  gap: var(--space-3);
}

@media (min-width: 1200px) {
  .pe-sections {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }
}

/* Date line and heading on one line */
.pe-row {
  display: grid;
  gap: var(--space-2);
}

@media (min-width: 600px) {
  .pe-row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  }

  .pe-row--one {
    grid-template-columns: 1fr;
  }
}

.pe textarea {
  width: 100%;
}

/* Save and Cancel stay in view at the bottom while you scroll */
.pe-bar {
  position: sticky;
  bottom: 16px;
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding: 14px 18px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 999px;
  box-shadow: 0 10px 30px -12px rgba(30, 36, 34, 0.3); /* --ink */
  justify-self: start;
}

/* Page editor: the section title inside its card (not on the border), and
   the date line and heading level with each other (owner's request, 22 Oct 2026) */
.pe-card__title {
  float: left;
  width: 100%;
}

.pe-card__title + * {
  clear: both;
}

.pe-row {
  align-items: start;
}

.pe-row > .field + .field {
  margin-top: 0;
}

/* Side-by-side admin forms (Admins: Add an admin / Change your password):
   the fields fill each card, so both cards line up (owner's request, 22 Oct 2026) */
.admin-pair .admin-form .stack-form {
  max-width: none;
}

/* Admins page: a card that links to Admin activity (owner's request, 22 Oct 2026) */
.admin-card.link-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  max-width: none;
  margin-top: var(--space-3);
}

.link-card h2 {
  margin: 0 0 4px;
}

.link-card p {
  margin: 0;
  color: var(--muted);
}

/* Admins page: the right column holds Change your password and, under it,
   the Admin activity card (owner's request, 22 Oct 2026) */
.admin-pair__col {
  display: grid;
  align-content: start;
  gap: var(--space-3);
  min-width: 0;
}

.admin-pair__col .admin-card.link-card {
  margin-top: 0;
}

.admin-pair .admin-card.link-card {
  flex-direction: row; /* the paired cards stack their insides; this one keeps the button on the right */
}

/* "See admin activity": pale green, turning solid green on hover
   (owner's request, 22 Oct 2026) */
.admin-shell .link-card .btn {
  background: #E3EEE8; /* green tint */
  border-color: #E3EEE8;
  color: var(--green);
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.admin-shell .link-card .btn:hover,
.admin-shell .link-card .btn:focus-visible {
  background: var(--green);
  border-color: var(--green);
  color: var(--white);
}

@media (prefers-reduced-motion: reduce) {
  .admin-shell .link-card .btn {
    transition: none;
  }
}

/* "You" beside your own name on Admins: light green, like the other soft tags (owner's request, 22 Oct 2026) */
.you-tag {
  margin-left: 6px;
}

/* Profile photos (owner's request, 22 Oct 2026): the photo fills the same
   round (or rounded-square) space the initials use */
.has-photo {
  overflow: hidden;
  padding: 0 !important;
  background: var(--paper) !important;
}

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

/* Choosing your photo (My account; your own admin page) */
.avatar-edit {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--space-3);
}

.avatar-edit__pic {
  flex: none;
  display: grid;
  place-items: center;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: var(--green);
  color: var(--paper-light);
  font-family: var(--font-heading);
  font-size: 2.25rem;
}

.avatar-edit__forms {
  flex: 1 1 260px;
  display: grid;
  gap: var(--space-2);
}

.avatar-edit__forms .field__hint {
  margin: 0;
}

.avatar-edit__upload {
  display: grid;
  gap: var(--space-2);
  justify-items: start;
}

.avatar-edit__upload .field {
  width: 100%;
}

/* The admin sidebar picture is a link to your own page */
.admin-side__photo {
  display: inline-flex;
  border-radius: 50%;
}

.admin-side__photo:focus-visible {
  outline: 3px solid var(--paper-light);
  outline-offset: 2px;
}

/* Member page: an admin's small "Remove photo" link-button */
.mv-head__photo-remove {
  display: inline;
}

.mv-head__photo-remove button {
  min-height: 48px;
  padding: 0;
  background: none;
  border: 0;
  color: var(--brick);
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

/* Profile photo chooser: Save and Remove side by side; while adjusting, the
   circle is bigger, the photo can be dragged, and a Zoom slider shows under
   it (owner's request, 22 Oct 2026) */
.avatar-edit__left {
  display: grid;
  justify-items: center;
  gap: 12px;
}

.avatar-edit__pic.is-editing {
  position: relative;
  width: 180px;
  height: 180px;
  cursor: grab;
  touch-action: none;
  box-shadow: 0 0 0 3px var(--paper-light), 0 0 0 5px var(--green);
}

.avatar-edit__pic.is-editing:active {
  cursor: grabbing;
}

.avatar-edit__pic.is-editing img {
  position: absolute;
  max-width: none;
  border-radius: 0;
  user-select: none;
  -webkit-user-drag: none;
}

.avatar-edit__pic:focus-visible {
  outline: 3px solid var(--green);
  outline-offset: 6px;
}

.avatar-edit__zoom {
  display: grid;
  gap: 4px;
  width: 180px;
}

.avatar-edit__zoom[hidden],
.avatar-edit__tip[hidden] {
  display: none;
}

.avatar-edit__zoom label {
  font-weight: 700;
  color: var(--green);
}

.avatar-edit__zoom input {
  width: 100%;
  min-height: 48px; /* easy to grab (brief section 4) */
  accent-color: var(--green);
}

.avatar-edit__tip {
  margin: 0;
}

.avatar-edit__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* Members list: the round photo or initials stays its size beside the name */
.admin-table .board-card__avatar {
  flex: none;
}

/* Member page counts in Fraunces, the heading font (owner's request, 22 Oct 2026) */
.mv-stats__num {
  font-family: var(--font-heading); /* Fraunces */
  font-weight: 600;
}

/* Join form: the optional photo, opened like the mobile number (owner's request, 22 Oct 2026) */
.avatar-edit--join {
  margin-top: var(--space-2);
}

.avatar-edit--join .avatar-edit__pic {
  width: 96px;
  height: 96px;
  font-size: 1.75rem;
}

.avatar-edit--join .avatar-edit__pic.is-editing {
  width: 160px;
  height: 160px;
}

.avatar-edit--join .avatar-edit__zoom {
  width: 160px;
}

/* Join form: * on required fields; mobile number and photo side by side
   (owner's request, 22 Oct 2026) */
.req {
  margin-left: 4px;
  color: var(--brick);
}

.auth-form__req {
  margin: 0;
  color: var(--muted);
  font-size: 16px;
}

.auth-form__req span {
  color: var(--brick);
}

.optional-pair {
  display: grid;
  gap: 0 var(--space-3);
  align-items: start;
}

@media (min-width: 600px) {
  .optional-pair {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.optional-pair .optional-field {
  min-width: 0;
}

/* Join form: "Add a mobile number" and "Add a photo" as two white boxes side
   by side, the same height, like the tick box below (owner's request, 22 Oct 2026) */
.optional-pair {
  gap: var(--space-2);
  align-items: stretch;
}

.optional-pair .optional-field {
  padding: 6px 20px;
  background: var(--white);
  border: 2px solid var(--border);
  border-radius: 12px;
}

.optional-pair .optional-field[open] {
  padding-bottom: 20px;
}

.optional-pair .optional-field summary {
  width: 100%;
}

/* The photo: circle on the left, the file box beside it */
.avatar-edit--join {
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--space-2);
  margin-top: 0;
}

.avatar-edit--join .avatar-edit__pic {
  width: 72px;
  height: 72px;
  font-size: 1.5rem;
}

.avatar-edit--join .avatar-edit__forms {
  flex: 1 1 auto;
  min-width: 0;
}

.avatar-edit--join .avatar-edit__forms label {
  margin-bottom: 4px;
}

.avatar-edit--join input[type="file"] {
  max-width: 100%;
}

/* While adjusting, the bigger circle sits above the file box */
.avatar-edit--join:has(.is-editing) {
  flex-wrap: wrap;
}

/* Join form: Mobile and Photo as two plain fields side by side, like the
   others (owner's request, 22 Oct 2026). The photo's circle only appears once
   a photo is chosen, under the box, to drag and zoom it. */
.optional-pair .field {
  margin: 0;
}

.avatar-edit--join {
  display: block;
}

.avatar-edit--join .avatar-edit__left {
  justify-items: start;
  margin-top: var(--space-2);
}

.avatar-edit--join .avatar-edit__pic:not(.is-editing) {
  display: none;
}

.avatar-edit--join .avatar-edit__left:not(:has(.is-editing)) {
  margin-top: 0;
}

.avatar-edit--join .avatar-edit__tip {
  margin-top: 8px;
}

/* Join form: the photo box white like the other boxes (owner's request, 22 Oct 2026) */
.auth-form .field input[type="file"] {
  background: var(--white);
}

/* Soft tags (category, status, Current, Pinned...): a thin #EFE9DD outline
   (owner's request, 22 Oct 2026) */
.activity-tag {
  /* The outline is the tag's own colour, lighter; never cream (owner's rule, 22 Oct 2026) */
  border: 2px solid color-mix(in srgb, currentColor 30%, transparent);
}

/* News and event pages: "Current" / "Upcoming" with a green outline, the
   way Delete has a red one (owner's request, 22 Oct 2026) */
.nv__tags .nv__tag--current {
  border: 1.5px solid #A6C3B5; /* light green */
}

/* ...and a small green dot before the word, like Active on a member's page */
.nv__tags .nv__tag--current::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
}

/* News and event pages: Current on white with its green outline; Edit, Pin
   and Archive white with an outline in their own colour, filling with that
   colour on hover, like Delete (owner's request, 22 Oct 2026) */
.nv__tags .nv__tag--current {
  background: var(--white);
}

.admin-shell .nv__actions .btn {
  background: var(--white);
  border: 1.5px solid;
  transition: background-color 0.15s ease;
}

.admin-shell .nv__actions .btn--primary {
  border-color: #A6C3B5; /* green */
  color: var(--green);
}

.admin-shell .nv__actions .btn--primary:hover,
.admin-shell .nv__actions .btn--primary:focus-visible {
  background: #E3EEE8;
  border-color: #A6C3B5;
}

.admin-shell .nv__actions .btn--pin {
  border-color: #C9BFE3; /* lavender */
  color: #4A3D7A;
}

.admin-shell .nv__actions .btn--pin:hover,
.admin-shell .nv__actions .btn--pin:focus-visible {
  background: #EEEAF6;
  border-color: #C9BFE3;
}

.admin-shell .nv__actions .btn--archive {
  border-color: #E8CF9F; /* amber */
  color: #8A5A00;
}

.admin-shell .nv__actions .btn--archive:hover,
.admin-shell .nv__actions .btn--archive:focus-visible {
  background: #FBEFD9;
  border-color: #E8CF9F;
}

.admin-shell .nv__actions .btn--secondary:not(.btn--pin):not(.btn--archive) {
  border-color: #DDD7CC; /* Bring back */
}

.admin-shell .nv__actions .btn--secondary:not(.btn--pin):not(.btn--archive):hover {
  background: var(--paper-light);
}

@media (prefers-reduced-motion: reduce) {
  .admin-shell .nv__actions .btn {
    transition: none;
  }
}

/* Admins page: your own card, like the owner's reference (22 Oct 2026): a
   rounded-square photo with Add photo under it, then your name, email and
   since when. Choosing a photo shows it in the square with Zoom and Save. */
.admin-card.me-card {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--space-4);
  max-width: none;
  margin-bottom: var(--space-4);
  padding: clamp(24px, 3vw, 44px);
  border-radius: 24px;
}

.me-card__photo {
  display: grid;
  justify-items: center;
  gap: 12px;
}

.me-card__photo .avatar-edit__left {
  gap: 12px;
}

.avatar-edit__pic.me-card__pic,
.avatar-edit__pic.me-card__pic.is-editing {
  width: 176px;
  height: 176px;
  border-radius: 28%;
  font-family: "Atkinson Hyperlegible Next", var(--font-body);
  font-size: 3rem;
  font-weight: 500;
}

.me-card__pic.has-photo img {
  border-radius: inherit;
}

.me-card__pic.is-editing img {
  border-radius: 0;
}

.me-card__add {
  cursor: pointer;
}

.me-card__add[hidden],
.me-card__save[hidden],
.me-card__photo form[hidden] {
  display: none;
}

.me-card__add svg {
  width: 20px;
  height: 20px;
}

.me-card__save {
  display: flex;
  gap: 8px;
}

.me-card__remove {
  min-height: 48px;
  padding: 0;
  background: none;
  border: 0;
  color: var(--brick);
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.me-card__text {
  flex: 1 1 320px;
  min-width: 0;
}

.me-card__line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
}

.admin-card h2.me-card__name {
  margin: 0;
  color: var(--ink);
  font-size: clamp(2rem, 1.4rem + 1.6vw, 2.75rem);
  line-height: 1.1;
}

.me-card__hint {
  margin: 16px 0 0;
  color: var(--muted);
}

.me-card__details {
  margin: 20px 0 0;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}

.me-card__details div {
  display: grid;
  grid-template-columns: 10em 1fr;
  gap: 16px;
  padding: 6px 0;
}

.me-card__details dt {
  color: var(--muted);
}

.me-card__details dd {
  margin: 0;
  color: var(--ink);
  font-weight: 700;
  overflow-wrap: anywhere;
}

/* Admins page card: Change photo and Remove photo in one row under the
   details; Remove is a red-outlined button like Delete (owner's request, 22 Oct 2026) */
.me-card__buttons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 24px;
}

.me-card__buttons > [hidden] {
  display: none;
}

.admin-shell .btn.me-card__remove {
  min-height: 48px;
  padding: 0 24px;
  background: var(--white);
  border: 1.5px solid #E8A39B;
  color: var(--brick);
  text-decoration: none;
}

.admin-shell .btn.me-card__remove:hover {
  background: rgba(178, 58, 46, 0.08); /* --brick */
  border-color: var(--brick);
  color: var(--brick);
}

/* Overview's Recent activity tags: no outline (owner's request, 22 Oct 2026) */
.activity-tag--asked,
.activity-tag--approved,
.activity-tag--declined,
.activity-tag--deactivated {
  border: 0;
}

/* A board post's or comment's page (owner's reference, 22 Oct 2026): the
   writer and comment count in bold green in the line under the title, and
   for reported ones a soft red box with the reports and the review */
.nv__meta strong {
  color: var(--green);
}

.nv__meta a {
  color: var(--green);
  font-weight: 700;
}

.bi-report {
  margin: -8px 0 28px;
  padding: 16px 20px;
  background: rgba(178, 58, 46, 0.06); /* --brick */
  border: 1px solid rgba(178, 58, 46, 0.25);
  border-radius: 14px;
}

.bi-report p {
  margin: 0;
}

.bi-report__by {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin-top: 8px !important;
  color: var(--muted);
}

/* Street cam settings, like the owner's reference image (22 Oct 2026) */
.sc {
  display: grid;
  gap: var(--space-3);
  max-width: 1200px;
}

.sc .admin-card {
  max-width: none;
  margin: 0;
  border-radius: 24px;
}

.sc__bar {
  display: flex;
  justify-content: flex-end;
}

.sc__aside {
  color: var(--muted);
  font-weight: 400;
}

/* The status card with the on/off switch */
.admin-card.sc-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  padding: 24px clamp(20px, 3vw, 36px);
}

.sc-status__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 16px;
  background: #EFE9DD; /* --paper */
  color: var(--green);
}

.sc-status.is-on .sc-status__icon {
  background: #E3EEE8; /* green tint */
}

.sc-status__icon svg {
  width: 28px;
  height: 28px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linejoin: round;
}

.sc-status__text {
  flex: 1 1 260px;
}

.admin-card .sc-status__text h2 {
  margin: 0 0 4px;
  color: var(--ink);
  font-size: 1.5rem;
}

.sc-status__text p {
  margin: 0;
  color: var(--muted);
}

.sc-switch {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  min-height: 48px;
  cursor: pointer;
}

.sc-switch input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.sc-switch__track {
  position: relative;
  width: 64px;
  height: 36px;
  border-radius: 999px;
  background: #D8D0C2;
  transition: background-color 0.15s ease;
}

.sc-switch__track::after {
  content: "";
  position: absolute;
  top: 4px;
  left: 4px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--white);
  box-shadow: 0 1px 3px rgba(30, 36, 34, 0.25);
  transition: transform 0.15s ease;
}

.sc-switch input:checked + .sc-switch__track {
  background: var(--green);
}

.sc-switch input:checked + .sc-switch__track::after {
  transform: translateX(28px);
}

.sc-switch input:focus-visible + .sc-switch__track {
  outline: 3px solid var(--green);
  outline-offset: 3px;
}

.sc-switch__label {
  color: var(--ink);
  font-weight: 700;
}

/* Stream and notice cards */
.admin-card.sc-card {
  padding: clamp(20px, 3vw, 36px);
}

.admin-card .sc-card h2 {
  margin: 0 0 20px;
  font-size: 1.5rem;
}

.sc-url {
  display: flex;
  border: 2px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  background: var(--white);
}

.sc-url:focus-within {
  border-color: var(--green);
}

.sc-url__prefix {
  display: grid;
  place-items: center;
  padding: 0 18px;
  background: var(--paper-light);
  border-right: 2px solid var(--border);
  color: var(--green);
  font-weight: 700;
}

.sc-url input {
  flex: 1;
  min-width: 0;
  border: 0;
  border-radius: 0;
}

.sc-url input:focus {
  outline: none;
  box-shadow: none;
}

.sc-watch {
  margin: var(--space-3) 0 0;
  padding: 0;
  border: 0;
}

.sc-watch legend {
  margin-bottom: 12px;
  padding: 0;
  color: var(--green);
  font-size: 18px;
  font-weight: 700;
}

.sc-watch__options {
  display: grid;
  gap: var(--space-2);
}

@media (min-width: 800px) {
  .sc-watch__options {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.sc-option {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px 20px;
  border: 2px solid var(--border);
  border-radius: 16px;
  cursor: pointer;
}

.sc-option:has(input:checked) {
  background: #F1F6F3;
  border-color: var(--green);
}

.sc-option input {
  flex: none;
  width: 22px;
  height: 22px;
  margin-top: 2px;
  accent-color: var(--green);
}

.sc-option strong {
  display: block;
  color: var(--ink);
}

.sc-option strong + span {
  display: block;
  margin-top: 4px;
  color: var(--muted);
}

@media (prefers-reduced-motion: reduce) {
  .sc-switch__track,
  .sc-switch__track::after {
    transition: none;
  }
}

/* Page editor, like the owner's reference image (22 Oct 2026) */
.pe2 {
  display: grid;
  gap: var(--space-3);
  max-width: 1100px;
}

.pe2__head {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-2);
  margin: calc(var(--space-3) * -1) 0 0;
  padding: var(--space-3) 0 var(--space-2);
  background: var(--paper);
  border-bottom: 1px solid var(--border);
}

.pe2__back {
  margin: 0 0 4px;
}

.pe2__back a::before {
  content: "\2190\00a0\00a0";
}

.admin-content h2.pe2__title {
  margin: 0 0 10px;
  color: var(--ink);
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
}

.pe2__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.pe2__see svg {
  width: 18px;
  height: 18px;
}

.pe2__cancel {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 8px;
  color: var(--green);
  font-weight: 700;
  text-decoration: none;
}

.pe2__cancel:hover {
  text-decoration: underline;
}

.pe2 .admin-card {
  max-width: none;
  margin: 0;
  border-radius: 20px;
}

.admin-card.pe2-card {
  padding: clamp(20px, 2.5vw, 32px);
}

.pe2-card h2 {
  margin: 0 0 16px;
  font-size: 1.375rem;
}

.pe2-card .field + .field {
  margin-top: var(--space-2);
}

.pe2__short input {
  max-width: 360px;
}

.pe2__sections-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-top: var(--space-2);
}

.pe2__sections-head h2 {
  margin: 0;
  font-size: 1.375rem;
}

.pe2__sections-head span {
  color: var(--muted);
}

/* A section card that opens and closes */
.admin-card.pe2-sec {
  padding: 0;
  overflow: hidden;
}

.pe2-sec__head {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px clamp(16px, 2vw, 24px);
  cursor: pointer;
  list-style: none;
}

.pe2-sec__head::-webkit-details-marker {
  display: none;
}

.pe2-sec[open] .pe2-sec__head {
  border-bottom: 1px solid var(--border);
}

.pe2-sec__num {
  flex: none;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: #E3EEE8; /* green tint */
  color: var(--green);
  font-weight: 700;
}

.pe2-sec__name {
  flex: 1;
  min-width: 0;
}

.pe2-sec__name strong {
  display: block;
  color: var(--ink);
  font-size: 1.125rem;
}

.pe2-sec__tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  margin-top: 4px;
  color: var(--muted);
}

.pe2-sec__tags .activity-tag {
  padding: 0 10px;
  font-size: 0.95rem;
}

.pe2-sec__chev svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: var(--green);
  stroke-width: 2;
  transform: rotate(90deg);
  transition: transform 0.15s ease;
}

.pe2-sec[open] .pe2-sec__chev svg {
  transform: rotate(-90deg);
}

.pe2-sec__body {
  display: grid;
  gap: var(--space-2);
  padding: clamp(16px, 2vw, 24px);
}

.pe2-sec__body .pe-row + .field {
  margin-top: 0;
}

.pe2-photo__label {
  margin: 0 0 8px;
  color: var(--green);
  font-size: 18px;
  font-weight: 700;
}

.pe2-photo__box {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  padding: 14px;
  background: var(--paper-light);
  border-radius: 14px;
}

.pe2-photo__box img {
  width: 180px;
  height: 130px;
  object-fit: cover;
  border-radius: 10px;
  background: var(--white);
}

.pe2-photo__box p {
  flex: 1 1 220px;
  margin: 0;
  color: var(--muted);
}

@media (prefers-reduced-motion: reduce) {
  .pe2-sec__chev svg {
    transition: none;
  }
}

/* Page editor: section tools (move up / down, delete), the photo box and
   "Add a section" (owner's reference, 22 Oct 2026) */
.pe2-list {
  display: grid;
  gap: 16px;
}

.pe2-sec__tools {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: 8px;
  padding-left: 12px;
  border-left: 1px solid var(--border);
}

.pe2-tool {
  display: grid;
  place-items: center;
  width: 44px;
  height: 48px;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 10px;
  color: var(--green);
  cursor: pointer;
}

.pe2-tool:hover:not(:disabled) {
  background: var(--paper-light);
}

.pe2-tool:disabled {
  color: #C9C2B5;
  cursor: default;
}

.pe2-tool--danger {
  color: var(--brick);
}

.pe2-tool svg,
.pe2-add svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.pe2-photo__pic {
  flex: none;
  display: grid;
  place-items: center;
  width: 180px;
  height: 130px;
  overflow: hidden;
  border-radius: 10px;
  background: var(--white);
}

.pe2-photo__pic.is-empty {
  background: linear-gradient(135deg, #C8D6CC, #A9BFAF);
  color: var(--green);
}

.pe2-photo__pic img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pe2-photo__pic svg {
  width: 36px;
  height: 36px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
}

.pe2-photo__side {
  flex: 1 1 240px;
  display: grid;
  gap: 12px;
}

.pe2-photo__side p {
  margin: 0;
  color: var(--muted);
}

.pe2-photo__buttons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}

.pe2-photo__buttons .btn {
  cursor: pointer;
}

.pe2-photo__remove {
  min-height: 48px;
  padding: 0 8px;
  background: none;
  border: 0;
  color: var(--green);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.pe2-photo__remove[hidden] {
  display: none;
}

.pe2-add {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px 16px;
  padding: 24px;
  border: 2px dashed #D8D0C2;
  border-radius: 20px;
}

.pe2-add__title {
  color: var(--ink);
  font-size: 1.125rem;
  font-weight: 700;
}

.pe2-add .btn {
  gap: 8px;
}

@media (max-width: 599px) {
  .pe2-sec__head {
    flex-wrap: wrap;
  }

  .pe2-sec__tools {
    width: 100%;
    margin: 0;
    padding: 8px 0 0;
    border: 0;
    border-top: 1px solid var(--border);
    justify-content: flex-end;
  }
}

/* A board post's page: the category tag looks like "● Current" on a news
   post's page: white, a light green outline, a dot (owner's request, 22 Oct 2026) */
.nv__tags .activity-tag[class*="cat-tag--"] {
  background: var(--white);
  border: 1.5px solid #A6C3B5; /* light green */
  color: var(--green);
}

.nv__tags .activity-tag[class*="cat-tag--"]::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
}

/* Page editor: "Everyone sees it" with no fill, grey text and a grey outline
   (owner's request, 22 Oct 2026) */
.activity-tag.pe2__who {
  background: none;
  border: 1.5px solid var(--muted);
  color: var(--muted);
}

/* Admin panel: every status and category capsule in one grey, no colours
   (owner's request, 23 Oct 2026): Asked to join, Approved, Declined, Active,
   Current, Pinned, Hidden, Waiting, In use... The Board table's Category
   column and the page editor's "Everyone sees it" were already grey (white
   with a grey outline) and keep that look. Overview's Recent activity tags
   have their own light colours again (owner's request, 23 Oct 2026). */
.admin-shell .activity-tag:not(.pe2__who):not(.board-table [class*="cat-tag--"]):not([class*="activity-tag--"]),
.admin-shell .status,
.admin-shell .mod-status,
.admin-shell .mv-status,
.admin-shell .admin-tag {
  background: rgba(91, 102, 97, 0.14); /* --muted, the grey "Deactivated" already used */
  border-color: transparent;
  color: var(--ink);
}

/* Admin tables: only the main thing keeps the dark text: the name on Join
   requests and Members, the title on News and Board, the page on Pages. Every other column
   (date, address, email, mobile, reason, where, written by, comments, who sees it) is in the lighter grey, so
   the eye goes there first (owner's request, 23 Oct 2026). Buttons and the
   status capsules keep their own colours; the phone labels keep their green. */
#waiting-table .admin-table td:not(.admin-table__action),
#members-table .admin-table td:not(.admin-table__action),
#news-table .admin-table td,
.admin-shell .board-table td,
#pages-table .admin-table td {
  color: var(--muted);
}

/* A page's main button (Write news, Add an event) on the right of the top
   bar, level with the title (owner's request, 23 Oct 2026) */
.admin-top__action {
  align-self: center;
  margin-left: auto;
}

/* Admin Events as cards, from the owner's reference image (23 Oct 2026):
   a date block (month on green, day on the green tint), the title with its
   grey tags, "day, time · place" in grey and an arrow. The whole card opens
   the event. No outline until the pointer is over a card (owner's request,
   23 Oct 2026); "Next up" marks the soonest upcoming event; past events
   are quieter. Text 20% bigger than the admin tables (19.2px;
   21.6px titles on phones), the title bold in green like a table's name
   (owner's requests, 23 Oct 2026). */
.aev-list {
  display: grid;
  gap: var(--space-2);
  margin: var(--space-3) 0;
  padding: 0;
  list-style: none;
}

.aev {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-3); /* more room above and below (owner's request, 23 Oct 2026) */
  border: 2px solid transparent; /* no outline until hover */
  border-radius: 24px;
  background: var(--white);
}

.aev:hover,
.aev:focus-within {
  border-color: var(--green);
}

.aev__date {
  flex: none;
  display: flex;
  flex-direction: column;
  width: 86px;
  margin: 0;
  overflow: hidden;
  border-radius: 12px;
  text-align: center;
}

.aev__month {
  padding: 4px 0 2px;
  background: var(--green);
  color: var(--white);
  font-size: 19.2px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.aev__day {
  padding: 2px 0 6px;
  background: #E3EEE8; /* green tint (brief section 4) */
  color: var(--green);
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1.1;
}

.aev--past .aev__month {
  background: var(--muted);
}

.aev--past .aev__day {
  background: rgba(91, 102, 97, 0.14); /* --muted */
  color: var(--muted);
}

.aev__body {
  flex: 1;
  min-width: 0;
}

.aev__title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  margin: 0 0 2px;
  font-family: var(--font-body);
  font-size: 23px; /* the title alone 20% bigger again (owner's request, 23 Oct 2026); its tags keep 19.2px */
  font-weight: 700;
  line-height: 1.45;
}

.aev__title a {
  color: var(--green);
  text-decoration: none;
}

/* The whole card is the link */
.aev__title a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 24px;
}

.aev__title a:focus-visible {
  outline: none;
}

.aev:has(.aev__title a:focus-visible) {
  outline: 3px solid var(--green);
  outline-offset: 3px;
}

.aev__title .status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin: 0;
  padding: 2px 10px; /* smaller tags (owner's request, 23 Oct 2026) */
  font-size: 16px; /* the brief's smallest text */
  line-height: 1.4;
}

.aev__title .status svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.aev__when {
  margin: 0;
  color: var(--muted);
  font-size: 18px; /* owner's request, 23 Oct 2026 */
}

.aev__arrow {
  flex: none;
  width: 24px;
  height: 24px;
  fill: none;
  stroke: var(--ink);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Phones: a smaller date block, and no arrow (the card is still the link) */
@media (max-width: 599px) {
  .aev {
    gap: var(--space-2);
    padding: var(--space-3) var(--space-2);
    border-radius: 20px;
  }

  .aev__date {
    width: 77px;
  }

  .aev__title {
    font-size: 26px; /* the title 20% bigger again on phones too */
  }

  .aev__arrow {
    display: none;
  }
}

/* Board, from the owner's reference image (23 Oct 2026). Round tabs across
   the top, the name then the number: white with a light outline in their own
   colour (never cream), the chosen one filled green, a Reported tab with
   something waiting in red. In the table the category and the tags (Pinned,
   Comments closed, Hidden) sit under the title, so there are no Category or
   Status columns; the writer is in dark text and the number of comments in
   bold (grey when none). Tags stay grey (23 Oct rule). */
.board-nav {
  margin: 0;
}

.board-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.board-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 8px 22px;
  border: 2px solid color-mix(in srgb, var(--ink) 14%, transparent);
  border-radius: 999px;
  background: var(--white);
  color: var(--ink);
  font-size: 18px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.board-pill__count {
  font-variant-numeric: tabular-nums;
}

.board-pill:hover {
  border-color: color-mix(in srgb, currentColor 45%, transparent);
  color: var(--ink);
}

.board-pill--alert,
.board-pill--alert:hover {
  border-color: color-mix(in srgb, var(--brick) 30%, transparent);
  color: var(--brick);
}

.board-pill--alert:hover {
  border-color: color-mix(in srgb, var(--brick) 60%, transparent);
}

.board-pill[aria-current="page"],
.board-pill[aria-current="page"]:hover {
  background: var(--green);
  border-color: var(--green);
  color: var(--white);
}

.board-pill:focus-visible {
  outline: 3px solid var(--green);
  outline-offset: 3px;
}

/* The table */
@media (min-width: 900px) {
  .board-table tbody th,
  .board-table td {
    padding-top: 18px;
    padding-bottom: 18px;
  }
}

.board-table__title a {
  font-size: 18px;
}

.board-table__tags {
  align-items: center;
  gap: 6px 10px;
  margin-top: 6px;
  font-weight: 400;
}

.board-table__tags:empty {
  display: none;
}

.board-table__cat {
  color: var(--muted);
  font-size: 16px;
}

.board-table__tags .activity-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 12px;
}

.board-table__tags .activity-tag svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.admin-shell .board-table .board-table__who {
  color: var(--ink);
}

.admin-shell .board-table td.board-table__num {
  color: var(--ink);
  font-weight: 700;
  text-align: center;
}

.admin-shell .board-table td.board-table__num.is-zero {
  color: var(--muted);
  font-weight: 400;
}

.admin-table thead th.board-table__num {
  text-align: center;
}

/* Phones: the count sits on the left like the other labelled lines */
@media (max-width: 899px) {
  .admin-shell .board-table td.board-table__num {
    text-align: left;
  }
}

/* Overview's Recent activity: each kind in its own light colour from the
   brief's palette, with an icon (owner's request, 23 Oct 2026): Asked to join
   amber (clock), Approved green (tick), Declined red (cross), Deactivated
   grey (person with a cross). The colours are in the .activity-tag--* rules. */
.activity-table .activity-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.activity-table .activity-tag svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ...in lighter shades of the same colours (owner's request, 23 Oct 2026);
   the words keep their colour, so they stay easy to read */
.activity-table .activity-tag--asked {
  background: #FDF7EC; /* half the amber tint */
}

.activity-table .activity-tag--approved {
  background: #F1F7F3; /* half the green tint */
}

.activity-table .activity-tag--declined {
  background: rgba(178, 58, 46, 0.06); /* --brick, lighter */
}

.activity-table .activity-tag--deactivated {
  background: rgba(91, 102, 97, 0.07); /* --muted, lighter */
}

/* One admin's page, from the owner's reference image (23 Oct 2026): the same
   card as "You" on the Admins page (.me-card), with "<- Admins" above it, a
   dark green "Add photo" band across the bottom of the photo square, and the
   Add photo button (or Save / Cancel) right under the square, as wide as it. */
.me-back a {
  font-size: 1.25rem;
  color: var(--green);
  text-decoration: none;
}

.me-back a:hover {
  text-decoration: underline;
}

.me-card__picwrap {
  position: relative;
  overflow: hidden;
  border-radius: 28%;
}

.me-card__band {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  cursor: pointer;
}

/* The bar itself: hidden until the pointer is over the photo or the picker
   has keyboard focus (owner's request, 23 Oct 2026) */
.me-card__band-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 10px 8px 12px;
  background: rgba(31, 66, 55, 0.92); /* --green-dark */
  color: var(--paper-light);
  font-size: 16px;
  font-weight: 700;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.me-card__picwrap:hover .me-card__band-bar,
.me-card__photo:has(#me-photo:focus-visible) .me-card__band-bar {
  opacity: 1;
}

.me-card__photo:has(#me-photo:focus-visible) .me-card__picwrap {
  outline: 3px solid var(--green);
  outline-offset: 3px;
}

/* Touch screens have no hover: the bar always shows there */
@media (hover: none) {
  .me-card__band-bar {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .me-card__band-bar {
    transition: none;
  }
}

.me-card__band[hidden] {
  display: none;
}

.me-card__band svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.me-card__photo .me-card__add {
  justify-content: center;
  width: 176px; /* as wide as the photo square */
}

.me-card__photo .me-card__save {
  flex-wrap: nowrap; /* Save photo and Cancel side by side (owner's request, 23 Oct 2026) */
  justify-content: center;
  gap: 8px;
}

.me-card__photo .me-card__save .btn {
  padding: 0 18px;
  white-space: nowrap;
}

.me-card__photo .me-card__save[hidden] {
  display: none;
}

.me-card__email {
  color: var(--green);
  text-decoration: none;
}

.me-card__email:hover {
  text-decoration: underline;
}

/* One admin's page, closer to the reference (owner's request, 23 Oct 2026):
   a bold arrow before "Admins"; the name in the bold sans, not Fraunces;
   "You" in light green; bigger help and details text; the button under the
   photo on one line and as wide as the square; no outline on the photo. */
.me-back a::before {
  content: none;
}

.me-back a {
  gap: 12px;
}

.me-back svg {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.me-card--page {
  align-items: flex-start;
}

.admin-card .me-card--page h2.me-card__name,
.me-card--page h2.me-card__name {
  font-family: var(--font-body);
  font-weight: 700;
  letter-spacing: -0.01em;
}

.me-card__you {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 16px;
  border-radius: 999px;
  background: #E3EEE8; /* green tint (brief section 4) */
  color: var(--green);
  font-size: 18px;
  font-weight: 700;
}

.me-card--page .me-card__hint {
  font-size: 1.125rem;
  line-height: 1.6;
}

.me-card--page .me-card__details {
  font-size: 1.25rem;
}

.me-card--page .me-card__details div {
  grid-template-columns: 9em 1fr;
}

.me-card--page .me-card__photo .me-card__add {
  gap: 10px;
  padding: 0 12px;
  white-space: nowrap;
  border-radius: 999px;
  font-size: 18px;
}

.me-card--page .me-card__photo .me-card__remove {
  width: 176px;
  padding: 0 12px;
  border-radius: 999px;
}

/* The admin's name at the bottom of the sidebar opens their own page
   (owner's request, 23 Oct 2026): it looks the same, underlined on hover */
.admin-side__name a,
.admin-side__name a:hover {
  color: inherit;
}

.admin-side__name a {
  text-decoration: none;
}

.admin-side__name a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.admin-side__name a:focus-visible {
  outline: 3px solid var(--paper-light);
  outline-offset: 2px;
}

/* Join requests: the address is the first column, bigger and in dark text,
   since it is what an admin checks (owner's request, 23 Oct 2026) */
#waiting-table .admin-table td.request-address {
  color: var(--ink);
  font-size: 18px;
  font-weight: 700;
}

#waiting-table .admin-table td.request-address .admin-table__sub {
  font-size: 16px;
  font-weight: 400;
}

/* Admin table headings: regular weight, not bold, so they sit back behind
   the rows (owner's request, 23 Oct 2026). They stay 16px, the brief's
   smallest text (owner chose to keep it, rather than 15px). */
.admin-shell .admin-table thead th {
  font-weight: 400;
}

/* Members list: names 1px bigger (owner's request, 23 Oct 2026):
   19px on phones, 17px in the wide table */
#members-table .admin-table tbody th {
  font-size: 19px;
}

@media (min-width: 900px) {
  #members-table .admin-table tbody th {
    font-size: 18px; /* owner's request, 23 Oct 2026 (was 17px) */
  }
}

/* Members and Join requests lists: Email, Mobile and Date 1px smaller, 15px
   (owner's decision, 23 Oct 2026, knowingly below the brief's 16px minimum) */
#members-table .admin-table td:is([data-label="Email"], [data-label="Mobile"], [data-label="Date"]),
#waiting-table .admin-table td:is([data-label="Email"], [data-label="Mobile"], [data-label="Date"]) {
  font-size: 15px;
}

/* Pages list, Who sees it: a globe for Everyone, a house for Residents
   (owner's request, 23 Oct 2026) */
.who-sees {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 14px 4px 10px;
  border-radius: 999px; /* a light capsule with no outline (owner's request, 23 Oct 2026) */
}

.admin-shell .who-sees--everyone {
  background: #F6F1E7; /* light cream */
  color: var(--ink);
}

.admin-shell .who-sees--residents {
  background: #EAF3EE; /* light green */
  color: var(--green);
}

.who-sees svg {
  flex: none;
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Join requests: the Action (or Status) heading and the buttons under it
   on the left of their column, not the right (owner's request, 23 Oct 2026) */
#waiting-table .admin-table thead th.admin-table__action-head {
  text-align: left;
}

@media (min-width: 900px) {
  #waiting-table .admin-table td.admin-table__action {
    text-align: left;
  }

  #waiting-table .admin-table td.admin-table__action .row-actions {
    justify-content: flex-start;
  }
}

/* News list: titles 17px in the wide table (owner's request, 23 Oct 2026);
   phones keep the tables' 18px */
@media (min-width: 900px) {
  #news-table .admin-table tbody th {
    font-size: 17px;
  }
}

/* Board: Hidden as an on/off switch at the end of the tab row (owner's
   request, 23 Oct 2026). Off: a grey track; on: header green with the knob
   on the right. It is a link: on shows the hidden posts, off All posts. */
.board-switch-item {
  margin-left: 8px; /* straight after Comments closed, not pushed to the far right (owner's request, 23 Oct 2026) */
}

.board-switch {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 8px 4px;
  color: var(--ink);
  font-size: 18px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.board-switch:hover {
  color: var(--ink);
}

.board-switch__track {
  position: relative;
  flex: none;
  width: 48px;
  height: 28px;
  border-radius: 999px;
  background: #C9CEC9; /* grey */
  transition: background-color 0.15s ease;
}

.board-switch__knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--white);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  transition: transform 0.15s ease;
}

.board-switch.is-on .board-switch__track {
  background: var(--green);
}

.board-switch.is-on .board-switch__knob {
  transform: translateX(20px);
}

.board-switch:hover .board-switch__track {
  background: #B5BCB6;
}

.board-switch.is-on:hover .board-switch__track {
  background: var(--green-dark);
}

.board-switch:focus-visible {
  outline: 3px solid var(--green);
  outline-offset: 3px;
  border-radius: 12px;
}

@media (prefers-reduced-motion: reduce) {
  .board-switch__track,
  .board-switch__knob {
    transition: none;
  }
}

/* A member's Details: an icon before each value (envelope, phone, tick in a
   circle, cross, person with a cross; owner's requests, 23 Oct 2026) */
.mv-rows--icons dd {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.mv-rows--icons dd svg {
  flex: none;
  margin-top: 2px;
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Admins page, Add an admin and Change your password: field labels 1px
   smaller, 17px (owner's request, 23 Oct 2026) */
.admin-form[aria-labelledby="add-title"] .field label,
.admin-form[aria-labelledby="pw-title"] .field label {
  font-size: 17px;
  font-weight: 400; /* regular, not bold (owner's request, 23 Oct 2026) */
}

/* The name menu (My account, Log out): an icon before each (owner's
   request, 23 Oct 2026) */
.account-menu__panel a,
.account-menu__panel button.account-menu__logout {
  display: flex;
  align-items: center;
  gap: 10px;
}

.account-menu__panel svg {
  flex: none;
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Settings: the column names above each list (Name, Street, Postcodes,
   Remove) in black (owner's request, 23 Oct 2026) */
.admin-shell .settings-list__head {
  color: var(--ink);
}

/* Settings, Streets and postcodes: fixed, shown as text in two columns
   (owner's request, 23 Oct 2026) */
.settings-list--fixed .settings-list__head,
.settings-list--fixed .settings-list__row {
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
}

.settings-list--fixed .settings-list__head span:last-child {
  text-align: left;
}

.settings-list--fixed .settings-list__row {
  min-height: 56px;
}

.settings-list__value {
  color: var(--ink);
  font-size: 17px;
  overflow-wrap: anywhere;
}