/* Movvent Partners: the organiser pages (events, event, edit, live). Classes start with .og-. Tokens come from base.css.
   No inline styles anywhere (the CSP has no 'unsafe-inline'). */

.og-page { display: grid; gap: var(--s5); max-inline-size: 1100px; min-inline-size: 0; }
.og-page-form { max-inline-size: 860px; }
.og-org { font-size: 1.0625rem; font-weight: 700; }
.og-sub { font-size: .8125rem; color: var(--ink-muted); }
.og-muted { color: var(--ink-muted); font-size: .875rem; }
.og-title { font-size: 1.375rem; overflow-wrap: anywhere; }
.og-subtitle { font-size: 1rem; }
.og-back { display: inline-flex; align-items: center; gap: 4px; justify-self: start; font-weight: 600; text-decoration: none; }
.og-back:hover { text-decoration: underline; }
.og-badges { display: inline-flex; flex-wrap: wrap; gap: var(--s1); }
.og-actions { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; }
.og-ltr { text-align: start; }
.og-note {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); padding: 10px 14px; border-radius: var(--r-md);
  background: var(--warning-soft); color: var(--on-warning-soft); font-size: .875rem; font-weight: 600;
}
.og-note-bad { background: var(--danger-soft); color: var(--on-danger-soft); }

/* list */
.og-filter { overflow-x: auto; }
.og-event-cell { display: grid; gap: 2px; }
.og-event-title { font-weight: 600; }
.og-col-title { min-inline-size: 200px; }
.og-waiting {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s3);
  padding: var(--s3) var(--s4); border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line);
  border-inline-start: 4px solid var(--volt); box-shadow: var(--shadow-card);
}
.og-waiting-text { overflow-wrap: anywhere; }

/* event header */
.og-headcard { display: grid; gap: var(--s4); }
.og-head { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s4); }
.og-head-main { display: grid; gap: var(--s4); min-inline-size: 0; }
.og-cover { border-radius: var(--r-md); }
.og-cover img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.og-head .og-cover { max-block-size: 200px; }
.og-cover-edit { max-inline-size: 320px; max-block-size: 180px; margin-block-end: var(--s3); }
@media (min-width: 760px) {
  .og-has-cover { grid-template-columns: 220px minmax(0, 1fr); }
  .og-head .og-cover { max-block-size: none; min-block-size: 140px; }
}

/* people */
.og-people { display: grid; gap: var(--s5); min-inline-size: 0; }
.og-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s3); }
.og-search { flex: 1 1 220px; max-inline-size: 320px; }
.og-person { display: inline-flex; align-items: center; gap: var(--s2); min-inline-size: 0; }
.og-person-name { font-weight: 600; overflow-wrap: anywhere; }
.og-initial {
  inline-size: 32px; block-size: 32px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: var(--accent-soft); color: var(--on-accent-soft); font-weight: 700; font-size: .875rem;
}
.og-queue { display: grid; gap: var(--s3); }
.og-review-grid { display: grid; gap: var(--s3); grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.og-review {
  display: grid; align-content: start; gap: var(--s3); padding: var(--s3); background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-card); min-inline-size: 0;
}
.og-evidence { aspect-ratio: 3 / 4; min-block-size: 0; }
.og-evidence img, .og-evidence video { inline-size: 100%; block-size: 100%; object-fit: cover; }
.og-noevidence { padding: var(--s5) var(--s3); text-align: center; color: var(--ink-muted); background: var(--surface-2); border-radius: var(--r-md); font-size: .875rem; }
.og-review-body { display: grid; gap: var(--s2); justify-items: start; }
.og-review-name { font-weight: 700; overflow-wrap: anywhere; }

/* helpers, rows */
.og-rows { list-style: none; padding: 0; display: grid; }
.og-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding: var(--s2) 0; border-block-end: 1px solid var(--line); min-inline-size: 0; }
.og-row:last-child { border-block-end: 0; }
.og-row-end { display: inline-flex; align-items: center; gap: var(--s3); flex: none; font-size: .875rem; color: var(--ink-muted); }
.og-helpers { display: grid; gap: var(--s2); }

/* message, export */
.og-broadcast, .og-export { display: grid; gap: var(--s3); max-inline-size: 640px; }
.og-check { display: inline-flex; align-items: center; gap: var(--s2); }
.og-check input { inline-size: 18px; block-size: 18px; accent-color: var(--accent); }
.og-dialog-body { display: grid; gap: var(--s3); }

/* form */
.og-form { display: grid; gap: var(--s4); }
.og-grid { display: grid; gap: var(--s4); align-items: start; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 700px) { .og-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.og-sticky {
  position: sticky; inset-block-end: 0; padding: var(--s3) 0; background: var(--bg); border-block-start: 1px solid var(--line); z-index: 2;
}

/* live */
.og-live { max-inline-size: 760px; }
.og-livecard { display: grid; gap: var(--s3); }
.og-big { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s3); }
.og-big-num { font-size: clamp(3.5rem, 14vw, 6rem); font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.og-big-of { font-size: 1.25rem; color: var(--ink-muted); }
.og-bar { inline-size: 100%; block-size: 14px; }
.og-bar-track { fill: var(--surface-3); }
.og-bar-fill { fill: var(--accent); }
.og-waiting-link { justify-self: start; font-weight: 700; padding: 6px 14px; border-radius: var(--r-full); background: var(--volt); color: var(--forest); text-decoration: none; }
.og-updated { text-align: end; }

/* Nothing here may push the page wider than the screen: wide tables scroll inside their card. */
.og-page, .og-people, .og-queue, .og-page .section, .og-headcard, .og-form { grid-template-columns: minmax(0, 1fr); }
.og-page > *, .og-people > *, .og-page .section > * { min-inline-size: 0; }
.og-people table.data, .og-list table.data { min-inline-size: 640px; }
.og-list td time, .og-people td time, .og-people td { white-space: nowrap; }
.og-person-name { overflow-wrap: normal; white-space: nowrap; }
.og-arrivals .og-person-name { white-space: normal; overflow-wrap: anywhere; }

@media (max-width: 600px) {
  .og-row { align-items: flex-start; flex-wrap: wrap; }
  .og-actions .btn { flex: 1 1 auto; }
}