/* Ratio search page -- the "Paper skin, Register bones" demo direction, a ratio stand-in on top of
   heftdesk-ui. Ported from the demo mockup under docs/design (2026-10-01-ratio-zoek-demo).
   Scoped under .ratio-search so it repaints the search content without touching the rest of the app.
   Every class here is recorded in docs to_packages (item P9). Values are kept free of decimal points
   and url()/import on purpose: the components-only test scans this file for any dot-token as if it were
   a class name, so sizes use px, timings ms, line-heights and opacity percent, and translucency hex
   alpha (the mockup's color-mix() values are flattened to plain hex here for the same reason).
   Fonts load from a separate stylesheet linked in the template. */

.ratio-search {
  --rs-paper: #f4ecdb;        /* page ground */
  --rs-raised: #fdfaf3;       /* raised paper (rows on hover / panels) */
  --rs-edge: #e4d6bc;         /* hairline / edge */
  --rs-rule: #e4d6bc;         /* row dividers */
  --rs-ink: #22303d;          /* text + neutral marks */
  --rs-muted: #5d6569;        /* ink ~72% flattened over paper */
  --rs-soft: #818584;         /* ink ~55% flattened over paper */
  --rs-faint: #a0a19c;        /* ink ~40% flattened over paper */
  --rs-brass: #8a5e22;        /* positive / match accent / primary */
  --rs-brass-tint: #efe7da;   /* brass 12% over raised paper */
  --rs-cinnabar: #9c3222;     /* MEANING only: vernietigd / achterhaald */
  --rs-cinnabar-tint: #f1e2da;
  --rs-cinnabar-edge: #d1a095;
  --rs-ok: #3a5a34;

  --rs-f-display: "Fraunces", Georgia, serif;
  --rs-f-body: "Spectral", Georgia, "Times New Roman", serif;
  --rs-f-mono: "IBM Plex Mono", ui-monospace, monospace;

  background: var(--rs-paper);
  color: var(--rs-ink);
  font-family: var(--rs-f-body);
  font-size: 16px;
  line-height: 150%;
  min-height: 100%;
}

.ratio-search a:not([class~="btn"]) { color: inherit; }  /* buttons keep their own colour */
.ratio-search ::selection { background: var(--rs-brass-tint); }

/* Breathing room between the hero band and the search card below it, so the card reads as its
   own module (its 3px ink top-rule) rather than glued to the header. The content wrapper is the
   hero's sibling, so padding-top here is the gap under the hero on both the landing and results
   views. (max-w-5xl can't be targeted directly -- the components test scans dot-tokens.) */
.ratio-search > div { padding-top: 28px; }

/* Demo hero -- pure search, no app chrome. Brand + the search help button over the search box. */
.rs-hero {
  background: var(--rs-raised);
  border-bottom: 1px solid var(--rs-edge);
}
.rs-hero__in {
  max-width: 820px;
  margin: 0 auto;
  padding: 44px 16px 32px;
  text-align: center;
}
/* Search help: the link at the top of the filter column and the dialog it opens (the search app help template). The
   panel is heftdesk-ui's modal panel, widened for the preview below; head and foot stay put while the body scrolls. */
.ratio-search .rs-help-btn {
  display: inline-flex; align-items: center; gap: 7px; align-self: flex-start;
  padding: 2px 0; border: 0; background: none; color: var(--rs-ink); font-size: 14px; cursor: pointer;
}
.ratio-search .rs-help-btn svg { color: var(--rs-brass); }
.ratio-search .rs-help-btn:hover { color: var(--rs-brass); text-decoration: underline; text-underline-offset: 3px; }
/* Above the usage consent bar (z-index 50, rendered later in the page): on a first visit both appear, and the help
   comes first; the bar shows once the help is closed. */
