/* "All platforms" page (events-platforms.js). Builds on the story view (.st, .st-card, .st-kpi in story.css):
   frosted cards, light numbers, ink for actions and gold as the only UI accent. Platform brand colours (--c) and
   favour/attack colours are data colours, never used for controls. Every colour is a token, so dark mode follows. */
.pl-hero { align-items: center; }
.pl-who { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.pl-face { width: 78px; height: 78px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 4px var(--surface), 0 0 0 6px color-mix(in srgb, var(--accent) 60%, transparent); }
.pl-name { font-size: 17px; font-weight: 600; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pl-name .lang-ta { font-weight: 500; color: var(--text-2); font-size: 15px; }
.pl-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pl-intensive { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 11px 14px; border: 1px solid color-mix(in srgb, var(--pos) 28%, var(--glass-line));
  border-radius: 14px; background: color-mix(in srgb, var(--pos) 8%, var(--glass)); color: var(--text-2); font-size: 12.5px; }
.pl-intensive b { display: inline-flex; align-items: center; gap: 6px; color: var(--pos-ink); }

.pl-split { display: flex; height: 6px; border-radius: 99px; overflow: hidden; background: color-mix(in srgb, var(--text-3) 18%, transparent); }
.pl-split i.f { background: var(--pos); } .pl-split i.a { background: var(--neg); }
.pl-split.pl-none { opacity: .6; }

.pl-half { grid-column: span 6; }
@media (max-width: 1080px) { .pl-half { grid-column: 1 / -1; } }

/* ---- platform cards ---- */
.pl-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }
.pl-card { position: relative; display: flex; flex-direction: column; gap: 8px; text-align: left; font: inherit; color: inherit; min-width: 0;
  background: var(--glass); backdrop-filter: blur(14px); border: 1px solid var(--glass-line); border-radius: 18px; padding: 14px 14px 12px; overflow: hidden; }
.pl-card::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--c); opacity: .85; }
button.pl-card { cursor: pointer; transition: transform .15s var(--ease), box-shadow .15s var(--ease); }
button.pl-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.pl-card.off { opacity: .88; }
.pl-card.off::before { opacity: .3; }
.pl-card-h { display: flex; align-items: center; gap: 8px; font-size: 13.5px; }
.pl-card-h b { font-weight: 600; }
.pl-state { margin-left: auto; font-size: 11px; padding: 2px 8px; border-radius: 99px; background: color-mix(in srgb, var(--text-3) 14%, transparent); color: var(--text-2); white-space: nowrap; }
.pl-state.ok { background: color-mix(in srgb, var(--pos) 14%, transparent); color: var(--pos-ink); }
.pl-state.warn { background: color-mix(in srgb, var(--accent) 20%, transparent); color: var(--accent-ink); }
.pl-big { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pl-big > div { display: flex; flex-direction: column; min-width: 0; }
.pl-big b { font-size: 26px; font-weight: 400; letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.pl-big span { font-size: 11.5px; color: var(--text-3); }
.pl-spark { display: flex; align-items: flex-end; gap: 2px; height: 28px; }
.pl-spark i { flex: 1; min-width: 2px; border-radius: 2px; opacity: .75; }
.pl-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12.5px; }
.pl-need { font-size: 12.5px; color: var(--text-2); margin: 0; line-height: 1.45; }
.pl-card .btn { align-self: flex-start; }

.pl-net { display: inline-block; min-width: 38px; text-align: center; padding: 1px 7px; border-radius: 99px; font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.pl-net.pos { background: color-mix(in srgb, var(--pos) 15%, transparent); color: var(--pos-ink); }
.pl-net.neg { background: color-mix(in srgb, var(--neg) 15%, transparent); color: var(--neg-ink); }
.pl-net.mid { background: color-mix(in srgb, var(--text-3) 15%, transparent); color: var(--text-2); }
.pl-net.na { color: var(--text-3); }

/* ---- charts & tables ---- */
.pl-chart { height: 240px; position: relative; min-width: 0; }
.pl-chart canvas { max-width: 100%; }
.pl-scroll { overflow-x: auto; }
.pl-matrix { width: 100%; border-collapse: separate; border-spacing: 4px; font-size: 13px; }
.pl-matrix th { font-weight: 500; color: var(--text-2); text-align: left; white-space: nowrap; padding: 4px 6px; }
.pl-matrix thead th { text-align: center; font-size: 12px; }
.pl-matrix thead th span { display: block; margin-top: 2px; }
.pl-matrix td { text-align: center; }
.pl-cell { display: block; padding: 8px 4px; border-radius: 10px; font-weight: 600; font-variant-numeric: tabular-nums; }
.pl-cell.pos { background: color-mix(in srgb, var(--pos) calc(12% + var(--a) * 40%), transparent); color: var(--pos-ink); }
.pl-cell.neg { background: color-mix(in srgb, var(--neg) calc(12% + var(--a) * 40%), transparent); color: var(--neg-ink); }
.pl-cell.mid { background: color-mix(in srgb, var(--text-3) 12%, transparent); color: var(--text-2); }
.pl-cell.na { color: var(--text-3); background: color-mix(in srgb, var(--text-3) 6%, transparent); }

.pl-acc { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 8px; }
.pl-acc > div { display: flex; flex-direction: column; gap: 2px; }
.pl-acc span { font-size: 12px; color: var(--text-3); }
.pl-acc b { font-size: 24px; font-weight: 400; letter-spacing: -.03em; }
.pl-acc b em { font-style: normal; font-size: 13px; color: var(--text-3); }
.pl-acc small { font-size: 11px; color: var(--text-3); }
.pl-line { width: 100%; height: 44px; margin: 4px 0 8px; }
.pl-line polyline { fill: none; stroke: var(--accent); stroke-width: 1.6; vector-effect: non-scaling-stroke; }
.pl-top { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, var(--text-3) 7%, transparent); color: inherit; text-decoration: none; font-size: 13px; margin-bottom: 8px; }
.pl-top:hover { background: color-mix(in srgb, var(--text-3) 12%, transparent); }
.pl-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.pl-tags span { font-size: 12px; padding: 3px 9px; border-radius: 99px; border: 1px solid var(--glass-line); background: var(--glass); }
.pl-tags small { color: var(--text-3); margin-left: 3px; }

.pl-bar { display: grid; grid-template-columns: 96px 1fr 40px; align-items: center; gap: 8px; font-size: 12.5px; margin: 5px 0; }
.pl-bar span { text-transform: capitalize; color: var(--text-2); }
.pl-bar i { height: 8px; border-radius: 99px; background: color-mix(in srgb, var(--accent) 70%, transparent); }
.pl-bar.lang i { background: color-mix(in srgb, var(--text-3) 55%, transparent); }
.pl-bar b { font-weight: 500; text-align: right; font-variant-numeric: tabular-nums; color: var(--text-2); }
.pl-h4 { font-size: 12.5px; font-weight: 600; margin: 14px 0 6px; color: var(--text-2); }
.pl-h4:first-child { margin-top: 0; }
.pl-h4.pos { color: var(--pos-ink); } .pl-h4.neg { color: var(--neg-ink); }

/* ---- per-platform sections ---- */
.pl-detail { scroll-margin-top: 16px; border-top: 3px solid var(--c); }
.pl-detail h3 { display: flex; align-items: center; gap: 8px; }
.pl-mini-kpis { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 12.5px; color: var(--text-2); }
.pl-cols { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 20px; }
.pl-post { display: flex; flex-direction: column; gap: 4px; padding: 10px 0; border-bottom: 1px solid var(--glass-line); color: inherit; text-decoration: none; }
.pl-post:last-child { border-bottom: 0; }
.pl-post:hover .pl-post-t { color: var(--text); text-decoration: underline; text-decoration-color: var(--glass-line); }
.pl-post-h { display: flex; align-items: center; gap: 8px; font-size: 12.5px; }
.pl-post-h .pl-st { margin-left: auto; }
.pl-post-t { font-size: 13.5px; line-height: 1.45; color: var(--text-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.pl-st { font-size: 11px; padding: 1px 8px; border-radius: 99px; background: color-mix(in srgb, var(--text-3) 12%, transparent); color: var(--text-2); white-space: nowrap; }
.pl-st.pos { background: color-mix(in srgb, var(--pos) 14%, transparent); color: var(--pos-ink); }
.pl-st.neg { background: color-mix(in srgb, var(--neg) 14%, transparent); color: var(--neg-ink); }
.pl-st.na { color: var(--text-3); }
.pl-quotes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.pl-quotes li { font-size: 13px; line-height: 1.45; padding: 8px 10px; border-radius: 10px; border-left: 3px solid var(--text-3); background: color-mix(in srgb, var(--text-3) 6%, transparent); display: flex; flex-direction: column; gap: 2px; }
.pl-quotes.fav li { border-left-color: var(--pos); } .pl-quotes.att li { border-left-color: var(--neg); }
.pl-quotes li span { color: var(--text); }
.pl-quotes li small { font-size: 11px; color: var(--text-3); }
.pl-tone { display: flex; height: 8px; border-radius: 99px; overflow: hidden; margin-bottom: 4px; }
.pl-tone i.positive { background: var(--pos); } .pl-tone i.negative { background: var(--neg); }
.pl-tone i.neutral { background: var(--neu); } .pl-tone i.mixed { background: color-mix(in srgb, var(--accent) 70%, transparent); }
.pl-outlets { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.pl-outlets th { text-align: left; font-weight: 500; color: var(--text-3); padding: 6px 8px; border-bottom: 1px solid var(--glass-line); }
.pl-outlets td { padding: 7px 8px; border-bottom: 1px solid var(--glass-line); vertical-align: top; }

@media (max-width: 900px) {
  .pl-cols { grid-template-columns: 1fr; }
  .pl-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) { .st-kpis.pl-kpis .st-kpi:last-child { grid-column: auto; } }
@media (max-width: 520px) {
  .pl-cards { grid-template-columns: 1fr; }
  .pl-acc { grid-template-columns: 1fr 1fr; }
}

/* ---- command centre (command-centre.js): Home of a politics workspace that watches leaders ---- */
.cc { margin: 16px; }
.cc-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.cc-leader { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 6px; border-bottom: 1px solid var(--glass-line); color: inherit; text-decoration: none; border-radius: 12px; }
.cc-leader:last-child { border-bottom: 0; }
.cc-leader:hover { background: color-mix(in srgb, var(--text-3) 7%, transparent); }
.cc-leader img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; background: color-mix(in srgb, var(--text-3) 15%, transparent); }
.cc-l-main { display: flex; flex-direction: column; min-width: 0; }
.cc-l-main b { font-weight: 600; font-size: 14px; }
.cc-l-main small, .cc-l-num small { font-size: 11.5px; color: var(--text-3); }
.cc-l-num { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.cc-nets { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; }
.cc-net { display: grid; grid-template-columns: auto auto 1fr auto; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--glass-line); background: var(--glass); font-size: 13px; }
.cc-net span:not(.pl-net) { color: var(--text-3); font-size: 12px; }
.cc-net.off { opacity: .7; }
@media (max-width: 900px) { .cc { margin: 10px; } }
/* Posts and comments are read separately: what the posts say vs how people reply */
.cc-sent { display: grid; grid-template-columns: auto auto; align-items: center; column-gap: 6px; row-gap: 3px; justify-items: end; }
.cc-sent i { font-style: normal; font-size: 10.5px; color: var(--text-3); letter-spacing: .02em; }