/* ---------- Figure kit: the figure editor of an editorial kit ----------
   Three columns in a full window: the view's figures as a list, the plate of
   the chosen one, and its settings. The editor fills what the window has, so
   a drawing is scaled to the room the middle column leaves and each column
   scrolls on its own, so the header and tabs stay where they are. Below the full stage the columns stack and the page
   scrolls. */

.pitch-site--app .figure-kit {
  display: grid;
  flex: 1 1 auto;
  grid-template-columns: 15rem minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  min-block-size: 0;
}

.pitch-site--app .figure-kit__list {
  border-inline-end: 1px solid rgb(14 17 17 / 0.14);
  display: flex;
  flex-direction: column;
  gap: var(--space-l);
  min-block-size: 0;
  overflow-y: auto;
  padding: 16px 12px;
}

.pitch-site--app .figure-kit__figures {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.pitch-site--app .figure-kit__label {
  color: var(--ps-ink-soft);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  margin: 0;
  text-transform: uppercase;
}

.pitch-site--app .figure-kit__figures .figure-kit__label {
  padding: 0 8px 6px;
}

.pitch-site--app .figure-kit__item {
  border-radius: 6px;
  color: var(--ps-ink);
  font-size: 0.875rem;
  padding: 8px;
  text-decoration: none;
}

.pitch-site--app .figure-kit__item:hover {
  background: var(--ps-paper-deep);
}

.pitch-site--app .figure-kit__item.is-active {
  background: var(--ps-yellow);
  font-weight: 600;
}

.pitch-site--app .figure-kit__note {
  border-block-start: 1px solid rgb(14 17 17 / 0.14);
  color: var(--ps-ink-soft);
  padding: 12px 8px 0;
}

.pitch-site--app .figure-kit__editor {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 18rem;
  grid-template-rows: minmax(0, 1fr);
  min-block-size: 0;
}

/* The plate column. A drawing carries its own paper, so it is framed in ink
   the way the file's edge will be; a table sits on the column's paper. */
.pitch-site--app .figure-kit__plate {
  background: var(--ps-paper-raised);
  gap: 10px;
  min-block-size: 0;
  padding: 18px 22px;
}

@media (min-width: 75rem) and (min-height: 45rem) {
  .pitch-site--app .figure-kit__plate {
    overflow-y: auto;
  }

  .pitch-site--app .figure-kit__plate.editorial-figure--grow .editorial-figure__body {
    flex: none;
  }
}

.pitch-site--app .figure-kit__plate .editorial-figure__body {
  place-items: center;
}

.pitch-site--app .figure-kit__plate .editorial-figure__body .figure-plate {
  border: 2px solid var(--ps-ink);
  box-sizing: border-box;
  max-inline-size: 100%;
}

.pitch-site--app .figure-kit__plate .editorial-figure__body[aria-busy="true"],
.pitch-site--app .figure-kit__file[aria-busy="true"] {
  opacity: 0.5;
}

.pitch-site--app .figure-kit__explanation {
  color: var(--ps-ink-soft);
  flex: none;
  max-inline-size: 70ch;
}

.pitch-site--app .figure-kit__controls {
  border-inline-start: 2px solid var(--ps-ink);
  display: flex;
  flex-direction: column;
  font-size: 0.875rem;
  gap: 14px;
  min-block-size: 0;
  overflow-y: auto;
  padding: 16px;
}

.pitch-site--app .figure-kit__section,
.pitch-site--app .figure-kit__form {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.pitch-site--app .figure-kit__form {
  gap: 14px;
}

.pitch-site--app .figure-kit__teams {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.pitch-site--app .figure-kit__team {
  border: 2px solid var(--ps-ink);
  border-radius: 100px;
  color: var(--ps-cream);
  padding: 4px 10px;
}

.pitch-site--app .figure-kit__team--home {
  background: var(--ps-turf);
}

.pitch-site--app .figure-kit__team--away {
  background: var(--ps-ink-soft);
}

/* The figure's own choices keep the chips and selects they have on a figure
   that wears them above its plot; here the panel rules them off instead. */
.pitch-site--app .figure-kit__controls .figure-kit__options {
  border-block-end: 0;
  padding-block-end: 0;
}

.pitch-site--app .figure-kit__controls .figure-kit__options .searchable-select,
.pitch-site--app .figure-kit__controls .figure-kit__options select {
  inline-size: 100%;
  max-inline-size: 100%;
}

.pitch-site--app .figure-kit__form input[type="text"],
.pitch-site--app .figure-kit__form textarea,
.pitch-site--app .figure-kit__form select {
  background: var(--ps-paper-raised);
  border: 2px solid var(--ps-ink);
  border-radius: 8px;
  padding: 8px 10px;
}

.pitch-site--app .figure-kit__file {
  background: var(--ps-paper-raised);
  border: 1px solid rgb(14 17 17 / 0.14);
  min-block-size: 4rem;
}

.pitch-site--app .figure-kit__file svg {
  block-size: auto;
  display: block;
  inline-size: 100%;
  max-block-size: 18rem;
}

.pitch-site--app .figure-kit__ways-out {
  border-block-start: 1px solid rgb(14 17 17 / 0.14);
  gap: 8px;
  padding-block-start: 14px;
}

.pitch-site--app .figure-kit__saved a {
  color: var(--ps-ink);
}

.pitch-site--app .figure-kit__saved::before {
  background: var(--ps-turf);
  border-radius: 50%;
  block-size: 8px;
  content: "";
  display: inline-block;
  inline-size: 8px;
  margin-inline-end: 6px;
}

.pitch-site--app .figure-kit__button {
  justify-content: center;
  min-width: 0;
  text-align: center;
  width: 100%;
}

.pitch-site--app .figure-kit__save summary {
  box-sizing: border-box;
  cursor: pointer;
  display: flex;
  list-style: none;
}

.pitch-site--app .figure-kit__save summary::-webkit-details-marker {
  display: none;
}

.pitch-site--app .figure-kit__folders {
  background: var(--ps-paper-raised);
  border: 1px solid rgb(14 17 17 / 0.14);
  border-radius: 8px;
  display: block;
  margin-block-start: 10px;
  padding: 10px;
}

.pitch-site--app .figure-kit__files {
  display: grid;
  gap: 6px;
  grid-template-columns: 1fr 1fr;
}

.pitch-site--app .figure-kit__credit {
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.pitch-site--app .figure-kit__reading {
  color: var(--ps-ink-soft);
}

/* What kind of kit this is and how much it holds, at the end of the tab row. */
.pitch-site--app .figure-kit-count {
  color: var(--ps-cream-soft);
  font-size: 0.8125rem;
}

/* Story findings share the kit's full window, so the tabs above them stay as
   wide as they are over the editor; the full window pads nothing itself. */
.pitch-site--app .figure-kit-findings {
  display: block;
}

.pitch-site--app .figure-kit-findings > .container-large {
  padding-inline: clamp(16px, 3vw, 32px);
}

@media (max-width: 74.999rem) {
  .pitch-site--app .figure-kit,
  .pitch-site--app .figure-kit__editor {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
  }

  .pitch-site--app .figure-kit__list {
    border-block-end: 1px solid rgb(14 17 17 / 0.14);
    border-inline-end: 0;
    overflow-y: visible;
  }

  .pitch-site--app .figure-kit__figures {
    flex-flow: row wrap;
  }

  .pitch-site--app .figure-kit__figures .figure-kit__label {
    flex-basis: 100%;
  }

  .pitch-site--app .figure-kit__controls {
    border-block-start: 2px solid var(--ps-ink);
    border-inline-start: 0;
    overflow-y: visible;
  }
}