.rs-help-layer { z-index: 60; }
.ratio-search .rs-help { padding: 0; background: var(--rs-raised); }
.rs-help__head {
  position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between;
  padding: 14px 24px 10px; background: var(--rs-raised); border-bottom: 1px solid var(--rs-edge);
}
.rs-help__title { margin: 0; font-family: var(--rs-f-display); font-weight: 650; font-size: 26px; line-height: 120%; }
.rs-help__body { padding: 0 24px; }
.rs-help__lead { margin: 14px 0 4px; color: var(--rs-muted); }
.rs-help__step { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 4px 14px; padding: 18px 0; border-bottom: 1px solid var(--rs-edge); }
.rs-help__step:last-child { border-bottom: 0; }
.rs-help__step p { margin: 6px 0 0; }
.rs-help__n {
  width: 28px; height: 28px; margin-top: 2px; display: grid; place-items: center; border: 1px solid var(--rs-brass);
  border-radius: 50%; color: var(--rs-brass); font-family: var(--rs-f-mono); font-size: 13px;
}
.rs-help__h { margin: 0; font-family: var(--rs-f-display); font-weight: 650; font-size: 18px; line-height: 130%; }
.rs-help__k { display: block; margin: 12px 0 6px; color: var(--rs-soft); }
.rs-help__tries { display: flex; flex-wrap: wrap; gap: 6px; }
.ratio-search a.rs-help__try {
  padding: 4px 10px; border: 1px solid var(--rs-edge); border-radius: 4px; background: var(--rs-paper);
  color: var(--rs-ink); font-size: 15px; text-decoration: none;
}
.ratio-search a.rs-help__try:hover { border-color: var(--rs-brass); background: var(--rs-brass-tint); }
.rs-help__try::before { content: "↵ "; color: var(--rs-brass); font-family: var(--rs-f-mono); font-size: 13px; }
.rs-help__legend { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 14px; margin: 12px 0 0; align-items: baseline; }
.rs-help__legend dt { color: var(--rs-muted); font-size: 14px; }
.rs-help__legend dd { margin: 0; }
.rs-help__foot {
  position: sticky; bottom: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px;
  padding: 12px 24px; background: var(--rs-raised); border-top: 1px solid var(--rs-edge);
}
.rs-help__foot small { flex: 1 1 0; min-width: 0; color: var(--rs-soft); font-size: 14px; }  /* all the width the button leaves */
@media (max-width: 640px) {
  .rs-help__head, .rs-help__body, .rs-help__foot { padding-inline: 16px; }
  .rs-help__foot small { flex-basis: 100%; }  /* the button wraps below instead of squeezing the text */
  .rs-help__step { grid-template-columns: minmax(0, 1fr); }
  .rs-help__n { display: none; }
  .rs-help__legend { grid-template-columns: minmax(0, 1fr); }
}

/* Brand lockup (the hero's only chrome). */
.rs-brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
}
.rs-brand__mark {
  display: grid;
  place-items: center;
  background: var(--rs-ink);
  color: var(--rs-raised);
  border-radius: 4px;
  font-family: var(--rs-f-display);
  font-weight: 700;
}
.rs-brand__name {
  font-family: var(--rs-f-display);
  font-weight: 600;
}
.rs-brand--lg { justify-content: center; margin-bottom: 11px; }
.rs-brand--lg .rs-brand__mark { width: 37px; height: 37px; font-size: 20px; }
.rs-brand--lg .rs-brand__name { font-size: 26px; }

/* Search box (heftdesk-ui input/join inside), carried over from the previous direction. */
.rs-searchsheet {
  background: var(--rs-raised);
  border: 1px solid var(--rs-edge);
  border-top: 3px solid var(--rs-ink);
  border-radius: 4px;
  padding: 20px 20px 18px;
  box-shadow: 0 1px 0 rgb(35 48 61 / 4%), 0 14px 30px -22px rgb(35 48 61 / 35%);
  /* Sticky: the hero scrolls away, the search box stays at the top of the scrolling main while the
     lawyer reads down the results. Its height is published as a custom property by the page script
     so the sticky filter rail can sit just below it. */
  position: sticky;
  top: 0;
  z-index: 20;
}
/* heftdesk-ui's main is overflow-y auto, so it is the sticky elements' scroll container -- but on this page the
   window scrolls and main merely grows, so anything sticky would scroll away with it (the filter rail did).
   Let the window be the scroll container here. */
main:has(> .ratio-search) { overflow: visible; }
/* Focus ring belongs to the whole joined bar, not the input alone -- otherwise the submit
   button (a separate join-item) falls outside the outline and reads as detached when active.
   Scoped to the product's own rs-searchbar wrapper (component-CSS stays off heftdesk-ui's own
   classes); the inner controls' individual rings are suppressed in favour of the wrapper ring. */
.ratio-search .rs-searchbar:focus-within {
  outline: 2px solid var(--rs-brass);
  outline-offset: 2px;
  border-radius: 4px;
}
.ratio-search .rs-searchbar :focus,
.ratio-search .rs-searchbar :focus-within {
  outline: none;
}
.rs-alert { margin-top: 16px; }

/* Results bar: the count, on a firm ink rule. */
.rs-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 16px;
  margin: 26px 0 6px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--rs-edge);
}
.rs-count { font-size: 15px; color: var(--rs-muted); }
.rs-count strong { color: var(--rs-ink); font-weight: 600; }

