/* /edc-software: one field caught against its clause, a check to try, what
   the protocol keeps doing after go-live, and the expected checklist. */

/* ── try it: the clause, its compiled rule, and a field that obeys it ── */
.trycheck { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px 28px; align-items: stretch; margin-top: 44px; }
.trycheck__clause { position: relative; padding: 26px; border: 1px solid var(--line-soft); border-radius: 16px; background: var(--card); }
.trycheck__clause > small,
.trycheck__bar { font: 500 10px var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--label); }
.trycheck__clause > p:first-of-type { margin: 14px 0 0; font: 400 clamp(19px, 1.8vw, 23px)/1.4 var(--font-display); color: var(--fg); text-wrap: pretty; }
.trycheck__clause mark { padding: 0 3px; border-radius: 4px; background: rgba(92, 200, 255, 0.16); box-shadow: inset 0 -1px 0 rgba(92, 200, 255, 0.7); color: #fff; }
.trycheck__arrow { display: block; width: 1px; height: 28px; margin: 18px 0 10px 18px; background: linear-gradient(180deg, rgba(92, 200, 255, 0.2), #5cc8ff); box-shadow: 0 0 8px rgba(92, 200, 255, 0.6); }
.trycheck__rule { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.trycheck__rule span { min-width: 0; padding: 10px; border: 1px solid rgba(92, 200, 255, 0.3); border-radius: 8px; background: rgba(92, 200, 255, 0.06); font: 500 12px var(--font-mono); color: #fff; overflow-wrap: anywhere; }
.trycheck__rule small { display: block; margin-bottom: 4px; font-size: 8.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--label); }
.trycheck__id { margin: 14px 0 0; font-size: 12.5px; line-height: 1.6; color: var(--muted); }
.trycheck__id code { margin-right: 6px; font: 500 11px var(--font-mono); color: #9fd8ff; }
.trycheck__field { display: grid; align-content: start; gap: 22px; padding: 26px; border: 1px solid var(--edge); border-radius: 16px; background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(30, 120, 220, 0.14), transparent 70%), #070b12; box-shadow: 0 40px 90px -50px rgba(0, 0, 0, 0.95); transition: border-color 240ms ease; }
.trycheck__field:has(.is-fail.is-on) { border-color: rgba(255, 69, 58, 0.45); }
.trycheck__bar { display: flex; justify-content: space-between; gap: 12px; }
.trycheck__bar b { font-weight: 500; color: #9fd8ff; }
.trycheck__range label { font-size: 15px; color: var(--fg); }
.trycheck__range label b { font-size: 15px; transition: color 200ms ease; }
.trycheck__field:has(.is-fail.is-on) .trycheck__range label b { color: #ff8a82; }
.trycheck__track { position: relative; }
.trycheck__track input { position: relative; z-index: 1; }
/* 60 and 200 on a 30 to 240 scale. */
.trycheck__band { position: absolute; left: 14.29%; width: 66.66%; top: 50%; height: 16px; margin-top: -8px; border: 1px dashed rgba(110, 231, 183, 0.5); border-radius: 6px; background: rgba(110, 231, 183, 0.06); pointer-events: none; }
.trycheck__scale { position: relative; height: 14px; font: 500 10px var(--font-mono); color: var(--label); }
.trycheck__scale span { position: absolute; top: 0; transform: translateX(-50%); }
.trycheck__scale span:first-child { left: 0; transform: none; }
.trycheck__scale span:last-child { right: 0; transform: none; }
.trycheck__scale .is-lo { left: 14.29%; color: var(--live); }
.trycheck__scale .is-hi { left: 80.95%; color: var(--live); }
.trycheck__out { display: grid; }
.trycheck__state { grid-area: 1 / 1; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; margin: 0; padding: 16px 18px; border: 1px solid; border-radius: 12px; opacity: 0; transform: translateY(6px); transition: opacity 200ms ease, transform 260ms var(--ease-out); }
.trycheck__state.is-on { opacity: 1; transform: none; }
.trycheck__state b { font: 500 22px/1 var(--font-display); }
.trycheck__state span { font-size: 13.5px; color: var(--muted); }
.trycheck__state.is-pass { border-color: rgba(110, 231, 183, 0.4); background: rgba(110, 231, 183, 0.07); }
.trycheck__state.is-pass b { color: var(--live); }
.trycheck__state.is-fail { border-color: rgba(255, 69, 58, 0.45); background: rgba(255, 69, 58, 0.08); }
.trycheck__state.is-fail b { color: #ff8a82; }

/* ── after go-live: each moment plays when its step reaches the reading line ── */
.win { padding: 4px 2px 2px; }
.win__days { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); font: 500 10px var(--font-mono); color: var(--label); text-align: center; }
.win__track { position: relative; height: 64px; margin-top: 10px; border: 1px solid var(--line-soft); border-radius: 10px; background: repeating-linear-gradient(90deg, transparent 0 calc(100% / 12 - 1px), rgba(255, 255, 255, 0.06) calc(100% / 12 - 1px) calc(100% / 12)); }
.win__band { position: absolute; top: 8px; bottom: 8px; left: 8.333%; width: 58.333%; border: 1px solid rgba(92, 200, 255, 0.55); border-radius: 8px; background: rgba(92, 200, 255, 0.12); transform-origin: left; }
.win__band small { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); font: 500 9.5px var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: #9fd8ff; white-space: nowrap; }
.win__visit { position: absolute; top: -5px; bottom: -5px; left: 79.17%; width: 2px; margin-left: -1px; border-radius: 2px; background: #ff8a82; box-shadow: 0 0 12px rgba(255, 69, 58, 0.8); }
.win__visit b { position: absolute; top: 100%; left: 50%; margin-top: 6px; transform: translateX(-50%); font: 600 10px var(--font-mono); color: #ff8a82; white-space: nowrap; }
.win__verdict { margin: 34px 0 0; padding: 14px 16px; border: 1px solid rgba(255, 69, 58, 0.35); border-radius: 10px; background: rgba(255, 69, 58, 0.07); }
.win__verdict b { display: block; font: 500 20px/1.25 var(--font-display); color: #fff; }
.win__verdict span { display: block; margin-top: 6px; font: 500 10.5px var(--font-mono); letter-spacing: 0.06em; color: var(--muted); }
.golive__close { white-space: normal; flex-wrap: wrap; }
.replay { position: relative; margin: 0; padding: 0 0 0 22px; list-style: none; }
.replay::before { content: ""; position: absolute; left: 4px; top: 14px; bottom: 14px; width: 1px; background: linear-gradient(180deg, rgba(92, 200, 255, 0.5), rgba(110, 231, 183, 0.5)); }
.replay li { position: relative; display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 12px; align-items: baseline; padding: 11px 0; border-bottom: 1px solid var(--line-soft); font-size: 13.5px; color: var(--fg); }
.replay li:last-child { border-bottom: 0; }
.replay li::before { content: ""; position: absolute; left: -22px; top: 15px; width: 9px; height: 9px; border: 1px solid rgba(92, 200, 255, 0.8); border-radius: 50%; background: #070b12; }
.replay li.is-bad::before { border-color: #ff8a82; }
.replay li.is-sign::before { border-color: var(--live); background: var(--live); box-shadow: 0 0 10px rgba(110, 231, 183, 0.7); }
.replay time { font: 500 11px var(--font-mono); color: #9fd8ff; }
.replay em { font: 500 9.5px var(--font-mono); font-style: normal; letter-spacing: 0.08em; text-transform: uppercase; color: var(--label); white-space: nowrap; }
.scrolly__pane.is-active .win__band { animation: winBand 900ms var(--ease-out) 150ms both; }
.scrolly__pane.is-active .win__visit { animation: winDrop 600ms var(--ease-out) 900ms both; }
.scrolly__pane.is-active .win__verdict { animation: kitIn 560ms var(--ease-out) 1300ms both; }
.scrolly__pane.is-active .golive__diff > * { animation: kitIn 520ms var(--ease-out) both; }
.scrolly__pane.is-active .golive__diff > :nth-child(2) { animation-delay: 140ms; }
.scrolly__pane.is-active .golive__diff > :nth-child(3) { animation-delay: 280ms; }
.scrolly__pane.is-active .golive__diff > :nth-child(4) { animation-delay: 520ms; }
.scrolly__pane.is-active .golive__diff > :nth-child(5) { animation-delay: 900ms; }
.scrolly__pane.is-active .replay li { animation: kitIn 520ms var(--ease-out) both; animation-delay: calc(var(--r) * 240ms + 120ms); }
@keyframes winBand { from { opacity: 0; transform: scaleX(0); } to { opacity: 1; transform: none; } }
@keyframes winDrop { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: none; } }

@media (max-width: 980px) {
  .trycheck { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .trycheck__clause, .trycheck__field { padding: 20px; }
  .trycheck__rule { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .replay li { grid-template-columns: 46px minmax(0, 1fr); gap: 4px 10px; }
  .replay em { grid-column: 2; }
}
html[data-motion="paused"] .golive .scrolly__pane.is-active * { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .golive .scrolly__pane.is-active * { animation: none; }
  .trycheck__state { transition: opacity 120ms ease; transform: none; }
}

/* ══ The page's own world: the case report form. Square boxes in pale cyan
   hairlines, small-caps field labels, values in mono, a monitor's red pen in
   italic serif, faint form ruling under everything. ══ */
.page-edc { --crf-line: rgba(159, 216, 255, 0.26); --crf-line-soft: rgba(159, 216, 255, 0.12); --crf-label: rgba(159, 216, 255, 0.74); --crf-pen: #ff8a82; --crf-sheet: #0b121d; }
.page-edc main { counter-reset: crf; background-image: repeating-linear-gradient(180deg, transparent 0 35px, rgba(159, 216, 255, 0.035) 35px 36px); }

/* the header band and the sheet */
.crf-hero { padding-top: 128px; }
.crf-head { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); margin: 0 0 48px; border: 1px solid var(--crf-line); animation: heroUp 0.7s var(--ease-out) both; }
.crf-head span { display: grid; gap: 5px; min-width: 0; padding: 10px 14px 11px; border-left: 1px solid var(--crf-line); font: 500 13px var(--font-mono); color: #e6f2fb; }
.crf-head span:first-child { border-left: 0; }
.crf-head small, .crf-field small, .crf-sign small { font: 600 9.5px var(--font-ui); letter-spacing: 0.14em; text-transform: uppercase; color: var(--crf-label); }
.crf-hero__grid { display: grid; grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr); gap: 40px 64px; align-items: start; }
.crf-hero .page-title { font-size: clamp(40px, 4.6vw, 68px); }
.crf-sheet { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 200px; grid-template-areas: "grid margin" "sign sign"; margin: 0; border: 1px solid var(--crf-line); background: var(--crf-sheet); box-shadow: 0 40px 90px -40px rgba(0, 0, 0, 0.9); animation: heroUp 0.9s var(--ease-out) 0.15s both; }
.crf-stamp { position: absolute; right: 18px; top: -13px; z-index: 1; padding: 3px 10px; border: 1.5px solid rgba(255, 138, 130, 0.75); background: var(--bg); font: 700 10px var(--font-ui); letter-spacing: 0.3em; text-transform: uppercase; color: var(--crf-pen); transform: rotate(3deg); }
.crf-sheet__grid { grid-area: grid; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.crf-field { position: relative; display: grid; align-content: start; gap: 9px; min-height: 92px; padding: 15px 16px; border-right: 1px solid var(--crf-line-soft); border-bottom: 1px solid var(--crf-line-soft); }
.crf-field:nth-child(2n) { border-right: 0; }
.crf-field > b { font: 500 17px var(--font-mono); color: #fff; }
.crf-field > b.crf-checks { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font: 500 13px var(--font-ui); color: rgba(255, 255, 255, 0.86); }
.crf-checks i { position: relative; width: 13px; height: 13px; border: 1px solid rgba(159, 216, 255, 0.6); }
.crf-checks i:not(:first-child) { margin-left: 8px; }
.crf-checks i.is-x::before, .crf-checks i.is-x::after { content: ""; position: absolute; left: 1px; right: 1px; top: 50%; height: 1.5px; margin-top: -0.75px; background: #fff; transform: rotate(45deg); }
.crf-checks i.is-x::after { transform: rotate(-45deg); }
.crf-val { position: relative; display: inline-flex; align-items: baseline; gap: 16px; }
.crf-old { color: var(--crf-pen); }
.crf-strike { position: absolute; left: -4px; top: 55%; width: 30px; height: 1.5px; background: var(--crf-pen); transform-origin: left; }
.crf-sheet .crf-strike[data-at] { transition: transform 0.5s var(--ease-out), opacity 0.2s ease; }
.crf-sheet.is-armed .crf-strike[data-at]:not(.is-on) { opacity: 1; transform: scaleX(0); }
.crf-new { color: var(--live); }
.crf-ring { position: absolute; inset: 7px 10px; border: 1.5px solid var(--crf-pen); border-radius: 50% / 46%; transform: rotate(-2deg); pointer-events: none; }
.crf-init { font: italic 400 13.5px var(--font-display); color: rgba(255, 255, 255, 0.66); }
.crf-margin { grid-area: margin; display: grid; padding: 98px 16px 16px; border-left: 1px dashed var(--crf-line); }
.crf-note { grid-area: 1 / 1; margin: 0; font: italic 400 18px/1.3 var(--font-display); }
.crf-note span { display: block; margin-top: 8px; font: 400 12px/1.5 var(--font-ui); color: var(--muted); }
.crf-note--bad { color: var(--crf-pen); }
.crf-note--ok { color: var(--live); }
.crf-sign { grid-area: sign; display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: end; gap: 6px 14px; padding: 16px; border-top: 1px solid var(--crf-line); }
.crf-sign b { padding-bottom: 4px; border-bottom: 1px solid rgba(255, 255, 255, 0.35); font: italic 400 18px var(--font-display); color: #fff; }
.crf-sign b:last-child { font: 500 13px var(--font-mono); }

/* every section opens like a form section: a lettered tab on a rule */
.page-edc .section { counter-increment: crf; }
.page-edc .section-head { max-width: none; padding-top: 22px; border-top: 1px solid var(--crf-line); }
.page-edc .section-head > * { max-width: 760px; }
.page-edc .section-head .kicker { display: inline-flex; align-items: center; gap: 12px; height: 30px; margin-bottom: 24px; padding-right: 12px; border: 1px solid var(--crf-line); font: 600 10.5px var(--font-ui); letter-spacing: 0.16em; color: #d8ecfa; }
.page-edc .section-head .kicker::before { content: counter(crf, upper-alpha); display: grid; place-items: center; align-self: stretch; width: 30px; border-right: 1px solid var(--crf-line); background: rgba(159, 216, 255, 0.1); font: 500 15px var(--font-display); letter-spacing: 0; color: #fff; }

/* the figures are forms too: square corners, form hairlines, a SPECIMEN stamp */
.page-edc .story, .page-edc .trycheck__clause, .page-edc .trycheck__field, .page-edc .trycheck__rule span, .page-edc .trycheck__state,
.page-edc .edcview .kit-tabs, .page-edc .edcview__window, .page-edc .frag, .page-edc .frag__row, .page-edc .frag__impact span,
.page-edc .win__track, .page-edc .win__band, .page-edc .win__verdict, .page-edc .related a { border-radius: 2px; }
.page-edc .story, .page-edc .trycheck__field { border-color: var(--crf-line); background: var(--crf-sheet); }
.page-edc .trycheck__clause { border-color: var(--crf-line-soft); background: transparent; }
.page-edc .story__bar { border-bottom-color: var(--crf-line); background: rgba(159, 216, 255, 0.05); font: 600 10px var(--font-ui); letter-spacing: 0.14em; color: var(--crf-label); }
.page-edc .story__bar b { padding: 2px 8px; border: 1.5px solid rgba(255, 138, 130, 0.7); font: 700 9.5px var(--font-ui); letter-spacing: 0.28em; text-transform: uppercase; color: var(--crf-pen); transform: rotate(-2deg); }
.page-edc .edcview .kit-tabs { border-color: var(--crf-line); }

/* the checklist, as a form's checkboxes */
.crf-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 44px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--crf-line); }
.crf-list li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 6px 16px; padding: 20px 32px 20px 0; border-bottom: 1px solid var(--crf-line-soft); }
.crf-list li:nth-child(odd) { border-right: 1px solid var(--crf-line-soft); }
.crf-list li:nth-child(even) { padding-left: 32px; padding-right: 0; }
.crf-tick { grid-row: span 2; display: grid; place-items: center; width: 20px; height: 20px; margin-top: 2px; border: 1px solid rgba(159, 216, 255, 0.6); }
.crf-tick svg { width: 15px; height: 15px; fill: none; stroke: var(--live); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 16; }
.crf-list.is-in .crf-tick svg { animation: crfTick 520ms var(--ease-out) both; animation-delay: calc(var(--i) * 110ms + 250ms); }
@keyframes crfTick { from { stroke-dashoffset: 16; } to { stroke-dashoffset: 0; } }
.crf-list b { font: 500 20px/1.2 var(--font-display); color: var(--fg); }
.crf-list span { font-size: 13.5px; line-height: 1.55; color: var(--muted); }

@media (max-width: 1100px) {
  .crf-hero__grid { grid-template-columns: 1fr; }
  .crf-head { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .crf-head span:nth-child(4) { border-left: 0; }
  .crf-head span:nth-child(n + 4) { border-top: 1px solid var(--crf-line); }
}
@media (max-width: 640px) {
  .crf-hero { padding-top: 112px; }
  .crf-head { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 32px; }
  .crf-head span { padding: 8px 10px; font-size: 12px; }
  .crf-head span:nth-child(odd) { border-left: 0; }
  .crf-head span:nth-child(even) { border-left: 1px solid var(--crf-line); }
  .crf-head span:nth-child(n + 3) { border-top: 1px solid var(--crf-line); }
  .crf-sheet { grid-template-columns: 1fr; grid-template-areas: "grid" "margin" "sign"; }
  .crf-field { min-height: 80px; padding: 12px; }
  .crf-field > b { font-size: 15px; }
  .crf-margin { min-height: 96px; padding: 14px 16px; border-left: 0; border-top: 1px dashed var(--crf-line); }
  .crf-sign { grid-template-columns: auto minmax(0, 1fr); }
  .crf-list { grid-template-columns: 1fr; }
  .crf-list li, .crf-list li:nth-child(even) { padding: 18px 0; border-right: 0; }
}
html[data-motion="paused"] .crf-list svg { animation: none; }
@media (prefers-reduced-motion: reduce) { .crf-list svg { animation: none; } }