/* ==========================================================================
   A single Where to Eat listing

   Read on a phone, in the street, often in sunlight. The things you act on --
   directions, call, WhatsApp -- are buttons near the top at a size a thumb can
   hit; the reading matter is below them.
   ========================================================================== */

.eat {
  --eat-purple: #7f3f98;
  --eat-ink:    #2b2530;
  --eat-soft:   #6d6577;
  --eat-line:   #e7e2ec;
  --eat-sand:   #faf7f2;
  --eat-star:   #e0a800;
  --eat-green:  #1f8a5f;

  padding: 22px 16px 64px;
  background: var(--eat-sand);
  color: var(--eat-ink);
  font-family: "Open Sans", -apple-system, BlinkMacSystemFont, sans-serif;
}

.eat-inner { width: 100%; max-width: 1100px; margin: 0 auto; }
.eat h1, .eat h2, .eat h3 { margin: 0; }

/* -------------------------------------------------------------- crumbs -- */

.eat-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: 16px;
  font-size: .8125rem;
  color: var(--eat-soft);
}
.eat-crumbs a { color: var(--eat-soft); text-decoration: none; }
.eat-crumbs a:hover { color: var(--eat-purple); text-decoration: underline; }
.eat-crumbs-here { color: var(--eat-ink); font-weight: 700; }

/* ---------------------------------------------------------------- head -- */

.eat-head { margin-bottom: 4px; }

.eat-kind {
  margin: 0 0 4px;
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--eat-purple);
}

.eat-head h1 {
  font-family: "Amatic SC", cursive;
  font-size: clamp(2.6rem, 6vw, 4rem);
  font-weight: 700;
  line-height: .95;
}



/* ------------------------------------------------------------- gallery -- */

/* Scroll-snap rather than a slider library: swiping works on a phone with no
   JavaScript, and the arrows and dots are decoration on top of a track that
   already scrolls. Nothing here breaks if the script never loads. */
.eat-gallery { position: relative; }

.eat-slides {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  border-radius: 16px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.eat-slides::-webkit-scrollbar { display: none; }

/* Bigger than the 380px column it used to live in, without taking the whole
   page: capped in width as well as height, so the photographs are comfortably
   readable but the name, the promotion and the buttons are all still on screen
   with them. */
.eat-gallery { max-width: 860px; }
.eat-slides { max-height: 44vh; }

.eat-slide {
  flex: 0 0 100%;
  scroll-snap-align: center;
  margin: 0;
  aspect-ratio: 16 / 9;
  max-height: 44vh;
  overflow: hidden;
  background: #fff;
}
@supports not (aspect-ratio: 16 / 9) {
  .eat-slide { height: 0; padding-bottom: 56.25%; }
}
.eat-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Deliberately not a photograph. A stock picture of some other restaurant here
   would be read as a picture of this one. */
.eat-slide-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  height: 100%;
  padding: 20px;
  background:
    repeating-linear-gradient(45deg, #f4f0f7 0 12px, #efeaf4 12px 24px);
  color: var(--eat-soft);
  text-align: center;
}
.eat-slide-empty strong { font-size: .9375rem; color: var(--eat-ink); }
.eat-slide-empty > span { max-width: 30ch; font-size: .8125rem; line-height: 1.5; }

/* ---- arrows ---- */

.eat-nav {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, .92);
  color: var(--eat-ink);
  box-shadow: 0 2px 10px rgba(43, 37, 48, .22);
  transform: translateY(-50%);
  cursor: pointer;
  opacity: 0;
  transition: opacity .18s ease;
}
.eat-nav--prev { left: 10px; }
.eat-nav--next { right: 10px; }
/* Always visible, not on hover. Hidden until hovered, they told nobody there
   was anything to move through -- which is precisely the complaint. */
.eat-nav { opacity: 1; }
.eat-nav:hover { background: #fff; }
.eat-nav:disabled { opacity: 0; pointer-events: none; }


/* Says outright how many photographs there are. Lost once already: it lived
   inside the block of dot styles, and went out with them. */
.eat-counter-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  margin: 0;
  padding: 5px 11px;
  border-radius: 999px;
  background: rgba(23, 18, 28, .68);
  color: #fff;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .04em;
}

