/* Hologram Hub, the pages. What every page shares — tokens, resets, shell, controls, header — lives in
   chrome.css and loads before this; this file is the browse table, the model page and the landing.
   Every value resolves to the Hologram brand kit:
   colors and families from hologram-warm.css (.dark) + gap tokens, scales from tokens.css.
   Only 1px hairlines and 2px focus rings are literal. Checked by scripts/lint-tokens.mjs. */


.archive { position: relative; }
.archive .status { min-height: var(--hh-control); }
.archive .status .i { width: var(--hh-icon-small); height: var(--hh-icon-small); color: var(--hh-text-dim); }
.archive.past .status::before { background: var(--hh-accent); }
.archive.busy .status::before { animation: archive-pulse 900ms ease-in-out infinite alternate; }
@keyframes archive-pulse { to { opacity: .25; } }
.archive .menu { width: min(20rem, calc(100vw - 2 * var(--hh-gutter))); max-height: min(32rem, 80vh); overflow: auto; }
.archive .menu [role="menuitemradio"] { height: auto; min-height: var(--hh-control); padding: var(--space-2) var(--space-3); }
.archive .menu [role="menuitemradio"] .label { min-width: 0; }
.archive .menu .sub { display: block; color: var(--hh-text-dim); }
.archive .menu .latest { color: var(--hh-ok); }
.archive-month h3 { margin: var(--space-2) var(--space-3) var(--space-1); font-size: var(--text-sm); font-weight: var(--weight-normal); color: var(--hh-text-dim); }
.archive-older summary { padding: var(--space-2) var(--space-3); color: var(--hh-text-dim); cursor: pointer; }
.archive-foot { display: flex; gap: var(--space-2); padding: 0 var(--space-3) var(--space-2); }
.archive-foot .copy { font-family: var(--font-mono); }
.archive-banner { display: flex; align-items: center; gap: var(--space-3); margin: var(--space-4) 0 0; padding: var(--space-3) var(--space-4); border: 1px solid var(--hh-line-strong); border-radius: var(--radius-md); background: var(--hh-surface); font-size: var(--text-sm); }
.archive-banner .i { flex: none; color: var(--hh-accent); }
.archive-banner .link, .verdict .link { min-height: var(--hh-control); }
.archive-banner span { flex: 1; }
@media (max-width: 720px) {
  /* Narrow enough that hanging the menu off a small control puts it through an edge whichever side it hangs
     from. Anchor it to the row instead: its width is already clamped to the viewport, so left: 0 always fits. */
  .head, .lead { position: relative; }
  .head .archive, .lead .archive { position: static; }
  /* On a phone the date is more room than the row has: the dot and the chevron still open every day. */
  .archive .status { min-width: var(--hh-control); justify-content: center; }
  .archive .status #archive-label { display: none; }
}

/* ---- landing: one hero, one screen, no scroll.
   The shell becomes the viewport: header, hero, logo strip, and nothing below the fold to reach. */
:root[data-page="landing"], :root[data-page="landing"] body { height: 100%; overflow: hidden; }
/* The strip is pinned to the window, not laid out at the end of the shell. As a grid row it depended on the
   shell being exactly as tall as the window, and on a real browser it was not: anything that makes the shell
   taller pushes the strip past the bottom edge, where overflow: hidden then hides it. Fixed to the viewport
   it cannot be pushed anywhere, and the shell reserves its height so the hero still centres above it. */
:root[data-page="landing"] .shell {
  display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr);
  height: 100%; padding-bottom: var(--hh-strip);
}


.land {
  position: relative; isolation: isolate; min-height: 0;
  display: grid; align-content: center; justify-items: center;
  padding: var(--space-6) 0; text-align: center;
}
/* The hub's own signature: the braille address cells from a model page, scaled up and masked off the type. */
.land-art { position: absolute; inset: calc(-1 * var(--space-12)) calc(-1 * var(--hh-gutter)); z-index: -1; color: var(--hh-text); opacity: .09; pointer-events: none; }
.land-art svg { display: block; width: 100%; height: 100%; }
.land-dots { animation: land-drift 90s linear infinite alternate; }
.land-planes { animation: land-drift 140s linear infinite alternate-reverse; }
@keyframes land-drift { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(1.6%, -1.2%, 0); } }

.land-copy { display: grid; justify-items: center; }

/* ---- the star badge above the headline.
   The page's own capsule: the control language of every other button here, the count behind a hairline, and
   the star in brand orange. The accent fills a mark and never sits behind words, because white on it is
   4.14:1, under AA. The count is empty until it exists, so a build that could not reach GitHub shows the
   label and no hollow number; app.js fills it in and the tally appears. */
.land-badge {
  display: inline-flex; align-items: center; gap: var(--space-3);
  height: var(--hh-control); padding: 0 var(--space-4);
  border: 1px solid var(--hh-line); border-radius: var(--hh-control);
  font-family: var(--font-mono); font-size: var(--hh-ui); color: var(--hh-text-dim);
  transition: color var(--hh-ease), border-color var(--hh-ease);
  transform: translateY(calc(-1 * var(--space-3)));
}
.land-badge .lockup, .land-badge .tally { display: inline-flex; align-items: center; gap: var(--space-2); }
.land-badge .i { width: var(--hh-icon); height: var(--hh-icon); }
.land-badge .tally { padding-left: var(--space-3); border-left: 1px solid var(--hh-line); }
.land-badge .tally:has(.n:empty) { display: none; }
.land-badge .star { fill: var(--hh-accent); stroke: var(--hh-accent); }
.land-badge .n { font-weight: var(--weight-medium); color: var(--hh-text); }
.land-badge:hover { color: var(--hh-text); border-color: var(--hh-line-focus); }
.land-badge + .land-title { margin-top: var(--space-6); }
.land-title { font-family: var(--font-display); font-size: var(--hh-display); font-weight: var(--weight-medium); letter-spacing: var(--tracking-display); line-height: .95; }
.land-title span { display: block; }
/* The one exception to the site's single text size (--hh-ui): the line under the headline is the claim the
   page makes, not a control, and at the interface size it read as one. Two steps up on a wide screen, one on
   a phone, where the headline itself is already smaller. */
