html {
  font-size: 16px; /* Just a little insanity to _try_ and ensure a nice experience using rem  */
}

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

:root {
  /* Colors */
  --white: #ffffff;
  --dark-white: #f8f8f8;
  --light-gray: #dcdcdc;
  --gray: #c3c0c0;
  --dark-gray: #666;
  --black: #1b1b1b;
  --red: #c12a3d;
  --dark-red: #7f1c29;
  --pink: #eea5b3;
  --meadows-pink: #d275b6;
  --brown: #9b590d;
  --dark-brown: #744a1a;
  --spring-green: #93b73b;
  --navy: #1f3558;
  --dark-blue: #111f36;

  /* Numbers */
  --plot-size: 34px;
  --plot-gap: 3px;
  --plot-bdr: 1px;

  --neg-one-px: -0.063rem;
  --one-px: 0.063rem;
  --two-px: 0.125rem;
  --six-px: 0.375rem;
  --eight-px: 0.5rem;
  --ten-px: 0.625rem;
  --twelve-px: 0.75rem;
  --fourteen-px: 0.875rem;
  --sixteen-px: 1rem;
  --eighteen-px: 1.125rem;
  --twenty-four-px: 1.5rem;
  --thirty-px: 1.875rem;
  --thirty-four-px: 2.125rem;
  --fifty-sixty-px: 3.5rem;
  --eighty-px: 5rem;
}

html,
body {
  margin: 0;
  background: var(--spring-green);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial,
    sans-serif;
  min-height: 100%;
}

html {
  background: linear-gradient(
    160deg,
    #dff6d0 0%,
    #b7e3a0 25%,
    #93b73b 60%,
    #f3e7d1 100%
  );
  background-repeat: no-repeat;
  background-size: 100% 100%; /* resize with page height */
  /* background-attachment: scroll;  default; ensures it’s not fixed */
}

body {
  background: none;
}

body.modal-open {
  overflow: hidden;
}

@supports selector(body:has(*)) {
  body:has(#feedback-modal[aria-hidden='false']) {
    overflow: hidden;
  }
}

@supports selector(body:has(*)) {
  body:has(#plot-modal[aria-hidden='false']) {
    overflow: hidden;
  }
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: var(--pink);
  color: var(--black);
  box-shadow: 0 var(--one-px) 0 rgba(0, 0, 0, 0.12),
    inset 0 var(--neg-one-px) 0 rgba(0, 0, 0, 0.06);
}
.site-header__inner {
  height: var(--fifty-sixty-px);
  max-width: min(1200px, 95vw);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--twelve-px);
  font-weight: 700;
}

@supports (backdrop-filter: blur(6px)) {
  header.site-header {
    backdrop-filter: blur(6px);
  }
}

.wrap {
  max-width: min(1200px, 95vw);
  margin: var(--twenty-four-px) auto var(--eighty-px);
}

/* Panels */
.panel {
  border: none;
  display: block;
  margin: var(--ten-px) 0;
}
.panel > summary {
  padding: var(--twelve-px);
  border-radius: var(--fourteen-px);
  cursor: pointer;
  list-style: none;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: var(--ten-px);
  box-shadow: 0 var(--one-px) 0 rgba(0, 0, 0, 0.12),
    inset 0 0 0 var(--one-px) var(--dark-white);
  user-select: none;
}
.panel > summary::-webkit-details-marker {
  display: none;
}
.panel > summary::before {
  content: '▸';
  display: inline-block;
  transform-origin: center;
  transition: transform 0.2s ease;
}

@media (prefers-reduced-motion: reduce) {
  .panel > summary::before {
    transition: none;
  }
}

.panel[open] > summary::before {
  transform: rotate(90deg);
}

.panel-body {
  padding: var(--eight-px) var(--six-px) var(--six-px) var(--fourteen-px);
  margin-top: var(--six-px);
  border-left: var(--two-px) solid var(--light-gray);
  border-radius: 0 0 var(--fourteen-px) var(--fourteen-px);
}

.panel .panel-body {
  position: relative;
}
.panel .panel-body::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 12px;
  pointer-events: none;
}
.panel .panel-body:hover {
  cursor: auto;
}
.panel .panel-body:hover::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 12px;
  background: rgba(0, 0, 0, 0.03);
  pointer-events: none;
}

