/* =============================================================
   WLWYB WEB 3.0 — Site CSS
   Load after colors_and_type.css and data_system.css
   ============================================================= */

/* --- Reset -------------------------------------------------- */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

a { color: inherit; text-decoration: none; }
ul { list-style: none; }

/* --- Base --------------------------------------------------- */

html {
  height: 100%;
}

body {
  min-height: 100%;
  background: var(--color-void);
  color: var(--color-primary);
  font-family: var(--font-primary);
  font-size: var(--size-base);
  line-height: var(--leading-normal);
  display: flex;
  flex-direction: column;
}

/* --- Focus ring (yellow, always visible) -------------------- */

:focus-visible {
  outline: 2px solid var(--color-accent-yellow);
  outline-offset: 2px;
}

/* --- Partition ---------------------------------------------- */

.partition {
  flex: 1;
  display: flex;
  flex-direction: row;
  overflow: hidden;
  position: relative;
}

/* Left column: 3 bands stacked -- fixed 38% of the row, the rest goes to 001 */
.partition-left {
  flex: 0 0 38%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  order: 1;
}

/* Right: B2B dominant region -- fixed 62% of the row, the main attraction */
.partition-b2b {
  flex: 0 0 62%;
  min-width: 0;
  order: 2;
  border-left: 1px solid var(--color-border);
}

/* All regions */
.partition-region {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--space-7) var(--space-8);
  background: var(--color-void);
  color: var(--color-secondary);
  transition:
    background 400ms cubic-bezier(0.16, 1, 0.3, 1),
    color      400ms cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  cursor: pointer;
}

/* Brightness pop: 001 sits on a faint lit gradient at rest so it visually
   separates from the flat sidebar without needing hover. */
.partition-region.partition-b2b {
  background: radial-gradient(130% 110% at 68% 62%, var(--color-depth) 0%, var(--color-void) 62%);
}

/* Glimpse overlay: a flat layer that fades in/out over the rest gradient.
   Crossfading via opacity (not by animating "background" itself) because a
   gradient and a flat color can't interpolate, they'd otherwise snap
   instantly partway through instead of fading smoothly. */
.partition-b2b::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--color-depth);
  opacity: 0;
  pointer-events: none;
}

.partition-region:hover,
.partition-region:focus-visible {
  background: var(--color-depth);
  color: var(--color-bright);
}

/* Dim sibling regions slightly on hover */
.partition:has(.partition-region:hover) .partition-region:not(:hover),
.partition:has(.partition-region:focus-visible) .partition-region:not(:focus-visible) {
  color: var(--color-dim);
}

/* Left bands */
.partition-left .partition-region {
  flex: 1;
  border-bottom: 1px solid var(--color-border);
}

.partition-left .partition-region:last-child {
  border-bottom: none;
}

/* Stream number prefix (mono, always bright/bold -- not hover-dependent) */
.stream-num {
  font-family: var(--font-data);
  font-size: var(--size-xs);
  font-weight: var(--weight-bold);
  color: var(--color-bright);
  letter-spacing: var(--tracking-wider);
  margin-bottom: var(--space-2);
  display: block;
}

/* Left band labels: regular weight, brighten only on hover/focus (color: inherit) */
.stream-label {
  font-family: var(--font-data);
  font-size: var(--size-sm);
  font-weight: var(--weight-normal);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: inherit;
  line-height: var(--leading-tight);
}

/* B2B headline */
.partition-headline {
  font-family: var(--font-display);
  font-size: clamp(var(--size-2xl), 5vw, var(--size-3xl));
  font-weight: 800;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-bright);
  margin-bottom: var(--space-3);
}

/* B2B sub-label: matches .stream-label (size + hover) so the "001 · BUILTNOT"
   caption behaves exactly like the 002/003/004 labels on both screens.
   Only extra is margin-top, to clear the headline above it. */
.stream-sub {
  font-family: var(--font-data);
  font-size: var(--size-sm);
  font-weight: var(--weight-normal);
  color: inherit;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  line-height: var(--leading-tight);
  margin-top: var(--space-4);
}

/* The "001" folded into the sub-label (headline no longer carries its own
   number) -- inline, sized to match its line, but keeps .stream-num's
   always-bright/bold treatment. */
.stream-sub .stream-num {
  display: inline;
  font-size: inherit;
  margin-bottom: 0;
}

