/* ============================================================================
   10-sentinel.css — the Sentinel news/sentiment intelligence terminal.
   Builds on 01-tokens.css + the .bp-* shell. Everything namespaced .sn-*
   so it never collides with the bot/desk pages.
   ========================================================================== */

/* ---- asset-class accent hues (restrained, terminal palette) -------------
   fx/index/metal alias the global tokens so they track any theme change;
   crypto/energy are net-new hues with no token equivalent. */
.sn-root {
  --sn-ac-fx:       var(--info);
  --sn-ac-index:    var(--accent-secondary);
  --sn-ac-metal:    var(--warning);
  --sn-ac-crypto:   #ce8f4e;          /* muted amber */
  --sn-ac-energy:   #8fb4c8;          /* steel       */
  --sn-ac-api-text: #7fb0f9;          /* readable tint of var(--info) for tiny text */
}

/* ====================================================================== */
/* 1. KPI strip                                                            */
/* ====================================================================== */
.sn-kpis {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px; margin-bottom: 14px;
}
.sn-kpi {
  min-width: 0; background: var(--bg-surface);
  border: 1px solid var(--border-subtle); border-radius: var(--radius-md);
  padding: 10px 12px 9px; box-shadow: var(--shadow-inset);
}
/* label/value voice matches the house stat cards (.bp-stat__label/__value):
   12px/400 sentence-case labels, 20px/500 mono tabular values */
.sn-kpi__label {
  font-size: 12px; font-weight: 400; line-height: 1;
  color: var(--text-tertiary); margin-bottom: 6px; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.sn-kpi__value {
  font-family: var(--font-mono); font-size: 20px; font-weight: 500;
  font-variant-numeric: tabular-nums; letter-spacing: -0.01em;
  color: var(--text-primary); line-height: 22px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* secondary-value cards (Top bull/bear, Next high impact): smaller text but
   the SAME 22px line box so __sub baselines align across the strip */
.sn-kpi__value--sm { font-size: 15px; line-height: 22px; }
.sn-kpi__value.up   { color: var(--up-bright); }
.sn-kpi__value.down { color: var(--down-bright); }
.sn-kpi__value.warn { color: var(--warning); }
.sn-kpi__value.dim  { color: var(--text-tertiary); }   /* re-assert .dim over the primary color above */
.sn-kpi__sub {
  font-family: var(--font-mono); font-size: 10.5px; color: var(--text-muted);
  margin-top: 3px; white-space: normal; overflow-wrap: anywhere; line-height: 1.35;
}
.sn-kpi__sub b.up   { color: var(--up); font-weight: 600; }
.sn-kpi__sub b.down { color: var(--down); font-weight: 600; }
.sn-kpi__sub b.warn { color: var(--warning); font-weight: 600; }
.sn-kpi__sub b      { color: var(--text-secondary); font-weight: 600; }
/* the '/ N' denominator on the Scored card */
.sn-kpi__of { color: var(--text-muted); font-size: 13px; font-weight: 400; }
/* coverage progress bar (ingest→scored parity) */
.sn-kpi__bar {
  height: 3px; margin: 5px 0 4px; border-radius: 2px;
  background: var(--bg-inset); overflow: hidden;
}
.sn-kpi__bar > span {
  display: block; height: 100%; border-radius: 2px;
  background: linear-gradient(90deg, var(--accent), var(--accent-secondary));
}
.sn-kpi__chiprow { display: flex; align-items: center; gap: 6px; min-width: 0; }
.sn-sym-chip {
  font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  color: var(--text-secondary); background: var(--bg-inset);
  border: 1px solid var(--border-subtle); border-radius: var(--radius-sm);
  padding: 2px 7px; white-space: nowrap;
}

/* ====================================================================== */
/* 2. Symbol tiles                                                         */
/* ====================================================================== */
.sn-section { margin-bottom: 16px; }
.sn-section__head { display: flex; align-items: baseline; gap: 9px; margin-bottom: 8px; flex-wrap: wrap; }
.sn-section__title { font-size: 13.5px; font-weight: 500; color: var(--text-primary); }
.sn-section__hint { font-size: 11px; font-family: var(--font-mono); color: var(--text-muted); }

.sn-tiles {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 8px;
}
.sn-tile {
  min-width: 0; position: relative; overflow: hidden;
  background: var(--bg-surface); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md); padding: 10px 12px 9px;
  transition: transform var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out),
              background var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out);
}
.sn-tile:hover {
  transform: translateY(-2px); border-color: var(--border-strong);
  background: var(--bg-surface-raised); box-shadow: var(--shadow-md);
}
.sn-tile::before {                      /* asset-class accent sliver */
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  background: var(--sn-ac, var(--border-strong)); opacity: .75;
}
.sn-tile--fx     { --sn-ac: var(--sn-ac-fx); }
.sn-tile--index  { --sn-ac: var(--sn-ac-index); }
.sn-tile--metal  { --sn-ac: var(--sn-ac-metal); }
.sn-tile--crypto { --sn-ac: var(--sn-ac-crypto); }
.sn-tile--energy { --sn-ac: var(--sn-ac-energy); }

.sn-tile__head { display: flex; align-items: center; gap: 7px; min-width: 0; }
.sn-tile__sym {
  font-family: var(--font-mono); font-size: 12.5px; font-weight: 600;
  color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sn-asset {
  font-size: 9px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--sn-ac, var(--text-muted)); flex: none;
}
.sn-grade {
  margin-left: auto; flex: none;
  font-size: 9px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  font-family: var(--font-mono); padding: 2px 7px; border-radius: var(--radius-pill);
  border: 1px solid var(--border-subtle); background: var(--bg-inset); color: var(--text-tertiary);
}
.sn-grade--strong-bull { color: var(--up-bright);   background: var(--up-soft);   border-color: rgba(38, 166, 154, .45); }
.sn-grade--bull        { color: var(--up-bright);   background: var(--up-softer); border-color: rgba(38, 166, 154, .25); }
.sn-grade--bear        { color: var(--down-bright); background: var(--down-softer); border-color: rgba(239, 83, 80, .25); }
.sn-grade--strong-bear { color: var(--down-bright); background: var(--down-soft); border-color: rgba(239, 83, 80, .45); }

.sn-tile__scorerow { display: flex; align-items: baseline; gap: 8px; margin-top: 5px; }
.sn-tile__score {
  font-family: var(--font-mono); font-size: 23px; font-weight: 600; line-height: 1.1;
  letter-spacing: var(--tracking-tight);
}
.sn-tile__score.up   { color: var(--up-bright); }
.sn-tile__score.down { color: var(--down-bright); }
.sn-delta { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); white-space: nowrap; }
.sn-delta.up   { color: var(--up); }
.sn-delta.down { color: var(--down); }

/* sparkline */
.sn-spark { display: block; width: 100%; height: 30px; margin: 6px 0 7px; }
.sn-spark__zero { stroke: rgba(var(--gray-base-rgb), .25); stroke-width: 1; stroke-dasharray: 3 4; vector-effect: non-scaling-stroke; }
.sn-spark__line { fill: none; stroke-width: 1.5; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }
.sn-spark__line.is-up   { stroke: var(--up-bright); }
.sn-spark__line.is-down { stroke: var(--down-bright); }
.sn-spark--empty {
  display: grid; place-items: center; height: 30px; margin: 6px 0 7px;
  font-size: 10px; color: var(--text-muted); font-family: var(--font-mono);
  border: 1px dashed var(--border-faint); border-radius: var(--radius-sm);
}

/* conviction meter + footer counters */
.sn-conv { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.sn-conv__bar { flex: 1; height: 4px; border-radius: 3px; background: var(--bg-inset); overflow: hidden; }
.sn-conv__fill { height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--accent), var(--accent-secondary)); }
.sn-conv__n { font-family: var(--font-mono); font-size: 10px; color: var(--text-tertiary); flex: none; }
.sn-tile__foot {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  font-family: var(--font-mono); font-size: 10.5px; color: var(--text-muted);
}
.sn-tile__foot b { color: var(--text-tertiary); font-weight: 600; }

