/* The drawn screens inside the slots. Sizes are in em of a 15 pt base that scales with the screen's own width
   (--w is the screen's width in points), so a drawing is the same at 250 px and at 1000 px. */
/* the timeline's hour height, fixed where it is set so smaller text inside an event doesn't shrink it */
@property --row { syntax: "<length>"; inherits: true; initial-value: 0px; }
.screen { container-type: inline-size; }
.half-screen > .screen, .face.back .screen.cover { container-type: size; }
.ui {
  position: absolute; inset: 0; overflow: hidden; font: 400 calc(100cqw * 15 / var(--w, 402)) / 1.3 var(--sans); color: var(--ink);
  background: var(--canvas); display: flex; flex-direction: column; letter-spacing: -.005em; text-align: left;
}
.ui .i { width: 1em; height: 1em; flex: none; }
.ui button { all: unset; cursor: pointer; }
.sb { display: flex; justify-content: space-between; align-items: center; padding: 1.05em 2.1em .5em 2.4em; font: 600 1.02em/1 var(--sans); flex: none; }
.sb-r { display: flex; gap: .3em; align-items: center; }
.sb-r i { width: .95em; height: .6em; border-radius: .12em; background: currentColor; opacity: .85; }
.sb-r i + i { width: .8em; }
.sb-r b { width: 1.65em; height: .8em; border-radius: .25em; border: .09em solid currentColor; opacity: .85; }
.nt { display: flex; align-items: center; gap: .35em; padding: .5em 1.1em .35em; font: 700 2.05em/1.1 var(--serif); letter-spacing: -.02em; }
.nt .tint .i { width: .78em; height: .78em; }
.tint { display: inline-grid; place-items: center; }
.t-inbox { color: var(--t-inbox); } .t-today { color: var(--t-today); } .t-upcoming { color: var(--t-upcoming); } .t-calendar { color: var(--t-calendar); }
.t-anytime { color: var(--t-anytime); } .t-someday { color: var(--t-someday); } .t-waiting { color: var(--t-waiting); } .t-logbook { color: var(--t-logbook); }
.list { flex: 1; min-height: 0; overflow: hidden; padding: .2em 0; }
.list.dim { opacity: .45; }
.row { position: relative; display: flex; gap: .7em; padding: .62em 1.15em .62em 1.15em; }
/* crease dividers: a hairline with a soft valley under it, ending at the checkbox in a 45-degree notch */
.row + .row::before { content: ""; position: absolute; top: 0; left: 3.05em; right: 0; height: 1px; background: var(--hairline); }
.row + .row::after { content: ""; position: absolute; top: 1px; left: 3.05em; right: 0; height: .35em; background: linear-gradient(color-mix(in oklab, var(--ink) 4%, transparent), transparent); }
.row.marked { background: var(--card); margin: .1em .55em; padding-left: .6em; padding-right: .6em; border-radius: .8em; box-shadow: 0 .1em .4em color-mix(in oklab, var(--ink) 8%, transparent); }
.row.marked::before, .row.marked + .row::before, .row.marked::after, .row.marked + .row::after { display: none; }
.row.marked .rc::after {   /* the folded corner: this is the one that's open */
  content: ""; position: absolute; top: 0; right: 0; width: 1.25em; height: 1.25em; border-top-right-radius: .8em;
  background: linear-gradient(225deg, var(--canvas) 50%, var(--flap-hi) 50%, var(--highlight)); filter: drop-shadow(-.06em .08em .08em color-mix(in oklab, var(--ink) 25%, transparent));
}
.cb { position: relative; width: 1.32em; height: 1.32em; border-radius: .42em; border: .11em solid var(--quiet); flex: none; display: grid; place-items: center; margin-top: .05em; color: var(--onAction); transition: background .2s, border-color .2s; }
.cb .i { width: .8em; height: .8em; stroke-width: 3.4; opacity: 0; transform: scale(.4); transition: opacity .2s, transform .25s var(--ease); }
.cb.done { background: var(--action); border-color: var(--action); }
.cb.done .i { opacity: 1; transform: none; }
.cb.due { border-color: var(--due); background: color-mix(in oklab, var(--due) 12%, transparent); }
.cb.sm { width: 1em; height: 1em; border-radius: .32em; border-width: .1em; }
.cb.sm .i { width: .66em; height: .66em; }
.rc { min-width: 0; flex: 1; }
.rt { font-size: 1em; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.is-done .rt { color: var(--quiet); text-decoration: line-through; }
.rm { display: flex; gap: .3em; margin-top: .3em; flex-wrap: nowrap; overflow: hidden; }
.chip { display: inline-flex; align-items: center; gap: .3em; font: 500 .74em/1 var(--sans); padding: .38em .6em; border-radius: .5em; background: color-mix(in oklab, var(--ink) 5%, transparent); color: var(--quiet); white-space: nowrap; }
.chip .i { width: 1.05em; height: 1.05em; }
.chip.due { color: var(--due); background: color-mix(in oklab, var(--due) 10%, transparent); }
.sect { display: flex; align-items: center; gap: .4em; padding: 1em 1.15em .3em; font: 600 .82em/1 var(--sans); color: var(--highlight); }
.dock { position: absolute; left: 1em; right: 1em; bottom: 1.6em; display: flex; justify-content: space-between; align-items: center; gap: .6em; padding: .45em; border-radius: 99em;
  background: color-mix(in oklab, var(--card) 86%, transparent); backdrop-filter: blur(8px); box-shadow: 0 0 0 1px var(--hairline), 0 .4em 1.4em color-mix(in oklab, var(--ink) 12%, transparent); }
.dock .find { display: flex; align-items: center; gap: .45em; padding-left: .7em; color: var(--quiet); font-size: .92em; }
.dock .add { display: flex; align-items: center; gap: .35em; padding: .6em 1em; border-radius: 99em; background: var(--action); color: var(--onAction); font: 600 .92em/1 var(--sans); }
.caret { display: inline-block; width: .09em; height: 1.1em; vertical-align: -.2em; margin-left: .05em; background: var(--action); }
@media (prefers-reduced-motion: no-preference) { .caret { animation: blink 1.1s steps(1) infinite; } }
@keyframes blink { 50% { opacity: 0; } }

/* columns: the Duo's landscape spread, its portrait split, and the Mac */
.cols3, .cols2 { flex: 1; min-height: 0; display: grid; }
.cols3 { grid-template-columns: 20% 30% 50%; }
.cols2 { grid-template-columns: 55% 45%; }
.cols3 .col, .cols2 .col { position: relative; display: flex; flex-direction: column; min-width: 0; }
.side { background: color-mix(in oklab, var(--card) 70%, var(--canvas)); border-right: 1px solid var(--hairline); padding: .6em .5em; overflow: hidden; }
.side .li { display: flex; align-items: center; gap: .55em; padding: .42em .5em; border-radius: .55em; font-size: .9em; }
.side .li.on { background: var(--accent); color: var(--onAccent); }
.side .li em { margin-left: auto; font-style: normal; color: var(--quiet); font-size: .85em; }
.side .li .i { width: 1.1em; height: 1.1em; }
.side .area { font: 600 .72em/1 var(--sans); color: var(--quiet); text-transform: uppercase; letter-spacing: .1em; padding: 1.4em .7em .5em; }
.side .ring { width: 1.05em; height: 1.05em; border-radius: 50%; flex: none; background: conic-gradient(var(--action) calc(var(--p) * 1%), color-mix(in oklab, var(--action) 20%, transparent) 0); -webkit-mask: radial-gradient(circle, transparent 38%, #000 40%); mask: radial-gradient(circle, transparent 38%, #000 40%); }
.ed { padding: 1em 1.4em 1.4em; border-left: 1px solid var(--hairline); min-width: 0; overflow: hidden; }
.ed-card { position: relative; background: var(--card); border-radius: 1.2em; padding: 1.3em 1.4em; box-shadow: 0 .15em .8em color-mix(in oklab, var(--ink) 8%, transparent); }
.ed-card::after { content: ""; position: absolute; top: 0; right: 0; width: 1.8em; height: 1.8em; border-top-right-radius: 1.2em; background: linear-gradient(225deg, var(--canvas) 50%, var(--flap-hi) 50%, var(--highlight)); filter: drop-shadow(-.06em .1em .1em color-mix(in oklab, var(--ink) 25%, transparent)); }
.ed-top { display: flex; gap: .7em; align-items: flex-start; padding-right: 1.2em; }
.ed-t { font: 600 1.35em/1.2 var(--serif); }
.ed-notes { color: var(--quiet); font-size: .92em; line-height: 1.5; margin: .8em 0 1em 2.05em; }
.ck { display: flex; align-items: center; gap: .6em; margin: 0 0 .55em 2.05em; font-size: .92em; }
.ck s { color: var(--quiet); }
.ed-meta { display: flex; flex-wrap: wrap; gap: .35em; margin: 1.1em 0 0 2.05em; }
.cols3.m { grid-template-columns: 17% 41% 42%; }
.mac .mac-bar { display: flex; align-items: center; gap: .45em; padding: .75em 1em; border-bottom: 1px solid var(--hairline); background: color-mix(in oklab, var(--card) 80%, var(--canvas)); font: 600 .9em/1 var(--sans); }
.mac .mac-bar i { width: .8em; height: .8em; border-radius: 50%; background: color-mix(in oklab, var(--ink) 18%, transparent); }
.mac .mac-bar span { margin: 0 auto; transform: translateX(-2em); }
.mac .dock, .ui-mac .dock { display: none; }

/* calendar: month, the two-page spread, the day timeline */
.cal-h { display: flex; align-items: baseline; justify-content: space-between; padding-right: 1.2em; }
.cal-h .yr { color: var(--quiet); font: 500 1.05em/1 var(--serif); }
.seg-mini { display: flex; margin: .3em 1.1em .7em; padding: .18em; border-radius: 99em; background: color-mix(in oklab, var(--ink) 6%, transparent); font: 500 .8em/1 var(--sans); }
.seg-mini span { flex: 1; text-align: center; padding: .5em 0; border-radius: 99em; color: var(--quiet); }
.seg-mini .on { background: var(--card); color: var(--ink); box-shadow: 0 .05em .2em color-mix(in oklab, var(--ink) 15%, transparent); }
.month { padding: 0 .8em; }
.month .wk, .month .grid { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; }
.month .wk span { font: 600 .7em/2 var(--sans); color: var(--quiet); }
.month .d { position: relative; z-index: 0; font: 500 .92em/2.1 var(--sans); height: 2.9em; }
.month .d.out { color: color-mix(in oklab, var(--quiet) 50%, transparent); }
.month .d.now { color: var(--onAction); }
.month .d.now::before { content: ""; position: absolute; left: 50%; top: .12em; width: 1.9em; height: 1.9em; transform: translateX(-50%); border-radius: .6em; background: var(--action); z-index: -1; }
.month .d i { position: absolute; left: 0; right: 0; bottom: .25em; display: flex; justify-content: center; gap: .14em; }
.month .d i b { width: .26em; height: .26em; border-radius: 50%; background: var(--t-upcoming); }
.month .d i b:nth-child(2) { background: var(--t-today); } .month .d i b:nth-child(3) { background: var(--t-anytime); }
.agenda { border-top: 1px solid var(--hairline); margin-top: .4em; padding-top: .3em; }
.ag-h { font: 600 .8em/1 var(--sans); color: var(--quiet); padding: .8em 1.15em .2em; text-transform: uppercase; letter-spacing: .08em; }
.spread-h { display: flex; align-items: center; justify-content: space-between; padding-right: .4em; }
.spread-h .seg-mini { width: 15em; margin: 0 1em 0 0; }
.spread { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1.6em; padding: .5em 1.1em 1.1em; }
.page { display: grid; grid-auto-rows: 1fr; background: var(--card); border-radius: .9em; box-shadow: 0 .1em .6em color-mix(in oklab, var(--ink) 7%, transparent); padding: 0 1em; position: relative; }
.page:first-child { box-shadow: inset -1.2em 0 1.4em -1.2em color-mix(in oklab, var(--ink) 14%, transparent), 0 .1em .6em color-mix(in oklab, var(--ink) 7%, transparent); }
.page:last-child { box-shadow: inset 1.2em 0 1.4em -1.2em color-mix(in oklab, var(--ink) 14%, transparent), 0 .1em .6em color-mix(in oklab, var(--ink) 7%, transparent); }
.wday, .wnotes { border-bottom: 1px solid var(--hairline); padding: .55em 0; min-height: 0; overflow: hidden; position: relative; }
.wday:last-child, .wnotes:last-child { border-bottom: 0; }
.wd-h { display: flex; align-items: baseline; gap: .4em; margin-bottom: .3em; }
.wd-h b { font: 600 .72em/1 var(--sans); text-transform: uppercase; letter-spacing: .08em; color: var(--quiet); }
.wd-h span { font: 600 1.15em/1 var(--serif); }
.wday.now .wd-h span { color: var(--onAction); background: var(--action); border-radius: .4em; padding: .12em .32em; }
.wday.now::after { content: ""; position: absolute; top: 0; right: -1em; width: 1.3em; height: 1.3em; background: linear-gradient(225deg, var(--canvas) 50%, var(--flap-hi) 50%, var(--highlight)); }
.we { display: flex; align-items: center; gap: .45em; font-size: .82em; padding: .14em 0; white-space: nowrap; }
.we .wt { overflow: hidden; text-overflow: ellipsis; }
.we em { margin-left: auto; font-style: normal; color: var(--quiet); font-size: .9em; }
.we.ev { border-left: .22em solid var(--t-calendar); padding-left: .45em; border-radius: .1em; }
.we.done .wt { text-decoration: line-through; color: var(--quiet); }
.wnotes b { display: block; font: 600 .72em/1 var(--sans); text-transform: uppercase; letter-spacing: .08em; color: var(--quiet); margin-bottom: .4em; }
.wnotes span { font: italic .9em/1.4 var(--serif); color: var(--quiet); }
.tl { position: relative; flex: 1; margin: 0 .9em 0 0; --row: 3.25em; }
.tl .hr { height: var(--row); border-top: 1px solid var(--hairline); margin-left: 3.6em; position: relative; }
.tl .hr span { position: absolute; left: -3.6em; top: -.55em; width: 3.1em; white-space: nowrap; text-align: right; font: 500 .66em/1 var(--sans); color: var(--quiet); }
.tl .ev, .tl .blk, .tl .pt, .tl .now { position: absolute; left: 4em; right: 0; top: calc(var(--y) * var(--row)); }
.tl .ev, .tl .blk { height: calc(var(--h) * var(--row) - .2em); border-radius: .5em; padding: .35em .6em; overflow: hidden; font-size: .8em; }
.tl .ev { background: color-mix(in oklab, var(--t-calendar) 14%, var(--card)); border-left: .25em solid var(--t-calendar); left: 4.4em; }
.tl .ev b, .tl .blk b { display: block; font-weight: 600; }
.tl .ev span, .tl .blk span { color: var(--quiet); font-size: .9em; }
.tl .blk { left: 4.4em; background: color-mix(in oklab, var(--action) 14%, var(--card)); border-left: .25em solid var(--action); display: flex; flex-direction: column; }
.tl .blk i { flex: 1; border-top: 1px dashed color-mix(in oklab, var(--action) 35%, transparent); }
.tl .blk i:first-of-type { margin-top: .3em; }
.tl .pt { display: flex; align-items: center; gap: .5em; font-size: .85em; transform: translateY(-50%); left: 4.4em; }
.tl .pt em { margin-left: auto; font-style: normal; color: var(--quiet); }
.tl .now { height: .12em; background: var(--due); left: 3.4em; }
.tl .now::before { content: ""; position: absolute; left: -.3em; top: -.25em; width: .62em; height: .62em; border-radius: 50%; background: var(--due); }

/* the Lock Screen and its Live Activity */
.lockscreen { color: #fff; background: radial-gradient(90% 60% at 30% 20%, color-mix(in oklab, var(--action) 80%, #000), transparent 70%), radial-gradient(90% 70% at 80% 90%, color-mix(in oklab, var(--highlight) 70%, #000), transparent 70%), color-mix(in oklab, var(--action) 30%, #0b0b0d); }
.lk-date { text-align: center; font: 600 1.1em/1 var(--sans); margin-top: 2.6em; opacity: .9; }
.lk-time { text-align: center; font: 700 6.2em/1 var(--sans); letter-spacing: -.03em; margin-top: .05em; opacity: .95; }
.la-card { position: absolute; left: .9em; right: .9em; bottom: 5.5em; padding: 1em 1.1em; border-radius: 1.6em; background: #0d0d10d9; backdrop-filter: blur(10px); }
.la-r { display: flex; align-items: center; gap: .55em; }
.la-r b { flex: 1; font: 600 1em/1.2 var(--sans); }
.la-ic { width: 1.5em; height: 1.5em; border-radius: .45em; background: var(--action); flex: none; position: relative; overflow: hidden; }
.la-ic::after { content: ""; position: absolute; top: 0; right: 0; width: .55em; height: .55em; background: linear-gradient(225deg, #0d0d10 50%, var(--flap-hi) 50%); }
.la-tm { font: 600 1.55em/1 var(--sans); font-variant-numeric: tabular-nums; color: var(--flap-hi); }
.la-r2 { display: flex; justify-content: space-between; align-items: center; margin: .6em 0 .5em; font-size: .85em; opacity: .75; }
.pp { display: flex; gap: .25em; } .pp i { width: .75em; height: .75em; border-radius: .25em; border: .09em solid #fff8; }
.pp i.d { background: #fff; border-color: #fff; } .pp i.n { border-color: #fff; background: #fff4; }
.la-bar { height: .3em; border-radius: 1em; background: #fff2; overflow: hidden; } .la-bar i { display: block; width: 26%; height: 100%; background: var(--flap-hi); border-radius: 1em; }
.la-btns { display: flex; gap: .5em; margin-top: .8em; } .la-btns span { flex: 1; text-align: center; padding: .6em; border-radius: 99em; background: #fff2; font: 600 .85em/1 var(--sans); }
.la-btns .pri { background: var(--flap-hi); color: #111; }
.acc { display: flex; gap: .8em; justify-content: center; margin-top: 1.2em; }
.acc-c { position: relative; width: 4.2em; height: 4.2em; border-radius: 50%; background: #fff2; display: grid; place-items: center; }
.acc-c svg { position: absolute; inset: .35em; transform: rotate(-90deg); }
.acc-c circle { fill: none; stroke: #fff3; stroke-width: 3.5; } .acc-c .p { stroke: #fff; stroke-dasharray: 100; stroke-dashoffset: 67; stroke-linecap: round; }
.acc-c b { font: 700 .95em/1 var(--sans); }
.acc-r { width: 11em; height: 4.2em; border-radius: 1.1em; background: #fff2; padding: .55em .8em; display: flex; flex-direction: column; justify-content: center; font-size: .82em; line-height: 1.3; }
.acc-r b { font-weight: 700; } .acc-r span { opacity: .8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* quick entry, as a sheet over the list */
.sheet { position: absolute; left: 0; right: 0; bottom: 0; background: var(--card); border-radius: 1.8em 1.8em 0 0; padding: .6em 1.1em 1.4em; box-shadow: 0 -.4em 2em color-mix(in oklab, var(--ink) 18%, transparent); }
.grab { width: 2.6em; height: .3em; border-radius: 1em; background: var(--hairline); margin: 0 auto .9em; }
.qe-line { font: 500 1.12em/1.4 var(--sans); }
.qe-line u { text-decoration: none; border-radius: .25em; padding: 0 .1em; }
.u-when { background: color-mix(in oklab, var(--t-today) 22%, transparent); }
.u-time { background: color-mix(in oklab, var(--t-upcoming) 18%, transparent); }
.u-tag { background: color-mix(in oklab, var(--action) 18%, transparent); }
.qe-chips-ui { display: flex; gap: .35em; flex-wrap: wrap; margin: .8em 0 1em; }
.kb { background: color-mix(in oklab, var(--ink) 7%, var(--canvas)); border-radius: 1em; padding: .5em .3em; display: grid; gap: .45em; }
.kr { display: flex; gap: .3em; justify-content: center; }
.kr i { width: 2.2em; height: 2.7em; border-radius: .45em; background: var(--card); box-shadow: 0 .08em 0 color-mix(in oklab, var(--ink) 20%, transparent); }
.kr i.w { width: 4.4em; } .kr i.sp { width: 12em; }

/* widgets */
.wsmall, .wmed, .wlarge { background: var(--card); padding: 1.05em; }
.wh { display: flex; align-items: center; gap: .4em; margin-bottom: .55em; }
.wh .i { width: 1.15em; height: 1.15em; }
.wh b { font: 700 1.25em/1 var(--serif); } .wh em { margin-left: auto; font: 600 1.1em/1 var(--serif); font-style: normal; color: var(--t-today); }
.wsmall .wh b { margin-left: auto; font-size: 1.9em; color: var(--t-today); }
.wl { display: grid; gap: .1em; }
.wr { display: flex; align-items: center; gap: .55em; padding: .32em 0; font-size: .92em; min-width: 0; }
.wr span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color .2s; }
.wr em { font-style: normal; font-size: .82em; color: var(--quiet); white-space: nowrap; }
.wr .cb { width: 1.2em; height: 1.2em; margin: 0; }
.wr .cb:focus-visible { outline: 2px solid var(--action); outline-offset: 2px; }
.wr:has(.cb.done) span { color: var(--quiet); text-decoration: line-through; }
.wsmall .wr { font-size: .84em; }
.wmed { display: grid; grid-template-columns: 30% 1fr; gap: .9em; }
.wside { display: flex; flex-direction: column; gap: .2em; }
.wside .i { width: 1.6em; height: 1.6em; margin-bottom: auto; }
.wside b { font: 700 1.35em/1 var(--serif); } .wside em { font-style: normal; font-size: .8em; color: var(--quiet); }
.wsect { display: flex; align-items: center; gap: .4em; font: 600 .78em/1 var(--sans); color: var(--highlight); margin: .5em 0 .1em; }
.standby { background: #000; color: #f4efe6; display: grid; grid-template-columns: 1fr 1fr; gap: 1.2em; padding: 1.4em; }
.sby-clock { border-radius: 1.6em; background: #111; display: grid; place-items: center; align-content: center; font: 700 7em/1 var(--serif); color: var(--flap-hi); }
.sby-clock span { font: 600 .16em/1 var(--sans); color: #aaa; margin-top: .6em; letter-spacing: .1em; text-transform: uppercase; }
.sby-list { border-radius: 1.6em; background: #16161a; padding: 1.2em 1.4em; font-size: 1.25em; }
.sby-h { display: flex; align-items: center; gap: .4em; font: 700 1.3em/1 var(--serif); margin-bottom: .5em; }
.standby .cb { border-color: #8a8a90; } .standby .cb.done { background: var(--flap-hi); border-color: var(--flap-hi); color: #000; }

/* settings */
.nav-b { display: flex; align-items: center; gap: .2em; color: var(--action); padding: .3em .8em 0; font-size: 1em; }
.grp-h, .grp-f { font-size: .78em; color: var(--quiet); padding: 0 1.4em; margin: .9em 0 .45em; line-height: 1.4; }
.grp-h { text-transform: uppercase; letter-spacing: .06em; }
.grp { margin: 0 1em; background: var(--card); border-radius: .9em; overflow: hidden; }
.gr { display: flex; align-items: center; justify-content: space-between; padding: .78em .95em; font-size: .95em; position: relative; }
.gr + .gr::before { content: ""; position: absolute; top: 0; left: .95em; right: 0; height: 1px; background: var(--hairline); }
.gr .i { color: var(--action); stroke-width: 2.6; }
.gr em { font-style: normal; color: var(--quiet); }
.gr.on span { font-weight: 600; }