/* ---- editor strip ---- */

.eat-thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}
.eat-thumbs > li { position: relative; }

.eat-thumb {
  display: block;
  width: 68px;
  height: 52px;
  overflow: hidden;
  border: 2px solid transparent;
  border-radius: 10px;
  background: #fff;
}
.eat-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.eat-thumb.is-cover { border-color: var(--eat-purple); }

.eat-thumb-del { position: absolute; top: -6px; right: -6px; margin: 0; }
.eat-thumb-del button {
  width: 22px; height: 22px;
  padding: 0; border: 0;
  border-radius: 999px;
  background: #c0554a;
  color: #fff;
  font-size: .875rem;
  line-height: 1;
  cursor: pointer;
}

.eat-thumb-add { margin: 0; }
.eat-thumb-add label {
  display: grid;
  place-items: center;
  width: 68px;
  height: 52px;
  border: 2px dashed var(--eat-line);
  border-radius: 10px;
  color: var(--eat-soft);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}
.eat-thumb-add label:hover { border-color: var(--eat-purple); color: var(--eat-purple); }
.eat-thumb-add input[type="file"] { display: none; }


/* The plainest possible statement that there is more than one picture. Shown to
   everybody, not just editors. */
.eat-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}
.eat-strip-item {
  display: block;
  width: 96px;
  height: 64px;
  padding: 0;
  overflow: hidden;
  border: 2px solid transparent;
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
  opacity: .62;
  transition: opacity .16s ease, border-color .16s ease;
}
.eat-strip-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.eat-strip-item:hover { opacity: 1; }
.eat-strip-item.is-on { opacity: 1; border-color: var(--eat-purple); }
.eat-strip-item:focus-visible { outline: 2px solid var(--eat-purple); outline-offset: 2px; }

.eat-strip-empty {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(45deg, #f4f0f7 0 8px, #efeaf4 8px 16px);
  color: var(--eat-soft);
  font-size: 1.125rem;
}

/* -------------------------------------------------------------- promo -- */

/* Sits under the name, where someone looks for a reason to choose this place. */
.eat-promo {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin: 14px 0 18px;
  padding: 14px 18px;
  border-radius: 14px;
  background: #fff6e5;
  border: 1px solid #f0dcb4;
}
.eat-promo-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  flex: none;
  color: #9a6a12;
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.eat-promo-text {
  margin: 0;
  flex: 1 1 260px;
  font-size: .9375rem;
  line-height: 1.55;
  color: var(--eat-ink);
}

/* Nothing written yet, and only an editor is seeing this. */
.eat-promo.is-empty {
  background: #fff;
  border-style: dashed;
  border-color: var(--eat-line);
}
.eat-promo.is-empty .eat-promo-label { color: var(--eat-soft); }

/* -------------------------------------------------------------- rating -- */

.eat-rating-line {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0 0;
  font-size: .9375rem;
}
.eat-rating-line a { color: var(--eat-purple); }
.eat-rating-line--empty a { font-weight: 700; }

.eat-stars { display: inline-flex; gap: 1px; letter-spacing: 0; }
.eat-star { color: var(--eat-line); font-size: 1.05rem; line-height: 1; }
.eat-star.is-on { color: var(--eat-star); }

/* ------------------------------------------------------------- actions -- */

/* Big enough for a thumb, and wrapping rather than scrolling, so nothing is
   hidden off the edge of a narrow screen. */

/* Inline SVG rather than an icon font: the site's Font Awesome kit returns 403,
   so every fa- icon on it renders as nothing. These carry their own shape. The
   directions one is a map pin -- the character it replaced, U+26B2, is a
   "neuter" astronomical sign that happens to look vaguely like one and means
   nothing to anybody. */
.eat-ico { flex: none; display: block; }

.eat-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 22px 0 28px;
}

