/* Focus on every platform: the same pieces dressed for each screen. Positions come from the morph engine. */
.app-tour { color: #fff; font-family: var(--sf); }
.tr-fill { overflow: hidden; }
.tr-fill i { position: absolute; left: 0; right: 0; top: 0; height: 200%; will-change: transform, opacity;
  background: linear-gradient(to bottom, rgba(var(--fc), 0) 0%, rgba(var(--fc), 0) 40%, rgba(var(--fc), 0.12) 50%, rgba(var(--fc), 0.45) 56%,
    rgba(var(--fc), 0.78) 62%, rgba(var(--fc), 0.95) 68%, rgba(var(--fc), 1) 74%, rgba(var(--fc), 1) 100%); }

/* controls: a ringed play button and plain icons on phones; capsules with words on TV and Vision Pro, where
   the focused one lifts onto a white plate */
.tr-btn { display: flex; align-items: center; justify-content: center; gap: calc(var(--tvb, 0) * 10px); color: var(--pc, #fff); }
.tr-btn::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: #fff; opacity: var(--tf, 0); transform: scale(calc(1 + var(--tf, 0) * 0.1)); box-shadow: 0 calc(var(--tf, 0) * 8px) calc(var(--tf, 0) * 18px) rgba(0, 0, 0, calc(var(--tf, 0) * 0.4)); }
.tr-btn > * { position: relative; z-index: 1; transform: scale(calc(1 + var(--tf, 0) * 0.1)); }
.tr-btn .ic { flex: none; width: calc(var(--bs, 1) * 72px); height: calc(var(--bs, 1) * 72px); display: grid; place-items: center; }
.tr-btn .ic svg { width: 100%; height: 100%; }
.tr-skip .ic svg, .tr-gear .ic svg { width: 62%; height: 62%; }
.tr-btn path { fill: currentColor; }
.tr-gear path, .tr-gear circle { fill: none; }
.tr-btn .lb { overflow: hidden; max-width: calc(var(--tvb, 0) * 220px); opacity: var(--tvb, 0); white-space: nowrap; font-size: 21px; font-weight: 650; letter-spacing: -0.01em; }
.tr-play { box-shadow: inset 0 0 0 calc((1 - var(--tvb, 0)) * 2.5px) var(--pc, #fff); }
.tr-btn { color: color-mix(in srgb, #121212 calc(var(--tf, 0) * 100%), var(--pc, #fff)); }

/* this round, as a list (the open Duo's right pane, the Vision Pro's side window) */
.tr-pane { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07); }
.tr-head { display: flex; justify-content: space-between; align-items: baseline; font-size: 22px; font-weight: 750; letter-spacing: -0.01em; white-space: nowrap; }
.tr-head em { font-style: normal; font-size: 15px; font-weight: 550; color: rgba(255, 255, 255, 0.6); font-variant-numeric: tabular-nums; }
.tr-row { display: grid; grid-template-columns: calc(var(--rs, 1) * 30px) 1fr auto; grid-template-rows: auto auto; column-gap: calc(var(--rs, 1) * 12px); align-content: center; padding: 0 calc(var(--rs, 1) * 14px); background: rgba(255, 255, 255, 0.06); font-size: calc(var(--rs, 1) * 16px); }
.tr-rd { grid-row: span 2; align-self: center; width: calc(var(--rs, 1) * 22px); height: calc(var(--rs, 1) * 22px); border-radius: 50%; background: var(--c); display: grid; place-items: center; font-style: normal; font-size: calc(var(--rs, 1) * 15px); }
.tr-row[data-m="r1"] .tr-rd, .tr-row[data-m="r3"] .tr-rd, .tr-row[data-m="r5"] .tr-rd { background: none; font-size: calc(var(--rs, 1) * 19px); }
.tr-row b { font-weight: 650; white-space: nowrap; }
.tr-row span { grid-column: 2; font-size: 0.82em; color: rgba(255, 255, 255, 0.58); white-space: nowrap; }
.tr-row em { grid-column: 3; grid-row: 1 / span 2; align-self: center; font-style: normal; font-size: 0.86em; font-weight: 600; color: rgba(255, 255, 255, 0.55); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tr-row.is-done em { color: #63e07f; }
.tr-row.is-now { background: rgba(255, 69, 58, 0.2); box-shadow: inset 0 0 0 1.5px rgba(255, 69, 58, 0.7); }
.tr-row.is-now em { color: #ff8a80; }
.tr-row:not(.is-done):not(.is-now) b { color: rgba(255, 255, 255, 0.7); }

/* iPad: status bar, the lengths beside the clock */
.tr-sb { display: flex; align-items: center; gap: 8px; padding: 0 24px; font-size: 14px; font-weight: 600; }
.tr-sb span { color: rgba(255, 255, 255, 0.7); }
.tr-sb .fa-batt { margin-left: auto; }
.tr-ptitle { font-size: 26px; font-weight: 780; letter-spacing: -0.01em; color: #ff453a; white-space: nowrap; }
.tr-prow p { display: flex; justify-content: space-between; align-items: baseline; font-size: 18px; font-weight: 640; color: #e7e2e2; }
.tr-prow em { font-style: normal; font-size: 20px; color: var(--c); font-variant-numeric: tabular-nums; }
.tr-prow .fa-trk { width: 268px; margin-top: 18px; }
.tr-prow .fa-trk b { left: -13px; top: -12px; width: 26px; height: 26px; }

/* Mac: a desktop, the menu bar with Focus's timer in it, a Notes window, the popover under the timer */
.tr-desk { background:
  radial-gradient(ellipse 70% 60% at 18% 22%, #7a3a8f, transparent 70%), radial-gradient(ellipse 60% 55% at 85% 30%, #c2562f, transparent 70%),
  radial-gradient(ellipse 80% 60% at 60% 100%, #2a2f7a, transparent 70%), #1c1630; }
.tr-menu { display: flex; align-items: center; gap: 19px; padding: 0 18px; font-size: 13.5px; font-weight: 500; background: rgba(20, 16, 30, 0.42); white-space: nowrap; }
.tr-menu b { font-weight: 700; }
.tr-menu .apl svg { width: 15px; height: 15px; display: block; margin-top: -2px; }
.tr-menu .sp { flex: 1; }
.tr-menu em { font-style: normal; }
.tr-extra { display: flex; align-items: center; gap: 6px; padding: 0 8px; border-radius: 5px; background: rgba(255, 255, 255, 0.2); font-size: 13.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.tr-extra svg { width: 15px; height: 15px; transform: rotate(-90deg); }
.tr-extra circle { fill: none; stroke-width: 3.2; }
.tr-extra .t { stroke: rgba(255, 255, 255, 0.3); }
.tr-extra .a { stroke-linecap: round; }
.tr-pop { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1), 0 10px 22px rgba(0, 0, 0, 0.45); }
.tr-pop::before { content: ""; position: absolute; left: 107px; top: -7px; width: 16px; height: 16px; border-radius: 3px; background: inherit; transform: rotate(45deg); }
.tr-notes { overflow: hidden; display: grid; grid-template-columns: 180px 230px 1fr; background: #1e1e1f; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1), 0 12px 26px rgba(0, 0, 0, 0.45); font-size: 13px; }
.nt-side { background: rgba(48, 44, 56, 0.96); padding: 14px 10px; color: rgba(255, 255, 255, 0.8); }
.nt-side > i { display: inline-block; width: 12px; height: 12px; margin: 2px 4px 26px; border-radius: 50%; background: #ff5f57; }
.nt-side > i:nth-child(2) { background: #febc2e; } .nt-side > i:nth-child(3) { background: #28c840; }
.nt-side p { padding: 6px 10px; border-radius: 7px; }
.nt-side .nt-f { font-size: 11px; font-weight: 700; color: rgba(255, 255, 255, 0.45); }
.nt-side .on, .nt-list .on { background: rgba(255, 214, 10, 0.24); }
.nt-list { padding: 52px 8px 0; background: #232325; box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.07); }
.nt-list p { padding: 10px 12px; border-radius: 9px; display: grid; gap: 2px; }
.nt-list b { font-weight: 650; }
.nt-list small { color: rgba(255, 255, 255, 0.5); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nt-doc { position: relative; padding: 56px 40px 0 34px; }
.nt-doc h6 { font-size: 24px; font-weight: 750; margin-bottom: 14px; }
.nt-t { display: inline; font-size: 15px; line-height: 1.62; color: rgba(255, 255, 255, 0.88); }
.nt-caret { display: inline-block; width: 2px; height: 18px; margin-left: 1px; vertical-align: -3px; background: #ffd60a; }

/* Watch */
.tr-wtime { font-size: 15px; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.tr-wtitle { font-size: 15px; font-weight: 650; color: #ff453a; }

/* TV: tabs along the top, and what the session is beside the clock */
.tr-tabs { display: flex; align-items: center; justify-content: space-around; padding: 0 8px; font-size: 21px; font-weight: 600; color: rgba(255, 255, 255, 0.72); }
.tr-tabs .on { padding: 9px 22px; border-radius: 22px; background: rgba(255, 255, 255, 0.9); color: #111; }
.tr-info { display: grid; gap: 6px; }
.tr-info b { font-size: 30px; font-weight: 750; letter-spacing: -0.01em; }
.tr-info span { font-size: 22px; color: rgba(255, 255, 255, 0.66); }

/* Vision Pro: glass, with a light edge */
.tr-vwin, .tr-orn { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), inset 0 0 0 1px rgba(255, 255, 255, 0.12); }

/* the Watch's always-on display, wrist down */
.tr-dim { position: absolute; inset: 0; z-index: 40; background: #000; opacity: 0; pointer-events: none; }