/* Utilities
 * Intentionally minimal in Prompt 2. Utility extraction will happen in a
 * later tidy pass once inline-style migration starts.
 */

.logo-row {
  display: flex;
  align-items: center;
}

.logo-large-img {
  max-width: 100%;
  max-height: 120px;
  object-fit: contain;
}

/* Was 84px, rendering at 72px and setting a 105px header, 13% of a phone
   screen given over to chrome before any content. The reference headers are
   compact bars, so the wordmark drops to app-bar scale: measured, the header
   goes 105px → 67px at 375px, and 81px at desktop where the logo is 52px. */
.logo-img {
  max-height: 44px;
  max-width: min(52vw, 240px);
  width: auto;
  object-fit: contain;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  min-width: 0;
}

.view-placeholder {
  padding: var(--space-9);
}

.top-nav--stack {
  flex-direction: column;
  align-items: stretch;
  padding: var(--space-6) var(--space-8) 0 var(--space-8);
  gap: var(--space-6);
}

.top-nav-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-width: 0;
}

.lb-tabs-row {
  display: flex;
  gap: var(--space-2);
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: var(--space-6);
}

.lb-tabs-row::-webkit-scrollbar {
  display: none;
}

@media (max-width: 680px) {
  .lb-tabs-row {
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    position: relative;
  }

  .lb-tab-btn {
    flex: 0 0 auto;
  }

  /* Dynamic scroll edge fades, data-scroll-fade set by js/scroll-edge-fades.js */
  .scroll-fade-x[data-scroll-fade="none"] {
    -webkit-mask-image: none;
    mask-image: none;
  }

  .scroll-fade-x[data-scroll-fade="start"] {
    -webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 62%, rgba(0, 0, 0, 0.35) 78%, rgba(0, 0, 0, 0) 100%);
    mask-image: linear-gradient(to right, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 62%, rgba(0, 0, 0, 0.35) 78%, rgba(0, 0, 0, 0) 100%);
  }

  .scroll-fade-x[data-scroll-fade="end"] {
    -webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.35) 22%, rgba(0, 0, 0, 1) 38%, rgba(0, 0, 0, 1) 100%);
    mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.35) 22%, rgba(0, 0, 0, 1) 38%, rgba(0, 0, 0, 1) 100%);
  }

  .scroll-fade-x[data-scroll-fade="middle"] {
    -webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.35) 12%, rgba(0, 0, 0, 1) 22%, rgba(0, 0, 0, 1) 78%, rgba(0, 0, 0, 0.35) 88%, rgba(0, 0, 0, 0) 100%);
    mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.35) 12%, rgba(0, 0, 0, 1) 22%, rgba(0, 0, 0, 1) 78%, rgba(0, 0, 0, 0.35) 88%, rgba(0, 0, 0, 0) 100%);
  }
}

.detail-body-flat {
  padding: var(--space-9);
  padding-top: var(--space-8);
  border-radius: 0;
}

.center-shell {
  max-width: 600px;
  margin: 0 auto;
  width: 100%;
}

.leaderboard-list {
  padding-top: var(--space-5);
}

#view-leaderboard .detail-body-flat {
  padding-bottom: calc(var(--nav-clearance) + var(--space-9));
}

#view-leaderboard .leaderboard-list {
  padding-bottom: var(--space-8);
}

/* Balances the back control so the title sits optically centred. Must track
   .btn-icon's width; it was still 24px, matching the bare chevron that
   control used to be. */
.mirror-spacer {
  width: 40px;
  flex: 0 0 auto;
}

.view-shell {
  max-width: 640px;
  margin: 0 auto;
  width: 100%;
}

.form-group-lg {
  margin-bottom: var(--space-9);
}

.form-group-no-margin {
  margin-bottom: 0;
}

/* Read-only: it tells you who you are posting as. It was a full-width slab
   the size of an input, which made a fixed fact look like something you were
   expected to fill in. A pill states it and gets out of the way. */
.form-reviewer-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 6px 14px;
  background: var(--paper-raised);
  border-radius: var(--radius-pill);
  border: 1px solid var(--hairline);
  color: var(--ink);
  font-weight: 600;
  font-size: var(--text-meta);
}

#brew-form {
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
}

/* Wrapped a single input in a sunk panel, so the one field that matters most
   on this screen sat inside a box that made it look nested and optional. It
   is just a form group. */
.new-cafe-fields {
  display: none;
  padding: 0;
  background: none;
  /* The .form-group inside already supplies the gap. */
  margin-bottom: 0;
}

