/* styles/injury.css -- pain and injury (2026-10-19, the volume screens'
   E1, E5, E8; SPEC v1 §3E; the one pain model, SPEC_injury.md §5a): what
   only screens/injury.js's screens need. The flow wears the first run's
   shell (`startmode`, styles/start.css: no heading, the button pinned over
   a fade), or a sheet over the session (`.ij-layer`); the list is a You
   page (styles/you.css). Sizes are the references' (`Vol_E*.html`, 390 x
   844); colours the app's tokens. WAS E3/E4's method and kind rows. */

/* ---- E1 · You's top card ------------------------------------------------- */
button.ij-door { display: flex; align-items: center; gap: 12px; width: 100%;
                 min-height: 0; margin: 0; padding: 14px 16px;
                 border: 1px solid var(--line); border-radius: 18px;
                 background: var(--card-fill); box-shadow: var(--card-lift);
                 color: var(--ink); text-align: left; }
button.ij-door:active { transform: scale(.985); }
.ij-dico { flex: none; display: inline-flex; width: 36px; height: 36px;
           padding: 8px; border-radius: 12px;
           background: rgba(140, 196, 245, .10); color: var(--accent-soft); }
.ij-dico svg { width: 100%; height: 100%; fill: none; stroke: currentColor;
               stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.ij-door .grow { flex: 1 1 auto; min-width: 0; display: flex;
                 flex-direction: column; gap: 2px; }
.ij-door .grow > b { font-size: 16px; font-weight: 800; }
.ij-door .grow > span { font-size: 13.5px; color: var(--quiet); }
.ij-door .grow > span.ij-dact { margin-top: 6px; padding: 8px 10px;
                                border-radius: 10px; border: 1px solid var(--line);
                                background: rgba(255, 255, 255, .03);
                                color: var(--c-ink-2); line-height: 1.4; }
.ij-door .grow > span.ij-dact + span.ij-dact { margin-top: 4px; }
.ij-dact b { color: var(--ink); }
.ij-dact .dim { color: var(--quiet); }

/* ---- E8 · Pain and injuries ---------------------------------------------- */
.ij-act { gap: 6px; }
.ij-acth { display: flex; align-items: baseline; justify-content: space-between;
           gap: 8px; }
.ij-acth b { font-size: 18px; font-weight: 800; }
.ij-acth span { flex: none; font-size: 13px; color: var(--quiet); }
.ij-pl { margin: 0; font-size: 13.5px; color: var(--quiet); }
.ij-pz { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--c-ink-2); }
.ij-wk { margin: 6px 0 0; padding-top: 10px; border-top: 1px solid var(--grid);
         font-size: 13px; line-height: 1.45; color: var(--quiet); }
.ij-act button.c-btn-outline { margin-top: 4px; }
.ij-none { padding: 4px 0; }
.ij-cleared { display: flex; flex-direction: column; }
.ij-crow { display: flex; justify-content: space-between; gap: 12px;
           padding: 12px 0; border-bottom: 1px solid var(--grid);
           font-size: 15px; }
.ij-crow span + span { flex: none; color: var(--quiet); }

/* ---- the flow's frame ------------------------------------------------------ */
.ij-page > * + * { margin-top: 0; }
.ij-top { margin-bottom: 10px; }
.ij-top button.ij-x { margin: 0 -10px 0 0; }
.ij-top button.ij-x svg { width: 20px; height: 20px; }
.ij-prog { display: flex; gap: 6px; }
.ij-prog i { flex: 1 1 0; height: 5px; border-radius: 3px;
             background: var(--unlock-off); }
.ij-prog i.on { background: var(--accent-bright); }
.ij-eye { margin-top: 14px; }
.ij-reg { margin: 6px 0 0; color: var(--unlock); font-size: 14px;
          font-weight: 800; }
.ij-h { margin: 6px 0 0; font-size: 26px; font-weight: 800;
        letter-spacing: -.015em; line-height: 1.15; }
.ij-reg + .ij-h { margin-top: 4px; font-size: 24px; }
.ij-sub { margin: 6px 0 0; color: var(--c-ink-2); font-size: 14.5px;
          line-height: 1.45; }
.ij-sub.dim { color: var(--quiet); font-size: 13.5px; }

/* ---- WHERE · the places, two a row --------------------------------------- */
.ij-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
           gap: 8px; margin-top: 14px; }
button.ij-chip { display: flex; align-items: center; justify-content: center;
                 min-height: 52px; margin: 0; padding: 6px 8px;
                 border: 1px solid var(--line); border-radius: 12px;
                 background: rgba(255, 255, 255, .025); color: var(--c-ink-2);
                 font-size: 14.5px; font-weight: 700; line-height: 1.25;
                 text-align: center; }
