/* ==============================================================================
   Linguafour — public Indico page theme
   Shared modern research-operations design system, applied to native Indico
   chrome via non-invasive overrides. No build step: plain CSS only.
   ============================================================================== */

:root {
  --rs-paper: #F6F1E7;
  --rs-paper-deep: #EDE6D6;
  --rs-ink: #1B2A38;
  --rs-navy: #0E2233;
  --rs-verdigris: #2E6B5E;
  --rs-ochre: #C08A2E;
  --rs-garnet: #8C2A34;
  --rs-slate: #6B7785;
  --rs-font-serif: "Source Serif 4", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --rs-font-sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --rs-radius: 3px;
  --rs-shadow: 4px 4px 0 var(--rs-navy);
}

/* Global Font & Reset */
body {
  font-family: var(--rs-font-sans) !important;
  color: var(--rs-ink) !important;
  background-color: var(--rs-paper) !important;
}

/* Indico's default link colour (#0099cc) is 3.26:1 on white. This covers
   plain links only (no class, so button-links are untouched) and sits
   before every themed `.x a` rule below so those still win. */
a:not([class]) {
  color: #006d99;
}

.error-box p {
  color: var(--rs-slate) !important;
}

/* Top Navigation Bar */
.header {
  background: var(--rs-navy) !important;
  border-bottom: 2px solid var(--rs-verdigris) !important;
  box-shadow: none !important;
}

.header .header-item,
.header a {
  color: #F6F1E7 !important;
  font-weight: 600 !important;
}

/* Conference Title Banner (Hero) */
.confTitleBox {
  background: var(--rs-navy) !important;
  color: #F6F1E7 !important;
  border-radius: var(--rs-radius) var(--rs-radius) 0 0 !important;
  margin: 20px auto 0 auto !important;
  padding: 32px 36px 26px 36px !important;
  box-shadow: var(--rs-shadow) !important;
  border: 1px solid var(--rs-navy) !important;
  border-bottom: none !important;
  position: relative !important;
}

.confTitleBox::after {
  content: "Linguafour" !important;
  position: absolute !important;
  top: 16px !important;
  right: 24px !important;
  font-family: var(--rs-font-sans) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  color: var(--rs-ochre) !important;
  opacity: 1 !important;
}

.confTitle h1 {
  font-family: var(--rs-font-serif) !important;
  font-size: 32px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  color: #FFFFFF !important;
  margin: 0 !important;
  letter-spacing: normal !important;
}

.confTitle h1 a {
  color: #FFFFFF !important;
  text-decoration: none !important;
}

.confTitle h1 a:hover {
  color: var(--rs-ochre) !important;
}

/* Event Subtitle Bar (Date, CTAs & Search) */
.confSubTitleBox {
  background: #FFFFFF !important;
  border-radius: 0 0 var(--rs-radius) var(--rs-radius) !important;
  box-shadow: var(--rs-shadow) !important;
  border: 1px solid var(--rs-navy) !important;
  border-top: 1px solid var(--rs-paper-deep) !important;
  padding: 16px 36px !important;
  margin: 0 auto 28px auto !important;
}

.confSubTitleContent {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 16px !important;
}

.confSubTitle {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 20px !important;
}

.confSubTitleBox .datePlace {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  margin: 0 !important;
}

.confSubTitleBox .date {
  font-family: var(--rs-font-sans) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--rs-navy) !important;
}

.confSubTitleBox .timezone {
  font-family: var(--rs-font-sans) !important;
  font-size: 12px !important;
  color: var(--rs-slate) !important;
  font-weight: 500 !important;
}

/* Quick Action / CTA Buttons in Bar */
.rs-hero-action-bar {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
}

.suite-icon {
  display: inline-flex !important;
  align-items: center !important;
  color: inherit !important;
}

.suite-icon svg {
  display: block !important;
}

.rs-hero-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 9px 18px !important;
  border-radius: 2px !important;
  font-family: var(--rs-font-sans) !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  border: 1px solid var(--rs-navy) !important;
  transition: box-shadow 80ms ease, transform 80ms ease !important;
  cursor: pointer !important;
}

.rs-hero-btn-primary {
  background: var(--rs-navy) !important;
  color: #F6F1E7 !important;
  box-shadow: 3px 3px 0 var(--rs-verdigris) !important;
}

.rs-hero-btn-primary:hover {
  background: #16344c !important;
}

.rs-hero-btn-primary:active {
  box-shadow: 1px 1px 0 var(--rs-verdigris) !important;
  transform: translate(2px, 2px) !important;
}

.rs-hero-btn-secondary {
  background: #FFFFFF !important;
  color: var(--rs-verdigris) !important;
  border: 1px solid var(--rs-verdigris) !important;
  box-shadow: none !important;
}

.rs-hero-btn-secondary:hover {
  background: var(--rs-paper-deep) !important;
}

.rs-hero-btn-outline {
  background: #FFFFFF !important;
  color: var(--rs-navy) !important;
  box-shadow: none !important;
}

.rs-hero-btn-outline:hover {
  background: var(--rs-paper-deep) !important;
}

.event-menu-heading {
  font-family: var(--rs-font-sans) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  color: var(--rs-verdigris) !important;
  padding: 8px 12px !important;
  margin: 0 !important;
}

.menuConfTitle {
  list-style: none !important;
  margin: 2px 0 !important;
}

.menuConfTitle a {
  display: block !important;
  padding: 9px 14px !important;
  color: var(--rs-ink) !important;
  font-family: var(--rs-font-sans) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  border-radius: 2px !important;
  transition: background 80ms ease !important;
}

.menuConfTitle a:hover {
  background: var(--rs-paper-deep) !important;
  color: var(--rs-ink) !important;
}

