/* Ikiru · the planning system: Overview, Week, Quarter, Areas. Same DNA as the app (3.0): lilac page, white cards
   with a hairline, one black panel per view, Outfit for numbers and titles, DM Sans for text. */
#planView{padding:6px 0 80px;display:flex;flex-direction:column;gap:22px}
#planView .kicker{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-3)}
#planView h1,#planView h2,#planView h3{margin:0;font-family:var(--font-num);letter-spacing:-.03em}
#planView p{margin:0}
#planView .sp{flex:1}
#planView .btn{display:inline-flex;align-items:center;gap:8px}
.ikp-wait{padding:80px 0;text-align:center}
.ikp-hint{font-size:12.5px;color:var(--fg-3);line-height:1.45}
.ikp-sub{font-size:14px;color:var(--fg-2);line-height:1.45}
.ikp-err{font-size:13px;color:var(--bad);min-height:1em}
.ikp-pill{display:inline-flex;align-items:center;height:26px;padding:0 11px;border-radius:999px;border:1.5px solid var(--fg);font-family:var(--font-num);font-size:13px;font-weight:600;white-space:nowrap}
.ikp-gc{display:inline-flex;align-items:center;height:22px;padding:0 9px;border-radius:999px;background:var(--c);color:var(--ci);font-family:var(--font-num);font-size:12px;font-weight:700;white-space:nowrap;flex:none}
.ikp-gc.sm{height:19px;padding:0 7px;font-size:11px}
.ikp-dial{display:inline-grid;place-items:center;flex:none;border-radius:50%}
.ikp-dial svg{display:block}
.ikp-dial.done{background:var(--done);color:#0C0B10}
.ikp-dial.done svg{width:55%;height:55%}

/* the head of each view */
.ikp-head{display:flex;align-items:baseline;flex-wrap:wrap;gap:8px 16px;padding-top:6px}
.ikp-head h1{font-weight:300;font-size:44px;line-height:1;text-transform:lowercase}
.ikp-head.areas{align-items:flex-start}
.ikp-head.areas h1{text-transform:none;margin:6px 0 6px}
.ikp-range{font-size:14px;color:var(--fg-2)}

/* the black panel */
.ikp-hero{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1.1fr) minmax(0,.9fr);gap:28px;padding:28px 30px 0;border-radius:var(--r-pane,30px);background:var(--panel,#0C0B10);color:var(--panel-fg,#F6F4EF);overflow:hidden}
.ikp-hero .kicker{color:var(--panel-fg-2,#A9A6B5)}
.ikp-hero .kicker.sm{display:block;margin-top:22px}
.ikp-hero h2{font-weight:300;font-size:46px;line-height:1;margin:8px 0 6px}
.ikp-hero p{font-size:13px;color:var(--panel-fg-2,#A9A6B5)}
.ikp-hero .foot{margin-top:12px;font-size:11.5px}
.ikp-stack{display:flex;gap:4px;height:10px;margin:10px 0 12px}
.ikp-stack i{border-radius:99px;min-width:6px}
.ikp-leg{list-style:none;margin:0;padding:0;display:grid;gap:7px;font-size:13px}
.ikp-leg li{display:grid;grid-template-columns:10px 92px 40px minmax(0,1fr);align-items:center;gap:8px}
.ikp-leg li.none{display:block;color:var(--panel-fg-2)}
.ikp-leg i{width:9px;height:9px;border-radius:50%}
.ikp-leg b{font-family:var(--font-num);font-weight:600}
.ikp-leg em{font-style:normal;font-size:12px;color:var(--panel-fg-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ikp-ibars{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;align-items:end;height:150px;margin-top:12px}
.ikp-ib{display:flex;flex-direction:column;align-items:center;gap:6px;color:inherit;height:100%;justify-content:flex-end}
.ikp-ib .v{font-family:var(--font-num);font-size:15px;font-weight:600;display:flex;flex-direction:column;align-items:center;line-height:1.1}
.ikp-ib .v em{font-style:normal;font-family:var(--font-ui);font-size:9.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#FF8A70}
.ikp-ib .col{position:relative;display:flex;align-items:flex-end;justify-content:center;width:100%}
.ikp-ib .col i{width:min(34px,70%);border-radius:999px}
.ikp-ib.now .col i{box-shadow:0 0 0 2px var(--panel),0 0 0 3.5px #FF8A70}
.ikp-ib.none .col i{width:9px;border-radius:50%}
.ikp-ib .lk{position:absolute;bottom:20px;display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:#fff;color:#0C0B10}
.ikp-ib .d{font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--panel-fg-2)}
.ikp-hero .h-c{text-align:right}
.ikp-hero .big{font-family:var(--font-num);font-weight:200;font-size:96px;line-height:.95;letter-spacing:-.05em;margin:8px 0 4px}
.ikp-hero .big small{font-size:.4em;font-weight:300;margin-left:2px}
.ikp-hero .mini{display:flex;justify-content:flex-end;gap:22px;margin-top:16px}
.ikp-hero .mini b{display:block;font-family:var(--font-num);font-weight:400;font-size:24px;letter-spacing:-.02em;margin-top:3px}
.ikp-hero .mini b small{font-size:12px;color:var(--panel-fg-2);margin-left:2px}
.ikp-hero .h-l{grid-column:1 / -1;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));border-top:1px solid var(--panel-line,#2E2D36);margin:0 -30px;padding:0 30px}
.ikp-hero .ln{padding:14px 18px 18px;border-left:1px solid var(--panel-line,#2E2D36)}
.ikp-hero .ln:first-child{border-left:0;padding-left:0}
.ikp-hero .ln .kicker{display:flex;align-items:center;gap:7px}
.ikp-hero .ln .kicker i{width:7px;height:7px;border-radius:50%}
.ikp-hero .ln b{display:block;font-family:var(--font-num);font-weight:300;font-size:32px;line-height:1.1;margin-top:4px}
.ikp-hero .ln b small{font-size:15px;color:var(--panel-fg-2)}
/* quarter panel */
.ikp-hero.q{padding-bottom:28px;align-items:start}
.ikp-hero.q .h-c{text-align:left}
.ikp-hero.q .h-a .big{font-size:110px}
.ikp-hero .mini.q{justify-content:flex-start;display:grid;grid-template-columns:1fr 1fr;gap:14px 28px;max-width:260px}
.ikp-dots{display:grid;grid-template-columns:repeat(20,1fr);gap:7px;margin-top:14px;max-width:420px}
.ikp-dots i{aspect-ratio:1;border-radius:50%;background:#3A3946}
.ikp-dots i.on{background:#F6F4EF}
.ikp-dots i.t{background:transparent;box-shadow:inset 0 0 0 2px #E8492C}
.ikp-wbars{display:flex;gap:6px;align-items:end;height:150px;margin-top:12px}
.ikp-wbars .wb{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;height:100%;justify-content:flex-end;color:inherit;min-width:0}
.ikp-wbars .v{font-family:var(--font-num);font-size:13px;font-weight:600}
.ikp-wbars .col{display:flex;align-items:flex-end;justify-content:center;width:100%}
.ikp-wbars .col i{width:min(26px,80%);border-radius:999px;background:#F07A3A}
.ikp-wbars .none .col i{width:7px;border-radius:50%;background:#3A3946}
.ikp-wbars .cur .col i{box-shadow:0 0 0 2px var(--panel),0 0 0 3.5px #F6F4EF}
.ikp-wbars .d{font-size:10.5px;color:var(--panel-fg-2)}
.ikp-hero .mo{display:flex;justify-content:space-between;font-size:11.5px;color:var(--panel-fg-2);margin-top:8px}

/* capacity */
.ikp-cap{display:grid;grid-template-columns:minmax(220px,.8fr) minmax(0,2fr);gap:20px;align-items:center;padding:20px 24px;border-radius:var(--r-card,26px);background:var(--surface);border:1px solid var(--line)}
.ikp-cap .big{font-family:var(--font-num);font-weight:300;font-size:38px;line-height:1.05;margin:6px 0 4px;color:var(--done)}
.ikp-cap .big.over{color:var(--bad)}
.ikp-cap .big small{font-size:.5em}
.ikp-cap .big em{font-style:normal;font-size:15px;font-weight:600;margin-left:6px}
.ikp-cap p{font-size:11.5px;color:var(--fg-3)}
.cp-days{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:12px}
.cp{display:grid;grid-template-columns:1fr auto;gap:2px 8px;font-size:13px}
.cp .kicker{grid-column:1 / -1}
.cp b{font-family:var(--font-num);font-weight:600}
.cp.over b{color:var(--bad)}
.cp .pc{font-size:12px;color:var(--fg-3)}
.cp .bar{grid-column:1 / -1;height:6px;border-radius:99px;background:var(--empty);overflow:hidden;margin-top:4px}
.cp .bar i{display:block;height:100%;background:var(--done);border-radius:inherit}
.cp.over .bar i{background:var(--bad)}
.cp.rest b{color:var(--fg-3);font-weight:400}

/* the planner */
.ikp-planner{border-radius:var(--r-pane,30px);background:var(--surface);border:1px solid var(--line);padding:22px 22px 18px}
.ikp-planner.off{padding-bottom:22px}
.pl-h{display:flex;flex-wrap:wrap;align-items:flex-start;gap:12px 20px}
.pl-h>div:first-child{flex:1;min-width:260px}
.pl-h h2{font-weight:300;font-size:34px;line-height:1.05}
.pl-h p{font-size:13px;color:var(--fg-2);margin-top:4px;max-width:560px}
.pl-b{display:flex;flex-wrap:wrap;gap:8px}
.pl-leg{display:flex;flex-wrap:wrap;gap:6px 16px;margin:16px 0 12px;font-size:12px;color:var(--fg-2)}
.pl-leg span{display:inline-flex;align-items:center;gap:6px}
.pl-leg .hint{color:var(--fg-3)}
.pl-leg .sw{width:14px;height:10px;border-radius:3px;display:inline-block}
.sw.done{background:var(--done)} .sw.ongoing{background:var(--ongoing)} .sw.planned{background:var(--surface);box-shadow:inset 0 0 0 1.5px var(--line-strong)} .sw.fixed{background:#0C0B10} .sw.act{background:repeating-linear-gradient(135deg,var(--act) 0 2px,transparent 2px 5px)}
/* the planner: hours down, days across, each hour six 10-minute blocks (the blocks of the day's timeline) */
.pl-scroll{overflow-x:auto;margin:0 -6px;padding:2px 6px 6px}
.pl-g{display:grid;grid-template-columns:44px repeat(7,minmax(118px,1fr));column-gap:12px;row-gap:5px;align-items:center;min-width:1000px}
.pl-g .hl{font-family:var(--font-num);font-size:12.5px;font-weight:500;color:var(--fg)}
.pl-g .ph{display:flex;align-items:center;gap:6px;min-width:0;padding:6px 2px;overflow:hidden}
.pl-g .ph button{display:flex;align-items:baseline;gap:5px;min-width:0;overflow:hidden;white-space:nowrap;color:var(--fg)}
.pl-g .ph span{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-3)}
.pl-g .ph b{font-family:var(--font-num);font-size:20px;font-weight:500;letter-spacing:-.03em}
.pl-g .ph em{font-style:normal;font-size:10.5px;font-weight:700;color:var(--accent);border:1.5px solid var(--accent);border-radius:999px;padding:1px 7px}
.pl-g .ph .ix{margin-left:auto;font-style:normal;font-family:var(--font-num);font-size:12px;font-weight:600;color:#0C0B10;border-radius:999px;padding:2px 8px;flex:none}
.pl-g .ph.today b{color:var(--accent)}
.ut-tray{display:flex;flex-direction:column;gap:4px;align-self:start}
.ut{display:block;text-align:left;font-size:11.5px;font-weight:600;padding:4px 7px;border-radius:7px;background:var(--surface);box-shadow:inset 3px 0 0 var(--c),inset 0 0 0 1px var(--line-strong);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:grab}
.ut.done{opacity:.55;text-decoration:line-through}
.ikp-hr{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:3px;border-radius:5px;transition:box-shadow .15s}
.ikp-hr .ikp-c{height:24px;border-radius:4px;background:var(--empty);cursor:pointer;transition:box-shadow .12s}
.ikp-hr .ikp-c:hover{box-shadow:inset 0 0 0 1.5px var(--line-strong)}
.ikp-hr.past .ikp-c{background:var(--past)}
.ikp-hr.over{box-shadow:0 0 0 2px var(--blue)}
.ikp-dragging .ikp-hr .ikp-c{box-shadow:inset 0 0 0 1px var(--blue-soft,var(--line-strong))}
.ikp-sg{display:flex;align-items:center;gap:4px;min-width:0;height:24px;box-sizing:border-box;padding:0 6px;border-radius:4px;font-family:var(--font-num);font-size:10.5px;font-weight:600;line-height:1;white-space:nowrap;overflow:hidden;text-align:left;background:var(--surface);color:var(--fg);box-shadow:inset 0 0 0 1.5px var(--line-strong)}
.ikp-sg>span{overflow:hidden;text-overflow:ellipsis;min-width:0}
.ikp-sg b{font-weight:700}
.ikp-sg.cont>span{opacity:.45}
.ikp-sg.linked{box-shadow:inset 2.5px 0 0 var(--c),inset 0 0 0 1.5px var(--line-strong)}
.ikp-sg.done{background:var(--done);color:#0C0B10;box-shadow:none}
.ikp-sg.ongoing{background:var(--ongoing);color:#0C0B10;box-shadow:none}
.ikp-sg.done.linked,.ikp-sg.ongoing.linked{box-shadow:inset 2.5px 0 0 var(--c)}
.ikp-sg.fixed{background:#0C0B10;color:#fff;box-shadow:none}
.ikp-sg.fixed svg{width:11px;height:11px;flex:none}
.ikp-sg.act{background-color:var(--act-bg);color:var(--act-fg,var(--fg-2));box-shadow:none;font-weight:500}
.ikp-sg.act.hatch{background-image:repeating-linear-gradient(135deg,var(--act) 0 1.4px,transparent 1.4px 6px)}
.ikp-sg.act.transit{background-image:radial-gradient(circle,var(--act) 1.3px,transparent 1.8px);background-size:7px 7px}
.ikp-sg.act>span{background:var(--act-bg);border-radius:4px;padding:1px 3px}
.ikp-sg[draggable="true"]{cursor:grab}
.ikp-hr .now{outline:2px solid var(--accent);outline-offset:1px}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .ikp-sg.fixed{background:#F4F1EC;color:#0C0B10} }
:root[data-theme="dark"] .ikp-sg.fixed{background:#F4F1EC;color:#0C0B10}

/* the lists of the week */
.ikp-sec{display:flex;flex-direction:column;gap:14px}
.ikp-sec>.sh{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px}
.ikp-sec>.sh h2{font-weight:300;font-size:32px;line-height:1.05;display:flex;align-items:center;gap:10px}
.ikp-sec>.sh h2 i{width:10px;height:10px;border-radius:50%}
.ikp-sec>.sh p{font-size:12.5px;color:var(--fg-3)}
.ikp-crits{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.ikp-crit{display:flex;flex-direction:column;gap:8px;min-height:190px;padding:16px 18px;border-radius:var(--r-card,26px);background:var(--c);color:var(--ci);text-align:left}
.ikp-crit .ct{display:flex;align-items:center;gap:8px}
.ikp-crit .ct .ikp-gc{background:color-mix(in srgb,var(--ci) 14%,transparent);color:var(--ci);box-shadow:inset 0 0 0 1.5px var(--ci)}
.ikp-crit .sn{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;opacity:.75}
.ikp-crit .ibtn{margin-left:auto;color:inherit;opacity:.7}
.ikp-crit .ms{font-size:12.5px;opacity:.8}
.ikp-crit .tt{font-family:var(--font-num);font-size:21px;font-weight:500;line-height:1.2;letter-spacing:-.02em;text-align:left;color:inherit}
.ikp-crit .cb{display:flex;align-items:flex-end;justify-content:space-between;gap:8px;margin-top:auto}
.ikp-crit .when{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 12px;border-radius:999px;background:#0C0B10;color:#fff;font-size:12.5px;font-weight:600}
.ikp-crit .dl{display:flex;flex-direction:column;align-items:center;gap:3px;color:inherit;font-family:var(--font-num);font-weight:600;font-size:13px}
.ikp-crit.done .tt{text-decoration:line-through;opacity:.7}
.ikp-crit.add{align-items:center;justify-content:center;background:transparent;color:var(--fg-2);border:1.5px dashed var(--line-strong);font-weight:600}
.ikp-crit.add em{font-style:normal;font-size:12px;color:var(--fg-3);font-weight:500}
.ikp-grps{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:26px 22px;align-items:start}
.ikp-tasks{display:flex;flex-direction:column;gap:8px}
.ikp-task{display:grid;grid-template-columns:14px minmax(0,1fr) auto;align-items:center;gap:10px;padding:12px 14px 12px 10px;border-radius:18px;background:var(--surface);border:1px solid var(--line);box-shadow:inset 4px 0 0 var(--c)}
.ikp-task .grip{color:var(--fg-3);cursor:grab;opacity:.6}
.ikp-task .tb{display:flex;flex-direction:column;align-items:flex-start;gap:5px;min-width:0}
.ikp-task .tt{font-size:14.5px;font-weight:600;text-align:left;color:var(--fg);line-height:1.3}
.ikp-task.done .tt{text-decoration:line-through;color:var(--fg-3)}
.ikp-task .gl{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--fg-2);min-width:0}
.ikp-task .gl>span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ikp-task .sec{display:inline-flex;align-items:center;gap:6px}
.ikp-task .sec::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--c)}
.ikp-task .when{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;border-radius:999px;background:#0C0B10;color:#fff;font-size:12px;font-weight:600}
.ikp-task .when.none{background:transparent;color:var(--fg-2);box-shadow:inset 0 0 0 1.5px var(--line-strong)}
.ikp-task .dl{display:flex;flex-direction:column;align-items:center;gap:2px;font-family:var(--font-num);font-size:12px;font-weight:600;color:var(--fg)}
.ikp-add{display:flex;gap:8px;padding:6px;border-radius:999px;background:var(--surface);border:1px solid var(--line)}
.ikp-add input{flex:1;min-width:0;border:0;background:var(--surface-2);border-radius:999px;padding:0 16px;height:40px;font-size:14px}
.ikp-add input:focus{outline:2px solid var(--blue);outline-offset:0}
.ikp-carry{display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:18px;background:var(--surface);border:1px dashed var(--line-strong);font-size:14px}
.ikp-carry .btn{margin-left:auto}

/* quarter */
.ikp-achips{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;font-size:12.5px}
.ikp-achips .ac{display:inline-flex;flex-wrap:wrap;align-items:center;gap:5px}
.ikp-achips .ac b{font-weight:600;color:var(--fg-2);margin-right:2px}
.ikp-achips .ac i{font-style:normal;font-weight:600;padding:3px 10px;border-radius:999px;background:var(--c);color:var(--ci)}
.ikp-achips .btn{margin-left:auto}
.ikp-goals{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px}
.ikp-goal{display:flex;flex-direction:column;gap:8px;min-height:178px;padding:14px 16px;border-radius:24px;background:var(--c);color:var(--ci);text-align:left;transition:transform .12s}
.ikp-goal:hover{transform:translateY(-2px)}
.ikp-goal.sel{box-shadow:0 0 0 3px var(--bg),0 0 0 5.5px var(--fg)}
.ikp-goal .gt{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:700;min-width:0;white-space:nowrap}
.ikp-goal .gt .sn{overflow:hidden;text-overflow:ellipsis;min-width:0}
.ikp-goal .gt .ikp-gc{background:transparent;color:var(--ci);box-shadow:inset 0 0 0 1.5px var(--ci)}
.ikp-goal .sn{text-transform:uppercase;letter-spacing:.06em;opacity:.8}
.ikp-goal .due{margin-left:auto;font-weight:600;opacity:.8}
.ikp-goal .gp{display:flex;align-items:center;justify-content:space-between}
.ikp-goal .gp b{font-family:var(--font-num);font-weight:300;font-size:46px;line-height:1;letter-spacing:-.04em}
.ikp-goal .gp b small{font-size:.42em}
.ikp-goal .gn{font-family:var(--font-num);font-size:17px;font-weight:500;line-height:1.2}
.ikp-goal .gf{margin-top:auto;font-size:11.5px;opacity:.75}
.ikp-goal.add{align-items:center;justify-content:center;background:transparent;color:var(--fg-2);border:1.5px dashed var(--line-strong);font-weight:600}
.ikp-goal.add em{font-style:normal;font-size:12px;color:var(--fg-3);font-weight:500}
.ikp-gd{padding:22px 24px;border-radius:var(--r-pane,30px);background:var(--surface);border:1px solid var(--line);display:flex;flex-direction:column;gap:12px}
.gd-h{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.gd-h h2{font-weight:400;font-size:28px}
.gd-w{font-size:13.5px;color:var(--fg-2)}
.gd-w b{color:var(--fg)}
.gd-w.none{color:var(--fg-3)}
.lnk{color:var(--blue);font-weight:600;text-decoration:underline}
.gd-b{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:22px;align-items:start}
.gd-ms{display:flex;flex-direction:column;gap:8px}
.msr{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto auto auto;align-items:center;gap:10px;padding:10px 12px;border-radius:16px;background:var(--surface-2);cursor:pointer}
.msr.sel{box-shadow:inset 0 0 0 1.5px var(--fg)}
.msr .mc{font-family:var(--font-num);font-size:12px;font-weight:700;padding:3px 9px;border-radius:999px;background:#0C0B10;color:#fff}
.msr .mt{display:flex;flex-direction:column;min-width:0}
.msr .mt b{font-size:14px;font-weight:600}
.msr .mt em{font-style:normal;font-size:11.5px;color:var(--fg-3)}
.msr.done .mt b{text-decoration:line-through;color:var(--fg-3)}
.msr .mk{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--fg-2)}
.msr .mk::before{content:"";width:18px;height:18px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--fg-2)}
.msr .mk.on::before{display:none}
.msr .mk svg{width:18px;height:18px;padding:2px;border-radius:50%;background:#0C0B10;color:#fff}
.msr .mp{font-family:var(--font-num);font-size:18px;font-weight:400;min-width:44px;text-align:right}
.msr .mp small{font-size:11px}
.gd-t{display:flex;flex-direction:column;gap:8px}
.gd-t .tr{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:10px;padding:10px 12px;border-radius:16px;border:1px solid var(--line)}
.gd-t .tr.done .tn{text-decoration:line-through;color:var(--fg-3)}
.gd-t .ck{width:22px;height:22px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--fg-2);display:grid;place-items:center}
.gd-t .ck.on{background:var(--done);box-shadow:none;color:#0C0B10}
.gd-t .tn{font-size:14px;font-weight:500}
.gd-t .tw{display:inline-flex;align-items:center;gap:5px;height:26px;padding:0 10px;border-radius:999px;font-size:11.5px;font-weight:600;color:var(--fg-2);box-shadow:inset 0 0 0 1.5px var(--line-strong);white-space:nowrap}
.gd-t .tw.on{background:#0C0B10;color:#fff;box-shadow:none}
.gd-t .tw.add{color:var(--fg);box-shadow:inset 0 0 0 1.5px var(--fg)}

/* areas */
.ikp-areas{display:grid;grid-template-columns:minmax(220px,300px) minmax(0,1fr);gap:22px;align-items:start}
.ikp-areas aside{display:flex;flex-direction:column;gap:6px}
.ikp-areas .ar{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;padding:10px 12px;border-radius:16px;text-align:left;color:var(--fg)}
.ikp-areas .ar.on{background:var(--surface);box-shadow:0 0 0 1px var(--line)}
.ikp-areas .ar .fd{display:grid;place-items:center;width:38px;height:30px;border-radius:9px;background:var(--c);color:#fff}
.ikp-areas .ar b{display:block;font-size:15px}
.ikp-areas .ar em{font-style:normal;font-size:12px;color:var(--fg-3)}
.ikp-areas .ar.add{display:flex;justify-content:center;gap:8px;border:1.5px solid var(--line-strong);border-radius:999px;font-weight:600;margin-top:6px}
.ae{display:flex;flex-direction:column;gap:14px;padding:24px;border-radius:var(--r-pane,30px);background:var(--surface);border:1px solid var(--line)}
.ae-h{display:flex;align-items:center;gap:12px}
.ae-h .dot{width:14px;height:14px;border-radius:50%;background:var(--c);flex:none}
.ae .an{font-family:var(--font-num);font-size:36px;font-weight:300;letter-spacing:-.03em;border:0;background:transparent;min-width:0;flex:1;padding:0}
.ae .ad{border:0;background:transparent;font-size:14px;color:var(--fg-2);padding:0}
.ae input:focus{outline:2px solid var(--blue);outline-offset:3px;border-radius:6px}
.ae-o{display:grid;grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,1fr));gap:10px}
.ae-o .o{display:flex;flex-direction:column;gap:8px;padding:12px 14px;border-radius:16px;background:var(--surface-2)}
.ae-o select,.ae-o input{border:0;background:transparent;font-weight:600;font-size:14px;padding:0}
.sws{display:flex;flex-wrap:wrap;gap:7px}
.sws button{width:24px;height:24px;border-radius:50%}
.sws button.on{box-shadow:0 0 0 2px var(--surface-2),0 0 0 4px var(--fg)}
.secs{display:flex;flex-direction:column}
.sr{display:grid;grid-template-columns:auto auto minmax(0,1fr) auto auto;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--line)}
.sr .mv{display:flex;flex-direction:column}
.sr .mv .ibtn{height:16px}
.sr .mv .ibtn:disabled{opacity:.25}
.sr .sw{width:34px;height:34px;border-radius:10px}
.sr .sn{display:flex;flex-direction:column;min-width:0}
.sr .sn input{border:0;background:transparent;font-size:15px;font-weight:600;padding:0}
.sr .sn em{font-style:normal;font-size:12px;color:var(--fg-3)}
.sr .sc{font-size:12.5px;color:var(--fg-2);white-space:nowrap}
.ae-f{display:flex;justify-content:flex-end}
.ikp-del{border-color:var(--bad)!important;color:var(--bad)}

/* overview */
.ikp-hello{display:flex;align-items:flex-end;flex-wrap:wrap;gap:12px 20px;padding-top:6px}
.ikp-hello>div{flex:1;min-width:260px}
.ikp-hello h1{font-family:var(--font-num);font-weight:300;font-size:56px;line-height:1.02;letter-spacing:-.045em;margin:8px 0 8px}
.ikp-hello h1 em{font-style:normal;color:#5B4FE0}
.ikp-hello p{font-size:15px;color:var(--fg-2)}
.ikp-ov{display:grid;grid-template-columns:minmax(300px,420px) minmax(0,1fr);gap:22px;align-items:stretch}
.ikp-today{display:flex;flex-direction:column;gap:14px;padding:24px;border-radius:var(--r-pane,30px);background:var(--panel,#0C0B10);color:var(--panel-fg,#F6F4EF);min-height:520px}
.ikp-today .kicker{color:var(--panel-fg-2,#A9A6B5)}
.ikp-today .tt{display:flex;align-items:center;justify-content:space-between}
.pillbtn{display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 15px;border-radius:999px;background:#fff;color:#0C0B10;font-size:13.5px;font-weight:700}
.ikp-today .ix{display:flex;align-items:center;gap:18px;margin-top:8px}
.ikp-today .ix h2{font-weight:300;font-size:34px;line-height:1.05}
.ikp-today .ix p{font-size:13px;color:var(--panel-fg-2)}
.ikp-today .sp{flex:1}
.ikp-today .nw{display:grid;grid-template-columns:1fr auto;gap:6px 10px;padding:14px 16px;border-radius:18px;background:var(--panel-2,#1A1920)}
.ikp-today .nw .kicker{color:#F3B53F}
.ikp-today .nw .ck{font-family:var(--font-num);font-size:12.5px;color:var(--panel-fg-2)}
.ikp-today .nw b{grid-column:1 / -1;font-size:16px;font-weight:500}
.ikp-today .nw .bar{grid-column:1 / -1;height:5px;border-radius:99px;background:#2E2D36;overflow:hidden}
.ikp-today .nw .bar i{display:block;height:100%;background:#F3B53F;border-radius:inherit}
.ikp-today .nx{display:flex;flex-direction:column;gap:9px;padding-top:12px;border-top:1px solid var(--panel-line,#2E2D36)}
.ikp-today .nr{display:grid;grid-template-columns:44px auto minmax(0,1fr);align-items:center;gap:10px;font-size:14px}
.ikp-today .nr .t{font-family:var(--font-num);color:var(--panel-fg-2)}
.ikp-today .nr .c{font-family:var(--font-num);font-size:11.5px;font-weight:700;padding:2px 8px;border-radius:999px;box-shadow:inset 0 0 0 1.5px var(--panel-fg-2)}
.ikp-today .nr .n{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ikp-month{padding:24px;border-radius:var(--r-pane,30px);background:var(--surface);border:1px solid var(--line);display:flex;flex-direction:column;gap:14px}
.ikp-month .mh{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.ikp-month .mh h2{font-weight:300;font-size:36px;margin-top:4px}
.ikp-month .ms{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px 30px}
.ikp-month .ms b{display:block;font-family:var(--font-num);font-weight:300;font-size:40px;line-height:1}
.ikp-month .ms b small{font-size:15px;color:var(--fg-3)}
.ikp-month .ms b.up{color:var(--done)} .ikp-month .ms b.dn{color:var(--bad)}
.ikp-month .ms span{font-size:12.5px;color:var(--fg-2)}
.ikp-month .ms p{margin-left:auto;font-size:12.5px;color:var(--fg-3)}
.ikp-month .cg{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px 4px}
.ikp-month .dw{font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-3);text-align:center;padding-bottom:4px}
.ikp-month .cd{display:flex;flex-direction:column;align-items:center;gap:4px;padding:4px 0;border-radius:14px;color:var(--fg);min-height:72px}
.ikp-month .cd:hover{background:var(--surface-2)}
.ikp-month .cd .n{display:flex;align-items:center;gap:3px;font-family:var(--font-num);font-size:12px;color:var(--fg-2)}
.ikp-month .cd.today .n{color:var(--accent);font-weight:700}
.ikp-month .cd.today .mdisc{box-shadow:0 0 0 2px var(--surface),0 0 0 3.5px var(--accent)}
.ikp-month .cd .lk,.ikp-month .cd .fl{display:inline-grid;color:var(--fg)}
.ikp-month .cd .pl{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--line-strong);font-size:10.5px;color:var(--fg-2)}
.ikp-month .cd .pl.ghost{box-shadow:inset 0 0 0 1.5px var(--line);color:var(--fg-3)}
.ikp-month .cd .rs{font-size:10.5px;color:var(--fg-3);height:44px;display:grid;place-items:center}
.ikp-month .lg{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:12px;color:var(--fg-2)}
.ikp-month .lg span{display:inline-flex;align-items:center;gap:6px}
.ikp-month .lg i{width:9px;height:9px;border-radius:50%}
.ikp-month .lg .g{background:#5FD07A} .ikp-month .lg .a{background:#F3B53F} .ikp-month .lg .r{background:#E8492C}
.ikp-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.ikp-tile{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:14px;padding:18px 20px;border-radius:24px;background:var(--surface);border:1px solid var(--line);text-align:left;color:var(--fg)}
.ikp-tile .ic{display:grid;place-items:center;width:44px;height:44px;border-radius:14px;background:var(--surface-2)}
.ikp-tile b{display:block;font-size:15px}
.ikp-tile em{font-style:normal;font-size:12.5px;color:var(--fg-3);display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ikp-tile .bg{font-family:var(--font-num);font-weight:300;font-size:34px;letter-spacing:-.03em}
.ikp-tile .bg small{font-size:.45em}
.ikp-from{display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 9px 0 7px;border-radius:999px;background:var(--surface-2);font-size:11.5px;font-weight:600;color:var(--fg-2);white-space:nowrap}
.ikp-from i{width:7px;height:7px;border-radius:50%;background:var(--c)}

/* sheets */
.ikp-veil{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:16px;background:rgba(12,11,16,.42)}
.ikp-sheet{width:min(560px,100%);max-height:calc(100vh - 32px);overflow:auto;display:flex;flex-direction:column;gap:14px;padding:22px 22px 18px;border-radius:26px;background:var(--surface);color:var(--fg);box-shadow:0 30px 70px -30px rgba(0,0,0,.5),0 0 0 1px var(--line)}
.ikp-sh-h{display:flex;align-items:center;justify-content:space-between;gap:12px}
.ikp-sh-h h3{font-weight:400;font-size:26px}
.ikp-f{display:flex;flex-direction:column;gap:6px;min-width:0}
.ikp-f .kicker{font-size:10.5px}
.ikp-f input,.ikp-f select,.ikp-f textarea{width:100%;min-width:0;height:44px;padding:0 14px;border-radius:14px;border:1px solid var(--line-strong);background:var(--surface-2);font-size:14.5px;color:var(--fg)}
.ikp-f textarea{height:auto;padding:10px 14px;resize:vertical;line-height:1.4}
.ikp-row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.ikp-row3{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:12px}
.ikp-unit{position:relative;display:block}
.ikp-unit em{position:absolute;right:14px;top:50%;transform:translateY(-50%);font-style:normal;font-size:12px;color:var(--fg-3)}
.ikp-sh-f{display:flex;align-items:center;gap:8px;margin-top:4px}
.ikp-days{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.ikp-day{display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 0;border-radius:14px;border:1.5px solid var(--line-strong);color:var(--fg)}
.ikp-day span{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-3)}
.ikp-day b{font-family:var(--font-num);font-size:20px;font-weight:500}
.ikp-day.on{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.ikp-day.on span{color:inherit}
.ikp-day.past{opacity:.55}

/* phones and narrow windows */
@media (max-width:1100px){
  .ikp-hero{grid-template-columns:1fr 1fr}
  .ikp-hero .h-c{grid-column:1 / -1;text-align:left}
  .ikp-hero .mini{justify-content:flex-start}
  .ikp-ov{grid-template-columns:1fr}
  .ikp-today{min-height:0}
  .gd-b{grid-template-columns:1fr}
  .ae-o{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  #planView{gap:18px}
  .ikp-head h1{font-size:36px}
  .ikp-hello h1{font-size:40px}
  .ikp-hero{grid-template-columns:1fr;padding:22px 20px 0;gap:22px}
  .ikp-hero.q{padding-bottom:22px}
  .ikp-hero .big{font-size:76px}
  .ikp-hero.q .h-a .big{font-size:84px}
  .ikp-hero .h-l{margin:0 -20px;padding:0 20px}
  .ikp-cap{grid-template-columns:1fr}
  .ikp-crits{grid-template-columns:1fr}
  .ikp-tiles{grid-template-columns:1fr}
  .ikp-areas{grid-template-columns:1fr}
  .ikp-row3{grid-template-columns:1fr 1fr}
  .ikp-row3>:first-child{grid-column:1 / -1}
  .msr{grid-template-columns:auto minmax(0,1fr) auto auto;}
  .msr .ikp-dial,.msr .mp{display:none}
  .ikp-month .cd{min-height:58px}
  .ikp-month .cd .mdisc,.ikp-month .cd .pl,.ikp-month .cd .rs{transform:scale(.82)}
  .ikp-planner{padding:16px 12px}
}

body[data-view="areas"] .datenav{visibility:hidden}
/* this week · next week (as in Yokan: only these two are open) */
.ikp-seg{display:inline-flex;gap:2px;padding:4px;border-radius:999px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);align-self:center}
.ikp-seg button{height:34px;padding:0 16px;border-radius:999px;font-size:13.5px;font-weight:600;color:var(--fg-2);white-space:nowrap}
.ikp-seg button[aria-selected="true"]{background:var(--fg);color:var(--bg)}
/* the hero of the week: Yokan's board of this week, same proportions */
.yh{--pad:clamp(22px,4vw,38px);--hero:#0C0B10;--on-hero:#F6F4EF;--hero-muted:#A9A6B5;--hero-dim:#2E2D36;--violet:#8775E6;--pink:#E18AD5;--tomato:#E8492C;--yellow:#F3B53F;--teal:#36AE9B;
  --line-h:color-mix(in srgb,var(--on-hero) 11%,transparent);--grey-h:color-mix(in srgb,var(--on-hero) 46%,var(--hero));
  position:relative;overflow:hidden;isolation:isolate;padding:var(--pad) 0 0;border-radius:34px;background:var(--hero);color:var(--on-hero)}
.yh::before{content:"";position:absolute;z-index:-1;left:-110px;top:-190px;width:360px;height:360px;border-radius:50%;background:conic-gradient(from 20deg,var(--pink),var(--yellow),var(--tomato),var(--violet),var(--teal),var(--pink));filter:blur(52px);opacity:.62}
.yh p{margin:0}
.yh-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,min(460px,52%));gap:26px clamp(24px,5vw,64px);padding:0 var(--pad) 30px}
.yh-left{display:flex;flex-direction:column;justify-content:space-between;gap:30px;min-width:0}
.yh-right{min-width:0}
.yh-eb{font-size:14.5px;font-weight:500;text-transform:lowercase;color:var(--hero-muted);margin-bottom:10px!important}
.yh-wk{font-family:var(--font-num);font-size:clamp(2.7rem,9vw,3.9rem);font-weight:300;line-height:1;letter-spacing:-.04em;text-transform:lowercase;white-space:nowrap}
.yh-dt{margin-top:8px!important;font-size:clamp(17px,4.6vw,22px);font-weight:400;letter-spacing:-.01em;white-space:nowrap}
.yh-sc{text-align:right}
.yh-score{font-family:var(--font-num);font-weight:200;font-size:clamp(3.6rem,7.4vw,5.6rem);line-height:.86;letter-spacing:-.045em;font-variant-numeric:tabular-nums}
.yh-score small{font-size:.38em;font-weight:300;letter-spacing:0;margin-left:.08em;color:var(--hero-muted)}
.yh-cap{margin-top:8px!important;font-size:13.5px;color:var(--hero-muted)}
.yh-cap strong{color:var(--on-hero);font-weight:600}
.yh-days{--w:30px;--u:22px;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));align-items:end;margin-top:26px}
.yh-day{--bh:calc(var(--bw) * var(--w) + var(--bu) * var(--u));--ah:calc(var(--aw) * var(--w) + var(--au) * var(--u));display:flex;flex-direction:column;align-items:center;justify-content:flex-end;min-width:0;padding:0;color:inherit}
.yh-day[data-zero]{--bh:8px}
.yh-col{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;width:100%;height:calc(var(--tw) * var(--w) + var(--tu) * var(--u) + 36px)}
.yh-dn{position:absolute;left:0;right:0;bottom:calc(max(var(--bh),var(--ah)) + 19px);text-align:center;font:300 15px/1 var(--font-num);color:var(--hero-muted);font-variant-numeric:tabular-nums}
.yh-pill{width:var(--w);height:var(--bh);border-radius:calc(var(--w) / 2);margin-bottom:9px;opacity:.62;background:linear-gradient(to top,var(--violet),color-mix(in srgb,var(--violet) 72%,var(--pink)));
  box-shadow:0 0 10px 1px color-mix(in srgb,var(--pink) 26%,transparent),0 0 26px 6px color-mix(in srgb,var(--violet) 34%,transparent)}
.yh-day[data-k="1"] .yh-pill{opacity:.88;background:linear-gradient(to top,var(--violet),var(--pink));box-shadow:0 0 12px 2px color-mix(in srgb,var(--pink) 40%,transparent),0 0 32px 8px color-mix(in srgb,var(--violet) 40%,transparent)}
.yh-day[data-k="2"] .yh-pill{opacity:1;background:linear-gradient(to top,var(--violet),var(--pink) 55%,var(--tomato));box-shadow:0 0 14px 3px color-mix(in srgb,var(--pink) 52%,transparent),0 0 40px 11px color-mix(in srgb,var(--violet) 44%,transparent)}
.yh-day[data-k="3"] .yh-pill{opacity:1;background:linear-gradient(to top,var(--violet),var(--pink) 48%,var(--tomato) 78%,var(--yellow));box-shadow:0 0 16px 4px color-mix(in srgb,var(--pink) 64%,transparent),0 0 50px 15px color-mix(in srgb,var(--violet) 52%,transparent)}
.yh-day[data-zero] .yh-pill{width:8px;height:8px;border-radius:50%;background:var(--hero-dim);opacity:1;box-shadow:none}
.yh-day[data-k="1"] .yh-dn,.yh-day[data-k="2"] .yh-dn,.yh-day[data-k="3"] .yh-dn{color:var(--on-hero)}
.yh-us{position:absolute;left:50%;bottom:calc(var(--ah) + 8px);width:calc(var(--w) + 8px);margin-left:calc(var(--w) / -2 - 4px);border-top:2px dotted color-mix(in srgb,var(--on-hero) 62%,transparent)}
.yh-dl{align-self:stretch;text-align:center;padding:10px 0 0;box-shadow:inset 0 1px 0 color-mix(in srgb,var(--on-hero) 24%,transparent);font-size:12.5px;line-height:1;color:var(--hero-muted);text-transform:lowercase}
.yh-day[data-s="now"] .yh-dl{color:var(--on-hero);font-weight:600;box-shadow:inset 0 2.5px 0 var(--on-hero)}
.yh-day[data-s="next"] .yh-dl{opacity:.5}
.yh-note{display:flex;justify-content:space-between;gap:16px;margin-top:14px!important;font-size:12.5px;color:var(--hero-muted)}
.yh-note u{display:inline-block;width:34px;height:8px;margin-right:8px;vertical-align:middle;border-radius:4px;text-decoration:none;background:linear-gradient(to right,color-mix(in srgb,var(--violet) 50%,var(--hero)),var(--violet) 30%,var(--pink) 60%,var(--tomato) 82%,var(--yellow))}
.yh-note i{display:inline-block;width:20px;margin-right:7px;vertical-align:middle;border-top:2px dotted color-mix(in srgb,var(--on-hero) 62%,transparent)}
.yh-ar{max-width:470px}
.yh-ar .yh-eb{margin-bottom:12px!important}
.yh-ab{display:flex;gap:3px;height:10px}
.yh-ab i{flex:var(--n) 1 0;min-width:4px;border-radius:3px;background:var(--c)}
.yh-ab i:first-child{border-top-left-radius:5px;border-bottom-left-radius:5px}
.yh-ab i:last-child{border-top-right-radius:5px;border-bottom-right-radius:5px}
.yh-an{--c:var(--hero-muted)}
.yh-al{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:9px;font-size:13.5px;line-height:1.25}
.yh-al li{display:grid;grid-template-columns:10px 92px 40px minmax(0,1fr);align-items:baseline;gap:10px;color:var(--hero-muted)}
.yh-al li>i{width:10px;height:10px;border-radius:50%;background:var(--c);align-self:start;margin-top:4px}
.yh-al li>b{color:var(--on-hero);font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.yh-al li>span>span{white-space:nowrap}
.yh-al li>em{font-style:normal;color:var(--on-hero);font-variant-numeric:tabular-nums;text-align:right}
.yh-none{font-size:13.5px;color:var(--hero-muted)}
.yh-band{display:grid;grid-template-columns:repeat(var(--cols,4),minmax(0,1fr));border-top:1px solid var(--line-h)}
.yh-sec{min-width:0;padding:16px clamp(14px,2.2vw,30px) 26px;box-shadow:-1px 0 0 var(--line-h)}
.yh-sec:first-child{padding-left:var(--pad)}
.yh-sec:last-child{padding-right:var(--pad)}
.yh-h{display:flex;align-items:center;gap:8px;font-size:10.5px;font-weight:600;line-height:1.3;letter-spacing:.1em;text-transform:uppercase;color:var(--on-hero)}
.yh-i{flex:none;width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.yh-n{margin:16px 0 0!important;font:300 16px/1 var(--font-num);color:var(--hero-muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.yh-n b{font-weight:300;font-size:42px;letter-spacing:-.03em;color:var(--on-hero);margin-right:2px}
.yh-x{margin-left:12px;font-size:19px;color:var(--grey-h)}
.yh-dots{--d:18px;--dg:6px;display:flex;flex-wrap:wrap;align-items:flex-start;gap:14px 18px;margin-top:18px}
.yh-q{display:grid;grid-template-columns:repeat(2,var(--d));gap:var(--dg)}
.yh-c{width:var(--d);height:var(--d);border-radius:50%;background:conic-gradient(var(--on-hero) calc(var(--p,0) * 1%),var(--hero-dim) 0)}
.yh-c[data-s="none"]{background:transparent;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--on-hero) 14%,transparent)}
.yh-c[data-x]{background:conic-gradient(var(--grey-h) calc(var(--p,0) * 1%),transparent 0);box-shadow:inset 0 0 0 2px var(--grey-h)}
.yh-c[data-old]:not([data-s="done"]){box-shadow:inset 0 0 0 2px var(--tomato)}
.yh-foot{display:flex;flex-wrap:wrap;gap:6px 20px;padding:0 var(--pad) 18px;font-size:12.5px;color:var(--hero-muted)}
.yh-foot i{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:8px;vertical-align:middle;background:var(--on-hero)}
.yh-foot i[data-x]{background:transparent;box-shadow:inset 0 0 0 2px var(--grey-h)}
.yh-foot i[data-old]{background:transparent;box-shadow:inset 0 0 0 2px var(--tomato)}
@media (max-width:980px){ .yh-note{flex-direction:column;gap:6px} }
@media (max-width:700px){
  .yh-top{grid-template-columns:minmax(0,1fr)}
  .yh-sc{text-align:left}
  .yh-band{grid-template-columns:repeat(2,minmax(0,1fr))}
  .yh-sec:nth-child(odd){padding-left:var(--pad)}
  .yh-sec{box-shadow:-1px 0 0 var(--line-h),0 -1px 0 var(--line-h)}
  .yh-al li{grid-template-columns:10px 80px 36px minmax(0,1fr)}
}
.ikp-empty{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 24px;padding:22px 24px;border-radius:26px;border:1.5px dashed var(--line-strong);color:var(--fg-2);font-size:14.5px;line-height:1.45}
.ikp-empty p{max-width:62ch}
.ikp-g,.pl-g{user-select:none;-webkit-user-select:none}
.ikp-hr .ikp-c.sel{background:var(--blue,#4C8AEB);box-shadow:none}
.ikp-hr .ikp-c.sel.wait{background:transparent;box-shadow:inset 0 0 0 2px var(--blue,#4C8AEB)}
/* ======================= MONTH (PlanMonth) ======================= */
#monthView #monthTitle{text-transform:lowercase;font-weight:300}
#monthView .month-h{display:flex;flex-wrap:wrap;align-items:center;gap:12px 14px}
#monthView .month-h #monthStats{margin-left:0}
.km-segw{margin-left:auto}
.km-seg{display:inline-flex;gap:2px;padding:4px;border-radius:999px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line)}
.km-seg button{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 18px;border-radius:999px;font-size:14px;font-weight:600;color:var(--fg-2);white-space:nowrap}
.km-seg button[aria-selected="true"]{background:#0C0B10;color:#fff}
#kmHero{margin:6px 0 22px}
.km-hero{--hf:#F6F4EF;--hm:#A9A6B5;position:relative;isolation:isolate;overflow:hidden;display:grid;grid-template-columns:minmax(0,330px) minmax(0,1fr);gap:28px 44px;padding:32px 32px 26px;border-radius:34px;background:#0C0B10;color:var(--hf)}
.km-hero::before{content:"";position:absolute;z-index:-1;left:-120px;top:-180px;width:420px;height:420px;border-radius:50%;background:conic-gradient(from 20deg,#E18AD5,#F3B53F,#E8492C,#8775E6,#36AE9B,#E18AD5);filter:blur(70px);opacity:.42}
.km-hero::after{content:"";position:absolute;z-index:-1;right:-140px;top:-140px;width:420px;height:320px;border-radius:50%;background:#2A3E9A;filter:blur(80px);opacity:.45}
.km-hero .kicker{color:var(--hm)}
.km-hero p{margin:0}
.km-big{display:flex;align-items:flex-end;gap:14px;margin:6px 0 10px;font-family:var(--font-num);font-size:96px;font-weight:200;line-height:.85;letter-spacing:-.05em}
.km-big span{font-family:var(--font-ui,inherit);font-size:13.5px;font-weight:400;letter-spacing:0;line-height:1.5;color:var(--hm);padding-bottom:8px}
.km-vs{display:inline-block;padding:4px 12px;border-radius:999px;font-size:13px;font-weight:600}
.km-vs.up{background:rgba(54,174,155,.22);color:#7DE0C9}.km-vs.dn{background:rgba(232,73,44,.2);color:#FF9A84}
.km-kinds{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:9px}
.km-kinds li{display:flex;align-items:center;gap:10px;font-size:14px}
.km-kinds li i{width:9px;height:9px;border-radius:50%}
.km-kinds .g{background:#5FD07A}.km-kinds .a{background:#F3B53F}.km-kinds .r{background:#E8492C}
.km-kinds b{margin-left:auto;font-family:var(--font-num);font-size:20px;font-weight:400}
.km-foot{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:16px;padding-top:14px;border-top:1px solid rgba(255,255,255,.12)}
.km-foot b{display:block;margin-top:4px;font-family:var(--font-num);font-size:26px;font-weight:300}
.km-foot small{margin-left:5px;font-size:12px;color:var(--hm)}
.km-r{display:flex;flex-direction:column;justify-content:flex-end;min-width:0}
.km-bars{position:relative;display:flex;align-items:flex-end;gap:2px;margin-top:18px}
.km-avg{position:absolute;left:0;right:0;border-top:1.5px dotted rgba(255,255,255,.35);pointer-events:none}
.km-avg em{position:absolute;right:0;top:-18px;font-style:normal;font-size:11.5px;font-weight:600;color:var(--hf)}
.km-b{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;gap:6px;padding:0;color:inherit}
.km-b .v{height:14px;font-family:var(--font-num);font-size:11px;color:var(--hf)}
.km-b .c{height:var(--h);display:flex;align-items:flex-end;justify-content:center;width:100%}
.km-b .bar{width:min(14px,70%);border-radius:7px;background:#5E5A73}
.km-b.g .bar{background:#5FD07A}.km-b.a .bar{background:#F3B53F}.km-b.r .bar{background:#E8492C}
.km-b .dot{width:4px;height:4px;border-radius:50%;background:#3A3846}
.km-b .lk{color:#fff}.km-b .lk svg{width:11px;height:11px}
.km-b .d{font-size:11px;color:var(--hm)}
.km-b.now .bar{box-shadow:0 0 0 2px #0C0B10,0 0 0 3.5px #FF8A70}.km-b.now .d,.km-b.now .v{color:#FF8A70;font-weight:700}
.km-weeks{display:flex;gap:2px;margin-top:10px}
.km-ws{min-width:0;padding-top:8px;border-top:1px solid rgba(255,255,255,.18);font-size:12px;color:var(--hf);white-space:nowrap;overflow:hidden}
.km-ws b{font-size:10.5px;letter-spacing:.12em;color:var(--hm);margin-right:6px}
.km-ws.cur{border-top:2px solid var(--hf)}.km-ws.cur b{color:var(--hf)}
.km-none{font-size:13.5px;color:var(--hm);margin-top:14px!important}
/* planner hero */
.km-cap{margin-top:16px;padding-bottom:16px;border-bottom:1px solid rgba(255,255,255,.1)}
.km-ch{display:flex;justify-content:space-between;gap:10px}.km-ch em{font-style:normal;font-size:12.5px;color:var(--hm)}
.km-cn{display:flex;align-items:baseline;gap:12px;margin:6px 0 10px;font-family:var(--font-num);font-size:54px;font-weight:200;line-height:1;letter-spacing:-.04em}
.km-cn small{font-size:.5em}
.km-cn span{font-family:var(--font-ui,inherit);font-size:15px;font-weight:600;letter-spacing:0}
.km-cn.over{color:#FF7E8E}.km-cn.ok span{color:#7DE0C9}
.km-cb{display:block;height:10px;border-radius:5px;background:rgba(255,255,255,.1);overflow:hidden}
.km-cb i{display:block;height:100%;border-radius:5px;background:#36AE9B}.km-cb.over i{background:#E0466A}
.km-cf{display:flex;justify-content:space-between;margin-top:8px;font-size:12.5px;font-weight:600;color:var(--hm)}
.km-how{margin-top:16px;padding:14px 16px;border-radius:18px;background:rgba(255,255,255,.07)}
.km-how p{margin-top:6px!important;font-size:13px;line-height:1.5;color:var(--hf)}
.km-dt{margin-top:14px}
.km-dr{display:grid;grid-template-columns:minmax(0,1fr) 70px 60px 110px;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.1)}
.km-dr.hd{padding:0 0 8px;font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--hm)}
.km-dr .t{display:grid;grid-template-columns:16px minmax(0,1fr);column-gap:8px;min-width:0}
.km-dr .t svg{width:12px;height:12px;margin-top:3px}
.km-dr .t b{font-size:14.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.km-dr .t em{grid-column:2;font-style:normal;font-size:12.5px;color:var(--hm)}
.km-dr .due,.km-dr .nd{font-size:13.5px;font-weight:600}
.km-dr .st{justify-self:end;padding:4px 12px;border-radius:999px;font-size:12.5px;font-weight:700;color:#0C0B10;background:#F3B53F;white-space:nowrap}
.km-dr .st.ok,.km-dr .st.met{background:#36AE9B}.km-dr .st.risk,.km-dr .st.late{background:#E0466A;color:#fff}
/* the calendar */
:is(#cal,.ovc).ikm{grid-template-columns:110px repeat(7,minmax(0,1fr));gap:10px 12px;align-items:stretch}
:is(#cal,.ovc).ikm .km-h{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-3);text-align:center;padding-bottom:2px}
:is(#cal,.ovc).ikm .km-h:first-child{text-align:left}
.km-wk{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:6px;padding-right:10px;box-shadow:inset -2px 0 0 var(--line)}
.km-wk.cur{box-shadow:inset -2px 0 0 var(--accent)}
.km-wk em{font-style:normal;font-size:11.5px;font-weight:600;color:var(--fg-3)}
.km-wk .kicker{font-size:10.5px}
.km-wc{padding:2px 9px;border-radius:999px;box-shadow:inset 0 0 0 1.5px var(--fg);font-size:12px;font-weight:700}
.km-wk.cur .km-wc{background:var(--fg);color:var(--bg)}
.km-ws2{display:flex;align-items:center;gap:8px}.km-ws2 b{font-family:var(--font-num);font-size:20px;font-weight:400}.km-ws2 small{font-size:10px;color:var(--fg-3)}
.km-wk>b{font-family:var(--font-num);font-size:22px;font-weight:400}
.km-wk .r{color:#D94468}.km-wk .g{color:#2A9C86}
:is(#cal,.ovc).ikm .day.km-d{min-height:114px;padding:12px;border-radius:20px;gap:8px;justify-content:flex-start;background:var(--surface);border:1px solid var(--line)}
:is(#cal,.ovc).ikm.plan .day.km-d{min-height:166px}
:is(#cal,.ovc).ikm .day.km-d.out{background:transparent;border-color:color-mix(in srgb,var(--line) 70%,transparent);opacity:.55}
:is(#cal,.ovc).ikm .day.km-d.today{border:1.5px solid var(--accent);box-shadow:0 0 0 1px var(--accent)}
.km-n{display:flex;justify-content:space-between;width:100%;font-size:13.5px;font-weight:700}
.km-n em{font-style:normal;font-size:11.5px;font-weight:600;color:var(--fg-3)}
.day.today .km-n{color:var(--accent)}
.km-ix{display:flex;align-items:center;gap:10px}
.km-ix b{display:block;font-size:13.5px;font-weight:700}
.km-ix em{font-style:normal;font-size:12px;color:var(--fg-3)}
.km-plan{display:grid;place-items:center;width:50px;height:50px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--line-strong);font-size:11px;font-weight:600;color:var(--fg-3)}
.km-rest{font-size:12.5px;color:var(--fg-3)}
.km-w .mk{display:flex;align-items:center;gap:6px;max-width:100%;font-size:11.5px}
.km-w .mk b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.km-w .mk svg{width:11px;height:11px;flex:none}
.km-w .mk.fx svg{color:var(--fg)}.km-w .mk.fl svg{color:#E55AA8}
.km-pills{display:flex;flex-direction:column;gap:5px;width:100%;min-width:0}
.pp{display:flex;align-items:center;gap:6px;min-width:0;max-width:100%;height:24px;padding:0 9px;border-radius:7px;font-size:12px;background:color-mix(in srgb,var(--c,#CEC7EA) 30%,var(--surface));color:var(--fg);box-sizing:border-box}
.pp b{font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pp svg{flex:none;width:10px;height:10px}
.pp.crit{background:var(--c,#CEC7EA);color:var(--ci,#0C0B10)}
.pp.done b{text-decoration:line-through;opacity:.7}
.pp.fx{background:#0C0B10;color:#fff}.pp.fx b{font-weight:700}
.pp.fl{background:var(--surface);box-shadow:inset 0 0 0 1.5px var(--fg)}.pp.fl b{font-weight:700}
.km-more{font-size:11.5px;font-weight:600;color:var(--fg-3)}
.km-ft{display:flex;justify-content:space-between;width:100%;margin-top:auto;font-size:11.5px;font-weight:700;color:var(--fg-2)}
.km-ft .over{color:#D94468}.km-ft em{font-style:normal;color:var(--fg-3)}
.km-lb{display:block;width:100%;height:5px;border-radius:3px;background:color-mix(in srgb,var(--fg) 8%,transparent);overflow:hidden}
.km-lb i{display:block;height:100%;border-radius:3px;background:#36AE9B}
.km-lb.past i{background:#CEC7EA}.km-lb.a i{background:#F3B53F}.km-lb.r i{background:#D94468}
#monthView .cal-foot{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;margin-top:16px}
#monthView .cal-foot .pp{width:auto;height:26px}
#monthView .cal-foot i.lb{display:inline-block;width:26px;height:5px;border-radius:3px;margin-right:6px;vertical-align:middle}
.lb.g{background:#36AE9B}.lb.a{background:#F3B53F}.lb.r{background:#D94468}
.km-ring{display:inline-block;width:14px;height:14px;border-radius:50%;margin-right:6px;vertical-align:middle;background:conic-gradient(#E8492C,#F3B53F,#5FD07A,#8775E6,#E8492C)}
#monthView .cal-foot svg{width:11px;height:11px;vertical-align:-1px}
@media (max-width:1100px){ .km-hero{grid-template-columns:1fr} }
@media (max-width:760px){
  :is(#cal,.ovc).ikm{grid-template-columns:repeat(7,minmax(0,1fr));gap:5px}
  :is(#cal,.ovc).ikm .km-h:first-child,.km-wk{display:none}
  :is(#cal,.ovc).ikm .day.km-d{min-height:64px;padding:6px;border-radius:12px}
  :is(#cal,.ovc).ikm.plan .day.km-d{min-height:72px}
  .km-ix>div,.km-pills,.km-w .mk,.km-ft,.km-lb,.km-n em,.km-rest{display:none}
  .km-ix .donut,.km-ix svg{max-width:34px;max-height:34px}
  .km-plan{width:30px;height:30px;font-size:9px}
  .km-segw{margin-left:0}
  .km-big{font-size:72px}
  .km-dr{grid-template-columns:minmax(0,1fr) 54px 84px}.km-dr .nd{display:none}
}
/* ======================= DAY (PlanDay) ======================= */
.ikd-fix .list-h h3{text-transform:uppercase;letter-spacing:.14em;font-size:11px}
.ikd-fx{display:flex;align-items:center;gap:14px;width:100%;padding:14px 16px;border-radius:20px;background:#0C0B10;color:#fff;text-align:left;margin-bottom:8px}
.ikd-fx .lk{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,.12);flex:none}
.ikd-fx .lk svg{width:12px;height:12px}
.ikd-fx .tx{flex:1;min-width:0}.ikd-fx b{display:block;font-size:15px}.ikd-fx em{font-style:normal;font-size:12.5px;color:#A9A6B5}
.ikd-fx .tm{font-family:var(--font-num);font-size:14px;font-weight:600;white-space:nowrap}
.ikd-pull{display:flex;align-items:center;gap:8px;width:100%;margin-top:10px;padding:12px 16px;border-radius:16px;border:1.5px solid var(--line-strong);background:var(--surface);font-size:13.5px;font-weight:600;color:var(--fg-2);text-align:left}
.ikd-pull:hover{border-color:var(--fg);color:var(--fg)}
.ikd-list{display:flex;flex-direction:column;gap:6px;max-height:52vh;overflow:auto;margin:6px 0 4px}
.ikd-row{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:14px;background:var(--surface-2);box-shadow:inset 3px 0 0 var(--c);text-align:left}
.ikd-row .ck{width:18px;height:18px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--line-strong);flex:none}
.ikd-row[aria-pressed="true"]{background:color-mix(in srgb,var(--c) 18%,var(--surface))}
.ikd-row[aria-pressed="true"] .ck{background:var(--fg);box-shadow:none}
.ikd-row .tt{flex:1;min-width:0;font-size:14px;font-weight:500}
.ikd-row em{font-style:normal;font-size:11.5px;font-weight:700;padding:2px 8px;border-radius:999px;box-shadow:inset 0 0 0 1.2px var(--fg-3);color:var(--fg-2)}
.ikd-row em.cr{background:#0C0B10;color:#fff;box-shadow:none}
.km-b .c{flex-direction:column;align-items:center;gap:5px}
.km-b .v{height:auto}
#monthView #monthStats .metric.mg-t:not(.has){display:none}
:is(#cal,.ovc).ikm .km-w .km-n{padding-right:22px}
.pp{line-height:1}
.pp svg{display:block;align-self:center;margin:0}
.km-hero.plan .km-r{justify-content:flex-start}
.km-cn{gap:0}.km-cn span{margin-left:14px}
.km-cn small{margin-left:2px}
@media (max-width:760px){
  .km-hero{padding:24px 20px 20px;border-radius:28px}
  .km-b .v{display:none}
  .km-b.ev .d{visibility:hidden}
  .km-b .d{font-size:9.5px}
  .km-ws{font-size:10px}.km-ws b{margin-right:3px}
  :is(#cal,.ovc).ikm .km-ix{zoom:.62}
  :is(#cal,.ovc).ikm .km-n{padding-right:14px;font-size:12px}
  :is(#cal,.ovc).ikm .dayw .dh{transform:scale(.8);transform-origin:top right}
}
/* the planner's blocks: only their sign (code or lock); the balloon tells the rest */
.ikp-sg{justify-content:flex-start;padding:0 5px}
.ikp-sg.linked{background:color-mix(in srgb,var(--c) 26%,var(--surface));box-shadow:inset 3px 0 0 var(--c)}
.ikp-sg.linked.crit{background:color-mix(in srgb,var(--c) 55%,var(--surface))}
.ikp-sg.done.linked{background:var(--done);box-shadow:inset 3px 0 0 var(--c)}
.ikp-sg.ongoing.linked{background:var(--ongoing);box-shadow:inset 3px 0 0 var(--c)}
.ikp-sg b{font-family:var(--font-num);font-size:11px;font-weight:700;letter-spacing:.02em}
.ikp-sg.fixed{justify-content:center}
.ikp-sg.first.fixed{justify-content:flex-start;padding-left:7px}
.ikp-sg:hover,.ikp-sg:focus-visible{filter:brightness(.95);outline:2px solid var(--fg);outline-offset:1px}
.ikp-tip{position:fixed;z-index:60;left:0;top:0;max-width:280px;min-width:180px;padding:12px 14px;border-radius:14px;background:#0C0B10;color:#F6F4EF;box-shadow:0 14px 34px -14px rgba(12,11,16,.55);pointer-events:none;opacity:0;transform:translateY(4px);transition:opacity .12s,transform .12s}
.ikp-tip.on{opacity:1;transform:none}
.ikp-tip::after{content:"";position:absolute;left:calc(var(--ax,50%) - 6px);bottom:-6px;width:12px;height:12px;background:#0C0B10;transform:rotate(45deg);border-radius:2px}
.ikp-tip.below::after{bottom:auto;top:-6px}
.ikp-tip .th{display:flex;align-items:flex-start;gap:8px}
.ikp-tip .cd{flex:none;padding:2px 7px;border-radius:999px;background:var(--c,#F6F4EF);color:#0C0B10;font-family:var(--font-num);font-size:11px;font-weight:700}
.ikp-tip .lk{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:rgba(255,255,255,.14);flex:none}
.ikp-tip .lk svg{width:11px;height:11px}
.ikp-tip .tt{font-size:13.5px;font-weight:600;line-height:1.3}
.ikp-tip .tm{display:flex;justify-content:space-between;gap:12px;margin-top:8px;font-family:var(--font-num);font-size:12.5px;font-weight:600}
.ikp-tip .tm span{font-family:var(--font-ui,inherit);font-weight:500;color:#A9A6B5}
.ikp-tip .tw{margin-top:6px;font-size:12px;color:#A9A6B5}
.ikp-tip .tw em{font-style:normal;margin-right:6px;padding:1px 6px;border-radius:999px;box-shadow:inset 0 0 0 1px #A9A6B5;color:#F6F4EF;font-size:11px;font-weight:700}
.ikp-kind{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;margin:-4px 0 14px;border-radius:999px;background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--line)}
.ikp-kind button{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:38px;border-radius:999px;font-size:13.5px;font-weight:600;color:var(--fg-2)}
.ikp-kind button svg{width:13px;height:13px}
.ikp-kind button[aria-selected="true"]{background:var(--fg);color:var(--bg)}
/* the week, folded: one bar; the master button discloses the data */
.yh-fold{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:18px 34px;padding:22px var(--pad)}
.yh-fold::before{left:-160px;top:-230px;opacity:.5}
.yh-fold .yh-eb{margin-bottom:4px!important}
.yh-fold .yh-wk{font-size:clamp(2.2rem,5vw,2.9rem)}
.yh-fold .yh-dt{font-size:16px;margin-top:4px!important}
.yh-fj{display:flex;flex-wrap:wrap;gap:8px}
.yh-mj{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 14px;border-radius:14px;background:rgba(255,255,255,.07);font-family:var(--font-num);font-size:14px;color:var(--hero-muted)}
.yh-mj b{font-size:20px;font-weight:400;color:var(--on-hero)}
.yh-mj .yh-i{width:16px;height:16px;color:var(--on-hero)}
.yh-fs{text-align:right}
.yh-fold .yh-score{font-size:clamp(2.8rem,5vw,3.6rem)}
.yh-fold .yh-cap{margin-top:4px!important;white-space:nowrap}
.yh-more{display:flex;align-items:center;gap:12px;padding:10px 12px 10px 14px;border-radius:18px;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),0 0 0 1px transparent;color:var(--on-hero);text-align:left;transition:background .15s}
.yh-more:hover{background:rgba(255,255,255,.11)}
.yh-mi{display:flex;align-items:flex-end;gap:3px;height:22px;padding:0 2px}
.yh-mi i{width:5px;border-radius:3px;background:linear-gradient(to top,var(--violet),var(--pink))}
.yh-mi i:nth-child(1){height:10px}.yh-mi i:nth-child(2){height:20px;background:linear-gradient(to top,var(--violet),var(--pink),var(--tomato))}.yh-mi i:nth-child(3){height:14px}
.yh-mt b{display:block;font-size:14px;font-weight:600}
.yh-mt small{display:block;font-size:12px;color:var(--hero-muted)}
.yh-mc{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.1)}
.yh-mc svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s}
.yh-more[aria-expanded="true"] .yh-mc svg{transform:rotate(180deg)}
.yh-fb{display:flex;justify-content:flex-end;padding:0 var(--pad) 22px}
@media (max-width:1100px){ .yh-fold{grid-template-columns:auto minmax(0,1fr) auto} .yh-fold .yh-more{grid-column:1 / -1;order:9} }
@media (max-width:700px){ .yh-fold{grid-template-columns:minmax(0,1fr) auto;gap:14px} .yh-fj{grid-column:1 / -1;order:5;display:grid;grid-template-columns:repeat(4,minmax(0,1fr))} .yh-mj{justify-content:center;padding:0 8px} .yh-fold .yh-cap{white-space:normal} }
/* the quarter's dots and their caption: room between them */
#planView .ikp-hero .foot{margin-top:16px}
#planView .ikp-hero .h-b .foot{margin-top:18px;line-height:1.45}
/* month, folded: one dark bar; the master button discloses the rest */
.km-fold{--violet:#8775E6;--pink:#E18AD5;--tomato:#E8492C;--hero-muted:#A9A6B5;--on-hero:#F6F4EF;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:18px 34px;padding:22px 30px}
.km-fold.plan{grid-template-columns:minmax(0,1fr) auto}
.km-fb{display:flex;align-items:flex-end;gap:12px;margin-top:4px;font-family:var(--font-num);font-size:58px;font-weight:200;line-height:.85;letter-spacing:-.045em}
.km-fb span{font-family:var(--font-ui,inherit);font-size:12.5px;font-weight:400;letter-spacing:0;line-height:1.4;color:var(--hm);padding-bottom:4px}
.km-fm{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px}
.km-fks{display:flex;flex-wrap:wrap;gap:8px}
.km-fk{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 14px;border-radius:14px;background:rgba(255,255,255,.07);font-size:13px;color:var(--hm)}
.km-fk i{width:8px;height:8px;border-radius:50%}.km-fk i.g{background:#5FD07A}.km-fk i.a{background:#F3B53F}.km-fk i.r{background:#E8492C}
.km-fk b{font-family:var(--font-num);font-size:19px;font-weight:400;color:var(--hf)}
.km-fk em{font-style:normal}.km-fk small{margin-left:3px;font-size:11px;color:var(--hm)}
.km-fcs{display:flex;flex-wrap:wrap;gap:12px 40px}
.km-fc{display:grid;gap:2px}
.km-fc b{font-family:var(--font-num);font-size:40px;font-weight:200;line-height:1;letter-spacing:-.03em}
.km-fc b small{font-size:.5em}
.km-fc b.over{color:#FF7E8E}
.km-fc em{font-style:normal;font-size:12.5px;font-weight:600;color:var(--hm)}
.km-fc em.ok{color:#7DE0C9}.km-fc em.over{color:#FF7E8E}
.km-ub{display:flex;justify-content:flex-end;margin-top:10px}
.km-ub .yh-more{background:#0C0B10;color:#F6F4EF;--violet:#8775E6;--pink:#E18AD5;--tomato:#E8492C;--hero-muted:#A9A6B5}
@media (max-width:1100px){ .km-fold{grid-template-columns:auto minmax(0,1fr)} .km-fold .yh-more{grid-column:1 / -1} .km-fold.plan{grid-template-columns:1fr} }
@media (max-width:700px){ .km-fold{grid-template-columns:1fr;padding:22px 20px} .km-fb{font-size:50px} }
.ikd-st{position:relative;margin-bottom:8px}
.ikd-at{position:absolute;z-index:2;right:16px;top:-9px;padding:2px 9px;border-radius:999px;background:#0C0B10;color:#fff;font-family:var(--font-num);font-size:11.5px;font-weight:600}
.ikd-fix .list-h .tot{font-size:12px;color:var(--fg-3)}
/* goal cards: tall, as in Yokan, and they tilt a little under the pointer */
.ikp-goals{grid-template-columns:repeat(auto-fill,minmax(196px,218px));gap:12px;justify-content:start}
.ikp-goal{min-height:262px;padding:16px 18px 18px;border-radius:26px;gap:10px;transition:transform .22s cubic-bezier(.3,1.4,.5,1),box-shadow .2s;will-change:transform}
.ikp-goal .gt{gap:8px}
.ikp-goal .gcode{font-family:var(--font-num);font-size:13px;font-weight:600;line-height:1.3;padding:3px 11px;border-radius:999px;box-shadow:inset 0 0 0 1.5px currentColor;letter-spacing:0}
.ikp-goal .sn{flex:1;font-size:12.5px;font-weight:600;letter-spacing:0;text-transform:none;opacity:1}
.ikp-goal .due{font-size:13px;font-weight:500;text-transform:lowercase;opacity:1}
.ikp-goal .due.late{padding:3px 10px;border-radius:999px;background:var(--ci);color:var(--c)}
.ikp-goal .gp{display:block;margin-top:auto;font-family:var(--font-num);font-weight:200;font-size:clamp(3.4rem,6.6vw,4.5rem);line-height:.86;letter-spacing:-.045em}
.ikp-goal .gp small{font-size:.38em;font-weight:300;letter-spacing:0;margin-left:.06em}
.ikp-goal .gb{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px}
.ikp-goal .gb i{position:relative;height:8px;border-radius:999px;background:color-mix(in srgb,var(--ci) 26%,transparent);overflow:hidden}
.ikp-goal .gb b{position:absolute;left:0;top:0;bottom:0;border-radius:999px;background:var(--ci)}
.ikp-goal .gn{font-family:var(--font-ui,inherit);font-size:18px;font-weight:500;line-height:1.2;letter-spacing:-.012em;overflow-wrap:anywhere}
.ikp-goal .gf{margin-top:0;font-size:13px;opacity:.72;text-transform:lowercase}
.ikp-goal.done .gn{text-decoration:line-through;text-decoration-thickness:1.5px}
.ikp-goal.sel{outline:2.5px solid var(--ci);outline-offset:-7px}
.ikp-goal.add{min-height:262px}
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .ikp-goals>.ikp-goal:hover{transform:translateY(-5px) rotate(-1deg)}
  .ikp-goals>.ikp-goal:nth-child(even):hover{transform:translateY(-5px) rotate(1deg)}
  .ikp-goals>.ikp-goal:active{transform:translateY(-2px) rotate(0) scale(.98)}
}
@media (max-width:760px){
  .ikp-goals{grid-template-columns:minmax(0,1fr)}
  .ikp-goal{min-height:0;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"top n" "t n" "pb pb" "m m";gap:8px 14px}
  .ikp-goal .gt{grid-area:top}.ikp-goal .gp{grid-area:n;margin-top:0;font-size:3rem}.ikp-goal .gn{grid-area:t}.ikp-goal .gb{grid-area:pb}.ikp-goal .gf{grid-area:m}
  .ikp-goal.add{min-height:110px}
}
/* a block of 30 minutes or more also says its keyword */
.ikp-sg .kw{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--font-ui,inherit);font-size:11px;font-weight:600;opacity:.85}
.ikp-sg b+.kw{margin-left:2px}
.ikp-sg.fixed .kw{opacity:1}
.ikp-tip .tw svg{width:11px;height:11px;vertical-align:-1px;margin-right:3px}
/* repeating tasks */
.ikp-tl{display:inline-flex;flex-wrap:wrap;align-items:center;gap:6px}
.ikp-rep{display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 9px;border-radius:999px;font-size:11.5px;font-weight:600;color:var(--fg-2);box-shadow:inset 0 0 0 1.2px var(--line-strong);white-space:nowrap}
.ikp-crit .ikp-rep{color:inherit;box-shadow:inset 0 0 0 1.2px currentColor;opacity:.85}
.ikp-repline{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin:4px 0 10px;padding:10px 12px;border-radius:14px;background:var(--surface-2);font-size:13px;color:var(--fg-2)}
.ikp-repline span{flex:1;min-width:180px}

/* ===== the dial: Yokan's own, in look, size and motion ===== */
.ykd,.ykw{--q1:#E8492C;--q2:#F3B53F;--q3:#B4D455;--q4:#36AE9B;--d-chip:#0C0B10;--d-on:#FFFFFF;--d-card:#0C0B10}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .ykd,:root:not([data-theme="light"]) .ykw{--d-chip:#2E2E38}}
:root[data-theme="dark"] .ykd,:root[data-theme="dark"] .ykw{--d-chip:#2E2E38}
.ykw{position:relative;display:inline-flex;flex-direction:column;align-items:center;gap:4px;justify-self:end;align-self:center}
.ykw .pct{width:auto;text-align:center;font-family:var(--font-num);font-weight:600;font-size:14px;font-variant-numeric:tabular-nums;color:inherit}
.ikp-task .ykw .pct{color:var(--fg)}
.ykd{position:relative;display:inline-block;width:var(--dial,48px);height:var(--dial,48px);flex:none;border-radius:50%;-webkit-user-select:none;user-select:none;transition:transform .18s ease}
.ykd[data-dial]{cursor:pointer;touch-action:none}
.ikp-tasks{--dial:58px}
.ikp-crits{--dial:66px}
.ykd[data-q="1"]{--q:var(--q1)}
.ykd[data-q="2"]{--q:var(--q2)}
.ykd[data-q="3"]{--q:var(--q3)}
.ykd[data-q="4"]{--q:var(--q4)}
.ykd svg{display:block;width:100%;height:100%;overflow:visible;pointer-events:none}
.ykd .dt{fill:var(--d-chip)}
.ykd .da{fill:none;stroke:var(--q,var(--d-on));stroke-width:15;transform:rotate(-90deg);transform-origin:18px 18px;transition:stroke-dasharray .26s ease-out}
.ykd .dg{fill:none;stroke:var(--d-on);stroke-width:1.3;stroke-linecap:round;opacity:.4}
.ykd .dh{stroke:var(--d-on);stroke-width:2;stroke-linecap:round;transform-origin:18px 18px;transition:transform .32s cubic-bezier(.3,1.6,.5,1)}
.ykd .dc{fill:var(--d-on);transform-origin:18px 18px}
.ykd .dk{fill:none;stroke:var(--d-card);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;opacity:0;transform-origin:18px 18px}
.ykd[data-l="4"] .dh,.ykd[data-l="4"] .dc,.ykd[data-l="4"] .dg{opacity:0}
.ykd[data-l="4"] .dk{opacity:1}
.ykd .burst{position:absolute;left:50%;top:50%;width:0;height:0;pointer-events:none}
.ykd .burst>u{position:absolute;left:-4px;top:-4px;width:8px;height:8px;border-radius:50%;background:#E18AD5;opacity:0}
.ykd .burst>u:nth-child(4n+1){background:#F3B53F}
.ykd .burst>u:nth-child(4n+2){background:#36AE9B}
.ykd .burst>u:nth-child(4n+3){background:#8775E6}
.ykd:focus-visible{outline:2px solid var(--fg);outline-offset:3px}
@keyframes ykdArc{from{stroke-dasharray:var(--f) 100}to{stroke-dasharray:var(--t) 100}}
@keyframes ykdHand{from{transform:rotate(var(--af))}to{transform:rotate(var(--at))}}
@keyframes ykdHandOut{0%{transform:rotate(var(--af));opacity:1}75%{transform:rotate(var(--at));opacity:1}100%{transform:rotate(var(--at));opacity:0}}
@keyframes ykdCheck{0%{opacity:0;transform:scale(.2)}60%{opacity:1;transform:scale(1.3)}100%{opacity:1;transform:scale(1)}}
@keyframes ykdPop{0%{transform:scale(1)}40%{transform:scale(1.12)}100%{transform:scale(1)}}
@keyframes ykdPct{0%{transform:none}35%{transform:translateY(-3px) scale(1.22)}100%{transform:none}}
@keyframes ykdBurst{0%{transform:rotate(var(--a)) translateX(calc(var(--dial,48px)*.4)) scale(1);opacity:1}100%{transform:rotate(var(--a)) translateX(calc(var(--dial,48px)*1.05)) scale(.3);opacity:0}}
@media (prefers-reduced-motion:no-preference){
  .ykw[data-anim] .ykd{animation:ykdPop .5s ease-out}
  .ykw[data-anim] .da{animation:ykdArc .5s cubic-bezier(.3,.9,.3,1) both}
  .ykw[data-anim] .dh{animation:ykdHand .62s cubic-bezier(.3,1.7,.5,1) both}
  .ykw[data-anim] .ykd[data-l="4"] .dh,.ykw[data-anim] .ykd[data-l="4"] .dc{animation:ykdHandOut .5s ease-out both}
  .ykw[data-anim] .ykd[data-l="4"] .dk{animation:ykdCheck .45s .32s both}
  .ykw[data-anim] .pct{animation:ykdPct .45s ease-out}
  .ykw[data-anim] .burst>u{animation:ykdBurst .8s cubic-bezier(.1,.7,.3,1) .3s both}
  .ykd[data-dial]:hover{transform:scale(1.06)}
}
@media (max-width:860px){ .ikp-tasks{--dial:66px} }

/* the top area: a small tag by its name */
.ikp-topc{display:inline-flex;align-items:center;height:24px;padding:0 10px;border-radius:999px;background:#0C0B10;color:#fff;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;vertical-align:middle}
.ikp-areas .ar .ikp-topc{height:18px;padding:0 7px;font-size:9.5px;margin-left:4px}
:root[data-theme="dark"] .ikp-topc{background:#F6F4EF;color:#0C0B10}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .ikp-topc{background:#F6F4EF;color:#0C0B10}}

/* goal cards, Yokan's proportions: one column per place of the area (5 in the top area, 3 in the others), tall cards */
.ikp-goals[data-n="5"]{grid-template-columns:repeat(5,minmax(0,1fr))}
.ikp-goals[data-n="4"]{grid-template-columns:repeat(4,minmax(0,1fr))}
.ikp-goals[data-n="3"]{grid-template-columns:repeat(3,minmax(0,1fr))}
.ikp-goals[data-n="2"]{grid-template-columns:repeat(2,minmax(0,1fr))}
.ikp-goals[data-n] .ikp-goal{min-height:320px;padding:16px 18px 18px}
.ikp-goals[data-n] .ikp-goal.add{min-height:320px}
@media (max-width:1100px){ .ikp-goals[data-n="5"],.ikp-goals[data-n="4"]{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:760px){ .ikp-goals[data-n]{grid-template-columns:minmax(0,1fr)} .ikp-goals[data-n] .ikp-goal{min-height:0} .ikp-goals[data-n] .ikp-goal.add{min-height:110px} }

/* ===== the goal opened: Yokan's detail, milestone by milestone ===== */
.gx-det{--q1:#E8492C;--q2:#F3B53F;--q3:#B4D455;--q4:#36AE9B;--gx-ink:var(--fg);--gx-soft:var(--surface-2,#F2EFFF);--gx-line:var(--line,#E1DCF3);--gx-muted:var(--fg-3);
  display:flex;flex-direction:column;gap:16px;margin-top:14px;padding:clamp(16px,3vw,26px);border-radius:26px;background:var(--surface);box-shadow:0 14px 34px -22px rgba(64,44,150,.5)}
.gx-det ol,.gx-det ul{list-style:none;margin:0;padding:0}
.gx-top{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center}
.gx-code{font-family:var(--font-num);font-size:13px;font-weight:600;line-height:1.3;padding:3px 11px;border-radius:999px;background:var(--c);color:var(--ci);white-space:nowrap}
.gx-title{flex:1 1 12rem;min-width:0;margin:0;font-family:var(--font-num);font-weight:400;font-size:clamp(20px,4.6vw,26px);line-height:1.15;letter-spacing:-.02em;overflow-wrap:anywhere}
.gx-lbl{display:block;font-size:12.5px;font-weight:600;text-transform:lowercase;color:var(--gx-muted)}
.gx-dw{margin:0;max-width:70ch;font-size:15px;line-height:1.45}
.gx-dw .gx-lbl{margin-bottom:2px}
.gx-pill{font:inherit;font-size:13px;font-weight:500;line-height:1.3;text-transform:lowercase;border:1.5px solid var(--gx-line);border-radius:999px;background:transparent;color:var(--gx-ink);padding:4px 12px;cursor:pointer;white-space:nowrap;transition:background .15s,color .15s,border-color .15s}
.gx-pill:hover{border-color:var(--gx-ink)}
.gx-pill[aria-pressed="true"]{background:var(--gx-ink);border-color:var(--gx-ink);color:var(--surface)}
.gx-pill.del{color:var(--gx-muted)}
.gx-pill.del:hover{border-color:var(--bad,#C2321B);color:var(--bad,#C2321B)}
.gx-pill.del[data-confirm]{border-color:var(--bad,#C2321B);background:var(--bad,#C2321B);color:#fff}
.gx-pill.ic{display:inline-grid;place-items:center;padding-inline:9px}
.gx-x{display:inline-grid;place-items:center;width:32px;height:32px;padding:0;border-radius:50%}
.gx-x svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.gx-link{all:unset;cursor:pointer;font-weight:600;font-size:13.5px;line-height:1.3;text-transform:lowercase;padding:5px 12px;border-radius:999px;box-shadow:inset 0 0 0 1.5px var(--gx-ink);color:var(--gx-ink)}
.gx-link:hover{background:var(--gx-ink);color:var(--surface)}
.gx-link:focus-visible{outline:2px solid var(--gx-ink);outline-offset:2px}
.gx-empty{margin:0;color:var(--gx-muted);font-size:14.5px;padding:18px 20px;border:1.5px dashed var(--gx-line);border-radius:26px}
.gx-hint{margin:0;color:var(--warn,#8A5A00);font-size:13.5px}
.gx-err{grid-column:1/-1;margin:0;color:var(--bad,#C2321B);font-size:13px}
.gx-err:empty{display:none}
.gx-mss{display:flex;flex-direction:column;gap:10px}
.gx-ms{display:flex;flex-direction:column;gap:8px;padding:14px 16px 12px;border-radius:16px;background:var(--gx-soft)}
.gx-mh{display:grid;grid-template-columns:minmax(0,1fr) auto 10rem auto;gap:8px 16px;align-items:center}
.gx-mn{display:inline-block;font-family:var(--font-num);font-size:12px;font-weight:700;line-height:1.3;padding:2px 8px;margin-right:9px;border-radius:999px;background:var(--gx-ink);color:var(--surface)}
.gx-mtt{font-weight:600;font-size:15.5px;overflow-wrap:anywhere}
.gx-ms[data-done="true"] .gx-mtt{color:var(--gx-muted);text-decoration:line-through;text-decoration-thickness:1px}
.gx-ctl{display:flex;align-items:center;gap:6px;font-size:14px;font-variant-numeric:tabular-nums;white-space:nowrap}
.gx-done{all:unset;display:flex;align-items:center;gap:7px;cursor:pointer;font-weight:500;font-size:14px;text-transform:lowercase;color:var(--gx-ink)}
.gx-done i,.gx-ck{display:inline-grid;place-content:center;box-sizing:border-box;width:22px;height:22px;flex:none;border:1.5px solid var(--gx-ink);border-radius:50%;background:transparent;cursor:pointer;padding:0;transition:background .15s}
.gx-done i::after,.gx-ck::after{content:"";width:10px;height:6px;border-left:2.2px solid var(--surface);border-bottom:2.2px solid var(--surface);transform:translateY(-1.5px) rotate(-45deg) scale(0);transition:transform .15s}
.gx-done.on i,.gx-ck.on{background:var(--gx-ink)}
.gx-done.on i::after,.gx-ck.on::after{transform:translateY(-1.5px) rotate(-45deg) scale(1)}
.gx-step{width:30px;height:30px;padding:0;border:1.5px solid var(--gx-line);border-radius:50%;background:transparent;cursor:pointer;line-height:1;font-size:16px;color:var(--gx-ink)}
.gx-step:hover{border-color:var(--gx-ink)}
.gx-num{width:4.4rem;text-align:right;border:1.5px solid var(--gx-line);border-radius:999px;background:var(--surface);color:var(--gx-ink);padding:4px 10px;font-size:14px;font-variant-numeric:tabular-nums}
.gx-prog{display:grid;grid-template-columns:minmax(0,1fr) 3rem;gap:8px;align-items:center}
.gx-pct{font-weight:600;font-size:14px;text-align:right;font-variant-numeric:tabular-nums}
.gx-pb{display:inline-grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;width:88px;min-width:0}
.gx-pb>i{position:relative;height:8px;border-radius:999px;background:var(--gx-line);overflow:hidden}
.gx-pb>i>b{position:absolute;left:0;top:0;bottom:0;border-radius:999px;background:var(--q,var(--gx-ink))}
.gx-pb[data-q="1"]{--q:var(--q1)} .gx-pb[data-q="2"]{--q:var(--q2)} .gx-pb[data-q="3"]{--q:var(--q3)} .gx-pb[data-q="4"]{--q:var(--q4)}
.gx-acts{display:flex;flex-wrap:wrap;gap:6px;align-items:center;justify-content:flex-end}
.gx-tasks{display:flex;flex-direction:column;--dial:46px}
.gx-t{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;gap:6px 16px;align-items:start;padding:11px 0;border-top:1px solid var(--gx-line)}
.gx-t>.gx-ck{margin-top:1px}
.gx-t .gx-acts{align-self:center}
.gx-t .ykw{flex-direction:row;gap:10px;align-self:center}
.gx-t .ykw .pct{width:2.9rem;text-align:right;color:var(--gx-ink)}
.gx-tb{min-width:0}
.gx-tt{display:block;font-size:15px;font-weight:500;line-height:1.35;overflow-wrap:anywhere}
.gx-t[data-done="true"] .gx-tt{color:var(--gx-muted);text-decoration:line-through;text-decoration-thickness:1px}
.gx-when{display:inline-flex;align-items:center;gap:5px;margin-top:3px;font-size:12px;color:var(--gx-muted)}
.gx-when svg{width:11px;height:11px}
.gx-note{margin:9px 0 0;padding:10px 14px;max-width:72ch;border-radius:16px;background:var(--surface);font-size:14px;line-height:1.45;white-space:pre-wrap;overflow-wrap:anywhere}
.gx-note>.gx-nl{display:block;margin-bottom:1px;font-size:12.5px;font-weight:600;text-transform:lowercase;color:var(--gx-muted)}
.gx-orph{margin:0 0 4px}
.gx-add{display:grid;gap:8px;align-items:start}
.gx-add.ms{grid-template-columns:minmax(0,2fr) auto 6rem auto auto}
.gx-add.tk{grid-template-columns:minmax(0,1fr) auto auto}
.gx-field{box-sizing:border-box;width:100%;min-width:0;border:1.5px solid var(--gx-line);border-radius:16px;background:var(--surface);color:var(--gx-ink);padding:9px 14px;font:inherit;font-size:15px}
.gx-field::placeholder{color:var(--gx-muted);opacity:1}
.gx-field:focus{outline:2px solid var(--gx-ink);outline-offset:-1px}
select.gx-field{cursor:pointer}
.gx-btn{font:inherit;font-weight:600;font-size:14px;line-height:1.4;text-transform:lowercase;border:0;border-radius:999px;background:var(--gx-ink);color:var(--surface);padding:10px 18px;cursor:pointer;white-space:nowrap;transition:transform .15s}
.gx-btn:hover{transform:translateY(-1px)}
.gx-btn.ghost{background:transparent;color:var(--gx-ink);box-shadow:inset 0 0 0 1.5px var(--gx-line)}
@media (max-width:860px){
  .gx-mh{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"t t" "c a" "p p"}
  .gx-mh .gx-mt{grid-area:t}.gx-mh .gx-ctl{grid-area:c}.gx-mh .gx-acts{grid-area:a}.gx-mh .gx-prog{grid-area:p}
  .gx-t{grid-template-columns:auto minmax(0,1fr) auto}
  .gx-t .gx-tb{grid-column:2;grid-row:1}
  .gx-t .gx-acts{grid-column:2;grid-row:2;justify-content:flex-start;align-self:start}
  .gx-t .ykw{grid-column:3;grid-row:1 / span 2;flex-direction:column;gap:4px}
  .gx-t .ykw .pct{width:auto;text-align:center}
  .gx-add.ms,.gx-add.tk{grid-template-columns:minmax(0,1fr)}
}

/* Quarter keeps Yokan's page width: a 1120 px column with room at the sides, so the cards keep their tall proportion */
.ikp-qwrap{width:100%;max-width:1120px;margin-inline:auto;display:flex;flex-direction:column;gap:18px}
/* areas of 3 or fewer places: wider cards, a little more compact, as in Yokan */
.ikp-goals[data-n="3"] .ikp-goal,.ikp-goals[data-n="2"] .ikp-goal,.ikp-goals[data-n="1"] .ikp-goal{min-height:262px}
.ikp-goals[data-n="3"] .ikp-goal.add,.ikp-goals[data-n="2"] .ikp-goal.add,.ikp-goals[data-n="1"] .ikp-goal.add{min-height:262px}
@media (max-width:760px){ .ikp-goals[data-n] .ikp-goal{min-height:0} .ikp-goals[data-n] .ikp-goal.add{min-height:110px} }
/* the planner holds the whole day, 24 hours */
.pl-g .pl-late{grid-column:1 / -1;margin:12px 0 2px;font-size:12px;font-weight:600;letter-spacing:.06em;color:var(--fg-3)}

/* ======================= v40 · the calendar feel: weeks, quick card, block card, drag, reminders ======================= */
/* walking the weeks */
.wk-nav{display:inline-flex;align-items:center;gap:4px;padding:4px;border-radius:999px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);align-self:center}
.wk-nav .wk-ar,.wk-strip .wk-ar{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;color:var(--fg);transition:background .15s,transform .15s}
.wk-nav .wk-ar:hover:not(:disabled),.wk-strip .wk-ar:hover:not(:disabled){background:var(--empty)}
.wk-nav .wk-ar:active:not(:disabled),.wk-strip .wk-ar:active:not(:disabled){transform:scale(.9)}
.wk-nav .wk-ar:disabled,.wk-strip .wk-ar:disabled{opacity:.3;cursor:default}
.wk-now{height:34px;padding:0 16px;border-radius:999px;font-size:13.5px;font-weight:600;color:var(--fg-2);transition:background .2s,color .2s}
.wk-now[aria-pressed="true"]{background:var(--fg);color:var(--bg)}
.wk-strip{display:flex;align-items:center;gap:8px;margin:18px 0 4px}
.wk-strip .wk-q{flex:none;font-family:var(--font-num);font-size:12px;font-weight:700;letter-spacing:.08em;color:var(--fg-3);padding:0 2px}
.wk-ws{flex:1;min-width:0;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(58px,1fr);gap:6px;overflow-x:auto;scrollbar-width:none;padding:4px 2px;scroll-snap-type:x proximity}
.wk-ws::-webkit-scrollbar{display:none}
.wk-w{position:relative;display:flex;flex-direction:column;align-items:center;gap:1px;padding:7px 4px 6px;border-radius:12px;background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--line);color:var(--fg);scroll-snap-align:center;
  transition:background .2s,color .2s,box-shadow .2s,transform .25s cubic-bezier(.3,1.5,.5,1)}
.wk-w b{font-family:var(--font-num);font-size:15px;font-weight:600;letter-spacing:-.02em;line-height:1.1}
.wk-w span{font-size:10.5px;color:var(--fg-3);white-space:nowrap}
.wk-w i{display:flex;gap:2px;height:4px;margin-top:3px}
.wk-w i u{width:4px;height:4px;border-radius:50%;background:var(--accent);opacity:.8}
.wk-w:hover:not(:disabled):not(.on){transform:translateY(-2px);box-shadow:inset 0 0 0 1.5px var(--line-strong)}
.wk-w.past:not(.on){opacity:.62}
.wk-w.now:not(.on)::after{content:"";position:absolute;top:5px;right:6px;width:6px;height:6px;border-radius:50%;background:var(--accent)}
.wk-w.on{background:var(--fg);color:var(--bg);box-shadow:none;transform:scale(1.04)}
.wk-w.on span{color:inherit;opacity:.7}
.wk-w.on i u{background:var(--bg)}
.wk-w:disabled{opacity:.25;cursor:default}
.pl-g.wk-in-r{animation:wkInR .38s cubic-bezier(.2,.9,.3,1)}
.pl-g.wk-in-l{animation:wkInL .38s cubic-bezier(.2,.9,.3,1)}
@keyframes wkInR{from{opacity:0;transform:translateX(28px)}to{opacity:1;transform:none}}
@keyframes wkInL{from{opacity:0;transform:translateX(-28px)}to{opacity:1;transform:none}}

/* booking blocks */
.ikp-hr .ikp-c{transition:background .16s,box-shadow .16s,transform .16s cubic-bezier(.3,1.6,.5,1)}
.ikp-hr:not(.past) .ikp-c:hover{background:var(--blue-soft);box-shadow:inset 0 0 0 1.5px var(--blue);transform:scale(1.08)}
.ikp-hr .ikp-c.sel{background:var(--blue);animation:selPop .22s cubic-bezier(.3,1.6,.5,1)}
@keyframes selPop{from{transform:scale(.7);opacity:.4}to{transform:none;opacity:1}}
.ikp-hr .ikp-c.sel.wait{animation:selWait 1.2s ease-in-out infinite}
@keyframes selWait{50%{box-shadow:inset 0 0 0 2px var(--blue),0 0 0 4px var(--blue-soft)}}
.cal-sl{position:fixed;z-index:65;pointer-events:none;padding:5px 10px;border-radius:999px;background:#0C0B10;color:#F6F4EF;font-family:var(--font-num);font-size:12px;font-weight:600;white-space:nowrap;box-shadow:0 8px 22px -10px rgba(12,11,16,.6);animation:slIn .18s ease-out}
@keyframes slIn{from{opacity:0;transform:translateY(4px)}}

/* the blocks: grab, lift, land */
.ikp-sg[data-k]{cursor:grab;touch-action:pan-x pan-y;transition:opacity .18s,transform .18s,filter .15s}
.ikp-sg[data-k]:active{cursor:grabbing}
.ikp-sg.lift{opacity:.28;transform:scale(.96)}
body.cal-dragging,body.cal-dragging *{cursor:grabbing !important;user-select:none !important;-webkit-user-select:none !important}
.ikp-sg.born{animation:born .7s cubic-bezier(.25,1.6,.45,1)}
@keyframes born{0%{transform:scale(.55);opacity:0;filter:brightness(1.25)}55%{transform:scale(1.07);opacity:1}100%{transform:none;filter:none}}
.cal-ghost{position:fixed;inset:0;z-index:64;pointer-events:none}
.cal-ghost .gp{position:fixed;border-radius:5px;background:color-mix(in srgb,var(--blue) 26%,transparent);box-shadow:inset 0 0 0 2px var(--blue),0 10px 24px -12px rgba(29,91,255,.6);transition:left .09s ease-out,top .09s ease-out,width .09s ease-out}
.cal-ghost .gp span{position:absolute;left:-2px;bottom:calc(100% + 6px);padding:4px 9px;border-radius:999px;background:#0C0B10;color:#F6F4EF;font-family:var(--font-num);font-size:11.5px;font-weight:600;white-space:nowrap;box-shadow:0 6px 18px -8px rgba(12,11,16,.6)}
.cal-ghost.bad .gp{background:color-mix(in srgb,var(--bad) 22%,transparent);box-shadow:inset 0 0 0 2px var(--bad)}
.cal-ghost.bad .gp span{background:var(--bad)}
.cal-ghost.no{animation:shake .32s}
@keyframes shake{20%{transform:translateX(-6px)}40%{transform:translateX(5px)}60%{transform:translateX(-4px)}80%{transform:translateX(2px)}}

/* the floating cards */
.cal-pop{position:fixed;z-index:70;width:340px;max-width:calc(100vw - 24px);max-height:calc(100vh - 24px);overflow:auto;padding:16px 16px 14px;border-radius:20px;background:var(--surface);color:var(--fg);
  box-shadow:0 0 0 1px var(--line),0 28px 60px -22px rgba(12,11,16,.45),0 8px 18px -10px rgba(12,11,16,.18);
  opacity:0;transform:scale(.92);transition:opacity .18s ease-out,transform .26s cubic-bezier(.3,1.4,.5,1)}
.cal-pop[data-side="l"]{transform-origin:left center}.cal-pop[data-side="r"]{transform-origin:right center}.cal-pop[data-side="t"]{transform-origin:top center}.cal-pop[data-side="b"]{transform-origin:bottom center}
.cal-pop.on{opacity:1;transform:none}
.cal-pop.off{opacity:0;transform:scale(.96);transition:opacity .14s,transform .14s}
.cal-pop.sheet{left:0 !important;right:0;bottom:0;top:auto !important;width:auto;max-width:none;border-radius:22px 22px 0 0;padding-bottom:calc(16px + env(safe-area-inset-bottom));transform:translateY(40px)}
.cal-pop.sheet.on{transform:none}
.cal-pop.shake{animation:shake .32s}
.cal-pop .ikp-err{margin:0;font-size:12.5px;color:var(--bad);min-height:0}
.cal-pop .ikp-err:empty{display:none}
.cal-pop .btn{height:38px;padding:0 14px;font-size:13.5px}
/* quick card */
.cq-kind{display:grid;grid-template-columns:1fr 1fr;gap:2px;padding:3px;border-radius:12px;background:var(--empty)}
.cq-kind button{display:flex;align-items:center;justify-content:center;gap:6px;height:32px;border-radius:9px;font-size:13px;font-weight:600;color:var(--fg-2);transition:background .2s,color .2s,box-shadow .2s}
.cq-kind button svg{width:12px;height:12px}
.cq-kind button[aria-selected="true"]{background:var(--surface);color:var(--fg);box-shadow:0 1px 3px rgba(12,11,16,.12)}
.cq-kind button:disabled{opacity:.4}
.cq-title{display:block;width:100%;margin:12px 0 6px;padding:6px 2px;border:0;border-bottom:2px solid var(--line);background:transparent;font-size:20px;font-weight:600;color:var(--fg);border-radius:0;transition:border-color .2s}
.cq-title:focus{outline:none;border-bottom-color:var(--blue)}
.cq-when,.cq-row,.ce-r{display:flex;align-items:center;gap:10px;min-height:38px;padding:0 6px;border-radius:10px;font-size:13.5px;color:var(--fg)}
.cq-when svg,.cq-row svg,.ce-r svg{flex:none;width:15px;height:15px;color:var(--fg-3)}
.cq-when span{flex:1;font-family:var(--font-num)}
.cq-when b{font-family:inherit;font-weight:600}
.cq-when em{font-style:normal;font-size:12px;font-weight:600;color:var(--fg-2);background:var(--empty);padding:2px 8px;border-radius:999px}
.cq-row{transition:background .15s}
.cq-row:hover,.ce-in:hover{background:var(--surface-2)}
.cq-row input,.cq-row select,.ce-in input,.ce-in select{flex:1;min-width:0;height:36px;border:0;background:transparent;font-size:13.5px;color:var(--fg);padding:0}
.cq-row input:focus,.cq-row select:focus,.ce-in input:focus,.ce-in select:focus{outline:none}
.cq-row:focus-within,.ce-in:focus-within{background:var(--surface-2);box-shadow:inset 0 0 0 1.5px var(--blue)}
.cal-pop[data-kind="fixed"] .cq-task{display:none}
.cq-f,.ce-f{display:flex;align-items:center;gap:8px;margin-top:12px}
.cq-f .sp,.ce-f .sp{flex:1}
/* block card */
.ce-h{display:flex;align-items:flex-start;gap:12px}
.ce-sw{flex:none;display:grid;place-items:center;min-width:34px;height:34px;padding:0 8px;border-radius:10px;background:var(--c,var(--fg));color:var(--ci,var(--bg));font-family:var(--font-num);font-size:12.5px;font-weight:700}
.ce-sw.fx{background:#0C0B10;color:#fff}
.ce-sw.fx svg{width:13px;height:13px}
.ce-t{flex:1;min-width:0}
.ce-tt{margin:2px 0 3px;font-size:17px;font-weight:650;line-height:1.25;overflow-wrap:anywhere}
.ce-t p{margin:0;font-family:var(--font-num);font-size:13px;color:var(--fg-2)}
.ce-t p em{font-style:normal;margin-left:8px;font-size:11.5px;font-weight:600;background:var(--empty);padding:1px 7px;border-radius:999px}
.ce-rows{margin-top:10px;display:flex;flex-direction:column;gap:1px}
.ce-r span{min-width:0;overflow:hidden;text-overflow:ellipsis}
.ce-map{flex:none;font-size:12px;font-weight:600;color:var(--blue);padding:3px 8px;border-radius:999px;background:var(--blue-soft)}
.ce-hint{margin:8px 6px 0;font-size:11.5px;color:var(--fg-3)}
.ce-f .ikp-del{display:inline-flex;align-items:center;gap:6px;transition:background .2s,color .2s,width .2s}
.ce-f .ikp-del.armed{background:var(--bad);color:#fff;border-color:var(--bad)}
/* desktop alerts */
.pl-bell{margin-left:auto;display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 12px;border-radius:999px;font-size:12px;font-weight:600;color:var(--fg);box-shadow:inset 0 0 0 1px var(--line-strong);transition:background .15s}
.pl-bell:hover{background:var(--surface-2)}
.pl-bell svg{width:13px;height:13px}
.pl-bell.granted{color:var(--fg-2);box-shadow:none;background:var(--surface-2)}
.pl-bell.granted::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--done-b,#4FBF84)}
.pl-bell.denied{color:var(--fg-3)}
.ikp-tip .tw.tl{display:flex;align-items:center;gap:4px}
@media (max-width:640px){ .wk-strip .wk-q{display:none} .wk-ws{grid-auto-columns:56px} }
@media (prefers-reduced-motion:reduce){
  .pl-g.wk-in-r,.pl-g.wk-in-l,.ikp-sg.born,.ikp-hr .ikp-c.sel,.cal-ghost.no,.cal-pop.shake{animation:none}
  .cal-pop,.ikp-hr .ikp-c,.wk-w{transition:none}
}
.ikp-hr:not(.past) .ikp-c.sel,.ikp-hr .ikp-c.sel:hover{background:var(--blue);box-shadow:none;transform:none}
.ikp-hr:not(.past) .ikp-c.sel.wait{background:transparent;box-shadow:inset 0 0 0 2px var(--blue)}
body.cal-dragging .ikp-hr .ikp-c:hover{background:var(--empty);box-shadow:none;transform:none}
.ce-map{text-decoration:none}
.ce-map:hover{text-decoration:underline}
.cal-pop .cq-title:focus,.cal-pop .cq-title:focus-visible{outline:none;box-shadow:none}

/* ======================= v41 · planner views, keywords, icons, the line of now, done keeps its colour ======================= */
/* done: the block keeps its area colour; a small check says it is done */
.ikp-sg.done{background:var(--surface);color:var(--fg);box-shadow:inset 0 0 0 1.5px var(--line-strong)}
.ikp-sg.done.linked{background:color-mix(in srgb,var(--c) 26%,var(--surface));box-shadow:inset 3px 0 0 var(--c)}
.ikp-sg.done.linked.crit{background:color-mix(in srgb,var(--c) 55%,var(--surface))}
.ikp-sg .sdk{flex:none;display:grid;place-items:center;width:14px;height:14px;border-radius:50%;background:var(--fg);color:var(--bg)}
.ikp-sg .sdk svg{width:9px;height:9px}
.sw.done{display:inline-grid !important;place-items:center;background:var(--fg) !important;color:var(--bg);width:14px !important;height:14px !important;border-radius:50% !important}
.sw.done svg{width:9px;height:9px}
.ikp-sg .sic{flex:none;display:grid;place-items:center;width:14px;height:14px}
.ikp-sg .sic svg{width:13px;height:13px}
.ikp-sg.fixed .sic{color:inherit}
/* the line of now */
.ikp-hr{position:relative}
.nowl{position:absolute;top:-3px;bottom:-3px;width:2px;margin-left:-1px;border-radius:2px;background:var(--accent);z-index:3;pointer-events:none;box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 18%,transparent)}
.nowl::before{content:"";position:absolute;left:50%;top:-5px;width:10px;height:10px;margin-left:-5px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent);animation:nowPulse 2.4s ease-in-out infinite}
@keyframes nowPulse{50%{box-shadow:0 0 0 6px color-mix(in srgb,var(--accent) 6%,transparent)}}
.pl-g .hl.now b{display:inline-block;padding:2px 7px;border-radius:999px;background:var(--accent);color:#fff;font-family:var(--font-num);font-size:12px;font-weight:600;margin-left:-6px}
/* the three ways to see the hours */
.pl-leg{align-items:center}
.pl-view{display:inline-flex;gap:2px;padding:3px;border-radius:999px;background:var(--empty);margin-left:auto}
.pl-view button{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 12px;border-radius:999px;font-size:12.5px;font-weight:600;color:var(--fg-2);transition:background .2s,color .2s,box-shadow .2s}
.pl-view button[aria-selected="true"]{background:var(--surface);color:var(--fg);box-shadow:0 1px 3px rgba(12,11,16,.14)}
.pl-view + .pl-bell{margin-left:8px}
.pl-hint{margin:0 0 12px;font-size:12px;color:var(--fg-3)}
.pl-fold{grid-column:1 / -1;display:flex;align-items:center;gap:10px;height:34px;margin:4px 0;padding:0 14px;border-radius:10px;background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--line);font-size:12px;font-weight:600;letter-spacing:.04em;color:var(--fg-3);transition:background .15s}
.pl-fold:hover{background:var(--empty)}
.pl-fold em{font-style:normal;font-size:11px;color:var(--fg);background:var(--empty);padding:2px 8px;border-radius:999px;letter-spacing:0}
.pl-fold b{margin-left:auto;color:var(--fg);letter-spacing:0}
/* weeks strip: say "Week 3", and its dates */
.wk-ws{grid-auto-columns:minmax(84px,1fr)}
.wk-w b{font-size:13.5px;letter-spacing:-.01em;white-space:nowrap}
.wk-w span{font-size:10.5px}
/* keyword and icon */
.ikp-hash{display:flex;align-items:center;gap:0;border:1px solid var(--line-strong);border-radius:14px;background:var(--surface-2);height:44px;padding-left:14px}
.ikp-hash em{font-style:normal;font-weight:700;color:var(--fg-3)}
.ikp-hash input{border:0 !important;background:transparent !important;height:42px !important;padding-left:4px !important}
.ikp-hash:focus-within{outline:2px solid var(--blue);outline-offset:0}
.ikp-hash input:focus{outline:none}
.ikp-kwic{display:flex;flex-direction:column;gap:8px}
.ikp-kwic .ikp-hint{margin:-2px 2px 0}
.icp{display:flex;flex-wrap:wrap;gap:4px}
.icp button{display:grid;place-items:center;width:32px;height:32px;border-radius:9px;color:var(--fg-2);background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--line);transition:background .15s,color .15s,transform .2s cubic-bezier(.3,1.6,.5,1)}
.icp button:hover{color:var(--fg);transform:scale(1.08)}
.icp button[aria-checked="true"]{background:var(--fg);color:var(--bg);box-shadow:none}
.icp button.none{font-weight:700;color:var(--fg-3)}
.ikp-icf .kicker{display:block;margin-bottom:6px}
.cq-tl{display:flex;align-items:flex-end;gap:10px;margin:12px 0 6px}
.cq-tl .cq-title{margin:0}
.cq-icb{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:11px;background:var(--empty);color:var(--fg);transition:background .15s,transform .2s cubic-bezier(.3,1.6,.5,1)}
.cq-icb:hover{transform:scale(1.06)}
.cq-icb.set{background:var(--fg);color:var(--bg)}
.cq-icb svg{width:17px;height:17px}
.cq-ic0{font-size:18px;font-weight:500;color:var(--fg-3);line-height:1}
.cq-icons{margin:4px 0 8px;animation:slIn .18s ease-out}
.cq-icons .icp button{width:30px;height:30px}
.hash{flex:none;width:15px;text-align:center;font-size:14px;font-weight:700;color:var(--fg-3)}
.ce-sw svg{width:15px;height:15px}
@media (max-width:640px){ .pl-view{margin-left:0} .pl-view span{display:none} .pl-view button{padding:0 10px} .wk-ws{grid-auto-columns:78px} }
@media (prefers-reduced-motion:reduce){ .nowl::before{animation:none} }
.ikp-sg.cont>span.kw{opacity:.92}
.ikp-sg.cont{padding-left:7px}
.ikp-sg.fixed.cont{justify-content:flex-start;padding-left:8px}
.ikp-sg .kw.tight{font-size:9.6px;letter-spacing:-.025em}
.ikp-sg.first:has(.kw.tight) b{letter-spacing:-.02em}
.wk-ws{grid-auto-columns:minmax(78px,1fr)}
.wk-w span{max-width:100%;overflow:hidden;text-overflow:ellipsis;font-size:10px}

/* ======================= v42 · milestones: the clock dial and the deadline line ======================= */
.gx-mh{grid-template-columns:minmax(0,1fr) auto auto auto}
.gx-prog{display:flex;align-items:center;gap:10px;grid-template-columns:none}
.gx-prog .gx-pct{min-width:2.8rem}
.gx-acts{display:flex;align-items:center;gap:6px}
.gx-due{position:relative;display:inline-flex}
.gx-cal{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;color:var(--gx-muted,var(--fg-3));box-shadow:inset 0 0 0 1.5px var(--gx-line,var(--line));transition:color .15s,box-shadow .15s,transform .2s cubic-bezier(.3,1.6,.5,1)}
.gx-cal:hover{color:var(--gx-ink,var(--fg));box-shadow:inset 0 0 0 1.5px var(--gx-ink,var(--fg));transform:scale(1.06)}
.gx-cal.on{color:var(--gx-ink,var(--fg))}
.gx-cal svg{width:14px;height:14px}
.gx-dpick{position:absolute;left:0;bottom:0;width:34px;height:34px;opacity:0;pointer-events:none;border:0;padding:0}
/* the line of time: thin, grey, a dot for today, a flag at the deadline */
.gx-dl{display:flex;align-items:center;gap:12px;margin:2px 0 0;--dl:var(--gx-muted,var(--fg-3))}
.gx-dlb{flex:1;min-width:0;max-width:560px;display:flex;align-items:center;gap:6px;padding:6px 0;cursor:pointer}
.gx-tr{position:relative;flex:1;height:2px;border-radius:2px;background:var(--gx-line,var(--line))}
.gx-tr i{position:absolute;left:0;top:0;bottom:0;width:var(--w);border-radius:2px;background:var(--dl);opacity:.75;animation:dlIn .9s cubic-bezier(.2,.8,.3,1)}
@keyframes dlIn{from{width:0}}
.gx-tr u{position:absolute;top:50%;width:7px;height:7px;margin:-3.5px 0 0 -3.5px;border-radius:50%;background:var(--surface);box-shadow:inset 0 0 0 2px var(--dl);animation:dlDot .9s cubic-bezier(.2,.8,.3,1)}
@keyframes dlDot{from{left:0}}
.gx-flag{flex:none;display:grid;place-items:center;color:var(--dl)}
.gx-dlt{display:flex;align-items:baseline;gap:8px;white-space:nowrap;font-size:12px;color:var(--gx-muted,var(--fg-3))}
.gx-dlt b{font-weight:600;color:var(--dl)}
.gx-dlt span{font-family:var(--font-num)}
.gx-dlx{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;color:var(--fg-3);opacity:0;transition:opacity .15s,background .15s}
.gx-dlx svg{width:9px;height:9px}
.gx-ms:hover .gx-dlx,.gx-dlx:focus-visible{opacity:1}
.gx-dlx:hover{background:var(--gx-line,var(--line))}
.gx-dl[data-s="near"]{--dl:#C98A12}
.gx-dl[data-s="late"]{--dl:var(--bad,#E2452F)}
.gx-dl[data-s="done"]{--dl:var(--gx-muted,var(--fg-3))}
.gx-dl[data-s="done"] .gx-tr i{opacity:.35}
.gx-dl[data-s="late"] .gx-flag{animation:flagWave 2.6s ease-in-out infinite;transform-origin:20% 90%}
@keyframes flagWave{0%,80%,100%{transform:none}86%{transform:rotate(-10deg)}92%{transform:rotate(6deg)}}
@media (max-width:700px){ .gx-mh{grid-template-columns:minmax(0,1fr) auto} .gx-dlb{max-width:none} }
@media (prefers-reduced-motion:reduce){ .gx-tr i,.gx-tr u,.gx-dl[data-s="late"] .gx-flag{animation:none} }
.pl-leg .pl-bell{margin-left:auto}

/* ======================= v45 · a planner you can read: bigger blocks, bigger type, its own scrolling box ======================= */
.pl-scroll{position:relative;max-height:min(76vh,880px);overflow:auto;overscroll-behavior:contain;margin:0 -6px;padding:0 6px 10px;border-radius:14px;scroll-padding-top:70px}
.pl-g{grid-template-columns:58px repeat(7,minmax(128px,1fr));column-gap:10px;row-gap:6px;min-width:1080px}
.pl-g .ph{position:sticky;top:0;z-index:6;background:var(--surface);padding:12px 2px 10px;margin-bottom:2px;box-shadow:0 8px 10px -10px rgba(12,11,16,.18)}
.pl-g>span:first-child{position:sticky;top:0;z-index:6;align-self:stretch;background:var(--surface)}
.pl-g .ph span{font-size:12.5px}
.pl-g .ph b{font-size:24px}
.pl-g .hl{font-size:14px;font-weight:500;color:var(--fg-2)}
.ikp-hr{gap:4px}
.ikp-hr .ikp-c{height:40px;border-radius:7px}
.ikp-sg{height:40px;border-radius:7px;padding:0 9px;gap:6px;font-size:12.5px}
.ikp-sg b{font-size:12.5px}
.ikp-sg .kw{font-size:13px;opacity:.92}
.ikp-sg .kw.tight{font-size:11.5px}
.ikp-sg .sdk{width:17px;height:17px}.ikp-sg .sdk svg{width:10px;height:10px}
.ikp-sg .sic svg,.ikp-sg.fixed svg{width:15px;height:15px}
.ikp-sg.linked{box-shadow:inset 4px 0 0 var(--c)}
.ikp-sg.done.linked{box-shadow:inset 4px 0 0 var(--c)}
.nowl{top:-4px;bottom:-4px;width:2.5px}
.pl-g .hl.now b{font-size:13px;padding:3px 9px}
.pl-g .pl-late{margin:14px 0 4px}
.cal-ghost .gp{border-radius:7px}
.ut{font-size:12.5px}
@media (max-width:640px){ .pl-scroll{max-height:70vh} .pl-g{grid-template-columns:46px repeat(7,minmax(112px,1fr));min-width:900px} .ikp-hr .ikp-c,.ikp-sg{height:36px} }
.pl-g{grid-template-columns:54px repeat(7,minmax(112px,1fr));min-width:940px}
.pl-g .ph{box-shadow:6px 0 0 var(--surface),-6px 0 0 var(--surface),0 10px 12px -12px rgba(12,11,16,.22)}
/* cells stay close to square: taller where the day is wide, a little less where it is narrow */
.ikp-hr{gap:3px}
.ikp-hr .ikp-c,.ikp-sg{height:clamp(28px,2.6vw,40px);border-radius:6px}
.pl-g{grid-template-columns:50px repeat(7,minmax(112px,1fr));column-gap:8px}

/* ======================= v46 · milestone: the content on the left, a command centre on the right ======================= */
.gx-ms{display:grid;grid-template-columns:minmax(0,1fr) 150px;gap:0;padding:0;overflow:hidden}
.gx-main{display:flex;flex-direction:column;gap:10px;min-width:0;padding:16px 22px 16px 18px}
.gx-mh{grid-template-columns:minmax(0,1fr) auto auto;gap:8px 20px}
.gx-dl{margin:4px 0 2px;gap:14px}
.gx-dlb{max-width:none}
.gx-cmd{display:flex;flex-direction:column;justify-content:center;gap:5px;padding:12px 10px;background:color-mix(in srgb,var(--gx-soft) 90%,var(--fg) 5%);box-shadow:inset 1px 0 0 var(--gx-line)}
.gx-cmd .gx-due{display:block;position:relative}
.gx-cb{display:flex;align-items:center;gap:8px;width:100%;height:32px;padding:0 11px;border-radius:10px;font-size:13px;font-weight:500;text-transform:lowercase;color:var(--gx-ink);background:transparent;white-space:nowrap;transition:background .15s,color .15s,transform .2s cubic-bezier(.3,1.6,.5,1)}
.gx-cb svg{flex:none;width:13px;height:13px}
.gx-cb:hover{background:var(--surface)}
.gx-cb:active{transform:scale(.97)}
.gx-cb.pri{background:var(--gx-ink);color:var(--surface)}
.gx-cb.pri:hover{background:var(--gx-ink);opacity:.88}
.gx-cb.del{color:var(--gx-muted)}
.gx-cb.del[data-confirm]{background:var(--bad,#E2452F);color:#fff}
.gx-cb.gx-cal{box-shadow:none;transform:none;color:var(--gx-ink)}
.gx-cb.gx-cal:not(.on){color:var(--gx-muted)}
.gx-cb.gx-cal:hover{box-shadow:none;transform:none;color:var(--gx-ink)}
.gx-cmd .gx-dpick{left:10px;bottom:0}
.gx-ms[data-done="true"] .gx-cmd{background:color-mix(in srgb,var(--gx-soft) 94%,var(--fg) 3%)}
@media (max-width:700px){
  .gx-ms{grid-template-columns:minmax(0,1fr)}
  .gx-cmd{flex-direction:row;flex-wrap:wrap;justify-content:flex-start;box-shadow:inset 0 1px 0 var(--gx-line);padding:8px 10px}
  .gx-cmd .gx-cb,.gx-cmd .gx-due{width:auto}
}
/* the command centre is a compact 2 × 2: deadline · task / edit · delete */
.gx-ms{grid-template-columns:minmax(0,1fr) 216px}
.gx-cmd{display:grid;grid-template-columns:1fr 1fr;align-content:center;gap:6px;padding:12px}
.gx-cmd .gx-cb{padding:0 10px;gap:7px}
@media (max-width:700px){ .gx-ms{grid-template-columns:minmax(0,1fr)} .gx-cmd{grid-template-columns:repeat(4,auto);justify-content:start} }
@media (max-width:700px){ .gx-cmd{grid-template-columns:1fr 1fr;justify-content:stretch} .gx-cmd .gx-cb,.gx-cmd .gx-due{width:100%} }
/* the days' header is one solid bar that stays on top while the hours scroll, edge to edge */
.pl-g .pl-hd{grid-column:1 / -1;position:sticky;top:0;z-index:8;display:grid;grid-template-columns:subgrid;column-gap:inherit;align-items:center;
  margin:0 -6px 2px;padding:0 6px;background:var(--surface);box-shadow:0 10px 12px -12px rgba(12,11,16,.25)}
@supports not (grid-template-columns:subgrid){ .pl-g .pl-hd{grid-template-columns:50px repeat(var(--nd,7),minmax(112px,1fr));column-gap:8px} }
.pl-g .pl-hd .ph{position:static;box-shadow:none;margin:0;background:transparent}
.pl-g>span:first-child{position:static;background:none}

/* ======================= v48 · task of the week vs appointment, and the focus lock of each area ======================= */
/* the switch */
.sw-t{position:relative;flex:none;display:inline-block;width:34px;height:20px;border-radius:999px;background:var(--line-strong);transition:background .2s}
.sw-t i{position:absolute;left:2px;top:2px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(12,11,16,.25);transition:transform .25s cubic-bezier(.3,1.5,.5,1)}
input[data-k="wk"]{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
input[data-k="wk"]:checked + .sw-t{background:var(--fg)}
input[data-k="wk"]:checked + .sw-t i{transform:translateX(14px)}
input[data-k="wk"]:disabled + .sw-t{opacity:.5}
input[data-k="wk"]:focus-visible + .sw-t{outline:2px solid var(--blue);outline-offset:2px}
.ikp-wks{position:relative;display:flex;align-items:flex-start;gap:12px;padding:12px 14px;border-radius:14px;background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--line);cursor:pointer}
.ikp-wks .sw-x{display:flex;flex-direction:column;gap:2px;font-size:14px}
.ikp-wks small{font-size:12px;color:var(--fg-3);line-height:1.35}
.cq-wk{position:relative;cursor:pointer;min-height:44px}
.cq-wkt{display:flex;flex-direction:column;line-height:1.2}
.cq-wkt b{font-weight:600;font-size:13.5px}
.cq-wkt small{font-size:11.5px;color:var(--fg-3)}
.ce-wk{position:relative;cursor:pointer}
.ce-wk b{font-weight:600}
.ikp-sg .swk{flex:none;display:grid;place-items:center;width:13px;height:13px;opacity:.85}
.ikp-sg .swk svg{width:12px;height:12px}
/* the lock next to "x of y done" */
.ikp-lock{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 11px;border-radius:999px;font-size:12.5px;font-weight:600;font-family:var(--font-num);color:var(--fg-3);box-shadow:inset 0 0 0 1.5px var(--line-strong);transition:background .15s,color .15s,transform .2s cubic-bezier(.3,1.6,.5,1);align-self:center}
.ikp-lock:hover{background:var(--surface);color:var(--fg);transform:scale(1.04)}
.ikp-lock.on{color:var(--fg);box-shadow:inset 0 0 0 1.5px var(--fg)}
.ikp-lock.over{color:var(--bad,#E2452F);box-shadow:inset 0 0 0 1.5px var(--bad,#E2452F)}
.ikp-lock svg{width:13px;height:13px}
.ikp-full{display:flex;align-items:center;gap:10px;margin:0;padding:12px 16px;border-radius:16px;background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--line);font-size:13px;color:var(--fg-2)}
.ikp-full svg{flex:none;width:15px;height:15px;color:var(--fg)}
/* the focus card */
.cal-pop.lk{width:320px}
.lk-h{display:flex;align-items:center;gap:12px}
.lk-h>div{flex:1;min-width:0}
.lk-h h4{margin:0;font-size:17px;font-weight:650}
.lk-h p{margin:2px 0 0;font-size:13px;color:var(--fg-3)}
.lk-ic{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:var(--empty);color:var(--fg-2);transition:background .2s,color .2s}
.lk-ic.on{background:var(--fg);color:var(--bg)}
.lk-ic svg{width:18px;height:18px}
.lk-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:16px;padding:10px 12px;border-radius:12px;background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--line);font-size:13.5px;font-weight:500}
.lk-row select{border:0;background:transparent;font-size:15px;font-weight:700;font-family:var(--font-num);color:var(--fg);text-align:right;padding:2px 4px}
.lk-now{margin:10px 2px 0;font-size:13px;color:var(--fg-2)}
.lk-tip{display:flex;gap:9px;align-items:flex-start;margin:12px 0 0;padding:10px 12px;border-radius:12px;background:color-mix(in srgb,var(--done,#36AE9B) 12%,transparent);font-size:12.5px;line-height:1.4;color:var(--fg-2)}
.lk-tip svg{flex:none;margin-top:2px;color:var(--done-b,#36AE9B)}
.lk-now{display:flex;justify-content:space-between;padding:0 12px}.lk-now b{font-family:var(--font-num)}
/* v49 · deleting a repeating one */
.ce-ask{display:flex;flex-direction:column;gap:10px;width:100%;animation:slIn .18s ease-out}
.ce-ask p{display:flex;align-items:center;gap:8px;margin:0;font-size:13.5px;font-weight:600}
.ce-ask p svg{width:13px;height:13px;color:var(--fg-3)}
.ce-ask>div{display:flex;flex-wrap:wrap;gap:6px}
.ce-ask .btn{height:36px;padding:0 13px;font-size:13px}
.ce-ask .btn.ghost{box-shadow:none;color:var(--fg-3)}
.ce-ask .ikp-del.armed{background:var(--bad,#E2452F);color:#fff;border-color:var(--bad,#E2452F)}
.ikp-rpd{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.ikp-rpd .btn{height:46px;justify-content:center}
.ce-t p em{white-space:nowrap}
/* v52 · a critical is a goal of the week: its tasks live on its card */
.cq-wk[hidden],[data-only][hidden]{display:none!important}
.ikp-crit.cg{gap:10px;min-height:220px}
.cg-dw{margin:-2px 0 0;font-size:13px;line-height:1.35;opacity:.9}
.cg-dw .cg-l{display:block;font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;opacity:.7;margin-bottom:1px}
.cg-none{margin:0;font-size:13px;opacity:.72}
.cg-none:empty{display:none}
.cg-ts{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.cg-t{display:flex;align-items:center;gap:9px;min-height:38px;padding:5px 6px 5px 9px;border-radius:12px;background:color-mix(in srgb,var(--ci) 9%,transparent);transition:background .15s,transform .2s cubic-bezier(.3,1.4,.5,1)}
.cg-t[draggable=true]{cursor:grab}
.cg-t:hover{background:color-mix(in srgb,var(--ci) 15%,transparent)}
.cg-ck{flex:none;width:19px;height:19px;border-radius:50%;box-shadow:inset 0 0 0 1.7px currentColor;color:inherit;position:relative;transition:background .15s,transform .2s cubic-bezier(.3,1.6,.5,1)}
.cg-ck:hover{transform:scale(1.1)}
.cg-ck.on{background:var(--ci);box-shadow:none}
.cg-ck.on::after{content:"";position:absolute;left:6px;top:3.5px;width:5px;height:9px;border:solid var(--c);border-width:0 2px 2px 0;transform:rotate(45deg)}
.cg-tt{flex:1;min-width:0;text-align:left;color:inherit;font-size:14px;font-weight:500;line-height:1.3;overflow-wrap:anywhere}
.cg-t.done .cg-tt{text-decoration:line-through;opacity:.6}
.cg-wh{flex:none;display:inline-flex;align-items:center;gap:5px;height:26px;padding:0 10px;border-radius:999px;background:#0C0B10;color:#fff;font-size:11.5px;font-weight:600;white-space:nowrap}
.cg-wh svg{width:12px;height:12px}
.cg-wh.none{background:transparent;color:inherit;box-shadow:inset 0 0 0 1.2px color-mix(in srgb,var(--ci) 55%,transparent)}
.cg-t.done .cg-wh{opacity:.55}
.cg-new{display:flex;align-items:center;gap:7px;height:38px;padding:0 10px;border-radius:12px;box-shadow:inset 0 0 0 1.2px color-mix(in srgb,var(--ci) 32%,transparent);transition:box-shadow .15s,background .15s}
.cg-new:focus-within{background:color-mix(in srgb,var(--ci) 8%,transparent);box-shadow:inset 0 0 0 1.6px var(--ci)}
.cg-new span{display:grid;place-items:center;opacity:.75}
.cg-new svg{width:14px;height:14px}
.cg-new input{flex:1;min-width:0;height:100%;border:0;outline:0;background:transparent;color:inherit;font:inherit;font-size:14px}
.cg-new input::placeholder{color:inherit;opacity:.6}
.cg-ft{display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.cg-ft em{font-style:normal;font-size:12px;font-weight:600;opacity:.75}
.cg-ft em:empty{display:none}
.cg-due{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 11px;border-radius:999px;background:color-mix(in srgb,var(--ci) 12%,transparent);font-size:12.5px}
.cg-due svg{flex:none}
.cg-due b{font-weight:650}
.cg-due span{opacity:.75}
.cg-due[data-s=near]{box-shadow:inset 0 0 0 1.4px var(--ci)}
.cg-due[data-s=late]{background:#0C0B10;color:#fff}
.ikp-crit.cg.done .cg-due{opacity:.8}
/* v53 · the category of a task, picked on its card and on the add line */
.sec-pick{position:relative;height:24px;margin-left:-8px;padding:0 8px;border-radius:999px;cursor:pointer;color:var(--fg-2);font-weight:600;letter-spacing:.04em;text-transform:uppercase;font-size:11.5px;transition:background .15s,color .15s}
.sec-pick:hover,.sec-pick:focus-within{background:var(--surface-2);color:var(--fg)}
.sec-pick svg{opacity:.55;flex:none}
.sec-pick:hover svg{opacity:1}
.sec-pick select,.ikp-add-sec select{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;font-size:16px;appearance:none;border:0}
.ikp-add-sec{position:relative;flex:none;display:inline-flex;align-items:center;gap:7px;height:40px;padding:0 13px;border-radius:999px;background:var(--surface-2);font-size:12.5px;font-weight:600;color:var(--fg);cursor:pointer;max-width:42%;transition:background .15s}
.ikp-add-sec:hover,.ikp-add-sec:focus-within{background:color-mix(in srgb,var(--c) 14%,var(--surface-2))}
.ikp-add-sec::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--c)}
.ikp-add-sec span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ikp-add-sec svg{flex:none;opacity:.6}
/* v54 · the month only looks back: a review */
.km-rv{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 16px;border-radius:999px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);font-size:13.5px;font-weight:600;color:var(--fg-2)}
.km-acts{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr) minmax(0,1.15fr);gap:14px;margin:14px 0 22px}
.km-ac{display:flex;flex-direction:column;gap:12px;min-width:0;padding:20px 22px;border-radius:28px;background:var(--surface);border:1px solid var(--line)}
.km-ah{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.km-ah b{font-family:var(--font-num);font-size:26px;font-weight:400;letter-spacing:-.02em;white-space:nowrap}
.km-ah b small{font-family:var(--font);font-size:12px;font-weight:600;color:var(--fg-3);margin-left:6px;letter-spacing:0}
.km-sb{display:flex;gap:2px;height:12px;border-radius:999px;overflow:hidden}
.km-sb i{background:var(--c);min-width:4px}
.km-al,.km-wl,.km-gl{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.km-al li{display:grid;grid-template-columns:9px minmax(0,1fr) auto 38px;align-items:center;gap:10px;padding:7px 0;border-top:1px solid var(--line);font-size:13px}
.km-al li:first-child{border-top:0}
.km-al li i{width:9px;height:9px;border-radius:50%}
.km-al li span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.km-al li b{font-family:var(--font-num);font-weight:500}
.km-al li em{font-style:normal;color:var(--fg-3);text-align:right;font-size:12px;font-weight:600}
.km-af{margin:auto 0 0;font-size:12.5px;color:var(--fg-2)}
.km-af b{color:var(--fg)}
.km-none2{margin:0;font-size:13px;color:var(--fg-3)}
.km-wl li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"c r d" "c e e";align-items:center;gap:2px 10px;padding:9px 0;border-top:1px solid var(--line)}
.km-wl li:first-child{border-top:0}
.km-wl .km-wc{grid-area:c}
.km-wl li.cur .km-wc{background:var(--fg);color:var(--bg)}
.km-wl .km-wr{grid-area:r;font-size:13px;font-weight:600}
.km-wl .km-wd{grid-area:d;display:inline-flex;align-items:center;gap:7px}
.km-wl .km-wd b{font-family:var(--font-num);font-size:17px;font-weight:500}
.km-wl .km-wd small{font-size:11px;color:var(--fg-3)}
.km-wl em{grid-area:e;font-style:normal;font-size:12px;color:var(--fg-3);font-weight:600}
.km-wl li.fut{opacity:.6}
.km-gl li{display:grid;grid-template-columns:auto minmax(0,1fr) 42px;grid-template-areas:"c t p" "c b b" "c e e";align-items:center;gap:4px 10px;padding:9px 0;border-top:1px solid var(--line)}
.km-gl li:first-child{border-top:0}
.km-gc{grid-area:c;align-self:start;margin-top:1px;display:inline-grid;place-items:center;height:22px;padding:0 8px;border-radius:999px;background:var(--c);color:var(--ci);font-size:11px;font-weight:700}
.km-gt{grid-area:t;font-size:13.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.km-gl li>b{grid-area:p;text-align:right;font-family:var(--font-num);font-weight:500;font-size:14px}
.km-gp{grid-area:b;height:6px;border-radius:999px;background:var(--surface-2);overflow:hidden}
.km-gp i{display:block;height:100%;border-radius:999px;background:var(--c)}
.km-gl em{grid-area:e;font-style:normal;font-size:12px;color:var(--fg-3);font-weight:600}
/* the calendar as a heat map of the index */
:is(#cal,.ovc).ikm .day.km-d.t-g{background:color-mix(in srgb,#5FD07A 14%,var(--surface))}
:is(#cal,.ovc).ikm .day.km-d.t-a{background:color-mix(in srgb,#F3B53F 15%,var(--surface))}
:is(#cal,.ovc).ikm .day.km-d.t-r{background:color-mix(in srgb,#E8492C 11%,var(--surface))}
:is(#cal,.ovc).ikm .day.km-d.fut{background:transparent;border-style:dashed;opacity:.7}
@media (max-width:1100px){.km-acts{grid-template-columns:1fr 1fr}.km-gls{grid-column:1/-1}}
@media (max-width:700px){.km-acts{grid-template-columns:1fr}}
/* v55 · meal, transit and break, placed from the week planner */
.pl-tools{display:inline-flex;gap:6px;margin-left:auto}
.pl-tool{display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 14px;border-radius:999px;background:var(--surface);box-shadow:inset 0 0 0 1.2px var(--line-strong,var(--line));color:var(--fg-2);font-size:13px;font-weight:600;transition:background .15s,color .15s,box-shadow .15s,transform .2s cubic-bezier(.3,1.6,.5,1)}
.pl-tool:hover{color:var(--fg);transform:translateY(-1px)}
.pl-tool.on{background:#0C0B10;color:#fff;box-shadow:none}
.pl-leg .pl-tools+.pl-bell{margin-left:4px}
.pl-hint.tool{color:var(--fg);font-weight:600}
.ikp-planner.tooling .ikp-c{cursor:crosshair}
.ikp-planner.tooling .ikp-c.sel{background:color-mix(in srgb,var(--fg) 16%,var(--surface-2));box-shadow:inset 0 0 0 1.5px var(--fg)}
.ikp-sg.act{background-color:var(--surface);color:var(--fg-2);box-shadow:inset 0 0 0 1px var(--line-strong,var(--line));gap:6px}
.ikp-sg.act-meal,.ikp-sg.act-brk{background-image:repeating-linear-gradient(135deg,color-mix(in srgb,var(--fg) 13%,transparent) 0 1.4px,transparent 1.4px 6px)}
.ikp-sg.act-transit{background-image:radial-gradient(circle,color-mix(in srgb,var(--fg) 18%,transparent) 1.2px,transparent 1.7px);background-size:7px 7px}
.ikp-sg.act svg{flex:none}
.ikp-sg.act .kw{font-weight:600;color:var(--fg-2)}
.ce-sw.act{background:var(--surface-2);color:var(--fg)}
@media (max-width:760px){.pl-tools{margin-left:0;width:100%}.pl-tool{flex:1;justify-content:center}}
.ikp-sg.act-morning{background-image:repeating-linear-gradient(45deg,color-mix(in srgb,var(--fg) 11%,transparent) 0 1.2px,transparent 1.2px 6px),repeating-linear-gradient(135deg,color-mix(in srgb,var(--fg) 11%,transparent) 0 1.2px,transparent 1.2px 6px)}
.ikp-sg.act-sleep{background-image:repeating-linear-gradient(90deg,color-mix(in srgb,var(--fg) 13%,transparent) 0 1.3px,transparent 1.3px 5px)}
.pl-tools{flex-wrap:wrap}
/* v57 · the hours of the planner again: Normal · Early bird · Night owl, beside its buttons */
.pl-b{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:8px}
.pl-b .pl-view{margin-left:0;height:44px;align-items:center;padding:4px}
.pl-b .pl-view button{height:36px;padding:0 14px;font-size:13px}
@media (max-width:900px){.pl-b .pl-view span{display:none}.pl-b .pl-view button{padding:0 11px}}
/* v59 · a quieter planner head, one thin bar of tools, and a line per day instead of a pile of tasks */
.ikp-planner .pl-h{align-items:center}
.pl-tt{flex:1;min-width:220px;display:flex;align-items:baseline;gap:12px}
.pl-tt span{font-size:12.5px;font-weight:600;color:var(--fg-3);letter-spacing:.02em}
.pl-b{gap:8px}
.pl-ib{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--surface);color:var(--fg);box-shadow:inset 0 0 0 1.2px var(--line-strong);transition:transform .2s cubic-bezier(.3,1.6,.5,1),background .15s}
.pl-ib:hover{transform:translateY(-1px)}
.pl-ib:active{transform:scale(.94)}
.pl-ib.pri{background:#0C0B10;color:#fff;box-shadow:none}
.pl-ib svg{width:15px;height:15px}
.pl-b .pl-view{height:40px;padding:3px}
.pl-b .pl-view button{height:34px;padding:0 11px}
.pl-b .pl-view button span{display:none}
.pl-b .pl-view button[aria-selected="true"] span{display:inline}
.pl-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin:12px 0 10px}
.pl-bar .sp{flex:1}
.pl-bar .pl-tools{margin-left:0;width:auto;gap:2px;padding:3px;border-radius:999px;background:var(--empty)}
.pl-bar .pl-tool{height:32px;padding:0 10px;background:transparent;box-shadow:none;font-size:12.5px}
.pl-bar .pl-tool span{display:none}
.pl-bar .pl-tool.on{background:#0C0B10;color:#fff}
.pl-bar .pl-tool.on span{display:inline}
.pl-bar .pl-tool:hover{transform:none;background:var(--surface)}
.pl-bar .pl-tool.on:hover{background:#0C0B10}
.pl-key{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:11.5px;color:var(--fg-3)}
.pl-key span{display:inline-flex;align-items:center;gap:6px}
.pl-key .sw{width:12px;height:9px;border-radius:3px;display:inline-block}
.pl-key .sw.done{width:12px !important;height:12px !important}
.pl-bar .pl-bell{margin-left:0;width:34px;height:34px;padding:0;justify-content:center;border-radius:50%;position:relative}
.pl-bar .pl-bell span{display:none}
.pl-bar .pl-bell.granted::before{position:absolute;top:5px;right:5px;box-shadow:0 0 0 2px var(--surface-2)}
.pl-hint.tool{margin:0 0 10px}
.ikp-planner .ut-tray{display:flex;align-self:stretch;padding:2px 0 6px}
.pl-dbar{flex:1;min-width:0;display:flex;align-items:center;gap:6px;height:32px;padding:0 9px;border-radius:10px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line-strong);font-size:12px;color:var(--fg-2);white-space:nowrap;transition:box-shadow .15s,transform .2s cubic-bezier(.3,1.6,.5,1)}
.pl-dbar:hover{box-shadow:inset 0 0 0 1.4px var(--fg-3);transform:translateY(-1px)}
.pl-dbar b{font-family:var(--font-num);font-size:15px;font-weight:600;color:var(--fg)}
.pl-dbar .dots{display:flex;gap:6px;margin-left:auto;min-width:0;overflow:hidden}
.pl-dbar .dots em{font-style:normal;display:inline-flex;align-items:center;gap:3px;font-size:11px;font-weight:700;color:var(--fg-2)}
.pl-dbar .dots em::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--c)}
.pl-dbar u{flex:none;text-decoration:none;display:inline-flex;align-items:center;gap:3px;font-size:11.5px;font-weight:700;color:#D94468}
.pl-dbar u svg{width:11px;height:11px}
.pl-dbar.clear{color:var(--fg-3)}
.pl-dbar .ok{display:grid;place-items:center;width:16px;height:16px;border-radius:50%;background:var(--fg);color:var(--bg)}
.pl-dbar .ok svg{width:9px;height:9px}
@media (max-width:1180px){.pl-dbar span{display:none}}
.cal-pop.kdp{width:360px;padding:16px 16px 10px}
.cal-pop.dragging{opacity:.15;pointer-events:none}
.kdp-h{display:flex;align-items:flex-start;gap:10px;margin-bottom:8px}
.kdp-h>div{flex:1}
.kdp-h h4{margin:0;font-size:18px;font-weight:600}
.kdp-h p{margin:2px 0 0;font-size:12.5px;color:var(--fg-3);font-weight:600}
.kdp-b{display:flex;flex-direction:column;gap:12px;max-height:min(60vh,520px);overflow:auto;margin:0 -4px;padding:0 4px}
.kdp-b .kicker{display:block;margin-bottom:6px;font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-3)}
.kdp-b ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.kdp-t{display:grid;grid-template-columns:18px minmax(0,1fr) auto;align-items:center;gap:9px;min-height:38px;padding:4px 10px 4px 9px;border-radius:11px;background:var(--surface-2);box-shadow:inset 3px 0 0 var(--c)}
.kdp-t[draggable=true]{cursor:grab}
.kdp-t[draggable=true]:hover{background:color-mix(in srgb,var(--c) 10%,var(--surface-2))}
.kdp-ck{width:18px;height:18px;border-radius:50%;box-shadow:inset 0 0 0 1.6px var(--fg-3);position:relative}
.kdp-ck.on{background:var(--fg);box-shadow:none}
.kdp-ck.on::after{content:"";position:absolute;left:6px;top:3px;width:5px;height:9px;border:solid var(--bg);border-width:0 2px 2px 0;transform:rotate(45deg)}
.kdp-tt{text-align:left;font-size:13.5px;font-weight:500;color:var(--fg);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kdp-t.done .kdp-tt{text-decoration:line-through;color:var(--fg-3)}
.kdp-t em{font-style:normal;font-family:var(--font-num);font-size:12px;font-weight:600;color:var(--fg-3)}
.kdp-dl li{display:flex;align-items:center;gap:8px;font-size:13px;padding:6px 10px;border-radius:11px;background:color-mix(in srgb,var(--c) 12%,var(--surface))}
.kdp-dl li svg{color:#D94468;flex:none}
.kdp-dl b{font-size:11.5px;font-weight:700;white-space:nowrap}
.kdp-dl span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kdp-none{margin:0;font-size:13px;color:var(--fg-3)}
.pl-g .pl-hd .ph{flex-direction:column;align-items:stretch;gap:6px}
.pl-g .ph .ph-t{display:flex;align-items:center;gap:6px;min-width:0}
.pl-g .pl-hd .ph .pl-dbar{flex:none;height:28px;border-radius:9px}
.pl-g .pl-hd{align-items:start}
.pl-g .ph .pl-dbar-ph{display:block;height:28px}
.pl-g .ph .pl-dbar b{font-size:15px;font-weight:600;letter-spacing:0;color:var(--fg)}
.pl-g .ph .pl-dbar span{font-size:11.5px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--fg-3)}
.pl-g .ph .pl-dbar .dots em{border:0;padding:0;border-radius:0;font-size:11px;font-weight:700;color:var(--fg-2)}
.pl-g .ph .pl-dbar u{font-size:11.5px}
/* v60 · the work log: a button by the timeline, a quick mode in Hoshi, and the day's notes */
.btn.wl-b{display:inline-flex;align-items:center;gap:7px;background:#0C0B10;color:#fff;border-color:#0C0B10;position:relative}
.btn.wl-b svg{flex:none}
.btn.wl-b em{font-style:normal;display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:#fff;color:#0C0B10;font-size:11px;font-weight:700}
.btn.wl-b.on{box-shadow:0 0 0 3px color-mix(in srgb,#36AE9B 45%,transparent)}
body.plan-day .btn.wl-b{display:none}
.wl-dot{width:10px;height:10px;border-radius:50%;background:#36AE9B;box-shadow:0 0 0 0 rgba(54,174,155,.6);animation:wlPulse 1.6s infinite}
#aiPane.wl-on #chatForm{box-shadow:0 0 0 2px rgba(54,174,155,.7);border-radius:18px}
@keyframes wlPulse{0%{box-shadow:0 0 0 0 rgba(54,174,155,.55)}70%{box-shadow:0 0 0 8px rgba(54,174,155,0)}100%{box-shadow:0 0 0 0 rgba(54,174,155,0)}}
@keyframes wlIn{from{opacity:0;transform:translateY(6px)}}
.wl-veil{position:fixed;inset:0;z-index:95;display:grid;place-items:center;padding:16px;background:rgba(12,11,16,.42);animation:wlFade .18s ease-out}
.wl-sheet{width:min(520px,100%);max-height:min(80vh,720px);display:flex;flex-direction:column;border-radius:26px;background:var(--surface);color:var(--fg);box-shadow:0 30px 70px -30px rgba(0,0,0,.5);overflow:hidden;animation:wlPop .24s cubic-bezier(.3,1.4,.5,1)}
.wl-sheet header{display:flex;align-items:flex-start;gap:12px;padding:22px 22px 12px}
.wl-sheet header>div{flex:1}
.wl-sheet .kicker{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-3)}
.wl-sheet h3{margin:4px 0 0;font-size:22px;font-weight:600;letter-spacing:-.01em;text-transform:capitalize}
.wl-sheet header p{margin:3px 0 0;font-size:13px;color:var(--fg-2)}
.wl-sheet ol{list-style:none;margin:0;padding:4px 22px 8px;overflow:auto;display:flex;flex-direction:column;gap:6px}
.wl-sheet li{display:grid;grid-template-columns:48px minmax(0,1fr) 28px;align-items:start;gap:10px;padding:10px 12px;border-radius:14px;background:var(--surface-2)}
.wl-sheet time{font-family:var(--font-num);font-size:13px;font-weight:600;color:var(--fg-2);padding-top:1px}
.wl-sheet li p{margin:0;font-size:14px;line-height:1.45;overflow-wrap:anywhere}
.wl-del{width:26px;height:26px;border-radius:50%;color:var(--fg-3);font-size:17px;line-height:1}
.wl-del:hover{background:var(--surface);color:var(--fg)}
.wl-none{margin:0;padding:6px 22px 14px;font-size:14px;line-height:1.5;color:var(--fg-2)}
.wl-sheet footer{display:flex;justify-content:flex-end;padding:12px 22px 20px;border-top:1px solid var(--line)}
.wl-sheet footer .btn{display:inline-flex;align-items:center;gap:8px}
@keyframes wlFade{from{opacity:0}} @keyframes wlPop{from{opacity:0;transform:scale(.95)}}
#brushbar .btn.wl-b{background:#0C0B10 !important;color:#fff !important;border-color:#0C0B10 !important}
#brushbar .btn.wl-b span{color:#fff}
#brushbar .btn.wl-b em{background:#fff;color:#0C0B10}

/* v61 · repeating rituals: the Repeat control of a ritual block (week card and Day card) */
.ce-rep{display:flex;align-items:center;gap:10px;margin:14px 0 0;padding-top:12px;border-top:1px solid var(--line)}
.ce-rl{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:var(--fg-2);white-space:nowrap}
.ce-seg{display:flex;flex:1;gap:2px;padding:3px;border-radius:999px;background:var(--empty)}
.ce-seg button{flex:1;height:28px;padding:0 8px;border-radius:999px;font-size:12px;font-weight:600;color:var(--fg-2);white-space:nowrap;transition:background .2s,color .2s,box-shadow .2s}
.ce-seg button.on{background:var(--surface);color:var(--fg);box-shadow:0 1px 3px rgba(12,11,16,.14)}
.ce-rep + .ce-hint{margin-top:6px}


/* v62 · the work log mode, clean: one quiet line on top (mode · notes · Done), Hoshi asks, nothing else on screen */
.wl-bar{display:flex;align-items:center;gap:8px;margin:2px auto 6px;padding:4px 4px 4px 14px;width:max-content;max-width:100%;border-radius:999px;background:rgba(54,174,155,.12);animation:wlIn .22s cubic-bezier(.2,.8,.2,1)}
.wl-bar[hidden]{display:none}
.wl-mode{display:inline-flex;align-items:center;gap:8px;margin-right:4px}
.wl-mode b{font-size:13px;font-weight:600;letter-spacing:.01em}
.wl-dot{width:8px;height:8px}
.wl-bar button{display:inline-flex;align-items:center;gap:5px;height:28px;padding:0 11px;border-radius:999px;font-size:12.5px;font-weight:600;color:inherit;background:transparent}
.wl-bar .wl-n{opacity:.75}
.wl-bar .wl-n:hover{opacity:1;background:rgba(54,174,155,.14)}
.wl-bar .wl-n em{font-style:normal;font-family:var(--font-num)}
.wl-bar .wl-x{background:#36AE9B;color:#fff}
#aiPane.wl-on #chatForm{box-shadow:0 0 0 2px rgba(54,174,155,.7);border-radius:18px}
#aiPane.wl-on #lvSeg,#aiPane.wl-on #coCard,#aiPane.wl-on #chips,#aiPane.wl-on #msgs,#aiPane.wl-on #coMood,#aiPane.wl-on #coBar,#aiPane.wl-on #coChg,#aiPane.wl-on #replyRow,#aiPane.wl-on .hint{display:none !important}
/* v63 · the work log in the top bar, right after Close the day: a bigger icon, its count, teal while it is on */
.wl-top{display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 13px 0 10px;border-radius:999px;font-size:13px;font-weight:500;white-space:nowrap}
.wl-top[hidden]{display:none}
.wl-top svg{flex:none;width:19px;height:19px}
.wl-top em{font-style:normal;display:inline-grid;place-items:center;min-width:19px;height:19px;padding:0 5px;border-radius:999px;background:var(--fg);color:var(--bg);font-family:var(--font-num);font-size:11px;font-weight:700}
.wl-top.on{background:#36AE9B;border-color:#36AE9B;color:#fff}
.wl-top.on em{background:#fff;color:#1d6f62}
@media (max-width:640px){ .wl-top span{display:none} .wl-top{padding-inline:9px} }
.bar-in .btn.wl-top.on,.bar-in .btn.wl-top.on:hover,.bar-in .btn.wl-top[aria-pressed="true"]{background:#36AE9B !important;border-color:#36AE9B !important;color:#fff !important;opacity:1 !important}
.bar-in .btn.wl-top.on span{color:#fff}

/* v64 · the overview's dark card is the month: its average index, three numbers and five highlights */
.ikp-mperf .mst{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;padding:14px 0 2px;border-top:1px solid var(--panel-line,#2E2D36)}
.ikp-mperf .mst div{display:flex;flex-direction:column;gap:3px}
.ikp-mperf .mst b{font-family:var(--font-num);font-size:22px;font-weight:600;letter-spacing:-.01em}
.ikp-mperf .mst b.up{color:#7FD99A}.ikp-mperf .mst b.dn{color:#FF8A7A}
.ikp-mperf .mst span{font-size:12px;color:var(--panel-fg-2,#A9A6B5)}
.ikp-mperf .hl{display:flex;flex-direction:column;gap:10px;padding-top:14px;border-top:1px solid var(--panel-line,#2E2D36)}
.ikp-mperf .hl ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.ikp-mperf .hl li{display:grid;grid-template-columns:92px minmax(0,1fr);align-items:baseline;gap:10px;font-size:14px;line-height:1.4}
.ikp-mperf .hl li em{font-style:normal;display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--panel-fg-2,#A9A6B5);white-space:nowrap}
.ikp-mperf .hl li em::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--c)}
.ikp-mperf .hl li.g{--c:#6FD08C}.ikp-mperf .hl li.r{--c:#E8492C}.ikp-mperf .hl li.a{--c:#F4B400}
.ikp-mperf .hl .none{margin:0;font-size:14px;color:var(--panel-fg-2,#A9A6B5)}
.ikp-mperf .hl li span{color:var(--panel-fg,#F6F4EF);opacity:.92}

/* v68 · Safari does not clip a blurred glow to rounded corners with overflow alone: the dark week and month heroes
   are masked to their own shape, so their corners stay round */
.yh,.km-hero{-webkit-mask-image:-webkit-radial-gradient(white,black);mask-image:radial-gradient(white,black);transform:translateZ(0)}

/* v69 · archive · hold · done */
.ikp-fls{display:inline-flex;gap:2px;padding:3px;border-radius:999px;background:var(--surface);border:1px solid var(--line);align-self:center}
.ikp-fl{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 13px;border-radius:999px;color:var(--fg-2);font-family:var(--font-num);font-size:13px;transition:background .2s,color .2s}
.ikp-fl:hover{background:var(--empty);color:var(--fg)}
.ikp-fl b{font-weight:600}
.ikp-fl.has{color:var(--fg)}
.ikp-fl.has b{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:#E8492C;color:#fff;font-size:11.5px}
.ikp-arcb{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 11px;border-radius:999px;border:1.5px solid var(--fg);font-family:var(--font-num);font-size:12.5px;font-weight:600;color:var(--fg);background:transparent;transition:background .2s,color .2s}
.ikp-arcb:hover{background:var(--fg);color:var(--bg)}
.ikp-task{position:relative}
.ikp-hold{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;color:var(--fg-3);opacity:0;transition:opacity .2s,background .2s,color .2s}
.ikp-hold:hover,.ikp-hold:focus-visible{background:var(--empty);color:#4F86F0}
.ikp-task:hover .ikp-hold,.ikp-crit:hover .ikp-hold,.ikp-hold:focus-visible{opacity:1}
.ikp-hold-c{position:absolute;top:6px;right:6px;width:26px;height:26px}
.ikp-crit .ct .ikp-hold{color:inherit;opacity:0}
.ikp-crit:hover .ct .ikp-hold{opacity:.8}
@media (hover:none){ .ikp-hold{opacity:.55} }
.fl-hi{display:inline-grid;place-items:center;width:30px;height:30px;margin-right:10px;border-radius:50%;background:var(--empty);vertical-align:-7px}
.fl-list{display:flex;flex-direction:column;gap:18px}
.fl-g h4{display:flex;align-items:center;gap:8px;margin:0 0 8px;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-2)}
.fl-g h4 i{width:8px;height:8px;border-radius:50%}
.fl-g h4 small{font-family:var(--font-num);font-size:12px;font-weight:600;color:var(--fg-3);letter-spacing:0}
.fl-g ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.fl-r{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:14px;padding:12px 14px;border-radius:16px;background:var(--surface-2,#F4F2FA);box-shadow:inset 4px 0 0 var(--c)}
.fl-m{display:flex;flex-direction:column;gap:5px;min-width:0}
.fl-m b{font-size:14.5px;font-weight:600;line-height:1.3}
.fl-meta{font-family:var(--font-num);font-size:12px;color:var(--fg-3)}
.fl-age{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px;max-width:260px}
.fl-age i{position:relative;height:5px;border-radius:999px;background:var(--line);overflow:hidden}
.fl-age i::after{content:"";position:absolute;left:0;top:0;bottom:0;width:calc(var(--r) * 100%);min-width:6px;border-radius:inherit;background:color-mix(in srgb,#E8492C calc(var(--r) * 100%),#F3B53F)}
.fl-age em{font-style:normal;font-family:var(--font-num);font-size:11.5px;font-weight:600;color:var(--fg-2)}
.fl-dates{display:flex;flex-wrap:wrap;gap:4px 14px;font-family:var(--font-num);font-size:12.5px;color:var(--fg)}
.fl-dates em{font-style:normal;color:var(--fg-3);margin-right:5px;font-family:var(--font-ui)}
.fl-acts{display:flex;gap:6px}
.fl-b{display:inline-grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--surface);border:1px solid var(--line);color:var(--fg);transition:background .2s,color .2s,border-color .2s}
.fl-b:hover{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.fl-b.ok:hover{background:#36AE9B;border-color:#36AE9B;color:#fff}
.fl-b.wide{display:inline-flex;gap:7px;width:auto;padding:0 14px;font-size:13px;font-weight:600}
.fl-st{font-size:12px;font-weight:700;padding:4px 10px;border-radius:999px;white-space:nowrap}
.fl-st.ok{background:rgba(54,174,155,.15);color:#1d7a6b}
.fl-st.late{background:rgba(232,73,44,.12);color:#C2381F}
.fl-none{margin:4px 0 8px;font-size:14px;color:var(--fg-2)}
.fl-r .ykw{--dial:38px}
@media (max-width:640px){ .fl-r{grid-template-columns:minmax(0,1fr) auto} .fl-r .fl-acts{grid-column:1 / -1;justify-content:flex-end} .ikp-fls{order:9} }

/* v70 · the archive (and hold, done) as folders: one per section, its colour and its count */
.fl-folds{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.fl-fold{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:16px 16px 14px;border-radius:20px;background:var(--surface-2,#F4F2FA);border:1px solid transparent;text-align:left;transition:transform .15s,border-color .2s,background .2s}
.fl-fold:hover{border-color:var(--c);background:var(--surface)}
.fl-fold:active{transform:scale(.98)}
.fl-fi{position:relative;display:block;width:64px;height:50px;margin-bottom:4px}
.fl-fi svg{width:100%;height:100%;display:block}
.fl-fi .bk{fill:color-mix(in srgb,var(--c) 62%,#000)}
.fl-fi .fr{fill:var(--c)}
.fl-fi b{position:absolute;left:0;right:0;bottom:7px;text-align:center;font-family:var(--font-num);font-size:19px;font-weight:700;color:var(--ci,#fff);line-height:1}
.fl-fn{font-size:14px;font-weight:600;line-height:1.25;color:var(--fg)}
.fl-fold em{font-style:normal;font-size:12px;color:var(--fg-3)}
.fl-fold .fl-age{width:100%;max-width:none}
.fl-n{margin-left:10px;font-family:var(--font-num);font-size:15px;font-weight:600;color:var(--fg-3)}
.fl-back{display:inline-grid;place-items:center;width:32px;height:32px;margin-right:8px;border-radius:50%;background:var(--empty);vertical-align:-6px;transform:rotate(180deg)}
.fl-back:hover{background:var(--fg);color:var(--bg)}
.fl-dot{display:inline-block;width:12px;height:12px;margin-right:10px;border-radius:50%;vertical-align:1px}
.fl-ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
@media (max-width:640px){ .fl-folds{grid-template-columns:repeat(2,minmax(0,1fr))} }
/* done: the whole row is green, with its tick */
.fl-r.done{grid-template-columns:auto minmax(0,1fr) auto;background:rgba(54,174,155,.16);box-shadow:inset 4px 0 0 #36AE9B}
.fl-r.done .fl-m b{color:#14594E}
.fl-ck{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#36AE9B;color:#fff}
.fl-ck svg{width:14px;height:14px}
.fl-r.done .fl-st.ok{background:#36AE9B;color:#fff}
@media (max-width:640px){ .fl-r.done{grid-template-columns:auto minmax(0,1fr)} .fl-r.done .fl-st{grid-column:2} }
/* back to the archive (a task brought down by mistake) */
.ikp-ret{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;color:var(--fg-3);opacity:0;transition:opacity .2s,background .2s,color .2s}
.ikp-ret:hover,.ikp-ret:focus-visible{background:var(--empty);color:#E8492C}
.ikp-task:hover .ikp-ret,.ikp-crit:hover .ikp-ret,.ikp-ret:focus-visible{opacity:1}
.ikp-crit .ct .ikp-ret{color:inherit}
.ikp-crit:hover .ct .ikp-ret{opacity:.8}
@media (hover:none){ .ikp-ret{opacity:.55} }
.ikp-retb{display:inline-flex;align-items:center;gap:7px}

/* v72 · overview: the month's dashboard on top, its calendar of results below */
.ovm{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1.3fr) minmax(240px,.8fr);gap:28px;align-items:center;margin-top:18px;padding:26px 30px;border-radius:var(--r-pane,30px);background:var(--panel,#0C0B10);color:var(--panel-fg,#F6F4EF);position:relative;isolation:isolate;overflow:hidden;-webkit-mask-image:-webkit-radial-gradient(white,black)}
.ovm .kicker{color:var(--panel-fg-2,#A9A6B5)}
.ovm-l .ix{display:flex;align-items:center;gap:20px;margin-top:12px}
.ovm-l .ix h2{margin:0;font-weight:300;font-size:34px;line-height:1.05}
.ovm-l .ix p{margin:4px 0 0;font-size:13px;color:var(--panel-fg-2,#A9A6B5)}
.ovm .mst{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.ovm .mst div{display:flex;flex-direction:column;gap:3px}
.ovm .mst b{font-family:var(--font-num);font-size:26px;font-weight:600;letter-spacing:-.01em}
.ovm .mst b.up{color:#7FD99A}.ovm .mst b.dn{color:#FF8A7A}
.ovm .mst span{font-size:12px;color:var(--panel-fg-2,#A9A6B5)}
.ovm-goal{margin-top:18px;padding-top:16px;border-top:1px solid var(--panel-line,#2E2D36)}
.ovm-gh{display:grid;grid-template-columns:1fr auto auto;align-items:baseline;gap:4px 12px}
.ovm-gh .kicker{grid-column:1 / -1}
.ovm-gh b{font-family:var(--font-num);font-size:20px;font-weight:600}
.ovm-gh b small{font-size:13px;font-weight:400;color:var(--panel-fg-2,#A9A6B5)}
.ovm-gh em{font-style:normal;font-family:var(--font-num);font-size:15px;font-weight:700;color:#F3B53F}
.ovm-gb{display:block;height:10px;margin-top:10px;border-radius:999px;background:#2E2D36;overflow:hidden}
.ovm-gb i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#F3B53F,#6FD08C)}
.ovm-gt{margin:8px 0 0;font-size:12.5px;color:var(--panel-fg-2,#A9A6B5)}
.ovm-goal.none p{margin:6px 0 10px;font-size:14px;color:var(--panel-fg-2,#A9A6B5)}
.ovm-r{display:flex;flex-direction:column;gap:12px}
.ovm-hl{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:14px;padding:18px;border-radius:22px;background:#1A1920;border:1px solid #2E2D36;color:inherit;text-align:left;transition:background .2s,border-color .2s}
.ovm-hl:hover:not(:disabled){background:#24232C;border-color:#4A4856}
.ovm-hl:disabled{opacity:.6;cursor:default}
.ovm-hd{display:grid;grid-template-columns:repeat(3,8px);gap:4px}
.ovm-hd i{width:8px;height:8px;border-radius:50%}
.ovm-hd i.g{background:#6FD08C}.ovm-hd i.r{background:#E8492C}.ovm-hd i.a{background:#F4B400}
.ovm-ht b{display:block;font-size:17px;font-weight:600}
.ovm-ht small{display:block;margin-top:3px;font-size:12px;line-height:1.35;color:var(--panel-fg-2,#A9A6B5)}
.ovm-hc{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#2E2D36}
.ovm-rv{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;border-radius:999px;background:#fff;color:#0C0B10;font-size:13.5px;font-weight:700}
.ovm-hls{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.ovm-hls li{display:grid;grid-template-columns:110px minmax(0,1fr);gap:12px;align-items:baseline;padding:12px 14px;border-radius:14px;background:var(--surface-2,#F4F2FA);font-size:14.5px;line-height:1.45}
.ovm-hls li em{font-style:normal;display:inline-flex;align-items:center;gap:7px;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--fg-2)}
.ovm-hls li em::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--c)}
.ovm-hls li.g{--c:#36AE9B}.ovm-hls li.r{--c:#E8492C}.ovm-hls li.a{--c:#F4B400}
.ovc-w{margin-top:22px}
@media (max-width:1100px){ .ovm{grid-template-columns:1fr 1fr} .ovm-r{grid-column:1 / -1;flex-direction:row} .ovm-hl{flex:1} .ovm-rv{padding:0 18px} }
@media (max-width:700px){ .ovm{grid-template-columns:1fr;padding:22px} .ovm-r{flex-direction:column} .ovm-hls li{grid-template-columns:1fr} }

/* v72 · the month: a plan calendar — a dot per activity, appointments and key dates */
.kp-d{gap:7px!important}
.kp-dots{display:flex;flex-wrap:wrap;gap:4px;max-width:100%}
.kp-dots i,.kp-lg{display:inline-block;width:9px;height:9px;border-radius:50%;box-shadow:inset 0 0 0 1.6px var(--c);background:transparent}
.kp-dots i.on,.kp-lg.on{background:var(--c)}
.kp-dots i.meant,.kp-lg.meant{box-shadow:inset 0 0 0 1.4px var(--c);opacity:.55;border:1px dashed transparent}
.kp-dots em{font-style:normal;font-family:var(--font-num);font-size:11px;font-weight:700;color:var(--fg-2);line-height:9px}
.kp-n{font-family:var(--font-num);font-size:11.5px;color:var(--fg-3)}
.kp-ap{display:flex;align-items:center;gap:5px;max-width:100%;font-size:11.5px;color:var(--fg-2);white-space:nowrap;overflow:hidden}
.kp-ap svg{flex:none;width:10px;height:10px}
.kp-ap b{font-family:var(--font-num);font-weight:700;color:var(--fg)}
.kp-ap span{overflow:hidden;text-overflow:ellipsis}
.kp-ap.fl{color:#C2381F}
.kp-more{font-size:11px;color:var(--fg-3)}
.kp-d.past{background:color-mix(in srgb,var(--surface) 70%,transparent)!important}
.cal-foot .kp-lg{margin-right:6px;vertical-align:-1px}
@media (max-width:700px){ .kp-n,.kp-ap span{display:none} .kp-dots i{width:6px;height:6px} }
.fl-b.wide{border-radius:12px;height:38px;padding:0 16px}
.cal-foot i.kp-lg{border-radius:50%;width:9px;height:9px}

/* v73 · multitask: up to three tasks in one block — one lane each, in its state's colour */
#grid .cell.multi{background:var(--empty)!important;padding:0;color:#fff}
#grid .cell.multi .ln{position:absolute;inset:0;display:flex;flex-direction:column;gap:2px;padding:0}
#grid .cell.multi .ln i{flex:1;min-height:0;border-radius:4px}
#grid .cell.multi .ln i.l-planned{background:var(--planned)}
#grid .cell.multi .ln i.l-ongoing{background:var(--ongoing)}
#grid .cell.multi .ln i.l-done{background:var(--done)}
#grid .cell.multi .mc{position:relative;z-index:1;display:grid;place-items:center;height:100%;font-size:10.5px;font-weight:800;letter-spacing:.02em;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.45);white-space:nowrap}
#brushbar .btn.mt-b{display:inline-flex;align-items:center;gap:7px}
#brushbar .btn.mt-b.on{background:#0C0B10!important;color:#fff!important;border-color:#0C0B10!important}
#brushbar .btn.mt-b.on span{color:#fff}
.par-chip{display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 9px;border-radius:999px;background:#0C0B10;color:#fff;font-size:11px;font-weight:700;letter-spacing:.02em}
.mt-l{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
.mt-r{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px;padding:8px 8px 8px 10px;border-radius:12px;background:var(--surface-2,#F4F2FA)}
.mt-r b{display:inline-grid;place-items:center;min-width:30px;height:22px;padding:0 6px;border-radius:999px;font-family:var(--font-num);font-size:11.5px;color:#fff;background:var(--planned,#5A5866)}
.mt-r.ongoing b{background:var(--ongoing,#E8B54F);color:#0C0B10}.mt-r.done b{background:var(--done,#5BAE9B)}
.mt-r span{font-size:13.5px;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ikp-sg.multi{position:relative;overflow:hidden}
.ikp-sg .sg-ln{position:absolute;left:0;right:0;bottom:0;display:flex;flex-direction:column;gap:1px}
.ikp-sg .sg-ln i{height:4px;background:var(--c);opacity:.95}
.ikp-sg .sg-ln i.planned{opacity:.55}
#grid .cell.multi .ln i:nth-child(2).l-planned{background:var(--planned-b,#7B7890)}
#grid .cell.multi .ln i:nth-child(3).l-planned{background:color-mix(in srgb,var(--planned) 55%,#fff)}
#grid .cell.multi .ln i:nth-child(2).l-done{background:var(--done-b,#7FC4B3)}
#grid .cell.multi .ln i:nth-child(3).l-done{background:color-mix(in srgb,var(--done) 55%,#fff)}
#grid .cell.multi .ln i:nth-child(2).l-ongoing,#grid .cell.multi .ln i:nth-child(3).l-ongoing{background:color-mix(in srgb,var(--ongoing) 75%,#fff)}
#grid .cell.multi .mc{position:absolute;inset:0;text-shadow:none}
#grid .cell.multi .mc span{padding:1px 6px;border-radius:7px;background:rgba(12,11,16,.72);color:#fff;font-size:10px;line-height:1.4}

/* v74 · X-ray: the real day under the planned one */
.xr-b{display:inline-flex;align-items:center;gap:7px;height:36px;margin-left:8px;padding:0 14px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--fg);font-size:13px;font-weight:600;transition:background .2s,color .2s}
.xr-b:hover{border-color:var(--fg)}
.xr-b.on{background:#0C0B10;color:#fff;border-color:#0C0B10}
#grid.xray{background:repeating-linear-gradient(0deg,transparent 0 3px,rgba(12,11,16,.025) 3px 4px)}
#grid .cell.xr{background:color-mix(in srgb,var(--empty) 70%,transparent)}
#grid .cell.xr.xr-gap{background:repeating-linear-gradient(135deg,rgba(232,73,44,.10) 0 5px,transparent 5px 10px);box-shadow:inset 0 0 0 1px rgba(232,73,44,.18)}
#grid .cell.xr-t{background:transparent!important;padding:0}
#grid .cell.xr-t .ln{position:absolute;inset:0;display:flex;flex-direction:column;gap:2px}
#grid .cell.xr-t .ln i{flex:1;min-height:0;border-radius:4px;background:var(--c)}
#grid .cell.xr-t .ln i.run{background:repeating-linear-gradient(135deg,var(--c) 0 6px,color-mix(in srgb,var(--c) 70%,#fff) 6px 12px)}
#grid .cell.xr-t .mc{position:absolute;inset:0;display:grid;place-items:center;z-index:1}
#grid .cell.xr-t .mc span{padding:1px 6px;border-radius:7px;background:rgba(12,11,16,.72);color:#fff;font-size:10px;font-weight:800;line-height:1.4;white-space:nowrap}
#brushbar .btn.xs-b{display:inline-flex;align-items:center;gap:7px;background:#0C0B10!important;color:#fff!important;border-color:#0C0B10!important}
#brushbar .btn.xs-b span{color:#fff}
.xs-sheet{width:min(1040px,100%)!important;max-height:min(90vh,900px)!important}
.xs-nav{display:flex;gap:6px}
.xs-sum{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;padding:0 22px 14px}
.xs-sum>div{padding:14px 16px;border-radius:16px;background:var(--surface-2,#F4F2FA);display:flex;flex-direction:column;gap:4px}
.xs-sum b{font-family:var(--font-num);font-size:26px;font-weight:600}
.xs-sum b.ok{color:#1d7a6b}.xs-sum b.bad{color:#C2381F}
.xs-sum small{font-size:12px;color:var(--fg-3)}
.xs-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.6fr);gap:18px;padding:0 22px 22px;overflow:auto}
.xs-body h4{margin:0 0 8px;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-2)}
.xs-hr{display:grid;grid-template-columns:22px repeat(6,minmax(0,1fr));gap:3px;margin-bottom:3px;align-items:center}
.xs-hr span{font-family:var(--font-num);font-size:10.5px;color:var(--fg-3)}
.xs-hr i{position:relative;height:18px;border-radius:5px;background:var(--empty);display:flex;flex-direction:column;gap:1px;overflow:hidden}
.xs-hr i u{flex:1;display:block}
.xs-hr i b{position:absolute;inset:0;display:grid;place-items:center;font-size:8.5px;font-weight:800;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.4);white-space:nowrap}
.xs-tasks table{width:100%;border-collapse:collapse;font-size:13px}
.xs-tasks th{font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-3);text-align:right;padding:0 6px 6px}
.xs-tasks td{padding:7px 6px;border-top:1px solid var(--line);text-align:right;font-family:var(--font-num);white-space:nowrap}
.xs-tasks td.xs-tt{text-align:left;font-family:var(--font-ui);white-space:normal;max-width:220px;line-height:1.3}
.xs-c{display:inline-grid;place-items:center;min-width:28px;height:20px;padding:0 6px;border-radius:999px;color:#fff;font-size:11px}
.xs-tasks tr.bad .xs-d{color:#C2381F;font-weight:700}
.xs-tasks tr.ok .xs-d{color:#1d7a6b;font-weight:700}
.xs-tasks tr.bad{background:rgba(232,73,44,.05)}.xs-tasks tr.ok{background:rgba(54,174,155,.05)}
.xs-rule{margin:12px 0 0;font-size:12px;color:var(--fg-3)}
.xs-none{margin:0 22px 14px;font-size:14px;color:var(--fg-2)}
@media (max-width:820px){ .xs-body{grid-template-columns:1fr 1fr} .xs-tasks{grid-column:1 / -1} .xs-sum{grid-template-columns:1fr} }
.xs-sheet header>div.xs-nav{flex:0 0 auto}
.xs-sheet h3{text-transform:none!important}

/* v75 · the Day's dashboard stays on top while scrolling; the timeline and Hoshi stick right under it */
@media (min-width:1041px){
  #dayView .summary{position:sticky;top:calc(env(safe-area-inset-top,0px) + var(--bar-h) + 4px);z-index:4;box-shadow:0 -14px 0 var(--bg)}
  #dayView .pane[data-pane="time"],#dayView .pane[data-pane="ai"]{top:calc(env(safe-area-inset-top,0px) + var(--bar-h) + var(--sum-h,0px) + 12px)!important}
  #dayView .pane.chat.cosmos:not(.co-pop){height:calc(100vh - var(--bar-h) - var(--sum-h,0px) - 28px)!important;height:calc(100dvh - var(--bar-h) - var(--sum-h,0px) - 28px)!important}
}

/* v76 · the month: bigger day numbers, and a + on each day to add an activity from its timeline */
:is(#cal,.ovc).ikm.plan .kp-d .km-n{font-size:22px;font-weight:600;letter-spacing:-.01em}
:is(#cal,.ovc).ikm .dayw{position:relative}
.kp-add{position:absolute;top:10px;right:10px;z-index:2;display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--surface);border:1.5px solid var(--fg);color:var(--fg);opacity:.55;transition:opacity .15s,background .15s,color .15s,transform .15s}
.dayw:hover .kp-add,.kp-add:focus-visible{opacity:1}
.kp-add:hover{background:var(--fg);color:var(--bg);transform:scale(1.06)}
@media (hover:none){ .kp-add{opacity:.9;width:26px;height:26px} }
.dp-mm,.dp-hr{display:grid;grid-template-columns:30px repeat(6,minmax(0,1fr));gap:4px}
.dp-mm span{font-family:var(--font-num);font-size:10.5px;color:var(--fg-3);text-align:center}
.dp-grid{max-height:min(56vh,520px);overflow:auto;display:flex;flex-direction:column;gap:4px;padding-right:4px}
.dp-h{font-family:var(--font-num);font-size:12px;color:var(--fg-2);align-self:center}
.dp-c{position:relative;height:30px;border-radius:9px;background:var(--empty);border:0;padding:0;transition:background .12s,box-shadow .12s}
.dp-c.free:hover{background:color-mix(in srgb,var(--fg) 14%,var(--empty))}
.dp-c.tk{background:var(--c);opacity:.85}
.dp-c.fx{background:repeating-linear-gradient(135deg,#0C0B10 0 4px,#3A3846 4px 8px);opacity:.8}
.dp-c.act{background:repeating-linear-gradient(135deg,rgba(135,117,230,.28) 0 4px,transparent 4px 8px);box-shadow:inset 0 0 0 1px rgba(135,117,230,.35)}
.dp-c b{position:absolute;inset:0;display:grid;place-items:center;font-size:10.5px;font-weight:800;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.4);white-space:nowrap}
.dp-c.sel{box-shadow:0 0 0 2.5px #E8492C;background:color-mix(in srgb,#E8492C 22%,var(--empty))}
.dp-late{margin:8px 0 2px;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-3)}
:is(#cal,.ovc).ikm .kp-d .kp-ap svg{width:10px!important;height:10px!important;flex:none}
@media (max-width:700px){
  :is(#cal,.ovc).ikm.plan .kp-d .km-n{font-size:17px}
  .kp-add{top:auto;bottom:6px;right:50%;transform:translateX(50%);width:24px;height:24px;opacity:.85}
  .kp-add:hover{transform:translateX(50%) scale(1.06)}
  .kp-add svg{width:11px;height:11px}
}

/* v77 · the month cell: one red pill with the count, appointments under it, the list on tap */
:is(#cal,.ovc).ikm.plan{grid-template-columns:76px repeat(7,minmax(0,1fr));gap:12px 10px}
:is(#cal,.ovc).ikm.plan .day.km-d{min-height:196px;padding:14px;gap:10px;text-align:left;cursor:pointer}
:is(#cal,.ovc).ikm.plan .day.km-d:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.kp-pill{display:inline-flex;align-items:center;gap:6px;align-self:stretch;height:30px;padding:0 10px 0 14px;border-radius:999px;background:#E8492C;color:#fff;border:0;font-size:12.5px;font-weight:700;letter-spacing:.005em;white-space:nowrap;overflow:hidden;transition:background .15s,transform .15s}
.kp-pill .kp-pl-n{display:none}
.kp-pill .kp-pl-t{flex:1;text-align:left;overflow:hidden;text-overflow:ellipsis}
.kp-pill svg{flex:none;opacity:.9}
.kp-pill:hover{background:#CF3A1F}
.kp-pill:active{transform:scale(.98)}
.kp-d.past .kp-pill{background:color-mix(in srgb,#E8492C 72%,var(--surface))}
.kp-aps{display:flex;flex-direction:column;gap:6px;min-width:0}
.kp-aps .kp-ap{font-size:12px}
.kp-more{align-self:flex-start;border:0;background:var(--empty);color:var(--fg-2);font-size:11.5px;font-weight:700;padding:3px 9px;border-radius:999px}
.kp-more:hover{background:var(--fg);color:var(--bg)}
.cal-foot .kp-pl-lg{display:inline-block;width:22px;height:10px;border-radius:999px;background:#E8492C;margin-right:6px;vertical-align:-1px}
.cal-foot .kp-add-lg{display:inline-grid;place-items:center;width:16px;height:16px;border-radius:50%;border:1.3px solid var(--fg-2);margin-right:6px;vertical-align:-4px}
.cal-foot .kp-add-lg svg{width:9px;height:9px}
.cal-pop.dl{width:360px;padding:16px 16px 14px}
.dl-h{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:10px}
.dl-h h4{margin:0;font-size:17px;font-weight:700;letter-spacing:-.01em}
.dl-h p{margin:2px 0 0;font-size:12px;color:var(--fg-3)}
.dl-l{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;max-height:min(46vh,380px);overflow:auto}
.dl-l li{display:flex;align-items:center;gap:8px;padding:8px 2px;border-top:1px solid var(--line);font-size:13px;min-width:0}
.dl-l li:first-child{border-top:0}
.dl-l .tt{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dl-l li.done .tt{color:var(--fg-3);text-decoration:line-through;text-decoration-color:color-mix(in srgb,var(--fg-3) 60%,transparent)}
.dl-l .cd{flex:none;font-family:var(--font-num);font-size:10.5px;font-weight:800;color:var(--c);background:color-mix(in srgb,var(--c) 13%,transparent);padding:2px 6px;border-radius:6px}
.dl-l em{flex:none;font-style:normal;font-family:var(--font-num);font-size:11.5px;color:var(--fg-2)}
.dl-l em.mt{font-family:inherit;color:var(--fg-3);font-size:11px}
.dl-l .ok{flex:none;display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;background:#36AE9B;color:#fff}
.dl-l.ap svg{flex:none;width:11px;height:11px;color:var(--fg-2)}
.dl-k{margin:12px 0 2px;font-size:10.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-3)}
.dl-e{margin:6px 0 4px;font-size:13px;color:var(--fg-3)}
.dl-go{width:100%;margin-top:14px;justify-content:center;display:inline-flex;align-items:center;gap:6px}
@media (max-width:700px){
  :is(#cal,.ovc).ikm.plan{grid-template-columns:repeat(7,minmax(0,1fr));gap:5px}
  :is(#cal,.ovc).ikm.plan .day.km-d{min-height:118px;padding:6px 5px 34px;gap:6px}
  .kp-pill{height:22px;padding:0;justify-content:center;font-size:11.5px}
  .kp-pill .kp-pl-n{display:inline}
  .kp-pill .kp-pl-t,.kp-pill svg{display:none}
  .kp-aps .kp-ap b{font-size:10px}
  .kp-more{font-size:10px;padding:2px 5px}
  .cal-pop.dl{width:auto}
}
:is(#cal,.ovc).ikm.plan{grid-template-columns:88px repeat(7,minmax(0,1fr))}
.kp-pill svg{display:block;align-self:center;margin:0!important;position:static!important;transform:none!important}
.kp-aps{align-self:stretch}
.kp-aps .kp-ap{max-width:100%;min-width:0}
@media (max-width:700px){ :is(#cal,.ovc).ikm.plan{grid-template-columns:repeat(7,minmax(0,1fr))} }
@media (max-width:700px){ .kp-pill svg,.kp-pill .kp-pl-t{display:none!important} .kp-pill .kp-pl-n{display:inline!important} }

/* v79 · Hoshi: a long reply scrolls inside its area and never runs over the buttons or the top bar */
#aiPane.cosmos:not(.oracle):not(.carded) .co-core{justify-content:safe center;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--fg) 18%,transparent) transparent;padding-top:6px}
#aiPane.cosmos.wordy:not(.oracle):not(.carded) .co-now{max-height:none;overflow:visible;padding:0}
#aiPane.cosmos.wordy:not(.oracle):not(.carded) .co-bud .bud{font-size:clamp(84px,7.5vw,108px)}
#aiPane.cosmos.wordy:not(.oracle):not(.carded) .co-line{font-size:15.5px;line-height:1.5;max-width:40ch;text-wrap:pretty}
#aiPane.cosmos .chips{position:relative;z-index:2}
/* v79 · Hoshi opens clean and centred, a little lower so its glow never touches Zen · Proactive · Copilot */
#aiPane.cosmos:not(.oracle) .co-core{padding-top:26px}
#aiPane.cosmos:not(.oracle):not(.wordy):not(.log) .co-bud .bud{font-size:clamp(140px,13vw,190px)}
#aiPane .chips:empty{display:none}

/* v79 · Hoshi's field, the Yokan way: one line and nothing else. Large thin "Write, or speak…", a hairline in Hoshi's colours
   under it, then the language, a wave to talk and an arrow to send — no pill, no circles, no buttons around it. */
#aiPane:not(.oracle) #chatForm{display:flex;align-items:center;gap:14px;margin:4px 22px 18px;padding:0;border:0;border-radius:0;background:none;box-shadow:none}
#aiPane:not(.oracle) #chatForm:focus-within{box-shadow:none}
#aiPane:not(.oracle) #chatInput{order:0;flex:1 1 auto;min-width:0;padding:10px 0 12px;border:0;border-radius:0;outline:0;resize:none;
  background:linear-gradient(90deg,#6E8BFF,#A77BF2 50%,#F07AA8) left bottom/100% 1.5px no-repeat;background-color:transparent;
  font-family:var(--font-ui);font-size:clamp(19px,1.6vw,23px);font-weight:300;letter-spacing:-.01em;line-height:1.35;color:var(--fg);caret-color:#6E8BFF;
  transition:background-size .3s ease,opacity .2s}
#aiPane:not(.oracle) #chatInput::placeholder{color:var(--fg-3);font-weight:300;opacity:1}
#aiPane:not(.oracle) #chatInput:not(:focus):placeholder-shown{background-size:100% 1px;opacity:.92}
#aiPane:not(.oracle) #chatInput:focus{background-size:100% 2px}
#aiPane:not(.oracle) #chatForm .co-ml{order:1;padding:6px 0;font-family:var(--font-ui);font-size:12px;font-weight:600;letter-spacing:.1em;color:var(--fg-2)}
#aiPane:not(.oracle) #chatForm .co-ib{order:2;width:30px;height:30px;border:0;border-radius:8px;background:none;box-shadow:none;color:var(--fg-2);transform:none}
#aiPane:not(.oracle) #chatForm .co-ib:hover{background:none;color:var(--fg)}
#aiPane:not(.oracle) #chatForm #sendBtn,#aiPane:not(.oracle) #chatForm #stopBtn{order:3}
#aiPane:not(.oracle) #chatForm .co-ib.pri{background:none;color:var(--fg)}
#aiPane:not(.oracle) #chatForm .co-ib.pri:hover{transform:translateX(2px)}
#aiPane:not(.oracle) #chatInput:placeholder-shown~#sendBtn:not([hidden]){opacity:.35}
#aiPane:not(.oracle) #chatForm .co-ib.mic.listening{background:none;color:#F0533D;animation:hsWave 1.1s ease-in-out infinite}
@keyframes hsWave{50%{transform:scaleY(1.25)}}
#aiPane:not(.oracle) #chatForm .co-ib:focus-visible{outline:2px solid var(--fg);outline-offset:2px}
#aiPane:not(.oracle) #replyRow,#aiPane:not(.oracle) #hint{display:none}
#aiPane:not(.oracle) .ai-note{margin:-8px 22px 12px;font-size:10px;text-align:center;color:var(--fg-3);opacity:.7}
.var-row{display:flex;gap:8px}.var-row select{flex:1}

/* v80 · late: done after its week closed, it shows done but adds nothing to that week */
.ykw .late-tag,.late-tag{display:inline-block;margin-top:3px;padding:1px 7px;border-radius:999px;background:#E8492C;color:#fff;font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;line-height:1.5}
.ykw{display:inline-flex;flex-direction:column;align-items:center}
.late-tag.sm{margin:0 0 0 6px;font-size:9px;padding:0 6px;vertical-align:1px}
.cg-due[data-s="late"] b{color:inherit}

/* v81 · Day timeline: the little card on hover */
.gtip{position:fixed;z-index:120;left:0;top:0;display:grid;gap:6px;min-width:180px;padding:10px 12px;border-radius:12px;background:var(--surface);border:1px solid var(--line);
  box-shadow:0 10px 28px -12px rgba(20,16,40,.35),0 2px 6px rgba(20,16,40,.08);color:var(--fg);font-size:13px;line-height:1.35;pointer-events:none;opacity:0;transform:translateY(3px);transition:opacity .14s,transform .14s;visibility:hidden}
.gtip.on{opacity:1;transform:none;visibility:visible}
.gt-h{font-family:var(--font-num,inherit);font-size:11px;font-weight:700;letter-spacing:.06em;color:var(--fg-3);text-transform:uppercase}
.gt-r{display:flex;align-items:center;gap:8px;min-width:0}
.gt-c{flex:none;font-family:var(--font-num,inherit);font-size:11px;font-weight:800;padding:2px 7px;border-radius:6px;background:var(--fg);color:var(--bg)}
.gt-c.gt-critical{background:#E8492C;color:#fff}
.gt-t{flex:1;min-width:0;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gt-i{flex:none;display:inline-grid;place-items:center;color:var(--fg-2)}
.gt-i svg{width:13px;height:13px}
.gt-s{flex:none;font-style:normal;font-size:10.5px;font-weight:700;letter-spacing:.04em;color:var(--fg-3)}
.gt-s.gt-done{color:#1F8A5B}.gt-s.gt-running{color:#E8492C}
.gt-f{padding-top:6px;border-top:1px solid var(--line);font-size:11.5px;color:var(--fg-3)}

/* v82 · the sticky Day dashboard: its cover now wraps the rounded corners too, so nothing scrolling under it peeks out at the corners */
@media (min-width:1041px){
  #dayView .summary{box-shadow:0 -2px 0 14px var(--bg),0 -16px 0 14px var(--bg)}
}

/* v83 · Undo: bottom-left, small and always at hand after an action; it opens with what it will take back, then folds to an icon */
.undo-fab{position:fixed;left:max(16px,env(safe-area-inset-left));bottom:max(16px,env(safe-area-inset-bottom));z-index:90;display:inline-flex;align-items:center;gap:0;height:44px;min-width:44px;padding:0 14px;border:0;border-radius:999px;
  background:var(--fg);color:var(--bg);box-shadow:0 10px 26px -10px rgba(12,11,16,.45);cursor:pointer;opacity:.86;transition:opacity .2s,transform .2s,gap .25s,padding .25s}
.undo-fab[hidden]{display:none}
.undo-fab:hover,.undo-fab:focus-visible,.undo-fab.wide{opacity:1;gap:10px;padding:0 16px 0 14px}
.undo-fab:active{transform:scale(.96)}
.undo-fab svg{flex:none}
.undo-fab .u-t{display:grid;line-height:1.15;text-align:left;max-width:0;overflow:hidden;white-space:nowrap;transition:max-width .3s ease}
.undo-fab:hover .u-t,.undo-fab:focus-visible .u-t,.undo-fab.wide .u-t{max-width:240px}
.undo-fab .u-t b{font-size:13px;font-weight:700}
.undo-fab .u-t small{font-size:11px;opacity:.7;overflow:hidden;text-overflow:ellipsis;max-width:220px}
.undo-fab:not(.wide):not(:hover):not(:focus-visible){padding:0;justify-content:center}
@media (max-width:640px){ .undo-fab{bottom:max(76px,env(safe-area-inset-bottom))} }

/* v84 · Month on the phone, the iPhone way: no boxes, a hairline per week, the number and a few coloured marks;
   tap a day to see its agenda right under the grid, tap it again to open it */
.kp-m,.km-agenda{display:none}
@media (max-width:700px){
  #monthView .cal-foot{display:none}
  :is(#cal).ikm.plan{grid-template-columns:repeat(7,minmax(0,1fr));gap:0;margin:0 -4px}
  #cal.ikm.plan .km-h{padding:0 0 8px;font-size:11px;font-weight:600;letter-spacing:.02em;color:var(--fg-3);text-align:center;border-bottom:1px solid var(--line)}
  #cal.ikm.plan .km-h:first-child,#cal.ikm.plan .km-wk{display:none}
  #cal.ikm.plan .dayw{border-bottom:1px solid var(--line)}
  #cal.ikm.plan .day.km-d{min-height:58px!important;padding:8px 0 6px!important;gap:5px!important;border:0!important;border-radius:0!important;background:none!important;box-shadow:none!important;align-items:center;justify-content:flex-start;-webkit-tap-highlight-color:transparent}
  #cal.ikm.plan .day.km-d.out{visibility:hidden}
  #cal.ikm.plan .day.km-d.today{box-shadow:none!important;border:0!important}
  #cal.ikm.plan .kp-d .km-n{display:grid;place-items:center;width:34px;height:34px;margin:0 auto;padding:0!important;border-radius:50%;font-size:19px!important;font-weight:500!important;letter-spacing:-.01em;line-height:1;color:var(--fg);font-variant-numeric:tabular-nums;transition:background .15s,color .15s}
  #cal.ikm.plan .kp-d.we .km-n,#cal.ikm.plan .kp-d.past .km-n{color:var(--fg-3)}
  #cal.ikm.plan .kp-d.today .km-n{background:#E8492C;color:#fff;font-weight:600!important}
  #cal.ikm.plan .kp-d.msel:not(.today) .km-n{background:var(--fg);color:var(--bg);font-weight:600!important}
  #cal.ikm.plan .kp-d.past{background:none!important}
  #cal.ikm.plan .kp-pill,#cal.ikm.plan .kp-aps,#cal.ikm.plan .kp-add{display:none!important}
  .kp-m{display:flex;justify-content:center;gap:3px;height:6px}
  .kp-m i{width:6px;height:6px;border-radius:50%;background:var(--c)}
  .kp-m i.ap{background:var(--fg-3)}
  .kp-m i.fl{background:transparent;box-shadow:inset 0 0 0 1.5px #C2381F}
  /* the agenda of the chosen day */
  .km-agenda{display:block;margin:18px 0 8px;padding:16px 16px 12px;border-radius:22px;background:var(--surface);box-shadow:0 1px 0 var(--line),0 12px 30px -22px rgba(20,16,40,.35)}
  .km-agenda header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:6px}
  .km-agenda h3{margin:0;font-size:20px;font-weight:700;letter-spacing:-.015em;text-transform:none}
  .km-agenda header p{margin:2px 0 0;font-size:13px;color:var(--fg-3)}
  .ag-add{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;border:0;background:var(--fg);color:var(--bg)}
  .ag-add svg{width:15px;height:15px}
  .km-agenda ul{list-style:none;margin:6px 0 0;padding:0}
  .ag-r{display:grid;grid-template-columns:46px 4px minmax(0,1fr) auto;align-items:center;gap:10px;padding:11px 0;border-top:1px solid var(--line)}
  .ag-r:first-child{border-top:0}
  .ag-tm{font-size:13px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--fg-2);text-align:right}
  .ag-bar{align-self:stretch;min-height:34px;border-radius:2px;background:var(--c,var(--fg-3))}
  .ag-r.ap .ag-bar{background:repeating-linear-gradient(180deg,var(--fg-3) 0 4px,transparent 4px 7px)}
  .ag-tt{display:grid;gap:2px;min-width:0}
  .ag-tt>span{font-size:15px;font-weight:500;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .ag-tt small{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--fg-3);overflow:hidden;white-space:nowrap}
  .ag-tt small b{font-weight:800;color:var(--fg-2)}
  .ag-tt small svg{width:10px;height:10px}
  .ag-r.done .ag-tt>span{color:var(--fg-3);text-decoration:line-through}
  .ag-ok{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:#36AE9B;color:#fff}
  .ag-e{margin:10px 0 4px;font-size:14px;color:var(--fg-3)}
  .ag-go{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;height:44px;margin-top:10px;border:0;border-radius:14px;background:var(--empty);color:var(--fg);font-size:15px;font-weight:600}
}
/* v84 · the phone's chrome: one tidy row under the views (date · talk · stopwatch), a smaller floating Hoshi,
   and the month's head without the repeated arrows */
@media (max-width:520px){
  #micTop{width:44px;height:44px;padding:0!important;gap:0!important;font-size:0!important;border-radius:50%;justify-content:center}
  #micTop svg{width:17px;height:17px}
  #fsTop{width:44px;height:44px}
  .bar .datenav{flex:1 1 auto;min-width:0}
  .bar .datenav #dateLabel{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .bf-btn{width:66px;height:66px}
  .bf-btn .bud{font-size:70px}
}
@media (max-width:700px){
  #monthView .month-h{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:6px 0 14px}
  #monthView .month-h .nav,#monthView .km-segw,#monthView .mg-t{display:none!important}
  #monthView #monthTitle{font-size:34px;font-weight:700;letter-spacing:-.025em;text-transform:capitalize;margin:0}
  #monthView #monthStats{display:block;margin:0;padding:0;background:none;border:0;box-shadow:none}
  #monthView #monthStats .mg-set{padding:0;background:none;border:0;box-shadow:none}
  #monthView #monthStats .mg-set .btn{height:36px;padding:0 14px;font-size:13px;border-width:1.5px}
}
@media (max-width:700px){
  #monthView #monthStats{flex:none!important;width:auto!important;min-width:0}
  #monthView #monthStats .mg-set .btn{width:auto!important}
  #cal.ikm.plan .day.km-d{align-items:center!important;text-align:center!important}
}
@media (max-width:520px){
  #bfBtn.bf-btn{width:64px!important;height:64px!important}
  #bfBtn.bf-btn .bud{font-size:64px!important}
}
@media (max-width:700px){ #cal.ikm.plan .kp-d .km-n{justify-content:center!important;align-content:center!important} }
@media (max-width:360px){
  .bar .datenav button:not(#dateLabel){width:34px!important;min-width:34px!important;height:40px}
  .bar .datenav #dateLabel{font-size:14px;padding:0 10px;height:40px}
  #micTop,#fsTop{width:40px!important;height:40px!important}
  .bar .bar-mid{gap:6px!important}
  #monthView #monthTitle{font-size:28px}
}
@media (max-width:520px){
  .bar-in .bar-mid{column-gap:8px!important}
  .bar .datenav{flex:1 1 0!important;min-width:0!important;display:flex}
  .bar .datenav #dateLabel{flex:1 1 auto;min-width:0}
}

/* v85 · Week planner on the phone: 2 days at a time (3 on a wide phone), a strip of the 7 days to jump, the hours inside
   their own scroll with the day heads pinned on top — nothing cut, nothing under the top bar */
.pl-pg{display:none}
@media (max-width:700px){
  .pl-pg{display:flex;align-items:center;gap:6px;margin:4px 0 10px}
  .pl-pa{flex:none;display:grid;place-items:center;width:36px;height:44px;border:0;border-radius:12px;background:var(--empty);color:var(--fg);font-size:20px;font-weight:600}
  .pl-ds{flex:1;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:2px;padding:3px;border-radius:14px;background:var(--empty)}
  .pl-ds button{display:grid;justify-items:center;gap:1px;padding:5px 0;border:0;border-radius:11px;background:none;color:var(--fg-2);-webkit-tap-highlight-color:transparent}
  .pl-ds button span{font-size:10.5px;font-weight:600;color:var(--fg-3)}
  .pl-ds button b{font-family:var(--font-num);font-size:16px;font-weight:600;font-variant-numeric:tabular-nums}
  .pl-ds button.on{background:var(--surface);color:var(--fg);box-shadow:0 1px 3px rgba(20,16,40,.12)}
  .pl-ds button.today b{color:#E8492C}
  .ikp-planner .pl-scroll{max-height:68vh;max-height:68dvh;overflow:auto;margin:0;padding:0 0 10px;border-radius:14px;scroll-padding-top:64px}
  .ikp-planner .pl-g{grid-template-columns:40px repeat(var(--nd,2),minmax(0,1fr))!important;min-width:0!important;column-gap:8px!important;row-gap:5px!important}
  .ikp-planner .pl-g .pl-hd{grid-template-columns:subgrid}
  .ikp-planner .pl-g .ph{padding:8px 2px 8px!important}
  .ikp-planner .pl-g .ph b{font-size:22px}
  .ikp-planner .pl-g .ph span{font-size:11px}
  .ikp-planner .pl-g .ph em{font-size:9.5px;padding:0 6px}
  .ikp-planner .pl-g .hl{font-size:12px!important}
  .ikp-planner .pl-g .hl.now b{font-size:11px;padding:2px 6px;margin-left:-4px}
  .ikp-planner .ikp-hr{gap:2px}
}
@media (max-width:700px){ @supports not (grid-template-columns:subgrid){ .ikp-planner .pl-g .pl-hd{grid-template-columns:40px repeat(var(--nd,2),minmax(0,1fr))!important} } }
/* v85 · the week's dark bar on the phone: week and score on one line, the caption under them, nothing on top of anything */
@media (max-width:700px){
  .yh-fold{grid-template-columns:minmax(0,1fr) auto!important;gap:10px 14px!important;padding:20px 20px 18px!important}
  .yh-fold .yh-fw{order:1;min-width:0}
  .yh-fold .yh-eb{white-space:nowrap}
  .yh-fold .yh-fs{display:contents}
  .yh-fold .yh-score{order:2;align-self:center;justify-self:end;margin:0!important}
  .yh-fold .yh-cap{order:3;grid-column:1 / -1;margin:0!important;white-space:normal!important;text-align:left;font-size:13px;line-height:1.4}
  .yh-fold .yh-fj{order:5}
  .yh-fold .yh-more{order:9}
}

/* v86 · the top bar, tidy: brand · views and date · then the day's tools as one quiet row of round icons (their names on
   hover), the saved state as a small dot, and Close the day as the one dark button at the end */
@media (min-width:701px){
  .bar-in{column-gap:18px!important}
  .bar-in .bar-mid{flex-wrap:nowrap!important;justify-content:flex-start!important;gap:10px!important}
  .bar-in .bar-mid::before{content:"";order:3;flex:1 1 0;min-width:0}
  .bar-mid .views-seg{order:1;flex:none}
  .bar-mid .datenav{order:2;flex:none}
  .bar-mid #micTop{order:4}.bar-mid #brkTop{order:5}.bar-mid #wlTop{order:6}.bar-mid #fsTop{order:7}.bar-mid #saveState{order:8}.bar-mid #closeDay{order:9}
  .bar #micTop,.bar #brkTop,.bar #wlTop,.bar #fsTop{flex:none;box-sizing:border-box;height:40px;min-width:40px;border-radius:999px}
  .bar #micTop,.bar #brkTop:not([aria-pressed="true"]),.bar #wlTop:not(.on),.bar #fsTop:has(#fsTopT:empty){width:40px;padding:0!important;gap:0!important;justify-content:center}
  .bar #micTop{font-size:0!important}
  .bar #micTop svg{width:16px;height:16px}
  .bar #brkTop:not([aria-pressed="true"]) span,.bar #wlTop:not(.on) span{display:none}
  .bar #wlTop{position:relative}
  .bar #wlTop em{position:absolute;top:-4px;right:-4px;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:#E8492C;color:#fff;font-style:normal;font-size:10.5px;font-weight:700;line-height:18px;text-align:center}
  .bar #brkTop[aria-pressed="true"],.bar #wlTop.on{padding:0 14px 0 12px!important}
  .bar #saveState{flex:none;min-width:0!important;width:8px;height:8px;padding:0;border-radius:50%;background:#36AE9B;font-size:0!important;color:transparent;overflow:hidden;display:block!important}
  .bar #saveState.busy{background:#F2B544}
  .bar #saveState.err{width:auto;height:auto;border-radius:0;background:none;font-size:12px!important;color:#C2381F;white-space:nowrap;max-width:220px;text-overflow:ellipsis}
  .bar #closeDay{flex:none;height:40px;margin-left:4px}
}
@media (min-width:701px) and (max-width:1560px){ .me-name{display:none} .me{padding:0 5px!important} }
@media (min-width:701px) and (max-width:1420px){
  .bar-in{row-gap:12px!important}
  .bar-in .bar-mid{grid-column:1 / -1!important;grid-row:2!important;flex-wrap:wrap!important;row-gap:10px!important}
}
@media (min-width:701px) and (max-width:1120px){
  .bar #closeDay{width:40px;padding:0!important;justify-content:center;gap:0}
  .bar #closeDay span{display:none}
}
@media (min-width:701px) and (max-width:1120px){
  .bar-mid .views-seg button{padding-inline:12px!important}
  .bar-in .bar-mid{column-gap:8px!important}
}
@media (min-width:701px) and (max-width:960px){
  .bar-in .bar-mid::before{flex:0 0 100%;height:0}
}
@media (min-width:701px){
  .bar-in.two{row-gap:12px!important}
  .bar-in.two .bar-mid{grid-column:1 / -1!important;grid-row:2!important;flex-wrap:wrap!important;row-gap:10px!important}
}

/* v87 · Fronts: the multitask control tower — a white floating window like the stopwatch, one row per open front */
.tw{position:fixed;z-index:73;left:0;top:0;width:min(420px,calc(100vw - 16px));max-height:min(78vh,720px);display:flex;flex-direction:column;gap:8px;box-sizing:border-box;padding:12px 14px 12px;background:var(--surface);border-radius:22px;box-shadow:0 0 0 1px var(--line-strong),0 24px 50px -28px rgba(20,16,40,.45)}
.tw[hidden]{display:none}
.tw.moving{box-shadow:0 0 0 1.5px var(--fg),0 24px 50px -28px rgba(20,16,40,.45)}
.tw-h{display:flex;align-items:center;justify-content:space-between;gap:10px;cursor:grab;touch-action:none;user-select:none;padding:2px 2px 4px}
.tw.moving .tw-h{cursor:grabbing}
.tw-ht{display:flex;align-items:baseline;gap:8px}
.tw-ht b{font-family:var(--font-num);font-size:13px;font-weight:700;color:var(--fg-3)}
.tw-ha{display:flex;gap:4px}
.tw-pick{display:grid;gap:4px;max-height:220px;overflow:auto;padding:6px;border-radius:14px;background:var(--empty)}
.tw-pick[hidden]{display:none}
.tw-pick button{display:flex;align-items:center;gap:8px;padding:7px 8px;border:0;border-radius:10px;background:var(--surface);text-align:left;font-size:13px;color:var(--fg)}
.tw-pick button b{flex:none;font-family:var(--font-num);font-size:11px;font-weight:800;padding:2px 6px;border-radius:6px;background:var(--fg);color:var(--bg)}
.tw-pick button span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tw-pick p{margin:4px;font-size:12.5px;color:var(--fg-3)}
.tw-sc{position:relative;height:14px;margin:0 52px 0 0}
.tw-sc i{position:absolute;bottom:0;width:1px;height:4px;background:var(--line-strong)}
.tw-sc i.h{height:8px;background:var(--fg-3)}
.tw-sc i b{position:absolute;bottom:9px;left:0;transform:translateX(-50%);font-family:var(--font-num);font-size:9.5px;font-weight:700;color:var(--fg-3);white-space:nowrap}
.tw-l{list-style:none;margin:0;padding:0;display:grid;gap:6px;overflow:auto;overscroll-behavior:contain}
.tw-r{display:grid;grid-template-columns:minmax(0,1fr) 46px;grid-template-rows:auto auto auto;column-gap:6px;row-gap:5px;padding:10px 10px 9px;border-radius:14px;background:var(--empty);transition:transform .25s ease,opacity .25s ease}
.tw-r.next{box-shadow:inset 3px 0 0 #E8492C}
.tw-r.sent{transform:translateY(14px);opacity:.25}
.tw-a{grid-column:1 / -1;display:flex;align-items:center;gap:8px;min-width:0}
.tw-c{flex:none;font-family:var(--font-num);font-size:11px;font-weight:800;padding:2px 7px;border-radius:6px;background:var(--fg);color:var(--bg)}
.tw-t{flex:1;min-width:0;font-size:13.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tw-i{flex:none;font-size:7px;letter-spacing:1px;color:#E8492C}
.tw-i u{text-decoration:none;color:var(--line-strong)}
.tw-x{flex:none;width:22px;height:22px;border:0;border-radius:50%;background:none;color:var(--fg-3);font-size:16px;line-height:1;opacity:0;transition:opacity .15s}
.tw-r:hover .tw-x,.tw-x:focus-visible{opacity:1}
@media (hover:none){ .tw-x{opacity:.6} }
.tw-b{grid-column:1;position:relative;height:12px;border-radius:4px;overflow:hidden;
  background:repeating-linear-gradient(90deg,transparent 0 calc(var(--tw10,10%) - 1px),color-mix(in srgb,var(--fg) 10%,transparent) calc(var(--tw10,10%) - 1px) var(--tw10,10%)),var(--surface)}
.tw-p{position:absolute;left:0;top:0;bottom:0;background:var(--fg);border-radius:4px 0 0 4px;transition:width .6s ease}
.tw-r.near .tw-p{background:#D9A033}
.tw-o{position:absolute;top:0;bottom:0;background:#F08A3C}
.tw-e{position:absolute;top:-2px;bottom:-2px;width:2px;margin-left:-1px;background:#0C0B10;box-shadow:0 0 0 1px var(--surface)}
.tw-r.paused .tw-p{opacity:.45}
.tw-m{grid-column:1;display:flex;flex-wrap:wrap;gap:2px 10px;font-size:11.5px;color:var(--fg-3);font-variant-numeric:tabular-nums}
.tw-d{font-weight:700;color:var(--fg-2)}
.tw-r.over .tw-d{color:#E2661E}
.tw-ps{font-weight:700}
.tw-z{grid-column:2;grid-row:2 / span 2;display:grid;justify-items:center;align-content:center;gap:3px}
.tw-n{font-style:normal;font-family:var(--font-num);font-size:11px;font-weight:700;color:var(--fg-2)}
.tw-ok{display:grid;place-items:center;width:34px;height:34px;border:0;border-radius:50%;background:#36AE9B;color:#fff;box-shadow:0 4px 10px -6px rgba(31,138,91,.6);transition:transform .1s}
.tw-ok:active{transform:scale(.9)}
.tw-e0{padding:18px 8px;text-align:center;font-size:13px;color:var(--fg-3)}
.tw-f{margin:2px 2px 0;font-size:11px;color:var(--fg-3)}
.tw-f b{color:#36AE9B}
.bar #twTop{position:relative}
.bar #twTop.on{background:var(--fg);color:var(--bg)}
.bar #twTop em{position:absolute;top:-4px;right:-4px;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--fg);color:var(--bg);font-style:normal;font-size:10.5px;font-weight:700;line-height:18px;text-align:center;box-shadow:0 0 0 2px var(--bg)}
.bar #twTop.on em{background:#E8492C;color:#fff}
@media (min-width:701px){
  .bar-mid #twTop{order:6}
  .bar #twTop{flex:none;box-sizing:border-box;width:40px;height:40px;min-width:40px;padding:0!important;border-radius:999px;justify-content:center}
}
@media (max-width:700px){ .bar #twTop{width:44px;height:44px;padding:0;border-radius:50%;justify-content:center} .tw{max-height:70vh} }

/* v88 · Fronts: each row is the bar itself (filled like a playing task card), wider window, room for the title */
.tw{width:min(600px,calc(100vw - 16px));max-height:min(84vh,860px);padding:14px 16px 12px;gap:10px}
.tw-sc{margin:0;height:16px}
.tw-l{gap:8px}
.tw-r{position:relative;isolation:isolate;overflow:hidden;grid-template-columns:minmax(0,1fr) 56px;column-gap:10px;row-gap:8px;padding:14px 14px 13px 16px;border-radius:16px;background:var(--empty)}
.tw-r.next{box-shadow:none}
.tw-r.next::after{content:"";position:absolute;z-index:3;left:0;top:0;bottom:0;width:4px;background:#E8492C;pointer-events:none}
.tw-r > :not(.tw-b){position:relative;z-index:2}
.tw-b{position:absolute;inset:0;z-index:0;grid-column:auto;height:auto;border-radius:0;overflow:hidden;background:none;pointer-events:none}
.tw-p{position:absolute;left:0;top:0;bottom:0;border-radius:0;background:var(--ongoing,#F2B544);transition:width .6s ease}
.tw-r.near .tw-p{background:var(--ongoing,#F2B544)}
.tw-r.paused .tw-p{opacity:1;background:color-mix(in srgb,var(--ongoing,#F2B544) 42%,var(--empty))}
.tw-o{position:absolute;top:0;bottom:0;background:#EE7A35}
.tw-g{position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 calc(var(--tw10,10%) - 1px),rgba(12,11,16,.07) calc(var(--tw10,10%) - 1px) var(--tw10,10%))}
.tw-e{top:0;bottom:0;width:2px;margin-left:-1px;background:#0C0B10;box-shadow:none;opacity:.85}
.tw-a{gap:10px;align-items:flex-start}
.tw-c{font-size:12.5px;padding:3px 8px;border-radius:7px;margin-top:1px}
.tw-t{font-size:16.5px;font-weight:600;line-height:1.3;white-space:normal;text-overflow:clip;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;color:var(--fg)}
.tw-i{font-size:8px;margin-top:7px}
.tw-x{margin-top:1px}
.tw-m{gap:3px 12px;font-size:12.5px;color:var(--fg-2)}
.tw-d{color:var(--fg)}
.tw-r.over .tw-d{color:var(--fg);font-weight:800}
.tw-r.over .tw-d::before{content:"";display:inline-block;width:7px;height:7px;margin-right:5px;border-radius:50%;background:#C8461A;vertical-align:1px}
.tw-z{grid-row:1 / span 2}
.tw-n{font-size:12px;color:var(--fg)}
.tw-ok{width:40px;height:40px}
.tw-f{font-size:11.5px}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .tw-p{background:rgba(242,181,68,.40)}
  :root:not([data-theme="light"]) .tw-r.paused .tw-p{background:rgba(242,181,68,.18)}
  :root:not([data-theme="light"]) .tw-o{background:rgba(238,122,53,.62)}
  :root:not([data-theme="light"]) .tw-g{background:repeating-linear-gradient(90deg,transparent 0 calc(var(--tw10,10%) - 1px),rgba(255,255,255,.07) calc(var(--tw10,10%) - 1px) var(--tw10,10%))}
  :root:not([data-theme="light"]) .tw-e{background:#F1EDE6}
}
:root[data-theme="dark"] .tw-p{background:rgba(242,181,68,.40)}
:root[data-theme="dark"] .tw-r.paused .tw-p{background:rgba(242,181,68,.18)}
:root[data-theme="dark"] .tw-o{background:rgba(238,122,53,.62)}
:root[data-theme="dark"] .tw-g{background:repeating-linear-gradient(90deg,transparent 0 calc(var(--tw10,10%) - 1px),rgba(255,255,255,.07) calc(var(--tw10,10%) - 1px) var(--tw10,10%))}
:root[data-theme="dark"] .tw-e{background:#F1EDE6}
@media (max-width:640px){ .tw-t{font-size:15px} .tw-r{grid-template-columns:minmax(0,1fr) 48px} }
.tw-r > .tw-a{grid-column:1;grid-row:1}
.tw-r > .tw-m{grid-column:1;grid-row:2}
.tw-r > .tw-z{grid-column:2;grid-row:1 / span 2;align-content:center}
.tw-e{opacity:1;width:2px;background:linear-gradient(180deg,#0C0B10 0 10px,rgba(12,11,16,.28) 10px calc(100% - 10px),#0C0B10 calc(100% - 10px))}
.tw-i{padding:3px 6px;border-radius:999px;background:rgba(255,255,255,.82);line-height:1}
.tw-m{color:var(--fg)}
.tw-m > span:not(.tw-d){opacity:.72}
.tw-n{padding:1px 6px;border-radius:999px;background:rgba(255,255,255,.82)}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .tw-i, :root:not([data-theme="light"]) .tw-n{background:rgba(0,0,0,.35)} :root:not([data-theme="light"]) .tw-e{background:linear-gradient(180deg,#F1EDE6 0 10px,rgba(241,237,230,.3) 10px calc(100% - 10px),#F1EDE6 calc(100% - 10px))} }
:root[data-theme="dark"] .tw-i, :root[data-theme="dark"] .tw-n{background:rgba(0,0,0,.35)}
:root[data-theme="dark"] .tw-e{background:linear-gradient(180deg,#F1EDE6 0 10px,rgba(241,237,230,.3) 10px calc(100% - 10px),#F1EDE6 calc(100% - 10px))}
@media (max-width:640px){
  .tw-a{flex-wrap:wrap;row-gap:6px}
  .tw-t{flex:1 1 calc(100% - 56px)}
  .tw-i{margin:0 0 0 0;order:5}
  .tw-x{order:6}
}

/* v89 · Fronts: the task on the left (code + whole title), the bar on the right holds the colour and the numbers */
.tw{--twL:260px;--twP:10px;--twG:12px;--twZ:56px;width:min(820px,calc(100vw - 16px))}
.tw-sc{margin:0 calc(var(--twP) + var(--twZ) + var(--twG)) 0 calc(var(--twP) + var(--twL) + var(--twG))}
.tw-r{grid-template-columns:var(--twL) minmax(0,1fr) var(--twZ);grid-template-rows:auto;column-gap:var(--twG);row-gap:0;padding:var(--twP);align-items:stretch}
.tw-r > .tw-a{grid-column:1;grid-row:1;display:flex;flex-direction:column;align-items:stretch;gap:7px;padding:4px 2px 4px 6px;flex-wrap:nowrap}
.tw-a1{display:flex;align-items:center;gap:8px}
.tw-a1 .tw-x{margin:0 0 0 auto}
.tw-i{margin:0;order:0}
.tw-t{flex:none;font-size:16px;line-height:1.3;-webkit-line-clamp:3}
.tw-r > .tw-b{grid-column:2;grid-row:1;position:relative;inset:auto;z-index:1;min-height:76px;border-radius:12px;overflow:hidden;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line)}
.tw-b .tw-p{border-radius:0}
.tw-b > .tw-m{position:absolute;z-index:2;left:14px;right:14px;bottom:10px;display:block;font-size:12.5px;color:var(--fg)}
.tw-m1{display:flex;flex-wrap:wrap;gap:2px 10px;opacity:.72;margin-bottom:2px}
.tw-m1 .tw-ps{font-weight:700;opacity:1}
.tw-m2{display:flex;align-items:baseline;flex-wrap:wrap;gap:2px 10px}
.tw-el{font-family:var(--font-num);font-size:22px;font-weight:700;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.tw-m .tw-d{font-size:13px;font-weight:700;color:var(--fg)}
.tw-r.over .tw-m .tw-d{font-weight:800}
.tw-pc{position:absolute;z-index:3;top:10px;margin-left:8px;padding:3px 8px;border-radius:999px;background:#C8461A;color:#fff;font-style:normal;font-family:var(--font-num);font-size:12px;font-weight:800;line-height:1.2;white-space:nowrap;box-shadow:0 4px 10px -6px rgba(120,40,10,.6)}
.tw-pc.in{margin-left:0;transform:translateX(calc(-100% - 8px))}
.tw-r > .tw-z{grid-column:3;grid-row:1}
.tw-r.next::after{width:4px}
@media (max-width:700px){
  .tw{--twZ:48px}
  .tw-sc{margin:0 calc(var(--twP) + var(--twZ) + var(--twG)) 0 var(--twP)}
  .tw-r{grid-template-columns:minmax(0,1fr) var(--twZ);row-gap:10px}
  .tw-r > .tw-a{grid-column:1;grid-row:1;padding:2px}
  .tw-r > .tw-b{grid-column:1;grid-row:2}
  .tw-r > .tw-z{grid-column:2;grid-row:1 / span 2}
  .tw-t{font-size:15px;-webkit-line-clamp:2}
}
.tw-l{grid-auto-rows:max-content;align-content:start}
@media (max-width:700px){ .tw-r > .tw-b{min-height:90px} .tw-pc{top:8px} }
/* v90 · impact in Fronts as bolts, like the task card (not dots) */
.tw-i{display:inline-flex;align-items:center;gap:1px;padding:3px 7px;font-size:0;letter-spacing:0}
.tw-i i{display:block;width:12px;height:12px;color:var(--fg);opacity:.16}
.tw-i i.on{opacity:1}
.tw-i svg{display:block;width:12px;height:12px}
.tw-i i,.tw-i svg{width:14px;height:14px}.tw-i i{opacity:.2}
/* v92 · effective work time: how much of it went to tasks */
.wt-c b .eff-t{margin-left:8px;font-size:12.5px;font-weight:600;color:var(--fg-2);font-family:inherit;letter-spacing:0;white-space:nowrap}