a.contact_link {
  display:inline-flex;
  align-items:center;
  gap:6px;
  text-decoration:none;
  font-family: "Matter SemiMono", monospace;
  font-size:13px;
  line-height:1;
  color:var(--hard-grey);
  background-color:var(--paper);
  border:1px solid var(--gridline);
  border-radius:20px;
  padding:6px 13px;
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}

a.contact_link:hover {
  color:var(--soft-black);
  background-color:var(--gentle-grey);
  border-color:#cfc9c9;
}

.featured_ideas_banner {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin:20px 20px 0;
  padding:22px;
  border:1px solid var(--gridline);
  border-radius:12px;
  background-color:var(--gentle-white);
  color:var(--soft-grey);
  text-decoration:none;
  transition:color 150ms ease, box-shadow 450ms ease, transform 450ms ease;
  font-family: "Inter";
}

.featured_ideas_banner:hover {
  color:var(--hard-grey);
  box-shadow:var(--box-shadow-combined);
  transform:scale(1.005);
  transition: box-shadow 150ms ease, transform 150ms ease;
}

.featured_ideas_banner.new_ideas {
  color:var(--soft-black);
  box-shadow:var(--box-shadow-combined);
  padding:42px 22px;
}

.featured_ideas_banner .new_ideas_icon {
  background-color:var(--forest);
  width:32px;
  padding:4px;
  height:auto;
  aspect-ratio: 1;
  border-radius:50%;
  display:none;
  align-items: center;
  justify-content: center;
}

.featured_ideas_banner.new_ideas .new_ideas_icon {
  display:flex;
}

.featured_ideas_banner .new_ideas_icon svg.new_ideas_svg {
  width:20px;
  height:auto;
  stroke:var(--gentle-white);
}

.featured_ideas_banner:hover .featured_ideas_banner_icon {
  width:51px;
}

.featured_ideas_banner_left {
  display:flex;
  align-items:center;
  gap:16px;
}

.featured_ideas_banner_bird {
  width:20px;
  height:auto;
}

.featured_ideas_banner_icon_wrapper {
  border-radius:8px;
  border:1px solid var(--gridline);
  width:44px;
  height:44px;
  overflow:hidden;
}

.featured_ideas_banner_icon {
  width:48px;
  height:auto;
  flex-shrink:0;
  transition:width 150ms;
}

.featured_ideas_banner_text strong {
  font-weight:700;
}

.featured_ideas_banner_arrow {
  width:18px;
  height:18px;
  flex-shrink:0;
}

@media (min-width:900px) {
  .featured_ideas_banner {
    margin:32px;
  }
}

.featured_idea_source {
  margin-top:24px;
  padding-top:20px;
  border-top:1px solid var(--gridline);
}

.featured_idea_source_label {
  font-weight:600;
  margin-right:6px;
}

.idea_type_label {
  display:inline-block;
  align-self:flex-start;
  font-size:12px;
  font-family: "Matter SemiMono", monospace;
  text-transform: capitalize;
  padding:4px 9px;
  border-radius:12px;
  margin-bottom:22px;
  color:var(--hard-grey);
  border:1px solid var(--gridline);
}

a.table_row .idea_type_label {
  font-size:11px;
  margin-bottom:12px;
}

.featured_idea_source_summary {
  margin:8px 0 0;
  color:var(--hard-grey);
  font-size:14px;
}

.ideas_table .table_row_summary {
  margin-bottom:12px;
}

.ideas_section_heading {
  margin:16px 0 8px;
  padding-left:10px;
  font-family: "Matter SemiMono", monospace;
  font-size:11px;
  font-weight:600;
  letter-spacing:0.04em;
  text-transform:uppercase;
  color:var(--soft-grey);
}

.ideas_section_heading:first-child {
  margin-top:0;
}

@media (min-width:900px) {
  .featured_ideas_intro {
    padding:24px 42px 0;
  }
}

svg.contact_icon {
  width:20px;
  height:auto;
}

.journalist_header {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}

.block_journalist .journalist_header .title {
  margin-bottom:0;
  padding-bottom:0;
}

.block_journalist .description {
  padding:0;
  font-size:18px;
  color:var(--hard-grey);
  text-wrap:pretty;
}

.block_journalist .rationale {
  padding:0;
  margin-top:8px;
  font-size:15px;
  color:var(--soft-grey);
  text-wrap:pretty;
}

