:root {
  --brand: #1f3a5f;
  --brand-dark: #16293f;
  --accent: #c8843a;

  /* Agentic summary palette — one accent color per block role, each with a
     light tint for fill and a stronger tone for borders/text/icons. Page
     background is bg-body-tertiary (light gray), so every card below uses
     an actual white or tinted fill — never bg-body-tertiary — or it
     visually disappears into the page. */
  --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;
}

body {
  font-family: "Inter", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.navbar-brand, .card-header, .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;
}

/* Softer, more contemporary corner radius across every Bootstrap component —
   the stock 4px default reads as "unstyled Bootstrap" more than almost
   anything else about the framework's look. */
:root {
  --bs-border-radius: .55rem;
  --bs-border-radius-sm: .4rem;
  --bs-border-radius-lg: .8rem;
  --bs-border-radius-xl: 1.1rem;
}

.app-navbar {
  background: linear-gradient(120deg, var(--brand-dark), var(--brand) 55%, var(--ag-teal));
  border-bottom: 2px solid var(--accent);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .12);
}
.app-navbar .navbar-brand { letter-spacing: .2px; }
.brand-mark { filter: drop-shadow(0 1px 1px rgba(0,0,0,.25)); }

.btn-primary {
  --bs-btn-border-color: var(--brand);
  --bs-btn-hover-border-color: var(--brand-dark);
  --bs-btn-active-border-color: var(--brand-dark);
  background: linear-gradient(135deg, var(--brand), var(--brand-dark));
  border: none;
  box-shadow: 0 4px 10px rgba(31, 58, 95, .28);
  transition: transform .15s ease, box-shadow .15s ease;
}
.btn-primary:hover {
  background: linear-gradient(135deg, var(--brand-dark), #0f2030);
  box-shadow: 0 6px 16px rgba(31, 58, 95, .32);
  transform: translateY(-1px);
}
.btn-primary:active { transform: translateY(0); }

.btn-outline-primary {
  --bs-btn-color: var(--brand);
  --bs-btn-border-color: var(--brand);
  --bs-btn-hover-bg: var(--brand);
  --bs-btn-hover-border-color: var(--brand);
}

.card { border-color: rgba(0,0,0,.07); border-radius: .75rem; }
.card-header { font-weight: 600; letter-spacing: -.005em; }
.badge { font-weight: 600; letter-spacing: .01em; padding: .38em .65em; }

/* Form controls — Bootstrap's default focus ring is a generic blue that
   ignores the app's brand color entirely. */
.form-control, .form-select {
  border-color: rgba(0, 0, 0, .12);
}
.form-control:focus, .form-select:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 .2rem rgba(31, 58, 95, .15);
}
.form-check-input:checked {
  background-color: var(--brand);
  border-color: var(--brand);
}
.form-check-input:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 .2rem rgba(31, 58, 95, .15);
}

/* Tables — stock Bootstrap tables are the single most "default template"
   looking element on data-heavy pages (Sources, Admin, editions list). A
   tinted header and softer row dividers read as considered, not default. */
.table {
  --bs-table-border-color: rgba(0, 0, 0, .06);
}
.table > thead {
  background: var(--ag-blue-tint);
}
.table > thead th {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #185fa5;
  border-bottom: none;
  padding-top: .65rem;
  padding-bottom: .65rem;
}
.table-responsive {
  border-radius: var(--bs-border-radius-lg);
  overflow-x: auto;
  overflow-y: hidden;
  border: 1px solid rgba(0, 0, 0, .06);
}
.table-responsive .table { margin-bottom: 0; }
.table-hover > tbody > tr:hover > * {
  background-color: var(--ag-blue-tint);
}

/* Hover-lift — a small affordance for clickable cards/rows (dashboard
   featured edition, Editions list rows, agentic content blocks). Kept to a
   single shared utility so the effect (and its cost) stays consistent. */
.hover-lift {
  transition: transform .15s ease, box-shadow .15s ease;
}
.hover-lift:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(15, 23, 42, .12);
}

