/* =========================================================================
   Product lines CARD GRID.

   Extracted from mockups/harness-cards-v38.html. Everything that was a
   harness comparison switch is gone and the settled choice baked in:
   top-anchored cover crop, corner-glyph affordance, sparklines on. The
   .hb-flat greys, the paste panel and the stub cards were scaffolding and
   are not here.

   Nothing in this file exists elsewhere on the site. It deliberately does
   NOT reuse the site's colour classes as text colours: charcoal (#A2AF9F)
   and the darker greys land at or below 4.5:1 on a dark surface. The
   explicit three-step scale below has a floor around 6:1 against #262626.
   The palette's ACCENTS were fine; the greys were the problem.
   ========================================================================= */

:root {
  --t1: #F2F5F1;   /* headings and primary text */
  --t2: #C6CEC4;   /* secondary and body */
  --t3: #9FAA9D;   /* counts and meta - the floor */

  --panel:   #262626;
  --surface: #2e2e2e;
  --hover:   #343434;
  --line:    #454545;
  --line2:   #383838;

  --orange:  #F3843E;
  --yellow:  #FFD452;
  --blue:    #98BEE3;
  --green:   #80AE41;

  --card-w: 220px;
  --img-ratio: 75%;   /* 4:3, locked */
  --accent: #F3843E;  /* per-card, set inline from the decade */
  --band:   #3a2717;
  --body:   #414141;

  /* ONE spacing value for the page. Mixed 14/12/8 gaps are what read as
     misalignment in the harness even where things were technically aligned.
     Three consumers: .hb-layout, .hb-tabslot, .hb-chart-grid. */
  --gap: 12px;
}

/* The results surface declares its own background. It must never sit on
   whatever .bg-gradient-circle paints - session 17 measured three harness
   rounds of contrast against a colour that only existed once the real
   stylesheets loaded. */
.hb-results { background: var(--panel); padding: 14px 16px 20px 16px; }

/* The state line, moved into .hb-control-row. Its old .hb-cards-toolbar rules
   are gone with the toolbar. The counts' <strong> took --t1 for the dark
   panel; on orange it needs the same #4a2a12 as the other row controls. */
.hb-control-row #stateCounts { font-family: 'Raleway', sans-serif; font-size: 12px; color: #4a2a12; }
.hb-control-row #stateCounts strong { color: #1c1c1c; font-weight: 600; }

.hb-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--card-w), 1fr));
  gap: 16px;
}

/* ---- the card ----
   Colour is structural rather than a 3px hint: the name band carries a
   decade-derived tint and the accent rules the years, the sparkline and the
   border. Because the grid sorts chronologically, the palette walks down the
   page in order. */
.hb-card {
  background: var(--surface); border: 1px solid var(--line2);
  border-top: 3px solid var(--accent);
  font-family: 'Raleway', sans-serif; display: flex; flex-direction: column;
  text-decoration: none; color: inherit; position: relative;
}

/* Fixed 4:3 image box. Height comes from percentage padding rather than a
   pixel value, because the grid tracks are 1fr and stretch past --card-w on
   wide viewports - a fixed height let the crop go taller or shorter as the
   row width changed. Percentage padding resolves against the card's own
   width, so the ratio holds at every size. Not aspect-ratio: this has to
   work on the same browser floor as the rest of the page. */
.hb-card-img {
  height: 0; padding-bottom: var(--img-ratio); background: #1f1f1f;
  overflow: hidden; position: relative;
}
.hb-card-img img {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block;
}
.hb-card-img > i.fas {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  color: #55503a; font-size: 20px;
}

/* Top-anchored crop: boxed figures put the head and the logo at the top, so
   a centre crop decapitates them. Image provenance is wildly mixed - clean
   1200x1200 product shots, eBay scrapes, screenshots - which is why this
   could not be settled on paper. */
.hb-fit-cover   .hb-card-img img { object-fit: cover; object-position: 50% 0; }
.hb-fit-contain .hb-card-img img { object-fit: contain; }

/* Still-shipping dot. On the image so the name can centre without an
   asymmetric neighbour. */
