@import url("https://hepalumni.muoncollider.us/fonts/fonts.css");

/* ==========================================================================
   σμμ — a skin for the Indico event page
   A Particle Physics Alumni Reunion · USMCC annual meeting · Stanford

   Install: Event Management → Layout → Custom CSS → upload this file.
   Written against Indico 3.3.12, conference-type event.

   It dresses Indico in the identity used by the poster and by
   hepalumni.muoncollider.us: cream stock, warm near-black ink, one vermillion
   accent, Archivo for the voice, and the Feynman network behind frosted glass.

   Indico's layout mechanics are left alone — only surfaces, type, spacing and
   colour change — so an upgrade should not break the page; it would just show
   a little unstyled furniture wherever new markup appears.

   Fonts and the background image come from the event site. If that host is
   unreachable the page falls back to a system grotesque on plain cream, which
   still reads correctly.

   Two notes on things CSS cannot fix:
     · The event title is stored as "\sigma_{\mu\mu}: ..." and Indico does not
       run MathJax over the header, so it shows the raw LaTeX. Rename the event
       to "σμμ: A Particle Physics Alumni Reunion" with real Unicode characters.
     · Indico only offers custom CSS on conference-type events. This is one.
   ========================================================================== */

:root {
  --smm-paper: #f5f0e1;
  --smm-ink: #201e1d;
  --smm-accent: #ec3013;
  --smm-muted: #605d5d;
  --smm-rule: rgba(32, 30, 29, 0.18);
  --smm-hair: rgba(32, 30, 29, 0.1);
  --smm-glass: rgba(245, 240, 225, 0.62);
  --smm-glass-solid: rgba(245, 240, 225, 0.95);
  --smm-accent-wash: rgba(236, 48, 19, 0.12);
  /* Surfaces that float above the page — the event menu, pop-up lists, the
     balloon. On cream they sit a shade off the paper and the difference
     hardly matters; on the negative it is the whole game, because a panel
     tinted toward the ground reads as a hole cut in the page rather than as
     a card laid on it. So they get tokens of their own, free to be lifted on
     one skin without bleaching the other. */
  --smm-pop: #fbf7ec;
  --smm-pop-border: rgba(32, 30, 29, 0.2);
  --smm-menu-glass: rgba(245, 240, 225, 0.66);
  /* Second-rank type: decks, subtitles, field help. --smm-muted is the
     quietest the page goes (table headers, timezones); anything a reader is
     actually meant to read takes --smm-muted-strong, which holds its
     contrast when the page is a negative. */
  --smm-muted-strong: #45423f;
  /* Indico paints disabled fields with a diagonal stripe in two greys. */
  --smm-stripe: repeating-linear-gradient(-40deg,
      rgba(32, 30, 29, 0.1), rgba(32, 30, 29, 0.1) 10px,
      rgba(32, 30, 29, 0.04) 10px, rgba(32, 30, 29, 0.04) 20px);
  --smm-sans: Archivo, "Helvetica Neue", Arial, sans-serif;
  --smm-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset,
                0 18px 50px -30px rgba(32, 30, 29, 0.45);
  /* How much cream sits over the field. Raise toward 1 for a quieter page. */
  --smm-veil: 0.38;
  /* Everything the browser draws itself rather than from this file — a native
     <select>'s pop-up, scrollbars, date and colour pickers, the caret, the
     spin buttons — takes its palette from color-scheme and from nothing else.
     Unset, the engine assumes a light page and renders a light-mode menu over
     a dark one: on macOS that is the translucent system menu, which is how
     the registration form's Position list came out as grey text floating over
     the form behind it. No amount of styling the page reaches those; the one
     word does. */
  color-scheme: light;
  accent-color: var(--smm-accent);
}

/* ---- the page ----------------------------------------------------------- */
/* The field is fixed behind everything, knocked back under a cream veil so it
   reads as texture rather than as content. The panels frost what they pass.

   It lives on a fixed pseudo-element rather than on `html` with
   background-attachment: fixed, and that is a performance decision, not a
   stylistic one. A background-attachment: fixed image is not a layer of its
   own: it belongs to the page's own paint, so every animation tick of the
   field repaints the document, and every scroll repaints the field. The
   field is an animated SVG — 600 paths that re-rasterise on each tick — so
   that bill is paid several times a second, and on WebKit it collapsed to a
   frame every few seconds. A fixed element is composited: the browser
   rasterises it into a texture of its own, the page scrolls over it without
   touching it, and the animation redraws that one texture instead of the
   page. Same picture, same position, a fraction of the work. */
html { background-color: var(--smm-paper); }
body { background: transparent; color: var(--smm-ink); }
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  /* Say out loud that this layer is its own texture. A fixed element is
     usually promoted anyway, but WebKit is the engine that was dropping
     frames here and this is the declaration it reads. */
  will-change: transform;
  background-color: var(--smm-paper);
  background-image:
    linear-gradient(rgba(245, 240, 225, var(--smm-veil)),
                    rgba(245, 240, 225, var(--smm-veil))),
    url("https://hepalumni.muoncollider.us/img/field-live.svg?v=2");
  background-repeat: no-repeat, no-repeat;
  background-position: center center, center center;
  background-size: cover, cover;
}
body,
.conference-page, .conferenceDetails, .i-box, .ui.form,
input, select, textarea, button, .i-button {
  font-family: var(--smm-sans);
}
/* iOS mishandled background-attachment: fixed — it stretched the cover image
   over the whole scroll height — which a fixed element does not, so the old
   override is gone. What is left for a phone is the size: a field scaled to
   cover a tall narrow viewport is mostly empty middle. */
@media (max-width: 700px) {
  body::before { background-size: cover, 160vw auto; }
}

/* The ?v= on the field is a cache-buster, and it earns its keep: the file's
   name did not change when its animation did, so a browser holding the old
   copy went on showing the old behaviour -- which, in Safari, was no
   animation at all. Bump it whenever the SVG is regenerated.

   The field draws itself: field-live.svg carries its own SMIL animation, and
   an SVG used as a background-image runs that (it is loaded without scripts,
   but not frozen). It used to carry CSS keyframes instead, which Chrome and
   iOS ran and Safari on the desktop did not — it rendered the first frame and
   stopped — so the whole file is SMIL now, which every current engine runs in
   an image.
   Anyone who has asked for less motion gets the finished field as a flat
   image instead. That swap has to happen here rather than inside the SVG:
   nothing within an SVG can switch its own SMIL off. */
@media (prefers-reduced-motion: reduce) {
  body::before {
    background-image:
      linear-gradient(rgba(245, 240, 225, var(--smm-veil)),
                      rgba(245, 240, 225, var(--smm-veil))),
      url("https://hepalumni.muoncollider.us/img/field-still.png?v=2");
  }
}

/* ---- make Indico fluid -------------------------------------------------- */
/* The conference theme hard-codes pixel widths (950px on the title and the
   section box, 700px on the dateline, 200px on the menu), so a phone gets a
   983px document in a 390px viewport and everything spills. Unpin them once,
   here, rather than patching it inside a media query. */
.confTitle,
.confTitle h1,
.confTitle a,
.conference-title-link,
.confSubTitleContent,
.confSubTitle,
.datePlace,
.datePlace .date,
#confSectionsBox,
.confBodyBox,
.mainContent,
.col2 {
  width: auto !important;
  max-width: 100% !important;
}
.confTitle, .confTitle h1 { overflow-wrap: anywhere; }
#session-bar, #session-bar .toolbar, #session-bar .group,
.main-action-bar, .footer > .flexrow {
  max-width: 100%;
  flex-wrap: wrap;
}

/* ---- the bar across the top --------------------------------------------- */
/* Scoped deliberately. Indico also uses a bare .header inside the
   registration form for every section title, so styling .header on its own
   painted each of those an ink block. Only the wrapper that actually holds
   the page header counts; :has is the precise form, body > .header the
   fallback for browsers without it. Either way the inner .page-header below
   carries the colour, so nothing looks broken if both miss. */
