/* Status line lab */
.sx-lab{max-width:1100px}
.sx-intro{display:grid;gap:10px;margin-bottom:24px}
.sx-note{margin:0;font-size:15px;color:var(--fg2);max-width:46em}
.sx-pv{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:12px;color:var(--fg3)}
.sx-pv button{appearance:none;font:inherit;color:var(--fg2);background:none;border:1px dashed var(--gn2);border-radius:99px;padding:3px 10px;cursor:pointer}
.sx-pv button.on{color:var(--bg);background:var(--fg);border-color:var(--fg)}
.sx-case{padding:56px 0 72px;border-top:1px solid var(--line)}
.sx-case>.lab{margin:0 0 28px}
.sx-hero{display:block}
.sx-two{display:grid;grid-template-columns:minmax(0,1fr) 280px;column-gap:56px;align-items:end}
.sx-tt{margin:0}
.sx-two .le{max-width:none}
.sx-main .stt{margin-top:24px}

/* Glyphs: filled, at cap height, on the text's baseline. Tinted with iOS 26's Focus colours, the glyph only. */
.sx{--sleep:#6155f5;--personal:#cb30e0;--work:#00a8b4;--lunch:#ff8d28;font-variant-numeric:tabular-nums}
.sx-gl{position:relative;display:inline-block;width:1.2em;height:1.2em;vertical-align:-.22em;flex:none}
.sx-g{position:absolute;inset:0;width:100%;height:100%;opacity:0;transform:scale(.45);transition:opacity .07s linear,transform .17s cubic-bezier(.22,1,.36,1)}
.sx-g.on{opacity:1;transform:none}
.sx-g[data-f=sleep]{fill:var(--sleep)}
.sx-g[data-f=work]{fill:var(--work)}
.sx-g[data-f=personal]{fill:var(--personal)}
.sx-g[data-f=lunch]{fill:var(--lunch)}
.sx-g[data-f=moon]{fill:currentColor}
.sx-f{appearance:none;border:0;background:none;padding:0;margin:0;font:inherit;color:var(--fg);font-weight:590;cursor:pointer;border-radius:4px;text-decoration:underline dotted var(--gn2);text-underline-offset:4px;text-decoration-thickness:1.5px}
.sx-f:focus-visible{outline:2px solid var(--fg);outline-offset:2px}
@media (hover:hover) and (pointer:fine){.sx-f:hover{text-decoration-color:var(--fg2)}}
.sx-na{appearance:none;border:0;background:none;padding:0;font:inherit;font-weight:590;color:var(--accent);cursor:pointer;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.sx-na.done{color:var(--fg2);text-decoration:none;font-weight:450;cursor:default}
.sx [hidden]{display:none}
.sx-u,.sx-t,.sx-sep{color:var(--fg3)}

/* Rolling digits */
[data-roll]{display:inline-flex}
.rdg{display:inline-block;height:1.2em;line-height:1.2em;overflow:hidden;vertical-align:top}
.rsl{display:block;transform:translateY(calc(var(--d,0) * -1.2em));transition:transform .5s cubic-bezier(.22,1,.36,1)}
.rsl span{display:block;height:1.2em}
.rcl{display:inline-block;line-height:1.2em}

/* A: under the sentence */
.sx-a{margin-top:14px;display:grid;gap:4px;font-size:15px;line-height:1.4}
.sx-a p{margin:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px}
.sx-a .sx-l2{color:var(--fg2);font-size:14px;padding-left:calc(1.2em + 9px)}
.sx-a .sx-gl{align-self:center}

/* B: beside the intro, set like the Lock Screen */
.sx-b{text-align:center;display:grid;justify-items:center;gap:2px;padding-bottom:6px}
.sx-b p{margin:0}
.sx-big{font-size:64px;font-weight:600;letter-spacing:-.04em;line-height:1.05;font-feature-settings:"tnum","cv11"}
.sx-date{font-size:14px;font-weight:510;color:var(--fg2);margin-top:2px!important}
.sx-b .sx-l1{margin-top:14px!important;display:flex;align-items:center;gap:6px;font-size:15px}
.sx-b .sx-u{margin-left:2px}
.sx-b .sx-l2{font-size:13.5px;color:var(--fg2);margin-top:4px!important}

/* C: as Messages shows it */
.sx-c{display:grid;gap:3px;padding-bottom:4px;font-size:15px}
.sx-c p{margin:0}
.sx-stamp{text-align:center;font-size:11.5px;color:var(--fg3);margin-bottom:6px!important}
.sx-stamp b{font-weight:590}
.sx-bub{max-width:80%;padding:7px 12px;border-radius:18px;line-height:1.3;font-size:15px;position:relative}
.sx-me{justify-self:end;background:var(--fg);color:var(--bg);border-bottom-right-radius:6px}
.sx-him{justify-self:start;background:var(--well);color:var(--fg);border-bottom-left-radius:6px;margin-top:4px!important}
.sx-rcpt{justify-self:end;font-size:11px;color:var(--fg3);font-weight:510;padding-right:4px}
.sx-typing{justify-self:start;display:flex;gap:4px;padding:11px 13px;border-radius:18px;background:var(--well);margin-top:4px!important}
.sx-typing i{width:7px;height:7px;border-radius:50%;background:var(--fg3);animation:sx-dot 1.2s ease-in-out infinite}
.sx-typing i:nth-child(2){animation-delay:.15s}
.sx-typing i:nth-child(3){animation-delay:.3s}
@keyframes sx-dot{0%,60%,100%{opacity:.35;transform:none}30%{opacity:1;transform:translateY(-2px)}}
.sx-focus{margin-top:12px!important;justify-self:center;display:flex;align-items:center;gap:5px;font-size:12.5px;color:var(--fg3);text-align:center}
.sx-l2c{justify-self:center;font-size:12.5px}

/* The day's schedule */
.sx-pop{position:absolute;z-index:40;min-width:250px;padding:10px;border-radius:18px;background:color-mix(in srgb,var(--surface) 92%,transparent);-webkit-backdrop-filter:blur(20px) saturate(1.7);backdrop-filter:blur(20px) saturate(1.7);box-shadow:0 0 0 .5px var(--ring),0 18px 40px -18px var(--shadow)}
.sx-pop[hidden]{display:none}
.sx-ph{margin:2px 8px 8px;font-size:12px;color:var(--fg3)}
.sx-pl{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.sx-pl li{position:relative;display:grid;grid-template-columns:20px 1fr auto auto;align-items:center;gap:10px;padding:8px;border-radius:11px;font-size:14px}
.sx-pl li .sx-g{position:static;opacity:1;transform:none;width:18px;height:18px}
.sx-pl li.on{background:var(--hover)}
.sx-pl li b{font-size:12px;font-weight:590;color:var(--fg2)}
.sx-pr{font-size:13px;color:var(--fg3);font-variant-numeric:tabular-nums}
.sx-pl{--sleep:#6155f5;--personal:#cb30e0;--work:#00a8b4;--lunch:#ff8d28}
@media (max-width:760px){
  .sx-two{grid-template-columns:1fr;row-gap:28px}
  .sx-b{justify-items:start;text-align:left}
  .sx-big{font-size:52px}
}
@media (prefers-reduced-motion:reduce){.rsl{transition:none}.sx-typing i{animation:none}}

/* Round 2, after the outside review */
.sx-two .sx-row{display:grid;grid-template-columns:minmax(0,1fr) 250px;column-gap:64px;align-items:start}
.sx-row .le{margin-top:28px}
.sx-main .stt{max-width:none;text-wrap:pretty}
.sx-g{fill:var(--fg)}
.sx-g[data-f]{fill:var(--fg)}
.sx-f{text-decoration:none;display:inline-flex;align-items:center;gap:3px}
.sx-chev{width:.62em;height:.62em;fill:none;stroke:var(--fg3);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s cubic-bezier(.23,1,.32,1),stroke .15s ease}
.sx-f[aria-expanded=true] .sx-chev{transform:rotate(180deg);stroke:var(--fg)}
@media (hover:hover) and (pointer:fine){.sx-f:hover .sx-chev{stroke:var(--fg)}}
/* A: two sizes only, availability and status */
.sx-a{font-size:14.5px}
.sx-a .sx-l2{font-size:14.5px}
/* B: date above the time, the stack flush left on the column, the clock no heavier than it needs to be */
.sx-b{text-align:left;justify-items:start;padding-top:32px}
.sx-b .sx-date{order:0;margin:0!important;font-size:13px;color:var(--fg2)}
.sx-b .sx-big{font-size:40px;font-weight:600;letter-spacing:-.03em;line-height:1.1;margin-top:2px!important}
.sx-b .sx-l1{margin-top:12px!important;font-size:14.5px;gap:6px}
.sx-b .sx-l2{font-size:13.5px}
/* C: bubbles with tails, one axis */
.sx-c{padding-top:28px}
.sx-bub{text-wrap:pretty;border-radius:18px!important}
.sx-me::before,.sx-him::before{content:"";position:absolute;bottom:0;width:16px;height:16px}
.sx-me::before{right:-5px;background:var(--fg);border-bottom-left-radius:14px 12px}
.sx-me::after,.sx-him::after{content:"";position:absolute;bottom:0;width:10px;height:16px;background:var(--bg)}
.sx-me::after{right:-10px;border-bottom-left-radius:9px}
.sx-him::before{left:-5px;background:var(--well);border-bottom-right-radius:14px 12px}
.sx-him::after{left:-10px;border-bottom-right-radius:9px}
.sx-focus{justify-self:stretch;justify-content:center;flex-wrap:wrap;margin-top:14px!important}
.sx-l2c{justify-self:stretch;text-align:center}
/* The schedule opens above, pinned to the glyph, with a small pointer */
.sx-pop::after{content:"";position:absolute;left:calc(var(--ax,24px) - 7px);bottom:-6px;width:14px;height:14px;background:inherit;transform:rotate(45deg);border-radius:0 0 3px 0;box-shadow:.5px .5px 0 0 var(--ring)}
.sx-pl li .sx-g{fill:var(--fg3)}
.sx-pl li.on .sx-g{fill:var(--fg)}
.sx-pl li.on span:nth-of-type(1){font-weight:590}
@media (max-width:760px){
  .sx-two .sx-row{grid-template-columns:1fr;row-gap:12px}
  .sx-b{padding-top:6px}
  .sx-b .sx-date,.sx-b .sx-big{display:none}
  .sx-b .sx-l1{margin-top:0!important}
  .sx-c{padding-top:16px}
}
.sx-two{display:block}

/* Home: B beside the intro */
.hx{display:grid;grid-template-columns:minmax(0,1fr) 250px;column-gap:64px;align-items:start}
.hx-main{min-width:0}
.hx-main .stt{max-width:none;text-wrap:pretty}
@media (max-width:760px){.hx{grid-template-columns:1fr;row-gap:12px}}
.hx-main .stt{margin-top:24px}
.hx .sx-b{padding-top:26px}
@media (max-width:760px){.hx .sx-b{padding-top:4px}}
.sx-pop{background:var(--surface)}

/* The schedule's current row: the one place in the list that is "now", so it takes the accent. Tinted row, accent glyph, a tick where iOS puts one. */
.sx-pl li{grid-template-columns:20px 1fr auto 14px}
.sx-pl li>i{width:14px}
.sx-pl li.on{background:color-mix(in srgb,var(--accent) 11%,transparent)}
.sx-pl li.on .sx-g{fill:var(--accent)}
.sx-pl li.on span:nth-of-type(1){font-weight:590;color:var(--fg)}
.sx-pl li.on .sx-pr{color:var(--fg2)}
.sx-ck{width:14px;height:14px;fill:none;stroke:var(--accent);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* Notify Anyway, after: a receipt in place of the line. A tick that draws, the address that was copied, and when he'll see it. */
.sx-sent{margin:4px 0 0!important;display:grid;gap:1px;font-size:13.5px;line-height:1.4;text-align:left}
.sx-s1{display:flex;align-items:center;gap:6px;color:var(--fg2)}
.sx-s1 svg{width:14px;height:14px;flex:none;fill:none;stroke:var(--accent);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;animation:sx-tick .32s .08s cubic-bezier(.23,1,.32,1) forwards}
.sx-mail{font-weight:590;color:var(--fg);-webkit-user-select:all;user-select:all}
.sx-s2{color:var(--fg3)}
.sx-sent.ok .sx-s2{padding-left:20px}
@keyframes sx-tick{to{stroke-dashoffset:0}}
@media (prefers-reduced-motion:reduce){.sx-s1 svg{animation:none;stroke-dashoffset:0}}