/**
 * Fileshelf - site styles (fileshelf#64). Built to step back for every template:
 *
 * 1. The look (colours, lines, corners, buttons, fields) sits in the cascade layer "fileshelf"
 *    behind :where(), so any rule of the template wins - without !important, without an override.
 *    The arrangement (list resets, grids, gaps, the compact list) stands outside the layer with
 *    plain class selectors: a layered rule would even lose to `ul { padding-left: 2rem }` of a
 *    template, and the lists would be indented (measured in Cassiopeia, 11.11.2026).
 * 2. Colours, lines and corners come from custom properties that fall back to the template:
 *    Cassiopeia (compiles Bootstrap without prefix: --border-color, --border-radius,
 *    --cassiopeia-color-primary), standard Bootstrap 5.3 (--bs-*), otherwise derived from the text
 *    colour - so they work on light and dark areas alike. A template or user.css sets them:
 *      .com-fileshelf { --fsh-accent: #b8322b; --fsh-radius: 0; }
 * 3. Layouts follow the width of the area they stand in (container queries), not the screen:
 *    main column, sidebar, module position, page-builder grid.
 * 4. Buttons, fields and tables also carry the classes of Bootstrap and UIkit (Ui::cls()); the
 *    look comes from the template where it has a framework, from here where it has none.
 *
 * Only the choices of the tab "Appearance" (accent, corners) stand outside the layer, bound to
 * modifier classes on the outer element: what the site owner picked there should win.
 *
 * Copyright 2026 Norbert Graup. GNU General Public License version 3 or later.
 */
/* ===== Arrangement: outside the layer, one class each - beats element rules of templates ===== */

/* The outer element of every view, module and list: the container the layouts measure. */
.com-fileshelf {
  container: fileshelf / inline-size;
}

.com-fileshelf-list,
.com-fileshelf-cards,
.com-fileshelf-pills,
.com-fileshelf-tree__list,
.com-fileshelf-item__tags,
.com-fileshelf-categories__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Introduction of the overview above the categories (fileshelf#89). */
.com-fileshelf-categories__intro {
  margin-bottom: 1.5rem;
  max-width: 70ch;
}

.com-fileshelf-categories__intro > :last-child {
  margin-bottom: 0;
}

.com-fileshelf-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.com-fileshelf-item {
  align-items: flex-start;
  display: flex;
  flex-wrap: wrap;
  gap: var(--fsh-gap, 1rem);
}

.com-fileshelf-item__icon,
.com-fileshelf-file__icon {
  flex: 0 0 auto;
}

.com-fileshelf-item__body {
  flex: 1 1 16rem;
  min-width: 0;
}

/* May shrink: a lock with its reason wraps instead of pushing out of a narrow column. */
.com-fileshelf-item__action {
  align-self: center;
  flex: 0 1 auto;
  max-width: 100%;
  min-width: 0;
}

.com-fileshelf-item__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.75rem;
}

.com-fileshelf-lock {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.5rem;
}

/* Cards: as many columns as the area holds. */
.com-fileshelf-cards {
  display: grid;
  gap: var(--fsh-gap, 1rem);
  grid-template-columns: repeat(auto-fill, minmax(min(16rem, 100%), 1fr));
}

.com-fileshelf-cards__card .com-fileshelf-item {
  flex-direction: column;
}

/* In a column the basis of 16rem would become a height. */
.com-fileshelf-cards__card .com-fileshelf-item__body {
  flex: 0 1 auto;
}

.com-fileshelf-cards__card .com-fileshelf-item__action {
  align-self: flex-start;
}

.com-fileshelf-categories__list .com-fileshelf-categories__list {
  margin-inline-start: 1.5rem;
}

.com-fileshelf-tree__list .com-fileshelf-tree__list {
  margin-inline-start: 1rem;
}

/*
 * Head of a category and of the overview (fileshelf#84, layout fileshelf.categoryhead). K1, the
 * default: the image beside title and description, whole, at most 220 x 160; in narrow containers
 * above the text. K2: a banner across the full width, 3 : 1, cropped.
 */
.com-fileshelf-head--beside.com-fileshelf-head--image {
  align-items: start;
  display: grid;
  gap: var(--fsh-gap, 1rem);
  grid-template-columns: auto minmax(0, 1fr);
}

.com-fileshelf-head--beside .com-fileshelf-head__img {
  display: block;
  height: auto;
  max-height: 160px;
  max-width: 220px;
  object-fit: contain;
  width: auto;
}

.com-fileshelf-head--banner {
  display: grid;
  gap: var(--fsh-gap, 1rem);
}

.com-fileshelf-head--banner .com-fileshelf-head__img {
  aspect-ratio: 3 / 1;
  display: block;
  height: auto;
  object-fit: cover;
  width: 100%;
}

.com-fileshelf-head__text > :first-child {
  margin-top: 0;
}

