/* ──────────────────────────────────────────────────────────────────────────
   Animal World hub — the pieces unique to marketplace/animal_hub.html.

   The hero, cards, grids and drifting-fauna background all come from
   marketplace-home.css (the .mph-* system); this file only adds what that page
   does not have: the hero emblem, the section jump-nav, the "About" blurb, the
   photo gallery, the empty state and the other-animals chips.

   100% theme tokens — the same vocabulary the home page uses (--primary,
   --ink, --surface, --line, --grad-primary-h, --radius-*, --e*), so it follows
   every palette and both light/dark automatically. The only literals are
   black-at-alpha image scrims, the sanctioned neutral-overlay exception that
   .mph-pop-scrim already uses. Card grids reuse .mph-grid-cards--3/--4, so the
   ≤600px one-column mobile rule in marketplace-home.css covers this page too.
   ────────────────────────────────────────────────────────────────────────── */

/* ---- hero: centred, with a floating emblem ---- */
.aw-hero-inner { text-align: center; align-items: center; }
.aw-hero-inner .mph-hero-cta,
.aw-hero-inner .mph-stats { justify-content: center; }

/* The "← Marketplace" pill and the emblem below it are both children of
   .mph-hero-inner, which is preserve-3d inside a 1300px perspective, so each one
   is pushed toward the viewer by its own --z. A translateZ scales about the
   PERSPECTIVE ORIGIN — the centre of .mph-hero, a band 840-970px tall — not about
   the element's own box, so a child above that centre is thrown upward in
   proportion to its z. The emblem's --z:80px lifted it 15-22px depending on
   viewport (the taller the hero, the further it is from the origin, so the bigger
   the throw), and .aw-emblem has no top margin, so it climbed over the words and
   painted its ring on top of them — measured -18.7px at 1280px and -22.2px at
   390px before this fix.

   The pill did NOT rise to meet it, and that is the part worth knowing: it was
   `display: inline-flex`, and an inline-level child among block-level siblings is
   wrapped in an anonymous block box. That box has no `transform-style`, so it is
   `flat`, and a flattened context discards translateZ entirely — the pill's own
   --z had no effect at all, at any value. It is block-level now (flex + fit-content
   + auto side margins keeps the same centred pill), which puts it directly in the
   parent's 3D context, so the --z it is given in animals_index.html /
   animal_hub.html finally applies. Those two now pass the same --z as the emblem:
   equal z means both are scaled by the same factor about the same origin, so the
   margin below is preserved exactly at every viewport size rather than being eaten
   by a throw that would otherwise have to be guessed at and re-guessed.

   That margin is what clears the ring: .aw-emblem paints a 3px border and an
   opaque 6px box-shadow ring outside its box, ~9.6px once magnified, so 1rem
   leaves about 7px of daylight under the text. `align-self` used to sit here and
   did nothing — the parent is a block container, not a flex one. */
.aw-back {
    display: flex; width: fit-content;
    margin: 0 auto 1rem;
    align-items: center; gap: .45rem;
    font-size: .85rem; font-weight: 600;
    color: var(--ink-3);
    text-decoration: none;
    padding: .4rem .85rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    background: var(--surface);
    transition: color var(--t), border-color var(--t), transform var(--t);
}
.aw-back:hover { color: var(--primary-strong); border-color: var(--primary); transform: translateX(-2px); }

.aw-emblem {
    width: clamp(96px, 15vw, 140px);
    height: clamp(96px, 15vw, 140px);
    /* .2rem left the badge below with ~3px of daylight under the ring — clear of it
       by measurement, but close enough to read as touching. The ring is part of the
       emblem's painted size and this margin is measured from the box inside it, so
       it has to cover the 9.6px ring before any gap begins. */
    margin: 0 auto .9rem;
    border-radius: 50%;
    display: grid; place-items: center;
    overflow: hidden;
    background: var(--grad-primary-h);
    box-shadow: var(--e-glow), 0 0 0 6px var(--primary-soft);
    border: 3px solid var(--surface);
}
.aw-emblem img { width: 100%; height: 100%; object-fit: cover; display: block; }
.aw-emblem-emoji {
    font-size: clamp(48px, 8vw, 74px); line-height: 1;
    color: var(--primary-ink);
    filter: drop-shadow(0 2px 6px rgba(0,0,0,.25));
}