.land-sub { margin-top: var(--space-6); max-width: 52rem; font-size: var(--text-xl); color: var(--hh-text-dim); }
@media (max-width: 720px) { .land-sub { font-size: var(--text-lg); } }
/* ---- the highlighted word.
   The subline carries one claim and the word "self-verifying" is it. Seven treatments live here at once,
   chosen by data-highlight on <html>; HIGHLIGHT= at build time picks the one that ships. The word inherits
   its size from the line in every one of them, so none of these changes the hero's height. */
.hl { font-family: inherit; font-weight: inherit; font-style: normal; color: var(--hh-text); }
.hl-seal { display: none; }

/* 1. bright — the word at full strength against a dimmed line. Nothing added, nothing spent. */
:root[data-highlight="bright"] .hl { color: var(--hh-text); }

/* 2. mono — the same colour as the line, set in the face the endpoint uses, so it reads as a term of art
      rather than as emphasis. */
:root[data-highlight="mono"] .hl { font-family: var(--font-mono); color: var(--hh-text); letter-spacing: var(--tracking-normal); }

/* 3. dots — the address field's own dots, laid under the word as a rule. The claim is underlined by the
      thing that makes it true. */
:root[data-highlight="dots"] .hl {
  color: var(--hh-text); padding-bottom: var(--space-2);
  background-image: radial-gradient(currentColor 1px, transparent 1px);
  background-size: var(--space-2) var(--space-2);
  background-repeat: repeat-x; background-position: left bottom;
}

/* 4. seal — the mark the catalogue already uses for a verified source, at the line's own size. */
:root[data-highlight="seal"] .hl { color: var(--hh-text); }
:root[data-highlight="seal"] .hl-seal { display: inline-flex; margin-left: var(--space-2); vertical-align: middle; color: var(--hh-ok); }
:root[data-highlight="seal"] .hl-seal .i { width: var(--hh-icon); height: var(--hh-icon); }

/* 5. accent — the brand hue on the word. This is the page's SECOND saturated moment, so the button's
      chevron steps back to neutral and the page still spends one. */
:root[data-highlight="accent"] .hl { color: var(--hh-accent); font-weight: var(--weight-medium); }
:root[data-highlight="accent"] .button.primary .i { color: var(--hh-primary-text); }

/* 6. bracket — hairline marks around the word, drawn the way the figure's planes are drawn. Colourless. */
:root[data-highlight="bracket"] .hl { position: relative; color: var(--hh-text); padding: 0 var(--space-3); }
:root[data-highlight="bracket"] .hl::before,
:root[data-highlight="bracket"] .hl::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: var(--space-2);
  border: 1px solid var(--hh-line-focus);
}
:root[data-highlight="bracket"] .hl::before { left: 0; border-right: 0; }
:root[data-highlight="bracket"] .hl::after { right: 0; border-left: 0; }

/* 7. resolve — the dots draw themselves under the word once, on arrival, and stop. A check completing,
      not an animation running. Reduced motion gets the finished state and no draw. */
:root[data-highlight="resolve"] .hl { position: relative; color: var(--hh-text); padding-bottom: var(--space-2); }
:root[data-highlight="resolve"] .hl::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: var(--space-1); width: 100%;
  background-image: radial-gradient(currentColor 1px, transparent 1px);
  background-size: var(--space-2) var(--space-2);
  background-repeat: repeat-x; background-position: left bottom;
  animation: hl-draw 900ms cubic-bezier(.2, .8, .2, 1) 200ms both;
}
@keyframes hl-draw { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@media (prefers-reduced-motion: reduce) { :root[data-highlight="resolve"] .hl::after { animation: none; } }

.land-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-4) var(--space-6); margin-top: calc(var(--space-8) + var(--space-2)); }
.prompt { color: var(--hh-text-dim); margin-right: .5ch; }
.land-second { font-family: var(--font-mono); font-size: var(--hh-ui); color: var(--hh-text); transition: opacity var(--hh-ease); position: relative; top: .18em; }
.land-second:hover { opacity: .65; }

/* The strip on the bottom edge: two identical runs, sliding exactly half the track, so the loop has no seam. */
.land-marquee {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 8;
  overflow: hidden; padding-block: var(--hh-strip-top) var(--hh-strip-bottom);
  -webkit-mask-image: linear-gradient(to right, transparent, var(--hh-text) 10%, var(--hh-text) 90%, transparent);
  mask-image: linear-gradient(to right, transparent, var(--hh-text) 10%, var(--hh-text) 90%, transparent);
}
.land-track { display: flex; width: max-content; animation: land-slide 64s linear infinite; }
.land-track ul { display: flex; align-items: center; gap: var(--hh-strip-gap); padding-right: var(--hh-strip-gap); }
.land-track li { display: flex; }
/* Each mark is a link into the catalogue, so it needs a target big enough to hit and a hover that says so. */
.land-track a { display: flex; align-items: center; gap: var(--space-3); font-family: var(--font-display); font-size: var(--hh-strip-label); font-weight: var(--weight-medium); letter-spacing: var(--tracking-display); white-space: nowrap; color: var(--hh-text-dim); transition: color var(--hh-ease); }
.land-track a:hover { color: var(--hh-text); }
.land-track a:hover img { opacity: 1; filter: none; }
/* A moving target is a bad target: the run stops while a pointer is over it, or while a link has focus. */
@media (hover: hover) { .land-marquee:hover .land-track { animation-play-state: paused; } }
.land-marquee:focus-within .land-track { animation-play-state: paused; }
/* The marks are the orgs' own avatars, and several are dark artwork on transparency: on the warm dark ground
   they would disappear. A light plate under each one, in the dark themes only, keeps the strip monochrome and
   readable the way the reference strip is. */
.land-track img { width: var(--hh-strip-mark); height: var(--hh-strip-mark); border-radius: 50%; object-fit: cover; filter: grayscale(1); opacity: .75; transition: opacity var(--hh-ease), filter var(--hh-ease); }
:root.dark .land-track img { background: var(--hh-text); }
@keyframes land-slide { to { transform: translateX(-50%); } }

