/* BUFF OS v131 — "Apple" appearance, phase 1: a real Today screen in the Apple concept's style. Only active under html.skin-apple. */
html.skin-apple #s-home > *:not(#apToday):not(#v119Days):not(#homeC100):not([data-usage-card="home-supp"]):not(#homeNudges):not(#v125Row):not(#v122Night):not(#v137Retake) { display: none !important; }
html:not(.skin-apple) #apToday { display: none !important; }
#apToday { position: relative; margin: 0 0 6px; color: #fff; font-family: -apple-system, "SF Pro Text", "SF Pro Display", system-ui, sans-serif; letter-spacing: -.011em; font-variant-numeric: tabular-nums; }
#apToday .ap-wash { position: absolute; left: -16px; right: -16px; top: -220px; height: 520px; pointer-events: none; filter: blur(70px); opacity: .38; z-index: 0;
  background: radial-gradient(60% 60% at 25% 40%, #ff375f, transparent 70%), radial-gradient(45% 45% at 85% 25%, #ff6b4a, transparent 70%); }
#apToday > *:not(.ap-wash) { position: relative; z-index: 1; }
#apToday .ap-nav { display: flex; justify-content: space-between; align-items: flex-start; margin-top: 4px; }
#apToday .ap-cap { color: #8e8e93; font-size: 15px; font-weight: 500; }
#apToday .ap-title { font-size: 40px; font-weight: 700; letter-spacing: -.036em; line-height: 1.05; margin-top: 2px; }
#apToday .ap-circ { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; border: .5px solid rgba(255,255,255,.12); background: rgba(120,120,128,.26); color: #fff; cursor: pointer; -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }
#apToday .ic { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
#apToday .ic.s { width: 16px; height: 16px; }
#apToday .ap-glass { margin-top: 22px; padding: 20px 18px; display: flex; align-items: center; gap: 18px; border-radius: 30px; cursor: pointer;
  background: linear-gradient(180deg, rgba(255,255,255,.1), rgba(255,255,255,.05)); border: .5px solid rgba(255,255,255,.1); box-shadow: 0 1px 0 rgba(255,255,255,.16) inset, 0 24px 48px -28px rgba(0,0,0,.9); -webkit-backdrop-filter: blur(30px) saturate(170%); backdrop-filter: blur(30px) saturate(170%); }
