/* MatchPoint Kids design system: components. Needs tokens.css first.
   Built from Joshua's Figma "What went well today?" screen (node 45:120). Every class starts with mp- so it can sit beside kids.css. */

/* ---------- screen: the purple question screen ---------- */
.mp-screen{position:relative;display:flex;flex-direction:column;min-height:100%;background:var(--mp-screen-bg);font-family:var(--mp-font);color:var(--mp-on-purple);overflow:hidden;
  padding:max(40px, calc(env(safe-area-inset-top) + 4px)) var(--mp-gutter) calc(env(safe-area-inset-bottom) + 18px)}
.mp-screen *{box-sizing:border-box}
.mp-screen button{font-family:inherit;border:0;cursor:pointer;-webkit-tap-highlight-color:transparent}

/* ---------- top row: back button + steps ---------- */
.mp-top{position:relative;z-index:2;display:flex;align-items:center;justify-content:center;height:var(--mp-back-size)}
.mp-back{position:absolute;left:11px;top:0;width:var(--mp-back-size);height:var(--mp-back-size);border-radius:50%;background:var(--mp-glass-16);display:grid;place-items:center;transition:transform var(--mp-press)}
.mp-back svg{width:100%;height:100%}
.mp-back:active{transform:scale(.92)}

/* steps: done = green tick · now = tennis ball in a soft halo · still to come = glass. Lines join them. */
.mp-steps{display:flex;align-items:center}
.mp-step{position:relative;width:20px;height:20px;border-radius:50%;flex:none;background:var(--mp-glass-30)}
.mp-step.is-done{background:var(--mp-success);box-shadow:0 0 0 2px #fff}
.mp-step.is-done svg{position:absolute;inset:4px;width:12px;height:12px}
.mp-step.is-now{background:var(--mp-ball);box-shadow:0 0 0 2px #fff,0 0 0 6px var(--mp-glass-20)}
.mp-step.is-now svg{position:absolute;inset:0;width:20px;height:20px}
.mp-step-line{width:14.5px;height:2px;background:var(--mp-glass-30)}
.mp-step-line.is-done{background:#fff}

/* ---------- hero: a big 3D picture standing on the purple, with a soft shadow under it ---------- */
.mp-hero{position:relative;height:202px;margin:0 calc(-1 * var(--mp-gutter))}
.mp-hero-bg{position:absolute;left:50%;top:-50px;width:396px;max-width:none;height:264px;transform:translateX(-50%);object-fit:cover;opacity:.7;mix-blend-mode:lighten;pointer-events:none;-webkit-mask-image:linear-gradient(transparent,#000 24%,#000 52%,transparent 80%);mask-image:linear-gradient(transparent,#000 24%,#000 52%,transparent 80%)}
.mp-hero-main{position:absolute;left:50%;top:var(--ht,19px);width:var(--hw,238px);transform:translateX(-50%);z-index:1}   /* --hw / --ht: a pose's own size and place (from the Figma frame) */
.mp-hero-main img{display:block;width:100%}
.mp-hero-main .mp-shadow{position:absolute;left:21%;bottom:-1px;width:43%;z-index:-1}
.mp-hero-side{position:absolute;left:3px;top:94px;width:108px;z-index:0}
.mp-hero-side img{display:block;width:100%}
.mp-hero-side .mp-shadow{position:absolute;left:18%;bottom:4px;width:58%;z-index:-1}
/* the soft fade at the bottom of the hero (Joshua's Figma, "Rectangle 21"): Carlos and the basket stay fully solid; a short rectangle
   lies over their bottom edge, see-through at the top and the screen's purple (#663DFA) at the bottom, so there's no hard cut line.
   Sizes from the Figma: over Carlos it is 8.6% of the picture's height, over the basket 14%. */
.mp-hero-fade{position:absolute;bottom:-1px;z-index:2;pointer-events:none;background:linear-gradient(180deg,rgba(102,61,250,0) 0%,rgba(102,61,250,.3) 42%,rgba(102,61,250,.82) 72%,#663DFA 90%);-webkit-mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent)}
.mp-hero-main .mp-hero-fade{left:-14%;right:-14%;height:20%}
.mp-hero-side .mp-hero-fade{left:-10%;right:-10%;height:30%}

/* ---------- question ---------- */
.mp-title{margin:0;font-size:var(--mp-display-size);line-height:var(--mp-display-line);font-weight:var(--mp-display-weight);letter-spacing:var(--mp-display-track);text-align:center;text-wrap:balance}
.mp-helper{margin:4px 0 0;font-size:var(--mp-helper-size);line-height:var(--mp-helper-line);font-weight:var(--mp-helper-weight);color:var(--mp-on-purple-soft);text-align:center}

/* ---------- answer tiles: two to a row, white with a grey lip; a picture on the left; ticked when chosen ---------- */
.mp-tiles{display:grid;grid-template-columns:1fr 1fr;gap:var(--mp-gap-y) var(--mp-gap-x);margin-top:18px}
.mp-tile{position:relative;height:var(--mp-tile-h);padding:0 10px 0 71px;border-radius:var(--mp-radius-tile);background:var(--mp-tile-bg);
  box-shadow:0 0 0 var(--mp-rim) var(--mp-tile-rim) inset,0 var(--mp-lip) 0 var(--mp-tile-lip);color:var(--mp-ink);text-align:left;
  font-size:var(--mp-label-size);line-height:var(--mp-label-line);font-weight:var(--mp-label-weight);letter-spacing:var(--mp-label-track);transition:transform var(--mp-press),box-shadow var(--mp-press)}
.mp-tile:active{transform:translateY(calc(var(--mp-lip) - var(--mp-lip-pressed)));box-shadow:0 0 0 var(--mp-rim) var(--mp-tile-rim) inset,0 var(--mp-lip-pressed) 0 var(--mp-tile-lip)}
.mp-tile.is-wide{grid-column:1/-1;padding:0;display:flex;align-items:center;justify-content:center;gap:10px}
/* the picture: sits in the left of the tile, standing on its bottom edge (it may peek out a little, like the Figma) */
.mp-tile-pic{position:absolute;left:4px;bottom:3px;width:60px;height:42px;object-fit:contain;object-position:50% 100%;pointer-events:none}
.mp-tile-pic.is-wide-pic{left:-2px;width:74px;height:40px}
.mp-tile.is-wide .mp-tile-pic{position:static;width:36px;height:36px}
/* chosen: the tile turns pale green with a green rim and lip, and a green tick pops into the top-right corner */
.mp-tile.is-on{background:var(--mp-tile-on-bg);box-shadow:0 0 0 2px var(--mp-tile-on-rim) inset,0 var(--mp-lip) 0 var(--mp-tile-on-lip)}
.mp-tile.is-on:active{box-shadow:0 0 0 2px var(--mp-tile-on-rim) inset,0 var(--mp-lip-pressed) 0 var(--mp-tile-on-lip)}
.mp-tick{position:absolute;right:8px;top:6px;width:var(--mp-tick-size);height:var(--mp-tick-size);opacity:0;transform:scale(.4);transition:opacity .15s,transform .3s var(--mp-pop)}
.mp-tile.is-on .mp-tick{opacity:1;transform:none}

/* ---------- the green button ---------- */
.mp-go{position:relative;display:flex;align-items:center;justify-content:center;width:calc(100% - 10px);height:var(--mp-button-h);margin:auto 5px 0;border-radius:var(--mp-radius-button);
  background:var(--mp-go-bg);box-shadow:0 0 0 var(--mp-rim) var(--mp-go-rim) inset,0 var(--mp-lip) 0 var(--mp-go-lip);color:#fff;
  font-size:var(--mp-button-size);font-weight:var(--mp-button-weight);transition:transform var(--mp-press),box-shadow var(--mp-press),filter .2s}
.mp-go svg{position:absolute;right:30px;width:8px;height:13px}
.mp-go:active{transform:translateY(calc(var(--mp-lip) - var(--mp-lip-pressed)));box-shadow:0 0 0 var(--mp-rim) var(--mp-go-rim) inset,0 var(--mp-lip-pressed) 0 var(--mp-go-lip)}
.mp-go[disabled]{filter:saturate(.25) brightness(1.1);opacity:.55;cursor:default}
.mp-go[disabled]:active{transform:none}

/* ---------- added for the check-in in the app (28 Oct) ---------- */
/* Skip, top right */
.mp-skip{position:absolute;right:6px;top:0;height:var(--mp-back-size);padding:0 10px;background:none;color:var(--mp-on-purple-soft);font-size:16px;font-weight:800}
/* a small greeting above the question */
.mp-greet{margin:0 0 4px;font-size:var(--mp-helper-size);font-weight:800;color:var(--mp-on-purple-soft);text-align:center}
/* the white partner of the green button ("Not lately", "No, not today") */
.mp-alt{display:flex;align-items:center;justify-content:center;width:calc(100% - 10px);height:var(--mp-button-h);margin:12px 5px 0;border-radius:var(--mp-radius-button);background:var(--mp-tile-bg);
  box-shadow:0 0 0 var(--mp-rim) var(--mp-tile-rim) inset,0 var(--mp-lip) 0 var(--mp-tile-lip);color:var(--mp-ink);font-size:18px;font-weight:900;transition:transform var(--mp-press),box-shadow var(--mp-press)}
.mp-alt:active{transform:translateY(calc(var(--mp-lip) - var(--mp-lip-pressed)));box-shadow:0 0 0 var(--mp-rim) var(--mp-tile-rim) inset,0 var(--mp-lip-pressed) 0 var(--mp-tile-lip)}
/* the helper line flashes white and wiggles when a fourth tile is tapped */
.mp-helper.is-limit{color:#fff;animation:mpNo .4s}
@keyframes mpNo{20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}
/* typing box: "Something else" and the coach's tip */
.mp-note{display:block;width:100%;margin-top:12px;padding:12px 14px;border:0;border-radius:var(--mp-radius-tile);background:var(--mp-tile-bg);box-shadow:0 0 0 2px var(--mp-tile-on-rim) inset;
  font:800 16px/1.35 var(--mp-font);color:var(--mp-ink);resize:none;outline:none}
.mp-note::placeholder{color:#8A8FA8;font-weight:700}
/* suggestion chips under a question */
.mp-chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:16px}
.mp-chips button{padding:9px 14px;border-radius:99px;background:var(--mp-glass-20);color:#fff;font-size:15px;font-weight:800;box-shadow:0 0 0 1px var(--mp-glass-30) inset;transition:transform var(--mp-press)}
.mp-chips button:active{transform:scale(.95)}
.mp-chips button.is-on{background:#fff;color:var(--mp-ink)}
/* the scrolling middle of a check-in screen, so short phones can still reach every tile */
.mp-body{flex:1;min-height:0;display:flex;flex-direction:column;overflow-y:auto;margin:0 calc(-1 * var(--mp-gutter));padding:0 var(--mp-gutter) 6px;scrollbar-width:none}
.mp-body::-webkit-scrollbar{display:none}
.mp-foot{flex:none;padding-top:12px}
/* a bigger hero when the screen only asks a yes/no question */
.mp-hero.is-big{height:300px}.mp-hero.is-big .mp-hero-bg{top:-20px;height:330px;width:500px}.mp-hero.is-big .mp-hero-main{width:320px;top:24px}.mp-hero.is-big .mp-hero-side{width:130px;top:150px;left:-4px}
@media (max-height:760px){.mp-hero.is-big{height:230px}.mp-hero.is-big .mp-hero-main{width:250px}.mp-hero.is-big .mp-hero-side{width:96px;top:120px}.mp-hero{height:150px}.mp-hero-main{width:calc(var(--hw,238px) * .756);top:calc(var(--ht,19px) * .42)}.mp-hero-side{width:80px;top:64px}}

@media (prefers-reduced-motion:reduce){.mp-tick,.mp-tile,.mp-go,.mp-back{transition:none}}