/* Sequel Mirror — directory listing (/ubuntu/, /tools/, …). Dipanggil dari /listing/index.xslt.
   Berdiri sendiri (tanpa site.css) agar halaman listing ringan; token warna sama dengan situs. */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/assets/fonts/inter-latin-wght-normal.woff2") format("woff2"); }
:root {
  --bg: #fff; --fg: #0a0a0a; --card: #fff; --muted: #f5f5f5; --muted-fg: #595959; --border: #e5e5e5;
  --primary: #1a90dd; --link: #0d6aa8; --row: #f7fbfe; --radius: .625rem; color-scheme: light;
}
.dark { --bg: #0a0a0a; --fg: #fafafa; --card: #121212; --muted: #1f1f1f; --muted-fg: #adadad; --border: #282828; --link: #5cb5ef; --row: #141c22; color-scheme: dark; }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; background: var(--bg); color: var(--fg); font: 400 .9375rem/1.6 "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: .25rem; }
.ls-wrap { width: 100%; max-width: 75rem; margin: 0 auto; padding: 0 1rem; }
@media (min-width: 640px) { .ls-wrap { padding: 0 1.5rem; } }

.ls-header { border-bottom: 1px solid var(--border); background: var(--bg); }
.ls-bar { height: 4rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.ls-logo { display: inline-flex; align-items: center; gap: .625rem; color: var(--fg); font-weight: 600; }
.ls-logo:hover { text-decoration: none; }
.ls-logo img { display: block; height: 2.5rem; width: auto; }
.ls-nav { display: flex; gap: .25rem; }
.ls-nav a { padding: .5rem .75rem; border-radius: .5rem; color: var(--fg); font-size: .875rem; font-weight: 500; }
.ls-nav a:hover { background: var(--muted); text-decoration: none; }

.ls-main { flex: 1; padding-top: 1.5rem; padding-bottom: 3rem; }
.ls-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: .375rem; font-size: .8125rem; color: var(--muted-fg); }
.ls-crumbs a, .ls-crumbs span { overflow-wrap: anywhere; }
.ls-crumbs [aria-current] { color: var(--fg); font-weight: 600; }
.ls-sep { color: var(--muted-fg); }
h1 { margin: .75rem 0 .125rem; font-size: 1.375rem; line-height: 1.3; font-weight: 700; letter-spacing: -.01em; overflow-wrap: anywhere; }
.ls-path { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .92em; font-weight: 600; }
.ls-count { margin: 0 0 1rem; font-size: .8125rem; color: var(--muted-fg); }

.ls-panel { border: 1px solid var(--border); border-radius: var(--radius); background: var(--card); overflow: hidden; }
.ls-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.ls-table th { text-align: left; padding: .625rem 1rem; font-size: .75rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted-fg); background: var(--muted); border-bottom: 1px solid var(--border); }
.ls-table td { padding: .5rem 1rem; border-top: 1px solid var(--border); vertical-align: top; }
.ls-table tbody tr:first-child td { border-top: 0; }
.ls-table tbody tr:hover { background: var(--row); }
.ls-name { overflow-wrap: anywhere; }
.ls-name a { display: inline-flex; align-items: flex-start; gap: .5rem; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .8125rem; line-height: 1.6; }
.ls-date, .ls-size { white-space: nowrap; font-size: .8125rem; color: var(--muted-fg); font-variant-numeric: tabular-nums; }
th.ls-date, td.ls-date { width: 11.5rem; }
th.ls-size, td.ls-size { width: 7rem; text-align: right; }
.ls-empty { text-align: center; color: var(--muted-fg); padding: 2rem 1rem !important; }
.ls-parent a { font-family: inherit; font-weight: 500; }

/* ikon murni CSS (tanpa gambar/inline SVG) */
.ls-ico { flex: none; width: 1rem; height: .8rem; margin-top: .3rem; border-radius: .15rem; position: relative; }
.ls-ico-dir { background: var(--primary); }
.ls-ico-dir::before { content: ""; position: absolute; left: 0; top: -.2rem; width: .45rem; height: .25rem; border-radius: .12rem .12rem 0 0; background: var(--primary); }
.ls-ico-file { width: .75rem; height: .95rem; margin: .2rem .125rem 0; border: 1.5px solid var(--muted-fg); background: transparent; }
.ls-ico-up { height: 1rem; margin-top: .2rem; }
.ls-ico-up::before { content: "↑"; position: absolute; inset: 0; line-height: 1rem; text-align: center; font-size: .9rem; color: var(--muted-fg); }

.ls-footer { border-top: 1px solid var(--border); }
.ls-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 1.5rem; padding-top: 1.25rem; padding-bottom: 1.25rem; font-size: .8125rem; color: var(--muted-fg); }

/* ≤ 640px: tanggal & ukuran turun ke bawah nama, tanpa scroll horizontal */
@media (max-width: 640px) {
  .ls-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .ls-table, .ls-table tbody { display: block; }
  .ls-table tr { display: grid; grid-template-columns: 1fr auto; gap: .125rem .75rem; padding: .625rem .875rem; border-top: 1px solid var(--border); }
  .ls-table tbody tr:first-child { border-top: 0; }
  .ls-table td { padding: 0; border: 0; width: auto !important; }
  .ls-name { grid-column: 1 / -1; }
  .ls-date:empty, .ls-size:empty { display: none; }
  .ls-size { text-align: right; }
  .ls-empty { grid-column: 1 / -1; }
  h1 { font-size: 1.125rem; }
}

