/* Styling for the agentic block-document renderer's output (see
   app/templates/summaries/partials/_blocks.html), shared between the web
   view (loaded here via <link> in base.html) and emailed editions (read and
   inlined into the email's <style> block by app.services.summarize._block_css).
   Loading this in both places is what keeps them from drifting apart —
   change a block's look once, here, and both surfaces update together. */

/* Minimal, deliberate duplication of app.css's color variables — email can't
   @import app.css wholesale (it carries unrelated global chrome), so this
   file gets its own small :root with just the values block content needs.
   Keep these in sync with app.css's :root block if either changes. */
:root {
  --brand: #1f3a5f;
  --brand-dark: #16293f;
  --accent: #c8843a;

  --ag-blue: #2f6fed;
  --ag-blue-tint: #eaf1ff;
  --ag-purple: #8854d0;
  --ag-purple-tint: #f3eefc;
  --ag-amber: #d9821f;
  --ag-amber-tint: #fdf1df;
  --ag-teal: #128f77;
  --ag-teal-tint: #e3f6f1;
  --ag-slate: #5f6b7a;
  --ag-slate-tint: #eef1f3;
  --ag-coral: #993c1d;
  --ag-coral-tint: #faece7;
}

/* Scoped mirror of app.css's heading-font rule (which also covers plain
   h1-h6/.navbar-brand/.card-header — those stay global-chrome-only in
   app.css). Needed here so the email's Google Fonts @import actually routes
   block headings to Lexend instead of just falling through to body's Inter. */
.an-h1, .an-h2, .an-h3, .an-h4, .an-h5 {
  font-family: "Lexend", "Inter", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  letter-spacing: -.01em;
}

.an-h1 { font-size: 2.1rem; font-weight: 800; }
.an-h2 { font-size: 1.5rem; font-weight: 800; color: var(--brand); }
.an-h3 { font-size: 1.2rem; font-weight: 700; }
.an-h4 { font-size: 1.05rem; font-weight: 600; }
.an-h5 { font-size: .95rem; font-weight: 600; }
.an-label { font-size: .72rem; font-weight: 700; letter-spacing: .04em; }

.agentic-section:not(:first-of-type) {
  margin-top: 2.5rem;
}
.agentic-section .an-h2 {
  display: flex;
  align-items: center;
  gap: .55rem;
}
.agentic-section .an-h2::before {
  content: "";
  width: 11px;
  height: 11px;
  border-radius: 3px;
  background: var(--ag-blue);
  flex-shrink: 0;
}
.agentic-section + * { margin-top: .75rem; }

.agentic-intro {
  border-left: 4px solid var(--brand);
  background: var(--ag-blue-tint);
  border-radius: 0 .6rem .6rem 0;
  padding: 1rem 1.25rem;
}

.agentic-item {
  background: #fff;
  border-left: 4px solid var(--ag-blue);
  border-radius: 0 .6rem .6rem 0;
  box-shadow: 0 1px 5px rgba(15, 23, 42, .07);
  padding: .9rem 1.1rem;
  transition: transform .15s ease, box-shadow .15s ease;
}
.agentic-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(15, 23, 42, .12);
}
.agentic-item__subheader {
  font-size: .9rem;
  font-weight: 600;
  color: var(--bs-body-color);
}
.agentic-item__summary {
  font-size: .9rem;
}
.agentic-item__summary p:last-child { margin-bottom: 0; }

/* ── Per-item feedback badge ────────────────────────────────────────────
   Deliberately NOT hover-gated: hover-to-reveal has no touch equivalent and
   leaves keyboard users unable to reach the control at all. Instead it sits
   quietly at ~35% opacity in the item's top-right corner, lifting to full
   strength on item hover, keyboard focus, or once a vote is cast. Only
   rendered when the edition page passes votable=true — see _blocks.html.

   It shares a flex row with the headline rather than being absolutely
   positioned, so a long headline reflows beside it instead of running
   underneath. The wrapper is only a flex container when the badge is
   actually present, leaving the PDF/email markup rendering unchanged. */
