/* HOLVEM R13 · the survey's "What you get after the survey" panel, all pages where it exists.
   Hook: the transform adds .r13-sv to div.r12-svout (application pages) or div.sv-after (building pages).
   Every selector is scoped under .r13-sv. Light family, textured, one accent edge, the turned corner.
   Measured on the rendered panel under the real text boxes (14 pages, 1440 and 390, worst single pixel):
   body #3C4147 >= 9.2:1 · item titles #14181B >= 13:1 · links #602F90 >= 8.4:1 on the item plates,
   >= 6.4:1 where a link sits on the tinted planes (the two foot links) · kicker #602F90 >= 6.7:1. See REPORT.md. */

.r13-sv.r12-svout,
.r13-sv.sv-after {
  position:relative; isolation:isolate; margin-top:18px; padding:28px 30px 28px 36px;
  color:var(--body);
  border:1px solid var(--border); border-radius:var(--r); overflow:hidden;
  /* the surface: raised paper, two tint planes cut at the fold (hard edges), a fine grain over everything */
  background-color:var(--surface-raised, #FBFAF8);
  background-image:
    radial-gradient(circle at 1px 1px, rgba(20,24,27,.07) 1px, transparent 1.7px),
    linear-gradient(149deg, var(--accent-soft, #F0E9F6) 0 34%, transparent calc(34% + 1px)),
    linear-gradient(329deg, rgba(169,193,182,.30) 0 24%, transparent calc(24% + 1px));
  background-size:6px 6px, 100% 100%, 100% 100%;
  background-repeat:repeat, no-repeat, no-repeat;
  /* the turned corner: the sheet's own cut (standard §4.3) */
  clip-path:polygon(0 0, calc(100% - var(--ch-x, 36.6px)) 0, 100% var(--ch-y, 22px), 100% 100%, 0 100%);
}
/* the accent edge */
.r13-sv.r12-svout::before,
.r13-sv.sv-after::before { content:""; position:absolute; left:0; top:0; bottom:0; width:6px; background:var(--accent, #6A3F96); z-index:1; }
/* the fold under the cut: a sunken triangle that reads as the turned-back corner */
.r13-sv.r12-svout::after,
.r13-sv.sv-after::after { content:""; position:absolute; top:0; right:0; width:var(--ch-x, 36.6px); height:var(--ch-y, 22px); background:var(--surface-sunken, #E9E7E0); clip-path:polygon(0 0, 100% 100%, 0 100%); z-index:0; }

/* ---------- the head: kicker with presence, the lead line as the panel's title ---------- */
.r13-sv .kicker, .r13-sv.r12-svout .kicker { margin:0; color:var(--accent-text, #602F90); font-weight:600; }
.r13-sv .kicker::before { content:""; width:10px; height:10px; flex:none; background:var(--accent, #6A3F96); clip-path:polygon(0 0, 100% 0, 100% 100%); }
.r13-sv .r12-svlead,
.r13-sv .sv-after-l { margin:12px 0 0; font-size:22px; line-height:1.22; font-weight:600; letter-spacing:-.45px; color:var(--heading, #14181B); max-width:22ch; text-wrap:balance; }

/* ---------- the five things: numbered plates, two across, the fifth as the closing row ---------- */
.r13-sv .r12-svlist,
.r13-sv .sv-out { list-style:none; margin:22px 0 0; padding:0; display:grid; gap:12px; counter-reset:r13sv; }
.r13-sv .r12-svlist li,
.r13-sv .sv-out li { position:relative; counter-increment:r13sv; margin:0; padding:14px 16px 15px 54px; background:rgba(251,250,248,.78); border:1px solid var(--border-hairline, #DEDBD2); border-radius:var(--r, 8px); font-size:14.5px; line-height:1.5; color:var(--body, #3C4147); }
.r13-sv .r12-svlist li::before,
.r13-sv .sv-out li::before { content:counter(r13sv, decimal-leading-zero); position:absolute; left:14px; top:13px; width:26px; height:26px; display:grid; place-items:center; transform:none; border:1.5px solid var(--accent, #6A3F96); border-radius:50%; background:var(--surface-raised, #FBFAF8); font-family:var(--mono, "Geist Mono", ui-monospace, monospace); font-size:11px; font-weight:600; letter-spacing:0; color:var(--accent-text, #602F90); font-variant-numeric:tabular-nums; }
.r13-sv .r12-svlist b,
.r13-sv .sv-out b { display:block; margin:0 0 4px; font-size:15.5px; line-height:1.3; color:var(--heading, #14181B); }
.r13-sv .r12-svlist b a,
.r13-sv .sv-out b a { color:var(--accent-text, #602F90); text-decoration:underline; text-decoration-thickness:1px; text-decoration-color:rgba(106,63,150,.5); text-underline-offset:3px; }
.r13-sv .r12-svlist b a:hover,
.r13-sv .sv-out b a:hover { color:var(--accent-text, #602F90); text-decoration-color:currentColor; text-decoration-thickness:2px; }
.r13-sv a:focus-visible { outline:2px solid var(--focus-ring, #25528C); outline-offset:3px; border-radius:2px; }

/* ---------- the two survey links: the panel's foot ---------- */
.r13-sv .handoff { margin:20px 0 0; padding-top:16px; border-top:1px solid var(--border, #C9C6BE); color:var(--muted, #5F6369); }
.r13-sv .handoff .tlink { color:var(--accent-text, #602F90); }
.r13-sv .handoff .tlink:hover { color:var(--heading, #14181B); }

/* ---------- two across from 600; the fifth runs the width as one line: title | text ---------- */
@media (min-width:600px) {
  .r13-sv .r12-svlist,
  .r13-sv .sv-out { grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px 14px; }
  .r13-sv .r12-svlist li:nth-child(5),
  .r13-sv .sv-out li:nth-child(5) { grid-column:1 / -1; display:grid; grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr); column-gap:20px; align-items:start; }
  .r13-sv .r12-svlist li:nth-child(5) b,
  .r13-sv .sv-out li:nth-child(5) b { margin:0; }
}

/* ---------- desktop: head and foot in the left column, the five things on the right; the foot shares the list's last line ---------- */
@media (min-width:1000px) {
  .r13-sv.r12-svout,
  .r13-sv.sv-after { display:grid; grid-template-columns:minmax(230px,.5fr) minmax(0,1.5fr); grid-template-rows:auto auto minmax(0,1fr); column-gap:40px; row-gap:0; padding:30px 34px 30px 40px; align-items:start; }
  .r13-sv .r12-svout-h { grid-column:1; grid-row:1 / span 2; }
  .r13-sv .r12-svhand { grid-column:1; grid-row:3; align-self:end; }
  .r13-sv .r12-svlist { grid-column:2; grid-row:1 / span 3; margin-top:0; gap:14px 16px; }
  .r13-sv.sv-after > .kicker { grid-column:1; grid-row:1; }
  .r13-sv .sv-after-l { grid-column:1; grid-row:2; }
  .r13-sv .sv-handoff { grid-column:1; grid-row:3; align-self:end; }
  .r13-sv .sv-out { grid-column:2; grid-row:1 / span 3; margin-top:0; gap:14px 16px; }
  .r13-sv .handoff { margin-top:24px; }
}

/* ---------- phones ---------- */
@media (max-width:599px) {
  .r13-sv.r12-svout,
  .r13-sv.sv-after { padding:22px 18px 22px 24px; }
  .r13-sv .r12-svlead,
  .r13-sv .sv-after-l { font-size:20px; }
  .r13-sv .r12-svlist li,
  .r13-sv .sv-out li { padding:13px 14px 14px 50px; }
  .r13-sv .r12-svlist li::before,
  .r13-sv .sv-out li::before { left:12px; }
}

@media (prefers-reduced-motion:reduce) { .r13-sv, .r13-sv * { transition:none !important; animation:none !important; } }