/* MatchPoint Kids · "pressable" look (4 Nov, Joshua after his Duolingo screenshots: "a really minimal style… then they use the
   characters to add some fun". Home's layout and the road stay as they are; this changes the pieces).
   html.duo switches it on (design/ux2.js: ?duo=1 on, ?duo=0 off; duo-compare.html shows both).
   · white page; cards are flat with a 2px line and a 4px bottom edge, no soft shadows
   · buttons are solid colour with a darker bottom edge and sink when pressed
   · colour cards are solid (no gradients) with a darker edge in their own colour
   · lessons: white screen, thick progress bar, answers as pressable tiles, a flat green/red result bar
   Most of it is the ds.css tokens; the rest points older pieces at the same look. Loaded after ds.css. */

html.duo{
  --duo-line:#E5E5EF;                     /* card line and bottom edge */
  --duo-card:0 0 0 2px var(--duo-line) inset,0 4px 0 var(--duo-line);
  --duo-press:4px;
  --ds-page:#fff;
  --ds-r-btn:16px;--ds-r-md:18px;--ds-r-lg:22px;
  --ds-border:2px;--ds-line:var(--duo-line);--ds-shadow:0 4px 0 var(--duo-line);
  --ds-shadow-lift:0 5px 0 rgba(11,16,33,.18);
  --ds-btn-bg:#7A5BFF;--ds-btn-edge:0 4px 0 #5634D8;
  --ds-btn2-bg:#fff;--ds-btn2-fg:var(--ds-ink);--ds-btn2-edge:0 0 0 2px var(--duo-line) inset,0 4px 0 var(--duo-line);
  --ds-btn-depth:4px;
  --ds-grad-purple:linear-gradient(#7A5BFF,#7A5BFF);
  --ds-grad-blue:linear-gradient(#3F8CFF,#3F8CFF);
  --ds-grad-green:linear-gradient(#22C16B,#22C16B);
  --ds-grad-orange:linear-gradient(#FF9F1C,#FF9F1C);
  --ds-grad-pink:linear-gradient(#FF5E9C,#FF5E9C);
  --ds-grad-teal:linear-gradient(#17BDB5,#17BDB5);
  --ds-grad-navy:linear-gradient(#1B2A55,#1B2A55)
}

/* white page (the road keeps its own scene) */
html.duo .app,html.duo .flow,html.duo .sheet,html.duo .cs{background:#fff !important}
html.duo .flow{background-image:none !important}

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

/* no moving shine around the edges of cards (journey-fx) */
html.duo :is(.tod.t4,.j4,.dyk.d4)::after{display:none !important}

/* colour cards: solid, with an edge in their own colour */
html.duo .tod.t4{box-shadow:0 5px 0 var(--g-edge,#5634D8) !important}
html.duo .tod.t4,html.duo .tod.t4 .tod-b{background-image:none}
html.duo .tod.t4{background:var(--g,#7A5BFF) !important}
html.duo .dyk.d4{box-shadow:0 5px 0 rgba(0,0,0,.16) !important}
html.duo .m5-t.o{background:#FF9F1C !important;box-shadow:0 5px 0 #D97C00 !important}
html.duo .m5-t.b{background:#3F8CFF !important;box-shadow:0 5px 0 #2A6AD6 !important}
html.duo .pf{background:#3F8CFF !important;box-shadow:0 5px 0 #2A6AD6 !important}
html.duo .lkr{box-shadow:0 5px 0 rgba(0,0,0,.18) !important}

/* buttons: solid, darker edge, sink when pressed */
html.duo .b3,html.duo .j4-go{transition:transform .08s,box-shadow .08s}
html.duo .j4-go{background:#22C16B !important;box-shadow:0 4px 0 #189A54 !important;border-radius:14px}
html.duo .b3:active:not([disabled]),html.duo .j4-go:active{transform:translateY(var(--duo-press)) !important;box-shadow:none !important}
html.duo .b3[disabled]{background:#E5E5EF !important;color:#AFAFC0 !important;box-shadow:none !important}

/* tab bar: flat, a line on top, the open tab in a tinted tile */
html.duo .tabs{box-shadow:none !important;border-top:2px solid var(--duo-line)}
html.duo .tabs button.on .ti{background:#EEF7FF !important;box-shadow:0 0 0 2px #9ED3FB inset !important}

/* ---------- lessons ---------- */
html.duo .flow .x{background:none !important;box-shadow:none !important;color:#AFAFC0}
html.duo .flow .pb{height:16px;border-radius:99px;background:#E5E5EF}
html.duo .flow .pb i{height:100%;border-radius:99px;background:#FF9F1C !important;position:relative}
html.duo .flow .pb i::after{content:"";position:absolute;left:8px;right:8px;top:4px;height:4px;border-radius:9px;background:rgba(255,255,255,.4)}
html.duo .flow .kick{background:none !important;box-shadow:none !important;padding:0 !important;color:#7A5BFF;letter-spacing:.06em}
html.duo .opts>button{border-radius:16px !important;background:#fff !important;box-shadow:var(--duo-card) !important;transition:transform .08s,box-shadow .08s}
html.duo .opts>button:active{transform:translateY(var(--duo-press))}
html.duo .opts>button em{background:#fff !important;box-shadow:0 0 0 2px var(--duo-line) inset;color:#AFAFC0 !important;border-radius:9px}
html.duo .opts>button.on{background:#EEF7FF !important;box-shadow:0 0 0 2px #84D8FF inset,0 4px 0 #84D8FF !important;color:#1899D6}
html.duo .opts>button.on em{box-shadow:0 0 0 2px #84D8FF inset;color:#1899D6 !important}
html.duo .ki-why{background:#F6F3FF}
/* after Check: the right answer goes green, a wrong pick goes red */
html.duo .opts>button.ok{background:#D7FFB8 !important;box-shadow:0 0 0 2px #A5ED6E inset,0 4px 0 #A5ED6E !important;color:#58A700 !important}
html.duo .opts>button.ok em{background:#58CC02 !important;box-shadow:none;color:#fff !important}
html.duo .opts>button.no,html.duo .opts>button.bad{background:#FFDFE0 !important;box-shadow:0 0 0 2px #FFB2B2 inset,0 4px 0 #FFB2B2 !important;color:#EA2B2B !important}

/* the result bar: flat green or red across the bottom, its button in the same colour */
html.duo .fban{border-radius:0 !important;box-shadow:none !important}
html.duo .fban.ok{background:#D7FFB8 !important}
html.duo .fban.ok .fb-h b,html.duo .fban.ok .fb-why{color:#58A700 !important}
html.duo .fban.ok{--ds-btn-bg:#58CC02;--ds-btn-edge:0 4px 0 #58A700}
html.duo .fban.no{background:#FFDFE0 !important}
html.duo .fban.no .fb-h b,html.duo .fban.no .fb-why{color:#EA2B2B !important}
html.duo .fban.no{--ds-btn-bg:#FF4B4B;--ds-btn-edge:0 4px 0 #EA2B2B}