.agentic-item--votable .agentic-item__head {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
}
.agentic-item--votable .agentic-item__head .an-h3 {
  flex: 1 1 auto;
  min-width: 0;   /* let a long headline wrap instead of pushing the badge out */
}

.item-vote {
  display: flex;
  flex: 0 0 auto;
  justify-content: flex-end;
  gap: .1rem;
  /* Nudge up so the buttons optically align with the headline's cap height
     rather than sitting a touch low against its line box. */
  margin-top: -.2rem;
  opacity: .35;
  transition: opacity .15s ease;
}
.agentic-item:hover .item-vote,
.item-vote:focus-within { opacity: 1; }

.item-vote__btn {
  border: 0;
  background: transparent;
  color: var(--bs-secondary-color, #6c757d);
  border-radius: 50%;
  /* flex-shrink would otherwise squeeze these narrower than they are tall,
     turning the round hit area into an oval. */
  flex: 0 0 auto;
  width: 1.9rem;
  height: 1.9rem;
  line-height: 1;
  font-size: .8rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease, transform .15s ease;
}
.item-vote__btn:hover { background: var(--ag-blue-tint); color: var(--ag-blue); }
.item-vote__btn:active { transform: scale(.88); }
.item-vote__btn:focus-visible { outline: 2px solid var(--ag-blue); outline-offset: 1px; }

/* A cast vote keeps the whole badge legible at rest — it's state, not just
   an affordance, so it must survive the parent's 35% resting opacity. */
.item-vote:has(.is-active) { opacity: 1; }
.item-vote__btn.is-active[data-vote="1"]  { background: var(--ag-teal-tint);  color: var(--ag-teal); }
.item-vote__btn.is-active[data-vote="-1"] { background: var(--ag-coral-tint); color: var(--ag-coral); }

/* Quick hits are one-liners, so their upvote sits inline at the end of the
   row and shrinks to match the smaller type rather than dominating it. */
.agentic-more-news__item {
  display: flex;
  align-items: center;
  gap: .35rem;
}
.agentic-more-news__item > span:first-child { flex: 1 1 auto; min-width: 0; }
.agentic-more-news__item .item-vote { margin-top: 0; }
.agentic-more-news__item .item-vote__btn { width: 1.6rem; height: 1.6rem; font-size: .7rem; }
.agentic-more-news__item:hover .item-vote { opacity: 1; }

/* Touch: no hover to lift the badge, so rest slightly stronger and give the
   buttons a full 44px tap target without making the glyphs any bigger. */
@media (hover: none) {
  .item-vote { opacity: .45; }
  .item-vote__btn { width: 2.75rem; height: 2.75rem; }
  .agentic-more-news__item .item-vote__btn { width: 2.75rem; height: 2.75rem; }
}

@media print {
  .item-vote { display: none !important; }
}

.agentic-trend {
  background: var(--ag-purple-tint);
  border-left: 4px solid var(--ag-purple);
  border-radius: 0 .6rem .6rem 0;
  padding: .9rem 1.1rem;
}
.agentic-trend__headline {
  font-size: .95rem;
  font-weight: 700;
  color: var(--ag-purple);
  margin-bottom: .25rem;
}
.agentic-trend__text { font-size: .9rem; }
.agentic-trend__text p:last-child { margin-bottom: 0; }

.agentic-more-news {
  background: var(--ag-amber-tint);
  border-left: 4px solid var(--ag-amber);
  border-radius: 0 .6rem .6rem 0;
  padding: .75rem 1.1rem 1rem;
}
.agentic-more-news__title {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--ag-amber);
  margin-bottom: .5rem;
}
.agentic-more-news ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.agentic-more-news li {
  padding: .3rem 0;
  font-size: .875rem;
  border-bottom: 1px solid rgba(0, 0, 0, .06);
}
.agentic-more-news li:last-child { border-bottom: none; }

