@import url('design-system.css');

:root {
  /* The landing is one 1180px reading column. A results page carries a rail
     PLUS a multi-column grid, so it needs more room — but it keeps the same
     gutter so the two pages align at the edges of the viewport. */
  --dashboard-max: 1340px;
  --rail-w: 268px;
}

body { font-size: 16px; line-height: 1.55; }
input { font-family: inherit; }
::selection { background: var(--color-red); color: #fff; }

.results-wrap { width: 100%; max-width: var(--dashboard-max); margin: 0 auto; padding: 0 var(--gutter); }

.results { padding: clamp(1.4rem, 2.6vw, 2.2rem) 0 clamp(3rem, 6vw, 5rem); }
.shell { display: grid; grid-template-columns: var(--rail-w) minmax(0, 1fr); gap: clamp(20px, 2.4vw, 34px); align-items: start; }


/* ── FILTER RAIL ────────────────────────────────────────────────
   The landing's search card, turned vertical. Same border, same radius,
   same shadow, same :focus-within response — deliberately the same object,
   because it is the same job.

   No translateY on :focus-within here (the landing card lifts 1px): this one
   is position: sticky, and a transform on a sticky element makes the slider
   thumb jump under the cursor.
─────────────────────────────────────────────────────────────── */
.rail {
  position: sticky; top: calc(var(--nav-h) + 18px);
  background: var(--color-bg); border: 1px solid var(--color-rule-mid); border-radius: var(--radius-xl); box-shadow: var(--shadow-md);
  padding: 6px;
  transition: box-shadow var(--t2) var(--ease), border-color var(--t2) var(--ease);
}
.rail:focus-within { box-shadow: var(--shadow-lg); border-color: var(--color-rule-strong); }

/* The rail NEVER scrolls internally — a scrollbar inside a search form hides
   controls behind an edge the user has no reason to expect. When the expanded
   form is taller than the viewport it simply stops being sticky and scrolls
   with the page instead. The class is applied by the script, which measures. */
.rail.rail--tall { position: static; }

.rail-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 12px 16px 11px; }
.rail-title { font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-ink-dim); }
.rail-count { font-size: 11.5px; font-weight: 640; color: var(--color-red); font-variant-numeric: tabular-nums; }
.rail-count[hidden] { display: none; }

/* Bottom-sheet grab handle — mobile only. */
.rail-handle { display: none; padding: 10px 0 4px; }
.rail-handle span { display: block; width: 38px; height: 4px; border-radius: 4px; background: var(--color-rule-strong); margin: 0 auto; }

/* Filter cell — the landing's .seg atoms (label + borderless select + chevron),
   stacked instead of sitting side by side. The horizontal card's `.seg + .seg`
   divider is replaced by explicit hairlines so a wrapping cell can't lose it. */
.f-cell { padding: 10px 16px; border-radius: var(--radius-md); transition: background var(--t2) var(--ease); min-width: 0; }
.f-rule { border: none; border-top: 1px solid var(--color-rule); margin: 2px 10px; }
.seg-label { display: block; font-size: 10.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-ink-dim); margin-bottom: 3px; }
.seg-control { position: relative; display: flex; align-items: center; }
.seg-control select { appearance: none; -webkit-appearance: none; width: 100%; background: transparent; border: none; outline: none;
  font-family: var(--f-body); font-size: 15px; font-weight: 560; color: var(--color-ink); padding-right: 18px;
  text-overflow: ellipsis; overflow: hidden; white-space: nowrap; cursor: pointer; }
.seg-control .chev { position: absolute; right: 0; width: 11px; height: 11px; color: var(--color-ink-dim); pointer-events: none; }

/* A cell whose value is not the default gets a tinted surface + a red left tick,
   so "what am I actually filtering by" is answerable without reading every control. */
.f-cell.set { background: var(--color-surface-raised); box-shadow: inset 1px 0 0 var(--color-red); }