button.ij-chip.on { border: 1.5px solid var(--accent-bright);
                    background: rgba(47, 138, 224, .16); color: #fff; }
.ij-grp .ij-grid { margin-top: 0; }
button.ij-more { align-self: flex-start; min-height: 40px; margin-top: 12px;
                 padding: 0; font-size: 15px; font-weight: 700; }

/* ---- the question · Yes / No ----------------------------------------------- */
.ij-rows { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.ij-grp { display: flex; flex-direction: column; gap: 6px; margin-top: 16px; }
.ij-grp h3 { margin: 0 0 2px; font-size: 16px; font-weight: 800; }
button.ij-row { display: flex; align-items: center; gap: 12px; width: 100%;
                min-height: 48px; margin: 0; padding: 7px 14px;
                border: 1px solid var(--line); border-radius: 14px;
                background: rgba(255, 255, 255, .025); color: var(--ink);
                text-align: left; }
button.ij-row.on { border: 1.5px solid var(--accent-bright);
                   background: rgba(47, 138, 224, .14); }
.ij-row .grow { flex: 1 1 auto; min-width: 0; display: flex;
                flex-direction: column; gap: 2px; }
.ij-row .grow b { font-size: 15px; font-weight: 700; line-height: 1.3; }
.ij-row .grow span { font-size: 12.5px; color: var(--quiet); line-height: 1.3; }
.ij-box { flex: none; display: inline-flex; width: 24px; height: 24px;
          padding: 3px; border-radius: 7px; border: 2px solid #3d5068; }
.ij-box.on { border: 0; padding: 5px; background: var(--accent-bright);
             color: #fff; }
.ij-box svg { width: 100%; height: 100%; fill: none; stroke: currentColor;
              stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.ij-row .ij-box { border-radius: 50%; }
button.ij-sore { margin-top: 14px; }

/* ---- the result (E5's place) ---------------------------------------------- */
.ij-res { padding-top: 44px; }
.ij-tick { display: inline-flex; width: 56px; height: 56px; padding: 14px;
           border-radius: 18px; background: rgba(140, 196, 245, .12);
           color: var(--accent-soft);
           transition: opacity 300ms ease-out, transform 300ms ease-out; }
.ij-tick.pre { opacity: 0; transform: translateY(10px); }
.ij-tick svg { width: 100%; height: 100%; fill: none; stroke: currentColor;
               stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.ij-rh { margin: 18px 0 0; font-size: 30px; font-weight: 800;
         letter-spacing: -.015em; line-height: 1.15; }
.ij-rsub { margin: 8px 0 0; font-size: 17px; line-height: 1.45;
           color: var(--c-ink-2); }
.ij-rcard { margin-top: 22px; padding: 14px 16px; border-radius: 18px;
            border: 1px solid var(--line); background: var(--card-fill);
            box-shadow: var(--card-lift); }
.ij-rcard + .ij-rcard { margin-top: 10px; }
.ij-reye { margin: 0; color: var(--quiet); font-size: 12px; font-weight: 800;
           letter-spacing: .12em; text-transform: uppercase; }
.ij-rlines { display: flex; flex-direction: column; margin-top: 8px;
             font-size: 15px; line-height: 1.6; }
.ij-rec { margin-top: 18px; }
.ij-rec h3 { margin: 0 0 6px; font-size: 16px; font-weight: 800; }
.ij-rec p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--c-ink-2); }
.ij-stop { margin: 14px 0 0; font-size: 16px; font-weight: 800; color: var(--ink); }
.ij-find { margin: 14px 0 0; font-size: 13.5px; line-height: 1.45;
           color: var(--quiet); }

/* ---- the sheet over the session (`injuryFlow`, mid-session) ------------- */
.ij-layer .sheet { max-height: 88vh; overflow-y: auto; }
.ij-shhead { display: flex; align-items: center; gap: 8px; }
.ij-shhead .ij-eye { flex: 1 1 auto; margin: 0; }
.ij-shhead button.ij-x { margin: 0 -10px 0 0; }
.ij-layer .ij-h { font-size: 22px; }
.ij-layer .ij-rh { font-size: 26px; }
.ij-layer .st-foot { position: static; margin-top: 18px; padding: 0;
                     background: none; }

@media (prefers-reduced-motion: reduce) {
  /* The tick appears where it ends; nothing moves. */
  .ij-tick, .ij-tick.pre { transition: none; opacity: 1; transform: none; }
  button.ij-door:active { transform: none; }
}