/* app.css: app-only additions on top of provitly.css (never edit that copy).
   Tokens only. Today: the "More about <name>" fold inside the About card,
   and (P7) the "Pick material" dropdown under the answer card. */

.about-more { margin-top: var(--s-3); }

.about-more summary {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  min-height: var(--tap);
  color: var(--ink);
  font-weight: 650;
  cursor: pointer;
  list-style: none;
  border-radius: var(--r-field);
}
.about-more summary::-webkit-details-marker { display: none; }
.about-more summary::after {
  content: "";
  width: 0.5em;
  height: 0.5em;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-0.15em) rotate(45deg);
  transition: transform var(--dur-quick) var(--ease-out);
}
.about-more[open] summary::after { transform: translateY(0.1em) rotate(-135deg); }

.about-more p {
  margin-top: var(--s-3);
  font-size: var(--t-body);
  line-height: 1.5;
  color: var(--muted);
}

@media (prefers-reduced-motion: reduce) {
  .about-more summary::after { transition: none; }
}

/* P7: "Pick material". One select in the contract field style (.field +
   .number). It sits outside .fields, so no number circle. The chevron is
   an inline SVG (the CSP allows no data: backgrounds). calc.js adds
   .pick-js to the form, which hides the no-script Go button. */
.pick {
  display: grid;
  gap: var(--s-3);
  justify-items: start;
  margin-top: var(--s-6);
  max-width: var(--col-max);
}
.pick .field { counter-increment: none; width: 100%; }
.pick .field-label::before { content: none; }
.pick-box select {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  min-height: 3.25rem;
  padding: 0 var(--s-2) 0 var(--s-4);
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: var(--t-field);
  font-weight: 700;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}
.pick-chev {
  display: inline-flex;
  flex: none;
  padding-right: var(--s-4);
  color: var(--muted);
  pointer-events: none;
}
.pick-chev svg { width: 20px; height: 20px; }
.pick-js .pick-go { display: none; }