/* Hairline components.
 *
 * Composes tokens.css. Every class is prefixed hl- so this layer can be dropped
 * onto any page in the app without colliding with the existing Tailwind classes,
 * and so the rest of the site can be migrated page by page rather than in one
 * risky sweep.
 *
 * Structure comes from four devices only: a hairline to separate, alignment to
 * group, space to rank, and one gold accent per screen. No cards, no shadows.
 */

.hl { font-family: var(--hl-font-text); color: var(--hl-ink);
      font-size: var(--hl-size-md); line-height: var(--hl-leading-text); }
.hl-wrap { max-width: 1080px; margin: 0 auto; padding: 0 var(--hl-space-5); }
.hl-measure { max-width: 64ch; }

/* ---- type ---- */
.hl-display { font-family: var(--hl-font-display); line-height: var(--hl-leading-display);
              font-weight: var(--hl-weight-bold); letter-spacing: var(--hl-tracking-tight);
              text-wrap: balance; margin: 0; }
.hl-h1 { font-size: clamp(28px, 5vw, var(--hl-size-3xl)); }
.hl-h2 { font-size: clamp(21px, 3vw, var(--hl-size-2xl)); }
.hl-h3 { font-size: var(--hl-size-xl); }
.hl-lede { font-size: var(--hl-size-lg); color: var(--hl-ink-2); line-height: 1.55; }
.hl-label { font-size: var(--hl-size-2xs); letter-spacing: var(--hl-tracking-label);
            text-transform: uppercase; font-weight: var(--hl-weight-bold); color: var(--hl-ink-3); }

/* ---- directory row: replaces the card ---- */
.hl-rows { border-top: var(--hl-rule-strong); }
.hl-row {
    display: grid; grid-template-columns: 34px 1fr auto; gap: var(--hl-space-4);
    padding: var(--hl-space-4) var(--hl-space-3);
    border-bottom: var(--hl-rule); align-items: start;
    text-decoration: none; color: inherit;
    transition: background var(--hl-dur-fast) var(--hl-ease);
}
/* Hover is a background wash, never a border — a border would shift the row by a pixel. */
.hl-row:hover { background: var(--hl-paper-2); }
.hl-mark { width: 34px; height: 34px; border-radius: var(--hl-radius-1);
           display: grid; place-items: center; overflow: hidden;
           font-size: var(--hl-size-xs); font-weight: var(--hl-weight-heavy);
           letter-spacing: -.02em; background: var(--hl-paper-3); color: var(--hl-ink-2); }