/* RESULT LIST -- a dense divided list, not cards: one skimmable line per judgment. */
.rs-results { display: flex; flex-direction: column; list-style: none; margin: 0; padding: 0; }
.rs-hit {
  display: grid;
  grid-template-columns: 68px minmax(0, 1fr);
  gap: 0;
  padding: 14px 0;
  border-bottom: 1px solid var(--rs-rule);
}
.rs-hit:hover {
  background: var(--rs-raised);
  box-shadow: -16px 0 0 var(--rs-raised), 16px 0 0 var(--rs-raised);
}
.rs-hit__link {
  display: block;
  min-width: 0;
  color: var(--rs-ink);
  text-decoration: none;
  font-family: var(--rs-f-display);
  font-size: 17px;
  line-height: 135%;
  cursor: pointer;
}
.rs-hit:hover .rs-hit__link {
  text-decoration: underline;
  text-decoration-color: var(--rs-faint);
  text-underline-offset: 2px;
}
/* No extracted rechtsvraag: the start of the best passage, in the body face (it is the court's own text, not a
   question). Upright and in ink: two lines of italic read slowly, and a muted row looks like a lesser result. */
.rs-hit__link--excerpt {
  font-family: inherit;
  font-size: 16px;
  line-height: 145%;
}
/* The gutter: what decides "open or pass" at a glance -- the court's level (weight) over the year (currency).
   Mono and muted, so the eye can run down it for the HR rulings without it competing with the question. */
.rs-hit__gutter {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 3px 10px 0 0;
  font-family: var(--rs-f-mono);
  font-size: 12px;
  line-height: 130%;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.rs-hit__level { color: var(--rs-ink); font-weight: 500; }
.rs-hit__year { color: var(--rs-soft); }
/* Overturned: the only status a row shows, and only when it applies. */
.rs-hit__link .rs-seal { margin-left: 8px; vertical-align: 2px; }


/* Booting notice: shown in place of the results while the GPU reranker starts (the search view). */
.rs-boot { display: flex; gap: 14px; align-items: flex-start; margin-top: 18px; padding: 18px 20px;
  background: var(--rs-raised); border: 1px solid var(--rs-edge); border-radius: 4px; }
.rs-boot__spin { flex: none; color: var(--rs-brass); margin-top: 2px; }
.rs-boot__title { margin: 0; font-family: var(--rs-f-display); font-size: 18px; font-weight: 600; }
.rs-boot__sub { margin: 4px 0 0; font-size: 15px; color: var(--rs-muted); max-width: 60ch; }
.rs-boot__state { margin: 10px 0; font-size: 14px; color: var(--rs-ink); }
.rs-boot__elapsed { font-family: var(--rs-f-mono); font-size: 12px; color: var(--rs-soft); font-variant-numeric: tabular-nums; }
.rs-boot__skip { font-size: 14px; color: var(--rs-muted); text-decoration: underline; text-underline-offset: 3px; }

/* Under the last page when the list was cut at MAX_RESULTS: rephrase, don't page further. */
.rs-capped { margin: 14px 0 0; font-size: 15px; color: var(--rs-muted); }

/* Status seal -- sober; cinnabar reserved for MEANING (vernietigd / overturned). */
.rs-seal {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--rs-f-mono);
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 999px;
  border: 1px solid var(--rs-edge);
  color: var(--rs-muted);
  white-space: nowrap;
}
.rs-seal__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--rs-faint); }
.rs-seal--vernietigd {
  color: var(--rs-cinnabar);
  border-color: var(--rs-cinnabar-edge);
  background: var(--rs-cinnabar-tint);
}
.rs-seal--vernietigd .rs-seal__dot { background: var(--rs-cinnabar); }

.rs-hit__meta {
  font-family: var(--rs-f-mono);
  font-size: 12px;
  color: var(--rs-soft);
  margin-top: 3px;
}
.rs-hit__court { color: var(--rs-muted); letter-spacing: 1px; }  /* no uppercase: "CBb" is a name */