/* In the overview the tiles follow the head directly; keep them apart. */
.com-fileshelf-categories > .com-fileshelf-head {
  margin-block-end: calc(var(--fsh-gap, 1rem) * 1.5);
}

@container fileshelf (max-width: 26rem) {
  .com-fileshelf-head--beside.com-fileshelf-head--image {
    grid-template-columns: minmax(0, 1fr);
  }

  .com-fileshelf-head--beside .com-fileshelf-head__img {
    max-width: min(160px, 100%);
  }
}

/* "list": the tree beside the downloads, below them in narrow areas. */
.com-fileshelf-layout--with-tree {
  display: grid;
  gap: 2rem;
  grid-template-areas: "main" "tree";
  grid-template-columns: minmax(0, 1fr);
}

.com-fileshelf-layout--with-tree .com-fileshelf-layout__main {
  grid-area: main;
}

.com-fileshelf-layout--with-tree .com-fileshelf-tree {
  grid-area: tree;
}

.com-fileshelf-filter,
.com-fileshelf-switch {
  align-items: flex-end;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.com-fileshelf-filter__field {
  display: flex;
  flex: 0 1 12rem;
  flex-direction: column;
  gap: 0.25rem;
}

.com-fileshelf-filter__field--search {
  flex: 1 1 16rem;
}

.com-fileshelf-filter__actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.com-fileshelf-switch .com-fileshelf-select {
  flex: 1 1 14rem;
  width: auto;
}

.com-fileshelf-table-wrap {
  overflow-x: auto;
}

/* The download page: the box beside the description, above it in narrow areas. */
.com-fileshelf-download__body {
  display: grid;
  gap: 2rem;
  grid-template-columns: minmax(0, 1fr);
}

.com-fileshelf-file {
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.com-fileshelf-file__head {
  align-items: center;
  display: flex;
  gap: 0.875rem;
}

.com-fileshelf-file__name {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow-wrap: anywhere;
}

.com-fileshelf-file__button {
  box-sizing: border-box;
  width: 100%;
}

.com-fileshelf-file__facts {
  display: grid;
  gap: 0.25rem 1rem;
  grid-template-columns: auto 1fr;
  margin: 0;
}

.com-fileshelf-file__facts dd {
  margin: 0;
}

.com-fileshelf-button__icon {
  display: none;
}

@container fileshelf (min-width: 48rem) {
  .com-fileshelf-layout--with-tree {
    grid-template-areas: "tree main";
    grid-template-columns: minmax(12rem, 16rem) minmax(0, 1fr);
  }

  .com-fileshelf-download__body {
    grid-template-areas: "main file";
    grid-template-columns: minmax(0, 1fr) minmax(16rem, 22rem);
  }

  .com-fileshelf-download__body > .com-fileshelf-file {
    grid-area: file;
  }

  .com-fileshelf-download__body > .com-fileshelf-download__main {
    grid-area: main;
  }
}

/* Sidebar and module positions: a compact list, the button becomes a symbol (its name stays in
   aria-label). Two classes, so the button's padding of the framework gives way here. */
@container fileshelf (max-width: 26rem) {
  .com-fileshelf-list .com-fileshelf-list__entry {
    padding: 0.6rem 0;
  }

  .com-fileshelf-list .com-fileshelf-item {
    align-items: center;
    gap: 0.4rem 0.6rem;
  }

  .com-fileshelf-list .com-fileshelf-item__icon {
    height: 36px;
    width: 30px;
  }

  /* The body keeps room for the title; a lock with its text moves to the next line. */
  .com-fileshelf-list .com-fileshelf-item__body {
    flex: 1 1 8rem;
  }

  .com-fileshelf-list .com-fileshelf-item__title {
    font-size: 1rem;
    margin: 0;
  }

  .com-fileshelf-list .com-fileshelf-item__details,
  .com-fileshelf-list .com-fileshelf-lock {
    font-size: 0.875rem;
  }

  .com-fileshelf-list .com-fileshelf-item__tags {
    display: none;
  }

  .com-fileshelf-list .com-fileshelf-item__button {
    line-height: 1;
    min-height: 2.25rem;
    min-width: 2.25rem;
    padding: 0.5rem;
  }

  .com-fileshelf-list .com-fileshelf-button__icon {
    display: inline-block;
    vertical-align: middle;
  }

  .com-fileshelf-list .com-fileshelf-button__label {
    clip: rect(0, 0, 0, 0);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
  }
}

/* Text for screen readers only. Bootstrap has the class, UIkit (YOOtheme) does not. */
.com-fileshelf .visually-hidden {
  border: 0 !important;
  clip: rect(0, 0, 0, 0) !important;
  height: 1px !important;
  margin: -1px !important;
  overflow: hidden !important;
  padding: 0 !important;
  position: absolute !important;
  white-space: nowrap !important;
  width: 1px !important;
}

/* ===== 1.8.0 (fileshelf#72): overview of categories, type labels, table on narrow screens ===== */

/* Overview "tiles": as many columns as fit; "list": one row per category. */
.com-fileshelf-categories--tiles .com-fileshelf-categories__list {
  display: grid;
  gap: var(--fsh-gap, 1rem);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
}

.com-fileshelf-categories--tiles .com-fileshelf-categories__entry {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* T1 (fileshelf#84): an area 16 : 9 for every tile, the image fitted, never cropped. */
.com-fileshelf-categories--tiles .com-fileshelf-categories__visual {
  align-items: center;
  aspect-ratio: 16 / 9;
  display: flex;
  justify-content: center;
  overflow: hidden;
}

.com-fileshelf-categories--list .com-fileshelf-categories__entry {
  align-items: flex-start;
  display: flex;
  gap: var(--fsh-gap, 1rem);
}

.com-fileshelf-categories--list .com-fileshelf-categories__visual {
  align-items: center;
  display: flex;
  flex: 0 0 3.5rem;
  height: 3.5rem;
  justify-content: center;
  overflow: hidden;
}

.com-fileshelf-categories__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 0;
}

.com-fileshelf-categories__image {
  height: 100%;
  object-fit: contain;
  width: 100%;
}

/* The type of a file as a tile (lists) or a label (tables, cards). */
.com-fileshelf-item__type {
  align-items: flex-end;
  box-sizing: border-box;
  display: inline-flex;
  height: 3.25rem;
  justify-content: center;
  padding-bottom: 0.35rem;
  width: 2.75rem;
}

.com-fileshelf-subcats {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.75rem 0;
}

.com-fileshelf-subcats .com-fileshelf-pills {
  margin-top: 0;
}

/* A table on a narrow screen: every row a block, the values with their label. */
@container fileshelf (max-width: 36rem) {
  .com-fileshelf-table-wrap table,
  .com-fileshelf-table-wrap tbody,
  .com-fileshelf-table-wrap tr,
  .com-fileshelf-table-wrap th,
  .com-fileshelf-table-wrap td {
    display: block;
    width: auto;
  }

  .com-fileshelf-table-wrap thead {
    display: none;
  }

  .com-fileshelf-table-wrap tr {
    padding: 0.6rem 0;
  }

  .com-fileshelf-table-wrap th,
  .com-fileshelf-table-wrap td {
    border: 0;
    padding: 0.1rem 0;
  }

  .com-fileshelf-table-wrap td[data-label]::before {
    content: attr(data-label) ": ";
  }

  .com-fileshelf-table__action {
    margin-top: 0.4rem;
  }
}

/* ===== Look: inside the layer - every rule of the template wins ===== */
@layer fileshelf {
  :where(:root) {
    --fsh-accent: var(--cassiopeia-color-primary, var(--bs-primary, var(--primary, #2a5ca8)));
    --fsh-on-accent: #fff;
    --fsh-border: var(--border-color, var(--bs-border-color, color-mix(in srgb, currentcolor 18%, transparent)));
    --fsh-muted: color-mix(in srgb, currentcolor 72%, transparent);
    --fsh-tint: color-mix(in srgb, currentcolor 6%, transparent);
    --fsh-radius: var(--border-radius, var(--bs-border-radius, 0.375rem));
    --fsh-gap: 1rem;
  }

  /* Controls for templates without a framework; Bootstrap and UIkit classes override them. */
  :where(.com-fileshelf-button) {
    align-items: center;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--fsh-radius);
    color: inherit;
    cursor: pointer;
    display: inline-flex;
    font: inherit;
    gap: 0.4em;
    justify-content: center;
    line-height: 1.3;
    padding: 0.55em 1.1em;
    text-decoration: none;
  }

  :where(.com-fileshelf-button--primary) {
    background: var(--fsh-accent);
    border-color: var(--fsh-accent);
    color: var(--fsh-on-accent);
  }

  :where(.com-fileshelf-button--secondary) {
    border-color: var(--fsh-border);
  }

  :where(.com-fileshelf-button--link) {
    padding-inline: 0.25em;
    text-decoration: underline;
  }

  :where(.com-fileshelf-button--small) {
    font-size: 0.875em;
    padding: 0.35em 0.75em;
  }

  :where(.com-fileshelf-button:hover, .com-fileshelf-button:focus-visible) {
    filter: brightness(0.92);
  }

  :where(.com-fileshelf-button__icon, .com-fileshelf-lock__icon) {
    fill: currentcolor;
    flex: none;
  }

  :where(.com-fileshelf-input, .com-fileshelf-select) {
    background: transparent;
    border: 1px solid var(--fsh-border);
    border-radius: var(--fsh-radius);
    box-sizing: border-box;
    color: inherit;
    font: inherit;
    max-width: 100%;
    padding: 0.5em 0.75em;
    width: 100%;
  }

  :where(.com-fileshelf-label) {
    display: block;
    margin-bottom: 0.25rem;
  }

  :where(.com-fileshelf-field) {
    margin-bottom: 1rem;
  }

  :where(.com-fileshelf-table) {
    border-collapse: collapse;
    width: 100%;
  }

  :where(.com-fileshelf-table th, .com-fileshelf-table td) {
    border-bottom: 1px solid var(--fsh-border);
    padding: 0.6rem 0.5rem;
    text-align: start;
    vertical-align: middle;
  }

  :where(.com-fileshelf-table th a, .com-fileshelf-tree__link, .com-fileshelf-pill) {
    text-decoration: none;
  }

  /* Lists and entries */
  :where(.com-fileshelf-list__entry) {
    border-bottom: 1px solid var(--fsh-border);
    padding: var(--fsh-gap) 0;
  }

  :where(.com-fileshelf-item__title) {
    font-size: 1.15rem;
    margin: 0 0 0.25rem;
    overflow-wrap: anywhere;
  }

  :where(.com-fileshelf-item__details) {
    color: var(--fsh-muted);
    margin: 0;
  }

  :where(.com-fileshelf-item__tags) {
    margin-top: 0.25rem;
  }

  :where(.com-fileshelf-lock) {
    margin: 0;
  }

  /* 1.11.0 (mockup A): the card has no padding of its own - the image runs to its edges, body
     and button bring theirs. */
  :where(.com-fileshelf-cards__card) {
    border: 1px solid var(--fsh-border);
    border-radius: var(--fsh-radius);
    box-shadow: 0 0.375rem 1.125rem rgb(20 30 50 / 6%);
    overflow: hidden;
    padding: 0;
  }

  /* Categories */
  :where(.com-fileshelf-categories__list li) {
    margin: 0.25rem 0;
  }

  :where(.com-fileshelf-category__count, .com-fileshelf-categories__count, .com-fileshelf-tree__count, .com-fileshelf-pill__count) {
    color: var(--fsh-muted);
  }

  :where(.com-fileshelf-category__count) {
    margin: 0.5rem 0;
  }

  :where(.com-fileshelf-tree__title) {
    font-size: 0.85rem;
    letter-spacing: 0.04em;
    margin: 0 0 0.5rem;
    text-transform: uppercase;
  }

  :where(.com-fileshelf-tree__link) {
    border-radius: var(--fsh-radius);
    display: block;
    padding: 0.4rem 0.5rem;
  }

  :where(.com-fileshelf-tree__link[aria-current="page"]) {
    background: var(--fsh-tint);
    box-shadow: inset 3px 0 0 var(--fsh-accent);
    font-weight: 600;
  }

  :where(.com-fileshelf-filter, .com-fileshelf-switch) {
    border: 1px solid var(--fsh-border);
    border-radius: var(--fsh-radius);
    margin: 1rem 0;
    padding: 0.75rem;
  }

  /* "cards": the way up, the categories of the level and the subcategories above the cards. */
  :where(.com-fileshelf-band) {
    border-bottom: 1px solid var(--fsh-border);
    margin-bottom: 1rem;
    padding-bottom: 1rem;
  }

  :where(.com-fileshelf-band__up) {
    margin: 0 0 0.5rem;
  }

  :where(.com-fileshelf-band__subtitle) {
    font-size: 1rem;
    margin: 1rem 0 0.5rem;
  }

  :where(.com-fileshelf-pill) {
    border: 1px solid currentcolor;
    border-radius: 999px;
    display: inline-block;
    min-height: 2.75rem;
    padding: 0.6rem 1rem;
  }

  :where(.com-fileshelf-pill--current) {
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 0.2em;
  }

  :where(.com-fileshelf-subline) {
    margin: 0.5rem 0;
  }

  /* The download page */
  :where(.com-fileshelf-download__meta) {
    color: var(--fsh-muted);
    margin: 0 0 1.5rem;
  }

  :where(.com-fileshelf-file) {
    border: 1px solid var(--fsh-border);
    border-radius: var(--fsh-radius);
    padding: 1.25rem;
  }

  :where(.com-fileshelf-file__size, .com-fileshelf-file__facts dt) {
    color: var(--fsh-muted);
  }

  :where(.com-fileshelf-file__size) {
    font-size: 0.925em;
  }

  :where(.com-fileshelf-file__checksum code) {
    font-size: 0.8em;
    overflow-wrap: anywhere;
  }

  :where(.com-fileshelf-file__checksum summary) {
    cursor: pointer;
  }
}

/*
 * The choices of the tab "Appearance" - outside the layer on purpose, they win over the template
 * because the site owner asked for them. Bound to modifier classes that Appearance::html() sets.
 */
.com-fileshelf.com-fileshelf--accent .com-fileshelf-button--primary {
  background-color: var(--fsh-accent);
  border-color: var(--fsh-accent);
  color: var(--fsh-on-accent);
}

.com-fileshelf.com-fileshelf--accent .com-fileshelf-button--primary:hover,
.com-fileshelf.com-fileshelf--accent .com-fileshelf-button--primary:focus-visible {
  background-color: var(--fsh-accent);
  color: var(--fsh-on-accent);
  filter: brightness(0.9);
}

.com-fileshelf.com-fileshelf--accent-links a:not(.com-fileshelf-button) {
  color: var(--fsh-accent);
}

.com-fileshelf.com-fileshelf--accent .com-fileshelf-pill--current {
  border-color: var(--fsh-accent);
}

.com-fileshelf.com-fileshelf--square {
  --fsh-radius: 0;
}

.com-fileshelf.com-fileshelf--rounded {
  --fsh-radius: 0.5rem;
}

.com-fileshelf.com-fileshelf--square :is(.com-fileshelf-button, .com-fileshelf-input, .com-fileshelf-select, .com-fileshelf-card, .com-fileshelf-cards__card, .com-fileshelf-file, .com-fileshelf-filter, .com-fileshelf-switch, .com-fileshelf-tree__link),
.com-fileshelf.com-fileshelf--rounded :is(.com-fileshelf-button, .com-fileshelf-input, .com-fileshelf-select, .com-fileshelf-card, .com-fileshelf-cards__card, .com-fileshelf-file, .com-fileshelf-filter, .com-fileshelf-switch, .com-fileshelf-tree__link) {
  border-radius: var(--fsh-radius);
}

/* 1.8.0 (fileshelf#72): the look of the overview, the type labels and the subcategories. */
@layer fileshelf {
  :where(.com-fileshelf-categories--tiles .com-fileshelf-categories__entry) {
    border: 1px solid var(--fsh-border);
    border-radius: var(--fsh-radius);
  }

  :where(.com-fileshelf-categories--tiles .com-fileshelf-categories__visual) {
    background: var(--fsh-tint);
    color: var(--fsh-accent);
  }

  :where(.com-fileshelf-categories--tiles .com-fileshelf-categories__body) {
    padding: 0.85rem 1rem 1rem;
  }

  :where(.com-fileshelf-categories--list .com-fileshelf-categories__entry) {
    border-top: 1px solid var(--fsh-border);
    padding: var(--fsh-gap) 0;
  }

  :where(.com-fileshelf-categories--list .com-fileshelf-categories__visual) {
    background: var(--fsh-tint);
    border-radius: var(--fsh-radius);
    color: var(--fsh-accent);
  }

  :where(.com-fileshelf-categories__title) {
    font-size: 1.2rem;
    margin: 0;
  }

  :where(.com-fileshelf-categories__text, .com-fileshelf-categories__count) {
    margin: 0;
  }

  :where(.com-fileshelf-categories__text) {
    color: var(--fsh-muted);
  }

  :where(.com-fileshelf-categories__count) {
    font-size: 0.875rem;
  }


  /* Type labels: dark enough for white text (WCAG AA); the text carries the type. */
  :where(.com-fileshelf-type) {
    background: #4f5761;
    border-radius: 3px;
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1;
    padding: 0.2rem 0.4rem;
    white-space: nowrap;
  }

  :where(.com-fileshelf-item__type) {
    border-radius: var(--fsh-radius);
    padding: 0 0 0.35rem;
  }

  :where(.com-fileshelf-type--pdf) { background: #a3281f; }
  :where(.com-fileshelf-type--archive) { background: #5b4a9e; }
  :where(.com-fileshelf-type--document) { background: #1f5aa6; }
  :where(.com-fileshelf-type--sheet) { background: #2c6e49; }
  :where(.com-fileshelf-type--slides) { background: #a34a12; }
  :where(.com-fileshelf-type--image) { background: #7a3e8f; }
  :where(.com-fileshelf-type--audio, .com-fileshelf-type--video) { background: #255f73; }
}

/* ===== 1.9.0 (fileshelf#83): sections of a page, mockup S1 ===== */

/* "Subcategories" and "Downloads" (h2), small and in capitals, a line below: they part the page
   without competing with the h1. Inside the layer, so a template's own h2 rules still win where
   they set something else. */
@layer fileshelf {
  :where(.com-fileshelf-section) {
    border-bottom: 1px solid var(--fsh-border);
    color: var(--fsh-muted);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.07em;
    line-height: 1.4;
    margin: 1.25rem 0 0.75rem;
    padding-bottom: 0.3rem;
    text-transform: uppercase;
  }
}

/* ===== 1.11.0 (fileshelf#98, #100, #102, #105): symbol, facts, cards with image, lock button ===== */

.com-fileshelf-media {
  align-items: center;
  box-sizing: border-box;
  display: flex;
  flex: 0 0 auto;
  justify-content: center;
  overflow: hidden;
}

/* Lists, tables and the download page: a square of 4rem; the tile of a file type keeps its own
   size inside. */
.com-fileshelf-media--image,
.com-fileshelf-media--icon {
  height: 4rem;
  width: 4rem;
}

.com-fileshelf-media__image {
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.com-fileshelf-media__glyph {
  font-size: 1.75rem;
  line-height: 1;
}

.com-fileshelf-media__svg {
  height: 2.25rem;
  width: 2.25rem;
}

.com-fileshelf-item__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.com-fileshelf-item__facts > li {
  margin: 0;
}

.com-fileshelf-item__description {
  margin: 0.25rem 0 0.5rem;
}

.com-fileshelf-item__category {
  margin: 0 0 0.25rem;
}

.com-fileshelf-item__checksum {
  margin-top: 0.5rem;
}

/* The lock in a list: reason above its button. */
.com-fileshelf-item__action .com-fileshelf-lock,
.com-fileshelf-file__action .com-fileshelf-lock,
.com-fileshelf-table__action .com-fileshelf-lock {
  align-items: flex-start;
  flex-direction: column;
}

.com-fileshelf-lock__reason {
  align-items: flex-start;
  display: flex;
  gap: 0.4rem;
}

.com-fileshelf-lock__button {
  white-space: nowrap;
}

/* Cards: image or symbol across the top, body, the button at the foot over the full width. */
.com-fileshelf-cards__card .com-fileshelf-item {
  align-items: stretch;
  flex-wrap: nowrap;
  gap: 0;
  height: 100%;
}

.com-fileshelf-cards__card .com-fileshelf-item__media {
  aspect-ratio: 2 / 1;
  height: auto;
  width: 100%;
}

.com-fileshelf-cards__card .com-fileshelf-item__type {
  font-size: 0.95rem;
  height: 5.25rem;
  width: 4.5rem;
}

.com-fileshelf-cards__card .com-fileshelf-media__glyph {
  font-size: 3.5rem;
}

.com-fileshelf-cards__card .com-fileshelf-media__svg {
  height: 4.5rem;
  width: 4.5rem;
}

.com-fileshelf-cards__card .com-fileshelf-item__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 0.5rem;
  padding: var(--fsh-gap, 1rem) var(--fsh-gap, 1rem) 0;
}

.com-fileshelf-cards__card .com-fileshelf-item__title,
.com-fileshelf-cards__card .com-fileshelf-item__description,
.com-fileshelf-cards__card .com-fileshelf-item__category,
.com-fileshelf-cards__card .com-fileshelf-item__tags,
.com-fileshelf-cards__card .com-fileshelf-item__checksum {
  margin: 0;
}

.com-fileshelf-cards__card .com-fileshelf-item__action {
  align-self: stretch;
  padding: var(--fsh-gap, 1rem);
}

.com-fileshelf-cards__card .com-fileshelf-lock {
  align-items: stretch;
}

.com-fileshelf-cards__card .com-fileshelf-item__button,
.com-fileshelf-cards__card .com-fileshelf-lock__button {
  box-sizing: border-box;
  justify-content: center;
  min-height: 2.75rem;
  width: 100%;
}

/* Cards per row (fileshelf#98, #110): as set for wide areas; narrower areas show fewer, each card
   keeps about 16rem. */
.com-fileshelf-cards--cols-1 { grid-template-columns: minmax(0, 1fr); }

@container fileshelf (max-width: 35.99rem) {
  .com-fileshelf-cards[class*="com-fileshelf-cards--cols-"] { grid-template-columns: minmax(0, 1fr); }
}

@container fileshelf (min-width: 36rem) {
  .com-fileshelf-cards--cols-2,
  .com-fileshelf-cards--cols-3,
  .com-fileshelf-cards--cols-4,
  .com-fileshelf-cards--cols-5,
  .com-fileshelf-cards--cols-6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@container fileshelf (min-width: 52rem) {
  .com-fileshelf-cards--cols-3,
  .com-fileshelf-cards--cols-4,
  .com-fileshelf-cards--cols-5,
  .com-fileshelf-cards--cols-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@container fileshelf (min-width: 68rem) {
  .com-fileshelf-cards--cols-4,
  .com-fileshelf-cards--cols-5,
  .com-fileshelf-cards--cols-6 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@container fileshelf (min-width: 84rem) {
  .com-fileshelf-cards--cols-5,
  .com-fileshelf-cards--cols-6 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

@container fileshelf (min-width: 100rem) {
  .com-fileshelf-cards--cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

/* Sidebar and module positions: the list stays compact. */
@container fileshelf (max-width: 26rem) {
  .com-fileshelf-list .com-fileshelf-item__media.com-fileshelf-media--image,
  .com-fileshelf-list .com-fileshelf-item__media.com-fileshelf-media--icon {
    height: 2.25rem;
    width: 2.25rem;
  }

  .com-fileshelf-list .com-fileshelf-media__glyph {
    font-size: 1.1rem;
  }

  .com-fileshelf-list .com-fileshelf-media__svg {
    height: 1.4rem;
    width: 1.4rem;
  }

  .com-fileshelf-list .com-fileshelf-item__description,
  .com-fileshelf-list .com-fileshelf-item__checksum,
  .com-fileshelf-list .com-fileshelf-item__category {
    display: none;
  }
}

@layer fileshelf {
  :where(.com-fileshelf-media) {
    border-radius: var(--fsh-radius);
  }

  :where(.com-fileshelf-media--image, .com-fileshelf-media--icon) {
    background: var(--fsh-tint);
    color: var(--fsh-accent);
  }

  :where(.com-fileshelf-cards__card .com-fileshelf-item__media) {
    background: var(--fsh-tint);
    border-radius: 0;
  }

  /* UIkit icons are drawn in black; here they take the colour of the text around them. */
  :where(.com-fileshelf-media__svg) {
    fill: currentcolor;
  }

  :where(.com-fileshelf-media__svg [stroke*="#"]) {
    stroke: currentcolor;
  }

  :where(.com-fileshelf-media__svg [fill*="#"]) {
    fill: currentcolor;
  }

  :where(.com-fileshelf-item__category) {
    color: var(--fsh-muted);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  :where(.com-fileshelf-item__description) {
    line-height: 1.55;
  }

  :where(.com-fileshelf-item__fact) {
    background: var(--fsh-tint);
    border-radius: 0.375rem;
    color: var(--fsh-muted);
    font-size: 0.8125rem;
    line-height: 1.4;
    padding: 0.15rem 0.5rem;
  }

  :where(.com-fileshelf-item__fact:has(> .com-fileshelf-type)) {
    background: none;
    padding: 0;
  }

  :where(.com-fileshelf-item__fact > .com-fileshelf-type) {
    border-radius: 0.375rem;
    display: inline-block;
    font-size: 0.75rem;
    padding: 0.3rem 0.5rem;
  }

  :where(.com-fileshelf-item__tags li) {
    border: 1px solid var(--fsh-border);
    border-radius: 999px;
    font-size: 0.8125rem;
    padding: 0.05rem 0.55rem;
  }

  :where(.com-fileshelf-item__checksum) {
    color: var(--fsh-muted);
    font-size: 0.8125rem;
  }

  :where(.com-fileshelf-item__checksum summary) {
    cursor: pointer;
  }

  :where(.com-fileshelf-item__checksum code) {
    overflow-wrap: anywhere;
  }

  :where(.com-fileshelf-lock__reason) {
    color: var(--fsh-muted);
    font-size: 0.875rem;
    margin: 0 0 0.5rem;
  }

  :where(.com-fileshelf-lock__reason:last-child) {
    margin-bottom: 0;
  }

  :where(.com-fileshelf-lock__button) {
    border-width: 2px;
    font-weight: 600;
  }
}

/* The table of the YOOtheme element (mockup C): symbol, title and description in the first cell. */
.com-fileshelf-yoo__entry {
  align-items: center;
  display: flex;
  gap: 0.875rem;
}

.com-fileshelf-yoo__text {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.com-fileshelf-yoo__media.com-fileshelf-media--image,
.com-fileshelf-yoo__media.com-fileshelf-media--icon {
  height: 2.75rem;
  width: 2.75rem;
}

.com-fileshelf-yoo__media .com-fileshelf-item__type {
  align-items: center;
  height: 2.75rem;
  padding: 0;
  width: 2.75rem;
}

.com-fileshelf-yoo__media .com-fileshelf-media__svg {
  height: 1.5rem;
  width: 1.5rem;
}

@layer fileshelf {
  :where(.com-fileshelf-yoo__title) {
    font-weight: 600;
  }

  :where(.com-fileshelf-yoo__description) {
    color: var(--fsh-muted);
    font-size: 0.875rem;
    font-weight: 400;
  }
}

/* The buttons of a card carry their symbol; the lock sits beside its text in every framework. */
.com-fileshelf-cards__card .com-fileshelf-button__icon {
  display: inline-block;
}

/* Space between symbol and text by margin: a framework's button may stay inline-block. */
.com-fileshelf-lock__button .com-fileshelf-lock__icon,
.com-fileshelf-item__button .com-fileshelf-button__icon {
  margin-inline-end: 0.5em;
  vertical-align: -0.125em;
}

/* The row header of a table is the download's title, not a column label: UIkit sets "th" small and
   in capitals (.uk-table th), so the title cell gets its text back. */
.com-fileshelf-table-wrap th[scope="row"],
.com-fileshelf-yoo__table th[scope="row"] {
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: normal;
  text-transform: none;
  vertical-align: middle;
}

/* A list keeps one column for the symbol, so titles stand in line whatever the symbol is. */
.com-fileshelf-list .com-fileshelf-item__media {
  width: 4rem;
}

@container fileshelf (max-width: 26rem) {
  .com-fileshelf-list .com-fileshelf-item__media {
    width: 2.25rem;
  }
}

/* ===== 1.12.0 ===== */

/* The checksum (fileshelf#109, #112): label, value, copy button in one line that may wrap. */
.com-fileshelf-checksum {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.5rem;
}

.com-fileshelf-checksum__value {
  min-width: 0;
  overflow-wrap: anywhere;
}

@layer fileshelf {
  :where(.com-fileshelf-checksum) {
    color: var(--fsh-muted);
    font-size: 0.8125rem;
  }

  :where(.com-fileshelf-checksum__label) {
    font-weight: 600;
  }

  :where(.com-fileshelf-checksum__copy) {
    background: none;
    border: 0;
    color: var(--fsh-accent);
    cursor: pointer;
    font: inherit;
    min-height: 1.5rem;
    padding: 0.25rem;
    text-decoration: underline;
  }

  :where(.com-fileshelf-checksum__status) {
    font-size: 0.75rem;
  }
}

/* The YOOtheme element as a UIkit grid (fileshelf#108): uk-grid places the cells, the card is
   the element inside a cell. Two classes, so the grid of Fileshelf gives way. */
.com-fileshelf-cards.com-fileshelf-cards--uk {
  display: flex;
  gap: 0;
}

.com-fileshelf-cards--uk > li {
  list-style: none;
}

.com-fileshelf-cards--uk.uk-grid-match > li > .com-fileshelf-cards__card {
  width: 100%;
}

/* Padding of the card: small and large next to the default. */
.com-fileshelf-cards__card.com-fileshelf-pad-small {
  --fsh-gap: 0.75rem;
}

.com-fileshelf-cards__card.com-fileshelf-pad-large {
  --fsh-gap: 2rem;
}

/* Image or symbol left or right of the text, with its width (fileshelf#108). */
.com-fileshelf-cards__card .com-fileshelf-item--media-left,
.com-fileshelf-cards__card .com-fileshelf-item--media-right {
  display: grid;
  grid-template-columns: max(var(--fsh-media-w, 33.333%), 5rem) minmax(0, 1fr);
  grid-template-rows: 1fr auto;
}

.com-fileshelf-cards__card .com-fileshelf-item--media-right {
  grid-template-columns: minmax(0, 1fr) max(var(--fsh-media-w, 33.333%), 5rem);
}

.com-fileshelf-cards__card .com-fileshelf-item--media-left > .com-fileshelf-item__media,
.com-fileshelf-cards__card .com-fileshelf-item--media-right > .com-fileshelf-item__media {
  aspect-ratio: auto;
  grid-row: 1 / span 2;
  height: 100%;
  min-height: 8rem;
}

.com-fileshelf-cards__card .com-fileshelf-item--media-right > .com-fileshelf-item__media {
  grid-column: 2;
}

.com-fileshelf-cards__card .com-fileshelf-item--media-right > .com-fileshelf-item__body,
.com-fileshelf-cards__card .com-fileshelf-item--media-right > .com-fileshelf-item__action {
  grid-column: 1;
}

.com-fileshelf-item--media-w-1-4 { --fsh-media-w: 25%; }
.com-fileshelf-item--media-w-1-3 { --fsh-media-w: 33.333%; }
.com-fileshelf-item--media-w-2-5 { --fsh-media-w: 40%; }
.com-fileshelf-item--media-w-1-2 { --fsh-media-w: 50%; }

@layer fileshelf {
  :where(.com-fileshelf-cards__card--plain) {
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
}

/* Beside the text the symbol keeps the size of a list (fileshelf#108). */
.com-fileshelf-cards__card .com-fileshelf-item--media-left .com-fileshelf-item__type,
.com-fileshelf-cards__card .com-fileshelf-item--media-right .com-fileshelf-item__type {
  font-size: 0.7rem;
  height: 3.25rem;
  width: 2.75rem;
}

.com-fileshelf-cards__card .com-fileshelf-item--media-left .com-fileshelf-media__glyph,
.com-fileshelf-cards__card .com-fileshelf-item--media-right .com-fileshelf-media__glyph {
  font-size: 2rem;
}

.com-fileshelf-cards__card .com-fileshelf-item--media-left .com-fileshelf-media__svg,
.com-fileshelf-cards__card .com-fileshelf-item--media-right .com-fileshelf-media__svg {
  height: 2.5rem;
  width: 2.5rem;
}

/* In a narrow card the text of the lock button wraps instead of leaving the card. */
.com-fileshelf-cards__card .com-fileshelf-lock__button {
  white-space: normal;
}

/* Buttons of a card stay inside it, whatever the framework's button does (fileshelf#108). */
.com-fileshelf-cards__card .com-fileshelf-item__button,
.com-fileshelf-cards__card .com-fileshelf-lock__button {
  align-items: center;
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  line-height: 1.3;
  padding-inline: 0.75rem;
  white-space: normal;
}

/* On dark cards (UIkit primary, secondary) a symbol takes the colour of the text. */
.uk-card-primary .com-fileshelf-media,
.uk-card-secondary .com-fileshelf-media {
  background: rgb(255 255 255 / 8%);
  color: inherit;
}