/* D4 Campaign PWA -- mobile-first dark theme */
:root {
  --bg:        #0f1220;
  --surface:   #181c30;
  --card:      #1e223a;
  --border:    #2a3050;
  --primary:   #4d8bff;
  --accent:    #ffb84d;
  --danger:    #ff5b75;
  --success:   #3ecf8e;
  --text:      #e8f0fb;
  --muted:     #8892a8;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  background: var(--bg); color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  line-height: 1.45;
}

#app { display: flex; flex-direction: column; min-height: 100vh; max-width: 720px; margin: 0 auto; }
main  { padding: 8px 14px 96px 14px; flex-grow: 1; }

/* status bar */
.status-bar {
  position: sticky; top: 0; z-index: 50;
  background: rgba(15,18,32,.92);
  backdrop-filter: saturate(160%) blur(8px);
  -webkit-backdrop-filter: saturate(160%) blur(8px);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 10px;
  padding: 9px 14px; font-size: .78rem;
}
#clock { font-variant-numeric: tabular-nums; }
.connection-dot { width: 9px; height: 9px; border-radius: 50%; background: #667; flex-shrink: 0; transition: .2s; }
.connection-dot.ok  { background: var(--success); box-shadow: 0 0 8px var(--success); }
.connection-dot.err { background: var(--danger);  box-shadow: 0 0 6px rgba(255,91,117,.5); }
.sources-summary { flex: 1; color: var(--muted); font-size: .72rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#refresh-btn { transition: transform .15s; }
#refresh-btn.spin { animation: spin .6s linear; }
@keyframes spin { to { transform: rotate(360deg); } }

/* tab bar */
nav[role="navigation"] {
  position: fixed; bottom: 0; left: 50%; transform: translateX(-50%);
  z-index: 50; width: 100%; max-width: 720px;
  display: flex; background: rgba(15,18,32,.97);
  border-top: 1px solid var(--border);
  backdrop-filter: saturate(160%) blur(6px);
  -webkit-backdrop-filter: saturate(160%) blur(6px);
  padding-bottom: env(safe-area-inset-bottom, 0);
}
nav[role="navigation"] a {
  flex: 1; text-align: center; padding: 13px 4px 8px;
  font-size: .72rem; color: var(--muted); text-decoration: none; cursor: pointer;
  border-top: 2px solid transparent; transition: .15s; user-select: none;
}
nav[role="navigation"] a.active { color: var(--primary); border-top-color: var(--primary); }

/* tab panels */
.tab-panel { display: none; animation: fadeIn .16s ease-out; }
.tab-panel.active { display: block; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.tab-toolbar { display: flex; align-items: baseline; justify-content: space-between; padding: 8px 2px 12px; }
.tab-title { font-size: 1.15rem; font-weight: 700; margin: 0; }
#feed-count-label { font-size: .72rem; color: var(--muted); }

.campaign-lead {
  background: linear-gradient(135deg, var(--surface), #232b4d);
  border-left: 3px solid var(--primary); padding: 10px 14px; margin: 0 0 14px;
  font-size: .9rem; line-height: 1.55; border-radius: 6px; color: #d6e2f5;
}

/* feed list */
#feed-list { list-style: none; padding: 0; margin: 0; }
.feed-item { background: var(--card); border: 1px solid var(--border); border-radius: 9px; padding: 13px 14px; margin-bottom: 12px; transition: border-color .1s; }
.feed-item:hover { border-color: rgba(77,139,255,.4); }

.sev-flag { font-size: .64rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 6px; display: block; }
.feed-item-title { font-size: 1rem; font-weight: 600; line-height: 1.32; margin: 3px 0 6px; }

.pillars-on-line { display: flex; flex-wrap: wrap; gap: 5px; margin: 8px 0; }
.pillar-tag {
  background: rgba(77,139,255,.13); border: 1px solid rgba(77,139,255,.3);
  color: #a8c0ff; font-size: .64rem; padding: 2px 9px; border-radius: 11px;
}

.take-box { margin-top: 9px; padding: 9px 12px; background: rgba(77,139,255,.08); border-left: 3px solid var(--primary); border-radius: 6px; font-size: .86rem; line-height: 1.45; }
.take-box .label { font-size: .58rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); display: block; margin-bottom: 3px; }
.take-src { font-size: .58rem; color: var(--muted); opacity: .7; }

.feed-meta { font-size: .68rem; color: var(--muted); margin-top: 9px; }
.kw-chip { background: rgba(255,255,255,.05); padding: 1px 7px; border-radius: 9px; margin-right: 4px; font-size: .62rem; }

/* pillars */
#issues-list { list-style: none; padding: 0; }
.pillar-card { background: var(--card); border: 1px solid var(--border); border-radius: 11px; padding: 15px 16px; margin-bottom: 13px; }
.pillar-header { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.pillar-num { background: linear-gradient(135deg, #2a5adf, #4d8bff); color: #fff; border-radius: 50%; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; font-size: .72rem; font-weight: 700; flex-shrink: 0; }
.pillar-name { font-size: 1.02rem; font-weight: 700; color: var(--primary); }
.pillar-desc { font-size: .84rem; color: var(--muted); margin: 9px 0; }
.soundbite { margin: 10px 0 2px; padding: 10px 13px; background: rgba(77,139,255,.06); border-radius: 6px; font-style: italic; font-size: .88rem; line-height: 1.45; color: #cfdcf2; }

/* article text on feed cards (replaces any AI summary) */
.article-body { display: block; margin: 9px 0 4px; border-top: 1px solid var(--border); padding-top: 8px; }
.article-text { font-size: .85rem; line-height: 1.55; color: #c2cede; white-space: pre-wrap; word-break: break-word; margin: 0; }
.read-more-btn { margin-top: 5px; background: transparent; border: none; color: var(--primary); font-size: .8rem; cursor: pointer; padding: 0; font-weight: 600; }
.read-more-btn.expanded { opacity: .7; }
.full-article-link { display: inline-block; margin-top: 5px; font-size: .82rem; color: var(--accent); text-decoration: none; border-bottom: 1px solid var(--border); font-weight: 600; }

/* briefing */
#briefing-pre, .briefing-body { font-family: -apple-system, sans-serif; font-size: .84rem; color: #c8d4e0; margin: 0; line-height: 1.5; }
.briefing-body p { margin: 6px 0; }
.section-title { color: var(--accent); display: block; margin-top: 14px; font-weight: 700; border-bottom: 1px solid var(--border); padding-bottom: 3px; }
.mini-head { color: #8fa8d8; font-size: .82rem; margin: 12px 0 4px; font-weight: 600; }
.briefing-body ul, .briefing-body li { list-style: none; margin: 3px 0; padding-left: 14px; position: relative; }
.briefing-body li.bullet::before { content: "•"; position: absolute; left: 0; color: #6a8ac2; }
.briefing-body li.num-item { padding-left: 0; }
.brief-table { width: 100%; border-collapse: collapse; margin: 8px 0 12px; font-size: .78rem; display: block; overflow-x: auto; }
.brief-table th, .brief-table td { border: 1px solid var(--border); padding: 5px 7px; text-align: left; white-space: nowrap; }
.brief-table th { background: rgba(77,139,255,.12); color: #d7e0f0; font-weight: 600; }
.brief-table tr:nth-child(even) td { background: var(--surface-2, rgba(255,255,255,.03)); }
.briefing-body a { color: var(--accent); text-decoration: none; border-bottom: 1px solid var(--border); }
.brief-empty { color: #6a7488; font-style: italic; text-align: center; padding: 24px 0; }

/* utility */
.hidden { display: none !important; }
#load-more { display: block; width: 100%; background: var(--surface); color: var(--primary); border: 1px solid var(--border); padding: 12px; margin-top: 10px; font-size: .85rem; cursor: pointer; border-radius: 7px; }

.toast {
  position: fixed; bottom: 96px; left: 14px; right: 14px; z-index: 100;
  background: linear-gradient(135deg, #ff5b75, #c8425f); color: #fff;
  padding: 14px 16px; border-radius: 11px; font-size: .82rem; font-weight: 600;
  box-shadow: 0 6px 24px rgba(0,0,0,.45); animation: slideUp .3s ease-out; max-width: 720px; margin: 0 auto; cursor: pointer;
}
@keyframes slideUp { from { transform: translateY(100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

.empty-state { text-align: center; padding: 50px 20px; color: var(--muted); font-size: .9rem; }

@media (max-width: 380px) {
  .feed-item { padding: 11px 11px; }
}