/* range sliders — verbatim from the landing */
.slider-top { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 14px; }
.slider-top label { font-size: 10.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-ink-dim); }
.slider-val { font-size: 13px; font-weight: 620; color: var(--color-ink); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.range { position: relative; height: 18px; display: flex; align-items: center; }
.range-track { position: absolute; left: 2px; right: 2px; height: 4px; border-radius: 4px; background: var(--color-rule-mid); }
.range-fill { position: absolute; height: 4px; border-radius: 4px; background: var(--color-red); transition: background var(--t2) var(--ease); }
/* Both thumbs parked at the bounds means nothing is being constrained. A red
   bar spanning the whole track would claim an active filter the query does not
   have — and would contradict the .f-cell.set tick, which correctly stays off. */
.range-fill.idle { background: var(--color-rule-mid); }
.range input { position: absolute; left: 0; width: 100%; height: 4px; margin: 0; appearance: none; -webkit-appearance: none; background: transparent; pointer-events: none; }
.range input::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.28), inset 0 0 0 1px var(--color-rule-strong); cursor: pointer; pointer-events: all;
  transition: transform var(--t1) var(--spring), box-shadow var(--t2) var(--ease); }
.range input::-webkit-slider-thumb:active { transform: scale(1.05); }
.range input::-moz-range-thumb { width: 18px; height: 18px; border: none; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.28), inset 0 0 0 1px var(--color-rule-strong); cursor: pointer; pointer-events: all; }

/* advanced toggle + expand — verbatim from the landing, vertical */
.flt-bar { display: flex; justify-content: center; margin-top: 4px; padding-top: 8px; border-top: 1px solid var(--color-rule); }
.flt-toggle { display: inline-flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 560; color: var(--color-ink-mid);
  padding: 6px 12px; border-radius: var(--radius-pill); transition: color var(--t2) var(--ease), background var(--t2) var(--ease), transform var(--t1) var(--spring); }
.flt-toggle .ico { width: 15px; height: 15px; color: var(--color-ink-mid); }
.flt-toggle .chev { width: 11px; height: 11px; transition: transform var(--t2) var(--ease); }
/* Filters set inside the collapsed panel are otherwise invisible: the .f-cell
   tick that marks them is itself hidden. Without this the rail can show no
   active filter while the result set is silently constrained. */