/* --- Entry animation --------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
  /* 001 leads: reveals first so the eye lands there before anything else
     moves. The sidebar cascades in only after 001 is essentially settled. */
  .partition-shop {
    animation: region-reveal 800ms cubic-bezier(0.16, 1, 0.3, 1) 700ms both;
  }
  .partition-experimenting {
    animation: region-reveal 800ms cubic-bezier(0.16, 1, 0.3, 1) 820ms both;
  }
  .partition-who {
    animation: region-reveal 800ms cubic-bezier(0.16, 1, 0.3, 1) 940ms both;
  }
  .partition-b2b .stream-num,
  .partition-b2b .partition-headline,
  .partition-b2b .stream-sub {
    animation: text-rise 900ms cubic-bezier(0.16, 1, 0.3, 1) 150ms both;
  }

  /* Held glimpse: once the cascade settles, 001 slowly breathes into its
     own hover look (brighter panel + "ENTER" arrow) and slowly releases --
     long, gradual fade in each direction so it reads as a deliberate beat,
     not a flicker. */
  .partition-b2b {
    animation:
      region-reveal 900ms cubic-bezier(0.16, 1, 0.3, 1) 0ms both,
      b2b-glimpse-color 3200ms ease-in-out 1800ms 1;
  }
  .partition-b2b::before {
    animation: b2b-glimpse-glow 3200ms ease-in-out 1800ms 1;
  }
  .partition-b2b .b2b-enter {
    animation: b2b-glimpse-arrow 3200ms ease-in-out 1800ms 1;
  }
}