.menuConfSelected a,
.menuConfTitle.selected a {
  background: var(--rs-navy) !important;
  color: #FFFFFF !important;
  font-weight: 700 !important;
}

/* Main Content Blocks */
.confOverview,
.contentBlock,
.page-content {
  background: #FFFFFF !important;
  border-radius: var(--rs-radius) !important;
  border: 1px solid var(--rs-navy) !important;
  box-shadow: var(--rs-shadow) !important;
  padding: 28px !important;
  margin-bottom: 24px !important;
}

/* Headings */
h2, h3, .title {
  font-family: var(--rs-font-serif) !important;
  color: var(--rs-ink) !important;
  font-weight: 600 !important;
}

/* Action Buttons (Registration & Abstracts) */
.i-button {
  font-family: var(--rs-font-sans) !important;
  border-radius: 2px !important;
  font-weight: 600 !important;
  padding: 8px 16px !important;
  transition: box-shadow 80ms ease, transform 80ms ease !important;
}

.i-button.highlight {
  background: var(--rs-verdigris) !important;
  border-color: var(--rs-verdigris) !important;
  color: #FFFFFF !important;
  box-shadow: none !important;
}

.i-button.highlight:hover {
  background: #275c51 !important;
}

/* Outline/default buttons (Configure, Preview, Manage, Copy, ...) used
   Indico's own default grey text/border - bring them into the token set. */
.i-button:not(.highlight):not(.danger) {
  color: var(--rs-navy) !important;
  border-color: var(--rs-navy) !important;
  background: #FFFFFF !important;
}

.i-button:not(.highlight):not(.danger):hover {
  background: var(--rs-paper-deep) !important;
}

.i-button.danger,
.i-button.text-color.danger {
  color: var(--rs-garnet) !important;
  border-color: var(--rs-garnet) !important;
}

.i-button.danger:hover {
  background: #FBEAEA !important;
}

.i-button:disabled {
  color: var(--rs-slate) !important;
  border-color: var(--rs-slate) !important;
  opacity: 0.6 !important;
}

/* Registration Form Table & Fields */
.regform-section {
  background: #FFFFFF !important;
  border: 1px solid var(--rs-navy) !important;
  border-radius: var(--rs-radius) !important;
  padding: 20px !important;
  margin-bottom: 16px !important;
}

/* Timetable & Schedule */
.timetable-entry {
  border-radius: 2px !important;
  box-shadow: none !important;
  border: 1px solid var(--rs-paper-deep) !important;
}

/* Footer */
.footer {
  background: var(--rs-navy) !important;
  color: #B9C4CC !important;
  border-top: 1px solid var(--rs-navy) !important;
  padding: 24px 0 !important;
  margin-top: 48px !important;
}

.footer a {
  color: #E0E6E9 !important;
}

/* Indico's own attribution ("Powered by Indico vX.X.X" + its logo icon) is
   hardcoded in indico/web/templates/footer.html, not settings-driven like
   the header logo/site title. The logo is removed by the plugin's
   footer_logo block override; the link's *text* is swapped for a real
   "Linguafour" DOM text node by a script in plugin.py's _inject_public_head
   (not by a CSS ::after trick) so assistive tech reads "Linguafour", not
   the original text concatenated with generated content. */
.footer a[href="https://getindico.io"] {
  font-family: var(--rs-font-serif);
}

/* Standalone login / registration / password-reset pages (layout/auth_base).
   Indico sizes the login logo by a fixed 100px height, which scales the wide
   Linguafour wordmark to ~600px and forces horizontal overflow on phones. */
.login-page .login-container img.header-logo {
  display: block;
  width: auto !important;
  height: auto !important;
  max-width: 220px;
  max-height: 48px;
  margin: 0 auto 28px;
}

.login-page .i-button.login-form-button,
.login-page .i-button.provider-with-form {
  background: var(--rs-navy) !important;
  border-color: var(--rs-navy) !important;
  color: #FFFFFF !important;
  font-family: var(--rs-font-sans);
  font-weight: 600;
}

.login-page .i-button.login-form-button:hover,
.login-page .i-button.login-form-button:focus-visible {
  background: var(--rs-verdigris) !important;
  border-color: var(--rs-verdigris) !important;
}

.login-page a {
  color: var(--rs-verdigris);
}

/* A link inside a sentence needs more than color to stand out (WCAG 1.4.1). */
.login-page p.register a {
  text-decoration: underline;
}

/* Indico lays the login column out as a fixed 400px table, which is 10px
   wider than a 390px phone and forces a horizontal scroll. */
@media (max-width: 480px) {
  .layout-wrapper.login-page,
  .login-page .centered-column-wrapper {
    width: 100% !important;
    max-width: 100vw;
  }

  .login-page .centered-column,
  .login-page .login-container {
    width: auto !important;
    max-width: 350px;
    margin-left: auto;
    margin-right: auto;
  }

  .login-page .centered-column {
    padding: 0 16px;
    box-sizing: content-box;
  }
}

/* ==============================================================================
   Native Indico management/admin screens (event Settings, Timetable,
   Registration builder, Abstracts, Protection, Privacy, etc.)

   These pages are not owned or reimplemented by Suite - Indico's own
   server-rendered chrome (top bar, secondary nav, sidebar, breadcrumb,
   generic content boxes/data lists, buttons) is themed here using the
   same non-invasive, class-name-only approach as the public page theme
   above, so navigating from a Suite screen into native Indico management
   doesn't feel like switching products. Deliberately NOT touching the
   React-rendered internals of Timetable's grid or the Registration form
   builder's drag-drop canvas - those use unstable/hashed classnames and
   restyling them would be fragile and easy to break across Indico
   upgrades. See docs/frontend-design-system.md.
   ============================================================================== */

/* Blue Indico-brand title bar inside the (already-navy) .header */
.page-header {
  background: var(--rs-navy) !important;
  color: #F6F1E7 !important;
}

