/* cores.css · ONE's Cores cards (one per Core, Mass Acceleration first) and the New lead bell in the top bar.
   Layer: presentation · Pillar: 01 Leadership & Strategy, 05 Marketing & Brand · Owner: COO · Rev 0.1 · 2026-10-30
   Consumes: shared/brand.css tokens (--ma-*), dash.css (.panel, .kind)  Produces: .core-*, .bell-*; no colour literal here */
.panel-cores { margin-bottom: 16px; }
.core-grid { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 800px) { .core-grid { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); } }
.core-card { position: relative; border: 1px solid var(--ma-border); border-radius: var(--ma-radius); background: var(--ma-surface-2);
  padding: 14px 16px 12px; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.core-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; border-radius: var(--ma-radius) var(--ma-radius) 0 0;
  background: linear-gradient(90deg, var(--peach) 0 16.66%, var(--orange) 16.66% 33.33%, var(--pink) 33.33% 50%,
    var(--purple) 50% 66.66%, var(--periwinkle) 66.66% 83.33%, var(--teal) 83.33% 100%); }
.core-ma-card { border-color: var(--ma-accent); }
@media (min-width: 800px) { .core-ma-card { grid-column: span 2; } }
.core-crit { border-color: var(--ma-bad); }
.core-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.core-name { margin: 0; font-size: 1.05rem; font-weight: 700; overflow-wrap: anywhere; }
.core-status { font-size: 0.75rem; font-weight: 600; border: 1px solid var(--ma-border-strong); border-radius: 999px; padding: 1px 8px; white-space: nowrap; }
.core-ok { color: var(--ma-ok); border-color: var(--ma-ok); }
.core-attention { color: var(--ma-warn); border-color: var(--ma-warn); }
.core-paused, .core-unknown { color: var(--ma-text-muted); }
.core-meta { margin: 0; }
.core-empty { margin: 0; font-size: 0.85rem; color: var(--ma-text-muted); }
.core-figs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; margin: 6px 0 0; }
@media (min-width: 1100px) { .core-ma-card .core-figs { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.core-figs-ma { border-top: 1px solid var(--ma-border); padding-top: 10px; }
.core-ma { display: contents; }
.core-fig { min-width: 0; }
.core-fig dt { font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ma-text-muted); }
.core-fig dd { margin: 2px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.core-val { font-size: 1.15rem; font-weight: 650; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.core-none { font-size: 0.9rem; font-weight: 500; color: var(--ma-text-muted); }
.core-sub { font-size: 0.78rem; color: var(--ma-text-muted); }
.core-links { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 0; }

/* 2026-10-31: the top bar sits above the tab bar (both were z-index 10 and the tab bar came later, so the Leads pop-up, which
   lives in the top bar, was drawn behind the tabs). The pop-up scrolls inside itself instead of running off the screen. */
.topbar { z-index: 20; }
.bell { position: relative; }
.bell[hidden], .mode-switch[hidden] { display: none; }   /* app-presence.js: no company app, no dead link */
.bell-btn { min-height: 40px; display: inline-flex; align-items: center; gap: 6px; }
.bell-count { min-width: 20px; height: 20px; border-radius: 999px; background: var(--ma-accent); color: var(--ma-accent-text);
  font-size: 0.75rem; font-weight: 700; display: inline-grid; place-items: center; padding: 0 6px; }
.bell-count[hidden], .bell-pop[hidden] { display: none; }
.bell-pop { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; width: min(360px, calc(100vw - 32px));
  background: var(--ma-surface); border: 1px solid var(--ma-border-strong); border-radius: var(--ma-radius); padding: 12px;
  max-height: calc(100dvh - var(--bell-top, 72px) - 16px); overflow-y: auto; box-shadow: var(--ma-shadow); }
.bell-pop h2 { font-size: 0.95rem; margin: 0 0 8px; }
.bell-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; max-height: 60vh; overflow-y: auto; }
.bell-item { border-top: 1px solid var(--ma-border); padding-top: 8px; font-size: 0.85rem; overflow-wrap: anywhere; }
.bell-item strong { display: block; font-size: 0.95rem; }
.bell-new strong::after { content: " · new"; color: var(--ma-accent); font-weight: 600; }
.bell-tools { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
@media (max-width: 799px) { .bell-pop { position: fixed; left: 16px; right: 16px; top: var(--bell-top, 72px); width: auto; } }   /* lead-bell.js sets --bell-top */