/* dim-surfaces-v3
 *
 * Separate surfaces with fill, not hairlines.
 *
 * The site drew a 1px #424038 stroke around every card, panel, input and
 * chip. On a near-black page that reads as a grey picture frame around each
 * element, which is the look the 2010s left behind. The references all do the
 * same thing instead: the page is the darkest layer, a surface is a lighter
 * fill, a raised surface is lighter still, and the only strokes left are the
 * ones that mean something — the accent on what you have selected, and the
 * focus ring.
 *
 * Palette is unchanged. Same near-black, same #EF934D.
 */

:root {
  /* elevation, darkest to lightest */
  --s-page:      #151514;
  --s-surface:   #1F1F1D;
  --s-raised:    #262622;
  --s-inset:     #191917;   /* fields: pressed into the surface, not on top */

  --s-accent:    #EF934D;
  --s-accent-dim:#F1A265;
  --s-accent-ink:#2A1C12;

  --s-radius:    18px;
  --s-radius-sm: 14px;

  /* Depth is carried by a soft drop shadow plus a one-pixel top highlight,
     the way a real raised surface catches light. Both are nearly invisible
     alone; together they separate the card without drawing a box. */
  --s-lift: 0 1px 0 0 rgba(255,255,255,.04) inset, 0 2px 10px rgba(0,0,0,.35);
  --s-lift-hi: 0 1px 0 0 rgba(255,255,255,.06) inset, 0 8px 24px rgba(0,0,0,.45);
}

/* ---------------------------------------------------------------- surfaces */

.card,
.profile li,
.still-true,
.signup,
.empty,
.city-list a,
.table-wrap,
.evidence-quote,
.badge-preview,
.snippet,
.thanks,
.venue-hero,
.mini-map,
.map-view {
  border-color: transparent !important;
  background-color: var(--s-surface);
  border-radius: var(--s-radius);
  box-shadow: var(--s-lift);
}

/* The quote keeps its accent bar — that stroke carries meaning. */
.evidence-quote {
  border-left: 2px solid var(--s-accent) !important;
  border-radius: 0 var(--s-radius-sm) var(--s-radius-sm) 0;
}

.card { transition: background-color .18s ease, box-shadow .18s ease, transform .18s ease; }
.card:hover,
.city-list a:hover {
  background-color: var(--s-raised);
  box-shadow: var(--s-lift-hi);
  transform: translateY(-2px);
  border-color: transparent !important;
}

/* Photos are already clipped by the card's own overflow:hidden, and the
   existing sheets tune that radius per breakpoint. Nothing to add here. */

/* ------------------------------------------------------------------ header */

.site-header {
  border-bottom: 0 !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.04);
}

/* ------------------------------------------------------------------ fields */

