/* Look of the index pages of download.lammps.org, written by mkindex.py.
 * Colors and the dark bar follow the LAMMPS website, dashboard.lammps.org and ci.lammps.org.
 */
:root {
  --lammps-blue: #1f6db5;
  --lammps-gold: #f4b41a;
  --lammps-dark: #212529;
  --bar-height: 59px;

  --bg: #fff;
  --fg: #212529;
  --muted: #6c757d;
  --border: #dee2e6;
  --panel: #f8f9fa;
  --link: #1f6db5;
  --link-hover: #17527f;
  --hover: #eef3f9;
  --current: rgba(31, 109, 181, .12);
  --ic-folder: #d99a0b;
  --ic-blue: #1f6db5;
  --ic-red: #b22222;
  --ic-green: #2e7d32;
  --ic-grey: #6c757d;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #1a1d20; --fg: #dee2e6; --muted: #9aa3ab; --border: #343a40; --panel: #212529;
    --link: #7fb2e5; --link-hover: #a9cbee; --hover: #262b30; --current: rgba(127, 178, 229, .16);
    --ic-folder: #f4b41a; --ic-blue: #7fb2e5; --ic-red: #e58a8a; --ic-green: #7cc68a; --ic-grey: #9aa3ab;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #1a1d20; --fg: #dee2e6; --muted: #9aa3ab; --border: #343a40; --panel: #212529;
  --link: #7fb2e5; --link-hover: #a9cbee; --hover: #262b30; --current: rgba(127, 178, 229, .16);
  --ic-folder: #f4b41a; --ic-blue: #7fb2e5; --ic-red: #e58a8a; --ic-green: #7cc68a; --ic-grey: #9aa3ab;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; padding-top: var(--bar-height); background: var(--bg); color: var(--fg);
  font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans",
        "Liberation Sans", Arial, sans-serif;
}
a { color: var(--link); text-decoration: none; }
a:hover { color: var(--link-hover); text-decoration: underline; }

/* ---- the dark bar of the LAMMPS websites ----------------------------------- */
#lammps-bar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 10;
  height: var(--bar-height); padding: 0 24px;
  display: flex; align-items: center; gap: 16px;
  background: var(--lammps-dark); border-bottom: 3px solid var(--lammps-gold);
  font-size: 16px; white-space: nowrap;
}
#lammps-bar img { display: block; height: 32px; width: auto; }
#lammps-bar .title { color: #fff; }
#lammps-bar nav { display: flex; gap: 32px; margin-left: auto; }
#lammps-bar a.link { color: rgba(255, 255, 255, .55); padding: 8px 0; text-decoration: none; }
#lammps-bar a.link:hover { color: rgba(255, 255, 255, .75); }
#theme {
  width: 32px; height: 32px; padding: 0; border: 1px solid rgba(255, 255, 255, .25); border-radius: 6px;
  background: transparent; color: rgba(255, 255, 255, .75); font-size: 16px; line-height: 1; cursor: pointer;
}
#theme::before { content: "\263E"; }
:root[data-theme="dark"] #theme::before { content: "\2600"; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) #theme::before { content: "\2600"; }
}
#theme:hover { color: #fff; border-color: rgba(255, 255, 255, .5); }

/* ---- folder tree on the left, listing on the right ------------------------- */
.layout {
  display: grid; grid-template-columns: minmax(200px, 270px) minmax(0, 1fr); gap: 32px;
  max-width: 1440px; margin: 0 auto; padding: 24px;
}
.folders { align-self: start; position: sticky; top: calc(var(--bar-height) + 24px);
  max-height: calc(100vh - var(--bar-height) - 48px); overflow: auto;
  background: var(--panel); border: 1px solid var(--border); border-radius: 8px; padding: 10px 8px; }
.folders > summary { display: none; }
.tree, .tree ul { list-style: none; margin: 0; padding: 0; }
.tree ul { margin-left: 15px; padding-left: 6px; border-left: 1px solid var(--border); }
.tree a {
  display: flex; align-items: center; gap: 7px; padding: 3px 8px 3px 22px; border-radius: 5px;
  color: var(--fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tree a:hover { background: var(--hover); text-decoration: none; color: var(--fg); }
.tree a.current { background: var(--current); box-shadow: inset 3px 0 0 var(--lammps-gold); font-weight: 600; }
.tree summary { list-style: none; position: relative; cursor: pointer; }
.tree summary::-webkit-details-marker { display: none; }
.tree summary::before {
  content: ""; position: absolute; left: 7px; top: 50%; width: 6px; height: 6px; margin-top: -4px;
  border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted); transform: rotate(-45deg);
  transition: transform .12s;
}
.tree details[open] > summary::before { transform: rotate(45deg); margin-top: -5px; }

main { min-width: 0; }
.crumbs { color: var(--muted); font-size: 14px; }
.crumbs .sep { margin: 0 4px; }
h1 { font-size: 1.6rem; font-weight: 600; margin: 4px 0 8px; }
main > p { max-width: 75ch; margin: 0 0 16px; }

.tools { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; }
.tools[hidden] { display: none; }
#filter {
  width: min(320px, 100%); padding: 6px 10px; font: inherit; color: var(--fg); background: var(--bg);
  border: 1px solid var(--border); border-radius: 6px;
}
#filter:focus { outline: 2px solid var(--link); outline-offset: -1px; }
#shown { color: var(--muted); font-size: 14px; }