#apToday .ap-rings { flex: 0 0 136px; height: 136px; }
#apToday .ap-legend { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
#apToday .ap-lg { display: flex; align-items: stretch; gap: 10px; } #apToday .ap-lg i { width: 4px; border-radius: 2px; flex: none; }
#apToday .ap-lg small { display: block; font-size: 13px; font-weight: 600; } #apToday .ap-lg b { display: block; font-size: 24px; font-weight: 700; letter-spacing: -.03em; line-height: 1.1; }
#apToday .ap-lg b span { font-size: 14px; font-weight: 600; color: #8e8e93; margin-left: 3px; }
#apToday .ap-acts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px 8px; margin-top: 22px; }
#apToday .ap-act { min-width: 0; text-align: center; border: 0; background: none; color: #fff; padding: 0; font: inherit; cursor: pointer; }
#apToday .ap-act .ap-ti { width: 56px; height: 56px; border-radius: 50%; margin: 0 auto; display: grid; place-items: center; box-shadow: 0 1px 0 rgba(255,255,255,.3) inset; }
#apToday .ap-act .ic { width: 22px; height: 22px; } #apToday .ap-act span.l { display: block; font-size: 11.5px; color: #d1d1d6; margin-top: 6px; font-weight: 500; white-space: nowrap; }
#apToday .bg-coral { background: linear-gradient(180deg, #ff6b6f, #ff375f); } #apToday .bg-sky { background: linear-gradient(180deg, #64d2ff, #0a84ff); }
#apToday .bg-lime { background: linear-gradient(180deg, #d4f54f, #7ed957); color: #12200a; } #apToday .bg-gold { background: linear-gradient(180deg, #ffd978, #f0b429); color: #1b1405; }
#apToday .bg-orange { background: linear-gradient(180deg, #ffb340, #ff9f0a); } #apToday .bg-gray { background: linear-gradient(180deg, #8e8e93, #636366); } #apToday .bg-cyan { background: linear-gradient(180deg, #5ee0e8, #2cb5d0); }
#apToday .ap-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 20px; }
#apToday .ap-tile { padding: 16px; border-radius: 26px; background: #1c1c1e; box-shadow: 0 .5px 0 rgba(255,255,255,.07) inset; cursor: pointer; min-width: 0; }
#apToday .ap-tile .k { display: flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 600; }
#apToday .ap-tile .big { font-size: 32px; font-weight: 700; letter-spacing: -.034em; line-height: 1; margin-top: 12px; } #apToday .ap-tile .big small { font-size: 15px; font-weight: 600; color: #8e8e93; margin-left: 3px; }
#apToday .ap-tile .cp { font-size: 13px; color: #8e8e93; margin-top: 8px; line-height: 1.3; }
#apToday .ap-bar { height: 8px; margin-top: 12px; border-radius: 5px; background: rgba(120,120,128,.28); overflow: hidden; display: flex; gap: 2px; } #apToday .ap-bar i { display: block; height: 100%; border-radius: 5px; }
#apToday .ap-spark { display: flex; align-items: flex-end; gap: 2px; height: 22px; margin-top: 12px; } #apToday .ap-spark i { flex: 1; border-radius: 2px; background: rgba(120,120,128,.3); } #apToday .ap-spark i.on { background: linear-gradient(180deg, #c6f432, #7ed957); } #apToday .ap-spark i.now { outline: 1.5px solid #5ac8fa; }
#apToday .ap-list { margin-top: 12px; border-radius: 24px; overflow: hidden; background: #1c1c1e; box-shadow: 0 .5px 0 rgba(255,255,255,.07) inset; }
#apToday .ap-li { position: relative; display: flex; align-items: center; gap: 14px; padding: 13px 16px; cursor: pointer; }
#apToday .ap-li + .ap-li::before { content: ""; position: absolute; top: 0; left: 64px; right: 0; height: .5px; background: rgba(84,84,88,.6); }
#apToday .ap-li .ap-ti { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; flex: none; color: #fff; }
#apToday .ap-li .tx { flex: 1; min-width: 0; } #apToday .ap-li .n { font-size: 17px; font-weight: 600; letter-spacing: -.016em; } #apToday .ap-li .d { font-size: 14px; color: #8e8e93; margin-top: 1px; }
#apToday .ap-li .v { font-size: 17px; font-weight: 600; color: #8e8e93; white-space: nowrap; }
#apToday .chev { width: 14px; height: 14px; fill: none; stroke: #636366; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; flex: none; }
#apToday .ap-sec { display: flex; justify-content: space-between; align-items: baseline; margin: 28px 4px 10px; } #apToday .ap-sec b { font-size: 22px; font-weight: 700; letter-spacing: -.026em; } #apToday .ap-sec span { color: #8e8e93; font-size: 15px; font-weight: 500; }
/* the working cards that stay below, given the Apple card look */
html.skin-apple #v119Days, html.skin-apple #homeC100 > .card, html.skin-apple [data-usage-card="home-supp"], html.skin-apple #homeNudges { border-radius: 26px !important; background: #1c1c1e !important; }
html.skin-apple #v119Days { padding: 16px !important; }
html.skin-apple #s-home { padding-top: 6px; }
html.skin-apple body, html.skin-apple .app { background: #000 !important; }
html.skin-apple #s-home { overflow-x: clip; }
html.skin-apple, html.skin-apple body { overflow-x: hidden; }
#apToday .ap-lg { cursor: pointer; border-radius: 10px; padding: 2px 6px 2px 0; } #apToday .ap-lg:active { background: rgba(255,255,255,.08); }
#apToday .ap-rings { cursor: pointer; }
.ap-flash { animation: apFlash 1.4s ease; } @keyframes apFlash { 0% { box-shadow: 0 0 0 0 rgba(255,209,102,.0); } 25% { box-shadow: 0 0 0 3px rgba(255,209,102,.75); } 100% { box-shadow: 0 0 0 0 rgba(255,209,102,0); } }

/* v443: third row — Measurements, Weight, and two empty slots Marius will fill later */
#apToday .bg-blue { background: linear-gradient(180deg, #6aa8ff, #2f74e6); } #apToday .bg-red { background: linear-gradient(180deg, #ff8a65, #ff5b3a); }
#apToday .ap-act.ap-empty { cursor: default; } #apToday .ap-act.ap-empty .ap-ti { box-shadow: none; border: 1.5px dashed rgba(235,235,245,.18); }

/* v445: Walk + Shake fill the last two spots; Shake opens an iOS-style action sheet */
#apToday .bg-vanilla { background: linear-gradient(180deg, #fff1c9, #f2cf6b); color: #3a2a00; }
.ap-asheet { position: fixed; inset: 0; z-index: 400; display: flex; align-items: flex-end; }
.ap-as-bg { position: absolute; inset: 0; background: rgba(0,0,0,.45); opacity: 0; transition: opacity .2s; }
.ap-as-box { position: relative; width: 100%; padding: 0 10px calc(10px + env(safe-area-inset-bottom)); transform: translateY(105%); transition: transform .32s cubic-bezier(.2,.9,.3,1); }
.ap-asheet.on .ap-as-bg { opacity: 1; } .ap-asheet.on .ap-as-box { transform: none; }
.ap-as-grp { background: rgba(44,44,46,.96); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); border-radius: 14px; overflow: hidden; margin-top: 8px; }
.ap-as-t { padding: 13px 16px 11px; text-align: center; font-size: 13px; font-weight: 600; color: #8e8e93; } .ap-as-t small { display: block; font-weight: 400; margin-top: 2px; }
.ap-as-grp button { display: block; width: 100%; padding: 16px; border: 0; border-top: .5px solid rgba(84,84,88,.6); background: transparent; font: inherit; font-size: 20px; color: #f5d06f; cursor: pointer; }
.ap-as-grp button span { font-size: 14px; color: #8e8e93; margin-left: 6px; }
.ap-as-grp button:active { background: rgba(120,120,128,.2); }
.ap-as-grp .ap-as-c { border-top: 0; font-weight: 600; color: #fff; }

/* v446: buttons for things not done yet today glow softly in their own colour (Marius) */
#apToday .bg-coral { --g: 255,85,110; } #apToday .bg-sky { --g: 90,190,255; } #apToday .bg-lime { --g: 190,240,70; } #apToday .bg-gold { --g: 245,200,90; }
#apToday .bg-orange { --g: 255,170,50; } #apToday .bg-cyan { --g: 80,215,230; } #apToday .bg-gray { --g: 200,200,210; } #apToday .bg-blue { --g: 90,150,255; }
#apToday .bg-red { --g: 255,120,90; } #apToday .bg-vanilla { --g: 250,220,140; }
/* --gi = how much is left (0.22..1): not started = strong glow, half done = softer, done = none */
#apToday .ap-act.ap-due .ap-ti { --gi: 1; box-shadow: 0 0 0 calc(1px + 1.6px * var(--gi)) rgba(var(--g), calc(.35 + .65 * var(--gi))), 0 0 calc(6px + 18px * var(--gi)) calc(4px * var(--gi)) rgba(var(--g), calc(.6 * var(--gi))), 0 1px 0 rgba(255,255,255,.3) inset; animation: apDue 2.6s ease-in-out infinite; }
#apToday .ap-act.ap-due[style*="--gi"] .ap-ti { --gi: inherit; }
@keyframes apDue { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(calc(1 + .12 * var(--gi))); } }
@media (prefers-reduced-motion: reduce) { #apToday .ap-act.ap-due .ap-ti { animation: none; } }

/* v447: twelve distinct colours on the Today buttons (Marius) — no purple: Measure is bronze */
#apToday .bg-red2 { background: linear-gradient(180deg, #ff6259, #e0251b); --g: 255,80,70; }
#apToday .bg-pink { background: linear-gradient(180deg, #ff8cc6, #ff4f9a); --g: 255,110,180; }
#apToday .bg-navy { background: linear-gradient(180deg, #4a68e8, #22379e); --g: 90,120,255; }
#apToday .bg-bronze { background: linear-gradient(180deg, #d9a066, #a8692b); --g: 225,160,95; }
#apToday .bg-graphite { background: linear-gradient(180deg, #8e8e93, #4a4a4f); --g: 190,190,200; }
#apToday .bg-forest { background: linear-gradient(180deg, #5fae3a, #2f7a24); --g: 110,190,80; }
#apToday .bg-milk { background: linear-gradient(180deg, #ffffff, #dcd9d2); color: #2a2a2a; --g: 255,255,255; }

/* v447: discreet progress ring on each button — a darker shade of its own colour along the edge */
#apToday .ap-act .ap-ti { position: relative; }
#apToday .ap-pr { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); pointer-events: none; overflow: visible; }
#apToday .ap-pr circle { fill: none; stroke: rgba(0,0,0,.34); stroke-width: 3.4; stroke-linecap: round; }
#apToday .bg-milk .ap-pr circle, #apToday .bg-gold .ap-pr circle, #apToday .bg-lime .ap-pr circle { stroke: rgba(0,0,0,.26); }
/* v447: ring in a contrasting colour per button (Marius: the darker shade was hard to see) — no purple */
#apToday .bg-red2 { --rc: #ffd60a; } #apToday .bg-sky { --rc: #ff9f0a; } #apToday .bg-lime { --rc: #1e3a8a; } #apToday .bg-gold { --rc: #b4231a; }
#apToday .bg-orange { --rc: #1e40af; } #apToday .bg-pink { --rc: #c6f432; } #apToday .bg-navy { --rc: #ffd60a; } #apToday .bg-cyan { --rc: #ff5b3a; }
#apToday .bg-bronze { --rc: #64d2ff; } #apToday .bg-graphite { --rc: #c6f432; } #apToday .bg-forest { --rc: #ffd60a; } #apToday .bg-milk { --rc: #ff453a; }
#apToday .ap-pr circle, #apToday .bg-milk .ap-pr circle, #apToday .bg-gold .ap-pr circle, #apToday .bg-lime .ap-pr circle { stroke: var(--rc, rgba(0,0,0,.34)) !important; stroke-width: 3.6; }

/* v448: App Store-style progress — a thin white ring on a faint white track, the same on every colour (Marius picked
   this over the contrasting colours). The white Shake button gets a dark ring. */
#apToday .ap-pr circle { stroke-width: 2.8 !important; fill: none; }
#apToday .ap-pr circle.t { stroke: rgba(255,255,255,.22) !important; }
#apToday .ap-pr circle.a { stroke: rgba(255,255,255,.95) !important; stroke-linecap: round; }
#apToday .bg-milk .ap-pr circle.t { stroke: rgba(0,0,0,.1) !important; }
#apToday .bg-milk .ap-pr circle.a { stroke: #3a3a3c !important; }

/* v449: untouched today = a gentle pulse on the circle only (never reaches the label) */
#apToday .ap-act.ap-zero .ap-ti { animation: apDue 2.6s ease-in-out infinite, apPulse 1.8s ease-in-out infinite; }
@keyframes apPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.07); } }
@media (prefers-reduced-motion: reduce) { #apToday .ap-act.ap-zero .ap-ti { animation: none; } }
/* Shake: cocoa instead of white, so its white ring reads like everyone else's */
#apToday .bg-cocoa { background: linear-gradient(180deg, #9c6440, #5e3520); color: #fff; --g: 210,150,105; }

/* v451: readiness badge next to the greeting (Marius) — tap for the full Ready to train sheet */
#apToday .ap-nav { align-items: flex-end; }
#apToday .ap-ready { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 4px 8px; padding: 5px 12px 5px 5px; border: 0; border-radius: 26px; background: rgba(120,120,128,.2); color: #fff; font: inherit; cursor: pointer; flex: none; -webkit-tap-highlight-color: transparent; }
#apToday .ap-ready:active { transform: scale(.96); }
#apToday .ap-rr { position: relative; width: 40px; height: 40px; display: grid; place-items: center; }
#apToday .ap-rr svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
#apToday .ap-rr circle { fill: none; stroke-width: 4; }
#apToday .ap-rr .t { stroke: rgba(255,255,255,.14); } #apToday .ap-rr .a { stroke: var(--rc); stroke-linecap: round; }
#apToday .ap-rr b { position: relative; font-size: 14px; font-weight: 700; font-family: ui-rounded, "SF Pro Rounded", system-ui, sans-serif; }
#apToday .ap-rl { display: flex; flex-direction: column; line-height: 1.1; font-size: 15px; font-weight: 600; color: var(--rc); text-align: left; }
#apToday .ap-rl small { font-size: 11px; font-weight: 500; color: #8e8e93; }
#apToday .ap-ready .info-i { display: none !important; }

/* v457: five rings + five compact rows (Training, Hydration, Supplements, Protein, Calories) */
#apToday .ap-legend { gap: 5px !important; }
#apToday .ap-lg small { font-size: 12px !important; line-height: 1.1; }
#apToday .ap-lg b { font-size: 18px !important; line-height: 1.12 !important; }
#apToday .ap-lg b span { font-size: 12px !important; }
#apToday .ap-lg i { width: 3.5px !important; }
#apToday .ap-rings { flex: 0 0 158px !important; height: 158px !important; }
#apToday .ap-rings svg { width: 158px; height: 158px; }

/* v458: six mini rings, 3 + 3 (layout C) */
#apToday .ap-glass.ap-mini { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 6px; padding: 18px 10px 16px !important; }
#apToday .ap-mr { display: flex; flex-direction: column; align-items: center; gap: 1px; border: 0; background: none; color: #fff; font: inherit; cursor: pointer; min-width: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
#apToday .ap-mr:active { transform: scale(.95); }
#apToday .ap-mr-r { position: relative; width: 74px; height: 74px; display: grid; place-items: center; margin-bottom: 5px; }
#apToday .ap-mr-r svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
#apToday .ap-mr-r circle { fill: none; stroke-width: 6; }
#apToday .ap-mr-r .t { stroke: var(--mc); stroke-opacity: .2; }
#apToday .ap-mr-r .a { stroke: var(--mc); stroke-linecap: round; }
#apToday .ap-mr.done .ap-mr-r .t { stroke-opacity: 1; }
#apToday .ap-mr-r b { position: relative; font-family: ui-rounded, "SF Pro Rounded", system-ui, sans-serif; font-size: 17px; font-weight: 700; letter-spacing: -.02em; }
#apToday .ap-mr-n { font-size: 13px; font-weight: 600; color: var(--mc); }
#apToday .ap-mr-s { font-size: 11.5px; color: #8e8e93; }

/* v459: Mind (State of Mind) — a sunrise gradient, its own colour */
#apToday .bg-mood { background: linear-gradient(180deg, #ffd27a, #ff7f8e); color: #3a1208; --g: 255,160,130; }

/* v460: Upper / Core / Lower — the Balance card's colours, the percentage inside the circle */
#apToday .bg-bup { background: linear-gradient(180deg, #c6f432, #7ed957); color: #10200a; --g: 166,242,58; }
#apToday .bg-bcore { background: linear-gradient(180deg, #8fdcff, #3fb2f0); color: #062033; --g: 90,200,250; }
#apToday .bg-blow { background: linear-gradient(180deg, #ff7f83, #ff4a50); color: #fff; --g: 255,90,95; }
#apToday .ap-pct { font-family: ui-rounded, "SF Pro Rounded", system-ui, sans-serif; font-size: 16px; font-weight: 700; letter-spacing: -.02em; }

/* v465: Transcend — its own periwinkle centre button with the black lotus (Marius asked for this purple);
   PowerBreath — the app's own icon on its dark tile, neon-blue glow */
/* like Transcend's own centre button: glowing indigo, a big dark lotus */
#apToday .bg-trans { background: radial-gradient(circle at 50% 48%, #9d9dff 0%, #6c6cff 52%, #4a47d9 86%, #26245f 100%); --g: 108,108,255; }
#apToday .bg-trans .v180-lt { width: 66%; height: 66%; fill: #07070c; filter: drop-shadow(0 1px 2px rgba(255,255,255,.45)); }
#apToday .bg-pbreath { background: #06171c; overflow: hidden; --g: 40,170,255; }
#apToday .ap-pbimg { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
#apToday .bg-pbreath .ap-pr circle.a { stroke: #7fe9ff !important; } #apToday .bg-pbreath .ap-pr circle.t { stroke: rgba(127,233,255,.2) !important; }

/* v468: Astra + Tarot — their own app icons, cropped to the round button; gold-violet glow */
#apToday .bg-astra { background: #15123a; overflow: hidden; --g: 176,59,214; }
#apToday .bg-tarot { background: #22113a; overflow: hidden; --g: 243,200,119; }
#apToday .bg-astra .ap-pbimg, #apToday .bg-tarot .ap-pbimg { transform: scale(1.18); }

/* v480: on refresh, keep Today hidden until the Apple Today has been built, so the old layout never shows for a beat */
html.skin-apple #s-home:not(:has(#apToday)) { visibility: hidden; }

/* v489: Balance — show all three shares under the bar */
#apToday .ap-bleg { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 9px; font-size: 12.5px; color: #8e8e93; }
#apToday .ap-bleg span { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
#apToday .ap-bleg i { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
#apToday .ap-bleg b { color: #fff; font-weight: 600; font-variant-numeric: tabular-nums; }