@keyframes region-reveal {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes text-rise {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

@keyframes b2b-glimpse-color {
  0%, 100% { color: var(--color-secondary); }
  30%, 60% { color: var(--color-bright); }
}

@keyframes b2b-glimpse-glow {
  0%, 100% { opacity: 0; }
  30%, 60% { opacity: 1; }
}

@keyframes b2b-glimpse-arrow {
  0%       { opacity: 0; transform: translateX(-4px); }
  30%, 60% { opacity: 1; transform: none; }
  100%     { opacity: 0; transform: translateX(-4px); }
}

/* --- Site navbar ------------------------------------------- */

.site-nav {
  flex-shrink: 0;
  height: 36px;
  background: var(--color-depth);
  border-top: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  padding: 0 var(--space-5);
  /* Fixed to the viewport bottom so it stays visible over open files
     (dossier z-index 400) -- but below the consent banner / modals (500-600). */
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 450;
}

/* Fold pages (landing / b2b / 003): reserve the fixed navbar's height so
   bottom-aligned content (e.g. the b2b Q&A) never hides behind the navbar. */
.fold { padding-bottom: 36px; }

.site-nav__list {
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  gap: 0;
}

.site-nav__link {
  font-family: var(--font-data);
  font-size: var(--size-2xs);
  font-weight: var(--weight-medium);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--color-dim);
  padding: 0 var(--space-3);
  height: 100%;
  display: flex;
  align-items: center;
  white-space: nowrap;
  transition: color 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

.site-nav__link:hover,
.site-nav__link[aria-current="page"] {
  color: var(--color-bright);
}

.site-nav__sep {
  font-family: var(--font-data);
  font-size: var(--size-2xs);
  color: var(--color-muted);
  user-select: none;
}

.site-nav__contact {
  margin-left: auto;
}

/* --- Navbar home mark (poker chip + WLWYB) ----------------- */

.site-nav__home-item {
  display: flex;
  align-items: center;
  height: 100%;
  margin-right: var(--space-3);
  padding-right: var(--space-3);
  border-right: 1px solid var(--color-border);
}

.site-nav__home {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  height: 100%;
}

.site-nav__home-mark {
  width: 22px;
  height: 22px;
  display: block;
  filter: grayscale(1) opacity(0.5);
  transition: filter 220ms cubic-bezier(0.4, 0, 0.2, 1);
}

.site-nav__home-text {
  font-family: var(--font-data);
  font-size: var(--size-2xs);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--color-dim);
  white-space: nowrap;
  transition: color 220ms cubic-bezier(0.4, 0, 0.2, 1);
}

.site-nav__home:hover .site-nav__home-mark,
.site-nav__home:focus-visible .site-nav__home-mark {
  filter: none;
}

.site-nav__home:hover .site-nav__home-text,
.site-nav__home:focus-visible .site-nav__home-text {
  color: var(--color-white);
}

.site-nav__link--contact {
  border-left: 1px solid var(--color-border);
}

/* --- Trademark fine print (sub-footer, all pages) ---------- */

.site-fineprint {
  flex-shrink: 0;
  margin: 0;
  background: var(--color-depth);
  color: var(--color-muted);
  font-family: var(--font-data);
  font-size: 9px;
  font-weight: var(--weight-normal);
  letter-spacing: var(--tracking-wide);
  line-height: 1.5;
  text-align: center;
  padding: 6px var(--space-5);
}

/* --- Colophon footer (social + privacy + disclaimer) ------- */

.colophon {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-5);
  /* Extra bottom space (+ nav height) so the disclaimer clears the fixed navbar. */
  padding: var(--space-9) var(--space-7) calc(var(--space-8) + 36px);
  text-align: center;
  background: var(--color-void);
  border-top: 1px solid var(--color-border);
  scroll-snap-align: end;
}
.colophon-social {
  display: flex;
  align-items: center;
  gap: var(--space-6);
}
.colophon-icon {
  display: inline-flex;
  color: var(--color-muted);
  transition: color 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
.colophon-icon svg { width: 20px; height: 20px; fill: currentColor; display: block; }
.colophon-icon:hover,
.colophon-icon:focus-visible { color: var(--color-white); }
.colophon-privacy {
  font-family: var(--font-data);
  font-size: var(--size-2xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--color-dim);
  transition: color 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
.colophon-privacy:hover,
.colophon-privacy:focus-visible { color: var(--color-bright); }
.colophon .site-fineprint {
  background: none;
  padding: 0;
  max-width: 64ch;
  font-family: var(--font-primary);
  font-size: var(--size-sm);
  letter-spacing: normal;
  line-height: 1.6;
  color: var(--color-dim);
}

/* --- Responsive: ≤768px stacks into 4 equal bands ---------- */

@media (max-width: 768px) {
  body {
    height: 100dvh;
    overflow: hidden;
  }

  /* Partition rows: 001 is the dominant band (35%); the other three
     share the remaining 65% (about 21.7% each). */
  .partition {
    display: grid;
    grid-template-rows: 35fr 65fr;
    grid-template-columns: 1fr;
    overflow: hidden;
  }

  /* B2B: row 1 (= 35% total) */
  .partition-b2b {
    grid-row: 1;
    grid-column: 1;
    order: 0;
    border-left: none;
    border-bottom: 1px solid var(--color-border);
    flex: none;
    justify-content: center;
    overflow: hidden;
  }

  /* Left column: row 2 as a nested flex column (= 65% total, 3 equal bands, about 21.7% each) */
  .partition-left {
    grid-row: 2;
    grid-column: 1;
    order: 0;
    display: flex;
    flex-direction: column;
    flex: none;
  }

  .partition-left .partition-region {
    flex: 1;
    min-height: 0;
    justify-content: center;
    overflow: hidden;
  }

  /* Scale headline to fit the ¼-height row */
  .partition-headline {
    font-size: clamp(24px, 7vw, var(--size-xl));
    margin-bottom: var(--space-1);
  }

  .partition-region {
    padding: var(--space-5) var(--space-5);
  }
}

@media (max-width: 480px) {
  .partition-region {
    padding: var(--space-5) var(--space-5);
  }

  .site-nav__link {
    padding: 0 var(--space-2);
    font-size: 9px;
  }
}

/* --- Light mode overrides ---------------------------------- */

[data-theme="light"] .partition-region {
  background: #f5f4ef;
}

[data-theme="light"] .partition-region:hover,
[data-theme="light"] .partition-region:focus-visible {
  background: #ece9e0;
}

/* =============================================================
   CINEMATIC LAYER (landing partition)
   ============================================================= */

.partition-b2b .stream-num,
.partition-b2b .partition-headline,
.partition-b2b .stream-sub { position: relative; z-index: 1; }

/* Yellow accent on BUILT. — echoes the 001 cold-open */
.partition-accent { color: var(--color-accent-yellow); }

/* ENTER access affordance on hover */
.partition-region::after {
  content: "ENTER \2192";
  position: absolute;
  top: var(--space-7);
  right: var(--space-7);
  font-family: var(--font-mono);
  font-size: var(--size-2xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-dim);
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 320ms var(--ease-cinematic), transform 320ms var(--ease-cinematic);
  z-index: 1;
}
.partition-region:hover::after,
.partition-region:focus-visible::after { opacity: 1; transform: none; }

/* 001 gets its own affordance (real markup, not generated content): "ENTER"
   over "HERE" at normal line spacing, with the arrow to the right, centered
   vertically against the two-line stack -- a flex row does this cleanly,
   which a single ::after string can't. Suppress the shared ::after here so
   the two don't double up. */
.partition-b2b::after { content: none; }

.b2b-enter {
  position: absolute;
  top: var(--space-7);
  right: var(--space-7);
  z-index: 1;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--size-2xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-dim);
  line-height: var(--leading-normal);
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 320ms var(--ease-cinematic), transform 320ms var(--ease-cinematic);
  pointer-events: none;
}
.b2b-enter-text { text-align: right; }

.partition-region:hover .b2b-enter,
.partition-region:focus-visible .b2b-enter { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .partition-region::after,
  .b2b-enter { transition: none; }
}

@media (max-width: 768px) {
  .partition-region::after,
  .b2b-enter { top: var(--space-5); right: var(--space-5); }
}

/* Guaranteed-visible resting state for the entry (safety net) */
.partition.is-settled .partition-region,
.partition.is-settled .stream-num,
.partition.is-settled .partition-headline,
.partition.is-settled .stream-sub,
.partition.is-settled .stream-label {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
}


/* =============================================================
   MOBILE OPTIMIZATION (added 2026-07-01)
   All rules below are phone-scoped or apply only to the runtime
   Stream Index overlay. Desktop layout is untouched.
   ============================================================= */

/* The INDEX toggle and overlay exist in the DOM on all viewports
   (built by site.js) but are hidden on desktop. */
.site-nav__index-item { display: none; }
.stream-index[hidden] { display: none; }

/* Touch hygiene: we cleared the grey tap flash globally, so give
   interactive chrome its own pressed state. (hover stays desktop-only) */
@media (hover: hover) and (pointer: fine) {
  .partition-region { cursor: pointer; }
}
@media (hover: none), (pointer: coarse) {
  /* The hover-only "ENTER ->" cue never fires on touch. Rather than drop the
     affordance entirely, show a quiet, persistent arrow so each band still
     reads as tappable (the whole region is already a link). */
  .partition-region::after {
    content: "\2192";
    opacity: 0.5;
    transform: none;
    top: var(--space-5);
    right: var(--space-5);
  }
}

/* ---- Full-screen Stream Index overlay (mobile navigation) ---- */
.stream-index {
  position: fixed;
  inset: 0;
  z-index: 700;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background: rgba(10, 10, 9, 0.72);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity var(--duration-default) var(--ease-cinematic);
  overscroll-behavior: contain;
}
.stream-index.is-open { opacity: 1; }

.stream-index__panel {
  background: var(--color-depth);
  border-top: 1px solid var(--color-border);
  box-shadow: var(--shadow-overlay);
  padding: var(--space-6)
           max(var(--space-5), env(safe-area-inset-right))
           calc(var(--space-6) + env(safe-area-inset-bottom))
           max(var(--space-5), env(safe-area-inset-left));
  transform: translateY(20px);
  transition: transform var(--duration-default) var(--ease-cinematic);
  max-height: 100dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.stream-index.is-open .stream-index__panel { transform: none; }

.stream-index__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-5);
}
.stream-index__eyebrow {
  font-family: var(--font-data);
  font-size: var(--size-2xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-dim);
}
.stream-index__close {
  background: none;
  border: none;
  color: var(--color-secondary);
  font-size: 30px;
  line-height: 1;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: calc(-1 * var(--space-2));
  cursor: pointer;
}
.stream-index__close:active { color: var(--color-white); }

