/* statum-areas.css: the six catalog areas, in pastel (Shirish, 4 Oct 2026: "lighter pastel colours", the old compact card).
   One colour per catalog area. The colours code AREAS only: never a data value, never good or bad, and no card names its
   area: the colour is the label. Each area has a pastel BG, a LINE (borders, dots) and a DEEP shade for figures and links.
   Contrast checked 4 Oct: deep on its pastel 4.9 to 6.3; ink on pastel 15.5+; body grey #374151 on pastel 8.5+.
   Loaded by index.html (and console/index.html) and catalog.html only. The SouthState pages do not load this file. */
:root { --area-on: #111111; }
[data-area="hub"]  { --a-bg: #FFF4CC; --a-line: #F2D272; --a-deep: #7A5600; }  /* Start here */
[data-area="peer"] { --a-bg: #FFE6DA; --a-line: #F7B79B; --a-deep: #A8431A; }  /* Peers and the industry */
[data-area="one"]  { --a-bg: #DDF1F8; --a-line: #97D2E6; --a-deep: #0E6F8C; }  /* One bank, explained */
[data-area="dep"]  { --a-bg: #E2EAFF; --a-line: #ABC0F5; --a-deep: #2450C8; }  /* Deposits and funding */
[data-area="cap"]  { --a-bg: #ECE6FB; --a-line: #C9BAF0; --a-deep: #5B3FA8; }  /* Capital and risk */
[data-area="comp"] { --a-bg: #DDF3E7; --a-line: #9BD8B7; --a-deep: #1A6B45; }  /* Compliance and security */
[data-area="none"] { --a-bg: #EEF0F3; --a-line: #CDD2DA; --a-deep: #4B5563; }  /* a question that leans to no area */
html.dark [data-area] { --a-bg: color-mix(in oklab, var(--a-line) 16%, #14141c); }

/* ---- the dashboard card: the old compact size, one pastel card, no white block. Title, a short description, then
   one sentence carrying the figure, then the link. ---- */
.preview-card[data-area] { display: flex; flex-direction: column; background: var(--a-bg); border-color: var(--a-line); }
.preview-card[data-area]:hover { border-color: var(--a-deep); }
.ac-in { flex: 1; display: flex; flex-direction: column; gap: 6px; padding: 12px 12px 11px; }
.preview-card[data-area] .pv-title { font-size: 15px; line-height: 1.2; color: var(--ink); }
.preview-card[data-area] .pv-desc { display: block; -webkit-line-clamp: unset; overflow: visible; margin: 0;
  font-size: 12px; line-height: 1.4; color: #374151; }
.ac-fact { font-size: 12.5px; line-height: 1.4; color: #1f2937; }
.ac-v { font-size: 16px; font-weight: 700; color: var(--a-deep); }
.ac-mix { display: flex; height: 4px; border-radius: 2px; overflow: hidden; gap: 2px; margin-top: 5px; }
.ac-mix i { display: block; height: 100%; background: var(--a-deep); opacity: .55; }
.ac-mix i:nth-child(2) { opacity: .35; } .ac-mix i:nth-child(3) { opacity: .2; } .ac-mix i:nth-child(4) { opacity: .12; }
.preview-card[data-area] .pv-cta { margin-top: auto; padding-top: 2px; font-size: 12px; color: var(--a-deep); }
.preview-card[data-area]:hover .pv-cta { color: var(--a-deep); }
html.dark .preview-card[data-area] .pv-desc, html.dark .ac-fact { color: var(--ink-2); }
html.dark .ac-v, html.dark .preview-card[data-area] .pv-cta { color: var(--a-line); }
@media (max-width: 640px) { .preview-card[data-area] .pv-desc { display: block; } }

/* ---- the right column: questions picked for what the banker typed, in the pastel of the area each leans to ---- */
.jit-ans[data-area] { background: var(--a-bg); border: 1px solid var(--a-line); border-radius: 12px; gap: 10px; }
.jit-ans[data-area]:hover { border-color: var(--a-deep); }
.jit-ans .jqm { width: 24px; height: 24px; border-radius: 50%; background: var(--a-line); color: var(--area-on);
  display: flex; align-items: center; justify-content: center; font: 800 13px var(--font-body); flex-shrink: 0; }
.jit-ans[data-area] .jo { color: var(--a-deep); }
html.dark .jit-ans[data-area] .jo { color: var(--a-line); }

/* ---- Popular questions: pastel topic dots on top, one topic's pills at a time, each pill in its topic's pastel ---- */
.lp-topics { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.lp-topic { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 14px 6px 10px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--card); font: 600 13px var(--font-body); color: var(--ink); cursor: pointer; }
.lp-topic i { width: 14px; height: 14px; border-radius: 50%; background: var(--a-line); flex-shrink: 0; }
.lp-topic:hover { border-color: var(--a-line); }
.lp-topic[aria-pressed="true"] { background: var(--a-bg); border-color: var(--a-deep); color: var(--a-deep); }
.lp-topic[aria-pressed="true"] i { background: var(--a-deep); }
.lp-topic:focus-visible, .lp-popular .lp-pill[data-area]:focus-visible { outline: 2px solid var(--a-deep); outline-offset: 2px; }
.lp-pflow { display: flex; flex-wrap: wrap; gap: 10px; }
.lp-popular .lp-pill[data-area] { display: inline-flex; width: auto; align-items: center; min-height: 44px; padding: 8px 16px; border-radius: 999px;
  background: var(--a-bg); border: 1px solid var(--a-line); }
.lp-popular .lp-pill[data-area]:hover { background: var(--a-bg); border-color: var(--a-deep); transform: translateY(-2px); box-shadow: 0 10px 22px -14px rgba(20,20,30,0.25); }
.lp-popular .lp-pill[data-area] .pq { font-size: 14px; font-weight: 500; }
.lp-popular .lp-pill[data-area][hidden] { display: none; }

/* ---- the carousel as a slow ticker (Shirish, 4 Oct 2026): 24 px a second, about 9 s per card, the whole strip in
   about 2.5 minutes. It pauses under the pointer, on keyboard focus, on touch or a manual scroll (resuming 5 s later),
   off screen, and when the reader presses Pause. Under prefers-reduced-motion it never moves. ---- */
.previews.ticking { scroll-snap-type: none !important; scroll-behavior: auto !important; }
.pv-ticker-ctl { display: flex; justify-content: center; margin: 4px 0 0; }
.pv-pause { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border: 0; background: none;
  font: 600 12.5px var(--font-body); color: var(--ink-2); cursor: pointer; border-radius: 999px; }
.pv-pause:hover { color: var(--ink); background: rgba(0,0,0,.04); }
.pv-pause:focus-visible { outline: 2px solid var(--amber-deep); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .pv-ticker-ctl { display: none; } }