.page-header a {
  color: #F6F1E7 !important;
}

/* Secondary grey toolbar: Home / Create event / Administration / My profile */
.global-menu.toolbar {
  background: #16344c !important;
  border-bottom: 1px solid var(--rs-navy) !important;
}

.global-menu.toolbar a,
.global-menu.toolbar button {
  color: #F6F1E7 !important;
  font-family: var(--rs-font-sans) !important;
}

.global-menu.toolbar a:hover,
.global-menu.toolbar button:hover {
  color: var(--rs-ochre) !important;
}

/* Breadcrumb */
.main-breadcrumb {
  font-family: var(--rs-font-sans) !important;
  color: var(--rs-slate) !important;
}

.main-breadcrumb a {
  color: var(--rs-verdigris) !important;
}

/* Management sidebar */
.side-menu {
  font-family: var(--rs-font-sans) !important;
}

.side-menu .item > a,
.side-menu .item > .title {
  color: var(--rs-ink) !important;
  border-radius: 2px !important;
}

.side-menu .item:hover > a,
.side-menu .item:hover > .title {
  background: var(--rs-paper-deep) !important;
}

.side-menu .item.active > a,
.side-menu .item.active > .title {
  background: var(--rs-verdigris) !important;
  color: #FFFFFF !important;
}

/* Generic content boxes (Settings, Protection, Privacy, Roles, Reminders, ...) */
.action-box {
  background: #FFFFFF !important;
  border: 1px solid var(--rs-navy) !important;
  border-radius: var(--rs-radius) !important;
  box-shadow: var(--rs-shadow) !important;
}

.action-box .icon {
  color: var(--rs-verdigris) !important;
}

.i-data-list dt {
  font-family: var(--rs-font-serif) !important;
  color: var(--rs-slate) !important;
  font-weight: 600 !important;
}

.i-data-list dd {
  font-family: var(--rs-font-sans) !important;
  color: var(--rs-ink) !important;
}

/* Standard admin data tables */
table.i-table {
  font-family: var(--rs-font-sans) !important;
}

table.i-table th {
  font-family: var(--rs-font-serif) !important;
  background: var(--rs-paper-deep) !important;
  color: var(--rs-ink) !important;
}

/* ==============================================================================
   Mobile: public conference display page

   Indico's "conference" event type uses a classic, non-responsive layout
   for this page - a fixed-width float sidebar (.conf_leftMenu: float:left,
   width:200px) beside a fixed-width content column (.confBodyBox:
   width:720px, margin-left:230px), plus a fixed-width .search-box (250px)
   in the title bar and a native top icon toolbar (.main-action-bar) that
   doesn't wrap. None of this is themed/introduced by conference_theme.css
   above - it's native Indico page structure that was already like this;
   fixed here because, unlike the React-driven admin screens, it's a
   simple, stable float/fixed-width layout that responds safely to
   standard responsive overrides (no drag-drop/scheduling JS depends on
   these exact pixel widths). This is the actual attendee-facing
   registration page, so it matters more than most.
   ============================================================================== */

