/* Results close-up: the example CSV, chart and decision stay connected without an app shell. */
[data-home-feature="analysis"] {
  min-height: 620px;
  background: radial-gradient(ellipse at 82% 12%, #cdd5ee, transparent 66%), linear-gradient(145deg, #edf3f6, #e3e7f3);
}
[data-home-feature="analysis"]::before {
  width: 95%; aspect-ratio: 1; left: -42%; bottom: -52%; border-radius: 50%;
  border: 1px solid #ffffffc9; box-shadow: 0 0 0 35px #ffffff24, 0 0 0 36px #ffffff9c;
  background: linear-gradient(120deg, #ffffff9c, #ffffff08);
}
[data-home-feature="analysis"]::after {
  width: 70%; height: 140%; right: -40%; top: -15%; transform: rotate(-17deg);
  border-left: 1px solid #ffffffab; background: linear-gradient(90deg, #ffffff40, transparent);
}
.feature-analysis { position: relative; min-width: 0; padding-top: 28px; color: #24283f; }
.feature-analysis__source {
  position: absolute; right: 0; top: 0; z-index: 1; width: 230px; padding: 16px 20px;
  color: #24283f; text-decoration: none; transition: border-color .9s, box-shadow .9s;
}
.feature-analysis__source > strong { display: block; margin: 7px 0 4px; font-size: 15px; font-weight: 500; }
.feature-analysis__source > span:last-child { color: #646980; font-size: 12px; }
.feature-analysis__source:hover { border-color: #8f99cf; }
.feature-analysis__source:focus-visible { outline: 2px solid #5561c8; outline-offset: 4px; }
.feature-analysis__chart { width: 90%; padding: 16px 22px 12px; transition: border-color .9s, box-shadow .9s; }
.feature-analysis__heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.feature-analysis__heading strong { display: block; margin-top: 6px; font: 500 21px/1.2 var(--display); }
.feature-analysis__heading > span { padding-top: 3px; color: #646980; font-size: 11px; white-space: nowrap; }
.feature-analysis__axis { margin-top: 14px; font-size: 12px; color: #646980; }
.feature-analysis__comparison { max-width: 560px; margin: 0 auto; }
.feature-analysis__plot { display: block; width: 100%; max-height: 150px; margin-top: 6px; overflow: visible; font-family: var(--body); }
.feature-analysis__grid path { stroke: #d9deeb; stroke-width: 1; fill: none; }
.feature-analysis__ticks { fill: #646980; font-size: 15px; }
.feature-analysis__group rect { fill: #c6cde7; }
.feature-analysis__group--1 rect { fill: #aeb8dc; }
.feature-analysis__group--2 rect { fill: #8cafaa; }
.feature-analysis__group circle { fill: #3d4978; stroke: #fff; stroke-width: 1.5; }
.feature-analysis__group--2 circle { fill: #245449; }
.feature-analysis__mean { fill: #424b6a; font-size: 17px; }
.feature-analysis__conditions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 560px; margin: 0 auto; padding: 0 6.4% 0 11.4%; gap: 8px; text-align: center; font-size: 12px; line-height: 1.45; color: #525a73; }
.feature-analysis__key { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px 22px; margin-top: 12px; font-size: 11px; color: #646980; }
.feature-analysis__key > span { display: inline-flex; align-items: center; gap: 7px; }
.feature-analysis__key i { width: 6px; height: 6px; border-radius: 50%; background: #3d4978; }
.feature-analysis__decision { display: flex; align-items: flex-start; gap: 16px; width: 78%; margin: 14px 0 0 auto; padding: 16px 20px; transition: border-color .9s, box-shadow .9s; }
.feature-analysis__entry-icon { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 8px; background: #ecedfa; color: #5561c8; }
.feature-analysis__entry-icon svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.4; }
.feature-analysis__decision strong { display: block; margin-top: 7px; font-size: 17px; line-height: 1.3; font-weight: 500; }
.feature-analysis__decision p { margin-top: 6px; font-size: 13px; line-height: 1.5; color: #575e75; }
.feature-analysis__next { display: block; margin-top: 4px; font-size: 13px; line-height: 1.5; color: #404c89; }
.feature-analysis__caption { margin: 10px 0 0 8px; font-size: 11px; color: #646980; }
[data-home-feature="analysis"][data-phase="0"] .feature-analysis__source,
[data-home-feature="analysis"][data-phase="1"] .feature-analysis__chart,
[data-home-feature="analysis"][data-phase="2"] .feature-analysis__decision { border-color: #a7b1df; box-shadow: 0 16px 32px #282d581a, 0 0 0 2px #8b99d320; }

/* An assigned follow-up makes the project close-up about the team's next action too. */
.feature-project__followup { display: flex; align-items: center; gap: 14px; margin: 14px 5% 0 16%; padding: 12px 16px; color: #24283f; }
.feature-project__task-icon { flex: none; width: 15px; height: 15px; border: 1.5px solid #8e9bcc; border-radius: 50%; background: linear-gradient(90deg, #8e9bcc 50%, transparent 50%); }
.feature-project__followup > div { flex: 1; min-width: 0; }
.feature-project__followup strong { display: block; margin: 6px 0 4px; font-weight: 500; font-size: 15px; }
.feature-project__followup > div > span:last-child { color: #646980; font-size: 11px; }
.feature-project__assignee { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border: 2px solid #fff; border-radius: 50%; background: #dae9e5; color: #2e5147; font-size: 10px; }

@media (min-width: 1800px) {
  .feature-analysis { margin: 0 5%; }
  .feature-analysis__chart { padding: 30px 36px 26px; }
  .feature-analysis__heading strong { font-size: 30px; }
  .feature-analysis__axis, .feature-analysis__conditions { font-size: 15px; }
  .feature-analysis__decision { padding: 26px 30px; }
  .feature-analysis__decision strong { font-size: 21px; }
  .feature-analysis__decision p, .feature-analysis__next { font-size: 16px; }
}
@media (max-width: 1150px) and (min-width: 801px) {
  .feature-analysis__chart { width: 97%; padding: 24px 18px 20px; }
  .feature-analysis__heading { flex-wrap: wrap; gap: 9px; }
  .feature-analysis__decision { width: 94%; padding: 20px 18px; gap: 12px; }
  .feature-analysis__heading strong { font-size: 22px; }
  .feature-project__followup { margin-left: 6%; }
}
@media (max-width: 800px) {
  [data-home-feature="analysis"] { min-height: 0; }
}
@media (max-width: 500px) {
  .feature-analysis { padding-top: 0; }
  .feature-analysis__source { position: relative; display: block; width: fit-content; max-width: 100%; margin: 0 0 14px auto; padding: 14px 18px; }
  .feature-analysis__chart { width: 100%; padding: 22px 16px 18px; }
  .feature-analysis__heading { flex-wrap: wrap; gap: 9px; }
  .feature-analysis__heading strong { font-size: 23px; }
  .feature-analysis__axis { margin-top: 20px; font-size: 11px; }
  .feature-analysis__conditions { font-size: 11px; gap: 5px; }
  .feature-analysis__decision { width: 95%; padding: 18px 16px; gap: 12px; }
  .feature-analysis__decision strong { font-size: 16px; }
  .feature-analysis__entry-icon { width: 30px; height: 30px; }
  .feature-analysis__caption { font-size: 10px; line-height: 1.5; }
  .feature-project__followup { margin: 22px 0 0 8px; padding: 14px 12px; gap: 10px; }
  .feature-project__followup strong { font-size: 13px; line-height: 1.4; }
}
@media (prefers-reduced-motion: reduce) {
  .feature-analysis *, .feature-project__followup { transition: none !important; }
}