@media (max-height: 820px) {
  :root { --hh-strip-mark: var(--space-8); --hh-strip-top: var(--space-4); --hh-strip-bottom: var(--space-6); --hh-strip-gap: var(--space-12); --hh-strip-label: var(--text-lg); }
  .land { padding: var(--space-4) 0; }
  .land-sub, .land-badge + .land-title { margin-top: var(--space-4); }
.land-actions { margin-top: calc(var(--space-6) + var(--space-2)); }
}
@media (max-height: 620px) {
  :root { --hh-strip-mark: var(--space-6); --hh-strip-top: var(--space-3); --hh-strip-bottom: var(--space-4); --hh-strip-gap: var(--space-10); --hh-strip-label: var(--text-sm); }
  .land { padding: var(--space-3) 0; }
  .land-sub, .land-badge + .land-title { margin-top: var(--space-3); }
  .land-actions { margin-top: var(--space-4); }
}
/* Below this there is no room for a hero and a strip both; the hero is the page, so the strip goes. */
@media (max-height: 460px) {
  :root[data-page="landing"] .shell { padding-bottom: 0; }
  .land-marquee { display: none; }
}
@media (max-width: 480px) { .land-track ul { gap: var(--space-10); padding-right: var(--space-10); } }
@media (prefers-reduced-motion: reduce) { .land-dots, .land-planes, .land-track { animation: none; } }

/* ---- a phone.
   The headline is the page, so it takes the width: the two halves wrap as one line of text rather than as
   two fixed lines, which lets the type grow past what the wide layout's vw rule allows. The primary action
   gets a little more air above it, and the strip, whose run is shorter here, keeps its pace by taking less
   time per loop. */
@media (max-width: 720px) {
  :root { --hh-display: clamp(var(--text-4xl), 12vw, var(--text-5xl)); }
  .land-title span { display: inline; }
  .land-actions { margin-top: var(--space-8); }
  .land-track { animation-duration: 40s; }
}
@media (max-width: 720px) and (max-height: 820px) { .land-actions { margin-top: var(--space-6); } }
@media (max-width: 720px) and (max-height: 620px) { .land-actions { margin-top: var(--space-4); } }

/* Over a photo the figure only adds noise, and floating text loses its ground: the hero takes the glass every
   other surface already uses in Immersive, and the strip steps back further. */
:root[data-theme="immersive"] .land-art { display: none; }
/* Nothing is drawn around the hero in Immersive and the photograph is not dimmed: no slab, the wallpaper at
   the same strength the application shows it. Legibility comes from a shadow under the type, which costs the
   picture nothing. (The header draws no plate either, on every page now: chrome.css.) The strip keeps a
   band, the one thing that makes it read over a bright sky. */
:root[data-theme="immersive"] .land-copy { text-shadow: 0 var(--space-1) var(--space-4) color-mix(in srgb, var(--background) 80%, transparent); }
:root[data-theme="immersive"] .land-sub { color: var(--hh-text); }
:root[data-theme="immersive"] .land-marquee { background: color-mix(in srgb, var(--background) 45%, transparent); }
:root[data-theme="immersive"] .land-track img { opacity: .4; }
:root:not(.dark) .land-art { opacity: .13; }

/* ---- browse: filters | results */
.browse { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3); margin-top: var(--space-6); align-items: start; }
@media (min-width: 1024px) { .browse { grid-template-columns: minmax(18.75rem, 23.75rem) minmax(0, 1fr); } }
/* Under the lead row the columns start where the row's own air ends, the same distance the Registry and
   Spaces pages keep; the margin above is for the panels that open with no row (404, signing in). */
.lead ~ .browse { margin-top: 0; }

.filters { padding: var(--space-4) var(--space-4) var(--space-12); position: sticky; top: calc(var(--space-16) + var(--space-12)); max-height: calc(100vh - var(--space-16) - var(--space-16)); overflow: auto; scrollbar-width: thin; scrollbar-color: var(--hh-fill) transparent; }
.tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-1) 0; padding-bottom: var(--space-4); border-bottom: 1px solid var(--hh-line); }
.tab {
  display: flex; align-items: center; justify-content: center; gap: var(--space-1);
  height: var(--hh-control); padding: 0; min-width: 0;
  border: 1px solid transparent; border-radius: var(--radius-md);
  font-size: var(--text-sm); color: var(--hh-text-dim);
  transition: color var(--hh-ease), background var(--hh-ease), border-color var(--hh-ease);
}
.tab span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tab:hover { color: var(--hh-text); }
.tab[aria-selected="true"] { color: var(--hh-text); background: var(--hh-fill); border-color: var(--hh-line-strong); }
.sections { display: grid; gap: var(--space-6); padding-top: var(--space-4); }
.facet { display: grid; gap: var(--space-3); }
.facet header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.facet h2 { font-size: var(--text-sm); color: var(--hh-text-dim); }
.facet-tools { display: flex; gap: var(--space-2); }
.facet-tools .field { flex: 1; }
.chips { display: flex; flex-wrap: wrap; gap: var(--space-2); overflow: hidden; transition: max-height 200ms cubic-bezier(.4, 0, .2, 1); }
.chips.clamped { max-height: calc(var(--hh-control) * 3 + var(--space-2) * 2); }
.chip {
  display: inline-flex; align-items: center; gap: var(--space-2); max-width: 100%;
  height: var(--hh-control); padding: 0 var(--space-1) 0 var(--space-3);
  border: 1px solid var(--hh-line-strong); border-radius: var(--radius-md);
  font-size: var(--text-sm); color: var(--hh-text);
  transition: border-color var(--hh-ease), background var(--hh-ease), color var(--hh-ease);
}
.chip .i { color: var(--hh-text-dim); }
.chip .label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip.plain { padding-right: var(--space-3); border-color: transparent; }
.chip:hover { border-color: var(--hh-line-focus); }
.chip[aria-pressed="true"] { background: var(--hh-text); color: var(--background); border-color: var(--hh-text); }
.chip[aria-pressed="true"] .i { color: var(--background); }
.chip .n { display: inline-flex; align-items: center; height: var(--hh-tag); padding: 0 var(--space-2); border-radius: var(--hh-tag); background: var(--hh-fill); color: var(--hh-text); font-family: var(--font-mono); }
.chip[aria-pressed="true"] .n { background: color-mix(in srgb, var(--background) 14%, transparent); color: var(--background); }
.more { width: 100%; }
.none { font-size: var(--text-sm); color: var(--hh-text-dim); }

