/* Navigation menu: inline module navi list */
#content .sl-navi-menu {
  display: block;
}

.sl-navi-menu {
  list-style: none;
  padding: 0 0 var(--sl-space-7) 0;
  border-bottom: 1px solid var(--sl-border-subtle);
}

.sl-navi-menu li {
  display: inline;
}

.sl-navi-menu li a {
  margin-right: var(--sl-space-7);
}

.sl-navi-lower {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sl-space-3);
  margin: var(--sl-space-7) 0;
}

.sl-highlight {
  color: var(--sl-danger);
  background-color: var(--sl-warning-subtle);
}

.sl-geo-flag img {
  width: var(--sl-size-icon-sm);
  vertical-align: center;
  border: 1px solid var(--sl-border-strong);
  border-radius: var(--sl-radius-1);
}

.sl-calculator-field {
  width: var(--sl-calc-width);
}



.sl-fieldset-center {
  text-align: center;
}

.sl-fieldset-legend-info {
  color: var(--sl-info);
}

.sl-fieldset-form-legend-success,
.sl-text-success {
  color: var(--sl-success);
}

.sl-fieldset-form-legend-danger,
.sl-text-danger {
  color: var(--sl-danger);
}

.sl-text-bold {
  font-weight: var(--sl-weight-bold);
}

.sl-letter {
  display: inline-block;
  vertical-align: bottom;
  font-size: var(--sl-font-body);
  width: var(--sl-letter-width);
  height: var(--sl-letter-height);
  padding: 1px;
  line-height: var(--sl-letter-height);
  text-align: center;
  margin: 0 0 var(--sl-space-2) var(--sl-space-1);
  position: relative;
  top: 0;
  border: 1px solid var(--sl-text);
  border-radius: var(--sl-radius-1);
}

a .sl-letter {
  cursor: pointer;
  color: var(--sl-primary-strong);
  border-color: var(--sl-primary-strong);
}

a .sl-letter:hover {
  background: var(--sl-primary-strong);
  color: var(--sl-on-solid);
}

/* Article: post container and title */
.sl-post {
  margin-bottom: var(--sl-space-5);
}

.sl-fullview {
  padding-bottom: var(--sl-space-5);
}

.sl-title {
  font-size: var(--sl-font-h2);
  color: var(--sl-text);
  margin: 0 0 var(--sl-space-4) 0;
}

h1.sl-title {
  font-size: var(--sl-font-h1);
  color: var(--sl-text-strong);
}

.sl-title a {
  color: var(--sl-text);
  transition: color var(--sl-time-base) var(--sl-ease-out);
}

.sl-title a:hover {
  color: var(--sl-primary);
}

/* Utilities: reusable helpers */
.sl-pull-right {
  float: right;
}

/* Article meta: date, category and stats row */
.sl-meta {
  font-size: var(--sl-font-small);
  color: var(--sl-text-muted);
  border-bottom: 1px solid var(--sl-border-subtle);
  padding-bottom: var(--sl-space-7);
  margin-bottom: var(--sl-space-7);
}

.sl-meta::after,
.sl-entry-content::after,
.sl-meta-foot::after,
.sl-card-aside::after,
.sl-progress-info::after {
  content: "";
  display: block;
  clear: both;
}

/* List reset: shared bare lists across menus and blocks */
.sl-meta ul,
.sl-related-list,
.sl-block-menu ul,
.sl-list-item,
.sl-list-item ul,
.sl-block-contact,
#topbar ul,
#topmenu ul,
.sl-forum-list-info ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.sl-meta > ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.sl-meta > ul > li {
  display: inline-flex;
  align-items: center;
  min-height: var(--sl-meta-height);
  margin-right: var(--sl-space-7);
}

.sl-meta > ul.sl-pull-right > li {
  margin-right: 0;
  margin-left: var(--sl-space-7);
}

.sl-meta-actions {
  display: inline-flex;
  align-items: center;
  gap: var(--sl-space-3);
}

/* Article body: entry content spacing */
.sl-entry-content {
  margin-bottom: var(--sl-space-7);
}

/* The foot of a material is one row: its downloads on the left and the rating on the right share one middle line */
.sl-fullview > .sl-meta-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sl-space-3) var(--sl-space-5);
}

.sl-fullview > .sl-meta-foot::after {
  content: none;
}

.sl-fullview > .sl-meta-foot > .sl-pull-right {
  order: 1;
  margin: 0 0 0 auto;
}

/* Article footer: action row under the entry */
.sl-meta-foot .sl-rate-box,
.sl-rate-box .sl-rate {
  margin-top: var(--sl-space-1);
}

.sl-meta-foot .sl-pull-right {
  margin-left: var(--sl-space-7);
}

/* Rating box: score badge and thumbs layout */
.sl-rate-box {
  display: inline-block;
}

.sl-rate {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}

.sl-min-rate .sl-rate {
  margin: 0 auto;
  display: inline-block;
}

.sl-rate-num {
  --sl-rate-fill: var(--sl-bg);
  position: relative;
  display: inline-block;
  margin: 0 0 0 var(--sl-space-4);
  padding: var(--sl-space-1) var(--sl-space-4);
  line-height: 20px;
  border: 1px solid var(--sl-border);
  border-radius: var(--sl-radius-3);
  background: var(--sl-rate-fill);
  color: var(--sl-text-muted);
  font-size: var(--sl-font-body);
}

/* Pointer corner: one shared method/size for every rate badge (left corner always; right enabled per context) */
.sl-rate-num::before,
.sl-rate-num::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 0;
  height: 0;
  margin-top: calc(var(--sl-space-3) * -1);
  border: solid transparent;
  pointer-events: none;
}

.sl-rate-num::before {
  right: calc(100% - 2px);
  border-width: var(--sl-arrow-width) var(--sl-arrow-width) var(--sl-arrow-width) 0;
  border-right-color: var(--sl-rate-fill);
}

.sl-rate-num::after {
  display: none;
  left: calc(100% - 2px);
  border-width: var(--sl-arrow-width) 0 var(--sl-arrow-width) var(--sl-arrow-width);
  border-left-color: var(--sl-rate-fill);
}

.sl-rate-is.sl-rate-num {
  --sl-rate-fill: var(--sl-success);
  color: var(--sl-on-solid);
  border-color: var(--sl-success);
}

.sl-rate-like {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--sl-space-4);
}

.sl-rate-plus.sl-out:hover {
  background-color: var(--sl-success);
}

.sl-rate-minus.sl-out:hover {
  background-color: var(--sl-danger);
}

/* Rating-like pill: always filled, its tone the lean of the average (green above 3, red below, neutral at 3 or unscored), corners on both sides pointing at the thumbs */
/* :where() keeps the neutral fill below .sl-rate-is and .sl-rate-down, so the lean overrides it without a scoped rule of its own */
:where(.sl-rate-like) .sl-rate-num {
  --sl-rate-fill: var(--sl-border);
  flex: none;
  margin: 0;
  border-color: var(--sl-rate-fill);
  color: var(--sl-text-strong);
}

.sl-rate-down.sl-rate-num {
  --sl-rate-fill: var(--sl-danger);
  color: var(--sl-on-solid);
}

.sl-rate-like .sl-rate-num::after {
  display: block;
}

/* Tables: list layout */
.sl-table,
.sl-table-list,
.sl-table-list-sort {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
}

.sl-table--sort td:first-child,
.sl-table-list-sort td:first-child {
  text-align: left;
}

.sl-table--sort td:last-child,
.sl-table-list-sort td:last-child {
  text-align: right;
}

.sl-table-head th {
  padding: var(--sl-space-5) var(--sl-space-6) var(--sl-space-4) var(--sl-space-6);
  background-color: var(--sl-bg-subtle);
  border-bottom: 1px solid var(--sl-border);
  font-size: var(--sl-font-small);
  font-weight: var(--sl-weight-bold);
  text-align: left;
  white-space: nowrap;
}

.sl-table-head th a {
  color: var(--sl-text-strong);
}

/* A short line parts two column titles, as in the panel, as tall as the text between the insets of the title. Aurora has
   no sticky head, so the line is a box of its own and the background of the title stays the one its text is read on. The title over the forum tile has no text, so the
   title after it takes no line */
.sl-table-head th + th {
  position: relative;
}

.sl-table-head th + th::before {
  content: "";
  position: absolute;
  top: var(--sl-space-5);
  bottom: var(--sl-space-4);
  left: 0;
  width: 1px;
  background-color: var(--sl-text-subtle);
}

.sl-table-head th.sl-fl-col-icon + th::before {
  content: none;
}

.sl-table-head th:first-child {
  border-radius: var(--sl-radius-2) 0 0 0;
}

.sl-table-head th:last-child {
  border-radius: 0 var(--sl-radius-2) 0 0;
}

.sl-table-cell {
  border-bottom: 1px solid var(--sl-border);
  padding: var(--sl-space-2);
}

.sl-table-row:hover {
  background-color: var(--sl-bg-subtle);
}

.sl-table-col-num {
  width: var(--sl-col-num-width);
  text-align: center;
  padding-right: 0;
  padding-left: 0;
  /* Editor gear + number anchor must stay on one line; the column grows */
  white-space: nowrap;
}

/* Status icons: the vocabulary of the panel, four tones - done or on, waiting, off, failed - their words in the tip */
.sl-status-active,
.sl-status-inactive,
.sl-status-wait,
.sl-status-fail {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--sl-size-icon-sm);
  height: var(--sl-size-icon-sm);
  font-size: var(--sl-size-icon-sm);
  line-height: 1;
  vertical-align: middle;
}

.sl-status-active::before,
.sl-status-inactive::before,
.sl-status-wait::before,
.sl-status-fail::before {
  font-family: "bootstrap-icons";
  font-weight: var(--sl-weight-normal);
  line-height: 1;
}

.sl-status-active {
  color: var(--sl-success);
}

.sl-status-active::before {
  content: "\f26a";
}

.sl-status-inactive {
  color: var(--sl-text-muted);
}

.sl-status-inactive::before {
  content: "\f2e5";
}

.sl-status-wait {
  color: var(--sl-warning);
}

.sl-status-wait::before {
  content: "\f291";
}

.sl-status-fail {
  color: var(--sl-danger);
}

.sl-status-fail::before {
  content: "\f622";
}

.sl-col-check {
  width: var(--sl-col-check-width);
  text-align: center;
  padding-right: 0;
  padding-left: 0;
}

.sl-table-head th.sl-col-check,
.sl-profile-hub-head[data-sl-toggle-control] {
  cursor: pointer;
}

.sl-col-check input {
  display: block;
  margin: 0 auto;
}

.sl-bulk-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sl-space-3);
  margin-top: var(--sl-space-3);
  padding: var(--sl-space-3);
  background-color: var(--sl-surface);
  border: 1px solid var(--sl-border);
  border-radius: var(--sl-radius-1);
}

/* Counter of checked rows, first item of the bulk bar; the class name matches the admin theme */
.sl-bulk-count {
  flex: 1 1 auto;
  font-size: var(--sl-font-small);
  color: var(--sl-text-strong);
}

.sl-table-num-link {
  display: inline-block;
  height: var(--sl-table-height);
  line-height: var(--sl-table-height);
  color: var(--sl-text);
}

.sl-table-num-link:hover {
  background-color: var(--sl-border-subtle);
  text-decoration: none;
}

/* Flexible truncating column: width 100% + max-width 0 lets the cell absorb the free table space instead of dictating a min-content width that overflows the shell */
td.sl-cell-ellipsis {
  width: 100%;
  max-width: 0;
}

/* The title of a forum section or topic is the same truncating line, its whole text the tip of its link */
.sl-cell-ellipsis > a:last-child,
.sl-cell-ellipsis > h3 {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Info tip before a truncating block link: float keeps them on one line, the link's own overflow: hidden shrinks it around the float */
.sl-cell-ellipsis > .sl-tip {
  float: left;
}

.sl-cell-ellipsis .sl-table-num-link:hover {
  background: none;
}

/* Sort indicators: three classes on the class alone, worn by Tablesort heads and by hand in the file list */
.sl-sort,
.sl-sort-asc,
.sl-sort-desc {
  position: relative;
  cursor: pointer;
  padding-right: var(--sl-space-8);
}

/* The marks are drawn in the icon font: several system text faces lack these arrows and fall back to a hex box */
.sl-sort::after,
.sl-sort-asc::after,
.sl-sort-desc::after {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  width: var(--sl-sort-width);
  font-family: "bootstrap-icons";
  font-size: var(--sl-font-micro);
  font-style: normal;
  font-weight: var(--sl-weight-normal);
  line-height: 1;
  opacity: var(--sl-fade-muted);
  text-align: center;
}

/* The empty alternative keeps the glyph of the sort out of the name of the head cell; the first line is for a browser that does not know the form */
.sl-sort::after {
  content: "\f127";
  content: "\f127" / "";
}

.sl-sort-asc::after {
  content: "\f235";
  content: "\f235" / "";
}

.sl-sort-desc::after {
  content: "\f229";
  content: "\f229" / "";
}

thead tr th[data-sort-method="none"] {
  cursor: default;
}

thead tr th[data-sort-method="none"]::after {
  content: none;
}

.sl-block .sl-table-list {
  margin-bottom: 0;
}

/* Pagination: one row read from the left, the numbers, their side keys and the info line; the pager is the container its steps measure, so it narrows with its column and not the window */
.sl-pager {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  gap: var(--sl-space-3) var(--sl-space-5);
  padding: var(--sl-space-5) 0;
  border-top: 1px solid var(--sl-border-subtle);
  container-type: inline-size;
}

.sl-pager-main,
.sl-pager-side {
  display: flex;
  align-items: center;
  gap: var(--sl-space-2);
}

.sl-pager-nav {
  display: flex;
  align-items: center;
  gap: var(--sl-space-2);
  min-width: 0;
}

/* The arrows are raised round steps beside the sunken rail; an arrow at the end of the run is flat and faded */
.sl-pager-nav > .sl-but-mini {
  width: var(--sl-size-chip);
  padding: 0;
  background: var(--sl-surface);
  color: var(--sl-text-strong);
  box-shadow: var(--sl-shadow-xs);
}

.sl-pager-nav > span.sl-but-mini.sl-is-muted {
  background: transparent;
  box-shadow: none;
  opacity: var(--sl-fade-disabled);
}

/* The side group is quiet: its buttons wear no plate until the pointer comes */
.sl-pager-side .sl-but-mini {
  width: var(--sl-size-chip);
  padding: 0;
  background: transparent;
  color: var(--sl-text-muted);
}

.sl-pager-sep {
  flex: 0 0 auto;
  width: 1px;
  height: var(--sl-size-icon-md);
  margin: 0 var(--sl-space-2);
  background: var(--sl-border-muted);
}

/* The info line of the pager and the key descriptions of the editor palette are one muted small line */
.sl-pager-info,
.sl-editor-pal-keymap dd {
  margin: 0;
  color: var(--sl-text-muted);
  font-size: var(--sl-font-small);
}

.sl-pager-info b {
  color: var(--sl-text-strong);
  font-weight: var(--sl-weight-semibold);
  font-variant-numeric: tabular-nums;
}

/* The key tip: the system tip on a quiet round trigger, which lights up in the tint of a pressed control while its panel is open */
.sl-pager .sl-pager-keys {
  width: auto;
  height: auto;
  margin: 0;
}

.sl-pager-tip {
  text-align: left;
}

.sl-pager-tip-head {
  margin: 0 0 var(--sl-space-3);
  color: var(--sl-text-strong);
  font-weight: var(--sl-weight-semibold);
}

/* The keys are a list of their own: neither the label and value rows of the site nor the label: value line of the panel */
.sl-pager-tip-keys {
  display: grid;
  gap: var(--sl-space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.sl-pager-tip-keys li {
  display: flex;
  align-items: center;
  gap: var(--sl-space-3);
  margin: 0;
}

/* A key plate keeps its width and line, so a narrow tip wraps the words beside it, and a key with a sign leaves a gap before the sign */
.sl-pager-tip kbd {
  flex: 0 0 auto;
  white-space: nowrap;
  display: inline-flex;
  gap: var(--sl-space-2);
  align-items: center;
  justify-content: center;
  min-width: var(--sl-size-chip);
  height: var(--sl-size-chip);
  padding: 0 var(--sl-space-2);
  box-sizing: border-box;
  border: 1px solid var(--sl-border-muted);
  border-bottom-width: var(--sl-space-1);
  border-radius: var(--sl-radius-1);
  background: var(--sl-surface);
  color: var(--sl-text-strong);
  font: inherit;
  font-size: var(--sl-font-small);
}

.sl-pager-tip kbd .bi {
  font-size: var(--sl-size-icon-xs);
  line-height: 1;
}

.sl-pager-tip-note {
  margin: var(--sl-space-3) 0 0;
  color: var(--sl-text-muted);
  font-size: var(--sl-font-small);
}

/* A touch screen has no arrow keys to explain, nor the keys of the file window */
@media (pointer: coarse) {
  .sl-pager .sl-pager-keys {
    display: none;
  }

  .sl-fm-lib-bar > .sl-pager-keys {
    display: none;
  }
}

/* Under 680px of its own column a long run of numbers takes the room of the range, so the range leaves the info line and the line keeps to the row */
@container (width < 680px) {
  .sl-pager:has(.sl-pager-far) .sl-pager-range {
    display: none;
  }
}

/* Under 520px the far numbers go and free the room of the range again, under 320px the neighbours too, leaving 1 … 8 … 16 */
@container (width < 520px) {
  .sl-pager .sl-pager-far {
    display: none;
  }

  .sl-pager:has(.sl-pager-far) .sl-pager-range {
    display: inline;
  }
}

/* Under 480px the row turns into a centred column: the numbers above, the whole info line under them */
@container (width < 480px) {
  .sl-pager-main {
    flex-basis: 100%;
    justify-content: center;
  }

  .sl-pager-info {
    flex-basis: 100%;
    text-align: center;
  }
}

@container (width < 320px) {
  .sl-pager .sl-pager-near {
    display: none;
  }
}

/* Beside the buttons of a foot the pager keeps its row and its whole info line at any width of its own; the foot decides when they part */
.sl-node-foot .sl-pager-main,
.sl-node-foot .sl-pager-info,
.sl-forum-foot .sl-pager-main,
.sl-forum-foot .sl-pager-info {
  flex-basis: auto;
  justify-content: start;
  text-align: start;
}

.sl-node-foot .sl-pager .sl-pager-range,
.sl-forum-foot .sl-pager .sl-pager-range {
  display: inline;
}

/* Cards: title override */
.sl-card .sl-title {
  font-size: var(--sl-font-h4);
}

/* A card of a Node list carries the title of the full view; the compact view keeps the small one below */
.sl-node-list .sl-card .sl-title {
  font-size: var(--sl-font-h1);
}

/* Breadcrumbs: minimal text trail; the category tone surfaces on hover (underline slides in, separator nudges forward) */
.sl-category-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sl-space-3);
  margin-bottom: var(--sl-space-5);
  color: var(--sl-text-muted);
}

.sl-crumb {
  --sl-cat-tone: var(--sl-info);
  position: relative;
  color: var(--sl-text-strong);
  text-decoration: none;
}

a.sl-crumb::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: var(--sl-crumb-bar-height);
  border-radius: var(--sl-radius-1);
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--sl-time-base) var(--sl-ease-out);
}

a.sl-crumb:hover {
  color: var(--sl-cat-tone);
}

a.sl-crumb:hover::after {
  transform: scaleX(1);
}

.sl-crumb-cur {
  color: var(--sl-text-muted);
  font-weight: var(--sl-weight-normal);
}

.sl-crumb-sep {
  color: var(--sl-text-subtle);
  transition: transform var(--sl-time-base) var(--sl-ease-out);
}

a.sl-crumb:hover + .sl-crumb-sep {
  transform: translateX(3px);
}

/* Section divider: horizontal rule */
.sl-section {
  margin-bottom: var(--sl-space-4);
}

/* Empty state: a list, a search or a section with nothing to show, one face for the site and the panel */
.sl-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sl-space-3);
  padding: var(--sl-space-8) var(--sl-space-7);
  border: 1px dashed var(--sl-border-strong);
  border-radius: var(--sl-radius-3);
  background: var(--sl-surface);
  text-align: center;
}

.sl-empty > .bi {
  font-size: var(--sl-size-icon-lg);
  color: var(--sl-text-subtle);
}

.sl-empty > b {
  font-weight: var(--sl-weight-normal);
  color: var(--sl-text-strong);
}

.sl-empty > p {
  margin: 0;
  max-width: var(--sl-empty-width);
  font-size: var(--sl-font-small);
  line-height: var(--sl-line-normal);
  color: var(--sl-text-muted);
}

/* A block, a column or a tab holds a smaller one */
.sl-empty-small {
  gap: var(--sl-space-2);
  padding: var(--sl-space-6);
}

.sl-empty-small > .bi {
  font-size: var(--sl-size-icon-md);
}

/* An empty queue is good news, said calmly */
.sl-empty-calm > .bi,
.sl-empty-calm > b {
  color: var(--sl-success);
}

/* Nothing picked in a column that already has its frame: the same face without a frame of its own, in the middle of the column */
.sl-empty-pane {
  justify-content: center;
  border: 0;
  background: none;
}

/* A list that never arrived says so and offers the way back to it */
.sl-empty.sl-is-fail > .bi {
  color: var(--sl-danger);
}

/* Alert: unified semantic notice shared with admin and parser callouts */
.sl-alert {
  --sl-alert-c: var(--sl-info);
  /* The wash an alert lies in is its own colour at one ratio, so one declaration serves every tone and follows it into dark */
  --sl-alert-tint: color-mix(in srgb, var(--sl-alert-c) 9%, transparent);
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--sl-space-5);
  margin: 0 0 var(--sl-space-5);
  padding: var(--sl-space-5) var(--sl-space-6);
  background: var(--sl-alert-tint);
  border-left: var(--sl-alert-border) solid var(--sl-alert-c);
  border-radius: var(--sl-radius-1);
  box-shadow: var(--sl-shadow-xs);
  /* A path or an address in the message has no space to break at, so it breaks anywhere rather than leaving the alert */
  overflow-wrap: anywhere;
}

.sl-alert::before {
  flex: 0 0 auto;
  margin-top: 1px;
  display: inline-block;
  font-family: "bootstrap-icons";
  font-style: normal;
  font-size: var(--sl-size-icon-md);
  line-height: 1;
  color: var(--sl-alert-c);
  content: "\f430";
}

/* The one part of a row that takes what the others leave and may shrink below its content */
.sl-alert-body,
.sl-com-right,
.sl-fp-right,
.sl-cab-rss-form .sl-field,
.sl-fm-win .sl-fm-rail-item > span {
  flex: 1 1 auto;
  min-width: 0;
}

.sl-alert-body > div + div {
  margin-top: var(--sl-space-3);
}

.sl-alert-title {
  margin: 0 0 var(--sl-space-1);
  font-weight: var(--sl-weight-bold);
  color: var(--sl-text-strong);
}

.sl-alert-text {
  margin: 0;
  line-height: var(--sl-line-loose);
  text-align: start;
  color: var(--sl-text);
}

.sl-alert-text a {
  color: var(--sl-alert-c);
  text-decoration: underline;
}

/* Several messages stand as lines of the alert, not as a bulleted list: the tone icon already marks the alert, and one message arriving as a list must look like one */
.sl-alert-list {
  margin: 0;
  padding-left: 0;
  list-style: none;
}

.sl-alert-list li {
  margin: var(--sl-space-1) 0;
  line-height: var(--sl-line-normal);
}

.sl-alert-close {
  flex: 0 0 auto;
  align-self: flex-start;
  margin: calc(var(--sl-space-1) * -1) calc(var(--sl-space-2) * -1) 0 0;
  padding: var(--sl-space-2);
  border: 0;
  background: none;
  color: var(--sl-text-subtle);
  font-size: var(--sl-size-icon-xs);
  line-height: 1;
  cursor: pointer;
  border-radius: var(--sl-radius-1);
}

.sl-alert-close:hover {
  color: var(--sl-text);
  background: var(--sl-bg-subtle);
}

.sl-alert-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sl-space-3);
  margin-top: var(--sl-space-5);
}

/* An alert with actions is the container its slot asks about, so it puts the actions under the text by its own width */
.sl-alert:has(> .sl-alert-acts) {
  flex-wrap: wrap;
  row-gap: var(--sl-space-3);
  container-type: inline-size;
}

.sl-alert:has(> .sl-alert-acts) > .sl-alert-body {
  flex: 1 1 12em;
}

.sl-alert-acts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--sl-space-2);
  margin-left: auto;
}

@container (width < 480px) {
  .sl-alert-acts {
    flex-basis: 100%;
  }
}

.sl-alert-acts > .sl-post-button {
  display: contents;
}

/* The action is a chip: its icon in a disc of the alert's tone, concentric in the pill and 4px from the word as on every chip */
.sl-alert-act {
  display: inline-flex;
  align-items: center;
  gap: var(--sl-space-2);
  height: var(--sl-size-chip);
  padding: 0 var(--sl-space-4) 0 calc(var(--sl-space-3) / 2 - 1px);
  border: 1px solid var(--sl-border);
  border-radius: var(--sl-radius-pill);
  background: var(--sl-chip-bg);
  color: var(--sl-text-strong);
  font: inherit;
  font-size: var(--sl-font-small);
  font-weight: var(--sl-weight-medium);
  white-space: nowrap;
  cursor: pointer;
  transition: border-color var(--sl-time-fast) var(--sl-ease-out), box-shadow var(--sl-time-fast) var(--sl-ease-out);
}

.sl-alert-act > .bi {
  display: inline-grid;
  place-items: center;
  width: calc(var(--sl-size-chip) - var(--sl-space-3));
  aspect-ratio: 1;
  border-radius: var(--sl-radius-circle);
  background: var(--sl-alert-c);
  color: var(--sl-on-solid);
  font-size: var(--sl-font-micro);
}

.sl-alert-act:hover {
  border-color: var(--sl-alert-c);
  box-shadow: 0 0 0 var(--sl-alert-act-ring) color-mix(in srgb, var(--sl-alert-c) var(--sl-alert-act-mix), transparent);
}

.sl-alert-act:focus-visible {
  outline: var(--sl-ring-width) solid var(--sl-ring-bg);
  outline-offset: var(--sl-ring-gap);
}

/* A second action steps back: no face of its own and a neutral disc, the face shows only under the hand */
.sl-alert-act-quiet {
  border-color: transparent;
  background: none;
  color: var(--sl-text-muted);
}

.sl-alert-act-quiet > .bi {
  background: color-mix(in srgb, var(--sl-text) var(--sl-alert-act-mix), transparent);
  color: var(--sl-text-strong);
}

.sl-alert-act-quiet:hover {
  border-color: var(--sl-border);
  box-shadow: none;
  color: var(--sl-text-strong);
}

/* A dangerous action takes the danger tone whatever the tone of its alert */
.sl-alert-act-danger > .bi {
  background: var(--sl-danger);
}

.sl-alert-act-danger:hover {
  border-color: var(--sl-danger);
  box-shadow: 0 0 0 var(--sl-alert-act-ring) color-mix(in srgb, var(--sl-danger) var(--sl-alert-act-mix), transparent);
}

/* Tones: remap accent token + ::before glyph and always-on motion */
.sl-alert-info {
  --sl-alert-c: var(--sl-info);
}

.sl-alert-info::before {
  content: "\f430";
  animation: sl-alert-pulse var(--sl-alert-dur) var(--sl-ease-in-out) infinite;
}

.sl-alert-success {
  --sl-alert-c: var(--sl-success);
}

/* The success tick lands from a turn and then glows: its own motion, never the pulse of the info letter */
.sl-alert-success::before {
  content: "\f26a";
  animation:
    sl-alert-land calc(var(--sl-time-slow) * 2) var(--sl-alert-ease) var(--sl-time-fast) both,
    sl-alert-glow var(--sl-alert-dur) var(--sl-ease-in-out) calc(var(--sl-time-slow) * 3) infinite;
}

.sl-alert-warn {
  --sl-alert-c: var(--sl-warning);
}

.sl-alert-warn::before {
  content: "\f33a";
  animation: sl-alert-shake var(--sl-alert-dur) var(--sl-ease-in-out) infinite;
}

.sl-alert-error {
  --sl-alert-c: var(--sl-danger);
}

.sl-alert-error::before {
  content: "\f626";
  animation: sl-alert-beat var(--sl-alert-dur) var(--sl-ease-in-out) infinite;
}

.sl-alert-accent {
  --sl-alert-c: var(--sl-accent);
}

/* The glyph stands on the first line here, so the arc is set on the middle of the glyph, not of the alert */
.sl-alert-accent::before {
  content: "\f483";
  transform-origin: 30% 60%;
  animation: sl-alert-announce var(--sl-alert-dur) var(--sl-ease-in-out) infinite;
}

.sl-alert-accent::after {
  content: "";
  position: absolute;
  left: calc(var(--sl-space-6) + var(--sl-size-icon-md) - var(--sl-space-4));
  top: calc(var(--sl-space-5) + var(--sl-size-icon-md) / 2);
  width: var(--sl-space-5);
  height: var(--sl-space-5);
  border: var(--sl-space-1) solid transparent;
  border-right-color: var(--sl-alert-c);
  border-radius: var(--sl-radius-circle);
  opacity: 0;
  transform: translateY(-50%);
  animation: sl-alert-voice var(--sl-alert-dur) var(--sl-ease-out) infinite;
  pointer-events: none;
}

/* Flash: auto-hide variant with a depleting 5s timer bar */
.sl-alert-flash {
  overflow: hidden;
  max-height: var(--sl-flash-max-height);
  transition:
    opacity var(--sl-time-slow) var(--sl-ease-out),
    transform var(--sl-time-slow) var(--sl-ease-out),
    max-height var(--sl-time-slow) var(--sl-ease-out),
    margin var(--sl-time-slow) var(--sl-ease-out),
    padding var(--sl-time-slow) var(--sl-ease-out);
}

.sl-alert-flash-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--sl-flash-bar-height);
  background: var(--sl-alert-c);
  transform-origin: left center;
  animation: sl-alert-flash-frame var(--sl-flash-dur) linear forwards;
}

.sl-alert-flash.sl-is-hiding {
  opacity: 0;
  transform: translateY(-6px);
  max-height: 0;
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 0;
  padding-bottom: 0;
}

@keyframes sl-alert-pulse {
  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.15);
  }
}

@keyframes sl-alert-land {
  from {
    opacity: 0;
    transform: rotate(-200deg) scale(0.3);
  }
}

@keyframes sl-alert-glow {
  0%,
  100% {
    filter: drop-shadow(0 0 0 transparent);
  }

  50% {
    filter: drop-shadow(0 0 var(--sl-space-3) color-mix(in srgb, var(--sl-alert-c) var(--sl-gauge-mix), transparent));
  }
}

@keyframes sl-alert-announce {
  0%,
  60%,
  100% {
    transform: none;
  }

  10% {
    transform: rotate(-14deg) scale(1.1);
  }

  22% {
    transform: rotate(6deg) scale(1.08);
  }

  34% {
    transform: rotate(-6deg) scale(1.04);
  }

  46% {
    transform: rotate(0) scale(1);
  }
}

/* Two arcs a cycle: each is born small at the bell and fades out a step to the right */
@keyframes sl-alert-voice {
  0%,
  28.01% {
    opacity: 0;
    transform: translate(0, -50%) scale(0.4);
  }

  8%,
  36% {
    opacity: 1;
  }

  28%,
  56%,
  100% {
    opacity: 0;
    transform: translate(var(--sl-space-2), -50%) scale(1.2);
  }
}

@keyframes sl-alert-shake {
  0%,
  100% {
    transform: translateX(0);
  }

  20% {
    transform: translateX(-2px);
  }

  40% {
    transform: translateX(2px);
  }

  60% {
    transform: translateX(-2px);
  }

  80% {
    transform: translateX(2px);
  }
}

@keyframes sl-alert-beat {
  0%,
  100% {
    transform: scale(1);
  }

  14% {
    transform: scale(1.25);
  }

  28% {
    transform: scale(1);
  }

  42% {
    transform: scale(1.25);
  }

  56% {
    transform: scale(1);
  }
}

@keyframes sl-alert-flash-frame {
  from {
    transform: scaleX(1);
  }

  to {
    transform: scaleX(0);
  }
}

.sl-icat,
.sl-card-image {
  float: right;
  display: grid;
  place-items: center;
  width: var(--sl-size-tile);
  height: var(--sl-size-tile);
  margin: 0 0 var(--sl-space-3) var(--sl-space-5);
  border-radius: var(--sl-radius-3);
  color: var(--sl-cat-tone, var(--sl-info));
  background: var(--sl-ico-bg);
  border: 1px solid var(--sl-ico-border);
  transition: box-shadow var(--sl-time-base) var(--sl-ease-out);
}

.sl-icat:hover,
.sl-card-image:hover,
.sl-forum-line:hover .sl-forum-ico {
  box-shadow: var(--sl-shadow-xs);
}

.sl-icat .bi,
.sl-card-image .bi {
  font-size: var(--sl-size-icon-lg);
  line-height: 1;
  color: var(--sl-cat-tone, var(--sl-info));
  transition: transform var(--sl-time-base) var(--sl-ease-out);
}

.sl-icat:hover .bi,
.sl-card-image:hover .bi,
.sl-forum-line:hover .sl-forum-ico > .bi {
  transform: scale(1.1);
}

/* The date of an event stands as a leaf of a wall calendar left of its text: the month over the day in display figures and the hour under it */
.sl-event-date {
  float: left;
  display: grid;
  justify-items: center;
  min-width: var(--sl-size-tile);
  margin: 0 var(--sl-space-5) var(--sl-space-3) 0;
  padding: var(--sl-space-3) var(--sl-space-4);
  border-radius: var(--sl-radius-3);
  color: var(--sl-text);
  background: var(--sl-ico-bg);
  border: 1px solid var(--sl-ico-border);
  line-height: var(--sl-line-tight);
}

.sl-event-month {
  color: var(--sl-info);
  font-size: var(--sl-font-micro);
  letter-spacing: var(--sl-track-wide);
  text-transform: uppercase;
}

.sl-event-day {
  font-size: var(--sl-font-display);
  font-variant-numeric: tabular-nums;
}

.sl-event-time {
  color: var(--sl-text-muted);
  font-size: var(--sl-font-micro);
}

/* Forms: unified field look shared by input, textarea and select */
.sl-field {
  box-sizing: border-box;
  height: var(--sl-field-height);
  padding: 0 var(--sl-field-pad-x);
  color: var(--sl-text);
  background: var(--sl-field-bg);
  border: 1px solid var(--sl-field-border);
  border-radius: var(--sl-field-radius);
  box-shadow: var(--sl-field-shadow);
  transition:
    border-color var(--sl-time-fast) var(--sl-ease-out),
    box-shadow var(--sl-time-fast) var(--sl-ease-out);
}

.sl-field::placeholder {
  color: var(--sl-field-text);
}

.sl-field:focus {
  outline: none;
  border-color: var(--sl-primary);
  box-shadow:
    var(--sl-field-shadow),
    var(--sl-shadow-focus);
}

.sl-field:disabled {
  background: var(--sl-bg-subtle);
  color: var(--sl-text-muted);
  cursor: default;
}

.sl-field:user-invalid {
  border-color: var(--sl-danger);
}

.sl-field:user-invalid:focus {
  border-color: var(--sl-danger);
  box-shadow:
    var(--sl-field-shadow),
    0 0 0 var(--sl-ring-width) color-mix(in srgb, var(--sl-danger) var(--sl-ring-mix), transparent);
}

.sl-field:user-valid:required:focus {
  border-color: var(--sl-success);
  box-shadow:
    var(--sl-field-shadow),
    0 0 0 var(--sl-ring-width) color-mix(in srgb, var(--sl-success) var(--sl-ring-mix), transparent);
}

/* Checkbox: custom control matching the field look, brand check mark */
input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  width: var(--sl-check-width);
  height: var(--sl-check-width);
  min-width: var(--sl-check-width);
  margin: 0 var(--sl-space-2) var(--sl-space-1) 0;
  border: 1px solid var(--sl-border-strong);
  border-radius: var(--sl-radius-1);
  background: var(--sl-bg);
  box-shadow: var(--sl-field-shadow);
  cursor: pointer;
  vertical-align: middle;
  transition:
    background-color var(--sl-time-fast) var(--sl-ease-out),
    border-color var(--sl-time-fast) var(--sl-ease-out),
    box-shadow var(--sl-time-fast) var(--sl-ease-out);
}

input[type="checkbox"]:checked {
  border-color: var(--sl-check-bg);
  background: var(--sl-check-bg);
}

input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 1px;
  width: var(--sl-check-tick-width);
  height: var(--sl-check-tick-height);
  border: solid var(--sl-on-solid);
  border-width: 0 var(--sl-check-tick-border) var(--sl-check-tick-border) 0;
  transform: rotate(45deg);
}

input[type="checkbox"]:focus-visible {
  outline: none;
  border-color: var(--sl-check-bg);
  box-shadow:
    var(--sl-field-shadow),
    var(--sl-shadow-focus);
}

input[type="checkbox"]:disabled {
  cursor: default;
  opacity: var(--sl-fade-muted);
}

.sl-captcha .altcha-checkbox input[type="checkbox"]::after {
  content: none;
}

/* Radios: radio group and Yes/No segmented switch */
.sl-radio {
  display: inline-flex;
  align-items: center;
  gap: var(--sl-space-3);
  cursor: pointer;
}

.sl-radio-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sl-space-3);
}

.sl-radio-group.sl-radio-switch {
  position: relative;
  display: inline-grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  width: var(--sl-switch-width);
  height: var(--sl-switch-height);
  min-width: var(--sl-switch-width);
  gap: 0;
  padding: var(--sl-space-1);
  border-radius: var(--sl-radius-pill);
  background: var(--sl-border);
  box-shadow: inset 0 0 0 1px var(--sl-scrim-subtle);
  transition:
    background var(--sl-time-base) var(--sl-ease-out),
    box-shadow var(--sl-time-base) var(--sl-ease-out);
}

.sl-radio-group.sl-radio-switch:has(input[value="1"]:checked) {
  background: var(--sl-switch-on-bg);
}

.sl-radio-group.sl-radio-switch::after {
  content: "";
  position: absolute;
  z-index: var(--sl-z-base);
  top: var(--sl-switch-gap);
  left: var(--sl-switch-gap);
  width: calc(100% / 2 - var(--sl-switch-gap));
  height: calc(100% - var(--sl-switch-gap) * 2);
  border-radius: var(--sl-radius-pill);
  background: var(--sl-bg);
  box-shadow: var(--sl-switch-knob-shadow);
  transition:
    left var(--sl-time-base) var(--sl-ease-in-out),
    box-shadow var(--sl-time-base) var(--sl-ease-out);
}

.sl-radio-group.sl-radio-switch:has(input[value="0"]:checked)::after {
  left: 50%;
}

.sl-radio-group.sl-radio-switch .sl-radio {
  position: relative;
  z-index: var(--sl-z-raised);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: var(--sl-radio-height);
  margin: 0;
  padding: 0;
  gap: 0;
  /* Muted grey on this track measures 4.17 at twelve points, below AA, so the side not chosen reads the body colour */
  color: var(--sl-text);
  font-size: var(--sl-font-small);
  line-height: var(--sl-radio-height);
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  transition: color var(--sl-time-base) var(--sl-ease-out);
}

.sl-radio-group.sl-radio-switch:has(input[value="1"]:checked) .sl-radio {
  color: var(--sl-on-solid);
}

.sl-radio-group.sl-radio-switch:has(input[value="1"]:checked)
  .sl-radio:has(input:checked) {
  color: var(--sl-switch-on-text);
}

/* The same disappearance serves the preset gallery of the settings page, where each option is its picture and nothing else */
.sl-radio-group.sl-radio-switch input,
.sl-opt-tile .sl-radio-group:not(.sl-radio-switch) input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.sl-radio-group.sl-radio-switch:focus-within {
  box-shadow:
    inset 0 0 0 1px var(--sl-scrim-subtle),
    var(--sl-shadow-focus);
}

textarea.sl-field {
  height: auto;
  min-height: calc(var(--sl-field-height) * 2);
  padding: var(--sl-field-pad-y) var(--sl-field-pad-x);
  line-height: var(--sl-line-normal);
  resize: vertical;
}

select.sl-field {
  cursor: pointer;
}

/* A list that picks several options: one box a row, and a long list scrolls inside its height */
.sl-check-list {
  display: grid;
  gap: var(--sl-space-2);
  max-height: var(--sl-select-height);
  overflow-y: auto;
}

/* The chip of a checked category says main or additional; a click on an additional one makes it the main, and an unchecked row carries none */
.sl-check-main {
  gap: var(--sl-space-2);
  margin-left: var(--sl-space-3);
  cursor: pointer;
}

.sl-check-list > div:not(:has(> label > input[type="checkbox"]:checked)) > .sl-check-main,
.sl-check-main > .bi-star-fill,
.sl-check-main > span:last-child,
.sl-check-main:has(> input:checked) > .bi-star,
.sl-check-main:has(> input:checked) > span:first-of-type {
  display: none;
}

.sl-check-main:has(> input:checked) > .bi-star-fill,
.sl-check-main:has(> input:checked) > span:last-child {
  display: inline;
}

/* The main one wears the warning tone over the info chip it is drawn with, and takes no click */
.sl-check-main:has(> input:checked) {
  background: var(--sl-chip-bg);
  color: var(--sl-warning);
  cursor: default;
}

.sl-check-main:not(:has(> input:checked)):hover {
  background: var(--sl-chip-hover-bg, var(--sl-chip-tint-bg));
}

.sl-check-main:has(> input:focus-visible) {
  outline: var(--sl-ring-width) solid var(--sl-ring-bg);
  outline-offset: var(--sl-ring-gap);
  border-radius: var(--sl-radius-pill);
}

.sl-field[type="file"] {
  height: auto;
  padding: var(--sl-field-pad-y) var(--sl-field-pad-x);
  line-height: var(--sl-line-normal);
}

.sl-field--block {
  width: 100%;
}

.sl-field--auto {
  width: auto;
  margin-right: var(--sl-space-3);
}

.sl-table-form {
  width: 100%;
}

.sl-table-form td {
  padding-bottom: var(--sl-space-2);
}

.sl-table-form td:first-child {
  width: var(--sl-col-form-width);
}

.sl-center {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

.sl-inline-form {
  display: inline;
}

/* A tip whose button is a whole form stands in a row spaced by its gap, so it takes no gutter of its own */
.sl-inline-form > .sl-tip {
  margin-right: 0;
}

.sl-hidden {
  display: none;
}

.sl-dimmed {
  opacity: var(--sl-fade-muted);
}

.sl-avatar {
  max-width: 100%;
}

.sl-com-ava .sl-avatar {
  width: 100%;
  height: 100%;
  border-radius: var(--sl-radius-circle);
  object-fit: cover;
  display: block;
}

.sl-fp-left .sl-com-ava {
  width: var(--sl-fp-ava-width);
  height: var(--sl-fp-ava-height);
  margin: 0 auto var(--sl-space-5);
}

.sl-check {
  margin: 0 var(--sl-space-2) 0 0;
}

.sl-sig {
  color: var(--sl-text-muted);
  font-style: italic;
}

.sl-table-faq {
  width: 100%;
  margin: 0 0 var(--sl-space-7) 0;
}

.sl-muted,
.sl-muted a {
  color: var(--sl-text-muted);
}

/* Floating panels: shared hover, focus and JS-open model; a float shut with Escape stays shut until it opens again */
.sl-float:not([data-sl-float-shut]):hover > .sl-float-panel,
.sl-float:not([data-sl-float-shut]):focus-within > .sl-float-panel {
  display: block;
  opacity: 1;
}

/* Mini chip button: holds a single icon or a number, 26px round, grows to a pill for multi-digit numbers */
.sl-but-mini {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: var(--sl-size-chip);
  height: var(--sl-size-chip);
  padding: 0 var(--sl-space-2);
  margin: 0;
  border-radius: var(--sl-radius-pill);
  background-color: var(--sl-border-strong);
  color: var(--sl-text-strong);
  font-size: var(--sl-font-small);
  font-weight: var(--sl-weight-bold);
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  border: 0;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  vertical-align: middle;
  transition:
    background-color var(--sl-time-base) var(--sl-ease-out),
    color var(--sl-time-base) var(--sl-ease-out);
}

.sl-but-mini > .bi {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: var(--sl-size-icon-xs);
  line-height: 1;
}

a.sl-but-mini:hover,
button.sl-but-mini:hover,
.sl-but-mini:focus-visible,
.sl-but-mini.sl-is-active {
  background-color: var(--sl-primary-strong);
  color: var(--sl-on-solid);
}

.sl-but-mini.sl-is-muted {
  background-color: transparent;
  color: var(--sl-text-muted);
  cursor: default;
}

.sl-but-mini.sl-is-soft {
  background-color: var(--sl-border-muted);
}

/* Speed dial: inline moderator toggle chip; items are absolute so the fan opens left over sibling cells without shifting layout */
.sl-dial {
  --sl-d-count: 2;
  position: relative;
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
}

.sl-dial:has(.sl-dial-item:nth-child(2):last-child) {
  --sl-d-count: 1;
}

.sl-dial:has(.sl-dial-item:nth-child(4):last-child) {
  --sl-d-count: 3;
}

.sl-dial:has(.sl-dial-item:nth-child(5):last-child) {
  --sl-d-count: 4;
}

.sl-dial:has(.sl-dial-item:nth-child(6):last-child) {
  --sl-d-count: 5;
}

.sl-dial:has(.sl-dial-item:nth-child(7):last-child) {
  --sl-d-count: 6;
}

.sl-dial.sl-open,
.sl-dial:hover {
  z-index: var(--sl-z-dropdown);
}

/* The same fan opened as a context menu: it leaves the corner of its object and stands where the pointer is, the items keeping the side they open to in this theme */
.sl-dial.sl-dial-point {
  position: absolute;
  right: auto;
  bottom: auto;
  z-index: var(--sl-z-dropdown);
  transform: translateY(-50%);
}

/* Backdrop pill behind the open fan (admin-style); width follows the item count via --sl-d-count */
.sl-dial::before {
  content: "";
  position: absolute;
  top: 50%;
  right: calc(var(--sl-dial-gap) / -2);
  width: calc((var(--sl-d-count) + 1) * var(--sl-size-chip) + var(--sl-d-count) * var(--sl-space-2) + var(--sl-dial-gap));
  height: calc(var(--sl-size-chip) + var(--sl-dial-gap));
  border: 1px solid transparent;
  border-radius: var(--sl-radius-pill);
  transform: translateY(-50%);
  opacity: 0;
  pointer-events: none;
  transition:
    opacity var(--sl-time-base) var(--sl-ease-out),
    background-color var(--sl-time-base) var(--sl-ease-out),
    border-color var(--sl-time-base) var(--sl-ease-out),
    box-shadow var(--sl-time-base) var(--sl-ease-out);
}

.sl-dial.sl-open::before,
.sl-dial:hover::before {
  opacity: 1;
  border-color: var(--sl-border-strong);
  background: var(--sl-bg);
  box-shadow: var(--sl-shadow-xs);
  /* The pill must be hit-testable while the fan is open: it bridges the gaps between the absolute chips, otherwise :hover drops and the fan collapses mid-move */
  pointer-events: auto;
}

/* Inline edit: the editor widget carries no outer margin of its own, so its action row would sit on the tab bar */
.sl-inline-edit > .sl-but,
.sl-inline-edit > .sl-but-green,
.sl-inline-edit > .sl-but-blue,
.sl-inline-edit > button {
  margin-top: var(--sl-space-4);
}

.sl-dial-post {
  display: none;
}

.sl-dial-toggle,
.sl-dial-item {
  border: 0;
  cursor: pointer;
}

/* The toggle must join the positioned paint layer so the backdrop pill stays under it */
.sl-dial-toggle {
  position: relative;
}

.sl-dial.sl-open .sl-dial-toggle,
.sl-dial:hover .sl-dial-toggle {
  background-color: var(--sl-primary);
  color: var(--sl-on-solid);
}

/* A closed fan is one stop of Tab: its items stay hidden until it opens, and hide only once they have faded */
.sl-dial .sl-dial-item {
  position: absolute;
  top: 50%;
  right: calc(100% + var(--sl-space-2));
  opacity: 0;
  visibility: hidden;
  transform: translateY(-50%) translateX(8px) scale(0.6);
  pointer-events: none;
  color: var(--sl-band-text);
  transition:
    visibility var(--sl-time-base) var(--sl-ease-out),
    background-color var(--sl-time-base) var(--sl-ease-out),
    color var(--sl-time-base) var(--sl-ease-out),
    transform var(--sl-time-base) var(--sl-ease-out),
    opacity var(--sl-time-base) var(--sl-ease-out);
}

/* Focus paints the chip solid, and the fixed light tone above comes later than the shared chip rule, so it steps aside here */
.sl-dial .sl-dial-item:focus-visible {
  color: var(--sl-on-solid);
}

.sl-dial .sl-dial-item:nth-child(3) {
  right: calc(100% + var(--sl-size-chip) + 2 * var(--sl-space-2));
}

.sl-dial .sl-dial-item:nth-child(4) {
  right: calc(100% + 2 * var(--sl-size-chip) + 3 * var(--sl-space-2));
}

.sl-dial .sl-dial-item:nth-child(5) {
  right: calc(100% + 3 * var(--sl-size-chip) + 4 * var(--sl-space-2));
}

.sl-dial .sl-dial-item:nth-child(6) {
  right: calc(100% + 4 * var(--sl-size-chip) + 5 * var(--sl-space-2));
}

.sl-dial .sl-dial-item:nth-child(7) {
  right: calc(100% + 5 * var(--sl-size-chip) + 6 * var(--sl-space-2));
}

.sl-dial.sl-open .sl-dial-item,
.sl-dial:hover .sl-dial-item {
  opacity: 1;
  visibility: visible;
  transform: translateY(-50%);
  pointer-events: auto;
}

.sl-dial.sl-open .sl-dial-item:nth-child(3),
.sl-dial:hover .sl-dial-item:nth-child(3) {
  transition-delay: calc(var(--sl-dial-dur) * 1);
}

.sl-dial.sl-open .sl-dial-item:nth-child(4),
.sl-dial:hover .sl-dial-item:nth-child(4) {
  transition-delay: calc(var(--sl-dial-dur) * 2);
}

.sl-dial.sl-open .sl-dial-item:nth-child(5),
.sl-dial:hover .sl-dial-item:nth-child(5) {
  transition-delay: calc(var(--sl-dial-dur) * 3);
}

.sl-dial.sl-open .sl-dial-item:nth-child(6),
.sl-dial:hover .sl-dial-item:nth-child(6) {
  transition-delay: calc(var(--sl-dial-dur) * 4);
}

.sl-dial.sl-open .sl-dial-item:nth-child(7),
.sl-dial:hover .sl-dial-item:nth-child(7) {
  transition-delay: calc(var(--sl-dial-dur) * 5);
}

.sl-forum-jump:hover {
  opacity: var(--sl-fade-subtle);
}

.sl-label {
  font-weight: var(--sl-weight-bold);
}

/* Forms: the form lays two tracks, captions up to the token's ceiling and fields taking the rest, for every row directly in it */
.sl-form {
  display: grid;
  grid-template-columns: fit-content(var(--sl-form-label-width)) minmax(0, 1fr);
  column-gap: var(--sl-space-6);
  margin-bottom: var(--sl-space-7);
}

.sl-form > *,
.sl-opt-tile > *,
.sl-profile-panel > * {
  grid-column: 1 / -1;
}

/* One pair of tracks serves the form row and the read-only value row; the caption stands at the top of its field, never at half the height of a tall one */
.sl-form-row,
.sl-value-row {
  display: grid;
  grid-template-columns: 1fr 3fr;
  gap: var(--sl-space-6);
  align-items: start;
  margin-bottom: var(--sl-space-4);
  width: 100%;
}

/* A read-only value row is a fact, as on a page of the panel: a rule between two rows, the caption muted, a short value weighed */
.sl-value-row {
  margin-bottom: 0;
  padding: var(--sl-space-3) 0;
}

.sl-value-row + .sl-value-row {
  border-top: 1px solid var(--sl-border-subtle);
}

.sl-value-label {
  color: var(--sl-text-muted);
}

/* A text area of a field arrives as parser output, and its paragraphs keep the weight of a text */
.sl-value-text:not(:has(> :is(p, ul, ol, pre, table, blockquote, div))) {
  font-weight: var(--sl-weight-semibold);
  color: var(--sl-text-strong);
}

/* A direct row draws its parent's tracks through subgrid, or keeps a quarter without it; the selector carries no weight */
:where(.sl-form, .sl-opt-tile) > .sl-form-row {
  grid-template-columns: subgrid;
}

/* A row asked to hide has to outrank the display the row itself sets, which a single class cannot do from further up the file */
.sl-form-row.sl-hidden {
  display: none;
}

/* The editor takes both tracks with its label above, from the first frame through its mount; the track floor is zero, since a bare 1fr overflowed at 768 */
.sl-form-row:has([id$="_toast"]),
.sl-form-row:has(.toastui-editor-defaultUI),
.sl-form-row:has(.ck-editor),
.sl-form-row:has(.cm-editor),
.sl-form-row:has(.tox-tinymce),
.sl-form-row:has(.sl-editor) {
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sl-space-3);
  align-items: start;
}

/* A caption meets the first line of a field box, so a text area keeps it at its top; a plain value or a list of boxes starts level */
.sl-form-row:has(> .sl-form-field :is(input:not([type="hidden"], [type="checkbox"]), select, textarea, button)) > :first-child {
  padding-top: calc((var(--sl-field-height) - 1lh) / 2);
}

/* An editor row stacks its caption over the editor, so the caption takes no offset */
.sl-form-row:has([id$="_toast"]) > :first-child,
.sl-form-row:has(.toastui-editor-defaultUI) > :first-child,
.sl-form-row:has(.ck-editor) > :first-child,
.sl-form-row:has(.cm-editor) > :first-child,
.sl-form-row:has(.tox-tinymce) > :first-child,
.sl-form-row:has(.sl-editor) > :first-child {
  padding-top: 0;
}

.sl-form-field {
  width: 100%;
}

.sl-form-field > .sl-field:not(.sl-field--auto),
.sl-form-field > .sl-field--auto:only-child {
  width: 100%;
}

.sl-form-field > .sl-field--auto:only-child {
  margin-right: 0;
}

.sl-form-submit {
  padding-top: var(--sl-space-4);
  text-align: center;
}

/* Content cards: related articles */
.sl-related-title {
  font-size: var(--sl-font-h2);
  color: var(--sl-text-strong);
  margin: var(--sl-space-5) 0;
}

.sl-related-item {
  display: flex;
  align-items: center;
  gap: var(--sl-space-5);
  padding: var(--sl-space-3) 0;
  border-bottom: 1px solid var(--sl-border-subtle);
}

.sl-related-img {
  display: block;
  width: var(--sl-thumb-height);
  height: var(--sl-thumb-height);
  flex-shrink: 0;
  overflow: hidden;
  border-radius: var(--sl-radius-circle);
  background-color: var(--sl-bg-subtle);
  background-size: cover;
  background-position: center;
  font-size: 0;
  color: transparent;
}

.sl-related-img-inner {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sl-related-meta {
  list-style: none;
  padding: 0;
  margin: var(--sl-space-2) 0 0 0;
  font-size: var(--sl-font-small);
  color: var(--sl-text-muted);
}

.sl-related-date {
  color: inherit;
}

/* Content cards: news grid */
.sl-grid {
  display: flex;
  flex-wrap: wrap;
  margin: 0 calc(var(--sl-layout-grid) * -1) var(--sl-space-7) calc(var(--sl-layout-grid) * -1);
}

.sl-grid .sl-card {
  flex: 0 0 100%;
  max-width: 100%;
  padding: 0 var(--sl-layout-grid) var(--sl-space-7) var(--sl-layout-grid);
  box-sizing: border-box;
}

.sl-grid .sl-post {
  flex: 0 0 100%;
  padding: 0;
  box-sizing: border-box;
}

.sl-grid .sl-card-col-1 {
  flex-basis: 100%;
  max-width: 100%;
}

.sl-grid .sl-card-col-2 {
  flex-basis: 50%;
  max-width: calc(100% / 2);
}

.sl-grid .sl-card-col-3 {
  flex-basis: 33.3333%;
  max-width: calc(100% / 3);
}

.sl-grid .sl-card-col-4 {
  flex-basis: 25%;
  max-width: calc(100% / 4);
}

.sl-grid .sl-card-col-5 {
  flex-basis: 20%;
  max-width: calc(100% / 5);
}

.sl-grid .sl-card-col-6 {
  flex-basis: 16.6667%;
  max-width: calc(100% / 6);
}

.sl-card-aside {
  float: right;
  margin: 0 0 var(--sl-space-8) var(--sl-space-7);
  border: 1px solid var(--sl-border-subtle);
  border-radius: var(--sl-radius-2);
  padding: var(--sl-space-6) var(--sl-space-7);
  width: var(--sl-aside-width);
  list-style: none;
}

/* Tables: list-wrap and list-row layouts */
/* A forum cell keeps the inset of its column title, and a table of sections stands apart from the next by the gap of the blocks */
.sl-forum-line td {
  border-bottom: 1px solid var(--sl-border);
  padding: var(--sl-space-5) var(--sl-space-6);
  font-size: var(--sl-font-small);
}

.sl-forum-shell {
  margin-bottom: var(--sl-space-7);
}

.sl-forum-shell:last-child {
  margin-bottom: 0;
}

/* Associations: assoc-wrap and assoc-item layout */
.sl-session-line,
.sl-session-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--sl-space-3);
  align-items: center;
  padding: var(--sl-space-2) 0;
}

.sl-session-row--icon {
  grid-template-columns: 20px minmax(0, 1fr) auto;
}

.sl-session-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

.sl-session-name,
.sl-session-module {
  overflow-wrap: anywhere;
  word-break: break-word;
}

.sl-session-module { text-align: right; }

.sl-session-action {
  padding: var(--sl-space-2) 0;
  text-align: center;
}

.sl-session-hidden {
  display: none;
}

.sl-session-note {
  opacity: var(--sl-fade-subtle);
}

.sl-session-toggle {
  cursor: pointer;
}

.sl-session-button {
  display: inline-block;
}

.sl-image-preview-toggle {
  position: relative;
}

.sl-image-preview-popup {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: var(--sl-z-popover);
}

.sl-image-preview-mini {
  cursor: pointer;
  display: block;
  width: var(--sl-preview-width);
  height: var(--sl-preview-height);
  border-radius: var(--sl-radius-circle);
  overflow: hidden;
  transition: all var(--sl-time-slow);
}

.sl-image-preview-thumb {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sl-image-preview-mini:hover {
  width: var(--sl-preview-max-width);
  height: var(--sl-preview-max-height);
}

/* Node document tree: the branch of a document with its trail, the current entry and the pager of the reading order */
.sl-node-tree {
  margin-top: var(--sl-space-6);
}

.sl-node-tree .sl-sublist {
  padding-left: var(--sl-space-7);
}

.sl-node-tree-cur {
  font-weight: var(--sl-weight-semibold);
}

.sl-node-tree-more {
  margin: 0;
  color: var(--sl-text-subtle);
}

.sl-node-tree-pager {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--sl-space-3);
  margin-top: var(--sl-space-5);
}

.sl-node-tree-pager [rel="next"] {
  margin-left: auto;
}

/* Node display modes: the contents rows of docs, the accordion of faq, the file card of files and the tiles of media */
.sl-node-toc {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sl-space-2) var(--sl-space-5);
  padding: var(--sl-space-5) 0;
  border-bottom: 1px solid var(--sl-border-subtle);
}

.sl-node-toc .sl-title,
.sl-node-faq .sl-title,
.sl-node-tile .sl-title {
  font-size: var(--sl-font-h4);
}

.sl-node-toc .sl-title {
  flex: 1 1 0;
  min-width: 0;
  margin: 0;
}

.sl-node-toc-intro {
  flex-basis: 100%;
  margin: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: var(--sl-font-small);
  color: var(--sl-text-muted);
}

.sl-node-faq {
  border-bottom: 1px solid var(--sl-border-subtle);
}

.sl-node-faq summary {
  display: flex;
  align-items: center;
  gap: var(--sl-space-4);
  padding: var(--sl-space-5) 0;
  cursor: pointer;
  list-style: none;
}

.sl-node-faq summary::-webkit-details-marker {
  display: none;
}

.sl-node-faq summary .sl-title {
  margin: 0;
}

.sl-node-faq summary .bi {
  color: var(--sl-primary);
  transition: transform var(--sl-time-base) var(--sl-ease-out);
}

.sl-node-faq[open] summary .bi {
  transform: rotate(90deg);
}

.sl-node-faq-body {
  padding: 0 0 var(--sl-space-5) var(--sl-space-8);
}

.sl-node-file .sl-title .bi {
  color: var(--sl-primary);
}

.sl-node-file .sl-meta-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sl-space-3);
}

.sl-node-file .sl-meta-foot > :last-child {
  margin-left: auto;
}

.sl-node-tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sl-space-7);
  margin-bottom: var(--sl-space-7);
}

.sl-node-tile-cover {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  margin-bottom: var(--sl-space-4);
  border: 1px solid var(--sl-border-subtle);
  border-radius: var(--sl-radius-3);
  background: var(--sl-bg-muted);
}

.sl-node-tile-cover img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sl-node-tile-cover .bi {
  position: relative;
  display: grid;
  place-items: center;
  width: var(--sl-size-icon-xl);
  height: var(--sl-size-icon-xl);
  border-radius: var(--sl-radius-circle);
  font-size: var(--sl-size-icon-md);
  line-height: 1;
  color: var(--sl-on-solid);
  background: var(--sl-scrim);
  transition: transform var(--sl-time-base) var(--sl-ease-out);
}

.sl-node-tile-cover:hover .bi {
  transform: scale(1.1);
}

.sl-node-tile .sl-title {
  margin-bottom: var(--sl-space-3);
}

@media (max-width: 900px) {
  .sl-node-tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .sl-node-tiles {
    grid-template-columns: minmax(0, 1fr);
  }

  .sl-node-file .sl-meta-foot > :last-child {
    margin-left: 0;
  }
}

/* The compact view of a Node list: the cards keep their title and meta row and fold the text into one muted line */
.sl-node-compact .sl-post .sl-title {
  margin-bottom: var(--sl-space-2);
  font-size: var(--sl-font-h4);
}

.sl-node-compact .sl-meta {
  margin-bottom: var(--sl-space-3);
  padding-bottom: var(--sl-space-3);
}

.sl-node-compact .sl-card-image,
.sl-node-compact .sl-event-date,
.sl-node-compact .sl-meta-foot,
.sl-node-compact .sl-entry-content img,
.sl-node-compact .sl-img-placeholder,
.sl-node-compact .sl-meta .sl-pull-right > li:not(.sl-meta-actions) {
  display: none;
}

.sl-node-compact .sl-entry-content {
  display: -webkit-box;
  overflow: hidden;
  margin-bottom: 0;
  color: var(--sl-text-muted);
  font-size: var(--sl-font-small);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}

.sl-node-compact .sl-entry-content p {
  display: inline;
  margin: 0;
}

/* The list view: one row of the thumbnail, the title, the category and the date over one line of the introduction */
@media (width > 560px) {
  .sl-node-row .sl-node-toc {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
  }

  .sl-node-row .sl-node-toc:has(> .sl-related-img) {
    grid-template-columns: auto minmax(0, 1fr) auto auto;
  }

  .sl-node-row .sl-related-img {
    grid-row: span 2;
  }

  .sl-node-row .sl-node-toc-intro {
    grid-column: 1 / -1;
  }

  .sl-node-row .sl-node-toc:has(> .sl-related-img) .sl-node-toc-intro {
    grid-column: 2 / -1;
  }
}

/* The rail: the titles of the page on the left as tabs, the chosen one read on the right; one column on a phone */
.sl-duo.sl-node-rail {
  grid-template-columns: 280px minmax(0, 1fr);
  margin-bottom: var(--sl-space-7);
}

.sl-node-rail ul {
  margin: 0;
  padding: 0 var(--sl-space-5);
  list-style: none;
}

.sl-node-rail [data-sl-tab-link] {
  display: block;
  color: var(--sl-text);
  font-weight: var(--sl-weight-semibold);
}

.sl-node-rail [data-sl-tab-link].sl-is-active {
  color: var(--sl-primary-strong);
}

.sl-node-rail .sl-duo-main {
  padding: var(--sl-space-6);
}

@media (max-width: 768px) {
  .sl-duo.sl-node-rail {
    grid-template-columns: minmax(0, 1fr);
  }

  .sl-node-rail .sl-duo-aside {
    border-right: 0;
    border-bottom: 1px solid var(--sl-border-subtle);
  }
}

/* The part of a Node list is no scroll anchor: the stuck bar is lower than the free one, and a page moved back by the difference would unstick it again */
.sl-node-list {
  overflow-anchor: none;
}

/* The foot of a Node list: the pager row and the more button share one row under one rule */
.sl-node-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  container: sl-node-foot / inline-size;
}

.sl-node-foot > .sl-pager {
  flex: 1 1 0;
  min-width: 0;
}

.sl-node-more {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  margin: 0;
  padding: var(--sl-space-5) 0 0 var(--sl-space-4);
  border-top: 1px solid var(--sl-border-subtle);
}

.sl-node-more .sl-but {
  margin: 0;
}

/* Under 720px of the foot the range leaves the info line, so the pager, the short line and the button still share one row */
@container sl-node-foot (width < 720px) {
  .sl-node-foot .sl-pager .sl-pager-range {
    display: none;
  }
}

/* Under 480px of the foot the pager beside the button would drop its near numbers too (under 320px of its own), so the foot turns into a centred column */
@container sl-node-foot (width < 480px) {
  .sl-node-foot > .sl-pager {
    flex-basis: 100%;
  }

  .sl-node-foot .sl-pager-main,
  .sl-node-foot .sl-pager-info {
    flex-basis: 100%;
    justify-content: center;
    text-align: center;
  }

  .sl-node-foot .sl-pager .sl-pager-range {
    display: inline;
  }

  .sl-node-more {
    flex-basis: 100%;
    justify-content: center;
    padding: 0 0 var(--sl-space-5);
    border-top: 0;
  }
}

/* The header of a Node list: the title row and the filter row stick to the top as one bar while the list scrolls under them */
.sl-node-head {
  position: sticky;
  top: 0;
  z-index: var(--sl-z-sticky);
  margin-bottom: var(--sl-space-7);
  padding-bottom: var(--sl-space-5);
  border-bottom: 1px solid var(--sl-border-subtle);
  background: var(--sl-bg);
  container-type: inline-size;
  transition:
    box-shadow var(--sl-time-base) var(--sl-ease-out),
    padding var(--sl-time-base) var(--sl-ease-out);
}

/* Stuck, the bar is a card hanging from the top edge: one row of the title, the pills and the search */
.sl-node-head[data-sl-stuck] {
  padding: var(--sl-space-3) var(--sl-space-4);
  border: 1px solid var(--sl-border-subtle);
  border-top: 0;
  border-radius: 0 0 var(--sl-radius-3) var(--sl-radius-3);
  box-shadow: var(--sl-shadow-float);
}

.sl-node-head-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "title acts" "filters filters";
  align-items: center;
  gap: var(--sl-space-4);
}

.sl-node-head[data-sl-stuck] .sl-node-head-row {
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "title filters acts";
  gap: var(--sl-space-3);
}

.sl-node-head-title {
  grid-area: title;
  display: flex;
  align-items: center;
  gap: var(--sl-space-3);
  min-width: 0;
}

.sl-node-head-title .sl-title {
  margin: 0;
  transition: font-size var(--sl-time-base) var(--sl-ease-out);
}

.sl-node-head[data-sl-stuck] .sl-node-head-title .sl-title {
  font-size: var(--sl-font-h3);
}

.sl-node-head-acts {
  grid-area: acts;
  display: inline-flex;
  align-items: center;
  gap: var(--sl-space-3);
}

/* The search of the type is narrower than the one of the site header, which the narrow screens stretch over the whole row; it holds the list of its hints */
.sl-node-head-acts .sl-search-form {
  position: relative;
  width: var(--sl-node-find-width);
  margin: 0;
}

/* The hints of the search hang under the field over the list, as wide as the field: the titles its search finds first, each a link to the material */
.sl-node-hints {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: var(--sl-z-dropdown);
  display: grid;
  margin-top: var(--sl-space-2);
  padding: var(--sl-space-2);
  border: 1px solid var(--sl-border-strong);
  border-radius: var(--sl-radius-2);
  background: var(--sl-bg);
  box-shadow: var(--sl-shadow-float);
}

.sl-node-hint {
  padding: var(--sl-space-2) var(--sl-space-4);
  border-radius: var(--sl-radius-1);
  color: var(--sl-text);
  font-size: var(--sl-font-small);
  line-height: var(--sl-line-tight);
  text-decoration: none;
}

/* The round buttons of the row stand as high as the pills beside them */
.sl-node-head-acts .sl-but-mini {
  width: var(--sl-btn-height);
  height: var(--sl-btn-height);
}

/* The way up and the lens belong to the stuck bar, and the lens shows the cross while its field is open */
.sl-node-head-acts [href="#top"],
.sl-node-head-acts [data-sl-lens],
.sl-node-head[data-sl-lens-open] [data-sl-lens] > .bi:first-child,
.sl-node-head:not([data-sl-lens-open]) [data-sl-lens] > .bi:last-child,
.sl-node-head[data-sl-stuck] .sl-node-head-title .sl-chip,
.sl-node-head[data-sl-stuck] .sl-node-head-acts > :not(.sl-search-form, [data-sl-lens], [href="#top"]),
.sl-node-head[data-sl-stuck] .sl-node-head-filters > :not(.sl-node-head-pill),
.sl-node-head[data-sl-stuck] .sl-node-head-pill > a > span {
  display: none;
}

.sl-node-head[data-sl-stuck] .sl-node-head-acts [href="#top"] {
  display: inline-flex;
}

.sl-node-head-filters {
  grid-area: filters;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sl-space-3);
  min-width: 0;
}

.sl-node-head[data-sl-stuck] .sl-node-head-filters {
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
}

/* The add button closes the filter row at its right edge */
.sl-node-head-filters > .sl-but {
  margin: 0 0 0 auto;
}

.sl-node-head-pill {
  display: inline-flex;
  align-items: center;
}

.sl-node-head-pill .sl-but {
  margin: 0;
}

/* The last icon of a pill that opens a window is its chevron, turned while the window is open */
.sl-node-head-pill button > .bi:last-child {
  font-size: var(--sl-font-micro);
  transition: transform var(--sl-time-base) var(--sl-ease-out);
}

.sl-node-head-pill .sl-but.sl-is-open > .bi:last-child {
  transform: rotate(180deg);
}

.sl-node-head-pill .sl-but.sl-is-open {
  box-shadow: var(--sl-shadow-focus);
}

/* A window opens under the bar, one at a time */
.sl-node-head-win {
  margin-top: var(--sl-space-4);
  padding: var(--sl-space-5);
  border: 1px solid var(--sl-border-subtle);
  border-radius: var(--sl-radius-3);
  background: var(--sl-surface);
}

.sl-node-head-cap {
  margin: 0 0 var(--sl-space-3);
  color: var(--sl-text-subtle);
  font-size: var(--sl-font-micro);
  font-weight: var(--sl-weight-bold);
  letter-spacing: var(--sl-track-wide);
  text-transform: uppercase;
}

.sl-node-head-sorts + .sl-node-head-cap {
  margin-top: var(--sl-space-5);
}

.sl-node-head-win > p:not(.sl-node-head-cap) {
  margin: var(--sl-space-2) 0 0;
  color: var(--sl-text-muted);
  font-size: var(--sl-font-small);
}

.sl-node-head-sorts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sl-space-3);
}

.sl-node-head-sorts .sl-chip {
  margin: 0;
}

/* The chosen sort, a personal filter that is on and the chosen subcategory wear the tint of a chosen pill with its ring */
.sl-node-head-sorts .sl-chip[aria-current="true"],
.sl-cat-subs .sl-chip[aria-current="true"] {
  background: var(--sl-tint);
  color: var(--sl-primary-strong);
  box-shadow: 0 0 0 1px var(--sl-primary);
}

.sl-cat-tile:has(> [aria-current="true"]) {
  border-color: var(--sl-primary);
  box-shadow: 0 0 0 1px var(--sl-primary);
}

/* A letter without materials is no link and stays grey */
.sl-line-stack-item > .sl-letter {
  color: var(--sl-text-muted);
  border-color: var(--sl-border);
}

@media (max-width: 768px) {
  .sl-node-head-row {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "title" "acts" "filters";
    gap: var(--sl-space-3);
  }

  .sl-node-head-acts {
    display: flex;
  }

  .sl-node-head-acts .sl-search-form {
    flex: 1;
    width: auto;
    min-width: 0;
  }

  .sl-node-head-filters > .sl-but {
    padding-inline: var(--sl-space-4);
  }
}

/* A stuck bar too narrow for title, pills and search keeps the pills, the lens and the way up; it is measured, since a list column can be tablet-narrow */
@container (max-width: 900px) {
  .sl-node-head[data-sl-stuck] .sl-node-head-row {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "filters acts";
  }

  .sl-node-head[data-sl-stuck] .sl-node-head-title,
  .sl-node-head[data-sl-stuck] .sl-search-form,
  .sl-node-head[data-sl-stuck][data-sl-lens-open] .sl-node-head-filters {
    display: none;
  }

  .sl-node-head[data-sl-stuck] [data-sl-lens] {
    display: inline-flex;
  }

  .sl-node-head[data-sl-stuck][data-sl-lens-open] .sl-node-head-row {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "acts";
  }

  .sl-node-head[data-sl-stuck][data-sl-lens-open] .sl-search-form {
    display: flex;
  }
}

.sl-table-amount td:first-child {
  width: var(--sl-col-amount-width);
}

.sl-list,
.sl-sublist,
.sl-sublist-two {
  margin: 0;
  padding: 0;
  counter-reset: li;
  list-style: none;
}

.sl-list li::before {
  display: inline-block;
  min-width: var(--sl-badge-width);
  height: var(--sl-badge-height);
  margin-right: var(--sl-space-2);
  padding: 0 var(--sl-space-1);
  border-radius: var(--sl-radius-pill);
  color: var(--sl-on-solid);
  text-align: center;
  line-height: var(--sl-badge-height);
  font-size: var(--sl-font-small);
  counter-increment: li;
  content: counters(li, ".");
}

.sl-list a {
  text-decoration: none;
}

ol.sl-list li::before {
  background: var(--sl-bullet-bg);
}

ol.sl-sublist li::before {
  background: var(--sl-sublist-bg);
  box-shadow: var(--sl-sublist-shadow);
  margin-right: var(--sl-space-7);
  transition: var(--sl-time-slow) linear;
}

ol.sl-sublist li:hover::before,
ol.sl-sublist-two li:hover::before {
  box-shadow: none;
  margin-right: var(--sl-space-2);
}

ol.sl-sublist-two li::before {
  background: var(--sl-sublist-two-bg);
  box-shadow: var(--sl-sublist-two-shadow);
  margin-right: var(--sl-space-9);
  transition: var(--sl-time-slow) linear;
}

.sl-debug-section {
  border: 1px solid var(--sl-border);
  margin: var(--sl-space-3) 0 0;
  padding: var(--sl-space-3);
  max-width: 100%;
  /* Fieldsets default to min-inline-size: min-content, so one unbreakable token (session base64, long SQL) would stretch the whole page */
  min-inline-size: 0;
  overflow-x: auto;
  overflow-y: hidden;
  box-sizing: border-box;
}

/* Tone palette: shared classes for the section legend and metric values */
.sl-debug-section-info,
.sl-debug-info {
  --sl-debug-tone: var(--sl-info);
}

.sl-debug-section-success,
.sl-debug-success {
  --sl-debug-tone: var(--sl-success);
}

.sl-debug-section-warn,
.sl-debug-warn {
  --sl-debug-tone: var(--sl-warning);
}

.sl-debug-section-danger,
.sl-debug-danger {
  --sl-debug-tone: var(--sl-danger);
}

.sl-debug-section-accent {
  --sl-debug-tone: var(--sl-accent);
}

.sl-debug-section legend {
  font-weight: var(--sl-weight-bold);
  color: var(--sl-debug-tone);
}

.sl-debug-stats {
  margin: 0;
}

.sl-debug-stats dt {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--sl-space-4);
  margin-top: var(--sl-space-3);
  font-weight: var(--sl-weight-normal);
  color: var(--sl-text);
}

.sl-debug-stats dt:first-of-type {
  margin-top: 0;
}

.sl-debug-stats dd {
  margin: 0;
  color: var(--sl-text);
}

.sl-debug-value {
  display: inline-block;
  padding-bottom: var(--sl-space-2);
  color: var(--sl-debug-tone);
}

.sl-debug-section-danger ul {
  margin: 0;
  padding-left: 0;
}

.sl-debug-section-danger li {
  display: flex;
  align-items: center;
  list-style: none;
}

.sl-debug-section-danger li::before {
  content: "\f1db";
  font-family: "bootstrap-icons";
  font-weight: var(--sl-weight-normal);
  font-size: inherit;
  min-width: 0;
  padding: 0;
  margin-right: var(--sl-space-2);
  color: var(--sl-debug-tone);
}

.sl-debug-section-danger li .sl-debug-value {
  padding-bottom: 0;
}

.sl-code-row-odd,
.hljs-ln tr:nth-child(odd) {
  background-color: var(--sl-surface);
}

.sl-code-row-even,
.hljs-ln tr:nth-child(even) {
  background-color: var(--sl-bg);
}

.sl-code-row-num,
td.hljs-ln-numbers {
  vertical-align: top;
  user-select: none;
}

.sl-code-row-cell {
  width: 100%;
}

/* A [code] block by highlight.js: rows striped and numbered like highlight_string, token tones shared with CodeMirror */
pre code.hljs {
  display: block;
  padding: 0;
  background: var(--sl-surface);
  color: var(--sl-text);
  font-family: var(--sl-face-mono);
  font-size: var(--sl-font-small);
  line-height: var(--sl-line-loose);
  tab-size: 4;
}

.hljs-ln {
  width: 100%;
  margin: 0;
  border-collapse: collapse;
}

.hljs-ln-n::before {
  display: block;
  min-width: var(--sl-space-8);
  padding-right: var(--sl-space-2);
  color: var(--sl-text-muted);
  text-align: right;
  content: attr(data-line-number);
}

.hljs-ln td.hljs-ln-code {
  width: 100%;
  padding-left: var(--sl-space-3);
  border-left: var(--sl-rail-width) solid var(--sl-border-strong);
  white-space: pre;
}

.sl-note {
  cursor: help;
}

.sl-small {
  margin: var(--sl-space-4);
  font-size: var(--sl-font-small);
  font-style: normal;
  text-align: justify;
}

.sl-img {
  max-width: 100%;
  height: auto;
  margin: 0 var(--sl-space-2) 0 0;
  border-radius: var(--sl-radius-1);
}

.sl-img-placeholder {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--sl-placeholder-height);
  height: var(--sl-placeholder-height);
  vertical-align: top;
  font-size: var(--sl-size-icon-xl);
}

.sl-img-left {
  float: left;
}

.sl-right {
  text-align: right;
}

.sl-tip {
  position: relative;
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  margin-right: var(--sl-space-3);
  cursor: help;
}

/* Bare info-tip trigger: no button chrome, system-green glyph */
.sl-tip-icon {
  display: inline-flex;
  align-items: center;
  color: var(--sl-success);
  font-size: var(--sl-size-icon-xs);
  line-height: 1;
}

/* A popover opens from a real button beside its panel: the panel is no part of the button, so its links stay links; a mini button keeps its own round face */
.sl-tip > button:not(.sl-but-mini) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: inherit;
}

.sl-tip:focus-visible,
.sl-tip > button:focus-visible,
[data-sl-repeat-add]:not([data-sl-repeat-add=""]):focus-visible {
  outline: var(--sl-ring-width) solid var(--sl-ring-bg);
  outline-offset: var(--sl-ring-gap);
  border-radius: var(--sl-radius-circle);
}

.sl-tip > .sl-float-panel {
  --sl-float-arrow-color: var(--sl-bg);
  position: absolute;
  top: 100%;
  left: 0;
  z-index: var(--sl-z-popover);
  min-width: var(--sl-tooltip-min-width);
  width: max-content;
  max-width: var(--sl-tooltip-max-width);
  padding: var(--sl-space-4);
  margin: var(--sl-space-1) 0 0 0;
  list-style: none;
  /* Overlay content is always left-aligned, even inside centered hosts (forum name plate) */
  text-align: left;
  white-space: normal;
  overflow-wrap: anywhere;
  /* One tooltip typography for the whole project: poll-panel size, bold everywhere */
  font-size: var(--sl-font-body);
  line-height: var(--sl-line-normal);
  background-color: var(--sl-bg);
  border: 1px solid var(--sl-border-muted);
  border-radius: var(--sl-radius-2);
  box-shadow: var(--sl-shadow-float);
  background-clip: padding-box;
  /* display, not visibility: hidden tips must not add scrollable overflow */
  display: none;
  opacity: 0;
  transition: opacity var(--sl-time-slow) var(--sl-ease-out);
  transition:
    opacity var(--sl-time-slow) var(--sl-ease-out),
    display var(--sl-time-slow) allow-discrete;
}

/* Float panel definition rows: the one global label/value mechanism - muted label with colon left, heading value flushed right */
.sl-float-panel dl {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: var(--sl-space-2) var(--sl-space-5);
  margin: 0;
}

.sl-float-panel dt {
  margin: 0;
  color: var(--sl-text-muted);
}

.sl-float-panel dd {
  margin: 0;
  min-width: 0;
  color: var(--sl-text-strong);
  text-align: right;
}

/* Popover arrow: shared geometry, flips with .sl-float-up; colour set per context */
.sl-float-panel::after {
  content: "";
  position: absolute;
  left: var(--sl-d-arrow, 16px);
  top: -8px;
  width: 0;
  height: 0;
  border-left: var(--sl-arrow-width) solid transparent;
  border-right: var(--sl-arrow-width) solid transparent;
  border-bottom: var(--sl-arrow-width) solid var(--sl-float-arrow-color, transparent);
  transform: translateX(-50%);
}

.sl-float.sl-float-up > .sl-float-panel::after {
  top: auto;
  bottom: -8px;
  border-bottom: 0;
  border-top: var(--sl-arrow-width) solid var(--sl-float-arrow-color, transparent);
}

.sl-tip > .sl-float-panel::after {
  filter: drop-shadow(0 -1px 0 var(--sl-border-muted));
}

.sl-tip.sl-float-up > .sl-float-panel::after {
  filter: drop-shadow(0 1px 0 var(--sl-border-muted));
}

/* Floating popovers: placeFloat() writes the two measured coordinates, the theme owns the rule that reads them (shared by tip, menu, dropdowns) */
.sl-float[data-sl-float-placed] > .sl-float-panel {
  position: fixed;
  top: var(--sl-d-float-top);
  left: var(--sl-d-float-left);
  right: auto;
  bottom: auto;
  margin: 0;
  transform: none;
  z-index: var(--sl-z-modal);
}

.sl-float.sl-is-open > .sl-float-panel {
  display: block;
  opacity: 1;
  visibility: visible;
}

/* Floating transitions: display-driven fade-in entry point */
@starting-style {
  .sl-float:not([data-sl-float-shut]):hover > .sl-float-panel,
  .sl-float:not([data-sl-float-shut]):focus-within > .sl-float-panel,
  .sl-float.sl-is-open > .sl-float-panel {
    opacity: 0;
  }
}

.sl-generates,
.sl-license {
  font-size: var(--sl-font-small);
  color: var(--sl-text-muted);
}

/* The list on its way: a skeleton holds the place of the rows, so the work area neither empties nor jumps */
.sl-skel {
  animation: sl-skel-pulse var(--sl-skel-dur) var(--sl-ease-in-out) infinite;
}

.sl-skel-cell,
.sl-skel-line {
  display: block;
  background: var(--sl-bg-subtle);
}

.sl-skel-cell {
  height: var(--sl-skel-height);
  border-radius: var(--sl-radius-1);
}

.sl-skel-line {
  height: var(--sl-skel-row-height);
  border-radius: var(--sl-radius-1);
}

.sl-skel-line-half {
  width: var(--sl-skel-width);
}

@keyframes sl-skel-pulse {
  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: var(--sl-fade-disabled);
  }
}

/* Editor shell: one frame for Plain and CodeMirror; the card rail follows the state the runtime writes on the frame */
.sl-editor {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
}

/* The tab yields its words to the capsule, so the row never wraps; a reversed wrap starts the cross axis at the bottom, so flex-start sets both on the card */
.sl-editor-row {
  display: flex;
  flex-wrap: wrap-reverse;
  align-items: flex-start;
  gap: var(--sl-space-2) var(--sl-space-3);
  min-width: 0;
}

/* The tab stands one point into the card and above it, so no line parts the two and the rail runs on from the card into it */
.sl-editor-tab {
  position: relative;
  top: 1px;
  z-index: var(--sl-z-raised);
  display: inline-flex;
  align-items: center;
  gap: var(--sl-space-3);
  flex: 1 1 0%;
  min-width: 0;
  max-width: max-content;
  height: var(--sl-editor-tab-height);
  padding: 0 var(--sl-space-5);
  border: 1px solid var(--sl-border);
  border-bottom: 0;
  border-left: var(--sl-rail-width) solid var(--sl-border-strong);
  border-radius: var(--sl-radius-2) var(--sl-radius-2) 0 0;
  background: var(--sl-surface);
  color: var(--sl-text-muted);
  font-size: var(--sl-font-small);
  transition: color var(--sl-time-fast) var(--sl-ease-out), border-left-color var(--sl-time-base) var(--sl-ease-out);
}

.sl-editor-tab > span {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.sl-editor-tab > .bi {
  color: var(--sl-border-strong);
  transition: color var(--sl-time-base) var(--sl-ease-out);
}

.sl-editor:focus-within .sl-editor-tab {
  color: var(--sl-text);
}

.sl-editor:focus-within .sl-editor-tab > .bi {
  color: var(--sl-primary);
}

.sl-editor[data-dirty] .sl-editor-tab > .bi {
  color: var(--sl-warning);
}

/* The capsule rests hidden on one scrolling line, so it never pushes the tab off and makes the editor taller */
.sl-editor-pill {
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: center;
  max-width: var(--sl-capsule-max-width);
  overflow-x: auto;
  scrollbar-width: none;
  gap: var(--sl-space-1);
  margin-left: auto;
  padding: var(--sl-space-1);
  margin-bottom: var(--sl-space-1);
  border: 1px solid var(--sl-border);
  border-radius: var(--sl-radius-pill);
  background: var(--sl-bg);
  box-shadow: var(--sl-shadow-raised);
  opacity: 0;
  transform: translateY(var(--sl-space-2));
  translate: var(--sl-d-pill-x) var(--sl-d-pill-y);
  position: relative;
  z-index: var(--sl-z-raised);
  transition: opacity var(--sl-time-base) var(--sl-ease-out), transform var(--sl-time-base) var(--sl-ease-out);
  pointer-events: none;
}

.sl-editor:hover .sl-editor-pill,
.sl-editor:focus-within .sl-editor-pill,
.sl-editor[data-full] .sl-editor-pill {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.sl-editor-pill .sl-modal-act {
  flex: 0 0 auto;
  width: var(--sl-size-chip);
  height: var(--sl-size-chip);
  border-radius: var(--sl-radius-pill);
  color: var(--sl-text-muted);
}

/* A pressed act of the editor pill, a header pill whose filter narrows a Node list and the open key tip of a pager wear one tint, which shows what is on at a glance */
.sl-editor-pill .sl-modal-act[aria-pressed="true"],
.sl-editor-pill .sl-modal-act[aria-expanded="true"],
.sl-node-head-pill.sl-is-active .sl-but,
.sl-pager-keys:hover > .sl-but-mini,
.sl-pager-keys.sl-is-open > .sl-but-mini,
.sl-code-copy:hover {
  background: var(--sl-tint);
  color: var(--sl-primary-strong);
}

/* The groups of the capsule part themselves by a line; a group the engine cannot use is taken out with its line */
.sl-editor-grp {
  display: contents;
}

.sl-editor-grp + .sl-editor-grp::before {
  content: "";
  flex: 0 0 auto;
  width: 1px;
  height: var(--sl-size-icon-xs);
  margin: 0 var(--sl-space-1);
  background: var(--sl-border-strong);
}

/* Capsule shown at once: a toolbar rests open on its line, its disabled act fades, and a group whose every act is hidden leaves with its line */
.sl-editor-pill.sl-editor-pill-open {
  margin: 0;
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.sl-editor-pill-open .sl-modal-act:disabled {
  opacity: var(--sl-fade-disabled);
  cursor: default;
}

.sl-editor-grp:not(:has(> :not([hidden]))) {
  display: none;
}

/* Every command stays in the palette, so a narrow row lets the folds go first and copy and reset next */
@media (max-width: 900px) {
  .sl-editor-wide {
    display: none;
  }
}

@media (max-width: 560px) {
  .sl-editor-mid {
    display: none;
  }
}

.sl-editor-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  border: 1px solid var(--sl-border);
  border-left: var(--sl-rail-width) solid var(--sl-border-strong);
  border-radius: 0 var(--sl-radius-2) var(--sl-radius-2) var(--sl-radius-2);
  background: var(--sl-surface);
  transition: border-left-color var(--sl-time-base) var(--sl-ease-out);
}

/* The rail is the left edge of the card itself, so it runs from the top to the bottom and no line of the card crosses it */
.sl-editor:focus-within .sl-editor-card,
.sl-editor:focus-within .sl-editor-tab {
  border-left-color: var(--sl-primary);
}

.sl-editor[data-dirty] .sl-editor-card,
.sl-editor[data-dirty] .sl-editor-tab {
  border-left-color: var(--sl-warning);
}

/* A required text left empty under CodeMirror, which the browser cannot point at with its field hidden, or an error the check found: the rail turns red */
.sl-editor[data-invalid] .sl-editor-card,
.sl-editor[data-invalid] .sl-editor-tab,
.sl-editor[data-lint="error"] .sl-editor-card,
.sl-editor[data-lint="error"] .sl-editor-tab {
  border-left-color: var(--sl-danger);
}

.sl-editor[data-invalid] .sl-editor-note,
.sl-editor-left[data-over] {
  color: var(--sl-danger);
}

/* The textarea is the engine of Plain and the field under CodeMirror: the card draws its frame and the rail its focus */
.sl-editor-text,
.sl-editor-text:hover,
.sl-editor-text:focus {
  display: block;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: var(--sl-space-3) var(--sl-space-4) var(--sl-space-3) var(--sl-space-5);
  border: 0;
  border-radius: 0 var(--sl-radius-2) 0 0;
  background: transparent;
  box-shadow: none;
  color: var(--sl-text);
  resize: vertical;
}

.sl-editor-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sl-space-1) var(--sl-space-6);
  padding: var(--sl-space-1) var(--sl-space-3) var(--sl-space-1) var(--sl-space-5);
  border-top: 1px solid var(--sl-border);
  color: var(--sl-text-muted);
  font-size: var(--sl-font-micro);
  line-height: var(--sl-line-loose);
}

.sl-editor:not([data-ready]) .sl-editor-status,
.sl-editor-status > :empty {
  display: none;
}

/* The mark of a changed text opens the comparison with the loaded one */
.sl-editor-dirty {
  display: none;
  padding: 0 var(--sl-space-2);
  border: 0;
  border-radius: var(--sl-radius-pill);
  background: var(--sl-warning-subtle);
  color: var(--sl-warning-strong);
  font: inherit;
  cursor: pointer;
}

.sl-editor[data-dirty] .sl-editor-dirty {
  display: inline-flex;
}

.sl-editor-note {
  color: var(--sl-success);
}

.sl-editor-lang {
  margin-left: auto;
}

/* The check of a template: the badge says what it found and opens the list, quiet at rest while nothing is wrong */
.sl-editor-lint {
  display: inline-flex;
  align-items: center;
  gap: var(--sl-space-2);
  margin-left: auto;
  padding: 0 var(--sl-space-3);
  border: 0;
  border-radius: var(--sl-radius-pill);
  background: var(--sl-success-subtle);
  color: var(--sl-success);
  font: inherit;
  cursor: pointer;
  opacity: var(--sl-fade-muted);
  transition: opacity var(--sl-time-base) var(--sl-ease-out);
}

/* The mark of the badge takes the size of its words, so the badge stands no taller than the status line */
.sl-editor-lint > .bi {
  font-size: inherit;
}

.sl-editor:hover .sl-editor-lint,
.sl-editor:focus-within .sl-editor-lint {
  opacity: 1;
}

.sl-editor[data-lint="warn"] .sl-editor-lint {
  opacity: 1;
  background: var(--sl-warning-subtle);
  color: var(--sl-warning-strong);
}

.sl-editor[data-lint="error"] .sl-editor-lint {
  opacity: 1;
  background: var(--sl-danger);
  color: var(--sl-on-solid);
}

.sl-editor-lint ~ .sl-editor-lang {
  margin-left: 0;
}

/* The findings under the text: a row selects its place, its button applies the fix */
.sl-editor-issues {
  max-height: var(--sl-editor-height);
  margin: 0;
  padding: var(--sl-space-1) 0;
  overflow-y: auto;
  border-top: 1px solid var(--sl-border);
  list-style: none;
  font-size: var(--sl-font-small);
}

.sl-editor-issues > li {
  display: flex;
  align-items: center;
  gap: var(--sl-space-3);
  padding: 0 var(--sl-space-3) 0 var(--sl-space-5);
}

.sl-editor-issues > li:hover {
  background: var(--sl-bg-subtle);
}

.sl-editor-issue {
  display: flex;
  flex: 1 1 auto;
  align-items: baseline;
  gap: var(--sl-space-3);
  min-width: 0;
  padding: var(--sl-space-2) 0;
  border: 0;
  background: transparent;
  color: var(--sl-text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.sl-editor-issue > small {
  margin-left: auto;
  color: var(--sl-text-muted);
  font-size: var(--sl-font-micro);
  white-space: nowrap;
}

.sl-editor-issues [data-sl-editor-tone="error"] .sl-editor-issue > .bi {
  color: var(--sl-danger);
}

.sl-editor-issues [data-sl-editor-tone="warning"] .sl-editor-issue > .bi {
  color: var(--sl-warning-strong);
}

.sl-editor-issues [data-sl-editor-tone="info"] .sl-editor-issue > .bi {
  color: var(--sl-primary);
}

/* The draft of the tab is offered above the text, never put in its place without being asked */
.sl-editor-draft {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sl-space-2) var(--sl-space-4);
  padding: var(--sl-space-2) var(--sl-space-3) var(--sl-space-2) var(--sl-space-5);
  border-bottom: 1px solid var(--sl-border);
  background: var(--sl-warning-subtle);
  color: var(--sl-warning-strong);
  font-size: var(--sl-font-small);
}

.sl-editor-draft > span {
  flex: 1 1 auto;
}

/* The preview under the text: a sandboxed frame the runtime fits to what it shows, opened from the capsule and the palette */
.sl-editor-view {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border-top: 1px solid var(--sl-border);
}

.sl-editor-view-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sl-space-2) var(--sl-space-3);
  padding: var(--sl-space-1) var(--sl-space-3) var(--sl-space-1) var(--sl-space-5);
  border-bottom: 1px solid var(--sl-border);
  color: var(--sl-text-muted);
  font-size: var(--sl-font-micro);
  line-height: var(--sl-line-loose);
}

.sl-editor-view-open {
  display: inline-flex;
  align-items: center;
  gap: var(--sl-space-2);
  margin-left: auto;
}

.sl-editor-view-frame {
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: var(--sl-d-view-height, var(--sl-editor-height));
  max-height: var(--sl-editor-max-height);
  border: 0;
  background: var(--sl-bg);
}

/* The frame page: theme ground, no floor of its own and floats held, so the runtime measures what it shows */
.sl-editor-sheet {
  min-height: 0;
  background: var(--sl-bg);
}

.sl-editor-sheet > body {
  display: flow-root;
  min-height: 0;
  margin: 0;
  padding: var(--sl-space-5);
  background: transparent;
}

/* Template variables, placed by the runtime inside the card; a variable the text already uses carries a tick */
.sl-editor-hint {
  position: absolute;
  top: var(--sl-d-hint-y);
  left: var(--sl-d-hint-x);
  z-index: var(--sl-z-popover);
  display: grid;
  grid-template-columns: max-content 1fr;
  box-sizing: border-box;
  max-width: 100%;
  max-height: var(--sl-editor-max-height);
  overflow-y: auto;
  padding: var(--sl-space-2);
  border: 1px solid var(--sl-border-strong);
  border-radius: var(--sl-radius-2);
  background: var(--sl-bg);
  box-shadow: var(--sl-shadow-float);
}

.sl-editor-hint-row {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
  align-items: baseline;
  gap: var(--sl-space-4);
  padding: var(--sl-space-2) var(--sl-space-4);
  border: 0;
  border-radius: var(--sl-radius-1);
  background: transparent;
  color: var(--sl-text-muted);
  font: inherit;
  font-size: var(--sl-font-small);
  text-align: left;
  cursor: pointer;
}

.sl-editor-hint-row code {
  color: var(--sl-primary-strong);
}

.sl-editor-hint-row[data-used] code::after {
  content: " ✓";
  color: var(--sl-success);
}

/* A pointed hint lies on the subtle ground, the chosen one on the brand colour, in the editor and in the search of a list alike */
.sl-editor-hint-row:hover,
.sl-node-hint:hover {
  background: var(--sl-bg-subtle);
}

.sl-editor-hint-row[aria-selected="true"],
.sl-node-hint[aria-selected="true"] {
  background: var(--sl-primary);
  color: var(--sl-on-solid);
}

.sl-editor-hint-row[aria-selected="true"] code,
.sl-editor-hint-row[aria-selected="true"] code::after {
  color: inherit;
}

/* Editor palette: a canon window whose bar searches the commands; the engine keys stand under the list until a search narrows it */
.sl-editor-pal .sl-editor-pal-find,
.sl-editor-pal .sl-editor-pal-find:focus {
  flex: 1 1 auto;
  min-width: 0;
  height: var(--sl-size-control);
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: var(--sl-text);
  font: inherit;
  font-size: var(--sl-font-h4);
  outline: 0;
}

.sl-editor-pal-body {
  padding: var(--sl-space-2) 0;
}

.sl-modal-body.sl-editor-pal-body > * + * {
  margin-top: 0;
}

.sl-editor-pal-cap {
  display: flex;
  align-items: center;
  gap: var(--sl-space-2);
  padding: var(--sl-space-3) var(--sl-modal-pad-x) var(--sl-space-1);
  color: var(--sl-text-muted);
  font-size: var(--sl-font-micro);
  font-weight: var(--sl-weight-semibold);
  letter-spacing: var(--sl-track-wide);
  text-transform: uppercase;
}

.sl-editor-pal-row {
  display: flex;
  align-items: center;
  gap: var(--sl-space-4);
  box-sizing: border-box;
  width: 100%;
  padding: var(--sl-space-2) var(--sl-modal-pad-x);
  border: 0;
  background: transparent;
  color: var(--sl-text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.sl-editor-pal-row[hidden],
.sl-editor-pal-keymap > [hidden] {
  display: none;
}

.sl-editor-pal-row > .bi {
  color: var(--sl-text-muted);
}

.sl-editor-pal-row:hover {
  background: var(--sl-bg-subtle);
}

/* The chosen command stands on the tint with the rail of the shell, and the focus stays in the search above it */
.sl-editor-pal-row[aria-selected="true"] {
  background: var(--sl-tint);
  box-shadow: inset var(--sl-rail-width) 0 0 var(--sl-primary);
}

.sl-editor-pal-row[aria-selected="true"] > .bi {
  color: var(--sl-primary);
}

.sl-editor-pal-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.sl-editor-pal-name b {
  color: var(--sl-primary-strong);
  font-weight: var(--sl-weight-semibold);
}

/* The last command run says so between its name and its keys, in the word of the locale the runtime writes on the row */
.sl-editor-pal-keys {
  display: inline-flex;
  align-items: center;
  gap: var(--sl-space-1);
  order: 1;
}

.sl-editor-pal-row[data-recent]::after {
  content: attr(data-recent);
  color: var(--sl-text-muted);
  font-size: var(--sl-font-micro);
}

.sl-editor-pal-empty {
  padding: var(--sl-space-6) var(--sl-modal-pad-x);
  color: var(--sl-text-muted);
  text-align: center;
}

.sl-editor-pal-help {
  padding: var(--sl-space-2) 0 var(--sl-space-4);
  border-top: 1px solid var(--sl-border);
}

.sl-editor-pal-keymap {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--sl-space-2) var(--sl-space-6);
  margin: 0;
  padding: var(--sl-space-1) var(--sl-modal-pad-x) 0;
}

.sl-editor-pal-keymap > div {
  display: flex;
  align-items: baseline;
  gap: var(--sl-space-3);
}

.sl-editor-pal-keymap dt {
  display: inline-flex;
  flex: 0 0 auto;
  gap: var(--sl-space-1);
}

.sl-editor-pal kbd {
  display: inline-block;
  padding: 0 var(--sl-space-1);
  border: 1px solid var(--sl-border-strong);
  border-radius: var(--sl-radius-1);
  background: var(--sl-surface);
  color: var(--sl-text);
  font-size: var(--sl-font-micro);
  line-height: var(--sl-line-normal);
}

/* Editor comparison: the loaded text against the present one, in one text or in two columns */
.sl-editor-diff-modes {
  display: inline-flex;
  gap: var(--sl-space-1);
  padding: var(--sl-space-1);
  border-radius: var(--sl-radius-2);
  background: var(--sl-bg-subtle);
}

.sl-editor-diff-mode {
  display: inline-flex;
  align-items: center;
  gap: var(--sl-space-2);
  height: var(--sl-size-chip);
  padding: 0 var(--sl-space-3);
  border: 0;
  border-radius: var(--sl-radius-2);
  background: transparent;
  color: var(--sl-text-muted);
  font: inherit;
  font-size: var(--sl-font-small);
  cursor: pointer;
}

.sl-editor-diff-count {
  display: inline-flex;
  gap: var(--sl-space-3);
  margin-left: auto;
  font-family: var(--sl-face-mono);
  font-size: var(--sl-font-small);
}

.sl-editor-diff-ins {
  color: var(--sl-success);
}

.sl-editor-diff-del {
  color: var(--sl-danger);
}

.sl-editor-diff-body {
  display: flex;
  flex-direction: column;
  gap: var(--sl-space-4);
}

.sl-modal-body.sl-editor-diff-body > * + * {
  margin-top: 0;
}

.sl-editor-diff-same {
  display: flex;
  align-items: center;
  gap: var(--sl-space-3);
  margin: 0;
  color: var(--sl-success);
}

.sl-editor-diff-code {
  padding: var(--sl-space-4) var(--sl-space-5);
  border: 1px solid var(--sl-border);
  border-radius: var(--sl-radius-2);
  background: var(--sl-surface);
  color: var(--sl-text-muted);
  font-family: var(--sl-face-mono);
  font-size: var(--sl-font-small);
  line-height: var(--sl-line-loose);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.sl-editor-diff-code del {
  border-radius: var(--sl-radius-1);
  color: var(--sl-danger);
  text-decoration: line-through;
}

.sl-editor-diff-code ins {
  border-radius: var(--sl-radius-1);
  background: var(--sl-success-subtle);
  color: var(--sl-success);
  text-decoration: none;
}

.sl-editor-diff-side {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--sl-space-5);
}

.sl-editor-diff-cap {
  margin: 0 0 var(--sl-space-2);
  color: var(--sl-text-muted);
  font-size: var(--sl-font-small);
  font-weight: var(--sl-weight-semibold);
}

@media (max-width: 560px) {
  .sl-editor-diff-side {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* The panel keeps its own tight spacing: the canon body would give it the padding of a reading window and thin the grid out */
dialog.sl-editor-emoji-panel {
  font-family: inherit;
  font-size: var(--sl-font-small);
  max-height: var(--sl-emoji-max-height);
}

.sl-editor-emoji-panel button,
.sl-editor-emoji-panel input {
  font-family: inherit;
}

.sl-editor-emoji-search {
  margin: var(--sl-space-3) var(--sl-space-3) 0;
  width: calc(100% - var(--sl-size-icon-xs));
  background: var(--sl-field-bg);
  border: 1px solid var(--sl-field-border);
  border-radius: var(--sl-field-radius);
  box-shadow: var(--sl-field-shadow);
  box-sizing: border-box;
  color: var(--sl-text);
  font-size: var(--sl-font-small);
  height: var(--sl-size-icon-lg);
  padding: 0 var(--sl-space-3);
}

.sl-editor-emoji-tabs {
  display: flex;
  gap: var(--sl-space-2);
  margin: var(--sl-space-3) var(--sl-space-3);
  overflow: hidden;
}

/* Emoji tabs reuse the popup button pair: secondary look idle, primary (blue) when active */
.sl-editor-emoji-tab {
  background: var(--sl-surface);
  border: 1px solid var(--sl-border);
  border-radius: var(--sl-radius-1);
  color: var(--sl-text);
  cursor: pointer;
  flex: 0 0 auto;
  font-size: var(--sl-font-small);
  height: var(--sl-size-icon-lg);
  padding: 0 var(--sl-space-5);
}

.sl-editor-emoji-tab:hover {
  border-color: var(--sl-border-strong);
}

.sl-editor-emoji-tab.active {
  background: var(--sl-primary);
  border-color: var(--sl-primary);
  color: var(--sl-on-solid);
}

.sl-editor-emoji-tab.active:hover {
  background: var(--sl-primary-strong);
}

.sl-editor-emoji-grid {
  display: grid;
  gap: var(--sl-space-2);
  padding: 0 var(--sl-space-3) var(--sl-space-3);
  grid-template-columns: repeat(auto-fill, minmax(32px, 1fr));
  max-height: var(--sl-emoji-grid-height);
  overflow: auto;
}

.sl-editor-emoji-item {
  background: var(--sl-bg);
  border: 1px solid transparent;
  border-radius: var(--sl-radius-1);
  cursor: pointer;
  font-size: var(--sl-font-h2);
  height: var(--sl-size-icon-lg);
  line-height: 30px;
  padding: 0;
  text-align: center;
  width: var(--sl-size-icon-lg);
}

.sl-editor-emoji-item:hover,
.sl-editor-emoji-item:focus {
  background: var(--sl-surface);
  border-color: var(--sl-border-strong);
}

.sl-editor-emoji-empty {
  color: var(--sl-text-muted);
  grid-column: 1 / -1;
  padding: var(--sl-space-5) var(--sl-space-2);
}

.sl-editor-emoji-panel.sl-is-full .sl-editor-emoji-grid {
  max-height: calc(100vh - var(--sl-emoji-full-gap));
}

.sl-editor-emoji-tab:focus-visible,
.sl-editor-emoji-item:focus-visible {
  box-shadow: 0 0 0 var(--sl-ring-width) var(--sl-field-ring);
  outline: 0;
}

.sl-editor-emoji-search:focus {
  border-color: var(--sl-primary);
  box-shadow: 0 0 0 var(--sl-ring-width) var(--sl-field-ring);
  outline: 0;
}

/* The full screen stands on the layer of a window, so a non-modal window of the editor still opens above it */
.sl-editor[data-full] {
  position: fixed;
  inset: 0;
  z-index: var(--sl-z-modal);
  padding: var(--sl-space-5);
  background: var(--sl-bg);
}

.sl-editor[data-full] .sl-editor-card,
.sl-editor[data-full] .sl-editor-text,
.sl-editor[data-full] .cm-editor {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
}

.sl-editor[data-full] .sl-editor-text {
  resize: none;
}

/* On the whole screen the preview stands beside the text, each taking half, and under it below the middle step */
.sl-editor[data-full][data-view] .sl-editor-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto auto;
}

.sl-editor[data-full][data-view] .sl-editor-card > * {
  grid-column: 1 / -1;
}

.sl-editor[data-full][data-view] .sl-editor-text,
.sl-editor[data-full][data-view] .cm-editor {
  grid-area: 2 / 1;
}

.sl-editor[data-full][data-view] .sl-editor-view {
  grid-area: 2 / 2;
  min-height: 0;
  border-top: 0;
  border-left: 1px solid var(--sl-border);
}

.sl-editor[data-full][data-view] .sl-editor-issues {
  grid-row: 3;
}

.sl-editor[data-full][data-view] .sl-editor-status {
  grid-row: 4;
}

.sl-editor[data-full] .sl-editor-view-frame {
  flex: 1 1 auto;
  height: auto;
  max-height: none;
}

@media (max-width: 900px) {
  .sl-editor[data-full][data-view] .sl-editor-card {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr) minmax(0, 1fr) auto auto;
  }

  .sl-editor[data-full][data-view] .sl-editor-view {
    grid-area: 3 / 1;
    border-top: 1px solid var(--sl-border);
    border-left: 0;
  }

  .sl-editor[data-full][data-view] .sl-editor-issues {
    grid-row: 4;
  }

  .sl-editor[data-full][data-view] .sl-editor-status {
    grid-row: 5;
  }
}

.sl-editor[data-full] .cm-editor .cm-scroller {
  max-height: none;
}

/* CodeMirror as a text editor of the site: these rules colour the tok-* classes classHighlighter writes */
.sl-editor .cm-editor {
  padding-left: var(--sl-rail-width);
  background: transparent;
  color: var(--sl-text);
}

.sl-editor .cm-editor .cm-scroller {
  max-height: var(--sl-editor-max-height);
  font-family: inherit;
  line-height: var(--sl-line-normal);
}

/* CodeMirror keeps the measured height of the field it replaces; the floor stands on text and gutters, so the gutter reaches the bottom */
.sl-editor .cm-editor .cm-content,
.sl-editor .cm-editor .cm-gutter {
  min-height: var(--sl-d-editor-floor, var(--sl-editor-height));
}

.sl-editor .cm-editor .cm-content {
  padding: var(--sl-space-3) 0;
}

.sl-editor .cm-editor .cm-line {
  padding: 0 var(--sl-space-4);
}

.sl-editor .cm-editor .cm-cursor {
  border-left-color: var(--sl-primary);
}

.sl-editor .cm-editor .cm-gutters {
  border-right: 0;
  background: transparent;
  color: var(--sl-text-muted);
}

/* The fold marks of a text come up under the hand, as the capsule does */
.sl-editor .cm-editor .cm-foldGutter {
  opacity: 0;
  transition: opacity var(--sl-time-base) var(--sl-ease-out);
}

.sl-editor:hover .cm-editor .cm-foldGutter,
.sl-editor:focus-within .cm-editor .cm-foldGutter {
  opacity: 1;
}

.sl-editor .cm-editor .cm-foldGutter .cm-gutterElement {
  padding: 0 var(--sl-space-1);
}

.sl-editor .cm-editor .cm-activeLine,
.sl-editor .cm-editor .cm-activeLineGutter {
  background: transparent;
}

.sl-editor .cm-editor.cm-focused .cm-activeLine {
  background: var(--sl-bg);
}

.sl-editor .cm-editor .cm-selectionLayer .cm-selectionBackground,
.sl-editor .cm-editor.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground,
.sl-editor .cm-editor .cm-content ::selection,
.sl-editor .cm-editor .cm-searchMatch-selected {
  background: var(--sl-tint-strong);
}

.sl-editor .cm-editor .cm-selectionMatch {
  background: var(--sl-primary-subtle);
}

.sl-editor .cm-editor.cm-focused .cm-matchingBracket {
  background: var(--sl-success-subtle);
  color: var(--sl-success);
  outline: 0;
}

.sl-editor .cm-editor .cm-searchMatch {
  background: var(--sl-warning-subtle);
  outline: 1px solid var(--sl-warning);
}

.sl-editor .cm-editor .cm-foldPlaceholder {
  margin: 0 var(--sl-space-1);
  padding: 0 var(--sl-space-2);
  border: 1px solid var(--sl-border);
  border-radius: var(--sl-radius-1);
  background: var(--sl-bg-subtle);
  color: var(--sl-text-muted);
}

/* Markdown tones; the HTML inside a text keeps the colours of code */
.sl-editor .cm-editor .tok-heading,
.sl-editor .cm-editor .tok-link,
.sl-editor .cm-editor .tok-typeName,
.sl-editor .cm-editor .tok-className,
.hljs-name,
.hljs-tag,
.hljs-title,
.hljs-section,
.hljs-selector-id,
.hljs-selector-class,
.hljs-built_in,
.hljs-type {
  color: var(--sl-primary-strong);
}

.sl-editor .cm-editor .tok-heading,
.sl-editor .cm-editor .tok-strong,
.hljs-strong {
  font-weight: var(--sl-weight-bold);
}

.sl-editor .cm-editor .tok-propertyName,
.hljs-attr,
.hljs-attribute,
.hljs-property,
.hljs-variable,
.hljs-template-variable {
  color: var(--sl-accent);
}

.sl-editor .cm-editor .tok-string,
.sl-editor .cm-editor .tok-string2,
.hljs-string,
.hljs-doctag,
.hljs-regexp,
.hljs-addition {
  color: var(--sl-success);
}

.sl-editor .cm-editor .tok-keyword,
.hljs-keyword,
.hljs-selector-tag,
.hljs-deletion {
  color: var(--sl-danger);
}

.sl-editor .cm-editor .tok-number,
.sl-editor .cm-editor .tok-atom,
.sl-editor .cm-editor .tok-bool,
.hljs-number,
.hljs-literal,
.hljs-symbol,
.hljs-bullet {
  color: var(--sl-warning-strong);
}

.sl-editor .cm-editor .tok-url,
.sl-editor .cm-editor .tok-labelName,
.sl-editor .cm-editor .tok-punctuation,
.sl-editor .cm-editor .tok-operator,
.sl-editor .cm-editor .tok-meta,
.sl-editor .cm-editor .tok-comment,
.hljs-comment,
.hljs-quote,
.hljs-meta,
.hljs-meta .hljs-keyword,
.hljs-punctuation,
.hljs-operator,
.hljs-link {
  color: var(--sl-text-muted);
}

.sl-editor .cm-editor .tok-comment,
.sl-editor .cm-editor .tok-emphasis,
.hljs-comment,
.hljs-quote,
.hljs-emphasis {
  font-style: italic;
}

.sl-editor .cm-editor .tok-invalid {
  color: var(--sl-danger);
  text-decoration: underline wavy;
}

/* A variable of the template in the code: the word the parser fills in stands on the tint over the tones of the grammar */
.sl-editor .cm-editor .sl-editor-var {
  border-radius: var(--sl-radius-1);
  background: var(--sl-tint);
  box-shadow: inset 0 0 0 1px var(--sl-tint-strong);
  color: var(--sl-primary-strong);
}

.sl-editor .cm-editor .sl-editor-var * {
  color: inherit;
}

/* The search panel and the tooltips speak the field and the popover of the theme */
.sl-editor .cm-editor .cm-tooltip {
  overflow: hidden;
  border: 1px solid var(--sl-border-strong);
  border-radius: var(--sl-radius-2);
  background: var(--sl-bg);
  box-shadow: var(--sl-shadow-float);
}

.sl-editor .cm-editor .cm-panels {
  border-color: var(--sl-border);
  background: var(--sl-surface);
  color: var(--sl-text);
}

.sl-editor .cm-editor .cm-panel.cm-search {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sl-space-2) var(--sl-space-3);
  padding: var(--sl-space-3) var(--sl-space-8) var(--sl-space-3) var(--sl-space-4);
  font-size: var(--sl-font-small);
}

.sl-editor .cm-editor .cm-panel.cm-search br {
  display: none;
}

.sl-editor .cm-editor .cm-panel.cm-search label {
  display: inline-flex;
  align-items: center;
  gap: var(--sl-space-2);
  font-size: var(--sl-font-small);
}

/* A form row stretches every input to its width, which the search fields of the panel must not take */
.sl-editor .cm-editor .cm-textfield {
  width: auto;
  height: var(--sl-size-control);
  margin: 0;
  padding: 0 var(--sl-space-3);
  border: 1px solid var(--sl-field-border);
  border-radius: var(--sl-field-radius);
  background: var(--sl-field-bg);
  color: var(--sl-text);
  font: inherit;
}

.sl-editor .cm-editor .cm-textfield:focus {
  border-color: var(--sl-primary);
  outline: 0;
  box-shadow: var(--sl-shadow-focus);
}

.sl-editor .cm-editor .cm-button {
  height: var(--sl-size-control);
  margin: 0;
  padding: 0 var(--sl-space-4);
  border: 1px solid var(--sl-border);
  border-radius: var(--sl-radius-1);
  background: var(--sl-bg);
  color: var(--sl-text);
  font: inherit;
  cursor: pointer;
}

.sl-editor .cm-editor .cm-button:hover {
  border-color: var(--sl-border-strong);
}

.sl-editor .cm-editor .cm-panel button[name="close"] {
  top: 50%;
  right: var(--sl-space-3);
  width: var(--sl-size-control);
  height: var(--sl-size-control);
  border-radius: var(--sl-radius-1);
  color: var(--sl-text-muted);
  font-size: var(--sl-font-h3);
  transform: translateY(-50%);
  cursor: pointer;
}

.sl-editor .cm-editor .cm-panel button[name="close"]:hover {
  background: var(--sl-scrim-subtle);
  color: var(--sl-danger);
}

/* The marks of the check in CodeMirror: a wavy line under the place, a dot in its gutter, the fix in the tooltip */
.sl-editor .cm-editor .cm-lintRange {
  background-image: none;
  text-decoration: underline wavy;
  text-decoration-skip-ink: none;
  text-underline-offset: var(--sl-space-1);
}

.sl-editor .cm-editor .cm-lintRange-error {
  text-decoration-color: var(--sl-danger);
}

.sl-editor .cm-editor .cm-lintRange-warning {
  text-decoration-color: var(--sl-warning);
}

.sl-editor .cm-editor .cm-lintRange-info {
  text-decoration-color: var(--sl-primary);
}

.sl-editor .cm-editor .cm-gutter-lint .cm-gutterElement {
  padding: 0 var(--sl-space-1) 0 var(--sl-space-2);
}

.sl-editor .cm-editor .cm-lint-marker {
  content: normal;
  display: inline-block;
  width: var(--sl-space-3);
  height: var(--sl-space-3);
  border-radius: var(--sl-radius-circle);
  vertical-align: middle;
}

.sl-editor .cm-editor .cm-lint-marker-error {
  background: var(--sl-danger);
}

.sl-editor .cm-editor .cm-lint-marker-warning {
  background: var(--sl-warning);
}

.sl-editor .cm-editor .cm-lint-marker-info {
  background: var(--sl-primary);
}

.sl-editor .cm-editor .cm-tooltip-lint {
  padding: 0;
}

.sl-editor .cm-editor .cm-diagnostic {
  padding: var(--sl-space-2) var(--sl-space-4);
  border-left: var(--sl-rail-width) solid var(--sl-primary);
  font-size: var(--sl-font-small);
  line-height: var(--sl-line-normal);
}

.sl-editor .cm-editor .cm-diagnostic-error {
  border-left-color: var(--sl-danger);
}

.sl-editor .cm-editor .cm-diagnostic-warning {
  border-left-color: var(--sl-warning);
}

/* The fix of one click, in the tooltip of CodeMirror and in the list of findings alike */
.sl-editor-fix,
.sl-editor .cm-editor .cm-diagnosticAction {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: var(--sl-space-2);
  margin-left: var(--sl-space-4);
  padding: var(--sl-space-1) var(--sl-space-3);
  border: 0;
  border-radius: var(--sl-radius-1);
  background: var(--sl-primary);
  color: var(--sl-on-solid);
  font: inherit;
  font-size: var(--sl-font-micro);
  cursor: pointer;
}

.sl-preview {
  border: 1px solid var(--sl-border);
  border-radius: var(--sl-radius-2);
  background: var(--sl-bg);
  margin-bottom: var(--sl-space-5);
  overflow: hidden;
}

.sl-preview-head {
  padding: var(--sl-space-5) var(--sl-space-6);
  background: var(--sl-surface);
  border-bottom: 1px solid var(--sl-border);
  font-weight: var(--sl-weight-bold);
  color: var(--sl-text-strong);
}

.sl-preview-body {
  display: grid;
  gap: 0;
}

.sl-preview-title,
.sl-preview-section {
  padding: var(--sl-space-5) var(--sl-space-6);
  background: var(--sl-bg);
  border-bottom: 1px solid var(--sl-border-subtle);
  line-height: var(--sl-line-normal);
}

.sl-preview-body > :last-child {
  border-bottom: 0;
}

.sl-preview-title {
  font-weight: var(--sl-weight-bold);
  color: var(--sl-text-strong);
}

.sl-preview-meta {
  background-color: var(--sl-surface);
  color: var(--sl-text-muted);
}

.sl-preview-meta > div + div {
  margin-top: var(--sl-space-3);
}

.sl-preview-admin-title,
.sl-preview-field-primary,
.sl-preview-field-secondary,
.sl-preview-field-meta {
  min-width: 0;
}

.sl-vote-list {
  list-style: none;
  margin: var(--sl-space-7) 0;
  padding: 0;
}

/* Voting: interactive option rows with hover, selected highlight and native accent controls */
.sl-vote-list li {
  margin: 0 calc(var(--sl-space-3) * -1) var(--sl-space-1);
  padding: var(--sl-space-2) var(--sl-space-3);
  border-radius: var(--sl-radius-2);
  transition: background-color var(--sl-time-fast) var(--sl-ease-out);
}

.sl-vote-list li:hover {
  background: var(--sl-bg-subtle);
}

.sl-vote-list label {
  display: flex;
  align-items: center;
  gap: var(--sl-space-3);
  cursor: pointer;
}

.sl-vote-list input {
  flex: 0 0 auto;
  width: var(--sl-vote-width);
  height: var(--sl-vote-height);
  accent-color: var(--sl-primary-strong);
  transition: transform var(--sl-time-base) var(--sl-vote-ease);
}

.sl-vote-list input:checked {
  transform: scale(1.15);
}

.sl-vote-list input:focus-visible {
  outline: var(--sl-ring-width) solid var(--sl-ring-bg);
  outline-offset: var(--sl-ring-gap);
  border-radius: var(--sl-radius-1);
}

.sl-vote-list li:has(input:checked) {
  background: var(--sl-tint);
  color: var(--sl-text-strong);
  font-weight: var(--sl-weight-bold);
}

/* Voting: result rows — animated bar width, leader trophy, stable digits */
.sl-vote-list li:has(.sl-progress-line) {
  padding-bottom: var(--sl-space-3);
}

.sl-vote-list .sl-progress-info .bi-trophy-fill {
  display: none;
  margin-right: var(--sl-space-2);
  color: var(--sl-warning);
}

.sl-vote-list li.sl-lead .sl-progress-info .bi-trophy-fill {
  display: inline;
}

.sl-vote-list .sl-progress-info .sl-pull-right b {
  font-variant-numeric: tabular-nums;
}

/* Voting: corner tool cluster (admin gear menu + live indicator); inside a sidebar block it rides up to the block title line */
.sl-vote {
  position: relative;
}

.sl-vote-tools,
.sl-block-tools {
  position: absolute;
  top: 0.5px;
  right: 0;
  z-index: var(--sl-z-overlay);
  display: flex;
  align-items: center;
  gap: var(--sl-space-3);
}

.sl-block .sl-vote {
  position: static;
}

/* The tools of a block stand in its head at the right, on the padding of the block: the gear of its administrator, and the live chip of a poll */
.sl-block .sl-vote-tools,
.sl-block-tools {
  top: var(--sl-space-6);
  right: var(--sl-space-6);
  min-height: var(--sl-size-chip);
}

/* A block whose content keeps its own live chip in that corner, as the users online do, sets its gear left of the chip at the gap of the tools */
.sl-block:has(.sl-live-tools) > .sl-block-tools {
  margin-right: calc(var(--sl-size-chip) + var(--sl-space-3));
}

/* Voting status glyph: success play while active, warning stop when ended; bare inline glyph shares .sl-tip-icon typography so it pixel-snaps like the info tip */
.sl-vote-live {
  margin-right: 0;
}

.sl-vote-live-ico {
  display: inline-flex;
  align-items: center;
  border-radius: var(--sl-radius-circle);
  color: var(--sl-success);
  font-size: var(--sl-size-icon-xs);
  line-height: 1;
  animation: sl-live-pulse var(--sl-pulse-dur) var(--sl-ease-out) infinite;
}

.sl-vote-end .sl-vote-live-ico {
  color: var(--sl-warning);
  animation: none;
}

.sl-vote-live .sl-float-panel {
  left: auto;
  right: 0;
}

/* Inline list marker before the info tip */
.sl-vote-mark {
  margin: 0 var(--sl-space-2) 0 0;
  vertical-align: middle;
}

/* List cells: inline-middle sits ~1.5px under the optical text axis — lift the icon pair onto it */
.sl-table-cell .sl-vote-mark,
.sl-table-cell > .sl-tip {
  position: relative;
  top: -1.5px;
}

.sl-vote[data-sl-vote-live] .sl-vote-title {
  padding-right: var(--sl-space-11);
}

.sl-block .sl-vote[data-sl-vote-live] .sl-vote-title {
  padding-right: 0;
}

@keyframes sl-live-pulse {
  0% {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--sl-success) var(--sl-pulse-mix), transparent);
  }

  70% {
    box-shadow: 0 0 0 var(--sl-pulse-ring) transparent;
  }

  100% {
    box-shadow: 0 0 0 0 transparent;
  }
}

/* The live dot - the user block, the profile, a forum section with new messages - pulses on the compositor: the dot
   over a ring of the same box, its border transparent, that grows by transform and fades by opacity to the reach of
   sl-live-pulse, the box plus twice --sl-pulse-ring. On box-shadow sixteen forum dots cost 66 points of the GPU.
   A translucent chip (sl-live-icon) keeps sl-live-pulse, since a ring under it would darken it */
.sl-forum-mark-new::before,
.sl-forum-mark-new::after,
.sl-profile-status::before,
.sl-profile-status::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--sl-radius-circle);
}

.sl-forum-mark-new::before,
.sl-forum-mark-new::after,
.sl-live-avatar::before,
.sl-live-avatar::after {
  border: var(--sl-live-dot-border) solid transparent;
}

.sl-profile-status::before,
.sl-profile-status::after {
  border: var(--sl-profile-dot-border) solid transparent;
}

.sl-forum-mark-new::before,
.sl-live-avatar::before {
  background: color-mix(in srgb, var(--sl-success) var(--sl-pulse-mix), transparent);
  animation: sl-live-ring var(--sl-pulse-dur) var(--sl-ease-out) infinite;
}

.sl-profile-status::before {
  background: color-mix(in srgb, var(--sl-success) var(--sl-pulse-mix), transparent);
  animation: sl-profile-ring var(--sl-pulse-dur) var(--sl-ease-out) infinite;
}

.sl-forum-mark-new::after,
.sl-live-avatar::after,
.sl-profile-status::after {
  border-color: var(--sl-bg);
  background: var(--sl-success);
}

/* 16px of the live dot with its border to 32px */
@keyframes sl-live-ring {
  0% {
    transform: scale(0.97);
    opacity: 1;
  }

  70%,
  100% {
    transform: scale(2);
    opacity: 0;
  }
}

/* 22px of the profile dot with its border to 38px */
@keyframes sl-profile-ring {
  0% {
    transform: scale(0.97);
    opacity: 1;
  }

  70%,
  100% {
    transform: scale(1.73);
    opacity: 0;
  }
}

.sl-vote-title {
  font-weight: var(--sl-weight-bold);
  font-size: inherit;
  margin: 0 0 var(--sl-space-7) 0;
}

.sl-vote-links {
  margin-top: var(--sl-space-5);
  margin-bottom: calc(var(--sl-space-3) * -1);
  font-size: var(--sl-font-small);
}

.sl-vote-links a {
  margin-right: var(--sl-space-7);
}

.sl-vote-actions {
  display: inline-block;
}

.sl-vote-actions-center {
  display: block;
  text-align: center;
}

.sl-vote-links-center {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sl-space-3);
}

.sl-vote-links-center a {
  margin-right: 0;
}

.sl-progress-line {
  box-sizing: content-box;
  width: 100%;
  height: var(--sl-progress-height);
  background: var(--sl-progress-bg);
  border: 1px solid var(--sl-progress-border);
  border-radius: var(--sl-progress-radius);
}

.sl-progress-line div {
  box-sizing: content-box;
  height: calc(var(--sl-progress-height) - 1px - 1px);
  border-radius: calc(var(--sl-progress-radius) - 1px);
  overflow: hidden;
  text-indent: -9999px;
  box-shadow: 0 0 var(--sl-space-4) color-mix(in srgb, currentColor var(--sl-gauge-mix), transparent);
  transition: width var(--sl-time-slow) var(--sl-ease-out);
}

.sl-progress-1 div {
  border: 1px solid var(--sl-progress-1);
  color: var(--sl-progress-1);
  background: var(--sl-grad-progress-1);
}

.sl-progress-2 div {
  border: 1px solid var(--sl-progress-2);
  color: var(--sl-progress-2);
  background: var(--sl-grad-progress-2);
}

.sl-progress-3 div {
  border: 1px solid var(--sl-progress-3);
  color: var(--sl-progress-3);
  background: var(--sl-grad-progress-3);
}

.sl-progress-4 div {
  border: 1px solid var(--sl-progress-4);
  color: var(--sl-progress-4);
  background: var(--sl-grad-progress-4);
}

.sl-progress-5 div {
  border: 1px solid var(--sl-progress-5);
  color: var(--sl-progress-5);
  background: var(--sl-grad-progress-5);
}

.sl-vote-list .sl-progress-line {
  margin: var(--sl-space-3) 0 var(--sl-space-5) 0;
}

.sl-search-line .sl-pull-right img {
  vertical-align: middle;
  margin-left: var(--sl-space-2);
}

/* Search module: one-row query panel */
.sl-search-panel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sl-space-3);
  margin: 0 0 var(--sl-space-8);
  padding: var(--sl-space-6) var(--sl-space-6);
  background: var(--sl-surface);
  border: 1px solid var(--sl-border);
  border-radius: var(--sl-radius-3);
}
.sl-search-panel input.sl-field {
  flex: 1 1 240px;
  min-width: var(--sl-search-min-width);
}

/* Search module: result rows (divider list with breadcrumbs, title, snippet, chips) */
.sl-search-line {
  padding: var(--sl-space-6) 0;
}
.sl-search-line + .sl-search-line {
  border-top: 1px solid var(--sl-border);
}
.sl-search-line .sl-category-nav {
  margin: 0 0 var(--sl-space-2);
  gap: var(--sl-space-3);
}
.sl-sr-snip {
  margin: 0 0 var(--sl-space-4);
  line-height: var(--sl-line-loose);
  color: var(--sl-text-muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.sl-search-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sl-space-3);
}

.sl-changelog {
  color: var(--sl-text);
  max-width: var(--sl-changelog-width);
  margin: 0 auto;
}

.sl-changelog-filter {
  background: var(--sl-bg);
  border: 1px solid var(--sl-border);
  border-radius: var(--sl-radius-2);
  padding: var(--sl-space-7);
  margin-bottom: var(--sl-space-7);
  box-shadow: var(--sl-card-shadow);
}

.sl-changelog-filter h2 {
  margin: 0 0 var(--sl-space-6) 0;
  font-size: var(--sl-font-h4);
  font-weight: var(--sl-weight-semibold);
  color: var(--sl-text);
}

.sl-changelog-filter-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sl-space-6);
  margin-bottom: var(--sl-space-6);
}

.sl-changelog-filter-field {
  display: flex;
  flex-direction: column;
}

.sl-changelog-filter-top {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sl-space-6);
  align-items: flex-end;
  margin-bottom: var(--sl-space-6);
}

.sl-changelog-filter-top .sl-changelog-filter-field {
  flex: 1 1 320px;
}

.sl-changelog-filter-field label {
  font-size: var(--sl-font-body);
  font-weight: var(--sl-weight-medium);
  margin-bottom: var(--sl-space-2);
  color: var(--sl-text-muted);
}

.sl-changelog-filter-field input {
  width: 100%;
}

.sl-changelog-filter-actions {
  display: flex;
  gap: var(--sl-space-4);
  margin-left: auto;
}

.sl-changelog-results {
  background: var(--sl-bg-subtle);
  border: 1px solid var(--sl-border);
  border-radius: var(--sl-radius-2);
  padding: var(--sl-space-6) var(--sl-space-7);
  margin-bottom: var(--sl-space-7);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.sl-changelog-results-info {
  font-size: var(--sl-font-body);
  color: var(--sl-text-muted);
}

.sl-changelog-results-info strong {
  color: var(--sl-text);
  font-weight: var(--sl-weight-semibold);
}

.sl-changelog-commits {
  background: var(--sl-bg);
  border: 1px solid var(--sl-border);
  border-radius: var(--sl-radius-2);
  overflow: hidden;
  margin-bottom: var(--sl-space-7);
  box-shadow: var(--sl-shadow-xs);
}

.sl-changelog-date-header {
  background: var(--sl-changelog-date-bg);
  color: var(--sl-text-strong);
  padding: var(--sl-space-5) var(--sl-space-7);
  font-weight: var(--sl-weight-semibold);
  font-size: var(--sl-font-h4);
  border-bottom: 1px solid var(--sl-border);
}

.sl-changelog-commit {
  padding: var(--sl-space-7);
  border-bottom: 1px solid var(--sl-border);
  transition: background-color var(--sl-time-base);
}

.sl-changelog-commit:last-child {
  border-bottom: none;
}

.sl-changelog-commit:hover {
  background-color: var(--sl-surface);
}

.sl-changelog-commit-alt {
  background: var(--sl-surface);
}

.sl-changelog-commit-header {
  font-size: var(--sl-font-h4);
  margin-bottom: var(--sl-space-4);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sl-space-4);
}

.sl-changelog-commit-header strong {
  color: var(--sl-text);
  font-weight: var(--sl-weight-semibold);
}

.sl-changelog-commit-header code {
  background: var(--sl-text);
  color: var(--sl-warning);
  padding: var(--sl-space-2) var(--sl-space-3);
  border-radius: var(--sl-radius-1);
}

.sl-changelog-commit-meta {
  font-size: var(--sl-font-small);
  color: var(--sl-text-muted);
  margin-bottom: var(--sl-space-5);
  padding-left: var(--sl-space-1);
}

.sl-changelog-commit-meta strong {
  font-weight: var(--sl-weight-medium);
  color: var(--sl-text);
}

.sl-changelog-commit-body {
  background: var(--sl-bg-subtle);
  border-left: var(--sl-changelog-body-border) solid var(--sl-primary);
  padding: var(--sl-space-5) var(--sl-space-6);
  margin: var(--sl-space-5) 0;
  border-radius: var(--sl-radius-1);
  font-size: var(--sl-font-body);
  line-height: var(--sl-line-loose);
}

.sl-changelog-commit-body code {
  background: var(--sl-bg);
  border: 1px solid var(--sl-border);
  padding: var(--sl-space-1) var(--sl-space-3);
  border-radius: var(--sl-radius-1);
  font-size: var(--sl-font-small);
  color: var(--sl-warning);
}

.sl-changelog-commit-stats {
  font-size: var(--sl-font-small);
  padding: var(--sl-space-4) 0;
  border-top: 1px solid var(--sl-border);
  margin-top: var(--sl-space-5);
}

.sl-changelog-commit-stats strong {
  font-weight: var(--sl-weight-medium);
}

.sl-changelog-commit-stats .sl-changelog-add {
  color: var(--sl-success);
  font-weight: var(--sl-weight-semibold);
}

.sl-changelog-commit-stats .sl-changelog-del {
  color: var(--sl-danger);
  font-weight: var(--sl-weight-semibold);
}

.sl-changelog-commit-files {
  margin-top: var(--sl-space-4);
  background: var(--sl-surface);
  border-radius: var(--sl-radius-1);
  padding: var(--sl-space-4);
  font-size: var(--sl-font-small);
  max-height: var(--sl-changelog-files-height);
  overflow-y: auto;
}

.sl-changelog-commit-files div {
  padding: var(--sl-space-2) 0;
  line-height: var(--sl-line-normal);
}

.sl-changelog-commit-files .sl-changelog-add,
.sl-changelog-commit-files .sl-changelog-del {
  display: inline-block;
  width: var(--sl-changelog-stat-width);
  text-align: right;
  font-weight: var(--sl-weight-semibold);
}

.sl-changelog-pagination {
  margin: var(--sl-space-7) 0;
  text-align: center;
}

@media (max-width: 768px) {
  .sl-changelog-filter-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .sl-changelog-filter-grid
    .sl-changelog-filter-field:last-child:nth-child(odd) {
    grid-column: span 2;
  }

  .sl-changelog-results {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sl-space-4);
  }

  .sl-changelog-commit-header {
    font-size: var(--sl-font-body);
  }
}

/* Buttons: base pill component and gradient variants */
/* The icon and the label of a button are flex items, and a flex row drops the space between them: the gap is that space */
.sl-but {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sl-space-2);
  vertical-align: middle;
  white-space: nowrap;
  padding: var(--sl-space-2) var(--sl-space-6);
  margin: 0 var(--sl-space-2) 0 0;
  line-height: 1;
  height: var(--sl-btn-height);
  border-radius: var(--sl-radius-pill);
  cursor: pointer;
  font-size: var(--sl-font-body);
  font-weight: var(--sl-weight-normal);
  box-sizing: border-box;
  text-decoration: none;
  border: 0;
  -webkit-appearance: none;
  appearance: none;
  box-shadow: var(--sl-btn-shadow);
  transition:
    opacity var(--sl-time-base) var(--sl-ease-out),
    box-shadow var(--sl-time-base) var(--sl-ease-out);
  color: var(--sl-btn-text);
  background: var(--sl-btn-bg);
  background-clip: padding-box;
  text-shadow: 0 1px 0 color-mix(in srgb, var(--sl-on-solid) var(--sl-btn-mix), transparent);
}

.sl-but:hover {
  color: var(--sl-primary-strong);
  opacity: var(--sl-fade-subtle);
}

.sl-but:active {
  transform: scale(0.96);
}

.sl-dimmed.sl-but:hover {
  cursor: not-allowed;
  opacity: var(--sl-fade-muted);
}

/* Buttons: one whose htmx request is on its way takes no repeat click */
.sl-but.htmx-request {
  pointer-events: none;
}

/* Blocks: positioning anchors for corner tool clusters */
.sl-block {
  position: relative;
  background: var(--sl-surface);
  display: flow-root;
  padding: var(--sl-space-6);
  border-radius: var(--sl-radius-2);
  margin-bottom: var(--sl-space-8);
  border: 1px solid var(--sl-border-subtle);
  box-shadow: var(--sl-shadow-xs);
}

.sl-block-content {
  line-height: var(--sl-line-normal);
}

.sl-block-content > li > a {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#sidebar .sl-block:last-child {
  margin-bottom: 0;
}

/* Modules: navigation */
.sl-block-modules {
  display: flex;
  flex-direction: column;
  gap: var(--sl-space-2);
}

.sl-block-modules .sl-module {
  display: block;
  padding: var(--sl-space-2) var(--sl-space-1);
}

.sl-block-mod-section {
  margin-top: var(--sl-space-4);
  padding-top: var(--sl-space-3);
  border-top: 1px solid var(--sl-border-subtle);
  font-size: var(--sl-font-small);
  color: var(--sl-text-muted);
}

/* Languages: flag selection */
.sl-block-flags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sl-space-3);
  align-items: center;
}

/* The flags are submit buttons of one form: the switch answers only a POST with a token in its body, which a link cannot carry */
.sl-lang {
  display: contents;
}

.sl-lang-cell {
  display: inline-flex;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
}

.sl-block-flags img {
  width: var(--sl-size-icon-md);
  height: auto;
  border: 1px solid var(--sl-border-strong);
  border-radius: var(--sl-radius-1);
}

/* User block: compact Dense Split account and audience dashboard */
.sl-user-card {
  --sl-d-user: var(--sl-primary);
  --sl-d-usrlevel: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
}

.sl-user-card .sl-live-tools { top: -34px; right: 0; }

.sl-block-user-ava {
  display: grid;
  grid-template-columns: var(--sl-avatar-width) minmax(0, 1fr) auto;
  gap: var(--sl-space-4);
  align-items: center;
  min-height: var(--sl-avatar-min-height);
  padding-bottom: var(--sl-space-5);
  border-bottom: 1px solid var(--sl-border-subtle);
}

.sl-block-user-ava .sl-live-avatar {
  box-sizing: border-box;
  display: block;
  width: var(--sl-avatar-width);
  height: var(--sl-avatar-height);
  padding: var(--sl-space-2);
  border-radius: var(--sl-radius-circle);
  background: conic-gradient(
    var(--sl-d-user) 0 var(--sl-d-usrlevel),
    var(--sl-border-muted) var(--sl-d-usrlevel) 100%
  );
}

.sl-block-user-ava .sl-ava-min {
  display: block;
  box-sizing: border-box;
  width: calc(var(--sl-avatar-width) - var(--sl-space-2) * 2);
  height: calc(var(--sl-avatar-height) - var(--sl-space-2) * 2);
  border: var(--sl-ava-border) solid var(--sl-surface);
  border-radius: var(--sl-radius-circle);
  background-color: var(--sl-bg);
  background-position: center;
  background-size: cover;
  box-shadow: var(--sl-shadow-xs);
}

.sl-block-user-ava > .sl-ava-min {
  width: var(--sl-avatar-width);
  height: var(--sl-avatar-height);
  border: var(--sl-ava-border) solid var(--sl-bg-subtle);
}

.sl-block-user-ava p {
  min-width: 0;
  margin: 0 var(--sl-space-3);
  color: var(--sl-text);
  font-size: var(--sl-font-body);
  font-weight: var(--sl-weight-semibold);
  line-height: var(--sl-line-tight);
}

.sl-block-user-ava p > a,
.sl-block-user-ava p > b {
  color: var(--sl-text);
  font-size: var(--sl-font-h4);
}

.sl-block-user-ava p > a:hover { color: var(--sl-primary); }

/* The rank of the group stands on its own line under the nick, where its picture stood, and above the group it names */
.sl-block-user-ava p > .sl-rank {
  display: flex;
  width: fit-content;
  margin: var(--sl-space-1) 0;
}

.sl-block-user-ava p small {
  display: block;
  overflow: hidden;
  color: var(--sl-text-muted);
  font-size: var(--sl-font-micro);
  font-weight: var(--sl-weight-normal);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sl-user-points {
  text-align: right;
  white-space: nowrap;
}

.sl-user-points b,
.sl-user-points small { display: block; }
.sl-user-points b { color: var(--sl-text); font-size: var(--sl-font-h4); }
/* The small print of a points figure and the stamp of a message slot are one small print */
.sl-user-points small,
.sl-pmf-slot-top time {
  color: var(--sl-text-muted);
  font-size: var(--sl-font-micro);
}

.sl-block-pm {
  margin: var(--sl-space-3) 0 0;
  padding: 0;
  list-style: none;
}

.sl-block-pm li { margin: 0; }

/* The fourth track holds the flag of an owner's link in the block "Administration"; a row without one leaves it empty */
.sl-block-pm a {
  display: grid;
  grid-template-columns: var(--sl-space-7) minmax(0, 1fr) auto auto;
  align-items: center;
  box-sizing: border-box;
  height: var(--sl-item-height);
  padding: var(--sl-space-3) var(--sl-space-2);
  border-bottom: 1px solid var(--sl-border-subtle);
  color: var(--sl-text-muted);
  font-size: var(--sl-font-body);
  transition: padding-left var(--sl-time-base) var(--sl-ease-out), color var(--sl-time-base) var(--sl-ease-out);
}

.sl-block-pm a:hover {
  padding-left: var(--sl-space-3);
  color: var(--sl-primary-strong);
}

.sl-block-pm a > .bi:first-child { color: var(--sl-primary); }

.sl-block-pm a > span:nth-child(2) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sl-block-pm a > .bi:last-child { font-size: var(--sl-font-micro); }

.sl-pm-new {
  display: inline-grid;
  place-items: center;
  box-sizing: border-box;
  min-width: var(--sl-badge-width);
  height: var(--sl-badge-height);
  padding: 0 var(--sl-space-3);
  border-radius: var(--sl-radius-pill);
  background: var(--sl-danger);
  color: var(--sl-on-solid);
  font-size: var(--sl-font-small);
  line-height: 1;
  animation: sl-alert-pulse var(--sl-alert-dur) var(--sl-ease-in-out) infinite;
}

.sl-user-nav {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  overflow: hidden;
  margin-top: var(--sl-space-4);
  border: 1px solid var(--sl-border);
  border-radius: var(--sl-radius-pill);
  background: var(--sl-bg-subtle);
}

.sl-user-nav a {
  display: grid;
  place-items: center;
  height: var(--sl-size-control);
  border-right: 1px solid var(--sl-border);
  color: var(--sl-text-muted);
}

.sl-user-nav a:last-child { border-right: 0; }
.sl-user-nav a:hover { background: var(--sl-bg); color: var(--sl-primary); }

.sl-block-login {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sl-space-3);
  margin: var(--sl-space-4) 0 0;
}

.sl-user-field {
  position: relative;
  display: block;
}

.sl-user-field > .bi {
  position: absolute;
  top: 50%;
  left: 10px;
  z-index: var(--sl-z-raised);
  color: var(--sl-text-muted);
  transform: translateY(-50%);
}

.sl-block-login .sl-field {
  width: 100%;
  margin: 0;
  padding-left: var(--sl-space-9);
}

.sl-block-login > .sl-but,
.sl-user-captcha {
  grid-column: 1 / -1;
}

.sl-block-login > .sl-but {
  display: flex;
  gap: var(--sl-space-3);
  align-items: center;
  justify-content: center;
  width: 100%;
}
.sl-user-captcha > * { max-width: 100%; }

.sl-block-session { margin-top: var(--sl-space-5); }

[data-sl-session-online] {
  position: absolute;
  top: 20px;
  right: 0;
  z-index: var(--sl-z-overlay);
  gap: var(--sl-space-2);
}

.sl-session-summary {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  gap: var(--sl-space-6);
  align-items: center;
  padding-top: var(--sl-space-4);
}

.sl-session-donut {
  display: grid;
  place-items: center;
  width: var(--sl-donut-width);
  height: var(--sl-donut-height);
  border-radius: var(--sl-radius-circle);
  background: conic-gradient(
    var(--sl-accent) 0 var(--sl-d-admins, 0%),
    var(--sl-success) var(--sl-d-admins, 0%) var(--sl-d-members),
    var(--sl-warning) var(--sl-d-members) var(--sl-d-bots),
    var(--sl-primary) var(--sl-d-bots) 100%
  );
}

.sl-session-donut > span {
  display: grid;
  place-items: center;
  width: calc(var(--sl-donut-width) - var(--sl-donut-ring) * 2);
  height: calc(var(--sl-donut-height) - var(--sl-donut-ring) * 2);
  border-radius: var(--sl-radius-circle);
  background: var(--sl-surface);
  line-height: 1;
}

.sl-session-donut b { align-self: end; font-size: var(--sl-font-h3); }
.sl-session-donut small { align-self: start; color: var(--sl-text-muted); font-size: var(--sl-font-micro); }

.sl-session-summary .sl-session-line {
  grid-template-columns: 16px minmax(0, 1fr) auto;
  gap: var(--sl-space-3);
  padding: var(--sl-space-1) 0;
  font-size: var(--sl-font-body);
}

.sl-session-line[data-sl-audience="admins"] > .bi { color: var(--sl-accent); }
.sl-session-line[data-sl-audience="users"] > .bi { color: var(--sl-success); }
.sl-session-line[data-sl-audience="bots"] > .bi { color: var(--sl-warning); }
.sl-session-line[data-sl-audience="guests"] > .bi { color: var(--sl-primary); }

/* The total carries its own mark, so it stands in the column of the lines above it instead of being indented to it */
.sl-session-summary .sl-session-total {
  color: var(--sl-text);
  font-weight: var(--sl-weight-semibold);
}

/* A zero stays readable and steps back in tone, so the figures that count stand out */
.sl-session-summary .sl-zero { color: var(--sl-text-muted); }

.sl-user-card .sl-session-action {
  display: flex;
  gap: var(--sl-space-4);
  justify-content: center;
  padding: var(--sl-space-4) 0 0;
}

/* A fold control shows one of two marks; the favourites shelf swaps its chevrons on the sl-is-closed state slaed.js sets */
.sl-session-close,
.sl-panel-toggle-closed,
.sl-session-toggle.sl-is-open .sl-session-open,
.sl-is-closed .sl-panel-toggle-open { display: none; }
.sl-session-toggle.sl-is-open .sl-session-close,
.sl-is-closed .sl-panel-toggle-closed { display: inline; }

.sl-user-card .sl-session-list {
  position: absolute;
  z-index: var(--sl-z-dropdown);
  inset: auto 0 var(--sl-session-gap);
  max-height: calc(100% - var(--sl-session-gap));
  overflow: auto;
  padding: var(--sl-space-5);
  border: 1px solid var(--sl-border);
  border-radius: var(--sl-radius-3);
  background: var(--sl-surface);
  box-shadow: var(--sl-panel-shadow);
}

.sl-user-card .sl-session-list > header {
  margin-bottom: var(--sl-space-2);
  padding-bottom: var(--sl-space-3);
  border-bottom: 1px solid var(--sl-border-subtle);
  color: var(--sl-text-strong);
  font-size: var(--sl-font-body);
}

.sl-user-card .sl-session-row {
  padding: var(--sl-space-3) 0;
  border-bottom: 1px solid var(--sl-border-subtle);
}

/* Menu: database-driven navigation */
.sl-block-menu li {
  margin: var(--sl-space-2) 0;
}

/* Footer: advantages band */
.sl-advantage .sl-wrp {
  position: relative;
  display: flow-root;
}

/* Bottom page blocks: forum, sl-partners, contacts, ideas and feedback */
/* The meta of every row shares two columns: the dates start on one line after the longest author */
.sl-list-item {
  flex-basis: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, max-content) 1fr;
  column-gap: var(--sl-space-5);
  container-type: inline-size;
}

.sl-list-item > li {
  grid-column: 1 / -1;
  min-width: 0;
  padding: var(--sl-space-3) 0 0;
  margin-bottom: var(--sl-space-3);
  border-top: 1px solid var(--sl-border-inverse);
}

.sl-list-item > li:first-child {
  padding-top: 0;
  border-top-width: 0;
}

.sl-list-item > li > a {
  display: inline-block;
  vertical-align: bottom;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
  max-width: 100%;
  color: var(--sl-band-text);
}

.sl-forum-meta {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sl-space-3);
  margin-top: var(--sl-space-2);
  color: var(--sl-text-inverse);
  font-size: var(--sl-font-small);
}

.sl-forum-meta-item {
  display: inline-flex;
  align-items: center;
  gap: var(--sl-space-3);
  white-space: nowrap;
}

/* Wide enough for author and date side by side; narrower, the date stands under the author in every row */
@container (width >= 280px) {
  .sl-list-item > li:not(.sl-hidden) {
    display: grid;
    grid-template-columns: subgrid;
  }

  .sl-list-item > li > a {
    grid-column: 1 / -1;
    min-width: 0;
  }

  .sl-list-item > li > br {
    display: none;
  }

  .sl-forum-meta {
    display: contents;
  }

  .sl-forum-meta-item {
    min-width: 0;
    margin-top: var(--sl-space-2);
  }

  .sl-forum-meta-item > a {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

.sl-forum-meta-icon,
.sl-forum-meta-item a .bi {
  color: var(--sl-primary);
  font-size: var(--sl-size-icon-xs);
  line-height: 1;
}

.sl-list-item > li ul {
  font-size: var(--sl-font-small);
  margin-top: var(--sl-space-1);
}

.sl-list-item > li ul li {
  display: inline;
  margin-right: var(--sl-space-6);
}

.sl-list-item > li ul,
.sl-list-item > li ul a {
  color: var(--sl-text-subtle);
}

/* Partners: technology logo grid */
.sl-partners {
  display: flex;
  flex-wrap: wrap;
  margin-right: calc(var(--sl-space-3) * -1);
}

.sl-partners > * {
  position: relative;
  border: 1px solid var(--sl-border-inverse);
  margin: 0 var(--sl-space-3) var(--sl-space-3) 0;
}

/* The brand colouring of a theme mark lies over its mono picture and shows on hover and keyboard focus */
.sl-partners img + img {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity var(--sl-time-base) var(--sl-ease-out);
}

.sl-partners > :hover img + img,
.sl-partners > :focus-visible img + img {
  opacity: 1;
}

/* Contacts: footer address list with icons */
.sl-block-contact li {
  display: flex;
  align-items: center;
  gap: var(--sl-space-4);
  margin-bottom: var(--sl-space-7);
  line-height: var(--sl-line-tight);
}

.sl-block-contact li .sl-contact-icon {
  flex: 0 0 var(--sl-size-icon-md);
  width: var(--sl-size-icon-md);
  margin: 0;
  color: var(--sl-primary);
  text-align: center;
  font-size: var(--sl-size-icon-md);
  line-height: 1;
}

.sl-block-contact a {
  color: inherit;
}

/* Ideas/feedback floating tabs pinned to the left edge; no transform on the blocks so the feedback float panel keeps a correct fixed-positioning containing block */
#block-idea,
#block-feedback {
  position: fixed;
  left: 0;
  z-index: var(--sl-z-popover);
}

#block-idea {
  bottom: calc(50% + 4px);
}

#block-feedback {
  top: calc(50% + 4px);
}

.sl-btn-idea,
.sl-btn-feedback {
  display: flex;
}

.sl-btn-idea .sl-font,
.sl-btn-feedback .sl-font {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Read bottom-to-top (natural for a left-edge tab); engines without sideways-lr fall back to vertical-rl */
  writing-mode: vertical-rl;
  writing-mode: sideways-lr;
  min-height: var(--sl-edge-height);
  padding: var(--sl-space-3) var(--sl-space-3);
  border-radius: 0 var(--sl-radius-2) var(--sl-radius-2) 0;
  /* The plate is a pastel wash at both ends of its gradient, so the band white every other band uses reads at 1.7:1 here */
  color: var(--sl-text-strong);
  font-weight: var(--sl-weight-normal);
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: var(--sl-track-wide);
  text-decoration: none;
  box-shadow: var(--sl-panel-shadow);
  transition: padding-left var(--sl-time-base) var(--sl-ease-out);
}

/* Hover/focus: grow to the right (left edge stays pinned, so the gradient covers everything with no see-through strip); the label rides along with the extra left padding */
.sl-btn-idea .sl-font:hover,
.sl-btn-feedback .sl-font:hover,
.sl-btn-idea:focus-visible .sl-font,
.sl-btn-feedback:focus-visible .sl-font {
  padding-left: var(--sl-space-6);
}

.sl-btn-idea .sl-font {
  background: var(--sl-idea-bg);
}

.sl-btn-feedback .sl-font {
  background: var(--sl-feedback-bg);
}

/* Error page: standalone error message layout */
.sl-view-error {
  max-width: var(--sl-view-max-width);
  margin: var(--sl-space-10) auto;
  padding: var(--sl-space-9);
}

.sl-view-error-title {
  font-size: var(--sl-font-h1);
  margin: 0 0 var(--sl-space-7) 0;
}

.sl-view-error-alert {
  margin-bottom: var(--sl-space-6);
}

.sl-view-error-link {
  margin-bottom: var(--sl-space-3);
}

.sl-view-error-time {
  color: var(--sl-text-muted);
  font-size: var(--sl-font-small);
}

/* Utilities: shared helpers */
.sl-font {
  font-family:
    "Magistral",
    Arial,
    system-ui,
    -apple-system,
    sans-serif;
  font-weight: var(--sl-weight-normal);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

.sl-clr,
.clr {
  clear: both;
}

.sl-grey,
.sl-grey a {
  color: var(--sl-text-muted);
}

/* Hidden text: [hide] tag frame with danger accents */
.sl-hide {
  border-left: 1px solid var(--sl-danger);
  border-right: 1px solid var(--sl-danger);
}

.sl-hide::before,
.sl-hide::after {
  color: var(--sl-danger);
}

/* Code highlighting: source code block colors */
.sl-code {
  font-family: var(--sl-face-mono);
  font-size: var(--sl-font-small);
  background: var(--sl-bg);
  border-left: 1px solid var(--sl-border-muted);
  border-right: 1px solid var(--sl-border-muted);
  color: var(--sl-text-muted);
  margin: var(--sl-space-2);
  padding: 0;
  border-radius: var(--sl-radius-2);
}

.sl-code div {
  border-radius: var(--sl-radius-2);
}

/* The copy button and the fold wait for their script, so a page without it shows the whole code */
.sl-code-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sl-space-2);
  padding: var(--sl-space-1) var(--sl-space-1) var(--sl-space-1) var(--sl-space-3);
  border-bottom: 1px solid var(--sl-border);
  color: var(--sl-text-muted);
  font-size: var(--sl-font-micro);
}

.sl-code:not([data-ready]) [data-sl-code-copy],
.sl-code:not([data-ready]) .sl-code-more {
  display: none;
}

/* The copy button of a code head is a tool of the code, not an action of a window: a quiet square of the chip height, larger under a finger */
.sl-code-copy {
  display: inline-grid;
  place-items: center;
  box-sizing: border-box;
  width: var(--sl-size-chip);
  height: var(--sl-size-chip);
  padding: 0;
  border: 0;
  border-radius: var(--sl-radius-1);
  background: transparent;
  color: var(--sl-text-muted);
  cursor: pointer;
}

.sl-code-copy > .bi { font-size: var(--sl-size-icon-xs); }

@media (pointer: coarse) {
  .sl-code-copy {
    width: calc(var(--sl-size-chip) + var(--sl-space-3));
    height: calc(var(--sl-size-chip) + var(--sl-space-3));
  }
}

/* The body is the one part that scrolls sideways, and it takes the focus, so a keyboard reaches a long line too */
.sl-code > .sl-code-body {
  overflow-x: auto;
  padding: var(--sl-space-2);
  border-radius: 0;
  line-height: var(--sl-line-loose);
}

.sl-code-body pre {
  margin: 0;
}

.sl-code-body:focus-visible {
  outline: var(--sl-ring-width) solid var(--sl-ring-bg);
  outline-offset: calc(var(--sl-ring-width) * -1);
}

/* A long block opens folded and unfolds under its button */
.sl-code[data-long][data-ready]:not([data-open]) > .sl-code-body {
  max-height: var(--sl-code-max-height);
  overflow-y: hidden;
}

.sl-code-more {
  display: flex;
  justify-content: center;
  width: 100%;
  margin: 0;
  border: 0;
  border-top: 1px solid var(--sl-border);
  border-radius: 0 0 var(--sl-radius-2) var(--sl-radius-2);
}

/* Tables: nothing in the theme paints a cell; this puts a pasted table with its own cell background back onto the page */
.sl-table td,
.sl-table th {
  background-color: var(--sl-bg) !important;
}

.sl-table > thead > tr > th,
.sl-table > tbody > tr > th,
.sl-table > tfoot > tr > th,
.sl-table > thead > tr > td,
.sl-table > tbody > tr > td,
.sl-table > tfoot > tr > td {
  padding: var(--sl-space-3);
  line-height: var(--sl-line-normal);
  vertical-align: top;
  border-top: 1px solid var(--sl-border-subtle);
}

.sl-table > thead > tr > th {
  vertical-align: bottom;
  border-bottom: var(--sl-table-border) solid var(--sl-border-subtle);
}

/* Tabs: theme tab strip and panels */
.sl-tabs {
  margin: var(--sl-space-7) 0 var(--sl-space-8);
  border: 1px solid var(--sl-border-strong);
  border-radius: var(--sl-radius-2);
  background: var(--sl-bg);
}

.sl-tabs-nav {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: var(--sl-space-3) var(--sl-space-3) 0;
  list-style: none;
  border-bottom: 1px solid var(--sl-border-strong);
}

.sl-tabs-item {
  display: block;
  margin: 0 var(--sl-space-1) -1px 0;
  padding: 0;
  list-style: none;
  flex: 0 0 auto;
}

.sl-tabs-link {
  display: block;
  padding: var(--sl-space-3);
  border: 1px solid var(--sl-border-strong);
  border-bottom: 0;
  border-radius: var(--sl-radius-2) var(--sl-radius-2) 0 0;
  background: var(--sl-surface);
  color: var(--sl-text-muted);
  font-size: var(--sl-font-body);
  font-weight: var(--sl-weight-bold);
  line-height: var(--sl-line-tight);
  white-space: nowrap;
  text-decoration: none;
  text-shadow: none;
  cursor: pointer;
  transition:
    background-color var(--sl-time-base) var(--sl-ease-out),
    color var(--sl-time-base) var(--sl-ease-out),
    border-color var(--sl-time-base) var(--sl-ease-out);
}

.sl-tabs-link:hover {
  color: var(--sl-primary-strong);
  background: var(--sl-bg);
  border-color: var(--sl-border-muted);
  text-decoration: none;
}

.sl-tabs-link.sl-is-active,
.sl-tabs-link[aria-selected="true"] {
  background: var(--sl-bg);
  border-color: var(--sl-border-strong);
  border-bottom: 1px solid var(--sl-bg);
  color: var(--sl-primary-strong);
  text-shadow: none;
}

.sl-tabs-content {
  margin: 0;
  border-top: 0;
  padding: var(--sl-space-6) var(--sl-space-6) var(--sl-space-4);
  background: var(--sl-bg);
}

.sl-tab-panel {
  display: none;
}

.sl-tabs-content > .sl-tab-panel:first-child {
  display: block;
}

/* The tab script writes display none inline on closed panels, and only !important prints them past it */
@media print {
  .sl-tab-panel {
    display: block !important;
  }
}

/* Grid system: 1-3 and 1-4 column containers, their percentage gaps never overflowing the row */
.sl-grid-1-3,
.sl-grid-1-4 {
  display: grid;
  column-gap: 2%;
  row-gap: var(--sl-space-5);
  list-style: none;
  padding: 0;
  margin: 0;
}

.sl-grid-1-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.sl-grid-1-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.sl-grid-1-3 > .sl-grid,
.sl-grid-1-4 > .sl-grid {
  margin: 0;
  min-width: 0;
}

/* Utilities: visually hidden link text with visible icons */
.sl-thd {
  display: inline-block;
  text-align: left;
  overflow: hidden;
  text-indent: 0;
  font-size: 0;
  line-height: 0;
  color: transparent;
  white-space: nowrap;
}

.sl-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Layout: content/sidebar container grid */
.sl-wrp {
  margin: 0 auto;
  width: min(100% - var(--sl-space-9), var(--sl-layout-container));
}

.sl-table-shell {
  overflow-x: auto;
  overflow-y: clip;
  -webkit-overflow-scrolling: touch;
}

.sl-table-shell > table {
  min-width: 100%;
}

/* Top bar: service strip above the header */
#topbar {
  background-color: var(--sl-bg-inverse);
  min-height: var(--sl-topbar-height);
  color: var(--sl-band-text);
  font-size: var(--sl-font-body);
}

#topbar .sl-wrp {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--sl-space-5) var(--sl-space-7);
  min-height: var(--sl-topbar-height);
}

#topbar a {
  color: var(--sl-band-text);
}

.sl-top-contact {
  float: none;
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  gap: var(--sl-space-7);
  min-width: 0;
}

.sl-top-contact li {
  margin: 0;
  line-height: var(--sl-line-tight);
}

.sl-top-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: var(--sl-layout-sidebar);
  flex: 0 0 var(--sl-layout-sidebar);
  gap: var(--sl-space-6);
}

/* Colour mode: the header form. Its rail is the segmented switch with the sl-seg-mode modifier below */
.sl-mode {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}

/* The knob: a measured rail moves its plate to the place slaed.js wrote; a rail handed a place from the page before stands still once */
[data-sl-knob][data-sl-knob-ready] > [data-sl-knob-mark] {
  left: 0;
  width: var(--sl-d-knob-w);
  transform: translateX(var(--sl-d-knob-x));
}

@media (prefers-reduced-motion: no-preference) {
  [data-sl-knob][data-sl-knob-ready]:not([data-sl-knob-still]) > [data-sl-knob-mark] {
    transition:
      transform var(--sl-time-slow) var(--sl-ease-in-out),
      width var(--sl-time-slow) var(--sl-ease-in-out);
  }
}

/* Series tile, as in the panel: the name in capitals, the figure with the icon of its figure at its right, and a line under both across the tile */
.sl-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--sl-metric-min-width), 1fr));
  gap: var(--sl-space-5);
}

.sl-metric {
  position: relative;
  display: grid;
  gap: var(--sl-space-2);
  padding: var(--sl-space-5);
  border: 1px solid var(--sl-border);
  border-radius: var(--sl-radius-2);
  background: var(--sl-bg);
}

.sl-metric-name {
  display: flex;
  align-items: center;
  gap: var(--sl-space-3);
  font-family: var(--sl-face-mono);
  font-size: var(--sl-font-micro);
  font-weight: var(--sl-weight-normal);
  line-height: var(--sl-line-normal);
  letter-spacing: var(--sl-track-wide);
  text-transform: uppercase;
  color: var(--sl-text-muted);
}

.sl-metric-dot {
  width: var(--sl-space-3);
  height: var(--sl-space-3);
  border-radius: var(--sl-radius-circle);
  background: currentColor;
}

.sl-metric small {
  font-family: var(--sl-face-mono);
  font-size: var(--sl-font-micro);
  font-weight: var(--sl-weight-normal);
  color: var(--sl-text-muted);
}

.sl-metric-value {
  font-size: var(--sl-font-h1);
  line-height: var(--sl-line-tight);
  font-variant-numeric: tabular-nums;
  color: var(--sl-text-strong);
}

/* A figure of a tile may be a word: it breaks inside its tile rather than running under the icon; a counted number keeps its groups on one line */
.sl-metric-value {
  min-width: 0;
  overflow-wrap: anywhere;
}

.sl-metric-num {
  white-space: nowrap;
}

.sl-metric:has(> .sl-metric-icon) {
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: var(--sl-space-5);
}

.sl-metric:has(> .sl-metric-icon) > :is(.sl-metric-name, .sl-metric-value) {
  grid-column: 1;
}

.sl-metric:has(> .sl-metric-icon) > small {
  grid-column: 1 / -1;
}

.sl-metric-icon {
  width: var(--sl-t-icon-width);
  text-align: center;
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  font-size: var(--sl-size-icon-lg);
  line-height: 1;
  color: var(--sl-primary);
}

/* A running figure, as in the panel: setFigureRun() of slaed.js runs it as long as its glow holds; a transform needs a box, so an inline figure is one while it runs */
@media (prefers-reduced-motion: no-preference) {
  .sl-is-counting {
    animation:
      sl-figure-lit var(--sl-figure-dur) var(--sl-ease-out),
      sl-figure-fade var(--sl-time-slow) var(--sl-ease-out) var(--sl-figure-dur),
      sl-figure-swell calc(var(--sl-figure-dur) + var(--sl-time-slow)) var(--sl-ease-out);
  }

  :where(span, b, strong, em, small).sl-is-counting {
    display: inline-block;
  }
}

/* A running figure starts swollen, as the pulse of the monitor flares, and settles over its run and its fade */
@keyframes sl-figure-swell {
  from {
    transform: scale(1.4);
  }
}

/* The glow of a running figure holds for the whole run, the first of its animations, whose length setFigureRun() reads */
@keyframes sl-figure-lit {
  from,
  to {
    color: var(--sl-figure-text);
    text-shadow: var(--sl-figure-shadow);
  }
}

/* The glow fades from the figure once it stops */
@keyframes sl-figure-fade {
  from {
    color: var(--sl-figure-text);
    text-shadow: var(--sl-figure-shadow);
  }
}

/* The place of the pointer light does not inherit, so a move restyles no descendant of what slaed.js writes on; a rule that reads it says inherit */
@property --sl-d-pointer-x {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}

@property --sl-d-pointer-y {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}

/* The light that follows the pointer, as over the admin; slaed.js writes where it is */
@media (prefers-reduced-motion: no-preference) {
  body[data-sl-pointer]::after {
    --sl-d-pointer-x: inherit;
    --sl-d-pointer-y: inherit;
    content: "";
    position: fixed;
    inset: 0;
    z-index: var(--sl-z-popover);
    background: radial-gradient(circle var(--sl-pointer-width) at var(--sl-d-pointer-x) var(--sl-d-pointer-y), var(--sl-tint), transparent 70%);
    pointer-events: none;
  }
}

/* The light that runs round the frame of every block under the hand, as in the panel: a turning cone cut to the line of the frame, drawn by the --sl-aurora-* tokens; the layer exists only under the hand */
@media (prefers-reduced-motion: no-preference) {
  .sl-cab-deck,
  .sl-changelog-commits,
  .sl-changelog-filter,
  .sl-changelog-results,
  .sl-opt-lamp,
  .sl-profile-panel,
  .sl-search-panel,
  .sl-card-aside,
  .sl-card-image,
  .sl-cat-tile,
  .sl-icat,
  .sl-node-head-win,
  .sl-oauth-card,
  .sl-pmf-focus,
  .sl-pmf-mate,
  .sl-pmf-slot,
  .sl-profile-card,
  .sl-empty,
  .sl-profile-proof,
  .sl-preview,
  .sl-msg-card {
    position: relative;
  }

  .sl-block::before,
  .sl-cab-act::before,
  .sl-cab-deck::before,
  .sl-changelog-commits::before,
  .sl-changelog-filter::before,
  .sl-changelog-results::before,
  .sl-opt-lamp::before,
  .sl-profile-panel::before,
  .sl-search-panel::before,
  .sl-card-aside::before,
  .sl-card-image::before,
  .sl-cat-tile::before,
  .sl-icat::before,
  .sl-node-head-win::before,
  .sl-node-tile-cover::before,
  .sl-oauth-card::before,
  .sl-pmf-focus::before,
  .sl-pmf-mate::before,
  .sl-pmf-slot::before,
  .sl-profile-card::before,
  .sl-empty::before,
  .sl-profile-proof::before,
  .sl-preview::before,
  .sl-msg-card::before,
  .sl-pres-cockpit::before,
  .sl-pres-card::before,
  .sl-pres-stat::before,
  .sl-pres-metric::before,
  .sl-pres-chart::before,
  .sl-pres-vitals::before,
  .sl-pres-core::before,
  .sl-pres-mod::before,
  .sl-pres-node::before,
  .sl-pres-bcard::before,
  .sl-pres-blocks-panel::before,
  .sl-pres-pane::before,
  .sl-pres-console::before,
  .sl-pres-tree::before,
  .sl-pres-hours::before,
  .sl-pres-claim::before,
  .sl-pres-rings::before,
  .sl-pres-tile::before,
  .sl-pres-focus::before,
  .sl-pres-query::before,
  .sl-pres-scene:not(.sl-pres-stats-board, .sl-pres-dev-board)::after,
  .sl-pres-tech-card::after,
  .sl-pres-pulse-card::after {
    position: absolute;
    inset: -1px;
    z-index: var(--sl-z-overlay);
    border: var(--sl-aurora-width) solid transparent;
    border-radius: inherit;
    background: conic-gradient(from var(--sl-aurora-turn), transparent 0 calc(100% - var(--sl-aurora-mix)), var(--sl-aurora-border) calc(100% - var(--sl-aurora-mix) / 2), var(--sl-aurora-ring) calc(100% - var(--sl-aurora-mix) * 0.15), transparent) border-box;
    mask: linear-gradient(var(--sl-text) 0 0) padding-box, linear-gradient(var(--sl-text) 0 0);
    mask-composite: exclude;
    opacity: 0;
    pointer-events: none;
  }

  /* The lamp of a setting carries a wider stripe on its left, so the light stands that much further out there */
  .sl-opt-lamp::before {
    left: calc(var(--sl-opt-lamp-border) * -1);
  }

  .sl-block:hover::before,
  .sl-cab-act:hover::before,
  .sl-cab-deck:hover::before,
  .sl-changelog-commits:hover::before,
  .sl-changelog-filter:hover::before,
  .sl-changelog-results:hover::before,
  .sl-opt-lamp:hover::before,
  .sl-profile-panel:hover::before,
  .sl-search-panel:hover::before,
  .sl-card-aside:hover::before,
  .sl-card-image:hover::before,
  .sl-cat-tile:hover::before,
  .sl-icat:hover::before,
  .sl-node-head-win:hover::before,
  .sl-node-tile-cover:hover::before,
  .sl-oauth-card:hover::before,
  .sl-pmf-focus:hover::before,
  .sl-pmf-mate:hover::before,
  .sl-pmf-slot:hover::before,
  .sl-profile-card:hover::before,
  .sl-empty:hover::before,
  .sl-profile-proof:hover::before,
  .sl-preview:hover::before,
  .sl-msg-card:hover::before,
  .sl-pres-cockpit:hover::before,
  .sl-pres-card:hover::before,
  .sl-pres-stat:hover::before,
  .sl-pres-metric:hover::before,
  .sl-pres-chart:hover::before,
  .sl-pres-vitals:hover::before,
  .sl-pres-core:hover::before,
  .sl-pres-mod:hover::before,
  .sl-pres-node:hover::before,
  .sl-pres-bcard:hover::before,
  .sl-pres-blocks-panel:hover::before,
  .sl-pres-pane:hover::before,
  .sl-pres-console:hover::before,
  .sl-pres-tree:hover::before,
  .sl-pres-hours:hover::before,
  .sl-pres-claim:hover::before,
  .sl-pres-rings:hover::before,
  .sl-pres-tile:hover::before,
  .sl-pres-focus:hover::before,
  .sl-pres-query:hover::before,
  .sl-pres-scene:not(.sl-pres-stats-board, .sl-pres-dev-board):hover::after,
  .sl-pres-tech-card:hover::after,
  .sl-pres-pulse-card:hover::after {
    content: "";
    animation: sl-aurora var(--sl-aurora-dur) linear infinite;
  }
}

/* The turn of the light round a frame, registered without inheritance so a turn restyles the frame alone */
@property --sl-aurora-turn {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

/* The light of a frame is on only while it runs */
@keyframes sl-aurora {
  from {
    --sl-aurora-turn: 0deg;
    opacity: 1;
  }

  to {
    --sl-aurora-turn: 360deg;
    opacity: 1;
  }
}

/* Segmented switch: the plate under the chosen cell is always empty, and the chosen cell recolours its own content over it */
.sl-seg {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  box-sizing: border-box;
  min-width: 0;
  padding: var(--sl-seg-pad-y) var(--sl-seg-pad-x);
  border-radius: var(--sl-radius-pill);
  background: var(--sl-seg-bg);
  box-shadow: var(--sl-shadow-inset);
}

.sl-seg-cell {
  position: relative;
  z-index: var(--sl-z-raised);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: var(--sl-seg-height);
  height: var(--sl-seg-height);
  margin: 0;
  padding: 0 var(--sl-space-2);
  border: 0;
  border-radius: var(--sl-radius-pill);
  background: transparent;
  color: var(--sl-seg-text);
  font: inherit;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: color var(--sl-time-fast) var(--sl-ease-out);
}

a.sl-seg-cell:hover,
button.sl-seg-cell:hover {
  color: var(--sl-text-strong);
}

.sl-seg-cell.sl-is-active {
  color: var(--sl-seg-knob-text);
  cursor: default;
}

/* The dots of a pager stand in the track as a cell that leads nowhere */
.sl-seg-cell.sl-is-muted {
  cursor: default;
}

.sl-seg-cell:focus-visible {
  outline: var(--sl-ring-width) solid var(--sl-ring-bg);
  outline-offset: calc(var(--sl-ring-gap) * -1);
}

.sl-seg-knob {
  position: absolute;
  top: var(--sl-seg-pad-y);
  left: var(--sl-seg-pad-x);
  height: var(--sl-seg-height);
  border-radius: var(--sl-radius-pill);
  background: var(--sl-seg-knob-bg);
  box-shadow: var(--sl-seg-knob-shadow);
  pointer-events: none;
}

/* Without the script the plate has no place: it stays away and the chosen cell wears the plate itself */
.sl-seg:not([data-sl-knob-ready]) > .sl-seg-knob {
  display: none;
}

.sl-seg:not([data-sl-knob-ready]) .sl-seg-cell.sl-is-active {
  background: var(--sl-seg-knob-bg);
  box-shadow: var(--sl-seg-knob-shadow);
}

/* A run of cells the script redraws, such as the numbers of a pager, lays its cells straight into the track */
.sl-seg-run {
  display: contents;
}

/* The colour mode in the header: the band's gradient track, light icons, the chosen one dark on a light plate */
.sl-seg-mode {
  background: var(--sl-mode-bg);
  font-size: var(--sl-size-icon-sm);
}

.sl-seg-mode .sl-seg-cell {
  width: var(--sl-mode-width);
  height: var(--sl-mode-height);
  padding: 0;
}

.sl-seg-mode .sl-seg-knob {
  height: var(--sl-mode-height);
}

.sl-seg-mode .sl-seg-cell:not(.sl-is-active) {
  color: var(--sl-band-text);
  opacity: var(--sl-fade-muted);
}

.sl-seg-mode .sl-seg-cell:hover,
.sl-seg-mode .sl-seg-cell:focus-visible {
  opacity: 1;
}

.sl-seg-mode .sl-seg-cell.sl-is-active {
  font-size: var(--sl-size-icon-xs);
}

/* The view of a list: a quiet track, muted icons, the chosen one on a light plate - a setting, not a place */
.sl-seg-view {
  font-size: var(--sl-size-icon-sm);
}

/* The pager: mini cells, a plate set inside the track, numbers small and bold, the current page in the brand colour - a place */
.sl-seg-pager {
  padding: var(--sl-space-1);
  font-size: var(--sl-font-small);
  font-weight: var(--sl-weight-bold);
  font-variant-numeric: tabular-nums;
}

.sl-seg-pager .sl-seg-cell {
  min-width: var(--sl-size-chip);
  height: var(--sl-size-chip);
  color: var(--sl-text);
}

/* The digits read at full text strength, so a number in hand takes the brand colour to stand out from its neighbours */
.sl-seg-pager a.sl-seg-cell:hover {
  color: var(--sl-primary-strong);
}

.sl-seg-pager .sl-seg-knob {
  top: var(--sl-space-1);
  left: var(--sl-space-1);
  height: var(--sl-size-chip);
  background: var(--sl-primary-strong);
}

.sl-seg-pager .sl-seg-cell.sl-is-active {
  color: var(--sl-on-solid);
}

.sl-seg-pager:not([data-sl-knob-ready]) .sl-seg-cell.sl-is-active {
  background: var(--sl-primary-strong);
}

.sl-top-social {
  float: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: var(--sl-space-2);
  margin: 0;
}

.sl-circle-action {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  width: var(--sl-size-control);
  height: var(--sl-size-control);
  margin-left: 0;
  border-radius: calc(var(--sl-size-control) / 2);
  overflow: hidden;
  background-color: transparent;
  background-image: none;
}

.sl-circle-action .bi {
  position: relative;
  z-index: var(--sl-z-raised);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  line-height: 1;
}

.sl-circle-action:hover,
.sl-circle-action:focus-visible {
  background-image: var(--sl-grad-gloss);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.sl-top-social .sl-circle-action .bi {
  font-size: var(--sl-size-icon-sm);
  color: var(--sl-band-text);
}

/* Social row: the hover ground rotates through the category palette, so a new link needs no CSS */
.sl-top-social .sl-circle-action:hover,
.sl-top-social .sl-circle-action:focus-visible {
  background-color: var(--sl-cat-tone);
}

/* Header: brand row and toolbar area */
#header {
  width: 100%;
  padding: var(--sl-space-8) 0;
}

#header .sl-wrp {
  display: flex;
  align-items: center;
  gap: var(--sl-space-8) var(--sl-space-9);
}

#header .sl-d-pane {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  justify-content: space-between;
  width: var(--sl-layout-sidebar);
  flex: 0 0 var(--sl-layout-sidebar);
  margin-left: auto;
  text-align: left;
}

#header .sl-d-pane > li {
  margin-left: 0;
}

#header .sl-d-btns {
  display: flex;
  align-items: center;
  gap: var(--sl-space-4);
  white-space: nowrap;
}

#header .sl-d-btns a {
  margin-top: 0;
}

/* The logo keeps the width of its picture: a flex item that shrank drew it a few pixels wide beside a long tagline */
.sl-logo {
  flex: none;
  width: auto;
  height: var(--sl-logo-height);
  margin: 0;
  background: none;
  overflow: visible;
}

.sl-logo img {
  display: block;
  width: auto;
  height: 100%;
  max-width: 100%;
}

.sl-slogan {
  font-size: var(--sl-font-h1);
  line-height: 24px;
  margin: 0;
  color: var(--sl-text-muted);
}

/* Login: header dropdown form and profile pill */
.sl-login-top--head {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  list-style: none;
  padding: 0;
  margin: 0 0 0 var(--sl-space-10);
}

.sl-login-top--head > li {
  float: none;
  display: block;
}

.sl-login-top--head > li + li {
  margin-left: 0;
}

.sl-login-top--head > li > a,
.sl-login-top--head > li > .sl-login-toggle {
  float: none;
  display: block;
  padding: var(--sl-login-pad-y) var(--sl-login-pad-x);
  margin-top: var(--sl-space-2);
  line-height: 20px;
  height: var(--sl-login-height);
  color: var(--sl-text-strong);
  text-decoration: none;
  box-sizing: border-box;
}

.sl-login-top--head > li > .sl-login-toggle {
  background: var(--sl-bg-subtle);
  border: 0;
  border-radius: var(--sl-login-radius);
  box-shadow: none;
  cursor: pointer;
}

.sl-login-top--head > li > .sl-login-toggle .bi {
  display: inline-block;
  margin: calc(var(--sl-space-1) * -1) var(--sl-space-2) 0 calc(var(--sl-space-2) * -1);
  vertical-align: middle;
  font-size: var(--sl-size-icon-sm);
  line-height: 1;
}

.sl-login-top--head > li > .sl-login-link-top {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.sl-login-top--head > li > a:hover,
.sl-login-top--head > li > a:focus-visible,
.sl-login-top--head > li > .sl-login-toggle:hover,
.sl-login-top--head > li > .sl-login-toggle:focus-visible {
  color: var(--sl-text-strong);
}

.sl-login-top--head .sl-login-dropdown {
  position: relative;
}

/* Floating panels: shared arrow geometry and contextual color */
.sl-login-top--head .sl-login-dropdown-form {
  --sl-float-arrow-color: var(--sl-bg);
  position: absolute;
  top: 100%;
  left: calc(50% - 100px);
  z-index: var(--sl-z-dropdown);
  /* display, not visibility: hidden forms must not add scrollable overflow */
  display: none;
  opacity: 0;
  transition: opacity var(--sl-time-base) var(--sl-ease-out);
  transition:
    opacity var(--sl-time-base) var(--sl-ease-out),
    display var(--sl-time-base) allow-discrete;
  width: var(--sl-drop-width);
  padding: var(--sl-drop-pad-y) var(--sl-drop-pad-x);
  margin-top: var(--sl-space-1);
  list-style: none;
  background-color: var(--sl-bg);
  border: 1px solid var(--sl-border-muted);
  border-radius: var(--sl-drop-radius);
  box-shadow: var(--sl-shadow-float);
  background-clip: padding-box;
}

.sl-login-top--head .sl-login-dropdown-form::after {
  filter: drop-shadow(0 -1px 0 var(--sl-border-muted));
}

.sl-login-top--head .sl-login-form {
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: center;
}

.sl-login-top--head .sl-login-form li {
  margin-bottom: var(--sl-space-4);
}

.sl-login-top--head .sl-login-form li.sl-login-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sl-login-gap);
  margin-bottom: 0;
}

.sl-login-top--head .sl-login-field {
  width: var(--sl-login-width);
  height: var(--sl-login-height);
  padding: var(--sl-space-2) var(--sl-space-3);
  box-sizing: border-box;
}

.sl-login-top--head.sl-logged > li > .sl-login-profile {
  position: relative;
  padding-left: calc(var(--sl-size-avatar) + var(--sl-avatar-border) * 2 + var(--sl-space-4));
  background: var(--sl-bg-subtle);
  border: 0;
  border-radius: var(--sl-login-radius);
  box-shadow: none;
}

.sl-login-top--head.sl-logged > li > .sl-login-profile:hover,
.sl-login-top--head.sl-logged > li > .sl-login-profile:focus-visible {
  color: var(--sl-text-strong);
  background: var(--sl-bg-subtle);
}

.sl-login-avatar {
  position: absolute;
  left: 0;
  top: -8px;
  display: inline-block;
  width: var(--sl-size-avatar);
  height: var(--sl-size-avatar);
  border: var(--sl-avatar-border) solid
    var(--sl-bg-subtle);
  border-radius: var(--sl-radius-circle);
  background-color: var(--sl-bg);
  box-sizing: content-box;
  object-fit: cover;
}

.sl-login-top--head.sl-logged > li:last-child > a {
  background: transparent;
  border: 0;
  box-shadow: none;
}

/* Demo pane: header version and info list */
.sl-d-pane {
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: right;
}

.sl-d-pane > li {
  float: none;
  margin-left: var(--sl-space-5);
}

.sl-d-info {
  color: var(--sl-text-muted);
}

.sl-d-version {
  font-size: var(--sl-font-h2);
  font-weight: var(--sl-weight-normal);
}

.sl-d-num {
  color: var(--sl-primary-strong);
  font-weight: var(--sl-weight-normal);
  font-size: var(--sl-font-hero);
  line-height: 40px;
  transform: translateY(-1px);
}

/* Top menu: primary navigation bar and dropdowns */
#hmenu {
  border-top: 1px solid var(--sl-border);
  width: 100%;
  padding: var(--sl-space-5) 0;
  box-shadow: var(--sl-bar-shadow);
  position: relative;
  background: linear-gradient(
    to top,
    var(--sl-surface) 0%,
    var(--sl-bg) 50%
  );
}

#topmenu ul li {
  position: relative;
}

#topmenu > ul {
  display: flex;
  flex-wrap: wrap;
}

/* The gutter takes the step below 15px: eight items fill the bar exactly at 900px, and the step above wrapped the last one */
#topmenu > ul > li > a {
  display: block;
  border-radius: calc(var(--sl-size-control) / 2);
  line-height: var(--sl-size-control);
  height: var(--sl-size-control);
  padding: 0 var(--sl-space-5);
  color: var(--sl-text-strong);
  text-decoration: none;
  font-size: var(--sl-font-h4);
}

#topmenu > ul > li > a:hover,
#topmenu > ul > li:hover > a,
.sl-menu-btn:hover,
.sl-menu-btn:focus-visible {
  color: var(--sl-btn-text);
  background-color: var(--sl-bg-subtle);
  background-image: var(--sl-grad-gloss);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

#topmenu > ul > li > a.sl-home-link.sl-circle-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--sl-size-control);
  height: var(--sl-size-control);
  padding: 0;
  line-height: 1;
  border-radius: calc(var(--sl-size-control) / 2);
  overflow: hidden;
  color: var(--sl-text-strong);
  background-color: transparent;
  background-image: none;
}

#topmenu > ul > li > a.sl-home-link.sl-circle-action .bi {
  font-size: var(--sl-size-icon-sm);
  color: currentColor;
}

.bi-stars {
  font-size: var(--sl-size-icon-sm);
}

#topmenu > ul > li > a.sl-home-link.sl-circle-action:hover,
#topmenu > ul > li > a.sl-home-link.sl-circle-action:focus-visible,
#topmenu > ul > li:hover > a.sl-home-link.sl-circle-action {
  color: var(--sl-band-text);
  background-color: var(--sl-bg-inverse);
  background-image: var(--sl-grad-gloss);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

#topmenu ul ul {
  position: absolute;
  top: 10px;
  margin-top: var(--sl-size-control);
  padding: var(--sl-space-5) 0;
  border-radius: var(--sl-radius-3);
  min-width: var(--sl-menu-width);
  background-color: var(--sl-bg-inverse);
  color: var(--sl-band-text);
  z-index: var(--sl-z-dropdown);
  box-shadow: var(--sl-panel-shadow);
  opacity: 0;
  visibility: hidden;
  transition: all var(--sl-time-slow) var(--sl-ease-out);
}

#topmenu ul ul::after {
  content: "";
  border-bottom: var(--sl-arrow-width) solid var(--sl-bg-inverse);
  border-right: var(--sl-arrow-width) solid transparent;
  border-top: 0 dotted;
  border-left: var(--sl-arrow-width) solid transparent;
  position: absolute;
  left: 15px;
  top: -8px;
}

#topmenu ul ul a {
  white-space: nowrap;
  display: block;
  color: var(--sl-band-text);
  padding: var(--sl-space-2) var(--sl-space-6);
  text-decoration: none;
}

#topmenu ul ul a:hover {
  background-color: var(--sl-primary);
  background-image: var(--sl-grad-gloss);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

#topmenu li:hover ul,
#topmenu li:focus-within ul {
  top: 0;
  opacity: 1;
  visibility: visible;
}

/* The drawer of the menu on a phone: its toggle stands beside the login, and above the step neither the toggle nor its scrim and close show */
.sl-menu-btn,
.sl-menu-close,
.sl-menu-scrim {
  display: none;
}

.sl-menu-btn {
  align-items: center;
  gap: var(--sl-space-2);
  height: var(--sl-size-control);
  margin: var(--sl-space-5) 0 0 auto;
  padding: 0 var(--sl-space-6);
  border: 0;
  border-radius: var(--sl-radius-pill);
  color: var(--sl-text-strong);
  background-color: var(--sl-bg-subtle);
  font: inherit;
  font-weight: var(--sl-weight-bold);
  cursor: pointer;
}

.sl-menu-btn .bi {
  font-size: var(--sl-size-icon-sm);
  line-height: 1;
}

/* The reset of base.css takes the outline of every button, so the toggle draws the ring of the theme itself */
.sl-menu-btn:focus-visible {
  outline: var(--sl-ring-width) solid var(--sl-ring-bg);
  outline-offset: var(--sl-ring-gap);
}

/* Search: header search form */
.sl-search-form {
  display: flex;
  align-items: center;
  gap: var(--sl-space-5);
  width: var(--sl-layout-sidebar);
  max-width: 100%;
}

.sl-search-form button {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 var(--sl-size-control);
  width: var(--sl-size-control);
  height: var(--sl-size-control);
  padding: 0;
  margin: 0;
  border-radius: calc(var(--sl-size-control) / 2);
  border: 0 none;
  appearance: none;
  color: var(--sl-band-text);
  background-color: var(--sl-info-muted);
  background-image: none;
  box-shadow: var(--sl-search-shadow);
  transition:
    background-color var(--sl-time-base) var(--sl-ease-out),
    box-shadow var(--sl-time-base) var(--sl-ease-out);
}

.sl-search-form button .bi {
  font-size: var(--sl-size-icon-sm);
  line-height: 1;
  transition: color var(--sl-time-base) var(--sl-ease-out);
}

.sl-search-form button:hover,
.sl-search-form button:focus-visible {
  background-color: var(--sl-info-subtle);
}

.sl-search-form button.sl-circle-action:hover,
.sl-search-form button.sl-circle-action:focus-visible {
  background-image: var(--sl-grad-gloss);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.sl-search-form input {
  color: var(--sl-text-muted);
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
  height: var(--sl-size-control);
  box-sizing: border-box;
  position: relative;
  padding: 0 var(--sl-space-6);
  margin: 0;
  border-radius: calc(var(--sl-size-control) / 2);
  line-height: var(--sl-size-control);
  background: var(--sl-bg-subtle);
  box-shadow: inset 0 1px 1px 0 var(--sl-scrim-subtle);
  border: 0 none;
}

.sl-search-form input:focus {
  color: var(--sl-text);
}

/* Category header: section intro band */
#head-content {
  height: var(--sl-header-height);
  color: var(--sl-band-text);
  background: var(--sl-primary-subtle) url(../../images/seasons/head-bg.webp)
    no-repeat 50% 0;
  text-shadow: 0 1px 1px var(--sl-scrim-subtle);
  background-size: cover;
}

#head-content .sl-wrp {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: var(--sl-space-11);
  min-height: var(--sl-header-height);
}

#head-content a {
  color: var(--sl-band-text);
}

#head-content .sl-font {
  font-size: var(--sl-font-display);
  font-weight: var(--sl-weight-normal);
  text-transform: uppercase;
  margin: 0;
}

.sl-breadcrumbs {
  font-family:
    "Magistral",
    Arial,
    system-ui,
    -apple-system,
    sans-serif;
  font-size: var(--sl-font-display);
  font-weight: var(--sl-weight-normal);
  list-style: none;
  padding: 0;
  margin: 0;
  max-width: var(--sl-layout-container);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* Demo strip: version and download banner */
#demo-line {
  background-color: var(--sl-primary-subtle);
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: cover;
  color: var(--sl-band-text);
  box-shadow: var(--sl-shadow-inset);
  height: var(--sl-demo-height);
}

/* Each photo band is its own stacking context; the veil is written before the beam and lies under it */
#head-content,
#demo-line {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

#head-content > .sl-wrp,
#demo-line > .sl-wrp {
  position: relative;
  z-index: var(--sl-z-raised);
}

#head-content::before,
#demo-line::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: var(--sl-z-base);
  pointer-events: none;
  background: var(--sl-band-bg);
}

/* The shaft runs from its own width left of the band to a window past it, the same journey on both full-width bands */
#head-content::after,
#demo-line::after {
  content: "";
  position: absolute;
  top: 0;
  left: calc(-1 * var(--sl-beam-width));
  z-index: var(--sl-z-base);
  width: var(--sl-beam-width);
  height: 100%;
  pointer-events: none;
  mix-blend-mode: screen;
  background: linear-gradient(
    90deg,
    transparent,
    var(--sl-beam-bg) 40%,
    var(--sl-beam-bg) 60%,
    transparent
  );
  animation: sl-beam var(--sl-beam-dur) linear infinite;
}

@keyframes sl-beam {
  0% {
    transform: translate3d(0, 0, 0);
    opacity: 0;
  }

  12% {
    opacity: 1;
  }

  32% {
    opacity: 1;
  }

  44%,
  100% {
    transform: translate3d(100vw, 0, 0);
    opacity: 0;
  }
}

#demo-line .sl-wrp {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
}

.sl-demo-line-title {
  font-size: var(--sl-font-display);
  font-weight: var(--sl-weight-normal);
  text-shadow: 0 1px 1px var(--sl-scrim-subtle);
  text-transform: uppercase;
  margin: 0;
}

#demo-line .sl-d-pane {
  display: flex;
  align-items: center;
  margin-top: 0;
}

#demo-line .sl-d-pane > li {
  margin-left: var(--sl-space-5);
}

#demo-line .sl-d-pane .sl-d-info,
#demo-line .sl-d-pane .sl-d-num {
  color: var(--sl-band-text);
}

#demo-line .sl-d-btns {
  display: flex;
  align-items: center;
  gap: var(--sl-space-3);
  padding-left: var(--sl-space-2);
}

#demo-line .sl-d-btns .sl-but {
  margin: 0;
  padding-left: var(--sl-space-6);
  padding-right: var(--sl-space-6);
}

/* Footer: four-column info area */
#footbox {
  background-color: var(--sl-bg-inverse);
  box-shadow: var(--sl-shadow-inset);
  padding: var(--sl-space-8) 0 0 0;
  color: var(--sl-band-text);
}

#footbox address {
  font-style: normal;
}

/* Footer columns: stacked headings and content */
#footbox .sl-grid-1-4 > .sl-grid {
  display: block;
}

.sl-upper-wordmark {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: var(--sl-wordmark-width);
  margin-bottom: var(--sl-space-7);
  text-decoration: none;
  overflow: visible;
}

.sl-upper-wordmark .sl-upper-wordmark-img {
  display: block;
  width: var(--sl-wordmark-img-width);
  height: auto;
}

.sl-upper-wordmark .sl-upper-tagline {
  display: block;
  margin-top: var(--sl-space-1);
  color: var(--sl-text-inverse);
  font-size: var(--sl-font-h4);
  line-height: var(--sl-line-tight);
  white-space: nowrap;
}

.sl-madein,
.sl-madein-brand {
  display: inline-flex;
  flex-direction: row;
  align-items: flex-start;
  gap: var(--sl-space-3);
  width: auto;
  text-decoration: none;
  overflow: visible;
  background: none;
}

.sl-madein-label {
  display: block;
  width: var(--sl-madein-width);
  margin-top: 0;
  color: var(--sl-text-inverse);
  font-size: var(--sl-font-body);
  line-height: 1;
  text-transform: uppercase;
  white-space: normal;
}

.sl-copyright,
.sl-license {
  display: block;
  margin-bottom: var(--sl-space-7);
  color: var(--sl-band-text);
  text-wrap: balance;
}

.sl-generates {
  display: block;
  margin-bottom: var(--sl-space-7);
  color: var(--sl-text-subtle);
  text-wrap: balance;
}

.sl-copyright a,
.sl-license a {
  color: var(--sl-band-text);
}

.sl-fp-moder {
  position: absolute;
  margin-top: var(--sl-space-7);
  margin-bottom: var(--sl-space-7);
  bottom: -10px;
}

.sl-f-title {
  font-size: var(--sl-font-h1);
  font-weight: var(--sl-weight-normal);
  margin: calc(var(--sl-space-2) * -1) 0 0;
}

.sl-f-title::after {
  content: "";
  display: block;
  background-color: var(--sl-text-subtle);
  width: var(--sl-f-title-width);
  height: var(--sl-f-title-height);
  margin: var(--sl-space-7) 0 var(--sl-space-7) 0;
}

/* Footer menu: bottom link bar */
#footbox > .sl-wrp:last-child {
  width: 100%;
  margin: 0;
  background-color: var(--sl-surface-sunken);
  padding: 0;
}

#footbox > .sl-wrp:last-child > .sl-fmenu {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  row-gap: var(--sl-space-3);
  width: min(100% - var(--sl-space-9), var(--sl-layout-container));
  margin: 0 auto;
  position: relative;
  z-index: var(--sl-z-raised);
  min-height: var(--sl-fmenu-height);
}

.sl-fmenu {
  display: inline;
  color: var(--sl-text-inverse);
}

.sl-fmenu a {
  color: var(--sl-text-inverse);
}

.sl-fmenu a:hover {
  color: var(--sl-band-text);
}

.sl-fmenu ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  min-width: 0;
  list-style: none;
  padding: 0;
  margin: 0;
}

.sl-fmenu .sl-pull-right {
  margin-left: auto;
}

/* An icon before every label separates the items at every width, where a ::before bar would hang at the start of a wrapped row */
.sl-fmenu ul li a,
.sl-fmenu .sl-pull-right {
  display: inline-flex;
  align-items: center;
  gap: var(--sl-space-4);
  min-height: var(--sl-fmenu-min-height);
}

.sl-fmenu .bi {
  font-size: var(--sl-size-icon-sm);
  line-height: 1;
  opacity: var(--sl-fade-subtle);
}

/* No column gap on the widest step: the separator carries its own margin, and a gap pushed the advertising link onto its own line */
#footbox > .sl-wrp:last-child > .sl-fmenu ul {
  row-gap: var(--sl-space-3);
}

/* On the widest step the menu is one row that does not wrap, so the bar between two items can never hang */
.sl-fmenu ul li::before {
  content: "";
  display: inline-block;
  width: 1px;
  height: var(--sl-sep-height);
  vertical-align: middle;
  background-color: var(--sl-border-inverse);
  margin: 0 var(--sl-space-7);
}

.sl-fmenu ul li:first-child::before {
  display: none;
}

/* Below the wide step the advertising link leans on float: right, inert in the flex row above */
@media (max-width: 1200px) {
  #footbox > .sl-wrp:last-child > .sl-fmenu {
    display: block;
    padding: var(--sl-space-6) 0;
  }

  .sl-fmenu ul li::before {
    display: none;
  }

  #footbox > .sl-wrp:last-child > .sl-fmenu ul {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    column-gap: var(--sl-space-6);
  }

  #footbox > .sl-wrp:last-child > .sl-fmenu .sl-pull-right {
    float: none;
    width: 100%;
    margin: var(--sl-space-4) 0 0;
    padding-top: var(--sl-space-4);
    border-top: 1px solid var(--sl-border-inverse);
  }
}

/* The phone: two columns of four */
@media (max-width: 768px) {
  #footbox > .sl-wrp:last-child > .sl-fmenu ul {
    grid-template-columns: 1fr 1fr;
    column-gap: var(--sl-space-5);
  }

  #footbox > .sl-wrp:last-child > .sl-fmenu .sl-pull-right {
    margin-top: var(--sl-space-5);
    padding-top: var(--sl-space-5);
  }
}

/* Content: main column blocks and side panels */
#container {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  column-gap: var(--sl-layout-gutter);
  padding: var(--sl-space-8) 0;
}

/* A side track exists only where the module rendered that side, named on the container, since the aside comes after the content */
@media (width > 900px) {
  #container.sl-has-left {
    grid-template-columns: var(--sl-layout-sidebar) minmax(0, 1fr);
  }

  #container.sl-has-right {
    grid-template-columns: minmax(0, 1fr) var(--sl-layout-sidebar);
  }

  #container.sl-has-left.sl-has-right {
    grid-template-columns: var(--sl-layout-sidebar) minmax(0, 1fr) var(--sl-layout-sidebar);
  }
}

#content {
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}

#content img,
#content picture,
#content video,
#content canvas,
#content svg {
  max-width: 100%;
  height: auto;
}

#content pre {
  max-width: 100%;
  overflow-x: auto;
  white-space: pre;
}

/* Inside a code block the body scrolls and not the pre, or the keyboard focus would sit on a box that cannot move */
#content .sl-code-body pre {
  overflow-x: visible;
}

#content code,
#content kbd,
#content samp {
  overflow-wrap: anywhere;
}

#content iframe,
#content object,
#content embed {
  display: block;
  max-width: 100%;
}

#content video {
  display: block;
  max-width: 100%;
  height: auto;
}

#content blockquote {
  overflow-wrap: anywhere;
  word-break: break-word;
}

#sidebar {
  min-width: 0;
}

/* News: titles */
.sl-heading {
  font-size: var(--sl-font-h2);
  margin: 0 0 var(--sl-space-5) 0;
}

.sl-heading a {
  color: var(--sl-text);
}

/* Comments: comment card layout */
.sl-comment {
  display: flex;
  gap: var(--sl-space-9);
  margin-bottom: var(--sl-space-8);
}

/* A reply and a row of a check list tree are indented by their depth, which the row carries as a custom property rather than as one class per level */
[style*="--sl-d-depth"] {
  margin-left: min(calc(var(--sl-d-depth, 0) * var(--sl-space-8)), 50%);
}

/* Comments: a removed comment that still carries replies keeps its place as a tombstone */
.sl-com-gone .sl-com-cont {
  background-color: transparent;
  padding: 0;
}

.sl-com-gone .sl-com-cont::before {
  display: none;
}

/* Comments: the comment the submit form is currently replying to */
.sl-com-reply-at .sl-com-cont {
  outline: var(--sl-ring-width) solid var(--sl-ring-bg);
  outline-offset: var(--sl-ring-gap);
}

.sl-com-ava {
  border-radius: var(--sl-radius-circle);
  border: var(--sl-com-ava-border) solid var(--sl-text-strong);
  padding: var(--sl-space-3);
  margin: 0 auto;
  width: var(--sl-com-ava-width);
  height: var(--sl-com-ava-height);
  box-sizing: content-box;
  display: block;
}

.sl-com-left {
  flex: none;
  width: var(--sl-com-width);
}

.sl-com-left li {
  width: var(--sl-com-item-width);
  margin: 0 auto;
  text-align: center;
}

.sl-com-left .sl-min-rate {
  margin-top: var(--sl-space-3);
  text-align: center;
}

.sl-com-cont {
  background-color: var(--sl-bg-subtle);
  position: relative;
  display: flow-root;
  padding: var(--sl-space-6) var(--sl-space-7);
  border-radius: 0 var(--sl-radius-1) var(--sl-radius-1) var(--sl-radius-1);
}

.sl-com-cont::before {
  content: "";
  position: absolute;
  left: -16px;
  top: 0;
  border: solid transparent;
  border-right-color: var(--sl-bg-subtle);
  border-width: 0 var(--sl-com-arrow-width) var(--sl-com-arrow-width) 0;
}

.sl-carg {
  display: inline-block;
  margin-right: var(--sl-space-6);
}

.sl-carg h1 {
  display: inline;
  margin: 0;
  font-size: inherit;
  color: inherit;
  font-weight: var(--sl-weight-bold);
}

.sl-cargs {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sl-space-2);
  font-size: var(--sl-font-small);
}

.sl-com-top {
  display: grid;
  grid-template-columns: 130px auto 1fr;
  align-items: center;
  gap: var(--sl-space-3);
  margin-bottom: var(--sl-space-3);
}

.sl-com-top > .sl-carg {
  margin-right: 0;
  min-width: 0;
  justify-self: start;
}

/* Info tip + name pair: flex eats the inter-fragment whitespace so the gap is exactly the tip margin, and centres the icon against the name */
.sl-com-top > .sl-carg:first-child,
.sl-fp-nickname {
  display: flex;
  align-items: center;
}

.sl-com-edit {
  grid-column: 3;
  justify-self: end;
}

/* Forum: category list and post layout */
.sl-ft-topics {
  margin-bottom: var(--sl-space-7);
}

.sl-ft-topics .sl-fl-col-content h3 {
  margin: 0;
}

td.sl-fl-col-icon {
  width: var(--sl-forum-width);
  padding-right: 0;
}

/* The last message keeps each of its lines whole and starts them at the left in both tables; the column grows to the longest */
.sl-forum-table td.sl-fl-col-last {
  width: var(--sl-col-last-width);
  text-align: left;
}

.sl-forum-last li {
  white-space: nowrap;
}

.sl-fl-col-user {
  white-space: nowrap;
}

.sl-fl-col-user .bi {
  font-size: var(--sl-size-icon-xs);
}

th.sl-fl-col-num,
td.sl-fl-col-num {
  text-align: center;
  width: var(--sl-col-num-width);
  padding-right: 0;
  padding-left: 0;
}

th.sl-fl-col-stat,
td.sl-fl-col-stat {
  text-align: center;
  width: var(--sl-col-status-width);
  padding-right: 0;
  padding-left: 0;
  white-space: nowrap;
}

/* A sortable count keeps the lane of its mark on the right of its title and of every cell alike, as the panel does, so the title
   stands over the middle of its numbers at the width of the longer and leaves the rest of the row to the title of a topic */
[data-sl-table-sort] :is(th, td).sl-fl-col-stat {
  padding-right: var(--sl-space-8);
  padding-left: var(--sl-space-2);
}

.sl-fl-col-content h4,
.sl-fl-col-content h3 {
  font-size: var(--sl-font-body);
  margin: 0;
}

.sl-forum-description {
  margin: var(--sl-space-1) 0 0 0;
}

.sl-forum-last {
  list-style: none;
  padding: 0;
  margin: 0;
  color: var(--sl-text-strong);
}

.sl-forum-last img {
  vertical-align: middle;
  margin-top: calc(var(--sl-space-2) * -1);
}

/* A section of the forum wears the category tile of a material; a mark on its corner says new messages with the live dot of the user block, or a closed section; a read one wears none */
.sl-icat.sl-forum-ico {
  position: relative;
  float: none;
  margin: 0 auto;
}

.sl-forum-mark {
  position: absolute;
  top: calc(var(--sl-space-2) * -1);
  right: calc(var(--sl-space-2) * -1);
  width: var(--sl-live-dot-width);
  height: var(--sl-live-dot-height);
  border-radius: var(--sl-radius-circle);
}

.sl-forum-mark-new {
  padding: var(--sl-live-dot-border);
}

.sl-forum-mark.sl-forum-mark-lock {
  display: grid;
  place-items: center;
  width: var(--sl-size-icon-sm);
  height: var(--sl-size-icon-sm);
  border: 1px solid var(--sl-border);
  background: var(--sl-bg);
  color: var(--sl-text-subtle);
}

.sl-icat .sl-forum-mark .bi {
  font-size: var(--sl-font-micro);
  line-height: 1;
  color: inherit;
  transform: none;
}

/* The phone: a forum table is a list of cards, the counts and the last message under the title */
@media (max-width: 768px) {
  .sl-forum-table,
  .sl-forum-table tbody {
    display: block;
  }

  .sl-forum-table thead {
    display: none;
  }

  .sl-forum-table .sl-forum-line {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--sl-space-2) var(--sl-space-5);
    padding: var(--sl-space-5) 0;
    border-bottom: 1px solid var(--sl-border);
  }

  .sl-forum-table .sl-forum-line td {
    display: block;
    width: auto;
    max-width: none;
    padding: 0;
    border: 0;
    text-align: left;
  }

  /* A topic: the title beside its box, then the counts in one wrapping line, then the last message */
  .sl-forum-table .sl-fl-col-content,
  .sl-forum-table .sl-fl-col-last {
    flex: 1 0 100%;
    min-width: 0;
  }

  .sl-forum-table .sl-forum-line:has(.sl-col-check) .sl-fl-col-content {
    flex-basis: calc(100% - var(--sl-col-check-width) - var(--sl-space-5));
  }

  .sl-forum-table .sl-forum-line td.sl-col-check {
    order: -1;
    margin-left: auto;
  }

  .sl-forum-table .sl-forum-line .sl-fl-col-content {
    order: -2;
  }

  /* A section: its tile stands beside the title, the counts and the last message under the title */
  .sl-forum-table .sl-forum-line:has(.sl-fl-col-icon) {
    display: grid;
    grid-template-columns: var(--sl-size-tile) repeat(2, auto) minmax(0, 1fr);
    align-items: start;
  }

  .sl-forum-table .sl-fl-col-icon {
    grid-row: 1 / span 3;
  }

  .sl-forum-table .sl-forum-line:has(.sl-fl-col-icon) :is(.sl-fl-col-content, .sl-fl-col-last) {
    grid-column: 2 / -1;
  }

  .sl-forum-table .sl-fl-col-stat[data-label]::before {
    content: attr(data-label) ":";
    margin-right: var(--sl-space-2);
    color: var(--sl-text-muted);
  }

  .sl-forum-table .sl-forum-last {
    display: flex;
    flex-wrap: wrap;
    gap: 0 var(--sl-space-5);
  }
}

.sl-forum-top .sl-pull-right,
.sl-forum-foot .sl-pull-right {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--sl-space-3) var(--sl-space-5);
  min-width: 0;
}

/* The head of a topic is one row: the title on the left and its buttons on the right share one middle line, and the row takes the margin of the title */
.sl-forum-top {
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
  align-items: center;
  gap: var(--sl-space-7);
  margin-bottom: var(--sl-space-5);
}

.sl-forum-top .sl-heading {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.sl-forum-top .sl-pull-right {
  flex: none;
  float: none;
}

.sl-forum-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sl-space-3) var(--sl-space-5);
  margin-bottom: var(--sl-space-7);
}

/* The pager shares the foot with the topic buttons; a container of inline size has no width of its own, so it is given one and wraps under them when the line is short */
.sl-forum-foot .sl-pager {
  flex: 1 1 var(--sl-layout-sidebar);
  min-width: 0;
  padding: 0;
  border-top: 0;
}

/* The buttons of the foot keep to the right, with or without a pager before them */
.sl-forum-foot .sl-pull-right {
  float: none;
  margin: 0 0 0 auto;
}

.sl-forum-list-info {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: stretch;
  gap: var(--sl-space-3) 0;
}

.sl-forum-list-info .sl-grid {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: auto;
  margin: 0;
  flex: 0 0 auto;
}

.sl-forum-list-info > ul:last-child {
  text-align: right;
}

.sl-forum-list-info ul li {
  margin: var(--sl-space-2) 0;
}

.sl-forum-list-info img {
  vertical-align: middle;
  margin: calc(var(--sl-space-2) * -1) var(--sl-space-2) 0 0;
}

/* The actions of a moderator take a line of their own under the pager and the buttons every reader sees, and stand on the
   right as the bulk panel of a panel list: the count of the checked rows, the select and its button on a surface rounded
   as the buttons are */
.sl-forum-moder {
  display: flex;
  flex: 1 0 100%;
  justify-content: flex-end;
  min-width: 0;
}

.sl-forum-moder-bar {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: var(--sl-space-3);
  min-width: 0;
  padding: var(--sl-space-3) var(--sl-space-3) var(--sl-space-3) var(--sl-space-6);
  border-radius: var(--sl-radius-pill);
  background-color: var(--sl-surface);
}

/* The bar keeps one line, a pill as the buttons are: on a narrow screen the select gives way, never the count or the button */
.sl-forum-moder select {
  flex: 0 1 auto;
  min-width: 0;
  max-width: var(--sl-drop-width);
}

.sl-forum-picked {
  color: var(--sl-text-muted);
  white-space: nowrap;
}

.sl-forum-post {
  position: relative;
  padding: var(--sl-space-5) 0;
  width: 100%;
}

.sl-forum-post-in {
  display: flex;
  gap: var(--sl-space-6);
}

.sl-fp-left {
  order: -1;
  flex: none;
  width: var(--sl-fp-width);
  text-align: center;
}

.sl-fp-nickname {
  justify-content: center;
  border-radius: var(--sl-radius-2);
  position: relative;
  min-height: var(--sl-fp-height);
  margin-bottom: var(--sl-space-5);
  border: 1px solid var(--sl-border);
}

.sl-fp-nickname b {
  display: inline-block;
  vertical-align: middle;
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.sl-fp-nickname::after,
.sl-fp-nickname::before {
  content: "";
  display: block;
  position: absolute;
  bottom: -9px;
  left: 50%;
  margin-left: calc(var(--sl-space-3) * -1);
  border-top: var(--sl-arrow-width) solid var(--sl-border);
  border-right: var(--sl-arrow-width) solid transparent;
  border-bottom: 0 dotted;
  border-left: var(--sl-arrow-width) solid transparent;
}

.sl-fp-nickname::after {
  bottom: -8px;
  border-top-color: var(--sl-bg);
  z-index: var(--sl-z-raised);
}

.sl-fp-user-info {
  list-style: none;
  margin: var(--sl-space-5) 0 0;
  padding: 0;
  font-size: var(--sl-font-small);
}

.sl-fp-meta {
  background-color: var(--sl-bg-subtle);
  border-radius: var(--sl-radius-2);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sl-space-3) var(--sl-space-3);
  line-height: 20px;
  padding: var(--sl-space-3);
  margin-bottom: var(--sl-space-5);
}

.sl-fp-meta .sl-grey {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sl-space-2);
  font-size: var(--sl-font-small);
  order: 0;
}

.sl-fp-meta .sl-pull-right {
  display: flex;
  align-items: center;
  gap: var(--sl-space-3);
  order: 1;
}

.sl-fp-meta .sl-pull-right .sl-min-rate {
  float: none;
}

/* Polls: voting widget layout */
.sl-post-vote {
  padding: var(--sl-space-8) 0;
  display: flow-root;
  border-bottom: 1px solid var(--sl-border-subtle);
  margin-bottom: var(--sl-space-8);
}

.sl-progress-info {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--sl-space-3);
  align-items: baseline;
}

.sl-progress-info .sl-pull-right {
  color: var(--sl-text-muted);
}

.sl-progress-info b {
  font-weight: var(--sl-weight-normal);
}

/* Seasonal: the bands take colour and photo as longhands, because the shorthand resets the cover size their base rules declare */
.sl-winter #demo-line {
  background-color: var(--sl-season-winter);
  background-image: url(../../images/seasons/winter-foot.webp);
}

.sl-winter #head-content {
  background-color: var(--sl-season-winter);
  background-image: url(../../images/seasons/winter-cat.webp);
  background-position: 50% 50%;
}

.sl-autumn #demo-line {
  background-color: var(--sl-season-autumn);
  background-image: url(../../images/seasons/autumn-foot.webp);
}

.sl-autumn #head-content {
  background-color: var(--sl-season-autumn);
  background-image: url(../../images/seasons/autumn-cat.webp);
  background-position: 50% 50%;
}

.sl-summer #demo-line {
  background-color: var(--sl-season-summer);
  background-image: url(../../images/seasons/summer-foot.webp);
}

.sl-summer #head-content {
  background-color: var(--sl-season-summer);
  background-image: url(../../images/seasons/summer-cat.webp);
  background-position: 50% 50%;
}

.sl-spring #demo-line {
  background-color: var(--sl-season-spring);
  background-image: url(../../images/seasons/spring-foot.webp);
}

.sl-spring #head-content {
  background-color: var(--sl-season-spring);
  background-image: url(../../images/seasons/spring-cat.webp);
  background-position: 50% 50%;
}

.sl-newyear #demo-line {
  background-color: var(--sl-season-newyear);
  background-image: url(../../images/seasons/newyear-foot.webp);
}

.sl-newyear #head-content {
  background-color: var(--sl-season-newyear);
  background-image: url(../../images/seasons/newyear-cat.webp);
  background-position: 50% 50%;
}

/* Marquee: scrolling header line */
.sl-head-marquee {
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  animation: step var(--sl-marquee-dur) var(--sl-marquee-ease) 1;
}

@keyframes step {
  0% {
    width: 0;
  }

  100% {
    width: 100%;
  }
}

/* Chips: one pill for every meta label, toned by meaning; emitters add sl-chip and a tone */
/* The tabs of the activity feed wear the chip, so the feed carries no pill of its own */
.sl-chip,
.sl-profile-feed .sl-tabs-link {
  display: inline-flex;
  align-items: center;
  gap: var(--sl-space-2);
  box-sizing: border-box;
  height: var(--sl-size-chip);
  padding: 0 var(--sl-space-3);
  border: 1px solid transparent;
  border-radius: var(--sl-radius-pill);
  background: var(--sl-bg-subtle);
  color: var(--sl-text-strong);
  font-family: Arial, system-ui, -apple-system, sans-serif;
  font-size: var(--sl-font-small);
  line-height: 1;
  white-space: nowrap;
  vertical-align: middle;
  text-decoration: none;
  transition: background-color var(--sl-time-base) var(--sl-ease-out);

  & .bi {
    font-size: var(--sl-size-icon-xs);
  }
}

/* Author name link: align person icon + name with the same gap/centering as sibling chips */
.sl-author {
  display: inline-flex;
  align-items: center;
  gap: var(--sl-space-2);
}

#footbox a.sl-author {
  color: var(--sl-primary-inverse);
}

a.sl-author {
  transition: color var(--sl-time-base) var(--sl-ease-out);

  &:hover {
    color: var(--sl-primary-strong);
  }
}

/* Clickable meta chips default to the success tone; a tone class names only its colour */
a.sl-chip {
  background: var(--sl-chip-bg);
  color: var(--sl-success);

  &:hover {
    background: var(--sl-chip-hover-bg, var(--sl-chip-tint-bg));
  }
}

/* Tone classes come after the link default, so an explicit sl-chip-* tone wins on spans and links alike */
.sl-chip-info,
a.sl-chip-info,
.sl-profile-feed .sl-tabs-link.sl-is-active,
.sl-fresh-week {
  background: var(--sl-chip-bg);
  color: var(--sl-primary-strong);
}

.sl-chip-success,
a.sl-chip-success {
  background: var(--sl-chip-bg);
  color: var(--sl-success);
}

.sl-chip-warn,
a.sl-chip-warn {
  background: var(--sl-chip-bg);
  color: var(--sl-warning);
}

.sl-chip-danger,
a.sl-chip-danger {
  background: var(--sl-chip-bg);
  color: var(--sl-danger);
  cursor: pointer;
}

.sl-chip-accent,
a.sl-chip-accent {
  background: var(--sl-chip-bg);
  color: var(--sl-accent);
}

.sl-chip-neutral,
a.sl-chip-neutral {
  background: var(--sl-bg-subtle);
  color: var(--sl-text-strong);
  --sl-chip-hover-bg: color-mix(
    in srgb,
    var(--sl-text-strong) 8%,
    var(--sl-bg-subtle)
  );
}

/* Chips wrapping a link are clickable too: same hover deepening */
.sl-chip:has(> a):hover {
  background: var(--sl-chip-hover-bg, var(--sl-chip-tint-bg));
}

/* Label-less chip: a state flag is one glyph, so equal width and height turn the pill into a round badge instead of leaving empty side padding around the icon */
.sl-chip-icon {
  justify-content: center;
  width: var(--sl-size-chip);
  padding: 0;
}

/* IP meta chip (moderators): the inner IP link inherits the chip tone */
.sl-chip.sl-geo-ip a {
  color: inherit;
  text-decoration: none;
}

/* Plain icon controls (not chips): the plus action + forum/topic state glyphs */
.sl-plus .bi,
.sl-forum-jump .bi,
.sl-topic-new .bi,
.sl-topic-old .bi,
.sl-topic-popular-new .bi,
.sl-topic-popular-old .bi,
.sl-topic-announcement .bi,
.sl-topic-hot .bi,
.sl-topic-moderated .bi,
.sl-topic-admin .bi,
.sl-topic-closed .bi,
.sl-topic-pending .bi {
  color: var(--sl-primary);
  font-size: var(--sl-size-icon-xs);
  line-height: 1;
  vertical-align: middle;
  position: relative;
  top: -1px;
}

/* Comment date/edit chips keep the compact 13px glyph of the meta row */
.sl-chip.sl-topic-post .bi,
.sl-chip.sl-topic-edit .bi {
  font-size: var(--sl-font-small);
}

.sl-topic-old .bi,
.sl-topic-popular-old .bi,
.sl-topic-closed .bi {
  color: var(--sl-text-subtle);
}

.sl-topic-hot .bi,
.sl-topic-admin .bi {
  color: var(--sl-warning);
}

.sl-topic-moderated .bi {
  color: var(--sl-success);
}

/* Bootstrap Icons migration (phase 2): rating stars via bi half-stars */
.sl-urating {
  display: inline-flex;
  align-items: center;
  margin-inline: calc(var(--sl-space-2) / -2);
  width: auto;
  height: auto;
  background: none;
  text-indent: 0;
  line-height: 1;
}

.sl-urating .sl-star {
  display: inline-flex;
  padding-inline: calc(var(--sl-space-2) / 2);
  color: inherit;
  text-decoration: none;
}

.sl-urating a.sl-star {
  cursor: pointer;
}

.sl-urating .bi {
  font-size: var(--sl-size-icon-sm);
  line-height: 1;
  color: var(--sl-primary);
}

.sl-urating .bi-star {
  color: var(--sl-border-strong);
}

/* Hover preview overlaid on the current rating: the track up to the pointer fills and brightens, later stars keep their state so the existing rating never disappears */
.sl-urating a.sl-star:hover .bi {
  color: var(--sl-primary-strong);
}

.sl-urating a.sl-star:hover .bi::before {
  content: "\f586";
}

.sl-urating a.sl-star:has(~ a.sl-star:hover) .bi {
  color: var(--sl-primary-strong);
}

.sl-urating a.sl-star:has(~ a.sl-star:hover) .bi::before {
  content: "\f586";
}

.sl-min-rate .sl-urating .bi {
  font-size: var(--sl-size-icon-xs);
}

@media (width > 900px) {
  #hmenu > .sl-wrp {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
  }

  .sl-meta {
    margin-bottom: var(--sl-space-6);
    padding-bottom: var(--sl-space-6);
  }

  .sl-entry-content {
    margin-bottom: var(--sl-space-6);
  }

  .sl-meta-foot .sl-rate-box {
    margin-top: 0;
  }

  .sl-block {
    margin-bottom: var(--sl-space-7);
    padding: var(--sl-space-5) var(--sl-space-6);
  }

  .sl-block .sl-vote-tools,
  .sl-block-tools {
    top: var(--sl-space-5);
  }

  .sl-grid {
    margin: 0 0 var(--sl-space-7) 0;
  }
}

/* A row inside a box narrow by design reads that box and not the window */
@container sl-form-box (max-width: 900px) {
  .sl-form-row {
    grid-template-columns: 1fr;
    gap: var(--sl-space-3);
    align-items: start;
  }
}

/* Responsive fallbacks: shell, menus and content blocks */
@media (max-width: 900px) {
  .sl-wrp {
    width: min(100% - var(--sl-space-8), var(--sl-layout-container));
  }

  .sl-form-row,
  .sl-value-row {
    grid-template-columns: 1fr;
    gap: var(--sl-space-3);
    align-items: start;
  }

  .sl-grid-1-3,
  .sl-grid-1-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #footbox > .sl-wrp > .sl-grid:first-child {
    display: block;
    width: 100%;
    max-width: 100%;
  }

  #footbox > .sl-wrp > .sl-grid:first-child > * {
    float: none;
    width: auto;
    max-width: 100%;
    min-width: 0;
  }

  /* A phone: the menu leaves the bar for a drawer from the side over a scrim, behind the toggle of the header */
  #hmenu {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: var(--sl-z-modal);
    width: min(var(--sl-layout-sidebar), calc(100vw - var(--sl-space-8)));
    padding: var(--sl-space-5) 0;
    overflow-x: hidden;
    overflow-y: auto;
    border-top: 0;
    background: var(--sl-bg);
    box-shadow: var(--sl-shadow-float);
    transform: translateX(-100%);
    visibility: hidden;
    transition: transform var(--sl-time-slow) var(--sl-ease-out), visibility var(--sl-time-slow) var(--sl-ease-out);
  }

  /* Shown at once, so the focus can enter; hidden only once the slide out has ended */
  body[data-sl-drawer] #hmenu {
    transform: none;
    visibility: visible;
    transition: transform var(--sl-time-slow) var(--sl-ease-out);
  }

  body[data-sl-drawer] .sl-menu-scrim {
    position: fixed;
    inset: 0;
    z-index: var(--sl-z-modal);
    display: block;
    background: var(--sl-scrim);
  }

  #hmenu > .sl-wrp {
    display: flex;
    flex-direction: column;
  }

  .sl-menu-btn,
  .sl-menu-close {
    display: inline-flex;
  }

  .sl-menu-close {
    align-self: flex-end;
    flex: none;
    margin-bottom: var(--sl-space-5);
    color: var(--sl-text-strong);
    background-color: var(--sl-bg-subtle);
  }

  .sl-changelog-filter-top {
    flex-direction: column;
    align-items: stretch;
  }

  .sl-changelog-filter-top .sl-changelog-filter-field {
    flex: 1 1 auto;
    width: 100%;
  }

  .sl-changelog-filter-actions {
    width: 100%;
    margin-left: 0;
    flex-wrap: wrap;
  }

  .sl-changelog-filter-actions .sl-but {
    flex: 1 1 160px;
  }

  /* Tablet and mobile grids: keep card gutters inside the wrapper */
  .sl-grid {
    margin: 0 0 var(--sl-space-7) 0;
  }

  #topbar {
    height: auto;
    padding: var(--sl-space-5) 0 var(--sl-space-3);
  }

  .sl-top-contact,
  .sl-top-social,
  .sl-login-top,
  .sl-d-pane {
    float: none;
  }

  .sl-top-contact li {
    float: none;
    display: inline-block;
    margin: 0 var(--sl-space-5) var(--sl-space-3) 0;
  }

  #topbar .sl-wrp {
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: var(--sl-space-3) var(--sl-space-5);
  }

  #header .sl-wrp {
    flex-wrap: wrap;
    align-items: flex-start;
  }

  /* Hide the header version/download pane on small screens: it duplicates the identical CTA in #demo-line and the footer, and declutters the wrapped header */
  #header .sl-d-pane {
    display: none;
  }

  #demo-line .sl-d-pane {
    flex: 0 1 auto;
    min-width: 0;
    max-width: 100%;
    flex-wrap: wrap;
    margin-top: 0;
  }

  .sl-top-contact,
  .sl-top-social,
  .sl-top-right {
    width: 100%;
  }

  .sl-top-right {
    flex: 1 1 auto;
    margin-left: 0;
  }

  .sl-top-social {
    margin: 0;
  }

  #header {
    padding: var(--sl-space-7) 0 var(--sl-space-6);
  }

  .sl-logo,
  .sl-slogan {
    float: none;
    margin-right: 0;
    margin-left: 0;
  }

  .sl-slogan {
    margin-top: var(--sl-space-5);
  }

  .sl-login-top {
    margin-left: 0;
    margin-top: var(--sl-space-5);
  }

  .sl-login-top > li {
    float: none;
    display: inline-block;
  }

  /* Inside the drawer the menu is one column, and a branch opens under its item */
  #topmenu > ul {
    display: block;
  }

  #topmenu > ul > li {
    display: block;
    margin: 0 0 var(--sl-space-2);
  }

  #topmenu > ul > li > a {
    display: block;
    width: 100%;
    box-sizing: border-box;
  }

  #topmenu ul ul {
    position: static;
    display: none;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    margin: var(--sl-space-2) 0 var(--sl-space-3);
    padding: var(--sl-space-3) 0;
    opacity: 1;
    visibility: visible;
    box-shadow: none;
  }

  #topmenu li:hover > ul,
  #topmenu li:focus-within > ul {
    display: block;
    top: auto;
  }

  #topmenu ul ul a {
    white-space: normal;
  }

  .sl-search-form {
    float: none;
    width: 100%;
    margin-top: var(--sl-space-5);
  }

  .sl-search-form input {
    width: auto;
  }

  #head-content,
  #demo-line {
    height: auto;
    min-height: 0;
    padding: var(--sl-space-7) 0;
  }

  #head-content .sl-font,
  .sl-breadcrumbs,
  .sl-demo-line-title {
    float: none;
    margin-right: 0;
  }

  .sl-breadcrumbs {
    max-width: none;
    overflow: visible;
    white-space: normal;
  }

  .sl-demo-line-title {
    margin-top: 0;
    margin-bottom: var(--sl-space-5);
  }

  #demo-line .sl-wrp {
    flex-direction: column;
    align-items: flex-start;
    height: auto;
  }

  #container {
    padding: 0 0 var(--sl-space-10);
  }

  #leftbar,
  #sidebar {
    margin-top: var(--sl-space-7);
  }

  .sl-comment,
  .sl-forum-post-in {
    flex-direction: column;
    gap: 0;
  }

  .sl-comment,
  .sl-forum-post,
  .sl-fp-meta,
  .sl-fp-nickname {
    height: auto;
  }

  .sl-com-left,
  .sl-fp-left {
    order: 0;
    width: auto;
    margin: 0 0 var(--sl-space-6);
    padding-right: 0;
    text-align: left;
  }

  .sl-com-left li {
    width: auto;
  }

  .sl-com-right,
  .sl-fp-right {
    width: auto;
  }

  .sl-table-shell {
    max-width: 100%;
  }
}

@media (max-width: 768px) {
  /* Fixed left-edge vertical tabs are a desktop-gutter pattern; on mobile they overlap the menu and block taps, so hide them (the CTAs remain in the footer and main menu) */
  #block-idea,
  #block-feedback {
    display: none;
  }

  /* Phones: content reads better one step larger; fields need 16px or iOS zooms the page on focus */
  body,
  select,
  input,
  textarea {
    font-size: var(--sl-font-h4);
  }

  .sl-grid-1-3,
  .sl-grid-1-4 {
    grid-template-columns: minmax(0, 1fr);
  }

  .sl-login-top--head {
    --sl-login-width: 100%;
  }

  /* The closed dropdown is viewport-fixed so its off-screen box never widens the page; .sl-is-open brings it into view */
  .sl-login-top--head .sl-login-dropdown-form {
    position: fixed;
    left: 0;
    width: min(var(--sl-login-drop-width), calc(100vw - var(--sl-space-8)));
    max-width: calc(100vw - var(--sl-space-8));
  }

  .sl-search-form {
    width: 100%;
  }

  .sl-search-form input {
    width: auto;
  }
}

@media (max-width: 560px) {
  .sl-wrp {
    width: min(100% - var(--sl-space-6), var(--sl-layout-container));
  }

  /* Bottom footer menu: match the 8px page gutter, tighten dividers and keep the ad link in the wrap flow */
  #footbox > .sl-wrp:last-child > .sl-fmenu {
    width: min(100% - var(--sl-space-6), var(--sl-layout-container));
  }

  .sl-fmenu ul li::before {
    margin: 0 var(--sl-space-4);
  }

  .sl-fmenu .sl-pull-right {
    margin-left: 0;
  }

  .sl-top-contact li {
    display: block;
    width: 100%;
  }

  .sl-head-marquee {
    width: 100%;
    white-space: normal;
    overflow: hidden;
    overflow-wrap: anywhere;
    animation: none;
  }

  #footbox > .sl-wrp > .sl-grid {
    width: 100%;
    max-width: 100%;
  }

  #footbox > .sl-wrp > .sl-grid + .sl-grid {
    margin-top: var(--sl-space-7);
  }

  #footbox .sl-list-item > li > a {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  #footbox .sl-list-item > li {
    width: 100%;
    min-width: 0;
  }

  #footbox .sl-list-item {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  #footbox .sl-forum-meta-item {
    white-space: nowrap;
  }

  .sl-partners {
    margin-right: 0;
  }

  .sl-grid {
    margin-left: 0;
    margin-right: 0;
  }

  .sl-logo {
    width: auto;
    height: var(--sl-logo-height);
  }

  .sl-login-top--head {
    --sl-login-pad-x: 10px;
  }

  #topmenu > ul > li > a {
    padding: var(--sl-space-2) var(--sl-space-4);
    font-size: inherit;
  }

  .sl-search-form input {
    padding-right: var(--sl-space-6);
  }

  .sl-com-edit {
    float: none;
    margin-top: var(--sl-space-4);
  }

  /* Changelog filter: stack secondary fields on narrow screens */
  .sl-changelog-filter-grid {
    grid-template-columns: 1fr;
  }

  .sl-changelog-filter-grid
    .sl-changelog-filter-field:last-child:nth-child(odd) {
    grid-column: auto;
  }
}

/* Responsive fallbacks: forum posts, comments, cards and pagination */
@media (max-width: 768px) {
  .sl-comment,
  .sl-forum-post {
    margin-bottom: var(--sl-space-7);
    padding-bottom: var(--sl-space-7);
  }

  .sl-com-top,
  .sl-fp-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sl-space-3) var(--sl-space-5);
    align-items: flex-start;
    justify-content: flex-start;
  }

  .sl-com-edit,
  .sl-fp-moder {
    float: none;
    width: 100%;
    margin: 0;
  }

  .sl-carg {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sl-space-3) var(--sl-space-4);
    margin-right: 0;
    min-width: 0;
  }

  .sl-carg > a {
    min-width: 0;
  }

  .sl-carg > a b {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .sl-cargs {
    display: block;
    margin-top: var(--sl-space-2);
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .sl-meta,
  .sl-fp-meta {
    height: auto;
    line-height: var(--sl-line-normal);
  }

  .sl-meta > ul {
    display: block;
  }

  .sl-meta > ul > li,
  .sl-meta > ul.sl-pull-right > li {
    display: inline-block;
    margin: 0 var(--sl-space-5) var(--sl-space-3) 0;
  }

  .sl-meta-foot {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sl-space-3) var(--sl-space-4);
    align-items: center;
  }

  .sl-meta-foot .sl-rate-box {
    float: none;
    margin: 0 0 0 auto;
  }

  .sl-meta-foot .sl-pull-right {
    float: none;
    margin-left: 0;
  }

  .sl-entry-content,
  .sl-com-cont,
  .sl-fp-meta,
  .sl-block-content,
  .sl-preview-body,
  .sl-preview-section {
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .sl-card-aside {
    float: none;
    width: auto;
    margin: 0 0 var(--sl-space-6);
  }

  .sl-grid .sl-card-col-3,
  .sl-grid .sl-card-col-4,
  .sl-grid .sl-card-col-5,
  .sl-grid .sl-card-col-6 {
    flex-basis: 50%;
    max-width: calc(100% / 2);
  }
}

@media (max-width: 560px) {
  .sl-meta > ul > li,
  .sl-meta > ul.sl-pull-right > li {
    display: block;
    margin: 0 0 var(--sl-space-3);
  }

  .sl-fp-meta .sl-grey,
  .sl-fp-meta .sl-pull-right,
  .sl-fp-meta .sl-pull-right .sl-min-rate {
    float: none;
  }

  .sl-fp-meta .sl-grey,
  .sl-fp-meta .sl-pull-right {
    width: 100%;
  }

  .sl-fp-moder {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sl-space-3);
    position: static;
    margin-top: var(--sl-space-4);
    margin-bottom: 0;
  }

  .sl-grid .sl-card,
  .sl-grid .sl-post,
  .sl-grid .sl-card-col-1,
  .sl-grid .sl-card-col-2,
  .sl-grid .sl-card-col-3,
  .sl-grid .sl-card-col-4,
  .sl-grid .sl-card-col-5,
  .sl-grid .sl-card-col-6 {
    flex-basis: 100%;
    max-width: 100%;
  }

  .sl-preview-head,
  .sl-preview-title,
  .sl-preview-section {
    padding-right: var(--sl-space-5);
    padding-left: var(--sl-space-5);
  }
}

/* Captcha: altcha widget spacing and honeypot field */
.sl-captcha {
  margin-top: var(--sl-layout-gutter);
}

.sl-captcha-hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* Captcha checkbox: match the form inputs, single centered success (green) check */
.sl-captcha .altcha-checkbox {
  --altcha-checkbox-size: 18px;
}

.sl-captcha .altcha-checkbox input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  display: block;
  width: var(--altcha-checkbox-size);
  height: var(--altcha-checkbox-size);
  min-width: var(--altcha-checkbox-size);
  min-height: var(--altcha-checkbox-size);
  margin: 0;
  padding: 0;
  border: 1px solid var(--sl-border-strong);
  border-radius: var(--sl-radius-1);
  background: var(--sl-bg);
  box-shadow: var(--sl-field-shadow);
}

.sl-captcha .altcha-checkbox input[type="checkbox"]:checked {
  background: var(--sl-success);
  border-color: var(--sl-success);
}

.sl-captcha .altcha-checkbox input[type="checkbox"]:checked + svg {
  color: var(--sl-on-solid);
}

/* Error page: 404/access/ban message layout shared by setExit */
.sl-msg {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: var(--sl-space-8);
  box-sizing: border-box;
  background: linear-gradient(
    160deg,
    var(--sl-surface) 0%,
    var(--sl-bg-subtle) 100%
  );
}

.sl-msg-card {
  width: 100%;
  max-width: var(--sl-msg-width);
  padding: var(--sl-space-9) var(--sl-space-9) var(--sl-space-8);
  text-align: center;
  background: var(--sl-bg);
  border: 1px solid var(--sl-border);
  border-radius: var(--sl-radius-3);
  box-shadow: var(--sl-panel-shadow);
}

.sl-msg-brand {
  display: inline-block;
  margin-bottom: var(--sl-space-6);
}

.sl-msg-brand img {
  max-width: var(--sl-msg-brand-width);
  height: auto;
}

.sl-msg-line {
  height: 1px;
  margin: 0 0 var(--sl-space-8);
  background: var(--sl-grad-line);
}

.sl-msg-brand-text {
  font-family: "Magistral", Arial, system-ui, -apple-system, sans-serif;
  font-size: var(--sl-font-h1);
  font-weight: var(--sl-weight-normal);
  line-height: 1;
  letter-spacing: var(--sl-track-wide);
  color: var(--sl-primary-strong);
}

.sl-msg-title {
  margin: 0 0 var(--sl-space-6);
  font-size: var(--sl-font-h2);
  color: var(--sl-text-strong);
}

.sl-msg-body {
  margin-bottom: var(--sl-space-8);
}

/* Message/error page: natural alert box within the card */
.sl-msg-body .sl-alert {
  margin-left: 0;
  margin-right: 0;
}

.sl-msg-search {
  float: none;
  width: auto;
  max-width: var(--sl-msg-width);
  margin: 0 auto var(--sl-space-5);
}

.sl-msg-search .sl-home-link {
  flex: 0 0 var(--sl-size-control);
  height: var(--sl-size-control);
  border-radius: var(--sl-radius-circle);
  color: var(--sl-text-strong);
}

.sl-msg-search .sl-home-link .bi {
  font-size: var(--sl-size-icon-sm);
}

.sl-msg-search .sl-home-link:hover,
.sl-msg-search .sl-home-link:focus-visible {
  color: var(--sl-on-solid);
  background: var(--sl-bg-inverse);
}

.sl-msg-foot {
  font-size: var(--sl-font-small);
  color: var(--sl-text-muted);
  max-width: var(--sl-msg-width);
}

/* Article controls: favourite, share, live status and freshness */
/* Favourites star: round mini toggle in the title, its margin box one line high, so it sits on the middle of the first line and the line keeps its height */
.sl-fav {
  margin-right: 0;
  margin-block: calc((1lh - var(--sl-size-chip)) / 2);
  vertical-align: top;
}

.sl-fav .sl-but-mini {
  position: relative;
  overflow: visible;
}

.sl-fav-on,
.sl-fav-on:hover {
  background-color: var(--sl-primary);
  color: var(--sl-on-solid);
  cursor: default;
}

.sl-fav-limit,
.sl-fav-limit:hover {
  background-color: var(--sl-text-muted);
  color: var(--sl-on-solid);
  cursor: not-allowed;
}

/* Burst: drawn for the favourite star and serving the rating stars and every pressed button, so its figures keep the favourite's names */
.sl-is-burst {
  animation: sl-burst-ring var(--sl-fav-dur) var(--sl-ease-out) calc(var(--sl-d-turn, 0) * var(--sl-fav-dur) / 6);
}

.sl-is-burst > .bi {
  animation: sl-burst-pop var(--sl-fav-dur) var(--sl-fav-ease) calc(var(--sl-d-turn, 0) * var(--sl-fav-dur) / 6) backwards;
}

.sl-is-burst::before,
.sl-is-burst::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--sl-space-2);
  height: var(--sl-space-2);
  border-radius: var(--sl-radius-circle);
  opacity: 0;
  pointer-events: none;
  animation: sl-burst-spark var(--sl-fav-dur) var(--sl-ease-out) calc(var(--sl-d-turn, 0) * var(--sl-fav-dur) / 6) forwards;
}

.sl-is-burst::before {
  box-shadow: var(--sl-fav-shadow);
}

.sl-is-burst::after {
  box-shadow: var(--sl-spark-shadow);
}

/* A button with words throws its sparks from its icon, which stands one gutter in, not from the middle of its words */
.sl-but.sl-is-burst::before,
.sl-but.sl-is-burst::after {
  left: calc(var(--sl-space-6) + 0.5em);
}

/* A rating star and a thumb take the round the ring wave needs only while they burst */
.sl-urating .sl-is-burst,
.sl-rate-like .sl-is-burst {
  position: relative;
  border-radius: var(--sl-radius-circle);
}

.sl-rate-minus.sl-is-burst {
  background-color: var(--sl-danger);
  color: var(--sl-on-solid);
}

@keyframes sl-burst-pop {
  0% {
    transform: scale(0.4) rotate(-30deg);
  }

  60% {
    transform: scale(1.45) rotate(8deg);
  }

  100% {
    transform: scale(1) rotate(0deg);
  }
}

@keyframes sl-burst-ring {
  0% {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--sl-primary) var(--sl-fav-mix), transparent);
  }

  100% {
    box-shadow: 0 0 0 var(--sl-fav-ring) transparent;
  }
}

@keyframes sl-burst-spark {
  from {
    opacity: 1;
    transform: translate(-50%, -50%) scale(0.35);
  }

  to {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.7);
  }
}

/* Share: inline SVG brand glyphs (VK, OK, Viber have no bootstrap icon) share the .bi sizing */
.sl-svg-ico {
  display: block;
  width: var(--sl-size-icon-xs);
  height: var(--sl-size-icon-xs);
}

/* Share sheet: network tiles keep official brand colours via --sl-net-brand; actions stay theme-toned */
.sl-share-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(84px, 1fr));
  gap: var(--sl-space-3);
}

.sl-share-net {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sl-space-3);
  padding: var(--sl-space-3) var(--sl-space-2);
  border: 0;
  border-radius: var(--sl-radius-1);
  background: transparent;
  color: var(--sl-text-muted);
  font: inherit;
  font-size: var(--sl-font-small);
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color var(--sl-time-fast) var(--sl-ease-out),
    color var(--sl-time-fast) var(--sl-ease-out);
}

.sl-share-net:hover,
.sl-share-net:focus-visible {
  background: var(--sl-bg-subtle);
  color: var(--sl-text-strong);
}

.sl-share-net-ico {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--sl-size-control);
  height: var(--sl-size-control);
  border-radius: var(--sl-radius-circle);
  background: var(--sl-net-brand, var(--sl-border-strong));
  color: var(--sl-on-solid);
  font-size: var(--sl-size-icon-sm);
  transition:
    filter var(--sl-time-fast) var(--sl-ease-out),
    transform var(--sl-time-fast) var(--sl-ease-out);
}

.sl-share-net:hover .sl-share-net-ico {
  filter: brightness(1.12);
  transform: translateY(-2px);
}

.sl-share-net-ico .sl-svg-ico {
  width: var(--sl-size-icon-sm);
  height: var(--sl-size-icon-sm);
}

/* Official network brand colours, keyed by the share target id */
[data-sl-net="telegram"] {
  --sl-net-brand: #2aabee;
}

[data-sl-net="whatsapp"] {
  --sl-net-brand: #25d366;
}

[data-sl-net="viber"] {
  --sl-net-brand: #7360f2;
}

[data-sl-net="vk"] {
  --sl-net-brand: #0077ff;
}

[data-sl-net="ok"] {
  --sl-net-brand: #ee8208;
}

[data-sl-net="facebook"] {
  --sl-net-brand: #0866ff;
}

[data-sl-net="x"] {
  --sl-net-brand: #111111;
}

[data-sl-net="pinterest"] {
  --sl-net-brand: #e60023;
}

[data-sl-net="reddit"] {
  --sl-net-brand: #ff4500;
}

[data-sl-net="linkedin"] {
  --sl-net-brand: #0a66c2;
}

[data-sl-net="mail"] {
  --sl-net-brand: #6e7c8b;
}

/* Brand tone on the dial fan network chips */
.sl-but-mini.sl-net-brand {
  background-color: var(--sl-net-brand, var(--sl-border-strong));
}

a.sl-but-mini.sl-net-brand:hover,
button.sl-but-mini.sl-net-brand:hover,
.sl-but-mini.sl-net-brand:focus-visible {
  background-color: var(--sl-net-brand, var(--sl-primary));
  filter: brightness(1.15);
}

/* Copy feedback: the pressed control flashes green with a check icon; an up thumb bursts in the same green */
.sl-rate-plus.sl-is-burst,
.sl-is-copied,
.sl-chip.sl-is-copied,
.sl-code-copy.sl-is-copied,
a.sl-but-mini.sl-is-copied:hover,
button.sl-but-mini.sl-is-copied:hover {
  background-color: var(--sl-success);
  color: var(--sl-on-solid);
}

/* Window canon: the one project-wide window - a native dialog with four axes (size, presentation, tone, foot) */
/* Values internal to the component: the axis classes set them, a theme author never does, so they sit on the component root and not in the API block */
.sl-modal {
  --sl-modal-tone: var(--sl-primary);
}

/* Frame */
dialog.sl-modal {
  box-sizing: border-box;
  width: min(var(--sl-modal-width), calc(100vw - var(--sl-modal-gap) * 2));
  max-width: none;
  max-height: calc(100dvh - var(--sl-modal-gap) * 2);
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--sl-border-strong);
  border-radius: var(--sl-radius-3);
  background: var(--sl-bg);
  color: var(--sl-text);
  box-shadow: var(--sl-panel-shadow);
  animation: sl-modal-in var(--sl-modal-dur) var(--sl-modal-ease);
}

/* The dialog is the flex column itself: a frame element inside it added a node per fragment and nothing else */
dialog.sl-modal[open] {
  display: flex;
  flex-direction: column;
}

dialog.sl-modal::backdrop {
  background: var(--sl-scrim-strong);
}

dialog.sl-modal.sl-is-shut,
dialog.sl-modal.sl-is-shut::backdrop {
  animation: sl-modal-out var(--sl-time-fast) var(--sl-ease-in-out) forwards;
}

/* The page under a modal window does not scroll; the class is put on the document by the canon engine */
html.sl-is-locked {
  overflow: hidden;
}

/* Head plate */
.sl-modal-title {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  box-sizing: border-box;
  gap: var(--sl-space-3);
  min-height: var(--sl-modal-height);
  margin: 0;
  padding: 0 var(--sl-space-3) 0 var(--sl-modal-pad-x);
  background: var(--sl-surface);
  border-bottom: 1px solid var(--sl-border);
  border-radius: calc(var(--sl-radius-3) - 1px) calc(var(--sl-radius-3) - 1px) 0 0;
  box-shadow: inset 0 var(--sl-modal-border) 0 0 var(--sl-modal-line, transparent);
  color: var(--sl-text);
  font-size: var(--sl-font-body);
}

/* The icon and the accent stripe take the tone of the window; the default tone is the primary colour, which is what the File Manager head shows today */
.sl-modal-title > .bi {
  flex: 0 0 auto;
  color: var(--sl-modal-tone);
  font-size: var(--sl-size-icon-sm);
}

/* A caption with a subtitle fits the same plate height as one without: the height of the plate is part of the look and must not float with the content */
.sl-modal-cap {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 0;
  min-width: 0;
  padding: var(--sl-space-2) 0;
}

/* Both lines of the caption are clipped the same way, so one rule serves both */
.sl-modal-cap > * {
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The name of the window is the first child of the caption whatever tag the fragment gives it: strong, span, or a real heading for aria-labelledby */
.sl-modal-cap > :first-child {
  color: var(--sl-text);
  font-size: var(--sl-font-body);
  font-weight: var(--sl-weight-semibold);
  line-height: var(--sl-line-tight);
  user-select: none;
}

.sl-modal-sub {
  color: var(--sl-text-muted);
  font-size: var(--sl-font-micro);
  line-height: var(--sl-line-normal);
}

/* Ghost action cluster of the head */
.sl-modal-acts {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  gap: var(--sl-space-2);
}

.sl-modal-act {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: var(--sl-modal-act-width);
  height: var(--sl-modal-act-height);
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: var(--sl-radius-1);
  background: transparent;
  color: var(--sl-text);
  font-family: inherit;
  font-size: var(--sl-font-body);
  cursor: pointer;
}

.sl-modal-act > .bi { font-size: var(--sl-size-icon-xs); }
/* The hover tone follows the meaning of the action, as the File Manager head does; expand takes the default tone and needs no class of its own */
.sl-modal-act:hover {
  background: var(--sl-modal-act-bg);
  color: var(--sl-modal-act-tone, var(--sl-primary));
}

.sl-modal-act-move { --sl-modal-act-tone: var(--sl-success); }
.sl-modal-act-close { --sl-modal-act-tone: var(--sl-danger); }

.sl-modal-act:focus-visible,
.sl-code-copy:focus-visible,
.sl-editor-dirty:focus-visible,
.sl-editor-lint:focus-visible,
.sl-editor-diff-mode:focus-visible {
  outline: 0;
  box-shadow: var(--sl-shadow-focus);
}

/* Body: the only scrolling part of the window */
.sl-modal-body {
  flex: 1 1 auto;
  min-height: 0;
  padding: var(--sl-space-6) var(--sl-modal-pad-x);
  overflow: auto;
  overscroll-behavior: contain;
}

.sl-modal-body > * + * { margin-top: var(--sl-space-5); }
.sl-modal-body p { margin: 0; line-height: var(--sl-line-loose); }
.sl-modal-body-flush { padding: 0; }

/* Command panel under the head */
.sl-modal-bar {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  flex-wrap: wrap;
  gap: var(--sl-space-3);
  padding: var(--sl-space-3) var(--sl-modal-pad-x);
  border-bottom: 1px solid var(--sl-border);
}

.sl-modal-bar-gap { flex: 1 1 auto; }

/* Foot: status line and buttons */
.sl-modal-foot {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  flex-wrap: wrap;
  gap: var(--sl-space-4);
  margin: 0;
  padding: var(--sl-space-4) var(--sl-modal-pad-x);
  background: var(--sl-surface);
  border-top: 1px solid var(--sl-border);
  justify-content: flex-end;
}

/* The status line pushes itself left rather than the foot aligning it: without the line the buttons must still stand right */
.sl-modal-info {
  flex: 1 1 160px;
  min-width: 0;
  margin-right: auto;
  color: var(--sl-text-muted);
  font-size: var(--sl-font-small);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sl-modal-info:empty { display: none; }

/* Foot buttons */
.sl-modal-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  gap: var(--sl-space-3);
  min-width: var(--sl-modal-btn-width);
  height: var(--sl-modal-btn-height);
  padding: 0 var(--sl-space-6);
  border: 1px solid var(--sl-border);
  border-radius: var(--sl-radius-1);
  background: var(--sl-bg);
  color: var(--sl-text-strong);
  font: inherit;
  font-size: var(--sl-font-body);
  cursor: pointer;
  transition: border-color var(--sl-time-fast) var(--sl-ease-out), background-color var(--sl-time-fast) var(--sl-ease-out);
}

.sl-modal-btn > .bi { font-size: var(--sl-size-icon-xs); }
.sl-modal-btn:hover:not([disabled]) { border-color: var(--sl-border-strong); }

.sl-modal-btn:focus-visible {
  outline: 0;
  border-color: var(--sl-primary);
  box-shadow: var(--sl-shadow-focus);
}

.sl-modal-btn[disabled] { opacity: var(--sl-fade-disabled); cursor: not-allowed; }

.sl-modal-btn-main {
  background: var(--sl-modal-tone);
  border-color: var(--sl-modal-tone);
  color: var(--sl-on-solid);
}

.sl-modal-btn-main:hover:not([disabled]) {
  background: color-mix(in srgb, var(--sl-modal-tone) var(--sl-modal-btn-mix), var(--sl-text));
  border-color: color-mix(in srgb, var(--sl-modal-tone) var(--sl-modal-btn-mix), var(--sl-text));
}

/* On a narrow window the status line and two buttons do not share a row: the line takes its own row and the buttons keep their width */
.sl-modal-sm .sl-modal-info { flex: 1 1 100%; }

/* Justified text needs a column wide enough to justify into; in a window it opens rivers instead of an even edge */
.sl-modal .sl-alert-text { text-align: left; }

/* Axis: size. lg is 880px, exactly the width of the File Manager */
.sl-modal-sm { --sl-modal-width: 420px; }
.sl-modal-lg { --sl-modal-width: 880px; }
.sl-modal-xl { --sl-modal-width: 1120px; }

dialog.sl-modal-full,
dialog.sl-modal.sl-is-full {
  width: calc(100vw - var(--sl-modal-gap) * 2);
  height: calc(100dvh - var(--sl-modal-gap) * 2);
  max-height: none;
}

/* Axis: tone. Two variables and nothing more: the icon, the stripe and the primary button find them by themselves */
.sl-modal-danger { --sl-modal-tone: var(--sl-danger); --sl-modal-line: var(--sl-danger); }
.sl-modal-warn { --sl-modal-tone: var(--sl-warning); --sl-modal-line: var(--sl-warning); }
.sl-modal-success { --sl-modal-tone: var(--sl-success); --sl-modal-line: var(--sl-success); }

/* Axis: presentation. The windowed one is non-modal and draggable, because the File Manager and the emoji panel are worked alongside the text under them */
dialog.sl-modal[data-sl-window] {
  position: fixed;
  top: auto;
  right: auto;
  bottom: auto;
  left: auto;
  margin: 0;
}

/* The head of a window and every grip take the hand, the grip over the pointer every action shows, in a window or in the capsule of an editor */
dialog.sl-modal[data-sl-window] > .sl-modal-title,
.sl-modal-act.sl-modal-act-move { cursor: grab; }
dialog.sl-modal[data-sl-window][data-moving] > .sl-modal-title,
[data-moving] .sl-modal-act.sl-modal-act-move { cursor: grabbing; }
.sl-modal-act.sl-modal-act-move { touch-action: none; }
dialog.sl-modal[data-sl-window].sl-is-full > .sl-modal-title { cursor: default; }
dialog.sl-modal[data-sl-window].sl-is-full .sl-modal-act-move { display: none; }

@keyframes sl-modal-in { from { opacity: 0; transform: translateY(14px) scale(0.97); } }
@keyframes sl-modal-out { to { opacity: 0; transform: translateY(6px) scale(0.99); } }

@media (max-width: 560px) {
  /* One variable carries the gutter of the whole window, so the head, the panel, the body and the foot need no rule each */
  :root { --sl-modal-gap: 0px; --sl-modal-pad-x: var(--sl-space-5); }

  dialog.sl-modal {
    width: 100vw;
    max-width: 100vw;
    max-height: 92dvh;
    margin: auto auto 0;
    border-width: 1px 0 0;
    border-radius: var(--sl-radius-3) var(--sl-radius-3) 0 0;
  }

  dialog.sl-modal-xl,
  dialog.sl-modal-full,
  dialog.sl-modal.sl-is-full {
    width: 100vw;
    height: 100dvh;
    max-height: none;
    border-width: 0;
    border-radius: 0;
  }

  dialog.sl-modal[data-sl-window] {
    right: 0;
    bottom: 0;
    left: 0;
  }

  .sl-modal-info { flex: 1 1 100%; order: -1; }
  .sl-modal-btn { flex: 1 1 0; min-width: 0; height: var(--sl-touch-height); }
}

@media (pointer: coarse) {
  .sl-modal-act { width: var(--sl-size-control); height: var(--sl-size-control); }
}

/* Gallery on the window canon: the picture between two arrows, the properties of the object beside it, the counter in the status line of the foot */
.sl-shot-grid {
  display: grid;
  align-items: start;
  gap: var(--sl-space-5);
  grid-template-columns: minmax(0, 1fr) 268px;
  padding: var(--sl-space-5);
}

/* A gallery without properties gives the whole width to the picture: the column is not written when there is nothing to put in it */
.sl-shot-grid:not(:has(.sl-shot-side)) {
  grid-template-columns: minmax(0, 1fr);
}

.sl-shot-stage {
  display: flex;
  position: relative;
  align-items: center;
  justify-content: center;
}

.sl-shot-img {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: var(--sl-shot-max-height);
}

.sl-modal-image {
  display: block;
  max-width: 100%;
  max-height: var(--sl-shot-max-height);
  border-radius: var(--sl-radius-1);
  object-fit: contain;
}

/* The arrows stand over the picture and not beside it, so a narrow picture does not push them to the edge of the window */
.sl-shot-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.sl-shot-nav-prev { left: 10px; }
.sl-shot-nav-next { right: 10px; }

.sl-shot-side {
  min-width: 0;
  max-height: var(--sl-shot-max-height);
  overflow: auto;
}

.sl-shot-side .sl-fm-props { margin: 0; }

@media (max-width: 768px) {
  .sl-shot-grid { grid-template-columns: minmax(0, 1fr); }
  .sl-shot-side { max-height: var(--sl-shot-side-height); }
}

.sl-modal-note {
  margin: 0 0 var(--sl-space-5);
  color: var(--sl-text-muted);
  font-size: var(--sl-font-small);
  text-align: center;
  overflow-wrap: anywhere;
}

.sl-qr-code {
  width: var(--sl-qr-width);
  aspect-ratio: 1;
  margin: 0 auto;
  padding: var(--sl-space-3);
  border-radius: var(--sl-radius-3);
  background: var(--sl-on-solid);
  box-shadow: var(--sl-shadow-xs);
}

.sl-qr-code > svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* A toast is an inverse band, as the top bar is: it does not turn over with the scheme, so it reads dark on either page */
.sl-toast {
  position: fixed;
  left: 50%;
  bottom: var(--sl-d-dock-lift, calc(var(--sl-space-6) + var(--sl-space-3)));
  z-index: var(--sl-z-toast);
  display: flex;
  align-items: center;
  gap: var(--sl-space-3);
  padding: var(--sl-space-4) var(--sl-space-6);
  border-radius: var(--sl-radius-pill);
  background: var(--sl-bg-inverse);
  color: var(--sl-band-text);
  box-shadow: var(--sl-shadow-float);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 20px);
  transition:
    opacity var(--sl-time-base) var(--sl-ease-out),
    transform var(--sl-time-base) var(--sl-ease-out);
}

.sl-toast.sl-is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, 0);
}

.sl-toast > .bi {
  color: var(--sl-success);
  font-size: var(--sl-size-icon-sm);
}

.sl-toast-warn > .bi {
  color: var(--sl-warning);
}

/* Undo on the pill is an outlined chip in the band colour, filled with it under the hand */
.sl-toast-undo {
  margin-left: var(--sl-space-2);
  padding: var(--sl-space-1) var(--sl-space-4);
  border: 1px solid currentcolor;
  border-radius: var(--sl-radius-pill);
  background: none;
  color: inherit;
  font: inherit;
  font-weight: var(--sl-weight-semibold);
  cursor: pointer;
}

.sl-toast-undo:hover,
.sl-toast-undo:focus-visible {
  background: var(--sl-band-text);
  color: var(--sl-bg-inverse);
}

.sl-live-tools {
  position: absolute;
  top: 12px;
  right: 15px;
  z-index: var(--sl-z-overlay);
}

/* The live chip opens its panel on a press, so it takes the pointer and not the help mark of the tip */
.sl-live-chip {
  margin-right: 0;
  cursor: pointer;
}

.sl-live-icon {
  display: grid;
  place-items: center;
  width: var(--sl-size-chip);
  height: var(--sl-size-chip);
  border-radius: var(--sl-radius-circle);
  background: var(--sl-chip-bg);
  color: var(--sl-success);
  font-size: var(--sl-size-icon-xs);
  line-height: 1;
  animation: sl-live-pulse var(--sl-pulse-dur) var(--sl-ease-out) infinite;
}

.sl-live-chip.sl-is-paused .sl-live-icon,
.sl-live-chip.sl-is-closed .sl-live-icon {
  background: var(--sl-chip-bg);
  color: var(--sl-warning);
  animation: none;
}

.sl-live-panel {
  min-width: var(--sl-popover-min-width);
}

.sl-live-action {
  display: flex;
  justify-content: flex-end;
  margin-top: var(--sl-space-5);
  padding-top: var(--sl-space-3);
  border-top: 1px solid var(--sl-border-subtle);
}

/* Live chip paired state labels and icons: the paused variant shows only while paused */
.sl-live-chip .sl-live-s-paused {
  display: none;
}

.sl-live-chip.sl-is-paused .sl-live-s-on {
  display: none;
}

.sl-live-chip.sl-is-paused .sl-live-s-paused {
  display: inline;
}

.sl-live-act {
  border: 0;
  cursor: pointer;
}

.sl-live-chip.sl-is-paused .sl-live-act {
  background: var(--sl-chip-bg);
  color: var(--sl-success);
}

.sl-live-avatar {
  position: relative;
  display: inline-block;
}

.sl-live-avatar::before,
.sl-live-avatar::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: var(--sl-live-dot-width);
  height: var(--sl-live-dot-height);
  border-radius: var(--sl-radius-circle);
}

.sl-fresh {
  display: inline-grid;
  place-items: center;
  width: var(--sl-size-chip);
  height: var(--sl-size-chip);
  border-radius: var(--sl-radius-circle);
  font-size: var(--sl-size-icon-xs);
  line-height: 1;
  vertical-align: middle;
}

.sl-fresh-now {
  background: var(--sl-chip-bg);
  color: var(--sl-danger);
  animation: sl-fresh-glow var(--sl-fresh-dur) var(--sl-ease-out) infinite;
}

.sl-fresh-now > .bi {
  transform-origin: 50% 78%;
  animation: sl-fresh-fire var(--sl-fresh-now-dur) var(--sl-ease-in-out) infinite;
}

.sl-fresh-day {
  background: var(--sl-chip-bg);
  color: var(--sl-danger);
}

.sl-fresh-day > .bi {
  animation: sl-fresh-beat var(--sl-fresh-day-dur) var(--sl-ease-in-out) infinite;
}

.sl-fresh-days {
  background: var(--sl-chip-bg);
  color: var(--sl-warning);
}

.sl-fresh-days > .bi {
  animation: sl-fresh-sway var(--sl-fresh-days-dur) var(--sl-ease-in-out) infinite;
}


.sl-fresh-week > .bi {
  animation: sl-fresh-turn var(--sl-fresh-week-dur) linear infinite;
}

.sl-fresh-month {
  background: var(--sl-bg-subtle);
  color: var(--sl-text-muted);
}

.sl-fresh-month > .bi {
  animation: sl-fresh-breathe var(--sl-fresh-month-dur) var(--sl-ease-in-out) infinite;
}

@keyframes sl-fresh-fire {
  20% {
    transform: rotate(7deg) scale(1.16);
  }

  70% {
    transform: rotate(-8deg) scale(1.18);
  }
}

@keyframes sl-fresh-glow {
  70% {
    box-shadow: 0 0 0 var(--sl-pulse-ring) transparent;
  }

  from {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--sl-danger) var(--sl-pulse-mix), transparent);
  }
}

@keyframes sl-fresh-beat {
  16% {
    transform: scale(1.26);
  }
}

@keyframes sl-fresh-sway {
  50% {
    transform: rotate(14deg);
  }
}

@keyframes sl-fresh-turn {
  to {
    transform: rotate(360deg);
  }
}

@keyframes sl-fresh-breathe {
  50% {
    opacity: var(--sl-fade-disabled);
    transform: scale(0.9);
  }
}

/* Responsive overlay gutters: reserve space for fixed idea and feedback tabs */
@media (width > 768px) {
  .sl-wrp {
    width: min(100% - var(--sl-edge-width) * 2, var(--sl-layout-container));
  }
}

/* Coarse pointers: expanded hit zones for compact controls */
@media (pointer: coarse) {
  .sl-but-mini,
  .sl-tabs-link,
  .sl-fmenu a,
  a.sl-author {
    position: relative;
  }

  .sl-but-mini::after,
  .sl-tabs-link::after,
  .sl-fmenu a::after,
  a.sl-author::after {
    content: "";
    position: absolute;
    inset: -7px;
  }
}

/* Category block: fluid tinted tiles with shared count and subcategory chips */
.sl-cat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--sl-space-5);
  align-items: start;
}

.sl-cat-tile {
  --sl-cat-tone: var(--sl-info);
  background: var(--sl-bg);
  border: 1px solid var(--sl-border);
  border-radius: var(--sl-radius-3);
  padding: var(--sl-space-5);
  transition:
    border-color var(--sl-time-base) var(--sl-ease-out),
    box-shadow var(--sl-time-base) var(--sl-ease-out),
    transform var(--sl-time-base) var(--sl-ease-out);
}

.sl-cat-tile:hover {
  border-color: color-mix(in srgb, var(--sl-cat-tone) var(--sl-tile-mix), var(--sl-border));
  box-shadow: var(--sl-panel-shadow);
  transform: translateY(-2px);
}

.sl-cat-tile:hover .sl-cat-ico .bi {
  transform: scale(1.1);
}

.sl-cat-main {
  display: flex;
  align-items: center;
  gap: var(--sl-space-5);
  color: inherit;
  text-decoration: none;
}

.sl-cat-ico {
  display: grid;
  place-items: center;
  flex: 0 0 var(--sl-size-tile);
  width: var(--sl-size-tile);
  height: var(--sl-size-tile);
  border-radius: var(--sl-radius-3);
  background: var(--sl-ico-bg);
  border: 1px solid var(--sl-ico-border);
  color: var(--sl-cat-tone);
}

.sl-cat-ico .bi {
  font-size: var(--sl-size-icon-lg);
  line-height: 1;
  transition: transform var(--sl-time-base) var(--sl-ease-out);
}

.sl-cat-info {
  min-width: 0;
  flex: 1 1 auto;
}

.sl-cat-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sl-space-3);
}

.sl-cat-name {
  color: var(--sl-text-strong);
  font-weight: var(--sl-weight-bold);
  transition: color var(--sl-time-fast) var(--sl-ease-out);
}

.sl-cat-main:hover .sl-cat-name {
  color: var(--sl-primary);
}

.sl-cat-desc {
  display: block;
  margin-top: var(--sl-space-2);
  color: var(--sl-text-muted);
  font-style: italic;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sl-cat-subs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sl-space-3);
  margin-top: var(--sl-space-3);
  padding-top: var(--sl-space-3);
  border-top: 1px dashed var(--sl-border);
}

/* Category colour rotation: PHP passes the order index, the palette mapping lives here */
.sl-cat-tone-0 {
  --sl-cat-tone: var(--sl-info);
}
.sl-cat-tone-1 {
  --sl-cat-tone: var(--sl-success);
}
.sl-cat-tone-2 {
  --sl-cat-tone: var(--sl-warning);
}
.sl-cat-tone-3 {
  --sl-cat-tone: var(--sl-accent);
}
.sl-cat-tone-4 {
  --sl-cat-tone: var(--sl-primary-strong);
}
.sl-cat-tone-5 {
  --sl-cat-tone: var(--sl-danger);
}

/* Account settings: six columns, measured against the content column of about 896 points the cabinet leaves this page */
/* Four lamps read at a glance, none a control; the track count is fixed, since an auto-fit passes through three and strands the fourth */
.sl-opt-lamps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sl-space-4);
  margin-bottom: var(--sl-space-6);
}

.sl-opt-lamp {
  padding: var(--sl-space-4) var(--sl-space-5);
  border: 1px solid var(--sl-border);
  border-left: var(--sl-opt-lamp-border) solid var(--sl-cat-tone);
  border-radius: var(--sl-radius-2);
  background: var(--sl-bg);
}

/* A lamp takes the step of its state colour that passes AA for large bold type; the warning base fails, so it scopes the strong step */
.sl-opt-lamp.sl-is-warn { --sl-cat-tone: var(--sl-warning-strong); }

.sl-opt-lamp small {
  display: block;
  color: var(--sl-text-muted);
  font-size: var(--sl-font-micro);
  letter-spacing: var(--sl-track-wide);
  text-transform: uppercase;
}

/* The figure and the note keep to one line, so every lamp of a row stands the same height */
.sl-opt-lamp b {
  display: block;
  margin: var(--sl-space-1) 0;
  overflow: hidden;
  color: var(--sl-cat-tone);
  font-size: var(--sl-font-h3);
  font-variant-numeric: tabular-nums;
  line-height: var(--sl-line-tight);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sl-opt-lamp > span {
  display: block;
  overflow: hidden;
  color: var(--sl-text-muted);
  font-size: var(--sl-font-small);
  line-height: var(--sl-line-normal);
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The contents of the page run across the top: a rail down the left of the 896-point column would leave the form 556 */
.sl-opt-rail {
  position: sticky;
  top: 0;
  z-index: var(--sl-z-dropdown);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  margin: 0 0 var(--sl-space-9);
  padding: var(--sl-space-5) 0 var(--sl-space-4);
  background: var(--sl-bg);
  border-bottom: 1px solid var(--sl-border);
}

/* The road walked is drawn to --sl-d-spy, a width the script measures, because the stylesheet cannot know where the marks landed */
.sl-opt-rail::before,
.sl-opt-rail::after {
  content: "";
  position: absolute;
  top: calc(var(--sl-space-5) + var(--sl-size-chip) / 2);
  right: 0;
  left: 0;
  height: 1px;
  background: var(--sl-border);
}

.sl-opt-rail::after {
  right: auto;
  width: var(--sl-d-spy, 0%);
  background: var(--sl-success);
  transition: width var(--sl-time-slow) var(--sl-ease-out);
}

/* Each mark stands at its fraction --sl-d-at of --sl-d-of, spaced evenly whatever its caption weighs, and no wider than one step */
.sl-opt-mark {
  position: relative;
  z-index: var(--sl-z-raised);
  grid-area: 1 / 1;
  justify-self: start;
  display: grid;
  justify-items: center;
  gap: var(--sl-space-2);
  max-width: calc(100% / var(--sl-d-of, 1));
  margin-left: calc(var(--sl-d-at, 0) / var(--sl-d-of, 1) * 100%);
  padding: 0;
  border: 0;
  background: none;
  color: var(--sl-text-muted);
  font-size: var(--sl-font-micro);
  line-height: var(--sl-line-tight);
  text-align: center;
  transform: translateX(-50%);
  cursor: pointer;
}

.sl-opt-mark:first-child {
  justify-items: start;
  text-align: left;
  transform: none;
}

.sl-opt-mark:last-child {
  justify-self: end;
  justify-items: end;
  margin-left: 0;
  text-align: right;
  transform: none;
}

.sl-opt-mark .bi {
  position: relative;
  z-index: var(--sl-z-raised);
  display: grid;
  place-items: center;
  width: var(--sl-size-chip);
  height: var(--sl-size-chip);
  border: 1px solid var(--sl-border);
  border-radius: var(--sl-radius-circle);
  background: var(--sl-bg);
  font-size: var(--sl-size-icon-sm);
  transition:
    border-color var(--sl-time-base) var(--sl-ease-out),
    background var(--sl-time-base) var(--sl-ease-out),
    color var(--sl-time-base) var(--sl-ease-out);
}

.sl-opt-mark[data-sl-spy-done="1"] .bi {
  border-color: var(--sl-success);
  background: var(--sl-success);
  color: var(--sl-on-solid);
}

/* The caption keeps to one line, because the rail height is the margin every section scrolls to; the full name is in the title */
.sl-opt-mark span {
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.sl-opt-mark[aria-current="true"] {
  color: var(--sl-text-strong);
  font-weight: var(--sl-weight-semibold);
}

.sl-opt-mark[aria-current="true"] .bi {
  border-color: var(--sl-primary);
  background: var(--sl-primary);
  color: var(--sl-on-solid);
}

/* A section scrolled to clears the rail: the margin is the rail height and a step of air */
.sl-opt-sec {
  margin-bottom: var(--sl-space-9);
  scroll-margin-top: calc(var(--sl-opt-rail-height) + var(--sl-space-4));
}

.sl-opt-sec > h2 {
  display: flex;
  align-items: center;
  gap: var(--sl-space-3);
  margin: 0 0 var(--sl-space-4);
  color: var(--sl-text-muted);
  font-size: var(--sl-font-micro);
  font-weight: var(--sl-weight-semibold);
  letter-spacing: var(--sl-track-wide);
  text-transform: uppercase;
}

.sl-opt-sec > h2 .bi {
  color: var(--sl-primary);
  font-size: var(--sl-size-icon-sm);
}

.sl-opt-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--sl-space-4);
}

/* The tile is the container its rows watch, under a name of its own, and lays the two tracks they inherit */
.sl-opt-tile,
.sl-profile-panel {
  container-type: inline-size;
  container-name: sl-opt-box;
  display: grid;
  min-width: 0;
  grid-template-columns: fit-content(var(--sl-form-label-width)) minmax(0, 1fr);
  gap: var(--sl-space-4);
  column-gap: var(--sl-space-6);
  padding: var(--sl-space-5);
  border: 1px solid var(--sl-border);
  border-radius: var(--sl-radius-2);
  background: var(--sl-bg);
  transition:
    border-color var(--sl-time-base) var(--sl-ease-out),
    box-shadow var(--sl-time-base) var(--sl-ease-out);
}

/* A plate of the preset gallery lifts under the pointer exactly as the tile around it does */
.sl-opt-tile:hover,
.sl-profile-panel:hover,
.sl-opt-tile .sl-radio-group:not(.sl-radio-switch) .sl-radio:hover {
  border-color: var(--sl-border-strong);
  box-shadow: var(--sl-shadow-raised);
}

.sl-opt-w2 {
  grid-column: span 2;
}

.sl-opt-w3 {
  grid-column: span 3;
}

.sl-opt-w4 {
  grid-column: span 4;
}

.sl-opt-w6 {
  grid-column: span 6;
}

/* The one head of the cabinet, fragments/panel-head.html, shared by the tiles, the panels, the feed, the hub and the shelves */
.sl-profile-hub-head h3 > .bi {
  display: grid;
  place-items: center;
  flex: 0 0 var(--sl-size-chip);
  width: var(--sl-size-chip);
  height: var(--sl-size-chip);
  border-radius: var(--sl-radius-1);
  background: var(--sl-cat-tone, var(--sl-primary));
  color: var(--sl-on-solid);
  font-size: var(--sl-size-icon-sm);
}

.sl-profile-hub-head h3 {
  display: flex;
  align-items: center;
  gap: var(--sl-space-3);
  margin: 0;
  color: var(--sl-text-strong);
  font-size: var(--sl-font-small);
  font-weight: var(--sl-weight-semibold);
  line-height: var(--sl-line-tight);
}

.sl-opt-tile > p {
  margin: 0;
  color: var(--sl-text-muted);
  font-size: var(--sl-font-small);
  line-height: var(--sl-line-normal);
}

/* A direct row of the tile is spaced by the tile's gap; a row inside its form keeps its own margin */
.sl-opt-tile > .sl-form-row {
  margin-bottom: 0;
}

/* The face of the account: a value shown, not a control, at the avatar size of the account pages */
.sl-opt-face {
  display: grid;
  place-items: center;
  padding: var(--sl-space-4);
  border-radius: var(--sl-radius-1);
  background: var(--sl-surface);
}

.sl-opt-face img {
  width: var(--sl-profile-ava-width);
  height: var(--sl-profile-ava-height);
  border-radius: var(--sl-radius-circle);
  background: var(--sl-bg-muted);
  box-shadow: var(--sl-avatar-shadow);
}

/* The rows of a tile fold on the tile, not the window, under its own container name, since the shared name folds at 900 */
@container sl-opt-box (width <= 420px) {
  .sl-opt-tile .sl-form-row {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sl-space-2);
    align-items: start;
  }
}

/* The gallery is the one control taller than its caption: the caption meets it at the top, as it meets a textarea */
.sl-opt-tile .sl-form-row:has(.sl-radio-group:not(.sl-radio-switch)) {
  align-items: start;
}

/* The hint shares the caption cell and asks for no width, or it sizes the caption column of the whole form */
.sl-opt-tile .sl-form-row > div > small {
  display: block;
  width: 0;
  min-width: 100%;
  margin-top: var(--sl-space-2);
  color: var(--sl-text-muted);
}

/* A control narrower than its track, the switch, stands at its right edge, where every full field ends */
.sl-opt-tile .sl-form-field:has(> .sl-radio-switch) {
  display: flex;
  justify-content: flex-end;
}

/* The preset gallery is capped and scrolls with a step of air for the ring of the picked plate; a yes/no switch keeps its own geometry */
.sl-opt-tile .sl-radio-group:not(.sl-radio-switch) {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--sl-avatar-width), 1fr));
  padding: var(--sl-space-1);
  max-height: var(--sl-opt-max-height);
  overflow-y: auto;
}

/* Each option is its picture: the radio hidden, the picture on the plate, the file manager's ring around the pick */
.sl-opt-tile .sl-radio-group:not(.sl-radio-switch) .sl-radio {
  position: relative;
  display: grid;
  padding: var(--sl-space-2);
  border: 1px solid var(--sl-border);
  border-radius: var(--sl-radius-2);
  background: var(--sl-bg-muted);
  transition:
    border-color var(--sl-time-base) var(--sl-ease-out),
    box-shadow var(--sl-time-base) var(--sl-ease-out);
}

.sl-opt-tile .sl-radio-group:not(.sl-radio-switch) .sl-radio:has(input:focus-visible) {
  box-shadow: var(--sl-shadow-focus);
}

.sl-opt-tile .sl-radio-group:not(.sl-radio-switch) .sl-avatar {
  display: block;
  width: 100%;
  height: auto;
  border-radius: inherit;
}

/* The save bar of the shared form alone sticks to the window foot; its tone is the edge, since `--sl-warning` as text over `--sl-bg` is 2.75:1 */
.sl-opt-save {
  position: sticky;
  bottom: var(--sl-space-4);
  z-index: var(--sl-z-dropdown);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sl-space-5);
  margin: var(--sl-space-7) 0;
  padding: var(--sl-space-4) var(--sl-space-6);
  border: 1px solid var(--sl-warning);
  border-radius: var(--sl-radius-pill);
  background: var(--sl-bg);
  box-shadow: var(--sl-shadow-float);
  transition:
    opacity var(--sl-time-base) var(--sl-ease-out),
    transform var(--sl-time-base) var(--sl-ease-out),
    visibility 0s;
}

/* A clean form keeps its button at its end like every form; the frame that floats, the note and the undo come with the first change */
[data-sl-dirty="0"] .sl-opt-save {
  position: static;
  justify-content: center;
  border-color: transparent;
  background: none;
  box-shadow: none;
}

[data-sl-dirty="0"] .sl-opt-save > span:first-child,
[data-sl-dirty="0"] .sl-opt-save [data-sl-clean] {
  display: none;
}

.sl-opt-save > span {
  display: inline-flex;
  align-items: center;
  gap: var(--sl-space-3);
  color: var(--sl-text-muted);
  font-size: var(--sl-font-small);
}

/* The button carries a gutter of its own for a row of buttons, and this row is spaced by a gap */
.sl-opt-save .sl-but {
  margin: 0;
}

/* The undo is a mini button with words, so its glyph keeps the gap of every icon beside a text */
.sl-opt-save .sl-but-mini {
  gap: var(--sl-space-2);
}

/* Below the step the grid keeps two of six tracks, the narrowest tile that still holds a field */
@media (max-width: 768px) {
  .sl-opt-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Two and two rather than four of 127 points, where the caption of a lamp takes three lines and its note takes five */
  .sl-opt-lamps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* The caption leaves on a phone and the name comes from the title; the height it gave back is paid as a floor for the thumb */
  .sl-opt-mark {
    min-height: var(--sl-size-control);
    align-content: center;
  }

  .sl-opt-mark span {
    display: none;
  }

  .sl-opt-w3,
  .sl-opt-w4,
  .sl-opt-w6 {
    grid-column: span 2;
  }
}

/* Account profile: dense split card with identity rail, trust strip, fact panels and module hub */
/* The profile card and the cabinet deck are boxed like the tile: the same border and radius, no shadow at rest */
.sl-profile-card,
.sl-cab-deck {
  overflow: hidden;
  border: 1px solid var(--sl-border);
  border-radius: var(--sl-radius-2);
  background: var(--sl-bg);
}

.sl-profile-split {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  margin-bottom: var(--sl-space-8);
}

.sl-profile-split-rail {
  padding: var(--sl-space-5);
  border-right: 1px solid var(--sl-border-subtle);
  background: linear-gradient(180deg, var(--sl-surface), var(--sl-bg));
  text-align: center;
}

.sl-profile-split-main {
  min-width: 0;
  padding: var(--sl-space-7);
}

.sl-profile-avatar {
  --sl-d-level: 0%;
  --sl-d-ring: var(--sl-primary);
  position: relative;
  display: grid;
  place-items: center;
  width: var(--sl-profile-ava-width);
  height: var(--sl-profile-ava-height);
  margin: 0 auto;
  padding: var(--sl-space-3);
  border-radius: var(--sl-radius-circle);
  background: conic-gradient(var(--sl-d-ring) 0 var(--sl-d-level), var(--sl-bg-muted) var(--sl-d-level) 100%);
  box-shadow: var(--sl-avatar-shadow);
}

.sl-profile-avatar img {
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  border: var(--sl-ava-border) solid var(--sl-bg);
  border-radius: var(--sl-radius-circle);
  object-fit: cover;
  background: var(--sl-bg);
}

.sl-profile-status {
  position: absolute;
  right: 5px;
  bottom: 12px;
  width: var(--sl-profile-dot-width);
  height: var(--sl-profile-dot-height);
  padding: var(--sl-profile-dot-border);
}

.sl-profile-name {
  margin: var(--sl-space-6) 0 var(--sl-space-2);
  color: var(--sl-text-strong);
  font-size: var(--sl-font-h2);
  line-height: var(--sl-line-tight);
}

.sl-profile-rank {
  color: var(--sl-primary-strong);
  font-weight: var(--sl-weight-bold);
}

/* The rank of a group: a row of one icon, the lit marks in the colour of the rank and the rest muted, standing as tight as the pictures did */
.sl-rank {
  display: inline-flex;
  align-items: center;
  gap: var(--sl-space-1);
  color: var(--sl-border-strong);
  vertical-align: middle;
}

/* The marks take the size of the place they are printed in; the panel needs this against its fixed icon size, the site carries it to read alike */
.sl-rank .bi {
  font-size: inherit;
}

.sl-rank .sl-is-active {
  color: var(--sl-d-rank);
}

.sl-profile-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sl-space-3);
  justify-content: center;
  margin-top: var(--sl-space-5);
}

/* A rail chip holds its label in a span, so a long text ends in an ellipsis an anonymous flex item could not take */
.sl-profile-chips .sl-chip {
  max-width: 100%;
  margin: 0;
}

.sl-profile-chips .sl-chip > span {
  overflow: hidden;
  text-overflow: ellipsis;
}

/* The offline status chip is informational, not clickable */
.sl-profile-chips .sl-chip-danger {
  cursor: default;
}

.sl-profile-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sl-space-3);
  justify-content: center;
  margin-top: var(--sl-space-6);
}

.sl-profile-actions .sl-but {
  margin: 0;
}

.sl-profile-score {
  display: grid;
  gap: var(--sl-space-3);
  justify-items: center;
  margin-top: var(--sl-space-7);
  padding-top: var(--sl-space-6);
  border-top: 1px solid var(--sl-border-subtle);
}

.sl-profile-score > b {
  color: var(--sl-text-strong);
  font-size: var(--sl-font-small);
}

.sl-profile-score .sl-rate-like {
  justify-content: center;
}

.sl-profile-meter {
  margin-top: var(--sl-space-5);
}

.sl-profile-meter-head {
  display: flex;
  justify-content: space-between;
  margin-bottom: var(--sl-space-2);
  color: var(--sl-text-muted);
  font-size: var(--sl-font-micro);
}

.sl-profile-meter-head b {
  color: var(--sl-primary);
}

.sl-profile-meter-track {
  height: var(--sl-meter-height);
  overflow: hidden;
  border-radius: var(--sl-radius-pill);
  background: var(--sl-bg-muted);
}

.sl-profile-meter-track span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--sl-primary-subtle), var(--sl-primary));
}

.sl-profile-trust {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--sl-space-3);
  margin-top: var(--sl-space-6);
}

.sl-profile-proof {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: var(--sl-space-5);
  min-width: 0;
  padding: var(--sl-space-5) var(--sl-space-5);
  border: 1px solid var(--sl-border-subtle);
  border-radius: var(--sl-radius-3);
  background: var(--sl-surface);
}

.sl-profile-proof i {
  grid-row: 1 / span 2;
  color: var(--sl-primary);
  font-size: var(--sl-size-icon-md);
}

.sl-profile-proof:nth-child(2) i {
  color: var(--sl-success);
}

.sl-profile-proof:nth-child(3) i {
  color: var(--sl-accent);
}

.sl-profile-proof b {
  display: block;
  color: var(--sl-text-strong);
  font-size: var(--sl-font-small);
}

.sl-profile-proof small {
  display: block;
  margin-top: 1px;
  color: var(--sl-text-muted);
  font-size: var(--sl-font-micro);
}

.sl-profile-proof.sl-is-warn {
  border-color: var(--sl-proof-border);
  background: var(--sl-proof-bg);
}

.sl-profile-proof.sl-is-warn i {
  color: var(--sl-danger);
}

.sl-profile-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sl-space-5);
  margin-top: var(--sl-space-5);
}

.sl-profile-facts .sl-profile-panel {
  display: flex;
  flex-direction: column;
}

.sl-profile-facts .sl-profile-info {
  flex: 1 1 auto;
  grid-auto-rows: minmax(var(--sl-info-row-height), 1fr);
}

/* The cabinet and profile panel shares the rules of the settings tile; only the margin under its head is its own */
.sl-profile-panel > .sl-profile-hub-head,
.sl-profile-feed > .sl-profile-hub-head {
  margin-bottom: var(--sl-space-4);
}

.sl-profile-wide {
  margin-top: var(--sl-space-5);
}

.sl-profile-wide.sl-is-warn {
  border-color: var(--sl-proof-border);
}

.sl-profile-wide.sl-is-warn h3 > .bi {
  background: var(--sl-danger);
}

.sl-profile-wide .sl-profile-tags + .sl-profile-hub-head {
  margin-top: var(--sl-space-5);
}

.sl-profile-info {
  display: grid;
  gap: 0;
}

.sl-profile-info-row {
  display: grid;
  grid-template-columns: 22px fit-content(60%) minmax(0, 1fr);
  align-items: center;
  gap: var(--sl-space-3);
  min-height: var(--sl-info-row-height);
  border-bottom: 1px solid var(--sl-border-subtle);
}

.sl-profile-info-row:last-child {
  border-bottom: 0;
}

/* The icon of an info row and of a cabinet row is one icon */
.sl-profile-info-row i,
.sl-cab-row > i {
  color: var(--sl-primary);
  text-align: center;
}

.sl-profile-info-row span {
  overflow: hidden;
  color: var(--sl-text-muted);
  font-size: var(--sl-font-small);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sl-profile-info-row b {
  justify-self: end;
  max-width: 100%;
  overflow: hidden;
  color: var(--sl-text-strong);
  font-size: var(--sl-font-small);
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sl-profile-row-private {
  background: var(--sl-row-bg);
}

.sl-profile-row-private > i {
  color: var(--sl-warning);
}

.sl-profile-hidden {
  color: var(--sl-text-muted);
  font-style: italic;
  font-weight: var(--sl-weight-normal);
}

.sl-profile-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sl-space-3);
}

.sl-profile-tag {
  padding: var(--sl-space-2) var(--sl-space-4);
  border-radius: var(--sl-radius-pill);
  background: var(--sl-bg);
  color: var(--sl-text-muted);
}

.sl-profile-tag i {
  margin-right: var(--sl-space-2);
  color: var(--sl-primary);
}

.sl-profile-wide .sl-profile-chips {
  justify-content: flex-start;
}

.sl-profile-sign {
  margin-top: var(--sl-space-6);
}

.sl-profile-sign blockquote {
  margin: 0;
  padding: var(--sl-space-3) var(--sl-space-6);
}

.sl-profile-hub-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sl-space-7);
  min-height: var(--sl-hub-head-height);
}

.sl-profile-hub-total {
  display: flex;
  gap: var(--sl-space-3);
}

.sl-profile-hub-total .sl-chip {
  margin: 0;
}

/* A hub row is a feed entry with the count, the module and the rating in its slots, a step taller for its two chips */
.sl-cab-row.sl-profile-hub-row {
  min-height: var(--sl-hub-row-height);
}

/* Live indicator circle, flowing to the right corner of the panel heading it stands in */
.sl-profile-feed-live {
  display: grid;
  place-items: center;
  width: var(--sl-size-chip);
  height: var(--sl-size-chip);
  border-radius: var(--sl-radius-circle);
  background: var(--sl-chip-bg);
  color: var(--sl-primary);
  font-size: var(--sl-size-icon-xs);
}

.sl-profile-feed-live i {
  animation: sl-profile-feed-spin var(--sl-spin-dur) linear infinite;
}

@keyframes sl-profile-feed-spin {
  to {
    transform: rotate(360deg);
  }
}

.sl-profile-feed .sl-tabs {
  margin: var(--sl-space-4) 0 0;
  border: 0;
  background: transparent;
}

.sl-profile-feed .sl-tabs-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sl-space-2);
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  list-style: none;
}

.sl-profile-feed .sl-tabs-item {
  margin: 0;
  padding: 0;
}

/* The one thing the chip does not say and the tab would otherwise bring: its weight */
.sl-profile-feed .sl-tabs-link {
  font-weight: var(--sl-weight-normal);
}

.sl-profile-feed .sl-tabs-content {
  margin-top: var(--sl-space-3);
  padding: 0;
}

.sl-profile-feed .sl-tab-panel {
  padding: 0;
}

/* The script doubles the feed, so half its height is exactly one pass and no distance is measured */
.sl-profile-scroll {
  --sl-d-duration: 18s;
  position: relative;
  height: var(--sl-scroll-height);
  overflow: hidden;
  border: 1px solid var(--sl-border-subtle);
  border-radius: var(--sl-radius-3);
  background: var(--sl-surface);
}

.sl-profile-scroll::before,
.sl-profile-scroll::after {
  content: "";
  position: absolute;
  right: 0;
  left: 0;
  z-index: var(--sl-z-overlay);
  height: var(--sl-veil-height);
  pointer-events: none;
}

.sl-profile-scroll::before {
  top: 0;
  background: linear-gradient(180deg, var(--sl-surface), transparent);
}

.sl-profile-scroll::after {
  bottom: 0;
  background: linear-gradient(0deg, var(--sl-surface), transparent);
}

.sl-profile-scroll-feed {
  padding: var(--sl-space-3) var(--sl-space-5);
}

.sl-profile-scroll.sl-is-scrolling .sl-profile-scroll-feed {
  animation: sl-profile-auto-scroll calc(var(--sl-d-duration) * var(--sl-time-scale)) linear infinite;
}

.sl-profile-scroll:hover .sl-profile-scroll-feed {
  animation-play-state: paused;
}

/* The spinning indicator of a panel freezes together with the hovered feed scroll under it */
:is(.sl-profile-panel, .sl-profile-feed):has(.sl-profile-scroll:hover) .sl-profile-feed-live i {
  animation-play-state: paused;
}

/* The one row of the cabinet lists; the entry modifier opens the fourth track for a date or count chip */
.sl-cab-row {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sl-space-4);
  min-height: var(--sl-entry-height);
  border-bottom: 1px solid var(--sl-border-subtle);
  color: var(--sl-text-muted);
}

.sl-cab-row.sl-profile-entry {
  grid-template-columns: auto 30px minmax(0, 1fr) auto;
}

.sl-cab-row:last-child {
  border-bottom: 0;
}

/* The title of a cabinet row is the title of a feed entry: the same height of row, the same body type, no weight */
.sl-profile-entry a,
.sl-cab-row b {
  overflow: hidden;
  color: var(--sl-text-strong);
  font-weight: var(--sl-weight-normal);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sl-profile-entry a:hover {
  color: var(--sl-primary);
}

.sl-cab-row .sl-chip {
  margin: 0;
}

/* Cabinet home (Command Deck): identity rail reuses the sl-profile-* pieces, action shelf reuses the files-category icon mechanics (sl-cat-ico + sl-cat-tone-N) */
.sl-cab-deck {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
}

.sl-cab-rail {
  padding: var(--sl-space-8) var(--sl-space-7);
  border-right: 1px solid var(--sl-border-subtle);
  background: linear-gradient(180deg, var(--sl-surface), var(--sl-bg));
  text-align: center;
}

.sl-cab-main {
  min-width: 0;
  padding: var(--sl-space-7);
}

/* The head of the deck stands in normal flow over the action tiles, so it carries the room the tiles keep from it */
.sl-cab-main > .sl-profile-hub-head {
  margin-bottom: var(--sl-space-5);
}

.sl-cab-actions {
  --sl-cat-tone: var(--sl-info);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
  gap: var(--sl-space-3);
}

.sl-cab-act {
  position: relative;
  display: grid;
  justify-items: center;
  gap: var(--sl-space-3);
  padding: var(--sl-space-6) var(--sl-space-3) var(--sl-space-5);
  border: 1px solid var(--sl-border-subtle);
  border-radius: var(--sl-radius-3);
  background: var(--sl-bg);
  color: var(--sl-text-muted);
  text-align: center;
  transition:
    border-color var(--sl-time-base) var(--sl-ease-out),
    transform var(--sl-time-base) var(--sl-ease-out);
}

.sl-cab-act:hover {
  border-color: color-mix(in srgb, var(--sl-cat-tone) var(--sl-tile-mix), var(--sl-border));
  transform: translateY(-2px);
}

.sl-cab-act:hover .sl-cat-ico .bi {
  transform: scale(1.1);
}

.sl-cab-act b {
  color: var(--sl-text-strong);
  font-size: var(--sl-font-small);
}

.sl-cab-act small {
  max-width: 100%;
  overflow: hidden;
  color: var(--sl-text-muted);
  font-size: var(--sl-font-micro);
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Counter badge: its own border-box and centring, since the theme has none and one digit would sit left in an oval; hidden outranks its display */
.sl-cab-badge.sl-hidden {
  display: none;
}

.sl-cab-badge {
  position: absolute;
  top: 8px;
  right: 10px;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  min-width: var(--sl-badge-width);
  height: var(--sl-badge-height);
  padding: 0 var(--sl-space-3);
  border-radius: var(--sl-radius-pill);
  background: var(--sl-danger);
  color: var(--sl-on-solid);
  font-size: var(--sl-font-micro);
  font-weight: var(--sl-weight-bold);
  line-height: 1;
}

/* Progress ring: pathLength="100" lets PHP answer one percentage; the dash carries the arc, since an offset leaves a hairline on an empty ring */
.sl-knob {
  --sl-knob-size: 46px;
  --sl-knob-width: 4;
  --sl-knob-tone: var(--sl-success);
  --sl-knob-track: var(--sl-progress-bg);
  position: relative;
  display: grid;
  place-items: center;
  flex: 0 0 var(--sl-knob-size);
  width: var(--sl-knob-size);
  height: var(--sl-knob-size);
}

.sl-knob-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.sl-knob-bg {
  fill: none;
  stroke: var(--sl-knob-track);
  stroke-width: var(--sl-knob-width);
}

/* Butt ends: a rounded cap adds half the stroke width at each end and at 96 per cent it closes the very gap that tells "almost full" from "full" */
.sl-knob-val {
  fill: none;
  stroke: var(--sl-knob-tone);
  stroke-width: var(--sl-knob-width);
  stroke-linecap: butt;
  transition: stroke-dasharray var(--sl-time-slow) var(--sl-ease-out);
}

.sl-knob > .bi {
  color: var(--sl-knob-tone);
  font-size: calc(var(--sl-knob-size) * 0.45);
  line-height: 1;
  transition: color var(--sl-time-slow) var(--sl-ease-out), transform var(--sl-time-base) var(--sl-ease-out);
}

/* A solid ring: nothing to measure, or nothing left to fill. The track takes the tone, so a missing arc shows no pale circle and a whole one shows no join */
.sl-knob-full .sl-knob-bg { stroke: var(--sl-knob-tone); }
.sl-knob-ok { --sl-knob-tone: var(--sl-success); }
.sl-knob-info { --sl-knob-tone: var(--sl-primary); }
.sl-knob-warn { --sl-knob-tone: var(--sl-warning); }
.sl-knob-danger { --sl-knob-tone: var(--sl-danger); }
.sl-knob-none { --sl-knob-tone: var(--sl-text-subtle); }

/* Community ring: the shared sl-knob at cabinet size, on the pale cabinet disc because it sits on a panel, not a form */
.sl-cab-ring {
  --sl-knob-size: 124px;
  --sl-knob-width: 6;
  --sl-knob-track: var(--sl-bg-muted);
  margin: var(--sl-space-7) auto var(--sl-space-3);
  border-radius: var(--sl-radius-circle);
  box-shadow: var(--sl-avatar-shadow);
}

.sl-cab-ring > span {
  display: grid;
  place-items: center;
  width: var(--sl-cab-ring-width);
  height: var(--sl-cab-ring-height);
  border-radius: var(--sl-radius-circle);
  background: var(--sl-bg);
  text-align: center;
}

.sl-cab-ring b {
  display: block;
  color: var(--sl-text-strong);
  font-size: var(--sl-font-h3);
  line-height: var(--sl-line-tight);
}

.sl-cab-ring small {
  display: block;
  padding: 0 var(--sl-space-3);
  color: var(--sl-text-muted);
  font-size: var(--sl-font-micro);
}

/* The inner cabinet pages carry the home tiles at the same size; the strip only adds the air under it */
.sl-cab-nav {
  margin-bottom: var(--sl-space-6);
}

.sl-cab-nav .sl-cab-act {
  min-width: var(--sl-cab-act-width);
}

/* The shelf strip is the cabinet tile strip with a wider minimum; only the ring beside the text and the hover tone of that ring are its own */
.sl-pmf-folders {
  grid-template-columns: repeat(auto-fit, minmax(178px, 1fr));
  margin-bottom: var(--sl-space-6);
}

.sl-pmf-fold {
  --sl-cat-tone: var(--sl-knob-tone);
  grid-template-columns: var(--sl-knob-size, 46px) minmax(0, 1fr);
  justify-items: stretch;
  align-items: center;
  gap: var(--sl-space-5);
  padding: var(--sl-space-4) var(--sl-space-5);
  text-align: left;
}

.sl-pmf-fold:hover .sl-knob > .bi { transform: scale(1.1); }

.sl-pmf-fold[aria-current="page"] {
  border-color: color-mix(in srgb, var(--sl-knob-tone) var(--sl-tile-mix), var(--sl-border));
}

.sl-pmf-fold b {
  display: block;
  overflow: hidden;
  font-size: var(--sl-font-body);
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The note of a shelf wraps rather than being cut: two words of «without a limit» say nothing once an ellipsis eats half of them */
.sl-pmf-fold small {
  display: block;
  overflow: visible;
  font-size: var(--sl-font-micro);
  white-space: normal;
}

/* The counter and its note are two texts; the separator between them belongs here, so a shelf that answers only one of them never carries a dangling middot */
.sl-pmf-fold small span + span::before { content: " · "; }

.sl-pmf-fold .sl-chip {
  margin-top: var(--sl-space-2);
}

.sl-pmf-fold .sl-cab-badge {
  top: 7px;
  right: 9px;
}

/* Narrow layout: the tiles become a snapping row by the page's layout container; until the split declares one, the auto-fit grid stacks them */
@container (max-width: 800px) {
  .sl-pmf-folders {
    display: flex;
    grid-template-columns: none;
    gap: var(--sl-space-3);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
  }

  /* The ring carries its own size, so the narrow shelf has to shrink the ring itself and not only the column it stands in */
  .sl-pmf-fold,
  .sl-pmf-fold .sl-knob {
    --sl-knob-size: 36px;
  }

  .sl-pmf-fold {
    flex: 0 0 62%;
    grid-template-columns: 36px minmax(0, 1fr);
    gap: var(--sl-space-4);
    padding: var(--sl-space-3) var(--sl-space-4);
    scroll-snap-align: start;
  }

  .sl-pmf-fold small { font-size: var(--sl-font-micro); }
  .sl-pmf-fold .sl-chip { margin-top: var(--sl-space-2); }
}

/* The private message page is one layout container: the shelves and the split answer its width, not the window's, so the page keeps its shape in any column it is put in */
.sl-pmf-page {
  container-type: inline-size;
}

/* The toolbar is built once per visit and never redrawn: the search term, the sort and the pressed chips are what the reader holds, and only the list below answers them */
.sl-pmf-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sl-space-3);
  margin-bottom: var(--sl-space-3);
}

.sl-pmf-bar .sl-search-form {
  width: var(--sl-search-width);
  flex: 1 1 240px;
}

.sl-pmf-bar .sl-field { height: var(--sl-field-height); }

/* The filter bar is an organ of control: a chip is always on the page and only changes state, because a filter taken off the page could never be put back on */
.sl-pmf-active {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sl-space-2);
  margin-bottom: var(--sl-space-3);
  padding: var(--sl-space-3) var(--sl-space-4);
  border: 1px solid var(--sl-border);
  border-radius: var(--sl-radius-1);
  background: var(--sl-surface);
}

.sl-pmf-active > b {
  color: var(--sl-text-muted);
  font-size: var(--sl-font-micro);
  font-weight: var(--sl-weight-normal);
}

.sl-pmf-active .sl-chip {
  cursor: pointer;
}

.sl-pmf-active .sl-chip:hover { border-color: var(--sl-border-strong); }

.sl-pmf-active .sl-chip[aria-pressed="true"] {
  border-color: color-mix(in srgb, var(--sl-primary) var(--sl-tile-mix), transparent);
  background: var(--sl-chip-bg);
  color: var(--sl-primary-strong);
}

.sl-pmf-active .sl-chip b {
  font-weight: var(--sl-weight-normal);
  opacity: var(--sl-fade-muted);
}

/* The range the list shows stands at the right end of the filter bar, apart from its chips; the reset is a chip like the rest, behind the dot the bar's label style draws */
.sl-pmf-shown {
  margin-left: auto;
  color: var(--sl-text-muted);
  font-size: var(--sl-font-micro);
  font-variant-numeric: tabular-nums;
}

/* Two panes, a list on the left and what it opens on the right, so a read throws away neither the scroll nor the selection: the mailbox and the rail of a Node list */
.sl-duo {
  display: grid;
  grid-template-columns: 396px minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid var(--sl-border-strong);
  border-radius: var(--sl-radius-3);
  background: var(--sl-bg);
}

.sl-duo-aside {
  display: flex;
  min-width: 0;
  flex-direction: column;
  border-right: 1px solid var(--sl-border-subtle);
  background: var(--sl-surface);
}

.sl-pmf-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

/* A date head opens the run of rows of one day or one month with their count: the mailbox heads its days, a Node list by date its months */
.sl-date-head {
  display: flex;
  align-items: center;
  gap: var(--sl-space-3);
  margin: 0 0 var(--sl-space-4);
  padding: var(--sl-space-2) var(--sl-space-5);
  border-radius: var(--sl-radius-1);
  background: var(--sl-pmf-day-bg);
  color: var(--sl-text-strong);
  font-size: var(--sl-font-small);
  font-weight: var(--sl-weight-semibold);
}

/* The count of a run is the neutral chip the shelf heads of the favourites carry, at the right edge of the head */
.sl-date-head .sl-chip {
  margin: 0 0 0 auto;
}

/* The day head of the mailbox rides the scroll: a reader deep in a long mailbox still sees which day the rows under the cursor belong to */
.sl-pmf-scroll .sl-date-head {
  position: sticky;
  top: 0;
  z-index: var(--sl-z-overlay);
  margin: 0;
  border-radius: 0;
  backdrop-filter: blur(4px);
}

/* Two levels, not three, double the messages per screen; the row is the cabinet row with a checkbox and an avatar, hence its own tracks */
.sl-cab-row.sl-pmf-item {
  position: relative;
  grid-template-columns: 22px 26px minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--sl-space-3);
  padding: var(--sl-space-3) var(--sl-space-4) var(--sl-space-3) var(--sl-space-3);
  transition: background-color var(--sl-time-fast) var(--sl-ease-out);
}

.sl-pmf-item:hover { background: var(--sl-bg-subtle); }

.sl-pmf-item[aria-current="true"] {
  background: var(--sl-bg);
  box-shadow: inset var(--sl-rail-width) 0 0 var(--sl-primary);
}

.sl-pmf-pick {
  display: grid;
  place-items: center;
  height: var(--sl-size-chip);
}

.sl-pmf-pick input { margin: 0; }

.sl-pmf-item > img {
  width: var(--sl-pmf-ava-width);
  height: var(--sl-pmf-ava-height);
  margin-top: 1px;
  border-radius: var(--sl-radius-circle);
  object-fit: cover;
  background: var(--sl-bg-muted);
}

.sl-pmf-body { min-width: 0; }

.sl-pmf-line {
  display: flex;
  align-items: baseline;
  gap: var(--sl-space-3);
  min-width: 0;
}

.sl-pmf-subj {
  flex: 1 1 auto;
  overflow: hidden;
  color: var(--sl-text);
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sl-pmf-subj:hover { color: var(--sl-primary); }

.sl-pmf-when {
  flex: 0 0 auto;
  color: var(--sl-text-subtle);
  font-size: var(--sl-font-micro);
  font-variant-numeric: tabular-nums;
}

.sl-pmf-meta {
  display: flex;
  align-items: center;
  gap: var(--sl-space-3);
  min-width: 0;
  margin-top: var(--sl-space-2);
}

.sl-pmf-meta .sl-author {
  flex: 0 0 auto;
  max-width: var(--sl-pmf-meta-width);
  overflow: hidden;
  color: var(--sl-text-muted);
  font-size: var(--sl-font-small);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sl-pmf-snip {
  flex: 1 1 auto;
  overflow: hidden;
  color: var(--sl-text-subtle);
  font-size: var(--sl-font-small);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sl-pmf-item .sl-chip {
  height: var(--sl-pmf-chip-height);
  padding: 0 var(--sl-space-3);
  font-size: var(--sl-font-micro);
}

/* The state flag is the round sl-chip-icon of the theme; the row only shrinks it to its height, as the standard glyph fills a 19 px circle to the rim and hides its tone */
.sl-pmf-item .sl-chip-icon {
  flex: 0 0 auto;
  width: var(--sl-pmf-chip-width);
}

.sl-pmf-item .sl-chip-icon .bi { font-size: calc(var(--sl-size-icon-xs) * 0.75); }

.sl-pmf-new .sl-pmf-subj {
  color: var(--sl-text-strong);
  font-weight: var(--sl-weight-bold);
}

.sl-pmf-new .sl-pmf-snip { color: var(--sl-text-muted); }

/* The footer is pushed to the bottom of the column: a short list must not leave the pager floating in the middle of a panel that is taller than it */
.sl-pmf-foot {
  margin-top: auto;
  border-top: 1px solid var(--sl-border-subtle);
  background: var(--sl-bg);
}

.sl-pmf-foot .sl-pager {
  padding: var(--sl-space-3) 0 var(--sl-space-4);
  border-top: 0;
}

.sl-pmf-foot .sl-bulk-bar {
  justify-content: center;
  gap: var(--sl-space-3);
  margin: 0;
  padding: var(--sl-space-3) var(--sl-space-4);
  border-width: 1px 0 0;
  border-radius: 0;
}

.sl-pmf-foot .sl-bulk-bar .sl-but {
  margin: 0;
}

.sl-duo-main {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.sl-pmf-acts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sl-space-3);
  padding: var(--sl-space-3) var(--sl-space-5);
  border-bottom: 1px solid var(--sl-border-subtle);
  background: var(--sl-bg-subtle);
}

.sl-pmf-acts .sl-but { margin: 0; }

.sl-pmf-acts-end {
  display: flex;
  gap: var(--sl-space-3);
  margin-left: auto;
}

/* The focus deck folds through the toggle mechanic of slaed.js so its state outlives the page; paint containment keeps the strip in, overflow: clip does not */
.sl-pmf-focus {
  contain: paint;
  margin-bottom: var(--sl-space-6);
  border: 1px solid var(--sl-border-subtle);
  border-radius: var(--sl-radius-3);
  background: var(--sl-bg);
}

/* The head of the deck is the one cabinet head with the padding of the box it stands in; the line under it belongs to an open deck only */
.sl-pmf-focus > .sl-profile-hub-head {
  padding: var(--sl-space-4) var(--sl-space-5);
}

.sl-pmf-focus > .sl-profile-hub-head:not(.sl-is-closed) { border-bottom: 1px solid var(--sl-border-subtle); }

.sl-pmf-deck {
  display: flex;
  gap: var(--sl-space-4);
  padding: var(--sl-space-5);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
}

/* A slot is a card read across, so its subject and snippet are clamped; its tone comes from the category rotation the template writes */
.sl-pmf-slot {
  display: grid;
  flex: 0 0 248px;
  align-content: start;
  gap: var(--sl-space-3);
  padding: var(--sl-space-5) var(--sl-space-5) var(--sl-space-4);
  border: 1px solid var(--sl-border-subtle);
  border-radius: var(--sl-radius-3);
  background: linear-gradient(180deg, color-mix(in srgb, var(--sl-cat-tone) var(--sl-ico-mix), var(--sl-bg)), var(--sl-bg) 60%);
  scroll-snap-align: start;
  transition: border-color var(--sl-time-base) var(--sl-ease-out), box-shadow var(--sl-time-base) var(--sl-ease-out);
}

.sl-pmf-slot:hover {
  border-color: color-mix(in srgb, var(--sl-cat-tone) var(--sl-tile-mix), var(--sl-border));
  box-shadow: var(--sl-shadow-xs);
}

/* A message saved and still unread is the one the deck exists for, so it carries a tone of its own */
.sl-pmf-slot-keep { --sl-cat-tone: var(--sl-warning); }

.sl-pmf-slot-top {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sl-space-3);
}

.sl-pmf-slot-top img {
  width: var(--sl-pmf-slot-width);
  height: var(--sl-pmf-slot-height);
  border-radius: var(--sl-radius-circle);
  object-fit: cover;
  background: var(--sl-bg-muted);
}

.sl-pmf-slot-top b {
  overflow: hidden;
  color: var(--sl-text-strong);
  font-size: var(--sl-font-small);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sl-pmf-slot-subj {
  display: -webkit-box;
  overflow: hidden;
  color: var(--sl-text-strong);
  font-size: var(--sl-font-body);
  font-weight: var(--sl-weight-bold);
  line-height: var(--sl-line-tight);
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.sl-pmf-slot-subj:hover { color: var(--sl-primary); }

.sl-pmf-slot p {
  display: -webkit-box;
  overflow: hidden;
  margin: 0;
  color: var(--sl-text-muted);
  font-size: var(--sl-font-small);
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.sl-pmf-slot-acts {
  display: flex;
  gap: var(--sl-space-2);
  padding-top: var(--sl-space-3);
  border-top: 1px solid var(--sl-border-subtle);
}

.sl-pmf-slot-more {
  display: grid;
  flex: 0 0 118px;
  place-content: center;
  justify-items: center;
  gap: var(--sl-space-2);
  border: 1px dashed var(--sl-border-strong);
  border-radius: var(--sl-radius-3);
  background: var(--sl-surface);
  color: var(--sl-text-muted);
  font-size: var(--sl-font-small);
  scroll-snap-align: start;
}

.sl-pmf-slot-more i { font-size: var(--sl-size-icon-sm); }

/* The way back to the list exists only where the list is gone; on a wide layout both panels stand side by side and there is nothing to go back to */
.sl-pmf-back { display: none; }

/* The right column keeps to the inset of a tile, the same 12 points the day headers and the focus deck stand on to its left */
.sl-pmf-head {
  padding: var(--sl-space-6) var(--sl-space-5) var(--sl-space-5);
  border-bottom: 1px solid var(--sl-border-subtle);
}

.sl-pmf-head h2 {
  max-width: var(--sl-pmf-head-width);
  margin: 0 0 var(--sl-space-5);
  color: var(--sl-text-strong);
  font-size: var(--sl-font-h2);
  line-height: var(--sl-line-tight);
}

.sl-pmf-who {
  display: flex;
  align-items: center;
  gap: var(--sl-space-5);
}

.sl-pmf-who img {
  width: var(--sl-pmf-who-width);
  height: var(--sl-pmf-who-height);
  border-radius: var(--sl-radius-circle);
  object-fit: cover;
  background: var(--sl-bg-muted);
}

.sl-pmf-who b { display: block; }

.sl-pmf-who small {
  display: block;
  color: var(--sl-text-muted);
}

.sl-pmf-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sl-space-3);
  margin-top: var(--sl-space-5);
}

/* Reading typography: 62 characters to the line at 15/1.62, which is the measure a letter is read at rather than the width the panel happens to have */
.sl-pmf-text {
  flex: 1 1 auto;
  padding: var(--sl-space-6) var(--sl-space-5) var(--sl-space-7);
  line-height: var(--sl-line-loose);
}

.sl-pmf-text p {
  max-width: var(--sl-pmf-text-width);
  margin: 0 0 var(--sl-space-6);
}

.sl-pmf-text p:last-child { margin-bottom: 0; }

.sl-pmf-text blockquote { max-width: var(--sl-pmf-text-width); }

.sl-pmf-sig {
  max-width: var(--sl-pmf-text-width);
  margin-top: var(--sl-space-7);
  padding-top: var(--sl-space-4);
  border-top: 1px solid var(--sl-border-subtle);
  color: var(--sl-text-muted);
  font-size: var(--sl-font-small);
  font-style: italic;
}

/* The send form stands below the swapped region and is built once per visit, so the editor is never created twice; it grows down to the frame */
.sl-pmf-reply {
  container-type: inline-size;
  container-name: sl-form-box;
  display: grid;
  flex: 1 0 auto;
  align-content: start;
  gap: var(--sl-space-3);
  padding: var(--sl-space-6) var(--sl-space-5) var(--sl-space-7);
  border-top: 1px solid var(--sl-border-subtle);
  background: var(--sl-surface);
}

.sl-pmf-reply .sl-field { width: 100%; }

.sl-pmf-reply-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sl-space-3);
}

.sl-pmf-reply-foot .sl-but { margin: 0; }

/* The recipient ring is solid, not an arc: the card answers a grade, never a per cent of another member's mailbox */
.sl-pmf-mate {
  --sl-mate-tone: var(--sl-success);
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sl-space-5);
  padding: var(--sl-space-4) var(--sl-space-5);
  border: 1px solid var(--sl-border-subtle);
  border-radius: var(--sl-radius-3);
  background: var(--sl-surface);
}

.sl-pmf-mate[data-sl-tone="warn"] { --sl-mate-tone: var(--sl-warning); }
.sl-pmf-mate[data-sl-tone="danger"] { --sl-mate-tone: var(--sl-danger); }

/* A mailbox no setting bounds carries the tone of the shelf that has nothing to measure, and its grade has no words, so the chip stands down with them */
.sl-pmf-mate[data-sl-tone="none"] { --sl-mate-tone: var(--sl-text-subtle); }
.sl-pmf-mate .sl-chip:empty { display: none; }

/* The ring takes its tone and its size on the ring itself: sl-knob declares both on its own element, and a declaration there beats one inherited from any ancestor */
.sl-pmf-mate .sl-knob {
  --sl-knob-tone: var(--sl-mate-tone);
  --sl-knob-size: 36px;
}

.sl-pmf-mate img {
  width: var(--sl-pmf-mate-width);
  height: var(--sl-pmf-mate-height);
}

.sl-pmf-mate small { font-size: var(--sl-font-micro); }

/* The group and the last visit are two texts; the separator between them belongs here, so a card that answers only one of them carries no dangling middot */
.sl-pmf-mate small span:empty { display: none; }
.sl-pmf-mate small span + span::before { content: " · "; }

/* The grade chip takes the tone of the ring, as one grade in two colours is two answers; the interval chip beside it keeps the warning tone, whatever the mailbox says */
.sl-pmf-mate .sl-chip {
  margin-top: var(--sl-space-2);
}

.sl-pmf-mate .sl-chip[data-sl-user-slot] {
  background: var(--sl-chip-bg);
  color: var(--sl-mate-tone);
}

/* The grade chip carries the glyph of its grade as an alert carries its tone: an envelope checked while there is room, marked when nearly full, crossed when it will refuse mail */
.sl-pmf-mate .sl-chip[data-sl-user-slot="fill"]::before {
  content: "\f68c";
  margin-right: var(--sl-space-2);
  font-family: "bootstrap-icons";
}

.sl-pmf-mate[data-sl-tone="warn"] .sl-chip[data-sl-user-slot="fill"]::before { content: "\f692"; }
.sl-pmf-mate[data-sl-tone="danger"] .sl-chip[data-sl-user-slot="fill"]::before { content: "\f69a"; }

.sl-pmf-reply .toastui-editor-defaultUI { border-radius: var(--sl-radius-1); }

/* The reading column of the mailbox keeps its height and its measure for the empty state of nothing picked */
.sl-duo-main .sl-empty-pane {
  min-height: var(--sl-pmf-pane-height);
}

.sl-duo-main .sl-empty-pane > p {
  max-width: var(--sl-pmf-blank-width);
}

/* Tablet: the list column gives up width the reading pane needs more than it does */
@container (max-width: 1040px) {
  .sl-duo { grid-template-columns: 330px minmax(0, 1fr); }
}

/* Phone: the panels do not shrink, they take each other's place, and the button that brings the list back appears with them */
@container (max-width: 800px) {
  .sl-duo { grid-template-columns: 1fr; }
  .sl-duo-aside { border-right: 0; }
  .sl-pmf-scroll { max-height: var(--sl-pmf-pane-height); }
  .sl-pmf-back {
    display: inline-flex;
    align-self: flex-start;
    margin: var(--sl-space-3) 0 0 var(--sl-space-6);
  }
  .sl-pmf-head { padding: var(--sl-space-6) var(--sl-space-5); }
  .sl-pmf-head h2 { font-size: var(--sl-font-h3); }
  .sl-pmf-reply { padding: var(--sl-space-5) var(--sl-space-5) var(--sl-space-6); }
  .sl-duo[data-sl-pane="view"] .sl-duo-aside { display: none; }
  .sl-duo[data-sl-pane="list"] .sl-duo-main { display: none; }
}

/* The lower section spans the whole deck width under the rail, like the profile contribution hub; the grid gap spaces the stacked panels */
.sl-cab-lower {
  display: grid;
  gap: var(--sl-space-5);
  grid-column: 1 / -1;
  padding: var(--sl-space-6) var(--sl-space-7) var(--sl-space-7);
  border-top: 1px solid var(--sl-border-subtle);
}

/* Cabinet panels reuse sl-profile-panel; only the scroll-window sizing and column spacing are cabinet-specific */
.sl-cab-main > .sl-profile-panel {
  margin-top: var(--sl-space-5);
}

.sl-profile-panel .sl-profile-scroll {
  height: var(--sl-panel-feed-height);
  background: var(--sl-bg);
}

.sl-profile-panel .sl-profile-scroll::before {
  background: linear-gradient(180deg, var(--sl-bg), transparent);
}

.sl-profile-panel .sl-profile-scroll::after {
  background: linear-gradient(0deg, var(--sl-bg), transparent);
}

.sl-cab-msg-ava {
  width: var(--sl-cab-msg-width);
  height: var(--sl-cab-msg-height);
  overflow: hidden;
  border-radius: var(--sl-radius-circle);
  background: var(--sl-bg-muted);
}

.sl-cab-msg-ava img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sl-cab-rss-form {
  display: flex;
  gap: var(--sl-space-3);
  margin-top: var(--sl-space-4);
}

.sl-cab-rss-form .sl-but {
  flex: 0 0 auto;
  margin: 0;
  white-space: nowrap;
}

.sl-cab-rss-out:empty {
  display: none;
}

@media (max-width: 768px) {
  .sl-cab-deck {
    grid-template-columns: 1fr;
  }

  .sl-cab-rail {
    border-right: 0;
    border-bottom: 1px solid var(--sl-border-subtle);
  }

  .sl-cab-actions {
    grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  }
}

@keyframes sl-profile-auto-scroll {
  from {
    transform: translateY(0);
  }

  to {
    transform: translateY(-50%);
  }
}

@media (max-width: 768px) {
  .sl-profile-split {
    grid-template-columns: 1fr;
  }

  .sl-profile-split-rail {
    border-right: 0;
    border-bottom: 1px solid var(--sl-border-subtle);
  }

  .sl-profile-trust,
  .sl-profile-facts {
    grid-template-columns: 1fr;
  }

  .sl-profile-info-row b {
    max-width: none;
  }

  .sl-profile-hub-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .sl-cab-row.sl-profile-entry {
    grid-template-columns: auto 22px minmax(0, 1fr) auto;
    gap: var(--sl-space-3);
  }
}

/* OAuth provider sign-in buttons and account link management */
.sl-oauth-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sl-space-3);
  margin-top: var(--sl-space-3);
}

.sl-block-login .sl-oauth-row,
.sl-login-oauth .sl-oauth-row {
  grid-column: 1 / -1;
  margin-top: 0;
}

.sl-oauth-label {
  color: var(--sl-text-muted);
}

.sl-oauth-but {
  display: inline-flex;
  align-items: center;
  gap: var(--sl-space-3);
}

.sl-oauth-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--sl-space-5);
  margin-top: var(--sl-space-5);
}

/* The card is 342px wide inside a 1200px window, and its rows read the card rather than the window */
.sl-oauth-form {
  container-type: inline-size;
  container-name: sl-form-box;
}

.sl-oauth-card {
  padding: var(--sl-space-5);
  border: 1px solid var(--sl-border);
  border-radius: var(--sl-radius-3);
  background: var(--sl-surface);
}

.sl-oauth-note {
  color: var(--sl-text-muted);
  margin: var(--sl-space-3) 0 var(--sl-space-3);
}

.sl-oauth-captcha {
  margin-bottom: var(--sl-space-3);
}

.sl-oauth-list {
  list-style: none;
  margin: 0 0 var(--sl-space-3);
  padding: 0;
}

.sl-oauth-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sl-space-3);
  padding: var(--sl-space-3) 0;
  border-bottom: 1px solid var(--sl-border);
}

.sl-oauth-name {
  font-weight: var(--sl-weight-semibold);
  display: inline-flex;
  align-items: center;
  gap: var(--sl-space-3);
}

.sl-oauth-mail,
.sl-oauth-since {
  color: var(--sl-text-muted);
}

.sl-oauth-item .sl-post-button {
  margin-left: auto;
}

.sl-post-button {
  display: inline-flex;
}

/* The file door of a form row carries none of the window's component names, which the administrative browser owns (docs/WINDOW.md) */
.sl-file-door {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sl-space-3);
}

/* The door of an ordinary form keeps its file field out of sight beside the button, so a refusal of an empty required field points at the door, and the button wears the focus the field is given */
.sl-file-door[data-sl-file-form] {
  position: relative;
}

.sl-file-door:has(> [data-sl-field="file"]:focus) > .sl-but {
  box-shadow: var(--sl-shadow-focus);
}

/* The add control standing apart from its group, named by its id, is a green plus before the label of its row: the glyph of the info tip in the colour of adding */
[data-sl-repeat-add]:not([data-sl-repeat-add=""]) {
  display: inline-flex;
  align-items: center;
  margin: 0 var(--sl-space-2) 0 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--sl-success);
  font-size: var(--sl-size-icon-xs);
  line-height: 1;
  vertical-align: middle;
  cursor: pointer;
}

/* A resource row of a material form is one line: the door with its tip whole, then the title taking the rest or wrapping under it */
[data-sl-repeat]:has(> [data-sl-repeat-row] > .sl-file-door) {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sl-space-3);
}

[data-sl-repeat-row]:has(> .sl-file-door) {
  display: flex;
  flex-wrap: wrap;
  align-self: stretch;
  align-items: center;
  gap: var(--sl-space-3);
}

[data-sl-repeat-row] > .sl-file-door {
  flex: none;
}

[data-sl-repeat-row]:has(> .sl-file-door) > input[type="text"] {
  flex: 1 1 0;
}

/* The cross of the chip is the same control the window uses, worn down to the line height of the chip it stands in */
.sl-file-door .sl-but-mini {
  min-width: auto;
  height: auto;
  padding: 0;
  background-color: transparent;
  color: inherit;
}

/* File manager window: the one door the system asks for a file through, on pages with no editor too, so the theme dresses it */
/* Scoped under the window root: the administrative browser owns the same component names in its own theme */
.sl-fm-win .sl-fm-split {
  flex: 1 1 auto;
  min-height: 0;
}

.sl-fm-win .sl-fm-split {
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr);
  min-height: var(--sl-fm-panel-height);
}

.sl-fm-win .sl-fm-rail {
  background: var(--sl-surface);
  border-right: 1px solid var(--sl-border);
  display: flex;
  flex-direction: column;
  gap: var(--sl-space-1);
  overflow-y: auto;
  padding: var(--sl-space-5) var(--sl-space-4);
}

/* Nothing in the rail gives way under pressure: a shrinking section slides under the next one and the whole column reads as one heap of words */
.sl-fm-win .sl-fm-rail > * {
  flex: 0 0 auto;
}

.sl-fm-win .sl-fm-rail-cap {
  color: var(--sl-text-muted);
  font-size: var(--sl-font-micro);
  letter-spacing: var(--sl-track-wide);
  padding: var(--sl-space-2) var(--sl-space-4) var(--sl-space-3);
  text-transform: uppercase;
}

/* The window sits in the editor root, where the vendor gives every button one height; a rail section takes its own height back */
.sl-fm-win .sl-fm-rail-item {
  align-items: flex-start;
  background: transparent;
  border: 0;
  border-radius: var(--sl-radius-2);
  height: auto;
  color: var(--sl-text-strong);
  cursor: pointer;
  display: flex;
  font: inherit;
  gap: var(--sl-space-4);
  padding: var(--sl-space-4) var(--sl-space-5);
  position: relative;
  text-align: left;
  transition: background-color var(--sl-time-fast) var(--sl-ease-out);
}

.sl-fm-win .sl-fm-rail-item .bi {
  color: var(--sl-text-muted);
  flex: 0 0 auto;
  font-size: var(--sl-size-icon-sm);
  margin-top: 1px;
}

.sl-fm-win .sl-fm-rail-item b {
  display: block;
  font-size: var(--sl-font-body);
  font-weight: var(--sl-weight-normal);
}

.sl-fm-win .sl-fm-rail-item small {
  color: var(--sl-text-subtle);
  display: block;
  font-size: var(--sl-font-micro);
  line-height: var(--sl-line-normal);
  margin-top: var(--sl-space-2);
}

.sl-fm-win .sl-fm-rail-item:hover:not([disabled]) {
  background: var(--sl-bg);
}

.sl-fm-win .sl-fm-rail-item[aria-selected="true"] {
  background: var(--sl-bg);
  box-shadow: inset 0 0 0 1px var(--sl-border);
}

.sl-fm-win .sl-fm-rail-item[aria-selected="true"]::before {
  background: var(--sl-primary);
  border-radius: 0 var(--sl-radius-1) var(--sl-radius-1) 0;
  bottom: 10px;
  content: "";
  left: -10px;
  position: absolute;
  top: 10px;
  width: var(--sl-rail-width);
}

.sl-fm-win .sl-fm-rail-item[aria-selected="true"] .bi,
.sl-fm-win .sl-fm-rail-item[aria-selected="true"] b {
  color: var(--sl-primary);
}

/* A section the settings close stays where it is and says why, because a control that vanishes is looked for and one that explains itself is understood */
.sl-fm-win .sl-fm-rail-item[disabled] {
  cursor: not-allowed;
}

.sl-fm-win .sl-fm-rail-item[disabled] b,
.sl-fm-win .sl-fm-rail-item[disabled] .bi {
  color: var(--sl-text-subtle);
}

.sl-fm-win .sl-fm-rail-item[disabled] small {
  color: var(--sl-text-subtle);
  font-style: italic;
}

.sl-fm-win .sl-fm-rail-lock {
  color: var(--sl-text-subtle) !important;
  font-size: var(--sl-size-icon-xs) !important;
  margin: 0 !important;
  position: absolute;
  right: 10px;
  top: 11px;
}

.sl-fm-win .sl-fm-rail-sep {
  background: var(--sl-border);
  height: 1px;
  margin: var(--sl-space-3) var(--sl-space-4);
}

.sl-fm-win .sl-fm-rail-foot {
  color: var(--sl-text-muted);
  font-size: var(--sl-font-micro);
  line-height: var(--sl-line-normal);
  margin-top: auto;
  padding: var(--sl-space-4);
}

.sl-fm-win .sl-fm-rail-foot b {
  color: var(--sl-text-muted);
  display: block;
  font-weight: var(--sl-weight-normal);
}

.sl-fm-win .sl-fm-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.sl-fm-win .sl-fm-main-head {
  padding: var(--sl-space-6) var(--sl-space-7) 0;
}

.sl-fm-win .sl-fm-main-head h2 {
  color: var(--sl-text-strong);
  font: normal var(--sl-font-h4)/1.2 inherit;
  margin: 0 0 var(--sl-space-2);
}

.sl-fm-win .sl-fm-main-head p {
  color: var(--sl-text-muted);
  font-size: var(--sl-font-small);
  line-height: var(--sl-line-normal);
  margin: 0;
}

.sl-fm-win .sl-fm-body {
  flex: 1 1 auto;
  max-height: var(--sl-fm-body-height);
  overflow: auto;
  padding: var(--sl-space-6) var(--sl-space-7);
}

.sl-fm-win .sl-fm-pane {
  display: none;
  flex-direction: column;
  gap: var(--sl-space-5);
}

.sl-fm-win .sl-fm-pane.sl-is-open {
  display: flex;
}

/* The catalogue takes a drop of its own: files dragged onto the storage go up into the same module, and the sheet says so before the pointer is let go */
.sl-fm-win .sl-fm-pane.sl-drag-over {
  background: var(--sl-tint);
  border-radius: var(--sl-radius-3);
  outline: var(--sl-ring-width) dashed var(--sl-primary);
  outline-offset: var(--sl-ring-gap);
}

/* One field standard for the window too: the caption stands left of what it names, the way every other form in the system reads */
.sl-fm-win div:has(> .sl-fm-label) {
  align-items: center;
  display: grid;
  gap: var(--sl-space-6);
  grid-template-columns: 1fr 3fr;
}

.sl-fm-win .sl-fm-label {
  color: var(--sl-text-strong);
  font-size: var(--sl-font-small);
}

.sl-fm-win .sl-fm-drop {
  align-items: center;
  background: var(--sl-surface);
  border: 1px dashed var(--sl-border-strong);
  border-radius: var(--sl-radius-3);
  color: var(--sl-text-muted);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: var(--sl-space-3);
  justify-content: center;
  min-height: var(--sl-fm-drop-height);
  padding: var(--sl-space-7);
  text-align: center;
  transition: border-color var(--sl-time-fast) var(--sl-ease-out), background-color var(--sl-time-fast) var(--sl-ease-out);
}

.sl-fm-win .sl-fm-drop:hover,
.sl-fm-win .sl-fm-drop:focus-visible,
.sl-fm-win .sl-fm-drop.sl-drag-over {
  background: var(--sl-tint);
  border-color: var(--sl-primary);
  outline: 0;
}

.sl-fm-win .sl-fm-drop .bi {
  color: var(--sl-primary);
  font-size: var(--sl-size-icon-lg);
}

.sl-fm-win .sl-fm-drop b {
  color: var(--sl-text-strong);
  font-weight: var(--sl-weight-normal);
}

.sl-fm-win .sl-fm-drop small {
  font-size: var(--sl-font-small);
}

.sl-fm-win .sl-fm-as {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sl-space-3);
}

.sl-fm-win .sl-fm-as label {
  align-items: center;
  background: var(--sl-surface);
  border: 1px solid var(--sl-border);
  border-radius: var(--sl-radius-pill);
  color: var(--sl-text-strong);
  cursor: pointer;
  display: inline-flex;
  font-size: var(--sl-font-small);
  gap: var(--sl-space-3);
  height: var(--sl-fm-as-height);
  padding: 0 var(--sl-space-5);
}

.sl-fm-win .sl-fm-as input {
  opacity: 0;
  pointer-events: none;
  position: absolute;
}

.sl-fm-win .sl-fm-as label:has(input:checked) {
  background: var(--sl-tint);
  border-color: var(--sl-primary);
  color: var(--sl-primary-strong);
}

/* The action sits in the row of the view choice: the same shape, pushed to the right, because it is not one of the choices */
.sl-fm-win .sl-fm-as button {
  align-items: center;
  background: var(--sl-surface);
  border: 1px solid var(--sl-border);
  border-radius: var(--sl-radius-pill);
  color: var(--sl-text-strong);
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-size: var(--sl-font-small);
  gap: var(--sl-space-3);
  height: var(--sl-fm-as-height);
  margin-left: auto;
  padding: 0 var(--sl-space-5);
}

.sl-fm-win .sl-fm-as button:hover {
  border-color: var(--sl-primary);
  color: var(--sl-primary);
}

.sl-fm-win .sl-fm-as button .bi {
  font-size: var(--sl-size-icon-xs);
}

.sl-fm-win .sl-fm-field {
  background: var(--sl-field-bg);
  border: 1px solid var(--sl-field-border);
  border-radius: var(--sl-field-radius);
  box-shadow: var(--sl-field-shadow);
  box-sizing: border-box;
  color: var(--sl-text);
  display: block;
  font: inherit;
  height: var(--sl-fm-field-height);
  padding: 0 var(--sl-space-5);
  width: 100%;
}

.sl-fm-win .sl-fm-field:focus,
.sl-fm-win .sl-fm-view {
  display: flex;
  flex-direction: column;
  gap: var(--sl-space-5);
}

/* The tile is as wide as the open fan needs, because the fan unfolds to the left and has to fit inside the tile it belongs to */
.sl-fm-win .sl-fm-grid {
  display: grid;
  gap: var(--sl-space-4);
  grid-template-columns: repeat(auto-fill, minmax(176px, 1fr));
}

/* The wrapper holds the fan above the tile: the tile itself clips its own overflow, or the open fan would be cut off by it */
.sl-fm-win .sl-fm-cell {
  position: relative;
}

.sl-fm-win .sl-fm-cell > .sl-dial {
  bottom: 9px;
  position: absolute;
  right: 6px;
}

/* The mark of a file: the plain checkbox of base.css on a round backing, so it stays readable over a picture */
.sl-fm-win .sl-fm-pick {
  align-items: center;
  background: var(--sl-fm-pick-bg);
  border-radius: var(--sl-radius-circle);
  cursor: pointer;
  display: inline-flex;
  height: var(--sl-fm-pick-height);
  justify-content: center;
  left: 6px;
  position: absolute;
  top: 6px;
  width: var(--sl-fm-pick-width);
  z-index: var(--sl-z-raised);
}

.sl-fm-win .sl-fm-pick input {
  margin: 0;
}

/* The same ring marks the picked plate of the preset gallery on the settings page, so one pick looks like one pick everywhere */
.sl-fm-win .sl-fm-cell:has(.sl-fm-pick input:checked) .sl-fm-tile,
.sl-opt-tile .sl-radio-group:not(.sl-radio-switch) .sl-radio:has(input:checked) {
  border-color: var(--sl-primary);
  box-shadow: 0 0 0 var(--sl-ring-width) var(--sl-field-ring);
}

/* The current file is the one whose properties stand on the right; a mark is a separate thing and serves the actions over several files */
.sl-fm-win .sl-fm-cell.sl-is-current .sl-fm-tile {
  border-color: var(--sl-border-strong);
}

.sl-fm-win .sl-fm-row.sl-is-current,
.sl-fm-win .sl-fm-row:has(.sl-fm-pick input:checked) {
  background: var(--sl-tint);
  border-color: var(--sl-primary);
}

.sl-fm-win .sl-fm-job .sl-fm-pick,
.sl-fm-win .sl-fm-row .sl-fm-pick,
.sl-fm-win .sl-fm-rows-head .sl-fm-pick {
  background: none;
  height: auto;
  position: static;
  width: auto;
}

.sl-fm-win .sl-fm-view .sl-bulk-bar {
  margin-top: 0;
}

.sl-fm-win .sl-fm-tile {
  background: var(--sl-bg);
  border: 1px solid var(--sl-border);
  border-radius: var(--sl-radius-3);
  display: block;
  overflow: hidden;
  padding: 0;
  position: relative;
}

.sl-fm-win .sl-fm-cell:hover .sl-fm-tile {
  border-color: var(--sl-border-strong);
}

.sl-fm-win .sl-fm-tile-img {
  align-items: center;
  background: var(--sl-bg-subtle);
  color: var(--sl-text-muted);
  display: flex;
  font-size: var(--sl-size-icon-md);
  height: var(--sl-fm-tile-height);
  justify-content: center;
  position: relative;
}

.sl-fm-win .sl-fm-tile-img img,
.sl-fm-win .sl-fm-row-thumb img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

/* The whole preview is one link: the shared lightbox opens by the picture of the object */
.sl-fm-win .sl-fm-zoom {
  align-items: center;
  background: var(--sl-scrim);
  color: var(--sl-on-solid);
  display: flex;
  font-size: var(--sl-size-icon-sm);
  inset: 0;
  justify-content: center;
  opacity: 0;
  position: absolute;
  text-decoration: none;
  transition: opacity var(--sl-time-fast) var(--sl-ease-out);
}

.sl-fm-win .sl-fm-zoom:hover,
.sl-fm-win .sl-fm-zoom:focus-visible {
  opacity: 1;
}

/* The kind badge went right: the mark of the file stands top left now */
.sl-fm-win .sl-fm-tile-kind {
  align-items: center;
  background: var(--sl-fm-kind-bg);
  border-radius: var(--sl-radius-pill);
  color: var(--sl-text-muted);
  display: inline-flex;
  font-size: var(--sl-font-micro);
  height: var(--sl-fm-kind-height);
  letter-spacing: var(--sl-track-wide);
  padding: 0 var(--sl-space-3);
  position: absolute;
  right: 6px;
  top: 6px;
}

.sl-fm-win .sl-fm-tile-cap {
  border-top: 1px solid var(--sl-border);
  display: block;
  padding: var(--sl-space-3);
  padding-right: calc(var(--sl-size-chip) + var(--sl-space-3) * 2);
}

.sl-fm-win .sl-fm-tile-cap b {
  color: var(--sl-text-strong);
  display: block;
  font-size: var(--sl-font-small);
  font-weight: var(--sl-weight-normal);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sl-fm-win .sl-fm-tile-cap small {
  color: var(--sl-text-subtle);
  display: block;
  font-size: var(--sl-font-micro);
  margin-top: var(--sl-space-1);
}

.sl-fm-win .sl-fm-more {
  color: var(--sl-text-muted);
  font-size: var(--sl-font-small);
  margin: 0;
}

.sl-fm-win .sl-fm-lib-bar {
  align-items: center;
  display: flex;
  gap: var(--sl-space-3);
}

.sl-fm-win .sl-fm-search {
  flex: 1 1 auto;
  min-width: 0;
  position: relative;
}

.sl-fm-win .sl-fm-search .bi {
  color: var(--sl-text-subtle);
  font-size: var(--sl-size-icon-xs);
  left: 11px;
  pointer-events: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.sl-fm-win .sl-fm-search input {
  background: var(--sl-field-bg);
  border: 1px solid var(--sl-field-border);
  border-radius: var(--sl-radius-pill);
  box-shadow: var(--sl-field-shadow);
  box-sizing: border-box;
  color: var(--sl-text);
  font: inherit;
  height: var(--sl-fm-search-height);
  padding: 0 var(--sl-space-5) 0 calc(var(--sl-size-icon-xs) + var(--sl-space-6));
  width: 100%;
}

.sl-fm-win .sl-fm-search input:focus {
  border-color: var(--sl-primary);
  box-shadow: var(--sl-field-shadow), 0 0 0 var(--sl-ring-width) var(--sl-field-ring);
  outline: 0;
}

.sl-fm-win .sl-fm-filters {
  display: flex;
  gap: var(--sl-space-2);
}

.sl-fm-win .sl-fm-filter {
  background: var(--sl-bg);
  border: 1px solid var(--sl-border);
  border-radius: var(--sl-radius-pill);
  color: var(--sl-text-muted);
  cursor: pointer;
  font: inherit;
  font-size: var(--sl-font-small);
  height: var(--sl-fm-filter-height);
  padding: 0 var(--sl-space-5);
}

.sl-fm-win .sl-fm-filter:hover {
  border-color: var(--sl-border-strong);
  color: var(--sl-text);
}

.sl-fm-win .sl-fm-filter[aria-pressed="true"] {
  background: var(--sl-tint);
  border-color: var(--sl-primary);
  color: var(--sl-primary-strong);
}

.sl-fm-win .sl-fm-modes {
  background: var(--sl-bg-subtle);
  border-radius: var(--sl-radius-2);
  display: flex;
  gap: var(--sl-space-1);
  padding: var(--sl-space-1);
}

.sl-fm-win .sl-fm-mode {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: var(--sl-radius-2);
  color: var(--sl-text-muted);
  cursor: pointer;
  display: inline-flex;
  font-size: var(--sl-size-icon-xs);
  height: var(--sl-size-chip);
  justify-content: center;
  width: var(--sl-fm-mode-width);
}

.sl-fm-win .sl-fm-mode[aria-pressed="true"],
.sl-fm-win .sl-fm-mode[aria-expanded="true"],
.sl-editor-diff-mode[aria-pressed="true"] {
  background: var(--sl-bg);
  box-shadow: var(--sl-shadow-xs);
  color: var(--sl-primary);
}

.sl-fm-win .sl-fm-lib-split {
  align-items: start;
  display: grid;
  gap: var(--sl-space-6);
  grid-template-columns: minmax(0, 1fr) 246px;
}

/* Closed properties give their column to the list */
.sl-fm-win .sl-fm-lib-split:has(> .sl-fm-props[hidden]) {
  grid-template-columns: minmax(0, 1fr);
}

.sl-fm-win .sl-fm-rows {
  display: flex;
  flex-direction: column;
}

.sl-fm-win .sl-fm-rows-head,
.sl-fm-win .sl-fm-row {
  align-items: center;
  display: grid;
  gap: var(--sl-space-4);
  grid-template-columns: 22px 44px minmax(0, 1fr) 68px 78px 88px 34px;
}

.sl-fm-win .sl-fm-rows-head {
  border-bottom: 1px solid var(--sl-border);
  color: var(--sl-text-subtle);
  font-size: var(--sl-font-micro);
  letter-spacing: var(--sl-track-wide);
  padding: 0 var(--sl-space-3) var(--sl-space-3);
  text-transform: uppercase;
}

/* A sortable head column is a button for the keyboard, dressed as the label it replaced */
.sl-fm-win .sl-fm-rows-head [data-sl-sort] {
  background: none;
  border: 0;
  color: inherit;
  cursor: pointer;
  font: inherit;
  letter-spacing: inherit;
  padding: 0 var(--sl-space-6) 0 0;
  text-align: left;
  text-transform: inherit;
}

.sl-fm-win .sl-fm-rows-head [data-sl-sort]:hover {
  color: var(--sl-text);
}

.sl-fm-win .sl-fm-row {
  border: 1px solid transparent;
  border-radius: var(--sl-radius-2);
  padding: var(--sl-space-3);
  position: relative;
}

.sl-fm-win .sl-fm-row:hover {
  background: var(--sl-surface);
  border-color: var(--sl-border);
}

.sl-fm-win .sl-fm-row-thumb {
  align-items: center;
  background: var(--sl-bg-subtle);
  color: var(--sl-text-muted);
  display: flex;
  font-size: var(--sl-size-icon-xs);
  height: var(--sl-fm-row-height);
  justify-content: center;
  overflow: hidden;
  position: relative;
  width: var(--sl-fm-row-width);
}

.sl-fm-win .sl-fm-row .sl-dial {
  justify-self: end;
}

/* The fan opened at the pointer leaves the corner of its object: the rule stands after both anchors of this window, because a menu at the pointer overrules both */
.sl-fm-win .sl-dial.sl-dial-point {
  bottom: auto;
  justify-self: auto;
  position: absolute;
  right: auto;
}

/* The object the keys walk to must be seen as the object the keys will act on */
.sl-fm-win .sl-fm-row:focus-visible,
.sl-fm-win .sl-fm-cell:focus-visible {
  border-radius: var(--sl-radius-3);
  outline: var(--sl-ring-width) solid var(--sl-primary);
  outline-offset: var(--sl-ring-gap);
}

.sl-fm-win .sl-fm-row-name {
  color: var(--sl-text-strong);
  font-size: var(--sl-font-small);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sl-fm-win .sl-fm-row-meta {
  color: var(--sl-text-subtle);
  font-size: var(--sl-font-micro);
}

.sl-fm-win .sl-fm-props,
.sl-shot-side .sl-fm-props {
  background: var(--sl-surface);
  border: 1px solid var(--sl-border);
  border-radius: var(--sl-radius-3);
  padding: var(--sl-space-5);
}

.sl-fm-win .sl-fm-props-cap {
  color: var(--sl-text-subtle);
  display: block;
  font-size: var(--sl-font-micro);
  letter-spacing: var(--sl-track-wide);
  margin-bottom: var(--sl-space-4);
  text-transform: uppercase;
}

/* The properties picture is the frame of a tile's zoom overlay; with no picture its one glyph is drawn at the top step */
.sl-fm-win .sl-fm-props-img {
  align-items: center;
  background: var(--sl-bg-subtle);
  border-radius: var(--sl-radius-2);
  color: var(--sl-text-muted);
  display: flex;
  font-size: var(--sl-size-icon-xl);
  height: var(--sl-fm-props-height);
  justify-content: center;
  margin-bottom: var(--sl-space-4);
  overflow: hidden;
  position: relative;
}

.sl-fm-win .sl-fm-props-img img {
  height: 100%;
  object-fit: contain;
  width: 100%;
}

.sl-fm-win .sl-fm-props dl {
  margin: 0;
}

.sl-fm-win .sl-fm-props div,
.sl-shot-side .sl-fm-props div {
  border-bottom: 1px dashed var(--sl-border);
  display: flex;
  font-size: var(--sl-font-small);
  gap: var(--sl-space-4);
  justify-content: space-between;
  padding: var(--sl-space-2) 0;
}

.sl-fm-win .sl-fm-props div:last-child,
.sl-shot-side .sl-fm-props div:last-child {
  border-bottom: 0;
}

.sl-fm-win .sl-fm-props dt,
.sl-shot-side .sl-fm-props dt {
  color: var(--sl-text-subtle);
  flex: 0 0 auto;
}

.sl-fm-win .sl-fm-props dd,
.sl-shot-side .sl-fm-props dd {
  color: var(--sl-text-strong);
  margin: 0;
  min-width: 0;
  overflow: hidden;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The object fan opens upward: below it there is only the note, and a fan opening down would leave the panel */
.sl-fm-win .sl-fm-props-acts {
  display: flex;
  justify-content: flex-end;
  margin-top: var(--sl-space-4);
  min-height: var(--sl-size-chip);
}

.sl-fm-win .sl-fm-props-note {
  color: var(--sl-text-subtle);
  font-size: var(--sl-font-micro);
  line-height: var(--sl-line-normal);
  margin: var(--sl-space-4) 0 0;
}

/* The window of files keeps its own measure of the line under the title of an empty catalogue */
.sl-fm-win .sl-empty > p {
  max-width: var(--sl-fm-empty-width);
}

/* The skeleton of the catalogue takes the shape of a tile, because tiles is what the compact catalogue shows and a row-shaped placeholder would jump when the answer lands */
.sl-fm-win .sl-skel-tile {
  background: var(--sl-bg);
  border: 1px solid var(--sl-border);
  border-radius: var(--sl-radius-3);
  overflow: hidden;
}

.sl-fm-win .sl-skel-tile .sl-skel-cell {
  border-radius: 0;
  height: var(--sl-skel-tile-height);
}

.sl-fm-win .sl-skel-tile .sl-skel-line {
  height: var(--sl-skel-row-height);
  margin: var(--sl-space-3);
}

/* The upload queue: the files go one at a time, each with its own bar and its own cancel, and a refused one names the reason the server gave */
.sl-fm-win .sl-fm-queue {
  background: var(--sl-surface);
  border: 1px solid var(--sl-border);
  border-radius: var(--sl-radius-3);
  display: flex;
  flex-direction: column;
  gap: var(--sl-space-4);
  padding: var(--sl-space-5);
}

.sl-fm-win .sl-fm-queue-cap {
  align-items: center;
  color: var(--sl-text-muted);
  display: flex;
  font-size: var(--sl-font-small);
  gap: var(--sl-space-4);
}

.sl-fm-win .sl-fm-queue-cap b {
  color: var(--sl-text-strong);
  flex: 1 1 auto;
  font-weight: var(--sl-weight-normal);
}

.sl-fm-win .sl-fm-job {
  align-items: center;
  display: grid;
  gap: var(--sl-space-4);
  grid-template-columns: 22px minmax(0, 1fr) 28px;
}

.sl-fm-win .sl-fm-job > .bi {
  color: var(--sl-text-muted);
  font-size: var(--sl-size-icon-sm);
}

.sl-fm-win .sl-fm-job-name {
  color: var(--sl-text-strong);
  display: flex;
  font-size: var(--sl-font-small);
  gap: var(--sl-space-4);
  justify-content: space-between;
  margin-bottom: var(--sl-space-2);
}

.sl-fm-win .sl-fm-job-name span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sl-fm-win .sl-fm-job-name small {
  color: var(--sl-text-subtle);
  flex: 0 0 auto;
}

.sl-fm-win .sl-fm-job-why {
  color: var(--sl-danger);
  font-size: var(--sl-font-small);
  line-height: var(--sl-line-normal);
  margin: 0;
}

.sl-fm-win .sl-fm-job.sl-is-done > .bi {
  color: var(--sl-success);
}

.sl-fm-win .sl-fm-job.sl-is-fail > .bi {
  color: var(--sl-danger);
}

/* An action goes at its own pace: while the server has not answered, the object is dimmed under a cover, and nothing on the list disappears before the answer */
.sl-fm-win .sl-fm-busy {
  background: var(--sl-fm-busy-bg);
  border-radius: var(--sl-radius-2);
  inset: 0;
  position: absolute;
  z-index: var(--sl-z-overlay);
}

.sl-fm-win .sl-fm-quota {
  align-items: center;
  color: var(--sl-text-muted);
  display: flex;
  font-size: var(--sl-font-small);
  gap: var(--sl-space-4);
}

.sl-fm-win .sl-fm-quota-track {
  background: var(--sl-bg-subtle);
  border-radius: var(--sl-radius-1);
  flex: 1 1 auto;
  height: var(--sl-fm-quota-height);
  overflow: hidden;
}

.sl-fm-win .sl-fm-quota-fill {
  background: linear-gradient(90deg, var(--sl-primary), var(--sl-primary-strong));
  border-radius: var(--sl-radius-1);
  display: block;
  height: 100%;
}

.sl-toastui-file-input {
  display: none;
}

/* Expanded, the body takes the window's ceiling instead of its own, or a full catalogue grows past the frame */
.sl-fm-win.sl-is-full .sl-fm-body {
  flex: 1 1 auto;
  max-height: none;
  min-height: 0;
  overflow-y: auto;
}

/* The column is a grid item as tall as its content unless told otherwise, so without this the body never learns its ceiling */
.sl-fm-win.sl-is-full .sl-fm-main {
  min-height: 0;
}

@media (max-width: 900px) {
  .sl-fm-win .sl-fm-lib-split {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .sl-fm-win .sl-fm-split {
    grid-template-columns: 1fr;
  }
  .sl-fm-win .sl-fm-rail {
    border-bottom: 1px solid var(--sl-border);
    border-right: 0;
    flex-direction: row;
    overflow-x: auto;
  }
  .sl-fm-win .sl-fm-rail-cap,
  .sl-fm-win .sl-fm-rail-sep,
  .sl-fm-win .sl-fm-rail-foot {
    display: none;
  }
  .sl-fm-win .sl-fm-rail-item small {
    display: none;
  }
  .sl-fm-win .sl-fm-rail-item[disabled] small {
    display: block;
    max-width: var(--sl-rail-max-width);
  }
  .sl-fm-win .sl-fm-rail-item[aria-selected="true"]::before {
    bottom: -12px;
    height: var(--sl-rail-width);
    left: 10px;
    right: 10px;
    top: auto;
    width: auto;
  }
  .sl-fm-win .sl-fm-rows-head,
  .sl-fm-win .sl-fm-row {
    grid-template-columns: 22px 44px minmax(0, 1fr) 88px 34px;
  }
  .sl-fm-win .sl-fm-rows-head span:nth-child(4),
  .sl-fm-win .sl-fm-row span:nth-child(4),
  .sl-fm-win .sl-fm-rows-head span:nth-child(5),
  .sl-fm-win .sl-fm-row span:nth-child(5) {
    display: none;
  }
}