/*
 * The platform-admin Acceptance tab (PlatformAdmin::AcceptanceController): one row of three thin
 * labelled bars, then each area's stories as a plain list of rows on the page's own background,
 * split by hairlines — the story, our assessment, the founders — stacked on a phone. No cards: no
 * row, bar or list carries a fill or a frame of its own.
 */

.acceptance .ui-page__main {
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
}

.acceptance__progress {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--stat-tile-min), 1fr));
  gap: var(--space-3) var(--space-6);
}

.acceptance__bar {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.acceptance__bar-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-2);
}

.acceptance__bar-label {
  color: var(--text-secondary);
  font-size: var(--type-caption-size);
  line-height: var(--type-caption-leading);
}

.acceptance__bar-label--link { color: var(--text-gold); text-decoration: none; }
.acceptance__bar-label--link:hover { text-decoration: underline; }

.acceptance__bar-count {
  color: var(--text-primary);
  font-size: var(--type-caption-size);
  line-height: var(--type-caption-leading);
  font-weight: var(--font-weight-semibold);
  white-space: nowrap;
}

.acceptance__meter {
  appearance: none;
  width: 100%;
  height: var(--space-1);
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  overflow: hidden;
}

.acceptance__meter::-webkit-progress-bar { background: var(--surface-2); border-radius: var(--radius-pill); }
.acceptance__meter::-webkit-progress-value { background: var(--gradient-gold); border-radius: var(--radius-pill); }
.acceptance__meter::-moz-progress-bar { background: var(--gradient-gold); border-radius: var(--radius-pill); }

.acceptance__area {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  scroll-margin-top: var(--sticky-offset);
}

.acceptance__list {
  display: flex;
  flex-direction: column;
  border-top: var(--border-width) solid var(--divider);
}

.acceptance__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  padding: var(--space-4) 0;
  border-bottom: var(--border-width) solid var(--divider);
  scroll-margin-top: var(--sticky-offset);
}

.acceptance__cell {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  min-width: 0;
}

.acceptance__label {
  color: var(--text-tertiary);
  font-size: var(--type-caption-size);
  line-height: var(--type-caption-leading);
  font-weight: var(--font-weight-semibold);
}

@media (min-width: 960px) {
  .acceptance__row {
    grid-template-columns: 5fr 3fr 4fr;
    gap: var(--space-6);
  }
}

.acceptance__label--gold { color: var(--text-gold); }

.acceptance__title {
  margin: 0;
  color: var(--text-primary);
  font-size: var(--type-body-size);
  line-height: var(--type-body-leading);
  font-weight: var(--font-weight-semibold);
}

.acceptance__point { color: var(--text-tertiary); }

.acceptance__statement {
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--type-body-size);
  line-height: var(--type-body-leading);
}

.acceptance__meta {
  margin: 0;
  color: var(--text-tertiary);
  font-size: var(--type-caption-size);
  line-height: var(--type-caption-leading);
}

.acceptance__meta .acceptance__label { margin-right: var(--space-1); }

.acceptance__note {
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--type-caption-size);
  line-height: var(--type-caption-leading);
}

.acceptance__differences {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin: 0;
  padding: 0;
  color: var(--text-secondary);
  font-size: var(--type-caption-size);
  line-height: var(--type-caption-leading);
}

/* One label over the list; each line is a dash-led item, since Tailwind's preflight strips list markers. */
.acceptance__differences { list-style: none; }
.acceptance__differences li { padding-left: var(--space-3); text-indent: calc(var(--space-3) * -1); }
.acceptance__differences li::before { content: "– "; }

.acceptance__shots {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
}

.acceptance__shot {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  width: var(--space-16);
  color: var(--text-tertiary);
  text-decoration: none;
  border-radius: var(--radius-sm);
}

.acceptance__shot:hover { color: var(--text-primary); }

.acceptance__shot:focus-visible {
  outline: var(--focus-ring-outline);
  outline-color: var(--focus-colour-neutral);
  outline-offset: var(--focus-ring-offset);
}

.acceptance__shot-image {
  width: 100%;
  height: auto;
  border: var(--border-width) solid var(--border-default);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}

.acceptance__shot-caption {
  font-size: var(--type-caption-size);
  line-height: var(--type-caption-leading);
}

