/* ============================================================
   Today's hero (v244, "Halo"): the day as a mountain in lines (js/today-halo.js), a line of height climbing one
   step per habit or planned task. v262 (his pick from the directions canvas, "Bento", then his asks): the day as
   tiles. Today's score in a ring (two by two) at the top left, the week and readiness (a bar) beside it, the
   trackers under them as cards with their rings, four to a row; one row height (--bt-row) for every tile, kept
   so the whole day fits his phone. A tap turns the ring card over to the mountain, the stage of the journey at
   its foot (each face turns on its own; the hidden one is inert, js/app.js todayFlip). The tiles take each look's
   card surface, as its tracker cards do (ember.css, premium.css, palettes.css). On the light look the mountain
   stays on dark.
   ============================================================ */
:root .ember-gauge.today-arc.today-halo { align-items: stretch; gap: 0; text-align: left; }
/* the row: the board's 81.5px where the screen allows, less on a shorter one so today's quote stays above the tab bar
   (his 402 x 874 phone: 65px, so even the longest quote clears it); never under 64px, past that the day scrolls */
.today-bento { --bt-gap: 8px; --bt-row: clamp(64px, calc((100svh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 518px) / 4), 81.5px); }
.bento { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(2, var(--bt-row)); gap: var(--bt-gap); margin: 4px 0 0; }
.bt-tile, .bt-face { box-sizing: border-box; min-width: 0; border: 1px solid var(--line); border-radius: 20px; background: var(--card); color: inherit; font: inherit; }
button.bt-tile, .bt-face { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.bt-tile:focus-visible, .bt-face:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

/* the score card: three faces turning in place (v265: the ring, the mountain, the radar), each tap turning the
   side showing away (out) and the next one in from behind (wait), which moves there unseen, without a turn */
.bt-flip { position: relative; grid-column: 1 / span 2; grid-row: 1 / span 2; container-type: size; perspective: 900px; }
/* WebKit draws a face's canvas through its back (backface-visibility misses composited children), so each face
   also hides itself once it turns edge-on: 0.1s into the turn on this curve */
.bt-face { position: absolute; inset: 0; margin: 0; padding: 0; overflow: hidden; -webkit-backface-visibility: hidden; backface-visibility: hidden; transition: transform .72s cubic-bezier(.3, 1.18, .42, 1), visibility 0s linear .1s; }
:root .today-bento .bt-face { -webkit-backdrop-filter: none; backdrop-filter: none; }   /* a blur under a turning face flattens it on iOS */
.bt-face[data-pos="out"] { transform: rotateY(-180deg); visibility: hidden; }
.bt-face[data-pos="wait"] { transform: rotateY(180deg); visibility: hidden; transition: none; }

/* the front: the ring with the score in it, Today and its change under it */
.bt-front { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6cqh; }
.bt-ring { position: absolute; left: 50%; top: 44%; width: 66cqmin; height: 66cqmin; transform: translate(-50%, -50%); transition: transform .15s ease; }
.bt-ring::before { content: ''; position: absolute; inset: -24%; border-radius: 50%; background: radial-gradient(closest-side, transparent 38%, color-mix(in srgb, var(--accent) 16%, transparent) 60%, transparent 100%); pointer-events: none; }
.bt-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.bt-ring circle { fill: none; stroke-width: 13.9; }
.bt-track { stroke: color-mix(in srgb, var(--tx) 12%, transparent); }
.bt-fill { stroke: var(--accent); stroke-linecap: round; filter: drop-shadow(0 0 10px color-mix(in srgb, var(--accent) 55%, transparent)); }
.today-halo.is-zero .bt-fill { opacity: 0; }
.bt-front:active .bt-ring { transform: translate(-50%, -50%) scale(.97); }
.bt-front .climb-num-row { position: absolute; left: 50%; top: 44%; display: inline-flex; align-items: baseline; gap: 1px; transform: translate(-50%, -50%); }
.bt-front .ta-num { font-size: 22cqmin; font-weight: 300; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--tx); transition: text-shadow .6s ease; }
.today-halo.is-zero .ta-num:not([data-score]) { color: var(--tx-2); }
.bt-front .halo-pct { font-size: 7.6cqmin; font-style: normal; color: var(--tx-2); }
.bt-today { position: absolute; left: 0; right: 0; bottom: 9.5cqh; display: flex; align-items: baseline; justify-content: center; gap: 6px; font-size: 9.5px; font-weight: 600; line-height: 1.2; letter-spacing: .2em; text-transform: uppercase; color: var(--tx-2); }
.bt-today .ta-delta { margin: 0; font-size: 11px; letter-spacing: 0; text-transform: none; }
.today-halo:not(.is-zero)[style*="--p:1.0000"] .ta-num { text-shadow: 0 0 18px rgba(255, 200, 150, .7); }

