/* ==========================================================================
   listings.css — /listings-management (wave 3, 2026-09-04; reworked the same
   day by the fixer). Loads after feature-v2.css, feature-v3.css, show.css and
   home.css.

   Reworked 2026-09-05 by the simplify-and-port pass. Three things worth
   knowing before editing:
   1. The device (.lm-desk) is the product's venue screen, ported: the record
      you edit on the left, and on the right the dry run that says what would
      be sent, then the drift card for the site that disagrees. The argument
      is the two columns, so the prose does not repeat it.
   2. Every element that swaps text has room for its longest state reserved
      (.lm-pub, .lm-find-s), so no state swap makes the card jitter. The one
      thing that does change the height is the dry-run table, which is a
      deliberate disclosure: it is not there until you press Preview.
   3. Nothing on this page is under 13px, and muted text inside a port is
      #5b6076 (the product's #667085 and #929292 fail the contrast floor).
   ========================================================================== */

.lm-page .sec-tight { padding-top: 0; padding-bottom: clamp(40px, 4vw, 56px); }
/* the quote arrives with 116px above and below it from feature-v2.css, which stacks on the section before it */
.lm-page .tq-section { padding: clamp(40px, 4vw, 56px) 0; }

/* ---------- hero: the listing a customer reads on Google ---------- */
.lm-gcard { padding: 18px 20px 16px; }
.lm-g-now { margin-top: 2px; font: 500 15px/1.4 var(--font-display); color: var(--v2-body); }
.lm-g-now b { color: #0c7a52; font-weight: 700; }
.lm-g-hours { margin-top: 12px; border-top: 1px solid var(--v2-line); }
.lm-g-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: baseline; padding: 9px 0; border-bottom: 1px solid var(--v2-line); font: 400 13.5px/1.4 var(--font-body); color: var(--v2-body); }
.lm-g-row em { font-style: normal; font: 600 13.5px/1.4 var(--font-display); color: var(--ink); white-space: nowrap; }
.lm-g-row.is-hol span, .lm-g-row.is-hol em { color: var(--blue); }
.lm-g-row.is-hol em { font-weight: 700; }
.lm-g-meta { margin-top: 11px; font: 400 13px/1.4 var(--font-body); color: #6b7088; }

/* ---------- section heads: left aligned, so the page is not three centred blocks ---------- */
.lm-head { max-width: 720px; margin-bottom: 36px; }

/* ==========================================================================
   the device: the product's venue screen, ported from cloutly-frontend@origin/master
   DashboardListings/VenueListing.js (the `venueGrid`: the record card on the left, the publish preview and the
   drift cards on the right) and listings.module.scss. Two site rules override the product inside the port:
   nothing under 13px, and muted text is #5b6076 (6.21:1 on white, 5.80 on --v2-card, 5.70 on --ghost).
   The card's height must not change with its state: .lm-pub and .lm-find-s reserve room for their longest state,
   and the diff table's two rows are always in the DOM.
   ========================================================================== */
.lm-desk { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.06fr); border-radius: 20px; background: #fff; box-shadow: 0 0 0 1px var(--v2-line), var(--v2-shadow); overflow: hidden; }
.lm-rec { padding: 24px 26px 26px; }
.lm-out { padding: 24px 26px 26px; border-left: 1px solid var(--v2-line); background: #f9fafd; }

.lm-card-t { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 12px; margin: 0; font: 600 15px/1.35 var(--font-display); color: var(--ink); }
.lm-card-t em { margin-left: auto; font-style: normal; font: 400 13px/1.4 var(--font-body); color: #5b6076; }
.lm-card-s { margin: 4px 0 0; font: 400 13.5px/1.5 var(--font-body); color: #5b6076; }

/* the record form (VenueListing.js `field`: a label over a bordered input) */
.lm-field { margin-top: 18px; }
.lm-lab { display: block; margin-bottom: 7px; font: 600 14px/1.4 var(--font-display); color: var(--ink); }
.lm-input { display: block; width: 100%; max-width: 320px; padding: 11px 13px; border: 0; border-radius: 10px; background: #fff; box-shadow: 0 0 0 1px #d1d5db; font: 400 15px/1.4 var(--font-body); color: var(--ink); outline: none; }
.lm-input:focus-visible { box-shadow: 0 0 0 2px var(--blue); }
.lm-hrows { max-width: 320px; border-top: 1px solid var(--v2-line); }
.lm-hrow { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: baseline; padding: 8px 0; border-bottom: 1px solid var(--v2-line); font: 400 13.5px/1.4 var(--font-body); color: #5b6076; }
.lm-hrow em { font-style: normal; font: 500 13.5px/1.4 var(--font-display); color: var(--ink); white-space: nowrap; }

/* Special hours: the two affordances the product has, a dated closure and the portfolio's six-venue version */
.lm-seg { display: flex; flex-wrap: wrap; gap: 8px; }
.lm-seg button { display: inline-flex; align-items: center; gap: 9px; padding: 9px 13px; border: 0; border-radius: 10px; background: #fff; box-shadow: 0 0 0 1px #d1d5db; font: 500 13.5px/1.3 var(--font-display); color: var(--ink); cursor: pointer; text-align: left; transition: box-shadow .2s var(--ease-out), color .2s var(--ease-out); }
.lm-seg button b { padding: 3px 8px; border-radius: 6px; background: var(--v2-card); font: 500 13px/1.3 var(--font-body); color: #5b6076; white-space: nowrap; }
.lm-seg button:hover { box-shadow: 0 0 0 1px rgba(0, 61, 255, .45); color: var(--blue); }
.lm-seg button[aria-pressed="true"] { background: var(--ink); color: #fff; box-shadow: none; }
.lm-seg button[aria-pressed="true"] b { background: rgba(255, 255, 255, .16); color: #fff; }
.lm-seg button:focus-visible, .lm-acts button:focus-visible, .lm-btn:focus-visible { outline: 3px solid rgba(0, 61, 255, .45); outline-offset: 2px; }

.lm-save { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 0; }
.lm-btn { display: inline-block; padding: 10px 14px; border: 0; border-radius: 10px; background: var(--ink); color: #fff; font: 600 13.5px/1.3 var(--font-display); cursor: pointer; transition: background .2s var(--ease-out); }
.lm-btn:hover { background: var(--blue); }
.lm-btn--q { background: #fff; box-shadow: inset 0 0 0 1px #d1d5db; color: #374151; cursor: default; }
.lm-btn--q:hover { background: #fff; }
.lm-btn--go { background: var(--blue); }
.lm-btn--go:hover { background: var(--blue-2); }

/* the publish card: the product's dry run, Field / On Google now / Will become */
.lm-card { padding: 16px 18px 18px; border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px var(--v2-line); }
/* three lines of room, so no state of the card changes its height */
.lm-pub { min-height: 58px; margin: 8px 0 0; font: 400 13.5px/1.45 var(--font-body); color: #5b6076; transition: color .2s var(--ease-out); }
.lm-pub.is-ready { color: var(--ink); font-weight: 600; }
.lm-pub.is-done { color: #0c7a52; font-weight: 600; }
.lm-diff { margin-top: 6px; border-top: 1px solid var(--v2-line); }
.lm-diff[hidden] { display: none; }
.lm-diff-h, .lm-diff-r { display: grid; grid-template-columns: minmax(84px, .8fr) minmax(0, 1fr) minmax(0, 1fr); gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--v2-line); }
.lm-diff-r[hidden] { display: none; }
.lm-diff-h span { font: 600 13px/1.3 var(--font-display); color: #5b6076; letter-spacing: .02em; text-transform: uppercase; }
.lm-diff-r span { min-width: 0; font: 400 13.5px/1.4 var(--font-body); color: #5b6076; overflow: hidden; text-overflow: ellipsis; }
.lm-diff-r span:first-child { font-weight: 600; font-family: var(--font-display); color: var(--ink); }
.lm-diff-r span:last-child { font-weight: 600; font-family: var(--font-display); color: var(--blue); }
.lm-confirm { margin: 0; }
.lm-confirm [hidden] { display: none; }
.lm-confirm .lm-btn { margin-top: 14px; }
.lm-fb { margin: 12px 0 0; padding-top: 12px; border-top: 1px solid var(--v2-line); font: 400 13px/1.5 var(--font-body); color: #5b6076; }

/* ---------- the drift card (VenueListing.js driftCard): headline, evidence, the two real actions ---------- */
.lm-find { margin-top: 14px; padding: 14px 16px; border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px var(--v2-line); }
.lm-find-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; margin: 0; font: 600 14.5px/1.35 var(--font-display); color: var(--ink); text-wrap: pretty; }
.lm-find-h em { margin-left: auto; font-style: normal; font: 400 13px/1.4 var(--font-body); color: #5b6076; white-space: nowrap; }
.lm-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: #c9184a; align-self: center; }
/* one grid, so the two labels share an auto-sized column and the values line up whatever the source is called */
.lm-ev { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 10px; row-gap: 5px; margin-top: 10px; padding: 8px 10px; border-radius: 8px; background: var(--v2-card); }
.lm-ev > div { display: contents; }
.lm-ev span { font: 500 13px/1.4 var(--font-display); color: #5b6076; white-space: nowrap; }
.lm-ev em { min-width: 0; font: 400 13.5px/1.4 var(--font-body); font-style: normal; color: var(--ink); overflow: hidden; text-overflow: ellipsis; }
.lm-ev .is-obs em { color: #b03d09; }
.lm-acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 11px; }
.lm-acts button { padding: 6px 11px; border: 0; border-radius: 999px; background: var(--v2-card); box-shadow: inset 0 0 0 1px var(--v2-line); font: 500 13px/1.3 var(--font-display); color: var(--v2-body); cursor: pointer; text-align: left; transition: color .2s var(--ease-out), box-shadow .2s var(--ease-out); }
.lm-acts button:hover { color: var(--ink); box-shadow: inset 0 0 0 1px rgba(15, 13, 25, .28); }
.lm-acts button[aria-pressed="true"] { background: var(--ink); color: #fff; box-shadow: none; }
/* two lines reserved: this slot holds the consequence line at rest and the state after a click */
.lm-find-s { min-height: 42px; margin: 10px 0 0; font: 400 13px/1.45 var(--font-body); color: var(--v2-body); }
.lm-find-s .lm-badge { display: inline-block; padding: 2px 8px; border-radius: 6px; font: 600 13px/1.35 var(--font-display); }
.lm-find-s .is-ignored { background: #f1f2f7; color: #5c6178; }

/* ==========================================================================
   the ledger: the product's consistency matrix, with the official marks as its column heads
   (VenueListing.js "Where the internet agrees with you" + MATRIX_HEADERS + listingsData.js SOURCE_LABELS)
   ========================================================================== */
.lm-matrix { position: relative; padding: 20px 22px 18px; border-radius: 16px; background: #fff; box-shadow: 0 0 0 1px var(--v2-line), var(--v2-shadow); }
.lm-mx-wrap { margin-top: 14px; overflow-x: auto; }
.lm-mx-wrap:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.lm-mx { width: 100%; border-collapse: collapse; }
.lm-mx th, .lm-mx td { padding: 11px 12px; text-align: left; border-bottom: 1px solid #eef0f6; }
.lm-mx thead th { border-bottom: 1px solid #e7e9f2; font: 600 13px/1.3 var(--font-display); color: #5b6076; white-space: nowrap; }
.lm-mx tbody th { font: 500 13.5px/1.4 var(--font-display); color: var(--ink); white-space: nowrap; }
.lm-mx tbody tr:last-child th, .lm-mx tbody tr:last-child td { border-bottom: 0; }
.lm-mk { display: inline-grid; place-items: center; width: 22px; height: 22px; margin-right: 8px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1px var(--v2-line); vertical-align: -6px; }
.lm-mk .icon { width: 13px; height: 13px; }
.mx-ok { font-style: normal; font: 600 15px/1 var(--font-display); color: #0c7a52; }
.mx-bad { font-style: normal; font: 500 13px/1.4 var(--font-body); color: #b03d09; white-space: nowrap; }
.mx-na { font-style: normal; font: 400 13px/1.4 var(--font-body); color: #5b6076; white-space: nowrap; }
.mx-chip { display: inline-block; padding: 2px 9px; border-radius: 999px; background: #fff0cc; font-style: normal; font: 600 13px/1.4 var(--font-display); color: #8a5a00; white-space: nowrap; }

.lm-ledger { display: grid; grid-template-columns: 1fr 1fr; margin-top: 34px; border-top: 1px solid var(--v2-line); border-bottom: 1px solid var(--v2-line); }
.lm-led { padding: 26px 34px 28px 0; }
.lm-led + .lm-led { padding: 26px 0 28px 34px; border-left: 1px solid var(--v2-line); }
.lm-led-h { display: flex; align-items: center; gap: 6px; margin: 0; font: 600 14px/1.3 var(--font-display); color: var(--ink); }
.lm-led-h .lm-mk { margin-right: 0; vertical-align: baseline; }
.lm-led-h .lm-mk:first-of-type { margin-left: 6px; }
.lm-led p { margin: 14px 0 0; font: 400 16px/1.6 var(--font-body); color: var(--v2-body); text-wrap: pretty; }

.lm-network { margin-top: 30px; }
.lm-next { margin-top: 14px; }
.lm-network a, .lm-next a { color: var(--ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(15, 13, 25, .3); }
.lm-network a:hover, .lm-next a:hover { color: var(--blue); text-decoration-color: currentColor; }

/* ---------- breakpoints ---------- */
/* listings.css loads after feature-v2/v3, so the stacking rules are restated here rather than inherited */
@media (max-width: 880px) {
  .lm-desk { grid-template-columns: minmax(0, 1fr); }
  .lm-out { border-left: 0; border-top: 1px solid var(--v2-line); }
  .lm-input, .lm-hrows { max-width: 100%; }
  .lm-ledger { grid-template-columns: 1fr; }
  .lm-led { padding: 24px 0 12px; }
  .lm-led + .lm-led { padding: 12px 0 26px; border-left: 0; border-top: 1px solid var(--v2-line); }
  .lm-rec, .lm-out { padding: 22px 18px 24px; }
  .lm-head { margin-bottom: 28px; }
}
/* the Status columns sit off the right edge on a phone, and the TripAdvisor column is the argument, so the
   scroller gets a right-edge fade and a tab stop */
@media (max-width: 760px) {
  .lm-matrix::after {
    content: ""; position: absolute; right: 1px; top: 84px; bottom: 1px; width: 34px; border-radius: 0 16px 16px 0;
    background: linear-gradient(to right, rgba(255, 255, 255, 0), #fff 78%); pointer-events: none;
  }
}
@media (max-width: 560px) {
  .lm-ev { grid-template-columns: minmax(0, 1fr); row-gap: 2px; }
  .lm-seg button, .lm-acts button { flex: 1 1 auto; }
  .lm-find-s { min-height: 62px; }
  .lm-matrix { padding: 16px 14px 14px; }
  .lm-mx th, .lm-mx td { padding: 10px 9px; }
  .lm-diff-h, .lm-diff-r { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); gap: 6px; }
}

/* ---------- still state for captures and reduced motion ---------- */
.no-motion .lm-seg button, .no-motion .lm-acts button, .no-motion .lm-btn, .no-motion .lm-pub { transition: none; }
@media (prefers-reduced-motion: reduce) {
  .lm-seg button, .lm-acts button, .lm-btn, .lm-pub { transition: none; }
}