/* ---- results */
.head { display: flex; align-items: center; gap: var(--space-3); }
/* The index control sits with the thing it describes — the catalog this page is showing — rather than in the
   header, which is for the product. It opens the row on the browse page, and follows the back link on a model
   page, so it is on the same side of the page either way. */
/* The menu hangs from the right of its control, which is what the header wanted. In a content row the control
   sits near the start, so the menu hangs from the left instead and opens into the room the row has — otherwise it
   reaches back across the filters beside it. */
.head .archive .menu, .lead .archive .menu { right: auto; left: 0; }
.back-row { margin-bottom: var(--space-4); }
.back-row .back { margin: 0; }
.head h1, .hero h1 { font-family: var(--font-display); font-size: var(--text-3xl); font-weight: var(--weight-medium); letter-spacing: var(--tracking-display); line-height: 1.2; }
/* Wraps: the sort control cannot shrink past its own words, and without this the whole page scrolls
   sideways on a laptop narrow enough to put the filter rail beside a two-column grid. */
.bar { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: var(--space-3); margin: var(--space-4) 0 var(--space-6); }
/* The search takes the row, as it does on the Registry and Spaces pages: it is the one control here that
   rewards being wide, and the sort keeps its own width at the end. */
.bar .search { flex: 1; min-width: 0; }
/* The results stand on the ground, as they do on the Registry and Spaces pages: no slab behind them. The
   search and the sort are surfaces of their own, the height and radius the other two pages give theirs. */
.results-head .bar { margin: 0 0 var(--space-4); }
/* The search and the sort are one row of controls and stand the same height, 48px, on every catalogue page.
   (The sort button's own rule below carries the height too: it comes later and would otherwise win.) */
.bar .search, .sort > button { height: var(--space-12); background: var(--hh-surface); border-color: var(--hh-line-strong); border-radius: var(--radius-lg); }
.bar .search { padding: 0 var(--space-4); }
.open-filters { display: none; }
.results-head { position: relative; z-index: 5; }
.sort { position: relative; margin-left: auto; }
.sort > button { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); height: var(--space-12); min-width: 11.25rem; padding: 0 var(--space-4); border: 1px solid var(--hh-line-strong); border-radius: var(--radius-lg); background: var(--hh-surface); transition: border-color var(--hh-ease); }
.sort > button:hover, .sort > button[aria-expanded="true"] { border-color: var(--hh-line-focus); }
.sort > button .i { color: var(--hh-text-dim); transition: transform 200ms cubic-bezier(.2, .8, .2, 1); }
.sort > button[aria-expanded="true"] .i { transform: rotate(180deg); }
.sort [role="listbox"] { position: absolute; left: 0; right: 0; top: calc(100% + var(--space-2)); z-index: 20; padding: var(--space-1); transform-origin: top; animation: menu-in 160ms cubic-bezier(.2, .8, .2, 1); background: var(--hh-popover); border: 1px solid var(--hh-line-strong); border-radius: var(--radius-md); box-shadow: 0 var(--space-4) var(--space-12) var(--hh-shadow); }
.sort [role="option"] { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); height: var(--hh-control); padding: 0 var(--space-3); border-radius: var(--radius-sm); font-size: var(--text-sm); color: var(--hh-text-dim); cursor: pointer; white-space: nowrap; transition: background var(--hh-ease), color var(--hh-ease); }
.sort [role="option"]:hover, .sort [role="option"].hot, .sort [role="option"][aria-selected="true"] { color: var(--hh-text); }
.sort [role="option"]:hover, .sort [role="option"].hot { background: var(--hh-fill); }
.sort [role="option"] .i { visibility: hidden; }
.sort [role="option"][aria-selected="true"] .i { visibility: visible; }

@media (max-width: 1023px) {
  .filters { display: none; }
  .open-filters { display: inline-flex; align-items: center; gap: var(--space-2); height: var(--hh-field); padding: 0 var(--space-4); border: 1px solid var(--hh-line-strong); border-radius: var(--radius-md); }
  body.sheet { overflow: hidden; }
  body.sheet .filters { display: block; position: fixed; inset: 0; z-index: 30; max-height: none; border-radius: 0; padding: var(--space-16) var(--space-4) calc(var(--space-16) + var(--space-8)); }
  .close-filters { position: fixed; top: var(--space-4); right: var(--space-4); z-index: 31; }
  .sheet-footer { position: fixed; left: 0; right: 0; bottom: 0; z-index: 31; padding: var(--space-3) var(--space-4); background: var(--hh-surface); border-top: 1px solid var(--hh-line); }
  .sheet-footer .button { width: 100%; justify-content: center; }
}
@media (min-width: 1024px) { .close-filters, .sheet-footer { display: none; } }
@media (max-width: 720px) {
  :root { --hh-pad: var(--space-4); }
  .bar { flex-wrap: wrap; }
  .bar .search { flex-basis: 100%; min-width: 0; }
  .sort { margin-left: 0; flex: 1; }
  .sort > button { width: 100%; min-width: 0; }
}