@media (max-width: 900px) {
  /* Final safety net: Indico's persistent top toolbar (.main-action-bar,
     outside .conf) lays its icon-button children out at their natural,
     wider-than-viewport flex-row width even though the toolbar itself is
     correctly scroll-contained (overflow-x: auto, clientWidth === viewport)
     - harmless for that element, but document-level scrollWidth still
     reflects it. html/body overflow-x:hidden only clips page-level
     scroll; it does not affect any element's own overflow-x:auto/scroll
     (the toolbar and the Suite attendee table both keep scrolling
     internally exactly as intended). */
  /* `clip`, not `hidden`: overflow-x: hidden forces overflow-y: auto, which
     turned html, body and .conf into three nested scroll containers on
     phones (scroll chaining, broken sticky/anchor scrolling). `hidden` stays
     as the fallback for browsers without `clip`. */
  html,
  body {
    overflow-x: hidden !important;
    overflow-x: clip !important;
  }

  .conf_leftMenu {
    float: none !important;
    width: 100% !important;
    margin-bottom: 16px !important;
  }

  /* Indico fixes both of these desktop layout rows at 950px. Reset the rows
     themselves before making their children fluid; otherwise width: 100% on
     the sidebar/content/search descendants still resolves against 950px. */
  #confSectionsBox,
  .confSubTitleContent {
    width: 100% !important;
    max-width: 100% !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }

  .confBodyBox {
    float: none !important;
    width: 100% !important;
    margin-left: 0 !important;
  }

  .confBodyBox,
  .confBodyBox .page-content,
  .confBodyBox .mainContent,
  .confBodyBox .conference-page,
  .conferenceDetails,
  .description,
  .preformatted,
  .infogrid {
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
    box-sizing: border-box !important;
  }

  .confTitleBox {
    padding: 20px 18px !important;
  }

  /* Indico's own CSS bundle sets a fixed pixel width on the title text
     wrapper (desktop-only, not itself a reactive/JS-computed value found
     in any inline style) - override directly rather than chase the exact
     rule inside the minified dist bundle. */
  .confTitle,
  .confTitle h1,
  .confTitle .conference-title-link {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .confSubTitleBox {
    padding: 14px 18px !important;
  }

  .confSubTitleContent {
    flex-direction: column !important;
    align-items: flex-start !important;
  }

  .confSubTitle {
    width: 100% !important;
  }

  .search-box {
    width: 100% !important;
    max-width: none !important;
  }

  /* The native icon toolbar (home/prev/next/up/calendar export, etc.)
     doesn't wrap; contain it with the same horizontal-scroll pattern
     already used for the Suite attendee table rather than letting it
     force the whole page wider than the viewport. */
  .main-action-bar {
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
  }

  /* Safety net: after the fixes above, all visible content correctly fits
     the viewport, but some Semantic-UI-driven elements (e.g. .search-box's
     internal .ui.fluid.search form) still report a stale, wider intrinsic
     box that doesn't clip its own (correctly-fitting) rendered content -
     it just leaves invisible scrollable space past the viewport edge with
     nothing in it. Clip at the page level rather than keep chasing each
     framework element's internal width calculation. */
  .conf {
    overflow-x: hidden !important;
    overflow-x: clip !important;
  }
}

/* =============================================================================
   Linguafour modern surface layer
   Visual-only overrides on stable Indico chrome; core forms, routes, and
   interactive application internals remain native and upgradeable.
   ============================================================================= */

:root {
  --rs-paper: #f3f7f8;
  --rs-paper-deep: #eaf0f2;
  --rs-ink: #17212b;
  --rs-navy: #102a43;
  --rs-verdigris: #0f766e;
  --rs-ochre: #b7791f;
  --rs-garnet: #a12b3a;
  --rs-slate: #5a6773;
  --rs-border: #d8e2e5;
  --rs-radius: 12px;
  --rs-shadow: 0 18px 55px rgba(16, 42, 67, 0.09);
}

body {
  background:
    radial-gradient(circle at 5% 3%, rgba(15, 118, 110, 0.07), transparent 28rem),
    var(--rs-paper) !important;
}

.header {
  border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
  background: rgba(16, 42, 67, 0.98) !important;
}

/* List title bars ("My abstracts", ...) are .header elements too, so they get
   the navy bar above; their dark title text was unreadable on it. */
.header .header-row h3,
.header .header-row .title {
  color: #fff !important;
}

.global-menu.toolbar {
  background: #153650 !important;
  border-bottom: 0 !important;
}

.global-menu.toolbar a,
.global-menu.toolbar button {
  border-radius: 7px !important;
}

.confTitleBox {
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 18px 18px 0 0 !important;
  background:
    radial-gradient(circle at 88% 20%, rgba(35, 178, 165, 0.32), transparent 24rem),
    var(--rs-navy) !important;
  box-shadow: 0 25px 75px rgba(16, 42, 67, 0.18) !important;
}

.confTitleBox::after {
  padding: 6px 10px !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  border-radius: 999px !important;
  color: #9ee4dd !important;
  background: rgba(255, 255, 255, 0.08) !important;
  backdrop-filter: blur(6px) !important;
}

.confTitle h1 {
  max-width: 780px !important;
  font-size: clamp(32px, 4vw, 52px) !important;
  line-height: 1.06 !important;
  letter-spacing: -0.025em !important;
}

.confSubTitleBox {
  border-color: var(--rs-border) !important;
  border-radius: 0 0 18px 18px !important;
  box-shadow: 0 18px 55px rgba(16, 42, 67, 0.09) !important;
}

.rs-hero-btn,
.i-button {
  border-radius: 8px !important;
  transition: transform 120ms ease, box-shadow 120ms ease, background 120ms ease !important;
}

.rs-hero-btn-primary {
  box-shadow: 0 7px 18px rgba(16, 42, 67, 0.18) !important;
}

.rs-hero-btn-primary:hover,
.i-button.highlight:hover {
  transform: translateY(-1px) !important;
}

.rs-hero-btn-primary:active {
  transform: translateY(0) !important;
  box-shadow: none !important;
}

.menuConfTitle a,
.side-menu .item > a,
.side-menu .item > .title {
  border-radius: 8px !important;
}

.menuConfSelected a,
.menuConfTitle.selected a,
.side-menu .item.active > a,
.side-menu .item.active > .title {
  background: #e2f5ef !important;
  color: #0b5c56 !important;
}

.confOverview,
.contentBlock,
.page-content,
.action-box,
.regform-section {
  border-color: var(--rs-border) !important;
  border-radius: var(--rs-radius) !important;
  box-shadow: var(--rs-shadow) !important;
}

.action-box {
  overflow: hidden !important;
}

table.i-table {
  overflow: hidden !important;
  border: 1px solid var(--rs-border) !important;
  border-radius: 10px !important;
  background: #ffffff !important;
}

table.i-table th {
  border-color: var(--rs-border) !important;
  background: #f5f8f9 !important;
}

input:not([type="checkbox"]):not([type="radio"]),
select,
textarea,
.ui.input > input {
  border-color: #b9c9ce !important;
  border-radius: 8px !important;
}

input:focus,
select:focus,
textarea:focus,
.ui.input > input:focus {
  border-color: var(--rs-verdigris) !important;
  box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.13) !important;
}

.footer {
  margin-top: 64px !important;
  border-top: 0 !important;
  background: var(--rs-navy) !important;
}

@media (max-width: 900px) {
  .confTitleBox {
    border-radius: 14px 14px 0 0 !important;
  }

  .confTitleBox::after {
    position: static !important;
    display: inline-flex !important;
    margin-top: 14px !important;
  }

  .confSubTitleBox {
    border-radius: 0 0 14px 14px !important;
  }

  .rs-hero-action-bar {
    width: 100% !important;
    flex-wrap: wrap !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .rs-hero-btn,
  .i-button {
    transition: none !important;
  }
}

/* =============================================================================
   Public event toolbar (.event-page-header .main-action-bar)
   Indico renders a 13-item icon-only strip above every public event page:
   Home, oldest/older/up/newer/newest *event* (by ID - unrelated events),
   print, filter, calendar export, material download, a theme switcher, a
   favourite star, the manager pencil and "Back to Conference View". The
   event-navigation, theme and favourite items are power-user tooling that
   confuses attendees, so they are removed; the useful actions get visible
   labels (the accessible name still comes from Indico's own tooltip span).
   Selectors target the stable icon classes from
   indico/modules/events/templates/header.html.
   ============================================================================= */

.event-page-header,
.event-page-header .main-action-bar {
  height: auto !important;
  min-height: 0 !important;
}

.event-page-header .main-action-bar {
  padding: 10px 24px !important;
  gap: 12px !important;
}

.event-page-header .button-bar {
  flex-wrap: wrap !important;
  align-items: center !important;
  align-content: flex-start !important;
  gap: 8px !important;
}

/* Indico's tooltip wrappers are stretched flex containers, so once the bar
   wraps every pill inherits the full height of the wrapped bar. */
.event-page-header .button-bar > ind-with-tooltip,
.event-page-header .button-bar > #event-calendar-link {
  display: inline-flex !important;
  align-self: center !important;
  align-items: center !important;
  height: auto !important;
}

