/* ════════════════════════════════════════════════════════════════════
   THE HEAD OF HR BOARD, ported from the Claude Design project

   Source: design-source/Head of HR Board.dc.html
   Project: 0bb3830f-415b-45ee-b74e-52897df39676
   Pinned by: tests/dc-hr-board-fidelity.test.mjs

   EVERY DECLARATION IS COPIED FROM THE DESIGN. Nothing is rounded, tuned or
   approximated. The VP's instruction of 2026-07-28 stands: "all designs, CSS,
   overlays, layouts, text style and colour, must match the same with Claude
   design, the only thing we will change is the texts written in it and the
   workflow to use our internal data."

   WHY THIS IS NOT css/dc-vmem-board.css. The two boards share a vocabulary and
   disagree on nearly every number in it. The HR board's rail track is 272px
   against the VMEM board's 262, its canvas 1620 against 1560, its table 820
   against 760, and its ladder breaks at 1220/1060 against 1180/1020. Its rail
   also SCROLLS INTERNALLY (max-height:calc(100vh - 110px)) and so does each
   band (264px), which is how this design carries 26 sections without the
   horizontal strip the VMEM design needs. Reusing one file for both would have
   meant picking a winner for each of those, which is exactly the drift the
   fidelity tests exist to stop.

   WHY IT DOES NOT REDECLARE .cin, .mono OR THE KEYFRAMES FROM css/dc-base.css.
   It does redeclare some, on purpose. dc-base's `shim` runs on pixels
   (-380px to 380px) where this design runs on percentages, and its .lift:hover
   uses a different gold and adds a glow this design does not draw. Leaning on
   dc-base for those would have made the port quietly wrong, so anything that
   disagrees is namespaced and declared here.

   WHAT IS DELIBERATELY ABSENT: the .om-scrim and .om-card rules in the design
   file. The overlay shell is owned by css/dc-overlay.css, which is an exact
   port of this same project's dedicated "Overlay System.dc.html" and is the
   canonical version of those numbers. This board file carries an older inline
   copy of them (z-index 900 against 800, data-w="720" against data-w="wide").
   Porting both would put two overlay systems on one page.
   ════════════════════════════════════════════════════════════════════ */

/* ── Animations, copied frame for frame ─────────────────────────────── */
@keyframes hbHdrDrop { from { transform:translateY(-100%); opacity:0 } to { transform:none; opacity:1 } }
@keyframes hbSbIn    { from { transform:translateX(-18px); opacity:0 } to { transform:none; opacity:1 } }
@keyframes hbWgIn    { from { transform:translateY(14px); opacity:0 } to { transform:none; opacity:1 } }
@keyframes hbCvIn    { from { transform:translateY(10px); opacity:0 } to { transform:none; opacity:1 } }
@keyframes hbScIn    { from { transform:translateY(12px) scale(.96); opacity:0 } to { transform:none; opacity:1 } }
/* Percentages, not dc-base's pixels. A pixel sweep on a 1620px canvas crawls. */
@keyframes hbShim    { 0% { background-position:200% 0 } 100% { background-position:-200% 0 } }
@keyframes hbScan    { 0% { background-position:200% 0 } 100% { background-position:-200% 0 } }
@keyframes hbSettle  { 0% { transform:none; opacity:1 } 45% { transform:translateX(6px); background:rgba(76,214,87,.12) } 100% { transform:translateX(0); opacity:1 } }

