/* /who-its-for/ only: the six situations, the self-check raised into the band above,
   the four things from your side on teal.
   Owner: ux-designer builder C. Shared components come from layout.css. */

/* ---- the opening: its lower edge runs behind the self-check panel ------- */
main > .opening--check { padding-block-end: calc(var(--space-8) + var(--space-6)); }

/* ---- 2. situations: six phrases in the display face (navy) -------------- */
.sit__list {
  display: grid;
  gap: 0 var(--gutter);
  margin-block-start: var(--space-7);
}
.sit__list li {
  position: relative;
  padding-block: var(--space-5);
  border-block-start: 1px solid var(--rule);
  font-family: var(--face-display);
  font-size: clamp(1.375rem, 1.1rem + 0.8vw, 1.75rem);
  line-height: 1.3;
}
.sit__list li::before {
  content: "";
  display: block;
  inline-size: 32px;
  block-size: 3px;
  margin-block-end: var(--space-3);
  background-color: var(--mark);
}
/* each situation links to its service: a plain underlined link, the whole tile its target */
.sit__link {
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: var(--link-line);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.3em;
  transition: text-decoration-thickness var(--dur-state, 160ms) var(--ease-standard, ease);
}
.sit__link::after { content: ""; position: absolute; inset: 0; }
.sit__list li:hover .sit__link { text-decoration-thickness: 4px; }
.sit__link:focus-visible { outline: none; }
.sit__link:focus-visible::after { outline: 3px solid var(--focus); outline-offset: 3px; }
@media (min-width: 700px) {
  .sit__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
  .sit__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---- 1. the self-check, under the H1: the one raised object, pulled up into the opening */
main > .check-sec { padding-block-start: 0; }
.selfcheck {
  position: relative;
  z-index: 2;
  display: grid;
  gap: var(--space-6) var(--gutter);
  margin-block-start: calc(-1 * var(--space-8));
  padding: var(--space-6) var(--space-5);
  border-radius: var(--r-panel);
  box-shadow: var(--shadow-raised);
  counter-reset: marked;
}
.selfcheck__head .lead { margin-block-start: var(--space-4); color: var(--text); max-inline-size: 44rem; }
.selfcheck__set { margin: 0; padding: 0; border: 0; min-inline-size: 0; }
.selfcheck__list { display: grid; gap: var(--space-2); }
.selfcheck__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  min-block-size: 64px;
  padding: var(--space-4);
  border: 2px solid var(--rule);
  border-radius: var(--r-card);
  font-size: 1.125rem;
  line-height: 1.5;
  font-weight: 600;
  cursor: pointer;
  transition: border-color var(--dur-state, 160ms) var(--ease-standard, ease),
              background-color var(--dur-state, 160ms) var(--ease-standard, ease);
}
.selfcheck__item:hover { border-color: var(--control-edge); background-color: var(--paper-50); }
.selfcheck__item input {
  flex: none;
  inline-size: 24px;
  block-size: 24px;
  margin: 1px 0 0;
  accent-color: var(--teal-700);
  cursor: pointer;
  border-radius: 4px;
  transition: box-shadow var(--dur-state, 160ms) var(--ease-standard, ease);
}
.selfcheck__item:hover input { box-shadow: 0 0 0 4px var(--teal-100); }
.selfcheck__item input:checked { counter-increment: marked; }
.selfcheck__item input:checked + span { color: var(--mark); }
@supports selector(:has(*)) {
  .selfcheck__item:has(input:checked) { border-color: var(--mark); background-color: var(--paper-50); }
  .selfcheck__item:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 3px; }
}

