/* styles/explain.css -- the "Why?" popups and their links (2026-10-20, v2
   A5; the design reference `docs design/volume-explanations/`, the owner's
   chosen pass, §2-3: a frosted card that rises from the bottom over a
   dimmed screen, three lines on a rail, one blue "Got it"). Every size is
   the reference's; colours are the app's tokens, or the reference's own
   literal where the tokens have none. screens/explain.js draws it. */

/* ---- the links ---------------------------------------------------------- */
/* "Why?" at the end of a line: link blue, bold, the line's own size; its
   tap area reaches 8 px either side and 12 px above and below. */
button.xp-why { display: inline; position: relative; width: auto;
                min-height: 0; margin: 0; padding: 0; border: 0;
                border-radius: 0; background: none; font: inherit;
                font-weight: 700; color: var(--accent-soft);
                white-space: nowrap; text-align: left; cursor: pointer;
                -webkit-tap-highlight-color: transparent; }
button.xp-why::after { content: ""; position: absolute; left: -8px;
                       right: -8px; top: -12px; bottom: -12px; }
button.xp-why:active { transform: none; opacity: .7; }
button.xp-why:disabled { opacity: 1; }
/* In a session: 13 px, never auto-shown. */
button.xp-why.sm { font-size: 13px; }
/* The ⓘ after an input's label: a 20 px outlined glyph in a 44 px tap area
   that takes no room of its own. */
button.xp-inf { flex: none; display: inline-flex; align-items: center;
                justify-content: center; width: 44px; height: 44px;
                min-height: 0; margin: -12px -12px -12px -7px;
                padding: 12px; border: 0; background: none;
                color: var(--accent-soft); vertical-align: middle;
                -webkit-tap-highlight-color: transparent; }
button.xp-inf svg { width: 20px; height: 20px; display: block; fill: none;
                    stroke: currentColor; stroke-width: 1.8;
                    stroke-linecap: round; }
button.xp-inf:active { transform: none; opacity: .7; }

/* ---- the popup ---------------------------------------------------------- */
/* Over everything the app draws, sheets and the session's bar included. */
.xpw { position: fixed; inset: 0; z-index: 200; }
.xp-scrim { position: absolute; inset: 0; background: rgba(2, 3, 5, .62); }
/* I6c: in a session the dim is lighter, so the rest timer reads. */
.xpw.soft .xp-scrim { background: rgba(2, 3, 5, .42); }
.xp { position: absolute; left: 12px; right: 12px;
      bottom: calc(12px + env(safe-area-inset-bottom));
      max-width: 520px; margin: 0 auto; box-sizing: border-box;
      max-height: calc(100% - 24px - env(safe-area-inset-top)
                       - env(safe-area-inset-bottom));
      overflow-y: auto; padding: 20px 20px 14px; border-radius: 28px;
      background: linear-gradient(160deg, rgba(29, 50, 77, .93) 0%,
                                  rgba(20, 36, 61, .94) 55%,
                                  rgba(15, 26, 41, .96) 100%);
      border: 1px solid rgba(140, 196, 245, .22);
      box-shadow: inset 0 1px 0 rgba(160, 200, 245, .16),
                  0 -6px 28px rgba(0, 0, 0, .35),
                  0 24px 60px rgba(0, 0, 0, .8);
      -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
      color: var(--ink); text-align: left; }
.xp-hd { display: flex; gap: 12px; align-items: center; }
.xp-ic { width: 34px; height: 34px; flex: none; border-radius: 11px;
         background: rgba(140, 196, 245, .12); display: flex;
         align-items: center; justify-content: center; }
.xp-ic svg { width: 18px; height: 18px; fill: none;
             stroke: var(--accent-soft); stroke-width: 2.2;
             stroke-linecap: round; stroke-linejoin: round; }
.xp-t { margin: 0; font-size: 21px; font-weight: 800;
        letter-spacing: -.01em; line-height: 1.2; color: var(--ink); }
/* The rail: L1 a filled dot (what changed), L2 a ring (why), L3 an arrow
   (what next), joined by a hairline. */