.hb-live {
  position: absolute; top: 7px; right: 7px; width: 9px; height: 9px;
  border-radius: 50%; background: var(--green); box-shadow: 0 0 0 2px rgba(20,20,20,.7);
}
.hb-live-off { background: #55594f; }

/* ---- the name band ----
   Oswald is condensed, so uppercase with generous tracking reads as poster
   lettering rather than a form label. Weight stays 400 because the site
   loads only the one weight - 500 or 600 would be synthesised and muddy. */
.hb-card-head {
  background: var(--band); border-bottom: 1px solid rgba(0,0,0,.35);
  padding: 9px 10px 8px 10px; text-align: center;
}
.hb-card-name {
  font-family: 'Oswald', sans-serif; font-weight: 400;
  font-size: 21px; line-height: 1.1; letter-spacing: 1.1px;
  text-transform: uppercase; color: var(--t1);
  display: block; margin: 0 0 4px 0;
}
.hb-card-years {
  font-family: 'Oswald', sans-serif; font-size: 14px; line-height: 1;
  color: var(--accent); letter-spacing: 1.6px; font-variant-numeric: tabular-nums;
  display: block;
}

/* The stats block sits on a distinctly lighter panel than the page so the
   sparkline and pills read as a footer. --body is neutral on purpose: the
   band above already carries the decade tint, and tinting both made the card
   two-toned. */
.hb-card-body {
  padding: 10px 11px 11px 11px; display: flex; flex-direction: column;
  gap: 8px; flex: 1 1 auto; background: var(--body);
}

/* ---- sparkline ----
   Bars normalise PER CARD: the point is shape recognition, and global
   scaling flattens everything but Hasbro to a single pixel. The axis stays
   global, 1978-2027 on every card at every level, so a bar's horizontal
   position means the same thing everywhere - including the seven flat years
   of the 1986-92 hole, which is information rather than absence. */
.hb-spark { display: flex; align-items: flex-end; gap: 1px; height: 22px; }
.hb-spark i { flex: 1 1 auto; min-height: 1px; display: block; background: var(--accent); opacity: .85; }
.hb-spark i.hb-z { background: #5a5a5a; min-height: 1px; opacity: 1; }

/* ---- pills ---- */
.hb-pills { display: flex; flex-wrap: wrap; gap: 5px; justify-content: center; margin-top: auto; }
.hb-pill {
  font-size: 10px; letter-spacing: .4px; padding: 3px 8px;
  background: #2c2c2c; color: var(--t2); border: 1px solid #565656;
}
.hb-pill b { color: var(--t1); font-weight: 600; }
.hb-pill-open { background: var(--band); border-color: var(--accent); color: var(--t1); }
.hb-pill-open b { color: var(--accent); }

/* ---- open affordance ----
   The chip answers "how many"; this answers "is there anything inside".
   Conflating them is what left Galoob - 1,070 toys, one line, eight
   sublines - reading as terminal, since a true line count drops at 1. It
   encodes depth, never merge state, so the uniformity rule holds.

   Top left, because the live dot already owns top right. Accent coloured so
   it joins the decade system rather than adding a sixth hue. */
.hb-open-mark {
  display: none; position: absolute; top: 7px; left: 7px;
  padding: 3px 6px; line-height: 1; font-size: 11px;
  background: rgba(16,16,16,.74); color: var(--accent);
  border: 1px solid rgba(255,255,255,.16);
}
.hb-aff-corner .hb-open-mark { display: block; }
.hb-card-open:hover .hb-open-mark { color: var(--t1); border-color: var(--t3); }

.hb-card-open { cursor: pointer; }
.hb-card-open:hover { border-color: var(--t3); }
.hb-card-open:hover .hb-card-head { background: var(--accent); }
.hb-card-open:hover .hb-card-name,
.hb-card-open:hover .hb-card-years { color: #1c1c1c; }

/* Link cards are real anchors, so the browser's own conventions work. Same
   hover as an opener apart from the corner glyph, which only openers
   carry - the difference in behaviour is the only difference shown. */
.hb-card-link:hover { border-color: var(--t3); text-decoration: none; }
.hb-card-link:hover .hb-card-head { background: var(--accent); }
.hb-card-link:hover .hb-card-name,
.hb-card-link:hover .hb-card-years { color: #1c1c1c; }
.hb-card:focus-visible { outline: 2px solid var(--yellow); outline-offset: 2px; }

/* ---- empty state ---- */
.hb-empty {
  background: var(--surface); border: 1px solid var(--line);
  font-family: 'Raleway', sans-serif; font-size: 13px; color: var(--t2);
  padding: 22px 18px; text-align: center;
}

/* ---- instrumentation, ?timing=1 only ---- */
.hb-timing {
  margin: 18px 0 0 0; padding: 8px 10px; background: #1f1f1f;
  border: 1px dashed var(--line); font-family: monospace; font-size: 11px;
  color: var(--t3); display: flex; flex-wrap: wrap; gap: 14px;
}
/* ============================================================ the modal
   Appended session 22. Taken from harness v38 with the harness-only pieces
   (paste panel, stub cards, mode-sync switches) left out.

   Every custom property carries a fallback, so this block renders correctly
   whether or not cards.css already declares the palette above it. */

.hb-modal-veil {
  display: none; position: fixed; inset: 0;
  background: rgba(12, 12, 12, .82);
  z-index: 900; padding: 40px 20px; overflow-y: auto;
}
.hb-modal-veil.hb-show { display: block; }

/* Inset fallback for older engines that do not support it. */
@supports not (inset: 0) {
  .hb-modal-veil { top: 0; right: 0; bottom: 0; left: 0; }
}

body.hb-modal-open,
body.hb-list-open { overflow: hidden; }

.hb-modal {
  background: var(--panel, #262626);
  max-width: 1080px; margin: 0 auto;
  border: 1px solid var(--line, #454545);
  border-top: 3px solid var(--accent, #F3843E);
  padding: 18px 20px 22px 20px;
}

.hb-modal-head {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 14px;
  border-bottom: 1px solid var(--line, #454545);
  padding: 0 0 12px 0; margin: 0 0 16px 0;
}
.hb-modal-head h3 {
  font-family: 'Oswald', sans-serif; font-weight: 400; font-size: 22px;
  color: var(--t1, #F2F5F1); margin: 0;
  letter-spacing: 1.4px; text-transform: uppercase;
}
.hb-modal-head .hb-modal-years {
  font-family: 'Oswald', sans-serif; font-size: 18px;
  color: var(--accent, #F3843E);
  letter-spacing: 1px; font-variant-numeric: tabular-nums;
}
.hb-modal-head .hb-modal-meta {
  font-family: 'Raleway', sans-serif; font-size: 12px; color: var(--t3, #9FAA9D);
}
.hb-modal-head .hb-spacer { flex: 1 1 auto; }

.hb-modal-close,
.hb-modal-back {
  background: none; border: 1px solid #5a5a5a; color: var(--t2, #C6CEC4);
  width: 30px; height: 30px; cursor: pointer; font-size: 13px; line-height: 1;
  align-self: center; flex: 0 0 auto;
}
.hb-modal-back { font-size: 12px; margin-right: 2px; }
.hb-modal-close:hover, .hb-modal-back:hover {
  color: var(--t1, #F2F5F1); border-color: var(--t3, #9FAA9D);
}
.hb-modal-close:focus, .hb-modal-back:focus { outline: 1px solid var(--accent, #F3843E); }

.hb-modal-path {
  font-family: 'Oswald', sans-serif; font-size: 18px; color: var(--t2, #C6CEC4);
  letter-spacing: 1px; text-transform: uppercase;
}
.hb-modal-path:before {
  content: "\203A"; color: var(--t3, #9FAA9D); margin: 0 8px 0 2px;
}

/* ---- listmodal.js: the show-all list (session 40) ----------------------
   The frame is the card modal's own - .hb-modal-veil, .hb-modal and the
   head all come from the rules above. Only the list is new. The rows read
   as the chart continued: Raleway like the chart's tick labels, and a faint
   bar behind each row, proportional to the leader, in the chart's colour.
   No max-height anywhere - the veil is the one scroller. */
.hb-list-modal { max-width: 720px; }

.hb-list-toolbar { margin: 0 0 14px 0; }

/* One name-column width for every ranked chart and its show-all list, so
   opening a list reads as the chart getting longer. rankChart() in
   insights.js reads this at draw time. 170px covers the charts' 26-character
   names (measured 144-161px, session 41). */
:root { --hb-rank-gutter: 170px; }

.hb-list { list-style: none; margin: 0; padding: 0; --hb-grid: 20%; }

/* Each row is one more bar of the chart: rank, a fixed name column
   right-aligned against the bars, then the plot. Rows butt together with
   no border or margin, so the gridlines run unbroken down the list.
   Colours and sizes follow chartDefaults() in insights.js. */
.hb-list-row {
  display: flex; align-items: center;
  min-height: 22px;
  font-family: 'Raleway', sans-serif; font-size: 12px;
}
.hb-list-rank {
  flex: 0 0 3em; padding-right: 10px; text-align: right;
  font-size: 11px; color: var(--t3, #9FAA9D); font-variant-numeric: tabular-nums;
}
/* One line always, so every row is the 22px its bar is drawn for. A name
   too long for the column ends in an ellipsis; the full name is the row's
   hover title, set in listmodal.js. */
.hb-list-name {
  flex: 0 0 var(--hb-rank-gutter, 170px); padding-right: 10px;
  text-align: right; line-height: 1.3;
  color: #a8a8a8;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* The plot. Bars are a percentage of its content box; the right padding
   keeps room for the leader's count past its bar. Gridlines are a 1px
   line repeating at the step drawRows() sets, clipped to the content box
   so the first one sits at zero. */
.hb-list-plot {
  flex: 1 1 auto; min-width: 0; align-self: stretch;
  display: flex; align-items: center;
  padding-right: 4.5em;
  background-image: linear-gradient(to right, rgba(255, 255, 255, .07) 1px, transparent 1px);
  background-size: var(--hb-grid) 100%;
  background-origin: content-box; background-clip: content-box;
}
.hb-list-bar { flex: none; height: 16px; }
.hb-list-n {
  flex: none; padding-left: 6px;
  font-size: 11px; color: #a8a8a8; font-variant-numeric: tabular-nums;
}

.hb-list-empty {
  font-family: 'Raleway', sans-serif; font-size: 13px;
  color: var(--t3, #9FAA9D); padding: 8px;
}

@media (max-width: 640px) {
  .hb-list-row { font-size: 11px; }
  .hb-list-rank { flex-basis: 2.4em; padding-right: 6px; }
}

/* Opener cards are <div>, so they get the affordances an <a> has for free.
   Link cards are untouched - the browser's own conventions already work. */
.hb-card-open { cursor: pointer; }
.hb-card-open:focus { outline: 2px solid var(--accent, #F3843E); outline-offset: 2px; }

/* ================= filter panel (session 24, from harness v38) =========== */
/* Space below the orange band = the band's own padding-bottom (20px, measured
   on .bb-8-header in harness v39), so the gap either side of its edge matches.
   Replaces pt-4 (24px) + var(--gap) (12px) = 36px. Session 30, Bill's call. */
.hb-layout { display: flex; align-items: flex-start; gap: var(--gap); margin-top: 20px; }

/* Toy-type pills as tabs. Moved out of .hb-col and into the band, session 36:
   the tabs are site chrome and the pattern repeats on the character and single
   product-line pages. This REVERSES 1542ea9a, which put them on the results
   panel deliberately - recorded so it is not rediscovered as a defect.
   The .hb-col scoping was what cancelled the site's orange pill styling, so
   re-scoping is required, not cosmetic: leave one rule behind and that property
   comes back orange. The row keeps .bb-nav-buttons and #toy_type_row - filters.js
   finds the pills by the id. Inside .container, so it carries the same gutters
   as every other block of content. */
.bb-8-header .bb-nav-buttons.hb-type-tabs {
  display: flex; flex-wrap: wrap; height: auto; margin: 0;
  padding: 4px 0 0 0;
  background: var(--panel); background-image: none; box-shadow: none;
  border: none; border-bottom: 1px solid var(--line);
}
.bb-8-header .bb-nav-buttons.hb-type-tabs a {
  float: none; display: inline-block; height: auto; line-height: 1.3;
  margin: 0 0 -1px 0; padding: 8px 9px 6px 9px;
  border: none; border-bottom: 3px solid transparent; border-radius: 0;
  background: none; background-image: none; box-shadow: none; text-shadow: none;
  font-family: 'Raleway', sans-serif; font-size: 12px; font-weight: 600;
  text-decoration: none; color: var(--t3);
}
.bb-8-header .bb-nav-buttons.hb-type-tabs a:hover { color: var(--t1); }
.bb-8-header .bb-nav-buttons.hb-type-tabs a.blue { color: var(--t1); border-bottom-color: var(--orange); }
/* The two band rows, separated by the page's one spacing value. */
.hb-tabslot { margin-top: var(--gap); }
/* The tab row is now the band's own bottom edge, so the 20px comes off -
   otherwise it plus .hb-layout's margin-top strands the tabs 40px above the
   results they label. Session 30 set those two to match; this keeps one. */
.hb-pinhead .bb-8-header { padding-bottom: 0; }
.hb-col { flex: 1 1 auto; min-width: 0; }

.hb-side {
  flex: 0 0 258px; width: 258px; background: var(--panel);
  border: 1px solid var(--line); align-self: stretch;
}
.hb-side.hb-rail { flex-basis: 46px; width: 46px; }
/* Clear all sits OUTSIDE .hb-side-body, so hiding the body left it behind
   in a 46px column - it wrapped to three lines and overflowed. Expanding to
   clear is one click; a control that does not fit should be absent. */
.hb-side.hb-rail .hb-side-body,
.hb-side.hb-rail .hb-clear,
.hb-side.hb-rail .hb-side-head span:first-child { display: none; }
/* A collapsed panel that hides the fact results are filtered is the one
   thing it must not do - but only when there IS one, or the rail shows a
   bare "0". */
.hb-side.hb-rail .hb-applied.hb-on { display: block; margin: 0 auto; }
.hb-side.hb-rail .hb-side-head { flex-direction: column; gap: 8px; padding: 8px 6px; }

.hb-side-head {
  display: flex; align-items: center; gap: 8px; padding: 10px 12px;
  border-bottom: 1px solid var(--line); font-family: 'Oswald', sans-serif;
  font-size: 13px; letter-spacing: 1px; text-transform: uppercase; color: var(--t2);
}
.hb-side-head button {
  margin-left: auto; background: none; border: 1px solid #565656; color: var(--t3);
  width: 26px; height: 24px; cursor: pointer; font-size: 11px;
}
.hb-side-head button:hover { color: var(--t1); border-color: var(--t3); }
.hb-applied {
  background: var(--orange); color: #1c1c1c; font-family: 'Raleway', sans-serif;
  font-size: 11px; font-weight: 700; padding: 2px 7px; display: none;
}
.hb-applied.hb-on { display: inline-block; }

.hb-side-body { padding: 4px 12px 12px 12px; }
.hb-facet { padding: 12px 0; border-bottom: 1px solid var(--line); }
.hb-facet:last-of-type { border-bottom: none; }
/* Deliberately quieter than .bb-nav-buttons - two loud pill systems on one
   page compete, and the toy-type cascade should stay dominant. */
.hb-facet-head {
  font-family: 'Raleway', sans-serif; font-size: 11px; letter-spacing: 1.4px;
  text-transform: uppercase; color: var(--t3); margin-bottom: 8px;
  display: flex; justify-content: space-between; align-items: baseline;
}
.hb-facet-head span { font-family: 'Oswald', sans-serif; font-size: 13px; color: var(--t1); letter-spacing: 0; }

.hb-search, .hb-select {
  width: 100%; background: #1f1f1f; border: 1px solid var(--line); color: var(--t1);
  font-family: 'Raleway', sans-serif; font-size: 12px; padding: 6px 8px;
}
/* The three properties a <select> needs that a text input does not. Without
   border-box it renders wider than the panel, because the UA stylesheet's
   padding lands outside the declared width; without appearance:none the
   native control keeps its own background and text colour on Windows and
   ignores the dark field entirely. */
.hb-select {
  box-sizing: border-box; height: 28px;
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
}
.hb-select option { background: #1f1f1f; color: var(--t1); }
.hb-typeahead { max-height: 172px; overflow-y: auto; margin-top: 4px; }
.hb-typeahead div {
  padding: 5px 7px; font-family: 'Raleway', sans-serif; font-size: 12px;
  color: var(--t2); cursor: pointer; display: flex; gap: 6px; align-items: baseline;
}
.hb-typeahead div:hover { background: var(--surface); color: var(--t1); }
.hb-typeahead b { margin-left: auto; color: var(--t3); font-weight: 400; font-size: 11px; }
/* Zero in the current toy type is shown struck through, not hidden - tell
   the user a combination is empty before they spend a click. */
.hb-typeahead .hb-zero { text-decoration: line-through; color: var(--t3); }

.hb-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.hb-chip {
  background: var(--surface); border: 1px solid #565656; color: var(--t1);
  font-family: 'Raleway', sans-serif; font-size: 11px; padding: 3px 6px; cursor: pointer;
}
.hb-chip:hover { border-color: var(--orange); }
.hb-chip i { margin-left: 5px; color: var(--t3); font-size: 9px; }

/* No max-height: all 23 rows render. Nested scrolling rejected (Bill,
   session 34) - the rail scrolls with the page, and a scroller inside a
   scroller is worse than a long panel. */
.hb-checks label {
  display: flex; gap: 7px; align-items: baseline; margin: 0 0 4px 0;
  font-family: 'Raleway', sans-serif; font-size: 12px; color: var(--t2); cursor: pointer;
}
.hb-checks label b { margin-left: auto; color: var(--t3); font-weight: 400; font-size: 11px; }
.hb-checks label.hb-zero span { text-decoration: line-through; color: var(--t3); }

.hb-clear {
  width: 100%; margin-top: 12px; background: none; border: 1px solid #565656;
  color: var(--t3); font-family: 'Raleway', sans-serif; font-size: 11px;
  letter-spacing: 1px; text-transform: uppercase; padding: 7px; cursor: pointer;
}
.hb-clear:hover { color: var(--t1); border-color: var(--t3); }
.hb-side.hb-busy { opacity: .55; }
/* Year histogram (session 25, from harness v38). The bars answer "where is
   the data" while you drag, which is the whole reason the slider sits on top
   of them rather than beside. */
.hb-hist { display: flex; align-items: flex-end; gap: 1px; height: 46px; }
.hb-hist i { flex: 1 1 0; background: var(--t3); min-height: 1px; display: block; }
.hb-hist i.hb-in { background: var(--orange); }
.hb-hist i.hb-none { background: #3a3a3a; }

/* Insights mode - the five charts. Harness v38, lines 494-515, proven in
   mockups/insights-fixture.html before landing here. */
.hb-insights { background: none; border: none; padding: 0; margin: 0; }
.hb-chart-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); }
.hb-chart { background: var(--surface); border: 1px solid var(--line); padding: 10px 12px 12px 12px; }
.hb-chart-wide { grid-column: 1 / -1; }
.hb-chart h4 {
  font-family: 'Oswald', sans-serif; font-size: 13px; letter-spacing: 1px;
  text-transform: uppercase; color: var(--t2); margin: 0 0 10px 0;
  display: flex; align-items: baseline; gap: 8px;
}
.hb-chart h4 span { font-family: 'Raleway', sans-serif; font-size: 11px;
                    letter-spacing: 0; text-transform: none; color: var(--t3); }
/* "show all" in a chart header - the same borderless text button as the
   List toolbar's Expand all / Collapse all, pushed to the right end of the
   flex header. Opens listmodal.js; insights.js wires it. */
.hb-chart-more {
  margin-left: auto; flex: 0 0 auto;
  background: none; border: 0; padding: 0; cursor: pointer;
  font-family: 'Raleway', sans-serif; font-size: 11px;
  letter-spacing: 0; text-transform: none; color: var(--blue);
}
.hb-chart-more:focus-visible { outline: 2px solid var(--yellow); outline-offset: 1px; }
/* Depicts kind buttons - under the chart and in its show-all list's
   toolbar. Harness v36. Fallbacks on every variable because the list modal
   is appended to <body>, outside the page's scope. The swatch carries the
   kind's colour, so the row doubles as the chart's legend. */
.hb-kinds-slot { margin-top: 10px; }
.hb-kinds { display: flex; flex-wrap: wrap; gap: 4px; }
.hb-kbtn {
  font-family: 'Raleway', sans-serif; font-size: 11px; background: none;
  border: 1px solid #565656; color: var(--t3, #9FAA9D);
  padding: 3px 8px; cursor: pointer;
}
.hb-kbtn:hover { color: var(--t1, #F2F5F1); border-color: var(--t3, #9FAA9D); }
.hb-kbtn i { display: inline-block; width: 8px; height: 8px; margin-right: 6px; }
.hb-kbtn.hb-on {
  background: var(--surface, #2e2e2e); color: var(--t1, #F2F5F1);
  border-color: var(--orange, #F3843E);
}
.hb-kbtn:focus-visible { outline: 2px solid var(--yellow, #FFD452); outline-offset: 1px; }
/* The canvas is absolutely positioned inside a wrapper of DECLARED height.
   Chart.js with maintainAspectRatio:false sizes itself from its parent; if the
   parent is sized by its content the two grow off each other and the widget
   expands forever. This breaks that loop - which is why the heights below are
   classes and must not be dropped. */
.hb-canvas { position: relative; width: 100%; }
.hb-canvas canvas {
  position: absolute; top: 0; left: 0;
  width: 100% !important; height: 100% !important; display: block;
}
.hb-canvas-m { height: 300px; }

/* The Results/Insights toggle. Harness v38 lines 443-458, with two changes:
   the chips are <a> not <button>, since view state is a URL param; and the
   label takes --t3 rather than v38's #4a2a12, because that colour was chosen
   to sit on .hb-control-row's orange and this lives on the dark toolbar. */
.hb-mode { display: inline-flex; gap: 3px; }
.hb-ctl-label {
  font-family: 'Raleway', sans-serif; font-size: 10px; letter-spacing: 1.4px;
  text-transform: uppercase; color: var(--t3); margin-right: 2px;
}
.hb-mode a {
  font-family: 'Oswald', sans-serif; font-size: 12px; letter-spacing: 1px;
  text-transform: uppercase; background: #333; border: 1px solid #333;
  color: #e8e8e8; padding: 5px 13px; text-decoration: none; display: inline-block;
}
.hb-mode a:hover { background: #444; color: #fff; text-decoration: none; }
.hb-mode a.hb-on { background: #2196c9; border-color: #2196c9; color: #fff; }
.hb-mode a.hb-on:hover { background: #2196c9; }
/* Control row, harness v39 lines 440-461. Sits in .bb-8-header, ABOVE both
   columns - not in .hb-layout, so session 17's no-stacking-above-the-panel
   rule doesn't apply. Declares its own surface, per session 17's third rule. */
.hb-control-row {
  background: var(--orange); padding: 7px 10px;
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.hb-control-row .hb-spacer { flex: 1 1 auto; }
/* v38's #4a2a12 - the colour chosen for this orange. The .hb-ctl-label rule
   above takes --t3 for the dark toolbar; scoped here so both stay correct. */
.hb-control-row .hb-ctl-label { color: #4a2a12; }
.hb-ctl-sep { width: 1px; height: 18px; background: rgba(0,0,0,.22); margin: 0 6px; }
/* The band pinned, session 36. Sticky on .hb-item-detail so the control row
   and the tab row (step 3) can never separate mid-scroll. Session 34 verified
   the ancestor chain is overflow:visible with no transforms and the navbar is
   relative, so top:0 needs no offset. z-index 20: above the page content,
   which sets none, and below the navbar's 30, which traps its dropdowns'
   1000 inside it. At 500 the menus opened behind the band. Under the
   veil's 900. */
.hb-pinhead { position: sticky; top: 0; z-index: 20; }

/* The site's social buttons sit outside the navbar at z-index 99, so they
   would paint over the band at 20. Hidden on this page only, until the
   rewrite rethinks social integration (Bill). */
.butn-twitter, .butn-facebook { display: none; }

/* The page title, moved off .bread-crumbs-title (34px on a #ff5a09 slab) and
   into the control row. It CANNOT stay white here: on the slab it was poster
   lettering, but on --orange at 22px white is weak, and every other control
   in this row is already #4a2a12. */
.hb-band-title {
  font-family: 'Raleway', sans-serif; font-weight: 900;
  font-size: 22px; line-height: 1.15; letter-spacing: .2px;
  color: #1c1c1c; margin: 0 4px 0 0; white-space: nowrap;
}
.hb-reset {
  font-family: 'Oswald', sans-serif; font-size: 12px; letter-spacing: 1px;
  text-transform: uppercase; background: none; border: 1px solid #4a2a12;
  color: #4a2a12; padding: 5px 13px; cursor: pointer;
}
.hb-reset:hover { background: rgba(0,0,0,.12); color: #1c1c1c; }
.hb-range { position: relative; height: 22px; margin-top: 2px; }
.hb-range input {
  position: absolute; left: 0; width: 100%; margin: 0; padding: 0;
  -webkit-appearance: none; background: none; pointer-events: none;
}
.hb-range input::-webkit-slider-thumb {
  -webkit-appearance: none; pointer-events: auto; width: 13px; height: 18px;
  background: var(--orange); border: 1px solid #1c1c1c; cursor: ew-resize;
}
.hb-range input::-moz-range-thumb {
  pointer-events: auto; width: 13px; height: 18px;
  background: var(--orange); border: 1px solid #1c1c1c; cursor: ew-resize;
}

/* ========================= LIST MODE (session 37) =========================
   Harvested from static/css/outline.css, which served /outline/ - a page
   that retires at the swap along with browse/ and list/. Brought in whole
   rather than linked as a second stylesheet: List is a MODE of this page,
   so its rules belong in this page's file, and landing them here is what
   converts outline's hardcoded palette to the :root variables above.

   THE ONE RULE, carried over verbatim: a row's appearance encodes its
   DEPTH, never whether it is a group or a terminal. Every selector is
   scoped to .hb-o-manufacturer / -line / -subline. Nothing keys on
   .hb-o-group or .hb-o-term except the twisty and the body.

   Two rules deliberately NOT harvested:
     - .hb-o-thumb / .hb-o-thumb img. No thumbnails in List (Bill,
       session 36). The grid and the outline drew images from different
       chains on different node types; List renders none, so the chains
       never have to be reconciled. Dead rules left behind on purpose -
       carried over, a thumb added to the markup would style itself.
     - .hb-outline-toolbar strong, which styled the counts. The band's
       state line carries them; two counts that could disagree is worse
       than one.

   #303030 at the subline border is the one literal with no :root entry -
   one shade off --line2, used exactly once, nothing to drift against.
   ========================================================================= */

.hb-outline-panel {
  /* Declares its own surface. Rows must not depend on the page gradient -
     that assumption cost a full mockup round in session 17. Padding matches
     .hb-results so the bottom edge does not shift when View is switched. */
  background: var(--panel);
  padding: 14px 16px 20px 16px;
}

/* the site's link colours must not cascade into outline rows */
.hb-outline-panel a { text-decoration: none; color: inherit; }
.hb-outline-panel a:hover { text-decoration: none; color: inherit; }

.hb-outline-toolbar {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  font-family: 'Raleway', sans-serif; font-size: 12px; color: var(--t2);
  padding: 0 0 12px 0;
}
.hb-outline-toolbar button {
  background: none; border: 0; color: var(--blue); cursor: pointer;
  text-decoration: underline; font-size: 12px; padding: 0;
}
.hb-outline-toolbar button:hover { color: var(--t1); }

.hb-outline { font-family: 'Raleway', sans-serif; }
.hb-outline-empty { font-family: 'Raleway', sans-serif; color: var(--t2); padding: 20px 4px; }

/* ---- shared row scaffolding ---- */
.hb-o-head {
  display: flex; align-items: center; gap: 12px; cursor: pointer;
}
.hb-o-tw { font-size: 11px; width: 12px; flex: 0 0 12px; text-align: center; color: var(--t2); }
/* A terminal row cannot expand, but its twisty keeps its space so the
   name column stays aligned with the groups around it. */
.hb-o-term > .hb-o-head > .hb-o-tw { visibility: hidden; }
.hb-o-group.hb-shut > .hb-o-head > .hb-o-tw i { transform: rotate(-90deg); display: inline-block; }
.hb-o-group.hb-shut > .hb-o-body { display: none; }

.hb-o-name { flex: 1 1 auto; }
.hb-o-years {
  font-family: 'Oswald', sans-serif; letter-spacing: .5px; flex: 0 0 auto;
  font-variant-numeric: tabular-nums; color: var(--orange);
}
.hb-o-meta { font-size: 11px; color: var(--t3); flex: 0 0 auto; min-width: 150px; text-align: right; }

/* ---- depth 1: manufacturer. All 45 rows identical, merged or not. ---- */
.hb-o-manufacturer { border-bottom: 1px solid var(--line2); }
.hb-o-manufacturer > .hb-o-head { padding: 13px 4px 13px 0; }
.hb-o-manufacturer > .hb-o-head:hover .hb-o-name { color: var(--yellow); }
.hb-o-manufacturer > .hb-o-head > .hb-o-name {
  font-family: 'Oswald', sans-serif; font-size: 19px; font-weight: 400;
  color: var(--t1); letter-spacing: .3px;
}
.hb-o-manufacturer > .hb-o-head > .hb-o-years { font-size: 14px; }
.hb-o-manufacturer > .hb-o-body { padding: 0 0 10px 24px; }

/* ---- depth 2: line ---- */
.hb-o-line { border-top: 1px solid var(--line2); }
.hb-o-line > .hb-o-head { padding: 8px 4px; }
.hb-o-line > .hb-o-head:hover { background: var(--hover); }
.hb-o-line > .hb-o-head:hover .hb-o-name { color: var(--yellow); }
.hb-o-line > .hb-o-head > .hb-o-name { font-size: 14px; font-weight: 600; color: var(--t2); }
.hb-o-line > .hb-o-head > .hb-o-years { font-size: 12px; color: var(--blue); }
.hb-o-line > .hb-o-body { padding: 2px 0 8px 24px; }

/* ---- depth 3: subline ---- */
.hb-o-subline { border-top: 1px solid #303030; }
.hb-o-subline > .hb-o-head { padding: 7px 4px; }
.hb-o-subline > .hb-o-head:hover { background: var(--hover); }
.hb-o-subline > .hb-o-head:hover .hb-o-name { color: var(--yellow); }
.hb-o-subline > .hb-o-head > .hb-o-name { font-size: 13px; color: var(--t2); }
.hb-o-subline > .hb-o-head > .hb-o-years { font-size: 12px; color: var(--green); }

.hb-outline-panel a:focus-visible,
.hb-outline-toolbar button:focus-visible {
  outline: 2px solid var(--yellow); outline-offset: 1px;
}

@media (max-width: 640px) {
  .hb-o-meta { min-width: 0; font-size: 10px; }
  .hb-o-manufacturer > .hb-o-head > .hb-o-name { font-size: 17px; }
}
/* ========================= THE LINE PAGE (session 59) ====================
   Additions to the band for pages below the browse page. Nothing above
   changes. The title is the line. Over it runs a line the row's full width:
   on the left the way back to the browse page and to the line's
   manufacturer there, on the right the counts. */
.hb-band-top {
  flex: 0 0 100%; display: flex; align-items: baseline;
  justify-content: space-between; gap: 12px;
}
.hb-crumbs { display: flex; align-items: baseline; gap: 6px; line-height: 1; }
.hb-crumb-sep { color: #4a2a12; font-size: 11px; }
/* A set of the row's controls the server can hide as one (Sort, in
   merchandise mode) while each still lays out as the row's own child. */
.hb-ctl-group { display: contents; }
.hb-backlink {
  font-family: 'Raleway', sans-serif; font-size: 11px; letter-spacing: 1px;
  text-transform: uppercase; color: #4a2a12; text-decoration: none;
  white-space: nowrap;
}
.hb-backlink:hover { color: #1c1c1c; text-decoration: underline; }
/* The way back to where the visitor set out from (return.js): it leads the
   crumbs and is set apart from them - heavier, and a rule after it - since
   it is a place they were, not a level of the catalog. */
.hb-return { display: inline-flex; align-items: baseline; gap: 10px; margin-right: 4px; min-width: 0; }
.hb-return[hidden] { display: none; }
.hb-return .hb-backlink {
  font-weight: 700; color: #1c1c1c;
  max-width: 46vw; overflow: hidden; text-overflow: ellipsis;
}
.hb-return .hb-backlink i { font-size: 10px; margin-right: 3px; }
.hb-return-sep { align-self: stretch; width: 1px; background: #4a2a12; opacity: .45; }

/* ---- item cards and their marks (session 59) ----
   An item card is a link card with no stats block: the band takes the rest
   of the card, and under the name sits whatever of the item's full name the
   page has not already said. */
.hb-item .hb-card-head { flex: 1 1 auto; }
.hb-item-rest {
  display: block; font-family: 'Raleway', sans-serif; font-size: 11px;
  line-height: 1.35; color: var(--t2); margin: 0 0 5px 0;
}
.hb-card-link:hover .hb-item-rest { color: #1c1c1c; }

/* Marks ride on the photo's bottom edge, so a card without any is no taller
   and no emptier (Bill). Left: what the item IS. Right: what it HAS. */
.hb-marks {
  position: absolute; left: 0; right: 0; bottom: 0; display: flex;
  justify-content: space-between; align-items: flex-end; gap: 6px;
  padding: 5px; pointer-events: none;
}
.hb-marks-is, .hb-marks-has { display: flex; flex-wrap: wrap; gap: 4px; }
.hb-marks-has { justify-content: flex-end; margin-left: auto; }
.hb-mark {
  font-family: 'Raleway', sans-serif; font-size: 9px; letter-spacing: .6px;
  text-transform: uppercase; padding: 2px 6px; pointer-events: auto;
  border: 1px solid #565656; color: var(--t2); background: rgba(28,28,28,.88);
}
.hb-mark-rr  { border-color: var(--blue); color: var(--blue); }
.hb-mark-var { border-color: var(--yellow); color: var(--yellow); }
.hb-mark-has { border-style: dashed; color: var(--t3); }

/* Previous / next in a modal's head - only on a grid that asks for them. */
.hb-modal-nav {
  background: none; border: 1px solid #5a5a5a; color: var(--t2, #C6CEC4);
  height: 30px; padding: 0 10px; cursor: pointer; align-self: center;
  font-family: 'Raleway', sans-serif; font-size: 11px; max-width: 220px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hb-modal-nav:hover { border-color: var(--t3, #9FAA9D); color: var(--t1, #F2F5F1); }
/* A pair of steps, kept together: between cards, at the head's right, and -
   for a grid in sections - between sections, on the left on a line of their
   own under the title. The section the card is in is named ahead of the
   card's own name. */
.hb-modal-steps { display: inline-flex; gap: 6px; align-self: center; }
.hb-modal-steps-sect { flex: 0 0 100%; margin-top: -4px; }
.hb-modal-sect-name {
  font-family: 'Oswald', sans-serif; font-size: 18px; letter-spacing: 1px;
  text-transform: uppercase; color: var(--t2, #C6CEC4);
}
.hb-modal-sect-name:after {
  content: "\203A"; color: var(--t3, #9FAA9D); margin: 0 0 0 10px;
}
.hb-modal-nav[disabled] { opacity: .3; cursor: default; }

/* ---- the Toys / Merchandise switch and the sections (session 59) ----
   Row 2 of the band on a page with two sides: the switch on the left, sized
   to its content and stacked, then the tab row. Same face as the tabs beside
   it; the selected side is a highlight, not an underline (Bill). */
.hb-tabslot-sides { display: flex; gap: var(--gap); align-items: stretch; }
.hb-tabslot-sides .hb-type-tabs { flex: 1 1 auto; min-width: 0; }
.hb-sides {
  flex: 0 0 auto; background: var(--panel); border-bottom: 1px solid var(--line);
  display: flex; flex-direction: column; justify-content: center; padding: 4px 0;
}
.hb-sides a {
  display: block; font-family: 'Raleway', sans-serif; font-size: 12px;
  font-weight: 600; line-height: 1.3; padding: 6px 12px;
  color: var(--t3); text-decoration: none;
}
.hb-sides a:hover { color: var(--t1); text-decoration: none; }
.hb-sides a.hb-on { background: var(--orange); color: #1c1c1c; }

/* A grid in sections: a header per group, each with its own card grid. */
.hb-cards.hb-sectioned { display: block; }
.hb-section-head {
  display: flex; align-items: baseline; gap: 10px; margin: 18px 0 10px 0;
  padding-bottom: 6px; border-bottom: 1px solid var(--line);
}
.hb-section-head:first-child { margin-top: 0; }
.hb-section-head span {
  font-family: 'Oswald', sans-serif; font-size: 15px; letter-spacing: 1.2px;
  text-transform: uppercase; color: var(--t1);
}
.hb-section-head b {
  font-family: 'Raleway', sans-serif; font-size: 11px; font-weight: 400;
  color: var(--t3);
}

/* A facet of toggle buttons in the filter panel - the Depicts kind buttons'
   look, under its own class: insights.js acts on every .hb-kbtn on a page. */
.hb-fbtns { display: flex; flex-wrap: wrap; gap: 4px; }
.hb-fbtn {
  font-family: 'Raleway', sans-serif; font-size: 11px; background: none;
  border: 1px solid #565656; color: var(--t3, #9FAA9D);
  padding: 3px 8px; cursor: pointer;
}
.hb-fbtn:hover { color: var(--t1, #F2F5F1); border-color: var(--t3, #9FAA9D); }
.hb-fbtn.hb-on {
  background: var(--surface, #2e2e2e); color: var(--t1, #F2F5F1);
  border-color: var(--orange, #F3843E);
}
.hb-fbtn.hb-zero { text-decoration: line-through; }
.hb-fbtn:focus-visible { outline: 2px solid var(--yellow, #FFD452); outline-offset: 1px; }

/* Under a modal's heading: the filters in force, when the page sends them. */
.hb-modal-said { display: flex; flex-wrap: wrap; gap: 6px; margin: -4px 0 14px 0; }
.hb-said {
  font-family: 'Raleway', sans-serif; font-size: 11px; color: var(--t2);
  border: 1px solid var(--line); padding: 2px 8px;
}
.hb-said b {
  font-weight: 400; color: var(--t3); text-transform: uppercase;
  letter-spacing: 1px; font-size: 10px; margin-right: 4px;
}

/* List rows named by DEPTH, for a page whose levels are not manufacturer,
   line and subline: hb-o-1 is the browse page's line row, hb-o-2 its
   subline row. */
.hb-o-1 { border-top: 1px solid var(--line2); }
.hb-o-1 > .hb-o-head { padding: 8px 4px; }
.hb-o-1 > .hb-o-head:hover { background: var(--hover); }
.hb-o-1 > .hb-o-head:hover .hb-o-name { color: var(--yellow); }
.hb-o-1 > .hb-o-head > .hb-o-name { font-size: 14px; font-weight: 600; color: var(--t2); }
.hb-o-1 > .hb-o-head > .hb-o-years { font-size: 12px; color: var(--blue); }
.hb-o-1 > .hb-o-body { padding: 2px 0 8px 24px; }
.hb-o-2 { border-top: 1px solid #303030; }
.hb-o-2 > .hb-o-head { padding: 7px 4px; }
.hb-o-2 > .hb-o-head:hover { background: var(--hover); }
.hb-o-2 > .hb-o-head:hover .hb-o-name { color: var(--yellow); }
.hb-o-2 > .hb-o-head > .hb-o-name { font-size: 13px; color: var(--t2); }
.hb-o-2 > .hb-o-head > .hb-o-years { font-size: 12px; color: var(--green); }
/* The name parts an item row adds, quieter than the name. */
.hb-o-rest { color: var(--t3); font-weight: 400; font-size: 12px; margin-left: 8px; }
/* A numbered row's place in its list, where a row that opens has its twisty:
   wide enough for four digits and a comma, so the names stay in one column. */
.hb-o-rank {
  font-family: 'Oswald', sans-serif; font-size: 12px; color: var(--t3);
  flex: 0 0 38px; text-align: right; font-variant-numeric: tabular-nums;
}

/* One more place to go from a group: the whole of what its cards are parts
   of - a modal's heading link, and the same link on a List row. */
.hb-modal-head .hb-modal-more, .hb-outline-panel a.hb-o-more {
  font-family: 'Raleway', sans-serif; font-size: 12px; color: var(--blue, #98BEE3);
  text-decoration: underline;
}
.hb-modal-head .hb-modal-more:hover, .hb-outline-panel a.hb-o-more:hover { color: var(--t1, #F2F5F1); }
.hb-outline-panel a.hb-o-more { flex: 0 0 auto; margin-right: 12px; }

/* ---- the Characters page (session 68) ----
   A character's card is not the manufacturer's (Bill): a toy of the
   character in a circle, the kind's colour around it, the name, and one line
   of count and years - no band, no sparkline. Narrower than a card that
   opens, because there are a great many of them. New rules only; nothing
   above is changed. */
.hb-ccards { --card-w: 150px; gap: 14px; }
.hb-ccard {
  display: flex; flex-direction: column; align-items: center;
  padding: 14px 8px 12px 8px; text-align: center; text-decoration: none;
  background: var(--surface); border: 1px solid var(--line2);
  font-family: 'Raleway', sans-serif; color: inherit;
}
.hb-ccard:hover { background: var(--hover); text-decoration: none; }
.hb-ccard:focus-visible { outline: 2px solid var(--yellow); outline-offset: 1px; }
.hb-ccard-img {
  width: 108px; height: 108px; border-radius: 50%; overflow: hidden;
  background: #1f1f1f; border: 3px solid var(--accent);
  display: flex; align-items: center; justify-content: center; flex: 0 0 auto;
}
/* Top-weighted, as the cards' crop is: a figure's head is at the top. */
.hb-ccard-img img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: 50% 15%; }
.hb-ccard-img > i.fas { color: #55503a; font-size: 20px; }
.hb-ccard-name {
  font-family: 'Oswald', sans-serif; font-weight: 400; font-size: 15px;
  line-height: 1.15; letter-spacing: .8px; text-transform: uppercase;
  color: var(--t1); margin-top: 10px; overflow-wrap: anywhere;
}
.hb-ccard-meta { font-size: 11px; color: var(--t3); margin-top: 4px; font-variant-numeric: tabular-nums; }
.hb-ccard-meta b { color: var(--accent); font-weight: 600; }

/* The letter row, under the kinds: the same tabs, closer together, and a
   letter with nothing under the kind in force is there but is not a link. */
.bb-8-header .bb-nav-buttons.hb-type-tabs.hb-letter-tabs a,
.bb-8-header .bb-nav-buttons.hb-type-tabs.hb-letter-tabs span.pl-toy-type {
  padding: 6px 7px 5px 7px; min-width: 22px; text-align: center;
}
.bb-8-header .bb-nav-buttons.hb-type-tabs.hb-letter-tabs span.pl-toy-type {
  display: inline-block; margin: 0 0 -1px 0; border-bottom: 3px solid transparent;
  font-family: 'Raleway', sans-serif; font-size: 12px; font-weight: 600;
  line-height: 1.3; color: #5f665d; cursor: default;
}

/* A character's card is an .hb-card too (cards.js finds a modal's cards by
   that), so what the two disagree on is said again here. */
.hb-card.hb-ccard { border-top: 1px solid var(--line2); }
/* Inside an affiliation's modal the characters keep their own closer grid. */
.hb-characters .hb-modal-cards { --card-w: 150px; gap: 14px; }
/* The switch between characters and affiliations: icons, not words (Bill). */
.hb-mode-icons a { min-width: 30px; text-align: center; }

/* ========================= THE CHARACTER PAGE (session 70) ===============
   The character's kind, species and affiliation: a line of their own in the
   band, under the name (Bill) - the row's labels and links, the full width
   so the line always breaks before it. */
.hb-band-facts {
  flex: 0 0 100%; display: flex; align-items: center; flex-wrap: wrap;
  gap: 6px; min-height: 18px;
}
/* Insights' ranks: where the character stands, a row each, the rank first. */
.hb-ranks { list-style: none; margin: 0; padding: 0; font-family: 'Raleway', sans-serif; }
.hb-ranks li a {
  display: flex; align-items: baseline; gap: 12px; padding: 7px 4px;
  border-top: 1px solid var(--line); color: var(--t2); text-decoration: none;
}
.hb-ranks li:first-child a { border-top: 0; }
.hb-ranks li a:hover { background: var(--hover); text-decoration: none; }
.hb-rank-n {
  font-family: 'Oswald', sans-serif; font-size: 22px; line-height: 1;
  color: var(--orange); min-width: 64px; font-variant-numeric: tabular-nums;
}
.hb-rank-what { flex: 1 1 auto; min-width: 0; color: var(--t1); font-size: 13px; }
.hb-rank-what small {
  font-size: 9px; letter-spacing: 1px; margin-right: 6px;
  text-transform: uppercase; color: var(--t3);
}
.hb-rank-of { font-size: 11px; color: var(--t3); white-space: nowrap; }
.hb-rank-none { color: var(--t3); font-size: 12px; padding: 7px 4px; }