/* TopLeft on iPhone and Mac. --mac (0 iPhone → 1 Mac) is lerped per piece by the morph; --dk (dark mode)
   is set on the app. Colours sampled from TopLeft's own screenshots. */
.app-topleft {
  --dk: 0;
  --ink: color-mix(in oklab, #1c1c1e calc((1 - var(--dk)) * 100%), #f1f1f3);
  --ink2: color-mix(in oklab, #8a8a8f calc((1 - var(--dk)) * 100%), #9a9aa0);
  color: var(--ink);
  font-family: var(--sf);
  /* the Mac's desktop, seen around the window */
  background: radial-gradient(ellipse 90% 70% at 20% 10%, #bfe3c7, transparent 70%), radial-gradient(ellipse 80% 80% at 90% 90%, #e9dca6, transparent 70%), linear-gradient(140deg, #a9d6b5, #d9e6c4 50%, #e7d9a9);
}

/* the window: on the iPhone, the screen's own soft mint-to-lavender background */
.tl-win {
  overflow: hidden;
  background: linear-gradient(180deg,
    color-mix(in oklab, #e3efeb calc((1 - var(--mac)) * 100%), #ffffff) 0%,
    color-mix(in oklab, #eef2f1 calc((1 - var(--mac)) * 100%), #ffffff) 45%,
    color-mix(in oklab, #f2f1f6 calc((1 - var(--mac)) * 100%), #ffffff) 100%);
  box-shadow: 0 calc(var(--mac) * 16px) calc(var(--mac) * 44px) rgba(0, 0, 0, calc(var(--mac) * 0.22)), 0 0 0 calc(var(--mac) * 0.7px) rgba(0, 0, 0, 0.28);
}
.tl-win::after { content: ""; position: absolute; inset: 0; background: #1e1e20; opacity: calc(var(--dk) * var(--mac)); }
.app-topleft::before { content: ""; position: absolute; inset: 0; background: linear-gradient(140deg, #1d3324, #2b2a1c); opacity: calc(var(--dk) * 0.85); pointer-events: none; }

.tl-sb { display: flex; justify-content: space-between; align-items: center; padding: 15px 30px 0 36px; font-size: 16px; font-weight: 600; color: #111; }
.tl-sb span { display: flex; align-items: center; gap: 6px; }
.tl-sb svg { height: 11px; fill: currentColor; }
.tl-batt { display: block; width: 25px; height: 12px; border-radius: 4px; border: 1.2px solid currentColor; padding: 1.5px; }
.tl-batt i { display: block; width: 80%; height: 100%; border-radius: 2px; background: currentColor; }

.tl-menu {
  display: flex; align-items: center; gap: 15px; padding: 0 14px; font-size: 11.5px; font-weight: 500; color: #1d1d1f;
  background: rgba(255, 255, 255, 0.58); box-shadow: 0 0.5px 0 rgba(0, 0, 0, 0.12);
}
.tl-menu b { font-weight: 700; }
.tl-menu em { font-style: normal; }
.tl-menu-x { margin-left: auto; display: grid; place-items: center; width: 22px; height: 18px; border-radius: 4px; color: #2f9e4f; background: rgba(47, 158, 79, 0.14); }

/* the picker's card, which becomes the sidebar */
.tl-side {
  overflow: hidden;
  border-radius: calc(var(--r1) * 1px) calc(var(--r2) * 1px) calc(var(--r3) * 1px) calc(var(--r4) * 1px);
  background: color-mix(in oklab, #f9f8fd calc((1 - var(--mac)) * 100%), #ececea);
  box-shadow: 0 8px 22px rgba(0, 0, 0, calc((1 - var(--mac)) * 0.07)), inset 0 0 0 1px rgba(0, 0, 0, calc(0.08 - var(--mac) * 0.04)), inset -0.5px 0 0 rgba(0, 0, 0, calc(var(--mac) * 0.1));
}
.tl-side::after { content: ""; position: absolute; inset: 0; background: #2b2b2e; opacity: calc(var(--dk) * var(--mac)); }

.tl-lights { display: flex; gap: 10.5px; align-items: center; height: 12px; width: 150px; }
.tl-lights i { width: 12px; height: 12px; border-radius: 50%; background: #ff5f57; box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.12); }
.tl-lights i:nth-child(2) { background: #febc2e; }
.tl-lights i:nth-child(3) { background: #28c840; }
.tl-lights span { margin-left: auto; color: color-mix(in oklab, #5e5e63 calc((1 - var(--dk)) * 100%), #c8c8cc); display: grid; place-items: center; }

.tl-search { display: flex; align-items: center; gap: 6px; padding: 0 8px; font-size: 11.5px; color: var(--ink2); background: color-mix(in oklab, rgba(0, 0, 0, 0.055) calc((1 - var(--dk)) * 100%), rgba(255, 255, 255, 0.08)); }
.tl-mmx { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; overflow: hidden; border-radius: 4px; }
.tl-mmx i { display: grid; place-items: center; font-style: normal; font-size: 8.6px; font-weight: 700; color: #2e3a2f; }
.tl-mmx i[data-q="0"] { background: color-mix(in oklab, #b4e8b8 calc((1 - var(--dk)) * 100%), #2f7a43); box-shadow: inset 0 0 0 1.4px color-mix(in oklab, #25502e calc((1 - var(--dk)) * 100%), #7fe39a); font-size: 9.6px; }
.tl-mmx i[data-q="1"], .tl-mmx i[data-q="2"] { background: color-mix(in oklab, #fcec9b calc((1 - var(--dk)) * 100%), #8a7a1f); }
.tl-mmx i[data-q="3"] { background: color-mix(in oklab, #f2aeac calc((1 - var(--dk)) * 100%), #8c3a35); }
.tl-mmx i { color: color-mix(in oklab, #2e3a2f calc((1 - var(--dk)) * 100%), #f2f2f2); }

.tl-head { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; color: var(--ink2); white-space: nowrap; }
.tl-proj { width: 152px; }
.tl-proj .tl-head { height: 22px; padding-left: 5px; }
.tl-proj p:not(.tl-head) { display: flex; justify-content: space-between; align-items: center; height: 26px; padding: 0 9px 0 6px; font-size: 13px; color: var(--ink); white-space: nowrap; }
.tl-proj p b { font-weight: 700; color: var(--ink2); }
.tl-proj .tl-add { justify-content: flex-start !important; gap: 9px; color: var(--ink) !important; }
.tl-add svg { color: #34c759; }

.tl-cal { width: 150px; height: 140px; }
.tl-cal > div { position: absolute; inset: 0; }
.cal-h { display: flex; justify-content: space-between; align-items: center; padding: 0 4px; height: 20px; font-size: 11px; color: var(--ink2); }
.cal-h b { color: var(--ink); font-weight: 600; }
.cal-g { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px 2px; margin-top: 8px; }
.cal-g i { --ring: 0; font-style: normal; display: grid; place-items: center; height: 22px; font-size: 11px; color: var(--ink); border-radius: 11px; box-shadow: 0 0 0 calc(var(--ring) * 1.2px) #34c759; background: rgba(52, 199, 89, calc(var(--ring) * 0.12)); }
.cal-g i.on { --ring: 1; }

/* the horizons: picker buttons on the iPhone, sidebar rows on the Mac */
.tl-hsel { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06); }
.tl-hz { --sel: 0; --on: 0; white-space: nowrap; }
.hz-l {
  position: absolute; top: 50%; left: calc(var(--lx) * 1px + var(--lc) * 50%);
  transform: translate(calc(var(--lc) * -50%), -50%);
  font-size: calc(var(--fs) * 1px); font-weight: calc(400 + var(--sel) * 200 + var(--on) * 120);
  color: color-mix(in oklab, #ffffff calc(var(--sel) * 100%), var(--ink));
  letter-spacing: -0.01em;
}
.hz-c { position: absolute; right: 9px; top: 50%; transform: translateY(-50%); font-size: 11.5px; font-weight: 700; color: var(--ink2); opacity: var(--cnt); }

/* the board's title: big and centred, then the toolbar's */
.tl-title { overflow: visible; }
.tt { position: absolute; top: 0; left: calc(var(--lc) * 50%); font-size: 32px; line-height: 42px; font-weight: 700; letter-spacing: -0.012em; white-space: nowrap; color: var(--ink); }
.tt-a { transform: translateX(calc(var(--lc) * -50%)); }
.tt-b { opacity: 0; }

/* toolbar */
.tl-pro {
  display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 11.6px; font-weight: 600; white-space: nowrap; color: var(--ink);
  background: color-mix(in oklab, #ffffff calc((1 - var(--dk)) * 100%), #3a3a3d); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), inset 0 0 0 0.6px rgba(0, 0, 0, 0.12);
}
.tl-tools { background: color-mix(in oklab, #ffffff calc((1 - var(--dk)) * 100%), #3a3a3d); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), inset 0 0 0 0.6px rgba(0, 0, 0, 0.12); }
.tl-ico { color: color-mix(in oklab, #3a3a3c calc((1 - var(--dk)) * 100%), #e6e6e8); line-height: 0; }
.tl-btn {
  display: grid; place-items: center; color: color-mix(in oklab, #1d1d1f calc((1 - var(--dk)) * 100%), #f0f0f2);
  background: color-mix(in oklab, rgba(255, 255, 255, calc(var(--gb) * 0.72)) calc((1 - var(--dk)) * 100%), rgba(70, 70, 74, calc(var(--gb) * 0.9)));
  box-shadow: 0 2px 8px rgba(0, 0, 0, calc(var(--gb) * 0.06)), inset 0 0 0 0.7px rgba(0, 0, 0, calc(var(--gb) * 0.1));
}
.tl-btn span { display: grid; place-items: center; line-height: 0; }
.tl-btn svg { width: calc(var(--ic) * 1px); height: calc(var(--ic) * 1px); }

/* the iPhone board's axes */
.tl-ax { text-align: center; font-size: 13px; line-height: 18px; font-weight: 500; color: #8b8b90; white-space: nowrap; }
.tl-ax-r span { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-90deg); }

/* the four corners */
.tl-q[data-q="0"] { --qp: #ccecd1; --qm: #b4e8b8; --qd: #287e3d; }
.tl-q[data-q="1"], .tl-q[data-q="2"] { --qp: #fdedb5; --qm: #fcec9b; --qd: #968013; }
.tl-q[data-q="3"] { --qp: #fcd4cf; --qm: #f2aeac; --qd: #96332d; }
.tl-q {
  background: color-mix(in oklab, color-mix(in oklab, var(--qp) calc((1 - var(--mac)) * 100%), var(--qm)) calc((1 - var(--dk)) * 100%), var(--qd));
  box-shadow: inset 0 0 0 calc(var(--mac) * 0.8px) rgba(0, 0, 0, 0.07);
}
/* in dark mode the app paints each corner as a soft gradient of the system colour over the dark window
   (Quadrant.swift stacks the system green, yellow and red at 29% blurred + 19% + 19%), not a flat fill */
.tl-q { --qs: #30d158; }
.tl-q[data-q="1"], .tl-q[data-q="2"] { --qs: #ffd60a; }
.tl-q[data-q="3"] { --qs: #ff453a; }
.tl-q::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: var(--dk);
  background: radial-gradient(120% 90% at 85% 0%, color-mix(in oklab, var(--qs) 30%, transparent), transparent 70%),
    linear-gradient(195deg, color-mix(in oklab, var(--qs) 50%, #1e1e1e), color-mix(in oklab, var(--qs) 27%, #1e1e1e));
}
.tl-ql { font-size: 11px; font-weight: 700; white-space: nowrap; }
.tl-ql[data-q="0"] { color: color-mix(in oklab, #2f6b3a calc((1 - var(--dk)) * 100%), #bfeec6); }
.tl-ql[data-q="1"], .tl-ql[data-q="2"] { color: color-mix(in oklab, #876a12 calc((1 - var(--dk)) * 100%), #f7e6a0); }
.tl-ql[data-q="3"] { color: color-mix(in oklab, #8f3b37 calc((1 - var(--dk)) * 100%), #f6c4c1); }
.tl-nt { display: flex; align-items: center; padding-left: 9px; font-size: 11.3px; color: rgba(var(--ntc, 0, 0, 0), 0.36); background: color-mix(in oklab, rgba(255, 255, 255, 0.55) calc((1 - var(--dk)) * 100%), rgba(255, 255, 255, 0.07)); }

/* tasks: a narrow, wrapping copy for the iPhone tile and a one-line copy for the Mac, crossfaded in flight */
.tl-task { --wd: 0; --fade: 0; font-size: 11.5px; line-height: 16px; }
.tl-task[data-q="0"] { --tink: #1e4d2b; }
.tl-task[data-q="1"], .tl-task[data-q="2"] { --tink: #5b4810; }
.tl-task[data-q="3"] { --tink: #7b2f2c; }
.tl-task.done { --fade: 1; }
.tk-in { position: relative; --fade: inherit; }
.tk-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, #9ad7ff, #1a8cf6 55%, #0a63c6); box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.45);
}
.tk-chk { position: absolute; left: -1px; top: 2px; line-height: 0; color: #8e8e93; opacity: 0; }
.tl-task.done .tk-dia { display: none; }
.tl-task.done .tk-chk { opacity: 1; }
.tk-a, .tk-b {
  position: absolute; left: 15px; top: 0;
  color: color-mix(in oklab, color-mix(in oklab, color-mix(in oklab, var(--tink) calc((1 - var(--wd)) * 100%), #262628) calc((1 - var(--dk)) * 100%), #ececee) calc((1 - var(--fade) * 0.55) * 100%), #8e8e93);
  text-decoration: line-through; text-decoration-color: rgba(142, 142, 147, var(--fade)); text-decoration-thickness: 1px;
}
.tk-a { width: 141px; opacity: calc(1 - var(--wd)); }
.tk-b { white-space: nowrap; opacity: var(--wd); }
.tk-strike { display: none; }
/* the task being typed: a field behind it, a caret after it */
.tk-field { position: absolute; left: 10px; top: -4px; width: 146px; height: 24px; border-radius: 8px; background: rgba(255, 255, 255, 0.7); box-shadow: inset 0 0 0 1px rgba(30, 77, 43, 0.18); opacity: var(--typing, 0); }
.tk-caret { position: absolute; top: 1px; width: 1.6px; height: 14px; border-radius: 1px; background: #1282e0; opacity: var(--typing, 0); left: calc(15px + var(--cx, 0) * 1px); }
.tk-a, .tk-b { z-index: 1; }
.tl-task { --lift: 0; }
.tl-task.moving .tk-in { filter: drop-shadow(0 calc(var(--lift) * 6px) calc(var(--lift) * 8px) rgba(0, 0, 0, calc(var(--lift) * 0.18))); }

/* a corner opening up to fill the board */
.tl-zoom {
  position: absolute; left: 0; top: 0; visibility: hidden; overflow: hidden; border-radius: 17px; z-index: 5;
  background: #ccecd1; box-shadow: 0 18px 40px rgba(30, 77, 43, 0.16); --zc: 0;
}
.zm-h { padding: 22px 20px 4px; font-size: 19px; font-weight: 400; color: rgba(30, 77, 43, 0.45); white-space: nowrap; opacity: var(--zc); }
.zm-h b { color: #1e4d2b; font-weight: 700; }
.zm-c { padding: 0 20px 10px; font-size: 12px; color: rgba(30, 77, 43, 0.6); opacity: var(--zc); }
.zm-r { display: flex; align-items: center; gap: 10px; margin: 0 20px; padding: 12px 0; font-size: 14px; color: #1e4d2b; border-bottom: 1px solid rgba(30, 77, 43, 0.12); white-space: nowrap; opacity: var(--zc); }
.zm-r i { width: 16px; height: 16px; border-radius: 50%; box-shadow: inset 0 0 0 1.6px #34c759; flex: none; }

/* the menu-bar matrix */
.mbx-in {
  --open: 0; position: absolute; inset: 0; border-radius: 13px; overflow: hidden;
  background: #e2f3df; box-shadow: 0 14px 34px rgba(0, 0, 0, 0.2), inset 0 0 0 0.6px rgba(0, 0, 0, 0.18);
  clip-path: inset(0 0 calc((1 - var(--open)) * 100%) 0 round 13px);
  transform: translateY(calc((1 - var(--open)) * -10px)); opacity: min(1, calc(var(--open) * 4));
}
.mbx-q { position: absolute; left: 50px; right: 12px; top: 12px; display: flex; justify-content: space-between; }
.mbx-q i { position: relative; width: 26px; height: 18px; border-radius: 4px; box-shadow: inset 0 0 0 1.6px #1d1d1f; }
.mbx-q i b { position: absolute; width: 10px; height: 6px; border-radius: 1.5px; background: #1d1d1f; }
.mbx-q i[data-q="0"] { box-shadow: inset 0 0 0 1.8px #2ea44f; }
.mbx-q i[data-q="0"] b { left: 4px; top: 4px; background: #2ea44f; }
.mbx-q i[data-q="1"] b { right: 4px; top: 4px; }
.mbx-q i[data-q="2"] b { left: 4px; bottom: 4px; }
.mbx-q i[data-q="3"] b { right: 4px; bottom: 4px; }
.mbx-rail { position: absolute; left: 14px; top: 46px; display: flex; flex-direction: column; gap: 6px; font-size: 16px; color: #1d1d1f; font-family: ui-rounded, var(--sf); }
.mbx-rail b { font-weight: 800; }
.mbx-c { position: absolute; left: 50px; right: 10px; top: 48px; text-align: center; font-size: 12px; font-weight: 600; color: #1d1d1f; }
.mbx-rows { position: absolute; left: 50px; right: 10px; top: 72px; }
.mbx-r { display: flex; gap: 8px; align-items: flex-start; font-size: 11.5px; line-height: 15px; color: #1d1d1f; padding: 6px 0; border-bottom: 0.6px solid rgba(0, 0, 0, 0.08); }
.mbx-r i { width: 13px; height: 13px; border-radius: 50%; box-shadow: inset 0 0 0 1.4px #6cc483; flex: none; margin-top: 1px; }
.mbx-f { position: absolute; left: 0; right: 0; bottom: 0; height: 26px; display: flex; align-items: center; gap: 4px; padding-left: 10px; color: #3a3a3c; border-top: 0.6px solid rgba(0, 0, 0, 0.14); }

/* measuring how tasks wrap on the iPhone */
.tl-probe { position: fixed !important; inset: 0 auto auto -2000px !important; width: 400px; height: auto; visibility: hidden; }
.tl-probe .tk-a { position: static; display: block; width: 141px; font: 11.5px/16px var(--sf); }