.event-page-header .button-bar .i-button {
  align-self: center !important;
}

.event-page-header .button-bar .separator,
.event-page-header .button-bar .icon-home,
.event-page-header .button-bar .icon-first,
.event-page-header .button-bar .icon-prev,
.event-page-header .button-bar .icon-collapse,
.event-page-header .button-bar .icon-next,
.event-page-header .button-bar .icon-last,
.event-page-header .button-bar .icon-layout,
.event-page-header .button-bar #favorite-link,
.event-page-header .button-bar > ind-menu,
.event-page-header .button-bar ind-with-tooltip:has(> .icon-home),
.event-page-header .button-bar ind-with-tooltip:has(> .icon-first),
.event-page-header .button-bar ind-with-tooltip:has(> .icon-prev),
.event-page-header .button-bar ind-with-tooltip:has(> .icon-collapse),
.event-page-header .button-bar ind-with-tooltip:has(> .icon-next),
.event-page-header .button-bar ind-with-tooltip:has(> .icon-last),
.event-page-header .button-bar ind-with-tooltip:has(> .icon-layout) {
  display: none !important;
}

.event-page-header .button-bar .i-button,
.event-page-header .session-bar .i-button {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  height: auto !important;
  margin: 0 !important;
  padding: 7px 13px !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.08) !important;
  color: #F6F1E7 !important;
  font-family: var(--rs-font-sans) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  box-shadow: none !important;
  transform: none !important;
}

.event-page-header .button-bar .i-button:hover,
.event-page-header .button-bar .i-button:focus-visible,
.event-page-header .session-bar .i-button:hover,
.event-page-header .session-bar .i-button:focus-visible {
  background: rgba(255, 255, 255, 0.16) !important;
  border-color: rgba(255, 255, 255, 0.32) !important;
  color: #FFFFFF !important;
}

.event-page-header .button-bar .i-button::before {
  font-size: 14px !important;
  margin: 0 !important;
}

/* Indico's .arrow buttons draw their caret with the icon font in ::after;
   the label replaces that glyph, so the text font must be reset too. */
.event-page-header .button-bar .i-button::after {
  font-family: var(--rs-font-sans) !important;
  font-size: 13px !important;
  margin: 0 !important;
}

.event-page-header .button-bar .icon-printer::after { content: "Print"; }
.event-page-header .button-bar .icon-filter::after { content: "Filter"; }
.event-page-header .button-bar .icon-calendar::after { content: "Add to calendar"; }
.event-page-header .button-bar .icon-file-pdf::after { content: "PDF"; }
.event-page-header .button-bar .icon-package-download::after { content: "Materials"; }

/* "Back to Conference View" is the primary way out of a sub-page. */
.event-page-header .button-bar > a.i-button:not(.icon-only) {
  background: #FFFFFF !important;
  border-color: #FFFFFF !important;
  color: var(--rs-navy) !important;
}

.event-page-header .button-bar > a.i-button:not(.icon-only):hover {
  background: #e2f5ef !important;
  border-color: #e2f5ef !important;
  color: #0b5c56 !important;
}

.event-page-header .session-bar .group {
  gap: 6px !important;
}

.event-page-header #pageSubHeader {
  padding: 0 24px !important;
}

/* Timetable "Focus on" filter panel toggled by the Filter button. */
.event-page-header #event-filters {
  margin: 0 0 12px !important;
  padding: 12px 16px !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, 0.08) !important;
  color: #F6F1E7 !important;
  font-family: var(--rs-font-sans) !important;
}

.event-page-header #event-filters form {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 10px !important;
}

.event-page-header #event-filters form > div {
  float: none !important;
  order: 2 !important;
  display: flex !important;
  gap: 8px !important;
  margin-left: auto !important;
}

.event-page-header #event-filters select {
  font-size: 13px !important;
  padding: 5px 10px !important;
  border-radius: 8px !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  background: #FFFFFF !important;
  color: var(--rs-navy) !important;
}

.event-page-header #event-filters .btn {
  padding: 6px 12px !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.12) !important;
  color: #FFFFFF !important;
  font-family: var(--rs-font-sans) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  box-shadow: none !important;
  text-shadow: none !important;
  cursor: pointer !important;
}

.event-page-header #event-filters .btn[type="submit"] {
  background: #FFFFFF !important;
  color: var(--rs-navy) !important;
}

/* Indico's blue .confheader band showed below the white action bar on the
   conference landing page; the themed hero already provides the surface. */
.confheader {
  background: transparent !important;
}

/* =============================================================================
   Meeting-style event header (.event-wrapper .event-header)
   Used by the timetable, session, contribution and meeting/lecture display
   pages - the same product surface as the conference landing page hero.
   ============================================================================= */

.event-wrapper {
  font-family: var(--rs-font-sans) !important;
}

.event-wrapper .event-header {
  position: relative !important;
  overflow: hidden !important;
  margin-top: 20px !important;
  padding: 34px 36px 26px !important;
  border: 0 !important;
  border-radius: 18px 18px 0 0 !important;
  color: #F6F1E7 !important;
  background:
    radial-gradient(circle at 88% 20%, rgba(35, 178, 165, 0.32), transparent 24rem),
    var(--rs-navy) !important;
  box-shadow: 0 25px 75px rgba(16, 42, 67, 0.18) !important;
}

