/* Product pictures (calm batch G, #176 "show, don't tell"; the mockups v2 Eddie approved on 20 Oct). The thing a skill made, set in
   HTML at body size: a chat window, a document, a marked sheet, a tracker and a form (Pages/Shared/_Pic*.cshtml, PictureViews.cs),
   the field they sit on, and the "Same question, two answers" switch. Each picture ends on a whole line, 16 px clear of its edges;
   a phone crops tighter (.pic-wide shows from tablet width up). Motion is transform and opacity only, once, and none with reduced
   motion. Loaded on /skills by route; any other page asks for it (Pictures.Css with AreaStyles.Use). */

/* ---------- The field: one audience tint, one marigold glow behind the picture ---------- */
.pic-field{position:relative;isolation:isolate;border-radius:40px;background:var(--mist);padding:44px 40px}
.pic-field.pic-t-cream{background:var(--cream)}
.pic-field.pic-t-ice{background:var(--ice)}
.pic-field.pic-t-apricot{background:var(--apricot)}
.pic-field.pic-t-mint{background:var(--mint)}
.pic-glow{position:absolute;inset:8% 6% 4% 18%;z-index:-1;background:radial-gradient(closest-side,color-mix(in srgb,var(--marigold) 70%,transparent),transparent);pointer-events:none}
.pic-stack{display:grid;gap:16px;max-width:520px;margin:0 auto}

/* ---------- Every picture ---------- */
.pic{margin:0;min-width:0}
.pic-chat,.pic-doc,.pic-sheet,.pic-tracker,.pic-form{display:block}
.pic-win,.pic-paper{background:var(--white);color:var(--navy);font-size:var(--fs-body);line-height:1.5;box-shadow:0 44px 80px -44px rgba(13,44,84,.34),0 2px 6px rgba(13,44,84,.07);min-width:0;overflow-wrap:anywhere}
.pic-win{border-radius:var(--r-lg);padding:22px 24px 22px}
.pic-paper{border-radius:var(--r-sm);padding:18px 20px 20px;border-top:6px solid var(--navy)}
.pic-paper-marked{border-top-color:var(--gold-text)}
.pic-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.pic-tag{display:inline-flex;align-items:center;font-size:var(--fs-small);font-weight:500;line-height:1.2;color:var(--navy);background:var(--white);border-radius:999px;padding:6px 12px;box-shadow:0 0 0 1px color-mix(in oklab,var(--navy) 16%,var(--white));white-space:nowrap}
.replay-head .pic-tag{white-space:normal}
.pic-tags{display:inline-flex;flex-wrap:wrap;gap:6px;min-width:0}
.pic-title{font-weight:600;margin-bottom:6px}
.pic-paper-doc > .pic-title{margin-bottom:8px}

/* ---------- The chat window ---------- */
.pic-ask{margin-left:auto;max-width:88%;width:fit-content;background:var(--mist);border-radius:20px 20px 6px 20px;padding:12px 16px}
.pic-who{display:block;font-size:var(--fs-small);color:var(--soft);margin-bottom:2px}
.pic-reply{display:grid;gap:10px;margin-top:16px;min-width:0}
.pic-reply > *{min-width:0}
.pic-chip{display:inline-flex;align-items:center;gap:8px;width:fit-content;font-size:var(--fs-small);font-weight:600;letter-spacing:.06em;line-height:1.2}
.pic-chip svg{width:24px;height:24px;flex:none}
.pic-plainchip{display:inline-flex;align-items:center;gap:8px;width:fit-content;font-size:var(--fs-small);color:var(--soft);line-height:1.2}
.pic-dot{width:24px;height:24px;border-radius:50%;background:var(--mist);box-shadow:inset 0 0 0 1.5px color-mix(in oklab,var(--navy) 24%,var(--white));flex:none}
.pic-block{min-width:0}
.pic-block > * + *{margin-top:8px}
.pic-block ul,.pic-block ol{margin:0;padding-left:20px}
.pic-block table{width:100%;border-collapse:collapse;table-layout:fixed}
.pic-block th,.pic-block td{text-align:left;padding:5px 6px;border-bottom:1px solid var(--line);vertical-align:top;overflow-wrap:anywhere}
.pic-block th{font-weight:500;color:var(--soft)}
.pic-block h1,.pic-block h2,.pic-block h3,.pic-block h4{font-family:var(--body);font-size:var(--fs-body);font-weight:600;letter-spacing:0;color:var(--navy)}
.pic-key{font-size:var(--h3);line-height:1.4;font-weight:500}
.pic-key strong,.pic-key b{font-weight:600}
/* The thing the answer made, inside its chat window: a form filled in, a letter (SkillPictures.Made) */
.pic-made{margin-top:4px}
.pic-paper.pic-paper-bare{box-shadow:0 0 0 1px var(--line);border-top-width:4px}
.pic-plain .pic-key{font-size:var(--fs-body);font-weight:400}