body > .header,
.header:has(> .page-header),
.page-header,
.page-header-dark,
.event-page-header {
  background: var(--smm-ink) !important;
  border: 0;
  box-shadow: none;
}
.page-header a, .page-header .i-button, .page-header .text-color,
#session-bar a, #session-bar .i-button {
  color: var(--smm-paper) !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.page-header a:hover, .page-header .i-button:hover, #session-bar a:hover {
  color: var(--smm-accent) !important;
}
.page-header .separator { border-color: rgba(245, 240, 225, 0.25); }

/* ---- masthead ----------------------------------------------------------- */
/* One frosted pane carrying the title and the dateline, on the same column
   Indico already centres its content in. */
.conf { background: transparent !important; }
.confheader {
  max-width: 1000px !important;
  margin: clamp(1.5rem, 4vh, 3rem) auto clamp(1rem, 3vh, 1.75rem);
  padding: clamp(1.5rem, 4vw, 2.75rem) clamp(1.25rem, 3vw, 2rem) clamp(1.25rem, 3vw, 1.75rem);
  border: 1px solid var(--smm-hair) !important;
  box-shadow: var(--smm-shadow) !important;
}
.confTitleBox,
.confSubTitleBox,
.confSubTitleContent {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}
/* The text lives in an h1 that Indico colours directly, so inheriting from
   .confTitle never reaches it — every descendant has to be named. */
.confTitle,
.confTitle h1,
.confTitle a,
.confTitleBox * {
  color: var(--smm-ink) !important;
  font-family: var(--smm-sans);
  text-decoration: none;
}
.confTitle,
.confTitle h1 {
  margin: 0;
  max-width: none;
  font-size: clamp(1.7rem, 4vw, 2.9rem);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.02em;
  text-wrap: balance;
  /* never uppercase: it would set σμμ as ΣΜΜ */
  text-transform: none;
}
.confSubTitleBox { margin-top: 1.1rem !important; }
.confSubTitle,
.confSubTitle * {
  color: var(--smm-ink) !important;
  font-size: clamp(0.9rem, 2.2vw, 1.15rem);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.35;
}
/* The banner already carries the place and the dates, so the line underneath
   says them twice. Hidden the same way as the title and under the same
   condition — only where a banner exists, only visually, text left in the DOM.
   The search box is a sibling inside the same row, so it is untouched. */
.confheader:has(.confLogoBannerBox) .confSubTitle,
.confheader:has(.confLogoBannerBox) .confSubTitle *,
.confheader:has(.confLogoBox) .confSubTitle,
.confheader:has(.confLogoBox) .confSubTitle * {
  font-size: 0 !important;
  line-height: 0 !important;
  letter-spacing: 0 !important;
  margin: 0 !important;
}
.confheader:has(.confLogoBannerBox) .confSubTitleBox,
.confheader:has(.confLogoBox) .confSubTitleBox {
  margin-top: 0 !important;
}

.confSubTitle .timezone-label,
.confSubTitle .timezone,
.confSubTitleBox .timezone-label,
.confSubTitleBox .timezone {
  color: var(--smm-muted) !important;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.12em;
}
#event-search-box input { border-radius: 0 !important; }

/* When a banner is uploaded it already carries the meeting's name, and the
   title underneath just says it again. Hide it — but only where a banner is
   actually present, so an event without one keeps its title, and only
   visually, so the page still has its h1 for assistive technology and search.
   :has is the whole mechanism: without support the rule is dropped and the
   title stays, which is the safe way to fail. Delete this block to bring the
   title back.

   Zeroing the font rather than clipping the box, because Indico may render the
   banner *inside* the title element, and a clipped ancestor cannot be
   un-clipped from within — the banner would disappear with the words. The
   banner is a replaced element sized in per cent, so a zeroed font size does
   not touch it, and normal metrics are restored inside it regardless. */
.confheader:has(.confLogoBannerBox) .confTitleBox,
.confheader:has(.confLogoBannerBox) .confTitle,
.confheader:has(.confLogoBannerBox) .confTitle *,
.confheader:has(.confLogoBox) .confTitleBox,
.confheader:has(.confLogoBox) .confTitle,
.confheader:has(.confLogoBox) .confTitle * {
  /* The h1 carries its own font-size further up this file and the words sit in
     a span inside it, so inheriting a zero reaches neither. Name every
     descendant instead. */
  font-size: 0 !important;
  line-height: 0 !important;
  letter-spacing: 0 !important;
  margin: 0 !important;
  /* Indico gives .confTitleBox a 90px min-height and the title link an
     explicit height; left alone they hold the pane open as an empty chin
     under the banner. */
  min-height: 0 !important;
  height: auto !important;
  padding: 0 !important;
}
/* Same specificity as the rule above and written after it, so it wins the tie
   wherever the banner turns out to live inside the title. */
.confheader:has(.confLogoBannerBox) .confLogoBannerBox,
.confheader:has(.confLogoBannerBox) .confLogoBannerBox *,
.confheader:has(.confLogoBox) .confLogoBox,
.confheader:has(.confLogoBox) .confLogoBox * {
  font-size: 1rem !important;
  line-height: normal !important;
}
/* The zeroing rule above also flattens margins on everything inside the
   title, which would stop the banner bleeding when it is nested there. Same
   specificity, written after, so the bleed survives every nesting. */
.confheader:has(.confLogoBannerBox) .confLogoBannerBox,
.confheader:has(.confLogoBox) .confLogoBox {
  margin: 0 calc(-1 * clamp(1.25rem, 3vw, 2rem)) 0 !important;
}
/* The banner is opaque and the pane it sits in is translucent, so an inset
   banner reads as a dark plate with a frame around it — the pane showing
   through. Rather than fake a border, let the banner bleed to the pane's
   edges and become the masthead: the side margins cancel the pane's own
   padding exactly, and its top padding goes when a banner is present.
   (To frame it instead, drop this block and give .confLogoBannerBox img a
   1px solid var(--smm-rule).) */
/* With the title and the dateline both gone, everything below the banner is
   empty pane — a grey chin under the masthead. Close the box up around the
   banner. The search box shares that row and is real content, so where it
   exists the row keeps its own padding; where it does not, the pane ends at
   the banner. */
.confheader:has(.confLogoBannerBox),
.confheader:has(.confLogoBox) {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
/* The search box was the last thing in that row. It goes too, so the masthead
   is the banner and nothing else. display: none rather than the visually
   hidden treatment used for the title and the dateline — this is a control,
   and a focusable input nobody can see is worse than no input at all. An
   event with no banner keeps its search. */
.confheader:has(.confLogoBannerBox) #event-search-box,
.confheader:has(.confLogoBox) #event-search-box {
  display: none !important;
}
.confLogoBannerBox,
.confLogoBox {
  margin: 0 calc(-1 * clamp(1.25rem, 3vw, 2rem))
          clamp(1rem, 2.5vw, 1.6rem) !important;
  padding: 0 !important;
  float: none !important;
  height: auto !important;
}
.confLogoBannerBox img,
.confLogoBox img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  margin: 0 !important;
}

/* ---- the two columns ---------------------------------------------------- */
#confSectionsBox { max-width: 1000px !important; margin: 0 auto 3rem; }
.confBodyBox,
.conf_leftMenu {
  border: 1px solid var(--smm-hair) !important;
  border-radius: 0 !important;
  box-shadow: var(--smm-shadow) !important;
}

/* The frost lives on a pseudo-element, not on the pane.
   An element with backdrop-filter becomes the containing block for its
   position: fixed descendants, and Indico positions pop-ups — the consent
   dropdown on the registration form, for one — in viewport coordinates. With
   the filter on the pane those coordinates resolved against the pane and the
   menu opened hundreds of pixels away. Putting the filter on ::before keeps
   the look and leaves the pane an ordinary box: position: relative is a
   containing block for absolute descendants only, never for fixed ones. */
.confheader,
.confBodyBox,
.conf_leftMenu {
  position: relative;
  background: transparent !important;
}
.confheader::before,
.confBodyBox::before,
.conf_leftMenu::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--smm-glass);
  -webkit-backdrop-filter: blur(15px) saturate(1.25);
  backdrop-filter: blur(15px) saturate(1.25);
}
/* The menu is a narrow column of short lines with a lot of rule between
   them, so it carries far less ink than the body pane and needs a touch
   more surface under it to hold together as one object. */