.event-wrapper .event-header .event-title {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 16px !important;
}

.event-wrapper .event-header .event-title h1 {
  margin: 0 0 14px !important;
  max-width: 780px !important;
  font-family: var(--rs-font-serif) !important;
  font-size: clamp(30px, 3.6vw, 46px) !important;
  font-weight: 600 !important;
  line-height: 1.08 !important;
  letter-spacing: -0.02em !important;
  color: #FFFFFF !important;
}

.event-wrapper .event-header .details {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px 28px !important;
  align-items: center !important;
  font-size: 14px !important;
  color: rgba(246, 241, 231, 0.88) !important;
}

.event-wrapper .event-header .details .header-data,
.event-wrapper .event-header .details i {
  color: #9ee4dd !important;
  margin-right: 8px !important;
}

.event-wrapper .event-header .event-time-data time {
  padding: 2px 8px !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  border-radius: 6px !important;
  background: rgba(255, 255, 255, 0.08) !important;
  color: #FFFFFF !important;
  font-weight: 600 !important;
}

.event-wrapper .event-header .timezone {
  margin-left: 6px !important;
  color: #9ee4dd !important;
}

.event-wrapper .event-header .location-info .text:empty {
  display: none !important;
}

.event-wrapper .event-header .event-location:has(.text:empty) {
  display: none !important;
}

.event-wrapper .event-header .event-manage-button .ui.button {
  margin: 0 !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.10) !important;
  color: #F6F1E7 !important;
  box-shadow: none !important;
}

.event-wrapper .event-header .event-manage-button .ui.button:hover {
  background: rgba(255, 255, 255, 0.2) !important;
}

/* Description / registration / material rows directly under the hero. */
.event-wrapper .event-sub-header {
  margin: 0 0 24px !important;
  padding: 18px 36px 12px !important;
  border: 1px solid var(--rs-border) !important;
  border-top: 0 !important;
  border-radius: 0 0 18px 18px !important;
  background: #FFFFFF !important;
  box-shadow: 0 18px 55px rgba(16, 42, 67, 0.09) !important;
}

.event-wrapper .event-details-row {
  padding: 8px 0 !important;
  border: 0 !important;
}

.event-wrapper .event-details-label {
  min-width: 120px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  color: var(--rs-slate) !important;
}

.event-wrapper .event-details-content {
  color: var(--rs-ink) !important;
  font-size: 15px !important;
}

.event-wrapper .event-service-row {
  border: 1px solid var(--rs-border) !important;
  border-radius: 12px !important;
  background: #f8fbfb !important;
  box-shadow: none !important;
}

.event-wrapper .event-service-row .event-service-title {
  font-weight: 600 !important;
  color: var(--rs-ink) !important;
}

.event-wrapper .event-service-row .i-button.highlight {
  border-radius: 999px !important;
}

/* Timetable body: keep Indico's schedule internals, align the shell. */
.event-wrapper .event-body {
  padding: 0 !important;
}

/* Indico paints day titles white for its blue page background. */
.event-wrapper .event-body .day-header,
.event-wrapper .event-body .day-header .day-title,
.event-wrapper .event-body .day-header .js-go-to-day,
.event-wrapper .event-body h2,
.event-wrapper .event-body .timetable-title {
  font-family: var(--rs-font-serif) !important;
  color: var(--rs-navy) !important;
  text-shadow: none !important;
}

.event-wrapper .event-body .day-header .day-title {
  font-size: 24px !important;
  font-weight: 600 !important;
}

.event-wrapper .event-body .day-header .anchor-link {
  color: var(--rs-slate) !important;
}

.event-wrapper .event-body .timetable-item,
.event-wrapper .event-body .timetable-block {
  border-radius: 12px !important;
  border: 1px solid var(--rs-border) !important;
  box-shadow: 0 10px 30px rgba(16, 42, 67, 0.06) !important;
}

.event-wrapper .event-body .timetable-title,
.event-wrapper .event-body .timetable-item .title {
  font-family: var(--rs-font-serif) !important;
}

.event-wrapper .event-body .timetable-time .start-time,
.event-wrapper .event-body .timetable-time .end-time {
  font-family: var(--rs-font-sans) !important;
}

.event-wrapper .event-body .timetable-time .start-time {
  background: var(--rs-navy) !important;
}

.event-wrapper .event-body .timetable-time .start-time::before {
  border-color: #0a1c2e transparent transparent transparent !important;
}

.event-wrapper .event-body .timetable-time.top-level::before {
  border-color: var(--rs-navy) !important;
}

.event-wrapper .event-body .timetable-time .end-time,
.event-wrapper .event-body .timetable-time .start-time + i {
  color: var(--rs-navy) !important;
}

/* Indico's meeting/timetable layout is a fixed 1000px column centred with
   negative margins, so on anything narrower it is simply clipped. */
@media (max-width: 1060px) {
  .event-wrapper {
    width: auto !important;
    max-width: 100% !important;
    margin: 18px 16px 30px !important;
  }

  .event-wrapper .event-body .timetable-item,
  .event-wrapper .event-body .day-list,
  .event-wrapper .event-body .day-header {
    width: auto !important;
    max-width: 100% !important;
  }
}

