/* The results screen, part two (after results.css, order kept): education and trust, print, numbered steps and the visual pass. */

/* Education and trust (BEST_STRAT.md 5.13, 5.14): snapshots, FAQ, glossary, copy-out. Token colours only. */
.snapshots { display: grid; gap: var(--s3); }
.snapshot { border: 1px solid var(--border); border-radius: var(--r-card); padding: var(--s4); background: var(--white); }
.snapshot h3 { margin: 0 0 var(--s2); }
.snapshot__label { display: inline-block; margin: 0 0 var(--s2); padding: 2px var(--s2); border: 1px solid var(--border); border-radius: var(--r-control); font-size: 14px; line-height: 20px; color: var(--text-2); }
.snapshot__rows { display: grid; gap: var(--s1); margin: 0; }
.snapshot__rows dt { font-weight: 600; margin-top: var(--s2); }
.snapshot__rows dd { margin: 0; }
.snapshot__quote { margin: var(--s3) 0 0; padding-left: var(--s3); border-left: 4px solid var(--border); }
.snapshot__quote footer { color: var(--text-2); margin-top: var(--s1); }
.faq__item { border-top: 1px solid var(--border); padding: var(--s2) 0; }
.faq__item summary { cursor: pointer; font-weight: 600; min-height: 44px; display: flex; align-items: center; }
.faq__item summary:focus-visible, .term:focus-visible { outline: 2px solid var(--brand-dark); outline-offset: 2px; }
.glossary dt { font-weight: 600; margin-top: var(--s2); }
.glossary dd { margin: 0; }
.term { background: none; border: 0; padding: 0; font: inherit; color: inherit; text-decoration: underline dotted; text-underline-offset: 3px; cursor: pointer; min-height: 24px; }
.term__def { display: block; margin: var(--s1) 0; padding: var(--s2) var(--s3); border: 1px solid var(--info-line); background: var(--info-bg); border-radius: var(--r-control); }
.term__def[hidden] { display: none; }
.copyout__text { width: 100%; font: inherit; color: var(--charcoal); border: 1px solid var(--border); border-radius: var(--r-control); padding: var(--s2); background: var(--white); }

/* Print: the estimate only, in black on white, with every section open and no controls. */
@media print {
  body.public > header, body.public > footer, .no-print, .actions, .progress, .summary-panel, .btn, [data-ai-pending] { display: none !important; }
  body, .public { background: var(--white) !important; color: var(--charcoal) !important; }
  .fold { border-top: 1px solid var(--border); break-inside: avoid; }
  .fold__summary::after { display: none; }
  .snapshot, .next-step { box-shadow: none !important; }
  a { color: var(--charcoal); text-decoration: underline; }
  .term__def[hidden] { display: none; }
}

/* Numbered steps outside the home page (confirmation page, guides): same look as the landing page list. */
.steps-list { list-style: none; margin: var(--s3) 0; padding: 0; display: grid; gap: var(--s3); }
.steps-list__item { display: flex; gap: var(--s3); align-items: flex-start; }
.steps-list__num { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--r-control); background: var(--blue-tint); font-weight: 600; }
.steps-list__item p { margin: var(--s1) 0 0; color: var(--text-2); }

/* Visual pass: line icons, tinted icon chips, tiles and compact lists so the page can be scanned. Token colours only. */
.icon { flex: none; vertical-align: middle; }
.fold__icon { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--blue-tint); color: var(--blue-text); }
.fold__summary { gap: var(--s3); }
.fold__summary h2 { flex: 1; }
.accent--teal .fold__icon { background: var(--teal-tint, var(--blue-tint)); }
.icon-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); }
.icon-list li { display: flex; gap: var(--s2); align-items: flex-start; margin: 0; }
.icon-list .icon { margin-top: 2px; color: var(--blue-text); }
.tiles { display: grid; gap: var(--s3); grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.tile { border: 1px solid var(--border); border-radius: var(--r-card); padding: var(--s3) var(--s4); background: var(--white); box-shadow: var(--shadow-1); }
.tile__chip { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--blue-tint); color: var(--blue-text); margin-bottom: var(--s2); }
.tile h3 { margin: 0 0 var(--s1); font-size: 18px; line-height: 26px; }
.tile p { margin: 0; color: var(--text-2); }
.steps-list__num { color: var(--blue-text); }
.snapshot__rows { gap: var(--s2); }
.snapshot__row { display: flex; gap: var(--s2); align-items: flex-start; }
.snapshot__row .icon { margin-top: 2px; color: var(--blue-text); }
.snapshot__row strong { display: block; }
.glossary-chips { display: grid; gap: var(--s1); }
.action-ladder { display: flex; flex-wrap: wrap; gap: var(--s2); }
.next-step .ticks, .next-step .icon-list { margin-bottom: var(--s3); }
.tiles { margin-bottom: var(--s4); }
@media (min-width: 640px) { .tiles--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Step titles carry an icon chip; the home page and service-family accents reuse the same chips. */
.step-title { display: flex; align-items: center; gap: var(--s3); }
.step-title__icon, .how__icon, .why__icon { flex: none; display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--blue-tint); color: var(--blue-text); }
.how__icon, .why__icon { margin-bottom: var(--s2); }
.why__item .why__icon { display: grid; }
.accent--plum .fold__icon { background: var(--plum-tint); }
.accent--yellow .fold__icon { background: var(--yellow-tint); }
.accent--teal .fold__icon { background: var(--teal-tint); }
.accent--green .fold__icon { background: var(--green-tint); }
.summary.accent--plum .icon, .summary.accent--teal .icon { color: var(--charcoal); }