/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

:root {
  --color-primary-green: #08693A;
  --color-dark-green: #075C35;
  --color-light-green: #DDEBDF;
  --color-primary-cream: #FCF4DA;
  --color-very-light-cream: #FFFDF5;
  --color-text: #20251F;
  --color-text-muted: #697067;
  --color-border: #DDDCCF;

  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-heading: Georgia, "Times New Roman", serif;
  --font-display: "League Gothic", Impact, "Arial Narrow", sans-serif;
  --font-script: "Caveat", "Segoe Script", cursive;
}

@font-face {
  font-family: "League Gothic";
  src: url("/assets/league-gothic-regular-277199d3.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Caveat";
  src: url("/assets/caveat-400-9228aafd.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

* {
  box-sizing: border-box;
}

html, body {
  overflow-x: hidden;
}

body {
  margin: 0;
  background: var(--color-very-light-cream);
  color: var(--color-text);
  font-family: var(--font-body);
  line-height: 1.5;
  /* Sticky footer: when header + content is shorter than the viewport, the
     page background (not the footer) was showing below the footer, since
     body only grew to its content's natural height. Making body a full-
     height flex column and letting .site-content absorb the extra space
     keeps the footer flush with the viewport bottom without touching its
     own height. */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.site-content {
  flex: 1 0 auto;
}

h1, h2, h3 {
  font-family: var(--font-heading);
  line-height: 1.2;
  color: var(--color-dark-green);
}

a {
  color: var(--color-primary-green);
}

a:focus, button:focus, input:focus, textarea:focus, select:focus, [tabindex]:focus {
  outline: 3px solid var(--color-primary-green);
  outline-offset: 2px;
}

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.625rem 1.25rem;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-primary-cream);
}

@media (min-width: 56rem) {
  .site-header {
    padding: 0.625rem 1.5rem;
  }
}

.site-header__brand {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.site-header__logo {
  height: 3rem;
  width: auto;
}

.site-header__wordmark {
  /* The source SVG's viewBox is a square inherited from the icon mark, but the
     wordmark itself only occupies a wide band within it — crop to that band
     instead of rendering the (mostly empty) square at a legible size. */
  height: 2.75rem;
  width: 5.1rem;
  object-fit: cover;
}

/* ---- Mobile nav toggle (<details>/<summary>, no JS) ---- */

.nav-toggle {
  position: relative;
}

.nav-toggle summary {
  list-style: none;
  cursor: pointer;
}

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

.nav-toggle__button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 4px;
}

.nav-toggle[open] .nav-toggle__button {
  background: var(--color-light-green);
}

.nav-toggle__icon, .nav-toggle__icon::before, .nav-toggle__icon::after {
  content: "";
  display: block;
  position: absolute;
  width: 1.5rem;
  height: 2px;
  background: var(--color-dark-green);
  transition: transform 0.15s ease, background 0.15s ease;
}

.nav-toggle__icon::before {
  transform: translateY(-6px);
}

.nav-toggle__icon::after {
  transform: translateY(6px);
}

.nav-toggle[open] .nav-toggle__icon {
  background: transparent;
}

.nav-toggle[open] .nav-toggle__icon::before {
  transform: rotate(45deg);
}

.nav-toggle[open] .nav-toggle__icon::after {
  transform: rotate(-45deg);
}

/* ---- Nav links ----
   Two instances share identical content (rendered from the same partial):
   `.site-nav--mobile` lives inside the <details> dropdown and is shown/hidden
   by the browser's native disclosure behavior; `.site-nav--desktop` is a
   separate always-in-DOM <nav>, hidden below the breakpoint and shown inline
   above it. Keeping them as two elements (rather than one <nav> whose
   visibility is forced across the <details> boundary) avoids relying on
   overriding how browsers internally hide collapsed <details> content, which
   turned out not to be reliably overridable. */

.site-nav a {
  color: var(--color-dark-green);
  font-weight: 600;
  text-decoration: none;
}

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

/* The plain-link color above would otherwise override the CTA button's own
   (higher-contrast) text color, since both target the same <a>. */
.site-nav a.button--primary {
  color: var(--color-very-light-cream);
  text-decoration: none;
}

.site-nav a.button--primary:hover {
  text-decoration: none;
}

.site-nav form {
  display: contents;
}

.site-nav__logout {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  font-weight: 600;
  color: var(--color-text-muted);
  text-decoration: underline;
  cursor: pointer;
}

.site-nav--mobile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  max-width: calc(100vw - 2.5rem);
  min-width: 14rem;
  padding: 1rem;
  background: var(--color-very-light-cream);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  font-size: 0.95rem;
  z-index: 20;
}

.site-nav--mobile .button {
  margin-top: 0.25rem;
}

.site-nav--desktop {
  display: none;
}

@media (min-width: 56rem) {
  .nav-toggle {
    display: none;
  }

  .site-nav--desktop {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1.25rem;
    font-size: 0.95rem;
  }

  .site-nav--desktop .site-header__cta {
    margin-left: 0.5rem;
  }
}

.container {
  max-width: 48rem;
  margin: 0 auto;
  padding: 1.5rem 1.25rem 3rem;
}

.container--narrow {
  max-width: 32rem;
}

.container--wide {
  max-width: 72rem;
}

.card {
  border: 1px solid var(--color-border);
  border-radius: 4px;
  padding: 1.25rem;
  margin: 1.5rem 0;
  background: var(--color-very-light-cream);
}

fieldset {
  border: none;
  padding: 0;
  margin: 0 0 2rem;
}

legend {
  font-weight: bold;
  font-size: 1rem;
  padding: 0;
  margin-bottom: 0.75rem;
  color: var(--color-dark-green);
}

.info-list {
  padding-left: 1.25rem;
}

.info-list li {
  margin-bottom: 0.5rem;
}

.muted {
  color: var(--color-text-muted);
  font-size: 0.9rem;
}

.field {
  margin-bottom: 1rem;
}

.field label {
  display: block;
  font-weight: bold;
  margin-bottom: 0.25rem;
}

.field input, .field textarea {
  width: 100%;
  padding: 0.5rem;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  font-size: 1rem;
  font-family: inherit;
}

.field textarea {
  min-height: 6rem;
  resize: vertical;
}

.button {
  display: inline-block;
  padding: 0.6rem 1.25rem;
  border-radius: 4px;
  border: 1px solid transparent;
  font-size: 1rem;
  text-decoration: none;
  cursor: pointer;
}

.button--primary {
  background: var(--color-primary-green);
  color: var(--color-very-light-cream);
}

.button--primary:hover {
  background: var(--color-dark-green);
}

.button--secondary {
  background: var(--color-very-light-cream);
  border-color: var(--color-border);
  color: var(--color-text);
}

.button--secondary:hover {
  background: var(--color-primary-cream);
}

.notice {
  border: 1px solid var(--color-border);
  border-radius: 4px;
  padding: 1rem 1.25rem;
  margin: 1rem 0;
}

.notice--error {
  border-color: #B3271E;
}

.notice--success {
  border-color: var(--color-primary-green);
  background: var(--color-light-green);
}

.status {
  display: inline-block;
  padding: 0.2rem 0.6rem;
  border-radius: 4px;
  font-weight: bold;
}

.status--active {
  background: var(--color-light-green);
  color: var(--color-dark-green);
}

.status--inactive {
  background: var(--color-primary-cream);
  color: var(--color-text-muted);
}

.status--preparing {
  background: var(--color-primary-cream);
  color: var(--color-text-muted);
}

.status--open {
  background: var(--color-light-green);
  color: var(--color-dark-green);
}

.status--full {
  background: #FCEFC7;
  color: #7A5B00;
}

.status--completed {
  background: var(--color-border);
  color: var(--color-text);
}

.admin-nav {
  display: flex;
  gap: 1.25rem;
  padding: 0.75rem 1.25rem;
  background: var(--color-light-green);
  border-bottom: 1px solid var(--color-border);
}

.admin-nav a {
  color: var(--color-dark-green);
  text-decoration: none;
  font-weight: bold;
}

.admin-nav a.is-active {
  text-decoration: underline;
}

.admin-filters {
  margin-bottom: 1.5rem;
}

.admin-filters__links {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.table {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0;
}

.table th, .table td {
  text-align: left;
  padding: 0.6rem 0.75rem;
  border-bottom: 1px solid var(--color-border);
}

.table th {
  color: var(--color-text-muted);
  font-weight: bold;
}

.whatsapp-preview {
  white-space: pre-wrap;
  word-wrap: break-word;
  font-family: inherit;
  background: var(--color-very-light-cream);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  padding: 1rem;
  margin: 0 0 1rem;
}

/* ---- Public site: hero ---- */

.hero {
  background: var(--color-primary-green);
  padding: 1.75rem 0 2.25rem;
}

.hero__inner {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.hero__headline {
  margin: 0;
  font-family: var(--font-display);
  text-transform: uppercase;
  font-weight: 400;
  font-size: 2.25rem;
  line-height: 1.05;
  color: var(--color-very-light-cream);
}

.hero__headline-strong {
  display: block;
}

.hero__headline-accent {
  display: block;
  margin-top: 0.25rem;
  font-family: var(--font-script);
  text-transform: none;
  font-weight: 400;
  font-size: 1.4em;
  line-height: 1;
  color: var(--color-light-green);
}

.hero__intro {
  max-width: 34rem;
  font-size: 1.05rem;
  color: var(--color-light-green);
}

.hero__cta-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.hero__cta-group .button {
  width: 100%;
  text-align: center;
}

@media (min-width: 30rem) {
  .hero__cta-group .button {
    width: auto;
  }
}

/* The hero sits on the same green used by .button--primary elsewhere, so its
   buttons need inverted, hero-specific contrast instead of the site-wide colors. */
.hero .button--primary {
  background: var(--color-very-light-cream);
  color: var(--color-dark-green);
}

.hero .button--primary:hover {
  background: var(--color-light-green);
}

@media (min-width: 56rem) {
  .hero {
    padding: 3rem 0 3.75rem;
  }

  .hero__inner {
    gap: 1.5rem;
    max-width: 48rem;
  }

  .hero__headline {
    font-size: 3.75rem;
  }
}

/* ---- Public site: section headings ---- */

.section-heading {
  margin: 0 0 1rem;
  font-size: 1.4rem;
}

/* ---- Public site: homepage "upcoming missions" section ---- */
/* Mobile: heading, then content/empty-state, then the "view all" link last.
   Desktop: heading and link share a row above the content. */

.missions-section {
  display: grid;
  row-gap: 0.75rem;
  grid-template-areas: "heading" "content" "viewall";
}

.missions-section__heading {
  grid-area: heading;
  margin: 0;
}

.missions-section__content {
  grid-area: content;
}

.missions-section__viewall {
  grid-area: viewall;
  font-weight: 600;
}

@media (min-width: 56rem) {
  .missions-section {
    column-gap: 1rem;
    align-items: baseline;
    grid-template-columns: 1fr auto;
    grid-template-areas: "heading viewall" "content content";
  }

  /* Home only: list left, compact calendar right, same overall section height. */
  .missions-section__content {
    display: grid;
    grid-template-columns: 1fr 18rem;
    align-items: start;
    gap: 1.5rem;
  }

  .missions-section__content turbo-frame {
    grid-column: 2;
    grid-row: 1;
  }

  .missions-section__content .mission-list,
  .missions-section__content .muted {
    grid-column: 1;
    grid-row: 1;
  }
}

/* ---- Public site: /missions page layout (intro, calendar + list) ---- */

.missions-page-intro {
  margin-bottom: 2rem;
}

.missions-page-intro__lede {
  max-width: 34rem;
  color: var(--color-text-muted);
  font-size: 1.05rem;
}

.missions-page {
  display: grid;
  gap: 2rem;
}

@media (min-width: 56rem) {
  .missions-page {
    grid-template-columns: 20rem 1fr;
    align-items: start;
  }
}

.missions-page__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.missions-page__count {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 0.9rem;
}

.missions-selected-date {
  margin: 0 0 1rem;
  font-weight: 600;
  color: var(--color-dark-green);
}

/* ---- Public site: Mission filters (index) ----
   Discreet pills: inactive filters are plain muted text (no border/box, so
   they never read as three heavily-framed buttons); only the active filter
   gets a solid fill. */

.missions-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
}

.missions-filters__pill {
  display: inline-block;
  padding: 0.35rem 0.9rem;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-text-muted);
  text-decoration: none;
}

.missions-filters__pill:hover {
  color: var(--color-dark-green);
}

.missions-filters__pill.is-active {
  background: var(--color-dark-green);
  color: var(--color-very-light-cream);
}

/* ---- Public site: Mission list/row ---- */

.mission-list {
  display: flex;
  flex-direction: column;
}

.mission-row {
  border-bottom: 1px solid var(--color-border);
}

.mission-row:last-child {
  border-bottom: none;
}

.mission-row__link {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 0;
  color: inherit;
  text-decoration: none;
}

.mission-row__date {
  flex-shrink: 0;
  width: 3.75rem;
  padding: 0.5rem 0.25rem;
  border-radius: 4px;
  background: var(--color-light-green);
  color: var(--color-dark-green);
  text-align: center;
}

.mission-row__weekday, .mission-row__month {
  display: block;
  font-size: 0.65rem;
  font-weight: bold;
  letter-spacing: 0.03em;
}

.mission-row__day {
  display: block;
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: bold;
  line-height: 1.1;
}

.mission-row__content {
  flex: 1;
  min-width: 0;
}

.mission-row__org {
  margin: 0 0 0.2rem;
  color: var(--color-primary-green);
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.mission-row__title {
  margin: 0 0 0.3rem;
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 0.78rem;
}

.mission-row__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 1.25rem;
  margin: 0;
  color: var(--color-text-muted);
  font-size: 0.85rem;
}

.mission-row__meta--secondary {
  margin-top: 0.35rem;
}

.mission-row__arrow {
  flex-shrink: 0;
  color: var(--color-primary-green);
}

/* ---- Public site: Mission detail ----
   Editorial layout: date block reused as-is from .mission-row, content
   posed directly on the cream background (no .card anywhere), a pale-green
   participation banner as the one piece of emphasis, and a light two-column
   split at the bottom. Organization stays green (part of the mission
   identity elsewhere on the site) but noticeably smaller/lighter than
   .mission-row__org, so the title remains the dominant element. */

.mission-show__back {
  display: inline-block;
  margin-bottom: 1.5rem;
}

.mission-show__header {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.mission-show__header-content {
  flex: 1;
  min-width: 0;
}

.mission-show__organization {
  margin: 0 0 0.25rem;
  color: var(--color-primary-green);
  font-family: var(--font-heading);
  font-size: 0.85rem;
  font-weight: 600;
  overflow-wrap: break-word;
}

.mission-show__title {
  margin: 0 0 0.5rem;
  font-size: 1.6rem;
  overflow-wrap: break-word;
}

@media (min-width: 56rem) {
  .mission-show__title {
    font-size: 2rem;
  }
}

.mission-show__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 1.25rem;
  margin: 0 0 0.5rem;
  color: var(--color-text-muted);
  font-size: 0.95rem;
}

.mission-show__description {
  max-width: 42rem;
  margin: 1.5rem 0;
  line-height: 1.6;
}

.mission-show__participation {
  background: var(--color-light-green);
  border-radius: 4px;
  padding: 1rem 1.25rem;
  margin: 1.5rem 0;
}

.mission-show__participation-count {
  margin: 0 0 0.35rem;
  color: var(--color-dark-green);
  font-weight: 700;
}

.mission-show__participation-notice {
  margin: 0;
  color: var(--color-dark-green);
  font-size: 0.9rem;
}

.mission-show__details {
  margin: 2rem 0;
}

.mission-show__details h2 {
  font-size: 1.05rem;
  margin: 0 0 0.5rem;
}

.mission-show__details > div + div {
  margin-top: 1.5rem;
}

@media (min-width: 56rem) {
  .mission-show__details--split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 2rem;
  }

  .mission-show__details--split > div + div {
    margin-top: 0;
    border-left: 1px solid var(--color-border);
    padding-left: 2rem;
  }
}