.flt-toggle .n { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 6px;
  border-radius: var(--radius-pill); background: var(--color-red-tint); color: var(--color-red);
  font-size: 10.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.flt-toggle .n[hidden] { display: none; }
.flt-toggle.open .chev { transform: rotate(180deg); }
.flt-toggle:active { transform: scale(0.97); }

/* Collapsed is collapsed for the keyboard too: without visibility the eight
   selects inside stay tab-focusable behind a zero-height clip. */
.flt-expand { overflow: hidden; max-height: 0; opacity: 0; visibility: hidden;
  transition: max-height var(--t3) var(--ease), opacity var(--t2) var(--ease), visibility 0s linear var(--t3); }
.flt-expand.open { max-height: 900px; opacity: 1; visibility: visible;
  transition: max-height var(--t3) var(--ease), opacity var(--t2) var(--ease), visibility 0s; }
.flt-inner { transform: scale(0.98); transform-origin: top center; transition: transform var(--t3) var(--ease); padding-top: 4px; }
.flt-expand.open .flt-inner { transform: scale(1); }

.rail-actions { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; padding: 10px 6px 4px; border-top: 1px solid var(--color-rule); }
.rail-go { width: 100%; height: 46px; display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  background: var(--color-red); color: #fff; font-size: 14.5px; font-weight: 640; letter-spacing: 0.02em; border-radius: var(--radius-md);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.18);
  transition: background var(--t2) var(--ease), transform var(--t1) var(--ease); }
.rail-go:active { transform: scale(0.98); }
.rail-go svg { transition: transform var(--t2) var(--ease); }
.rail-clear { font-size: 13px; font-weight: 560; color: var(--color-ink-mid); padding: 10px 14px; border-radius: var(--radius-md);
  transition: color var(--t2) var(--ease), background var(--t2) var(--ease), transform var(--t1) var(--spring); }
.rail-clear:active { transform: scale(0.97); }


/* ── RESULTS HEAD ───────────────────────────────────────────── */
/* position + z-index are load-bearing, not decoration. .rhead carries .rise,
   whose `forwards` animation leaves transform: translateY(0) applied for good —
   and any transform creates a stacking context. That confines the sort menu's
   z-index to this element's own level, so the later, position: relative cards
   paint over it. Lifting the whole header above the grid fixes it at the level
   where the containment actually happens. */
.rhead { position: relative; z-index: 20;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem 1.4rem; flex-wrap: wrap; }
.rcount { font-family: var(--f-display); font-size: clamp(1.35rem, 2.4vw, 1.75rem); font-weight: 700; letter-spacing: -0.03em; line-height: 1.1;
  font-variant-numeric: tabular-nums; }
.rcount .u { color: var(--color-ink-mid); font-weight: 600; font-size: 0.8em; letter-spacing: -0.01em; margin-left: 7px; }

.rctl { display: flex; align-items: center; gap: 8px; }

/* sort — a pill in the same family as the landing's .chip */
.sort { position: relative; }
.sort-btn { display: inline-flex; align-items: center; gap: 9px; font-size: 13.5px; font-weight: 560; color: var(--color-ink);
  padding: 9px 15px; border-radius: var(--radius-pill); background: var(--color-surface); box-shadow: inset 0 0 0 1px var(--color-rule);
  transition: box-shadow var(--t2) var(--ease), background var(--t2) var(--ease), transform var(--t1) var(--spring); }
.sort-btn:active { transform: scale(0.97); }
.sort-btn .chev { width: 10px; height: 10px; color: var(--color-ink-dim); transition: transform var(--t2) var(--ease); }
.sort-btn.open .chev { transform: rotate(180deg); }
/* visibility, not opacity alone: an invisible menu that is still `visible` keeps
   its five buttons in the tab order, so a keyboard user walks through a closed
   menu while aria-expanded says it is shut. Delayed by the fade so the closing
   animation still plays. */
.sort-menu { position: absolute; right: 0; top: calc(100% + 7px); min-width: 232px; z-index: 60;
  background: var(--color-bg); border: 1px solid var(--color-rule-mid); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); padding: 5px;
  opacity: 0; visibility: hidden; transform: translateY(-6px) scale(0.97); transform-origin: top right; pointer-events: none;
  transition: opacity var(--t2) var(--ease), transform var(--t2) var(--ease), visibility 0s linear var(--t2); }
.sort-menu.open { opacity: 1; visibility: visible; transform: none; pointer-events: auto;
  transition: opacity var(--t2) var(--ease), transform var(--t2) var(--ease), visibility 0s; }
.sort-opt { display: block; width: 100%; text-align: left; font-size: 13.5px; font-weight: 500; color: var(--color-ink-mid);
  padding: 9px 12px; border-radius: var(--radius-sm); transition: background var(--t2) var(--ease), color var(--t2) var(--ease); }
.sort-opt.on { color: var(--color-ink); font-weight: 620; background: var(--color-surface); }

/* view toggle */
.vt { display: inline-flex; gap: 2px; padding: 3px; background: var(--color-surface); border-radius: var(--radius-pill); box-shadow: inset 0 0 0 1px var(--color-rule); }
.vt-btn { width: 36px; height: 32px; display: grid; place-items: center; border-radius: var(--radius-pill); color: var(--color-ink-dim);
  transition: background var(--t2) var(--ease), color var(--t2) var(--ease), box-shadow var(--t2) var(--ease); }
.vt-btn.on { background: var(--color-bg); color: var(--color-ink); box-shadow: var(--shadow-sm); }


