/* MatchPoint Kids · our own clean look, round 2 (4 Nov, Joshua: "I do like the Duolingo one, but… slightly tweak it so that it doesn't
   feel too much like Duolingo. Keep the style we already have, more minimal and simple"). html.duo2 (design/ux2.js: ?duo=2).
   Keeps what made round 1 calm (flat, no shadows or shine, things you can press, white lessons) but built from MatchPoint's parts:
   · pill buttons in normal case (not boxes in capitals), solid purple with a slim darker edge that sinks when tapped
   · white cards with a hairline and a slim lavender edge, on our soft page (not grey edges on pure white)
   · tennis colours, not lime/red/blue: picked = purple, right = court green, not quite = soft clay
   · the result is our rounded sheet with Carlos; the progress bar carries a tennis ball
   Home's layout, the road and the tab bar stay as they are. Loaded after ds.css. */

html.duo2{
  --mp-page:#F7F6FB;
  --mp-line:#ECEAF4;                       /* card hairline */
  --mp-edge:#E2DEF0;                       /* the slim edge under a card */
  --mp-card:0 0 0 1.5px var(--mp-line) inset,0 3px 0 var(--mp-edge);
  --mp-press:3px;
  --mp-court:#19A463;--mp-court-edge:#11804B;--mp-court-tint:#E8F7EF;--mp-court-ring:#A7E2C4;
  --mp-clay:#EE7D45;--mp-clay-edge:#C95E2A;--mp-clay-tint:#FFF1E8;--mp-clay-ring:#FFCDAE;
  --mp-pick:#6D49FF;--mp-pick-tint:#F3EFFF;--mp-pick-ring:#C3B3FF;
  --mp-ball:#D8F23B;
  --ds-page:var(--mp-page);
  --ds-border:1.5px;--ds-line:var(--mp-line);--ds-shadow:0 3px 0 var(--mp-edge);
  --ds-shadow-lift:0 4px 0 rgba(40,20,120,.18);
  --ds-btn-bg:#6D49FF;--ds-btn-edge:0 3px 0 #5130D9;
  --ds-btn2-bg:#fff;--ds-btn2-fg:var(--ds-ink);--ds-btn2-edge:0 0 0 1.5px var(--mp-line) inset,0 3px 0 var(--mp-edge);
  --ds-btn-depth:3px;
  --ds-grad-purple:linear-gradient(#6D49FF,#6D49FF);
  --ds-grad-blue:linear-gradient(#3D7BF2,#3D7BF2);
  --ds-grad-green:linear-gradient(#19A463,#19A463);
  --ds-grad-orange:linear-gradient(#F58A2E,#F58A2E);
  --ds-grad-pink:linear-gradient(#F0508E,#F0508E);
  --ds-grad-teal:linear-gradient(#12AFA8,#12AFA8);
  --ds-grad-navy:linear-gradient(#1B2A55,#1B2A55)
}

/* our soft page; lessons and pop-ups are white */
html.duo2 .app{background:var(--mp-page) !important}
html.duo2 .flow,html.duo2 .sheet{background:#fff !important;background-image:none !important}

/* white cards: hairline + slim edge, no soft shadow */
html.duo2 :is(.j4,.f4,.mc-tease,.rsign,.mycoach,.j3next,.m6-ask,.m6-qk button,.m6-pb,.jn-quick button,.jn-row,
  .pf-tro,.tkrow,.prog2,.rv,.grown,.ki-card,.tcard,.tcard li,.dr-card,.chs.ic){background:#fff;box-shadow:var(--mp-card) !important}
html.duo2 :is(.mc-tease,.m6-qk button,.jn-quick button,.jn-row,.pf-tro,.rv,.opts>button){transition:transform .08s,box-shadow .08s}
html.duo2 :is(.mc-tease,.m6-qk button,.jn-quick button,.jn-row,.pf-tro,.rv):active{transform:translateY(var(--mp-press));box-shadow:0 0 0 1.5px var(--mp-line) inset !important}

/* no moving shine; colour cards are one solid colour with an edge in their own colour */
html.duo2 :is(.tod.t4,.j4,.dyk.d4)::after{display:none !important}
html.duo2 .tod.t4{background:var(--g,#6D49FF) !important;box-shadow:0 4px 0 var(--g-edge,#5130D9) !important}
html.duo2 .dyk.d4{box-shadow:0 4px 0 rgba(0,0,0,.14) !important}
html.duo2 .m5-t.o{background:#F58A2E !important;box-shadow:0 4px 0 #CF6A14 !important}
html.duo2 .m5-t.b{background:#3D7BF2 !important;box-shadow:0 4px 0 #2A5CC9 !important}
html.duo2 .pf{background:#3D7BF2 !important;box-shadow:0 4px 0 #2A5CC9 !important}
html.duo2 .lkr{box-shadow:0 4px 0 rgba(0,0,0,.16) !important}

/* buttons: pills keep their round ends and normal case; solid, slim edge, sink when pressed */
html.duo2 .b3,html.duo2 .j4-go{transition:transform .08s,box-shadow .08s}
html.duo2 .j4-go{background:var(--mp-court) !important;box-shadow:0 3px 0 var(--mp-court-edge) !important}
html.duo2 .b3:active:not([disabled]),html.duo2 .j4-go:active{transform:translateY(var(--mp-press)) !important;box-shadow:none !important}
html.duo2 .b3[disabled]{background:#ECEAF4 !important;color:#A9A6C2 !important;box-shadow:none !important}

/* tab bar: no shadow, a hairline on top (its own icons and dot stay) */
html.duo2 .tabs{box-shadow:none !important;border-top:1.5px solid var(--mp-line)}

/* ---------- lessons ---------- */
html.duo2 .flow .x{box-shadow:var(--mp-card) !important}
html.duo2 .flow .kick{box-shadow:none !important}
/* the progress bar carries a tennis ball */
html.duo2 .flow .pb{height:12px;border-radius:99px;background:var(--mp-line);overflow:visible}
html.duo2 .flow .pb i{height:100%;border-radius:99px;background:var(--mp-court) !important;position:relative;min-width:12px}
html.duo2 .flow .pb i::after{content:"";position:absolute;right:-9px;top:50%;width:20px;height:20px;margin-top:-10px;border-radius:50%;
  background:radial-gradient(circle at 50% -40%,transparent 58%,#fff 60%,#fff 66%,transparent 68%),radial-gradient(circle at 50% 140%,transparent 58%,#fff 60%,#fff 66%,transparent 68%),var(--mp-ball);
  box-shadow:0 2px 0 #B5CC22}
/* answers */
html.duo2 .opts>button{background:#fff !important;box-shadow:var(--mp-card) !important}
html.duo2 .opts>button:active{transform:translateY(var(--mp-press))}
html.duo2 .opts>button em{background:var(--mp-page) !important;color:#8E8AAE !important}
html.duo2 .opts>button.on{background:var(--mp-pick-tint) !important;box-shadow:0 0 0 2px var(--mp-pick-ring) inset,0 3px 0 var(--mp-pick-ring) !important;color:#4B2BC7}
html.duo2 .opts>button.on em{background:var(--mp-pick) !important;color:#fff !important}
html.duo2 .opts>button.ok{background:var(--mp-court-tint) !important;box-shadow:0 0 0 2px var(--mp-court-ring) inset,0 3px 0 var(--mp-court-ring) !important;color:var(--mp-court-edge) !important}
html.duo2 .opts>button.ok em{background:var(--mp-court) !important;color:#fff !important}
html.duo2 .opts>button.bad{background:var(--mp-clay-tint) !important;box-shadow:0 0 0 2px var(--mp-clay-ring) inset,0 3px 0 var(--mp-clay-ring) !important;color:var(--mp-clay-edge) !important}
/* the result: our rounded sheet with Carlos, in court green or soft clay; its button follows */
html.duo2 .fban{box-shadow:0 -1.5px 0 var(--mp-line) !important}
html.duo2 .fban.ok{background:var(--mp-court-tint) !important;--ds-btn-bg:var(--mp-court);--ds-btn-edge:0 3px 0 var(--mp-court-edge)}
html.duo2 .fban.ok .fb-h b{color:var(--mp-court-edge) !important}
html.duo2 .fban.ok .fb-why{color:#2E7D57 !important}
html.duo2 .fban.no{background:var(--mp-clay-tint) !important;--ds-btn-bg:var(--mp-clay);--ds-btn-edge:0 3px 0 var(--mp-clay-edge)}
html.duo2 .fban.no .fb-h b{color:var(--mp-clay-edge) !important}
html.duo2 .fban.no .fb-why{color:#A2532B !important}