/* The fee study on a participating pot: open on its organiser's dashboard,
   folded into a card on the payout pages. Purple is the proposed screen, red
   the prefilled one, as in the study article. */
.study-results {
  --study-proposed: #4a3aa7;
  --study-prefilled: #e34948;
  --study-prefilled-text: #c8312f;

  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
  padding: var(--spacing-lg);
  font-size: var(--font-sm);
  line-height: 18px;
}

.study-results--card {
  background: white;
  border: 1px solid var(--color-border-neutral);
  border-radius: var(--rounded-xs);
  padding: 0;
  gap: 0;
  overflow: hidden;
}

.study-results__body { display: flex; flex-direction: column; gap: var(--spacing-xl); }
.study-results--card .study-results__body { padding: var(--spacing-md); }

.study-results__section { display: flex; flex-direction: column; gap: var(--spacing-xs); min-width: 0; }
.study-results__heading { font-family: var(--font-family-bricolage); font-weight: 800; font-size: var(--font-md); line-height: 24px; color: var(--interactive-primary); }
.study-results__lead { font-weight: var(--font-weight-semibold); }
.study-results__intro { font-size: var(--font-sm); color: var(--text-secondary); }
.study-results__caption { font-size: var(--font-sm); color: var(--text-secondary); line-height: 18px; }