.meadows-summary {
  background-color: var(--meadows-pink);
}

.greenhouse-summary {
  background-color: #60752a;
  color: #dcdcdc;
}
.resort-summary {
  background-color: #2b72b7;
  color: var(--white);
}
.swamp-summary {
  background-color: #419495;
}
.gemstone-summary {
  background-color: #a54724;
  color: var(--white);
}
.hothead-summary {
  background-color: #492266;
  color: var(--white);
}
.reef-summary {
  background-color: #72d0f1;
}
.cloud-summary {
  background-color: #a79ccc;
}
.extremophiles-summary {
  background-color: #871603;
  color: var(--white);
}
.caldera-summary {
  background-color: #fb7c2a;
}
.peak-summary {
  background-color: #ffffff;
}
.caves-summary {
  background-color: #915f50;
  color: var(--white);
}
.moon-summary {
  background-color: #d7e4a3;
}
.wheatflour-summary {
  background-color: #e8cc5c;
}

/* Toolbar */
.toolbar {
  display: flex;
  gap: var(--twelve-px);
  align-items: center;
  margin: var(--eight-px) 0 var(--ten-px);
}

.toolbar small {
  opacity: 0.8;
}

/* Grid containers */
.grid {
  --cols: 24; /* updated by JS to match plot layout widths */
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, var(--plot-size)));
  gap: var(--plot-gap);
  align-items: start;
  justify-content: start;
  padding: var(--six-px);
  background: transparent;
  grid-auto-rows: max-content;
}

.field-mini {
  margin-top: var(--sixteen-px);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, var(--plot-size)));
  gap: var(--two-px);
  width: fit-content;
}

/* plots */
.plot {
  width: var(--plot-size);
  height: var(--plot-size);
  background: var(--brown);
  border: var(--plot-bdr) solid var(--dark-brown);
  box-sizing: border-box;
  border-radius: var(--two-px);
  padding: var(--two-px);
  outline: none;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: var(--twelve-px);
  line-height: 1;
  user-select: none;
  overflow: hidden;
  position: relative;
}

.plot:hover {
  box-shadow: 0 0 0 var(--two-px) #00000010 inset;
  cursor: pointer;
}

/* Planned / disabled look: keep color, add subtle “grayed + hatched” overlay */
.plot--planned {
  filter: saturate(0.6) contrast(0.95);
}
.plot--planned::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* soft diagonal hatch with semi-transparent light bands */
  background-image: repeating-linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.3) 0 8px,
    rgba(255, 255, 255, 0.1) 8px 16px
  );
}

.plot--locked {
  opacity: 0.35;
  filter: grayscale(0.5) saturate(0.6);
  cursor: not-allowed;
  pointer-events: none; /* prevents click -> no modal */
  position: relative;
}
.plot--locked::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.5) 0 6px,
    rgba(255, 255, 255, 0.2) 6px 12px
  );
  pointer-events: none;
}

/* Inline checkbox row tidy-up */
.form-row--inline .checkbox-label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
}
.form-row--inline input[type='checkbox'] {
  inline-size: 1rem;
  block-size: 1rem;
}

/* Modal */
.modal[aria-hidden='true'] {
  display: none;
}

.modal[aria-hidden='false'] {
  display: block;
}

.modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
}

.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
}

.modal-dialog {
  position: relative;
  max-width: 420px;
  margin: 10vh auto 0;
  background: var(--white);
  border-radius: var(--twelve-px);
  box-shadow: 0 var(--ten-px) var(--white) rgba(0, 0, 0, 0.2);
  padding: var(--sixteen-px);
}

.modal-dialog h2 {
  margin: 0 0 var(--ten-px);
  font-size: var(--eighteen-px);
}

.modal-dialog,
.modal-content,
.modal .panel,
.modal .panel-body {
  max-height: min(90vh, 48rem);
  overflow: auto;
}
#help-modal .modal-footer {
  display: flex;
  gap: 0.5rem;
  justify-content: space-around;
}

.form-row {
  display: grid;
  gap: var(--six-px);
  margin-bottom: var(--ten-px);
}

.form-row .checkbox {
  display: inline-flex;
  align-items: center;
  gap: var(--eight-px);
  font-weight: 600;
}

