/* Tip of the day opens as a sheet (4 Nov, Joshua picked "B · Sheet" from tip-open.html).
   Home steps back on black, the page slides up from the bottom; drag down, tap ✕ or tap Home to close. Driven by tipsheet.js. */
.phone.tsh-on{background:#000}
.phone.tsh-on #app{border-radius:16px;overflow:hidden}
.tsh-dim{position:absolute;inset:0;z-index:30;background:#000;opacity:0}
.tsh{position:absolute;left:0;right:0;bottom:0;top:calc(max(14px,env(safe-area-inset-top)) + 34px);z-index:31;display:flex;flex-direction:column;border-radius:16px 16px 0 0;background:#fff;overflow:hidden;
  transform:translateY(100%);will-change:transform;box-shadow:0 -10px 40px rgba(0,0,0,.25);touch-action:pan-y;font-family:inherit;color:#0B1021}
.tsh-sc{flex:1;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none}
.tsh-sc::-webkit-scrollbar{display:none}
.tsh-hero{position:relative;padding:26px 20px 0;background:linear-gradient(181deg,#6D49FF 1%,#592EDA 99%);color:#fff;overflow:hidden}
.tsh-grab{position:absolute;top:7px;left:50%;width:38px;height:5px;margin-left:-19px;border-radius:3px;background:rgba(255,255,255,.55);z-index:3}
.tsh-row{display:flex;gap:8px;align-items:center}
.tsh-pill,.tsh-chip{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;background:rgba(0,0,0,.13);color:#fff}
.tsh-pill>span{font-size:13px}
.tsh-chip{padding:0 11px;background:rgba(255,255,255,.18);letter-spacing:.04em}
.tsh h2{margin:12px 0 0;max-width:290px;font-size:26px;font-weight:800;line-height:1.2;letter-spacing:-.02em;text-wrap:balance}
.tsh-bear{display:block;position:relative;z-index:2;margin:8px -20px 0;width:calc(100% + 40px);height:200px;object-fit:cover;object-position:center top}
.tsh-body{position:relative;z-index:3;margin-top:-22px;padding:26px 22px calc(30px + env(safe-area-inset-bottom));border-radius:22px 22px 0 0;background:#fff}
.tsh small{display:block;margin-bottom:6px;font-size:12px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:#6B6E99}
.tsh-why{margin:0;font-size:19px;font-weight:600;line-height:1.45;letter-spacing:-.015em;color:#2A2D4A}
.tsh-use{margin-top:22px;padding:16px 18px;border-radius:18px;background:#F2EEFF}
.tsh-use small{color:#6D49FF}
.tsh-use b{display:block;font-size:18px;font-weight:800;line-height:1.3;letter-spacing:-.015em}
.tsh-try{margin-top:22px}
.tsh-try p{margin:0;font-size:17px;font-weight:600;line-height:1.45;color:#2A2D4A}
/* 5 Nov: the new tip shape: the moment, numbered steps, Try it in practice */
.tsh-hook{margin:0 0 12px;font-size:18px;font-weight:600;line-height:1.45;letter-spacing:-.01em;color:#2A2D4A}
.tsh-h{margin-top:22px}
.tsh-steps{margin:4px 0 0;padding:0;list-style:none;counter-reset:st}
.tsh-steps li{position:relative;padding:12px 0 12px 40px;font-size:16.5px;font-weight:500;line-height:1.45;color:#2A2D4A;border-top:1px solid #EEEEF4;counter-increment:st}
.tsh-steps li:first-child{border-top:0}
.tsh-steps li::before{content:counter(st);position:absolute;left:0;top:11px;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--g-soft,#F2EEFF);color:var(--g-ink,#6D49FF);font-size:13px;font-weight:800}
.tsh-steps b{font-weight:800;color:#0B1021}
.tsh-drill p{margin:0;font-size:16.5px;font-weight:600;line-height:1.45;color:#2A2D4A}
.tsh-drill small{color:var(--g-ink,#6D49FF)}
html.pm5 .tsh-hook,html.pm5 .tsh-steps li,html.pm5 .tsh-drill p{color:rgba(255,255,255,.88)}
html.pm5 .tsh-steps b{color:#fff}
html.pm5 .tsh-steps li{border-top-color:rgba(255,255,255,.1)}
.tsh-acts{display:flex;flex-direction:column;gap:10px;margin-top:28px}
.tsh-btn{display:flex;align-items:center;justify-content:center;gap:10px;height:54px;border:0;border-radius:16px;font:inherit;font-size:17px;font-weight:800;cursor:pointer;transition:transform .3s cubic-bezier(.34,1.36,.5,1)}
.tsh-btn:active{transform:scale(.97)}
.tsh-btn img{width:26px;height:26px}
.tsh-btn.main{background:linear-gradient(180deg,#6D49FF,#592EDA);color:#fff;box-shadow:0 3px 0 #4D27BD}
.tsh-btn.ghost{background:#F2F2F7;color:#0B1021}
.tsh-two{display:grid;grid-template-columns:1fr 1fr;gap:10px}   /* Another tip · Close, half width each (Joshua) */
.tsh-x{position:absolute;top:14px;right:14px;z-index:4;display:grid;place-items:center;width:32px;height:32px;padding:0;border:0;border-radius:50%;background:rgba(0,0,0,.22);color:#fff;cursor:pointer}
.tsh-x svg{width:14px;height:14px}
/* the card pressed in on Home */
html.pm4 .tod.t4 .tod-b{transition:transform .35s cubic-bezier(.34,1.36,.5,1)}
html.pm4 .tod.t4 .tod-b:active{transform:scale(.97)}

/* grown-up look: dark page under the purple top */
html.pm5 .tsh,html.pm5 .tsh-body{background:#1C1C1E;color:#fff}
html.pm5 .tsh-hero{background:linear-gradient(165deg,#5B36F0 0%,#3A1BB0 100%)}
html.pm5 .tsh small{color:rgba(255,255,255,.5)}
html.pm5 .tsh-why,html.pm5 .tsh-try p{color:rgba(255,255,255,.88)}
html.pm5 .tsh-use{background:rgba(122,91,255,.16)}
html.pm5 .tsh-use small{color:#A895FF}
html.pm5 .tsh-btn.main{background:#fff;color:#000;box-shadow:none}
html.pm5 .tsh-btn.ghost{background:#2C2C2E;color:#fff}
@media (prefers-reduced-motion:reduce){.tsh,.tsh *{transition-duration:.01ms !important}}
/* the bear always sits on the card's bottom edge, even when the tip fits on one line and the card is taller than its words (Joshua, 4 Nov: "big gap") */
html.pm4 .t4:not(.open) .t4-art{margin-top:auto}

/* ---------- full screen (5 Nov, Joshua: "the whole height tip version where the screen takes full screen"): the purple top runs up behind the
   status bar, the bear gets bigger on tall screens, the buttons sit at the bottom of the screen ---------- */
.tsh{top:0;border-radius:0;container-type:size}
.tsh-sc{display:flex;flex-direction:column}
.tsh-hero{flex:none;padding-top:calc(env(safe-area-inset-top,0px) + 30px)}
.tsh-grab{top:calc(env(safe-area-inset-top,0px) + 8px)}
.tsh-x{top:calc(env(safe-area-inset-top,0px) + 20px);right:16px;width:36px;height:36px}
.tsh h2{max-width:340px;font-size:28px}
.tsh-bear{height:clamp(120px,calc(100cqh - 590px),340px)}   /* whatever the words and buttons leave, measured on the sheet (not the window, so the desktop phone frame fits too): 222px on an iPhone 14, 340px on an iPad */
.tsh-body{flex:1 0 auto;display:flex;flex-direction:column}
.tsh-acts{margin-top:auto;padding-top:28px}
.tsh-bear[src*="/tips/"]{object-fit:contain;object-position:center;padding:6px 0 22px;filter:drop-shadow(0 10px 18px rgba(20,8,70,.35))}   /* 9 Nov: tip pictures are whole objects, so show all of it rather than cropping like a character */

/* 11 Nov: Coach Carlos whiteboard tips are whole scenes: full width, no crop, no object shadow */
.tsh-bear[src*="/tips/board/"]{height:auto;aspect-ratio:960/645;object-fit:cover;padding:0;filter:none;margin-top:10px}