/* ---------- Document, sheet, tracker and form lines ---------- */
.pic-lines{list-style:none;margin:0;padding:0;display:grid}
.pic-line{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:6px 0;border-top:1px solid var(--line);min-width:0}
.pic-line:first-child{border-top:0}
.pic-text{min-width:0}
.pic-value{font-weight:500;white-space:nowrap}
.pic-l-highlight{background:color-mix(in oklab,var(--marigold) 14%,var(--white));margin:0 -8px;padding:6px 8px;border-radius:6px}
.pic-l-struck .pic-text,.pic-l-struck .pic-value{text-decoration:line-through;text-decoration-color:var(--bad);text-decoration-thickness:2px;color:var(--soft)}
.pic-l-ok .pic-value{color:var(--good)}
.pic-l-no .pic-value,.pic-l-warn .pic-value{color:var(--bad)}
.pic-mk{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;flex:none;font-weight:600;line-height:1}
.pic-mk svg{width:16px;height:16px}
.pic-mk-ok{background:var(--mint);color:var(--good)}
.pic-mk-no{background:color-mix(in oklab,var(--bad) 11%,var(--white));color:var(--bad)}
.pic-mk-warn{background:var(--cream);color:var(--warn)}
.pic-stamp,.pic-pill{font-size:var(--fs-small);font-weight:600;line-height:1.2;padding:4px 12px;border-radius:999px;white-space:nowrap}
.pic-stamp{color:var(--navy);box-shadow:inset 0 0 0 2px var(--navy);transform:rotate(-3deg)}
.pic-pill{background:var(--mint);color:var(--good)}
.pic-circled{justify-self:center;width:fit-content;margin:12px auto 0;padding:4px 18px;border:2.5px solid var(--marigold);border-radius:50%;font-family:var(--display);font-weight:700;font-size:var(--h3);transform:rotate(-3deg);white-space:nowrap}
.pic-steps{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.pic-step{display:grid;grid-template-columns:28px minmax(0,1fr);gap:10px;align-items:start;padding:6px 0}
.pic-step-n{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;font-size:var(--fs-small);font-weight:600;line-height:1}
.pic-step-n svg{width:16px;height:16px}
.pic-step-t{min-width:0}
.pic-step-d{display:block;font-size:var(--fs-small);color:var(--soft)}
.pic-s-done .pic-step-n{background:var(--navy);color:var(--white)}
.pic-s-now .pic-step-n{background:var(--marigold);color:var(--navy)}
.pic-s-now .pic-step-t{font-weight:500}
.pic-s-next .pic-step-n{box-shadow:inset 0 0 0 1.5px color-mix(in oklab,var(--navy) 24%,var(--white));color:var(--soft)}
.pic-s-you .pic-step-n{background:var(--cream);color:var(--navy);box-shadow:inset 0 0 0 1.5px var(--gold-text)}
.pic-fields{display:grid;gap:8px;padding:12px;border-radius:12px;background:var(--mist)}
.pic-fld{display:flex;justify-content:space-between;align-items:center;gap:10px;border:1px solid var(--line);border-radius:10px;padding:5px 10px;background:var(--white);min-width:0}
.pic-fld .pic-text{color:var(--soft)}
.pic-fld-warn{border-color:var(--bad)}
.pic-submit{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:12px}
.pic-fakebtn{display:inline-flex;align-items:center;min-height:38px;padding:0 18px;border-radius:999px;background:var(--navy);color:var(--white);font-weight:500}
.pic-note{font-family:var(--hand);font-weight:700;font-size:var(--h3);line-height:1.1;color:var(--gold-text);transform:rotate(-3deg)}

/* ---------- "Same question, two answers": two radio buttons and :has(), no script ---------- */
.pic-flip{display:inline-grid;grid-template-columns:1fr 1fr;position:relative;padding:5px;border-radius:999px;background:var(--white);box-shadow:inset 0 0 0 1.5px color-mix(in oklab,var(--navy) 24%,var(--white));border:0;margin:0;min-width:0}
.pic-flip legend{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.pic-flip input{position:absolute;opacity:0;width:1px;height:1px}
.pic-flip label{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 20px;border-radius:999px;font-size:var(--fs-body);color:var(--soft);cursor:pointer;white-space:nowrap;transition:color 250ms cubic-bezier(.2,.8,.2,1)}
.pic-flip label svg{width:20px;height:20px}
.pic-flip input:checked + label{color:var(--white)}
.pic-flip input:focus-visible + label{outline:var(--ring-line);outline-offset:2px;box-shadow:var(--ring)}
.pic-flip::before{content:"";position:absolute;top:5px;bottom:5px;left:5px;width:calc(50% - 5px);border-radius:999px;background:var(--navy);transition:transform 250ms cubic-bezier(.2,.8,.2,1)}
.pic-flip:has(input[value="without"]:checked)::before{transform:translateX(100%)}
.pic-fc-label{display:none;font-size:var(--fs-small);font-weight:500;color:var(--soft);margin-bottom:8px}
.pic-fc + .pic-fc{margin-top:16px}
@supports selector(:has(*)){
  .pic-flipper:has(input[value="with"]:checked) .pic-fc-without,
  .pic-flipper:has(input[value="without"]:checked) .pic-fc-with{display:none}
  .pic-fc + .pic-fc{margin-top:0}
}
@supports not selector(:has(*)){ .pic-fc-label{display:block} .pic-flip{display:none} }

/* Trilly's score for a flip's pair (_FlipScore; moved from home.css for the doors, set 2's review H1): navy on a light field, and
   in a navy band (the home's proof band) white, as it always was there. */
.pic-score{display:grid;grid-template-columns:auto auto auto;gap:10px 16px;align-items:center;max-width:30rem;color:var(--navy)}
.pic-score-who{font-size:var(--fs-small)}
.pic-score-dots{display:flex;gap:6px}
.pic-score-dots i{width:14px;height:14px;border-radius:50%;border:2px solid var(--navy)}
.pic-score-dots i.on{background:var(--marigold)}
.pic-score-n{font-family:var(--display);font-weight:700;font-size:var(--h3);line-height:1;white-space:nowrap}
.pic-score-off{color:var(--soft)}
.night .pic-score{color:var(--white)}
.night .pic-score-dots i{border-color:var(--on-navy-soft)}
.night .pic-score-off{color:var(--on-navy-soft)}

/* ---------- Motion: the answer builds once (about 2 seconds), then rests ---------- */
@keyframes pic-rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:no-preference){
  .pic-builds .pic-chip,.pic-builds .pic-block{animation:pic-rise 600ms cubic-bezier(.2,.8,.2,1) both}
  .pic-builds .pic-chip{animation-delay:300ms}
  .pic-builds .pic-block:nth-child(2){animation-delay:700ms}
  .pic-builds .pic-block:nth-child(3){animation-delay:1100ms}
  .pic-builds .pic-block:nth-child(n+4){animation-delay:1500ms}
  .pic-builds .pic-made{animation:pic-rise 600ms cubic-bezier(.2,.8,.2,1) 600ms both}
  @supports selector(:has(*)){ .pic-fc{animation:pic-rise 250ms cubic-bezier(.2,.8,.2,1)} }
}

/* ---------- Phones: composed, not shrunk ---------- */
@media (max-width:760px){
  .pic-field{border-radius:var(--r-lg);padding:32px 18px 36px}
  .pic-win{padding:18px 16px 18px;border-radius:22px}
  .pic-paper{padding:14px 16px 16px}
  .pic-wide{display:none!important}
  .pic-key{font-size:var(--fs-body);font-weight:500}
  .pic-flip{display:grid;width:100%}
  .pic-flip label{padding:0 8px}
  .pic-flip label svg{display:none}
  .pic-score{grid-template-columns:auto 1fr;gap:6px 14px}
  .pic-score-who{grid-column:1/-1;margin-top:6px}
  .pic-score-dots{gap:4px}
  .pic-score-dots i{width:12px;height:12px}
}

/* ---------- The fold (calm batch G): a line, its words and a plus that turns; the rest a press away ---------- */
.sk-folds{display:grid}
.sk-fold{border-top:1px solid var(--line)}
.sk-folds > .sk-fold:last-child{border-bottom:1px solid var(--line)}
.sk-fold > summary{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:60px;cursor:pointer;list-style:none;font-weight:500;color:var(--navy)}
.sk-fold > summary::-webkit-details-marker{display:none}
.sk-fold > summary .ui-ico{width:20px;height:20px;flex:none;transition:transform 250ms cubic-bezier(.2,.8,.2,1)}
.sk-fold[open] > summary .ui-ico{transform:rotate(45deg)}
.sk-fold-body{padding:0 0 24px;display:grid;gap:12px;color:var(--ink);min-width:0}

/* ---------- The replay (#190; ReplayView.cs): Trilly's recorded test, played back run by run. Results only. ---------- */
.replay{margin:0;background:var(--white);border-radius:var(--r-lg);padding:22px 24px 24px;box-shadow:0 44px 80px -44px rgba(13,44,84,.34),0 2px 6px rgba(13,44,84,.07);color:var(--navy)}
.replay-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;margin-bottom:16px}
.replay-board{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px 20px;align-items:center}
.replay-col{display:flex;align-items:center;gap:8px;font-size:var(--fs-small);font-weight:600;color:var(--navy);white-space:nowrap}
.replay-col svg{width:22px;height:22px;flex:none}
.replay-col-with{grid-column:1}
.replay-col-plain{grid-column:2;color:var(--soft)}
.replay-task{grid-column:1 / -1;min-width:0;padding-top:12px;border-top:1px solid var(--line)}
.replay-title{font-weight:500}
.replay-rule{color:var(--soft)}
.replay-runs{display:flex;flex-wrap:wrap;gap:6px;align-self:center}
.replay-runs-with{grid-column:1}
.replay-runs-plain{grid-column:2}
.replay-run{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%}
.replay-run svg{width:16px;height:16px}
.replay-ok{background:var(--mint);color:var(--good)}
.replay-no{background:color-mix(in oklab,var(--bad) 11%,var(--white));color:var(--bad)}
.replay-total{display:grid;gap:2px}
.replay-total b{font-family:var(--display);font-weight:700;font-size:var(--fs-num);line-height:1;font-variant-numeric:tabular-nums}
.replay-total-note{grid-column:1 / -1;padding-top:12px;border-top:2px solid var(--navy);color:var(--soft)}
.replay-total-with{grid-column:1}
.replay-total-plain{grid-column:2;color:var(--soft)}
@keyframes replay-pop{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}
/* Armed by js/replay.js (motion allowed): the results wait, out of sight, until the replay plays. */
.replay.is-armed:not(.is-playing) .replay-run,.replay.is-armed:not(.is-playing) .replay-total{opacity:0}
@media (prefers-reduced-motion:no-preference){
  .replay.is-playing .replay-run,.replay.is-playing .replay-total{animation:replay-pop 300ms cubic-bezier(.3,1.45,.55,1) both}
  .replay.is-playing .replay-total{animation-name:pic-rise}
  .replay.is-playing .rd-1{animation-delay:.2s} .replay.is-playing .rd-2{animation-delay:.4s} .replay.is-playing .rd-3{animation-delay:.6s}
  .replay.is-playing .rd-4{animation-delay:.8s} .replay.is-playing .rd-5{animation-delay:1s} .replay.is-playing .rd-6{animation-delay:1.2s}
  .replay.is-playing .rd-7{animation-delay:1.4s} .replay.is-playing .rd-8{animation-delay:1.6s} .replay.is-playing .rd-9{animation-delay:1.8s}
  .replay.is-playing .rd-10{animation-delay:2s} .replay.is-playing .rd-11{animation-delay:2.2s} .replay.is-playing .rd-12{animation-delay:2.4s}
  .replay.is-playing .rd-13{animation-delay:2.6s} .replay.is-playing .rd-14{animation-delay:2.8s} .replay.is-playing .rd-15{animation-delay:3s}
  .replay.is-playing .rd-16{animation-delay:3.2s} .replay.is-playing .rd-17{animation-delay:3.4s} .replay.is-playing .rd-18{animation-delay:3.6s}
  .replay.is-playing .rd-19{animation-delay:3.8s} .replay.is-playing .rd-20{animation-delay:4s} .replay.is-playing .rd-21{animation-delay:4.2s}
  .replay.is-playing .rd-22{animation-delay:4.4s} .replay.is-playing .rd-23{animation-delay:4.6s} .replay.is-playing .rd-24{animation-delay:4.8s}
  .replay.is-playing .rd-25{animation-delay:5s}
}
@media (max-width:760px){
  .replay{padding:18px 16px 20px;border-radius:22px}
  /* The date as a caption line, not a pill on two lines, and each answer's name on one line above its ticks (the design
     re-review r4, polish 4). */
  .replay-head .pic-tag{padding:0;background:none;box-shadow:none;color:var(--soft)}
  .replay-board{grid-template-columns:auto auto;gap:10px 12px}
  .replay-col{gap:6px}
  .replay-col .pic-dot{width:18px;height:18px}
}
@media (max-width:370px){ .replay-col{white-space:normal} }
@media (forced-colors:active){ .replay{border:1px solid CanvasText} }

/* Windows high contrast: the boxes keep an edge, the switch a visible mark */
@media (forced-colors:active){
  .pic-win,.pic-paper,.pic-field,.pic-tag{border:1px solid CanvasText}
  .pic-flip::before{background:Highlight}
}