@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);
  /* 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;
}

/* ---- 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. */
html {
  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;
  background-attachment: fixed, fixed;
}
body { background: transparent; color: var(--smm-ink); }
body,
.conference-page, .conferenceDetails, .i-box, .ui.form,
input, select, textarea, button, .i-button {
  font-family: var(--smm-sans);
}
/* iOS ignores background-attachment: fixed and stretches a cover image over
   the whole scroll height instead. Let it scroll at a sane size there. */
@supports (-webkit-touch-callout: none) {
  html { background-attachment: scroll, scroll; background-size: cover, 200vw 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) {
  html {
    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);
}
.confBodyBox {
  padding: clamp(1.25rem, 3vw, 2.25rem) !important;
  min-height: 16rem;
}
.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;
}
.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;
}
.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;
}
.i-form input[type="text"], .i-form input[type="email"], .i-form input[type="number"],
.i-form textarea, .i-form select,
.ui.form input, .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;
}
.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);
}

/* 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 ind-select .caption,
.confBodyBox ind-select ul,
.confBodyBox [class*="FormErrorList"] {
  background: var(--smm-glass-solid) !important;
  color: var(--smm-ink) !important;
  border-radius: 0 !important;
}
.confBodyBox ind-select ul li:hover,
.confBodyBox ind-select ul li[aria-selected="true"] {
  background: var(--smm-accent-wash) !important;
  color: var(--smm-ink) !important;
}
.confBodyBox [class*="FormErrorList"] {
  border: 1px solid var(--smm-accent) !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-paper) !important;
  color: var(--smm-ink) !important;
  border: 1px solid var(--smm-rule) !important;
  border-radius: 0 !important;
  box-shadow: none !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-paper) !important;
  border: 1px solid var(--smm-rule) !important;
}
.ui.checkbox:not(.toggle):not(.slider) input:checked ~ label:before {
  background: var(--smm-paper) !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-paper) !important;
  color: var(--smm-ink) !important;
  border-radius: 0 !important;
  box-shadow: var(--smm-shadow) !important;
}
.ui.modal > .header {
  background: var(--smm-paper) !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-paper) !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-paper) !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-paper) !important;
  color: var(--smm-ink) !important;
}
.rc-md-editor .drop-wrap {
  background-color: var(--smm-paper) !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-paper) !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) !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-paper) !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-paper) !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-paper) !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-paper) !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-paper) !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-paper) !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-paper) 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; }
  .confheader, .confBodyBox, .conf_leftMenu {
    background: #fff !important;
    backdrop-filter: none;
    box-shadow: none !important;
  }
  .header, .page-header, .footer { background: #fff !important; color: #000 !important; }
}