.block_journalist .contact_links {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:14px;
  padding:0;
}

.block_journalist .contact_links:empty {
  display:none;
  margin-top:0;
}

.journalist_recent_articles_wrapper {
  margin-top:16px;
  padding-top:14px;
  border-top:1px solid var(--gridline);
}

.journalist_recent_articles_label {
  display:block;
  margin-bottom:8px;
  font-family: "Matter SemiMono", monospace;
  font-size:11px;
  font-weight:600;
  letter-spacing:0.04em;
  text-transform:uppercase;
  color:var(--soft-grey);
}

ul.journalist_recent_articles {
  display:flex;
  flex-direction:column;
  gap:6px;
  margin:0;
  padding:0;
}

ul.journalist_recent_articles li {
  list-style-type:none;
}

ul.journalist_recent_articles li a {
  display:block;
  overflow:hidden;
  max-width:100%;
  color:var(--hard-grey);
  font-size:13px;
  text-decoration:none;
  text-overflow:ellipsis;
  white-space:nowrap;
}

ul.journalist_recent_articles li a:hover {
  color:var(--soft-black);
  text-decoration:underline;
}

.tracking_status_banner {
  display:grid;
  grid-template-rows:0fr;
  opacity:0;
  transition:grid-template-rows 280ms ease, opacity 220ms ease;
}

.tracking_status_banner.open {
  grid-template-rows:1fr;
  opacity:1;
}

.tracking_status_banner_inner {
  overflow:hidden;
  min-height:0;
  font-family: "Matter SemiMono", monospace;
  font-size:14px;
  text-align: center;
  border-bottom:1px solid var(--gridline);
  background-color:var(--dark-peach);
  transform:translateY(-6px);
  transition:transform 280ms ease, padding 280ms ease;
}

.tracking_status_banner.open .tracking_status_banner_inner {
  transform:translateY(0);
  padding:20px 0;
}

@media (prefers-reduced-motion:reduce) {
  .tracking_status_banner,
  .tracking_status_banner_inner {
    transition:none;
  }
}

.banner_draft_link {
  margin-bottom:0;
  padding:0;
  border:0;
  background:none;
  font-family:inherit;
  font-size:inherit;
  color:inherit;
  text-decoration:underline;
  cursor:pointer;
  color:var(--hard-grey);
}

.banner_draft_link:hover {
  opacity:0.7;
}

@media (min-width:900px) {
  .idea .article_headline {
    padding:38px 52px;
  }
  .idea .article_headline h1 {
    font-size:28px;
  }
}

.paper.idea {
  border-radius:16px;
}

.idea .insight_type_bar {
  background-color:var(--subtle-white);
}

.idea .idea_summary {
  background-color:var(--subtle-white);
  padding:40px 52px;
  border-bottom:1px solid var(--gridline);
  font-family: "Matter SemiMono", monospace;
  font-size:15px;
  color:var(--hard-grey);
}

.idea_summary_inner {
  display:block;
  max-width:700px;
  position: relative;
  margin:auto;
}

.idea_summary_inner span.label {
  font-family: "Ivar";
  font-weight:bold;
  display:block;
  margin-bottom:20px;
  font-size:26px;
  color:var(--soft-black);
}

.status_toggle {
  display:inline-flex;
  align-items:center;
  gap:7px;
  margin-bottom:0;
  line-height:inherit;
  border:1px solid var(--gridline);
  border-radius:16px;
  padding:7px 13px;
  font-size:14px;
  font-family: "Matter SemiMono", monospace;
  color:#777070;
  background:var(--paper);
  white-space:nowrap;
  cursor:pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.status_tabs {
  display:inline-flex;
  align-items:center;
  border:1px solid var(--gridline);
  border-radius:26px;
  overflow:hidden;
  background:var(--subtle-white);
  padding:4px;
  gap:2px;
  position:relative;
}

.status_tab {
  display:inline-flex;
  align-items:center;
  gap:7px;
  margin-bottom:0;
  padding:2px 11px;
  font-size:12px;
  font-weight:400;
  font-family: "Matter SemiMono", monospace;
  color:var(--soft-grey);
  background:transparent;
  white-space:nowrap;
  cursor:pointer;
  transition: color 0.15s ease, background-color 0.15s ease, transform 0.15s ease;
  border-radius:26px;
  line-height:27px;
  border:1px solid transparent;
}

.status_tab:hover {
  color:#777070;
  border:1px solid transparent;
}

.status_tab:active {
  transform:scale(0.95);
}

.status_tab.active {
  background-color:var(--paper);
  border:1px solid var(--gridline);
  z-index:2;
}

.status_toggle_dot {
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--magic);
  opacity:0.25;
}