/* ── ACTIVE FILTER CHIPS ────────────────────────────────────────
   The landing's .chip, plus a remove affordance. Redundant with the rail
   by design: this is the one-click undo path, and it is the loudest visual
   echo of the page the visitor just came from.
─────────────────────────────────────────────────────────────── */
.chiprow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 16px; }
.chiprow:empty { display: none; }
.chip { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 500; color: var(--color-ink-mid);
  padding: 7px 8px 7px 14px; border-radius: var(--radius-pill); background: var(--color-surface); box-shadow: inset 0 0 0 1px var(--color-rule);
  transition: color var(--t2) var(--ease), box-shadow var(--t2) var(--ease), background var(--t2) var(--ease), transform var(--t1) var(--ease); }
.chip:active { transform: scale(0.96); }
.chip .x { width: 17px; height: 17px; display: grid; place-items: center; border-radius: 50%; color: var(--color-ink-dim);
  transition: background var(--t2) var(--ease), color var(--t2) var(--ease); }
.chip .x svg { width: 8px; height: 8px; }
.chip-clear { font-size: 13px; font-weight: 560; color: var(--color-ink-mid); padding: 7px 12px; border-radius: var(--radius-pill);
  transition: color var(--t2) var(--ease), background var(--t2) var(--ease); }

.rdivider { border: none; border-top: 1px solid var(--color-rule); margin: 18px 0 20px; }


/* ── RESULTS GRID ───────────────────────────────────────────────
   The container only; the card is listing-card.css's.
─────────────────────────────────────────────────────────────── */
.listing-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(272px, 1fr)); gap: 18px; }
.listing-grid.is-list { grid-template-columns: 1fr; gap: 12px; }


/* ── SKELETONS ──────────────────────────────────────────────────
   Card-shaped, never a spinner. Same shimmer as the landing's proof slot.
─────────────────────────────────────────────────────────────── */
.sk-card { background: var(--color-bg); border: 1px solid var(--color-rule); border-radius: var(--radius-xl); box-shadow: var(--shadow-sm); padding: 10px; }
.sk-ph { aspect-ratio: 4 / 3; border-radius: var(--radius-lg); }
.sk-l { height: 12px; border-radius: 6px; margin: 0 6px; }
.sk-l--make { width: 32%; height: 9px; margin-top: 15px; }
.sk-l--model { width: 78%; height: 17px; margin-top: 10px; }
.sk-l--spec { width: 62%; height: 11px; margin-top: 12px; }
.sk-l--price { width: 45%; height: 15px; margin-top: 26px; margin-left: auto; margin-right: 6px; }

.shimmer {
  background: linear-gradient(90deg, var(--color-surface) 25%, var(--color-surface-raised) 37%, var(--color-surface) 63%);
  background-size: 400% 100%;
  animation: shimmer 1.4s ease-in-out infinite;
}
@keyframes shimmer {
  from { background-position: 100% 50%; }
  to   { background-position: 0 50%; }
}


/* ── EMPTY STATE ────────────────────────────────────────────────
   No illustration, no encouragement. What happened, and the one control
   that undoes it.
─────────────────────────────────────────────────────────────── */
/* The empty state is rendered into the grid, so it has to opt out of the
   column track it would otherwise be laid into. */
.listing-grid.is-empty { grid-template-columns: 1fr; }
.empty { grid-column: 1 / -1; padding: clamp(2.6rem, 7vw, 4.5rem) 0; text-align: center; }
.empty h2 { font-family: var(--f-display); font-size: clamp(1.2rem, 2.4vw, 1.45rem); font-weight: 700; letter-spacing: -0.025em; }
.empty p { font-size: 14px; color: var(--color-ink-mid); margin: 0.7rem auto 0; max-width: 44ch; }
.empty-cta { display: inline-block; margin-top: 1.5rem; font-size: 14px; font-weight: 600; color: var(--color-ink);
  padding: 10px 20px; border-radius: var(--radius-pill); box-shadow: inset 0 0 0 1.5px var(--color-rule-strong);
  transition: box-shadow var(--t2) var(--ease), transform var(--t1) var(--ease); }
.empty-cta:active { transform: scale(0.97); }