.conf_leftMenu::before { background: var(--smm-menu-glass); }
.conf_leftMenu { border-color: var(--smm-rule) !important; }
.confBodyBox {
  padding: clamp(1.25rem, 3vw, 2.25rem) !important;
  min-height: 16rem;
  /* A formatting context of its own. The menu beside it is a float in the
     page's root context, so without this any clearfix inside the pane —
     Indico puts one on .infogrid, among others — clears the *menu* and drags
     whatever carries it down past the bottom of the menu column. That is how
     an empty .infogrid, a div with no children at all, came to hold 237px of
     nothing between the page title and the registration notice. Contained
     here, a float outside the pane cannot reach into it. */
  display: flow-root;
}
.conf_leftMenu { padding: 1rem !important; }
/* Indico floats a fixed-width column inside the body box; with padding added
   that would overflow, so let it size to the box instead. */
.confBodyBox .col2,
.confBodyBox .mainContent {
  float: none !important;
  width: auto !important;
  margin: 0 !important;
}
/* Panels inside the frosted panel would frost twice and go milky. */
.confBodyBox .i-box,
.confBodyBox .page-content,
.confBodyBox .conference-page {
  background: transparent !important;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border: 0 !important;
  box-shadow: none !important;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .confheader::before, .confBodyBox::before, .conf_leftMenu::before {
    background: var(--smm-glass-solid);
  }
}

/* ---- the event menu ----------------------------------------------------- */
.conf_leftMenu nav,
.conf_leftMenu ul,
.conf_leftMenu #outer {
  margin: 0;
  padding: 0;
  list-style: none;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
}
.conf_leftMenu li, .conf_leftMenu .menuConfTitle {
  background: none !important;
  border: 0 !important;
  border-top: 1px solid var(--smm-rule) !important;
  margin: 0;
}
.conf_leftMenu li:first-child { border-top: 0 !important; }
/* Indico sets these on `#outer li a`, and an id beats any number of classes,
   so without !important the menu keeps Indico's Verdana at 10pt however
   specific the selector here gets. */
.conf_leftMenu li a, .conf_leftMenu .menuConfTitle a {
  display: block;
  padding: 0.65rem 0.2rem;
  background: none !important;
  color: var(--smm-ink) !important;
  font-family: var(--smm-sans) !important;
  font-size: 0.95rem !important;
  font-weight: 600 !important;
  text-decoration: none;
}
.conf_leftMenu li a:hover { color: var(--smm-accent) !important; }
.conf_leftMenu .menuConfSelected,
.conf_leftMenu li.selected {
  border-left: 3px solid var(--smm-accent) !important;
  padding-left: 0.55rem;
}
.conf_leftMenu .menuConfSelected > a,
.conf_leftMenu li.selected > a { color: var(--smm-accent) !important; font-weight: 700; }

/* Registration is the reason most people open this page, so it should not read
   as one more line in a list of six. CSS cannot match on an item's label, and
   Indico gives custom menu entries no class of their own -- every one of them
   is li.menuConfTitle -- so this goes by where the link points: the event's
   registration form. The participant list lives under the same path and is
   excluded by name.

   Consequence worth knowing: this follows the link, not the wording. Rename
   the item and it stays styled; point some other item at the registration
   form and that one gets it too. */
.conf_leftMenu li a[href*="/registration"]:not([href*="participants"]) {
  color: var(--smm-accent) !important;
  padding-top: 0.9rem !important;
  padding-bottom: 0.9rem !important;
  font-size: 1.75rem !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.1 !important;
}
.conf_leftMenu li a[href*="/registration"]:not([href*="participants"]):hover {
  text-decoration: underline;
  text-underline-offset: 0.18em;
}
/* And on the registration page itself it keeps the size rather than falling
   back to the selected-item styling, which is set for a one-line item. */
.conf_leftMenu .menuConfSelected > a[href*="/registration"]:not([href*="participants"]),
.conf_leftMenu li.selected > a[href*="/registration"]:not([href*="participants"]) {
  font-size: 1.75rem !important;
  font-weight: 800 !important;
}

/* ---- headings and copy -------------------------------------------------- */
.confBodyBox h2, .page-content h2, .conferenceDetails h2 {
  margin: 0 0 1.2rem;
  padding: 0;
  color: var(--smm-accent) !important;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  border: 0;
  background: none;
}
.confBodyBox h3, .page-content h3 {
  color: var(--smm-ink);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.005em;
}
/* The page header of every Indico page is an <h2> title with an <h3> deck
   under it — "Registration", then the form's own name. Indico colours both
   #333 at `.conference-page header h3`, one class and two elements, which
   outweighs the element rules above: the title wins here only because it is
   marked !important, and the deck, which is not, stayed a dark grey that
   the negative skin turned almost to nothing. Named at the same length and
   given the second rank, which is what a deck is. */
.conference-page header h3,
.conference-page header .subtitle-container h3 {
  color: var(--smm-muted-strong) !important;
  font-family: var(--smm-sans) !important;
  font-weight: 500;
  letter-spacing: 0;
}
.conference-page header h2 { color: var(--smm-accent) !important; }
.conference-page header .page-description,
.conference-page header .page-info { color: var(--smm-muted-strong) !important; }
.description, .editor-output, .confBodyBox p {
  color: var(--smm-ink);
  font-size: 1rem;
  line-height: 1.55;
  text-wrap: pretty;
}
/* The measure is for running text. It used to sit on the description itself,
   which capped a two-column table at 36rem inside a much wider pane. */
.confBodyBox p, .editor-output li { max-width: 36rem; }
/* Indico sets Roboto on editor output; the skin's face wins everywhere in it. */
.confBodyBox .editor-output,
.confBodyBox .editor-output *:not(code):not(pre) { font-family: var(--smm-sans) !important; }
.confBodyBox a, .description a { color: var(--smm-accent); text-underline-offset: 0.18em; }
.confBodyBox a:hover { text-decoration: underline; }

/* Description text pasted from a document arrives carrying inline colours from
   wherever it was copied — grey that looked like ordinary body text on white
   and nearly vanishes on a dark ground. An author !important beats a
   non-important inline style, so this takes those back to the palette.
   Matching [style*="color"] leaves untouched anything that never had a colour
   of its own; it does also flatten a deliberately coloured word, which is the
   trade. The real fix is to clear the formatting in the description editor. */
.confBodyBox .editor-output [style*="color"],
.confBodyBox .description [style*="color"],
.confBodyBox .editor-output font[color],
.confBodyBox .description font[color] {
  color: var(--smm-ink) !important;
}
/* The committee lists arrived a flat #555 that survived the rule above, so the
   colour is not reaching us as an inline style — it may be a class, a font
   tag, or a style block pasted along with the names. Rather than keep guessing
   the mechanism, take every list in the description back to the palette
   outright. Scoped to list items, so prose and headings keep their own
   colour. */
.confBodyBox .conferenceDetails li,
.confBodyBox .conferenceDetails li *,
.confBodyBox .editor-output li,
.confBodyBox .editor-output li *,
.confBodyBox .description li,
.confBodyBox .description li * {
  color: var(--smm-ink) !important;
}
.confBodyBox .conferenceDetails li a,
.confBodyBox .editor-output li a,
.confBodyBox .description li a { color: var(--smm-accent) !important; }
/* links keep the accent even when they arrived with a colour of their own */
.confBodyBox .editor-output a[style*="color"],
.confBodyBox .description a[style*="color"] {
  color: var(--smm-accent) !important;
}

/* ---- description content ------------------------------------------------ */
/* Descriptions come out of a rich-text editor, usually pasted from a document,
   and arrive as layout: nested tables with hard-coded pixel heights, widths
   over 100%, spacer rows, floated images the text wraps under, a <p> inside
   every <li>. The words are the author's; the geometry is an accident. Strip
   the geometry, keep the words, and lay any table out as columns that stack
   on a phone. Everything here is !important because it is fighting inline
   styles, which is exactly where pasted layout lives. */
.confBodyBox .editor-output table,
.confBodyBox .editor-output tbody,
.confBodyBox .editor-output tr,
.confBodyBox .editor-output td,
.confBodyBox .editor-output th {
  height: auto !important;
  min-height: 0 !important;
  border: 0 !important;
  background: transparent !important;
}
.confBodyBox .editor-output table {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  border-collapse: collapse !important;
  table-layout: fixed;
}
.confBodyBox .editor-output col { width: auto !important; }
.confBodyBox .editor-output td,
.confBodyBox .editor-output th {
  vertical-align: top !important;
  text-align: left !important;
  padding: 0 clamp(1.25rem, 3.5vw, 2.5rem) 0 0 !important;
}
.confBodyBox .editor-output td:last-child,
.confBodyBox .editor-output th:last-child { padding-right: 0 !important; }
.confBodyBox .editor-output img {
  display: block;
  max-width: 100% !important;
  height: auto !important;
  float: none !important;
  margin: 0 0 1.25rem !important;
}
.confBodyBox .editor-output td > :first-child { margin-top: 0 !important; }
.confBodyBox .editor-output h2 { margin: 1.6rem 0 0.8rem !important; }
.confBodyBox .editor-output img + h2,
.confBodyBox .editor-output p:has(> img:only-child) + h2 { margin-top: 0.4rem !important; }
.confBodyBox .editor-output ul { margin: 0 0 1rem; padding-left: 1.1rem; }
.confBodyBox .editor-output li { margin: 0.3rem 0; line-height: 1.4; }
.confBodyBox .editor-output li > p { margin: 0 !important; }
.confBodyBox .editor-output li::marker { color: var(--smm-accent); }
/* a Mac paste brings its system font stack along; the skin's face wins */
.confBodyBox .editor-output [style*="font-family"] { font-family: var(--smm-sans) !important; }
.confBodyBox .editor-output [style*="font-size"] { font-size: inherit !important; }
@media (max-width: 820px) {
  .confBodyBox .editor-output table,
  .confBodyBox .editor-output tbody,
  .confBodyBox .editor-output tr,
  .confBodyBox .editor-output td,
  .confBodyBox .editor-output th {
    display: block !important;
    width: 100% !important;
    padding: 0 !important;
  }
  .confBodyBox .editor-output td + td { margin-top: 1.75rem; }
}

/* ---- the date / location grid ------------------------------------------- */
/* Indico lays these out as side-by-side columns; stacking them full width
   turns them into the poster's ruled rows. */
.infogrid {
  display: block !important;
  margin-top: 1.75rem;
  border: 0;
  background: none;
}
/* Indico emits this grid whether or not it has anything to put in it: a
   registration form with no scheduled dates, no separate fee and no contact
   address renders <div class="infogrid condensed"></div> and nothing else.
   An empty box should take no room and no margin. */