@media (max-width: 900px) {
  .header:has(.event-page-header) {
    height: auto !important;
  }

  .event-page-header .main-action-bar {
    flex-wrap: wrap !important;
    overflow: visible !important;
    padding: 10px 14px !important;
  }

  .event-page-header .main-action-bar {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
  }

  .event-page-header .session-bar,
  .event-page-header .session-bar .toolbar,
  .event-page-header .session-bar .group {
    width: 100% !important;
    justify-content: flex-start !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
  }

  .event-wrapper .event-header {
    padding: 26px 20px 20px !important;
    border-radius: 14px 14px 0 0 !important;
  }

  .event-wrapper .event-sub-header {
    padding: 14px 20px 10px !important;
    border-radius: 0 0 14px 14px !important;
  }

  .event-wrapper .event-details-row {
    display: block !important;
  }

  .event-wrapper .event-details-label {
    margin-bottom: 4px !important;
  }
}

/* =============================================================================
   Lifecycle bar on native management pages (plugin template override of the
   `page` block in events/management/base.html) and the mobile reflow of
   Indico's shared management layout (.layout-side-menu / .menu-column /
   .content-column are stable layout wrappers, not React internals).
   ============================================================================= */

.suite-lifecycle-bar {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0 0 18px;
  padding: 10px 24px;
  background: var(--rs-navy);
  color: #F6F1E7;
  font-family: var(--rs-font-sans);
  font-size: 13px;
}

.suite-lifecycle-main {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
}

.suite-lifecycle-bar a {
  color: #FFFFFF !important;
  text-decoration: none !important;
}

.header .suite-lifecycle-bar a.suite-lifecycle-next,
.suite-lifecycle-bar a.suite-lifecycle-next {
  color: var(--rs-navy) !important;
}

.suite-lifecycle-back {
  padding: 6px 12px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  font-weight: 600;
  white-space: nowrap;
}

.suite-lifecycle-back:hover,
.suite-lifecycle-next:hover {
  background: rgba(255, 255, 255, 0.14);
}

.suite-lifecycle-title {
  font-family: var(--rs-font-serif);
  font-size: 15px;
  font-weight: 600;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 40vw;
}

.suite-lifecycle-step {
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.10);
  color: #9ee4dd;
  font-weight: 600;
  white-space: nowrap;
}

.suite-lifecycle-next {
  margin-left: auto;
  padding: 6px 12px;
  border-radius: 999px;
  background: #FFFFFF;
  color: var(--rs-navy) !important;
  font-weight: 600;
  white-space: nowrap;
}

.suite-lifecycle-note {
  display: none;
  font-size: 12px;
  color: rgba(246, 241, 231, 0.8);
}

/* The lifecycle bar carries the context the breadcrumb used to. */
.main-breadcrumb.management {
  display: none !important;
}

/* Indico's root category page still offers "Create event" to anonymous
   visitors; the Suite's Create flow is the only supported path. */
#category-toolbar .create-event-button,
.category-container .create-event-button {
  display: none !important;
}

/* Public event page: manager preview strip (conference-header hook). */
.rs-preview-strip {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px 16px !important;
  width: 100% !important;
  margin: 0 0 12px !important;
  padding: 8px 14px !important;
  border: 1px solid rgba(16, 42, 67, 0.16) !important;
  border-radius: 10px !important;
  background: #e2f5ef !important;
  color: #0b5c56 !important;
  font-family: var(--rs-font-sans) !important;
  font-size: 13px !important;
  text-decoration: none !important;
}

.rs-preview-strip-link {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-weight: 700 !important;
  color: var(--rs-navy) !important;
}

.suite-command-center-link {
  font-weight: 700 !important;
}

/* Public event page: link back to the organising institution's conferences. */
.rs-institution-link {
  display: inline-block !important;
  margin: 0 0 10px !important;
  color: var(--rs-navy) !important;
  font-family: var(--rs-font-sans) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
}

@media (max-width: 768px) {
  .suite-lifecycle-bar {
    position: sticky;
    top: 0;
    z-index: 900;
    padding: 10px 14px;
  }

  .suite-lifecycle-back {
    padding: 10px 14px;
    font-size: 14px;
  }

  .suite-lifecycle-title {
    max-width: 100%;
    white-space: normal;
  }

  .suite-lifecycle-next {
    margin-left: 0;
  }

  .suite-lifecycle-note {
    display: block;
  }

  .layout-side-menu {
    flex-flow: column nowrap !important;
    margin: 0 16px !important;
  }

  .layout-side-menu > .menu-column {
    width: 100% !important;
    margin-right: 0 !important;
  }

  .layout-side-menu > .content-column,
  .content-column {
    width: 100% !important;
    min-width: 0 !important;
  }

  .management-page div.page-content,
  .management-page .page-content {
    max-width: 100% !important;
  }

  /* Sidebar becomes one horizontally scrolling chip row; section headings
     collapse and their items join the row (display: contents). */
  #event-side-menu .side-menu ul.menu-items {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;
    overflow-x: auto !important;
    padding: 4px 0 8px !important;
    -webkit-overflow-scrolling: touch;
  }

  #event-side-menu .side-menu li.section,
  #event-side-menu .side-menu li.section > ul {
    display: contents !important;
  }

  #event-side-menu .side-menu li.section > .title-wrapper {
    display: none !important;
  }

  #event-side-menu .side-menu .item {
    display: block !important;
    flex: 0 0 auto !important;
    width: auto !important;
    border: 0 !important;
    margin: 0 !important;
  }

  #event-side-menu .side-menu .item > a,
  #event-side-menu .side-menu .item > .title {
    padding: 8px 12px !important;
    border-radius: 999px !important;
    white-space: nowrap !important;
  }

  .menu-column .group,
  .menu-column .group .i-button {
    width: 100% !important;
  }
}

/* Semantic-UI message headings (e.g. the registration captcha "Confirm that
   you are not a robot") are <div class="header"> too and were caught by the
   site-header rule above, rendering navy-on-navy. */
.ui.message > .header,
.ui.message .header {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: inherit !important;
}

