/* TopLeft on iPhone, 393 × 886. Colours sampled from the app's own App Store captures. */
.app-phone { color: #111; background: #eef2f5; }
.ph-bg { position: absolute; inset: 0; background: linear-gradient(168deg, #d6ebe0 0%, #e6efec 20%, #eef2f5 44%, #f2f1f6 100%); }
.ph-sb { position: absolute; left: 0; top: 0; width: 393px; height: 54px; display: flex; justify-content: space-between; align-items: center; padding: 6px 28px 0 44px; font-size: 16.5px; font-weight: 600; letter-spacing: -0.01em; color: #000; z-index: 4; }
.sb-ic { display: flex; align-items: center; gap: 5px; }
.sb-ic .sf { width: 17px; height: 12px; }
.sb-batt { display: block; width: 25px; height: 12px; border-radius: 4px; border: 1.2px solid rgba(0, 0, 0, 0.38); padding: 1.5px; position: relative; }
.sb-batt i { display: block; width: 82%; height: 100%; border-radius: 2px; background: #000; }
.ph-btn {
  position: absolute; top: 69px; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; color: #1d1d1f; z-index: 3;
  background: rgba(255, 255, 255, 0.74); box-shadow: 0 3px 10px rgba(30, 40, 50, 0.07), inset 0 0 0 0.6px rgba(0, 0, 0, 0.09);
}
.ph-gear { left: 281px; }
.ph-moon { left: 333px; }

/* a board page: the title, the axis labels and the four corners */
.ph-pager { position: absolute; inset: 0; }
.pp { position: absolute; left: 0; top: 0; width: 393px; height: 886px; }
.pp-title { position: absolute; left: 0; right: 0; top: 184px; text-align: center; font-size: 31px; line-height: 40px; font-weight: 700; letter-spacing: -0.012em; color: #000; }
.ax { --big: 0; position: absolute; font-size: 13px; line-height: 18px; font-weight: 500; white-space: nowrap; color: color-mix(in oklab, #8b8b90 calc((1 - var(--big)) * 100%), #0c0c0e); transform-origin: 50% 100%; }
.ax-imp, .ax-nimp { top: 225px; transform: translate(-50%, calc(var(--big) * 3px)) scale(calc(1 + var(--big) * 0.3)); font-weight: calc(500 + var(--big) * 160); }
.ax-imp { left: 104px; }
.ax-nimp { left: 289px; }
.ax-r { left: 7px; width: 0; height: 0; }
.ax-r span { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%) rotate(-90deg) scale(calc(1 + var(--big) * 0.24)); font-weight: calc(500 + var(--big) * 160); }
.ax-urg { top: 354px; }
.ax-nurg { top: 566px; }

.pt {
  --lift: 0; position: absolute; left: 0; top: 0; width: 178px; height: 204px; border-radius: 17px; transform-origin: 0 0; overflow: hidden;
  box-shadow: 0 calc(5px + var(--lift) * 12px) calc(8px + var(--lift) * 22px) calc(-3px - var(--lift) * 2px) rgba(20, 40, 30, calc(0.1 + var(--lift) * 0.1));
}
.pt::before { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 1.5px 4px var(--pin); pointer-events: none; }
.pt-tl { background: #ccecd1; --pin: rgba(30, 90, 45, 0.16); --tx: #1e4d2b; }
.pt-tr, .pt-bl { background: #fdedb5; --pin: rgba(120, 95, 10, 0.14); --tx: #5b4810; }
.pt-br { background: #fcd4cf; --pin: rgba(140, 50, 45, 0.14); --tx: #7b2f2c; }
.pt-rows { position: absolute; left: 14px; top: 13px; right: 9px; display: flex; flex-direction: column; gap: 7.5px; }
.pr { position: relative; padding-left: 15px; font-size: 11.5px; line-height: 16px; color: var(--tx); letter-spacing: -0.005em; }
.pr-dia {
  position: absolute; left: 1.5px; top: 4px; width: 8.5px; height: 8.5px; border-radius: 1.6px; transform: rotate(45deg);
  background: linear-gradient(135deg, #8fd3ff, #1a8cf6 55%, #0a63c6); box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.45);
}
.pr-chk { position: absolute; left: -1.5px; top: 2px; line-height: 0; color: #8e8e93; opacity: 0; }
.pr.done span { color: color-mix(in oklab, var(--tx) 45%, #8e8e93); text-decoration: line-through; text-decoration-color: rgba(142, 142, 147, 0.9); }
.pr.done .pr-dia { opacity: 0; }
.pr.done .pr-chk { opacity: 1; }

/* the period bar: two rows of horizons and the blue capsule that glides between them */
.ph-bar {
  position: absolute; left: 45px; top: 700px; width: 303px; height: 86px; border-radius: 27px; z-index: 2;
  background: #f9f8fd; box-shadow: 0 10px 26px rgba(30, 40, 60, 0.08), inset 0 0 0 0.6px rgba(0, 0, 0, 0.07);
}
.ph-cap { position: absolute; left: -45px; top: -700px; height: 34px; border-radius: 17px; background: #0886ff; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.14); }
.ph-chip { --on: 0; position: absolute; transform: translate(-50%, -50%); white-space: nowrap; font-size: 15px; line-height: 20px; letter-spacing: -0.01em;
  font-weight: calc(400 + var(--on) * 200); color: color-mix(in oklab, #ffffff calc(var(--on) * 100%), #1d1d1f); }
.ph-chip[data-i="0"] { left: 45px; top: 24px; }
.ph-chip[data-i="1"] { left: 135px; top: 24px; }
.ph-chip[data-i="2"] { left: 241px; top: 24px; }
.ph-chip[data-i="3"] { left: 111px; top: 60px; }
.ph-chip[data-i="4"] { left: 200px; top: 60px; }

.ph-touch { position: absolute; left: 0; top: 0; z-index: 40; width: 44px; height: 44px; border-radius: 50%; visibility: hidden; transform-origin: 50% 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.55) 0 30%, rgba(30, 40, 50, 0.22) 31% 100%); box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.85), 0 4px 14px rgba(0, 0, 0, 0.18); }

/* the "before": a plain list that treats every task the same */
.app-list { background: #fbfbfa; color: #1c1c1e; }
.ls-sb { position: absolute; left: 0; top: 0; width: 393px; height: 54px; display: flex; justify-content: space-between; align-items: center; padding: 6px 28px 0 44px; font-size: 16.5px; font-weight: 600; color: #000; }
.ls-h { position: absolute; left: 20px; top: 78px; font-size: 34px; line-height: 41px; font-weight: 700; letter-spacing: -0.02em; }
.ls-n { position: absolute; left: 21px; top: 122px; font-size: 15px; color: #8e8e93; }
.ls-row { position: absolute; left: 0; width: 393px; height: 52px; padding-left: 56px; display: flex; align-items: center; font-size: 16.5px; letter-spacing: -0.01em; color: #1c1c1e; }
.ls-row::before { content: ""; position: absolute; left: 20px; top: 50%; width: 21px; height: 21px; margin-top: -11.5px; border-radius: 50%; box-shadow: inset 0 0 0 1.6px #c7c7cc; }
.ls-row::after { content: ""; position: absolute; left: 56px; right: 0; bottom: 0; height: 0.5px; background: #dcdce0; }

/* the board under a sheet: it recedes as the sheet rises to full height */
.ph-under { position: absolute; inset: 0; transform-origin: 50% 0; overflow: hidden; }
.ph-dim { position: absolute; inset: 0; z-index: 20; background: #000; opacity: 0; pointer-events: none; }

/* the corner sheet: the corner's own tint, its name in its colour, its tasks, and the field */
.ph-sheet { position: absolute; left: 0; top: 0; width: 393px; height: 900px; z-index: 30; visibility: hidden; border-radius: 38px 38px 0 0;
  background: linear-gradient(180deg, #e2f6e6, #d6f1dc 60%, #d2efd8); box-shadow: 0 -6px 30px rgba(0, 0, 0, 0.12); }
.sh-grab { position: absolute; left: 178px; top: 7px; width: 37px; height: 5px; border-radius: 3px; background: rgba(30, 60, 40, 0.24); }
.sh-h { position: absolute; left: 22px; top: 34px; font-size: 26px; line-height: 32px; font-weight: 640; letter-spacing: -0.015em; white-space: nowrap; color: #1f8a3f; }
.sh-h .sh-j { color: #7b8a80; font-weight: 520; }
.sh-list { position: absolute; left: 0; right: 0; top: 90px; height: 330px; }
.sh-r { position: absolute; left: 0; top: 0; width: 393px; height: 54px; padding: 0 22px; display: flex; align-items: center; font-size: 17px; letter-spacing: -0.01em; color: #165c2b; }
.sh-r::after { content: ""; position: absolute; left: 22px; right: 0; bottom: 0; height: 0.6px; background: rgba(28, 110, 52, 0.22); }
.sh-r.done span { color: #6aa77b; text-decoration: line-through; text-decoration-color: #3f9a58; }
.sh-swipe { position: absolute; left: 0; top: 0; height: 54px; background: #34c759; display: flex; align-items: center; padding-left: 20px; overflow: hidden; }
.sh-swipe b { color: #fff; font-size: 15px; font-weight: 600; }
.sh-field { position: absolute; left: 16px; top: 0; width: 361px; height: 54px; border-radius: 27px; display: flex; align-items: center;
  background: rgba(255, 255, 255, 0.72); box-shadow: inset 0 1px 3px rgba(20, 70, 35, 0.12), 0 6px 18px rgba(20, 70, 35, 0.1); }
.sh-ph, .sh-txt { position: absolute; left: 20px; font-size: 17px; letter-spacing: -0.01em; white-space: nowrap; }
.sh-ph { color: rgba(22, 92, 43, 0.42); }
.sh-txt { color: #134a24; }
.sh-caret { position: absolute; left: 0; top: 16px; width: 2px; height: 22px; border-radius: 1px; background: #1f8a3f; }
.sh-send { position: absolute; right: 12px; top: 12px; width: 30px; height: 30px; color: #2a9e4b; line-height: 0; transform-origin: 50% 50%; }

/* the keyboard, after iOS's light keyboard */
.ph-kb { position: absolute; left: 0; top: 0; width: 393px; height: 340px; z-index: 40; visibility: hidden; background: rgba(214, 217, 223, 0.97); border-radius: 26px 26px 0 0; box-shadow: 0 -0.5px 0 rgba(0, 0, 0, 0.12); }
.kb-pred { position: absolute; left: 0; right: 0; top: 0; height: 44px; display: flex; align-items: center; justify-content: space-around; font-size: 16px; color: #333; }
.kb-pred span { flex: 1; text-align: center; }
.kb-pred span + span { box-shadow: -0.5px 0 0 rgba(0, 0, 0, 0.18); }
.kb-k { position: absolute; left: 0; top: 0; height: 44px; border-radius: 8px; display: grid; place-items: center; font-size: 22px; font-weight: 400; color: #111;
  background: #fdfdfe; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.28); }
.kb-fn { background: #abb1ba; font-size: 16px; color: #111; }
.kb-emoji { position: absolute; left: 22px; top: 282px; color: #555; line-height: 0; }
.kb-mic { position: absolute; right: 22px; top: 282px; color: #555; line-height: 0; }
.kb-pop { position: absolute; left: 0; top: 0; width: 52px; height: 58px; border-radius: 10px 10px 14px 14px; display: grid; place-items: center; visibility: hidden;
  background: #fdfdfe; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.22); font-size: 32px; font-weight: 400; color: #111; }

/* a context menu: the page frosts over, the preview lifts, the menu opens */
.ph-ctx { position: absolute; inset: 0; z-index: 50; visibility: hidden; }
.cx-frost { position: absolute; inset: 0; background: rgba(236, 238, 242, 0.86); }
.cx-gauge { position: absolute; left: 0; top: 0; width: 353px; height: 133px; border-radius: 22px; transform-origin: 50% 0;
  background: #fbfbfd; box-shadow: 0 18px 50px rgba(20, 30, 40, 0.18), 0 2px 6px rgba(20, 30, 40, 0.06); overflow: hidden; }
.gg-glow { position: absolute; left: 16px; right: 16px; top: 22px; height: 40px; transform-origin: 0 50%; border-radius: 20px;
  background: radial-gradient(ellipse 60% 70% at 50% 50%, rgba(52, 199, 89, 0.16), transparent 70%), linear-gradient(90deg, rgba(52, 199, 89, 0.14), rgba(255, 204, 0, 0.14) 60%, rgba(255, 59, 48, 0.14)); }
.gg-track { position: absolute; left: 22px; right: 22px; top: 38px; height: 7px; border-radius: 4px; background: rgba(120, 120, 128, 0.16); }
.gg-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 4px; background: linear-gradient(90deg, #2fb75a, #e7bd12 62%, #e5483d); }
.gg-dot { position: absolute; top: 50%; width: 15px; height: 15px; margin: -7.5px 0 0 -7.5px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), inset 0 0 0 0.5px rgba(0, 0, 0, 0.1); }
.gg-l, .gg-r { position: absolute; top: 64px; display: flex; flex-direction: column; font-size: 15px; line-height: 19px; color: #3a3a3c; }
.gg-l b, .gg-r b { font-weight: 600; color: #111; }
.gg-l { left: 22px; }
.gg-r { right: 22px; text-align: right; }
.cx-menu { position: absolute; left: 0; top: 0; width: 250px; border-radius: 16px; transform-origin: 0 0; overflow: hidden;
  background: rgba(250, 250, 252, 0.98); box-shadow: 0 16px 40px rgba(20, 30, 40, 0.2), 0 1px 3px rgba(20, 30, 40, 0.08); }
.cx-menu-chip { width: 300px; transform-origin: 0 100%; }
.cx-i { display: flex; justify-content: space-between; align-items: center; height: 44px; padding: 0 16px; font-size: 16.5px; letter-spacing: -0.01em; color: #111; }
.cx-i + .cx-i { box-shadow: inset 0 0.6px 0 rgba(60, 60, 67, 0.2); }
.cx-i.cx-sep + .cx-i { box-shadow: inset 0 7px 0 rgba(60, 60, 67, 0.08); height: 51px; padding-top: 7px; }
.cx-i .sf { color: #333; }
.cx-chip { position: absolute; left: 0; top: 0; height: 34px; width: 71px; border-radius: 17px; display: grid; place-items: center; transform-origin: 50% 50%;
  font-size: 15px; font-weight: 600; color: #fff; background: #0886ff; box-shadow: 0 10px 26px rgba(0, 0, 0, 0.2); }

/* history: the panel slides in from the left over a dark wash, the past corners stand at the right */
.ph-hist { position: absolute; inset: 0; z-index: 45; visibility: hidden; }
.hs-dim { position: absolute; inset: 0; background: linear-gradient(135deg, rgba(0, 0, 0, 0.145), rgba(0, 0, 0, 0.8) 55%, #000); }
.hs-panel { position: absolute; left: 0; top: 0; width: 283px; height: 886px; border-radius: 0 60px 60px 0; background: linear-gradient(180deg, #e3f7e8, #d5f2dd); overflow: hidden; }
.hs-filters { position: absolute; left: 22px; top: 96px; width: 240px; height: 132px; }
.hs-f { --on: 0; position: absolute; width: 104px; height: 52px; display: grid; place-items: center; transform: scale(calc(0.9 + var(--on) * 0.2)); }
.hs-f i { position: absolute; inset: 0; border-radius: 26px; background: rgba(255, 255, 255, calc(0.32 + var(--on) * 0.42));
  box-shadow: inset -4px -4px 6px rgba(0, 0, 0, 0.04), inset 3px 3px 3px rgba(255, 255, 255, 0.5), 0 3px 10px rgba(20, 70, 45, calc(0.06 + var(--on) * 0.12)); }
.hs-f span { position: relative; font-family: var(--sfr); font-size: 22px; letter-spacing: -0.01em; font-weight: calc(250 + var(--on) * 450); color: #0d3b2a; opacity: calc(0.7 + var(--on) * 0.3); }
.hs-f[data-f="3"] { left: 0; top: 0; }
.hs-f[data-f="2"] { left: 124px; top: 0; }
.hs-f[data-f="1"] { left: 0; top: 66px; }
.hs-f[data-f="0"] { left: 124px; top: 66px; }
.hs-list { position: absolute; left: 0; top: 250px; width: 283px; }
.hs-sel { position: absolute; left: 0; top: 0; width: 275px; height: 58px; border-radius: 10px; background: rgba(12, 60, 40, 0.12); }
.hs-r { --on: 0; position: absolute; left: 0; width: 283px; height: 62px; padding-left: 40px; display: flex; align-items: center; font-size: 19px; letter-spacing: -0.01em;
  color: rgba(16, 66, 46, calc(0.46 + var(--on) * 0.54)); font-weight: calc(400 + var(--on) * 120); }
.hs-r[data-i="0"] { top: 0; } .hs-r[data-i="1"] { top: 62px; } .hs-r[data-i="2"] { top: 124px; } .hs-r[data-i="3"] { top: 186px; } .hs-r[data-i="4"] { top: 248px; }
.hs-r[data-i="5"] { top: 310px; } .hs-r[data-i="6"] { top: 372px; } .hs-r[data-i="7"] { top: 434px; } .hs-r[data-i="8"] { top: 496px; }
.hs-tiles { position: absolute; right: 6px; top: 96px; width: 104px; display: flex; flex-direction: column; gap: 16px; }
.hs-t { position: relative; width: 104px; height: 152px; border-radius: 9px; overflow: hidden; box-shadow: inset -2px -2px 3px rgba(0, 0, 0, 0.16), inset 2px 2px 2px rgba(255, 255, 255, 0.4); }
.hs-tl { background: #b3e8bb; } .hs-tr, .hs-bl { background: #fde9a6; } .hs-br { background: #fcc9c6; }
.hs-rows { position: absolute; left: 5px; right: 4px; top: 8px; display: flex; flex-direction: column; gap: 4px; }
.hs-rows p { position: relative; padding-left: 9px; font-size: 7.4px; line-height: 9.5px; color: #111; }
.hs-rows p i { position: absolute; left: 0.5px; top: 2.2px; width: 5px; height: 5px; border-radius: 1px; transform: rotate(45deg); background: linear-gradient(135deg, #8fd3ff, #1a8cf6 55%, #0a63c6); }
.hs-sheet { position: absolute; left: 0; top: 0; width: 393px; height: 600px; border-radius: 38px 38px 0 0; visibility: hidden; z-index: 3;
  background: linear-gradient(180deg, #e2f6e6, #d6f1dc); box-shadow: 0 -6px 30px rgba(0, 0, 0, 0.18); }
.hs-sh-h { position: absolute; left: 24px; top: 30px; font-size: 25px; font-weight: 640; letter-spacing: -0.01em; color: #2a9e4b; }
.hs-search { position: absolute; left: 20px; right: 20px; top: 76px; height: 38px; border-radius: 12px; display: flex; align-items: center; gap: 7px; padding-left: 11px; font-size: 16.5px; color: rgba(60, 60, 67, 0.55); background: rgba(118, 118, 128, 0.12); }
.hs-sh-rows { position: absolute; left: 0; right: 0; top: 128px; }
.hs-sh-rows p { height: 52px; display: flex; align-items: center; padding-left: 55px; font-size: 17px; color: #165c2b; box-shadow: inset 0 -0.6px 0 rgba(28, 110, 52, 0.2); }
.hs-sh-rows p.done { color: #6aa77b; text-decoration: line-through; }