/* Joshua's Home tweaks (4 Nov, Figma 156:330 kids · 164:507 grown-up, black). Replaces home5.css; loaded after home4.css.
   Figma is drawn at 4.5× a phone, so every size here = his number ÷ 4.5.
   · "Let's Go, Danny!" instead of "Today"
   · labels lose their pills: an icon + small caps (🎾 tip, map = Continue journey, journal = My weekly focus, 🤓 Did you know)
   · no chunky lip shadows: colour cards get a 10% white edge, white cards a soft shadow, a hairline under each card's label row
   · the bear stands inside the tip card, cut off by its bottom edge
   · My weekly focus is a short checklist with "Add new" (home6.js) */

html.pm4 body,html.pm4 .app,html.pm4 .scroll{background:#ECECF5}
html.pm4 #app[data-tab=home] .td-h{font-size:26.7px;font-weight:800;line-height:1.1;letter-spacing:-.02em;color:#0B1021}
html.pm4 .hm.r4>*+*{margin-top:19px}
html.pm4 #app .bar.td .td-av{display:none}   /* no player photo top right for now (5 Nov, Joshua) */

/* labels: no pill, icon + small caps */
html.pm4 .c4-pill,html.pm4 .c4-pill.w,html.pm4 .c4-pill.g,html.pm4 .c4-pill.o{height:24px;padding:0;gap:5px;background:none;font-size:11.2px;font-weight:800;letter-spacing:.02em;color:#0B1021}
html.pm4 .c4-pill.w{color:#fff}
html.pm4 .c4-pill>span{font-size:14px}
html.pm4 .c4-pill img{width:22px;height:22px;object-fit:contain}
html.pm4 .c4-link{font-size:13.3px;font-weight:700;color:#6B6E99}
html.pm4 .j4 .c4-hd,html.pm4 .f4 .c4-hd{margin:0 3px}   /* no rule under the label (5 Nov, Joshua: the other cards have no lines) */

/* ---------- Tip of the day ---------- */
html.pm4 .tod.t4{border:1.8px solid rgba(255,255,255,.1);border-radius:22px;overflow:hidden;box-shadow:none !important}
html.pm4 .t4 .tod-b{padding:18px 20px 0;min-height:305px}
html.pm4 .t4 .tod-t{margin-top:6px;font-size:21.8px;line-height:1.23}
html.pm4 .t4-sub{margin-top:4px;font-size:13.6px;font-weight:500;line-height:1.5;letter-spacing:-.02em;color:rgba(255,255,255,.6)}
html.pm4 .t4-art{width:298px;max-width:100%;height:148px;margin:8px auto 0;object-fit:cover;object-position:center top}

/* ---------- Continue journey + My weekly focus: white, soft shadow, no lip ---------- */
html.pm4 .j4,html.pm4 .f4{border-radius:18px;box-shadow:0 1px 3px rgba(191,191,208,.35)}
html.pm4 .j4{padding:15px 18px 16px}
html.pm4 .j4-row{margin-top:12px}
html.pm4 .j4-pic{height:122px}
html.pm4 .f4{padding:15px 18px 17px}
html.pm4 .f4-it{gap:8px;margin-top:8px;padding-left:4px}
html.pm4 .f4 .c4-hd+.f4-it{margin-top:10px}
html.pm4 .f4-ck{width:18px;height:18px;margin-top:2.5px}
html.pm4 .f4-tx{font-size:15.6px;line-height:1.45;font-weight:700}
html.pm4 .f6-new{cursor:text}
html.pm4 .f6-in{flex:1;min-width:0;height:23px;padding:0;border:0;outline:0;background:none;font:inherit;font-size:15.6px;font-weight:700;letter-spacing:-.02em;color:#0B1021}
html.pm4 .f6-in::placeholder{color:#0B1021;opacity:.38}

/* ---------- Did you know ---------- */
html.pm4 .dyk.d4{min-height:175px;padding:16px 18px 20px;border:1.8px solid rgba(255,255,255,.1);border-radius:18px;box-shadow:none !important}
html.pm4 .dyk.d4 p{width:49%;margin-top:10px;font-size:15.6px;line-height:1.5}
html.pm4 .dyk.d4 img{right:5px;bottom:0;height:159px;max-width:43%}

/* ---------- the "Need help on court?" link sits like the other white cards ---------- */
html.pm4 .mc-tease{box-shadow:0 1px 3px rgba(191,191,208,.35)}

/* ================= grown-up (black), ?look=adult ================= */
html.pm5 #app.app[data-tab=home],html.pm5 #app.app[data-tab=home] .scroll{background:#000 !important}
html.pm5 #app.app[data-tab=home]{color-scheme:dark}
html.pm5 #app[data-tab=home] .td-h{color:#fff}
html.pm5 .c4-pill,html.pm5 .c4-pill.g,html.pm5 .c4-pill.o,html.pm5 .c4-link{color:#fff}
html.pm5 .tod.t4{border-radius:22.7px}
html.pm5 .j4,html.pm5 .f4,html.pm5 .mc-tease{background:rgba(255,255,255,.1);border:.9px solid rgba(255,255,255,.1);border-radius:22px;box-shadow:none !important}
html.pm5 .j4-t,html.pm5 .f4-tx,html.pm5 .f6-in{color:#fff}
html.pm5 .f4-tx,html.pm5 .f6-in{font-size:16.2px}
html.pm5 .f6-in::placeholder{color:#fff;opacity:.45}
html.pm5 .f4-ck{background:transparent;box-shadow:0 0 0 1.3px rgba(255,255,255,.37) inset}
html.pm5 .f4-ck.on{background:linear-gradient(180deg,#13D013,#00C900);box-shadow:none}
html.pm5 .j4-dots i{background:transparent;box-shadow:0 0 0 1.1px #E2E2F0 inset}
html.pm5 .j4-dots i.d{background:linear-gradient(180deg,#13D013,#00C900);box-shadow:none}
html.pm5 .j4-dots i.c{background:rgba(250,199,46,.23);box-shadow:none}
html.pm5 .dyk.d4{border-radius:22px}
/* tab bar on Home: white at 10% over the black, a hairline on top */
html.pm5 #app[data-tab=home] .tabs{background:rgba(255,255,255,.1) !important;border-top:.9px solid rgba(255,255,255,.23) !important;box-shadow:none !important}
html.pm5 #app[data-tab=home] .tabs button .tl{color:rgba(255,255,255,.5)}
html.pm5 #app[data-tab=home] .tabs button.on .tl{color:#fff}
html.pm5 #app[data-tab=home] .tabs button.on .ti::after{background:#fff}

/* ---------- premium edges (Joshua, 4 Nov: "a nice gradient border that goes around like a snake", like Top Video Ideas on the
   ClipMagic dashboard): a bright tail runs round the card's edge. The 10% white edge is drawn in the same ring (no CSS border),
   because the tip card clips its bear and would clip a ring on the border too. ---------- */
@property --mp-a{syntax:'<angle>';inherits:false;initial-value:0deg}
@keyframes mpSnake{to{--mp-a:360deg}}
html.pm4 .tod.t4,html.pm4 .dyk.d4{border:0}
html.pm4 .tod.t4,html.pm4 .dyk.d4,html.pm4 .j4{position:relative}
html.pm4 .tod.t4::after,html.pm4 .dyk.d4::after,html.pm4 .j4::after{content:"";position:absolute;inset:0;z-index:3;border-radius:inherit;padding:1.8px;pointer-events:none;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:mpSnake 6s linear infinite}
html.pm4 .tod.t4::after{padding:2.4px;background:conic-gradient(from var(--mp-a),transparent 0 58%,rgba(201,189,255,.6) 70%,#fff 82%,#FFB8E4 92%,transparent),linear-gradient(rgba(255,255,255,.12),rgba(255,255,255,.12))}
html.pm4 .dyk.d4::after{background:conic-gradient(from var(--mp-a),transparent 0 60%,rgba(255,236,190,.6) 72%,#fff 86%,transparent),linear-gradient(rgba(255,255,255,.14),rgba(255,255,255,.14));animation-duration:7.5s;animation-delay:-3s}
html.pm4 .j4::after{padding:1.5px;background:conic-gradient(from var(--mp-a),transparent 0 62%,#C9BDFF 74%,#8B78FF 84%,#FF9AD5 93%,transparent);animation-duration:8s;animation-delay:-5s;opacity:.9}
html.pm5 .j4::after{background:conic-gradient(from var(--mp-a),transparent 0 62%,rgba(139,120,255,.5) 74%,#B9A9FF 86%,#FF9AD5 94%,transparent)}
@media (prefers-reduced-motion:reduce){html.pm4 .tod.t4::after,html.pm4 .dyk.d4::after,html.pm4 .j4::after{animation:none}}

/* Continue journey (4 Nov, Joshua): what's next instead of a row of dots, then a slim bar to the trophy and
   "Wimbledon in 5 steps · about 15 min" (kids.js roadR4) */
html.pm4 .j4n .j4-row{align-items:center}
html.pm4 .j4n .j4-r{display:flex;flex-direction:column;align-items:flex-start}
html.pm4 .j4-k{display:flex;align-items:center;gap:5px;max-width:100%;margin-bottom:3px;font-size:12.5px;font-weight:800;color:#6D49FF;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html.pm4 .j4-k img,html.pm4 .j4-k i{width:20px;height:20px;flex:none;object-fit:contain}
html.pm4 .j4-k i svg{width:14px;height:14px}
html.pm4 .j4n .j4-t{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;font-size:19px;margin-bottom:12px}
html.pm4 .j4-to{display:flex;align-items:center;gap:8px;margin:14px 2px 0}
html.pm4 .j4-bar{flex:1;height:8px;border-radius:99px;background:#ECEAF4;overflow:hidden}
html.pm4 .j4-bar i{display:block;height:100%;min-width:8px;border-radius:99px;background:#19A463}
html.pm4 .j4-to>svg{width:20px;height:20px;flex:none;color:#F2B01E}
html.pm4 .j4-note{margin:7px 2px 0;font-size:13px;font-weight:700;color:#6B6E99}
html.pm4 .j4-note b{font-weight:800;color:#2A2D4A}
html.pm4 .j4n .j4-s{display:block;margin:-2px 0 2px;font-size:12.5px;font-weight:700;color:#8E8AAE;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---------- Tip of the day, Joshua's Figma 156:330 (5 Nov: "I wanted the new card for home tips"): the tip big on the left, "Read more" under it,
   the bear swinging in from the right with the ball flying at the words; he runs off the right and bottom edges ---------- */
html.pm4 .tod.t4:not(.open) .tod-b{min-height:0;aspect-ratio:1600/880;padding:18px 20px 18px}   /* Figma's shape at any width; a long tip still grows it */
html.pm4 .tod.t4:not(.open) .tod-b>:not(.t4-art){position:relative;z-index:2}
html.pm4 .tod.t4:not(.open) .tod-b{container-type:inline-size}
html.pm4 .tod.t4:not(.open) .tod-t{max-width:47%;margin-top:14px;font-size:22px;font-size:5.8cqi;line-height:1.16;letter-spacing:-.02em}   /* grows with the card, like the Figma (old iPads keep 22px) */
html.pm4 .tod.t4:not(.open) .t4-sub{margin-top:auto;padding-top:14px;font-size:16px;font-weight:600;color:rgba(255,255,255,.5)}
html.pm4 .tod.t4:not(.open) .t4-art{position:absolute;z-index:1;left:39%;top:11.5%;width:96%;max-width:none;height:auto;margin:0;object-fit:contain}