.acceptance__verdicts {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  width: 100%;
  margin: 0;
  padding: 0;
}

/* One line per founder: who, what and when, then their note. */
.acceptance__verdict {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 var(--space-2);
  font-size: var(--type-caption-size);
  line-height: var(--type-caption-leading);
}

.acceptance__verdict-who {
  color: var(--text-primary);
  font-weight: var(--font-weight-semibold);
}

.acceptance__verdict-what {
  color: var(--text-tertiary);
  font-size: var(--type-caption-size);
  line-height: var(--type-caption-leading);
}

.acceptance__verdict-note {
  flex-basis: 100%;
  color: var(--text-secondary);
}

.acceptance__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  width: 100%;
}

/* The note under the buttons, once a verdict is chosen: a hairline above it, no fill of its own. */
.acceptance__panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  width: 100%;
  padding-top: var(--space-3);
  border-top: var(--border-width) solid var(--divider);
}

.acceptance__panel[hidden], .acceptance__panel [hidden] { display: none; }

/* The chosen verdict keeps the button's own active fill (D28), so the choice stays visible while the note is open. */
.acceptance__buttons .ui-button--primary[aria-pressed="true"] { background: var(--gradient-gold-active); }
.acceptance__buttons .ui-button--outline[aria-pressed="true"] {
  border-color: var(--gold-100);
  background: var(--gold-wash-active);
  color: var(--gold-100);
}
.acceptance__buttons .ui-button--text[aria-pressed="true"] { background: var(--gold-wash-active); color: var(--gold-100); }

/* The row heading takes focus after a save in place; it is not a control, so no ring of its own. */
.acceptance__title:focus { outline: none; }

.acceptance__prompt {
  margin: 0;
  color: var(--text-primary);
  font-size: var(--type-caption-size);
  line-height: var(--type-caption-leading);
  font-weight: var(--font-weight-semibold);
}

.acceptance__field textarea { min-height: 0; }

/* The prompt says what the note is for; the label stays for a screen reader. */
.acceptance__field .ui-field__head {
  position: absolute;
  width: var(--border-width);
  height: var(--border-width);
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.acceptance__error {
  margin: 0;
  color: var(--danger-text);
  font-size: var(--type-caption-size);
  line-height: var(--type-caption-leading);
}

/* The screenshot gallery: the page's one modal, wider than a form's, the picture fitted to the
   viewport so a tall phone screenshot never needs a scroll. */
.acceptance__gallery { overscroll-behavior: contain; }
.acceptance__gallery .ui-modal__panel { max-width: var(--gallery-width); }

.acceptance__gallery-figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  touch-action: pan-y pinch-zoom;
}

.acceptance__gallery-image {
  display: block;
  max-width: 100%;
  max-height: 65dvh;
  width: auto;
  height: auto;
  border: var(--border-width) solid var(--border-default);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}

.acceptance__gallery-caption {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  width: 100%;
  color: var(--text-secondary);
  font-size: var(--type-caption-size);
  line-height: var(--type-caption-leading);
}

.acceptance__gallery-count { color: var(--text-tertiary); white-space: nowrap; }

.acceptance__gallery .ui-modal__footer [hidden] { display: none; }

.acceptance__gaps {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.acceptance__gaps h3 { margin: 0; }

.acceptance__bullets {
  margin: 0;
  padding-left: var(--space-5);
  list-style: disc;
  color: var(--text-secondary);
  font-size: var(--type-caption-size);
  line-height: var(--type-caption-leading);
}

.acceptance__accounts {
  margin: 0;
  padding: 0;
  border-top: var(--border-width) solid var(--divider);
}

.acceptance__account {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-1) var(--space-4);
  align-items: start;
  padding: var(--space-3) 0;
  border-bottom: var(--border-width) solid var(--divider);
}

@media (min-width: 768px) {
  .acceptance__account { grid-template-columns: 2fr auto 5fr; }
}

.acceptance__account-name {
  color: var(--text-primary);
  font-size: var(--type-body-size);
  line-height: var(--type-body-leading);
  font-weight: var(--font-weight-semibold);
}

.acceptance__account-next {
  color: var(--text-secondary);
  font-size: var(--type-body-size);
  line-height: var(--type-body-leading);
}

.acceptance__account-next strong { color: var(--text-primary); font-weight: var(--font-weight-semibold); }