/* ---- the listing ----------------------------------------------------------- */
.listing { width: 100%; border-collapse: collapse; table-layout: fixed; }
.listing th, .listing td { padding: 6px 10px; text-align: left; vertical-align: top; }
.listing thead th { border-bottom: 2px solid var(--border); font-weight: 600; font-size: 14px; color: var(--muted); }
.listing tbody tr { border-bottom: 1px solid var(--border); }
.listing tbody tr:hover { background: var(--hover); }
.listing th button {
  padding: 0; border: 0; background: none; font: inherit; color: inherit; cursor: pointer;
}
.listing th button:hover { color: var(--fg); }
.listing th[aria-sort="ascending"] button::after { content: " \25B4"; }
.listing th[aria-sort="descending"] button::after { content: " \25BE"; }
.listing .name { width: auto; overflow-wrap: anywhere; }
.listing .size { width: 7.5em; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.listing .date { width: 10.5em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.listing .type { width: 13em; color: var(--muted); font-size: 14px; }
.listing .name a { display: inline-flex; align-items: flex-start; gap: 8px; }
.listing .name a .ic { margin-top: 3px; }
.listing .link { display: block; margin-left: 24px; color: var(--muted); font-size: 13px; }
.listing .desc { display: block; margin-left: 24px; color: var(--muted); font-size: 14px; max-width: 75ch; }
.listing .meta { display: none; }
.listing tr.folder .name > a { font-weight: 600; }
.empty { color: var(--muted); }

details.group { margin: 0 0 8px; }
details.group > summary {
  cursor: pointer; padding: 8px 10px; border-radius: 6px; background: var(--panel);
  border: 1px solid var(--border); font-weight: 600;
}
details.group > summary .count { font-weight: 400; color: var(--muted); font-size: 14px; margin-left: 8px; }
details.group[open] > summary { margin-bottom: 4px; }
details.group[hidden] { display: none; }

/* ---- icons: masks, drawn in the color of the type --------------------------- */
.ic {
  flex: none; display: inline-block; width: 16px; height: 16px; background-color: currentColor;
  -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat;
}
.ic-folder, .ic-folder-open { color: var(--ic-folder); }
.ic-home, .ic-archive, .ic-installer, .ic-package { color: var(--ic-blue); }
.ic-pdf { color: var(--ic-red); }
.ic-check { color: var(--ic-green); }
.ic-file, .ic-disk { color: var(--ic-grey); }
.ic-home { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.3' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M2 7.5 8 2.5l6 5M3.5 6.5v7h3.5v-4h2v4h3.5v-7'/%3E%3C/svg%3E"); }
.ic-folder { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.3' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M1.5 3.5h4.2l1.5 1.6h7.3v8.4h-13z'/%3E%3C/svg%3E"); }
.ic-folder-open { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.3' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M1.5 13.5v-10h4.2l1.5 1.6h5.8v2M1.5 13.5l2.2-6.4h11l-2.2 6.4z'/%3E%3C/svg%3E"); }
.ic-file { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.3' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M3.5 1.5h6l3 3v10h-9zM9.5 1.5v3h3'/%3E%3C/svg%3E"); }
.ic-pdf { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.3' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M3.5 1.5h6l3 3v10h-9zM9.5 1.5v3h3M5.5 8.5h5M5.5 10.5h5M5.5 12.5h3'/%3E%3C/svg%3E"); }
.ic-archive { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.3' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M2.5 5.5h11v8h-11zM1.5 2.5h13v3h-13zM6.5 8h3'/%3E%3C/svg%3E"); }
.ic-installer { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.3' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M8 1.5v8M5 6.5l3 3 3-3M2.5 10.5v3h11v-3'/%3E%3C/svg%3E"); }
.ic-disk { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.3' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M2.5 9.5h11v4h-11zM2.5 9.5l2-6.5h7l2 6.5M10.5 11.5h1'/%3E%3C/svg%3E"); }
.ic-package { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.3' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M8 1.5l6 3v7l-6 3-6-3v-7zM2 4.5l6 3 6-3M8 7.5v7'/%3E%3C/svg%3E"); }
.ic-check { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.3' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M3.5 1.5h6l3 3v10h-9zM9.5 1.5v3h3M5.5 10l2 2 3.5-4'/%3E%3C/svg%3E"); }

/* ---- small screens: tree folded above the list, fewer columns ------------- */
@media (max-width: 1000px) {
  #lammps-bar nav { gap: 20px; }
  .listing .type { display: none; }
}
@media (max-width: 800px) {
  #lammps-bar { padding: 0 16px; gap: 12px; }
  #lammps-bar img { height: 24px; }
  #lammps-bar .title { display: none; }
  #lammps-bar nav { gap: 14px; font-size: 14px; overflow-x: auto; }
  .layout { grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 16px; }
  .folders { position: static; max-height: none; }
  .folders > summary { display: list-item; cursor: pointer; font-weight: 600; padding: 2px 4px; }
  .folders[open] > summary { margin-bottom: 6px; }
}
@media (max-width: 600px) {
  #lammps-bar nav a:nth-child(n+3) { display: none; }
  .listing .date, .listing .size { display: none; }
  .listing .meta { display: block; margin-left: 24px; color: var(--muted); font-size: 13px; }
}
.listing[hidden] { display: none; }