.eat-action {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 46px;
  padding: 0 18px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--eat-line);
  color: var(--eat-ink);
  font-size: .875rem;
  font-weight: 700;
  text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease;
}
.eat-action:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(43, 37, 48, .12);
  color: var(--eat-purple);
}
.eat-action--primary {
  background: var(--eat-purple);
  border-color: var(--eat-purple);
  color: #fff;
}
.eat-action--primary:hover { color: #fff; }

/* ---------------------------------------------------------------- body -- */

.eat-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 340px);
  gap: 24px;
  align-items: start;
}

.eat-main > section + section { margin-top: 34px; }

.eat-main h2 {
  font-family: "Amatic SC", cursive;
  font-size: clamp(1.9rem, 4vw, 2.5rem);
  font-weight: 700;
  line-height: 1;
  color: var(--eat-purple);
}

.eat-about p {
  margin: 10px 0 0;
  max-width: 68ch;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--eat-ink);
}

/* ------------------------------------------------------------- reviews -- */

.eat-count {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 9px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--eat-line);
  color: var(--eat-soft);
  font-family: "Open Sans", sans-serif;
  font-size: .8125rem;
  font-weight: 700;
  vertical-align: middle;
}

.eat-flash {
  margin: 14px 0 0;
  padding: 12px 16px;
  border-radius: 12px;
  font-size: .9375rem;
}
.eat-flash--ok    { background: #e8f5ee; border: 1px solid #bfe3d0; color: #14603f; }
.eat-flash--error { background: #fdecea; border: 1px solid #f5c6c0; color: #8f2c20; }

.eat-noreviews {
  margin: 14px 0 0;
  max-width: 60ch;
  font-size: .9375rem;
  line-height: 1.65;
  color: var(--eat-soft);
}

.eat-review-list { margin: 16px 0 0; padding: 0; list-style: none; }

.eat-review {
  padding: 18px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid var(--eat-line);
}
.eat-review + .eat-review { margin-top: 10px; }

/* Not yet published, and visible only to an editor -- so it has to look
   unmistakably different from what the public sees. */
.eat-review--pending {
  border-style: dashed;
  border-color: #d9b45e;
  background: #fffdf5;
}
.eat-pending-flag {
  margin: 0 0 10px;
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #8a6300;
}

.eat-review-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 12px;
}
.eat-review-who strong { font-size: .9375rem; }
.eat-review-who span {
  margin-left: 6px;
  font-size: .8125rem;
  color: var(--eat-soft);
}
.eat-review-head time {
  margin-left: auto;
  font-size: .75rem;
  color: var(--eat-soft);
}

.eat-review-body {
  margin: 10px 0 0;
  font-size: .9375rem;
  line-height: 1.65;
}

.eat-moderate { display: flex; gap: 8px; margin-top: 12px; }
.eat-mod {
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--eat-line);
  background: #fff;
  font-size: .75rem;
  font-weight: 700;
  cursor: pointer;
}
.eat-mod--ok  { border-color: var(--eat-green); color: var(--eat-green); }
.eat-mod--del { border-color: #c0554a; color: #c0554a; }
.eat-mod:hover { filter: brightness(.96); }

/* ---------------------------------------------------------- the form -- */

.eat-write {
  margin-top: 26px;
  padding: 22px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid var(--eat-line);
}
.eat-write h3 { font-size: 1.125rem; font-weight: 700; }
.eat-write-note {
  margin: 6px 0 18px;
  max-width: 56ch;
  font-size: .8125rem;
  line-height: 1.6;
  color: var(--eat-soft);
}

/* Off-screen rather than display:none -- a bot reading the markup still finds
   it, and a screen reader is told to skip the whole block. */
.eat-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.eat-field { margin: 0 0 16px; }
.eat-field label {
  display: block;
  margin-bottom: 5px;
  font-size: .8125rem;
  font-weight: 700;
}
.eat-field label span { font-weight: 400; color: var(--eat-soft); }

.eat-field input[type="text"],
.eat-field textarea {
  width: 100%;
  padding: 11px 13px;
  border-radius: 12px;
  border: 1px solid var(--eat-line);
  background: var(--eat-sand);
  color: var(--eat-ink);
  font: inherit;
  font-size: .9375rem;
}
.eat-field input[type="text"]:focus,
.eat-field textarea:focus {
  outline: none;
  border-color: var(--eat-purple);
  box-shadow: 0 0 0 3px rgba(127, 63, 152, .16);
}
.eat-field textarea { resize: vertical; min-height: 116px; }

.eat-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }

.eat-counter {
  display: block;
  margin-top: 5px;
  text-align: right;
  font-size: .75rem;
  color: var(--eat-soft);
}
.eat-counter.is-close { color: #8f5a00; }

/* Stars you click. Laid out in reverse so the CSS sibling selector can light
   up the one under the pointer and everything before it, which is the whole
   trick -- there is no "previous sibling" selector to do it the other way. */
.eat-field--rating { margin: 0 0 18px; padding: 0; border: 0; }
.eat-field--rating legend {
  padding: 0;
  margin-bottom: 6px;
  font-size: .8125rem;
  font-weight: 700;
}

.eat-star-input { display: inline-flex; flex-direction: row-reverse; gap: 2px; }
.eat-star-input input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}
.eat-star-input label {
  cursor: pointer;
  font-size: 2rem;
  line-height: 1;
  color: var(--eat-line);
  transition: color .12s ease, transform .12s ease;
}
.eat-star-input label::before { content: "\2605"; }
.eat-star-input label:hover,
.eat-star-input label:hover ~ label,
.eat-star-input input:checked ~ label { color: var(--eat-star); }
.eat-star-input label:hover { transform: scale(1.08); }
.eat-star-input input:focus-visible + label {
  outline: 2px solid var(--eat-purple);
  outline-offset: 2px;
  border-radius: 4px;
}

.eat-sr {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.eat-submit {
  min-height: 46px;
  padding: 0 24px;
  border: 0;
  border-radius: 999px;
  background: var(--eat-purple);
  color: #fff;
  font-size: .9375rem;
  font-weight: 700;
  cursor: pointer;
}
.eat-submit:hover { filter: brightness(1.06); }
.eat-submit:disabled { opacity: .55; cursor: not-allowed; filter: none; }

/* --------------------------------------------------------------- aside -- */

.eat-card {
  padding: 20px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid var(--eat-line);
}
.eat-card + .eat-card { margin-top: 14px; }
.eat-card h2 {
  font-family: "Amatic SC", cursive;
  font-size: 1.875rem;
  font-weight: 700;
  line-height: 1;
  color: var(--eat-purple);
}

.eat-facts { margin: 12px 0 0; }
.eat-facts > div + div { margin-top: 12px; }
.eat-facts dt {
  font-size: .625rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--eat-soft);
}
.eat-facts dd { margin: 3px 0 0; font-size: .875rem; line-height: 1.5; }
.eat-facts dd a { color: var(--eat-purple); font-weight: 700; }

.eat-hours-warn {
  display: block;
  margin-top: 3px;
  font-size: .75rem;
  color: var(--eat-soft);
}




/* A map you can see, and press. Short rather than square -- it is there to say
   "this is about getting there", not to be navigated in the page; the real map
   is a tap away and knows where the visitor is standing. */
.eat-map {
  position: relative;
  margin-top: 16px;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 12px;
  background: var(--eat-sand);
  border: 1px solid var(--eat-line);
}
@supports not (aspect-ratio: 16 / 9) {
  .eat-map { height: 0; padding-bottom: 56.25%; }
}
.eat-map iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  /* Inert: every click belongs to the link above it, and nobody gets stuck
     panning a map inside a card by accident. */
  pointer-events: none;
}
.eat-map-hit {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
}
.eat-map-hit:focus-visible {
  outline: 3px solid var(--eat-purple);
  outline-offset: -3px;
  border-radius: 12px;
}
.eat-map:hover { border-color: var(--eat-purple); }