/* Pills — colored chips for small stats (item count, generation cost,
   revision number). One tint per palette color, reusing the same
   light-fill/dark-text pairing as the agentic block colors above. */
.pill {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-size: .72rem;
  font-weight: 600;
  border-radius: 20px;
  padding: .18rem .65rem;
  white-space: nowrap;
}
.pill-blue   { background: var(--ag-blue-tint);  color: #0c447c; }
.pill-amber  { background: var(--ag-amber-tint); color: #854f0b; }
.pill-teal   { background: var(--ag-teal-tint);  color: #085041; }
.pill-coral  { background: var(--ag-coral-tint); color: var(--ag-coral); }
.pill-slate  { background: var(--ag-slate-tint); color: #444441; }

/* Channel icons — small tinted circle per channel, used wherever an
   edition's channels are listed at a glance (dashboard, Editions list,
   edition header). */
.channel-icon {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .68rem;
  flex-shrink: 0;
}
.channel-icon--edition { background: var(--ag-blue-tint);  color: #185fa5; }
.channel-icon--podcast { background: var(--ag-teal-tint);  color: var(--ag-teal); }
.channel-icon--pdf     { background: var(--ag-coral-tint); color: var(--ag-coral); }

/* Channel pill links — the "Also available as" hero on the edition page. */
.channel-pill {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .8rem;
  font-weight: 600;
  border-radius: 20px;
  padding: .35rem .85rem;
  text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease;
}
.channel-pill:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(15, 23, 42, .12);
  text-decoration: none;
}
.channel-pill--podcast { background: var(--ag-teal-tint);  color: var(--ag-teal); }
.channel-pill--pdf     { background: var(--ag-coral-tint); color: var(--ag-coral); }

a { color: var(--brand); }
a:hover { color: var(--brand-dark); }

a[target="_blank"]:not(.btn)::after {
  content: "\00a0⤴";
  font-size: .6em;
  vertical-align: 0.2em;
  opacity: .75;
  text-shadow: 0.4px 0 0 currentColor, -0.4px 0 0 currentColor,
               0 0.4px 0 currentColor, 0 -0.4px 0 currentColor;
}

@media print {
  .app-navbar, footer, .btn, .d-print-none { display: none !important; }
  body { background: white !important; }

  /* keep rich block colours on paper */
  .agentic-item, .agentic-trend, .agentic-more-news,
  .agentic-story--lead, .agentic-story--standard, .agentic-story--brief,
  .agentic-cluster, .agentic-callout, .agentic-quote,
  .agentic-quick-hits { break-inside: avoid; box-shadow: none !important; }

  .agentic-section { break-before: auto; }

  /* suppress external-link arrows and underlines */
  a[target="_blank"]::after { display: none !important; }
  a { text-decoration: none; }

  @page { margin: 1.5cm 2cm; }
}

/* Agentic summary heading scale — explicit and monotonic, independent of
   Bootstrap's h1-h6 utility classes (which don't map cleanly onto the
   block hierarchy: edition > section > story/cluster > brief/callout > label). */
.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; }

/* Section headers — a colored kicker dot + short accent underline instead of
   a plain hairline, so a new section reads as a fresh start, not a line break. */
.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;
}

/* Item block — unified content block (current generation). No emphasis
   variants: the structure (section title, position) provides hierarchy. */
.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; }

/* Trend block — insight / pattern callout. */
.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; }

/* More news block — closing digest of minor-but-notable items. */
.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; }

/* Stories — every emphasis level gets a real, visibly-filled box (never
   bg-body-tertiary, which equals the page background and is invisible). */
.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;
}

/* Source citation chips — appear inline after a story headline. */
.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;
}
/* Consecutive chips sit flush with a hair of gap. */
.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;
}

/* Callouts — one branded color per variant, applied to fill, border, label
   and icon so each kind is instantly recognizable while scanning. */
.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;
}

/* Quick hits — the explicit ask was to make this stand out: a bigger, bolder
   header (not a tiny uppercase label) inside its own visibly-colored box. */
.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);
}