input[type="search"],
input[type="text"],
input[type="url"],
input[type="email"],
textarea,
select {
  background-color: var(--s-inset) !important;
  border-color: transparent !important;
  border-radius: var(--s-radius-sm) !important;
  box-shadow: 0 1px 2px rgba(0,0,0,.3) inset;
}
input::placeholder, textarea::placeholder { color: #7d7a70; }

/* ------------------------------------------------------------------- chips */

.chip {
  border-color: transparent !important;
  background-color: var(--s-surface);
  border-radius: var(--s-radius-sm);
  box-shadow: var(--s-lift);
  transition: background-color .15s ease, box-shadow .15s ease, color .15s ease;
}
.chip:hover { background-color: var(--s-raised); border-color: transparent !important; }

/* Selected is the one place a stroke earns its keep. */
.chip[aria-pressed="true"] {
  background-color: #2A1D14;
  border-color: var(--s-accent) !important;
  box-shadow: 0 0 0 1px var(--s-accent), 0 4px 16px rgba(239,147,77,.18);
}

/* ----------------------------------------------------------------- buttons */

.btn {
  border-color: transparent !important;
  background-color: var(--s-surface);
  border-radius: var(--s-radius-sm);
  box-shadow: var(--s-lift);
  transition: background-color .15s ease, box-shadow .15s ease;
}
.btn:hover { background-color: var(--s-raised); border-color: transparent !important; }

/* One primary action per view, and it glows like the reference. */
.btn-orange,
.cta,
button[type="submit"].btn-orange {
  background-color: var(--s-accent) !important;
  border-color: transparent !important;
  color: var(--s-accent-ink) !important;
  box-shadow: 0 4px 18px rgba(239,147,77,.35);
}
.btn-orange:hover,
.cta:hover { background-color: #F3A364 !important; box-shadow: 0 6px 24px rgba(239,147,77,.45); }

/* Pressed state in a segmented control is a fill, not an outline. */
.view-toggle button[aria-pressed="true"] {
  background-color: var(--s-accent) !important;
  color: var(--s-accent-ink) !important;
  border-color: transparent !important;
  box-shadow: 0 2px 10px rgba(239,147,77,.3);
}

/* ------------------------------------------------------------------ tables */

table.places th,
table.places td { border-bottom-color: rgba(255,255,255,.05) !important; }
.nearby-list li { border-bottom-color: rgba(255,255,255,.05) !important; }

/* ------------------------------------------------------- feature statuses */

/* Confirmed should read at a glance; unchecked should recede without
   looking like a failure. Fill does that better than a grey box. */
.profile li .badge.ok { color: var(--s-accent); }
.profile li .badge.off { color: #6f6c63; }

/* ---------------------------------------------------------------- dividers */

.faq, .nearby, .evidence {
  border-top-color: rgba(255,255,255,.06) !important;
}

/* ------------------------------------------------------------ focus states */

/* Never let the borderless look cost keyboard users the ability to see
   where they are. This has to stay loud. */
a:focus-visible,
button:focus-visible,
select:focus-visible,
input:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--s-accent) !important;
  outline-offset: 3px !important;
  border-radius: var(--s-radius-sm);
}
input:focus-visible,
textarea:focus-visible,
select:focus-visible { box-shadow: 0 0 0 3px rgba(239,147,77,.18) !important; }

/* ------------------------------------------------------- reduced motion */

@media (prefers-reduced-motion: reduce) {
  .card, .chip, .btn, .city-list a { transition: none !important; }
  .card:hover, .city-list a:hover { transform: none !important; }
}

/* --------------------------------------------------------------- contrast */

/* Fill-only separation disappears for anyone who needs high contrast, so
   give the strokes back when the system asks for them. */
@media (prefers-contrast: more) {
  .card, .profile li, .chip, .btn, .city-list a, .still-true, .signup,
  input, textarea, select {
    border-color: #6b685e !important;
  }
}

/* --------------------------------------------- feature pills inside cards */

/* 104 of these on the first screen alone. A stroke around each one turned
   every card into a grid of little boxes. */
.feature-pill {
  border-color: transparent !important;
  background-color: rgba(239,147,77,.10);
  border-radius: 999px;
  padding-inline: .6rem;
}

/* The rule above the confirmed-count was the last hairline inside the card. */
.card-features-count {
  border-top-color: rgba(255,255,255,.06) !important;
}

/* Segmented control: one shape, filled selection, no frame around the pair. */
.view-toggle {
  border-color: transparent !important;
  background-color: var(--s-surface);
  border-radius: var(--s-radius-sm);
  padding: 3px;
  gap: 2px;
}
.view-toggle button {
  border-color: transparent !important;
  box-shadow: none;
  background-color: transparent;
}
.view-toggle button[aria-pressed="false"] { background-color: transparent !important; }

/* The geocoder's suggestion list is a menu, not a stack of outlined boxes. */
.location-choice {
  border-color: transparent !important;
  background-color: var(--s-surface);
  border-radius: var(--s-radius-sm);
}
.location-choice:hover { background-color: var(--s-raised); }

/* ------------------------------------------------------- no box inside box */

/* The help panel wrapped the "Is this still true?" panel, so the venue page
   ended with a frame inside a frame. One surface, two sections. */
.help-listing {
  border-color: transparent !important;
  background-color: var(--s-surface);
  border-radius: var(--s-radius);
  box-shadow: var(--s-lift);
}
.help-listing .still-true {
  background-color: transparent !important;
  box-shadow: none !important;
  border-top: 1px solid rgba(255,255,255,.06) !important;
  border-radius: 0;
  margin-top: 1rem;
  padding-top: 1rem;
}
.help-listing .still-true .btn { background-color: var(--s-raised); }