/* The map is the control now, so it has to look like one. A pill sitting on the
   corner, in the accent the button used to carry. */
.eat-map-label {
  position: absolute;
  left: 10px;
  bottom: 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--eat-purple);
  color: #fff;
  font-size: .8125rem;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(43, 37, 48, .3);
}
.eat-map:hover .eat-map-label { filter: brightness(1.08); }



.eat-tips { margin: 12px 0 0; padding: 0; list-style: none; }
.eat-tips li {
  position: relative;
  padding-left: 16px;
  margin-top: 10px;
  font-size: .8125rem;
  line-height: 1.6;
  color: var(--eat-soft);
}
.eat-tips li::before {
  content: "";
  position: absolute;
  left: 0; top: .55em;
  width: 5px; height: 5px;
  border-radius: 999px;
  background: var(--eat-purple);
}
.eat-tips strong { color: var(--eat-ink); }

.eat-nearby { margin: 12px 0 0; padding: 0; list-style: none; }
.eat-nearby li + li { margin-top: 8px; }
.eat-nearby a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px;
  border-radius: 12px;
  color: var(--eat-ink);
  text-decoration: none;
  font-size: .875rem;
  font-weight: 700;
}
.eat-nearby a:hover { background: var(--eat-sand); color: var(--eat-purple); }
.eat-nearby img {
  width: 52px; height: 52px;
  flex: none;
  object-fit: cover;
  border-radius: 10px;
}

.eat-back { margin: 34px 0 0; font-size: .9375rem; }
.eat-back a { color: var(--eat-purple); font-weight: 700; }

/* ---------------------------------------------------------- responsive -- */

@media (max-width: 900px) {
  .eat-gallery { max-width: none; }
  .eat-slide { aspect-ratio: 4 / 3; max-height: 46vh; }
  .eat-slides { max-height: 46vh; }
  .eat-strip-item { width: 76px; height: 54px; }
  .eat-body { grid-template-columns: 1fr; }

  /* Stacked, the sidebar would fall below the reviews and the form, putting the
     address and the directions button several screens down -- on the device
     most likely to be standing in the street wanting exactly those. It goes
     above the reading matter instead. */
  .eat-aside { order: -1; }
}

@media (max-width: 560px) {
  .eat { padding: 16px 12px 48px; }
  .eat-field-row { grid-template-columns: 1fr; }
  .eat-action { flex: 1 1 calc(50% - 5px); justify-content: center; padding: 0 12px; }
  .eat-action--primary { flex-basis: 100%; }
  .eat-review-head time { margin-left: 0; flex-basis: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .eat-action, .eat-star-input label, .eat-nav, .eat-dot { transition: none; }
  .eat-slides { scroll-behavior: auto; }
  .eat-action:hover, .eat-star-input label:hover { transform: none; }
}


/* ------------------------------------------------------- the write-up --

   Only on activity pages. This is Melissa's own markup out of the post editor,
   so the job here is to give it sane defaults rather than to style it
   precisely -- it may contain headings, lists or nothing but paragraphs. */

.do-article-body {
  margin-top: 10px;
  max-width: 68ch;
  font-size: 1rem;
  line-height: 1.75;
  color: var(--eat-ink);
}
.do-article-body p { margin: 0 0 1em; }
.do-article-body p:last-child { margin-bottom: 0; }
.do-article-body h2,
.do-article-body h3,
.do-article-body h4 {
  margin: 1.4em 0 .4em;
  font-family: "Open Sans", sans-serif;
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--eat-ink);
}
.do-article-body ul,
.do-article-body ol { margin: 0 0 1em; padding-left: 1.3em; }
.do-article-body li { margin-bottom: .35em; }
.do-article-body a { color: var(--eat-purple); }
.do-article-body img {
  max-width: 100%;
  height: auto;
  border-radius: 12px;
  margin: .6em 0;
}
.do-article-body iframe { max-width: 100%; }

.do-article-source {
  margin: 14px 0 0;
  font-size: .75rem;
  color: var(--eat-soft);
}