.xp-l { list-style: none; margin: 14px 0 0; padding: 0; position: relative; }
.xp-l li { position: relative; padding-left: 24px; font-size: 15px;
           line-height: 1.45; color: #c3c8d1; }
.xp-l li + li { margin-top: 10px; }
.xp-l li.l1 { font-size: 16px; line-height: 1.4; font-weight: 600;
              color: var(--ink); }
.xp-l li::before { content: ""; position: absolute; left: 2px; top: .62em;
                   width: 9px; height: 9px; border-radius: 5px;
                   box-sizing: border-box; }
.xp-l li.l1::before { background: var(--accent-soft); }
.xp-l li.l2::before { border: 2px solid #6f8db0; }
.xp-l li.l3::before { width: 8px; height: 8px; border-radius: 0; left: 1px;
                      top: .55em; border: solid var(--accent-soft);
                      border-width: 2px 2px 0 0; transform: rotate(45deg); }
.xp-l li:not(:last-child)::after { content: ""; position: absolute;
                                   left: 6px; top: calc(.62em + 13px);
                                   bottom: -8px; width: 1px;
                                   background: rgba(140, 196, 245, .22); }
/* The one blue button. */
button.xp-ok { width: 100%; min-height: 54px; margin: 18px 0 0; border: 0;
               border-radius: 18px; background: var(--accent-fill);
               color: var(--accent-ink);
               box-shadow: 0 10px 24px rgba(20, 120, 204, .35);
               font-size: 17px; font-weight: 800; display: flex;
               align-items: center; justify-content: center; }

/* ---- the motion (§2: rise 10 px and fade in, 300 ms ease-out, with the
   dim; leave sinking 10 px, 200 ms ease-in; reduced motion a fade) ------- */
.xpw.xp-wait .xp, .xpw.xp-wait .xp-scrim { opacity: 0; }
@keyframes xp-rise { from { opacity: 0; transform: translateY(10px); } }
@keyframes xp-fade { from { opacity: 0; } }
@keyframes xp-sink { to { opacity: 0; transform: translateY(10px); } }
@keyframes xp-unfade { to { opacity: 0; } }
.xpw.in .xp { animation: xp-rise 300ms ease-out both; }
.xpw.in .xp-scrim { animation: xp-fade 300ms ease-out both; }
.xpw.out .xp { animation: xp-sink 200ms ease-in both; }
.xpw.out .xp-scrim { animation: xp-unfade 200ms ease-in both; }
@media (prefers-reduced-motion: reduce) {
  .xpw.in .xp { animation: xp-fade 300ms ease-out both; }
  .xpw.out .xp { animation: xp-unfade 200ms ease-in both; }
}

/* ---- where a link sits ---------------------------------------------------- */
/* The week's card and a moved must-have (I5, I5b; RULED ⚠P-EX15 "both taps
   as drawn"): the card opens the week, its "Why?" the popup -- the card's
   own door stretched under its words, the link over it. */
.tp-note.tp-note2 { position: relative; }
button.tp-notego { position: absolute; inset: 0; width: auto; min-height: 0;
                   margin: 0; padding: 0; border: 0; border-radius: inherit;
                   background: none; }
button.tp-notego:active { transform: none; }
.tp-note2 .xp-why { z-index: 1; }
.tp-note2 .lchev { align-self: center; border-color: var(--rec); }
/* In a session (I6, I6b): the prompt card's top right, and beside TARGET. */
.rv-xprow { display: flex; align-items: baseline; justify-content: space-between;
            gap: 12px; }
.rv-xprow > :first-child { min-width: 0; }
.rv-xprow > .xp-why { flex: none; }
.rv-xpbeside { display: flex; align-items: baseline; gap: 10px; }
.rv-xpbeside > .xp-why { flex: none; }
/* A step-up's tag, its "Why?" after it. */
.tp-tagrow { display: flex; align-items: center; gap: 10px; }
.tp-tagrow .xp-why { font-size: 13px; }
/* The ⓘ beside a title (the court card, the ill sheet). */
.xp-titled { display: flex; align-items: center; gap: 2px; min-width: 0; }
/* ... and after the injury flow's WHERE (v2 A5b): the question's own
   place, its ⓘ beside it. */
.ij-titled { margin-top: 6px; }
.ij-titled .ij-h { margin: 0; }
/* The week's other facts under its card (v2 A5b): Up next's reason line,
   one a fact; a line whose words could not be had is gone, and with none
   left, the box. */
.tp-wlines { display: flex; flex-direction: column; gap: 8px; }
.tp-wlines:empty { display: none; }