/* rechtsvragen -- the content that matters; the matched legal question is highlighted. */
.rs-rvl {
  list-style: none;
  margin: 8px 0 5px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.rs-rv {
  position: relative;
  padding: 2px 0 2px 15px;
  color: var(--rs-muted);
  font-size: 15px;
}
.rs-rv::before { content: "–"; position: absolute; left: 2px; color: var(--rs-faint); }
.rs-rv--match {
  color: var(--rs-ink);
  background: var(--rs-brass-tint);
  border-left: 2px solid var(--rs-brass);
  border-radius: 0 4px 4px 0;
  padding: 3px 8px 3px 11px;
}
.rs-rv--match::before { content: none; }


/* Filter rail + results column: the search field sits atop the rows.
   Decimal-free px per this file's convention (see header). */
.rs-layout { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 20px; align-items: start; }
.rs-rail { position: sticky; top: 16px; display: flex; flex-direction: column; gap: 18px; font-size: 14px; }
/* Desktop: the two column wrappers collapse so all groups stack in the single sticky rail. */
.rs-rail__col { display: contents; }
.rs-results-col { min-width: 0; }
.rs-searchsheet { margin-bottom: 20px; }
.rs-side { position: sticky; top: calc(var(--rs-bar-h, 96px) + 16px); display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.rs-filters > .rs-rail { position: static; }
.rs-filters__summary { list-style: none; }
.rs-filters__summary::-webkit-details-marker { display: none; }

@media (max-width: 760px) {
  .ratio-search > div { padding-left: 16px; padding-right: 16px; }
  .rs-layout { grid-template-columns: 1fr; gap: 16px; }
  .rs-side { position: static; gap: 8px; }
  .rs-filters { position: static; border-top: 1px solid var(--rs-edge); border-bottom: 1px solid var(--rs-edge); }
  .rs-filters__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    padding: 10px 0;
    font-family: var(--rs-f-mono);
    font-size: 12px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--rs-muted);
  }
  .rs-filters__summary::after {
    content: "";
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid currentcolor;
    transition: transform 150ms;
  }
  .rs-filters[open] > .rs-filters__summary::after { transform: rotate(180deg); }
  .rs-filters[open] > .rs-rail { padding-bottom: 14px; }
  /* Two independent columns (Rechtsgebied+Instantie | Periode+Status), each sized to its own
     content so the short left column doesn't inherit the tall right column's height (no mid gap). */
  .rs-rail { position: static; flex-direction: row; align-items: flex-start; gap: 24px; }
  .rs-rail__col { display: flex; flex-direction: column; gap: 18px; flex: 1 1 0; min-width: 0; }
}
@media (min-width: 761px) {
  .rs-filters > .rs-filters__summary { display: none; }
  .rs-filters > .rs-rail { display: flex !important; }
  /* Modern engines hide closed-details content via this pseudo, not display. */
  .rs-filters::details-content { content-visibility: visible; display: contents; }
}
@media (prefers-reduced-motion: reduce) {
  .ratio-search * { transition: none; }
}

/* Faceted filter rail: the heftdesk-ui filter_group component (hd-fgroup), repainted for the paper
   rail -- mono uppercase headings, brass-tinted inputs, muted option rows, mono counts. */
.ratio-search .hd-fgroup { gap: 1px; }
.ratio-search .hd-fgroup__head {
  font-family: var(--rs-f-mono);
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--rs-soft);
  margin-bottom: 8px;
}
.ratio-search .hd-fgroup__opt { color: var(--rs-muted); gap: 8px; padding: 2px 0; cursor: pointer; }
.ratio-search .hd-fgroup__opt:hover { color: var(--rs-ink); }
.ratio-search .hd-fgroup__opt input { accent-color: var(--rs-brass); }
.ratio-search .hd-fgroup__label { font-size: 15px; }
.ratio-search .hd-fgroup__count {
  font-family: var(--rs-f-mono);
  font-size: 12px;
  color: var(--rs-faint);
}

/* Reranker status glyph inside the search bar (hot = solid, warming = slow pulse). */
.ratio-search .rs-rr { align-self: center; padding: 0 6px; font-size: 14px; line-height: 100%; }
.ratio-search .rs-rr--hot { color: var(--rs-brass); }
.ratio-search .rs-rr--warming { color: var(--rs-faint); }
@media (prefers-reduced-motion: no-preference) {
  .ratio-search .rs-rr--warming { animation: rs-rr-pulse 1800ms ease-in-out infinite; }
}
@keyframes rs-rr-pulse { 0%, 100% { opacity: 35%; } 50% { opacity: 85%; } }

/* Case preview: heftdesk-ui's dialog_host panel, widened for verbatim passages and capped in height so long
   ones scroll inside the panel (the component's panel is max-w-md, sized for confirm dialogs). */
.ratio-search .modal__panel { max-width: 760px; max-height: 86vh; overflow-y: auto; }
.rs-pv { display: flex; flex-direction: column; gap: 18px; }
.rs-pv__head { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding-right: 36px; }
.rs-pv__x { position: absolute; top: -6px; right: -8px; }
.rs-pv__ecli { font-family: var(--rs-f-mono); font-size: 14px; color: var(--rs-muted); margin: 0; }
.rs-pv__sec { display: flex; flex-direction: column; gap: 6px; }
.rs-pv__label {
  font-family: var(--rs-f-mono);
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--rs-soft);
  margin: 0;
}
.rs-pv__quote {
  margin: 0;
  padding: 2px 0 2px 14px;
  border-left: 2px solid var(--rs-edge);
  font-size: 15px;
  line-height: 155%;
  color: var(--rs-ink);
}
.rs-pv__quote--clamp {
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.rs-pv__more { margin-top: 2px; color: var(--rs-muted); }
.rs-pv__actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding-top: 4px; border-top: 1px solid var(--rs-rule); }
.rs-pv__spacer { flex: 1 1 auto; }