.status_tab.active .status_toggle_dot {
  background:var(--magic);
  animation:status_dot_pulse 2s ease-in-out infinite;
}

@keyframes status_dot_pulse {
  0%, 100% {
    opacity:0.25;
    box-shadow:0 0 0 0 transparent;
  }
  50% {
    opacity:1;
    box-shadow:0 0 6px 1px var(--magic);
  }
}

@media (prefers-reduced-motion:reduce) {
  .status_toggle_dot {
    animation:none;
  }
}

.idea_status {
  position:relative;
}

.confetti_particle {
  position:absolute;
  pointer-events:none;
  z-index:1;
}

.status_set_draft {
  margin-bottom:0;
  padding:0;
  border:0;
  background:none;
  font-size:13px;
  color:var(--soft-grey);
  text-decoration:underline;
  cursor:pointer;
  font-family: "Matter SemiMono", monospace;
}

.status_set_draft:hover {
  color:#777070;
}

.relevant_articles, .similar_campaigns, .upcoming_events {
  background-color:var(--shaded-white);
  border:1px solid var(--gridline);
  padding:24px;
  border-radius:16px;
}

.relevant_articles a {
  text-decoration:none;
}

.ideas_link {
  background-color:#ffffff69;
  border:1px solid var(--gridline);
  border-radius:16px;
  padding:17px;
  margin-bottom:17px;
  font-family: "Matter SemiMono", monospace;
}

.ideas_link a {
  text-decoration:none;
}

.ideas_link:last-child {
  margin-bottom:0;
}

.ideas_link .headline {
  font-family: "Inter";
  font-size:16px;
  color:var(--soft-black);
  text-decoration:none;
  font-weight:bold;
}

.ideas_link .snippet {
  font-size:14px;
  color:var(--soft-grey);
}

.ideas_link .event_date {
  font-family: "Matter SemiMono", monospace;
  font-size:13px;
  color:var(--soft-grey);
}

img.source_favicon.small {
  height:20px;
  width:20px;
}

/* The journalists block sits in its own answer-sequence so it can start off the
   Active press rather than on load. Transparent to layout, so the block still
   spaces as a flex item of .related_stories_wrapper — and contributes no gap of
   its own while it's still hidden. */
.journalist_matches_sequence {
  display:contents;
}

.related_stories_wrapper {
  display:flex;
  flex-direction:column;
  gap:24px;
  margin:43px;
}

.featured_ideas_wrapper {
  background-color:var(--gentle-white);
  padding:12px;
  border-radius:9xp;
  border:1px solid var(--gridline);
}

.featured_ideas_intro {
  text-align: center;
  margin-bottom:30px;
}

.featured_ideas_heading {
  margin-bottom:6px;
  font-size:32px;
}

.featured_ideas_subheading {
  margin:0;
  color:var(--hard-grey);
  font-size:16px;
  font-family:"Inter";
}

.paper.featured_idea span.summary {
  margin-bottom:32px;
}

.paper.featured_idea .feedback_wrapper {
  border-top:0;
}

.answer_block {
  background-color:#fdf5f5;
  border-radius:16px;
  transition:transform 150ms, background-color 320ms ease, border-color 320ms ease,
             height 340ms cubic-bezier(.4, 0, .2, 1), opacity 240ms ease,
             margin-bottom 340ms cubic-bezier(.4, 0, .2, 1);
}

.answer_block.pending {
  display:none;
}

.answer_block.thinking {
  border:1px solid var(--gridline);
}

.answer_block.thinking.complete {
  border:0;
}

/* Putting the idea back to Draft folds the journalists away rather than
   dropping them — the height itself is pinned inline by answer-sequence, since
   a transition can't run to or from `auto`. The negative margin swallows the
   wrapper's 24px flex gap on the way down, so the blocks below rise smoothly
   instead of jumping that last stretch once it stops taking up room. */
.answer_block.collapsed {
  opacity:0;
  overflow:hidden;
  margin-bottom:-24px;
}

/* answer-sequence un-hides one block at a time; this is the block's entrance
   as it takes its turn, so the chain reads as things arriving rather than
   just popping in. It settles down from above, pushing the finished blocks
   below it. */