/* ---- Public site: how it works / community block ---- */

.how-it-works {
  margin-top: 1.75rem;
  padding: 1.75rem 0;
  background: var(--color-light-green);
}

.how-it-works__intro {
  max-width: 36rem;
}

.how-it-works__steps {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
}

.how-it-works__step {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.how-it-works__step-number {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--color-very-light-cream);
  color: var(--color-dark-green);
  font-family: var(--font-heading);
  font-weight: bold;
}

.how-it-works__step p {
  margin: 0;
}

@media (min-width: 56rem) {
  .how-it-works {
    margin-top: 2.5rem;
    padding: 2.5rem 0;
  }

  .how-it-works__steps {
    flex-direction: row;
    gap: 1.5rem;
    margin-top: 2rem;
  }

  .how-it-works__step {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ---- Public site: territorial illustration ---- */

.ramparts-illustration {
  display: block;
  width: 100%;
  height: auto;
  max-height: 22rem;
  object-fit: cover;
  object-position: center bottom;
}

/* ---- Public site: footer ----
   Two variants of the same <footer>:
   - plain (default): solid background bar, used on every page.
   - `.site-footer--illustrated` (homepage only): the ramparts illustration
     becomes the footer's own background, its green wave standing in for the
     block color. The wave is not a straight edge (it dips lowest around the
     center, under the main rampart wall, and rises generously toward both
     side edges — measured directly from the source image), so the overlaid
     brand/nav content is deliberately kept to the two bottom corners and
     sized compactly, never spanning the thinner middle. */

.site-footer {
  padding: 1.25rem 0;
  background: var(--color-dark-green);
  color: var(--color-light-green);
}

.site-footer__inner {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.site-footer__brand {
  font-family: var(--font-heading);
  font-weight: bold;
  font-size: 1.1rem;
  color: var(--color-very-light-cream);
}

.site-footer__tagline {
  margin: 0.35rem 0 0;
  font-size: 0.9rem;
  color: var(--color-light-green);
}

.site-footer__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.site-footer__nav a {
  color: var(--color-very-light-cream);
  text-decoration: none;
  font-size: 0.9rem;
}

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

@media (min-width: 56rem) {
  .site-footer {
    padding: 1.1rem 0;
  }

  .site-footer__inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
  }

  .site-footer__brand {
    font-size: 1.25rem;
  }
}

.site-footer--illustrated {
  position: relative;
  padding: 0;
  background: none;
}

.site-footer--illustrated .site-footer__inner {
  position: absolute;
  inset: auto 0 0 0;
  flex-direction: row;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0 0.5rem 0.35rem;
}

.site-footer--illustrated .site-footer__brand {
  font-size: 0.75rem;
  line-height: 1.15;
  white-space: nowrap;
}

/* The tagline is a full sentence: on narrow screens, the green band at the
   bottom of the illustration is only ~45-55px tall (measured from the source
   image), nowhere near enough room for it without wrapping up into the
   illustration above. It only reappears once there is genuinely enough
   height to show it on a single comfortable line or two (see min-width:56rem
   below) — brand name + nav stay enough on their own on smaller screens. */
.site-footer--illustrated .site-footer__tagline {
  display: none;
}

.site-footer--illustrated .site-footer__nav {
  flex-direction: column;
  align-items: flex-end;
  gap: 0.1rem;
  font-size: 0.6rem;
  line-height: 1.2;
  text-align: right;
}

.site-footer--illustrated .site-footer__nav a {
  font-size: inherit;
  white-space: nowrap;
}

@media (min-width: 56rem) {
  .site-footer--illustrated .site-footer__inner {
    align-items: flex-end;
    padding: 0 1.5rem 1.5rem;
  }

  .site-footer--illustrated .site-footer__brand {
    font-size: 1.25rem;
  }

  .site-footer--illustrated .site-footer__tagline {
    display: block;
    margin-top: 0.1rem;
    font-size: 0.9rem;
    max-width: 20rem;
    white-space: normal;
  }

  .site-footer--illustrated .site-footer__nav {
    flex-direction: row;
    gap: 1.5rem;
    font-size: 0.95rem;
  }
}


/* ---- Public site: monthly missions calendar (home + /missions) ----
   Visual hierarchy: past days are plain muted digits (no shape); today gets
   a plain underline accent; a day with at least one open/full mission (any
   number of them) sits on a soft pale circle — that circle is the one and
   only "something is happening" signal, no separate dot/count. On /missions
   the selected day uses a solid dark circle with cream text instead, so a
   selection is visually distinct from the plain "has missions" state.

   The calendar (and, on /missions, the results below it) sits inside a
   <turbo-frame> so that picking a day or changing month swaps just that
   region in place instead of a full page visit — no scroll jump, no
   momentary blank page. Browsers render an unknown element as inline by
   default, so it needs an explicit block display to behave like a normal
   container. */

turbo-frame {
  display: block;
}

.calendar {
  max-width: 20rem;
  margin: 0 auto;
  padding: 1rem;
  background: var(--color-very-light-cream);
  border: 1px solid var(--color-border);
  border-radius: 12px;
}

.calendar__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.calendar__month {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-dark-green);
}

.calendar__nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  color: var(--color-text-muted);
  font-size: 1.25rem;
  line-height: 1;
  text-decoration: none;
}

.calendar__nav:hover {
  color: var(--color-primary-green);
}

.calendar__nav--placeholder {
  visibility: hidden;
}

.calendar__weekdays,
.calendar__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}

.calendar__weekdays {
  margin-bottom: 0.4rem;
}

.calendar__weekday {
  text-align: center;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--color-text-muted);
}

.calendar__grid {
  row-gap: 0.4rem;
  column-gap: 0.1rem;
}

.calendar__day {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  font-size: 0.8rem;
  color: var(--color-text);
  text-decoration: none;
}

.calendar__day--empty {
  visibility: hidden;
}

.calendar__day--past {
  color: var(--color-text-muted);
  opacity: 0.6;
}

.calendar__day--today {
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 0.2rem;
}

.calendar__day--has-missions {
  background: var(--color-light-green);
  border-radius: 50%;
}

.calendar__day--selected {
  background: var(--color-primary-green);
  border-radius: 50%;
  color: var(--color-very-light-cream);
}

.calendar__reset-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
  margin-top: 0.6rem;
}

.calendar__reset {
  display: inline-block;
  font-size: 0.85rem;
  font-weight: 600;
}