.slider-label-wide {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.score-value-hidden {
  display: none;
}

.food-actions {
  display: flex;
  gap: var(--space-2);
  align-items: center;
}

.btn-submit {
  width: auto;
  min-width: 196px;
  display: block;
  margin: 12px auto 0;
  padding: 12px 22px;
  border-radius: var(--radius-pill);
  /* Was a gold-to-gold gradient with near-black text. The colour swap left
     it a half-tan, half-vermilion gradient with dark text on the darker end.
     The primary action should be the single most decisive thing on screen:
     flat vermilion, paper text. */
  border: 1px solid var(--vermilion);
  background: var(--vermilion);
  color: var(--paper-raised);
  font-weight: 700;
  letter-spacing: 0.2px;
  /* The inset white highlight and black drop shadow were a raised-plastic
     button; the pressed and disabled states still carried the old tan-to-gold
     gradients, so pressing Submit flashed half-tan. Flat in every state. */
  box-shadow: none;
  transition: transform 0.16s ease, background 0.16s ease, border-color 0.16s ease;
}

.btn-submit:hover {
  background: var(--vermilion-deep);
  border-color: var(--vermilion-deep);
}

.btn-submit:active {
  transform: scale(0.98);
  background: var(--vermilion-deep);
}

.btn-submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background: var(--vermilion);
  border-color: var(--vermilion);
}

.btn-submit:disabled:hover,
.btn-submit:disabled:active {
  transform: none;
  background: var(--vermilion);
  border-color: var(--vermilion);
}

.no-food-btn {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-soft);
  background: var(--paper-sunk);
  padding: 5px 10px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--hairline);
  cursor: pointer;
  transition: background var(--duration-fast) ease, border-color var(--duration-fast) ease;
}

.no-food-btn:hover {
  background: var(--wash-strong);
  border-color: var(--hairline-strong);
}

.review-photo-hint {
  margin: 0 0 var(--space-2);
  font-size: 12px;
  color: var(--text-secondary);
}

.review-photo-preview-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-3);
}

.review-photo-preview-item {
  position: relative;
  flex: 1 1 96px;
  width: calc(33.333% - var(--space-2));
  min-width: 96px;
  max-width: 140px;
}

.review-photo-preview-img {
  width: 100%;
  aspect-ratio: 1;
  max-height: none;
  object-fit: cover;
  border-radius: var(--radius-md);
  border: 1px solid var(--hairline);
  display: block;
}

.review-photo-remove-btn {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 26px;
  height: 26px;
  border: none;
  border-radius: var(--radius-pill);
  background: rgba(10, 10, 10, 0.78);
  color: #fff;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}

.review-photo-remove-btn:focus-visible {
  outline: 2px solid rgba(206, 64, 26, 0.95);
  outline-offset: 1px;
}

.file-upload-btn.is-disabled {
  opacity: 0.55;
  pointer-events: none;
}

.detail-score-bars {
  margin-bottom: var(--space-9);
}

.score-label-strong {
  font-weight: 600;
}

.detail-community-section {
  padding-top: var(--space-11);
  border-top: 1px solid var(--hairline);
  margin-top: var(--space-9);
}

.section-title-center {
  margin-bottom: var(--space-9);
  text-align: center;
}

/* Inherits .back-fab's paper treatment; only placement differs. The dark
   glass it used to carry was the last of the pre-flip chrome. */
.login-back-btn {
  position: absolute;
  top: var(--space-9);
  left: var(--space-9);
  z-index: var(--z-nav);
}

.auth-extra-field {
  display: none;
  margin-bottom: var(--space-6);
}

.auth-extra-field-confirm {
  margin-bottom: var(--space-9);
}

.input-no-margin {
  margin-bottom: 0;
  width: 100%;
}

.new-cafe-option {
  font-weight: 600;
  color: var(--brand);
}

.detail-hero-default {
  background-image: url('https://images.unsplash.com/photo-1509042239860-f550ce710b93?auto=format&fit=crop&w=800&q=80');
}

/* Photo display, shared frame (Photo Display Plan) */
.photo-frame {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background:
    radial-gradient(85% 70% at 30% 22%, rgba(255, 232, 205, 0.08), rgba(255, 232, 205, 0)),
    linear-gradient(160deg, rgba(206, 64, 26, 0.12), rgba(18, 18, 18, 0.92));
}

.photo-frame-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
}

.photo-frame--4x3 {
  aspect-ratio: 4 / 3;
}

.photo-frame--square {
  aspect-ratio: 1;
}

@media (max-width: 420px) {
  .logo-img {
    max-height: 38px;
    max-width: 48vw;
  }

  .header-actions {
    gap: var(--space-2);
  }
}

/* Present to screen readers and to crawlers, absent from the page.
   `display: none` and `visibility: hidden` would remove it from the
   accessibility tree as well, which defeats the point, hence the clip
   rectangle, which is the long-standing way to do this. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}