/* Notch: drawn to the app (NotchView, NotchMetrics, TextStyle on main). One black shape whose size is the state,
   7pt concave shoulders, content laid out at its final size and revealed by the moving edge. Points x --s. */
.tq-notch { position: absolute; top: 0; left: 50%; transform: translateX(-50%); transform-origin: 50% 0; --r: 10px;
  width: calc(185px * var(--s)); height: calc(32px * var(--s)); color: var(--notch-ink); font-family: var(--font-sans);
  transition: width .35s cubic-bezier(.3,1.25,.45,1), height .35s cubic-bezier(.3,1.25,.45,1); }
.tq-shape { position: absolute; inset: 0; background: var(--notch); overflow: hidden; border-radius: 0 0 calc(var(--r) * var(--s)) calc(var(--r) * var(--s)); transition: border-radius .3s; }
.tq-sh { position: absolute; top: 0; width: calc(7px * var(--s)); height: calc(7px * var(--s)); }
.tq-sh.l { right: 100%; background: radial-gradient(circle at 0 100%, transparent calc(6.6px * var(--s)), var(--notch) calc(7px * var(--s))); }
.tq-sh.r { left: 100%; background: radial-gradient(circle at 100% 100%, transparent calc(6.6px * var(--s)), var(--notch) calc(7px * var(--s))); }
.tq-notch[data-state="invite"] { width: calc(261px * var(--s)); height: calc(70px * var(--s)); --r: 20px; }
.tq-notch[data-state="typing"] { width: calc(380px * var(--s)); height: calc(84px * var(--s)); --r: 20px; }
/* the lub-dub swells through --swell, not width itself, so leaving a check-in still transitions on the spring */
@property --swell { syntax: "<number>"; inherits: false; initial-value: 0; }
.tq-notch[data-state="focused"], .tq-notch[data-state="beat"] { width: calc((405px + 12px * var(--swell)) * var(--s)); height: calc((32px + 5px * var(--swell)) * var(--s)); }
.tq-notch[data-state="glance"] { width: calc(380px * var(--s)); height: calc(97px * var(--s)); --r: 20px; }
.tq-notch[data-state="ended"], .tq-notch[data-state="checkin"] { width: calc(265px * var(--s)); height: calc(95px * var(--s)); --r: 20px; }
.tq-notch[data-state="beat"] { animation: tq-lub 4.05s; }

.tq-c { position: absolute; left: 50%; transform: translateX(-50%); opacity: 0; transition: opacity .18s; display: flex; align-items: center; white-space: nowrap; }
.tq-notch[data-state="invite"] .tq-invite, .tq-notch[data-state="typing"] .tq-typing, .tq-notch[data-state="focused"] .tq-ears,
.tq-notch[data-state="beat"] .tq-ears, .tq-notch[data-state="glance"] .tq-glance, .tq-notch[data-state="ended"] .tq-ended,
.tq-notch[data-state="checkin"] .tq-checkin { opacity: 1; transition-delay: .12s; }

/* type roles, TextStyle.swift */
.tq-t-input { font: 500 calc(18px * var(--s))/calc(21px * var(--s)) var(--font-sans); }
.tq-t-title { font: 600 calc(15px * var(--s))/calc(19px * var(--s)) var(--font-sans); }
.tq-t-body { font: 400 calc(13px * var(--s))/calc(16px * var(--s)) var(--font-sans); }
.tq-t-label { font: 500 calc(11px * var(--s))/calc(14px * var(--s)) var(--font-sans); }
.tq-t-caption { font: 400 calc(11px * var(--s))/calc(14px * var(--s)) var(--font-sans); }
.tq-num { font-variant-numeric: tabular-nums; }

/* key cap: 20pt, r5, white 15% fill, glyph 10pt at 60% */
.tq-cap { width: calc(20px * var(--s)); height: calc(20px * var(--s)); border-radius: calc(5px * var(--s)); background: var(--notch-fill-keycap); display: grid; place-items: center; flex: none; }
.tq-cap svg { width: calc(10px * var(--s)); height: calc(10px * var(--s)); color: rgba(255, 255, 255, .6); }