/* ---- grid + card */
.grid { display: grid; gap: var(--space-3); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1280px) { .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1600px) { .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.card {
  position: relative; overflow: hidden; isolation: isolate;
  display: grid; grid-template-columns: minmax(0, 1fr) var(--hh-avatar); grid-template-rows: var(--hh-tag) auto auto;
  column-gap: var(--space-4); row-gap: var(--space-2);
  padding: var(--space-4);
  background: var(--hh-surface);
  border: 1px solid var(--hh-line); border-radius: var(--radius-lg);
  transition: border-color var(--hh-ease), background var(--hh-ease);
}
.card:hover { border-color: var(--hh-line-strong); }
.card .tags { grid-area: 1 / 1; }
.card .title { grid-area: 2 / 1; font-family: var(--font-mono); font-size: var(--text-lg); line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card .meta { grid-area: 3 / 1; }
.card .avatar { grid-area: 1 / 2 / 4 / 3; align-self: center; }

.tags { display: flex; flex-wrap: wrap; align-content: flex-start; gap: var(--space-6) var(--space-2); height: var(--hh-tag); overflow: hidden; min-width: 0; }
.tag {
  display: inline-flex; align-items: center; max-width: 100%;
  height: var(--hh-tag); padding: 0 var(--space-2);
  border: 1px solid var(--hh-line); border-radius: var(--radius-sm);
  background: var(--hh-fill);
  font-family: var(--font-mono); font-size: var(--text-sm); line-height: 1; text-transform: uppercase;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tag.state.addressed, .tag.new { color: var(--hh-ok); border-color: color-mix(in srgb, var(--success) 45%, transparent); background: color-mix(in srgb, var(--success) 12%, transparent); }
.tag.new { background: transparent; }
.tag.state.pending { color: var(--hh-text-dim); background: transparent; border-color: var(--hh-line-strong); }
.tag.state.skipped { color: var(--hh-bad); border-color: color-mix(in srgb, var(--destructive) 45%, transparent); background: color-mix(in srgb, var(--destructive) 10%, transparent); }

.meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-6) var(--space-2); height: var(--space-5); min-width: 0; font-size: var(--text-sm); color: var(--hh-text-dim); white-space: nowrap; overflow: hidden; }
.meta > span { display: inline-flex; align-items: center; gap: var(--space-1); }
/* The middle dot as an escape, not a character: the literal was saved double-encoded once and every card's
   meta line showed two characters for it, on the live site too. An escape survives any editor and any charset. */
.meta > span + span::before { content: "\00B7"; margin-right: var(--space-1); color: var(--hh-text-faint); }
.meta .i { width: var(--hh-icon-small); height: var(--hh-icon-small); }

.avatar { width: var(--hh-avatar); height: var(--hh-avatar); border-radius: 50%; object-fit: cover; background: var(--hh-fill); box-shadow: 0 0 0 1px var(--hh-line); }
.avatar.initials { display: grid; place-items: center; font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--hh-text); }

.empty { grid-column: 1 / -1; display: grid; justify-items: center; gap: var(--space-3); padding: var(--space-16) var(--space-4); color: var(--hh-text-dim); }
.link { color: var(--hh-text); text-decoration: underline; text-underline-offset: var(--space-1); text-decoration-color: var(--hh-line-focus); }

.pager { display: flex; justify-content: center; align-items: center; gap: var(--space-1); margin-top: var(--space-6); font-family: var(--font-mono); font-size: var(--text-sm); }
.pager a, .pager span { display: inline-grid; place-items: center; min-width: var(--hh-control); height: var(--hh-control); padding: 0 var(--space-2); border-radius: var(--radius-md); border: 1px solid transparent; }
.pager a { color: var(--hh-text-dim); transition: color var(--hh-ease), border-color var(--hh-ease); }
.pager a:hover { color: var(--hh-text); border-color: var(--hh-line-strong); }
.pager .now { border-color: var(--hh-line-strong); background: var(--hh-fill); }
.pager .off { color: var(--hh-text-faint); opacity: .5; }
.pager .gap { color: var(--hh-text-dim); }

/* ---- model page */
.back { display: inline-flex; align-items: center; gap: var(--space-1); margin: var(--space-6) 0 var(--space-3); height: var(--hh-control); font-size: var(--text-sm); color: var(--hh-text-dim); transition: color var(--hh-ease); }
.back:hover { color: var(--hh-text); }
.hero { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-4) var(--space-6); }
.hero .avatar { width: var(--space-16); height: var(--space-16); }
.hero .who { display: grid; gap: var(--space-2); min-width: 0; }
.hero .org { font-size: var(--text-sm); color: var(--hh-text-dim); }
.hero h1 { overflow-wrap: anywhere; }
.hero .tags { height: auto; gap: var(--space-2); }
.actions { display: flex; gap: var(--space-3); }
@media (max-width: 720px) { .hero { grid-template-columns: auto minmax(0, 1fr); } .actions { grid-column: 1 / -1; } }
.verdict { display: flex; align-items: center; min-height: var(--hh-field); margin-top: var(--space-4); padding: var(--space-2) var(--space-4); border-radius: var(--radius-md); border: 1px solid var(--hh-line-strong); font-size: var(--text-sm); color: var(--hh-text-dim); }
.verdict.ok { color: var(--hh-ok); border-color: color-mix(in srgb, var(--success) 45%, transparent); background: color-mix(in srgb, var(--success) 8%, transparent); }
.verdict.bad { color: var(--hh-bad); border-color: color-mix(in srgb, var(--destructive) 45%, transparent); }

.detail { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3); margin-top: var(--space-3); align-items: start; }
@media (min-width: 1024px) { .detail { grid-template-columns: minmax(18.75rem, 23.75rem) minmax(0, 1fr); } }
.section-head { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-2); }
.section-head h2 { font-weight: var(--weight-medium); }
.facts div { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-height: var(--hh-field); border-bottom: 1px solid var(--hh-line); font-size: var(--text-sm); }
.facts div:last-child { border-bottom: 0; }
.facts dt { color: var(--hh-text-dim); flex: none; }
.facts dd { font-family: var(--font-mono); text-align: right; min-width: 0; overflow-wrap: anywhere; }
.facts .ok { color: var(--hh-ok); }
.facts .dim { color: var(--hh-text-dim); }
.facts .bad { color: var(--hh-bad); }