/* the count the reader builds, drawn from the marks themselves (no script needed to count) */
.selfcheck__result { display: grid; gap: var(--space-3); align-content: start; }
.selfcheck__count {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  color: var(--text-2);
  font-weight: 700;
}
.selfcheck__count::before {
  content: counter(marked);
  font-family: var(--face-display);
  font-size: 3rem;
  line-height: 1;
  color: var(--mark);
  font-variant-numeric: tabular-nums;
}
.selfcheck__status:empty { display: none; }
.selfcheck__status {
  padding: var(--space-4) var(--space-5);
  border-inline-start: 4px solid var(--mark);
  background-color: var(--paper-50);
  font-size: var(--t-lead);
  line-height: 1.6;
  font-weight: 600;
}
/* the route's slot keeps its drawing's proportion (560x180) before and after the moment lands */
.selfcheck__path { color: var(--mark); inline-size: 100%; max-inline-size: 560px; aspect-ratio: 560 / 180; }

/* the verdicts as served text: a native disclosure under the check */
.selfcheck__key { border-block: 1px solid var(--rule); }
.selfcheck__key summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  min-block-size: 56px;
  padding-block: var(--space-3);
  font-weight: 700;
  font-size: 1.125rem;
  line-height: 1.4;
  cursor: pointer;
  list-style: none;
  transition: color var(--dur-state, 160ms) var(--ease-standard, ease);
}
.selfcheck__key summary::-webkit-details-marker { display: none; }
.selfcheck__key summary::after {
  content: "";
  flex: none;
  inline-size: 18px;
  block-size: 18px;
  background:
    linear-gradient(var(--mark), var(--mark)) center / 100% 2px no-repeat,
    linear-gradient(var(--mark), var(--mark)) center / 2px 100% no-repeat;
}
.selfcheck__key[open] summary::after { background: linear-gradient(var(--mark), var(--mark)) center / 100% 2px no-repeat; }
.selfcheck__key summary:hover { color: var(--mark); }
.selfcheck__key-list > div { display: grid; gap: 2px var(--gutter); padding-block: var(--space-3); border-block-start: 1px solid var(--rule); }
.selfcheck__key-list dt { font-weight: 700; color: var(--mark); }
@media (min-width: 700px) {
  .selfcheck__key-list > div { grid-template-columns: 9rem minmax(0, 1fr); align-items: baseline; }
}

/* no script: the statements read as a plain list, with nothing to press and nothing to count */
html:not(.js) .selfcheck__item { min-block-size: 0; border-color: transparent; border-block-end-color: var(--rule); border-radius: 0; cursor: auto; }
html:not(.js) .selfcheck__item:hover { background-color: transparent; }
html:not(.js) .selfcheck__count { display: none; }

@media (min-width: 900px) {
  .selfcheck { padding: var(--space-7); margin-block-start: calc(-1 * var(--space-9)); }
}
@media (min-width: 1024px) {
  .selfcheck { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: start; }
  .selfcheck__head { grid-column: 1 / -1; }
  .selfcheck__set { grid-column: 1 / span 7; grid-row: 2 / span 2; }
  .selfcheck__path { grid-column: 8 / span 5; grid-row: 2; }
  .selfcheck__result { grid-column: 8 / span 5; grid-row: 3; }
  .selfcheck__key { grid-column: 1 / -1; grid-row: 4; }
}
@media (min-width: 900px) {
  main > .opening--check { padding-block-end: calc(var(--space-9) + var(--space-7)); }
}

/* ---- 5. FAQ: the lead held under the heading ---------------------------- */
.faq__lead { margin-block-start: var(--space-4); }

/* ---- 3. your side: held heading beside four ruled lines (teal) ---------- */
.side__grid { display: grid; gap: var(--space-6) var(--gutter); }
.side__lead { margin-block-start: var(--space-4); }
.side__list { border-block-start: 3px solid var(--text); }
.side__list li {
  padding-block: var(--space-5);
  border-block-end: 1px solid var(--rule);
  font-size: var(--t-lead);
  line-height: 1.5;
  font-weight: 700;
}
@media (min-width: 1100px) {
  .side__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: start; }
  .side__head { grid-column: 1 / span 5; }
  .side__list { grid-column: 7 / span 6; }
  .side__grid > .section-end { grid-column: 1 / -1; margin-block-start: var(--space-3); }
}