/*
  styles.css — the handful of things Tailwind utility classes can't say cleanly.

  Almost all of the look lives as Tailwind classes directly on the HTML (in
  index.html) and in the HTML that app.js builds. Tailwind is loaded via a
  <script> tag in index.html — no install, no build step.

  The colour rule, repeated here because it is easy to break by accident:
  GREEN MEANS FRESH. Green appears on the freshness dots, the "updated this
  week" total and the dot in the logo. Nowhere else.

  What's left in here:
    1. The page width — one place that decides how wide the site is.
    2. The filter tags and the filter lists.
    3. The listing table: row rules, hover, and the expanded detail row.
    4. Dense-table reading comfort (tabular numbers, no text ballooning).
*/

/* ---------------------------------------------------------------------------
   1. Page width
   Every full-width band on the page (header, main, footer) puts its contents
   in one of these, so the site has ONE width and it is changed in ONE place.

   max-width is the widest the content ever gets on a big monitor; past that it
   centres rather than stretching forever. The side padding grows with the
   screen so the text never touches the edge. On a phone, the max-width never
   comes into play — the screen is narrower than it — so all a phone sees is
   the 1rem of padding.

   To make the site narrower or wider, change the one number below.
--------------------------------------------------------------------------- */
.page {
  width: 100%;
  max-width: 100rem;      /* 1600px */
  margin-inline: auto;
  padding-inline: 1rem;   /* phones */
}

@media (min-width: 640px) {
  .page { padding-inline: 1.5rem; }
}

@media (min-width: 1024px) {
  .page { padding-inline: 2.5rem; }
}

/* ---------------------------------------------------------------------------
   2. Filter tags
   The filter tags sit above the table. They aren't green — they aren't freshness.
--------------------------------------------------------------------------- */
/* A filter currently switched on, shown above the table. Click to remove. */
.filter-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.125rem 0.5rem;
  font-size: 0.75rem;
  font-weight: 500;
  border-radius: 0.25rem;
  border: 1px solid #ead9c4;
  background: #f2e9dc;
  color: #1b3328;
  cursor: pointer;
  transition: border-color 0.12s ease, background-color 0.12s ease;
}

.filter-tag:hover {
  border-color: #c2703c;
  background: #f4ddcb;
}

.filter-tag:focus-visible {
  outline: 2px solid #c2703c;
  outline-offset: 1px;
}

/* Dark mode: theme.js puts the class "dark" on <html>. */
html.dark .filter-tag { border-color: #1b3328; background: #122117; color: #d6e0db; }
html.dark .filter-tag:hover { border-color: #c2703c; background: #1b3328; }

/* The filter panel's heading is a <summary>, which browsers draw with their
   own little triangle. We draw our own chevron instead, so theirs is hidden. */
#filter-panel > summary {
  list-style: none;
}

#filter-panel > summary::-webkit-details-marker {
  display: none;
}

/* The chevron points down when shut and up when open. */
#filter-panel[open] > summary svg {
  transform: rotate(180deg);
}

/* A long facet list (container sizes, grades) scrolls inside a fixed height.
   The browser draws that scrollbar ON TOP of the content on Windows, which
   covered the count at the right-hand end of each row. The padding keeps the
   counts clear of it, and scrollbar-gutter reserves the space up front so the
   list doesn't shift sideways the moment it becomes scrollable. */
.facet ul {
  padding-right: 0.625rem;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
}

/* ---------------------------------------------------------------------------
   3. The listing table
   One row per listing, so the rows need to be scannable in bulk: a hairline
   between them, a clear hover, and an obvious open state when a row is
   showing its contact details.
--------------------------------------------------------------------------- */
.listing-row {
  border-top: 1px solid #eef2f0;
  cursor: pointer;
  transition: background-color 0.1s ease;
}

/* The first row sits directly under the header rule, which already draws a
   line, so it doesn't need one of its own. */
tbody .listing-row:first-child {
  border-top: 0;
}

.listing-row:hover {
  background: #f8f8f5;
}

.listing-row:focus-visible {
  outline: 2px solid #c2703c;
  outline-offset: -2px;
}

/* An open row and its detail strip read as one block. */
.listing-row.is-open {
  background: #f8f8f5;
}

.listing-row.is-open td {
  padding-bottom: 0.375rem;
}

.detail-row td {
  border-top: 0;
}

