/* ═══════════════════════════════════════════════════════════════
   The directory, restyled onto the system.  (4.70.43)

   Approved comp: HRHS-directory-restyle-comp.html. A restyle in place, the
   way My listing was done in 4.70.27: same markup, same logic, same URLs,
   new skin. Every rule here is a skin over a class hrhs-core.css already
   styles, so this sheet depends on hrhs-system (tokens) and must print after
   hrhs-core — the router declares that; tests/dirrender.php prints the
   sheets in the router's order.

   Where core pins a control with !important (the kit repaints bare
   <button>s after our CSS), the pin is repeated here with the new value.
   A plain rule would lose to the old pin however late it printed.
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. The strip ──────────────────────────────────────────── */
.hrhs-fbar-band{background:var(--card);border-bottom:1px solid var(--line)}
.hrhs-fbar-band .hrhs-fbar{gap:12px;padding:14px 0}
.hrhs-fbar__search{height:48px;padding:0 14px;gap:10px;border:1px solid var(--line);border-radius:13px;
  background:var(--card);color:var(--faint);max-width:none}
.hrhs-fbar__search svg{color:var(--faint)}
.hrhs-fbar__search:focus-within{border-color:#B9C9DD;box-shadow:0 0 0 3px rgba(11,255,132,.14)}
.hrhs-fbar__in,.hrhs-fbar__in:focus,.hrhs-fbar__in:hover{font-size:15px;color:var(--ink)}
.hrhs-fbar__in::placeholder{color:var(--faint)}
/* Search: the system's dark button at the 13px radius every other primary
   button has. Pinned, because it is a bare <button>. */
.hrhs-fbar__go,.hrhs-fbar__go:hover,.hrhs-fbar__go:focus,.hrhs-fbar__go:active{
  height:48px;padding:0 22px;border-radius:13px;border:0;
  background:var(--ink)!important;color:#fff!important;
  font-size:14.5px;font-weight:700;box-shadow:none!important}
.hrhs-fbar__go:focus-visible{outline:2px solid var(--go)!important;outline-offset:2px}
body.hrhs-fbar-tight .hrhs-fbar__search,body.hrhs-fbar-tight .hrhs-fbar__go{height:42px}

.hrhs-fbar__tools{gap:10px}
/* The count says what it is counting, in the card eyebrows' mono caps. Not a
   third button label: no rule after it, the number in ink. */
.hrhs-fbar__count{font-family:inherit;font-size:13.5px;color:var(--muted);
  padding-right:0;margin-right:2px;border-right:0}
.hrhs-fbar__count b{color:var(--ink);font-weight:800;font-size:15px}
.hrhs-fbar__unit{font-style:normal;font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:11px;
  letter-spacing:.06em;text-transform:uppercase;margin-left:4px}
.hrhs-fbar__countcat{max-width:15ch}

/* Filters: a system outline button that goes ink when the drawer is open.
   Both states pinned — core pins them too, to the old colours. */
.hrhs-fbar__btn,.hrhs-fbar__btn:hover,.hrhs-fbar__btn:focus,.hrhs-fbar__btn:focus-visible,.hrhs-fbar__btn:active{
  height:44px;padding:0 15px;border-radius:12px;gap:8px;
  background-color:var(--card)!important;border:1px solid var(--line)!important;color:var(--ink)!important;
  font-size:14px;font-weight:600}
.hrhs-fbar__btn:hover{background-color:var(--tint)!important;border-color:var(--line)!important}
.hrhs-fbar__btn:focus-visible{outline:2px solid var(--go)!important;outline-offset:2px}
.hrhs-fbar__btn[aria-expanded="true"],.hrhs-fbar__btn[aria-expanded="true"]:hover,
.hrhs-fbar__btn[aria-expanded="true"]:focus,.hrhs-fbar__btn[aria-expanded="true"]:active{
  background-color:var(--ink)!important;border-color:var(--ink)!important;color:#fff!important}
/* The active-filter count is a green pip. Green is the system's "something is
   on": the Available now dot, the open-hours dot, the chosen plan. */
.hrhs-fbar__n{background:var(--green);color:#062B18;font-size:11.5px;font-weight:800;min-width:20px;height:20px;padding:0 6px}

/* Sort: the system select. */
.hrhs-fbar__tools .hrhs-fbar__sort,.hrhs-fbar__tools .hrhs-fbar__sort:hover{
  height:44px;padding:0 38px 0 14px;border-radius:12px;border:1px solid var(--line);
  background-color:var(--card);color:var(--ink);font-size:14px;font-weight:600;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 20 20'%3E%3Cpath d='M5 8l5 5 5-5' fill='none' stroke='%237488A1' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:12px 12px;
  appearance:none;-webkit-appearance:none}
.hrhs-fbar__tools .hrhs-fbar__sort:focus{border-color:#B9C9DD;box-shadow:0 0 0 3px rgba(11,255,132,.14);outline:0}
body.hrhs-fbar-tight .hrhs-fbar__sort{height:40px}

/* The view toggle: a segmented control on the tint, not two floating icons. */
.hrhs-fbar__tools .hrhs-viewtoggle{height:auto;border:1px solid var(--line);border-radius:12px;padding:3px;background:var(--tint);gap:2px;overflow:visible}
.hrhs-fbar__tools .hrhs-viewtoggle__btn{width:38px;height:36px;border-radius:9px;color:var(--muted);border:0}
.hrhs-fbar__tools .hrhs-viewtoggle__btn+.hrhs-viewtoggle__btn{border-left:0}
.hrhs-fbar__tools .hrhs-viewtoggle__btn:hover{background:var(--line-soft);color:var(--ink)}
.hrhs-fbar__tools .hrhs-viewtoggle__btn.is-active,.hrhs-fbar__tools .hrhs-viewtoggle__btn.is-active:hover{background:var(--ink);color:#fff}
.hrhs-fbar__tools .hrhs-viewtoggle__btn:focus-visible{outline:2px solid var(--go);outline-offset:2px}

body.hrhs-fbar-tight .hrhs-fbar-band{box-shadow:0 6px 20px -14px rgba(10,26,47,.5)}

/* ── 6. The strip on a phone ───────────────────────────────── */
/* Search and the Filters button on one row; the count, sort and the view
   toggle on the next. The toggle was clipped at the right edge at 390px
   before this — a 205px sort beside a Filters button and a toggle is wider
   than a phone — and the count had been dropped at 1180px, so a filtered
   phone page never said how many it found.
   display:contents lifts the tools out of their wrapper so the bar can lay
   the five controls out as two rows without the markup moving. */
@media (max-width:600px){
  .hrhs-fbar-band .hrhs-fbar{flex-wrap:wrap;gap:8px;padding:12px 0}
  .hrhs-fbar__tools{display:contents}
  /* 48px controls and 16px type in the fields: core's phone block sets both on
     every input and select so iOS does not zoom the page on focus, and the
     search field inherits them whatever height its box says. */
  .hrhs-fbar__search{order:1;flex:1 1 calc(100% - 90px);max-width:none;height:48px}
  .hrhs-fbar__in,.hrhs-fbar__in:focus{font-size:16px}
  .hrhs-fbar__go{display:none}
  .hrhs-fbar__btn,.hrhs-fbar__btn:hover,.hrhs-fbar__btn:focus,.hrhs-fbar__btn:active{order:2;flex:0 0 auto;height:48px;padding:0 14px;gap:6px}
  .hrhs-fbar__btnt{display:none}
  .hrhs-fbar__count{display:inline-block;order:3;flex:0 0 auto;font-size:13px;margin:0}
  /* The chips under the strip already name the trade; the sort needs the room. */
  .hrhs-fbar__counttrade{display:none}
  .hrhs-fbar__tools .hrhs-fbar__sort{order:4;flex:1 1 120px;width:auto;min-width:0;margin-left:auto;height:48px;padding:0 32px 0 12px;font-size:16px;background-position:right 11px center}
  .hrhs-fbar__tools .hrhs-viewtoggle{order:5;flex:0 0 auto;padding:3px}
  .hrhs-fbar__tools .hrhs-viewtoggle__btn{width:38px;height:40px}
  body.hrhs-fbar-tight .hrhs-fbar__search,body.hrhs-fbar-tight .hrhs-fbar__btn,body.hrhs-fbar-tight .hrhs-fbar__sort{height:44px}
}

/* ── The chips under the strip ─────────────────────────────── */
/* The only place the reader sees every filter at once without opening the
   drawer. White on a hairline, the label bold, the × in a tint circle. */
.hrhs-fchips{gap:8px;margin:0 0 18px}
.hrhs-fchip,.hrhs-fchip:hover{gap:6px;padding:6px 8px 6px 12px;border:1px solid var(--line);border-radius:999px;
  background:var(--card);color:var(--ink-2);font-size:12.5px;font-weight:500;text-decoration:none}
.hrhs-fchip:hover{border-color:#CBD6E4}
.hrhs-fchip b{font-weight:700;color:var(--ink);opacity:1}
.hrhs-fchip span[aria-hidden]{width:18px;height:18px;border-radius:50%;background:var(--tint);
  display:inline-grid;place-items:center;color:var(--muted);font-size:13px;line-height:1;opacity:1}
.hrhs-fchip:hover span[aria-hidden]{background:var(--line-soft);color:var(--ink)}
.hrhs-fchip--clear,.hrhs-fchip--clear:hover{background:transparent;border:1px dashed var(--line);color:var(--muted);padding:6px 12px}
.hrhs-fchip--clear:hover{color:var(--ink);border-style:solid}

/* ── 2. The drawer ─────────────────────────────────────────── */
body.hrhs-fsheet-on .hrhs-filter-bar{background:var(--card);gap:0;row-gap:0;
  border-left:1px solid var(--line);box-shadow:-18px 0 50px -20px rgba(10,26,47,.45)}
.hrhs-fsheet__scrim{background:rgba(10,26,47,.42)}
body.hrhs-fsheet-on .hrhs-fsheet__hd{border-bottom:1px solid var(--line);background:var(--card)}
.hrhs-fsheet__title{font-size:18px;font-weight:800;letter-spacing:-.025em;color:var(--ink)}
.hrhs-fsheet__x,.hrhs-fsheet__x:hover,.hrhs-fsheet__x:focus,.hrhs-fsheet__x:active{
  width:36px;height:36px;border-radius:10px;border:1px solid var(--line);
  background-color:var(--card)!important;color:var(--ink-2)!important;font-size:18px;box-shadow:none!important}
.hrhs-fsheet__x:hover{background-color:var(--tint)!important}
.hrhs-fsheet__x:focus-visible{outline:2px solid var(--go)!important;outline-offset:2px}

/* Available now: a card on the tint, the system switch. */
body.hrhs-fsheet-on .hrhs-filter-bar .hrhs-avfilter{gap:12px;border:1px solid var(--line);border-radius:13px;
  padding:12px 14px;background:var(--tint);margin:18px 0}
body.hrhs-fsheet-on .hrhs-filter-bar .hrhs-avfilter__t{font-size:14px;font-weight:700;color:var(--ink)}
body.hrhs-fsheet-on .hrhs-filter-bar .hrhs-avfilter__t span{font-size:12px;color:var(--muted);margin-top:1px}
body.hrhs-fsheet-on .hrhs-filter-bar .hrhs-avfilter__sw{width:42px;height:24px;background:var(--line)}
body.hrhs-fsheet-on .hrhs-filter-bar .hrhs-avfilter__sw i{width:18px;height:18px;box-shadow:0 1px 3px rgba(0,0,0,.2)}
body.hrhs-fsheet-on .hrhs-filter-bar .hrhs-avfilter input:checked~.hrhs-avfilter__sw{background:var(--go)}
body.hrhs-fsheet-on .hrhs-filter-bar .hrhs-avfilter input:checked~.hrhs-avfilter__sw i{transform:translateX(18px)}
body.hrhs-fsheet-on .hrhs-filter-bar .hrhs-avfilter input:focus-visible~.hrhs-avfilter__sw{outline:2px solid var(--go);outline-offset:3px}

/* Groups. */
body.hrhs-fsheet-on .hrhs-filter-bar .hrhs-fgrp{padding:14px 0;margin:0;border-top:1px solid var(--line-soft);border-bottom:0}
body.hrhs-fsheet-on .hrhs-filter-bar .hrhs-fgrp--last{padding-bottom:18px}
body.hrhs-fsheet-on .hrhs-filter-bar .hrhs-fgrp__lbl{display:flex;align-items:center;gap:8px;
  font-size:10.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
body.hrhs-fsheet-on .hrhs-filter-bar .hrhs-fgrp__n{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:10.5px;font-weight:600;
  color:var(--faint);background:var(--tint);border:1px solid var(--line-soft);border-radius:5px;padding:1px 6px;margin-left:0;letter-spacing:0}

/* The type-ahead: the system input. */
body.hrhs-fsheet-on .hrhs-filter-bar .hrhs-minisearch{height:40px;border:1px solid var(--line);border-radius:10px;
  padding:0 12px;font-size:13.5px;color:var(--ink);background:var(--card);margin-bottom:8px}
body.hrhs-fsheet-on .hrhs-filter-bar .hrhs-minisearch::placeholder{color:var(--faint)}
body.hrhs-fsheet-on .hrhs-filter-bar .hrhs-minisearch:focus{border-color:#B9C9DD;box-shadow:0 0 0 3px rgba(11,255,132,.14)}

/* The lists: a bordered scroll box, so the edge of the list is a line rather
   than a fade. The mask core used is off — a box that ends in a hairline does
   not need its last row dissolved to say there is more below. */
body.hrhs-fsheet-on .hrhs-filter-bar .hrhs-flist{max-height:236px;padding-right:0;border:1px solid var(--line);border-radius:12px;background:var(--card);
  -webkit-mask-image:none;mask-image:none}
body.hrhs-fsheet-on .hrhs-filter-bar .hrhs-flist--short{max-height:none}
body.hrhs-fsheet-on .hrhs-filter-bar .hrhs-flist__none{padding:10px 12px;font-size:13px;color:var(--muted)}

/* Rows. What "chosen" looks like is the whole change: a green bed, a tick, the
   count turning green — not a solid navy block, which reads as a button. */
body.hrhs-fsheet-on .hrhs-filter-bar .hrhs-frow__in{justify-content:flex-start;gap:10px;min-height:0;padding:10px 12px;border-radius:0;
  border-bottom:1px solid var(--line-soft);font-size:14px;color:var(--ink-2)}
body.hrhs-fsheet-on .hrhs-filter-bar .hrhs-frow:last-child .hrhs-frow__in{border-bottom:0}
body.hrhs-fsheet-on .hrhs-filter-bar .hrhs-frow__in::before{content:"\2713";flex:0 0 auto;width:18px;height:18px;border-radius:5px;
  border:1.5px solid var(--line);background:var(--card);color:transparent;font-size:11px;font-weight:800;line-height:15px;text-align:center}
body.hrhs-fsheet-on .hrhs-filter-bar .hrhs-frow__t{flex:1 1 auto}
body.hrhs-fsheet-on .hrhs-filter-bar .hrhs-frow__n{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:11.5px;color:var(--faint);opacity:1}
body.hrhs-fsheet-on .hrhs-filter-bar .hrhs-frow:hover .hrhs-frow__in{background:var(--tint)}
body.hrhs-fsheet-on .hrhs-filter-bar .hrhs-frow input:checked~.hrhs-frow__in{background:var(--go-bed);color:var(--ink);font-weight:600}
body.hrhs-fsheet-on .hrhs-filter-bar .hrhs-frow input:checked~.hrhs-frow__in::before{background:var(--go);border-color:var(--go);color:#fff}
body.hrhs-fsheet-on .hrhs-filter-bar .hrhs-frow input:checked~.hrhs-frow__in .hrhs-frow__n{color:var(--go);opacity:1}
body.hrhs-fsheet-on .hrhs-filter-bar .hrhs-frow input:focus-visible~.hrhs-frow__in{outline:2px solid var(--go);outline-offset:-2px}
/* A trade with nobody in it is greyed, not removed. A trade that vanishes when
   the area changes is a trade the reader thinks we do not cover. */
body.hrhs-fsheet-on .hrhs-filter-bar .hrhs-frow--zero .hrhs-frow__in{color:var(--faint)}
body.hrhs-fsheet-on .hrhs-filter-bar .hrhs-frow--zero .hrhs-frow__n{color:var(--faint)}

/* Rating: four equal tiles. */
body.hrhs-fsheet-on .hrhs-filter-bar .hrhs-opts{gap:7px;flex-wrap:nowrap}
body.hrhs-fsheet-on .hrhs-filter-bar .hrhs-opt{flex:1 1 0;min-width:0}
body.hrhs-fsheet-on .hrhs-filter-bar .hrhs-opt__in{width:100%;min-height:38px;padding:0 6px;border:1px solid var(--line);border-radius:10px;
  background:var(--card);color:var(--ink-2);font-size:13px;font-weight:600}
body.hrhs-fsheet-on .hrhs-filter-bar .hrhs-opt:hover .hrhs-opt__in{background:var(--tint)}
body.hrhs-fsheet-on .hrhs-filter-bar .hrhs-opt input:checked~.hrhs-opt__in{background:var(--ink);border-color:var(--ink);color:#fff}
body.hrhs-fsheet-on .hrhs-filter-bar .hrhs-opt input:focus-visible~.hrhs-opt__in{outline:2px solid var(--go);outline-offset:2px}

/* The footer: two system buttons. Clear as the outline, the green one saying
   how many pros it will show. Both pinned — core pins them to the old skin. */
body.hrhs-fsheet-on .hrhs-fsheet__foot{gap:10px;background:var(--tint);border-top:1px solid var(--line)}
body.hrhs-fsheet-on .hrhs-fsheet__clear,body.hrhs-fsheet-on .hrhs-fsheet__clear:hover,
body.hrhs-fsheet-on .hrhs-fsheet__clear:focus,body.hrhs-fsheet-on .hrhs-fsheet__clear:active{
  height:46px;border-radius:13px;font-size:14.5px;font-weight:700;
  background-color:var(--card)!important;border:1px solid var(--line)!important;color:var(--ink)!important;box-shadow:none!important;transform:none}
body.hrhs-fsheet-on .hrhs-fsheet__clear:hover{background-color:#fff!important;border-color:#CBD6E4!important}
body.hrhs-fsheet-on .hrhs-fsheet__clear:focus-visible{outline:2px solid var(--go)!important;outline-offset:2px}
body.hrhs-fsheet-on .hrhs-fsheet__apply,body.hrhs-fsheet-on .hrhs-fsheet__apply:hover,
body.hrhs-fsheet-on .hrhs-fsheet__apply:focus,body.hrhs-fsheet-on .hrhs-fsheet__apply:active{
  height:46px;border-radius:13px;font-size:14.5px;font-weight:700;border:0;
  background:var(--green)!important;border-color:var(--green)!important;color:var(--ink)!important;
  box-shadow:0 4px 18px rgba(11,255,132,.36)!important;transform:none}
body.hrhs-fsheet-on .hrhs-fsheet__apply:focus-visible{outline:2px solid var(--go)!important;outline-offset:2px}

/* Edge to edge.
   core sets `body.hrhs-fsheet-on .hrhs-filter-bar > * { width: 100% }` on
   every child of the panel. With that, the header's and footer's negative
   margins moved them 22px left but left them 340px wide — a 44px gap on the
   right, where the city counts showed through under Show results and the X
   sat inboard of the corner. Reported by Angel on 4.70.44. The two bars are
   named at (0,3,0) — one more than the wildcard — and sized to the padding
   they cancel. */
@media (min-width:781px){
  body.hrhs-fsheet-on .hrhs-filter-bar{width:min(400px,92vw);padding:0 22px 22px}
  body.hrhs-fsheet-on .hrhs-filter-bar>.hrhs-fsheet__hd{width:calc(100% + 44px);margin:0 -22px 0;padding:18px 22px 14px}
  body.hrhs-fsheet-on .hrhs-filter-bar>.hrhs-fsheet__foot{width:calc(100% + 44px);margin:auto -22px -22px;padding:14px 22px;bottom:-22px}
}
@media (max-width:780px){
  body.hrhs-fsheet-on .hrhs-filter-bar{padding:0 20px calc(18px + env(safe-area-inset-bottom));border-left:0;
    border-radius:18px 18px 0 0;box-shadow:0 -18px 50px -20px rgba(10,26,47,.45)}
  body.hrhs-fsheet-on .hrhs-filter-bar::before{margin:10px auto 0;background:#D6DFEC}
  body.hrhs-fsheet-on .hrhs-filter-bar>.hrhs-fsheet__hd{width:calc(100% + 40px);margin:0 -20px 0;padding:12px 20px 14px}
  body.hrhs-fsheet-on .hrhs-filter-bar>.hrhs-fsheet__foot{width:calc(100% + 40px);margin:0 -20px calc(-18px - env(safe-area-inset-bottom));padding:14px 20px calc(14px + env(safe-area-inset-bottom));
    bottom:calc(-18px - env(safe-area-inset-bottom));border-top:1px solid var(--line)}
}

/* ── 3. The lock screen ────────────────────────────────────── */
/* The panel is the system card; the lock sits in a green bed; Join free is the
   green button and Sign in the outline — the pair every other screen uses. */
.hrhs-dirlock{min-height:520px}
.hrhs-dirlock__ghosts{filter:blur(6px);opacity:.55}
.hrhs-ghost.hrhs-card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:18px;height:230px;box-shadow:none}
.hrhs-ghost__cover{width:44px;height:44px;border-radius:12px;background:var(--line-soft);margin:0 0 10px}
.hrhs-ghost__row{height:12px;border-radius:6px;background:var(--line-soft);margin:0 0 10px}
.hrhs-ghost__row--wide{height:18px;width:70%}
.hrhs-ghost__row--short{width:40%}
.hrhs-dirlock__panel{top:70px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--lift2);padding:30px 30px 24px}
.hrhs-dirlock__ic{width:56px;height:56px;border-radius:50%;background:var(--go-bed);color:var(--go);display:grid;place-items:center;margin:0 auto 14px}
.hrhs-dirlock__ic svg{width:26px;height:26px;color:inherit;margin:0;display:block}
.hrhs-dirlock__panel h2{font-size:24px;font-weight:800;letter-spacing:-.03em;color:var(--ink);margin:0 0 8px}
.hrhs-dirlock__panel p{font-size:14.5px;line-height:1.6;color:var(--ink-2);max-width:40ch;margin:0 auto 18px}
.hrhs-dirlock__cta{gap:10px;margin-top:0}
.hrhs-dirlock__cta .btn{text-decoration:none}
.hrhs-dirlock__cta .btn:hover{text-decoration:none}
.hrhs-dirlock__cta .btn--go:hover{background:#00F07A}
.hrhs-dirlock__back{margin:14px auto 0!important;font-size:13px}
.hrhs-dirlock__back a,.hrhs-dirlock__back a:hover{color:var(--muted);text-decoration:underline;text-underline-offset:3px}
.hrhs-dirlock__back a:hover{color:var(--ink)}
@media (max-width:640px){
  .hrhs-dirlock__panel{top:40px;padding:24px 20px 20px}
  .hrhs-dirlock__cta{flex-direction:column}
  .hrhs-dirlock__cta .btn{width:100%}
}

/* ── 5. Pagination ─────────────────────────────────────────── */
/* Ink for the current page, hairline tiles for the rest. The numbers were
   blue — every anchor on the page is, unless something says otherwise. */
.hrhs-pagination{gap:6px;margin-top:26px;padding-bottom:6px}
.hrhs-pagination__btn,.hrhs-pagination__btn:hover,.hrhs-pagination__btn:focus{min-width:40px;height:40px;padding:0 12px;border-radius:11px;
  border:1px solid var(--line);background:var(--card);color:var(--ink-2);font-size:13.5px;font-weight:600;text-decoration:none}
.hrhs-pagination__btn:hover{border-color:#CBD6E4;background:var(--tint);color:var(--ink)}
.hrhs-pagination__btn:focus-visible{outline:2px solid var(--go);outline-offset:2px}
.hrhs-pagination__btn.is-current,.hrhs-pagination__btn.is-current:hover{background:var(--ink);border-color:var(--ink);color:#fff}
.hrhs-pagination__gap{color:var(--faint);padding:0 4px}

/* ── The empty state, on the same card ─────────────────────── */
.hrhs-empty{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--lift)}

/* ── Anchors on this page ──────────────────────────────────── */
/* hrhs-core.css paints every anchor under .hrhs-content in the legacy blue
   at (0,4,1) — `.hrhs-content a:not(.hrhs-btn):not(.hrhs-chip):not(...)` —
   and rings focus in the same blue with !important. That is the rule behind
   the blue page numbers and the blue Back link in the screenshots. The
   directory's own anchors are named here at the same weight — the :not(.hrhs-btn)
   on each is what lifts them to (0,4,1) — and later, and the
   focus ring is pinned to the system green. Nothing is retyped from above:
   these set colour only. */
.hrhs-content .hrhs-pagination a.hrhs-pagination__btn:not(.is-current),
.hrhs-content .hrhs-pagination a.hrhs-pagination__btn:not(.is-current):visited{color:var(--ink-2)}
.hrhs-content .hrhs-pagination a.hrhs-pagination__btn:not(.is-current):hover{color:var(--ink)}
.hrhs-content .hrhs-pagination a.hrhs-pagination__btn.is-current:not(.hrhs-btn),
.hrhs-content .hrhs-pagination a.hrhs-pagination__btn.is-current:not(.hrhs-btn):hover{color:#fff}
.hrhs-content .hrhs-fchips a.hrhs-fchip:not(.hrhs-fchip--clear),
.hrhs-content .hrhs-fchips a.hrhs-fchip:not(.hrhs-fchip--clear):visited,
.hrhs-content .hrhs-fchips a.hrhs-fchip:not(.hrhs-fchip--clear):hover{color:var(--ink-2)}
.hrhs-content .hrhs-fchips a.hrhs-fchip--clear:not(.hrhs-btn),
.hrhs-content .hrhs-fchips a.hrhs-fchip--clear:not(.hrhs-btn):visited{color:var(--muted)}
.hrhs-content .hrhs-fchips a.hrhs-fchip--clear:not(.hrhs-btn):hover{color:var(--ink)}
.hrhs-content .hrhs-dirlock .hrhs-dirlock__back a:not(.hrhs-btn),
.hrhs-content .hrhs-dirlock .hrhs-dirlock__back a:not(.hrhs-btn):visited{color:var(--muted)}
.hrhs-content .hrhs-dirlock .hrhs-dirlock__back a:not(.hrhs-btn):hover{color:var(--ink)}
.hrhs-content .hrhs-dirlock .hrhs-dirlock__cta a.btn--go:not(.hrhs-btn),
.hrhs-content .hrhs-dirlock .hrhs-dirlock__cta a.btn--go:not(.hrhs-btn):visited,
.hrhs-content .hrhs-dirlock .hrhs-dirlock__cta a.btn--go:not(.hrhs-btn):hover{color:var(--ink)}
.hrhs-content .hrhs-dirlock .hrhs-dirlock__cta a.btn--out:not(.hrhs-btn),
.hrhs-content .hrhs-dirlock .hrhs-dirlock__cta a.btn--out:not(.hrhs-btn):visited,
.hrhs-content .hrhs-dirlock .hrhs-dirlock__cta a.btn--out:not(.hrhs-btn):hover{color:var(--ink)}
.hrhs-content .hrhs-fbar__tools a.hrhs-viewtoggle__btn:not(.hrhs-btn),
.hrhs-content .hrhs-fbar__tools a.hrhs-viewtoggle__btn:not(.hrhs-btn):visited{color:var(--muted)}
.hrhs-content .hrhs-fbar__tools a.hrhs-viewtoggle__btn:not(.hrhs-btn):hover{color:var(--ink)}
.hrhs-content .hrhs-fbar__tools a.hrhs-viewtoggle__btn.is-active:not(.hrhs-btn),
.hrhs-content .hrhs-fbar__tools a.hrhs-viewtoggle__btn.is-active:not(.hrhs-btn):hover{color:#fff}
.hrhs-content .hrhs-fsheet__foot a.hrhs-fsheet__clear:not(.hrhs-btn),
.hrhs-content .hrhs-fsheet__foot a.hrhs-fsheet__clear:not(.hrhs-btn):visited,
.hrhs-content .hrhs-fsheet__foot a.hrhs-fsheet__clear:not(.hrhs-btn):hover{color:var(--ink)!important}
.hrhs-content .hrhs-fbar-band a:focus-visible,
.hrhs-content .hrhs-fchips a:focus-visible,
.hrhs-content .hrhs-pagination a:focus-visible,
.hrhs-content .hrhs-dirlock a:focus-visible,
.hrhs-content .hrhs-fbar-band button:focus-visible,
.hrhs-content #hrhs-dirfilters a:focus-visible,
.hrhs-content #hrhs-dirfilters button:focus-visible{outline:2px solid var(--go)!important;outline-offset:2px}