.stream-index__nav {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--color-border);
}
.stream-index__entry {
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
  padding: var(--space-4) 0;
  min-height: 60px;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-secondary);
  transition: color var(--duration-fast) var(--ease-retrieval);
}
.stream-index__entry:active { color: var(--color-white); }
.stream-index__entry[aria-current="page"] { color: var(--color-bright); }
.stream-index__num {
  font-family: var(--font-data);
  font-size: var(--size-sm);
  color: var(--color-dim);
  flex: none;
  width: 3.5ch;
}
.stream-index__entry[aria-current="page"] .stream-index__num { color: inherit; }
/* Mono, uppercase, tracked: the same typographic treatment as the desktop
   bottom nav, just sized up for touch. */
.stream-index__label {
  font-family: var(--font-data);
  font-size: var(--size-md);
  font-weight: var(--weight-medium);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: inherit;
  flex: 1 1 auto;
}
.stream-index__arrow {
  font-family: var(--font-mono);
  color: var(--color-dim);
  flex: none;
}

.stream-index__foot { margin-top: var(--space-6); }
/* BOOK A CALL mirrors the desktop nav's contact link: mono, uppercase, dim to
   bright, set off by a rule. No filled accent block. */
.stream-index__cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 60px;
  padding: var(--space-4) 0;
  border-top: 1px solid var(--color-border);
  font-family: var(--font-data);
  font-size: var(--size-md);
  font-weight: var(--weight-medium);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--color-secondary);
}
.stream-index__cta:active { color: var(--color-white); }
.stream-index__meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  margin-top: var(--space-5);
}
.stream-index__meta a {
  font-family: var(--font-data);
  font-size: var(--size-2xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--color-dim);
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.stream-index__meta a:active { color: var(--color-bright); }
.stream-index__meta span { color: var(--color-muted); }

@media (prefers-reduced-motion: reduce) {
  .stream-index, .stream-index__panel { transition: none; }
  .stream-index__panel { transform: none; }
}

/* ------------------------- Phones ---------------------------- */
@media (max-width: 600px) {
  :root { --nav-h: 46px; }

  /* Bottom nav: taller for thumbs, honors the home-indicator inset */
  .site-nav {
    min-height: var(--nav-h);
    height: auto;
    padding-left: max(var(--space-5), env(safe-area-inset-left));
    padding-right: max(var(--space-5), env(safe-area-inset-right));
    padding-bottom: env(safe-area-inset-bottom);
  }
  .site-nav__list { height: var(--nav-h); }

  /* No-JS fallback: the full bar scrolls sideways so every stream
     stays reachable even if site.js never runs. */
  .site-nav:not(.is-enhanced) .site-nav__list {
    overflow-x: auto;
    scrollbar-width: none;
  }
  .site-nav:not(.is-enhanced) .site-nav__list::-webkit-scrollbar { display: none; }

  /* Enhanced: collapse to [WLWYB] .......... [INDEX] */
  .site-nav.is-enhanced .site-nav__link,
  .site-nav.is-enhanced .site-nav__sep,
  .site-nav.is-enhanced .site-nav__contact { display: none; }
  .site-nav.is-enhanced .site-nav__index-item {
    display: flex;
    align-items: center;
    height: 100%;
    margin-left: auto;
  }

  .site-nav__home { min-height: 44px; }

  .site-nav__index-toggle {
    font-family: var(--font-data);
    font-size: var(--size-2xs);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--color-secondary);
    background: none;
    border: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    padding: 0 var(--space-2);
    cursor: pointer;
  }
  .site-nav__index-caret {
    font-size: 7px;
    transition: transform var(--duration-fast) var(--ease-retrieval);
  }
  .site-nav__index-toggle[aria-expanded="true"] .site-nav__index-caret { transform: rotate(180deg); }
  .site-nav__index-toggle:active { color: var(--color-white); }

  /* Reserve nav height (+ safe area) so fixed nav never covers content */
  .fold { padding-bottom: calc(var(--nav-h) + env(safe-area-inset-bottom)); }
  .colophon {
    padding-bottom: calc(var(--space-8) + var(--nav-h) + env(safe-area-inset-bottom));
  }

  /* Colophon: 44px tap area for the small social + privacy links */
  .colophon-social { gap: var(--space-4); }
  .colophon-icon {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .colophon-privacy {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  /* Deliverable pages (~90): stack the file row so [down-arrow name]
     sits on one line and the filename wraps to its own line below.
     Higher specificity (.dl-wrap .dl-*) beats the page's inline base. */
  .dl-wrap .dl-link {
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px var(--space-3);
    min-height: 44px;
  }
  .dl-wrap .dl-name { flex: 1 1 auto; min-width: 0; }
  .dl-wrap .dl-file {
    flex: 1 0 100%;
    overflow-wrap: anywhere;
    color: var(--color-dim);
    margin-top: 2px;
  }
}