.answer_block.revealing {
  animation:answer_block_appear 260ms ease both;
}

@keyframes answer_block_appear {
  from {
    opacity:0;
    transform:translateY(-4px);
  }
  to {
    opacity:1;
    transform:translateY(0);
  }
}

.answer_block.pressed {
  transform:scale(0.99);
}

.answer_block.complete {
  background-color:var(--deep-rose);
  border-color:var(--deep-rose);
  box-shadow:var(--box-shadow-combined);
}

.answer_block .upper {
  padding:24px;
  color:#826c6d;
  display:flex;
  gap:3px;
  align-items:center;
  transition:gap 150ms ease;
  min-height:29px; /* pins the row so the blob collapsing on .complete doesn't
                      shorten the whole block — the motion stays horizontal */
}

/* The blob morphs triangle -> dot -> circle. All three states share one 29x29
   box and only swap clip-path, because a border triangle (width/height 0) has
   no continuous path to a circle and aspect-ratio/height:auto don't animate.
   Each polygon is 24 vertices sampled at the same 24 angles from the box
   centre, so vertex k maps to vertex k and the shape morphs without twisting.
   Generated by scripting the ray/edge intersections — see the plan. */
.answer_block .blob {
  position:relative;
  isolation:isolate; /* shader canvas mounts at z-index -1; without a stacking
                        context it hides behind our own background-color */
  flex:none;
  width:23px;
  height:23px;
  background-color:#826c6d;
  clip-path:polygon(72.41% 50%, 65.61% 54.18%, 61.56% 56.68%, 58.54% 58.54%, 55.88% 60.18%, 53.17% 61.84%, 50% 63.79%, 45.57% 66.52%, 37.65% 71.39%, 27.59% 72.41%, 27.59% 62.94%, 27.59% 56.01%, 27.59% 50%, 27.59% 43.99%, 27.59% 37.06%, 27.59% 27.59%, 37.65% 28.61%, 45.57% 33.48%, 50% 36.21%, 53.17% 38.16%, 55.88% 39.82%, 58.54% 41.46%, 61.56% 43.32%, 65.61% 45.82%);
  transition:clip-path 220ms ease, transform 220ms ease;
}

.answer_block.pressed .blob {
  clip-path:polygon(75.86% 50%, 74.98% 56.69%, 72.4% 62.93%, 68.29% 68.29%, 62.93% 72.4%, 56.69% 74.98%, 50% 75.86%, 43.31% 74.98%, 37.07% 72.4%, 31.71% 68.29%, 27.6% 62.93%, 25.02% 56.69%, 24.14% 50%, 25.02% 43.31%, 27.6% 37.07%, 31.71% 31.71%, 37.07% 27.6%, 43.31% 25.02%, 50% 24.14%, 56.69% 25.02%, 62.93% 27.6%, 68.29% 31.71%, 72.4% 37.07%, 74.98% 43.31%);
  transform: scale(0.8);
}

.answer_block.thinking .upper {
  gap:9px;
}

.answer_block.thinking .blob {
  clip-path:polygon(100% 50%, 98.3% 62.94%, 93.3% 75%, 85.36% 85.36%, 75% 93.3%, 62.94% 98.3%, 50% 100%, 37.06% 98.3%, 25% 93.3%, 14.64% 85.36%, 6.7% 75%, 1.7% 62.94%, 0% 50%, 1.7% 37.06%, 6.7% 25%, 14.64% 14.64%, 25% 6.7%, 37.06% 1.7%, 50% 0%, 62.94% 1.7%, 75% 6.7%, 85.36% 14.64%, 93.3% 25%, 98.3% 37.06%);
  transition:clip-path 380ms cubic-bezier(.34, 1.5, .64, 1);
  /* Delayed past the entry transition above. fill-mode stays `none` (the
     default) so there's no animated value during the delay and the transition
     keeps ownership of clip-path; the 0% keyframe is the same circle it lands
     on, so the handoff has no seam. */
  animation:answer_block_blob_morph 4s cubic-bezier(.34, 1.5, .64, 1) 380ms infinite;
}