.study-results__eyebrow {
  font-size: var(--font-sm);
  font-weight: var(--font-weight-bold);
  color: var(--interactive-primary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.study-results__thanks {
  background: var(--background-neutral);
  border-radius: var(--rounded-xs);
  padding: var(--spacing-xs) var(--spacing-sm);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3xs);
  font-size: var(--font-sm);
}

.study-results__thanks p { color: var(--text-secondary); }

.study-results__scroller {
  overflow-x: auto;
  scrollbar-width: thin;
  padding-bottom: var(--spacing-4xs);
  overscroll-behavior-x: contain;
}

.study-weeks { display: flex; min-width: 100%; width: max-content; padding-top: 18px; }
.study-weeks__week { flex: 1 0 44px; display: flex; flex-direction: column; align-items: center; font-size: var(--unit-12); line-height: 16px; color: var(--text-secondary); }
.study-weeks__plot { height: 110px; width: 100%; display: flex; align-items: flex-end; justify-content: center; border-bottom: 1px solid var(--color-border-neutral); margin-bottom: 4px; }
.study-weeks__bar { position: relative; width: min(64%, 40px); min-height: 1px; background: #e4e2dc; border-radius: 3px 3px 0 0; display: flex; flex-direction: column; justify-content: flex-end; }
.study-weeks__created { position: absolute; bottom: calc(100% + 2px); left: 50%; transform: translateX(-50%); }
.study-weeks__opted { position: relative; background: #163300; border-radius: 3px 3px 0 0; min-height: 3px; display: flex; justify-content: center; }
.study-weeks__opted span { color: #9fe870; font-weight: var(--font-weight-bold); padding-top: 1px; }
.study-weeks__opted--short span { position: absolute; bottom: calc(100% + 1px); color: #163300; padding: 0; }
.study-weeks__date { white-space: nowrap; }

.study-progress { display: flex; flex-direction: column; gap: var(--spacing-xs); }
.study-progress__total { font-size: var(--font-md); line-height: 24px; color: var(--text-secondary); }
.study-progress__total b { font-family: var(--font-family-bricolage); font-size: var(--font-xl); color: var(--interactive-primary); }
.study-progress__bar { display: block; height: 10px; border-radius: var(--rounded-full); background: var(--background-neutral); overflow: hidden; }
.study-progress__bar i { display: block; height: 100%; border-radius: inherit; background: var(--interactive-primary); }
.study-progress__bar--thin { height: 6px; }
.study-progress__cells { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--spacing-xs) var(--spacing-sm); }
.study-progress__cell { display: grid; grid-template-columns: 1fr auto; gap: 4px 8px; font-size: var(--font-sm); line-height: 18px; color: var(--text-secondary); }
.study-progress__cell b { color: var(--text-primary); white-space: nowrap; }
.study-progress__cell .study-progress__bar { grid-column: 1 / -1; }
.study-progress__cell--proposed .study-progress__bar i { background: #4a3aa7; }
.study-progress__cell--prefilled .study-progress__bar i { background: #e34948; }

.study-chart { display: flex; flex-direction: column; gap: var(--spacing-sm); --label: 160px; --room: 64px; }
.study-chart__title { font-family: var(--font-family-bricolage); font-weight: 800; font-size: var(--font-sm); line-height: 18px; color: var(--text-primary); margin-bottom: 6px; }
.study-chart__plot { position: relative; display: flex; flex-direction: column; gap: 10px; padding-bottom: 22px; }
.study-chart__grid {
  position: absolute; top: 0; bottom: 22px; left: var(--label); right: var(--room);
  background: linear-gradient(to right, rgba(15, 15, 10, .12) 1px, transparent 1px) 0 0 / calc(100% / var(--ticks)) 100%;
  border-right: 1px solid rgba(15, 15, 10, .12);
}
.study-chart__group { position: relative; border-left: 3px solid; padding-left: 7px; display: flex; flex-direction: column; gap: 4px; }
.study-chart__group--proposed { border-color: #4a3aa7; --bar: #4a3aa7; --ink: #4a3aa7; }
.study-chart__group--prefilled { border-color: #e34948; --bar: #e34948; --ink: #c8312f; }
.study-chart__screen { font-family: var(--font-family-bricolage); font-weight: 800; font-size: var(--unit-12); line-height: 16px; color: var(--ink); }
.study-chart__row { display: grid; grid-template-columns: calc(var(--label) - 10px) 1fr; align-items: center; min-height: 18px; }
.study-chart__label { font-size: var(--unit-12); line-height: 16px; color: var(--text-secondary); text-align: right; padding-right: 8px; }
.study-chart__track { position: relative; height: 16px; margin-right: var(--room); }
.study-chart__bar { position: absolute; left: 0; top: 0; bottom: 0; min-width: 2px; border-radius: 3px; background: var(--bar); opacity: .9; }
.study-chart__bar--own { top: 1px; bottom: 1px; opacity: 1; border: 1.2px solid var(--bar); background: repeating-linear-gradient(-45deg, color-mix(in srgb, var(--bar) 55%, #fff) 0 2px, #fff 2px 4.5px); }
.study-chart__interval { position: absolute; top: 50%; height: 9px; transform: translateY(-50%); border: 1.3px solid #222; border-top: 0; border-bottom: 0; background: linear-gradient(#222, #222) center / 100% 1.3px no-repeat; }
.study-chart__value { position: absolute; top: 50%; transform: translateY(-50%); margin-left: 7px; font-size: var(--font-sm); line-height: 16px; font-weight: 800; color: var(--ink); white-space: nowrap; }
.study-chart__value--own { font-weight: 700; }
.study-chart__empty { font-size: var(--unit-12); line-height: 16px; color: var(--text-secondary); padding-left: 4px; }
.study-chart__ticks { position: absolute; bottom: 0; left: var(--label); right: var(--room); height: 16px; font-size: var(--unit-12); line-height: 16px; color: var(--text-secondary); }
.study-chart__ticks span { position: absolute; transform: translateX(-50%); white-space: nowrap; }

.study-results__legend { display: flex; flex-wrap: wrap; gap: var(--spacing-4xs) var(--spacing-sm); font-size: var(--font-sm); color: var(--text-secondary); }

.study-results__dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: 1px; }
.study-results__dot--forest { background: var(--interactive-primary); }
.study-results__dot--grey { background: #e4e2dc; }
.study-results__dot--proposed { background: var(--study-proposed); }
.study-results__dot--prefilled { background: var(--study-prefilled); }

.study-results__hatch {
  display: inline-block;
  width: 14px;
  height: 9px;
  margin-right: 6px;
  vertical-align: -1px;
  border: 1.2px solid var(--study-prefilled);
  border-radius: 2px;
  background: repeating-linear-gradient(45deg, rgb(227 73 72 / 0.55) 0 2px, white 2px 5px);
}

.study-results__tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--spacing-2xs); }

.study-results__tile {
  border-radius: var(--rounded-xs);
  padding: var(--spacing-xs);
  background: var(--background-neutral);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.study-results__tile b { font-family: var(--font-family-bricolage); font-size: 22px; line-height: 1.1; color: var(--interactive-primary); }
.study-results__tile span { font-size: var(--font-sm); color: var(--text-secondary); line-height: 18px; }
.study-results__tile small { display: block; margin-top: 6px; font-size: var(--font-sm); line-height: 18px; color: var(--text-primary); }
.study-results__tile--proposed b { color: var(--study-proposed); }
.study-results__tile--prefilled b { color: var(--study-prefilled-text); }

.study-results__ledger {
  border: 1px solid var(--color-border-neutral);
  border-radius: var(--rounded-xs);
  padding: var(--spacing-4xs) var(--spacing-xs) var(--spacing-2xs);
}

.study-results__ledger--flat { border: 0; padding: 0; }

.study-results__ledger-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--spacing-xs);
  padding: 7px 0;
  border-bottom: 1px solid var(--color-border-neutral);
  font-size: var(--font-sm);
  color: var(--text-secondary);
}

.study-results__ledger-row b { font-size: 15px; color: var(--text-primary); white-space: nowrap; }
.study-results__ledger-row--refund b { color: var(--interactive-primary); }
.study-results__ledger-row--total { border-bottom: 0; font-weight: var(--font-weight-bold); color: var(--interactive-primary); }
.study-results__ledger-row--total b { font-family: var(--font-family-bricolage); font-size: 20px; color: var(--interactive-primary); }

.study-results__payback {
  border-radius: var(--rounded-xs);
  background: var(--background-neutral);
  padding: var(--spacing-xs) var(--spacing-sm);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3xs);
}

.study-results__payback-lead { font-size: var(--font-md); line-height: 24px; }

.study-results__empty {
  border: 1px dashed var(--color-border-neutral);
  border-radius: var(--rounded-xs);
  padding: var(--spacing-sm);
  font-size: var(--font-sm);
  color: var(--text-secondary);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4xs);
}

.study-results__empty b { color: var(--text-primary); }

.study-results__shots { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-2xs); }

.study-results__shot {
  border: 1px solid var(--color-border-neutral);
  border-radius: var(--rounded-xs);
  overflow: hidden;
  background: white;
  padding: 0;
  display: grid;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: inherit;
}

.study-results__shot:hover { border-color: var(--interactive-primary); }
.study-results__shot-image { position: relative; display: block; border-bottom: 1px solid var(--color-border-neutral); }
.study-results__shot-image img { width: 100%; height: 170px; object-fit: cover; object-position: center 22%; display: block; }
.study-results__shot-image--prefilled img { object-position: center 12%; }


.study-results__shot-text { padding: var(--spacing-2xs) var(--spacing-xs) var(--spacing-xs); display: grid; gap: var(--spacing-4xs); justify-items: start; }
.study-results__try { --btn-font-size: var(--font-sm); --btn-line-height: 18px; margin-top: var(--spacing-3xs); }
.study-results__shot-text em { font-style: normal; color: var(--text-secondary); font-size: var(--font-sm); line-height: 18px; }

.study-results__switch { display: inline-flex; flex-wrap: wrap; gap: 4px; background: var(--background-neutral); padding: 4px; border-radius: 12px; width: fit-content; }

.study-results__switch-button {
  border: 0;
  background: transparent;
  padding: 5px 10px;
  border-radius: 9px;
  font: inherit;
  font-size: var(--font-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--text-secondary);
  cursor: pointer;
}

.study-results__switch-button.is-active { background: white; color: var(--interactive-primary); box-shadow: 0 1px 2px rgb(0 0 0 / 0.08); }

.study-results__previews { display: flex; flex-direction: column; gap: var(--spacing-sm); }
.study-results__toggles { display: flex; flex-wrap: wrap; gap: var(--spacing-xs) var(--spacing-lg); }
.study-results__toggle { display: flex; flex-direction: column; gap: var(--spacing-4xs); }
.study-results__toggle-label { font-size: var(--font-sm); line-height: 18px; font-weight: var(--font-weight-semibold); color: var(--text-secondary); }
.study-results__grid-panel { display: flex; flex-direction: column; gap: var(--spacing-xs); }
.study-results__grid-panel[hidden] { display: none; }

.study-results__table { border: 1px solid var(--color-border-neutral); border-radius: var(--rounded-xs); overflow: hidden; }
.study-results__table table { width: 100%; border-collapse: collapse; font-size: var(--font-sm); }
.study-results__table th { text-align: left; font-weight: var(--font-weight-semibold); color: var(--text-secondary); font-size: var(--font-sm); padding: 8px 10px; background: var(--background-screen); border-bottom: 1px solid var(--color-border-neutral); }
.study-results__table td { padding: 8px 10px; border-bottom: 1px solid var(--color-border-neutral); vertical-align: top; }
.study-results__table tr:last-child td { border-bottom: 0; }

.study-results__who { font-weight: var(--font-weight-bold); width: 30%; white-space: nowrap; }

.study-results__screen { display: block; width: fit-content; margin-top: 4px; font-size: var(--font-sm); font-weight: var(--font-weight-bold); padding: 1px 8px; border-radius: var(--rounded-full); white-space: nowrap; }
.study-results__screen--proposed { background: #ecebfa; color: var(--study-proposed); }
.study-results__screen--prefilled { background: #fdeceb; color: #b8302f; }

.study-results__fee { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.study-results__badge--none { --badge-background-color: var(--background-neutral); --badge-color: var(--text-secondary); }
.study-results__fee-amount { font-size: var(--font-sm); line-height: 18px; color: var(--text-secondary); }
.study-results__fee-amount b { color: var(--text-primary); }

.study-results__gauge {
  position: relative;
  display: block;
  height: 10px;
  width: 160px;
  max-width: 100%;
  margin-top: 4px;
  border-radius: 5px;
  overflow: hidden;
  background: repeating-linear-gradient(135deg, #f1f0ec 0 4px, #e6e4de 4px 8px);
  box-shadow: inset 0 0 0 1px var(--color-border-neutral);
}

.study-results__gauge i { position: absolute; inset: 0 auto 0 0; border-radius: 5px; }
.study-results__gauge--proposed i { background: var(--study-proposed); }
.study-results__gauge--prefilled i { background: var(--study-prefilled); }

.study-results__refund { display: block; margin-top: 6px; font-size: var(--font-sm); color: var(--text-secondary); }
.study-results__refund--done { color: var(--interactive-primary); font-weight: var(--font-weight-semibold); }
.study-results__refund--kept { color: var(--interactive-primary); font-weight: var(--font-weight-semibold); }

.study-results__more {
  border-radius: 0;
  border-top: 1px solid var(--color-border-neutral);
  gap: 6px;
}

.study-results__more .icon { width: 16px; height: 16px; transition: transform 0.2s; }
.study-results__more.is-open .icon { transform: rotate(180deg); }

.study-results__compare { display: flex; flex-direction: column; gap: var(--spacing-2xs); }
.study-results__compare-card { border: 1px solid var(--color-border-neutral); border-radius: var(--rounded-xs); padding: var(--spacing-2xs) var(--spacing-xs); display: flex; flex-direction: column; gap: var(--spacing-2xs); }
.study-results__compare-card p { font-size: var(--font-sm); color: var(--text-secondary); }
.study-results__compare-card p b { color: var(--text-primary); }
.study-results__compare-card .study-results__screen { margin-top: 0; }
.study-results__compare-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 4px 14px; font-size: var(--font-sm); align-items: baseline; }
.study-results__compare-grid span { color: var(--text-secondary); }
.study-results__compare-grid > span:nth-child(-n + 3) { font-size: var(--font-sm); font-weight: var(--font-weight-semibold); text-align: right; }
.study-results__compare-grid > span:first-child { text-align: left; }
.study-results__compare-grid b { text-align: right; font-variant-numeric: tabular-nums; }

.study-results__counts { background: var(--background-neutral); border-radius: var(--rounded-xs); padding: 10px 12px; font-size: var(--font-sm); color: var(--text-secondary); line-height: 18px; }
.study-results__counts b { color: var(--interactive-primary); }

.study-results__links { display: flex; flex-wrap: wrap; gap: var(--spacing-2xs) var(--spacing-md); font-size: var(--font-sm); }
.study-results__links a { color: var(--interactive-primary); font-weight: var(--font-weight-bold); text-decoration: underline; text-underline-offset: 3px; }

.study-results__founder {
  border-left: 3px solid var(--interactive-accent);
  background: var(--background-screen);
  border-radius: 0 var(--rounded-xs) var(--rounded-xs) 0;
  padding: var(--spacing-xs) var(--spacing-sm);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2xs);
}

.study-results__founder p { font-size: var(--font-sm); color: var(--text-secondary); line-height: 18px; }
.study-results__signature { font-size: var(--font-sm); font-weight: var(--font-weight-bold); color: var(--interactive-primary); }

.study-results__body[hidden] { display: none; }
.study-results__card-head { display: flex; flex-direction: column; gap: var(--spacing-4xs); padding: var(--spacing-md) var(--spacing-md) 0; }
.study-results__card-title { font-size: var(--font-md); line-height: 24px; font-weight: var(--font-weight-semibold); margin: 0; }
.study-results--folded .study-results__body { border-top: 1px solid var(--color-border-neutral); }
.study-results__kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--spacing-2xs); padding: var(--spacing-xs) var(--spacing-md) var(--spacing-md); }
.study-results__kpi { background: var(--background-neutral); border-radius: var(--rounded-xs); padding: var(--spacing-2xs) var(--spacing-xs); display: flex; flex-direction: column; gap: var(--spacing-4xs); }
.study-results__kpi span { font-size: var(--font-sm); line-height: 18px; color: var(--text-secondary); font-weight: var(--font-weight-semibold); }
.study-results__kpi b { font-family: var(--font-family-bricolage); font-size: 21px; line-height: 1.1; color: var(--interactive-primary); }
.study-results__kpi b i { font-style: normal; }
.study-results__kpi--proposed { color: var(--study-proposed); }
.study-results__kpi--prefilled { color: var(--study-prefilled-text); }
.study-results__kpi small { font-size: var(--font-sm); line-height: 18px; color: var(--text-secondary); }
.study-results__split { display: flex; height: 5px; border-radius: 4px; overflow: hidden; background: var(--color-border-soft); }
.study-results__split i { display: block; height: 100%; }
.study-results__split--proposed { background: var(--study-proposed); }
.study-results__split--prefilled { background: var(--study-prefilled); }
.study-results__card-empty { padding: var(--spacing-xs) var(--spacing-md) var(--spacing-md); color: var(--text-secondary); }

@media (max-width: 480px) {
  .study-results__tiles, .study-results__kpis { grid-template-columns: 1fr 1fr; }
  .study-results__tile:last-child, .study-results__kpi:last-child { grid-column: 1 / -1; }
  .study-chart { --label: 122px; --room: 50px; }
  .study-progress__cells { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .study-results__more .icon { transition: none; }
}

.study-results p { margin: 0; }