/* invite: 41pt from the top, body text 50% + cursor cap */
.tq-invite { top: calc(41px * var(--s)); width: calc(261px * var(--s)); height: calc(20px * var(--s)); justify-content: center; gap: calc(6px * var(--s)); color: var(--notch-ink-secondary); }

/* typing: field row 24pt at 46pt, 16pt sides, 10pt to the hint */
.tq-typing { top: calc(46px * var(--s)); width: calc(380px * var(--s)); height: calc(24px * var(--s)); gap: calc(10px * var(--s)); padding: 0 calc(16px * var(--s)); box-sizing: border-box; }
.tq-typing .tq-text { flex: 1; min-width: 0; overflow: hidden; color: var(--notch-ink); }
.tq-typing .tq-ph { flex: 1; color: var(--notch-ink-placeholder); }
.tq-caret { display: inline-block; width: calc(2px * var(--s)); height: calc(20px * var(--s)); background: var(--notch-ink); vertical-align: calc(-4px * var(--s)); margin-left: 1px; animation: tq-blink 1s steps(2) infinite; }
.tq-typing .tq-ph .tq-caret { margin: 0 1px 0 0; }
.tq-notch:not([data-state="typing"]) .tq-caret { animation: none; }
.tq-hint { display: flex; align-items: center; gap: calc(6px * var(--s)); color: var(--notch-ink-secondary); }