/* Circle -> parallelogram -> X -> square on a one-second beat while thinking.
   Per 25% slot (1s): hold the arrived shape for 15% (600ms), then morph over
   the next 10% (400ms).

   These use their own denser 72-angle sample set (5deg apart) rather than the
   24 angles the states above share. A corner fillet only subtends ~20deg seen
   from the box centre, so at 15deg spacing a rounded corner samples as a
   bevel; 5deg spacing puts four or five points on each arc. That's fine
   because the loop only ever interpolates between its own keyframes — the 72
   of them still map k-to-k — and it hands off from the transition above at a
   circle, where a 24-gon and a 72-gon differ by a tenth of a pixel at 23px.

   Shapes: circle r50; parallelogram 68 wide x 72 tall with horizontal
   top/bottom edges and sides leaning 18.4deg off vertical, corners filleted
   r8 — the radius is held down by the 71.6deg corners, where a larger one
   would swallow most of the short edge; X is a plus rotated 45deg with arm
   half-width 12.94 and r6 fillets on both the convex tips and the reflex
   inner corners; square half-size 44 (area-matched to the circle, since a
   box-filling square reads much heavier), r10. */
@keyframes answer_block_blob_morph {
  0%, 15% {
    clip-path:polygon(100% 50%, 99.81% 54.36%, 99.24% 58.68%, 98.3% 62.94%, 96.98% 67.1%, 95.32% 71.13%, 93.3% 75%, 90.96% 78.68%, 88.3% 82.14%, 85.36% 85.36%, 82.14% 88.3%, 78.68% 90.96%, 75% 93.3%, 71.13% 95.32%, 67.1% 96.98%, 62.94% 98.3%, 58.68% 99.24%, 54.36% 99.81%, 50% 100%, 45.64% 99.81%, 41.32% 99.24%, 37.06% 98.3%, 32.9% 96.98%, 28.87% 95.32%, 25% 93.3%, 21.32% 90.96%, 17.86% 88.3%, 14.64% 85.36%, 11.7% 82.14%, 9.04% 78.68%, 6.7% 75%, 4.68% 71.13%, 3.02% 67.1%, 1.7% 62.94%, 0.76% 58.68%, 0.19% 54.36%, 0% 50%, 0.19% 45.64%, 0.76% 41.32%, 1.7% 37.06%, 3.02% 32.9%, 4.68% 28.87%, 6.7% 25%, 9.04% 21.32%, 11.7% 17.86%, 14.64% 14.64%, 17.86% 11.7%, 21.32% 9.04%, 25% 6.7%, 28.87% 4.68%, 32.9% 3.02%, 37.06% 1.7%, 41.32% 0.76%, 45.64% 0.19%, 50% 0%, 54.36% 0.19%, 58.68% 0.76%, 62.94% 1.7%, 67.1% 3.02%, 71.13% 4.68%, 75% 6.7%, 78.68% 9.04%, 82.14% 11.7%, 85.36% 14.64%, 88.3% 17.86%, 90.96% 21.32%, 93.3% 25%, 95.32% 28.87%, 96.98% 32.9%, 98.3% 37.06%, 99.24% 41.32%, 99.81% 45.64%);
  }
  25%, 40% {
    clip-path:polygon(84% 50%, 83.04% 52.89%, 82.11% 55.66%, 81.21% 58.36%, 80.32% 61.04%, 79.43% 63.72%, 78.51% 66.46%, 77.57% 69.3%, 76.57% 72.29%, 75.5% 75.5%, 74.33% 79%, 72.8% 82.56%, 70.18% 84.96%, 66.78% 85.98%, 63.1% 86%, 59.65% 86%, 56.35% 86%, 53.15% 86%, 50% 86%, 46.85% 86%, 43.65% 86%, 40.35% 86%, 36.9% 86%, 33.21% 86%, 29.22% 86%, 24.79% 86%, 19.79% 86%, 14.07% 85.93%, 9.66% 83.85%, 7.33% 79.88%, 7.9% 74.31%, 9.74% 68.77%, 11.31% 64.08%, 12.67% 60%, 13.88% 56.37%, 14.98% 53.06%, 16% 50%, 16.96% 47.11%, 17.89% 44.34%, 18.79% 41.64%, 19.68% 38.96%, 20.57% 36.28%, 21.49% 33.54%, 22.43% 30.7%, 23.43% 27.71%, 24.5% 24.5%, 25.67% 21%, 27.2% 17.44%, 29.82% 15.04%, 33.22% 14.02%, 36.9% 14%, 40.35% 14%, 43.65% 14%, 46.85% 14%, 50% 14%, 53.15% 14%, 56.35% 14%, 59.65% 14%, 63.1% 14%, 66.79% 14%, 70.78% 14%, 75.21% 14%, 80.21% 14%, 85.93% 14.07%, 90.34% 16.15%, 92.67% 20.12%, 92.1% 25.69%, 90.26% 31.23%, 88.69% 35.92%, 87.33% 40%, 86.12% 43.63%, 85.02% 46.94%);
  }
  50%, 65% {
    clip-path:polygon(70.79% 50%, 71.08% 51.84%, 72.25% 53.92%, 75% 56.7%, 78.77% 60.47%, 84.29% 65.99%, 90.61% 73.45%, 90% 78.01%, 87.14% 81.16%, 84.15% 84.15%, 81.16% 87.14%, 78.01% 90%, 73.45% 90.61%, 65.99% 84.29%, 60.47% 78.77%, 56.7% 75%, 53.92% 72.25%, 51.84% 71.08%, 50% 70.79%, 48.16% 71.08%, 46.08% 72.25%, 43.3% 75%, 39.53% 78.77%, 34.01% 84.29%, 26.55% 90.61%, 21.99% 90%, 18.84% 87.14%, 15.85% 84.15%, 12.86% 81.16%, 10% 78.01%, 9.39% 73.45%, 15.71% 65.99%, 21.23% 60.47%, 25% 56.7%, 27.75% 53.92%, 28.92% 51.84%, 29.21% 50%, 28.92% 48.16%, 27.75% 46.08%, 25% 43.3%, 21.23% 39.53%, 15.71% 34.01%, 9.39% 26.55%, 10% 21.99%, 12.86% 18.84%, 15.85% 15.85%, 18.84% 12.86%, 21.99% 10%, 26.55% 9.39%, 34.01% 15.71%, 39.53% 21.23%, 43.3% 25%, 46.08% 27.75%, 48.16% 28.92%, 50% 29.21%, 51.84% 28.92%, 53.92% 27.75%, 56.7% 25%, 60.47% 21.23%, 65.99% 15.71%, 73.45% 9.39%, 78.01% 10%, 81.16% 12.86%, 84.15% 15.85%, 87.14% 18.84%, 90% 21.99%, 90.61% 26.55%, 84.29% 34.01%, 78.77% 39.53%, 75% 43.3%, 72.25% 46.08%, 71.08% 48.16%);
  }
  75%, 90% {
    clip-path:polygon(94% 50%, 94% 53.85%, 94% 57.76%, 94% 61.79%, 94% 66.01%, 94% 70.52%, 94% 75.4%, 94% 80.81%, 93.65% 86.63%, 91.07% 91.07%, 86.63% 93.65%, 80.81% 94%, 75.4% 94%, 70.52% 94%, 66.01% 94%, 61.79% 94%, 57.76% 94%, 53.85% 94%, 50% 94%, 46.15% 94%, 42.24% 94%, 38.21% 94%, 33.99% 94%, 29.48% 94%, 24.6% 94%, 19.19% 94%, 13.37% 93.65%, 8.93% 91.07%, 6.35% 86.63%, 6% 80.81%, 6% 75.4%, 6% 70.52%, 6% 66.01%, 6% 61.79%, 6% 57.76%, 6% 53.85%, 6% 50%, 6% 46.15%, 6% 42.24%, 6% 38.21%, 6% 33.99%, 6% 29.48%, 6% 24.6%, 6% 19.19%, 6.35% 13.37%, 8.93% 8.93%, 13.37% 6.35%, 19.19% 6%, 24.6% 6%, 29.48% 6%, 33.99% 6%, 38.21% 6%, 42.24% 6%, 46.15% 6%, 50% 6%, 53.85% 6%, 57.76% 6%, 61.79% 6%, 66.01% 6%, 70.52% 6%, 75.4% 6%, 80.81% 6%, 86.63% 6.35%, 91.07% 8.93%, 93.65% 13.37%, 94% 19.19%, 94% 24.6%, 94% 29.48%, 94% 33.99%, 94% 38.21%, 94% 42.24%, 94% 46.15%);
  }
  100% {
    clip-path:polygon(100% 50%, 99.81% 54.36%, 99.24% 58.68%, 98.3% 62.94%, 96.98% 67.1%, 95.32% 71.13%, 93.3% 75%, 90.96% 78.68%, 88.3% 82.14%, 85.36% 85.36%, 82.14% 88.3%, 78.68% 90.96%, 75% 93.3%, 71.13% 95.32%, 67.1% 96.98%, 62.94% 98.3%, 58.68% 99.24%, 54.36% 99.81%, 50% 100%, 45.64% 99.81%, 41.32% 99.24%, 37.06% 98.3%, 32.9% 96.98%, 28.87% 95.32%, 25% 93.3%, 21.32% 90.96%, 17.86% 88.3%, 14.64% 85.36%, 11.7% 82.14%, 9.04% 78.68%, 6.7% 75%, 4.68% 71.13%, 3.02% 67.1%, 1.7% 62.94%, 0.76% 58.68%, 0.19% 54.36%, 0% 50%, 0.19% 45.64%, 0.76% 41.32%, 1.7% 37.06%, 3.02% 32.9%, 4.68% 28.87%, 6.7% 25%, 9.04% 21.32%, 11.7% 17.86%, 14.64% 14.64%, 17.86% 11.7%, 21.32% 9.04%, 25% 6.7%, 28.87% 4.68%, 32.9% 3.02%, 37.06% 1.7%, 41.32% 0.76%, 45.64% 0.19%, 50% 0%, 54.36% 0.19%, 58.68% 0.76%, 62.94% 1.7%, 67.1% 3.02%, 71.13% 4.68%, 75% 6.7%, 78.68% 9.04%, 82.14% 11.7%, 85.36% 14.64%, 88.3% 17.86%, 90.96% 21.32%, 93.3% 25%, 95.32% 28.87%, 96.98% 32.9%, 98.3% 37.06%, 99.24% 41.32%, 99.81% 45.64%);
  }
}

