/*
 * AGPFM-openmic-pages-v1.css — everything that draws an open-mic CARD, in one file.
 *
 * These rules used to live inside open-mics.html. Phase 2 added state, city and listing pages that
 * render the same card markup from the server, and a copy of the card CSS on each of those pages
 * is a guarantee they will diverge — a colour changed in one place and not the others. So the card,
 * its status chip, its comments, the correction sheet and the map live here, and every page that
 * shows a card links this file.
 *
 * open-mics.html keeps only what is unique to the SEARCH page: the three filter panels and the
 * status row.
 */
/* ── Cards ────────────────────────────────────────────────────────────── */
.om-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1rem; }
@media (max-width: 560px) { .om-grid { grid-template-columns: 1fr; } }

.om-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 1rem 1.05rem 1.1rem;
  display: flex; flex-direction: column; gap: .55rem;
  /* A grid item's min-width is auto, so one long unbreakable token (an address, a URL in a basis
     sentence) widens the whole track and scrolls the page sideways — 377px cards in a 375px phone
     on a located search, sandbox test 2026-09-23. */
  min-width: 0; overflow-wrap: anywhere;
}
.om-card h3 {
  font-family: var(--font-display); font-size: 1.22rem; color: var(--warm-white);
  margin: 0; line-height: 1.25;
}
.om-where { color: var(--muted); font-size: .92rem; }
.om-place-note { color: var(--muted); font-size: .82rem; font-style: italic; margin-top: .1rem; }
/* A kind no source settled: the chip is outlined, not filled, and the sentence beside it says why. */
.om-type.uncertain { background: transparent; border: 1px dashed var(--border); opacity: .85; }
.om-type-note { color: var(--muted); font-size: .82rem; font-style: italic; }
.om-series { color: var(--muted); font-size: .82rem; }
/* Which release of the Open Mic Database the page is showing — the foot of the directory. */
.om-release { color: var(--muted); font-size: .8rem; text-align: center; margin: 2rem auto 1rem; max-width: 60ch; }
.om-release[hidden] { display: none; }
.om-when { color: var(--text-light); font-size: 1rem; }
/* Owner: cost sits directly under the time, and only when one is actually known. */
.om-cost { color: var(--info); font-size: .93rem; }
.om-reach { color: var(--accent-text); font-size: .88rem; }
.om-types { display: flex; flex-wrap: wrap; gap: .3rem; }
.om-type {
  font-size: .74rem; text-transform: uppercase; letter-spacing: .06em;
  border: 1px solid var(--border); border-radius: 999px;
  padding: .1rem .5rem; color: var(--muted);
}

/* The status chip carries its own explanation: hover for the blurb, click for the evidence. */
.om-chip {
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: .35rem;
  border-radius: 999px; padding: .16rem .6rem;
  font-size: .78rem; letter-spacing: .04em; text-transform: uppercase;
  border: 1px solid; background: none; cursor: pointer;
  font-family: var(--font-body);
}
.om-chip[data-k="confirmed"]   { color: var(--success); border-color: var(--success); }
.om-chip[data-k="likely"]      { color: var(--info);    border-color: var(--info); }
.om-chip[data-k="unconfirmed"] { color: var(--warning); border-color: var(--warning); }
.om-chip[data-k="closed"]      { color: var(--danger);  border-color: var(--danger); }
/* v17.12 (owner): the expand/contract arrow at twice its old size, on every badge. */
.om-chip .tw { font-size: 1.24rem; line-height: .6; opacity: .85; display: inline-block; transition: transform .18s ease; }
.om-chip[aria-expanded="true"] .tw { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) { .om-chip .tw { transition: none; } }

.om-basis {
  border-left: 2px solid var(--border); padding: .1rem 0 .1rem .7rem;
  color: var(--text); font-size: .92rem; line-height: 1.55;
}
.om-basis[hidden] { display: none; }
.om-basis .om-checked { display: block; color: var(--muted); font-size: .82rem; margin-top: .4rem; }
.om-sources { margin-top: .4rem; font-size: .82rem; color: var(--muted); }
.om-sources a { color: var(--accent-text); }
.om-caveat { color: var(--muted); font-size: .86rem; }

/* Owner: every card says call ahead; unconfirmed says it in the warning orange. */
.om-call { font-size: .86rem; }
.om-call.warn  { color: var(--warning); }
.om-call.muted { color: var(--muted); }