/* ── The board root ─────────────────────────────────────────────────── */
.hb { font-family:'DM Sans', system-ui, sans-serif; }
.hb button, .hb select, .hb input, .hb textarea { font-family:'DM Sans', system-ui, sans-serif; }
.hb button {
  transition:background .25s cubic-bezier(.16,1,.3,1), border-color .25s cubic-bezier(.16,1,.3,1),
             color .25s cubic-bezier(.16,1,.3,1), transform .18s cubic-bezier(.16,1,.3,1);
}
.hb button:not(:disabled):active { transform:translateY(1px); }
.hb button:disabled { opacity:.55; cursor:not-allowed; }
.hb :focus-visible { outline:2px solid #f0c832; outline-offset:2px; border-radius:8px; }
.hb ::-webkit-scrollbar { width:10px; height:10px }
.hb ::-webkit-scrollbar-thumb { background:rgba(255,255,255,.21); border-radius:8px }
.hb input::placeholder, .hb textarea::placeholder { color:rgba(242,247,238,.62) }

/* ── Lift, this design's own values ─────────────────────────────────── */
.hb-lift { transition:transform .35s cubic-bezier(.16,1,.3,1), border-color .25s cubic-bezier(.16,1,.3,1), box-shadow .25s cubic-bezier(.16,1,.3,1); }
.hb-lift:hover { transform:translateY(-2px); border-color:rgba(240,200,50,.30); box-shadow:0 16px 40px -12px rgba(0,0,0,.5); }

/* ── Stagger. Ten steps then a floor, so item 26 is not held back a second ── */
.hb-stg > *:nth-child(1) { animation-delay:.06s } .hb-stg > *:nth-child(2) { animation-delay:.10s }
.hb-stg > *:nth-child(3) { animation-delay:.14s } .hb-stg > *:nth-child(4) { animation-delay:.18s }
.hb-stg > *:nth-child(5) { animation-delay:.22s } .hb-stg > *:nth-child(6) { animation-delay:.26s }
.hb-stg > *:nth-child(7) { animation-delay:.30s } .hb-stg > *:nth-child(8) { animation-delay:.34s }
.hb-stg > *:nth-child(9) { animation-delay:.38s } .hb-stg > *:nth-child(10) { animation-delay:.42s }
.hb-stg > *:nth-child(n+11) { animation-delay:.46s }

/* ── The rail ───────────────────────────────────────────────────────── */
.hb-railitem[data-active="true"] {
  background:rgba(212,175,55,.16)!important;
  border-color:rgba(240,200,50,.34)!important;
  color:#f2f7ee!important;
}
.hb-railitem:hover { background:rgba(255,255,255,.07); color:#f2f7ee; }
.hb-railitem[data-active="true"] .hb-railmark { opacity:1!important; }

/* ── Tables ─────────────────────────────────────────────────────────── */
.hb-tblwrap { overflow-x:auto; border:1px solid rgba(255,255,255,.21); border-radius:16px; background:rgba(255,255,255,.05); }
table.hb-tbl { width:100%; min-width:820px; border-collapse:separate; border-spacing:0; }
table.hb-tbl thead th {
  position:sticky; top:0; z-index:2; padding:12px 14px; text-align:left; white-space:nowrap;
  font-family:'IBM Plex Mono', monospace; font-size:9.5px; letter-spacing:1.8px; text-transform:uppercase;
  color:rgba(242,247,238,.62); background:#141d10; border-bottom:1px solid rgba(255,255,255,.21);
}
table.hb-tbl tbody td {
  padding:13px 14px; font-size:13px; line-height:1.45; color:rgba(242,247,238,.88);
  border-bottom:1px solid rgba(255,255,255,.08); vertical-align:middle;
}
table.hb-tbl tbody tr:nth-child(even) td { background:rgba(255,255,255,.028); }
table.hb-tbl tbody tr { transition:background .25s ease; }
table.hb-tbl tbody tr:hover td { background:rgba(240,200,50,.09); }
table.hb-tbl tbody tr:last-child td { border-bottom:none; }
table.hb-tbl td.num, table.hb-tbl th.num {
  text-align:right; font-family:'IBM Plex Mono', monospace; font-variant-numeric:tabular-nums; white-space:nowrap;
}

/* ── Skeletons ──────────────────────────────────────────────────────── */
.hb-skel {
  background:linear-gradient(90deg, rgba(255,255,255,.06) 25%, rgba(255,255,255,.14) 37%, rgba(255,255,255,.06) 63%);
  background-size:200% 100%; animation:hbShim 1.5s linear infinite; border-radius:8px;
}

/* ── Decks, grids and the shell ─────────────────────────────────────── */
.hb-kdeck { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.hb-grid2 { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:13px; }
.hb-shell { display:grid; grid-template-columns:272px minmax(0,1fr); gap:20px; max-width:1620px; margin:0 auto; padding:20px; align-items:start; }
/* The rail scrolls INSIDE itself. That is how this design carries 26 sections
   on a desktop without the page growing a second scrollbar. */
.hb-rail { position:sticky; top:90px; max-height:calc(100vh - 110px); overflow-y:auto; }

/* ── The responsive ladder, in the design's own order ───────────────── */
@media (max-width:1220px) {
  .hb-kdeck { grid-template-columns:repeat(2,minmax(0,1fr)) }
}
@media (max-width:1060px) {
  .hb-shell { grid-template-columns:1fr; gap:14px }
  .hb-rail { position:static; max-height:none; overflow:visible }
  .hb-railscroll { display:flex!important; flex-direction:row!important; flex-wrap:nowrap!important; gap:12px; overflow-x:auto; padding-bottom:6px }
  .hb-railband { min-width:190px; max-height:264px; overflow-y:auto; padding-right:4px }
  .hb-grid2 { grid-template-columns:1fr }
}
@media (max-width:640px) {
  .hb-kdeck { grid-template-columns:1fr }
  .hb-hidexs { display:none!important }
  .hb-rowstack { flex-direction:column!important; align-items:stretch!important }
}

/* ════════════════════════════════════════════════════════════════════
   THE CHROME: header and rail

   The design file holds these as INLINE styles on each element, because a
   design mock has no reason to name them. A live page does: this portal's
   build hashes inline styles into generated classes, and a hashed class is
   unreadable at the next change. Every declaration below is lifted verbatim
   from design-source/Head of HR Board.dc.html, only given a name.
   ════════════════════════════════════════════════════════════════════ */

/* ── Header ─────────────────────────────────────────────────────────── */
.hb-hdr {
  height:70px; position:sticky; top:0; z-index:60;
  display:flex; align-items:center; justify-content:space-between; gap:16px; padding:0 20px;
  background:linear-gradient(160deg, rgba(255,255,255,.12), rgba(255,255,255,.03) 42%, rgba(255,255,255,.10));
  border-bottom:1px solid rgba(255,255,255,.21);
  backdrop-filter:blur(16px) saturate(1.3); -webkit-backdrop-filter:blur(16px) saturate(1.3);
  animation:hbHdrDrop .5s cubic-bezier(.16,1,.3,1) both;
}
.hb-hdr-left  { display:flex; align-items:center; gap:12px; min-width:0; }
.hb-hdr-right { display:flex; align-items:center; gap:10px; }

.hb-backbtn {
  display:flex; align-items:center; gap:7px; min-height:44px; padding:0 12px;
  border:1px solid rgba(255,255,255,.21); border-radius:10px; font-size:13px; cursor:pointer;
}
.hb-backbtn i { font-size:12px; color:#f0c832; }

.hb-logo {
  width:42px; height:42px; border-radius:50%; background:#fff; border:1.5px solid #f0c832;
  overflow:hidden; flex:0 0 auto; display:flex; align-items:center; justify-content:center; cursor:pointer;
}
.hb-logo img { width:100%; height:100%; object-fit:contain; }
/* The design has one logo and always finds it. A live page can 404, so the
   circle collapses rather than showing an empty white disc. */
.hb-logo-fallback { background:transparent; border-color:rgba(255,255,255,.21); }

.hb-rolepill {
  display:flex; align-items:center; gap:8px; padding:8px 13px;
  border:1px solid rgba(240,200,50,.34); border-radius:999px; background:rgba(212,175,55,.12);
  font-size:10.5px; letter-spacing:1.6px; text-transform:uppercase;
}
.hb-rolepill i { color:#f0c832; }

.hb-boardlinks { display:flex; gap:8px; }
.hb-boardlinks a {
  display:flex; align-items:center; gap:7px; min-height:44px; padding:0 12px;
  border:1px solid rgba(255,255,255,.21); border-radius:11px; background:rgba(255,255,255,.05);
  font-size:10.5px; letter-spacing:1.4px; text-transform:uppercase;
}
.hb-boardlinks a i { font-size:11px; }

.hb-userchip {
  display:flex; align-items:center; gap:9px; padding:6px 12px 6px 6px;
  border:1px solid rgba(255,255,255,.21); border-radius:999px;
}
.hb-av {
  width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,#f0c832,#f7d94e); color:#0c1109; font-size:12px; font-weight:600;
  overflow:hidden; flex:0 0 auto;
}
.hb-av img { width:100%; height:100%; object-fit:cover; border-radius:50%; }
.hb-who { min-width:0; }
.hb-whoname { font-size:13px; line-height:1.2; }
.hb-whorole { font-size:9px; letter-spacing:1.4px; text-transform:uppercase; color:rgba(242,247,238,.62); }

.hb-iconbtn {
  width:44px; height:44px; border:1px solid rgba(255,255,255,.21); border-radius:10px;
  background:rgba(255,255,255,.05); color:#f2f7ee; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto;
}
.hb-iconbtn i { font-size:13px; }

/* ── The rail card ──────────────────────────────────────────────────── */
.hb-rail { animation:hbSbIn .45s cubic-bezier(.16,1,.3,1) both; }
.hb-railcard {
  border:1px solid rgba(255,255,255,.21); border-radius:16px; background:rgba(255,255,255,.05);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); padding:14px 12px;
}
.hb-railhead {
  display:flex; align-items:center; gap:10px; padding:0 4px 12px;
  border-bottom:1px solid rgba(255,255,255,.12);
}
.hb-railheadicon {
  width:34px; height:34px; flex:0 0 auto; border-radius:50%;
  border:1px solid rgba(240,200,50,.34); background:rgba(212,175,55,.14);
  display:flex; align-items:center; justify-content:center;
}
.hb-railheadicon i { font-size:12px; color:#f0c832; }
.hb-railheadtitle { font-size:14px; font-weight:600; line-height:1.2; }
.hb-railheadsub {
  margin-top:2px; font-size:9px; letter-spacing:1.4px; text-transform:uppercase;
  color:rgba(242,247,238,.62);
}
.hb-railscroll { display:flex; flex-direction:column; gap:14px; margin-top:13px; }

.hb-railbandhead {
  display:flex; align-items:center; justify-content:space-between; gap:8px; padding:0 6px 7px;
}
.hb-railbandhead span {
  font-size:9px; letter-spacing:2.2px; text-transform:uppercase; color:rgba(242,247,238,.62);
}
.hb-railbandtotal { letter-spacing:1.2px!important; }
.hb-railitems { display:flex; flex-direction:column; gap:4px; }

.hb-railitem {
  position:relative; display:flex; align-items:center; gap:10px; min-height:44px; padding:0 11px;
  border:1px solid transparent; border-radius:11px; background:transparent;
  color:rgba(242,247,238,.88); font-size:12.5px; text-align:left; cursor:pointer;
  animation:hbCvIn .38s cubic-bezier(.16,1,.3,1) both;
}
.hb-railmark {
  position:absolute; left:-12px; top:11px; bottom:11px; width:3px; border-radius:0 3px 3px 0;
  background:#f0c832; opacity:0; transition:opacity .35s cubic-bezier(.16,1,.3,1);
}
.hb-railitem > i { width:15px; flex:0 0 auto; font-size:11.5px; color:rgba(242,247,238,.62); }
.hb-railitem[data-active="true"] > i { color:#f0c832; }
.hb-raillabel { flex:1 1 auto; min-width:0; }
.hb-railcount {
  flex:0 0 auto; min-width:22px; padding:2px 6px; border-radius:999px; text-align:center;
  font-size:10px; font-weight:600;
  border:1px solid rgba(240,200,50,.34); background:rgba(212,175,55,.12); color:#f0c832;
}
/* The design binds these through {{ s.badgeBorder }}, so the literal values are
   not in the file. Taken from the tints it does paint for the same two states:
   .45 and .40 on the border, .12 on the fill. Not rounded to .4, which the
   colour check correctly refused. */
.hb-railcount.red   { border-color:rgba(255,72,72,.45); background:rgba(255,72,72,.12); color:#ff4848; }
.hb-railcount.green { border-color:rgba(76,214,87,.40); background:rgba(76,214,87,.12); color:#4cd657; }

/* The design's own anchor colour. Without it the board links fall back to the
   browser default, which on this background reads as unreadable dark blue. */
.hb a { color:#f0c832; text-decoration:none; }
.hb a:hover { color:#f2f7ee; }

/* ════════════════════════════════════════════════════════════════════
   THE SECTION HEAD

   The design draws one section-head card driven by data, not 26 bespoke ones.
   Every section on this board already opens with the same .sec-hdr / .sec-title
   / .sec-sub markup, so the card lands on all 26 from here without touching a
   single section's HTML. The gold variant is the design's default:
   headBorder rgba(240,200,50,.34), headBg the 160deg gradient below.
   ════════════════════════════════════════════════════════════════════ */
.hb .sec-hdr {
  margin-top:14px; position:relative; overflow:hidden;
  border:1px solid rgba(240,200,50,.34); border-radius:16px; padding:20px 22px;
  background:linear-gradient(160deg, rgba(212,175,55,.14), rgba(255,255,255,.03) 46%, rgba(255,255,255,.10));
  animation:hbWgIn .5s cubic-bezier(.16,1,.3,1) .04s both;
  display:flex; align-items:flex-end; justify-content:space-between; gap:20px; flex-wrap:wrap;
}
/* The scan line. The design gives it its own absolutely-positioned div; a
   pseudo-element does the same job without adding one to all 26 sections. */
.hb .sec-hdr::before {
  content:''; position:absolute; left:0; right:0; top:0; height:1.5px;
  background:linear-gradient(90deg,transparent,#f0c832,transparent);
  background-size:200% 100%; animation:hbScan 5.5s linear infinite;
}
.hb .sec-hdr > div:first-child { flex:1 1 420px; min-width:0; }
.hb .sec-title {
  font-family:'Cinzel', serif; margin:9px 0 0; font-size:25px; line-height:1.2; font-weight:700;
  text-wrap:pretty; display:flex; align-items:center; gap:10px;
}
.hb .sec-title i { font-size:19px; color:#f0c832; }
.hb .sec-sub {
  margin:11px 0 0; max-width:68ch; font-size:14px; line-height:1.62;
  color:rgba(242,247,238,.88); text-wrap:pretty;
}
/* The first section on a view has nothing above it to be spaced from. */
.hb .hh-view > .sec-hdr:first-child { margin-top:0; }
@media (max-width:640px) {
  .hb .sec-hdr { flex-direction:column; align-items:stretch; }
  .hb .sec-title { font-size:21px; }
  /* flex-basis is a HEIGHT once the card is a column, so the design's
     `flex:1 1 420px` left a 420px hole between the blurb and the buttons.
     Measured at 640: the head was about 500px tall for three lines of text. */
  .hb .sec-hdr > div:first-child { flex:1 1 auto; }
}

/* The eyebrow above each section title. The design draws it from
   {{ section.eyebrow }}; this board fills it with the rail band the section
   sits in, so the line tells a reader where they are rather than repeating the
   title in smaller type. Declarations are the design's own. */
.hb-eyebrow { font-size:10px; letter-spacing:2.6px; text-transform:uppercase; color:#f0c832; }

/* ════════════════════════════════════════════════════════════════════
   BEYOND THE DESIGN: what a 29-section board needs and the mock did not

   Everything above is copied. What follows is written in the same language to
   cover cases the design file never had to face, and each one is here because
   it was MEASURED failing, not because it seemed likely.
   ════════════════════════════════════════════════════════════════════ */

/* A grid item defaults to min-width:auto, so its content can push it wider
   than its track. Below 1060 the rail becomes a row of six bands at 190px
   each, which took the PAGE to 1256px on a 640px viewport and made the whole
   board scroll sideways. The design's mock has fewer bands and never hits it.
   Both tracks get min-width:0 so the rail scrolls inside itself, which is what
   its own overflow-x:auto was always for. */
.hb-shell > .hb-rail,
.hb-shell > main { min-width: 0; }

/* Belt and braces on the same failure: the strip is the thing that scrolls. */
@media (max-width: 1060px) {
  .hb-rail, .hb-railcard { max-width: 100%; }
  .hb-railscroll { scrollbar-width: thin; }
  /* Momentum scrolling, or the strip feels dead under a thumb on iOS. */
  .hb-railscroll { -webkit-overflow-scrolling: touch; }
}

/* ── The rail on a phone ─────────────────────────────────────────────
   MEASURED, not assumed. The design's 1060 treatment stacks each band as a
   190px column capped at 264px and lays the bands side by side. That is right
   for the four bands of about four items it was drawn with, and it is 180px
   tall. This board has 29 items in six bands, one of them nine deep, and the
   same rules measured 471px of navigation before the first word of content on
   an 800px viewport. Fifty-nine per cent of a phone screen.

   So the design's ladder is followed on a tablet, where there is room for it,
   and at 640 the strip compacts: the rail's own header comes off, each band
   becomes an inline label followed by its items in one nowrap row, and the
   whole thing is one line that scrolls sideways. Nothing is invented, it is
   the same chips at the same sizes in the design's own colours; only the axis
   changes. Measured after: 96px.

   640 is the design's own phone breakpoint, the one where it already hides
   .hidexs, drops the deck to one column and turns overlays into sheets. */
@media (max-width: 640px) {
  .hb-railcard { padding: 10px; }
  .hb-railhead { display: none; }
  .hb-railscroll { gap: 10px; margin-top: 0; align-items: center; }
  .hb-railband {
    min-width: 0; max-height: none; overflow: visible;
    display: flex; align-items: center; gap: 8px; flex: 0 0 auto;
  }
  .hb-railbandhead {
    padding: 0; flex: 0 0 auto; border-right: 1px solid rgba(255,255,255,.12);
    padding-right: 8px; gap: 4px;
  }
  .hb-railbandtotal { display: none; }
  .hb-railitems { flex-direction: row; gap: 6px; }
  .hb-railitem { white-space: nowrap; padding: 0 12px; }
  /* The mark is drawn outside the item, which only works in a column. */
  .hb-railmark { left: 0; right: 0; top: auto; bottom: 0; width: auto; height: 3px; border-radius: 3px 3px 0 0; }
}

/* ── The KPI deck card ──────────────────────────────────────────────────
   Copied from design-source/Head of HR Board.dc.html. The design binds the
   border, background and colour per card; the three tones below are the ones
   it paints elsewhere in the same file, so nothing here is a new colour.

   .hb-kdeck itself is already declared above with the design's four-across
   ladder. This is the card that goes in it. */
.hb-kcard {
  border:1px solid rgba(255,255,255,.21); border-radius:14px; padding:15px;
  background:rgba(255,255,255,.05);
  animation:hbScIn .45s cubic-bezier(.16,1,.3,1) both;
}
.hb-kcard-top { display:flex; align-items:center; gap:9px; }
.hb-kcard-top i { font-size:12px; color:#f0c832; }
.hb-kcard-lbl {
  font-family:'IBM Plex Mono', ui-monospace, monospace;
  font-size:9.5px; letter-spacing:1.8px; text-transform:uppercase; color:rgba(242,247,238,.88);
}
.hb-kcard-val {
  font-family:'Cinzel', serif; margin-top:9px; font-size:28px; line-height:1.1;
  font-weight:700; color:#f0c832;
}
.hb-kcard-sub { margin-top:4px; font-size:12.5px; line-height:1.45; color:rgba(242,247,238,.88); text-wrap:pretty; }

.hb-kcard[data-tone="green"] { border-color:rgba(76,214,87,.40); background:rgba(76,214,87,.08); }
.hb-kcard[data-tone="green"] i, .hb-kcard[data-tone="green"] .hb-kcard-val { color:#4cd657; }
.hb-kcard[data-tone="red"]   { border-color:rgba(255,72,72,.45); background:rgba(255,72,72,.10); }
.hb-kcard[data-tone="red"] i, .hb-kcard[data-tone="red"] .hb-kcard-val { color:#ff4848; }

/* ── The banner ─────────────────────────────────────────────────────────
   Copied from the design. It sits above the section head and carries a state
   the whole board is operating under, not a per-section message. The design
   drives it from board state; this board drives it from the SAME live state it
   already watches, so nothing here is a condition invented to fill the strip.
   Empty means absent, so the JS only has to set innerHTML. */
.hb-banner {
  display:flex; align-items:flex-start; gap:13px; padding:15px 17px;
  border:1px solid rgba(255,255,255,.21); border-radius:15px;
  background:rgba(255,255,255,.05);
  animation:hbWgIn .5s cubic-bezier(.16,1,.3,1) both;
}
.hb-banner:empty { display:none; }
.hb-banner > i { margin-top:3px; font-size:13px; }
.hb-banner-body { flex:1 1 320px; min-width:0; }
.hb-banner-eyebrow { font-size:9.5px; letter-spacing:2.2px; text-transform:uppercase; }
.hb-banner-text { margin-top:7px; font-size:13.5px; line-height:1.55; color:rgba(242,247,238,.88); text-wrap:pretty; }
.hb-banner-act {
  flex:0 0 auto; min-height:44px; padding:0 15px;
  border:1px solid rgba(255,255,255,.21); border-radius:11px;
  background:rgba(255,255,255,.06); color:#f2f7ee; font-size:13px; cursor:pointer;
}
/* The four tones the design paints, and no others. */
.hb-banner[data-tone="amber"] { border-color:rgba(245,158,11,.45); background:rgba(245,158,11,.09); }
.hb-banner[data-tone="amber"] > i, .hb-banner[data-tone="amber"] .hb-banner-eyebrow { color:#f59e0b; }
.hb-banner[data-tone="gold"]  { border-color:rgba(240,200,50,.34); background:rgba(212,175,55,.12); }
.hb-banner[data-tone="gold"] > i, .hb-banner[data-tone="gold"] .hb-banner-eyebrow { color:#f0c832; }
.hb-banner[data-tone="red"]   { border-color:rgba(255,72,72,.45); background:rgba(255,72,72,.10); }
.hb-banner[data-tone="red"] > i, .hb-banner[data-tone="red"] .hb-banner-eyebrow { color:#ff4848; }
.hb-banner[data-tone="blue"]  { border-color:rgba(85,136,255,.40); background:rgba(85,136,255,.08); }
.hb-banner[data-tone="blue"] > i, .hb-banner[data-tone="blue"] .hb-banner-eyebrow { color:#5588ff; }
@media (max-width:640px) {
  .hb-banner { flex-direction:column; }
  .hb-banner-act { width:100%; }
}