/* Complete layers on top of .thinking (source order decides — both are 0,2,0),
   so it keeps that circle clip-path and just collapses the box. Width and
   height go together to keep the box square, or the circle would squash into
   an ellipse on the way out. The negative margin eats .upper's gap so the
   label lands flush where the blob's left edge was. Transition is re-declared
   because .thinking's shorthand wiped the base rule's list. */
.answer_block.complete .blob {
  width:0;
  height:0;
  margin-right:-12px;
  opacity:0;
  transition:width 320ms cubic-bezier(.4, 0, .2, 1),
             height 320ms cubic-bezier(.4, 0, .2, 1),
             margin-right 320ms cubic-bezier(.4, 0, .2, 1),
             opacity 200ms ease;
  /* Freeze the morph on whatever shape it reached rather than `animation:none`,
     which would snap back to the 0% circle just as the blob collapses. Pausing
     also means blocks rendered ready (server-side `thinking complete`) never
     tick an animation on a 0x0, invisible blob. */
  animation-play-state:paused;
}

.answer_block .label {
  display:grid;
  font-family: "Matter SemiMono", monospace;
  font-size:14px;
}

/* Both labels stack in one grid cell so the block sizes to the longer string
   and nothing reflows mid-fade. */
.answer_block .label > * {
  grid-area:1 / 1;
  transition:opacity 200ms ease, color 320ms ease;
}

.answer_block .label .busy,
.answer_block .label .done {
  opacity:0;
}

/* Content is always present (not injected only while thinking) so the grid
   cell reserves its width up front and the label never reflows when
   thinking starts. */
.answer_block .label .busy::after {
  content:"...";
  display:inline-block;
}

/* Steps through none/one/two/three dots by sliding a clip-path over the
   ::after box. The stops land on exact thirds of the pseudo-element's own
   box, so the clip always falls on a dot boundary regardless of glyph
   widths — the label font is "Matter SemiMono", which isn't guaranteed
   truly monospaced, so ch units aren't safe here. */
.answer_block.thinking .label .busy::after {
  animation:answer_block_dots 1.6s steps(4, jump-none) infinite;
}

@keyframes answer_block_dots {
  from {
    clip-path:inset(0 100% 0 0);
  }
  to {
    clip-path:inset(0 0 0 0);
  }
}

.answer_block.thinking .label .idle {
  opacity:0;
}

.answer_block.thinking .label .busy {
  opacity:1;
}

.answer_block.complete .label .busy {
  opacity:0;
}

/* .complete layers on top of .thinking, so without this the dots would keep
   cycling forever behind a faded-out label — three infinite animations per
   page, and running from first paint on an already-processed idea. */
.answer_block.complete .label .busy::after {
  animation:none;
}

.answer_block.complete .label .done {
  opacity:1;
  color:var(--paper);
  font-family: "Ivar";
  font-size:19px;
  font-weight:600;
}

.answer_block.interactive {
  cursor:pointer;
  user-select:none;
  touch-action:manipulation;
}

.answer_block.interactive.thinking {
  cursor:default;
}

.answer_block.interactive:focus-visible {
  outline:2px solid var(--soft-black);
  outline-offset:2px;
}

.answer_block .results {
  display:grid;
  grid-template-rows:0fr;
  transition:grid-template-rows 420ms cubic-bezier(.4, 0, .2, 1);
}

.answer_block .results_inner {
  overflow:hidden;
  min-height:0;   /* grid items floor at min-content without this, so the
                     collapsed row never actually reaches zero */
  opacity:0;
  transition:opacity 300ms ease 120ms;  /* trails the expansion so the panel
                                           fades in as the space appears */
}

.answer_block.complete .results { grid-template-rows:1fr; }
.answer_block.complete .results_inner { opacity:1; }
.answer_block.reveal_complete .results_inner { overflow:visible; }

.answer_block .results_panel {
  background-color:var(--paper);
  border-radius:0 0 15px 15px;
  padding:24px;
}

.answer_block.suggestions_wrapper .results_panel {
  padding:0;
}

.answer_block .block_suggestion p:last-of-type {
  margin-bottom:0;
}

.answer_block .block_suggestion {
  padding:34px 24px;
  border-bottom:1px solid var(--subtle-border);
}

.answer_block .block_suggestion:last-child {
  border-bottom:0;
}

.answer_block .block_suggestion:nth-child(even) {
  background-color:var(--gentle-grey);
}

/* Each content partial leads with its own <h4>, which duplicates the .done
   label here. */
.answer_block .results_panel h4 { display:none; }

.answer_block .results_empty {
  margin:0;
  font-family:"Matter SemiMono", monospace;
  font-size:14px;
  color:var(--soft-grey);
}

/* insights.css styles block_prediction under a .block ancestor this partial
   doesn't have here, so its typography is reproduced scoped to the panel.
   .results_panel already supplies padding:24px, so block_inner's own
   padding:32px 18px from insights.css is zeroed rather than inherited. */
.answer_block .results_panel .block_inner {
  padding:0;
}

.answer_block .results_panel .block_suggestion .title {
  font-size:20px;
  font-family:"Ivar";
  letter-spacing:-0.5px;
  font-weight:600;
  margin-bottom:14px;
  text-wrap:pretty;
}

.answer_block .results_panel .block_suggestion p {
  margin-bottom:14px;
}

.answer_block .results_panel .block_suggestion .description {
  font-size:18px;
  text-wrap:pretty;
}

/* Journalists carry far more per entry than the other blocks' two-line items —
   description, rationale, contacts, a recent-articles list — so they keep the
   grey card that .block used to give them, rather than running together. */
.answer_block .results_panel .block_journalist {
  background-color:var(--gentle-grey);
  border-radius:12px;
  padding:20px;
}

@media (prefers-reduced-motion:reduce) {
  /* The block still folds away on Draft — answer-sequence just drops it straight
     to zero rather than walking the height down. */
  .answer_block,
  .answer_block .blob,
  .answer_block.thinking .blob,
  .answer_block.complete .blob,
  .answer_block .label > *,
  .answer_block .results,
  .answer_block .results_inner {
    transition:none;
  }

  /* The sequence still has to advance block by block — only the motion of
     arriving is cut. */
  .answer_block.revealing {
    animation:none;
  }

  /* No transition means no transitionend, so reveal_complete never lands —
     unclip the panel off .complete directly instead. */
  .answer_block.complete .results_inner {
    overflow:visible;
  }

  /* Removing the animation leaves clip-path unset, i.e. unclipped, so all
     three dots sit still and show instead of stepping through the cycle. */
  .answer_block.thinking .label .busy::after {
    animation:none;
  }

  /* Separate rule from the transition:none group above — that one sets
     transition, this drops the shape loop back to the static circle the
     .thinking rule declares. */
  .answer_block.thinking .blob {
    animation:none;
  }
}

.edit_idea_button {
  background-color:var(--subtle-white);
  font-family: "Matter SemiMono", monospace;
  font-size:12px;
  color:var(--soft-grey);
  line-height:27px;
  border-radius:26px;
  border:1px solid var(--gridline);
  padding:7px 14px;
  text-decoration: none;
  font-weight:400;
}

.edit_idea_button:hover {
  color:#777070;
}