/* Kartu per rilis di akar repo + pengelompokan suite per rilis */
.ls-badge { display: inline-block; margin-left: .625rem; padding: .125rem .625rem; border-radius: 999px; background: color-mix(in srgb, var(--primary) 12%, transparent); color: var(--link); font: 600 .75rem/1.5 "Inter", ui-sans-serif, system-ui, sans-serif; vertical-align: middle; white-space: nowrap; }
.ls-rel { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: .75rem; margin-bottom: .75rem; }
.ls-card { border: 1px solid var(--border); border-radius: var(--radius); background: var(--card); overflow: hidden; }
.ls-card header { display: flex; flex-wrap: wrap; align-items: baseline; gap: .375rem .5rem; padding: .75rem 1rem; background: var(--muted); border-bottom: 1px solid var(--border); }
.ls-card header b { font-size: .9375rem; font-weight: 600; }
.ls-card header small { margin-left: auto; font-size: .75rem; color: var(--muted-fg); }
.ls-chip { display: inline-block; padding: 0 .4375rem; border: 1px solid var(--border); border-radius: .375rem; background: var(--card); color: var(--muted-fg); font: 400 .75rem/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.ls-card ul { margin: 0; padding: .375rem 0; list-style: none; }
.ls-card li { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .3125rem 1rem; }
.ls-card li:hover { background: var(--row); }
.ls-card li a { display: inline-flex; align-items: flex-start; gap: .5rem; font: 400 .8125rem/1.6 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; overflow-wrap: anywhere; }
.ls-card li small { font-size: .75rem; color: var(--muted-fg); white-space: nowrap; }
.ls-note { margin: 0 0 1.25rem; font-size: .8125rem; color: var(--muted-fg); }
.ls-h2 { margin: 0 0 .5rem; font-size: .75rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted-fg); }
.ls-table tr.ls-group th { padding: .5rem 1rem; text-align: left; font-size: .8125rem; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--fg); background: var(--muted); border-top: 1px solid var(--border); border-bottom: 0; }
.ls-table tr.ls-group th .ls-chip { margin-left: .5rem; }
.ls-table tr.ls-group:hover { background: none; }
@media (max-width: 640px) {
  .ls-table tr.ls-group { display: block; padding: 0; }
  .ls-table tr.ls-group th { display: block; padding: .5rem .875rem; }
  .ls-badge { display: table; margin: .375rem 0 0; }
}

/* dists/: blok per rilis yang bisa dilipat (tertutup secara bawaan) */
.ls-up { margin: 0 0 .625rem; }
.ls-up a { display: inline-flex; align-items: center; gap: .5rem; padding: .375rem .625rem; border: 1px solid var(--border); border-radius: .5rem; font-size: .8125rem; font-weight: 500; }
.ls-up a:hover { background: var(--muted); text-decoration: none; }
.ls-up .ls-ico-up { margin-top: 0; }
.ls-acc { border: 1px solid var(--border); border-radius: var(--radius); background: var(--card); overflow: hidden; }
.ls-acc + .ls-acc { margin-top: .625rem; }
.ls-acc > summary { display: flex; align-items: center; gap: .5rem; padding: .75rem 1rem; cursor: pointer; list-style: none; }
.ls-acc > summary::-webkit-details-marker { display: none; }
.ls-acc > summary:hover { background: var(--muted); }
.ls-acc > summary b { font-size: .9375rem; font-weight: 600; }
.ls-acc > summary small { margin-left: auto; font-size: .75rem; color: var(--muted-fg); }
.ls-acc > summary::after { content: ""; flex: none; width: .5rem; height: .5rem; margin: 0 .125rem .1875rem .5rem; border-right: 1.5px solid var(--muted-fg); border-bottom: 1.5px solid var(--muted-fg); transform: rotate(45deg); transition: transform .2s; }
.ls-acc[open] > summary::after { transform: rotate(-135deg); margin-bottom: -.125rem; }
.ls-acc[open] > summary { border-bottom: 1px solid var(--border); background: var(--muted); }
.ls-acc .ls-table tbody tr:first-child td { border-top: 0; }

.ls-rel + .ls-note { margin-bottom: 1rem; }
.ls-rel ~ .ls-up { margin-top: .25rem; }

/* Ikon file: bentuk dari SVG sebagai mask (warna mengikuti tema). Tanpa request tambahan; data: diizinkan CSP img-src. */
.ls-ico-file, .ls-ico-disc, .ls-ico-pkg, .ls-ico-key { width: 1rem; height: 1rem; margin: .2rem 0 0; border: 0; border-radius: 0; background: var(--muted-fg); -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; }
.ls-ico-file { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z'/%3E%3Cpath d='M14 2v4a2 2 0 0 0 2 2h4'/%3E%3C/svg%3E"); }
.ls-ico-disc { background: var(--primary); --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3Cpath d='M6 12c0-1.7.7-3.2 1.8-4.2'/%3E%3C/svg%3E"); }
.ls-ico-pkg { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z'/%3E%3Cpath d='m3.3 7 8.7 5 8.7-5'/%3E%3Cpath d='M12 22V12'/%3E%3C/svg%3E"); }
.ls-ico-key { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E"); }