/* Dark mode: theme.js puts the class "dark" on <html>. */
html.dark .listing-row { border-top-color: #122117; }
html.dark .listing-row:hover,
html.dark .listing-row.is-open { background: rgba(6, 15, 10, 0.5); }

/* ---------------------------------------------------------------------------
   4. Reading comfort in a dense table
   Numbers line up in columns only if every digit is the same width, and a
   long botanical name must not be allowed to stretch a column.
--------------------------------------------------------------------------- */
.tabular-nums {
  font-variant-numeric: tabular-nums;
}

table {
  /* Stops one long cell from deciding the width of the whole table. */
  table-layout: auto;
}

/* On a phone the table keeps four columns — plant, quantity, price, updated —
   and everything else (nursery, container, specs, grade) rides along under
   the plant name. That fits a phone screen without sideways scrolling, and
   the numbers a buyer compares stay lined up in columns. */

/* Anyone who has asked their system to reduce motion gets no transitions. */
@media (prefers-reduced-motion: reduce) {
  .filter-tag,
  .listing-row {
    transition: none;
  }
}

/* ---------------------------------------------------------------------------
   Front page doors (index.html)
   The five round icons under the search box. Clay, not green, on hover:
   green is kept for freshness.
--------------------------------------------------------------------------- */
.door {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  width: 6.5rem;
  text-align: center;
  border-radius: 1rem;
  outline: none;
}

.door-circle {
  display: grid;
  place-items: center;
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 9999px;
  background: #fff;
  border: 1px solid #d6e0db;          /* ink-100 */
  color: #1b3328;                     /* ink-700 */
  box-shadow: 0 1px 2px rgb(11 23 16 / 0.06);
  transition: transform 150ms, border-color 150ms, color 150ms, background 150ms;
}

.door-circle svg {
  width: 2rem;
  height: 2rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.door-label {
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.25;
  color: #24402f;                     /* ink-600 */
}

.door:hover .door-circle,
.door:focus-visible .door-circle {
  transform: translateY(-2px);
  border-color: #c2703c;              /* clay-500 */
  color: #a95c2d;                     /* clay-600 */
  background: #fbf1e9;                /* clay-50 */
}

.door:focus-visible .door-circle { box-shadow: 0 0 0 3px #e0a877; } /* clay-300 */

/* Dark mode: theme.js puts the class "dark" on <html>. */
html.dark .door-circle { background: #122117; border-color: #24402f; color: #d6e0db; }
html.dark .door-label { color: #d6e0db; }
html.dark .door:hover .door-circle,
html.dark .door:focus-visible .door-circle { background: #1b3328; color: #e0a877; }

@media (min-width: 640px) {
  .door { width: 8.5rem; }            /* every label fits on one line */
  .door-circle { width: 5rem; height: 5rem; }
}

@media (max-width: 639px) {
  .door { width: 5.5rem; }
  .door-circle { width: 4rem; height: 4rem; }
  .door-circle svg { width: 1.75rem; height: 1.75rem; }
}

/* ---------------------------------------------------------------------------
   Sign in page (signin.html)
   Cards, fields and buttons for signin.html and signup.html.
--------------------------------------------------------------------------- */
.auth-card {
  background: #fff;
  border: 1px solid #d6e0db;          /* ink-100 */
  border-radius: 1rem;
  padding: 1.75rem;
}

.auth-label { display: block; font-size: 0.875rem; font-weight: 500; color: #24402f; }

.auth-input {
  margin-top: 0.375rem;
  width: 100%;
  border: 1px solid #d6e0db;
  border-radius: 0.5rem;
  padding: 0.625rem 0.75rem;
  background: #fff;
  font-size: 1rem;
}
.auth-input:focus { outline: none; border-color: transparent; box-shadow: 0 0 0 2px #c2703c; }

.auth-button {
  width: 100%;
  border-radius: 9999px;
  padding: 0.75rem 1rem;
  font-size: 0.9375rem;
  font-weight: 600;
  background: #0b1710;                /* ink-900 */
  color: #f8f8f5;                     /* cream */
  transition: background 150ms;
}
.auth-button:hover { background: #1b3328; }
.auth-button:focus-visible { outline: none; box-shadow: 0 0 0 3px #e0a877; }

.auth-link { color: #a95c2d; font-weight: 500; }
.auth-link:hover { text-decoration: underline; }


/* Dark mode: theme.js puts the class "dark" on <html>. */
html.dark .auth-card { background: #122117; border-color: #24402f; }
html.dark .auth-label { color: #d6e0db; }
html.dark .auth-input { background: #0b1710; border-color: #24402f; color: #f5f5f4; }
html.dark .auth-button { background: #f8f8f5; color: #0b1710; }
html.dark .auth-button:hover { background: #f2e9dc; }
html.dark .auth-link { color: #e0a877; }

/* Second-choice button: same shape, outlined instead of filled. */
.auth-button-outline { background: transparent; color: #0b1710; border: 1px solid #0b1710; }
.auth-button-outline:hover { background: #f2e9dc; }
/* Dark mode: theme.js puts the class "dark" on <html>. */
html.dark .auth-button-outline { background: transparent; color: #f8f8f5; border-color: #f8f8f5; }
html.dark .auth-button-outline:hover { background: #1b3328; }

/* ---------------------------------------------------------------------------
   Sign-up steps (signup.html)
   One question per screen, answered by clicking a big round choice. The
   round choices reuse the front page's .door styles.
--------------------------------------------------------------------------- */
.step { text-align: center; }
.step[hidden] { display: none; }
.step .auth-card { text-align: left; }   /* forms read left to right */

.step-title {
  font-family: Fraunces, ui-serif, Georgia, serif;
  font-weight: 600;
  font-size: 2.25rem;
  letter-spacing: -0.02em;
}

.choice-row {
  margin-top: 2.5rem;
  display: flex;
  justify-content: center;
  gap: 2.5rem;
}

/* The answer circles are bigger than the front page's. */
.choice-row .door { width: 8rem; }
.choice-row .door-circle { width: 7rem; height: 7rem; }
.choice-row .door-circle svg { width: 2.75rem; height: 2.75rem; }
.choice-row .door-label { font-size: 1rem; font-weight: 600; }

.step-back {
  display: inline-block;
  margin-top: 2.5rem;
  font-size: 0.875rem;
  color: #4a6b5a;                     /* ink-400 */
}
.step-back::before { content: "\2190  "; }   /* a left arrow */
.step-back:hover { color: #a95c2d; text-decoration: underline; }

/* Dark mode: theme.js puts the class "dark" on <html>. */
html.dark .step-back { color: #bccdc4; }
html.dark .step-back:hover { color: #e0a877; }

@media (max-width: 639px) {
  .step-title { font-size: 1.875rem; }
  .choice-row { gap: 1.5rem; }
}

/* ---------------------------------------------------------------------------
   Spec boxes in the directory's filter rail: a small number box, then its
   unit (a ft/in choice for height and spread, fixed text for the others).
--------------------------------------------------------------------------- */
.spec-input {
  width: 4rem;
  padding: 0.25rem 0.4rem;
  border: 1px solid #d6e0db;
  border-radius: 0.375rem;
  background: #fff;
  font-size: 13px;
  text-align: right;
}
.spec-input:focus { outline: none; border-color: transparent; box-shadow: 0 0 0 2px #c2703c; }

.spec-unit {
  width: 3rem;
  padding: 0.25rem 0.25rem;
  border: 1px solid #d6e0db;
  border-radius: 0.375rem;
  background: #fff;
  font-size: 12px;
}
.spec-unit-fixed { width: 3rem; padding-left: 0.4rem; font-size: 12px; color: #4a6b5a; }

/* Dark mode: theme.js puts the class "dark" on <html>. */
html.dark .spec-input,
html.dark .spec-unit { background: #0b1710; border-color: #24402f; color: #f5f5f4; }
html.dark .spec-unit-fixed { color: #bccdc4; }

/* Tick boxes in the filter rail: clay when ticked, except "Updated this
   week", which is about freshness and so gets the green. */
.facet input[type="checkbox"] { accent-color: #a95c2d; }
#fresh-only { accent-color: #16a34a; }

/* Phones and tablets zoom the whole page in when you tap a box whose text is
   smaller than 16px, and don't zoom back out. On any touch screen, boxes get 16px text. */
@media (max-width: 639px), (pointer: coarse) {
  .spec-input, .spec-unit, #sort, #search { font-size: 16px; }
}

/* When "Show listings" scrolls down to the results, leave a little room above. */
#count { scroll-margin-top: 0.75rem; }

/* ---------------------------------------------------------------------------
   Accounts: messages on the sign-in pages, the account corner in every
   header, and the account page (account.html).
--------------------------------------------------------------------------- */

/* Something went wrong with what was typed. */
.auth-error { font-size: 0.875rem; font-weight: 500; color: #8a4a22; }      /* clay-700 */

/* A quiet boxed note: "this is a preview", "password changed". */
.auth-note {
  border: 1px solid #e0a877;          /* clay-300 */
  background: #fbf1e9;                /* clay-50 */
  border-radius: 0.5rem;
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  color: #8a4a22;
}
.auth-note[hidden] { display: none; }

/* Small grey help under a field. */
.auth-hint { margin-top: 0.375rem; font-size: 0.8125rem; color: #4a6b5a; }  /* ink-400 */

/* The one-click demo accounts on signin.html. */
.demo-button {
  border: 1px solid #d6e0db;
  border-radius: 0.5rem;
  padding: 0.625rem 0.75rem;
  font-size: 0.9375rem;
  font-weight: 500;
  background: #f8f8f5;
  transition: border-color 150ms, color 150ms;
}
.demo-button:hover { border-color: #c2703c; color: #8a4a22; }
.demo-button:focus-visible { outline: none; box-shadow: 0 0 0 3px #e0a877; }

/* Top-right of every page: "Sign in", or your name and "Sign out". */
.account-corner { display: flex; align-items: center; gap: 0.75rem; min-width: 0; }

.corner-button {
  flex-shrink: 0;
  font-size: 0.875rem;
  font-weight: 500;
  padding: 0.5rem 1rem;
  border-radius: 9999px;
  border: 1px solid #bccdc4;          /* ink-200 */
  color: #122117;
  white-space: nowrap;
  transition: border-color 150ms, color 150ms;
}
.corner-button:hover { border-color: #c2703c; color: #8a4a22; }
.corner-button:focus-visible { outline: none; box-shadow: 0 0 0 2px #c2703c; }

.corner-name {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  font-size: 0.875rem;
  font-weight: 500;
}
.corner-name:hover .corner-text { color: #8a4a22; text-decoration: underline; }
.corner-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 14rem; }

/* The round letter that stands in for a profile picture. */
.corner-initial,
.account-initial {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  background: #f2e9dc;                /* sand */
  color: #122117;
  font-weight: 600;
}
.corner-initial { width: 2rem; height: 2rem; font-size: 0.875rem; }
.account-initial { width: 4rem; height: 4rem; font-size: 1.75rem; font-family: Fraunces, ui-serif, Georgia, serif; }

/* Buttons on the account page hug their words instead of filling the row. */
.account-button-small { width: auto; padding: 0.625rem 1.25rem; font-size: 0.875rem; text-align: center; }

.account-button-danger { color: #8a4a22; border-color: #e0a877; }
.account-button-danger:hover { background: #fbf1e9; }
.account-button-danger-solid { background: #8a4a22; color: #f8f8f5; }
.account-button-danger-solid:hover { background: #a95c2d; }

/* Dark mode: theme.js puts the class "dark" on <html>. */
html.dark .auth-error { color: #e0a877; }
html.dark .auth-note { background: #0b1710; border-color: #8a4a22; color: #e0a877; }
html.dark .auth-hint { color: #bccdc4; }
html.dark .demo-button { background: #0b1710; border-color: #24402f; color: #f5f5f4; }
html.dark .demo-button:hover { border-color: #e0a877; color: #e0a877; }
html.dark .corner-button { border-color: #1b3328; color: #e7e5e4; }
html.dark .corner-button:hover { border-color: #c2703c; color: #e0a877; }
html.dark .corner-name:hover .corner-text { color: #e0a877; }
html.dark .corner-initial,
html.dark .account-initial { background: #1b3328; color: #f5f5f4; }
html.dark .account-button-danger { color: #e0a877; border-color: #8a4a22; }
html.dark .account-button-danger:hover { background: #1b3328; }
html.dark .account-button-danger-solid { background: #c2703c; color: #0b1710; }
html.dark .account-button-danger-solid:hover { background: #e0a877; }

/* On a phone the name would crowd the wordmark: keep just the round letter. */
@media (max-width: 639px) {
  .corner-text { display: none; }
}

/* ---------------------------------------------------------------------------
   Grower inventory (inventory.html)
   Each listing is a row on a wide screen and a small card on a phone.
--------------------------------------------------------------------------- */
.inventory-list {
  background: #fff;
  border: 1px solid #d6e0db;          /* ink-100 */
  border-radius: 1rem;
  overflow: hidden;
}
.inventory-list > .auth-card { border: 0; }

.inventory-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem 1rem;
  align-items: center;
  padding: 1rem 1.25rem;
}
.inventory-row + .inventory-row { border-top: 1px solid #d6e0db; }
.inventory-row > :first-child,
.inventory-fresh,
.inventory-actions,
.inventory-confirm,
.inventory-row-error { grid-column: 1 / -1; }

/* Quantity and price: a small label over a box you can type in. */
.inventory-field { display: block; }
.inventory-field-label {
  display: block;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #4a6b5a;
}
.inventory-input { margin-top: 0.25rem; padding: 0.5rem 0.625rem; font-variant-numeric: tabular-nums; }

.inventory-fresh { display: flex; align-items: center; gap: 0.5rem; font-size: 0.8125rem; }

.inventory-actions,
.inventory-confirm { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.inventory-actions[hidden],
.inventory-confirm[hidden],
#photo-add[hidden] { display: none; }

/* On a wide screen the same pieces sit in one line. */
@media (min-width: 1024px) {
  .inventory-row { grid-template-columns: minmax(0, 1fr) 6.5rem 7.5rem 11rem 17rem; }
  .inventory-row > :first-child,
  .inventory-fresh,
  .inventory-actions,
  .inventory-confirm { grid-column: auto; }
  .inventory-actions,
  .inventory-confirm { justify-content: flex-end; }
  /* The remove question takes the buttons' place, in the last column. */
  .inventory-confirm { grid-column: 5; }
}

/* The small buttons on a row. */
.row-button {
  border: 1px solid #bccdc4;          /* ink-200 */
  border-radius: 9999px;
  padding: 0.375rem 0.875rem;
  font-size: 0.8125rem;
  font-weight: 500;
  white-space: nowrap;
  transition: border-color 150ms, color 150ms, background 150ms;
}
.row-button:hover { border-color: #c2703c; color: #8a4a22; }
.row-button:focus-visible { outline: none; box-shadow: 0 0 0 2px #c2703c; }
.row-button:disabled { opacity: 0.45; cursor: default; border-color: #d6e0db; color: inherit; }
.row-button-main { background: #0b1710; border-color: #0b1710; color: #f8f8f5; }
.row-button-main:hover { background: #1b3328; border-color: #1b3328; color: #f8f8f5; }
.row-button-main:disabled { background: transparent; color: inherit; }
.row-button-danger { background: #8a4a22; border-color: #8a4a22; color: #f8f8f5; }
.row-button-danger:hover { background: #a95c2d; color: #f8f8f5; }

.auth-button:disabled { opacity: 0.45; cursor: default; }

/* Grade tick boxes drawn as pills: the whole pill is the target. */
.grade-tick { cursor: pointer; }
.grade-tick input { position: absolute; opacity: 0; width: 0; height: 0; }
.grade-tick span {
  display: inline-block;
  border: 1px solid #bccdc4;
  border-radius: 9999px;
  padding: 0.375rem 0.875rem;
  font-size: 0.8125rem;
  transition: border-color 150ms, background 150ms;
}
.grade-tick:hover span { border-color: #c2703c; }
.grade-tick input:checked + span { background: #0b1710; border-color: #0b1710; color: #f8f8f5; }
.grade-tick input:focus-visible + span { box-shadow: 0 0 0 2px #c2703c; }

/* A photo in the listing form, with the day it was added and a remove X. */
.photo-thumb { position: relative; width: 6rem; }
.photo-thumb img { width: 6rem; height: 6rem; object-fit: cover; border-radius: 0.5rem; border: 1px solid #d6e0db; }
.photo-thumb figcaption { margin-top: 0.25rem; font-size: 0.6875rem; color: #4a6b5a; text-align: center; }
.photo-thumb button {
  position: absolute;
  top: -0.5rem;
  right: -0.5rem;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 9999px;
  background: #0b1710;
  color: #f8f8f5;
  line-height: 1;
}
.photo-thumb button:hover { background: #8a4a22; }

/* "Saved." at the bottom of the screen for a moment. */
.toast {
  position: fixed;
  left: 50%;
  bottom: 1.5rem;
  transform: translateX(-50%);
  max-width: calc(100vw - 2rem);
  background: #0b1710;
  color: #f8f8f5;
  border-radius: 9999px;
  padding: 0.625rem 1.25rem;
  font-size: 0.875rem;
  font-weight: 500;
  box-shadow: 0 6px 20px rgba(11, 23, 16, 0.25);
  z-index: 20;
}
.toast[hidden] { display: none; }

/* Dark mode: theme.js puts the class "dark" on <html>. */
html.dark .inventory-list { background: #122117; border-color: #24402f; }
html.dark .inventory-row + .inventory-row { border-top-color: #24402f; }
html.dark .inventory-field-label { color: #bccdc4; }
html.dark .row-button { border-color: #24402f; }
html.dark .row-button:hover { border-color: #c2703c; color: #e0a877; }
html.dark .row-button:disabled { border-color: #24402f; }
html.dark .row-button-main { background: #f8f8f5; border-color: #f8f8f5; color: #0b1710; }
html.dark .row-button-main:hover { background: #f2e9dc; border-color: #f2e9dc; color: #0b1710; }
html.dark .row-button-main:disabled { background: transparent; border-color: #24402f; color: inherit; }
html.dark .row-button-danger { background: #c2703c; border-color: #c2703c; color: #0b1710; }
html.dark .row-button-danger:hover { background: #e0a877; color: #0b1710; }
html.dark .grade-tick span { border-color: #24402f; }
html.dark .grade-tick input:checked + span { background: #f8f8f5; border-color: #f8f8f5; color: #0b1710; }
html.dark .photo-thumb img { border-color: #24402f; }
html.dark .photo-thumb figcaption { color: #bccdc4; }
html.dark .photo-thumb button { background: #f8f8f5; color: #0b1710; }
html.dark .toast { background: #f8f8f5; color: #0b1710; }

/* A hidden card stays hidden even when a layout class sets its display. */
.auth-card[hidden] { display: none; }

/* ---------------------------------------------------------------------------
   One shape rule for the whole site:
     buttons and tags are pills, cards are 16px, boxes you type in are 8px.
   .data-card is a card that holds a table or a list of filters, so it has
   no padding of its own.
--------------------------------------------------------------------------- */
.data-card {
  background: #fff;
  border: 1px solid #d6e0db;          /* ink-100 */
  border-radius: 1rem;
  overflow: hidden;
}
.data-card.overflow-x-auto { overflow-x: auto; }
.filter-tag { border-radius: 9999px; padding: 0.1875rem 0.625rem; }
.spec-input, .spec-unit { border-radius: 0.5rem; }

/* A nursery's name in a listing row: a link to the grower's page. */
.grower-link { color: #122117; text-decoration: underline; text-decoration-color: #bccdc4; text-underline-offset: 2px; }
.grower-link:hover { color: #8a4a22; text-decoration-color: #c2703c; }

/* Rows on a grower's page: a hairline between them, like the directory. */
.profile-row + .profile-row { border-top: 1px solid #eef2f0; }

/* "Inquiries" beside the name in the account corner, with a count when a
   reply is waiting. */
.corner-link { font-size: 0.875rem; font-weight: 500; white-space: nowrap; }
.corner-link:hover { color: #8a4a22; text-decoration: underline; }
.corner-count,
.new-mark {
  display: inline-block;
  border-radius: 9999px;
  background: #a95c2d;                /* clay-600 */
  color: #f8f8f5;
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1;
  padding: 0.1875rem 0.4375rem;
}
.new-mark { padding: 0.25rem 0.5rem; }

/* The inquiry pop-up (inquiry.js). */
.inquiry-dialog {
  width: min(32rem, calc(100vw - 2rem));
  border: 1px solid #d6e0db;
  border-radius: 1rem;
  padding: 1.75rem;
  background: #fff;
  color: #0b1710;
}
.inquiry-dialog::backdrop { background: rgba(11, 23, 16, 0.45); }
.inquiry-close-form { position: absolute; top: 0.75rem; right: 0.75rem; }
.inquiry-close {
  width: 2rem;
  height: 2rem;
  border-radius: 9999px;
  font-size: 1.25rem;
  line-height: 1;
  color: #4a6b5a;
}
.inquiry-close:hover { background: #f2e9dc; color: #0b1710; }
.inquiry-close:focus-visible { outline: none; box-shadow: 0 0 0 2px #c2703c; }
textarea.auth-input { display: block; resize: vertical; }

/* One message in a conversation. Your own sit on sand, theirs on cream. */
.message { border-radius: 0.5rem; background: #f8f8f5; padding: 0.625rem 0.875rem; font-size: 0.9375rem; }
.message-own { background: #f2e9dc; }
.message-meta { font-size: 0.75rem; font-weight: 500; color: #4a6b5a; margin-bottom: 0.125rem; }

/* Dark mode: theme.js puts the class "dark" on <html>. */
html.dark .data-card { background: #122117; border-color: #24402f; }
html.dark .grower-link { color: #e7e5e4; text-decoration-color: #24402f; }
html.dark .grower-link:hover { color: #e0a877; text-decoration-color: #c2703c; }
html.dark .profile-row + .profile-row { border-top-color: #1b3328; }
html.dark .corner-link:hover { color: #e0a877; }
html.dark .corner-count,
html.dark .new-mark { background: #c2703c; color: #0b1710; }
html.dark .inquiry-dialog { background: #122117; border-color: #24402f; color: #f5f5f4; }
html.dark .inquiry-dialog::backdrop { background: rgba(0, 0, 0, 0.6); }
html.dark .inquiry-close { color: #bccdc4; }
html.dark .inquiry-close:hover { background: #1b3328; color: #f5f5f4; }
html.dark .message { background: #0b1710; }
html.dark .message-own { background: #1b3328; }
html.dark .message-meta { color: #bccdc4; }

/* On a phone the corner keeps to the round letter and the buttons. */
@media (max-width: 639px) {
  .corner-link { display: none; }
}

/* A row button can also be a link. */
a.row-button { display: inline-block; }

/* ---------------------------------------------------------------------------
   Basket and orders (basket.html, orders.html, order.html)
--------------------------------------------------------------------------- */

/* The basket in the top corner: a small drawing, the word on a wide screen,
   and the number of lines in it. Unlike the other corner links it stays on
   a phone, because a basket nobody can find is no use. */
.corner-basket {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.875rem;
  font-weight: 500;
  white-space: nowrap;
}
.corner-basket svg { width: 1.25rem; height: 1.25rem; }
.corner-basket:hover { color: #8a4a22; }
.corner-basket:hover .corner-basket-word { text-decoration: underline; }
.corner-basket:focus-visible { outline: none; box-shadow: 0 0 0 2px #c2703c; border-radius: 0.25rem; }

/* Where an order stands, as a tag. Never green: green means fresh.
   Plain outline for "in progress", clay for "your move", sand for "done",
   dashed for an order that came to nothing. */
.status-pill {
  display: inline-block;
  border: 1px solid #bccdc4;          /* ink-200 */
  border-radius: 9999px;
  padding: 0.25rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  color: #24402f;
}
.status-pill-you { background: #a95c2d; border-color: #a95c2d; color: #f8f8f5; }
.status-pill-done { background: #f2e9dc; border-color: #f2e9dc; }
.status-pill-off { border-style: dashed; color: #4a6b5a; }

/* One plant in a basket: the name, then how many, the line total and Remove.
   On a phone the name takes the first row and the rest the second. */
.basket-line {
  display: grid;
  grid-template-columns: 5.5rem 1fr auto;
  gap: 0.5rem 1rem;
  align-items: center;
  padding: 0.875rem 0;
}
.basket-line + .basket-line { border-top: 1px solid #eef2f0; }
.basket-line > :first-child,
.basket-line > .auth-error { grid-column: 1 / -1; }
.basket-line-total { text-align: right; font-variant-numeric: tabular-nums; font-weight: 500; }
@media (min-width: 640px) {
  .basket-line { grid-template-columns: minmax(0, 1fr) 5.5rem 7rem auto; }
  .basket-line > :first-child { grid-column: auto; }
}

/* How far a grower's group is toward the $250 minimum. Clay, not green. */
.minimum-bar { height: 0.375rem; border-radius: 9999px; background: #eef2f0; overflow: hidden; }
.minimum-bar span { display: block; height: 100%; border-radius: 9999px; background: #c2703c; }

/* One of several things to choose between (a bank, pickup or delivery, a
   carrier): a box with a round tick on the left. The whole box is the target. */
.choice {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  border: 1px solid #d6e0db;
  border-radius: 0.5rem;
  padding: 0.75rem 0.875rem;
  cursor: pointer;
  transition: border-color 150ms, background 150ms;
}
.choice:hover { border-color: #c2703c; }
.choice input { margin-top: 0.1875rem; accent-color: #a95c2d; flex-shrink: 0; }
.choice:has(input:checked) { border-color: #a95c2d; background: #fbf1e9; }
.choice:has(input:focus-visible) { box-shadow: 0 0 0 2px #c2703c; }

/* A second look before something that can't be undone. */
.ask-first {
  border: 1px solid #e0a877;          /* clay-300 */
  background: #fbf1e9;                /* clay-50 */
  border-radius: 0.5rem;
  padding: 0.75rem 1rem;
}
.ask-first[hidden] { display: none; }

/* The amounts on an order: a label on the left, dollars on the right. */
.money-list { font-size: 0.9375rem; }
.money-list > div { display: flex; justify-content: space-between; gap: 1rem; padding: 0.375rem 0; }
.money-list dt { min-width: 0; }
.money-list dd { font-variant-numeric: tabular-nums; text-align: right; }
.money-list .money-total { border-top: 1px solid #d6e0db; margin-top: 0.375rem; padding-top: 0.75rem; font-weight: 600; }
/* A row whose right-hand side is a remark, not an amount: the remark may
   wrap, the short label on the left may not. */
.money-list .money-note dt { flex-shrink: 0; }

/* An order's history, oldest first, with a small dot per step. */
.timeline { border-left: 2px solid #d6e0db; margin-left: 0.3125rem; }
.timeline li { position: relative; padding: 0 0 0.875rem 1.125rem; font-size: 0.875rem; }
.timeline li:last-child { padding-bottom: 0; }
.timeline li::before {
  content: "";
  position: absolute;
  left: -0.375rem;
  top: 0.3125rem;
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 9999px;
  background: #bccdc4;
}
.timeline time { display: block; font-size: 0.75rem; color: #4a6b5a; }

/* The small heading over each part of an order. */
.part-title { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: #4a6b5a; }

/* A carrier in the grower's delivery settings. */
.carrier-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; padding: 0.875rem 0; }
.carrier-row + .carrier-row { border-top: 1px solid #eef2f0; }

/* A pick list and a date box sit side by side on an order, so they share a
   height. A box whose value was refused gets a clay edge until it is fixed. */
select.auth-input, input[type="date"].auth-input { height: 2.875rem; }
.auth-input[aria-invalid="true"] { border-color: #a95c2d; box-shadow: 0 0 0 1px #a95c2d; }

/* A link that looks like a button but is switched off for now (checking out
   a basket that is under the minimum). It still takes the press, and the
   basket page decides at that moment whether the press goes anywhere: a
   number typed just before may have switched it back on. */
a.auth-button[aria-disabled="true"] { opacity: 0.45; cursor: default; }
a.auth-button[aria-disabled="true"]:hover { background: #0b1710; }
/* Dark mode: theme.js puts the class "dark" on <html>. */
html.dark a.auth-button[aria-disabled="true"]:hover { background: #f8f8f5; }

/* The search box in the header of the directory and the grower page. A
   signed-in buyer's corner is long (Inquiries, Orders, Basket, name, Sign
   out), and without a floor the search box was squeezed to a sliver on
   in-between screens. With one, the corner drops to a second row instead;
   and on those screens the name gives way to its round letter first. */
@media (min-width: 640px) {
  .header-search { min-width: 18rem; }
}
@media (max-width: 1179px) {
  header:has(.header-search) .corner-text { display: none; }
}

/* Layout classes would otherwise beat the hidden attribute. */
.choice[hidden], .basket-line[hidden], .carrier-row[hidden], [data-part][hidden] { display: none; }

@media (max-width: 639px) {
  .corner-basket-word { display: none; }
}

/* Dark mode: theme.js puts the class "dark" on <html>. */
html.dark .corner-basket:hover { color: #e0a877; }
html.dark .status-pill { border-color: #24402f; color: #d6e0db; }
html.dark .status-pill-you { background: #c2703c; border-color: #c2703c; color: #0b1710; }
html.dark .status-pill-done { background: #1b3328; border-color: #1b3328; }
html.dark .status-pill-off { color: #bccdc4; }
html.dark .basket-line + .basket-line { border-top-color: #1b3328; }
html.dark .minimum-bar { background: #1b3328; }
html.dark .choice { border-color: #24402f; }
html.dark .choice:has(input:checked) { border-color: #c2703c; background: #1b3328; }
html.dark .ask-first { border-color: #8a4a22; background: #0b1710; }
html.dark .money-list .money-total { border-top-color: #24402f; }
html.dark .timeline { border-left-color: #24402f; }
html.dark .timeline li::before { background: #4a6b5a; }
html.dark .timeline time { color: #bccdc4; }
html.dark .part-title { color: #bccdc4; }
html.dark .carrier-row + .carrier-row { border-top-color: #1b3328; }
/* Tell the browser these boxes sit on a dark page, so the calendar
     button, the pick-list arrow and the round ticks are drawn light. */
html.dark .auth-input,
html.dark .choice input { color-scheme: dark; }
html.dark .auth-input[aria-invalid="true"] { border-color: #e0a877; box-shadow: 0 0 0 1px #e0a877; }

/* ---------------------------------------------------------------------------
   The account page (account.html)
--------------------------------------------------------------------------- */

/* "Your pages": one row of links under the name, one cell per page, with a
   hairline between cells. The row has exactly as many columns as there are
   links (--links, set by the page). On a phone the cells go two to a row,
   and an odd one out at the end takes the full width so no cell is empty. */
.account-nav {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: #d6e0db;                /* ink-100: shows through as the hairlines */
  border: 1px solid #d6e0db;
  border-radius: 1rem;
  overflow: hidden;
}
.account-nav-link { display: block; padding: 1rem 1.25rem; background: #fff; transition: background 150ms; }
.account-nav-link:last-child:nth-child(odd) { grid-column: 1 / -1; }
.account-nav-link:hover { background: #f8f8f5; }
.account-nav-link:hover .account-nav-name { color: #8a4a22; }
.account-nav-link:focus-visible { outline: none; box-shadow: inset 0 0 0 2px #c2703c; }
.account-nav-name { display: block; font-weight: 600; font-size: 0.9375rem; }
.account-nav-note { display: block; margin-top: 0.125rem; font-size: 0.8125rem; color: #4a6b5a; }
.account-nav-note-waiting { color: #8a4a22; font-weight: 500; }
@media (min-width: 640px) {
  .account-nav { grid-template-columns: repeat(var(--links, 4), minmax(0, 1fr)); }
  .account-nav-link:last-child:nth-child(odd) { grid-column: auto; }
}

/* "Account settings": one card, a row per subject. The subject is named on
   the left and its boxes and buttons sit on the right. On a phone the name
   sits above them. A hairline separates one subject from the next. */
.settings-row { display: grid; gap: 1rem 2rem; padding: 1.5rem 0; }
.settings-row:first-child { padding-top: 0; }
.settings-row:last-child { padding-bottom: 0; }
.settings-row + .settings-row { border-top: 1px solid #eef2f0; }
.settings-row[hidden] { display: none; }
.settings-name { font-weight: 600; font-size: 0.9375rem; }
.settings-help { margin-top: 0.25rem; font-size: 0.8125rem; color: #4a6b5a; }
@media (min-width: 768px) {
  .settings-row { grid-template-columns: 13rem minmax(0, 1fr); }
}

/* Dark mode: theme.js puts the class "dark" on <html>. */
html.dark .account-nav { background: #24402f; border-color: #24402f; }
html.dark .account-nav-link { background: #122117; }
html.dark .account-nav-link:hover { background: #1b3328; }
html.dark .account-nav-link:hover .account-nav-name { color: #e0a877; }
html.dark .account-nav-note { color: #bccdc4; }
html.dark .account-nav-note-waiting { color: #e0a877; }
html.dark .settings-row + .settings-row { border-top-color: #1b3328; }
html.dark .settings-help { color: #bccdc4; }

/* ---------------------------------------------------------------------------
   Lists and tiles for the Transport, Encyclopedia and News pages.
--------------------------------------------------------------------------- */

/* One item in a list held by a .data-card: the item on the left, its numbers
   or its tag on the right, a hairline between items. On a phone the right
   side drops under the left. */
.list-row { display: grid; gap: 0.75rem 1.5rem; padding: 1rem 1.25rem; }
.list-row + .list-row { border-top: 1px solid #eef2f0; }
@media (min-width: 640px) {
  .list-row { grid-template-columns: minmax(0, 1fr) auto; align-items: start; }
}
.list-row-link { transition: background 150ms; }
.list-row-link:hover { background: #f8f8f5; }
.list-row-link:focus-visible { outline: none; box-shadow: inset 0 0 0 2px #c2703c; }

/* Plant Encyclopedia: a tile per plant, three across on a wide screen. */
.plant-grid { display: grid; gap: 0.75rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .plant-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .plant-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.plant-tile {
  display: block;
  background: #fff;
  border: 1px solid #d6e0db;
  border-radius: 1rem;
  padding: 1rem 1.125rem;
  transition: border-color 150ms;
}
.plant-tile:hover { border-color: #c2703c; }
.plant-tile:focus-visible { outline: none; box-shadow: 0 0 0 2px #c2703c; }

/* Dark mode: theme.js puts the class "dark" on <html>. */
html.dark .list-row + .list-row { border-top-color: #1b3328; }
html.dark .list-row-link:hover { background: #1b3328; }
html.dark .plant-tile { background: #122117; border-color: #24402f; }

/* ---------------------------------------------------------------------------
   The light-or-dark switch, first in the top corner of every page.
--------------------------------------------------------------------------- */
.theme-toggle {
  flex-shrink: 0;
  display: inline-grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 9999px;
  border: 1px solid #bccdc4;          /* ink-200 */
  color: #24402f;
  transition: border-color 150ms, color 150ms;
}
.theme-toggle svg { width: 1rem; height: 1rem; }
.theme-toggle:hover { border-color: #c2703c; color: #8a4a22; }
.theme-toggle:focus-visible { outline: none; box-shadow: 0 0 0 2px #c2703c; }
html.dark .theme-toggle { border-color: #24402f; color: #e7e5e4; }
html.dark .theme-toggle:hover { border-color: #c2703c; color: #e0a877; }

/* On a phone the corner has no room for Sign out as well as the switch:
   it is on the account page, under "Leaving". */
@media (max-width: 639px) {
  .corner-signout { display: none; }
}

/* The Create order button on orders.html: on its own in the middle, a size
   up from the small buttons. */
.create-order-button { padding: 0.75rem 2.5rem; font-size: 1rem; }

/* The "Completed orders" fold on orders.html: a small arrow before the
   heading that turns when it is open, in place of the browser's own. */
.history > summary { list-style: none; }
.history > summary::-webkit-details-marker { display: none; }
.history > summary::before { content: "▸"; display: inline-block; width: 1.1em; transition: transform .15s; }
.history[open] > summary::before { transform: rotate(90deg); }