/* Extras for the events admin: payment-page link box, inline Delete
   buttons and the description WYSIWYG. Sits alongside Django's admin CSS. */

/* --- Payment page link box (event change form) -------------------------- */
.payment-page-box {
  background: var(--darkened-bg, #f8f2f4);
  border: 1px solid var(--hairline-color, #e0d3d8);
  border-radius: 6px;
  padding: 0.8rem 1rem 1rem;
  margin-bottom: 1.5rem;
}
.payment-page-box h2 {
  margin: 0.2rem 0 0.5rem;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.payment-page-box p { margin: 0 0 0.5rem; }
.payment-page-row { display: flex; gap: 0.5rem; align-items: center; }
.payment-page-row input[type="text"] {
  flex: 1;
  font-family: var(--font-family-monospace, monospace);
  min-width: 0;
}
.payment-page-note { font-size: 0.85rem; color: var(--body-quiet-color, #666); }

/* --- Inline "Delete" buttons (Event sessions, price options) ------------ */
.inline-delete-button {
  background: var(--error-fg, #ba2121);
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 4px 10px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
}
.inline-delete-button:hover { background: var(--link-hover-color, #a01c1c); }
.inline-delete-button.inline-delete-undo {
  background: var(--default-button-bg, #4c2b3a);
}
tr.inline-delete-marked td {
  opacity: 0.45;
  text-decoration: line-through;
}

/* --- WYSIWYG description editor ------------------------------------------ */
.wysiwyg-wrap { margin-bottom: 0.5rem; }
.wysiwyg-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  align-items: center;
  border: 1px solid var(--border-color, #ccc);
  border-bottom: none;
  border-radius: 4px 4px 0 0;
  padding: 4px;
  background: var(--darkened-bg, #f5f5f5);
}
.wysiwyg-separator {
  width: 1px;
  height: 1.3rem;
  background: var(--border-color, #ccc);
  margin: 0 4px;
}
.wysiwyg-button {
  min-width: 2rem;
  padding: 3px 8px;
  border: 1px solid transparent;
  border-radius: 4px;
  background: transparent;
  color: var(--body-fg, #333);
  font-size: 0.85rem;
  cursor: pointer;
}
.wysiwyg-button:hover {
  background: #fff;
  border-color: var(--border-color, #ccc);
}
.wysiwyg-editor {
  border: 1px solid var(--border-color, #ccc);
  border-radius: 0 0 4px 4px;
  min-height: 12rem;
  padding: 8px 10px;
  background: var(--body-bg, #fff);
  font-size: 0.875rem;
  line-height: 1.45;
  overflow-y: auto;
}
.wysiwyg-editor:focus {
  border-color: var(--primary, #603649);
  outline: none;
}
.wysiwyg-editor h3 { font-size: 1.05rem; margin: 0.8em 0 0.3em; }
.wysiwyg-editor p { margin: 0 0 0.6em; }
.wysiwyg-editor ul, .wysiwyg-editor ol { margin: 0 0 0.6em; padding-left: 1.4em; }
.wysiwyg-editor a { color: var(--link-fg, #603649); }

/* ---- Help & guide / Testing playbook ----------------------------------- */
/* Uses Django admin's own CSS variables so it follows light and dark mode. */
.help-page { max-width: 54rem; }
.help-page h2 {
  margin: 2rem 0 .6rem;
  padding-bottom: .3rem;
  border-bottom: 2px solid var(--hairline-color, #e8e8e8);
}
.help-page h3 { margin: 1.4rem 0 .4rem; font-size: 1rem; }
.help-page p, .help-page li { line-height: 1.55; }
.help-page table { width: 100%; margin: .6rem 0 1rem; }
.help-page th { width: 12rem; text-align: left; vertical-align: top; }

/* A short "you are here" line under a heading: where to click to get there. */
.help-where {
  display: inline-block;
  margin: 0 0 .7rem;
  padding: .25rem .6rem;
  border-radius: 4px;
  background: var(--darkened-bg, #f4f4f4);
  border: 1px solid var(--hairline-color, #e0e0e0);
  font-size: .82rem;
}
.help-where code { background: none; padding: 0; }

/* Call-outs: a thing worth pausing on, and a thing that would cost money. */
.help-note, .help-warn {
  margin: .9rem 0;
  padding: .7rem .9rem;
  border-left: 4px solid var(--primary, #603649);
  background: var(--darkened-bg, #f7f5f6);
  border-radius: 0 4px 4px 0;
}
.help-warn { border-left-color: #c9553d; }
.help-note p:last-child, .help-warn p:last-child { margin-bottom: 0; }

/* Numbered walkthrough steps with a "what you should see" line. */
.help-page ol.help-steps > li { margin-bottom: .6rem; }
.help-check {
  display: block;
  margin-top: .25rem;
  font-size: .85rem;
  opacity: .85;
}
.help-check::before { content: "✓ You should see: "; font-weight: 600; }

/* Screenshots, and placeholders for ones not taken yet. */
.help-shot { margin: 1rem 0 1.4rem; }
.help-shot img {
  max-width: 100%;
  border: 1px solid var(--hairline-color, #ddd);
  border-radius: 6px;
}
.help-shot figcaption {
  margin-top: .4rem;
  font-size: .85rem;
  opacity: .8;
}
.help-shot-box {
  border: 2px dashed var(--hairline-color, #c8c8c8);
  border-radius: 6px;
  padding: 1rem 1.1rem;
  background: var(--darkened-bg, #fafafa);
}
.help-shot-tag {
  display: inline-block;
  font-size: .72rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-weight: 700;
  opacity: .7;
}
.help-shot-shows { margin: .35rem 0 .3rem; font-weight: 600; }
.help-shot-file { margin: 0; font-size: .82rem; opacity: .75; }

/* Inline SVG diagrams scale down on a phone. */
.help-diagram { margin: 1rem 0 1.4rem; }
.help-diagram svg { max-width: 100%; height: auto; }
.help-diagram figcaption { margin-top: .4rem; font-size: .85rem; opacity: .8; }

/* ---- Price options: fields that only apply to some rows ----------------- */
/* "Early-bird ends" and "Suggested £" are meaningless on a row whose box
   isn't ticked, so admin-extras.js empties the cell rather than greying it.
   Greying still left Django's calendar shortcut clickable, so a date could be
   set on a standard price and then silently dropped on save.
   The <td> itself stays, keeping the columns aligned. */
td.dd-field-off > *,
.dd-field-off > .datetimeshortcuts {
  display: none !important;
}
/* Django writes the widget as "Date: <p>…</p><br>Time: <p>…</p>" inside a <p>,
   and a <p> can't nest, so the browser closes the outer one early and those
   two words end up as bare text sitting directly in the cell — no element to
   hide. A stray "Time:" was showing on every standard price row. Zeroing the
   cell's font size removes any such loose text; the dash sets its own back. */
td.dd-field-off { font-size: 0; }
/* A faint dash so the empty cell reads as "not applicable", not "broken". */
td.dd-field-off::after {
  content: "—";
  font-size: .8125rem;
  opacity: .35;
}

/* ---- Questions changelist: filter bar instead of the sidebar ------------ */
/* Rachel filters by class or workshop almost every time, so the controls sit
   on one line above the list rather than in a permanent right-hand column. */
.dd-filterbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem 1rem;
  padding: .5rem .75rem;
  margin: 0 0 .5rem;
  background: var(--darkened-bg, #f6f6f6);
  border: 1px solid var(--hairline-color, #e0e0e0);
  border-radius: 4px;
}
.dd-filter { display: inline-flex; align-items: center; gap: .4rem; }
.dd-filter label {
  font-size: .8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .03em;
  opacity: .75;
  white-space: nowrap;
}
.dd-filter select {
  max-width: 22rem;
  padding: .25rem .4rem;
}
.dd-filter-clear { font-size: .82rem; white-space: nowrap; }

/* The sidebar is gone, so reclaim the space Django reserves for it. */
.model-question #changelist.filtered { margin-right: 0; }
.model-question #changelist.filtered .results,
.model-question #changelist.filtered #toolbar,
.model-question #changelist.filtered #changelist-form,
.model-question #changelist.filtered .paginator { margin-right: 0; }

@media (max-width: 767px) {
  .dd-filter { width: 100%; }
  .dd-filter select { flex: 1; max-width: none; }
}

/* ---- "All my questions" library ---------------------------------------- */
.dd-library { width: 100%; border-collapse: collapse; margin: 1rem 0; }
.dd-library th, .dd-library td {
  text-align: left;
  vertical-align: top;
  padding: .5rem .6rem;
  border-bottom: 1px solid var(--hairline-color, #e8e8e8);
}
.dd-library th { font-size: .8rem; text-transform: uppercase; letter-spacing: .03em; opacity: .75; }
.dd-library td:first-child { font-weight: 600; }
.dd-library-type, .dd-library-state { white-space: nowrap; }
.dd-library-off { opacity: .6; }
.dd-library-warn { color: #c9553d; }

/* Numbered key beneath an annotated diagram. */
.help-page ol.help-callouts {
  margin: -.6rem 0 1.4rem;
  padding-left: 1.4rem;
}
.help-page ol.help-callouts li { margin-bottom: .25rem; }

/* ---- Printing the Help & guide and Testing playbook --------------------- */
/* Rachel works from paper. Two things have to hold: the admin's furniture
   mustn't come with it, and nothing may print faint or tiny — several styles
   here are deliberately quiet on screen (.help-check, figure captions, the
   menu-path chips) and would be a poor photocopy at 85% opacity. */
@media print {
  /* 1. Admin furniture — none of it means anything on paper. */
  #header, #nav-sidebar, #footer, #user-tools, .breadcrumbs,
  .toggle-nav-sidebar, .skip-to-content-link, .theme-toggle,
  #content-related, .messagelist, .no-print { display: none !important; }

  /* 2. Let the text use the whole sheet. */
  html, body, #container, .main, #content, #content-main, .content,
  .colM, .help-page {
    display: block !important;
    float: none !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* 3. Ink on paper, whatever the screen theme was — Django's dark mode
     would otherwise print white text on nothing. */
  html, body, .help-page { background: #fff !important; color: #000 !important; }
  .help-page h1, .help-page h2, .help-page h3,
  .help-page p, .help-page li, .help-page td, .help-page th,
  .help-page a, .help-page em, .help-page strong, .help-page code {
    color: #000 !important;
    background: transparent !important;
  }

  /* 4. Nothing faint, nothing small. Every quiet style is restored to full
     strength and to a size that survives a photocopier. */
  .help-page, .help-page p, .help-page li, .help-page td, .help-page th {
    font-size: 11pt !important;
    line-height: 1.45 !important;
  }
  .help-check, .help-where, .help-shot figcaption, .help-diagram figcaption,
  .help-shot-tag, .help-shot-file, .help-page .help,
  .help-page ol.help-callouts li,
  .dd-library th, .dd-library-off, .dd-library-type, .dd-library-state {
    opacity: 1 !important;
    font-size: 10.5pt !important;
    color: #000 !important;
  }
  .help-page h1 { font-size: 20pt !important; }
  .help-page h2 { font-size: 14pt !important; }
  .help-page h3 { font-size: 12pt !important; }

  /* Keep the call-outs legible without relying on background printing, which
     browsers omit by default: give them a real border instead. */
  .help-note, .help-warn, .help-where {
    border: 1pt solid #000 !important;
    background: transparent !important;
    padding: .4rem .6rem !important;
  }
  .help-warn { border-width: 2pt !important; }

  /* "All my questions" is a reference worth printing too, and its On/Off
     column is the point of it — that must not come out grey on grey. */
  .dd-library th, .dd-library td { border-bottom: .5pt solid #000 !important; }
  .dd-library-off::after { content: " (switched off)"; }

  /* 5. Don't split things that only make sense whole. */
  .help-page h1, .help-page h2, .help-page h3 {
    break-after: avoid; page-break-after: avoid;
  }
  figure, .help-diagram, .help-shot, .help-note, .help-warn,
  .help-page table, .help-page ol.help-callouts, .help-page li {
    break-inside: avoid; page-break-inside: avoid;
  }

  /* 6. Diagrams and screenshots fit the sheet, and keep their colours —
     they carry the meaning, so they're worth the ink. */
  .help-page img, .help-page svg {
    max-width: 100% !important;
    height: auto !important;
  }
  .help-diagram, .help-shot {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  @page { margin: 15mm; }
}

/* --- Operator only (bookthecircle.com admin) ----------------------------
   Sections and pages only the platform operator ever sees are purple, so
   they're never mistaken for something an organiser can see. */
:root { --operator-colour: #6a3fa0; --operator-tint: rgba(106, 63, 160, 0.08); }
.operator-badge {
  display: inline-block;
  margin-left: 0.4rem;
  padding: 0.05rem 0.45rem;
  border-radius: 999px;
  background: var(--operator-colour);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  vertical-align: middle;
}
.module.operator-only > table > caption,
.module.operator-only > h2 { background: var(--operator-colour); }
tr.operator-only th, tr.operator-only td { background: var(--operator-tint); }
tr.operator-only th { box-shadow: inset 4px 0 0 var(--operator-colour); }
.operator-banner {
  margin: 0 0 1rem;
  padding: 0.6rem 1rem;
  border-left: 4px solid var(--operator-colour);
  background: var(--operator-tint);
  border-radius: 4px;
}

/* --- Instalment plan schedule (bookings) -------------------------------- */
.instalment-table { border-collapse: collapse; margin-bottom: 0.3rem; }
.instalment-table th, .instalment-table td { padding: 0.35rem 0.8rem 0.35rem 0; text-align: left; vertical-align: middle; }
.instalment-table th { font-size: 0.8rem; text-transform: uppercase; color: var(--body-quiet-color, #666); }
.instalment-table tr.paid td { color: var(--body-quiet-color, #666); }
.instalment-table tr.new input[type="text"]::placeholder { font-style: italic; }
.instalment-table .undo-paid { font-size: 0.8rem; white-space: nowrap; }

/* Help & guide: one page per admin screen (templates/accounts/help/). */
.help-topnav { display: flex; justify-content: space-between; gap: 1rem; margin: 0 0 .4rem; }
.help-count { color: var(--body-quiet-color, #666); }
.help-pager {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem;
  margin: 2.5rem 0 1rem; padding-top: 1rem; border-top: 2px solid var(--hairline-color, #e8e8e8);
}
.help-pager > span:last-child { text-align: right; }
.help-open { margin: 0 0 1rem; }
.help-toc { margin: .3rem 0 1rem; padding-left: 1.2rem; }
.help-toc li { margin: .35rem 0; }
.help-contents h3 { margin-top: 1.2rem; }
@media (max-width: 640px) {
  .help-pager { grid-template-columns: 1fr; text-align: center; }
  .help-pager > span:last-child { text-align: center; }
}

/* Booking questions list grouped by event (intake/question/change_list_results.html). */
#result_list .question-group-head th {
  background: var(--darkened-bg, #f4f0f2);
  border-top: 2px solid var(--primary, #603649);
  padding: .55rem .6rem;
  font-size: .95rem;
  text-transform: none;
  letter-spacing: normal;
}
.question-group-kind {
  display: inline-block; margin-right: .4rem; padding: 0 .4rem; border-radius: 3px;
  background: var(--primary, #603649); color: #fff; font-size: .75rem; font-weight: 600;
}
.question-group-count { color: var(--body-quiet-color, #666); font-weight: normal; }
.question-group-links { float: right; font-weight: normal; }

/* "Add event" format picker (admin/events/format_picker.html) */
.format-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1rem; margin-top: 1rem; }
.format-card { border: 1px solid var(--hairline-color, #e0d3d8); border-radius: 8px; padding: 1rem 1.1rem; background: var(--body-bg, #fff); }
.format-card h2 { margin: 0 0 .4rem; font-size: 1.05rem; }
.format-card p { margin: 0 0 .7rem; }
.format-card-weekly { background: var(--darkened-bg, #f8f2f4); }
.format-series { list-style: none; margin: 0 0 .8rem; padding: 0; }
.format-series li .button { white-space: nowrap; flex-shrink: 0; }
.format-series li { display: flex; justify-content: space-between; align-items: center; gap: .5rem; padding: .35rem 0; border-bottom: 1px solid var(--hairline-color, #e0d3d8); }

/* --- Organiser menu (admin/_organiser_menu.html) ------------------------
   A row under the header on a laptop; a bar along the bottom on a phone. */
#header { flex-wrap: wrap; }
.org-menu { flex-basis: 100%; margin: 0.6rem -40px -15px; padding: 0 40px; background: rgba(0, 0, 0, 0.12); }
.org-menu__items { display: flex; flex-wrap: wrap; align-items: center; gap: 0.2rem; margin: 0; padding: 0; list-style: none; }
.org-menu__item { position: relative; list-style: none; padding: 0; }
.org-menu__item > a,
.org-menu__item summary {
  display: flex; align-items: center; gap: 0.35rem;
  padding: 0.6rem 0.8rem; color: var(--header-link-color, #fff);
  font-weight: 600; font-size: 0.95rem; text-decoration: none;
  cursor: pointer; list-style: none; border-bottom: 3px solid transparent;
}
.org-menu__item summary::-webkit-details-marker { display: none; }
.org-menu__item summary::after { content: "▾"; font-size: 0.7rem; opacity: 0.8; }
.org-menu__item.is-current > a,
.org-menu__item.is-current summary { border-bottom-color: var(--header-branding-color, #E9A924); }
.org-menu__item > a:hover, .org-menu__item summary:hover { background: rgba(255, 255, 255, 0.1); color: #fff; }
.org-menu__icon { display: none; }
.org-menu__links { margin: 0; padding: 0.3rem 0; list-style: none; }
.org-menu__group .org-menu__links {
  position: absolute; z-index: 50; top: 100%; left: 0; min-width: 14rem;
  background: var(--body-bg, #fff); border: 1px solid var(--hairline-color, #ddd);
  border-radius: 6px; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15); overflow: hidden;
}
.org-menu__links li { list-style: none; padding: 0; }
.org-menu__links a, .org-menu__links button {
  display: block; width: 100%; text-align: left; padding: 0.55rem 1rem;
  color: var(--body-fg, #222); font-size: 0.95rem; background: none; border: 0;
  font-weight: normal; cursor: pointer; text-decoration: none;
}
/* Beats Django base.css's #header a:link/:visited (an ID selector), which
   otherwise paints these links header-white — invisible on this white panel. */
#header .org-menu__links a:link, #header .org-menu__links a:visited,
#header .org-menu__links a:hover, #header .org-menu__links a:focus {
  color: var(--body-fg, #222);
}
.org-menu__links a:hover, .org-menu__links button:hover { background: var(--selected-bg, #f3e7ea); }
.org-menu__links a[aria-current="page"] { font-weight: 700; }
.org-menu__find { margin-left: auto; }
.org-menu__find input {
  width: 16rem; max-width: 40vw; padding: 0.4rem 0.6rem; border-radius: 4px;
  border: 0; font-size: 0.9rem;
}
.org-menu__find-link, .org-menu__more { display: none !important; }
.org-menu__sheet-heading { margin: 0.6rem 1rem 0.2rem; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--body-quiet-color, #666); }

/* --- Today (organiser admin home) --------------------------------------- */
.org-today.dashboard #content, .org-today #content { width: auto; max-width: 1200px; }
.org-today #content-related { display: none; }
.today-cols { display: grid; grid-template-columns: 1.4fr 1fr; gap: 1.2rem; align-items: start; }
.today-col { display: flex; flex-direction: column; gap: 1.2rem; min-width: 0; }
.today-card { border: 1px solid var(--hairline-color, #e0d3d8); border-radius: 8px; background: var(--body-bg, #fff); overflow: hidden; }
.today-card > h2, .today-all > summary {
  margin: 0; padding: 0.6rem 1rem; font-size: 0.85rem; text-transform: uppercase;
  letter-spacing: 0.05em; background: var(--darkened-bg, #f8f2f4); color: var(--body-fg, #333);
}
.today-all { margin-top: 1.2rem; border-color: var(--primary, #603649); }
.today-all > summary { cursor: pointer; background: var(--primary, #603649); color: #fff; font-weight: 700; font-size: 0.95rem; }
.today-all > summary::after { content: " ▾"; font-weight: 400; }
.today-all[open] > summary::after { content: " ▴"; }
.today-all .module { margin: 0.8rem 1rem; }
.today-checklist { margin-bottom: 1.2rem; border-color: var(--accent, #E9A924); }
.today-checklist p { margin: 0; padding: 0.7rem 1rem; }
.today-list { margin: 0; padding: 0; list-style: none; }
.today-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.8rem; padding: 0.7rem 1rem; border-top: 1px solid var(--hairline-color, #eee); list-style: none; }
.today-row:first-child { border-top: 0; }
.today-when { flex: none; width: 4.6rem; font-size: 0.85rem; color: var(--body-quiet-color, #666); line-height: 1.3; }
.today-what { flex: 1; min-width: 0; }
.today-what small { display: block; color: var(--body-quiet-color, #666); }
a.today-what { color: inherit; text-decoration: none; }
a.today-what strong { color: var(--link-fg, #603649); }
.today-places { flex: none; width: 7.5rem; }
.today-places small { color: var(--body-quiet-color, #666); }
.meter { display: block; height: 6px; border-radius: 3px; background: var(--hairline-color, #e6dde0); overflow: hidden; margin-bottom: 0.2rem; }
.meter span { display: block; height: 100%; background: var(--primary, #603649); }
.today-actions { flex: none; display: flex; gap: 0.4rem; }
.today .button, .today-quick .button { display: inline-block; padding: 0.45rem 0.8rem; border-radius: 4px; text-decoration: none; font-weight: 600; }
#content .today a.button.button--quiet:is(:link, :visited, :hover, :focus) { background: transparent; color: var(--link-fg, #603649); border: 1px solid var(--link-fg, #603649); }
#content .today a.button.button--quiet:hover { background: var(--selected-bg, #f3e7ea); }
.today-quick { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; padding: 0.8rem 1rem; }
.today-empty, .today-more { margin: 0; padding: 0.8rem 1rem; color: var(--body-quiet-color, #666); }
.chip { display: inline-block; padding: 0.1rem 0.55rem; border-radius: 999px; font-size: 0.8rem; font-weight: 700; white-space: nowrap; background: var(--selected-bg, #f3e7ea); color: var(--primary, #603649); }
.chip--paid, .chip--ok { background: #e3f2e8; color: #23613d; }
.chip--warn, .chip--pending { background: #fbeadb; color: #8a4a0c; }
.chip--bad, .chip--cancelled, .chip--refunded { background: #f8e1e1; color: #8f2626; }
.chip--muted, .chip--expired { background: #eee; color: #555; }

/* Wide inline tables (an event's prices) scroll inside their own box. */
body:has(.org-menu) .inline-group .tabular { overflow-x: auto; }

/* --- Tablet / small laptop ----------------------------------------------
   Django's own admin CSS switches #header to flex-direction: column at
   <=1024px (its own mobile layout); that fights our menu, which relies on
   #header being a row so the menu can wrap onto its own full-width line
   below it. Put it back, and stop bleeding the menu past the header's
   (now narrower, and not always 40px) side padding. Also give the Today
   cards the full width instead of squeezing the left column into a sliver. */
@media (max-width: 1024px) and (min-width: 701px) {
  body:has(.org-menu) #header { flex-direction: row; flex-wrap: wrap; }
  .org-menu { margin: 0.6rem 0 -15px; padding: 0; }
  .today-cols { grid-template-columns: 1fr; }
}

/* --- Phone: bottom menu bar, one column, lists as cards ----------------- */
@media (max-width: 700px) {
  body:has(.org-menu) { padding-bottom: 4.5rem; }
  body:has(.org-menu) #user-tools { display: none; }
  body:has(.org-menu) #header { padding: 0.6rem 16px; }
  .org-menu {
    position: fixed; z-index: 100; left: 0; right: 0; bottom: 0; margin: 0; padding: 0 0 env(safe-area-inset-bottom, 0);
    background: var(--header-bg, #603649); box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.2);
  }
  .org-menu__items { flex-wrap: nowrap; justify-content: space-around; gap: 0; }
  .org-menu__item { flex: 1; position: static; }
  .org-menu__group--money, .org-menu__group--your-site, .org-menu__group--help { display: none; }
  .org-menu__find form { display: none; }
  .org-menu__find { margin-left: 0; }
  .org-menu__find-link, .org-menu__more { display: block !important; }
  .org-menu__item > a, .org-menu__item summary {
    flex-direction: column; gap: 0.1rem; justify-content: center; min-height: 3.4rem;
    padding: 0.35rem 0.2rem; font-size: 0.75rem; border-bottom: 0; border-top: 3px solid transparent;
  }
  .org-menu__item.is-current > a, .org-menu__item.is-current summary { border-top-color: var(--header-branding-color, #E9A924); }
  .org-menu__item summary::after { display: none; }
  .org-menu__icon { display: block; font-size: 1.25rem; line-height: 1; }
  .org-menu__group .org-menu__links, .org-menu__sheet {
    position: fixed; left: 0; right: 0; bottom: 3.7rem; top: auto; max-height: 70vh; overflow-y: auto;
    background: var(--body-bg, #fff); border-radius: 12px 12px 0 0; box-shadow: 0 -6px 18px rgba(0, 0, 0, 0.2);
  }
  .org-menu__links a, .org-menu__links button { padding: 0.85rem 1.2rem; font-size: 1rem; }

  /* One column: what's on, what needs you, then the rest. */
  .today-cols { display: flex; flex-direction: column; }
  .today-col { display: contents; }
  .today-coming { order: 1; } .today-needs { order: 2; } .today-actions-card { order: 3; }
  .today-latest { order: 4; } .today-month { order: 5; }
  .today-row { flex-wrap: wrap; }
  .today-places { width: auto; flex: 1; }
  .today-actions { width: 100%; }
  .today-actions .button { flex: 1; text-align: center; padding: 0.75rem; font-size: 1rem; }

  /* Lists: each row a card, no checkboxes or bulk actions. */
  body:has(.org-menu) #changelist .actions,
  body:has(.org-menu) #changelist .action-checkbox,
  body:has(.org-menu) #changelist .action-checkbox-column { display: none; }
  body:has(.org-menu) #changelist table thead { display: none; }
  body:has(.org-menu) #changelist table,
  body:has(.org-menu) #changelist tbody,
  body:has(.org-menu) #changelist tr,
  body:has(.org-menu) #changelist td,
  body:has(.org-menu) #changelist th { display: block; width: auto; }
  body:has(.org-menu) #changelist tbody tr { border: 1px solid var(--hairline-color, #e0d3d8); border-radius: 8px; margin: 0 0 0.7rem; padding: 0.4rem 0.6rem; }
  body:has(.org-menu) #changelist tbody td,
  body:has(.org-menu) #changelist tbody th { border: 0; padding: 0.2rem 0.2rem; }
  body:has(.org-menu) #changelist .results { overflow: visible; }
  body:has(.org-menu) #changelist tbody td:is(.field-role, .field-paid, .field-checked_in, .field-card_icon, .field-event_format, .field-places, .field-status_chip) { display: inline-block; margin-right: 0.6rem; }
  body:has(.org-menu) #changelist .xfull, body:has(.org-menu) #changelist .paginator .showall { display: none; }
  body:has(.org-menu) #changelist-filter { display: none; }
  body:has(.org-menu) #changelist.show-filters #changelist-filter { display: block; position: static; width: auto; }
  body:has(.org-menu) .org-filter-toggle { display: inline-block; }

  /* Forms: labels above full-width inputs; wide tables scroll in their box. */
  body:has(.org-menu) .inline-group .tabular { overflow-x: auto; }
  body:has(.org-menu) .submit-row { position: sticky; bottom: 3.8rem; z-index: 20; }
}
.org-filter-toggle { display: none; margin: 0 0 0.6rem; }
.list-hint { margin: -0.4rem 0 1rem; color: var(--body-quiet-color, #666); max-width: 60rem; }
#result_list small.quiet { display: block; color: var(--body-quiet-color, #666); font-size: 0.8rem; }

/* --- Brief 2, parts 1 and 5: event overview, Find a guest, person page ----
   (templates/accounts/event_overview.html, find_guest.html, person.html) */
.ov { max-width: 62rem; }
.ov h1 { margin: 0.2rem 0 0.6rem; font-size: 1.6rem; line-height: 1.25; overflow-wrap: anywhere; }
.ov h1 .chip { vertical-align: middle; font-size: 0.85rem; }
.ov h2 { margin: 0 0 0.8rem; padding: 0; background: none; color: var(--body-fg, #333); font-size: 1.25rem; text-transform: none; letter-spacing: 0; }
.ov h3 { margin: 0 0 0.4rem; font-size: 1rem; text-transform: none; letter-spacing: 0; color: var(--body-quiet-color, #555); }
.ov-kicker { margin: 0; color: var(--body-quiet-color, #555); font-size: 0.95rem; }
.ov-quiet { color: var(--body-quiet-color, #666); }
.ov-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.6rem 0; }
#content .ov .ov-btn { display: inline-block; padding: 0.55rem 1rem; border-radius: 4px; font-size: 0.95rem; font-weight: 600; text-decoration: none; line-height: 1.3; height: auto; margin: 0; }
#content .ov a.ov-btn:not(.ov-btn--main), #content .ov button.ov-btn:not(.ov-btn--main) { background: transparent; color: var(--link-fg, #603649); border: 1px solid var(--link-fg, #603649); }
#content .ov .ov-btn--main { font-size: 1.1rem; padding: 0.65rem 1.5rem; }
.ov-secret { margin: 0.4rem 0 0; font-size: 0.9rem; }
.ov-secret label { display: block; margin-bottom: 0.25rem; }
.ov-copyrow { display: flex; gap: 0.4rem; max-width: 40rem; }
.ov-copyrow input { flex: 1; min-width: 0; padding: 0.45rem; font-size: 0.95rem; }
.ov-tabs { display: flex; flex-wrap: wrap; gap: 0.25rem 1.2rem; margin: 1rem 0; padding: 0.5rem 0; border-bottom: 1px solid var(--hairline-color, #e0d3d8); position: sticky; top: 0; z-index: 5; background: var(--body-bg, #fff); }
.ov-tabs a { font-weight: 600; padding: 0.2rem 0; }
.ov-section { margin: 0 0 1.8rem; scroll-margin-top: 3.5rem; }
.ov-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: 0.8rem; margin-bottom: 1.2rem; }
.ov-card { border: 1px solid var(--hairline-color, #e0d3d8); border-radius: 8px; padding: 0.8rem 1rem; min-width: 0; }
.ov-card p { margin: 0.2rem 0; }
.ov-big { font-size: 1.6rem; font-weight: 700; line-height: 1.2; }
.ov-big small { font-size: 0.9rem; font-weight: 400; color: var(--body-quiet-color, #666); }
.ov-list, .ov-prices, .ov-guests, .ov-more { list-style: none; margin: 0; padding: 0; }
.ov-list li { display: flex; justify-content: space-between; gap: 0.5rem; padding: 0.2rem 0; border-top: 1px solid var(--hairline-color, #eee); font-size: 0.9rem; }
.ov-prices li, .ov-guests li { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 1rem; padding: 0.55rem 0; border-bottom: 1px solid var(--hairline-color, #eee); list-style: none; }
.ov-price-name { flex: 1 1 12rem; font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.ov-guest-name { flex: 1 1 14rem; font-weight: 700; min-width: 0; overflow-wrap: anywhere; }
.ov-guest-bits { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.8rem; min-width: 0; overflow-wrap: anywhere; }
.ov-tick { color: #23613d; font-weight: 700; }
.ov-more li { padding: 0.45rem 0; list-style: none; }
.ov-gone { margin: 0.8rem 0; }
.ov-gone summary { cursor: pointer; font-weight: 600; }
.ov-note { border-left: 3px solid var(--hairline-color, #e0d3d8); padding: 0.2rem 0.8rem; margin: 0 0 0.8rem; }
.ov-note p { margin: 0.2rem 0; }
.ov-find { margin: 0 0 1.2rem; }
.ov-find label { display: block; font-weight: 600; margin-bottom: 0.3rem; }
.quiet-inline, .quiet-inline a { font-weight: 400; color: var(--body-quiet-color, #666); }
@media (max-width: 700px) {
  .ov h1 { font-size: 1.35rem; }
  .ov-actions .ov-btn { flex: 1 1 100%; text-align: center; }
  #content .ov .ov-btn--main { padding: 0.8rem; }
  .ov-cards { grid-template-columns: 1fr 1fr; gap: 0.5rem; }
  .ov-card { padding: 0.6rem 0.7rem; }
  .ov-big { font-size: 1.3rem; }
  .ov-copyrow { flex-wrap: wrap; }
  .ov-copyrow .ov-btn { flex: 1 1 100%; text-align: center; }
}
/* === Event form, shorter (brief 2, Part 4) ===============================
   templates/admin/events/event_change_form.html + edit_inline/*.html:
   section links down the side (across the top on a phone), fields side by
   side, sessions as one-line rows, prices as stacked cards with "More
   options", and a sticky Save bar. Behaviour: static/admin/js/event-form.js. */
#event_form { display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: 0 1.25rem; align-items: start; }
#event_form > div { min-width: 0; }
.ef-nav { position: sticky; top: 0.75rem; font-size: 0.85rem; }
.ef-nav ul { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--hairline-color, #e0d3d8); }
.ef-nav li { margin: 0; padding: 0; list-style: none; }
.ef-nav a { display: block; padding: 0.3rem 0.6rem; color: var(--body-quiet-color, #555); }
.ef-nav a:hover, .ef-nav a:focus { color: var(--link-fg, #603649); background: var(--darkened-bg, #f8f2f4); }
#event_form h2[id], #event_form h2.fieldset-heading { scroll-margin-top: 0.75rem; }

/* Tighter rows, fields side by side; long help texts stay short. */
#event_form fieldset.module { margin-bottom: 1rem; }
#event_form .form-row { padding: 6px 10px; }
#event_form .form-multiline { flex-wrap: wrap; gap: 0 1.5rem; }
#event_form .form-multiline > div { flex: 0 1 auto; min-width: 0; margin-right: 0; }
#event_form .form-multiline .fieldBox { margin-right: 0; }
#event_form .help { margin-top: 2px; font-size: 0.75rem; max-width: none; }
#event_form .field-description .wysiwyg-editor,
#event_form .field-description [contenteditable] { min-height: 7rem; }
#event_form fieldset .description { display: flex; gap: 0.75rem; align-items: baseline; flex-wrap: wrap; padding: 4px 10px; font-size: 0.8rem; }
#event_form .ef-help { margin-left: auto; font-weight: 600; }
/* Closed sections that follow each other share a line. */
#event_form > div > fieldset.module.collapse:has(> details:not([open])) { display: inline-block; width: calc(33.333% - 0.75rem); margin-right: 0.5rem; vertical-align: top; box-sizing: border-box; }

/* A section's Help link sits at the right of its heading bar. */
#event_form fieldset.module { position: relative; }
#event_form fieldset.module > .description:has(> .ef-help:only-child) { position: absolute; top: 0; right: 0; padding: 0.45rem 0.8rem; }
#event_form fieldset.module > .description:has(> .ef-help:only-child) .ef-help { color: var(--header-link-color, #fff); }

/* Shared by session/room rows and price cards. */
.ef-f { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ef-f > label { font-size: 0.75rem; font-weight: 600; color: var(--body-quiet-color, #555); padding: 0; width: auto; float: none; }
.ef-f--check { flex-direction: row; align-items: center; gap: 0.35rem; align-self: flex-end; padding-bottom: 0.45rem; }
.ef-f--check > label { font-size: 0.85rem; color: var(--body-fg, #333); font-weight: 400; }
.ef-f .readonly { padding: 0.35rem 0; margin: 0; }
.ef-f ul.errorlist { margin: 0; }
.ef-row .field-start, .ef-row .field-end { flex-wrap: wrap; }
.ef-f p.date, .ef-f p.time { display: inline-flex; align-items: center; margin: 0; white-space: nowrap; }
.ef-row .timezonewarning { display: none; }
.ef-f input[type=text], .ef-f input[type=number] { min-width: 0; }
.ef-f .vDateField { width: 6.5rem; }
.ef-f .vTimeField { width: 4.5rem; }

/* Rows and cards: labels beside their boxes, one line on a laptop. */
.ef-row-fields > .ef-f, .ef-card-main > .ef-f { flex-direction: row; align-items: center; gap: 0.35rem; }
.ef-row-fields > .ef-f > ul.errorlist, .ef-card-main > .ef-f > ul.errorlist { flex-basis: 100%; }
.ef-row .datetimeshortcuts { font-size: 0 !important; margin-left: 0.2rem; }
.ef-row .datetimeshortcuts a:first-child { display: none; }

/* Session and room rows: one line each. */
.ef-rows .inline-related { border-bottom: 1px solid var(--hairline-color, #e0d3d8); padding: 0.3rem 10px; }
.ef-rows .inline-related.empty-form { display: none; }
.ef-row-fields { display: flex; flex-wrap: wrap; gap: 0.4rem 0.75rem; align-items: center; }
.ef-row-fields .field-label input { width: 8rem; }
.ef-row-fields .field-capacity input, .ef-row-fields .field-places input,
.ef-row-fields .field-sort_order input { width: 4rem; }
.ef-row-fields .ef-delete, .ef-row-fields > span:last-child { margin-left: auto; align-self: center; }
.ef-row .field-end .session-end-date { display: none; }
.ef-row-fields .field-label { order: 5; }
.ef-row-fields .ef-delete { order: 6; }
.ef-row.ef-multi-day .field-end .session-end-date { display: inline-block; }
.ef-row.ef-multi-day .ef-anotherday { display: none; }
.ef-anotherday { font-size: 0.7rem; padding: 0; border: 0; background: none; color: var(--link-fg, #603649); text-decoration: underline; cursor: pointer; }
.ef-rows .add-row, .ef-cards .add-row { padding: 0.5rem 10px; }

/* Price cards. */
.ef-cards .inline-related { border: 1px solid var(--hairline-color, #e0d3d8); border-radius: 6px; margin: 0.4rem 10px; padding: 0.3rem 0.7rem; background: var(--body-bg, #fff); }
.ef-cards .inline-related.empty-form { display: none; }
.ef-cards .inline-related:not(.empty-form) { display: flex; flex-wrap: wrap; align-items: center; column-gap: 1rem; }
.ef-card-main { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; align-items: center; flex: 1 1 30rem; min-width: 0; }
.ef-card-main > .ef-f--check { align-self: center; padding-bottom: 0; }
.ef-card-main .field-name { flex: 1 1 12rem; }
.ef-card-main .field-name input { width: 100%; box-sizing: border-box; }
.ef-card-main .field-price_pence input { width: 5.5rem; }
.ef-card-main .ef-delete, .ef-card-main > span:last-child { margin-left: auto; align-self: center; }
.ef-card-more { font-size: 0.85rem; }
.ef-card-more[open] { flex-basis: 100%; }
.ef-cards .inline-related > ul.errorlist { flex-basis: 100%; }
.ef-card-more > summary { cursor: pointer; color: var(--link-fg, #603649); font-size: 0.8rem; }
.ef-card-more-body { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: 0.6rem 1.2rem; padding: 0.5rem 0 0.2rem; }
.ef-card-more-body .ef-f--check { align-self: start; padding-bottom: 0; flex-wrap: wrap; }
.ef-card-more-body .ef-f--check .help { flex-basis: 100%; }
.ef-card-more-body .field-available_until { grid-column: span 2; }
.ef-f.dd-field-off { display: none; }  /* "Suggested £" until Pay what you can is ticked */
.ef-card-more-body .ef-f input[type=text], .ef-card-more-body .ef-f input[type=number] { width: 7rem; }

/* Sticky Save bar. */
#event_form .ef-savebar { position: sticky; bottom: 0; z-index: 20; margin: 0; box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.08); justify-content: flex-start; flex-wrap: wrap; }
#event_form .ef-savebar .deletelink { margin-left: auto; }

@media (max-width: 1024px) {
  #event_form { grid-template-columns: minmax(0, 1fr); }
  .ef-nav { position: static; margin: 0 0 0.8rem; }
  .ef-nav ul { display: flex; flex-wrap: wrap; gap: 0.3rem; border: 0; }
  .ef-nav a { border: 1px solid var(--hairline-color, #e0d3d8); border-radius: 999px; padding: 0.25rem 0.65rem; }
  .ef-card-more-body .field-available_until { grid-column: auto; }
}
@media (max-width: 700px) {
  #event_form > div > fieldset.module.collapse:has(> details:not([open])) { display: block; width: auto; margin-right: 0; }
  body:has(.org-menu) #event_form .ef-savebar { bottom: 3.8rem; }
  #event_form .form-multiline > div { flex-basis: 100%; }
  .ef-cards .inline-related { margin: 0.5rem 0; }
  .ef-card-main .field-name { flex-basis: 100%; }
  .ef-card-more-body { grid-template-columns: minmax(0, 1fr); }
}
/* === end Event form, shorter ============================================ */
/* --- Booking page (/manage/booking/<ref>/, brief 2 parts 2-3) --------------
   Summary cards, a row of action buttons, notes and the move/cancel confirm
   pages. Cards stack on a phone; nothing is wider than the screen. */
.bp { max-width: 64rem; }
.bp h1 { margin: 0 0 0.3rem; font-size: 1.6rem; overflow-wrap: anywhere; }
.bp-qty { font-weight: 400; color: var(--body-quiet-color, #666); }
.bp-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.6rem; margin: 0 0 1rem; }
.bp-ref { color: var(--body-quiet-color, #666); }
.bp-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 1rem; align-items: center; }
.bp-actions form { margin: 0; display: inline; }
.bp .bp-btn { display: inline-block; padding: 0.55rem 0.95rem; border-radius: 6px; font-size: 0.95rem; line-height: 1.2; cursor: pointer; text-decoration: none; }
.bp .bp-btn--danger { background: #ba2121; color: #fff; border: 0; }
.bp .bp-btn--main { background: var(--primary, #603649); color: #fff; border: 0; }
.bp-note { background: #fbeadb; color: #6b3a09; padding: 0.5rem 0.75rem; border-radius: 6px; max-width: 46rem; }
.bp-quiet { color: var(--body-quiet-color, #666); }
.bp-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.bp-card { background: var(--body-bg, #fff); border: 1px solid var(--hairline-color, #e0d3d8); border-radius: 8px; padding: 0.8rem 1rem; min-width: 0; margin: 0 0 1rem; }
.bp-grid .bp-card { margin: 0; }
.bp-card h2 { margin: 0 0 0.5rem; font-size: 1.05rem; background: none; color: inherit; padding: 0; }
/* The label column never takes more than about half: a long label (a
   booking question) used to squeeze its answer into one letter's width. */
.bp-dl { display: grid; grid-template-columns: fit-content(45%) minmax(0, 1fr); gap: 0.3rem 0.9rem; margin: 0; }
.bp-dl dt { font-weight: 600; color: var(--body-quiet-color, #555); min-width: 6.5rem; }
/* Booking questions: the question over its answer, full width. */
.bp-dl--stacked { grid-template-columns: minmax(0, 1fr); gap: 0; }
.bp-dl--stacked dd { margin-bottom: 0.6rem; }
.bp-dl dd { margin: 0; overflow-wrap: anywhere; }
.bp-dates, .bp-list { margin: 0; padding-left: 1.1rem; }
.bp-list li { list-style: disc; margin: 0.2rem 0; }
.bp-code { font-family: ui-monospace, monospace; font-size: 0.85rem; }
.bp-notes textarea { display: block; width: 100%; box-sizing: border-box; margin: 0.4rem 0 0.6rem; font: inherit; }
.bp-tech summary { cursor: pointer; font-weight: 600; }
.bp-tech .bp-dl { margin-top: 0.6rem; }
.bp-choices { display: block; min-width: 0; }
.bp-choices legend { font-weight: 600; padding: 0 0.3rem; }
.bp-choice { display: flex; gap: 0.6rem; align-items: flex-start; padding: 0.55rem 0.3rem; border-bottom: 1px solid var(--hairline-color, #eee); cursor: pointer; }
.bp-choice:last-child { border-bottom: 0; }
.bp-choice input { margin-top: 0.25rem; flex: 0 0 auto; }
.bp-choice small { display: block; color: var(--body-quiet-color, #666); }
.bp-choice.is-off { opacity: 0.55; cursor: not-allowed; }
@media (max-width: 767px) {
  .bp-grid { grid-template-columns: minmax(0, 1fr); }
  .bp-actions .bp-btn, .bp-actions form { flex: 1 1 100%; }
  .bp-actions form .bp-btn { width: 100%; }
  .bp .bp-btn { text-align: center; padding: 0.75rem; font-size: 1rem; }
  .bp-dl { grid-template-columns: minmax(0, 1fr); gap: 0 0; }
  .bp-dl dd { margin-bottom: 0.45rem; }
}
/* ---- Site settings in short pages (brief 2, part 6) ----------------------
   Six pages with a small menu on the left; on a phone the menu sits on top
   as wrapping buttons. Colour pickers, font pairings with a preview line and
   "Set it up →" links on the Features page. */
.settings-layout { display: grid; grid-template-columns: 12rem minmax(0, 1fr); gap: 1.5rem; align-items: start; }
.settings-nav ul { list-style: none; margin: 0; padding: 0; position: sticky; top: 1rem; }
.settings-nav li { margin: 0 0 0.2rem; padding: 0; list-style: none; }
.settings-nav a { display: block; padding: 0.5rem 0.75rem; border-radius: 6px; text-decoration: none; color: var(--body-fg, #222); }
.settings-nav a:hover { background: var(--darkened-bg, #f4f4f4); }
.settings-nav a[aria-current="page"],
#content .settings-nav a[aria-current="page"]:is(:link, :visited) { background: var(--primary, #603649); color: #fff; font-weight: 600; text-decoration: none; }
.settings-main { min-width: 0; }
.settings-main #content-main { float: none; width: auto; }
.settings-pages fieldset.module { max-width: 52rem; }
.settings-pages input.colour-picker { width: 3.5rem; height: 2.2rem; padding: 2px; cursor: pointer; vertical-align: middle; }
.settings-pages .font-pairings { list-style: none; margin: 0; padding: 0; }
.settings-pages .font-pairings li { list-style: none; margin: 0 0 0.35rem; padding: 0; }
.settings-pages .font-pairings label { font-size: 1rem; font-weight: normal; width: auto; float: none; display: inline; }
.settings-pages .font-preview { display: block; margin-top: 0.5rem; padding: 0.6rem 0.8rem; border: 1px solid var(--hairline-color, #e0d3d8); border-radius: 6px; background: var(--body-bg, #fff); color: var(--body-fg, #222); }
.settings-pages .font-preview__heading { display: block; font-size: 1.5rem; font-weight: 600; }
.settings-pages .font-preview__body { font-size: 1rem; }
.settings-pages .feature-setup { margin-left: 0.25rem; font-weight: 600; white-space: nowrap; }
.settings-pages .feature-setup--off { font-weight: normal; color: var(--body-quiet-color, #666); }
.settings-pages .settings-aside { margin: 0.5rem 0 1rem; }
.settings-pages #stripe-connect-panel p.help { margin-left: 0; padding-left: 0; }
.settings-pages .connect-stripe-button { background: #635bff; color: #fff; font-weight: 600; }
@media (max-width: 767px) {
  .settings-layout { display: block; }
  .settings-nav ul { position: static; display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0 0 1rem; }
  .settings-nav li { margin: 0; }
  .settings-nav a { padding: 0.45rem 0.7rem; border: 1px solid var(--hairline-color, #e0d3d8); font-size: 0.95rem; }
  .settings-pages fieldset.module { max-width: none; }
  .settings-pages .form-row .flex-container.fieldBox, .settings-pages .fieldBox { float: none; display: block; margin: 0 0 0.6rem; }
}
/* ---- end Site settings pages ---- */

/* --- 1-to-1 diary edit: "When your events are on" section -----------------
   booking-page-admin.js moves each .help note before the widget so it reads
   first; these rules style it distinctly and keep each option on one line. */

/* Each radio/checkbox option stays on one line on desktop (Django 5 renders
   choices as <div> elements, not <li>). Fine to wrap on mobile. */
@media (min-width: 768px) {
  #id_hide_classes > div,
  #id_class_events > div {
    white-space: nowrap;
  }
}

/* "+" link would create a new Event, which makes no sense in this context. */
.field-class_events .add-related { display: none; }

/* --- Booking page admin: "When your events are on" choices ------------------
   booking-page-admin.js moves each note above its choices; on a wide screen
   Django's flex row then squeezed label | note | choices side by side. Stack
   them instead: label, note, choices, each full width. */
.field-hide_classes .flex-container,
.field-class_events .flex-container,
.field-class_events .related-widget-wrapper { flex-direction: column; align-items: stretch; }
.field-hide_classes .flex-container > label,
.field-class_events .flex-container > label { width: auto; padding-bottom: .4rem; }
.field-hide_classes .help,
.field-class_events .help { margin: 0 0 .6rem !important; }
.field-hide_classes ul,
.field-class_events ul { margin-left: 0; padding-left: 0; }

/* --- Explanation notes under form fields: one look on every admin screen ----
   Django's field help (div.help with an id ending _helptext) and the help
   notes on our own /manage/ forms (.form-row .help): italic, gold left bar,
   soft background. Stays under its field; other .help text (legends,
   "Closed", one-line hints in lists) is left plain. */
div.help[id$="_helptext"],
.form-row .help {
  display: block;
  font-style: italic;
  color: var(--body-quiet-color, #555);
  margin-top: .35rem;
  margin-bottom: .35rem;
  padding: .3rem .7rem;
  border-left: 3px solid var(--accent, #E9A924);
  background: var(--darkened-bg, #f8f6f0);
  border-radius: 0 4px 4px 0;
  font-size: .875rem;
  max-width: 46rem;
  box-sizing: border-box;
}
div.help[id$="_helptext"] div, .form-row .help div { margin: 0; }
/* Under a narrow box in a row of side-by-side fields it fits that box. */
.fieldBox div.help[id$="_helptext"] { max-width: 100%; }

/* A demo organiser's read-only peek (apps/tenants/demo_peek.py) */
.peek-banner { background: #f6c343; color: #221a00; padding: .55rem 1rem; font-size: .95rem; text-align: center; }
.peek-banner a { color: #221a00; font-weight: 700; }
/* Two-step login reminder (required roles that have not set it up yet) */
.twofa-banner { background: #fff3cd; color: #4a3800; border-left: 4px solid #e9a924; padding: .6rem 1rem; margin: 0 0 1rem; border-radius: 4px; }
.twofa-banner a { color: #4a3800; font-weight: 700; }
/* Help contents: search box and glossary on top */
.help-search { background: var(--darkened-bg, #f6f6f6); border: 1px solid var(--border-color, #ddd); border-radius: 10px; padding: 1rem 1.1rem; margin: .5rem 0 1.5rem; }
.help-search label { display: block; margin-bottom: .4rem; font-size: 1.05rem; }
.help-search input[type=search] { width: 100%; box-sizing: border-box; font-size: 1.05rem; padding: .6rem .8rem; border: 1px solid #999; border-radius: 8px; }
.help-search-hint { margin: .35rem 0 0; font-size: .85rem; opacity: .75; }
#help-results { margin-top: .8rem; }
#help-results h3 { margin: .4rem 0 .3rem; }
.help-hits { list-style: none; margin: 0; padding: 0; }
.help-hits li { padding: .5rem 0; border-top: 1px solid var(--hairline-color, #e8e8e8); line-height: 1.45; }
.help-hit-group { font-size: .8rem; opacity: .7; margin-left: .4rem; }
.help-hit-snip { font-size: .92rem; }
.help-hits mark, .help-glossary mark { background: #fff0a6; padding: 0 .1em; }
.help-none { margin: .5rem 0 0; font-size: .92rem; }
.help-glossary { display: grid; grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); gap: .4rem 1.4rem; margin: .4rem 0 1.5rem; }
.help-glossary div { padding: .35rem 0; border-top: 1px solid var(--hairline-color, #e8e8e8); }
.help-glossary dt { font-weight: 700; }
.help-glossary dd { margin: .1rem 0 0; font-size: .92rem; line-height: 1.45; }
.help-glossary-intro { margin: 0 0 .3rem; }
@media print { .help-search { display: none; } }

/* === Quick visual scanning (Colin, 2026-10-29) ============================
   1. A strip of coloured chips at the top of the event form saying how the
      event sells (places per booking, questions, instalments, prices, live
      or not); red when two settings fight.
   2. Each section of the form has its own colour down the left edge, with
      the same colour on its heading, so the eye finds "Instalments" or
      "Publish" without reading.
   3. The settings that change what guests can do (Places per booking,
      Published, Cancelled, Each person answers) are drawn bigger, in a tinted
      box, so they can't be skimmed past.
   4. Help opens in a pop-up over the form (static/admin/js/help-modal.js). */

/* 1. The strip */
.ef-strip { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0 0 0.9rem; align-items: center; }
.ef-chip { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.3rem 0.7rem; border-radius: 999px; font-size: 0.85rem; font-weight: 700; line-height: 1.2; text-decoration: none; border: 1.5px solid transparent; background: var(--selected-bg, #f3e7ea); color: var(--primary, #603649); }
.ef-chip:hover, .ef-chip:focus { filter: brightness(0.96); text-decoration: none; }
.ef-chip::before { content: ""; width: 0.55rem; height: 0.55rem; border-radius: 50%; background: currentColor; opacity: 0.75; }
.ef-chip--muted { background: #f1f1f1; color: #555; }
.ef-chip--info { background: #e6eef8; color: #1f4b7a; }
.ef-chip--group { background: #e4f0ff; color: #0f4c9a; border-color: #0f4c9a; }
.ef-chip--money { background: #e3f2e8; color: #23613d; }
.ef-chip--ok { background: #e3f2e8; color: #23613d; }
.ef-chip--warn { background: #fbeadb; color: #8a4a0c; }
.ef-chip--bad { background: #f8e1e1; color: #8f2626; border-color: #8f2626; }
.ef-chip--bad::before { animation: ef-pulse 1.4s ease-in-out infinite; }
.ef-chip--help { background: transparent; color: var(--link-fg, #603649); text-decoration: underline; font-weight: 600; }
.ef-chip--help::before { display: none; }
@keyframes ef-pulse { 0%, 100% { opacity: 0.75; } 50% { opacity: 0.2; } }
.ef-alert { background: #fff4f4; border: 1.5px solid #8f2626; border-left-width: 6px; border-radius: 6px; padding: 0.7rem 0.9rem; margin: 0 0 1rem; color: #4a1313; font-size: 0.95rem; }
.ef-alert a { font-weight: 700; }
.ov .ef-alert { margin: 0.8rem 0; }
.chip--group { background: #e4f0ff; color: #0f4c9a; }

/* 2. Colour per section: the heading bar and a band down the left edge
   share the section's colour (inline sections too — the inline's `classes`). */
#event_form fieldset.module[class*="ef-group-"],
#event_form .inline-group fieldset.module[class*="ef-group-"] { border-left: 6px solid var(--ef-group, #999); }
#event_form fieldset.module[class*="ef-group-"] > h2,
#event_form fieldset.module[class*="ef-group-"] > details > summary > h2,
#event_form fieldset.module[class*="ef-group-"] > .inline-heading,
#event_form fieldset.module[class*="ef-group-"] > details > summary > .inline-heading { background: var(--ef-group, #999); color: #fff; }
#event_form fieldset.module[class*="ef-group-"] > .description:has(> .ef-help:only-child) .ef-help { color: #fff; }
#event_form fieldset.ef-group-rooms, .ef-nav li a[data-group="rooms"] { --ef-group: #7a4f2a; }
#event_form fieldset.ef-group-prices, .ef-nav li a[data-group="prices"] { --ef-group: #1f7a7a; }
/* More pictures: a sub-section tucked under Picture. */
#event_form .inline-group:has(> fieldset.ef-sub) { margin-top: -1rem; }
#event_form fieldset.ef-sub > .inline-heading, #event_form fieldset.ef-sub > details > summary > .inline-heading { font-size: 0.85rem; padding-left: 1.6rem; opacity: 0.92; }
#event_form fieldset.ef-group-basics { --ef-group: #7a6a72; }
#event_form fieldset.ef-group-when { --ef-group: #0f4c9a; }
#event_form fieldset.ef-group-dates { --ef-group: #2a7fb8; }
#event_form fieldset.ef-group-booking { --ef-group: #6b3fa0; }
#event_form fieldset.ef-group-instalments { --ef-group: #23613d; }
#event_form fieldset.ef-group-elsewhere { --ef-group: #888; }
#event_form fieldset.ef-group-publish { --ef-group: #c0392b; }
.ef-nav li a[data-group]::before { content: ""; display: inline-block; width: 0.55rem; height: 0.55rem; border-radius: 2px; margin-right: 0.4rem; background: var(--ef-group, #999); vertical-align: middle; }
.ef-nav li a[data-group="basics"] { --ef-group: #7a6a72; }
.ef-nav li a[data-group="when"] { --ef-group: #0f4c9a; }
.ef-nav li a[data-group="dates"] { --ef-group: #2a7fb8; }
.ef-nav li a[data-group="booking"] { --ef-group: #6b3fa0; }
.ef-nav li a[data-group="instalments"] { --ef-group: #23613d; }
.ef-nav li a[data-group="picture"] { --ef-group: #b8862a; }
.ef-nav li a[data-group="elsewhere"] { --ef-group: #888; }
.ef-nav li a[data-group="publish"] { --ef-group: #c0392b; }

/* 3. The settings that change what guests can do stand out. */
#event_form .fieldBox.field-max_places_per_booking { flex-wrap: wrap; background: #e4f0ff; border: 1.5px solid #0f4c9a; border-radius: 6px; padding: 0.4rem 0.7rem; }
#event_form .fieldBox.field-max_places_per_booking label { color: #0f4c9a; font-weight: 700; }
#event_form select.ef-places { font-size: 1rem; font-weight: 700; padding: 0.3rem 0.5rem; min-width: 14rem; }
#event_form select.ef-places.ef-places--group { background: #0f4c9a; color: #fff; border-color: #0f4c9a; }
#event_form select.ef-places:disabled { opacity: 0.8; font-weight: 600; }
#event_form .fieldBox.field-published { background: #e3f2e8; border-radius: 6px; padding: 0.4rem 0.7rem; }
#event_form .fieldBox.field-cancelled { background: #f8e1e1; border-radius: 6px; padding: 0.4rem 0.7rem; }
#event_form .field-published input, #event_form .field-cancelled input, #event_form .field-allow_instalments input, #event_form .field-application_required input,
.form-row.field-per_person input, .form-row.field-offer_solidarity input { width: 1.25rem; height: 1.25rem; }
.form-row.field-per_person { background: #fbeadb; border: 1.5px solid #8a4a0c; border-radius: 6px; }
.form-row.field-per_person label { color: #8a4a0c; font-weight: 700; }
.form-row.field-offer_solidarity { background: #e3f2e8; border-radius: 6px; }

/* The little "?" beside a field's help text, and the Help links in headings. */
.ef-help-q { display: inline-flex; align-items: center; justify-content: center; width: 1.25rem; height: 1.25rem; border-radius: 50%; background: var(--primary, #603649); color: #fff !important; font-weight: 700; font-size: 0.8rem; text-decoration: none !important; vertical-align: middle; margin-left: 0.2rem; }
.ef-help-q:hover, .ef-help-q:focus { filter: brightness(1.15); }

/* 4. The Help pop-up. */
.help-dialog { width: min(52rem, 94vw); max-height: 88vh; padding: 0; border: 1px solid var(--hairline-color, #e0d3d8); border-radius: 10px; box-shadow: 0 1.5rem 3rem rgba(0,0,0,0.3); background: var(--body-bg, #fff); color: var(--body-fg, #333); }
.help-dialog::backdrop { background: rgba(30, 10, 20, 0.45); }
.help-dialog-bar { display: flex; align-items: center; gap: 1rem; padding: 0.6rem 1rem; background: var(--primary, #603649); color: #fff; position: sticky; top: 0; }
.help-dialog-title { flex: 1; font-size: 1rem; }
.help-dialog-full { color: #fff; font-size: 0.85rem; text-decoration: underline; }
.help-dialog-close { background: transparent; border: 0; color: #fff; font-size: 1.6rem; line-height: 1; cursor: pointer; padding: 0 0.2rem; }
.help-dialog-body { padding: 0.5rem 1.4rem 1.4rem; overflow: auto; max-height: calc(88vh - 3rem); }
.help-dialog-body .help-topnav, .help-dialog-body .help-pager, .help-dialog-body .help-open, .help-dialog-body .help-note-hub { display: none; }
.help-dialog-body h1 { font-size: 1.2rem; margin: 0.8rem 0 0.4rem; }
.help-dialog-body .help-page { max-width: none; }
.help-dialog-target { outline: 3px solid #E9A924; outline-offset: 4px; border-radius: 4px; }
.help-dialog-loading { color: var(--body-quiet-color, #555); padding: 1rem 0; }

/* "Places per booking" on each event's heading in the Booking questions list. */
.qg-places { display: inline-flex; align-items: center; gap: .4rem; margin-left: 1rem; font-weight: normal; font-size: .85rem; padding: .15rem .5rem; border-radius: 999px; background: #f1f1f1; color: #333; vertical-align: middle; }
.qg-places label { display: inline-flex; align-items: center; gap: .4rem; font-weight: 600; margin: 0; }
.qg-places select { font-size: .85rem; padding: .1rem .3rem; }
.qg-places--group { background: #e4f0ff; color: #0f4c9a; border: 1.5px solid #0f4c9a; }
.qg-places--locked { background: #fbeadb; color: #8a4a0c; font-weight: 600; }
.qg-places-link { font-size: .8rem; }
.js .qg-places-link { display: none; }
.qg-places--busy { opacity: .5; }