.infogrid:empty { display: none !important; }
.infoline {
  float: none !important;
  width: auto !important;
  display: flex;
  gap: clamp(0.9rem, 3vw, 1.6rem);
  align-items: baseline;
  padding: 0.95rem 0;
  border-top: 1px solid var(--smm-rule);
  background: none !important;
}
.infoline:last-child { border-bottom: 1px solid var(--smm-rule); }
.infoline h3, .infoline > .icon {
  flex: 0 0 auto;
  min-width: 1.5rem;
  margin: 0;
  color: var(--smm-muted) !important;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.infoline .text, .infoline .place { font-size: 1.02rem; font-weight: 500; }
.infoline .label { font-weight: 700; }
.infoline .timezone-label, .infoline .timezone {
  color: var(--smm-muted) !important;
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}

/* ---- buttons ------------------------------------------------------------ */
/* Ink block, vermillion on hover: the poster's one loud move. */
.confBodyBox .i-button, .conference-page .i-button, button.i-button,
.ui.button, .ui.primary.button, input[type="submit"] {
  display: inline-block;
  padding: 0.7em 1.5em;
  background: var(--smm-ink) !important;
  background-image: none !important;
  color: var(--smm-paper) !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font-family: var(--smm-sans);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  text-shadow: none;
  transition: background 0.15s ease;
}
.confBodyBox .i-button:hover, .conference-page .i-button:hover, button.i-button:hover,
.ui.button:hover, .ui.primary.button:hover, input[type="submit"]:hover {
  background: var(--smm-accent) !important;
  color: var(--smm-paper) !important;
}
.confBodyBox .i-button.subtle, .ui.basic.button {
  background: none !important;
  color: var(--smm-ink) !important;
  border: 1px solid rgba(32, 30, 29, 0.35) !important;
}

/* ---- registration form -------------------------------------------------- */
.regform-section, .regform-done, .i-form .form-group, .ui.form .field {
  background: none;
  border-color: var(--smm-rule);
}
.regform-section-title, .i-form .form-group .form-label, .ui.form label {
  color: var(--smm-ink) !important;
  font-family: var(--smm-sans);
  font-weight: 700;
}
/* input:not([type]) is not pedantry: the filter box inside <ind-select> and
   a few of Indico's own search fields ship without the attribute, and
   [type="text"] does not match an input that never declared one. */
.i-form input[type="text"], .i-form input[type="email"], .i-form input[type="number"],
.i-form input:not([type]),
.i-form textarea, .i-form select,
.ui.form input, .ui.form input:not([type]),
.ui.form textarea, .ui.form select, .ui.input > input {
  background: rgba(255, 255, 255, 0.55) !important;
  color: var(--smm-ink) !important;
  border: 1px solid var(--smm-rule) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font-family: var(--smm-sans);
  font-size: 1rem;
}
/* A native <select> drops its list through the OS, which reads the colours
   off the <option>s and nothing else — no inherited colour, no parent rule
   reaches it. Unset, a dark skin gets whatever the platform picks, which on
   a light system is black-on-white and on a dark one was near-black on
   near-black. Naming both ends here settles it on every platform. */
select option,
select optgroup {
  background: var(--smm-pop) !important;
  color: var(--smm-ink) !important;
}
.i-form input:focus, .ui.form input:focus, .ui.form textarea:focus, .ui.input > input:focus {
  border-color: var(--smm-accent) !important;
  outline: 2px solid var(--smm-accent);
  outline-offset: 1px;
}
.regform-section,
.regform-section .i-box-header,
.confBodyBox .i-box-header {
  background: none !important;
  border-color: var(--smm-rule) !important;
}
.regform-section .i-box-header,
.confBodyBox .i-box-header {
  border-bottom: 1px solid var(--smm-rule) !important;
}
/* Indico titles these in blue Roboto; bring them into the palette. */
.i-box-title,
.regform-section .header,
.confBodyBox .i-box-title {
  color: var(--smm-ink) !important;
  background: none !important;
  font-family: var(--smm-sans) !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
}
.regform-section .field label,
.regform-section .header + p,
.regform-section .description {
  font-family: var(--smm-sans);
}

/* ---- the registration form's own React components -----------------------
   The form is React, and its styles are CSS modules: every class is a
   readable name plus a build hash (regform-module__form-item___AlbiE), so
   the hash is matched around, not typed in — an Indico upgrade rebuilds it.

   Three things Indico hard-codes there, each written for a white page:

   · a multiple-choice field is a <fieldset> whose <legend> carries the
     question, coloured rgba(0, 0, 0, .87) — "Research areas" and "Dietary
     Restrictions" came out black on black.
   · a label-type field, which authors use as a sub-heading inside a
     section ("Fee Payment"), renders as a plain div at #555.
   · a field's description is set justified, italic, at #999: justified at a
     36em measure it opens rivers, and any markdown list in it loses its
     indent, so the bullets sit out in the margin. */
.confBodyBox [class*="regform-module__form-item___"] legend {
  color: var(--smm-ink) !important;
  font-family: var(--smm-sans) !important;
  font-weight: 700 !important;
}
.confBodyBox [class*="regform-module__form-item___"] .required > fieldset > legend::after {
  color: var(--smm-accent) !important;
}
.confBodyBox [class*="regform-module__label___"] {
  color: var(--smm-ink) !important;
  font-family: var(--smm-sans) !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
}
.confBodyBox [class*="regform-module__description___"] {
  color: var(--smm-muted-strong) !important;
  text-align: left !important;
  text-wrap: pretty;
}
/* Give a list in a description the indent the markdown implies, and let the
   markers sit inside the measure rather than out in the margin. */
.confBodyBox [class*="regform-module__description___"] ul,
.confBodyBox [class*="regform-module__description___"] ol {
  margin: 0.45em 0 !important;
  padding-left: 1.35em !important;
  list-style-position: outside !important;
}
.confBodyBox [class*="regform-module__description___"] li { margin: 0.2em 0 !important; }
.confBodyBox [class*="regform-module__description___"] li::marker { color: var(--smm-muted) !important; }
.confBodyBox [class*="regform-module__description___"] p { margin: 0 0 0.45em !important; }
.confBodyBox [class*="regform-module__description___"] > :last-child { margin-bottom: 0 !important; }

/* Multiple-choice options are a table, and Indico gives each row 15px of
   padding above and below plus a hairline between: room for a row that may
   also carry a price and a places-left count. A plain list of choices does
   not need a third of an inch between ticks, and the questions already carry
   the rules, so the options sit close and unruled under theirs. */
.confBodyBox [class*="table-module__choice-table___"] tr td:first-child {
  padding-top: 0.22rem !important;
  padding-bottom: 0.22rem !important;
}
.confBodyBox [class*="table-module__choice-table___"] [class*="table-module__row___"]:not(:last-child) {
  border-bottom: 0 !important;
}

/* One question per ruled row. Indico separates its form items by 10px of
   air and nothing else, which works where every field is a white box on a
   white page and stops working here, where the wells are only a shade off
   the panel. The rule is the same hairline the dateline and the tables use,
   so the form reads as the rest of the page does. */
.confBodyBox [class*="regform-module__form-item___"] + [class*="regform-module__form-item___"] {
  margin-top: 1.1rem !important;
  padding-top: 1.1rem !important;
  border-top: 1px solid var(--smm-hair) !important;
}

/* Indico's own form widgets carry hard-coded white: the select trigger, its
   pop-up list, and the error summary. The error list is a CSS module, so its
   class is a readable prefix plus a build hash — match the prefix, or an
   Indico upgrade silently drops the rule. */
.confBodyBox [class*="FormErrorList"] {
  background: var(--smm-pop) !important;
  color: var(--smm-ink) !important;
  border: 1px solid var(--smm-accent) !important;
  border-radius: 0 !important;
}

/* <ind-select> — the picker Indico 3.3 uses for a single-choice field, the
   Position question on the registration form among them. It is a custom
   element built out of a .caption trigger, a <dialog> that opens against it,
   a filter <input> and a [role=listbox] of [role=option]s: no <ul>, no
   .menu, none of the hooks a rule written for Semantic's dropdown would
   reach, which is why the list came up in Indico's own white (and the filter
   input with it) however hard that rule tried.

   Deliberately not scoped to .confBodyBox. The listbox is positioned against
   the viewport by the component's own positioning code, and the same element
   is used on management forms that never render inside the body box. */
ind-select .caption,
ind-select dialog,
ind-select [role="listbox"],
ind-select .option-filter input,
ind-combo-box [role="listbox"],
ind-menu [role="menu"],
ind-menu dialog {
  background: var(--smm-pop) !important;
  color: var(--smm-ink) !important;
  border-color: var(--smm-pop-border) !important;
  border-radius: 0 !important;
}
/* The list is drawn over the form it belongs to, so it needs an edge and a
   shadow of its own — without them the options float with nothing to say
   where the list starts and the page resumes. */
ind-select [role="listbox"],
ind-combo-box [role="listbox"],
ind-menu [role="menu"] {
  border: 1px solid var(--smm-pop-border) !important;
  box-shadow: var(--smm-shadow) !important;
}
ind-select [role="option"],
ind-select .no-option,
ind-combo-box [role="option"],
ind-menu [role="menuitem"] { color: var(--smm-ink) !important; }
ind-select [role="option"]:hover,
ind-select [role="option"][aria-selected],
ind-combo-box [role="option"]:hover,
ind-menu [role="menuitem"]:hover {
  background: var(--smm-accent-wash) !important;
  color: var(--smm-ink) !important;
}
ind-select [role="option"][aria-disabled],
ind-select .no-option { color: var(--smm-muted) !important; }
/* Semantic marks an errored field's input in its own pale red, which is the
   one surface in the form that stays light. Keep the signal, drop the white:
   the accent border and the accent text say it on either skin. */
.ui.form .field.error ind-select .caption,
.ui.form .field.error ind-select .option-filter input,
.ui.form .field.error input,
.ui.form .field.error textarea {
  background: var(--smm-pop) !important;
  border-color: var(--smm-accent) !important;
  color: var(--smm-ink) !important;
}

/* Classic Semantic UI dropdown (the Type/Session/Track pickers on edit forms
   — a different, older component than ind-select above, but the same white-
   on-white problem). Global, not confined to .confBodyBox: the modals below
   render outside it, and a plain .ui.dropdown carries no other hook. */
.ui.selection.dropdown,
.ui.dropdown .menu {
  background: var(--smm-pop) !important;
  color: var(--smm-ink) !important;
  border: 1px solid var(--smm-pop-border) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.ui.dropdown .menu { box-shadow: var(--smm-shadow) !important; }
.ui.dropdown .menu > .item {
  color: var(--smm-ink) !important;
  border-top-color: var(--smm-rule) !important;
}
.ui.dropdown .menu > .item:hover,
.ui.dropdown .menu .selected.item,
.ui.dropdown .menu .active.item {
  background: var(--smm-accent-wash) !important;
  color: var(--smm-ink) !important;
}

/* Semantic UI checkbox: a plain white box drawn with :before/:after, not an
   <input> Indico's usual "form input" rule reaches. Toggles and sliders are
   excluded — their :before is the coloured track, and painting it over
   would leave on and off looking identical. */
.ui.checkbox:not(.toggle):not(.slider) label:before {
  background: var(--smm-pop) !important;
  border: 1px solid var(--smm-rule) !important;
}
.ui.checkbox:not(.toggle):not(.slider) input:checked ~ label:before {
  background: var(--smm-pop) !important;
  border-color: var(--smm-accent) !important;
}
.ui.checkbox:not(.toggle):not(.slider) input:checked ~ label:after {
  color: var(--smm-accent) !important;
}
/* The label beside it carries its own near-black, which the "form label"
   rule above never reaches: it is not inside a .ui.form. Toggles included —
   only their track is left alone, not their text. */
.ui.checkbox label,
.ui.checkbox + label,
.ui.toggle.checkbox label { color: var(--smm-ink) !important; }
/* Semantic marks the switched-on label !important at a longer selector, so
   that one has to be answered at the same length. The track comes into the
   palette while it is here: off was a 5%-black wash, invisible on a dark
   panel, and on was Semantic's blue. */
.ui.toggle.checkbox input:checked ~ label,
.ui.toggle.checkbox input:focus:checked ~ label { color: var(--smm-ink) !important; }
.ui.toggle.checkbox label:before { background-color: var(--smm-hair) !important; }
.ui.toggle.checkbox input:checked ~ label:before,
.ui.toggle.checkbox input:focus:checked ~ label:before {
  background-color: var(--smm-accent) !important;
}

/* ---- modals (Semantic UI React dialogs) ---------------------------------
   Edit contribution, edit session, edit page, submit-abstract and every
   other management dialog mount through React, portalled onto <body> rather
   than into .confBodyBox — nothing above this reaches them, so they surface
   in Indico's stock white-on-Muli look, a foreign object dropped onto this
   skin. .ui.modal is Semantic UI's own class, the only hook there is; it is
   matched at the specificity Semantic UI itself uses (Indico never marks
   these !important) so plain source order — this file loads last — decides
   it without needing to out-specify anything. The dimmer behind it is left
   alone: dark and semi-opaque already, it reads the same in both themes. */
.ui.modal {
  background: var(--smm-pop) !important;
  color: var(--smm-ink) !important;
  border-radius: 0 !important;
  box-shadow: var(--smm-shadow) !important;
}
.ui.modal > .header {
  background: var(--smm-pop) !important;
  color: var(--smm-ink) !important;
  border-bottom: 1px solid var(--smm-rule) !important;
  box-shadow: none !important;
  font-family: var(--smm-sans) !important;
}
.ui.modal > .content,
.ui.modal > .content > .description {
  background: var(--smm-pop) !important;
  color: var(--smm-ink) !important;
}
.ui.modal > .actions {
  background: var(--smm-hair) !important;
  border-top: 1px solid var(--smm-rule) !important;
}
.ui.modal .field label,
.ui.modal label {
  color: var(--smm-ink) !important;
}

/* ---- the description editor (react-markdown-editor-lite) -----------------
   Its own classes carry hard-coded whites at higher specificity than the
   ".ui.form textarea" rule above reaches, and it is not even inside a
   .ui.form to begin with, so the toolbar and the two panes need naming
   directly. This is the field that opens on "edit contribution", "edit
   page" and "submit abstract" alike — one fix covers all three. */
.rc-md-editor {
  background: var(--smm-pop) !important;
  border: 1px solid var(--smm-rule) !important;
}
.rc-md-editor .rc-md-navigation {
  background: var(--smm-hair) !important;
  border-bottom: 1px solid var(--smm-rule) !important;
}
.rc-md-editor .rc-md-navigation .navigation-nav,
.rc-md-editor .rc-md-navigation .button-wrap .button {
  color: var(--smm-ink) !important;
}
.rc-md-editor .rc-md-navigation .button-wrap .button:hover {
  color: var(--smm-accent) !important;
}
.rc-md-editor .rc-md-navigation .button-wrap .button.disabled {
  color: var(--smm-muted) !important;
}
.rc-md-editor .rc-md-divider {
  background-color: var(--smm-rule) !important;
}
.rc-md-editor .editor-container > .section {
  border-right-color: var(--smm-rule) !important;
}
.rc-md-editor .editor-container .sec-md .input,
.rc-md-editor .editor-container .sec-html .html-wrap {
  background: var(--smm-pop) !important;
  color: var(--smm-ink) !important;
}
.rc-md-editor .drop-wrap {
  background-color: var(--smm-pop) !important;
  border-color: var(--smm-rule) !important;
  color: var(--smm-ink) !important;
}
.rc-md-editor .tab-map-list .list-item:hover,
.rc-md-editor .header-list .list-item:hover {
  background: var(--smm-accent-wash) !important;
}

/* ---- management dialogs (jQuery UI) --------------------------------------
   Edit contribution, edit page, edit session, submit abstract: all of them
   open in a jQuery UI dialog appended to <body>, outside .confBodyBox and
   outside every rule above. Indico paints the dialog white and lets the
   text inherit, so on the dark skin the labels — which this sheet has
   already turned bone — arrived white on white. The surface is what has to
   move; everything inside then reads correctly without naming it.
   .ui-dialog-titlebar is one of the few rules Indico marks !important, so
   it is answered in kind. */
.ui-widget-content,
div.exclusivePopup {
  background: var(--smm-pop) !important;
  color: var(--smm-ink) !important;
  border-color: var(--smm-rule) !important;
}
.ui-dialog {
  border-radius: 0 !important;
  box-shadow: var(--smm-shadow) !important;
}
.ui-dialog-titlebar {
  background-color: var(--smm-hair) !important;
  border-bottom: 1px solid var(--smm-rule) !important;
  color: var(--smm-ink) !important;
  font-family: var(--smm-sans) !important;
}
.ui-dialog .ui-dialog-buttonpane {
  background: var(--smm-hair) !important;
  border-top: 1px solid var(--smm-rule) !important;
}
.ui-widget-content a { color: var(--smm-accent) !important; }
/* The overlay behind a dialog is a flat #aaa tile at half opacity, which
   washes a dark page out to grey instead of dimming it. One near-black
   scrim reads correctly on cream and on near-black alike. */
.ui-widget-overlay {
  background: rgba(20, 19, 18, 0.6) !important;
  opacity: 1 !important;
}
.ui-widget-content .ui-state-default,
.ui-widget-content .ui-state-hover,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-default {
  background: transparent !important;
  color: var(--smm-ink) !important;
  border-color: var(--smm-rule) !important;
}
/* Buttons in a dialog are <a class="i-button"> as often as <button>, and the
   button rule above only reaches the latter outside .confBodyBox. Disabled
   ones are held back deliberately: Indico marks their grey !important, so
   an ink block here would have recoloured the text and left the pale
   background — a greyed Submit reading as cream-on-grey. They get their own
   muted panel below instead. */
/* A dialog packs several buttons into one row — the author picker is four
   wide — and the row spilled out past its field. The width was mostly the
   page's tracking and generous padding rather than the type size, so those
   come in and the size stays where the rest of the identity has it; a
   shade smaller, and nothing wraps. Measured at the field width these
   dialogs get on a phone: 504px of buttons plus their gaps in a 510px
   field, which is what spilled; now 388. */
.ui-dialog .i-button,
.ui-dialog .ui.button,
.ui-dialog input[type="submit"],
div.exclusivePopup .i-button,
div.exclusivePopup .ui.button {
  padding: 0.55em 0.9em !important;
  font-size: 0.78rem !important;
  letter-spacing: 0.05em !important;
  white-space: nowrap !important;
}
.ui-dialog .i-button:not(.disabled):not(:disabled),
div.exclusivePopup .i-button:not(.disabled):not(:disabled) {
  background: var(--smm-ink) !important;
  background-image: none !important;
  color: var(--smm-paper) !important;
  border: 0 !important;
  border-radius: 0 !important;
  text-shadow: none !important;
}
.ui-dialog .i-button:not(.disabled):not(:disabled):hover,
div.exclusivePopup .i-button:not(.disabled):not(:disabled):hover {
  background: var(--smm-accent) !important;
}
.ui-dialog .i-button.disabled:not(.borderless),
.ui-dialog .i-button:disabled:not(.borderless),
div.exclusivePopup .i-button.disabled:not(.borderless),
div.exclusivePopup .i-button:disabled:not(.borderless) {
  background: var(--smm-hair) !important;
  border: 1px solid var(--smm-rule) !important;
  color: var(--smm-muted) !important;
}
/* Indico's segmented radios — the protection-mode switch, for one — light
   the chosen segment in its own blue. */
.i-selection input[type="radio"]:checked + label,
.i-selection input[type="checkbox"]:checked + label {
  background: var(--smm-accent) !important;
  background-image: none !important;
  border-color: var(--smm-accent) !important;
  color: var(--smm-paper) !important;
}
/* Field help sits in Indico's greys, which lose too much on a dark panel. */
.i-form .form-group .form-field .static-text .form-field-description,
.i-form fieldset p.description,
.form-field-description { color: var(--smm-muted-strong) !important; }

/* Decks and subtitles — the line under a section title, the registration
   form's own name under the menu heading, the note under a field. Indico
   sets these in a grey chosen against white, which survives on cream and
   all but disappears on the negative. They are meant to be read, so they
   take the stronger of the two quiet greys. Named widely rather than
   precisely: the class differs by page and by Indico version, and the only
   thing being changed is a colour. */
.confBodyBox .subtitle,
.confBodyBox .page-subtitle,
.confBodyBox .regform-title .subtitle,
.confBodyBox .regform-subtitle,
.confBodyBox .regform-description,
.confBodyBox .i-box-description,
.confBodyBox .i-box-header .i-box-description,
.confBodyBox .header-description,
.confBodyBox .page-title .subtitle,
.confBodyBox .titled-rule + .description,
.confBodyBox .field-description,
.confBodyBox .form-subtitle,
.confBodyBox .regform-section .description,
.confBodyBox .info-message-box .message-text,
.confBodyBox small {
  color: var(--smm-muted-strong) !important;
  /* Indico leaves several of these on the browser's default serif — the
     section description under a title is one — while the rest of the page
     is in the skin's grotesque. */
  font-family: var(--smm-sans) !important;
}
/* except where the deck is the accent's job already */
.confBodyBox .subtitle a,
.confBodyBox small a { color: var(--smm-accent) !important; }

/* ---- the description editor (Indico's own markdown editor) ---------------
   Three separate white surfaces stacked: the button row, the source box,
   and the live preview under it. The preview keeps its serif — it is
   showing what the text will look like once published — but it moves onto
   the panel with the rest. */
.wmd-panel,
.wmd-input,
.md-preview-wrapper.edit,
.md-preview-wrapper.display {
  background-color: var(--smm-pop) !important;
  color: var(--smm-ink) !important;
  border-color: var(--smm-rule) !important;
}
.md-preview-wrapper.edit.empty,
.md-preview-wrapper.display.empty {
  background-color: var(--smm-pop) !important;
  color: var(--smm-muted) !important;
}
.wmd-button-row {
  background-color: var(--smm-hair) !important;
  border-bottom: 1px solid var(--smm-rule) !important;
}
.wmd-button,
.wmd-button > span { color: var(--smm-ink) !important; }
.wmd-button:hover,
.wmd-button:hover > span { color: var(--smm-accent) !important; }
/* The icon font is a hairline at its default size, which on a phone reads
   as grey mush however bright the colour is. A size up. */
.wmd-button > span { font-size: 1.25em; }
.wmd-spacer { background-color: var(--smm-rule) !important; }
.wmd-input.has-length-info { border-bottom-color: var(--smm-pop) !important; }
.md-preview-wrapper pre,
.md-preview-wrapper blockquote {
  background-color: var(--smm-hair) !important;
  color: var(--smm-muted) !important;
  border-color: var(--smm-rule) !important;
}
.wmd-prompt-dialog {
  background-color: var(--smm-pop) !important;
  border-color: var(--smm-rule) !important;
  color: var(--smm-ink) !important;
}

/* ---- the page editor (TinyMCE) -------------------------------------------
   Chrome only. The document itself is inside an iframe with its own
   stylesheet, which an uploaded event stylesheet cannot reach — and that is
   the right reading anyway: it shows the page as it will be published. */
.tox.tox-tinymce {
  border-color: var(--smm-rule) !important;
  border-radius: 0 !important;
}
.tox:not(.tox-tinymce-inline) .tox-editor-header,
.tox .tox-menubar,
.tox .tox-toolbar,
.tox .tox-toolbar__primary,
.tox .tox-toolbar__overflow,
.tox .tox-toolbar-overlord,
.tox .tox-statusbar,
.tox .tox-menu {
  background-color: var(--smm-pop) !important;
  background-image: none !important;
}
.tox .tox-tbtn,
.tox .tox-tbtn--select,
.tox .tox-tbtn__select-label,
.tox .tox-collection__item,
.tox .tox-statusbar,
.tox .tox-statusbar a { color: var(--smm-ink) !important; }
/* The icons are SVG with a hard-coded near-black fill rather than
   currentColor, so recolouring the button did nothing to them: on this
   toolbar they were black on black. The format picker is a pale pill of
   its own, and every hover, focus and active state is a pale blue wash. */
.tox .tox-tbtn svg,
.tox .tox-split-button svg,
.tox .tox-collection__item-icon svg { fill: var(--smm-ink) !important; }
.tox .tox-tbtn--bespoke { background: var(--smm-hair) !important; }
.tox .tox-tbtn:hover,
.tox .tox-tbtn:focus,
.tox .tox-tbtn--enabled,
.tox .tox-tbtn--enabled:hover,
.tox .tox-collection--list .tox-collection__item--active,
.tox .tox-collection__item--active,
.tox .tox-collection__item--enabled {
  background: var(--smm-accent-wash) !important;
  color: var(--smm-ink) !important;
}
.tox .tox-tbtn:hover svg,
.tox .tox-tbtn--enabled svg { fill: var(--smm-accent) !important; }
.tox .tox-statusbar { border-top-color: var(--smm-rule) !important; }

/* ---- pop-up balloons (qtip) ----------------------------------------------
   Indico's plain tooltip is already dark and reads on both skins; these are
   its white-panel variants — the timetable balloon, the bubble menus, the
   informational pop-ups. */
.qtip-default.qtip-popup,
.qtip-default.qbubble,
.qtip-default.informational,
.qtip-default.add-field-qtip,
.material_tip .qtip-content {
  background-color: var(--smm-pop) !important;
  color: var(--smm-ink) !important;
  border-color: var(--smm-rule) !important;
}
.qtip-default.qtip-popup a,
.qtip-default.qbubble a,
.qtip-default.informational a,
.qtip-default.add-field-qtip a { color: var(--smm-accent) !important; }
.qtip-default.qbubble .action-row:hover {
  background-color: var(--smm-accent-wash) !important;
  color: var(--smm-ink) !important;
}
.balloon-qtip .title-container .title { color: var(--smm-accent) !important; }
.balloon-qtip .title-container .balloon-subtitle,
.balloon-qtip .title-container .balloon-code,
.balloon-qtip .description,
.balloon-qtip .address { color: var(--smm-muted) !important; }
.balloon-qtip span.hr { border-bottom-color: var(--smm-rule) !important; }

/* Disabled fields are painted with a diagonal stripe in two light greys.
   The React one is a CSS module, so match its readable prefix. */
.i-location-field .wrapper input.i-location-input-field.disabled,
.i-location-field .wrapper > textarea.disabled,
.i-color-field .clickable-wrapper .color-preview.no-value,
[class*="syncedInputs"] input[readonly],
[class*="syncedInputs"] textarea[readonly],
[class*="syncedInputs"] div.dropdown.disabled {
  background: var(--smm-stripe) !important;
  color: var(--smm-muted) !important;
}

/* Indico's action boxes — "the call for abstracts is open" and its siblings.
   Four variants (highlight, warning, danger, disabled), each a pale panel with
   a saturated border and saturated text: a light-page idiom that reads as a
   bright card punched into this skin. Keep the semantics, take the surfaces —
   the meaning moves to a coloured left edge, as it does on the messages above.
   The two literal hues are mid-tone on purpose, so they carry on cream and on
   near-black without needing a second value in the dark sheet. */
.confBodyBox .action-box,
.confBodyBox .action-box.highlight,
.confBodyBox .action-box.warning,
.confBodyBox .action-box.danger,
.confBodyBox .action-box.disabled {
  background: rgba(245, 240, 225, 0.55) !important;
  color: var(--smm-ink) !important;
  border: 1px solid var(--smm-rule) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.confBodyBox .action-box.highlight { border-left: 3px solid var(--smm-accent) !important; }
.confBodyBox .action-box.warning  { border-left: 3px solid #d9992f !important; }
.confBodyBox .action-box.danger   { border-left: 3px solid #d94f2f !important; }
.confBodyBox .action-box.disabled { border-left: 3px solid var(--smm-muted) !important; }
/* The heading of these boxes is .section > .text > .label, two levels down, so
   a child selector never reaches it — it kept Indico's blue, amber or red.
   Everything in the section goes muted, the heading comes back to ink, and the
   button is re-asserted last because it ties on specificity. */
.confBodyBox .action-box .section,
.confBodyBox .action-box .section * { color: var(--smm-muted) !important; }
.confBodyBox .action-box .section .label { color: var(--smm-ink) !important; font-weight: 700; }
.confBodyBox .action-box > .section:not(:first-child) {
  border-top: 1px solid var(--smm-rule) !important;
}
/* the button in there is already an ink block; keep its label legible */
.confBodyBox .action-box .i-button,
.confBodyBox .action-box .i-button *,
.confBodyBox .action-box button,
.confBodyBox .action-box button * { color: var(--smm-paper) !important; }

/* Indico's other pale-panel-with-saturated-border idiom, one rung older than
   the action boxes above and used in a few more places (attachment notices,
   plugin content) — same fix, same reasoning: keep the left-edge colour as
   the only signal, take the panel itself into the palette. */
.info-message-box, .message-message-box, .highlight-message-box,
.success-message-box, .warning-message-box, .error-message-box,
.danger-message-box {
  background: rgba(245, 240, 225, 0.55) !important;
  color: var(--smm-ink) !important;
  border: 1px solid var(--smm-rule) !important;
  border-radius: 0 !important;
}
.highlight-message-box { border-left: 3px solid var(--smm-accent) !important; }
.success-message-box   { border-left: 3px solid #3f9142 !important; }
.warning-message-box   { border-left: 3px solid #d9992f !important; }
.error-message-box,
.danger-message-box    { border-left: 3px solid #d94f2f !important; }
.info-message-box .message-box-footer, .message-message-box .message-box-footer,
.highlight-message-box .message-box-footer, .success-message-box .message-box-footer,
.warning-message-box .message-box-footer, .error-message-box .message-box-footer,
.danger-message-box .message-box-footer {
  background: var(--smm-hair) !important;
}

/* ---- tables, timetable, lists ------------------------------------------- */
.i-table, table.infoTable, .timetable-item, .contribution-list .list-item {
  background: none !important;
  border-color: var(--smm-rule) !important;
}
/* The contribution list, track review list and the timetable's hover
   balloon clip a long description behind a gradient fading to a literal
   white — correct on a light page, a bright rectangle on this one. Fades
   toward the same near-solid tone already used behind the dropdown and its
   error list: it need not be perfectly opaque to read as "the text ends
   here". Same specificity as Indico's own rule (no !important there), so
   this file loading last would be enough on its own; !important is kept
   only for parity with the rest of the sheet. */
.contribution-list .contribution-row .description::before,
.track-review-list .contribution-row .description::before,
.track-review-list .track-review-row .description::before {
  background: linear-gradient(transparent 0.4em, var(--smm-glass-solid) 4.2em) !important;
}
/* The balloon clips at 10em rather than 5, and sits on the pop-up panel
   rather than the page, so it fades further down and to that panel's tone. */
.balloon-qtip .description::before {
  background: linear-gradient(transparent 0.4em, var(--smm-pop) 8.2em) !important;
}
.i-table thead th, .confBodyBox table thead th {
  background: none !important;
  color: var(--smm-muted) !important;
  border-bottom: 1px solid var(--smm-rule) !important;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.i-table tbody tr, .confBodyBox table tbody tr { border-top: 1px solid var(--smm-hair); }

/* Semantic UI renders each registration section as a pale-blue "info message",
   and everything inside inherits that blue. Recolour the box and the blue goes
   with it, without having to name each descendant. */
.confBodyBox .ui.message,
.confBodyBox .ui.info.message {
  background: rgba(245, 240, 225, 0.55) !important;
  color: var(--smm-ink) !important;
  border: 1px solid var(--smm-rule) !important;
  border-left: 3px solid var(--smm-accent) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
/* The same component turns up inside the management dialogs, which are not
   in .confBodyBox — the "this object is not publicly accessible" notice on
   the page editor, for one. Unscoped, so those get it too; the scoped rule
   above still wins on the page itself. */
.ui.message,
.ui.info.message,
.ui.warning.message,
.ui.error.message,
.ui.negative.message,
.ui.success.message,
.ui.positive.message {
  background: rgba(245, 240, 225, 0.55) !important;
  color: var(--smm-ink) !important;
  border: 1px solid var(--smm-rule) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.ui.message { border-left: 3px solid var(--smm-accent) !important; }
.ui.warning.message { border-left: 3px solid #d9992f !important; }
.ui.error.message,
.ui.negative.message { border-left: 3px solid #d94f2f !important; }
.ui.success.message,
.ui.positive.message { border-left: 3px solid #3f9142 !important; }
.ui.message .header,
.ui.message p,
.ui.message li { color: var(--smm-ink) !important; }

.confBodyBox .ui.message > .header {
  color: var(--smm-ink) !important;
  font-family: var(--smm-sans) !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  margin-bottom: 0.5rem !important;
}

/* ---- timetable ---------------------------------------------------------- */
/* The grid is drawn on white with dark labels, so on this skin it arrives as a
   white sheet in the middle of the page. Canvas, gutter, day tabs and toolbar
   come into the palette.

   The session blocks deliberately do not. Their colours are assigned per
   session by the organisers and carry meaning — here they separate the
   accelerator, experiment and theory parallels — so recolouring them would
   throw information away. They stay bright objects on a dark grid, which is
   also the right reading order: the schedule is the content, the grid is
   furniture. The exclusions below are what keeps the wildcard off them. */
.confBodyBox [class*="timetable"]:not([class*="Block"]):not([class*="block"]),
.confBodyBox [id*="timetable"],
.confBodyBox .ui-tabs,
.confBodyBox .ui-tabs-nav,
.confBodyBox .ui-tabs li,
.confBodyBox .ui-tabs li.ui-state-default,
.confBodyBox .ui-tabs li.ui-state-default a {
  background: transparent !important;
  background-color: transparent !important;
  color: var(--smm-ink) !important;
  border-color: var(--smm-rule) !important;
  box-shadow: none !important;
}
.confBodyBox .ui-tabs-nav { border-bottom: 1px solid var(--smm-rule) !important; }
.confBodyBox .ui-tabs li.ui-tabs-selected a,
.confBodyBox .ui-tabs li.ui-state-active a,
.confBodyBox .ui-tabs li.ui-tabs-active a {
  color: var(--smm-accent) !important;
  font-weight: 700;
}
/* Blocks keep their own background and their own dark text — the wildcard
   above would otherwise hand them bone type on a pastel ground. */
.confBodyBox .timetableBlock,
.confBodyBox .timetableBlock * {
  color: #202020 !important;
}
.confBodyBox .timetableBlock {
  border: 1px solid rgba(0, 0, 0, 0.3) !important;
  border-radius: 0 !important;
}
/* the Print / PDF / Full screen row sits above the grid */
.confBodyBox .toolbar .i-button,
.confBodyBox .toolbar .group .i-button {
  background: transparent !important;
  color: var(--smm-ink) !important;
  border: 1px solid var(--smm-rule) !important;
  border-radius: 0 !important;
  letter-spacing: 0.08em;
}
.confBodyBox .toolbar .i-button:hover,
.confBodyBox .toolbar .group .i-button:hover {
  background: var(--smm-accent) !important;
  color: var(--smm-paper) !important;
  border-color: var(--smm-accent) !important;
}

/* ---- messages ----------------------------------------------------------- */
.flashed-messages .message-box, .i-message {
  background: rgba(245, 240, 225, 0.9) !important;
  border: 1px solid var(--smm-rule) !important;
  border-left: 3px solid var(--smm-accent) !important;
  border-radius: 0 !important;
  color: var(--smm-ink) !important;
}

/* ---- footer ------------------------------------------------------------- */
.footer, .footer > .flexrow {
  background: var(--smm-ink) !important;
  color: rgba(245, 240, 225, 0.75);
  border: 0;
}
.footer a, .footer-links a { color: rgba(245, 240, 225, 0.75) !important; }
.footer a:hover { color: var(--smm-accent) !important; }
.footer, .footer-links {
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ---- focus, selection --------------------------------------------------- */
:focus-visible { outline: 2px solid var(--smm-accent); outline-offset: 3px; }
::selection { background: var(--smm-accent); color: var(--smm-paper); }

/* ---- narrow screens ----------------------------------------------------- */
@media (max-width: 900px) {
  .confheader, #confSectionsBox { margin-left: 1rem; margin-right: 1rem; }
  .conf_leftMenu {
    float: none !important;
    width: auto !important;
    margin: 0 0 1rem !important;
  }
  .confBodyBox { margin-left: 0 !important; padding: 1.1rem !important; }
  .infoline { display: block; }
  .infoline h3, .infoline > .icon { margin-bottom: 0.25rem; }
}

/* ---- print -------------------------------------------------------------- */
@media print {
  html { background: #fff !important; }
  body::before { display: none !important; }
  .confheader, .confBodyBox, .conf_leftMenu {
    background: #fff !important;
    backdrop-filter: none;
    box-shadow: none !important;
  }
  .header, .page-header, .footer { background: #fff !important; color: #000 !important; }
}