/* ── LOAD MORE ──────────────────────────────────────────────── */
.more { display: flex; flex-direction: column; align-items: center; gap: 11px;
  margin-top: 28px; padding-top: 26px; border-top: 1px solid var(--color-rule); }
.more[hidden] { display: none; }
.more-btn { display: inline-flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 600; color: var(--color-ink);
  padding: 11px 26px; border-radius: var(--radius-pill); box-shadow: inset 0 0 0 1.5px var(--color-rule-strong);
  transition: box-shadow var(--t2) var(--ease), transform var(--t1) var(--ease), color var(--t2) var(--ease); }
.more-btn:active { transform: scale(0.97); }
.more-btn[disabled] { color: var(--color-ink-dim); cursor: default; }
.more-count { font-size: 12.5px; color: var(--color-ink-xdim); font-variant-numeric: tabular-nums; }


/* ── MOBILE FILTER SHEET ────────────────────────────────────── */
.fab { display: none; position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 110;
  align-items: center; gap: 9px; font-size: 14px; font-weight: 640; color: var(--color-ink);
  padding: 12px 22px; border-radius: var(--radius-pill); background: rgba(255,255,255,0.94);
  backdrop-filter: saturate(180%) blur(16px); -webkit-backdrop-filter: saturate(180%) blur(16px);
  box-shadow: var(--shadow-lg), inset 0 0 0 1px var(--color-rule-mid);
  transition: opacity var(--t2) var(--ease), transform var(--t2) var(--ease); }
.fab .n { display: inline-grid; place-items: center; min-width: 19px; height: 19px; padding: 0 6px;
  border-radius: var(--radius-pill); background: var(--color-red); color: #fff; font-size: 11px; font-weight: 700;
  font-variant-numeric: tabular-nums; }
.fab .n[hidden] { display: none; }
.fab.hide { opacity: 0; transform: translate(-50%, 12px); pointer-events: none; }

.scrim { position: fixed; inset: 0; z-index: 115; background: rgba(22,19,15,0.34); opacity: 0; pointer-events: none;
  transition: opacity var(--t3) var(--ease); }
.scrim.on { opacity: 1; pointer-events: auto; }


/* ── REVEAL ─────────────────────────────────────────────────── */
.rise { opacity: 0; transform: translateY(14px); animation: rise var(--t3) var(--ease) forwards; animation-delay: var(--d, 0ms); }
@keyframes rise { to { opacity: 1; transform: translateY(0); } }
.reveal { opacity: 0; transform: translateY(16px); transition: opacity var(--t3) var(--ease), transform var(--t3) var(--ease); transition-delay: var(--d, 0ms); }
.reveal.in { opacity: 1; transform: translateY(0); }


/* ── FOCUS ──────────────────────────────────────────────────── */
.rail-go:focus-visible, .rail-clear:focus-visible, .flt-toggle:focus-visible, .sort-btn:focus-visible,
.sort-opt:focus-visible, .vt-btn:focus-visible, .chip:focus-visible, .chip-clear:focus-visible,
.more-btn:focus-visible, .empty-cta:focus-visible, .fab:focus-visible {
  outline: 2px solid var(--color-red); outline-offset: 2px;
}
.seg-control select:focus-visible, .range input:focus-visible {
  outline: 2px solid var(--color-red); outline-offset: 3px; border-radius: 6px;
}


/* ── RESPONSIVE ─────────────────────────────────────────────── */
@media (max-width: 1120px) {
  :root { --rail-w: 244px; }
}

/* Below this the rail becomes a bottom sheet: a 240px rail beside a
   single-column grid wastes more width than it earns. */