.hl-mark img { width: 100%; height: 100%; object-fit: contain; }
.hl-name { font-size: var(--hl-size-md); font-weight: var(--hl-weight-med); line-height: 1.3; }
.hl-desc { font-size: var(--hl-size-sm); color: var(--hl-ink-2); margin-top: 2px;
           line-height: var(--hl-leading-snug);
           display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hl-tags { font-size: var(--hl-size-xs); color: var(--hl-ink-3); margin-top: var(--hl-space-2); }
.hl-tags em { font-style: normal; color: var(--hl-gold); }
.hl-meta { text-align: right; font-size: var(--hl-size-xs); color: var(--hl-ink-3);
           display: flex; flex-direction: column; gap: var(--hl-space-1);
           align-items: flex-end; white-space: nowrap; }
@media (max-width: 640px) {
    .hl-row { grid-template-columns: 28px 1fr; }
    .hl-mark { width: 28px; height: 28px; }
    .hl-meta { grid-column: 2; text-align: left; align-items: flex-start;
               flex-direction: row; gap: var(--hl-space-3); flex-wrap: wrap; }
}

/* ---- provenance: a mark, not a badge ---- */
.hl-pv { display: inline-flex; align-items: center; gap: var(--hl-space-1);
         font-size: var(--hl-size-2xs); letter-spacing: .05em; text-transform: uppercase;
         font-weight: var(--hl-weight-bold); white-space: nowrap; }
.hl-pv::before { content: ""; width: 6px; height: 6px; border-radius: 50%;
                 background: currentColor; flex: 0 0 auto; }
.hl-pv-confirmed  { color: var(--hl-confirmed); }
.hl-pv-source     { color: var(--hl-ink-3); }
.hl-pv-translated { color: var(--hl-translated); }
.hl-pv-ai         { color: var(--hl-ai); }
.hl-pv-none       { color: var(--hl-absent); }
.hl-pv-none::before { background: transparent; border: 1px dashed currentColor; }

/* ---- facets: text with an underline, not pills ---- */
.hl-facets { display: flex; flex-wrap: wrap; gap: var(--hl-space-2) var(--hl-space-4);
             align-items: baseline; }
.hl-facet { font-size: var(--hl-size-sm); color: var(--hl-ink-2); text-decoration: none;
            padding-bottom: 2px; border-bottom: 2px solid transparent; white-space: nowrap;
            transition: border-color var(--hl-dur-fast) var(--hl-ease),
                        color var(--hl-dur-fast) var(--hl-ease); }
.hl-facet:hover { color: var(--hl-ink); border-bottom-color: var(--hl-line-2); }
.hl-facet-on { color: var(--hl-ink); border-bottom-color: var(--hl-gold);
               font-weight: var(--hl-weight-med); }
.hl-facet .hl-n { color: var(--hl-ink-3); font-variant-numeric: tabular-nums;
                  font-size: var(--hl-size-xs); margin-left: 3px; }

/* ---- stats: rule-separated, no container ---- */
.hl-stats { display: flex; flex-wrap: wrap; gap: var(--hl-space-6);
            padding: var(--hl-space-4) 0;
            border-top: var(--hl-rule); border-bottom: var(--hl-rule); }
.hl-stat-n { font-size: var(--hl-size-xl); font-weight: var(--hl-weight-bold);
             font-variant-numeric: tabular-nums; line-height: 1.1;
             font-family: var(--hl-font-display); }

/* ---- controls ---- */
.hl-field { display: flex; gap: var(--hl-space-2); align-items: center;
            border-bottom: 2px solid var(--hl-line-3); padding-bottom: var(--hl-space-2);
            max-width: 520px; }
.hl-field input { flex: 1; border: 0; background: transparent; font: inherit;
                  font-size: var(--hl-size-lg); color: var(--hl-ink);
                  padding: var(--hl-space-1) 0; outline: none; }
.hl-field input::placeholder { color: var(--hl-ink-3); }
.hl-btn { display: inline-block; padding: var(--hl-space-2) var(--hl-space-4);
          border-radius: var(--hl-radius-1); font-size: var(--hl-size-sm);
          font-weight: var(--hl-weight-med); text-decoration: none; cursor: pointer;
          border: 1px solid var(--hl-accent); color: var(--hl-accent); background: transparent;
          transition: background var(--hl-dur-fast) var(--hl-ease),
                      color var(--hl-dur-fast) var(--hl-ease); }
.hl-btn:hover { background: var(--hl-accent); color: var(--hl-ink-invert); }
.hl-btn-solid { background: var(--hl-accent); color: var(--hl-ink-invert); }
.hl-btn-solid:hover { background: var(--hl-accent-2); border-color: var(--hl-accent-2); }

/* ---- section head ---- */
.hl-sechead { display: flex; justify-content: space-between; align-items: baseline;
              gap: var(--hl-space-3); margin: var(--hl-space-7) 0 var(--hl-space-2); }
.hl-sechead a { font-size: var(--hl-size-sm); text-decoration: none; color: var(--hl-accent); }

/* Keyboard focus must stay visible — the row is a link and the eye needs it. */
.hl-row:focus-visible, .hl-facet:focus-visible, .hl-btn:focus-visible {
    outline: 2px solid var(--hl-accent); outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
    .hl-row, .hl-facet, .hl-btn { transition: none; }
}