/* ====================================================================== */
/* 3. News flow + calendar                                                 */
/* ====================================================================== */
.sn-cols { display: grid; grid-template-columns: 2fr 1fr; gap: 12px; align-items: start; }

.sn-flow__list, .sn-cal__list { max-height: 540px; overflow-y: auto; overscroll-behavior: contain; }

/* news rows */
.sn-item {
  /* 72px ago column: worst case "23h 59m ago" ≈ 69px at 10.5px mono */
  display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 4px 10px;
  padding: 7px 12px; border-top: 1px solid var(--border-faint); align-items: baseline;
}
.sn-item:first-child { border-top: 0; }
.sn-item:hover { background: var(--bg-surface-raised); }
.sn-item__ago { font-family: var(--font-mono); font-size: 10.5px; color: var(--text-muted); white-space: nowrap; }
.sn-item__main { min-width: 0; }
.sn-item__title { font-size: 12px; line-height: 1.45; overflow-wrap: anywhere; }
.sn-item__title a { color: var(--text-secondary); text-decoration: none; }
.sn-item__title a:hover { color: var(--text-primary); text-decoration: underline; text-decoration-color: var(--accent-secondary); }
.sn-item__meta { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; margin-top: 4px; }
.sn-src {
  font-family: var(--font-mono); font-size: 9.5px; font-weight: 600;
  padding: 1px 6px; border-radius: var(--radius-pill);
  border: 1px solid var(--border-subtle); background: var(--bg-inset); color: var(--text-tertiary);
}
.sn-src--rss    { border-color: rgba(146, 137, 254, .35); color: var(--accent-secondary); }
.sn-src--api    { border-color: rgba(59, 130, 246, .35);  color: var(--sn-ac-api-text); }
.sn-src--social { border-color: rgba(247, 185, 85, .3);   color: var(--warning); }
.sn-tag {
  display: inline-flex; align-items: center; gap: 3px;
  font-family: var(--font-mono); font-size: 10px; font-weight: 600;
  padding: 1px 6px; border-radius: var(--radius-sm);
  border: 1px solid var(--border-subtle); background: var(--bg-inset); color: var(--text-tertiary);
}
.sn-tag--bullish { color: var(--up-bright);   background: var(--up-softer);   border-color: rgba(38, 166, 154, .3); }
.sn-tag--bearish { color: var(--down-bright); background: var(--down-softer); border-color: rgba(239, 83, 80, .3); }
/* .sn-tag--neutral / .sn-grade--neutral are emitted but deliberately unstyled:
   they fall back to the muted base .sn-tag / .sn-grade look above. */
.sn-tag__conv { font-weight: 400; color: var(--text-muted); }
.sn-item__more { font-family: var(--font-mono); font-size: 9.5px; color: var(--text-muted); }

/* calendar rows */
.sn-ev {
  display: grid; grid-template-columns: 10px 74px minmax(0, 1fr); gap: 4px 8px;
  padding: 7px 12px; border-top: 1px solid var(--border-faint); align-items: baseline;
}
.sn-ev:first-child { border-top: 0; }
.sn-ev:hover { background: var(--bg-surface-raised); }
.sn-ev__dot { width: 7px; height: 7px; border-radius: 50%; align-self: center; background: var(--text-muted); }
.sn-ev__dot--high   { background: var(--down);    box-shadow: 0 0 6px rgba(239, 83, 80, .55); }
.sn-ev__dot--medium { background: var(--warning); }
.sn-ev__count { font-family: var(--font-mono); font-size: 10.5px; color: var(--text-tertiary); white-space: nowrap; }
.sn-ev__main { min-width: 0; }
.sn-ev__name { font-size: 11.5px; color: var(--text-secondary); line-height: 1.4; overflow-wrap: anywhere; }
.sn-ev__name b { font-family: var(--font-mono); font-size: 10px; color: var(--text-tertiary); font-weight: 600; margin-right: 4px; }
.sn-ev__nums { font-family: var(--font-mono); font-size: 10px; color: var(--text-muted); margin-top: 2px; }
.sn-ev__nums b { color: var(--text-tertiary); font-weight: 600; }