@media (max-width: 960px) {
  .shell { grid-template-columns: minmax(0, 1fr); }

  /* The one place the form does scroll: a bottom sheet cannot be taller than
     the phone, so there is no layout that avoids it. .rail--tall is irrelevant
     here and is overridden back to fixed. */
  /* Off-screen must also mean out of the tab order — otherwise every control in
     the closed sheet is still reachable by keyboard, below the fold of a page
     that shows no filters at all. */
  .rail, .rail.rail--tall { position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 120;
    max-height: 86vh; overflow-y: auto; overscroll-behavior: contain;
    max-width: none; padding: 0 6px 6px;
    border: none; border-top: 1px solid var(--color-rule-mid);
    border-radius: var(--radius-xl) var(--radius-xl) 0 0; box-shadow: var(--shadow-lg);
    transform: translateY(101%); visibility: hidden;
    transition: transform var(--t3) var(--ease), visibility 0s linear var(--t3); }
  .rail.open { transform: none; visibility: visible;
    transition: transform var(--t3) var(--ease), visibility 0s; }
  .rail-handle { display: block; }

  .fab { display: inline-flex; }
}

@media (max-width: 760px) {
  .rhead { align-items: flex-start; }
  .listing-grid { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
}

@media (max-width: 560px) {
  .listing-grid { grid-template-columns: 1fr; }
  .rctl { width: 100%; justify-content: space-between; }
  /* design-system's --gutter floor is 1.5rem where the POC used 1.15rem, so the
     head has ~22px less room than the POC's scale was tuned against. body has
     overflow-x: hidden, so anything that does not fit clips silently. */
  .rcount { font-size: 1.3rem; }
  /* .rctl goes full-width here, parking .sort at the LEFT edge — a right-anchored 232px menu
     then leaves the viewport and body's overflow-x: hidden clips it silently. */
  .sort-menu { right: auto; left: 0; transform-origin: top left; }
}


/* ── REDUCED MOTION ─────────────────────────────────────────────
   Opacity and colour survive; movement does not.
─────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .rise, .reveal { opacity: 1 !important; transform: none !important; animation: none !important; transition: none !important; }
  .shimmer { animation: none; }
  /* .rail.open too: it carries its own transition (for the visibility flip), and
     a bare `.rail` rule loses to it on specificity. */
  .rail, .rail.open { transition: none; }
  * { scroll-behavior: auto !important; }
}


/* ── HOVER ──────────────────────────────────────────────────────
   Gated behind a real pointer: on touch, :hover sticks after a tap and
   leaves a control visibly "held" until the user taps elsewhere.
─────────────────────────────────────────────────────────────── */
@media (hover: hover) and (pointer: fine) {
  .f-cell:hover { background: var(--color-surface); }
  .f-cell:hover .chev { color: var(--color-ink-mid); }
  .f-cell.set:hover { background: var(--color-surface); }
  .rail-go:hover { background: var(--color-red-hover); }
  .rail-go:hover svg { transform: translateX(2px); }
  .rail-clear:hover { color: var(--color-red); background: var(--color-surface); }
  .flt-toggle:hover { color: var(--color-ink); background: var(--color-surface); }
  .flt-toggle:hover .ico { color: var(--color-red); }
  .range input::-webkit-slider-thumb:hover { transform: scale(1.16); box-shadow: 0 2px 7px rgba(0,0,0,0.3), inset 0 0 0 1.5px var(--color-red); }

  .sort-btn:hover { background: var(--color-bg); box-shadow: inset 0 0 0 1px var(--color-rule-strong); }
  .sort-opt:hover { background: var(--color-surface); color: var(--color-ink); }
  .vt-btn:not(.on):hover { color: var(--color-ink-mid); }

  .chip:hover { color: var(--color-ink); background: var(--color-bg); box-shadow: inset 0 0 0 1px var(--color-rule-strong); }
  .chip .x:hover { background: var(--color-red-tint); color: var(--color-red); }
  .chip-clear:hover { color: var(--color-red); background: var(--color-surface); }

  .more-btn:hover:not([disabled]) { box-shadow: inset 0 0 0 1.5px var(--color-ink); }
  .empty-cta:hover { box-shadow: inset 0 0 0 1.5px var(--color-ink); }
  .fab:hover { box-shadow: var(--shadow-lg), inset 0 0 0 1px var(--color-rule-strong); }
}