/* Solutions page: problem rows and FAQ */

/* ---------- Problem rows ---------- */
.sol-list { list-style: none; margin: 0; padding: 0; border-block-start: 2px solid var(--ink); }
.sol { display: grid; gap: 1.25rem; padding: 2.25rem 0; border-block-end: 1px solid var(--line); scroll-margin-top: calc(var(--header-h) + env(safe-area-inset-top, 0px) + 18px); }
@media (min-width: 900px) {
  .sol { grid-template-columns: minmax(14rem, 1fr) 2fr minmax(11rem, 0.8fr); gap: 2.5rem; padding: 2.75rem 0; }
}
.sol__head svg { width: 28px; height: 28px; color: var(--indigo); margin-block-end: 0.9rem; display: block; }
.sol__head h3 { font-size: var(--step-2); margin: 0; max-width: 12em; }
@media (max-width: 600px) {
  .sol { padding-block: 1.75rem; gap: 1rem; }
  .sol__head svg { width: 24px; height: 24px; margin-block-end: 0.6rem; }
}
.sol__body > p { margin-block-end: 1.1rem; max-width: 38em; }
.sol__body .check-list { color: var(--slate); font-size: 0.97rem; }

.sol__uses { font-size: 0.95rem; }
@media (max-width: 899px) { .sol__uses { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 1rem; } }
@media (min-width: 900px) { .sol__uses { border-inline-start: 1px solid var(--line); padding-inline-start: 1.5rem; } }
.sol__uses-label { color: var(--slate); font-size: var(--step--1); margin: 0 0 0.5rem; }
/* Label always on its own line above the links, so every row reads the same */
@media (max-width: 899px) { .sol__uses-label { margin: 0; flex-basis: 100%; } }
.sol__uses ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; }
@media (min-width: 900px) { .sol__uses ul { display: grid; gap: 0.45rem; } }
.sol__uses a {
  color: var(--cobalt-text); font-weight: 500; text-decoration: underline;
  text-underline-offset: 0.25em; text-decoration-thickness: 1px;
}
.sol__uses a:active { text-decoration-thickness: 2px; }
@media (hover: hover) and (pointer: fine) {
  .sol__uses a:hover { text-decoration-thickness: 2px; }
}

.sol-foot { margin: 2rem 0 0; max-width: 42em; }

/* ---------- FAQ ---------- */
.faq-layout { display: grid; gap: 2rem; }
@media (min-width: 900px) { .faq-layout { grid-template-columns: 1fr 1.7fr; gap: 4rem; align-items: start; } }
.faq-intro h2 { margin-block-end: 1rem; max-width: 10em; }
@media (min-width: 900px) { .faq-intro { position: sticky; top: calc(var(--header-h) + env(safe-area-inset-top, 0px) + 32px); } }

.faq { border-block-start: 2px solid var(--ink); }
.faq details { border-block-end: 1px solid var(--line); }
.faq summary {
  list-style: none; cursor: pointer; position: relative;
  padding-block: 1.25rem; padding-inline: 0 3rem;
  font: 600 var(--step-1)/1.3 var(--font-display); color: var(--ink);
  transition: color var(--dur-hover) ease;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before, .faq summary::after {
  content: ""; position: absolute; inset-inline-end: 0.75rem; top: 50%;
  width: 14px; height: 1.6px; background: var(--indigo);
}
.faq summary::after { transform: rotate(90deg); transition: transform var(--dur-state) var(--ease-out); }
.faq details[open] > summary::after { transform: none; }
.faq summary:focus-visible { outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
  .faq summary:hover { color: var(--indigo); }
}
.faq__answer { padding-block: 0 1.5rem; padding-inline: 0 3rem; color: var(--slate); max-width: 42em; }
.faq__answer p { margin: 0; }

/* Open: the answer settles in from its question. Close stays instant. No height animation. */
.faq details[open] > .faq__answer { animation: acc-in var(--dur-enter) var(--ease-out) both; }
@keyframes acc-in { from { opacity: 0; transform: translateY(-4px); } }
@keyframes acc-fade { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .faq details[open] > .faq__answer { animation: acc-fade 150ms ease both; }
  .faq summary::after { transition: none; }
}

/* Windows High Contrast: the plus/minus bars are backgrounds, so paint them in the text colour */
@media (forced-colors: active) {
  .faq summary::before, .faq summary::after { background: CanvasText; forced-color-adjust: none; }
}