.sn-foot { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); margin-top: 10px; }

/* every mono number block keeps fixed-width digits even under webfont
   fallback, matching the house .mono / .bp-stat__value convention */
.sn-tile__score, .sn-delta, .sn-conv__n, .sn-tile__foot,
.sn-item__ago, .sn-ev__count, .sn-ev__nums, .sn-kpi__sub {
  font-variant-numeric: tabular-nums;
}

/* ====================================================================== */
/* 4. Responsive                                                           */
/* ====================================================================== */
@media (max-width: 900px) {
  .sn-cols { grid-template-columns: 1fr; }
  .sn-flow__list, .sn-cal__list { max-height: 420px; }
}
@media (max-width: 760px) {
  /* tap target ≥40px on touch — mirrors .dk-refresh on the desk page */
  .sn-refresh { min-height: 40px; }
}
@media (max-width: 720px) {
  .sn-tiles { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 7px; }
  .sn-tile { padding: 9px 10px 8px; }
  .sn-tile__score { font-size: 20px; }
  .sn-grade { letter-spacing: .03em; padding: 2px 5px; }
}
@media (max-width: 640px) {
  .sn-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
  .sn-kpi { padding: 9px 10px 8px; }
  .sn-kpi__value { font-size: 16px; line-height: 19px; }
  .sn-kpi__value--sm { font-size: 13px; line-height: 19px; }
  .sn-tile__sym { font-size: 11.5px; }
  .sn-item { grid-template-columns: minmax(0, 1fr); padding: 7px 10px; }
  .sn-item__ago { order: 2; }
  .sn-ev { grid-template-columns: 8px 64px minmax(0, 1fr); padding: 7px 10px; }
  .sn-section__title { font-size: 12.5px; }
}

/* ---- source flow card (two-line tiles: name+kind+share / bars+counts) --- */
.sn-sources { margin-top: 14px; }
.sn-src__rows { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 8px 14px; padding: 4px 2px; }
.sn-src {
  min-width: 0; padding: 8px 10px; border-radius: var(--radius-md);
  background: var(--bg-inset); border: 1px solid var(--border-subtle);
}
.sn-src:hover { border-color: var(--border-strong); }
.sn-src--quiet { opacity: .45; }
.sn-src__top { display: flex; align-items: center; gap: 7px; min-width: 0; margin-bottom: 7px; }
.sn-src__name {
  flex: 1; min-width: 0; font-size: 12.5px; font-weight: 600; color: var(--text-primary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sn-src__kind {
  flex: none; font-size: 9px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding: 1px 6px; border-radius: var(--radius-pill);
  background: var(--bg-surface); color: var(--text-tertiary); border: 1px solid var(--border-subtle);
}
.sn-src__kind--api    { color: var(--accent-secondary); border-color: rgba(95, 76, 254, .3); }
.sn-src__kind--social { color: var(--warning); border-color: rgba(247, 185, 85, .3); }
.sn-src__share { flex: none; font-size: 11px; color: var(--text-tertiary); }
.sn-src__bottom { display: flex; align-items: flex-end; gap: 12px; min-width: 0; }
.sn-src__bars { flex: 1; min-width: 0; display: flex; align-items: flex-end; gap: 3px; height: 26px; }
.sn-src__bar {
  flex: 1; min-height: 1px; border-radius: 2px 2px 0 0;
  background: var(--accent); opacity: .6;
}
.sn-src:hover .sn-src__bar { opacity: .9; }
.sn-src__n24 { flex: none; font-size: 12.5px; font-weight: 600; color: var(--text-primary); }
.sn-src__n7  { flex: none; font-size: 11.5px; color: var(--text-tertiary); }
.sn-src__unit { color: var(--text-muted); font-weight: 400; font-size: 9.5px; margin-left: 2px; }
@media (max-width: 720px) {
  .sn-src__rows { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
}