/* Giant Entity: /plan (look-v3 section 12, Part C). A statement head; the planner as a split, the
   four steps left in columns 1 to 7 and the brief panel right in columns 8 to 12 on surface, sticky;
   the stepper as four seams; chips that seat. The panel opens on the brief body in plan, and the
   recommended pieces fill into it. Result cards are paper, the piece's glyph, the name as a link,
   the reason and the facts as inline labels; they arrive from the left. Then the compact index of
   the thirteen lines, and Still not sure as the band. */

.doc--statement .doc__intro { padding-bottom: var(--sp-l); }
@media (min-width: 1100px) {
  .doc--statement .doc__intro { grid-column: 1 / span 8; }
}

/* ---------- The planner ---------- */

.planner { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: var(--sp-l); padding-bottom: var(--sp-xl); }
.planner > * { grid-column: 1 / -1; min-width: 0; }
@media (min-width: 1100px) {
  .planner__form { grid-column: 1 / span 7; }
  .planner__brief { grid-column: 8 / -1; align-self: start; }
}
.planner__form { display: grid; gap: var(--sp-m); align-content: start; }
.planner__stepper { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.planner-step { display: grid; gap: var(--sp-s); }
.planner-step__title { font-size: var(--fs-heading); font-stretch: 125%; font-weight: var(--heading-weight); line-height: 1; letter-spacing: var(--track-heading); text-wrap: balance; }
.planner-step__title:focus { outline: none; }
.planner-step__title:focus-visible { outline: 2px solid var(--fg); outline-offset: 4px; }
.planner-step__set { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: var(--sp-2xs); }
.planner-step__question { padding: 0; font-size: var(--fs-lead); font-weight: 500; line-height: 1.3; }
.planner-step__chips { margin-top: var(--sp-2xs); }
.planner__privacy a { color: inherit; }
/* Next waits for the first answer; it stays a target and says why when pressed (plan.mjs) */
.planner [data-plan-next][aria-disabled="true"] { opacity: 0.38; cursor: not-allowed; }

/* ---------- The brief panel ---------- */

.planner__brief { gap: var(--sp-s); padding: clamp(1.25rem, 0.8rem + 1.3vw, 3.25rem); }
.planner__brief-title { font-size: var(--fs-lead); font-stretch: 125%; font-weight: var(--heading-weight); line-height: 1.1; letter-spacing: -0.01em; }
.planner__body { padding-block: var(--sp-2xs) var(--sp-xs); border-bottom: 1px solid var(--line); }
.planner__body .dw { display: block; width: 100%; height: auto; max-height: min(34vh, 26rem); }
.planner__result { display: grid; gap: var(--sp-s); }
.planner__label { font-size: var(--fs-small); font-weight: 500; color: var(--fg-muted); }
.planner__row { display: grid; gap: 0.3em; }
.planner__bring { margin: 0; padding-left: 1.2em; }
.planner__bring li + li { margin-top: 0.3em; }
.planner__lines { display: grid; gap: 0.5em; }
.planner__lines:empty { display: none; }
.planner__footnote a { color: var(--fg); }

/* ---------- Result cards ---------- */

.plan-cards { display: grid; gap: var(--sp-xs); list-style: none; padding: 0; margin: 0; }
.plan-card {
  display: grid;
  grid-template-columns: clamp(2.25rem, 1.8rem + 1vw, 3.5rem) minmax(0, 1fr);
  gap: var(--sp-xs) var(--sp-s);
  padding: var(--sp-s);
  background: var(--paper);
  border-radius: var(--radius);
}
.plan-card__art { padding-top: 0.2em; }
.plan-card__glyph { display: block; width: 100%; height: auto; }
.plan-card__text { display: grid; gap: var(--sp-2xs); align-content: start; min-width: 0; }
.plan-card__name { font-size: var(--fs-lead); font-weight: 500; line-height: 1.25; }
.plan-card__name a { text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
.plan-card__name a:hover { text-decoration-thickness: 2px; }
.plan-card__reason:empty,
.plan-card__reason[hidden] { display: none; }
/* the facts as inline labels: "Who is on the call: Dorotea and Rron Imami" */
.plan-card__facts { display: grid; gap: 0.45em; margin: 0; font-size: var(--fs-small); line-height: 1.45; }
.plan-card__facts > div { display: block; }
.plan-card__facts dt { display: inline; font-weight: 500; color: var(--fg); }
.plan-card__facts dt::after { content: ": " / ""; }
.plan-card__facts dd { display: inline; margin: 0; color: var(--fg-muted); }
.plan-card__shape-notes { display: block; margin-top: 0.2em; }
.plan-card__shape-notes > p + p { margin-top: 0.2em; }

@media (prefers-reduced-motion: no-preference) {
  .plan-card.is-arriving { animation: plan-card-in 240ms var(--ease-out) both; animation-delay: calc(var(--i, 0) * 60ms); }
}
@keyframes plan-card-in { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: none; } }

/* ---------- If you need this, see that: the compact index ---------- */

.plan-index { padding-block: var(--sp-l) var(--sp-xl); }
.plan-index__list { list-style: none; padding: 0; margin-top: var(--sp-m); display: grid; column-gap: var(--gutter); }
.plan-index__item { display: grid; grid-template-columns: 1.5rem minmax(0, 1fr); gap: var(--sp-xs); align-items: start; padding-block: var(--sp-xs); border-bottom: 1px solid var(--line); }
.plan-index__item p { max-width: 60ch; }
.plan-index__glyph { width: 1.5rem; height: 1.5rem; margin-top: 0.15em; }
.plan-index__need { color: var(--fg-muted); }
.plan-index__item a { font-weight: 500; }
@media (min-width: 1100px) {
  .plan-index__list { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: column; grid-template-rows: repeat(7, auto); }
}