/* Home, round 3 (3 Nov). Only with ?look=r3 (html.pm3) until Joshua picks it. Loaded after polish.css.
   Take 1, Joshua: "75–80% good… not 100% premium. Apple cleanness + the fun of the characters and colours".
   Take 2, his review ("a collection of attractive cards rather than one connected experience… aim for 70% Apple, 30% MatchPoint"):
   · no section headings: every card carries one small label (Apple Today style), so the screen reads as one feed
   · a line just for this child under "Today", from what they really did
   · the tip is ~25% shorter: smaller koala + title, a short line under it, Read more as a quiet link
   · Your journey: Road to… / next step ready, ONE bar running to the stadium, Continue + Step x of y
   · weekly focus: the words are the hero; the tick is a plain row under a hairline
   · Did you know: a punchy headline + one small line, text and Federer never overlap
   · tab bar: flat line icons, purple on, grey off */

/* ---------- the page ---------- */
html.pm3 .td-msg{margin:4px 0 0;font-size:16px;font-weight:700;line-height:1.35;letter-spacing:-.01em;color:#6E6E73;text-wrap:balance}
html.pm3 .hm.r3>*+*{margin-top:18px}
html.pm3 .r3-k{display:block;font-size:12px;font-weight:900;letter-spacing:.08em;line-height:1.3;text-transform:uppercase;color:var(--pm-purple,#7C3AED)}

/* white cards: one soft shadow, no hairline */
html.pm3 .myf,html.pm3 .r3-road{background:#fff;border-radius:24px;box-shadow:0 1px 2px rgba(16,24,40,.04),0 12px 30px -16px rgba(16,24,40,.18) !important}

/* ---------- Tip of the day: an editorial card, not a banner ---------- */
html.pm3 .tod{border-radius:24px;background:linear-gradient(165deg,#FFC94F 0%,#FBA73B 52%,#F48A2C 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 2px 6px rgba(226,120,15,.14),0 22px 38px -20px rgba(226,120,15,.7) !important}
html.pm3 .tod::before{display:none}
html.pm3 .tod-b{padding:18px 20px 16px}
html.pm3 .tod .h4-tag{height:auto;padding:0;background:none;line-height:1.2;color:rgba(255,255,255,.9);font-size:12px;font-weight:900;letter-spacing:.09em}
html.pm3 .tod-art{height:100px;margin:2px -8px 8px}
html.pm3 .tod-art img{max-height:98px;bottom:8px;filter:drop-shadow(0 6px 8px rgba(150,70,0,.18))}
html.pm3 .tod-art i{left:26%;right:26%;bottom:3px;height:16px;background:radial-gradient(closest-side,rgba(130,62,0,.3),rgba(130,62,0,0));filter:blur(1.5px)}
html.pm3 .tod-t{font-size:24px;line-height:1.16;letter-spacing:-.03em;text-shadow:0 1px 2px rgba(150,70,0,.16)}
html.pm3 .tod-sub{display:block;margin-top:6px;font-size:15.5px;font-weight:700;line-height:1.35;letter-spacing:-.01em;color:rgba(255,255,255,.88);text-wrap:pretty}
html.pm3 .tod:not(.open) .tod-s{display:none}
html.pm3 .tod .tod-w{display:none !important}   /* "Use it" = the line under the title now */
html.pm3 .tod.open .tod-s{margin-top:10px;font-size:16px}
/* Read more: a quiet link, not a big white button */
html.pm3 .tod-b .tod-rm{height:auto;margin-top:12px;padding:0;background:none;box-shadow:none;color:#fff;font-size:15px;font-weight:800;opacity:.95;gap:5px}
html.pm3 .tod-b .tod-rm svg{width:11px;height:11px}
html.pm3 .tod-x{padding:0 20px 18px}
html.pm3 .tod-x .tod-rm{height:44px;padding:0 6px;background:none;color:#fff;box-shadow:none}

/* ---------- Your journey ---------- */
html.pm3 .r3-road{position:relative;display:block;padding:18px 20px 18px}
html.pm3 .r3-top{display:flex;align-items:center;gap:8px;min-height:96px}
html.pm3 .r3-rl{flex:1;min-width:0}
html.pm3 .r3-t{display:block;margin-top:6px;font-size:21px;font-weight:800;line-height:1.18;letter-spacing:-.025em;color:var(--pm-ink,#0B1021);text-wrap:balance}
html.pm3 .r3-s{display:block;margin-top:4px;font-size:14.5px;font-weight:700;color:#6E6E73}
/* the stadium sits where the bar is heading */
html.pm3 .r3-st{flex:none;position:relative;width:min(40%,170px);margin:-34px -6px -6px 0;pointer-events:none}
html.pm3 .r3-st::after{content:"";position:absolute;left:12%;right:12%;bottom:-4px;height:14px;background:radial-gradient(closest-side,rgba(16,24,40,.16),rgba(16,24,40,0))}
html.pm3 .r3-st img{position:relative;z-index:1;display:block;width:100%;filter:drop-shadow(0 10px 12px rgba(16,24,40,.14))}
html.pm3 .r3-bar{display:block;height:8px;margin:14px 0 14px;border-radius:99px;background:#EDEDF2;overflow:hidden}
html.pm3 .r3-bar i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#4ADE80,#22C55E)}
html.pm3 .r3-ft{display:flex;align-items:center;justify-content:space-between;gap:12px}
html.pm3 .r3-n{display:flex;flex-direction:column;align-items:flex-end;text-align:right}
html.pm3 .r3-n b{font-size:15px;font-weight:800;color:var(--pm-ink,#0B1021)}
html.pm3 .r3-n small{font-size:13px;font-weight:700;color:#8E8E93}
html.pm3 .r3-go{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 16px 0 20px;border:0;border-radius:99px;
  background:linear-gradient(180deg,#8B5CF6,#7C3AED);color:#fff;font:inherit;font-size:17px;font-weight:800;cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 8px 16px -10px rgba(124,58,237,.8);transition:transform .35s cubic-bezier(.3,1.4,.5,1)}
html.pm3 .r3-go svg{width:14px;height:14px}
html.pm3 .r3-go:active{transform:scale(.95)}

/* ---------- This week's focus: the words are the hero ---------- */
html.pm3 .r3-f{padding:16px 18px 6px}
html.pm3 .r3-fk{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
html.pm3 .r3-fk .h6-link{min-height:0;padding:0;font-size:14.5px;color:var(--pm-purple,#7C3AED) !important;font-weight:800}
html.pm3 .r3-f .myf-top{align-items:center;gap:12px}
html.pm3 .r3-f .myf-ic{width:34px;height:34px}
html.pm3 .r3-f .myf-top b{font-size:19px;line-height:1.25;letter-spacing:-.02em}
html.pm3 .r3-f .myf-ed{width:32px !important;height:32px !important;margin:0 -6px 0 0 !important;border-radius:50% !important;background:none !important;color:#AEAEB2}
html.pm3 .r3-f .myf-ed svg{width:18px;height:18px}
/* a plain row under a hairline, a round tick like Reminders */
html.pm3 .r3-f .myf-did{display:flex;width:calc(100% + 36px);height:50px;margin:14px -18px 0;padding:0 18px;border-top:.5px solid rgba(60,60,67,.16);
  background:none;font-size:15.5px;font-weight:700;color:var(--pm-ink,#0B1021);gap:12px;border-radius:0}
html.pm3 .r3-f .myf-did i{width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 0 0 1.75px #C7C7CC inset}
html.pm3 .r3-f .myf-did i svg{width:13px;height:13px;stroke-width:3}
html.pm3 .r3-f .myf-did.on i{background:#22C55E;box-shadow:none}
html.pm3 .r3-f .myf-did.on{color:#15803D}

/* ---------- Did you know: text on the left, Federer on the right (above the card, never over the words) ---------- */
html.pm3 .dyk.r3d{display:flex;align-items:center;min-height:152px;padding:20px 20px 20px;border-radius:24px;margin-top:26px !important;
  clip-path:inset(-44px 0 0 0 round 0 0 24px 24px);box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 22px 38px -20px rgba(91,33,182,.75) !important}
html.pm3 .r3d-t{position:relative;z-index:2;width:61%}
html.pm3 .r3d-t .r3-k{color:rgba(255,255,255,.72);margin-bottom:8px}
html.pm3 .r3d-t b{display:block;font-size:18.5px;font-weight:800;line-height:1.18;letter-spacing:-.025em;text-wrap:balance}
html.pm3 .r3d-t span{display:block;margin-top:8px;font-size:14px;font-weight:600;line-height:1.4;color:rgba(255,255,255,.78);text-wrap:pretty}
html.pm3 .dyk.r3d img{right:2px;height:206px;max-width:39%;object-position:center bottom}

/* ---------- tab bar: flat line icons ---------- */
html.pm3 .tabs button{height:56px;flex-direction:column;gap:3px}
html.pm3 .tabs button .ti{display:grid;place-items:center;width:28px;height:28px;color:#8E8E93;transition:transform .35s cubic-bezier(.3,1.4,.5,1)}
html.pm3 .tabs button .ti svg{width:26px;height:26px}
html.pm3 .tabs button.on .ti{color:var(--pm-purple,#7C3AED)}
html.pm3 .tabs button.on .ti svg{stroke-width:2.3}
html.pm3 .tabs button .tl{display:block;font-size:10.5px;font-weight:800;letter-spacing:0;color:#8E8E93}
html.pm3 .tabs button.on .tl,html.pm3 .tabs button.on[data-tab] .tl{color:var(--pm-purple,#7C3AED)}
html.pm3 .tabs button:active .ti{transform:scale(.88)}