.scroll { overflow-x: auto; margin: 0 calc(-1 * var(--hh-pad)); padding: 0 var(--hh-pad); }
table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
th { height: var(--hh-field); text-align: left; font-weight: var(--weight-normal); color: var(--hh-text-dim); border-bottom: 1px solid var(--hh-line-strong); white-space: nowrap; }
th button { display: inline-flex; align-items: center; gap: var(--space-1); color: inherit; transition: color var(--hh-ease); }
th button .i { width: var(--hh-icon-small); height: var(--hh-icon-small); opacity: 0; }
th button:hover, th button[aria-sort] { color: var(--hh-text); }
th button[aria-sort] .i { opacity: 1; }
th button[aria-sort="descending"] .i { transform: rotate(180deg); }
td { height: var(--hh-field); border-bottom: 1px solid var(--hh-line); font-family: var(--font-mono); white-space: nowrap; }
tr:last-child td { border-bottom: 0; }
th + th, td + td { padding-left: var(--space-6); }
.size { text-align: right; }
th.size button { flex-direction: row-reverse; }
td.path { max-width: 24rem; overflow: hidden; text-overflow: ellipsis; }
td.addr { color: var(--hh-text-dim); }
.note { font-size: var(--text-sm); color: var(--hh-text-dim); max-width: 38rem; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; } }

/* ---- themes: Dark (kit .dark), Light (kit :root), Immersive (dark over a photo, glass panels) */
:root:not(.dark) .tag.state.addressed { background: color-mix(in srgb, var(--success) 6%, transparent); }
:root:not(.dark) .tag.state.skipped { background: transparent; }
:root[data-theme="immersive"] .tag.state.skipped { background: color-mix(in srgb, var(--destructive) 10%, var(--card)); }
/* Immersive browse: the search, the sort, the cards and the pager each carry their own glass. */
:root[data-theme="immersive"] .bar .search,
:root[data-theme="immersive"] .sort > button,
:root[data-theme="immersive"] .card,
:root[data-theme="immersive"] .empty,
:root[data-theme="immersive"] .pager {
  background: var(--hh-surface);
  -webkit-backdrop-filter: blur(var(--space-3)) saturate(1.3); backdrop-filter: blur(var(--space-3)) saturate(1.3);
}
:root[data-theme="immersive"] .card { border-color: var(--hh-line-strong); }
:root[data-theme="immersive"] .card:hover { background: color-mix(in srgb, var(--card) 92%, transparent); }
:root[data-theme="immersive"] .empty { border-radius: var(--radius-lg); }
:root[data-theme="immersive"] .pager { width: fit-content; margin-inline: auto; padding: var(--space-1); border-radius: var(--radius-lg); }
:root[data-theme="immersive"] .back { padding: 0 var(--space-3); border-radius: var(--hh-control); background: var(--hh-surface); color: var(--hh-text); -webkit-backdrop-filter: var(--hh-glass); backdrop-filter: var(--hh-glass); }


/* ---- braille: Hologram dots, one cell per byte (src/braille.mjs) */
.bx { display: inline-flex; gap: .18em; vertical-align: middle; line-height: 1; }
.bx .cell { width: .56em; height: 1em; overflow: visible; flex: none; }
.bx circle { fill: currentColor; transition: opacity 90ms linear, fill 160ms linear; }
.bx circle.off { opacity: .14; }
.bx.loader circle.off { opacity: 0; }
.bx .ok circle:not(.off) { fill: var(--hh-ok); }
.bx .bad circle:not(.off) { fill: var(--hh-bad); }
.bx .lock circle:not(.off) { filter: drop-shadow(0 0 .14em color-mix(in srgb, var(--success) 70%, transparent)); }

.tag .bx.loader { font-size: var(--text-sm); margin-left: var(--space-2); color: var(--hh-text-dim); }

.button .bx.loader { display: none; font-size: var(--text-base); color: var(--hh-accent); }
.button.busy .bx.loader { display: inline-flex; }
.button.busy > .i { display: none; }
.button.primary:disabled { opacity: 1; cursor: progress; }

.provenance { display: flex; flex-wrap: wrap; gap: var(--space-6) var(--space-12); margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--hh-line); }
.provenance .label { font-size: var(--text-sm); color: var(--hh-text-dim); }
.signature, .sources { display: grid; gap: var(--space-2); align-content: start; }
.sources ul { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.sources li { display: inline-flex; align-items: center; gap: var(--space-2); height: var(--hh-control); padding: 0 var(--space-3) 0 var(--space-2); border: 1px solid var(--hh-line-strong); border-radius: var(--hh-control); font-size: var(--text-sm); transition: border-color var(--hh-ease); }
.sources li a { display: inline-flex; align-items: center; gap: var(--space-1); }
.sources li a .i { width: var(--text-sm); height: var(--text-sm); color: var(--hh-text-dim); }
.sources li a:hover { text-decoration: underline; text-underline-offset: var(--space-1); text-decoration-color: var(--hh-line-focus); }
.sources .state { display: inline-grid; place-items: center; width: var(--space-4); height: var(--space-4); }
.sources .state > * { display: none; grid-area: 1 / 1; }
.sources .state .i { width: var(--space-4); height: var(--space-4); }
.sources .state .bx.loader { font-size: var(--text-sm); color: var(--hh-text-dim); }
.sources li:not([data-state]) .state > .i:first-child, .sources li[data-state=""] .state > .i:first-child { display: block; color: var(--hh-text-dim); }
.sources li[data-state="busy"] .state .bx.loader { display: inline-flex; }
.sources li[data-state="ok"] { border-color: color-mix(in srgb, var(--success) 45%, transparent); }
.sources li[data-state="ok"] .state > .i:nth-of-type(2) { display: block; color: var(--hh-ok); stroke-width: 2.25; }
.sources li[data-state="bad"] { border-color: color-mix(in srgb, var(--destructive) 45%, transparent); }
.sources li[data-state="bad"] .state > .i:nth-of-type(3) { display: block; color: var(--hh-bad); stroke-width: 2.25; }

.signature .glyph { flex-wrap: wrap; gap: var(--space-1) var(--space-4); font-size: var(--text-lg); color: var(--hh-text); }
.signature .glyph > span { display: inline-flex; gap: .18em; }

/* ---- per source downloads */
th.dl, td.dl { text-align: center; padding-left: var(--space-4); }
th.dl { font-size: var(--text-sm); }
.dl-yes, .dl-no { display: inline-grid; place-items: center; width: var(--hh-control); height: var(--hh-control); border-radius: var(--radius-md); }
.dl-yes { color: var(--hh-ok); transition: background var(--hh-ease), color var(--hh-ease); }
.dl-yes:hover, .dl-yes:focus-visible { background: color-mix(in srgb, var(--success) 14%, transparent); }
.dl-yes.busy { color: var(--hh-text-dim); cursor: progress; }
.dl-yes.done .i { stroke-width: 2.25; }
.dl-yes.bad { color: var(--hh-bad); }
.dl-no { color: var(--hh-bad); }
.dl-yes .i, .dl-no .i { width: var(--space-4); height: var(--space-4); }
.section-head { flex-wrap: wrap; }
.download-all { position: relative; }
/* While a download runs the button is the progress display: the label counts, a bar fills along its lower edge. */
#dl-all { --progress: 0%; position: relative; overflow: hidden; font-variant-numeric: tabular-nums; }
#dl-all.running::before, #dl-all.running::after { content: ""; position: absolute; left: 0; bottom: 0; height: var(--space-1); background: var(--success-foreground); }
#dl-all.running::before { width: 100%; opacity: .2; }
#dl-all.running::after { width: var(--progress); opacity: .7; transition: width 300ms linear; }
.download-all .menu { width: min(26rem, calc(100vw - 2 * var(--hh-gutter))); }
/* A source row: availability dot, name and facts, one action. */
.menu .src[role="menuitem"] { height: var(--space-12); min-height: var(--space-12); padding: 0 var(--space-3); line-height: 1.43; }
.menu .src .label, .menu .src .sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.menu .src .state { display: inline-grid; place-items: center; flex: none; width: var(--space-4); height: var(--space-4); }
.menu .src .state::before { content: ""; grid-area: 1 / 1; width: var(--space-2); height: var(--space-2); border-radius: 50%; background: var(--hh-text-dim); }
.menu .src .state .bx.loader { display: none; grid-area: 1 / 1; font-size: var(--text-sm); color: var(--hh-text-dim); }
.menu .src .state .i { grid-area: 1 / 1; width: var(--space-4); height: var(--space-4); color: var(--hh-text-dim); }
.menu .src[data-state="busy"] .state::before { display: none; }
.menu .src[data-state="busy"] .state .bx.loader { display: inline-flex; }
.menu .src[data-state="ok"] .state::before { background: var(--hh-ok); }
.menu .src[data-state="bad"] .state::before { background: var(--hh-bad); }
.menu .src .act { flex: none; display: inline-flex; align-items: center; height: var(--space-6); padding: 0 var(--space-2); border: 1px solid var(--hh-line-strong); border-radius: var(--radius-sm); font-size: var(--text-sm); color: var(--hh-text); white-space: nowrap; transition: border-color var(--hh-ease), color var(--hh-ease); }
.menu .src:hover .act, .menu .src:focus-visible .act { border-color: var(--hh-line-focus); }
.menu .src:disabled { cursor: not-allowed; }
.menu .src:disabled:hover { background: transparent; }
.menu .src:disabled .label, .menu .src:disabled .act, .menu .src[aria-disabled="true"] .act { color: var(--hh-text-dim); }
.menu .src:disabled .act { border-style: dashed; }
.menu .src.busy .act { color: var(--hh-accent); border-color: var(--hh-accent); }
.menu a[role="menuitem"], .menu button[role="menuitem"] { display: flex; align-items: center; gap: var(--space-3); width: 100%; padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); text-align: left; transition: background var(--hh-ease); }
.menu [role="menuitem"]:hover, .menu [role="menuitem"]:focus-visible { background: var(--hh-fill); outline: 0; }
.menu [role="menuitem"] .i { flex: none; color: var(--hh-text-dim); }
.menu [role="menuitem"] .label { flex: 1; min-width: 0; }
.menu [role="menuitem"] .sub { display: block; color: var(--hh-text-dim); }
.menu-note { padding: var(--space-2) var(--space-3); font-size: var(--text-sm); color: var(--hh-text-dim); line-height: 1.43; }
@media (max-width: 720px) {
  .hero { position: relative; }
  .actions .download-all { position: static; }
  .actions .download-all .menu { left: 0; right: 0; width: auto; top: calc(100% + var(--space-2)); transform-origin: top center; }
}
.files-head { justify-content: space-between; margin-bottom: var(--space-3); }
.files-head .note { margin: 0; }
th.dl { vertical-align: bottom; padding-bottom: var(--space-2); }
th.dl .name { display: block; }
th.dl .name::before { content: ""; display: inline-block; width: var(--space-2); height: var(--space-2); margin-right: var(--space-1); border-radius: 50%; background: var(--hh-text-dim); vertical-align: middle; }
th.dl[data-state="ok"] .name::before { background: var(--hh-ok); }
th.dl[data-state="bad"] .name::before { background: var(--hh-bad); }
.dl-all { display: inline-grid; margin-bottom: var(--space-1); }
.dl-all.off { color: var(--hh-text-dim); opacity: 0.35; }
.progress { margin: 0 0 var(--space-3); font-size: var(--text-sm); color: var(--hh-text-dim); }
.progress.ok { color: var(--hh-ok); }
.progress.bad { color: var(--hh-bad); }