/* ---- section jump-nav ---- */
.aw-jump {
    display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem;
    max-width: var(--mph-max); margin: 0 auto;
    padding: 0 var(--mph-pad) .4rem;
}
.aw-jump-chip {
    display: inline-flex; align-items: center; gap: .45rem;
    font-size: .85rem; font-weight: 600;
    color: var(--ink-2);
    text-decoration: none;
    padding: .5rem .95rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    background: var(--surface);
    transition: color var(--t), border-color var(--t), background var(--t), transform var(--t);
}
.aw-jump-chip i { color: var(--primary-strong); }
.aw-jump-chip:hover {
    color: var(--primary-ink); background: var(--grad-primary-h);
    border-color: transparent; transform: translateY(-2px);
}
.aw-jump-chip:hover i { color: var(--primary-ink); }

/* ---- About (Wikipedia) blurb ---- */
.aw-about {
    display: flex; gap: clamp(1rem, 2.5vw, 1.8rem);
    align-items: stretch;
    padding: clamp(1rem, 2.2vw, 1.6rem);
}
.aw-about-media {
    flex: 0 0 clamp(180px, 30%, 320px);
    border-radius: var(--radius-lg);
    overflow: hidden;
    min-height: 180px;
    background: var(--primary-soft);
}
.aw-about-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.aw-about-text { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; }
.aw-about-text p {
    margin: 0 0 1rem;
    color: var(--ink-2);
    line-height: 1.7;
    font-size: clamp(.95rem, 1.4vw, 1.05rem);
}
.aw-about-foot {
    display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.2rem;
    margin-top: auto;
}
.aw-about-link {
    display: inline-flex; align-items: center; gap: .45rem;
    font-weight: 700; color: var(--primary-strong); text-decoration: none;
    transition: gap var(--t);
}
.aw-about-link:hover { gap: .7rem; }
.aw-about-note { font-size: .8rem; color: var(--ink-3); display: inline-flex; align-items: center; gap: .4rem; }

/* ---- small "read more" affordance on tip/blog/product cards ---- */
.aw-read {
    margin-top: .55rem;
    font-size: .82rem; font-weight: 700;
    color: var(--primary-strong);
    display: inline-flex; align-items: center; gap: .4rem;
    transition: gap var(--t);
}
.mph-card:hover .aw-read { gap: .65rem; }

/* ---- empty market state ---- */
.aw-empty {
    text-align: center;
    max-width: 560px; margin: 0 auto;
    padding: clamp(2rem, 5vw, 3.2rem) clamp(1.2rem, 3vw, 2rem);
    display: flex; flex-direction: column; align-items: center; gap: .6rem;
}
.aw-empty-emoji { font-size: clamp(48px, 9vw, 72px); line-height: 1; }
.aw-empty h2 { margin: .2rem 0 0; color: var(--ink); font-size: clamp(1.2rem, 2.4vw, 1.6rem); }
.aw-empty p { margin: 0 0 .6rem; color: var(--ink-3); line-height: 1.6; }

