/* Market Atlas, by BevGenie: the one stylesheet, v2 (11 Nov 2026).
   Tokens from design/brand/project/colors_and_type.css (BevGenie), light theme only, high contrast. Teal means more,
   slate means less, gold means Ask BevGenie. CSP-safe: no inline styles anywhere; widths and positions that come from
   data are the .pw-N (width) and .pl-N (left) classes at the end of this file, in half-percent steps, so the live
   charts change a class and the CSS transition moves the bar. One easing everywhere: cubic-bezier(.2,.8,.2,1). */

@font-face {
  font-family: 'Montserrat'; font-style: normal; font-weight: 600 700; font-display: swap;
  src: url(/assets/fonts/montserrat-v31-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'DM Sans'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url(/assets/fonts/dm-sans-v17-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  color-scheme: light;
  --font-display: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-text: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --paper: #FFFFFF;
  --ink: #0B2D2B;
  --brand-25: #F4FBFA; --brand-50: #E9F7F6; --brand-100: #D0EFED; --brand-200: #A4DFDB; --brand-300: #70CAC5;
  --brand-400: #3AAEA8; --brand-500: #1A8F8A; --brand-600: #147470; --brand-700: #115C59; --brand-800: #0E4644;
  --accent-50: #FDF7E8; --accent-100: #FAECC9; --accent-200: #F3DA9A; --accent-300: #E9C264; --accent-400: #D9A93F;
  --accent-500: #C08F2C; --accent-600: #A0741F; --accent-700: #7E5A19;
  --gray-25: #FDFDFD; --gray-50: #FAFAFA; --gray-100: #F5F5F5; --gray-200: #E9EAEB; --gray-300: #D5D7DA;
  --gray-400: #A4A7AE; --gray-500: #717680; --gray-600: #535862; --gray-700: #414651; --gray-800: #252B37;
  --against: var(--gray-700);
  --text-2: var(--gray-600);
  --ease: cubic-bezier(.2,.8,.2,1);
  --r-card: 20px; --r-md: 10px; --r-full: 9999px;
  --shadow-card: 0 1px 2px rgba(11,45,43,0.06), 0 8px 24px rgba(11,45,43,0.06);
  --shadow-lg: 0 12px 28px -6px rgba(11,45,43,0.18), 0 4px 8px -2px rgba(11,45,43,0.06);
  --shadow-gold: 0 8px 24px -6px rgba(160,116,31,0.35);
  --gutter: 16px;
}
@media (min-width: 768px) { :root { --gutter: 32px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--brand-25); }
body {
  margin: 0; background: var(--brand-25); color: var(--ink);
  font: 400 15px/24px var(--font-text); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  min-height: 100vh; display: flex; flex-direction: column;
}
@media (min-width: 1280px) { body { font-size: 15px; line-height: 24px; } }
main { flex: 1 0 auto; }
img, svg { display: block; max-width: 100%; }
h1, h2, h3, h4, p, ol, ul, figure, dl, dd { margin: 0; }
ol, ul { padding: 0; list-style: none; }
a { color: var(--brand-700); text-decoration: none; }
a:hover { color: var(--brand-800); text-decoration: underline; text-underline-offset: 3px; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--brand-500); outline-offset: 2px; border-radius: 6px; }
svg :focus-visible { outline: none; }
.skip { position: absolute; left: 8px; top: -60px; z-index: 50; background: var(--ink); color: #FFFFFF; padding: 10px 14px; border-radius: var(--r-md); font-weight: 600; }
.skip:focus { top: 8px; color: #FFFFFF; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); margin: -1px; padding: 0; border: 0; }
.ico { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.ico-sm { width: 16px; height: 16px; }
.ico-lg { width: 24px; height: 24px; }
.gi { width: 22px; height: 22px; stroke-width: 2; color: var(--brand-700); }
.gi .lq, .di .lq { fill: var(--brand-100); }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.hidden { display: none !important; }
[hidden] { display: none !important; }
.wrap { width: 100%; max-width: 1344px; margin: 0 auto; padding: 0 var(--gutter); }
.num { font-family: var(--font-display); font-weight: 700; }
/* design critique 4: Montserrat's tabular "1" has a flag and a foot, so display numerals stay proportional; DM Sans
   columns and legends keep tabular figures */
.num, .big, .rc-v, .ring-t, .counter b, .pl-rk, .pl-n, .tile-v, .hd-v, .badge, .bul-v b, .away-list b, .ec-big, .og-n, .display, .h1, .h2, .h3 { font-variant-numeric: lining-nums proportional-nums; }
.pl-meta, .bul-v, .lm, .db-v, .legend, .hund-key, .pc-t, .bk-r, .rc-foot, .li-p, .cv { font-variant-numeric: tabular-nums; }
.teal { color: var(--brand-600); }
.flip { transform: scaleX(-1); }

/* ---------- type ---------- */
.display { font: 700 30px/34px var(--font-display); letter-spacing: -0.025em; color: var(--ink); text-wrap: balance; }
@media (min-width: 1280px) { .display { font-size: 48px; line-height: 52px; } }
@media (min-width: 768px) and (max-width: 1279px) { .display { font-size: 40px; line-height: 44px; } }
.h1 { font: 700 24px/30px var(--font-display); letter-spacing: -0.02em; color: var(--ink); text-wrap: balance; }
@media (min-width: 1280px) { .h1 { font-size: 32px; line-height: 38px; } }
@media (min-width: 768px) and (max-width: 1279px) { .h1 { font-size: 28px; line-height: 34px; } }
.h1 em, .display em { font-style: normal; color: var(--brand-600); }
.h2 { font: 700 18px/24px var(--font-display); letter-spacing: -0.01em; color: var(--ink); }
@media (min-width: 1280px) { .h2 { font-size: 21px; line-height: 27px; } }
.h3 { font: 600 16px/21px var(--font-display); color: var(--ink); }
.eyebrow { font: 600 13px/18px var(--font-text); letter-spacing: 0.02em; color: var(--brand-700); display: flex; align-items: center; gap: 8px; }
.eyebrow .gi { width: 20px; height: 20px; }
.lede { font-size: 16px; line-height: 24px; color: var(--ink); }
.note { font-size: 14px; line-height: 20px; color: var(--text-2); }
.body { color: var(--gray-700); }
.big { font: 700 34px/1 var(--font-display); letter-spacing: -0.02em; }
@media (min-width: 1280px) { .big { font-size: 44px; } }

/* ---------- header and footer ---------- */
.site-head { background: rgba(255,255,255,0.95); border-bottom: 1px solid var(--gray-200); position: sticky; top: 0; z-index: 30; backdrop-filter: saturate(1.2) blur(8px); -webkit-backdrop-filter: saturate(1.2) blur(8px); }
.site-head .wrap { height: 64px; display: flex; align-items: center; gap: 16px; }
.back-b { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; min-width: 44px; justify-content: center; padding: 0 14px 0 10px; border: 1px solid var(--gray-200); border-radius: var(--r-full); background: #FFFFFF; color: var(--ink); font: 600 14px/20px var(--font-text); text-decoration: none; flex: none; }
.back-b:hover { border-color: var(--brand-500); color: var(--brand-700); text-decoration: none; }
.back-b:focus-visible { outline: 3px solid var(--brand-500); outline-offset: 2px; }
.back-b .ico { width: 18px; height: 18px; }
@media (max-width: 420px) { .back-b { padding: 0; width: 44px; } .back-l { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); min-height: 44px; margin-right: auto; }
.brand:hover { color: var(--ink); text-decoration: none; }
.brand img { width: 17px; height: 32px; }
.brand-name { font: 700 16px/24px var(--font-display); letter-spacing: -0.01em; }
.brand-by { font-size: 14px; line-height: 28px; color: var(--text-2); }
@media (max-width: 420px) { .brand-by { display: none; } }
.nav { display: none; gap: 2px; }
@media (min-width: 768px) and (max-width: 1100px) { .nav a { padding: 10px 8px; font-size: 14px; } .brand-by { display: none; } }
.nav a { color: var(--ink); font-weight: 600; font-size: 15px; padding: 10px 12px; border-radius: var(--r-md); min-height: 44px; display: inline-flex; align-items: center; }
.nav a:hover, .nav a[aria-current="page"] { background: var(--brand-50); color: var(--brand-700); text-decoration: none; }
.head-actions { display: flex; align-items: center; gap: 8px; position: relative; }
.btn-gold.head-gold { display: none; }
.menu-b { display: inline-flex; }
.menu { position: absolute; right: var(--gutter); top: 60px; background: var(--paper); border: 1px solid var(--gray-200); border-radius: 14px; box-shadow: var(--shadow-lg); padding: 6px; min-width: 220px; z-index: 40; }
.menu a { display: flex; min-height: 44px; align-items: center; padding: 8px 12px; color: var(--ink); font-weight: 600; border-radius: 8px; }
.menu a:hover { background: var(--brand-50); text-decoration: none; }
@media (min-width: 768px) { .nav { display: flex; } .btn-gold.head-gold { display: inline-flex; } .menu-b, .menu { display: none !important; } }
.site-foot { border-top: 1px solid var(--gray-200); margin-top: 48px; background: var(--paper); }
.site-foot .wrap { padding-top: 20px; padding-bottom: 24px; display: grid; gap: 4px; font-size: 14px; line-height: 20px; color: var(--text-2); }
.foot-r1 { display: flex; flex-wrap: wrap; align-items: center; gap: 0 24px; }
.foot-links { display: flex; flex-wrap: wrap; gap: 0 18px; }
.foot-brand { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); font: 700 15px/20px var(--font-display); }
.foot-brand img { width: 11px; height: 20px; }
.foot-brand span { font: 400 14px/20px var(--font-text); color: var(--text-2); }
.site-foot a { font-weight: 600; display: inline-flex; align-items: center; min-height: 44px; }
.foot-r2 { margin: 0; }
.has-pin .site-foot { padding-bottom: 76px; }
@media (min-width: 900px) { .has-pin .site-foot { padding-bottom: 0; } }
/* design critique 24: Share is an icon on narrow phones */
@media (max-width: 520px) { .share-btn { width: 44px; padding: 0; } .share-btn .share-l { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 16px; border-radius: var(--r-md); border: 1px solid var(--gray-300); background: var(--paper); color: var(--ink); font-weight: 600; font-size: 15px; line-height: 22px; cursor: pointer; text-decoration: none; }
.btn:hover { background: var(--brand-25); border-color: var(--brand-300); color: var(--ink); text-decoration: none; }
.btn .ico { color: var(--brand-600); }
.btn-s { min-height: 44px; padding: 8px 12px; font-size: 14px; }
.btn-primary { background: var(--brand-600); border-color: var(--brand-600); color: #FFFFFF; }
.btn-primary:hover { background: var(--brand-700); color: #FFFFFF; }
.btn-primary .ico { color: #FFFFFF; }
.btn-gold { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 12px 20px; border-radius: var(--r-md); background: var(--accent-400); border: 1px solid var(--accent-600); color: var(--ink); font-weight: 700; font-size: 16px; box-shadow: var(--shadow-gold); text-decoration: none; text-wrap: nowrap; }
.btn-gold:hover { background: var(--accent-300); color: var(--ink); text-decoration: none; }
.btn-gold .ico { color: var(--ink); }
.head-gold { min-height: 44px; padding: 8px 16px; font-size: 15px; box-shadow: none; }
.btn-x { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border: 0; background: none; border-radius: var(--r-full); cursor: pointer; color: var(--gray-700); flex: none; }
.btn-x:hover { background: var(--gray-100); }
.go { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; min-height: 44px; }
.go .ico { width: 18px; height: 18px; }
.back { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-weight: 600; font-size: 15px; }
.only-desk { display: none !important; }
@media (min-width: 900px) { .only-desk { display: inline-flex !important; } .only-phone { display: none !important; } }
.share-menu { position: absolute; right: 0; top: calc(100% + 8px); z-index: 30; min-width: 220px; background: var(--paper); border: 1px solid var(--gray-200); border-radius: 14px; box-shadow: var(--shadow-lg); padding: 6px; }
.share-menu a, .share-menu button { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 8px 12px; border: 0; background: none; border-radius: 8px; color: var(--ink); font-weight: 500; text-align: left; cursor: pointer; }
.share-menu a:hover, .share-menu button:hover { background: var(--brand-50); text-decoration: none; }
.share-menu .ico { color: var(--brand-600); }
.toast { position: fixed; left: 50%; bottom: 96px; transform: translateX(-50%); background: var(--ink); color: #FFFFFF; padding: 10px 16px; border-radius: var(--r-md); font-weight: 600; font-size: 14px; z-index: 60; box-shadow: var(--shadow-lg); }
.toast:empty { display: none; }

/* ---------- cards and grid ---------- */
.card { background: var(--paper); border: 1px solid var(--gray-200); border-radius: var(--r-card); box-shadow: var(--shadow-card); padding: 20px; min-width: 0; }
@media (min-width: 1280px) { .card { padding: 28px; } }
.card-teal { background: var(--brand-50); border-color: var(--brand-100); box-shadow: none; }
.card-ink { background: var(--ink); border-color: var(--ink); color: #FFFFFF; }
.card-gold { background: var(--accent-50); border-color: var(--accent-200); box-shadow: none; }
.card-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.grid { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); align-items: start; }
.col-stack { display: grid; gap: 12px; min-width: 0; }
@media (min-width: 768px) { .col-stack { gap: 24px; } }
@media (min-width: 768px) { .grid { gap: 24px; grid-template-columns: repeat(12, minmax(0, 1fr)); } .s3 { grid-column: span 3; } .s4 { grid-column: span 4; } .s5 { grid-column: span 5; } .s6 { grid-column: span 6; } .s7 { grid-column: span 7; } .s8 { grid-column: span 8; } .s12 { grid-column: span 12; } }
@media (min-width: 768px) and (max-width: 1279px) { .s3, .s4, .s5 { grid-column: span 6; } .s7, .s8 { grid-column: span 12; } .s6t12 { grid-column: span 12; } }
.stack > * + * { margin-top: 12px; }
.section { margin-top: 24px; }
@media (min-width: 768px) { .section { margin-top: 32px; } }
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: var(--r-full); font-size: 13px; line-height: 20px; font-weight: 600; background: var(--brand-50); color: var(--brand-700); text-wrap: nowrap; }
.pill-e { background: var(--gray-100); color: var(--gray-700); border: 1px dashed var(--gray-400); }
.badge { display: inline-flex; align-items: center; padding: 4px 12px; border-radius: var(--r-full); background: var(--ink); color: #FFFFFF; font: 700 14px/20px var(--font-display); }
.basis { display: flex; align-items: flex-start; gap: 6px; font-size: 14px; line-height: 20px; color: var(--brand-700); font-weight: 600; margin-top: 4px; }
.basis .ico { margin-top: 2px; }
.basis.e { color: var(--gray-700); }

/* ---------- the $100 receipt ---------- */
.rc { display: grid; gap: 14px; }
.rc-title { font-weight: 600; color: var(--gray-700); margin-bottom: 10px; }
.rc-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "lab v" "track v"; align-items: end; column-gap: 12px; row-gap: 6px; border: 0; background: none; padding: 6px 8px; margin: 0 -8px; border-radius: 12px; text-align: left; cursor: pointer; }
.rc-row:hover { background: var(--brand-25); }
.rc-row[aria-pressed="true"] { background: var(--brand-50); box-shadow: inset 0 0 0 2px var(--brand-600); }
.rc-lab { grid-area: lab; font-weight: 600; font-size: 15px; line-height: 20px; color: var(--ink); }
.rc-track { grid-area: track; position: relative; height: 28px; background: var(--gray-100); border-radius: 8px; }
.rc-bar { position: absolute; left: 0; top: 0; bottom: 0; width: var(--w); border-radius: 8px; background: var(--brand-600); transition: width .44s var(--ease) .08s; }
.rc-lo .rc-bar { background: var(--brand-300); }
.rc-us { position: absolute; top: -5px; bottom: -5px; width: 0; border-left: 2px dashed var(--ink); transition: left .44s var(--ease) .08s; }
.rc-v { grid-area: v; display: flex; align-items: center; gap: 6px; font: 700 24px/1 var(--font-display); color: var(--brand-700); min-width: 92px; justify-content: flex-end; }
.rc-lo .rc-v { color: var(--gray-700); }
@media (min-width: 1280px) { .rc-v { font-size: 30px; min-width: 118px; } }
.rc-ico { width: 30px; height: 30px; stroke-width: 2; color: var(--brand-700); }
.rc-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; font-size: 15px; color: var(--gray-700); }
.rc-usual { display: inline-flex; align-items: center; gap: 6px; }
.rc-usual::before { content: ""; width: 0; height: 16px; border-left: 2px dashed var(--ink); }
.rc-usual b, .rc-gap { color: var(--ink); font-weight: 700; }
.words-card { border-left: 4px solid var(--brand-600); padding: 6px 0 6px 14px; }
.wc-k { font-weight: 700; color: var(--brand-700); font-size: 14px; }
.wc-s { font-size: 15px; line-height: 22px; margin-top: 4px; }
.flat-card { font-size: 15px; }
.cut-cap { margin-top: 10px; font-size: 14px; font-weight: 600; color: var(--brand-700); }

/* ---------- the lean chart: dumbbells on one dollar axis (design critique 10) ---------- */
.lean { display: grid; gap: 2px; container-type: inline-size; }
.lean-h { margin-top: 12px; font: 600 13px/18px var(--font-text); letter-spacing: 0.02em; color: var(--gray-600); }
.lean-g { margin-top: 10px; font-weight: 700; font-size: 14px; }
.lean-more, .lean-none { font-size: 14px; color: var(--text-2); padding: 2px 0 4px; }
.db-key { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; line-height: 18px; color: var(--gray-700); margin-bottom: 4px; }
.db-ki { display: inline-flex; align-items: center; gap: 6px; }
.db-unit { color: var(--gray-600); }
.db-k { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.db-k.wl { background: var(--gray-400); }
.db-k.wh { background: var(--brand-600); }
.db-k.u { width: 0; height: 14px; border-radius: 0; border-left: 2px dashed var(--ink); }
.lrow { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; align-items: center; min-height: 48px; border: 0; background: none; padding: 6px 8px; margin: 0 -8px; width: calc(100% + 16px); border-radius: 10px; text-align: left; cursor: pointer; }
@container (min-width: 420px) { .lrow { grid-template-columns: minmax(0, 11fr) minmax(0, 14fr); gap: 12px; } }
.lrow:hover { background: var(--brand-25); }
.lrow.sel { background: var(--brand-50); box-shadow: inset 0 0 0 2px var(--brand-600); }
.ll { display: flex; align-items: center; gap: 6px; font-size: 15px; line-height: 20px; font-weight: 600; color: var(--ink); min-width: 0; }
.ll-n { min-width: 0; }
.lsim { font-weight: 400; color: var(--text-2); font-size: 13px; margin-left: 2px; }
.ico-dir { width: 14px; height: 14px; stroke-width: 2.5; flex: none; }
.up .ico-dir { color: var(--brand-600); }
.dn .ico-dir { color: var(--against); }
.db { position: relative; display: block; height: 24px; padding: 0 46px; }
.db-in { position: relative; display: block; height: 100%; }
.db-in::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 1px solid var(--gray-200); }
.db-u { position: absolute; top: 2px; bottom: 2px; width: 0; border-left: 2px dashed var(--ink); opacity: 0.55; }
.db-c { position: absolute; top: 10px; height: 4px; width: var(--w); border-radius: 2px; background: var(--gray-300); transition: left .44s var(--ease) .08s, width .44s var(--ease) .08s; }
.up .db-c { background: var(--brand-200); }
.db-d { position: absolute; top: 7px; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; transition: left .44s var(--ease) .08s; }
.db-d.wl { background: var(--gray-400); }
.db-d.wh { background: var(--brand-600); }
.dn .db-d.wh { background: var(--gray-700); }
.db-v { position: absolute; top: 3px; font-size: 13px; line-height: 18px; font-weight: 700; color: var(--ink); text-wrap: nowrap; transition: left .44s var(--ease) .08s; }
.db-v.l { transform: translateX(calc(-100% - 8px)); color: var(--gray-700); font-weight: 600; }
.db-v.r { transform: translateX(8px); }
.db-no { display: flex; align-items: center; gap: 8px; padding: 0; height: 24px; }
.db-e { flex: none; width: 34px; height: 10px; border-radius: 5px; border: 1.5px dashed var(--gray-500); }
.up .db-e { border-color: var(--brand-600); }
.db-nt { font-size: 13px; color: var(--gray-600); }
.t1 .db-e { border-style: dotted; border-width: 2px; }

/* ---------- the map ---------- */
.mapbox { position: relative; }
.map { width: 100%; height: auto; }
.map .st { fill: var(--gray-100); stroke: var(--gray-300); stroke-width: 0.8; stroke-linejoin: round; transition: fill .32s var(--ease), stroke .32s var(--ease); }
.map .d { stroke: rgba(255,255,255,0.9); stroke-width: 0.6; transition: fill .32s var(--ease), stroke .32s var(--ease), opacity .32s var(--ease); }
.map .w1 { transition-delay: 195ms; } .map .w2 { transition-delay: 230ms; } .map .w3 { transition-delay: 265ms; } .map .w4 { transition-delay: 300ms; }
.map .w5 { transition-delay: 335ms; } .map .w6 { transition-delay: 370ms; } .map .w7 { transition-delay: 405ms; } .map .w0 { transition-delay: 160ms; }
.map .d.off { fill: var(--gray-300); opacity: 0.55; }
.map .d.q0 { fill: var(--gray-400); }
.map .q1 { fill: var(--brand-100); } .map .q2 { fill: var(--brand-200); } .map .q3 { fill: var(--brand-300); } .map .q4 { fill: var(--brand-500); } .map .q5 { fill: var(--brand-700); }
.map .d.q1 { stroke: var(--brand-400); }
.map .st.q1, .map .st.q2, .map .st.q3, .map .st.q4, .map .st.q5 { stroke: #FFFFFF; }
.map .d.bey { fill: #FFFFFF; stroke: var(--brand-600); stroke-width: 2; }
.map .d.e0, .map .d.e1, .map .d.e2, .map .d.e3, .map .d.e4 { fill: #FFFFFF; stroke: var(--brand-600); }
.map .d.e0 { stroke: var(--gray-300); stroke-width: 0.8; } .map .d.e1 { stroke-width: 1; } .map .d.e2 { stroke-width: 1.6; } .map .d.e3 { stroke-width: 2.4; } .map .d.e4 { stroke-width: 3.4; stroke: var(--brand-700); }
.map .st.e0 { fill: var(--paper); } .map .st.e1 { fill: var(--brand-25); } .map .st.e2 { fill: var(--brand-50); } .map .st.e3 { fill: var(--brand-100); } .map .st.e4 { fill: var(--brand-200); stroke: var(--brand-600); }
.map .dim { opacity: 0.16; }
.map .st.dim { opacity: 0.35; }
.map .d.me { fill: var(--ink); stroke: #FFFFFF; stroke-width: 1.5; }
.map .st.me { fill: var(--brand-200); stroke: var(--ink); stroke-width: 1.6; }
.map .st.mest { fill: var(--brand-50); stroke: var(--brand-600); }
.map .d.mine { fill: var(--brand-600); }
.map.m-st .dts { display: none; }
/* final fixes: a state page's map box (the view box inside it zooms to the state, or shows the whole country) */
.map.boxed { height: 280px; }
.map .hide { display: none; }
.map.boxed { margin-top: 8px; }
/* a zoomed view is a window onto the country: its edges fade instead of cutting states off hard */
.map.zoomed { -webkit-mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent), linear-gradient(to bottom, transparent, #000 9%, #000 91%, transparent); mask-composite: intersect; }
@media (max-width: 767px) { .map.boxed { height: 210px; } }
.map .ring-me { fill: none; stroke: var(--ink); stroke-width: 2.4; }
.map .pin circle { fill: var(--ink); stroke: #FFFFFF; stroke-width: 1.2; }
.map .pin text { fill: #FFFFFF; font-family: var(--font-display); font-weight: 700; }
.map .pin { animation: pin-in .3s var(--ease) .5s backwards; }
@keyframes pin-in { from { opacity: 0; transform: translateY(-6px); } }
.legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 13px; color: var(--gray-700); margin-top: 8px; }
.sws { display: inline-flex; gap: 2px; }
.sw { width: 18px; height: 12px; border-radius: 3px; display: inline-block; }
.sw.q1 { background: var(--brand-100); } .sw.q2 { background: var(--brand-200); } .sw.q3 { background: var(--brand-300); } .sw.q4 { background: var(--brand-500); } .sw.q5 { background: var(--brand-700); }
.sws.e .sw { background: var(--paper); border: 1px solid var(--brand-600); border-radius: 50%; width: 13px; height: 13px; }
.sws.e .e2 { border-width: 2px; } .sws.e .e3 { border-width: 3px; } .sws.e .e4 { border-width: 4px; }
.sw.se0 { background: var(--paper); border: 1px solid var(--gray-300); } .sw.se1 { background: var(--brand-25); border: 1px solid var(--brand-100); }
.sw.se2 { background: var(--brand-50); } .sw.se3 { background: var(--brand-100); } .sw.se4 { background: var(--brand-200); border: 1px solid var(--brand-600); }
.lg-bey { display: inline-flex; align-items: center; gap: 6px; }
.sw.bey { width: 13px; height: 13px; border-radius: 50%; border: 2px solid var(--brand-600); background: var(--paper); }
.lg-bey { margin-left: 4px; }
.rmap { position: relative; }
.rmap img { width: 100%; height: auto; }
.rmap svg.ovl-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.rmap .ringdot { fill: var(--ink); }
.rmap .ring { fill: none; stroke: var(--ink); stroke-width: 2.5; }
.rmap .hl { fill: var(--brand-200); stroke: var(--ink); stroke-width: 1.6; }
.rmap .hd { fill: var(--brand-600); }
.rmap .rl { font: 700 15px var(--font-display); fill: var(--ink); }

/* ---------- switches ---------- */
.seg { display: inline-flex; flex-wrap: nowrap; gap: 4px; padding: 4px; max-width: 100%; overflow-x: auto; scrollbar-width: none; background: var(--paper); border: 1px solid var(--gray-200); border-radius: 12px; }
.seg::-webkit-scrollbar { display: none; }
.seg-b { flex: none; text-wrap: nowrap; border: 0; background: none; min-height: 44px; padding: 6px 12px; border-radius: 9px; font-weight: 600; font-size: 14px; color: var(--gray-700); cursor: pointer; }
@media (max-width: 420px) { .seg-b { padding: 6px 8px; font-size: 13px; } .seg { gap: 2px; padding: 3px; } }
.seg-b:hover { background: var(--brand-25); color: var(--ink); }
.seg-b.on { background: var(--ink); color: #FFFFFF; }

/* ---------- place list ---------- */
.plist { display: grid; gap: 2px; margin-top: 8px; }
.prow { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: 4px 10px; padding: 8px 6px; border-radius: 12px; min-height: 52px; }
.prow:hover { background: var(--paper); }
.card-teal .prow:hover { background: rgba(255,255,255,0.7); }
.prow.dim { opacity: 0.4; }
.pl-n { width: 28px; height: 28px; border-radius: 50%; background: var(--ink); color: #FFFFFF; font: 700 13px/28px var(--font-display); text-align: center; }
.pl-n.e { background: var(--paper); border: 2px solid var(--brand-600); }
.pl-b { min-width: 0; display: grid; }
.pl-nm { font-weight: 700; color: var(--ink); background: none; border: 0; padding: 0; text-align: left; cursor: pointer; min-height: 24px; font-size: 15px; }
a.pl-nm:hover, button.pl-nm:hover { color: var(--brand-700); text-decoration: underline; }
.pl-meta { font-size: 13px; line-height: 18px; color: var(--gray-700); }
.pl-us { font-size: 13px; color: var(--text-2); }
.pl-rk { font: 700 15px/18px var(--font-display); text-align: right; color: var(--ink); text-wrap: nowrap; }
.pl-rk span { display: block; font: 400 12px/16px var(--font-text); color: var(--text-2); }
.pl-l { display: flex; align-items: center; gap: 6px; min-width: 0; }
.ico-out { color: var(--gray-700); width: 16px; height: 16px; }
/* final fixes 5: a list without rank numbers has no pin column (no empty indent); the picked place carries a pin icon */
.plist-e .prow { grid-template-columns: minmax(0, 1fr); }
.prow.me .pl-nm { color: var(--brand-700); }
.ico-me { width: 16px; height: 16px; color: var(--brand-700); }
.bt { position: relative; display: block; height: 10px; background: var(--gray-100); border-radius: 5px; margin: 6px 0 2px; }
.bt-bar { position: absolute; left: 0; top: 0; bottom: 0; width: var(--w); border-radius: 5px; background: var(--brand-600); transition: width .44s var(--ease) .08s; }
.bt-tick { position: absolute; top: -4px; bottom: -4px; width: 0; border-left: 2px solid var(--ink); }
.lens-note { font-size: 14px; color: var(--gray-700); margin-top: 8px; }
.score-note { font-size: 13px; line-height: 18px; color: var(--gray-700); margin: 4px 0 8px; }

/* ---------- bullet bars ---------- */
.buls { display: grid; gap: 4px; }
.bul { display: grid; gap: 0; padding: 8px 10px; margin: 0 -10px; border: 0; border-radius: 12px; background: none; text-align: left; width: calc(100% + 20px); }
button.bul { cursor: pointer; min-height: 44px; }
button.bul:hover { background: var(--brand-25); }
.bul.sel { background: var(--brand-50); box-shadow: inset 0 0 0 2px var(--brand-600); }
.bul-l { font-weight: 600; font-size: 15px; }
.lowtag { font-weight: 400; color: var(--gray-700); }
.bul.low .bt-bar { background: var(--against); }
.bul-v { font-size: 13px; color: var(--gray-700); }
.bul-v b { color: var(--ink); font: 700 15px var(--font-display); }

/* ---------- ring gauge: the rank in the centre, its base under it (design critique 1) ---------- */
.ring { display: grid; justify-items: center; gap: 2px; }
.ring-bg { fill: none; stroke: var(--gray-200); stroke-width: 10; stroke-linecap: round; }
.ring-fg { fill: none; stroke: var(--brand-600); stroke-width: 10; stroke-linecap: round; }
.ring-t { font-family: var(--font-display); font-weight: 700; fill: var(--ink); letter-spacing: -0.02em; }
.pop .ring { justify-items: start; }
.ring-s { font-weight: 600; letter-spacing: 0; }
.ring-tie { font-family: var(--font-text); font-weight: 600; fill: var(--gray-600); }
.ring figcaption { font-size: 13px; line-height: 18px; color: var(--gray-600); text-align: center; max-width: 140px; }

/* ---------- the whole book: a ranked bar list (design critique 14) ---------- */
/* final fixes 4: the whole book as rank dots; each block has its own scale, labelled at both ends */
.bk { display: grid; gap: 0; margin-bottom: 10px; }
.bk-key { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12px; line-height: 16px; color: var(--gray-700); margin: 0 0 12px; }
.bk-ki { display: inline-flex; align-items: center; gap: 6px; }
.bk-k { flex: none; width: 12px; height: 12px; border-radius: 50%; background: var(--brand-300); }
.bk-k.in { background: var(--brand-600); }
.bk-k.away { background: var(--against); }
.bk-k.bey { background: var(--paper); box-shadow: inset 0 0 0 2px var(--brand-600); }
.bk-ax, .bk-d { display: grid; grid-template-columns: minmax(0, 11fr) minmax(0, 12fr) 64px; gap: 10px; align-items: center; }
@media (max-width: 479px) { .bk-ax, .bk-d { grid-template-columns: minmax(0, 12fr) minmax(0, 9fr) 58px; gap: 8px; } }
.bk-ax { font-size: 11px; line-height: 16px; color: var(--gray-600); font-weight: 600; padding: 6px 6px 4px; border-bottom: 1px solid var(--gray-200); }
.bk-axn { color: var(--gray-700); font-size: 12px; }
.bk-axs { position: relative; display: flex; justify-content: space-between; margin: 0 1px; }
.bk-axm { position: absolute; left: 50%; transform: translateX(-50%); }
.bk-axr { text-align: right; }
.bk-l { display: grid; gap: 0; }
.bk-d { width: 100%; min-height: 26px; border: 0; background: none; padding: 1px 6px; border-radius: 6px; text-align: left; cursor: pointer; font: inherit; color: var(--ink); transition: opacity .32s var(--ease), background .12s; }
@media (pointer: coarse) { .bk-d { min-height: 36px; } }
.bk-d:hover, .bk-d.sel { background: var(--brand-50); }
.bk-d.sel { box-shadow: inset 0 0 0 2px var(--brand-600); }
.bk-n { font-size: 13px; line-height: 18px; font-weight: 600; text-wrap: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bk-t { position: relative; display: block; height: 12px; margin: 0 7px; }
.bk-t::before { content: ""; position: absolute; left: -7px; right: -7px; top: 5px; height: 2px; border-radius: 1px; background: var(--gray-200); }
.bk-full .bk-t::after { content: ""; position: absolute; left: 50%; top: -3px; bottom: -3px; border-left: 1.5px dashed var(--gray-400); }
.bk-dot { position: absolute; top: 0; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: var(--brand-300); z-index: 1; transition: left .44s var(--ease) .08s, background .32s var(--ease); }
.bk-d.in .bk-dot { background: var(--brand-600); }
.bk-d.away .bk-dot { background: var(--against); }
.bk-d.bey .bk-dot { background: var(--paper); box-shadow: inset 0 0 0 2px var(--brand-600); }
.bk-d.away.bey .bk-dot { box-shadow: inset 0 0 0 2px var(--against); }
.bk-d:not(.in):not(.away).bey .bk-dot { box-shadow: inset 0 0 0 2px var(--brand-300); }
.bk-r { font: 700 13px/18px var(--font-display); text-align: right; text-wrap: nowrap; font-variant-numeric: lining-nums proportional-nums; }
.tie { font: 400 11px/16px var(--font-text); color: var(--gray-600); }
.bk-d.dim { opacity: 0.3; }
.bk-more > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: center; min-height: 40px; margin: 2px 0; font-size: 14px; font-weight: 600; color: var(--brand-700); border-top: 1px dashed var(--gray-200); border-bottom: 1px dashed var(--gray-200); }
.bk-more > summary::-webkit-details-marker { display: none; }
.bk-more[open] .bk-o, .bk-more:not([open]) .bk-c { display: none; }

/* ---------- the $100 strip: one fill, the current segment in teal, a ranked list beneath (design critique 20) ---------- */
.hund-w { container-type: inline-size; }
.hund { display: flex; width: 100%; gap: 2px; min-height: 60px; background: var(--paper); }
.hd-s { flex: 0 1 var(--w); max-width: var(--w); min-width: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 2px; padding: 8px 8px; background: var(--gray-200); color: var(--ink); border-radius: 6px; overflow: hidden; text-decoration: none; transition: flex-basis .44s var(--ease), background .16s var(--ease); }
.hd-s:first-child { border-radius: 10px 6px 6px 10px; } .hd-s:last-child { border-radius: 6px 10px 10px 6px; }
a.hd-s:hover, .hd-s.hl { background: var(--brand-300); text-decoration: none; color: var(--ink); }
.hd-s.cur { background: var(--brand-600); color: #FFFFFF; }
a.hd-s.cur:hover, .hd-s.cur.hl { background: var(--brand-700); color: #FFFFFF; }
.hd-ico { width: 22px; height: 22px; stroke-width: 2; }
.hd-n { font-size: 12px; line-height: 15px; font-weight: 600; text-wrap: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hd-v { font: 700 13px/16px var(--font-display); text-wrap: nowrap; }
.hd-s .hd-n, .hd-s .hd-v, .hd-s .hd-ico { display: none; }
.hd-s.lab-a .hd-n, .hd-s.lab-a .hd-v, .hd-s.lab-a .hd-ico { display: block; }
@container (min-width: 600px) { .hd-s.lab-b .hd-n, .hd-s.lab-b .hd-v { display: block; } }
@container (max-width: 420px) { .hd-s.lab-a .hd-ico { display: none; } }
.hund-key { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 24px; font-size: 14px; color: var(--gray-700); margin-top: 10px; }
@container (min-width: 480px) { .hund-key { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container (min-width: 760px) { .hund-key { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.hund-key li > a, .hk-r { display: flex; justify-content: space-between; align-items: center; gap: 10px; min-height: 32px; border-bottom: 1px solid var(--gray-100); color: var(--gray-700); text-decoration: none; }
.hund-key li > a:hover { color: var(--ink); text-decoration: none; }
.hk-n { min-width: 0; overflow: hidden; text-overflow: ellipsis; text-wrap: nowrap; }
.hk-v { color: var(--ink); font: 700 14px var(--font-display); }
.hund-key li.hl, .hund-key li.hl a { color: var(--ink); font-weight: 700; }
.hund-key .cur, .hund-key .cur a, .hund-key .cur .hk-v { color: var(--brand-700); font-weight: 700; }
#hund-zoom { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--gray-200); }
.hz-t { font-weight: 700; font-size: 15px; margin-bottom: 8px; }

/* ---------- fact card ---------- */
.fact .eyebrow { color: var(--brand-200); }
.fact .big { color: var(--brand-300); display: block; margin-top: 12px; font-size: 30px; line-height: 1.1; }
@media (min-width: 1280px) { .fact .big { font-size: 34px; } }
.fact .fact-vs { display: block; font: 600 15px/22px var(--font-text); color: var(--brand-100); }
.fact p { margin-top: 12px; color: #FFFFFF; }
.fact a { color: var(--brand-200); font-weight: 700; display: inline-flex; align-items: center; gap: 4px; min-height: 44px; margin-top: 4px; }
.fact a:hover { color: #FFFFFF; }

/* ---------- ask (gold) ---------- */
.ask { display: grid; gap: 14px; align-items: center; }
@media (min-width: 768px) { .ask { grid-template-columns: minmax(0, 1fr) auto; gap: 24px; } }
.ask-k { display: inline-flex; align-items: center; gap: 8px; color: var(--accent-700); font-weight: 700; font-size: 14px; }
.ask-h { font: 700 18px/24px var(--font-display); color: var(--ink); margin-top: 4px; }
.ask-fine { font-size: 14px; color: var(--gray-700); margin-top: 6px; }
#pin { position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom)); background: rgba(255,255,255,0.97); border-top: 1px solid var(--gray-200); transform: translateY(110%); transition: transform .24s var(--ease); }
#pin.show { transform: none; }
#pin .btn-gold { width: 100%; }
@media (min-width: 900px) { #pin { display: none; } }

/* ---------- door (design critique 5 and 6) ---------- */
.door-hero { position: relative; padding: 20px 0 8px; }
.door-grid { display: grid; gap: 16px; grid-template-areas: "intro" "live" "stats"; grid-template-columns: minmax(0, 1fr); }
.d-intro { grid-area: intro; min-width: 0; } .door-grid > .live { grid-area: live; } .door-grid > .counters { grid-area: stats; }
@media (min-width: 1024px) {
  .door-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-areas: "intro live" "stats live"; grid-template-rows: auto 1fr;
    column-gap: 32px; row-gap: 28px; align-items: start; padding-top: 8px; }
}
.d-lede { margin-top: 14px; }
.door-free { font-weight: 600; color: var(--gray-700); }
.roles { display: grid; gap: 8px; margin-top: 18px; }
.role { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 10px 14px; color: var(--ink); text-decoration: none; position: relative; border-radius: 16px; box-shadow: none; }
.role:hover { text-decoration: none; color: var(--ink); border-color: var(--brand-500); }
.role .di { width: 32px; height: 32px; color: var(--brand-700); stroke-width: 1.75; flex: none; }
.role-t { font: 700 15px/20px var(--font-display); flex: 1; }
.role-s { display: none; }
.role-c { color: var(--brand-600); flex: none; }
@media (min-width: 640px) {
  .roles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .role { display: grid; align-content: space-between; gap: 10px; min-height: 148px; padding: 16px; border-radius: var(--r-card); }
  .role .di { width: 40px; height: 40px; }
  .role-t { font-size: 15px; line-height: 20px; }
  .role-s { display: block; font-size: 14px; line-height: 18px; color: var(--gray-700); font-weight: 600; }
  .role-c { position: absolute; right: 14px; top: 16px; }
}
.live { display: grid; gap: 14px; }
.chips-w { position: relative; min-width: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.dchip { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 6px 14px 6px 10px; border-radius: var(--r-full); border: 1px solid var(--gray-300); background: var(--paper); font-weight: 600; font-size: 14px; cursor: pointer; color: var(--ink); text-wrap: nowrap; }
.dchip:hover { border-color: var(--brand-500); }
.dchip[aria-pressed="true"] { background: var(--ink); color: #FFFFFF; border-color: var(--ink); }
.dchip[aria-pressed="true"] .gi { color: var(--brand-200); }
.dchip[aria-pressed="true"] .gi .lq { fill: rgba(255,255,255,0.15); }
@media (max-width: 767px) {
  .live .chips { flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 -20px; padding: 0 40px 0 20px; scroll-padding-left: 20px; }
  .live .chips::-webkit-scrollbar { display: none; }
  .live .dchip { flex: none; min-height: 48px; scroll-snap-align: start; }
  .chips-w::after { content: ""; position: absolute; right: -20px; top: 0; bottom: 0; width: 44px; background: linear-gradient(to left, #FFFFFF 20%, rgba(255,255,255,0)); pointer-events: none; }
}
.live-foot { display: grid; gap: 14px; }
#door-map svg { max-height: 300px; }
.live-top .lens-h { margin-top: 0; }
#door-list .plist { margin-top: 4px; }
@media (min-width: 640px) and (max-width: 1023px) {
  #door-list .plist { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  #door-list .prow { grid-template-columns: 30px minmax(0, 1fr); align-items: start; }
  #door-list .pl-rk { display: none; }
}
@media (min-width: 1024px) { .live-foot { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: start; gap: 20px; } #door-list .pl-rk { display: none; } }
.bento { display: grid; gap: 12px; margin-top: 16px; grid-template-columns: minmax(0, 1fr); }
/* final fixes: on a wide screen "Did you know?" is a band across the top of the lower row (figure left, sentence right)
   instead of a tall column card with 180 px of empty dark area under its text */
@media (min-width: 1024px) {
  .bento.lower { gap: 24px; margin-top: 24px; }
  .b-fact { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "e e" "n s" "n a"; column-gap: 40px; align-items: start; padding-top: 22px; padding-bottom: 18px; }
  .b-fact .eyebrow { grid-area: e; }
  .b-fact .big { grid-area: n; display: flex; align-items: baseline; gap: 14px; margin-top: 6px; }
  .b-fact .big .fact-vs { display: inline; }
  .b-fact p:not(.eyebrow) { grid-area: s; margin-top: 8px; max-width: 760px; }
  .b-fact a { grid-area: a; justify-self: start; margin-top: 0; }
}
.counters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 24px; }
@media (min-width: 640px) and (max-width: 1023px) { .counters { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.counter { border-top: 2px solid var(--ink); padding-top: 10px; }
.counter b { display: block; font: 700 32px/1 var(--font-display); letter-spacing: -0.02em; }
@media (min-width: 1024px) { .counters { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } .counter b { font-size: 26px; } .role { min-height: 128px; } }
.counter span { font-size: 14px; color: var(--gray-700); }

/* ---------- pick pages ---------- */
.pick-head { padding: 20px 0 12px; display: grid; gap: 12px; }
@media (min-width: 1024px) { .pick-head { grid-template-columns: auto minmax(0, 520px); justify-content: space-between; align-items: end; } }
.pick-grid { display: grid; gap: 24px; }
@media (min-width: 1024px) { .pick-grid { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); align-items: start; } .pv-col { position: sticky; top: 88px; } }
.tg { margin-top: 20px; }
.tg-h { display: flex; align-items: center; gap: 10px; font: 700 17px var(--font-display); }
.tg-h span { font: 400 14px var(--font-text); color: var(--gray-700); }
.tg { container-type: inline-size; }
/* design critique 19: the tiles fill the column (4 across when it is wide, 1 on a phone) */
.tiles { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin-top: 10px; }
@container (min-width: 440px) { .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container (min-width: 600px) { .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@container (min-width: 780px) { .tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.tile { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 14px; border-radius: 16px; background: var(--paper); border: 1.5px solid var(--gray-300); color: var(--ink); text-decoration: none; min-height: 104px; }
@container (max-width: 439px) { .tile { min-height: 0; } }
/* final fixes 1: the chip has its own row at the foot of the tile, so it never sits on the figure line */
.tile-chip { align-self: flex-start; margin-top: auto; font-size: 12px; line-height: 18px; font-weight: 600; padding: 1px 8px; border-radius: var(--r-full); border: 1px dashed var(--brand-300); color: var(--brand-700); background: var(--brand-25); }
.tile:hover { border-color: var(--brand-600); text-decoration: none; color: var(--ink); box-shadow: var(--shadow-card); }
.tile.e { border-style: dashed; }
.tile-n { font-weight: 700; font-size: 15px; line-height: 20px; display: flex; gap: 6px; align-items: flex-start; }
.tile-n .gi { width: 20px; height: 20px; }
.tile-v { font: 700 17px var(--font-display); color: var(--brand-700); }
.tile-v:has(+ .tile-chip) { margin-bottom: 4px; }
.tile-v small { font: 400 12px var(--font-text); color: var(--gray-700); }
.tile-w { font-size: 13px; line-height: 18px; color: var(--gray-700); }
.tile-w b { color: var(--ink); }
.pv { display: none; }
@media (min-width: 1024px) { .pv { display: block; } }
.pv-m { font-weight: 700; color: var(--brand-700); }
.search { position: relative; }
.search label { display: block; font-weight: 600; font-size: 14px; line-height: 20px; margin-bottom: 6px; }
.field { display: flex; align-items: center; gap: 8px; border: 1.5px solid var(--gray-300); border-radius: 12px; background: var(--paper); padding: 0 12px; min-height: 52px; }
.field:focus-within { border-color: var(--brand-600); box-shadow: 0 0 0 4px rgba(26,143,138,0.2); }
.field .ico { color: var(--gray-500); }
.field input { border: 0; outline: 0; background: none; font: inherit; font-size: 17px; flex: 1; min-width: 0; min-height: 48px; color: var(--ink); }
.results { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 35; border: 1px solid var(--gray-200); border-radius: 14px; box-shadow: var(--shadow-lg); background: var(--paper); padding: 6px; max-height: 60vh; overflow: auto; }
.results [role="option"] { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; padding: 8px 12px; border-radius: 8px; cursor: pointer; }
.results [role="option"][aria-selected="true"], .results [role="option"]:hover { background: var(--brand-50); }
.results .rn1 { font-weight: 600; }
.results .rn2 { font-size: 13px; color: var(--text-2); text-align: right; }
.results .res-g { font: 600 12px var(--font-text); letter-spacing: 0.02em; color: var(--gray-600); padding: 8px 12px 2px; }
.status { margin-top: 6px; font-size: 14px; color: var(--text-2); min-height: 20px; }
.nomatch { margin-top: 10px; font-weight: 600; }
.state-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; margin-top: 12px; }
@media (min-width: 768px) { .state-links { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.state-links a { display: flex; align-items: center; min-height: 44px; font-weight: 600; }
.states-svg .st { fill: var(--brand-100); stroke: #FFFFFF; stroke-width: 1; }
.states-svg a:hover .st, .states-svg a:focus .st { fill: var(--brand-500); }
.dist-map { margin-top: 12px; }

/* ---------- answer pages ---------- */
.ans-head { padding: 8px 0 8px; display: grid; gap: 8px; }
.ans-head .h1 { max-width: 30ch; }
/* design critique 25: one breadcrumb row */
.crumb { display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px; font-size: 14px; color: var(--gray-700); }
.crumb a { font-weight: 600; min-height: 44px; display: inline-flex; align-items: center; gap: 4px; }
.crumb-s { color: var(--gray-400); }
.crumb-q { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--brand-700); min-height: 44px; }
.crumb-q .gi { width: 20px; height: 20px; }
.crumb-m { color: var(--gray-600); }
.crumb-m::before { content: "·"; margin-right: 8px; color: var(--gray-400); }
/* final fixes: on a phone the parents take the first row and the current page the second, so no row starts or ends
   with a hanging "/" */
.crumb-br { display: none; }
@media (max-width: 639px) {
  .crumb-br { display: block; flex-basis: 100%; height: 0; }
  .crumb-q > .crumb-s { display: none; }
  .crumb-m::before { content: none; }
}
.sub { font-size: 15px; line-height: 22px; color: var(--gray-700); font-weight: 600; }
/* design critique 11: one evidence line per page, with "How to read this" */
.evid { display: flex; flex-wrap: wrap; align-items: center; gap: 0 16px; }
.evid .basis { margin: 0; font-size: 13px; line-height: 18px; align-items: center; }
.evid .basis .ico { margin-top: 0; }
.how-read { margin: 0; }
.how-read > summary { font-size: 13px; min-height: 44px; }
.how-read[open] { flex-basis: 100%; }
.how-read p { font-size: 14px; line-height: 21px; max-width: 72ch; }
.st-row { align-self: stretch; }
.sol { display: flex; align-items: flex-start; gap: 8px; font-size: 14px; line-height: 20px; color: var(--brand-700); font-weight: 600; margin-top: 12px; }
.sol .ico { margin-top: 1px; }
.disc { margin-top: 12px; }
.disc > summary { cursor: pointer; font-weight: 600; color: var(--brand-700); min-height: 44px; display: flex; align-items: center; gap: 6px; list-style: none; }
.disc > summary::-webkit-details-marker { display: none; }
.disc[open] > summary .ico { transform: rotate(180deg); }
.disc p { font-size: 15px; color: var(--gray-700); margin-top: 6px; }
.tabs { display: inline-flex; gap: 4px; padding: 4px; background: var(--gray-100); border-radius: 12px; }
.tab { border: 0; background: none; min-height: 40px; padding: 6px 14px; border-radius: 9px; font-weight: 600; cursor: pointer; color: var(--gray-700); }
.tab[aria-selected="true"] { background: var(--paper); color: var(--ink); box-shadow: 0 1px 2px rgba(11,45,43,0.12); }
.panel { margin-top: 12px; }
.panel-h { display: none; }
.early-spot { width: 120px; color: var(--brand-600); }
/* design critique 8: an early-signal category's first card holds what is known */
.early-card { display: grid; gap: 10px; align-content: start; }
.ec-big { font: 700 44px/1 var(--font-display); letter-spacing: -0.02em; color: var(--brand-700); }
.ec-cap { font-size: 15px; line-height: 22px; color: var(--gray-600); margin-top: 4px; }
.ec-strip { margin-top: 6px; }
.evid-e { font-size: 14px; line-height: 20px; font-weight: 600; color: var(--brand-700); border: 1.5px dashed var(--brand-300); border-radius: 12px; padding: 8px 12px; background: var(--brand-25); }
.related { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.related a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 6px 14px 6px 10px; border-radius: var(--r-full); border: 1px solid var(--gray-300); background: var(--paper); color: var(--ink); font-weight: 600; font-size: 14px; }
.related a:hover { border-color: var(--brand-600); text-decoration: none; }
.rests { margin-top: 24px; }
.rests p { font-size: 15px; color: var(--gray-700); margin-top: 6px; }
.explore-link { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 64px; text-decoration: none; color: var(--ink); font: 700 15px var(--font-display); }
.explore-link:hover { text-decoration: none; border-color: var(--brand-600); color: var(--ink); }
/* final fixes 5: in the row under the two stacks the explorer link takes the row's height, its line centred */
.grid > .explore-link { align-self: stretch; }
.explore-link .ico { color: var(--brand-600); }
.meta-line { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 15px; color: var(--gray-700); }
.meta-line b { color: var(--ink); }
.beyond-banner { font-size: 15px; color: var(--ink); background: var(--paper); border: 1px dashed var(--brand-600); border-radius: 12px; padding: 10px 14px; margin: 8px 0 16px; }
/* design critique 14 and 15: gauges for the top three only, beside the leans-away rows in one card */
.leans-card { display: grid; gap: 20px; }
@media (min-width: 900px) { .leans-card { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 32px; } .leans-card.one { grid-template-columns: minmax(0, 1fr); } }
.minis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
@media (min-width: 560px) { .minis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 900px) { .leans-card.one .minis { grid-template-columns: repeat(3, minmax(0, 220px)); } }
.mini { display: grid; gap: 6px; padding: 14px; border-radius: 16px; border: 1px solid var(--gray-200); background: var(--paper); color: var(--ink); text-decoration: none; align-content: start; }
.mini:hover { border-color: var(--brand-600); text-decoration: none; color: var(--ink); }
.mini-n { display: flex; gap: 6px; align-items: flex-start; font-weight: 700; font-size: 15px; line-height: 20px; }
.mini .ring svg { width: 96px; height: 96px; }
.mini-r { font-size: 13px; line-height: 18px; color: var(--gray-700); }
/* final fixes 4: the three gauges share their rows (name, ring, reason), so a name that wraps never pushes its ring
   below its neighbours' */
@media (min-width: 560px) {
  @supports (grid-template-rows: subgrid) {
    .minis { grid-auto-rows: auto; row-gap: 10px; }
    .mini { grid-row: span 3; grid-template-rows: subgrid; row-gap: 6px; }
    .mini-n { align-self: start; }
  }
}
.away-list { display: grid; gap: 4px; margin-top: 8px; }
.away-list li { display: flex; justify-content: space-between; gap: 10px; align-items: center; min-height: 44px; border-bottom: 1px solid var(--gray-200); }
.away-list a { font-weight: 600; }
.away-list b { font: 700 15px var(--font-display); color: var(--gray-700); }
.away-list b.stand { font: 700 16px/20px var(--font-display); text-align: right; flex: none; color: var(--ink); }
.away-list b.stand span { display: block; font: 400 12px/16px var(--font-text); color: var(--gray-600); }
.away-r { display: block; font-size: 13px; line-height: 18px; color: var(--gray-700); font-weight: 400; margin: 2px 0 8px; }

/* ---------- explorer ---------- */
.ex-top { display: grid; gap: 12px; padding: 18px 0 12px; }
@media (min-width: 1024px) { .ex-top { grid-template-columns: minmax(0, 1fr) minmax(0, 560px); align-items: end; } }
.ex-top .h1 { font-size: 24px; line-height: 30px; }
@media (min-width: 1280px) { .ex-top .h1 { font-size: 30px; line-height: 36px; } }
.ex-bar { position: sticky; top: 64px; z-index: 20; }
.picked { background: var(--paper); border: 1px solid var(--gray-200); border-radius: 16px; box-shadow: var(--shadow-card); padding: 8px 12px; }
.pk-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.pk-lab { font: 600 12px var(--font-text); letter-spacing: 0.02em; color: var(--gray-600); }
.pk { display: inline-flex; align-items: center; gap: 6px; padding: 2px 2px 2px 12px; border-radius: var(--r-full); background: var(--ink); color: #FFFFFF; font-weight: 700; }
.pk .gi { color: var(--brand-200); width: 20px; height: 20px; }
.pk .gi .lq { fill: rgba(255,255,255,0.15); }
.pk .btn-x { color: #FFFFFF; width: 44px; height: 44px; }
.pk .btn-x:hover { background: rgba(255,255,255,0.12); }
.pk-f { background: var(--brand-600); }
.pk-plus { font-weight: 700; color: var(--gray-600); }
.pk-hint { font-size: 14px; color: var(--gray-700); }
.pk-acts { display: flex; gap: 6px; margin-left: auto; flex-wrap: wrap; position: relative; }
.pk-menu { display: flex; gap: 6px; flex-wrap: wrap; }
.pk-ic { display: none; }
.pk-basis { font-size: 13px; line-height: 18px; color: var(--brand-700); font-weight: 600; margin-top: 4px; }
.pk-src { color: var(--gray-600); font-weight: 400; }
.ex-tabs { display: none; }
/* design critique 7: on a phone, once something is picked the hero folds away, search and the actions become icons,
   and the pick bar with the three lens tabs stays under the header */
@media (max-width: 767px) {
  .pk-src, .pk-hint, .pk-basis { display: none; }
  .pk-row:has(.pk) .pk-lab { display: none; }
  .ex-bar { margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter); background: #FFFFFF; border-bottom: 1px solid var(--gray-200); }
  .picked { border: 0; border-radius: 0; box-shadow: none; padding: 6px 0 4px; background: none; }
  .pk-row { flex-wrap: nowrap; gap: 6px; }
  /* final fixes 3: a pick's name wraps (two lines at most in practice) instead of being cut to "B…"; with two picks the
     second goes to its own row under the first, so both names read in full */
  .pk { min-width: 0; font-size: 15px; }
  .pk > span { min-width: 0; line-height: 18px; text-wrap: balance; overflow-wrap: anywhere; }
  .pk-plus { flex: none; }
  .pk-row.pk-2 { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "a a x" "p f f"; gap: 4px 6px; align-items: center; }
  .pk-2 > .pk { grid-area: a; justify-self: start; max-width: 100%; }
  .pk-2 > .pk-plus { grid-area: p; }
  .pk-2 > .pk.pk-f { grid-area: f; }
  .pk-2 > .pk-acts { grid-area: x; }
  /* the three starters: one compact row of one-line chips that scrolls sideways */
  .pk-try { overflow-x: auto; scrollbar-width: none; margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter); }
  .pk-try::-webkit-scrollbar { display: none; }
  .pk-try .pk-lab, .pk-try .starter { flex: none; text-wrap: nowrap; }
  .pk-try::after { content: ""; flex: none; width: 1px; }
  .pk-acts { flex-wrap: nowrap; gap: 0; flex: none; }
  .pk-ic { display: inline-flex; }
  .pk-menu { display: none; position: absolute; right: 0; top: calc(100% + 6px); z-index: 40; flex-direction: column; gap: 2px; min-width: 200px; background: var(--paper); border: 1px solid var(--gray-200); border-radius: 14px; box-shadow: var(--shadow-lg); padding: 6px; }
  .pk-acts.open .pk-menu { display: flex; }
  .pk-menu .btn { justify-content: flex-start; border: 0; width: 100%; }
  .ex-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 0 0 8px; }
  #ex:is([data-anchor="c"], [data-anchor="p"], [data-anchor="g"]):not(.searching) .ex-top { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); padding: 0; margin: -1px; }
  .lens-hd { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); margin: 0; }
  .ex-grid { margin-top: 8px; }
  .lens.card { padding-top: 14px; }
}
.ex-tab { min-height: 44px; border: 1px solid var(--gray-300); background: var(--paper); border-radius: 10px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer; }
.ex-tab[aria-current="true"] { background: var(--ink); color: #FFFFFF; border-color: var(--ink); }
.bdg { min-width: 22px; height: 22px; border-radius: 11px; background: var(--brand-600); color: #FFFFFF; font: 700 12px/22px var(--font-display); padding: 0 6px; }
.bdg:empty { display: none; }
.bdg.pulse { animation: pulse .6s var(--ease) 1; }
@keyframes pulse { 50% { transform: scale(1.3); } }
.ex-grid { display: grid; gap: 12px; margin-top: 12px; grid-template-areas: "g" "p" "c" "r"; grid-template-columns: minmax(0, 1fr); }
/* review v2 B1: the lit lenses sit beside the drinks list from the first screen. 768-1279: drinks on the left, people and
   places stacked on the right (the last row takes the drinks list's extra height). 1280 and wider: the reading row
   takes only its own height and the people and places lenses stay in view (sticky) while the drinks list scrolls. */
@media (min-width: 768px) { .ex-grid { grid-template-columns: minmax(0, 380px) minmax(0, 1fr); grid-template-areas: "r r" "c p" "c g"; grid-template-rows: auto auto 1fr; align-items: start; gap: 24px; } }
@media (min-width: 1280px) {
  /* final fixes 2: no row gap, so a closed reading leaves no 24 px step above People and Places; the open reading
     keeps its own 24 px below it. The three lens tops share one edge. */
  .ex-grid { grid-template-columns: minmax(0, 300px) minmax(0, 392px) minmax(0, 1fr); grid-template-areas: "c r r" "c p g"; grid-template-rows: auto 1fr; row-gap: 0; }
  #ex-read:not([hidden]) { margin-bottom: 24px; }
  #lens-c, #lens-p, #lens-g { position: sticky; top: 172px; align-self: start; max-height: calc(100vh - 188px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
}
#ex-read { grid-area: r; }
@media (max-width: 767px) { #ex[data-anchor="p"] .ex-grid, #ex[data-anchor="g"] .ex-grid { grid-template-areas: "g" "c" "p" "r"; } }
#lens-c { grid-area: c; } #lens-p { grid-area: p; } #lens-g { grid-area: g; }
.lens { scroll-margin-top: 140px; }
.lens-hd { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.lens-hd .ln { width: 26px; height: 26px; border-radius: 50%; background: var(--ink); color: #FFFFFF; font: 700 13px/26px var(--font-display); text-align: center; }
.lens-hd h2 { font: 700 17px var(--font-display); }
.lens-hd .cnt { font: 400 14px var(--font-text); color: var(--gray-600); }
.lens-h { font-size: 13px; line-height: 18px; font-weight: 600; color: var(--gray-700); margin: 4px 0 8px; }
.lens-sum { font-size: 15px; line-height: 22px; font-weight: 600; color: var(--ink); margin-bottom: 8px; }
.lens-t { font: 700 16px/22px var(--font-display); }
.lens-key { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; font-size: 12px; line-height: 16px; color: var(--gray-700); margin: 0 0 10px; }
.lk { display: inline-flex; align-items: center; gap: 5px; }
.kc { flex: none; width: 18px; height: 12px; border-radius: 6px; border: 1.5px solid var(--gray-700); background: var(--paper); }
.kc.k-dash { border-style: dashed; }
.kc.k-up { background: var(--brand-600); border-color: var(--brand-600); }
.kc.k-dn { background: var(--against); border-color: var(--against); }
.kc.k-firm { background: var(--gray-700); }
.kc.k-early { border-color: var(--gray-700); }
.kc.k-dot { border-style: dotted; border-width: 2px; }
.kc.k-unl { background: var(--gray-100); border-color: var(--gray-300); }
.kc.k-s10 { background: var(--brand-600); border-color: var(--brand-600); }
.kc.k-s25 { background: var(--brand-100); border-color: var(--brand-600); }
.kc.k-b25 { background: var(--gray-100); border-color: var(--against); }
.kc.k-b10 { background: var(--against); border-color: var(--against); }
.preview .lens .lens-b { opacity: 0.6; transition: opacity .12s; }
.preview #lens-c .lens-b { opacity: 1; }
.drinks { display: grid; gap: 4px; }
/* design critique 17: a group is one header row until it opens */
.dg-r { display: flex; align-items: center; gap: 4px; }
.dg-r .gchip, .dg-r .dg-h { flex: 1; min-width: 0; }
.dg-t { flex: none; width: 40px; height: 40px; border: 0; background: none; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; gap: 2px; cursor: pointer; color: var(--gray-700); }
@media (pointer: coarse), (max-width: 767px) { .dg-t { width: 44px; height: 44px; } }
.dg-t:hover { background: var(--gray-100); }
.dg-t .ico { transform: rotate(90deg); transition: transform .2s var(--ease); }
.dg.open .dg-t .ico { transform: rotate(-90deg); }
.dg-n { min-width: 18px; height: 18px; border-radius: 9px; background: var(--brand-600); color: #FFFFFF; font: 700 11px/18px var(--font-display); padding: 0 5px; }
.dg-c { display: none; flex-wrap: wrap; gap: 4px; margin: 4px 0 6px; }
.dg.open .dg-c { display: flex; }
.lt-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 4px; }
.info { position: relative; flex: none; }
.info-b { list-style: none; width: 44px; height: 44px; margin: -10px -10px -6px 0; display: flex; align-items: center; justify-content: center; border-radius: 50%; cursor: pointer; color: var(--brand-700); }
.info-b::-webkit-details-marker { display: none; }
.info-b:hover, .info[open] .info-b { background: var(--brand-50); }
.info-p { position: absolute; right: 0; top: 38px; width: min(320px, calc(100vw - 48px)); z-index: 15; background: var(--paper); border: 1px solid var(--gray-200); border-radius: 14px; box-shadow: var(--shadow-lg); padding: 12px 14px; font-size: 13px; line-height: 19px; color: var(--gray-700); }
.info-p p + p { margin-top: 6px; }
.info-p .ico { vertical-align: -3px; color: var(--brand-600); margin-right: 4px; }
#lg-head .pill-e { margin: 2px 0 6px; }
.dg-h { display: flex; align-items: center; gap: 6px; font-weight: 700; font-size: 15px; min-height: 40px; }
.chip { display: inline-flex; align-items: center; gap: 4px; min-height: 36px; padding: 4px 10px; border-radius: var(--r-full); border: 1.5px solid var(--gray-400); background: var(--paper); color: var(--ink); font-size: 13px; line-height: 18px; font-weight: 600; cursor: pointer; transition: background .12s var(--ease), border-color .12s var(--ease), color .12s var(--ease), opacity .12s var(--ease); }
@media (pointer: coarse), (max-width: 767px) { .chip { min-height: 44px; } }
.chip:hover { box-shadow: 0 0 0 1.5px var(--ink); }
.chip.ce { border-style: dashed; }
.chip .cv { font: 700 12px var(--font-display); color: var(--gray-600); }
.gchip { width: 100%; justify-content: flex-start; border-radius: 12px; padding: 6px 10px; font-size: 15px; border-color: transparent; background: var(--gray-50); }
.gchip .cv { margin-left: auto; font-size: 14px; color: var(--ink); }
.chip.sel { background: var(--ink); border-color: var(--ink); color: #FFFFFF; }
.chip.sel .cv, .chip.sel .gi { color: var(--brand-200); }
.chip.ring { box-shadow: 0 0 0 2px var(--brand-600); }
.chip.foc { box-shadow: 0 0 0 3px var(--accent-400); }
.chip.unl { background: var(--gray-100); border-color: var(--gray-300); color: var(--gray-600); }
.chip.unl .cv { color: var(--gray-600); }
.chip.up { border-color: var(--brand-600); color: var(--brand-800); }
.chip.dn { border-color: var(--against); color: var(--ink); }
.chip.up.t3 { background: var(--brand-600); color: #FFFFFF; }
.chip.up.t3 .cv, .chip.up.t3 .ico-dir { color: #FFFFFF; }
.chip.dn.t3 { background: var(--against); color: #FFFFFF; }
.chip.dn.t3 .cv, .chip.dn.t3 .ico-dir { color: #FFFFFF; }
.chip.t2 { background: var(--paper); }
.chip.t1 { border-style: dotted; border-width: 2px; }
.chip.s10 { background: var(--brand-600); border-color: var(--brand-600); color: #FFFFFF; }
.chip.s10 .cv, .chip.b10 .cv { color: #FFFFFF; }
.chip.s25 { background: var(--brand-100); border-color: var(--brand-600); }
.chip.b25 { background: var(--gray-100); border-color: var(--against); }
.chip.b10 { background: var(--against); border-color: var(--against); color: #FFFFFF; }
.pg { margin-top: 8px; }
.pg-h { font-size: 12px; font-weight: 700; letter-spacing: 0.02em; color: var(--gray-600); }
.pg-c { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.pchip.twin { box-shadow: 0 0 0 2px var(--brand-300); }
.twin-k { display: inline-block; width: 14px; height: 14px; border-radius: 50%; box-shadow: 0 0 0 2px var(--brand-300); vertical-align: -2px; margin: 0 2px; }
.leans { margin-bottom: 10px; }
.leans-h { font-weight: 700; font-size: 14px; }
.leans .lt-row { align-items: center; min-height: 28px; }
.lean-it { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; width: 100%; border: 0; background: none; text-align: left; padding: 6px 8px; border-radius: 10px; cursor: pointer; min-height: 44px; }
.lean-it:hover { background: var(--brand-25); }
.li-n { font-weight: 700; font-size: 14px; }
.li-p { font: 700 12px/16px var(--font-text); color: var(--brand-700); }
.lean-it.dn .li-p { color: var(--against); }
.li-r { grid-column: 1 / -1; font-size: 12px; line-height: 16px; color: var(--gray-700); }
.ex-places-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; align-items: center; margin-bottom: 8px; }
.reading { margin: 0; }
.rd-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 10px; row-gap: 4px; }
.rd-t { font: 700 17px/22px var(--font-display); margin: 0; grid-column: 1; grid-row: 1; }
.rd-t:focus { outline: none; }
.rd-t:focus-visible { outline: 3px solid var(--brand-500); outline-offset: 2px; }
.rd-head .btn-x { grid-column: 2; grid-row: 1; }
.rd-pill { grid-column: 1; grid-row: 2; justify-self: start; }
.reading .card-ink { padding: 0; }
.rd-s { margin-top: 10px; font-size: 15px; }
.rd-k { margin-top: 14px; font-weight: 700; font-size: 14px; }
.rd-ring { display: flex; align-items: center; gap: 16px; margin-top: 10px; flex-wrap: wrap; }
.rd-ring .rd-s { flex: 1 1 220px; margin: 0; }
.rd-fine { font-size: 13px; color: var(--gray-700); margin-top: 12px; }
.rd-an { margin-top: 10px; font-size: 14px; }
.rd-an summary { cursor: pointer; font-weight: 600; color: var(--brand-700); min-height: 44px; display: flex; align-items: center; }
.rd-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.reading .rc { margin-top: 10px; }
.sheet-h { display: none; }
/* design critique 18: the phone sheet arrives as a 220 px peek (title, rank, one sentence); the handle expands it */
@media (max-width: 767px) {
  .reading { position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; margin: 0; max-height: 220px; overflow: hidden; border-radius: 20px 20px 0 0; box-shadow: 0 -12px 32px rgba(11,45,43,0.25); animation: sheet-up .32s var(--ease); transition: max-height .32s var(--ease); }
  .reading.full { max-height: 85vh; overflow: auto; }
  .reading > .card { padding-top: 0; border-radius: 20px 20px 0 0; }
  .sheet-h { display: flex; width: calc(100% + 40px); margin: 0 -20px; height: 36px; align-items: center; justify-content: center; border: 0; background: none; cursor: pointer; }
  .sheet-bar { width: 36px; height: 4px; border-radius: 2px; background: var(--gray-300); }
  .reading:not(.full) .rd-ring svg { width: 72px; height: 72px; }
  .reading .rd-ring { flex-wrap: nowrap; gap: 12px; }
  .reading .rd-ring figcaption { font-size: 12px; }
}
@keyframes sheet-up { from { transform: translateY(40%); opacity: 0; } }
.ex-kbd { font-size: 14px; color: var(--gray-700); }
.ex-kbd kbd { font: 600 12px var(--font-text); border: 1px solid var(--gray-300); border-bottom-width: 2px; border-radius: 4px; padding: 0 5px; background: var(--paper); }
.ex-tools { display: flex; gap: 12px; align-items: center; margin-top: 10px; flex-wrap: wrap; }
.linkbtn { border: 0; background: none; color: var(--brand-700); font-weight: 600; cursor: pointer; min-height: 44px; display: inline-flex; align-items: center; gap: 6px; padding: 0; }
.ex-miss, .ex-fail { margin-top: 10px; padding: 10px 14px; border-radius: 12px; background: var(--paper); border: 1px solid var(--gray-300); }
.loading .ex-prog { display: block; }
.ex-prog { display: none; position: fixed; top: 64px; left: 0; height: 3px; width: 40%; background: var(--brand-600); z-index: 40; animation: prog 1.2s var(--ease) infinite; }
@keyframes prog { from { transform: translateX(-100%); } to { transform: translateX(260%); } }
.nojs-lists { margin-top: 24px; }
.ex .nojs-lists { display: none; }
.lists3 { display: grid; gap: 16px; }
@media (min-width: 768px) { .lists3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.lists3 ul { display: grid; }
.lists3 a { display: flex; min-height: 40px; align-items: center; font-weight: 600; }

/* ---------- people page: an index of compact cards (design critique 13) ---------- */
.ppl { display: grid; gap: 24px; }
@media (min-width: 1024px) { .ppl { grid-template-columns: 200px minmax(0, 1fr); } .ppl-ix { position: sticky; top: 88px; align-self: start; } }
.ppl-ix { display: flex; flex-wrap: wrap; gap: 0 16px; }
@media (min-width: 1024px) { .ppl-ix { display: grid; } }
.ppl-ix a { display: flex; min-height: 40px; align-items: center; font-weight: 600; }
.ppl-g { scroll-margin-top: 90px; }
.ppl-g + .ppl-g { margin-top: 28px; }
.ppl-gh { font: 700 17px/22px var(--font-display); display: flex; align-items: center; gap: 8px; }
.ppl-gh > span { font: 600 13px/20px var(--font-text); color: var(--gray-600); background: var(--gray-100); border-radius: var(--r-full); padding: 0 8px; }
.ppl-grid { display: grid; gap: 10px; margin-top: 12px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .ppl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .ppl-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pc { position: relative; display: grid; align-content: center; gap: 3px; min-height: 96px; height: 100%; padding: 12px 40px 12px 16px; border-radius: 16px; background: var(--paper); border: 1px solid var(--gray-200); box-shadow: var(--shadow-card); color: var(--ink); text-decoration: none; scroll-margin-top: 90px; }
.pc:hover { border-color: var(--brand-600); text-decoration: none; color: var(--ink); }
.ppl-grid li.e .pc { border: 1.5px dashed var(--brand-300); box-shadow: none; }
.pc-n { font: 700 16px/21px var(--font-display); }
.pc-l { display: flex; align-items: center; gap: 4px; font-size: 14px; line-height: 19px; font-weight: 600; color: var(--brand-700); }
.ppl-grid li.e .pc-l { color: var(--gray-600); }
.pc-t { font-size: 13px; line-height: 18px; color: var(--gray-700); }
.pc-t b { color: var(--ink); font-weight: 600; }
.pc-c { position: absolute; right: 12px; top: 50%; margin-top: -10px; color: var(--brand-600); }
.ppl-main.firm li.e { display: none; }
.ppl-hid { display: none; margin-top: 4px; }
.ppl-main.firm .ppl-hid { display: block; }
.ppl-tools { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.tgl { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; border: 1px solid var(--gray-300); border-radius: var(--r-full); padding: 6px 14px 6px 8px; background: var(--paper); font-weight: 600; font-size: 15px; cursor: pointer; color: var(--ink); }
.sw-k { position: relative; width: 36px; height: 20px; border-radius: 10px; background: var(--gray-300); transition: background .2s var(--ease); }
.sw-k::after { content: ""; position: absolute; left: 2px; top: 2px; width: 16px; height: 16px; border-radius: 50%; background: #FFFFFF; transition: transform .2s var(--ease); }
.tgl[aria-checked="true"] .sw-k { background: var(--brand-600); }
.tgl[aria-checked="true"] .sw-k::after { transform: translateX(16px); }

/* ---------- how and start ---------- */
.prose { max-width: 720px; }
.prose h2 { margin-top: 28px; }
.prose p, .prose li { margin-top: 10px; color: var(--gray-700); }
.prose ul { list-style: disc; padding-left: 20px; }
.how-t { width: 100%; border-collapse: collapse; margin-top: 12px; font-size: 15px; }
.how-t th, .how-t td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--gray-200); vertical-align: top; }
.checks { display: grid; gap: 6px; margin: 12px 0 16px; }
.checks li { display: flex; gap: 8px; align-items: center; }
.checks .ico { color: var(--brand-600); }
.soon { display: flex; gap: 8px; align-items: flex-start; margin-top: 12px; }
.miss { display: flex; align-items: center; gap: 8px; font-weight: 600; margin-top: 16px; }

/* ---------- tooltip and pop card ---------- */
.tip { position: fixed; z-index: 70; max-width: 300px; background: var(--ink); color: #FFFFFF; font-size: 13px; line-height: 18px; padding: 8px 10px; border-radius: 8px; pointer-events: none; box-shadow: var(--shadow-lg); }
.pop { position: fixed; z-index: 70; width: 320px; max-width: calc(100vw - 16px); background: var(--paper); border: 1px solid var(--gray-200); border-radius: 16px; box-shadow: var(--shadow-lg); padding: 16px 16px 8px; }
.pop-t { font: 700 17px/22px var(--font-display); padding-right: 40px; }
.pop-s { font-size: 15px; line-height: 22px; color: var(--gray-700); margin: 6px 0 12px; }
.pop-a { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; font-weight: 700; border-top: 1px solid var(--gray-100); }
/* design critique 3: on a phone the card is a bottom sheet, never over the list it belongs to */
.pop.pop-sheet { left: 16px; right: 16px; top: auto; bottom: calc(16px + env(safe-area-inset-bottom)); width: auto; max-width: none; box-shadow: 0 -8px 32px rgba(11,45,43,0.25); }
.pop-x { position: absolute; top: 4px; right: 4px; }
.tip-pos { left: 0; top: 0; }
.pop-pos { left: 0; top: 0; }
.pop .ring { margin-top: 6px; }

/* ---------- pointer words: "hover" only where a pointer can hover (review v2 m2) ---------- */
.on-touch { display: none; }
@media (hover: none) { .on-hover { display: none; } .on-touch { display: inline; } }

/* ---------- motion ---------- */
.fade { animation: fade .12s linear; }
@keyframes fade { from { opacity: 0.4; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0s !important; transition-delay: 0s !important; animation: none !important; }
  .fade { animation: fade .12s linear !important; }
  .chip, .lens-b { transition: opacity .12s linear !important; }
}
@media print { .site-head, #pin, .ask, .share-menu, .picked, .ex-tabs { display: none !important; } }

/* phones: the three gauges as rows (ring left) */
@media (max-width: 559px) {
  .minis { grid-template-columns: minmax(0, 1fr); }
  .mini { grid-template-columns: 76px minmax(0, 1fr); grid-template-areas: "r n" "r t"; column-gap: 12px; align-items: center; }
  .mini-n { grid-area: n; align-self: end; } .mini .ring { grid-area: r; } .mini-r { grid-area: t; align-self: start; }
  .mini .ring svg { width: 72px; height: 72px; }
  .mini .ring figcaption { font-size: 12px; line-height: 15px; }
}

/* generated by tools/build_site.py: data-driven widths and positions, half-percent steps, all 201 of each, so the live charts can use any of them */
.pw-0{--w:0%}
.pw-1{--w:0.5%}
.pw-2{--w:1%}
.pw-3{--w:1.5%}
.pw-4{--w:2%}
.pw-5{--w:2.5%}
.pw-6{--w:3%}
.pw-7{--w:3.5%}
.pw-8{--w:4%}
.pw-9{--w:4.5%}
.pw-10{--w:5%}
.pw-11{--w:5.5%}
.pw-12{--w:6%}
.pw-13{--w:6.5%}
.pw-14{--w:7%}
.pw-15{--w:7.5%}
.pw-16{--w:8%}
.pw-17{--w:8.5%}
.pw-18{--w:9%}
.pw-19{--w:9.5%}
.pw-20{--w:10%}
.pw-21{--w:10.5%}
.pw-22{--w:11%}
.pw-23{--w:11.5%}
.pw-24{--w:12%}
.pw-25{--w:12.5%}
.pw-26{--w:13%}
.pw-27{--w:13.5%}
.pw-28{--w:14%}
.pw-29{--w:14.5%}
.pw-30{--w:15%}
.pw-31{--w:15.5%}
.pw-32{--w:16%}
.pw-33{--w:16.5%}
.pw-34{--w:17%}
.pw-35{--w:17.5%}
.pw-36{--w:18%}
.pw-37{--w:18.5%}
.pw-38{--w:19%}
.pw-39{--w:19.5%}
.pw-40{--w:20%}
.pw-41{--w:20.5%}
.pw-42{--w:21%}
.pw-43{--w:21.5%}
.pw-44{--w:22%}
.pw-45{--w:22.5%}
.pw-46{--w:23%}
.pw-47{--w:23.5%}
.pw-48{--w:24%}
.pw-49{--w:24.5%}
.pw-50{--w:25%}
.pw-51{--w:25.5%}
.pw-52{--w:26%}
.pw-53{--w:26.5%}
.pw-54{--w:27%}
.pw-55{--w:27.5%}
.pw-56{--w:28%}
.pw-57{--w:28.5%}
.pw-58{--w:29%}
.pw-59{--w:29.5%}
.pw-60{--w:30%}
.pw-61{--w:30.5%}
.pw-62{--w:31%}
.pw-63{--w:31.5%}
.pw-64{--w:32%}
.pw-65{--w:32.5%}
.pw-66{--w:33%}
.pw-67{--w:33.5%}
.pw-68{--w:34%}
.pw-69{--w:34.5%}
.pw-70{--w:35%}
.pw-71{--w:35.5%}
.pw-72{--w:36%}
.pw-73{--w:36.5%}
.pw-74{--w:37%}
.pw-75{--w:37.5%}
.pw-76{--w:38%}
.pw-77{--w:38.5%}
.pw-78{--w:39%}
.pw-79{--w:39.5%}
.pw-80{--w:40%}
.pw-81{--w:40.5%}
.pw-82{--w:41%}
.pw-83{--w:41.5%}
.pw-84{--w:42%}
.pw-85{--w:42.5%}
.pw-86{--w:43%}
.pw-87{--w:43.5%}
.pw-88{--w:44%}
.pw-89{--w:44.5%}
.pw-90{--w:45%}
.pw-91{--w:45.5%}
.pw-92{--w:46%}
.pw-93{--w:46.5%}
.pw-94{--w:47%}
.pw-95{--w:47.5%}
.pw-96{--w:48%}
.pw-97{--w:48.5%}
.pw-98{--w:49%}
.pw-99{--w:49.5%}
.pw-100{--w:50%}
.pw-101{--w:50.5%}
.pw-102{--w:51%}
.pw-103{--w:51.5%}
.pw-104{--w:52%}
.pw-105{--w:52.5%}
.pw-106{--w:53%}
.pw-107{--w:53.5%}
.pw-108{--w:54%}
.pw-109{--w:54.5%}
.pw-110{--w:55%}
.pw-111{--w:55.5%}
.pw-112{--w:56%}
.pw-113{--w:56.5%}
.pw-114{--w:57%}
.pw-115{--w:57.5%}
.pw-116{--w:58%}
.pw-117{--w:58.5%}
.pw-118{--w:59%}
.pw-119{--w:59.5%}
.pw-120{--w:60%}
.pw-121{--w:60.5%}
.pw-122{--w:61%}
.pw-123{--w:61.5%}
.pw-124{--w:62%}
.pw-125{--w:62.5%}
.pw-126{--w:63%}
.pw-127{--w:63.5%}
.pw-128{--w:64%}
.pw-129{--w:64.5%}
.pw-130{--w:65%}
.pw-131{--w:65.5%}
.pw-132{--w:66%}
.pw-133{--w:66.5%}
.pw-134{--w:67%}
.pw-135{--w:67.5%}
.pw-136{--w:68%}
.pw-137{--w:68.5%}
.pw-138{--w:69%}
.pw-139{--w:69.5%}
.pw-140{--w:70%}
.pw-141{--w:70.5%}
.pw-142{--w:71%}
.pw-143{--w:71.5%}
.pw-144{--w:72%}
.pw-145{--w:72.5%}
.pw-146{--w:73%}
.pw-147{--w:73.5%}
.pw-148{--w:74%}
.pw-149{--w:74.5%}
.pw-150{--w:75%}
.pw-151{--w:75.5%}
.pw-152{--w:76%}
.pw-153{--w:76.5%}
.pw-154{--w:77%}
.pw-155{--w:77.5%}
.pw-156{--w:78%}
.pw-157{--w:78.5%}
.pw-158{--w:79%}
.pw-159{--w:79.5%}
.pw-160{--w:80%}
.pw-161{--w:80.5%}
.pw-162{--w:81%}
.pw-163{--w:81.5%}
.pw-164{--w:82%}
.pw-165{--w:82.5%}
.pw-166{--w:83%}
.pw-167{--w:83.5%}
.pw-168{--w:84%}
.pw-169{--w:84.5%}
.pw-170{--w:85%}
.pw-171{--w:85.5%}
.pw-172{--w:86%}
.pw-173{--w:86.5%}
.pw-174{--w:87%}
.pw-175{--w:87.5%}
.pw-176{--w:88%}
.pw-177{--w:88.5%}
.pw-178{--w:89%}
.pw-179{--w:89.5%}
.pw-180{--w:90%}
.pw-181{--w:90.5%}
.pw-182{--w:91%}
.pw-183{--w:91.5%}
.pw-184{--w:92%}
.pw-185{--w:92.5%}
.pw-186{--w:93%}
.pw-187{--w:93.5%}
.pw-188{--w:94%}
.pw-189{--w:94.5%}
.pw-190{--w:95%}
.pw-191{--w:95.5%}
.pw-192{--w:96%}
.pw-193{--w:96.5%}
.pw-194{--w:97%}
.pw-195{--w:97.5%}
.pw-196{--w:98%}
.pw-197{--w:98.5%}
.pw-198{--w:99%}
.pw-199{--w:99.5%}
.pw-200{--w:100%}
.pl-0{left:0%}
.pl-1{left:0.5%}
.pl-2{left:1%}
.pl-3{left:1.5%}
.pl-4{left:2%}
.pl-5{left:2.5%}
.pl-6{left:3%}
.pl-7{left:3.5%}
.pl-8{left:4%}
.pl-9{left:4.5%}
.pl-10{left:5%}
.pl-11{left:5.5%}
.pl-12{left:6%}
.pl-13{left:6.5%}
.pl-14{left:7%}
.pl-15{left:7.5%}
.pl-16{left:8%}
.pl-17{left:8.5%}
.pl-18{left:9%}
.pl-19{left:9.5%}
.pl-20{left:10%}
.pl-21{left:10.5%}
.pl-22{left:11%}
.pl-23{left:11.5%}
.pl-24{left:12%}
.pl-25{left:12.5%}
.pl-26{left:13%}
.pl-27{left:13.5%}
.pl-28{left:14%}
.pl-29{left:14.5%}
.pl-30{left:15%}
.pl-31{left:15.5%}
.pl-32{left:16%}
.pl-33{left:16.5%}
.pl-34{left:17%}
.pl-35{left:17.5%}
.pl-36{left:18%}
.pl-37{left:18.5%}
.pl-38{left:19%}
.pl-39{left:19.5%}
.pl-40{left:20%}
.pl-41{left:20.5%}
.pl-42{left:21%}
.pl-43{left:21.5%}
.pl-44{left:22%}
.pl-45{left:22.5%}
.pl-46{left:23%}
.pl-47{left:23.5%}
.pl-48{left:24%}
.pl-49{left:24.5%}
.pl-50{left:25%}
.pl-51{left:25.5%}
.pl-52{left:26%}
.pl-53{left:26.5%}
.pl-54{left:27%}
.pl-55{left:27.5%}
.pl-56{left:28%}
.pl-57{left:28.5%}
.pl-58{left:29%}
.pl-59{left:29.5%}
.pl-60{left:30%}
.pl-61{left:30.5%}
.pl-62{left:31%}
.pl-63{left:31.5%}
.pl-64{left:32%}
.pl-65{left:32.5%}
.pl-66{left:33%}
.pl-67{left:33.5%}
.pl-68{left:34%}
.pl-69{left:34.5%}
.pl-70{left:35%}
.pl-71{left:35.5%}
.pl-72{left:36%}
.pl-73{left:36.5%}
.pl-74{left:37%}
.pl-75{left:37.5%}
.pl-76{left:38%}
.pl-77{left:38.5%}
.pl-78{left:39%}
.pl-79{left:39.5%}
.pl-80{left:40%}
.pl-81{left:40.5%}
.pl-82{left:41%}
.pl-83{left:41.5%}
.pl-84{left:42%}
.pl-85{left:42.5%}
.pl-86{left:43%}
.pl-87{left:43.5%}
.pl-88{left:44%}
.pl-89{left:44.5%}
.pl-90{left:45%}
.pl-91{left:45.5%}
.pl-92{left:46%}
.pl-93{left:46.5%}
.pl-94{left:47%}
.pl-95{left:47.5%}
.pl-96{left:48%}
.pl-97{left:48.5%}
.pl-98{left:49%}
.pl-99{left:49.5%}
.pl-100{left:50%}
.pl-101{left:50.5%}
.pl-102{left:51%}
.pl-103{left:51.5%}
.pl-104{left:52%}
.pl-105{left:52.5%}
.pl-106{left:53%}
.pl-107{left:53.5%}
.pl-108{left:54%}
.pl-109{left:54.5%}
.pl-110{left:55%}
.pl-111{left:55.5%}
.pl-112{left:56%}
.pl-113{left:56.5%}
.pl-114{left:57%}
.pl-115{left:57.5%}
.pl-116{left:58%}
.pl-117{left:58.5%}
.pl-118{left:59%}
.pl-119{left:59.5%}
.pl-120{left:60%}
.pl-121{left:60.5%}
.pl-122{left:61%}
.pl-123{left:61.5%}
.pl-124{left:62%}
.pl-125{left:62.5%}
.pl-126{left:63%}
.pl-127{left:63.5%}
.pl-128{left:64%}
.pl-129{left:64.5%}
.pl-130{left:65%}
.pl-131{left:65.5%}
.pl-132{left:66%}
.pl-133{left:66.5%}
.pl-134{left:67%}
.pl-135{left:67.5%}
.pl-136{left:68%}
.pl-137{left:68.5%}
.pl-138{left:69%}
.pl-139{left:69.5%}
.pl-140{left:70%}
.pl-141{left:70.5%}
.pl-142{left:71%}
.pl-143{left:71.5%}
.pl-144{left:72%}
.pl-145{left:72.5%}
.pl-146{left:73%}
.pl-147{left:73.5%}
.pl-148{left:74%}
.pl-149{left:74.5%}
.pl-150{left:75%}
.pl-151{left:75.5%}
.pl-152{left:76%}
.pl-153{left:76.5%}
.pl-154{left:77%}
.pl-155{left:77.5%}
.pl-156{left:78%}
.pl-157{left:78.5%}
.pl-158{left:79%}
.pl-159{left:79.5%}
.pl-160{left:80%}
.pl-161{left:80.5%}
.pl-162{left:81%}
.pl-163{left:81.5%}
.pl-164{left:82%}
.pl-165{left:82.5%}
.pl-166{left:83%}
.pl-167{left:83.5%}
.pl-168{left:84%}
.pl-169{left:84.5%}
.pl-170{left:85%}
.pl-171{left:85.5%}
.pl-172{left:86%}
.pl-173{left:86.5%}
.pl-174{left:87%}
.pl-175{left:87.5%}
.pl-176{left:88%}
.pl-177{left:88.5%}
.pl-178{left:89%}
.pl-179{left:89.5%}
.pl-180{left:90%}
.pl-181{left:90.5%}
.pl-182{left:91%}
.pl-183{left:91.5%}
.pl-184{left:92%}
.pl-185{left:92.5%}
.pl-186{left:93%}
.pl-187{left:93.5%}
.pl-188{left:94%}
.pl-189{left:94.5%}
.pl-190{left:95%}
.pl-191{left:95.5%}
.pl-192{left:96%}
.pl-193{left:96.5%}
.pl-194{left:97%}
.pl-195{left:97.5%}
.pl-196{left:98%}
.pl-197{left:98.5%}
.pl-198{left:99%}
.pl-199{left:99.5%}
.pl-200{left:100%}