.agentic-story--lead {
  background: #fff;
  border: 1px solid rgba(31, 58, 95, .08);
  border-top: 4px solid var(--brand);
  border-radius: .75rem;
  box-shadow: 0 4px 14px rgba(15, 23, 42, .07);
  padding: 1.25rem 1.5rem;
}

.agentic-story--standard {
  background: var(--ag-blue-tint);
  border-left: 4px solid var(--ag-blue);
  border-radius: 0 .6rem .6rem 0;
  padding: .9rem 1.1rem;
}

.agentic-story--brief {
  border-left: 3px solid var(--ag-slate);
  background: var(--ag-slate-tint);
  border-radius: 0 .4rem .4rem 0;
  padding: .5rem .75rem;
}

.story-source {
  display: inline-block;
  font-size: .68rem;
  font-weight: 500;
  line-height: 1.5;
  color: var(--bs-secondary-color);
  background: var(--bs-body-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: .25rem;
  padding: 0 .4em;
  margin-left: .4em;
  text-decoration: none;
  vertical-align: middle;
  white-space: nowrap;
  transition: color .15s, border-color .15s;
}
.story-source:hover {
  color: var(--ag-blue);
  border-color: var(--ag-blue);
  text-decoration: none;
}
.story-source + .story-source { margin-left: .2em; }

.agentic-cluster {
  background: var(--ag-teal-tint);
  border-left: 4px solid var(--ag-teal);
  border-radius: 0 .6rem .6rem 0;
  padding: .9rem 1.1rem;
}

.agentic-callout {
  border-radius: .6rem;
  border: 1px solid transparent;
  padding: 1rem 1.25rem;
}
.agentic-callout .an-label {
  font-size: .8rem;
  display: flex;
  align-items: center;
  gap: .35rem;
}
.agentic-callout--trend {
  background: var(--ag-blue-tint);
  border-color: rgba(47, 111, 237, .25);
}
.agentic-callout--trend .an-label { color: var(--ag-blue); }
.agentic-callout--connection {
  background: var(--ag-purple-tint);
  border-color: rgba(136, 84, 208, .25);
}
.agentic-callout--connection .an-label { color: var(--ag-purple); }
.agentic-callout--watch {
  background: var(--ag-amber-tint);
  border-color: rgba(217, 130, 31, .3);
}
.agentic-callout--watch .an-label { color: var(--ag-amber); }
.agentic-callout--note {
  background: var(--ag-slate-tint);
  border-color: rgba(95, 107, 122, .25);
}
.agentic-callout--note .an-label { color: var(--ag-slate); }

.agentic-quote {
  background: var(--ag-purple-tint);
  border-left: 4px solid var(--ag-purple);
  border-radius: 0 .6rem .6rem 0;
  padding: 1rem 1.25rem;
  font-style: italic;
}

.agentic-quick-hits {
  background: var(--ag-amber-tint);
  border: 1px solid rgba(217, 130, 31, .35);
  border-radius: .75rem;
  box-shadow: 0 2px 10px rgba(217, 130, 31, .08);
  padding: 1.1rem 1.3rem;
}
.agentic-quick-hits__title {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--ag-amber);
  display: flex;
  align-items: center;
  gap: .4rem;
  margin-bottom: .65rem;
}
.agentic-quick-hits ul {
  list-style: none;
  padding-left: 0;
  margin-bottom: 0;
  display: grid;
  gap: .5rem;
}
.agentic-quick-hits li {
  position: relative;
  padding-left: 1.4rem;
}
.agentic-quick-hits li::before {
  content: "⚡";
  position: absolute;
  left: 0;
  top: -.05rem;
  font-size: .85rem;
}

.agentic-divider {
  border: none;
  border-top: 2px dashed rgba(31, 58, 95, .15);
}