/* ---- photo gallery ---- */
.aw-gallery {
    max-width: var(--mph-max); margin: 0 auto;
    padding: 0 var(--mph-pad);
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(clamp(140px, 22vw, 190px), 1fr));
    gap: clamp(.5rem, 1.2vw, .85rem);
}
.aw-gallery-item {
    position: relative; display: block;
    aspect-ratio: 1 / 1;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--primary-soft);
    box-shadow: var(--e2);
    transition: transform var(--t), box-shadow var(--t);
}
.aw-gallery-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.aw-gallery-item:hover { transform: translateY(-3px); box-shadow: var(--e3); }
.aw-gallery-item:hover img { transform: scale(1.06); }
.aw-gallery-cap {
    position: absolute; inset: auto 0 0 0;
    display: flex; flex-direction: column; gap: .1rem;
    padding: 1.6rem .7rem .55rem;
    color: #fff;
    background: linear-gradient(to top, rgba(0,0,0,.82), rgba(0,0,0,0));
    font-size: .8rem;
    opacity: 0; transform: translateY(8px);
    transition: opacity var(--t), transform var(--t);
}
.aw-gallery-item:hover .aw-gallery-cap { opacity: 1; transform: translateY(0); }
.aw-gallery-cap > span:first-child {
    font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.aw-gallery-price { font-weight: 700; color: #fff; opacity: .9; }

/* ---- other animal worlds ---- */
.aw-others {
    display: flex; flex-wrap: wrap; gap: .7rem;
    max-width: var(--mph-max); margin: 0 auto;
    padding: 0 var(--mph-pad);
    transform-style: preserve-3d;
}
.aw-other-chip {
    display: inline-flex; align-items: center; gap: .55rem;
    padding: .6rem 1rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    background: var(--surface);
    text-decoration: none;
    box-shadow: var(--e1);
    transition: transform var(--t), box-shadow var(--t), border-color var(--t);
    transform: perspective(600px) rotateX(var(--rx, 0)) rotateY(var(--ry, 0));
}
.aw-other-chip:hover { border-color: var(--primary); box-shadow: var(--e2); }
.aw-other-emoji { font-size: 1.25rem; line-height: 1; }
.aw-other-name { font-weight: 700; color: var(--ink); }
.aw-other-count { font-size: .78rem; color: var(--ink-3); }

/* ══════════════════════════════════════════════════════════════════════════
   Facts · classification · conservation · specs  (#aw-facts)
   A responsive grid of "field-guide" cards. Everything runs on theme tokens
   EXCEPT the IUCN status hues: a conservation scale has to read green→red the
   same way in every palette (a green "least concern" that turned plum would be
   a lie), so those five --iucn tones are fixed, accessible semantic literals —
   the same sanctioned exception the image scrims take.
   ══════════════════════════════════════════════════════════════════════════ */
.aw-facts-grid {
    max-width: var(--mph-max); margin: 0 auto; padding: 0 var(--mph-pad);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(clamp(240px, 30vw, 300px), 1fr));
    gap: clamp(.8rem, 1.6vw, 1.2rem);
    align-items: start;
}
.aw-fcard { padding: clamp(1.1rem, 2vw, 1.5rem); display: flex; flex-direction: column; gap: .95rem; }
.aw-fcard--lead { order: -1; }          /* rare species: lead with conservation */
.aw-fcard-title {
    margin: 0; font-size: 1.02rem; font-weight: 800; color: var(--ink);
    display: inline-flex; align-items: center; gap: .55rem;
}
.aw-fcard-title i { color: var(--primary-strong); }
.aw-fcard-note {
    margin: auto 0 0; font-size: .74rem; color: var(--ink-3);
    display: inline-flex; align-items: center; gap: .4rem;
}

/* rare-species flag in the section head.
   White on flat #df4437 is 4.18:1 — under the 4.5 floor at .8rem, and this label
   is small text in both themes. The tone is deliberate (it is IUCN red, and the
   glow underneath still carries it), so the FILL darkens by 35% rather than the
   hue changing: same red, 8.11:1 under the white. Same trick as .aw-iucn-code. */
.aw-rare-flag {
    display: inline-flex; align-items: center; gap: .45rem;
    font-size: .8rem; font-weight: 800; color: #fff;
    background: color-mix(in srgb, #df4437 65%, #000); padding: .45rem .9rem;
    border-radius: var(--radius-pill);
    box-shadow: 0 6px 18px color-mix(in srgb, #df4437 45%, transparent);
}

/* quick-facts definition list */
.aw-facts-list { margin: 0; display: flex; flex-direction: column; }
.aw-fact-row {
    display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
    padding: .58rem 0; border-bottom: 1px solid var(--line);
}
.aw-fact-row:last-child { border-bottom: 0; padding-bottom: 0; }
.aw-fact-row dt {
    flex: 0 0 auto; font-size: .82rem; font-weight: 600; color: var(--ink-3);
    display: inline-flex; align-items: center; gap: .5rem;
}
.aw-fact-row dt i { color: var(--primary-strong); width: 1rem; text-align: center; }
.aw-fact-row dd { margin: 0; text-align: right; font-weight: 700; color: var(--ink); font-size: .9rem; }
.aw-fact-row dd em { font-style: italic; font-weight: 600; color: var(--ink-2); }

/* IUCN semantic tones (fixed on purpose — see block comment) */
.aw-iucn--ok   { --iucn: #37a866; }
.aw-iucn--mid  { --iucn: #d3a017; }
.aw-iucn--high { --iucn: #e8792b; }
.aw-iucn--crit { --iucn: #df4437; }
.aw-iucn--na   { --iucn: #9aa0a6; }

/* conservation badge */
.aw-iucn-badge { display: flex; align-items: center; gap: .75rem; }
.aw-iucn-code {
    flex: 0 0 auto; display: grid; place-items: center;
    min-width: 3rem; height: 3rem; padding: 0 .6rem;
    font-weight: 900; font-size: 1.15rem; color: #fff;
    border-radius: var(--radius-md, 12px);
    /* 1.15rem is 18.4px — a hair under the 18.66px that would let weight 900 use
       the 3:1 large-text floor — so this needs the full 4.5:1, and white on the
       flat tones clears none of them: LC 3.02, NT/VU 2.38, EN 2.92, CR 4.18,
       NE 2.64. The five tones are fixed on purpose, so the hue is kept and only
       this fill is darkened: 65% of the tone over black leaves the same colour
       reading 6.28 / 5.18 / 6.08 / 8.11 / 5.80 under the white, while the meter
       and the glow below stay at full brightness. */
    background: color-mix(in srgb, var(--iucn, var(--primary)) 65%, #000);
    box-shadow: 0 5px 16px color-mix(in srgb, var(--iucn, var(--primary)) 45%, transparent);
}
.aw-iucn-name { font-weight: 800; color: var(--ink); font-size: 1rem; line-height: 1.25; }

/* the 7-step Red List meter */
.aw-iucn-meter { display: flex; gap: .3rem; }
.aw-iucn-step {
    flex: 1 1 0; min-width: 0;
    display: grid; place-items: center;
    height: 2rem; border-radius: var(--radius-md, 10px);
    font-size: .68rem; font-weight: 800; color: var(--ink-2);
    background: color-mix(in srgb, var(--iucn, var(--ink-3)) 15%, var(--surface));
    border: 1px solid var(--line);
    opacity: .6;
    transition: transform var(--t), opacity var(--t), box-shadow var(--t);
}
.aw-iucn-step.is-active {
    color: #fff; background: var(--iucn, var(--primary)); opacity: 1;
    transform: translateY(-3px) scale(1.06); border-color: transparent;
    box-shadow: 0 6px 16px color-mix(in srgb, var(--iucn) 45%, transparent);
}
.aw-iucn-ends {
    display: flex; justify-content: space-between;
    font-size: .68rem; color: var(--ink-3); margin-top: -.35rem;
}

/* taxonomy ladder — each rank steps in a little further */
.aw-tax { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .38rem; }
.aw-tax-step {
    display: flex; align-items: baseline; justify-content: space-between; gap: .8rem;
    padding: .5rem .8rem;
    margin-left: calc(var(--i, 0) * .5rem);
    border-radius: var(--radius-md, 10px);
    background: color-mix(in srgb, var(--primary) calc(6% + var(--i, 0) * 2%), var(--surface));
    border: 1px solid var(--line);
}
/* --ink-2, not --ink-3: the step's own ground deepens with --i (the color-mix
   above goes 6% + 2% per level), so by Family/Genus/Species it is rgb(228,222,216)
   and --ink-3 reads 4.35 at 10.9px. --ink-2 gives 5.73 on the deepest step. */
.aw-tax-rank {
    font-size: .68rem; font-weight: 700; letter-spacing: .05em;
    text-transform: uppercase; color: var(--ink-2);
}
.aw-tax-name { font-weight: 800; color: var(--ink); }

/* spec gauges */
.aw-specs { display: flex; flex-direction: column; gap: .85rem; }
.aw-spec-head { display: flex; align-items: baseline; justify-content: space-between; gap: .8rem; margin-bottom: .34rem; }
.aw-spec-label { font-size: .82rem; font-weight: 700; color: var(--ink-2); display: inline-flex; align-items: center; gap: .5rem; }
.aw-spec-label i { color: var(--primary-strong); }
.aw-spec-val { font-size: .82rem; font-weight: 800; color: var(--ink); }
.aw-spec-bar {
    position: relative; height: .6rem; border-radius: var(--radius-pill);
    background: var(--primary-soft); overflow: hidden;
}
.aw-spec-fill {
    position: absolute; inset: 0 auto 0 0; width: var(--pct, 0%);
    border-radius: inherit; background: var(--grad-primary-h);
    box-shadow: 0 0 12px color-mix(in srgb, var(--primary) 40%, transparent);
    animation: awSpecGrow 1s ease both;
}
@keyframes awSpecGrow { from { width: 0; } to { width: var(--pct, 0%); } }

/* ══════════════════════════════════════════════════════════════════════════
   Animals A–Z index (marketplace/animals_index.html)
   The sticky alphabet bar + the per-letter animal grids. Same theme tokens.
   ══════════════════════════════════════════════════════════════════════════ */

/* ---- sticky alphabet bar (sits just under the site nav) ---- */
.azw-alpha {
    position: sticky;
    top: 56px;                       /* clears the ~60px .mp-nav header */
    z-index: 60;                     /* under the header's z-index:200 */
    display: flex; flex-wrap: wrap; justify-content: center; gap: .35rem;
    max-width: var(--mph-max); margin: .4rem auto 1.2rem;
    padding: .6rem clamp(.5rem, 2vw, 1rem);
    background: color-mix(in srgb, var(--surface) 88%, transparent);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--e2);
}
.azw-alpha-chip {
    display: grid; place-items: center;
    min-width: 2rem; height: 2rem; padding: 0 .5rem;
    font-weight: 800; font-size: .92rem;
    color: var(--ink-2); text-decoration: none;
    border-radius: var(--radius-pill);
    border: 1px solid transparent;
    transition: color var(--t), background var(--t), border-color var(--t), transform var(--t);
}
.azw-alpha-chip:hover {
    color: var(--primary-ink); background: var(--grad-primary-h);
    border-color: transparent; transform: translateY(-2px);
}

/* ---- per-letter section ---- */
.azw-letter { scroll-margin-top: 118px; }   /* header + sticky alphabet bar */
.azw-letter-head { display: flex; align-items: center; gap: clamp(.7rem, 2vw, 1.1rem); }
.azw-letter-big {
    font-size: clamp(2.4rem, 6vw, 3.6rem); line-height: .9; font-weight: 900;
    color: var(--primary-strong);
    background: var(--grad-primary-h);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
    opacity: .9;
}
/* --grad-primary-h is a PALETTE ramp, not a theme one: in the light theme it opens
   on #e5af7b, which clipped to glyphs over the light page measures 1.8:1 — the big
   section letter faded to nearly nothing. Same fix as .mph-grad in
   marketplace-home.css: light-only, same hue, run --primary → --primary-strong.
   background-IMAGE and not the `background` shorthand, because the shorthand would
   reset background-clip back to border-box and paint the gradient as a solid block
   behind the letter instead of inside it. */
html.theme-light .azw-letter-big {
    background-image: linear-gradient(135deg, var(--primary) 0%, var(--primary-strong) 100%);
    color: var(--primary-strong);
}
.azw-top {
    align-self: flex-start;
    display: inline-flex; align-items: center; gap: .4rem;
    font-size: .8rem; font-weight: 700; color: var(--ink-3);
    text-decoration: none;
    padding: .35rem .75rem;
    border: 1px solid var(--line); border-radius: var(--radius-pill);
    background: var(--surface);
    transition: color var(--t), border-color var(--t), transform var(--t);
}
.azw-top:hover { color: var(--primary-strong); border-color: var(--primary); transform: translateY(-2px); }

/* ---- the grid of animals under one letter ---- */
.azw-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(clamp(140px, 20vw, 190px), 1fr));
    gap: clamp(.5rem, 1.2vw, .8rem);
}
.azw-animal {
    position: relative;
    display: flex; align-items: center; gap: .7rem;
    padding: .7rem .85rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface);
    text-decoration: none;
    box-shadow: var(--e1);
    transition: transform var(--t), box-shadow var(--t), border-color var(--t);
}
.azw-animal:hover {
    transform: translateY(-3px);
    box-shadow: var(--e3);
    border-color: var(--primary);
}
.azw-animal-emoji {
    flex: 0 0 auto;
    width: 2.4rem; height: 2.4rem;
    display: grid; place-items: center;
    font-size: 1.4rem; line-height: 1;
    border-radius: 50%;
    background: var(--primary-soft);
    transition: transform var(--t);
}
.azw-animal:hover .azw-animal-emoji { transform: scale(1.08) rotate(-4deg); }
.azw-animal-name {
    flex: 1 1 auto; min-width: 0;
    font-weight: 700; color: var(--ink);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.azw-animal-count {
    flex: 0 0 auto;
    display: inline-flex; align-items: center; gap: .25rem;
    font-size: .72rem; font-weight: 800;
    color: var(--primary-ink);
    padding: .15rem .5rem;
    border-radius: var(--radius-pill);
    background: var(--grad-primary-h);
}

/* ---- stack the About blurb on narrow screens ---- */
@media (max-width: 780px) {
    .aw-about { flex-direction: column; }
    .aw-about-media { flex-basis: auto; width: 100%; max-height: 260px; }
}

/* ---- alphabet bar / letter grid on small screens ---- */
@media (max-width: 600px) {
    .azw-alpha { gap: .25rem; padding: .5rem .4rem; }
    .azw-alpha-chip { min-width: 1.7rem; height: 1.7rem; font-size: .82rem; padding: 0 .3rem; }
    .azw-letter-big { font-size: 2.4rem; }
    .azw-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
}

/* ---- respect reduced motion (belt-and-braces; JS also stands down) ---- */
@media (prefers-reduced-motion: reduce) {
    .aw-gallery-item img,
    .aw-gallery-cap,
    .aw-other-chip,
    .aw-back,
    .aw-jump-chip,
    .aw-iucn-step,
    .aw-spec-fill,
    .azw-alpha-chip,
    .azw-animal,
    .azw-animal-emoji,
    .azw-top { transition: none; }
    .aw-other-chip { transform: none; }
    .aw-iucn-step.is-active { transform: none; }
    .aw-spec-fill { animation: none; }
    .azw-animal:hover { transform: none; }
    .azw-animal:hover .azw-animal-emoji { transform: none; }
}

/* ============================================================
   MARKET RATES  (#aw-rates)
   The section the hub was missing. Real observed prices for this
   animal, from named public sources, preferring the visitor's own
   country. Table scrolls inside its own box so five columns of
   currency never push the page sideways on a phone.
   ============================================================ */

.aw-rate-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}

.aw-rate-stat {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    padding: 14px 16px;
    display: grid;
    gap: 2px;
}

.aw-rate-stat--hi {
    border-color: var(--primary);
    background: var(--primary-soft);
}

.aw-rate-stat b {
    font-size: 1.15rem;
    color: var(--ink);
    font-weight: 800;
    overflow-wrap: anywhere;
}

.aw-rate-stat small { color: var(--ink-3); font-size: .74rem }

.aw-rate-lbl {
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ink-3);
}

.aw-rate-note {
    display: flex;
    gap: 9px;
    align-items: flex-start;
    background: var(--primary-soft);
    border: 1px solid var(--primary);
    border-radius: var(--radius-md);
    padding: 11px 14px;
    margin: 0 0 16px;
    font-size: .86rem;
    line-height: 1.5;
    color: var(--ink-2);
}

.aw-rate-note i { color: var(--primary-strong); margin-top: 3px }

/* The caption naming what the three summary figures are the price of. Same family
   as the note above, but a caption rather than a callout: no box, no border, sitting
   directly under the figures it labels. The boxed treatment would read as a warning
   and would compete with the actual warning ``.aw-rate-note`` renders when the rates
   are from another country. */
.aw-rate-note--of {
    background: none;
    border: 0;
    border-radius: 0;
    padding: 2px 2px 0;
    margin: -8px 0 16px;
    font-size: .8rem;
    color: var(--ink-3);
}

.aw-rate-scroll {
    overflow-x: auto;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--surface);
}

.aw-rate-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .87rem;
    min-width: 560px;
}

.aw-rate-table th {
    text-align: left;
    padding: 11px 14px;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--ink-3);
    border-bottom: 1px solid var(--line);
    white-space: nowrap;
}

.aw-rate-table td {
    padding: 11px 14px;
    border-bottom: 1px solid var(--line);
    color: var(--ink-2);
    vertical-align: top;
}

.aw-rate-table tbody tr:last-child td { border-bottom: none }
.aw-rate-table tbody tr:hover { background: var(--primary-soft) }
.aw-rate-table td a { color: var(--primary-strong); font-weight: 600 }
.aw-rate-table .aw-num { text-align: right; white-space: nowrap }
.aw-rate-table .aw-num b { color: var(--ink); font-weight: 800 }
.aw-rate-table .aw-num small,
.aw-rate-table td small { color: var(--ink-3); font-weight: 500 }

.aw-rate-countries { margin-top: 16px }

.aw-rate-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

.aw-rate-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    background: var(--surface);
    color: var(--ink-2);
    font-size: .84rem;
    font-weight: 600;
    text-decoration: none;
    transition: var(--t);
}

.aw-rate-chip:hover {
    border-color: var(--primary);
    background: var(--primary-soft);
    color: var(--primary-strong);
}

.aw-rate-chip small {
    font-size: .72rem;
    font-weight: 700;
    padding: 1px 7px;
    border-radius: var(--radius-pill);
    background: var(--primary-soft);
    color: var(--primary-strong);
}

@media (prefers-reduced-motion: reduce) {
    .aw-rate-chip { transition: none }
}