/* Joshua's Home design (3 Nov, Figma "HOME" 156:330), ?look=r4 (html.pm4). Loaded last.
   Figma is drawn at 4.5× a phone, so every size here = his number ÷ 4.5.
   · cards: 18px corners, a solid "lip" shadow under each (3px, in a darker shade of the card)
   · labels: tinted pills with an emoji (black 13% on colour cards, mint / peach on white ones)
   · purple tip with the bear running off the bottom · orange Did you know · all tab icons in colour */

html.pm4 body,html.pm4 .app,html.pm4 .scroll{background:linear-gradient(179deg,#F7F7FE,#EDEDFC) fixed}
html.pm4 .hm.r4>*+*{margin-top:20px}

/* labels */
html.pm4 .c4-pill{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 13px;border-radius:99px;font-size:11.3px;font-weight:800;letter-spacing:.02em;text-transform:uppercase;line-height:1;white-space:nowrap}
html.pm4 .c4-pill.w{background:rgba(0,0,0,.13);color:#fff}
html.pm4 .c4-pill.g{background:#CBFED8;color:#0B1021}
html.pm4 .c4-pill.o{background:#FEEECB;color:#0B1021;padding-left:8px}
html.pm4 .c4-pill img{width:18px;height:18px;object-fit:contain}
html.pm4 .c4-pill>span{font-size:13px;line-height:1}
html.pm4 .c4-hd{display:flex;align-items:center;justify-content:space-between;gap:10px}
html.pm4 .c4-link{display:inline-flex;align-items:center;gap:6px;padding:0;border:0;background:none;font:inherit;font-size:13.3px;font-weight:700;letter-spacing:-.01em;color:#6B6E99;cursor:pointer;white-space:nowrap}
html.pm4 .c4-link svg{width:10px;height:12px}

/* ---------- Tip of the day ---------- */
html.pm4 .tod.t4{border-radius:18px;background:linear-gradient(181deg,#6D49FF 1%,#592EDA 99%);box-shadow:0 3.3px 0 #4D27BD !important}
/* the bear stands over the card's bottom lip (Joshua, 3 Nov), so the card mustn't clip it */
html.pm4 .tod.t4{overflow:visible}
html.pm4 .tod.t4::before{display:none}
html.pm4 .t4 .tod-b{padding:22px 20px 0;min-height:305px}
html.pm4 .t4 .tod-t{margin-top:12px;font-size:21.8px;font-weight:800;line-height:1.24;letter-spacing:-.02em;text-shadow:none;text-wrap:balance}
html.pm4 .t4-sub{display:block;margin-top:5px;font-size:17px;font-weight:500;line-height:1.35;letter-spacing:-.02em;color:rgba(255,255,255,.5)}
html.pm4 .t4:not(.open) .tod-s,html.pm4 .t4:not(.open) .tod-w{display:none}
html.pm4 .t4 .tod-rm{display:none}
html.pm4 .t4-art{display:block;align-self:center;width:100%;max-width:350px;height:170px;margin:6px 0 -3.5px;position:relative;z-index:2;aspect-ratio:auto;object-fit:cover;object-position:center top;pointer-events:none}
/* opened: the words take the bear's place */
html.pm4 .t4.open .tod-b{min-height:0;padding-bottom:6px}
html.pm4 .t4.open .t4-sub,html.pm4 .t4.open .t4-art{display:none}
html.pm4 .t4.open .tod-s{margin-top:10px;font-size:16.5px;font-weight:600;color:rgba(255,255,255,.88)}
html.pm4 .t4 .tod-w{background:rgba(0,0,0,.13);border-radius:14px}
html.pm4 .t4 .tod-x{padding:6px 20px 20px}
html.pm4 .t4 .tod-x .tod-rm{display:inline-flex;height:40px;padding:0 6px;background:none;color:#fff}
html.pm4 .t4 .tod-mine{color:#592EDA}

/* ---------- Continue journey ---------- */
html.pm4 .j4,html.pm4 .f4{background:#fff;border-radius:18px;box-shadow:0 3.3px 0 #EAEAF6}
html.pm4 .j4{padding:18px 18px 18px}
html.pm4 .j4-row{display:flex;align-items:center;gap:15px;margin-top:14px}
html.pm4 .j4-pic{flex:none;position:relative;width:119px;height:119px;border-radius:11.5px;background:#E9E6FF center/cover no-repeat;overflow:hidden}
html.pm4 .j4-pic.st{background:linear-gradient(180deg,color-mix(in srgb,var(--c1) 55%,#fff),var(--c1))}
html.pm4 .j4-pic.st img{position:absolute;left:50%;bottom:6px;width:118%;transform:translateX(-50%)}
html.pm4 .j4-r{flex:1;min-width:0}
html.pm4 .j4-t{display:block;font-size:17.8px;font-weight:800;line-height:1.2;letter-spacing:-.02em;color:#0B1021}
html.pm4 .j4-dots{display:flex;align-items:center;gap:4.4px;margin:10px 0 14px}
html.pm4 .j4-dots i{flex:none;display:grid;place-items:center;width:16px;height:16px;border-radius:50%;box-shadow:0 0 0 1.1px #E2E2F0 inset;background:#fff;color:#fff}
html.pm4 .j4-dots i.d{background:linear-gradient(180deg,#13D013,#00C900);box-shadow:none}
html.pm4 .j4-dots i.d svg{width:9px;height:9px;stroke-width:3.4}
html.pm4 .j4-dots i.c{width:22px;height:22px;background:rgba(250,199,46,.23);box-shadow:none}
html.pm4 .j4-dots i.c img{width:20px;height:20px}
html.pm4 .j4-go{display:inline-flex;align-items:center;justify-content:center;gap:14px;width:117px;height:34px;border:0;border-radius:99px;background:linear-gradient(180deg,#0ECD0E,#00BC00);
  box-shadow:0 1.5px 2px rgba(1,156,63,.1);color:#fff;font:inherit;font-size:13.3px;font-weight:800;cursor:pointer;transition:transform .35s cubic-bezier(.3,1.4,.5,1)}
html.pm4 .j4-go svg{width:9px;height:9px;stroke-width:3.4}
html.pm4 .j4-go:active{transform:scale(.95)}

/* ---------- My weekly focus ---------- */
html.pm4 .f4{padding:18px 18px 14px}
html.pm4 .f4-it{display:flex;align-items:flex-start;gap:8px;margin-top:12px}
html.pm4 .f4-ck{flex:none;display:grid;place-items:center;width:18px;height:18px;margin:3px 0 0;padding:0;border:0;border-radius:50%;background:#fff;box-shadow:0 0 0 1.3px #E2E2F0 inset;color:#fff;cursor:pointer}
html.pm4 .f4-ck::before{content:"";position:absolute;inset:-12px}   /* a bigger finger target than the dot */
html.pm4 .f4-ck{position:relative}
html.pm4 .f4-ck.on{background:linear-gradient(180deg,#13D013,#00C900);box-shadow:none}
html.pm4 .f4-ck svg{width:11px;height:11px;stroke-width:3.4}
html.pm4 .f4-tx{flex:1;padding:0;border:0;background:none;font:inherit;font-size:16.2px;font-weight:700;line-height:1.4;letter-spacing:-.02em;color:#0B1021;text-align:left;cursor:pointer}

/* ---------- Did you know ---------- */
html.pm4 .dyk.d4{min-height:187px;padding:20px 18px;border-radius:18px;clip-path:none;overflow:hidden;
  background:linear-gradient(232deg,#EEB440 20%,#EC811C 80%);box-shadow:0 3.3px 0 #D1761A !important}
html.pm4 .dyk.d4 .c4-pill{position:relative;z-index:1}
html.pm4 .dyk.d4 p{position:relative;z-index:1;width:46%;margin-top:12px;font-size:16.2px;font-weight:600;line-height:1.45;letter-spacing:-.02em}
html.pm4 .dyk.d4 p b{font-weight:700}
html.pm4 .dyk.d4 img{right:8px;bottom:-4px;top:auto;height:176px;max-width:47%}
html.pm4 .dyk.d4 .fx-pt i{background:#FFF3D6}

/* ---------- tab bar: all icons in colour; the one you're on gets a small dot ---------- */
html.pm4 .tabs button .ti{position:relative}
html.pm4 .tabs button.on .ti::after{content:"";position:absolute;left:50%;bottom:-7px;width:5px;height:5px;margin-left:-2.5px;border-radius:50%;background:#6D49FF}