.om-reports {
  color: var(--warning); font-size: .86rem;
  background: rgba(251,146,60,.08); border: 1px solid rgba(251,146,60,.3);
  border-radius: var(--radius); padding: .3rem .55rem;
}
.om-links { display: flex; flex-wrap: wrap; gap: .8rem; font-size: .9rem; }
.om-links a { color: var(--accent-light); }

.om-actions {
  display: flex; flex-wrap: wrap; gap: .45rem;
  border-top: 1px solid var(--border); padding-top: .7rem; margin-top: auto;
}
.om-act {
  background: none; border: 1px solid var(--border); color: var(--muted);
  border-radius: var(--radius); padding: .3rem .6rem; cursor: pointer;
  font-family: var(--font-body); font-size: .84rem;
}
.om-act:hover { border-color: var(--accent-dim); color: var(--text); }
.om-act[disabled] { opacity: .55; cursor: default; }
.om-said { font-size: .85rem; color: var(--success); padding: .3rem 0; width: 100%; }

/* Comments, inline on the card. */
.om-comments { border-top: 1px solid var(--border); padding-top: .7rem; display: flex; flex-direction: column; gap: .7rem; }
.om-comment-who { font-size: .78rem; color: var(--muted); margin-bottom: .2rem; }
.om-comment-body { font-size: .93rem; color: var(--text); line-height: 1.5; white-space: pre-wrap; }
.om-comment-photo { display: block; margin-top: .4rem; border-radius: var(--radius); max-height: 220px; }
.om-comment-form { display: flex; flex-direction: column; gap: .45rem; }
.om-comment-form textarea {
  background: var(--elevated); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: .5rem .6rem; font-family: var(--font-body); font-size: .93rem;
  min-height: 70px; resize: vertical; width: 100%;
}
.om-comment-form .om-act { align-self: flex-start; }
/* v17.42: the attached comment photo, small, with Remove */
.om-comment-thumb { display: flex; align-items: center; gap: .6rem; }
.om-comment-thumb[hidden] { display: none; }
.om-comment-thumb img { width: 64px; height: 64px; object-fit: cover; border-radius: var(--radius); border: 1px solid var(--border); }
.om-comment-thumb-x { background: none; border: 0; color: var(--accent-light); font: .62rem var(--font-mono, monospace); letter-spacing: .06em; text-transform: uppercase; cursor: pointer; padding: .2rem; }

/* ── Page furniture ───────────────────────────────────────────────────── */
.om-tools { display: flex; gap: .6rem; flex-wrap: wrap; margin: 0 0 1rem; }
.om-map {
  display: none; width: 100%; height: 460px; margin: 0 0 1.2rem;
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  overflow: hidden; background: var(--elevated);
}
/* Google's info window is a light box whatever the page does, so its contents are styled for
   a light ground rather than inheriting the site's dark text colours. */