/* the back: the mountain, the summit at the card's centre (it sits at .52 of the canvas width, js/today-halo.js
   CFG.sx), drawn wider than the card so the peak fills it; the stage at its foot */
:root .today-bento .bt-back { background: linear-gradient(180deg, rgba(52, 96, 255, .22), rgba(11, 18, 38, .92) 72%); }   /* over the looks' glass */
.bt-back .halo-canvas { position: absolute; top: 0; left: calc(50cqw - .52 * 150cqw); display: block; width: 150cqw; height: calc(100cqh + 24px); -webkit-mask-image: linear-gradient(#000 58%, rgba(0, 0, 0, .25) 82%, transparent 96%); mask-image: linear-gradient(#000 58%, rgba(0, 0, 0, .25) 82%, transparent 96%); }
.halo-stage { --halo-ink: #0b1226; position: absolute; left: 12px; right: 12px; bottom: 11px; pointer-events: none; font-size: 9px; font-weight: 600; line-height: 1.3; letter-spacing: .16em; text-align: left; text-transform: uppercase; text-wrap: balance; color: var(--tx-2); text-shadow: 0 0 1px var(--halo-ink), 0 0 1px var(--halo-ink), 0 0 2px var(--halo-ink), 0 0 2px var(--halo-ink), 0 0 4px var(--halo-ink), 0 0 6px var(--halo-ink), 0 0 10px var(--halo-ink), 0 0 14px var(--halo-ink); }

/* the third side (v265): the life balance radar of the last 7 days, the four areas around it */
.bt-radar { display: grid; place-items: center; padding: 4px; }
.bt-radar-chart { display: block; width: 100%; height: 100%; }
.bt-radar .ar-radar { width: 100%; height: 100%; max-width: none; margin: 0; }
.bt-radar .ar-radar text { font-size: 12px; font-weight: 600; fill: var(--tx-2); }
.bt-radar .ar-fill { animation: none; }
/* the aura behind it (v265, his ask), as on Progress, in the card's box; it rests while the side is turned away */
.bt-radar .ar-aura { top: 0; width: 100%; height: 100%; aspect-ratio: auto; }
.bt-radar:not([data-pos="cur"]) .ar-aura, .bt-radar:not([data-pos="cur"]) .ar-aura * { animation-play-state: paused; }
.bt-radar.reveal .ar-fill { animation: btRadarGrow .9s .2s cubic-bezier(.3, 1.25, .5, 1) both; }
.bt-radar.reveal .ar-point { animation: ckFade .4s .7s both; }
@keyframes btRadarGrow { from { transform: scale(.2); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .bt-radar.reveal .ar-fill, .bt-radar.reveal .ar-point { animation: none; } }
[data-motion="reduced"] .bt-radar.reveal .ar-fill, [data-motion="reduced"] .bt-radar.reveal .ar-point { animation: none; }

/* the week: a ring per day, today lit */
.bt-week { grid-column: 3 / span 2; grid-row: 1; display: grid; place-items: center; container-type: inline-size; }
.bt-week .ember-week { --d: min(20px, calc((100cqw - 34px) / 7)); display: grid; grid-template-columns: repeat(7, var(--d)); gap: 3px; margin: 0; }
.bt-week .ember-day { gap: 5px; min-height: 44px; justify-content: center; }
.bt-week .ember-day-ring { width: var(--d); height: var(--d); }
.bt-week .ember-day-ring circle { stroke-width: 3.4; }
.bt-week .ember-day-ring circle.fill { stroke-width: 3.4; }
.bt-week .ember-day-ring b { font-size: 9px; font-weight: 600; }
.bt-week .ember-day small { font-size: 8.5px; line-height: 1; }
.bt-week .ember-day-rest { display: none; }

/* the other cards that turn (v264: readiness, today's quote): both faces in one grid cell, so the card is as tall
   as its taller face; the same turn as the score card, each face hiding once edge-on */
.fc { display: grid; perspective: 900px; }
.fc > .fc-face { grid-area: 1 / 1; min-width: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; transition: transform .72s cubic-bezier(.3, 1.18, .42, 1), visibility 0s linear .1s; }
.fc > .fc-back { transform: rotateY(180deg); visibility: hidden; }
.fc.is-flipped > .fc-front { transform: rotateY(-180deg); visibility: hidden; }
.fc.is-flipped > .fc-back { transform: rotateY(0deg); visibility: visible; }
/* readiness has three sides (v268), placed like the score card's: turned away (out) or waiting behind (wait) */
.fc > .fc-face[data-pos="out"] { transform: rotateY(-180deg); visibility: hidden; }
.fc > .fc-face[data-pos="wait"] { transform: rotateY(180deg); visibility: hidden; transition: none; }
:root .today-bento .fc-face { -webkit-backdrop-filter: none; backdrop-filter: none; }
@media (prefers-reduced-motion: reduce) { .fc > .fc-face { transition: none; } }
[data-motion="reduced"] .fc > .fc-face { transition: none; }

/* readiness: its name and number over a bar in its light's colour; on its back the signals it is made of */
.bt-ready-card { grid-column: 3 / span 2; grid-row: 2; min-width: 0; }
.bt-ready { display: flex; flex-direction: column; justify-content: center; gap: 10px; padding: 0 14px; text-align: left; }
.bt-parts { display: grid; grid-template-columns: repeat(3, minmax(0, max-content)); justify-content: space-between; align-content: center; gap: 0 8px; padding: 0 14px; text-align: left; }
.bt-part { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.bt-part small { font-size: 8px; font-weight: 600; line-height: 1.2; letter-spacing: .1em; text-transform: uppercase; color: var(--tx-2); }
.bt-part b { min-width: 0; overflow: hidden; font-size: 11.5px; font-weight: 700; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; color: var(--tx); font-variant-numeric: tabular-nums; }
.bt-part.off small, .bt-part.off b { color: var(--tx-3); }
.bt-part i { position: relative; display: block; height: 3px; margin-top: 2px; border-radius: 2px; background: color-mix(in srgb, var(--tx) 12%, transparent); }
.bt-part i::after { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--fill, 0) * 100%); border-radius: inherit; background: var(--dot, transparent); }
/* the third side (v268, his ask): the 90 days as squares, in three months of thirty (five by six), the days kept
   counted beside them; kept days in a warm gradient with a glow, part-kept ones fainter, missed ones dark, the days
   ahead as outlines, today ringed with a slow pulse; the squares light in order as the side comes round */
.bt-days { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 0 10px; container-type: inline-size; }
.bt-days-count { flex: none; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.bt-days-count strong { font-size: 22px; font-weight: 300; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--tx); }
.bt-days-count small { font-size: 7.5px; font-weight: 600; line-height: 1.2; letter-spacing: .1em; text-transform: uppercase; color: var(--tx-3); white-space: nowrap; }
.bt-days-grid { flex: none; display: flex; gap: 4px; }
.bt-month { display: grid; grid-template-columns: repeat(5, var(--sq, 6px)); grid-auto-rows: var(--sq, 6px); gap: 2px; }
.bt-month i { display: block; border-radius: 2px; background: color-mix(in srgb, var(--tx) 9%, transparent); }
.bt-month i.l1 { background: color-mix(in srgb, var(--accent) 34%, transparent); }
.bt-month i.l2 { background: color-mix(in srgb, var(--accent) 66%, transparent); }
.bt-month i.l3 { background: linear-gradient(135deg, #ffc18f, var(--accent) 70%); box-shadow: 0 0 5px color-mix(in srgb, var(--accent) 55%, transparent); }
.bt-month i.missed { background: color-mix(in srgb, var(--tx) 13%, transparent); }
.bt-month i.f, .bt-month i.rest { background: transparent; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tx) 13%, transparent); }
.bt-month i.now { position: relative; box-shadow: 0 0 0 1.5px var(--tx); }
.bt-month i.now::after { content: ''; position: absolute; inset: -3px; border-radius: 4px; box-shadow: 0 0 6px 1px color-mix(in srgb, var(--tx) 55%, transparent); animation: btNow 2.4s ease-in-out infinite; }
@keyframes btNow { 50% { opacity: .25; } }
.bt-days.reveal .bt-month i { animation: btSq .38s cubic-bezier(.3, 1.4, .5, 1) both; animation-delay: calc(.12s + var(--i) * 6ms); }
@keyframes btSq { from { opacity: 0; transform: scale(.3); } }
.bt-days:not([data-pos="cur"]) .bt-month i.now::after { animation-play-state: paused; }
@container (max-width: 150px) { .bt-days-count { display: none; } .bt-month { --sq: 6.5px; } }   /* a 320pt phone: the squares alone */
@media (prefers-reduced-motion: reduce) { .bt-month i.now::after, .bt-days.reveal .bt-month i { animation: none; } }
[data-motion="reduced"] .bt-month i.now::after, [data-motion="reduced"] .bt-days.reveal .bt-month i { animation: none; }
:root[data-theme="light"] .bt-part i::after { background: color-mix(in srgb, var(--dot, transparent) 45%, var(--tx-2)); }
.bt-ready-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.bt-ready-head small { min-width: 0; font-size: 9px; font-weight: 600; line-height: 1.3; letter-spacing: .16em; text-transform: uppercase; color: var(--tx-2); }
.bt-ready-head strong { flex: none; font-size: 28px; font-weight: 300; line-height: 1; letter-spacing: -.01em; font-variant-numeric: tabular-nums; color: var(--tx); }
.bt-bar { position: relative; display: block; height: 6px; border-radius: 3px; background: color-mix(in srgb, var(--tx) 12%, transparent); }
.bt-bar i { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--fill, 0) * 100%); border-radius: inherit; background: var(--dot, transparent); box-shadow: 0 0 10px var(--dot, transparent); }
.screen.anim .bt-bar i { animation: btBar .9s cubic-bezier(.22, 1, .36, 1) .25s both; }
@keyframes btBar { from { width: 0; } }

@container (max-width: 300px) { .bt-today, .halo-stage { letter-spacing: .1em; } }
@media (prefers-reduced-motion: reduce) { .bt-face, .bt-ring { transition: none; } .screen.anim .bt-bar i { animation: none; } }
[data-motion="reduced"] .bt-face, [data-motion="reduced"] .bt-ring { transition: none; }
[data-motion="reduced"] .screen.anim .bt-bar i { animation: none; }

/* the solid looks: the mountain's face in their own card colour; the light look: it stays dark, the stage in the
   scene's light colours */
:root[data-palette] .today-bento .bt-back { background: var(--p-card-bg); }
:root[data-palette="greyblack"] .today-bento .bt-back { background: #1c1c1c; border-color: #2b2b2b; }
:root[data-theme="light"] .today-bento .bt-back { background: #070a12; border-color: transparent; }
:root[data-theme="light"] .halo-stage { --halo-ink: #070a12; color: #a3abbb; }
[data-theme="light"] .bt-tile, [data-theme="light"] .bt-front { box-shadow: 0 1px 2px rgba(20, 30, 25, .04); }
/* readiness's light is pale in its middle (warm white at 62), so on the light look the bar is that light deepened toward the ink */
:root[data-theme="light"] .bt-bar i { background: color-mix(in srgb, var(--dot, transparent) 45%, var(--tx-2)); box-shadow: none; }

/* the trackers under them as cards with their rings (v250's, back with Bento), four to a row, six as two rows of
   three; each card one row tall. A kept tracker's card still takes its area colour at the edge (v171.css). */
:root .today-bento > .tr-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: var(--bt-row); gap: var(--bt-gap); margin: var(--bt-gap) 0 0; padding: 0; border: 0; overflow: visible; -webkit-mask-image: none; mask-image: none; }
:root .today-bento > .tr-strip:has(> .tr-tile:nth-child(6):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
:root .today-bento > .tr-strip .tr-tile { min-width: 0; min-height: 0; padding: 0 2px; flex-direction: column; align-items: center; justify-content: center; gap: 6px; border-radius: 20px; }
.today-bento > .tr-strip .tr-ring-wrap, .today-bento > .tr-strip .tr-ring { width: 34px; height: 34px; }
.today-bento > .tr-strip .tr-value { font-size: 12px; }
.today-bento > .tr-strip .tr-value[data-len="4"] { font-size: 10.5px; }
.today-bento > .tr-strip .tr-value[data-len="5"], .today-bento > .tr-strip .tr-value[data-len="6"] { font-size: 9.5px; }
.today-bento > .tr-strip .tr-value small { font-size: 9px; }
.today-bento > .tr-strip .tr-value .mood-face, .today-bento > .tr-strip .tr-value .energy-icon { width: 18px; height: 18px; color: var(--area); }
.today-bento > .tr-strip .tr-label { max-width: 100%; font-size: 10.5px; line-height: 1.15; text-align: center; overflow-wrap: anywhere; }

/* the opening, every time the app opens (v265, his ask: short, the logo and today's phrase, a fade; js/app.js
   showLaunchQuote): over the look's own ground (Today hides under it), a soft veil, the logo, then the phrase a
   beat later; then they fade out with the veil as Today fades in */
.launch-quote.launch-fade { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; overflow: hidden; background: rgba(10, 6, 6, .42); color: #f6efe9; transition: background .7s ease; }
.launch-quote.launch-fade[open] { display: block; }
.launch-quote.launch-fade::backdrop { background: transparent; }
.launch-quote.launch-fade.out { background: rgba(10, 6, 6, 0); }
html:has(.launch-fade[open]:not(.out)) #app { opacity: 0; }
html:has(.launch-fade.out) #app { transition: opacity .7s ease; }
.lf-logo { position: absolute; left: 0; right: 0; top: 36%; display: flex; flex-direction: column; align-items: center; gap: 16px; pointer-events: none; opacity: 0; animation: lfIn 1s cubic-bezier(.22, 1, .36, 1) .1s forwards; }
.lf-mark { width: 58px; height: 58px; color: #ff8a3d; filter: drop-shadow(0 0 18px rgba(255, 122, 47, .35)); }
.lf-word { margin: 0; padding-left: .42em; font-size: 26px; font-weight: 300; line-height: 1; letter-spacing: .42em; color: #f6efe9; text-shadow: 0 1px 18px rgba(20, 8, 6, .35); }
.lf-word i { font-style: normal; color: #ff9a55; }
.lf-quote { position: absolute; left: 0; right: 0; top: 58%; margin: 0; padding: 0 36px; text-align: center; pointer-events: none; opacity: 0; animation: lfIn 1.1s cubic-bezier(.22, 1, .36, 1) .55s forwards; }
.lf-quote blockquote { margin: 0; font-family: ui-serif, 'New York', 'Iowan Old Style', Georgia, serif; font-size: 17px; font-style: italic; font-weight: 400; line-height: 1.45; text-wrap: balance; color: #f6efe9; text-shadow: 0 1px 16px rgba(20, 8, 6, .4); }
.lf-quote figcaption { margin-top: 10px; font-size: 9.5px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: rgba(246, 239, 233, .72); }
.launch-fade.out .lf-logo, .launch-fade.out .lf-quote { animation: lfOut .5s ease forwards; }
@keyframes lfIn { from { opacity: 0; transform: translateY(10px); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes lfOut { from { opacity: 1; } to { opacity: 0; transform: translateY(-6px); filter: blur(4px); } }

/* a ticked habit's dust, on its way to the step it lights (js/today-halo.js) */
.halo-dust { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 40; }

/* v278 (his ask: "I don't see the share [progress] on today's"): sharing today sits on the score card, a quiet icon in its
   corner on every side of it; it opens the Today card in the share sheet. */
.today-bento .bt-flip > .bt-share { position: absolute; top: 6px; right: 6px; z-index: 6; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--tx-3); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.today-bento .bt-flip > .bt-share svg { width: 17px; height: 17px; }
.today-bento .bt-flip > .bt-share:active { background: rgba(255, 255, 255, .08); }
.today-bento .bt-flip > .bt-share:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }