/* feed/app.css — web-app styles. Extends the shared /assets/style.css
   (which defines tokens, .wrap, .btn, etc.). Kept separate so the
   marketing site doesn't pay the cost of these rules. */

/* Browser default [hidden] { display: none } is the same specificity as a
   class selector, so our class rules with display: flex/grid override it.
   Force the attribute to win. */
[hidden] { display: none !important; }

/* ---------- app nav ---------- */
.app-nav {
  border-bottom: 1px solid var(--line, #DCD8CB);
  background: var(--bg, #F5F2EA);
  position: sticky;
  top: 0;
  z-index: 10;
  /* On iOS with viewport-fit=cover the webview extends under the status bar /
     Dynamic Island. Pad the header down by the safe-area inset so the title and
     buttons never sit under the clock and battery. */
  padding-top: env(safe-area-inset-top, 0px);
}
.app-nav__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
  gap: 12px;
  /* Keep the row clear of the rounded screen corners / notch on the sides. */
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
}
.app-nav__user {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--mono);
  font-size: 13px;
}
.app-nav__email {
  color: var(--muted);
  max-width: 32ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.app-nav__btn {
  font: inherit;
  padding: 6px 12px;
  background: transparent;
  border: 1px solid var(--line-strong, #1A1A1A);
  border-radius: 4px;
  cursor: pointer;
  color: var(--ink);
}
.app-nav__btn:hover { background: var(--ink); color: #fff; }

@media (max-width: 600px) {
  .app-nav__email { display: none; }
}

/* ---------- views ---------- */
.view { padding: 48px 0; }
@media (min-width: 900px) { .view { padding: 80px 0; } }

/* ---------- sign-in screen ---------- */
.signin { max-width: 560px; margin: 0 auto; }
.signin__eyebrow {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 12px;
}
.signin__title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(40px, 7vw, 64px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0 0 20px;
  text-wrap: balance;
}
.signin__title em { color: var(--accent, #D62828); font-style: italic; }
.signin__sub {
  font-size: 17px;
  line-height: 1.55;
  color: var(--muted);
  margin: 0 0 32px;
  max-width: 50ch;
}
.signin__form {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.signin__input {
  flex: 1 1 240px;
  font: inherit;
  padding: 14px 18px;
  border: 1px solid var(--line-strong, #1A1A1A);
  border-radius: 99px;
  background: #fff;
  min-width: 0;
}
.signin__input:focus {
  outline: 2px solid var(--accent, #D62828);
  outline-offset: 2px;
}
.signin__btn { white-space: nowrap; }
.signin__status {
  font-family: var(--mono);
  font-size: 13px;
  min-height: 1.2em;
  margin: 0 0 24px;
  color: var(--muted);
}
.signin__status.is-error { color: var(--accent, #D62828); }
.signin__fine {
  margin-top: 32px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--muted);
  border-top: 1px solid var(--line, #DCD8CB);
  padding-top: 20px;
}
.signin__fine p { margin: 0 0 12px; }
.signin__fine code {
  font-family: var(--mono);
  font-size: 12px;
  background: var(--line, #DCD8CB);
  padding: 1px 6px;
  border-radius: 3px;
}
.link {
  font: inherit;
  background: none;
  border: 0;
  padding: 0;
  color: var(--accent, #D62828);
  text-decoration: underline;
  cursor: pointer;
}

/* ---------- feed ---------- */
.feed__head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 24px;
}
.feed__label {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 6px;
}
.feed__title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(32px, 5.4vw, 48px);
  line-height: 1.05;
  margin: 0;
  letter-spacing: -0.01em;
}
.feed__filters {
  display: flex;
  gap: 8px;
  align-items: center;
}
.feed__refresh {
  font: inherit;
  font-size: 18px;
  width: 36px; height: 36px;
  border: 1px solid var(--line-strong, #1A1A1A);
  background: #fff;
  border-radius: 50%;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.feed__refresh:hover { background: var(--line, #DCD8CB); }
.feed__refresh.is-spinning { animation: spin 0.6s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.feed__list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.alert {
  padding: 16px 18px;
  border: 1px solid var(--line, #DCD8CB);
  border-radius: 6px;
  background: #fff;
}
.alert--match { border-left: 4px solid var(--accent, #D62828); }
.alert--dim { opacity: 0.6; }
/* Soft-dim middle state: exactly 1 distinct user voted "gone" in the
   last 15 min. The alert stays in the feed so others can confirm or
   contradict, but it visually recedes — slight fade + desaturation so
   the photo doesn't shout. */
.alert--reported-gone {
  opacity: 0.55;
  filter: saturate(0.7);
}
.alert__row1 {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: baseline;
  margin-bottom: 6px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted);
}
.alert__food {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 400;
  margin: 0 0 4px;
  line-height: 1.2;
}
.alert__loc {
  font-size: 14px;
  color: var(--muted);
  margin: 0;
}
.alert__summary {
  font-size: 14px;
  line-height: 1.5;
  margin: 8px 0 0;
}
.alert__tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin: 10px 0 0;
}
.alert__claims {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin: 6px 0 0;
}
.claim {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px 9px;
  border-radius: 99px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.02em;
  border: 1px solid transparent;
}
.claim--yes {
  background: #DCEFD7;          /* gentle green */
  color: #205c2a;
  border-color: #B6E0AC;
}
.claim--no {
  background: #F8D7D7;          /* gentle red */
  color: #8a1a1a;
  border-color: #EFBABA;
  text-decoration: line-through;
}
.claim--unknown {
  background: transparent;
  color: var(--muted, #6E6E6E);
  border-color: var(--line, #DCD8CB);
}

.alert__photo {
  display: block;
  width: 100%;
  max-height: 360px;
  object-fit: cover;
  border-radius: 6px;
  margin: 12px 0 0;
}

.chip--muted { background: #EEE; color: #888; }

/* ---------- crowdsourced status line ---------- */
.alert__status {
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
  margin: 14px 0 0;
  padding: 8px 12px;
  border-radius: 6px;
  background: #F7F4EC;
  border: 1px solid var(--line, #DCD8CB);
  font-size: 14px;
  line-height: 1.3;
}
.alert__status strong { font-weight: 600; }
.alert__status-dot { font-size: 14px; }
.alert__status-meta {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted, #6E6E6E);
}
.alert__status--plenty      { background: #E5F4E0; border-color: #BFE2B3; }
.alert__status--some        { background: #FFF6D6; border-color: #F0DE9A; }
.alert__status--almost_gone { background: #FFE3D2; border-color: #F2C2A2; }
.alert__status--reported-gone {
  background: #F8D7D7;
  border-color: #EFBABA;
  color: #8a1a1a;
}
.alert__status--reported-gone .alert__status-meta { color: #8a1a1a; opacity: 0.85; }

/* ---------- Personal undo strip (above the feed) ----------
   Shown when the current user has just voted "gone" on an alert
   but no second voter has confirmed yet, so the alert is hidden
   from THEIR view (it's gone, for them — no need to see it). The
   row gives them a quick way to take it back if they mis-tapped. */
.personal-undo-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0 0 14px;
}
.personal-undo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 14px;
  background: #F7F4EC;                              /* cream, matches status pills */
  border: 1px solid var(--line, #DCD8CB);
  border-radius: 6px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted, #6E6E6E);
  flex-wrap: wrap;
  transition: opacity 240ms ease-out, transform 240ms ease-out;
}
.personal-undo--dismissing {
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
}
.personal-undo__text { line-height: 1.4; }
.personal-undo__text strong { color: var(--ink); font-weight: 500; }
.personal-undo__btn {
  font: inherit;
  font-family: var(--mono);
  font-size: 12px;
  padding: 4px 12px;
  background: transparent;
  border: 1px solid var(--line-strong, #1A1A1A);
  border-radius: 99px;
  cursor: pointer;
  color: var(--ink);
  flex-shrink: 0;
}
.personal-undo__btn:hover:not(:disabled) { background: var(--ink); color: #fff; }
.personal-undo__btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* ---------- 4-state report chips ---------- */
.alert__report {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.alert__report-label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted, #6E6E6E);
  margin: 0;
}
.alert__report-chips {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.report-chip {
  font: inherit;
  font-size: 13px;
  font-family: var(--mono);
  padding: 10px 14px;
  min-height: 44px;
  background: #fff;
  border: 1px solid var(--line-strong, #1A1A1A);
  border-radius: 99px;
  cursor: pointer;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  line-height: 1;
  transition: background 0.12s ease, color 0.12s ease;
}
.report-chip:hover:not(:disabled)         { background: var(--ink); color: #fff; }
.report-chip:disabled                     { opacity: 0.5; cursor: not-allowed; }
.report-chip.is-pending                   { background: var(--ink); color: #fff; }
.report-chip__dot                         { font-size: 12px; }
.report-chip--plenty:hover:not(:disabled)      { background: #2C8C3F; border-color: #2C8C3F; }
.report-chip--some:hover:not(:disabled)        { background: #C7A53C; border-color: #C7A53C; }
.report-chip--almost_gone:hover:not(:disabled) { background: #C97A2B; border-color: #C97A2B; }
.report-chip--gone:hover:not(:disabled)        { background: #8a1a1a; border-color: #8a1a1a; }

.alert__actions {
  display: flex;
  gap: 8px;
  margin-top: 14px;
  font-family: var(--mono);
  font-size: 12px;
  flex-wrap: wrap;
}
.alert__btn {
  font: inherit;
  padding: 6px 14px;
  background: transparent;
  border: 1px solid var(--line-strong, #1A1A1A);
  border-radius: 99px;
  cursor: pointer;
  color: var(--ink);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}
.alert__btn:hover { background: var(--ink); color: #fff; }

/* ---------- chips ---------- */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.chip {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 99px;
  font-size: 12px;
  background: var(--line, #DCD8CB);
  color: var(--ink);
  border: 1px solid transparent;
}
.chip--accent { background: #FEE2C8; }
.chip--warn   { background: #ffd6d6; color: #8a1a1a; }

.chip--toggle {
  font: inherit;
  font-size: 13px;
  padding: 6px 14px;
  cursor: pointer;
  border: 1px solid var(--line-strong, #1A1A1A);
  background: transparent;
  color: var(--ink);
}
.chip--toggle.is-on {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}

/* ---------- empty / loading ---------- */
.empty {
  padding: 64px 28px;
  text-align: center;
  border: 1px solid var(--line, #DCD8CB);
  border-radius: 6px;
  background: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.empty__art {
  color: var(--muted, #6E6E6E);
  display: block;
}
.empty__title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 24px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 4px 0 0;
  color: var(--ink);
}
.empty__body {
  font-size: 15px;
  line-height: 1.55;
  color: var(--muted);
  margin: 0;
  max-width: 42ch;
}
.empty__btn {
  font: inherit;
  font-family: var(--mono);
  font-size: 13px;
  margin-top: 6px;
  padding: 8px 18px;
  background: transparent;
  border: 1px solid var(--line-strong, #1A1A1A);
  border-radius: 99px;
  cursor: pointer;
  color: var(--ink);
}
.empty__btn:hover {
  background: var(--accent, #D62828);
  border-color: var(--accent, #D62828);
  color: #fff;
}

/* ---------- settings ---------- */
.settings { max-width: 640px; margin: 0 auto; }
.settings__eyebrow {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 12px;
}
.settings__title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(32px, 5vw, 48px);
  line-height: 1.05;
  margin: 0 0 12px;
}
.settings__sub {
  font-size: 16px;
  color: var(--muted);
  margin: 0 0 32px;
  max-width: 50ch;
}
.settings__group {
  border: 0;
  padding: 0;
  margin: 0 0 28px;
}
.settings__group legend {
  font-weight: 600;
  font-size: 15px;
  padding: 0;
  margin: 0 0 4px;
}
.settings__hint {
  font-size: 13px;
  color: var(--muted);
  margin: 0 0 10px;
}
.settings__group .chip--toggle { font-size: 13px; }
.settings__actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 12px;
}
.settings__saved {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted);
  min-height: 1em;
}
.settings__saved.is-ok { color: #1a8a35; }

/* ---------- notifications (settings) ---------- */
.settings__group--notify { border-top: 1px solid var(--line, #DCD8CB); padding-top: 24px; }
.notify-row { display: flex; align-items: center; gap: 14px; margin: 4px 0 10px; }

/* Pure-CSS toggle — keep the native checkbox visually hidden but focusable
   so the label/track is the visible affordance. */
.toggle {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  user-select: none;
}
.toggle input {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
  pointer-events: none;
}
.toggle__track {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  background: var(--line, #DCD8CB);
  border: 1px solid var(--line-strong, #1A1A1A);
  border-radius: 999px;
  transition: background 0.18s ease;
  flex-shrink: 0;
}
.toggle__thumb {
  position: absolute;
  top: 1px; left: 1px;
  width: 20px; height: 20px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 2px rgba(0,0,0,0.25);
  transition: transform 0.18s ease;
}
.toggle input:checked + .toggle__track { background: var(--accent, #D62828); }
.toggle input:checked + .toggle__track .toggle__thumb { transform: translateX(20px); }
.toggle input:focus-visible + .toggle__track {
  outline: 2px solid var(--accent, #D62828);
  outline-offset: 2px;
}
.toggle input:disabled + .toggle__track { opacity: 0.5; cursor: not-allowed; }
.toggle__label {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
}
.notify-status {
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted);
  margin: 4px 0 0;
  min-height: 1.2em;
  max-width: 60ch;
}
.notify-status--warn { color: var(--accent, #D62828); }
.notify-status--ok   { color: #1a8a35; }

/* ---------- OTP code entry (check-your-email view) ----------
   Parallel auth path for the iOS Capacitor shell, where the magic link
   opens Safari and the in-app webview never sees the verify URL. The
   input is big enough to read at arm's length, monospaced so the digits
   line up, and the button is sized for thumb taps. */
.otp {
  margin: 24px 0 8px;
  padding: 20px;
  border: 1px solid var(--line, #DCD8CB);
  border-radius: 8px;
  background: #fff;
}
.otp__hint {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted, #6E6E6E);
  margin: 0 0 12px;
  text-align: center;
}
.otp__form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: stretch;
}
.otp__input {
  font-family: var(--mono, "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace);
  font-size: 28px;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-align: center;
  /* Compensate for the trailing letter-spacing so the digits look centered. */
  text-indent: 0.32em;
  padding: 14px 12px;
  border: 1px solid var(--line-strong, #1A1A1A);
  border-radius: 8px;
  background: #F7F4EC;
  color: var(--ink);
  width: 100%;
  box-sizing: border-box;
  min-height: 56px;          /* generous tap target on mobile */
}
.otp__input::placeholder {
  color: #BBB6A8;
  font-weight: 400;
}
.otp__input:focus {
  outline: 2px solid var(--accent, #D62828);
  outline-offset: 2px;
  background: #fff;
}
.otp__input:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.otp__btn {
  /* Big-tap-target button — matches the iOS HIG 44pt minimum, larger
     vertical padding than the sign-in button because this is the action
     a thumb has to hit while the other hand holds the email open. */
  width: 100%;
  min-height: 50px;
  font-size: 16px;
}
.otp__btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.otp__status {
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.4;
  min-height: 1.2em;
  margin: 12px 0 0;
  color: var(--muted, #6E6E6E);
  text-align: center;
}
.otp__status.is-error { color: var(--accent, #D62828); }
.otp__status.is-ok    { color: #1a8a35; }

/* ---------- "+ Post food" header chip ----------
   Sits in the feed__filters row, visually leads the All/My-tags toggles.
   Filled accent color so it reads as a primary CTA, not a filter. */
.chip--post {
  background: var(--accent, #D62828);
  color: #fff;
  border-color: var(--accent, #D62828);
}
.chip--post:hover {
  background: #b51f1f;
  border-color: #b51f1f;
  color: #fff;
}

/* ---------- Desktop push permission banner ----------
   Sits just above #feedList on desktop browsers when the user hasn't yet
   granted/denied notification permission. Inline, dismissible, non-blocking.
   The "Turn on" button is the only thing that calls Notification.requestPermission(). */
.push-prompt {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 18px;
  padding: 14px 16px;
  border: 1px solid var(--line, #DCD8CB);
  border-left: 3px solid var(--accent, #D62828);
  border-radius: 6px;
  background: #FFFBF2;
}
.push-prompt__icon {
  font-size: 22px;
  line-height: 1;
  flex-shrink: 0;
}
.push-prompt__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1 1 auto;
  min-width: 0;
}
.push-prompt__text strong {
  font-weight: 600;
  color: var(--ink, #1A1A1A);
}
.push-prompt__sub {
  font-size: 13px;
  color: var(--muted, #6E6E6E);
}
.push-prompt__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.push-prompt__on { padding: 8px 16px; font-size: 14px; }
.push-prompt__off { padding: 8px 8px; font-size: 14px; }
.push-prompt--ok { border-left-color: #1a8a35; }
@media (max-width: 600px) {
  .push-prompt {
    flex-wrap: wrap;
    align-items: flex-start;
  }
  .push-prompt__actions { width: 100%; justify-content: flex-end; }
}

/* ---------- In-app composer ("Post food" view) ---------- */
.compose { max-width: 640px; margin: 0 auto; }
.compose__eyebrow {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 12px;
}
.compose__title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(32px, 5vw, 48px);
  line-height: 1.05;
  letter-spacing: -0.01em;
  margin: 0 0 12px;
}
.compose__sub {
  font-size: 16px;
  line-height: 1.55;
  color: var(--muted);
  margin: 0 0 28px;
  max-width: 50ch;
}
.compose__form {
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.compose__row {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}
.compose__group {
  border: 0;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.compose__group--grow { flex: 1 1 200px; }
.compose__group--tags {
  border-top: 1px solid var(--line, #DCD8CB);
  padding-top: 20px;
  gap: 10px;
}
.compose__label {
  font-weight: 600;
  font-size: 14px;
  color: var(--ink);
  margin: 0;
  padding: 0;
}
.compose__req {
  color: var(--accent, #D62828);
  margin-left: 2px;
}
.compose__sublabel {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted, #6E6E6E);
  margin: 4px 0 4px;
}
.compose__field {
  font: inherit;
  padding: 12px 14px;
  border: 1px solid var(--line-strong, #1A1A1A);
  border-radius: 6px;
  background: #fff;
  color: var(--ink);
  min-height: 44px;
  width: 100%;
  box-sizing: border-box;
}
.compose__field:focus {
  outline: 2px solid var(--accent, #D62828);
  outline-offset: 2px;
}
.compose__field--textarea {
  resize: vertical;
  min-height: 80px;
  line-height: 1.4;
  font-family: inherit;
}
.compose__field--select {
  appearance: none;
  -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%),
                    linear-gradient(135deg, var(--ink) 50%, transparent 50%);
  background-position: calc(100% - 18px) center, calc(100% - 13px) center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 36px;
}
.compose__field--file {
  padding: 8px;
  min-height: 0;
  font-size: 13px;
}
.compose__field--datetime { margin-top: 8px; }
.compose__hint {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted, #6E6E6E);
  margin: 0;
  line-height: 1.4;
}
.compose__hint.is-error { color: var(--accent, #D62828); }
.compose__preview {
  display: block;
  max-width: 100%;
  max-height: 280px;
  border-radius: 6px;
  border: 1px solid var(--line, #DCD8CB);
  margin-top: 8px;
  object-fit: cover;
}
.compose__chips { gap: 6px; }
.compose__status {
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.4;
  min-height: 1.2em;
  margin: 0;
  color: var(--muted);
}
.compose__status.is-error { color: var(--accent, #D62828); }
.compose__status.is-ok    { color: #1a8a35; }
.compose__actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 6px;
}
.compose__submit { min-width: 160px; }

/* ---------- Composer: recent-buildings chip row ----------
   Lazily injected above the building-input row by renderPost() when the
   user has previously posted via the in-app composer. Each chip fills
   the building input on tap (then jumps focus to the room field). */
.recent-bldgs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: -8px 0 -4px;
  padding: 0;
}
.recent-bldgs__label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted, #6E6E6E);
  margin-right: 2px;
}
.chip--recent {
  font-family: var(--mono);
  font-size: 13px;
  padding: 4px 10px;
  min-height: 32px;
}

/* ---------- Composer: AI suggest status line ----------
   Sits at the bottom of the dietary-tags fieldset. Carries
   "Suggesting…" / "Suggested N tags ✨" / silent on error. */
.compose__suggest {
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.4;
  min-height: 1.2em;
  margin: 4px 0 0;
  color: var(--muted, #6E6E6E);
}
.compose__suggest.is-error { color: var(--accent, #D62828); }

/* AI-suggested chip — same shape as a regular toggle chip, but the leading
   ✨ glyph is part of the textContent (so it survives style stripping).
   Optional subtle outline to telegraph "this was auto-checked, you can
   override". */
.chip--toggle[data-suggested="true"] {
  outline: 1.5px dashed var(--accent, #D62828);
  outline-offset: 1px;
}

/* ---------- Composer: "Also email the list" opt-in row ----------
   Sits below the dietary-tags fieldset, above the status line. Visually
   echoes the Settings page's notify-row toggle aesthetic (square check
   instead of the round toggle though — opt-in vs. opt-out semantics).
   Hidden by default; renderPost() un-hides only when the user's
   university has at least one list_address configured. */
.compose__mailto {
  border-top: 1px solid var(--line, #DCD8CB);
  padding-top: 18px;
}
.mailto-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
  user-select: none;
}
.mailto-row input[type="checkbox"] {
  /* Native checkbox, sized up so it's a comfortable tap target.
     The accent color comes from CSS `accent-color` which Safari + Chrome
     both respect for native form controls. */
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin: 1px 0 0;
  accent-color: var(--accent, #D62828);
  cursor: pointer;
}
.mailto-row input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--accent, #D62828);
  outline-offset: 2px;
}
.mailto-row__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.mailto-row__label {
  font-weight: 600;
  font-size: 14px;
  color: var(--ink);
  line-height: 1.3;
  /* Long list addresses (e.g. "free-foods@lists.stanford.edu") shouldn't
     break the layout — let them wrap naturally. */
  word-break: break-word;
}
.mailto-row__hint {
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.4;
  color: var(--muted, #6E6E6E);
}

/* ---------- Composer: GPS "Use my location" row ----------
   Sits ABOVE the recent-buildings row (and above the building input) inside
   renderPost(). Three roles share the row:
     .chip--gps         — the action button itself ("📍 Use my location").
                          Dashed border telegraphs "tap me, this triggers
                          something" rather than the solid look of a
                          selection chip like .chip--recent.
     .gps-row__status   — small inline message: "Locating…" / "Nearby:" /
                          "Location unavailable — type the building manually".
     .gps-row__chips    — flex container the .chip--nearby results land in.
   The whole row stays flex-wrap so on narrow phones the chips spill onto
   their own line beneath the button + status. */
.gps-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: -4px 0 -4px;
  padding: 0;
}
.gps-row__status {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted, #6E6E6E);
}
.gps-row__status.is-error {
  text-transform: none;
  letter-spacing: 0;
  color: var(--accent, #D62828);
}
.gps-row__chips {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* The action button itself. Same overall geometry as .chip--recent so it
   harmonises with the rest of the composer chips, but a dashed border (and
   slightly heavier weight on the label) sets it apart as "this DOES
   something" rather than "this represents a value you can pick". */
.chip--gps {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: 13px;
  padding: 4px 10px;
  min-height: 32px;
  border: 1.5px dashed var(--accent, #D62828);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  border-radius: 999px;
}
.chip--gps:hover { background: rgba(214, 40, 40, 0.06); }
.chip--gps:focus-visible {
  outline: 2px solid var(--accent, #D62828);
  outline-offset: 2px;
}
.chip--gps[disabled] { opacity: 0.6; cursor: progress; }
.chip--gps__icon { font-size: 14px; line-height: 1; }
.chip--gps__label { font-weight: 600; }

/* Nearby-result chips. Inherits the toggle-chip geometry from .chip--toggle
   for consistency with .chip--recent; the only visual distinction is the
   "·" separator inside the label (no extra CSS needed). */
.chip--nearby {
  font-family: var(--mono);
  font-size: 13px;
  padding: 4px 10px;
  min-height: 32px;
}