.om-map-info { font-family: var(--font-body); color: #1a1a1a; max-width: 240px; line-height: 1.45; }
.om-map-info b { font-family: var(--font-display); font-size: .98rem; }
.om-map-info a { color: #6d28d9; }
.om-map-info .om-place-note { color: #555; }
/* Under the map: how many pins stand at a town centre rather than an address, and how many
   listings could not be placed at all. Empty (hidden) when every result has a street point. */
.om-map-note { color: var(--muted); font-size: .85rem; margin: -.6rem 0 1rem; }
.om-map-note[hidden] { display: none; }
/* The online-only offer a located search makes instead of pretending a Zoom room is nearby. */
.om-online-note { color: var(--muted); font-size: .88rem; margin: 0 0 1rem; }
.om-online-note[hidden] { display: none; }
.om-online-note a { color: var(--accent-text); }
.om-state { text-align: center; padding: 2.5rem 1rem; color: var(--muted); }
.om-state[hidden] { display: none; }
.om-pager { display: flex; justify-content: center; align-items: center; gap: .8rem; margin: 1.6rem 0 .5rem; }
.om-pager[hidden] { display: none; }
.om-pager .om-act[disabled] { visibility: hidden; }
.om-pagenum { color: var(--muted); font-size: .9rem; }

/* ── Modal (correction · new listing) ─────────────────────────────────── */
.om-scrim {
  position: fixed; inset: 0; z-index: 9000; background: rgba(8,5,16,.78);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 4vh 1rem; overflow-y: auto;
}
.om-scrim[hidden] { display: none; }
.om-sheet {
  background: var(--surface); border: 1px solid var(--accent-dim);
  border-radius: var(--radius-lg); width: min(560px, 100%);
  padding: 1.3rem 1.4rem 1.5rem; position: relative;
}
.om-sheet h2 { font-family: var(--font-display); color: var(--warm-white); margin: 0 0 .3rem; font-size: 1.4rem; }
.om-sheet .sub { color: var(--muted); font-size: .9rem; margin: 0 0 1rem; line-height: 1.5; }
.om-x {
  position: absolute; top: .5rem; right: .7rem; background: none; border: none;
  color: var(--muted); font-size: 1.6rem; cursor: pointer; line-height: 1;
}
.om-field { margin-bottom: .75rem; }
.om-field label { display: block; font-size: .82rem; color: var(--muted); margin-bottom: .25rem; }
.om-field input, .om-field select, .om-field textarea {
  width: 100%; background: var(--elevated); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: .5rem .6rem; font-family: var(--font-body); font-size: .95rem;
}
.om-field textarea { min-height: 80px; resize: vertical; }
.om-two { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.om-check { display: flex; gap: .5rem; align-items: flex-start; font-size: .9rem; color: var(--text); margin: .6rem 0 1rem; }
.om-check input { accent-color: var(--accent); margin-top: .25rem; }
.om-sheet-msg { font-size: .9rem; margin: .5rem 0; min-height: 1.2rem; }
.om-sheet-msg.err { color: var(--danger); }
.om-sheet-msg.ok  { color: var(--success); }
.om-sheet-actions { display: flex; gap: .6rem; justify-content: flex-end; }

/* ── Place pages: state, city, listing (phase 2) ─────────────────────────── */

.om-crumbs {
  max-width: var(--max-width); margin: 0 auto; padding: .8rem 1rem 0;
  font-size: .85rem; color: var(--muted);
}
.om-crumbs a { color: var(--accent-text); text-decoration: none; }
.om-crumbs a:hover { color: var(--accent-light); text-decoration: underline; }
.om-crumbs .sep { margin: 0 .45rem; opacity: .6; }

.om-places { margin: 1.8rem 0 0; }
.om-places h2,
.page-wrap > section > h2 {
  font-family: var(--font-display); color: var(--warm-white);
  font-size: 1.25rem; margin: 0 0 .7rem;
}
.om-citylist {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: .3rem .9rem;
}
.om-citylist li { padding: .18rem 0; font-size: .95rem; }
.om-citylist a { color: var(--accent-light); text-decoration: none; }
.om-citylist a:hover { text-decoration: underline; }
/* The count beside a town, and the schedule beside a sibling listing — supporting detail, so it
   reads as quieter than the link it follows. */
.om-n { color: var(--muted); font-size: .82rem; }
.om-singles { color: var(--muted); font-size: .9rem; line-height: 1.6; margin: .9rem 0 0; }

/* A listing on its own page is the whole page, so it is not squeezed into a grid column. */
.om-single { max-width: 680px; }
.om-single .om-card h1 {
  font-family: var(--font-display); color: var(--warm-white);
  font-size: 1.9rem; margin: 0; line-height: 1.2;
}

/* The pager on a server-rendered page is real links, not buttons, so they need the button look. */
.om-pager a.om-act { text-decoration: none; }

/* The comment form's two buttons sit on one row; the textarea keeps the full width above them. */
.om-comment-controls { display: flex; gap: .45rem; flex-wrap: wrap; }

/* "Include surrounding areas" (request 7). Lit when the page or search came back empty. */
.om-surround.lit {
  border-color: var(--warning); color: var(--warning);
  box-shadow: 0 0 0 3px rgba(251,146,60,.18);
  animation: om-pulse 1.6s ease-in-out 2;
}
.om-surround[aria-pressed="true"] { background: var(--accent-dim); color: var(--warm-white); border-color: var(--accent); }
@keyframes om-pulse { 0%,100% { box-shadow: 0 0 0 3px rgba(251,146,60,.18); } 50% { box-shadow: 0 0 0 6px rgba(251,146,60,.32); } }
#om-surround-note { margin: .4rem 0 .8rem; }
#om-surround-grid { margin-top: .6rem; }
/* An author display:grid on .om-grid outranks the browser's own [hidden]{display:none}, so a
   hidden grid stayed on screen. Found in a screenshot after the DOM check had already passed —
   `hidden` was set; the cards were still there. */
.om-grid[hidden] { display: none; }

/* The venue beneath an event-named heading ("Pittsburgh Songwriters Circle" / at Starlite Lounge). */
.om-venue { color: var(--muted); font-size: .95rem; margin: -.15rem 0 .1rem; }


/* ── v17.12 card: types above the venue, phone and map under the address, one status row ── */
.om-head { display: flex; justify-content: space-between; align-items: baseline; gap: .8rem; }
.om-head .om-reach { white-space: nowrap; font-family: var(--font-mono, monospace); font-size: .8rem; }
/* v17.33 (owner, 2026-09-29): on a phone a wrapping title pushed the distance into the gap beside it.
   Below 768px the distance takes its own line under the title. */
@media (max-width: 768px) {
  .om-head { flex-wrap: wrap; row-gap: .1rem; }
  .om-head > :first-child { flex: 1 1 100%; min-width: 0; }
  .om-head .om-reach { flex: 1 1 100%; }
}
.om-phone { font-size: .95rem; }
.om-phone a { color: var(--accent-text); }
.om-online { color: var(--muted); font-size: .9rem; }
.om-maprow { display: flex; }
.om-mapbtn { display: inline-flex; align-items: center; gap: .4rem; background: transparent; cursor: pointer;
  border: 1px solid var(--border); border-radius: 999px; color: var(--text); padding: .3rem .65rem;
  font: .78rem/1 var(--font-mono, monospace); }
.om-mapbtn svg { width: .85rem; height: .85rem; }
/* v17.45 (work plan Q5): Directions, beside Show on map and in the map's pop-up */
.om-maprow { gap: .4rem; flex-wrap: wrap; }
.om-dir { display: inline-flex; align-items: center; gap: .4rem; border: 1px solid var(--border); border-radius: 999px; color: var(--text);
  padding: .3rem .65rem; font: .78rem/1 var(--font-mono, monospace); text-decoration: none; }
.om-dir:hover { border-color: var(--accent); color: var(--accent-light); }
.om-dir svg { width: .85rem; height: .85rem; }
.om-map-info .om-map-dir { display: inline-block; margin-left: .6rem; }
.om-map-info .om-map-dir svg { display: none; }
.om-mapbtn[aria-expanded="true"] { border-color: var(--accent); color: var(--accent-text); }
/* A square map: as tall as the card is wide, never wider than the card. */
.om-cardmap { width: 100%; aspect-ratio: 1 / 1; border-radius: var(--radius-md, 10px); overflow: hidden;
  border: 1px solid var(--border); background: var(--elevated); color: var(--muted); font-size: .88rem;
  display: grid; place-items: center; }
.om-cardmap[hidden] { display: none; }
.om-when { display: flex; flex-wrap: wrap; gap: .4rem; align-items: baseline; font-family: var(--font-mono, monospace); font-weight: 700; font-size: .92rem; color: var(--warm-white); }
/* The uncertain part of a schedule or a kind: dashed until opened, same text on hover. */
.om-xp { font: 400 .74rem/1 var(--font-mono, monospace); letter-spacing: .03em; color: var(--warning); cursor: pointer;
  background: transparent; border: 1px dashed var(--warning); border-radius: 999px; padding: .22rem .5rem; }
.om-xp[aria-expanded="true"], .om-type.uncertain[aria-expanded="true"] { border-style: solid; }
button.om-type.uncertain { cursor: pointer; font: inherit; color: var(--muted); }
.om-xp.om-seasonal { color: var(--info, #5dd6de); border-color: var(--info, #5dd6de); }
.om-xpbody { font-size: .95rem; color: var(--text); background: var(--elevated); border-radius: 8px; padding: .5rem .7rem; }
.om-xpbody[hidden] { display: none; }
.om-more { font: .72rem/1 var(--font-mono, monospace); background: transparent; cursor: pointer; color: var(--accent-text);
  border: 1px solid var(--accent); border-radius: 999px; padding: .28rem .6rem; }
.om-card.om-sibling { border-style: dashed; }
.om-status { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.om-basis .om-why-lead { color: var(--warm-white); }
.om-basis p { margin: 0 0 .45rem; }
/* Sources: one clean line each (owner). */
/* v17.16: sources are a table — "Source", optional "Page dated", "Last checked" — so our check date
   cannot be read as a date on the page. Small caps headings; on a phone the dates stack under the name. */
.om-src { width: 100%; border-collapse: collapse; margin: .4rem 0 0; font-size: .88rem; }
.om-src th { text-align: left; font: 600 .66rem/1.2 var(--font-body, inherit); letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted); padding: 0 .5rem .25rem 0; border-bottom: 1px solid var(--border, rgba(127,127,127,.25)); }
.om-src th:not(:first-child), .om-src td.om-src-date { text-align: right; padding-right: 0; padding-left: .75rem; }
.om-src td { padding: .35rem .5rem .35rem 0; vertical-align: baseline; }
.om-src tr + tr td { border-top: 1px solid var(--border, rgba(127,127,127,.12)); }
.om-src-name { display: flex; gap: .5rem; align-items: baseline; }
.om-src-name > span:last-child { min-width: 0; overflow-wrap: anywhere; }
.om-src a { color: var(--accent-text); }
.om-src-meta { color: var(--muted); }
.om-src-states { display: block; color: var(--text-secondary, var(--muted)); font-size: .82rem; margin-top: .1rem; }
.om-src-date { color: var(--muted); font: .74rem/1.3 var(--font-mono, monospace); white-space: nowrap; }
@media (max-width: 480px) {
  .om-src thead { display: none; }
  .om-src tr { display: block; padding: .35rem 0; }
  .om-src tr + tr { border-top: 1px solid var(--border, rgba(127,127,127,.12)); }
  .om-src td { display: block; padding: 0; border: 0 !important; }
  .om-src td.om-src-name { display: flex; }
  .om-src td.om-src-date { text-align: left; padding: .1rem 0 0 1rem; }
  .om-src td.om-src-date::before { content: attr(data-h) " "; font: 600 .62rem/1 var(--font-body, inherit);
    letter-spacing: .06em; text-transform: uppercase; }
}
.om-dot { width: .5rem; height: .5rem; border-radius: 50%; display: inline-block; background: var(--muted); }
.om-dot.supports { background: var(--success); }
.om-dot.contradicts { background: var(--warning); }
/* The correction form's kinds. */
.om-kinds { border: 1px solid var(--border); border-radius: 8px; padding: .5rem .7rem .6rem; display: flex; flex-wrap: wrap; gap: .4rem .9rem; }
.om-kinds legend { font-size: .82rem; color: var(--muted); padding: 0 .3rem; }
.om-kind { display: inline-flex; align-items: center; gap: .35rem; font-size: .95rem; }
.om-kind.guess { outline: 1px dashed var(--muted); outline-offset: 2px; border-radius: 4px; }

/* v17.16: reader input waiting for an admin — a submitted listing posted with minimum detail, or a
   correction / disagreement on a listing. Quiet, not a warning: it says we heard them. */
.om-pending { margin-top: .45rem; font-size: .84rem; color: var(--accent-text); }
.om-pending-date { color: var(--muted); }
.om-card-pending { border-style: dashed; }

/* ── v17.20: the week strip (owner, 2026-09-25) — one card per venue, a day card per weekday ──────── */
/* A venue card takes the full row: the week needs the width, and single cards beside it would stretch. */
.om-venuecard {
  grid-column: 1 / -1;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 1rem 1.05rem 1.1rem;
  display: flex; flex-direction: column; gap: .5rem; min-width: 0; overflow-wrap: anywhere;
}
.om-venuecard .om-vname { font-family: var(--font-display); font-size: 1.22rem; color: var(--warm-white); margin: 0; line-height: 1.25; }
.om-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; margin-top: .2rem; }
.om-dcol { display: grid; gap: 3px; align-content: start; container-type: inline-size; background: none; border: 0; padding: 0; color: inherit; font: inherit; cursor: pointer; }
.om-dcol:disabled { cursor: default; }
.om-dlabel { font: .7rem/1 var(--font-mono, monospace); color: var(--muted); text-align: center; letter-spacing: .03em; }
.om-dcol.has .om-dlabel { color: var(--warm-white); }
/* Day card: minimal padding, badges stacked from the top (owner). */
.om-dcard { border: 1px solid rgba(127,127,127,.18); border-radius: 6px; min-height: 42px; padding: 2px 1px;
  display: grid; gap: 2px; justify-items: center; align-content: start; }
.om-dcol.has .om-dcard { border-color: var(--border); }
.om-dcol.sel .om-dcard { background: var(--elevated, rgba(255,255,255,.04)); border-color: var(--accent); }
.om-dcol:focus-visible .om-dcard { outline: 2px solid var(--accent); outline-offset: 1px; }
.om-dgrp { display: grid; gap: 1px; justify-items: center; }
.om-dunder { font: .54rem/1.15 var(--font-mono, monospace); color: var(--muted); text-align: center; }
.faded { opacity: .45; }

/* The type badge: outline = status (solid green confirmed, dashed orange not), jam as a second line. */
.om-tb { display: inline-grid; justify-items: center; gap: 1px; font: .6rem/1.15 var(--font-mono, monospace); letter-spacing: .06em;
  text-transform: uppercase; color: var(--text); border: 1.5px solid; border-radius: 7px; padding: 2px 6px 3px; white-space: nowrap; }
.om-tb.ok { border-color: var(--success); border-style: solid; }
.om-tb.un { border-color: var(--warning); border-style: dashed; }
.om-tb.closed { border-color: var(--muted); border-style: dotted; }
.om-tb-j { color: var(--muted); font-size: .9em; }
.om-tb.big { font-size: .68rem; padding: 4px 10px 5px; }
/* Words step down only when the day card runs out of room: word → abbreviation → first letter. */
.om-w-a, .om-w-l { display: none; }
@container (max-width: 74px) { .om-w-f { display: none; } .om-w-a { display: inline; } .om-dcol .om-tb { letter-spacing: .02em; padding: 1px 4px 2px; } }
@container (max-width: 34px) { .om-w-a { display: none; } .om-w-l { display: inline; } .om-dcol .om-tb { padding: 1px 3px 2px; } }

/* Nights with no day, or occasional, listed under the day cards. */
.om-loosed { display: grid; gap: 4px; }
.om-loose { display: flex; gap: 8px; align-items: center; text-align: left; font: inherit; font-size: .9rem; color: inherit; background: none;
  padding: 4px 8px; border: 1px solid rgba(127,127,127,.18); border-radius: 6px; cursor: pointer; }
.om-loose.sel { border-color: var(--accent); background: var(--elevated, rgba(255,255,255,.04)); }
.om-loose-when { font-family: var(--font-mono, monospace); font-size: .76rem; color: var(--muted); }

/* A night inside a venue card: the full current card, without the venue it already sits under. */
.om-nights { display: grid; gap: .6rem; }
.om-card.om-night { background: none; border: 0; border-top: 1px solid var(--border); border-radius: 0; padding: .7rem 0 0; }
.om-card.om-night + .om-card.om-night { border-top-style: dashed; }
.om-card.om-night[hidden] { display: none; }
.om-outside { font: .72rem var(--font-mono, monospace); color: var(--muted); }
/* v17.23: competitive slam / featured readers */
.om-format { font-size: .86rem; color: var(--accent-text); }

/* v17.35 venue claims: the verified mark, and a reply from the venue under a comment */
.om-verified { display: inline-block; width: max-content; max-width: 100%; align-self: flex-start; justify-self: start; margin: .15rem 0 .1rem; font-family: var(--font-mono, monospace); font-size: .68rem;
  letter-spacing: .06em; color: var(--success); border: 1px solid rgba(106,192,122,.5); border-radius: 999px; padding: .08rem .5rem; }
.om-venue-actions { margin-top: .6rem; }
.om-reply { margin: .45rem 0 0 .9rem; padding: .45rem .7rem; border-left: 2px solid var(--success); background: rgba(106,192,122,.06); border-radius: 0 8px 8px 0; }
.om-reply .om-comment-who { color: var(--success); }
.om-reply-form { margin: .45rem 0 0 .9rem; display: grid; gap: .4rem; }
.om-reply-form textarea { min-height: 70px; }