.form-row label small {
  font-weight: 400;
  color: var(--dark-gray);
  margin-left: var(--six-px);
}
.form-error {
  color: var(--red);
  margin: var(--six-px) 0 0;
  min-height: var(--sixteen-px);
}

.modal-actions {
  display: flex;
  justify-content: space-between;
  margin-top: var(--twelve-px);
}

.modal-actions #plot-clear {
  background: var(--red);
  color: var(--white);
  border-color: var(--navy);
}
.form-actions #plot-submit {
  background: var(--navy);
  color: var(--white);
  border-color: var(--navy);
}

/* Basic modal shell (reuses your palette) */
#feedback-modal[aria-hidden='false'] {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(0, 0, 0, 0.35);
  z-index: 1000;
}

#help-modal[aria-hidden='false'] {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background: rgba(0, 0, 0, 0.35);
  z-index: 1000;
}

#faqs-modal[aria-hidden='false'] {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background: rgba(0, 0, 0, 0.35);
  z-index: 1000;
}

#tips-modal[aria-hidden='false'] {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background: rgba(0, 0, 0, 0.35);
  z-index: 1000;
}

#feedback-modal[aria-hidden='true'] {
  display: none;
}

#feedback-modal .modal-content {
  width: min(640px, 92vw);
  max-height: 90vh;
  overflow: auto;
  background: var(--white);
  border-radius: 0.75rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
  padding: 1rem 1rem 0.75rem;
}

#feedback-modal .modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}

#feedback-modal .close-feedback {
  border: 0;
  background: transparent;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
}

#feedback-form .form-row {
  margin: 0.75rem 0;
}
#feedback-form .two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}
#feedback-form input,
#feedback-form textarea {
  width: 100%;
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--light-gray);
  border-radius: 0.5rem;
  font: inherit;
}
#feedback-form .modal-actions {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
  margin-top: 0.75rem;
  padding-top: 0.5rem;
}

label:has(+ select:required):after {
  content: ' *';
  color: var(--red);
}

select:disabled {
  opacity: 0.6;
  filter: grayscale(0.3);
  cursor: not-allowed;
}

/* Placeholder for empty sections */
.placeholder {
  padding: var(--eight-px) var(--ten-px);
  border: var(--one-px) dashed var(--light-gray);
  border-radius: var(--eight-px);
  color: var(--dark-gray);
  font-size: var(--fourteen-px);
}

.option-not-allowed {
  font-style: italic;
  opacity: 0.85;
}

.site-footer {
  border-top: var(--one-px) solid var(--light-gray);
  color: var(--navy);
  display: flex;
  font-size: var(--fourteen-px);
  justify-content: center;
  margin-top: var(--thirty-two);
  padding: var(--sixteen-px) 0;
}

.site-footer p {
  display: flex;
  justify-content: space-between;
  width: 40rem;
}

.flower-code {
  font-weight: 700;
  font-family: i-monospace, SFMono-Regular, Menlo;
}

.flower-species-name {
  font-family: i-monospace, SFMono-Regular, Menlo;
}

.make-center {
  display: flex;
  justify-content: center;
}

.btn {
  border: 1px solid;
  border-radius: var(--ten-px);
  cursor: pointer;
  font-weight: 700;
  padding: var(--ten-px) var(--twelve-px);
}

.btn:hover {
  cursor: pointer;
}

.btn-primary {
  background: var(--dark-white);
  border-color: var(--light-gray);
  color: var(--black);
}

.btn-primary:hover {
  background: var(--gray);
  border-color: var(--gray);
}

.btn-cancel {
  background: var(--red);
  border-color: var(--red);
  color: var(--white);
}

.btn-cancel:hover {
  background: var(--dark-red);
  border-color: var(--dark-red);
}

.btn-submit {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--white);
}

.btn-submit:hover {
  background: var(--dark-blue);
  border-color: var(--dark-blue);
}

.on-white {
  background: var(--light-gray);
  border-color: var(--light-gray);
}

.on-white:hover {
  background: var(--gray);
  border-color: var(--gray);
}

.btn:disabled,
.btn[aria-disabled='true'] {
  opacity: 0.5;
  pointer-events: none;
  filter: grayscale(0.2);
  cursor: not-allowed;
}