/* ears: both as wide as the wider (left capped at 110), texts 14pt from the outer edges */
.tq-ears { top: 0; width: calc(405px * var(--s)); height: calc(32px * var(--s)); }
.tq-ear { width: calc(110px * var(--s)); height: calc(32px * var(--s)); display: flex; align-items: center; box-sizing: border-box; flex: none; }
.tq-ear.l { padding-left: calc(14px * var(--s)); }
.tq-ear.r { padding-right: calc(14px * var(--s)); justify-content: flex-end; gap: calc(5px * var(--s)); }
.tq-ear .tq-task { width: calc(86px * var(--s)); overflow: hidden; color: var(--notch-ink-emphasis); -webkit-mask-image: linear-gradient(to right, #000 calc(100% - calc(12px * var(--s))), transparent); mask-image: linear-gradient(to right, #000 calc(100% - calc(12px * var(--s))), transparent); }
.tq-ear .tq-mins { color: var(--notch-ink-secondary); }
.tq-notch[data-state="beat"] .tq-task, .tq-notch[data-state="beat"] .tq-mins { color: var(--notch-ink); }
.tq-gap { width: calc(185px * var(--s)); flex: none; }
.tq-ring { width: calc(10px * var(--s)); height: calc(10px * var(--s)); flex: none; transform: rotate(-90deg); }
.tq-ring .tq-fill { transition: stroke-dashoffset .6s; }
.tq-notch[data-state="beat"] .tq-ring .tq-fill { stroke-dashoffset: 0; }

/* glance: title 15 semibold, trash on hover, "N min of focus", Done 32pt outline */
.tq-glance { top: calc(46px * var(--s)); width: calc(380px * var(--s)); gap: calc(12px * var(--s)); padding: 0 calc(16px * var(--s)); box-sizing: border-box; }
.tq-glance .tq-col { display: grid; gap: calc(4px * var(--s)); flex: 1; min-width: 0; }
.tq-glance .tq-row { display: flex; align-items: center; gap: calc(10px * var(--s)); }
.tq-glance .tq-gt { overflow: hidden; text-overflow: ellipsis; }
.tq-glance .tq-trash { width: calc(15px * var(--s)); height: calc(15px * var(--s)); color: var(--notch-ink-secondary); flex: none; opacity: 0; transition: opacity .18s; }
.tq-glance .tq-row:hover .tq-trash, .tq-glance.tq-hover .tq-trash { opacity: 1; }
.tq-glance .tq-time { color: var(--notch-ink-secondary); }
.tq-donebtn { width: calc(32px * var(--s)); height: calc(32px * var(--s)); border-radius: 50%; box-shadow: inset 0 0 0 calc(2.5px * var(--s)) var(--notch-ink); display: grid; place-items: center; flex: none; }
.tq-donebtn svg { width: calc(16px * var(--s)); height: calc(16px * var(--s)); }

/* end pill and check-in pill: ring 16pt + title, then the second line 20pt high */
.tq-ended, .tq-checkin { top: calc(41px * var(--s)); width: calc(265px * var(--s)); flex-direction: column; gap: calc(6px * var(--s)); }
.tq-pt { height: calc(19px * var(--s)); display: flex; align-items: center; gap: calc(6px * var(--s)); }
.tq-pb { height: calc(20px * var(--s)); display: flex; align-items: center; gap: calc(6px * var(--s)); color: var(--notch-ink-secondary); }
.tq-dring { width: calc(16px * var(--s)); height: calc(16px * var(--s)); flex: none; }
.tq-dring .tq-arc { stroke-dashoffset: 100; transition: stroke-dashoffset .45s cubic-bezier(.25,.8,.25,1) .2s; }
.tq-ended .tq-arc { stroke-dashoffset: var(--arc-from, 100); }
.tq-dring .tq-chk { stroke-dasharray: 14; stroke-dashoffset: 14; transition: stroke-dashoffset .28s ease-out .7s; }
.tq-notch[data-state="ended"] .tq-arc, .tq-notch[data-state="checkin"] .tq-arc, .tq-notch[data-state="ended"] .tq-chk { stroke-dashoffset: 0; }

/* Done button: at rest a white outline; hovered, green fades in from just inside it and the check turns black (doneHover .22s); pressed, it gives to .92 */
.tq-donebtn { position: relative; transition: box-shadow .22s ease-out, transform .15s ease-out; }
.tq-donebtn::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--notch-done); transform: scale(.7); opacity: 0; transition: transform .22s ease-out, opacity .22s ease-out; }
.tq-donebtn svg { position: relative; transition: color .22s ease-out; }
.tq-donebtn.tq-hot { box-shadow: inset 0 0 0 calc(2.5px * var(--s)) transparent; }
.tq-donebtn.tq-hot::before { transform: none; opacity: 1; }
.tq-donebtn.tq-hot svg { color: #000; }
.tq-donebtn.tq-press { transform: scale(.92); }
/* Done: the Glance title is struck through left to right (.3s), then the pill opens */
.tq-glance .tq-gt { position: relative; }
.tq-glance .tq-gt::after { content: ""; position: absolute; left: 0; right: 0; top: 54%; height: calc(1.5px * var(--s)); background: var(--notch-ink); transform: scaleX(0); transform-origin: left center; transition: transform .3s ease-out; }
.tq-glance.tq-struck .tq-gt::after { transform: none; }
/* a live field: the placeholder and ↑ Recent while empty, the text and ↩ once there is some */
.tq-typing.tq-empty .tq-text, .tq-typing.tq-empty .tq-h-return, .tq-typing:not(.tq-empty) .tq-ph, .tq-typing:not(.tq-empty) .tq-h-recent { display: none; }
/* Commit: the typed title flies into the left ear on the collapse spring (--fx, --fy, --fk measured by the page), then the ear takes over */
.tq-typing .tq-text { transform-origin: 0 50%; }
.tq-notch.tq-commit .tq-typing { opacity: 1; transition: none; }
.tq-notch.tq-commit .tq-typing .tq-hint, .tq-notch.tq-commit .tq-typing .tq-caret { opacity: 0; }
.tq-notch.tq-commit .tq-typing .tq-text { overflow: visible; color: var(--notch-ink-emphasis); transform: translate(var(--fx, 0), var(--fy, 0)) scale(var(--fk, 1)); transition: transform .4s cubic-bezier(.25, 1, .5, 1), color .4s ease-out; }
.tq-notch.tq-commit .tq-ears .tq-task { opacity: 0; }
.tq-notch.tq-landed .tq-typing { opacity: 0 !important; transition: none !important; }

@keyframes tq-lub { 0%, 33.3%, 66.6%, 100% { --swell: 0; } 8%, 41.3%, 74.6% { --swell: 1; } 13.8%, 47%, 80.4% { --swell: .35; } 21%, 54.3%, 87.6% { --swell: .65; } }
@keyframes tq-blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .tq-notch[data-state="beat"], .tq-caret { animation: none; }
  .tq-notch, .tq-shape, .tq-c, .tq-arc, .tq-chk, .tq-donebtn, .tq-donebtn::before, .tq-glance .tq-gt::after, .tq-typing .tq-text { transition: none !important; }
}