/* Indico's registration form shows its "review some of the fields" summary on
   first paint, before the visitor has typed anything. The head-hook script
   marks the form once the visitor interacts; until then the summary is hidden
   (the field-level markers and the disabled Register button remain). */
#registration-form-submission-container:not([data-suite-touched]) [class*="form-error-list"] {
  display: none !important;
}

/* =============================================================================
   Native header stack: match the Suite app bar's scale and pill navigation so
   the management shell reads as the same product.
   ============================================================================= */
.page-header #header-logo img.header-logo {
  height: 36px !important;
  width: auto !important;
}

.page-header .flexrow.f-j-space-between {
  padding-top: 6px !important;
  padding-bottom: 6px !important;
}

.global-menu.toolbar {
  padding: 8px clamp(20px, 3vw, 44px) !important;
  background: var(--rs-navy) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
}

.global-menu.toolbar menu {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 0 !important;
}

.global-menu.toolbar li {
  margin: 0 !important;
  list-style: none !important;
}

.global-menu.toolbar a,
.global-menu.toolbar button {
  display: inline-flex !important;
  align-items: center !important;
  padding: 6px 13px !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.08) !important;
  color: #F6F1E7 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
}

.global-menu.toolbar a:hover,
.global-menu.toolbar button:hover,
.global-menu.toolbar a[aria-current],
.global-menu.toolbar li.active a {
  background: rgba(255, 255, 255, 0.18) !important;
  color: #FFFFFF !important;
}

/* Helper copy on native pages was #999 on the near-white canvas (2.6:1). */
.page-description,
.management-page .subtitle,
.i-box .description,
.i-form .form-field-description,
.regform-section .description {
  color: var(--rs-slate) !important;
}

.suite-lifecycle-done {
  margin-left: auto;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  color: #9ee4dd;
  font-weight: 600;
  white-space: nowrap;
}

/* Standalone login page: same type as the product. The footer lives inside
   Indico's fixed-width centered column, so a normal width:100% starts at the
   column edge and overflows the viewport. Centre a viewport-width footer
   explicitly instead. */
.login-page input,
.login-page button,
.login-page select {
  font-family: var(--rs-font-sans) !important;
}

.login-page .footer,
.layout-wrapper.login-page ~ .footer {
  position: relative;
  left: 50%;
  width: 100vw !important;
  max-width: none !important;
  transform: translateX(-50%);
}

/* Attendee registration form (React): brand the submit button, stop iOS from
   zooming into 14px inputs. Class names are Semantic UI's, not generated. */
#registration-form-submission-container .ui.primary.button {
  background: var(--rs-navy) !important;
  color: #FFFFFF !important;
  border-radius: 999px !important;
}

#registration-form-submission-container .ui.primary.button:hover:not(:disabled) {
  background: var(--rs-verdigris) !important;
}

#registration-form-submission-container input:not([type="checkbox"]):not([type="radio"]),
#registration-form-submission-container select,
#registration-form-submission-container textarea {
  font-size: 16px !important;
}

#registration-form-submission-container .ui.message.info {
  background: #f5f8f9 !important;
  border: 1px solid var(--rs-border) !important;
  color: var(--rs-ink) !important;
  box-shadow: none !important;
}

.title > .subtitle,
.management-page .subtitle {
  color: var(--rs-slate) !important;
}

@media (max-width: 768px) {
  .page-header .flexrow.f-j-space-between {
    flex-wrap: wrap !important;
    gap: 6px !important;
    padding: 6px 12px !important;
  }

  .page-header #session-bar,
  .page-header #session-bar .toolbar,
  .page-header #session-bar .group {
    width: 100% !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    gap: 6px !important;
  }

  .page-header #session-bar .i-button {
    max-width: 100% !important;
  }
}

@media (max-width: 768px) {
  .action-box .section {
    flex-wrap: wrap !important;
  }

  .action-box .section > .toolbar {
    width: 100% !important;
    margin: 10px 0 0 !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    gap: 6px !important;
  }
}

/* =============================================================================
   Native contrast floor (WCAG AA, 4.5:1). Indico's stock palette sets #999/#777
   helper text, #bbb dividers, and #00c851 / #0099cc / #e99e18 status labels on
   white. Each measured 1.9-4.5:1 on the registration, registrants and
   timetable pages, as did the footer copy on the themed navy footer. Same
   hues, darkened to text-safe values.
   ============================================================================= */
.footer .f-self-no-shrink,
.footer .f-self-no-shrink span {
  color: #B9C4CC !important;
}

.action-box .section .text,
.regform-done .content,
.permalink-text,
table.registration-info th,
.titled-rule {
  color: var(--rs-slate) !important;
}

.action-box .section .text .label {
  color: var(--rs-ink) !important;
}

.action-box.accept .text .label,
.action-box.success .text .label {
  color: #0b5c56 !important;
}

/* Same hue as the accessible default link colour, so these still read as
   Indico's "info" state and as links. */
.action-box.highlight .text .label,
.action-box.highlight .text a,
.action-box.highlight .js-enable-payments {
  color: #006d99 !important;
}

.action-box.warning .text .label {
  color: #8a5a10 !important;
}

/* Legacy timetable toolbar (Print, PDF, Full screen, Detailed view, Filter):
   white on #888 was 3.54:1. */
.printButtonWhite,
.buttonWhite {
  background-color: var(--rs-slate) !important;
  color: #FFFFFF !important;
}

/* Indico's timetable editor sets its width from the content column's full
   width, ignoring the padding this theme adds to .page-content, so it
   overflowed the viewport by that padding at every desktop width. */
.page-content:has(> #timetable) {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Page titles on the public event pages ("Registration", ...) sat flush
   against the screen edge on phones while the cards below have a gutter. */
@media (max-width: 768px) {
  .conference-page .title-with-actions,
  .conference-page .subtitle-container {
    padding-left: 16px;
    padding-right: 16px;
  }
}