/* Editors only: the way into the post editor, since the write-up is rich markup
   and cannot be edited in place without flattening it. */
.do-article-edit { margin: 12px 0 0; }
.do-article-edit a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px dashed var(--eat-line);
  background: #fff;
  color: var(--eat-purple);
  font-size: .8125rem;
  font-weight: 700;
  text-decoration: none;
}
.do-article-edit a:hover { border-color: var(--eat-purple); border-style: solid; }


/* ----------------------------------------------------------- operators --

   Who runs an activity. Plainer than a review: a name, a line, the practical
   details and a way out to their own site. */

.do-op-list { margin: 14px 0 0; padding: 0; list-style: none; }

.do-op {
  padding: 16px 18px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid var(--eat-line);
}
.do-op + .do-op { margin-top: 10px; }

.do-op-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px 14px;
}
.do-op-head h3 { font-size: 1.0625rem; font-weight: 700; }

.do-op-site {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: none;
  color: var(--eat-purple);
  font-size: .8125rem;
  font-weight: 700;
  text-decoration: none;
}
.do-op-site:hover { text-decoration: underline; }

.do-op-blurb {
  margin: 8px 0 0;
  font-size: .875rem;
  line-height: 1.6;
  color: var(--eat-soft);
}

.do-op-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin: 10px 0 0;
  font-size: .8125rem;
  color: var(--eat-soft);
}
.do-op-facts a { color: var(--eat-purple); font-weight: 700; }

/* Editors only, and folded away so a page with six operators on it is not six
   forms tall before anyone has asked to change one. */
.do-op-edit { margin-top: 12px; }
.do-op-edit summary {
  display: inline-block;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px dashed var(--eat-line);
  color: var(--eat-soft);
  font-size: .75rem;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}
.do-op-edit summary::-webkit-details-marker { display: none; }
.do-op-edit[open] summary { border-style: solid; border-color: var(--eat-purple); color: var(--eat-purple); }

.do-op-edit form { margin-top: 12px; max-width: 460px; }
.do-op-edit label {
  display: block;
  margin-bottom: 10px;
  font-size: .75rem;
  font-weight: 700;
  color: var(--eat-soft);
}
.do-op-edit input[type="text"],
.do-op-edit textarea {
  display: block;
  width: 100%;
  margin-top: 4px;
  padding: 9px 11px;
  border-radius: 10px;
  border: 1px solid var(--eat-line);
  background: var(--eat-sand);
  font: inherit;
  font-size: .875rem;
  font-weight: 400;
  color: var(--eat-ink);
}
.do-op-edit button {
  padding: 8px 18px;
  border: 0;
  border-radius: 999px;
  background: var(--eat-purple);
  color: #fff;
  font-size: .8125rem;
  font-weight: 700;
  cursor: pointer;
}
.do-op-del { margin-top: 10px; }
.do-op-del button { background: #c0554a; }

.do-op-add { display: block; margin-top: 14px; }

/* ------------------------------------------------------------ booking -- */

/* Lives here rather than in stay.css: this is the hotel detail page, and the
   detail pages all load eat.css. Put in the index stylesheet, the button
   rendered as a bare blue link -- the styles were on a sheet the page never
   asked for. */

/* The one thing someone on a hotel page wants to do, directly under the name.
   Sized and coloured to be the loudest thing above the fold. */
.stay-book { margin: 6px 0 20px; }

.stay-book-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 52px;
  padding: 0 26px;
  border-radius: 999px;
  background: #1c6b7a;
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 6px 18px rgba(28, 107, 122, .32);
  transition: transform .16s ease, box-shadow .16s ease;
}
.stay-book-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(28, 107, 122, .4);
  color: #fff;
}

/* Editors only: where the address behind that button is set. */
.stay-book-edit {
  margin: 10px 0 0;
  font-size: .8125rem;
  color: var(--eat-soft);
}
.stay-book-label {
  margin-right: 8px;
  font-size: .625rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.stay-book-edit.is-empty { padding: 8px 12px; border: 1px dashed var(--eat-line); border-radius: 10px; }