/* ---- model panel tabs and Overview */
.panel-tabs { display: flex; gap: var(--space-1); margin-bottom: var(--space-6); }
.panel-tabs .tab { padding: 0 var(--space-4); gap: var(--space-2); font-size: var(--text-base); }
.panel-tabs .tab .pill { height: var(--hh-tag); padding: 0 var(--space-2); }
.pane[hidden] { display: none; }
.ov { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-8); }
.ov-summary { font-size: var(--text-lg); line-height: 1.55; color: var(--hh-text); max-width: 48rem; }
.ov-section { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3); min-width: 0; }
.ov-section h3 { margin: 0; font-size: var(--text-base); font-weight: var(--weight-medium); }
.ov-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(24rem, 100%), 1fr)); column-gap: var(--space-8); margin: 0; }
.ov-facts div { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-height: var(--hh-field); border-bottom: 1px solid var(--hh-line); font-size: var(--text-sm); }
.ov-facts dt { color: var(--hh-text-dim); flex: none; }
.ov-facts dd { margin: 0; font-family: var(--font-mono); text-align: right; min-width: 0; overflow-wrap: anywhere; }
.ov-facts dd a, .ov-list a, .ov-lede a, .md a { color: var(--hh-text); text-decoration: underline; text-decoration-color: var(--hh-line-focus); text-underline-offset: var(--space-1); }
.ov-note { display: inline-flex; margin-left: var(--space-2); font-family: var(--font-sans); color: var(--hh-text-dim); }
.ov-note.no { color: var(--hh-bad); }
.ov-lede { font-size: var(--text-sm); color: var(--hh-text-dim); }
.ov-lede code { font-family: var(--font-mono); color: var(--hh-text); }
.ov-sub { display: block; font-family: var(--font-sans); font-size: var(--text-sm); color: var(--hh-text-dim); }
.ov-table td { height: auto; min-height: var(--hh-field); padding-block: var(--space-2); white-space: normal; }
.ov-table td:first-child { font-family: var(--font-sans); }
.ov-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.ov-chip { display: inline-flex; align-items: center; gap: var(--space-2); height: var(--hh-control); padding: 0 var(--space-3); border: 1px solid var(--hh-line-strong); border-radius: var(--radius-md); font-size: var(--text-sm); color: var(--hh-text); transition: border-color var(--hh-ease); }
a.ov-chip:hover { border-color: var(--hh-line-focus); }
.ov-chip .n { font-family: var(--font-mono); color: var(--hh-text-dim); }
.ov-list { display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style: none; font-size: var(--text-sm); }
.ov-code { position: relative; }
.ov-code pre { margin: 0; padding: var(--space-4) var(--space-12) var(--space-4) var(--space-4); overflow-x: auto; border-radius: var(--radius-md); background: var(--hh-fill); font-family: var(--font-mono); font-size: var(--text-sm); line-height: 1.6; }
.ov-code .copy { position: absolute; top: var(--space-3); right: var(--space-3); }
.ov-card { border-top: 1px solid var(--hh-line); padding-top: var(--space-4); }
.ov-card summary { cursor: pointer; font-weight: var(--weight-medium); list-style: none; display: inline-flex; align-items: center; gap: var(--space-2); }
.ov-card summary::-webkit-details-marker { display: none; }
.ov-card summary::after { content: ""; width: var(--space-2); height: var(--space-2); border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: rotate(45deg); transition: transform var(--hh-ease); margin-left: var(--space-1); }
.ov-card[open] summary::after { transform: rotate(225deg); }
.md { margin-top: var(--space-4); max-width: 52rem; font-size: var(--text-base); line-height: 1.65; overflow-wrap: anywhere; }
.md > * + * { margin-top: var(--space-4); }
.md h1, .md h2, .md h3, .md h4 { margin-bottom: 0; font-family: var(--font-display); font-weight: var(--weight-medium); letter-spacing: var(--tracking-display); line-height: 1.3; }
.md h1, .md h2 { font-size: var(--text-lg); }
.md h3, .md h4, .md h5, .md h6 { font-size: var(--text-base); }
.md :is(small, sub, sup, figcaption) { font-size: var(--text-sm); }
.md p, .md ul, .md ol, .md blockquote, .md pre, .md table { margin-bottom: 0; }
.md ul, .md ol { padding-left: var(--space-6); }
.md blockquote { margin-left: 0; padding-left: var(--space-4); border-left: 2px solid var(--hh-line-strong); color: var(--hh-text-dim); }
.md code { font-family: var(--font-mono); font-size: var(--text-sm); }
.md pre { padding: var(--space-4); overflow-x: auto; border-radius: var(--radius-md); background: var(--hh-fill); }
.md table { display: block; overflow-x: auto; border-collapse: collapse; font-size: var(--text-sm); }
.md th, .md td { height: auto; padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--hh-line); text-align: left; white-space: nowrap; font-family: var(--font-sans); }
.md img { max-width: 100%; height: auto; border-radius: var(--radius-md); }
.md hr { border: 0; border-top: 1px solid var(--hh-line); }
.img-alt { color: var(--hh-text-dim); font-size: var(--text-sm); }
.ov-provenance { font-size: var(--text-sm); color: var(--hh-text-dim); line-height: 1.6; }
.ov-provenance .copy { font-family: var(--font-mono); }


/* ---- registry artifact page (src/registry-page.mjs): the model page's shape with what an image has and a model does not */
.avatar.cover { border-radius: var(--radius-md); object-fit: contain; padding: var(--space-1); background: var(--hh-fill); }
.hero .org .mono, .facts .mono, .ov-facts .mono { font-family: var(--font-mono); }
.hero .org a { color: inherit; text-decoration: underline; text-decoration-color: var(--hh-line-focus); text-underline-offset: var(--space-1); }
.ov-run { display: grid; gap: var(--space-3); }
.ov-run .cmd { display: grid; gap: var(--space-1); }
.ov-run .lbl { font-size: var(--text-sm); color: var(--hh-text); }
.ov-run .lbl .dim, .ov-facts .dim, td .dim, dd .dim { color: var(--hh-text-dim); }
.ov-facts .bad { color: var(--hh-bad); }
.ov-run .cmdline { display: flex; align-items: center; gap: var(--space-3); margin: 0; padding: var(--space-2) var(--space-3); border: 1px solid var(--hh-line); border-radius: var(--radius-md); background: var(--hh-fill); font-family: var(--font-mono); font-size: var(--text-sm); line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }
.ov-run .cmdline code { flex: 1; min-width: 0; }
.ov-run .cmdline .copy { flex: none; font-family: var(--font-sans); font-size: var(--text-sm); color: var(--hh-text-dim); }
.ov-list li { display: inline-flex; align-items: center; gap: var(--space-2); }
.ov-list li a .i { width: var(--hh-icon-small); height: var(--hh-icon-small); color: var(--hh-text-dim); }
#tags td.path { max-width: 18rem; }
#tags td .tag { margin-left: var(--space-2); }
#tags td.dl .dl-yes .i { width: var(--hh-icon-small); height: var(--hh-icon-small); }