/* EPFL theme for Indico -- prose lists.

   The most recognisable Elements detail: list markers are small RED
   RECTANGLES, not dots, and ordered lists get red bold counters
   (verified in elements.min.css):
     ul>li          { list-style-type:none; padding-left:1rem; position:relative }
     ul>li:before   { content:""; position:absolute; top:.7rem;
                      right:calc(100% - .5rem); width:6px; height:5px;
                      background:red }
     ul ul>li:before    { background:0 0; border:1px solid red }  (outlined)
     ul ul ul>li:before { background:red; border:none }
     ol>li:before   { content:counter(item); font-weight:700; color:red }

   Elements can apply this to every `ul` on the page because it styles
   content sites. Indico is an application: it builds #global-menu, the
   side menu, dropdowns, toolbars, the timetable and every Semantic-UI
   widget out of ul/li too (37 <li> on the logged-out front page alone).
   Applying the rule globally would scatter red squares through all of
   them, so it is scoped to the containers that actually hold authored
   prose, and opted out again for any widget nested inside those.

   Offsets are in em, not Elements' rem: Indico's base is 13px rather
   than EPFL's 16px, so em keeps the marker aligned to the text it
   belongs to at any size. */

.markdown-text ul,
.md-preview-wrapper ul,
.wmd-preview ul,
.i-box-description ul,
.page-description ul,
.category-description ul,
.summary-description ul,
.conference-page .description ul {
  padding-left: 1em;
  margin-left: 0;
  list-style: none;
}

.markdown-text ul > li,
.md-preview-wrapper ul > li,
.wmd-preview ul > li,
.i-box-description ul > li,
.page-description ul > li,
.category-description ul > li,
.summary-description ul > li,
.conference-page .description ul > li {
  list-style-type: none;
  padding-left: 1em;
  position: relative;
}

.markdown-text ul > li::before,
.md-preview-wrapper ul > li::before,
.wmd-preview ul > li::before,
.i-box-description ul > li::before,
.page-description ul > li::before,
.category-description ul > li::before,
.summary-description ul > li::before,
.conference-page .description ul > li::before {
  content: '';
  position: absolute;
  top: 0.5em;
  right: calc(100% - 0.5em);
  width: 6px;
  height: 5px;
  background: var(--epfl-red);
}

/* Second level: outlined square. Third: solid again. */
.markdown-text ul ul > li::before,
.md-preview-wrapper ul ul > li::before,
.wmd-preview ul ul > li::before,
.page-description ul ul > li::before,
.category-description ul ul > li::before,
.conference-page .description ul ul > li::before {
  background: transparent;
  border: 1px solid var(--epfl-red);
}

.markdown-text ul ul ul > li::before,
.md-preview-wrapper ul ul ul > li::before,
.wmd-preview ul ul ul > li::before,
.page-description ul ul ul > li::before,
.category-description ul ul ul > li::before,
.conference-page .description ul ul ul > li::before {
  background: var(--epfl-red);
  border: none;
}

/* Ordered lists: red bold counters. */
.markdown-text ol,
.md-preview-wrapper ol,
.wmd-preview ol,
.page-description ol,
.category-description ol,
.conference-page .description ol {
  counter-reset: epfl-item;
  padding-left: 1em;
  margin-left: 0;
  list-style: none;
}

.markdown-text ol > li,
.md-preview-wrapper ol > li,
.wmd-preview ol > li,
.page-description ol > li,
.category-description ol > li,
.conference-page .description ol > li {
  list-style-type: none;
  padding-left: 1em;
  position: relative;
}

.markdown-text ol > li::before,
.md-preview-wrapper ol > li::before,
.wmd-preview ol > li::before,
.page-description ol > li::before,
.category-description ol > li::before,
.conference-page .description ol > li::before {
  content: counter(epfl-item);
  counter-increment: epfl-item;
  position: absolute;
  top: 0.15em;
  right: calc(100% - 0.5em);
  font-size: 0.8em;
  font-weight: 700;
  color: var(--epfl-red);
}

/* Opt-out: application widgets that happen to live inside a prose
   container must keep their own markers. */
.markdown-text :is(ul, ol).list-inline > li::before,
.markdown-text :is(nav, .toolbar, .ui.menu, .i-tag-list) li::before,
.md-preview-wrapper :is(nav, .toolbar, .ui.menu, .i-tag-list) li::before,
.page-description :is(nav, .toolbar, .ui.menu, .i-tag-list) li::before,
.category-description :is(nav, .toolbar, .ui.menu, .i-tag-list) li::before,
.conference-page .description :is(nav, .toolbar, .ui.menu, .i-tag-list) li::before {
  content: none;
}