/* Black Snapper sample dashboard: standalone build */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/Inter-Regular.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/Inter-Medium.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/Inter-SemiBold.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/Inter-Bold.woff2") format("woff2"); }
@font-face { font-family: "Lora"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("fonts/Lora-Variable.woff2") format("woff2"); }

:root {
  --font-anthropic-sans: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-anthropic-serif: "Lora", Georgia, "Times New Roman", serif;
  --cds-font-size-body: 15px;
  --cds-font-size-caption: 13px;
  --cds-font-size-heading: 17px;
  --cds-font-size-title: 30px;
  --cds-font-weight-medium: 600;
  --cds-pad-xs: 6px; --cds-pad-sm: 10px; --cds-pad-md: 14px; --cds-pad-lg: 20px; --cds-pad-xl: 32px;
  --cds-gap-xs: 6px; --cds-gap-sm: 10px; --cds-gap-md: 16px; --cds-gap-lg: 24px;
  --cds-radius: 10px;
  --cds-shadow-popover: 0 6px 24px rgba(21, 26, 43, 0.22);
  --cds-dur-slow: 300ms;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: #FAF6EC; }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
.bs-wrap { max-width: 1280px; margin: 0 auto; }
.bs { border-radius: 0 !important; }
@media (max-width: 720px) { :root { --cds-font-size-title: 24px; --cds-pad-xl: 22px; } }
[hidden] { display: none !important; }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 2px solid #FFC93C; outline-offset: 2px; }

#dash-root { --dash-gutter: 0; }
.bs { --bs-navy:#151A2B; --bs-cream:#FAF6EC; --bs-yellow:#FFC93C; --bs-sand:#E6DFCC;
  --color-fg:#151A2B; --color-fg-muted:#5B6072; --color-bg:#FAF6EC; --color-panel:#FFFFFF; --color-border-line:#E6DFCC;
  --color-ok:#2F7D5B; --color-bad:#C2412D; --color-warn:#9A6A12;
  background: var(--bs-cream); color: var(--bs-navy); font-family: var(--font-anthropic-sans); font-size: var(--cds-font-size-body); border-radius: var(--cds-radius); overflow: hidden; }
.bs-head { background: var(--bs-navy); color: var(--bs-cream); padding: var(--cds-pad-xl) var(--cds-pad-xl) var(--cds-pad-lg); }
.bs-brandrow { display:flex; align-items:center; justify-content:space-between; gap: var(--cds-gap-md); flex-wrap: wrap; }
.bs-logo { display:flex; align-items:center; gap: 10px; color: inherit; text-decoration: none; }
.bs-logo svg { width: 40px; height: 39px; display:block; }
.bs-word { font-weight: 700; font-size: 17px; line-height: 1; letter-spacing: -0.01em; color: var(--bs-cream); }
.bs-client { font-size: var(--cds-font-size-caption); letter-spacing: .08em; text-transform: uppercase; color: var(--bs-yellow); }
.bs-title { font-family: var(--font-anthropic-serif); font-weight: 400; font-size: var(--cds-font-size-title); margin: var(--cds-gap-lg) 0 var(--cds-gap-xs); line-height: 1.2; }
.bs-take { max-width: 60rem; margin: 0; line-height: 1.5; color: #E9E4D6; }
.bs .bs-head b { color: var(--bs-yellow); font-weight: 600; }
.bs-sub { margin-top: var(--cds-gap-sm); font-size: var(--cds-font-size-caption); color: #B9BCC6; }
.bs-sample { display:flex; gap: var(--cds-gap-md); align-items:center; justify-content: space-between; flex-wrap: wrap; background: var(--bs-yellow); color: var(--bs-navy); padding: var(--cds-pad-sm) var(--cds-pad-xl); font-size: var(--cds-font-size-caption); line-height: 1.45; }
.bs-sample p { margin: 0; max-width: 56rem; }
.bs-cta { display:inline-block; background: var(--bs-navy); color: var(--bs-cream); text-decoration: none; font-weight: 600; padding: 8px 14px; border-radius: 999px; white-space: nowrap; font-size: var(--cds-font-size-caption); }
.bs-cta:hover { background: #2A3150; }
.bs-cta.alt { background: var(--bs-yellow); color: var(--bs-navy); }
.bs-cta.alt:hover { background: #FFD666; }
.bs-tabs { display:flex; gap: var(--cds-gap-xs); flex-wrap: wrap; padding: var(--cds-pad-sm) var(--cds-pad-xl) 0; background: var(--bs-navy); }
.bs-tab { appearance:none; border:0; background: transparent; color: #D8D3C4; font: inherit; font-size: var(--cds-font-size-body); padding: var(--cds-pad-sm) var(--cds-pad-md); border-radius: var(--cds-radius) var(--cds-radius) 0 0; cursor: pointer; }
.bs-tab:hover { color: var(--bs-cream); }
.bs-tab[aria-selected="true"] { background: var(--bs-cream); color: var(--bs-navy); font-weight: 600; }
.bs-tab:focus-visible { outline: 2px solid var(--bs-yellow); }
.bs-page { padding: var(--cds-pad-xl); display: grid; gap: var(--cds-gap-lg); }
.bs-grid { display:grid; gap: var(--cds-gap-md); grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
.bs-tiles { display:grid; gap: var(--cds-gap-md); grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); }
.bs-card { background: var(--color-panel); border: 1px solid var(--color-border-line); border-radius: var(--cds-radius); padding: var(--cds-pad-lg); min-width: 0; }
.bs-card h3 { font-size: var(--cds-font-size-heading); font-weight: var(--cds-font-weight-medium); margin: 0; }
.bs-note { color: var(--color-fg-muted); font-size: var(--cds-font-size-caption); margin: var(--cds-gap-xs) 0 var(--cds-gap-md); line-height: 1.45; }
.bs-tile { border-top: 4px solid var(--bs-yellow); }
.bs-tile .lab { font-size: var(--cds-font-size-caption); color: var(--color-fg-muted); }
.bs-tile .big { font-family: var(--font-anthropic-serif); font-weight: 400; font-size: 2.4rem; line-height: 1.1; margin: var(--cds-gap-xs) 0; font-variant-numeric: tabular-nums; }
.bs-tile .sub { font-size: var(--cds-font-size-caption); color: var(--color-fg-muted); }
.bs .bs-tile .sub b { font-weight: 700; color: var(--bs-navy); }
.bs-up { color: var(--color-ok); } .bs-down { color: var(--color-bad); } .bs-flat { color: var(--color-fg-muted); }
.bs-state { border-left: 4px solid var(--bs-yellow); }
.bs-chart { position: relative; min-height: 200px; }
.bs-chart svg text { font-family: var(--font-anthropic-sans); fill: var(--bs-navy); }
.bs-tip { position:absolute; pointer-events:none; background: var(--bs-navy); color: var(--bs-cream); border-radius: var(--cds-radius); padding: var(--cds-pad-xs) var(--cds-pad-sm); font-size: var(--cds-font-size-caption); box-shadow: var(--cds-shadow-popover); white-space: nowrap; z-index: 3; }
.bs-tip .t { color: var(--bs-yellow); }
.bs-legend { display:flex; gap: var(--cds-gap-md); flex-wrap: wrap; font-size: var(--cds-font-size-caption); color: var(--color-fg-muted); margin-bottom: var(--cds-gap-sm); }
.bs-sw { display:inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; vertical-align: -1px; }
.bs-tablebox { max-height: 32rem; overflow: auto; position: relative; }
.bs-table { width:100%; border-collapse: collapse; font-size: var(--cds-font-size-caption); font-variant-numeric: tabular-nums; }
.bs-table th { text-align: left; font-weight: 600; position: sticky; top: 0; background: var(--color-panel); border-bottom: 2px solid var(--bs-navy); padding: 6px 8px; z-index: 1; }
.bs-table td { border-bottom: 1px solid var(--color-border-line); padding: 6px 8px; vertical-align: top; }
.bs-table td.num, .bs-table th.num { text-align: right; }
.bs-table tr.bs-target td { background: #FFF4D4; font-weight: 600; }
.bs-table td.bs-stage { font-weight: 700; white-space: nowrap; }
.bs-table td.bs-muted { color: var(--color-fg-muted); font-style: italic; }
.bs-search { width: 100%; max-width: 22rem; box-sizing: border-box; font: inherit; font-size: var(--cds-font-size-caption); padding: 6px 10px; border: 1px solid var(--color-border-line); border-radius: var(--cds-radius); background: var(--bs-cream); color: var(--bs-navy); margin-bottom: var(--cds-gap-sm); }
.bs-pill { display:inline-block; padding: 1px 8px; border-radius: 999px; font-size: 11px; background: var(--bs-sand); }
.bs-pill.negative { background:#F5D9D3; color:#8A2A1B; } .bs-pill.mixed { background:#FBEBC7; color:#7A5410; } .bs-pill.positive { background:#DCEFE4; color:#1F5A40; }
.bs-bartrack { display:inline-block; width: 6rem; max-width: 40%; height: 10px; background:#F1EDE2; border-radius: 3px; vertical-align: middle; margin-right: 8px; overflow: hidden; }
.bs-bar { display:block; height: 100%; background: var(--bs-navy); border-radius: 3px; }
.bs-tone { display:inline-flex; width: 7rem; max-width: 45%; height: 10px; border-radius: 3px; overflow: hidden; vertical-align: middle; margin-right: 8px; background:#F1EDE2; }
.bs-tone i { display:block; height: 100%; }
.bs-prio td { vertical-align: top; }
.bs-prio td.rank { font-family: var(--font-anthropic-serif); font-size: 1.5rem; line-height: 1; }
.bs-prio td.act b { display:block; margin-bottom: 2px; }
.bs-eff { display:inline-block; padding: 1px 8px; border-radius: 999px; font-size: 11px; white-space: nowrap; }
.bs-eff.low { background: #DCEFE4; color: #1F5A40; } .bs-eff.med { background: #FBEBC7; color: #7A5410; }
.bs-ctacard { background: var(--bs-navy); color: var(--bs-cream); border-radius: var(--cds-radius); padding: var(--cds-pad-xl); display:grid; gap: var(--cds-gap-md); grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); align-items: center; }
.bs-ctacard h3 { font-family: var(--font-anthropic-serif); font-weight: 400; font-size: var(--cds-font-size-title); margin: 0 0 var(--cds-gap-sm); line-height: 1.2; }
.bs-ctacard p { margin: 0 0 var(--cds-gap-sm); line-height: 1.5; color: #E9E4D6; }
.bs-ctacard ul { margin: 0 0 var(--cds-gap-md); padding-left: 1.1rem; line-height: 1.6; color: #E9E4D6; }
.bs-ctacard a.bs-more { color: var(--bs-yellow); }
.bs-sign { font-size: var(--cds-font-size-caption); color: #B9BCC6; margin-top: var(--cds-gap-sm); }
.bs-sign b { color: var(--bs-cream); }
.bs-sign a { color: #B9BCC6; }
.bs-quotes { display:grid; gap: var(--cds-gap-md); grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); }
.bs-quote { border-left: 4px solid var(--bs-sand); padding: var(--cds-pad-sm) var(--cds-pad-md); background: var(--bs-cream); border-radius: 0 var(--cds-radius) var(--cds-radius) 0; }
.bs-quote.positive { border-left-color: #2F7D5B; } .bs-quote.negative { border-left-color: #C2412D; }
.bs-quote q { display:block; font-family: var(--font-anthropic-serif); font-size: 1.05rem; line-height: 1.45; margin-bottom: 6px; }
.bs-quote .who { font-size: var(--cds-font-size-caption); color: var(--color-fg-muted); }
.bs-cell { display:inline-block; min-width: 2.2rem; text-align:center; border-radius: 4px; padding: 2px 4px; cursor: pointer; }
.bs-cell.hit { background: var(--bs-navy); color: var(--bs-cream); }
.bs-cell.top { background: var(--bs-yellow); color: var(--bs-navy); font-weight: 700; }
.bs-cell.miss { background: #F1EDE2; color: #9A9585; }
.bs-cell.sel { outline: 2px solid #151A2B; outline-offset: 1px; }
.bs-months { display:flex; gap: 6px; flex-wrap: wrap; margin-bottom: var(--cds-gap-sm); }
.bs-mbtn { appearance:none; border: 1px solid var(--color-border-line); background: var(--bs-cream); color: var(--bs-navy); font: inherit; font-size: var(--cds-font-size-caption); padding: 4px 10px; border-radius: 999px; cursor: pointer; }
.bs-mbtn[aria-pressed="true"] { background: var(--bs-navy); color: var(--bs-cream); border-color: var(--bs-navy); }
.bs-raw { white-space: pre-wrap; font-size: var(--cds-font-size-caption); line-height: 1.55; max-height: 28rem; overflow: auto; background: var(--bs-cream); border-radius: var(--cds-radius); padding: var(--cds-pad-md); margin: 0; font-family: var(--font-anthropic-sans); }
.bs-raw mark { background: var(--bs-yellow); color: var(--bs-navy); padding: 0 2px; border-radius: 2px; }
.bs-heat td.hc { text-align:center; min-width: 3.2rem; }
.bs-steps { margin: 0; padding-left: 1.2rem; line-height: 1.6; }
.bs-steps li { margin-bottom: 6px; }
.bs-foot { padding: 0 var(--cds-pad-xl) var(--cds-pad-xl); color: var(--color-fg-muted); font-size: var(--cds-font-size-caption); }
.bs-foot a { color: var(--bs-navy); }
.bs dl { display:grid; grid-template-columns: minmax(8rem, 14rem) 1fr; gap: 6px 16px; margin: var(--cds-gap-md) 0 0; }
.bs dt { font-weight: 600; } .bs dd { margin: 0; color: var(--color-fg-muted); }
.bs-gov { font-family: var(--font-anthropic-serif); font-weight: 400; font-size: 1.4rem; line-height: 1.45; margin: 0 0 var(--cds-gap-lg); max-width: 64rem; }
.bs-scq { display:grid; gap: var(--cds-gap-md); grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
.bs-scq > div { border-top: 2px solid var(--bs-sand); padding-top: var(--cds-pad-sm); font-size: var(--cds-font-size-caption); line-height: 1.55; }
.bs-scq .k { display:block; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: 11px; color: var(--color-fg-muted); margin-bottom: 4px; }
.bs .bs-scq b, .bs .bs-point b { font-weight: 700; color: var(--bs-navy); }
.bs-points { display:grid; gap: var(--cds-gap-md); grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); }
.bs-point { border-top: 4px solid var(--bs-navy); }
.bs-point h4 { margin: 0 0 6px; font-size: var(--cds-font-size-body); font-weight: 700; }
.bs-point p { margin: 0 0 8px; line-height: 1.5; }
.bs-point ul { margin: 0; padding-left: 1.1rem; font-size: var(--cds-font-size-caption); line-height: 1.55; color: var(--color-fg-muted); }
.bs-point li { margin-bottom: 4px; }
@media (max-width: 560px) { .bs-head, .bs-page, .bs-sample { padding-left: var(--cds-pad-lg); padding-right: var(--cds-pad-lg); } .bs-tabs { padding-inline: var(--cds-pad-lg); } .bs dl { grid-template-columns: 1fr; } }
@media print { .bs-tabs, .bs-search, .bs-sample .bs-cta { display: none !important; } .bs-page[hidden] { display: grid !important; } .bs-tablebox { max-height: none; overflow: visible; } }